From 94392ead18992db415b1d0f3bfc991afcb61759b Mon Sep 17 00:00:00 2001
From: Guolin Ke <guolin.ke@outlook.com>
Date: Sat, 23 Dec 2023 21:38:08 +0800
Subject: [PATCH 1/2] smooth the chat outputs

---
 src/hooks/useSubmit.ts | 40 ++++++++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useSubmit.ts b/src/hooks/useSubmit.ts
index cd6efc5aa..74f2704bf 100644
--- a/src/hooks/useSubmit.ts
+++ b/src/hooks/useSubmit.ts
@@ -100,7 +100,32 @@ const useSubmit = () => {
         );
       }
 
-      if (stream) {
+      let messageQueue = [];
+      let streamProcessingCompleted = false;
+      async function processMessageQueue() {
+          while (!streamProcessingCompleted || messageQueue.length > 0) {
+          if (messageQueue.length > 0) {
+            let messageContent = messageQueue.shift();
+            const messageLen = messageContent.length;
+            let curChars = ''
+            let speed = streamProcessingCompleted ? messageLen: (Math.max(3, Math.round(messageLen / 30)));
+            while (messageContent) {
+              curChars = messageContent.slice(0, speed);
+              const updatedChats = JSON.parse(
+                JSON.stringify(useStore.getState().chats)
+              );
+              const updatedMessages = updatedChats[currentChatIndex].messages;
+              updatedMessages[updatedMessages.length - 1].content += curChars;
+              setChats(updatedChats);
+              messageContent = messageContent.slice(speed);
+              await new Promise(resolve => setTimeout(resolve, 50));
+            }
+          } else {
+            await new Promise(resolve => setTimeout(resolve, 50));
+          }
+        }
+      }
+      async function readStream(stream) {
         if (stream.locked)
           throw new Error(
             'Oops, the stream is locked right now. Please try again'
@@ -127,13 +152,7 @@ const useSubmit = () => {
               }
               return output;
             }, '');
-
-            const updatedChats: ChatInterface[] = JSON.parse(
-              JSON.stringify(useStore.getState().chats)
-            );
-            const updatedMessages = updatedChats[currentChatIndex].messages;
-            updatedMessages[updatedMessages.length - 1].content += resultString;
-            setChats(updatedChats);
+            messageQueue.push(resultString);
           }
         }
         if (useStore.getState().generating) {
@@ -143,6 +162,11 @@ const useSubmit = () => {
         }
         reader.releaseLock();
         stream.cancel();
+        streamProcessingCompleted = true;
+      }
+
+      if (stream) {
+        await Promise.all([readStream(stream), processMessageQueue()]);
       }
 
       // update tokens used in chatting

From d8ddb2f92f2c0bdb0ab69c9d78beb4e0822a654d Mon Sep 17 00:00:00 2001
From: Guolin Ke <guolin.ke@outlook.com>
Date: Sat, 23 Dec 2023 21:50:19 +0800
Subject: [PATCH 2/2] code clean

---
 src/hooks/useSubmit.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/hooks/useSubmit.ts b/src/hooks/useSubmit.ts
index 74f2704bf..cd5bbabe1 100644
--- a/src/hooks/useSubmit.ts
+++ b/src/hooks/useSubmit.ts
@@ -103,12 +103,14 @@ const useSubmit = () => {
       let messageQueue = [];
       let streamProcessingCompleted = false;
       async function processMessageQueue() {
-          while (!streamProcessingCompleted || messageQueue.length > 0) {
+        while (!streamProcessingCompleted || messageQueue.length > 0) {
           if (messageQueue.length > 0) {
             let messageContent = messageQueue.shift();
             const messageLen = messageContent.length;
-            let curChars = ''
-            let speed = streamProcessingCompleted ? messageLen: (Math.max(3, Math.round(messageLen / 30)));
+            let curChars = '';
+            let speed = streamProcessingCompleted
+              ? messageLen
+              : Math.max(3, Math.round(messageLen / 30));
             while (messageContent) {
               curChars = messageContent.slice(0, speed);
               const updatedChats = JSON.parse(
@@ -118,10 +120,10 @@ const useSubmit = () => {
               updatedMessages[updatedMessages.length - 1].content += curChars;
               setChats(updatedChats);
               messageContent = messageContent.slice(speed);
-              await new Promise(resolve => setTimeout(resolve, 50));
+              await new Promise((resolve) => setTimeout(resolve, 50));
             }
           } else {
-            await new Promise(resolve => setTimeout(resolve, 50));
+            await new Promise((resolve) => setTimeout(resolve, 50));
           }
         }
       }