feat: add multi-model support

app/components/settings.tsx

@@ -30,16 +30,15 @@ import {
   showConfirm,
   showToast,
 } from "./ui-lib";
-import { ModelConfigList } from "./model-config";
 
 import { IconButton } from "./button";
 import {
-  SubmitKey,
   useChatStore,
-  Theme,
   useUpdateStore,
   useAccessStore,
   useAppConfig,
+  LLMProvider,
+  LLMProviders,
 } from "../store";
 
 import Locale, {
@@ -61,6 +60,14 @@ import { useSyncStore } from "../store/sync";
 import { nanoid } from "nanoid";
 import { useMaskStore } from "../store/mask";
 import { ProviderType } from "../utils/cloud";
+import {
+  ChatConfigList,
+  ModelConfigList,
+  ProviderConfigList,
+  ProviderSelectItem,
+} from "./config";
+import { SubmitKey, Theme } from "../typing";
+import { deepClone } from "../utils/clone";
 
 function EditPromptModal(props: { id: string; onClose: () => void }) {
   const promptStore = usePromptStore();
@@ -757,8 +764,7 @@ export function Settings() {
               step="1"
               onChange={(e) =>
                 updateConfig(
-                  (config) =>
-                    (config.fontSize = Number.parseInt(e.currentTarget.value)),
+                  (config) => (config.fontSize = e.currentTarget.valueAsNumber),
                 )
               }
             ></InputRange>
@@ -770,11 +776,14 @@ export function Settings() {
           >
             <input
               type="checkbox"
-              checked={config.enableAutoGenerateTitle}
+              checked={
+                config.globalMaskConfig.chatConfig.enableAutoGenerateTitle
+              }
               onChange={(e) =>
                 updateConfig(
                   (config) =>
-                    (config.enableAutoGenerateTitle = e.currentTarget.checked),
+                    (config.globalMaskConfig.chatConfig.enableAutoGenerateTitle =
+                      e.currentTarget.checked),
                 )
               }
             ></input>
@@ -877,7 +886,9 @@ export function Settings() {
                 type="text"
                 placeholder={Locale.Settings.AccessCode.Placeholder}
                 onChange={(e) => {
-                  accessStore.updateCode(e.currentTarget.value);
+                  accessStore.update(
+                    (config) => (config.accessCode = e.currentTarget.value),
+                  );
                 }}
               />
             </ListItem>
@@ -885,36 +896,7 @@ export function Settings() {
             <></>
           )}
 
-          {!accessStore.hideUserApiKey ? (
-            <>
-              <ListItem
-                title={Locale.Settings.Endpoint.Title}
-                subTitle={Locale.Settings.Endpoint.SubTitle}
-              >
-                <input
-                  type="text"
-                  value={accessStore.openaiUrl}
-                  placeholder="https://api.openai.com/"
-                  onChange={(e) =>
-                    accessStore.updateOpenAiUrl(e.currentTarget.value)
-                  }
-                ></input>
-              </ListItem>
-              <ListItem
-                title={Locale.Settings.Token.Title}
-                subTitle={Locale.Settings.Token.SubTitle}
-              >
-                <PasswordInput
-                  value={accessStore.token}
-                  type="text"
-                  placeholder={Locale.Settings.Token.Placeholder}
-                  onChange={(e) => {
-                    accessStore.updateToken(e.currentTarget.value);
-                  }}
-                />
-              </ListItem>
-            </>
-          ) : null}
+          {!accessStore.hideUserApiKey ? <></> : null}
 
           {!accessStore.hideBalanceQuery ? (
             <ListItem
@@ -941,31 +923,44 @@ export function Settings() {
               )}
             </ListItem>
           ) : null}
-
-          <ListItem
-            title={Locale.Settings.CustomModel.Title}
-            subTitle={Locale.Settings.CustomModel.SubTitle}
-          >
-            <input
-              type="text"
-              value={config.customModels}
-              placeholder="model1,model2,model3"
-              onChange={(e) =>
-                config.update(
-                  (config) => (config.customModels = e.currentTarget.value),
-                )
-              }
-            ></input>
-          </ListItem>
         </List>
 
         <List>
+          <ProviderSelectItem
+            value={config.globalMaskConfig.provider}
+            update={(value) =>
+              config.update((_config) => {
+                _config.globalMaskConfig.provider = value;
+              })
+            }
+          />
+
+          <ProviderConfigList
+            provider={config.globalMaskConfig.provider}
+            config={config.providerConfig}
+            updateConfig={(update) => {
+              config.update((_config) => update(_config.providerConfig));
+            }}
+          />
           <ModelConfigList
-            modelConfig={config.modelConfig}
+            provider={config.globalMaskConfig.provider}
+            config={config.globalMaskConfig.modelConfig}
             updateConfig={(updater) => {
-              const modelConfig = { ...config.modelConfig };
+              const modelConfig = { ...config.globalMaskConfig.modelConfig };
               updater(modelConfig);
-              config.update((config) => (config.modelConfig = modelConfig));
+              config.update(
+                (config) => (config.globalMaskConfig.modelConfig = modelConfig),
+              );
+            }}
+          />
+          <ChatConfigList
+            config={config.globalMaskConfig.chatConfig}
+            updateConfig={(updater) => {
+              const chatConfig = deepClone(config.globalMaskConfig.chatConfig);
+              updater(chatConfig);
+              config.update(
+                (config) => (config.globalMaskConfig.chatConfig = chatConfig),
+              );
             }}
           />
         </List>