Tool

1"use client";
2 
3import {
4  createContext,
5  useContext,
6  type ComponentProps,
7  type CSSProperties,
8} from "react";
9import {
10  ArrowDown01Icon,
11  CancelCircleIcon,
12  CheckmarkCircle01Icon,
13  Clock01Icon,
14  Loading03Icon,
15  ToolsIcon,
16} from "@hugeicons/core-free-icons";
17import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react";
18 
19import { Badge } from "@/components/ui/badge";
20import {
21  Collapsible,
22  CollapsibleContent,
23  CollapsibleTrigger,
24} from "@/components/ui/collapsible";
25import { cn } from "@/lib/utils";
26 
27import {
28  CodeBlock,
29  CodeBlockContent,
30  CodeblockShiki,
31} from "@/components/nexus-ui/codeblock-new";
32 
33type ToolStatus = "pending" | "ready" | "running" | "completed" | "error";
34 
35type ToolMeta = {
36  label: string;
37  icon: IconSvgElement;
38  color: { bg: string; fg: string };
39  iconClassName?: string;
40};
41 
42const TOOL_META: Record<ToolStatus, ToolMeta> = {
43  pending: {
44    label: "Pending",
45    icon: ToolsIcon,
46    color: { bg: "var(--color-gray-100)", fg: "var(--color-gray-500)" },
47  },
48  ready: {
49    label: "Ready",
50    icon: Clock01Icon,
51    color: { bg: "var(--color-orange-100)", fg: "var(--color-orange-600)" },
52  },
53  running: {
54    label: "Running",
55    icon: Loading03Icon,
56    color: { bg: "var(--color-blue-100)", fg: "var(--color-blue-600)" },
57    iconClassName: "animate-spin",
58  },
59  completed: {
60    label: "Completed",
61    icon: CheckmarkCircle01Icon,
62    color: { bg: "var(--color-green-100)", fg: "var(--color-green-600)" },
63  },
64  error: {
65    label: "Error",
66    icon: CancelCircleIcon,
67    color: { bg: "var(--color-red-100)", fg: "var(--color-red-600)" },
68  },
69};
70 
71type ToolContextValue = {
72  status: ToolStatus;
73  meta: ToolMeta;
74};
75 
76const ToolContext = createContext<ToolContextValue | null>(null);
77 
78function isToolStatus(value: unknown): value is ToolStatus {
79  return (
80    typeof value === "string" &&
81    Object.prototype.hasOwnProperty.call(TOOL_META, value)
82  );
83}
84 
85function useToolContext(component: string): ToolContextValue {
86  const context = useContext(ToolContext);
87  if (!context) {
88    throw new Error(`${component} must be used within <Tool>`);
89  }
90  return context;
91}
92 
93function stringifyToolPayload(payload: unknown): string {
94  if (typeof payload === "string") return payload;
95  if (payload === undefined) return "";
96 
97  try {
98    return JSON.stringify(payload, null, 2);
99  } catch {
100    return String(payload);
101  }
102}
103 
104type ToolProps = ComponentProps<typeof Collapsible> & {
105  status: ToolStatus;
106};
107 
108// … truncated