perf: improve performance

improve performance

web/src/models/chat.ts

@@ -1,4 +1,4 @@
-import { computed, reactive, ref, Ref, shallowReactive, watch } from "vue";
+import { computed, reactive, shallowReactive, watch } from "vue";
 import {
   resendMessage,
   sendMessage,
@@ -306,6 +306,9 @@ export class Chat {
       if (!this.messages[this.messages.length - 1]?.content) {
         this.messages.pop();
       }
+      if (this.messages[this.messages.length - 1]?.content) {
+        (this.messages[this.messages.length - 1] as AssistantMessage).markHistory()
+      }
       this.stopReplyHandler = undefined;
     };
   }

web/src/models/message.ts

@@ -27,23 +27,50 @@ export class UserMessage extends Message {
 }
 
 export class AssistantMessage extends Message {
+  static throttleTime = 200; // 200ms
+
   // waiting for response
   pending = true;
   // response is completed
   done = false;
 
+  timer: NodeJS.Timeout | null = null;
+
+  cachedContent = "";
+  leading = true;
+
   constructor(id: string, content: string) {
     super();
     this.id = id;
     this.content = content;
   }
 
   appendContent(content: string) {
-    this.content += content;
+    if (this.leading) {
+      this.leading = false;
+      this.content = content;
+    } else {
+      this.cacheContent(this, content);
+    }
     return this;
   }
 
+  // use self for vue reactivity
+  cacheContent(self: AssistantMessage, content: string) {
+    self.cachedContent += content;
+
+    if (!this.timer) {
+      this.timer = setInterval(() => {
+        self.content += self.cachedContent
+        self.cachedContent = "";
+      }, AssistantMessage.throttleTime)
+    }
+  }
+
   markHistory() {
+    clearTimeout(this.timer!);
+    this.content += this.cachedContent;
+    this.cachedContent = "";
     this.pending = false;
     this.done = true;
     return this;