4e: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"] 4f: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"] 50:T10a1,"use client"; import { useCallback, useEffect, useState, type CSSProperties } from "react"; import styles from "./ai-state.module.css"; import { useReducedMotion } from "./useReducedMotion"; export type CodeTokenTone = "keyword" | "string" | "number" | "function" | "muted" | "plain"; export interface CodeToken { text: string; tone?: CodeTokenTone; } export interface CodeLine { tokens: readonly CodeToken[]; } export interface CodeBlockProps { filename: string; language?: string; lines: readonly CodeLine[]; rawCode: string; /** Replay the line-by-line presentation. Set false, or use settled, for static output. */ autoplay?: boolean; status?: "streaming" | "settled"; className?: string; } const toneClasses: Record = { keyword: "text-foreground font-semibold", string: "text-success", number: "text-destructive", function: "text-foreground", muted: "text-muted-foreground", plain: "text-muted-foreground", }; export function CodeBlock({ filename, language, lines, rawCode, autoplay = true, status = "streaming", className = "" }: CodeBlockProps) { const reducedMotion = useReducedMotion(); const animated = autoplay && status === "streaming" && !reducedMotion; const [count, setCount] = useState(animated ? 0 : lines.length); const [copyState, setCopyState] = useState<"idle" | "copied" | "failed">("idle"); const done = count >= lines.length; useEffect(() => { if (!animated) { setCount(lines.length); return; } const timer = window.setTimeout(() => setCount((current) => (current >= lines.length ? 0 : current + 1)), count === 0 ? 400 : done ? 3200 : 240); return () => window.clearTimeout(timer); }, [animated, count, done, lines.length]); const copy = useCallback(async () => { try { if (!navigator.clipboard) throw new Error("Clipboard unavailable"); await navigator.clipboard.writeText(rawCode); setCopyState("copied"); window.setTimeout(() => setCopyState("idle"), 1500); } catch { setCopyState("failed"); window.setTimeout(() => setCopyState("idle"), 1500); } }, [rawCode]); const copyLabel = copyState === "copied" ? "Copied" : copyState === "failed" ? "Copy failed" : "Copy"; return (

{filename}{language ? {language} : null}

{lines.slice(0, count).map((line, index) => {index + 1}{line.tokens.map((token, tokenIndex) => {token.text})}{animated && index === count - 1 && !done ?  : null})}

{copyState === "failed" ? "Unable to copy code" : copyState === "copied" ? "Code copied" : ""}

); } 4d:["$","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,["$","$L4e",null,{"namespace":"@beadkit","registryDependencies":["https://beadkit.dev/r/ai-core.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ai/CodeBlock.tsx","content":"$50","type":"registry:component","target":"@components/ai/CodeBlock.tsx"}],"className":"h-[70svh] min-h-80"}]]}]