fix: close 5315

app/components/model-config.tsx

@@ -6,12 +6,16 @@ import { InputRange } from "./input-range";
 import { ListItem, Select } from "./ui-lib";
 import { useAllModels } from "../utils/hooks";
 
+function getModelName(model: { model: string; providerName: string }) {
+  return `${model.model}----${model.providerName}`;
+}
+
 export function ModelConfigList(props: {
   modelConfig: ModelConfig;
   updateConfig: (updater: (config: ModelConfig) => void) => void;
 }) {
   const allModels = useAllModels();
-  const value = `${props.modelConfig.model}@${props.modelConfig?.providerName}`;
+  const value = getModelName(props.modelConfig);
 
   return (
     <>
@@ -20,7 +24,7 @@ export function ModelConfigList(props: {
           aria-label={Locale.Settings.Model}
           value={value}
           onChange={(e) => {
-            const [model, providerName] = e.currentTarget.value.split("@");
+            const [model, providerName] = e.currentTarget.value.split("----");
             props.updateConfig((config) => {
               config.model = ModalConfigValidator.model(model);
               config.providerName = providerName as ServiceProvider;
@@ -30,7 +34,13 @@ export function ModelConfigList(props: {
           {allModels
             .filter((v) => v.available)
             .map((v, i) => (
-              <option value={`${v.name}@${v.provider?.providerName}`} key={i}>
+              <option
+                value={getModelName({
+                  model: v.name,
+                  providerName: v.provider?.providerName!,
+                })}
+                key={i}
+              >
                 {v.displayName}({v.provider?.providerName})
               </option>
             ))}

app/utils/__tests__/model.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import { parseModelName } from "../model";
+
+describe("parseModelName", () => {
+  it('should parse a simple model name without "@"', () => {
+    const result = parseModelName("simpleModel");
+    expect(result).toEqual({
+      customModelName: "simpleModel",
+      customProviderName: "",
+    });
+  });
+
+  it('should parse a model name with "@"', () => {
+    const result = parseModelName("modelName@providerName");
+    expect(result).toEqual({
+      customModelName: "modelName",
+      customProviderName: "providerName",
+    });
+  });
+
+  it('should parse a quoted model name without "@"', () => {
+    const result = parseModelName('"quotedModel"');
+    expect(result).toEqual({
+      customModelName: "quotedModel",
+      customProviderName: "quotedModel",
+    });
+  });
+
+  it('should parse a quoted model name with "@"', () => {
+    const result = parseModelName('"quotedModel@providerName"');
+    expect(result).toEqual({
+      customModelName: "quotedModel@providerName",
+      customProviderName: "quotedModel@providerName",
+    });
+  });
+
+  it('should parse a model name with multiple "@" symbols', () => {
+    const result = parseModelName("modelName@providerName@extra");
+    expect(result).toEqual({
+      customModelName: "modelName",
+      customProviderName: "providerName@extra",
+    });
+  });
+
+  it("should handle incorrect format gracefully", () => {
+    const result = parseModelName("incorrectFormat@");
+    expect(result).toEqual({
+      customModelName: "incorrectFormat",
+      customProviderName: "",
+    });
+  });
+});

app/utils/model.ts

@@ -37,6 +37,25 @@ const sortModelTable = (models: ReturnType<typeof collectModels>) =>
     }
   });
 
+export function parseModelName(name: string): {
+  customModelName: string;
+  customProviderName: string;
+} {
+  let customModelName = name.split("@")[0];
+  let customProviderName = name.slice(customModelName.length + 1);
+  if (name.startsWith("'") || name.startsWith('"')) {
+    const match = name.match(/^(['"])(.*?)\1(@.*)?$/);
+    if (match) {
+      customModelName = match[2];
+      customProviderName = match[3]?.slice(1) || customModelName;
+    }
+  }
+  return { customModelName, customProviderName } as {
+    customModelName: string;
+    customProviderName: string;
+  };
+}
+
 export function collectModelTable(
   models: readonly LLMModel[],
   customModels: string,
@@ -79,7 +98,12 @@ export function collectModelTable(
         );
       } else {
         // 1. find model by name, and set available value
-        const [customModelName, customProviderName] = name.split("@");
+        // modelName@azure => 'modelName', 'azure'
+        // 'modelName@azure' => 'modelName@azure', ''
+        // modelName@azure=deploymentName => 'modelName', 'azure=deploymentName'
+        // 'modelName@azure'=deploymentName => 'modelName@azure', '=deploymentName
+        // 'modelName@azure'@azure=deploymentName => 'modelName@azure', 'azure=deploymentName'
+        let { customModelName, customProviderName } = parseModelName(name);
         let count = 0;
         for (const fullName in modelTable) {
           const [modelName, providerName] = fullName.split("@");
@@ -102,7 +126,7 @@ export function collectModelTable(
         }
         // 2. if model not exists, create new model with available value
         if (count === 0) {
-          let [customModelName, customProviderName] = name.split("@");
+          let { customModelName, customProviderName } = parseModelName(name);
           const provider = customProvider(
             customProviderName || customModelName,
           );

package.json

@@ -15,7 +15,8 @@
     "app:build": "yarn mask && yarn tauri build",
     "prompts": "node ./scripts/fetch-prompts.mjs",
     "prepare": "husky install",
-    "proxy-dev": "sh ./scripts/init-proxy.sh && proxychains -f ./scripts/proxychains.conf yarn dev"
+    "proxy-dev": "sh ./scripts/init-proxy.sh && proxychains -f ./scripts/proxychains.conf yarn dev",
+    "test": "vitest run"
   },
   "dependencies": {
     "@fortaine/fetch-event-source": "^3.0.6",
@@ -66,6 +67,7 @@
     "prettier": "^3.0.2",
     "tsx": "^4.16.0",
     "typescript": "5.2.2",
+    "vitest": "^2.0.5",
     "watch": "^1.0.2",
     "webpack": "^5.88.1"
   },