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:
@@ -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]">
|
||||
|
||||
Reference in New Issue
Block a user