feat: close #2303 add custom model name config

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>
           ))}

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 />