DesignX
AI Chat@paxeer/ai-chat/tool-call-cardimplemented

Tool call card

Card for a single tool invocation.

Install

$pnpm exec designx add @paxeer/ai-chat/tool-call-card

Preview

Loading preview...

Source code

components/designx/ai-chat/tool-call-card.tsxtsx
import {
  Badge,
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@paxeer/core";

export function ToolCallCard({
  name = "market.book",
  status = "ok",
  input = '{ "symbol": "ETH-USD", "depth": 12 }',
}: {
  name?: string;
  status?: string;
  input?: string;
}) {
  return (
    <Card className="gap-3 py-4" data-slot="tool-call-card">
      <CardHeader className="px-4">
        <CardTitle className="font-[family-name:var(--md-ref-typeface-mono)] text-[length:var(--md-sys-typescale-label-large-size)]">
          {name}
        </CardTitle>
        <CardDescription>Tool invocation</CardDescription>
        <Badge variant={status === "error" ? "destructive" : "secondary"}>{status}</Badge>
      </CardHeader>
      <CardContent className="px-4">
        <pre className="overflow-auto rounded-[var(--md-sys-shape-corner-small)] bg-surface-container-lowest p-3 text-[length:var(--md-sys-typescale-body-small-size)] text-on-surface-variant">
          {input}
        </pre>
      </CardContent>
    </Card>
  );
}

Dependencies