54:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 55:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 56:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 57:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 58:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 59:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4e:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tw-animate-css"}] 4f:["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}] 50:["$","li","marked",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/marked","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"marked"}]]}]}] 51:["$","$L54",null,{"namespace":"@algolia","registryDependencies":["button"]}] 52:["$","$L55",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L56",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","animate-shiny-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","animate-shiny-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"shiny-text 8s infinite"}]]}]]}],["$","$L57",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L58",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"tw-animate-css\" {\n\n}\n\ninput[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration {\n\t-webkit-appearance: none;;\n}\n\n@keyframes shiny-text {\n\t0%,90%,100%: {\nbackground-position: calc(-100% - var(--shiny-width)) 0;\n};\n\t30%,60%: {\nbackground-position: calc(100% + var(--shiny-width)) 0;\n};\n}"}]}]]}]]}]}]}] 5a:T12645,/** biome-ignore-all lint/suspicious/noArrayIndexKey: . */ /** biome-ignore-all lint/a11y/useFocusableInteractive: hand crafted interactions */ /** biome-ignore-all lint/a11y/useSemanticElements: hand crafted interactions */ /** biome-ignore-all lint/a11y/noStaticElementInteractions: hand crafted interactions */ /** biome-ignore-all lint/a11y/useKeyWithClickEvents: hand crafted interactions */ import type { UIMessage } from "@ai-sdk/react"; import type { UIDataTypes, UIMessagePart } from "ai"; import { liteClient as algoliasearch } from "algoliasearch/lite"; import type { BaseHit, Hit } from "instantsearch.js"; import { ArrowLeftIcon, BrainIcon, CheckIcon, CopyIcon, CornerDownLeftIcon, SearchIcon, SparklesIcon, SquarePen, ThumbsDown, ThumbsUp, } from "lucide-react"; import { marked, type Tokens } from "marked"; import type React from "react"; import { type ComponentPropsWithoutRef, type CSSProperties, type FC, memo, useCallback, useEffect, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { Configure, Highlight, InstantSearch, useHits, useInstantSearch, useSearchBox, } from "react-instantsearch"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { isThreadDepthError, postAgentStudioFeedback, postFeedback, threadDepthErrorDetail, useAskai, } from "@/registry/experiences/search-askai/hooks/use-askai"; import { useKeyboardNavigation } from "@/registry/experiences/search-askai/hooks/use-keyboard-navigation"; import { useSearchState } from "@/registry/experiences/search-askai/hooks/use-search-state"; import { type SuggestedQuestionHit, useSuggestedQuestions, } from "@/registry/experiences/search-askai/hooks/use-suggested-questions"; // ============================================================================ // Types // ============================================================================ export interface SearchWithAskAIConfig { /** Algolia Application ID (required) */ applicationId: string; /** Algolia API Key (required) */ apiKey: string; /** Algolia Index Name (required) */ indexName: string; /** AI Assistant ID (required for chat functionality) */ assistantId: string; /** Placeholder text for search input (optional, defaults to "What are you looking for?") */ placeholder?: string; /** Number of hits per page (optional, defaults to 8) */ hitsPerPage?: number; /** Custom search button text (optional) */ buttonText?: string; /** Custom search button props (optional) */ buttonProps?: React.ComponentProps; /** Map which hit attributes to render (supports dotted paths) */ attributes: HitsAttributesMapping; /** Additional Algolia search parameters (optional) - e.g., analytics, filters, distinct, etc. */ searchParameters?: Record; /** Enable Algolia Insights (optional, defaults to true) */ insights?: boolean; /** Suggested Questions Enabled (optional, defaults to false) */ suggestedQuestionsEnabled?: boolean; /** Open hit URLs in a new tab (optional, defaults to true) */ openResultsInNewTab?: boolean; /** Transform items before rendering (optional) - useful for proxying images or modifying hit data */ transformItems?: (items: Hit[]) => Hit[]; /** Route Ask AI requests through Agent Studio endpoints (optional, defaults to false). */ agentStudio?: boolean; } interface SearchButtonProps extends React.ComponentProps {} export const SearchButton: React.FC = ({ className, ...buttonProps }) => { const [modifierLabel, setModifierLabel] = useState("⌘"); const [isModifierPressed, setIsModifierPressed] = useState(false); const [isKPressed, setIsKPressed] = useState(false); useEffect(() => { if (typeof navigator === "undefined") return; const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); setModifierLabel(isMac ? "⌘" : "Ctrl"); }, []); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.metaKey || event.ctrlKey) setIsModifierPressed(true); if (event.key.toLowerCase() === "k") setIsKPressed(true); }; const handleKeyUp = (event: KeyboardEvent) => { if (!event.metaKey && !event.ctrlKey) setIsModifierPressed(false); if (event.key.toLowerCase() === "k") setIsKPressed(false); }; const resetKeys = () => { setIsModifierPressed(false); setIsKPressed(false); }; document.addEventListener("keydown", handleKeyDown); document.addEventListener("keyup", handleKeyUp); window.addEventListener("blur", resetKeys); return () => { document.removeEventListener("keydown", handleKeyDown); document.removeEventListener("keyup", handleKeyUp); window.removeEventListener("blur", resetKeys); }; }, []); const baseClassName = "md:min-w-[200px] justify-between hover:shadow-md transition-transform duration-400 translate-y-0 py-3 h-auto cursor-pointer hover:bg-transparent hover:translate-y-[-2px] border shadow-none"; return ( ); }; export interface SearchIndexTool { input: { query: string; }; output: { query: string; hits: Hit[]; }; } export type Message = UIMessage< unknown, UIDataTypes, { searchIndex: SearchIndexTool; } >; export type AIMessagePart = UIMessagePart< UIDataTypes, { searchIndex: SearchIndexTool; } >; interface Exchange { id: string; userMessage: Message; assistantMessage: Message | null; } // ============================================================================ // Utilities & Helpers // ============================================================================ function useClipboard() { const copyText = useCallback(async (text: string) => { try { await navigator.clipboard.writeText(text); } catch { // Silently fail - clipboard access might be blocked } }, []); return { copyText }; } function escapeHtml(html: string): string { return html .replace(/&/g, "&") .replace(//g, ">") .replace(/"/g, """) .replace(/'/g, "'"); } function decodeUrlForSchemeCheck(value: string): string { let current = value; for (let i = 0; i < 3; i += 1) { try { const decoded = decodeURIComponent(current); if (decoded === current) { break; } current = decoded; } catch { break; } } return current; } function stripControlsAndWhitespace(value: string): string { let result = ""; for (let i = 0; i < value.length; i += 1) { const code = value.charCodeAt(i); if (code > 0x20 && code !== 0x7f) { result += value.charAt(i); } } return result; } function sanitizeUrl(url: string | null | undefined): string { if (!url) { return ""; } const trimmed = url.trim(); if (!trimmed) { return ""; } // Decode / strip controls for scheme checks only — return the original trimmed // URL when safe so percent-encoding in the path/query is preserved. const normalized = stripControlsAndWhitespace( decodeUrlForSchemeCheck(trimmed), ).replace(/\\/g, "/"); if (!normalized) { return ""; } // Protocol-relative and backslash-obfuscated hosts (e.g. /\evil.com → //evil.com). if (normalized.startsWith("//")) { return ""; } if (!/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(normalized)) { return trimmed; } try { const parsed = new URL(normalized); if ( parsed.protocol === "http:" || parsed.protocol === "https:" || parsed.protocol === "mailto:" ) { return trimmed; } } catch { return ""; } return ""; } // ============================================================================ // Markdown Renderer // ============================================================================ /* eslint-disable xss/no-mixed-html -- marked renderer: interpolations escaped/sanitized */ const markdownRenderer = new marked.Renderer(); markdownRenderer.code = ({ text, lang = "", escaped }: Tokens.Code): string => { const safeLang = /^[a-zA-Z0-9_-]+$/.test(lang) ? lang : ""; const languageClass = safeLang ? `language-${safeLang}` : ""; const safeCode = escaped ? text : escapeHtml(text); const encodedCode = encodeURIComponent(text); const copyIconSvg = ` `; const checkIconSvg = ` `; return `

${safeCode}

`; }; markdownRenderer.link = ({ href, title, text }: Tokens.Link): string => { const safeHref = escapeHtml(sanitizeUrl(href)); const textEscaped = escapeHtml(text); if (!safeHref) { return textEscaped; } const titleAttr = title ? ' title="' + escapeHtml(title) + '"' : ""; // href/text/title are sanitized + escaped above. return ( '" + textEscaped + "" ); // nosemgrep }; markdownRenderer.image = ({ href, title, text }: Tokens.Image): string => { const safeHref = escapeHtml(sanitizeUrl(href)); if (!safeHref) { return escapeHtml(text); } const titleAttr = title ? ' title="' + escapeHtml(title) + '"' : ""; // src/alt/title are sanitized + escaped above. return ( ' ' +
escapeHtml(text) +
'

" ); // nosemgrep }; markdownRenderer.html = ({ text }: Tokens.HTML | Tokens.Tag): string => escapeHtml(text); /* eslint-enable xss/no-mixed-html */ // ============================================================================ // Icon Components // ============================================================================ interface IconProps { size?: number | string; color?: string; className?: string; } const AlgoliaLogo = ({ size = 150 }: IconProps) => ( ); // Attribute Mapping type HitsAttributesMapping = { primaryText: string; secondaryText?: string; tertiaryText?: string; url?: string; image?: string; }; function toAttributePath(attribute: undefined): undefined; function toAttributePath(attribute: string): string | string[]; function toAttributePath(attribute?: string): string | string[] | undefined { if (!attribute) return undefined; return attribute.includes(".") ? attribute.split(".") : attribute; } function getByPath(obj: unknown, path?: string): T | undefined { if (!obj || !path) return undefined; const parts = path.split("."); let current: unknown = obj; for (const part of parts) { if (current == null || typeof current !== "object") return undefined; current = (current as Record)[part]; } return current as T | undefined; } // ============================================================================ // UI Helper Components // ============================================================================ export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> { shimmerWidth?: number; } export const AnimatedShinyText: FC = ({ children, shimmerWidth = 100, ...props }) => { return ( {children} ); }; // ============================================================================ // Modal Component // ============================================================================ interface ModalProps { isOpen: boolean; onClose: () => void; children: React.ReactNode; } const Modal: React.FC = ({ isOpen, onClose, children }) => { useEffect(() => { const handleEscape = (event: KeyboardEvent) => { if (event.key === "Escape") { onClose(); } }; if (isOpen) { document.addEventListener("keydown", handleEscape); document.body.style.overflow = "hidden"; } return () => { document.removeEventListener("keydown", handleEscape); document.body.style.overflow = "unset"; }; }, [isOpen, onClose]); if (!isOpen) return null; return createPortal(

e.stopPropagation()} > {children}

, document.body, ); }; // ============================================================================ // Markdown Component // ============================================================================ interface MemoizedMarkdownProps { children: string; className?: string; } const MemoizedMarkdown = memo(function MemoizedMarkdown({ children, className = "", }: MemoizedMarkdownProps) { const containerRef = useRef(null); const html = useMemo(() => { try { return marked(children, { renderer: markdownRenderer, breaks: true, gfm: true, }); } catch (error) { console.error("Error parsing markdown:", error); return escapeHtml(children); } }, [children]); // biome-ignore lint/correctness/useExhaustiveDependencies: expected useEffect(() => { const container = containerRef.current; if (!container) return; const handleCopyClick = async (event: Event) => { const target = event.target as HTMLElement; const button = target.closest( ".markdown-copy-button", ) as HTMLButtonElement; if (!button) return; event.preventDefault(); event.stopPropagation(); const encodedCode = button.getAttribute("data-code"); if (!encodedCode) return; try { const code = decodeURIComponent(encodedCode); await navigator.clipboard.writeText(code); button.classList.add("markdown-copied"); setTimeout(() => { button.classList.remove("markdown-copied"); }, 2000); } catch (error) { console.error("Failed to copy code:", error); } }; container.addEventListener("click", handleCopyClick); return () => { container.removeEventListener("click", handleCopyClick); }; }, [html]); return (

); }); // ============================================================================ // Thread Depth Error Banner Component // ============================================================================ interface ThreadDepthErrorBannerProps { onNewChat: () => void; detailMessage?: string; } const ThreadDepthErrorBanner = ({ onNewChat, detailMessage, }: ThreadDepthErrorBannerProps) => (

{detailMessage ? (

{detailMessage}

) : null}

{" "} to continue.

); // ============================================================================ // Chat Component // ============================================================================ interface ChatWidgetProps { messages: Message[]; error: Error | null; isGenerating: boolean; onCopy?: (text: string) => Promise | void; onThumbsUp?: (userMessageId: string) => Promise | void; onThumbsDown?: (userMessageId: string) => Promise | void; applicationId: string; apiKey?: string; assistantId: string; agentStudio?: boolean; suggestedQuestions?: SuggestedQuestionHit[]; onSuggestedQuestionClick?: (question: string) => void; onNewChat?: () => void; } const ChatWidget = memo(function ChatWidget({ messages, error, isGenerating, onCopy, onThumbsUp, onThumbsDown, applicationId, apiKey, assistantId, agentStudio, suggestedQuestions, onSuggestedQuestionClick, onNewChat, }: ChatWidgetProps) { const { copyText } = useClipboard(); const [copiedExchangeId, setCopiedExchangeId] = useState(null); const copyResetTimeoutRef = useRef(null); const [acknowledgedExchangeIds, setAcknowledgedExchangeIds] = useState< Set >(new Set()); const [submittingExchangeId, setSubmittingExchangeId] = useState< string | null >(null); const handleFeedback = async (exchange: Exchange, vote: 0 | 1) => { if (!exchange.assistantMessage) return; const customHandler = vote === 1 ? onThumbsUp : onThumbsDown; try { setSubmittingExchangeId(exchange.id); if (customHandler) { await customHandler(exchange.userMessage.id); } else if (agentStudio) { if (apiKey) { await postAgentStudioFeedback({ agentId: assistantId, vote, messageId: exchange.assistantMessage.id, appId: applicationId, apiKey, }); } } else { await postFeedback({ assistantId, appId: applicationId, messageId: exchange.userMessage.id, thumbs: vote, }); } setAcknowledgedExchangeIds((prev) => { const next = new Set(prev); next.add(exchange.id); return next; }); } catch { // ignore errors } finally { setSubmittingExchangeId(null); } }; // Group messages into exchanges (user + assistant pairs) const exchanges = useMemo(() => { const grouped: Exchange[] = []; for (let i = 0; i < messages.length; i++) { const current = messages[i]; if (current.role === "user") { const userMessage = current as Message; const nextMessage = messages[i + 1]; if (nextMessage?.role === "assistant") { grouped.push({ id: userMessage.id, userMessage, assistantMessage: nextMessage as Message, }); i++; // Skip the assistant message since we've already processed it } else { // No assistant yet – show a pending exchange immediately grouped.push({ id: userMessage.id, userMessage, assistantMessage: null, }); } } } return grouped; }, [messages]); // Cleanup any pending reset timers on unmount useEffect(() => { return () => { if (copyResetTimeoutRef.current) { window.clearTimeout(copyResetTimeoutRef.current); } }; }, []); return (

{exchanges.length === 0 ? ( <>

How can I help you today?

I search through your content to help you find answers to your questions, fast.

{suggestedQuestions && suggestedQuestions.length > 0 ? (

{suggestedQuestions.map((question) => ( ))}

) : null}

Answers are generated with AI which can make mistakes.

) : (

Answers are generated with AI which can make mistakes.

)} {/* errors */} {error && (

{isThreadDepthError(error) && onNewChat ? ( ) : ( error.message )}

)} {/* exchanges */} {exchanges .slice() .reverse() .map((exchange, index) => { const isLastExchange = index === 0; return (

{exchange.userMessage.parts.map((part, index) => part.type === "text" ? ( {part.text} ) : null, )}

{exchange.assistantMessage ? (

{exchange.assistantMessage.parts.map((part, index) => { if (typeof part === "string") { return

{part}

; } if (part.type === "text") { return ( {part.text} ); } else if ( part.type === "reasoning" && part.state === "streaming" ) { return (

{" "} Reasoning...

); } else if (part.type === "tool-searchIndex") { if (part.state === "input-streaming") { return (

{" "} Searching...

); } else if (part.state === "input-available") { return (

{" "} Looking for{" "} "{part.input?.query || ""}"

); } else if (part.state === "output-available") { return (

{" "} Searched for{" "} "{part.output?.query}" {" "} found{" "} {Array.isArray(part.output?.hits) ? part.output.hits.length : "no"}{" "} results

); } else if (part.state === "output-error") { return (

{part.errorText}

); } else { return null; } } else { return null; } })}

) : (

{isGenerating && isLastExchange ? "Thinking..." : ""}

)}

{exchange.assistantMessage && !isGenerating ? ( acknowledgedExchangeIds.has(exchange.id) ? ( Thanks for your feedback! ) : submittingExchangeId === exchange.id ? ( Submitting... ) : (

) ) : null}

); })}

); }); // ============================================================================ // Hits List Component // ============================================================================ interface HitsActionsProps { query: string; isSelected: boolean; onAskAI: () => void; onHoverIndex?: (index: number) => void; hoverEnabled?: boolean; } const HitsActions = memo(function HitsActions({ query, isSelected, onAskAI, onHoverIndex, hoverEnabled, }: HitsActionsProps) { return (

); }); interface HitsListProps { hits: Hit[]; query: string; selectedIndex: number; onAskAI: () => void; attributes: HitsAttributesMapping; onHoverIndex?: (index: number) => void; hoverEnabled?: boolean; sendEvent?: ( eventType: "click", hit: Hit, eventName: string, ) => void; openResultsInNewTab?: boolean; } const HitsList = memo(function HitsList({ hits, query, selectedIndex, onAskAI, attributes, onHoverIndex, hoverEnabled, sendEvent, openResultsInNewTab = true, }: HitsListProps) { const [failedImages, setFailedImages] = useState>({}); const mapping = useMemo( () => ({ primaryText: attributes.primaryText, secondaryText: attributes.secondaryText, tertiaryText: attributes.tertiaryText, url: attributes.url, image: attributes.image, }), [attributes], ); if (!attributes || !mapping.primaryText) { throw new Error("At least a primaryText is required to display results"); } return ( <>

Results

{hits.map((hit, idx) => { const isSel = selectedIndex === idx + 1; const primaryVal = getByPath(hit, mapping.primaryText); const imageUrl = getByPath(hit, mapping.image); const url = getByPath(hit, mapping.url); const hasImage = Boolean(imageUrl); const isImageFailed = failedImages[hit.objectID] || !hasImage; return ( ); })} ); }); // ============================================================================ // Search Input Component // ============================================================================ interface SearchInputProps { placeholder?: string; className?: string; showChat: boolean; isGenerating?: boolean; inputRef: React.RefObject; onClose: () => void; setShowChat: (show: boolean) => void; onArrowDown?: () => void; onArrowUp?: () => void; onEnter?: (value: string) => boolean; onNewChat?: () => void; } const SearchLeftButton = memo(function SearchLeftButton({ showChat, setShowChat, }: { showChat: boolean; setShowChat: (show: boolean) => void; }) { if (showChat) { return ( ); } return (

); }); const SearchInput = memo(function SearchInput(props: SearchInputProps) { const { status } = useInstantSearch(); const { query, refine } = useSearchBox(); const [chatInput, setChatInput] = useState(""); const isSearchStalled = status === "stalled"; function setQuery(newQuery: string) { if (props.showChat) { setChatInput(newQuery); } else { refine(newQuery); } } // Clear the input when entering chat mode useEffect(() => { if (props.showChat) { setChatInput(""); } }, [props.showChat]); const placeholder = props.isGenerating ? "Answering..." : props.showChat ? "Ask AI anything" : props.placeholder; const currentValue = props.showChat ? chatInput : query || ""; return ( { event.preventDefault(); event.stopPropagation(); }} onReset={(event) => { event.preventDefault(); event.stopPropagation(); setQuery(""); if (props.inputRef.current) { props.inputRef.current.focus(); } }} > { setQuery(event.currentTarget.value); }} onKeyDown={(e) => { if (props.isGenerating) { e.preventDefault(); return; } if (e.key === "ArrowDown") { e.preventDefault(); props.onArrowDown?.(); return; } if (e.key === "ArrowUp") { e.preventDefault(); props.onArrowUp?.(); return; } if (e.key === "Enter") { e.preventDefault(); const valueAtEnter = props.showChat ? chatInput : query || ""; if (props.onEnter?.(valueAtEnter)) { if (props.showChat) { setChatInput(""); } else { setQuery(""); } return; } const trimmed = valueAtEnter.trim(); if (trimmed) { props.setShowChat(true); } } }} // biome-ignore lint/a11y/noAutofocus: expected autoFocus />

{props.showChat ? ( ) : null}

); }); // ============================================================================ // No Results Component // ============================================================================ interface NoResultsProps { query: string; onAskAI: () => void; onClear: () => void; } const NoResults = memo(function NoResults({ query, onAskAI, onClear, }: NoResultsProps) { return (

No results for "{query}"

Try a different query or ask AI to help.

); }); // ============================================================================ // Results Panel Component // ============================================================================ interface ResultsPanelProps { showChat: boolean; inputRef: React.RefObject; setShowChat: (showChat: boolean) => void; query: string; selectedIndex: number; refine: (query: string) => void; config: SearchWithAskAIConfig; messages: unknown[]; error: Error | null; isGenerating: boolean; sendMessage: (options: { text: string }) => void | Promise; onHoverIndex?: (index: number) => void; scrollOnSelectionChange?: boolean; sendEvent?: ( eventType: "click", hit: Hit, eventName: string, ) => void; suggestedQuestions?: SuggestedQuestionHit[]; onNewChat?: () => void; } const ResultsPanel = memo(function ResultsPanel({ showChat, inputRef, setShowChat, query, selectedIndex, refine, config, messages, error, isGenerating, sendMessage, onHoverIndex, scrollOnSelectionChange = true, sendEvent, suggestedQuestions, onNewChat, }: ResultsPanelProps) { const { items } = useHits( config.transformItems ? { transformItems: config.transformItems } : {}, ); const containerRef = useRef(null); const [hoverEnabled, setHoverEnabled] = useState(false); // Enable hover selection only after the user moves the pointer inside the list useEffect(() => { if (showChat) return; const container = containerRef.current; if (!container) return; setHoverEnabled(false); const enable = () => setHoverEnabled(true); container.addEventListener("pointermove", enable, { once: true }); return () => { container.removeEventListener("pointermove", enable); }; }, [showChat]); // biome-ignore lint/correctness/useExhaustiveDependencies: expected useEffect(() => { if (showChat || !scrollOnSelectionChange) return; const container = containerRef.current; if (!container) return; const selectedEl = container.querySelector( '[aria-selected="true"]', ) as HTMLElement | null; if (!selectedEl) return; const padding = 8; const cRect = container.getBoundingClientRect(); const iRect = selectedEl.getBoundingClientRect(); if (iRect.top < cRect.top + padding) { container.scrollTop -= cRect.top + padding - iRect.top; } else if (iRect.bottom > cRect.bottom - padding) { container.scrollTop += iRect.bottom - (cRect.bottom - padding); } }, [selectedIndex, showChat, items.length, scrollOnSelectionChange]); const lastSentRef = useRef(null); useEffect(() => { if (!showChat) return; const trimmed = (query ?? "").trim(); if (!trimmed) return; if (lastSentRef.current === trimmed) return; refine(""); if (inputRef.current) { inputRef.current.focus(); } sendMessage({ text: trimmed }); lastSentRef.current = trimmed; }, [showChat, query, inputRef, sendMessage, refine]); useEffect(() => { if ((messages as Message[]).length === 0) { lastSentRef.current = null; } }, [messages]); const handleSuggestedQuestionClick = useCallback( (question: string) => { const trimmed = question.trim(); if (!trimmed || isGenerating) { return; } sendMessage({ text: trimmed }); }, [sendMessage, isGenerating], ); if (showChat) { return ( ); } return ( <> ); }); // ============================================================================ // Search Box Component // ============================================================================ interface SearchBoxProps { query?: string; className?: string; placeholder?: string; showChat: boolean; isGenerating?: boolean; inputRef: React.RefObject; refine: (query: string) => void; setShowChat: (show: boolean) => void; onClose?: () => void; onArrowDown?: () => void; onArrowUp?: () => void; onEnter?: (value: string) => boolean; onNewChat?: () => void; } const SearchBox = memo(function SearchBox(props: SearchBoxProps) { return ( {})} onArrowDown={props.onArrowDown} onArrowUp={props.onArrowUp} onEnter={props.onEnter} onNewChat={props.onNewChat} /> ); }); // ============================================================================ // Footer Component // ============================================================================ const Footer = memo(function Footer({ showChat }: { showChat: boolean }) { const basePoweredByUrl = "https://www.algolia.com/developers?utm_medium=referral&utm_content=powered_by&utm_campaign=sitesearch"; const poweredByHref = typeof window !== "undefined" ? `${basePoweredByUrl}&utm_source=${encodeURIComponent( window.location.hostname, )}` : basePoweredByUrl; return (

{showChat ? "Ask question" : "Open"}

Navigate

{/* 🚧 DO NOT REMOVE the logo if you are on a Free plan * https://support.algolia.com/hc/en-us/articles/17226079853073-Is-displaying-the-Algolia-logo-required */} Powered by

); }); // ============================================================================ // Search Modal (Inner Content) // ============================================================================ interface SearchModalProps { onClose?: () => void; config: SearchWithAskAIConfig; } function SearchModal({ onClose, config }: SearchModalProps) { const { query, refine } = useSearchBox(); const inputRef = useRef(null); const results = useInstantSearch(); const { items, sendEvent } = useHits( config.transformItems ? { transformItems: config.transformItems } : {}, ); const { showChat, setShowChat, handleShowChat } = useSearchState(); // Track the message count when a thread depth error occurred const [threadDepthErrorAtMessageCount, setThreadDepthErrorAtMessageCount] = useState(null); const { messages, error, isGenerating, sendMessage, startNewConversation, status, hasThreadDepthError, } = useAskai({ applicationId: config.applicationId, apiKey: config.apiKey, indexName: config.indexName, assistantId: config.assistantId, agentStudio: config.agentStudio, }); // Monitor for thread depth errors (AI-217) useEffect(() => { const err = error as Error & { code?: string }; if ( status === "error" && (err?.code === "AI-217" || error?.message?.includes("AI-217")) ) { // Only record if we have an assistant message (real conversation) messages.some((m) => m.role === "assistant") && setThreadDepthErrorAtMessageCount(messages.length); } else if ( status !== "error" && threadDepthErrorAtMessageCount && messages.length < threadDepthErrorAtMessageCount ) { setThreadDepthErrorAtMessageCount(null); } }, [status, error, messages, threadDepthErrorAtMessageCount]); const suggestedQuestionsClient = useMemo(() => { const client = algoliasearch(config.applicationId, config.apiKey); client.addAlgoliaAgent("algolia-sitesearch"); return client; }, [config.applicationId, config.apiKey]); const suggestedQuestions = useSuggestedQuestions({ searchClient: suggestedQuestionsClient, assistantId: config.assistantId, suggestedQuestionsEnabled: config.suggestedQuestionsEnabled ?? false, isOpen: showChat, }); const noResults = results.results?.nbHits === 0; const { selectedIndex, moveDown, moveUp, activateSelection, hoverIndex, selectionOrigin, } = useKeyboardNavigation( showChat, items, query, config.openResultsInNewTab ?? true, ); const handleActivateSelection = useCallback((): boolean => { // Send click event for keyboard navigation before activating if (selectedIndex > 0) { const hit = items[selectedIndex - 1]; if (hit) { sendEvent?.("click", hit, "Hit Clicked"); } } if (activateSelection()) { if (selectedIndex === 0) { handleShowChat(true); } return true; } return false; }, [activateSelection, selectedIndex, handleShowChat, items, sendEvent]); const showResultsPanel = (!noResults && !!query) || showChat; const handleNewChat = useCallback(() => { startNewConversation(); setThreadDepthErrorAtMessageCount(null); setShowChat(true); refine(""); if (inputRef.current) { inputRef.current.focus(); } }, [startNewConversation, setShowChat, refine]); const handleSetShowChat = useCallback( (v: boolean) => { if (!v && hasThreadDepthError) { startNewConversation(); setThreadDepthErrorAtMessageCount(null); } setShowChat(v); }, [setShowChat, hasThreadDepthError, startNewConversation], ); return ( <>

{ const trimmed = (value ?? "").trim(); if (showChat && trimmed) { refine(trimmed); return true; } return handleActivateSelection(); }} inputRef={inputRef} onNewChat={handleNewChat} /> {showResultsPanel && ( )} {noResults && query && !showChat && ( { setShowChat(true); }} onClear={() => { refine(""); if (inputRef.current) { inputRef.current.focus(); } }} /> )}