"use client"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { LoaderCircle, CheckCircle2, XCircle } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { cn } from "@/lib/utils"; import { useContext, createContext, useState, useEffect } from "react"; type State = "LOADING" | "COMPLETED" | "ERROR"; type ToolContextType = { output?: Record; input?: Record; errorText?: string; state: State; setState: React.Dispatch>; }; const ToolContext = createContext(null); export function useToolContext() { const ctx = useContext(ToolContext); if (!ctx) { throw new Error("useToolContext must be used within a Tool"); } return ctx; } export type StateBadgeProps = { className?: string; }; export function ToolStateBadge({ className }: StateBadgeProps) { const { state } = useToolContext(); const getBadgeStyles = () => { switch (state) { case "LOADING": return "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"; case "COMPLETED": return "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"; case "ERROR": return "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"; default: return ""; } }; const getIcon = () => { switch (state) { case "LOADING": return ; case "COMPLETED": return ; case "ERROR": return ; default: return null; } }; return ( {getIcon()} {state} ); } const getTriggerIcon = (state: string) => { switch (state) { case "LOADING": return ( ); case "COMPLETED": return ; case "ERROR": return ; default: return null; } }; type RenderTableProps = { data: Record | undefined; }; function RenderTable({ data }: RenderTableProps) { if (!data) return null; return (

{Object.entries(data).map(([key, value]) => (

{key}:

            {typeof value === "object"
              ? JSON.stringify(value, null, 2)
              : String(value)}

))}

); } type ToolProps = { children?: React.ReactNode; output?: Record; input?: Record; name: string; errorText?: string; state: State; }; export function Tool({ children, output, input, errorText, state, name, }: ToolProps) { const [badgeState, setbadgeState] = useState(state); useEffect(() => { setbadgeState(state); }, [state]); return (

{getTriggerIcon(badgeState)} {name} {children}

Table JSON {badgeState === "LOADING" && (

Processing...

)} {badgeState === "ERROR" && errorText && (

Error

{errorText}

)} {badgeState === "COMPLETED" && ( <>

Input

Output

)} {badgeState === "LOADING" && (

Tool Call

Examples

Tools with dfiferent state

Installation