markdown-flow-ui 0.1.100 → 0.1.101

package/dist/components/Slide/Slide.es.js

@@ -0,0 +1,583 @@
+import { j as n } from "../../_virtual/jsx-runtime.es.js";
+import { memo as it, useRef as I, useMemo as c, useState as E, useCallback as u, useEffect as p } from "react";
+import { isSandboxInteractionMessage as ut } from "../../lib/sandboxInteraction.es.js";
+import { cn as J } from "../../lib/utils.es.js";
+import at from "../ContentRender/ContentRender.es.js";
+import qe from "../ContentRender/IframeSandbox.es.js";
+import "../ui/inputGroup/input-group.es.js";
+import { getInteractionDefaultValues as ct, getInteractionDefaultSelectedValues as dt } from "../../lib/interaction-defaults.es.js";
+import ft from "./Player.es.js";
+import mt from "./useSlide.es.js";
+import pt from "./useWakePlayerFromIframe.es.js";
+import { shouldPresentInteractionOverlay as ht } from "./utils/interactionPlayback.es.js";
+import { getPlaybackSequenceTransition as gt } from "./utils/playbackSequence.es.js";
+import { getPlayerCustomActionCount as xt } from "./utils/playerCustomActions.es.js";
+/* empty css             */
+import yt from "../../Documents/ai-shifu/markdown-flow-ui/node_modules/.pnpm/lucide-react@0.525.0_react@19.0.1/node_modules/lucide-react/dist/esm/icons/loader-circle.es.js";
+const vt = 1e3, Fe = it(
+  ({
+    content: B,
+    title: j,
+    defaultButtonText: h,
+    defaultInputText: z,
+    defaultSelectedValues: b,
+    confirmButtonText: se,
+    copyButtonText: le,
+    copiedButtonText: N,
+    onSend: U,
+    readonly: K = !1
+  }) => /* @__PURE__ */ n.jsxs("div", { className: "slide-player__interaction-card", children: [
+    /* @__PURE__ */ n.jsx("div", { className: "slide-player__interaction-header", children: /* @__PURE__ */ n.jsx("p", { className: "slide-player__interaction-title", children: j }) }),
+    /* @__PURE__ */ n.jsx("div", { className: "slide-player__interaction-body", children: /* @__PURE__ */ n.jsx(
+      at,
+      {
+        content: B,
+        defaultButtonText: h,
+        defaultInputText: z,
+        defaultSelectedValues: b,
+        confirmButtonText: se,
+        copyButtonText: le,
+        copiedButtonText: N,
+        onSend: U,
+        readonly: K,
+        enableTypewriter: !1,
+        sandboxMode: "content"
+      }
+    ) }),
+    /* @__PURE__ */ n.jsx("div", { className: "slide-player__interaction-arrow" })
+  ] })
+);
+Fe.displayName = "InteractionOverlayCard";
+const St = (B, j) => B.length === j.length && B.every((h, z) => {
+  const b = j[z];
+  return h.sequence_number === b?.sequence_number && h.type === b?.type && h.content === b?.content;
+}), Ot = ({
+  elementList: B = [],
+  showPlayer: j = !0,
+  playerAlwaysVisible: h = !1,
+  playerClassName: z,
+  playerCustomActions: b,
+  bufferingText: se = "Buffering...",
+  interactionTitle: le,
+  interactionTexts: N,
+  playerAutoHideDelay: U = 3e3,
+  interactionDefaultValueOptions: K,
+  onSend: me,
+  onPlayerVisibilityChange: ie,
+  onStepChange: pe,
+  className: Le,
+  onPointerDown: he,
+  ...Oe
+}) => {
+  const ue = I(null), ae = I(null), ge = I(null), D = I(null), V = I(null), W = I(null), xe = I([]), Q = I(!1), k = I(null), ye = I(null), {
+    currentElementList: w,
+    stepElementLists: ve,
+    slideElementList: q,
+    currentIndex: d,
+    audioList: y,
+    currentAudioSequenceIndexes: Se,
+    currentStepHasSpeakableElement: A,
+    currentInteractionElement: a,
+    canGoPrev: Me,
+    canGoNext: T,
+    handlePrev: Ie,
+    handleNext: P
+  } = mt(B), be = c(() => {
+    if (!(d < 0))
+      return q[d];
+  }, [d, q]), He = q.filter(
+    (e) => e.is_renderable !== !1
+  ).length === 1, v = j && (q.length > 0 || y.length > 0 || !!a), S = c(
+    () => Se.map((e) => y[e]?.audioKey).filter((e) => !!e),
+    [y, Se]
+  ), [we, X] = E(!0), [Z, G] = E(!1), [m, F] = E(null), [$e, g] = E(!1), [R, Ae] = E(!1), [o, ee] = E(), [te, Y] = E(!1), L = v && (h || we), _e = c(
+    () => xt(b),
+    [b]
+  ), ze = c(
+    () => ({
+      "--slide-player-custom-action-count": String(_e)
+    }),
+    [_e]
+  ), { mountedStepStates: Ue, currentMountedStateIndex: De } = c(() => {
+    const e = [], t = /* @__PURE__ */ new Map();
+    return ve.forEach((l, i) => {
+      const r = e.findIndex(
+        (s) => St(
+          s.elementList,
+          l
+        )
+      );
+      if (r >= 0) {
+        e[r]?.sourceStepIndexes.push(i), t.set(i, r);
+        return;
+      }
+      e.push({
+        elementList: l,
+        sourceStepIndexes: [i]
+      }), t.set(i, e.length - 1);
+    }), {
+      mountedStepStates: e,
+      currentMountedStateIndex: d >= 0 ? t.get(d) ?? -1 : -1
+    };
+  }, [d, ve]), Pe = c(() => String(d), [d]), ce = c(() => m ? y.findIndex(
+    (e) => (e.audioKey ?? "") === m
+  ) : -1, [y, m]), ne = c(
+    () => S[0] ?? "none",
+    [S]
+  ), Re = S.length > 0, Te = c(() => a ? `${a.sequence_number ?? "none"}:${String(
+    a.content ?? ""
+  )}` : "none", [a]), de = c(
+    () => [Pe, Te].join("|"),
+    [Te, Pe]
+  ), Ce = !!c(() => !ne || ne === "none" ? "" : y.find(
+    (t) => t.audioKey === ne
+  )?.audioUrl?.trim() ?? "", [y, ne]), C = u(() => {
+    D.current !== null && (window.clearTimeout(D.current), D.current = null);
+  }, []), _ = u(() => {
+    W.current !== null && (window.clearTimeout(W.current), W.current = null);
+  }, []), O = u(() => {
+    V.current !== null && (window.clearTimeout(V.current), V.current = null);
+  }, []), M = u(() => {
+    O(), _(), F(null), g(!1), Ae(!1), ee(void 0), Y(!1);
+  }, [O, _]), H = u(() => {
+    const e = S[0];
+    return e ? (F(e), !0) : !1;
+  }, [S]), re = u(() => {
+    _(), Y(!1), !H() && T && P();
+  }, [
+    T,
+    _,
+    P,
+    H
+  ]), f = u(
+    (e = Z) => {
+      v && (X(!0), C(), !(h || !e || U <= 0) && (D.current = window.setTimeout(() => {
+        X(!1), D.current = null;
+      }, U)));
+    },
+    [
+      C,
+      Z,
+      h,
+      U,
+      v
+    ]
+  ), fe = !!(a?.readonly || a?.user_input?.trim()), $ = !!a && !fe;
+  p(() => () => {
+    O(), C(), _();
+  }, [
+    O,
+    _,
+    C
+  ]), p(() => (ie?.(L), () => {
+    ie?.(!1);
+  }), [ie, L]), p(() => {
+    pe?.(be, d);
+  }, [d, be, pe]), p(() => {
+    if (!v) {
+      C(), X(!1);
+      return;
+    }
+    if (h) {
+      C(), X(!0);
+      return;
+    }
+    Z || f(!0);
+  }, [
+    C,
+    Z,
+    h,
+    v,
+    f
+  ]), p(() => {
+    if (typeof window > "u")
+      return;
+    const e = (t) => {
+      t.origin === window.location.origin && ut(t.data) && v && (G(!0), f(!0));
+    };
+    return window.addEventListener("message", e), () => {
+      window.removeEventListener("message", e);
+    };
+  }, [v, f]), pt({
+    sectionRef: ue,
+    enabled: v,
+    onWake: () => {
+      G(!0), f(!0);
+    }
+  }), p(() => {
+    const { hasPlaybackContextChanged: e, shouldInitializeAudioSequence: t } = gt({
+      previousResetKey: ye.current,
+      nextResetKey: de,
+      currentAudioKey: m,
+      hasCompletedCurrentStepAudio: R
+    });
+    ye.current = de;
+    const l = k.current === d && !!a, i = ht({
+      hasInteraction: !!a,
+      shouldBlockPlaybackForInteraction: $,
+      shouldOpenInteractionOverlayAfterAudio: l,
+      hasResolvedCurrentInteraction: fe,
+      currentStepHasSpeakableElement: A
+    });
+    if (e && M(), !(w.length === 0 && !a)) {
+      if (i) {
+        ee(a), Y(!0), k.current = null;
+        return;
+      }
+      if (a && (ee(a), Y(!1), k.current = null), !!t && !H()) {
+        if (A) {
+          g(!0);
+          return;
+        }
+        if (T)
+          return V.current = window.setTimeout(() => {
+            V.current = null, P();
+          }, vt), () => {
+            O();
+          };
+      }
+    }
+  }, [
+    T,
+    O,
+    w.length,
+    a,
+    m,
+    de,
+    A,
+    P,
+    R,
+    fe,
+    $,
+    M,
+    H
+  ]), p(() => {
+    if (!A || $) {
+      g(!1);
+      return;
+    }
+    if (R) {
+      g(!1);
+      return;
+    }
+    if (Re) {
+      g(!1);
+      return;
+    }
+    g(!0);
+  }, [
+    Re,
+    A,
+    R,
+    $
+  ]), p(() => {
+    m || S.length === 0 || !A || $ || R || H();
+  }, [
+    m,
+    S,
+    A,
+    R,
+    $,
+    H
+  ]), p(() => {
+    !m || ce >= 0 || F(null);
+  }, [ce, m]);
+  const Ee = c(() => {
+    if (!o)
+      return {};
+    const e = !!o.user_input?.trim();
+    return ct(
+      typeof o.content == "string" ? o.content : void 0,
+      o.user_input,
+      e ? void 0 : K
+    );
+  }, [o, K]), Ve = c(() => {
+    if (!o)
+      return;
+    const e = !!o.user_input?.trim();
+    return dt(
+      typeof o.content == "string" ? o.content : void 0,
+      o.user_input,
+      e ? void 0 : K
+    );
+  }, [o, K]), Be = !!o?.user_input?.trim(), je = !!o?.readonly || Be, Ne = je || Be, We = u(
+    (e) => {
+      const l = [
+        ...e.selectedValues ?? [],
+        e.inputText?.trim() ?? "",
+        e.buttonText?.trim() ?? ""
+      ].filter(Boolean).join(", ");
+      ee((i) => !i || !l ? i : {
+        ...i,
+        user_input: l
+      }), me?.(e, o), re();
+    },
+    [o, re, me]
+  );
+  p(() => {
+    if (_(), !(!te || !Ne))
+      return W.current = window.setTimeout(() => {
+        W.current = null, re();
+      }, 2e3), () => {
+        _();
+      };
+  }, [
+    _,
+    re,
+    te,
+    Ne
+  ]);
+  const Ge = (e, t = {}) => e ? e.type === "slot" ? /* @__PURE__ */ n.jsx(n.Fragment, { children: e.content }) : e.type === "html" ? /* @__PURE__ */ n.jsx(
+    qe,
+    {
+      className: "content-render-iframe",
+      hideFullScreen: !0,
+      mode: "blackboard",
+      replaceRootScreenHeightWithFull: t.replaceRootScreenHeightWithFull,
+      type: "sandbox",
+      content: e.content
+    }
+  ) : /* @__PURE__ */ n.jsx(
+    qe,
+    {
+      className: "content-render-iframe",
+      hideFullScreen: !0,
+      mode: "blackboard",
+      type: "markdown",
+      content: e.content
+    }
+  ) : null, Ye = (e = [], t = !1) => {
+    if (e.length === 0)
+      return null;
+    const l = e.filter(
+      (r) => r.is_renderable !== !1
+    ).length, i = e.reduce(
+      (r, s, x) => s.is_renderable !== !1 ? x : r,
+      -1
+    );
+    return /* @__PURE__ */ n.jsx("div", { className: "slide-stage__content flex w-full flex-col gap-4", children: e.map((r, s) => {
+      const x = r.type === "html" && r.is_renderable === !1;
+      return /* @__PURE__ */ n.jsx(
+        "div",
+        {
+          ref: t && s === i ? ge : null,
+          "aria-hidden": x || void 0,
+          className: J(
+            "w-full shrink-0",
+            l === 1 && r.is_renderable !== !1 && "slide-element--single",
+            x ? "pointer-events-none fixed left-[-200vw] top-0 -z-10 h-[100dvh] w-[100vw] overflow-hidden opacity-0" : r.is_renderable === !1 && "hidden"
+          ),
+          children: Ge(r, {
+            replaceRootScreenHeightWithFull: l === 1 && r.type === "html" && r.is_renderable !== !1
+          })
+        },
+        r.sequence_number ?? `${r.type}-${s}`
+      );
+    }) });
+  }, Je = () => {
+    const e = ue.current;
+    if (e) {
+      if (document.fullscreenElement) {
+        document.exitFullscreen().catch(() => {
+        });
+        return;
+      }
+      e.requestFullscreen?.().catch(() => {
+      });
+    }
+  }, Ke = u(() => {
+    const e = ae.current;
+    e && e.scrollTo({
+      top: e.scrollHeight,
+      behavior: "smooth"
+    });
+  }, []), Qe = u(() => {
+    Q.current = !0, k.current = null, G(!0), g(!1), f(!0), M(), Ie();
+  }, [Ie, M, f]), Xe = u(() => {
+    Q.current = !0, k.current = null, G(!0), g(!1), f(!0), M(), P();
+  }, [P, M, f]), Ze = u(
+    (e) => {
+      if (!A || R) {
+        g(!1);
+        return;
+      }
+      g(e);
+    },
+    [A, R]
+  ), et = u(
+    (e) => {
+      const t = y[e]?.audioKey;
+      if (!t || !m || t !== m)
+        return;
+      const l = S.findIndex(
+        (s) => s === t
+      );
+      if (l < 0) {
+        F(null);
+        return;
+      }
+      const i = l + 1, r = S[i];
+      if (r) {
+        F(r);
+        return;
+      }
+      if (F(null), Ae(!0), g(!1), T) {
+        const s = d + 1, x = q[s];
+        Ce && x?.type === "interaction" && (k.current = s), P();
+      }
+    },
+    [
+      y,
+      T,
+      d,
+      m,
+      S,
+      P,
+      Ce,
+      q
+    ]
+  ), tt = u(() => {
+    o && Y((e) => !e);
+  }, [o]), ke = u(
+    (e) => {
+      e.stopPropagation(), L && f(!0);
+    },
+    [we, f]
+  ), nt = u(
+    (e) => {
+      he?.(e), G(!0), f(!0);
+    },
+    [he, f]
+  ), rt = !!o && te, oe = c(
+    () => w.map(
+      (e, t) => `${e.sequence_number ?? `${e.type}-${t}`}:${String(e.is_new ?? "")}`
+    ),
+    [w]
+  );
+  return p(() => {
+    const e = xe.current, i = (e.length > 0 && e.length < oe.length && e.every((s, x) => s === oe[x]) ? w.slice(e.length) : []).some(
+      (s) => s.is_new === !1
+    );
+    if (xe.current = oe, !i)
+      return;
+    const r = window.requestAnimationFrame(() => {
+      const s = ae.current, x = ge.current;
+      if (!s || !x)
+        return;
+      const ot = s.getBoundingClientRect(), st = x.getBoundingClientRect(), lt = s.scrollTop + (st.top - ot.top);
+      s.scrollTo({
+        top: Math.max(lt, 0),
+        behavior: "smooth"
+      });
+    });
+    return () => {
+      window.cancelAnimationFrame(r);
+    };
+  }, [w, oe]), p(() => {
+    if (!Q.current || (Q.current = !1, w.length === 0))
+      return;
+    const e = window.requestAnimationFrame(() => {
+      Ke();
+    });
+    return () => {
+      window.cancelAnimationFrame(e);
+    };
+  }, [w, Ke]), /* @__PURE__ */ n.jsxs(
+    "section",
+    {
+      ref: ue,
+      className: J("relative h-full w-full", Le),
+      onPointerDown: nt,
+      ...Oe,
+      children: [
+        /* @__PURE__ */ n.jsx(
+          "div",
+          {
+            className: J(
+              "h-full min-h-0 w-full",
+              He ? "slide-content--single" : "grid gap-4"
+            ),
+            children: w.length > 0 ? /* @__PURE__ */ n.jsx("div", { className: "slide-stage", children: /* @__PURE__ */ n.jsx("div", { ref: ae, className: "slide-stage__layer w-full", children: Ue.map(
+              (e, t) => {
+                const l = t === De;
+                return /* @__PURE__ */ n.jsx(
+                  "div",
+                  {
+                    "aria-hidden": !l || void 0,
+                    className: "w-full h-full",
+                    style: { display: l ? void 0 : "none" },
+                    children: Ye(
+                      e.elementList,
+                      l
+                    )
+                  },
+                  e.sourceStepIndexes[0] ?? t
+                );
+              }
+            ) }) }) : null
+          }
+        ),
+        $e ? /* @__PURE__ */ n.jsxs("div", { className: "pointer-events-none absolute left-1/2 top-1/2 z-[3] flex size-28 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center gap-2 rounded-2xl bg-foreground/65 px-3 py-4 text-center text-xs leading-4 font-medium text-background shadow-lg backdrop-blur-sm", children: [
+          /* @__PURE__ */ n.jsx(yt, { className: "size-5 animate-spin text-background" }),
+          /* @__PURE__ */ n.jsx("span", { children: se })
+        ] }) : null,
+        rt ? /* @__PURE__ */ n.jsx(
+          "div",
+          {
+            className: J(
+              "slide-interaction-overlay",
+              L && v ? "slide-interaction-overlay--with-player" : "slide-interaction-overlay--standalone"
+            ),
+            onClick: ke,
+            onPointerDown: ke,
+            style: ze,
+            children: /* @__PURE__ */ n.jsx(
+              Fe,
+              {
+                content: String(o?.content ?? ""),
+                defaultButtonText: Ee.buttonText ?? "",
+                defaultInputText: Ee.inputText ?? "",
+                defaultSelectedValues: Ve,
+                confirmButtonText: N?.confirmButtonText,
+                copyButtonText: N?.copyButtonText,
+                copiedButtonText: N?.copiedButtonText,
+                onSend: We,
+                readonly: je,
+                title: N?.title ?? le ?? "Submit the content below to continue."
+              }
+            )
+          }
+        ) : null,
+        v ? /* @__PURE__ */ n.jsx(
+          ft,
+          {
+            audioList: y,
+            className: J(
+              "absolute left-1/2 bottom-6 z-[2] -translate-x-1/2",
+              z,
+              !L && "pointer-events-none opacity-0"
+            ),
+            currentAudioIndex: ce,
+            defaultPlaying: !0,
+            hasInteraction: !!o,
+            isInteractionOpen: te,
+            onLoadingChange: Ze,
+            nextDisabled: !T,
+            onEnded: et,
+            onFullscreen: Je,
+            onInteractionToggle: tt,
+            onNext: Xe,
+            onPrev: Qe,
+            prevDisabled: !Me,
+            showControls: L,
+            customActions: b
+          }
+        ) : null
+      ]
+    }
+  );
+};
+export {
+  Ot as default
+};
+//# sourceMappingURL=Slide.es.js.map