50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T3c10,// Hairline UI · streaming-answer · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { AlertCircle, Copy, RotateCcw, ThumbsDown, ThumbsUp } from "lucide-react"; import { NumberRoll } from "./number-roll"; /* ───────────────────────────────────────────────────────── * STREAMING ANSWER: an AI answer as it arrives * * StreamingText the text so far, with inline citation chips; * only newly arrived words fade in * AnswerActions copy (blurs into a check that draws itself), * regenerate, feedback (the thumb fills with a * small thrown pop) and a sources stack whose * count rolls * FollowUps suggested next questions * * StreamingText renders whatever you pass it: append to `content` * as tokens arrive. Blank lines start new paragraphs, and finished * paragraphs don't re-render while the last one grows. For Markdown, * pass your renderer as children instead of `content`. * ───────────────────────────────────────────────────────── */ export type AnswerCitation = { type: "citation"; label: string; href?: string }; export type AnswerSegment = string | AnswerCitation; export type AnswerStatus = "streaming" | "done" | "stopped" | "error"; export type AnswerFeedback = "up" | "down" | null; export interface AnswerSource { name: string; href?: string; /** A favicon or logo, e.g.

. */ icon?: React.ReactNode; /** Tailwind background class for the dot when there's no icon. */ color?: string; } const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const DOTS = ["bg-blue-500", "bg-emerald-500", "bg-orange-500", "bg-violet-500"]; const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`, }); /* ── StreamingText ───────────────────────────────────────── */ export interface StreamingTextProps extends Omit, "content"> { /** The answer so far. Append as tokens arrive. */ content?: AnswerSegment[]; status?: AnswerStatus; /** Shows a retry button when status is "error". */ onRetry?: () => void; /** Your own renderer (e.g. Markdown) instead of `content`. */ children?: React.ReactNode; } type Token = { kind: "word" | "space"; text: string } | { kind: "cite"; citation: AnswerCitation }; function toParagraphs(content: AnswerSegment[]): Token[][] { const paragraphs: Token[][] = [[]]; for (const segment of content) { if (typeof segment !== "string") { paragraphs[paragraphs.length - 1].push({ kind: "cite", citation: segment }); continue; } for (const part of segment.split(/(\n{2,})/)) { if (/^\n{2,}$/.test(part)) { paragraphs.push([]); continue; } for (const text of part.split(/(\s+)/)) { if (text) paragraphs[paragraphs.length - 1].push({ kind: /^\s+$/.test(text) ? "space" : "word", text }); } } } return paragraphs.filter((p, i) => p.length > 0 || i === paragraphs.length - 1); } function CitationChip({ citation }: { citation: AnswerCitation }) { const className = `mx-0.5 inline-flex -translate-y-px items-center gap-1 rounded-[5px] border border-border bg-muted px-1.5 py-px align-middle font-mono text-[11px] text-foreground animate-[ui-fade-up_240ms_cubic-bezier(0.23,1,0.32,1)_both] motion-reduce:animate-none ${FOCUS}`; const inner = ( <> {citation.label} ); return citation.href ? ( {inner} ) : ( {inner} ); } const Caret = () => ( ); // Words keep a stable key by position, so only words that just arrived mount and fade in. const Paragraph = React.memo( function Paragraph({ tokens, caret }: { tokens: Token[]; signature: string; caret: boolean }) { return (

{tokens.map((token, i) => token.kind === "cite" ? ( ) : token.kind === "space" ? ( token.text ) : ( {token.text} ) )} {caret && }

); }, (a, b) => a.signature === b.signature && a.caret === b.caret ); export function StreamingText({ content = [], status = "done", onRetry, children, className = "", ...props }: StreamingTextProps) { const streaming = status === "streaming"; const paragraphs = children === undefined ? toParagraphs(content) : []; return (

{children ?? paragraphs.map((tokens, i) => ( (t.kind === "cite" ? `\u0000${t.citation.label}` : t.text)).join("")} caret={streaming && i === paragraphs.length - 1} /> ))} {status === "stopped" &&

Stopped

} {status === "error" && (

)}

); } /* ── AnswerActions ───────────────────────────────────────── */ export interface AnswerActionsProps extends React.HTMLAttributes { /** Text the copy button puts on the clipboard. Hides the button when omitted. */ copyText?: string; onRegenerate?: () => void; /** Controlled feedback, e.g. restored from your database. */ feedback?: AnswerFeedback; defaultFeedback?: AnswerFeedback; onFeedback?: (value: AnswerFeedback) => void; sources?: AnswerSource[]; onSourcesClick?: () => void; /** Disables the buttons, e.g. while the answer is still streaming. */ disabled?: boolean; } function IconButton({ label, pressed, disabled, onClick, children }: { label: string; pressed?: boolean; disabled?: boolean; onClick: () => void; children: React.ReactNode }) { return ( ); } /** A thumb that fills in with a small thrown pop when chosen, and empties when let go. */ function Thumb({ down, filled, reduced }: { down?: boolean; filled: boolean; reduced: boolean }) { const ref = React.useRef(null); const first = React.useRef(true); React.useEffect(() => { if (first.current) { first.current = false; return; } if (!filled || reduced) return; ref.current?.animate([{ transform: "scale(0.8) rotate(-8deg)" }, { transform: "none" }], { duration: 420, easing: THROW }); }, [filled, reduced]); const Icon = down ? ThumbsDown : ThumbsUp; return ( ); } export function AnswerActions({ copyText, onRegenerate, feedback, defaultFeedback = null, onFeedback, sources, onSourcesClick, disabled, className = "", ...props }: AnswerActionsProps) { const reduced = useReducedMotion(); const [copied, setCopied] = React.useState(false); const [ownFeedback, setOwnFeedback] = React.useState(defaultFeedback); const current = feedback !== undefined ? feedback : ownFeedback; React.useEffect(() => { if (!copied) return; const timer = window.setTimeout(() => setCopied(false), 1600); return () => window.clearTimeout(timer); }, [copied]); const copy = async () => { if (!copyText) return; try { await navigator.clipboard.writeText(copyText); setCopied(true); } catch { // Clipboard can be blocked by the browser; nothing to undo. } }; const rate = (value: "up" | "down") => { const next = current === value ? null : value; if (feedback === undefined) setOwnFeedback(next); onFeedback?.(next); }; const stack = sources && sources.length > 0 && ( <> {sources.slice(0, 3).map((s, i) => s.icon ? ( {s.icon} ) : ( ) )} {sources.length === 1 ? "source" : "sources"} ); return (

{copyText !== undefined && ( )} {onRegenerate && ( )} rate("up")}> rate("down")}>

{/* Outside the buttons, so their names stay their labels. */} {copied ? "Copied" : ""} {stack && (onSourcesClick ? ( ) : ( {stack} ))}

); } /* ── FollowUps ───────────────────────────────────────────── */ export interface FollowUpsProps extends Omit, "onSelect"> { items: string[]; onSelect?: (item: string) => void; label?: string; } export function FollowUps({ items, onSelect, label = "Follow-ups", className = "", ...props }: FollowUpsProps) { return (

{label}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","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":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-fade-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(4px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}\n\n@keyframes ui-fade-in {\n\tfrom {\n\t\topacity: 0;\n\t}\n\tto {\n\t\topacity: 1;\n\t}\n}\n\n@keyframes ui-blink {\n\t0%, 100% {\n\t\topacity: 1;\n\t}\n\t50% {\n\t\topacity: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/streaming-answer.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]