@huyooo/ai-chat-shared 0.2.12 → 0.2.14

package/src/markdown.ts

@@ -1,12 +1,236 @@
 /**
  * Markdown 渲染工具
  * 提供统一的 Markdown 渲染函数，供 React 和 Vue 版本使用
+ * 支持 LaTeX 数学公式渲染和 Mermaid 图表
  */
 
 import { marked, Renderer } from 'marked'
 import DOMPurify from 'dompurify'
+import katex from 'katex'
+import mermaid from 'mermaid'
 import { highlightCode } from './highlighter'
 
+// Mermaid 初始化标记
+let mermaidInitialized = false
+
+/**
+ * base64url 编码（UTF-8）
+ * 不能直接把源码放进 attribute（换行会被规范化），所以使用 base64 传递。
+ * 同时避免在某些链路里 '+' 被当成空格的问题，这里使用 base64url（- _，无 padding）。
+ */
+function encodeBase64Utf8(text: string): string {
+  const bytes = new TextEncoder().encode(text)
+  let binary = ''
+  for (const b of bytes) binary += String.fromCharCode(b)
+  const b64 = btoa(binary)
+  // base64url: +/ -> -_，去掉末尾 padding =
+  return b64.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '')
+}
+
+/**
+ * Mermaid 源码编码成可安全放入 attribute 的 base64url（UTF-8）
+ * 给前端组件（非 markdown 渲染路径）复用，避免重复实现。
+ */
+export function encodeMermaidCodeToBase64Url(code: string): string {
+  return encodeBase64Utf8(code)
+}
+
+/**
+ * base64url 解码（UTF-8）
+ */
+function decodeBase64Utf8(b64: string): string {
+  // 兼容：某些情况下 '+' 可能被变成空格
+  const normalized = b64.replace(/\s/g, '+')
+  // base64url -> base64
+  let base64 = normalized.replace(/-/g, '+').replace(/_/g, '/')
+  // 补齐 padding
+  const pad = base64.length % 4
+  if (pad === 2) base64 += '=='
+  else if (pad === 3) base64 += '='
+  else if (pad !== 0) {
+    // 非法长度，交给 atob 抛错
+  }
+
+  const binary = atob(base64)
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+  return new TextDecoder().decode(bytes)
+}
+
+/**
+ * 初始化 Mermaid（仅需调用一次）
+ */
+export function initMermaid(): void {
+  if (mermaidInitialized) return
+  
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'dark',
+    securityLevel: 'loose',
+    fontFamily: 'inherit',
+    flowchart: {
+      useMaxWidth: true,
+      htmlLabels: true,
+      curve: 'basis',
+    },
+    sequence: {
+      useMaxWidth: true,
+    },
+    gantt: {
+      useMaxWidth: true,
+    },
+  })
+  
+  mermaidInitialized = true
+}
+
+/**
+ * 渲染页面中的 Mermaid 图表
+ * 用户点击"显示图表"按钮后调用
+ * @param container 容器元素（可选，默认为 document）
+ */
+export async function renderMermaidDiagrams(container?: Element): Promise<void> {
+  if (!mermaidInitialized) {
+    initMermaid()
+  }
+  
+  const root = container || document
+  // 只选择未渲染的占位符
+  const elements = root.querySelectorAll('.mermaid-placeholder:not(.mermaid-rendered):not(.mermaid-error-container)')
+  
+  for (const el of elements) {
+    const b64 = el.getAttribute('data-mermaid-code-b64')
+    if (!b64) continue
+
+    let code = ''
+    try {
+      code = decodeBase64Utf8(b64)
+    } catch (e) {
+      console.warn('Mermaid 解码失败:', e)
+      el.innerHTML = `<div class="mermaid-error">图表解码失败</div>`
+      el.classList.remove('mermaid-placeholder')
+      el.classList.add('mermaid-error-container')
+      continue
+    }
+
+    // 显示加载中
+    el.innerHTML = `<div class="mermaid-loading">渲染中...</div>`
+    
+    try {
+      const id = `mermaid-${Math.random().toString(36).slice(2, 11)}`
+      const { svg } = await mermaid.render(id, code)
+      el.innerHTML = svg
+      el.classList.remove('mermaid-placeholder')
+      el.classList.add('mermaid-rendered')
+      el.removeAttribute('data-mermaid-code-b64')
+    } catch (error) {
+      console.warn('Mermaid 渲染失败:', error)
+      // 直接显示错误和源码
+      el.innerHTML = `<div class="mermaid-error">图表渲染失败</div><pre class="mermaid-source">${code.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</pre>`
+      el.classList.remove('mermaid-placeholder')
+      el.classList.add('mermaid-error-container')
+    }
+  }
+}
+
+/**
+ * 渲染 LaTeX 公式
+ * @param latex LaTeX 字符串
+ * @param displayMode 是否为块级公式
+ * @returns 渲染后的 HTML
+ */
+function renderLatex(latex: string, displayMode: boolean): string {
+  try {
+    return katex.renderToString(latex, {
+      displayMode,
+      throwOnError: false,
+      strict: false,
+      trust: true,
+      output: 'html',
+    })
+  } catch (error) {
+    // 渲染失败时返回原文
+    console.warn('LaTeX 渲染失败:', error)
+    return displayMode 
+      ? `<div class="latex-error">$$${latex}$$</div>`
+      : `<span class="latex-error">$${latex}$</span>`
+  }
+}
+
+/**
+ * 渲染 fenced 的 LaTeX 代码块（```latex / ```katex），用于“先代码、后渲染”的视图切换。
+ * 注意：这里只返回 HTML 字符串，容器样式由 `.latex-block` 控制。
+ */
+export function renderLatexBlockToHtml(code: string): string {
+  // 滚动条样式与系统对齐：直接复用全局 `.chat-scrollbar`
+  return `<div class="latex-block chat-scrollbar">${renderLatex(code.trim(), true)}</div>`
+}
+
+/**
+ * 预处理文本中的 LaTeX 公式
+ * 将 LaTeX 公式替换为占位符，避免被 markdown 解析器处理
+ * @param text 原始文本
+ * @returns { processed: 处理后文本, placeholders: 占位符映射 }
+ */
+function preprocessLatex(text: string): { processed: string; placeholders: Map<string, string> } {
+  const placeholders = new Map<string, string>()
+  let counter = 0
+  
+  // 生成唯一占位符（使用 HTML 注释格式，避免被 markdown 解析）
+  const createPlaceholder = () => {
+    const placeholder = `<!--LATEX:${counter++}-->`
+    return placeholder
+  }
+
+  let processed = text
+
+  // 处理块级公式 $$...$$ (优先处理，避免和行内公式冲突)
+  processed = processed.replace(/\$\$([\s\S]*?)\$\$/g, (_, latex) => {
+    const placeholder = createPlaceholder()
+    const rendered = renderLatex(latex.trim(), true)
+    placeholders.set(placeholder, `<div class="latex-block chat-scrollbar">${rendered}</div>`)
+    return placeholder
+  })
+
+  // 处理块级公式 \[...\]
+  processed = processed.replace(/\\\[([\s\S]*?)\\\]/g, (_, latex) => {
+    const placeholder = createPlaceholder()
+    const rendered = renderLatex(latex.trim(), true)
+    placeholders.set(placeholder, `<div class="latex-block chat-scrollbar">${rendered}</div>`)
+    return placeholder
+  })
+
+  // 处理行内公式 $...$ (单个 $，不能跨行)
+  // 注意：避免匹配 $$ 和转义的 \$
+  processed = processed.replace(/(?<!\$)\$(?!\$)((?:\\.|[^$\n])+?)\$(?!\$)/g, (_, latex) => {
+    const placeholder = createPlaceholder()
+    const rendered = renderLatex(latex.trim(), false)
+    placeholders.set(placeholder, `<span class="latex-inline">${rendered}</span>`)
+    return placeholder
+  })
+
+  // 处理行内公式 \(...\)
+  processed = processed.replace(/\\\(([\s\S]*?)\\\)/g, (_, latex) => {
+    const placeholder = createPlaceholder()
+    const rendered = renderLatex(latex.trim(), false)
+    placeholders.set(placeholder, `<span class="latex-inline">${rendered}</span>`)
+    return placeholder
+  })
+
+  return { processed, placeholders }
+}
+
+/**
+ * 后处理：将占位符替换回渲染后的 LaTeX
+ */
+function postprocessLatex(html: string, placeholders: Map<string, string>): string {
+  let result = html
+  placeholders.forEach((rendered, placeholder) => {
+    result = result.replace(placeholder, rendered)
+  })
+  return result
+}
+
 /**
  * 渲染 Markdown 为 HTML
  * @param markdown Markdown 文本
@@ -15,19 +239,33 @@ import { highlightCode } from './highlighter'
 export function renderMarkdown(markdown: string): string {
   if (!markdown) return ''
 
+  // 预处理 LaTeX 公式
+  const { processed, placeholders } = preprocessLatex(markdown)
+
   // 创建自定义渲染器（继承默认渲染器）
   const renderer = new Renderer()
 
-  // 自定义代码块渲染
+  // 自定义代码块渲染（支持 Mermaid）
   renderer.code = (code: string, language?: string) => {
+    const lang = (language || 'plaintext').toLowerCase()
+    
+    // Mermaid 图表：生成占位符，延迟渲染
+    if (lang === 'mermaid') {
+      // 注意：HTML attribute 会把换行规范化成空格，直接写入会破坏 mermaid 语法
+      // 所以这里用 base64(UTF-8) 存储源码，渲染时再解码
+      const b64 = encodeBase64Utf8(code)
+      return `<div class="mermaid-placeholder" data-mermaid-code-b64="${b64}"><div class="mermaid-loading">加载图表中...</div></div>`
+    }
+    
     const highlighted = highlightCode(code, language)
-    const lang = language || 'plaintext'
-    return `<pre class="markdown-code-block"><code class="language-${lang}">${highlighted}</code></pre>`
+    // 滚动条样式与系统对齐：直接复用全局 `.chat-scrollbar`
+    return `<pre class="markdown-code-block chat-scrollbar"><code class="language-${lang}">${highlighted}</code></pre>`
   }
 
   // 自定义表格渲染（添加样式类和滚动容器）
   renderer.table = (header: string, body: string) => {
-    return `<div class="markdown-table-wrapper"><table class="markdown-table"><thead>${header}</thead><tbody>${body}</tbody></table></div>`
+    // 滚动条样式与系统对齐：直接复用全局 `.chat-scrollbar`
+    return `<div class="markdown-table-wrapper chat-scrollbar"><table class="markdown-table"><thead>${header}</thead><tbody>${body}</tbody></table></div>`
   }
 
   // 自定义链接渲染（添加 target="_blank" 和 rel="noopener noreferrer"）
@@ -56,9 +294,13 @@ export function renderMarkdown(markdown: string): string {
   })
 
   // 渲染 Markdown（marked 12.x 返回字符串，不是 Promise）
-  let html = marked(markdown, { renderer }) as string
+  let html = marked(processed, { renderer }) as string
+
+  // 后处理：将占位符替换回渲染后的 LaTeX
+  html = postprocessLatex(html, placeholders)
 
   // 使用 DOMPurify 清理 HTML，防止 XSS
+  // 允许 KaTeX 生成的 SVG 和相关元素
   html = DOMPurify.sanitize(html, {
     ALLOWED_TAGS: [
       'p', 'br', 'strong', 'em', 'u', 's', 'code', 'pre',
@@ -67,13 +309,27 @@ export function renderMarkdown(markdown: string): string {
       'table', 'thead', 'tbody', 'tr', 'th', 'td',
       'a', 'img', 'hr',
       'div', 'span',
+      // KaTeX 相关标签
+      'math', 'semantics', 'mrow', 'mi', 'mn', 'mo', 'msup', 'msub',
+      'mfrac', 'mroot', 'msqrt', 'mtext', 'mspace', 'mtable', 'mtr', 'mtd',
+      'annotation', 'mover', 'munder', 'munderover', 'menclose', 'mpadded',
+      'svg', 'line', 'path', 'rect', 'circle', 'g', 'use', 'defs', 'symbol',
     ],
     ALLOWED_ATTR: [
       'href', 'title', 'target', 'rel', 'class',
       'src', 'alt', 'width', 'height',
+      // Mermaid 相关属性
+      'data-mermaid-code-b64',
+      // KaTeX 相关属性
+      'style', 'xmlns', 'viewBox', 'preserveAspectRatio',
+      'd', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'r', 'cx', 'cy',
+      'fill', 'stroke', 'stroke-width', 'transform',
+      'xlink:href', 'aria-hidden', 'focusable', 'role',
+      'mathvariant', 'encoding', 'stretchy', 'fence', 'separator',
+      'lspace', 'rspace', 'minsize', 'maxsize', 'accent', 'accentunder',
     ],
+    ADD_ATTR: ['xmlns:xlink'],
   })
 
   return html
 }
-

package/src/parser.ts

@@ -33,7 +33,7 @@ export function parseContent(raw: string): ContentBlock[] {
     if (match.index > lastIndex) {
       const textContent = raw.slice(lastIndex, match.index)
       if (textContent.trim()) {
-        blocks.push(createTextBlock(textContent))
+        blocks.push(createTextBlock(textContent, undefined, true))
       }
     }
 
@@ -49,7 +49,7 @@ export function parseContent(raw: string): ContentBlock[] {
   if (lastIndex < raw.length) {
     const textContent = raw.slice(lastIndex)
     if (textContent.trim()) {
-      blocks.push(createTextBlock(textContent))
+      blocks.push(createTextBlock(textContent, undefined, true))
     }
   }
 
@@ -57,18 +57,18 @@ export function parseContent(raw: string): ContentBlock[] {
 }
 
 /** 创建文本块 */
