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

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