fix: 修复打字机吞吐异常

src/views/AI-new/components/chat-new.vue

@@ -92,6 +92,7 @@ export default {
   },
   data() {
     return {
+      requestIndex: 1,
       requestSingle: undefined,
       // 管控单次请求，当 abort 之后， while 后面的会进行重复请求
       single: false,
@@ -104,6 +105,8 @@ export default {
       isVoiceMode: false,
       answerMap: '',
       currentMessage: null,
+      // 随后生成的消息
+      genMessage: null,
       messageInfo: {
         is_complete: false.toString(),
         information: '',
@@ -163,19 +166,6 @@ export default {
         console.error(err)
       }
     },
-    // hasTreasureBox() {
-    //   chatProduct({ query: this.newMessage })
-    //     .then((res) => {
-    //       if (res) {
-    //         this.messageStatus = 'stop'
-    //         this.messages.push({ type: 'box', text: this.newMessage, detail: res.content })
-    //         this.newMessage = ''
-    //       }
-    //     })
-    //     .catch(() => {
-    //       this.messageStatus = 'stop'
-    //     })
-    // },
     stopRecording() {
       if (this.mediaRecorder && this.isRecording) {
         this.mediaRecorder.stop()
@@ -230,7 +220,6 @@ export default {
         message: JSON.stringify(this.messageInfo),
         user: "gwcs-test",
         inputs: {},
-        // action: this.action
       }
       this.currentMessage = {
         ...this.messageInfo,
@@ -242,10 +231,9 @@ export default {
         isLike: false,
         isDisLike: false,
       }
-
       if (this.single) {
-        this.$set(this.messages, this.messages.length - 1, this.currentMessage)
-
+        // this.$set(this.messages, this.messages.length - 1, { ...this.currentMessage })
+        this.$set(this.messages, this.messages.length, this.genMessage = { ...this.currentMessage })
       } else {
         this.messages.push(this.currentMessage)
       }
@@ -255,9 +243,6 @@ export default {
           params[k] = this.chatData[k]
         }
       }
-      // if (this.$route.query.compareId) {
-      //   params.compareResult = JSON.parse(sessionStorage.getItem('results'))
-      // }
       this.newMessage = ''
       fetch(gwcsChat(), {
         method: 'POST',
@@ -267,7 +252,7 @@ export default {
         timeout: 60000,
       })
         .then(async (res) => {
-          await this.processStreamResponse(res)
+          await this.processStreamResponse(res, this.requestIndex)
           this.single = false
         })
         .catch((err) => {
@@ -275,7 +260,7 @@ export default {
           this.$emit('update:messageStatus', 'stop')
         })
     },
-    async processStreamResponse(response) {
+    async processStreamResponse(response, requestIndex) {
       if (!response.ok) throw new Error(`HTTP错误: ${response.status}`)
       if (!response.body) {
         console.error('响应体不存在:', response)
@@ -284,8 +269,6 @@ export default {
       const reader = response.body.getReader()
       let buffer = ''
       while (true) {
-        // if (this.single) break
-
         try {
           const { done, value } = await reader.read()
           if (done) break
@@ -293,7 +276,7 @@ export default {
           const lines = buffer.split('\n')
           lines.slice(0, -1).forEach((line) => {
             const parsed = this.parseStreamLine(line)
-            if (parsed) this.updateMessageContent(parsed)
+            if (parsed) this.updateMessageContent(parsed, requestIndex)
           })
           buffer = lines[lines.length - 1] || ''
         } catch (error) {
@@ -324,6 +307,7 @@ export default {
             this.requestSingle.abort()
             this.single = true
             this.axiosGetAiChat()
+            this.requestIndex++
             // this.typingQueue = []
             return null
           }
@@ -356,29 +340,25 @@ export default {
 
       return data
     },
-    updateMessageContent(parse) {
+    updateMessageContent(parse, requestIndex) {
       let { event, answer, isThink, message_id } = parse
       this.currentMessageID = message_id
-      // 会导致发送按钮提前高亮展示
-      // if (event === 'message_end') {
-      //   this.$emit('update:messageStatus', 'stop')
-      // }
       if (!this.currentMessage || !answer) return
       if (event !== 'message') return
-      // console.log(parse);
+
       const mode = isThink ? 'think' : 'text'
       const chars = {
         answer: answer,
         isThink: isThink,
         message_id
       }
-      // debugger
+
       this.typingQueue.push(chars)
       if (!this.isTyping) {
-        this.startTypingAnimation(mode)
+        this.startTypingAnimation(mode, requestIndex)
       }
     },
-    startTypingAnimation() {
+    startTypingAnimation(mode, requestIndex) {
       this.isTyping = true
       const typeNextChar = () => {
         if (this.typingQueue.length === 0) {
@@ -406,7 +386,17 @@ export default {
             return
           }
           const char = chars.shift() || ''
-          this.$set(this.currentMessage, isThink ? 'think' : 'text', this.currentMessage[isThink ? 'think' : 'text'] + char)
+          // this.$set(this.currentMessage, isThink ? 'think' : 'text', this.currentMessage[isThink ? 'think' : 'text'] + char)
+          if (requestIndex === 2) {
+            console.log('requestIndex === 2', char);
+
+            this.$set(this.genMessage, 'text', this.genMessage.text + char)
+            // this.messages.splice(this.messages.length - 1, 1, this.genMessage)
+          } if (requestIndex === 1) {
+            console.log('requestIndex === 1', char);
+
+            this.$set(this.currentMessage, 'text', this.currentMessage.text + char)
+          }
           const delay = this.getTypingDelay(char)
           setTimeout(outputChar, delay)
         }

src/views/AI-new/components/js/chat.js

@@ -0,0 +1,3 @@
+function generateMessageInfo() {
+  
+}

src/views/AI-new/components/message.vue

@@ -20,7 +20,8 @@
           <p v-html="md.render(message.think)" v-if="message.think && message.showThink" class="thinkText" />
         </span>
         <div style="width: 100%">
-          <!-- {{ (message) }} -->
+          {{ (message) }}
+          <!-- {{ filterVisible(message) }} -->
           <!-- <hr> -->
           <p v-html="render(message)" class="render-container"></p>
           <span class="speakLoadingToast pv10" v-if="!filterVisible(message)">