-function createTextBlock(content: string): TextBlock {
+function createTextBlock(content: string, id?: string, trimContent = true): TextBlock {
   return {
-    id: generateId(),
+    id: id || generateId(),
     type: 'text',
-    content: content.trim(),
+    content: trimContent ? content.trim() : content,
   }
 }
 
 /** 创建代码块 */
-function createCodeBlock(content: string, language?: string, filename?: string): CodeBlock {
+function createCodeBlock(content: string, language?: string, filename?: string, id?: string): CodeBlock {
   return {
-    id: generateId(),
+    id: id || generateId(),
     type: 'code',
     content,
     language,
@@ -90,6 +90,12 @@ export interface StreamParseState {
   codeLanguage?: string
   /** 当前代码块内容 */
   codeContent: string
+  /** 当前代码块 ID（用于稳定 key，避免流式时每次 render 都生成新 id） */
+  codeBlockId: string | null
+  /** 当前文本块内容（流式追加，避免把一句话拆成很多 text block） */
+  textContent: string
+  /** 当前文本块 ID（稳定 key） */
+  textBlockId: string | null
 }
 
 /** 创建初始流式解析状态 */
@@ -100,9 +106,25 @@ export function createStreamParseState(): StreamParseState {
     inCodeBlock: false,
     codeLanguage: undefined,
     codeContent: '',
+    codeBlockId: null,
+    textContent: '',
+    textBlockId: null,
   }
 }
 
+function appendText(state: StreamParseState, text: string): void {
+  if (!text) return
+  if (state.textBlockId === null) state.textBlockId = generateId()
+  state.textContent += text
+}
+
+function flushTextBlock(state: StreamParseState): void {
+  if (!state.textContent.trim()) return
+  state.blocks.push(createTextBlock(state.textContent, state.textBlockId || undefined, false))
+  state.textContent = ''
+  state.textBlockId = null
+}
+
 /**
  * 流式解析（增量更新）
  * @param chunk 新增的文本块
@@ -110,7 +132,7 @@ export function createStreamParseState(): StreamParseState {
  * @returns 更新后的状态
  */
 export function parseContentStream(chunk: string, state: StreamParseState): StreamParseState {
-  const newState = { ...state }
+  const newState: StreamParseState = { ...state, blocks: [...state.blocks] }
   newState.buffer += chunk
 
   // 处理缓冲区
@@ -121,14 +143,19 @@ export function parseContentStream(chunk: string, state: StreamParseState): Stre
       if (endIndex !== -1) {
         // 找到结束标记
         newState.codeContent += newState.buffer.slice(0, endIndex)
-        newState.blocks.push(createCodeBlock(
-          newState.codeContent.trim(),
-          newState.codeLanguage
-        ))
+        newState.blocks.push(
+          createCodeBlock(
+            newState.codeContent.trim(),
+            newState.codeLanguage,
+            undefined,
+            newState.codeBlockId || undefined
+          )
+        )
         newState.buffer = newState.buffer.slice(endIndex + 3)
         newState.inCodeBlock = false
         newState.codeLanguage = undefined
         newState.codeContent = ''
+        newState.codeBlockId = null
       } else {
         // 没找到结束标记，继续累积
         newState.codeContent += newState.buffer
@@ -141,9 +168,8 @@ export function parseContentStream(chunk: string, state: StreamParseState): Stre
       if (startIndex !== -1) {
         // 找到开始标记
         const beforeCode = newState.buffer.slice(0, startIndex)
-        if (beforeCode.trim()) {
-          newState.blocks.push(createTextBlock(beforeCode))
-        }
+        appendText(newState, beforeCode)
+        flushTextBlock(newState)
 
         // 解析语言标识
         const afterStart = newState.buffer.slice(startIndex + 3)
@@ -153,25 +179,22 @@ export function parseContentStream(chunk: string, state: StreamParseState): Stre
           newState.buffer = afterStart.slice(newlineIndex + 1)
           newState.inCodeBlock = true
           newState.codeContent = ''
+          newState.codeBlockId = generateId()
         } else {
           // 语言行还没完整，等待更多数据
           break
         }
       } else {
-        // 没有代码块标记，检查是否有不完整的 ``` 开头
+        // 没有代码块标记：追加到“当前文本块”里（不 flush），避免碎片化
+        // 同时检查末尾是否可能是不完整的 ```，如果是就保留在 buffer 等待后续补全
         const lastBackticks = newState.buffer.lastIndexOf('`')
         if (lastBackticks !== -1 && newState.buffer.length - lastBackticks < 3) {
           // 可能是不完整的 ```，保留
           const safeText = newState.buffer.slice(0, lastBackticks)
-          if (safeText.trim()) {
-            newState.blocks.push(createTextBlock(safeText))
-          }
+          appendText(newState, safeText)
           newState.buffer = newState.buffer.slice(lastBackticks)
         } else {
-          // 安全的纯文本
-          if (newState.buffer.trim()) {
-            newState.blocks.push(createTextBlock(newState.buffer))
-          }
+          appendText(newState, newState.buffer)
           newState.buffer = ''
         }
         break
@@ -192,13 +215,20 @@ export function finishStreamParse(state: StreamParseState): ContentBlock[] {
 
   if (state.inCodeBlock) {
     // 未闭合的代码块，作为代码块处理
-    blocks.push(createCodeBlock(
-      (state.codeContent + state.buffer).trim(),
-      state.codeLanguage
-    ))
-  } else if (state.buffer.trim()) {
-    // 剩余文本
-    blocks.push(createTextBlock(state.buffer))
+    blocks.push(
+      createCodeBlock(
+        (state.codeContent + state.buffer).trim(),
+        state.codeLanguage,
+        undefined,
+        state.codeBlockId || undefined
+      )
+    )
+  } else {
+    // 剩余文本 + 累积文本：合并成一个 text block（稳定 id），避免碎片化
+    const merged = state.textContent + state.buffer
+    if (merged.trim()) {
+      blocks.push(createTextBlock(merged, state.textBlockId || undefined, false))
+    }
   }
 
   return blocks