{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tool-chip","type":"registry:component","title":"Tool Chip","description":"A small pill naming a tool an agent used, with a spinner, check, or error mark that crossfades in place as its status changes.","author":"Ryan","dependencies":["clsx","lucide-react","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/tool-chip.tsx","type":"registry:component","target":"@components/motion/tool-chip.tsx","content":"\"use client\";\n// easeui.dev/components/agents/tool-chip\n\nimport { Check, Loader2, X } from \"lucide-react\";\nimport { type ReactNode, useId } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ToolChipStatus = \"running\" | \"done\" | \"error\";\n\nexport interface ToolChipProps {\n  /** Icon for the tool, such as a globe for web search. */\n  icon?: ReactNode;\n  label: string;\n  /** Default \"done\". */\n  status?: ToolChipStatus;\n  className?: string;\n}\n\nconst STATUS_CLASS: Record<ToolChipStatus, string> = {\n  running: \"text-muted-foreground\",\n  done: \"text-success\",\n  error: \"text-destructive\",\n};\n\n/** A small pill naming a tool an agent used, with a status mark that crossfades in place. */\nexport function ToolChip({ icon, label, status = \"done\", className }: ToolChipProps) {\n  const id = useId();\n  return (\n    <span\n      role=\"status\"\n      aria-label={`${label}, ${status}`}\n      className={cn(\n        \"inline-flex h-7 items-center gap-1.5 rounded-full bg-muted px-2.5 text-xs font-medium text-foreground\",\n        className,\n      )}\n    >\n      {icon ? (\n        <span aria-hidden=\"true\" className=\"flex h-3.5 w-3.5 shrink-0 items-center justify-center text-muted-foreground\">\n          {icon}\n        </span>\n      ) : null}\n      {label}\n      <span aria-hidden=\"true\" className=\"grid h-3.5 w-3.5 shrink-0 place-items-center\">\n        <Loader2\n          key={`${id}-running`}\n          className={cn(\n            \"col-start-1 row-start-1 h-3 w-3 animate-spin transition-opacity duration-150 motion-reduce:transition-none\",\n            STATUS_CLASS.running,\n            status === \"running\" ? \"opacity-100\" : \"opacity-0\",\n          )}\n        />\n        <Check\n          key={`${id}-done`}\n          strokeWidth={3}\n          className={cn(\n            \"col-start-1 row-start-1 h-3 w-3 transition-opacity duration-150 motion-reduce:transition-none\",\n            STATUS_CLASS.done,\n            status === \"done\" ? \"opacity-100\" : \"opacity-0\",\n          )}\n        />\n        <X\n          key={`${id}-error`}\n          strokeWidth={3}\n          className={cn(\n            \"col-start-1 row-start-1 h-3 w-3 transition-opacity duration-150 motion-reduce:transition-none\",\n            STATUS_CLASS.error,\n            status === \"error\" ? \"opacity-100\" : \"opacity-0\",\n          )}\n        />\n      </span>\n    </span>\n  );\n}\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"}]}