♾️ 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/components/Chat/Header.tsx

@@ -1,6 +1,6 @@
 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() {
@@ -8,7 +8,7 @@ export default function Header() {
   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/NewChat.tsx

@@ -1,36 +0,0 @@
-import { useChatContext } from '~/Providers';
-import { useMediaQuery } from '~/hooks';
-
-export default function NewChat() {
-  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">
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          className="text-black dark:text-white"
-        >
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M16.7929 2.79289C18.0118 1.57394 19.9882 1.57394 21.2071 2.79289C22.4261 4.01184 22.4261 5.98815 21.2071 7.20711L12.7071 15.7071C12.5196 15.8946 12.2652 16 12 16H9C8.44772 16 8 15.5523 8 15V12C8 11.7348 8.10536 11.4804 8.29289 11.2929L16.7929 2.79289ZM19.7929 4.20711C19.355 3.7692 18.645 3.7692 18.2071 4.2071L10 12.4142V14H11.5858L19.7929 5.79289C20.2308 5.35499 20.2308 4.64501 19.7929 4.20711ZM6 5C5.44772 5 5 5.44771 5 6V18C5 18.5523 5.44772 19 6 19H18C18.5523 19 19 18.5523 19 18V14C19 13.4477 19.4477 13 20 13C20.5523 13 21 13.4477 21 14V18C21 19.6569 19.6569 21 18 21H6C4.34315 21 3 19.6569 3 18V6C3 4.34314 4.34315 3 6 3H10C10.5523 3 11 3.44771 11 4C11 4.55228 10.5523 5 10 5H6Z"
-            fill="currentColor"
-          />
-        </svg>
-      </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);