feat(onboarding): add questions suggestions layout (#1318)

* refactor: update ChatInput

* feat(chat): add questions suggestion layout

frontend/app/chat/[chatId]/components/ActionsBar/ActionsBar.tsx

@@ -42,9 +42,7 @@ export const ActionsBar = (): JSX.Element => {
           </AnimatePresence>
         )}
         {!shouldDisplayFeedCard && (
-          <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-2">
-            <ChatInput shouldDisplayFeedCard={shouldDisplayFeedCard} />
-          </div>
+          <ChatInput shouldDisplayFeedCard={shouldDisplayFeedCard} />
         )}
       </div>
     </>

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 (
+    <div className="flex flex-row flex-1 gap-4 mb-4">
+      {onboardingQuestions.map((question) => (
+        <OnboardingQuestion key={question} question={question} />
+      ))}
+    </div>
+  );
+};

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 (
+    <div className="cursor-pointer shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow bg-yellow-100 px-3 py-1 rounded-xl border-black/10 dark:border-white/25">
+      {question}
+    </div>
+  );
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/index.ts

@@ -0,0 +1 @@
+export * from "./OnboardingQuestions";

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/index.ts

@@ -0,0 +1 @@
+export * from "./OnboardingQuestions";

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/index.ts

@@ -1 +1,3 @@
 export * from "./ChatBar";
+export * from "./ConfigModal";
+export * from "./OnboardingQuestions";

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 (
-    <form
-      data-testid="chat-input-form"
-      onSubmit={(e) => {
-        e.preventDefault();
-        submitQuestion();
-      }}
-      className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
-    >
-      {!shouldDisplayFeedCard && (
-        <Button
-          className="p-0"
-          variant={"tertiary"}
-          data-testid="upload-button"
-          type="button"
-          onClick={() => setShouldDisplayFeedCard(true)}
-          tooltip={t("add_content_card_button_tooltip")}
+    <>
+      {shouldDisplayOnboarding && <OnboardingQuestions />}
+      <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-2">
+        <form
+          data-testid="chat-input-form"
+          onSubmit={(e) => {
+            e.preventDefault();
+            submitQuestion();
+          }}
+          className="sticky bottom-0 bg-white dark:bg-black w-full flex items-center gap-2 z-20 p-2"
         >
-          <PiPaperclipFill className="text-3xl" />
-        </Button>
-      )}
+          {!shouldDisplayFeedCard && (
+            <Button
+              className="p-0"
+              variant={"tertiary"}
+              data-testid="upload-button"
+              type="button"
+              onClick={() => setShouldDisplayFeedCard(true)}
+              tooltip={t("add_content_card_button_tooltip")}
+            >
+              <PiPaperclipFill className="text-3xl" />
+            </Button>
+          )}
 
-      <div className="flex flex-1 flex-col items-center">
-        <ChatBar
-          message={message}
-          setMessage={setMessage}
-          onSubmit={submitQuestion}
-        />
-      </div>
+          <div className="flex flex-1 flex-col items-center">
+            <ChatBar
+              message={message}
+              setMessage={setMessage}
+              onSubmit={submitQuestion}
+            />
+          </div>
 
-      <div className="flex flex-row items-end">
-        <Button
-          className="px-3 py-2 sm:px-4 sm:py-2"
-          type="submit"
-          isLoading={generatingAnswer}
-          data-testid="submit-button"
-        >
-          {generatingAnswer
-            ? t("thinking", { ns: "chat" })
-            : t("chat", { ns: "chat" })}
-        </Button>
-        <div className="hidden md:flex items-center">
-          <ConfigModal />
-        </div>
+          <div className="flex flex-row items-end">
+            <Button
+              className="px-3 py-2 sm:px-4 sm:py-2"
+              type="submit"
+              isLoading={generatingAnswer}
+              data-testid="submit-button"
+            >
+              {generatingAnswer
+                ? t("thinking", { ns: "chat" })
+                : t("chat", { ns: "chat" })}
+            </Button>
+            <div className="hidden md:flex items-center">
+              <ConfigModal />
+            </div>
+          </div>
+        </form>
       </div>
-    </form>
+    </>
   );
 };

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

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

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

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

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": "Что такое мозг?"
   }
 }

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": "什么是大脑？"
   }
 }