53:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 54:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 55:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 59:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollArea"] 5a:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollBar"] 5b:I[34002,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"CodeEditor"] 4e:["$","span",null,{"className":"text-xs font-medium","children":"tw-animate-css"}] 4f:["$","$L53",null,{"registryDependencies":["button"]}] 50:["$","$L54",null,{"sourceUrl":"https://sitesearch.algolia.com/r/sidepanel-askai.json","proxyUrl":"https://shadcnregistry.com/r/algolia/sidepanel-askai","itemId":"@algolia/sidepanel-askai"}] 56:Te351,/** 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 */ "use client"; import type { UIMessage } from "@ai-sdk/react"; import type { UIDataTypes, UIMessagePart } from "ai"; import { liteClient } from "algoliasearch/lite"; import type { BaseHit, Hit } from "instantsearch.js"; import { ArrowUpIcon, BrainIcon, CheckIcon, CopyIcon, Link2Icon, Maximize2, Minimize2, Sparkles, SquarePen, ThumbsDown, ThumbsUp, XIcon, } 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 { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { isThreadDepthError, postAgentStudioFeedback, postFeedback, threadDepthErrorDetail, useAskai, } from "@/registry/experiences/sidepanel-askai/hooks/use-askai"; import { type SuggestedQuestionHit, useSuggestedQuestions, } from "@/registry/experiences/sidepanel-askai/hooks/use-suggested-questions"; // ============================================================================ // Types // ============================================================================ export interface SidepanelAskAIConfig { /** 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; /** Suggested Questions Enabled (optional, defaults to false) */ suggestedQuestionsEnabled?: boolean; /** Placeholder text for input (optional, defaults to "Ask AI anything about Algolia") */ placeholder?: string; /** Custom button text (optional, defaults to "Ask AI") */ buttonText?: string; /** Custom button props (optional) */ buttonProps?: React.ComponentProps; /** Display variant (optional, defaults to 'floating') */ variant?: "floating" | "inline"; /** Route Ask AI requests through Agent Studio endpoints (optional, defaults to false). */ agentStudio?: boolean; } 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; } interface ExtractedLink { url: string; title?: string; } // ============================================================================ // 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 ""; } function extractLinksFromMessage(message: Message | null): ExtractedLink[] { const links: ExtractedLink[] = []; // Used to dedupe multiple urls const seen = new Set(); if (!message) { return []; } message.parts.forEach((part) => { if (part.type !== "text") { return; } if (typeof part.text !== "string" || part.text.length === 0) { return; } const markdownLinkRegex = /\[([^\]]*)\]$([^)]+)$/g; const markdownImageRegex = /!\[([^\]]*)\]$([^)]+)$/g; const plainLinkRegex = /(?"{}|\\^`[\]]+/g; // Strip out all code blocks e.g. ``` const textWithoutCodeBlocks = part.text.replace(/```[\s\S]*?```/g, ""); // Strip out all inline code blocks e.g. ` const cleanText = textWithoutCodeBlocks.replace(/`[^`]*`/g, ""); // Get all markdown image links to exclude them const imageMatches = cleanText.matchAll(markdownImageRegex); const imageUrls = new Set(); for (const match of imageMatches) { imageUrls.add(match[2]); } // Get all markdown based links e.g. []() const markdownMatches = cleanText.matchAll(markdownLinkRegex); // Parses the title and url from the found links for (const match of markdownMatches) { const title = match[1].trim(); const url = sanitizeUrl(match[2]); // Skip image URLs if (!url || imageUrls.has(url) || imageUrls.has(match[2])) { continue; } if (!seen.has(url)) { seen.add(url); links.push({ url, title: title || undefined }); } } // Get all "plain" links e.g. https://algolia.com/doc const plainUrls = cleanText.matchAll(plainLinkRegex); for (const match of plainUrls) { // Strip any extra punctuation const cleanUrl = sanitizeUrl(match[0].replace(/[.,;:!?]+$/, "")); // Skip image URLs if (!cleanUrl || imageUrls.has(cleanUrl)) { continue; } if (!seen.has(cleanUrl)) { seen.add(cleanUrl); links.push({ url: cleanUrl }); } } }); return links; } // ============================================================================ // 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) => ( ); // ============================================================================ // UI Helper Components // ============================================================================ export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> { shimmerWidth?: number; } export const AnimatedShinyText: FC = ({ children, shimmerWidth = 100, ...props }) => { return ( {children} ); }; // ============================================================================ // 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 (

); }); // ============================================================================ // Related Sources Component // ============================================================================ interface RelatedSourcesProps { links: ExtractedLink[]; } const RelatedSources = memo(function RelatedSources({ links, }: RelatedSourcesProps) { if (links.length === 0) { return null; } return (

