♻️ refactor: Logout UX, Improved State Teardown, & Remove Unused Code (#5292)

* refactor: SearchBar and Nav components to streamline search functionality and improve state management

* refactor: remove refresh conversations

* chore: update useNewConvo calls to remove hardcoded default index

* refactor: null check for submission in useSSE hook

* refactor: remove useConversation hook and update useSearch to utilize useNewConvo

* refactor: remove conversation and banner store files; consolidate state management into misc; improve typing of families and add messagesSiblingIdxFamily

* refactor: more effectively clear all user/convo state without side effects on logout/delete user

* refactor: replace useParams with useLocation in SearchBar to correctly load conversation

* refactor: update SearchButtons to use button element and improve conversation ID handling

* refactor: use named function for `newConversation` for better call stack tracing

* refactor: enhance TermsAndConditionsModal to support array content and improve type definitions for terms of service

* refactor: add SetConvoProvider and message invalidation when navigating from search results to prevent initial route rendering edge cases

* refactor: rename getLocalStorageItems to localStorage and update imports for consistency

* refactor: move clearLocalStorage function to utils and simplify localStorage clearing logic

* refactor: migrate authentication mutations to a dedicated Auth data provider and update related tests

client/src/components/Nav/MobileNav.tsx

@@ -14,7 +14,7 @@ export default function MobileNav({
 }) {
   const localize = useLocalize();
   const queryClient = useQueryClient();
-  const { newConversation } = useNewConvo(0);
+  const { newConversation } = useNewConvo();
   const conversation = useRecoilValue(store.conversationByIndex(0));
   const { title = 'New Chat' } = conversation || {};
 

client/src/components/Nav/Nav.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useState, useMemo, memo } from 'react';
 import { useRecoilValue } from 'recoil';
-import { useParams } from 'react-router-dom';
 import { PermissionTypes, Permissions } from 'librechat-data-provider';
 import type { ConversationListResponse } from 'librechat-data-provider';
 import {
@@ -8,10 +7,8 @@ import {
   useHasAccess,
   useMediaQuery,
   useAuthContext,
-  useConversation,
   useLocalStorage,
   useNavScrolling,
-  useConversations,
 } from '~/hooks';
 import { useConversationsInfiniteQuery } from '~/data-provider';
 import { Conversations } from '~/components/Conversations';
@@ -33,7 +30,6 @@ const Nav = ({
   setNavVisible: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
   const localize = useLocalize();
-  const { conversationId } = useParams();
   const { isAuthenticated } = useAuthContext();
 
   const [navWidth, setNavWidth] = useState('260px');
@@ -67,11 +63,9 @@ const Nav = ({
     }
   }, [isSmallScreen]);
 
-  const { newConversation } = useConversation();
   const [showLoading, setShowLoading] = useState(false);
   const isSearchEnabled = useRecoilValue(store.isSearchEnabled);
 
-  const { refreshConversations } = useConversations();
   const { pageNumber, searchQuery, setPageNumber, searchQueryRes } = useSearchContext();
   const [tags, setTags] = useState<string[]>([]);
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, refetch } =
@@ -104,14 +98,6 @@ const Nav = ({
     [data, searchQuery, searchQueryRes?.data],
   );
 
-  const clearSearch = () => {
-    setPageNumber(1);
-    refreshConversations();
-    if (conversationId == 'search') {
-      newConversation();
-    }
-  };
-
   const toggleNavVisible = () => {
     setNavVisible((prev: boolean) => {
       localStorage.setItem('navVisible', JSON.stringify(!prev));
@@ -174,7 +160,10 @@ const Nav = ({
                       subHeaders={
                         <>
                           {isSearchEnabled === true && (
-                            <SearchBar clearSearch={clearSearch} isSmallScreen={isSmallScreen} />
+                            <SearchBar
+                              setPageNumber={setPageNumber}
+                              isSmallScreen={isSmallScreen}
+                            />
                           )}
                           {hasAccessToBookmarks === true && (
                             <>

client/src/components/Nav/SearchBar.tsx

@@ -1,27 +1,39 @@
 import debounce from 'lodash/debounce';
 import { Search, X } from 'lucide-react';
 import { useSetRecoilState } from 'recoil';
+import { useLocation } from 'react-router-dom';
 import { QueryKeys } from 'librechat-data-provider';
 import { useQueryClient } from '@tanstack/react-query';
 import { forwardRef, useState, useCallback, useMemo, Ref } from 'react';
-import { useLocalize } from '~/hooks';
+import { useLocalize, useNewConvo } from '~/hooks';
 import { cn } from '~/utils';
 import store from '~/store';
 
 type SearchBarProps = {
-  clearSearch: () => void;
   isSmallScreen?: boolean;
+  setPageNumber: React.Dispatch<React.SetStateAction<number>>;
 };
 
 const SearchBar = forwardRef((props: SearchBarProps, ref: Ref<HTMLDivElement>) => {
-  const { clearSearch, isSmallScreen } = props;
+  const localize = useLocalize();
+  const location = useLocation();
   const queryClient = useQueryClient();
+  const { setPageNumber, isSmallScreen } = props;
+
+  const [text, setText] = useState('');
+  const [showClearIcon, setShowClearIcon] = useState(false);
+
+  const { newConversation } = useNewConvo();
   const clearConvoState = store.useClearConvoState();
   const setSearchQuery = useSetRecoilState(store.searchQuery);
-  const [showClearIcon, setShowClearIcon] = useState(false);
-  const [text, setText] = useState('');
   const setIsSearching = useSetRecoilState(store.isSearching);
-  const localize = useLocalize();
+
+  const clearSearch = useCallback(() => {
+    setPageNumber(1);
+    if (location.pathname.includes('/search')) {
+      newConversation();
+    }
+  }, [newConversation, setPageNumber, location.pathname]);
 
   const clearText = useCallback(() => {
     setShowClearIcon(false);

client/src/components/Nav/SettingsTabs/Data/ClearChats.tsx

@@ -1,14 +1,13 @@
 import React, { useState } from 'react';
 import { useClearConversationsMutation } from 'librechat-data-provider/react-query';
 import { Label, Button, OGDialog, OGDialogTrigger, Spinner } from '~/components';
-import { useConversation, useConversations, useLocalize } from '~/hooks';
+import { useLocalize, useNewConvo } from '~/hooks';
 import OGDialogTemplate from '~/components/ui/OGDialogTemplate';
 
 export const ClearChats = () => {
   const localize = useLocalize();
   const [open, setOpen] = useState(false);
-  const { newConversation } = useConversation();
-  const { refreshConversations } = useConversations();
+  const { newConversation } = useNewConvo();
   const clearConvosMutation = useClearConversationsMutation();
 
   const clearConvos = () => {
@@ -17,7 +16,6 @@ export const ClearChats = () => {
       {
         onSuccess: () => {
           newConversation();
-          refreshConversations();
         },
       },
     );

client/src/components/Nav/SettingsTabs/Data/ImportConversations.tsx

@@ -2,9 +2,9 @@ import { useState, useRef } from 'react';
 import { Import } from 'lucide-react';
 import type { TError } from 'librechat-data-provider';
 import { useUploadConversationsMutation } from '~/data-provider';
-import { useLocalize, useConversations } from '~/hooks';
 import { useToastContext } from '~/Providers';
 import { Spinner } from '~/components/svg';
+import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 
 function ImportConversations() {
@@ -15,11 +15,9 @@ function ImportConversations() {
   const [, setErrors] = useState<string[]>([]);
   const [allowImport, setAllowImport] = useState(true);
   const setError = (error: string) => setErrors((prevErrors) => [...prevErrors, error]);
-  const { refreshConversations } = useConversations();
 
   const uploadFile = useUploadConversationsMutation({
     onSuccess: () => {
-      refreshConversations();
       showToast({ message: localize('com_ui_import_conversation_success') });
       setAllowImport(true);
     },
@@ -29,7 +27,7 @@ function ImportConversations() {
       setError(
         (error as TError).response?.data?.message ?? 'An error occurred while uploading the file.',
       );
-      if (error?.toString().includes('Unsupported import type')) {
+      if (error?.toString().includes('Unsupported import type') === true) {
         showToast({
           message: localize('com_ui_import_conversation_file_type_error'),
           status: 'error',