byt-lingxiao-ai 0.3.0 → 0.3.2

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;
@@ -65,11 +64,10 @@ function parseMarkdown(text) {
   
   html = html.replace(/^-{3,}$/gm, '<hr>');
   
-  html = html.replace(/\n/g, '<br>');
+  // html = html.replace(/\n/g, '<br>');
   
   return html;
 }
-
 // 解析表格
 function parseTable(text) {
   const lines = text.split('\n');
@@ -108,7 +106,6 @@ function parseTable(text) {
   
   return result.join('\n');
 }
-
 // 渲染表格
 function renderTable(rows) {
   if (rows.length < 2) return rows.join('\n');
@@ -140,7 +137,6 @@ function renderTable(rows) {
   html += '</table></div>';
   return html;
 }
-
 // HTML 转义
 function escapeHtml(text) {
   const map = {
@@ -159,19 +155,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: {
@@ -459,6 +453,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/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

package/components/ChatWindowHeader.vue

@@ -56,6 +56,7 @@ export default {
   background: #fff;
   padding: 16px;
   flex-shrink: 0;
+  user-select: none;
 }
 
 .chat-window-header-title {

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;