Related sources

{links.map((link, index) => { const displayText = link.title || link.url; return ( {displayText} ); })}

); }); // ============================================================================ // 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); } }; const messagesEndRef = useRef(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]); // Auto-scroll to bottom when new messages arrive // biome-ignore lint/correctness/useExhaustiveDependencies: scroll on message changes useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [exchanges.length, isGenerating]); // 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.length > 0 && (

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

)}

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

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

)} {/* exchanges */} {exchanges.map((exchange) => { const isLastExchange = exchanges[exchanges.length - 1]?.id === exchange.id; 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}

); })}

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

e.stopPropagation()} style={{ animationDuration: "0.28s", animationTimingFunction: "cubic-bezier(0.22, 1, 0.36, 1)", animationFillMode: "both", }} > {/* Header */}

Ask AI

{/* Chat Content */} {/* Input Bar — match search-askai composer (primary border + rule above footer). */}

{
                setInputValue(e.target.value);
              }}
              onKeyDown={(e) => {
                if (e.key === "Enter" && !e.shiftKey) {
                  e.preventDefault();
                  handleSubmit();
                }
              }}
              onInput={managePromptHeight}
              rows={1}
              placeholder={config.placeholder || "Ask AI anything"}
              disabled={isGenerating}
              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"
            />
            <Button
              type="submit"
              variant="secondary"
              size="icon"
              className="h-10 w-10 shrink-0 text-muted-foreground hover:bg-muted/80 hover:text-foreground"
              disabled={!inputValue.trim() || isGenerating}
              title="Send message"
              aria-label="Send message"
            >
              <ArrowUpIcon size={22} strokeWidth={2.25} />
            </Button>
          </form>
          <div className="mt-2 flex items-start justify-start text-xs text-muted-foreground">
            <p className="m-0 w-full text-left">
              Answers are generated with AI which can make mistakes.
            </p>
          </div>
          <div className="mt-2 flex items-center justify-end">
            <a
              className="inline-flex items-center gap-2 text-muted-foreground text-xs no-underline transition-colors hover:text-blue-600"
              href={poweredByHref}
              target="_blank"
              rel="noopener noreferrer"
            >
              <span className="hidden sm:inline">Powered by </span>
              <AlgoliaLogo size={80} />
            </a>
          </div>
        </div>
      </div>
    </div>,
    document.body,
  );
});

// ============================================================================
// Main Export Component
// ============================================================================

export default function SidepanelExperience(config: SidepanelAskAIConfig) {
  const [isOpen, setIsOpen] = useState(false);
  const inputRef = useRef<HTMLTextAreaElement | null>(null);

const searchClient = useMemo(() => {
    const client = liteClient(config.applicationId, config.apiKey);
    client.addAlgoliaAgent("algolia-sitesearch");
    return client;
  }, [config.applicationId, config.apiKey]);

const { messages, startNewConversation, error, isGenerating, sendMessage } =
    useAskai({
      applicationId: config.applicationId,
      apiKey: config.apiKey,
      indexName: config.indexName,
      assistantId: config.assistantId,
      agentStudio: config.agentStudio,
    });

const suggestedQuestions = useSuggestedQuestions({
    searchClient,
    assistantId: config.assistantId,
    suggestedQuestionsEnabled: config.suggestedQuestionsEnabled ?? false,
    isOpen,
  });

// Keyboard shortcut: Command+I (Mac) or Ctrl+I (Windows)
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      const isModifierPressed = event.metaKey || event.ctrlKey;

if (isModifierPressed && event.key.toLowerCase() === "i") {
        event.preventDefault();
        setIsOpen((prev) => !prev);
      }
    };

