feat(i18n): Add Internationalization Support for UI and LLM Output (#1058)

This commit is contained in:
pomelo 2025-11-21 15:44:37 +08:00 committed by GitHub
parent 640f30655d
commit 48b77541c3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
98 changed files with 4740 additions and 636 deletions

View file

@ -19,6 +19,7 @@ import {
USER_AGREEMENT_RATE_MEDIUM,
} from '../utils/displayUtils.js';
import { computeSessionStats } from '../utils/computeStats.js';
import { t } from '../../i18n/index.js';
// A more flexible and powerful StatRow component
interface StatRowProps {
@ -85,22 +86,22 @@ const ModelUsageTable: React.FC<{
<Box>
<Box width={nameWidth}>
<Text bold color={theme.text.primary}>
Model Usage
{t('Model Usage')}
</Text>
</Box>
<Box width={requestsWidth} justifyContent="flex-end">
<Text bold color={theme.text.primary}>
Reqs
{t('Reqs')}
</Text>
</Box>
<Box width={inputTokensWidth} justifyContent="flex-end">
<Text bold color={theme.text.primary}>
Input Tokens
{t('Input Tokens')}
</Text>
</Box>
<Box width={outputTokensWidth} justifyContent="flex-end">
<Text bold color={theme.text.primary}>
Output Tokens
{t('Output Tokens')}
</Text>
</Box>
</Box>
@ -141,13 +142,14 @@ const ModelUsageTable: React.FC<{
{cacheEfficiency > 0 && (
<Box flexDirection="column" marginTop={1}>
<Text color={theme.text.primary}>
<Text color={theme.status.success}>Savings Highlight:</Text>{' '}
<Text color={theme.status.success}>{t('Savings Highlight:')}</Text>{' '}
{totalCachedTokens.toLocaleString()} ({cacheEfficiency.toFixed(1)}
%) of input tokens were served from the cache, reducing costs.
%){' '}
{t('of input tokens were served from the cache, reducing costs.')}
</Text>
<Box height={1} />
<Text color={theme.text.secondary}>
» Tip: For a full token breakdown, run `/stats model`.
» {t('Tip: For a full token breakdown, run `/stats model`.')}
</Text>
</Box>
)}
@ -199,7 +201,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
}
return (
<Text bold color={theme.text.accent}>
Session Stats
{t('Session Stats')}
</Text>
);
};
@ -215,33 +217,33 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
{renderTitle()}
<Box height={1} />
<Section title="Interaction Summary">
<StatRow title="Session ID:">
<Section title={t('Interaction Summary')}>
<StatRow title={t('Session ID:')}>
<Text color={theme.text.primary}>{stats.sessionId}</Text>
</StatRow>
<StatRow title="Tool Calls:">
<StatRow title={t('Tool Calls:')}>
<Text color={theme.text.primary}>
{tools.totalCalls} ({' '}
<Text color={theme.status.success}> {tools.totalSuccess}</Text>{' '}
<Text color={theme.status.error}>x {tools.totalFail}</Text> )
</Text>
</StatRow>
<StatRow title="Success Rate:">
<StatRow title={t('Success Rate:')}>
<Text color={successColor}>{computed.successRate.toFixed(1)}%</Text>
</StatRow>
{computed.totalDecisions > 0 && (
<StatRow title="User Agreement:">
<StatRow title={t('User Agreement:')}>
<Text color={agreementColor}>
{computed.agreementRate.toFixed(1)}%{' '}
<Text color={theme.text.secondary}>
({computed.totalDecisions} reviewed)
({computed.totalDecisions} {t('reviewed')})
</Text>
</Text>
</StatRow>
)}
{files &&
(files.totalLinesAdded > 0 || files.totalLinesRemoved > 0) && (
<StatRow title="Code Changes:">
<StatRow title={t('Code Changes:')}>
<Text color={theme.text.primary}>
<Text color={theme.status.success}>
+{files.totalLinesAdded}
@ -254,16 +256,16 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
)}
</Section>
<Section title="Performance">
<StatRow title="Wall Time:">
<Section title={t('Performance')}>
<StatRow title={t('Wall Time:')}>
<Text color={theme.text.primary}>{duration}</Text>
</StatRow>
<StatRow title="Agent Active:">
<StatRow title={t('Agent Active:')}>
<Text color={theme.text.primary}>
{formatDuration(computed.agentActiveTime)}
</Text>
</StatRow>
<SubStatRow title="API Time:">
<SubStatRow title={t('API Time:')}>
<Text color={theme.text.primary}>
{formatDuration(computed.totalApiTime)}{' '}
<Text color={theme.text.secondary}>
@ -271,7 +273,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
</Text>
</Text>
</SubStatRow>
<SubStatRow title="Tool Time:">
<SubStatRow title={t('Tool Time:')}>
<Text color={theme.text.primary}>
{formatDuration(computed.totalToolTime)}{' '}
<Text color={theme.text.secondary}>