mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-15 09:32:22 +03:00
feat(onboarding): add step 2 (#1314)
* refactor: move onboarding step1 to components folder * feat(onboarding): add on step2
This commit is contained in:
Mamadou DICKO
GitHub
parent
403cdaa354
commit
6d0bc9b6ac
@ -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<OnboardingState>("DOWNLOAD");
|
||||
|
||||
return (
|
||||
<MessageRow speaker={"assistant"} brainName={"Quivr"}>
|
||||
<p>{streamingAssistantMessage}</p>
|
||||
<div>
|
||||
{streamingStep1Text}
|
||||
{isStep1Done && isAssistantDone && (
|
||||
<Link
|
||||
href="/documents/doc.pdf"
|
||||
download
|
||||
target="_blank"
|
||||
referrerPolicy="no-referrer"
|
||||
>
|
||||
<Button className="bg-black p-2 ml-2 rounded-full inline-flex">
|
||||
<RiDownloadLine />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</MessageRow>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Step1 changeStateTo={setCurrentStep} currentStep={currentStep} />
|
||||
<Step2 currentStep={currentStep} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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 <Fragment />;
|
||||
}
|
||||
|
||||
return (
|
||||
<MessageRow speaker={"assistant"} brainName={"Quivr"}>
|
||||
<div className={stepsContainerStyle}>
|
||||
<p>{streamingAssistantMessage}</p>
|
||||
<div>
|
||||
{firstMessageStrem}
|
||||
{isStep1Done && isAssistantDone && (
|
||||
<Link
|
||||
href="/documents/doc.pdf"
|
||||
download
|
||||
target="_blank"
|
||||
referrerPolicy="no-referrer"
|
||||
onClick={() => changeStateTo("UPLOAD")}
|
||||
>
|
||||
<Button className="bg-black p-2 ml-2 rounded-full inline-flex">
|
||||
<RiDownloadLine />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</MessageRow>
|
||||
);
|
||||
};
|
||||
@ -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 <Fragment />;
|
||||
}
|
||||
|
||||
return (
|
||||
<MessageRow speaker={"assistant"} brainName={"Quivr"}>
|
||||
<div className={stepsContainerStyle}>
|
||||
<p>{streamingAssistantMessage}</p>
|
||||
<p>{firstMessageStream}</p>
|
||||
</div>
|
||||
</MessageRow>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1 @@
|
||||
export * from "./Step1";
|
||||
@ -0,0 +1,18 @@
|
||||
import { OnboardingState } from "../../types";
|
||||
|
||||
const onboardingStepToState: Record<OnboardingState, OnboardingState[]> = {
|
||||
DOWNLOAD: ["DOWNLOAD", "UPLOAD"],
|
||||
UPLOAD: ["UPLOAD"],
|
||||
};
|
||||
|
||||
type CheckIfShouldDisplayStepProps = {
|
||||
currentStep: OnboardingState;
|
||||
step: OnboardingState;
|
||||
};
|
||||
|
||||
export const checkIfShouldDisplayStep = ({
|
||||
currentStep,
|
||||
step,
|
||||
}: CheckIfShouldDisplayStepProps): boolean => {
|
||||
return onboardingStepToState[step].includes(currentStep);
|
||||
};
|
||||
@ -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<string>("");
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
|
||||
@ -0,0 +1 @@
|
||||
export const stepsContainerStyle = "flex flex-col gap-2";
|
||||
@ -0,0 +1 @@
|
||||
export type OnboardingState = "DOWNLOAD" | "UPLOAD";
|
||||
@ -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 📎"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 📎"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 📎"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 📎"
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -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: Теперь перетащите его в чат или в 📎"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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步：现在，将其拖放到聊天框或 📎 中"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user