byt-lingxiao-ai 0.3.24 → 0.3.25

package/components/AiMessage.vue

@@ -1,107 +1,93 @@
 <template>
   <div class="chat-window-message-ai">
     <div class="ai-render">
-      <div class="ai-loading" v-if="isLoading">
+      <div v-if="message.loading" class="ai-loading">
         <div class="dot"></div>
         <div class="dot"></div>
         <div class="dot"></div>
       </div>
-      <div class="ai-thinking" @click="$emit('thinking-toggle')" v-if="message.thinking">
-        <div class="ai-thinking-time">{{ message.time ? `思考用时${message.time}秒` : '思考中...' }}</div>
-        <div class="ai-thinking-content" v-if="thinkingExpanded">{{ message.thinking }}</div>
+      <div
+        v-for="item in message.timeline"
+        :key="item.id"
+        class="ai-message-item"
+      >
+        <div
+          v-if="item.type === 'thinking'"
+          class="ai-thinking"
+          @click="$emit('thinking-toggle')"
+        >
+          <div class="ai-thinking-time">
+            {{
+              item.duration
+                ? `思考用时 ${item.duration} 秒`
+                : '思考中...'
+            }}
+          </div>
+          <div
+            class="ai-thinking-content"
+            v-if="thinkingExpanded"
+          >
+            {{ item.content }}
+          </div>
+        </div>
+        <div
+          v-else-if="item.type === 'tool_call'"
+          class="ai-tool-call"
+        >
+          <div class="tool-title">🔧 {{ item.content }}{{ item.name }}</div>
+        </div>
+        <div
+          v-else-if="item.type === 'tool_result'"
+          class="ai-tool-result"
+        >
+          <div class="tool-title">📦 {{ item.content }}</div>
+        </div>
+        <div
+          v-else-if="item.type === 'content'"
+          class="ai-content markdown-body"
+          v-html="renderMarkdown(item.content)"
+        ></div>
       </div>
-      <div class="ai-content markdown-body" @click="handleLinkClick" v-html="renderedContent"></div>
     </div>
   </div>
 </template>
 
 <script>
