@linktr.ee/messaging-react 1.4.1 → 1.5.1-rc-1761642868

package/dist/index.js

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