"use client"; type MessageRole = 'user' | 'assistant' | 'system'; type MessageState = 'streaming' | 'complete' | 'error'; interface Attachment { id: string; name: string; size: number; type: string; url?: string; previewUrl?: string; } interface Citation { id: string; index: number; url: string; title: string; snippet?: string; favicon?: string; } type ToolCallStatus = 'pending' | 'running' | 'success' | 'error' | 'cancelled'; interface ToolCall { id: string; name: string; args?: Record; result?: string; status: ToolCallStatus; startedAt?: number; completedAt?: number; children?: ToolCall[]; parallel?: boolean; } interface ReasoningStep { id: string; content: string; } interface Reasoning { steps: ReasoningStep[]; status: 'thinking' | 'complete'; durationMs?: number; } interface Message { id: string; role: MessageRole; content: string; createdAt?: number; state?: MessageState; attachments?: Attachment[]; citations?: Citation[]; toolCalls?: ToolCall[]; reasoning?: Reasoning; } interface Conversation { id: string; label: string; } interface ModelOption { id: string; name: string; description?: string; badge?: string; disabled?: boolean; } interface SuggestedPrompt { id: string; label: string; prompt?: string; } type MessageFeedback = 'positive' | 'negative'; interface UsageState { promptTokens: number; completionTokens: number; contextWindow: number; estimatedCostUsd?: number; } import { cn } from '@/lib/utils'; export type UsageMeterVariant = 'Bar' | 'Inline'; export interface UsageMeterProps { usage: UsageState; variant?: UsageMeterVariant; className?: string; } function formatTokens(count: number) { if (count < 1000) return `${count}`; return `${(count / 1000).toFixed(1)}k`; } export function UsageMeter({ usage, variant = 'Bar', className }: UsageMeterProps) { const used = usage.promptTokens + usage.completionTokens; const ratio = Math.min(1, used / usage.contextWindow); const percent = Math.round(ratio * 100); const barColor = ratio > 0.9 ? 'bg-red-500/80' : ratio > 0.75 ? 'bg-amber-500/80' : 'bg-neutral-900 dark:bg-neutral-100'; if (variant === 'Inline') { return (

{formatTokens(used)} / {formatTokens(usage.contextWindow)} {usage.estimatedCostUsd !== undefined && ( ${usage.estimatedCostUsd.toFixed(4)} )}

); } return (

Context window {formatTokens(used)} / {formatTokens(usage.contextWindow)} · {percent}%

prompt {formatTokens(usage.promptTokens)} · completion {formatTokens(usage.completionTokens)} {usage.estimatedCostUsd !== undefined && ≈ ${usage.estimatedCostUsd.toFixed(4)}}

); } export default UsageMeter;