byt-lingxiao-ai 0.2.3 → 0.2.5

package/components/ChatWindow.vue

@@ -12,8 +12,8 @@
     </audio>
     <div v-if="robotStatus !== 'leaving'" :class="['chat-robot', robotStatus]" ></div>
     <div v-else class="chat-ai" @click="toggleWindow">
-      <div class="chat-ai-avater"></div>
-      <div class="chat-ai-text">凌霄AI</div>
+      <div :class="['chat-ai-avater', avaterStatus]"></div>
+      <div class="chat-ai-text">{{ avaterText }}</div>
     </div>
     <!-- 添加一个遮罩层，用于捕获点击外部事件 -->
     <div class="chat-overlay" v-show="visible" @click="handleOverlayClick">
@@ -58,7 +58,13 @@
               <div class="user-message">{{ message.content }}</div>
             </div>
             <div class="chat-window-message-ai" v-else>
-              <div class="ai-message">{{ message.content }}</div>
+              <div class="ai-render">
+                <div class="ai-thinking">
+                  <div class="ai-thinking-time">思考用时{{ message.time }}秒</div>
+                  <div class="ai-thinking-content">{{ message.thinking }}</div>
+                </div>
+                <div class="ai-content">{{ message.content }}</div>
+              </div>
             </div>
           </div>
         </div>
@@ -140,22 +146,15 @@ export default {
           type: 'ai',
           sender: 'AI',
           time: '',
-          content: '欢迎来到凌霄大模型AI对话。',
-        },
-        {
-          id: 3,
-          type: 'ai',
-          sender: 'AI',
-          time: '',
-          content: '请输入您的问题。',
-        },
-        {
-          id: 4,
-          type: 'user',
-          sender: '用户',
-          time: '',
-          content: '你好，欢迎来到凌霄大模型AI对话。',
-        },
+          thinking: '嗯，用户问的是回转窑的工业应用。首先，我需要回忆一下之前对话的内容。用户之前让我解释了水泥的制作流程，特别是提到了回转窑在高温煅烧熟料中的作用。',
+          charts: [
+            {
+              title: '',
+              options: {}
+            }
+          ],
+          content: '回转窑（Rotary Kiln）是一种长筒形旋转煅烧设备（类似倾斜安装的大管子），因其独特的旋转运动和高温耐火衬里设计，在多个工业领域都有广泛应用',
+        }
       ], // 消息列表
       isRecording: false, // 正在录制
       isMicAvailable: false, // 麦克风是否可用
@@ -168,9 +167,24 @@ export default {
       microphone: null, // 麦克风输入节点
       processor: null, // 音频处理节点
       robotStatus: 'leaving', // 机器人状态 waiting, speaking, leaving, entering
+      avaterStatus: 'normal', // 头像状态 normal output thinking
+      buffer: '', // 音频缓冲区
+      currentMessage: null, // 当前消息
+      inTag: false, // 是否在标签页
+      tagBuilder: '', // 标签构建器
       audioBuffer: new Float32Array(0) // 音频缓冲区
     }
   },
