27 lines
866 B
TypeScript
27 lines
866 B
TypeScript
import { Zap } from "lucide-react";
|
|
import type { TokenUsage as TokenUsageType } from "../_types/types";
|
|
|
|
interface TokenUsageProps {
|
|
usage: TokenUsageType;
|
|
}
|
|
|
|
export function TokenUsage({ usage }: TokenUsageProps) {
|
|
// Guard against partial/malformed usage data
|
|
if (typeof usage.input_tokens !== "number" || typeof usage.output_tokens !== "number") {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
|
|
<Zap className="h-3 w-3" />
|
|
<span>
|
|
{usage.input_tokens.toLocaleString()} in / {usage.output_tokens.toLocaleString()} out
|
|
{usage.input_tokens_details?.cached_tokens ? (
|
|
<span className="text-green-500 ml-1">
|
|
({usage.input_tokens_details.cached_tokens.toLocaleString()} cached)
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|