@linktr.ee/messaging-react 1.6.4 → 1.6.6

package/dist/index.js

@@ -1,10 +1,10 @@
 import { jsx as e, jsxs as d, Fragment as oe } from "react/jsx-runtime";
 import D from "classnames";
-import X, { createContext as we, useContext as Ee, useCallback as F, useState as E, useRef as H, useEffect as G } from "react";
+import X, { createContext as Ee, useContext as ye, useCallback as M, useState as E, useRef as H, useEffect as _ } from "react";
 import { StreamChatService as Ie } from "@linktr.ee/messaging-core";
-import { Chat as ye, useChatContext as Se, ChannelList as Re, Channel as ke, useChannelStateContext as me, Window as Te, MessageList as Pe, MessageInput as De } from "stream-chat-react";
-import { NotePencilIcon as Oe, XIcon as he, ArrowLeftIcon as Me, DotsThreeIcon as Fe, SpinnerGapIcon as ee, SignOutIcon as Ue, ProhibitInsetIcon as ie, FlagIcon as Le, MagnifyingGlassIcon as pe, ChatCircleDotsIcon as ce } from "@phosphor-icons/react";
-const fe = we({
+import { Chat as Se, useChatContext as Re, ChannelList as ke, Channel as Fe, useChannelStateContext as me, Window as Te, MessageList as De, MessageInput as Pe } from "stream-chat-react";
+import { NotePencilIcon as Oe, XIcon as he, ArrowLeftIcon as Me, DotsThreeIcon as pe, SpinnerGapIcon as ee, SignOutIcon as Ue, ProhibitInsetIcon as ie, FlagIcon as Le, MagnifyingGlassIcon as je, ChatCircleDotsIcon as ce } from "@phosphor-icons/react";
+const fe = Ee({
   service: null,
   client: null,
   isConnected: !1,
@@ -15,7 +15,7 @@ const fe = we({
   refreshConnection: async () => {
   },
   debug: !1
-}), se = () => Ee(fe), ls = ({
+}), se = () => ye(fe), os = ({
   children: t,
   user: s,
   serviceConfig: n,
@@ -24,9 +24,9 @@ const fe = we({
   customization: c = {},
   debug: a = !1
 }) => {
-  const l = F(
-    (w, ...O) => {
-      a && console.log(`🔥 [MessagingProvider] ${w}`, ...O);
+  const l = M(
+    (w, ...P) => {
+      a && console.log(`🔥 [MessagingProvider] ${w}`, ...P);
     },
     [a]
   );
@@ -37,7 +37,7 @@ const fe = we({
     capabilities: Object.keys(i),
     customization: Object.keys(c)
   });
-  const [r, b] = E(null), [u, g] = E(null), [m, I] = E(!1), [N, h] = E(!1), [v, S] = E(null), M = H(!1), y = H({
+  const [r, b] = E(null), [u, g] = E(null), [m, y] = E(!1), [N, h] = E(!1), [v, S] = E(null), O = H(!1), I = H({
     userId: s == null ? void 0 : s.id,
     apiKey: o,
     serviceConfig: n,
@@ -48,19 +48,19 @@ const fe = we({
     renderCount: k.current,
     currentProps: { userId: s == null ? void 0 : s.id, apiKey: (o == null ? void 0 : o.substring(0, 8)) + "..." },
     propChanges: {
-      userChanged: y.current.userId !== (s == null ? void 0 : s.id),
-      apiKeyChanged: y.current.apiKey !== o,
-      serviceConfigChanged: y.current.serviceConfig !== n,
-      capabilitiesChanged: y.current.capabilities !== i,
-      customizationChanged: y.current.customization !== c
+      userChanged: I.current.userId !== (s == null ? void 0 : s.id),
+      apiKeyChanged: I.current.apiKey !== o,
+      serviceConfigChanged: I.current.serviceConfig !== n,
+      capabilitiesChanged: I.current.capabilities !== i,
+      customizationChanged: I.current.customization !== c
     }
-  }), y.current = {
+  }), I.current = {
     userId: s == null ? void 0 : s.id,
     apiKey: o,
     serviceConfig: n,
     capabilities: i,
     customization: c
-  }, G(() => {
+  }, _(() => {
     const w = k.current;
     if (l("🔧 SERVICE INIT EFFECT TRIGGERED", {
       renderCount: w,
@@ -69,8 +69,8 @@ const fe = we({
       dependencies: {
         apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
         serviceConfigRef: n,
-        serviceConfigStable: y.current.serviceConfig === n,
-        apiKeyStable: y.current.apiKey === o
+        serviceConfigStable: I.current.serviceConfig === n,
+        apiKeyStable: I.current.apiKey === o
       }
     }), !o || !n) {
       l("⚠️ SERVICE INIT SKIPPED", {
@@ -82,42 +82,42 @@ const fe = we({
     l("🚀 CREATING NEW SERVICE", {
       renderCount: w,
       apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
-      serviceConfigChanged: y.current.serviceConfig !== n
+      serviceConfigChanged: I.current.serviceConfig !== n
     });
-    const O = new Ie({
+    const P = new Ie({
       ...n,
       apiKey: o,
       debug: a
     });
-    return b(O), l("✅ SERVICE SET", {
+    return b(P), l("✅ SERVICE SET", {
       renderCount: w,
-      serviceInstance: !!O
+      serviceInstance: !!P
     }), () => {
       l("🧹 SERVICE CLEANUP", {
         renderCount: w,
         reason: "Effect cleanup"
-      }), O.disconnectUser().catch(console.error);
+      }), P.disconnectUser().catch(console.error);
     };
   }, [o, n, a, l]);
-  const T = H(null);
-  G(() => {
-    var O, L;
+  const F = H(null);
+  _(() => {
+    var P, U;
     if (l("🔗 USER CONNECTION EFFECT TRIGGERED", {
       hasService: !!r,
       hasUser: !!s,
       userId: s == null ? void 0 : s.id,
-      isConnecting: M.current,
+      isConnecting: O.current,
       isConnected: m,
       dependencies: { service: !!r, userId: s == null ? void 0 : s.id }
     }), !r || !s) {
       l("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    if (M.current) {
+    if (O.current) {
       l("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
-    if (((O = T.current) == null ? void 0 : O.serviceId) === r && ((L = T.current) == null ? void 0 : L.userId) === s.id) {
+    if (((P = F.current) == null ? void 0 : P.serviceId) === r && ((U = F.current) == null ? void 0 : U.userId) === s.id) {
       l(
         "⚠️ USER CONNECTION SKIPPED",
         "Already connected this user with this service"
@@ -125,40 +125,40 @@ const fe = we({
       return;
     }
     (async () => {
-      l("🚀 STARTING USER CONNECTION", { userId: s.id }), M.current = !0, h(!0), S(null);
+      l("🚀 STARTING USER CONNECTION", { userId: s.id }), O.current = !0, h(!0), S(null);
       try {
         l("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
-        const p = await r.connectUser(s);
-        g(p), I(!0), T.current = { serviceId: r, userId: s.id }, l("✅ USER CONNECTION SUCCESS", {
+        const L = await r.connectUser(s);
+        g(L), y(!0), F.current = { serviceId: r, userId: s.id }, l("✅ USER CONNECTION SUCCESS", {
           userId: s.id,
-          clientId: p.userID
+          clientId: L.userID
         });
-      } catch (p) {
-        const $ = p instanceof Error ? p.message : "Connection failed";
+      } catch (L) {
+        const $ = L instanceof Error ? L.message : "Connection failed";
         S($), l("❌ USER CONNECTION ERROR", {
           userId: s.id,
           error: $
         });
       } finally {
-        h(!1), M.current = !1, l("🔄 USER CONNECTION FINISHED", {
+        h(!1), O.current = !1, l("🔄 USER CONNECTION FINISHED", {
           userId: s.id,
           isConnected: m
         });
       }
     })();
-  }, [r, s, l, m]), G(() => (l("🔌 CLEANUP EFFECT REGISTERED", {
+  }, [r, s, l, m]), _(() => (l("🔌 CLEANUP EFFECT REGISTERED", {
     hasService: !!r,
     isConnected: m
   }), () => {
     r && m ? (l(
       "🧹 CLEANUP EFFECT TRIGGERED",
       "Cleaning up connection on unmount"
-    ), T.current = null, r.disconnectUser().catch(console.error)) : l("🔇 CLEANUP EFFECT SKIPPED", {
+    ), F.current = null, r.disconnectUser().catch(console.error)) : l("🔇 CLEANUP EFFECT SKIPPED", {
       hasService: !!r,
       isConnected: m
     });
   }), [r, m, l]);
-  const f = F(async () => {
+  const f = M(async () => {
     if (l("🔄 REFRESH CONNECTION CALLED", {
       hasService: !!r,
       hasUser: !!s
@@ -170,12 +170,12 @@ const fe = we({
     try {
       l("🔌 DISCONNECTING FOR REFRESH"), await r.disconnectUser(), l("📞 RECONNECTING FOR REFRESH");
       const w = await r.connectUser(s);
-      g(w), I(!0), S(null), l("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
+      g(w), y(!0), S(null), l("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
     } catch (w) {
-      const O = w instanceof Error ? w.message : "Refresh failed";
-      S(O), l("❌ CONNECTION REFRESH ERROR", {
+      const P = w instanceof Error ? w.message : "Refresh failed";
+      S(P), l("❌ CONNECTION REFRESH ERROR", {
         userId: s.id,
-        error: O
+        error: P
       });
     } finally {
       h(!1), l("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
@@ -214,8 +214,8 @@ const fe = we({
     renderCount: k.current,
     willRenderChat: !!(u && m),
     contextValueReady: !!x
-  }), /* @__PURE__ */ e(fe.Provider, { value: x, children: u && m ? /* @__PURE__ */ e(ye, { client: u, children: t }) : t });
-}, je = () => se();
+  }), /* @__PURE__ */ e(fe.Provider, { value: x, children: u && m ? /* @__PURE__ */ e(Se, { client: u, children: t }) : t });
+}, Ae = () => se();
 function ne({ label: t, className: s, children: n, ...o }) {
   return /* @__PURE__ */ d(
     "button",
@@ -265,7 +265,7 @@ const de = [
   "🍈"
   // Melon
 ];
-function Ae(t) {
+function Be(t) {
   let s = 0;
   for (let n = 0; n < t.length; n++) {
     const o = t.charCodeAt(n);
@@ -273,8 +273,8 @@ function Ae(t) {
   }
   return Math.abs(s);
 }
-function Be(t) {
-  const n = Ae(t) % de.length;
+function He(t) {
+  const n = Be(t) % de.length;
   return de[n];
 }
 const J = ({
@@ -283,7 +283,7 @@ const J = ({
   size: n = 40,
   className: o
 }) => {
-  const i = Be(t), c = "#FBFAF9", l = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg";
+  const i = He(t), c = "#FBFAF9", l = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg";
   return /* @__PURE__ */ e(
     "div",
     {
@@ -316,16 +316,16 @@ const J = ({
       )
     }
   );
-}, He = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: o = !1, unread: i }) => {
-  var h, v, S, M, y, k;
+}, _e = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: o = !1, unread: i }) => {
+  var h, v, S, O, I, k;
   const c = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), a = () => {
     t && n(t);
   }, r = Object.values(((h = t == null ? void 0 : t.state) == null ? void 0 : h.members) || {}).find(
-    (T) => {
+    (F) => {
       var f, x;
-      return ((f = T.user) == null ? void 0 : f.id) && T.user.id !== ((x = t == null ? void 0 : t._client) == null ? void 0 : x.userID);
+      return ((f = F.user) == null ? void 0 : f.id) && F.user.id !== ((x = t == null ? void 0 : t._client) == null ? void 0 : x.userID);
     }
-  ), b = ((v = r == null ? void 0 : r.user) == null ? void 0 : v.name) || "Conversation", u = (S = r == null ? void 0 : r.user) == null ? void 0 : S.image, g = (y = (M = t == null ? void 0 : t.state) == null ? void 0 : M.messages) == null ? void 0 : y[t.state.messages.length - 1], m = (g == null ? void 0 : g.text) || "No messages yet", I = g != null && g.created_at ? new Date(g.created_at).toLocaleTimeString([], {
+  ), b = ((v = r == null ? void 0 : r.user) == null ? void 0 : v.name) || "Conversation", u = (S = r == null ? void 0 : r.user) == null ? void 0 : S.image, g = (I = (O = t == null ? void 0 : t.state) == null ? void 0 : O.messages) == null ? void 0 : I[t.state.messages.length - 1], m = (g == null ? void 0 : g.text) || "No messages yet", y = g != null && g.created_at ? new Date(g.created_at).toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
   }) : "", N = i ?? 0;
@@ -334,7 +334,7 @@ const J = ({
     isSelected: c,
     participantName: b,
     unreadCount: N,
-    hasTimestamp: !!I
+    hasTimestamp: !!y
   }), /* @__PURE__ */ e(
     "button",
     {
@@ -369,7 +369,7 @@ const J = ({
                 children: b
               }
             ),
-            I && /* @__PURE__ */ e("span", { className: "text-xs text-stone flex-shrink-0", children: I })
+            y && /* @__PURE__ */ e("span", { className: "text-xs text-stone flex-shrink-0", children: y })
           ] }),
           /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
             /* @__PURE__ */ e("p", { className: "text-xs text-stone mr-2 flex-1 line-clamp-2", children: m }),
@@ -379,7 +379,7 @@ const J = ({
       ] })
     }
   );
-}, Ge = ({
+}, $e = ({
   onChannelSelect: t,
   selectedChannel: s,
   showStartConversation: n = !1,
@@ -397,7 +397,7 @@ const J = ({
     showStartConversation: n,
     participantLabel: i
   });
-  const { client: r } = Se();
+  const { client: r } = Re();
   l && console.log("📺 [ChannelList] 📡 CHAT CONTEXT", {
     renderCount: a.current,
     hasClient: !!r,
@@ -405,7 +405,12 @@ const J = ({
     clientConnected: (u = r == null ? void 0 : r.wsConnection) == null ? void 0 : u.isHealthy
   });
   const b = X.useMemo(() => {
-    const g = r.userID, m = g ? { type: "messaging", members: { $in: [g] }, hidden: !1 } : { type: "messaging" };
+    const g = r.userID, m = g ? {
+      type: "messaging",
+      members: { $in: [g] },
+      hidden: !1,
+      last_message_at: { $exists: !0 }
+    } : { type: "messaging", last_message_at: { $exists: !0 } };
     return l && console.log("📺 [ChannelList] 🔍 FILTERS MEMOIZED", {
       renderCount: a.current,
       userId: g,
@@ -438,19 +443,19 @@ const J = ({
           hasClient: !!r,
           clientUserId: r == null ? void 0 : r.userID
         }), /* @__PURE__ */ e(
-          Re,
+          ke,
           {
             filters: b,
             sort: { last_message_at: -1 },
             options: { limit: 30 },
             Preview: (g) => {
-              var m, I;
+              var m, y;
               return l && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
                 channelId: (m = g.channel) == null ? void 0 : m.id,
                 selectedChannelId: s == null ? void 0 : s.id,
-                isSelected: (s == null ? void 0 : s.id) === ((I = g.channel) == null ? void 0 : I.id)
+                isSelected: (s == null ? void 0 : s.id) === ((y = g.channel) == null ? void 0 : y.id)
               }), /* @__PURE__ */ e(
-                He,
+                _e,
                 {
                   ...g,
                   selectedChannel: s,
@@ -485,15 +490,18 @@ const J = ({
 function ge({ onClick: t }) {
   return /* @__PURE__ */ e(ne, { label: "Close", onClick: t, className: "p-1", children: /* @__PURE__ */ e(he, { className: "h-5 w-5 text-stone", weight: "bold" }) });
 }
-const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "message-input flex items-center gap-2 p-4", children: [
+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" })
+] }) }), Ge = ({ 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(De, { focus: !0, maxRows: 4 }) })
-] }), _e = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: o }) => {
+  /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(Pe, { focus: !0, maxRows: 4 }) })
+] }), Ve = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: o }) => {
   var r, b, u, g;
   const { channel: i } = me(), c = X.useMemo(() => Object.values(i.state.members || {}).find(
-    (I) => {
+    (y) => {
       var N;
-      return ((N = I.user) == null ? void 0 : N.id) && I.user.id !== i._client.userID;
+      return ((N = y.user) == null ? void 0 : N.id) && y.user.id !== i._client.userID;
     }
   ), [i._client.userID, i.state.members]), a = ((r = c == null ? void 0 : c.user) == null ? void 0 : r.name) || ((b = c == null ? void 0 : c.user) == null ? void 0 : b.id) || "Unknown member", l = (u = c == null ? void 0 : c.user) == null ? void 0 : u.image;
   return /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-3 min-h-12", children: [
@@ -519,9 +527,9 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
       ),
       /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-charcoal truncate", children: a }) })
     ] }),
-    o && n && /* @__PURE__ */ e(ne, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(Fe, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
+    o && n && /* @__PURE__ */ e(ne, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(pe, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
   ] });
-}, Ve = ({
+}, We = ({
   isOpen: t,
   onClose: s,
   participant: n,
@@ -530,13 +538,13 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
   onLeaveConversation: c,
   onBlockParticipant: a
 }) => {
-  var p, $, _, V, Q, W, z;
-  const { service: l, debug: r } = se(), b = H(null), [u, g] = E(!1), [m, I] = E(!1), [N, h] = E(!1);
-  G(() => {
+  var L, $, G, V, Q, W, z;
+  const { service: l, debug: r } = se(), b = H(null), [u, g] = E(!1), [m, y] = E(!1), [N, h] = E(!1);
+  _(() => {
     const R = b.current;
     R && (t ? R.showModal() : R.close());
   }, [t]);
-  const v = F(async () => {
+  const v = M(async () => {
     var R;
     if (!(!l || !((R = n == null ? void 0 : n.user) != null && R.id)))
       try {
@@ -547,47 +555,47 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
           }
         );
         g(A);
-      } catch (P) {
+      } catch (T) {
         console.error(
           "[ChannelInfoDialog] Failed to check blocked status:",
-          P
+          T
         );
       }
-  }, [l, (p = n == null ? void 0 : n.user) == null ? void 0 : p.id]);
-  G(() => {
+  }, [l, (L = n == null ? void 0 : n.user) == null ? void 0 : L.id]);
+  _(() => {
     t && v();
   }, [t, v]);
   const S = async () => {
     var R;
     if (!m) {
-      r && console.log("[ChannelInfoDialog] Leave conversation", o.cid), I(!0);
+      r && console.log("[ChannelInfoDialog] Leave conversation", o.cid), y(!0);
       try {
-        const P = ((R = o._client) == null ? void 0 : R.userID) ?? null;
-        await o.hide(P, !1), c && await c(o), s();
-      } catch (P) {
-        console.error("[ChannelInfoDialog] Failed to leave conversation", P);
+        const T = ((R = o._client) == null ? void 0 : R.userID) ?? null;
+        await o.hide(T, !1), c && await c(o), s();
+      } catch (T) {
+        console.error("[ChannelInfoDialog] Failed to leave conversation", T);
       } finally {
-        I(!1);
+        y(!1);
       }
     }
-  }, M = async () => {
-    var R, P, A;
+  }, O = async () => {
+    var R, T, A;
     if (!(N || !l)) {
       r && console.log("[ChannelInfoDialog] Block member", (R = n == null ? void 0 : n.user) == null ? void 0 : R.id), h(!0);
       try {
-        await l.blockUser((P = n == null ? void 0 : n.user) == null ? void 0 : P.id), a && await a((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
+        await l.blockUser((T = n == null ? void 0 : n.user) == null ? void 0 : T.id), a && await a((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
       } catch (q) {
         console.error("[ChannelInfoDialog] Failed to block member", q);
       } finally {
         h(!1);
       }
     }
-  }, y = async () => {
-    var R, P, A;
+  }, I = async () => {
+    var R, T, A;
     if (!(N || !l)) {
       r && console.log("[ChannelInfoDialog] Unblock member", (R = n == null ? void 0 : n.user) == null ? void 0 : R.id), h(!0);
       try {
-        await l.unBlockUser((P = n == null ? void 0 : n.user) == null ? void 0 : P.id), a && await a((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
+        await l.unBlockUser((T = n == null ? void 0 : n.user) == null ? void 0 : T.id), a && await a((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
       } catch (q) {
         console.error("[ChannelInfoDialog] Failed to unblock member", q);
       } finally {
@@ -602,7 +610,7 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
     );
   };
   if (!n) return null;
-  const T = (($ = n.user) == null ? void 0 : $.name) || ((_ = n.user) == null ? void 0 : _.id) || "Unknown member", f = (V = n.user) == null ? void 0 : V.image, x = (Q = n.user) == null ? void 0 : Q.email, w = (W = n.user) == null ? void 0 : W.username, O = x || (w ? `linktr.ee/${w}` : void 0), L = ((z = n.user) == null ? void 0 : z.id) || "unknown";
+  const F = (($ = n.user) == null ? void 0 : $.name) || ((G = n.user) == null ? void 0 : G.id) || "Unknown member", f = (V = n.user) == null ? void 0 : V.image, x = (Q = n.user) == null ? void 0 : Q.email, w = (W = n.user) == null ? void 0 : W.username, P = x || (w ? `linktr.ee/${w}` : void 0), U = ((z = n.user) == null ? void 0 : z.id) || "unknown";
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ e(
@@ -619,21 +627,35 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
             /* @__PURE__ */ e("h2", { className: "text-base font-semibold text-charcoal", children: "Chat info" }),
             /* @__PURE__ */ e(ge, { onClick: s })
           ] }),
-          /* @__PURE__ */ d("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: [
-            /* @__PURE__ */ e("div", { className: "rounded-2xl bg-chalk p-4", children: /* @__PURE__ */ d("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ d("div", { className: "flex-1 px-2 overflow-y-auto w-full", children: [
+            /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]", style: { backgroundColor: "#FBFAF9" }, children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3 w-full", children: [
               /* @__PURE__ */ e(
                 J,
                 {
-                  id: L,
-                  name: T,
+                  id: U,
+                  name: F,
                   image: f,
-                  size: 64
+                  size: 88,
+                  className: "!rounded-full"
                 }
               ),
-              /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: T }),
-                O && /* @__PURE__ */ e("p", { className: "truncate text-sm text-stone", children: O }),
-                i && /* @__PURE__ */ e("span", { className: "mt-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700", children: i })
+              /* @__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: F }),
+                P && /* @__PURE__ */ e("p", { className: "truncate text-sm text-[#00000055]", children: P }),
+                i && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "mt-1 rounded-full text-xs font-normal w-fit",
+                    style: {
+                      padding: "4px 8px",
+                      backgroundColor: i === "Subscribed to you" ? "#DCFCE7" : "#F5F5F4",
+                      color: i === "Subscribed to you" ? "#008236" : "#78716C",
+                      lineHeight: "133.333%",
+                      letterSpacing: "0.21px"
+                    },
+                    children: i
+                  }
+                )
               ] })
             ] }) }),
             /* @__PURE__ */ d("ul", { className: "flex flex-col gap-2 mt-2", children: [
@@ -652,7 +674,7 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
               /* @__PURE__ */ e("li", { children: u ? /* @__PURE__ */ d(
                 K,
                 {
-                  onClick: y,
+                  onClick: I,
                   disabled: N,
                   "aria-busy": N,
                   children: [
@@ -663,7 +685,7 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
               ) : /* @__PURE__ */ d(
                 K,
                 {
-                  onClick: M,
+                  onClick: O,
                   disabled: N,
                   "aria-busy": N,
                   children: [
@@ -682,28 +704,31 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
       }
     )
   );
-}, We = ({
+}, ze = ({
   onBack: t,
   showBackButton: s,
   renderMessageInputActions: n,
   onLeaveConversation: o,
   onBlockParticipant: i,
-  CustomChannelEmptyState: c
+  CustomChannelEmptyState: c = xe
 }) => {
-  var m, I;
-  const { channel: a } = me(), [l, r] = E(!1), b = (((I = (m = a == null ? void 0 : a.state) == null ? void 0 : m.messages) == null ? void 0 : I.length) ?? 0) > 0, u = X.useMemo(() => Object.values(a.state.members || {}).find(
+  var m, y;
+  const { channel: a } = me(), [l, r] = E(!1), b = (((y = (m = a == null ? void 0 : a.state) == null ? void 0 : m.messages) == null ? void 0 : y.length) ?? 0) > 0, u = X.useMemo(() => Object.values(a.state.members || {}).find(
     (h) => {
       var v;
       return ((v = h.user) == null ? void 0 : v.id) && h.user.id !== a._client.userID;
     }
   ), [a._client.userID, a.state.members]), g = X.useMemo(() => {
     const N = a.data ?? {};
-    return N.followerStatus ? String(N.followerStatus) : N.isFollower ? "Subscribed to you" : void 0;
+    if (N.followerStatus)
+      return String(N.followerStatus);
+    if (N.isFollower !== void 0)
+      return N.isFollower ? "Subscribed to you" : "Not subscribed";
   }, [a.data]);
   return /* @__PURE__ */ d(oe, { children: [
     /* @__PURE__ */ d(Te, { children: [
       /* @__PURE__ */ e("div", { className: "border-b border-sand bg-white px-4 py-3", children: /* @__PURE__ */ e(
-        _e,
+        Ve,
         {
           onBack: t,
           showBackButton: s,
@@ -712,18 +737,18 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
         }
       ) }),
       /* @__PURE__ */ d("div", { className: "flex-1 overflow-hidden relative", children: [
-        /* @__PURE__ */ e(Pe, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }),
-        !b && c && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex bg-white", children: /* @__PURE__ */ e(c, {}) })
+        /* @__PURE__ */ e(De, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }),
+        !b && c && /* @__PURE__ */ e("div", { className: "absolute inset-0 w-full h-full bg-white", children: /* @__PURE__ */ e(c, {}) })
       ] }),
       /* @__PURE__ */ e(
-        $e,
+        Ge,
         {
           renderActions: () => n == null ? void 0 : n(a)
         }
       )
     ] }),
     /* @__PURE__ */ e(
-      Ve,
+      We,
       {
         isOpen: l,
         onClose: () => r(!1),
@@ -735,7 +760,7 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
       }
     )
   ] });
-}, ze = ({
+}, qe = ({
   channel: t,
   onBack: s,
   showBackButton: n = !1,
@@ -743,7 +768,7 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
   onLeaveConversation: i,
   onBlockParticipant: c,
   className: a,
-  CustomChannelEmptyState: l
+  CustomChannelEmptyState: l = xe
 }) => /* @__PURE__ */ e(
   "div",
   {
@@ -751,8 +776,8 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
       "messaging-channel-view h-full flex flex-col",
       a
     ),
-    children: /* @__PURE__ */ e(ke, { channel: t, children: /* @__PURE__ */ e(
-      We,
+    children: /* @__PURE__ */ e(Fe, { channel: t, children: /* @__PURE__ */ e(
+      ze,
       {
         onBack: s,
         showBackButton: n,
@@ -764,7 +789,7 @@ const $e = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
     ) })
   }
 );
-function qe({
+function Xe({
   searchQuery: t,
   setSearchQuery: s,
   placeholder: n
@@ -772,7 +797,7 @@ function qe({
   const o = H(null);
   return /* @__PURE__ */ d("div", { className: "relative", children: [
     /* @__PURE__ */ e(
-      pe,
+      je,
       {
         className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone",
         weight: "bold"
@@ -803,7 +828,7 @@ function qe({
     )
   ] });
 }
-const Xe = ({
+const Qe = ({
   participantSource: t,
   onSelectParticipant: s,
   onClose: n,
@@ -812,26 +837,26 @@ const Xe = ({
   searchPlaceholder: c = "Search participants...",
   className: a
 }) => {
-  const { debug: l } = se(), [r, b] = E(""), [u, g] = E([]), [m, I] = E(!1), [N, h] = E(null), [v, S] = E(
+  const { debug: l } = se(), [r, b] = E(""), [u, g] = E([]), [m, y] = E(!1), [N, h] = E(null), [v, S] = E(
     null
-  ), M = H(!1);
-  G(() => {
+  ), O = H(!1);
+  _(() => {
     if (t.loading) {
       l && console.log(
         "[ParticipantPicker] Waiting for participant source to finish loading..."
       );
       return;
     }
-    if (M.current) return;
+    if (O.current) return;
     (async () => {
-      l && console.log("[ParticipantPicker] Loading initial participants..."), I(!0), h(null);
+      l && console.log("[ParticipantPicker] Loading initial participants..."), y(!0), h(null);
       try {
         const x = await t.loadParticipants({
           search: "",
           // Load all participants initially
           limit: 100
         });
-        g(x.participants), M.current = !0, l && console.log(
+        g(x.participants), O.current = !0, l && console.log(
           "[ParticipantPicker] Participants loaded successfully:",
           x.participants.length
         );
@@ -839,16 +864,16 @@ const Xe = ({
         const w = x instanceof Error ? x.message : "Failed to load participants";
         h(w), console.error("[ParticipantPicker] Failed to load participants:", x);
       } finally {
-        I(!1);
+        y(!1);
       }
     })();
   }, [t.loading, l]);
-  const y = u.filter((f) => !o.has(f.id)).filter((f) => {
+  const I = u.filter((f) => !o.has(f.id)).filter((f) => {
     var w;
     if (!r) return !0;
     const x = r.toLowerCase();
     return f.name.toLowerCase().includes(x) || ((w = f.email) == null ? void 0 : w.toLowerCase().includes(x)) || !1;
-  }), k = F(
+  }), k = M(
     async (f) => {
       if (!v) {
         S(f.id);
@@ -860,7 +885,7 @@ const Xe = ({
       }
     },
     [s, v]
-  ), T = (f, x) => {
+  ), F = (f, x) => {
     (f.key === "Enter" || f.key === " ") && (f.preventDefault(), k(x));
   };
   return /* @__PURE__ */ d("div", { className: D("flex flex-col h-full", a), children: [
@@ -873,12 +898,12 @@ const Xe = ({
         "Select a ",
         i.slice(0, -1),
         " to start messaging (",
-        y.length,
+        I.length,
         " available)",
         t.totalCount !== void 0 && ` • ${t.totalCount} ${i} total`
       ] }),
       /* @__PURE__ */ e(
-        qe,
+        Xe,
         {
           searchQuery: r,
           setSearchQuery: b,
@@ -892,26 +917,26 @@ const Xe = ({
       ": ",
       N
     ] }),
-    /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: m && y.length === 0 ? /* @__PURE__ */ e("div", { className: "h-32 flex items-center justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
+    /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: m && I.length === 0 ? /* @__PURE__ */ e("div", { className: "h-32 flex items-center justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
       /* @__PURE__ */ e("div", { className: "w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
       /* @__PURE__ */ d("span", { className: "text-sm text-stone", children: [
         "Loading ",
         i,
         "..."
       ] })
-    ] }) }) : y.length === 0 ? /* @__PURE__ */ d("div", { className: "p-6 text-center", children: [
+    ] }) }) : I.length === 0 ? /* @__PURE__ */ d("div", { className: "p-6 text-center", children: [
       /* @__PURE__ */ e("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-sand", children: /* @__PURE__ */ e(ce, { className: "h-8 w-8 text-charcoal" }) }),
       /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-charcoal mb-2", children: r ? `No ${i} found` : u.length > 0 ? `Already chatting with all ${i}` : `No ${i} yet` }),
       /* @__PURE__ */ e("p", { className: "text-xs text-stone", children: r ? "Try a different search term" : u.length > 0 ? `You have existing conversations with all your ${i}` : `${i.charAt(0).toUpperCase() + i.slice(1)} will appear here` })
     ] }) : /* @__PURE__ */ d("ul", { className: "space-y-0", children: [
-      y.map((f) => {
+      I.map((f) => {
         const x = f.name || f.email || f.id, w = f.email && f.name ? f.email : f.phone;
         return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
           "button",
           {
             type: "button",
             onClick: () => k(f),
-            onKeyDown: (O) => T(O, f),
+            onKeyDown: (P) => F(P, f),
             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: [
@@ -940,7 +965,7 @@ const Xe = ({
       ] }) })
     ] }) })
   ] });
-}, Qe = ({ 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(oe, { children: [
@@ -983,7 +1008,7 @@ const Xe = ({
       children: "Go Back"
     }
   )
-] }) }), Ze = ({ className: t, message: s }) => /* @__PURE__ */ d(
+] }) }), Je = ({ className: t, message: s }) => /* @__PURE__ */ d(
   "div",
   {
     className: D("flex items-center justify-center h-full", t),
@@ -1026,10 +1051,10 @@ const Xe = ({
       s && /* @__PURE__ */ e("span", { className: "text-stone", children: s })
     ]
   }
-), Je = () => /* @__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(Ze, { className: "w-6 h-6" }),
+), Ye = () => /* @__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(Je, { className: "w-6 h-6" }),
   /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
-] }) }), os = ({
+] }) }), as = ({
   capabilities: t = {},
   className: s,
   renderMessageInputActions: n,
@@ -1045,14 +1070,14 @@ const Xe = ({
     client: u,
     isConnected: g,
     isLoading: m,
-    error: I,
+    error: y,
     refreshConnection: N,
     debug: h
-  } = je(), [v, S] = E(null), [M, y] = E(!1), [k, T] = E(!1), [f, x] = E(/* @__PURE__ */ new Set()), [w, O] = E(0), [L, p] = E(!1), [$, _] = E(null), V = H(null), {
+  } = Ae(), [v, S] = E(null), [O, I] = E(!1), [k, F] = E(!1), [f, x] = E(/* @__PURE__ */ new Set()), [w, P] = E(0), [U, L] = E(!1), [$, G] = E(null), V = H(null), {
     showStartConversation: Q = !1,
     participantSource: W,
     participantLabel: z = "participants"
-  } = t, R = H(null), P = F(async () => {
+  } = t, R = H(null), T = M(async () => {
     if (!u || !g) return;
     const C = u.userID;
     if (C)
@@ -1065,27 +1090,27 @@ const Xe = ({
           },
           {},
           { limit: 100 }
-        ), U = /* @__PURE__ */ new Set();
+        ), p = /* @__PURE__ */ new Set();
         j.forEach((B) => {
-          const Ce = B.state.members;
-          Object.values(Ce).forEach((ve) => {
+          const ve = B.state.members;
+          Object.values(ve).forEach((we) => {
             var ae;
-            const re = (ae = ve.user) == null ? void 0 : ae.id;
-            re && re !== C && U.add(re);
+            const re = (ae = we.user) == null ? void 0 : ae.id;
+            re && re !== C && p.add(re);
           });
-        }), x(U), y(j.length > 0), R.current = C, h && console.log("[MessagingShell] Channels synced successfully:", {
+        }), x(p), I(j.length > 0), R.current = C, h && console.log("[MessagingShell] Channels synced successfully:", {
           channelCount: j.length,
-          memberCount: U.size
+          memberCount: p.size
         });
       } catch (j) {
         console.error("[MessagingShell] Failed to sync channels:", j);
       }
   }, [u, g, h]);
-  G(() => {
+  _(() => {
     if (!u || !g) return;
     const C = u.userID;
-    C && R.current !== C && P();
-  }, [u, g, P]), G(() => {
+    C && R.current !== C && T();
+  }, [u, g, T]), _(() => {
     if (!c || !u || !g) return;
     (async () => {
       const j = u.userID;
@@ -1095,7 +1120,7 @@ const Xe = ({
             "[MessagingShell] Loading initial conversation with:",
             c
           );
-          const U = await u.queryChannels(
+          const p = await u.queryChannels(
             {
               type: "messaging",
               members: { $eq: [j, c] }
@@ -1103,10 +1128,10 @@ const Xe = ({
             {},
             { limit: 1 }
           );
-          if (U.length > 0)
-            S(U[0]), p(!0), _(null), o && o(U[0]), h && console.log(
+          if (p.length > 0)
+            S(p[0]), L(!0), G(null), o && o(p[0]), h && console.log(
               "[MessagingShell] Initial conversation loaded:",
-              U[0].id
+              p[0].id
             );
           else if (a && b) {
             h && console.log(
@@ -1120,7 +1145,7 @@ const Xe = ({
                 email: a.email,
                 phone: a.phone
               });
-              S(B), p(!0), _(null), o && o(B), h && console.log(
+              S(B), L(!0), G(null), o && o(B), h && console.log(
                 "[MessagingShell] Channel created and loaded:",
                 B.id
               );
@@ -1128,20 +1153,20 @@ const Xe = ({
               console.error(
                 "[MessagingShell] Failed to create conversation:",
                 B
-              ), _("Failed to create conversation");
+              ), G("Failed to create conversation");
             }
           } else
-            _(
+            G(
               "No conversation found with this account"
             ), h && console.log(
               "[MessagingShell] No conversation found for:",
               c
             );
-        } catch (U) {
+        } catch (p) {
           console.error(
             "[MessagingShell] Failed to load initial conversation:",
-            U
-          ), _("Failed to load conversation");
+            p
+          ), G("Failed to load conversation");
         }
     })();
   }, [
@@ -1153,17 +1178,17 @@ const Xe = ({
     h,
     o
   ]);
-  const A = F(
+  const A = M(
     (C) => {
       S(C), o == null || o(C);
     },
     [o]
-  ), q = F(() => {
-    L || S(null);
-  }, [L]), Z = F(() => {
+  ), q = M(() => {
+    U || S(null);
+  }, [U]), Z = M(() => {
     var C;
-    W && (O((j) => j + 1), T(!0), (C = V.current) == null || C.showModal());
-  }, [W]), xe = F(
+    W && (P((j) => j + 1), F(!0), (C = V.current) == null || C.showModal());
+  }, [W]), Ne = M(
     async (C) => {
       var j;
       if (b)
@@ -1172,38 +1197,38 @@ const Xe = ({
             "[MessagingShell] Starting conversation with:",
             C.id
           );
-          const U = await b.startChannelWithParticipant({
+          const p = await b.startChannelWithParticipant({
             id: C.id,
             name: C.name,
             email: C.email,
             phone: C.phone
           });
           try {
-            await U.show();
+            await p.show();
           } catch (B) {
             console.warn("[MessagingShell] Failed to unhide channel:", B);
           }
-          S(U), T(!1), (j = V.current) == null || j.close(), i == null || i(C);
-        } catch (U) {
-          console.error("[MessagingShell] Failed to start conversation:", U);
+          S(p), F(!1), (j = V.current) == null || j.close(), i == null || i(C);
+        } catch (p) {
+          console.error("[MessagingShell] Failed to start conversation:", p);
         }
     },
     [b, i, h]
-  ), te = F(() => {
+  ), te = M(() => {
     var C;
-    T(!1), (C = V.current) == null || C.close();
-  }, []), Ne = F(
+    F(!1), (C = V.current) == null || C.close();
+  }, []), be = M(
     async (C) => {
-      h && console.log("[MessagingShell] Leaving conversation:", C.id), S(null), p(!1), R.current = null, await P();
+      h && console.log("[MessagingShell] Leaving conversation:", C.id), S(null), L(!1), R.current = null, await T();
     },
-    [P, h]
-  ), be = F(
+    [T, h]
+  ), Ce = M(
     async (C) => {
-      h && console.log("[MessagingShell] Blocking participant:", C), S(null), p(!1), R.current = null, await P();
+      h && console.log("[MessagingShell] Blocking participant:", C), S(null), L(!1), R.current = null, await T();
     },
-    [P, h]
+    [T, h]
   ), Y = !!v;
-  return m ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(Je, {}) }) : I ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(le, { message: I, onBack: N }) }) : !g || !u ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(
+  return m ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(Ye, {}) }) : y ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(le, { message: y, onBack: N }) }) : !g || !u ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(
     le,
     {
       message: "Not connected to messaging service",
@@ -1225,15 +1250,15 @@ const Xe = ({
                 "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": r === !1 || L,
+                  "!hidden": r === !1 || U,
                   // 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]": r !== !1 && !L && Y,
+                  "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": r !== !1 && !U && Y,
                   // Normal mode: show when no channel selected
-                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": r !== !1 && !L && !Y
+                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": r !== !1 && !U && !Y
                 }
               ),
               children: /* @__PURE__ */ e(
-                Ge,
+                $e,
                 {
                   onChannelSelect: A,
                   selectedChannel: v || void 0,
@@ -1251,27 +1276,27 @@ const Xe = ({
                 "messaging-conversation-view flex-1 flex-col min-w-0 min-h-0",
                 {
                   // In direct conversation mode, always show (full width)
-                  flex: L || Y,
+                  flex: U || Y,
                   // Normal mode: hide on mobile when no channel selected
-                  "hidden lg:flex": !L && !Y
+                  "hidden lg:flex": !U && !Y
                 }
               ),
               children: v ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
-                ze,
+                qe,
                 {
                   channel: v,
                   onBack: q,
-                  showBackButton: !L,
+                  showBackButton: !U,
                   renderMessageInputActions: n,
-                  onLeaveConversation: Ne,
-                  onBlockParticipant: be,
+                  onLeaveConversation: be,
+                  onBlockParticipant: Ce,
                   CustomChannelEmptyState: l
                 },
                 v.id
               ) }) : /* @__PURE__ */ e(
-                Qe,
+                Ze,
                 {
-                  hasChannels: M,
+                  hasChannels: O,
                   onStartConversation: Q ? Z : void 0,
                   participantLabel: z
                 }
@@ -1290,10 +1315,10 @@ const Xe = ({
             },
             onClose: te,
             children: /* @__PURE__ */ e("div", { className: "h-full w-full bg-white shadow-max-elevation-light", children: /* @__PURE__ */ e(
-              Xe,
+              Qe,
               {
                 participantSource: W,
-                onSelectParticipant: xe,
+                onSelectParticipant: Ne,
                 onClose: te,
                 existingParticipantIds: f,
                 participantLabel: z,
@@ -1306,7 +1331,7 @@ const Xe = ({
       ]
     }
   );
-}, Ye = ({
+}, Ke = ({
   question: t,
   onClick: s,
   loading: n = !1,
@@ -1328,7 +1353,7 @@ const Xe = ({
     ),
     children: t
   }
-), as = ({
+), is = ({
   faqs: t,
   onFaqClick: s,
   loadingFaqId: n,
@@ -1356,7 +1381,7 @@ const Xe = ({
         children: [
           o && /* @__PURE__ */ e("p", { className: "text-md text-charcoal mb-4", children: o }),
           l.map((r) => /* @__PURE__ */ e(
-            Ye,
+            Ke,
             {
               question: r.question,
               onClick: () => s(r.id),
@@ -1368,10 +1393,10 @@ const Xe = ({
       }
     )
   ] }) });
-}, is = (t, s = {}) => {
-  const { initialSearch: n = "", pageSize: o = 20 } = s, [i, c] = E([]), [a, l] = E(!1), [r, b] = E(null), [u, g] = E(n), [m, I] = E(!0), [N, h] = E(), v = F(async (k = !1, T) => {
+}, cs = (t, s = {}) => {
+  const { initialSearch: n = "", pageSize: o = 20 } = s, [i, c] = E([]), [a, l] = E(!1), [r, b] = E(null), [u, g] = E(n), [m, y] = E(!0), [N, h] = E(), v = M(async (k = !1, F) => {
     if (a) return;
-    const f = T !== void 0 ? T : u;
+    const f = F !== void 0 ? F : u;
     l(!0), b(null);
     try {
       const x = await t.loadParticipants({
@@ -1381,21 +1406,21 @@ const Xe = ({
       });
       c(
         (w) => k ? x.participants : [...w, ...x.participants]
-      ), I(x.hasMore), h(x.nextCursor);
+      ), y(x.hasMore), h(x.nextCursor);
     } catch (x) {
       const w = x instanceof Error ? x.message : "Failed to load participants";
       b(w), console.error("[useParticipants] Load error:", x);
     } finally {
       l(!1);
     }
-  }, [t, u, N, o, a]), S = F(() => {
+  }, [t, u, N, o, a]), S = M(() => {
     m && !a && v(!1);
-  }, [m, a, v]), M = F((k) => {
+  }, [m, a, v]), O = M((k) => {
     g(k), h(void 0), v(!0, k);
-  }, [v]), y = F(() => {
+  }, [v]), I = M(() => {
     h(void 0), v(!0);
   }, [v]);
-  return G(() => {
+  return _(() => {
     v(!0);
   }, [t.loadParticipants]), {
     participants: i,
@@ -1405,20 +1430,21 @@ const Xe = ({
     hasMore: m,
     totalCount: t.totalCount,
     loadMore: S,
-    search: M,
-    refresh: y
+    search: O,
+    refresh: I
   };
 };
 export {
   J as Avatar,
-  Ge as ChannelList,
-  ze as ChannelView,
-  as as FaqList,
-  Ye as FaqListItem,
-  ls as MessagingProvider,
-  os as MessagingShell,
-  Xe as ParticipantPicker,
-  je as useMessaging,
-  is as useParticipants
+  xe as ChannelEmptyState,
+  $e as ChannelList,
+  qe as ChannelView,
+  is as FaqList,
+  Ke as FaqListItem,
+  os as MessagingProvider,
+  as as MessagingShell,
+  Qe as ParticipantPicker,
+  Ae as useMessaging,
+  cs as useParticipants
 };
 //# sourceMappingURL=index.js.map