@linktr.ee/messaging-react 1.2.0 → 1.3.0-rc-1761055628

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as i, Fragment as se } from "react/jsx-runtime";
-import L from "classnames";
-import $, { createContext as ue, useContext as me, useCallback as U, useState as w, useRef as A, useEffect as B } from "react";
+import F from "classnames";
+import $, { createContext as ue, useContext as me, useCallback as L, useState as v, useRef as A, useEffect as B } from "react";
 import { StreamChatService as he } from "@linktr.ee/messaging-core";
 import { Chat as fe, useChatContext as ge, ChannelList as xe, Channel as Ne, Window as Ce, MessageList as be, useChannelStateContext as ve, MessageInput as we } from "stream-chat-react";
 import { NotePencilIcon as Ee, XIcon as oe, ArrowLeftIcon as Ie, DotsThreeIcon as ye, SpinnerGapIcon as Q, SignOutIcon as Se, ProhibitInsetIcon as te, FlagIcon as Re, MagnifyingGlassIcon as ke, ChatCircleDotsIcon as ne } from "@phosphor-icons/react";
@@ -24,7 +24,7 @@ const ae = ue({
   customization: m = {},
   debug: d = !1
 }) => {
-  const r = U(
+  const r = L(
     (N, ...S) => {
       d && console.log(`🔥 [MessagingProvider] ${N}`, ...S);
     },
@@ -37,7 +37,7 @@ const ae = ue({
     capabilities: Object.keys(a),
     customization: Object.keys(m)
   });
-  const [o, b] = w(null), [x, g] = w(null), [c, C] = w(!1), [v, y] = w(!1), [I, P] = w(null), p = A(!1), E = A({
+  const [o, w] = v(null), [x, g] = v(null), [c, C] = v(!1), [b, y] = v(!1), [I, P] = v(null), O = A(!1), E = A({
     userId: s == null ? void 0 : s.id,
     apiKey: l,
     serviceConfig: n,
@@ -89,7 +89,7 @@ const ae = ue({
       apiKey: l,
       debug: d
     });
-    return b(S), r("✅ SERVICE SET", {
+    return w(S), r("✅ SERVICE SET", {
       renderCount: N,
       serviceInstance: !!S
     }), () => {
@@ -106,14 +106,14 @@ const ae = ue({
       hasService: !!o,
       hasUser: !!s,
       userId: s == null ? void 0 : s.id,
-      isConnecting: p.current,
+      isConnecting: O.current,
       isConnected: c,
       dependencies: { service: !!o, userId: s == null ? void 0 : s.id }
     }), !o || !s) {
       r("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    if (p.current) {
+    if (O.current) {
       r("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
@@ -125,22 +125,22 @@ const ae = ue({
       return;
     }
     (async () => {
-      r("🚀 STARTING USER CONNECTION", { userId: s.id }), p.current = !0, y(!0), P(null);
+      r("🚀 STARTING USER CONNECTION", { userId: s.id }), O.current = !0, y(!0), P(null);
       try {
         r("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
-        const F = await o.connectUser(s);
-        g(F), C(!0), T.current = { serviceId: o, userId: s.id }, r("✅ USER CONNECTION SUCCESS", {
+        const M = await o.connectUser(s);
+        g(M), C(!0), T.current = { serviceId: o, userId: s.id }, r("✅ USER CONNECTION SUCCESS", {
           userId: s.id,
-          clientId: F.userID
+          clientId: M.userID
         });
-      } catch (F) {
-        const H = F instanceof Error ? F.message : "Connection failed";
+      } catch (M) {
+        const H = M instanceof Error ? M.message : "Connection failed";
         P(H), r("❌ USER CONNECTION ERROR", {
           userId: s.id,
           error: H
         });
       } finally {
-        y(!1), p.current = !1, r("🔄 USER CONNECTION FINISHED", {
+        y(!1), O.current = !1, r("🔄 USER CONNECTION FINISHED", {
           userId: s.id,
           isConnected: c
         });
@@ -158,7 +158,7 @@ const ae = ue({
       isConnected: c
     });
   }), [o, c, r]);
-  const u = U(async () => {
+  const u = L(async () => {
     if (r("🔄 REFRESH CONNECTION CALLED", {
       hasService: !!o,
       hasUser: !!s
@@ -184,7 +184,7 @@ const ae = ue({
     hasService: !!o,
     hasClient: !!x,
     isConnected: c,
-    isLoading: v,
+    isLoading: b,
     hasError: !!I,
     capabilitiesKeys: Object.keys(a),
     customizationKeys: Object.keys(m)
@@ -192,7 +192,7 @@ const ae = ue({
     service: o,
     client: x,
     isConnected: c,
-    isLoading: v,
+    isLoading: b,
     error: I,
     capabilities: a,
     customization: m,
@@ -202,7 +202,7 @@ const ae = ue({
     o,
     x,
     c,
-    v,
+    b,
     I,
     a,
     m,
@@ -221,7 +221,7 @@ function q({ label: t, className: s, children: n, ...l }) {
     "button",
     {
       type: "button",
-      className: L(
+      className: F(
         "rounded-full p-2 transition-colors focus-ring",
         {
           "cursor-not-allowed opacity-50": l.disabled,
@@ -239,30 +239,30 @@ function q({ label: t, className: s, children: n, ...l }) {
 }
 function Te(t) {
   const s = [
-    { bgColor: "bg-primary/20", textColor: "text-primary" },
-    // #8129D9 - purple
-    { bgColor: "bg-forest/20", textColor: "text-forest" },
-    // #254f1a - dark green
-    { bgColor: "bg-iris/20", textColor: "text-iris" },
-    // #061492 - dark blue
-    { bgColor: "bg-shade/20", textColor: "text-shade" },
-    // #1e2330 - dark blue-gray
-    { bgColor: "bg-dahlia/20", textColor: "text-dahlia" },
-    // #502274 - dark purple
-    { bgColor: "bg-orchid/20", textColor: "text-orchid" },
-    // #d717e7 - magenta
-    { bgColor: "bg-currant/20", textColor: "text-currant" },
-    // #780016 - dark red
-    { bgColor: "bg-apple/20", textColor: "text-apple" },
-    // #c41500 - red
-    { bgColor: "bg-rose/20", textColor: "text-rose" },
-    // #fc3e4b - pink
-    { bgColor: "bg-root/20", textColor: "text-root" },
-    // #4c2e05 - brown
-    { bgColor: "bg-poppy/20", textColor: "text-poppy" },
-    // #ff6c02 - orange
-    { bgColor: "bg-moss/20", textColor: "text-moss" }
-    // #70764d - olive green
+    { color: "#8129D9" },
+    // purple
+    { color: "#254f1a" },
+    // dark green
+    { color: "#061492" },
+    // dark blue
+    { color: "#1e2330" },
+    // dark blue-gray
+    { color: "#502274" },
+    // dark purple
+    { color: "#d717e7" },
+    // magenta
+    { color: "#780016" },
+    // dark red
+    { color: "#c41500" },
+    // red
+    { color: "#fc3e4b" },
+    // pink
+    { color: "#4c2e05" },
+    // brown
+    { color: "#ff6c02" },
+    // orange
+    { color: "#70764d" }
+    // olive green
   ];
   let n = 0;
   for (let a = 0; a < t.length; a++)
@@ -277,11 +277,11 @@ const Y = ({
   size: l = 40,
   className: a
 }) => {
-  const { bgColor: m, textColor: d } = Te(t), r = s.charAt(0).toUpperCase(), b = l < 32 ? "text-xs" : l < 56 ? "text-sm" : "text-lg";
+  const { color: m } = Te(t), d = s.charAt(0).toUpperCase(), o = l < 32 ? "text-xs" : l < 56 ? "text-sm" : "text-lg";
   return /* @__PURE__ */ e(
     "div",
     {
-      className: L(
+      className: F(
         "flex-shrink-0 overflow-hidden rounded-full",
         a
       ),
@@ -296,27 +296,30 @@ const Y = ({
       ) : /* @__PURE__ */ e(
         "div",
         {
-          className: L(
+          "aria-hidden": "true",
+          className: F(
             "flex h-full w-full items-center justify-center font-semibold",
-            m,
-            d,
-            b
+            o
           ),
-          children: r
+          style: {
+            color: m,
+            backgroundColor: `color-mix(in srgb, ${m} 20%, transparent)`
+          },
+          children: d
         }
       )
     }
   );
 }, De = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: l = !1 }) => {
-  var v, y, I, P, p, E, R;
+  var b, y, I, P, O, E, R;
   const a = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), m = () => {
     t && n(t);
-  }, r = Object.values(((v = t == null ? void 0 : t.state) == null ? void 0 : v.members) || {}).find(
+  }, r = Object.values(((b = t == null ? void 0 : t.state) == null ? void 0 : b.members) || {}).find(
     (T) => {
       var u, f;
       return ((u = T.user) == null ? void 0 : u.id) && T.user.id !== ((f = t == null ? void 0 : t._client) == null ? void 0 : f.userID);
     }
-  ), o = ((y = r == null ? void 0 : r.user) == null ? void 0 : y.name) || "Conversation", b = (I = r == null ? void 0 : r.user) == null ? void 0 : I.image, x = (p = (P = t == null ? void 0 : t.state) == null ? void 0 : P.messages) == null ? void 0 : p[t.state.messages.length - 1], g = (x == null ? void 0 : x.text) || "No messages yet", c = x != null && x.created_at ? new Date(x.created_at).toLocaleTimeString([], {
+  ), o = ((y = r == null ? void 0 : r.user) == null ? void 0 : y.name) || "Conversation", w = (I = r == null ? void 0 : r.user) == null ? void 0 : I.image, x = (O = (P = t == null ? void 0 : t.state) == null ? void 0 : P.messages) == null ? void 0 : O[t.state.messages.length - 1], g = (x == null ? void 0 : x.text) || "No messages yet", c = x != null && x.created_at ? new Date(x.created_at).toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
   }) : "", C = ((E = t == null ? void 0 : t.state) == null ? void 0 : E.unreadCount) || 0;
@@ -331,7 +334,7 @@ const Y = ({
     {
       type: "button",
       onClick: m,
-      className: L(
+      className: F(
         "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": a,
@@ -344,7 +347,7 @@ const Y = ({
           {
             id: ((R = r == null ? void 0 : r.user) == null ? void 0 : R.id) || t.id || "unknown",
             name: o,
-            image: b,
+            image: w,
             size: 44
           }
         ),
@@ -353,7 +356,7 @@ const Y = ({
             /* @__PURE__ */ e(
               "h3",
               {
-                className: L(
+                className: F(
                   "text-sm font-medium truncate",
                   a ? "text-primary" : "text-charcoal"
                 ),
@@ -370,7 +373,7 @@ const Y = ({
       ] })
     }
   );
-}, pe = ({
+}, Oe = ({
   onChannelSelect: t,
   selectedChannel: s,
   showStartConversation: n = !1,
@@ -395,7 +398,7 @@ const Y = ({
     clientUserId: o == null ? void 0 : o.userID,
     clientConnected: (x = o == null ? void 0 : o.wsConnection) == null ? void 0 : x.isHealthy
   });
-  const b = $.useMemo(() => {
+  const w = $.useMemo(() => {
     const g = o.userID, c = g ? { type: "messaging", members: { $in: [g] }, hidden: !1 } : { type: "messaging" };
     return r && console.log("📺 [ChannelList] 🔍 FILTERS MEMOIZED", {
       renderCount: d.current,
@@ -406,7 +409,7 @@ const Y = ({
   return /* @__PURE__ */ i(
     "div",
     {
-      className: L(
+      className: F(
         "h-full flex flex-col min-w-0 overflow-hidden",
         m
       ),
@@ -425,13 +428,13 @@ const Y = ({
         ] }) }),
         /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (r && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
           renderCount: d.current,
-          filters: b,
+          filters: w,
           hasClient: !!o,
           clientUserId: o == null ? void 0 : o.userID
         }), /* @__PURE__ */ e(
           xe,
           {
-            filters: b,
+            filters: w,
             sort: { last_message_at: -1 },
             options: { limit: 30 },
             Preview: (g) => {
@@ -464,7 +467,7 @@ const Y = ({
   "button",
   {
     type: "button",
-    className: L(
+    className: F(
       "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
@@ -476,17 +479,17 @@ const Y = ({
 function ie({ onClick: t }) {
   return /* @__PURE__ */ e(q, { label: "Close", onClick: t, className: "p-1", children: /* @__PURE__ */ e(oe, { className: "h-5 w-5 text-stone", weight: "bold" }) });
 }
-const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "message-input flex items-center gap-2 p-4", children: [
+const Ue = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "message-input flex items-center gap-2 p-4", children: [
   t && t(),
   /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(we, { focus: !0, maxRows: 4 }) })
-] }), Ue = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: l }) => {
-  var o, b, x, g;
+] }), Le = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: l }) => {
+  var o, w, x, g;
   const { channel: a } = ve(), m = $.useMemo(() => Object.values(a.state.members || {}).find(
     (C) => {
-      var v;
-      return ((v = C.user) == null ? void 0 : v.id) && C.user.id !== a._client.userID;
+      var b;
+      return ((b = C.user) == null ? void 0 : b.id) && C.user.id !== a._client.userID;
     }
-  ), [a._client.userID, a.state.members]), d = ((o = m == null ? void 0 : m.user) == null ? void 0 : o.name) || ((b = m == null ? void 0 : m.user) == null ? void 0 : b.id) || "Unknown member", r = (x = m == null ? void 0 : m.user) == null ? void 0 : x.image;
+  ), [a._client.userID, a.state.members]), d = ((o = m == null ? void 0 : m.user) == null ? void 0 : o.name) || ((w = m == null ? void 0 : m.user) == null ? void 0 : w.id) || "Unknown member", r = (x = m == null ? void 0 : m.user) == null ? void 0 : x.image;
   return /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3 min-h-12", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center gap-3 min-w-0", children: [
       s && t && /* @__PURE__ */ e(
@@ -512,7 +515,7 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
     ] }),
     l && n && /* @__PURE__ */ e(q, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(ye, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
   ] });
-}, Le = ({
+}, Fe = ({
   isOpen: t,
   onClose: s,
   participant: n,
@@ -521,20 +524,20 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
   onLeaveConversation: m,
   onBlockParticipant: d
 }) => {
-  var F, H, V, _, W, G, z;
-  const { service: r, debug: o } = Z(), b = A(null), [x, g] = w(!1), [c, C] = w(!1), [v, y] = w(!1);
+  var M, H, V, _, W, G, z;
+  const { service: r, debug: o } = Z(), w = A(null), [x, g] = v(!1), [c, C] = v(!1), [b, y] = v(!1);
   B(() => {
-    const k = b.current;
+    const k = w.current;
     k && (t ? k.showModal() : k.close());
   }, [t]);
-  const I = U(async () => {
+  const I = L(async () => {
     var k;
     if (!(!r || !((k = n == null ? void 0 : n.user) != null && k.id)))
       try {
         const h = (await r.getBlockedUsers()).some(
-          (O) => {
-            var M;
-            return O.blocked_user_id === ((M = n == null ? void 0 : n.user) == null ? void 0 : M.id);
+          (U) => {
+            var p;
+            return U.blocked_user_id === ((p = n == null ? void 0 : n.user) == null ? void 0 : p.id);
           }
         );
         g(h);
@@ -544,7 +547,7 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
           D
         );
       }
-  }, [r, (F = n == null ? void 0 : n.user) == null ? void 0 : F.id]);
+  }, [r, (M = n == null ? void 0 : n.user) == null ? void 0 : M.id]);
   B(() => {
     t && I();
   }, [t, I]);
@@ -561,26 +564,26 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
         C(!1);
       }
     }
-  }, p = async () => {
+  }, O = async () => {
     var k, D, h;
-    if (!(v || !r)) {
+    if (!(b || !r)) {
       o && console.log("[ChannelInfoDialog] Block member", (k = n == null ? void 0 : n.user) == null ? void 0 : k.id), y(!0);
       try {
         await r.blockUser((D = n == null ? void 0 : n.user) == null ? void 0 : D.id), d && await d((h = n == null ? void 0 : n.user) == null ? void 0 : h.id), s();
-      } catch (O) {
-        console.error("[ChannelInfoDialog] Failed to block member", O);
+      } catch (U) {
+        console.error("[ChannelInfoDialog] Failed to block member", U);
       } finally {
         y(!1);
       }
     }
   }, E = async () => {
     var k, D, h;
-    if (!(v || !r)) {
+    if (!(b || !r)) {
       o && console.log("[ChannelInfoDialog] Unblock member", (k = n == null ? void 0 : n.user) == null ? void 0 : k.id), y(!0);
       try {
         await r.unBlockUser((D = n == null ? void 0 : n.user) == null ? void 0 : D.id), d && await d((h = n == null ? void 0 : n.user) == null ? void 0 : h.id), s();
-      } catch (O) {
-        console.error("[ChannelInfoDialog] Failed to unblock member", O);
+      } catch (U) {
+        console.error("[ChannelInfoDialog] Failed to unblock member", U);
       } finally {
         y(!1);
       }
@@ -599,11 +602,11 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
     /* @__PURE__ */ e(
       "dialog",
       {
-        ref: b,
+        ref: w,
         className: "mes-dialog",
         onClose: s,
         onClick: (k) => {
-          k.target === b.current && s();
+          k.target === w.current && s();
         },
         children: /* @__PURE__ */ i("div", { className: "ml-auto flex h-full w-full flex-col bg-white shadow-max-elevation-light", children: [
           /* @__PURE__ */ i("div", { className: "flex items-center justify-between border-b border-sand px-4 py-3", children: [
@@ -644,21 +647,21 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
                 X,
                 {
                   onClick: E,
-                  disabled: v,
-                  "aria-busy": v,
+                  disabled: b,
+                  "aria-busy": b,
                   children: [
-                    v ? /* @__PURE__ */ e(Q, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(te, { className: "h-5 w-5" }),
+                    b ? /* @__PURE__ */ e(Q, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(te, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Unblock" })
                   ]
                 }
               ) : /* @__PURE__ */ i(
                 X,
                 {
-                  onClick: p,
-                  disabled: v,
-                  "aria-busy": v,
+                  onClick: O,
+                  disabled: b,
+                  "aria-busy": b,
                   children: [
-                    v ? /* @__PURE__ */ e(Q, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(te, { className: "h-5 w-5" }),
+                    b ? /* @__PURE__ */ e(Q, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(te, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Block" })
                   ]
                 }
@@ -673,7 +676,7 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
       }
     )
   );
-}, Fe = ({
+}, Me = ({
   channel: t,
   onBack: s,
   showBackButton: n = !1,
@@ -682,7 +685,7 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
   onBlockParticipant: m,
   className: d
 }) => {
-  const [r, o] = w(!1), b = $.useMemo(() => Object.values(t.state.members || {}).find(
+  const [r, o] = v(!1), w = $.useMemo(() => Object.values(t.state.members || {}).find(
     (c) => {
       var C;
       return ((C = c.user) == null ? void 0 : C.id) && c.user.id !== t._client.userID;
@@ -691,31 +694,31 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
     const g = t.data ?? {};
     return g.followerStatus ? String(g.followerStatus) : g.isFollower ? "Subscribed to you" : void 0;
   }, [t.data]);
-  return /* @__PURE__ */ i("div", { className: L("h-full flex flex-col", d), children: [
+  return /* @__PURE__ */ i("div", { className: F("h-full flex flex-col", d), children: [
     /* @__PURE__ */ e(Ne, { channel: t, children: /* @__PURE__ */ i(Ce, { children: [
       /* @__PURE__ */ e("div", { className: "border-b border-sand bg-white px-4 py-3", children: /* @__PURE__ */ e(
-        Ue,
+        Le,
         {
           onBack: s,
           showBackButton: n,
           onShowInfo: () => o(!0),
-          canShowInfo: !!b
+          canShowInfo: !!w
         }
       ) }),
       /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ e(be, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }) }),
       /* @__PURE__ */ e(
-        Oe,
+        Ue,
         {
           renderActions: () => l == null ? void 0 : l(t)
         }
       )
     ] }) }),
     /* @__PURE__ */ e(
-      Le,
+      Fe,
       {
         isOpen: r,
         onClose: () => o(!1),
-        participant: b,
+        participant: w,
         channel: t,
         followerStatusLabel: x,
         onLeaveConversation: a,
@@ -724,7 +727,7 @@ const Oe = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
     )
   ] });
 };
-function Me({
+function pe({
   searchQuery: t,
   setSearchQuery: s,
   placeholder: n
@@ -772,9 +775,9 @@ const je = ({
   searchPlaceholder: m = "Search participants...",
   className: d
 }) => {
-  const { debug: r } = Z(), [o, b] = w(""), [x, g] = w([]), [c, C] = w(!1), [v, y] = w(null), [I, P] = w(
+  const { debug: r } = Z(), [o, w] = v(""), [x, g] = v([]), [c, C] = v(!1), [b, y] = v(null), [I, P] = v(
     null
-  ), p = A(!1);
+  ), O = A(!1);
   B(() => {
     if (t.loading) {
       r && console.log(
@@ -782,7 +785,7 @@ const je = ({
       );
       return;
     }
-    if (p.current) return;
+    if (O.current) return;
     (async () => {
       r && console.log("[ParticipantPicker] Loading initial participants..."), C(!0), y(null);
       try {
@@ -791,7 +794,7 @@ const je = ({
           // Load all participants initially
           limit: 100
         });
-        g(f.participants), p.current = !0, r && console.log(
+        g(f.participants), O.current = !0, r && console.log(
           "[ParticipantPicker] Participants loaded successfully:",
           f.participants.length
         );
@@ -808,7 +811,7 @@ const je = ({
     if (!o) return !0;
     const f = o.toLowerCase();
     return u.name.toLowerCase().includes(f) || ((N = u.email) == null ? void 0 : N.toLowerCase().includes(f)) || !1;
-  }), R = U(
+  }), R = L(
     async (u) => {
       if (!I) {
         P(u.id);
@@ -823,7 +826,7 @@ const je = ({
   ), T = (u, f) => {
     (u.key === "Enter" || u.key === " ") && (u.preventDefault(), R(f));
   };
-  return /* @__PURE__ */ i("div", { className: L("flex flex-col h-full", d), children: [
+  return /* @__PURE__ */ i("div", { className: F("flex flex-col h-full", d), children: [
     /* @__PURE__ */ i("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: [
       /* @__PURE__ */ i("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" }),
@@ -838,19 +841,19 @@ const je = ({
         t.totalCount !== void 0 && ` • ${t.totalCount} ${a} total`
       ] }),
       /* @__PURE__ */ e(
-        Me,
+        pe,
         {
           searchQuery: o,
-          setSearchQuery: b,
+          setSearchQuery: w,
           placeholder: m
         }
       )
     ] }),
-    v && /* @__PURE__ */ i("div", { className: "p-4 text-sm text-danger bg-danger-alt", children: [
+    b && /* @__PURE__ */ i("div", { className: "p-4 text-sm text-danger bg-danger-alt", children: [
       "Error loading ",
       a,
       ": ",
-      v
+      b
     ] }),
     /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: c && E.length === 0 ? /* @__PURE__ */ e("div", { className: "h-32 flex items-center justify-center", children: /* @__PURE__ */ i("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" }),
@@ -946,7 +949,7 @@ const je = ({
 ] }) }), Be = ({ className: t, message: s }) => /* @__PURE__ */ i(
   "div",
   {
-    className: L("flex items-center justify-center h-full", t),
+    className: F("flex items-center justify-center h-full", t),
     children: [
       /* @__PURE__ */ i("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(
@@ -1001,109 +1004,109 @@ const je = ({
     client: d,
     isConnected: r,
     isLoading: o,
-    error: b,
+    error: w,
     refreshConnection: x,
     debug: g
-  } = Pe(), [c, C] = w(null), [v, y] = w(!1), [I, P] = w(!1), [p, E] = w(/* @__PURE__ */ new Set()), [R, T] = w(0), u = A(null), {
+  } = Pe(), [c, C] = v(null), [b, y] = v(!1), [I, P] = v(!1), [O, E] = v(/* @__PURE__ */ new Set()), [R, T] = v(0), u = A(null), {
     showStartConversation: f = !1,
     participantSource: N,
     participantLabel: S = "participants"
-  } = t, j = A(null), F = U(async () => {
+  } = t, j = A(null), M = L(async () => {
     if (!d || !r) return;
     const h = d.userID;
     if (h)
       try {
         g && console.log("[MessagingShell] Syncing channels for user:", h);
-        const O = await d.queryChannels(
+        const U = await d.queryChannels(
           {
             type: "messaging",
             members: { $in: [h] }
           },
           {},
           { limit: 100 }
-        ), M = /* @__PURE__ */ new Set();
-        O.forEach((J) => {
+        ), p = /* @__PURE__ */ new Set();
+        U.forEach((J) => {
           const ce = J.state.members;
           Object.values(ce).forEach((de) => {
             var ee;
             const K = (ee = de.user) == null ? void 0 : ee.id;
-            K && K !== h && M.add(K);
+            K && K !== h && p.add(K);
           });
-        }), E(M), y(O.length > 0), j.current = h, g && console.log("[MessagingShell] Channels synced successfully:", {
-          channelCount: O.length,
-          memberCount: M.size
+        }), E(p), y(U.length > 0), j.current = h, g && console.log("[MessagingShell] Channels synced successfully:", {
+          channelCount: U.length,
+          memberCount: p.size
         });
-      } catch (O) {
-        console.error("[MessagingShell] Failed to sync channels:", O);
+      } catch (U) {
+        console.error("[MessagingShell] Failed to sync channels:", U);
       }
   }, [d, r, g]);
   B(() => {
     if (!d || !r) return;
     const h = d.userID;
-    h && j.current !== h && F();
-  }, [d, r, F]);
-  const H = U(
+    h && j.current !== h && M();
+  }, [d, r, M]);
+  const H = L(
     (h) => {
       C(h), l == null || l(h);
     },
     [l]
-  ), V = U(() => {
+  ), V = L(() => {
     C(null);
-  }, []), _ = U(() => {
+  }, []), _ = L(() => {
     var h;
-    N && (T((O) => O + 1), P(!0), (h = u.current) == null || h.showModal());
-  }, [N]), W = U(
+    N && (T((U) => U + 1), P(!0), (h = u.current) == null || h.showModal());
+  }, [N]), W = L(
     async (h) => {
-      var O;
+      var U;
       if (m)
         try {
           g && console.log(
             "[MessagingShell] Starting conversation with:",
             h.id
           );
-          const M = await m.startChannelWithFollower({
+          const p = await m.startChannelWithParticipant({
             id: h.id,
             name: h.name,
             email: h.email,
             phone: h.phone
           });
           try {
-            await M.show();
+            await p.show();
           } catch (J) {
             console.warn("[MessagingShell] Failed to unhide channel:", J);
           }
-          C(M), P(!1), (O = u.current) == null || O.close(), a == null || a(h);
-        } catch (M) {
-          console.error("[MessagingShell] Failed to start conversation:", M);
+          C(p), P(!1), (U = u.current) == null || U.close(), a == null || a(h);
+        } catch (p) {
+          console.error("[MessagingShell] Failed to start conversation:", p);
         }
     },
     [m, a, g]
-  ), G = U(() => {
+  ), G = L(() => {
     var h;
     P(!1), (h = u.current) == null || h.close();
-  }, []), z = U(
+  }, []), z = L(
     async (h) => {
-      g && console.log("[MessagingShell] Leaving conversation:", h.id), C(null), j.current = null, await F();
+      g && console.log("[MessagingShell] Leaving conversation:", h.id), C(null), j.current = null, await M();
     },
-    [F, g]
-  ), k = U(
+    [M, g]
+  ), k = L(
     async (h) => {
-      g && console.log("[MessagingShell] Blocking participant:", h), C(null), j.current = null, await F();
+      g && console.log("[MessagingShell] Blocking participant:", h), C(null), j.current = null, await M();
     },
-    [F, g]
+    [M, g]
   ), D = !!c;
-  return o ? /* @__PURE__ */ e("div", { className: L("h-full", s), children: /* @__PURE__ */ e(He, {}) }) : b ? /* @__PURE__ */ e("div", { className: L("h-full", s), children: /* @__PURE__ */ e(le, { error: b, onRetry: x }) }) : !r || !d ? /* @__PURE__ */ e("div", { className: L("h-full", s), children: /* @__PURE__ */ e(
+  return o ? /* @__PURE__ */ e("div", { className: F("h-full", s), children: /* @__PURE__ */ e(He, {}) }) : w ? /* @__PURE__ */ e("div", { className: F("h-full", s), children: /* @__PURE__ */ e(le, { error: w, onRetry: x }) }) : !r || !d ? /* @__PURE__ */ e("div", { className: F("h-full", s), children: /* @__PURE__ */ e(
     le,
     {
       error: "Not connected to messaging service",
       onRetry: x
     }
-  ) }) : /* @__PURE__ */ i("div", { className: L("h-full bg-white overflow-hidden", s), children: [
+  ) }) : /* @__PURE__ */ i("div", { className: F("h-full bg-white overflow-hidden", s), children: [
     /* @__PURE__ */ i("div", { className: "flex h-full min-h-0", children: [
       /* @__PURE__ */ e(
         "div",
         {
-          className: L(
+          className: F(
             "min-h-0 min-w-0 bg-white lg:bg-chalk lg:flex lg:flex-col lg:border-r lg:border-sand",
             {
               "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": D,
@@ -1111,7 +1114,7 @@ const je = ({
             }
           ),
           children: /* @__PURE__ */ e(
-            pe,
+            Oe,
             {
               onChannelSelect: H,
               selectedChannel: c || void 0,
@@ -1125,12 +1128,12 @@ const je = ({
       /* @__PURE__ */ e(
         "div",
         {
-          className: L("flex-1 flex-col min-w-0 min-h-0", {
+          className: F("flex-1 flex-col min-w-0 min-h-0", {
             "hidden lg:flex": !D,
             flex: D
           }),
           children: c ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
-            Fe,
+            Me,
             {
               channel: c,
               onBack: V,
@@ -1143,7 +1146,7 @@ const je = ({
           ) }) : /* @__PURE__ */ e(
             Ae,
             {
-              hasChannels: v,
+              hasChannels: b,
               onStartConversation: f ? _ : void 0,
               participantLabel: S
             }
@@ -1167,7 +1170,7 @@ const je = ({
             participantSource: N,
             onSelectParticipant: W,
             onClose: G,
-            existingParticipantIds: p,
+            existingParticipantIds: O,
             participantLabel: S,
             searchPlaceholder: `Search ${S}...`
           },
@@ -1177,30 +1180,30 @@ const je = ({
     )
   ] });
 }, Ze = (t, s = {}) => {
-  const { initialSearch: n = "", pageSize: l = 20 } = s, [a, m] = w([]), [d, r] = w(!1), [o, b] = w(null), [x, g] = w(n), [c, C] = w(!0), [v, y] = w(), I = U(async (R = !1, T) => {
+  const { initialSearch: n = "", pageSize: l = 20 } = s, [a, m] = v([]), [d, r] = v(!1), [o, w] = v(null), [x, g] = v(n), [c, C] = v(!0), [b, y] = v(), I = L(async (R = !1, T) => {
     if (d) return;
     const u = T !== void 0 ? T : x;
-    r(!0), b(null);
+    r(!0), w(null);
     try {
       const f = await t.loadParticipants({
         search: u || void 0,
         limit: l,
-        cursor: R ? void 0 : v
+        cursor: R ? void 0 : b
       });
       m(
         (N) => R ? f.participants : [...N, ...f.participants]
       ), C(f.hasMore), y(f.nextCursor);
     } catch (f) {
       const N = f instanceof Error ? f.message : "Failed to load participants";
-      b(N), console.error("[useParticipants] Load error:", f);
+      w(N), console.error("[useParticipants] Load error:", f);
     } finally {
       r(!1);
     }
-  }, [t, x, v, l, d]), P = U(() => {
+  }, [t, x, b, l, d]), P = L(() => {
     c && !d && I(!1);
-  }, [c, d, I]), p = U((R) => {
+  }, [c, d, I]), O = L((R) => {
     g(R), y(void 0), I(!0, R);
-  }, [I]), E = U(() => {
+  }, [I]), E = L(() => {
     y(void 0), I(!0);
   }, [I]);
   return B(() => {
@@ -1213,14 +1216,14 @@ const je = ({
     hasMore: c,
     totalCount: t.totalCount,
     loadMore: P,
-    search: p,
+    search: O,
     refresh: E
   };
 };
 export {
   Y as Avatar,
-  pe as ChannelList,
-  Fe as ChannelView,
+  Oe as ChannelList,
+  Me as ChannelView,
   Xe as MessagingProvider,
   Qe as MessagingShell,
   je as ParticipantPicker,