diff --git a/packages/app/src/components/context-window-meter.tsx b/packages/app/src/components/context-window-meter.tsx index 2696f7c1ba..4ea10a936b 100644 --- a/packages/app/src/components/context-window-meter.tsx +++ b/packages/app/src/components/context-window-meter.tsx @@ -3,7 +3,7 @@ import Svg, { Circle } from "react-native-svg"; import { StyleSheet, useUnistyles } from "react-native-unistyles"; import { useTranslation } from "react-i18next"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; -import { formatTokenCount } from "./context-window-meter.utils"; +import { formatContextPercentage, formatTokenCount } from "./context-window-meter.utils"; interface ContextWindowMeterProps { maxTokens: number | null; @@ -99,7 +99,7 @@ export function ContextWindowMeter({ glyphSize, }: ContextWindowMeterProps) { const { theme } = useUnistyles(); - const { t } = useTranslation(); + const { t, i18n } = useTranslation(); const percentage = maxTokens !== null && usedTokens !== null ? getUsagePercentage(maxTokens, usedTokens) : null; const geometry = getMeterGeometry(showPercentage, glyphSize); @@ -183,7 +183,9 @@ export function ContextWindowMeter({ /> {showPercentage ? ( - {`${roundedPercentage}%`} + + {formatContextPercentage(roundedPercentage, i18n.resolvedLanguage)} + ) : null} diff --git a/packages/app/src/components/context-window-meter.utils.ts b/packages/app/src/components/context-window-meter.utils.ts index a0fa45ccbf..1f7035e44e 100644 --- a/packages/app/src/components/context-window-meter.utils.ts +++ b/packages/app/src/components/context-window-meter.utils.ts @@ -7,3 +7,10 @@ export function formatTokenCount(value: number): string { } return Math.round(value).toString(); } + +export function formatContextPercentage(value: number, locale?: string): string { + return new Intl.NumberFormat(locale, { + style: "percent", + maximumFractionDigits: 0, + }).format(Math.max(0, Math.min(100, value)) / 100); +} diff --git a/packages/app/src/usage/format.test.ts b/packages/app/src/usage/format.test.ts index cda2b9d9d4..f4e1ac4f0c 100644 --- a/packages/app/src/usage/format.test.ts +++ b/packages/app/src/usage/format.test.ts @@ -36,4 +36,8 @@ describe("formatAmount", () => { expect(formatRunsOutLabel(twoHoursFromNow, NOW)).toBe("2時間後に上限に到達"); expect(formatAgo(threeDaysAgo, NOW)).toBe("3日前"); }); + + it("formats percentages with locale-specific spacing", () => { + expect(formatPct(42, "fr")).toBe("42\u00a0%"); + }); });