♾️ 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/utils/convos.ts

@@ -0,0 +1,148 @@
+import { parseISO, isToday, isWithinInterval, subDays, getYear } from 'date-fns';
+import type {
+  TConversation,
+  ConversationData,
+  ConversationUpdater,
+  GroupedConversations,
+} from 'librechat-data-provider';
+
+const getGroupName = (date: Date) => {
+  const now = new Date();
+  if (isToday(date)) {
+    return 'Today';
+  }
+  if (isWithinInterval(date, { start: subDays(now, 7), end: now })) {
+    return 'Last 7 days';
+  }
+  if (isWithinInterval(date, { start: subDays(now, 30), end: now })) {
+    return 'Last 30 days';
+  }
+  return ' ' + getYear(date).toString();
+};
+
+export const groupConversationsByDate = (conversations: TConversation[]): GroupedConversations => {
+  if (!Array.isArray(conversations)) {
+    return [];
+  }
+
+  const seenConversationIds = new Set();
+  const groups = conversations.reduce((acc, conversation) => {
+    if (seenConversationIds.has(conversation.conversationId)) {
+      return acc;
+    }
+    seenConversationIds.add(conversation.conversationId);
+
+    const date = parseISO(conversation.updatedAt);
+    const groupName = getGroupName(date);
+    if (!acc[groupName]) {
+      acc[groupName] = [];
+    }
+    acc[groupName].push(conversation);
+    return acc;
+  }, {});
+
+  const sortedGroups = {};
+  const dateGroups = ['Today', 'Last 7 days', 'Last 30 days'];
+  dateGroups.forEach((group) => {
+    if (groups[group]) {
+      sortedGroups[group] = groups[group];
+    }
+  });
+
+  Object.keys(groups)
+    .filter((group) => !dateGroups.includes(group))
+    .sort()
+    .reverse()
+    .forEach((year) => {
+      sortedGroups[year] = groups[year];
+    });
+
+  return Object.entries(sortedGroups);
+};
+
+export const addConversation: ConversationUpdater = (data, newConversation) => {
+  const newData = JSON.parse(JSON.stringify(data)) as ConversationData;
+  const { pageIndex, convIndex } = findPageForConversation(newData, newConversation);
+
+  if (pageIndex !== -1 && convIndex !== -1) {
+    return updateConversation(data, newConversation);
+  }
+  newData.pages[0].conversations.unshift({
+    ...newConversation,
+    updatedAt: new Date().toISOString(),
+  });
+
+  return newData;
+};
+
+export function findPageForConversation(
+  data: ConversationData,
+  conversation: TConversation | { conversationId: string },
+) {
+  for (let pageIndex = 0; pageIndex < data.pages.length; pageIndex++) {
+    const page = data.pages[pageIndex];
+    const convIndex = page.conversations.findIndex(
+      (c) => c.conversationId === conversation.conversationId,
+    );
+    if (convIndex !== -1) {
+      return { pageIndex, convIndex };
+    }
+  }
+  return { pageIndex: -1, convIndex: -1 }; // Not found
+}
+
+export const updateConversation: ConversationUpdater = (data, updatedConversation) => {
+  const newData = JSON.parse(JSON.stringify(data));
+  const { pageIndex, convIndex } = findPageForConversation(newData, updatedConversation);
+
+  if (pageIndex !== -1 && convIndex !== -1) {
+    // Remove the conversation from its current position
+    newData.pages[pageIndex].conversations.splice(convIndex, 1);
+    // Add the updated conversation to the top of the first page
+    newData.pages[0].conversations.unshift({
+      ...updatedConversation,
+      updatedAt: new Date().toISOString(),
+    });
+  }
+
+  return newData;
+};
+
+export const updateConvoFields: ConversationUpdater = (
+  data: ConversationData,
+  updatedConversation: Partial<TConversation> & Pick<TConversation, 'conversationId'>,
+): ConversationData => {
+  const newData = JSON.parse(JSON.stringify(data));
+  const { pageIndex, convIndex } = findPageForConversation(
+    newData,
+    updatedConversation as { conversationId: string },
+  );
+
+  if (pageIndex !== -1 && convIndex !== -1) {
+    const deleted = newData.pages[pageIndex].conversations.splice(convIndex, 1);
+    const oldConversation = deleted[0] as TConversation;
+
+    newData.pages[0].conversations.unshift({
+      ...oldConversation,
+      ...updatedConversation,
+      updatedAt: new Date().toISOString(),
+    });
+  }
+
+  return newData;
+};
+
+export const deleteConversation = (
+  data: ConversationData,
+  conversationId: string,
+): ConversationData => {
+  const newData = JSON.parse(JSON.stringify(data));
+  const { pageIndex, convIndex } = findPageForConversation(newData, { conversationId });
+
+  if (pageIndex !== -1 && convIndex !== -1) {
+    // Delete the conversation from its current page
+    newData.pages[pageIndex].conversations.splice(convIndex, 1);
+  }
+
+  return newData;
+};