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-cardPreview
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
Registry dependencies