byt-lingxiao-ai 0.3.21 → 0.3.22

package/components/AiMessage.vue

@@ -1,50 +1,102 @@
 <template>
   <div class="chat-window-message-ai">
     <div class="ai-render">
+
+      <!-- loading -->
       <div class="ai-loading" v-if="isLoading">
         <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 mergedTimeline"
+        :key="item.id"
+        class="ai-timeline-item"
+      >
+        <!-- 思考 -->
+        <div
+          v-if="item.type === 'thinking'"
+          class="ai-thinking"
+          @click="$emit('thinking-toggle')"
+        >
+          <div class="ai-thinking-time">
+            {{ message.time ? `思考用时 ${message.time} 秒` : '思考中...' }}
+          </div>
+          <div
+            class="ai-thinking-content"
+            v-if="thinkingExpanded"
+          >
+            {{ item.text }}
+          </div>
+        </div>
+
+        <!-- 工具调用 -->
+        <div
+          v-else-if="item.type === 'tool'"
+          class="ai-tool"
+        >
+          <div class="ai-tool-header">
+            调用工具：{{ item.tool.name }}
+          </div>
+          <details>
+            <summary>参数</summary>
+            <pre>{{ item.tool.args }}</pre>
+          </details>
+          <details v-if="item.tool.result">
+            <summary>结果</summary>
+            <pre>{{ item.tool.result }}</pre>
+          </details>
+        </div>
+        <div
+          v-else-if="item.type === 'content'"
+          class="ai-content markdown-body"
+          v-html="renderMarkdown(item.text)"
+          @click="handleLinkClick"
+        />
+        <div
+          v-if="item.type === 'protocol_error'"
+          class="ai-protocol-error"
+        >
+          {{ item.raw }}
+        </div>
       </div>
