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[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"] 52:T1b74,"use client"; import { useEffect, useMemo, useState, type ReactNode } from "react"; import styles from "./ai-state.module.css"; import { useReducedMotion } from "./useReducedMotion"; import { safeExternalHref } from "./safeExternalHref"; export interface StreamingTextSource { name: string; domain?: string; href?: string; imageUrl?: string; } export interface StreamingTextToken { /** Text is revealed word by word. */ text?: string; /** A source chip is revealed at this position. */ citation?: StreamingTextSource; } export interface StreamingTextAction { id: string; label: string; icon?: ReactNode; } export interface StreamingTextProps { tokens: readonly StreamingTextToken[]; sources?: readonly StreamingTextSource[]; actions?: readonly StreamingTextAction[]; followUps?: readonly string[]; onAction?: (action: StreamingTextAction) => void; onFollowUp?: (prompt: string) => void; wordIntervalMs?: number; holdMs?: number; loop?: boolean; autoStart?: boolean; className?: string; } type Unit = { text?: string; citation?: StreamingTextSource }; function splitTokens(tokens: readonly StreamingTextToken[]): Unit[] { return tokens.flatMap((token): Unit[] => { if (token.citation) return [{ citation: token.citation }]; if (!token.text) return []; return token.text.trim().split(/\s+/).map((text) => ({ text })); }); } function SourceChip({ source }: { source: StreamingTextSource }) { const href = safeExternalHref(source.href); const content = ( <> {source.domain ?? source.name} ); const className = "mx-0.5 inline-flex h-5 translate-y-[-1px] items-center gap-1 rounded-md bg-muted px-1.5 align-middle font-mono text-[10px] text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground motion-reduce:transition-none"; return href ? ( {content} ) : ( {content} ); } export function StreamingText({ tokens, sources = [], actions = [], followUps = [], onAction, onFollowUp, wordIntervalMs = 55, holdMs = 3400, loop = false, autoStart = true, className = "", }: StreamingTextProps) { const units = useMemo(() => splitTokens(tokens), [tokens]); const contentKey = units .map((unit) => unit.text ?? `${unit.citation?.name}:${unit.citation?.href ?? ""}`) .join("\u0000"); const reducedMotion = useReducedMotion(); const [count, setCount] = useState(autoStart ? 0 : units.length); const [sourcesOpen, setSourcesOpen] = useState(false); const visibleCount = reducedMotion ? units.length : count; const done = visibleCount >= units.length; useEffect(() => { setCount(autoStart ? 0 : units.length); setSourcesOpen(false); }, [autoStart, contentKey, units.length]); useEffect(() => { if (reducedMotion || !autoStart || units.length === 0 || (!loop && done)) return; const timer = window.setTimeout(() => { if (done) setCount(loop ? 0 : units.length); else setCount((value) => Math.min(units.length, value + 1)); }, done ? holdMs : wordIntervalMs); return () => window.clearTimeout(timer); }, [autoStart, done, holdMs, loop, reducedMotion, units.length, wordIntervalMs, count]); return

{units.slice(0, visibleCount).map((unit, index) => unit.citation ? : {unit.text} )} {!done ? : null}

{done ? "Response complete." : "Response streaming."} {actions.length > 0 || sources.length > 0 ?

{actions.map((action) => )} {sources.length > 0 ? : null}

: null} {sources.length > 0 ?

{sources.map((source) => { const href = safeExternalHref(source.href); const content = <>

: null} {followUps.length > 0 ?

Follow-ups

{followUps.map((prompt) => )}

: null}

; } export default StreamingText; 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":[null,["$","$L50",null,{"namespace":"@beadkit","registryDependencies":["https://beadkit.dev/r/ai-core.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ai/StreamingText.tsx","content":"$52","type":"registry:component","target":"@components/ai/StreamingText.tsx"}],"className":"h-[70svh] min-h-80"}]]}]