From 98ac7ee277b17a60f8d4926e26887ba72926ff37 Mon Sep 17 00:00:00 2001
From: Yidadaa <yidadaa@qq.com>
Date: Sun, 9 Jul 2023 18:15:52 +0800
Subject: [PATCH] feat: close #2303 add custom model name config

---
 app/components/model-config.tsx |  8 +++--
 app/components/settings.tsx     | 63 ++++++++++++++++++++-------------
 app/locales/cn.ts               |  4 +++
 app/locales/en.ts               |  4 +++
 app/store/config.ts             |  7 +++-
 5 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/app/components/model-config.tsx b/app/components/model-config.tsx
index f9d981cd..8e353401 100644
--- a/app/components/model-config.tsx
+++ b/app/components/model-config.tsx
@@ -9,6 +9,10 @@ export function ModelConfigList(props: {
   updateConfig: (updater: (config: ModelConfig) => void) => void;
 }) {
   const config = useAppConfig();
+  const customModels = config.customModels
+    .split(",")
+    .map((m) => ({ name: m, available: true }));
+  const models = config.models.concat(customModels);
 
   return (
     <>
@@ -24,8 +28,8 @@ export function ModelConfigList(props: {
             );
           }}
         >
-          {config.models.map((v) => (
-            <option value={v.name} key={v.name} disabled={!v.available}>
+          {models.map((v, i) => (
+            <option value={v.name} key={i} disabled={!v.available}>
               {v.name}
             </option>
           ))}
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 5980a34e..09251630 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -315,7 +315,6 @@ export function Settings() {
   const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const config = useAppConfig();
   const updateConfig = config.update;
-  const chatStore = useChatStore();
 
   const updateStore = useUpdateStore();
   const [checkingUpdate, setCheckingUpdate] = useState(false);
@@ -579,6 +578,38 @@ export function Settings() {
           </ListItem>
         </List>
 
+        <List>
+          <ListItem
+            title={Locale.Settings.Prompt.Disable.Title}
+            subTitle={Locale.Settings.Prompt.Disable.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={config.disablePromptHint}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.disablePromptHint = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
+
+          <ListItem
+            title={Locale.Settings.Prompt.List}
+            subTitle={Locale.Settings.Prompt.ListCount(
+              builtinCount,
+              customCount,
+            )}
+          >
+            <IconButton
+              icon={<EditIcon />}
+              text={Locale.Settings.Prompt.Edit}
+              onClick={() => setShowPromptModal(true)}
+            />
+          </ListItem>
+        </List>
+
         <List>
           {showAccessCode ? (
             <ListItem
@@ -654,38 +685,22 @@ export function Settings() {
               )}
             </ListItem>
           ) : null}
-        </List>
 
-        <List>
           <ListItem
-            title={Locale.Settings.Prompt.Disable.Title}
-            subTitle={Locale.Settings.Prompt.Disable.SubTitle}
+            title={Locale.Settings.CustomModel.Title}
+            subTitle={Locale.Settings.CustomModel.SubTitle}
           >
             <input
-              type="checkbox"
-              checked={config.disablePromptHint}
+              type="text"
+              value={config.customModels}
+              placeholder="model1,model2,model3"
               onChange={(e) =>
-                updateConfig(
-                  (config) =>
-                    (config.disablePromptHint = e.currentTarget.checked),
+                config.update(
+                  (config) => (config.customModels = e.currentTarget.value),
                 )
               }
             ></input>
           </ListItem>
-
-          <ListItem
-            title={Locale.Settings.Prompt.List}
-            subTitle={Locale.Settings.Prompt.ListCount(
-              builtinCount,
-              customCount,
-            )}
-          >
-            <IconButton
-              icon={<EditIcon />}
-              text={Locale.Settings.Prompt.Edit}
-              onClick={() => setShowPromptModal(true)}
-            />
-          </ListItem>
         </List>
 
         <SyncItems />
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index c32014be..38fa8e4f 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -220,6 +220,10 @@ const cn = {
       Title: "接口地址",
       SubTitle: "除默认地址外，必须包含 http(s)://",
     },
+    CustomModel: {
+      Title: "自定义模型名",
+      SubTitle: "增加自定义模型可选项，使用英文逗号隔开",
+    },
     Model: "模型 (model)",
     Temperature: {
       Title: "随机性 (temperature)",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index d96b978f..f5d90fd2 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -222,6 +222,10 @@ const en: LocaleType = {
       Title: "Endpoint",
       SubTitle: "Custom endpoint must start with http(s)://",
     },
+    CustomModel: {
+      Title: "Custom Models",
+      SubTitle: "Add extra model options, separate by comma",
+    },
     Model: "Model",
     Temperature: {
       Title: "Temperature",
diff --git a/app/store/config.ts b/app/store/config.ts
index 075c2acf..ff346871 100644
--- a/app/store/config.ts
+++ b/app/store/config.ts
@@ -34,6 +34,7 @@ export const DEFAULT_CONFIG = {
   dontShowMaskSplashScreen: false, // dont show splash screen when create chat
   hideBuiltinMasks: false, // dont add builtin masks
 
+  customModels: "",
   models: DEFAULT_MODELS as any as LLMModel[],
 
   modelConfig: {
@@ -141,7 +142,7 @@ export const useAppConfig = create<ChatConfigStore>()(
     }),
     {
       name: StoreKey.Config,
-      version: 3.4,
+      version: 3.5,
       migrate(persistedState, version) {
         const state = persistedState as ChatConfig;
 
@@ -156,6 +157,10 @@ export const useAppConfig = create<ChatConfigStore>()(
           state.hideBuiltinMasks = false;
         }
 
+        if (version < 3.5) {
+          state.customModels = "claude,claude-100k";
+        }
+
         return state as any;
       },
     },