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

[Specification Details] 1.Remove the repeated calls to the /agent/list, /conversation/list, and deployment_version interfaces. The first call results contain content for use elsewhere.

Author: YehongPan

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

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

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

@@ -31,6 +31,7 @@ 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({
@@ -310,6 +311,8 @@ 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[];
 }
 
 export function ChatInput({
@@ -328,6 +331,7 @@ export function ChatInput({
   onAttachmentsChange,
   selectedAgentId = null,
   onAgentSelect,
+  initialAgents,
 }: ChatInputProps) {
   const [isRecording, setIsRecording] = useState(false);
   const [recordingStatus, setRecordingStatus] = useState<
@@ -1026,6 +1030,7 @@ export function ChatInput({
             onAgentSelect={onAgentSelect || (() => {})}
             disabled={isLoading || isStreaming}
             isInitialMode={isInitialMode}
+            initialAgents={initialAgents}
           />
         </div>
 

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

@@ -15,6 +15,8 @@ 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 type { Agent } from "@/types/chat";
 
 import { ChatSidebar } from "../components/chatLeftSidebar";
 import { FilePreview } from "@/types/chat";
@@ -137,6 +139,7 @@ export function ChatInterface() {
 
   // Add agent selection state
   const [selectedAgentId, setSelectedAgentId] = useState<number | null>(null);
+  const [agents, setAgents] = useState<Agent[]>([]);
 
   // Reset scroll to bottom state
   useEffect(() => {
@@ -201,6 +204,24 @@ 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
@@ -1459,6 +1480,7 @@ export function ChatInterface() {
                 shouldScrollToBottom={shouldScrollToBottom}
                 selectedAgentId={selectedAgentId}
                 onAgentSelect={setSelectedAgentId}
+                initialAgents={agents}
                 onCitationHover={clearCompletedIndicator}
                 onScroll={clearCompletedIndicator}
               />

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

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

frontend/hooks/useAuth.ts

@@ -48,19 +48,32 @@ 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);
-      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
+      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);
       }
+      // 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);

frontend/services/agentConfigService.ts

@@ -646,38 +646,52 @@ export const searchAgentInfo = async (agentId: number) => {
  * @returns list of available agents with agent_id, name, description, is_available
  */
 export const fetchAllAgents = 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();
+  // 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;
+  }
 
-    // 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,
-    }));
+  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",
-    };
-  }
+      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;
+    }
+  })();
+
+  (fetchAllAgents as any).__promise = p;
+  return p;
 };
 
 /**

frontend/services/conversationService.ts

@@ -12,6 +12,10 @@ import log from "@/lib/logger";
 // @ts-ignore
 const fetch = fetchWithAuth;
 
+// Simple in-memory cache to ensure conversation list is fetched once per app session
+// and reused by callers. Provide an invalidate function if callers need to refresh.
+let conversationListCache: { ts: number; data: ConversationListItem[] } | null = null;
+
 // This helper function now ALWAYS connects through the current host and port.
 // This relies on our custom `server.js` to handle the proxying in all environments.
 const getWebSocketUrl = (endpoint: string): string => {
@@ -24,15 +28,34 @@ const getWebSocketUrl = (endpoint: string): string => {
 export const conversationService = {
   // Get conversation list
   async getList(): Promise<ConversationListItem[]> {
-    const response = await fetch(API_ENDPOINTS.conversation.list);
+    try {
+      // If we already fetched the conversation list earlier in this session, return it.
+      if (conversationListCache) {
+        return conversationListCache.data;
+      }
 
-    const data = await response.json() as ConversationListResponse;
-    
-    if (data.code === 0) {
-      return data.data || [];
+      const response = await fetch(API_ENDPOINTS.conversation.list);
+      const data = (await response.json()) as ConversationListResponse;
+
+      if (data.code === 0) {
+        const list = data.data || [];
+        conversationListCache = { ts: Date.now(), data: list };
+        return list;
+      }
+
+      throw new ApiError(data.code, data.message);
+    } catch (error) {
+      // On error, if we have cached data return it as a fallback
+      if (conversationListCache) {
+        return conversationListCache.data;
+      }
+      throw error;
     }
-    
-    throw new ApiError(data.code, data.message);
+  },
+
+  // Invalidate the cached conversation list (call when you need to force refresh)
+  invalidateListCache() {
+    conversationListCache = null;
   },
 
   // Create new conversation
@@ -48,6 +71,8 @@ export const conversationService = {
     const data = await response.json();
 
     if (data.code === 0) {
+      // Invalidate conversation list cache so callers will fetch updated list
+      conversationListCache = null;
       return data.data;
     }
 
@@ -68,6 +93,8 @@ export const conversationService = {
     const data = await response.json();
 
     if (data.code === 0) {
+      // Invalidate conversation list cache since titles changed
+      conversationListCache = null;
       return data.data;
     }
 
@@ -114,6 +141,8 @@ export const conversationService = {
     const data = await response.json();
 
     if (data.code === 0) {
+      // Invalidate conversation list cache because an item was removed
+      conversationListCache = null;
       return true;
     }
 
@@ -802,7 +831,21 @@ export const conversationService = {
     const data = await response.json();
 
     if (data.code === 0) {
-      return data.data;
+      const title = data.data;
+      // If we have a cached conversation list, update the corresponding item's title
+      if (conversationListCache && Array.isArray(conversationListCache.data)) {
+        const idx = conversationListCache.data.findIndex(
+          (c) => c.conversation_id === params.conversation_id
+        );
+        if (idx >= 0) {
+          // Update in-place and refresh timestamp
+          conversationListCache.data[idx].conversation_title =
+            title || conversationListCache.data[idx].conversation_title;
+          conversationListCache.ts = Date.now();
+        }
+      }
+
+      return title;
     }
 
     throw new ApiError(data.code, data.message);

frontend/services/versionService.ts

@@ -17,22 +17,27 @@ export class VersionService {
    */
   async getAppVersion(): Promise<string> {
     try {
-      const response = await fetchWithErrorHandling(
-        API_ENDPOINTS.tenantConfig.deploymentVersion
-      );
-
-      if (response.status !== STATUS_CODES.SUCCESS) {
-        log.warn("Failed to fetch app version, using fallback");
-        return APP_VERSION;
-      }
-
-      const data: DeploymentVersionResponse = await response.json();
-      const version = data.app_version || data.content?.app_version;
-
-      if (version) {
-        return version;
+      // Reuse a global promise to deduplicate deployment_version calls across the app
+      if (!(globalThis as any).__deploymentVersionPromise) {
+        (globalThis as any).__deploymentVersionPromise = (async () => {
+          try {
+            const response = await fetchWithErrorHandling(
+              API_ENDPOINTS.tenantConfig.deploymentVersion
+            );
+            if (response.status !== STATUS_CODES.SUCCESS) {
+              return null;
+            }
+            const data: DeploymentVersionResponse = await response.json();
+            return data.app_version || data.content?.app_version || null;
+          } catch (e) {
+            log.error("Error fetching app version (inner):", e);
+            return null;
+          }
+        })();
       }
 
+      const version = await (globalThis as any).__deploymentVersionPromise;
+      if (version) return version;
       log.warn("App version not found in response, using fallback");
       return APP_VERSION;
     } catch (error) {