@ai-react-markdown/mantine 2.11.0 → 2.12.0

package/dist/index.js

@@ -25,7 +25,7 @@ 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 { CodeHighlight, CodeHighlightTabs as CodeHighlightTabs2, CodeHighlightControl as CodeHighlightControl2 } from "@mantine/code-highlight";
 import { useAIMarkdownState as useAIMarkdownState2, useAIMarkdownTheme as useAIMarkdownTheme2 } from "@ai-react-markdown/core";
 
 // src/hooks/useMantineCodeBlockOptions.ts
@@ -35,7 +35,9 @@ import { useAIMarkdownBehaviors } from "@ai-react-markdown/core";
 // src/defs.tsx
 var defaultMantineCodeBlockOptions = Object.freeze({
   defaultExpanded: true,
-  autoDetectUnknownLanguage: false
+  autoDetectUnknownLanguage: false,
+  formatJson: true,
+  expandNestedJson: true
 });
 
 // src/hooks/useMantineCodeBlockOptions.ts
@@ -52,6 +54,43 @@ function useMantineCodeBlockOptions() {
   }, [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 +212,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 +240,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 +395,96 @@ 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/PreCode.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var hljsAutoPromise = null;
 var loadHljsForAutoDetect = () => {
   hljsAutoPromise ??= import("highlight.js").then(
@@ -382,9 +505,15 @@ function useAutoDetectedLanguage(codeText, enabled, streaming) {
   );
   const [loadAttempt, setLoadAttempt] = useState2(0);
   const loadFailuresRef = useRef2(0);
+  const previousTextRef = useRef2(codeText);
   useEffect2(() => {
-    if (!enabled) return;
-    const prior = detected !== null && codeText.length < detected.atLength ? null : detected;
+    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,54 +552,31 @@ function preloadMantineCodeAssets() {
     () => void 0
   );
 }
-function prettyPrintJson(text) {
-  let parsed;
-  try {
-    parsed = JSON.parse(text);
-  } catch {
-    return text;
-  }
-  return JSON.stringify(expandNestedJson(parsed), null, 2);
-}
-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 {
-      }
-    }
-    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;
+function RawCodeCopy({ code }) {
+  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" })
+          ]
+        }
+      )
     }
-  }
-  return depth === 0 && !inString;
+  ) });
 }
 var SpecialCodeLanguage = /* @__PURE__ */ ((SpecialCodeLanguage2) => {
   SpecialCodeLanguage2["Mermaid"] = "mermaid";
@@ -481,7 +587,7 @@ var MantineAIMPreCode = memo3(
   (props) => {
     const { fontSize } = useAIMarkdownTheme2();
     const { streaming } = useAIMarkdownState2();
-    const { autoDetectUnknownLanguage, defaultExpanded } = useMantineCodeBlockOptions();
+    const { autoDetectUnknownLanguage, defaultExpanded, formatJson, expandNestedJson } = useMantineCodeBlockOptions();
     const detectedLanguage = useAutoDetectedLanguage(
       props.codeText,
       autoDetectUnknownLanguage && !props.existLanguage,
@@ -493,11 +599,16 @@ var MantineAIMPreCode = memo3(
       [codeLanguage]
     );
     const isSpecialCodeBlock = SPECIAL_LANGUAGES.has(codeLanguage);
+    const [scanJson] = useState2(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,
@@ -509,7 +620,9 @@ var MantineAIMPreCode = memo3(
           withBorder: true,
           withExpandButton: true,
           defaultExpanded,
-          maxCollapsedHeight: "320px"
+          maxCollapsedHeight: "320px",
+          withCopyButton: false,
+          controls: [/* @__PURE__ */ jsx4(RawCodeCopy, { code: props.codeText }, "copy")]
         }
       ) : /* @__PURE__ */ jsx4(
         CodeHighlightTabs2,
@@ -527,10 +640,23 @@ var MantineAIMPreCode = memo3(
           withBorder: true,
           withExpandButton: true,
           defaultExpanded,
-          maxCollapsedHeight: "320px"
+          maxCollapsedHeight: "320px",
+          withCopyButton: false,
+          controls: [/* @__PURE__ */ jsx4(RawCodeCopy, { code: props.codeText }, "copy")]
         }
       );
-    }, [isSpecialCodeBlock, props.codeText, usedCodeLanguage, usedFileName, fontSize, defaultExpanded, streaming]);
+    }, [
+      isSpecialCodeBlock,
+      props.codeText,
+      usedCodeLanguage,
+      usedFileName,
+      fontSize,
+      defaultExpanded,
+      streaming,
+      formatJson,
+      expandNestedJson,
+      jsonComplete
+    ]);
     const specialCodeBlockContent = useMemo2(() => {
       switch (codeLanguage) {
         case "mermaid" /* Mermaid */:
@@ -555,13 +681,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);
   }