@lobehub/chat 0.145.11 → 0.145.13

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

@@ -1,14 +1,12 @@
 import { Ollama } from '@lobehub/icons';
-import { Input } from 'antd';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Checker from './Checker';
-import ProviderConfig from '../components/ProviderConfig';
-import { LLMProviderBaseUrlKey, LLMProviderConfigKey } from '../const';
+import { ModelProvider } from '@/libs/agent-runtime';
 
-const providerKey = 'ollama';
+import ProviderConfig from '../components/ProviderConfig';
+import Checker from './Checker';
 
 const OllamaProvider = memo(() => {
   const { t } = useTranslation('setting');
@@ -16,33 +14,16 @@ const OllamaProvider = memo(() => {
 
   return (
     <ProviderConfig
-      configItems={[
-        {
-          children: <Input allowClear placeholder={t('llm.Ollama.endpoint.placeholder')} />,
-          desc: t('llm.Ollama.endpoint.desc'),
-          label: t('llm.Ollama.endpoint.title'),
-          name: [LLMProviderConfigKey, providerKey, LLMProviderBaseUrlKey],
-        },
-        {
-          children: (
-            <Input.TextArea
-              allowClear
-              placeholder={t('llm.Ollama.customModelName.placeholder')}
-              style={{ height: 100 }}
-            />
-          ),
-          desc: t('llm.Ollama.customModelName.desc'),
-          label: t('llm.Ollama.customModelName.title'),
-          name: [LLMProviderConfigKey, providerKey, 'customModelName'],
-        },
-        {
-          children: <Checker />,
-          desc: t('llm.Ollama.checker.desc'),
-          label: t('llm.checker.title'),
-          minWidth: undefined,
-        },
-      ]}
-      provider={providerKey}
+      checkerItem={{
+        children: <Checker />,
+        desc: t('llm.ollama.checker.desc'),
+        label: t('llm.checker.title'),
+        minWidth: undefined,
+      }}
+      provider={ModelProvider.Ollama}
+      showApiKey={false}
+      showCustomModelName
+      showEndpoint
       title={
         <Ollama.Combine color={theme.isDarkMode ? theme.colorText : theme.colorPrimary} size={24} />
       }

package/src/app/settings/llm/OpenAI/index.tsx

@@ -41,14 +41,12 @@ const LLM = memo(() => {
             <Input.Password
               autoComplete={'new-password'}
               placeholder={
-                useAzure
-                  ? t('llm.AzureOpenAI.token.placeholder')
-                  : t('llm.OpenAI.token.placeholder')
+                useAzure ? t('llm.azure.token.placeholder') : t('llm.openai.token.placeholder')
               }
             />
           ),
-          desc: useAzure ? t('llm.AzureOpenAI.token.desc') : t('llm.OpenAI.token.desc'),
-          label: useAzure ? t('llm.AzureOpenAI.token.title') : t('llm.OpenAI.token.title'),
+          desc: useAzure ? t('llm.azure.token.desc') : t('llm.openai.token.desc'),
+          label: useAzure ? t('llm.azure.token.title') : t('llm.openai.token.title'),
           name: [LLMProviderConfigKey, providerKey, 'OPENAI_API_KEY'],
         },
         {
@@ -57,31 +55,31 @@ const LLM = memo(() => {
               allowClear
               placeholder={
                 useAzure
-                  ? t('llm.AzureOpenAI.endpoint.placeholder')
-                  : t('llm.OpenAI.endpoint.placeholder')
+                  ? t('llm.azure.endpoint.placeholder')
+                  : t('llm.openai.endpoint.placeholder')
               }
             />
           ),
-          desc: useAzure ? t('llm.AzureOpenAI.endpoint.desc') : t('llm.OpenAI.endpoint.desc'),
-          label: useAzure ? t('llm.AzureOpenAI.endpoint.title') : t('llm.OpenAI.endpoint.title'),
+          desc: useAzure ? t('llm.azure.endpoint.desc') : t('llm.openai.endpoint.desc'),
+          label: useAzure ? t('llm.azure.endpoint.title') : t('llm.openai.endpoint.title'),
           name: [LLMProviderConfigKey, providerKey, 'endpoint'],
         },
         {
           children: (
             <Input.TextArea
               allowClear
-              placeholder={t('llm.OpenAI.customModelName.placeholder')}
+              placeholder={t('llm.openai.customModelName.placeholder')}
               style={{ height: 100 }}
             />
           ),
-          desc: t('llm.OpenAI.customModelName.desc'),
-          label: t('llm.OpenAI.customModelName.title'),
+          desc: t('llm.openai.customModelName.desc'),
+          label: t('llm.openai.customModelName.title'),
           name: [LLMProviderConfigKey, providerKey, 'customModelName'],
         },
         {
           children: <Switch />,
-          desc: t('llm.OpenAI.useAzure.desc'),
-          label: t('llm.OpenAI.useAzure.title'),
+          desc: t('llm.openai.useAzure.desc'),
+          label: t('llm.openai.useAzure.title'),
           minWidth: undefined,
           name: [LLMProviderConfigKey, 'openAI', 'useAzure'],
           valuePropName: 'checked',
@@ -106,11 +104,11 @@ const LLM = memo(() => {
           ),
           desc: (
             <Markdown className={styles.markdown} fontSize={12} variant={'chat'}>
-              {t('llm.OpenAI.azureApiVersion.desc')}
+              {t('llm.openai.azureApiVersion.desc')}
             </Markdown>
           ),
           hidden: !useAzure,
-          label: t('llm.OpenAI.azureApiVersion.title'),
+          label: t('llm.openai.azureApiVersion.title'),
           name: [LLMProviderConfigKey, providerKey, 'azureApiVersion'],
         },
         {
@@ -121,7 +119,7 @@ const LLM = memo(() => {
         },
       ]}
       provider={providerKey}
-      title={<OpenAI.Combine size={24}></OpenAI.Combine>}
+      title={<OpenAI.Combine size={24} />}
     />
   );
 });

package/src/app/settings/llm/OpenRouter/index.tsx

@@ -1,56 +1,19 @@
 import { OpenRouter } from '@lobehub/icons';
-import { Input } from 'antd';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 
-import Checker from '../components/Checker';
 import ProviderConfig from '../components/ProviderConfig';
-import { LLMProviderApiTokenKey, LLMProviderConfigKey } from '../const';
-
-const providerKey = 'openrouter';
 
 const OpenRouterProvider = memo(() => {
-  const { t } = useTranslation('setting');
-
   const theme = useTheme();
 
   return (
     <ProviderConfig
-      configItems={[
-        {
-          children: (
-            <Input.Password
-              autoComplete={'new-password'}
-              placeholder={t('llm.OpenRouter.token.placeholder')}
-            />
-          ),
-          desc: t('llm.OpenRouter.token.desc'),
-          label: t('llm.OpenRouter.token.title'),
-          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
-        },
-        {
-          children: (
-            <Input.TextArea
-              allowClear
-              placeholder={t('llm.OpenRouter.customModelName.placeholder')}
-              style={{ height: 100 }}
-            />
-          ),
-          desc: t('llm.OpenRouter.customModelName.desc'),
-          label: t('llm.OpenRouter.customModelName.title'),
-          name: [LLMProviderConfigKey, providerKey, 'customModelName'],
-        },
-        {
-          children: <Checker model={'mistralai/mistral-7b-instruct:free'} provider={ModelProvider.OpenRouter} />,
-          desc: t('llm.checker.desc'),
-          label: t('llm.checker.title'),
-          minWidth: '100%',
-        },
-      ]}
-      provider={providerKey}
+      checkModel={'mistralai/mistral-7b-instruct:free'}
+      provider={ModelProvider.OpenRouter}
+      showCustomModelName
       title={
         <OpenRouter.Combine
           color={theme.isDarkMode ? theme.colorText : OpenRouter.colorPrimary}

package/src/app/settings/llm/Perplexity/index.tsx

@@ -1,44 +1,18 @@
 import { Perplexity } from '@lobehub/icons';
-import { Input } from 'antd';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 
-import Checker from '../components/Checker';
 import ProviderConfig from '../components/ProviderConfig';
-import { LLMProviderApiTokenKey, LLMProviderConfigKey } from '../const';
-
-const providerKey = 'perplexity';
 
 const PerplexityProvider = memo(() => {
-  const { t } = useTranslation('setting');
-
   const theme = useTheme();
 
   return (
     <ProviderConfig
-      configItems={[
-        {
-          children: (
-            <Input.Password
-              autoComplete={'new-password'}
-              placeholder={t('llm.Perplexity.token.placeholder')}
-            />
-          ),
-          desc: t('llm.Perplexity.token.desc'),
-          label: t('llm.Perplexity.token.title'),
-          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
-        },
-        {
-          children: <Checker model={'pplx-7b-chat'} provider={ModelProvider.Perplexity} />,
-          desc: t('llm.checker.desc'),
-          label: t('llm.checker.title'),
-          minWidth: '100%',
-        },
-      ]}
-      provider={providerKey}
+      checkModel={'pplx-7b-chat'}
+      provider={ModelProvider.Perplexity}
       title={
         <Perplexity.Combine
           color={theme.isDarkMode ? theme.colorText : Perplexity.colorPrimary}

package/src/app/settings/llm/TogetherAI/index.tsx

@@ -1,58 +1,17 @@
 import { Together } from '@lobehub/icons';
-import { Input } from 'antd';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { ModelProvider } from '@/libs/agent-runtime';
-
-import Checker from '../components/Checker';
 import ProviderConfig from '../components/ProviderConfig';
-import { LLMProviderApiTokenKey, LLMProviderConfigKey } from '../const';
-
-const providerKey = 'togetherai';
 
 const TogetherAIProvider = memo(() => {
-  const { t } = useTranslation('setting');
-
   const theme = useTheme();
 
   return (
     <ProviderConfig
-      configItems={[
-        {
-          children: (
-            <Input.Password
-              autoComplete={'new-password'}
-              placeholder={t('llm.TogetherAI.token.placeholder')}
-            />
-          ),
-          desc: t('llm.TogetherAI.token.desc'),
-          label: t('llm.TogetherAI.token.title'),
-          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
-        },
-        {
-          children: (
-            <Input.TextArea
-              allowClear
-              placeholder={t('llm.TogetherAI.customModelName.placeholder')}
-              style={{ height: 100 }}
-            />
-          ),
-          desc: t('llm.TogetherAI.customModelName.desc'),
-          label: t('llm.TogetherAI.customModelName.title'),
-          name: [LLMProviderConfigKey, providerKey, 'customModelName'],
-        },
-        {
-          children: (
-            <Checker model={'togethercomputer/alpaca-7b'} provider={ModelProvider.TogetherAI} />
-          ),
-          desc: t('llm.checker.desc'),
-          label: t('llm.checker.title'),
-          minWidth: '100%',
-        },
-      ]}
-      provider={providerKey}
+      checkModel={'togethercomputer/alpaca-7b'}
+      provider={'togetherai'}
+      showCustomModelName
       title={
         <Together.Combine
           color={theme.isDarkMode ? theme.colorText : Together.colorPrimary}

package/src/app/settings/llm/ZeroOne/index.tsx

@@ -1,44 +1,18 @@
 import { ZeroOne } from '@lobehub/icons';
-import { Input } from 'antd';
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 
-import Checker from '../components/Checker';
 import ProviderConfig from '../components/ProviderConfig';
-import { LLMProviderApiTokenKey, LLMProviderConfigKey } from '../const';
-
-const providerKey = 'zeroone';
 
 const ZeroOneProvider = memo(() => {
-  const { t } = useTranslation('setting');
-
   const theme = useTheme();
 
   return (
     <ProviderConfig
-      configItems={[
-        {
-          children: (
-            <Input.Password
-              autoComplete={'new-password'}
-              placeholder={t('llm.ZeroOne.token.placeholder')}
-            />
-          ),
-          desc: t('llm.ZeroOne.token.desc'),
-          label: t('llm.ZeroOne.token.title'),
-          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
-        },
-        {
-          children: <Checker model={'yi-34b-chat-0205'} provider={ModelProvider.ZeroOne} />,
-          desc: t('llm.checker.desc'),
-          label: t('llm.checker.title'),
-          minWidth: '100%',
-        },
-      ]}
-      provider={providerKey}
+      checkModel={'yi-34b-chat-0205'}
+      provider={ModelProvider.ZeroOne}
       title={
         <ZeroOne.Combine
           color={theme.isDarkMode ? theme.colorText : ZeroOne.colorPrimary}

package/src/app/settings/llm/Zhipu/index.tsx

@@ -1,45 +1,17 @@
 import { Zhipu } from '@lobehub/icons';
-import { Input } from 'antd';
 import { useTheme } from 'antd-style';
 import { lighten } from 'polished';
 import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
 
-import { ModelProvider } from '@/libs/agent-runtime';
-
-import Checker from '../components/Checker';
 import ProviderConfig from '../components/ProviderConfig';
-import { LLMProviderApiTokenKey, LLMProviderConfigKey } from '../const';
-
-const providerKey = 'zhipu';
 
 const ZhipuProvider = memo(() => {
-  const { t } = useTranslation('setting');
-
   const theme = useTheme();
 
   return (
     <ProviderConfig
-      configItems={[
-        {
-          children: (
-            <Input.Password
-              autoComplete={'new-password'}
-              placeholder={t('llm.Zhipu.token.placeholder')}
-            />
-          ),
-          desc: t('llm.Zhipu.token.desc'),
-          label: t('llm.Zhipu.token.title'),
-          name: [LLMProviderConfigKey, providerKey, LLMProviderApiTokenKey],
-        },
-        {
-          children: <Checker model={'glm-3-turbo'} provider={ModelProvider.ZhiPu} />,
-          desc: t('llm.checker.desc'),
-          label: t('llm.checker.title'),
-          minWidth: '100%',
-        },
-      ]}
-      provider={providerKey}
+      checkModel={'glm-3-turbo'}
+      provider={'zhipu'}
       title={
         <Zhipu.Combine
           color={theme.isDarkMode ? lighten(0.1, Zhipu.colorPrimary) : Zhipu.colorPrimary}

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

@@ -1,36 +1,100 @@
-import { Form, type ItemGroup } from '@lobehub/ui';
-import type { FormItemProps } from '@lobehub/ui/es/Form/components/FormItem';
-import { Form as AntForm, Switch } from 'antd';
+import { Form, type FormItemProps, type ItemGroup } from '@lobehub/ui';
+import { Form as AntForm, Input, Switch } from 'antd';
 import { debounce } from 'lodash-es';
 import { ReactNode, memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useSyncSettings } from '@/app/settings/hooks/useSyncSettings';
+import {
+  LLMProviderApiTokenKey,
+  LLMProviderBaseUrlKey,
+  LLMProviderConfigKey,
+  LLMProviderCustomModelKey,
+} from '@/app/settings/llm/const';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
 import { modelProviderSelectors } from '@/store/global/selectors';
 import { GlobalLLMProviderKey } from '@/types/settings';
 
+import Checker from '../Checker';
+
 interface ProviderConfigProps {
   canDeactivate?: boolean;
-  configItems: FormItemProps[];
+  checkModel?: string;
+  checkerItem?: FormItemProps;
+  configItems?: FormItemProps[];
   provider: GlobalLLMProviderKey;
+  showApiKey?: boolean;
+  showCustomModelName?: boolean;
+  showEndpoint?: boolean;
   title: ReactNode;
 }
 
 const ProviderConfig = memo<ProviderConfigProps>(
-  ({ provider, canDeactivate = true, title, configItems }) => {
+  ({
+    provider,
+    showCustomModelName,
+    showEndpoint,
+    showApiKey = true,
+    checkModel,
+    canDeactivate = true,
+    title,
+    configItems,
+    checkerItem,
+  }) => {
+    const { t } = useTranslation('setting');
     const [form] = AntForm.useForm();
-    const [toggleProviderEnabled, setSettings] = useGlobalStore((s) => [
+    const [toggleProviderEnabled, setSettings, enabled] = useGlobalStore((s) => [
       s.toggleProviderEnabled,
       s.setSettings,
+      modelProviderSelectors.providerEnabled(provider)(s),
     ]);
 
-    const enabled = useGlobalStore(modelProviderSelectors.providerEnabled(provider));
-
     useSyncSettings(form);
 
+    const defaultFormItems = [
+      showApiKey && {
+        children: (
+          <Input.Password
+            autoComplete={'new-password'}
+            placeholder={t(`llm.${provider}.token.placeholder` as any)}
+          />
+        ),
+        desc: t(`llm.${provider}.token.desc` as any),
+        label: t(`llm.${provider}.token.title` as any),
+        name: [LLMProviderConfigKey, provider, LLMProviderApiTokenKey],
+      },
+      showEndpoint && {
+        children: (
+          <Input allowClear placeholder={t(`llm.${provider}.endpoint.placeholder` as any)} />
+        ),
+        desc: t(`llm.${provider}.endpoint.desc` as any),
+        label: t(`llm.${provider}.endpoint.title` as any),
+        name: [LLMProviderConfigKey, provider, LLMProviderBaseUrlKey],
+      },
+      showCustomModelName && {
+        children: (
+          <Input.TextArea
+            allowClear
+            placeholder={t(`llm.${provider}.customModelName.placeholder` as any)}
+            style={{ height: 100 }}
+          />
+        ),
+        desc: t(`llm.${provider}.customModelName.desc` as any),
+        label: t(`llm.${provider}.customModelName.title` as any),
+        name: [LLMProviderConfigKey, provider, LLMProviderCustomModelKey],
+      },
+      checkerItem ?? {
+        children: <Checker model={checkModel!} provider={provider} />,
+        desc: t('llm.checker.desc'),
+        label: t('llm.checker.title'),
+        minWidth: '100%',
+      },
+    ].filter(Boolean) as FormItemProps[];
+
     const model: ItemGroup = {
-      children: configItems,
+      children: configItems ?? defaultFormItems,
+
       defaultActive: canDeactivate ? enabled : undefined,
       extra: canDeactivate ? (
         <Switch

package/src/app/settings/llm/const.ts

@@ -11,3 +11,9 @@ export const LLMProviderApiTokenKey = 'apiKey';
  * equal OPENAI_PROXY_URL
  */
 export const LLMProviderBaseUrlKey = 'endpoint';
+
+/**
+ * we use this key to define the custom model name
+ * equal CUSTOM_MODELS
+ */
+export const LLMProviderCustomModelKey = 'customModelName';

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

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

package/src/locales/default/error.ts

@@ -116,7 +116,7 @@ export default {
       Bedrock: {
         customRegion: '自定义服务区域',
         description:
-          '输入你的 Aws AccessKeyId / SecretAccessKey 即可开始会话。应用不会记录你的鉴权配置',
+          '输入你的 AWS AccessKeyId / SecretAccessKey 即可开始会话。应用不会记录你的鉴权配置',
         title: '使用自定义 Bedrock 鉴权信息',
       },
       Google: {