@ethora/chat-component 26.7.4 → 26.7.6

package/dist/FilePreviewModal-CwWnHsB1.js

@@ -0,0 +1,736 @@
+import { jsx as u, jsxs as B } from "react/jsx-runtime";
+import te, { useState as H, useRef as I, useEffect as O, useMemo as j, useCallback as M } from "react";
+import { n as le, b as pe, aK as we, af as ve, x as X, B as $, aL as xe, aM as be, aN as ye, aO as Ee, aP as Le, aQ as ue, aR as ne, a as Ce, u as Q, a7 as Re, aS as re, aT as Me, ar as q, aU as ke, aV as Pe, aW as Se, aX as Te, p as Ae, aY as Xe, aZ as Ye, a_ as ze, a$ as Ie, C as Oe, b0 as De, b1 as Fe, az as Ne, b2 as Be, v as He } from "./main-B-8IhwaP.js";
+function oe(n, i) {
+  let o;
+  return (...x) => {
+    window.clearTimeout(o), o = window.setTimeout(() => n(...x), i);
+  };
+}
+function Ue({ debounce: n, scroll: i, polyfill: o, offsetSize: x } = { debounce: 0, scroll: !1, offsetSize: !1 }) {
+  const d = o || (typeof window > "u" ? class {
+  } : window.ResizeObserver);
+  if (!d) throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
+  const [b, k] = H({ left: 0, top: 0, width: 0, height: 0, bottom: 0, right: 0, x: 0, y: 0 }), t = I({ element: null, scrollContainers: null, resizeObserver: null, lastBounds: b, orientationHandler: null }), P = n ? typeof n == "number" ? n : n.scroll : null, y = n ? typeof n == "number" ? n : n.resize : null, g = I(!1);
+  O(() => (g.current = !0, () => {
+    g.current = !1;
+  }));
+  const [E, p, w] = j(() => {
+    const r = () => {
+      if (!t.current.element) return;
+      const { left: m, top: L, width: v, height: N, bottom: T, right: l, x: h, y: z } = t.current.element.getBoundingClientRect(), C = { left: m, top: L, width: v, height: N, bottom: T, right: l, x: h, y: z };
+      t.current.element instanceof HTMLElement && x && (C.height = t.current.element.offsetHeight, C.width = t.current.element.offsetWidth), Object.freeze(C), g.current && !Ve(t.current.lastBounds, C) && k(t.current.lastBounds = C);
+    };
+    return [r, y ? oe(r, y) : r, P ? oe(r, P) : r];
+  }, [k, x, P, y]);
+  function S() {
+    t.current.scrollContainers && (t.current.scrollContainers.forEach((r) => r.removeEventListener("scroll", w, !0)), t.current.scrollContainers = null), t.current.resizeObserver && (t.current.resizeObserver.disconnect(), t.current.resizeObserver = null), t.current.orientationHandler && ("orientation" in screen && "removeEventListener" in screen.orientation ? screen.orientation.removeEventListener("change", t.current.orientationHandler) : "onorientationchange" in window && window.removeEventListener("orientationchange", t.current.orientationHandler));
+  }
+  function Y() {
+    t.current.element && (t.current.resizeObserver = new d(w), t.current.resizeObserver.observe(t.current.element), i && t.current.scrollContainers && t.current.scrollContainers.forEach((r) => r.addEventListener("scroll", w, { capture: !0, passive: !0 })), t.current.orientationHandler = () => {
+      w();
+    }, "orientation" in screen && "addEventListener" in screen.orientation ? screen.orientation.addEventListener("change", t.current.orientationHandler) : "onorientationchange" in window && window.addEventListener("orientationchange", t.current.orientationHandler));
+  }
+  const D = (r) => {
+    !r || r === t.current.element || (S(), t.current.element = r, t.current.scrollContainers = de(r), Y());
+  };
+  return je(w, !!i), _e(p), O(() => {
+    S(), Y();
+  }, [i, w, p]), O(() => S, []), [D, b, E];
+}
+function _e(n) {
+  O(() => {
+    const i = n;
+    return window.addEventListener("resize", i), () => {
+      window.removeEventListener("resize", i);
+    };
+  }, [n]);
+}
+function je(n, i) {
+  O(() => {
+    if (i) {
+      const o = n;
+      return window.addEventListener("scroll", o, { capture: !0, passive: !0 }), () => {
+        window.removeEventListener("scroll", o, !0);
+      };
+    }
+  }, [n, i]);
+}
+function de(n) {
+  const i = [];
+  if (!n || n === document.body) return i;
+  const { overflow: o, overflowX: x, overflowY: d } = window.getComputedStyle(n);
+  return [o, x, d].some((b) => b === "auto" || b === "scroll") && i.push(n), [...i, ...de(n.parentElement)];
+}
+const $e = ["x", "y", "top", "bottom", "left", "right", "width", "height"], Ve = (n, i) => $e.every((o) => n[o] === i[o]), ie = X.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+`, We = X.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  width: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+
+  canvas {
+    max-width: 100%;
+    height: auto;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+    background-color: #fff;
+  }
+`, Ze = X.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 0 0 auto;
+  font-size: 14px;
+  color: var(--ethora-color-text, #141414);
+`, ae = X($)`
+  width: auto;
+  min-width: 40px;
+  padding: 0 12px;
+`, Ke = X.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: var(--ethora-radius-lg, 16px);
+  background-color: var(--ethora-color-bg-subtle, #f5f7fa);
+  color: var(--ethora-color-text, #141414);
+  text-align: center;
+
+  a {
+    color: var(--ethora-color-primary, #0052cd);
+  }
+`, Ge = ({ pdfUrl: n }) => {
+  const i = le(), { config: o } = pe(), [x, d] = Ue(), b = I(null), k = I(null), t = I(null), [P, y] = H("loading"), [g, E] = H(0), [p, w] = H(1), S = Math.max(320, Math.floor(d.width || 0));
+  O(() => {
+    let r = !1, m;
+    return y("loading"), w(1), E(0), (async () => {
+      const L = await we(o?.pdfPreview?.workerSrc);
+      if (!r) {
+        if (!L || !n) {
+          y("error");
+          return;
+        }
+        try {
+          m = L.getDocument({ url: n, isEvalSupported: !1 });
+          const v = await m.promise;
+          if (r) {
+            v.destroy().catch(() => {
+            });
+            return;
+          }
+          k.current = v, E(v.numPages), y("ready");
+        } catch (v) {
+          r || (console.warn("[Ethora] PDF open failed:", v), y("error"));
+        }
+      }
+    })(), () => {
+      r = !0, t.current?.cancel(), t.current = null, k.current?.destroy?.().catch(() => {
+      }), k.current = null, m?.destroy?.().catch(() => {
+      });
+    };
+  }, [n, o?.pdfPreview?.workerSrc]), O(() => {
+    const r = k.current, m = b.current;
+    if (P !== "ready" || !r || !m || S <= 0) return;
+    let L = !1;
+    return (async () => {
+      try {
+        const v = await r.getPage(p);
+        if (L) return;
+        const N = v.getViewport({ scale: 1 }), T = N.width ? S / N.width : 1, l = v.getViewport({ scale: T });
+        m.width = Math.max(1, Math.floor(l.width)), m.height = Math.max(1, Math.floor(l.height));
+        const h = m.getContext("2d");
+        if (!h) {
+          y("error");
+          return;
+        }
+        t.current?.cancel();
+        const z = v.render({ canvasContext: h, viewport: l });
+        t.current = z, await z.promise, v.cleanup();
+      } catch (v) {
+        L || console.warn("[Ethora] PDF page render failed:", v);
+      }
+    })(), () => {
+      L = !0, t.current?.cancel(), t.current = null;
+    };
+  }, [P, p, S]);
+  const Y = M(
+    () => w((r) => Math.max(1, r - 1)),
+    []
+  ), D = M(
+    () => w((r) => Math.min(g || 1, r + 1)),
+    [g]
+  );
+  return P === "error" ? /* @__PURE__ */ u(ie, { children: /* @__PURE__ */ B(Ke, { children: [
+    /* @__PURE__ */ u("span", { children: i("modal.filePreview.pdfUnavailable") }),
+    /* @__PURE__ */ u("a", { href: n, target: "_blank", rel: "noopener noreferrer", children: i("modal.filePreview.openExternally") })
+  ] }) }) : /* @__PURE__ */ B(ie, { children: [
+    /* @__PURE__ */ u(We, { ref: x, children: P === "loading" ? /* @__PURE__ */ u(ve, { color: o?.colors?.primary }) : /* @__PURE__ */ u("canvas", { ref: b }) }),
+    g > 1 && /* @__PURE__ */ B(Ze, { children: [
+      /* @__PURE__ */ u(
+        ae,
+        {
+          onClick: Y,
+          disabled: p <= 1,
+          text: "‹",
+          "aria-label": i("modal.filePreview.previousPage")
+        }
+      ),
+      /* @__PURE__ */ B("span", { children: [
+        p,
+        " / ",
+        g
+      ] }),
+      /* @__PURE__ */ u(
+        ae,
+        {
+          onClick: D,
+          disabled: p >= g,
+          text: "›",
+          "aria-label": i("modal.filePreview.nextPage")
+        }
+      )
+    ] })
+  ] });
+}, A = 1, J = 6, Qe = 2.5, qe = 50, Je = 300, se = 24, et = 16e-4, K = (n, i, o) => Math.min(o, Math.max(i, n)), tt = X.div`
+  position: relative;
+  /* An explicit height, not flex growth alone: the parent lays its children
+     out in a row and centres them, so the viewport would otherwise be sized
+     by its content, and the image's own max-height of 100% would resolve
+     against that auto height and never fit anything. */
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  /* A zoomed image is dragged, not selected, and a two-finger gesture is a
+     pinch rather than a page scroll. */
+  touch-action: none;
+  user-select: none;
+  background-color: var(--ethora-color-bg, #fff);
+`, nt = X.img`
+  /* Same box the single-file view always used: fill the stage and let
+     object-fit do the letterboxing, so what the viewer sees at scale 1 is
+     unchanged. It is also what makes the pan clamp exact, since the painted
+     content box is then derived from the natural aspect ratio alone. */
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transform-origin: center center;
+  will-change: transform;
+  cursor: ${({ $grabbing: n, $pannable: i }) => n ? "grabbing" : i ? "grab" : "zoom-in"};
+  transition: ${({ $animate: n }) => n ? `transform ${xe} ${be}` : "none"};
+  ${ye}
+`, fe = te.forwardRef(
+  ({ src: n, alt: i, onSwipeLeft: o, onSwipeRight: x, onError: d, onScaleChange: b }, k) => {
+    const t = I(null), P = I(null), [y, g] = H(A), [E, p] = H({ x: 0, y: 0 }), [w, S] = H(!1), [Y, D] = H(!1), r = I({ scale: A, offset: { x: 0, y: 0 } });
+    r.current = { scale: y, offset: E };
+    const m = I(null), L = I(null), v = I(
+      null
+    ), N = M((a) => {
+      const e = t.current, c = P.current;
+      if (!e) return { x: 0, y: 0 };
+      const s = e.clientWidth, f = e.clientHeight, R = c?.naturalWidth || 0, F = c?.naturalHeight || 0;
+      let _ = s, W = f;
+      if (R > 0 && F > 0 && s > 0 && f > 0) {
+        const Z = Math.min(s / R, f / F);
+        _ = R * Z, W = F * Z;
+      }
+      return {
+        x: Math.max(0, (_ * a - s) / 2),
+        y: Math.max(0, (W * a - f) / 2)
+      };
+    }, []), T = M(
+      (a, e, c) => {
+        const s = K(a, A, J), f = N(s);
+        S(c), g(s), p({
+          x: K(e.x, -f.x, f.x),
+          y: K(e.y, -f.y, f.y)
+        });
+      },
+      [N]
+    ), l = M(
+      (a, e, c, s) => {
+        const f = r.current, R = K(a, A, J), F = R / f.scale;
+        T(
+          R,
+          {
+            x: e - (e - f.offset.x) * F,
+            y: c - (c - f.offset.y) * F
+          },
+          s
+        );
+      },
+      [T]
+    ), h = M(() => {
+      T(A, { x: 0, y: 0 }, !0);
+    }, [T]), z = M(
+      (a) => {
+        l(r.current.scale * a, 0, 0, !0);
+      },
+      [l]
+    );
+    te.useImperativeHandle(
+      k,
+      () => ({
+        zoomIn: () => z(1.5),
+        zoomOut: () => z(1 / 1.5),
+        reset: h
+      }),
+      [z, h]
+    ), O(() => {
+      S(!1), g(A), p({ x: 0, y: 0 });
+    }, [n]), O(() => {
+      b?.(y);
+    }, [y, b]), O(() => {
+      const a = t.current;
+      if (!a) return;
+      const e = (c) => {
+        c.preventDefault();
+        const s = a.getBoundingClientRect(), f = c.clientX - s.left - s.width / 2, R = c.clientY - s.top - s.height / 2, F = Math.exp(-c.deltaY * et);
+        l(r.current.scale * F, f, R, !1);
+      };
+      return a.addEventListener("wheel", e, { passive: !1 }), () => a.removeEventListener("wheel", e);
+    }, [l]);
+    const C = M(
+      (a, e) => {
+        const c = t.current;
+        if (!c) return;
+        if (r.current.scale > A) {
+          h();
+          return;
+        }
+        const s = c.getBoundingClientRect();
+        l(
+          Qe,
+          a - s.left - s.width / 2,
+          e - s.top - s.height / 2,
+          !0
+        );
+      },
+      [h, l]
+    ), G = M((a) => {
+      a.button === 0 && (r.current.scale <= A || (a.preventDefault(), m.current = { x: a.clientX, y: a.clientY }, D(!0)));
+    }, []);
+    O(() => {
+      if (!Y || typeof window > "u") return;
+      const a = (c) => {
+        const s = m.current;
+        if (!s) return;
+        const f = r.current;
+        T(
+          f.scale,
+          {
+            x: f.offset.x + (c.clientX - s.x),
+            y: f.offset.y + (c.clientY - s.y)
+          },
+          !1
+        ), m.current = { x: c.clientX, y: c.clientY };
+      }, e = () => {
+        m.current = null, D(!1);
+      };
+      return window.addEventListener("mousemove", a), window.addEventListener("mouseup", e), () => {
+        window.removeEventListener("mousemove", a), window.removeEventListener("mouseup", e);
+      };
+    }, [Y, T]);
+    const V = M((a) => {
+      if (a.touches.length === 2) {
+        const [c, s] = [a.touches[0], a.touches[1]];
+        L.current = {
+          startX: 0,
+          startY: 0,
+          lastX: 0,
+          lastY: 0,
+          pinchDistance: Math.hypot(
+            c.clientX - s.clientX,
+            c.clientY - s.clientY
+          ),
+          pinchScale: r.current.scale,
+          panning: !1,
+          moved: !1
+        };
+        return;
+      }
+      const e = a.touches[0];
+      e && (L.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        lastX: e.clientX,
+        lastY: e.clientY,
+        pinchDistance: 0,
+        pinchScale: r.current.scale,
+        panning: r.current.scale > A,
+        moved: !1
+      });
+    }, []), U = M(
+      (a) => {
+        const e = L.current;
+        if (!e) return;
+        if (a.touches.length === 2 && e.pinchDistance > 0) {
+          const [s, f] = [a.touches[0], a.touches[1]], R = Math.hypot(
+            s.clientX - f.clientX,
+            s.clientY - f.clientY
+          ), F = t.current;
+          if (!F || R <= 0) return;
+          const _ = F.getBoundingClientRect(), W = (s.clientX + f.clientX) / 2 - _.left - _.width / 2, Z = (s.clientY + f.clientY) / 2 - _.top - _.height / 2;
+          e.moved = !0, l(
+            e.pinchScale * R / e.pinchDistance,
+            W,
+            Z,
+            !1
+          );
+          return;
+        }
+        const c = a.touches[0];
+        if (c) {
+          if ((Math.abs(c.clientX - e.startX) > 6 || Math.abs(c.clientY - e.startY) > 6) && (e.moved = !0), e.panning) {
+            const s = r.current;
+            T(
+              s.scale,
+              {
+                x: s.offset.x + (c.clientX - e.lastX),
+                y: s.offset.y + (c.clientY - e.lastY)
+              },
+              !1
+            );
+          }
+          e.lastX = c.clientX, e.lastY = c.clientY;
+        }
+      },
+      [T, l]
+    ), ee = M(
+      (a) => {
+        const e = L.current;
+        if (!e || a.touches.length > 0) return;
+        if (L.current = null, !e.moved && e.pinchDistance === 0) {
+          const f = Date.now(), R = v.current;
+          if (R && f - R.time < Je && Math.abs(R.x - e.startX) < se && Math.abs(R.y - e.startY) < se) {
+            v.current = null, C(e.startX, e.startY);
+            return;
+          }
+          v.current = {
+            time: f,
+            x: e.startX,
+            y: e.startY
+          };
+          return;
+        }
+        if (e.panning || e.pinchDistance > 0 || r.current.scale > A) return;
+        const c = e.lastX - e.startX, s = e.lastY - e.startY;
+        Math.abs(c) < qe || Math.abs(c) <= Math.abs(s) || (c < 0 ? o?.() : x?.());
+      },
+      [o, x, C]
+    ), me = M(
+      (a) => {
+        C(a.clientX, a.clientY);
+      },
+      [C]
+    ), ge = j(
+      () => `translate(${E.x}px, ${E.y}px) scale(${y})`,
+      [E.x, E.y, y]
+    );
+    return /* @__PURE__ */ u(
+      tt,
+      {
+        ref: t,
+        "data-testid": "image-lightbox-viewport",
+        onMouseDown: G,
+        onDoubleClick: me,
+        onTouchStart: V,
+        onTouchMove: U,
+        onTouchEnd: ee,
+        onTouchCancel: ee,
+        children: /* @__PURE__ */ u(
+          nt,
+          {
+            ref: P,
+            "data-testid": "image-lightbox-image",
+            src: n,
+            alt: i,
+            draggable: !1,
+            onError: d,
+            $grabbing: Y,
+            $pannable: y > A,
+            $animate: w,
+            style: { transform: ge }
+          }
+        )
+      }
+    );
+  }
+);
+fe.displayName = "ImageLightbox";
+const rt = (n) => {
+  if (!Array.isArray(n)) return [];
+  const i = [];
+  return n.forEach((o, x) => {
+    !o || o.isDeleted || o.id !== "delimiter-new" && Ee(o).forEach((d, b) => {
+      if (!d.location) return;
+      const k = Le(d);
+      ue(d.mimetype, k) === "image" && i.push({
+        key: `${o.id ?? x}:${b}`,
+        fileName: k,
+        fileURL: d.location,
+        mimetype: d.mimetype || ""
+      });
+    });
+  }), i;
+}, ot = (n, i) => {
+  if (!i?.fileURL) return -1;
+  const o = ne(i.fileURL);
+  return n.findIndex(
+    (x) => ne(x.fileURL) === o
+  );
+}, ce = "https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg", it = X.div`
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+`, he = X($)`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 44px;
+  height: 44px;
+  border-radius: var(--ethora-radius-full, 999px);
+  background-color: var(--ethora-color-bg, #fff);
+  box-shadow: var(--ethora-shadow-md, 0 4px 12px rgba(16, 24, 40, 0.1));
+  z-index: 2;
+`, at = X(he)`
+  left: 8px;
+`, st = X(he)`
+  right: 8px;
+`, ct = X.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`, lt = X.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  @media (max-width: 480px) {
+    display: none;
+  }
+`, ut = X.span`
+  font-size: var(--ethora-font-size-sm, 14px);
+  color: var(--ethora-color-text-secondary, #5a5f66);
+  white-space: nowrap;
+  padding: 0 4px;
+`, mt = ({
+  handleCloseModal: n
+}) => {
+  const i = Ce(), o = le(), { activeFile: x } = Q(
+    (l) => l.chatSettingStore
+  ), d = j(
+    () => x ?? { fileName: "", fileURL: "", mimetype: "" },
+    [x]
+  ), b = Q(
+    (l) => l.chatSettingStore.user?.fileToken || ""
+  ), k = Q(
+    (l) => Re(l)?.messages
+  ), t = I(null), [P, y] = H(A), g = ue(d?.mimetype, d?.fileName), E = j(() => rt(k), [k]), p = j(
+    () => g === "image" ? ot(E, d) : -1,
+    [E, d, g]
+  ), w = p >= 0 && E.length > 1, S = w && p > 0, Y = w && p < E.length - 1, D = M(
+    (l) => {
+      const h = E[l];
+      h && i(
+        re({
+          fileName: h.fileName,
+          fileURL: h.fileURL,
+          mimetype: h.mimetype
+        })
+      );
+    },
+    [i, E]
+  ), r = M(() => {
+    S && D(p - 1);
+  }, [D, S, p]), m = M(() => {
+    Y && D(p + 1);
+  }, [D, Y, p]);
+  O(() => {
+    if (!w || typeof document > "u") return;
+    const l = (h) => {
+      if (h.key !== "ArrowLeft" && h.key !== "ArrowRight" || h.defaultPrevented || h.altKey || h.ctrlKey || h.metaKey) return;
+      const z = h.target, C = z?.tagName;
+      C === "INPUT" || C === "TEXTAREA" || C === "SELECT" || z?.isContentEditable || (h.preventDefault(), h.key === "ArrowLeft" ? r() : m());
+    };
+    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+  }, [w, r, m]);
+  const L = () => {
+    fetch(Ne(d.fileURL), {
+      method: "GET",
+      headers: {}
+    }).then((l) => {
+      const C = !!Be(d.fileName) ? d.fileName : `MEDIA-ETHORA.${g === "image" ? "png" : g === "video" ? "mp4" : "bin"}`;
+      l.arrayBuffer().then(function(G) {
+        if (typeof window > "u")
+          return;
+        const V = window.URL.createObjectURL(new Blob([G])), U = document.createElement("a");
+        U.href = V, U.setAttribute("download", C), document.body.appendChild(U), U.click(), U.remove(), window.URL.revokeObjectURL(V);
+      });
+    }).catch((l) => {
+      He.log(l);
+    });
+  }, v = () => {
+    i(re(void 0)), n?.();
+  }, N = d?.fileName || o("modal.filePreview.imageAlt"), T = j(() => {
+    switch (g) {
+      case "image":
+        return /* @__PURE__ */ u(
+          fe,
+          {
+            ref: t,
+            src: q(d.fileURL, b) || ce,
+            alt: N,
+            onScaleChange: y,
+            onSwipeLeft: m,
+            onSwipeRight: r,
+            onError: (l) => {
+              Pe(d.fileURL) && Se(), l.target.src = ce;
+            }
+          }
+        );
+      case "video":
+        return /* @__PURE__ */ u(
+          ke,
+          {
+            src: q(d.fileURL, b),
+            controls: !0,
+            autoPlay: !1
+          }
+        );
+      case "pdf":
+        return /* @__PURE__ */ u(Ge, { pdfUrl: q(d.fileURL, b) });
+      default:
+        return /* @__PURE__ */ B(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ u(Me, { style: { minWidth: "100px", minHeight: "100px" } }),
+              /* @__PURE__ */ u(
+                "div",
+                {
+                  style: {
+                    backgroundColor: "var(--ethora-color-bg-subtle, #F5F7FA)",
+                    borderRadius: "var(--ethora-radius-lg, 16px)",
+                    display: "flex",
+                    padding: "16px",
+                    color: "var(--ethora-color-text, #141414)"
+                  },
+                  children: o("modal.filePreview.unsupported")
+                }
+              )
+            ]
+          }
+        );
+    }
+  }, [d, b, N, g, m, r, o]);
+  return /* @__PURE__ */ B(Te, { "aria-label": o("modal.filePreview.title"), children: [
+    /* @__PURE__ */ u(
+      Ae,
+      {
+        handleCloseModal: v,
+        headerTitle: o("modal.filePreview.title"),
+        rightMenu: /* @__PURE__ */ B(ct, { children: [
+          w && /* @__PURE__ */ u(ut, { "data-testid": "lightbox-position", "aria-live": "polite", children: o("modal.filePreview.position", {
+            current: p + 1,
+            total: E.length
+          }) }),
+          g === "image" && /* @__PURE__ */ B(lt, { children: [
+            /* @__PURE__ */ u(
+              $,
+              {
+                onClick: () => t.current?.zoomOut(),
+                disabled: P <= A,
+                "aria-label": o("modal.filePreview.zoomOut"),
+                children: /* @__PURE__ */ u(Xe, {})
+              }
+            ),
+            /* @__PURE__ */ u(
+              $,
+              {
+                onClick: () => t.current?.zoomIn(),
+                disabled: P >= J,
+                "aria-label": o("modal.filePreview.zoomIn"),
+                children: /* @__PURE__ */ u(Ye, {})
+              }
+            ),
+            /* @__PURE__ */ u(
+              $,
+              {
+                onClick: () => t.current?.reset(),
+                disabled: P <= A,
+                "aria-label": o("modal.filePreview.resetZoom"),
+                children: /* @__PURE__ */ u(ze, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ u($, { onClick: L, "aria-label": o("action.save"), children: /* @__PURE__ */ u(Ie, {}) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ u(
+      Oe,
+      {
+        style: {
+          display: "flex",
+          flex: "1 1 auto",
+          height: "100%",
+          minHeight: 0,
+          justifyContent: "center",
+          overflow: "hidden",
+          padding: "16px",
+          width: "90%"
+        },
+        children: /* @__PURE__ */ B(it, { children: [
+          w && /* @__PURE__ */ u(
+            at,
+            {
+              onClick: r,
+              disabled: !S,
+              "aria-label": o("modal.filePreview.previousImage"),
+              children: /* @__PURE__ */ u(De, {})
+            }
+          ),
+          T,
+          w && /* @__PURE__ */ u(
+            st,
+            {
+              onClick: m,
+              disabled: !Y,
+              "aria-label": o("modal.filePreview.nextImage"),
+              children: /* @__PURE__ */ u(Fe, {})
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  mt as default
+};