Tool

1"use client"
2 
3import { Button } from "@/components/ui/button"
4import {
5  Collapsible,
6  CollapsibleContent,
7  CollapsibleTrigger,
8} from "@/components/ui/collapsible"
9import { cn } from "@/lib/utils"
10import {
11  CheckCircle,
12  ChevronDown,
13  Loader2,
14  Settings,
15  XCircle,
16} from "lucide-react"
17import { useState } from "react"
18 
19export type ToolPart = {
20  type: string
21  state:
22    | "input-streaming"
23    | "input-available"
24    | "output-available"
25    | "output-error"
26  input?: Record<string, unknown>
27  output?: Record<string, unknown>
28  toolCallId?: string
29  errorText?: string
30}
31 
32export type ToolProps = {
33  toolPart: ToolPart
34  defaultOpen?: boolean
35  className?: string
36}
37 
38const Tool = ({ toolPart, defaultOpen = false, className }: ToolProps) => {
39  const [isOpen, setIsOpen] = useState(defaultOpen)
40 
41  const { state, input, output, toolCallId } = toolPart
42 
43  const getStateIcon = () => {
44    switch (state) {
45      case "input-streaming":
46        return <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
47      case "input-available":
48        return <Settings className="h-4 w-4 text-orange-500" />
49      case "output-available":
50        return <CheckCircle className="h-4 w-4 text-green-500" />
51      case "output-error":
52        return <XCircle className="h-4 w-4 text-red-500" />
53      default:
54        return <Settings className="text-muted-foreground h-4 w-4" />
55    }
56  }
57 
58  const getStateBadge = () => {
59    const baseClasses = "px-2 py-1 rounded-full text-xs font-medium"
60    switch (state) {
61      case "input-streaming":
62        return (
63          <span
64            className={cn(
65              baseClasses,
66              "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
67            )}
68          >
69            Processing
70          </span>
71        )
72      case "input-available":
73        return (
74          <span
75            className={cn(
76              baseClasses,
77              "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
78            )}
79          >
80            Ready
81          </span>
82        )
83      case "output-available":
84        return (
85          <span
86            className={cn(
87              baseClasses,
88              "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
89            )}
90          >
91            Completed
92          </span>
93        )
94      case "output-error":
95        return (
96          <span
97            className={cn(
98              baseClasses,
99// … truncated