@ai-react-markdown/mantine 2.11.0 → 2.13.0

package/dist/index.js

@@ -24,8 +24,14 @@ var MantineAIMDefaultExtraStyles = ({ children }) => {
 var DefaultExtraStyles_default = MantineAIMDefaultExtraStyles;
 
 // src/components/customized/PreCode.tsx
-import { memo as memo3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { CodeHighlight, CodeHighlightTabs as CodeHighlightTabs2 } from "@mantine/code-highlight";
+import { createContext, memo as memo3, useContext, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import {
+  CodeHighlight,
+  CodeHighlightTabs as CodeHighlightTabs2,
+  CodeHighlightControl as CodeHighlightControl2,
+  CodeHighlightAdapterProvider,
+  useHighlight
+} from "@mantine/code-highlight";
 import { useAIMarkdownState as useAIMarkdownState2, useAIMarkdownTheme as useAIMarkdownTheme2 } from "@ai-react-markdown/core";
 
 // src/hooks/useMantineCodeBlockOptions.ts
@@ -35,7 +41,10 @@ import { useAIMarkdownBehaviors } from "@ai-react-markdown/core";
 // src/defs.tsx
 var defaultMantineCodeBlockOptions = Object.freeze({
   defaultExpanded: true,
-  autoDetectUnknownLanguage: false
+  autoDetectUnknownLanguage: false,
+  formatJson: true,
+  expandNestedJson: true,
+  highlightIntervalMs: 50
 });
 
 // src/hooks/useMantineCodeBlockOptions.ts
@@ -48,10 +57,50 @@ function useMantineCodeBlockOptions() {
       const value = group?.[key];
       if (value !== void 0) resolved[key] = value;
     }
+    if (!Number.isFinite(resolved.highlightIntervalMs) || resolved.highlightIntervalMs < 0) {
+      resolved.highlightIntervalMs = defaultMantineCodeBlockOptions.highlightIntervalMs;
+    }
     return resolved;
   }, [group]);
 }
 
+// src/components/customized/MermaidCode/renderQueue.ts
+function createRenderQueue() {
+  const pending = /* @__PURE__ */ new Map();
+  let running = false;
+  async function drain() {
+    if (running) return;
+    running = true;
+    try {
+      while (pending.size) {
+        const [owner, job] = pending.entries().next().value;
+        pending.delete(owner);
+        try {
+          await job.run();
+          job.resolve();
+        } catch (error) {
+          job.reject(error);
+        }
+      }
+    } finally {
+      running = false;
+    }
+  }
+  return {
+    enqueue(owner, run) {
+      pending.get(owner)?.resolve();
+      const promise = new Promise((resolve, reject) => pending.set(owner, { run, resolve, reject }));
+      void drain();
+      return promise;
+    },
+    cancel(owner) {
+      pending.get(owner)?.resolve();
+      pending.delete(owner);
+    }
+  };
+}
+var mermaidRenderQueue = createRenderQueue();
+
 // src/components/customized/MermaidCode/index.tsx
 import { memo as memo2, useEffect, useRef, useState, useCallback } from "react";
 import { CodeHighlightControl, CodeHighlightTabs } from "@mantine/code-highlight";
