2c: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/29m25k6c5-ipo.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"],""] 2d: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/29m25k6c5-ipo.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"] 2e: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/29m25k6c5-ipo.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"] 2f: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/29m25k6c5-ipo.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"] 30:T393e,"use client"; import * as React from "react"; import { IconCheck, IconChevronDown, IconCircleDashed, IconShieldQuestion, IconX, } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Spinner } from "@/components/ui/spinner"; import { TextShimmer } from "@/components/ui/text-shimmer"; import { cn } from "@/lib/utils"; import { AiCodeBlock } from "../ai-code-block/ai-code-block"; export type ChatToolState = "pending" | "running" | "done" | "error" | "needs-approval"; const STATE_LABEL: Record = { pending: "Queued", running: "Running", done: "Done", error: "Failed", "needs-approval": "Needs approval", }; type ToolCtx = { state: ChatToolState; name: string; open: boolean }; const ToolContext = React.createContext(null); const GroupContext = React.createContext(false); function useTool(part: string) { const ctx = React.useContext(ToolContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } function toText(value: unknown): { text: string; language: "json" | "text" } { if (typeof value === "string") return { text: value, language: "text" }; return { text: JSON.stringify(value, null, 2) ?? "", language: "json" }; } /** The status mark. Icon plus an sr-only word, never color alone. */ function ChatToolStatus({ state: given, className }: { state?: ChatToolState; className?: string }) { const ctx = React.useContext(ToolContext); const state = given ?? ctx?.state ?? "pending"; return ( {state === "pending" ? ( ) : state === "running" ? ( ) : state === "done" ? ( ) : state === "error" ? ( ) : ( )} {STATE_LABEL[state]} ); } export type ChatToolProps = Omit, "children"> & { /** Tool name, shown in mono. */ name: string; /** One line of what the call does. */ summary?: string; state?: ChatToolState; /** Arguments passed to the tool. Objects render as JSON. */ input?: unknown; /** Result of the tool. Pass the partial text while `state` is "running" to stream it. */ output?: unknown; /** Failure text shown when `state` is "error". */ error?: string; /** e.g. "0.4s", shown once the call is done or failed. */ duration?: string; open?: boolean; /** Defaults to open for running, error and needs-approval, closed otherwise. */ defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; onApprove?: () => void; onReject?: () => void; approveLabel?: string; rejectLabel?: string; /** Compose ChatToolHeader and ChatToolContent yourself. */ children?: React.ReactNode; }; function ChatTool({ name, summary, state = "pending", input, output, error, duration, open: openProp, defaultOpen, onOpenChange, onApprove, onReject, approveLabel, rejectLabel, children, className, ...props }: ChatToolProps) { const inGroup = React.useContext(GroupContext); const [inner, setInner] = React.useState( defaultOpen ?? (state === "running" || state === "error" || state === "needs-approval"), ); const open = openProp ?? inner; const setOpen = (next: boolean) => { if (openProp === undefined) setInner(next); onOpenChange?.(next); }; // Bring attention to a call that stops for a person or fails. const [seen, setSeen] = React.useState(state); if (seen !== state) { setSeen(state); if ((state === "needs-approval" || state === "error") && openProp === undefined) setInner(true); } const ctx = React.useMemo(() => ({ state, name, open }), [state, name, open]); const hasPanel = input !== undefined || output !== undefined || !!error || state === "needs-approval"; return ( {children ?? ( <> {hasPanel ? ( {input !== undefined ? : null} {output !== undefined || state === "running" ? : null} {error && state === "error" ? {error} : null} {state === "needs-approval" ? ( ) : null} ) : null} )} ); } function ChatToolHeader({ summary, duration, className, children, ...props }: Omit, "children"> & { summary?: string; duration?: string; children?: React.ReactNode; }) { const { state, name } = useTool("ChatToolHeader"); const tail = state === "done" || state === "error" ? duration : undefined; return ( {children ?? ( <> {name} {summary ? ( {state === "running" ? ( <> {summary} {summary} ) : ( summary )} ) : ( )} {state === "needs-approval" || state === "error" ? ( {STATE_LABEL[state]} ) : null} {tail ? {tail} : null} )} ); } function ChatToolContent({ className, children, ...props }: React.ComponentProps) { return (

{children as React.ReactNode}

); } function PaneLabel({ children, trailing }: { children: React.ReactNode; trailing?: React.ReactNode }) { return (

{children} {trailing}

); } const PANE = "rounded-lg border-0 bg-muted/50"; function ChatToolInput({ value, label = "Input" }: { value: unknown; label?: string }) { const { text, language } = toText(value); return (

{label}

); } function ChatToolOutput({ value, label = "Output" }: { value?: unknown; label?: string }) { const { state } = useTool("ChatToolOutput"); const streaming = state === "running"; const { text, language } = toText(value ?? ""); return (

Streaming Streaming ) : null } > {label} {text === "" && streaming ? (

Waiting for output…

) : ( )}

); } function ChatToolError({ className, ...props }: React.ComponentProps<"p">) { return (

); } /** A caution or hint inside a tool card. `warning` uses the warning hue, `error` the error hue. */ function ChatToolNote({ tone = "warning", className, ...props }: React.ComponentProps<"p"> & { tone?: "warning" | "error" }) { return (

); } function ChatToolApproval({ onApprove, onReject, approveLabel = "Approve", rejectLabel = "Reject", children = "This tool wants to run. Review the input, then allow or deny it.", className, ...props }: Omit, "children"> & { onApprove?: () => void; onReject?: () => void; approveLabel?: string; rejectLabel?: string; children?: React.ReactNode; }) { return (

{children}

); } export type ChatToolGroupProps = Omit, "children" | "title"> & { /** Heading; defaults to a count of the calls. */ heading?: string; /** Number of calls, for the done counter. */ total: number; done: number; /** Any call running, failed or waiting for approval, to color the header mark. */ state?: ChatToolState; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; children: React.ReactNode; }; /** A card of tool calls on one surface, with a done counter in the header. */ function ChatToolGroup({ heading, total, done, state, open, defaultOpen = true, onOpenChange, children, className, ...props }: ChatToolGroupProps) { const mark: ChatToolState = state ?? (done === total ? "done" : "running"); return ( {heading ?? `${total} tool call${total === 1 ? "" : "s"}`} {done}/{total}

{children}

); } export { ChatTool, ChatToolHeader, ChatToolStatus, ChatToolContent, ChatToolInput, ChatToolOutput, ChatToolError, ChatToolNote, ChatToolApproval, ChatToolGroup, }; 31:T265b,"use client"; import * as React from "react"; import { IconCode, IconTerminal2, IconTextWrap } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { CopyCheck, useReceipt } from "@/components/ui/copy-check"; import { INK } from "@/components/ui/code-block"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { highlightCode, type CodeLanguage } from "@/lib/highlight-code"; import { cn } from "@/lib/utils"; /** Languages the block labels. `json` reuses the JS grammar; `text` is unhighlighted. */ export type AiCodeLanguage = CodeLanguage | "json" | "text"; const GRAMMAR: Record = { ts: "ts", tsx: "tsx", js: "js", jsx: "jsx", sh: "sh", json: "js", text: "sh", }; const LABEL: Record = { ts: "TypeScript", tsx: "TSX", js: "JavaScript", jsx: "JSX", sh: "Shell", json: "JSON", text: "Text", }; type Ctx = { code: string; language: AiCodeLanguage; filename?: string; wrap: boolean; setWrap: (next: boolean) => void; lineNumbers: boolean; maxHeight?: number; }; const AiCodeBlockContext = React.createContext(null); function useAiCodeBlock(part: string) { const ctx = React.useContext(AiCodeBlockContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } export type AiCodeBlockProps = Omit, "children"> & { code: string; language?: AiCodeLanguage; /** Shown in the header instead of the language label. */ filename?: string; lineNumbers?: boolean; /** Soft-wrap long lines. Controlled with `onWrapChange`, or uncontrolled with `defaultWrap`. */ wrap?: boolean; defaultWrap?: boolean; onWrapChange?: (wrap: boolean) => void; /** Render the wrap toggle in the header. */ wrapToggle?: boolean; /** `default` has a header bar; `bare` drops it and floats the copy action on hover or focus. */ variant?: "default" | "bare"; /** Cap the body height in px; it scrolls past that. */ maxHeight?: number; /** Compose your own parts; omit for the default header plus body. */ children?: React.ReactNode; }; function AiCodeBlock({ code, language = "ts", filename, lineNumbers = false, wrap: wrapProp, defaultWrap = false, onWrapChange, wrapToggle = false, variant = "default", maxHeight, children, className, ...props }: AiCodeBlockProps) { const [inner, setInner] = React.useState(defaultWrap); const wrap = wrapProp ?? inner; const setWrap = React.useCallback( (next: boolean) => { if (wrapProp === undefined) setInner(next); onWrapChange?.(next); }, [wrapProp, onWrapChange], ); const ctx = React.useMemo( () => ({ code, language, filename, wrap, setWrap, lineNumbers, maxHeight }), [code, language, filename, wrap, setWrap, lineNumbers, maxHeight], ); return (

{children ?? ( <> {variant === "default" ? ( {wrapToggle ? : null} ) : ( {wrapToggle ? : null} )} )} ); } function AiCodeBlockHeader({ className, ...props }: React.ComponentProps<"figcaption">) { return (

); } /** Language icon plus filename (or the language name when no filename is given). */ function AiCodeBlockLabel({ className, children, ...props }: React.ComponentProps<"span">) { const { language, filename } = useAiCodeBlock("AiCodeBlockLabel"); const Glyph = language === "sh" ? IconTerminal2 : IconCode; return ( {children ?? ( <> {filename ? {filename} : null} {LABEL[language]} )} ); } function AiCodeBlockActions({ floating = false, className, ...props }: React.ComponentProps<"div"> & { floating?: boolean }) { return (

); } function AiCodeBlockCopy({ className, ...props }: Omit, "children">) { const { code, filename } = useAiCodeBlock("AiCodeBlockCopy"); const [copied, showCopied] = useReceipt(); const copy = async () => { try { await navigator.clipboard.writeText(code); } catch { return; } showCopied(); }; return ( } /> {copied ? "Copied" : "Copy"} ); } function AiCodeBlockWrapToggle({ className, ...props }: Omit, "children">) { const { wrap, setWrap } = useAiCodeBlock("AiCodeBlockWrapToggle"); return ( setWrap(!wrap)} className={cn("text-muted-foreground hover:text-foreground aria-pressed:text-foreground aria-pressed:before:bg-foreground/7", className)} {...props} > } /> {wrap ? "Unwrap lines" : "Wrap lines"} ); } function AiCodeBlockContent({ className, ...props }: React.ComponentProps<"div">) { const { code, language, wrap, lineNumbers, maxHeight, filename } = useAiCodeBlock("AiCodeBlockContent"); const lines = React.useMemo(() => highlightCode(code.replace(/\n$/, ""), GRAMMAR[language]), [code, language]); const digits = String(lines.length).length; return (

        
          {lines.map((runs, number) => (
            
              {lineNumbers ? (
                
                  {number + 1}
                
              ) : (
                
              )}
              
                {runs.map((run, index) => (
                  
                    {run.text}
                  
                ))}
              
            
          ))}

); } export { AiCodeBlock, AiCodeBlockHeader, AiCodeBlockLabel, AiCodeBlockActions, AiCodeBlockCopy, AiCodeBlockWrapToggle, AiCodeBlockContent, }; 32:T1135,"use client"; import { useEffect, useState } from "react"; import { IconRefresh } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { ChatTool, ChatToolApproval, ChatToolContent, ChatToolNote, ChatToolGroup, ChatToolHeader, ChatToolInput, ChatToolOutput, type ChatToolState, } from "./chat-tool"; import { toolCalls, toolGroup, toolStreamLines } from "../_fixtures-b"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; function StreamingTool() { const [run, setRun] = useState(0); return setRun((r) => r + 1)} />; } function StreamingRun({ onReplay }: { onReplay: () => void }) { const [lines, setLines] = useState(0); const state: ChatToolState = lines >= toolStreamLines.length ? "done" : "running"; useEffect(() => { const id = window.setInterval(() => { setLines((n) => { if (n >= toolStreamLines.length) { window.clearInterval(id); return n; } return n + 1; }); }, 700); return () => window.clearInterval(id); }, []); const t = toolCalls.running; return (

); } function ApprovalTool() { const [state, setState] = useState("needs-approval"); const t = toolCalls.approval; useEffect(() => { if (state !== "running") return; const id = window.setTimeout(() => setState("done"), 1600); return () => window.clearTimeout(id); }, [state]); return (

setState("running")} onReject={() => setState("error")} error={state === "error" ? "Rejected: the purge was not run." : undefined} /> ); } export function ChatToolDemo() { return ( t.state === "done").length} heading="Working on it"> {toolGroup.map((t) => ( ))} Heads up: this list has 240 sample recipients. Sending cannot be undone. ); } export default ChatToolDemo; 33:T830,import type { BlockMeta } from "../../../lib/block-meta"; export const chatToolMeta: BlockMeta = { slug: "chat-tool", title: "Chat tool call", description: "A collapsible tool-call card on the Kobra task-list and plan-card patterns with five states, JSON panes, streaming output and approval actions.", group: "ai", kobraDeps: ["button", "code-block", "collapsible", "copy-check", "spinner", "text-shimmer", "tooltip"], files: [ "blocks/ai/chat-tool/chat-tool.tsx", "blocks/ai/ai-code-block/ai-code-block.tsx", ], props: [ { name: "name", type: "string", description: "Tool name, mono." }, { name: "summary", type: "string", description: "One line of what the call does; shimmers while running." }, { name: "state", type: "'pending' | 'running' | 'done' | 'error' | 'needs-approval'", default: "'pending'", description: "Drives the status mark, border, open default and which panes show." }, { name: "input / output", type: "unknown", description: "Objects render as JSON, strings as text. While running, a growing output string streams in." }, { name: "error", type: "string", description: "Shown in an alert when state is error." }, { name: "duration", type: "string", description: "Shown at the end of the header once done or failed." }, { name: "open / defaultOpen / onOpenChange", type: "boolean", description: "Open for running, error and needs-approval by default; opens itself when a call starts needing approval or fails." }, { name: "onApprove / onReject", type: "() => void", description: "Approval actions when state is needs-approval." }, { name: "children", type: "ReactNode", description: "Compose ChatToolHeader, ChatToolContent, ChatToolInput, ChatToolOutput, ChatToolError, ChatToolNote (tone warning or error), ChatToolApproval, ChatToolStatus." }, { name: "ChatToolGroup", type: "{ total, done, state?, heading?, open?, defaultOpen?, onOpenChange? }", description: "One surface for several calls; nested ChatTool rows go flat." }, ], tags: ["ai", "chat", "tool", "agent", "approval"], status: "ready", }; 23:["$","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":["$","$L2c",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":["$","$L2c",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":"Chat tool call"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Chat tool call"}],["$","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 tool-call card on the Kobra task-list and plan-card patterns with five states, JSON panes, streaming output and approval actions."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"chat-tool","group":"ai","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/ai/chat-tool/chat-tool.tsx","code":"$30"},{"path":"blocks/ai/ai-code-block/ai-code-block.tsx","code":"$31"},{"path":"blocks/ai/chat-tool/demo.tsx","code":"$32"},{"path":"blocks/ai/chat-tool/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]