+  computed: {
+    avaterText() {
+      const textMap = {
+        'normal': '凌霄AI',
+        'thinking': '思考中',
+        'output': '语音中'
+      }
+      return textMap[this.avaterStatus]
+    }
+  },
   mounted() {
     this.initWebSocket()
 
@@ -277,8 +291,10 @@ export default {
             } else if (data.code === 0) {
               if (data.data.type === 'detection') {
                 console.log('检测到唤醒词...');
+                this.avaterStatus = 'normal'
               } else if (data.data.type === 'Collecting') {
                 console.log('状态: 采集中...');
+                this.avaterStatus = 'thinking'
               } else if (data.data.type === 'command') {
                 // 根据指令改变机器人的状态
                 console.log('状态: 处理中...')
@@ -316,6 +332,32 @@ export default {
         this.ws.close()
       }
     },
+    createAiMessage() {
+      const message = {
+        id: this.messages.length + 1,
+        type: 'ai',
+        sender: 'AI',
+        time: '',
+        thinking: '',
+        charts: [],
+        content: '',
+      }
+      this.messages.push(message)
+      this.currentMessage = message
+      return message
+    },
+    createUserMessage(content) {
+      const message = {
+        id: this.messages.length + 1,
+        type: 'user',
+        sender: '用户',
+        time: '',
+        content,
+      }
+      this.messages.push(message)
+      this.inputMessage = ''
+      return message
+    },
     async initAudio() {
       if (this.isRecording) return;
       try {
@@ -356,21 +398,20 @@ export default {
         return
       }
       const message = this.inputMessage.trim();
+      // 初始化信息
+      this.initState()
       // 发送消息
-      this.messages.push({
-        id: this.messages.length + 1,
-        type: 'user',
-        sender: '用户',
-        time: new Date().toLocaleTimeString(),
-        content: this.inputMessage,
-      })
-      this.inputMessage = ''
-      
+      this.createUserMessage(message)
+      // 创建AI消息
+      this.createAiMessage()
+
       try {
-        const token = `Bearer 24ab99b4-4b59-42a0-84df-1d73a96e70cd`
+        const controller = new AbortController();
+        const token = `Bearer e298f087-85bc-48c2-afb9-7c69ffc911aa`
         const response = await fetch('/bytserver/api-model/chat/stream', {
           timeout: 30000,
           method: 'POST',
+          signal: controller.signal,
           headers: {
             'Content-Type': 'application/json' ,
             'Authorization': token,
@@ -381,13 +422,21 @@ export default {
           throw new Error(`${response.status}`);
         }
 
-        console.log('响应状态:', response.status);
-        // 解析响应流
-        this.parseResponseStream(response.body)
+        const render = response.body.getReader()
+         const decoder = new TextDecoder()
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          const { done, value } = await render.read()
+          if (done) break
+          const chunk = decoder.decode(value, { stream: true })
+          this.processStreamChunk(chunk)
+        }
       } catch (error) {
         console.error('发送消息失败:', error)
       }
     },
+    initState() {},
     // 分析音频命令
     analyzeAudioCommand(command) {
       console.log('分析音频命令:', command)
@@ -415,9 +464,97 @@ export default {
         this.stop()
       }
     },
-    // 解析响应流
-    parseResponseStream(body) {
-      console.log(body)
+    processStreamChunk(chunk) {
+      console.log('原始数据:', chunk)
+      try {
+        this.buffer += chunk;
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+          const eventEnd = this.buffer.indexOf('\n\n');
+          if (eventEnd === -1) break;
+
+          const eventData = this.buffer.slice(0, eventEnd);
+          this.buffer = this.buffer.slice(eventEnd + 2);
+          console.log('解析数据:', eventData)
+          this.processEventData(eventData);
+        }
+      } catch (error) {
+        console.error('流数据处理异常:', error);
+        this.streaming = false;
+        this.response = this.$t('3d.chat.dataFormatError');
+        this.$forceUpdate();
+      }
+    },
+    processEventData(data) {
+      data.split('\n').forEach(line => {
+        console.log('原始数据:', line)
+        if (!line.startsWith('data:')) return;
+
+        const jsonStr = line.replace(/^data:\s*/, '').trim();
+        if (jsonStr === '[DONE]') return;
+
+        try {
+          const data = this.safeJsonParse(jsonStr);
+          this.processContentDelta(data.choices[0].delta);
+        } catch (e) {
+          console.warn('JSON解析跳过:', e.message);
+        }
+      });
+    },
+    safeJsonParse(jsonStr) {
+      try {
+        return JSON.parse(jsonStr);
+      } catch (error) {
+        console.warn('JSON parse failed:', jsonStr);
+        return null;
+      }
+    },
+    processContentDelta(delta) {
+      const content = delta.content || '';
+      if (!content || !this.currentMessage) return;
+
+      for (let i = 0; i < content.length; i++) {
+        const char = content[i];
+
+        // 处理正在拼接的标签
+        if (this.inTag) {
+          this.tagBuilder += char;
+
+          if (char === '>') {
+            const tag = this.tagBuilder;
+
+            if (tag === '<think>') {
+              this.avaterStatus = 'thinking'
+            } else if (tag === '</think>') {
+              this.avaterStatus = 'output'
+            } else {
+              console.log('无效标签:', tag)
+            }
+
+            // 重置
+            this.inTag = false;
+            this.tagBuilder = '';
+          }
+          continue;
+        }
+
+        // 检测是否是标签开始
+        if (char === '<') {
+          this.inTag = true;
+          this.tagBuilder = '<';
+          continue;
+        }
+
+        // 正常字符处理
+        if (this.avaterStatus === 'thinking') {
+          this.currentMessage.thinking += char;
+        } else {
+          this.currentMessage.content += char;
+        }
+      }
+
+      this.$forceUpdate();
     },
     processAudio(event) {
       if (!this.isRecording) return;
@@ -600,8 +737,16 @@ export default {
   align-items: center;
   background-size: cover;
   background-position: center;
+}
+.chat-ai-avater.normal {
   background-image: url('./assets/normal.png');
 }
+.chat-ai-avater.thinking {
+  background-image: url('./assets/thinking.png');
+}
+.chat-ai-avater.output {
+  background-image: url('./assets/output.png');
+}
 .chat-ai-text {
   color: #fff;
   font-family: 'PingFang SC';
@@ -639,9 +784,7 @@ export default {
   display: flex;
   gap: 12px;
   align-items: flex-start;
-}
-.ai-message {
-  max-width: 80%;
+  max-width: 100%;
   border-radius: 12px;
   background: #f6f8fc;
   padding: 8px 12px;
@@ -680,6 +823,19 @@ export default {
   color: #29414e;
   font-size: 18px;
   font-weight: 900;
+  position: relative;
+  padding-left:36px;
+}
+.chat-window-header-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  background-image: url('./assets/logo.png');
+  background-size: cover;
 }
 .chat-window-header-close {
   width: 24px;
@@ -715,4 +871,52 @@ export default {
   justify-content: center;
   cursor: pointer;
 }
+.ai-thinking-time {
+  border-radius: 9px;
+  background: #ECEDF4;
+  color: #86909C;
+  font-family: "Alibaba PuHuiTi 2.0";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  padding: 0 26px 0 26px;
+  height: 28px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
+}
+.ai-thinking-time::before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background: url('./assets/think.png') no-repeat;
+  background-size: cover;
+}
+.ai-thinking-time::after {
+  content: '';
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background: url('./assets/arrow.png') no-repeat;
+  background-size: cover;
+}
+.ai-thinking-content {
+  color: #86909C;
+  font-family: "Alibaba PuHuiTi 2.0";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  padding: 8px 0 8px 12px;
+}
 </style>