byt-lingxiao-ai 0.2.8 → 0.3.0

package/components/AiMessage.vue

@@ -1,16 +1,158 @@
 <template>
   <div class="chat-window-message-ai">
     <div class="ai-render">
-      <div class="ai-thinking" @click="$emit('thinking-click')">
+      <div class="ai-loading" v-if="loading">
+        <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>
-      <div class="ai-content">{{ message.content }}</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: {
@@ -21,12 +163,66 @@ export default {
     thinkStatus: {
       type: Boolean,
       default: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    renderedContent() {
+      return parseMarkdown(this.message.content);
+    }
+  },
+  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 +295,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: 1.6;
+}
 </style>

package/components/ChatAvatar.vue

@@ -20,7 +20,7 @@ export default {
       const textMap = {
         'normal': '凌霄AI',
         'thinking': '思考中',
-        'output': '语音中'
+        'output': '输出中'
       }
       return textMap[this.status]
     }

package/components/ChatMessageList.vue

@@ -13,6 +13,7 @@
         v-else
         :message="message"
         :think-status="thinkStatus"
+        :loading="isLoading"
         @thinking-click="$emit('thinking-click')"
       />
     </div>
@@ -37,6 +38,10 @@ export default {
     thinkStatus: {
       type: Boolean,
       default: true
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {

package/components/ChatWindow.vue

@@ -30,6 +30,7 @@
       :messages="messages"
       :input-message="inputMessage"
       :think-status="thinkStatus"
+      :loading="isLoading"
       @update:inputMessage="inputMessage = $event"
       @send="handleSend"
       @thinking-click="handleThinkingClick"
@@ -45,6 +46,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 +67,7 @@ export default {
   },
   data() {
     return {
-      audioSrc: '/minio/lingxiaoai/byt.mp3',
+      audioSrc: AUDIO_URL,
       inputMessage: '',
       visible: false,
       messages: [],
@@ -117,7 +119,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/config/index.js

@@ -0,0 +1,4 @@
+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';
+export const TIME_JUMP_POINTS_URL = '/minio/lingxiaoai/timeJumpPoints.json';

package/components/mixins/messageMixin.js

@@ -1,9 +1,11 @@
 import { StreamParser } from '../utils/StreamParser'
+import { API_URL } from '../config/index.js'
 
 export default {
   data() {
     return {
-      streamParser: null
+      streamParser: null,
+      isLoading: false
     }
   },
 
@@ -13,6 +15,7 @@ export default {
       updateInterval: 16, // 约60fps
       debug: process.env.NODE_ENV === 'development'
     });
+    this.isLoading = true;
   },
 
   methods: {
@@ -59,12 +62,9 @@ export default {
       try {
         const startTime = Date.now();
         const controller = new AbortController();
-        const token = `Bearer ac627d0a-8346-4ae9-b93a-f37ff6210adc`;
-
-        const baseUrl = window.location.protocol + '//' + window.location.hostname + ':3100';
-        const apiUrl = baseUrl + '/lingxiao-byt/api/chat/completions';
+        const token = `Bearer e298f087-85bc-48c2-afb9-7c69ffc911aa`;
         
-        const response = await fetch(apiUrl, {
+        const response = await fetch(API_URL, {
           method: 'POST',
           signal: controller.signal,
           headers: {
@@ -82,7 +82,10 @@ export default {
         await this.consumeStream(response.body);
         
         // 完成解析
-        this.streamParser.finish(this.handleStreamUpdate);
+        const self = this;
+        this.streamParser.finish(function(result) {
+          self.handleStreamUpdate(result);
+        });
         
         // 记录耗时
         const duration = Date.now() - startTime;
@@ -91,6 +94,8 @@ export default {
         }
         
         console.log(`流处理完成，总耗时: ${duration}ms`);
+        this.avaterStatus = 'normal';
+        this.isLoading = false;
         
       } catch (error) {
         console.error('发送消息失败:', error);
@@ -98,6 +103,7 @@ export default {
           this.currentMessage.content = '抱歉，发生了错误，请重试。';
           this.$forceUpdate();
         }
+        this.isLoading = false;
       }
     },
 
@@ -107,6 +113,7 @@ export default {
     async consumeStream(readableStream) {
       const reader = readableStream.getReader();
       const decoder = new TextDecoder('utf-8');
+      const self = this;
 
       try {
         // eslint-disable-next-line no-constant-condition
@@ -116,8 +123,10 @@ export default {
           
           const chunk = decoder.decode(value, { stream: true });
           
-          // 使用解析器处理数据块
-          this.streamParser.processChunk(chunk, this.handleStreamUpdate);
+          // 使用解析器处理数据块，确保this指向正确
+          this.streamParser.processChunk(chunk, function(result) {
+            self.handleStreamUpdate(result);
+          });
         }
       } finally {
         reader.releaseLock();
@@ -130,6 +139,8 @@ export default {
     handleStreamUpdate(result) {
       if (!this.currentMessage) return;
 
+      console.log('收到更新:', result);
+
       // 更新思考内容
       if (result.thinking) {
         this.currentMessage.thinking += result.thinking;

package/components/mixins/webSocketMixin.js

@@ -1,8 +1,10 @@
+import { WS_URL } from '../config/index.js'
+
 export default {
   data() {
     return {
       ws: null,
-      wsUrl: 'ws://192.168.8.9:9999/ai_model/ws/voice-stream',
+      wsUrl: WS_URL,
       isConnected: false,
       reconnectCount: 0, // 重连尝试次数
       maxReconnectAttempts: 3 // 最大重连尝试次数