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;