fix: force navigation to /chat/new on endpoint change and conversation deletions (#1141)

client/src/components/Nav/ClearConvos.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
 import { Dialog } from '~/components/ui/';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { ClearChatsButton } from './SettingsTabs/';
@@ -13,23 +13,23 @@ const ClearConvos = ({ open, onOpenChange }) => {
   const localize = useLocalize();
 
   // Clear all conversations
-  const clearConvos = useCallback(() => {
+  const clearConvos = () => {
     if (confirmClear) {
       console.log('Clearing conversations...');
-      clearConvosMutation.mutate({});
+      clearConvosMutation.mutate(
+        {},
+        {
+          onSuccess: () => {
+            newConversation();
+            refreshConversations();
+          },
+        },
+      );
       setConfirmClear(false);
     } else {
       setConfirmClear(true);
     }
-  }, [confirmClear, clearConvosMutation]);
-
-  // Refresh conversations after clearing
-  useEffect(() => {
-    if (clearConvosMutation.isSuccess) {
-      refreshConversations();
-      newConversation();
-    }
-  }, [clearConvosMutation.isSuccess, newConversation, refreshConversations]);
+  };
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>

client/src/components/Nav/NavLinks.tsx

@@ -5,7 +5,6 @@ import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider'
 import type { TConversation } from 'librechat-data-provider';
 import { Menu, Transition } from '@headlessui/react';
 import { ExportModel } from './ExportConversation';
-import ClearConvos from './ClearConvos';
 import Settings from './Settings';
 import NavLink from './NavLink';
 import Logout from './Logout';
@@ -23,7 +22,6 @@ export default function NavLinks() {
     enabled: !!isAuthenticated && startupConfig?.checkBalance,
   });
   const [showExports, setShowExports] = useState(false);
-  const [showClearConvos, setShowClearConvos] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const localize = useLocalize();
 
@@ -125,7 +123,6 @@ export default function NavLinks() {
         )}
       </Menu>
       {showExports && <ExportModel open={showExports} onOpenChange={setShowExports} />}
-      {showClearConvos && <ClearConvos open={showClearConvos} onOpenChange={setShowClearConvos} />}
       {showSettings && <Settings open={showSettings} onOpenChange={setShowSettings} />}
     </>
   );

client/src/components/Nav/SettingsTabs/General.tsx

@@ -1,6 +1,6 @@
 import { useRecoilState } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
-import React, { useState, useContext, useEffect, useCallback, useRef } from 'react';
+import React, { useState, useContext, useCallback, useRef } from 'react';
 import { useClearConversationsMutation } from 'librechat-data-provider';
 import {
   ThemeContext,
@@ -116,22 +116,23 @@ function General() {
   const contentRef = useRef(null);
   useOnClickOutside(contentRef, () => confirmClear && setConfirmClear(false), []);
 
-  useEffect(() => {
-    if (clearConvosMutation.isSuccess) {
-      newConversation();
-      refreshConversations();
-    }
-  }, [clearConvosMutation.isSuccess, newConversation, refreshConversations]);
-
-  const clearConvos = useCallback(() => {
+  const clearConvos = () => {
     if (confirmClear) {
       console.log('Clearing conversations...');
-      clearConvosMutation.mutate({});
       setConfirmClear(false);
+      clearConvosMutation.mutate(
+        {},
+        {
+          onSuccess: () => {
+            newConversation();
+            refreshConversations();
+          },
+        },
+      );
     } else {
       setConfirmClear(true);
     }
-  }, [confirmClear, clearConvosMutation]);
+  };
 
   const changeTheme = useCallback(
     (value: string) => {