markdown-flow-ui 0.1.120 → 0.1.121-beta.0

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

@@ -1,89 +1,88 @@
 import { j as t } from "../../_virtual/jsx-runtime.es.js";
 /* empty css                                                                                                            */
 /* empty css                                                                                               */
-import X, { useMemo as h, useRef as E, useEffect as F } from "react";
-import se from "../../_virtual/index.es.js";
-import { sanitizeInvalidTagName as oe } from "./utils/sanitize-invalid-tag-name.es.js";
-import { stripSvgTextLineBreaks as ae } from "./utils/strip-svg-text-line-breaks.es.js";
+import Z, { useState as pe, useRef as V, useEffect as S, useMemo as g } from "react";
+import he from "../../_virtual/index.es.js";
+import { sanitizeInvalidTagName as fe } from "./utils/sanitize-invalid-tag-name.es.js";
+import { stripSvgTextLineBreaks as xe } from "./utils/strip-svg-text-line-breaks.es.js";
 /* empty css                     */
 /* empty css                             */
-import ie from "./CodeBlock.es.js";
-import le from "./plugins/CustomVariable.es.js";
-import W from "./plugins/MermaidChart.es.js";
-import ce from "./useTypewriterStateMachine.es.js";
-import { preserveCustomVariableProperties as me, restoreCustomVariableProperties as de } from "./utils/custom-variable-props.es.js";
-import { subsetLanguages as ue, highlightLanguages as pe } from "./utils/highlight-languages.es.js";
-import { parseMarkdownSegments as J, mermaidBlockIsComplete as he } from "./utils/mermaid-parse.es.js";
-import { normalizeInlineHtml as Q } from "./utils/normalize-inline-html.es.js";
-import fe from "./IframeSandbox.es.js";
-import { splitContentSegments as xe } from "./utils/split-content.es.js";
-import { getInteractionDefaultValues as ve } from "../../lib/interaction-defaults.es.js";
-import { Markdown as ge } from "../../markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.es.js";
-import be from "../../markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.es.js";
-import ye from "../../markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.es.js";
-import Ne from "../../markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.es.js";
-import je from "../../markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.es.js";
-import ke from "../../markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.es.js";
-import we from "../../markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.es.js";
-const Se = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)\b/i, Y = ({ svg: r }) => {
-  const o = E(null);
-  return F(() => {
+import ge from "./CodeBlock.es.js";
+import ye from "./plugins/CustomVariable.es.js";
+import q from "./plugins/MermaidChart.es.js";
+import { preserveCustomVariableProperties as ve, restoreCustomVariableProperties as be } from "./utils/custom-variable-props.es.js";
+import { subsetLanguages as we, highlightLanguages as ke } from "./utils/highlight-languages.es.js";
+import { parseMarkdownSegments as ee, mermaidBlockIsComplete as je } from "./utils/mermaid-parse.es.js";
+import { normalizeInlineHtml as te } from "./utils/normalize-inline-html.es.js";
+import Ne from "./IframeSandbox.es.js";
+import { splitContentSegments as Te } from "./utils/split-content.es.js";
+import { getInteractionDefaultValues as Ce } from "../../lib/interaction-defaults.es.js";
+import { Markdown as Se } from "../../markdown-flow-ui/node_modules/.pnpm/react-markdown@10.1.0_@types_react@19.2.2_react@19.0.1/node_modules/react-markdown/lib/index.es.js";
+import Re from "../../markdown-flow-ui/node_modules/.pnpm/rehype-raw@7.0.0/node_modules/rehype-raw/lib/index.es.js";
+import Be from "../../markdown-flow-ui/node_modules/.pnpm/rehype-highlight@7.0.2/node_modules/rehype-highlight/lib/index.es.js";
+import Le from "../../markdown-flow-ui/node_modules/.pnpm/rehype-katex@7.0.1/node_modules/rehype-katex/lib/index.es.js";
+import Ae from "../../markdown-flow-ui/node_modules/.pnpm/remark-gfm@4.0.1/node_modules/remark-gfm/lib/index.es.js";
+import $e from "../../markdown-flow-ui/node_modules/.pnpm/remark-math@6.0.0/node_modules/remark-math/lib/index.es.js";
+import ze from "../../markdown-flow-ui/node_modules/.pnpm/remark-breaks@4.0.0/node_modules/remark-breaks/lib/index.es.js";
+const Me = /<(script|style|link|iframe|html|head|body|meta|title|base|template|div|section|article|main)\b/i, re = ({ svg: r }) => {
+  const o = V(null);
+  return S(() => {
     const a = o.current;
     if (!a) return;
-    const i = a.shadowRoot ?? a.attachShadow({ mode: "open" }), y = "content-render-svg-style";
-    let l = i.getElementById(y);
-    l || (l = document.createElement("style"), l.id = y, l.textContent = `
+    const i = a.shadowRoot ?? a.attachShadow({ mode: "open" }), R = "content-render-svg-style";
+    let f = i.getElementById(R);
+    f || (f = document.createElement("style"), f.id = R, f.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; }
-      `, i.appendChild(l)), Array.from(i.childNodes).filter(
-      (n) => n !== l
-    ).forEach((n) => i.removeChild(n));
-    const T = document.createElement("template"), z = ae(r);
-    T.innerHTML = z, i.append(T.content.cloneNode(!0));
-    let N = !1, C = !1;
-    i.querySelectorAll("svg").forEach((n) => {
-      const L = n.getAttribute("viewBox");
-      if (!L) return;
-      const k = L.trim().split(/[\s,]+/).map((c) => Number(c));
-      if (k.length !== 4 || k.some(Number.isNaN)) return;
-      const [, , f, p] = k, x = n.getAttribute("width"), v = n.getAttribute("height"), B = (c) => {
+      `, i.appendChild(f)), Array.from(i.childNodes).filter(
+      (s) => s !== f
+    ).forEach((s) => i.removeChild(s));
+    const N = document.createElement("template"), y = xe(r);
+    N.innerHTML = y, i.append(N.content.cloneNode(!0));
+    let T = !1, B = !1;
+    i.querySelectorAll("svg").forEach((s) => {
+      const A = s.getAttribute("viewBox");
+      if (!A) return;
+      const C = A.trim().split(/[\s,]+/).map((c) => Number(c));
+      if (C.length !== 4 || C.some(Number.isNaN)) return;
+      const [, , b, v] = C, w = s.getAttribute("width"), k = s.getAttribute("height"), $ = (c) => {
         if (!c) return !1;
-        const m = c.trim().toLowerCase();
-        return m === "auto" || m.endsWith("%");
-      }, A = (c) => {
+        const u = c.trim().toLowerCase();
+        return u === "auto" || u.endsWith("%");
+      }, z = (c) => {
         if (!c) return null;
-        const m = c.trim().toLowerCase();
-        if (m === "auto" || m.endsWith("%"))
+        const u = c.trim().toLowerCase();
+        if (u === "auto" || u.endsWith("%"))
           return null;
-        const S = Number.parseFloat(m);
-        return Number.isNaN(S) ? null : S;
-      }, M = B(x), I = B(v), w = !x || x === "0", g = !v || v === "0", V = A(x), H = A(v);
-      if (M || I || w && g || V === f && H === p) {
-        N = !0, n.classList.add("content-render-svg-el--responsive"), n.classList.remove("content-render-svg-el--fixed"), n.style.width = "100%", n.style.height = "auto", !n.style.aspectRatio && p > 0 && (n.style.aspectRatio = `${f} / ${p}`);
+        const p = Number.parseFloat(u);
+        return Number.isNaN(p) ? null : p;
+      }, D = $(w), P = $(k), M = !w || w === "0", I = !k || k === "0", K = z(w), l = z(k);
+      if (D || P || M && I || K === b && l === v) {
+        T = !0, s.classList.add("content-render-svg-el--responsive"), s.classList.remove("content-render-svg-el--fixed"), s.style.width = "100%", s.style.height = "auto", !s.style.aspectRatio && v > 0 && (s.style.aspectRatio = `${b} / ${v}`);
         return;
       }
-      C = !0, n.classList.add("content-render-svg-el--fixed"), n.classList.remove("content-render-svg-el--responsive"), w && f > 0 && n.setAttribute("width", `${f}`), g && p > 0 && n.setAttribute("height", `${p}`);
+      B = !0, s.classList.add("content-render-svg-el--fixed"), s.classList.remove("content-render-svg-el--responsive"), M && b > 0 && s.setAttribute("width", `${b}`), I && v > 0 && s.setAttribute("height", `${v}`);
     });
-    const j = N && !C;
-    a.classList.toggle("content-render-svg--responsive", j), a.classList.toggle("content-render-svg--fixed", !j);
+    const L = T && !B;
+    a.classList.toggle("content-render-svg--responsive", L), a.classList.toggle("content-render-svg--fixed", !L);
   }, [r]), /* @__PURE__ */ t.jsx("div", { className: "content-render-svg-scroll", children: /* @__PURE__ */ t.jsx("div", { className: "content-render-svg", ref: o }) });
-}, Re = [je, ke, se, we], Te = [
-  me,
+}, Ie = [Ae, $e, he, ze], Ve = [
+  ve,
+  Re,
+  fe,
   be,
-  oe,
-  de,
-  [ye, { languages: pe, subset: ue }],
-  Ne
-], Z = ({ content: r, components: o }) => /* @__PURE__ */ t.jsx("div", { className: "markdown-renderer", children: /* @__PURE__ */ t.jsx(
-  ge,
+  [Be, { languages: ke, subset: we }],
+  Le
+], ne = ({ content: r, components: o }) => /* @__PURE__ */ t.jsx("div", { className: "markdown-renderer", children: /* @__PURE__ */ t.jsx(
+  Se,
   {
-    remarkPlugins: Re,
-    rehypePlugins: Te,
+    remarkPlugins: Ie,
+    rehypePlugins: Ve,
     components: o,
     children: r
   }
-) }), Ce = (r) => {
+) }), He = (r) => {
   if (r.length <= 1) return r;
   const o = [];
   return r.forEach((a) => {
@@ -101,46 +100,105 @@ const Se = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
     }
     o.push({ type: "markdown", value: a.value });
   }), o;
-}, rt = ({
+}, De = (r, o) => {
+  const a = Math.max(1, o), i = Array.from(r);
+  return {
+    chunk: i.slice(0, a).join(""),
+    rest: i.slice(a).join("")
+  };
+}, dt = ({
   content: r,
-  customRenderBar: o,
-  onSend: a,
-  typingSpeed: i = 30,
-  enableTypewriter: y = !1,
-  userInput: l,
-  interactionDefaultValueOptions: $,
-  defaultButtonText: T,
-  defaultInputText: z,
-  defaultSelectedValues: N,
-  readonly: C = !1,
-  onTypeFinished: j,
-  confirmButtonText: n,
-  copyButtonText: L,
-  copiedButtonText: k,
-  sandboxLoadingText: f,
-  sandboxStyleLoadingText: p,
-  sandboxScriptLoadingText: x,
-  disableSandboxLoadingOverlay: v = !1,
-  sandboxFullscreenButtonText: B,
-  sandboxMode: A = "content",
+  contentType: o,
+  customRenderBar: a,
+  onSend: i,
+  typingSpeed: R = 40,
+  enableTypewriter: f = !1,
+  onTypeFinished: H,
+  onTypewriterStateChange: N,
+  userInput: y,
+  interactionDefaultValueOptions: T,
+  defaultButtonText: B,
+  defaultInputText: L,
+  defaultSelectedValues: s,
+  readonly: A = !1,
+  confirmButtonText: C,
+  copyButtonText: b,
+  copiedButtonText: v,
+  sandboxLoadingText: w,
+  sandboxStyleLoadingText: k,
+  sandboxScriptLoadingText: $,
+  disableSandboxLoadingOverlay: z = !1,
+  sandboxFullscreenButtonText: D,
+  sandboxMode: P = "content",
   onClickCustomButtonAfterContent: M,
   beforeSend: I
   // tooltipMinLength,
 }) => {
-  const w = h(
-    () => Q(r),
-    [r]
-  ), g = h(
-    () => ve(
-      r,
-      l,
-      $
+  const l = !!f && (!o || o === "text"), W = 2, _ = Math.max(0, R), [c, u] = pe(
+    () => l ? "" : r
+  ), p = V(""), O = V(l), F = V(!1);
+  S(() => {
+    const e = O.current;
+    if (O.current = l, F.current = !1, !l) {
+      p.current = "", u(r);
+      return;
+    }
+    u((n) => {
+      const m = !e, x = r.startsWith(n);
+      if (!m && !x)
+        return p.current = "", r;
+      const d = m || !x ? "" : n;
+      return p.current = r.slice(d.length), d;
+    });
+  }, [r, l]), S(() => {
+    l && (F.current || p.current || c !== r || (F.current = !0, H?.()));
+  }, [r, c, l, H]), S(() => {
+    if (!l || !p.current)
+      return;
+    const e = window.setTimeout(() => {
+      u((n) => {
+        const { chunk: m, rest: x } = De(
+          p.current,
+          W
+        );
+        return m ? (p.current = x, `${n}${m}`) : n;
+      });
+    }, _);
+    return () => window.clearTimeout(e);
+  }, [
+    r,
+    c,
+    l,
+    W,
+    _
+  ]);
+  const X = g(
+    () => ({
+      isTypewriterEnabled: l,
+      isTyping: l && c !== r,
+      isComplete: c === r,
+      renderedLength: c.length,
+      totalLength: r.length
+    }),
+    [r, c, l]
+  );
+  S(() => {
+    N?.(X);
+  }, [N, X]);
+  const h = l ? c : r, E = g(
+    () => te(h),
+    [h]
+  ), G = g(
+    () => Ce(
+      h,
+      y,
+      T
     ),
-    [r, $, l]
-  ), V = T?.trim() || g.buttonText, H = z?.trim() || g.inputText, G = h(
-    () => l ? l.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
-    [l]
-  ), U = N?.length ? N : g.selectedValues || G, c = {
+    [T, h, y]
+  ), se = B?.trim() || G.buttonText, oe = L?.trim() || G.inputText, ae = g(
+    () => y ? y.split(",").map((e) => e.trim()).filter(Boolean) : void 0,
+    [y]
+  ), ie = s?.length ? s : G.selectedValues || ae, J = {
     "custom-button-after-content": ({
       children: e
     }) => /* @__PURE__ */ t.jsx(
@@ -152,33 +210,33 @@ const Se = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
       }
     ),
     "custom-variable": (e) => /* @__PURE__ */ t.jsx(
-      le,
+      ye,
       {
         ...e,
-        readonly: C,
-        defaultButtonText: V,
-        defaultInputText: H,
-        defaultSelectedValues: U,
-        onSend: a,
+        readonly: A,
+        defaultButtonText: se,
+        defaultInputText: oe,
+        defaultSelectedValues: ie,
+        onSend: i,
         beforeSend: I,
-        confirmButtonText: n
+        confirmButtonText: C
       }
     ),
     code: (e) => {
-      const { className: s, children: d, ..._ } = e;
-      if (/language-(\w+)/.exec(s || "")?.[1] === "mermaid") {
-        const b = d?.toString().replace(/\n$/, "") || "", ne = he(r, b);
-        return /* @__PURE__ */ t.jsx(W, { chart: b, frozen: ne });
+      const { className: n, children: m, ...x } = e;
+      if (/language-(\w+)/.exec(n || "")?.[1] === "mermaid") {
+        const j = m?.toString().replace(/\n$/, "") || "", ue = je(h, j);
+        return /* @__PURE__ */ t.jsx(q, { chart: j, frozen: ue });
       }
-      return /* @__PURE__ */ t.jsx("code", { className: s, ..._, children: d });
+      return /* @__PURE__ */ t.jsx("code", { className: n, ...x, children: m });
     },
     table: ({ ...e }) => /* @__PURE__ */ t.jsx("div", { className: "content-render-table-container", children: /* @__PURE__ */ t.jsx("table", { className: "content-render-table", ...e }) }),
     th: ({ ...e }) => /* @__PURE__ */ t.jsx("th", { className: "content-render-th", ...e }),
     td: ({ ...e }) => /* @__PURE__ */ t.jsx("td", { className: "content-render-td", ...e }),
     tr: ({ ...e }) => /* @__PURE__ */ t.jsx("tr", { className: "content-render-tr", ...e }),
-    li: ({ node: e, ...s }) => {
-      const d = e?.properties?.className;
-      return typeof d == "string" && d.includes("task-list-item") || Array.isArray(d) && d.includes("task-list-item") ? /* @__PURE__ */ t.jsx("li", { className: "content-render-task-list-item", ...s }) : /* @__PURE__ */ t.jsx("li", { ...s });
+    li: ({ node: e, ...n }) => {
+      const m = e?.properties?.className;
+      return typeof m == "string" && m.includes("task-list-item") || Array.isArray(m) && m.includes("task-list-item") ? /* @__PURE__ */ t.jsx("li", { className: "content-render-task-list-item", ...n }) : /* @__PURE__ */ t.jsx("li", { ...n });
     },
     ol: ({ ...e }) => /* @__PURE__ */ t.jsx("ol", { className: "content-render-ol", ...e }),
     ul: ({ ...e }) => /* @__PURE__ */ t.jsx("ul", { className: "content-render-ul", ...e }),
@@ -191,104 +249,92 @@ const Se = /<(script|style|link|iframe|html|head|body|meta|title|base|template|d
         ...e
       }
     ) : /* @__PURE__ */ t.jsx("input", { ...e }),
-    a: ({ children: e, ...s }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...s, children: e }),
+    a: ({ children: e, ...n }) => /* @__PURE__ */ t.jsx("a", { target: "_blank", rel: "noopener noreferrer", ...n, children: e }),
     pre: (e) => /* @__PURE__ */ t.jsx(
-      ie,
+      ge,
       {
         ...e,
-        copyButtonText: L,
-        copiedButtonText: k
+        copyButtonText: b,
+        copiedButtonText: v
       }
     )
-  }, { displayContent: m, isComplete: S } = ce({
-    // processMarkdownText will let code block printf("You win!\n") become printf("You win!<br/>");
-    // content: processMarkdownText(content),
-    content: w,
-    typingSpeed: i,
-    disabled: !y
-  }), q = y ? m : w, K = h(
-    () => Se.test(r),
-    [r]
-  ), D = h(
-    () => K ? xe(r, !0) : [],
-    [r, K]
-  ), R = D.some(
+  }, Q = g(
+    () => Me.test(h),
+    [h]
+  ), U = g(
+    () => Q ? Te(h, !0) : [],
+    [h, Q]
+  ), ce = U.some(
     (e) => e.type === "sandbox"
-  ), ee = h(
-    () => Ce(D),
-    [D]
-  ), te = h(
-    () => J(q),
-    [q]
-  ), P = E(!1);
-  F(() => {
-    R || S && !P.current && (P.current = !0, j?.());
-  }, [R, S, j]), F(() => {
-    R || (P.current = !1);
-  }, [R, r]);
-  const re = (e, s) => {
-    const d = Q(e);
-    return J(d).map((u, O) => {
-      const b = `${s}-${u.type}-${O}`;
-      return u.type === "text" ? /* @__PURE__ */ t.jsx(
-        Z,
+  ), le = g(
+    () => He(U),
+    [U]
+  ), me = g(
+    () => ee(E),
+    [E]
+  ), de = (e, n) => {
+    const m = te(e);
+    return ee(m).map((d, Y) => {
+      const j = `${n}-${d.type}-${Y}`;
+      return d.type === "text" ? /* @__PURE__ */ t.jsx(
+        ne,
         {
-          components: c,
-          content: u.value
+          components: J,
+          content: d.value
         },
-        b
-      ) : u.type === "mermaid" ? /* @__PURE__ */ t.jsx(W, { chart: u.value, frozen: !u.complete }, b) : u.type === "svg" ? /* @__PURE__ */ t.jsx(Y, { svg: u.value }, b) : null;
+        j
+      ) : d.type === "mermaid" ? /* @__PURE__ */ t.jsx(q, { chart: d.value, frozen: !d.complete }, j) : d.type === "svg" ? /* @__PURE__ */ t.jsx(re, { svg: d.value }, j) : null;
     });
   };
-  return R ? /* @__PURE__ */ t.jsx("div", { className: "content-render markdown-body", children: ee.map(
-    (e, s) => e.type === "sandbox" ? /* @__PURE__ */ t.jsx(
-      fe,
+  return ce ? /* @__PURE__ */ t.jsx("div", { className: "content-render markdown-body", children: le.map(
+    (e, n) => e.type === "sandbox" ? /* @__PURE__ */ t.jsx(
+      Ne,
       {
         hideFullScreen: !0,
         type: "sandbox",
         content: e.value,
         className: "content-render-iframe",
-        loadingText: f,
-        styleLoadingText: p,
-        scriptLoadingText: x,
-        disableLoadingOverlay: v,
-        fullScreenButtonText: B,
-        mode: A
+        loadingText: w,
+        styleLoadingText: k,
+        scriptLoadingText: $,
+        disableLoadingOverlay: z,
+        fullScreenButtonText: D,
+        mode: P
       },
-      `sandbox-${s}`
-    ) : /* @__PURE__ */ t.jsx(X.Fragment, { children: re(e.value, `md-${s}`) }, `md-${s}`)
+      `sandbox-${n}`
+    ) : /* @__PURE__ */ t.jsx(Z.Fragment, { children: de(e.value, `md-${n}`) }, `md-${n}`)
   ) }) : /* @__PURE__ */ t.jsxs("div", { className: "content-render markdown-body", children: [
-    te.map((e, s) => {
+    me.map((e, n) => {
       if (e.type === "text")
         return /* @__PURE__ */ t.jsx(
-          Z,
+          ne,
           {
-            components: c,
+            components: J,
             content: e.value
           },
-          s
+          n
         );
       if (e.type === "mermaid")
         return /* @__PURE__ */ t.jsx(
-          W,
+          q,
           {
             chart: e.value,
             frozen: !e.complete
           },
-          s
+          n
         );
       if (e.type === "svg")
-        return /* @__PURE__ */ t.jsx(Y, { svg: e.value }, s);
+        return /* @__PURE__ */ t.jsx(re, { svg: e.value }, n);
     }),
-    o && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: X.createElement(o, {
+    a && /* @__PURE__ */ t.jsx("div", { className: "content-render-custom-bar", children: Z.createElement(a, {
       content: r,
-      displayContent: m,
-      onSend: a
+      displayContent: E,
+      onSend: i
     }) })
   ] });
 };
 export {
-  Z as MarkdownRenderer,
-  rt as default
+  ne as MarkdownRenderer,
+  dt as default
 };
 //# sourceMappingURL=ContentRender.es.js.map