{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-tool",
  "title": "Ai Tool",
  "dependencies": [
    "ai@6.0.116",
    "lucide-react@0.546.0"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://ui.orchid.ai/r/ai-code-block.json",
    "https://ui.orchid.ai/r/orchid-foundation.json",
    "https://ui.orchid.ai/r/orchid-theme.json",
    "https://ui.orchid.ai/r/ui-badge.json",
    "https://ui.orchid.ai/r/ui-collapsible.json"
  ],
  "files": [
    {
      "path": "registry/ui/orchid/ai-elements/tool.tsx",
      "content": "\"use client\";\nimport { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, WrenchIcon, XCircleIcon, } from 'lucide-react';\nimport { Collapsible } from \"../ui/collapsible\";\nimport { CollapsibleContent } from \"../ui/collapsible\";\nimport { CollapsibleTrigger } from \"../ui/collapsible\";\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Badge } from \"../ui/badge\";\nimport { CodeBlock } from \"./code-block\";\nimport { isValidElement } from 'react';\nimport type { ToolUIPart } from 'ai';\nimport { cn } from \"../lib/ui-utils\";\nexport type ToolProps = ComponentProps<typeof Collapsible>;\nexport const Tool = ({ className, ...props }: ToolProps) => (<Collapsible className={cn('not-prose border-neutral-subtle/30 bg-surface-subtle text-neutral mb-4 w-full rounded-md border', className)} {...props}/>);\nexport type ToolHeaderProps = {\n    title?: string;\n    type: ToolUIPart['type'];\n    state: ToolUIPart['state'];\n    className?: string;\n};\nconst getStatusBadge = (status: ToolUIPart['state']) => {\n    const labels: Record<ToolUIPart['state'], string> = {\n        'input-streaming': 'Pending',\n        'input-available': 'Running',\n        'approval-requested': 'Awaiting Approval',\n        'approval-responded': 'Approved',\n        'output-available': 'Completed',\n        'output-error': 'Error',\n        'output-denied': 'Denied',\n    };\n    const icons: Record<ToolUIPart['state'], ReactNode> = {\n        'input-streaming': <CircleIcon className=\"text-neutral size-4\"/>,\n        'input-available': <ClockIcon className=\"text-neutral size-4 animate-pulse\"/>,\n        'approval-requested': <ClockIcon className=\"size-4 text-yellow-600\"/>,\n        'approval-responded': <CheckCircleIcon className=\"size-4 text-blue-600\"/>,\n        'output-available': <CheckCircleIcon className=\"size-4 text-green-600\"/>,\n        'output-error': <XCircleIcon className=\"size-4 text-red-600\"/>,\n        'output-denied': <XCircleIcon className=\"size-4 text-red-600\"/>,\n    };\n    return (<Badge className=\"gap-1.5 rounded-full text-xs\" variant=\"secondary\">\n      {icons[status]}\n      {labels[status]}\n    </Badge>);\n};\nexport const ToolHeader = ({ className, title, type, state, ...props }: ToolHeaderProps) => (<CollapsibleTrigger className={cn('flex w-full items-center justify-between gap-4 p-3', className)} {...props}>\n    <div className=\"flex items-center gap-2\">\n      <WrenchIcon className=\"text-muted-foreground size-4\"/>\n      <span className=\"text-sm font-medium\">{title ?? type.split('-').slice(1).join('-')}</span>\n      {getStatusBadge(state)}\n    </div>\n    <ChevronDownIcon className=\"text-muted-foreground size-4 transition-transform group-data-[state=open]:rotate-180\"/>\n  </CollapsibleTrigger>);\nexport type ToolContentProps = ComponentProps<typeof CollapsibleContent>;\nexport const ToolContent = ({ className, ...props }: ToolContentProps) => (<CollapsibleContent className={cn('data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none', className)} {...props}/>);\nexport type ToolInputProps = ComponentProps<'div'> & {\n    input: ToolUIPart['input'];\n};\nexport const ToolInput = ({ className, input, ...props }: ToolInputProps) => (<div className={cn('space-y-2 overflow-hidden p-4', className)} {...props}>\n    <h4 className=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">\n      Parameters\n    </h4>\n    <div className=\"bg-muted/50 rounded-md\">\n      <CodeBlock code={JSON.stringify(input, null, 2)} language=\"json\"/>\n    </div>\n  </div>);\nexport type ToolOutputProps = ComponentProps<'div'> & {\n    output: ToolUIPart['output'];\n    errorText: ToolUIPart['errorText'];\n};\nexport const ToolOutput = ({ className, output, errorText, ...props }: ToolOutputProps) => {\n    if (!(output || errorText)) {\n        return null;\n    }\n    let Output = <div>{output as ReactNode}</div>;\n    if (typeof output === 'object' && !isValidElement(output)) {\n        Output = <CodeBlock code={JSON.stringify(output, null, 2)} language=\"json\"/>;\n    }\n    else if (typeof output === 'string') {\n        Output = <CodeBlock code={output} language=\"json\"/>;\n    }\n    return (<div className={cn('space-y-2 p-4', className)} {...props}>\n      <h4 className=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">\n        {errorText ? 'Error' : 'Result'}\n      </h4>\n      <div className={cn('overflow-x-auto rounded-md text-xs [&_table]:w-full', errorText ? 'bg-destructive/10 text-destructive' : 'bg-muted/50 text-foreground')}>\n        {errorText && <div>{errorText}</div>}\n        {Output}\n      </div>\n    </div>);\n};\n",
      "type": "registry:ui",
      "target": "@ui/orchid/ai-elements/tool.tsx"
    }
  ],
  "type": "registry:ui"
}