Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-02 06:10:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix: improve token formatting and aria-label in TokenUsageIndicator

Browse source 
Remove trailing .0 from compact number formatting (1.0K -> 1K, 2.0M -> 2M).
Include total token count in the aria-label when max context is unavailable,
improving screen reader experience.
This commit is contained in:
Marco Beretta 2026-02-08 17:37:47 +01:00
parent ce377bff9b
commit 60fb1e7f98
No known key found for this signature in database
GPG key ID: D918033D8E74CC11
2 changed files with 5 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,10 +4,12 @@ import { useLocalize, useTokenUsage } from '~/hooks';
import { cn } from '~/utils'; import { cn } from '~/utils';
function formatTokens(n: number): string { function formatTokens(n: number): string {
return new Intl.NumberFormat(undefined, { const formatted = new Intl.NumberFormat(undefined, {
notation: 'compact', notation: 'compact',
maximumFractionDigits: 1, maximumFractionDigits: 1,
}).format(n); }).format(n);
// Remove trailing .0 before suffix (e.g., "1.0K" -> "1K", "2.0M" -> "2M")
return formatted.replace(/\.0(?=[A-Za-z]|$)/, '');
} }
interface ProgressBarProps { interface ProgressBarProps {
@ -209,6 +211,7 @@ const TokenUsageIndicator = memo(function TokenUsageIndicator() {
: localize('com_ui_token_usage_aria_no_max', { : localize('com_ui_token_usage_aria_no_max', {
0: formatTokens(inputTokens), 0: formatTokens(inputTokens),
1: formatTokens(outputTokens), 1: formatTokens(outputTokens),
2: formatTokens(totalUsed),
}); });
// Color based on percentage // Color based on percentage

2
client/src/locales/en/translation.json
View file

@ -1422,7 +1422,7 @@
"com_ui_token_exchange_method": "Token Exchange Method", "com_ui_token_exchange_method": "Token Exchange Method",
"com_ui_token_url": "Token URL", "com_ui_token_url": "Token URL",
"com_ui_token_usage_aria_full": "Token usage: {{0}} input, {{1}} output, {{2}} max context, {{3}}% used", "com_ui_token_usage_aria_full": "Token usage: {{0}} input, {{1}} output, {{2}} max context, {{3}}% used",
"com_ui_token_usage_aria_no_max": "Token usage: {{0}} input, {{1}} output", "com_ui_token_usage_aria_no_max": "Token usage: {{0}} input, {{1}} output, {{2}} total tokens used",
"com_ui_token_usage_context": "Context Usage", "com_ui_token_usage_context": "Context Usage",
"com_ui_token_usage_input": "Input", "com_ui_token_usage_input": "Input",
"com_ui_token_usage_output": "Output", "com_ui_token_usage_output": "Output",