feat: add notifications components

backend/routes/crawl_routes.py

@@ -99,10 +99,16 @@ async def crawl_endpoint(
                 user_openai_api_key=request.headers.get("Openai-Api-Key", None),
             )
         if crawl_notification:
+            notification_message = {
+                "status": message["type"],
+                "message": message["message"],
+                "name": crawl_website.url,
+            }
             update_notification_by_id(
                 crawl_notification.id,
                 NotificationUpdatableProperties(
-                    status=NotificationsStatusEnum.Done, message=str(message)
+                    status=NotificationsStatusEnum.Done,
+                    message=str(notification_message),
                 ),
             )
     return message

backend/routes/upload_routes.py

@@ -99,10 +99,16 @@ async def upload_file(
         )
 
         if upload_notification:
+            notification_message = {
+                "status": message["type"],
+                "message": message["message"],
+                "name": file.file.filename if file.file else "",
+            }
             update_notification_by_id(
                 upload_notification.id,
                 NotificationUpdatableProperties(
-                    status=NotificationsStatusEnum.Done, message=str(message)
+                    status=NotificationsStatusEnum.Done,
+                    message=str(notification_message),
                 ),
             )
 

frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx

@@ -1,35 +1,20 @@
-import { useParams } from "next/navigation";
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
-import { useChatApi } from "@/lib/api/chat/useChatApi";
-
 import { ChatInput, KnowledgeToFeed } from "./components";
 import { useActionBar } from "./hooks/useActionBar";
 import { useKnowledgeUploader } from "./hooks/useKnowledgeUploader";
