byt-lingxiao-ai 0.2.8 → 0.3.2

package/components/AiMessage.vue

@@ -1,32 +1,222 @@
 <template>
   <div class="chat-window-message-ai">
     <div class="ai-render">
-      <div class="ai-thinking" @click="$emit('thinking-click')">
-        <div class="ai-thinking-time">思考用时{{ message.time }}秒</div>
-        <div class="ai-thinking-content" v-if="thinkStatus">{{ message.thinking }}</div>
+      <div class="ai-loading" v-if="isLoading">
+        <div class="dot"></div>
+        <div class="dot"></div>
+        <div class="dot"></div>
       </div>
-      <div class="ai-content">{{ message.content }}</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>
   </div>
 </template>
 
 <script>
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
+
+marked.setOptions({
+  highlight: function(code, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      return hljs.highlight(code, { language: lang }).value;
+    }
+    return hljs.highlightAuto(code).value;
+  },
+  breaks: true,
+  gfm: true
+});
+function parseMarkdown(text) {
+  if (!text) return '';
+  let html = text;
+  
+  html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
+    return `<pre><code class="language-${lang || 'text'}">${escapeHtml(code.trim())}</code></pre>`;
+  });
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+  html = parseTable(html);
+  
+  html = html.replace(/^#### (.*$)/gm, '<h4>$1</h4>');
+  html = html.replace(/^### (.*$)/gm, '<h3>$1</h3>');
+  html = html.replace(/^## (.*$)/gm, '<h2>$1</h2>');
+  html = html.replace(/^# (.*$)/gm, '<h1>$1</h1>');
+  
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+  
+  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+  
+  html = html.replace(/~~(.*?)~~/g, '<del>$1</del>');
+  
+  html = html.replace(/^\s*[-*+]\s+(.+)$/gm, '<li>$1</li>');
+  html = html.replace(/(<li>.*?<\/li>)/gs, '<ul>$1</ul>');
+  
+  html = html.replace(/^\s*\d+\.\s+(.+)$/gm, '<li>$1</li>');
+  
+  html = html.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
+  
+  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>');
+  
+  // html = html.replace(/\n/g, '<br>');
+  
+  return html;
+}
+// 解析表格
+function parseTable(text) {
+  const lines = text.split('\n');
+  let result = [];
+  let inTable = false;
+  let tableRows = [];
+  
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+    
+    // 检测表格行
+    if (line.includes('|') && line.split('|').length >= 3) {
+      if (!inTable) {
+        inTable = true;
+        tableRows = [];
+      }
+      tableRows.push(line);
+      
+      // 检查下一行是否还是表格
+      if (i === lines.length - 1 || !lines[i + 1].includes('|')) {
+        // 表格结束
+        result.push(renderTable(tableRows));
+        inTable = false;
+        tableRows = [];
+      }
+    } else {
+      if (inTable) {
+        // 表格意外结束
+        result.push(renderTable(tableRows));
+        inTable = false;
+        tableRows = [];
+      }
+      result.push(line);
+    }
+  }
+  
+  return result.join('\n');
+}
+// 渲染表格
+function renderTable(rows) {
+  if (rows.length < 2) return rows.join('\n');
+  
+  let html = '<div class="table-wrapper"><table class="markdown-table">';
+  
+  // 表头
+  const headerCells = rows[0].split('|').filter(cell => cell.trim());
+  html += '<thead><tr>';
+  headerCells.forEach(cell => {
+    html += `<th>${cell.trim()}</th>`;
+  });
+  html += '</tr></thead>';
+  
+  // 表体（跳过分隔行）
+  html += '<tbody>';
+  for (let i = 2; i < rows.length; i++) {
+    const cells = rows[i].split('|').filter(cell => cell.trim());
+    if (cells.length > 0) {
+      html += '<tr>';
+      cells.forEach(cell => {
+        html += `<td>${cell.trim()}</td>`;
+      });
+      html += '</tr>';
+    }
+  }
+  html += '</tbody>';
+  
+  html += '</table></div>';
+  return html;
+}
+// HTML 转义
+function escapeHtml(text) {
+  const map = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;'
+  };
+  return text.replace(/[&<>"']/g, m => map[m]);
+}
+
 export default {
   name: 'AiMessage',
   props: {
     message: {
       type: Object,
       required: true
+    }
+  },
+  computed: {
+    thinkingExpanded() {
+      return this.message.thinkingExpanded !== false;
+    },
+    renderedContent() {
+      return parseMarkdown(this.message.content);
     },
-    thinkStatus: {
-      type: Boolean,
-      default: true
+    isLoading() {
+      return this.message.loading === true;
+    }
+  },
+  watch: {
+    thinkStatus(newVal, oldVal) {
+      console.log('thinkStatus 变化:', newVal, oldVal);
     }
   }
 }
 </script>
 
 <style scoped>
+/* Loading 容器 */
+.ai-loading {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  height: 24px;
+}
+
+/* 单个圆点样式 */
+.dot {
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+  background-color: #86909C; /* 与你的思考字体颜色一致 */
+  border-radius: 50%;
+  animation: dot-bounce 1.4s infinite ease-in-out both;
+}
+
+.dot:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: -0.16s;
+}
+.dot:nth-child(3) {
+  animation-delay: 0s;
+}
+
+/* 定义跳动动画 */
+@keyframes dot-bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 .chat-window-message-ai {
   display: flex;
   gap: 12px;
@@ -99,11 +289,170 @@ export default {
 
 .ai-content {
   color: #4E5969;
-  text-align: justify;
   font-family: "Alibaba PuHuiTi 2.0";
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: 24px;
 }
+
+/* Markdown 样式 */
+.markdown-body {
+  word-wrap: break-word;
+}
+
+.markdown-body ::v-deep h1,
+.markdown-body ::v-deep h2,
+.markdown-body ::v-deep h3,
+.markdown-body ::v-deep h4 {
+  margin: 16px 0 8px 0;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #1f2937;
+}
+
+.markdown-body ::v-deep h1 {
+  font-size: 24px;
+  border-bottom: 2px solid #e5e7eb;
+  padding-bottom: 8px;
+}
+
+.markdown-body ::v-deep h2 {
+  font-size: 20px;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 6px;
+}
+
+.markdown-body ::v-deep h3 {
+  font-size: 18px;
+}
+
+.markdown-body ::v-deep h4 {
+  font-size: 16px;
+}
+
+.markdown-body ::v-deep code {
+  background-color: rgba(175, 184, 193, 0.2);
+  border-radius: 3px;
+  font-size: 85%;
+  margin: 0;
+  padding: 0.2em 0.4em;
+  font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
+  color: #e83e8c;
+}
+
+.markdown-body ::v-deep pre {
+  background-color: #f6f8fa;
+  border-radius: 6px;
+  padding: 16px;
+  overflow: auto;
+  margin: 12px 0;
+  border: 1px solid #e1e4e8;
+}
+
+.markdown-body ::v-deep pre code {
+  background-color: transparent;
+  border: 0;
+  display: inline;
+  line-height: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: 0;
+  word-wrap: normal;
+  color: #24292e;
+  font-size: 14px;
+}
+.markdown-body ::v-deep .table-wrapper{
+  overflow-x: auto;
+  border: 1px solid #dfe2e5;
+}
+.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;
+}
+
+.markdown-body ::v-deep .markdown-table th,
+.markdown-body ::v-deep .markdown-table td {
+  border: 1px solid #dfe2e5;
+  padding: 10px 14px;
+  text-align: left;
+}
+
+.markdown-body ::v-deep .markdown-table th {
+  background-color: #f3f4f6;
+  font-weight: 600;
+  color: #374151;
+}
+
+.markdown-body ::v-deep .markdown-table tr:nth-child(even) {
+  background-color: #f9fafb;
+}
+
+.markdown-body ::v-deep .markdown-table tr:hover {
+  background-color: #f3f4f6;
+  transition: background-color 0.2s;
+}
+
+.markdown-body ::v-deep ul,
+.markdown-body ::v-deep ol {
+  padding-left: 24px;
+  margin: 8px 0;
+}
+
+.markdown-body ::v-deep li {
+  margin: 4px 0;
+  line-height: 1.6;
+}
+
+.markdown-body ::v-deep strong {
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.markdown-body ::v-deep em {
+  font-style: italic;
+}
+
+.markdown-body ::v-deep del {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+
+.markdown-body ::v-deep blockquote {
+  border-left: 4px solid #dfe2e5;
+  padding-left: 16px;
+  margin: 12px 0;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.markdown-body ::v-deep a {
+  color: #3b82f6;
+  text-decoration: none;
+}
+
+.markdown-body ::v-deep a:hover {
+  text-decoration: underline;
+  color: #2563eb;
+}
+
+.markdown-body ::v-deep img {
+  max-width: 100%;
+  border-radius: 6px;
+  margin: 12px 0;
+}
+
+.markdown-body ::v-deep hr {
+  border: none;
+  border-top: 1px solid #e5e7eb;
+  margin: 16px 0;
+}
+
+.markdown-body ::v-deep br {
+  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>
@@ -20,7 +20,7 @@ export default {
       const textMap = {
         'normal': '凌霄AI',
         'thinking': '思考中',
-        'output': '语音中'
+        'output': '输出中'
       }
       return textMap[this.status]
     }
@@ -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,7 +14,7 @@
         v-else
         :message="message"
         :think-status="thinkStatus"
-        @thinking-click="$emit('thinking-click')"
+        @thinking-toggle="handleThinkingToggle(message)"
       />
     </div>
   </div>
@@ -39,7 +40,20 @@ export default {
       default: true
     }
   },
+  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
@@ -50,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"
     />
 
     <!-- 聊天窗口 -->
@@ -45,6 +48,7 @@ import ChatWindowDialog from './ChatWindowDialog.vue'
 import audioMixin from './mixins/audioMixin'
 import webSocketMixin from './mixins/webSocketMixin'
 import messageMixin from './mixins/messageMixin'
+import { AUDIO_URL, TIME_JUMP_POINTS_URL } from './config/index.js'
 
 const SAMPLE_RATE = 16000;
 const FRAME_SIZE = 512;
@@ -65,7 +69,7 @@ export default {
   },
   data() {
     return {
-      audioSrc: '/minio/lingxiaoai/byt.mp3',
+      audioSrc: AUDIO_URL,
       inputMessage: '',
       visible: false,
       messages: [],
@@ -75,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() {
@@ -83,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) {
@@ -90,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
@@ -117,7 +222,7 @@ export default {
         this.jumpedTimePoints = new Set()
       }
 
-      fetch('/minio/lingxiaoai/timeJumpPoints.json')
+      fetch(TIME_JUMP_POINTS_URL)
         .then(response => response.json())
         .then(data => {
           console.log('时间跳转点:', data)

package/components/ChatWindowDialog.vue

@@ -9,6 +9,7 @@
         ref="messageList"
         :messages="messages"
         :think-status="thinkStatus"
+        :loading="loading"
         @thinking-click="$emit('thinking-click')"
       />
       
@@ -50,6 +51,10 @@ export default {
     thinkStatus: {
       type: Boolean,
       default: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   }
 }

package/components/ChatWindowHeader.vue

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