@ai-react-markdown/mantine 2.11.0 → 2.13.0

package/README.md

@@ -69,7 +69,7 @@ yarn add @ai-react-markdown/mantine @ai-react-markdown/core
 {
   "react": ">=19",
   "react-dom": ">=19",
-  "@ai-react-markdown/core": "^2.11.0",
+  "@ai-react-markdown/core": "^2.13.0",
   "@mantine/core": "^9.0.0",
   "@mantine/code-highlight": "^9.0.0",
   "highlight.js": "^11.11.2"
@@ -150,10 +150,13 @@ The Mantine package adds one behavior group on top of core's flat props: the `co
 
 ### `codeBlock` (`Partial<MantineCodeBlockOptions>`)
 
-| Field                       | Type      | Default | Description                                                                                                                 |
-| --------------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `defaultExpanded`           | `boolean` | `true`  | Whether code blocks start in their expanded state. When `false`, long blocks are collapsed with an expand button.           |
-| `autoDetectUnknownLanguage` | `boolean` | `false` | When `true`, uses `highlight.js`'s `highlightAuto` to determine the language of code blocks lacking an explicit annotation. |
+| Field                       | Type      | Default | Description                                                                                                                                                                         |
+| --------------------------- | --------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `defaultExpanded`           | `boolean` | `true`  | Whether code blocks start in their expanded state. When `false`, long blocks are collapsed with an expand button.                                                                   |
+| `autoDetectUnknownLanguage` | `boolean` | `false` | When `true`, uses `highlight.js`'s `highlightAuto` to determine the language of code blocks lacking an explicit annotation.                                                         |
+| `formatJson`                | `boolean` | `true`  | Format JSON while preserving number tokens, key order and duplicate keys. Set `false` to display source text.                                                                       |
+| `expandNestedJson`          | `boolean` | `true`  | When JSON formatting is enabled, expand string values containing JSON objects or arrays. Set `false` for whitespace formatting only.                                                |
+| `highlightIntervalMs`       | `number`  | `50`    | Coalesce streaming code display updates over this interval in milliseconds; `0` updates every frame. Completion and replacement update immediately; copy always uses latest source. |
 
 ### Example: Collapsed Code Blocks
 
@@ -237,13 +240,15 @@ Activated by importing `@ai-react-markdown/mantine/styles.css` in your app entry
 
 The Mantine package installs a default `<pre>` renderer (`MantineAIMPreCode`) that powers all code-block features. Behavior by code-block flavor:
 
-| Code-block flavor                          | Rendered as                 | Notes                                                                                                                                                                                                                                                                              |
-| ------------------------------------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Annotated, known language (e.g. ` ```ts `) | `<CodeHighlightTabs>`       | Tab label = language name (lower-cased)                                                                                                                                                                                                                                            |
-| Annotated, unknown language identifier     | `<CodeHighlightTabs>`       | Tab label = the identifier (lower-cased); Mantine's highlight adapter degrades an unknown language to plaintext                                                                                                                                                                    |
-| No language annotation                     | `<CodeHighlight>` plaintext | Label = `"unknown"`. With `codeBlock.autoDetectUnknownLanguage: true`, `hljs.highlightAuto` guesses early, re-checks as the block grows, and settles at end of stream — label/highlighting upgrade in place                                                                        |
-| ` ```mermaid ` (any case)                  | Interactive Mermaid diagram | See [Mermaid Diagrams](#mermaid-diagrams); the language match is case-insensitive                                                                                                                                                                                                  |
-| ` ```json ` (any case)                     | Pretty-printed JSON         | As soon as the block looks complete (ends in `}`/`]` with balanced brackets outside strings), parsed, string values holding a nested JSON object/array expanded (primitive-looking strings such as `"true"` stay strings), then re-serialized with 2-space indent before rendering |
+| Code-block flavor                          | Rendered as                 | Notes                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Annotated, known language (e.g. ` ```ts `) | `<CodeHighlightTabs>`       | Tab label = language name (lower-cased)                                                                                                                                                                                                                                                                                                                  |
+| Annotated, unknown language identifier     | `<CodeHighlightTabs>`       | Tab label = the identifier (lower-cased); Mantine's highlight adapter degrades an unknown language to plaintext                                                                                                                                                                                                                                          |
+| No language annotation                     | `<CodeHighlight>` plaintext | Label = `"unknown"`. With `codeBlock.autoDetectUnknownLanguage: true`, `hljs.highlightAuto` guesses early, re-checks as the block grows, and settles at end of stream — label/highlighting upgrade in place                                                                                                                                              |
+| ` ```mermaid ` (any case)                  | Interactive Mermaid diagram | See [Mermaid Diagrams](#mermaid-diagrams); the language match is case-insensitive                                                                                                                                                                                                                                                                        |
+| ` ```json ` (any case)                     | Pretty-printed JSON         | As soon as the block looks complete (ends in `}`/`]` with balanced brackets outside strings), parsed, string values holding a nested JSON object/array expanded (primitive-looking strings such as `"true"` stay strings), then formatted with 2-space indent while retaining exact numeric tokens; both formatting and nested expansion can be disabled |
+
+The copy control copies the original code text, including its trailing newline, independently of JSON display formatting. Raw HTML `<pre>` structures with nested elements, sibling text, or additional attributes retain their original rendering instead of entering the code highlighter.
 
 All non-special blocks render with `withBorder` and `withExpandButton`, collapsing to `maxCollapsedHeight="320px"` until expanded.
 

