@huyooo/ai-chat-shared 0.2.15 → 0.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huyooo/ai-chat-shared",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "AI Chat 共享模块 - 内容解析器、类型定义",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,8 +16,7 @@
     "./styles": "./dist/styles.css"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "tsup",

package/src/highlighter.ts

@@ -1,80 +0,0 @@
-/**
- * 代码高亮工具
- * 使用 highlight.js 提供代码语法高亮
- */
-
-import hljs from 'highlight.js'
-
-/** 支持的语言别名映射 */
-const LANGUAGE_ALIASES: Record<string, string> = {
-  js: 'javascript',
-  ts: 'typescript',
-  tsx: 'typescript',
-  jsx: 'javascript',
-  py: 'python',
-  rb: 'ruby',
-  sh: 'bash',
-  shell: 'bash',
-  yml: 'yaml',
-  md: 'markdown',
-}
-
-/**
- * 高亮代码
- * @param code 代码内容
- * @param language 语言标识
- * @returns 高亮后的 HTML
- */
-export function highlightCode(code: string, language?: string): string {
-  if (!language) {
-    // 无语言指定，尝试自动检测
-    try {
-      const result = hljs.highlightAuto(code)
-      return result.value
-    } catch {
-      return escapeHtml(code)
-    }
-  }
-
-  // 处理语言别名
-  const normalizedLang = LANGUAGE_ALIASES[language.toLowerCase()] || language.toLowerCase()
-
-  try {
-    if (hljs.getLanguage(normalizedLang)) {
-      return hljs.highlight(code, { language: normalizedLang }).value
-    }
-    // 语言不支持，返回转义后的原文
-    return escapeHtml(code)
-  } catch {
-    return escapeHtml(code)
-  }
-}
-
-/** HTML 转义 */
-function escapeHtml(text: string): string {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
-
-/**
- * 获取语言显示名称
- * @param language 语言标识
- * @returns 显示名称
- */
-export function getLanguageDisplayName(language?: string): string {
-  if (!language) return 'Plain Text'
-  
-  const normalizedLang = LANGUAGE_ALIASES[language.toLowerCase()] || language.toLowerCase()
-  const langDef = hljs.getLanguage(normalizedLang)
-  
-  if (langDef) {
-    // 首字母大写
-    return normalizedLang.charAt(0).toUpperCase() + normalizedLang.slice(1)
-  }
-  
-  return language
-}

package/src/index.ts

@@ -1,59 +0,0 @@
-/**
- * @huyooo/ai-chat-shared
- * 
- * AI Chat 共享模块
- * - 内容解析器
- * - 代码高亮
- * - 共享类型定义
- */
-
-// 类型导出
-export type {
-  // 内容块类型
-  ContentBlockType,
-  ContentBlockBase,
-  TextBlock,
-  CodeBlock,
-  ContentBlock,
-  // 内置数据类型
-  WeatherData,
-  WeatherForecastItem,
-  SearchResultItem,
-  CodeExecutionResult,
-  FileOperationResult,
-} from './types'
-
-// 解析器导出
-export {
-  parseContent,
-  createStreamParseState,
-  parseContentStream,
-  finishStreamParse,
-} from './parser'
-export type { StreamParseState } from './parser'
-
-// 高亮工具导出
-export {
-  highlightCode,
-  getLanguageDisplayName,
-} from './highlighter'
-
-// Markdown 渲染工具导出
-export {
-  renderMarkdown,
-  initMermaid,
-  renderMermaidDiagrams,
-  encodeMermaidCodeToBase64Url,
-  renderLatexBlockToHtml,
-} from './markdown'
-
-// Mermaid / LaTeX 可视化渲染工具
-export {
-  isMermaidLanguage,
-  isLatexLanguage,
-  isLatexDocument,
-  canVisualizeLatex,
-  hasLatexDelimiters,
-  shouldShowVisualToggle,
-  renderFencedLatexToHtml,
-} from './visual'

package/src/markdown.ts

@@ -1,335 +0,0 @@
-/**
- * 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 文本
- * @returns 安全的 HTML 字符串
- */
-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)
-    // 滚动条样式与系统对齐：直接复用全局 `.chat-scrollbar`
-    return `<pre class="markdown-code-block chat-scrollbar"><code class="language-${lang}">${highlighted}</code></pre>`
-  }
-
-  // 自定义表格渲染（添加样式类和滚动容器）
-  renderer.table = (header: string, body: string) => {
-    // 滚动条样式与系统对齐：直接复用全局 `.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"）
-  renderer.link = (href: string, title: string | null, text: string) => {
-    const titleAttr = title ? ` title="${title}"` : ''
-    return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer" class="markdown-link">${text}</a>`
-  }
-
-  // 自定义列表项渲染，将 checkbox 替换为文本 [x] 或 [ ]
-  renderer.listitem = (text: string, task: boolean, checked: boolean) => {
-    if (task) {
-      // 任务列表：将 checkbox 替换为文本
-      const checkboxText = checked ? '[x]' : '[ ]'
-      // 移除 marked 生成的 checkbox input，替换为文本
-      const textWithoutCheckbox = text.replace(/<input[^>]*>/g, '').trim()
-      return `<li class="markdown-task-item"><span class="markdown-task-checkbox">${checkboxText}</span> ${textWithoutCheckbox}</li>`
-    }
-    // 普通列表项
-    return `<li>${text}</li>`
-  }
-
-  // 配置 marked（marked 12.x 使用新的配置方式）
-  marked.setOptions({
-    breaks: true, // 支持换行
-    gfm: true, // GitHub Flavored Markdown
-  })
-
-  // 渲染 Markdown（marked 12.x 返回字符串，不是 Promise）
-  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',
-      'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-      'ul', 'ol', 'li', 'blockquote',
-      '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
-}