♾️ style: Infinite Scroll Nav and Sort Convos by Date/Usage (#1708)

* Style: Infinite Scroll and Group convos by date

* Style: Infinite Scroll and Group convos by date- Redesign NavBar

* Style: Infinite Scroll and Group convos by date- Redesign NavBar - Clean code

* Style: Infinite Scroll and Group convos by date- Redesign NavBar - Redesign NewChat Component

* Style: Infinite Scroll and Group convos by date- Redesign NavBar - Redesign NewChat Component

* Style: Infinite Scroll and Group convos by date- Redesign NavBar - Redesign NewChat Component

* Including OpenRouter and Mistral icon

* refactor(Conversations): cleanup use of utility functions and typing

* refactor(Nav/NewChat): use localStorage `lastConversationSetup` to determine the endpoint to use, as well as icons -> JSX components, remove use of `endpointSelected`

* refactor: remove use of `isFirstToday`

* refactor(Nav): remove use of `endpointSelected`, consolidate scrolling logic to its own hook `useNavScrolling`, remove use of recoil `conversation`

* refactor: Add spinner to bottom of list, throttle fetching, move query hooks to client workspace

* chore: sort by `updatedAt` field

* refactor: optimize conversation infinite query, use optimistic updates, add conversation helpers for managing pagination, remove unnecessary operations

* feat: gen_title route for generating the title for the conversation

* style(Convo): change hover bg-color

* refactor: memoize groupedConversations and return as array of tuples, correctly update convos pre/post message stream, only call genTitle if conversation is new, make `addConversation` dynamically either add/update depending if convo exists in pages already, reorganize type definitions

* style: rename Header NewChat Button -> HeaderNewChat, add NewChatIcon, closely match main Nav New Chat button to ChatGPT

* style(NewChat): add hover bg color

* style: cleanup comments, match ChatGPT nav styling, redesign search bar, make part of new chat sticky header, move Nav under same parent as outlet/mobilenav, remove legacy code, search only if searchQuery is not empty

* feat: add tests for conversation helpers and ensure no duplicate conversations are ever grouped

* style: hover bg-color

* feat: alt-click on convo item to open conversation in new tab

* chore: send error message when `gen_title` fails

---------

Co-authored-by: Walber Cardoso <walbercardoso@gmail.com>

client/src/data-provider/mutations.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { UseMutationResult } from '@tanstack/react-query';
+import type t from 'librechat-data-provider';
 import type {
   TFileUpload,
   UploadMutationOptions,
@@ -14,12 +15,99 @@ import type {
   TPreset,
   UploadAvatarOptions,
   AvatarUploadResponse,
+  TConversation,
 } from 'librechat-data-provider';
-
-import { dataService, MutationKeys } from 'librechat-data-provider';
+import { dataService, MutationKeys, QueryKeys } from 'librechat-data-provider';
+import { updateConversation, deleteConversation, updateConvoFields } from '~/utils';
 import { useSetRecoilState } from 'recoil';
 import store from '~/store';
 
+/** Conversations */
+export const useGenTitleMutation = (): UseMutationResult<
+  t.TGenTitleResponse,
+  unknown,
+  t.TGenTitleRequest,
+  unknown
+> => {
+  const queryClient = useQueryClient();
+  return useMutation((payload: t.TGenTitleRequest) => dataService.genTitle(payload), {
+    onSuccess: (response, vars) => {
+      queryClient.setQueryData(
+        [QueryKeys.conversation, vars.conversationId],
+        (convo: TConversation | undefined) => {
+          if (!convo) {
+            return convo;
+          }
+          return { ...convo, title: response.title };
+        },
+      );
+      queryClient.setQueryData<t.ConversationData>([QueryKeys.allConversations], (convoData) => {
+        if (!convoData) {
+          return convoData;
+        }
+        return updateConvoFields(convoData, {
+          conversationId: vars.conversationId,
+          title: response.title,
+        } as TConversation);
+      });
+    },
+  });
+};
+
+export const useUpdateConversationMutation = (
+  id: string,
+): UseMutationResult<
+  t.TUpdateConversationResponse,
+  unknown,
+  t.TUpdateConversationRequest,
+  unknown
+> => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    (payload: t.TUpdateConversationRequest) => dataService.updateConversation(payload),
+    {
+      onSuccess: (updatedConvo) => {
+        queryClient.setQueryData([QueryKeys.conversation, id], updatedConvo);
+        queryClient.setQueryData<t.ConversationData>([QueryKeys.allConversations], (convoData) => {
+          if (!convoData) {
+            return convoData;
+          }
+          return updateConversation(convoData, updatedConvo);
+        });
+      },
+    },
+  );
+};
+
+export const useDeleteConversationMutation = (
+  id?: string,
+): UseMutationResult<
+  t.TDeleteConversationResponse,
+  unknown,
+  t.TDeleteConversationRequest,
+  unknown
+> => {
+  const queryClient = useQueryClient();
+  return useMutation(
+    (payload: t.TDeleteConversationRequest) => dataService.deleteConversation(payload),
+    {
+      onSuccess: () => {
+        if (!id) {
+          return;
+        }
+        queryClient.setQueryData([QueryKeys.conversation, id], null);
+        queryClient.setQueryData<t.ConversationData>([QueryKeys.allConversations], (convoData) => {
+          if (!convoData) {
+            return convoData;
+          }
+          const update = deleteConversation(convoData, id);
+          return update;
+        });
+      },
+    },
+  );
+};
+
 export const useUploadImageMutation = (
   options?: UploadMutationOptions,
 ): UseMutationResult<