-import { marked } from 'marked';
-import hljs from 'highlight.js';
-import 'highlight.js/styles/github.css';
-
-// 创建自定义渲染器
-const renderer = new marked.Renderer()
-
-// 自定义链接渲染
-renderer.link = function ({ href, text }) {
-  let dataPath = ''
-  const url = new URL(href, window.location.origin)
-  const pathname = url.pathname
-
-  if (pathname.startsWith('/portal/')) {
-    dataPath = pathname.substring('/portal'.length)
-    return `<a href="javascript:void(0)" data-path="${dataPath}" data-text="${text}">${text}</a>`
-  } else {
-    dataPath = href
-    return `<a href="${dataPath}" target="_blank">${text}</a>`
-  }
-}
+import { marked } from 'marked'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github.css'
+
 marked.setOptions({
-  renderer: renderer,
-  highlight: function(code, lang) {
+  highlight(code, lang) {
     if (lang && hljs.getLanguage(lang)) {
-      return hljs.highlight(code, { language: lang }).value;
+      return hljs.highlight(code, { language: lang }).value
     }
-    return hljs.highlightAuto(code).value;
+    return hljs.highlightAuto(code).value
   },
   breaks: true,
   gfm: true
-});
+})
 
 export default {
-  name: 'AiMessage',
   props: {
-    message: {
-      type: Object,
-      required: true
-    }
+    message: Object,
+    thinkStatus: Boolean
   },
   computed: {
     thinkingExpanded() {
-      return this.message.thinkingExpanded !== false;
-    },
-    renderedContent() {
-      return marked.parse(this.message.content || '');
-    },
-    isLoading() {
-      return this.message.loading === true;
-    }
-  },
-  watch: {
-    thinkStatus(newVal, oldVal) {
-      console.log('thinkStatus 变化:', newVal, oldVal);
+      return this.message.thinkingExpanded !== false
     }
   },
   methods: {
-    handleLinkClick(event) {
-      const link = event.target.closest('a')
-      if (!link) return
-
-      const routePath = link.getAttribute('data-path')
-      const linkText = link.getAttribute('data-text')
-
-      if (routePath && linkText) {
-        event.preventDefault()
-
-        if (this.$appOptions?.store?.dispatch) {
-          this.$appOptions.store.dispatch('tags/addTagview', {
-            path: routePath,
-            fullPath: routePath,
-            label: linkText,
-            name: linkText,
-            meta: { title: linkText }
-          })
-          this.$appOptions.router.push({ path: routePath })
-        } else {
-          this.$router.push(routePath).catch(() => {})
-        }
-      }
+    renderMarkdown(text) {
+      return marked.parse(text || '')
     }
   }
 }
 </script>
 
+
+
 <style scoped>
 /* Loading 容器 */
 .ai-loading {

package/components/ChatMessageList.vue

@@ -6,11 +6,11 @@
       v-for="message in messages"
       :key="message.id"
     >
-      <UserMessage 
+      <UserMessage
         v-if="message.type === 'user'"
         :content="message.content"
       />
-      <AiMessage 
+      <AiMessage
         v-else
         :message="message"
         :think-status="thinkStatus"
@@ -25,53 +25,34 @@ import UserMessage from './UserMessage.vue'
 import AiMessage from './AiMessage.vue'
 
 export default {
-  name: 'ChatMessageList',
-  components: {
-    UserMessage,
-    AiMessage
-  },
+  components: { UserMessage, AiMessage },
   props: {
-    messages: {
-      type: Array,
-      required: true
-    },
-    thinkStatus: {
-      type: Boolean,
-      default: true
-    }
+    messages: Array,
+    thinkStatus: Boolean
   },
   computed: {
     lastMessageObject() {
-      const len = this.messages.length;
-      if (len === 0) {
-        return null;
-      }
-      return this.messages[len - 1];
+      return this.messages[this.messages.length - 1] || null
     }
   },
   methods: {
     handleThinkingToggle(message) {
-      console.log('handleThinkingToggle', message)
-      this.$set(message, 'thinkingExpanded', !message.thinkingExpanded);
+      this.$set(message, 'thinkingExpanded', !message.thinkingExpanded)
     },
     scrollToBottom() {
       this.$nextTick(() => {
-        const chatArea = this.$refs.chatArea
-        if (chatArea) {
-          chatArea.scrollTop = chatArea.scrollHeight
-        }
+        const el = this.$refs.chatArea
+        if (el) el.scrollTop = el.scrollHeight
       })
     }
   },
   watch: {
     lastMessageObject: {
-      handler(newMsg) {
-        if (newMsg) {
-          this.scrollToBottom();
-        }
+      handler() {
+        this.scrollToBottom()
       },
       deep: true,
-      immediate: true 
+      immediate: true
     }
   }
 }

package/components/mixins/messageMixin.js

@@ -7,7 +7,14 @@ import { getCookie } from '../utils/Cookie.js'
 export default {
   data() {
     return {
-      streamParser: null
+      streamParser: null,
+      aiMessage: {
+        id: Date.now(),
+        type: 'ai',
+        timeline: [],
+        loading: true,
+        thinkingExpanded: true
+      }
     }
   },
 
@@ -21,20 +28,9 @@ export default {
 
   methods: {
     createAiMessage() {
-      const message = {
-        id: this.messages.length + 1,
-        type: 'ai',
-        sender: 'AI',
-        time: '',
-        thinking: '',
-        charts: [],
-        content: '',
-        loading: true,
-        thinkingExpanded: true
-      };
-      this.messages.push(message);
-      this.currentMessage = message;
-      return message;
+      this.messages.push(this.aiMessage);
+      this.currentMessage = this.aiMessage;
+      return this.aiMessage;
     },
 
     createUserMessage(content) {
@@ -86,10 +82,8 @@ export default {
         await this.consumeStream(response.body);
         
         // 完成解析
-        const self = this;
-        this.streamParser.finish(function(result) {
-          self.handleStreamUpdate(result);
-        });
+        this.streamParser.finish(() => {});
+        this.aiMessage.loading = false;
         
         // 记录耗时
         const duration = Date.now() - startTime;
@@ -120,7 +114,6 @@ export default {
     async consumeStream(readableStream) {
       const reader = readableStream.getReader();
       const decoder = new TextDecoder('utf-8');
-      const self = this;
 
       try {
         // eslint-disable-next-line no-constant-condition
@@ -131,9 +124,11 @@ export default {
           const chunk = decoder.decode(value, { stream: true });
           console.log('收到数据块:', chunk);
           // 使用解析器处理数据块，确保this指向正确
-          this.streamParser.processChunk(chunk, function(result) {
-            console.log('处理数据块:', result);
-            self.handleStreamUpdate(result);
+          this.streamParser.processChunk(chunk, (e)  => {
+            console.log('处理数据块:', e);
+            if (e.type === 'create') {
+              this.aiMessage.timeline.push(e.event)
+            }
           });
         }
       } finally {
@@ -174,11 +169,5 @@ export default {
       this.$forceUpdate();
     }
   },
-
-  beforeDestroy() {
-    // 清理解析器
-    if (this.streamParser) {
-      this.streamParser.destroy();
-    }
-  }
+  beforeDestroy() {}
 }

package/components/utils/StreamParser.js

@@ -1,135 +1,181 @@
 export class StreamParser {
   constructor(options = {}) {
     this.options = {
-      updateInterval: 16, // 每16ms刷新一次（约60fps）
-      debug: false,
+      updateInterval: 16,
       ...options
-    };
-    this.reset();
+    }
+    this.reset()
   }
 
-  // 重置解析器状态
   reset() {
-    this.buffer = '';
-    this.contentBuffer = [];
-    this.thinkingBuffer = [];
-    this.inTag = false;
-    this.tagBuffer = '';
-    this.updateTimer = null;
-    this.status = 'output'; // thinking | output
+    this.inTag = false
+    this.tagBuffer = ''
+    this.currentType = 'content'
+    this.currentEvent = null
+    this.updateTimer = null
   }
 
-  // 处理接收到的流数据块
-  processChunk(chunk, callback) {
-    if (!chunk) return;
-    this.parseContent(chunk, callback);
+  processChunk(chunk, emit) {
+    if (!chunk) return
+    this.parse(chunk, emit)
   }
 
-  // 核心内容解析，支持 <think> 标签
-  parseContent(content, callback) {
-    let i = 0;
+  parse(text, emit) {
+    let i = 0
 
-    while (i < content.length) {
+    while (i < text.length) {
       if (this.inTag) {
-        const endIndex = content.indexOf('>', i);
-        if (endIndex !== -1) {
-          this.tagBuffer += content.substring(i, endIndex + 1);
-          this.handleTag(this.tagBuffer);
-          this.tagBuffer = '';
-          this.inTag = false;
-          i = endIndex + 1;
+        const end = text.indexOf('>', i)
+        if (end !== -1) {
+          this.tagBuffer += text.slice(i, end + 1)
+          this.handleTag(this.tagBuffer, emit)
+          this.tagBuffer = ''
+          this.inTag = false
+          i = end + 1
         } else {
-          // 标签未闭合，超过50字符强制输出，防止阻塞
-          this.tagBuffer += content.substring(i);
-          if (this.tagBuffer.length > 50) {
-            this.appendText(this.tagBuffer);
-            this.tagBuffer = '';
-            this.inTag = false;
-          }
-          break;
+          this.tagBuffer += text.slice(i)
+          break
         }
       } else {
-        const startIndex = content.indexOf('<', i);
-        if (startIndex !== -1) {
-          if (startIndex > i) this.appendText(content.substring(i, startIndex));
-
-          const endIndex = content.indexOf('>', startIndex);
-          if (endIndex !== -1) {
-            const tag = content.substring(startIndex, endIndex + 1);
-            this.handleTag(tag);
-            i = endIndex + 1;
+        const lt = text.indexOf('<', i)
+        if (lt !== -1) {
+          if (lt > i) this.append(text.slice(i, lt), emit)
+
+          const gt = text.indexOf('>', lt)
+          if (gt !== -1) {
+            this.handleTag(text.slice(lt, gt + 1), emit)
+            i = gt + 1
           } else {
-            const nextChar = content[startIndex + 1];
-            if (!/[a-zA-Z/]/.test(nextChar)) {
-              // 很可能不是标签，直接当文本输出
-              this.appendText('<');
-              i = startIndex + 1;
-            } else {
-              this.inTag = true;
-              this.tagBuffer = content.substring(startIndex);
-              break;
-            }
+            this.inTag = true
+            this.tagBuffer = text.slice(lt)
+            break
           }
         } else {
-          this.appendText(content.substring(i));
-          break;
+          this.append(text.slice(i), emit)
+          break
         }
       }
     }
 
-    this.scheduleUpdate(callback);
+    this.scheduleFlush(emit)
   }
 
-  // 处理标签
-  handleTag(tag) {
-    const t = tag.toLowerCase();
-    if (t === '<think>') this.status = 'thinking';
-    else if (t === '</think>') this.status = 'output';
+  handleTag(tag, emit) {
+    const t = tag.toLowerCase().trim()
+
+    if (t.startsWith('<think')) {
+      this.startThinking(emit)
+    }
+    else if (t.startsWith('</think')) {
+      this.closeThinking()
+      this.currentType = 'content'
+      this.currentEvent = null
+    }
+    else if (t.startsWith('<tool_call')) {
+      const attrs = this.parseTagAttributes(tag)
+      this.switchType('tool_call', emit, attrs.name)
+    }
+    else if (t.startsWith('</tool_call')) {
+      this.switchType('content', emit)
+    }
+    else if (t.startsWith('<tool_result')) {
+      this.switchType('tool_result', emit)
+    }
+    else if (t.startsWith('</tool_result')) {
+      this.switchType('content', emit)
+    }
+    else {
+      this.append(tag, emit)
+    }
+  }
+
+
+  startThinking(emit) {
+    // 如果上一个 thinking 还没结算，先结算
+    this.closeThinking()
+
+    this.currentType = 'thinking'
+    this.currentEvent = {
+      id: this.uuid(),
+      type: 'thinking',
+      content: '',
+      startTime: Date.now(),
+      endTime: null,
+      duration: null
+    }
+
+    emit({ type: 'create', event: this.currentEvent })
   }
 
-  // 添加文本到缓冲区
-  appendText(text) {
-    if (!text) return;
-    if (this.status === 'thinking') this.thinkingBuffer.push(text);
-    else this.contentBuffer.push(text);
+  closeThinking() {
+    if (
+      this.currentEvent &&
+      this.currentEvent.type === 'thinking' &&
+      !this.currentEvent.endTime
+    ) {
+      this.currentEvent.endTime = Date.now()
+      this.currentEvent.duration = (
+        (this.currentEvent.endTime - this.currentEvent.startTime) / 1000
+      ).toFixed(2)
+      console.log(this.currentEvent.endTime - this.currentEvent.startTime)
+    }
   }
 
-  // 防抖刷新
-  scheduleUpdate(callback) {
-    if (this.updateTimer) return;
-    this.updateTimer = setTimeout(() => {
-      this.flush(callback);
-      this.updateTimer = null;
-    }, this.options.updateInterval);
+  switchType(type) {
+    // 如果是从 thinking 切走，结算时间
+    if (this.currentEvent?.type === 'thinking') {
+      this.closeThinking()
+    }
+
+    this.currentType = type
+    this.currentEvent = null
   }
 
-  // 刷新缓冲区
-  flush(callback) {
-    if (!callback) return;
-    const result = {
-      thinking: this.thinkingBuffer.length ? this.thinkingBuffer.join('') : null,
-      content: this.contentBuffer.length ? this.contentBuffer.join('') : null,
-      status: this.status
-    };
-    this.thinkingBuffer = [];
-    this.contentBuffer = [];
-    callback(result);
+  append(text, emit) {
+    if (!text) return
+
+    if (!this.currentEvent || this.currentEvent.type !== this.currentType) {
+      this.currentEvent = {
+        id: this.uuid(),
+        type: this.currentType,
+        content: ''
+      }
+      emit({ type: 'create', event: this.currentEvent })
+    }
+
+    this.currentEvent.content += text
+    emit({ type: 'append', event: this.currentEvent })
   }
 
-  // 完成解析
-  finish(callback) {
-    if (this.inTag && this.tagBuffer) {
-      this.appendText(this.tagBuffer);
-      this.tagBuffer = '';
-      this.inTag = false;
+  parseTagAttributes(tag) {
+    const attrRegex = /(\w+)=['"]([^'"]+)['"]/g
+    const attrs = {}
+    let match
+    
+    while ((match = attrRegex.exec(tag)) !== null) {
+      attrs[match[1]] = match[2]
     }
-    this.flush(callback);
-    if (this.updateTimer) clearTimeout(this.updateTimer);
+    
+    return attrs
+  }
+
+  scheduleFlush(emit) {
+    if (this.updateTimer) return
+    this.updateTimer = setTimeout(() => {
+      emit({ type: 'flush' })
+      this.updateTimer = null
+    }, this.options.updateInterval)
+  }
+
+  finish(emit) {
+    // 结束时如果还在 thinking，也要结算
+    this.closeThinking()
+    emit({ type: 'flush' })
+    if (this.updateTimer) clearTimeout(this.updateTimer)
+    this.reset()
   }
 
-  // 销毁解析器
-  destroy() {
-    if (this.updateTimer) clearTimeout(this.updateTimer);
-    this.reset();
+  uuid() {
+    return Math.random().toString(36).slice(2)
   }
-}
+}