From f7e23f0c7495460e9644262daf9aaf5c9c5f76bc Mon Sep 17 00:00:00 2001 From: Jackson Yu Date: Thu, 30 Apr 2026 14:05:20 -0400 Subject: [PATCH 1/3] wire docs assistant.js to agent-0 + sync iframe theme to parent docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit assistant.js changes: - DEFAULT_BOT_URL / ADK_BOT_URL constants; iframe.src is swapped at init and on every SPA route change based on isAdkRoute(). - On `requestTheme` messages from the iframe, post the current state back as a themeChanged event. - MutationObserver on class — broadcasts themeChanged to the iframe whenever the docs theme toggles. ⚠️ ADK_BOT_URL is currently set to the local dev server (http://localhost:5173/docs-bot/agent-0-copilot/) for prototyping the three frontend designs. Swap it to the gh-pages deploy URL or the production cdn.botpress.cloud URL before pushing this branch. --- assistant.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/assistant.js b/assistant.js index b8d96f56..d6453ee3 100644 --- a/assistant.js +++ b/assistant.js @@ -50,11 +50,34 @@ botContainer.id = 'docs-bot' botContainer.classList.add('bot-iframe-container') + // The default docs bot covers everything under botpress.com/docs. + // The ADK section gets its own bot (agent-0) with knowledge scoped to + // ADK pages + the ADK skill references. The iframe URL is swapped on + // route changes — see checkPathChange below. + const DEFAULT_BOT_URL = 'https://botpress.github.io/docs-bot/' + // DEV: prototyping multiple agent-0 frontend designs in parallel. Each + // runs on its own port so we can compare side-by-side. + // Design 1 (copilot — current): http://localhost:5173/docs-bot/agent-0-copilot/ + // Design 2 (TBD): http://localhost:5174/docs-bot/agent-0-design-2/ + // Design 3 (TBD): http://localhost:5175/docs-bot/agent-0-design-3/ + // Swap ADK_BOT_URL to flip which design loads in the iframe. Revert to + // the production URL or the gh-pages deploy URL before pushing. + const ADK_BOT_URL = 'http://localhost:5173/docs-bot/agent-0-copilot/' + + function isAdkRoute() { + const path = window.location.pathname + return path === '/adk' || path.startsWith('/adk/') + } + + function botUrlForCurrentRoute() { + return isAdkRoute() ? ADK_BOT_URL : DEFAULT_BOT_URL + } + const iframe = document.createElement('iframe') iframe.title = 'Botpress' iframe.style.width = '100%' iframe.style.height = '100%' - iframe.src = 'https://botpress.github.io/docs-bot/' + iframe.src = botUrlForCurrentRoute() iframe.allow = 'clipboard-write' botContainer.appendChild(iframe) @@ -321,6 +344,30 @@ if (event.data.type === 'requestCurrentPage') { sendPanelOpenedMessage() } + + // The agent-0 frontend asks for the current docs theme on mount, then + // listens for `themeChanged` messages we send when the user toggles + // light/dark. Mintlify sets `class="dark"` on in dark mode. + if (event.data.type === 'requestTheme') { + const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light' + const iframe = document.querySelector('iframe[title="Botpress"]') + if (iframe && iframe.contentWindow) { + iframe.contentWindow.postMessage({ type: 'themeChanged', theme }, '*') + } + } + }) + + // Watch for docs theme toggles and forward to the iframe. + const themeObserver = new MutationObserver(() => { + const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light' + const iframe = document.querySelector('iframe[title="Botpress"]') + if (iframe && iframe.contentWindow) { + iframe.contentWindow.postMessage({ type: 'themeChanged', theme }, '*') + } + }) + themeObserver.observe(document.documentElement, { + attributes: true, + attributeFilter: ['class'], }) function handleHashChange() { @@ -367,6 +414,15 @@ if (window.location.pathname !== lastPath) { lastPath = window.location.pathname + // Swap the bot iframe when we cross the ADK boundary. Stripping the + // src triggers a full reload, so the agent's conversation resets — + // intentional, since we're switching to a different agent entirely. + const targetBotUrl = botUrlForCurrentRoute() + const iframeEl = document.querySelector('iframe[title="Botpress"]') + if (iframeEl && iframeEl.src !== targetBotUrl) { + iframeEl.src = targetBotUrl + } + const isExpanded = panel.classList.contains('bot-panel-expanded') if (isExpanded) { const iframe = document.querySelector('iframe[title="Botpress"]') From 168c0fc2fa13142e455c3531cc426bbcbf1b8e45 Mon Sep 17 00:00:00 2001 From: Jackson Yu Date: Thu, 30 Apr 2026 17:02:23 -0400 Subject: [PATCH 2/3] feat(bot): update assistant.js for adk-bot-frontend + routing fix - Point ADK_BOT_URL at adk-bot-frontend (port 5175, gh-pages path) - Fix isAdkRoute(): only swap bot on /adk/, not bare /adk or /adk/ - Restore panel open state across same-tab navigations via sessionStorage - Handle navigate postMessage from iframe (same-origin: same tab, cross-origin: new tab) - Fix bot panel bottom gap: switch from fixed height to bottom:0/height:auto Co-Authored-By: Claude Sonnet 4.6 --- assistant.js | 60 ++++++++++++++++++++++++++++++++++++++++++---------- styles.css | 13 ++++++------ 2 files changed, 55 insertions(+), 18 deletions(-) diff --git a/assistant.js b/assistant.js index d6453ee3..6aba5caa 100644 --- a/assistant.js +++ b/assistant.js @@ -11,7 +11,15 @@ function initBotPanel() { const panel = document.createElement('div') panel.id = 'bot-panel' - panel.classList.add('bot-panel', 'bot-panel-collapsed') + // Restore the panel's open state across same-tab navigations triggered + // by link clicks inside the bot iframe. If the previous page set the + // flag before unloading, start expanded; otherwise default to collapsed. + let restoredOpen = false + try { + restoredOpen = sessionStorage.getItem('bot-panel-open') === '1' + if (restoredOpen) sessionStorage.removeItem('bot-panel-open') + } catch (e) {} + panel.classList.add('bot-panel', restoredOpen ? 'bot-panel-expanded' : 'bot-panel-collapsed') const toggleButton = document.createElement('button') toggleButton.id = 'bot-toggle' @@ -55,18 +63,16 @@ // ADK pages + the ADK skill references. The iframe URL is swapped on // route changes — see checkPathChange below. const DEFAULT_BOT_URL = 'https://botpress.github.io/docs-bot/' - // DEV: prototyping multiple agent-0 frontend designs in parallel. Each - // runs on its own port so we can compare side-by-side. - // Design 1 (copilot — current): http://localhost:5173/docs-bot/agent-0-copilot/ - // Design 2 (TBD): http://localhost:5174/docs-bot/agent-0-design-2/ - // Design 3 (TBD): http://localhost:5175/docs-bot/agent-0-design-3/ - // Swap ADK_BOT_URL to flip which design loads in the iframe. Revert to - // the production URL or the gh-pages deploy URL before pushing. - const ADK_BOT_URL = 'http://localhost:5173/docs-bot/agent-0-copilot/' + // Local dev: adk-bot-frontend on Vite at port 5175. + // Before merging to docs `main`, switch this to the gh-pages URL: + // https://botpress.github.io/docs-bot/adk-bot-frontend/ + const ADK_BOT_URL = 'http://localhost:5175/docs-bot/adk-bot-frontend/' function isAdkRoute() { - const path = window.location.pathname - return path === '/adk' || path.startsWith('/adk/') + // Only swap to the ADK assistant on actual reference pages + // (/adk/). The bare /adk and /adk/ are teaser routes inside + // the Docs tab, so they should keep using the default docs bot. + return /^\/adk\/.+/.test(window.location.pathname) } function botUrlForCurrentRoute() { @@ -91,6 +97,10 @@ document.body.appendChild(panel) document.body.appendChild(toggleButton) + if (restoredOpen) { + toggleButton.classList.add('bot-toggle-expanded') + } + function isMobile() { return window.innerWidth <= 1024 } @@ -345,6 +355,34 @@ sendPanelOpenedMessage() } + // Bot links route through the parent so in-docs URLs navigate same-tab + // (keeping the panel open via sessionStorage) and external URLs open + // in a new tab. URLs are normalized against the current origin. + if (event.data.type === 'navigate' && typeof event.data.url === 'string') { + try { + const target = new URL(event.data.url, window.location.href) + // Treat any link that points at the docs (this site or + // botpress.com/docs) as in-docs navigation so the panel can be + // restored on the next page. Everything else opens externally. + const isSameOrigin = target.origin === window.location.origin + const isBotpressDocs = + /(^|\.)botpress\.com$/.test(target.hostname) && target.pathname.startsWith('/docs') + if (isSameOrigin || isBotpressDocs) { + try { + sessionStorage.setItem('bot-panel-open', '1') + } catch (e) {} + // When we're on a different host (e.g., localhost during dev + // and the link points at production), navigate to the absolute + // URL — the panel state lives in sessionStorage of *that* host. + window.location.href = target.href + } else { + window.open(target.href, '_blank', 'noopener,noreferrer') + } + } catch (e) { + window.open(event.data.url, '_blank', 'noopener,noreferrer') + } + } + // The agent-0 frontend asks for the current docs theme on mount, then // listens for `themeChanged` messages we send when the user toggles // light/dark. Mintlify sets `class="dark"` on in dark mode. diff --git a/styles.css b/styles.css index 1db4a039..7a2b4992 100644 --- a/styles.css +++ b/styles.css @@ -70,10 +70,6 @@ position: relative; } -.home-columns { - /* margin-bottom: 0.66em; */ -} - #test { margin: 0; } @@ -138,8 +134,9 @@ img { position: fixed; top: 3.55rem; right: -16px; + bottom: 0; width: 32px; - height: calc(100vh - 4.64rem); + height: auto; background-color: transparent; z-index: 30; pointer-events: auto; @@ -157,8 +154,9 @@ img { position: fixed; top: 3.55rem; right: 0; + bottom: 0; width: 40px; - height: calc(100vh - 4.64rem); + height: auto; background-color: light-dark(#f7f7f8, #09090b); border-left: 1px solid light-dark(rgb(226, 222, 230), rgb(255 255 255/0.07)); border-right: none; @@ -234,8 +232,9 @@ img { position: fixed; top: 3.55rem; right: 0; + bottom: 0; width: 400px; - height: calc(100vh - 4.64rem); + height: auto; background-color: light-dark(#f7f7f8, #09090b); z-index: 29; display: flex; From 7b9a27213dce9e4f7da3271668d8619716ebf73c Mon Sep 17 00:00:00 2001 From: Jackson Yu Date: Fri, 1 May 2026 13:45:39 -0400 Subject: [PATCH 3/3] feat(bot): point ADK assistant at production gh-pages URL Co-Authored-By: Claude Sonnet 4.6 --- assistant.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/assistant.js b/assistant.js index 6aba5caa..bf354d63 100644 --- a/assistant.js +++ b/assistant.js @@ -63,10 +63,7 @@ // ADK pages + the ADK skill references. The iframe URL is swapped on // route changes — see checkPathChange below. const DEFAULT_BOT_URL = 'https://botpress.github.io/docs-bot/' - // Local dev: adk-bot-frontend on Vite at port 5175. - // Before merging to docs `main`, switch this to the gh-pages URL: - // https://botpress.github.io/docs-bot/adk-bot-frontend/ - const ADK_BOT_URL = 'http://localhost:5175/docs-bot/adk-bot-frontend/' + const ADK_BOT_URL = 'https://botpress.github.io/docs-bot/adk-bot-frontend/' function isAdkRoute() { // Only swap to the ADK assistant on actual reference pages