Skip to content

Commit ebfa0aa

Browse files
arvinxxarvinxx
committed
♻️ refactor: rename the key to enabledModels
1 parent 72fd873 commit ebfa0aa

File tree

11 files changed

+135
-84
lines changed

11 files changed

+135
-84
lines changed

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ import { useGlobalStore } from '@/store/global';
1010
import { modelConfigSelectors } from '@/store/global/selectors';
1111

1212
import Checker from '../components/Checker';
13-
import CustomModelSelect from '../components/CustomModelList';
1413
import ProviderConfig from '../components/ProviderConfig';
14+
import ProviderModelListSelect from '../components/ProviderModelList';
1515
import { LLMProviderConfigKey } from '../const';
1616

1717
const useStyles = createStyles(({ css, token }) => ({
@@ -67,14 +67,14 @@ const LLM = memo(() => {
6767
},
6868
{
6969
children: (
70-
<CustomModelSelect
70+
<ProviderModelListSelect
7171
placeholder={t('llm.openai.customModelName.placeholder')}
7272
provider={'openai'}
7373
/>
7474
),
7575
desc: t('llm.openai.customModelName.desc'),
7676
label: t('llm.openai.customModelName.title'),
77-
name: [LLMProviderConfigKey, providerKey, 'customModelName'],
77+
name: [LLMProviderConfigKey, providerKey, 'enabledModels'],
7878
},
7979
{
8080
children: <Switch />,

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

-63
This file was deleted.

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

+5-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { modelConfigSelectors } from '@/store/global/selectors';
1818
import { GlobalLLMProviderKey } from '@/types/settings';
1919

2020
import Checker from '../Checker';
21-
import CustomModelSelect from '../CustomModelList';
21+
import ProviderModelListSelect from '../ProviderModelList';
2222

2323
interface ProviderConfigProps {
2424
canDeactivate?: boolean;
@@ -88,7 +88,10 @@ const ProviderConfig = memo<ProviderConfigProps>(
8888
},
8989
{
9090
children: (
91-
<CustomModelSelect placeholder={t('llm.modelList.placeholder')} provider={provider} />
91+
<ProviderModelListSelect
92+
placeholder={t('llm.modelList.placeholder')}
93+
provider={provider}
94+
/>
9295
),
9396
desc: t('llm.modelList.desc'),
9497
label: t('llm.modelList.title'),

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

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Typography } from 'antd';
2+
import isEqual from 'fast-deep-equal';
3+
import { memo } from 'react';
4+
import { Flexbox } from 'react-layout-kit';
5+
6+
import ModelIcon from '@/components/ModelIcon';
7+
import { ModelInfoTags } from '@/components/ModelSelect';
8+
import { useGlobalStore } from '@/store/global';
9+
import { modelProviderSelectors } from '@/store/global/selectors';
10+
11+
const CustomModelOption = memo<{ displayName: string; id: string }>(({ displayName, id: id }) => {
12+
const model = useGlobalStore((s) => modelProviderSelectors.modelCardById(id)(s), isEqual);
13+
14+
return (
15+
<Flexbox align={'center'} gap={8} horizontal>
16+
<ModelIcon model={id} size={32} />
17+
<Flexbox>
18+
<Flexbox align={'center'} gap={8} horizontal>
19+
{displayName}
20+
<ModelInfoTags directionReverse placement={'top'} {...model!} />
21+
</Flexbox>
22+
<Typography.Text style={{ fontSize: 12 }} type={'secondary'}>
23+
{id}
24+
</Typography.Text>
25+
</Flexbox>
26+
</Flexbox>
27+
);
28+
});
29+
30+
export default CustomModelOption;

‎src/app/settings/llm/components/CustomModelList/Option.tsx renamed to ‎src/app/settings/llm/components/ProviderModelList/Option.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { ModelInfoTags } from '@/components/ModelSelect';
88
import { useGlobalStore } from '@/store/global';
99
import { modelProviderSelectors } from '@/store/global/selectors';
1010

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

1414
return (
@@ -26,3 +26,5 @@ export const OptionRender = memo<{ displayName: string; id: string }>(({ display
2626
</Flexbox>
2727
);
2828
});
29+
30+
export default OptionRender;

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

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Select } from 'antd';
2+
import { css, cx } from 'antd-style';
3+
import isEqual from 'fast-deep-equal';
4+
import { memo } from 'react';
5+
6+
import { filterEnabledModels } from '@/config/modelProviders';
7+
import { useGlobalStore } from '@/store/global';
8+
import { modelConfigSelectors, modelProviderSelectors } from '@/store/global/selectors';
9+
import { GlobalLLMProviderKey } from '@/types/settings';
10+
11+
import CustomModelOption from './CustomModelOption';
12+
import OptionRender from './Option';
13+
14+
const popup = css`
15+
&.ant-select-dropdown {
16+
.ant-select-item-option-selected {
17+
font-weight: normal;
18+
}
19+
}
20+
`;
21+
22+
interface CustomModelSelectProps {
23+
onChange?: (value: string[]) => void;
24+
placeholder?: string;
25+
provider: string;
26+
value?: string[];
27+
}
28+
29+
const ProviderModelListSelect = memo<CustomModelSelectProps>(
30+
({ provider, placeholder, onChange }) => {
31+
const providerCard = useGlobalStore(
32+
(s) => modelProviderSelectors.providerModelList(s).find((s) => s.id === provider),
33+
isEqual,
34+
);
35+
const providerConfig = useGlobalStore((s) =>
36+
modelConfigSelectors.providerConfig(provider as GlobalLLMProviderKey)(s),
37+
);
38+
39+
const defaultEnableModel = providerCard ? filterEnabledModels(providerCard) : [];
40+
41+
const chatModels = providerCard?.chatModels || [];
42+
43+
return (
44+
<Select<string[]>
45+
allowClear
46+
defaultValue={defaultEnableModel}
47+
mode="tags"
48+
onChange={(value) => {
49+
onChange?.(value.filter(Boolean));
50+
}}
51+
optionFilterProp="label"
52+
optionRender={({ label, value }) => {
53+
console.log(value);
54+
// model is in the chatModels
55+
if (chatModels.some((c) => c.id === value))
56+
return <OptionRender displayName={label as string} id={value as string} />;
57+
58+
// model is user defined in client
59+
return <CustomModelOption displayName={label as string} id={value as string} />;
60+
}}
61+
options={chatModels.map((model) => ({
62+
label: model.displayName || model.id,
63+
value: model.id,
64+
}))}
65+
placeholder={placeholder}
66+
popupClassName={cx(popup)}
67+
value={providerConfig?.enabledModels.filter(Boolean)}
68+
/>
69+
);
70+
},
71+
);
72+
73+
export default ProviderModelListSelect;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,4 @@ export const LLMProviderCustomModelKey = 'customModelName';
2222
* we use this key to define the custom model name
2323
* equal CUSTOM_MODELS
2424
*/
25-
export const LLMProviderModelListKey = 'models';
25+
export const LLMProviderModelListKey = 'enabledModels';

‎src/const/settings/index.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
6666
anthropic: {
6767
apiKey: '',
6868
enabled: false,
69-
models: filterEnabledModels(AnthropicProvider),
69+
enabledModels: filterEnabledModels(AnthropicProvider),
7070
},
7171
azure: {
7272
apiKey: '',
@@ -84,22 +84,22 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
8484
google: {
8585
apiKey: '',
8686
enabled: false,
87-
models: filterEnabledModels(GoogleProvider),
87+
enabledModels: filterEnabledModels(GoogleProvider),
8888
},
8989
groq: {
9090
apiKey: '',
9191
enabled: false,
92-
models: filterEnabledModels(GroqProvider),
92+
enabledModels: filterEnabledModels(GroqProvider),
9393
},
9494
mistral: {
9595
apiKey: '',
9696
enabled: false,
97-
models: filterEnabledModels(MistralProvider),
97+
enabledModels: filterEnabledModels(MistralProvider),
9898
},
9999
moonshot: {
100100
apiKey: '',
101101
enabled: false,
102-
models: filterEnabledModels(MoonshotProvider),
102+
enabledModels: filterEnabledModels(MoonshotProvider),
103103
},
104104
ollama: {
105105
enabled: false,
@@ -119,7 +119,7 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
119119
perplexity: {
120120
apiKey: '',
121121
enabled: false,
122-
models: filterEnabledModels(PerplexityProvider),
122+
enabledModels: filterEnabledModels(PerplexityProvider),
123123
},
124124
togetherai: {
125125
apiKey: '',
@@ -129,12 +129,12 @@ export const DEFAULT_LLM_CONFIG: GlobalLLMConfig = {
129129
zeroone: {
130130
apiKey: '',
131131
enabled: false,
132-
models: filterEnabledModels(ZeroOneProvider),
132+
enabledModels: filterEnabledModels(ZeroOneProvider),
133133
},
134134
zhipu: {
135135
apiKey: '',
136136
enabled: false,
137-
models: filterEnabledModels(ZhiPuProvider),
137+
enabledModels: filterEnabledModels(ZhiPuProvider),
138138
},
139139
};
140140

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

+2-5
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,8 @@ const providerEnabled = (provider: GlobalLLMProviderKey) => (s: GlobalStore) =>
2020
return currentSettings(s).languageModel[provider]?.enabled || false;
2121
};
2222

23-
const providerEnableModels =
24-
(provider: string) =>
25-
(s: GlobalStore): string[] | undefined => {
26-
return providerConfig(provider)(s)?.models;
27-
};
23+
const providerEnableModels = (provider: string) => (s: GlobalStore) =>
24+
providerConfig(provider)(s)?.enabledModels;
2825

2926
const openAIConfig = (s: GlobalStore) => modelProvider(s).openAI;
3027

‎src/types/llm.ts

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ export interface ChatModelCard {
99
* whether model supports function call
1010
*/
1111
functionCall?: boolean;
12+
/**
13+
* whether the model is visible or hidden
14+
*/
1215
hidden?: boolean;
1316
id: string;
1417
/**

‎src/types/settings/modelProvider.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
1+
import { ChatModelCard } from '@/types/llm';
2+
13
export type CustomModels = { displayName: string; id: string }[];
24

35
export interface GeneralModelProviderConfig {
46
apiKey?: string;
7+
customModelCards?: ChatModelCard[];
58
enabled: boolean;
9+
/**
10+
* enabled models id
11+
*/
12+
enabledModels: string[];
613
endpoint?: string;
7-
models: string[];
814
}
915

1016
export interface OpenAIConfig {

0 commit comments

Comments
 (0)