document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, []);

const openSidepanel = () => setIsOpen(true);
  const closeSidepanel = () => setIsOpen(false);
  const openNewConversation = () => {
    startNewConversation();
    setIsOpen(true);
  };
  const buttonProps = {
    ...config.buttonProps,
    onClick: openSidepanel,
  };

const [modifierLabel, setModifierLabel] = useState("⌘");
  const [isModifierPressed, setIsModifierPressed] = useState(false);
  const [isIPressed, setIsIPressed] = 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() === "i") setIsIPressed(true);
    };
    const handleKeyUp = (event: KeyboardEvent) => {
      if (!event.metaKey && !event.ctrlKey) setIsModifierPressed(false);
      if (event.key.toLowerCase() === "i") setIsIPressed(false);
    };
    const resetKeys = () => {
      setIsModifierPressed(false);
      setIsIPressed(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 =
    "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 (
    <>
      <Button
        {...buttonProps}
        variant="outline"
        className={cn(baseClassName, buttonProps.className)}
      >
        <span className="flex items-center gap-2 opacity-80">
          <span className="inline text-muted-foreground">
            {config.buttonText || "Ask AI"}
          </span>
        </span>
        <div className="hidden md:flex gap-0.5">
          <kbd
            className={`h-5 min-w-5 rounded grid place-items-center bg-muted text-xs text-muted-foreground transition-all duration-200 ${
              isModifierPressed
                ? "inset-shadow-sm inset-shadow-foreground/30"
                : "shadow-none"
            }`}
          >
            {modifierLabel}
          </kbd>
          <kbd
            className={`h-5 min-w-5 rounded grid place-items-center bg-muted text-xs text-muted-foreground transition-all duration-200 ${
              isIPressed
                ? "inset-shadow-sm inset-shadow-foreground/30"
                : "shadow-none"
            }`}
          >
            I
          </kbd>
        </div>
      </Button>
      <Sidepanel
        isOpen={isOpen}
        onClose={closeSidepanel}
        config={config}
        messages={messages as unknown as Message[]}
        error={error as Error | null}
        isGenerating={isGenerating}
        suggestedQuestions={suggestedQuestions}
        sendMessage={sendMessage}
        inputRef={inputRef}
        onOpenNewConversation={openNewConversation}
      />
    </>
  );
}
57:T1ba3,import { useChat } from "@ai-sdk/react";
import {
  DefaultChatTransport,
  generateId,
  lastAssistantMessageIsCompleteWithToolCalls,
} from "ai";
import { useCallback, useMemo, useRef, useState } from "react";

export interface AskAIConfig {
  applicationId: string;
  apiKey: string;
  indexName: string;
  assistantId: string;
  agentStudio?: boolean;
}

/**
 * Checks if an error is a thread depth error (AI-217)
 * Thread depth errors occur when a conversation has reached its maximum depth limit
 */
export function isThreadDepthError(error?: Error | null): boolean {
  if (!error) return false;

// Check if error has a code property
  const errorWithCode = error as Error & { code?: string };
  if (errorWithCode.code === "AI-217") return true;

// Check message content for AI-217 or thread depth references
  const message = error.message?.toLowerCase() || "";
  if (message.includes("ai-217") || message.includes("conversation depth")) {
    return true;
  }
  try {
    const parsed = JSON.parse(error.message) as {
      code?: string;
      message?: string;
    };
    if (
      typeof parsed.code === "string" &&
      parsed.code.toUpperCase() === "AI-217"
    ) {
      return true;
    }
    const nested = (parsed.message ?? "").toLowerCase();
    return nested.includes("ai-217") || nested.includes("conversation depth");
  } catch {
    return false;
  }
}

