Revert "fix(frontend): remove onboarding questions" (#2181)

Reverts QuivrHQ/quivr#2176

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

@@ -0,0 +1,18 @@
+import { OnboardingQuestion } from "./components";
+import { QuestionId } from "./types";
+
+export const OnboardingQuestions = (): JSX.Element => {
+  const onboardingQuestions: QuestionId[] = [
+    "onboarding_b1",
+    "onboarding_b2",
+    "onboarding_b3",
+  ];
+
+  return (
+    <div className="flex flex-row flex-1 gap-4 mb-4">
+      {onboardingQuestions.map((question) => (
+        <OnboardingQuestion key={question} questionId={question} />
+      ))}
+    </div>
+  );
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/OnboardingQuestion/OnboardingQuestion.tsx

@@ -0,0 +1,31 @@
+import { Fragment } from "react";
+
+import { useOnboarding } from "@/lib/hooks/useOnboarding";
+
+import { useOnboardingQuestion } from "./hooks/useOnboardingQuestion";
+
+import { QuestionId } from "../../types";
+
+type OnboardingQuestionsProps = {
+  questionId: QuestionId;
+};
+
+export const OnboardingQuestion = ({
+  questionId,
+}: OnboardingQuestionsProps): JSX.Element => {
+  const { onboarding } = useOnboarding();
+  const { handleSuggestionClick, question } = useOnboardingQuestion(questionId);
+
+  if (!onboarding[questionId]) {
+    return <Fragment />;
+  }
+
+  return (
+    <div
+      onClick={() => void handleSuggestionClick()}
+      className="cursor-pointer shadow-md dark:shadow-primary/25 hover:shadow-xl transition-shadow bg-onboarding-yellow-bg px-3 py-1 rounded-xl border-black/10 dark:border-white/25 dark:text-black"
+    >
+      {question}
+    </div>
+  );
+};

frontend/app/chat/[chatId]/components/ActionsBar/components/ChatInput/components/OnboardingQuestions/components/OnboardingQuestion/hooks/useOnboardingQuestion.ts

@@ -0,0 +1,94 @@
+import { UUID } from "crypto";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { ChatMessage } from "@/app/chat/[chatId]/types";
+import { useChatApi } from "@/lib/api/chat/useChatApi";
+import { useChatContext } from "@/lib/context";
+import { getChatNameFromQuestion } from "@/lib/helpers/getChatNameFromQuestion";
+import { useOnboarding } from "@/lib/hooks/useOnboarding";
+import { useOnboardingTracker } from "@/lib/hooks/useOnboardingTracker";
+import { useStreamText } from "@/lib/hooks/useStreamText";
+
+import { QuestionId } from "../../../types";
+import { questionIdToTradPath } from "../utils";
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useOnboardingQuestion = (questionId: QuestionId) => {
+  const router = useRouter();
+  const params = useParams();
+  const { updateOnboarding } = useOnboarding();
+  const { t } = useTranslation("chat");
+  const { createChat } = useChatApi();
+  const { trackOnboardingEvent } = useOnboardingTracker();
+  const [isAnswerRequested, setIsAnswerRequested] = useState(false);
+
+  const [chatId, setChatId] = useState(params?.chatId as UUID | undefined);
+
+  const onboardingStep = questionIdToTradPath[questionId];
+  const question = t(`onboarding.${onboardingStep}`, {});
+  const answer = t(`onboarding.answer.${onboardingStep}`);
+  const { updateStreamingHistory } = useChatContext();
+  const { addQuestionAndAnswer } = useChatApi();
+  const { lastStream, isDone } = useStreamText({
+    text: answer,
+    enabled: isAnswerRequested && chatId !== undefined,
+  });
+
+  const addQuestionAndAnswerToChat = async () => {
+    if (chatId === undefined) {
+      return;
+    }
+
+    await addQuestionAndAnswer(chatId, {
+      question: question,
+      answer: answer,
+    });
+    const shouldUpdateUrl = chatId !== params?.chatId;
+    if (shouldUpdateUrl) {
+      router.replace(`/chat/${chatId}`);
+    }
+  };
+
+  useEffect(() => {
+    if (!isDone) {
+      return;
+    }
+    void addQuestionAndAnswerToChat();
+  }, [isDone]);
+
+  useEffect(() => {
+    if (chatId === undefined) {
+      return;
+    }
+
+    if (isAnswerRequested) {
+      const chatMessage: ChatMessage = {
+        chat_id: chatId,
+        message_id: questionId,
+        user_message: question,
+        assistant: lastStream,
+        message_time: Date.now().toLocaleString(),
+        brain_name: "Quivr",
+      };
+      void updateStreamingHistory(chatMessage);
+    }
+  }, [isAnswerRequested, question, questionId, lastStream]);
+
+  const handleSuggestionClick = async () => {
+    if (chatId === undefined) {
+      const newChat = await createChat(getChatNameFromQuestion(question));
+      setChatId(newChat.chat_id);
+    }
+    trackOnboardingEvent(onboardingStep);
+    setIsAnswerRequested(true);
+
+    await updateOnboarding({ [questionId]: false });
+  };
+
+  return {
+    handleSuggestionClick,
+    question,
+  };
+};

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

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

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

@@ -0,0 +1,15 @@
+import { Translations } from "@/lib/config/LocaleConfig/resources";
+
+import { QuestionId } from "../../types";
+
+export const questionIdToTradPath: Record<
+  QuestionId,
+  keyof Pick<
+    Translations["chat"]["onboarding"],
+    "how_to_use_quivr" | "what_is_brain" | "what_is_quivr"
+  >
+> = {
+  onboarding_b1: "how_to_use_quivr",
+  onboarding_b2: "what_is_quivr",
+  onboarding_b3: "what_is_brain",
+};

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

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

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/OnboardingQuestions/types.ts

@@ -0,0 +1,3 @@
+import { Onboarding } from "@/lib/types/Onboarding";
+
+export type QuestionId = keyof Omit<Onboarding, "onboarding_a">;

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

@@ -5,6 +5,7 @@ import Icon from "@/lib/components/ui/Icon/Icon";
 import { LoaderIcon } from "@/lib/components/ui/LoaderIcon/LoaderIcon";
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 
+import { OnboardingQuestions } from "./components";
 import { ChatEditor } from "./components/ChatEditor/ChatEditor";
 import { useChatInput } from "./hooks/useChatInput";
 import styles from "./index.module.scss";
@@ -22,6 +23,8 @@ export const ChatInput = (): JSX.Element => {
 
   return (
     <>
+      <OnboardingQuestions />
+
       <form
         data-testid="chat-input-form"
         onSubmit={(e) => {