package/dist/index.cjs

@@ -42,9 +42,9 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/MantineAIMarkdown.tsx
-var import_react5 = require("react");
-var import_core6 = __toESM(require("@ai-react-markdown/core"), 1);
-var import_core7 = require("@ai-react-markdown/core");
+var import_react6 = require("react");
+var import_core7 = __toESM(require("@ai-react-markdown/core"), 1);
+var import_core8 = require("@ai-react-markdown/core");
 
 // src/components/typography/MantineTypography.tsx
 var import_react = require("react");
@@ -62,7 +62,7 @@ var MantineAIMDefaultExtraStyles = ({ children }) => {
 var DefaultExtraStyles_default = MantineAIMDefaultExtraStyles;
 
 // src/components/customized/PreCode.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_code_highlight2 = require("@mantine/code-highlight");
 var import_core5 = require("@ai-react-markdown/core");
 
@@ -73,7 +73,10 @@ var import_core2 = require("@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
@@ -86,10 +89,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
 var import_react3 = require("react");
 var import_code_highlight = require("@mantine/code-highlight");
@@ -211,14 +254,7 @@ var MantineAIMMermaidCode = (0, import_react3.memo)((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;
@@ -246,9 +282,11 @@ var MantineAIMMermaidCode = (0, import_react3.memo)((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]);
@@ -398,6 +436,140 @@ var MantineAIMMermaidCode = (0, import_react3.memo)((props) => {
 MantineAIMMermaidCode.displayName = "MantineAIMMermaidCode";
 var MermaidCode_default = MantineAIMMermaidCode;
 
+// src/components/customized/PreCode.tsx
+var import_core6 = require("@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
+var import_react4 = require("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] = (0, import_react4.useState)(() => ({ code, language }));
+  const [controller] = (0, import_react4.useState)(() => createCodeFrame({ code, language }, setFrame));
+  (0, import_react4.useEffect)(() => {
+    controller.update({ code, language }, streaming, interval);
+  }, [controller, code, language, streaming, interval]);
+  (0, import_react4.useEffect)(() => () => controller.dispose(), [controller]);
+  return !streaming || interval === 0 || language !== frame.language || !code.startsWith(frame.code) ? code : frame.code;
+}
+
 // src/components/customized/PreCode.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var hljsAutoPromise = null;
@@ -415,14 +587,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] = (0, import_react4.useState)(
+  const [detected, setDetected] = (0, import_react5.useState)(
     null
   );
-  const [loadAttempt, setLoadAttempt] = (0, import_react4.useState)(0);
-  const loadFailuresRef = (0, import_react4.useRef)(0);
-  (0, import_react4.useEffect)(() => {
-    if (!enabled) return;
-    const prior = detected !== null && codeText.length < detected.atLength ? null : detected;
+  const [loadAttempt, setLoadAttempt] = (0, import_react5.useState)(0);
+  const loadFailuresRef = (0, import_react5.useRef)(0);
+  const previousTextRef = (0, import_react5.useRef)(codeText);
+  (0, import_react5.useEffect)(() => {
+    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
@@ -461,115 +639,133 @@ 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 = (0, import_react5.createContext)("");
+function RawCodeCopy() {
+  const code = (0, import_react5.useContext)(RawCodeContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core6.CopyButton, { value: code, children: ({ copied, copy }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_code_highlight2.CodeHighlightControl,
+    {
+      tooltipLabel: copied ? "Copied" : "Copy",
+      "aria-label": copied ? "Copied" : "Copy code",
+      onClick: copy,
+      children: copied ? "\u2713" : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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 = (0, import_react5.memo)(function OrdinaryCodeHighlight2({
+  code,
+  language,
+  fileName,
+  fontSize,
+  defaultExpanded
+}) {
+  const highlight = (0, import_code_highlight2.useHighlight)();
+  const adapter = (0, import_react5.useMemo)(() => createCachedHighlightAdapter(highlight), [highlight]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_code_highlight2.CodeHighlightAdapterProvider, { adapter, children: fileName === "unknown" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_code_highlight2.CodeHighlight,
+    {
+      mb: 15,
+      fz: fontSize,
+      w: "100%",
+      code,
+      withBorder: true,
+      withExpandButton: true,
+      defaultExpanded,
+      maxCollapsedHeight: "320px",
+      withCopyButton: false,
+      controls: [/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RawCodeCopy, {}, "copy")]
     }
-  }
-  return depth === 0 && !inString;
-}
+  ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_code_highlight2.CodeHighlightTabs,
+    {
+      mb: 15,
+      fz: fontSize,
+      w: "100%",
+      code: [
+        {
+          fileName,
+          code,
+          language
+        }
+      ],
+      withBorder: true,
+      withExpandButton: true,
+      defaultExpanded,
+      maxCollapsedHeight: "320px",
+      withCopyButton: false,
+      controls: [/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RawCodeCopy, {}, "copy")]
+    }
+  ) });
+});
 var SpecialCodeLanguage = /* @__PURE__ */ ((SpecialCodeLanguage2) => {
   SpecialCodeLanguage2["Mermaid"] = "mermaid";
   return SpecialCodeLanguage2;
 })(SpecialCodeLanguage || {});
 var SPECIAL_LANGUAGES = new Set(Object.values(SpecialCodeLanguage));
-var MantineAIMPreCode = (0, import_react4.memo)(
+var MantineAIMPreCode = (0, import_react5.memo)(
   (props) => {
     const { fontSize } = (0, import_core5.useAIMarkdownTheme)();
     const { streaming } = (0, import_core5.useAIMarkdownState)();
-    const { autoDetectUnknownLanguage, defaultExpanded } = useMantineCodeBlockOptions();
+    const { autoDetectUnknownLanguage, defaultExpanded, formatJson, expandNestedJson, highlightIntervalMs } = useMantineCodeBlockOptions();
     const detectedLanguage = useAutoDetectedLanguage(
       props.codeText,
       autoDetectUnknownLanguage && !props.existLanguage,
       streaming
     );
     const codeLanguage = (props.existLanguage || detectedLanguage).toLowerCase();
-    const [usedCodeLanguage, usedFileName] = (0, import_react4.useMemo)(
+    const [usedCodeLanguage, usedFileName] = (0, import_react5.useMemo)(
       () => codeLanguage ? [codeLanguage, codeLanguage] : ["plaintext", "unknown"],
       [codeLanguage]
     );
     const isSpecialCodeBlock = SPECIAL_LANGUAGES.has(codeLanguage);
-    const normalCodeBlockContent = (0, import_react4.useMemo)(() => {
+    const [scanJson] = (0, import_react5.useState)(createJsonCompletenessScanner);
+    const jsonComplete = (0, import_react5.useMemo)(
+      () => usedCodeLanguage === "json" && formatJson && streaming ? scanJson(props.codeText) : false,
+      [usedCodeLanguage, formatJson, streaming, scanJson, props.codeText]
+    );
+    const normalCodeBlockContent = (0, import_react5.useMemo)(() => {
       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__ */ (0, import_jsx_runtime4.jsx)(
-        import_code_highlight2.CodeHighlight,
-        {
-          mb: 15,
-          fz: fontSize,
-          w: "100%",
-          code: usedCodeStr,
-          withBorder: true,
-          withExpandButton: true,
-          defaultExpanded,
-          maxCollapsedHeight: "320px"
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_code_highlight2.CodeHighlightTabs,
-        {
-          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]);
-    const specialCodeBlockContent = (0, import_react4.useMemo)(() => {
+      return usedCodeStr;
+    }, [isSpecialCodeBlock, props.codeText, usedCodeLanguage, streaming, formatJson, expandNestedJson, jsonComplete]);
+    const displayedCode = useCodeFrame(
+      normalCodeBlockContent ?? "",
+      usedCodeLanguage,
+      streaming && !isSpecialCodeBlock,
+      highlightIntervalMs
+    );
+    const specialCodeBlockContent = (0, import_react5.useMemo)(() => {
       switch (codeLanguage) {
         case "mermaid" /* Mermaid */:
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MermaidCode_default, { code: props.codeText });
@@ -577,29 +773,39 @@ var MantineAIMPreCode = (0, import_react4.memo)(
           return null;
       }
     }, [codeLanguage, props.codeText]);
-    return isSpecialCodeBlock ? specialCodeBlockContent : normalCodeBlockContent;
+    return isSpecialCodeBlock ? specialCodeBlockContent : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RawCodeContext.Provider, { value: props.codeText, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      OrdinaryCodeHighlight,
+      {
+        code: displayedCode,
+        language: usedCodeLanguage,
+        fileName: usedFileName,
+        fontSize,
+        defaultExpanded
+      }
+    ) });
   }
 );
 MantineAIMPreCode.displayName = "MantineAIMPreCode";
 var PreCode_default = MantineAIMPreCode;
 
 // src/MantineAIMarkdown.tsx
-var import_core8 = require("@mantine/core");
+var import_core9 = require("@mantine/core");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var NO_GROUPS = Object.freeze({});
 var MANTINE_STABILITY_TABLE = {
-  codeBlock: import_core7.AIMarkdownStabilityPolicy.DEEP_EQUAL
+  codeBlock: import_core8.AIMarkdownStabilityPolicy.DEEP_EQUAL
 };
 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__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("pre", { ...usefulProps });
     const codeText = code.children.map((child) => child.value ?? "").join("");
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PreCode_default, { codeText, existLanguage: detectedLanguage }, key);
   }
@@ -612,18 +818,18 @@ var MantineAIMarkdownComponent = ({
   codeBlock,
   ...props
 }) => {
-  const stableCustomComponents = (0, import_core7.useStableValue)(customComponents);
-  const usedComponents = (0, import_react5.useMemo)(() => {
+  const stableCustomComponents = (0, import_core8.useStableValue)(customComponents);
+  const usedComponents = (0, import_react6.useMemo)(() => {
     return stableCustomComponents ? { ...DefaultCustomComponents, ...stableCustomComponents } : DefaultCustomComponents;
   }, [stableCustomComponents]);
-  const computedColorScheme = (0, import_core8.useComputedColorScheme)("light");
-  const stable = (0, import_core7.useStableRecord)({ codeBlock }, MANTINE_STABILITY_TABLE);
-  const behaviorGroups = (0, import_react5.useMemo)(
+  const computedColorScheme = (0, import_core9.useComputedColorScheme)("light");
+  const stable = (0, import_core8.useStableRecord)({ codeBlock }, MANTINE_STABILITY_TABLE);
+  const behaviorGroups = (0, import_react6.useMemo)(
     () => stable.codeBlock != null ? { codeBlock: stable.codeBlock } : NO_GROUPS,
     [stable.codeBlock]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core7.AIMarkdownBehaviorsProvider, { value: behaviorGroups, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_core6.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core8.AIMarkdownBehaviorsProvider, { value: behaviorGroups, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_core7.default,
     {
       Typography: Typography2,
       ExtraStyles,
@@ -633,7 +839,7 @@ var MantineAIMarkdownComponent = ({
     }
   ) });
 };
-var MantineAIMarkdown = (0, import_react5.memo)(MantineAIMarkdownComponent);
+var MantineAIMarkdown = (0, import_react6.memo)(MantineAIMarkdownComponent);
 MantineAIMarkdown.displayName = "MantineAIMarkdown";
 var MantineAIMarkdown_default = MantineAIMarkdown;
 
@@ -643,9 +849,9 @@ function defineMantineBehaviors(values) {
 }
 
 // src/hooks/useMantineAIMarkdownMetadata.ts
-var import_core9 = require("@ai-react-markdown/core");
+var import_core10 = require("@ai-react-markdown/core");
 var useMantineAIMarkdownMetadata = () => {
-  return (0, import_core9.useAIMarkdownMetadata)();
+  return (0, import_core10.useAIMarkdownMetadata)();
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {