♻️ 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/store/banner.ts

@@ -1,5 +0,0 @@
-import { atomWithLocalStorage } from './utils';
-
-const hideBannerHint = atomWithLocalStorage('hideBannerHint', [] as string[]);
-
-export default { hideBannerHint };

client/src/store/conversation.ts

@@ -1,47 +0,0 @@
-import { atom, selector, atomFamily } from 'recoil';
-import { TConversation, TMessagesAtom, TMessage, TAttachment } from 'librechat-data-provider';
-import { buildTree } from '~/utils';
-
-const conversation = atom<TConversation | null>({
-  key: 'conversation',
-  default: null,
-});
-
-// current messages of the conversation, must be an array
-// sample structure
-// [{text, sender, messageId, parentMessageId, isCreatedByUser}]
-const messages = atom<TMessagesAtom>({
-  key: 'messages',
-  default: [],
-});
-
-const messagesTree = selector({
-  key: 'messagesTree',
-  get: ({ get }) => {
-    return buildTree({ messages: get(messages) });
-  },
-});
-
-const messageAttachmentsMap = atom<Record<string, TAttachment[] | undefined>>({
-  key: 'messageAttachmentsMap',
-  default: {},
-});
-
-const latestMessage = atom<TMessage | null>({
-  key: 'latestMessage',
-  default: null,
-});
-
-const messagesSiblingIdxFamily = atomFamily<number, string | null | undefined>({
-  key: 'messagesSiblingIdx',
-  default: 0,
-});
-
-export default {
-  messages,
-  conversation,
-  messagesTree,
-  latestMessage,
-  messageAttachmentsMap,
-  messagesSiblingIdxFamily,
-};

client/src/store/conversations.ts

@@ -1,8 +0,0 @@
-import { atom } from 'recoil';
-
-const refreshConversationsHint = atom<number>({
-  key: 'refreshConversationsHint',
-  default: 1,
-});
-
-export default { refreshConversationsHint };

