@templmf/temp-solf-lmf 0.0.55 → 0.0.57

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

@@ -1,724 +0,0 @@
-/**
- * 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 })
-  }
-}