4f: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"] 50: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"] 51: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"] 52:T7bd5,/** biome-ignore-all lint/security/noDangerouslySetInnerHtml: markdown rendering sanitized via parseMarkdownToSafeHtml */ /** biome-ignore-all lint/suspicious/noArrayIndexKey: parts are stable during render */ "use client"; import type { Placement, ReferenceType } from "@floating-ui/react"; import { FloatingPortal, flip, offset, shift, useFloating, } from "@floating-ui/react"; import { BrainIcon, CornerDownLeftIcon, SearchIcon, ThumbsDown, ThumbsUp, } from "lucide-react"; import { marked, type Tokens } from "marked"; import React from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { postAgentStudioFeedback, postFeedback, useAskai, } from "@/registry/experiences/highlight-to-askai/hooks/use-askai"; 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 ""; } /* 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); 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 */ function parseMarkdownToSafeHtml(content: string): string { return marked.parse(content, { gfm: true, breaks: true, renderer: markdownRenderer, }) as string; } type OnAskPayload = { text: string; html: string; rect: DOMRect; range: Range; contextNode: HTMLElement; }; export type HighlightAskAIProps = { agentStudio?: boolean; applicationId: string; apiKey: string; indexName: string; assistantId: string; excludeElements?: string[]; side?: Placement; sideOffset?: number; delay?: number; askButtonLabel?: string; className?: string; askAiBaseUrl?: string; onAsk?: (payload: OnAskPayload) => void | Promise; children: React.ReactNode; }; type VirtualElement = { getBoundingClientRect: () => DOMRect; contextElement?: Element | null; }; function isWhitespaceOnly(text: string) { return text.trim().length === 0; } function selectionIntersectsContainer( range: Range, container: HTMLElement, ): boolean { const startContainer = range.startContainer as Node | null; const endContainer = range.endContainer as Node | null; if (!startContainer || !endContainer) return false; return container.contains(startContainer) || container.contains(endContainer); } function nodeIsExcluded(node: Node, selectors: string[]): boolean { let el: Element | null = null; if (node instanceof Element) { el = node; } else if ((node as ChildNode).parentElement) { el = (node as ChildNode).parentElement; } if (!el) return false; for (const sel of selectors) { if (el.closest(sel)) return true; } return false; } const AlgoliaLogo = ({ size = 52 }: { size?: number | string }) => ( ); export function HighlightAskAI({ agentStudio = false, applicationId, apiKey, indexName, assistantId, excludeElements = ["pre", "code"], side = "top", sideOffset = 8, delay = 120, askButtonLabel = "Ask AI?", className, onAsk, children, }: HighlightAskAIProps) { const containerRef = React.useRef(null); const [open, setOpen] = React.useState(false); const [expanded, setExpanded] = React.useState(false); const [range, setRange] = React.useState(null); const [virtualEl, setVirtualEl] = React.useState(null); const [followUpInput, setFollowUpInput] = React.useState(""); const [feedbackGiven, setFeedbackGiven] = React.useState(false); const [submittingFeedback, setSubmittingFeedback] = React.useState(false); const { messages, error, isGenerating, sendMessage, setMessages, stop } = useAskai({ applicationId, apiKey, indexName, assistantId, agentStudio, }); const handleFeedback = async (vote: 0 | 1) => { const messageToFeedback = (messages || []).find( (m: unknown) => (m as { role?: string }).role === (agentStudio ? "assistant" : "user"), ) as { id?: string } | undefined; if (!messageToFeedback?.id) return; setSubmittingFeedback(true); try { if (agentStudio) { await postAgentStudioFeedback({ agentId: assistantId, vote, messageId: messageToFeedback.id, appId: applicationId, apiKey, }); } else { await postFeedback({ assistantId, appId: applicationId, messageId: messageToFeedback.id, thumbs: vote, }); } setFeedbackGiven(true); } catch { // ignore errors } finally { setSubmittingFeedback(false); } }; const resetConversation = React.useCallback(() => { try { stop?.(); } catch {} setMessages?.([]); setFollowUpInput(""); setFeedbackGiven(false); setSubmittingFeedback(false); }, [setMessages, stop]); const { refs, floatingStyles, update } = useFloating< HTMLElement | ReferenceType >({ placement: side, middleware: [offset(sideOffset), flip(), shift()], // Don't use autoUpdate - we want the tooltip to stay in place on scroll }); // Keep placement in sync with prop changes React.useEffect(() => { update?.(); }, [update]); React.useEffect(() => { if (virtualEl) refs.setReference(virtualEl as unknown as ReferenceType); }, [virtualEl, refs.setReference]); // Debounced selection handler const debounceRef = React.useRef(null); const handleSelectionChange = React.useCallback(() => { if (debounceRef.current) window.clearTimeout(debounceRef.current); debounceRef.current = window.setTimeout(() => { const sel = window.getSelection(); const containerEl = containerRef.current; const floatingEl = refs.floating.current; const activeEl = typeof document !== "undefined" ? (document.activeElement as Node | null) : null; // Ignore selection changes while focus is inside the floating tooltip if (floatingEl && activeEl && floatingEl.contains(activeEl)) { return; } if (!sel || !containerEl) return; if (sel.rangeCount === 0 || sel.isCollapsed) { // Don't close if already expanded; allow typing in the tooltip if (!expanded) { setOpen(false); setExpanded(false); setRange(null); setVirtualEl(null); } return; } const nextRange = sel.getRangeAt(0); const text = sel.toString(); if (isWhitespaceOnly(text)) { if (!expanded) { setOpen(false); setExpanded(false); setRange(null); setVirtualEl(null); } return; } if (!selectionIntersectsContainer(nextRange, containerEl)) { if (!expanded) { setOpen(false); setExpanded(false); setRange(null); setVirtualEl(null); } return; } const anchorNode = sel.anchorNode; const focusNode = sel.focusNode; if ( (anchorNode && nodeIsExcluded(anchorNode, excludeElements)) || (focusNode && nodeIsExcluded(focusNode, excludeElements)) ) { if (!expanded) { setOpen(false); setExpanded(false); setRange(null); setVirtualEl(null); } return; } const rect = nextRange.getBoundingClientRect(); if (rect.width === 0 && rect.height === 0) { if (!expanded) { setOpen(false); setExpanded(false); setRange(null); setVirtualEl(null); } return; } const v: VirtualElement = { getBoundingClientRect: () => rect, }; setRange(nextRange); setVirtualEl(v); setOpen(true); setExpanded(false); // Trigger update after setting v requestAnimationFrame(() => { update?.(); }); }, delay); }, [delay, excludeElements, expanded, refs.floating, update]); React.useEffect(() => { document.addEventListener("selectionchange", handleSelectionChange); return () => document.removeEventListener("selectionchange", handleSelectionChange); }, [handleSelectionChange]); // Close on Escape and click outside React.useEffect(() => { function onKeyDown(e: KeyboardEvent) { if (e.key === "Escape") { setOpen(false); setExpanded(false); resetConversation(); } } function onMouseDown(e: MouseEvent) { if (!open) return; const floatingEl = refs.floating.current; const containerEl = containerRef.current; const target = e.target as Node | null; if (!target) return; // Don't close if clicking inside the floating tooltip if (floatingEl?.contains(target)) { return; } // Don't close if clicking inside the container (but outside selection) if (containerEl?.contains(target)) { return; } // Click is outside both - close the tooltip setOpen(false); setExpanded(false); resetConversation(); } document.addEventListener("keydown", onKeyDown); document.addEventListener("mousedown", onMouseDown); return () => { document.removeEventListener("keydown", onKeyDown); document.removeEventListener("mousedown", onMouseDown); }; }, [open, refs.floating, resetConversation]); // Build HTML content string for onAsk consumers const getSelectionHtml = React.useCallback((rangeArg: Range | null) => { if (!rangeArg) return ""; const fragment = rangeArg.cloneContents(); const div = document.createElement("div"); div.appendChild(fragment); return div.innerHTML; }, []); const handleAskClick = React.useCallback(async () => { if (!range) return; const text = range.toString(); const html = getSelectionHtml(range); const rect = range.getBoundingClientRect(); const node = range.commonAncestorContainer as Node; const contextElement = node instanceof HTMLElement ? node : node.parentElement; const contextNode = (contextElement as HTMLElement) ?? document.body; setExpanded(true); // starting a fresh question: clear past conversation first resetConversation(); if (onAsk) { try { await onAsk({ text, html, rect, range, contextNode }); } catch (err) { // eslint-disable-next-line no-console console.error("onAsk error", err); } } const prompt = `Can you tell me what exactly is '${text}' ? be concise`; try { await sendMessage({ text: prompt }); } catch (err) { // eslint-disable-next-line no-console console.error("sendMessage error", err); } }, [getSelectionHtml, onAsk, range, resetConversation, sendMessage]); return (