-      <div class="ai-content markdown-body" 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();
-
-// 自定义URL处理逻辑
-// renderer.link = function(content) {
-//   console.log(content)
-//   return `<router-link to="http://192.168.2.24:9529/portal/permission/user">点击跳转</router-link>`
-// };
-renderer.link = function({ href, title }) {
-  console.log(href, title)
-  // 需要截取portal后面的路径
-  const url = `/permission/user`
-  return `<a href="${url}" data-path="${url}">点击跳转</a>`;
-};
+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>`
+  }
+}
+
 marked.setOptions({
-  renderer: renderer,
-  highlight: function(code, lang) {
+  renderer,
+  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',
@@ -56,23 +108,63 @@ export default {
   },
   computed: {
     thinkingExpanded() {
-      return this.message.thinkingExpanded !== false;
-    },
-    renderedContent() {
-      return marked.parse(this.message.content || '');
+      return this.message.thinkingExpanded !== false
     },
     isLoading() {
-      return this.message.loading === true;
+      return this.message.loading === true
+    },
+    mergedTimeline() {
+      const result = []
+      let last = null
+
+      for (const item of this.message.timeline || []) {
+        if (item.type === 'content') {
+          if (last && last.type === 'content') {
+            last.text += item.text
+          } else {
+            last = { ...item }
+            result.push(last)
+          }
+        } else {
+          last = null
+          result.push(item)
+        }
+      }
+      return result
     }
   },
-  watch: {
-    thinkStatus(newVal, oldVal) {
-      console.log('thinkStatus 变化:', newVal, oldVal);
+
+  methods: {
+    renderMarkdown(text) {
+      return marked.parse(text || '')
+    },
+    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(() => {})
+        }
+      }
     }
   }
 }
 </script>
-
 <style scoped>
 /* Loading 容器 */
 .ai-loading {

package/components/mixins/messageMixin.js

@@ -26,9 +26,7 @@ export default {
         type: 'ai',
         sender: 'AI',
         time: '',
-        thinking: '',
-        charts: [],
-        content: '',
+        timeline: [],
         loading: true,
         thinkingExpanded: true
       };
@@ -66,7 +64,7 @@ export default {
 
       try {
         const startTime = Date.now();
-        const token = getCookie('bonyear-access_token') || `44e7f112-63f3-429d-908d-2c97ec380de2`;
+        const token = getCookie('bonyear-access_token') || `b6dd936e-4b8b-4e10-ba70-573eb35673f1`;
         
         const response = await fetch(API_URL, {
           method: 'POST',
@@ -147,28 +145,39 @@ export default {
     handleStreamUpdate(result) {
       if (!this.currentMessage) return;
 
-      console.log('收到更新:', result);
+      this.currentMessage.loading = false
 
-      if (this.currentMessage.loading) {
-        this.currentMessage.loading = false;
+      if (result.protocolError) {
+        this.currentMessage.timeline.push({
+          type: 'protocol_error',
+          id: Date.now() + Math.random(),
+          raw: result.protocolError
+        })
       }
-      // 更新思考内容
-      if (result.thinking) {
-        this.currentMessage.thinking += result.thinking;
+      if (result.thinkingSegment) {
+        this.currentMessage.timeline.push({
+          type: 'thinking',
+          id: Date.now() + Math.random(),
+          text: result.thinkingSegment
+        })
+      }
+      if (result.toolCall) {
+        this.currentMessage.timeline.push({
+          type: 'tool',
+          id: result.toolCall.id,
+          tool: result.toolCall
+        })
       }
-
-      // 更新回复内容
-      console.log('更新回复内容:', result.content);
       if (result.content) {
-        this.currentMessage.content += result.content;
+        this.currentMessage.timeline.push({
+          type: 'content',
+          id: Date.now() + Math.random(),
+          text: result.content
+        })
       }
 
       // 更新状态
-      if (result.status === 'thinking') {
-        this.avaterStatus = 'thinking';
-      } else {
-        this.avaterStatus = 'output';
-      }
+      this.avaterStatus = result.status === 'thinking' ? 'thinking' : 'output'
 
       // 触发视图更新
       this.$forceUpdate();

package/components/utils/StreamParser.js

@@ -1,135 +1,213 @@
+// utils/StreamParser.js
 export class StreamParser {
   constructor(options = {}) {
     this.options = {
-      updateInterval: 16, // 每16ms刷新一次（约60fps）
+      updateInterval: 16,
       debug: false,
       ...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.contentBuffer = []
+    this.thinkingBuffer = []
+
+    this.completedThinkingSegments = []
+    this.completedToolCalls = []
+
+    this.currentToolCall = null
+
+    this.protocolErrorBuffer = [] // ✅ 新增
+
+    this.inTag = false
+    this.tagBuffer = ''
+    this.updateTimer = null
+
+    this.status = 'output' // thinking | output | tool_call | tool_result
   }
 
-  // 处理接收到的流数据块
   processChunk(chunk, callback) {
-    if (!chunk) return;
-    this.parseContent(chunk, callback);
+    if (!chunk) return
+    this.parseContent(chunk, callback)
   }
 
-  // 核心内容解析，支持 <think> 标签
   parseContent(content, callback) {
-    let i = 0;
+    let i = 0
 
     while (i < content.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 = content.indexOf('>', i)
+        if (end !== -1) {
+          this.tagBuffer += content.slice(i, end + 1)
+          this.handleTag(this.tagBuffer)
+          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 += content.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;
-          } 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;
-            }
-          }
-        } else {
-          this.appendText(content.substring(i));
-          break;
+        const start = content.indexOf('<', i)
+        if (start === -1) {
+          this.appendText(content.slice(i))
+          break
+        }
+
+        if (start > i) {
+          this.appendText(content.slice(i, start))
         }
+
+        const end = content.indexOf('>', start)
+        if (end === -1) {
+          this.inTag = true
+          this.tagBuffer = content.slice(start)
+          break
+        }
+
+        const tag = content.slice(start, end + 1)
+        this.handleTag(tag)
+        i = end + 1
       }
     }
 
-    this.scheduleUpdate(callback);
+    this.scheduleUpdate(callback)
   }
 
-  // 处理标签
   handleTag(tag) {
-    const t = tag.toLowerCase();
-    if (t === '<think>') this.status = 'thinking';
-    else if (t === '</think>') this.status = 'output';
+    const t = tag.toLowerCase()
+
+    // ---------- think ----------
+    if (t === '<think>') {
+      this.status = 'thinking'
+      return
+    }
+
+    if (t === '</think>') {
+      if (this.thinkingBuffer.length) {
+        this.completedThinkingSegments.push(
+          this.thinkingBuffer.join('')
+        )
+        this.thinkingBuffer = []
+      }
+      this.status = 'output'
+      return
+    }
+
+    // ---------- tool_call ----------
+    if (t.startsWith('<tool_call')) {
+      const nameMatch = tag.match(/name\s*=\s*["'](.+?)["']/)
+      this.currentToolCall = {
+        id: `${Date.now()}-${Math.random()}`,
+        name: nameMatch ? nameMatch[1] : 'unknown',
+        args: '',
+        result: '',
+        status: 'calling'
+      }
+      this.status = 'tool_call'
+      return
+    }
+
+    if (t === '</tool_call>') {
+      this.status = 'output'
+      return
+    }
+
+    // ---------- tool_result ----------
+    if (t === '<tool_result>') {
+      this.status = 'tool_result'
+      return
+    }
+
+    if (t === '</tool_result>') {
+      if (this.currentToolCall) {
+        this.currentToolCall.status = 'done'
+        this.completedToolCalls.push(this.currentToolCall)
+        this.currentToolCall = null
+      }
+      this.status = 'output'
+      return
+    }
+
+    // ---------- ❌ 协议错误 ----------
+    if (t.startsWith('<') && t.endsWith('>')) {
+      this.protocolErrorBuffer.push(tag)
+      this.status = 'output'
+    }
   }
 
-  // 添加文本到缓冲区
   appendText(text) {
-    if (!text) return;
-    if (this.status === 'thinking') this.thinkingBuffer.push(text);
-    else this.contentBuffer.push(text);
+    if (!text) return
+
+    if (this.status === 'thinking') {
+      this.thinkingBuffer.push(text)
+    }
+    else if (this.status === 'tool_call') {
+      this.currentToolCall && (this.currentToolCall.args += text)
+    }
+    else if (this.status === 'tool_result') {
+      this.currentToolCall && (this.currentToolCall.result += text)
+    }
+    else {
+      this.contentBuffer.push(text)
+    }
   }
 
-  // 防抖刷新
   scheduleUpdate(callback) {
-    if (this.updateTimer) return;
+    if (this.updateTimer) return
     this.updateTimer = setTimeout(() => {
-      this.flush(callback);
-      this.updateTimer = null;
-    }, this.options.updateInterval);
+      this.flush(callback)
+      this.updateTimer = null
+    }, this.options.updateInterval)
   }
 
-  // 刷新缓冲区
   flush(callback) {
-    if (!callback) return;
+    if (!callback) return
+
     const result = {
-      thinking: this.thinkingBuffer.length ? this.thinkingBuffer.join('') : null,
-      content: this.contentBuffer.length ? this.contentBuffer.join('') : null,
+      thinkingSegment: null,
+      toolCall: null,
+      content: null,
+      protocolError: null,
       status: this.status
-    };
-    this.thinkingBuffer = [];
-    this.contentBuffer = [];
-    callback(result);
+    }
+
+    if (this.protocolErrorBuffer.length) {
+      result.protocolError = this.protocolErrorBuffer.join('\n')
+      this.protocolErrorBuffer = []
+    }
+
+    if (this.completedThinkingSegments.length) {
+      result.thinkingSegment =
+        this.completedThinkingSegments.shift()
+    }
+
+    if (this.completedToolCalls.length) {
+      result.toolCall = this.completedToolCalls.shift()
+    }
+
+    if (this.contentBuffer.length) {
+      result.content = this.contentBuffer.join('')
+      this.contentBuffer = []
+    }
+
+    callback(result)
   }
 
-  // 完成解析
   finish(callback) {
-    if (this.inTag && this.tagBuffer) {
-      this.appendText(this.tagBuffer);
-      this.tagBuffer = '';
-      this.inTag = false;
+    if (this.thinkingBuffer.length) {
+      this.completedThinkingSegments.push(
+        this.thinkingBuffer.join('')
+      )
+      this.thinkingBuffer = []
     }
-    this.flush(callback);
-    if (this.updateTimer) clearTimeout(this.updateTimer);
+    this.flush(callback)
+    if (this.updateTimer) clearTimeout(this.updateTimer)
   }
 
-  // 销毁解析器
   destroy() {
-    if (this.updateTimer) clearTimeout(this.updateTimer);
-    this.reset();
+    if (this.updateTimer) clearTimeout(this.updateTimer)
+    this.reset()
   }
 }