2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/0cxdppusfso3e.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T2707,"use client"; import * as React from "react"; import { IconChevronDown, IconCode, IconDatabase, IconFileText, IconSearch, IconTerminal2, IconWorld, } from "@tabler/icons-react"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Orb } from "@/components/ui/orb"; import { Spinner } from "@/components/ui/spinner"; import { StreamingText } from "@/components/ui/streaming-text"; import { TextShimmer } from "@/components/ui/text-shimmer"; import { cn } from "@/lib/utils"; export type ChainTool = "search" | "web" | "file" | "code" | "terminal" | "database"; export type ChainStepState = "done" | "active" | "pending"; export type ChainStep = { id: string; label: string; /** Reasoning prose, or in agent-trace mode the tool argument (query, path, command). */ detail?: string; /** Tool used by this step; shown as an icon in agent-trace mode. */ tool?: ChainTool; duration?: string; /** Defaults: every step done, except the last while `status` is "streaming". */ state?: ChainStepState; }; const TOOL_ICON: Record> = { search: IconSearch, web: IconWorld, file: IconFileText, code: IconCode, terminal: IconTerminal2, database: IconDatabase, }; const TOOL_LABEL: Record = { search: "Search", web: "Web", file: "File", code: "Code", terminal: "Terminal", database: "Database", }; type Ctx = { status: "streaming" | "done"; mode: "default" | "agent-trace"; open: boolean }; const ChainContext = React.createContext(null); function useChain(part: string) { const ctx = React.useContext(ChainContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } function Shimmer({ children }: { children: string }) { return ( <> {children} {children} ); } export type ChainOfThoughtProps = Omit, "children"> & { steps?: ChainStep[]; /** `streaming` shows the live header and an active last step. */ status?: "streaming" | "done"; /** `agent-trace` shows a tool icon per step and the tool argument as detail. */ mode?: "default" | "agent-trace"; /** Total time, e.g. "12s", shown once done. */ duration?: string; open?: boolean; /** Defaults to open while streaming; collapses itself when streaming ends. */ defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Compose ChainOfThoughtHeader, ChainOfThoughtContent and ChainOfThoughtStep yourself. */ children?: React.ReactNode; }; function ChainOfThought({ steps = [], status = "done", mode = "default", duration, open: openProp, defaultOpen, onOpenChange, children, className, ...props }: ChainOfThoughtProps) { const [inner, setInner] = React.useState(defaultOpen ?? status === "streaming"); const open = openProp ?? inner; const setOpen = (next: boolean) => { if (openProp === undefined) setInner(next); onOpenChange?.(next); }; const was = React.useRef(status); React.useEffect(() => { if (was.current === "streaming" && status === "done" && openProp === undefined) setInner(false); if (was.current === "done" && status === "streaming" && openProp === undefined) setInner(true); was.current = status; }, [status, openProp]); const ctx = React.useMemo(() => ({ status, mode, open }), [status, mode, open]); const active = steps.find((s) => s.state === "active") ?? (status === "streaming" ? steps[steps.length - 1] : undefined); return ( {children ?? ( <> {steps.map((step, index) => ( ))} )} ); } function ChainOfThoughtHeader({ label, duration, count, className, children, ...props }: Omit, "children"> & { /** Active step label shown while streaming. */ label?: string; duration?: string; /** Step count, appended in agent-trace mode. */ count?: number; children?: React.ReactNode; }) { const { status, mode } = useChain("ChainOfThoughtHeader"); const streaming = status === "streaming"; return ( {children ?? ( <> {streaming ? ( ) : null} {streaming ? ( {label ?? "Thinking"} ) : ( <> {mode === "agent-trace" ? "Worked" : "Thought"} {duration ? for {duration} : null} {mode === "agent-trace" && count ? ( · {count} steps ) : null} )} )} ); } function ChainOfThoughtContent({ className, children, ...props }: React.ComponentProps) { return (

{children as React.ReactNode} ); } function ChainOfThoughtStep({ step, last = false, className, ...props }: Omit, "children"> & { step: ChainStep; last?: boolean }) { const { mode } = useChain("ChainOfThoughtStep"); const state = step.state ?? "done"; const Icon = step.tool ? TOOL_ICON[step.tool] : null; const trace = mode === "agent-trace"; return (

{!last ? : null} {trace && Icon ? ( ) : state === "active" ? ( ) : ( )}

{state === "active" ? {step.label} : step.label} {trace && step.tool ? {TOOL_LABEL[step.tool]} : null} {step.duration && state === "done" ? ( {step.duration} ) : null}

{step.detail ? (

{state === "active" ? {step.detail} : step.detail}

) : null}

); } export { ChainOfThought, ChainOfThoughtHeader, ChainOfThoughtContent, ChainOfThoughtStep }; 32:Tfe0,"use client"; import { useEffect, useState } from "react"; import { IconRefresh } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { ChainOfThought, type ChainStep } from "./chain-of-thought"; import { chunkWords, streamingThought, thoughtSteps, traceSteps } from "../_fixtures-b"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; const words = chunkWords(streamingThought, 2); /** Reveals steps one by one and streams the detail of the last one. Remount to replay. */ function useFakeRun(steps: ChainStep[], streamLast: boolean) { const [shown, setShown] = useState(1); const [typed, setTyped] = useState(0); const total = steps.length + (streamLast ? 1 : 0); const end = streamLast ? total : total + 1; const finished = shown >= end && (!streamLast || typed >= words.length); useEffect(() => { const id = window.setInterval(() => { setShown((n) => { if (n >= end) { window.clearInterval(id); return n; } return n + 1; }); }, 1100); return () => window.clearInterval(id); }, [end]); useEffect(() => { if (!streamLast || shown < total) return; const id = window.setInterval(() => { setTyped((t) => { if (t >= words.length) { window.clearInterval(id); return t; } return t + 1; }); }, 160); return () => window.clearInterval(id); }, [shown, total, streamLast]); const visible: ChainStep[] = steps.slice(0, Math.min(shown, steps.length)); if (streamLast && shown >= total) { visible.push({ id: "live", label: "Check the cache key", detail: words.slice(0, typed).join("") }); } return { visible, done: finished }; } function ReplayButton({ onClick }: { onClick: () => void }) { return ( ); } function StreamingDefault() { const [run, setRun] = useState(0); return setRun((r) => r + 1)} />; } function StreamingDefaultRun({ onReplay }: { onReplay: () => void }) { const { visible, done } = useFakeRun(thoughtSteps, true); return (

); } function StreamingTrace() { const [run, setRun] = useState(0); return setRun((r) => r + 1)} />; } function StreamingTraceRun({ onReplay }: { onReplay: () => void }) { const { visible, done } = useFakeRun(traceSteps, false); return (

); } const SURFACE = "min-w-0 rounded-xl bg-card p-4 text-card-foreground ring-1 ring-foreground/10"; export function ChainOfThoughtDemo() { return (

); } export default ChainOfThoughtDemo; 33:T5b1,import type { BlockMeta } from "../../../lib/block-meta"; export const chainOfThoughtMeta: BlockMeta = { slug: "chain-of-thought", title: "Chain of thought", description: "A collapsible reasoning trace on the Kobra reasoning-steps pattern with a streaming step and an agent-trace mode.", group: "ai", kobraDeps: ["collapsible", "orb", "spinner", "streaming-text", "text-shimmer"], files: ["blocks/ai/chain-of-thought/chain-of-thought.tsx"], props: [ { name: "steps", type: "ChainStep[]", description: "{ id, label, detail?, tool?, duration?, state? }. state defaults to done, with the last step active while streaming." }, { name: "status", type: "'streaming' | 'done'", default: "'done'", description: "Live header with orb and shimmer, or the settled Thought for Ns header." }, { name: "mode", type: "'default' | 'agent-trace'", default: "'default'", description: "Dot markers and prose, or a tool icon per step with the tool argument as detail." }, { name: "duration", type: "string", description: "Total time shown in the settled header." }, { name: "open / defaultOpen / onOpenChange", type: "boolean", description: "Open while streaming, collapses when streaming ends unless controlled." }, { name: "children", type: "ReactNode", description: "Compose ChainOfThoughtHeader, ChainOfThoughtContent, ChainOfThoughtStep yourself." }, ], tags: ["ai", "chat", "reasoning", "agent", "trace"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#ai","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"AI"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Chain of thought"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chain of thought"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"A collapsible reasoning trace on the Kobra reasoning-steps pattern with a streaming step and an agent-trace mode."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"chain-of-thought","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/ai/chain-of-thought/chain-of-thought.tsx","code":"$31"},{"path":"blocks/ai/chain-of-thought/demo.tsx","code":"$32"},{"path":"blocks/ai/chain-of-thought/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]