byt-lingxiao-ai 0.3.0 → 0.3.3

package/components/AiMessage.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="chat-window-message-ai">
     <div class="ai-render">
-      <div class="ai-loading" v-if="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-click')" v-if="message.thinking">
-        <div class="ai-thinking-time">思考用时{{ message.time }}秒</div>
-        <div class="ai-thinking-content" v-if="thinkStatus">{{ message.thinking }}</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>
       <div class="ai-content markdown-body" v-html="renderedContent"></div>
     </div>
@@ -30,7 +30,6 @@ marked.setOptions({
   breaks: true,
   gfm: true
 });
-
 function parseMarkdown(text) {
   if (!text) return '';
   let html = text;
@@ -58,18 +57,22 @@ function parseMarkdown(text) {
   html = html.replace(/^\s*\d+\.\s+(.+)$/gm, '<li>$1</li>');
   
   html = html.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
-  
+  // 解析Markdown链接
   html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
   
   html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1" />');
   
   html = html.replace(/^-{3,}$/gm, '<hr>');
+  // 解析简单URL
+  const simpleUrlRegex = /(https?:\/\/[^\s<>"']+)/g;
+  html = html.replace(simpleUrlRegex, (match) => {
+    return `<a href="${match}" aria-current="page">${match}</a>`;
+  });
   
-  html = html.replace(/\n/g, '<br>');
+  // html = html.replace(/\n/g, '<br>');
   
   return html;
 }
-
 // 解析表格
 function parseTable(text) {
   const lines = text.split('\n');
@@ -108,7 +111,6 @@ function parseTable(text) {
   
   return result.join('\n');
 }
-
 // 渲染表格
 function renderTable(rows) {
   if (rows.length < 2) return rows.join('\n');
@@ -130,7 +132,7 @@ function renderTable(rows) {
     if (cells.length > 0) {
       html += '<tr>';
       cells.forEach(cell => {
-        html += `<td>${cell.trim()}</td>`;
+        html += `<td><div class="table-cell">${cell.trim()}</div></td>`;
       });
       html += '</tr>';
     }
@@ -140,7 +142,6 @@ function renderTable(rows) {
   html += '</table></div>';
   return html;
 }
-
 // HTML 转义
 function escapeHtml(text) {
   const map = {
@@ -159,19 +160,17 @@ export default {
     message: {
       type: Object,
       required: true
-    },
-    thinkStatus: {
-      type: Boolean,
-      default: true
-    },
-    loading: {
-      type: Boolean,
-      default: false
     }
   },
   computed: {
+    thinkingExpanded() {
+      return this.message.thinkingExpanded !== false;
+    },
     renderedContent() {
       return parseMarkdown(this.message.content);
+    },
+    isLoading() {
+      return this.message.loading === true;
     }
   },
   watch: {
@@ -371,16 +370,35 @@ export default {
 .markdown-body ::v-deep .table-wrapper{
   overflow-x: auto;
   border: 1px solid #dfe2e5;
+  margin: 12px 0;
 }
 .markdown-body ::v-deep .markdown-table {
   border-collapse: collapse;
   width: 100%;
-  margin: 12px 0;
   font-size: 14px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   overflow: hidden;
+  margin: -1px 0 0 -1px;
+}
+/* 定义table的滚动条 */
+.markdown-body ::v-deep .table-wrapper::-webkit-scrollbar {
+  height: 6px;
+}
+.markdown-body ::v-deep .table-wrapper::-webkit-scrollbar-track {
+  background-color: #f3f4f6;
+}
+.markdown-body ::v-deep .table-wrapper::-webkit-scrollbar-thumb {
+  background-color: #d1d5db;
+  border-radius: 3px;
+}
+.markdown-body ::v-deep .table-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: #9ca3af;
 }
 
+.markdown-body ::v-deep .table-cell {
+  min-width: 100px;
+  text-align: left;
+}
 .markdown-body ::v-deep .markdown-table th,
 .markdown-body ::v-deep .markdown-table td {
   border: 1px solid #dfe2e5;
@@ -459,6 +477,6 @@ export default {
 }
 
 .markdown-body ::v-deep br {
-  line-height: 1.6;
+  line-height: 0.8em;
 }
 </style>

package/components/ChatAvatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chat-ai" @click="$emit('click')">
+  <div class="chat-ai" @mousedown="$emit('mousedown')">
     <div :class="['chat-ai-avater', status]"></div>
     <div class="chat-ai-text">{{ statusText }}</div>
   </div>
@@ -41,6 +41,13 @@ export default {
   box-shadow: 0 2px 11.6px 0 rgba(0, 0, 0, 0.1);
   cursor: pointer;
   user-select: none;
+  transition: box-shadow 0.2s;
+}
+.chat-ai:hover {
+  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
+}
+.chat-ai:active {
+  cursor: grabbing;
 }
 
 .chat-ai-avater {

package/components/ChatMessageList.vue

@@ -1,5 +1,6 @@
 <template>
   <div ref="chatArea" class="chat-window-content scrollbar-hide">
+    <div v-if="messages.length === 0" class="chat-window-empty"></div>
     <div
       class="chat-window-message"
       v-for="message in messages"
@@ -13,8 +14,7 @@
         v-else
         :message="message"
         :think-status="thinkStatus"
-        :loading="isLoading"
-        @thinking-click="$emit('thinking-click')"
+        @thinking-toggle="handleThinkingToggle(message)"
       />
     </div>
   </div>
@@ -38,13 +38,22 @@ export default {
     thinkStatus: {
       type: Boolean,
       default: true
-    },
-    isLoading: {
-      type: Boolean,
-      default: false
+    }
+  },
+  computed: {
+    lastMessageObject() {
+      const len = this.messages.length;
+      if (len === 0) {
+        return null;
+      }
+      return this.messages[len - 1];
     }
   },
   methods: {
+    handleThinkingToggle(message) {
+      console.log('handleThinkingToggle', message)
+      this.$set(message, 'thinkingExpanded', !message.thinkingExpanded);
+    },
     scrollToBottom() {
       this.$nextTick(() => {
         const chatArea = this.$refs.chatArea
@@ -55,17 +64,27 @@ export default {
     }
   },
   watch: {
-    messages: {
-      handler() {
-        this.scrollToBottom()
+    lastMessageObject: {
+      handler(newMsg) {
+        if (newMsg) {
+          this.scrollToBottom();
+        }
       },
-      deep: true
+      deep: true,
+      immediate: true 
     }
   }
 }
 </script>
 
 <style scoped>
+.chat-window-empty{
+  width: 300px;
+  height: 300px;
+  background: url('./assets/empty.png') no-repeat;
+  background-size: cover;
+  margin: auto;
+}
 .chat-window-content {
   flex: 1;
   padding: 16px;

package/components/ChatRobot.vue

@@ -11,6 +11,11 @@ export default {
       required: true,
       validator: (value) => ['entering', 'waiting', 'speaking'].includes(value)
     }
+  },
+  watch: {
+    status(newStatus, oldStatus) {
+      console.log('机器人状态变化:', newStatus, oldStatus)
+    }
   }
 }
 </script>

package/components/ChatWindow.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="chat">
+  <div 
+    class="chat"
+    :style="chatStyle"
+  >
     <!-- 隐藏的音频播放器 -->
     <audio 
       ref="audioPlayer"
@@ -21,7 +24,7 @@
     <ChatAvatar 
       v-else
       :status="avaterStatus"
-      @click="toggleWindow"
+      @mousedown="startDrag"
     />
 
     <!-- 聊天窗口 -->
@@ -30,7 +33,6 @@
       :messages="messages"
       :input-message="inputMessage"
       :think-status="thinkStatus"
-      :loading="isLoading"
       @update:inputMessage="inputMessage = $event"
       @send="handleSend"
       @thinking-click="handleThinkingClick"
@@ -77,7 +79,31 @@ export default {
       thinkStatus: true,
       jumpedTimePoints: new Set(),
       SAMPLE_RATE,
-      FRAME_SIZE
+      FRAME_SIZE,
+      dragThreshold: 5, // 拖拽阈值
+      isDragging: false,
+      dragStartX: 0,
+      dragStartY: 0,
+      currentX: 10, 
+      currentY: 20, 
+      initialX: 10, 
+      initialY: 20,
+      hasMoved: false,
+    }
+  },
+  computed: {
+    chatStyle() {
+      if (this.robotStatus === 'leaving' && !this.visible) {
+        return {
+          right: `${this.currentX}px`,
+          bottom: `${this.currentY}px`,
+          cursor: this.isDragging ? 'grabbing' : 'grab',
+          transition: this.isDragging ? 'none' : 'right 0.3s ease, bottom 0.3s ease',
+        };
+      }
+      return {
+        cursor: 'pointer',
+      };
     }
   },
   mounted() {
@@ -85,6 +111,13 @@ export default {
     if (this.appendToBody) {
       this.appendToBodyHandler()
     }
+
+    this.$nextTick(() => {
+      const chatEl = this.$el;
+      const style = window.getComputedStyle(chatEl);
+      this.initialX = this.currentX = parseInt(style.right, 10) || 10;
+      this.initialY = this.currentY = parseInt(style.bottom, 10) || 20;
+    })
   },
   beforeDestroy() {
     if (this.appendToBody && this.$el.parentElement === document.body) {
@@ -92,10 +125,80 @@ export default {
     }
     this.closeWebSocket()
     this.stopRecording()
+
+    // 移除全局事件监听器
+    document.removeEventListener('mousemove', this.onDrag)
+    document.removeEventListener('mouseup', this.stopDrag)
   },
   methods: {
     toggleWindow() {
       this.visible = !this.visible
+      
+      if (this.visible) {
+        this.currentX = this.initialX
+        this.currentY = this.initialY
+      }
+   },
+    startDrag() {
+      console.log('startDrag')
+      if (this.robotStatus !== 'leaving' && this.visible) return;
+
+      this.isDragging = true;
+      this.hasMoved = false;
+
+      // 记录鼠标的初始位置
+      this.dragStartX = event.clientX;
+      this.dragStartY = event.clientY;
+
+      // 绑定全局事件监听器
+      document.addEventListener('mousemove', this.onDrag);
+      document.addEventListener('mouseup', this.stopDrag);
+    },
+    onDrag(event) {
+      if (!this.isDragging) return;
+
+      // 鼠标位移量
+      const deltaX = event.clientX - this.dragStartX;
+      const deltaY = event.clientY - this.dragStartY;
+
+      if (Math.abs(deltaX) > this.dragThreshold || Math.abs(deltaY) > this.dragThreshold) {
+        console.log('移动超过阈值')
+        this.hasMoved = true; // 只要移动超过阈值，就标记为拖拽
+      }
+      
+      // 获取 .chat 容器的尺寸
+      const chatEl = this.$el;
+      const chatWidth = chatEl.offsetWidth;
+      const chatHeight = chatEl.offsetHeight;
+      
+      let newX = this.currentX - deltaX;
+      let newY = this.currentY - deltaY;
+
+      // 视口宽度和高度
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      newX = Math.max(0, newX);
+      newX = Math.min(viewportWidth - chatWidth, newX);
+
+      newY = Math.max(0, newY);
+      newY = Math.min(viewportHeight - chatHeight, newY);
+
+      // 更新位置
+      this.currentX = newX;
+      this.currentY = newY;
+
+      // 重新设置新的拖拽起始点，实现平滑拖拽
+      this.dragStartX = event.clientX;
+      this.dragStartY = event.clientY;
+    },
+    stopDrag() {
+      this.isDragging = false;
+      document.removeEventListener('mousemove', this.onDrag);
+      document.removeEventListener('mouseup', this.stopDrag);
+      if (!this.hasMoved) {
+        this.toggleWindow()
+      }
     },
     handleThinkingClick() {
       this.thinkStatus = !this.thinkStatus
@@ -123,8 +226,14 @@ export default {
         .then(response => response.json())
         .then(data => {
           console.log('时间跳转点:', data)
+          console.log('当前时间:', currentTime)
           data.forEach(point => {
-            if (currentTime >= point.time && currentTime < point.time + 0.5 && !this.jumpedTimePoints.has(point.time)) {
+            console.log('跳转点:', point)
+            console.log('跳转时间:', point.time)
+            console.log('当前时间:', currentTime)
+            console.log('是否已跳转:', this.jumpedTimePoints.has(point.time))
+            console.log('跳转时间范围:', currentTime >= point.time && currentTime < point.time + 1)
+            if (currentTime >= point.time && currentTime < point.time + 1 && !this.jumpedTimePoints.has(point.time)) {
               this.jumpedTimePoints.add(point.time)
               this.$appOptions.store.dispatch('tags/addTagview', {
                 path: point.url,
@@ -143,6 +252,7 @@ export default {
     },
     onAudioEnded() {
       this.robotStatus = 'leaving'
+      this.avaterStatus = 'normal'
       this.jumpedTimePoints.clear()
     }
   }

package/components/ChatWindowHeader.vue

@@ -41,6 +41,8 @@ export default {
   name: 'ChatWindowHeader',
   methods: {
     handleOpen() {
+      // const chatId = ''
+      // const baseUrl = window.location.protocol + '//' + window.location.hostname + ':3100/c/' + chatId;
       const baseUrl = window.location.protocol + '//' + window.location.hostname + ':3100/';
       window.open(baseUrl, '_blank')
     }
@@ -56,6 +58,7 @@ export default {
   background: #fff;
   padding: 16px;
   flex-shrink: 0;
+  user-select: none;
 }
 
 .chat-window-header-title {

package/components/config/index.js

@@ -1,3 +1,7 @@
+const baseUrl = window.location.protocol + '//' + window.location.hostname;
+const chatPort = '3100';
+
+console.log(baseUrl, chatPort);
 export const API_URL = 'http://192.168.8.87:3100/lingxiao-byt/api/v1/mcp/ask';
 export const WS_URL = 'ws://192.168.8.9:9999/ai_model/ws/voice-stream';
 export const AUDIO_URL = '/minio/lingxiaoai/byt.mp3';

package/components/mixins/messageMixin.js

@@ -4,8 +4,7 @@ import { API_URL } from '../config/index.js'
 export default {
   data() {
     return {
-      streamParser: null,
-      isLoading: false
+      streamParser: null
     }
   },
 
@@ -15,7 +14,6 @@ export default {
       updateInterval: 16, // 约60fps
       debug: process.env.NODE_ENV === 'development'
     });
-    this.isLoading = true;
   },
 
   methods: {
@@ -28,6 +26,8 @@ export default {
         thinking: '',
         charts: [],
         content: '',
+        loading: true,
+        thinkingExpanded: true
       };
       this.messages.push(message);
       this.currentMessage = message;
@@ -95,7 +95,6 @@ export default {
         
         console.log(`流处理完成，总耗时: ${duration}ms`);
         this.avaterStatus = 'normal';
-        this.isLoading = false;
         
       } catch (error) {
         console.error('发送消息失败:', error);
@@ -103,7 +102,11 @@ export default {
           this.currentMessage.content = '抱歉，发生了错误，请重试。';
           this.$forceUpdate();
         }
-        this.isLoading = false;
+      } finally {
+        // 确保加载状态关闭
+        if (this.currentMessage) {
+          this.currentMessage.loading = false;
+        }
       }
     },
 
@@ -141,6 +144,9 @@ export default {
 
       console.log('收到更新:', result);
 
+      if (this.currentMessage.loading) {
+        this.currentMessage.loading = false;
+      }
       // 更新思考内容
       if (result.thinking) {
         this.currentMessage.thinking += result.thinking;