Add Ask AI chat drawer widget for standalone API docs#380
Conversation
Enable the Ask AI chat drawer on Bump.sh API documentation pages by: - Create chat-panel-bump.hbs partial with drawer HTML and inline JS - Add chat-panel.json context for widget compilation - Update gulpfile.js with compile:widgets task and file watchers - Show Ask AI button in header for standalone widgets - Add widget testing documentation to CLAUDE.md The chat drawer opens from the right side (not a modal) and supports: - Click Ask AI button or Cmd+K keyboard shortcut - State persistence via localStorage - Auto-recompilation on file changes during gulp preview
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThis PR introduces a new Bump.sh standalone chat panel widget to the documentation UI. It includes a new context configuration file ( Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@gulpfile.js`:
- Around line 194-208: The widget watcher currently watches its generated
outputs and causes recursive rebuilds; update the widgetSources array used by
watch(...) so it no longer includes
`${srcDir}/static/assets/widgets/css/*-bump.css` (the cssOutDir from
compile-partial.js) and instead watches the real inputs
`${srcDir}/css/*-bump.css` (cssSrcDir that compile-partial.js reads). Keep the
rest of widgetSources (partials and context/*.json) and leave the main preview
watcher as-is; this change prevents compileWidgetsTask from retriggering itself
while still triggering the series(compileWidgetsTask, buildTask) when true
source files change.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: b1bbc153-2285-4c04-b743-2d60660d62b6
📒 Files selected for processing (5)
CLAUDE.mdcontext/chat-panel.jsongulpfile.jssrc/partials/chat-panel-bump.hbssrc/partials/header-content.hbs
Use justify-content: space-between on .navbar.topbar to push nav action buttons (search, Ask AI, theme toggle) to the right side, with the brand/logo on the left.
- Fix search button visibility: use dark colors on light backgrounds - Fix navbar layout: add display flex, proper positioning, box-sizing - Add chat-panel-bump.css to src/css for widget compilation - Fix widget-test.html CSS paths to use /_/assets/widgets/css/
Since DOMContentLoaded has already fired when widgets load via fetch, the theme toggle initialization in head-bump.html never runs. Added initThemeToggle() function that runs after all widgets load to manually set up the theme toggle click handler.
When loaded via fetch() (e.g., widget test page), DOMContentLoaded has already fired so the mount never happens. Now checks document.readyState and mounts immediately if DOM is ready, or waits for DOMContentLoaded if still loading. Also added data-mounted attribute to prevent duplicate mounts.
Changed widgetSources to watch ${srcDir}/css/*-bump.css (source input) instead
of ${srcDir}/static/assets/widgets/css/*-bump.css (compiled output).
This prevents recursive rebuilds when compile-partial.js copies CSS files to
the output directory, which was triggering the watcher again.
Addresses CodeRabbit review comment.
When a page attribute is set to just 'current' (which is not a valid Antora resource ID), return the current page URL or '#' instead of logging an error. This gracefully handles misconfigured attributes that use 'current' when they should use a proper xref like 'ROOT:index.adoc' or similar.
micheleRP
left a comment
micheleRP
left a comment
There was a problem hiding this comment.
Review
Approving — the chat drawer widget is well-scoped, the gulp watch loop is solid, and the preview test page is a nice addition.
A few non-blocking observations for follow-up:
Worth addressing
- Hardcoded production URL in
src/partials/chat-panel-bump.hbs—AskAI.bundle.jsis loaded fromhttps://docs.redpanda.com/_/js/AskAI.bundle.jsbased on awindow.location.hostnamecheck. If the docs site ever moves domains, or for testing on production-like hosts, this will break. Consider passing the bundle URL via a data attribute or context variable. - Kapa integration ID (
13dd3c3c-…) is committed inchat-panel-bump.hbs. Kapa integration IDs are usually meant to be public, but worth confirming once that we're happy committing it.
Minor
src/static/widget-test.html—<div id="embed-head"></div>is inside<head>. Invalid HTML; move below<body>. Low impact since it's a test page.src/css/chat-panel-bump.cssat 1176 lines is on the chunky side. TheKAPA SDK OVERRIDESsection is a natural seam if you want to split it later.
CodeRabbit finding
The bot flagged a risk of recursive rebuilds in gulpfile.js. Looking at the diff, you already watch ${srcDir}/css/*-bump.css (the source) and explicitly note this in a comment. Appears already addressed — safe to dismiss.
What works well
- Self-contained drawer with no extra runtime dependencies beyond
AskAI.bundle.js. - Cmd/Ctrl+K shortcut + localStorage state persistence.
- New
compile:widgetstask with file-watching gives a tight test loop. AskAI.jsxnow handles late-loaded DOM, which is what fetch-injected widgets need.- CLAUDE.md updated for future contributors.
- Move embed-head div from <head> to <body> in widget-test.html (invalid HTML) - Add comment documenting Kapa integration ID as intentionally public - Add window.ASKAI_BUNDLE_URL override for production URL configurability Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2 participants
Summary
chat-panel-bump.hbs) for Bump.sh API documentation pagescompile:widgetsgulp task with automatic file watching during previewChanges
src/partials/chat-panel-bump.hbscontext/chat-panel.jsongulpfile.jssrc/partials/header-content.hbsCLAUDE.mdPreview Links
Test the widget on these pages:
Test Plan