♻️ Improvement: Now embedding model in sdk will automatically retry up to 3 times when connection timeout

♻️ Improvement: Warn the user trying to proceed to next config page when embedding model has not connected yet
♻️ Improvement: Warn the user trying to modify the embedding config (from non-empty state to other state)
♻️ Improvement: Warn the user trying to proceed to next config page when embedding model has not set (regardless of multi-embedding model)
♻️ Refactor: add EmbedderCheckModal.tsx to manage all warning modals in model config page
🐛 Bug fix: Next.js warning in the home page: Instance created by `useForm` is not connected to any Form element.

Author: Jasonxia007

frontend/app/[locale]/setup/SetupLayout.tsx

@@ -53,13 +53,16 @@ function Header({
       style={{ height: HEADER_CONFIG.HEIGHT }}
     >
       <div className="flex items-center">
-        <button
+        <Button
           onClick={() => router.push("/")}
           className="mr-3 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-slate-800 transition-colors"
           aria-label={t("setup.header.button.back")}
-        >
-          <FiArrowLeft className="text-slate-600 dark:text-slate-300 text-xl" />
-        </button>
+          icon={
+            <FiArrowLeft className="text-slate-600 dark:text-slate-300 text-xl" />
+          }
+          type="text"
+          shape="circle"
+        />
         <h1 className="text-xl font-bold text-blue-600 dark:text-blue-500">
           {title}
         </h1>

frontend/app/[locale]/setup/models/components/modelConfig.tsx

@@ -77,6 +77,12 @@ export interface ModelConfigSectionRef {
     embedding?: ModelConnectStatus;
     multi_embedding?: ModelConnectStatus;
   };
+  // Programmatically simulate a dropdown change and trigger onChange logic
+  simulateDropdownChange: (
+    category: string,
+    option: string,
+    displayName: string
+  ) => Promise<void>;
 }
 
 interface ModelConfigSectionProps {
@@ -240,6 +246,14 @@ export const ModelConfigSection = forwardRef<
     verifyModels,
     getSelectedModels: () => selectedModels,
     getEmbeddingConnectivity,
+    simulateDropdownChange: async (
+      category: string,
+      option: string,
+      displayName: string
+    ) => {
+      // Directly apply model change to mimic Select onChange behavior
+      await applyModelChange(category, option, displayName);
+    },
   }));
 
   // Load model lists

frontend/app/[locale]/setup/models/config.tsx

@@ -26,12 +26,15 @@ interface AppModelConfigProps {
     // can add multi_embedding in future
     embedding?: string;
   }) => void;
