Tool Call Block

import { ToolCallBlock } from "@/components/ui/tool-call-block";

export default function Example() {
  return <ToolCallBlock />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const ToolCallBlock = forwardRef(({ className, name, status = "running", input, output, ...props }, ref) => (
  <div ref={ref} className={cn("rounded-lg border bg-muted/50 text-sm", className)} {...props}>
    <div className="flex items-center gap-2 border-b px-3 py-2">
      {status === "running" && <span className="h-2 w-2 animate-pulse rounded-full bg-yellow-500" />}
      {status === "complete" && <span className="h-2 w-2 rounded-full bg-green-500" />}
      {status === "error" && <span className="h-2 w-2 rounded-full bg-red-500" />}
      <span className="font-mono font-medium">{name}</span>
      <span className="ml-auto text-xs text-muted-foreground capitalize">{status}</span>
    </div>
    {input && (
      <div className="border-b px-3 py-2">
        <div className="text-xs text-muted-foreground mb-1">Input</div>
        <pre className="overflow-x-auto font-mono text-xs">{typeof input === "string" ? input : JSON.stringify(input, null, 2)}</pre>
      </div>
    )}
    {output && (
      <div className="px-3 py-2">
        <div className="text-xs text-muted-foreground mb-1">Output</div>
        <pre className="overflow-x-auto font-mono text-xs">{typeof output === "string" ? output : JSON.stringify(output, null, 2)}</pre>
      </div>
    )}
  </div>
));
ToolCallBlock.displayName = "ToolCallBlock";

export { ToolCallBlock };