From ebfa0aa03c757c6d95fac877fa8bf82b169c30f5 Mon Sep 17 00:00:00 2001 From: arvinxx Date: Sun, 7 Apr 2024 16:52:55 +0800 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20rename=20the?= =?UTF-8?q?=20key=20to=20enabledModels?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/settings/llm/OpenAI/index.tsx | 6 +- .../llm/components/CustomModelList/index.tsx | 63 ---------------- .../llm/components/ProviderConfig/index.tsx | 7 +- .../ProviderModelList/CustomModelOption.tsx | 30 ++++++++ .../Option.tsx | 4 +- .../components/ProviderModelList/index.tsx | 73 +++++++++++++++++++ src/app/settings/llm/const.ts | 2 +- src/const/settings/index.ts | 16 ++-- .../slices/settings/selectors/modelConfig.ts | 7 +- src/types/llm.ts | 3 + src/types/settings/modelProvider.ts | 8 +- 11 files changed, 135 insertions(+), 84 deletions(-) delete mode 100644 src/app/settings/llm/components/CustomModelList/index.tsx create mode 100644 src/app/settings/llm/components/ProviderModelList/CustomModelOption.tsx rename src/app/settings/llm/components/{CustomModelList => ProviderModelList}/Option.tsx (87%) create mode 100644 src/app/settings/llm/components/ProviderModelList/index.tsx diff --git a/src/app/settings/llm/OpenAI/index.tsx b/src/app/settings/llm/OpenAI/index.tsx index e60beb94a524..ceb1475d0207 100644 --- a/src/app/settings/llm/OpenAI/index.tsx +++ b/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: ( - ), desc: t('llm.openai.customModelName.desc'), label: t('llm.openai.customModelName.title'), - name: [LLMProviderConfigKey, providerKey, 'customModelName'], + name: [LLMProviderConfigKey, providerKey, 'enabledModels'], }, { children: , diff --git a/src/app/settings/llm/components/CustomModelList/index.tsx b/src/app/settings/llm/components/CustomModelList/index.tsx deleted file mode 100644 index f68794cd4ef1..000000000000 --- a/src/app/settings/llm/components/CustomModelList/index.tsx +++ /dev/null @@ -1,63 +0,0 @@ -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 { 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 CustomModelSelect = memo(({ 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) : []; - - return ( - - allowClear - defaultValue={defaultEnableModel} - mode="tags" - onChange={(value) => { - onChange?.(value.filter(Boolean)); - }} - optionFilterProp="label" - optionRender={({ label, value }) => ( - - )} - options={providerCard?.chatModels.map((model) => ({ - label: model.displayName || model.id, - value: model.id, - }))} - placeholder={placeholder} - popupClassName={cx(popup)} - popupMatchSelectWidth={false} - value={providerConfig?.models.filter(Boolean)} - /> - ); -}); - -export default CustomModelSelect; diff --git a/src/app/settings/llm/components/ProviderConfig/index.tsx b/src/app/settings/llm/components/ProviderConfig/index.tsx index 4d8406e8c70f..0d604f04804f 100644 --- a/src/app/settings/llm/components/ProviderConfig/index.tsx +++ b/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( }, { children: ( - + ), desc: t('llm.modelList.desc'), label: t('llm.modelList.title'), diff --git a/src/app/settings/llm/components/ProviderModelList/CustomModelOption.tsx b/src/app/settings/llm/components/ProviderModelList/CustomModelOption.tsx new file mode 100644 index 000000000000..0e9a1640e1b5 --- /dev/null +++ b/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 ( + + + + + {displayName} + + + + {id} + + + + ); +}); + +export default CustomModelOption; diff --git a/src/app/settings/llm/components/CustomModelList/Option.tsx b/src/app/settings/llm/components/ProviderModelList/Option.tsx similarity index 87% rename from src/app/settings/llm/components/CustomModelList/Option.tsx rename to src/app/settings/llm/components/ProviderModelList/Option.tsx index d20b98a4f117..306efbe2b60e 100644 --- a/src/app/settings/llm/components/CustomModelList/Option.tsx +++ b/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 ); }); + +export default OptionRender; diff --git a/src/app/settings/llm/components/ProviderModelList/index.tsx b/src/app/settings/llm/components/ProviderModelList/index.tsx new file mode 100644 index 000000000000..14b87ab3716c --- /dev/null +++ b/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( + ({ 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 ( + + 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 ; + + // model is user defined in client + return ; + }} + 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; diff --git a/src/app/settings/llm/const.ts b/src/app/settings/llm/const.ts index f6ef361ddcd7..f439d8e0c3db 100644 --- a/src/app/settings/llm/const.ts +++ b/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'; diff --git a/src/const/settings/index.ts b/src/const/settings/index.ts index cd990c1df93b..ff8c7a40b543 100644 --- a/src/const/settings/index.ts +++ b/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), }, }; diff --git a/src/store/global/slices/settings/selectors/modelConfig.ts b/src/store/global/slices/settings/selectors/modelConfig.ts index d5f60530f74a..e98e97443283 100644 --- a/src/store/global/slices/settings/selectors/modelConfig.ts +++ b/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; diff --git a/src/types/llm.ts b/src/types/llm.ts index 3d8ff2d19da0..8e86deb5e8db 100644 --- a/src/types/llm.ts +++ b/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; /** diff --git a/src/types/settings/modelProvider.ts b/src/types/settings/modelProvider.ts index 5a8e85bc537f..f98568fe99eb 100644 --- a/src/types/settings/modelProvider.ts +++ b/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 {