mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-09-20 10:58:10 +03:00
Revert "fix(frontend): remove onboarding questions" (#2181)
Reverts QuivrHQ/quivr#2176
This commit is contained in:
parent
cf61ce8132
commit
8a9f3d809c
@ -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>
|
||||
);
|
||||
};
|
@ -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>
|
||||
);
|
||||
};
|
@ -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,
|
||||
};
|
||||
};
|
@ -0,0 +1 @@
|
||||
export * from "./OnboardingQuestion";
|
@ -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",
|
||||
};
|
@ -0,0 +1 @@
|
||||
export * from "./OnboardingQuestion";
|
@ -0,0 +1 @@
|
||||
export * from "./OnboardingQuestions";
|
@ -0,0 +1,3 @@
|
||||
import { Onboarding } from "@/lib/types/Onboarding";
|
||||
|
||||
export type QuestionId = keyof Omit<Onboarding, "onboarding_a">;
|
@ -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) => {
|
||||
|
Loading…
Reference in New Issue
Block a user