@ethora/chat-component 26.10.5 → 26.10.7

package/dist/UserProfileModal-D0JZ3-uy.js

@@ -0,0 +1,635 @@
+import { jsxs as g, Fragment as T, jsx as o } from "react/jsx-runtime";
+import { forwardRef as Ce, useState as D, useCallback as b, useImperativeHandle as Se, useRef as ie, useMemo as X } from "react";
+import { a as De, M as _, Q as Ie, R as ke, S as le, P as ce, T as W, U as I, W as Ue, X as Ne, Y as Pe, Z as de, _ as Re, $ as Fe, a0 as je, a1 as Ae, u as O, a2 as Be, a3 as ze, a4 as $e, a5 as Ee, a6 as re, N as K, a7 as Oe, a8 as Te, a9 as Le, o as Me, aa as He, ab as Je, ac as Xe, ad as te, I as V, ae as We, af as Ke, ag as Ve, ah as ne, ai as F, aj as Ge, ak as _e, V as qe, G as Qe, al as Ye, am as Ze, an as eo, ao as oo } from "./main-CpHMnydn.js";
+import { D as L, a as G, b as ao, e as ro, f as to, S as no } from "./SideDrawer-CqZl9sxK.js";
+import { P as pe, a as so, D as io, b as lo, h as co } from "./handleCopyClick-BUbVvd2G.js";
+const po = (p, t) => {
+  const l = atob(p.split(",")[1]), f = new ArrayBuffer(l.length), e = new Uint8Array(f);
+  for (let n = 0; n < l.length; n++)
+    e[n] = l.charCodeAt(n);
+  const i = new Blob([e], { type: "image/jpeg" });
+  return new File([i], t, { type: "image/jpeg" });
+}, mo = I.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-4, 16px);
+  width: 100%;
+`, me = Ce(
+  ({ setIsEditing: p, modalUser: t, config: l }, f) => {
+    const e = De(), i = _(), [n, a] = D(t?.firstName || ""), [h, j] = D(t?.lastName || ""), [y, k] = D(t?.description || ""), [v, C] = D(
+      t?.profileImage
+    ), S = b(async () => {
+      try {
+        let c = new FormData();
+        if (typeof v == "string" && v.startsWith("data:image/")) {
+          const N = po(v, "profileImage.jpg");
+          c.append("file", N);
+        } else v instanceof File && c.append("file", v);
+        c.append("firstName", n), c.append("lastName", h), c.append("description", y);
+        const { user: U } = await Ie(c);
+        e(
+          ke({
+            updates: {
+              firstName: n,
+              lastName: h,
+              description: y,
+              profileImage: U?.profileImage
+            }
+          })
+        ), p(!1);
+      } catch (c) {
+        le.log("error", c);
+      }
+    }, [
+      e,
+      y,
+      n,
+      h,
+      v,
+      p
+    ]);
+    Se(f, () => ({ save: S }), [S]);
+    const x = (c) => {
+      C(c);
+    };
+    return /* @__PURE__ */ g(T, { children: [
+      /* @__PURE__ */ o(pe, { children: /* @__PURE__ */ o(
+        ce,
+        {
+          icon: v,
+          name: `${n} ${h}`,
+          size: 96,
+          upload: {
+            onUpload: x,
+            active: !0
+          }
+        }
+      ) }),
+      /* @__PURE__ */ o(L, { children: /* @__PURE__ */ g(mo, { children: [
+        /* @__PURE__ */ o(
+          W,
+          {
+            color: l?.colors?.primary,
+            colorBg: l?.colors?.colorInput,
+            placeholder: i("field.firstName"),
+            label: i("field.firstName"),
+            value: n,
+            onChange: (c) => a(c.target.value)
+          }
+        ),
+        /* @__PURE__ */ o(
+          W,
+          {
+            color: l?.colors?.primary,
+            colorBg: l?.colors?.colorInput,
+            placeholder: i("field.lastName"),
+            label: i("field.lastName"),
+            value: h,
+            onChange: (c) => j(c.target.value)
+          }
+        ),
+        /* @__PURE__ */ o(
+          W,
+          {
+            color: l?.colors?.primary,
+            colorBg: l?.colors?.colorInput,
+            placeholder: i("modal.profile.about"),
+            label: i("modal.profile.about"),
+            value: y,
+            onChange: (c) => k(c.target.value)
+          }
+        )
+      ] }) })
+    ] });
+  }
+);
+me.displayName = "EditUserModal";
+const fo = de`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(180deg);
+  }
+`, uo = de`
+  from {
+    transform: rotate(180deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+`, ho = I.div`
+  position: relative;
+  width: 100%;
+`, go = I.div`
+  border: 1px solid
+    ${({ $borderColor: p, $isOpen: t }) => t ? p || "var(--ethora-color-primary, #0052cd)" : p || "var(--ethora-color-border, #e6e8ec)"};
+  padding: 0 16px;
+  height: 48px;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  background-color: var(--ethora-color-bg, #fff);
+  color: var(--ethora-color-text, #141414);
+  font-size: var(--ethora-font-size, 16px);
+  border-radius: var(--ethora-radius-md, 16px);
+  transition:
+    border-color var(--ethora-motion-fast, 150ms) var(--ethora-motion-ease, ease),
+    box-shadow var(--ethora-motion-fast, 150ms) var(--ethora-motion-ease, ease);
+
+  ${({ $isOpen: p }) => p && Ne`
+      outline: 2px solid var(--ethora-color-primary, #0052cd);
+      outline-offset: 1px;
+    `}
+
+  &:focus-visible {
+    outline: 2px solid var(--ethora-color-primary, #0052cd);
+    outline-offset: 1px;
+  }
+`, vo = I.span`
+  color: var(--ethora-color-text-muted, #8c8c8c);
+`, bo = I.span`
+  margin-left: 10px;
+  display: inline-block;
+  color: var(--ethora-color-text-muted, #8c8c8c);
+  font-size: 12px;
+  animation: ${(p) => p.$isOpen ? fo : uo} 0.3s ease
+    forwards;
+`, yo = I.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  border: 1px solid var(--ethora-color-border, #e6e8ec);
+  background-color: var(--ethora-color-bg, #fff);
+  max-height: 200px;
+  overflow-y: auto;
+  margin-top: 4px;
+  border-radius: var(--ethora-radius-md, 16px);
+  box-shadow: var(--ethora-shadow-md, 0 4px 12px rgba(16, 24, 40, 0.1));
+  z-index: 100;
+  ${Pe}
+`, wo = I.input`
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  border-bottom: 1px solid var(--ethora-color-border, #e6e8ec);
+  outline: none;
+  box-sizing: border-box;
+  font-size: var(--ethora-font-size-sm, 14px);
+  background: transparent;
+  color: var(--ethora-color-text, #141414);
+
+  &::placeholder {
+    color: var(--ethora-color-text-muted, #8c8c8c);
+  }
+`, se = I.div`
+  padding: 12px 16px;
+  cursor: pointer;
+  font-size: var(--ethora-font-size-sm, 14px);
+  color: var(--ethora-color-text, #141414);
+  background-color: ${({ $selected: p }) => p ? "var(--ethora-color-primary-soft, #e7edf9)" : "transparent"};
+  transition: background-color var(--ethora-motion-fast, 150ms);
+
+  &:hover {
+    background-color: ${({ $selected: p }) => p ? "var(--ethora-color-primary-soft, #e7edf9)" : "var(--ethora-color-bg-hover, #f0f2f5)"};
+  }
+`, xo = ({
+  options: p,
+  placeholder: t,
+  onSelect: l,
+  accentColor: f,
+  selectedValue: e
+}) => {
+  const i = _(), [n, a] = D(!1), [h, j] = D(
+    e
+  ), [y, k] = D(""), v = ie(null), C = () => a((r) => !r), S = (r) => {
+    j(r), l(r), a(!1), k("");
+  }, x = p.filter(
+    (r) => r.name.toLowerCase().includes(y.toLowerCase())
+  ), c = b(() => a(!1), []);
+  Ue({
+    enabled: n,
+    onClose: c,
+    kind: "menu",
+    insideRefs: [v],
+    closeOnOutsidePress: !0
+  });
+  const U = (r) => {
+    r.key === "Enter" || r.key === " " ? (r.preventDefault(), C()) : r.key === "Escape" && n && a(!1);
+  }, N = (r, A) => {
+    (r.key === "Enter" || r.key === " ") && (r.preventDefault(), S(A));
+  };
+  return /* @__PURE__ */ g(ho, { ref: v, children: [
+    /* @__PURE__ */ g(
+      go,
+      {
+        $isOpen: n,
+        onClick: C,
+        onKeyDown: U,
+        $borderColor: f,
+        role: "button",
+        tabIndex: 0,
+        "aria-haspopup": "listbox",
+        "aria-expanded": n,
+        children: [
+          h ? /* @__PURE__ */ o("span", { children: h.name }) : /* @__PURE__ */ o(vo, { children: t }),
+          /* @__PURE__ */ o(bo, { style: { color: f }, $isOpen: n, children: "▼" })
+        ]
+      }
+    ),
+    n && /* @__PURE__ */ g(yo, { role: "listbox", children: [
+      /* @__PURE__ */ o(
+        wo,
+        {
+          type: "text",
+          placeholder: i("search.placeholder"),
+          value: y,
+          onChange: (r) => k(r.target.value)
+        }
+      ),
+      x.length > 0 ? x.map((r) => /* @__PURE__ */ o(
+        se,
+        {
+          onClick: () => S(r),
+          onKeyDown: (A) => N(A, r),
+          role: "option",
+          tabIndex: 0,
+          "aria-selected": h?.id === r.id,
+          $selected: h?.id === r.id,
+          children: r.name
+        },
+        r.id
+      )) : /* @__PURE__ */ o(se, { children: i("select.noOptions") })
+    ] })
+  ] });
+}, Uo = ({
+  handleCloseModal: p
+}) => {
+  const t = Re(), { client: l } = Fe();
+  je();
+  const { showToast: f } = Ae(), e = _(), { config: i, user: n, selectedUser: a, langSource: h } = O(
+    (s) => s.chatSettingStore
+  ), j = O((s) => s.call.phase), y = O((s) => s.rooms.rooms), k = O(
+    (s) => s.rooms.activeRoomJID
+  ), [v, C] = D(!1), S = ie(null), x = i?.videoCalls, c = i?.e2ee?.enabled === !0, U = x?.enabled === !0 && !!x?.livekitUrl?.trim() && (x?.allowedRoomTypes || ["private"]).includes("private"), N = U && x?.enableAudioCalls === !0, r = j !== "idle", A = b(() => {
+    t(Be()), p();
+  }, []), q = b(() => {
+    ze.performLogout();
+  }, []), fe = X(
+    () => [
+      {
+        label: e("action.logOut"),
+        icon: /* @__PURE__ */ o($e, {}),
+        onClick: () => {
+          q();
+        },
+        styles: { color: "var(--ethora-color-danger, #D92D20)" }
+      }
+    ],
+    [q, e]
+  ), ue = (s) => {
+    t(oo(s.id));
+  }, he = b(() => {
+    C(!0);
+  }, []), ge = async (s, d) => {
+    try {
+      const m = Ze(
+        s,
+        i?.xmppSettings?.conference,
+        d
+      );
+      if (!m || !m.jid)
+        return console.error(
+          "handleRoomCreation: failed to normalize new private room",
+          s
+        ), f({
+          id: Date.now().toString(),
+          title: e("toast.error"),
+          message: e("toast.couldNotOpenPrivateChat"),
+          type: "error",
+          duration: 4e3
+        }), null;
+      if (t(
+        eo({
+          room: m,
+          xmpp: l
+        })
+      ), l && m.jid) {
+        try {
+          await l.presenceInRoomStanza(m.jid);
+        } catch (w) {
+          console.warn("presenceInRoomStanza failed (non-fatal):", w);
+        }
+        try {
+          l.getHistoryStanza(m.jid, 10);
+        } catch (w) {
+          console.warn("getHistoryStanza failed (non-fatal):", w);
+        }
+      }
+      return t(te({ roomJID: m.jid })), f({
+        id: Date.now().toString(),
+        title: e("toast.success"),
+        message: e("toast.roomCreatedSuccess"),
+        type: "success",
+        duration: 3e3
+      }), { jid: m.jid };
+    } catch (m) {
+      return console.error("Error handling room creation:", m), null;
+    }
+  }, z = b(async (s = !1) => {
+    const d = String(
+      a?.name || `${a?.firstName || ""} ${a?.lastName || ""}`
+    ).trim() || "";
+    if (i?.newArch !== !1) {
+      const H = a?.xmppUsername || a?.userJID || a?.id;
+      if (!H)
+        return f({
+          id: Date.now().toString(),
+          title: e("toast.error"),
+          message: e("toast.couldNotResolveRecipient"),
+          type: "error",
+          duration: 4e3
+        }), null;
+      try {
+        const E = await Ee(H, s), J = await ge(E, 2);
+        return J?.jid ? {
+          jid: J.jid,
+          bareName: J.jid.split("@")[0],
+          peerXmppUsername: String(H).split("@")[0],
+          peerDisplay: d
+        } : null;
+      } catch (E) {
+        return console.error("postPrivateRoom failed:", E), f({
+          id: Date.now().toString(),
+          title: e("toast.error"),
+          message: E?.message || e("toast.failedToCreatePrivateChat"),
+          type: "error",
+          duration: 4e3
+        }), null;
+      }
+    }
+    const m = re(a.id), ae = [re(n.defaultWallet.walletAddress), m].sort().join(".").toLowerCase(), R = [n.firstName, a.name?.split(" ")?.[0]].sort().join(" and "), B = await l.createPrivateRoomStanza(
+      R,
+      `Private chat ${R}`,
+      ae
+    );
+    return B && (await l.inviteRoomRequestStanza(m, B), await l.getRoomsStanza()), B ? {
+      jid: B,
+      bareName: String(B).split("@")[0],
+      peerXmppUsername: m,
+      peerDisplay: d
+    } : null;
+  }, [a, i?.newArch, l, n]), $ = b(
+    async (s) => {
+      f({
+        id: Date.now().toString(),
+        title: e("toast.roomCreationTitle"),
+        message: e("toast.roomCreating"),
+        type: "info",
+        duration: 3e3
+      }), await z(s), t(K());
+    },
+    [z, t, f, e]
+  ), Q = b(
+    () => $(!1),
+    [$]
+  ), Y = b(
+    () => $(!0),
+    [$]
+  ), M = b(
+    async (s) => {
+      const d = await z();
+      if (!d) return;
+      const m = d.peerDisplay || d.bareName;
+      t(
+        Oe({
+          roomJid: d.jid,
+          roomName: m,
+          roomBareName: d.bareName,
+          kind: s,
+          peerXmppUsername: d.peerXmppUsername || null
+        })
+      ), d.peerXmppUsername && Te(s, {
+        peerXmppUsername: d.peerXmppUsername,
+        roomBareName: d.bareName
+      }), t(K());
+      try {
+        await Le(d.bareName, { kind: s });
+      } catch (w) {
+        const P = w instanceof Error ? w.message : e("toast.failedToCreateCall");
+        t(Me(P));
+      }
+    },
+    [z, t, e]
+  ), Z = !!a && i?.features?.userBlock === !0 && !i?.disableUserBlock, ee = b(async () => {
+    const s = a?.xmppUsername || a?.userJID || a?.id;
+    if (s)
+      try {
+        await He(s);
+        const d = String(s).split("@")[0];
+        t(Je(d));
+        const m = n?.xmppUsername || "";
+        let w = !1;
+        Object.values(y || {}).forEach((P) => {
+          P.type !== "private" || !(P.members || []).some(
+            (R) => R.xmppUsername && R.xmppUsername !== m && R.xmppUsername.split("@")[0] === d
+          ) || (t(Xe({ jid: P.jid })), P.jid === k && (w = !0));
+        }), w && (typeof window < "u" && window.history.pushState(null, "", window.location.pathname), t(te({ roomJID: null }))), t(K()), f({
+          id: Date.now().toString(),
+          title: e("toast.success"),
+          message: e("toast.blockedSuccess"),
+          type: "success"
+        });
+      } catch (d) {
+        le.log("Block user failed", d), f({
+          id: Date.now().toString(),
+          title: e("toast.error"),
+          message: e("toast.blockFailed"),
+          type: "error"
+        });
+      }
+  }, [a, t, f, e, n?.xmppUsername, y, k]), u = a ?? n, ve = () => {
+    if (h)
+      return ne.find((s) => s.id === h);
+  }, be = a ? void 0 : /* @__PURE__ */ g(T, { children: [
+    /* @__PURE__ */ o(V, { onClick: he, "aria-label": e("action.editProfile"), children: /* @__PURE__ */ o(We, { color: "var(--ethora-color-text-muted, #8C8C8C)" }) }),
+    /* @__PURE__ */ o(
+      Ke,
+      {
+        options: fe,
+        position: "left",
+        menuIcon: /* @__PURE__ */ o(Ve, {})
+      }
+    )
+  ] }), ye = /* @__PURE__ */ g(T, { children: [
+    /* @__PURE__ */ o(
+      V,
+      {
+        variant: "ghost",
+        onClick: () => C(!1),
+        style: { width: "auto", padding: "0 var(--ethora-space-3, 12px)" },
+        children: e("action.cancel")
+      }
+    ),
+    /* @__PURE__ */ o(
+      V,
+      {
+        variant: "filled",
+        onClick: () => {
+          S.current?.save();
+        },
+        style: { width: "auto", padding: "0 var(--ethora-space-4, 16px)" },
+        children: e("action.save")
+      }
+    )
+  ] }), oe = a && a.xmppUsername !== n.xmppUsername && !i?.disableProfilesInteractions, we = X(
+    () => /* @__PURE__ */ g(T, { children: [
+      /* @__PURE__ */ g(pe, { children: [
+        /* @__PURE__ */ o(
+          ce,
+          {
+            icon: u?.profileImage ?? null,
+            name: u?.name ?? u?.firstName,
+            size: 96
+          }
+        ),
+        /* @__PURE__ */ o(so, { children: u?.name ? `${u?.name}` : `${u?.firstName} ${u?.lastName}` })
+      ] }),
+      /* @__PURE__ */ g(L, { children: [
+        /* @__PURE__ */ o(G, { children: e("modal.profile.about") }),
+        /* @__PURE__ */ o(
+          io,
+          {
+            $empty: !(u?.description && u?.description?.length > 4),
+            children: u?.description && u?.description?.length > 4 ? u.description : e("modal.profile.noDescription")
+          }
+        )
+      ] }),
+      !a && i?.translates?.enabled && /* @__PURE__ */ g(L, { children: [
+        /* @__PURE__ */ o(G, { children: e("modal.profile.preferences") }),
+        /* @__PURE__ */ o(ao, { children: /* @__PURE__ */ g(ro, { children: [
+          /* @__PURE__ */ o(to, { children: e("modal.profile.languageHint") }),
+          /* @__PURE__ */ o(
+            xo,
+            {
+              options: ne,
+              placeholder: e("language.select"),
+              onSelect: ue,
+              accentColor: i?.colors?.primary,
+              selectedValue: ve()
+            }
+          )
+        ] }) })
+      ] }),
+      oe && /* @__PURE__ */ g(L, { children: [
+        /* @__PURE__ */ o(G, { children: e("modal.profile.actions") }),
+        /* @__PURE__ */ g(lo, { children: [
+          /* @__PURE__ */ o(
+            F,
+            {
+              StartIcon: /* @__PURE__ */ o(Ge, {}),
+              onClick: Q,
+              variant: "filled",
+              children: e("action.message")
+            }
+          ),
+          c && /* @__PURE__ */ o(
+            F,
+            {
+              StartIcon: /* @__PURE__ */ o(_e, { color: "var(--ethora-color-text-on-primary, #FFFFFF)" }),
+              onClick: Y,
+              variant: "filled",
+              children: e("action.encryptedMessage")
+            }
+          ),
+          U && /* @__PURE__ */ o(
+            F,
+            {
+              StartIcon: /* @__PURE__ */ o(qe, { color: "var(--ethora-color-text-on-primary, #FFFFFF)" }),
+              onClick: () => {
+                M("video");
+              },
+              disabled: r,
+              variant: "filled",
+              children: e(N ? "action.videoCall" : "action.call")
+            }
+          ),
+          N && /* @__PURE__ */ o(
+            F,
+            {
+              StartIcon: /* @__PURE__ */ o(Qe, { color: "var(--ethora-color-text-on-primary, #FFFFFF)" }),
+              onClick: () => {
+                M("audio");
+              },
+              disabled: r,
+              variant: "filled",
+              children: e("action.audioCall")
+            }
+          ),
+          /* @__PURE__ */ o(
+            F,
+            {
+              onClick: () => co(a.id),
+              variant: "outlined",
+              children: e("action.copyUserId")
+            }
+          ),
+          Z && /* @__PURE__ */ o(
+            F,
+            {
+              StartIcon: /* @__PURE__ */ o(Ye, {}),
+              onClick: ee,
+              variant: "outlined",
+              style: { color: "var(--ethora-color-danger, #D92D20)", borderColor: "var(--ethora-color-danger, #D92D20)" },
+              children: e("action.block")
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    [
+      u,
+      U,
+      Z,
+      N,
+      r,
+      M,
+      ee,
+      Q,
+      Y,
+      c,
+      a,
+      oe,
+      n,
+      i,
+      h,
+      e
+    ]
+  ), xe = X(
+    () => /* @__PURE__ */ o(
+      me,
+      {
+        ref: S,
+        setIsEditing: C,
+        modalUser: u,
+        config: i
+      }
+    ),
+    [u]
+  );
+  return /* @__PURE__ */ o(
+    no,
+    {
+      title: e("modal.profile.title"),
+      onClose: A,
+      headerActions: v ? ye : be,
+      children: v ? xe : we
+    }
+  );
+};
+export {
+  Uo as default
+};

package/dist/{UserSettingsModal-DdbURRR3.js → UserSettingsModal-OvykYDsT.js}

@@ -1,7 +1,7 @@
 import { jsx as i, jsxs as r } from "react/jsx-runtime";
 import m, { useCallback as D, useMemo as h } from "react";
-import { x as g, a as p, y as w, M as l } from "./main-Cdwk7Rjj.js";
-import { S as b, D as u, a as y, b as k, c as S, d as f } from "./SideDrawer-BzfNGNbq.js";
+import { M as g, a as p, N as w, O as l } from "./main-CpHMnydn.js";
+import { S as b, D as u, a as k, b as y, c as S, d as f } from "./SideDrawer-CqZl9sxK.js";
 const T = ({
   handleCloseModal: n
 }) => {
@@ -31,8 +31,8 @@ const T = ({
     [t]
   );
   return /* @__PURE__ */ i(b, { title: t("settings.menu.title"), onClose: n, children: c.map((e) => /* @__PURE__ */ r(u, { children: [
-    /* @__PURE__ */ i(y, { children: e.title }),
-    /* @__PURE__ */ i(k, { children: e.rows.map((a, d) => /* @__PURE__ */ r(m.Fragment, { children: [
+    /* @__PURE__ */ i(k, { children: e.title }),
+    /* @__PURE__ */ i(y, { children: e.rows.map((a, d) => /* @__PURE__ */ r(m.Fragment, { children: [
       d > 0 && /* @__PURE__ */ i(S, {}),
       /* @__PURE__ */ i(
         f,