♻️ refactor: refactor api key form locale

Author: arvinxx

src/app/settings/llm/Azure/index.tsx

@@ -28,7 +28,7 @@ const useStyles = createStyles(({ css, token }) => ({
 const providerKey = ModelProvider.Azure;
 
 const AzureOpenAIProvider = memo(() => {
-  const { t } = useTranslation('setting');
+  const { t } = useTranslation('modelProvider');
 
   const { styles } = useStyles();
 
@@ -50,17 +50,17 @@ const AzureOpenAIProvider = memo(() => {
           children: (
             <Input.Password
               autoComplete={'new-password'}
-              placeholder={t('llm.azure.token.placeholder')}
+              placeholder={t('azure.token.placeholder')}
             />
           ),
-          desc: t('llm.azure.token.desc'),
-          label: t('llm.azure.token.title'),
+          desc: t('azure.token.desc'),
+          label: t('azure.token.title'),
           name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
         },
         {
-          children: <Input allowClear placeholder={t('llm.azure.endpoint.placeholder')} />,
-          desc: t('llm.azure.endpoint.desc'),
-          label: t('llm.azure.endpoint.title'),
+          children: <Input allowClear placeholder={t('azure.endpoint.placeholder')} />,
+          desc: t('azure.endpoint.desc'),
+          label: t('azure.endpoint.title'),
           name: [LLMProviderConfigKey, providerKey, LLMProviderBaseUrlKey],
         },
         {
@@ -79,18 +79,18 @@ const AzureOpenAIProvider = memo(() => {
           ),
           desc: (
             <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
-              {t('llm.azure.azureApiVersion.desc')}
+              {t('azure.azureApiVersion.desc')}
             </Markdown>
           ),
-          label: t('llm.azure.azureApiVersion.title'),
+          label: t('azure.azureApiVersion.title'),
           name: [LLMProviderConfigKey, providerKey, 'apiVersion'],
         },
       ]}
       checkModel={checkModel}
       modelList={{
         azureDeployName: true,
-        notFoundContent: t('llm.azure.empty'),
-        placeholder: t('llm.azure.modelListPlaceholder'),
+        notFoundContent: t('azure.empty'),
+        placeholder: t('azure.modelListPlaceholder'),
       }}
       provider={providerKey}
       title={

src/app/settings/llm/Bedrock/index.tsx

@@ -13,7 +13,7 @@ import { LLMProviderConfigKey } from '../const';
 const providerKey: GlobalLLMProviderKey = 'bedrock';
 
 const BedrockProvider = memo(() => {
-  const { t } = useTranslation('setting');
+  const { t } = useTranslation('modelProvider');
 
   return (
     <ProviderConfig
@@ -22,22 +22,22 @@ const BedrockProvider = memo(() => {
           children: (
             <Input.Password
               autoComplete={'new-password'}
-              placeholder={t(`llm.${providerKey}.accessKeyId.placeholder`)}
+              placeholder={t(`${providerKey}.accessKeyId.placeholder`)}
             />
           ),
-          desc: t(`llm.${providerKey}.accessKeyId.desc`),
-          label: t(`llm.${providerKey}.accessKeyId.title`),
+          desc: t(`${providerKey}.accessKeyId.desc`),
+          label: t(`${providerKey}.accessKeyId.title`),
           name: [LLMProviderConfigKey, providerKey, 'accessKeyId'],
         },
         {
           children: (
             <Input.Password
               autoComplete={'new-password'}
-              placeholder={t(`llm.${providerKey}.secretAccessKey.placeholder`)}
+              placeholder={t(`${providerKey}.secretAccessKey.placeholder`)}
             />
           ),
-          desc: t(`llm.${providerKey}.secretAccessKey.desc`),
-          label: t(`llm.${providerKey}.secretAccessKey.title`),
+          desc: t(`${providerKey}.secretAccessKey.desc`),
+          label: t(`${providerKey}.secretAccessKey.title`),
           name: [LLMProviderConfigKey, providerKey, 'secretAccessKey'],
         },
         {
@@ -51,8 +51,8 @@ const BedrockProvider = memo(() => {
               placeholder={'us-east-1'}
             />
           ),
-          desc: t(`llm.${providerKey}.region.desc`),
-          label: t(`llm.${providerKey}.region.title`),
+          desc: t(`${providerKey}.region.desc`),
+          label: t(`${providerKey}.region.title`),
           name: [LLMProviderConfigKey, providerKey, 'region'],
         },
       ]}

src/app/settings/llm/Ollama/index.tsx

@@ -16,7 +16,7 @@ const OllamaProvider = memo(() => {
     <ProviderConfig
       checkerItem={{
         children: <Checker />,
-        desc: t('llm.ollama.checker.desc'),
+        desc: t('llm.checker.ollamaDesc'),
         label: t('llm.checker.title'),
         minWidth: undefined,
       }}

src/app/settings/llm/components/ProviderConfig/index.tsx

@@ -49,6 +49,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
     modelList,
   }) => {
     const { t } = useTranslation('setting');
+    const { t: modelT } = useTranslation('modelProvider');
     const [form] = AntForm.useForm();
     const [toggleProviderEnabled, setSettings, enabled] = useGlobalStore((s) => [
       s.toggleProviderEnabled,
@@ -65,11 +66,11 @@ const ProviderConfig = memo<ProviderConfigProps>(
             children: (
               <Input.Password
                 autoComplete={'new-password'}
-                placeholder={t(`llm.${provider}.token.placeholder` as any)}
+                placeholder={modelT(`${provider}.token.placeholder` as any)}
               />
             ),
-            desc: t(`llm.${provider}.token.desc` as any),
-            label: t(`llm.${provider}.token.title` as any),
+            desc: modelT(`${provider}.token.desc` as any),
+            label: modelT(`${provider}.token.title` as any),
             name: [LLMProviderConfigKey, provider, LLMProviderApiTokenKey],
           },
         ];
@@ -78,10 +79,10 @@ const ProviderConfig = memo<ProviderConfigProps>(
       ...apiKeyItem,
       showEndpoint && {
         children: (
-          <Input allowClear placeholder={t(`llm.${provider}.endpoint.placeholder` as any)} />
+          <Input allowClear placeholder={modelT(`${provider}.endpoint.placeholder` as any)} />
         ),
-        desc: t(`llm.${provider}.endpoint.desc` as any),
-        label: t(`llm.${provider}.endpoint.title` as any),
+        desc: modelT(`${provider}.endpoint.desc` as any),
+        label: modelT(`${provider}.endpoint.title` as any),
         name: [LLMProviderConfigKey, provider, LLMProviderBaseUrlKey],
       },
       {

src/app/settings/tts/TTS/index.tsx

@@ -57,7 +57,7 @@ const TTS = memo(() => {
       },
     ],
     icon: Webhook,
-    title: t('llm.openai.title'),
+    title: t('settingTTS.openai.title'),
   };
 
   return (

src/components/ModelSelect/index.tsx

@@ -139,12 +139,12 @@ interface ProviderItemRenderProps {
 }
 
 export const ProviderItemRender = memo<ProviderItemRenderProps>(({ provider }) => {
-  const { t } = useTranslation('common');
+  const { t } = useTranslation('modelProvider');
 
   return (
     <Flexbox align={'center'} gap={4} horizontal>
       <ModelProviderIcon provider={provider} />
-      {t(`modelProvider.${provider}` as any)}
+      {t(`${provider}.title` as any)}
     </Flexbox>
   );
 });

src/features/Conversation/Error/APIKeyForm/Anthropic.tsx

@@ -13,7 +13,7 @@ import { modelConfigSelectors } from '@/store/global/selectors';
 import { FormAction } from '../style';
 
 const BedrockForm = memo(() => {
-  const { t } = useTranslation('error');
+  const { t } = useTranslation('modelProvider');
   const [showRegion, setShow] = useState(false);
 
   const [accessKeyId, secretAccessKey, region, setConfig] = useGlobalStore((s) => [
@@ -27,8 +27,8 @@ const BedrockForm = memo(() => {
   return (
     <FormAction
       avatar={<Aws.Color color={theme.colorText} size={56} />}
-      description={t('unlock.apikey.Bedrock.description')}
-      title={t('unlock.apikey.Bedrock.title')}
+      description={t('bedrock.unlock.description')}
+      title={t('bedrock.unlock.title')}
     >
       <Input.Password
         autoComplete={'new-password'}
@@ -70,7 +70,7 @@ const BedrockForm = memo(() => {
           }}
           type={'text'}
         >
-          {t('unlock.apikey.Bedrock.customRegion')}
+          {t('bedrock.unlock.customRegion')}
         </Button>
       )}
     </FormAction>