/** Plain or JSON `{"message":"…"}` body from the API for thread-depth errors. */
export function threadDepthErrorDetail(error?: unknown): string | undefined {
  if (!isThreadDepthError(error as Error | null)) return undefined;
  const raw = threadDepthRawMessage(error);
  if (!raw) return undefined;
  try {
    const parsed = JSON.parse(raw) as { message?: string };
    if (typeof parsed.message === "string" && parsed.message.trim()) {
      return parsed.message.trim();
    }
  } catch {
    // not JSON
  }
  return raw;
}

const BASE_ASKAI_URL = "https://askai.algolia.com";

const agentStudioBaseUrl = (appId: string): string =>
  `https://${appId}.algolia.net/agent-studio/1`;

function getChatApiUrl(config: AskAIConfig): string {
  if (config.agentStudio) {
    return `${agentStudioBaseUrl(config.applicationId)}/agents/${config.assistantId}/completions?stream=true&compatibilityMode=ai-sdk-5`;
  }
  return `${BASE_ASKAI_URL}/chat`;
}

export function useAskai(config: AskAIConfig) {
  if (!config) {
    throw new Error("config is required for useAskai");
  }

const [chatId, setChatId] = useState(() => generateId());

const chat = useChat({
    id: chatId,
    transport,
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
  });

const chatRef = useRef(chat);
  chatRef.current = chat;

const startNewConversation = useCallback(() => {
    chatRef.current.stop();
    chatRef.current.clearError();
    setChatId(generateId());
  }, []);

const isGenerating =
    chat.status === "submitted" || chat.status === "streaming";

// Check if there's a thread depth error (AI-217)
  const hasThreadDepthError = useMemo(() => {
    return (
      chat.status === "error" && isThreadDepthError(chat.error as Error | null)
    );
  }, [chat.status, chat.error]);

return {
    ...chat,
    startNewConversation,
    isGenerating,
    hasThreadDepthError,
  };
}

const TOKEN_KEY = "askai_token";

type TokenPayload = { exp: number };

const decode = (token: string): TokenPayload => {
  const [b64] = token.split(".");
  return JSON.parse(atob(b64));
};

let inflight: Promise<string> | null = null;

// call /token once, cache the promise while it’s running
// eslint-disable-next-line require-await
export const getValidToken = async ({
  assistantId,
}: {
  assistantId: string;
}): Promise<string> => {
  const cached = sessionStorage.getItem(TOKEN_KEY);
  if (!isExpired(cached)) return cached as string;

if (!inflight) {
    inflight = fetch(`${BASE_ASKAI_URL}/chat/token`, {
      method: "POST",
      headers: {
        "x-algolia-assistant-id": assistantId,
        "content-type": "application/json",
      },
    })
      .then((r) => r.json())
      .then(({ token }) => {
        sessionStorage.setItem(TOKEN_KEY, token);
        return token;
      })
      .finally(() => {
        inflight = null;
      });
  }

return inflight;
};

export const postAgentStudioFeedback = ({
  agentId,
  vote,
  messageId,
  appId,
  apiKey,
}: {
  agentId: string;
  vote: 0 | 1;
  messageId: string;
  appId: string;
  apiKey: string;
}): Promise<Response> => {
  const headers = new Headers();
  headers.set("x-algolia-application-id", appId);
  headers.set("x-algolia-api-key", apiKey);
  headers.set("content-type", "application/json");

const baseUrl = `${agentStudioBaseUrl(appId)}/feedback`;

return fetch(baseUrl, {
    method: "POST",
    body: JSON.stringify({
      messageId,
      agentId,
      vote,
    }),
    headers,
  });
};

