feat(feedBrain): add request pending message #1135 (#1136)

* feat(feed brain): add pending message

* feat: add 'filesUploading' translation

* feat(chatPage): update tests

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

@@ -42,6 +42,12 @@ vi.mock("@/lib/context/BrainConfigProvider/brain-config-provider", () => ({
   BrainConfigContext: BrainConfigContextMock,
 }));
 
+vi.mock("@/lib/api/chat/useChatApi", () => ({
+  useChatApi: () => ({
+    getHistory: () => [],
+  }),
+}));
+
 describe("Chat page", () => {
   it("should render chat page correctly", () => {
     const { getByTestId } = render(

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

@@ -1,37 +1,71 @@
+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 { addContent, contents, feedBrain, removeContent } =
     useKnowledgeUploader();
+  const { getHistory } = useChatApi();
+  const { t } = useTranslation(["chat"]);
+  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-2 pl-6">
+          <div className="flex flex-1 items-center">
+            <span className="text-1xl">{t("filesUploading")}</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;

frontend/public/locales/en/chat.json

@@ -34,5 +34,6 @@
   "actions_bar_placeholder": "Ask a question to a @brain and choose your #prompt",
   "missing_brain": "Please select a brain to chat with",
   "new_prompt": "Create new prompt",
-  "feed_brain_placeholder":"Choose which @brain you want to feed with these files"
+  "feed_brain_placeholder":"Choose which @brain you want to feed with these files",
+  "filesUploading":"Files uploading"
 }

frontend/public/locales/es/chat.json

@@ -35,5 +35,6 @@
   "title": "Conversa con {{brain}}",
   "missing_brain": "No hay cerebro seleccionado",
   "new_prompt": "Crear nueva instrucción",
-  "feed_brain_placeholder" : "Elige cuál @cerebro quieres alimentar con estos archivos"
+  "feed_brain_placeholder" : "Elige cuál @cerebro quieres alimentar con estos archivos",
+  "filesUploading": "Subiendo archivos..."
 }

frontend/public/locales/fr/chat.json

@@ -35,5 +35,6 @@
   "title": "Discuter avec {{brain}}",
   "missing_brain": "Veuillez selectionner un cerveau pour discuter",
   "new_prompt": "Créer un nouveau prompt",
-  "feed_brain_placeholder" : "Choisissez le @cerveau que vous souhaitez nourrir avec ces fichiers"
+  "feed_brain_placeholder" : "Choisissez le @cerveau que vous souhaitez nourrir avec ces fichiers",
+  "filesUploading": "Téléchargement des fichiers..."
 }

frontend/public/locales/pt-br/chat.json

@@ -35,5 +35,6 @@
   "title": "Converse com {{brain}}",
   "missing_brain": "Cérebro não encontrado",
   "new_prompt": "Criar novo prompt",
-  "feed_brain_placeholder" : "Escolha qual @cérebro você deseja alimentar com esses arquivos"
+  "feed_brain_placeholder" : "Escolha qual @cérebro você deseja alimentar com esses arquivos",
+  "filesUploading":"Arquivos sendo enviados"
 }

frontend/public/locales/ru/chat.json

@@ -35,5 +35,6 @@
   "title": "Чат с {{brain}}",
   "missing_brain": "Мозг не найден",
   "new_prompt": "Создать новый запрос",
-  "feed_brain_placeholder" : "Выберите, какой @мозг вы хотите питать этими файлами"
+  "feed_brain_placeholder" : "Выберите, какой @мозг вы хотите питать этими файлами",
+  "filesUploading": "Загрузка файлов..."
 }

frontend/public/locales/zh-cn/chat.json

@@ -35,5 +35,6 @@
   "actions_bar_placeholder": "向@大脑提问，选择您的#提示",
   "missing_brain": "请选择一个大脑进行聊天",
   "new_prompt": "新提示",
-  "feed_brain_placeholder" : "选择要用这些文件喂养的 @大脑"
+  "feed_brain_placeholder" : "选择要用这些文件喂养的 @大脑",
+  "filesUploading": "文件上传中..."
 }