@linktr.ee/messaging-react 1.3.0 → 1.4.0-rc-1761046174

package/dist/index.js

@@ -1,10 +1,10 @@
-import { jsx as e, jsxs as i, Fragment as se } from "react/jsx-runtime";
-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";
-const ae = ue({
+import { jsx as e, jsxs as c, Fragment as oe } from "react/jsx-runtime";
+import T from "classnames";
+import X, { createContext as xe, useContext as Ne, useCallback as O, useState as v, useRef as H, useEffect as G } from "react";
+import { StreamChatService as Ce } from "@linktr.ee/messaging-core";
+import { Chat as be, useChatContext as ve, ChannelList as we, Channel as Ee, Window as Ie, MessageList as ye, useChannelStateContext as Se, MessageInput as Re } from "stream-chat-react";
+import { NotePencilIcon as ke, XIcon as de, ArrowLeftIcon as De, DotsThreeIcon as Pe, SpinnerGapIcon as J, SignOutIcon as Te, ProhibitInsetIcon as ae, FlagIcon as Oe, MagnifyingGlassIcon as Ue, ChatCircleDotsIcon as ie } from "@phosphor-icons/react";
+const ue = xe({
   service: null,
   client: null,
   isConnected: !1,
@@ -15,229 +15,229 @@ const ae = ue({
   refreshConnection: async () => {
   },
   debug: !1
-}), Z = () => me(ae), Xe = ({
+}), K = () => Ne(ue), Je = ({
   children: t,
   user: s,
-  serviceConfig: n,
-  apiKey: l,
+  serviceConfig: r,
+  apiKey: o,
   capabilities: a = {},
-  customization: m = {},
-  debug: d = !1
+  customization: d = {},
+  debug: h = !1
 }) => {
-  const r = L(
-    (N, ...S) => {
-      d && console.log(`🔥 [MessagingProvider] ${N}`, ...S);
+  const n = O(
+    (C, ...R) => {
+      h && console.log(`🔥 [MessagingProvider] ${C}`, ...R);
     },
-    [d]
+    [h]
   );
-  r("🔄 RENDER START", {
+  n("🔄 RENDER START", {
     userId: s == null ? void 0 : s.id,
-    apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
-    serviceConfig: !!n,
+    apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
+    serviceConfig: !!r,
     capabilities: Object.keys(a),
-    customization: Object.keys(m)
+    customization: Object.keys(d)
   });
-  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({
+  const [l, w] = v(null), [f, b] = v(null), [i, N] = v(!1), [g, y] = v(!1), [E, U] = v(null), D = H(!1), I = H({
     userId: s == null ? void 0 : s.id,
-    apiKey: l,
-    serviceConfig: n,
+    apiKey: o,
+    serviceConfig: r,
     capabilities: a,
-    customization: m
-  }), R = A(0);
-  R.current++, r("📊 RENDER INFO", {
-    renderCount: R.current,
-    currentProps: { userId: s == null ? void 0 : s.id, apiKey: (l == null ? void 0 : l.substring(0, 8)) + "..." },
+    customization: d
+  }), S = H(0);
+  S.current++, n("📊 RENDER INFO", {
+    renderCount: S.current,
+    currentProps: { userId: s == null ? void 0 : s.id, apiKey: (o == null ? void 0 : o.substring(0, 8)) + "..." },
     propChanges: {
-      userChanged: E.current.userId !== (s == null ? void 0 : s.id),
-      apiKeyChanged: E.current.apiKey !== l,
-      serviceConfigChanged: E.current.serviceConfig !== n,
-      capabilitiesChanged: E.current.capabilities !== a,
-      customizationChanged: E.current.customization !== m
+      userChanged: I.current.userId !== (s == null ? void 0 : s.id),
+      apiKeyChanged: I.current.apiKey !== o,
+      serviceConfigChanged: I.current.serviceConfig !== r,
+      capabilitiesChanged: I.current.capabilities !== a,
+      customizationChanged: I.current.customization !== d
     }
-  }), E.current = {
+  }), I.current = {
     userId: s == null ? void 0 : s.id,
-    apiKey: l,
-    serviceConfig: n,
+    apiKey: o,
+    serviceConfig: r,
     capabilities: a,
-    customization: m
-  }, B(() => {
-    const N = R.current;
-    if (r("🔧 SERVICE INIT EFFECT TRIGGERED", {
-      renderCount: N,
-      apiKey: !!l,
-      serviceConfig: !!n,
+    customization: d
+  }, G(() => {
+    const C = S.current;
+    if (n("🔧 SERVICE INIT EFFECT TRIGGERED", {
+      renderCount: C,
+      apiKey: !!o,
+      serviceConfig: !!r,
       dependencies: {
-        apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
-        serviceConfigRef: n,
-        serviceConfigStable: E.current.serviceConfig === n,
-        apiKeyStable: E.current.apiKey === l
+        apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
+        serviceConfigRef: r,
+        serviceConfigStable: I.current.serviceConfig === r,
+        apiKeyStable: I.current.apiKey === o
       }
-    }), !l || !n) {
-      r("⚠️ SERVICE INIT SKIPPED", {
-        renderCount: N,
+    }), !o || !r) {
+      n("⚠️ SERVICE INIT SKIPPED", {
+        renderCount: C,
         reason: "Missing apiKey or serviceConfig"
       });
       return;
     }
-    r("🚀 CREATING NEW SERVICE", {
-      renderCount: N,
-      apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
-      serviceConfigChanged: E.current.serviceConfig !== n
+    n("🚀 CREATING NEW SERVICE", {
+      renderCount: C,
+      apiKey: (o == null ? void 0 : o.substring(0, 8)) + "...",
+      serviceConfigChanged: I.current.serviceConfig !== r
     });
-    const S = new he({
-      ...n,
-      apiKey: l,
-      debug: d
+    const R = new Ce({
+      ...r,
+      apiKey: o,
+      debug: h
     });
-    return w(S), r("✅ SERVICE SET", {
-      renderCount: N,
-      serviceInstance: !!S
+    return w(R), n("✅ SERVICE SET", {
+      renderCount: C,
+      serviceInstance: !!R
     }), () => {
-      r("🧹 SERVICE CLEANUP", {
-        renderCount: N,
+      n("🧹 SERVICE CLEANUP", {
+        renderCount: C,
         reason: "Effect cleanup"
-      }), S.disconnectUser().catch(console.error);
+      }), R.disconnectUser().catch(console.error);
     };
-  }, [l, n, d, r]);
-  const T = A(null);
-  B(() => {
-    var S, j;
-    if (r("🔗 USER CONNECTION EFFECT TRIGGERED", {
-      hasService: !!o,
+  }, [o, r, h, n]);
+  const P = H(null);
+  G(() => {
+    var R, $;
+    if (n("🔗 USER CONNECTION EFFECT TRIGGERED", {
+      hasService: !!l,
       hasUser: !!s,
       userId: s == null ? void 0 : s.id,
-      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");
+      isConnecting: D.current,
+      isConnected: i,
+      dependencies: { service: !!l, userId: s == null ? void 0 : s.id }
+    }), !l || !s) {
+      n("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    if (O.current) {
-      r("⚠️ USER CONNECTION SKIPPED", "Already connecting");
+    if (D.current) {
+      n("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
-    if (((S = T.current) == null ? void 0 : S.serviceId) === o && ((j = T.current) == null ? void 0 : j.userId) === s.id) {
-      r(
+    if (((R = P.current) == null ? void 0 : R.serviceId) === l && (($ = P.current) == null ? void 0 : $.userId) === s.id) {
+      n(
         "⚠️ USER CONNECTION SKIPPED",
         "Already connected this user with this service"
       );
       return;
     }
     (async () => {
-      r("🚀 STARTING USER CONNECTION", { userId: s.id }), O.current = !0, y(!0), P(null);
+      n("🚀 STARTING USER CONNECTION", { userId: s.id }), D.current = !0, y(!0), U(null);
       try {
-        r("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
-        const M = await o.connectUser(s);
-        g(M), C(!0), T.current = { serviceId: o, userId: s.id }, r("✅ USER CONNECTION SUCCESS", {
+        n("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
+        const L = await l.connectUser(s);
+        b(L), N(!0), P.current = { serviceId: l, userId: s.id }, n("✅ USER CONNECTION SUCCESS", {
           userId: s.id,
-          clientId: M.userID
+          clientId: L.userID
         });
-      } catch (M) {
-        const H = M instanceof Error ? M.message : "Connection failed";
-        P(H), r("❌ USER CONNECTION ERROR", {
+      } catch (L) {
+        const _ = L instanceof Error ? L.message : "Connection failed";
+        U(_), n("❌ USER CONNECTION ERROR", {
           userId: s.id,
-          error: H
+          error: _
         });
       } finally {
-        y(!1), O.current = !1, r("🔄 USER CONNECTION FINISHED", {
+        y(!1), D.current = !1, n("🔄 USER CONNECTION FINISHED", {
           userId: s.id,
-          isConnected: c
+          isConnected: i
         });
       }
     })();
-  }, [o, s, r, c]), B(() => (r("🔌 CLEANUP EFFECT REGISTERED", {
-    hasService: !!o,
-    isConnected: c
+  }, [l, s, n, i]), G(() => (n("🔌 CLEANUP EFFECT REGISTERED", {
+    hasService: !!l,
+    isConnected: i
   }), () => {
-    o && c ? (r(
+    l && i ? (n(
       "🧹 CLEANUP EFFECT TRIGGERED",
       "Cleaning up connection on unmount"
-    ), T.current = null, o.disconnectUser().catch(console.error)) : r("🔇 CLEANUP EFFECT SKIPPED", {
-      hasService: !!o,
-      isConnected: c
+    ), P.current = null, l.disconnectUser().catch(console.error)) : n("🔇 CLEANUP EFFECT SKIPPED", {
+      hasService: !!l,
+      isConnected: i
     });
-  }), [o, c, r]);
-  const u = L(async () => {
-    if (r("🔄 REFRESH CONNECTION CALLED", {
-      hasService: !!o,
+  }), [l, i, n]);
+  const m = O(async () => {
+    if (n("🔄 REFRESH CONNECTION CALLED", {
+      hasService: !!l,
       hasUser: !!s
-    }), !o || !s) {
-      r("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
+    }), !l || !s) {
+      n("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    r("🚀 STARTING CONNECTION REFRESH", { userId: s.id }), y(!0);
+    n("🚀 STARTING CONNECTION REFRESH", { userId: s.id }), y(!0);
     try {
-      r("🔌 DISCONNECTING FOR REFRESH"), await o.disconnectUser(), r("📞 RECONNECTING FOR REFRESH");
-      const N = await o.connectUser(s);
-      g(N), C(!0), P(null), r("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
-    } catch (N) {
-      const S = N instanceof Error ? N.message : "Refresh failed";
-      P(S), r("❌ CONNECTION REFRESH ERROR", {
+      n("🔌 DISCONNECTING FOR REFRESH"), await l.disconnectUser(), n("📞 RECONNECTING FOR REFRESH");
+      const C = await l.connectUser(s);
+      b(C), N(!0), U(null), n("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
+    } catch (C) {
+      const R = C instanceof Error ? C.message : "Refresh failed";
+      U(R), n("❌ CONNECTION REFRESH ERROR", {
         userId: s.id,
-        error: S
+        error: R
       });
     } finally {
-      y(!1), r("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
+      y(!1), n("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
     }
-  }, [o, s, r]), f = $.useMemo(() => (r("💫 CONTEXT VALUE MEMOIZATION", {
-    hasService: !!o,
-    hasClient: !!x,
-    isConnected: c,
-    isLoading: b,
-    hasError: !!I,
+  }, [l, s, n]), u = X.useMemo(() => (n("💫 CONTEXT VALUE MEMOIZATION", {
+    hasService: !!l,
+    hasClient: !!f,
+    isConnected: i,
+    isLoading: g,
+    hasError: !!E,
     capabilitiesKeys: Object.keys(a),
-    customizationKeys: Object.keys(m)
+    customizationKeys: Object.keys(d)
   }), {
-    service: o,
-    client: x,
-    isConnected: c,
-    isLoading: b,
-    error: I,
+    service: l,
+    client: f,
+    isConnected: i,
+    isLoading: g,
+    error: E,
     capabilities: a,
-    customization: m,
-    refreshConnection: u,
-    debug: d
+    customization: d,
+    refreshConnection: m,
+    debug: h
   }), [
-    o,
-    x,
-    c,
-    b,
-    I,
+    l,
+    f,
+    i,
+    g,
+    E,
     a,
-    m,
-    u,
     d,
-    r
+    m,
+    h,
+    n
   ]);
-  return r("🔄 RENDER END", {
-    renderCount: R.current,
-    willRenderChat: !!(x && c),
-    contextValueReady: !!f
-  }), /* @__PURE__ */ e(ae.Provider, { value: f, children: x && c ? /* @__PURE__ */ e(fe, { client: x, children: t }) : t });
-}, Pe = () => Z();
-function q({ label: t, className: s, children: n, ...l }) {
-  return /* @__PURE__ */ i(
+  return n("🔄 RENDER END", {
+    renderCount: S.current,
+    willRenderChat: !!(f && i),
+    contextValueReady: !!u
+  }), /* @__PURE__ */ e(ue.Provider, { value: u, children: f && i ? /* @__PURE__ */ e(be, { client: f, children: t }) : t });
+}, Me = () => K();
+function ee({ label: t, className: s, children: r, ...o }) {
+  return /* @__PURE__ */ c(
     "button",
     {
       type: "button",
-      className: F(
+      className: T(
         "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
+        r
       ]
     }
   );
 }
-function Te(t) {
+function Le(t) {
   const s = [
     { color: "#8129D9" },
     // purple
@@ -264,32 +264,32 @@ function Te(t) {
     { color: "#70764d" }
     // olive green
   ];
-  let n = 0;
+  let r = 0;
   for (let a = 0; a < t.length; a++)
-    n = (n << 5) - n + t.charCodeAt(a), n = n & n;
-  const l = Math.abs(n) % s.length;
-  return s[l];
+    r = (r << 5) - r + t.charCodeAt(a), r = r & r;
+  const o = Math.abs(r) % s.length;
+  return s[o];
 }
-const Y = ({
+const se = ({
   id: t,
   name: s,
-  image: n,
-  size: l = 40,
+  image: r,
+  size: o = 40,
   className: a
 }) => {
-  const { color: m } = Te(t), d = s.charAt(0).toUpperCase(), o = l < 32 ? "text-xs" : l < 56 ? "text-sm" : "text-lg";
+  const { color: d } = Le(t), h = s.charAt(0).toUpperCase(), l = o < 32 ? "text-xs" : o < 56 ? "text-sm" : "text-lg";
   return /* @__PURE__ */ e(
     "div",
     {
-      className: F(
+      className: T(
         "flex-shrink-0 overflow-hidden rounded-full",
         a
       ),
-      style: { width: `${l}px`, height: `${l}px` },
-      children: n ? /* @__PURE__ */ e(
+      style: { width: `${o}px`, height: `${o}px` },
+      children: r ? /* @__PURE__ */ e(
         "img",
         {
-          src: n,
+          src: r,
           alt: "",
           className: "h-full w-full object-cover aspect-square"
         }
@@ -297,159 +297,159 @@ const Y = ({
         "div",
         {
           "aria-hidden": "true",
-          className: F(
+          className: T(
             "flex h-full w-full items-center justify-center font-semibold",
-            o
+            l
           ),
           style: {
-            color: m,
-            backgroundColor: `color-mix(in srgb, ${m} 20%, transparent)`
+            color: d,
+            backgroundColor: `color-mix(in srgb, ${d} 20%, transparent)`
           },
-          children: d
+          children: h
         }
       )
     }
   );
-}, De = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: l = !1 }) => {
-  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(((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);
+}, Fe = ({ channel: t, selectedChannel: s, onChannelSelect: r, debug: o = !1 }) => {
+  var g, y, E, U, D, I, S;
+  const a = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), d = () => {
+    t && r(t);
+  }, n = Object.values(((g = t == null ? void 0 : t.state) == null ? void 0 : g.members) || {}).find(
+    (P) => {
+      var m, u;
+      return ((m = P.user) == null ? void 0 : m.id) && P.user.id !== ((u = t == null ? void 0 : t._client) == null ? void 0 : u.userID);
     }
-  ), 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([], {
+  ), l = ((y = n == null ? void 0 : n.user) == null ? void 0 : y.name) || "Conversation", w = (E = n == null ? void 0 : n.user) == null ? void 0 : E.image, f = (D = (U = t == null ? void 0 : t.state) == null ? void 0 : U.messages) == null ? void 0 : D[t.state.messages.length - 1], b = (f == null ? void 0 : f.text) || "No messages yet", i = f != null && f.created_at ? new Date(f.created_at).toLocaleTimeString([], {
     hour: "2-digit",
     minute: "2-digit"
-  }) : "", C = ((E = t == null ? void 0 : t.state) == null ? void 0 : E.unreadCount) || 0;
-  return l && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+  }) : "", N = ((I = t == null ? void 0 : t.state) == null ? void 0 : I.unreadCount) || 0;
+  return o && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
     channelId: t == null ? void 0 : t.id,
     isSelected: a,
-    participantName: o,
-    unread: C,
-    hasTimestamp: !!c
+    participantName: l,
+    unread: N,
+    hasTimestamp: !!i
   }), /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: m,
-      className: F(
+      onClick: d,
+      className: T(
         "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,
           "hover:bg-sand": !a
         }
       ),
-      children: /* @__PURE__ */ i("div", { className: "flex items-start gap-3", children: [
+      children: /* @__PURE__ */ c("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
-          Y,
+          se,
           {
-            id: ((R = r == null ? void 0 : r.user) == null ? void 0 : R.id) || t.id || "unknown",
-            name: o,
+            id: ((S = n == null ? void 0 : n.user) == null ? void 0 : S.id) || t.id || "unknown",
+            name: l,
             image: w,
             size: 44
           }
         ),
-        /* @__PURE__ */ i("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
-          /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ c("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
+          /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ e(
               "h3",
               {
-                className: F(
+                className: T(
                   "text-sm font-medium truncate",
                   a ? "text-primary" : "text-charcoal"
                 ),
-                children: o
+                children: l
               }
             ),
-            c && /* @__PURE__ */ e("span", { className: "text-xs text-stone flex-shrink-0", children: c })
+            i && /* @__PURE__ */ e("span", { className: "text-xs text-stone flex-shrink-0", children: i })
           ] }),
-          /* @__PURE__ */ i("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: g }),
-            C > 0 && /* @__PURE__ */ e("span", { className: "bg-primary text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0", children: C > 99 ? "99+" : C })
+          /* @__PURE__ */ c("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: b }),
+            N > 0 && /* @__PURE__ */ e("span", { className: "bg-primary text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0", children: N > 99 ? "99+" : N })
           ] })
         ] })
       ] })
     }
   );
-}, Oe = ({
+}, pe = ({
   onChannelSelect: t,
   selectedChannel: s,
-  showStartConversation: n = !1,
-  onStartConversation: l,
+  showStartConversation: r = !1,
+  onStartConversation: o,
   participantLabel: a = "participants",
-  className: m
+  className: d
 }) => {
-  var x;
-  const d = $.useRef(0);
-  d.current++;
-  const { debug: r = !1 } = Z();
-  r && console.log("📺 [ChannelList] 🔄 RENDER START", {
-    renderCount: d.current,
+  var f;
+  const h = X.useRef(0);
+  h.current++;
+  const { debug: n = !1 } = K();
+  n && console.log("📺 [ChannelList] 🔄 RENDER START", {
+    renderCount: h.current,
     selectedChannelId: s == null ? void 0 : s.id,
-    showStartConversation: n,
+    showStartConversation: r,
     participantLabel: a
   });
-  const { client: o } = ge();
-  r && console.log("📺 [ChannelList] 📡 CHAT CONTEXT", {
-    renderCount: d.current,
-    hasClient: !!o,
-    clientUserId: o == null ? void 0 : o.userID,
-    clientConnected: (x = o == null ? void 0 : o.wsConnection) == null ? void 0 : x.isHealthy
+  const { client: l } = ve();
+  n && console.log("📺 [ChannelList] 📡 CHAT CONTEXT", {
+    renderCount: h.current,
+    hasClient: !!l,
+    clientUserId: l == null ? void 0 : l.userID,
+    clientConnected: (f = l == null ? void 0 : l.wsConnection) == null ? void 0 : f.isHealthy
   });
-  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,
-      userId: g,
-      filters: c
-    }), c;
-  }, [o.userID, r]);
-  return /* @__PURE__ */ i(
+  const w = X.useMemo(() => {
+    const b = l.userID, i = b ? { type: "messaging", members: { $in: [b] }, hidden: !1 } : { type: "messaging" };
+    return n && console.log("📺 [ChannelList] 🔍 FILTERS MEMOIZED", {
+      renderCount: h.current,
+      userId: b,
+      filters: i
+    }), i;
+  }, [l.userID, n]);
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: F(
-        "h-full flex flex-col min-w-0 overflow-hidden",
-        m
+      className: T(
+        "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
+        d
       ),
       children: [
-        /* @__PURE__ */ e("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3 min-h-10 min-w-0", children: [
+        /* @__PURE__ */ e("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: /* @__PURE__ */ c("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(
-            q,
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: r && o && /* @__PURE__ */ e(
+            ee,
             {
               label: "Start a new conversation",
-              onClick: l,
+              onClick: o,
               className: "inline-flex size-10 items-center justify-center",
-              children: /* @__PURE__ */ e(Ee, { className: "h-5 w-5" })
+              children: /* @__PURE__ */ e(ke, { className: "h-5 w-5" })
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (r && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
-          renderCount: d.current,
+        /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (n && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
+          renderCount: h.current,
           filters: w,
-          hasClient: !!o,
-          clientUserId: o == null ? void 0 : o.userID
+          hasClient: !!l,
+          clientUserId: l == null ? void 0 : l.userID
         }), /* @__PURE__ */ e(
-          xe,
+          we,
           {
             filters: w,
             sort: { last_message_at: -1 },
             options: { limit: 30 },
-            Preview: (g) => {
-              var c, C;
-              return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
-                channelId: (c = g.channel) == null ? void 0 : c.id,
+            Preview: (b) => {
+              var i, N;
+              return n && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+                channelId: (i = b.channel) == null ? void 0 : i.id,
                 selectedChannelId: s == null ? void 0 : s.id,
-                isSelected: (s == null ? void 0 : s.id) === ((C = g.channel) == null ? void 0 : C.id)
+                isSelected: (s == null ? void 0 : s.id) === ((N = b.channel) == null ? void 0 : N.id)
               }), /* @__PURE__ */ e(
-                De,
+                Fe,
                 {
-                  ...g,
+                  ...b,
                   selectedChannel: s,
                   onChannelSelect: t,
-                  debug: r
+                  debug: n
                 }
               );
             }
@@ -458,145 +458,145 @@ const Y = ({
       ]
     }
   );
-}, X = ({
+}, Y = ({
   variant: t = "default",
   className: s,
-  children: n,
-  ...l
+  children: r,
+  ...o
 }) => /* @__PURE__ */ e(
   "button",
   {
     type: "button",
-    className: F(
+    className: T(
       "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
     ),
-    ...l,
-    children: n
+    ...o,
+    children: r
   }
 );
-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" }) });
+function me({ onClick: t }) {
+  return /* @__PURE__ */ e(ee, { label: "Close", onClick: t, className: "p-1", children: /* @__PURE__ */ e(de, { className: "h-5 w-5 text-stone", weight: "bold" }) });
 }
-const Ue = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "message-input flex items-center gap-2 p-4", children: [
+const je = ({ renderActions: t }) => /* @__PURE__ */ c("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 }) })
-] }), 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 b;
-      return ((b = C.user) == null ? void 0 : b.id) && C.user.id !== a._client.userID;
+  /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(Re, { focus: !0, maxRows: 4 }) })
+] }), Be = ({ onBack: t, showBackButton: s, onShowInfo: r, canShowInfo: o }) => {
+  var l, w, f, b;
+  const { channel: a } = Se(), d = X.useMemo(() => Object.values(a.state.members || {}).find(
+    (N) => {
+      var g;
+      return ((g = N.user) == null ? void 0 : g.id) && N.user.id !== a._client.userID;
     }
-  ), [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: [
+  ), [a._client.userID, a.state.members]), h = ((l = d == null ? void 0 : d.user) == null ? void 0 : l.name) || ((w = d == null ? void 0 : d.user) == null ? void 0 : w.id) || "Unknown member", n = (f = d == null ? void 0 : d.user) == null ? void 0 : f.image;
+  return /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-3 min-h-12", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-3 min-w-0", children: [
       s && t && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           onClick: t,
           className: "inline-flex items-center justify-center w-8 h-8 rounded-lg hover:bg-sand focus:outline-none focus:ring-2 focus:ring-primary transition-colors lg:hidden",
-          "aria-label": "Back to channel list",
-          children: /* @__PURE__ */ e(Ie, { className: "h-5 w-5 text-stone", weight: "bold" })
+          "aria-label": "Back to conversations",
+          children: /* @__PURE__ */ e(De, { className: "h-5 w-5 text-stone", weight: "bold" })
         }
       ),
       /* @__PURE__ */ e(
-        Y,
+        se,
         {
-          id: ((g = m == null ? void 0 : m.user) == null ? void 0 : g.id) || a.id || "unknown",
-          name: d,
-          image: r,
+          id: ((b = d == null ? void 0 : d.user) == null ? void 0 : b.id) || a.id || "unknown",
+          name: h,
+          image: n,
           size: 40
         }
       ),
-      /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-charcoal truncate", children: d }) })
+      /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "text-lg font-semibold text-charcoal truncate", children: h }) })
     ] }),
-    l && n && /* @__PURE__ */ e(q, { label: "Chat info", onClick: n, children: /* @__PURE__ */ e(ye, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
+    o && r && /* @__PURE__ */ e(ee, { label: "Chat info", onClick: r, children: /* @__PURE__ */ e(Pe, { className: "h-6 w-6 text-charcoal", weight: "bold" }) })
   ] });
-}, Fe = ({
+}, Ae = ({
   isOpen: t,
   onClose: s,
-  participant: n,
-  channel: l,
+  participant: r,
+  channel: o,
   followerStatusLabel: a,
-  onLeaveConversation: m,
-  onBlockParticipant: d
+  onLeaveConversation: d,
+  onBlockParticipant: h
 }) => {
-  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(() => {
+  var L, _, V, W, z, j, q;
+  const { service: n, debug: l } = K(), w = H(null), [f, b] = v(!1), [i, N] = v(!1), [g, y] = v(!1);
+  G(() => {
     const k = w.current;
     k && (t ? k.showModal() : k.close());
   }, [t]);
-  const I = L(async () => {
+  const E = O(async () => {
     var k;
-    if (!(!r || !((k = n == null ? void 0 : n.user) != null && k.id)))
+    if (!(!n || !((k = r == null ? void 0 : r.user) != null && k.id)))
       try {
-        const h = (await r.getBlockedUsers()).some(
-          (U) => {
-            var p;
-            return U.blocked_user_id === ((p = n == null ? void 0 : n.user) == null ? void 0 : p.id);
+        const B = (await n.getBlockedUsers()).some(
+          (A) => {
+            var Q;
+            return A.blocked_user_id === ((Q = r == null ? void 0 : r.user) == null ? void 0 : Q.id);
           }
         );
-        g(h);
-      } catch (D) {
+        b(B);
+      } catch (M) {
         console.error(
           "[ChannelInfoDialog] Failed to check blocked status:",
-          D
+          M
         );
       }
-  }, [r, (M = n == null ? void 0 : n.user) == null ? void 0 : M.id]);
-  B(() => {
-    t && I();
-  }, [t, I]);
-  const P = async () => {
+  }, [n, (L = r == null ? void 0 : r.user) == null ? void 0 : L.id]);
+  G(() => {
+    t && E();
+  }, [t, E]);
+  const U = async () => {
     var k;
-    if (!c) {
-      o && console.log("[ChannelInfoDialog] Leave conversation", l.cid), C(!0);
+    if (!i) {
+      l && console.log("[ChannelInfoDialog] Leave conversation", o.cid), N(!0);
       try {
-        const D = ((k = l._client) == null ? void 0 : k.userID) ?? null;
-        await l.hide(D, !1), m && await m(l), s();
-      } catch (D) {
-        console.error("[ChannelInfoDialog] Failed to leave conversation", D);
+        const M = ((k = o._client) == null ? void 0 : k.userID) ?? null;
+        await o.hide(M, !1), d && await d(o), s();
+      } catch (M) {
+        console.error("[ChannelInfoDialog] Failed to leave conversation", M);
       } finally {
-        C(!1);
+        N(!1);
       }
     }
-  }, O = async () => {
-    var k, D, h;
-    if (!(b || !r)) {
-      o && console.log("[ChannelInfoDialog] Block member", (k = n == null ? void 0 : n.user) == null ? void 0 : k.id), y(!0);
+  }, D = async () => {
+    var k, M, B;
+    if (!(g || !n)) {
+      l && console.log("[ChannelInfoDialog] Block member", (k = r == null ? void 0 : r.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 (U) {
-        console.error("[ChannelInfoDialog] Failed to block member", U);
+        await n.blockUser((M = r == null ? void 0 : r.user) == null ? void 0 : M.id), h && await h((B = r == null ? void 0 : r.user) == null ? void 0 : B.id), s();
+      } catch (A) {
+        console.error("[ChannelInfoDialog] Failed to block member", A);
       } finally {
         y(!1);
       }
     }
-  }, E = async () => {
-    var k, D, h;
-    if (!(b || !r)) {
-      o && console.log("[ChannelInfoDialog] Unblock member", (k = n == null ? void 0 : n.user) == null ? void 0 : k.id), y(!0);
+  }, I = async () => {
+    var k, M, B;
+    if (!(g || !n)) {
+      l && console.log("[ChannelInfoDialog] Unblock member", (k = r == null ? void 0 : r.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 (U) {
-        console.error("[ChannelInfoDialog] Failed to unblock member", U);
+        await n.unBlockUser((M = r == null ? void 0 : r.user) == null ? void 0 : M.id), h && await h((B = r == null ? void 0 : r.user) == null ? void 0 : B.id), s();
+      } catch (A) {
+        console.error("[ChannelInfoDialog] Failed to unblock member", A);
       } finally {
         y(!1);
       }
     }
-  }, R = () => {
+  }, S = () => {
     s(), window.open(
       "https://linktr.ee/s/about/trust-center/report",
       "_blank",
       "noopener,noreferrer"
     );
   };
-  if (!n) return null;
-  const T = ((H = n.user) == null ? void 0 : H.name) || ((V = n.user) == null ? void 0 : V.id) || "Unknown member", u = (_ = n.user) == null ? void 0 : _.image, f = (W = n.user) == null ? void 0 : W.email, N = (G = n.user) == null ? void 0 : G.username, S = f || (N ? `linktr.ee/${N}` : void 0), j = ((z = n.user) == null ? void 0 : z.id) || "unknown";
+  if (!r) return null;
+  const P = ((_ = r.user) == null ? void 0 : _.name) || ((V = r.user) == null ? void 0 : V.id) || "Unknown member", m = (W = r.user) == null ? void 0 : W.image, u = (z = r.user) == null ? void 0 : z.email, C = (j = r.user) == null ? void 0 : j.username, R = u || (C ? `linktr.ee/${C}` : void 0), $ = ((q = r.user) == null ? void 0 : q.id) || "unknown";
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ e(
@@ -608,66 +608,66 @@ const Ue = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
         onClick: (k) => {
           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: [
+        children: /* @__PURE__ */ c("div", { className: "ml-auto flex h-full w-full flex-col bg-white shadow-max-elevation-light", children: [
+          /* @__PURE__ */ c("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(ie, { onClick: s })
+            /* @__PURE__ */ e(me, { onClick: s })
           ] }),
-          /* @__PURE__ */ i("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: [
-            /* @__PURE__ */ e("div", { className: "rounded-2xl bg-chalk p-4", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ c("div", { className: "flex-1 overflow-y-auto px-6 py-6", children: [
+            /* @__PURE__ */ e("div", { className: "rounded-2xl bg-chalk p-4", children: /* @__PURE__ */ c("div", { className: "flex items-center gap-4", children: [
               /* @__PURE__ */ e(
-                Y,
+                se,
                 {
-                  id: j,
-                  name: T,
-                  image: u,
+                  id: $,
+                  name: P,
+                  image: m,
                   size: 64
                 }
               ),
-              /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: T }),
-                S && /* @__PURE__ */ e("p", { className: "truncate text-sm text-stone", children: S }),
+              /* @__PURE__ */ c("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: P }),
+                R && /* @__PURE__ */ e("p", { className: "truncate text-sm text-stone", children: R }),
                 a && /* @__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: a })
               ] })
             ] }) }),
-            /* @__PURE__ */ i("ul", { className: "flex flex-col gap-2 mt-2", children: [
-              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
-                X,
+            /* @__PURE__ */ c("ul", { className: "flex flex-col gap-2 mt-2", children: [
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
+                Y,
                 {
-                  onClick: P,
-                  disabled: c,
-                  "aria-busy": c,
+                  onClick: U,
+                  disabled: i,
+                  "aria-busy": i,
                   children: [
-                    c ? /* @__PURE__ */ e(Q, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(Se, { className: "h-5 w-5" }),
+                    i ? /* @__PURE__ */ e(J, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(Te, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Leave Conversation" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: x ? /* @__PURE__ */ i(
-                X,
+              /* @__PURE__ */ e("li", { children: f ? /* @__PURE__ */ c(
+                Y,
                 {
-                  onClick: E,
-                  disabled: b,
-                  "aria-busy": b,
+                  onClick: I,
+                  disabled: g,
+                  "aria-busy": g,
                   children: [
-                    b ? /* @__PURE__ */ e(Q, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(te, { className: "h-5 w-5" }),
+                    g ? /* @__PURE__ */ e(J, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(ae, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Unblock" })
                   ]
                 }
-              ) : /* @__PURE__ */ i(
-                X,
+              ) : /* @__PURE__ */ c(
+                Y,
                 {
-                  onClick: O,
-                  disabled: b,
-                  "aria-busy": b,
+                  onClick: D,
+                  disabled: g,
+                  "aria-busy": g,
                   children: [
-                    b ? /* @__PURE__ */ e(Q, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(te, { className: "h-5 w-5" }),
+                    g ? /* @__PURE__ */ e(J, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(ae, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Block" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(X, { variant: "danger", onClick: R, children: [
-                /* @__PURE__ */ e(Re, { className: "h-5 w-5" }),
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(Y, { variant: "danger", onClick: S, children: [
+                /* @__PURE__ */ e(Oe, { className: "h-5 w-5" }),
                 /* @__PURE__ */ e("span", { children: "Report" })
               ] }) })
             ] })
@@ -676,66 +676,75 @@ const Ue = ({ renderActions: t }) => /* @__PURE__ */ i("div", { className: "mess
       }
     )
   );
-}, Me = ({
+}, He = ({
   channel: t,
   onBack: s,
-  showBackButton: n = !1,
-  renderMessageInputActions: l,
+  showBackButton: r = !1,
+  renderMessageInputActions: o,
   onLeaveConversation: a,
-  onBlockParticipant: m,
-  className: d
+  onBlockParticipant: d,
+  className: h
 }) => {
-  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;
+  const [n, l] = v(!1), w = X.useMemo(() => Object.values(t.state.members || {}).find(
+    (i) => {
+      var N;
+      return ((N = i.user) == null ? void 0 : N.id) && i.user.id !== t._client.userID;
     }
-  ), [t._client.userID, t.state.members]), x = $.useMemo(() => {
-    const g = t.data ?? {};
-    return g.followerStatus ? String(g.followerStatus) : g.isFollower ? "Subscribed to you" : void 0;
+  ), [t._client.userID, t.state.members]), f = X.useMemo(() => {
+    const b = t.data ?? {};
+    return b.followerStatus ? String(b.followerStatus) : b.isFollower ? "Subscribed to you" : void 0;
   }, [t.data]);
-  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(
-        Le,
-        {
-          onBack: s,
-          showBackButton: n,
-          onShowInfo: () => o(!0),
-          canShowInfo: !!w
-        }
-      ) }),
-      /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ e(be, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }) }),
-      /* @__PURE__ */ e(
-        Ue,
-        {
-          renderActions: () => l == null ? void 0 : l(t)
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ e(
-      Fe,
-      {
-        isOpen: r,
-        onClose: () => o(!1),
-        participant: w,
-        channel: t,
-        followerStatusLabel: x,
-        onLeaveConversation: a,
-        onBlockParticipant: m
-      }
-    )
-  ] });
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: T(
+        "messaging-channel-view h-full flex flex-col",
+        h
+      ),
+      children: [
+        /* @__PURE__ */ e(Ee, { channel: t, children: /* @__PURE__ */ c(Ie, { children: [
+          /* @__PURE__ */ e("div", { className: "border-b border-sand bg-white px-4 py-3", children: /* @__PURE__ */ e(
+            Be,
+            {
+              onBack: s,
+              showBackButton: r,
+              onShowInfo: () => l(!0),
+              canShowInfo: !!w
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ e(ye, { hideDeletedMessages: !0, hideNewMessageSeparator: !1 }) }),
+          /* @__PURE__ */ e(
+            je,
+            {
+              renderActions: () => o == null ? void 0 : o(t)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e(
+          Ae,
+          {
+            isOpen: n,
+            onClose: () => l(!1),
+            participant: w,
+            channel: t,
+            followerStatusLabel: f,
+            onLeaveConversation: a,
+            onBlockParticipant: d
+          }
+        )
+      ]
+    }
+  );
 };
-function pe({
+function Ge({
   searchQuery: t,
   setSearchQuery: s,
-  placeholder: n
+  placeholder: r
 }) {
-  const l = A(null);
-  return /* @__PURE__ */ i("div", { className: "relative", children: [
+  const o = H(null);
+  return /* @__PURE__ */ c("div", { className: "relative", children: [
     /* @__PURE__ */ e(
-      ke,
+      Ue,
       {
         className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone",
         weight: "bold"
@@ -744,185 +753,185 @@ function pe({
     /* @__PURE__ */ e(
       "input",
       {
-        ref: l,
+        ref: o,
         type: "text",
-        placeholder: n,
+        placeholder: r,
         value: t,
         onChange: (a) => s(a.target.value),
         className: "w-full pl-10 pr-10 py-3 text-sm border border-sand rounded-xl focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent"
       }
     ),
     t && /* @__PURE__ */ e(
-      q,
+      ee,
       {
         label: "Clear search",
         onClick: () => {
           var a;
-          s(""), (a = l.current) == null || a.focus();
+          s(""), (a = o.current) == null || a.focus();
         },
         className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-stone hover:text-charcoal",
-        children: /* @__PURE__ */ e(oe, { className: "h-4 w-4", weight: "bold" })
+        children: /* @__PURE__ */ e(de, { className: "h-4 w-4", weight: "bold" })
       }
     )
   ] });
 }
-const je = ({
+const $e = ({
   participantSource: t,
   onSelectParticipant: s,
-  onClose: n,
-  existingParticipantIds: l = /* @__PURE__ */ new Set(),
+  onClose: r,
+  existingParticipantIds: o = /* @__PURE__ */ new Set(),
   participantLabel: a = "participants",
-  searchPlaceholder: m = "Search participants...",
-  className: d
+  searchPlaceholder: d = "Search participants...",
+  className: h
 }) => {
-  const { debug: r } = Z(), [o, w] = v(""), [x, g] = v([]), [c, C] = v(!1), [b, y] = v(null), [I, P] = v(
+  const { debug: n } = K(), [l, w] = v(""), [f, b] = v([]), [i, N] = v(!1), [g, y] = v(null), [E, U] = v(
     null
-  ), O = A(!1);
-  B(() => {
+  ), D = H(!1);
+  G(() => {
     if (t.loading) {
-      r && console.log(
+      n && console.log(
         "[ParticipantPicker] Waiting for participant source to finish loading..."
       );
       return;
     }
-    if (O.current) return;
+    if (D.current) return;
     (async () => {
-      r && console.log("[ParticipantPicker] Loading initial participants..."), C(!0), y(null);
+      n && console.log("[ParticipantPicker] Loading initial participants..."), N(!0), y(null);
       try {
-        const f = await t.loadParticipants({
+        const u = await t.loadParticipants({
           search: "",
           // Load all participants initially
           limit: 100
         });
-        g(f.participants), O.current = !0, r && console.log(
+        b(u.participants), D.current = !0, n && console.log(
           "[ParticipantPicker] Participants loaded successfully:",
-          f.participants.length
+          u.participants.length
         );
-      } catch (f) {
-        const N = f instanceof Error ? f.message : "Failed to load participants";
-        y(N), console.error("[ParticipantPicker] Failed to load participants:", f);
+      } catch (u) {
+        const C = u instanceof Error ? u.message : "Failed to load participants";
+        y(C), console.error("[ParticipantPicker] Failed to load participants:", u);
       } finally {
-        C(!1);
+        N(!1);
       }
     })();
-  }, [t.loading, r]);
-  const E = x.filter((u) => !l.has(u.id)).filter((u) => {
-    var N;
-    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 = L(
-    async (u) => {
-      if (!I) {
-        P(u.id);
+  }, [t.loading, n]);
+  const I = f.filter((m) => !o.has(m.id)).filter((m) => {
+    var C;
+    if (!l) return !0;
+    const u = l.toLowerCase();
+    return m.name.toLowerCase().includes(u) || ((C = m.email) == null ? void 0 : C.toLowerCase().includes(u)) || !1;
+  }), S = O(
+    async (m) => {
+      if (!E) {
+        U(m.id);
         try {
-          await s(u);
-        } catch (f) {
-          console.error("[ParticipantPicker] Failed to start chat:", f), P(null);
+          await s(m);
+        } catch (u) {
+          console.error("[ParticipantPicker] Failed to start chat:", u), U(null);
         }
       }
     },
-    [s, I]
-  ), T = (u, f) => {
-    (u.key === "Enter" || u.key === " ") && (u.preventDefault(), R(f));
+    [s, E]
+  ), P = (m, u) => {
+    (m.key === "Enter" || m.key === " ") && (m.preventDefault(), S(u));
   };
-  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: [
+  return /* @__PURE__ */ c("div", { className: T("flex flex-col h-full", h), children: [
+    /* @__PURE__ */ c("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: [
+      /* @__PURE__ */ c("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(ie, { onClick: n })
+        /* @__PURE__ */ e(me, { onClick: r })
       ] }),
-      /* @__PURE__ */ i("p", { className: "text-xs text-stone mb-3", children: [
+      /* @__PURE__ */ c("p", { className: "text-xs text-stone mb-3", children: [
         "Select a ",
         a.slice(0, -1),
         " to start messaging (",
-        E.length,
+        I.length,
         " available)",
         t.totalCount !== void 0 && ` • ${t.totalCount} ${a} total`
       ] }),
       /* @__PURE__ */ e(
-        pe,
+        Ge,
         {
-          searchQuery: o,
+          searchQuery: l,
           setSearchQuery: w,
-          placeholder: m
+          placeholder: d
         }
       )
     ] }),
-    b && /* @__PURE__ */ i("div", { className: "p-4 text-sm text-danger bg-danger-alt", children: [
+    g && /* @__PURE__ */ c("div", { className: "p-4 text-sm text-danger bg-danger-alt", children: [
       "Error loading ",
       a,
       ": ",
-      b
+      g
     ] }),
-    /* @__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: "flex-1 overflow-auto", children: i && I.length === 0 ? /* @__PURE__ */ e("div", { className: "h-32 flex items-center justify-center", children: /* @__PURE__ */ c("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__ */ i("span", { className: "text-sm text-stone", children: [
+      /* @__PURE__ */ c("span", { className: "text-sm text-stone", children: [
         "Loading ",
         a,
         "..."
       ] })
-    ] }) }) : E.length === 0 ? /* @__PURE__ */ i("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(ne, { className: "h-8 w-8 text-charcoal" }) }),
-      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-charcoal mb-2", children: o ? `No ${a} found` : x.length > 0 ? `Already chatting with all ${a}` : `No ${a} yet` }),
-      /* @__PURE__ */ e("p", { className: "text-xs text-stone", children: o ? "Try a different search term" : x.length > 0 ? `You have existing conversations with all your ${a}` : `${a.charAt(0).toUpperCase() + a.slice(1)} will appear here` })
-    ] }) : /* @__PURE__ */ i("ul", { className: "space-y-0", children: [
-      E.map((u) => {
-        const f = u.name || u.email || u.id, N = u.email && u.name ? u.email : u.phone;
+    ] }) }) : I.length === 0 ? /* @__PURE__ */ c("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(ie, { className: "h-8 w-8 text-charcoal" }) }),
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-charcoal mb-2", children: l ? `No ${a} found` : f.length > 0 ? `Already chatting with all ${a}` : `No ${a} yet` }),
+      /* @__PURE__ */ e("p", { className: "text-xs text-stone", children: l ? "Try a different search term" : f.length > 0 ? `You have existing conversations with all your ${a}` : `${a.charAt(0).toUpperCase() + a.slice(1)} will appear here` })
+    ] }) : /* @__PURE__ */ c("ul", { className: "space-y-0", children: [
+      I.map((m) => {
+        const u = m.name || m.email || m.id, C = m.email && m.name ? m.email : m.phone;
         return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: () => R(u),
-            onKeyDown: (S) => T(S, u),
+            onClick: () => S(m),
+            onKeyDown: (R) => P(R, m),
             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__ */ i("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ i("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [
+            children: /* @__PURE__ */ c("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ c("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [
                 /* @__PURE__ */ e(
-                  Y,
+                  se,
                   {
-                    id: u.id,
-                    name: f,
-                    image: u.image,
+                    id: m.id,
+                    name: u,
+                    image: m.image,
                     size: 40
                   }
                 ),
-                /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-charcoal truncate", children: f }),
-                  N && /* @__PURE__ */ e("p", { className: "text-xs text-stone truncate", children: N })
+                /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-charcoal truncate", children: u }),
+                  C && /* @__PURE__ */ e("p", { className: "text-xs text-stone truncate", children: C })
                 ] })
               ] }),
-              /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: I === u.id ? /* @__PURE__ */ e(Q, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ e(ne, { className: "h-5 w-5 text-stone" }) })
+              /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: E === m.id ? /* @__PURE__ */ e(J, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ e(ie, { className: "h-5 w-5 text-stone" }) })
             ] })
           }
-        ) }, u.id);
+        ) }, m.id);
       }),
-      c && /* @__PURE__ */ e("li", { className: "p-4 flex justify-center", children: /* @__PURE__ */ i("div", { className: "flex items-center space-x-2", children: [
+      i && /* @__PURE__ */ e("li", { className: "p-4 flex justify-center", children: /* @__PURE__ */ c("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__ */ e("span", { className: "text-sm text-stone", children: "Loading more..." })
       ] }) })
     ] }) })
   ] });
-}, Ae = ({ hasChannels: t, onStartConversation: s, participantLabel: n }) => /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ i("div", { className: "text-center max-w-sm", children: [
+}, _e = ({ hasChannels: t, onStartConversation: s, participantLabel: r }) => /* @__PURE__ */ e("div", { className: "messaging-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ c("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__ */ i(se, { children: [
+  /* @__PURE__ */ e("p", { className: "text-stone text-sm mb-6", children: t ? /* @__PURE__ */ c(oe, { children: [
     "Choose a conversation from the list or",
     " ",
-    s && /* @__PURE__ */ i(re, { onClick: s, children: [
+    s && /* @__PURE__ */ c(ce, { onClick: s, children: [
       "start a new conversation with a ",
-      n.slice(0, -1),
+      r.slice(0, -1),
       "."
     ] })
-  ] }) : s && /* @__PURE__ */ i(se, { children: [
-    /* @__PURE__ */ i(re, { onClick: s, children: [
+  ] }) : s && /* @__PURE__ */ c(oe, { children: [
+    /* @__PURE__ */ c(ce, { onClick: s, children: [
       "Start a new conversation with one of your ",
-      n
+      r
     ] }),
     " ",
     "to begin messaging."
   ] }) })
-] }) }), re = ({
+] }) }), ce = ({
   onClick: t,
   children: s
 }) => /* @__PURE__ */ e(
@@ -933,25 +942,25 @@ const je = ({
     className: "inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary-alt focus:outline-none focus:ring-2 focus:ring-primary",
     children: s
   }
-), le = ({ error: t, onRetry: s }) => /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full p-8", children: /* @__PURE__ */ i("div", { className: "text-center max-w-md", children: [
-  /* @__PURE__ */ e("div", { className: "w-24 h-24 bg-danger-alt rounded-full flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ e("span", { className: "text-4xl", children: "⚠️" }) }),
-  /* @__PURE__ */ e("h2", { className: "text-xl font-semibold text-charcoal mb-3", children: "Connection Error" }),
+), re = ({ message: t, onBack: s }) => /* @__PURE__ */ e("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ c("div", { className: "text-center max-w-sm", children: [
+  /* @__PURE__ */ e("div", { className: "w-24 h-24 bg-danger-alt/20 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 mb-2", children: "Oops!" }),
   /* @__PURE__ */ e("p", { className: "text-stone text-sm mb-6", children: t }),
   s && /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       onClick: s,
-      className: "inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-alt focus:outline-none focus:ring-2 focus:ring-primary transition-colors",
-      children: "Try Again"
+      className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary-alt rounded-lg focus:outline-none focus:ring-2 focus:ring-primary transition-colors",
+      children: "Go Back"
     }
   )
-] }) }), Be = ({ className: t, message: s }) => /* @__PURE__ */ i(
+] }) }), Ve = ({ className: t, message: s }) => /* @__PURE__ */ c(
   "div",
   {
-    className: F("flex items-center justify-center h-full", t),
+    className: T("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__ */ c("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(
           "animateTransform",
           {
@@ -989,245 +998,296 @@ const je = ({
       s && /* @__PURE__ */ e("span", { className: "text-stone", children: s })
     ]
   }
-), He = () => /* @__PURE__ */ e("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ i("div", { className: "flex items-center", children: [
-  /* @__PURE__ */ e(Be, { className: "w-6 h-6" }),
+), We = () => /* @__PURE__ */ e("div", { className: "messaging-loading-state flex items-center justify-center h-full", children: /* @__PURE__ */ c("div", { className: "flex items-center", children: [
+  /* @__PURE__ */ e(Ve, { className: "w-6 h-6" }),
   /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
-] }) }), Qe = ({
+] }) }), Ke = ({
   capabilities: t = {},
   className: s,
-  renderMessageInputActions: n,
-  onChannelSelect: l,
-  onParticipantSelect: a
+  renderMessageInputActions: r,
+  onChannelSelect: o,
+  onParticipantSelect: a,
+  initialParticipantFilter: d
 }) => {
   const {
-    service: m,
-    client: d,
-    isConnected: r,
-    isLoading: o,
-    error: w,
-    refreshConnection: x,
-    debug: g
-  } = 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), M = L(async () => {
-    if (!d || !r) return;
-    const h = d.userID;
-    if (h)
+    service: h,
+    client: n,
+    isConnected: l,
+    isLoading: w,
+    error: f,
+    refreshConnection: b,
+    debug: i
+  } = Me(), [N, g] = v(null), [y, E] = v(!1), [U, D] = v(!1), [I, S] = v(/* @__PURE__ */ new Set()), [P, m] = v(0), [u, C] = v(!1), [R, $] = v(null), L = H(null), {
+    showStartConversation: _ = !1,
+    participantSource: V,
+    participantLabel: W = "participants"
+  } = t, z = H(null), j = O(async () => {
+    if (!n || !l) return;
+    const x = n.userID;
+    if (x)
       try {
-        g && console.log("[MessagingShell] Syncing channels for user:", h);
-        const U = await d.queryChannels(
+        i && console.log("[MessagingShell] Syncing channels for user:", x);
+        const p = await n.queryChannels(
           {
             type: "messaging",
-            members: { $in: [h] }
+            members: { $in: [x] }
           },
           {},
           { limit: 100 }
-        ), 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 && p.add(K);
+        ), F = /* @__PURE__ */ new Set();
+        p.forEach((ne) => {
+          const fe = ne.state.members;
+          Object.values(fe).forEach((ge) => {
+            var le;
+            const te = (le = ge.user) == null ? void 0 : le.id;
+            te && te !== x && F.add(te);
           });
-        }), E(p), y(U.length > 0), j.current = h, g && console.log("[MessagingShell] Channels synced successfully:", {
-          channelCount: U.length,
-          memberCount: p.size
+        }), S(F), E(p.length > 0), z.current = x, i && console.log("[MessagingShell] Channels synced successfully:", {
+          channelCount: p.length,
+          memberCount: F.size
         });
-      } catch (U) {
-        console.error("[MessagingShell] Failed to sync channels:", U);
+      } catch (p) {
+        console.error("[MessagingShell] Failed to sync channels:", p);
       }
-  }, [d, r, g]);
-  B(() => {
-    if (!d || !r) return;
-    const h = d.userID;
-    h && j.current !== h && M();
-  }, [d, r, M]);
-  const H = L(
-    (h) => {
-      C(h), l == null || l(h);
+  }, [n, l, i]);
+  G(() => {
+    if (!n || !l) return;
+    const x = n.userID;
+    x && z.current !== x && j();
+  }, [n, l, j]), G(() => {
+    if (!d || !n || !l) return;
+    (async () => {
+      const p = n.userID;
+      if (p)
+        try {
+          i && console.log(
+            "[MessagingShell] Loading initial conversation with:",
+            d
+          );
+          const F = await n.queryChannels(
+            {
+              type: "messaging",
+              members: { $in: [p, d] }
+            },
+            {},
+            { limit: 1 }
+          );
+          F.length > 0 ? (g(F[0]), C(!0), $(null), i && console.log(
+            "[MessagingShell] Initial conversation loaded:",
+            F[0].id
+          )) : ($("No conversation found with this account"), i && console.log(
+            "[MessagingShell] No conversation found for:",
+            d
+          ));
+        } catch (F) {
+          console.error(
+            "[MessagingShell] Failed to load initial conversation:",
+            F
+          ), $("Failed to load conversation");
+        }
+    })();
+  }, [d, n, l, i]);
+  const q = O(
+    (x) => {
+      g(x), o == null || o(x);
     },
-    [l]
-  ), V = L(() => {
-    C(null);
-  }, []), _ = L(() => {
-    var h;
-    N && (T((U) => U + 1), P(!0), (h = u.current) == null || h.showModal());
-  }, [N]), W = L(
-    async (h) => {
-      var U;
-      if (m)
+    [o]
+  ), k = O(() => {
+    u || g(null);
+  }, [u]), M = O(() => {
+    var x;
+    V && (m((p) => p + 1), D(!0), (x = L.current) == null || x.showModal());
+  }, [V]), B = O(
+    async (x) => {
+      var p;
+      if (h)
         try {
-          g && console.log(
+          i && console.log(
             "[MessagingShell] Starting conversation with:",
-            h.id
+            x.id
           );
-          const p = await m.startChannelWithParticipant({
-            id: h.id,
-            name: h.name,
-            email: h.email,
-            phone: h.phone
+          const F = await h.startChannelWithParticipant({
+            id: x.id,
+            name: x.name,
+            email: x.email,
+            phone: x.phone
           });
           try {
-            await p.show();
-          } catch (J) {
-            console.warn("[MessagingShell] Failed to unhide channel:", J);
+            await F.show();
+          } catch (ne) {
+            console.warn("[MessagingShell] Failed to unhide channel:", ne);
           }
-          C(p), P(!1), (U = u.current) == null || U.close(), a == null || a(h);
-        } catch (p) {
-          console.error("[MessagingShell] Failed to start conversation:", p);
+          g(F), D(!1), (p = L.current) == null || p.close(), a == null || a(x);
+        } catch (F) {
+          console.error("[MessagingShell] Failed to start conversation:", F);
         }
     },
-    [m, a, g]
-  ), G = L(() => {
-    var h;
-    P(!1), (h = u.current) == null || h.close();
-  }, []), z = L(
-    async (h) => {
-      g && console.log("[MessagingShell] Leaving conversation:", h.id), C(null), j.current = null, await M();
+    [h, a, i]
+  ), A = O(() => {
+    var x;
+    D(!1), (x = L.current) == null || x.close();
+  }, []), Q = O(
+    async (x) => {
+      i && console.log("[MessagingShell] Leaving conversation:", x.id), g(null), z.current = null, await j();
     },
-    [M, g]
-  ), k = L(
-    async (h) => {
-      g && console.log("[MessagingShell] Blocking participant:", h), C(null), j.current = null, await M();
+    [j, i]
+  ), he = O(
+    async (x) => {
+      i && console.log("[MessagingShell] Blocking participant:", x), g(null), z.current = null, await j();
     },
-    [M, g]
-  ), D = !!c;
-  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,
+    [j, i]
+  ), Z = !!N;
+  return w ? /* @__PURE__ */ e("div", { className: T("h-full", s), children: /* @__PURE__ */ e(We, {}) }) : f ? /* @__PURE__ */ e("div", { className: T("h-full", s), children: /* @__PURE__ */ e(re, { message: f, onBack: b }) }) : !l || !n ? /* @__PURE__ */ e("div", { className: T("h-full", s), children: /* @__PURE__ */ e(
+    re,
     {
-      error: "Not connected to messaging service",
-      onRetry: x
+      message: "Not connected to messaging service",
+      onBack: b
     }
-  ) }) : /* @__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: F(
-            "min-h-0 min-w-0 bg-white lg:bg-chalk lg:flex lg:flex-col lg:border-r lg:border-sand",
+  ) }) : R ? /* @__PURE__ */ e("div", { className: T("h-full", s), children: /* @__PURE__ */ e(re, { message: R }) }) : /* @__PURE__ */ c(
+    "div",
+    {
+      className: T(
+        "messaging-shell h-full bg-white overflow-hidden",
+        s
+      ),
+      children: [
+        /* @__PURE__ */ c("div", { className: "flex h-full min-h-0", children: [
+          /* @__PURE__ */ e(
+            "div",
             {
-              "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": D,
-              "flex flex-col w-full lg:flex-1 lg:max-w-2xl": !D
+              className: T(
+                "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",
+                {
+                  // In direct conversation mode, always hide the channel list
+                  hidden: 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]": !u && Z,
+                  // Normal mode: show when no channel selected
+                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": !u && !Z
+                }
+              ),
+              children: /* @__PURE__ */ e(
+                pe,
+                {
+                  onChannelSelect: q,
+                  selectedChannel: N || void 0,
+                  showStartConversation: _ && !!V,
+                  onStartConversation: M,
+                  participantLabel: W
+                }
+              )
             }
           ),
-          children: /* @__PURE__ */ e(
-            Oe,
+          /* @__PURE__ */ e(
+            "div",
             {
-              onChannelSelect: H,
-              selectedChannel: c || void 0,
-              showStartConversation: f && !!N,
-              onStartConversation: _,
-              participantLabel: S
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          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(
-            Me,
-            {
-              channel: c,
-              onBack: V,
-              showBackButton: !0,
-              renderMessageInputActions: n,
-              onLeaveConversation: z,
-              onBlockParticipant: k
-            },
-            c.id
-          ) }) : /* @__PURE__ */ e(
-            Ae,
-            {
-              hasChannels: b,
-              onStartConversation: f ? _ : void 0,
-              participantLabel: S
+              className: T(
+                "messaging-conversation-view flex-1 flex-col min-w-0 min-h-0",
+                {
+                  // In direct conversation mode, always show (full width)
+                  flex: u || Z,
+                  // Normal mode: hide on mobile when no channel selected
+                  "hidden lg:flex": !u && !Z
+                }
+              ),
+              children: N ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
+                He,
+                {
+                  channel: N,
+                  onBack: k,
+                  showBackButton: !0,
+                  renderMessageInputActions: r,
+                  onLeaveConversation: Q,
+                  onBlockParticipant: he
+                },
+                N.id
+              ) }) : /* @__PURE__ */ e(
+                _e,
+                {
+                  hasChannels: y,
+                  onStartConversation: _ ? M : void 0,
+                  participantLabel: W
+                }
+              )
             }
           )
-        }
-      )
-    ] }),
-    N && // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    /* @__PURE__ */ e(
-      "dialog",
-      {
-        ref: u,
-        className: "mes-dialog",
-        onClick: (h) => {
-          h.target === u.current && G();
-        },
-        onClose: G,
-        children: /* @__PURE__ */ e("div", { className: "h-full w-full bg-white shadow-max-elevation-light", children: /* @__PURE__ */ e(
-          je,
+        ] }),
+        V && // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        /* @__PURE__ */ e(
+          "dialog",
           {
-            participantSource: N,
-            onSelectParticipant: W,
-            onClose: G,
-            existingParticipantIds: O,
-            participantLabel: S,
-            searchPlaceholder: `Search ${S}...`
-          },
-          R
-        ) })
-      }
-    )
-  ] });
-}, Ze = (t, s = {}) => {
-  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), w(null);
+            ref: L,
+            className: "mes-dialog",
+            onClick: (x) => {
+              x.target === L.current && A();
+            },
+            onClose: A,
+            children: /* @__PURE__ */ e("div", { className: "h-full w-full bg-white shadow-max-elevation-light", children: /* @__PURE__ */ e(
+              $e,
+              {
+                participantSource: V,
+                onSelectParticipant: B,
+                onClose: A,
+                existingParticipantIds: I,
+                participantLabel: W,
+                searchPlaceholder: `Search ${W}...`
+              },
+              P
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}, es = (t, s = {}) => {
+  const { initialSearch: r = "", pageSize: o = 20 } = s, [a, d] = v([]), [h, n] = v(!1), [l, w] = v(null), [f, b] = v(r), [i, N] = v(!0), [g, y] = v(), E = O(async (S = !1, P) => {
+    if (h) return;
+    const m = P !== void 0 ? P : f;
+    n(!0), w(null);
     try {
-      const f = await t.loadParticipants({
-        search: u || void 0,
-        limit: l,
-        cursor: R ? void 0 : b
+      const u = await t.loadParticipants({
+        search: m || void 0,
+        limit: o,
+        cursor: S ? void 0 : g
       });
-      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";
-      w(N), console.error("[useParticipants] Load error:", f);
+      d(
+        (C) => S ? u.participants : [...C, ...u.participants]
+      ), N(u.hasMore), y(u.nextCursor);
+    } catch (u) {
+      const C = u instanceof Error ? u.message : "Failed to load participants";
+      w(C), console.error("[useParticipants] Load error:", u);
     } finally {
-      r(!1);
+      n(!1);
     }
-  }, [t, x, b, l, d]), P = L(() => {
-    c && !d && I(!1);
-  }, [c, d, I]), O = L((R) => {
-    g(R), y(void 0), I(!0, R);
-  }, [I]), E = L(() => {
-    y(void 0), I(!0);
-  }, [I]);
-  return B(() => {
-    I(!0);
+  }, [t, f, g, o, h]), U = O(() => {
+    i && !h && E(!1);
+  }, [i, h, E]), D = O((S) => {
+    b(S), y(void 0), E(!0, S);
+  }, [E]), I = O(() => {
+    y(void 0), E(!0);
+  }, [E]);
+  return G(() => {
+    E(!0);
   }, [t.loadParticipants]), {
     participants: a,
-    loading: d,
-    error: o,
-    searchQuery: x,
-    hasMore: c,
+    loading: h,
+    error: l,
+    searchQuery: f,
+    hasMore: i,
     totalCount: t.totalCount,
-    loadMore: P,
-    search: O,
-    refresh: E
+    loadMore: U,
+    search: D,
+    refresh: I
   };
 };
 export {
-  Y as Avatar,
-  Oe as ChannelList,
-  Me as ChannelView,
-  Xe as MessagingProvider,
-  Qe as MessagingShell,
-  je as ParticipantPicker,
-  Pe as useMessaging,
-  Ze as useParticipants
+  se as Avatar,
+  pe as ChannelList,
+  He as ChannelView,
+  Je as MessagingProvider,
+  Ke as MessagingShell,
+  $e as ParticipantPicker,
+  Me as useMessaging,
+  es as useParticipants
 };
 //# sourceMappingURL=index.js.map