Skip to content

Commit d865ca1

Browse files
arvinxxarvinxx
committed
♻️ refactor: refactor the model config selector
1 parent e59635f commit d865ca1

File tree

32 files changed

+312
-302
lines changed

32 files changed

+312
-302
lines changed

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
77

88
import { ModelProvider } from '@/libs/agent-runtime';
99
import { useGlobalStore } from '@/store/global';
10-
import { modelProviderSelectors } from '@/store/global/selectors';
10+
import { modelConfigSelectors } from '@/store/global/selectors';
1111

1212
import Checker from '../components/Checker';
1313
import CustomModelSelect from '../components/CustomModelList';
@@ -31,7 +31,7 @@ const LLM = memo(() => {
3131
const { t } = useTranslation('setting');
3232
const { styles } = useStyles();
3333

34-
const [useAzure] = useGlobalStore((s) => [modelProviderSelectors.enableAzure(s)]);
34+
const [useAzure] = useGlobalStore((s) => [modelConfigSelectors.enableAzure(s)]);
3535

3636
return (
3737
<ProviderConfig

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Flexbox } from 'react-layout-kit';
66
import ModelIcon from '@/components/ModelIcon';
77
import { ModelInfoTags } from '@/components/ModelSelect';
88
import { useGlobalStore } from '@/store/global';
9-
import { modelProviderSelectors } from '@/store/global/slices/settings/selectors';
9+
import { modelProviderSelectors } from '@/store/global/selectors';
1010

1111
export const OptionRender = memo<{ displayName: string; id: string }>(({ displayName, id: id }) => {
1212
const model = useGlobalStore((s) => modelProviderSelectors.modelCardById(id)(s), isEqual);

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import { css, cx } from 'antd-style';
33
import isEqual from 'fast-deep-equal';
44
import { memo } from 'react';
55

6+
import { filterEnabledModels } from '@/config/modelProviders';
67
import { useGlobalStore } from '@/store/global';
7-
import { modelProviderSelectors } from '@/store/global/selectors';
8+
import { modelConfigSelectors } from '@/store/global/selectors';
89

910
import { OptionRender } from './Option';
1011

@@ -23,10 +24,10 @@ interface CustomModelSelectProps {
2324

2425
const CustomModelSelect = memo<CustomModelSelectProps>(({ provider, placeholder }) => {
2526
const providerCard = useGlobalStore(
26-
(s) => modelProviderSelectors.modelSelectList(s).find((s) => s.id === provider),
27+
(s) => modelConfigSelectors.modelSelectList(s).find((s) => s.id === provider),
2728
isEqual,
2829
);
29-
const defaultEnableModel = providerCard?.chatModels.filter((v) => !v.hidden).map((m) => m.id);
30+
const defaultEnableModel = providerCard ? filterEnabledModels(providerCard) : [];
3031

3132
return (
3233
<Select

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

+16-6
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,11 @@ import {
1010
LLMProviderBaseUrlKey,
1111
LLMProviderConfigKey,
1212
LLMProviderCustomModelKey,
13+
LLMProviderModelListKey,
1314
} from '@/app/settings/llm/const';
1415
import { FORM_STYLE } from '@/const/layoutTokens';
1516
import { useGlobalStore } from '@/store/global';
16-
import { modelProviderSelectors } from '@/store/global/selectors';
17+
import { modelConfigSelectors } from '@/store/global/selectors';
1718
import { GlobalLLMProviderKey } from '@/types/settings';
1819

1920
import Checker from '../Checker';
@@ -34,7 +35,7 @@ interface ProviderConfigProps {
3435
const ProviderConfig = memo<ProviderConfigProps>(
3536
({
3637
provider,
37-
showCustomModelName = true,
38+
showCustomModelName = false,
3839
showEndpoint,
3940
showApiKey = true,
4041
checkModel,
@@ -48,7 +49,7 @@ const ProviderConfig = memo<ProviderConfigProps>(
4849
const [toggleProviderEnabled, setSettings, enabled] = useGlobalStore((s) => [
4950
s.toggleProviderEnabled,
5051
s.setSettings,
51-
modelProviderSelectors.providerEnabled(provider)(s),
52+
modelConfigSelectors.providerEnabled(provider)(s),
5253
]);
5354

5455
useSyncSettings(form);
@@ -75,14 +76,23 @@ const ProviderConfig = memo<ProviderConfigProps>(
7576
},
7677
showCustomModelName && {
7778
children: (
78-
<CustomModelSelect
79+
<Input.TextArea
80+
allowClear
7981
placeholder={t(`llm.${provider}.customModelName.placeholder` as any)}
80-
provider={provider}
82+
style={{ height: 100 }}
8183
/>
8284
),
85+
desc: t(`llm.${provider}.customModelName.desc` as any),
86+
label: t(`llm.${provider}.customModelName.title` as any),
87+
name: [LLMProviderConfigKey, provider, LLMProviderCustomModelKey],
88+
},
89+
{
90+
children: (
91+
<CustomModelSelect placeholder={t('llm.modelList.placeholder')} provider={provider} />
92+
),
8393
desc: t('llm.modelList.desc'),
8494
label: t('llm.modelList.title'),
85-
name: [LLMProviderConfigKey, provider, LLMProviderCustomModelKey],
95+
name: [LLMProviderConfigKey, provider, LLMProviderModelListKey],
8696
},
8797
checkerItem ?? {
8898
children: <Checker model={checkModel!} provider={provider} />,

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

+6
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,9 @@ export const LLMProviderBaseUrlKey = 'endpoint';
1717
* equal CUSTOM_MODELS
1818
*/
1919
export const LLMProviderCustomModelKey = 'customModelName';
20+
21+
/**
22+
* we use this key to define the custom model name
23+
* equal CUSTOM_MODELS
24+
*/
25+
export const LLMProviderModelListKey = 'models';

‎src/config/modelProviders/google.ts

-8
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,6 @@ const Google: ModelProviderCard = {
4242
tokens: 16_384,
4343
vision: true,
4444
},
45-
{
46-
description: 'The best model for scaling across a wide range of tasks',
47-
displayName: 'Gemini 1.0 Pro',
48-
hidden: true,
49-
id: '1.0-pro',
50-
maxOutput: 2048,
51-
tokens: 32_768,
52-
},
5345
{
5446
description:
5547
'The best model for scaling across a wide range of tasks. This is a stable model that supports tuning.',

‎src/config/modelProviders/index.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChatModelCard } from '@/types/llm';
1+
import { ChatModelCard, ModelProviderCard } from '@/types/llm';
22

33
import AnthropicProvider from './anthropic';
44
import BedrockProvider from './bedrock';
@@ -30,6 +30,10 @@ export const LOBE_DEFAULT_MODEL_LIST: ChatModelCard[] = [
3030
ZeroOneProvider.chatModels,
3131
].flat();
3232

33+
export const filterEnabledModels = (provider: ModelProviderCard) => {
34+
return provider.chatModels.filter((v) => !v.hidden).map((m) => m.id);
35+
};
36+
3337
export { default as AnthropicProvider } from './anthropic';
3438
export { default as BedrockProvider } from './bedrock';
3539
export { default as GoogleProvider } from './google';

‎src/const/settings.ts renamed to ‎src/const/settings/index.ts

+29-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,19 @@
1+
import {
2+
AnthropicProvider,
3+
BedrockProvider,
4+
GoogleProvider,
5+
GroqProvider,
6+
MistralProvider,
7+
MoonshotProvider,
8+
OllamaProvider,
9+
OpenAIProvider,
10+
OpenRouterProvider,
11+
PerplexityProvider,
12+
TogetherAIProvider,
13+
ZeroOneProvider,
14+
ZhiPuProvider,
15+
filterEnabledModels,
16+
} from '@/config/modelProviders';
117
import { DEFAULT_AGENT_META } from '@/const/meta';
218
import { ModelProvider } from '@/libs/agent-runtime';
319
import { LobeAgentConfig, LobeAgentTTSConfig } from '@/types/agent';
@@ -50,6 +66,7 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
5066
anthropic: {
5167
apiKey: '',
5268
enabled: false,
69+
models: filterEnabledModels(AnthropicProvider),
5370
},
5471
azure: {
5572
apiKey: '',
@@ -60,53 +77,64 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
6077
bedrock: {
6178
accessKeyId: '',
6279
enabled: false,
80+
models: filterEnabledModels(BedrockProvider),
6381
region: 'us-east-1',
6482
secretAccessKey: '',
6583
},
6684
google: {
6785
apiKey: '',
6886
enabled: false,
87+
models: filterEnabledModels(GoogleProvider),
6988
},
7089
groq: {
7190
apiKey: '',
7291
enabled: false,
92+
models: filterEnabledModels(GroqProvider),
7393
},
7494
mistral: {
7595
apiKey: '',
7696
enabled: false,
97+
models: filterEnabledModels(MistralProvider),
7798
},
7899
moonshot: {
79100
apiKey: '',
80101
enabled: false,
102+
models: filterEnabledModels(MoonshotProvider),
81103
},
82104
ollama: {
83105
enabled: false,
84106
endpoint: '',
107+
models: filterEnabledModels(OllamaProvider),
85108
},
86109
openAI: {
87110
OPENAI_API_KEY: '',
88111
enabled: true,
89-
models: [],
112+
models: filterEnabledModels(OpenAIProvider),
90113
},
91114
openrouter: {
92115
apiKey: '',
93116
enabled: false,
117+
models: filterEnabledModels(OpenRouterProvider),
94118
},
95119
perplexity: {
96120
apiKey: '',
97121
enabled: false,
122+
models: filterEnabledModels(PerplexityProvider),
98123
},
99124
togetherai: {
100125
apiKey: '',
101126
enabled: false,
127+
models: filterEnabledModels(TogetherAIProvider),
102128
},
103129
zeroone: {
104130
apiKey: '',
105131
enabled: false,
132+
models: filterEnabledModels(ZeroOneProvider),
106133
},
107134
zhipu: {
108135
apiKey: '',
109136
enabled: false,
137+
models: filterEnabledModels(ZhiPuProvider),
110138
},
111139
};
112140

‎src/features/AgentSetting/AgentConfig/ModelSelect.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { memo, useMemo } from 'react';
55

66
import { ModelItemRender, ProviderItemRender } from '@/components/ModelSelect';
77
import { useGlobalStore } from '@/store/global';
8-
import { modelProviderSelectors } from '@/store/global/selectors';
8+
import { modelConfigSelectors } from '@/store/global/selectors';
99
import { ModelProviderCard } from '@/types/llm';
1010

1111
import { useStore } from '../store';
@@ -25,7 +25,7 @@ interface ModelOption {
2525

2626
const ModelSelect = memo(() => {
2727
const [model, updateConfig] = useStore((s) => [s.config.model, s.setAgentConfig]);
28-
const select = useGlobalStore(modelProviderSelectors.modelSelectList, isEqual);
28+
const select = useGlobalStore(modelConfigSelectors.modelSelectList, isEqual);
2929
const { styles } = useStyles();
3030

3131
const enabledList = select.filter((s) => s.enabled);

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
55

66
import { ModelProvider } from '@/libs/agent-runtime';
77
import { useGlobalStore } from '@/store/global';
8-
import { modelProviderSelectors } from '@/store/global/selectors';
8+
import { modelConfigSelectors } from '@/store/global/selectors';
99

1010
import { FormAction } from '../style';
1111

@@ -14,7 +14,7 @@ const AnthropicForm = memo(() => {
1414
// const [showProxy, setShow] = useState(false);
1515

1616
const [apiKey, setConfig] = useGlobalStore((s) => [
17-
modelProviderSelectors.anthropicAPIKey(s),
17+
modelConfigSelectors.anthropicAPIKey(s),
1818
s.setModelProviderConfig,
1919
]);
2020

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next';
88

99
import { ModelProvider } from '@/libs/agent-runtime';
1010
import { useGlobalStore } from '@/store/global';
11-
import { modelProviderSelectors } from '@/store/global/selectors';
11+
import { modelConfigSelectors } from '@/store/global/selectors';
1212

1313
import { FormAction } from '../style';
1414

@@ -17,9 +17,9 @@ const BedrockForm = memo(() => {
1717
const [showRegion, setShow] = useState(false);
1818

1919
const [accessKeyId, secretAccessKey, region, setConfig] = useGlobalStore((s) => [
20-
modelProviderSelectors.bedrockConfig(s).accessKeyId,
21-
modelProviderSelectors.bedrockConfig(s).secretAccessKey,
22-
modelProviderSelectors.bedrockConfig(s).region,
20+
modelConfigSelectors.bedrockConfig(s).accessKeyId,
21+
modelConfigSelectors.bedrockConfig(s).secretAccessKey,
22+
modelConfigSelectors.bedrockConfig(s).region,
2323
s.setModelProviderConfig,
2424
]);
2525

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
55

66
import { ModelProvider } from '@/libs/agent-runtime';
77
import { useGlobalStore } from '@/store/global';
8-
import { modelProviderSelectors } from '@/store/global/selectors';
8+
import { modelConfigSelectors } from '@/store/global/selectors';
99

1010
import { FormAction } from '../style';
1111

@@ -14,7 +14,7 @@ const GoogleForm = memo(() => {
1414
// const [showProxy, setShow] = useState(false);
1515

1616
const [apiKey, setConfig] = useGlobalStore((s) => [
17-
modelProviderSelectors.googleAPIKey(s),
17+
modelConfigSelectors.googleAPIKey(s),
1818
// modelProviderSelectors.openAIProxyUrl(s),
1919
s.setModelProviderConfig,
2020
]);

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
55

66
import { ModelProvider } from '@/libs/agent-runtime';
77
import { useGlobalStore } from '@/store/global';
8-
import { modelProviderSelectors } from '@/store/global/selectors';
8+
import { modelConfigSelectors } from '@/store/global/selectors';
99

1010
import { FormAction } from '../style';
1111

@@ -14,7 +14,7 @@ const GroqForm = memo(() => {
1414
// const [showProxy, setShow] = useState(false);
1515

1616
const [apiKey, setConfig] = useGlobalStore((s) => [
17-
modelProviderSelectors.groqAPIKey(s),
17+
modelConfigSelectors.groqAPIKey(s),
1818
s.setModelProviderConfig,
1919
]);
2020

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
55

66
import { ModelProvider } from '@/libs/agent-runtime';
77
import { useGlobalStore } from '@/store/global';
8-
import { modelProviderSelectors } from '@/store/global/selectors';
8+
import { modelConfigSelectors } from '@/store/global/selectors';
99

1010
import { FormAction } from '../style';
1111

@@ -14,7 +14,7 @@ const MistralForm = memo(() => {
1414
// const [showProxy, setShow] = useState(false);
1515

1616
const [apiKey, setConfig] = useGlobalStore((s) => [
17-
modelProviderSelectors.mistralAPIKey(s),
17+
modelConfigSelectors.mistralAPIKey(s),
1818
s.setModelProviderConfig,
1919
]);
2020

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
55

66
import { ModelProvider } from '@/libs/agent-runtime';
77
import { useGlobalStore } from '@/store/global';
8-
import { modelProviderSelectors } from '@/store/global/selectors';
8+
import { modelConfigSelectors } from '@/store/global/selectors';
99

1010
import { FormAction } from '../style';
1111

@@ -14,7 +14,7 @@ const MoonshotForm = memo(() => {
1414
// const [showProxy, setShow] = useState(false);
1515

1616
const [apiKey, setConfig] = useGlobalStore((s) => [
17-
modelProviderSelectors.moonshotAPIKey(s),
17+
modelConfigSelectors.moonshotAPIKey(s),
1818
s.setModelProviderConfig,
1919
]);
2020

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { memo, useState } from 'react';
77
import { useTranslation } from 'react-i18next';
88

99
import { useGlobalStore } from '@/store/global';
10-
import { modelProviderSelectors } from '@/store/global/selectors';
10+
import { modelConfigSelectors } from '@/store/global/selectors';
1111

1212
import { FormAction } from '../style';
1313

@@ -16,8 +16,8 @@ const OpenAIForm = memo(() => {
1616
const [showProxy, setShow] = useState(false);
1717

1818
const [apiKey, proxyUrl, setConfig] = useGlobalStore((s) => [
19-
modelProviderSelectors.openAIAPIKey(s),
20-
modelProviderSelectors.openAIProxyUrl(s),
19+
modelConfigSelectors.openAIAPIKey(s),
20+
modelConfigSelectors.openAIProxyUrl(s),
2121
s.setModelProviderConfig,
2222
]);
2323
const theme = useTheme();

0 commit comments

Comments
 (0)