2e:"/_next/static/immutable/chunks/02uj9wr740ifu.js" 2f:"StreamingTextDemo" 30:I[65023,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"$2f"] 31:I[48147,["$2","$8","$9","$a","$b","$c","$d","$e","$f","$10","$11","$12","$2e"],"SourcePanel"] 32:T249c,"use client"; import { useRef, useState, type ReactNode } from "react"; import { useMountEffect } from "@/lib/use-mount-effect"; import { cx } from "@/lib/utils"; const WORD_MS = 55; const HOLD_MS = 3400; export type StreamingToken = { text: string; cite?: boolean; citeIndex?: number; citeSuffix?: string }; export type StreamingSource = { name: string; domain: string; href: string; }; export type StreamingTextLabels = { sources: string; followUps: string; copy: string; retry: string; }; const DEFAULT_CONTENT: StreamingToken[] = [ ..."The launch meeting settled October 21 as the send date. Three customers asked for a shorter onboarding." .split(" ") .map((text) => ({ text })), { text: "", cite: true }, ..."The reply draft is ready for review.".split(" ").map((text) => ({ text })), ]; const DEFAULT_SOURCES: StreamingSource[] = [ { name: "Launch meeting notes", domain: "notes.peach-ui.dev", href: "https://notes.peach-ui.dev/" }, { name: "Customer questions", domain: "studio.peach-ui.dev", href: "https://studio.peach-ui.dev/" }, { name: "Pricing draft", domain: "docs.peach-ui.dev", href: "https://docs.peach-ui.dev/" }, ]; const DEFAULT_FOLLOW_UPS = ["Summarize the customer notes", "Draft the launch reply"]; const DEFAULT_LABELS: StreamingTextLabels = { sources: "3 sources", followUps: "Follow-ups", copy: "Copy reply", retry: "Try again", }; function Mark({ children }: { children: ReactNode }) { return ( ); } export type StreamingTextProps = { content?: StreamingToken[]; sources?: StreamingSource[]; followUps?: string[]; labels?: Partial; loop?: boolean; className?: string; onDone?: () => void; onFollowUp?: (text: string, index: number) => void; }; export function StreamingText({ content = DEFAULT_CONTENT, sources = DEFAULT_SOURCES, followUps = DEFAULT_FOLLOW_UPS, labels, loop = true, className, onDone, onFollowUp, }: StreamingTextProps) { const copy = { ...DEFAULT_LABELS, ...labels }; const [count, setCount] = useState(0); const [sourcesOpen, setSourcesOpen] = useState(false); const [copied, setCopied] = useState(false); const countRef = useRef(0); const onDoneRef = useRef(onDone); const contentRef = useRef(content); const loopRef = useRef(loop); const restartRef = useRef<() => void>(() => {}); onDoneRef.current = onDone; contentRef.current = content; loopRef.current = loop; const done = count >= content.length; const citeSource = (index: number) => sources[index] ?? sources[0]; useMountEffect(() => { let timer = 0; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const step = () => { const length = contentRef.current.length; const finished = countRef.current >= length; timer = window.setTimeout(() => { if (finished && !loopRef.current) { onDoneRef.current?.(); return; } const next = finished ? 0 : countRef.current + 1; countRef.current = next; setCount(next); if (!loopRef.current && next >= length) { onDoneRef.current?.(); return; } if (finished) setSourcesOpen(false); step(); }, finished ? HOLD_MS : WORD_MS); }; const begin = () => { window.clearTimeout(timer); setSourcesOpen(false); if (reduced) { const length = contentRef.current.length; countRef.current = length; setCount(length); onDoneRef.current?.(); return; } countRef.current = 0; setCount(0); step(); }; restartRef.current = begin; begin(); return () => window.clearTimeout(timer); }); const copyReply = () => { const text = content.map((token) => (token.cite ? "" : token.text)).join(" ").replace(/\s+/g, " ").trim(); void navigator.clipboard?.writeText(text).then(() => setCopied(true)); }; return (

{content.slice(0, count).map((token, index) => { if (token.cite) { const cited = citeSource(token.citeIndex ?? 0); if (!cited) return null; const chipLabel = cited.name + (token.citeSuffix ?? ""); return ( {chipLabel} ); } return {token.text} ; })} {done ? null : ( )}

{source.name} {source.domain}

{copy.followUps}

{followUps.map((text, index) => ( ))}

); } 2b:["$","article",null,{"className":"doc-article","children":[["$","header",null,{"className":"doc-article-header","children":[["$","p",null,{"className":"doc-article-kicker","children":["Primitives"," · ","Agent"]}],["$","h1",null,{"className":"doc-article-title","children":"Streaming text"}],["$","p",null,{"className":"doc-article-lead","children":"Word-by-word reply with sources and follow-up prompts."}]]}],["$","section",null,{"className":"doc-demo","aria-label":"Streaming text demo","children":["$","div",null,{"className":"doc-demo-stage","children":["$","$L30",null,{}]}]}],null,["$","$L31",null,{"source":"$32","deps":"$undefined"}],"$L33"]}]