// Load DocSearch modal CSS const docSearchCSS = document.createElement("link"); docSearchCSS.rel = "stylesheet"; docSearchCSS.href = "https://cdn.jsdelivr.net/npm/@docsearch/css@4"; document.head.appendChild(docSearchCSS); // Load DocSearch sidepanel CSS const sidepanelCSS = document.createElement("link"); sidepanelCSS.rel = "stylesheet"; sidepanelCSS.href = "https://cdn.jsdelivr.net/npm/@docsearch/css@4/dist/sidepanel.css"; document.head.appendChild(sidepanelCSS); const APP_ID = "EDT5AE2BJ1"; const SEARCH_API_KEY = "3f8f47e6c82256d316201387a64d173a"; const AGENT_ID = "0b5c065e-25ff-4d6f-85f8-f490b03c789d"; const SEARCH_INDEX_NAME = "docs-crawler"; const ASK_AI_INDEX_NAME = "algolia-docs-markdown"; function getDocSearchTheme() { const colorScheme = getComputedStyle(document.documentElement).colorScheme; return colorScheme && colorScheme.includes("dark") ? "dark" : "light"; } function initDocSearch() { if (typeof docsearch !== "function") { return; } const searchButtonContainerIds = [ "search-bar-entry", "search-bar-entry-mobile", "home-search-entry", ]; const clonedSearchButtonContainers = searchButtonContainerIds .map((id) => { const originalElement = document.getElementById(id); if (!originalElement) return null; const clonedElement = originalElement.cloneNode(true); originalElement.parentNode.replaceChild(clonedElement, originalElement); return clonedElement; }) .filter(Boolean); let searchInput = document.getElementById("docsearch-input"); if (!searchInput) { searchInput = document.createElement("input"); searchInput.type = "search"; searchInput.id = "docsearch-input"; searchInput.style.position = "absolute"; searchInput.style.left = "-9999px"; searchInput.style.opacity = "0"; searchInput.style.pointerEvents = "none"; searchInput.placeholder = "Search Algolia docs..."; document.body.appendChild(searchInput); } // Create sidepanel container let sidepanelContainer = document.getElementById("docsearch-sidepanel"); if (!sidepanelContainer) { sidepanelContainer = document.createElement("div"); sidepanelContainer.id = "docsearch-sidepanel"; document.body.appendChild(sidepanelContainer); } let docSearchInstance = null; let sidepanelInstance = null; let sidepanelIsOpen = false; try { const theme = getDocSearchTheme(); window.__docsearchTheme = theme; if (typeof docsearchSidepanel === "function") { sidepanelInstance = docsearchSidepanel({ container: "#docsearch-sidepanel", appId: APP_ID, apiKey: SEARCH_API_KEY, indexName: ASK_AI_INDEX_NAME, assistantId: AGENT_ID, variant: "inline", agentStudio: true, theme, onOpen: () => { sidepanelIsOpen = true; }, onClose: () => { sidepanelIsOpen = false; }, }); // Store sidepanel instance globally window.__docsearchSidepanel = sidepanelInstance; } else { console.warn("🔍 DocSearch sidepanel script not available"); } // Initialize docsearch modal docSearchInstance = docsearch({ appId: APP_ID, apiKey: SEARCH_API_KEY, theme, indices: [ { name: SEARCH_INDEX_NAME, searchParameters: { analyticsTags: "docsearch", }, }, ], container: "#docsearch-input", // debug: true, askAi: { indexName: ASK_AI_INDEX_NAME, assistantId: AGENT_ID, suggestedQuestions: true, agentStudio: true }, // Intercept Ask AI events and redirect to sidepanel interceptAskAiEvent: (initialMessage) => { if (sidepanelInstance) { docSearchInstance.close(); sidepanelInstance.open(initialMessage); return true; // Prevent default behavior } return false; // Allow default behavior if sidepanel not available }, navigator: { navigate({ itemUrl }) { window.location.href = itemUrl; }, }, insights: true, transformItems(items) { if (window.location.hostname !== "localhost") { return items; } const { hostname, port, protocol } = window.location; const override = { hostname, port, protocol }; return items.map((item) => ({ ...item, url: Object.assign(new URL(item.url), override), })); }, }); } catch (error) { console.error("🔍 Error initializing DocSearch:", error); } function styleDocSearchModal() { const modal = document.querySelector(".DocSearch-Modal"); const container = document.querySelector(".DocSearch-Container"); if (modal && container) { const searchInput = modal.querySelector(".DocSearch-Input"); container.classList.add("docsearch-ready"); if (searchInput && !searchInput.hasAttribute("data-listener-added")) { searchInput.setAttribute("data-listener-added", "true"); searchInput.addEventListener("input", function () { setTimeout(styleDocSearchModal, 10); }); } } } function addSidepanelToggleButton(trigger) { if (!trigger || !trigger.parentNode) return; if (trigger.parentNode.querySelector("[data-sidepanel-toggle]")) return; trigger.parentNode.classList.add("gap-1"); const sidepanelButton = document.createElement("button"); sidepanelButton.type = "button"; sidepanelButton.setAttribute("data-sidepanel-toggle", "true"); sidepanelButton.className = "flex pointer-events-auto rounded-xl items-center text-sm leading-6 h-9 px-3 text-gray-500 dark:text-white/50 dark:bg-background-dark dark:brightness-[1.1] dark:hover:brightness-[1.25] ring-0 md:ring-1 ring-gray-400/30 hover:ring-gray-600/30 dark:ring-gray-600/30 dark:hover:ring-gray-500/30 gap-2 bg-white"; sidepanelButton.classList.add("docsearch-sidepanel-toggle"); sidepanelButton.setAttribute("aria-label", "Toggle sidepanel"); sidepanelButton.innerHTML = ` Ask ⌘I `; sidepanelButton.addEventListener("click", (event) => { event.preventDefault(); event.stopPropagation(); const instance = window.__docsearchSidepanel; if (!instance) { console.warn("🔍 DocSearch sidepanel not initialized"); return; } if (instance.isOpen) { instance.close(); } else if (instance.open) { instance.open(); } }); trigger.parentNode.insertBefore(sidepanelButton, trigger.nextSibling); } clonedSearchButtonContainers.forEach((trigger, index) => { addSidepanelToggleButton(trigger); trigger.addEventListener("click", function (e) { e.preventDefault(); e.stopPropagation(); const docSearchButton = document.querySelector(".DocSearch-Button"); if (docSearchButton) { docSearchButton.click(); } else { searchInput.focus(); const inputEvent = new Event("input", { bubbles: true }); searchInput.dispatchEvent(inputEvent); } setTimeout(styleDocSearchModal, 50); setTimeout(styleDocSearchModal, 200); setTimeout(styleDocSearchModal, 500); }); trigger.addEventListener("keydown", function (e) { if (e.key.length === 1 || e.key === "Backspace") { e.preventDefault(); searchInput.focus(); if (e.key.length === 1) { searchInput.value += e.key; } else if (e.key === "Backspace") { searchInput.value = searchInput.value.slice(0, -1); } const inputEvent = new Event("input", { bubbles: true }); searchInput.dispatchEvent(inputEvent); } }); }); window.addEventListener( "keydown", function (event) { if ( (event.metaKey || event.ctrlKey) && (event.key === "k" || event.key === "K") ) { event.preventDefault(); event.stopPropagation(); const docSearchButton = document.querySelector(".DocSearch-Button"); if (docSearchButton) { docSearchButton.click(); } else { searchInput.focus(); } setTimeout(styleDocSearchModal, 100); return false; } }, true, ); if (!window.__docsearchObserverAdded) { try { const observer = new MutationObserver(() => { const container = document.querySelector(".DocSearch-Container"); if (container && !container.classList.contains("docsearch-ready")) { setTimeout(styleDocSearchModal, 0); setTimeout(styleDocSearchModal, 50); } // Prevents body shifting to the left on open document.documentElement.classList.toggle( "no-overflow", container && container.classList.contains("docsearch-ready"), ); }); observer.observe(document.body, { childList: true, subtree: true }); window.__docsearchObserverAdded = true; } catch (e) { console.warn("🔍 Failed to add MutationObserver for DocSearch:", e); } } return { docSearchInstance, searchInput }; } function loadDocSearchScript() { if (window.__docsearchScriptLoaded || window.__docsearchScriptLoading) { return; } window.__docsearchScriptLoading = true; const docSearchScript = document.createElement("script"); docSearchScript.src = "https://cdn.jsdelivr.net/npm/@docsearch/js@4"; docSearchScript.onload = function () { window.__docsearchScriptLoaded = true; window.__docsearchScriptLoading = false; initDocSearch(); installNavigationListeners() }; docSearchScript.onerror = function () { window.__docsearchScriptLoading = false; console.error("🔍 Failed to load DocSearch script"); }; document.head.appendChild(docSearchScript); } // Load sidepanel script first const sidepanelScript = document.createElement("script"); sidepanelScript.src = "https://cdn.jsdelivr.net/npm/@docsearch/sidepanel-js@4"; sidepanelScript.onload = function () { window.__docsearchSidepanelReady = true; loadDocSearchScript(); if (window.__docsearchScriptLoaded) { initDocSearch(); } }; sidepanelScript.onerror = function () { console.error("🔍 Failed to load DocSearch sidepanel script"); loadDocSearchScript(); }; document.head.appendChild(sidepanelScript); function installNavigationListeners() { if (window.__docsearchNavigationListenersAdded) return; window.__docsearchNavigationListenersAdded = true; const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function (...args) { const result = originalPushState.apply(this, args); window.dispatchEvent(new Event("docsearch:navigation")); return result; }; history.replaceState = function (...args) { const result = originalReplaceState.apply(this, args); window.dispatchEvent(new Event("docsearch:navigation")); return result; }; window.addEventListener("popstate", handleURLChange); window.addEventListener("hashchange", handleURLChange); window.addEventListener("docsearch:navigation", handleURLChange); } function handleURLChange() { clearTimeout(window.__docsearchUrlChangeTimer) window.__docsearchUrlChangeTimer = setTimeout(() => { initDocSearch(); }, 100); } if (!window.__docsearchThemeObserverAdded) { const themeObserver = new MutationObserver(() => { const nextTheme = getDocSearchTheme(); if (window.__docsearchTheme !== nextTheme) { initDocSearch(); } }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["style", "class"], }); window.__docsearchThemeObserverAdded = true; }

​Examples

Examples