markdown-flow-ui 0.2.30 → 0.2.32

package/dist/components/ContentRender/ContentRender.es.js

@@ -1,438 +1,636 @@
-import { jsx as n, jsxs as je } from "react/jsx-runtime";
-import U, { useMemo as B, useState as Ne, useRef as g, useEffect as P } from "react";
-import Qe from "../../_virtual/index.es.js";
-import { sanitizeInvalidTagName as Pe } from "./utils/sanitize-invalid-tag-name.es.js";
-import { stripSvgTextLineBreaks as Ue } from "./utils/strip-svg-text-line-breaks.es.js";
+import { jsx as r, jsxs as ze, Fragment as ut } from "react/jsx-runtime";
+import Z, { useMemo as f, useState as Fe, useRef as b, useEffect as te } from "react";
+import { sanitizeInvalidTagName as lt } from "./utils/sanitize-invalid-tag-name.es.js";
+import { stripSvgTextLineBreaks as dt } from "./utils/strip-svg-text-line-breaks.es.js";
 /* empty css                     */
 /* empty css                             */
 /* empty css                                                   */
 /* empty css                                             */
-import Ke, { CodeBlockContext as Oe } from "./CodeBlock.es.js";
-import Ye from "./plugins/CustomVariable.es.js";
-import le from "./plugins/MermaidChart.es.js";
-import { preserveCustomVariableProperties as Xe, restoreCustomVariableProperties as Ze } from "./utils/custom-variable-props.es.js";
-import { subsetLanguages as Je, highlightLanguages as et } from "./utils/highlight-languages.es.js";
-import { parseMarkdownSegments as Le, mermaidBlockIsComplete as tt } from "./utils/mermaid-parse.es.js";
-import { normalizeInlineHtml as Ae } from "./utils/normalize-inline-html.es.js";
-import nt from "./IframeSandbox.es.js";
-import { getTrailingTypewriterGrapheme as ue, appendContentAwareTypewriterQueue as Me, consumeContentAwareTypewriterQueue as rt, CONTENT_AWARE_TYPEWRITER_TICK_BUDGET as ot, isContentAwareTypewriterQueueEmpty as st } from "./utils/typewriter-pacing.es.js";
-import { splitContentSegments as at } from "./utils/split-content.es.js";
-import { getInteractionDefaultValues as it } from "../../lib/interaction-defaults.es.js";
-import { getMarkdownFlowDirection as ct, getMarkdownFlowLanguage as ut } from "../../lib/locale.es.js";
-import { getContentRenderLocaleTexts as De } from "./contentRenderI18n.es.js";
-import { Markdown as lt } from "../../node_modules/react-markdown/lib/index.es.js";
-import dt from "../../node_modules/rehype-raw/lib/index.es.js";
-import mt from "../../node_modules/rehype-highlight/lib/index.es.js";
-import pt from "../../node_modules/rehype-katex/lib/index.es.js";
-import ht from "../../node_modules/remark-gfm/lib/index.es.js";
-import ft from "../../node_modules/remark-math/lib/index.es.js";
-import gt from "../../node_modules/remark-breaks/lib/index.es.js";
-const vt = 2, $e = ({ svg: t }) => {
-  const r = g(null);
-  return P(() => {
-    const o = r.current;
-    if (!o) return;
-    const a = o.shadowRoot ?? o.attachShadow({ mode: "open" }), T = "content-render-svg-style";
-    let m = a.getElementById(T);
-    m || (m = document.createElement("style"), m.id = T, m.textContent = `
+import mt, { CodeBlockContext as pt } from "./CodeBlock.es.js";
+import ft from "./plugins/CustomVariable.es.js";
+import Ce from "./plugins/MermaidChart.es.js";
+import { preserveCustomVariableProperties as ht, restoreCustomVariableProperties as gt } from "./utils/custom-variable-props.es.js";
+import { subsetLanguages as vt, highlightLanguages as xt } from "./utils/highlight-languages.es.js";
+import { parseMarkdownSegments as Ge, mermaidBlockIsComplete as yt } from "./utils/mermaid-parse.es.js";
+import { getMarkdownSourceAnalysis as wt, getInlineCodeRanges as Ct } from "./utils/inline-code-ranges.es.js";
+import { remarkPlugins as Qe } from "./utils/markdown-plugins.es.js";
+import { normalizeInlineHtml as ye } from "./utils/normalize-inline-html.es.js";
+import { escapeTypedMarkdownMetadata as ke } from "./utils/escape-typed-metadata.es.js";
+import kt from "./IframeSandbox.es.js";
+import { getTrailingTypewriterGrapheme as we, appendContentAwareTypewriterQueue as _e, consumeContentAwareTypewriterQueue as Tt, CONTENT_AWARE_TYPEWRITER_TICK_BUDGET as bt, isContentAwareTypewriterQueueEmpty as St } from "./utils/typewriter-pacing.es.js";
+import { normalizeWrappedSandboxContent as Rt, splitContentSegments as Bt } from "./utils/split-content.es.js";
+import { getInteractionDefaultValues as Nt } from "../../lib/interaction-defaults.es.js";
+import { getMarkdownFlowDirection as Lt, getMarkdownFlowLanguage as Mt } from "../../lib/locale.es.js";
+import { getContentRenderLocaleTexts as be } from "./contentRenderI18n.es.js";
+import { createVideoMarkdownRunPlan as At, cloneVideoMarkdownSourceTree as Vt, prepareVideoMarkdownRun as $t, projectVideoMarkdownRun as Et, getVideoMarkdownNodeState as It } from "./utils/video-markdown-run.es.js";
+import { unified as je } from "../../node_modules/unified/lib/index.es.js";
+import Pt from "../../node_modules/remark-rehype/lib/index.es.js";
+import Dt from "../../node_modules/rehype-raw/lib/index.es.js";
+import Wt from "../../node_modules/rehype-highlight/lib/index.es.js";
+import zt from "../../node_modules/rehype-katex/lib/index.es.js";
+import { Markdown as Oe } from "../../node_modules/react-markdown/lib/index.es.js";
+const Ft = 2, Te = ({
+  svg: t,
+  inline: o = !1
+}) => {
+  const s = b(null), a = o ? "span" : "div";
+  return te(() => {
+    const i = s.current;
+    if (!i) return;
+    const l = i.shadowRoot ?? i.attachShadow({ mode: "open" }), x = "content-render-svg-style";
+    let g = l.getElementById(x);
+    g || (g = document.createElement("style"), g.id = x, g.textContent = `
         svg { height: auto; display: inline-block; }
         svg.content-render-svg-el--responsive { width: 100%; max-width: 100%; }
         svg.content-render-svg-el--fixed { max-width: none; }
-      `, a.appendChild(m)), Array.from(a.childNodes).filter(
-      (i) => i !== m
-    ).forEach((i) => a.removeChild(i));
-    const G = document.createElement("template"), V = Ue(t);
-    G.innerHTML = V, a.append(G.content.cloneNode(!0));
-    let p = !1, z = !1;
-    a.querySelectorAll("svg").forEach((i) => {
-      const _ = i.getAttribute("viewBox");
-      if (!_) return;
-      const q = _.trim().split(/[\s,]+/).map((y) => Number(y));
-      if (q.length !== 4 || q.some(Number.isNaN)) return;
-      const [, , D, R] = q, A = i.getAttribute("width"), E = i.getAttribute("height"), K = (y) => {
-        if (!y) return !1;
-        const u = y.trim().toLowerCase();
-        return u === "auto" || u.endsWith("%");
-      }, O = (y) => {
-        if (!y) return null;
-        const u = y.trim().toLowerCase();
-        if (u === "auto" || u.endsWith("%"))
+      `, l.appendChild(g)), Array.from(l.childNodes).filter(
+      (u) => u !== g
+    ).forEach((u) => l.removeChild(u));
+    const y = document.createElement("template"), S = dt(t);
+    y.innerHTML = S, l.append(y.content.cloneNode(!0));
+    let R = !1, T = !1;
+    l.querySelectorAll("svg").forEach((u) => {
+      const P = u.getAttribute("viewBox");
+      if (!P) return;
+      const D = P.trim().split(/[\s,]+/).map((L) => Number(L));
+      if (D.length !== 4 || D.some(Number.isNaN)) return;
+      const [, , W, C] = D, U = u.getAttribute("width"), z = u.getAttribute("height"), K = (L) => {
+        if (!L) return !1;
+        const M = L.trim().toLowerCase();
+        return M === "auto" || M.endsWith("%");
+      }, ne = (L) => {
+        if (!L) return null;
+        const M = L.trim().toLowerCase();
+        if (M === "auto" || M.endsWith("%"))
           return null;
-        const M = Number.parseFloat(u);
-        return Number.isNaN(M) ? null : M;
-      }, ee = K(A), te = K(E), Y = !A || A === "0", X = !E || E === "0", ne = O(A), re = O(E);
-      if (ee || te || Y && X || ne === D && re === R) {
-        p = !0, i.classList.add("content-render-svg-el--responsive"), i.classList.remove("content-render-svg-el--fixed"), i.style.width = "100%", i.style.height = "auto", !i.style.aspectRatio && R > 0 && (i.style.aspectRatio = `${D} / ${R}`);
+        const q = Number.parseFloat(M);
+        return Number.isNaN(q) ? null : q;
+      }, ue = K(U), le = K(z), re = !U || U === "0", oe = !z || z === "0", de = ne(U), se = ne(z);
+      if (ue || le || re && oe || de === W && se === C) {
+        R = !0, u.classList.add("content-render-svg-el--responsive"), u.classList.remove("content-render-svg-el--fixed"), u.style.width = "100%", u.style.height = "auto", !u.style.aspectRatio && C > 0 && (u.style.aspectRatio = `${W} / ${C}`);
         return;
       }
-      z = !0, i.classList.add("content-render-svg-el--fixed"), i.classList.remove("content-render-svg-el--responsive"), Y && D > 0 && i.setAttribute("width", `${D}`), X && R > 0 && i.setAttribute("height", `${R}`);
+      T = !0, u.classList.add("content-render-svg-el--fixed"), u.classList.remove("content-render-svg-el--responsive"), re && W > 0 && u.setAttribute("width", `${W}`), oe && C > 0 && u.setAttribute("height", `${C}`);
     });
-    const W = p && !z;
-    o.classList.toggle("content-render-svg--responsive", W), o.classList.toggle("content-render-svg--fixed", !W);
-  }, [t]), /* @__PURE__ */ n("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ n("div", { className: "content-render-svg", ref: r }) });
-}, de = U.createContext(
+    const p = R && !T;
+    i.classList.toggle("content-render-svg--responsive", p), i.classList.toggle("content-render-svg--fixed", !p);
+  }, [t]), /* @__PURE__ */ r(a, { className: "content-render-svg-scroll", children: /* @__PURE__ */ r(
+    a,
+    {
+      className: "content-render-svg",
+      ref: (i) => {
+        s.current = i;
+      }
+    }
+  ) });
+}, ie = Z.createContext(
   null
-), xt = (t) => {
-  const r = U.useContext(de), o = U.useContext(Oe);
-  if (!r)
+), Ue = (t) => {
+  const { receivedTree: o, ...s } = t, a = Z.useContext(ie), i = Z.useContext(pt);
+  if (!a)
     throw new Error("Markdown code renderer requires ContentRender context.");
-  const { className: a, children: T, ...m } = t;
-  if (/language-(\w+)/.exec(a || "")?.[1] === "mermaid") {
-    const V = T?.toString().replace(/\n$/, "") || "", p = tt(
-      r.current.renderContent,
-      V
+  const { className: l, children: x, ...g } = s;
+  if (/language-(\w+)/.exec(l || "")?.[1] === "mermaid") {
+    const S = x?.toString().replace(/\n$/, "") || "", R = yt(
+      a.current.renderContent,
+      S
     );
-    return /* @__PURE__ */ n(
-      le,
+    return /* @__PURE__ */ r(
+      Ce,
       {
-        chart: V,
-        frozen: p,
-        messages: r.current.mermaidMessages
+        chart: S,
+        frozen: o ? !R : R,
+        messages: a.current.mermaidMessages
       }
     );
   }
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ r(
     "code",
     {
-      className: a,
-      ...m,
-      dir: m.dir ?? (o ? void 0 : "ltr"),
-      children: T
+      className: l,
+      ...g,
+      dir: g.dir ?? (i ? void 0 : "ltr"),
+      children: x
     }
   );
-}, yt = [
+}, Ke = [
   ht,
-  ft,
-  Qe,
+  Dt,
+  lt,
   gt
-], Ct = [
-  Xe,
-  dt,
-  Pe,
-  Ze,
-  [mt, { languages: et, subset: Je }],
-  pt
-], Ve = ({ content: t, components: r, locale: o }) => {
-  const a = De(o);
-  return /* @__PURE__ */ n("div", { className: "markdown-renderer", children: /* @__PURE__ */ n(
-    lt,
+], Ye = [
+  [Wt, { languages: xt, subset: vt }],
+  zt
+], Gt = [
+  ...Ke,
+  ...Ye
+], He = ({ content: t, components: o, locale: s }) => {
+  const a = be(s);
+  return /* @__PURE__ */ r("div", { className: "markdown-renderer", children: /* @__PURE__ */ r(
+    Oe,
     {
-      remarkPlugins: yt,
-      rehypePlugins: Ct,
+      remarkPlugins: Qe,
+      rehypePlugins: Gt,
       remarkRehypeOptions: {
         footnoteLabel: a.footnoteLabel,
-        footnoteBackLabel: (T, m) => {
-          const L = String(T + 1) + (m > 1 ? `-${m}` : "");
-          return a.footnoteBackLabel.replace("{reference}", L);
+        footnoteBackLabel: (i, l) => {
+          const x = String(i + 1) + (l > 1 ? `-${l}` : "");
+          return a.footnoteBackLabel.replace("{reference}", x);
         }
       },
-      components: r,
+      components: o,
       children: t
     }
   ) });
-}, Tt = (t) => {
+}, _t = function() {
+  this.parser = () => ({ type: "root", children: [] });
+}, jt = ({ plan: t, renderedSegments: o, components: s, locale: a }) => {
+  const i = f(() => {
+    const S = be(a), R = je().use(Qe).use(Pt, {
+      allowDangerousHtml: !0,
+      footnoteLabel: S.footnoteLabel,
+      footnoteBackLabel: (u, P) => S.footnoteBackLabel.replace(
+        "{reference}",
+        String(u + 1) + (P > 1 ? `-${P}` : "")
+      )
+    }).use(Ke), T = je().use(Ye), p = R.runSync(
+      Vt(t),
+      t.markdownSource
+    );
+    return $t(
+      t,
+      p,
+      (u) => T.runSync(u, t.fullSource)
+    );
+  }, [t, a]), l = f(
+    () => Et(i, o),
+    [i, o]
+  ), x = b(s);
+  x.current = s;
+  const g = b(
+    /* @__PURE__ */ new Map()
+  ), ee = f(() => {
+    const S = /* @__PURE__ */ new Set(), R = (p) => {
+      p.type === "element" && S.add(p.tagName), "children" in p && p.children.forEach(R);
+    };
+    R(i.tree);
+    const T = {};
+    for (const p of S) {
+      if (!g.current.has(p)) {
+        const u = ({
+          node: P,
+          children: D,
+          ...W
+        }) => {
+          const C = It(P);
+          if (C?.svg)
+            return C.svgSource ? /* @__PURE__ */ r(Te, { svg: C.svgSource, inline: !0 }) : null;
+          if (C?.atomic)
+            return C.active ? /* @__PURE__ */ r(ut, { children: D }) : null;
+          if (C?.active === !1 && p !== "a") return null;
+          const z = x.current[p], K = C?.active === !1 ? { ...W, href: void 0, tabIndex: -1 } : W;
+          return z ? Z.createElement(
+            z,
+            {
+              ...K,
+              node: P,
+              ...z === Ue ? { receivedTree: !0 } : {}
+            },
+            D
+          ) : Z.createElement(p, K, D);
+        };
+        u.displayName = `StableMarkdown(${p})`, g.current.set(p, u);
+      }
+      T[p] = g.current.get(p);
+    }
+    return T;
+  }, [i]), y = f(
+    () => [() => () => l],
+    [l]
+  );
+  return /* @__PURE__ */ r("div", { className: "markdown-renderer", children: /* @__PURE__ */ r(
+    Oe,
+    {
+      remarkPlugins: [_t],
+      rehypePlugins: y,
+      components: ee,
+      children: ""
+    }
+  ) });
+}, H = (t) => t.type === "markdown" && t.immediate === !0, Ht = (t) => {
   if (t.length <= 1) return t;
-  const r = [];
-  return t.forEach((o) => {
-    if (o.type === "sandbox") {
-      r.push(o);
+  const o = [];
+  return t.forEach((s) => {
+    if (s.type === "sandbox" || H(s)) {
+      o.push(s);
       return;
     }
-    const a = r[r.length - 1];
-    if (a && a.type !== "sandbox") {
-      r[r.length - 1] = {
+    const a = o[o.length - 1];
+    if (a && a.type !== "sandbox" && !H(a)) {
+      o[o.length - 1] = {
         type: "markdown",
-        value: `${a.value}${o.value}`
+        value: `${a.value}${s.value}`
       };
       return;
     }
-    r.push({ type: "markdown", value: o.value });
-  }), r;
-}, kt = (t, r) => {
-  const o = Math.max(1, r), a = Array.from(t);
+    o.push({ type: "markdown", value: s.value });
+  }), o;
+}, qt = (t, o, s) => {
+  if (t.length >= o.length) return t;
+  const a = s.find(
+    ({ start: x, end: g }) => x < t.length && t.length < g
+  );
+  if (!a) return t;
+  const i = /^`+/.exec(o.slice(a.start))?.[0];
+  if (!i || t.length < a.start + i.length)
+    return t;
+  const l = a.end - i.length;
+  return t.length > l ? t + i.slice(t.length - l) : t + (t.endsWith("`") ? " " : "") + i;
+}, qe = (t, o, s, a, i = 0) => {
+  const l = qt(t, o, s);
+  return ke(t, a, i) + l.slice(t.length);
+}, Qt = (t, o) => {
+  const s = Math.max(1, o), a = Array.from(t);
   return {
-    chunk: a.slice(0, o).join(""),
-    rest: a.slice(o).join("")
+    chunk: a.slice(0, s).join(""),
+    rest: a.slice(s).join("")
   };
-}, wt = (t, r) => t === r ? !0 : !t || !r || t.length !== r.length ? !1 : t.every((o, a) => o === r[a]), bt = (t) => {
-  const r = g(t);
-  return wt(r.current, t) || (r.current = t), r.current;
-}, nn = ({
+}, Ot = (t, o) => t === o ? !0 : !t || !o || t.length !== o.length ? !1 : t.every((s, a) => s === o[a]), Ut = (t) => {
+  const o = b(t);
+  return Ot(o.current, t) || (o.current = t), o.current;
+}, Ln = ({
   content: t,
-  contentType: r,
-  locale: o,
+  contentType: o,
+  locale: s,
   lang: a,
-  dir: T,
-  customRenderBar: m,
-  onSend: L,
-  typingSpeed: G = 30,
-  enableTypewriter: V = !1,
-  typewriterPacing: p = "fixed",
-  onTypeFinished: z,
-  onTypewriterStateChange: W,
-  userInput: i,
-  interactionDefaultValueOptions: _,
-  defaultButtonText: q,
-  defaultInputText: D,
-  defaultSelectedValues: R,
-  readonly: A = !1,
-  confirmButtonText: E,
-  copyButtonText: K,
-  copiedButtonText: O,
-  sandboxLoadingText: ee,
-  sandboxStyleLoadingText: te,
-  sandboxScriptLoadingText: Y,
-  disableSandboxLoadingOverlay: X = !1,
-  sandboxFullscreenButtonText: ne,
-  sandboxExitFullscreenButtonText: re,
-  sandboxMode: me = "content",
-  onClickCustomButtonAfterContent: oe,
-  beforeSend: y
+  dir: i,
+  customRenderBar: l,
+  onSend: x,
+  typingSpeed: g = 30,
+  enableTypewriter: ee = !1,
+  typewriterPacing: y = "fixed",
+  onTypeFinished: S,
+  onTypewriterStateChange: R,
+  userInput: T,
+  interactionDefaultValueOptions: p,
+  defaultButtonText: u,
+  defaultInputText: P,
+  defaultSelectedValues: D,
+  readonly: W = !1,
+  confirmButtonText: C,
+  copyButtonText: U,
+  copiedButtonText: z,
+  sandboxLoadingText: K,
+  sandboxStyleLoadingText: ne,
+  sandboxScriptLoadingText: ue,
+  disableSandboxLoadingOverlay: le = !1,
+  sandboxFullscreenButtonText: re,
+  sandboxExitFullscreenButtonText: oe,
+  sandboxMode: de = "content",
+  onClickCustomButtonAfterContent: se,
+  beforeSend: me
   // tooltipMinLength,
 }) => {
-  const u = De(o), M = B(
+  const F = be(s), L = f(
     () => ({
-      loading: u.mermaidLoadingText,
-      emptyChart: u.mermaidEmptyChartText,
-      error: u.mermaidErrorText
+      loading: F.mermaidLoadingText,
+      emptyChart: F.mermaidEmptyChartText,
+      error: F.mermaidErrorText
     }),
-    [u]
-  ), H = T ?? ct(o), j = a ?? ut(o), pe = E || u.confirmButtonText, he = K || u.copyButtonText, fe = O || u.copiedButtonText, Ee = ne || u.sandboxFullscreenButtonText, Ie = re || u.sandboxExitFullscreenButtonText, l = !!V && (!r || r === "text"), Z = B(
-    () => Tt(at(t, !0, !0)),
+    [F]
+  ), M = i ?? Lt(s), q = a ?? Mt(s), Se = C || F.confirmButtonText, Re = U || F.copyButtonText, Be = z || F.copiedButtonText, Xe = re || F.sandboxFullscreenButtonText, Ze = oe || F.sandboxExitFullscreenButtonText, m = !!ee && (!o || o === "text"), B = f(
+    () => Rt(t),
     [t]
-  ), se = Z.some(
-    (e) => e.type === "sandbox"
-  ), c = se ? Z.filter((e) => e.type !== "sandbox").map((e) => e.value).join("") : t, ge = Math.max(0, G), Fe = p === "fixed" ? c : void 0, [v, ve] = Ne(
-    () => l ? "" : c
-  ), J = g(v), f = g(""), x = g({
+  ), A = f(
+    () => wt(B),
+    [B]
+  ), w = f(() => {
+    const e = Ht(
+      Bt(B, !0, !0, A)
+    );
+    return B !== t && e.length && (e[0].type === "sandbox" || H(e[0])) ? [{ type: "text", value: "" }, ...e] : e;
+  }, [t, B, A]), Y = w.some(
+    (e) => e.type === "sandbox" || H(e)
+  ), h = Y ? w.filter(
+    (e) => e.type !== "sandbox" && !H(e)
+  ).map((e) => e.value).join("") : B, Ne = Math.max(0, g), Je = y === "fixed" ? h : void 0, [E, Le] = Fe(
+    () => m ? "" : h
+  ), ae = b(E), V = b(""), I = b({
     tokens: [],
     head: 0,
     trailingGrapheme: ""
-  }), S = g(0), xe = g(l), ye = g(p), Ce = g(c), Te = g(t), ae = g(!1), [Ge, ze] = Ne(0);
-  P(() => {
-    const e = xe.current, s = ye.current, h = Ce.current, k = !!f.current, C = Te.current !== t;
-    Te.current = t, xe.current = l, ye.current = p, Ce.current = c, (C || l !== e) && (ae.current = !1);
-    const Q = () => {
-      f.current = "", x.current = {
+  }), Q = b(0), Me = b(m), Ae = b(y), Ve = b(h), pe = b(t), fe = b(!1), [et, tt] = Fe(0);
+  te(() => {
+    const e = Me.current, n = Ae.current, c = Ve.current, d = !!V.current, k = pe.current !== t, xe = k && t.startsWith(pe.current);
+    pe.current = t, Me.current = m, Ae.current = y, Ve.current = h, (k || m !== e) && (fe.current = !1);
+    const X = () => {
+      V.current = "", I.current = {
         tokens: [],
         head: 0,
         trailingGrapheme: ""
-      }, S.current = 0;
-    }, w = (F) => {
-      J.current = F, ve(F);
+      }, Q.current = 0;
+    }, J = (N) => {
+      ae.current = N, Le(N);
     };
-    if (!l) {
-      Q(), w(c);
+    if (!m) {
+      X(), J(h);
       return;
     }
-    e || (Q(), w(""));
-    const $ = e ? J.current : "";
-    if (!c.startsWith($)) {
-      Q(), w(c), p === "content-aware" && (x.current = {
-        tokens: [],
-        head: 0,
-        trailingGrapheme: ue(c)
-      });
-      return;
+    e || (X(), J(""));
+    let $ = e ? ae.current : "";
+    if (!h.startsWith($)) {
+      if (X(), !xe) {
+        J(h), y === "content-aware" && (I.current = {
+          tokens: [],
+          head: 0,
+          trailingGrapheme: we(h)
+        });
+        return;
+      }
+      let N = 0;
+      for (; N < $.length && N < h.length && $[N] === h[N]; )
+        N += 1;
+      $ = $.slice(0, N), J($);
     }
-    let N = c.slice($.length);
-    if (!N) {
-      f.current = "", S.current = 0, x.current = p === "content-aware" ? {
+    let O = h.slice($.length);
+    if (!O) {
+      V.current = "", Q.current = 0, I.current = y === "content-aware" ? {
         tokens: [],
         head: 0,
-        trailingGrapheme: ue($)
+        trailingGrapheme: we($)
       } : { tokens: [], head: 0, trailingGrapheme: "" };
       return;
     }
-    if (p === "content-aware") {
-      const F = h.slice(
+    if (y === "content-aware") {
+      const N = c.slice(
         $.length
       );
-      if (e && s === "content-aware" && c.startsWith(h) && f.current === F) {
-        const b = Me(
-          x.current,
-          c.slice(h.length)
+      if (e && n === "content-aware" && h.startsWith(c) && V.current === N) {
+        const j = _e(
+          I.current,
+          h.slice(c.length)
         );
-        x.current = b.queue, b.immediateChunk && (N = N.slice(
-          b.immediateChunk.length
-        ), w(`${$}${b.immediateChunk}`));
+        I.current = j.queue, j.immediateChunk && (O = O.slice(
+          j.immediateChunk.length
+        ), J(`${$}${j.immediateChunk}`));
       } else {
-        const b = Me(
+        const j = _e(
           {
             tokens: [],
             head: 0,
-            trailingGrapheme: ue($)
+            trailingGrapheme: we($)
           },
-          N
+          O
         );
-        x.current = b.queue, b.immediateChunk && (N = N.slice(
-          b.immediateChunk.length
-        ), w(`${$}${b.immediateChunk}`)), S.current = 0;
+        I.current = j.queue, j.immediateChunk && (O = O.slice(
+          j.immediateChunk.length
+        ), J(`${$}${j.immediateChunk}`)), Q.current = 0;
       }
     } else
-      x.current = {
+      I.current = {
         tokens: [],
         head: 0,
         trailingGrapheme: ""
-      }, S.current = 0;
-    f.current = N, !k && N && ze((F) => F + 1);
-  }, [t, c, l, p]), P(() => {
-    l && (ae.current || f.current || v !== c || (ae.current = !0, z?.()));
+      }, Q.current = 0;
+    V.current = O, !d && O && tt((N) => N + 1);
+  }, [t, h, m, y]), te(() => {
+    m && (fe.current || V.current || E !== h || (fe.current = !0, S?.()));
   }, [
     t,
-    c,
-    v,
-    l,
-    z
-  ]), P(() => {
-    if (!l || !f.current)
+    h,
+    E,
+    m,
+    S
+  ]), te(() => {
+    if (!m || !V.current)
       return;
     const e = window.setTimeout(() => {
-      if (!f.current)
+      if (!V.current)
         return;
-      let s = "";
-      if (p === "content-aware") {
-        const k = rt(
-          x.current,
-          S.current + ot
+      let n = "";
+      if (y === "content-aware") {
+        const d = Tt(
+          I.current,
+          Q.current + bt
         );
-        s = k.chunk, x.current = k.queue, st(k.queue) ? S.current = 0 : S.current = k.remainingBudget;
+        n = d.chunk, I.current = d.queue, St(d.queue) ? Q.current = 0 : Q.current = d.remainingBudget;
       } else
-        s = kt(
-          f.current,
-          vt
+        n = Qt(
+          V.current,
+          Ft
         ).chunk;
-      if (!s)
+      if (!n)
         return;
-      f.current = f.current.slice(s.length), f.current || (x.current = p === "content-aware" ? {
+      V.current = V.current.slice(n.length), V.current || (I.current = y === "content-aware" ? {
         tokens: [],
         head: 0,
-        trailingGrapheme: x.current.trailingGrapheme
-      } : { tokens: [], head: 0, trailingGrapheme: "" }, S.current = 0);
-      const h = `${J.current}${s}`;
-      J.current = h, ve(h);
-    }, ge);
+        trailingGrapheme: I.current.trailingGrapheme
+      } : { tokens: [], head: 0, trailingGrapheme: "" }, Q.current = 0);
+      const c = `${ae.current}${n}`;
+      ae.current = c, Le(c);
+    }, Ne);
     return () => window.clearTimeout(e);
   }, [
-    v,
-    Fe,
-    l,
-    p,
-    ge,
-    Ge
+    E,
+    Je,
+    m,
+    y,
+    Ne,
+    et
   ]);
-  const ke = B(
+  const G = f(() => {
+    let e = 0;
+    return w.map((n) => {
+      if (!m) return n;
+      if (n.type === "sandbox" || H(n))
+        return E.length >= e ? n : { ...n, value: "" };
+      const c = E.slice(
+        e,
+        e + n.value.length
+      );
+      return e += n.value.length, { ...n, value: c };
+    });
+  }, [w, E, m]), $e = f(
     () => ({
-      isTypewriterEnabled: l,
-      isTyping: l && v !== c,
-      isComplete: v === c,
-      renderedLength: t.length - Math.max(0, c.length - v.length),
+      isTypewriterEnabled: m,
+      isTyping: m && E !== h,
+      isComplete: E === h,
+      renderedLength: t.length - w.reduce(
+        (e, n, c) => e + n.value.length - G[c].value.length,
+        0
+      ),
       totalLength: t.length
     }),
-    [t, c, v, l]
+    [
+      t,
+      h,
+      E,
+      m,
+      w,
+      G
+    ]
   );
-  P(() => {
-    W?.(ke);
-  }, [W, ke]);
-  const we = B(() => {
+  te(() => {
+    R?.($e);
+  }, [R, $e]);
+  const he = f(() => {
     let e = 0;
-    return Z.map((s) => {
-      if (s.type === "sandbox" || !l) return s;
-      const h = v.slice(
-        e,
-        e + s.value.length
-      );
-      return e += s.value.length, { ...s, value: h };
+    return w.map((n) => {
+      const c = e;
+      return e += n.value.length, c;
+    });
+  }, [w]), ce = f(
+    () => m ? w.map(
+      (e) => e.type === "sandbox" || H(e) ? [] : e.value === B ? A.inline : Ct(e.value)
+    ) : [],
+    [m, w, B, A]
+  ), nt = f(
+    () => Y ? G.map(
+      (e, n) => e.type === "sandbox" || H(e) ? e.value : m ? qe(
+        e.value,
+        w[n].value,
+        ce[n] ?? [],
+        A.metadata,
+        he[n]
+      ) : ke(
+        e.value,
+        A.metadata,
+        he[n]
+      )
+    ) : [],
+    [
+      Y,
+      m,
+      G,
+      ce,
+      w,
+      A.metadata,
+      he
+    ]
+  ), rt = f(() => {
+    const e = [];
+    w.forEach((n, c) => {
+      const d = e.at(-1);
+      n.type !== "sandbox" && d && !d.sandbox ? d.indices.push(c) : e.push({ indices: [c], sandbox: n.type === "sandbox" });
     });
-  }, [Z, v, l]), I = se ? we.map((e) => e.value).join("") : l ? v : t, ie = B(
-    () => Ae(I),
-    [I]
-  ), ce = B(
-    () => it(
-      I,
-      i,
-      _
+    for (const n of e)
+      if (!n.sandbox && n.indices.some((c) => H(w[c]))) {
+        const c = n.indices.map((k) => w[k]), d = c.map((k) => k.value).join("");
+        n.plan = At(
+          c,
+          d === B ? A : void 0
+        );
+      }
+    return e;
+  }, [w, B, A]), _ = Y ? G.map((e) => e.value).join("") : m ? E : B, ot = f(
+    () => l ? ye(_) : "",
+    [l, _]
+  ), Ee = f(
+    () => Y ? "" : ye(
+      m ? qe(
+        _,
+        B,
+        ce[0] ?? [],
+        A.metadata
+      ) : ke(
+        _,
+        A.metadata
+      )
+    ),
+    [
+      B,
+      Y,
+      m,
+      _,
+      ce,
+      A.metadata
+    ]
+  ), ge = f(
+    () => Nt(
+      _,
+      T,
+      p
     ),
-    [_, I, i]
-  ), be = q?.trim() || ce.buttonText, Be = D?.trim() || ce.inputText, We = B(
-    () => i ? i.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
-    [i]
-  ), _e = R?.length ? R : ce.selectedValues || We, Re = bt(
-    _e
-  ), d = g({
-    direction: H,
-    language: j,
-    mermaidMessages: M,
-    beforeSend: y,
-    locale: o,
-    onClickCustomButtonAfterContent: oe,
-    onSend: L,
-    readonly: A,
-    renderContent: I,
-    resolvedConfirmButtonText: pe,
-    resolvedCopiedButtonText: fe,
-    resolvedCopyButtonText: he,
-    resolvedDefaultButtonText: be,
-    resolvedDefaultInputText: Be,
-    resolvedDefaultSelectedValues: Re
+    [p, _, T]
+  ), Ie = u?.trim() || ge.buttonText, Pe = P?.trim() || ge.inputText, st = f(
+    () => T ? T.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
+    [T]
+  ), at = D?.length ? D : ge.selectedValues || st, De = Ut(
+    at
+  ), v = b({
+    direction: M,
+    language: q,
+    mermaidMessages: L,
+    beforeSend: me,
+    locale: s,
+    onClickCustomButtonAfterContent: se,
+    onSend: x,
+    readonly: W,
+    renderContent: _,
+    resolvedConfirmButtonText: Se,
+    resolvedCopiedButtonText: Be,
+    resolvedCopyButtonText: Re,
+    resolvedDefaultButtonText: Ie,
+    resolvedDefaultInputText: Pe,
+    resolvedDefaultSelectedValues: De
   });
-  d.current = {
-    direction: H,
-    language: j,
-    mermaidMessages: M,
-    beforeSend: y,
-    locale: o,
-    onClickCustomButtonAfterContent: oe,
-    onSend: L,
-    readonly: A,
-    renderContent: I,
-    resolvedConfirmButtonText: pe,
-    resolvedCopiedButtonText: fe,
-    resolvedCopyButtonText: he,
-    resolvedDefaultButtonText: be,
-    resolvedDefaultInputText: Be,
-    resolvedDefaultSelectedValues: Re
+  v.current = {
+    direction: M,
+    language: q,
+    mermaidMessages: L,
+    beforeSend: me,
+    locale: s,
+    onClickCustomButtonAfterContent: se,
+    onSend: x,
+    readonly: W,
+    renderContent: _,
+    resolvedConfirmButtonText: Se,
+    resolvedCopiedButtonText: Be,
+    resolvedCopyButtonText: Re,
+    resolvedDefaultButtonText: Ie,
+    resolvedDefaultInputText: Pe,
+    resolvedDefaultSelectedValues: De
   };
-  const Se = B(
+  const ve = f(
     () => ({
       "custom-button-after-content": ({
         children: e
-      }) => /* @__PURE__ */ n(
+      }) => /* @__PURE__ */ r(
         "button",
         {
           className: "content-render-custom-button-after-content",
-          onClick: d.current.onClickCustomButtonAfterContent,
-          children: /* @__PURE__ */ n("span", { className: "content-render-custom-button-after-content-inner", children: e })
+          onClick: v.current.onClickCustomButtonAfterContent,
+          children: /* @__PURE__ */ r("span", { className: "content-render-custom-button-after-content-inner", children: e })
         }
       ),
-      "custom-variable": (e) => /* @__PURE__ */ n(
-        Ye,
+      "custom-variable": (e) => /* @__PURE__ */ r(
+        ft,
         {
           ...e,
-          readonly: d.current.readonly,
-          defaultButtonText: d.current.resolvedDefaultButtonText,
-          defaultInputText: d.current.resolvedDefaultInputText,
-          defaultSelectedValues: d.current.resolvedDefaultSelectedValues,
-          onSend: d.current.onSend,
-          beforeSend: d.current.beforeSend,
-          locale: d.current.locale,
-          dir: d.current.direction,
-          lang: d.current.language,
-          confirmButtonText: d.current.resolvedConfirmButtonText
+          readonly: v.current.readonly,
+          defaultButtonText: v.current.resolvedDefaultButtonText,
+          defaultInputText: v.current.resolvedDefaultInputText,
+          defaultSelectedValues: v.current.resolvedDefaultSelectedValues,
+          onSend: v.current.onSend,
+          beforeSend: v.current.beforeSend,
+          locale: v.current.locale,
+          dir: v.current.direction,
+          lang: v.current.language,
+          confirmButtonText: v.current.resolvedConfirmButtonText
         }
       ),
-      code: xt,
-      table: ({ ...e }) => /* @__PURE__ */ n("div", { className: "content-render-table-container", children: /* @__PURE__ */ n("table", { className: "content-render-table", ...e }) }),
-      th: ({ ...e }) => /* @__PURE__ */ n("th", { className: "content-render-th", ...e }),
-      td: ({ ...e }) => /* @__PURE__ */ n("td", { className: "content-render-td", ...e }),
-      tr: ({ ...e }) => /* @__PURE__ */ n("tr", { className: "content-render-tr", ...e }),
-      li: ({ node: e, ...s }) => {
-        const h = e?.properties?.className;
-        return typeof h == "string" && h.includes("task-list-item") || Array.isArray(h) && h.includes("task-list-item") ? /* @__PURE__ */ n("li", { className: "content-render-task-list-item", ...s }) : /* @__PURE__ */ n("li", { ...s });
+      code: Ue,
+      table: ({ ...e }) => /* @__PURE__ */ r("div", { className: "content-render-table-container", children: /* @__PURE__ */ r("table", { className: "content-render-table", ...e }) }),
+      th: ({ ...e }) => /* @__PURE__ */ r("th", { className: "content-render-th", ...e }),
+      td: ({ ...e }) => /* @__PURE__ */ r("td", { className: "content-render-td", ...e }),
+      tr: ({ ...e }) => /* @__PURE__ */ r("tr", { className: "content-render-tr", ...e }),
+      li: ({ node: e, ...n }) => {
+        const c = e?.properties?.className;
+        return typeof c == "string" && c.includes("task-list-item") || Array.isArray(c) && c.includes("task-list-item") ? /* @__PURE__ */ r("li", { className: "content-render-task-list-item", ...n }) : /* @__PURE__ */ r("li", { ...n });
       },
-      ol: ({ ...e }) => /* @__PURE__ */ n("ol", { className: "content-render-ol", ...e }),
-      ul: ({ ...e }) => /* @__PURE__ */ n("ul", { className: "content-render-ul", ...e }),
-      input: ({ ...e }) => e.type === "checkbox" ? /* @__PURE__ */ n(
+      ol: ({ ...e }) => /* @__PURE__ */ r("ol", { className: "content-render-ol", ...e }),
+      ul: ({ ...e }) => /* @__PURE__ */ r("ul", { className: "content-render-ul", ...e }),
+      input: ({ ...e }) => e.type === "checkbox" ? /* @__PURE__ */ r(
         "input",
         {
           type: "checkbox",
@@ -440,127 +638,151 @@ const vt = 2, $e = ({ svg: t }) => {
           disabled: !0,
           ...e
         }
-      ) : /* @__PURE__ */ n("input", { ...e }),
-      a: ({ children: e, ...s }) => /* @__PURE__ */ n("a", { target: "_blank", rel: "noopener noreferrer", ...s, children: e }),
-      pre: (e) => /* @__PURE__ */ n(
-        Ke,
+      ) : /* @__PURE__ */ r("input", { ...e }),
+      a: ({ children: e, ...n }) => /* @__PURE__ */ r("a", { target: "_blank", rel: "noopener noreferrer", ...n, children: e }),
+      pre: (e) => /* @__PURE__ */ r(
+        mt,
         {
           ...e,
-          copyButtonText: d.current.resolvedCopyButtonText,
-          copiedButtonText: d.current.resolvedCopiedButtonText
+          copyButtonText: v.current.resolvedCopyButtonText,
+          copiedButtonText: v.current.resolvedCopiedButtonText
         }
       )
     }),
     []
-  ), qe = B(
-    () => Le(ie),
-    [ie]
-  ), He = (e, s) => {
-    const h = Ae(e);
-    return Le(h).map((C, Q) => {
-      const w = `${s}-${C.type}-${Q}`;
-      return C.type === "text" ? /* @__PURE__ */ n(
-        de.Provider,
+  ), ct = f(
+    () => Ge(Ee),
+    [Ee]
+  ), it = (e, n) => {
+    const c = ye(e);
+    return Ge(c).map((k, xe) => {
+      const X = `${n}-${k.type}-${xe}`;
+      return k.type === "text" ? /* @__PURE__ */ r(
+        ie.Provider,
         {
-          value: d,
-          children: /* @__PURE__ */ n(
-            Ve,
+          value: v,
+          children: /* @__PURE__ */ r(
+            He,
             {
-              locale: o,
-              components: Se,
-              content: C.value
+              locale: s,
+              components: ve,
+              content: k.value
             }
           )
         },
-        w
-      ) : C.type === "mermaid" ? /* @__PURE__ */ n(
-        le,
+        X
+      ) : k.type === "mermaid" ? /* @__PURE__ */ r(
+        Ce,
         {
-          chart: C.value,
-          frozen: !C.complete,
-          messages: M
+          chart: k.value,
+          frozen: !k.complete,
+          messages: L
         },
-        w
-      ) : C.type === "svg" ? /* @__PURE__ */ n($e, { svg: C.value }, w) : null;
+        X
+      ) : k.type === "svg" ? /* @__PURE__ */ r(Te, { svg: k.value }, X) : null;
     });
-  };
-  return se ? /* @__PURE__ */ n(
+  }, We = l ? /* @__PURE__ */ r("div", { className: "content-render-custom-bar", children: Z.createElement(l, {
+    content: t,
+    displayContent: ot,
+    onSend: x
+  }) }) : null;
+  return Y ? /* @__PURE__ */ ze(
     "div",
     {
       className: "content-render markdown-body",
-      dir: H,
-      lang: j,
-      children: we.map(
-        (e, s) => e.type === "sandbox" ? /* @__PURE__ */ n(
-          nt,
-          {
-            hideFullScreen: !0,
-            type: "sandbox",
-            content: e.value,
-            className: "content-render-iframe",
-            locale: o,
-            dir: H,
-            lang: j,
-            loadingText: ee,
-            styleLoadingText: te,
-            scriptLoadingText: Y,
-            disableLoadingOverlay: X,
-            fullScreenButtonText: Ee,
-            exitFullScreenButtonText: Ie,
-            mode: me
-          },
-          `sandbox-${s}`
-        ) : /* @__PURE__ */ n(U.Fragment, { children: He(e.value, `md-${s}`) }, `md-${s}`)
-      )
+      dir: M,
+      lang: q,
+      children: [
+        rt.map((e) => {
+          const n = e.indices[0], c = G[n];
+          return e.sandbox ? c.value ? /* @__PURE__ */ r(
+            kt,
+            {
+              hideFullScreen: !0,
+              type: "sandbox",
+              content: c.value,
+              className: "content-render-iframe",
+              locale: s,
+              dir: M,
+              lang: q,
+              loadingText: K,
+              styleLoadingText: ne,
+              scriptLoadingText: ue,
+              disableLoadingOverlay: le,
+              fullScreenButtonText: Xe,
+              exitFullScreenButtonText: Ze,
+              mode: de
+            },
+            `sandbox-${n}`
+          ) : null : e.plan ? /* @__PURE__ */ r(
+            ie.Provider,
+            {
+              value: v,
+              children: /* @__PURE__ */ r(
+                jt,
+                {
+                  locale: s,
+                  components: ve,
+                  plan: e.plan,
+                  renderedSegments: e.indices.map(
+                    (d) => G[d]
+                  )
+                }
+              )
+            },
+            `md-${n}`
+          ) : e.indices.map((d) => /* @__PURE__ */ r(Z.Fragment, { children: G[d].type === "markdown" && G[d].pending ? null : it(
+            nt[d],
+            `md-${d}`
+          ) }, `md-${d}`));
+        }),
+        We
+      ]
     }
-  ) : /* @__PURE__ */ je(
+  ) : /* @__PURE__ */ ze(
     "div",
     {
       className: "content-render markdown-body",
-      dir: H,
-      lang: j,
+      dir: M,
+      lang: q,
       children: [
-        qe.map((e, s) => {
+        ct.map((e, n) => {
           if (e.type === "text")
-            return /* @__PURE__ */ n(
-              de.Provider,
+            return /* @__PURE__ */ r(
+              ie.Provider,
               {
-                value: d,
-                children: /* @__PURE__ */ n(
-                  Ve,
+                value: v,
+                children: /* @__PURE__ */ r(
+                  He,
                   {
-                    locale: o,
-                    components: Se,
+                    locale: s,
+                    components: ve,
                     content: e.value
                   }
                 )
               },
-              s
+              n
             );
           if (e.type === "mermaid")
-            return /* @__PURE__ */ n(
-              le,
+            return /* @__PURE__ */ r(
+              Ce,
               {
                 chart: e.value,
                 frozen: !e.complete,
-                messages: M
+                messages: L
               },
-              s
+              n
             );
           if (e.type === "svg")
-            return /* @__PURE__ */ n($e, { svg: e.value }, s);
+            return /* @__PURE__ */ r(Te, { svg: e.value }, n);
         }),
-        m && /* @__PURE__ */ n("div", { className: "content-render-custom-bar", children: U.createElement(m, {
-          content: t,
-          displayContent: ie,
-          onSend: L
-        }) })
+        We
       ]
     }
   );
 };
 export {
-  Ve as MarkdownRenderer,
-  nn as default
+  He as MarkdownRenderer,
+  Ln as default
 };
 //# sourceMappingURL=ContentRender.es.js.map