Frontend/test/chat 4 (#523)

* refactor: move getHistory to api/chat

* test(chat): unit-tests getHistory

* refactor: rename useChatService useQuestion

* feat: add updateChat to api/chat

* test(chat): unit-tests updateChat

* refactor(ChatsListItem): add useChatsListItem

* feat: remove http request from provider and remove useChats

Author: mamadoudicko

frontend/app/chat/[chatId]/__tests__/page.test.tsx

@@ -18,7 +18,7 @@ import {
   SupabaseProviderMock,
 } from "@/lib/context/SupabaseProvider/mocks/SupabaseProviderMock";
 
-import ChatPage from "../page";
+import SelectedChatPage from "../page";
 
 vi.mock("@/lib/context/ChatProvider/ChatProvider", () => ({
   ChatContext: ChatContextMock,
@@ -43,7 +43,7 @@ describe("Chat page", () => {
       <SupabaseProviderMock>
         <BrainConfigProviderMock>
           <BrainProviderMock>
-            <ChatPage />,
+            <SelectedChatPage />,
           </BrainProviderMock>
         </BrainConfigProviderMock>
       </SupabaseProviderMock>

frontend/app/chat/[chatId]/hooks/useChat.ts

@@ -9,7 +9,7 @@ import { useChatContext } from "@/lib/context/ChatProvider/hooks/useChatContext"
 import { useToast } from "@/lib/hooks";
 import { useEventTracking } from "@/services/analytics/useEventTracking";
 
-import { useChatService } from "./useChatService";
+import { useQuestion } from "./useQuestion";
 import { ChatQuestion } from "../types";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
@@ -25,33 +25,25 @@ export const useChat = () => {
   } = useBrainConfig();
   const { history, setHistory } = useChatContext();
   const { publish } = useToast();
-  const { createChat } = useChatApi();
+  const { createChat, getHistory } = useChatApi();
 
-  const {
-    getChatHistory,
-    addStreamQuestion,
-    addQuestion: addQuestionToModel,
-  } = useChatService();
+  const { addStreamQuestion, addQuestion: addQuestionToModel } = useQuestion();
 
   useEffect(() => {
     const fetchHistory = async () => {
       const currentChatId = chatId;
-      const chatHistory = await getChatHistory(currentChatId);
+      if (currentChatId === undefined) {
+        return;
+      }
+
+      const chatHistory = await getHistory(currentChatId);
 
       if (chatId === currentChatId && chatHistory.length > 0) {
         setHistory(chatHistory);
       }
     };
     void fetchHistory();
-  }, [chatId, getChatHistory, setHistory]);
-
-  const generateNewChatIdFromName = async (
-    chatName: string
-  ): Promise<string> => {
-    const chat = await createChat(chatName);
-
-    return chat.chat_id;
-  };
+  }, [chatId, setHistory]);
 
   const addQuestion = async (question: string, callback?: () => void) => {
     const chatQuestion: ChatQuestion = {
@@ -62,16 +54,19 @@ export const useChat = () => {
     };
 
     try {
-      void track("QUESTION_ASKED");
       setGeneratingAnswer(true);
-      const currentChatId =
-        chatId ??
-        // if chatId is undefined, we need to create a new chat on fly
-        (await generateNewChatIdFromName(
-          question.split(" ").slice(0, 3).join(" ")
-        ));
-
-      setChatId(currentChatId);
+
+      let currentChatId = chatId;
+
+      //if chatId is not set, create a new chat. Chat name is from the first question
+      if (currentChatId === undefined) {
+        const chatName = question.split(" ").slice(0, 3).join(" ");
+        const chat = await createChat(chatName);
+        currentChatId = chat.chat_id;
+        setChatId(currentChatId);
+      }
+
+      void track("QUESTION_ASKED");
 
       if (chatQuestion.model === "gpt-3.5-turbo") {
         await addStreamQuestion(currentChatId, chatQuestion);

…pp/chat/[chatId]/hooks/useChatService.ts …d/app/chat/[chatId]/hooks/useQuestion.tsfrontend/app/chat/[chatId]/hooks/useChatService.ts renamed to frontend/app/chat/[chatId]/hooks/useQuestion.ts frontend/app/chat/[chatId]/hooks/useChatService.ts renamed to frontend/app/chat/[chatId]/hooks/useQuestion.ts

@@ -1,44 +1,26 @@
 /* eslint-disable max-lines */
 
-import { useCallback } from "react";
-
 import { useChatApi } from "@/lib/api/chat/useChatApi";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { useChatContext } from "@/lib/context/ChatProvider/hooks/useChatContext";
-import { useAxios, useFetch } from "@/lib/hooks";
+import { useFetch } from "@/lib/hooks";
 
 import { ChatHistory, ChatQuestion } from "../types";
 
 interface UseChatService {
-  getChatHistory: (chatId: string | undefined) => Promise<ChatHistory[]>;
   addQuestion: (chatId: string, chatQuestion: ChatQuestion) => Promise<void>;
   addStreamQuestion: (
     chatId: string,
     chatQuestion: ChatQuestion
   ) => Promise<void>;
 }
 
-export const useChatService = (): UseChatService => {
-  const { axiosInstance } = useAxios();
+export const useQuestion = (): UseChatService => {
   const { fetchInstance } = useFetch();
   const { updateHistory, updateStreamingHistory } = useChatContext();
   const { currentBrain } = useBrainContext();
   const { addQuestion } = useChatApi();
 
-  const getChatHistory = useCallback(
-    async (chatId: string | undefined): Promise<ChatHistory[]> => {
-      if (chatId === undefined) {
-        return [];
-      }
-      const response = (
-        await axiosInstance.get<ChatHistory[]>(`/chat/${chatId}/history`)
-      ).data;
-
-      return response;
-    },
-    [axiosInstance]
-  );
-
   const addQuestionHandler = async (
     chatId: string,
     chatQuestion: ChatQuestion
@@ -121,7 +103,6 @@ export const useChatService = (): UseChatService => {
   };
 
   return {
-    getChatHistory,
     addQuestion: addQuestionHandler,
     addStreamQuestion,
   };

frontend/app/chat/[chatId]/page.tsx

@@ -5,7 +5,7 @@ import { ChatProvider } from "@/lib/context/ChatProvider";
 
 import { ChatInput, ChatMessages } from "./components";
 
-const ChatPage = (): JSX.Element => {
+const SelectedChatPage = (): JSX.Element => {
   return (
     <main className="flex flex-col w-full pt-10" data-testid="chat-page">
       <section className="flex flex-col flex-1 items-center w-full h-full min-h-[70vh]">
@@ -26,4 +26,4 @@ const ChatPage = (): JSX.Element => {
   );
 };
 
-export default ChatPage;
+export default SelectedChatPage;

…ts/ChatsList/__tests__/ChatList.test.tsx …s/ChatsList/__tests__/ChatsList.test.tsxfrontend/app/chat/components/ChatsList/__tests__/ChatList.test.tsx renamed to frontend/app/chat/components/ChatsList/__tests__/ChatsList.test.tsx frontend/app/chat/components/ChatsList/__tests__/ChatList.test.tsx renamed to frontend/app/chat/components/ChatsList/__tests__/ChatsList.test.tsx

@@ -1,16 +1,20 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
+import * as useChatsListModule from "../hooks/useChatsList";
 import { ChatsList } from "../index";
 
-const setOpenMock = vi.fn(() => ({}));
+const getChatsMock = vi.fn(() => []);
 
-vi.mock("../hooks/useChatsList", () => ({
-  useChatsList: () => ({
-    open: false,
-    setOpen: () => setOpenMock(),
-  }),
-}));
+const setOpenMock = vi.fn();
+
+vi.mock("next/navigation", async () => {
+  const actual = await vi.importActual<typeof import("next/navigation")>(
+    "next/navigation"
+  );
+
+  return { ...actual, useRouter: () => ({ replace: vi.fn() }) };
+});
 
 vi.mock("@/lib/context/ChatsProvider/hooks/useChatsContext", () => ({
   useChatsContext: () => ({
@@ -19,6 +23,7 @@ vi.mock("@/lib/context/ChatsProvider/hooks/useChatsContext", () => ({
       { chat_id: 2, name: "Chat 2" },
     ],
     deleteChat: vi.fn(),
+    setAllChats: vi.fn(),
   }),
 }));
 
@@ -36,6 +41,10 @@ vi.mock("@/lib/hooks", async () => {
 });
 
 describe("ChatsList", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   it("should render correctly", () => {
     const { getByTestId } = render(<ChatsList />);
     const chatsList = getByTestId("chats-list");
@@ -54,11 +63,29 @@ describe("ChatsList", () => {
     expect(chatItems).toHaveLength(2);
   });
 
-  it("toggles the open state when the button is clicked", () => {
-    render(<ChatsList />);
+  it("toggles the open state when the button is clicked", async () => {
+    vi.spyOn(useChatsListModule, "useChatsList").mockReturnValue({
+      open: false,
+      setOpen: setOpenMock,
+    });
+
+    await act(() => render(<ChatsList />));
+
     const toggleButton = screen.getByTestId("chats-list-toggle");
+
     fireEvent.click(toggleButton);
 
     expect(setOpenMock).toHaveBeenCalledTimes(1);
   });
+
+  it("should call getChats when the component mounts", async () => {
+    vi.mock("@/lib/api/chat/useChatApi", () => ({
+      useChatApi: () => ({
+        getChats: () => getChatsMock(),
+      }),
+    }));
+    await act(() => render(<ChatsList />));
+
+    expect(getChatsMock).toHaveBeenCalledTimes(1);
+  });
 });

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

@@ -1,49 +1,26 @@
-import { UUID } from "crypto";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useState } from "react";
 import { FiEdit, FiSave, FiTrash2 } from "react-icons/fi";
 import { MdChatBubbleOutline } from "react-icons/md";
 
 import { ChatEntity } from "@/app/chat/[chatId]/types";
-import { useAxios, useToast } from "@/lib/hooks";
 import { cn } from "@/lib/utils";
 
 import { ChatName } from "./components/ChatName";
+import { useChatsListItem } from "./hooks/useChatsListItem";
 
 interface ChatsListItemProps {
   chat: ChatEntity;
-  deleteChat: (id: UUID) => void;
 }
 
-export const ChatsListItem = ({
-  chat,
-  deleteChat,
-}: ChatsListItemProps): JSX.Element => {
-  const pathname = usePathname()?.split("/").at(-1);
-  const selected = chat.chat_id === pathname;
-  const [chatName, setChatName] = useState(chat.chat_name);
-  const { axiosInstance } = useAxios();
-  const { publish } = useToast();
-  const [editingName, setEditingName] = useState(false);
-
-  const updateChatName = async () => {
-    if (chatName !== chat.chat_name) {
-      await axiosInstance.put<ChatEntity>(`/chat/${chat.chat_id}/metadata`, {
-        chat_name: chatName,
-      });
-      publish({ text: "Chat name updated", variant: "success" });
-    }
-  };
-
-  const handleEditNameClick = () => {
-    if (editingName) {
-      setEditingName(false);
-      void updateChatName();
-    } else {
-      setEditingName(true);
-    }
-  };
+export const ChatsListItem = ({ chat }: ChatsListItemProps): JSX.Element => {
+  const {
+    setChatName,
+    deleteChat,
+    handleEditNameClick,
+    selected,
+    chatName,
+    editingName,
+  } = useChatsListItem(chat);
 
   return (
     <div
@@ -76,11 +53,7 @@ export const ChatsListItem = ({
         <button className="p-0" type="button" onClick={handleEditNameClick}>
           {editingName ? <FiSave /> : <FiEdit />}
         </button>
-        <button
-          className="p-5"
-          type="button"
-          onClick={() => deleteChat(chat.chat_id)}
-        >
+        <button className="p-5" type="button" onClick={() => void deleteChat()}>
           <FiTrash2 />
         </button>
       </div>

frontend/app/chat/components/ChatsList/components/ChatsListItem/hooks/useChatsListItem.ts

@@ -0,0 +1,66 @@
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { ChatEntity } from "@/app/chat/[chatId]/types";
+import { useChatApi } from "@/lib/api/chat/useChatApi";
+import { useChatsContext } from "@/lib/context/ChatsProvider/hooks/useChatsContext";
+import { useToast } from "@/lib/hooks";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useChatsListItem = (chat: ChatEntity) => {
+  const pathname = usePathname()?.split("/").at(-1);
+  const selected = chat.chat_id === pathname;
+  const [chatName, setChatName] = useState(chat.chat_name);
+  const { publish } = useToast();
+  const [editingName, setEditingName] = useState(false);
+  const { updateChat, deleteChat } = useChatApi();
+  const { setAllChats } = useChatsContext();
+  const router = useRouter();
+
+  const deleteChatHandler = async () => {
+    const chatId = chat.chat_id;
+    try {
+      await deleteChat(chatId);
+      setAllChats((chats) =>
+        chats.filter((currentChat) => currentChat.chat_id !== chatId)
+      );
+      // TODO: Change route only when the current chat is being deleted
+      void router.push("/chat");
+      publish({
+        text: `Chat sucessfully deleted. Id: ${chatId}`,
+        variant: "success",
+      });
+    } catch (error) {
+      console.error("Error deleting chat:", error);
+      publish({
+        text: `Error deleting chat: ${JSON.stringify(error)}`,
+        variant: "danger",
+      });
+    }
+  };
+
+  const updateChatName = async () => {
+    if (chatName !== chat.chat_name) {
+      await updateChat(chat.chat_id, { chat_name: chatName });
+      publish({ text: "Chat name updated", variant: "success" });
+    }
+  };
+
+  const handleEditNameClick = () => {
+    if (editingName) {
+      setEditingName(false);
+      void updateChatName();
+    } else {
+      setEditingName(true);
+    }
+  };
+
+  return {
+    setChatName,
+    editingName,
+    chatName,
+    selected,
+    handleEditNameClick,
+    deleteChat: deleteChatHandler,
+  };
+};