@flexem/chat-box 1.0.0

package/miniprogram_dist/components/message/index.js

@@ -0,0 +1,988 @@
+/**
+ * 消息组件
+ * 支持 Markdown 渲染、图片预览、语音播放等
+ */
+
+Component({
+  properties: {
+    // 消息数据
+    message: {
+      type: Object,
+      value: {}
+    },
+    // 用户头像
+    userAvatar: {
+      type: String,
+      value: ''
+    },
+    // 是否显示用户操作按钮
+    showUserActions: {
+      type: Boolean,
+      value: true
+    },
+    // 是否正在播放语音
+    isPlaying: {
+      type: Boolean,
+      value: false
+    },
+    // 是否正在合成语音
+    isSynthesizing: {
+      type: Boolean,
+      value: false
+    },
+    // 是否正在流式生成（用于禁用快捷回复按钮）
+    isStreaming: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  data: {
+    parsedContent: [],    // 解析后的 Markdown 内容
+    showThinking: false,  // 是否显示思考过程
+    lastParseTime: 0,     // 上次解析时间
+    pendingParse: false,  // 是否有待处理的解析
+    elementIdCounter: 0   // 元素 ID 计数器，用于生成唯一 ID
+  },
+
+  observers: {
+    'message.content': function(content) {
+      if (content && this.properties.message.role === 'assistant') {
+        this.throttledParseMarkdown(content);
+      }
+    },
+    'message.isStreaming': function(isStreaming) {
+      // 流式输出结束时，立即执行最后一次解析
+      if (!isStreaming && this.data.pendingParse) {
+        this.parseMarkdown(this.properties.message.content);
+      }
+    }
+  },
+
+  lifetimes: {
+    attached() {
+      const message = this.properties.message;
+      if (message.content && message.role === 'assistant') {
+        this.parseMarkdown(message.content);
+      }
+    },
+    detached() {
+      // 清理定时器
+      if (this.parseTimer) {
+        clearTimeout(this.parseTimer);
+      }
+    }
+  },
+
+  methods: {
+    /**
+     * 节流解析 Markdown（流式输出时减少解析频率）
+     */
+    throttledParseMarkdown(content) {
+      const now = Date.now();
+      const isStreaming = this.properties.message.isStreaming;
+
+      // 非流式输出时直接解析
+      if (!isStreaming) {
+        this.parseMarkdown(content, false);
+        return;
+      }
+
+      // 流式输出时，使用节流（每150ms最多解析一次）
+      const throttleInterval = 150;
+
+      if (now - this.data.lastParseTime >= throttleInterval) {
+        this.parseMarkdown(content, true);
+        this.setData({ lastParseTime: now, pendingParse: false });
+      } else {
+        // 标记有待处理的解析
+        this.setData({ pendingParse: true });
+
+        // 设置延迟解析
+        if (this.parseTimer) {
+          clearTimeout(this.parseTimer);
+        }
+        this.parseTimer = setTimeout(() => {
+          this.parseMarkdown(content, true);
+          this.setData({ lastParseTime: Date.now(), pendingParse: false });
+        }, throttleInterval);
+      }
+    },
+
+    /**
+     * 简易 Markdown 解析器
+     * @param {string} content - Markdown 内容
+     * @param {boolean} isStreaming - 是否处于流式输出模式
+     */
+    parseMarkdown(content, isStreaming = false) {
+      if (!content) {
+        this.setData({ parsedContent: [] });
+        return;
+      }
+
+      // 预处理：修复跨行的链接 [text]\n(url) -> [text](url)
+      let processedContent = this.preprocessLinks(content);
+
+      const lines = processedContent.split('\n');
+      const result = [];
+      let i = 0;
+      let inCodeBlock = false;
+      let codeBlockLang = '';
+      let codeBlockContent = [];
+      let elementId = 0; // 元素 ID 计数器
+
+      while (i < lines.length) {
+        const line = lines[i];
+
+        // 代码块开始/结束
+        if (line.startsWith('```')) {
+          if (inCodeBlock) {
+            // 代码块结束
+            const codeText = codeBlockContent.join('\n');
+
+            // 特殊处理 quick-replies 代码块
+            if (codeBlockLang === 'quick-replies') {
+              const trimmedCode = codeText.trim();
+              if (trimmedCode && trimmedCode.startsWith('[') && trimmedCode.endsWith(']')) {
+                try {
+                  const options = JSON.parse(trimmedCode);
+                  if (Array.isArray(options) && options.length > 0) {
+                    result.push({
+                      id: 'quick-replies_' + elementId++,
+                      type: 'quick-replies',
+                      options: options
+                    });
+                    inCodeBlock = false;
+                    codeBlockContent = [];
+                    codeBlockLang = '';
+                    i++;
+                    continue;
+                  }
+                } catch (e) {
+                  // JSON 解析失败，流式传输中数据可能不完整，静默忽略
+                }
+              }
+              // 如果数据不完整或无效，不渲染（等待完整数据）
+              inCodeBlock = false;
+              codeBlockContent = [];
+              codeBlockLang = '';
+              i++;
+              continue;
+            }
+
+            // 普通代码块
+            result.push({
+              id: 'code_' + elementId++,
+              type: 'code',
+              lang: codeBlockLang,
+              text: codeText
+            });
+            inCodeBlock = false;
+            codeBlockContent = [];
+            codeBlockLang = '';
+          } else {
+            // 代码块开始
+            inCodeBlock = true;
+            codeBlockLang = line.slice(3).trim();
+          }
+          i++;
+          continue;
+        }
+
+        // 在代码块内
+        if (inCodeBlock) {
+          codeBlockContent.push(line);
+          i++;
+          continue;
+        }
+
+        // 空行
+        if (line.trim() === '') {
+          i++;
+          continue;
+        }
+
+        // 分隔线
+        if (/^(-{3,}|\*{3,}|_{3,})$/.test(line.trim())) {
+          result.push({ id: 'hr_' + elementId++, type: 'hr' });
+          i++;
+          continue;
+        }
+
+        // 表格检测（以 | 开头或包含 | 的行）
+        if (line.includes('|') && this.isTableStart(lines, i)) {
+          const tableResult = this.parseTable(lines, i);
+          if (tableResult.table) {
+            tableResult.table.id = 'table_' + elementId++;
+            result.push(tableResult.table);
+            i = tableResult.nextIndex;
+            continue;
+          }
+        }
+
+        // 标题
+        const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+        if (headingMatch) {
+          result.push({
+            id: 'heading_' + elementId++,
+            type: 'heading',
+            level: headingMatch[1].length,
+            text: headingMatch[2]
+          });
+          i++;
+          continue;
+        }
+
+        // 引用
+        if (line.startsWith('>')) {
+          let quoteText = line.slice(1).trim();
+          i++;
+          // 收集连续的引用行
+          while (i < lines.length && lines[i].startsWith('>')) {
+            quoteText += '\n' + lines[i].slice(1).trim();
+            i++;
+          }
+          result.push({
+            id: 'quote_' + elementId++,
+            type: 'blockquote',
+            text: this.processInlineElements(quoteText)
+          });
+          continue;
+        }
+
+        // 无序列表（支持嵌套）
+        const unorderedMatch = line.match(/^(\s*)([-*+])\s+(.+)$/);
+        if (unorderedMatch) {
+          const listResult = this.parseNestedList(lines, i, false);
+          listResult.list.id = 'list_' + elementId++;
+          result.push(listResult.list);
+          i = listResult.nextIndex;
+          continue;
+        }
+
+        // 有序列表（支持嵌套）
+        const orderedMatch = line.match(/^(\s*)(\d+)\.\s+(.+)$/);
+        if (orderedMatch) {
+          const listResult = this.parseNestedList(lines, i, true);
+          listResult.list.id = 'list_' + elementId++;
+          result.push(listResult.list);
+          i = listResult.nextIndex;
+          continue;
+        }
+
+        // 图片（独立行）
+        const imageMatch = line.trim().match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
+        if (imageMatch) {
+          result.push({
+            id: 'image_' + elementId++,
+            type: 'image',
+            alt: imageMatch[1],
+            src: imageMatch[2]
+          });
+          i++;
+          continue;
+        }
+
+        // 普通段落（处理行内元素）
+        result.push({
+          id: 'para_' + elementId++,
+          type: 'paragraph',
+          text: this.processInlineElements(line)
+        });
+        i++;
+      }
+
+      // 处理未闭合的代码块（流式输出时代码块可能未闭合）
+      if (inCodeBlock && codeBlockContent.length > 0) {
+        result.push({
+          id: 'code_streaming',  // 使用固定 ID，这样流式更新时不会重建元素
+          type: 'code',
+          lang: codeBlockLang,
+          text: codeBlockContent.join('\n'),
+          isStreamingCode: true  // 标记为流式输出中的代码块
+        });
+      }
+
+      // 流式输出时使用增量更新策略
+      if (isStreaming && this.data.parsedContent.length > 0) {
+        const oldContent = this.data.parsedContent;
+        const newContent = result;
+
+        // 检查是否只是最后一个元素变化了（代码块内容增加）
+        const lastOldItem = oldContent[oldContent.length - 1];
+        const lastNewItem = newContent[newContent.length - 1];
+
+        // 如果前面的元素数量相同，且最后一个是流式代码块，只更新文本内容
+        if (oldContent.length === newContent.length &&
+            lastOldItem && lastNewItem &&
+            lastOldItem.id === lastNewItem.id &&
+            lastNewItem.isStreamingCode) {
+          // 只更新代码块的 text 内容
+          this.setData({
+            [`parsedContent[${newContent.length - 1}].text`]: lastNewItem.text
+          });
+          return;
+        }
+
+        // 如果前面的元素数量相同，且最后一个是普通段落，只更新最后一个元素的 text
+        if (oldContent.length === newContent.length &&
+            lastOldItem && lastNewItem &&
+            lastOldItem.id === lastNewItem.id &&
+            lastNewItem.type === 'paragraph') {
+          // 只更新最后一个段落的内容
+          this.setData({
+            [`parsedContent[${newContent.length - 1}].text`]: lastNewItem.text
+          });
+          return;
+        }
+
+        // 如果新增了一个元素（代码块刚开始），追加而不是替换
+        if (newContent.length === oldContent.length + 1) {
+          const allPreviousSame = oldContent.every((item, idx) => {
+            return item.id === newContent[idx]?.id;
+          });
+          if (allPreviousSame) {
+            // 追加新元素
+            this.setData({
+              [`parsedContent[${newContent.length - 1}]`]: lastNewItem
+            });
+            return;
+          }
+        }
+      }
+
+      // 默认：完整替换
+      this.setData({ parsedContent: result });
+    },
+
+    /**
+     * 检测是否是表格开始
+     */
+    isTableStart(lines, index) {
+      if (index + 1 >= lines.length) return false;
+      const currentLine = lines[index];
+      const nextLine = lines[index + 1];
+      // 表格需要有分隔行（包含 | 和 - 或 :）
+      return currentLine.includes('|') && /^[\s|:-]+$/.test(nextLine) && nextLine.includes('-');
+    },
+
+    /**
+     * 解析表格
+     */
+    parseTable(lines, startIndex) {
+      const headerLine = lines[startIndex];
+      const separatorLine = lines[startIndex + 1];
+
+      // 解析表头
+      const headers = this.parseTableRow(headerLine);
+      if (headers.length === 0) {
+        return { table: null, nextIndex: startIndex + 1 };
+      }
+
+      // 解析对齐方式
+      const alignments = this.parseTableAlignments(separatorLine);
+
+      // 解析数据行
+      const rows = [];
+      let i = startIndex + 2;
+      while (i < lines.length) {
+        const line = lines[i];
+        if (!line.includes('|') || line.trim() === '') {
+          break;
+        }
+        const row = this.parseTableRow(line);
+        if (row.length > 0) {
+          rows.push(row);
+        }
+        i++;
+      }
+
+      return {
+        table: {
+          type: 'table',
+          headers: headers,
+          alignments: alignments,
+          rows: rows
+        },
+        nextIndex: i
+      };
+    },
+
+    /**
+     * 解析表格行
+     */
+    parseTableRow(line) {
+      // 去掉首尾的 |
+      let trimmed = line.trim();
+      if (trimmed.startsWith('|')) trimmed = trimmed.slice(1);
+      if (trimmed.endsWith('|')) trimmed = trimmed.slice(0, -1);
+
+      // 按 | 分割并处理每个单元格
+      return trimmed.split('|').map(cell => this.processInlineElements(cell.trim()));
+    },
+
+    /**
+     * 解析表格对齐方式
+     */
+    parseTableAlignments(line) {
+      let trimmed = line.trim();
+      if (trimmed.startsWith('|')) trimmed = trimmed.slice(1);
+      if (trimmed.endsWith('|')) trimmed = trimmed.slice(0, -1);
+
+      return trimmed.split('|').map(cell => {
+        const c = cell.trim();
+        if (c.startsWith(':') && c.endsWith(':')) return 'center';
+        if (c.endsWith(':')) return 'right';
+        return 'left';
+      });
+    },
+
+    /**
+     * 解析嵌套列表
+     * @param {string[]} lines - 所有行
+     * @param {number} startIndex - 起始行索引
+     * @param {boolean} isOrdered - 是否是有序列表
+     * @returns {{ list: Object, nextIndex: number }}
+     */
+    parseNestedList(lines, startIndex, isOrdered) {
+      const items = [];
+      let i = startIndex;
+
+      // 获取第一行的缩进作为基准
+      const firstLine = lines[i];
+      const baseIndentMatch = firstLine.match(/^(\s*)/);
+      const baseIndent = baseIndentMatch ? baseIndentMatch[1].length : 0;
+
+      while (i < lines.length) {
+        const line = lines[i];
+
+        // 跳过空行
+        if (line.trim() === '') {
+          i++;
+          continue;
+        }
+
+        // 计算当前行缩进
+        const indentMatch = line.match(/^(\s*)/);
+        const currentIndent = indentMatch ? indentMatch[1].length : 0;
+
+        // 匹配列表项（无序或有序）
+        const unorderedMatch = line.match(/^(\s*)([-*+])\s+(.+)$/);
+        const orderedMatch = line.match(/^(\s*)(\d+)\.\s+(.+)$/);
+        const listMatch = unorderedMatch || orderedMatch;
+
+        if (!listMatch) {
+          // 不是列表项，结束列表解析
+          break;
+        }
+
+        const itemIndent = listMatch[1].length;
+
+        // 如果缩进小于基准缩进，说明这是外层列表或结束
+        if (itemIndent < baseIndent) {
+          break;
+        }
+
+        // 如果缩进等于基准缩进，是同级列表项
+        if (itemIndent === baseIndent) {
+          const content = unorderedMatch ? unorderedMatch[3] : orderedMatch[3];
+          const itemIsOrdered = !!orderedMatch;
+
+          items.push({
+            content: this.processInlineElements(content),
+            indent: 0,
+            isOrdered: itemIsOrdered,
+            children: []
+          });
+          i++;
+        }
+        // 如果缩进大于基准缩进，是子列表项
+        else if (itemIndent > baseIndent) {
+          // 递归解析子列表
+          const subListResult = this.parseNestedList(lines, i, !!orderedMatch);
+
+          // 将子列表添加到最后一个列表项的 children 中
+          if (items.length > 0) {
+            items[items.length - 1].children.push(subListResult.list);
+          }
+          i = subListResult.nextIndex;
+        }
+      }
+
+      return {
+        list: {
+          type: 'list',
+          ordered: isOrdered,
+          items: items
+        },
+        nextIndex: i
+      };
+    },
+
+    /**
+     * 处理行内元素，返回结构化数组
+     * 支持：加粗、斜体、链接（Markdown和HTML格式）、行内代码、行内图片
+     */
+    processInlineElements(text) {
+      const parts = [];
+      let remaining = text;
+      let currentIndex = 0;
+
+      while (remaining.length > 0) {
+        // 查找最近的特殊标记
+        const linkStart = remaining.indexOf('[');
+        const imageStart = remaining.indexOf('![');
+        const boldStart = remaining.indexOf('**');
+        const boldStart2 = remaining.indexOf('__');
+        const codeStart = remaining.indexOf('`');
+        const htmlLinkStart = remaining.indexOf('<a ');
+
+        // 查找斜体标记（单个 * 或 _，但不是 ** 或 __）
+        let italicStart = -1;
+        let italicStart2 = -1;
+
+        // 查找单个 * 斜体（不是 ** 的一部分）
+        for (let i = 0; i < remaining.length; i++) {
+          if (remaining[i] === '*') {
+            // 检查是否是 ** 的一部分
+            if (remaining[i + 1] !== '*' && (i === 0 || remaining[i - 1] !== '*')) {
+              italicStart = i;
+              break;
+            }
+          }
+        }
+
+        // 查找单个 _ 斜体（不是 __ 的一部分）
+        for (let i = 0; i < remaining.length; i++) {
+          if (remaining[i] === '_') {
+            // 检查是否是 __ 的一部分
+            if (remaining[i + 1] !== '_' && (i === 0 || remaining[i - 1] !== '_')) {
+              italicStart2 = i;
+              break;
+            }
+          }
+        }
+
+        // 找到最近的标记位置
+        const positions = [
+          { type: 'image', pos: imageStart },
+          { type: 'link', pos: linkStart },
+          { type: 'bold', pos: boldStart },
+          { type: 'bold2', pos: boldStart2 },
+          { type: 'italic', pos: italicStart },
+          { type: 'italic2', pos: italicStart2 },
+          { type: 'code', pos: codeStart },
+          { type: 'htmlLink', pos: htmlLinkStart }
+        ].filter(p => p.pos !== -1).sort((a, b) => a.pos - b.pos);
+
+        if (positions.length === 0) {
+          // 没有特殊标记，剩余全是普通文本
+          if (remaining.length > 0) {
+            parts.push({ type: 'text', text: remaining, bold: false });
+          }
+          break;
+        }
+
+        const nearest = positions[0];
+
+        // 添加标记前的普通文本
+        if (nearest.pos > 0) {
+          parts.push({ type: 'text', text: remaining.slice(0, nearest.pos), bold: false });
+        }
+
+        if (nearest.type === 'image') {
+          // 解析图片 ![alt](url)
+          const imageMatch = this.parseImage(remaining.slice(nearest.pos));
+          if (imageMatch) {
+            parts.push({
+              type: 'image',
+              alt: imageMatch.alt,
+              src: imageMatch.src,
+              bold: false
+            });
+            remaining = remaining.slice(nearest.pos + imageMatch.length);
+          } else {
+            // 不是有效图片，当作普通文本
+            parts.push({ type: 'text', text: '!', bold: false });
+            remaining = remaining.slice(nearest.pos + 1);
+          }
+        } else if (nearest.type === 'link') {
+          // 解析链接 [text](url)
+          // 需要排除图片的情况（![...）
+          if (remaining.charAt(nearest.pos) === '[' && nearest.pos > 0 && remaining.charAt(nearest.pos - 1) === '!') {
+            // 这是图片的一部分，跳过
+            parts.push({ type: 'text', text: '[', bold: false });
+            remaining = remaining.slice(nearest.pos + 1);
+          } else {
+            const linkMatch = this.parseLink(remaining.slice(nearest.pos));
+            if (linkMatch) {
+              parts.push({
+                type: 'link',
+                text: linkMatch.text,
+                url: linkMatch.url,
+                bold: false
+              });
+              remaining = remaining.slice(nearest.pos + linkMatch.length);
+            } else {
+              // 不是有效链接，当作普通文本
+              parts.push({ type: 'text', text: '[', bold: false });
+              remaining = remaining.slice(nearest.pos + 1);
+            }
+          }
+        } else if (nearest.type === 'bold' || nearest.type === 'bold2') {
+          const marker = nearest.type === 'bold' ? '**' : '__';
+          const endPos = remaining.indexOf(marker, nearest.pos + 2);
+          if (endPos !== -1) {
+            const boldText = remaining.slice(nearest.pos + 2, endPos);
+            parts.push({ type: 'text', text: boldText, bold: true });
+            remaining = remaining.slice(endPos + 2);
+          } else {
+            // 没有闭合，当作普通文本
+            parts.push({ type: 'text', text: marker, bold: false });
+            remaining = remaining.slice(nearest.pos + 2);
+          }
+        } else if (nearest.type === 'italic' || nearest.type === 'italic2') {
+          // 斜体：单个 * 或 _
+          const marker = nearest.type === 'italic' ? '*' : '_';
+          // 查找闭合的斜体标记（同样需要是单独的 * 或 _）
+          let endPos = -1;
+          for (let i = nearest.pos + 1; i < remaining.length; i++) {
+            if (remaining[i] === marker) {
+              // 确保不是 ** 或 __ 的一部分
+              if (remaining[i + 1] !== marker && remaining[i - 1] !== marker) {
+                endPos = i;
+                break;
+              }
+            }
+          }
+          if (endPos !== -1) {
+            const italicText = remaining.slice(nearest.pos + 1, endPos);
+            parts.push({ type: 'text', text: italicText, italic: true, bold: false });
+            remaining = remaining.slice(endPos + 1);
+          } else {
+            // 没有闭合，当作普通文本
+            parts.push({ type: 'text', text: marker, bold: false });
+            remaining = remaining.slice(nearest.pos + 1);
+          }
+        } else if (nearest.type === 'code') {
+          const endPos = remaining.indexOf('`', nearest.pos + 1);
+          if (endPos !== -1) {
+            const codeText = remaining.slice(nearest.pos + 1, endPos);
+            parts.push({ type: 'code', text: codeText, bold: false });
+            remaining = remaining.slice(endPos + 1);
+          } else {
+            // 没有闭合，当作普通文本
+            parts.push({ type: 'text', text: '`', bold: false });
+            remaining = remaining.slice(nearest.pos + 1);
+          }
+        } else if (nearest.type === 'htmlLink') {
+          // 解析 HTML <a> 标签
+          const htmlLinkMatch = this.parseHtmlLink(remaining.slice(nearest.pos));
+          if (htmlLinkMatch) {
+            parts.push({
+              type: 'link',
+              text: htmlLinkMatch.text,
+              url: htmlLinkMatch.url,
+              bold: false
+            });
+            remaining = remaining.slice(nearest.pos + htmlLinkMatch.length);
+          } else {
+            // 不是有效的 HTML 链接，当作普通文本
+            parts.push({ type: 'text', text: '<a ', bold: false });
+            remaining = remaining.slice(nearest.pos + 3);
+          }
+        }
+      }
+
+      return parts.length > 0 ? parts : [{ type: 'text', text: text, bold: false }];
+    },
+
+    /**
+     * 解析链接 [text](url)
+     * 返回 { text, url, length } 或 null
+     */
+    parseLink(str) {
+      if (!str.startsWith('[')) return null;
+
+      // 找到 ]( 的位置
+      const closeBracketIdx = str.indexOf('](');
+      if (closeBracketIdx === -1) return null;
+
+      const linkText = str.slice(1, closeBracketIdx);
+
+      // 从 ]( 后面开始找匹配的 )
+      // 需要处理 URL 中可能包含的括号
+      let parenCount = 0;
+      let urlEnd = -1;
+      for (let i = closeBracketIdx + 2; i < str.length; i++) {
+        if (str[i] === '(') parenCount++;
+        else if (str[i] === ')') {
+          if (parenCount === 0) {
+            urlEnd = i;
+            break;
+          }
+          parenCount--;
+        }
+      }
+
+      if (urlEnd === -1) return null;
+
+      const url = str.slice(closeBracketIdx + 2, urlEnd);
+
+      return {
+        text: linkText,
+        url: url,
+        length: urlEnd + 1
+      };
+    },
+
+    /**
+     * 解析图片 ![alt](url)
+     * 返回 { alt, src, length } 或 null
+     */
+    parseImage(str) {
+      if (!str.startsWith('![')) return null;
+
+      // 找到 ]( 的位置
+      const closeBracketIdx = str.indexOf('](');
+      if (closeBracketIdx === -1) return null;
+
+      const altText = str.slice(2, closeBracketIdx);
+
+      // 从 ]( 后面开始找匹配的 )
+      let parenCount = 0;
+      let urlEnd = -1;
+      for (let i = closeBracketIdx + 2; i < str.length; i++) {
+        if (str[i] === '(') parenCount++;
+        else if (str[i] === ')') {
+          if (parenCount === 0) {
+            urlEnd = i;
+            break;
+          }
+          parenCount--;
+        }
+      }
+
+      if (urlEnd === -1) return null;
+
+      const src = str.slice(closeBracketIdx + 2, urlEnd);
+
+      return {
+        alt: altText,
+        src: src,
+        length: urlEnd + 1
+      };
+    },
+
+    /**
+     * 解析 HTML <a> 标签
+     * 支持格式: <a href="url">text</a> 或 <a href="url" >text</a>
+     * 返回 { text, url, length } 或 null
+     */
+    parseHtmlLink(str) {
+      if (!str.startsWith('<a ')) return null;
+
+      // 查找 href 属性
+      // 支持 href="..." 或 href='...'
+      const hrefMatch = str.match(/<a\s+[^>]*href\s*=\s*["']([^"']+)["'][^>]*>/i);
+      if (!hrefMatch) return null;
+
+      const url = hrefMatch[1];
+      const openTagEnd = str.indexOf('>', hrefMatch.index || 0);
+      if (openTagEnd === -1) return null;
+
+      // 查找 </a> 结束标签
+      const closeTagStart = str.indexOf('</a>', openTagEnd);
+      if (closeTagStart === -1) return null;
+
+      // 提取链接文本
+      const linkText = str.slice(openTagEnd + 1, closeTagStart);
+
+      return {
+        text: linkText,
+        url: url,
+        length: closeTagStart + 4  // 包含 </a> 的长度
+      };
+    },
+
+    /**
+     * 预处理链接：修复跨行的链接格式
+     */
+    preprocessLinks(content) {
+      // 处理字面的 \n 字符串（反斜杠+n）转换为实际换行符
+      // 这在某些 API 返回的数据中会出现
+      let result = content.replace(/\\n/g, '\n');
+
+      // 修复 [text]\n(url) 或 [text]\r\n(url) 格式
+      result = result.replace(/\]\s*[\r\n]+\s*\(/g, '](');
+
+      // 处理 URL 内部的换行
+      result = result.replace(/\[([^\]]+)\]\(([^)]*)\)/g, (match, text, url) => {
+        const cleanUrl = url.replace(/[\r\n\s]+/g, '');
+        return `[${text}](${cleanUrl})`;
+      });
+
+      return result;
+    },
+
+    /**
+     * 切换思考过程显示
+     */
+    toggleThinking() {
+      this.setData({
+        showThinking: !this.data.showThinking
+      });
+    },
+
+    /**
+     * 预览图片
+     */
+    onPreviewImage(e) {
+      const url = e.currentTarget.dataset.url;
+      wx.previewImage({
+        current: url,
+        urls: [url]
+      });
+    },
+
+    /**
+     * 图片加载完成
+     * 通知父组件进行滚动调整
+     */
+    onImageLoad(e) {
+      this.triggerEvent('imageload', { url: e.currentTarget.dataset.url });
+    },
+
+    /**
+     * 打开文件
+     */
+    onOpenFile(e) {
+      const file = e.currentTarget.dataset.file;
+      wx.showToast({
+        title: '暂不支持打开文件',
+        icon: 'none'
+      });
+    },
+
+    /**
+     * 打开链接
+     */
+    onOpenLink(e) {
+      const url = e.currentTarget.dataset.url;
+
+      // 判断是否是文档类型（PDF、Word、Excel等）
+      const docExtensions = ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx'];
+      const isDocument = docExtensions.some(ext => url.toLowerCase().includes(ext));
+
+      if (isDocument) {
+        // 下载并打开文档
+        wx.showLoading({ title: '正在打开...' });
+        wx.downloadFile({
+          url: url,
+          success: (res) => {
+            wx.hideLoading();
+            if (res.statusCode === 200) {
+              wx.openDocument({
+                filePath: res.tempFilePath,
+                showMenu: true,
+                fail: (err) => {
+                  console.error('打开文档失败:', err);
+                  this.copyLinkFallback(url);
+                }
+              });
+            } else {
+              this.copyLinkFallback(url);
+            }
+          },
+          fail: (err) => {
+            wx.hideLoading();
+            console.error('下载文档失败:', err);
+            this.copyLinkFallback(url);
+          }
+        });
+      } else {
+        // 非文档链接，复制到剪贴板
+        this.copyLinkFallback(url);
+      }
+    },
+
+    /**
+     * 复制链接（降级方案）
+     */
+    copyLinkFallback(url) {
+      wx.setClipboardData({
+        data: url,
+        success: () => {
+          wx.showToast({
+            title: '链接已复制',
+            icon: 'success'
+          });
+        }
+      });
+    },
+
+    /**
+     * 复制代码
+     */
+    onCopyCode(e) {
+      const code = e.currentTarget.dataset.code;
+      wx.setClipboardData({
+        data: code,
+        success: () => {
+          wx.showToast({
+            title: '代码已复制',
+            icon: 'success'
+          });
+        }
+      });
+    },
+
+    /**
+     * 复制消息内容
+     */
+    onCopy() {
+      wx.setClipboardData({
+        data: this.properties.message.content,
+        success: () => {
+          wx.showToast({
+            title: '已复制',
+            icon: 'success'
+          });
+        }
+      });
+    },
+
+    /**
+     * 播放语音
+     */
+    onPlayVoice(e) {
+      const id = e.currentTarget.dataset.id;
+      const message = this.properties.message;
+      this.triggerEvent('playvoice', { id, content: message.content });
+    },
+
+    /**
+     * 重新生成
+     */
+    onRegenerate() {
+      this.triggerEvent('regenerate', { message: this.properties.message });
+    },
+
+    /**
+     * 编辑消息
+     */
+    onEdit() {
+      this.triggerEvent('edit', { message: this.properties.message });
+    },
+
+    /**
+     * 点击快捷回复
+     */
+    onQuickReply(e) {
+      const option = e.currentTarget.dataset.option;
+      if (option) {
+        this.triggerEvent('quickreply', { content: option });
+      }
+    }
+  }
+});