@linktr.ee/messaging-react 1.8.2 → 1.8.4

package/dist/index.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as d, Fragment as le } from "react/jsx-runtime";
-import T from "classnames";
-import q, { createContext as Ie, useContext as Se, useCallback as O, useState as C, useRef as H, useEffect as $ } from "react";
+import D from "classnames";
+import q, { createContext as Ie, useContext as Se, useCallback as P, useState as C, useRef as G, useEffect as H } from "react";
 import { StreamChatService as Re } from "@linktr.ee/messaging-core";
-import { Chat as ke, ChannelList as Fe, Channel as Te, useChannelStateContext as me, Window as Pe, MessageList as De, MessageInput as Me } from "stream-chat-react";
-import { XIcon as he, ArrowLeftIcon as Oe, DotsThreeIcon as Ue, SpinnerGapIcon as ee, SignOutIcon as pe, ProhibitInsetIcon as ie, FlagIcon as Le, MagnifyingGlassIcon as je, ChatCircleDotsIcon as ce } from "@phosphor-icons/react";
+import { Chat as ke, ChannelList as Te, Channel as De, useChannelStateContext as me, Window as Fe, MessageList as Me, MessageInput as Ue } from "stream-chat-react";
+import { XIcon as he, ArrowLeftIcon as Pe, DotsThreeIcon as Oe, SpinnerGapIcon as ee, SignOutIcon as pe, ProhibitInsetIcon as ie, FlagIcon as Le, MagnifyingGlassIcon as je, ChatCircleDotsIcon as ce } from "@phosphor-icons/react";
 const fe = Ie({
   service: null,
   client: null,
@@ -15,7 +15,7 @@ const fe = Ie({
   refreshConnection: async () => {
   },
   debug: !1
-}), se = () => Se(fe), os = ({
+}), se = () => Se(fe), is = ({
   children: t,
   user: s,
   serviceConfig: n,
@@ -24,9 +24,9 @@ const fe = Ie({
   customization: c = {},
   debug: i = !1
 }) => {
-  const l = O(
-    (v, ...P) => {
-      i && console.log(`🔥 [MessagingProvider] ${v}`, ...P);
+  const l = P(
+    (v, ...F) => {
+      i && console.log(`🔥 [MessagingProvider] ${v}`, ...F);
     },
     [i]
   );
@@ -37,15 +37,15 @@ const fe = Ie({
     capabilities: Object.keys(a),
     customization: Object.keys(c)
   });
-  const [o, E] = C(null), [b, u] = C(null), [f, I] = C(!1), [x, w] = C(!1), [m, k] = C(null), S = H(!1), y = H({
+  const [o, E] = C(null), [b, u] = C(null), [f, I] = C(!1), [x, w] = C(!1), [m, k] = C(null), S = G(!1), y = G({
     userId: s == null ? void 0 : s.id,
     apiKey: r,
     serviceConfig: n,
     capabilities: a,
     customization: c
-  }), F = H(0);
-  F.current++, l("📊 RENDER INFO", {
-    renderCount: F.current,
+  }), T = G(0);
+  T.current++, l("📊 RENDER INFO", {
+    renderCount: T.current,
     currentProps: { userId: s == null ? void 0 : s.id, apiKey: (r == null ? void 0 : r.substring(0, 8)) + "..." },
     propChanges: {
       userChanged: y.current.userId !== (s == null ? void 0 : s.id),
@@ -60,8 +60,8 @@ const fe = Ie({
     serviceConfig: n,
     capabilities: a,
     customization: c
-  }, $(() => {
-    const v = F.current;
+  }, H(() => {
+    const v = T.current;
     if (l("🔧 SERVICE INIT EFFECT TRIGGERED", {
       renderCount: v,
       apiKey: !!r,
@@ -84,24 +84,24 @@ const fe = Ie({
       apiKey: (r == null ? void 0 : r.substring(0, 8)) + "...",
       serviceConfigChanged: y.current.serviceConfig !== n
     });
-    const P = new Re({
+    const F = new Re({
       ...n,
       apiKey: r,
       debug: i
     });
-    return E(P), l("✅ SERVICE SET", {
+    return E(F), l("✅ SERVICE SET", {
       renderCount: v,
-      serviceInstance: !!P
+      serviceInstance: !!F
     }), () => {
       l("🧹 SERVICE CLEANUP", {
         renderCount: v,
         reason: "Effect cleanup"
-      }), P.disconnectUser().catch(console.error);
+      }), F.disconnectUser().catch(console.error);
     };
   }, [r, n, i, l]);
-  const M = H(null);
-  $(() => {
-    var P, z;
+  const U = G(null);
+  H(() => {
+    var F, z;
     if (l("🔗 USER CONNECTION EFFECT TRIGGERED", {
       hasService: !!o,
       hasUser: !!s,
@@ -117,7 +117,7 @@ const fe = Ie({
       l("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
-    if (((P = M.current) == null ? void 0 : P.serviceId) === o && ((z = M.current) == null ? void 0 : z.userId) === s.id) {
+    if (((F = U.current) == null ? void 0 : F.serviceId) === o && ((z = U.current) == null ? void 0 : z.userId) === s.id) {
       l(
         "⚠️ USER CONNECTION SKIPPED",
         "Already connected this user with this service"
@@ -128,13 +128,13 @@ const fe = Ie({
       l("🚀 STARTING USER CONNECTION", { userId: s.id }), S.current = !0, w(!0), k(null);
       try {
         l("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
-        const D = await o.connectUser(s);
-        u(D), I(!0), M.current = { serviceId: o, userId: s.id }, l("✅ USER CONNECTION SUCCESS", {
+        const M = await o.connectUser(s);
+        u(M), I(!0), U.current = { serviceId: o, userId: s.id }, l("✅ USER CONNECTION SUCCESS", {
           userId: s.id,
-          clientId: D.userID
+          clientId: M.userID
         });
-      } catch (D) {
-        const A = D instanceof Error ? D.message : "Connection failed";
+      } catch (M) {
+        const A = M instanceof Error ? M.message : "Connection failed";
         k(A), l("❌ USER CONNECTION ERROR", {
           userId: s.id,
           error: A
@@ -146,19 +146,19 @@ const fe = Ie({
         });
       }
     })();
-  }, [o, s, l, f]), $(() => (l("🔌 CLEANUP EFFECT REGISTERED", {
+  }, [o, s, l, f]), H(() => (l("🔌 CLEANUP EFFECT REGISTERED", {
     hasService: !!o,
     isConnected: f
   }), () => {
     o && f ? (l(
       "🧹 CLEANUP EFFECT TRIGGERED",
       "Cleaning up connection on unmount"
-    ), M.current = null, o.disconnectUser().catch(console.error)) : l("🔇 CLEANUP EFFECT SKIPPED", {
+    ), U.current = null, o.disconnectUser().catch(console.error)) : l("🔇 CLEANUP EFFECT SKIPPED", {
       hasService: !!o,
       isConnected: f
     });
   }), [o, f, l]);
-  const h = O(async () => {
+  const h = P(async () => {
     if (l("🔄 REFRESH CONNECTION CALLED", {
       hasService: !!o,
       hasUser: !!s
@@ -172,10 +172,10 @@ const fe = Ie({
       const v = await o.connectUser(s);
       u(v), I(!0), k(null), l("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
     } catch (v) {
-      const P = v instanceof Error ? v.message : "Refresh failed";
-      k(P), l("❌ CONNECTION REFRESH ERROR", {
+      const F = v instanceof Error ? v.message : "Refresh failed";
+      k(F), l("❌ CONNECTION REFRESH ERROR", {
         userId: s.id,
-        error: P
+        error: F
       });
     } finally {
       w(!1), l("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
@@ -211,11 +211,31 @@ const fe = Ie({
     l
   ]);
   return l("🔄 RENDER END", {
-    renderCount: F.current,
+    renderCount: T.current,
     willRenderChat: !!(b && f),
     contextValueReady: !!g
   }), /* @__PURE__ */ e(fe.Provider, { value: g, children: b && f ? /* @__PURE__ */ e(ke, { client: b, children: t }) : t });
-}, Be = () => se(), de = [
+}, Be = () => se(), Ae = (t, s) => {
+  const n = new Date(
+    Date.UTC(t.getUTCFullYear(), t.getUTCMonth(), t.getUTCDate())
+  ), a = new Date(
+    Date.UTC(s.getUTCFullYear(), s.getUTCMonth(), s.getUTCDate())
+  ).getTime() - n.getTime();
+  return Math.floor(a / (1e3 * 60 * 60 * 24));
+}, $e = (t) => {
+  const s = /* @__PURE__ */ new Date();
+  if (Math.floor((s.getTime() - t.getTime()) / 1e3) < 60)
+    return "Just now";
+  const r = Ae(t, s);
+  return r === 0 ? t.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit"
+  }) : r === 1 ? "Yesterday" : r < 7 ? `${r}d` : r < 28 ? `${Math.floor(r / 7)}w` : t.toLocaleDateString("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "2-digit"
+  });
+}, de = [
   "🍎",
   // Apple
   "🍌",
@@ -243,7 +263,7 @@ const fe = Ie({
   "🍈"
   // Melon
 ];
-function Ae(t) {
+function Ge(t) {
   let s = 0;
   for (let n = 0; n < t.length; n++) {
     const r = t.charCodeAt(n);
@@ -251,25 +271,28 @@ function Ae(t) {
   }
   return Math.abs(s);
 }
-function Ge(t) {
-  const n = Ae(t) % de.length;
+function He(t) {
+  const n = Ge(t) % de.length;
   return de[n];
 }
-const Q = ({
+const J = ({
   id: t,
   image: s,
   size: n = 40,
   className: r
 }) => {
-  const a = Ge(t), i = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg";
+  const a = He(t), i = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg";
   return /* @__PURE__ */ e(
     "div",
     {
-      className: T(
-        "flex-shrink-0 overflow-hidden rounded-[1rem]",
-        r
-      ),
-      style: { width: `${n}px`, height: `${n}px` },
+      className: D("flex-shrink-0 overflow-hidden", r),
+      style: {
+        width: `${n}px`,
+        height: `${n}px`,
+        borderRadius: "33%",
+        // @ts-expect-error - corner-shape is not recognized by react types
+        "corner-shape": "superellipse(1.3)"
+      },
       children: s ? /* @__PURE__ */ e(
         "img",
         {
@@ -281,8 +304,8 @@ const Q = ({
         "div",
         {
           "aria-hidden": "true",
-          className: T(
-            "flex h-full w-full items-center justify-center font-semibold rounded-sm bg-[#E6E5E3]",
+          className: D(
+            "avatar-fallback flex h-full w-full items-center justify-center font-semibold bg-[#E6E5E3] select-none transition-colors",
             i
           ),
           children: a
@@ -290,19 +313,16 @@ const Q = ({
       )
     }
   );
-}, He = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: r = !1, unread: a }) => {
-  var w, m, k, S, y, F;
+}, _e = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: r = !1, unread: a }) => {
+  var w, m, k, S, y, T;
   const c = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), i = () => {
     t && n(t);
   }, o = Object.values(((w = t == null ? void 0 : t.state) == null ? void 0 : w.members) || {}).find(
-    (M) => {
+    (U) => {
       var h, g;
-      return ((h = M.user) == null ? void 0 : h.id) && M.user.id !== ((g = t == null ? void 0 : t._client) == null ? void 0 : g.userID);
+      return ((h = U.user) == null ? void 0 : h.id) && U.user.id !== ((g = t == null ? void 0 : t._client) == null ? void 0 : g.userID);
     }
-  ), E = ((m = o == null ? void 0 : o.user) == null ? void 0 : m.name) || "Conversation", b = (k = o == null ? void 0 : o.user) == null ? void 0 : k.image, u = (y = (S = t == null ? void 0 : t.state) == null ? void 0 : S.messages) == null ? void 0 : y[t.state.messages.length - 1], f = (u == null ? void 0 : u.text) || "No messages yet", I = u != null && u.created_at ? new Date(u.created_at).toLocaleTimeString([], {
-    hour: "2-digit",
-    minute: "2-digit"
-  }) : "", x = a ?? 0;
+  ), E = ((m = o == null ? void 0 : o.user) == null ? void 0 : m.name) || "Conversation", b = (k = o == null ? void 0 : o.user) == null ? void 0 : k.image, u = (y = (S = t == null ? void 0 : t.state) == null ? void 0 : S.messages) == null ? void 0 : y[t.state.messages.length - 1], f = (u == null ? void 0 : u.text) || "No messages yet", I = u != null && u.created_at ? $e(new Date(u.created_at)) : "", x = a ?? 0;
   return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
     channelId: t == null ? void 0 : t.id,
     isSelected: c,
@@ -314,8 +334,8 @@ const Q = ({
     {
       type: "button",
       onClick: i,
-      className: T(
-        "w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring",
+      className: D(
+        "group w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring",
         {
           "bg-primary-alt/10 border-l-4 border-l-primary": c,
           "hover:bg-sand": !c
@@ -323,12 +343,13 @@ const Q = ({
       ),
       children: /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
-          Q,
+          J,
           {
-            id: ((F = o == null ? void 0 : o.user) == null ? void 0 : F.id) || t.id || "unknown",
+            id: ((T = o == null ? void 0 : o.user) == null ? void 0 : T.id) || t.id || "unknown",
             name: E,
             image: b,
-            size: 44
+            size: 44,
+            className: "[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
           }
         ),
         /* @__PURE__ */ d("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
@@ -336,7 +357,7 @@ const Q = ({
             /* @__PURE__ */ e(
               "h3",
               {
-                className: T(
+                className: D(
                   "text-sm font-medium truncate",
                   c ? "text-primary" : "text-charcoal"
                 ),
@@ -353,7 +374,7 @@ const Q = ({
       ] })
     }
   );
-}, $e = ({
+}, Ve = ({
   onChannelSelect: t,
   selectedChannel: s,
   filters: n,
@@ -369,7 +390,7 @@ const Q = ({
   }), /* @__PURE__ */ e(
     "div",
     {
-      className: T(
+      className: D(
         "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
         r
       ),
@@ -377,7 +398,7 @@ const Q = ({
         renderCount: a.current,
         filters: n
       }), /* @__PURE__ */ e(
-        Fe,
+        Te,
         {
           filters: n,
           sort: { last_message_at: -1 },
@@ -389,7 +410,7 @@ const Q = ({
               selectedChannelId: s == null ? void 0 : s.id,
               isSelected: (s == null ? void 0 : s.id) === ((o = i.channel) == null ? void 0 : o.id)
             }), /* @__PURE__ */ e(
-              He,
+              _e,
               {
                 ...i,
                 selectedChannel: s,
@@ -412,7 +433,7 @@ const Q = ({
   "button",
   {
     type: "button",
-    className: T(
+    className: D(
       "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60",
       t === "danger" ? "text-danger hover:bg-danger/50" : "text-charcoal hover:bg-sand",
       s
@@ -426,7 +447,7 @@ function oe({ label: t, className: s, children: n, ...r }) {
     "button",
     {
       type: "button",
-      className: T(
+      className: D(
         "rounded-full p-2 transition-colors focus-ring",
         {
           "cursor-not-allowed opacity-50": r.disabled,
@@ -448,10 +469,10 @@ function ge({ onClick: t }) {
 const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
   /* @__PURE__ */ e("h2", { className: "font-semibold text-charcoal mb-2", children: "No messages yet 👀" }),
   /* @__PURE__ */ e("p", { className: "text-stone text-xs", children: "Share to social media to generate more conversations" })
-] }) }), _e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "message-input flex items-center gap-2 p-4", children: [
+] }) }), We = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "message-input flex items-center gap-2 p-4", children: [
   t && t(),
-  /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(Me, { focus: !0, maxRows: 4 }) })
-] }), Ve = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: r }) => {
+  /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(Ue, { focus: !0, maxRows: 4 }) })
+] }), ze = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: r }) => {
   var o, E, b, u;
   const { channel: a } = me(), c = q.useMemo(() => Object.values(a.state.members || {}).find(
     (I) => {
@@ -468,11 +489,11 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
           onClick: t,
           className: "inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-sand focus:outline-none focus:ring-2 focus:ring-primary transition-colors lg:hidden",
           "aria-label": "Back to conversations",
-          children: /* @__PURE__ */ e(Oe, { className: "h-5 w-5 text-stone", weight: "bold" })
+          children: /* @__PURE__ */ e(Pe, { className: "h-5 w-5 text-stone", weight: "bold" })
         }
       ),
       /* @__PURE__ */ e(
-        Q,
+        J,
         {
           id: ((u = c == null ? void 0 : c.user) == null ? void 0 : u.id) || a.id || "unknown",
           name: i,
@@ -482,9 +503,9 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
       ),
       /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-charcoal truncate", children: i }) })
     ] }),
-    r && n && /* @__PURE__ */ e(oe, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(Ue, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
+    r && n && /* @__PURE__ */ e(oe, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(Oe, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
   ] });
-}, We = ({
+}, qe = ({
   isOpen: t,
   onClose: s,
   participant: n,
@@ -493,20 +514,20 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
   onLeaveConversation: c,
   onBlockParticipant: i
 }) => {
-  var D, A, J, _, V, X, W;
-  const { service: l, debug: o } = se(), E = H(null), [b, u] = C(!1), [f, I] = C(!1), [x, w] = C(!1);
-  $(() => {
+  var M, A, Y, _, V, Q, W;
+  const { service: l, debug: o } = se(), E = G(null), [b, u] = C(!1), [f, I] = C(!1), [x, w] = C(!1);
+  H(() => {
     const R = E.current;
     R && (t ? R.showModal() : R.close());
   }, [t]);
-  const m = O(async () => {
+  const m = P(async () => {
     var R;
     if (!(!l || !((R = n == null ? void 0 : n.user) != null && R.id)))
       try {
         const j = (await l.getBlockedUsers()).some(
           (B) => {
-            var Y;
-            return B.blocked_user_id === ((Y = n == null ? void 0 : n.user) == null ? void 0 : Y.id);
+            var X;
+            return B.blocked_user_id === ((X = n == null ? void 0 : n.user) == null ? void 0 : X.id);
           }
         );
         u(j);
@@ -516,8 +537,8 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
           p
         );
       }
-  }, [l, (D = n == null ? void 0 : n.user) == null ? void 0 : D.id]);
-  $(() => {
+  }, [l, (M = n == null ? void 0 : n.user) == null ? void 0 : M.id]);
+  H(() => {
     t && m();
   }, [t, m]);
   const k = async () => {
@@ -557,7 +578,7 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
         w(!1);
       }
     }
-  }, F = () => {
+  }, T = () => {
     s(), window.open(
       "https://linktr.ee/s/about/trust-center/report",
       "_blank",
@@ -565,7 +586,7 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
     );
   };
   if (!n) return null;
-  const M = ((A = n.user) == null ? void 0 : A.name) || ((J = n.user) == null ? void 0 : J.id) || "Unknown member", h = (_ = n.user) == null ? void 0 : _.image, g = (V = n.user) == null ? void 0 : V.email, v = (X = n.user) == null ? void 0 : X.username, P = g || (v ? `linktr.ee/${v}` : void 0), z = ((W = n.user) == null ? void 0 : W.id) || "unknown";
+  const U = ((A = n.user) == null ? void 0 : A.name) || ((Y = n.user) == null ? void 0 : Y.id) || "Unknown member", h = (_ = n.user) == null ? void 0 : _.image, g = (V = n.user) == null ? void 0 : V.email, v = (Q = n.user) == null ? void 0 : Q.username, F = g || (v ? `linktr.ee/${v}` : void 0), z = ((W = n.user) == null ? void 0 : W.id) || "unknown";
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ e(
@@ -590,18 +611,18 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
                 style: { backgroundColor: "#FBFAF9" },
                 children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3 w-full", children: [
                   /* @__PURE__ */ e(
-                    Q,
+                    J,
                     {
                       id: z,
-                      name: M,
+                      name: U,
                       image: h,
                       size: 88,
                       className: "!rounded-full"
                     }
                   ),
                   /* @__PURE__ */ d("div", { className: "flex flex-col min-w-0 flex-1", children: [
-                    /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: M }),
-                    P && /* @__PURE__ */ e("p", { className: "truncate text-sm text-[#00000055]", children: P }),
+                    /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: U }),
+                    F && /* @__PURE__ */ e("p", { className: "truncate text-sm text-[#00000055]", children: F }),
                     a && /* @__PURE__ */ e(
                       "span",
                       {
@@ -656,7 +677,7 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(K, { variant: "danger", onClick: F, children: [
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(K, { variant: "danger", onClick: T, children: [
                 /* @__PURE__ */ e(Le, { className: "h-5 w-5" }),
                 /* @__PURE__ */ e("span", { children: "Report" })
               ] }) })
@@ -666,7 +687,7 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
       }
     )
   );
-}, ze = ({
+}, Ye = ({
   onBack: t,
   showBackButton: s,
   renderMessageInputActions: n,
@@ -688,9 +709,9 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
       return x.isFollower ? "Subscribed to you" : "Not subscribed";
   }, [i.data]);
   return /* @__PURE__ */ d(le, { children: [
-    /* @__PURE__ */ d(Pe, { children: [
+    /* @__PURE__ */ d(Fe, { children: [
       /* @__PURE__ */ e("div", { className: "border-b border-sand bg-white px-4 py-3", children: /* @__PURE__ */ e(
-        Ve,
+        ze,
         {
           onBack: t,
           showBackButton: s,
@@ -699,18 +720,18 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
         }
       ) }),
       /* @__PURE__ */ d("div", { className: "flex-1 overflow-hidden relative", children: [
-        /* @__PURE__ */ e(De, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }),
+        /* @__PURE__ */ e(Me, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }),
         !E && c && /* @__PURE__ */ e("div", { className: "absolute inset-0 w-full h-full bg-white", children: /* @__PURE__ */ e(c, {}) })
       ] }),
       /* @__PURE__ */ e(
-        _e,
+        We,
         {
           renderActions: () => n == null ? void 0 : n(i)
         }
       )
     ] }),
     /* @__PURE__ */ e(
-      We,
+      qe,
       {
         isOpen: l,
         onClose: () => o(!1),
@@ -722,7 +743,7 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
       }
     )
   ] });
-}, qe = ({
+}, Je = ({
   channel: t,
   onBack: s,
   showBackButton: n = !1,
@@ -734,12 +755,12 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
 }) => /* @__PURE__ */ e(
   "div",
   {
-    className: T(
+    className: D(
       "messaging-channel-view h-full flex flex-col",
       i
     ),
-    children: /* @__PURE__ */ e(Te, { channel: t, children: /* @__PURE__ */ e(
-      ze,
+    children: /* @__PURE__ */ e(De, { channel: t, children: /* @__PURE__ */ e(
+      Ye,
       {
         onBack: s,
         showBackButton: n,
@@ -751,12 +772,12 @@ const xe = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-
     ) })
   }
 );
-function Je({
+function Qe({
   searchQuery: t,
   setSearchQuery: s,
   placeholder: n
 }) {
-  const r = H(null);
+  const r = G(null);
   return /* @__PURE__ */ d("div", { className: "relative", children: [
     /* @__PURE__ */ e(
       je,
@@ -790,7 +811,7 @@ function Je({
     )
   ] });
 }
-const Qe = ({
+const Xe = ({
   participantSource: t,
   onSelectParticipant: s,
   onClose: n,
@@ -801,8 +822,8 @@ const Qe = ({
 }) => {
   const { debug: l } = se(), [o, E] = C(""), [b, u] = C([]), [f, I] = C(!1), [x, w] = C(null), [m, k] = C(
     null
-  ), S = H(!1);
-  $(() => {
+  ), S = G(!1);
+  H(() => {
     if (t.loading) {
       l && console.log(
         "[ParticipantPicker] Waiting for participant source to finish loading..."
@@ -835,7 +856,7 @@ const Qe = ({
     if (!o) return !0;
     const g = o.toLowerCase();
     return h.name.toLowerCase().includes(g) || ((v = h.email) == null ? void 0 : v.toLowerCase().includes(g)) || !1;
-  }), F = O(
+  }), T = P(
     async (h) => {
       if (!m) {
         k(h.id);
@@ -847,10 +868,10 @@ const Qe = ({
       }
     },
     [s, m]
-  ), M = (h, g) => {
-    (h.key === "Enter" || h.key === " ") && (h.preventDefault(), F(g));
+  ), U = (h, g) => {
+    (h.key === "Enter" || h.key === " ") && (h.preventDefault(), T(g));
   };
-  return /* @__PURE__ */ d("div", { className: T("flex flex-col h-full", i), children: [
+  return /* @__PURE__ */ d("div", { className: D("flex flex-col h-full", i), children: [
     /* @__PURE__ */ d("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: [
       /* @__PURE__ */ d("div", { className: "flex items-center justify-between mb-3", children: [
         /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-charcoal", children: "Start a new Conversation" }),
@@ -865,7 +886,7 @@ const Qe = ({
         t.totalCount !== void 0 && ` • ${t.totalCount} ${a} total`
       ] }),
       /* @__PURE__ */ e(
-        Je,
+        Qe,
         {
           searchQuery: o,
           setSearchQuery: E,
@@ -897,13 +918,13 @@ const Qe = ({
           "button",
           {
             type: "button",
-            onClick: () => F(h),
-            onKeyDown: (P) => M(P, h),
+            onClick: () => T(h),
+            onKeyDown: (F) => U(F, h),
             className: "w-full px-4 py-3 hover:bg-sand transition-colors border-b border-sand text-left focus:outline-none focus:ring-2 focus:ring-black",
             children: /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ d("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [
                 /* @__PURE__ */ e(
-                  Q,
+                  J,
                   {
                     id: h.id,
                     name: g,
@@ -927,7 +948,7 @@ const Qe = ({
       ] }) })
     ] }) })
   ] });
-}, Xe = ({ hasChannels: t, onStartConversation: s, participantLabel: n }) => /* @__PURE__ */ e("div", { className: "messaging-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
+}, Ze = ({ hasChannels: t, onStartConversation: s, participantLabel: n }) => /* @__PURE__ */ e("div", { className: "messaging-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
   /* @__PURE__ */ e("div", { className: "w-24 h-24 bg-primary-alt/10 rounded-full flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ e("span", { className: "text-4xl", children: "💬" }) }),
   /* @__PURE__ */ e("h2", { className: "font-semibold text-charcoal", children: "Welcome to Messages" }),
   /* @__PURE__ */ e("p", { className: "text-stone text-sm mb-6", children: t ? /* @__PURE__ */ d(le, { children: [
@@ -970,10 +991,10 @@ const Qe = ({
       children: "Go Back"
     }
   )
-] }) }), Ye = ({ className: t, message: s }) => /* @__PURE__ */ d(
+] }) }), Ke = ({ className: t, message: s }) => /* @__PURE__ */ d(
   "div",
   {
-    className: T("flex items-center justify-center h-full", t),
+    className: D("flex items-center justify-center h-full", t),
     children: [
       /* @__PURE__ */ d("svg", { viewBox: "0 0 100 100", className: "size-8 fill-pebble", stroke: "none", children: [
         /* @__PURE__ */ e("circle", { cx: "6", cy: "50", r: "6", children: /* @__PURE__ */ e(
@@ -1013,10 +1034,10 @@ const Qe = ({
       s && /* @__PURE__ */ e("span", { className: "text-stone", children: s })
     ]
   }
-), Ze = () => /* @__PURE__ */ e("div", { className: "messaging-loading-state flex items-center justify-center h-full", children: /* @__PURE__ */ d("div", { className: "flex items-center", children: [
-  /* @__PURE__ */ e(Ye, { className: "w-6 h-6" }),
+), es = () => /* @__PURE__ */ e("div", { className: "messaging-loading-state flex items-center justify-center h-full", children: /* @__PURE__ */ d("div", { className: "flex items-center", children: [
+  /* @__PURE__ */ e(Ke, { className: "w-6 h-6" }),
   /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
-] }) }), as = ({
+] }) }), cs = ({
   capabilities: t = {},
   className: s,
   renderMessageInputActions: n,
@@ -1036,8 +1057,8 @@ const Qe = ({
     error: x,
     refreshConnection: w,
     debug: m
-  } = Be(), [k, S] = C(null), [y, F] = C(!1), [M, h] = C(!1), [g, v] = C(/* @__PURE__ */ new Set()), [P, z] = C(0), [D, A] = C(!1), [J, _] = C(null), V = H(null), {
-    showStartConversation: X = !1,
+  } = Be(), [k, S] = C(null), [y, T] = C(!1), [U, h] = C(!1), [g, v] = C(/* @__PURE__ */ new Set()), [F, z] = C(0), [M, A] = C(!1), [Y, _] = C(null), V = G(null), {
+    showStartConversation: Q = !1,
     participantSource: W,
     participantLabel: R = "participants"
   } = t, p = q.useMemo(() => {
@@ -1053,7 +1074,7 @@ const Qe = ({
       },
       ...E
     };
-  }, [E, u == null ? void 0 : u.userID]), j = H(null), B = O(async () => {
+  }, [E, u == null ? void 0 : u.userID]), j = G(null), B = P(async () => {
     if (!u || !f) return;
     const N = u.userID;
     if (N)
@@ -1066,27 +1087,27 @@ const Qe = ({
           },
           {},
           { limit: 100 }
-        ), U = /* @__PURE__ */ new Set();
-        L.forEach((G) => {
-          const Ee = G.state.members;
+        ), O = /* @__PURE__ */ new Set();
+        L.forEach(($) => {
+          const Ee = $.state.members;
           Object.values(Ee).forEach((ye) => {
             var ae;
             const te = (ae = ye.user) == null ? void 0 : ae.id;
-            te && te !== N && U.add(te);
+            te && te !== N && O.add(te);
           });
-        }), v(U), F(L.length > 0), j.current = N, m && console.log("[MessagingShell] Channels synced successfully:", {
+        }), v(O), T(L.length > 0), j.current = N, m && console.log("[MessagingShell] Channels synced successfully:", {
           channelCount: L.length,
-          memberCount: U.size
+          memberCount: O.size
         });
       } catch (L) {
         console.error("[MessagingShell] Failed to sync channels:", L);
       }
   }, [u, f, m]);
-  $(() => {
+  H(() => {
     if (!u || !f) return;
     const N = u.userID;
     N && j.current !== N && B();
-  }, [u, f, B]), $(() => {
+  }, [u, f, B]), H(() => {
     if (!c || !u || !f) return;
     (async () => {
       const L = u.userID;
@@ -1096,7 +1117,7 @@ const Qe = ({
             "[MessagingShell] Loading initial conversation with:",
             c
           );
-          const U = await u.queryChannels(
+          const O = await u.queryChannels(
             {
               type: "messaging",
               members: { $eq: [L, c] }
@@ -1104,10 +1125,10 @@ const Qe = ({
             {},
             { limit: 1 }
           );
-          if (U.length > 0)
-            S(U[0]), A(!0), _(null), r && r(U[0]), m && console.log(
+          if (O.length > 0)
+            S(O[0]), A(!0), _(null), r && r(O[0]), m && console.log(
               "[MessagingShell] Initial conversation loaded:",
-              U[0].id
+              O[0].id
             );
           else if (i && b) {
             m && console.log(
@@ -1115,20 +1136,20 @@ const Qe = ({
               i
             );
             try {
-              const G = await b.startChannelWithParticipant({
+              const $ = await b.startChannelWithParticipant({
                 id: i.id,
                 name: i.name,
                 email: i.email,
                 phone: i.phone
               });
-              S(G), A(!0), _(null), r && r(G), m && console.log(
+              S($), A(!0), _(null), r && r($), m && console.log(
                 "[MessagingShell] Channel created and loaded:",
-                G.id
+                $.id
               );
-            } catch (G) {
+            } catch ($) {
               console.error(
                 "[MessagingShell] Failed to create conversation:",
-                G
+                $
               ), _("Failed to create conversation");
             }
           } else
@@ -1138,10 +1159,10 @@ const Qe = ({
               "[MessagingShell] No conversation found for:",
               c
             );
-        } catch (U) {
+        } catch (O) {
           console.error(
             "[MessagingShell] Failed to load initial conversation:",
-            U
+            O
           ), _("Failed to load conversation");
         }
     })();
@@ -1154,17 +1175,17 @@ const Qe = ({
     m,
     r
   ]);
-  const Y = O(
+  const X = P(
     (N) => {
       S(N), r == null || r(N);
     },
     [r]
-  ), Ne = O(() => {
-    D || S(null);
-  }, [D]), be = O(() => {
+  ), Ne = P(() => {
+    M || S(null);
+  }, [M]), be = P(() => {
     var N;
     W && (z((L) => L + 1), h(!0), (N = V.current) == null || N.showModal());
-  }, [W]), ve = O(
+  }, [W]), ve = P(
     async (N) => {
       var L;
       if (b)
@@ -1173,47 +1194,47 @@ const Qe = ({
             "[MessagingShell] Starting conversation with:",
             N.id
           );
-          const U = await b.startChannelWithParticipant({
+          const O = await b.startChannelWithParticipant({
             id: N.id,
             name: N.name,
             email: N.email,
             phone: N.phone
           });
           try {
-            await U.show();
-          } catch (G) {
-            console.warn("[MessagingShell] Failed to unhide channel:", G);
+            await O.show();
+          } catch ($) {
+            console.warn("[MessagingShell] Failed to unhide channel:", $);
           }
-          S(U), h(!1), (L = V.current) == null || L.close(), a == null || a(N);
-        } catch (U) {
-          console.error("[MessagingShell] Failed to start conversation:", U);
+          S(O), h(!1), (L = V.current) == null || L.close(), a == null || a(N);
+        } catch (O) {
+          console.error("[MessagingShell] Failed to start conversation:", O);
         }
     },
     [b, a, m]
-  ), ne = O(() => {
+  ), ne = P(() => {
     var N;
     h(!1), (N = V.current) == null || N.close();
-  }, []), Ce = O(
+  }, []), Ce = P(
     async (N) => {
       m && console.log("[MessagingShell] Leaving conversation:", N.id), S(null), A(!1), j.current = null, await B();
     },
     [B, m]
-  ), we = O(
+  ), we = P(
     async (N) => {
       m && console.log("[MessagingShell] Blocking participant:", N), S(null), A(!1), j.current = null, await B();
     },
     [B, m]
   ), Z = !!k;
-  return I ? /* @__PURE__ */ e("div", { className: T("h-full", s), children: /* @__PURE__ */ e(Ze, {}) }) : x ? /* @__PURE__ */ e("div", { className: T("h-full", s), children: /* @__PURE__ */ e(re, { message: x, onBack: w }) }) : !f || !u ? /* @__PURE__ */ e("div", { className: T("h-full", s), children: /* @__PURE__ */ e(
+  return I ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(es, {}) }) : x ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(re, { message: x, onBack: w }) }) : !f || !u ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(
     re,
     {
       message: "Not connected to messaging service",
       onBack: w
     }
-  ) }) : J ? /* @__PURE__ */ e("div", { className: T("h-full", s), children: /* @__PURE__ */ e(re, { message: J }) }) : /* @__PURE__ */ d(
+  ) }) : Y ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(re, { message: Y }) }) : /* @__PURE__ */ d(
     "div",
     {
-      className: T(
+      className: D(
         "messaging-shell h-full bg-white overflow-hidden",
         s
       ),
@@ -1222,21 +1243,21 @@ const Qe = ({
           /* @__PURE__ */ e(
             "div",
             {
-              className: T(
+              className: D(
                 "messaging-channel-list-sidebar min-h-0 min-w-0 bg-white lg:bg-chalk lg:flex lg:flex-col lg:border-r lg:border-sand",
                 {
                   // Explicitly hidden via prop or in direct conversation mode
-                  "!hidden": o === !1 || D,
+                  "!hidden": o === !1 || M,
                   // Normal mode: hide on mobile when channel selected, show on desktop
-                  "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": o !== !1 && !D && Z,
+                  "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": o !== !1 && !M && Z,
                   // Normal mode: show when no channel selected
-                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": o !== !1 && !D && !Z
+                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": o !== !1 && !M && !Z
                 }
               ),
               children: /* @__PURE__ */ e(
-                $e,
+                Ve,
                 {
-                  onChannelSelect: Y,
+                  onChannelSelect: X,
                   selectedChannel: k || void 0,
                   filters: p
                 }
@@ -1246,21 +1267,21 @@ const Qe = ({
           /* @__PURE__ */ e(
             "div",
             {
-              className: T(
+              className: D(
                 "messaging-conversation-view flex-1 flex-col min-w-0 min-h-0",
                 {
                   // In direct conversation mode, always show (full width)
-                  flex: D || Z,
+                  flex: M || Z,
                   // Normal mode: hide on mobile when no channel selected
-                  "hidden lg:flex": !D && !Z
+                  "hidden lg:flex": !M && !Z
                 }
               ),
               children: k ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
-                qe,
+                Je,
                 {
                   channel: k,
                   onBack: Ne,
-                  showBackButton: !D,
+                  showBackButton: !M,
                   renderMessageInputActions: n,
                   onLeaveConversation: Ce,
                   onBlockParticipant: we,
@@ -1268,10 +1289,10 @@ const Qe = ({
                 },
                 k.id
               ) }) : /* @__PURE__ */ e(
-                Xe,
+                Ze,
                 {
                   hasChannels: y,
-                  onStartConversation: X ? be : void 0,
+                  onStartConversation: Q ? be : void 0,
                   participantLabel: R
                 }
               )
@@ -1289,7 +1310,7 @@ const Qe = ({
             },
             onClose: ne,
             children: /* @__PURE__ */ e("div", { className: "h-full w-full bg-white shadow-max-elevation-light", children: /* @__PURE__ */ e(
-              Qe,
+              Xe,
               {
                 participantSource: W,
                 onSelectParticipant: ve,
@@ -1298,14 +1319,14 @@ const Qe = ({
                 participantLabel: R,
                 searchPlaceholder: `Search ${R}...`
               },
-              P
+              F
             ) })
           }
         )
       ]
     }
   );
-}, Ke = ({
+}, ss = ({
   question: t,
   onClick: s,
   loading: n = !1,
@@ -1317,7 +1338,7 @@ const Qe = ({
     onClick: s,
     disabled: n,
     style: { backgroundColor: "#E6E5E3" },
-    className: T(
+    className: D(
       "w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors",
       {
         "hover:brightness-95 active:brightness-90": !n,
@@ -1327,7 +1348,7 @@ const Qe = ({
     ),
     children: t
   }
-), is = ({
+), ds = ({
   faqs: t,
   onFaqClick: s,
   loadingFaqId: n,
@@ -1337,9 +1358,9 @@ const Qe = ({
   avatarName: i
 }) => {
   const l = t.filter((o) => o.enabled).sort((o, E) => (o.order ?? 0) - (E.order ?? 0));
-  return l.length === 0 ? null : /* @__PURE__ */ e("div", { className: T("px-4 py-6", a), children: /* @__PURE__ */ d("div", { className: "flex gap-3 items-end", children: [
+  return l.length === 0 ? null : /* @__PURE__ */ e("div", { className: D("px-4 py-6", a), children: /* @__PURE__ */ d("div", { className: "flex gap-3 items-end", children: [
     (c || i) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
-      Q,
+      J,
       {
         id: i || "account",
         name: i || "Account",
@@ -1355,7 +1376,7 @@ const Qe = ({
         children: [
           r && /* @__PURE__ */ e("p", { className: "text-md text-charcoal mb-4", children: r }),
           l.map((o) => /* @__PURE__ */ e(
-            Ke,
+            ss,
             {
               question: o.question,
               onClick: () => s(o.id),
@@ -1367,19 +1388,19 @@ const Qe = ({
       }
     )
   ] }) });
-}, cs = (t, s = {}) => {
-  const { initialSearch: n = "", pageSize: r = 20 } = s, [a, c] = C([]), [i, l] = C(!1), [o, E] = C(null), [b, u] = C(n), [f, I] = C(!0), [x, w] = C(), m = O(async (F = !1, M) => {
+}, us = (t, s = {}) => {
+  const { initialSearch: n = "", pageSize: r = 20 } = s, [a, c] = C([]), [i, l] = C(!1), [o, E] = C(null), [b, u] = C(n), [f, I] = C(!0), [x, w] = C(), m = P(async (T = !1, U) => {
     if (i) return;
-    const h = M !== void 0 ? M : b;
+    const h = U !== void 0 ? U : b;
     l(!0), E(null);
     try {
       const g = await t.loadParticipants({
         search: h || void 0,
         limit: r,
-        cursor: F ? void 0 : x
+        cursor: T ? void 0 : x
       });
       c(
-        (v) => F ? g.participants : [...v, ...g.participants]
+        (v) => T ? g.participants : [...v, ...g.participants]
       ), I(g.hasMore), w(g.nextCursor);
     } catch (g) {
       const v = g instanceof Error ? g.message : "Failed to load participants";
@@ -1387,14 +1408,14 @@ const Qe = ({
     } finally {
       l(!1);
     }
-  }, [t, b, x, r, i]), k = O(() => {
+  }, [t, b, x, r, i]), k = P(() => {
     f && !i && m(!1);
-  }, [f, i, m]), S = O((F) => {
-    u(F), w(void 0), m(!0, F);
-  }, [m]), y = O(() => {
+  }, [f, i, m]), S = P((T) => {
+    u(T), w(void 0), m(!0, T);
+  }, [m]), y = P(() => {
     w(void 0), m(!0);
   }, [m]);
-  return $(() => {
+  return H(() => {
     m(!0);
   }, [t.loadParticipants]), {
     participants: a,
@@ -1409,16 +1430,17 @@ const Qe = ({
   };
 };
 export {
-  Q as Avatar,
+  J as Avatar,
   xe as ChannelEmptyState,
-  $e as ChannelList,
-  qe as ChannelView,
-  is as FaqList,
-  Ke as FaqListItem,
-  os as MessagingProvider,
-  as as MessagingShell,
-  Qe as ParticipantPicker,
+  Ve as ChannelList,
+  Je as ChannelView,
+  ds as FaqList,
+  ss as FaqListItem,
+  is as MessagingProvider,
+  cs as MessagingShell,
+  Xe as ParticipantPicker,
+  $e as formatRelativeTime,
   Be as useMessaging,
-  cs as useParticipants
+  us as useParticipants
 };
 //# sourceMappingURL=index.js.map