{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tool-call-card",
  "title": "Tool call card",
  "description": "an action the assistant took · `status` running/done/error/stopped · details collapsed",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [
    "collapsible"
  ],
  "files": [
    {
      "path": "components/kit/tool-call-card.tsx",
      "content": "'use client';\nimport { CheckCircle2Icon, ChevronDownIcon, CircleAlertIcon, CircleSlashIcon, LoaderCircleIcon, WrenchIcon } from 'lucide-react';\nimport { cn } from 'cn';\nimport * as React from 'react';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\n\ntype Props = {\n  /** What the tool does, in words: \"Searched orders\", not \"search_orders\". */\n  title: string;\n  /** `stopped`: the person cancelled it before it finished. Neutral, not an error. */\n  status: 'running' | 'done' | 'error' | 'stopped';\n  /** The call's inputs and result, for people who want to check. Collapsed by default. */\n  input?: string;\n  output?: string;\n  className?: string;\n};\n\nconst STATUS = {\n  running: { icon: LoaderCircleIcon, label: 'Running', tone: 'text-muted-foreground', spin: true },\n  done: { icon: CheckCircle2Icon, label: 'Done', tone: 'text-success', spin: false },\n  error: { icon: CircleAlertIcon, label: 'Failed', tone: 'text-destructive', spin: false },\n  stopped: { icon: CircleSlashIcon, label: 'Stopped', tone: 'text-muted-foreground', spin: false },\n} as const;\n\n/** One action the assistant took, shown in the conversation so people can see what it did. */\nexport function ToolCallCard({ title, status, input, output, className }: Props) {\n  const s = STATUS[status];\n  const details = input || output;\n  return (\n    <Collapsible className={cn('border-border bg-card rounded-xl border text-sm', className)}>\n      <CollapsibleTrigger\n        disabled={!details}\n        className=\"flex w-full items-center gap-3 px-3 py-2.5 text-left disabled:cursor-default [&[data-state=open]>svg:last-child]:rotate-180\">\n        <WrenchIcon className=\"text-muted-foreground size-4 shrink-0\" aria-hidden />\n        <span className=\"min-w-0 flex-1 truncate font-medium\">{title}</span>\n        <span className={cn('inline-flex items-center gap-1', s.tone)}>\n          <s.icon className={cn('size-4', s.spin && 'animate-spin motion-reduce:animate-none')} aria-hidden />\n          {s.label}\n        </span>\n        {details ? <ChevronDownIcon className=\"text-muted-foreground size-4 transition-transform\" aria-hidden /> : null}\n      </CollapsibleTrigger>\n      {details ? (\n        <CollapsibleContent className=\"border-border flex flex-col gap-2 border-t px-3 py-2.5\">\n          {input ? <pre className=\"bg-muted overflow-x-auto rounded-md p-2 font-mono text-xs\">{input}</pre> : null}\n          {output ? <pre className=\"bg-muted overflow-x-auto rounded-md p-2 font-mono text-xs\">{output}</pre> : null}\n        </CollapsibleContent>\n      ) : null}\n    </Collapsible>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/tool-call-card.tsx"
    }
  ],
  "meta": {
    "exports": [
      "ToolCallCard"
    ],
    "api": "<ToolCallCard title status input? output? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "ai"
  ],
  "type": "registry:component"
}