Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-16 08:20:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: improve ProgressBar and TokenRow a11y

Browse source
This commit is contained in:
Marco Beretta 2025-12-15 22:16:39 +01:00
parent 963ad6e29c
commit 29b4d63005
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
1 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

17
client/src/components/Chat/Input/TokenUsageIndicator.tsx
View file

@ -25,11 +25,14 @@ function ProgressBar({ value, max, colorClass, showPercentage = false }: Progres
return (
<div className="flex items-center gap-2">
<div className="h-2 flex-1 overflow-hidden rounded-full bg-surface-tertiary">
<div
className={cn('h-full rounded-full transition-all duration-300', colorClass)}
style={{ width: `${percentage}%` }}
/>
<div className="h-2 flex-1 overflow-hidden rounded-full bg-surface-secondary">
<div className="flex h-full rounded-full">
<div
className={cn('rounded-full transition-all duration-300', colorClass)}
style={{ width: `${percentage}%` }}
/>
<div className="flex-1 bg-surface-hover" />
</div>
</div>
{showPercentage && (
<span className="min-w-[3rem] text-right text-xs text-text-secondary">
@ -56,7 +59,7 @@ function TokenRow({ label, value, total, colorClass }: TokenRowProps) {
<span className="text-text-secondary">{label}</span>
<span className="font-medium text-text-primary">
{formatTokens(value)}
<span className="ml-1 text-xs text-text-tertiary">({percentage}%)</span>
<span className="ml-1 text-xs text-text-secondary">({percentage}%)</span>
</span>
</div>
<ProgressBar value={value} max={total} colorClass={colorClass} />
@ -109,7 +112,7 @@ function TokenUsageContent() {
{hasMaxContext && (
<div className="space-y-1">
<ProgressBar value={totalUsed} max={maxContext} colorClass={getMainProgressColor()} />
<div className="flex justify-between text-xs text-text-tertiary">
<div className="flex justify-between text-xs text-text-secondary">
<span>{formatTokens(totalUsed)}</span>
<span>{formatTokens(maxContext)}</span>
</div>