74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import type { TokenCount } from '../types'
|
|
|
|
function formatTokens(n: number): string {
|
|
return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n)
|
|
}
|
|
|
|
type Props = {
|
|
tokensTotal: TokenCount
|
|
status: string
|
|
}
|
|
|
|
export default function TokenStatsBar({ tokensTotal }: Props) {
|
|
if (tokensTotal.in === 0 && tokensTotal.out === 0) return null
|
|
|
|
const total = tokensTotal.in + tokensTotal.out
|
|
|
|
return (
|
|
<div
|
|
className="flex items-center gap-4 px-4 py-2.5 rounded-xl"
|
|
style={{
|
|
background: 'var(--bg-elevated)',
|
|
border: '1px solid var(--border-raised)',
|
|
}}
|
|
>
|
|
<div className="flex flex-col gap-0.5">
|
|
<span
|
|
className="text-[8px] uppercase tracking-widest"
|
|
style={{ color: 'var(--text-mid)', fontFamily: 'var(--font-mono)' }}
|
|
>
|
|
Total
|
|
</span>
|
|
<span
|
|
className="text-[11px] font-bold"
|
|
style={{ color: 'var(--text-high)', fontFamily: 'var(--font-mono)' }}
|
|
>
|
|
{formatTokens(total)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="w-px h-6 shrink-0" style={{ background: 'var(--text-low)', opacity: 0.35 }} />
|
|
|
|
<div className="flex flex-col gap-0.5">
|
|
<span
|
|
className="text-[8px] uppercase tracking-widest"
|
|
style={{ color: 'var(--text-mid)', fontFamily: 'var(--font-mono)' }}
|
|
>
|
|
Input ↑
|
|
</span>
|
|
<span
|
|
className="text-[11px] font-bold"
|
|
style={{ color: 'var(--accent-light)', fontFamily: 'var(--font-mono)' }}
|
|
>
|
|
{formatTokens(tokensTotal.in)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-0.5">
|
|
<span
|
|
className="text-[8px] uppercase tracking-widest"
|
|
style={{ color: 'var(--text-mid)', fontFamily: 'var(--font-mono)' }}
|
|
>
|
|
Output ↓
|
|
</span>
|
|
<span
|
|
className="text-[11px] font-bold"
|
|
style={{ color: 'var(--text-mid)', fontFamily: 'var(--font-mono)' }}
|
|
>
|
|
{formatTokens(tokensTotal.out)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|