disable input while streaming

recursionbane · Nov 13, 2023 · 2f08172 · 2f08172
1 parent 5503d79
commit 2f08172
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/frontend/components/ChatComponent.tsx b/frontend/components/ChatComponent.tsx
@@ -10,6 +10,7 @@ interface ChatComponentProps {
   onUserMessageSubmit: Message[];
   isFetching: boolean;
   setHandleGenerateStreamMessageRef: (ref: React.MutableRefObject<Function | null>) => void;
+  setIsFetching: (isFetching: boolean) => void;
   apiHost: string;
 }
 
@@ -26,6 +27,7 @@ export function ChatComponent({
   isFetching,
   setHandleGenerateStreamMessageRef,
   apiHost,
+  setIsFetching,
 }: ChatComponentProps) {
   const [messageHistory, setMessageHistory] = useState<Message[]>([]);
   const lastMessageRef = useRef<null | HTMLDivElement>(null);
@@ -90,6 +92,7 @@ export function ChatComponent({
       setPreviewMessage(prev => prev + newMessageContent);
 
       if (data.finish_reason === "stop") {
+        setIsFetching(false);
         const full_text = data.full_text
         if (data.cached) {
           const distance = data.distance

diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -179,7 +179,6 @@ export default function Home() {
         if (queryData.context != "") {
           if (streamable) {
             handleGenerateStreamMessage(sendInput, queryData.context)
-            setIsFetching(false)
           } else {
             handleGenerateMessage(sendInput, queryData.context)
           }
@@ -412,6 +411,7 @@ export default function Home() {
               isFetching={isFetching}
               apiHost={getApiHostNoHttp()}
               setHandleGenerateStreamMessageRef={setHandleGenerateStreamMessage}
+              setIsFetching={setIsFetching}
             />
 
             {/* Input area */}
@@ -423,6 +423,7 @@ export default function Home() {
                 type="text"
                 value={userInput}
                 onChange={handleInputChange}
+                disabled={isFetching}
                 placeholder="What is a vector database?"
                 className="w-full p-2 rounded-md bg-white text-gray-900 placeholder-gray-400"
               />