@ethora/chat-component 26.9.5 → 26.9.6

package/dist/MessageSearchModal-BVKU6H3v.js

@@ -0,0 +1,389 @@
+import { jsx as a, jsxs as n, Fragment as q } from "react/jsx-runtime";
+import { useRef as J, useState as h, useMemo as I, useEffect as _ } from "react";
+import { p as G, a as P, aI as K, u as z, aJ as V, aK as Y, ar as W, aL as X, aM as Z, x as i, q as ee } from "./main-rJpE4hh-.js";
+import { S as re, i as te, j as ae, f as y } from "./SideDrawer-WneDrrWG.js";
+function oe(t) {
+  const e = /^(\d{4})-(\d{2})-(\d{2})$/.exec(t || "");
+  if (!e) return;
+  const c = new Date(
+    Number(e[1]),
+    Number(e[2]) - 1,
+    Number(e[3]),
+    0,
+    0,
+    0,
+    0
+  );
+  return Number.isNaN(c.getTime()) ? void 0 : c.toISOString();
+}
+function se(t) {
+  const e = /^(\d{4})-(\d{2})-(\d{2})$/.exec(t || "");
+  if (!e) return;
+  const c = new Date(
+    Number(e[1]),
+    Number(e[2]) - 1,
+    Number(e[3]),
+    23,
+    59,
+    59,
+    999
+  );
+  return Number.isNaN(c.getTime()) ? void 0 : c.toISOString();
+}
+const ne = (t, e) => !!(t && e && t > e), ie = (t) => `${t.firstName || ""} ${t.lastName || ""}`.trim() || t.name || "";
+function ce(t, e, c = 8) {
+  const S = e.trim().toLowerCase();
+  if (!S) return [];
+  const p = [], g = [], l = /* @__PURE__ */ new Set();
+  for (const x of t) {
+    const d = x._id, b = ie(x);
+    if (!d || !b || l.has(d)) continue;
+    const s = b.toLowerCase().indexOf(S);
+    if (s !== -1 && (l.add(d), (s === 0 ? p : g).push({ id: d, name: b }), p.length >= c))
+      break;
+  }
+  return [...p, ...g].slice(0, c);
+}
+const le = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-3, 12px);
+  min-height: 0;
+`, de = i.div`
+  display: flex;
+  gap: var(--ethora-space-2, 8px);
+`, H = i.button`
+  flex: 1 1 0;
+  height: 32px;
+  border: 1px solid
+    ${({ $active: t }) => t ? "var(--ethora-color-primary, #0052cd)" : "var(--ethora-color-border, #e6e8ec)"};
+  border-radius: var(--ethora-radius-full, 999px);
+  background: ${({ $active: t }) => t ? "var(--ethora-color-primary-soft, #e7edf9)" : "transparent"};
+  color: ${({ $active: t }) => t ? "var(--ethora-color-primary-text, #0052cd)" : "var(--ethora-color-text-secondary, #5a5f66)"};
+  font: inherit;
+  font-size: var(--ethora-font-size-sm, 14px);
+  font-weight: var(--ethora-font-weight-medium, 500);
+  cursor: pointer;
+  transition: background-color var(--ethora-motion-fast, 150ms);
+`, he = i.button`
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 4px;
+  border: none;
+  background: transparent;
+  color: ${({ $active: t }) => t ? "var(--ethora-color-primary-text, #0052cd)" : "var(--ethora-color-text-secondary, #5a5f66)"};
+  font: inherit;
+  font-size: var(--ethora-font-size-sm, 14px);
+  cursor: pointer;
+
+  > span {
+    min-width: 18px;
+    padding: 0 5px;
+    border-radius: var(--ethora-radius-full, 999px);
+    background: var(--ethora-color-primary, #0052cd);
+    color: var(--ethora-color-text-on-primary, #fff);
+    font-size: var(--ethora-font-size-xs, 12px);
+    text-align: center;
+  }
+`, pe = i.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--ethora-space-2, 8px);
+  padding: var(--ethora-space-3, 12px);
+  border: 1px solid var(--ethora-color-border, #e6e8ec);
+  border-radius: var(--ethora-radius-md, 12px);
+`, $ = i.label`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: var(--ethora-font-size-xs, 12px);
+  color: var(--ethora-color-text-muted, #6c6c6c);
+
+  input {
+    height: 36px;
+    box-sizing: border-box;
+    padding: 0 10px;
+    border: 1px solid var(--ethora-color-border, #e6e8ec);
+    border-radius: var(--ethora-radius-sm, 8px);
+    background: var(--ethora-color-bg-subtle, #f5f7fa);
+    color: var(--ethora-color-text, #141414);
+    font: inherit;
+    font-size: var(--ethora-font-size-sm, 14px);
+  }
+`, ue = i.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--ethora-space-2, 8px);
+`, fe = i.ul`
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid var(--ethora-color-border, #e6e8ec);
+  border-radius: var(--ethora-radius-sm, 8px);
+  background: var(--ethora-color-bg, #fff);
+
+  button {
+    width: 100%;
+    padding: 6px 8px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--ethora-color-text, #141414);
+    font: inherit;
+    font-size: var(--ethora-font-size-sm, 14px);
+    text-align: start;
+    cursor: pointer;
+  }
+  button:hover,
+  button:focus-visible {
+    background: var(--ethora-color-bg-hover, #f0f2f5);
+  }
+`, me = i.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  padding: 3px 4px 3px 10px;
+  border-radius: var(--ethora-radius-full, 999px);
+  background: var(--ethora-color-primary-soft, #e7edf9);
+  color: var(--ethora-color-primary-text, #0052cd);
+  font-size: var(--ethora-font-size-sm, 14px);
+
+  button {
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    padding: 0 6px;
+  }
+`, ge = i.button`
+  align-self: flex-start;
+  border: none;
+  background: transparent;
+  color: var(--ethora-color-text-secondary, #5a5f66);
+  font: inherit;
+  font-size: var(--ethora-font-size-xs, 12px);
+  text-decoration: underline;
+  cursor: pointer;
+  padding: 0;
+`, xe = i.div`
+  font-size: var(--ethora-font-size-xs, 12px);
+  color: var(--ethora-color-text-muted, #6c6c6c);
+`, be = i.button`
+  align-self: center;
+  margin-top: var(--ethora-space-2, 8px);
+  padding: 6px 14px;
+  border: 1px solid var(--ethora-color-border, #e6e8ec);
+  border-radius: var(--ethora-radius-full, 999px);
+  background: transparent;
+  color: var(--ethora-color-text-secondary, #5a5f66);
+  font: inherit;
+  font-size: var(--ethora-font-size-sm, 14px);
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`, Ce = ({
+  handleCloseModal: t
+}) => {
+  const e = G(), c = P(), S = K(767), p = J(null), g = z((r) => r.rooms.rooms), l = z(
+    (r) => r.rooms.activeRoomJID
+  ), x = z((r) => r.rooms.usersSet);
+  z(
+    (r) => r.chatSettingStore.user?.xmppUsername
+  );
+  const [d, b] = h(""), [s, O] = h(
+    l ? "chat" : "all"
+  ), R = l ? l.split("@")[0] : void 0, [w, T] = h(!1), [u, F] = h(""), [f, L] = h(""), [m, M] = h(
+    null
+  ), [k, N] = h(""), v = ne(u, f), U = I(
+    () => ({
+      fromUserId: m?.id,
+      since: v ? void 0 : oe(u),
+      until: v ? void 0 : se(f)
+    }),
+    [m?.id, u, f, v]
+  ), C = (m ? 1 : 0) + (u ? 1 : 0) + (f ? 1 : 0), j = () => {
+    M(null), N(""), F(""), L("");
+  }, A = I(() => {
+    if (!k.trim()) return [];
+    const r = s === "chat" ? l && g[l]?.members || [] : Object.values(x || {});
+    return ce(r, k);
+  }, [k, s, g, l, x]), o = V(
+    v ? "" : d,
+    s,
+    R,
+    U
+  );
+  _(() => {
+    p.current?.focus();
+  }, []);
+  const { open: E } = Y(), Q = (r) => {
+    E(r) && S && c(ee(void 0));
+  }, D = I(() => o.items, [o.items]), B = d.trim();
+  return /* @__PURE__ */ a(
+    re,
+    {
+      title: e("search.messages.title"),
+      onClose: t,
+      backLabel: e("action.close"),
+      children: /* @__PURE__ */ n(le, { children: [
+        /* @__PURE__ */ n(te, { children: [
+          /* @__PURE__ */ a(W, {}),
+          /* @__PURE__ */ a(
+            ae,
+            {
+              ref: p,
+              "data-autofocus": !0,
+              type: "search",
+              value: d,
+              onChange: (r) => b(r.target.value),
+              placeholder: e(
+                s === "chat" ? "search.messages.placeholderChat" : "search.messages.placeholderAll"
+              ),
+              "aria-label": e("search.messages.title")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(de, { role: "group", "aria-label": e("search.messages.scope"), children: [
+          /* @__PURE__ */ a(
+            H,
+            {
+              type: "button",
+              $active: s === "chat",
+              "aria-pressed": s === "chat",
+              disabled: !R,
+              onClick: () => O("chat"),
+              children: e("search.messages.scopeChat")
+            }
+          ),
+          /* @__PURE__ */ a(
+            H,
+            {
+              type: "button",
+              $active: s === "all",
+              "aria-pressed": s === "all",
+              onClick: () => O("all"),
+              children: e("search.messages.scopeAll")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(
+          he,
+          {
+            type: "button",
+            $active: w || C > 0,
+            "aria-expanded": w,
+            onClick: () => T((r) => !r),
+            children: [
+              e("search.messages.filters"),
+              C > 0 && /* @__PURE__ */ a("span", { children: C })
+            ]
+          }
+        ),
+        w && /* @__PURE__ */ n(pe, { children: [
+          /* @__PURE__ */ n($, { children: [
+            e("search.messages.filterSender"),
+            m ? /* @__PURE__ */ n(me, { children: [
+              m.name,
+              /* @__PURE__ */ a(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": e("search.messages.filterClear"),
+                  onClick: () => M(null),
+                  children: "×"
+                }
+              )
+            ] }) : /* @__PURE__ */ a(
+              "input",
+              {
+                type: "search",
+                value: k,
+                onChange: (r) => N(r.target.value),
+                placeholder: e("search.messages.filterSenderPlaceholder")
+              }
+            )
+          ] }),
+          !m && A.length > 0 && /* @__PURE__ */ a(fe, { role: "listbox", children: A.map((r) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": !1,
+              onClick: () => {
+                M(r), N("");
+              },
+              children: r.name
+            }
+          ) }, r.id)) }),
+          /* @__PURE__ */ n(ue, { children: [
+            /* @__PURE__ */ n($, { children: [
+              e("search.messages.filterSince"),
+              /* @__PURE__ */ a(
+                "input",
+                {
+                  type: "date",
+                  value: u,
+                  max: f || void 0,
+                  onChange: (r) => F(r.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ n($, { children: [
+              e("search.messages.filterUntil"),
+              /* @__PURE__ */ a(
+                "input",
+                {
+                  type: "date",
+                  value: f,
+                  min: u || void 0,
+                  onChange: (r) => L(r.target.value)
+                }
+              )
+            ] })
+          ] }),
+          v && /* @__PURE__ */ a(y, { role: "alert", children: e("search.messages.dateOrder") }),
+          C > 0 && /* @__PURE__ */ a(ge, { type: "button", onClick: j, children: e("search.messages.filterClearAll") })
+        ] }),
+        !o.searchable && /* @__PURE__ */ a(y, { children: B ? e("search.messages.tooShort", { count: X }) : e("search.messages.hint") }),
+        o.searchable && o.status === "loading" && /* @__PURE__ */ a(y, { role: "status", children: e("search.messages.searching") }),
+        o.status === "error" && /* @__PURE__ */ n(y, { role: "alert", children: [
+          e("search.messages.error"),
+          " ",
+          /* @__PURE__ */ a("button", { type: "button", onClick: o.retry, children: e("search.messages.retry") })
+        ] }),
+        o.searchable && o.status === "done" && D.length === 0 && /* @__PURE__ */ a(y, { children: e("search.messages.empty") }),
+        D.length > 0 && /* @__PURE__ */ n(q, { children: [
+          /* @__PURE__ */ a(xe, { role: "status", children: e("search.messages.count", { count: o.total }) }),
+          /* @__PURE__ */ a(
+            Z,
+            {
+              hits: D,
+              query: B,
+              showRoom: s === "all",
+              onOpen: Q
+            }
+          ),
+          o.hasMore && /* @__PURE__ */ a(
+            be,
+            {
+              type: "button",
+              onClick: o.loadMore,
+              disabled: o.status === "loadingMore",
+              children: o.status === "loadingMore" ? e("search.messages.searching") : e("search.messages.loadMore")
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  Ce as default
+};

package/dist/PublicChatsModal-CscOnVaQ.js

@@ -0,0 +1,202 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { useState as p, useRef as B, useCallback as P, useEffect as T, useMemo as z } from "react";
+import { g as E, aN as U, p as _, a as q, aI as F, u as A, ar as H, x as c, a2 as J, q as G } from "./main-rJpE4hh-.js";
+import { S as V, i as Z, j as K, f as S } from "./SideDrawer-WneDrrWG.js";
+const I = 50;
+async function Q({
+  offset: r = 0,
+  limit: t = I,
+  signal: u
+} = {}) {
+  const x = E.getState().chatSettingStore.user?.token || "", s = (await U.get("/v1/chats/public", {
+    params: { limit: Math.min(t, I), offset: r },
+    headers: { Authorization: x },
+    signal: u
+  }))?.data || {}, l = Array.isArray(s.items) ? s.items : [];
+  return {
+    // A chat that has been reported is not one to advertise in a directory.
+    items: l.filter((i) => i.name && !i.reported).map((i) => ({
+      name: String(i.name),
+      title: String(i.title || "").trim(),
+      description: String(i.description || "").trim(),
+      picture: String(i.picture || ""),
+      e2ee: !!i.e2ee
+    })),
+    total: Number(s.total) || 0,
+    offset: Number(s.offset) || r,
+    limit: Number(s.limit) || t,
+    nextOffset: r + l.length
+  };
+}
+const W = c.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`, X = c.li`
+  display: flex;
+  align-items: center;
+  gap: var(--ethora-space-3, 12px);
+  padding: var(--ethora-space-2, 8px) var(--ethora-space-1, 4px);
+`, Y = c.div`
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  border-radius: var(--ethora-radius-full, 999px);
+  background: ${({ $src: r }) => r ? `center / cover no-repeat url("${r.replace(/["\\]/g, (t) => encodeURIComponent(t))}")` : "var(--ethora-color-primary-soft, #e7edf9)"};
+  color: var(--ethora-color-primary-text, #0052cd);
+  font-weight: var(--ethora-font-weight-semibold, 600);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, ee = c.div`
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  text-align: start;
+
+  > strong {
+    font-size: var(--ethora-font-size-sm, 14px);
+    font-weight: var(--ethora-font-weight-medium, 500);
+    color: var(--ethora-color-text, #141414);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  > span {
+    font-size: var(--ethora-font-size-xs, 12px);
+    color: var(--ethora-color-text-muted, #6c6c6c);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`, te = c.button`
+  flex: 0 0 auto;
+  padding: 6px 14px;
+  border-radius: var(--ethora-radius-full, 999px);
+  border: 1px solid var(--ethora-color-primary, #0052cd);
+  background: ${({ $open: r }) => r ? "transparent" : "var(--ethora-color-primary, #0052cd)"};
+  color: ${({ $open: r }) => r ? "var(--ethora-color-primary-text, #0052cd)" : "var(--ethora-color-text-on-primary, #fff)"};
+  font: inherit;
+  font-size: var(--ethora-font-size-sm, 14px);
+  font-weight: var(--ethora-font-weight-medium, 500);
+  cursor: pointer;
+`, re = c.button`
+  align-self: center;
+  margin-top: var(--ethora-space-2, 8px);
+  padding: 6px 14px;
+  border: 1px solid var(--ethora-color-border, #e6e8ec);
+  border-radius: var(--ethora-radius-full, 999px);
+  background: transparent;
+  color: var(--ethora-color-text-secondary, #5a5f66);
+  font: inherit;
+  font-size: var(--ethora-font-size-sm, 14px);
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`, oe = (r) => (r.title || r.name).trim().charAt(0).toUpperCase() || "#", le = ({
+  handleCloseModal: r
+}) => {
+  const t = _(), u = q(), x = F(767), b = A((e) => e.rooms.rooms), s = A(
+    (e) => e.chatSettingStore.config?.xmppSettings?.conference
+  ), [l, i] = p([]), [j, $] = p(0), [v, D] = p(0), [n, w] = p("loading"), [h, L] = p(""), m = B(0), f = P(async (e) => {
+    const o = ++m.current;
+    w(e ? "loadingMore" : "loading");
+    try {
+      const g = await Q({ offset: e });
+      if (o !== m.current) return;
+      i((k) => {
+        const R = new Set(k.map((C) => C.name));
+        return e ? [...k, ...g.items.filter((C) => !R.has(C.name))] : g.items;
+      }), $(g.total), D(g.nextOffset), w("done");
+    } catch {
+      o === m.current && w("error");
+    }
+  }, []);
+  T(() => (f(0), () => {
+    m.current += 1;
+  }), [f]);
+  const O = z(
+    () => new Set(Object.keys(b).map((e) => e.split("@")[0])),
+    [b]
+  ), y = z(() => {
+    const e = h.trim().toLowerCase();
+    return e ? l.filter(
+      (o) => o.title.toLowerCase().includes(e) || o.description.toLowerCase().includes(e)
+    ) : l;
+  }, [l, h]), N = (e) => {
+    const o = (s || "").trim();
+    o && (u(J({ roomJID: `${e.name}@${o}` })), x && u(G(void 0)));
+  }, M = v < j;
+  return /* @__PURE__ */ d(
+    V,
+    {
+      title: t("publicChats.title"),
+      onClose: r,
+      backLabel: t("action.close"),
+      children: [
+        /* @__PURE__ */ d(Z, { children: [
+          /* @__PURE__ */ a(H, {}),
+          /* @__PURE__ */ a(
+            K,
+            {
+              type: "search",
+              value: h,
+              onChange: (e) => L(e.target.value),
+              placeholder: t("publicChats.filter"),
+              "aria-label": t("publicChats.filter")
+            }
+          )
+        ] }),
+        n === "loading" && /* @__PURE__ */ a(S, { role: "status", children: t("publicChats.loading") }),
+        n === "error" && /* @__PURE__ */ d(S, { role: "alert", children: [
+          t("publicChats.error"),
+          " ",
+          /* @__PURE__ */ a("button", { type: "button", onClick: () => {
+            f(v);
+          }, children: t("search.messages.retry") })
+        ] }),
+        n !== "loading" && n !== "error" && y.length === 0 && /* @__PURE__ */ a(S, { children: h.trim() && M ? t("publicChats.emptyFilterMore") : t("publicChats.empty") }),
+        y.length > 0 && /* @__PURE__ */ a(W, { children: y.map((e) => {
+          const o = O.has(e.name);
+          return /* @__PURE__ */ d(X, { children: [
+            /* @__PURE__ */ a(Y, { $src: e.picture, "aria-hidden": "true", children: !e.picture && oe(e) }),
+            /* @__PURE__ */ d(ee, { children: [
+              /* @__PURE__ */ a("strong", { children: e.title || t("search.messages.chat") }),
+              e.description && /* @__PURE__ */ a("span", { children: e.description })
+            ] }),
+            /* @__PURE__ */ a(
+              te,
+              {
+                type: "button",
+                $open: o,
+                onClick: () => N(e),
+                children: t(o ? "publicChats.open" : "publicChats.join")
+              }
+            )
+          ] }, e.name);
+        }) }),
+        M && n !== "loading" && n !== "error" && /* @__PURE__ */ a(
+          re,
+          {
+            type: "button",
+            disabled: n === "loadingMore",
+            onClick: () => {
+              f(v);
+            },
+            children: t(n === "loadingMore" ? "search.messages.searching" : "search.messages.loadMore")
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  le as default
+};