@templmf/temp-solf-lmf 0.0.53 → 0.0.55

package/guanwang/src/chat-sdk/features/markdown/useMarkdown.js

@@ -0,0 +1,724 @@
+/**
+ * useMarkdown.js  v3
+ *
+ * 核心改动：废弃全局 _artifactStore 注入模式
+ * renderMarkdown / createStreamingParser 直接接收 renderContext 参数：
+ *   { messageId, artifactStore }
+ * buildCodeBlock 通过函数参数拿到上下文，多实例完全隔离，无竞争。
+ */
+import { ref } from 'vue'
+import { marked } from 'marked'
+import DOMPurify from 'dompurify'
+
+// ─────────────────────────────────────────────────────────────────
+// Shiki 单例（全局共享，只初始化一次）
+// ─────────────────────────────────────────────────────────────────
+let _hl        = null
+let _hlLoading = false
+export const shikiReady = ref(false)
+
+const SUPPORTED_LANGS = [
+  'javascript','typescript','vue','html','css','scss',
+  'json','bash','shell','python','java','go','rust',
+  'markdown','yaml','toml','sql','graphql','xml','jsx','tsx',
+]
+
+// Shiki 初始化 Promise（单例，并发调用共享同一个 Promise，避免 setInterval 泄漏）
+let _hlPromise = null
+
+async function getShiki() {
+  if (_hl) return _hl
+  if (_hlPromise) return _hlPromise  // 并发调用等同一个 Promise
+  _hlPromise = (async () => {
+    try {
+      const { createHighlighter } = await import('shiki')
+      _hl = await createHighlighter({ themes: ['one-dark-pro','github-light'], langs: SUPPORTED_LANGS })
+      shikiReady.value = true
+    } catch (e) {
+      console.warn('[shiki] init failed', e)
+    } finally {
+      _hlPromise = null  // 无论成功失败都重置，下次可重试
+    }
+    return _hl
+  })()
+  return _hlPromise
+}
+getShiki() // 预热
+
+function currentTheme() {
+  return document.documentElement.getAttribute('data-theme') === 'light'
+    ? 'github-light' : 'one-dark-pro'
+}
+
+function highlightCode(code, lang) {
+  const plainHtml = `<pre class="shiki-pre"><code>${escapeHtml(code)}</code></pre>`
+  if (!_hl) return plainHtml
+  // 语言不在支持列表时直接走 plain fallback，避免 Shiki 内部用 'text' 语言输出空内容
+  if (!_hl.getLoadedLanguages().includes(lang)) return plainHtml
+  try { return _hl.codeToHtml(code, { lang, theme: currentTheme() }) }
+  catch { return plainHtml }
+}
+
+// ─────────────────────────────────────────────────────────────────
+// KaTeX
+// ─────────────────────────────────────────────────────────────────
+function renderKatex(tex, display) {
+  try { return window.katex?.renderToString(tex, { displayMode: display, throwOnError: false }) ?? tex }
+  catch { return tex }
+}
+
+// ─────────────────────────────────────────────────────────────────
+// 工具
+// ─────────────────────────────────────────────────────────────────
+function escapeHtml(s) {
+  return (s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+          .replace(/"/g,'&quot;').replace(/'/g,'&#39;')
+}
+
+let _uid = 0
+function uid() { return `mb${++_uid}` }
+
+// 全局代码块内容注册表（供 handleCodeAction 复制/预览用）
+// 用 messageId 分组，组件卸载时调用 clearBlocksByMessage 清理，防止无限堆积
+export const pendingBlocks = new Map()
+
+/**
+ * 清理指定 messageId 下的所有代码块缓存
+ * 由 MessageBubble onUnmounted 调用
+ */
+export function clearBlocksByMessage(messageId) {
+  if (!messageId) return
+  for (const [key, val] of pendingBlocks) {
+    if (val.messageId === messageId) pendingBlocks.delete(key)
+  }
+}
+
+// 流式 artifact Loading 卡片里显示的语言标签（简短版）
+const LANG_LABEL_INLINE = {
+  vue:'Vue SFC', html:'HTML', jsx:'React JSX', tsx:'React TSX',
+  javascript:'JavaScript', js:'JavaScript', typescript:'TypeScript', ts:'TypeScript',
+  python:'Python', go:'Go', rust:'Rust', java:'Java', kotlin:'Kotlin', swift:'Swift',
+  css:'CSS', scss:'SCSS', bash:'Shell', sh:'Shell',
+  json:'JSON', yaml:'YAML', toml:'TOML', sql:'SQL',
+  mermaid:'Mermaid', svg:'SVG', math:'Math', latex:'LaTeX', markdown:'Markdown',
+}
+
+// ─────────────────────────────────────────────────────────────────
+// SVG 图标常量
+// ─────────────────────────────────────────────────────────────────
+const SVG_COPY = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`
+const SVG_EYE  = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>`
+const SVG_ZOOM = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`
+const PREVIEWABLE = new Set(['html','vue','jsx','tsx','javascript','js','css','svg','markdown','md'])
+
+// ─────────────────────────────────────────────────────────────────
+// buildCodeBlock：接收渲染上下文，完全隔离
+// ctx = { messageId, artifactStore, blockIndex }
+// ─────────────────────────────────────────────────────────────────
+function buildCodeBlock(lang, code, id, isStreaming = false, ctx = null) {
+  const displayLang = lang || 'text'
+
+  // 改动4：code 为空时不渲染任何代码块
+  if (!code || !code.trim()) return ''
+
+  pendingBlocks.set(id, { lang: displayLang, code, messageId: ctx?.messageId })
+
+  // ── Artifact 路由 ──────────────────────────────────────────────
+  const store = ctx?.artifactStore
+  const msgId = ctx?.messageId
+  if (store && msgId) {
+    const forceArtifact = ctx?.isArtifact   // AI 显式标记了 [artifact]
+    const autoArtifact  = store.shouldBeArtifact?.(lang, code)  // 兜底规则
+    if (forceArtifact || autoArtifact) {
+      const artId = store.register({ messageId: msgId, lang: displayLang, code, index: ctx.blockIndex || 0 })
+      pendingBlocks.set(id, { lang: displayLang, code, artId, messageId: ctx?.messageId })
+      return `<div class="artifact-placeholder" data-art-id="${artId}" data-block-id="${id}"></div>`
+    }
+  }
+
+  // ── 特殊块类型 ─────────────────────────────────────────────────
+  if (lang === 'mermaid') {
+    return `<div class="code-wrapper mermaid-wrapper" id="${id}">
+      <div class="cb-actions"><span class="cb-lang">mermaid</span>
+        <div style="display:flex;gap:4px"><button class="cb-btn" data-action="zoom-mermaid" data-id="${id}">${SVG_ZOOM} 放大</button><button class="cb-btn" data-action="copy" data-id="${id}">${SVG_COPY} 复制</button></div>
+      </div>
+      <div class="mermaid-container">
+        <div class="mermaid-chart mermaid-pending" data-mermaid="${encodeURIComponent(code)}">
+          <div class="mermaid-placeholder"><span class="mermaid-placeholder__dot"/><span class="mermaid-placeholder__dot"/><span class="mermaid-placeholder__dot"/></div>
+        </div>
+      </div>
+    </div>`
+  }
+
+  if (lang === 'math' || lang === 'latex') {
+    return `<div class="code-wrapper math-wrapper" id="${id}">
+      <div class="cb-actions"><span class="cb-lang">math</span></div>
+      <div class="math-display">${renderKatex(code, true)}</div>
+    </div>`
+  }
+
+  // ── 普通代码块 ─────────────────────────────────────────────────
+  const previewBtn = PREVIEWABLE.has(lang) && !ctx?.noPreview
+    ? `<button class="cb-btn" data-action="preview" data-id="${id}">${SVG_EYE} 预览</button>` : ''
+  const encodedCode = btoa(unescape(encodeURIComponent(code)))
+  const shikiHtml   = `<div class="shiki-live" data-id="${id}" data-lang="${lang}" data-code="${encodedCode}">${highlightCode(code, lang)}</div>`
+
+  return `<div class="code-wrapper${isStreaming ? ' code-streaming' : ''}" id="${id}">
+    <div class="cb-actions">
+      <span class="cb-lang">${displayLang}</span>
+      <div style="display:flex;gap:4px">${previewBtn}
+        <button class="cb-btn" data-action="copy" data-id="${id}">${SVG_COPY} 复制</button>
+      </div>
+    </div>
+    ${shikiHtml}
+  </div>`
+}
+
+// ─────────────────────────────────────────────────────────────────
+// makeRenderer：每次渲染时创建，携带当次的上下文
+// ─────────────────────────────────────────────────────────────────
+function makeRenderer(ctx = null) {
+  const r = new marked.Renderer()
+  let blockIndex = 0
+  r.code = ({ text, lang }) => {
+    blockIndex++
+    return buildCodeBlock(lang || 'text', text || '', uid(), false, ctx ? { ...ctx, blockIndex } : null)
+  }
+  r.codespan = ({ text }) => `<code class="inline-code">${escapeHtml(text)}</code>`
+  r.image    = (href, title, text) =>
+    `<img src="${href||''}" alt="${escapeHtml(text||'')}" title="${escapeHtml(title||'')}" loading="lazy" style="max-width:100%;border-radius:8px;margin:8px 0"/>`
+  r.link = (href, title, text) =>
+    `<a href="${href||''}" target="_blank" rel="noopener noreferrer">${text||href||''}</a>`
+  return r
+}
+
+// ─────────────────────────────────────────────────────────────────
+// LaTeX 预处理
+// ─────────────────────────────────────────────────────────────────
+function preprocessLatex(md) {
+  md = md.replace(/\$\$([^$]+?)\$\$/gs, (_, t) => `\n\`\`\`math\n${t.trim()}\n\`\`\`\n`)
+  md = md.replace(/(?<!\$)\$(?!\$)([^$\n]+?)\$(?!\$)/g, (_, t) => {
+    try { return window.katex?.renderToString(t, { displayMode: false, throwOnError: false }) ?? `$${t}$` }
+    catch { return `$${t}$` }
+  })
+  return md
+}
+
+// ─────────────────────────────────────────────────────────────────
+// DOMPurify 配置
+// ─────────────────────────────────────────────────────────────────
+const PURIFY_OPTS = {
+  ADD_TAGS: ['math','semantics','mrow','mi','mo','mn','msup','msub','mfrac','annotation'],
+  ADD_ATTR: ['data-action','data-id','data-lang','data-mermaid','data-code','data-art-id','data-block-id','xmlns','encoding'],
+  FORCE_BODY: true,
+}
+
+// ─────────────────────────────────────────────────────────────────
+// StreamingMarkdownParser
+// ─────────────────────────────────────────────────────────────────
+class StreamingMarkdownParser {
+  constructor(ctx = null) {
+    this.ctx = ctx  // { messageId, artifactStore }
+    this.reset()
+  }
+
+  reset() {
+    this.inCode      = false
+    this.codeLang    = ''
+    this.isArtifact  = false
+    this.codeLines   = []
+    this.codeBlockId = null
+    this.fenceChar   = '`'
+    this.fenceLen    = 3
+    this.innerDepth  = 0   // 内层未关闭围栏计数
+    this._streamArtIdx = 0
+  }
+
+  parse(content) {
+    const lines = content.split('\n')
+    let i = 0
+    const closedMdChunks = []
+    let streamingCodeLang  = null
+    let streamingCodeLines = null
+    let tailText = ''
+
+    while (i < lines.length) {
+      const line = lines[i]
+      if (!this.inCode) {
+        const fence = line.match(/^(`{3,}|~{3,})(.*)/)
+        if (fence) {
+          if (tailText) { closedMdChunks.push(tailText); tailText = '' }
+          const infoLine = fence[2].trim()
+          const parts    = infoLine.split(/\s+/)
+          this.inCode      = true
+          this.fenceChar   = fence[1][0]
+          this.fenceLen    = fence[1].length
+          this.codeLang    = parts[0] || 'text'
+          this.isArtifact  = parts.includes('[artifact]')
+          this.codeLines   = []
+          this.innerDepth  = 0
+          i++; continue
+        }
+        tailText += (tailText ? '\n' : '') + line
+      } else {
+        // 精确匹配外层关闭围栏 + innerDepth 追踪内层代码块
+        // 防止 markdown 等语言内部的嵌套围栏行被误判为外层关闭
+        const closeRe    = new RegExp(`^${this.fenceChar}{${this.fenceLen}}\\s*$`)
+        const innerOpenM = line.match(new RegExp(`^${this.fenceChar}{3,}(\\S+)`))
+        if (closeRe.test(line)) {
+          if (this.innerDepth > 0) {
+            // 内层代码块的关闭行，不是外层关闭，继续收集
+            this.innerDepth--
+            this.codeLines.push(line)
+          } else {
+            // 真正的外层关闭
+            const info = this.isArtifact ? `${this.codeLang} [artifact]` : this.codeLang
+            closedMdChunks.push(`\`\`\`${info}\n${this.codeLines.join('\n')}\n\`\`\``)
+            this.inCode = false; this.codeLang = ''; this.isArtifact = false
+            this.codeLines = []; this.fenceLen = 3; this.fenceChar = '`'
+            this.innerDepth = 0
+          }
+          i++; continue
+        } else if (innerOpenM) {
+          // 内层代码块开启（带语言标识符），计数加一
+          this.innerDepth++
+        }
+        this.codeLines.push(line)
+      }
+      i++
+    }
+
+    if (this.inCode) {
+      streamingCodeLang  = this.codeLang
+      streamingCodeLines = [...this.codeLines]
+    }
+
+    // 渲染已闭合部分：使用 safeMarkdownParse，彻底避免 marked 被嵌套围栏截断
+    let closedHtml = ''
+    if (closedMdChunks.length > 0) {
+      closedHtml = safeMarkdownParse(closedMdChunks.join('\n\n'), this.ctx)
+    }
+
+    // 流式尾部
+    let tailHtml = ''
+    if (streamingCodeLang !== null) {
+      const code = streamingCodeLines.join('\n')
+      if (!this.codeBlockId) this.codeBlockId = uid()
+      const id = this.codeBlockId
+      pendingBlocks.set(id, { lang: streamingCodeLang, code, messageId: this.ctx?.messageId })
+
+      const store = this.ctx?.artifactStore
+      const msgId = this.ctx?.messageId
+      // isArtifact：AI 在 infoLine 里显式声明了 [artifact]，或由 shouldBeArtifact 兜底判断
+      const isArtifact = this.isArtifact || store?.shouldBeArtifact?.(streamingCodeLang, code)
+
+      if (store && msgId && isArtifact) {
+        if (!this._streamArtIdx) this._streamArtIdx = 1
+        const artId = store.preRegister?.({
+          messageId: msgId,
+          lang: streamingCodeLang,
+          index: this._streamArtIdx,
+        }) || store.register({
+          messageId: msgId,
+          lang: streamingCodeLang,
+          code,
+          index: this._streamArtIdx,
+        })
+
+        if (code) {
+          store.register({ messageId: msgId, lang: streamingCodeLang, code, index: this._streamArtIdx })
+          store.updateCode?.(artId, code)
+        }
+
+        const langLabel = LANG_LABEL_INLINE[streamingCodeLang] || streamingCodeLang
+        const lineCount = code ? code.split('\n').length : 0
+        const lineTip   = lineCount > 0 ? `· ${lineCount} 行` : ''
+        tailHtml = `<div class="artifact-gen-hint">
+          <span class="artifact-gen-hint__dot"></span>
+          <span class="artifact-gen-hint__text">正在生成 ${langLabel} 文件 ${lineTip}</span>
+        </div>`
+      } else if (!code.trim()) {
+        tailHtml = ''
+      } else {
+        tailHtml = `<div class="code-wrapper code-streaming" id="${id}">
+          <div class="cb-actions">
+            <span class="cb-lang">${streamingCodeLang}</span>
+            <div class="cb-streaming-badge"><span class="cb-dot"></span>输出中</div>
+          </div>
+          <div class="shiki-live" data-id="${id}" data-lang="${streamingCodeLang}">${highlightCode(code, streamingCodeLang)}</div>
+        </div>`
+      }
+    } else if (tailText.trim()) {
+      tailHtml = renderInlineSafe(tailText)
+    }
+
+    return { closedHtml, tailHtml }
+  }
+}
+
+function renderInlineSafe(text) {
+  // 先提取行内反引号内容，再 escape，最后还原，避免路径字符串被误处理
+  const inlines = []
+  const protected_ = text.replace(/`([^`\n]+?)`/g, (_, t) => {
+    inlines.push(t)
+    return `\x00IL${inlines.length - 1}\x00`
+  })
+  let html = escapeHtml(protected_)
+  html = html.replace(/\x00IL(\d+)\x00/g, (_, i) =>
+    `<code class="inline-code">${escapeHtml(inlines[+i])}</code>`
+  )
+  html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+  html = html.replace(/\*(.+?)\*/g, '<em>$1</em>')
+  html = html.replace(/\n/g, '<br>')
+  return `<p class="streaming-tail">${html}</p>`
+}
+
+// ─────────────────────────────────────────────────────────────────
+// safeMarkdownParse
+// 在交给 marked 之前，先把所有代码围栏块提取为 placeholder，
+// 渲染后再把 placeholder 替换为 buildCodeBlock 的输出。
+// 这样 marked 永远看不到嵌套围栏，彻底解决内容截断问题。
+// ─────────────────────────────────────────────────────────────────
+function safeMarkdownParse(content, ctx) {
+  const blocks = []
+
+  // ── 用逐行状态机提取代码围栏块 ──
+  // CommonMark：inCode 状态下所有行都是代码内容，只认精确匹配的外层关闭行，不做嵌套计数
+  const lines = content.split('\n')
+  let inCode    = false
+  let fenceChar = '`'
+  let fenceLen  = 3
+  let codeLang  = ''
+  let isArtifact = false
+  let codeLines  = []
+  let innerDepth = 0   // 内层未关闭围栏计数
+  const outLines = []
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    if (!inCode) {
+      const m = line.match(/^(`{3,}|~{3,})(.*)/)
+      if (m) {
+        const infoLine = m[2].trim()
+        const parts    = infoLine.split(/\s+/)
+        inCode      = true
+        fenceChar   = m[1][0]
+        fenceLen    = m[1].length
+        codeLang    = parts[0] || 'text'
+        isArtifact  = parts.includes('[artifact]')
+        codeLines   = []
+        innerDepth  = 0
+      } else {
+        outLines.push(line)
+      }
+    } else {
+      // 精确匹配外层关闭围栏 + innerDepth 追踪内层代码块
+      // 防止 markdown 等语言内部的嵌套围栏行被误判为外层关闭
+      const closeRe    = new RegExp(`^${fenceChar}{${fenceLen}}\\s*$`)
+      const innerOpenM = line.match(new RegExp(`^${fenceChar}{3,}(\\S+)`))
+      if (closeRe.test(line)) {
+        if (innerDepth > 0) {
+          // 内层代码块的关闭行，depth-- 后继续收集
+          innerDepth--
+          codeLines.push(line)
+        } else {
+          // 真正的外层关闭
+          const ph = `\x00CODEBLOCK_${blocks.length}\x00`
+          blocks.push({ lang: codeLang, code: codeLines.join('\n'), isArtifact })
+          outLines.push(ph)
+          inCode = false; codeLang = ''; isArtifact = false; codeLines = []; innerDepth = 0
+        }
+      } else {
+        if (innerOpenM) innerDepth++  // 内层代码块开启（带语言标识符），计数加一
+        codeLines.push(line)
+      }
+    }
+  }
+  // 未闭合的围栏（如流式截断）：同样作为代码块处理，而不是丢成普通文本
+  // 这样 svg/vue/html 等语言仍能正确路由到面板，截断的代码也能显示代码块 UI
+  if (inCode && codeLines.length > 0) {
+    const ph = `\x00CODEBLOCK_${blocks.length}\x00`
+    blocks.push({ lang: codeLang, code: codeLines.join('\n'), isArtifact })
+    outLines.push(ph)
+  }
+
+  const extracted = outLines.join('\n')
+
+  // ── 提前保护行内反引号，防止 gfm 模式下路径字符串被误解析 ──
+  const inlineCodes = []
+  const protectedContent = extracted.replace(/`([^`\n]+?)`/g, (_, text) => {
+    const ph = `\x00INLINE_${inlineCodes.length}\x00`
+    inlineCodes.push(text)
+    return ph
+  })
+
+  // 对非代码内容做 LaTeX 预处理，然后交给 marked
+  marked.use({ renderer: makeRenderer(null), gfm: true, breaks: true })
+  let html = marked.parse(preprocessLatex(protectedContent))
+
+  // 还原行内代码占位符
+  if (inlineCodes.length > 0) {
+    html = html.replace(/\x00INLINE_(\d+)\x00/g, (_, idx) =>
+      `<code class="inline-code">${escapeHtml(inlineCodes[+idx])}</code>`
+    )
+  }
+
+  // 把 placeholder 替换为真实代码块 HTML（携带 ctx）
+  if (blocks.length > 0) {
+    let blockIndex = 0
+    // placeholder 可能被 marked 包在 <p> 里，先拆出来再替换
+    html = html.replace(/<p>(\x00CODEBLOCK_\d+\x00)<\/p>/g, '$1')
+    html = html.replace(/\x00CODEBLOCK_(\d+)\x00/g, (_, idx) => {
+      const { lang, code, isArtifact } = blocks[+idx]
+      blockIndex++
+      return buildCodeBlock(lang, code, uid(), false, ctx ? { ...ctx, blockIndex, isArtifact } : null)
+    })
+  }
+
+  return DOMPurify.sanitize(html, PURIFY_OPTS)
+}
+
+// ─────────────────────────────────────────────────────────────────
+// 对外 API
+// ─────────────────────────────────────────────────────────────────
+
+/**
+ * 全量渲染
+ * @param {string} content
+ * @param {object} ctx - { messageId, artifactStore } 可选
+ */
+export function renderMarkdown(content, ctx = null) {
+  if (!content) return ''
+  return safeMarkdownParse(content, ctx)
+}
+
+/**
+ * 创建流式解析器（每条消息独享，ctx 在创建时绑定）
+ * @param {object} ctx - { messageId, artifactStore }
+ */
+export function createStreamingParser(ctx = null) {
+  const parser = new StreamingMarkdownParser(ctx)
+  return {
+    parse(content)   { parser.reset(); return parser.parse(content) },
+    reset()          { parser.reset() },
+    updateCtx(newCtx){ parser.ctx = newCtx },
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────
+// sanitizeMermaidCode：预处理 mermaid 代码
+// 把节点标签文本（[] {} 内）里的圆括号转为 HTML 实体，
+// 避免 AI 生成的 "(备注文字)" 被 mermaid 误解析为节点语法导致 Parse error
+// ─────────────────────────────────────────────────────────────────
+export function sanitizeMermaidCode(code) {
+  const lines = code.split('\n')
+  return lines.map(line => {
+    // 跳过注释行和图表类型声明行，不做处理
+    if (/^\s*%%/.test(line) || /^\s*(flowchart|graph|sequenceDiagram|classDiagram|stateDiagram|gantt|pie|gitGraph|erDiagram|journey|mindmap|timeline|quadrantChart|xychart|block|architecture|requirementDiagram)\b/.test(line)) {
+      return line
+    }
+    // [] 内文本的 () 转为 HTML 实体
+    return line
+      .replace(/\[([^\]]*)\]/g, (_, inner) =>
+        '[' + inner.replace(/\(/g, '&#40;').replace(/\)/g, '&#41;') + ']'
+      )
+      .replace(/\{([^}]*)\}/g, (_, inner) =>
+        '{' + inner.replace(/\(/g, '&#40;').replace(/\)/g, '&#41;') + '}'
+      )
+  }).join('\n')
+}
+
+// ─────────────────────────────────────────────────────────────────
+// postRender：Shiki + Mermaid
+// ─────────────────────────────────────────────────────────────────
+export async function postRender(el, { skipMermaid = false } = {}) {
+  if (!el) return
+  const tasks = []
+
+  const shikiEls = el.querySelectorAll('.shiki-live[data-id], .shiki-pre[data-id]')
+  if (shikiEls.length > 0) {
+    tasks.push(getShiki().then(hl => {
+      if (!hl) return
+      shikiEls.forEach(node => {
+        const id   = node.dataset.id
+        const lang = node.dataset.lang || 'text'
+        const stored = pendingBlocks.get(id)
+        let code
+        if (stored?.code !== undefined) {
+          code = stored.code
+        } else if (node.dataset.code) {
+          try { code = decodeURIComponent(escape(atob(node.dataset.code))) } catch { code = node.textContent }
+        } else {
+          code = node.querySelector('code')?.textContent ?? node.textContent
+        }
+        // 语言不支持时直接降级，不传 'text' 给 Shiki（避免部分版本输出空内容）
+        if (!hl.getLoadedLanguages().includes(lang)) {
+          const fallback = document.createElement('pre')
+          fallback.className = 'shiki-pre'
+          fallback.style.cssText = 'margin:0;border-radius:0 0 8px 8px;font-size:13px;line-height:1.6;overflow-x:auto;padding:14px 16px'
+          fallback.innerHTML = `<code>${escapeHtml(code)}</code>`
+          node.replaceWith(fallback)
+          return
+        }
+        const safeLang = lang
+        // 始终尝试高亮，失败或结果为空时降级为带样式的 <pre>，绝不留白
+        const fallbackHtml = `<pre class="shiki-pre" style="margin:0;border-radius:0 0 8px 8px;font-size:13px;line-height:1.6;overflow-x:auto;padding:14px 16px"><code>${escapeHtml(code)}</code></pre>`
+        try {
+          const div  = document.createElement('div')
+          div.innerHTML = hl.codeToHtml(code, { lang: safeLang, theme: currentTheme() })
+          const shikiNode = div.firstElementChild
+          if (shikiNode) {
+            shikiNode.style.cssText = 'margin:0;border-radius:0 0 8px 8px;font-size:13px;line-height:1.6;overflow-x:auto'
+            node.replaceWith(shikiNode)
+          } else {
+            // Shiki 返回空节点，用 fallback
+            const fallback = document.createElement('div')
+            fallback.innerHTML = fallbackHtml
+            node.replaceWith(fallback.firstElementChild)
+          }
+        } catch {
+          // Shiki 抛异常，用 fallback
+          const fallback = document.createElement('div')
+          fallback.innerHTML = fallbackHtml
+          node.replaceWith(fallback.firstElementChild)
+        }
+      })
+    }))
+  }
+
+  const mermaidEls = el.querySelectorAll('.mermaid-chart[data-mermaid]:not([data-rendered])')
+  if (mermaidEls.length > 0 && !skipMermaid) {
+    tasks.push(import('mermaid').then(({ default: mermaid }) => {
+      const isDark = document.documentElement.getAttribute('data-theme') !== 'light'
+      mermaid.initialize({ startOnLoad: false, suppressErrorRendering: true, theme: isDark ? 'dark' : 'default', fontFamily: "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif" })
+      mermaidEls.forEach(async el => {
+        const rawCode = decodeURIComponent(el.dataset.mermaid || '')
+        // 预处理：把节点标签文本（[] {} 内）里的圆括号转为 HTML 实体
+        // 避免 AI 生成的 "(备注)" 被 mermaid 误解析为圆形节点语法导致 Parse error
+        const code = sanitizeMermaidCode(rawCode)
+        const id   = 'mer-' + Math.random().toString(36).slice(2)
+        try {
+          const { svg } = await mermaid.render(id, code)
+          // 先在屏幕外解析 SVG，取真实高度，再平滑过渡，避免从占位高度突变到 SVG 高度
+          const tmp = document.createElement('div')
+          tmp.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;left:-9999px'
+          tmp.innerHTML = svg
+          document.body.appendChild(tmp)
+          const svgEl  = tmp.querySelector('svg')
+          // 读取 SVG 自带 height 属性或 viewBox 推算，取不到则用 200px 兜底
+          let targetH = 200
+          if (svgEl) {
+            const h = svgEl.getAttribute('height')
+            if (h && parseFloat(h) > 0) {
+              targetH = Math.min(parseFloat(h), 800)  // 超大图表最高限制 800px
+            } else {
+              const vb = svgEl.getAttribute('viewBox')
+              if (vb) {
+                const parts = vb.split(/[\s,]+/)
+                if (parts.length >= 4) targetH = Math.min(parseFloat(parts[3]) || 200, 800)
+              }
+            }
+          }
+          // 检查 mermaid 是否返回了错误 SVG（aria-roledescription="error"）
+          // 11.x 有时不抛异常而是静默渲染一个错误占位 SVG
+          const isErrorSvg = svgEl?.getAttribute('aria-roledescription') === 'error'
+          document.body.removeChild(tmp)
+
+          if (isErrorSvg) {
+            el.classList.remove('mermaid-pending')
+            el.closest('.mermaid-wrapper')?.classList.add('mermaid-fallback')
+            el.innerHTML = `<pre class="mermaid-raw"><code>${escapeHtml(code)}</code></pre>`
+            console.warn('[mermaid] error svg detected, fallback to raw code')
+            return
+          }
+
+          // 设置容器高度（平滑过渡到目标高度），再注入 SVG
+          el.style.minHeight = `${targetH}px`
+          el.style.transition = 'min-height 0.25s ease'
+          el.innerHTML = svg
+          el.classList.remove('mermaid-pending')
+          el.dataset.rendered = '1'  // 标记已渲染，防止流式期间重复触发
+          // SVG 注入后 fade in
+          const svgNode = el.querySelector('svg')
+          if (svgNode) {
+            svgNode.style.opacity = '0'
+            svgNode.style.transition = 'opacity 0.2s ease'
+            requestAnimationFrame(() => { svgNode.style.opacity = '1' })
+          }
+          // 渲染完成后移除 min-height 约束，让 SVG 自然撑开
+          setTimeout(() => { el.style.minHeight = ''; el.style.transition = '' }, 300)
+        } catch (e) {
+          // 静默降级：不向用户暴露 mermaid 内部报错（如 "Syntax error in text"）
+          // 改为折叠显示原始代码，用户可复制修正，不影响整体阅读体验
+          el.classList.remove('mermaid-pending')
+          const escaped = escapeHtml(code)
+          el.closest('.mermaid-wrapper')?.classList.add('mermaid-fallback')
+          el.innerHTML = `<pre class="mermaid-raw"><code>${escaped}</code></pre>`
+          console.warn('[mermaid] render failed:', e.message)
+        }
+      })
+    }))
+  }
+
+  await Promise.allSettled(tasks)
+}
+
+// ─────────────────────────────────────────────────────────────────
+// 模块级主题变更订阅器（单例 MutationObserver，避免每条消息都创建一个）
+// MessageBubble 通过 onThemeChange / offThemeChange 订阅/取消订阅
+// ─────────────────────────────────────────────────────────────────
+const _themeSubscribers = new Set()
+let   _themeObserver    = null
+
+function ensureThemeObserver() {
+  if (_themeObserver) return
+  _themeObserver = new MutationObserver(() => {
+    _themeSubscribers.forEach(fn => fn())
+  })
+  _themeObserver.observe(document.documentElement, {
+    attributes: true, attributeFilter: ['data-theme'],
+  })
+}
+
+export function onThemeChange(fn) {
+  ensureThemeObserver()
+  _themeSubscribers.add(fn)
+}
+
+export function offThemeChange(fn) {
+  _themeSubscribers.delete(fn)
+  // 所有订阅者都退订时断开 Observer，释放资源
+  if (_themeSubscribers.size === 0 && _themeObserver) {
+    _themeObserver.disconnect()
+    _themeObserver = null
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────
+// 代码块点击委托
+// ─────────────────────────────────────────────────────────────────
+export function handleCodeAction(e, openPreview) {
+  const btn = e.target.closest('[data-action]')
+  if (!btn) return
+  const { action, id } = btn.dataset
+  const block = pendingBlocks.get(id)
+  if (!block) return
+
+  if (action === 'copy') {
+    navigator.clipboard?.writeText(block.code).catch(() => {})
+    const orig = btn.innerHTML
+    btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> 已复制`
+    btn.style.color = '#4ade80'
+    setTimeout(() => { btn.innerHTML = orig; btn.style.color = '' }, 2000)
+  }
+  if (action === 'preview' && openPreview) {
+    openPreview({ lang: block.lang, code: block.code })
+  }
+  if (action === 'zoom-mermaid' && openPreview) {
+    // 从 DOM 里取已渲染好的 SVG，传给 openPreview 展示全屏预览
+    const wrapper = btn.closest('.mermaid-wrapper')
+    const svgEl   = wrapper?.querySelector('.mermaid-chart svg')
+    const svgHtml = svgEl ? svgEl.outerHTML : ''
+    if (svgHtml) openPreview({ lang: 'mermaid-svg', code: block.code, svgHtml })
+  }
+}