feat: add shouldStream guard on useStreamText

QuivrHQ · Oct 4, 2023 · f01a9de · f01a9de
1 parent b5a3554
commit f01a9de
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/...nents/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step1.tsx b/...nents/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step1.tsx
@@ -11,13 +11,17 @@ import { checkIfShouldDisplayStep } from "../helpers/checkIfShouldDisplayStep";
 import { useStreamText } from "../hooks/useStreamText";
 import { stepsContainerStyle } from "../styles";
 
+const stepId = "DOWNLOAD";
+
 export const Step1 = (): JSX.Element => {
   const { currentStep, setCurrentStep } = useOnboardingContext();
   const shouldStepBeDisplayed = checkIfShouldDisplayStep({
     currentStep,
-    step: "DOWNLOAD",
+    step: stepId,
   });
 
+  const shouldStreamMessage = currentStep === stepId;
+
   const { t } = useTranslation(["chat"]);
   const firstMessage = t("onboarding.download_message_1");
   const secondMessageStream = t("onboarding.download_message_2");
@@ -26,11 +30,13 @@ export const Step1 = (): JSX.Element => {
     useStreamText({
       text: firstMessage,
       enabled: shouldStepBeDisplayed,
+      shouldStream: shouldStreamMessage,
     });
   const { streamingText: firstMessageStrem, isDone: isStep1Done } =
     useStreamText({
       text: secondMessageStream,
       enabled: isAssistantDone && shouldStepBeDisplayed,
+      shouldStream: shouldStreamMessage,
     });
 
   if (!shouldStepBeDisplayed) {

diff --git a/...nents/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step2.tsx b/...nents/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step2.tsx
@@ -8,26 +8,32 @@ import { checkIfShouldDisplayStep } from "../helpers/checkIfShouldDisplayStep";
 import { useStreamText } from "../hooks/useStreamText";
 import { stepsContainerStyle } from "../styles";
 
+const stepId = "UPLOAD";
+
 export const Step2 = (): JSX.Element => {
   const { currentStep } = useOnboardingContext();
   const shouldStepBeDisplayed = checkIfShouldDisplayStep({
     currentStep,
-    step: "UPLOAD",
+    step: stepId,
   });
 
   const { t } = useTranslation(["chat"]);
   const firstMessage = t("onboarding.upload_message_1");
   const secondMessageStream = t("onboarding.upload_message_2");
 
+  const shouldStreamMessage = currentStep === stepId;
+
   const { streamingText: streamingAssistantMessage, isDone: isAssistantDone } =
     useStreamText({
       text: firstMessage,
       enabled: shouldStepBeDisplayed,
+      shouldStream: shouldStreamMessage,
     });
 
   const { streamingText: firstMessageStream } = useStreamText({
     text: secondMessageStream,
     enabled: isAssistantDone && shouldStepBeDisplayed,
+    shouldStream: shouldStreamMessage,
   });
 
   if (!shouldStepBeDisplayed) {

diff --git a/...nents/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step3.tsx b/...nents/ChatDialogueArea/components/ChatDialogue/components/Onboarding/components/Step3.tsx
@@ -8,26 +8,31 @@ import { checkIfShouldDisplayStep } from "../helpers/checkIfShouldDisplayStep";
 import { useStreamText } from "../hooks/useStreamText";
 import { stepsContainerStyle } from "../styles";
 
+const stepId = "UPLOADED";
+
 export const Step3 = (): JSX.Element => {
   const { currentStep } = useOnboardingContext();
   const shouldStepBeDisplayed = checkIfShouldDisplayStep({
     currentStep,
-    step: "UPLOADED",
+    step: stepId,
   });
 
   const { t } = useTranslation(["chat"]);
   const firstMessage = t("onboarding.last_step");
   const secondMessageStream = t("onboarding.ask_question_to_file");
+  const shouldStreamMessage = currentStep === stepId;
 
   const { streamingText: streamingAssistantMessage, isDone: isAssistantDone } =
     useStreamText({
       text: firstMessage,
       enabled: shouldStepBeDisplayed,
+      shouldStream: shouldStreamMessage,
     });
 
   const { streamingText: firstMessageStream } = useStreamText({
     text: secondMessageStream,
     enabled: isAssistantDone && shouldStepBeDisplayed,
+    shouldStream: shouldStreamMessage,
   });
 
   if (!shouldStepBeDisplayed) {

diff --git a/...nts/ChatDialogueArea/components/ChatDialogue/components/Onboarding/hooks/useStreamText.ts b/...nts/ChatDialogueArea/components/ChatDialogue/components/Onboarding/hooks/useStreamText.ts
@@ -3,15 +3,27 @@ import { useEffect, useState } from "react";
 type UseStreamTextProps = {
   text: string;
   enabled?: boolean;
+  shouldStream?: boolean;
 };
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useStreamText = ({ text, enabled = true }: UseStreamTextProps) => {
+export const useStreamText = ({
+  text,
+  enabled = true,
+  shouldStream = true,
+}: UseStreamTextProps) => {
   const [streamingText, setStreamingText] = useState<string>("");
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const isDone = currentIndex === text.length;
 
   useEffect(() => {
+    if (!shouldStream) {
+      setStreamingText(text);
+      setCurrentIndex(text.length);
+
+      return;
+    }
+
     if (!enabled) {
       setStreamingText("");