@huyooo/ai-chat-shared 0.2.13 → 0.2.14

package/dist/index.d.ts

@@ -22,17 +22,6 @@ interface CodeBlock extends ContentBlockBase {
 }
 /** 内容块联合类型 */
 type ContentBlock = TextBlock | CodeBlock;
-/** 工具渲染器 Props */
-interface ToolRendererProps {
-    /** 工具名称 */
-    toolName: string;
-    /** 工具参数 */
-    toolArgs: Record<string, unknown>;
-    /** 工具返回结果 */
-    toolResult: unknown;
-    /** 执行状态 */
-    status: 'running' | 'completed' | 'error';
-}
 /** 天气数据 */
 interface WeatherData {
     city: string;
@@ -95,6 +84,12 @@ interface StreamParseState {
     codeLanguage?: string;
     /** 当前代码块内容 */
     codeContent: string;
+    /** 当前代码块 ID（用于稳定 key，避免流式时每次 render 都生成新 id） */
+    codeBlockId: string | null;
+    /** 当前文本块内容（流式追加，避免把一句话拆成很多 text block） */
+    textContent: string;
+    /** 当前文本块 ID（稳定 key） */
+    textBlockId: string | null;
 }
 /** 创建初始流式解析状态 */
 declare function createStreamParseState(): StreamParseState;
@@ -133,7 +128,28 @@ declare function getLanguageDisplayName(language?: string): string;
 /**
  * Markdown 渲染工具
  * 提供统一的 Markdown 渲染函数，供 React 和 Vue 版本使用
+ * 支持 LaTeX 数学公式渲染和 Mermaid 图表
+ */
+/**
+ * Mermaid 源码编码成可安全放入 attribute 的 base64url（UTF-8）
+ * 给前端组件（非 markdown 渲染路径）复用，避免重复实现。
+ */
+declare function encodeMermaidCodeToBase64Url(code: string): string;
+/**
+ * 初始化 Mermaid（仅需调用一次）
+ */
+declare function initMermaid(): void;
+/**
+ * 渲染页面中的 Mermaid 图表
+ * 用户点击"显示图表"按钮后调用
+ * @param container 容器元素（可选，默认为 document）
+ */
+declare function renderMermaidDiagrams(container?: Element): Promise<void>;
+/**
+ * 渲染 fenced 的 LaTeX 代码块（```latex / ```katex），用于“先代码、后渲染”的视图切换。
+ * 注意：这里只返回 HTML 字符串，容器样式由 `.latex-block` 控制。
  */
+declare function renderLatexBlockToHtml(code: string): string;
 /**
  * 渲染 Markdown 为 HTML
  * @param markdown Markdown 文本
@@ -141,4 +157,18 @@ declare function getLanguageDisplayName(language?: string): string;
  */
 declare function renderMarkdown(markdown: string): string;
 
-export { type CodeBlock, type CodeExecutionResult, type ContentBlock, type ContentBlockBase, type ContentBlockType, type FileOperationResult, type SearchResultItem, type StreamParseState, type TextBlock, type ToolRendererProps, type WeatherData, type WeatherForecastItem, createStreamParseState, finishStreamParse, getLanguageDisplayName, highlightCode, parseContent, parseContentStream, renderMarkdown };
+declare function isMermaidLanguage(lang?: string): boolean;
+declare function isLatexLanguage(lang?: string): boolean;
+declare function isLatexDocument(code: string): boolean;
+declare function canVisualizeLatex(code: string): boolean;
+declare function hasLatexDelimiters(code: string): boolean;
+declare function shouldShowVisualToggle(lang?: string, code?: string): boolean;
+/**
+ * 将 fenced 的 latex/katex/tex 代码块渲染成 HTML（复用 shared 的 renderMarkdown + latex 预处理）。
+ * - 如果是完整 LaTeX 文档：返回提示 + code block（避免 KaTeX 报错）
+ * - 如果已经带分隔符：直接渲染（避免二次包裹）
+ * - 否则：自动包一层 $$...$$ 作为 display 公式渲染
+ */
+declare function renderFencedLatexToHtml(code: string): string;
+
+export { type CodeBlock, type CodeExecutionResult, type ContentBlock, type ContentBlockBase, type ContentBlockType, type FileOperationResult, type SearchResultItem, type StreamParseState, type TextBlock, type WeatherData, type WeatherForecastItem, canVisualizeLatex, createStreamParseState, encodeMermaidCodeToBase64Url, finishStreamParse, getLanguageDisplayName, hasLatexDelimiters, highlightCode, initMermaid, isLatexDocument, isLatexLanguage, isMermaidLanguage, parseContent, parseContentStream, renderFencedLatexToHtml, renderLatexBlockToHtml, renderMarkdown, renderMermaidDiagrams, shouldShowVisualToggle };

package/dist/index.js

@@ -13,7 +13,7 @@ function parseContent(raw) {
     if (match.index > lastIndex) {
       const textContent = raw.slice(lastIndex, match.index);
       if (textContent.trim()) {
-        blocks.push(createTextBlock(textContent));
+        blocks.push(createTextBlock(textContent, void 0, true));
       }
     }
     const language = match[1] || void 0;
@@ -24,21 +24,21 @@ function parseContent(raw) {
   if (lastIndex < raw.length) {
     const textContent = raw.slice(lastIndex);
     if (textContent.trim()) {
-      blocks.push(createTextBlock(textContent));
+      blocks.push(createTextBlock(textContent, void 0, true));
     }
   }
   return blocks;
 }
-function createTextBlock(content) {
+function createTextBlock(content, id, trimContent = true) {
   return {
-    id: generateId(),
+    id: id || generateId(),
     type: "text",
-    content: content.trim()
+    content: trimContent ? content.trim() : content
   };
 }
-function createCodeBlock(content, language, filename) {
+function createCodeBlock(content, language, filename, id) {
   return {
-    id: generateId(),
+    id: id || generateId(),
     type: "code",
     content,
     language,
@@ -51,25 +51,44 @@ function createStreamParseState() {
     blocks: [],
     inCodeBlock: false,
     codeLanguage: void 0,
-    codeContent: ""
+    codeContent: "",
+    codeBlockId: null,
+    textContent: "",
+    textBlockId: null
   };
 }
+function appendText(state, text) {
+  if (!text) return;
+  if (state.textBlockId === null) state.textBlockId = generateId();
+  state.textContent += text;
+}
+function flushTextBlock(state) {
+  if (!state.textContent.trim()) return;
+  state.blocks.push(createTextBlock(state.textContent, state.textBlockId || void 0, false));
+  state.textContent = "";
+  state.textBlockId = null;
+}
 function parseContentStream(chunk, state) {
-  const newState = { ...state };
+  const newState = { ...state, blocks: [...state.blocks] };
   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.blocks.push(
+          createCodeBlock(
+            newState.codeContent.trim(),
+            newState.codeLanguage,
+            void 0,
+            newState.codeBlockId || void 0
+          )
+        );
         newState.buffer = newState.buffer.slice(endIndex + 3);
         newState.inCodeBlock = false;
         newState.codeLanguage = void 0;
         newState.codeContent = "";
+        newState.codeBlockId = null;
       } else {
         newState.codeContent += newState.buffer;
         newState.buffer = "";
@@ -79,9 +98,8 @@ function parseContentStream(chunk, state) {
       const startIndex = newState.buffer.indexOf("```");
       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);
         const newlineIndex = afterStart.indexOf("\n");
         if (newlineIndex !== -1) {
@@ -89,6 +107,7 @@ function parseContentStream(chunk, state) {
           newState.buffer = afterStart.slice(newlineIndex + 1);
           newState.inCodeBlock = true;
           newState.codeContent = "";
+          newState.codeBlockId = generateId();
         } else {
           break;
         }
@@ -96,14 +115,10 @@ function parseContentStream(chunk, state) {
         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;
@@ -115,12 +130,19 @@ function parseContentStream(chunk, state) {
 function finishStreamParse(state) {
   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));
+    blocks.push(
+      createCodeBlock(
+        (state.codeContent + state.buffer).trim(),
+        state.codeLanguage,
+        void 0,
+        state.codeBlockId || void 0
+      )
+    );
+  } else {
+    const merged = state.textContent + state.buffer;
+    if (merged.trim()) {
+      blocks.push(createTextBlock(merged, state.textBlockId || void 0, false));
+    }
   }
   return blocks;
 }
@@ -174,16 +196,161 @@ function getLanguageDisplayName(language) {
 // src/markdown.ts
 import { marked, Renderer } from "marked";
 import DOMPurify from "dompurify";
+import katex from "katex";
+import mermaid from "mermaid";
+var mermaidInitialized = false;
+function encodeBase64Utf8(text) {
+  const bytes = new TextEncoder().encode(text);
+  let binary = "";
+  for (const b of bytes) binary += String.fromCharCode(b);
+  const b64 = btoa(binary);
+  return b64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
+}
+function encodeMermaidCodeToBase64Url(code) {
+  return encodeBase64Utf8(code);
+}
+function decodeBase64Utf8(b64) {
+  const normalized = b64.replace(/\s/g, "+");
+  let base64 = normalized.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = base64.length % 4;
+  if (pad === 2) base64 += "==";
+  else if (pad === 3) base64 += "=";
+  else if (pad !== 0) {
+  }
+  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);
+}
+function initMermaid() {
+  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;
+}
+async function renderMermaidDiagrams(container) {
+  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 \u89E3\u7801\u5931\u8D25:", e);
+      el.innerHTML = `<div class="mermaid-error">\u56FE\u8868\u89E3\u7801\u5931\u8D25</div>`;
+      el.classList.remove("mermaid-placeholder");
+      el.classList.add("mermaid-error-container");
+      continue;
+    }
+    el.innerHTML = `<div class="mermaid-loading">\u6E32\u67D3\u4E2D...</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 \u6E32\u67D3\u5931\u8D25:", error);
+      el.innerHTML = `<div class="mermaid-error">\u56FE\u8868\u6E32\u67D3\u5931\u8D25</div><pre class="mermaid-source">${code.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</pre>`;
+      el.classList.remove("mermaid-placeholder");
+      el.classList.add("mermaid-error-container");
+    }
+  }
+}
+function renderLatex(latex, displayMode) {
+  try {
+    return katex.renderToString(latex, {
+      displayMode,
+      throwOnError: false,
+      strict: false,
+      trust: true,
+      output: "html"
+    });
+  } catch (error) {
+    console.warn("LaTeX \u6E32\u67D3\u5931\u8D25:", error);
+    return displayMode ? `<div class="latex-error">$$${latex}$$</div>` : `<span class="latex-error">$${latex}$</span>`;
+  }
+}
+function renderLatexBlockToHtml(code) {
+  return `<div class="latex-block chat-scrollbar">${renderLatex(code.trim(), true)}</div>`;
+}
+function preprocessLatex(text) {
+  const placeholders = /* @__PURE__ */ new Map();
+  let counter = 0;
+  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 };
+}
+function postprocessLatex(html, placeholders) {
+  let result = html;
+  placeholders.forEach((rendered, placeholder) => {
+    result = result.replace(placeholder, rendered);
+  });
+  return result;
+}
 function renderMarkdown(markdown) {
   if (!markdown) return "";
+  const { processed, placeholders } = preprocessLatex(markdown);
   const renderer = new Renderer();
   renderer.code = (code, language) => {
+    const lang = (language || "plaintext").toLowerCase();
+    if (lang === "mermaid") {
+      const b64 = encodeBase64Utf8(code);
+      return `<div class="mermaid-placeholder" data-mermaid-code-b64="${b64}"><div class="mermaid-loading">\u52A0\u8F7D\u56FE\u8868\u4E2D...</div></div>`;
+    }
     const highlighted = highlightCode(code, language);
-    const lang = language || "plaintext";
-    return `<pre class="markdown-code-block"><code class="language-${lang}">${highlighted}</code></pre>`;
+    return `<pre class="markdown-code-block chat-scrollbar"><code class="language-${lang}">${highlighted}</code></pre>`;
   };
   renderer.table = (header, body) => {
-    return `<div class="markdown-table-wrapper"><table class="markdown-table"><thead>${header}</thead><tbody>${body}</tbody></table></div>`;
+    return `<div class="markdown-table-wrapper chat-scrollbar"><table class="markdown-table"><thead>${header}</thead><tbody>${body}</tbody></table></div>`;
   };
   renderer.link = (href, title, text) => {
     const titleAttr = title ? ` title="${title}"` : "";
@@ -203,7 +370,8 @@ function renderMarkdown(markdown) {
     gfm: true
     // GitHub Flavored Markdown
   });
-  let html = marked(markdown, { renderer });
+  let html = marked(processed, { renderer });
+  html = postprocessLatex(html, placeholders);
   html = DOMPurify.sanitize(html, {
     ALLOWED_TAGS: [
       "p",
@@ -234,7 +402,39 @@ function renderMarkdown(markdown) {
       "img",
       "hr",
       "div",
-      "span"
+      "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",
@@ -245,18 +445,117 @@ function renderMarkdown(markdown) {
       "src",
       "alt",
       "width",
-      "height"
-    ]
+      "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;
 }
+
+// src/visual.ts
+function normalizeLanguage(lang) {
+  return (lang || "").trim().toLowerCase();
+}
+function isMermaidLanguage(lang) {
+  return normalizeLanguage(lang) === "mermaid";
+}
+function isLatexLanguage(lang) {
+  const l = normalizeLanguage(lang);
+  return l === "latex" || l === "katex" || l === "tex";
+}
+function isLatexDocument(code) {
+  const t = (code || "").trim();
+  return /\\documentclass\b|\\usepackage\b|\\begin\{document\}|\\end\{document\}/.test(t);
+}
+function canVisualizeLatex(code) {
+  const t = (code || "").trim();
+  if (!t) return false;
+  if (isLatexDocument(t)) return false;
+  return true;
+}
+function hasLatexDelimiters(code) {
+  const t = (code || "").trim();
+  if (!t) return false;
+  return /\$\$[\s\S]*\$\$/.test(t) || /\\\[[\s\S]*\\\]/.test(t) || /\\\([\s\S]*\\\)/.test(t) || /(?<!\$)\$(?!\$)[\s\S]*?\$(?!\$)/.test(t);
+}
+function shouldShowVisualToggle(lang, code) {
+  if (isMermaidLanguage(lang)) return true;
+  if (isLatexLanguage(lang)) return canVisualizeLatex(code || "");
+  return false;
+}
+function renderFencedLatexToHtml(code) {
+  const t = (code || "").trim();
+  if (!t) return "";
+  if (!canVisualizeLatex(t)) {
+    return renderMarkdown(
+      `> \u4E0D\u652F\u6301\u5C06\u5B8C\u6574 LaTeX \u6587\u6863\u4F5C\u4E3A\u516C\u5F0F\u6E32\u67D3\uFF0C\u8BF7\u5207\u6362\u5230\u4EE3\u7801\u89C6\u56FE\u67E5\u770B\u3002
+
+\`\`\`latex
+${t}
+\`\`\``
+    );
+  }
+  if (hasLatexDelimiters(t)) {
+    return renderMarkdown(t);
+  }
+  return renderMarkdown(`$$
+${t}
+$$`);
+}
 export {
+  canVisualizeLatex,
   createStreamParseState,
+  encodeMermaidCodeToBase64Url,
   finishStreamParse,
   getLanguageDisplayName,
+  hasLatexDelimiters,
   highlightCode,
+  initMermaid,
+  isLatexDocument,
+  isLatexLanguage,
+  isMermaidLanguage,
   parseContent,
   parseContentStream,
-  renderMarkdown
+  renderFencedLatexToHtml,
+  renderLatexBlockToHtml,
+  renderMarkdown,
+  renderMermaidDiagrams,
+  shouldShowVisualToggle
 };
 //# sourceMappingURL=index.js.map