feat: integrate Flowise AI chatbot widget - #550
Open
jonathansmirnoff wants to merge 18 commits into
Open
Conversation
…ate feedback submissions Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace the navbar chat icon with an "Ask Rootstock" pill using the official Rootstock logo, and give the assistant a branded welcome message plus five starter prompts to guide first-time users. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Swizzle the Docusaurus CodeBlock buttons to add a spark button that opens the Flowise assistant prefilled with an explain-this-code prompt. Since flowise-embed 3.1.6 has no public send API, it drives the widget's shadow DOM: opens the window, sets the textarea via a composed InputEvent, and leaves the message for the user to review and send. The prompt ships a head+tail code excerpt plus a page/heading locator so the RAG bot can recover the full snippet. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Bot responses now expose the copy affordances the Flowise widget lacks: a copy button on every code block (injected via a shadow-root MutationObserver, delegated click, self-healing across SolidJS re-renders) and click-to-copy on inline code (chain IDs, RPC URLs, addresses in backticks). Also fixes light-mode readability: flowise forces code text to white via an inner CSS var, making it invisible on the light bubble. Code blocks now render on a dark panel in both themes, with an !important color override that beats flowise's var-based rule. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…badge Replace the solid contrast pill (and its uneven -26.5deg gray-gradient sheen) with a transparent outline pill that sits alongside the other navbar controls like the language dropdown. The orange logo badge is the constant brand anchor; border, label, and badge all flip with the theme via existing tokens (--rsk-input-border-color, --bs-contrast, --bs-primary). The logo now uses fill=currentColor so the badge tints it white. Extra left padding lets the badge clear the rounded left edge. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
# Conflicts: # package-lock.json # package.json # yarn.lock
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
Dependency ReviewThe following issues were found:
|
GHSA-xv26-6w52-cph6 (message corruption via protocol length header abuse) was flagged by the dependency-review CI check via the webpack-dev-server -> sockjs -> websocket-driver transitive chain.
flowise-embed@3.1.6 pulls solid-js@1.7.1, which pins seroval@^0.5.0 - a range with no patched release (fix landed in 1.5.3+). flowise-embed ships a pre-bundled dist (dist/web.js) so this transitive copy is never executed at runtime; force the patched version via overrides/resolutions to satisfy dependency-review.
Our lockfile had resolved @babel/preset-env to 7.27.2 (within @docusaurus/babel's declared ^7.25.9 range), which pulls in the unpatched @babel/plugin-transform-modules-systemjs@7.27.1 (GHSA-fv7c-fp4j-7gwp). main already resolves preset-env to 7.29.7, which pulls the patched 7.29.8 plugin. Align to that resolution.
…-severity advisories flowise-embed@3.1.6 ships its own dev-server dependency tree (axios, form-data, solid-js) as regular "dependencies". axios@1.17.0 and form-data@4.0.5 update within their already-declared semver ranges (GHSA-gcfj-64vw-6mp9, GHSA-hmw2-7cc7-3qxx). solid-js@1.7.1 is pinned exactly by flowise-embed and carries its own XSS advisory (GHSA-3qxh-p7jc-5xh6, fixed 1.9.4+), so it's forced via overrides/resolutions like seroval - safe since flowise-embed only ships a pre-bundled dist and never executes this installed copy. Remaining high-severity npm-audit findings (docusaurus toolchain, ws, lodash, etc.) are unchanged from main and pre-date this branch.
flowise-embed@3.1.6 pins multer@^1.4.5-lts.1 for its own dev server; the entire 1.x line is unpatched against 8 known DoS advisories (GHSA-44fp-w29j-9vj5 and others), fixed only in the 2.x rewrite. Forced via overrides/resolutions, same rationale as seroval/solid-js - this transitive copy is never executed since flowise-embed ships a pre-bundled browser dist.
Gates the navbar chatbot, its launcher button, and the code block "Ask Rootstock AI" button behind FLOWISE_CHATBOT_ENABLED, defaulting to enabled. Lets the chatbot be turned off without redeploying code.
Flip the kill switch to fail closed: the chatbot widget, navbar button, and code block button now only render when FLOWISE_CHATBOT_ENABLED is explicitly set to "true", instead of defaulting to enabled when unset.
Contributor
There was a problem hiding this comment.
Pull request overview
Integrates a Flowise-hosted “Rootstock AI Assistant” into the Docusaurus dev portal, adding a navbar entry point plus code-block affordances to open/prefill the chat, with additional theming and interaction patches applied inside the widget’s shadow DOM.
Changes:
- Add Flowise chatbot mount + navbar trigger button, gated by Docusaurus
customFieldsenv configuration. - Swizzle code-block buttons to include an “Ask Rootstock AI” action that opens the chatbot prefilled with a prompt built from the code block + nearest heading.
- Add in-widget UX patches (theme overrides, copy-to-clipboard for code blocks/inline code, feedback disabling) and add
flowise-embeddependency.
Reviewed changes
Copilot reviewed 14 out of 16 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/theme/Navbar/FlowiseChatbot/index.js | Mounts/configures flowise-embed, injects shadow-DOM theming and UX patches (copy/feedback/open tracking). |
| src/theme/Navbar/FlowiseButton/index.js | Adds navbar “Ask Rootstock” trigger button to open the widget. |
| src/theme/Navbar/Content/index.js | Wires the new FlowiseButton into the right side of the navbar. |
| src/theme/Layout/index.js | Mounts the FlowiseChatbot widget at the layout root so it’s available site-wide. |
| src/theme/CodeBlock/Buttons/styles.module.css | Swizzled Docusaurus CodeBlock button group styling baseline. |
| src/theme/CodeBlock/Buttons/index.js | Swizzled CodeBlock buttons to include the new Ask AI button. |
| src/theme/CodeBlock/Buttons/AskAiButton/styles.module.css | Adds icon/success-state styling for the Ask AI button. |
| src/theme/CodeBlock/Buttons/AskAiButton/index.js | Implements Ask AI button behavior and analytics event. |
| src/theme/CodeBlock/Buttons/AskAiButton/askFlowise.js | Builds prompts from code blocks and drives the Flowise widget via shadow DOM to open/prefill. |
| src/scss/components/_ask-rootstock-button.scss | Styles the navbar “Ask Rootstock” pill/button to match portal tokens. |
| src/scss/app.scss | Includes the new Ask Rootstock button SCSS in the main bundle. |
| README.md | Documents env var toggle for enabling the chatbot. |
| package.json | Adds flowise-embed and pins transitive deps via overrides/resolutions. |
| docusaurus.config.js | Adds Flowise-related env vars into customFields.keys for runtime gating/config. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+5
to
+12
| function openChat() { | ||
| pushDataLayer('aiChatbotOpen', { componentId: 'flowise-chatbot-button' }); | ||
| document | ||
| .querySelector('flowise-chatbot') | ||
| ?.shadowRoot | ||
| ?.querySelector('button') | ||
| ?.click(); | ||
| } |
Comment on lines
+478
to
+480
| // Update the floating button — flowise sets its bg as an inline style | ||
| const btn = el.shadowRoot.querySelector('button'); | ||
| if (btn) btn.style.setProperty('background-color', t.brand); |
Comment on lines
+417
to
+441
| // Inline code → copy its value (skip code inside <pre>; that's the block above). | ||
| const inline = e.target?.closest('code'); | ||
| if (inline && !inline.closest('pre') && inline.closest('.bot-markdown-content')) { | ||
| const text = inline.textContent ?? ''; | ||
| if (!text.trim()) return; | ||
| if (await copyText(text)) { | ||
| pushDataLayer('aiChatbotValueCopy', { componentId: 'flowise-chatbot-value-copy' }); | ||
| flashCopied(inline, 1200); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| // Batch streaming mutations; re-inject buttons as new code blocks appear. | ||
| let scheduled = null; | ||
| const observer = new MutationObserver(() => { | ||
| if (scheduled) return; | ||
| scheduled = window.setTimeout(() => { | ||
| scheduled = null; | ||
| injectCopyButtons(shadowRoot); | ||
| }, 60); | ||
| }); | ||
| observer.observe(shadowRoot, { childList: true, subtree: true }); | ||
| shadowRoot._copyObserver = observer; | ||
|
|
||
| injectCopyButtons(shadowRoot); |
Comment on lines
+34
to
+37
| ### Environment Variables | ||
|
|
||
| - `FLOWISE_CHATBOT_ENABLED` (optional): set to `true` to enable the "Ask Rootstock AI" chatbot widget, navbar button, and code block button. Defaults to disabled. | ||
|
|
Comment on lines
+71
to
+75
| "overrides": { | ||
| "seroval": "^1.6.2", | ||
| "solid-js": "^1.9.15", | ||
| "multer": "^2.2.0" | ||
| }, |
Comment on lines
+499
to
+511
| // Wait for the flowise-chatbot shadow DOM to be ready | ||
| bodyObserver = new MutationObserver(applyTheme); | ||
| bodyObserver.observe(document.body, { childList: true, subtree: true }); | ||
|
|
||
| // Watch data-theme changes on <html> to reapply on mode switch | ||
| themeObserver = new MutationObserver(applyTheme); | ||
| themeObserver.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ['data-theme'], | ||
| }); | ||
|
|
||
| applyTheme(); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
flowise-embed, themed to match the portal's light/dark design tokens.FlowiseChatbot(navbar widget) andFlowiseButtoncomponents, themed via shadow-DOM CSS injection for light/dark mode.AskAiButton).Testing
yarn buildsuccessfully after merging latestmain(lockfiles regenerated, no conflicts). Verified the Flowise backend (local Docker instance) responds correctly to/api/v1/prediction/{id}with proper CORS for the dev origin.Refs