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.

src/pages/Models/index.tsx

@@ -1,18 +1,21 @@
 import ModelsSection from './components/ModelsSection';
 import ProvidersSection from './components/ProvidersSection';
 import UsageHistorySection from './components/UsageHistorySection';
+import { useModelsCopy } from './copy';
 
 export default function ModelsPage() {
+  const t = useModelsCopy();
+
   return (
     <section className="h-full w-full min-h-0">
       <div className="flex h-full w-full min-h-0 flex-col rounded-[16px] bg-white p-[20px] dark:bg-[#1b1b1d]">
         <div className="mb-[20px] flex items-end justify-between gap-4 border-b border-[#E5E8EE] pb-[20px] dark:border-[#2a2a2d]">
           <div className="flex min-w-0 items-end gap-[8px]">
             <span className="text-[24px] font-medium leading-[32px] text-[#171717] dark:text-gray-100">
-              Models Configuration
+              {t('models.page.title')}
             </span>
             <span className="pb-[3px] text-[12px] leading-[16px] text-[#99A0AE] dark:text-gray-500">
-              Configure your AI providers and view token usage.
+              {t('models.page.subtitle')}
             </span>
           </div>
         </div>