♻️ refactor: Message Cache Clearing Logic into Reusable Helper (#10226)

client/src/components/Agents/AgentDetail.tsx

@@ -11,9 +11,9 @@ import {
   AgentListResponse,
 } from 'librechat-data-provider';
 import type t from 'librechat-data-provider';
+import { renderAgentAvatar, clearMessagesCache } from '~/utils';
 import { useLocalize, useDefaultConvo } from '~/hooks';
 import { useChatContext } from '~/Providers';
-import { renderAgentAvatar } from '~/utils';
 
 interface SupportContact {
   name?: string;
@@ -56,10 +56,7 @@ const AgentDetail: React.FC<AgentDetailProps> = ({ agent, isOpen, onClose }) =>
 
       localStorage.setItem(`${LocalStorageKeys.AGENT_ID_PREFIX}0`, agent.id);
 
-      queryClient.setQueryData<t.TMessage[]>(
+      clearMessagesCache(queryClient, conversation?.conversationId);
-        [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
-        [],
-      );
       queryClient.invalidateQueries([QueryKeys.messages]);
 
       /** Template with agent configuration */

client/src/components/Agents/Marketplace.tsx

@@ -4,7 +4,7 @@ import { useOutletContext } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSearchParams, useParams, useNavigate } from 'react-router-dom';
 import { TooltipAnchor, Button, NewChatIcon, useMediaQuery } from '@librechat/client';
-import { PermissionTypes, Permissions, QueryKeys, Constants } from 'librechat-data-provider';
+import { PermissionTypes, Permissions, QueryKeys } from 'librechat-data-provider';
 import type t from 'librechat-data-provider';
 import type { ContextType } from '~/common';
 import { useDocumentTitle, useHasAccess, useLocalize, TranslationKeys } from '~/hooks';
@@ -13,11 +13,11 @@ import MarketplaceAdminSettings from './MarketplaceAdminSettings';
 import { SidePanelProvider, useChatContext } from '~/Providers';
 import { SidePanelGroup } from '~/components/SidePanel';
 import { OpenSidebar } from '~/components/Chat/Menus';
+import { cn, clearMessagesCache } from '~/utils';
 import CategoryTabs from './CategoryTabs';
 import AgentDetail from './AgentDetail';
 import SearchBar from './SearchBar';
 import AgentGrid from './AgentGrid';
-import { cn } from '~/utils';
 import store from '~/store';
 
 interface AgentMarketplaceProps {
@@ -224,10 +224,7 @@ const AgentMarketplace: React.FC<AgentMarketplaceProps> = ({ className = '' }) =
       window.open('/c/new', '_blank');
       return;
     }
-    queryClient.setQueryData<t.TMessage[]>(
+    clearMessagesCache(queryClient, conversation?.conversationId);
-      [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
-      [],
-    );
     queryClient.invalidateQueries([QueryKeys.messages]);
     newConversation();
   };

client/src/components/Chat/Menus/HeaderNewChat.tsx

@@ -1,8 +1,8 @@
+import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
-import { QueryKeys, Constants } from 'librechat-data-provider';
 import { TooltipAnchor, Button, NewChatIcon } from '@librechat/client';
-import type { TMessage } from 'librechat-data-provider';
 import { useChatContext } from '~/Providers';
+import { clearMessagesCache } from '~/utils';
 import { useLocalize } from '~/hooks';
 
 export default function HeaderNewChat() {
@@ -15,10 +15,7 @@ export default function HeaderNewChat() {
       window.open('/c/new', '_blank');
       return;
     }
-    queryClient.setQueryData<TMessage[]>(
+    clearMessagesCache(queryClient, conversation?.conversationId);
-      [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
-      [],
-    );
     queryClient.invalidateQueries([QueryKeys.messages]);
     newConversation();
   };

client/src/components/Nav/MobileNav.tsx

@@ -5,6 +5,7 @@ import { QueryKeys, Constants } from 'librechat-data-provider';
 import type { TMessage } from 'librechat-data-provider';
 import type { Dispatch, SetStateAction } from 'react';
 import { useLocalize, useNewConvo } from '~/hooks';
+import { clearMessagesCache } from '~/utils';
 import store from '~/store';
 
 export default function MobileNav({
@@ -57,10 +58,7 @@ export default function MobileNav({
         aria-label={localize('com_ui_new_chat')}
         className="m-1 inline-flex size-10 items-center justify-center rounded-full hover:bg-surface-hover"
         onClick={() => {
-          queryClient.setQueryData<TMessage[]>(
+          clearMessagesCache(queryClient, conversation?.conversationId);
-            [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
-            [],
-          );
           queryClient.invalidateQueries([QueryKeys.messages]);
           newConversation();
         }}

client/src/components/Nav/NewChat.tsx

@@ -5,6 +5,7 @@ import { QueryKeys, Constants } from 'librechat-data-provider';
 import { TooltipAnchor, NewChatIcon, MobileSidebar, Sidebar, Button } from '@librechat/client';
 import type { TMessage } from 'librechat-data-provider';
 import { useLocalize, useNewConvo } from '~/hooks';
+import { clearMessagesCache } from '~/utils';
 import store from '~/store';
 
 export default function NewChat({
@@ -33,10 +34,7 @@ export default function NewChat({
         window.open('/c/new', '_blank');
         return;
       }
-      queryClient.setQueryData<TMessage[]>(
+      clearMessagesCache(queryClient, conversation?.conversationId);
-        [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
-        [],
-      );
       queryClient.invalidateQueries([QueryKeys.messages]);
       newConvo();
       navigate('/c/new', { state: { focusChat: true } });

client/src/hooks/Conversations/useNavigateToConvo.tsx

@@ -3,7 +3,13 @@ import { useNavigate } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { QueryKeys, Constants, dataService } from 'librechat-data-provider';
 import type { TConversation, TEndpointsConfig, TModelsConfig } from 'librechat-data-provider';
-import { buildDefaultConvo, getDefaultEndpoint, getEndpointField, logger } from '~/utils';
+import {
+  getDefaultEndpoint,
+  clearMessagesCache,
+  buildDefaultConvo,
+  getEndpointField,
+  logger,
+} from '~/utils';
 import store from '~/store';
 
 const useNavigateToConvo = (index = 0) => {
@@ -80,7 +86,7 @@ const useNavigateToConvo = (index = 0) => {
       });
     }
     clearAllConversations(true);
-    queryClient.setQueryData([QueryKeys.messages, currentConvoId], []);
+    clearMessagesCache(queryClient, currentConvoId);
     if (convo.conversationId !== Constants.NEW_CONVO && convo.conversationId) {
       queryClient.invalidateQueries([QueryKeys.conversation, convo.conversationId]);
       fetchFreshData(convo);

client/src/utils/messages.ts

@@ -1,5 +1,6 @@
-import { ContentTypes } from 'librechat-data-provider';
+import { ContentTypes, QueryKeys, Constants } from 'librechat-data-provider';
 import type { TMessage, TMessageContentParts } from 'librechat-data-provider';
+import type { QueryClient } from '@tanstack/react-query';
 
 export const TEXT_KEY_DIVIDER = '|||';
 
@@ -146,3 +147,26 @@ export const scrollToEnd = (callback?: () => void) => {
     }
   }
 };
+
+/**
+ * Clears messages for both the specified conversation ID and the NEW_CONVO query key.
+ * This ensures that messages are properly cleared in all contexts, preventing stale data
+ * from persisting in the NEW_CONVO cache.
+ *
+ * @param queryClient - The React Query client instance
+ * @param conversationId - The conversation ID to clear messages for
+ */
+export const clearMessagesCache = (
+  queryClient: QueryClient,
+  conversationId: string | undefined | null,
+): void => {
+  const convoId = conversationId ?? Constants.NEW_CONVO;
+
+  // Clear messages for the current conversation
+  queryClient.setQueryData<TMessage[]>([QueryKeys.messages, convoId], []);
+
+  // Also clear NEW_CONVO messages if we're not already on NEW_CONVO
+  if (convoId !== Constants.NEW_CONVO) {
+    queryClient.setQueryData<TMessage[]>([QueryKeys.messages, Constants.NEW_CONVO], []);
+  }
+};