Fix: model selection format compat and provider api_key wrapping (#17112)

web/src/components/model-tree-select.tsx

@@ -62,7 +62,14 @@ export function buildModelTree(
       title: instance,
       children: models.reduce<TreeSelectNode[]>((acc, m) => {
         const modelName = getRealModelName(m.name);
-        const id = m.model_id;
+
+        const id =
+          m.model_id ||
+          buildModelValue({
+            model_name: modelName,
+            model_instance: m.instance_name,
+            model_provider: m.provider_name,
+          });
         if (seenLeafIds.has(id)) return acc;
         seenLeafIds.add(id);
         const leafNode: TreeSelectNode = {

web/src/hooks/use-llm-request.tsx

@@ -29,7 +29,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { parseModelValue } from '@/utils/llm-util';
+import { buildModelValue, parseModelValue } from '@/utils/llm-util';
 import { useWarnEmptyModel } from './use-warn-empty-model';
 
 export const enum LLMApiAction {
@@ -629,7 +629,17 @@ export const useFetchDefaultModelDictionary = (showEmptyModelWarn = false) => {
     const dict: Record<string, string> = {};
     Object.entries(ModelTypeToField).forEach(([key, field]) => {
       const model = defaultModels.find((m) => m.model_type === key);
-      dict[field] = model && model.enable ? model.model_id : '';
+      if (!model || !model.enable) {
+        dict[field] = '';
+        return;
+      }
+      dict[field] =
+        model.model_id ||
+        buildModelValue({
+          model_name: model.model_name,
+          model_instance: model.model_instance,
+          model_provider: model.model_provider,
+        });
     });
     return dict;
   }, [defaultModels]);

web/src/interfaces/request/llm.ts

@@ -117,10 +117,17 @@ export interface IUpdateProviderInstanceRequestBody {
   verify?: boolean;
 }
 
-export interface ISetDefaultModelRequestBody {
-  model_type: string;
-  model_id: string;
-}
+export type ISetDefaultModelRequestBody =
+  | {
+      model_type: string;
+      model_id: string;
+    }
+  | {
+      model_type: string;
+      model_provider: string;
+      model_instance: string;
+      model_name: string;
+    };
 
 /**
  * Item shape returned by the list-provider-models endpoint.

web/src/pages/user-setting/setting-model/layout/system-setting.tsx

@@ -26,6 +26,7 @@ import {
   useFetchDefaultModelDictionary,
   useSetDefaultModel,
 } from '@/hooks/use-llm-request';
+import { parseModelValue } from '@/utils/llm-util';
 import { CircleQuestionMark } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
 
@@ -88,8 +89,13 @@ function SystemSetting() {
     async (field: string, value: string) => {
       const modelType = FieldToModelType[field];
       if (!modelType) return;
-
-      await setDefaultModel({ model_id: value, model_type: modelType });
+      if (!value) return;
+      const parsed = parseModelValue(value);
+      if (parsed) {
+        await setDefaultModel({ ...parsed, model_type: modelType });
+      } else {
+        await setDefaultModel({ model_id: value, model_type: modelType });
+      }
     },
     [setDefaultModel],
   );

web/src/pages/user-setting/setting-model/provider-schema/field-config/generic-api-key-config.ts

@@ -77,13 +77,16 @@ export const GenericApiKeyConfig: ProviderConfig = {
     apiKey: values.api_key,
     baseUrl: values.base_url,
   }),
-  submitTransform: (values) => ({
-    instance_name: values.instance_name,
-    api_key: values.api_key,
-    api_base: values.base_url || '',
-    group_id: values.group_id,
-    max_tokens: 0,
-  }),
+  submitTransform: (values) => {
+    const apiKey = values.group_id
+      ? { api_key: values.api_key ?? '', group_id: values.group_id }
+      : (values.api_key ?? '');
+    return {
+      instance_name: values.instance_name,
+      api_key: apiKey,
+      api_base: values.base_url || '',
+    };
+  },
 };
 
 /**

web/src/pages/user-setting/setting-model/provider-schema/field-config/local-llm-configs.ts

@@ -295,15 +295,20 @@ function buildLocalConfig(
       baseUrl: values.base_url,
       modelInfo: buildModelInfoFromValues(values),
     }),
-    submitTransform: (values) => ({
-      instance_name: values.instance_name,
-      llm_factory: llmFactory,
-      model_info: buildModelInfoFromValues(values),
-      api_base: values.base_url,
-      api_key: values.api_key,
-      ...(values.provider_order
-        ? { provider_order: values.provider_order }
-        : {}),
-    }),
+    submitTransform: (values) => {
+      const apiKey = values.provider_order
+        ? {
+            api_key: values.api_key ?? '',
+            provider_order: values.provider_order,
+          }
+        : (values.api_key ?? '');
+      return {
+        instance_name: values.instance_name,
+        llm_factory: llmFactory,
+        model_info: buildModelInfoFromValues(values),
+        api_base: values.base_url,
+        api_key: apiKey,
+      };
+    },
   };
 }

web/src/pages/user-setting/setting-model/provider-schema/field-config/provider-config-map.ts

@@ -70,14 +70,18 @@ export const ProviderConfigMap: Record<string, ProviderConfig> = {
       baseUrl: values.api_base,
       modelInfo: [],
     }),
-    submitTransform: (values) => ({
-      instance_name: values.instance_name,
-      llm_factory: LLMFactory.AzureOpenAI,
-      api_base: values.api_base,
-      api_key: values.api_key,
-      api_version: values.api_version,
-      model_info: [],
-    }),
+    submitTransform: (values) => {
+      const apiKey = values.api_version
+        ? { api_key: values.api_key ?? '', api_version: values.api_version }
+        : (values.api_key ?? '');
+      return {
+        instance_name: values.instance_name,
+        llm_factory: LLMFactory.AzureOpenAI,
+        api_base: values.api_base,
+        api_key: apiKey,
+        model_info: [],
+      };
+    },
   },
 
   // ============ VolcEngine ============