@huyooo/ai-chat-shared 0.2.3

package/src/markdown.ts

@@ -0,0 +1,79 @@
+/**
+ * Markdown 渲染工具
+ * 提供统一的 Markdown 渲染函数，供 React 和 Vue 版本使用
+ */
+
+import { marked, Renderer } from 'marked'
+import DOMPurify from 'dompurify'
+import { highlightCode } from './highlighter'
+
+/**
+ * 渲染 Markdown 为 HTML
+ * @param markdown Markdown 文本
+ * @returns 安全的 HTML 字符串
+ */
+export function renderMarkdown(markdown: string): string {
+  if (!markdown) return ''
+
+  // 创建自定义渲染器（继承默认渲染器）
+  const renderer = new Renderer()
+
+  // 自定义代码块渲染
+  renderer.code = (code: string, language?: string) => {
+    const highlighted = highlightCode(code, language)
+    const lang = language || 'plaintext'
+    return `<pre class="markdown-code-block"><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>`
+  }
+
+  // 自定义链接渲染（添加 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(markdown, { renderer }) as string
+
+  // 使用 DOMPurify 清理 HTML，防止 XSS
+  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',
+    ],
+    ALLOWED_ATTR: [
+      'href', 'title', 'target', 'rel', 'class',
+      'src', 'alt', 'width', 'height',
+    ],
+  })
+
+  return html
+}
+

package/src/parser.ts

@@ -0,0 +1,205 @@
+/**
+ * 内容解析器
+ * 将 AI 输出的原始文本解析为结构化的内容块
+ */
+
+import type { ContentBlock, TextBlock, CodeBlock } from './types'
+
+/** 生成唯一 ID */
+function generateId(): string {
+  return Math.random().toString(36).slice(2, 11)
+}
+
+/** 代码块正则：匹配 ```language\ncode\n``` 或 ```\ncode\n``` */
+const CODE_BLOCK_REGEX = /```(\w*)\n([\s\S]*?)```/g
+
+/**
+ * 解析原始内容为内容块列表
+ * @param raw 原始文本内容
+ * @returns 内容块列表
+ */
+export function parseContent(raw: string): ContentBlock[] {
+  if (!raw) return []
+
+  const blocks: ContentBlock[] = []
+  let lastIndex = 0
+
+  // 使用正则匹配所有代码块
+  let match: RegExpExecArray | null
+  const regex = new RegExp(CODE_BLOCK_REGEX.source, 'g')
+
+  while ((match = regex.exec(raw)) !== null) {
+    // 添加代码块前的文本
+    if (match.index > lastIndex) {
+      const textContent = raw.slice(lastIndex, match.index)
+      if (textContent.trim()) {
+        blocks.push(createTextBlock(textContent))
+      }
+    }
+
+    // 添加代码块
+    const language = match[1] || undefined
+    const code = match[2]
+    blocks.push(createCodeBlock(code, language))
+
+    lastIndex = match.index + match[0].length
+  }
+
+  // 添加最后一段文本
+  if (lastIndex < raw.length) {
+    const textContent = raw.slice(lastIndex)
+    if (textContent.trim()) {
+      blocks.push(createTextBlock(textContent))
+    }
+  }
+
+  return blocks
+}
+
+/** 创建文本块 */
+function createTextBlock(content: string): TextBlock {
+  return {
+    id: generateId(),
+    type: 'text',
+    content: content.trim(),
+  }
+}
+
+/** 创建代码块 */
+function createCodeBlock(content: string, language?: string, filename?: string): CodeBlock {
+  return {
+    id: generateId(),
+    type: 'code',
+    content,
+    language,
+    filename,
+  }
+}
+
+// ============ 流式解析支持 ============
+
+/** 流式解析状态 */
+export interface StreamParseState {
+  /** 未完成的缓冲区 */
+  buffer: string
+  /** 已解析的块 */
+  blocks: ContentBlock[]
+  /** 是否在代码块中 */
+  inCodeBlock: boolean
+  /** 当前代码块语言 */
+  codeLanguage?: string
+  /** 当前代码块内容 */
+  codeContent: string
+}
+
+/** 创建初始流式解析状态 */
+export function createStreamParseState(): StreamParseState {
+  return {
+    buffer: '',
+    blocks: [],
+    inCodeBlock: false,
+    codeLanguage: undefined,
+    codeContent: '',
+  }
+}
+
+/**
+ * 流式解析（增量更新）
+ * @param chunk 新增的文本块
+ * @param state 当前解析状态
+ * @returns 更新后的状态
+ */
+export function parseContentStream(chunk: string, state: StreamParseState): StreamParseState {
+  const newState = { ...state }
+  newState.buffer += chunk
+
+  // 处理缓冲区
+  while (true) {
+    if (newState.inCodeBlock) {
+      // 在代码块中，查找结束标记
+      const endIndex = newState.buffer.indexOf('```')
+      if (endIndex !== -1) {
+        // 找到结束标记
+        newState.codeContent += newState.buffer.slice(0, endIndex)
+        newState.blocks.push(createCodeBlock(
+          newState.codeContent.trim(),
+          newState.codeLanguage
+        ))
+        newState.buffer = newState.buffer.slice(endIndex + 3)
+        newState.inCodeBlock = false
+        newState.codeLanguage = undefined
+        newState.codeContent = ''
+      } else {
+        // 没找到结束标记，继续累积
+        newState.codeContent += newState.buffer
+        newState.buffer = ''
+        break
+      }
+    } else {
+      // 不在代码块中，查找开始标记
+      const startIndex = newState.buffer.indexOf('```')
+      if (startIndex !== -1) {
+        // 找到开始标记
+        const beforeCode = newState.buffer.slice(0, startIndex)
+        if (beforeCode.trim()) {
+          newState.blocks.push(createTextBlock(beforeCode))
+        }
+
+        // 解析语言标识
+        const afterStart = newState.buffer.slice(startIndex + 3)
+        const newlineIndex = afterStart.indexOf('\n')
+        if (newlineIndex !== -1) {
+          newState.codeLanguage = afterStart.slice(0, newlineIndex).trim() || undefined
+          newState.buffer = afterStart.slice(newlineIndex + 1)
+          newState.inCodeBlock = true
+          newState.codeContent = ''
+        } else {
+          // 语言行还没完整，等待更多数据
+          break
+        }
+      } else {
+        // 没有代码块标记，检查是否有不完整的 ``` 开头
+        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))
+          }
+          newState.buffer = newState.buffer.slice(lastBackticks)
+        } else {
+          // 安全的纯文本
+          if (newState.buffer.trim()) {
+            newState.blocks.push(createTextBlock(newState.buffer))
+          }
+          newState.buffer = ''
+        }
+        break
+      }
+    }
+  }
+
+  return newState
+}
+
+/**
+ * 完成流式解析（处理剩余缓冲区）
+ * @param state 当前解析状态
+ * @returns 最终的内容块列表
+ */
+export function finishStreamParse(state: StreamParseState): ContentBlock[] {
+  const blocks = [...state.blocks]
+
+  if (state.inCodeBlock) {
+    // 未闭合的代码块，作为代码块处理
+    blocks.push(createCodeBlock(
+      (state.codeContent + state.buffer).trim(),
+      state.codeLanguage
+    ))
+  } else if (state.buffer.trim()) {
+    // 剩余文本
+    blocks.push(createTextBlock(state.buffer))
+  }
+
+  return blocks
+}