feat: model fallback chain (#2017) (#2018)

2026-06-02 03:55:55 +00:00 · 2026-03-12 03:33:05 +08:00
parent 89064a9d5b
commit 79311ccde3
15 changed files with 534 additions and 113 deletions
--- a/web/src/app/home/bots/components/bot-form/BotForm.tsx
+++ b/web/src/app/home/bots/components/bot-form/BotForm.tsx
@@ -124,12 +124,6 @@ export default function BotForm({
  const currentAdapter = form.watch('adapter');
  const currentAdapterConfig = form.watch('adapter_config');

-  // Serialize adapter_config to a stable string so it can be used as a
-  // useEffect dependency without triggering on every render.  form.watch()
-  // returns a new object reference each time, which would otherwise cause
-  // the filtering effect below to loop indefinitely.
-  const adapterConfigJson = JSON.stringify(currentAdapterConfig);
-
  useEffect(() => {
    setBotFormValues();
  }, []);
@@ -153,7 +147,7 @@ export default function BotForm({
      // For non-Lark adapters, show all fields
      setFilteredDynamicFormConfigList(dynamicFormConfigList);
    }
-  }, [currentAdapter, adapterConfigJson, dynamicFormConfigList]);
+  }, [currentAdapter, currentAdapterConfig, dynamicFormConfigList]);

  // 复制到剪贴板的辅助函数 - 使用页面上的真实input元素
  const copyToClipboard = () => {
--- a/web/src/app/home/components/dynamic-form/DynamicFormComponent.tsx
+++ b/web/src/app/home/components/dynamic-form/DynamicFormComponent.tsx
@@ -11,7 +11,7 @@ import {
  FormMessage,
 } from '@/components/ui/form';
 import DynamicFormItemComponent from '@/app/home/components/dynamic-form/DynamicFormItemComponent';
-import { useCallback, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { useTranslation } from 'react-i18next';

@@ -73,6 +73,12 @@ export default function DynamicFormComponent({
          case 'bot-selector':
            fieldSchema = z.string();
            break;
+          case 'model-fallback-selector':
+            fieldSchema = z.object({
+              primary: z.string(),
+              fallbacks: z.array(z.string()),
+            });
+            break;
          case 'prompt-editor':
            fieldSchema = z.array(
              z.object({
@@ -160,39 +166,34 @@ export default function DynamicFormComponent({
  const onSubmitRef = useRef(onSubmit);
  onSubmitRef.current = onSubmit;

-  // Track the last emitted values to avoid emitting identical snapshots,
-  // which would cause the parent to call setValue with an equivalent object,
-  // triggering a re-render loop.
-  const lastEmittedRef = useRef<string>('');
-
-  const emitValues = useCallback(() => {
+  // 监听表单值变化
+  useEffect(() => {
+    // Emit initial form values immediately so the parent always has a valid snapshot,
+    // even if the user saves without modifying any field.
+    // form.watch(callback) only fires on subsequent changes, not on mount.
    const formValues = form.getValues();
-    const finalValues = itemConfigList.reduce(
+    const initialFinalValues = itemConfigList.reduce(
      (acc, item) => {
        acc[item.name] = formValues[item.name] ?? item.default;
        return acc;
      },
      {} as Record<string, object>,
    );
-    const serialized = JSON.stringify(finalValues);
-    if (serialized !== lastEmittedRef.current) {
-      lastEmittedRef.current = serialized;
-      onSubmitRef.current?.(finalValues);
-    }
-  }, [form, itemConfigList]);
-
-  // 监听表单值变化
-  useEffect(() => {
-    // Emit initial form values immediately so the parent always has a valid snapshot,
-    // even if the user saves without modifying any field.
-    // form.watch(callback) only fires on subsequent changes, not on mount.
-    emitValues();
+    onSubmitRef.current?.(initialFinalValues);

    const subscription = form.watch(() => {
-      emitValues();
+      const formValues = form.getValues();
+      const finalValues = itemConfigList.reduce(
+        (acc, item) => {
+          acc[item.name] = formValues[item.name] ?? item.default;
+          return acc;
+        },
+        {} as Record<string, object>,
+      );
+      onSubmitRef.current?.(finalValues);
    });
    return () => subscription.unsubscribe();
-  }, [form, itemConfigList, emitValues]);
+  }, [form, itemConfigList]);

  return (
    <Form {...form}>
@@ -231,6 +232,7 @@ export default function DynamicFormComponent({

          // All fields are disabled when editing (creation_settings are immutable)
          const isFieldDisabled = !!isEditing;
+
          return (
            <FormField
              key={config.id}
--- a/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
+++ b/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
@@ -124,6 +124,28 @@ export default function DynamicFormItemComponent({
    }
  }, [config.type]);

+  useEffect(() => {
+    if (config.type === DynamicFormItemType.MODEL_FALLBACK_SELECTOR) {
+      httpClient
+        .getProviderLLMModels()
+        .then((resp) => {
+          let models = resp.models;
+          if (
+            systemInfo.disable_models_service ||
+            userInfo?.account_type !== 'space'
+          ) {
+            models = models.filter(
+              (m) => m.provider?.requester !== 'space-chat-completions',
+            );
+          }
+          setLlmModels(models);
+        })
+        .catch((err) => {
+          toast.error('Failed to get LLM model list: ' + err.msg);
+        });
+    }
+  }, [config.type]);
+
  useEffect(() => {
    if (
      config.type === DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR ||
@@ -171,12 +193,7 @@ export default function DynamicFormItemComponent({
      return <Textarea {...field} className="min-h-[120px]" />;

    case DynamicFormItemType.BOOLEAN:
-      return (
-        <Switch
-          checked={field.value ?? false}
-          onCheckedChange={field.onChange}
-        />
-      );
+      return <Switch checked={field.value} onCheckedChange={field.onChange} />;

    case DynamicFormItemType.STRING_ARRAY:
      return (
@@ -227,7 +244,7 @@ export default function DynamicFormItemComponent({

    case DynamicFormItemType.SELECT:
      return (
-        <Select value={field.value ?? ''} onValueChange={field.onChange}>
+        <Select value={field.value} onValueChange={field.onChange}>
          <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
            <SelectValue placeholder={t('common.select')} />
          </SelectTrigger>
@@ -318,6 +335,172 @@ export default function DynamicFormItemComponent({
        </Select>
      );

+    case DynamicFormItemType.MODEL_FALLBACK_SELECTOR: {
+      // Group models by provider
+      const groupedModelsForFallback = llmModels.reduce(
+        (acc, model) => {
+          const providerName =
+            model.provider?.name || model.provider?.requester || 'Unknown';
+          if (!acc[providerName]) acc[providerName] = [];
+          acc[providerName].push(model);
+          return acc;
+        },
+        {} as Record<string, LLMModel[]>,
+      );
+
+      const modelValue = field.value as {
+        primary: string;
+        fallbacks: string[];
+      };
+
+      const renderModelSelect = (
+        value: string,
+        onChange: (val: string) => void,
+        placeholder: string,
+      ) => (
+        <Select value={value} onValueChange={onChange}>
+          <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
+            <SelectValue placeholder={placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {Object.entries(groupedModelsForFallback).map(
+              ([providerName, models]) => (
+                <SelectGroup key={providerName}>
+                  <SelectLabel>{providerName}</SelectLabel>
+                  {models.map((model) => (
+                    <SelectItem key={model.uuid} value={model.uuid}>
+                      <span className="inline-flex items-center gap-1">
+                        {model.name}
+                        {model.abilities?.includes('vision') && (
+                          <Eye className="h-3 w-3 text-muted-foreground" />
+                        )}
+                        {model.abilities?.includes('func_call') && (
+                          <Wrench className="h-3 w-3 text-muted-foreground" />
+                        )}
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              ),
+            )}
+          </SelectContent>
+        </Select>
+      );
+
+      const updateValue = (patch: Partial<typeof modelValue>) => {
+        field.onChange({ ...modelValue, ...patch });
+      };
+
+      const addFallbackModel = () => {
+        updateValue({ fallbacks: [...modelValue.fallbacks, ''] });
+      };
+
+      const updateFallbackModel = (index: number, value: string) => {
+        const updated = [...modelValue.fallbacks];
+        updated[index] = value;
+        updateValue({ fallbacks: updated });
+      };
+
+      const removeFallbackModel = (index: number) => {
+        const updated = [...modelValue.fallbacks];
+        updated.splice(index, 1);
+        updateValue({ fallbacks: updated });
+      };
+
+      const moveFallbackModel = (index: number, direction: 'up' | 'down') => {
+        const updated = [...modelValue.fallbacks];
+        const newIndex = direction === 'up' ? index - 1 : index + 1;
+        if (newIndex < 0 || newIndex >= updated.length) return;
+        [updated[index], updated[newIndex]] = [
+          updated[newIndex],
+          updated[index],
+        ];
+        updateValue({ fallbacks: updated });
+      };
+
+      return (
+        <div className="space-y-3">
+          {/* Primary model selector */}
+          <div>
+            <p className="text-xs text-muted-foreground mb-1">
+              {t('models.fallback.primary')}
+            </p>
+            {renderModelSelect(
+              modelValue.primary,
+              (val) => updateValue({ primary: val }),
+              t('models.selectModel'),
+            )}
+          </div>
+
+          {/* Fallback models */}
+          {modelValue.fallbacks.length > 0 && (
+            <div className="space-y-2">
+              <p className="text-xs text-muted-foreground">
+                {t('models.fallback.fallbackList')}
+              </p>
+              {modelValue.fallbacks.map((fbUuid: string, index: number) => (
+                <div key={index} className="flex items-center gap-2">
+                  <span className="text-xs text-muted-foreground w-4 shrink-0">
+                    {index + 1}.
+                  </span>
+                  <div className="flex-1">
+                    {renderModelSelect(
+                      fbUuid,
+                      (val) => updateFallbackModel(index, val),
+                      t('models.selectModel'),
+                    )}
+                  </div>
+                  <div className="flex gap-1 shrink-0">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0"
+                      onClick={() => moveFallbackModel(index, 'up')}
+                      disabled={index === 0}
+                    >
+                      ↑
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0"
+                      onClick={() => moveFallbackModel(index, 'down')}
+                      disabled={index === modelValue.fallbacks.length - 1}
+                    >
+                      ↓
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 w-8 p-0 text-destructive"
+                      onClick={() => removeFallbackModel(index)}
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Add fallback button */}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="w-full"
+            onClick={addFallbackModel}
+          >
+            <Plus className="h-4 w-4 mr-1" />
+            {t('models.fallback.addFallback')}
+          </Button>
+        </div>
+      );
+    }
+
    case DynamicFormItemType.KNOWLEDGE_BASE_SELECTOR:
      // Group KBs by Knowledge Engine name
      const kbsByEngine = knowledgeBases.reduce(
--- a/web/src/app/home/components/models-dialog/ModelsDialog.tsx
+++ b/web/src/app/home/components/models-dialog/ModelsDialog.tsx
@@ -463,14 +463,16 @@ export default function ModelsDialog({
                    )
                  : t('models.providerCount', { count: otherProviders.length })}
              </span>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={handleCreateProvider}
-              >
-                <Plus className="h-4 w-4 mr-1" />
-                {t('models.addProvider')}
-              </Button>
+              <div className="flex gap-2">
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={handleCreateProvider}
+                >
+                  <Plus className="h-4 w-4 mr-1" />
+                  {t('models.addProvider')}
+                </Button>
+              </div>
            </div>

            {/* Provider List */}
--- a/web/src/app/infra/entities/form/dynamic.ts
+++ b/web/src/app/infra/entities/form/dynamic.ts
@@ -35,6 +35,7 @@ export enum DynamicFormItemType {
  SELECT = 'select',
  LLM_MODEL_SELECTOR = 'llm-model-selector',
  EMBEDDING_MODEL_SELECTOR = 'embedding-model-selector',
+  MODEL_FALLBACK_SELECTOR = 'model-fallback-selector',
  PROMPT_EDITOR = 'prompt-editor',
  UNKNOWN = 'unknown',
  KNOWLEDGE_BASE_SELECTOR = 'knowledge-base-selector',
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -236,6 +236,11 @@ const enUS = {
    modelsCount: '{{count}} model(s)',
    expandModels: 'Expand',
    collapseModels: 'Collapse',
+    fallback: {
+      primary: 'Primary Model',
+      fallbackList: 'Fallback Models',
+      addFallback: 'Add Fallback Model',
+    },
  },
  bots: {
    title: 'Bots',
--- a/web/src/i18n/locales/ja-JP.ts
+++ b/web/src/i18n/locales/ja-JP.ts
@@ -1,4 +1,4 @@
-const jaJP = {
+const jaJP = {
  common: {
    login: 'ログイン',
    logout: 'ログアウト',
@@ -241,6 +241,11 @@ const jaJP = {
    modelsCount: '{{count}} 個のモデル',
    expandModels: '展開',
    collapseModels: '折りたたむ',
+    fallback: {
+      primary: 'プライマリモデル',
+      fallbackList: 'フォールバックモデル',
+      addFallback: 'フォールバックモデルを追加',
+    },
  },
  bots: {
    title: 'ボット',
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -227,6 +227,11 @@ const zhHans = {
    modelsCount: '{{count}} 个模型',
    expandModels: '展开',
    collapseModels: '收起',
+    fallback: {
+      primary: '主模型',
+      fallbackList: '备用模型',
+      addFallback: '添加备用模型',
+    },
  },
  bots: {
    title: '机器人',
--- a/web/src/i18n/locales/zh-Hant.ts
+++ b/web/src/i18n/locales/zh-Hant.ts
@@ -226,6 +226,11 @@ const zhHant = {
    modelsCount: '{{count}} 個模型',
    expandModels: '展開',
    collapseModels: '收起',
+    fallback: {
+      primary: '主模型',
+      fallbackList: '備用模型',
+      addFallback: '新增備用模型',
+    },
  },
  bots: {
    title: '機器人',