bugfix: fixed follow up questions breaking the component

devflowinc · Jan 2, 2025 · dfe8c77 · dfe8c77
1 parent 7fbe8f6
commit dfe8c77
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 38 deletions.
diff --git a/clients/search-component/package.json b/clients/search-component/package.json
@@ -19,7 +19,7 @@
       "import": "./dist/vanilla/index.js"
     }
   },
-  "version": "0.2.64",
+  "version": "0.2.65",
   "license": "MIT",
   "homepage": "https://github.com/devflowinc/trieve/tree/main/clients/search-component",
   "scripts": {

diff --git a/clients/search-component/src/TrieveModal/Chat/FollowupQueries.tsx b/clients/search-component/src/TrieveModal/Chat/FollowupQueries.tsx
@@ -3,7 +3,7 @@ import { useChatState } from "../../utils/hooks/chat-context";
 import { useFollowupQuestions } from "../../utils/hooks/useFollowupQuestions";
 
 export const FollowupQueries = () => {
-  const { isDoneReading, askQuestion, setCurrentQuestion } = useChatState();
+  const { isDoneReading, askQuestion } = useChatState();
 
   const {
     suggestedQuestions,
@@ -19,7 +19,6 @@ export const FollowupQueries = () => {
               {suggestedQuestions.map((q) => (
                 <button
                   onClick={() => {
-                    setCurrentQuestion(q);
                     askQuestion(q);
                   }}
                   key={q}

diff --git a/clients/search-component/src/utils/hooks/chat-context.tsx b/clients/search-component/src/utils/hooks/chat-context.tsx
@@ -6,6 +6,7 @@ import { useEffect } from "react";
 import { cached } from "../cache";
 import { getAllChunksForGroup } from "../trieve";
 import { ChatMessageProxy, ChunkGroup, RoleProxy } from "trieve-ts-sdk";
+import { useFollowupQuestions } from "./useFollowupQuestions";
 
 type Messages = {
   queryId: string | null;
@@ -76,45 +77,55 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
   const [offset, setOffset] = useState(0);
   const [queryId, setQueryId] = useState<string | null>(null);
   const [characterOffsetInterval, setCharacterOffsetInterval] = useState<NodeJS.Timeout | null>()
+  const { isLoadingSuggestedQueries } = useFollowupQuestions();
+  const streamingChunks = useRef(false);
 
   useEffect(() => {
-    text.slice(0, offset);
     if (messages.length > 1) {
-      setMessages((m) => [
-        ...m.slice(0, -1),
-        [
-          {
-            type: "system",
-            text: text.slice(0, offset),
-            additional: json ? json : null,
-            queryId,
-          },
-        ],
-      ]);
+      const currentThread = messages[messages.length - 1];
+      const currentMessage = currentThread[currentThread.length - 1];
+      if (currentMessage.text != text.slice(0, offset) && streamingChunks.current) {
+        setMessages((m) => [
+          ...m.slice(0, -1),
+          [
+            {
+              type: "system",
+              text: text.slice(0, offset),
+              additional: json ? json : null,
+              queryId,
+            },
+          ],
+        ]);
 
-      modalRef.current?.scroll({
-        top: modalRef.current.scrollHeight,
-        behavior: "smooth",
-      });
+        if (modalRef.current) {
+          modalRef.current?.scroll({
+            top: modalRef.current.scrollHeight,
+            behavior: "smooth",
+          });
+        }
 
-      if (isDoneReading && characterOffsetInterval && offset >= text.length) {
+        if (isDoneReading && characterOffsetInterval && offset >= text.length) {
           clearInterval(characterOffsetInterval);
           setCharacterOffsetInterval(null);
+          streamingChunks.current = false;
+        }
+
       }
     }
-  }, [offset, text, isDoneReading]);
+  }, [offset, text, isDoneReading, messages]);
 
   useEffect(() => {
-    if (isDoneReading) {
+    if (isDoneReading || isLoadingSuggestedQueries) {
       setOffset(text.length)
-      setInterval(() => {
+
+      setTimeout(() => {
         modalRef.current?.scroll({
-          top: modalRef.current.scrollHeight,
+          top: modalRef.current.scrollHeight + 200,
           behavior: "smooth",
         });
-      }, 50);
+      }, 55);
     }
-  }, [text, isDoneReading])
+  }, [text, isDoneReading, isLoadingSuggestedQueries])
 
   const createTopic = async ({ question }: { question: string }) => {
     if (!currentTopic) {
@@ -150,6 +161,9 @@ function ChatProvider({ children }: { children: React.ReactNode }) {
     setIsLoading(true);
     setIsDoneReading(false);
     setOffset(0);
+    setText("");
+    setJson(null);
+    streamingChunks.current = true;
     let done = false;
     let textInStream = "";
 

diff --git a/clients/search-component/src/utils/hooks/useFollowupQuestions.ts b/clients/search-component/src/utils/hooks/useFollowupQuestions.ts
@@ -1,25 +1,22 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { SuggestedQueriesResponse } from "trieve-ts-sdk";
 import { getSuggestedQuestions } from "../trieve";
 import { useModalState } from "./modal-context";
 
 export const useFollowupQuestions = () => {
   const { query, trieveSDK } = useModalState();
   const [isLoading, setIsLoading] = useState(false);
-  const isFetching = useRef(false);
   const [suggestedQuestions, setSuggestedQuestions] = useState<
     SuggestedQueriesResponse["queries"]
   >([]);
 
   const getQuestions = async () => {
-    isFetching.current = true;
     setIsLoading(true);
     const queries = await getSuggestedQuestions({
       trieve: trieveSDK,
       query,
     });
     setSuggestedQuestions(queries.queries.splice(0, 3));
-    isFetching.current = false;
     setIsLoading(false);
   };
 
@@ -29,7 +26,6 @@ export const useFollowupQuestions = () => {
 
   useEffect(() => {
     setIsLoading(true);
-    isFetching.current = true;
     const abortController = new AbortController();
 
     const timeoutId = setTimeout(async () => {
@@ -39,7 +35,6 @@ export const useFollowupQuestions = () => {
         query,
       });
       setSuggestedQuestions(queries.queries.splice(0, 3));
-      isFetching.current = false;
       setIsLoading(false);
     });
 

diff --git a/clients/search-component/src/utils/hooks/useSuggestedQuestions.ts b/clients/search-component/src/utils/hooks/useSuggestedQuestions.ts
@@ -1,25 +1,22 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { SuggestedQueriesResponse } from "trieve-ts-sdk";
 import { getSuggestedQuestions } from "../trieve";
 import { useModalState } from "./modal-context";
 
 export const useSuggestedQuestions = () => {
   const { props, query, trieveSDK } = useModalState();
   const [isLoading, setIsLoading] = useState(false);
-  const isFetching = useRef(false);
   const [suggestedQuestions, setSuggestedQuestions] = useState<
     SuggestedQueriesResponse["queries"]
   >([]);
 
   const getQuestions = async () => {
-    isFetching.current = true;
     setIsLoading(true);
     const queries = await getSuggestedQuestions({
       trieve: trieveSDK,
       query,
     });
     setSuggestedQuestions(queries.queries.splice(0, 3));
-    isFetching.current = false;
     setIsLoading(false);
   };
 
@@ -34,7 +31,6 @@ export const useSuggestedQuestions = () => {
     }
 
     setIsLoading(true);
-    isFetching.current = true;
     const abortController = new AbortController();
 
     const timeoutId = setTimeout(async () => {
@@ -44,7 +40,6 @@ export const useSuggestedQuestions = () => {
         query,
       });
       setSuggestedQuestions(queries.queries.splice(0, 3));
-      isFetching.current = false;
       setIsLoading(false);
     });