feat: implement localization for models section

- Added a new copy module to handle translations for models-related components.
- Integrated translation functionality into ProviderPickerDialog, ProvidersSection, RequestContentDialog, UsageBarChart, and UsageHistorySection.
- Updated messages for various UI elements to support multiple languages.
- Refactored usage history functions to accept locale for date formatting.
- Enhanced user experience by providing localized strings for success/error messages and UI labels.
This commit is contained in:
duanshuwen
2026-04-19 21:25:05 +08:00
parent 38bea97197
commit 3a86539537
14 changed files with 559 additions and 103 deletions

View File

@@ -1,3 +1,5 @@
import { useLocale } from '../../../i18n';
import { useModelsCopy } from '../copy';
import DialogSurface from './DialogSurface';
import type { UsageHistoryEntry } from '../usage-history';
@@ -7,13 +9,13 @@ type RequestContentDialogProps = {
onClose: () => void;
};
function formatUsageTimestamp(timestamp?: string): string {
function formatUsageTimestamp(timestamp: string | undefined, locale: string): string {
if (!timestamp) return '';
const date = new Date(timestamp);
if (Number.isNaN(date.getTime())) return timestamp;
return new Intl.DateTimeFormat(undefined, {
return new Intl.DateTimeFormat(locale, {
month: 'short',
day: 'numeric',
hour: '2-digit',
@@ -26,12 +28,16 @@ export default function RequestContentDialog({
entry,
onClose,
}: RequestContentDialogProps) {
const locale = useLocale();
const t = useModelsCopy();
return (
<DialogSurface
open={open}
onClose={onClose}
title="Request Content"
subtitle={entry ? `${entry.model || 'Unknown Model'}${formatUsageTimestamp(entry.timestamp)}` : undefined}
title={t('models.usage.requestContent.title')}
subtitle={entry ? `${entry.model || t('models.common.unknownModel')}${formatUsageTimestamp(entry.timestamp, locale)}` : undefined}
closeLabel={t('models.common.closeDialog')}
widthClassName="max-w-[800px]"
>
<div className="max-h-[60vh] overflow-y-auto rounded-[16px] border border-black/6 bg-white p-5 shadow-sm dark:border-white/8 dark:bg-[#1f1f22]">