byt-lingxiao-ai 0.3.25 → 0.3.27

package/components/AiMessage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chat-window-message-ai">
     <div class="ai-render">
-      <div v-if="message.loading" class="ai-loading">
+      <div v-if="messageLoading" class="ai-loading">
         <div class="dot"></div>
         <div class="dot"></div>
         <div class="dot"></div>
@@ -14,9 +14,8 @@
         <div
           v-if="item.type === 'thinking'"
           class="ai-thinking"
-          @click="$emit('thinking-toggle')"
         >
-          <div class="ai-thinking-time">
+          <div class="ai-thinking-time" :class="{'thinking-expanded': !item.thinkingExpanded}" @click="handleThinkingToggle(item)">
             {{
               item.duration
                 ? `思考用时 ${item.duration} 秒`
@@ -25,7 +24,7 @@
           </div>
           <div
             class="ai-thinking-content"
-            v-if="thinkingExpanded"
+            v-if="item.thinkingExpanded"
           >
             {{ item.content }}
           </div>
@@ -34,7 +33,7 @@
           v-else-if="item.type === 'tool_call'"
           class="ai-tool-call"
         >
-          <div class="tool-title">🔧 {{ item.content }}{{ item.name }}</div>
+          <div class="tool-title">🔧 {{ item.name }}</div>
         </div>
         <div
           v-else-if="item.type === 'tool_result'"
@@ -45,6 +44,7 @@
         <div
           v-else-if="item.type === 'content'"
           class="ai-content markdown-body"
+           @click="handleLinkClick"
           v-html="renderMarkdown(item.content)"
         ></div>
       </div>
@@ -57,20 +57,40 @@ 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
+  const search = url.search
+
+  if (pathname.startsWith('/portal/')) {
+    dataPath = pathname.substring('/portal'.length) + search
+    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({
-  highlight(code, lang) {
+  renderer: renderer,
+  highlight: function(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 {
   props: {
     message: Object,
+    messageLoading: Boolean,
     thinkStatus: Boolean
   },
   computed: {
@@ -81,6 +101,34 @@ export default {
   methods: {
     renderMarkdown(text) {
       return marked.parse(text || '')
+    },
+    handleThinkingToggle(item) {
+      this.$set(item, 'thinkingExpanded', !item.thinkingExpanded)
+    },
+    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 {
+          console.log('路由跳转:', routePath)
+          this.$router.push(routePath).catch(() => {})
+        }
+      }
     }
   }
 }
@@ -187,6 +235,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 {
@@ -206,6 +259,7 @@ export default {
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
+  margin-bottom: 10px;
 }
 
 /* Markdown 样式 */

package/components/ChatMessageList.vue

@@ -13,8 +13,8 @@
       <AiMessage
         v-else
         :message="message"
+        :message-loading="messageLoading"
         :think-status="thinkStatus"
-        @thinking-toggle="handleThinkingToggle(message)"
       />
     </div>
   </div>
@@ -28,17 +28,24 @@ export default {
   components: { UserMessage, AiMessage },
   props: {
     messages: Array,
+    messageLoading: Boolean,
     thinkStatus: Boolean
   },
   computed: {
     lastMessageObject() {
       return this.messages[this.messages.length - 1] || null
+    },
+    timelineContents() {
+      if (!this.lastMessageObject || !this.lastMessageObject.timeline) {
+        return ''
+      }
+      // 将所有 content 拼接成一个字符串用于监听变化
+      return this.lastMessageObject.timeline
+        .map(item => item.content || '')
+        .join('')
     }
   },
   methods: {
-    handleThinkingToggle(message) {
-      this.$set(message, 'thinkingExpanded', !message.thinkingExpanded)
-    },
     scrollToBottom() {
       this.$nextTick(() => {
         const el = this.$refs.chatArea
@@ -47,7 +54,7 @@ export default {
     }
   },
   watch: {
-    lastMessageObject: {
+    timelineContents: {
       handler() {
         this.scrollToBottom()
       },

package/components/ChatWindow.vue

@@ -31,6 +31,7 @@
     <ChatWindowDialog
       v-model="visible"
       :messages="messages"
+      :message-loading="messageLoading"
       :input-message="inputMessage"
       :think-status="thinkStatus"
       :chat-id="chatId"
@@ -77,6 +78,7 @@ export default {
       inputMessage: '',
       visible: false,
       messages: [],
+      messageLoading: true,
       robotStatus: 'leaving',
       avaterStatus: 'normal',
       currentMessage: null,

package/components/ChatWindowDialog.vue

@@ -9,8 +9,8 @@
       <ChatMessageList 
         ref="messageList"
         :messages="messages"
+        :message-loading="messageLoading"
         :think-status="thinkStatus"
-        :loading="loading"
         @thinking-click="$emit('thinking-click')"
       />
       
@@ -45,6 +45,10 @@ export default {
       type: Array,
       required: true
     },
+    messageLoading: {
+      type: Boolean,
+      default: false
+    },
     inputMessage: {
       type: String,
       default: ''
@@ -53,10 +57,6 @@ export default {
       type: Boolean,
       default: true
     },
-    loading: {
-      type: Boolean,
-      default: false
-    },
     chatId: {
       type: String,
       default: ''

package/components/mixins/messageMixin.js

@@ -1,6 +1,7 @@
 import { StreamParser } from '../utils/StreamParser'
 import { API_URL } from '../config/index.js'
 import { getCookie } from '../utils/Cookie.js'
+import generateUuid from 'components/utils/Uuid'
 
 
 
@@ -8,13 +9,7 @@ export default {
   data() {
     return {
       streamParser: null,
-      aiMessage: {
-        id: Date.now(),
-        type: 'ai',
-        timeline: [],
-        loading: true,
-        thinkingExpanded: true
-      }
+      currentMessage: null
     }
   },
 
@@ -28,14 +23,22 @@ export default {
 
   methods: {
     createAiMessage() {
-      this.messages.push(this.aiMessage);
-      this.currentMessage = this.aiMessage;
-      return this.aiMessage;
+      const aiMessage = {
+        id: generateUuid(),
+        type: 'ai',
+        sender: 'AI',
+        timeline: [],
+        loading: true,
+        thinkingExpanded: true
+      }
+      this.messages.push(aiMessage);
+      this.currentMessage = aiMessage;
+      return aiMessage;
     },
 
     createUserMessage(content) {
       const message = {
-        id: this.messages.length + 1,
+        id: generateUuid(),
         type: 'user',
         sender: '用户',
         time: '',
@@ -61,6 +64,8 @@ export default {
       const controller = new AbortController();
 
       try {
+        this.messageLoading = true;
+
         const startTime = Date.now();
         const token = getCookie('bonyear-access_token') || `44e7f112-63f3-429d-908d-2c97ec380de2`;
         
@@ -83,7 +88,6 @@ export default {
         
         // 完成解析
         this.streamParser.finish(() => {});
-        this.aiMessage.loading = false;
         
         // 记录耗时
         const duration = Date.now() - startTime;
@@ -98,13 +102,9 @@ export default {
         console.error('发送消息失败:', error);
         if (this.currentMessage) {
           this.currentMessage.content = '抱歉，发生了错误，请重试。';
-          this.$forceUpdate();
         }
       } finally {
-        // 确保加载状态关闭
-        if (this.currentMessage) {
-          this.currentMessage.loading = false;
-        }
+        this.messageLoading = false;
       }
     },
 
@@ -125,9 +125,9 @@ export default {
           console.log('收到数据块:', chunk);
           // 使用解析器处理数据块，确保this指向正确
           this.streamParser.processChunk(chunk, (e)  => {
-            console.log('处理数据块:', e);
+            if (!this.currentMessage) return;
             if (e.type === 'create') {
-              this.aiMessage.timeline.push(e.event)
+              this.currentMessage.timeline.push(e.event)
             }
           });
         }

package/components/utils/StreamParser.js

@@ -60,37 +60,69 @@ export class StreamParser {
     this.scheduleFlush(emit)
   }
 
-  handleTag(tag, emit) {
-    const t = tag.toLowerCase().trim()
+  parseTag(tag) {
+    const isClosing = tag.startsWith('</')
 
-    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)
+    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
     }
-    else if (t.startsWith('</tool_call')) {
-      this.switchType('content', emit)
+  }
+
+
+  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 (t.startsWith('<tool_result')) {
-      this.switchType('tool_result', emit)
+
+    else if (tagName === 'tool_call') {
+      if (!isClosing) {
+        this.switchType('tool_call', emit, attrs)
+      } else {
+        this.switchType('content', emit)
+      }
     }
-    else if (t.startsWith('</tool_result')) {
-      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)
     }
   }
 
 
-  startThinking(emit) {
+
+  startThinking(attrs={}, emit) {
     // 如果上一个 thinking 还没结算，先结算
     this.closeThinking()
 
@@ -98,8 +130,10 @@ export class StreamParser {
     this.currentEvent = {
       id: this.uuid(),
       type: 'thinking',
+      name: attrs.name || null,
       content: '',
       startTime: Date.now(),
+      thinkingExpanded: true,
       endTime: null,
       duration: null
     }
@@ -121,14 +155,21 @@ export class StreamParser {
     }
   }
 
-  switchType(type) {
+  switchType(type, emit, attrs={}) {
     // 如果是从 thinking 切走，结算时间
     if (this.currentEvent?.type === 'thinking') {
       this.closeThinking()
     }
 
     this.currentType = type
-    this.currentEvent = null
+    this.currentEvent = {
+      id: this.uuid(),
+      type,
+      name: attrs.name || null,
+      content: ''
+    }
+
+    emit({ type: 'create', event: this.currentEvent })
   }
 
   append(text, emit) {
@@ -147,18 +188,6 @@ export class StreamParser {
     emit({ type: 'append', event: this.currentEvent })
   }
 
-  parseTagAttributes(tag) {
-    const attrRegex = /(\w+)=['"]([^'"]+)['"]/g
-    const attrs = {}
-    let match
-    
-    while ((match = attrRegex.exec(tag)) !== null) {
-      attrs[match[1]] = match[2]
-    }
-    
-    return attrs
-  }
-
   scheduleFlush(emit) {
     if (this.updateTimer) return
     this.updateTimer = setTimeout(() => {