fix: Add useBackToNewChat Hook for Back Navigation Handling

- Introduced a new hook `useBackToNewChat` to manage state when navigating back to the `/c/new` route.
- The hook listens for browser back/forward navigation events and resets the conversation state appropriately.
- Integrated the hook into `ChatRoute.tsx` to ensure proper functionality during navigation.
- Added documentation detailing the problem, solution, and implementation of the new hook.

client/src/hooks/Conversations/index.ts

@@ -3,6 +3,7 @@ export { default as useGetSender } from './useGetSender';
 export { default as useDefaultConvo } from './useDefaultConvo';
 export { default as useSearchEnabled } from './useSearchEnabled';
 export { default as useGenerateConvo } from './useGenerateConvo';
+export { default as useBackToNewChat } from './useBackToNewChat';
 export { default as useDebouncedInput } from './useDebouncedInput';
 export { default as useBookmarkSuccess } from './useBookmarkSuccess';
 export { default as useNavigateToConvo } from './useNavigateToConvo';

client/src/hooks/Conversations/useBackToNewChat.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { QueryKeys, Constants } from 'librechat-data-provider';
+import type { TMessage } from 'librechat-data-provider';
+import { useNewConvo } from '~/hooks';
+import { logger } from '~/utils';
+import store from '~/store';
+
+/**
+ * Hook to detect and handle back navigation to /c/new
+ * This solves the issue where navigating back to new chat doesn't properly reset state
+ */
+export default function useBackToNewChat(index = 0) {
+  const queryClient = useQueryClient();
+  const { newConversation } = useNewConvo(index);
+  const { conversation } = store.useCreateConversationAtom(index);
+
+  // Listen for popstate events (back/forward button navigation)
+  useEffect(() => {
+    const handlePopState = () => {
+      const currentPath = window.location.pathname;
+      if (currentPath === '/c/new' && conversation?.conversationId !== Constants.NEW_CONVO) {
+        logger.log('conversation', 'Back navigation to /c/new detected, resetting state');
+
+        // Clear messages
+        queryClient.setQueryData<TMessage[]>(
+          [QueryKeys.messages, conversation?.conversationId ?? Constants.NEW_CONVO],
+          [],
+        );
+        queryClient.invalidateQueries([QueryKeys.messages]);
+
+        // Reset conversation
+        newConversation();
+      }
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, [conversation?.conversationId, queryClient, newConversation]);
+}

client/src/routes/ChatRoute.tsx

@@ -5,7 +5,13 @@ import { Constants, EModelEndpoint } from 'librechat-data-provider';
 import { useGetModelsQuery } from 'librechat-data-provider/react-query';
 import type { TPreset } from 'librechat-data-provider';
 import { useGetConvoIdQuery, useGetStartupConfig, useGetEndpointsQuery } from '~/data-provider';
-import { useNewConvo, useAppStartup, useAssistantListMap, useIdChangeEffect } from '~/hooks';
+import {
+  useNewConvo,
+  useAppStartup,
+  useBackToNewChat,
+  useIdChangeEffect,
+  useAssistantListMap,
+} from '~/hooks';
 import { getDefaultModelSpec, getModelSpecPreset, logger } from '~/utils';
 import { ToolCallsMapProvider } from '~/Providers';
 import ChatView from '~/components/Chat/ChatView';
@@ -32,6 +38,7 @@ export default function ChatRoute() {
   useIdChangeEffect(conversationId);
   const { hasSetConversation, conversation } = store.useCreateConversationAtom(index);
   const { newConversation } = useNewConvo();
+  useBackToNewChat(index);
 
   const modelsQuery = useGetModelsQuery({
     enabled: isAuthenticated,