♾️ 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/hooks/Nav/index.ts

@@ -0,0 +1 @@
+export { default as useNavScrolling } from './useNavScrolling';

client/src/hooks/Nav/useNavScrolling.ts

@@ -0,0 +1,64 @@
+import throttle from 'lodash/throttle';
+import React, { useCallback, useEffect, useRef } from 'react';
+import type { FetchNextPageOptions, InfiniteQueryObserverResult } from '@tanstack/react-query';
+import type { ConversationListResponse } from 'librechat-data-provider';
+
+export default function useNavScrolling({
+  hasNextPage,
+  isFetchingNextPage,
+  setShowLoading,
+  fetchNextPage,
+}: {
+  hasNextPage?: boolean;
+  isFetchingNextPage: boolean;
+  setShowLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  fetchNextPage: (
+    options?: FetchNextPageOptions | undefined,
+  ) => Promise<InfiniteQueryObserverResult<ConversationListResponse, unknown>>;
+}) {
+  const scrollPositionRef = useRef<number | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const fetchNext = useCallback(
+    throttle(() => fetchNextPage(), 750, { leading: true }),
+    [fetchNextPage],
+  );
+
+  const handleScroll = useCallback(() => {
+    if (containerRef.current) {
+      const { scrollTop, clientHeight, scrollHeight } = containerRef.current;
+      const nearBottomOfList = scrollTop + clientHeight >= scrollHeight * 0.97;
+
+      if (nearBottomOfList && hasNextPage && !isFetchingNextPage) {
+        setShowLoading(true);
+        fetchNext();
+      } else {
+        setShowLoading(false);
+      }
+    }
+  }, [hasNextPage, isFetchingNextPage, fetchNext, setShowLoading]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container) {
+      container.addEventListener('scroll', handleScroll);
+    }
+
+    return () => {
+      container?.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll, fetchNext]);
+
+  const moveToTop = useCallback(() => {
+    const container = containerRef.current;
+    if (container) {
+      scrollPositionRef.current = container.scrollTop;
+    }
+  }, [containerRef, scrollPositionRef]);
+
+  return {
+    containerRef,
+    moveToTop,
+  };
+}

client/src/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './Messages';
 export * from './Config';
 export * from './Input';
 export * from './Conversations';
+export * from './Nav';
 
 export * from './AuthContext';
 export * from './ThemeContext';

client/src/hooks/useChatHelpers.ts

@@ -8,9 +8,7 @@ import type {
   TMessage,
   TSubmission,
   TEndpointOption,
-  TConversation,
   TEndpointsConfig,
-  TGetConversationsResponse,
 } from 'librechat-data-provider';
 import type { TAskFunction } from '~/common';
 import useSetFilesToDelete from './useSetFilesToDelete';
@@ -60,42 +58,6 @@ export default function useChatHelpers(index = 0, paramId: string | undefined) {
     [queryParam, queryClient],
   );
 
-  const addConvo = useCallback(
-    (convo: TConversation) => {
-      const convoData = queryClient.getQueryData<TGetConversationsResponse>([
-        QueryKeys.allConversations,
-        { pageNumber: '1', active: true },
-      ]) ?? { conversations: [] as TConversation[], pageNumber: '1', pages: 1, pageSize: 14 };
-
-      let { conversations: convos, pageSize = 14 } = convoData;
-      pageSize = Number(pageSize);
-      convos = convos.filter((c) => c.conversationId !== convo.conversationId);
-      convos = convos.length < pageSize ? convos : convos.slice(0, -1);
-
-      const conversations = [
-        {
-          ...convo,
-          createdAt: new Date().toISOString(),
-          updatedAt: new Date().toISOString(),
-        },
-        ...convos,
-      ];
-
-      queryClient.setQueryData<TGetConversationsResponse>(
-        [QueryKeys.allConversations, { pageNumber: '1', active: true }],
-        {
-          ...convoData,
-          conversations,
-        },
-      );
-    },
-    [queryClient],
-  );
-
-  const invalidateConvos = useCallback(() => {
-    queryClient.invalidateQueries([QueryKeys.allConversations, { active: true }]);
-  }, [queryClient]);
-
   const getMessages = useCallback(() => {
     return queryClient.getQueryData<TMessage[]>([QueryKeys.messages, queryParam]);
   }, [queryParam, queryClient]);