export const postFeedback = async ({
  assistantId,
  thumbs,
  messageId,
  appId,
}: {
  assistantId: string;
  thumbs: 0 | 1;
  messageId: string;
  appId: string;
}): Promise<Response> => {
  const headers = new Headers();
  headers.set("x-algolia-assistant-id", assistantId);
  headers.set("content-type", "application/json");

const token = await getValidToken({ assistantId });
  headers.set("authorization", `TOKEN ${token}`);

return fetch(`${BASE_ASKAI_URL}/chat/feedback`, {
    method: "POST",
    body: JSON.stringify({
      appId,
      messageId,
      thumbs,
    }),
    headers,
  });
};
58:T793,import type { Hit, LiteClient, SearchResponse } from "algoliasearch/lite";
import { useEffect, useRef, useState } from "react";

export const SUGGESTED_QUETIONS_INDEX_NAME =
  "algolia_ask_ai_suggested_questions";

type SuggestedQuestion = {
  appId: string;
  assistantId: string;
  question: string;
  locale?: string;
  state: "published";
  source: string;
  order: number;
};

export type SuggestedQuestionHit = Hit<SuggestedQuestion>;

type UseSuggestedQuestionsProps = {
  assistantId: string | null;
  suggestedQuestionsEnabled?: boolean;
  searchClient: LiteClient;
  isOpen?: boolean;
};

export const useSuggestedQuestions = ({
  assistantId,
  suggestedQuestionsEnabled = false,
  searchClient,
  isOpen = false,
}: UseSuggestedQuestionsProps): SuggestedQuestionHit[] => {
  const [suggestedQuestions, setSuggestedQuestions] = useState<
    SuggestedQuestionHit[]
  >([]);
  const hasFetchedRef = useRef(false);

useEffect(() => {
    // Only fetch once when sidepanel opens
    if (hasFetchedRef.current || !isOpen) {
      return;
    }

const getSuggestedQuestions = async (): Promise<void> => {
      if (!suggestedQuestionsEnabled || !assistantId || assistantId === "") {
        return;
      }

try {
        const { results } = await searchClient.search<SuggestedQuestion>({
          requests: [
            {
              indexName: SUGGESTED_QUETIONS_INDEX_NAME,
              filters: `state:published AND assistantId:${assistantId}`,
              hitsPerPage: 3,
            },
          ],
        });

const result = results[0] as SearchResponse<SuggestedQuestion>;
        setSuggestedQuestions(result.hits);
        hasFetchedRef.current = true;
      } catch (error) {
        console.error("Failed to fetch suggested questions:", error);
      }
    };

getSuggestedQuestions();
  }, [suggestedQuestionsEnabled, assistantId, isOpen, searchClient]);

return suggestedQuestions;
};
51:["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L55",null,{"files":[{"path":"src/registry/experiences/sidepanel-askai/components/sidepanel-askai.tsx","content":"$56","type":"registry:component"},{"path":"src/registry/experiences/sidepanel-askai/hooks/use-askai.ts","content":"$57","type":"registry:hook"},{"path":"src/registry/experiences/sidepanel-askai/hooks/use-suggested-questions.ts","content":"$58","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    <div className=\"flex items-center justify-center min-h-[100px] md:min-h-[400px] relative p-4\">\n      <SidepanelExperience\n        applicationId=\"06YAZFOHSQ\"\n        apiKey=\"94b6afdc316917b6e6cdf2763fa561df\"\n        indexName=\"algolia_podcast_sample_dataset\"\n        assistantId=\"UpR727VnXnoG\"\n      />\n    </div>\n  );\n}\n","type":"registry:page","target":"app/sidepanel-askai/page.tsx"}]}]]}]
52:["$","section",null,{"className":"flex flex-col gap-4","id":"styles","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Styles"}],["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @4xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L59",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L5a",null,{"orientation":"vertical"}],["$","$L5a",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L59",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L5a",null,{"orientation":"vertical"}],["$","$L5a",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","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":["$","$L59",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L5a",null,{"orientation":"vertical"}],["$","$L5a",null,{"orientation":"horizontal"}],["$","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"}]]}]]}]]}]}]]}],["$","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":["$","$L5b",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\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}"}]}]]}]]}]}]]}]
</article></body></html>

Sidepanel Ask AI

Installation

Files

components

hooks

app

Styles