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

api/cache/getLogStores.js

@@ -27,6 +27,10 @@ const tokenConfig = isEnabled(USE_REDIS) // ttl: 30 minutes
   ? new Keyv({ store: keyvRedis, ttl: 1800000 })
   : new Keyv({ namespace: CacheKeys.TOKEN_CONFIG, ttl: 1800000 });
 
+const genTitle = isEnabled(USE_REDIS) // ttl: 2 minutes
+  ? new Keyv({ store: keyvRedis, ttl: 120000 })
+  : new Keyv({ namespace: CacheKeys.GEN_TITLE, ttl: 120000 });
+
 const namespaces = {
   [CacheKeys.CONFIG_STORE]: config,
   pending_req,
@@ -39,6 +43,7 @@ const namespaces = {
   registrations: createViolationInstance('registrations'),
   logins: createViolationInstance('logins'),
   [CacheKeys.TOKEN_CONFIG]: tokenConfig,
+  [CacheKeys.GEN_TITLE]: genTitle,
 };
 
 /**

api/models/Conversation.js

@@ -30,12 +30,12 @@ module.exports = {
       return { message: 'Error saving conversation' };
     }
   },
-  getConvosByPage: async (user, pageNumber = 1, pageSize = 14) => {
+  getConvosByPage: async (user, pageNumber = 1, pageSize = 25) => {
     try {
       const totalConvos = (await Conversation.countDocuments({ user })) || 1;
       const totalPages = Math.ceil(totalConvos / pageSize);
       const convos = await Conversation.find({ user })
-        .sort({ createdAt: -1 })
+        .sort({ updatedAt: -1 })
         .skip((pageNumber - 1) * pageSize)
         .limit(pageSize)
         .lean();
@@ -45,7 +45,7 @@ module.exports = {
       return { message: 'Error getting conversations' };
     }
   },
-  getConvosQueried: async (user, convoIds, pageNumber = 1, pageSize = 14) => {
+  getConvosQueried: async (user, convoIds, pageNumber = 1, pageSize = 25) => {
     try {
       if (!convoIds || convoIds.length === 0) {
         return { conversations: [], pages: 1, pageNumber, pageSize };

api/server/routes/convos.js

@@ -1,6 +1,9 @@
 const express = require('express');
+const { CacheKeys } = require('librechat-data-provider');
 const { getConvosByPage, deleteConvos } = require('~/models/Conversation');
 const requireJwtAuth = require('~/server/middleware/requireJwtAuth');
+const { sleep } = require('~/server/services/AssistantService');
+const getLogStores = require('~/cache/getLogStores');
 const { getConvo, saveConvo } = require('~/models');
 const { logger } = require('~/config');
 
@@ -29,6 +32,29 @@ router.get('/:conversationId', async (req, res) => {
   }
 });
 
+router.post('/gen_title', async (req, res) => {
+  const { conversationId } = req.body;
+  const titleCache = getLogStores(CacheKeys.GEN_TITLE);
+  const key = `${req.user.id}-${conversationId}`;
+  let title = await titleCache.get(key);
+
+  if (!title) {
+    await sleep(2500);
+    title = await titleCache.get(key);
+  }
+
+  if (title) {
+    await titleCache.delete(key);
+    res.status(200).json({ title });
+  } else {
+    res
+      .status(404)
+      .json({
+        message: 'Title not found or method not implemented for the conversation\'s endpoint',
+      });
+  }
+});
+
 router.post('/clear', async (req, res) => {
   let filter = {};
   const { conversationId, source } = req.body.arg;

api/server/services/AssistantService.js

@@ -357,5 +357,6 @@ module.exports = {
   waitForRun,
   getResponse,
   handleRun,
+  sleep,
   mapMessagesToSteps,
 };

api/server/services/Endpoints/openAI/addTitle.js

@@ -1,5 +1,7 @@
-const { saveConvo } = require('~/models');
+const { CacheKeys } = require('librechat-data-provider');
+const getLogStores = require('~/cache/getLogStores');
 const { isEnabled } = require('~/server/utils');
+const { saveConvo } = require('~/models');
 
 const addTitle = async (req, { text, response, client }) => {
   const { TITLE_CONVO = 'true' } = process.env ?? {};
@@ -16,7 +18,11 @@ const addTitle = async (req, { text, response, client }) => {
     return;
   }
 
+  const titleCache = getLogStores(CacheKeys.GEN_TITLE);
+  const key = `${req.user.id}-${response.conversationId}`;
+
   const title = await client.titleConvo({ text, responseText: response?.text });
+  await titleCache.set(key, title);
   await saveConvo(req.user.id, {
     conversationId: response.conversationId,
     title,

client/src/components/Chat/Header.tsx

@@ -1,14 +1,14 @@
 import { useOutletContext } from 'react-router-dom';
 import type { ContextType } from '~/common';
-import { EndpointsMenu, PresetsMenu, NewChat } from './Menus';
+import { EndpointsMenu, PresetsMenu, HeaderNewChat } from './Menus';
 import HeaderOptions from './Input/HeaderOptions';
 
 export default function Header() {
   const { navVisible } = useOutletContext<ContextType>();
   return (
     <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white/95 p-2 font-semibold dark:bg-gray-800/90 dark:text-white ">
       <div className="hide-scrollbar flex items-center gap-2 overflow-x-auto">
-        {!navVisible && <NewChat />}
+        {!navVisible && <HeaderNewChat />}
         <EndpointsMenu />
         <HeaderOptions />
         <PresetsMenu />

client/src/components/Chat/Landing.tsx

@@ -7,8 +7,9 @@ import { getEndpointField } from '~/utils';
 import { useLocalize } from '~/hooks';
 
 export default function Landing({ Header }: { Header?: ReactNode }) {
-  const { data: endpointsConfig } = useGetEndpointsQuery();
   const { conversation } = useChatContext();
+  const { data: endpointsConfig } = useGetEndpointsQuery();
+
   const localize = useLocalize();
   let { endpoint } = conversation ?? {};
   if (

client/src/components/Chat/Menus/HeaderNewChat.tsx

@@ -0,0 +1,23 @@
+import { NewChatIcon } from '~/components/svg';
+import { useChatContext } from '~/Providers';
+import { useMediaQuery } from '~/hooks';
+
+export default function HeaderNewChat() {
+  const { newConversation } = useChatContext();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  if (isSmallScreen) {
+    return null;
+  }
+  return (
+    <button
+      data-testid="wide-header-new-chat-button"
+      type="button"
+      className="btn btn-neutral btn-small border-token-border-medium relative ml-2 flex hidden h-9 w-9 items-center justify-center whitespace-nowrap rounded-lg rounded-lg border focus:ring-0 focus:ring-offset-0 md:flex"
+      onClick={() => newConversation()}
+    >
+      <div className="flex w-full items-center justify-center gap-2">
+        <NewChatIcon />
+      </div>
+    </button>
+  );
+}

client/src/components/Chat/Menus/index.ts

@@ -1,3 +1,3 @@
 export { default as EndpointsMenu } from './EndpointsMenu';
 export { default as PresetsMenu } from './PresetsMenu';
-export { default as NewChat } from './NewChat';
+export { default as HeaderNewChat } from './HeaderNewChat';

client/src/components/Chat/SearchView.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react';
+import { useRecoilValue } from 'recoil';
+import MessagesView from './Messages/MessagesView';
+import store from '~/store';
+
+import Header from './Header';
+
+function SearchView() {
+  const searchResultMessagesTree = useRecoilValue(store.searchResultMessagesTree);
+
+  return (
+    <div className="relative flex w-full grow overflow-hidden bg-white dark:bg-gray-800">
+      <div className="transition-width relative flex h-full w-full flex-1 flex-col items-stretch overflow-hidden bg-white pt-0 dark:bg-gray-800">
+        <div className="flex h-full flex-col" role="presentation" tabIndex={0}>
+          <MessagesView messagesTree={searchResultMessagesTree} Header={<Header />} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default memo(SearchView);

client/src/components/Conversations/Conversation.jsx

@@ -1,6 +1,6 @@
 import { useState, useRef } from 'react';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { useUpdateConversationMutation } from 'librechat-data-provider/react-query';
+import { useUpdateConversationMutation } from '~/data-provider';
 import { useConversations, useConversation } from '~/hooks';
 import { MinimalIcon } from '~/components/Endpoints';
 import { NotificationSeverity } from '~/common';

client/src/components/Conversations/Conversations.tsx

@@ -1,7 +1,10 @@
-import Convo from './Convo';
-import Conversation from './Conversation';
+import { useMemo } from 'react';
+import { parseISO, isToday } from 'date-fns';
 import { useLocation } from 'react-router-dom';
 import { TConversation } from 'librechat-data-provider';
+import { groupConversationsByDate } from '~/utils';
+import Conversation from './Conversation';
+import Convo from './Convo';
 
 export default function Conversations({
   conversations,
@@ -15,22 +18,50 @@ export default function Conversations({
   const location = useLocation();
   const { pathname } = location;
   const ConvoItem = pathname.includes('chat') ? Conversation : Convo;
+  const groupedConversations = useMemo(
+    () => groupConversationsByDate(conversations),
+    [conversations],
+  );
+  const firstTodayConvoId = conversations.find((convo) =>
+    isToday(parseISO(convo.updatedAt)),
+  )?.conversationId;
 
   return (
-    <>
-      {conversations &&
-        conversations.length > 0 &&
-        conversations.map((convo: TConversation, i) => {
-          return (
-            <ConvoItem
-              key={convo.conversationId}
-              conversation={convo}
-              retainView={moveToTop}
-              toggleNav={toggleNav}
-              i={i}
-            />
-          );
-        })}
-    </>
+    <div className="text-token-text-primary flex flex-col gap-2 pb-2 text-sm">
+      <div>
+        <span>
+          {groupedConversations.map(([groupName, convos]) => (
+            <div key={groupName}>
+              <div
+                style={{
+                  color: '#aaa',
+                  fontSize: '0.7rem',
+                  marginTop: '20px',
+                  marginBottom: '5px',
+                  paddingLeft: '10px',
+                }}
+              >
+                {groupName}
+              </div>
+              {convos.map((convo, i) => (
+                <ConvoItem
+                  key={`${groupName}-${convo.conversationId}-${i}`}
+                  isLatestConvo={convo.conversationId === firstTodayConvoId}
+                  conversation={convo}
+                  retainView={moveToTop}
+                  toggleNav={toggleNav}
+                />
+              ))}
+              <div
+                style={{
+                  marginTop: '5px',
+                  marginBottom: '5px',
+                }}
+              />
+            </div>
+          ))}
+        </span>
+      </div>
+    </div>
   );
 }