// 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' panel.classList.add('bot-panel', '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') 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.allow = 'clipboard-write' botContainer.appendChild(iframe) panel.appendChild(mobileDismiss) resizeHandle.appendChild(toggleCloseButton) panel.appendChild(botContainer) panel.appendChild(resizeHandle) document.body.appendChild(overlay) document.body.appendChild(panel) document.body.appendChild(toggleButton) 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 = document.querySelector('iframe[title="Botpress"]') if (iframe && iframe.contentWindow) { iframe.contentWindow.postMessage( { type: 'focusInput', }, '*' ) } } function sendPanelOpenedMessage() { const iframe = document.querySelector('iframe[title="Botpress"]') 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() } }) 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() 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 const isExpanded = panel.classList.contains('bot-panel-expanded') if (isExpanded) { const iframe = document.querySelector('iframe[title="Botpress"]') if (iframe && iframe.contentWindow) { iframe.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 = document.querySelector('iframe[title="Botpress"]') 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 = document.querySelector('iframe[title="Botpress"]') 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 = document.querySelector('iframe[title="Botpress"]') 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, }) } })()

Get started

ADK

Studio

Integrations

Webchat

Desk