client/src/store/families.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import {
   atom,
   selector,
@@ -12,8 +13,8 @@ import {
 import { LocalStorageKeys, Constants } from 'librechat-data-provider';
 import type { TMessage, TPreset, TConversation, TSubmission } from 'librechat-data-provider';
 import type { TOptionSettings, ExtendedFile } from '~/common';
+import { useSetConvoContext } from '~/Providers/SetConvoContext';
 import { storeEndpointSettings, logger } from '~/utils';
-import { useEffect } from 'react';
 
 const latestMessageKeysAtom = atom<(string | number)[]>({
   key: 'latestMessageKeys',
@@ -75,16 +76,16 @@ const conversationByIndex = atomFamily<TConversation | null, string | number>({
       onSet(async (newValue) => {
         const index = Number(node.key.split('__')[1]);
         logger.log('conversation', 'Setting conversation:', { index, newValue });
-        if (newValue?.assistant_id) {
+        if (newValue?.assistant_id != null && newValue.assistant_id) {
           localStorage.setItem(
             `${LocalStorageKeys.ASST_ID_PREFIX}${index}${newValue.endpoint}`,
             newValue.assistant_id,
           );
         }
-        if (newValue?.agent_id) {
+        if (newValue?.agent_id != null && newValue.agent_id) {
           localStorage.setItem(`${LocalStorageKeys.AGENT_ID_PREFIX}${index}`, newValue.agent_id);
         }
-        if (newValue?.spec) {
+        if (newValue?.spec != null && newValue.spec) {
           localStorage.setItem(LocalStorageKeys.LAST_SPEC, newValue.spec);
         }
         if (newValue?.tools && Array.isArray(newValue.tools)) {
@@ -238,7 +239,13 @@ const audioRunFamily = atomFamily<string | null, string | number | null>({
   default: null,
 });
 
+const messagesSiblingIdxFamily = atomFamily<number, string | null | undefined>({
+  key: 'messagesSiblingIdx',
+  default: 0,
+});
+
 function useCreateConversationAtom(key: string | number) {
+  const hasSetConversation = useSetConvoContext();
   const [keys, setKeys] = useRecoilState(conversationKeysAtom);
   const setConversation = useSetRecoilState(conversationByIndex(key));
   const conversation = useRecoilValue(conversationByIndex(key));
@@ -249,7 +256,7 @@ function useCreateConversationAtom(key: string | number) {
     }
   }, [key, keys, setKeys]);
 
-  return { conversation, setConversation };
+  return { hasSetConversation, conversation, setConversation };
 }
 
 function useClearConvoState() {
@@ -260,7 +267,7 @@ function useClearConvoState() {
         const conversationKeys = await snapshot.getPromise(conversationKeysAtom);
 
         for (const conversationKey of conversationKeys) {
-          if (skipFirst && conversationKey == 0) {
+          if (skipFirst === true && conversationKey == 0) {
             continue;
           }
 
@@ -298,7 +305,7 @@ function useClearSubmissionState() {
         logger.log('submissionKeys', submissionKeys);
 
         for (const key of submissionKeys) {
-          if (skipFirst && key == 0) {
+          if (skipFirst === true && key == 0) {
             continue;
           }
 
@@ -320,12 +327,12 @@ function useClearLatestMessages(context?: string) {
       async (skipFirst?: boolean) => {
         const latestMessageKeys = await snapshot.getPromise(latestMessageKeysSelector);
         logger.log('[clearAllLatestMessages] latestMessageKeys', latestMessageKeys);
-        if (context) {
+        if (context != null && context) {
           logger.log(`[clearAllLatestMessages] context: ${context}`);
         }
 
         for (const key of latestMessageKeys) {
-          if (skipFirst && key == 0) {
+          if (skipFirst === true && key == 0) {
             continue;
           }
 
@@ -367,6 +374,7 @@ const updateConversationSelector = selectorFamily({
 });
 
 export default {
+  conversationKeysAtom,
   conversationByIndex,
   filesByIndex,
   presetByIndex,
@@ -380,6 +388,7 @@ export default {
   showBingToneSettingFamily,
   showPopoverFamily,
   latestMessageFamily,
+  messagesSiblingIdxFamily,
   allConversationsSelector,
   conversationByKeySelector,
   useClearConvoState,

client/src/store/index.ts

@@ -1,6 +1,4 @@
 import * as artifacts from './artifacts';
-import conversation from './conversation';
-import conversations from './conversations';
 import families from './families';
 import endpoints from './endpoints';
 import user from './user';
@@ -12,12 +10,10 @@ import preset from './preset';
 import prompts from './prompts';
 import lang from './language';
 import settings from './settings';
-import banner from './banner';
+import misc from './misc';
 export default {
   ...artifacts,
   ...families,
-  ...conversation,
-  ...conversations,
   ...endpoints,
   ...user,
   ...text,
@@ -28,5 +24,5 @@ export default {
   ...preset,
   ...lang,
   ...settings,
-  ...banner,
+  ...misc,
 };

client/src/store/misc.ts

@@ -0,0 +1,12 @@
+import { atom } from 'recoil';
+import { TAttachment } from 'librechat-data-provider';
+import { atomWithLocalStorage } from './utils';
+
+const hideBannerHint = atomWithLocalStorage('hideBannerHint', [] as string[]);
+
+const messageAttachmentsMap = atom<Record<string, TAttachment[] | undefined>>({
+  key: 'messageAttachmentsMap',
+  default: {},
+});
+
+export default { hideBannerHint, messageAttachmentsMap };

client/src/store/preset.ts

@@ -1,16 +1,6 @@
 import { atom } from 'recoil';
 import { TPreset } from 'librechat-data-provider';
 
-const presets = atom<TPreset[]>({
-  key: 'presets',
-  default: [],
-});
-
-const preset = atom<TPreset | null>({
-  key: 'preset',
-  default: null,
-});
-
 const defaultPreset = atom<TPreset | null>({
   key: 'defaultPreset',
   default: null,
@@ -22,8 +12,6 @@ const presetModalVisible = atom<boolean>({
 });
 
 export default {
-  preset,
-  presets,
   defaultPreset,
   presetModalVisible,
 };