{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sidepanel-askai", "type": "registry:block", "title": "Sidepanel Ask AI", "description": "Sidepanel chat experience with Ask AI, powered by Algolia's Ask AI", "dependencies": [ "@ai-sdk/react@^2.0.4", "ai@^5.0.30", "algoliasearch@^5", "lucide-react", "marked", "tw-animate-css" ], "devDependencies": [ "tw-animate-css" ], "registryDependencies": [ "button" ], "files": [ { "path": "src/registry/experiences/sidepanel-askai/components/sidepanel-askai.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 */\n\"use client\";\n\nimport type { UIMessage } from \"@ai-sdk/react\";\nimport type { UIDataTypes, UIMessagePart } from \"ai\";\nimport { liteClient } from \"algoliasearch/lite\";\nimport type { BaseHit, Hit } from \"instantsearch.js\";\nimport {\n ArrowUpIcon,\n BrainIcon,\n CheckIcon,\n CopyIcon,\n Link2Icon,\n Maximize2,\n Minimize2,\n Sparkles,\n SquarePen,\n ThumbsDown,\n ThumbsUp,\n XIcon,\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 { 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/sidepanel-askai/hooks/use-askai\";\n\nimport {\n type SuggestedQuestionHit,\n useSuggestedQuestions,\n} from \"@/registry/experiences/sidepanel-askai/hooks/use-suggested-questions\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface SidepanelAskAIConfig {\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 /** Suggested Questions Enabled (optional, defaults to false) */\n suggestedQuestionsEnabled?: boolean;\n /** Placeholder text for input (optional, defaults to \"Ask AI anything about Algolia\") */\n placeholder?: string;\n /** Custom button text (optional, defaults to \"Ask AI\") */\n buttonText?: string;\n /** Custom button props (optional) */\n buttonProps?: React.ComponentProps;\n /** Display variant (optional, defaults to 'floating') */\n variant?: \"floating\" | \"inline\";\n /** Route Ask AI requests through Agent Studio endpoints (optional, defaults to false). */\n agentStudio?: boolean;\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\ninterface ExtractedLink {\n url: string;\n title?: string;\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\nfunction extractLinksFromMessage(message: Message | null): ExtractedLink[] {\n const links: ExtractedLink[] = [];\n\n // Used to dedupe multiple urls\n const seen = new Set();\n\n if (!message) {\n return [];\n }\n\n message.parts.forEach((part) => {\n if (part.type !== \"text\") {\n return;\n }\n\n if (typeof part.text !== \"string\" || part.text.length === 0) {\n return;\n }\n\n const markdownLinkRegex = /\\[([^\\]]*)\\]\\(([^)]+)\\)/g;\n const markdownImageRegex = /!\\[([^\\]]*)\\]\\(([^)]+)\\)/g;\n const plainLinkRegex = /(?\"{}|\\\\^`[\\]]+/g;\n\n // Strip out all code blocks e.g. ```\n const textWithoutCodeBlocks = part.text.replace(/```[\\s\\S]*?```/g, \"\");\n\n // Strip out all inline code blocks e.g. `\n const cleanText = textWithoutCodeBlocks.replace(/`[^`]*`/g, \"\");\n\n // Get all markdown image links to exclude them\n const imageMatches = cleanText.matchAll(markdownImageRegex);\n const imageUrls = new Set();\n for (const match of imageMatches) {\n imageUrls.add(match[2]);\n }\n\n // Get all markdown based links e.g. []()\n const markdownMatches = cleanText.matchAll(markdownLinkRegex);\n\n // Parses the title and url from the found links\n for (const match of markdownMatches) {\n const title = match[1].trim();\n const url = sanitizeUrl(match[2]);\n\n // Skip image URLs\n if (!url || imageUrls.has(url) || imageUrls.has(match[2])) {\n continue;\n }\n\n if (!seen.has(url)) {\n seen.add(url);\n links.push({ url, title: title || undefined });\n }\n }\n\n // Get all \"plain\" links e.g. https://algolia.com/doc\n const plainUrls = cleanText.matchAll(plainLinkRegex);\n\n for (const match of plainUrls) {\n // Strip any extra punctuation\n const cleanUrl = sanitizeUrl(match[0].replace(/[.,;:!?]+$/, \"\"));\n\n // Skip image URLs\n if (!cleanUrl || imageUrls.has(cleanUrl)) {\n continue;\n }\n\n if (!seen.has(cleanUrl)) {\n seen.add(cleanUrl);\n links.push({ url: cleanUrl });\n }\n }\n });\n\n return links;\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// ============================================================================\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// 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// Related Sources Component\n// ============================================================================\n\ninterface RelatedSourcesProps {\n links: ExtractedLink[];\n}\n\nconst RelatedSources = memo(function RelatedSources({\n links,\n}: RelatedSourcesProps) {\n if (links.length === 0) {\n return null;\n }\n\n return (\n
\n

\n Related sources\n

\n
\n {links.map((link, index) => {\n const displayText = link.title || link.url;\n\n return (\n \n \n {displayText}\n \n );\n })}\n
\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 const messagesEndRef = useRef(null);\n\n // Group messages into exchanges (user + assistant pairs)\n const exchanges = useMemo(() => {\n const grouped: Exchange[] = [];\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 // Auto-scroll to bottom when new messages arrive\n // biome-ignore lint/correctness/useExhaustiveDependencies: scroll on message changes\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [exchanges.length, isGenerating]);\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 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.length > 0 && (\n
\n {suggestedQuestions.map((question) => (\n onSuggestedQuestionClick(question.question)}\n >\n {question.question}\n \n ))}\n
\n )}\n
\n )}\n {/* errors */}\n {error && (\n
\n {isThreadDepthError(error) && onNewChat ? (\n \n ) : (\n error.message\n )}\n
\n )}\n\n {/* exchanges */}\n {exchanges.map((exchange) => {\n const isLastExchange =\n exchanges[exchanges.length - 1]?.id === exchange.id;\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
\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 Searching...\n \n

\n );\n } else if (part.state === \"input-available\") {\n return (\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 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 \n ) : (\n
\n \n {isGenerating && isLastExchange ? \"Thinking...\" : \"\"}\n \n
\n )}\n
\n
\n\n {exchange.assistantMessage && !isGenerating ? (\n
\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 {\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 ) : null}\n
\n );\n })}\n
\n
\n
\n );\n});\n\n// ============================================================================\n// Sidepanel Component\n// ============================================================================\n\ninterface SidepanelProps {\n isOpen: boolean;\n onClose: () => void;\n config: SidepanelAskAIConfig;\n messages: Message[];\n error: Error | null;\n isGenerating: boolean;\n suggestedQuestions: SuggestedQuestionHit[];\n sendMessage: (options: { text: string }) => void | Promise;\n inputRef: React.RefObject;\n onOpenNewConversation: () => void;\n}\n\nconst MAX_PROMPT_ROWS = 20;\n\nconst Sidepanel = memo(function Sidepanel({\n isOpen,\n onClose,\n config,\n messages,\n error,\n isGenerating,\n suggestedQuestions,\n sendMessage,\n inputRef,\n onOpenNewConversation,\n}: SidepanelProps) {\n const [inputValue, setInputValue] = useState(\"\");\n const [shouldRender, setShouldRender] = useState(false);\n const [isVisible, setIsVisible] = useState(false);\n const [isMaximized, setIsMaximized] = useState(false);\n const variant = config.variant || \"floating\";\n\n // Handle mount/unmount and closing animation\n useEffect(() => {\n if (isOpen) {\n setShouldRender(true);\n // allow initial render before animating in\n requestAnimationFrame(() => {\n setIsVisible(true);\n });\n // Focus input when opening\n setTimeout(() => {\n inputRef.current?.focus();\n }, 100);\n } else if (shouldRender) {\n // Start closing animation\n setIsVisible(false);\n // Unmount after animation completes\n const timer = setTimeout(() => {\n setShouldRender(false);\n }, 200); // Match transition duration\n return () => clearTimeout(timer);\n }\n }, [isOpen, shouldRender, inputRef]);\n\n useEffect(() => {\n const handleEscape = (event: KeyboardEvent) => {\n if (event.key === \"Escape\" && isOpen) {\n onClose();\n }\n };\n\n if (isOpen) {\n document.addEventListener(\"keydown\", handleEscape);\n }\n\n return () => {\n document.removeEventListener(\"keydown\", handleEscape);\n };\n }, [isOpen, onClose]);\n\n // Inline variant: push page content by adjusting body padding-right on desktop\n useEffect(() => {\n if (variant !== \"inline\") return;\n if (typeof window === \"undefined\") return;\n\n const isDesktop = window.matchMedia(\"(min-width: 768px)\").matches;\n const panelWidth = isMaximized ? 580 : 360;\n\n if (isOpen && isDesktop) {\n const prevPadding = document.body.style.paddingRight;\n const prevTransition = document.body.style.transition;\n document.body.style.transition =\n \"padding-right 0.28s cubic-bezier(0.22, 1, 0.36, 1)\";\n document.body.style.paddingRight = `${panelWidth}px`;\n return () => {\n document.body.style.paddingRight = prevPadding;\n document.body.style.transition = prevTransition;\n };\n }\n\n return;\n }, [variant, isOpen, isMaximized]);\n\n const managePromptHeight = useCallback((): void => {\n if (!inputRef.current) return;\n\n const textArea = inputRef.current;\n\n textArea.style.height = \"auto\";\n\n const styles = getComputedStyle(textArea);\n\n const lineHeight = parseFloat(styles.lineHeight);\n const paddingTop = parseFloat(styles.paddingTop);\n const paddingBottom = parseFloat(styles.paddingBottom);\n const padding = paddingTop + paddingBottom;\n\n const fullHeight = textArea.scrollHeight;\n const maxHeight = MAX_PROMPT_ROWS * lineHeight + padding;\n\n textArea.style.overflowY = fullHeight > maxHeight ? \"auto\" : \"hidden\";\n textArea.style.height = `${Math.min(fullHeight, maxHeight)}px`;\n }, [inputRef]);\n\n const sendMessageAndReset = useCallback(\n (text: string) => {\n const trimmed = text.trim();\n if (!trimmed || isGenerating) return;\n\n sendMessage({ text: trimmed });\n setInputValue(\"\");\n // Reset textarea height after clearing input\n setTimeout(() => {\n managePromptHeight();\n inputRef.current?.focus();\n }, 50);\n },\n [isGenerating, sendMessage, inputRef, managePromptHeight],\n );\n\n const handleSubmit = useCallback(\n (e?: React.FormEvent) => {\n e?.preventDefault();\n sendMessageAndReset(inputValue);\n },\n [inputValue, sendMessageAndReset],\n );\n\n const handleSuggestedQuestionClick = useCallback(\n (question: string) => {\n sendMessageAndReset(question);\n },\n [sendMessageAndReset],\n );\n\n const resizeSidepanel = useCallback(() => {\n setIsMaximized((prev) => !prev);\n }, []);\n\n if (!shouldRender) return null;\n\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(window.location.hostname)}`\n : basePoweredByUrl;\n\n return createPortal(\n \n e.stopPropagation()}\n style={{\n animationDuration: \"0.28s\",\n animationTimingFunction: \"cubic-bezier(0.22, 1, 0.36, 1)\",\n animationFillMode: \"both\",\n }}\n >\n {/* Header */}\n
\n
\n \n

