♻️ refactor: rename the key to enabledModels

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

@@ -10,8 +10,8 @@ import { useGlobalStore } from '@/store/global';
 import { modelConfigSelectors } from '@/store/global/selectors';
 
 import Checker from '../components/Checker';
-import CustomModelSelect from '../components/CustomModelList';
 import ProviderConfig from '../components/ProviderConfig';
+import ProviderModelListSelect from '../components/ProviderModelList';
 import { LLMProviderConfigKey } from '../const';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -67,14 +67,14 @@ const LLM = memo(() => {
         },
         {
           children: (
-            <CustomModelSelect
+            <ProviderModelListSelect
               placeholder={t('llm.openai.customModelName.placeholder')}
               provider={'openai'}
             />
           ),
           desc: t('llm.openai.customModelName.desc'),
           label: t('llm.openai.customModelName.title'),
-          name: [LLMProviderConfigKey, providerKey, 'customModelName'],
+          name: [LLMProviderConfigKey, providerKey, 'enabledModels'],
         },
         {
           children: <Switch />,

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

@@ -18,7 +18,7 @@ import { modelConfigSelectors } from '@/store/global/selectors';
 import { GlobalLLMProviderKey } from '@/types/settings';
 
 import Checker from '../Checker';
-import CustomModelSelect from '../CustomModelList';
+import ProviderModelListSelect from '../ProviderModelList';
 
 interface ProviderConfigProps {
   canDeactivate?: boolean;
@@ -88,7 +88,10 @@ const ProviderConfig = memo<ProviderConfigProps>(
       },
       {
         children: (
-          <CustomModelSelect placeholder={t('llm.modelList.placeholder')} provider={provider} />
+          <ProviderModelListSelect
+            placeholder={t('llm.modelList.placeholder')}
+            provider={provider}
+          />
         ),
         desc: t('llm.modelList.desc'),
         label: t('llm.modelList.title'),

src/app/settings/llm/components/ProviderModelList/CustomModelOption.tsx

@@ -0,0 +1,30 @@
+import { Typography } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo } from 'react';
+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/selectors';
+
+const CustomModelOption = memo<{ displayName: string; id: string }>(({ displayName, id: id }) => {
+  const model = useGlobalStore((s) => modelProviderSelectors.modelCardById(id)(s), isEqual);
+
+  return (
+    <Flexbox align={'center'} gap={8} horizontal>
+      <ModelIcon model={id} size={32} />
+      <Flexbox>
+        <Flexbox align={'center'} gap={8} horizontal>
+          {displayName}
+          <ModelInfoTags directionReverse placement={'top'} {...model!} />
+        </Flexbox>
+        <Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
+          {id}
+        </Typography.Text>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default CustomModelOption;

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

@@ -8,7 +8,7 @@ import { ModelInfoTags } from '@/components/ModelSelect';
 import { useGlobalStore } from '@/store/global';
 import { modelProviderSelectors } from '@/store/global/selectors';
 
-export const OptionRender = memo<{ displayName: string; id: string }>(({ displayName, id: id }) => {
+const OptionRender = memo<{ displayName: string; id: string }>(({ displayName, id: id }) => {
   const model = useGlobalStore((s) => modelProviderSelectors.modelCardById(id)(s), isEqual);
 
   return (
@@ -26,3 +26,5 @@ export const OptionRender = memo<{ displayName: string; id: string }>(({ display
     </Flexbox>
   );
 });
+
+export default OptionRender;

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

@@ -0,0 +1,73 @@
+import { Select } from 'antd';
+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 { modelConfigSelectors, modelProviderSelectors } from '@/store/global/selectors';
+import { GlobalLLMProviderKey } from '@/types/settings';
+
+import CustomModelOption from './CustomModelOption';
+import OptionRender from './Option';
+
+const popup = css`
+  &.ant-select-dropdown {
+    .ant-select-item-option-selected {
+      font-weight: normal;
+    }
+  }
+`;
+
+interface CustomModelSelectProps {
+  onChange?: (value: string[]) => void;
+  placeholder?: string;
+  provider: string;
+  value?: string[];
+}
+
+const ProviderModelListSelect = memo<CustomModelSelectProps>(
+  ({ provider, placeholder, onChange }) => {
+    const providerCard = useGlobalStore(
+      (s) => modelProviderSelectors.providerModelList(s).find((s) => s.id === provider),
+      isEqual,
+    );
+    const providerConfig = useGlobalStore((s) =>
+      modelConfigSelectors.providerConfig(provider as GlobalLLMProviderKey)(s),
+    );
+
+    const defaultEnableModel = providerCard ? filterEnabledModels(providerCard) : [];
+
+    const chatModels = providerCard?.chatModels || [];
+
+    return (
+      <Select<string[]>
+        allowClear
+        defaultValue={defaultEnableModel}
+        mode="tags"
+        onChange={(value) => {
+          onChange?.(value.filter(Boolean));
+        }}
+        optionFilterProp="label"
+        optionRender={({ label, value }) => {
+          console.log(value);
+          // model is in the chatModels
+          if (chatModels.some((c) => c.id === value))
+            return <OptionRender displayName={label as string} id={value as string} />;
+
+          // model is user defined in client
+          return <CustomModelOption displayName={label as string} id={value as string} />;
+        }}
+        options={chatModels.map((model) => ({
+          label: model.displayName || model.id,
+          value: model.id,
+        }))}
+        placeholder={placeholder}
+        popupClassName={cx(popup)}
+        value={providerConfig?.enabledModels.filter(Boolean)}
+      />
+    );
+  },
+);
+
+export default ProviderModelListSelect;

src/app/settings/llm/const.ts

@@ -22,4 +22,4 @@ export const LLMProviderCustomModelKey = 'customModelName';
  * we use this key to define the custom model name
  * equal CUSTOM_MODELS
  */
-export const LLMProviderModelListKey = 'models';
+export const LLMProviderModelListKey = 'enabledModels';

src/const/settings/index.ts

@@ -66,7 +66,7 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
   anthropic: {
     apiKey: '',
     enabled: false,
-    models: filterEnabledModels(AnthropicProvider),
+    enabledModels: filterEnabledModels(AnthropicProvider),
   },
   azure: {
     apiKey: '',
@@ -84,22 +84,22 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
   google: {
     apiKey: '',
     enabled: false,
-    models: filterEnabledModels(GoogleProvider),
+    enabledModels: filterEnabledModels(GoogleProvider),
   },
   groq: {
     apiKey: '',
     enabled: false,
-    models: filterEnabledModels(GroqProvider),
+    enabledModels: filterEnabledModels(GroqProvider),
   },
   mistral: {
     apiKey: '',
     enabled: false,
-    models: filterEnabledModels(MistralProvider),
+    enabledModels: filterEnabledModels(MistralProvider),
   },
   moonshot: {
     apiKey: '',
     enabled: false,
-    models: filterEnabledModels(MoonshotProvider),
+    enabledModels: filterEnabledModels(MoonshotProvider),
   },
   ollama: {
     enabled: false,
@@ -119,7 +119,7 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
   perplexity: {
     apiKey: '',
     enabled: false,
-    models: filterEnabledModels(PerplexityProvider),
+    enabledModels: filterEnabledModels(PerplexityProvider),
   },
   togetherai: {
     apiKey: '',
@@ -129,12 +129,12 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
   zeroone: {
     apiKey: '',
     enabled: false,
-    models: filterEnabledModels(ZeroOneProvider),
+    enabledModels: filterEnabledModels(ZeroOneProvider),
   },
   zhipu: {
     apiKey: '',
     enabled: false,
-    models: filterEnabledModels(ZhiPuProvider),
+    enabledModels: filterEnabledModels(ZhiPuProvider),
   },
 };
 

src/store/global/slices/settings/selectors/modelConfig.ts

@@ -20,11 +20,8 @@ const providerEnabled = (provider: GlobalLLMProviderKey) => (s: GlobalStore) =>
   return currentSettings(s).languageModel[provider]?.enabled || false;
 };
 
-const providerEnableModels =
-  (provider: string) =>
-  (s: GlobalStore): string[] | undefined => {
-    return providerConfig(provider)(s)?.models;
-  };
+const providerEnableModels = (provider: string) => (s: GlobalStore) =>
+  providerConfig(provider)(s)?.enabledModels;
 
 const openAIConfig = (s: GlobalStore) => modelProvider(s).openAI;
 

src/types/llm.ts

@@ -9,6 +9,9 @@ export interface ChatModelCard {
    * whether model supports function call
    */
   functionCall?: boolean;
+  /**
+   * whether the model is visible or hidden
+   */
   hidden?: boolean;
   id: string;
   /**

src/types/settings/modelProvider.ts

@@ -1,10 +1,16 @@
+import { ChatModelCard } from '@/types/llm';
+
 export type CustomModels = { displayName: string; id: string }[];
 
 export interface GeneralModelProviderConfig {
   apiKey?: string;
+  customModelCards?: ChatModelCard[];
   enabled: boolean;
+  /**
+   * enabled models id
+   */
+  enabledModels: string[];
   endpoint?: string;
-  models: string[];
 }
 
 export interface OpenAIConfig {