// Bot panel ;(function () { 'use strict' if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initBotPanel) } else { initBotPanel() } function initBotPanel() { const panel = document.createElement('div') panel.id = 'bot-panel' // 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' toggleButton.classList.add('bot-toggle') toggleButton.setAttribute('aria-label', 'Open bot') toggleButton.innerHTML = ` ` const toggleCloseButton = document.createElement('button') toggleCloseButton.id = 'bot-toggle-close' toggleCloseButton.classList.add('bot-toggle-close') toggleCloseButton.setAttribute('aria-label', 'Close bot') toggleCloseButton.innerHTML = ` ` const resizeHandle = document.createElement('div') resizeHandle.classList.add('bot-resize-handle') resizeHandle.setAttribute('aria-label', 'Resize panel') const mobileDismiss = document.createElement('div') mobileDismiss.classList.add('bot-mobile-dismiss') mobileDismiss.setAttribute('aria-label', 'Swipe down to close') mobileDismiss.innerHTML = ` ` const overlay = document.createElement('div') overlay.classList.add('bot-overlay') overlay.setAttribute('aria-label', 'Close panel') const botContainer = document.createElement('div') 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/' const ADK_BOT_URL = 'https://botpress.github.io/docs-bot/adk-bot-frontend/' function isAdkRoute() { // Match /docs/adk/ on the live site (pathname includes /docs/ prefix). // The bare /adk and /adk/ teaser routes keep using the default docs bot. return /\/adk\/.+/.test(window.location.pathname) } const iframe = document.createElement('iframe') iframe.title = 'Botpress' iframe.style.width = '100%' iframe.style.height = '100%' iframe.style.position = 'absolute' iframe.style.top = '0' iframe.style.left = '0' iframe.allow = 'clipboard-write' iframe.src = DEFAULT_BOT_URL const adkIframe = document.createElement('iframe') adkIframe.title = 'Botpress ADK' adkIframe.style.width = '100%' adkIframe.style.height = '100%' adkIframe.style.position = 'absolute' adkIframe.style.top = '0' adkIframe.style.left = '0' adkIframe.allow = 'clipboard-write' adkIframe.src = ADK_BOT_URL // "ready" means the React app inside the iframe has mounted and rendered its // first frame. We detect this via the `requestTheme` postMessage the frontend // sends from a useEffect on mount — that fires after the first paint, not just // after the HTML document loads. The `load` event fires too early (HTML loaded // but React not yet mounted), so using it directly causes a blank-white flash. let defaultReady = false let adkReady = false function markReady(isAdk) { if (isAdk) adkReady = true else defaultReady = true showActiveIframe() } // Fallback: if the iframe never sends requestTheme (e.g. default docs bot // doesn't have the hook), mark ready 600ms after the HTML load event so the // panel isn't stuck hidden forever. iframe.addEventListener('load', () => { setTimeout(() => { if (!defaultReady) markReady(false) }, 600) }) adkIframe.addEventListener('load', () => { setTimeout(() => { if (!adkReady) markReady(true) }, 600) }) function showActiveIframe() { const adk = isAdkRoute() const target = adk ? adkIframe : iframe const other = adk ? iframe : adkIframe const ready = adk ? adkReady : defaultReady if (ready) { // Bring the active bot to the front (z-index swap, no repaint = no flash). target.style.zIndex = '2' target.style.pointerEvents = 'auto' other.style.zIndex = '0' other.style.pointerEvents = 'none' } // If target isn't ready yet, leave both layers as-is — 'other' keeps its // current z-index so the panel stays populated. markReady() fires again // once the target's React app has mounted. } function getActiveIframe() { return isAdkRoute() ? adkIframe : iframe } // Default starts above ADK so non-ADK pages show the correct bot before // either React app sends its first readiness signal (requestTheme). iframe.style.zIndex = '1' iframe.style.pointerEvents = 'none' adkIframe.style.zIndex = '0' adkIframe.style.pointerEvents = 'none' botContainer.style.position = 'relative' botContainer.appendChild(iframe) botContainer.appendChild(adkIframe) showActiveIframe() panel.appendChild(mobileDismiss) resizeHandle.appendChild(toggleCloseButton) panel.appendChild(botContainer) panel.appendChild(resizeHandle) document.body.appendChild(overlay) document.body.appendChild(panel) document.body.appendChild(toggleButton) if (restoredOpen) { toggleButton.classList.add('bot-toggle-expanded') } function isMobile() { return window.innerWidth <= 1024 } function updateOverlay() { if (!isMobile()) { overlay.classList.remove('visible') return } const isExpanded = panel.classList.contains('bot-panel-expanded') if (isExpanded) { overlay.classList.add('visible') } else { overlay.classList.remove('visible') } } function focusComposerInput() { const iframe = getActiveIframe() if (iframe && iframe.contentWindow) { iframe.contentWindow.postMessage( { type: 'focusInput', }, '*' ) } } function sendPanelOpenedMessage() { const iframe = getActiveIframe() if (iframe && iframe.contentWindow) { iframe.contentWindow.postMessage( { type: 'panelOpened', data: { path: window.location.pathname, title: document.title.replace(' - Botpress', ''), }, }, '*' ) } } window.focusComposerInput = focusComposerInput window.askAi = function () { if (panel.classList.contains('bot-panel-collapsed')) { panel.classList.remove('bot-panel-collapsed') panel.classList.add('bot-panel-expanded') toggleButton.classList.add('bot-toggle-expanded') sendPanelOpenedMessage() focusComposerInput() updateOverlay() } } function togglePanel() { const isCollapsed = panel.classList.contains('bot-panel-collapsed') if (isCollapsed) { panel.classList.remove('bot-panel-collapsed') panel.classList.add('bot-panel-expanded') toggleButton.classList.add('bot-toggle-expanded') sendPanelOpenedMessage() focusComposerInput() } else { panel.classList.remove('bot-panel-expanded') panel.classList.add('bot-panel-collapsed') toggleButton.classList.remove('bot-toggle-expanded') } updateOverlay() } function closePanel() { panel.classList.remove('bot-panel-expanded') panel.classList.add('bot-panel-collapsed') panel.classList.remove('swiping') panel.style.transform = '' toggleButton.classList.remove('bot-toggle-expanded') updateOverlay() } let isResizing = false let startX = 0 let startWidth = 0 let hasMoved = false const clickThreshold = 5 resizeHandle.addEventListener('mousedown', (e) => { if (e.target.closest('#bot-toggle-close')) { return } isResizing = true hasMoved = false startX = e.clientX startWidth = parseInt(window.getComputedStyle(panel).width, 10) panel.classList.add('resizing') document.body.style.cursor = 'col-resize' document.body.style.userSelect = 'none' e.preventDefault() e.stopPropagation() }) document.addEventListener('mousemove', (e) => { if (!isResizing) return const moveDistance = Math.abs(e.clientX - startX) if (moveDistance > clickThreshold) { hasMoved = true } if (hasMoved) { const diff = startX - e.clientX const maxWidth = window.innerWidth * 1 const newWidth = Math.max(368, Math.min(maxWidth, startWidth + diff)) panel.style.width = newWidth + 'px' } e.preventDefault() e.stopPropagation() }) document.addEventListener('mouseup', (e) => { if (isResizing) { isResizing = false panel.classList.remove('resizing') document.body.style.cursor = '' document.body.style.userSelect = '' if (!hasMoved) { togglePanel() } hasMoved = false e.preventDefault() e.stopPropagation() } }) let touchStartY = 0 let touchCurrentY = 0 let touchStartTime = 0 let isSwiping = false const swipeThreshold = 100 const swipeVelocityThreshold = 0.3 function handleTouchStart(e) { if (window.innerWidth > 1024) return if (!panel.classList.contains('bot-panel-expanded')) return touchStartY = e.touches[0].clientY touchStartTime = Date.now() isSwiping = true panel.classList.add('swiping') } function handleTouchMove(e) { if (!isSwiping || window.innerWidth > 1024) return if (!panel.classList.contains('bot-panel-expanded')) return touchCurrentY = e.touches[0].clientY const deltaY = touchCurrentY - touchStartY if (deltaY > 0) { e.preventDefault() const translateY = Math.min(deltaY, window.innerHeight) panel.style.transform = `translateX(0) translateY(${translateY}px)` } } function handleTouchEnd(e) { if (!isSwiping || window.innerWidth > 1024) return if (!panel.classList.contains('bot-panel-expanded')) return const deltaY = touchCurrentY - touchStartY const timeDelta = Date.now() - touchStartTime const velocity = timeDelta > 0 ? deltaY / timeDelta : 0 if (deltaY > swipeThreshold || velocity > swipeVelocityThreshold) { closePanel() } else { panel.style.transform = '' } panel.classList.remove('swiping') isSwiping = false touchStartY = 0 touchCurrentY = 0 touchStartTime = 0 } panel.addEventListener('touchstart', handleTouchStart, { passive: false }) panel.addEventListener('touchmove', handleTouchMove, { passive: false }) panel.addEventListener('touchend', handleTouchEnd, { passive: false }) panel.addEventListener('touchcancel', handleTouchEnd, { passive: false }) toggleButton.addEventListener('click', togglePanel) toggleCloseButton.addEventListener('click', (e) => { e.stopPropagation() closePanel() }) mobileDismiss.addEventListener('click', closePanel) overlay.addEventListener('click', (e) => { if (isMobile() && panel.classList.contains('bot-panel-expanded')) { closePanel() } }) function handleKeyboardShortcut(e) { const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0 const modifierKey = isMac ? e.metaKey : e.ctrlKey if (e.key === 'Escape') { const isExpanded = panel.classList.contains('bot-panel-expanded') if (isExpanded) { e.preventDefault() closePanel() } } if (modifierKey && e.key === 'i' && !e.shiftKey && !e.altKey) { e.preventDefault() const isCollapsed = panel.classList.contains('bot-panel-collapsed') if (isCollapsed) { togglePanel() } else { closePanel() } } } document.addEventListener('keydown', handleKeyboardShortcut) window.addEventListener('message', (event) => { if (event.data.type === 'togglePanel') { const isCollapsed = panel.classList.contains('bot-panel-collapsed') if (isCollapsed) { togglePanel() } else { closePanel() } } if (event.data.type === 'closePanel') { closePanel() } if (event.data.type === 'requestCurrentPage') { 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. if (event.data.type === 'requestTheme') { const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light' // The iframe's React app just mounted — mark it as visually ready so we // can show it without a blank-white flash. if (event.source === adkIframe.contentWindow) { if (!adkReady) markReady(true) } else if (event.source === iframe.contentWindow) { if (!defaultReady) markReady(false) } // Respond with the current theme to whichever iframe asked. if (event.source && typeof event.source.postMessage === 'function') { try { event.source.postMessage({ type: 'themeChanged', theme }, '*') } catch (_e) {} } } }) // Watch for docs theme toggles and forward to both iframes so they stay in // sync regardless of which one is currently visible. const themeObserver = new MutationObserver(() => { const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light' ;[iframe, adkIframe].forEach(f => { if (f && f.contentWindow) f.contentWindow.postMessage({ type: 'themeChanged', theme }, '*') }) }) themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'], }) function handleHashChange() { if (window.location.hash === '#ask') { if (panel.classList.contains('bot-panel-collapsed')) { panel.classList.remove('bot-panel-collapsed') panel.classList.add('bot-panel-expanded') toggleButton.classList.add('bot-toggle-expanded') sendPanelOpenedMessage() focusComposerInput() updateOverlay() } } } handleHashChange() window.addEventListener('hashchange', handleHashChange) updateOverlay() // Card/button link clicks trigger Mintlify's page transition animation which // causes the iframe to flash. Sidebar links don't trigger this. Hide the // panel for the duration of the transition to prevent the flash. let hideTimer = null document.addEventListener('click', (e) => { const link = e.target.closest('a') if (!link) return const href = link.getAttribute('href') if (!href || href.startsWith('#') || href.startsWith('http') || href.startsWith('mailto')) return if (panel.classList.contains('bot-panel-expanded')) return if (hideTimer) clearTimeout(hideTimer) panel.style.visibility = 'hidden' toggleButton.style.visibility = 'hidden' hideTimer = setTimeout(() => { panel.style.visibility = '' toggleButton.style.visibility = '' hideTimer = null }, 400) }, true) let resizeTimeout window.addEventListener('resize', () => { clearTimeout(resizeTimeout) resizeTimeout = setTimeout(() => { updateOverlay() const currentWidth = parseInt(window.getComputedStyle(panel).width, 10) const maxWidth = window.innerWidth * 0.38 if (currentWidth > maxWidth) { panel.style.width = maxWidth + 'px' } }, 100) }) const panelObserver = new MutationObserver(() => { updateOverlay() }) panelObserver.observe(panel, { attributes: true, attributeFilter: ['class'], }) let lastPath = window.location.pathname const checkPathChange = () => { if (window.location.pathname !== lastPath) { lastPath = window.location.pathname showActiveIframe() const isExpanded = panel.classList.contains('bot-panel-expanded') if (isExpanded) { const activeIframe = isAdkRoute() ? adkIframe : iframe if (activeIframe && activeIframe.contentWindow) { activeIframe.contentWindow.postMessage( { type: 'pageChanged', data: { path: window.location.pathname, title: document.title.replace(' - Botpress', ''), }, }, '*' ) } } } } setInterval(checkPathChange, 100) window.addEventListener('popstate', () => { setTimeout(checkPathChange, 10) }) } })() // Input bubble ;(function () { 'use strict' if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initInputBubble) } else { initInputBubble() } function initInputBubble() { const inputBubble = document.createElement('div') inputBubble.id = 'ask-ai-input-bubble' inputBubble.classList.add('ask-ai-input-bubble') const wrapper = document.createElement('div') wrapper.classList.add('ask-ai-input-wrapper') const input = document.createElement('input') input.type = 'text' input.placeholder = 'Ask a question...' input.classList.add('ask-ai-input') input.setAttribute('aria-label', 'Ask a question...') const shortcutIndicator = document.createElement('span') shortcutIndicator.classList.add('ask-ai-shortcut') const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0 shortcutIndicator.textContent = isMac ? '⌘I' : 'Ctrl+I' const sendButton = document.createElement('button') sendButton.classList.add('ask-ai-send-button') sendButton.setAttribute('aria-label', 'Send message') sendButton.innerHTML = ` ` wrapper.appendChild(input) wrapper.appendChild(shortcutIndicator) wrapper.appendChild(sendButton) inputBubble.appendChild(wrapper) document.body.appendChild(inputBubble) inputBubble.classList.add('ask-ai-input-bubble-hidden') function isLandingPage() { const path = window.location.pathname return path === '/' || path === '/docs' || path === '/index' || path.endsWith('/index.html') } function isMobile() { return window.innerWidth <= 1024 } function handleEnterKey(e) { if (e.key === 'Enter' && !e.shiftKey && !isMobile()) { e.preventDefault() if (input.value.trim()) { handleAskAI() } } } function handleMobileInputClick(e) { if (isMobile()) { e.preventDefault() e.stopPropagation() const panel = document.getElementById('bot-panel') const toggleButton = document.getElementById('bot-toggle') if (panel && panel.classList.contains('bot-panel-collapsed')) { panel.classList.remove('bot-panel-collapsed') panel.classList.add('bot-panel-expanded') if (toggleButton) { toggleButton.classList.add('bot-toggle-expanded') } const iframe = getActiveIframe() if (iframe && iframe.contentWindow) { iframe.contentWindow.postMessage( { type: 'panelOpened', data: { path: window.location.pathname, title: document.title.replace(' - Botpress', ''), }, }, '*' ) } if (window.focusComposerInput) { window.focusComposerInput() } } } } function setupInputBehavior() { if (isMobile()) { input.readOnly = true input.removeEventListener('keydown', handleEnterKey) input.addEventListener('click', handleMobileInputClick, { once: false }) wrapper.addEventListener('click', handleMobileInputClick, { once: false }) } else { input.readOnly = false input.removeEventListener('click', handleMobileInputClick) wrapper.removeEventListener('click', handleMobileInputClick) input.addEventListener('keydown', handleEnterKey) } } setupInputBehavior() let resizeTimeout window.addEventListener('resize', () => { clearTimeout(resizeTimeout) resizeTimeout = setTimeout(() => { setupInputBehavior() }, 100) }) function updateVisibility() { if (isLandingPage()) { inputBubble.style.display = 'none' return } const panel = document.getElementById('bot-panel') if (panel) { const isExpanded = panel.classList.contains('bot-panel-expanded') if (isExpanded) { inputBubble.classList.add('ask-ai-input-bubble-hidden') } else { inputBubble.style.display = '' requestAnimationFrame(() => { requestAnimationFrame(() => { inputBubble.classList.remove('ask-ai-input-bubble-hidden') }) }) } } else { inputBubble.style.display = '' requestAnimationFrame(() => { requestAnimationFrame(() => { inputBubble.classList.remove('ask-ai-input-bubble-hidden') }) }) } } let lastPath = window.location.pathname const checkPathChange = () => { if (window.location.pathname !== lastPath) { lastPath = window.location.pathname updateVisibility() } } setInterval(checkPathChange, 100) window.addEventListener('popstate', updateVisibility) const panel = document.getElementById('bot-panel') if (panel) { const observer = new MutationObserver(() => { updateVisibility() }) observer.observe(panel, { attributes: true, attributeFilter: ['class'], }) updateVisibility() } else { const checkInterval = setInterval(() => { const panel = document.getElementById('bot-panel') if (panel) { const observer = new MutationObserver(() => { updateVisibility() }) observer.observe(panel, { attributes: true, attributeFilter: ['class'], }) updateVisibility() clearInterval(checkInterval) } }, 100) } function updateSendButton() { const hasValue = input.value.trim().length > 0 sendButton.disabled = !hasValue } input.addEventListener('input', updateSendButton) updateSendButton() function handleAskAI() { const message = input.value.trim() if (!message) return const panel = document.getElementById('bot-panel') const toggleButton = document.getElementById('bot-toggle') if (panel && !panel.classList.contains('bot-panel-expanded')) { panel.classList.remove('bot-panel-collapsed') panel.classList.add('bot-panel-expanded') if (toggleButton) { toggleButton.classList.add('bot-toggle-expanded') } } const iframe = getActiveIframe() if (iframe && iframe.contentWindow) { iframe.contentWindow.postMessage( { type: 'panelOpened', data: { path: window.location.pathname, title: document.title.replace(' - Botpress', ''), }, }, '*' ) iframe.contentWindow.postMessage( { type: 'sendMessage', message: message, }, '*' ) } input.value = '' updateSendButton() input.blur() } sendButton.addEventListener('click', (e) => { e.preventDefault() if (!sendButton.disabled) { handleAskAI() } }) } })() // "Ask AI" button override ;(function () { 'use strict' if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initAskAIOverride) } else { initAskAIOverride() } function initAskAIOverride() { const overriddenButtons = new WeakSet() function findAndOverrideButton() { const button = document.getElementById('page-context-menu-button') if (button && button.innerText.trim() === 'Ask AI' && !overriddenButtons.has(button)) { button.addEventListener( 'click', (e) => { e.preventDefault() e.stopPropagation() const panel = document.getElementById('bot-panel') const toggleButton = document.getElementById('bot-toggle') if (panel && !panel.classList.contains('bot-panel-expanded')) { panel.classList.remove('bot-panel-collapsed') panel.classList.add('bot-panel-expanded') if (toggleButton) { toggleButton.classList.add('bot-toggle-expanded') } } const iframe = getActiveIframe() if (iframe && iframe.contentWindow) { iframe.contentWindow.postMessage( { type: 'panelOpened', data: { path: window.location.pathname, title: document.title.replace(' - Botpress', ''), }, }, '*' ) iframe.contentWindow.postMessage( { type: 'askAI', data: { path: window.location.pathname, title: document.title.replace(' - Botpress', ''), }, }, '*' ) iframe.contentWindow.postMessage( { type: 'focusInput', }, '*' ) } }, true ) overriddenButtons.add(button) return true } return false } findAndOverrideButton() const observer = new MutationObserver(() => { findAndOverrideButton() }) observer.observe(document.body, { childList: true, subtree: true, }) } })()

Read the full ADK documentation