Bugfix: on the setup page, clicking "Complete Configuration" does not check for any unsaved agent changes

Author: xuyaqist

frontend/app/[locale]/agents/AgentsContent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, {useState, useEffect, useRef} from "react";
+import React, {useState, useEffect, useRef, forwardRef, useImperativeHandle} from "react";
 import {motion} from "framer-motion";
 
 import {useSetupFlow} from "@/hooks/useSetupFlow";
@@ -30,14 +30,14 @@ interface AgentsContentProps {
  * AgentsContent - Main component for agent configuration
  * Can be used in setup flow or as standalone page
  */
-export default function AgentsContent({
+export default forwardRef<AgentConfigHandle, AgentsContentProps>(function AgentsContent({
   isSaving: externalIsSaving,
   connectionStatus: externalConnectionStatus,
   isCheckingConnection: externalIsCheckingConnection,
   onCheckConnection: externalOnCheckConnection,
   onConnectionStatusChange,
   onSavingStateChange,
-}: AgentsContentProps) {
+}: AgentsContentProps, ref) {
   const agentConfigRef = useRef<AgentConfigHandle | null>(null);
   const [showSaveConfirm, setShowSaveConfirm] = useState(false);
   const pendingNavRef = useRef<null | (() => void)>(null);
@@ -59,6 +59,21 @@ export default function AgentsContent({
   const [internalIsSaving, setInternalIsSaving] = useState(false);
   const isSaving = externalIsSaving ?? internalIsSaving;
 
+  // Expose AgentConfigHandle methods to parent
+  useImperativeHandle(ref, () => ({
+    hasUnsavedChanges: () => agentConfigRef.current?.hasUnsavedChanges?.() ?? false,
+    saveAllChanges: async () => {
+      if (agentConfigRef.current?.saveAllChanges) {
+        await agentConfigRef.current.saveAllChanges();
+      }
+    },
+    reloadCurrentAgentData: async () => {
+      if (agentConfigRef.current?.reloadCurrentAgentData) {
+        await agentConfigRef.current.reloadCurrentAgentData();
+      }
+    },
+  }), []);
+
   // Update external saving state
   useEffect(() => {
     onSavingStateChange?.(isSaving);
@@ -108,5 +123,5 @@ export default function AgentsContent({
       />
     </>
   );
-}
+});
 

frontend/app/[locale]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { NavigationLayout } from "@/components/navigation/NavigationLayout";
 import { HomepageContent } from "@/components/homepage/HomepageContent";
@@ -18,6 +18,7 @@ import MemoryContent from "./memory/MemoryContent";
 import ModelsContent from "./models/ModelsContent";
 import AgentsContent from "./agents/AgentsContent";
 import KnowledgesContent from "./knowledges/KnowledgesContent";
+import SaveConfirmModal from "./agents/components/SaveConfirmModal";
 import { SpaceContent } from "./space/components/SpaceContent";
 import { fetchAgentList } from "@/services/agentConfigService";
 import { useAgentImport, ImportAgentData } from "@/hooks/useAgentImport";
@@ -103,6 +104,11 @@ export default function Home() {
     // Setup-specific states
     const [currentSetupStep, setCurrentSetupStep] = useState<SetupStep>("models");
     const [isSaving, setIsSaving] = useState(false);
+    
+    // Agent save confirmation states
+    const [showAgentSaveConfirm, setShowAgentSaveConfirm] = useState(false);
+    const [pendingCompleteAction, setPendingCompleteAction] = useState<(() => void) | null>(null);
+    const agentConfigRef = useRef<any>(null);
 
     // Handle operations that require login
     const handleAuthRequired = () => {
@@ -284,6 +290,20 @@ export default function Home() {
     };
 
     const handleSetupComplete = () => {
+      // Check if we're on the agents step and if there are unsaved changes
+      if (currentSetupStep === "agents" && isAdmin && agentConfigRef.current) {
+        if (agentConfigRef.current.hasUnsavedChanges?.()) {
+          // Show save confirmation modal
+          setShowAgentSaveConfirm(true);
+          setPendingCompleteAction(() => () => {
+            setCurrentView("chat");
+            saveView("chat");
+          });
+          return;
+        }
+      }
+      
+      // No unsaved changes, proceed directly
       setCurrentView("chat");
       saveView("chat");
     };
@@ -518,6 +538,7 @@ export default function Home() {
 
               {currentSetupStep === "agents" && isAdmin && (
                 <AgentsContent
+                  ref={agentConfigRef}
                   isSaving={isSaving}
                   connectionStatus={connectionStatus}
                   isCheckingConnection={isCheckingConnection}
@@ -621,6 +642,37 @@ export default function Home() {
             <RegisterModal />
           </>
         )}
+
+        {/* Agent save confirmation modal for setup completion */}
+        <SaveConfirmModal
+          open={showAgentSaveConfirm}
+          onCancel={async () => {
+            // Reload data from backend to discard changes
+            await agentConfigRef.current?.reloadCurrentAgentData?.();
+            setShowAgentSaveConfirm(false);
+            const action = pendingCompleteAction;
+            setPendingCompleteAction(null);
+            if (action) action();
+          }}
+          onSave={async () => {
+            try {
+              setIsSaving(true);
+              await agentConfigRef.current?.saveAllChanges?.();
+              setShowAgentSaveConfirm(false);
+              const action = pendingCompleteAction;
+              setPendingCompleteAction(null);
+              if (action) action();
+            } catch (e) {
+              // errors are surfaced by underlying save
+            } finally {
+              setIsSaving(false);
+            }
+          }}
+          onClose={() => {
+            setShowAgentSaveConfirm(false);
+            setPendingCompleteAction(null);
+          }}
+        />
       </NavigationLayout>
     );
   }