AI Tool Call

import {
  AiToolCall,
  AiToolCallHeader,
  AiToolCallContent,
  AiToolCallInput,
  AiToolCallOutput,
  AiToolCallError,
} from "@/components/ui/tool-call";

export default function Default() {
  return (
    <div className="mx-auto w-full max-w-md space-y-3 p-6">
      <AiToolCall name="search_web" state="completed">
        <AiToolCallHeader />
        <AiToolCallContent>
          <AiToolCallInput input={{ query: "React best practices 2025" }} />
          <AiToolCallOutput>
            Found 5 relevant articles about React best practices.
          </AiToolCallOutput>
        </AiToolCallContent>
      </AiToolCall>

      <AiToolCall name="create_file" state="running">
        <AiToolCallHeader />
      </AiToolCall>

      <AiToolCall name="delete_database" state="awaiting-approval">
        <AiToolCallHeader />
      </AiToolCall>

      <AiToolCall name="api_request" state="error">
        <AiToolCallHeader />
        <AiToolCallContent>
          <AiToolCallInput input={{ url: "https://api.example.com/data" }} />
          <AiToolCallError error="Connection timeout after 30s" />
        </AiToolCallContent>
      </AiToolCall>
    </div>
  );
}