Merge pull request #2121 from ModelEngine-Group/pyh/fix_duplicated_func_call_develop

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

Author: Phinease

frontend/app/[locale]/chat/components/chatAgentSelector.tsx

@@ -15,6 +15,7 @@ export function ChatAgentSelector({
   onAgentSelect,
   disabled = false,
   isInitialMode = false,
+  agents: propAgents,
 }: ChatAgentSelectorProps) {
   const [agents, setAgents] = useState<Agent[]>([]);
   const [isOpen, setIsOpen] = useState(false);
@@ -94,8 +95,9 @@ export function ChatAgentSelector({
   };
 
   useEffect(() => {
-    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(() => {

frontend/app/[locale]/chat/components/chatInput.tsx

@@ -23,7 +23,7 @@ import { useConfig } from "@/hooks/useConfig";
 import { extractColorsFromUri } from "@/lib/avatar";
 import log from "@/lib/logger";
 import { chatConfig } from "@/const/chatConfig";
-import { FilePreview } from "@/types/chat";
+import { FilePreview, Agent } from "@/types/chat";
 
 import { ChatAgentSelector } from "./chatAgentSelector";
 
@@ -305,6 +305,7 @@ interface ChatInputProps {
   onAttachmentsChange?: (attachments: FilePreview[]) => void;
   selectedAgentId?: number | null;
   onAgentSelect?: (agentId: number | null) => void;
+  cachedAgents?: Agent[]; // Optional cached agents to avoid repeated API calls
 }
 
 export function ChatInput({
@@ -317,6 +318,7 @@ export function ChatInput({
   onStop,
   onKeyDown,
   onRecordingStatusChange,
+  cachedAgents,
   onFileUpload,
   onImageUpload,
   attachments = [],
@@ -1021,6 +1023,7 @@ export function ChatInput({
             onAgentSelect={onAgentSelect || (() => {})}
             disabled={isLoading || isStreaming}
             isInitialMode={isInitialMode}
+            agents={cachedAgents}
           />
         </div>
 

frontend/app/[locale]/chat/internal/chatInterface.tsx

@@ -15,6 +15,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { conversationService } from "@/services/conversationService";
 import { storageService, convertImageUrlToApiUrl } from "@/services/storageService";
 import { useConversationManagement } from "@/hooks/chat/useConversationManagement";
+import { fetchAllAgents } from "@/services/agentConfigService";
 
 import { ChatSidebar } from "../components/chatLeftSidebar";
 import { FilePreview } from "@/types/chat";
@@ -133,6 +134,11 @@ export function ChatInterface() {
   // Add agent selection state
   const [selectedAgentId, setSelectedAgentId] = useState<number | null>(null);
 
+  // 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(() => {
     if (shouldScrollToBottom) {
@@ -173,6 +179,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);
@@ -182,6 +206,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) => {
@@ -888,13 +917,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(
@@ -1020,13 +1044,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(
@@ -1456,6 +1475,7 @@ export function ChatInterface() {
                 onAgentSelect={setSelectedAgentId}
                 onCitationHover={clearCompletedIndicator}
                 onScroll={clearCompletedIndicator}
+                cachedAgents={cachedAgents}
               />
             </div>
 

frontend/app/[locale]/chat/streaming/chatStreamMain.tsx

@@ -40,6 +40,7 @@ export function ChatStreamMain({
   onAgentSelect,
   onCitationHover,
   onScroll,
+  cachedAgents,
 }: ChatStreamMainProps) {
   const { t } = useTranslation();
   // Animation variants for ChatInput
@@ -375,6 +376,7 @@ export function ChatStreamMain({
                         onImageUpload={onImageUpload}
                         selectedAgentId={selectedAgentId}
                         onAgentSelect={onAgentSelect}
+                        cachedAgents={cachedAgents}
                       />
                     </motion.div>
                   </AnimatePresence>
@@ -472,6 +474,7 @@ export function ChatStreamMain({
               onImageUpload={onImageUpload}
               selectedAgentId={selectedAgentId}
               onAgentSelect={onAgentSelect}
+              cachedAgents={cachedAgents}
             />
           </motion.div>
         </AnimatePresence>

frontend/types/chat.ts

@@ -63,6 +63,7 @@ export interface ChatAgentSelectorProps {
   onAgentSelect: (agentId: number | null) => void;
   disabled?: boolean;
   isInitialMode?: boolean;
+  agents?: Agent[]; // Optional pre-loaded agents to avoid repeated API calls
 }
 
 // Search result type
@@ -173,6 +174,7 @@ export interface ChatStreamMainProps {
   onAgentSelect?: (agentId: number | null) => void;
   onCitationHover?: () => void;
   onScroll?: () => void;
+  cachedAgents?: Agent[]; // Optional cached agents to avoid repeated API calls
 }
 
 // Card item type for task window