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

* feat(feed brain): add pending message

* feat: add 'filesUploading' translation

* feat(chatPage): update tests
This commit is contained in:
Mamadou DICKO 2023-09-08 09:57:21 +02:00 committed by GitHub
parent 9464707d40
commit 7e1e13fab5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 92 additions and 33 deletions

View File

@ -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(

View File

@ -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();
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]);
return (
<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}
/>
<>
{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>
</>
);
};

View File

@ -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"
);
};

View File

@ -18,7 +18,7 @@ export type ChatHistory = {
brain_name?: string;
};
type HistoryItemType = "MESSAGE" | "NOTIFICATION";
type NotificationStatus = "Pending" | "Done";
type Notification = {
id: string;
@ -26,13 +26,18 @@ type Notification = {
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;

View File

@ -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"
}

View File

@ -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..."
}

View File

@ -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..."
}

View File

@ -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"
}

View File

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

View File

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