feat: 优化打字机效果和消息展示

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

@@ -108,6 +108,7 @@ export default {
         is_complete: false.toString(),
         information: '',
       },
+      currentMessageID: "",
       // 打字机相关
       typingText: '',
       typingQueue: [],
@@ -115,7 +116,6 @@ export default {
       isTyping: false,
       typingSpeed: 30,
       typingTimeout: null,
-      conversationId: ''
     }
   },
   watch: {
@@ -138,6 +138,8 @@ export default {
       // this.$emit('update:messages', [])
       this.$emit('update:conversationId', '')
       this.$emit('update:productName', '')
+      this.$emit('update:messageStatus', 'stop')
+      this.typingQueue = []
     },
     async startRecording() {
       if (this.messageStatus === 'send') return
@@ -220,7 +222,7 @@ export default {
 
       // 重置 answerMap
       this.answerMap = ''
-      this.typingQueue = []
+      // this.typingQueue = []
       this.currentMessage = JSON.parse(JSON.stringify(this.messageInfo))
       let params = {
         appType: "gwcsHelper",
@@ -242,8 +244,8 @@ export default {
       }
 
       if (this.single) {
-        this.messages.length -= 1
-        this.messages.push(this.currentMessage)
+        this.$set(this.messages, this.messages.length - 1, this.currentMessage)
+
       } else {
         this.messages.push(this.currentMessage)
       }
@@ -306,28 +308,24 @@ export default {
         if (!cleanLine) return null
         const data = JSON.parse(cleanLine)
         // debugger/
-        this.conversationId = data.conversation_id
-        // console.log(data)
-        // console.log(data)
+        // this.conversationId = data.conversation_id
+        this.$emit('update:conversationId', data.conversation_id)
         if (data.answer) {
           this.answerMap += data.answer
 
           const is_complete = /<is_complete>([^<]*)(?:<\/is_complete>)?/.exec(this.answerMap)
           const information = /<information>([^<]*)(?:<\/information>)?/.exec(this.answerMap)
           const text = /<text>([^<]*)(?:<\/text>)?/.exec(this.answerMap)
+          // console.log(this.answerMap);
 
           this.messageInfo.information = information ? information[1].trim() : this.newMessage
           this.messageInfo.is_complete = is_complete ? is_complete[1].trim() : 'false'
           if (is_complete && is_complete[1] === 'true' && text && text[1].trim() === '') {
-
             this.requestSingle.abort()
-            // setTimeout(() => {
-            // debugger
-            // this.$emit('update:messageStatus', 'send')
             this.single = true
-            // debugger
             this.axiosGetAiChat()
-            // }, 1000)
+            // this.typingQueue = []
+            return null
           }
         }
 
@@ -359,7 +357,8 @@ export default {
       return data
     },
     updateMessageContent(parse) {
-      let { event, answer, isThink } = parse
+      let { event, answer, isThink, message_id } = parse
+      this.currentMessageID = message_id
       // 会导致发送按钮提前高亮展示
       // if (event === 'message_end') {
       //   this.$emit('update:messageStatus', 'stop')
@@ -371,6 +370,7 @@ export default {
       const chars = {
         answer: answer,
         isThink: isThink,
+        message_id
       }
       // debugger
       this.typingQueue.push(chars)
@@ -388,6 +388,11 @@ export default {
 
         // 取出一个完整文本块
         const chunk = this.typingQueue.shift()
+        if (chunk.message_id !== this.currentMessageID) {
+          console.log('message_id !== this.currentMessageID');
+          typeNextChar()
+          return
+        }
         // console.log(this.messages);
 
         const chars = Array.from(chunk.answer)