feat(feed brain): add pending message

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

@@ -1,37 +1,69 @@
+import { useParams } from "next/navigation";
+import { useEffect, useState } from "react";
+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 { addContent, contents, feedBrain, removeContent } =
     useKnowledgeUploader();
+  const { getHistory } = useChatApi();
+  const [hasPendingRequests, setHasPendingRequests] = useState(false);
+  const params = useParams();
 
-  return (
-    <div
-      className={
-        shouldDisplayUploadCard ? "h-full flex flex-col flex-auto" : ""
+  useEffect(() => {
+    const updateNotificationsStatus = async () => {
+      const chatId = params?.chatId as string | undefined;
+      if (chatId !== undefined) {
+        const history = await getHistory(chatId);
+        setHasPendingRequests(checkIfHasPendingRequest(history));
       }
-    >
-      {shouldDisplayUploadCard && (
-        <div className="flex flex-1 overflow-y-scroll shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-6">
-          <KnowledgeToFeed
-            onClose={() => setShouldDisplayUploadCard(false)}
-            contents={contents}
-            addContent={addContent}
-            removeContent={removeContent}
-          />
+    };
+    void updateNotificationsStatus();
+  }, [getHistory, params?.chatId]);
+
+  return (
+    <>
+      {hasPendingRequests && (
+        <div className="flex mt-1 flex-row w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-3 pl-6">
+          <div className="flex flex-1">
+            <span className="text-2xl">Files uploading</span>
+          </div>
+          <AiOutlineLoading3Quarters className="animate-spin text-3xl" />
         </div>
       )}
-      <div className="flex mt-1 flex-col w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-6">
-        <ChatInput
-          shouldDisplayUploadCard={shouldDisplayUploadCard}
-          setShouldDisplayUploadCard={setShouldDisplayUploadCard}
-          feedBrain={() => void feedBrain()}
-          hasContentToFeedBrain={contents.length > 0}
-        />
+
+      <div
+        className={
+          shouldDisplayUploadCard ? "h-full flex flex-col flex-auto" : ""
+        }
+      >
+        {shouldDisplayUploadCard && (
+          <div className="flex flex-1 overflow-y-scroll shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-6">
+            <KnowledgeToFeed
+              onClose={() => setShouldDisplayUploadCard(false)}
+              contents={contents}
+              addContent={addContent}
+              removeContent={removeContent}
+            />
+          </div>
+        )}
+        <div className="flex mt-1 flex-col w-full shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow rounded-xl bg-white dark:bg-black border border-black/10 dark:border-white/25 p-6">
+          <ChatInput
+            shouldDisplayUploadCard={shouldDisplayUploadCard}
+            setShouldDisplayUploadCard={setShouldDisplayUploadCard}
+            feedBrain={() => void feedBrain()}
+            hasContentToFeedBrain={contents.length > 0}
+          />
+        </div>
       </div>
-    </div>
+    </>
   );
 };

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

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

frontend/app/chat/[chatId]/types/index.ts

@@ -18,21 +18,26 @@ export type ChatHistory = {
   brain_name?: string;
 };
 
-type HistoryItemType = "MESSAGE" | "NOTIFICATION";
+type NotificationStatus = "Pending" | "Done";
 
 type Notification = {
   id: string;
   datetime: string;
   chat_id?: string | null;
   message?: string | null;
   action: string;
-  status: string;
+  status: NotificationStatus;
 };
 
-export type ChatItem = {
-  item_type: HistoryItemType;
-  body: ChatHistory | Notification;
-};
+export type ChatItem =
+  | {
+      item_type: "MESSAGE";
+      body: ChatHistory;
+    }
+  | {
+      item_type: "NOTIFICATION";
+      body: Notification;
+    };
 
 export type ChatEntity = {
   chat_id: UUID;