@@ -173,14 +222,7 @@ var MantineAIMMermaidCode = memo2((props) => {
         if (!ref.current || cancelled || renderVersion !== renderVersionRef.current) {
           return;
         }
-        let rendered = await mermaid.render(generateMermaidUUID(), props.code);
-        if (initializedTheme !== (isDark ? "dark" : "light")) {
-          if (!ref.current || cancelled || renderVersion !== renderVersionRef.current) {
-            return;
-          }
-          ensureMermaidInitialized(mermaid, isDark);
-          rendered = await mermaid.render(generateMermaidUUID(), props.code);
-        }
+        const rendered = await mermaid.render(generateMermaidUUID(), props.code);
         const { svg, bindFunctions, diagramType } = rendered;
         if (!ref.current || cancelled || renderVersion !== renderVersionRef.current) {
           return;
@@ -208,9 +250,11 @@ var MantineAIMMermaidCode = memo2((props) => {
         applyView({ kind: "error" });
       }
     };
-    void renderMermaid();
+    const owner = renderVersionRef;
+    void mermaidRenderQueue.enqueue(owner, renderMermaid);
     return () => {
       cancelled = true;
+      mermaidRenderQueue.cancel(owner);
       if (retryTimer !== void 0) clearTimeout(retryTimer);
     };
   }, [props.code, isDark, showOriginalCode, streaming, loadAttempt]);
@@ -361,7 +405,141 @@ MantineAIMMermaidCode.displayName = "MantineAIMMermaidCode";
 var MermaidCode_default = MantineAIMMermaidCode;
 
 // src/components/customized/PreCode.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { CopyButton as CopyButton2 } from "@mantine/core";
+
+// src/components/customized/formatJson.ts
+function prettyPrintJson(text, expandNested = true) {
+  try {
+    return format(text, expandNested, 0);
+  } catch {
+    return text;
+  }
+}
+function format(text, expandNested, baseIndent) {
+  JSON.parse(text);
+  const tokens = text.match(/"(?:\\[\s\S]|[^"\\])*"|-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?|true|false|null|[{}[\],:]/g) ?? [];
+  const out = [];
+  let indent = baseIndent;
+  const newline = () => out.push("\n", "  ".repeat(indent));
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token === "{" || token === "[") {
+      out.push(token);
+      if (tokens[i + 1] !== (token === "{" ? "}" : "]")) {
+        indent++;
+        newline();
+      }
+    } else if (token === "}" || token === "]") {
+      if (tokens[i - 1] !== (token === "}" ? "{" : "[")) {
+        indent--;
+        newline();
+      }
+      out.push(token);
+    } else if (token === ",") {
+      out.push(",");
+      newline();
+    } else if (token === ":") {
+      out.push(": ");
+    } else if (token.startsWith('"')) {
+      const value = JSON.parse(token);
+      const trimmed = value.trim();
+      if (expandNested && tokens[i + 1] !== ":" && /^[{[]/.test(trimmed) && indent < 100) {
+        try {
+          out.push(format(trimmed, true, indent));
+          continue;
+        } catch {
+        }
+      }
+      out.push(JSON.stringify(value));
+    } else {
+      out.push(token);
+    }
+  }
+  return out.join("");
+}
+
+// src/components/customized/jsonCompleteness.ts
+function createJsonCompletenessScanner() {
+  let previous = "";
+  let depth = 0;
+  let quoted = false;
+  let escaped = false;
+  let invalid = false;
+  let last = "";
+  return (text) => {
+    let from = previous.length;
+    if (!text.startsWith(previous)) {
+      from = 0;
+      depth = 0;
+      quoted = escaped = invalid = false;
+      last = "";
+    }
+    previous = text;
+    for (let i = from; i < text.length; i++) {
+      const c = text[i];
+      if (!/\s/.test(c)) last = c;
+      if (quoted) {
+        if (escaped) escaped = false;
+        else if (c === "\\") escaped = true;
+        else if (c === '"') quoted = false;
+      } else if (c === '"') quoted = true;
+      else if (c === "{" || c === "[") depth++;
+      else if (c === "}" || c === "]") {
+        depth--;
+        if (depth < 0) invalid = true;
+      }
+    }
+    return !invalid && !quoted && depth === 0 && (last === "}" || last === "]");
+  };
+}
+
+// src/components/customized/useCodeFrame.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/components/customized/codeFrame.ts
+function createCodeFrame(initial, publish) {
+  let shown = initial;
+  let latest = initial;
+  let delay = 0;
+  let timer;
+  const cancel = () => {
+    if (timer !== void 0) clearTimeout(timer);
+    timer = void 0;
+  };
+  const flush = () => {
+    cancel();
+    if (shown.code === latest.code && shown.language === latest.language) return;
+    shown = latest;
+    publish(shown);
+  };
+  return {
+    update(next, streaming, interval) {
+      const replaced = next.language !== latest.language || !next.code.startsWith(latest.code);
+      latest = next;
+      if (delay !== interval) cancel();
+      delay = interval;
+      if (!streaming || interval === 0 || replaced) return flush();
+      if (shown.code === next.code && shown.language === next.language) return cancel();
+      timer ??= setTimeout(flush, interval);
+    },
+    // Cancellation is reversible: Strict Mode replays the update effect.
+    dispose: cancel
+  };
+}
+
+// src/components/customized/useCodeFrame.ts
+function useCodeFrame(code, language, streaming, interval) {
+  const [frame, setFrame] = useState2(() => ({ code, language }));
+  const [controller] = useState2(() => createCodeFrame({ code, language }, setFrame));
+  useEffect2(() => {
+    controller.update({ code, language }, streaming, interval);
+  }, [controller, code, language, streaming, interval]);
+  useEffect2(() => () => controller.dispose(), [controller]);
+  return !streaming || interval === 0 || language !== frame.language || !code.startsWith(frame.code) ? code : frame.code;
+}
+
+// src/components/customized/PreCode.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var hljsAutoPromise = null;
 var loadHljsForAutoDetect = () => {
   hljsAutoPromise ??= import("highlight.js").then(
@@ -377,14 +555,20 @@ var AUTODETECT_MIN_CHARS = 32;
 var HLJS_LOAD_RETRIES = 3;
 var HLJS_LOAD_RETRY_MS = 1500;
 function useAutoDetectedLanguage(codeText, enabled, streaming) {
-  const [detected, setDetected] = useState2(
+  const [detected, setDetected] = useState3(
     null
   );
-  const [loadAttempt, setLoadAttempt] = useState2(0);
+  const [loadAttempt, setLoadAttempt] = useState3(0);
   const loadFailuresRef = useRef2(0);
-  useEffect2(() => {
-    if (!enabled) return;
-    const prior = detected !== null && codeText.length < detected.atLength ? null : detected;
+  const previousTextRef = useRef2(codeText);
+  useEffect3(() => {
+    const appended = codeText.startsWith(previousTextRef.current);
+    previousTextRef.current = codeText;
+    if (!enabled) {
+      if (detected) setDetected(null);
+      return;
+    }
+    const prior = !appended || detected !== null && codeText.length < detected.atLength ? null : detected;
     if (prior !== detected) setDetected(null);
     if (codeText.length < AUTODETECT_MIN_CHARS) return;
     const due = prior === null || // Not streaming: the verdict must be for THIS text (end-of-stream, or a
@@ -423,55 +607,92 @@ function preloadMantineCodeAssets() {
     () => void 0
   );
 }
-function prettyPrintJson(text) {
-  let parsed;
-  try {
-    parsed = JSON.parse(text);
-  } catch {
-    return text;
-  }
-  return JSON.stringify(expandNestedJson(parsed), null, 2);
+var RawCodeContext = createContext("");
+function RawCodeCopy() {
+  const code = useContext(RawCodeContext);
+  return /* @__PURE__ */ jsx4(CopyButton2, { value: code, children: ({ copied, copy }) => /* @__PURE__ */ jsx4(
+    CodeHighlightControl2,
+    {
+      tooltipLabel: copied ? "Copied" : "Copy",
+      "aria-label": copied ? "Copied" : "Copy code",
+      onClick: copy,
+      children: copied ? "\u2713" : /* @__PURE__ */ jsxs2(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx4("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
+            /* @__PURE__ */ jsx4("path", { d: "M16 8V4H4v12h4" })
+          ]
+        }
+      )
+    }
+  ) });
 }
-function expandNestedJson(value) {
-  if (typeof value === "string") {
-    const t = value.trim();
-    if (t.length > 1 && (t[0] === "{" || t[0] === "[")) {
-      try {
-        const inner = JSON.parse(t);
-        if (inner !== null && typeof inner === "object") return expandNestedJson(inner);
-      } catch {
+function createCachedHighlightAdapter(highlight) {
+  let previous;
+  let result;
+  return {
+    getHighlighter: () => (input) => {
+      if (!previous || input.code !== previous.code || input.language !== previous.language || input.colorScheme !== previous.colorScheme) {
+        result = highlight(input);
+        previous = input;
       }
+      return result;
     }
-    return value;
-  }
-  if (Array.isArray(value)) return value.map(expandNestedJson);
-  if (value !== null && typeof value === "object") {
-    const out = /* @__PURE__ */ Object.create(null);
-    for (const [k, v] of Object.entries(value)) out[k] = expandNestedJson(v);
-    return out;
-  }
-  return value;
+  };
 }
-function jsonLooksComplete(text) {
-  if (!/[}\]]\s*$/.test(text)) return false;
-  let depth = 0;
-  let inString = false;
-  for (let i = 0; i < text.length; i++) {
-    const c = text.charCodeAt(i);
-    if (inString) {
-      if (c === 92) i += 1;
-      else if (c === 34) inString = false;
-    } else if (c === 34) {
-      inString = true;
-    } else if (c === 123 || c === 91) {
-      depth += 1;
-    } else if (c === 125 || c === 93) {
-      depth -= 1;
-      if (depth < 0) return false;
+var OrdinaryCodeHighlight = memo3(function OrdinaryCodeHighlight2({
+  code,
+  language,
+  fileName,
+  fontSize,
+  defaultExpanded
+}) {
+  const highlight = useHighlight();
+  const adapter = useMemo2(() => createCachedHighlightAdapter(highlight), [highlight]);
+  return /* @__PURE__ */ jsx4(CodeHighlightAdapterProvider, { adapter, children: fileName === "unknown" ? /* @__PURE__ */ jsx4(
+    CodeHighlight,
+    {
+      mb: 15,
+      fz: fontSize,
+      w: "100%",
+      code,
+      withBorder: true,
+      withExpandButton: true,
+      defaultExpanded,
+      maxCollapsedHeight: "320px",
+      withCopyButton: false,
+      controls: [/* @__PURE__ */ jsx4(RawCodeCopy, {}, "copy")]
     }
-  }
-  return depth === 0 && !inString;
-}
+  ) : /* @__PURE__ */ jsx4(
+    CodeHighlightTabs2,
+    {
+      mb: 15,
+      fz: fontSize,
+      w: "100%",
+      code: [
+        {
+          fileName,
+          code,
+          language
+        }
+      ],
+      withBorder: true,
+      withExpandButton: true,
+      defaultExpanded,
+      maxCollapsedHeight: "320px",
+      withCopyButton: false,
+      controls: [/* @__PURE__ */ jsx4(RawCodeCopy, {}, "copy")]
+    }
+  ) });
+});
 var SpecialCodeLanguage = /* @__PURE__ */ ((SpecialCodeLanguage2) => {
   SpecialCodeLanguage2["Mermaid"] = "mermaid";
   return SpecialCodeLanguage2;
@@ -481,7 +702,7 @@ var MantineAIMPreCode = memo3(
   (props) => {
     const { fontSize } = useAIMarkdownTheme2();
     const { streaming } = useAIMarkdownState2();
-    const { autoDetectUnknownLanguage, defaultExpanded } = useMantineCodeBlockOptions();
+    const { autoDetectUnknownLanguage, defaultExpanded, formatJson, expandNestedJson, highlightIntervalMs } = useMantineCodeBlockOptions();
     const detectedLanguage = useAutoDetectedLanguage(
       props.codeText,
       autoDetectUnknownLanguage && !props.existLanguage,
@@ -493,44 +714,25 @@ var MantineAIMPreCode = memo3(
       [codeLanguage]
     );
     const isSpecialCodeBlock = SPECIAL_LANGUAGES.has(codeLanguage);
+    const [scanJson] = useState3(createJsonCompletenessScanner);
+    const jsonComplete = useMemo2(
+      () => usedCodeLanguage === "json" && formatJson && streaming ? scanJson(props.codeText) : false,
+      [usedCodeLanguage, formatJson, streaming, scanJson, props.codeText]
+    );
     const normalCodeBlockContent = useMemo2(() => {
       if (isSpecialCodeBlock) return null;
       let usedCodeStr = props.codeText;
-      if (usedCodeStr && usedCodeLanguage === "json" && (!streaming || jsonLooksComplete(usedCodeStr))) {
-        usedCodeStr = prettyPrintJson(usedCodeStr);
+      if (formatJson && usedCodeStr && usedCodeLanguage === "json" && (!streaming || jsonComplete)) {
+        usedCodeStr = prettyPrintJson(usedCodeStr, expandNestedJson);
       }
-      return usedFileName === "unknown" ? /* @__PURE__ */ jsx4(
-        CodeHighlight,
-        {
-          mb: 15,
-          fz: fontSize,
-          w: "100%",
-          code: usedCodeStr,
-          withBorder: true,
-          withExpandButton: true,
-          defaultExpanded,
-          maxCollapsedHeight: "320px"
-        }
-      ) : /* @__PURE__ */ jsx4(
-        CodeHighlightTabs2,
-        {
-          mb: 15,
-          fz: fontSize,
-          w: "100%",
-          code: [
-            {
-              fileName: usedFileName,
-              code: usedCodeStr,
-              language: usedCodeLanguage
-            }
-          ],
-          withBorder: true,
-          withExpandButton: true,
-          defaultExpanded,
-          maxCollapsedHeight: "320px"
-        }
-      );
-    }, [isSpecialCodeBlock, props.codeText, usedCodeLanguage, usedFileName, fontSize, defaultExpanded, streaming]);
+      return usedCodeStr;
+    }, [isSpecialCodeBlock, props.codeText, usedCodeLanguage, streaming, formatJson, expandNestedJson, jsonComplete]);
+    const displayedCode = useCodeFrame(
+      normalCodeBlockContent ?? "",
+      usedCodeLanguage,
+      streaming && !isSpecialCodeBlock,
+      highlightIntervalMs
+    );
     const specialCodeBlockContent = useMemo2(() => {
       switch (codeLanguage) {
         case "mermaid" /* Mermaid */:
@@ -539,7 +741,16 @@ var MantineAIMPreCode = memo3(
           return null;
       }
     }, [codeLanguage, props.codeText]);
-    return isSpecialCodeBlock ? specialCodeBlockContent : normalCodeBlockContent;
+    return isSpecialCodeBlock ? specialCodeBlockContent : /* @__PURE__ */ jsx4(RawCodeContext.Provider, { value: props.codeText, children: /* @__PURE__ */ jsx4(
+      OrdinaryCodeHighlight,
+      {
+        code: displayedCode,
+        language: usedCodeLanguage,
+        fileName: usedFileName,
+        fontSize,
+        defaultExpanded
+      }
+    ) });
   }
 );
 MantineAIMPreCode.displayName = "MantineAIMPreCode";
@@ -555,13 +766,14 @@ var MANTINE_STABILITY_TABLE = {
 var DefaultCustomComponents = {
   pre: ({ node, ...usefulProps }) => {
     const code = node?.children[0];
-    if (!code || code.type !== "element" || code.tagName !== "code" || !code.position) {
+    if (!code || code.type !== "element" || code.tagName !== "code" || !code.position || node?.children.length !== 1 || code.children.some((child) => !("value" in child) || typeof child.value !== "string") || Object.keys(code.properties ?? {}).some((key2) => key2 !== "className") || Object.keys(node.properties ?? {}).length > 0) {
       return /* @__PURE__ */ jsx5("pre", { ...usefulProps });
     }
     const key = `pre-code-${node?.position?.start?.offset || 0}`;
     const classNames = code.properties?.className;
     const classList = Array.isArray(classNames) ? classNames.filter((c) => typeof c === "string") : typeof classNames === "string" ? classNames.split(/\s+/) : [];
     const detectedLanguage = classList.find((className) => className.startsWith("language-"))?.substring("language-".length);
+    if (classList.some((className) => !className.startsWith("language-"))) return /* @__PURE__ */ jsx5("pre", { ...usefulProps });
     const codeText = code.children.map((child) => child.value ?? "").join("");
     return /* @__PURE__ */ jsx5(PreCode_default, { codeText, existLanguage: detectedLanguage }, key);
   }