Ask AI

\n
\n
\n \n \n \n \n {isMaximized ? : }\n \n \n \n \n \n \n \n \n \n
\n
\n\n {/* Chat Content */}\n \n\n {/* Input Bar — match search-askai composer (primary border + rule above footer). */}\n
\n \n {\n setInputValue(e.target.value);\n }}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n }\n }}\n onInput={managePromptHeight}\n rows={1}\n placeholder={config.placeholder || \"Ask AI anything\"}\n disabled={isGenerating}\n className=\"flex-1 border-none bg-background py-0.5 leading-tight text-foreground outline-none placeholder:text-muted-foreground focus:border-transparent focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 resize-none overflow-y-hidden\"\n />\n \n \n \n \n
\n

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

\n
\n
\n \n Powered by \n \n \n
\n
\n
\n ,\n document.body,\n );\n});\n\n// ============================================================================\n// Main Export Component\n// ============================================================================\n\nexport default function SidepanelExperience(config: SidepanelAskAIConfig) {\n const [isOpen, setIsOpen] = useState(false);\n const inputRef = useRef(null);\n\n const searchClient = useMemo(() => {\n const client = liteClient(config.applicationId, config.apiKey);\n client.addAlgoliaAgent(\"algolia-sitesearch\");\n return client;\n }, [config.applicationId, config.apiKey]);\n\n const { messages, startNewConversation, error, isGenerating, sendMessage } =\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 const suggestedQuestions = useSuggestedQuestions({\n searchClient,\n assistantId: config.assistantId,\n suggestedQuestionsEnabled: config.suggestedQuestionsEnabled ?? false,\n isOpen,\n });\n\n // Keyboard shortcut: Command+I (Mac) or Ctrl+I (Windows)\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n const isModifierPressed = event.metaKey || event.ctrlKey;\n\n if (isModifierPressed && event.key.toLowerCase() === \"i\") {\n event.preventDefault();\n setIsOpen((prev) => !prev);\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, []);\n\n const openSidepanel = () => setIsOpen(true);\n const closeSidepanel = () => setIsOpen(false);\n const openNewConversation = () => {\n startNewConversation();\n setIsOpen(true);\n };\n const buttonProps = {\n ...config.buttonProps,\n onClick: openSidepanel,\n };\n\n const [modifierLabel, setModifierLabel] = useState(\"⌘\");\n const [isModifierPressed, setIsModifierPressed] = useState(false);\n const [isIPressed, setIsIPressed] = 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() === \"i\") setIsIPressed(true);\n };\n const handleKeyUp = (event: KeyboardEvent) => {\n if (!event.metaKey && !event.ctrlKey) setIsModifierPressed(false);\n if (event.key.toLowerCase() === \"i\") setIsIPressed(false);\n };\n const resetKeys = () => {\n setIsModifierPressed(false);\n setIsIPressed(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 \"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 \n {config.buttonText || \"Ask AI\"}\n \n \n
\n \n {modifierLabel}\n \n \n I\n \n
\n \n \n \n );\n}\n", "type": "registry:component" }, { "path": "src/registry/experiences/sidepanel-askai/hooks/use-askai.ts", "content": "import { useChat } from \"@ai-sdk/react\";\nimport {\n DefaultChatTransport,\n generateId,\n lastAssistantMessageIsCompleteWithToolCalls,\n} from \"ai\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\n\nexport interface AskAIConfig {\n applicationId: string;\n apiKey: string;\n indexName: string;\n assistantId: string;\n agentStudio?: boolean;\n}\n\n/**\n * Checks if an error is a thread depth error (AI-217)\n * Thread depth errors occur when a conversation has reached its maximum depth limit\n */\nexport function isThreadDepthError(error?: Error | null): boolean {\n if (!error) return false;\n\n // Check if error has a code property\n const errorWithCode = error as Error & { code?: string };\n if (errorWithCode.code === \"AI-217\") return true;\n\n // Check message content for AI-217 or thread depth references\n const message = error.message?.toLowerCase() || \"\";\n if (message.includes(\"ai-217\") || message.includes(\"conversation depth\")) {\n return true;\n }\n try {\n const parsed = JSON.parse(error.message) as {\n code?: string;\n message?: string;\n };\n if (\n typeof parsed.code === \"string\" &&\n parsed.code.toUpperCase() === \"AI-217\"\n ) {\n return true;\n }\n const nested = (parsed.message ?? \"\").toLowerCase();\n return nested.includes(\"ai-217\") || nested.includes(\"conversation depth\");\n } catch {\n return false;\n }\n}\n\nfunction threadDepthRawMessage(error: unknown): string {\n if (!error) return \"\";\n if (error instanceof Error) return (error.message ?? \"\").trim();\n if (\n typeof error === \"object\" &&\n error !== null &&\n \"message\" in error &&\n typeof (error as { message: unknown }).message === \"string\"\n ) {\n return (error as { message: string }).message.trim();\n }\n return \"\";\n}\n\n/** Plain or JSON `{\"message\":\"…\"}` body from the API for thread-depth errors. */\nexport function threadDepthErrorDetail(error?: unknown): string | undefined {\n if (!isThreadDepthError(error as Error | null)) return undefined;\n const raw = threadDepthRawMessage(error);\n if (!raw) return undefined;\n try {\n const parsed = JSON.parse(raw) as { message?: string };\n if (typeof parsed.message === \"string\" && parsed.message.trim()) {\n return parsed.message.trim();\n }\n } catch {\n // not JSON\n }\n return raw;\n}\n\nconst BASE_ASKAI_URL = \"https://askai.algolia.com\";\n\nconst agentStudioBaseUrl = (appId: string): string =>\n `https://${appId}.algolia.net/agent-studio/1`;\n\nfunction getChatApiUrl(config: AskAIConfig): string {\n if (config.agentStudio) {\n return `${agentStudioBaseUrl(config.applicationId)}/agents/${config.assistantId}/completions?stream=true&compatibilityMode=ai-sdk-5`;\n }\n return `${BASE_ASKAI_URL}/chat`;\n}\n\nexport function useAskai(config: AskAIConfig) {\n if (!config) {\n throw new Error(\"config is required for useAskai\");\n }\n\n const [chatId, setChatId] = useState(() => generateId());\n\n const transport = useMemo(() => {\n return new DefaultChatTransport({\n api: getChatApiUrl(config),\n headers: async () => {\n if (config.agentStudio) {\n return {\n \"x-algolia-api-key\": config.apiKey,\n \"x-algolia-application-id\": config.applicationId,\n } as Record;\n }\n const token = await getValidToken({ assistantId: config.assistantId });\n return {\n \"x-algolia-api-key\": config.apiKey,\n \"x-algolia-application-id\": config.applicationId,\n \"x-algolia-index-name\": config.indexName,\n \"x-algolia-assistant-id\": config.assistantId,\n \"x-ai-sdk-version\": \"v5\",\n authorization: `TOKEN ${token}`,\n } as Record;\n },\n });\n }, [\n config.apiKey,\n config.applicationId,\n config.indexName,\n config.assistantId,\n config.agentStudio,\n config,\n ]);\n\n const chat = useChat({\n id: chatId,\n transport,\n sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,\n });\n\n const chatRef = useRef(chat);\n chatRef.current = chat;\n\n const startNewConversation = useCallback(() => {\n chatRef.current.stop();\n chatRef.current.clearError();\n setChatId(generateId());\n }, []);\n\n const isGenerating =\n chat.status === \"submitted\" || chat.status === \"streaming\";\n\n // Check if there's a thread depth error (AI-217)\n const hasThreadDepthError = useMemo(() => {\n return (\n chat.status === \"error\" && isThreadDepthError(chat.error as Error | null)\n );\n }, [chat.status, chat.error]);\n\n return {\n ...chat,\n startNewConversation,\n isGenerating,\n hasThreadDepthError,\n };\n}\n\nconst TOKEN_KEY = \"askai_token\";\n\ntype TokenPayload = { exp: number };\n\nconst decode = (token: string): TokenPayload => {\n const [b64] = token.split(\".\");\n return JSON.parse(atob(b64));\n};\n\nconst isExpired = (token?: string | null): boolean => {\n if (!token) return true;\n try {\n const { exp } = decode(token);\n // refresh 30 s before the backend rejects it\n return Date.now() / 1000 > exp - 30;\n } catch {\n return true;\n }\n};\n\nlet inflight: Promise | null = null;\n\n// call /token once, cache the promise while it’s running\n// eslint-disable-next-line require-await\nexport const getValidToken = async ({\n assistantId,\n}: {\n assistantId: string;\n}): Promise => {\n const cached = sessionStorage.getItem(TOKEN_KEY);\n if (!isExpired(cached)) return cached as string;\n\n if (!inflight) {\n inflight = fetch(`${BASE_ASKAI_URL}/chat/token`, {\n method: \"POST\",\n headers: {\n \"x-algolia-assistant-id\": assistantId,\n \"content-type\": \"application/json\",\n },\n })\n .then((r) => r.json())\n .then(({ token }) => {\n sessionStorage.setItem(TOKEN_KEY, token);\n return token;\n })\n .finally(() => {\n inflight = null;\n });\n }\n\n return inflight;\n};\n\nexport const postAgentStudioFeedback = ({\n agentId,\n vote,\n messageId,\n appId,\n apiKey,\n}: {\n agentId: string;\n vote: 0 | 1;\n messageId: string;\n appId: string;\n apiKey: string;\n}): Promise => {\n const headers = new Headers();\n headers.set(\"x-algolia-application-id\", appId);\n headers.set(\"x-algolia-api-key\", apiKey);\n headers.set(\"content-type\", \"application/json\");\n\n const baseUrl = `${agentStudioBaseUrl(appId)}/feedback`;\n\n return fetch(baseUrl, {\n method: \"POST\",\n body: JSON.stringify({\n messageId,\n agentId,\n vote,\n }),\n headers,\n });\n};\n\nexport const postFeedback = async ({\n assistantId,\n thumbs,\n messageId,\n appId,\n}: {\n assistantId: string;\n thumbs: 0 | 1;\n messageId: string;\n appId: string;\n}): Promise => {\n const headers = new Headers();\n headers.set(\"x-algolia-assistant-id\", assistantId);\n headers.set(\"content-type\", \"application/json\");\n\n const token = await getValidToken({ assistantId });\n headers.set(\"authorization\", `TOKEN ${token}`);\n\n return fetch(`${BASE_ASKAI_URL}/chat/feedback`, {\n method: \"POST\",\n body: JSON.stringify({\n appId,\n messageId,\n thumbs,\n }),\n headers,\n });\n};\n", "type": "registry:hook" }, { "path": "src/registry/experiences/sidepanel-askai/hooks/use-suggested-questions.ts", "content": "import type { Hit, LiteClient, SearchResponse } from \"algoliasearch/lite\";\nimport { useEffect, useRef, useState } from \"react\";\n\nexport const SUGGESTED_QUETIONS_INDEX_NAME =\n \"algolia_ask_ai_suggested_questions\";\n\ntype SuggestedQuestion = {\n appId: string;\n assistantId: string;\n question: string;\n locale?: string;\n state: \"published\";\n source: string;\n order: number;\n};\n\nexport type SuggestedQuestionHit = Hit;\n\ntype UseSuggestedQuestionsProps = {\n assistantId: string | null;\n suggestedQuestionsEnabled?: boolean;\n searchClient: LiteClient;\n isOpen?: boolean;\n};\n\nexport const useSuggestedQuestions = ({\n assistantId,\n suggestedQuestionsEnabled = false,\n searchClient,\n isOpen = false,\n}: UseSuggestedQuestionsProps): SuggestedQuestionHit[] => {\n const [suggestedQuestions, setSuggestedQuestions] = useState<\n SuggestedQuestionHit[]\n >([]);\n const hasFetchedRef = useRef(false);\n\n useEffect(() => {\n // Only fetch once when sidepanel opens\n if (hasFetchedRef.current || !isOpen) {\n return;\n }\n\n const getSuggestedQuestions = async (): Promise => {\n if (!suggestedQuestionsEnabled || !assistantId || assistantId === \"\") {\n return;\n }\n\n try {\n const { results } = await searchClient.search({\n requests: [\n {\n indexName: SUGGESTED_QUETIONS_INDEX_NAME,\n filters: `state:published AND assistantId:${assistantId}`,\n hitsPerPage: 3,\n },\n ],\n });\n\n const result = results[0] as SearchResponse;\n setSuggestedQuestions(result.hits);\n hasFetchedRef.current = true;\n } catch (error) {\n console.error(\"Failed to fetch suggested questions:\", error);\n }\n };\n\n getSuggestedQuestions();\n }, [suggestedQuestionsEnabled, assistantId, isOpen, searchClient]);\n\n return suggestedQuestions;\n};\n", "type": "registry:hook" }, { "path": "src/registry/experiences/sidepanel-askai/page.tsx", "content": "\"use client\";\n\nimport SidepanelExperience from \"@/registry/experiences/sidepanel-askai/components/sidepanel-askai\";\n\nexport default function Page() {\n return (\n
\n \n
\n );\n}\n", "type": "registry:page", "target": "app/sidepanel-askai/page.tsx" } ], "cssVars": { "theme": { "animate-shiny-text": "shiny-text 8s infinite" } }, "css": { "@import \"tw-animate-css\"": {}, "@keyframes shiny-text": { "0%,90%,100%": "{\nbackground-position: calc(-100% - var(--shiny-width)) 0;\n}", "30%,60%": "{\nbackground-position: calc(100% + var(--shiny-width)) 0;\n}" } }, "categories": [ "ai", "chat" ] }