♻️ Repeated calls in chat page (Agent list & conversation list) #2082

YehongPan · YehongPan · commit 24faaa44e713 · 2025-12-25T16:56:42.000+08:00
[Specification Details] 1.Remove redundant `/conversation/list` API calls and move the `/agent/list` API call to the parent component, passing it to the child component as a parameter.
diff --git a/frontend/app/[locale]/chat/components/chatAgentSelector.tsx b/frontend/app/[locale]/chat/components/chatAgentSelector.tsx
@@ -15,7 +15,7 @@ export function ChatAgentSelector({
   onAgentSelect,
   disabled = false,
   isInitialMode = false,
-  initialAgents,
+  agents: propAgents,
 }: ChatAgentSelectorProps) {
   const [agents, setAgents] = useState<Agent[]>([]);
   const [isOpen, setIsOpen] = useState(false);
@@ -95,15 +95,9 @@ export function ChatAgentSelector({
   };
 
   useEffect(() => {
-    // If parent provided initialAgents, reuse them to avoid duplicate network calls.
-    if (initialAgents && initialAgents.length > 0) {
-      setAgents(initialAgents);
-      setIsLoading(false);
-      return;
-    }
-
-    loadAgents();
-  }, []);
+    // Only load agents if not provided via props or if props is explicitly empty
+      setAgents(propAgents || []);
+  }, [propAgents]);
 
   // Execute auto-selection logic when agents are loaded
   useEffect(() => {
diff --git a/frontend/app/[locale]/chat/components/chatInput.tsx b/frontend/app/[locale]/chat/components/chatInput.tsx
@@ -31,7 +31,6 @@ import { chatConfig } from "@/const/chatConfig";
 import { FilePreview } from "@/types/chat";
 
 import { ChatAgentSelector } from "./chatAgentSelector";
-import type { Agent } from "@/types/chat";
 
 // Image viewer component
 function ImageViewer({
@@ -311,8 +310,7 @@ interface ChatInputProps {
   onAttachmentsChange?: (attachments: FilePreview[]) => void;
   selectedAgentId?: number | null;
   onAgentSelect?: (agentId: number | null) => void;
-  // Optional agents list passed from parent to avoid redundant fetching
-  initialAgents?: Agent[];
+  cachedAgents?: Agent[]; // Optional cached agents to avoid repeated API calls
 }
 
 export function ChatInput({
@@ -325,13 +323,13 @@ export function ChatInput({
   onStop,
   onKeyDown,
   onRecordingStatusChange,
+  cachedAgents,
   onFileUpload,
   onImageUpload,
   attachments = [],
   onAttachmentsChange,
   selectedAgentId = null,
   onAgentSelect,
-  initialAgents,
 }: ChatInputProps) {
   const [isRecording, setIsRecording] = useState(false);
   const [recordingStatus, setRecordingStatus] = useState<
@@ -1030,7 +1028,7 @@ export function ChatInput({
             onAgentSelect={onAgentSelect || (() => {})}
             disabled={isLoading || isStreaming}
             isInitialMode={isInitialMode}
-            initialAgents={initialAgents}
+            agents={cachedAgents}
           />
         </div>
 
diff --git a/frontend/app/[locale]/chat/internal/chatInterface.tsx b/frontend/app/[locale]/chat/internal/chatInterface.tsx
@@ -16,7 +16,6 @@ import { conversationService } from "@/services/conversationService";
 import { storageService, convertImageUrlToApiUrl } from "@/services/storageService";
 import { useConversationManagement } from "@/hooks/chat/useConversationManagement";
 import { fetchAllAgents } from "@/services/agentConfigService";
-import type { Agent } from "@/types/chat";
 
 import { ChatSidebar } from "../components/chatLeftSidebar";
 import { FilePreview } from "@/types/chat";
@@ -139,7 +138,11 @@ export function ChatInterface() {
 
   // Add agent selection state
   const [selectedAgentId, setSelectedAgentId] = useState<number | null>(null);
-  const [agents, setAgents] = useState<Agent[]>([]);
+
+  // Add global cache states to avoid repeated API calls
+  const [cachedAgents, setCachedAgents] = useState<any[]>([]);
+  const [agentsLoaded, setAgentsLoaded] = useState(false);
+  const [deploymentVersionLoaded, setDeploymentVersionLoaded] = useState(false);
 
   // Reset scroll to bottom state
   useEffect(() => {
@@ -181,6 +184,24 @@ export function ChatInterface() {
     setSidebarOpen(!sidebarOpen);
   };
 
+  // Load agents only once and cache the result
+  const loadAgentsOnce = async () => {
+    if (agentsLoaded) return; // Already loaded, skip
+
+    try {
+      const result = await fetchAllAgents();
+      if (result.success) {
+        setCachedAgents(result.data);
+        setAgentsLoaded(true);
+        log.log("Agent list loaded and cached successfully");
+      } else {
+        log.error("Failed to load agent list:", result.message);
+      }
+    } catch (error) {
+      log.error("Failed to load agent list:", error);
+    }
+  };
+
   // Handle right panel toggle - keep it simple and clear
   const toggleRightPanel = () => {
     setShowRightPanel(!showRightPanel);
@@ -190,6 +211,11 @@ export function ChatInterface() {
     if (!conversationManagement.initialized.current) {
       conversationManagement.initialized.current = true;
 
+      // Load agent list only once when component initializes
+      if (!agentsLoaded) {
+        loadAgentsOnce();
+      }
+
       // Get conversation history list, but don't auto-select the latest conversation
       conversationManagement.fetchConversationList()
         .then((dialogData) => {
@@ -204,24 +230,6 @@ export function ChatInterface() {
     }
   }, [appConfig]); // Add appConfig as dependency
 
-  // Load agent list once and reuse across child components to avoid duplicate /agent/list calls.
-  useEffect(() => {
-    let mounted = true;
-    (async () => {
-      try {
-        const res = await fetchAllAgents();
-        if (mounted && res?.success) {
-          setAgents(res.data || []);
-        }
-      } catch (e) {
-        log.error("Failed to fetch agents for chat page:", e);
-      }
-    })();
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
   // Add useEffect to listen for conversationId changes, ensure right sidebar is always closed when conversation switches
   useEffect(() => {
     // Ensure right sidebar is reset to closed state whenever conversation ID changes
@@ -914,13 +922,8 @@ export function ChatInterface() {
               setShouldScrollToBottom(false);
             }, 1000);
 
-            // Refresh history list
-            conversationManagement.fetchConversationList().catch((err) => {
-              log.error(
-                t("chatInterface.refreshDialogListFailedButContinue"),
-                err
-              );
-            });
+            // Note: Removed unnecessary conversation list refresh when loading historical messages
+            // Only refresh when creating, deleting, or renaming conversations
           } else {
             // No longer empty cache, only prompt no history messages
             conversationManagement.setConversationLoadErrorForId(
@@ -1046,13 +1049,8 @@ export function ChatInterface() {
             setShouldScrollToBottom(false);
           }, 1000);
 
-          // Refresh history list
-          conversationManagement.fetchConversationList().catch((err) => {
-            log.error(
-              t("chatInterface.refreshDialogListFailedButContinue"),
-              err
-            );
-          });
+          // Note: Removed unnecessary conversation list refresh when loading historical messages
+          // Only refresh when creating, deleting, or renaming conversations
         } else {
           // No longer empty cache, only prompt no history messages
           conversationManagement.setConversationLoadErrorForId(
@@ -1480,9 +1478,9 @@ export function ChatInterface() {
                 shouldScrollToBottom={shouldScrollToBottom}
                 selectedAgentId={selectedAgentId}
                 onAgentSelect={setSelectedAgentId}
-                initialAgents={agents}
                 onCitationHover={clearCompletedIndicator}
                 onScroll={clearCompletedIndicator}
+                cachedAgents={cachedAgents}
               />
             </div>
 
diff --git a/frontend/app/[locale]/chat/streaming/chatStreamMain.tsx b/frontend/app/[locale]/chat/streaming/chatStreamMain.tsx
@@ -40,7 +40,7 @@ export function ChatStreamMain({
   onAgentSelect,
   onCitationHover,
   onScroll,
-  initialAgents,
+  cachedAgents,
 }: ChatStreamMainProps) {
   const { t } = useTranslation();
   // Animation variants for ChatInput
@@ -376,7 +376,7 @@ export function ChatStreamMain({
                         onImageUpload={onImageUpload}
                         selectedAgentId={selectedAgentId}
                         onAgentSelect={onAgentSelect}
-                        initialAgents={initialAgents}
+                        cachedAgents={cachedAgents}
                       />
                     </motion.div>
                   </AnimatePresence>
@@ -474,7 +474,7 @@ export function ChatStreamMain({
               onImageUpload={onImageUpload}
               selectedAgentId={selectedAgentId}
               onAgentSelect={onAgentSelect}
-              initialAgents={initialAgents}
+              cachedAgents={cachedAgents}
             />
           </motion.div>
         </AnimatePresence>
diff --git a/frontend/hooks/useAuth.ts b/frontend/hooks/useAuth.ts
@@ -48,32 +48,19 @@ export function AuthProvider({ children }: { children: (value: AuthContextType)
   }, [isLoginModalOpen, isRegisterModalOpen])
 
   // Check deployment version and handle speed mode
-  // This function deduplicates network requests across the app instance using a module/global promise.
   const checkDeploymentVersion = async () => {
     try {
       setIsReady(false);
-      if (!(globalThis as any).__deploymentVersionPromise) {
-        (globalThis as any).__deploymentVersionPromise = (async () => {
-          try {
-            const resp = await fetch(API_ENDPOINTS.tenantConfig.deploymentVersion);
-            if (!resp.ok) return null;
-            const data = await resp.json();
-            return data.content?.deployment_version || data.deployment_version || null;
-          } catch (e) {
-            return null;
-          }
-        })();
-      }
-
-      const version = await (globalThis as any).__deploymentVersionPromise;
-      if (version) {
-        setIsSpeedMode(version === "speed");
-      } else {
-        setIsSpeedMode(false);
+      const response = await fetch(API_ENDPOINTS.tenantConfig.deploymentVersion);
+      if (response.ok) {
+        const data = await response.json();
+        const version = data.content?.deployment_version || data.deployment_version;
+        
+        setIsSpeedMode(version === 'speed');
+        // In speed mode, do not perform any auto login; UI should not depend on login
       }
-      // In speed mode, do not perform any auto login; UI should not depend on login
     } catch (error) {
-      log.error("Failed to check deployment version:", error);
+      log.error('Failed to check deployment version:', error);
       setIsSpeedMode(false);
     } finally {
       setIsReady(true);
diff --git a/frontend/services/agentConfigService.ts b/frontend/services/agentConfigService.ts
@@ -646,52 +646,38 @@ export const searchAgentInfo = async (agentId: number) => {
  * @returns list of available agents with agent_id, name, description, is_available
  */
 export const fetchAllAgents = async () => {
-  // Deduplicate concurrent fetches: reuse the in-flight promise if present.
-  // Use module-level promise variable.
-  if ((fetchAllAgents as any).__promise) {
-    return (fetchAllAgents as any).__promise;
-  }
-
-  const p = (async () => {
-    try {
-      const response = await fetch(API_ENDPOINTS.agent.list, {
-        headers: getAuthHeaders(),
-      });
-      if (!response.ok) {
-        throw new Error(`Request failed: ${response.status}`);
-      }
-      const data = await response.json();
-
-      // convert backend data to frontend format
-      const formattedAgents = data.map((agent: any) => ({
-        agent_id: agent.agent_id,
-        name: agent.name,
-        display_name: agent.display_name || agent.name,
-        description: agent.description,
-        author: agent.author,
-        is_available: agent.is_available,
-      }));
-
-      return {
-        success: true,
-        data: formattedAgents,
-        message: "",
-      };
-    } catch (error) {
-      log.error("Failed to get all Agent list:", error);
-      return {
-        success: false,
-        data: [],
-        message: "agentConfig.agents.listFetchFailed",
-      };
-    } finally {
-      // clear the in-flight promise after completion so future calls can refetch
-      delete (fetchAllAgents as any).__promise;
+  try {
+    const response = await fetch(API_ENDPOINTS.agent.list, {
+      headers: getAuthHeaders(),
+    });
+    if (!response.ok) {
+      throw new Error(`Request failed: ${response.status}`);
     }
-  })();
+    const data = await response.json();
 
-  (fetchAllAgents as any).__promise = p;
-  return p;
+    // convert backend data to frontend format
+    const formattedAgents = data.map((agent: any) => ({
+      agent_id: agent.agent_id,
+      name: agent.name,
+      display_name: agent.display_name || agent.name,
+      description: agent.description,
+      author: agent.author,
+      is_available: agent.is_available,
+    }));
+
+    return {
+      success: true,
+      data: formattedAgents,
+      message: "",
+    };
+  } catch (error) {
+    log.error("Failed to get all Agent list:", error);
+    return {
+      success: false,
+      data: [],
+      message: "agentConfig.agents.listFetchFailed",
+    };
+  }
 };
 
 /**
diff --git a/frontend/services/conversationService.ts b/frontend/services/conversationService.ts
diff --git a/frontend/services/versionService.ts b/frontend/services/versionService.ts
diff --git a/frontend/types/chat.ts b/frontend/types/chat.ts
