byt-lingxiao-ai 0.3.24 → 0.3.26

package/components/AiMessage.vue

@@ -1,24 +1,60 @@
 <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"
+        >
+          <div class="ai-thinking-time" :class="{'thinking-expanded': !item.thinkingExpanded}" @click="handleThinkingToggle(item)">
+            {{
+              item.duration
+                ? `思考用时 ${item.duration} 秒`
+                : '思考中...'
+            }}
+          </div>
+          <div
+            class="ai-thinking-content"
+            v-if="item.thinkingExpanded"
+          >
+            {{ item.content }}
+          </div>
+        </div>
+        <div
+          v-else-if="item.type === 'tool_call'"
+          class="ai-tool-call"
+        >
+          <div class="tool-title">🔧 {{ 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';
+import { marked } from 'marked'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github.css'
 
 // 创建自定义渲染器
 const renderer = new marked.Renderer()
@@ -28,9 +64,10 @@ renderer.link = function ({ href, text }) {
   let dataPath = ''
   const url = new URL(href, window.location.origin)
   const pathname = url.pathname
+  const search = url.search
 
   if (pathname.startsWith('/portal/')) {
-    dataPath = pathname.substring('/portal'.length)
+    dataPath = pathname.substring('/portal'.length) + search
     return `<a href="javascript:void(0)" data-path="${dataPath}" data-text="${text}">${text}</a>`
   } else {
     dataPath = href
@@ -50,58 +87,28 @@ marked.setOptions({
 });
 
 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 || '')
+    },
+    handleThinkingToggle(item) {
+      this.$set(item, 'thinkingExpanded', !item.thinkingExpanded)
     }
   }
 }
 </script>
 
+
+
 <style scoped>
 /* Loading 容器 */
 .ai-loading {
@@ -201,6 +208,11 @@ export default {
   height: 16px;
   background: url('./assets/arrow.png') no-repeat;
   background-size: cover;
+  /* 添加过度动画 */
+  transition: all 0.2s ease-in-out;
+}
+.thinking-expanded::after {
+  transform: translateY(-50%) rotate(180deg);
 }
 
 .ai-thinking-content {
@@ -220,6 +232,7 @@ export default {
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
+  margin: 10px 0;
 }
 
 /* Markdown 样式 */

package/components/ChatMessageList.vue

@@ -6,15 +6,14 @@
       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"
-        @thinking-toggle="handleThinkingToggle(message)"
       />
     </div>
   </div>
@@ -25,53 +24,40 @@ 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[this.messages.length - 1] || null
+    },
+    timelineContents() {
+      if (!this.lastMessageObject || !this.lastMessageObject.timeline) {
+        return ''
       }
-      return this.messages[len - 1];
+      // 将所有 content 拼接成一个字符串用于监听变化
+      return this.lastMessageObject.timeline
+        .map(item => item.content || '')
+        .join('')
     }
   },
   methods: {
-    handleThinkingToggle(message) {
-      console.log('handleThinkingToggle', message)
-      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();
-        }
+    timelineContents: {
+      handler() {
+        this.scrollToBottom()
       },
       deep: true,
-      immediate: true 
+      immediate: true
     }
   }
 }

package/components/mixins/messageMixin.js

@@ -1,13 +1,15 @@
 import { StreamParser } from '../utils/StreamParser'
 import { API_URL } from '../config/index.js'
 import { getCookie } from '../utils/Cookie.js'
