♾️ 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<

client/src/data-provider/queries.ts

@@ -1,6 +1,18 @@
 import { QueryKeys, dataService } from 'librechat-data-provider';
-import { UseQueryOptions, useQuery, QueryObserverResult } from '@tanstack/react-query';
-import type { TPreset, TFile } from 'librechat-data-provider';
+import { useQuery, useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
+import type {
+  UseInfiniteQueryOptions,
+  QueryObserverResult,
+  UseQueryOptions,
+} from '@tanstack/react-query';
+import type t from 'librechat-data-provider';
+import type {
+  TPreset,
+  TFile,
+  ConversationListResponse,
+  ConversationListParams,
+} from 'librechat-data-provider';
+import { findPageForConversation } from '~/utils';
 
 export const useGetFiles = <TData = TFile[] | boolean>(
   config?: UseQueryOptions<TFile[], unknown, TData>,
@@ -38,3 +50,82 @@ export const useGetEndpointsConfigOverride = <TData = unknown | boolean>(
     },
   );
 };
+
+export const useGetConvoIdQuery = (
+  id: string,
+  config?: UseQueryOptions<t.TConversation>,
+): QueryObserverResult<t.TConversation> => {
+  const queryClient = useQueryClient();
+  return useQuery<t.TConversation>(
+    [QueryKeys.conversation, id],
+    () => {
+      const defaultQuery = () => dataService.getConversationById(id);
+      const convosQuery = queryClient.getQueryData<t.ConversationData>([
+        QueryKeys.allConversations,
+      ]);
+
+      if (!convosQuery) {
+        return defaultQuery();
+      }
+
+      const { pageIndex, convIndex } = findPageForConversation(convosQuery, { conversationId: id });
+
+      if (pageIndex > -1 && convIndex > -1) {
+        return convosQuery.pages[pageIndex].conversations[convIndex];
+      }
+
+      return defaultQuery();
+    },
+    {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      refetchOnMount: false,
+      ...config,
+    },
+  );
+};
+
+export const useSearchInfiniteQuery = (
+  params?: ConversationListParams & { searchQuery?: string },
+  config?: UseInfiniteQueryOptions<ConversationListResponse, unknown>,
+) => {
+  return useInfiniteQuery<ConversationListResponse, unknown>(
+    [QueryKeys.searchConversations, params], // Include the searchQuery in the query key
+    ({ pageParam = '1' }) =>
+      dataService.listConversationsByQuery({ ...params, pageNumber: pageParam }),
+    {
+      getNextPageParam: (lastPage) => {
+        const currentPageNumber = Number(lastPage.pageNumber);
+        const totalPages = Number(lastPage.pages);
+        return currentPageNumber < totalPages ? currentPageNumber + 1 : undefined;
+      },
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      refetchOnMount: false,
+      ...config,
+    },
+  );
+};
+
+export const useConversationsInfiniteQuery = (
+  params?: ConversationListParams,
+  config?: UseInfiniteQueryOptions<ConversationListResponse, unknown>,
+) => {
+  return useInfiniteQuery<ConversationListResponse, unknown>(
+    [QueryKeys.allConversations],
+    ({ pageParam = '' }) =>
+      dataService.listConversations({ ...params, pageNumber: pageParam?.toString() }),
+    {
+      getNextPageParam: (lastPage) => {
+        const currentPageNumber = Number(lastPage.pageNumber);
+        const totalPages = Number(lastPage.pages); // Convert totalPages to a number
+        // If the current page number is less than total pages, return the next page number
+        return currentPageNumber < totalPages ? currentPageNumber + 1 : undefined;
+      },
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+      refetchOnMount: false,
+      ...config,
+    },
+  );
+};