fix: update chat history fetching logic (#1891)

Demo:



https://github.com/StanGirard/quivr/assets/63923024/fb2b5e83-5387-4198-afc5-4374281f0a32

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ChatHistoryButton/ChatHistoryButton.tsx

@@ -1,13 +1,13 @@
 import { useTranslation } from "react-i18next";
 import { LuChevronRight, LuHistory } from "react-icons/lu";
 
-import { ChatHistory } from "@/lib/components/ChatHistory/ChatHistory";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/lib/components/ui/Popover";
 
+import { ChatsList } from "./components/ChatsList";
 import { Button } from "../Button";
 
 export const ChatHistoryButton = (): JSX.Element => {
@@ -27,7 +27,7 @@ export const ChatHistoryButton = (): JSX.Element => {
         align="center"
         className="min-h-[200px] w-[250px] max-h-[500px] overflow-auto"
       >
-        <ChatHistory />
+        <ChatsList />
       </PopoverContent>
     </Popover>
   );

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ChatHistoryButton/components/ChatsList/__tests__/ChatsList.test.tsx

@@ -102,9 +102,6 @@ describe("ChatsList", () => {
     );
     const chatsList = getByTestId("chats-list");
     expect(chatsList).toBeDefined();
-
-    const newChatButton = getByTestId("new-chat-button");
-    expect(newChatButton).toBeDefined();
   });
 
   it("renders the chats list with correct number of items", () => {

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ChatHistoryButton/components/ChatsList/hooks/useChatNotificationsSync.ts

@@ -7,9 +7,9 @@ import { useNotificationApi } from "@/lib/api/notification/useNotificationApi";
 import { useChatContext } from "@/lib/context";
 import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext";
 
-import { getChatNotificationsQueryKey } from "../../../[chatId]/utils/getChatNotificationsQueryKey";
+import { getChatNotificationsQueryKey } from "../../../../../../../../../../../utils/getChatNotificationsQueryKey";
-import { getMessagesFromChatItems } from "../../../[chatId]/utils/getMessagesFromChatItems";
+import { getMessagesFromChatItems } from "../../../../../../../../../../../utils/getMessagesFromChatItems";
-import { getNotificationsFromChatItems } from "../../../[chatId]/utils/getNotificationsFromChatItems";
+import { getNotificationsFromChatItems } from "../../../../../../../../../../../utils/getNotificationsFromChatItems";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useChatNotificationsSync = () => {

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ActionsModal/components/ChatHistoryButton/components/ChatsList/index.tsx

@@ -1,10 +1,8 @@
 "use client";
 
 import { ChatHistory } from "@/lib/components/ChatHistory/ChatHistory";
-import { Sidebar } from "@/lib/components/Sidebar/Sidebar";
 import { useOnboarding } from "@/lib/hooks/useOnboarding";
 
-import { NewChatButton } from "./components/NewChatButton";
 import { WelcomeChat } from "./components/WelcomeChat";
 import { useChatNotificationsSync } from "./hooks/useChatNotificationsSync";
 import { useChatsList } from "./hooks/useChatsList";
@@ -15,18 +13,13 @@ export const ChatsList = (): JSX.Element => {
   const { shouldDisplayWelcomeChat } = useOnboarding();
 
   return (
-    <Sidebar showButtons={["myBrains", "marketplace", "upgradeToPlus", "user"]}>
+    <div className="flex flex-col flex-1 h-full" data-testid="chats-list">
-      <div className="flex flex-col flex-1 h-full" data-testid="chats-list">
+      {shouldDisplayWelcomeChat && (
         <div className="pt-2">
-          <NewChatButton />
+          <WelcomeChat />
         </div>
-        {shouldDisplayWelcomeChat && (
+      )}
-          <div className="pt-2">
+      <ChatHistory />
-            <WelcomeChat />
+    </div>
-          </div>
-        )}
-        <ChatHistory />
-      </div>
-    </Sidebar>
   );
 };

frontend/app/chat/components/ChatsList/components/NewChatButton.tsx

@@ -1,18 +0,0 @@
-import Link from "next/link";
-import { useTranslation } from "react-i18next";
-import { BsPlusSquare } from "react-icons/bs";
-
-const newChatRoute = "/chat";
-export const NewChatButton = (): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <Link
-      href={newChatRoute}
-      data-testid="new-chat-button"
-      className="px-4 py-2 mx-4 my-1 border border-primary bg-white dark:bg-black hover:text-white hover:bg-primary shadow-lg rounded-lg flex items-center justify-center top-1 z-20"
-    >
-      <BsPlusSquare className="h-6 w-6 mr-2" /> {t("newChatButton")}
-    </Link>
-  );
-};

frontend/app/chat/components/index.ts

@@ -1 +0,0 @@
-export * from "./ChatsList";