@linktr.ee/messaging-react 1.6.2 → 1.6.4-rc-1761883235

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 ve, useContext as we, useCallback as U, useState as E, useRef as H, useEffect as G } from "react";
-import { StreamChatService as Ee } from "@linktr.ee/messaging-core";
-import { Chat as Ie, useChatContext as ye, ChannelList as Se, Channel as Re, useChannelStateContext as ue, Window as ke, MessageList as Te, MessageInput as Pe } from "stream-chat-react";
-import { NotePencilIcon as De, XIcon as me, ArrowLeftIcon as Me, DotsThreeIcon as Oe, SpinnerGapIcon as ee, SignOutIcon as Ue, ProhibitInsetIcon as ie, FlagIcon as Fe, MagnifyingGlassIcon as pe, ChatCircleDotsIcon as ce } from "@phosphor-icons/react";
-const he = ve({
+import X, { createContext as we, useContext as Ee, useCallback as F, useState as E, useRef as H, useEffect as G } 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({
   service: null,
   client: null,
   isConnected: !1,
@@ -15,172 +15,172 @@ const he = ve({
   refreshConnection: async () => {
   },
   debug: !1
-}), se = () => we(he), ts = ({
+}), se = () => Ee(fe), ls = ({
   children: t,
   user: s,
   serviceConfig: n,
-  apiKey: l,
+  apiKey: o,
   capabilities: i = {},
   customization: c = {},
   debug: a = !1
 }) => {
-  const o = U(
-    (w, ...M) => {
-      a && console.log(`🔥 [MessagingProvider] ${w}`, ...M);
+  const l = F(
+    (w, ...O) => {
+      a && console.log(`🔥 [MessagingProvider] ${w}`, ...O);
     },
     [a]
   );
-  o("🔄 RENDER START", {
+  l("🔄 RENDER START", {
     userId: s == null ? void 0 : s.id,
-    apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
+    apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
     serviceConfig: !!n,
     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), O = H(!1), y = H({
+  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({
     userId: s == null ? void 0 : s.id,
-    apiKey: l,
+    apiKey: o,
     serviceConfig: n,
     capabilities: i,
     customization: c
   }), k = H(0);
-  k.current++, o("📊 RENDER INFO", {
+  k.current++, l("📊 RENDER INFO", {
     renderCount: k.current,
-    currentProps: { userId: s == null ? void 0 : s.id, apiKey: (l == null ? void 0 : l.substring(0, 8)) + "..." },
+    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 !== l,
+      apiKeyChanged: y.current.apiKey !== o,
       serviceConfigChanged: y.current.serviceConfig !== n,
       capabilitiesChanged: y.current.capabilities !== i,
       customizationChanged: y.current.customization !== c
     }
   }), y.current = {
     userId: s == null ? void 0 : s.id,
-    apiKey: l,
+    apiKey: o,
     serviceConfig: n,
     capabilities: i,
     customization: c
   }, G(() => {
     const w = k.current;
-    if (o("🔧 SERVICE INIT EFFECT TRIGGERED", {
+    if (l("🔧 SERVICE INIT EFFECT TRIGGERED", {
       renderCount: w,
-      apiKey: !!l,
+      apiKey: !!o,
       serviceConfig: !!n,
       dependencies: {
-        apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
+        apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
         serviceConfigRef: n,
         serviceConfigStable: y.current.serviceConfig === n,
-        apiKeyStable: y.current.apiKey === l
+        apiKeyStable: y.current.apiKey === o
       }
-    }), !l || !n) {
-      o("⚠️ SERVICE INIT SKIPPED", {
+    }), !o || !n) {
+      l("⚠️ SERVICE INIT SKIPPED", {
         renderCount: w,
         reason: "Missing apiKey or serviceConfig"
       });
       return;
     }
-    o("🚀 CREATING NEW SERVICE", {
+    l("🚀 CREATING NEW SERVICE", {
       renderCount: w,
-      apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
+      apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
       serviceConfigChanged: y.current.serviceConfig !== n
     });
-    const M = new Ee({
+    const O = new Ie({
       ...n,
-      apiKey: l,
+      apiKey: o,
       debug: a
     });
-    return b(M), o("✅ SERVICE SET", {
+    return b(O), l("✅ SERVICE SET", {
       renderCount: w,
-      serviceInstance: !!M
+      serviceInstance: !!O
     }), () => {
-      o("🧹 SERVICE CLEANUP", {
+      l("🧹 SERVICE CLEANUP", {
         renderCount: w,
         reason: "Effect cleanup"
-      }), M.disconnectUser().catch(console.error);
+      }), O.disconnectUser().catch(console.error);
     };
-  }, [l, n, a, o]);
+  }, [o, n, a, l]);
   const T = H(null);
   G(() => {
-    var M, p;
-    if (o("🔗 USER CONNECTION EFFECT TRIGGERED", {
+    var O, L;
+    if (l("🔗 USER CONNECTION EFFECT TRIGGERED", {
       hasService: !!r,
       hasUser: !!s,
       userId: s == null ? void 0 : s.id,
-      isConnecting: O.current,
+      isConnecting: M.current,
       isConnected: m,
       dependencies: { service: !!r, userId: s == null ? void 0 : s.id }
     }), !r || !s) {
-      o("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
+      l("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    if (O.current) {
-      o("⚠️ USER CONNECTION SKIPPED", "Already connecting");
+    if (M.current) {
+      l("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
-    if (((M = T.current) == null ? void 0 : M.serviceId) === r && ((p = T.current) == null ? void 0 : p.userId) === s.id) {
-      o(
+    if (((O = T.current) == null ? void 0 : O.serviceId) === r && ((L = T.current) == null ? void 0 : L.userId) === s.id) {
+      l(
         "⚠️ USER CONNECTION SKIPPED",
         "Already connected this user with this service"
       );
       return;
     }
     (async () => {
-      o("🚀 STARTING USER CONNECTION", { userId: s.id }), O.current = !0, h(!0), S(null);
+      l("🚀 STARTING USER CONNECTION", { userId: s.id }), M.current = !0, h(!0), S(null);
       try {
-        o("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
-        const L = await r.connectUser(s);
-        g(L), I(!0), T.current = { serviceId: r, userId: s.id }, o("✅ USER CONNECTION SUCCESS", {
+        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", {
           userId: s.id,
-          clientId: L.userID
+          clientId: p.userID
         });
-      } catch (L) {
-        const $ = L instanceof Error ? L.message : "Connection failed";
-        S($), o("❌ USER CONNECTION ERROR", {
+      } catch (p) {
+        const $ = p instanceof Error ? p.message : "Connection failed";
+        S($), l("❌ USER CONNECTION ERROR", {
           userId: s.id,
           error: $
         });
       } finally {
-        h(!1), O.current = !1, o("🔄 USER CONNECTION FINISHED", {
+        h(!1), M.current = !1, l("🔄 USER CONNECTION FINISHED", {
           userId: s.id,
           isConnected: m
         });
       }
     })();
-  }, [r, s, o, m]), G(() => (o("🔌 CLEANUP EFFECT REGISTERED", {
+  }, [r, s, l, m]), G(() => (l("🔌 CLEANUP EFFECT REGISTERED", {
     hasService: !!r,
     isConnected: m
   }), () => {
-    r && m ? (o(
+    r && m ? (l(
       "🧹 CLEANUP EFFECT TRIGGERED",
       "Cleaning up connection on unmount"
-    ), T.current = null, r.disconnectUser().catch(console.error)) : o("🔇 CLEANUP EFFECT SKIPPED", {
+    ), T.current = null, r.disconnectUser().catch(console.error)) : l("🔇 CLEANUP EFFECT SKIPPED", {
       hasService: !!r,
       isConnected: m
     });
-  }), [r, m, o]);
-  const f = U(async () => {
-    if (o("🔄 REFRESH CONNECTION CALLED", {
+  }), [r, m, l]);
+  const f = F(async () => {
+    if (l("🔄 REFRESH CONNECTION CALLED", {
       hasService: !!r,
       hasUser: !!s
     }), !r || !s) {
-      o("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
+      l("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    o("🚀 STARTING CONNECTION REFRESH", { userId: s.id }), h(!0);
+    l("🚀 STARTING CONNECTION REFRESH", { userId: s.id }), h(!0);
     try {
-      o("🔌 DISCONNECTING FOR REFRESH"), await r.disconnectUser(), o("📞 RECONNECTING FOR REFRESH");
+      l("🔌 DISCONNECTING FOR REFRESH"), await r.disconnectUser(), l("📞 RECONNECTING FOR REFRESH");
       const w = await r.connectUser(s);
-      g(w), I(!0), S(null), o("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
+      g(w), I(!0), S(null), l("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
     } catch (w) {
-      const M = w instanceof Error ? w.message : "Refresh failed";
-      S(M), o("❌ CONNECTION REFRESH ERROR", {
+      const O = w instanceof Error ? w.message : "Refresh failed";
+      S(O), l("❌ CONNECTION REFRESH ERROR", {
         userId: s.id,
-        error: M
+        error: O
       });
     } finally {
-      h(!1), o("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
+      h(!1), l("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
     }
-  }, [r, s, o]), x = X.useMemo(() => (o("💫 CONTEXT VALUE MEMOIZATION", {
+  }, [r, s, l]), x = X.useMemo(() => (l("💫 CONTEXT VALUE MEMOIZATION", {
     hasService: !!r,
     hasClient: !!u,
     isConnected: m,
@@ -208,15 +208,15 @@ const he = ve({
     c,
     f,
     a,
-    o
+    l
   ]);
-  return o("🔄 RENDER END", {
+  return l("🔄 RENDER END", {
     renderCount: k.current,
     willRenderChat: !!(u && m),
     contextValueReady: !!x
-  }), /* @__PURE__ */ e(he.Provider, { value: x, children: u && m ? /* @__PURE__ */ e(Ie, { client: u, children: t }) : t });
-}, Le = () => se();
-function ne({ label: t, className: s, children: n, ...l }) {
+  }), /* @__PURE__ */ e(fe.Provider, { value: x, children: u && m ? /* @__PURE__ */ e(ye, { client: u, children: t }) : t });
+}, je = () => se();
+function ne({ label: t, className: s, children: n, ...o }) {
   return /* @__PURE__ */ d(
     "button",
     {
@@ -224,12 +224,12 @@ function ne({ label: t, className: s, children: n, ...l }) {
       className: D(
         "rounded-full p-2 transition-colors focus-ring",
         {
-          "cursor-not-allowed opacity-50": l.disabled,
-          "hover:bg-sand": !l.disabled
+          "cursor-not-allowed opacity-50": o.disabled,
+          "hover:bg-sand": !o.disabled
         },
         s
       ),
-      ...l,
+      ...o,
       children: [
         /* @__PURE__ */ e("span", { className: "sr-only", children: t }),
         n
@@ -237,59 +237,65 @@ function ne({ label: t, className: s, children: n, ...l }) {
     }
   );
 }
-function je(t) {
-  const s = [
-    { 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 i = 0; i < t.length; i++)
-    n = (n << 5) - n + t.charCodeAt(i), n = n & n;
-  const l = Math.abs(n) % s.length;
-  return s[l];
+const de = [
+  "🍎",
+  // Apple
+  "🍌",
+  // Banana
+  "🍇",
+  // Grape
+  "🍊",
+  // Orange
+  "🍓",
+  // Strawberry
+  "🥥",
+  // Coconut
+  "🍒",
+  // Cherry
+  "🥭",
+  // Mango
+  "🍉",
+  // Watermelon
+  "🍋",
+  // Lemon
+  "🥝",
+  // Kiwi
+  "🫒",
+  // Olive
+  "🍈"
+  // Melon
+];
+function Ae(t) {
+  let s = 0;
+  for (let n = 0; n < t.length; n++) {
+    const o = t.charCodeAt(n);
+    s = (s << 5) - s + o, s = s & s;
+  }
+  return Math.abs(s);
+}
+function Be(t) {
+  const n = Ae(t) % de.length;
+  return de[n];
 }
-const Y = ({
+const J = ({
   id: t,
-  name: s,
-  image: n,
-  size: l = 40,
-  className: i
+  image: s,
+  size: n = 40,
+  className: o
 }) => {
-  const { color: c } = je(t), a = s.charAt(0).toUpperCase(), r = l < 32 ? "text-xs" : l < 56 ? "text-sm" : "text-lg";
+  const i = Be(t), c = "#FBFAF9", l = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg";
   return /* @__PURE__ */ e(
     "div",
     {
       className: D(
-        "flex-shrink-0 overflow-hidden rounded-full",
-        i
+        "flex-shrink-0 overflow-hidden rounded-lg",
+        o
       ),
-      style: { width: `${l}px`, height: `${l}px` },
-      children: n ? /* @__PURE__ */ e(
+      style: { width: `${n}px`, height: `${n}px` },
+      children: s ? /* @__PURE__ */ e(
         "img",
         {
-          src: n,
+          src: s,
           alt: "",
           className: "h-full w-full object-cover aspect-square"
         }
@@ -298,20 +304,20 @@ const Y = ({
         {
           "aria-hidden": "true",
           className: D(
-            "flex h-full w-full items-center justify-center font-semibold",
-            r
+            "flex h-full w-full items-center justify-center font-semibold rounded-sm",
+            l
           ),
           style: {
             color: c,
-            backgroundColor: `color-mix(in srgb, ${c} 20%, transparent)`
+            backgroundColor: `color-mix(in srgb, ${c} 60%, solid)`
           },
-          children: a
+          children: i
         }
       )
     }
   );
-}, Ae = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: l = !1, unread: i }) => {
-  var h, v, S, O, y, k;
+}, He = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: o = !1, unread: i }) => {
+  var h, v, S, M, y, 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(
@@ -319,11 +325,11 @@ const Y = ({
       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);
     }
-  ), 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 = (O = t == null ? void 0 : t.state) == null ? void 0 : O.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 = (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([], {
     hour: "2-digit",
     minute: "2-digit"
   }) : "", N = i ?? 0;
-  return l && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+  return o && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
     channelId: t == null ? void 0 : t.id,
     isSelected: c,
     participantName: b,
@@ -343,7 +349,7 @@ const Y = ({
       ),
       children: /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
-          Y,
+          J,
           {
             id: ((k = r == null ? void 0 : r.user) == null ? void 0 : k.id) || t.id || "unknown",
             name: b,
@@ -373,26 +379,26 @@ const Y = ({
       ] })
     }
   );
-}, Be = ({
+}, Ge = ({
   onChannelSelect: t,
   selectedChannel: s,
   showStartConversation: n = !1,
-  onStartConversation: l,
+  onStartConversation: o,
   participantLabel: i = "participants",
   className: c
 }) => {
   var u;
   const a = X.useRef(0);
   a.current++;
-  const { debug: o = !1 } = se();
-  o && console.log("📺 [ChannelList] 🔄 RENDER START", {
+  const { debug: l = !1 } = se();
+  l && console.log("📺 [ChannelList] 🔄 RENDER START", {
     renderCount: a.current,
     selectedChannelId: s == null ? void 0 : s.id,
     showStartConversation: n,
     participantLabel: i
   });
-  const { client: r } = ye();
-  o && console.log("📺 [ChannelList] 📡 CHAT CONTEXT", {
+  const { client: r } = Se();
+  l && console.log("📺 [ChannelList] 📡 CHAT CONTEXT", {
     renderCount: a.current,
     hasClient: !!r,
     clientUserId: r == null ? void 0 : r.userID,
@@ -400,12 +406,12 @@ const Y = ({
   });
   const b = X.useMemo(() => {
     const g = r.userID, m = g ? { type: "messaging", members: { $in: [g] }, hidden: !1 } : { type: "messaging" };
-    return o && console.log("📺 [ChannelList] 🔍 FILTERS MEMOIZED", {
+    return l && console.log("📺 [ChannelList] 🔍 FILTERS MEMOIZED", {
       renderCount: a.current,
       userId: g,
       filters: m
     }), m;
-  }, [r.userID, o]);
+  }, [r.userID, l]);
   return /* @__PURE__ */ d(
     "div",
     {
@@ -416,40 +422,40 @@ const Y = ({
       children: [
         /* @__PURE__ */ e("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-3 min-h-10 min-w-0", children: [
           /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-charcoal", children: "Conversations" }),
-          /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: n && l && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: n && o && /* @__PURE__ */ e(
             ne,
             {
               label: "Start a new conversation",
-              onClick: l,
+              onClick: o,
               className: "inline-flex size-10 items-center justify-center",
-              children: /* @__PURE__ */ e(De, { className: "h-5 w-5" })
+              children: /* @__PURE__ */ e(Oe, { className: "h-5 w-5" })
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (o && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
+        /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (l && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
           renderCount: a.current,
           filters: b,
           hasClient: !!r,
           clientUserId: r == null ? void 0 : r.userID
         }), /* @__PURE__ */ e(
-          Se,
+          Re,
           {
             filters: b,
             sort: { last_message_at: -1 },
             options: { limit: 30 },
             Preview: (g) => {
               var m, I;
-              return o && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+              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)
               }), /* @__PURE__ */ e(
-                Ae,
+                He,
                 {
                   ...g,
                   selectedChannel: s,
                   onChannelSelect: t,
-                  debug: o
+                  debug: l
                 }
               );
             }
@@ -462,7 +468,7 @@ const Y = ({
   variant: t = "default",
   className: s,
   children: n,
-  ...l
+  ...o
 }) => /* @__PURE__ */ e(
   "button",
   {
@@ -472,24 +478,24 @@ const Y = ({
       t === "danger" ? "text-danger hover:bg-danger/50" : "text-charcoal hover:bg-sand",
       s
     ),
-    ...l,
+    ...o,
     children: n
   }
 );
-function fe({ onClick: t }) {
-  return /* @__PURE__ */ e(ne, { label: "Close", onClick: t, className: "p-1", children: /* @__PURE__ */ e(me, { className: "h-5 w-5 text-stone", weight: "bold" }) });
+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 He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "message-input flex items-center gap-2 p-4", children: [
+const $e = ({ 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(Pe, { focus: !0, maxRows: 4 }) })
-] }), Ge = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: l }) => {
+  /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(De, { focus: !0, maxRows: 4 }) })
+] }), _e = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: o }) => {
   var r, b, u, g;
-  const { channel: i } = ue(), c = X.useMemo(() => Object.values(i.state.members || {}).find(
+  const { channel: i } = me(), c = X.useMemo(() => Object.values(i.state.members || {}).find(
     (I) => {
       var N;
       return ((N = I.user) == null ? void 0 : N.id) && I.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", o = (u = c == null ? void 0 : c.user) == null ? void 0 : u.image;
+  ), [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: [
     /* @__PURE__ */ d("div", { className: "flex items-center gap-3 min-w-0", children: [
       s && t && /* @__PURE__ */ e(
@@ -503,38 +509,38 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
         }
       ),
       /* @__PURE__ */ e(
-        Y,
+        J,
         {
           id: ((g = c == null ? void 0 : c.user) == null ? void 0 : g.id) || i.id || "unknown",
           name: a,
-          image: o,
+          image: l,
           size: 40
         }
       ),
       /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-charcoal truncate", children: a }) })
     ] }),
-    l && n && /* @__PURE__ */ e(ne, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(Oe, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
+    o && n && /* @__PURE__ */ e(ne, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(Fe, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
   ] });
-}, $e = ({
+}, Ve = ({
   isOpen: t,
   onClose: s,
   participant: n,
-  channel: l,
+  channel: o,
   followerStatusLabel: i,
   onLeaveConversation: c,
   onBlockParticipant: a
 }) => {
-  var L, $, _, V, Q, W, z;
-  const { service: o, debug: r } = se(), b = H(null), [u, g] = E(!1), [m, I] = E(!1), [N, h] = E(!1);
+  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(() => {
     const R = b.current;
     R && (t ? R.showModal() : R.close());
   }, [t]);
-  const v = U(async () => {
+  const v = F(async () => {
     var R;
-    if (!(!o || !((R = n == null ? void 0 : n.user) != null && R.id)))
+    if (!(!l || !((R = n == null ? void 0 : n.user) != null && R.id)))
       try {
-        const A = (await o.getBlockedUsers()).some(
+        const A = (await l.getBlockedUsers()).some(
           (q) => {
             var Z;
             return q.blocked_user_id === ((Z = n == null ? void 0 : n.user) == null ? void 0 : Z.id);
@@ -547,29 +553,29 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
           P
         );
       }
-  }, [o, (L = n == null ? void 0 : n.user) == null ? void 0 : L.id]);
+  }, [l, (p = n == null ? void 0 : n.user) == null ? void 0 : p.id]);
   G(() => {
     t && v();
   }, [t, v]);
   const S = async () => {
     var R;
     if (!m) {
-      r && console.log("[ChannelInfoDialog] Leave conversation", l.cid), I(!0);
+      r && console.log("[ChannelInfoDialog] Leave conversation", o.cid), I(!0);
       try {
-        const P = ((R = l._client) == null ? void 0 : R.userID) ?? null;
-        await l.hide(P, !1), c && await c(l), s();
+        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);
       } finally {
         I(!1);
       }
     }
-  }, O = async () => {
+  }, M = async () => {
     var R, P, A;
-    if (!(N || !o)) {
+    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 o.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((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();
       } catch (q) {
         console.error("[ChannelInfoDialog] Failed to block member", q);
       } finally {
@@ -578,10 +584,10 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
     }
   }, y = async () => {
     var R, P, A;
-    if (!(N || !o)) {
+    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 o.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((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();
       } catch (q) {
         console.error("[ChannelInfoDialog] Failed to unblock member", q);
       } finally {
@@ -596,7 +602,7 @@ const He = ({ 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, M = x || (w ? `linktr.ee/${w}` : void 0), p = ((z = n.user) == null ? void 0 : z.id) || "unknown";
+  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";
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ e(
@@ -611,14 +617,14 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
         children: /* @__PURE__ */ d("div", { className: "ml-auto flex h-full w-full flex-col bg-white shadow-max-elevation-light", children: [
           /* @__PURE__ */ d("div", { className: "flex items-center justify-between border-b border-sand px-4 py-3", children: [
             /* @__PURE__ */ e("h2", { className: "text-base font-semibold text-charcoal", children: "Chat info" }),
-            /* @__PURE__ */ e(fe, { onClick: s })
+            /* @__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__ */ e(
-                Y,
+                J,
                 {
-                  id: p,
+                  id: L,
                   name: T,
                   image: f,
                   size: 64
@@ -626,7 +632,7 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
               ),
               /* @__PURE__ */ d("div", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: T }),
-                M && /* @__PURE__ */ e("p", { className: "truncate text-sm text-stone", children: M }),
+                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 })
               ] })
             ] }) }),
@@ -657,7 +663,7 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
               ) : /* @__PURE__ */ d(
                 K,
                 {
-                  onClick: O,
+                  onClick: M,
                   disabled: N,
                   "aria-busy": N,
                   children: [
@@ -667,7 +673,7 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
                 }
               ) }),
               /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(K, { variant: "danger", onClick: k, children: [
-                /* @__PURE__ */ e(Fe, { className: "h-5 w-5" }),
+                /* @__PURE__ */ e(Le, { className: "h-5 w-5" }),
                 /* @__PURE__ */ e("span", { children: "Report" })
               ] }) })
             ] })
@@ -676,16 +682,16 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
       }
     )
   );
-}, _e = ({
+}, We = ({
   onBack: t,
   showBackButton: s,
   renderMessageInputActions: n,
-  onLeaveConversation: l,
+  onLeaveConversation: o,
   onBlockParticipant: i,
   CustomChannelEmptyState: c
 }) => {
   var m, I;
-  const { channel: a } = ue(), [o, 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(
+  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(
     (h) => {
       var v;
       return ((v = h.user) == null ? void 0 : v.id) && h.user.id !== a._client.userID;
@@ -695,9 +701,9 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
     return N.followerStatus ? String(N.followerStatus) : N.isFollower ? "Subscribed to you" : void 0;
   }, [a.data]);
   return /* @__PURE__ */ d(oe, { children: [
-    /* @__PURE__ */ d(ke, { children: [
+    /* @__PURE__ */ d(Te, { children: [
       /* @__PURE__ */ e("div", { className: "border-b border-sand bg-white px-4 py-3", children: /* @__PURE__ */ e(
-        Ge,
+        _e,
         {
           onBack: t,
           showBackButton: s,
@@ -706,38 +712,38 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
         }
       ) }),
       /* @__PURE__ */ d("div", { className: "flex-1 overflow-hidden relative", children: [
-        /* @__PURE__ */ e(Te, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }),
+        /* @__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(
-        He,
+        $e,
         {
           renderActions: () => n == null ? void 0 : n(a)
         }
       )
     ] }),
     /* @__PURE__ */ e(
-      $e,
+      Ve,
       {
-        isOpen: o,
+        isOpen: l,
         onClose: () => r(!1),
         participant: u,
         channel: a,
         followerStatusLabel: g,
-        onLeaveConversation: l,
+        onLeaveConversation: o,
         onBlockParticipant: i
       }
     )
   ] });
-}, Ve = ({
+}, ze = ({
   channel: t,
   onBack: s,
   showBackButton: n = !1,
-  renderMessageInputActions: l,
+  renderMessageInputActions: o,
   onLeaveConversation: i,
   onBlockParticipant: c,
   className: a,
-  CustomChannelEmptyState: o
+  CustomChannelEmptyState: l
 }) => /* @__PURE__ */ e(
   "div",
   {
@@ -745,25 +751,25 @@ const He = ({ renderActions: t }) => /* @__PURE__ */ d("div", { className: "mess
       "messaging-channel-view h-full flex flex-col",
       a
     ),
-    children: /* @__PURE__ */ e(Re, { channel: t, children: /* @__PURE__ */ e(
-      _e,
+    children: /* @__PURE__ */ e(ke, { channel: t, children: /* @__PURE__ */ e(
+      We,
       {
         onBack: s,
         showBackButton: n,
-        renderMessageInputActions: l,
+        renderMessageInputActions: o,
         onLeaveConversation: i,
         onBlockParticipant: c,
-        CustomChannelEmptyState: o
+        CustomChannelEmptyState: l
       }
     ) })
   }
 );
-function We({
+function qe({
   searchQuery: t,
   setSearchQuery: s,
   placeholder: n
 }) {
-  const l = H(null);
+  const o = H(null);
   return /* @__PURE__ */ d("div", { className: "relative", children: [
     /* @__PURE__ */ e(
       pe,
@@ -775,7 +781,7 @@ function We({
     /* @__PURE__ */ e(
       "input",
       {
-        ref: l,
+        ref: o,
         type: "text",
         placeholder: n,
         value: t,
@@ -789,43 +795,43 @@ function We({
         label: "Clear search",
         onClick: () => {
           var i;
-          s(""), (i = l.current) == null || i.focus();
+          s(""), (i = o.current) == null || i.focus();
         },
         className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-stone hover:text-charcoal",
-        children: /* @__PURE__ */ e(me, { className: "h-4 w-4", weight: "bold" })
+        children: /* @__PURE__ */ e(he, { className: "h-4 w-4", weight: "bold" })
       }
     )
   ] });
 }
-const ze = ({
+const Xe = ({
   participantSource: t,
   onSelectParticipant: s,
   onClose: n,
-  existingParticipantIds: l = /* @__PURE__ */ new Set(),
+  existingParticipantIds: o = /* @__PURE__ */ new Set(),
   participantLabel: i = "participants",
   searchPlaceholder: c = "Search participants...",
   className: a
 }) => {
-  const { debug: o } = 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, I] = E(!1), [N, h] = E(null), [v, S] = E(
     null
-  ), O = H(!1);
+  ), M = H(!1);
   G(() => {
     if (t.loading) {
-      o && console.log(
+      l && console.log(
         "[ParticipantPicker] Waiting for participant source to finish loading..."
       );
       return;
     }
-    if (O.current) return;
+    if (M.current) return;
     (async () => {
-      o && console.log("[ParticipantPicker] Loading initial participants..."), I(!0), h(null);
+      l && console.log("[ParticipantPicker] Loading initial participants..."), I(!0), h(null);
       try {
         const x = await t.loadParticipants({
           search: "",
           // Load all participants initially
           limit: 100
         });
-        g(x.participants), O.current = !0, o && console.log(
+        g(x.participants), M.current = !0, l && console.log(
           "[ParticipantPicker] Participants loaded successfully:",
           x.participants.length
         );
@@ -836,13 +842,13 @@ const ze = ({
         I(!1);
       }
     })();
-  }, [t.loading, o]);
-  const y = u.filter((f) => !l.has(f.id)).filter((f) => {
+  }, [t.loading, l]);
+  const y = 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 = U(
+  }), k = F(
     async (f) => {
       if (!v) {
         S(f.id);
@@ -861,7 +867,7 @@ const ze = ({
     /* @__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" }),
-        /* @__PURE__ */ e(fe, { onClick: n })
+        /* @__PURE__ */ e(ge, { onClick: n })
       ] }),
       /* @__PURE__ */ d("p", { className: "text-xs text-stone mb-3", children: [
         "Select a ",
@@ -872,7 +878,7 @@ const ze = ({
         t.totalCount !== void 0 && ` • ${t.totalCount} ${i} total`
       ] }),
       /* @__PURE__ */ e(
-        We,
+        qe,
         {
           searchQuery: r,
           setSearchQuery: b,
@@ -905,12 +911,12 @@ const ze = ({
           {
             type: "button",
             onClick: () => k(f),
-            onKeyDown: (M) => T(M, f),
+            onKeyDown: (O) => T(O, 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: [
                 /* @__PURE__ */ e(
-                  Y,
+                  J,
                   {
                     id: f.id,
                     name: x,
@@ -934,26 +940,26 @@ const ze = ({
       ] }) })
     ] }) })
   ] });
-}, 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: [
+}, 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: [
   /* @__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: [
     "Choose a conversation from the list or",
     " ",
-    s && /* @__PURE__ */ d(de, { onClick: s, children: [
+    s && /* @__PURE__ */ d(ue, { onClick: s, children: [
       "start a new conversation with a ",
       n.slice(0, -1),
       "."
     ] })
   ] }) : s && /* @__PURE__ */ d(oe, { children: [
-    /* @__PURE__ */ d(de, { onClick: s, children: [
+    /* @__PURE__ */ d(ue, { onClick: s, children: [
       "Start a new conversation with one of your ",
       n
     ] }),
     " ",
     "to begin messaging."
   ] }) })
-] }) }), de = ({
+] }) }), ue = ({
   onClick: t,
   children: s
 }) => /* @__PURE__ */ e(
@@ -977,7 +983,7 @@ const ze = ({
       children: "Go Back"
     }
   )
-] }) }), Xe = ({ className: t, message: s }) => /* @__PURE__ */ d(
+] }) }), Ze = ({ className: t, message: s }) => /* @__PURE__ */ d(
   "div",
   {
     className: D("flex items-center justify-center h-full", t),
@@ -1020,18 +1026,18 @@ const ze = ({
       s && /* @__PURE__ */ e("span", { className: "text-stone", children: s })
     ]
   }
-), Qe = () => /* @__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(Xe, { className: "w-6 h-6" }),
+), 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" }),
   /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
-] }) }), rs = ({
+] }) }), os = ({
   capabilities: t = {},
   className: s,
   renderMessageInputActions: n,
-  onChannelSelect: l,
+  onChannelSelect: o,
   onParticipantSelect: i,
   initialParticipantFilter: c,
   initialParticipantData: a,
-  CustomChannelEmptyState: o,
+  CustomChannelEmptyState: l,
   showChannelList: r = !0
 }) => {
   const {
@@ -1042,11 +1048,11 @@ const ze = ({
     error: I,
     refreshConnection: N,
     debug: h
-  } = Le(), [v, S] = E(null), [O, y] = E(!1), [k, T] = E(!1), [f, x] = E(/* @__PURE__ */ new Set()), [w, M] = E(0), [p, L] = E(!1), [$, _] = E(null), V = H(null), {
+  } = 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), {
     showStartConversation: Q = !1,
     participantSource: W,
     participantLabel: z = "participants"
-  } = t, R = H(null), P = U(async () => {
+  } = t, R = H(null), P = F(async () => {
     if (!u || !g) return;
     const C = u.userID;
     if (C)
@@ -1059,17 +1065,17 @@ const ze = ({
           },
           {},
           { limit: 100 }
-        ), F = /* @__PURE__ */ new Set();
+        ), U = /* @__PURE__ */ new Set();
         j.forEach((B) => {
-          const be = B.state.members;
-          Object.values(be).forEach((Ce) => {
+          const Ce = B.state.members;
+          Object.values(Ce).forEach((ve) => {
             var ae;
-            const re = (ae = Ce.user) == null ? void 0 : ae.id;
-            re && re !== C && F.add(re);
+            const re = (ae = ve.user) == null ? void 0 : ae.id;
+            re && re !== C && U.add(re);
           });
-        }), x(F), y(j.length > 0), R.current = C, h && console.log("[MessagingShell] Channels synced successfully:", {
+        }), x(U), y(j.length > 0), R.current = C, h && console.log("[MessagingShell] Channels synced successfully:", {
           channelCount: j.length,
-          memberCount: F.size
+          memberCount: U.size
         });
       } catch (j) {
         console.error("[MessagingShell] Failed to sync channels:", j);
@@ -1089,7 +1095,7 @@ const ze = ({
             "[MessagingShell] Loading initial conversation with:",
             c
           );
-          const F = await u.queryChannels(
+          const U = await u.queryChannels(
             {
               type: "messaging",
               members: { $eq: [j, c] }
@@ -1097,10 +1103,10 @@ const ze = ({
             {},
             { limit: 1 }
           );
-          if (F.length > 0)
-            S(F[0]), L(!0), _(null), l && l(F[0]), h && console.log(
+          if (U.length > 0)
+            S(U[0]), p(!0), _(null), o && o(U[0]), h && console.log(
               "[MessagingShell] Initial conversation loaded:",
-              F[0].id
+              U[0].id
             );
           else if (a && b) {
             h && console.log(
@@ -1114,7 +1120,7 @@ const ze = ({
                 email: a.email,
                 phone: a.phone
               });
-              S(B), L(!0), _(null), l && l(B), h && console.log(
+              S(B), p(!0), _(null), o && o(B), h && console.log(
                 "[MessagingShell] Channel created and loaded:",
                 B.id
               );
@@ -1131,10 +1137,10 @@ const ze = ({
               "[MessagingShell] No conversation found for:",
               c
             );
-        } catch (F) {
+        } catch (U) {
           console.error(
             "[MessagingShell] Failed to load initial conversation:",
-            F
+            U
           ), _("Failed to load conversation");
         }
     })();
@@ -1145,19 +1151,19 @@ const ze = ({
     g,
     b,
     h,
-    l
+    o
   ]);
-  const A = U(
+  const A = F(
     (C) => {
-      S(C), l == null || l(C);
+      S(C), o == null || o(C);
     },
-    [l]
-  ), q = U(() => {
-    p || S(null);
-  }, [p]), Z = U(() => {
+    [o]
+  ), q = F(() => {
+    L || S(null);
+  }, [L]), Z = F(() => {
     var C;
-    W && (M((j) => j + 1), T(!0), (C = V.current) == null || C.showModal());
-  }, [W]), ge = U(
+    W && (O((j) => j + 1), T(!0), (C = V.current) == null || C.showModal());
+  }, [W]), xe = F(
     async (C) => {
       var j;
       if (b)
@@ -1166,38 +1172,38 @@ const ze = ({
             "[MessagingShell] Starting conversation with:",
             C.id
           );
-          const F = await b.startChannelWithParticipant({
+          const U = await b.startChannelWithParticipant({
             id: C.id,
             name: C.name,
             email: C.email,
             phone: C.phone
           });
           try {
-            await F.show();
+            await U.show();
           } catch (B) {
             console.warn("[MessagingShell] Failed to unhide channel:", B);
           }
-          S(F), T(!1), (j = V.current) == null || j.close(), i == null || i(C);
-        } catch (F) {
-          console.error("[MessagingShell] Failed to start conversation:", F);
+          S(U), T(!1), (j = V.current) == null || j.close(), i == null || i(C);
+        } catch (U) {
+          console.error("[MessagingShell] Failed to start conversation:", U);
         }
     },
     [b, i, h]
-  ), te = U(() => {
+  ), te = F(() => {
     var C;
     T(!1), (C = V.current) == null || C.close();
-  }, []), xe = U(
+  }, []), Ne = F(
     async (C) => {
-      h && console.log("[MessagingShell] Leaving conversation:", C.id), S(null), L(!1), R.current = null, await P();
+      h && console.log("[MessagingShell] Leaving conversation:", C.id), S(null), p(!1), R.current = null, await P();
     },
     [P, h]
-  ), Ne = U(
+  ), be = F(
     async (C) => {
-      h && console.log("[MessagingShell] Blocking participant:", C), S(null), L(!1), R.current = null, await P();
+      h && console.log("[MessagingShell] Blocking participant:", C), S(null), p(!1), R.current = null, await P();
     },
     [P, h]
-  ), J = !!v;
-  return m ? /* @__PURE__ */ e("div", { className: D("h-full", s), children: /* @__PURE__ */ e(Qe, {}) }) : 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(
+  ), 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(
     le,
     {
       message: "Not connected to messaging service",
@@ -1219,15 +1225,15 @@ const ze = ({
                 "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 || p,
+                  "!hidden": r === !1 || L,
                   // 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 && !p && J,
+                  "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": r !== !1 && !L && Y,
                   // Normal mode: show when no channel selected
-                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": r !== !1 && !p && !J
+                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": r !== !1 && !L && !Y
                 }
               ),
               children: /* @__PURE__ */ e(
-                Be,
+                Ge,
                 {
                   onChannelSelect: A,
                   selectedChannel: v || void 0,
@@ -1245,27 +1251,27 @@ const ze = ({
                 "messaging-conversation-view flex-1 flex-col min-w-0 min-h-0",
                 {
                   // In direct conversation mode, always show (full width)
-                  flex: p || J,
+                  flex: L || Y,
                   // Normal mode: hide on mobile when no channel selected
-                  "hidden lg:flex": !p && !J
+                  "hidden lg:flex": !L && !Y
                 }
               ),
               children: v ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
-                Ve,
+                ze,
                 {
                   channel: v,
                   onBack: q,
-                  showBackButton: !p,
+                  showBackButton: !L,
                   renderMessageInputActions: n,
-                  onLeaveConversation: xe,
-                  onBlockParticipant: Ne,
-                  CustomChannelEmptyState: o
+                  onLeaveConversation: Ne,
+                  onBlockParticipant: be,
+                  CustomChannelEmptyState: l
                 },
                 v.id
               ) }) : /* @__PURE__ */ e(
-                qe,
+                Qe,
                 {
-                  hasChannels: O,
+                  hasChannels: M,
                   onStartConversation: Q ? Z : void 0,
                   participantLabel: z
                 }
@@ -1284,10 +1290,10 @@ const ze = ({
             },
             onClose: te,
             children: /* @__PURE__ */ e("div", { className: "h-full w-full bg-white shadow-max-elevation-light", children: /* @__PURE__ */ e(
-              ze,
+              Xe,
               {
                 participantSource: W,
-                onSelectParticipant: ge,
+                onSelectParticipant: xe,
                 onClose: te,
                 existingParticipantIds: f,
                 participantLabel: z,
@@ -1300,11 +1306,11 @@ const ze = ({
       ]
     }
   );
-}, Ze = ({
+}, Ye = ({
   question: t,
   onClick: s,
   loading: n = !1,
-  className: l
+  className: o
 }) => /* @__PURE__ */ e(
   "button",
   {
@@ -1318,23 +1324,23 @@ const ze = ({
         "hover:brightness-95 active:brightness-90": !n,
         "opacity-50 cursor-not-allowed": n
       },
-      l
+      o
     ),
     children: t
   }
-), ls = ({
+), as = ({
   faqs: t,
   onFaqClick: s,
   loadingFaqId: n,
-  headerText: l,
+  headerText: o,
   className: i,
   avatarImage: c,
   avatarName: a
 }) => {
-  const o = t.filter((r) => r.enabled).sort((r, b) => (r.order ?? 0) - (b.order ?? 0));
-  return o.length === 0 ? null : /* @__PURE__ */ e("div", { className: D("px-4 py-6", i), children: /* @__PURE__ */ d("div", { className: "flex gap-3 items-end", children: [
+  const l = t.filter((r) => r.enabled).sort((r, b) => (r.order ?? 0) - (b.order ?? 0));
+  return l.length === 0 ? null : /* @__PURE__ */ e("div", { className: D("px-4 py-6", i), children: /* @__PURE__ */ d("div", { className: "flex gap-3 items-end", children: [
     (c || a) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
-      Y,
+      J,
       {
         id: a || "account",
         name: a || "Account",
@@ -1348,9 +1354,9 @@ const ze = ({
         className: "flex-1 rounded-lg p-4 space-y-3",
         style: { backgroundColor: "#F1F0EE" },
         children: [
-          l && /* @__PURE__ */ e("p", { className: "text-md text-charcoal mb-4", children: l }),
-          o.map((r) => /* @__PURE__ */ e(
-            Ze,
+          o && /* @__PURE__ */ e("p", { className: "text-md text-charcoal mb-4", children: o }),
+          l.map((r) => /* @__PURE__ */ e(
+            Ye,
             {
               question: r.question,
               onClick: () => s(r.id),
@@ -1362,15 +1368,15 @@ const ze = ({
       }
     )
   ] }) });
-}, os = (t, s = {}) => {
-  const { initialSearch: n = "", pageSize: l = 20 } = s, [i, c] = E([]), [a, o] = E(!1), [r, b] = E(null), [u, g] = E(n), [m, I] = E(!0), [N, h] = E(), v = U(async (k = !1, T) => {
+}, 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) => {
     if (a) return;
     const f = T !== void 0 ? T : u;
-    o(!0), b(null);
+    l(!0), b(null);
     try {
       const x = await t.loadParticipants({
         search: f || void 0,
-        limit: l,
+        limit: o,
         cursor: k ? void 0 : N
       });
       c(
@@ -1380,13 +1386,13 @@ const ze = ({
       const w = x instanceof Error ? x.message : "Failed to load participants";
       b(w), console.error("[useParticipants] Load error:", x);
     } finally {
-      o(!1);
+      l(!1);
     }
-  }, [t, u, N, l, a]), S = U(() => {
+  }, [t, u, N, o, a]), S = F(() => {
     m && !a && v(!1);
-  }, [m, a, v]), O = U((k) => {
+  }, [m, a, v]), M = F((k) => {
     g(k), h(void 0), v(!0, k);
-  }, [v]), y = U(() => {
+  }, [v]), y = F(() => {
     h(void 0), v(!0);
   }, [v]);
   return G(() => {
@@ -1399,20 +1405,20 @@ const ze = ({
     hasMore: m,
     totalCount: t.totalCount,
     loadMore: S,
-    search: O,
+    search: M,
     refresh: y
   };
 };
 export {
-  Y as Avatar,
-  Be as ChannelList,
-  Ve as ChannelView,
-  ls as FaqList,
-  Ze as FaqListItem,
-  ts as MessagingProvider,
-  rs as MessagingShell,
-  ze as ParticipantPicker,
-  Le as useMessaging,
-  os as useParticipants
+  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
 };
 //# sourceMappingURL=index.js.map