{children} {open && virtualEl && (

{!expanded ? (

) : (

)} {expanded && (

{(() => { const assistant = (messages || []) .slice() .reverse() .find( (m: unknown) => (m as { role?: string }).role === "assistant", ); if (!assistant) return ( {isGenerating ? "Thinking..." : ""} ); const parts = ( assistant as { parts?: Array< | string | { type: string; text?: string; state?: string; input?: { query?: string }; output?: { query?: string; hits?: unknown[] }; errorText?: string; } >; } ).parts ?? []; return ( <> {parts.map((part, index) => { if (typeof part === "string") { return

{part}

; } if (part.type === "text") { // eslint-disable-next-line xss/no-mixed-html -- sanitized via parseMarkdownToSafeHtml const html = parseMarkdownToSafeHtml( part.text || "", ); return (

); } 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 {part.output?.hits?.length || "no"}{" "} results

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

{part.errorText}

); } } return null; })} ); })()}

{error ? (

{String( (error as unknown as { message?: string }).message || error, )}

) : null} {(() => { const hasAssistantResponse = (messages || []).some( (m: unknown) => (m as { role?: string }).role === "assistant", ); if (!hasAssistantResponse || isGenerating) return null; return ( <>

{feedbackGiven ? ( Thanks for your feedback! ) : submittingFeedback ? ( Submitting... ) : (

)}

); })()}

)}

); } export default HighlightAskAI; 53:T14f7,import { useChat } from "@ai-sdk/react"; import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls, } from "ai"; import { useMemo } from "react"; export interface AskAIConfig { agentStudio?: boolean; applicationId: string; apiKey: string; indexName: string; assistantId: string; } /** * 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() || ""; return message.includes("ai-217") || message.includes("conversation depth"); } 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 transport = useMemo(() => { return new DefaultChatTransport({ api: getChatApiUrl(config), headers: async () => { if (config.agentStudio) { return { "x-algolia-api-key": config.apiKey, "x-algolia-application-id": config.applicationId, } as Record; } const token = await getValidToken({ assistantId: config.assistantId }); return { "x-algolia-api-key": config.apiKey, "x-algolia-application-id": config.applicationId, "x-algolia-index-name": config.indexName, "x-algolia-assistant-id": config.assistantId, "x-ai-sdk-version": "v5", authorization: `TOKEN ${token}`, } as Record; }, }); }, [ config.apiKey, config.applicationId, config.indexName, config.assistantId, config.agentStudio, config, ]); const chat = useChat({ transport, sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls, }); 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, isGenerating, hasThreadDepthError, }; } const BASE_ASKAI_URL = "https://askai.algolia.com"; const TOKEN_KEY = "askai_token"; type TokenPayload = { exp: number }; const decode = (token: string): TokenPayload => { const [b64] = token.split("."); return JSON.parse(atob(b64)); }; const isExpired = (token?: string | null): boolean => { if (!token) return true; try { const { exp } = decode(token); // refresh 30 s before the backend rejects it return Date.now() / 1000 > exp - 30; } catch { return true; } }; let inflight: Promise | 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 => { 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 postFeedback = async ({ assistantId, thumbs, messageId, appId, }: { assistantId: string; thumbs: 0 | 1; messageId: string; appId: string; }): Promise => { 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, }); }; export const postAgentStudioFeedback = ({ agentId, vote, messageId, appId, apiKey, }: { agentId: string; vote: 0 | 1; messageId: string; appId: string; apiKey: string; }): Promise => { 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, }); }; 54:T546,"use client"; import { HighlightAskAI } from "@/registry/experiences/highlight-to-askai/components/highlight-to-askai"; export default function Page() { return (

Try it

Select any text in this block to see a small tooltip. Click Ask AI? to expand the panel and stream an answer.

The tooltip respects excluded elements like pre and code, and it uses smart placement to avoid viewport edges.

Tip: Try selecting a sentence across multiple lines.

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@floating-ui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40floating-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@floating-ui/react"}]]}]}],["$","li","@ai-sdk/react@^2.0.4",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40ai-sdk%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"@ai-sdk/react@^2.0.4"}]]}]}],["$","li","ai@^5.0.30",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/ai","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"ai@^5.0.30"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","marked",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/marked","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"marked"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["button","input"]}]]}],["$","$L50",null,{"sourceUrl":"https://sitesearch.algolia.com/r/highlight-to-askai.json","proxyUrl":"https://shadcnregistry.com/r/algolia/highlight-to-askai","itemId":"@algolia/highlight-to-askai"}],["$","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"}],["$","$L51",null,{"files":[{"path":"src/registry/experiences/highlight-to-askai/components/highlight-to-askai.tsx","content":"$52","type":"registry:component"},{"path":"src/registry/experiences/highlight-to-askai/hooks/use-askai.ts","content":"$53","type":"registry:hook"},{"path":"src/registry/experiences/highlight-to-askai/page.tsx","content":"$54","type":"registry:page","target":"app/highlight-to-askai/page.tsx"}]}]]}],"$L55"]}]

Highlight To Ask AI [Experimental]

Installation

Files

components

hooks

app

Styles