-import { checkIfHasPendingRequest } from "./utils/checkIfHasPendingRequest";
 
 export const ActionsBar = (): JSX.Element => {
-  const { shouldDisplayUploadCard, setShouldDisplayUploadCard } =
-    useActionBar();
+  const {
+    shouldDisplayUploadCard,
+    setShouldDisplayUploadCard,
+    hasPendingRequests,
+  } = useActionBar();
   const { addContent, contents, feedBrain, removeContent } =
     useKnowledgeUploader();
-  const { getHistory } = useChatApi();
-  const { t } = useTranslation(["chat"]);
-  const [hasPendingRequests, setHasPendingRequests] = useState(false);
-  const params = useParams();
 
-  useEffect(() => {
-    const updateNotificationsStatus = async () => {
-      const chatId = params?.chatId as string | undefined;
-      if (chatId !== undefined) {
-        const history = await getHistory(chatId);
-        setHasPendingRequests(checkIfHasPendingRequest(history));
-      }
-    };
-    void updateNotificationsStatus();
-  }, [getHistory, params?.chatId]);
+  const { t } = useTranslation(["chat"]);
 
   return (
     <>

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/ChatBar/components/MentionInput/hooks/useMentionInput.tsx

@@ -114,9 +114,6 @@ export const useMentionInput = ({
   const keyBindingFn = useCallback(
     // eslint-disable-next-line complexity
     (e: React.KeyboardEvent<HTMLDivElement>) => {
-      console.log({
-        editorContent: getEditorText(editorState),
-      });
       if (mentionTriggers.includes(e.key as MentionTriggerType)) {
         setOpen(true);
 

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FeedItems/components/FileFeedItem/FileFeedItem.tsx

@@ -20,7 +20,7 @@ export const FileFeedItem = ({
         className="absolute top-2 right-2 cursor-pointer text-gray-400 text-2xl"
         onClick={onRemove}
       />
-      <div className="flex items-center">
+      <div className="flex items-center gap-1">
         {icon}
         <FeedTitleDisplayer title={file.name} truncate />
       </div>

frontend/app/chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FeedItems/components/FileFeedItem/helpers/getFileIcon.tsx

@@ -48,5 +48,5 @@ export const getFileIcon = (fileName: string): JSX.Element => {
 
   const Icon = fileType !== undefined ? fileTypeIcons[fileType] : FaFile;
 
-  return <Icon className="text-2xl mr-2" />;
+  return <Icon className="text-2xl" />;
 };

frontend/app/chat/[chatId]/components/ActionsBar/hooks/useActionBar.ts

@@ -1,11 +1,23 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+
+import { useChatContext } from "@/lib/context";
+
+import { checkIfHasPendingRequest } from "../utils/checkIfHasPendingRequest";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useActionBar = () => {
   const [shouldDisplayUploadCard, setShouldDisplayUploadCard] = useState(false);
 
+  const [hasPendingRequests, setHasPendingRequests] = useState(false);
+  const { notifications } = useChatContext();
+
+  useEffect(() => {
+    setHasPendingRequests(checkIfHasPendingRequest(notifications));
+  }, [notifications]);
+
   return {
     shouldDisplayUploadCard,
     setShouldDisplayUploadCard,
+    hasPendingRequests,
   };
 };

frontend/app/chat/[chatId]/components/ActionsBar/utils/checkIfHasPendingRequest.ts

@@ -1,8 +1,7 @@
-import { ChatItem } from "../../../types";
+import { Notification } from "../../../types";
 
-export const checkIfHasPendingRequest = (chatItems: ChatItem[]): boolean => {
-  return chatItems.some(
-    (item) =>
-      item.item_type === "NOTIFICATION" && item.body.status === "Pending"
-  );
+export const checkIfHasPendingRequest = (
+  notifications: Notification[]
+): boolean => {
+  return notifications.some((item) => item.status === "Pending");
 };

frontend/app/chat/[chatId]/components/ChatHeader.tsx

@@ -4,9 +4,9 @@ import { useChatContext } from "@/lib/context";
 
 export const ChatHeader = (): JSX.Element => {
   const { t } = useTranslation(["chat"]);
-  const { history } = useChatContext();
+  const { messages } = useChatContext();
 
-  if (history.length !== 0) {
+  if (messages.length !== 0) {
     return (
       <h1 className="text-3xl font-bold text-center">
         {t("chat_title_intro")}{" "}

frontend/app/chat/[chatId]/components/Dialog.tsx

@@ -1,15 +1,16 @@
 import { useChatContext } from "@/lib/context";
 
-import { ChatMessages } from "./ChatMessages";
+import { MessagesDialog } from "./MessagesDialog";
 import { ShortCuts } from "./ShortCuts";
 
 export const ChatDialog = (): JSX.Element => {
-  const { history } = useChatContext();
+  const { messages, notifications } = useChatContext();
 
-  const shouldDisplayShortcuts = history.length === 0;
+  const shouldDisplayShortcuts =
+    messages.length === 0 && notifications.length === 0;
 
   if (!shouldDisplayShortcuts) {
-    return <ChatMessages />;
+    return <MessagesDialog />;
   }
 
   return <ShortCuts />;

frontend/app/chat/[chatId]/components/MessagesDialog/__tests__/MessagesDialog.test.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable max-lines */
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { MessagesDialog } from "../index";
+
+vi.mock("@/lib/context/SupabaseProvider", () => ({
+  useSupabase: () => ({
+    session: {
+      user: {},
+    },
+  }),
+}));
+
+vi.mock("../hooks/useMessagesDialog", () => ({
+  useMessagesDialog: vi.fn(() => ({
+    chatListRef: vi.fn(),
+  })),
+}));
+
+const mockedUseChatContext = vi.fn(() => ({
+  messages: [
+    {
+      assistant: "Test assistant message",
+      message_id: "123",
+      user_message: "Test user message",
+      prompt_title: "Test prompt name",
+      brain_name: "Test brain name",
+    },
+  ],
+  notifications: [],
+}));
+
+vi.mock("@/lib/context", async () => {
+  const actual = await vi.importActual<typeof import("@/lib/context")>(
+    "@/lib/context"
+  );
+
+  return {
+    ...actual,
+    useChatContext: vi.fn().mockImplementation(() => mockedUseChatContext()),
+  };
+});
+
+describe("ChatMessages", () => {
+  it("should render chat messages correctly", () => {
+    const { getAllByTestId } = render(<MessagesDialog />);
+    expect(getAllByTestId("brain-tags")).toBeDefined();
+    expect(getAllByTestId("prompt-tags")).toBeDefined();
+    expect(getAllByTestId("chat-message-text")).toBeDefined();
+  });
+
+  it("should render placeholder text when history is empty", () => {
+    mockedUseChatContext.mockImplementation(() => ({
+      messages: [],
+      notifications: [],
+    }));
+
+    const { getByTestId } = render(<MessagesDialog />);
+
+    expect(getByTestId("empty-history-message")).toBeDefined();
+  });
+});

frontend/app/chat/[chatId]/components/MessagesDialog/components/ChatMessage/ChatMessage.tsx

@@ -0,0 +1,30 @@
+import { ChatHistory } from "@/app/chat/[chatId]/types";
+
+import { MessageRow } from "./components";
+
+type ChatMessageProps = {
+  content: ChatHistory;
+};
+export const ChatMessage = ({ content }: ChatMessageProps): JSX.Element => {
+  const { assistant, message_id, user_message, brain_name, prompt_title } =
+    content;
+
+  return (
+    <>
+      <MessageRow
+        key={`user-${message_id}`}
+        speaker={"user"}
+        text={user_message}
+        promptName={prompt_title}
+        brainName={brain_name}
+      />
+      <MessageRow
+        key={`assistant-${message_id}`}
+        speaker={"assistant"}
+        text={assistant}
+        brainName={brain_name}
+        promptName={prompt_title}
+      />
+    </>
+  );
+};