{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo ","css":{},"dependencies":["motion"],"description":"Streaming assistant text where words animate in as they arrive, with a caret that rides the last glyph and inline citation pills.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { Fragment, useEffect, useRef } from \"react\";\n\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\n/**\n * Hoisted and frozen. Motion restarts an animation whenever the transition it is\n * given changes, and this component re-renders on every token — so the object\n * has to be the same reference every time.\n */\nconst WORD_TRANSITION = { duration: 0.22, ease: EASE_OUT } as const;\nconst WORD_BLUR_PX = 4;\n/** `[1]` style markers become citation pills. */\nconst CITATION_MARKER = /^\\[(\\d+)\\]$/;\n/**\n * Split on whitespace *and* on markers, so a marker is its own token even when\n * punctuation is glued to it — `compute [1],` has to yield `[1]` and `,`\n * separately or the pill never matches.\n */\nconst TOKEN_SPLIT = /(\\s+|\\[\\d+\\])/;\n/** Anything without a letter or digit is punctuation and is not animated. */\nconst HAS_WORD_CHARACTER = /[\\p{L}\\p{N}]/u;\nconst WHITESPACE_ONLY = /^\\s+$/;\n\nexport type AIResponseCitation = {\n id: string;\n /** The number shown in the pill, matching the `[n]` marker in the text. */\n index: number;\n title: string;\n /**\n * Where the source lives, when it lives anywhere.\n *\n * Optional on purpose: most retrieval is over internal documents that have no\n * public URL, and a required field there just pushes people into inventing\n * `example.com` links that go nowhere. Without a url the pill renders as plain\n * text instead of a dead link.\n */\n url?: string;\n};\n\nexport type AIResponseProps = {\n /** Sources referenced by `[n]` markers in the text. */\n citations?: AIResponseCitation[];\n className?: string;\n /** Shows a caret after the last word. */\n isStreaming?: boolean;\n /** The response so far. Re-render it as it grows. */\n text: string;\n};\n\ntype Token = {\n citation?: AIResponseCitation;\n value: string;\n};\n\nconst tokenize = (text: string, citations: AIResponseCitation[]): Token[] =>\n text\n .split(TOKEN_SPLIT)\n .filter((value) => value !== \"\")\n .map((value) => {\n const match = value.match(CITATION_MARKER);\n if (!match) {\n return { value };\n }\n const index = Number(match[1]);\n const citation = citations.find((entry) => entry.index === index);\n return citation ? { citation, value } : { value };\n });\n\n/**\n * Streaming assistant text.\n *\n * Words animate in as they *arrive*, not on a fixed timer — the component\n * remembers how many tokens it had last render and only animates the new ones.\n * A timer-driven typewriter drifts out of step with the real stream and starts\n * lying about how fast the model is answering.\n */\nconst AIResponse = ({\n citations = [],\n className,\n isStreaming = false,\n text,\n}: AIResponseProps) => {\n const shouldReduceMotion = useReducedMotion();\n const tokens = tokenize(text, citations);\n\n // How many tokens had already been painted before this render. Everything at\n // or after this index is new and gets the entrance.\n const paintedRef = useRef(0);\n const firstNewIndex = paintedRef.current;\n\n useEffect(() => {\n paintedRef.current = tokens.length;\n }, [tokens.length]);\n\n return (\n \n {tokens.map((token, index) => {\n const isNew = index >= firstNewIndex;\n // Keyed by position only. Keying by text too would remount the last word\n // every time a token extends it, so it would re-animate on every frame of\n // the stream.\n const key = index;\n\n // Whitespace and bare punctuation stay as text. Wrapping a comma in its\n // own inline-block would let the line break between a word and its\n // punctuation.\n if (\n WHITESPACE_ONLY.test(token.value) ||\n !(token.citation || HAS_WORD_CHARACTER.test(token.value))\n ) {\n return {token.value};\n }\n\n if (token.citation) {\n return (\n \n );\n }\n\n return (\n \n {token.value}\n \n );\n })}\n {isStreaming ? (\n \n ) : null}\n

\n );\n};\n\nconst AIResponseCaret = ({\n shouldReduceMotion,\n}: {\n shouldReduceMotion: boolean | null;\n}) => (\n // Inline rather than absolutely positioned, so it rides the last glyph for\n // free and never has to be told where the text ended.\n \n);\n\nconst AIResponseCitationPill = ({\n citation,\n isNew,\n shouldReduceMotion,\n}: {\n citation: AIResponseCitation;\n isNew: boolean;\n shouldReduceMotion: boolean;\n}) => {\n const shared = {\n animate: { opacity: 1, scale: 1 },\n // No left margin: the marker is already preceded by a space in the text, so\n // adding one here doubles the gap.\n className:\n \"mr-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full border border-border bg-muted px-1 align-super font-medium text-[10px] text-muted-foreground no-underline\",\n initial:\n isNew && !shouldReduceMotion\n ? { opacity: 0, scale: 0.6 }\n : (false as const),\n title: citation.title,\n transition: shouldReduceMotion\n ? { duration: 0 }\n : { bounce: 0.1, duration: 0.25, type: \"spring\" as const },\n };\n\n // An internal document has nowhere to go, so it is not dressed up as a link —\n // no hover affordance, no pointer, nothing to click and be disappointed by.\n if (!citation.url) {\n return {citation.index};\n }\n\n return (\n \n {citation.index}\n \n );\n};\n\nexport default AIResponse;\n","path":"index.tsx","target":"components/smoothui/ai-response/index.tsx","type":"registry:ui"}],"name":"ai-response","registryDependencies":[],"title":"Ai Response","type":"registry:ui"}