llm-message-react 0.1.3 → 0.3.0

package/dist/index.js

@@ -1,13 +1,369 @@
 export { createShikiHighlighter } from './chunk-S3LNINQ5.js';
-import { clsx } from 'clsx';
-import { useMemo, useState, useRef, useEffect } from 'react';
+import { memo, useMemo, useRef, useDeferredValue, useState, useEffect, useLayoutEffect } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
-import katex from 'katex';
+import { clsx } from 'clsx';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import katex from 'katex';
+import { Lexer } from 'marked';
 
+function CopyIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "1em",
+      height: "1em",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "1em",
+      height: "1em",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function CopyButton({ text, className }) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current != null) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const copy = () => {
+    const clipboard = navigator.clipboard;
+    if (!clipboard) return;
+    void clipboard.writeText(text).then(() => {
+      setCopied(true);
+      if (timeoutRef.current != null) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
+    }).catch(() => {
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: copy,
+      className,
+      "aria-label": copied ? "Copied" : "Copy code",
+      "data-copied": copied ? "" : void 0,
+      children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+    }
+  );
+}
+function cx(...inputs) {
+  const result = clsx(inputs);
+  return result === "" ? void 0 : result;
+}
+function buildMarkdownComponents(classNames, overrides, highlighter) {
+  const cn = classNames ?? {};
+  const o = overrides ?? {};
+  const Highlighter = highlighter;
+  const c = {
+    // Code — inline and fenced blocks.
+    code: cx("llm-code", cn.code),
+    codeBlock: cx("llm-code-block", cn.codeBlock),
+    codeHeader: cx("llm-code-header", cn.codeHeader),
+    codeLanguage: cx("llm-code-language", cn.codeLanguage),
+    copyButton: cx("llm-copy-button", cn.copyButton),
+    // Tables — wrapper, table shell, and cells.
+    tableWrapper: cx("llm-table-wrapper", cn.tableWrapper),
+    table: cx("llm-table", cn.table),
+    th: cx("llm-th", cn.th),
+    td: cx("llm-td", cn.td),
+    // Blockquote.
+    blockquote: cx("llm-blockquote", cn.blockquote),
+    // Lists — ordered, unordered, items, and GFM task checkboxes.
+    ul: cx("llm-ul", cn.ul),
+    ol: cx("llm-ol", cn.ol),
+    li: cx("llm-li", cn.li),
+    checkbox: cx("llm-checkbox", cn.checkbox),
+    // Paragraph.
+    p: cx("llm-p", cn.p),
+    // Headings — h1 through h6.
+    h1: cx("llm-h1", cn.h1),
+    h2: cx("llm-h2", cn.h2),
+    h3: cx("llm-h3", cn.h3),
+    h4: cx("llm-h4", cn.h4),
+    h5: cx("llm-h5", cn.h5),
+    h6: cx("llm-h6", cn.h6),
+    // Links and media.
+    a: cx("llm-a", cn.a),
+    img: cx("llm-img", cn.img),
+    // Horizontal rule.
+    hr: cx("llm-hr", cn.hr),
+    // Inline emphasis — bold, italic, strikethrough.
+    strong: cx("llm-strong", cn.strong),
+    em: cx("llm-em", cn.em),
+    del: cx("llm-del", cn.del)
+  };
+  const merge = (base, extra) => extra ? cx(base, extra) : base;
+  return {
+    // --- Code: inline `code` and fenced ``` blocks (pre is a passthrough). ---
+    code({ node: _node, className, children, ...props }) {
+      const match = /language-(\w+)/.exec(className || "");
+      const codeText = String(children).replace(/\n$/, "");
+      const isBlock = match != null || String(children).includes("\n");
+      if (isBlock) {
+        const language = match?.[1] ?? "";
+        if (o.codeBlock) {
+          const CodeBlock = o.codeBlock;
+          return /* @__PURE__ */ jsx(
+            CodeBlock,
+            {
+              code: codeText,
+              language,
+              className: cn.codeBlock
+            }
+          );
+        }
+        return /* @__PURE__ */ jsxs("div", { className: c.codeBlock, children: [
+          /* @__PURE__ */ jsxs("div", { className: c.codeHeader, children: [
+            /* @__PURE__ */ jsx("span", { className: c.codeLanguage, children: language }),
+            o.copyButton ? /* @__PURE__ */ jsx(o.copyButton, { text: codeText, className: cn.copyButton }) : /* @__PURE__ */ jsx(CopyButton, { text: codeText, className: c.copyButton })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "llm-code-body", children: Highlighter ? /* @__PURE__ */ jsx(Highlighter, { code: codeText, language }) : /* @__PURE__ */ jsx("code", { className: "llm-code-plain", children: codeText }) })
+        ] });
+      }
+      if (o.code) {
+        const InlineCode = o.code;
+        return /* @__PURE__ */ jsx(InlineCode, { className: merge(c.code, className), children });
+      }
+      return /* @__PURE__ */ jsx("code", { className: merge(c.code, className), ...props, children });
+    },
+    pre({ children }) {
+      if (o.pre) {
+        return /* @__PURE__ */ jsx(o.pre, { children });
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    },
+    // --- Tables: scrollable wrapper, shell, header and body cells. ---
+    table({ children }) {
+      if (o.table) {
+        return /* @__PURE__ */ jsx(o.table, { className: cn.table, children });
+      }
+      return /* @__PURE__ */ jsx("div", { className: c.tableWrapper, children: /* @__PURE__ */ jsx("table", { className: c.table, children }) });
+    },
+    th({ children, style }) {
+      if (o.th) {
+        return /* @__PURE__ */ jsx(o.th, { className: cn.th, children });
+      }
+      return /* @__PURE__ */ jsx("th", { className: c.th, style, children });
+    },
+    td({ children, style }) {
+      if (o.td) {
+        return /* @__PURE__ */ jsx(o.td, { className: cn.td, children });
+      }
+      return /* @__PURE__ */ jsx("td", { className: c.td, style, children });
+    },
+    // --- Blockquote. ---
+    blockquote({ children, className, style }) {
+      if (o.blockquote) {
+        return /* @__PURE__ */ jsx(o.blockquote, { className: cn.blockquote, children });
+      }
+      return /* @__PURE__ */ jsx("blockquote", { className: merge(c.blockquote, className), style, children });
+    },
+    // --- Lists: ordered, unordered, items, and GFM task checkboxes. ---
+    ul({ children }) {
+      if (o.ul) {
+        return /* @__PURE__ */ jsx(o.ul, { className: cn.ul, children });
+      }
+      return /* @__PURE__ */ jsx("ul", { className: c.ul, children });
+    },
+    ol({ children }) {
+      if (o.ol) {
+        return /* @__PURE__ */ jsx(o.ol, { className: cn.ol, children });
+      }
+      return /* @__PURE__ */ jsx("ol", { className: c.ol, children });
+    },
+    li({ children, className, style }) {
+      if (o.li) {
+        return /* @__PURE__ */ jsx(o.li, { className: cn.li, children });
+      }
+      return /* @__PURE__ */ jsx("li", { className: merge(c.li, className), style, children });
+    },
+    input({ node: _node, type, checked, disabled, ...props }) {
+      if (type === "checkbox") {
+        if (o.checkbox) {
+          return /* @__PURE__ */ jsx(o.checkbox, { checked: Boolean(checked), className: cn.checkbox });
+        }
+        return /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: Boolean(checked),
+            disabled: true,
+            "aria-label": checked ? "Completed task" : "Incomplete task",
+            className: c.checkbox,
+            readOnly: true
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          type,
+          checked,
+          disabled,
+          readOnly: true,
+          ...props
+        }
+      );
+    },
+    // --- Paragraph. ---
+    p({ children }) {
+      if (o.p) {
+        return /* @__PURE__ */ jsx(o.p, { className: cn.p, children });
+      }
+      return /* @__PURE__ */ jsx("p", { className: c.p, children });
+    },
+    // --- Headings: h1 through h6. ---
+    h1({ children }) {
+      if (o.h1) {
+        return /* @__PURE__ */ jsx(o.h1, { className: cn.h1, children });
+      }
+      return /* @__PURE__ */ jsx("h1", { className: c.h1, children });
+    },
+    h2({ children }) {
+      if (o.h2) {
+        return /* @__PURE__ */ jsx(o.h2, { className: cn.h2, children });
+      }
+      return /* @__PURE__ */ jsx("h2", { className: c.h2, children });
+    },
+    h3({ children }) {
+      if (o.h3) {
+        return /* @__PURE__ */ jsx(o.h3, { className: cn.h3, children });
+      }
+      return /* @__PURE__ */ jsx("h3", { className: c.h3, children });
+    },
+    h4({ children }) {
+      if (o.h4) {
+        return /* @__PURE__ */ jsx(o.h4, { className: cn.h4, children });
+      }
+      return /* @__PURE__ */ jsx("h4", { className: c.h4, children });
+    },
+    h5({ children }) {
+      if (o.h5) {
+        return /* @__PURE__ */ jsx(o.h5, { className: cn.h5, children });
+      }
+      return /* @__PURE__ */ jsx("h5", { className: c.h5, children });
+    },
+    h6({ children }) {
+      if (o.h6) {
+        return /* @__PURE__ */ jsx(o.h6, { className: cn.h6, children });
+      }
+      return /* @__PURE__ */ jsx("h6", { className: c.h6, children });
+    },
+    // --- Links and media. ---
+    a({ href, title, children }) {
+      if (o.a) {
+        return /* @__PURE__ */ jsx(o.a, { href, title, className: cn.a, children });
+      }
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          title,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: c.a,
+          children
+        }
+      );
+    },
+    img({ node: _node, src, alt, title, className: _className, ...props }) {
+      if (o.img) {
+        const Image = o.img;
+        return /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: typeof src === "string" ? src : void 0,
+            alt,
+            title,
+            className: cn.img
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: typeof src === "string" ? src : void 0,
+          alt,
+          title,
+          className: c.img,
+          ...props
+        }
+      );
+    },
+    // --- Horizontal rule. ---
+    hr() {
+      if (o.hr) {
+        return /* @__PURE__ */ jsx(o.hr, { className: cn.hr });
+      }
+      return /* @__PURE__ */ jsx("hr", { className: c.hr });
+    },
+    // --- Inline emphasis: bold, italic, strikethrough. ---
+    strong({ children }) {
+      if (o.strong) {
+        return /* @__PURE__ */ jsx(o.strong, { className: cn.strong, children });
+      }
+      return /* @__PURE__ */ jsx("strong", { className: c.strong, children });
+    },
+    em({ children }) {
+      if (o.em) {
+        return /* @__PURE__ */ jsx(o.em, { className: cn.em, children });
+      }
+      return /* @__PURE__ */ jsx("em", { className: c.em, children });
+    },
+    del({ children }) {
+      if (o.del) {
+        return /* @__PURE__ */ jsx(o.del, { className: cn.del, children });
+      }
+      return /* @__PURE__ */ jsx("del", { className: c.del, children });
+    }
+  };
+}
+var MarkdownBlock = memo(function MarkdownBlock2({
+  content,
+  components,
+  remarkPlugins: remark,
+  rehypePlugins
+}) {
+  return /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: remark,
+      rehypePlugins,
+      components,
+      children: content
+    }
+  );
+});
 function completePartialTokens(text, options) {
   if (!text) return text;
   const showUnfinishedLatexBlocks = options?.showUnfinishedLatexBlocks ?? true;
@@ -17,24 +373,71 @@ function completePartialTokens(text, options) {
   const protectedSpans = [];
   const protect = (value) => `\0llmph${protectedSpans.push(value) - 1}\0`;
   let working = text.replace(/```[\s\S]*?```/g, (match) => protect(match));
-  working = working.replace(/``[\s\S]*?``/g, (match) => protect(match));
-  working = working.replace(/`[^`\n]+`/g, (match) => protect(match));
-  const lastBacktick = working.lastIndexOf("`");
-  if (lastBacktick !== -1) {
-    const newline = working.indexOf("\n", lastBacktick);
-    const end = newline === -1 ? working.length : newline;
-    const span = working.slice(lastBacktick, end);
-    working = working.slice(0, lastBacktick) + protect(`${span}\``) + working.slice(end);
-  }
+  working = protectInlineCode(working, protect);
   working = repairIncompleteMath(working, showUnfinishedLatexBlocks);
   working = hideIncompleteLink(working);
   working = completePartialTable(working);
   working = hideDanglingListMarker(working);
   working = closeUnbalancedEmphasis(working);
-  return working.replace(
-    /\u0000llmph(\d+)\u0000/g,
-    (_match, index) => protectedSpans[Number(index)] ?? ""
-  );
+  while (working.includes("\0llmph")) {
+    const restored = working.replace(
+      /\u0000llmph(\d+)\u0000/g,
+      (_match, index) => protectedSpans[Number(index)] ?? ""
+    );
+    if (restored === working) break;
+    working = restored;
+  }
+  return working;
+}
+function protectInlineCode(text, protect) {
+  let result = "";
+  let i = 0;
+  const n = text.length;
+  while (i < n) {
+    if (text[i] !== "`") {
+      result += text[i];
+      i++;
+      continue;
+    }
+    let openEnd = i;
+    while (openEnd < n && text[openEnd] === "`") openEnd++;
+    const width = openEnd - i;
+    const lineEnd = text.indexOf("\n", openEnd);
+    const limit = lineEnd === -1 ? n : lineEnd;
+    let closeStart = -1;
+    let scan = openEnd;
+    while (scan < limit) {
+      if (text[scan] !== "`") {
+        scan++;
+        continue;
+      }
+      let runEnd = scan;
+      while (runEnd < limit && text[runEnd] === "`") runEnd++;
+      if (runEnd - scan === width) {
+        closeStart = scan;
+        scan = runEnd;
+        break;
+      }
+      scan = runEnd;
+    }
+    if (closeStart !== -1) {
+      result += protect(text.slice(i, scan));
+      i = scan;
+      continue;
+    }
+    const lineTail = text.slice(i, limit);
+    const hasContent = lineTail.length > width;
+    if (!hasContent) {
+      i = limit;
+      continue;
+    }
+    let trailing = lineTail.length;
+    while (trailing > 0 && lineTail[trailing - 1] === "`") trailing--;
+    const need = Math.max(0, width - (lineTail.length - trailing));
+    result += protect(lineTail + "`".repeat(need));
+    i = limit;
+  }
+  return result;
 }
 function completePartialTable(text) {
   const lines = text.split("\n");
@@ -75,12 +478,23 @@ function buildDelimiterRow(fragment, columns) {
   return `| ${cells.join(" | ")} |`;
 }
 function hideDanglingListMarker(text) {
-  const match = text.match(/\n[ \t]{0,3}-+[ \t]*$/);
+  const match = text.match(/\n([ \t]*)-+[ \t]*$/);
   if (match?.index == null) return text;
   const before = text.slice(0, match.index);
   const prevLine = before.slice(before.lastIndexOf("\n") + 1);
   if (prevLine.trim() === "") return text;
-  return before;
+  const dashIndent = indentWidth(match[1]);
+  const listItem = prevLine.match(/^([ \t]*(?:[-*+]|\d+[.)])[ \t]+)/);
+  const baseIndent = listItem ? indentWidth(listItem[1]) : 0;
+  if (dashIndent <= baseIndent + 3) return before;
+  return text;
+}
+function indentWidth(indent) {
+  let width = 0;
+  for (const char of indent) {
+    width += char === "	" ? 4 - width % 4 : 1;
+  }
+  return width;
 }
 function hasUnclosedCodeFence(text) {
   const backticks = (text.match(/^[ \t]{0,3}```/gm) ?? []).length;
@@ -349,83 +763,16 @@ function closeSingleAsterisk(text) {
   const lastIndex = text.lastIndexOf("*");
   const after = text.slice(lastIndex + 1);
   if (after.length === 0 || /^[\s*]/.test(after)) return text;
-  return insertBeforeTrailingWhitespace(text, "*");
-}
-function insertBeforeTrailingWhitespace(text, marker) {
-  const trailing = text.match(/\s+$/)?.[0] ?? "";
-  const core = text.slice(0, text.length - trailing.length);
-  return core + marker + trailing;
-}
-function CopyIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      width: "1em",
-      height: "1em",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-      ]
-    }
-  );
-}
-function CheckIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      width: "1em",
-      height: "1em",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
-    }
-  );
-}
-function CopyButton({ text, className }) {
-  const [copied, setCopied] = useState(false);
-  const timeoutRef = useRef(null);
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current != null) clearTimeout(timeoutRef.current);
-    };
-  }, []);
-  const copy = () => {
-    const clipboard = navigator.clipboard;
-    if (!clipboard) return;
-    void clipboard.writeText(text).then(() => {
-      setCopied(true);
-      if (timeoutRef.current != null) clearTimeout(timeoutRef.current);
-      timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
-    }).catch(() => {
-    });
-  };
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: copy,
-      className,
-      "aria-label": copied ? "Copied" : "Copy code",
-      "data-copied": copied ? "" : void 0,
-      children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
-    }
-  );
+  return insertBeforeTrailingWhitespace(text, "*");
+}
+function insertBeforeTrailingWhitespace(text, marker) {
+  const trailing = text.match(/\s+$/)?.[0] ?? "";
+  const core = text.slice(0, text.length - trailing.length);
+  return core + marker + trailing;
 }
 
 // src/preprocess.ts
-var CODE_SPAN = /```[\s\S]*?```|`[^`\n]+`/;
+var CODE_SPAN = /```[\s\S]*?```|``[^\n]*?``|`[^`\n]+`/;
 function preprocessLaTeX(content) {
   const codeBlocks = [];
   content = content.replace(
@@ -478,237 +825,374 @@ function escapeBrackets(text) {
 function escapeMhchem(text) {
   return text.replaceAll("$\\ce{", "$\\\\ce{").replaceAll("$\\pu{", "$\\\\pu{");
 }
-var remarkPlugins = [remarkGfm, remarkMath];
-var rehypePlugins = [rehypeKatex];
-function cx(...inputs) {
-  const result = clsx(inputs);
-  return result === "" ? void 0 : result;
+var FOOTNOTE = /\[\^[\w-]{1,200}\]/;
+function countDollarRuns(text) {
+  let runs = 0;
+  for (let i = 0; i < text.length - 1; i++) {
+    if (text[i] === "$" && text[i + 1] === "$") {
+      runs++;
+      i++;
+    }
+  }
+  return runs;
 }
-function buildComponents(classNames, overrides, highlighter) {
-  const cn = classNames ?? {};
-  const o = overrides ?? {};
-  const Highlighter = highlighter;
-  return {
-    code({ node: _node, className, children, ...props }) {
-      const match = /language-(\w+)/.exec(className || "");
-      const codeText = String(children).replace(/\n$/, "");
-      const isBlock = match != null || String(children).includes("\n");
-      if (isBlock) {
-        const language = match?.[1] ?? "";
-        if (o.codeBlock) {
-          const CodeBlock = o.codeBlock;
-          return /* @__PURE__ */ jsx(
-            CodeBlock,
-            {
-              code: codeText,
-              language,
-              className: cn.codeBlock
-            }
-          );
-        }
-        return /* @__PURE__ */ jsxs("div", { className: cx("llm-code-block", cn.codeBlock), children: [
-          /* @__PURE__ */ jsxs("div", { className: cx("llm-code-header", cn.codeHeader), children: [
-            /* @__PURE__ */ jsx("span", { className: cx("llm-code-language", cn.codeLanguage), children: language }),
-            o.copyButton ? /* @__PURE__ */ jsx(o.copyButton, { text: codeText, className: cn.copyButton }) : /* @__PURE__ */ jsx(
-              CopyButton,
-              {
-                text: codeText,
-                className: cx("llm-copy-button", cn.copyButton)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "llm-code-body", children: Highlighter ? /* @__PURE__ */ jsx(Highlighter, { code: codeText, language }) : /* @__PURE__ */ jsx("code", { className: "llm-code-plain", children: codeText }) })
-        ] });
-      }
-      if (o.code) {
-        const InlineCode = o.code;
-        return /* @__PURE__ */ jsx(InlineCode, { className: cx("llm-code", cn.code, className), children });
-      }
-      return /* @__PURE__ */ jsx("code", { className: cx("llm-code", cn.code, className), ...props, children });
-    },
-    pre({ children }) {
-      if (o.pre) {
-        return /* @__PURE__ */ jsx(o.pre, { children });
-      }
-      return /* @__PURE__ */ jsx(Fragment, { children });
-    },
-    table({ children }) {
-      if (o.table) {
-        return /* @__PURE__ */ jsx(o.table, { className: cn.table, children });
-      }
-      return /* @__PURE__ */ jsx("div", { className: cx("llm-table-wrapper", cn.tableWrapper), children: /* @__PURE__ */ jsx("table", { className: cx("llm-table", cn.table), children }) });
-    },
-    th({ children }) {
-      if (o.th) {
-        return /* @__PURE__ */ jsx(o.th, { className: cn.th, children });
-      }
-      return /* @__PURE__ */ jsx("th", { className: cx("llm-th", cn.th), children });
-    },
-    td({ children }) {
-      if (o.td) {
-        return /* @__PURE__ */ jsx(o.td, { className: cn.td, children });
-      }
-      return /* @__PURE__ */ jsx("td", { className: cx("llm-td", cn.td), children });
-    },
-    blockquote({ children }) {
-      if (o.blockquote) {
-        return /* @__PURE__ */ jsx(o.blockquote, { className: cn.blockquote, children });
-      }
-      return /* @__PURE__ */ jsx("blockquote", { className: cx("llm-blockquote", cn.blockquote), children });
-    },
-    ul({ children }) {
-      if (o.ul) {
-        return /* @__PURE__ */ jsx(o.ul, { className: cn.ul, children });
-      }
-      return /* @__PURE__ */ jsx("ul", { className: cx("llm-ul", cn.ul), children });
-    },
-    ol({ children }) {
-      if (o.ol) {
-        return /* @__PURE__ */ jsx(o.ol, { className: cn.ol, children });
-      }
-      return /* @__PURE__ */ jsx("ol", { className: cx("llm-ol", cn.ol), children });
-    },
-    li({ children }) {
-      if (o.li) {
-        return /* @__PURE__ */ jsx(o.li, { className: cn.li, children });
-      }
-      return /* @__PURE__ */ jsx("li", { className: cx("llm-li", cn.li), children });
-    },
-    p({ children }) {
-      if (o.p) {
-        return /* @__PURE__ */ jsx(o.p, { className: cn.p, children });
-      }
-      return /* @__PURE__ */ jsx("p", { className: cx("llm-p", cn.p), children });
-    },
-    h1({ children }) {
-      if (o.h1) {
-        return /* @__PURE__ */ jsx(o.h1, { className: cn.h1, children });
-      }
-      return /* @__PURE__ */ jsx("h1", { className: cx("llm-h1", cn.h1), children });
-    },
-    h2({ children }) {
-      if (o.h2) {
-        return /* @__PURE__ */ jsx(o.h2, { className: cn.h2, children });
-      }
-      return /* @__PURE__ */ jsx("h2", { className: cx("llm-h2", cn.h2), children });
-    },
-    h3({ children }) {
-      if (o.h3) {
-        return /* @__PURE__ */ jsx(o.h3, { className: cn.h3, children });
-      }
-      return /* @__PURE__ */ jsx("h3", { className: cx("llm-h3", cn.h3), children });
-    },
-    h4({ children }) {
-      if (o.h4) {
-        return /* @__PURE__ */ jsx(o.h4, { className: cn.h4, children });
-      }
-      return /* @__PURE__ */ jsx("h4", { className: cx("llm-h4", cn.h4), children });
-    },
-    h5({ children }) {
-      if (o.h5) {
-        return /* @__PURE__ */ jsx(o.h5, { className: cn.h5, children });
+function countEscaped(text, second) {
+  let count = 0;
+  for (let i = 0; i < text.length - 1; i++) {
+    if (text[i] === "\\" && text[i + 1] === second) {
+      count++;
+      i++;
+    }
+  }
+  return count;
+}
+function hasOpenBlockMath(text) {
+  if (countDollarRuns(text) % 2 === 1) {
+    return true;
+  }
+  return countEscaped(text, "[") > countEscaped(text, "]");
+}
+function splitMarkdownBlocks(source) {
+  if (source === "" || /^\s*$/.test(source)) {
+    return [];
+  }
+  if (!/\n[ \t]*\n/.test(source)) {
+    return [source];
+  }
+  if (FOOTNOTE.test(source)) {
+    return [source];
+  }
+  let tokens;
+  try {
+    tokens = Lexer.lex(source, { gfm: true });
+  } catch {
+    return [source];
+  }
+  const blocks = [];
+  let cursor = 0;
+  for (const token of tokens) {
+    if (token.type === "def") {
+      return [source];
+    }
+    const raw = token.raw;
+    if (raw === "") {
+      continue;
+    }
+    const end = Math.min(cursor + raw.length, source.length);
+    const text = source.slice(cursor, end);
+    cursor = end;
+    const last = blocks.length - 1;
+    const previous = last >= 0 ? blocks[last] : void 0;
+    const mergeIntoPrevious = previous != null && (token.type === "space" || hasOpenBlockMath(previous));
+    if (mergeIntoPrevious) {
+      blocks[last] += text;
+    } else {
+      blocks.push(text);
+    }
+  }
+  if (blocks.length === 0) {
+    return [source];
+  }
+  if (cursor < source.length) {
+    blocks[blocks.length - 1] += source.slice(cursor);
+  }
+  if (blocks.join("") !== source) {
+    return [source];
+  }
+  return blocks;
+}
+
+// src/useMarkdownBlocks.ts
+function useMarkdownBlocks({
+  source,
+  blockMemoization,
+  repairPartialTokens,
+  showUnfinishedLatexBlocks,
+  smoothReveal
+}) {
+  const prevSourceRef = useRef("");
+  const processor = useMemo(() => {
+    const cache = /* @__PURE__ */ new Map();
+    const process = (block) => {
+      const repaired = repairPartialTokens ? completePartialTokens(block, { showUnfinishedLatexBlocks }) : block;
+      return preprocessLaTeX(repaired);
+    };
+    return { cache, process };
+  }, [repairPartialTokens, showUnfinishedLatexBlocks]);
+  const blocks = useMemo(() => {
+    if (source === "") {
+      prevSourceRef.current = source;
+      return [];
+    }
+    if (!source.startsWith(prevSourceRef.current)) {
+      processor.cache.clear();
+    }
+    prevSourceRef.current = source;
+    if (!blockMemoization) {
+      return [processor.process(source)];
+    }
+    const rawBlocks = splitMarkdownBlocks(source);
+    const lastIndex = rawBlocks.length - 1;
+    return rawBlocks.map((raw, index) => {
+      if (index === lastIndex) {
+        return processor.process(raw);
       }
-      return /* @__PURE__ */ jsx("h5", { className: cx("llm-h5", cn.h5), children });
-    },
-    h6({ children }) {
-      if (o.h6) {
-        return /* @__PURE__ */ jsx(o.h6, { className: cn.h6, children });
+      let done = processor.cache.get(raw);
+      if (done === void 0) {
+        done = processor.process(raw);
+        processor.cache.set(raw, done);
       }
-      return /* @__PURE__ */ jsx("h6", { className: cx("llm-h6", cn.h6), children });
-    },
-    input({ node: _node, type, checked, disabled, ...props }) {
-      if (type === "checkbox") {
-        if (o.checkbox) {
-          return /* @__PURE__ */ jsx(o.checkbox, { checked: Boolean(checked), className: cn.checkbox });
+      return done;
+    });
+  }, [source, blockMemoization, processor]);
+  const deferredBlocks = useDeferredValue(blocks);
+  const renderedBlocks = smoothReveal ? blocks : deferredBlocks;
+  const activeIndex = renderedBlocks.length - 1;
+  const activeSource = renderedBlocks[activeIndex] ?? "";
+  return { renderedBlocks, activeIndex, activeSource };
+}
+
+// src/smoothReveal.ts
+var CHAR_CLASS = "llm-char";
+var FADE_CLASS = "llm-fade";
+var BLOCK_CLASS = "llm-fade-block";
+var BLOCK_INLINE_CLASS = "llm-fade-block-inline";
+var BLOCK_SNAP_CLASS = "llm-fade-block-snap";
+var BLOCK_TAGS = /* @__PURE__ */ new Set(["pre", "table", "hr"]);
+var DECORATED_TAGS = /* @__PURE__ */ new Set(["blockquote", "li", "code"]);
+function hasClass(node, name) {
+  const className = node.properties?.className;
+  if (Array.isArray(className)) {
+    return className.includes(name);
+  }
+  return typeof className === "string" && className.split(/\s+/).includes(name);
+}
+function isComplexElement(node) {
+  return BLOCK_TAGS.has(node.tagName) || node.tagName === "img" || // KaTeX output (rehype-katex). `katex-display` is the block wrapper; a bare
+  // `katex` is inline math. Either way we fade the whole formula as one unit.
+  hasClass(node, "katex-display") || hasClass(node, "katex");
+}
+function createFadeRehypePlugin(options) {
+  const { state, onTotal } = options;
+  return function fadeRehypePlugin() {
+    return (tree) => {
+      const counter = { unit: 0 };
+      const makeFadeBlock = (node, inline, index, snap = false) => {
+        const className = inline ? [BLOCK_CLASS, BLOCK_INLINE_CLASS] : snap ? [BLOCK_CLASS, BLOCK_SNAP_CLASS] : [BLOCK_CLASS];
+        return {
+          type: "element",
+          tagName: inline ? "span" : "div",
+          properties: {
+            className,
+            style: `--i:${index}`
+          },
+          children: [node]
+        };
+      };
+      const processText = (node) => {
+        if (/^\s*$/.test(node.value)) {
+          return [node];
         }
-        return /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: Boolean(checked),
-            disabled: true,
-            "aria-label": checked ? "Completed task" : "Incomplete task",
-            className: cx("llm-checkbox", cn.checkbox),
-            readOnly: true
+        const chars = Array.from(node.value);
+        const out = [];
+        let plain = "";
+        const flushPlain = () => {
+          if (plain) {
+            out.push({ type: "text", value: plain });
+            plain = "";
           }
-        );
-      }
-      return /* @__PURE__ */ jsx(
-        "input",
-        {
-          type,
-          checked,
-          disabled,
-          readOnly: true,
-          ...props
+        };
+        for (const ch of chars) {
+          const index = counter.unit++;
+          if (index < state.committedUnits) {
+            plain += ch;
+            continue;
+          }
+          flushPlain();
+          out.push({
+            type: "element",
+            tagName: "span",
+            properties: { className: [CHAR_CLASS], style: `--i:${index}` },
+            children: [{ type: "text", value: ch }]
+          });
         }
-      );
-    },
-    a({ href, children }) {
-      if (o.a) {
-        return /* @__PURE__ */ jsx(o.a, { href, className: cn.a, children });
-      }
-      return /* @__PURE__ */ jsx(
-        "a",
-        {
-          href,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: cx("llm-a", cn.a),
-          children
+        flushPlain();
+        return out;
+      };
+      const processComplex = (node) => {
+        const index = counter.unit++;
+        if (index < state.committedUnits) {
+          return node;
         }
-      );
-    },
-    img({ node: _node, src, alt, title, className: _className, ...props }) {
-      if (o.img) {
-        const Image = o.img;
-        return /* @__PURE__ */ jsx(
-          Image,
-          {
-            src: typeof src === "string" ? src : void 0,
-            alt,
-            title,
-            className: cn.img
+        const inline = node.tagName === "img" || hasClass(node, "katex");
+        const snap = hasClass(node, "katex-display");
+        return makeFadeBlock(node, inline, index, snap);
+      };
+      const stampDecoration = (node, index) => {
+        const className = node.properties?.className;
+        const classes = Array.isArray(className) ? className.map(String) : typeof className === "string" ? className.split(/\s+/).filter(Boolean) : [];
+        classes.push(FADE_CLASS);
+        node.properties = {
+          ...node.properties,
+          className: classes,
+          style: `--i:${index}`
+        };
+      };
+      const processChildren = (parent) => {
+        const next = [];
+        for (const child of parent.children) {
+          if (child.type === "text") {
+            next.push(...processText(child));
+          } else if (child.type === "element") {
+            if (isComplexElement(child)) {
+              next.push(processComplex(child));
+            } else {
+              if (DECORATED_TAGS.has(child.tagName)) {
+                stampDecoration(child, counter.unit);
+              }
+              processChildren(child);
+              next.push(child);
+            }
+          } else {
+            next.push(child);
           }
-        );
-      }
-      return /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: typeof src === "string" ? src : void 0,
-          alt,
-          title,
-          className: cx("llm-img", cn.img),
-          ...props
         }
-      );
-    },
-    hr() {
-      if (o.hr) {
-        return /* @__PURE__ */ jsx(o.hr, { className: cn.hr });
+        parent.children = next;
+      };
+      processChildren(tree);
+      onTotal(counter.unit);
+    };
+  };
+}
+
+// src/useSmoothReveal.ts
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var SMOOTH_RAMP = 6;
+function useSmoothReveal({
+  activeSource,
+  activeKey,
+  enabled,
+  duration
+}) {
+  const rootRef = useRef(null);
+  const revealStateRef = useRef({ committedUnits: 0 });
+  const positionRef = useRef(0);
+  const targetRef = useRef(0);
+  const velocityRef = useRef(0);
+  const totalRef = useRef(0);
+  const rafRef = useRef(null);
+  const lastTsRef = useRef(0);
+  const prevSourceRef = useRef("");
+  const activeKeyRef = useRef(activeKey);
+  const snapRef = useRef(false);
+  const [, forceCommit] = useState(0);
+  const setRevealVar = (value) => {
+    rootRef.current?.style.setProperty("--llm-reveal", String(value));
+  };
+  if (enabled && activeKey !== activeKeyRef.current) {
+    activeKeyRef.current = activeKey;
+    positionRef.current = 0;
+    targetRef.current = 0;
+    velocityRef.current = 0;
+    revealStateRef.current.committedUnits = 0;
+    prevSourceRef.current = "";
+    snapRef.current = false;
+  }
+  if (enabled) {
+    const isAppend = activeSource.startsWith(prevSourceRef.current);
+    if (isAppend) {
+      const safe = Math.floor(positionRef.current) - SMOOTH_RAMP;
+      if (safe > revealStateRef.current.committedUnits) {
+        revealStateRef.current.committedUnits = safe;
       }
-      return /* @__PURE__ */ jsx("hr", { className: cx("llm-hr", cn.hr) });
-    },
-    strong({ children }) {
-      if (o.strong) {
-        return /* @__PURE__ */ jsx(o.strong, { className: cn.strong, children });
+    } else {
+      snapRef.current = true;
+      revealStateRef.current.committedUnits = Number.MAX_SAFE_INTEGER;
+    }
+    prevSourceRef.current = activeSource;
+  }
+  const fadePlugin = useMemo(() => {
+    if (!enabled) {
+      return null;
+    }
+    return createFadeRehypePlugin({
+      state: revealStateRef.current,
+      onTotal: (total) => {
+        totalRef.current = total;
       }
-      return /* @__PURE__ */ jsx("strong", { className: cx("llm-strong", cn.strong), children });
-    },
-    em({ children }) {
-      if (o.em) {
-        return /* @__PURE__ */ jsx(o.em, { className: cn.em, children });
+    });
+  }, [enabled]);
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
       }
-      return /* @__PURE__ */ jsx("em", { className: cx("llm-em", cn.em), children });
-    },
-    del({ children }) {
-      if (o.del) {
-        return /* @__PURE__ */ jsx(o.del, { className: cn.del, children });
+      return;
+    }
+    const total = totalRef.current;
+    if (snapRef.current) {
+      snapRef.current = false;
+      const end = total + SMOOTH_RAMP;
+      positionRef.current = end;
+      targetRef.current = end;
+      velocityRef.current = 0;
+      revealStateRef.current.committedUnits = total;
+      setRevealVar(end);
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
       }
-      return /* @__PURE__ */ jsx("del", { className: cx("llm-del", cn.del), children });
+      return;
     }
-  };
+    setRevealVar(positionRef.current);
+    targetRef.current = total + SMOOTH_RAMP;
+    const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const finishImmediately = reduceMotion || duration <= 0 || typeof requestAnimationFrame !== "function";
+    if (finishImmediately) {
+      positionRef.current = targetRef.current;
+      setRevealVar(positionRef.current);
+      if (revealStateRef.current.committedUnits !== total) {
+        revealStateRef.current.committedUnits = total;
+        forceCommit((n) => n + 1);
+      }
+      return;
+    }
+    velocityRef.current = (targetRef.current - positionRef.current) / duration;
+    lastTsRef.current = performance.now();
+    const tick = (ts) => {
+      const dt = Math.max(0, ts - lastTsRef.current);
+      lastTsRef.current = ts;
+      let next = positionRef.current + velocityRef.current * dt;
+      if (next >= targetRef.current) {
+        next = targetRef.current;
+        positionRef.current = next;
+        setRevealVar(next);
+        rafRef.current = null;
+        if (revealStateRef.current.committedUnits !== totalRef.current) {
+          revealStateRef.current.committedUnits = totalRef.current;
+          forceCommit((n) => n + 1);
+        }
+        return;
+      }
+      positionRef.current = next;
+      setRevealVar(next);
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    if (rafRef.current == null) {
+      rafRef.current = requestAnimationFrame(tick);
+    }
+    return () => {
+      if (rafRef.current != null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [activeSource, activeKey, enabled, duration]);
+  const revealStyle = enabled ? { "--llm-ramp": String(SMOOTH_RAMP) } : void 0;
+  return { rootRef, fadePlugin, revealStyle };
 }
+var remarkPlugins = [remarkGfm, remarkMath];
 function LLMMessage({
   children,
   content,
@@ -717,27 +1201,66 @@ function LLMMessage({
   components,
   completePartialTokens: repairPartialTokens = true,
   showUnfinishedLatexBlocks = true,
+  smoothReveal = false,
+  smoothRevealDuration = 300,
+  blockMemoization = true,
   highlighter,
+  style,
   ...rest
 }) {
   const source = content ?? children ?? "";
   const markdownComponents = useMemo(
-    () => buildComponents(classNames, components, highlighter),
+    () => buildMarkdownComponents(classNames, components, highlighter),
     [classNames, components, highlighter]
   );
-  const processed = useMemo(() => {
-    const repaired = repairPartialTokens ? completePartialTokens(source, { showUnfinishedLatexBlocks }) : source;
-    return preprocessLaTeX(repaired);
-  }, [source, repairPartialTokens, showUnfinishedLatexBlocks]);
-  return /* @__PURE__ */ jsx("div", { className: cx("llm-message", classNames?.root, className), ...rest, children: /* @__PURE__ */ jsx(
-    ReactMarkdown,
+  const { renderedBlocks, activeIndex, activeSource } = useMarkdownBlocks({
+    source,
+    blockMemoization,
+    repairPartialTokens,
+    showUnfinishedLatexBlocks,
+    smoothReveal
+  });
+  const { rootRef, fadePlugin, revealStyle } = useSmoothReveal({
+    activeSource,
+    activeKey: activeIndex,
+    enabled: smoothReveal,
+    duration: smoothRevealDuration
+  });
+  const pluginSets = useMemo(() => {
+    const math = [rehypeKatex];
+    const none = [];
+    return {
+      math,
+      none,
+      activeMath: fadePlugin ? [rehypeKatex, fadePlugin] : math,
+      activeNone: fadePlugin ? [fadePlugin] : none
+    };
+  }, [fadePlugin]);
+  const rootStyle = revealStyle ? { ...style, ...revealStyle } : style;
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      remarkPlugins,
-      rehypePlugins,
-      components: markdownComponents,
-      children: processed
+      ref: rootRef,
+      className: cx("llm-message", classNames?.root, className),
+      style: rootStyle,
+      ...rest,
+      children: renderedBlocks.map((block, index) => {
+        const isActive = index === activeIndex;
+        const hasMath = block.includes("$");
+        const rehypePlugins = isActive ? hasMath ? pluginSets.activeMath : pluginSets.activeNone : hasMath ? pluginSets.math : pluginSets.none;
+        return /* @__PURE__ */ jsx(
+          MarkdownBlock,
+          {
+            content: block,
+            components: markdownComponents,
+            remarkPlugins,
+            rehypePlugins
+          },
+          index
+        );
+      })
     }
-  ) });
+  );
 }
 
 export { LLMMessage, completePartialTokens, escapeBrackets, escapeMhchem, preprocessLaTeX };