3a86539537
- 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.
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { useLocale } from '../../../i18n';
|
|
import { useModelsCopy } from '../copy';
|
|
import DialogSurface from './DialogSurface';
|
|
import type { UsageHistoryEntry } from '../usage-history';
|
|
|
|
type RequestContentDialogProps = {
|
|
open: boolean;
|
|
entry: UsageHistoryEntry | null;
|
|
onClose: () => void;
|
|
};
|
|
|
|
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(locale, {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
}).format(date);
|
|
}
|
|
|
|
export default function RequestContentDialog({
|
|
open,
|
|
entry,
|
|
onClose,
|
|
}: RequestContentDialogProps) {
|
|
const locale = useLocale();
|
|
const t = useModelsCopy();
|
|
|
|
return (
|
|
<DialogSurface
|
|
open={open}
|
|
onClose={onClose}
|
|
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]">
|
|
<pre className="whitespace-pre-wrap break-words font-mono text-[13px] leading-relaxed text-[#171717] dark:text-[#f3f4f6]">
|
|
{entry?.content || ''}
|
|
</pre>
|
|
</div>
|
|
</DialogSurface>
|
|
);
|
|
}
|