{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "search-ai", "type": "registry:block", "title": "Search with Ask AI", "description": "Opinionated search experience with Ask AI, powered by Algolia's InstantSearch and Ask AI", "dependencies": [ "@ai-sdk/react@^2.0.4", "ai@^5.0.30", "algoliasearch@^5", "react-instantsearch@^7.16.2", "tw-animate-css", "lucide-react", "marked" ], "devDependencies": [ "tw-animate-css" ], "registryDependencies": [ "button" ], "files": [ { "path": "src/registry/experiences/search-askai/components/search-ai.tsx", "content": "/** biome-ignore-all lint/suspicious/noArrayIndexKey: . */\n/** biome-ignore-all lint/a11y/useFocusableInteractive: hand crafted interactions */\n/** biome-ignore-all lint/a11y/useSemanticElements: hand crafted interactions */\n/** biome-ignore-all lint/a11y/noStaticElementInteractions: hand crafted interactions */\n/** biome-ignore-all lint/a11y/useKeyWithClickEvents: hand crafted interactions */\nimport type { UIMessage } from \"@ai-sdk/react\";\nimport type { UIDataTypes, UIMessagePart } from \"ai\";\nimport { liteClient as algoliasearch } from \"algoliasearch/lite\";\nimport type { BaseHit, Hit } from \"instantsearch.js\";\nimport {\n ArrowLeftIcon,\n BrainIcon,\n CheckIcon,\n CopyIcon,\n CornerDownLeftIcon,\n SearchIcon,\n SparklesIcon,\n SquarePen,\n ThumbsDown,\n ThumbsUp,\n} from \"lucide-react\";\nimport { marked, type Tokens } from \"marked\";\nimport type React from \"react\";\nimport {\n type ComponentPropsWithoutRef,\n type CSSProperties,\n type FC,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n Configure,\n Highlight,\n InstantSearch,\n useHits,\n useInstantSearch,\n useSearchBox,\n} from \"react-instantsearch\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport {\n isThreadDepthError,\n postAgentStudioFeedback,\n postFeedback,\n threadDepthErrorDetail,\n useAskai,\n} from \"@/registry/experiences/search-askai/hooks/use-askai\";\n\nimport { useKeyboardNavigation } from \"@/registry/experiences/search-askai/hooks/use-keyboard-navigation\";\nimport { useSearchState } from \"@/registry/experiences/search-askai/hooks/use-search-state\";\nimport {\n type SuggestedQuestionHit,\n useSuggestedQuestions,\n} from \"@/registry/experiences/search-askai/hooks/use-suggested-questions\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface SearchWithAskAIConfig {\n /** Algolia Application ID (required) */\n applicationId: string;\n /** Algolia API Key (required) */\n apiKey: string;\n /** Algolia Index Name (required) */\n indexName: string;\n /** AI Assistant ID (required for chat functionality) */\n assistantId: string;\n /** Placeholder text for search input (optional, defaults to \"What are you looking for?\") */\n placeholder?: string;\n /** Number of hits per page (optional, defaults to 8) */\n hitsPerPage?: number;\n /** Custom search button text (optional) */\n buttonText?: string;\n /** Custom search button props (optional) */\n buttonProps?: React.ComponentProps;\n /** Map which hit attributes to render (supports dotted paths) */\n attributes: HitsAttributesMapping;\n /** Additional Algolia search parameters (optional) - e.g., analytics, filters, distinct, etc. */\n searchParameters?: Record;\n /** Enable Algolia Insights (optional, defaults to true) */\n insights?: boolean;\n /** Suggested Questions Enabled (optional, defaults to false) */\n suggestedQuestionsEnabled?: boolean;\n /** Open hit URLs in a new tab (optional, defaults to true) */\n openResultsInNewTab?: boolean;\n /** Transform items before rendering (optional) - useful for proxying images or modifying hit data */\n transformItems?: (items: Hit[]) => Hit[];\n /** Route Ask AI requests through Agent Studio endpoints (optional, defaults to false). */\n agentStudio?: boolean;\n}\n\ninterface SearchButtonProps extends React.ComponentProps {}\n\nexport const SearchButton: React.FC = ({\n className,\n ...buttonProps\n}) => {\n const [modifierLabel, setModifierLabel] = useState(\"⌘\");\n const [isModifierPressed, setIsModifierPressed] = useState(false);\n const [isKPressed, setIsKPressed] = useState(false);\n\n useEffect(() => {\n if (typeof navigator === \"undefined\") return;\n const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);\n setModifierLabel(isMac ? \"⌘\" : \"Ctrl\");\n }, []);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.metaKey || event.ctrlKey) setIsModifierPressed(true);\n if (event.key.toLowerCase() === \"k\") setIsKPressed(true);\n };\n const handleKeyUp = (event: KeyboardEvent) => {\n if (!event.metaKey && !event.ctrlKey) setIsModifierPressed(false);\n if (event.key.toLowerCase() === \"k\") setIsKPressed(false);\n };\n const resetKeys = () => {\n setIsModifierPressed(false);\n setIsKPressed(false);\n };\n document.addEventListener(\"keydown\", handleKeyDown);\n document.addEventListener(\"keyup\", handleKeyUp);\n window.addEventListener(\"blur\", resetKeys);\n return () => {\n document.removeEventListener(\"keydown\", handleKeyDown);\n document.removeEventListener(\"keyup\", handleKeyUp);\n window.removeEventListener(\"blur\", resetKeys);\n };\n }, []);\n\n const baseClassName =\n \"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\";\n\n return (\n \n \n \n Search\n \n
\n \n {modifierLabel}\n \n \n K\n \n
\n \n );\n};\n\nexport interface SearchIndexTool {\n input: {\n query: string;\n };\n output: {\n query: string;\n hits: Hit[];\n };\n}\n\nexport type Message = UIMessage<\n unknown,\n UIDataTypes,\n {\n searchIndex: SearchIndexTool;\n }\n>;\n\nexport type AIMessagePart = UIMessagePart<\n UIDataTypes,\n {\n searchIndex: SearchIndexTool;\n }\n>;\n\ninterface Exchange {\n id: string;\n userMessage: Message;\n assistantMessage: Message | null;\n}\n\n// ============================================================================\n// Utilities & Helpers\n// ============================================================================\n\nfunction useClipboard() {\n const copyText = useCallback(async (text: string) => {\n try {\n await navigator.clipboard.writeText(text);\n } catch {\n // Silently fail - clipboard access might be blocked\n }\n }, []);\n\n return { copyText };\n}\n\nfunction escapeHtml(html: string): string {\n return html\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\nfunction decodeUrlForSchemeCheck(value: string): string {\n let current = value;\n for (let i = 0; i < 3; i += 1) {\n try {\n const decoded = decodeURIComponent(current);\n if (decoded === current) {\n break;\n }\n current = decoded;\n } catch {\n break;\n }\n }\n return current;\n}\n\nfunction stripControlsAndWhitespace(value: string): string {\n let result = \"\";\n for (let i = 0; i < value.length; i += 1) {\n const code = value.charCodeAt(i);\n if (code > 0x20 && code !== 0x7f) {\n result += value.charAt(i);\n }\n }\n return result;\n}\n\nfunction sanitizeUrl(url: string | null | undefined): string {\n if (!url) {\n return \"\";\n }\n\n const trimmed = url.trim();\n if (!trimmed) {\n return \"\";\n }\n\n // Decode / strip controls for scheme checks only — return the original trimmed\n // URL when safe so percent-encoding in the path/query is preserved.\n const normalized = stripControlsAndWhitespace(\n decodeUrlForSchemeCheck(trimmed),\n ).replace(/\\\\/g, \"/\");\n if (!normalized) {\n return \"\";\n }\n\n // Protocol-relative and backslash-obfuscated hosts (e.g. /\\evil.com → //evil.com).\n if (normalized.startsWith(\"//\")) {\n return \"\";\n }\n\n if (!/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(normalized)) {\n return trimmed;\n }\n\n try {\n const parsed = new URL(normalized);\n if (\n parsed.protocol === \"http:\" ||\n parsed.protocol === \"https:\" ||\n parsed.protocol === \"mailto:\"\n ) {\n return trimmed;\n }\n } catch {\n return \"\";\n }\n\n return \"\";\n}\n\n// ============================================================================\n// Markdown Renderer\n// ============================================================================\n\n/* eslint-disable xss/no-mixed-html -- marked renderer: interpolations escaped/sanitized */\nconst markdownRenderer = new marked.Renderer();\n\nmarkdownRenderer.code = ({ text, lang = \"\", escaped }: Tokens.Code): string => {\n const safeLang = /^[a-zA-Z0-9_-]+$/.test(lang) ? lang : \"\";\n const languageClass = safeLang ? `language-${safeLang}` : \"\";\n const safeCode = escaped ? text : escapeHtml(text);\n const encodedCode = encodeURIComponent(text);\n\n const copyIconSvg = `\n \n \n \n \n `;\n\n const checkIconSvg = `\n \n \n \n `;\n\n return `\n
\n \n 
${safeCode}
\n
\n `;\n};\n\nmarkdownRenderer.link = ({ href, title, text }: Tokens.Link): string => {\n const safeHref = escapeHtml(sanitizeUrl(href));\n const textEscaped = escapeHtml(text);\n\n if (!safeHref) {\n return textEscaped;\n }\n\n const titleAttr = title ? ' title=\"' + escapeHtml(title) + '\"' : \"\";\n // href/text/title are sanitized + escaped above.\n return (\n '\" +\n textEscaped +\n \"\"\n ); // nosemgrep\n};\n\nmarkdownRenderer.image = ({ href, title, text }: Tokens.Image): string => {\n const safeHref = escapeHtml(sanitizeUrl(href));\n if (!safeHref) {\n return escapeHtml(text);\n }\n\n const titleAttr = title ? ' title=\"' + escapeHtml(title) + '\"' : \"\";\n // src/alt/title are sanitized + escaped above.\n return (\n '\"'\"\n ); // nosemgrep\n};\n\nmarkdownRenderer.html = ({ text }: Tokens.HTML | Tokens.Tag): string =>\n escapeHtml(text);\n/* eslint-enable xss/no-mixed-html */\n\n// ============================================================================\n// Icon Components\n// ============================================================================\n\ninterface IconProps {\n size?: number | string;\n color?: string;\n className?: string;\n}\n\nconst AlgoliaLogo = ({ size = 150 }: IconProps) => (\n \n \n {/* eslint-disable-nextLine @docusaurus/no-untranslated-text */}\n \n \n \n \n \n \n \n \n \n \n \n \n);\n\n// Attribute Mapping\ntype HitsAttributesMapping = {\n primaryText: string;\n secondaryText?: string;\n tertiaryText?: string;\n url?: string;\n image?: string;\n};\n\nfunction toAttributePath(attribute: undefined): undefined;\nfunction toAttributePath(attribute: string): string | string[];\nfunction toAttributePath(attribute?: string): string | string[] | undefined {\n if (!attribute) return undefined;\n return attribute.includes(\".\") ? attribute.split(\".\") : attribute;\n}\n\nfunction getByPath(obj: unknown, path?: string): T | undefined {\n if (!obj || !path) return undefined;\n const parts = path.split(\".\");\n let current: unknown = obj;\n for (const part of parts) {\n if (current == null || typeof current !== \"object\") return undefined;\n current = (current as Record)[part];\n }\n return current as T | undefined;\n}\n\n// ============================================================================\n// UI Helper Components\n// ============================================================================\nexport interface AnimatedShinyTextProps\n extends ComponentPropsWithoutRef<\"span\"> {\n shimmerWidth?: number;\n}\nexport const AnimatedShinyText: FC = ({\n children,\n shimmerWidth = 100,\n ...props\n}) => {\n return (\n \n {children}\n \n );\n};\n\n// ============================================================================\n// Modal Component\n// ============================================================================\n\ninterface ModalProps {\n isOpen: boolean;\n onClose: () => void;\n children: React.ReactNode;\n}\n\nconst Modal: React.FC = ({ isOpen, onClose, children }) => {\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onClose();\n }\n };\n\n if (isOpen) {\n document.addEventListener(\"keydown\", handleEscape);\n document.body.style.overflow = \"hidden\";\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleEscape);\n document.body.style.overflow = \"unset\";\n };\n }, [isOpen, onClose]);\n\n if (!isOpen) return null;\n\n return createPortal(\n \n e.stopPropagation()}\n >\n {children}\n \n ,\n document.body,\n );\n};\n\n// ============================================================================\n// Markdown Component\n// ============================================================================\n\ninterface MemoizedMarkdownProps {\n children: string;\n className?: string;\n}\n\nconst MemoizedMarkdown = memo(function MemoizedMarkdown({\n children,\n className = \"\",\n}: MemoizedMarkdownProps) {\n const containerRef = useRef(null);\n\n const html = useMemo(() => {\n try {\n return marked(children, {\n renderer: markdownRenderer,\n breaks: true,\n gfm: true,\n });\n } catch (error) {\n console.error(\"Error parsing markdown:\", error);\n return escapeHtml(children);\n }\n }, [children]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: expected\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n const handleCopyClick = async (event: Event) => {\n const target = event.target as HTMLElement;\n const button = target.closest(\n \".markdown-copy-button\",\n ) as HTMLButtonElement;\n\n if (!button) return;\n\n event.preventDefault();\n event.stopPropagation();\n\n const encodedCode = button.getAttribute(\"data-code\");\n if (!encodedCode) return;\n\n try {\n const code = decodeURIComponent(encodedCode);\n await navigator.clipboard.writeText(code);\n\n button.classList.add(\"markdown-copied\");\n\n setTimeout(() => {\n button.classList.remove(\"markdown-copied\");\n }, 2000);\n } catch (error) {\n console.error(\"Failed to copy code:\", error);\n }\n };\n\n container.addEventListener(\"click\", handleCopyClick);\n\n return () => {\n container.removeEventListener(\"click\", handleCopyClick);\n };\n }, [html]);\n\n return (\n \n );\n});\n\n// ============================================================================\n// Thread Depth Error Banner Component\n// ============================================================================\n\ninterface ThreadDepthErrorBannerProps {\n onNewChat: () => void;\n detailMessage?: string;\n}\n\nconst ThreadDepthErrorBanner = ({\n onNewChat,\n detailMessage,\n}: ThreadDepthErrorBannerProps) => (\n
\n {detailMessage ? (\n

{detailMessage}

\n ) : null}\n

\n \n Start a new conversation\n {\" \"}\n to continue.\n

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

\n How can I help you today?\n

\n

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

\n {suggestedQuestions && suggestedQuestions.length > 0 ? (\n
\n {suggestedQuestions.map((question) => (\n {\n if (isGenerating) return;\n onSuggestedQuestionClick?.(question.question);\n }}\n >\n {question.question}\n \n ))}\n
\n ) : null}\n
\n

\n Answers are generated with AI which can make mistakes.\n

\n \n ) : (\n

\n Answers are generated with AI which can make mistakes.\n

\n )}\n {/* errors */}\n {error && (\n
\n {isThreadDepthError(error) && onNewChat ? (\n \n ) : (\n error.message\n )}\n
\n )}\n\n {/* exchanges */}\n {exchanges\n .slice()\n .reverse()\n .map((exchange, index) => {\n const isLastExchange = index === 0;\n\n return (\n \n
\n
\n {exchange.userMessage.parts.map((part, index) =>\n part.type === \"text\" ? (\n {part.text}\n ) : null,\n )}\n
\n
\n\n
\n
\n {exchange.assistantMessage ? (\n
\n {exchange.assistantMessage.parts.map((part, index) => {\n if (typeof part === \"string\") {\n return

{part}

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

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

\n );\n } else if (part.state === \"input-available\") {\n return (\n \n {\" \"}\n \n Looking for{\" \"}\n \n "{part.input?.query || \"\"}"\n \n \n

\n );\n } else if (part.state === \"output-available\") {\n return (\n \n {\" \"}\n \n Searched for{\" \"}\n \n "{part.output?.query}"\n {\" \"}\n found{\" \"}\n {Array.isArray(part.output?.hits)\n ? part.output.hits.length\n : \"no\"}{\" \"}\n results\n \n

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

\n );\n } else {\n return null;\n }\n } else {\n return null;\n }\n })}\n
\n ) : (\n
\n \n {isGenerating && isLastExchange ? \"Thinking...\" : \"\"}\n \n
\n )}\n
\n
\n\n
\n {exchange.assistantMessage && !isGenerating ? (\n acknowledgedExchangeIds.has(exchange.id) ? (\n \n Thanks for your feedback!\n \n ) : submittingExchangeId === exchange.id ? (\n \n Submitting...\n \n ) : (\n
\n handleFeedback(exchange, 1)}\n >\n \n \n handleFeedback(exchange, 0)}\n >\n \n \n
\n )\n ) : null}\n {\n const parts = exchange.assistantMessage?.parts ?? [];\n const textContent = parts\n .flatMap((part) =>\n part.type === \"text\" ? [part.text] : [],\n )\n .join(\"\")\n .trim();\n if (!textContent) return;\n try {\n if (onCopy) {\n await onCopy(textContent);\n } else {\n await copyText(textContent);\n }\n setCopiedExchangeId(exchange.id);\n if (copyResetTimeoutRef.current) {\n window.clearTimeout(copyResetTimeoutRef.current);\n }\n copyResetTimeoutRef.current = window.setTimeout(() => {\n setCopiedExchangeId(null);\n }, 1500);\n } catch {\n // noop – copy may fail silently\n }\n }}\n >\n {copiedExchangeId === exchange.id ? (\n \n ) : (\n \n )}\n \n
\n \n );\n })}\n
\n
\n );\n});\n\n// ============================================================================\n// Hits List Component\n// ============================================================================\n\ninterface HitsActionsProps {\n query: string;\n isSelected: boolean;\n onAskAI: () => void;\n onHoverIndex?: (index: number) => void;\n hoverEnabled?: boolean;\n}\n\nconst HitsActions = memo(function HitsActions({\n query,\n isSelected,\n onAskAI,\n onHoverIndex,\n hoverEnabled,\n}: HitsActionsProps) {\n return (\n
\n {\n if (!hoverEnabled) return;\n onHoverIndex?.(0);\n }}\n onMouseMove={() => {\n if (!hoverEnabled) return;\n onHoverIndex?.(0);\n }}\n >\n \n

\n Ask AI:{\" \"}\n \n "{query}"\n \n

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

Results

\n {hits.map((hit, idx) => {\n const isSel = selectedIndex === idx + 1;\n const primaryVal = getByPath(hit, mapping.primaryText);\n const imageUrl = getByPath(hit, mapping.image);\n const url = getByPath(hit, mapping.url);\n const hasImage = Boolean(imageUrl);\n const isImageFailed = failedImages[hit.objectID] || !hasImage;\n return (\n {\n sendEvent?.(\"click\", hit, \"Hit Clicked\");\n }}\n onMouseEnter={() => {\n if (!hoverEnabled) return;\n onHoverIndex?.(idx + 1);\n }}\n onMouseMove={() => {\n if (!hoverEnabled) return;\n onHoverIndex?.(idx + 1);\n }}\n >\n {hasImage ? (\n
\n {!isImageFailed ? (\n \n setFailedImages((prev) => ({\n ...prev,\n [hit.objectID]: true,\n }))\n }\n />\n ) : (\n \n \n
\n )}\n \n ) : null}\n
\n

\n \n

\n {mapping.secondaryText ? (\n

\n {getByPath(hit, mapping.secondaryText)}\n

\n ) : null}\n {mapping.tertiaryText ? (\n

\n {getByPath(hit, mapping.tertiaryText)}\n

\n ) : null}\n
\n \n );\n })}\n \n );\n});\n\n// ============================================================================\n// Search Input Component\n// ============================================================================\n\ninterface SearchInputProps {\n placeholder?: string;\n className?: string;\n showChat: boolean;\n isGenerating?: boolean;\n inputRef: React.RefObject;\n onClose: () => void;\n setShowChat: (show: boolean) => void;\n onArrowDown?: () => void;\n onArrowUp?: () => void;\n onEnter?: (value: string) => boolean;\n onNewChat?: () => void;\n}\n\nconst SearchLeftButton = memo(function SearchLeftButton({\n showChat,\n setShowChat,\n}: {\n showChat: boolean;\n setShowChat: (show: boolean) => void;\n}) {\n if (showChat) {\n return (\n setShowChat(false)}\n className=\"cursor-pointer p-2 rounded-full flex items-center justify-center text-foreground transition-colors hover:text-blue-600\"\n aria-label=\"Back to search\"\n title=\"Back to search\"\n >\n \n \n );\n }\n\n return (\n \n \n \n );\n});\n\nconst SearchInput = memo(function SearchInput(props: SearchInputProps) {\n const { status } = useInstantSearch();\n const { query, refine } = useSearchBox();\n const [chatInput, setChatInput] = useState(\"\");\n\n const isSearchStalled = status === \"stalled\";\n\n function setQuery(newQuery: string) {\n if (props.showChat) {\n setChatInput(newQuery);\n } else {\n refine(newQuery);\n }\n }\n\n // Clear the input when entering chat mode\n useEffect(() => {\n if (props.showChat) {\n setChatInput(\"\");\n }\n }, [props.showChat]);\n\n const placeholder = props.isGenerating\n ? \"Answering...\"\n : props.showChat\n ? \"Ask AI anything\"\n : props.placeholder;\n\n const currentValue = props.showChat ? chatInput : query || \"\";\n\n return (\n {\n event.preventDefault();\n event.stopPropagation();\n }}\n onReset={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n setQuery(\"\");\n if (props.inputRef.current) {\n props.inputRef.current.focus();\n }\n }}\n >\n \n {\n setQuery(event.currentTarget.value);\n }}\n onKeyDown={(e) => {\n if (props.isGenerating) {\n e.preventDefault();\n return;\n }\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n props.onArrowDown?.();\n return;\n }\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n props.onArrowUp?.();\n return;\n }\n if (e.key === \"Enter\") {\n e.preventDefault();\n const valueAtEnter = props.showChat ? chatInput : query || \"\";\n if (props.onEnter?.(valueAtEnter)) {\n if (props.showChat) {\n setChatInput(\"\");\n } else {\n setQuery(\"\");\n }\n return;\n }\n const trimmed = valueAtEnter.trim();\n if (trimmed) {\n props.setShowChat(true);\n }\n }\n }}\n // biome-ignore lint/a11y/noAutofocus: expected\n autoFocus\n />\n
\n
\n \n );\n});\n\n// ============================================================================\n// No Results Component\n// ============================================================================\n\ninterface NoResultsProps {\n query: string;\n onAskAI: () => void;\n onClear: () => void;\n}\n\nconst NoResults = memo(function NoResults({\n query,\n onAskAI,\n onClear,\n}: NoResultsProps) {\n return (\n
\n
\n \n
\n

\n No results for "{query}"\n

\n

\n Try a different query or ask AI to help.\n

\n
\n \n \n
\n
\n );\n});\n\n// ============================================================================\n// Results Panel Component\n// ============================================================================\n\ninterface ResultsPanelProps {\n showChat: boolean;\n inputRef: React.RefObject;\n setShowChat: (showChat: boolean) => void;\n query: string;\n selectedIndex: number;\n refine: (query: string) => void;\n config: SearchWithAskAIConfig;\n messages: unknown[];\n error: Error | null;\n isGenerating: boolean;\n sendMessage: (options: { text: string }) => void | Promise;\n onHoverIndex?: (index: number) => void;\n scrollOnSelectionChange?: boolean;\n sendEvent?: (\n eventType: \"click\",\n hit: Hit,\n eventName: string,\n ) => void;\n suggestedQuestions?: SuggestedQuestionHit[];\n onNewChat?: () => void;\n}\n\nconst ResultsPanel = memo(function ResultsPanel({\n showChat,\n inputRef,\n setShowChat,\n query,\n selectedIndex,\n refine,\n config,\n messages,\n error,\n isGenerating,\n sendMessage,\n onHoverIndex,\n scrollOnSelectionChange = true,\n sendEvent,\n suggestedQuestions,\n onNewChat,\n}: ResultsPanelProps) {\n const { items } = useHits(\n config.transformItems ? { transformItems: config.transformItems } : {},\n );\n const containerRef = useRef(null);\n const [hoverEnabled, setHoverEnabled] = useState(false);\n\n // Enable hover selection only after the user moves the pointer inside the list\n useEffect(() => {\n if (showChat) return;\n const container = containerRef.current;\n if (!container) return;\n setHoverEnabled(false);\n const enable = () => setHoverEnabled(true);\n container.addEventListener(\"pointermove\", enable, { once: true });\n return () => {\n container.removeEventListener(\"pointermove\", enable);\n };\n }, [showChat]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: expected\n useEffect(() => {\n if (showChat || !scrollOnSelectionChange) return;\n const container = containerRef.current;\n if (!container) return;\n const selectedEl = container.querySelector(\n '[aria-selected=\"true\"]',\n ) as HTMLElement | null;\n if (!selectedEl) return;\n\n const padding = 8;\n const cRect = container.getBoundingClientRect();\n const iRect = selectedEl.getBoundingClientRect();\n\n if (iRect.top < cRect.top + padding) {\n container.scrollTop -= cRect.top + padding - iRect.top;\n } else if (iRect.bottom > cRect.bottom - padding) {\n container.scrollTop += iRect.bottom - (cRect.bottom - padding);\n }\n }, [selectedIndex, showChat, items.length, scrollOnSelectionChange]);\n\n const lastSentRef = useRef(null);\n useEffect(() => {\n if (!showChat) return;\n const trimmed = (query ?? \"\").trim();\n if (!trimmed) return;\n if (lastSentRef.current === trimmed) return;\n refine(\"\");\n if (inputRef.current) {\n inputRef.current.focus();\n }\n sendMessage({ text: trimmed });\n lastSentRef.current = trimmed;\n }, [showChat, query, inputRef, sendMessage, refine]);\n\n useEffect(() => {\n if ((messages as Message[]).length === 0) {\n lastSentRef.current = null;\n }\n }, [messages]);\n\n const handleSuggestedQuestionClick = useCallback(\n (question: string) => {\n const trimmed = question.trim();\n if (!trimmed || isGenerating) {\n return;\n }\n sendMessage({ text: trimmed });\n },\n [sendMessage, isGenerating],\n );\n\n if (showChat) {\n return (\n \n );\n }\n\n return (\n <>\n \n setShowChat(true)}\n attributes={config.attributes}\n onHoverIndex={onHoverIndex}\n hoverEnabled={hoverEnabled}\n sendEvent={sendEvent}\n openResultsInNewTab={config.openResultsInNewTab}\n />\n \n \n );\n});\n\n// ============================================================================\n// Search Box Component\n// ============================================================================\n\ninterface SearchBoxProps {\n query?: string;\n className?: string;\n placeholder?: string;\n showChat: boolean;\n isGenerating?: boolean;\n inputRef: React.RefObject;\n refine: (query: string) => void;\n setShowChat: (show: boolean) => void;\n onClose?: () => void;\n onArrowDown?: () => void;\n onArrowUp?: () => void;\n onEnter?: (value: string) => boolean;\n onNewChat?: () => void;\n}\n\nconst SearchBox = memo(function SearchBox(props: SearchBoxProps) {\n return (\n {})}\n onArrowDown={props.onArrowDown}\n onArrowUp={props.onArrowUp}\n onEnter={props.onEnter}\n onNewChat={props.onNewChat}\n />\n );\n});\n\n// ============================================================================\n// Footer Component\n// ============================================================================\n\nconst Footer = memo(function Footer({ showChat }: { showChat: boolean }) {\n const basePoweredByUrl =\n \"https://www.algolia.com/developers?utm_medium=referral&utm_content=powered_by&utm_campaign=sitesearch\";\n const poweredByHref =\n typeof window !== \"undefined\"\n ? `${basePoweredByUrl}&utm_source=${encodeURIComponent(\n window.location.hostname,\n )}`\n : basePoweredByUrl;\n return (\n
\n
\n
\n \n \n \n \n \n {showChat ? \"Ask question\" : \"Open\"}\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n Navigate\n
\n
\n
\n {/* 🚧 DO NOT REMOVE the logo if you are on a Free plan\n * https://support.algolia.com/hc/en-us/articles/17226079853073-Is-displaying-the-Algolia-logo-required\n */}\n \n Powered by \n \n \n
\n
\n );\n});\n\n// ============================================================================\n// Search Modal (Inner Content)\n// ============================================================================\n\ninterface SearchModalProps {\n onClose?: () => void;\n config: SearchWithAskAIConfig;\n}\n\nfunction SearchModal({ onClose, config }: SearchModalProps) {\n const { query, refine } = useSearchBox();\n const inputRef = useRef(null);\n\n const results = useInstantSearch();\n const { items, sendEvent } = useHits(\n config.transformItems ? { transformItems: config.transformItems } : {},\n );\n const { showChat, setShowChat, handleShowChat } = useSearchState();\n\n // Track the message count when a thread depth error occurred\n const [threadDepthErrorAtMessageCount, setThreadDepthErrorAtMessageCount] =\n useState(null);\n\n const {\n messages,\n error,\n isGenerating,\n sendMessage,\n startNewConversation,\n status,\n hasThreadDepthError,\n } = useAskai({\n applicationId: config.applicationId,\n apiKey: config.apiKey,\n indexName: config.indexName,\n assistantId: config.assistantId,\n agentStudio: config.agentStudio,\n });\n\n // Monitor for thread depth errors (AI-217)\n useEffect(() => {\n const err = error as Error & { code?: string };\n if (\n status === \"error\" &&\n (err?.code === \"AI-217\" || error?.message?.includes(\"AI-217\"))\n ) {\n // Only record if we have an assistant message (real conversation)\n messages.some((m) => m.role === \"assistant\") &&\n setThreadDepthErrorAtMessageCount(messages.length);\n } else if (\n status !== \"error\" &&\n threadDepthErrorAtMessageCount &&\n messages.length < threadDepthErrorAtMessageCount\n ) {\n setThreadDepthErrorAtMessageCount(null);\n }\n }, [status, error, messages, threadDepthErrorAtMessageCount]);\n\n const suggestedQuestionsClient = useMemo(() => {\n const client = algoliasearch(config.applicationId, config.apiKey);\n client.addAlgoliaAgent(\"algolia-sitesearch\");\n return client;\n }, [config.applicationId, config.apiKey]);\n\n const suggestedQuestions = useSuggestedQuestions({\n searchClient: suggestedQuestionsClient,\n assistantId: config.assistantId,\n suggestedQuestionsEnabled: config.suggestedQuestionsEnabled ?? false,\n isOpen: showChat,\n });\n\n const noResults = results.results?.nbHits === 0;\n const {\n selectedIndex,\n moveDown,\n moveUp,\n activateSelection,\n hoverIndex,\n selectionOrigin,\n } = useKeyboardNavigation(\n showChat,\n items,\n query,\n config.openResultsInNewTab ?? true,\n );\n\n const handleActivateSelection = useCallback((): boolean => {\n // Send click event for keyboard navigation before activating\n if (selectedIndex > 0) {\n const hit = items[selectedIndex - 1];\n if (hit) {\n sendEvent?.(\"click\", hit, \"Hit Clicked\");\n }\n }\n\n if (activateSelection()) {\n if (selectedIndex === 0) {\n handleShowChat(true);\n }\n return true;\n }\n return false;\n }, [activateSelection, selectedIndex, handleShowChat, items, sendEvent]);\n\n const showResultsPanel = (!noResults && !!query) || showChat;\n\n const handleNewChat = useCallback(() => {\n startNewConversation();\n setThreadDepthErrorAtMessageCount(null);\n setShowChat(true);\n refine(\"\");\n if (inputRef.current) {\n inputRef.current.focus();\n }\n }, [startNewConversation, setShowChat, refine]);\n\n const handleSetShowChat = useCallback(\n (v: boolean) => {\n if (!v && hasThreadDepthError) {\n startNewConversation();\n setThreadDepthErrorAtMessageCount(null);\n }\n setShowChat(v);\n },\n [setShowChat, hasThreadDepthError, startNewConversation],\n );\n\n return (\n <>\n \n
\n {\n const trimmed = (value ?? \"\").trim();\n if (showChat && trimmed) {\n refine(trimmed);\n return true;\n }\n return handleActivateSelection();\n }}\n inputRef={inputRef}\n onNewChat={handleNewChat}\n />\n {showResultsPanel && (\n \n )}\n {noResults && query && !showChat && (\n {\n setShowChat(true);\n }}\n onClear={() => {\n refine(\"\");\n if (inputRef.current) {\n inputRef.current.focus();\n }\n }}\n />\n )}\n
\n