+  // Expose a ref from parent to allow programmatic dropdown change
+  forwardedRef?: React.Ref<ModelConfigSectionRef>;
 }
 
 export default function AppModelConfig({
   skipModelVerification = false,
   onSelectedModelsChange,
   onEmbeddingConnectivityChange,
+  forwardedRef,
 }: AppModelConfigProps) {
   const { t } = useTranslation();
   const [isClientSide, setIsClientSide] = useState(false);
@@ -63,6 +66,17 @@ export default function AppModelConfig({
     return () => clearInterval(timer);
   }, [onSelectedModelsChange, onEmbeddingConnectivityChange]);
 
+  // Bridge internal ref to external forwardedRef so parent can call simulateDropdownChange
+  useEffect(() => {
+    if (!forwardedRef) return;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(modelConfigRef.current);
+    } else {
+      // @ts-ignore allow writing current
+      (forwardedRef as any).current = modelConfigRef.current;
+    }
+  }, [forwardedRef]);
+
   return (
     <div
       className="w-full mx-auto"

frontend/app/[locale]/setup/models/page.tsx

@@ -1,21 +1,26 @@
 "use client";
 
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {useRouter} from "next/navigation";
 import {useTranslation} from "react-i18next";
 
-import {App, Button, Modal} from "antd";
-import {WarningFilled} from "@ant-design/icons";
+import {App, Button} from "antd";
 import {motion} from "framer-motion";
 
 import {useAuth} from "@/hooks/useAuth";
 import modelEngineService from "@/services/modelEngineService";
 import {configStore} from "@/lib/config";
-import {CONNECTION_STATUS, ConnectionStatus,} from "@/const/modelConfig";
+import {
+  CONNECTION_STATUS,
+  ConnectionStatus,
+  MODEL_STATUS
+} from "@/const/modelConfig";
 import log from "@/lib/logger";
 
 import SetupLayout from "../SetupLayout";
 import AppModelConfig from "./config";
+import { ModelConfigSectionRef } from "./components/modelConfig";
+import EmbedderCheckModal from "./components/model/EmbedderCheckModal";
 
 export default function ModelSetupPage() {
   const { message } = App.useApp();
@@ -27,13 +32,17 @@ export default function ModelSetupPage() {
     CONNECTION_STATUS.PROCESSING
   );
   const [isCheckingConnection, setIsCheckingConnection] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
   const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false);
   const [pendingJump, setPendingJump] = useState(false);
+  const [connectivityWarningOpen, setConnectivityWarningOpen] = useState(false);
   const [liveSelectedModels, setLiveSelectedModels] = useState<Record<
     string,
     Record<string, string>
   > | null>(null);
+  const [embeddingConnectivity, setEmbeddingConnectivity] = useState<{
+    embedding?: string;
+  } | null>(null);
+  const modelConfigSectionRef = useRef<ModelConfigSectionRef | null>(null);
 
   // Check login status and permission
   useEffect(() => {
@@ -98,6 +107,15 @@ export default function ModelSetupPage() {
         );
         return;
       }
+
+      // connectivity check for embedding models
+      const connectivityOk = isEmbeddingConnectivityOk();
+      if (!connectivityOk) {
+        setConnectivityWarningOpen(true);
+        setPendingJump(true);
+        return;
+      }
+
       router.push("/setup/knowledges");
     } catch (error) {
       log.error(t("setup.page.error.systemError"), error);
@@ -113,6 +131,42 @@ export default function ModelSetupPage() {
     }
   };
 
+  // Check embedding connectivity for selected models
+  const isEmbeddingConnectivityOk = (): boolean => {
+    // can add multi_embedding in future
+    const selectedEmbedding = liveSelectedModels?.embedding?.embedding || "";
+    if (!selectedEmbedding) return true;
+    const embStatus = embeddingConnectivity?.embedding;
+    const ok = (s?: string) => !s || s === MODEL_STATUS.AVAILABLE;
+    return ok(embStatus);
+  };
+
+  const handleConnectivityOk = async () => {
+    setConnectivityWarningOpen(false);
+    if (pendingJump) {
+      setPendingJump(false);
+      // Apply live selections programmatically to mimic dropdown onChange
+      try {
+        const ref = modelConfigSectionRef.current;
+        const selections = liveSelectedModels || {};
+        if (ref && selections) {
+          // Iterate categories and options
+          for (const [category, options] of Object.entries(selections)) {
+            for (const [option, displayName] of Object.entries(options)) {
+              if (displayName) {
+                // Simulate dropdown change and trigger onChange flow
+                await ref.simulateDropdownChange(category, option, displayName);
+              }
+            }
+          }
+        }
+      } catch (e) {
+        message.error(t("setup.page.error.saveConfig"));
+      }
+      router.push("/setup/knowledges");
+    }
+  };
+
   // Animation variants for smooth transitions
   const pageVariants = {
     initial: {
@@ -156,44 +210,22 @@ export default function ModelSetupPage() {
       >
         <AppModelConfig
           onSelectedModelsChange={(selected) => setLiveSelectedModels(selected)}
+          onEmbeddingConnectivityChange={(status) => setEmbeddingConnectivity(status)}
+          forwardedRef={modelConfigSectionRef}
         />
       </motion.div>
 
-      <Modal
-        title={t("embedding.emptyWarningModal.title")}
-        open={embeddingModalOpen}
-        onCancel={() => setEmbeddingModalOpen(false)}
-        centered
-        footer={
-          <div className="flex justify-end mt-6 gap-4">
-            <Button onClick={handleEmbeddingOk}>
-              {t("embedding.emptyWarningModal.ok_continue")}
-            </Button>
-            <Button type="primary" onClick={() => setEmbeddingModalOpen(false)}>
-              {t("embedding.emptyWarningModal.cancel")}
-            </Button>
-          </div>
-        }
-      >
-        <div className="py-2">
-          <div className="flex items-center">
-            <WarningFilled
-              className="text-yellow-500 mt-1 mr-2"
-              style={{ fontSize: "48px" }}
-            />
-            <div className="ml-3 mt-2">
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: t("embedding.emptyWarningModal.content"),
-                }}
-              />
-              <div className="mt-2 text-xs opacity-70">
-                {t("embedding.emptyWarningModal.tip")}
-              </div>
-            </div>
-          </div>
-        </div>
-      </Modal>
+      <EmbedderCheckModal
+        emptyWarningOpen={embeddingModalOpen}
+        onEmptyOk={handleEmbeddingOk}
+        onEmptyCancel={() => setEmbeddingModalOpen(false)}
+        connectivityWarningOpen={connectivityWarningOpen}
+        onConnectivityOk={handleConnectivityOk}
+        onConnectivityCancel={() => setConnectivityWarningOpen(false)}
+        modifyWarningOpen={false}
+        onModifyOk={() => {}}
+        onModifyCancel={() => {}}
+      />
     </SetupLayout>
   );
 }