From 6d0bc9b6acb311854b577e9fb919d63312451fa2 Mon Sep 17 00:00:00 2001 From: Mamadou DICKO <63923024+mamadoudicko@users.noreply.github.com> Date: Tue, 3 Oct 2023 18:26:40 +0200 Subject: [PATCH] feat(onboarding): add step 2 (#1314) * refactor: move onboarding step1 to components folder * feat(onboarding): add on step2 --- .../components/Onboarding/Onboarding.tsx | 42 +++-------- .../Onboarding/components/Step1.tsx | 70 +++++++++++++++++++ .../Onboarding/components/Step2.tsx | 47 +++++++++++++ .../components/Onboarding/components/index.ts | 1 + .../helpers/checkIfShouldDisplayStep.ts | 18 +++++ .../Onboarding/hooks/useStreamText.ts | 6 +- .../components/Onboarding/styles/index.ts | 1 + .../components/Onboarding/types.ts | 0 .../ChatDialogue/components/types/index.ts | 1 + frontend/public/locales/en/chat.json | 6 +- frontend/public/locales/es/chat.json | 6 +- frontend/public/locales/fr/chat.json | 6 +- frontend/public/locales/pt-br/chat.json | 7 +- frontend/public/locales/ru/chat.json | 6 +- frontend/public/locales/zh-cn/chat.json | 6 +- 15 files changed, 177 insertions(+), 46 deletions(-) create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step1.tsx create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step2.tsx create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/index.ts create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/helpers/checkIfShouldDisplayStep.ts create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/styles/index.ts create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/types.ts create mode 100644 frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/types/index.ts diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/Onboarding.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/Onboarding.tsx index a6dcfe606..0dc3e8161 100644 --- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/Onboarding.tsx +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/Onboarding.tsx @@ -1,40 +1,16 @@ -import Link from "next/link"; -import { useTranslation } from "react-i18next"; -import { RiDownloadLine } from "react-icons/ri"; +import { useState } from "react"; -import Button from "@/lib/components/ui/Button"; - -import { useStreamText } from "./hooks/useStreamText"; -import { MessageRow } from "../QADisplay"; +import { Step1 } from "./components"; +import { Step2 } from "./components/Step2"; +import { OnboardingState } from "../types"; export const Onboarding = (): JSX.Element => { - const { t } = useTranslation(["chat"]); - const assistantMessage = t("onboarding.step_1_message_1"); - const step1Text = t("onboarding.step_1_message_2"); - - const { streamingText: streamingAssistantMessage, isDone: isAssistantDone } = - useStreamText(assistantMessage); - const { streamingText: streamingStep1Text, isDone: isStep1Done } = - useStreamText(step1Text, isAssistantDone); + const [currentStep, setCurrentStep] = useState("DOWNLOAD"); return ( - -

{streamingAssistantMessage}

-
- {streamingStep1Text} - {isStep1Done && isAssistantDone && ( - - - - )} -
- +
+ + +
); }; diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step1.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step1.tsx new file mode 100644 index 000000000..cc557b2a1 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step1.tsx @@ -0,0 +1,70 @@ +import Link from "next/link"; +import { Fragment } from "react"; +import { useTranslation } from "react-i18next"; +import { RiDownloadLine } from "react-icons/ri"; + +import Button from "@/lib/components/ui/Button"; + +import { MessageRow } from "../../QADisplay"; +import { OnboardingState } from "../../types"; +import { checkIfShouldDisplayStep } from "../helpers/checkIfShouldDisplayStep"; +import { useStreamText } from "../hooks/useStreamText"; +import { stepsContainerStyle } from "../styles"; + +type Step1Props = { + currentStep: OnboardingState; + changeStateTo: (state: OnboardingState) => void; +}; + +export const Step1 = ({ + currentStep, + changeStateTo, +}: Step1Props): JSX.Element => { + const shouldStepBeDisplayed = checkIfShouldDisplayStep({ + currentStep, + step: "DOWNLOAD", + }); + + const { t } = useTranslation(["chat"]); + const firstMessage = t("onboarding.download_message_1"); + const secondMessageStream = t("onboarding.download_message_2"); + + const { streamingText: streamingAssistantMessage, isDone: isAssistantDone } = + useStreamText({ + text: firstMessage, + enabled: shouldStepBeDisplayed, + }); + const { streamingText: firstMessageStrem, isDone: isStep1Done } = + useStreamText({ + text: secondMessageStream, + enabled: isAssistantDone && shouldStepBeDisplayed, + }); + + if (!shouldStepBeDisplayed) { + return ; + } + + return ( + +
+

{streamingAssistantMessage}

+
+ {firstMessageStrem} + {isStep1Done && isAssistantDone && ( + changeStateTo("UPLOAD")} + > + + + )} +
+
+ + ); +}; diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step2.tsx b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step2.tsx new file mode 100644 index 000000000..84f44b0b1 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step2.tsx @@ -0,0 +1,47 @@ +import { Fragment } from "react"; +import { useTranslation } from "react-i18next"; + +import { MessageRow } from "../../QADisplay"; +import { OnboardingState } from "../../types"; +import { checkIfShouldDisplayStep } from "../helpers/checkIfShouldDisplayStep"; +import { useStreamText } from "../hooks/useStreamText"; +import { stepsContainerStyle } from "../styles"; + +type Step1Props = { + currentStep: OnboardingState; +}; + +export const Step2 = ({ currentStep }: Step1Props): JSX.Element => { + const shouldStepBeDisplayed = checkIfShouldDisplayStep({ + currentStep, + step: "UPLOAD", + }); + + const { t } = useTranslation(["chat"]); + const firstMessage = t("onboarding.upload_message_1"); + const secondMessageStream = t("onboarding.upload_message_2"); + + const { streamingText: streamingAssistantMessage, isDone: isAssistantDone } = + useStreamText({ + text: firstMessage, + enabled: shouldStepBeDisplayed, + }); + + const { streamingText: firstMessageStream } = useStreamText({ + text: secondMessageStream, + enabled: isAssistantDone && shouldStepBeDisplayed, + }); + + if (!shouldStepBeDisplayed) { + return ; + } + + return ( + +
+

{streamingAssistantMessage}

+

{firstMessageStream}

+
+ + ); +}; diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/index.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/index.ts new file mode 100644 index 000000000..e1740dc6b --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/index.ts @@ -0,0 +1 @@ +export * from "./Step1"; diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/helpers/checkIfShouldDisplayStep.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/helpers/checkIfShouldDisplayStep.ts new file mode 100644 index 000000000..1161e32fb --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/helpers/checkIfShouldDisplayStep.ts @@ -0,0 +1,18 @@ +import { OnboardingState } from "../../types"; + +const onboardingStepToState: Record = { + DOWNLOAD: ["DOWNLOAD", "UPLOAD"], + UPLOAD: ["UPLOAD"], +}; + +type CheckIfShouldDisplayStepProps = { + currentStep: OnboardingState; + step: OnboardingState; +}; + +export const checkIfShouldDisplayStep = ({ + currentStep, + step, +}: CheckIfShouldDisplayStepProps): boolean => { + return onboardingStepToState[step].includes(currentStep); +}; diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/hooks/useStreamText.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/hooks/useStreamText.ts index d55b87599..b239d485c 100644 --- a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/hooks/useStreamText.ts +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/hooks/useStreamText.ts @@ -1,7 +1,11 @@ import { useEffect, useState } from "react"; +type UseStreamTextProps = { + text: string; + enabled?: boolean; +}; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -export const useStreamText = (text: string, enabled = true) => { +export const useStreamText = ({ text, enabled = true }: UseStreamTextProps) => { const [streamingText, setStreamingText] = useState(""); const [currentIndex, setCurrentIndex] = useState(0); diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/styles/index.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/styles/index.ts new file mode 100644 index 000000000..afa34804a --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/styles/index.ts @@ -0,0 +1 @@ +export const stepsContainerStyle = "flex flex-col gap-2"; diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/types.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/Onboarding/types.ts new file mode 100644 index 000000000..e69de29bb diff --git a/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/types/index.ts b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/types/index.ts new file mode 100644 index 000000000..63ab85b26 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ChatDialogueArea/components/ChatDialogue/components/types/index.ts @@ -0,0 +1 @@ +export type OnboardingState = "DOWNLOAD" | "UPLOAD"; diff --git a/frontend/public/locales/en/chat.json b/frontend/public/locales/en/chat.json index 3e6d7fec5..f28aa4d67 100644 --- a/frontend/public/locales/en/chat.json +++ b/frontend/public/locales/en/chat.json @@ -35,7 +35,9 @@ "feedingBrain": "Your newly added knowledge is being processed, you can keep chatting in the meantime !", "add_content_card_button_tooltip": "Add knowledge to a brain", "onboarding": { - "step_1_message_1": "Hi 👋🏻 Want to discover Quivr ? 😇", - "step_1_message_2": "Step 1: Download “Quivr documentation”" + "download_message_1": "Hi 👋🏻 Want to discover Quivr ? 😇", + "download_message_2": "Step 1: Download “Quivr documentation”", + "upload_message_1":"Congratulations on your first step 🥳", + "upload_message_2":"Step 2: Now Drag and drop it on the chat or in the 📎" } } diff --git a/frontend/public/locales/es/chat.json b/frontend/public/locales/es/chat.json index 208d16785..05858b13f 100644 --- a/frontend/public/locales/es/chat.json +++ b/frontend/public/locales/es/chat.json @@ -35,7 +35,9 @@ "feedingBrain": "Su conocimiento recién agregado se está procesando, ¡puede seguir chateando mientras tanto!", "add_content_card_button_tooltip": "Agregar conocimiento a un cerebro", "onboarding":{ - "step_1_message_1": "Hola 👋🏻 ¿Quieres descubrir Quivr? 😇", - "step_1_message_2": "Paso 1: Descargar la documentación de “Quivr”" + "download_message_1": "Hola 👋🏻 ¿Quieres descubrir Quivr? 😇", + "download_message_2": "Paso 1: Descargar la documentación de “Quivr”", + "upload_message_1": "¡Felicidades por tu primer paso 🥳!", + "upload_message_2": "Paso 2: Ahora, arrástralo y suéltalo en el chat o en el 📎" } } diff --git a/frontend/public/locales/fr/chat.json b/frontend/public/locales/fr/chat.json index 5a2ed9627..0b757b93c 100644 --- a/frontend/public/locales/fr/chat.json +++ b/frontend/public/locales/fr/chat.json @@ -35,7 +35,9 @@ "feedingBrain": "Vos nouvelles connaissances sont en cours de traitement. Vous pouvez continuer à discuter en attendant !", "add_content_card_button_tooltip": "Ajouter des connaissances à un cerveau", "onboarding":{ - "step_1_message_1": "Salut 👋🏻 Envie de découvrir Quivr ? 😇", - "step_1_message_2": "Étape 1 : Téléchargez la documentation de “Quivr”" + "download_message_1": "Salut 👋🏻 Envie de découvrir Quivr ? 😇", + "download_message_2": "Étape 1 : Téléchargez la documentation de “Quivr”", + "upload_message_1": "Félicitations pour votre première étape 🥳!", + "upload_message_2": "Étape 2 : Maintenant, faites glisser et déposez-le dans le chat ou dans 📎" } } diff --git a/frontend/public/locales/pt-br/chat.json b/frontend/public/locales/pt-br/chat.json index 0390b3a73..a6ceb492c 100644 --- a/frontend/public/locales/pt-br/chat.json +++ b/frontend/public/locales/pt-br/chat.json @@ -35,7 +35,10 @@ "feedingBrain": "Seu conhecimento recém-adicionado está sendo processado, você pode continuar conversando enquanto isso!", "add_content_card_button_tooltip": "Adicionar conhecimento a um cérebro", "onboarding":{ - "step_1_message_1": "Oi 👋🏻 Quer descobrir o Quivr? 😇", - "step_1_message_2": "Passo 1: Baixe a documentação do 'Quivr'" + "download_message_1": "Oi 👋🏻 Quer descobrir o Quivr? 😇", + "download_message_2": "Passo 1: Baixe a documentação do 'Quivr'", + "upload_message_1": "Parabéns pelo seu primeiro passo 🥳!", + "upload_message_2": "Passo 2: Agora, arraste e solte no chat ou na 📎" + } } diff --git a/frontend/public/locales/ru/chat.json b/frontend/public/locales/ru/chat.json index c03e1fd44..c48e66605 100644 --- a/frontend/public/locales/ru/chat.json +++ b/frontend/public/locales/ru/chat.json @@ -35,7 +35,9 @@ "feedingBrain": "Ваш недавно добавленный знаний обрабатывается, вы можете продолжить общение в это время!", "add_content_card_button_tooltip": "Добавить знаний в мозг", "onboarding":{ - "step_1_message_1": "Привет 👋🏻 Хочешь узнать о Quivr? 😇", - "step_1_message_2": "Шаг 1: Скачайте документацию Quivr" + "download_message_1": "Привет 👋🏻 Хочешь узнать о Quivr? 😇", + "download_message_2": "Шаг 1: Скачайте документацию Quivr", + "upload_message_1": "Поздравляем с первым шагом 🥳!", + "upload_message_2": "Шаг 2: Теперь перетащите его в чат или в 📎" } } diff --git a/frontend/public/locales/zh-cn/chat.json b/frontend/public/locales/zh-cn/chat.json index e46bb69d0..ef3742629 100644 --- a/frontend/public/locales/zh-cn/chat.json +++ b/frontend/public/locales/zh-cn/chat.json @@ -36,7 +36,9 @@ "feedingBrain": "您新添加的知识正在处理中，同时您可以继续聊天！", "add_content_card_button_tooltip": "向大脑添加知识", "onboarding":{ - "step_1_message_1": "你好 👋🏻 想要发现 Quivr 吗？ 😇", - "step_1_message_2": "步骤 1：下载“Quivr 文档”" + "download_message_1": "你好 👋🏻 想要发现 Quivr 吗？ 😇", + "download_message_2": "步骤 1：下载“Quivr 文档”", + "upload_message_1": "恭喜您迈出第一步 🥳!", + "upload_message_2": "第2步：现在，将其拖放到聊天框或 📎 中" } }