@@ -341,7 +303,6 @@ export default function useChatHelpers(index = 0, paramId: string | undefined) {
     newConversation,
     conversation,
     setConversation,
-    addConvo,
     // getConvos,
     // setConvos,
     isSubmitting,
@@ -373,7 +334,6 @@ export default function useChatHelpers(index = 0, paramId: string | undefined) {
     setShowAgentSettings,
     files,
     setFiles,
-    invalidateConvos,
     filesLoading,
     setFilesLoading,
     showStopButton,

client/src/hooks/useSSE.ts

@@ -1,9 +1,11 @@
 import { v4 } from 'uuid';
-import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import {
   /* @ts-ignore */
   SSE,
+  QueryKeys,
   EndpointURLs,
   createPayload,
   tPresetSchema,
@@ -13,7 +15,15 @@ import {
   removeNullishValues,
 } from 'librechat-data-provider';
 import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider/react-query';
-import type { TResPlugin, TMessage, TConversation, TSubmission } from 'librechat-data-provider';
+import type {
+  TResPlugin,
+  TMessage,
+  TConversation,
+  TSubmission,
+  ConversationData,
+} from 'librechat-data-provider';
+import { addConversation, deleteConversation, updateConversation } from '~/utils';
+import { useGenTitleMutation } from '~/data-provider';
 import { useAuthContext } from './AuthContext';
 import useChatHelpers from './useChatHelpers';
 import useSetStorage from './useSetStorage';
@@ -30,18 +40,14 @@ type TResData = {
 
 export default function useSSE(submission: TSubmission | null, index = 0) {
   const setStorage = useSetStorage();
+  const queryClient = useQueryClient();
+  const genTitle = useGenTitleMutation();
+
   const { conversationId: paramId } = useParams();
   const { token, isAuthenticated } = useAuthContext();
   const [completed, setCompleted] = useState(new Set());
-  const {
-    addConvo,
-    setMessages,
-    setConversation,
-    setIsSubmitting,
-    resetLatestMessage,
-    invalidateConvos,
-    newConversation,
-  } = useChatHelpers(index, paramId);
+  const { setMessages, setConversation, setIsSubmitting, newConversation, resetLatestMessage } =
+    useChatHelpers(index, paramId);
 
   const { data: startupConfig } = useGetStartupConfig();
   const balanceQuery = useGetUserBalance({
@@ -103,16 +109,21 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
       setMessages(messagesUpdate);
     }
 
-    // refresh title
-    if (requestMessage?.parentMessageId == '00000000-0000-0000-0000-000000000000') {
-      setTimeout(() => {
-        invalidateConvos();
-      }, 2000);
+    const isNewConvo = conversation.conversationId !== submission.conversation.conversationId;
+    if (isNewConvo) {
+      queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
+        if (!convoData) {
+          return convoData;
+        }
+        return deleteConversation(convoData, submission.conversation.conversationId as string);
+      });
+    }
 
-      // in case it takes too long.
+    // refresh title
+    if (isNewConvo && requestMessage?.parentMessageId == '00000000-0000-0000-0000-000000000000') {
       setTimeout(() => {
-        invalidateConvos();
-      }, 5000);
+        genTitle.mutate({ conversationId: convoUpdate.conversationId as string });
+      }, 2500);
     }
 
     setConversation((prevState) => {
@@ -164,9 +175,17 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
       setStorage(update);
       return update;
     });
-    if (message.parentMessageId == '00000000-0000-0000-0000-000000000000') {
-      addConvo(update);
-    }
+
+    queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
+      if (!convoData) {
+        return convoData;
+      }
+      if (message.parentMessageId == '00000000-0000-0000-0000-000000000000') {
+        return addConversation(convoData, update);
+      } else {
+        return updateConversation(convoData, update);
+      }
+    });
     resetLatestMessage();
   };
 
@@ -183,16 +202,21 @@ export default function useSSE(submission: TSubmission | null, index = 0) {
       setMessages([...messages, requestMessage, responseMessage]);
     }
 
-    // refresh title
-    if (requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
-      setTimeout(() => {
-        invalidateConvos();
-      }, 1500);
+    const isNewConvo = conversation.conversationId !== submissionConvo.conversationId;
+    if (isNewConvo) {
+      queryClient.setQueryData<ConversationData>([QueryKeys.allConversations], (convoData) => {
+        if (!convoData) {
+          return convoData;
+        }
+        return deleteConversation(convoData, submissionConvo.conversationId as string);
+      });
+    }
 
-      // in case it takes too long.
+    // refresh title
+    if (isNewConvo && requestMessage.parentMessageId == '00000000-0000-0000-0000-000000000000') {
       setTimeout(() => {
-        invalidateConvos();
-      }, 5000);
+        genTitle.mutate({ conversationId: conversation.conversationId as string });
+      }, 2500);
     }
 
     setConversation((prevState) => {