From bf7cdae4abb31cfc12ba434573ea1585e9033fab Mon Sep 17 00:00:00 2001 From: Mamadou DICKO <63923024+mamadoudicko@users.noreply.github.com> Date: Tue, 3 Oct 2023 18:34:28 +0200 Subject: [PATCH] feat(onboarding): add questions suggestions layout (#1318) * refactor: update ChatInput * feat(chat): add questions suggestion layout --- .../components/ActionsBar/ActionsBar.tsx | 4 +- .../OnboardingQuestions.tsx | 21 +++++ .../components/OnboardingQuestions.tsx | 13 +++ .../OnboardingQuestions/components/index.ts | 1 + .../components/OnboardingQuestions/index.ts | 1 + .../components/ChatInput/components/index.ts | 2 + .../ActionsBar/components/ChatInput/index.tsx | 90 ++++++++++--------- frontend/public/locales/en/chat.json | 5 +- frontend/public/locales/es/chat.json | 5 +- frontend/public/locales/fr/chat.json | 5 +- frontend/public/locales/pt-br/chat.json | 6 +- frontend/public/locales/ru/chat.json | 5 +- frontend/public/locales/zh-cn/chat.json | 5 +- 13 files changed, 112 insertions(+), 51 deletions(-) create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/OnboardingQuestions.tsx create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/OnboardingQuestions.tsx create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/index.ts create mode 100644 frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/index.ts diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx index d663c2f7d..81ec91d3c 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx @@ -42,9 +42,7 @@ export const ActionsBar = (): JSX.Element => { )} {!shouldDisplayFeedCard && ( -
- -
+ )} diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/OnboardingQuestions.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/OnboardingQuestions.tsx new file mode 100644 index 000000000..d363107df --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/OnboardingQuestions.tsx @@ -0,0 +1,21 @@ +import { useTranslation } from "react-i18next"; + +import { OnboardingQuestion } from "./components"; + +export const OnboardingQuestions = (): JSX.Element => { + const { t } = useTranslation(["chat"]); + + const onboardingQuestions = [ + t("onboarding.how_to_use_quivr"), + t("onboarding.what_is_quivr"), + t("onboarding.what_is_brain"), + ]; + + return ( +
+ {onboardingQuestions.map((question) => ( + + ))} +
+ ); +}; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/OnboardingQuestions.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/OnboardingQuestions.tsx new file mode 100644 index 000000000..a91cb5249 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/OnboardingQuestions.tsx @@ -0,0 +1,13 @@ +type OnboardingQuestionsProps = { + question: string; +}; + +export const OnboardingQuestion = ({ + question, +}: OnboardingQuestionsProps): JSX.Element => { + return ( +
+ {question} +
+ ); +}; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/index.ts new file mode 100644 index 000000000..319b800a7 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/index.ts @@ -0,0 +1 @@ +export * from "./OnboardingQuestions"; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/index.ts new file mode 100644 index 000000000..319b800a7 --- /dev/null +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/index.ts @@ -0,0 +1 @@ +export * from "./OnboardingQuestions"; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts index 85c1ff984..0bcfab7b7 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts @@ -1 +1,3 @@ export * from "./ChatBar"; +export * from "./ConfigModal"; +export * from "./OnboardingQuestions"; diff --git a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx index 0c017bb1d..c442fbcca 100644 --- a/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx +++ b/frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/index.tsx @@ -1,10 +1,12 @@ "use client"; +import { useFeatureIsOn } from "@growthbook/growthbook-react"; import { useTranslation } from "react-i18next"; import { PiPaperclipFill } from "react-icons/pi"; import Button from "@/lib/components/ui/Button"; import { useKnowledgeToFeedContext } from "@/lib/context/KnowledgeToFeedProvider/hooks/useKnowledgeToFeedContext"; +import { OnboardingQuestions } from "./components"; import { ChatBar } from "./components/ChatBar/ChatBar"; import { ConfigModal } from "./components/ConfigModal"; import { useChatInput } from "./hooks/useChatInput"; @@ -21,52 +23,58 @@ export const ChatInput = ({ const { t } = useTranslation(["chat"]); const { setShouldDisplayFeedCard } = useKnowledgeToFeedContext(); + const shouldDisplayOnboarding = useFeatureIsOn("onboarding"); return ( -
{ - e.preventDefault(); - submitQuestion(); - }} - className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2" - > - {!shouldDisplayFeedCard && ( - - )} + {!shouldDisplayFeedCard && ( + + )} -
- -
+
+ +
-
- -
- -
+
+ +
+ +
+
+
- + ); }; diff --git a/frontend/public/locales/en/chat.json b/frontend/public/locales/en/chat.json index f28aa4d67..929c66141 100644 --- a/frontend/public/locales/en/chat.json +++ b/frontend/public/locales/en/chat.json @@ -38,6 +38,9 @@ "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 📎" + "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 ?" } } diff --git a/frontend/public/locales/es/chat.json b/frontend/public/locales/es/chat.json index 05858b13f..2ef731b28 100644 --- a/frontend/public/locales/es/chat.json +++ b/frontend/public/locales/es/chat.json @@ -38,6 +38,9 @@ "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 📎" + "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?" } } diff --git a/frontend/public/locales/fr/chat.json b/frontend/public/locales/fr/chat.json index 0b757b93c..5de16e6e4 100644 --- a/frontend/public/locales/fr/chat.json +++ b/frontend/public/locales/fr/chat.json @@ -38,6 +38,9 @@ "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 📎" + "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 ?" } } diff --git a/frontend/public/locales/pt-br/chat.json b/frontend/public/locales/pt-br/chat.json index a6ceb492c..96ffbd408 100644 --- a/frontend/public/locales/pt-br/chat.json +++ b/frontend/public/locales/pt-br/chat.json @@ -38,7 +38,9 @@ "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 📎" - + "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?" } } diff --git a/frontend/public/locales/ru/chat.json b/frontend/public/locales/ru/chat.json index c48e66605..d7a08bdc4 100644 --- a/frontend/public/locales/ru/chat.json +++ b/frontend/public/locales/ru/chat.json @@ -38,6 +38,9 @@ "download_message_1": "Привет 👋🏻 Хочешь узнать о Quivr? 😇", "download_message_2": "Шаг 1: Скачайте документацию Quivr", "upload_message_1": "Поздравляем с первым шагом 🥳!", - "upload_message_2": "Шаг 2: Теперь перетащите его в чат или в 📎" + "upload_message_2": "Шаг 2: Теперь перетащите его в чат или в 📎", + "how_to_use_quivr": "Как использовать Quivr", + "what_is_quivr": "Что такое Quivr?", + "what_is_brain": "Что такое мозг?" } } diff --git a/frontend/public/locales/zh-cn/chat.json b/frontend/public/locales/zh-cn/chat.json index ef3742629..7d0e53130 100644 --- a/frontend/public/locales/zh-cn/chat.json +++ b/frontend/public/locales/zh-cn/chat.json @@ -39,6 +39,9 @@ "download_message_1": "你好 👋🏻 想要发现 Quivr 吗？ 😇", "download_message_2": "步骤 1：下载“Quivr 文档”", "upload_message_1": "恭喜您迈出第一步 🥳!", - "upload_message_2": "第2步：现在，将其拖放到聊天框或 📎 中" + "upload_message_2": "第2步：现在，将其拖放到聊天框或 📎 中", + "how_to_use_quivr": "如何使用Quivr", + "what_is_quivr": "什么是Quivr？", + "what_is_brain": "什么是大脑？" } }