"use client"; import * as React from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import { useReducedMotion } from "@/lib/motiq"; /** * AiResponseStream — renders a streaming assistant response supplied by the * parent application (text, fenced code, inline citations, and lifecycle * state). It is a *presentation* component: it never talks to a model, never * fabricates tokens, and makes no claim about what an AI is "doing" — the app * owns the stream and passes the segments + state in. * * Accessibility: the rendered content is real, readable text (not aria-hidden), * so once the response is complete a screen reader reads the whole thing in one * pass. A separate polite `role="status"` region announces lifecycle changes * (responding / complete / stopped / failed) — never token-by-token, so the * live region is not spammed. State is conveyed with icon + label + border, not * colour alone, so it survives forced-colors. Stop / Retry / Copy are real * ); } /* code block ------------------------------------------------------------ */ function CodeBlock({ code, lang, filename, onCopy, }: { code: string; lang?: string; filename?: string; onCopy?: (text: string) => void; }) { const heading = filename ?? lang; return (

{heading ?? "code"} code} onCopy={onCopy} label="Copy" copiedLabel="Copied" className="ml-auto border-transparent bg-transparent px-2 py-1 text-[11.5px] text-[var(--color-muted)] hover:text-[var(--color-fg)]" />

        {code}

); } /* inline word reveal ---------------------------------------------------- */ function Word({ children, reduce }: { children: string; reduce: boolean }) { if (reduce) return <>{children}; return ( {children} ); } function InlineText({ text, reduce }: { text: string; reduce: boolean }) { // Split on whitespace, keeping the separators so spacing is preserved. const tokens = React.useMemo(() => text.split(/(\s+)/), [text]); return ( <> {tokens.map((tok, i) => tok === "" ? null : /^\s+$/.test(tok) ? ( {tok} ) : ( {tok} ), )} ); } /* component ------------------------------------------------------------- */ export function AiResponseStream({ segments, state, sources, assistantName = "Assistant", errorMessage = "The response was interrupted before it finished.", caret = true, onStop, onRetry, onCopy, className, }: AiResponseStreamProps) { const reduce = useReducedMotion(); const { blocks, order } = React.useMemo(() => toBlocks(segments), [segments]); const sourceById = React.useMemo( () => new Map((sources ?? []).map((s) => [s.id, s])), [sources], ); const status = STATUS[state]; const isStreaming = state === "streaming"; const showCaret = caret && isStreaming && !reduce; // Only sources that were actually cited, in first-cited order. const citedSources = React.useMemo( () => Object.entries(order) .sort((a, b) => a[1] - b[1]) .map(([id, index]) => ({ index, source: sourceById.get(id), id })) .filter((c): c is { index: number; source: StreamSource; id: string } => Boolean(c.source)), [order, sourceById], ); const renderCitation = (node: Extract, key: React.Key) => { const source = sourceById.get(node.sourceId); const name = source ? `Source ${node.index}: ${source.title}` : `Source ${node.index}`; return ( {node.index} ); }; return (

{/* header ---------------------------------------------------------- */}

{assistantName} {status.icon} {status.label}

{/* polite live region: lifecycle only, never token-by-token -------- */}

{status.live(assistantName)}

{/* body ------------------------------------------------------------ */}

{blocks.map((block, bi) => { if (block.kind === "code") { return ; } const isLastBlock = bi === blocks.length - 1; return (

{block.nodes.map((node, ni) => node.kind === "citation" ? ( renderCitation(node, `c-${bi}-${ni}`) ) : ( ), )} {showCaret && isLastBlock ? ( ) : null}

); })} {blocks.length === 0 && isStreaming ? (

{reduce ? ( "Waiting for response…" ) : ( [0, 1, 2].map((i) => ( )) )}

) : null} {/* error banner: icon + text, not colour alone ------------------- */} {state === "error" ? ( {STATUS.error.icon} {errorMessage} ) : null}

{/* sources rail ---------------------------------------------------- */} {citedSources.length ? (

Sources

{index} {source.url ? ( {source.title} ) : ( {source.title} )} {source.snippet ? ( {source.snippet} ) : null}

) : null} {/* footer controls ------------------------------------------------- */}

); } export default AiResponseStream;