♻️ 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/Auth/__tests__/Login.spec.tsx

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { getByTestId, render, waitFor } from 'test/layout-test-utils';
 import * as mockDataProvider from 'librechat-data-provider/react-query';
 import type { TStartupConfig } from 'librechat-data-provider';
+import * as authDataProvider from '~/data-provider/Auth/mutations';
 import AuthLayout from '~/components/Auth/AuthLayout';
 import Login from '~/components/Auth/Login';
 
@@ -61,7 +62,7 @@ const setup = ({
   },
 } = {}) => {
   const mockUseLoginUser = jest
-    .spyOn(mockDataProvider, 'useLoginUserMutation')
+    .spyOn(authDataProvider, 'useLoginUserMutation')
     //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
     .mockReturnValue(useLoginUserReturnValue);
   const mockUseGetUserQuery = jest

client/src/components/Auth/__tests__/LoginForm.spec.tsx

@@ -2,6 +2,7 @@ import { render, getByTestId } from 'test/layout-test-utils';
 import userEvent from '@testing-library/user-event';
 import * as mockDataProvider from 'librechat-data-provider/react-query';
 import type { TStartupConfig } from 'librechat-data-provider';
+import * as authDataProvider from '~/data-provider/Auth/mutations';
 import Login from '../LoginForm';
 
 jest.mock('librechat-data-provider/react-query');
@@ -66,7 +67,7 @@ const setup = ({
   },
 } = {}) => {
   const mockUseLoginUser = jest
-    .spyOn(mockDataProvider, 'useLoginUserMutation')
+    .spyOn(authDataProvider, 'useLoginUserMutation')
     //@ts-ignore - we don't need all parameters of the QueryObserverSuccessResult
     .mockReturnValue(useLoginUserReturnValue);
   const mockUseGetUserQuery = jest

client/src/components/Chat/Messages/SearchButtons.tsx

@@ -8,33 +8,34 @@ export default function SearchButtons({ message }: { message: TMessage }) {
   const localize = useLocalize();
   const { searchQueryRes } = useSearchContext();
   const { navigateWithLastTools } = useNavigateToConvo();
+  const conversationId = message.conversationId ?? '';
 
-  if (!message.conversationId) {
+  if (!conversationId) {
     return null;
   }
 
-  const clickHandler = (event: React.MouseEvent<HTMLAnchorElement>) => {
+  const clickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
-    const conversation = getConversationById(searchQueryRes?.data, message.conversationId);
+    const conversation = getConversationById(searchQueryRes?.data, conversationId);
     if (!conversation) {
       return;
     }
 
     document.title = message.title ?? '';
-    navigateWithLastTools(conversation);
+    navigateWithLastTools(conversation, true, true);
   };
 
   return (
-    <div className="visible mt-0 flex items-center justify-center gap-1 self-end text-gray-400 lg:justify-start">
-      <a
-        className="ml-0 flex cursor-pointer items-center gap-1.5 rounded-md p-1 text-xs hover:text-gray-900 hover:underline dark:text-gray-400/70 dark:hover:text-gray-200 disabled:dark:hover:text-gray-400"
+    <div className="visible mt-0 flex items-center justify-center gap-1 self-end text-text-secondary lg:justify-start">
+      <button
+        className="ml-0 flex cursor-pointer items-center gap-1.5 rounded-md p-1 text-xs hover:text-text-primary hover:underline"
         onClick={clickHandler}
         title={localize('com_ui_go_to_conversation')}
       >
         <Link className="icon-sm" />
         {message.title}
-      </a>
+      </button>
     </div>
   );
 }

client/src/components/Conversations/Convo.tsx

@@ -6,7 +6,7 @@ import { Constants } from 'librechat-data-provider';
 import { useGetEndpointsQuery } from 'librechat-data-provider/react-query';
 import type { MouseEvent, FocusEvent, KeyboardEvent } from 'react';
 import type { TConversation } from 'librechat-data-provider';
-import { useConversations, useNavigateToConvo, useMediaQuery, useLocalize } from '~/hooks';
+import { useNavigateToConvo, useMediaQuery, useLocalize } from '~/hooks';
 import { useUpdateConversationMutation } from '~/data-provider';
 import EndpointIcon from '~/components/Endpoints/EndpointIcon';
 import { NotificationSeverity } from '~/common';
@@ -36,7 +36,6 @@ export default function Conversation({
   const activeConvos = useRecoilValue(store.allConversationsSelector);
   const { data: endpointsConfig } = useGetEndpointsQuery();
   const { navigateWithLastTools } = useNavigateToConvo();
-  const { refreshConversations } = useConversations();
   const { showToast } = useToastContext();
   const { conversationId, title } = conversation;
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -97,7 +96,6 @@ export default function Conversation({
       updateConvoMutation.mutate(
         { conversationId, title: titleInput ?? '' },
         {
-          onSuccess: () => refreshConversations(),
           onError: () => {
             setTitleInput(title);
             showToast({
@@ -109,7 +107,7 @@ export default function Conversation({
         },
       );
     },
-    [title, titleInput, conversationId, showToast, refreshConversations, updateConvoMutation],
+    [title, titleInput, conversationId, showToast, updateConvoMutation],
   );
 
   const handleKeyDown = useCallback(

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',

client/src/components/ui/TermsAndConditionsModal.tsx

@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+import type { TTermsOfService } from 'librechat-data-provider';
 import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
 import DialogTemplate from '~/components/ui/DialogTemplate';
 import { useAcceptTermsMutation } from '~/data-provider';
@@ -19,7 +21,7 @@ const TermsAndConditionsModal = ({
   onDecline: () => void;
   title?: string;
   contentUrl?: string;
-  modalContent?: string;
+  modalContent?: TTermsOfService['modalContent'];
 }) => {
   const localize = useLocalize();
   const { showToast } = useToastContext();
@@ -49,6 +51,18 @@ const TermsAndConditionsModal = ({
     onOpenChange(isOpen);
   };
 
+  const content = useMemo(() => {
+    if (typeof modalContent === 'string') {
+      return modalContent;
+    }
+
+    if (Array.isArray(modalContent)) {
+      return modalContent.join('\n');
+    }
+
+    return '';
+  }, [modalContent]);
+
   return (
     <OGDialog open={open} onOpenChange={handleOpenChange}>
       <DialogTemplate
@@ -65,8 +79,8 @@ const TermsAndConditionsModal = ({
             aria-label={localize('com_ui_terms_and_conditions')}
           >
             <div className="prose dark:prose-invert w-full max-w-none !text-text-primary">
-              {modalContent != null && modalContent ? (
-                <MarkdownLite content={modalContent} />
+              {content !== '' ? (
+                <MarkdownLite content={content} />
               ) : (
                 <p>{localize('com_ui_no_terms_content')}</p>
               )}