♻️ refactor: refactor the model config selector

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import Checker from '../components/Checker';
 import CustomModelSelect from '../components/CustomModelList';
@@ -31,7 +31,7 @@ const LLM = memo(() => {
   const { t } = useTranslation('setting');
   const { styles } = useStyles();
 
-  const [useAzure] = useGlobalStore((s) => [modelProviderSelectors.enableAzure(s)]);
+  const [useAzure] = useGlobalStore((s) => [modelConfigSelectors.enableAzure(s)]);
 
   return (
     <ProviderConfig

src/app/settings/llm/components/CustomModelList/Option.tsx

@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
 import ModelIcon from '@/components/ModelIcon';
 import { ModelInfoTags } from '@/components/ModelSelect';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/slices/settings/selectors';
+import { modelProviderSelectors } from '@/store/global/selectors';
 
 export const OptionRender = memo<{ displayName: string; id: string }>(({ displayName, id: id }) => {
   const model = useGlobalStore((s) => modelProviderSelectors.modelCardById(id)(s), isEqual);

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

@@ -3,8 +3,9 @@ import { css, cx } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
+import { filterEnabledModels } from '@/config/modelProviders';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import { OptionRender } from './Option';
 
@@ -23,10 +24,10 @@ interface CustomModelSelectProps {
 
 const CustomModelSelect = memo<CustomModelSelectProps>(({ provider, placeholder }) => {
   const providerCard = useGlobalStore(
-    (s) => modelProviderSelectors.modelSelectList(s).find((s) => s.id === provider),
+    (s) => modelConfigSelectors.modelSelectList(s).find((s) => s.id === provider),
     isEqual,
   );
-  const defaultEnableModel = providerCard?.chatModels.filter((v) => !v.hidden).map((m) => m.id);
+  const defaultEnableModel = providerCard ? filterEnabledModels(providerCard) : [];
 
   return (
     <Select

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

@@ -10,10 +10,11 @@ import {
   LLMProviderBaseUrlKey,
   LLMProviderConfigKey,
   LLMProviderCustomModelKey,
+  LLMProviderModelListKey,
 } from '@/app/settings/llm/const';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 import { GlobalLLMProviderKey } from '@/types/settings';
 
 import Checker from '../Checker';
@@ -34,7 +35,7 @@ interface ProviderConfigProps {
 const ProviderConfig = memo<ProviderConfigProps>(
   ({
     provider,
-    showCustomModelName = true,
+    showCustomModelName = false,
     showEndpoint,
     showApiKey = true,
     checkModel,
@@ -48,7 +49,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
     const [toggleProviderEnabled, setSettings, enabled] = useGlobalStore((s) => [
       s.toggleProviderEnabled,
       s.setSettings,
-      modelProviderSelectors.providerEnabled(provider)(s),
+      modelConfigSelectors.providerEnabled(provider)(s),
     ]);
 
     useSyncSettings(form);
@@ -75,14 +76,23 @@ const ProviderConfig = memo<ProviderConfigProps>(
       },
       showCustomModelName && {
         children: (
-          <CustomModelSelect
+          <Input.TextArea
+            allowClear
             placeholder={t(`llm.${provider}.customModelName.placeholder` as any)}
-            provider={provider}
+            style={{ height: 100 }}
           />
         ),
+        desc: t(`llm.${provider}.customModelName.desc` as any),
+        label: t(`llm.${provider}.customModelName.title` as any),
+        name: [LLMProviderConfigKey, provider, LLMProviderCustomModelKey],
+      },
+      {
+        children: (
+          <CustomModelSelect placeholder={t('llm.modelList.placeholder')} provider={provider} />
+        ),
         desc: t('llm.modelList.desc'),
         label: t('llm.modelList.title'),
-        name: [LLMProviderConfigKey, provider, LLMProviderCustomModelKey],
+        name: [LLMProviderConfigKey, provider, LLMProviderModelListKey],
       },
       checkerItem ?? {
         children: <Checker model={checkModel!} provider={provider} />,

src/app/settings/llm/const.ts

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

src/config/modelProviders/google.ts

@@ -42,14 +42,6 @@ const Google: ModelProviderCard = {
       tokens: 16_384,
       vision: true,
     },
-    {
-      description: 'The best model for scaling across a wide range of tasks',
-      displayName: 'Gemini 1.0 Pro',
-      hidden: true,
-      id: '1.0-pro',
-      maxOutput: 2048,
-      tokens: 32_768,
-    },
     {
       description:
         'The best model for scaling across a wide range of tasks. This is a stable model that supports tuning.',

src/config/modelProviders/index.ts

@@ -1,4 +1,4 @@
-import { ChatModelCard } from '@/types/llm';
+import { ChatModelCard, ModelProviderCard } from '@/types/llm';
 
 import AnthropicProvider from './anthropic';
 import BedrockProvider from './bedrock';
@@ -30,6 +30,10 @@ export const LOBE_DEFAULT_MODEL_LIST: ChatModelCard[] = [
   ZeroOneProvider.chatModels,
 ].flat();
 
+export const filterEnabledModels = (provider: ModelProviderCard) => {
+  return provider.chatModels.filter((v) => !v.hidden).map((m) => m.id);
+};
+
 export { default as AnthropicProvider } from './anthropic';
 export { default as BedrockProvider } from './bedrock';
 export { default as GoogleProvider } from './google';

src/const/settings.ts → src/const/settings/index.ts

@@ -1,3 +1,19 @@
+import {
+  AnthropicProvider,
+  BedrockProvider,
+  GoogleProvider,
+  GroqProvider,
+  MistralProvider,
+  MoonshotProvider,
+  OllamaProvider,
+  OpenAIProvider,
+  OpenRouterProvider,
+  PerplexityProvider,
+  TogetherAIProvider,
+  ZeroOneProvider,
+  ZhiPuProvider,
+  filterEnabledModels,
+} from '@/config/modelProviders';
 import { DEFAULT_AGENT_META } from '@/const/meta';
 import { ModelProvider } from '@/libs/agent-runtime';
 import { LobeAgentConfig, LobeAgentTTSConfig } from '@/types/agent';
@@ -50,6 +66,7 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
   anthropic: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(AnthropicProvider),
   },
   azure: {
     apiKey: '',
@@ -60,53 +77,64 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
   bedrock: {
     accessKeyId: '',
     enabled: false,
+    models: filterEnabledModels(BedrockProvider),
     region: 'us-east-1',
     secretAccessKey: '',
   },
   google: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(GoogleProvider),
   },
   groq: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(GroqProvider),
   },
   mistral: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(MistralProvider),
   },
   moonshot: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(MoonshotProvider),
   },
   ollama: {
     enabled: false,
     endpoint: '',
+    models: filterEnabledModels(OllamaProvider),
   },
   openAI: {
     OPENAI_API_KEY: '',
     enabled: true,
-    models: [],
+    models: filterEnabledModels(OpenAIProvider),
   },
   openrouter: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(OpenRouterProvider),
   },
   perplexity: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(PerplexityProvider),
   },
   togetherai: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(TogetherAIProvider),
   },
   zeroone: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(ZeroOneProvider),
   },
   zhipu: {
     apiKey: '',
     enabled: false,
+    models: filterEnabledModels(ZhiPuProvider),
   },
 };
 

src/features/AgentSetting/AgentConfig/ModelSelect.tsx

@@ -5,7 +5,7 @@ import { memo, useMemo } from 'react';
 
 import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 import { ModelProviderCard } from '@/types/llm';
 
 import { useStore } from '../store';
@@ -25,7 +25,7 @@ interface ModelOption {
 
 const ModelSelect = memo(() => {
   const [model, updateConfig] = useStore((s) => [s.config.model, s.setAgentConfig]);
-  const select = useGlobalStore(modelProviderSelectors.modelSelectList, isEqual);
+  const select = useGlobalStore(modelConfigSelectors.modelSelectList, isEqual);
   const { styles } = useStyles();
 
   const enabledList = select.filter((s) => s.enabled);

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import { FormAction } from '../style';
 
@@ -14,7 +14,7 @@ const AnthropicForm = memo(() => {
   // const [showProxy, setShow] = useState(false);
 
   const [apiKey, setConfig] = useGlobalStore((s) => [
-    modelProviderSelectors.anthropicAPIKey(s),
+    modelConfigSelectors.anthropicAPIKey(s),
     s.setModelProviderConfig,
   ]);
 

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

@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import { FormAction } from '../style';
 
@@ -17,9 +17,9 @@ const BedrockForm = memo(() => {
   const [showRegion, setShow] = useState(false);
 
   const [accessKeyId, secretAccessKey, region, setConfig] = useGlobalStore((s) => [
-    modelProviderSelectors.bedrockConfig(s).accessKeyId,
-    modelProviderSelectors.bedrockConfig(s).secretAccessKey,
-    modelProviderSelectors.bedrockConfig(s).region,
+    modelConfigSelectors.bedrockConfig(s).accessKeyId,
+    modelConfigSelectors.bedrockConfig(s).secretAccessKey,
+    modelConfigSelectors.bedrockConfig(s).region,
     s.setModelProviderConfig,
   ]);
 

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import { FormAction } from '../style';
 
@@ -14,7 +14,7 @@ const GoogleForm = memo(() => {
   // const [showProxy, setShow] = useState(false);
 
   const [apiKey, setConfig] = useGlobalStore((s) => [
-    modelProviderSelectors.googleAPIKey(s),
+    modelConfigSelectors.googleAPIKey(s),
     // modelProviderSelectors.openAIProxyUrl(s),
     s.setModelProviderConfig,
   ]);

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import { FormAction } from '../style';
 
@@ -14,7 +14,7 @@ const GroqForm = memo(() => {
   // const [showProxy, setShow] = useState(false);
 
   const [apiKey, setConfig] = useGlobalStore((s) => [
-    modelProviderSelectors.groqAPIKey(s),
+    modelConfigSelectors.groqAPIKey(s),
     s.setModelProviderConfig,
   ]);
 

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import { FormAction } from '../style';
 
@@ -14,7 +14,7 @@ const MistralForm = memo(() => {
   // const [showProxy, setShow] = useState(false);
 
   const [apiKey, setConfig] = useGlobalStore((s) => [
-    modelProviderSelectors.mistralAPIKey(s),
+    modelConfigSelectors.mistralAPIKey(s),
     s.setModelProviderConfig,
   ]);
 

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { ModelProvider } from '@/libs/agent-runtime';
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import { FormAction } from '../style';
 
@@ -14,7 +14,7 @@ const MoonshotForm = memo(() => {
   // const [showProxy, setShow] = useState(false);
 
   const [apiKey, setConfig] = useGlobalStore((s) => [
-    modelProviderSelectors.moonshotAPIKey(s),
+    modelConfigSelectors.moonshotAPIKey(s),
     s.setModelProviderConfig,
   ]);
 

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

@@ -7,7 +7,7 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useGlobalStore } from '@/store/global';
-import { modelProviderSelectors } from '@/store/global/selectors';
+import { modelConfigSelectors } from '@/store/global/selectors';
 
 import { FormAction } from '../style';
 
@@ -16,8 +16,8 @@ const OpenAIForm = memo(() => {
   const [showProxy, setShow] = useState(false);
 
   const [apiKey, proxyUrl, setConfig] = useGlobalStore((s) => [
-    modelProviderSelectors.openAIAPIKey(s),
-    modelProviderSelectors.openAIProxyUrl(s),
+    modelConfigSelectors.openAIAPIKey(s),
+    modelConfigSelectors.openAIProxyUrl(s),
     s.setModelProviderConfig,
   ]);
   const theme = useTheme();