feat: add <Step3/> content

QuivrHQ · Oct 4, 2023 · b5a3554 · b5a3554
1 parent b3f0367
commit b5a3554
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 7 deletions.
diff --git a/...nents/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step3.tsx b/...nents/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step3.tsx
@@ -1,8 +1,12 @@
 import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
 
 import { useOnboardingContext } from "@/lib/hooks/useOnboardingContext";
 
+import { MessageRow } from "../../QADisplay";
 import { checkIfShouldDisplayStep } from "../helpers/checkIfShouldDisplayStep";
+import { useStreamText } from "../hooks/useStreamText";
+import { stepsContainerStyle } from "../styles";
 
 export const Step3 = (): JSX.Element => {
   const { currentStep } = useOnboardingContext();
@@ -11,9 +15,31 @@ export const Step3 = (): JSX.Element => {
     step: "UPLOADED",
   });
 
+  const { t } = useTranslation(["chat"]);
+  const firstMessage = t("onboarding.last_step");
+  const secondMessageStream = t("onboarding.ask_question_to_file");
+
+  const { streamingText: streamingAssistantMessage, isDone: isAssistantDone } =
+    useStreamText({
+      text: firstMessage,
+      enabled: shouldStepBeDisplayed,
+    });
+
+  const { streamingText: firstMessageStream } = useStreamText({
+    text: secondMessageStream,
+    enabled: isAssistantDone && shouldStepBeDisplayed,
+  });
+
   if (!shouldStepBeDisplayed) {
     return <Fragment />;
   }
 
-  return <p>hello</p>;
+  return (
+    <MessageRow speaker={"assistant"} brainName={"Quivr"}>
+      <div className={stepsContainerStyle}>
+        <p>{streamingAssistantMessage}</p>
+        <p>{firstMessageStream}</p>
+      </div>
+    </MessageRow>
+  );
 };
diff --git a/frontend/public/locales/en/chat.json b/frontend/public/locales/en/chat.json
@@ -41,6 +41,8 @@
     "upload_message_2":"Step 2: Now Drag and drop it on the chat or in the 📎",
     "how_to_use_quivr": "How to user Quivr",
     "what_is_quivr":"What is Quivr ?",
-    "what_is_brain": "What is a brain ?"
+    "what_is_brain": "What is a brain ?",
+    "last_step":"Last step 🥳",
+    "ask_question_to_file":"Ask a question to your file. Ex : 'What are you talking about ?'"
   }
 }
diff --git a/frontend/public/locales/es/chat.json b/frontend/public/locales/es/chat.json
@@ -41,6 +41,8 @@
     "upload_message_2": "Paso 2: Ahora, arrástralo y suéltalo en el chat o en el 📎",
     "how_to_use_quivr": "Cómo usar Quivr",
     "what_is_quivr": "¿Qué es Quivr?",
-    "what_is_brain": "¿Qué es un cerebro?"
+    "what_is_brain": "¿Qué es un cerebro?",
+    "last_step":"Último paso 🥳",
+    "ask_question_to_file":"Haz una pregunta a tu archivo. Ej: '¿De qué estás hablando?'"
   }
 }
diff --git a/frontend/public/locales/fr/chat.json b/frontend/public/locales/fr/chat.json
@@ -41,6 +41,8 @@
     "upload_message_2": "Étape 2 : Maintenant, faites glisser et déposez-le dans le chat ou dans 📎",
     "how_to_use_quivr": "Comment utiliser Quivr",
     "what_is_quivr": "Qu'est-ce que Quivr ?",
-    "what_is_brain": "Qu'est-ce qu'un cerveau ?"
+    "what_is_brain": "Qu'est-ce qu'un cerveau ?",
+    "last_step":"Dernière étape 🥳", 
+    "ask_question_to_file":"Posez une question à votre fichier. Ex : 'De quoi parlez-vous ?'"
   }
 }
diff --git a/frontend/public/locales/pt-br/chat.json b/frontend/public/locales/pt-br/chat.json
@@ -41,6 +41,8 @@
     "upload_message_2": "Passo 2: Agora, arraste e solte no chat ou na 📎",
     "how_to_use_quivr": "Como usar o Quivr",
     "what_is_quivr": "O que é o Quivr?",
-    "what_is_brain": "O que é um cérebro?"
+    "what_is_brain": "O que é um cérebro?",
+    "last_step":"Dernière étape 🥳",
+    "ask_question_to_file":"Posez une question à votre fichier. Ex : 'De quoi parlez-vous ?'"
   }
 }
diff --git a/frontend/public/locales/ru/chat.json b/frontend/public/locales/ru/chat.json
@@ -41,6 +41,8 @@
     "upload_message_2": "Шаг 2: Теперь перетащите его в чат или в 📎",
     "how_to_use_quivr": "Как использовать Quivr",
     "what_is_quivr": "Что такое Quivr?",
-    "what_is_brain": "Что такое мозг?"
+    "what_is_brain": "Что такое мозг?",
+    "last_step":"Последний шаг 🥳", 
+    "ask_question_to_file":"Задайте вопрос своему файлу. Например: 'О чем вы говорите?'"
   }
 }
diff --git a/frontend/public/locales/zh-cn/chat.json b/frontend/public/locales/zh-cn/chat.json
@@ -42,6 +42,8 @@
     "upload_message_2": "第2步：现在，将其拖放到聊天框或 📎 中",
     "how_to_use_quivr": "如何使用Quivr",
     "what_is_quivr": "什么是Quivr？",
-    "what_is_brain": "什么是大脑？"
+    "what_is_brain": "什么是大脑？",
+    "last_step":"最后一步 🥳",
+    "ask_question_to_file":"向您的文件提问。例如：'你在谈论什么？'"
   }
 }