Tool

1"use client";
2import {
3  Accordion,
4  AccordionContent,
5  AccordionItem,
6  AccordionTrigger,
7} from "@/components/ui/accordion";
8import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
9import {
10  Loading03Icon,
11  CheckmarkCircle01Icon,
12  CancelCircleIcon,
13} from "@hugeicons/core-free-icons";
14import { HugeiconsIcon } from "@hugeicons/react";
15import { Badge } from "@/components/ui/badge";
16import { cn } from "@/lib/utils";
17import { useContext, createContext, useState, useEffect } from "react";
18 
19type State = "LOADING" | "COMPLETED" | "ERROR";
20 
21type ToolContextType = {
22  output?: Record<string, unknown>;
23  input?: Record<string, unknown>;
24  errorText?: string;
25  state: State;
26  setState: React.Dispatch<React.SetStateAction<State>>;
27};
28 
29const ToolContext = createContext<ToolContextType | null>(null);
30 
31export function useToolContext() {
32  const ctx = useContext(ToolContext);
33  if (!ctx) {
34    throw new Error("useToolContext must be used within a Tool");
35  }
36  return ctx;
37}
38 
39export type StateBadgeProps = {
40  className?: string;
41};
42 
43export function ToolStateBadge({ className }: StateBadgeProps) {
44  const { state } = useToolContext();
45  const getBadgeStyles = () => {
46    switch (state) {
47      case "LOADING":
48        return "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400";
49      case "COMPLETED":
50        return "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400";
51      case "ERROR":
52        return "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400";
53      default:
54        return "";
55    }
56  };
57 
58  const getIcon = () => {
59    switch (state) {
60      case "LOADING":
61        return (
62          <HugeiconsIcon
63            icon={Loading03Icon}
64            className="animate-spin w-3.5 h-3.5"
65          />
66        );
67      case "COMPLETED":
68        return (
69          <HugeiconsIcon icon={CheckmarkCircle01Icon} className="w-3.5 h-3.5" />
70        );
71      case "ERROR":
72        return (
73          <HugeiconsIcon icon={CancelCircleIcon} className="w-3.5 h-3.5" />
74        );
75      default:
76        return null;
77    }
78  };
79 
80  return (
81    <Badge
82      className={cn(
83        "flex items-center gap-1 rounded-full",
84        getBadgeStyles(),
85        className
86      )}
87    >
88      {getIcon()}
89      <span className="lowercase first-letter:uppercase">{state}</span>
90    </Badge>
91  );
92}
93 
94const getTriggerIcon = (state: string) => {
95  switch (state) {
96    case "LOADING":
97      return (
98        <HugeiconsIcon
99// … truncated