+import generateUuid from 'components/utils/Uuid'
 
 
 
 export default {
   data() {
     return {
-      streamParser: null
+      streamParser: null,
+      currentMessage: null
     }
   },
 
@@ -21,25 +23,22 @@ export default {
 
   methods: {
     createAiMessage() {
-      const message = {
-        id: this.messages.length + 1,
+      const aiMessage = {
+        id: generateUuid(),
         type: 'ai',
         sender: 'AI',
-        time: '',
-        thinking: '',
-        charts: [],
-        content: '',
+        timeline: [],
         loading: true,
         thinkingExpanded: true
-      };
-      this.messages.push(message);
-      this.currentMessage = message;
-      return message;
+      }
+      this.messages.push(aiMessage);
+      this.currentMessage = aiMessage;
+      return aiMessage;
     },
 
     createUserMessage(content) {
       const message = {
-        id: this.messages.length + 1,
+        id: generateUuid(),
         type: 'user',
         sender: '用户',
         time: '',
@@ -86,10 +85,7 @@ export default {
         await this.consumeStream(response.body);
         
         // 完成解析
-        const self = this;
-        this.streamParser.finish(function(result) {
-          self.handleStreamUpdate(result);
-        });
+        this.streamParser.finish(() => {});
         
         // 记录耗时
         const duration = Date.now() - startTime;
@@ -104,7 +100,6 @@ export default {
         console.error('发送消息失败:', error);
         if (this.currentMessage) {
           this.currentMessage.content = '抱歉，发生了错误，请重试。';
-          this.$forceUpdate();
         }
       } finally {
         // 确保加载状态关闭
@@ -120,7 +115,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 +125,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)  => {
+            if (!this.currentMessage) return;
+            if (e.type === 'create') {
+              this.currentMessage.timeline.push(e.event)
+            }
           });
         }
       } finally {
@@ -174,11 +170,5 @@ export default {
       this.$forceUpdate();
     }
   },
-
-  beforeDestroy() {
-    // 清理解析器
-    if (this.streamParser) {
-      this.streamParser.destroy();
-    }
-  }
+  beforeDestroy() {}
 }

package/components/utils/StreamParser.js

@@ -1,135 +1,210 @@
 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)
+  }
+
+  parseTag(tag) {
+    const isClosing = tag.startsWith('</')
+
+    const content = tag
+      .replace(/^<\/?|>$/g, '')
+      .trim()
+
+    const [tagName, ...attrParts] = content.split(/\s+/)
+
+    const attrs = {}
+
+    attrParts.forEach(part => {
+      const [key, rawValue] = part.split('=')
+      if (!key || !rawValue) return
+
+      attrs[key] = rawValue.replace(/^['"]|['"]$/g, '')
+    })
+
+    return {
+      tag: tagName.replace('/', ''),
+      attrs,
+      isClosing
+    }
   }
 
-  // 处理标签
-  handleTag(tag) {
-    const t = tag.toLowerCase();
-    if (t === '<think>') this.status = 'thinking';
-    else if (t === '</think>') this.status = 'output';
+
+  handleTag(tag, emit) {
+    const { tag: tagName, attrs, isClosing } = this.parseTag(tag.toLowerCase())
+
+    if (tagName === 'think') {
+      if (!isClosing) {
+        this.startThinking(attrs, emit)
+      } else {
+        this.closeThinking()
+        this.currentType = 'content'
+        this.currentEvent = null
+      }
+    }
+
+    else if (tagName === 'tool_call') {
+      if (!isClosing) {
+        this.switchType('tool_call', emit, attrs)
+      } else {
+        this.switchType('content', emit)
+      }
+    }
+
+    else if (tagName === 'tool_result') {
+      if (!isClosing) {
+        this.switchType('tool_result', emit, attrs)
+      } else {
+        this.switchType('content', emit)
+      }
+    }
+
+    else {
+      this.append(tag, emit)
+    }
   }
 
-  // 添加文本到缓冲区
-  appendText(text) {
-    if (!text) return;
-    if (this.status === 'thinking') this.thinkingBuffer.push(text);
-    else this.contentBuffer.push(text);
+
+
+  startThinking(attrs={}, emit) {
+    // 如果上一个 thinking 还没结算，先结算
+    this.closeThinking()
+
+    this.currentType = 'thinking'
+    this.currentEvent = {
+      id: this.uuid(),
+      type: 'thinking',
+      name: attrs.name || null,
+      content: '',
+      startTime: Date.now(),
+      thinkingExpanded: true,
+      endTime: null,
+      duration: null
+    }
+
+    emit({ type: 'create', event: this.currentEvent })
   }
 
-  // 防抖刷新
-  scheduleUpdate(callback) {
-    if (this.updateTimer) return;
-    this.updateTimer = setTimeout(() => {
-      this.flush(callback);
-      this.updateTimer = null;
-    }, this.options.updateInterval);
+  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)
+    }
   }
 
-  // 刷新缓冲区
-  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);
+  switchType(type, emit, attrs={}) {
+    // 如果是从 thinking 切走，结算时间
+    if (this.currentEvent?.type === 'thinking') {
+      this.closeThinking()
+    }
+
+    this.currentType = type
+    this.currentEvent = {
+      id: this.uuid(),
+      type,
+      name: attrs.name || null,
+      content: ''
+    }
+
+    emit({ type: 'create', event: this.currentEvent })
   }
 
-  // 完成解析
-  finish(callback) {
-    if (this.inTag && this.tagBuffer) {
-      this.appendText(this.tagBuffer);
-      this.tagBuffer = '';
-      this.inTag = false;
+  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.flush(callback);
-    if (this.updateTimer) clearTimeout(this.updateTimer);
+
+    this.currentEvent.content += text
+    emit({ type: 'append', event: this.currentEvent })
+  }
+
+  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)
   }
-}
+}