@linktr.ee/messaging-react 1.10.0 → 1.11.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { jsx as e, jsxs as d, Fragment as fe } from "react/jsx-runtime";
+import { jsx as e, jsxs as c, Fragment as he } from "react/jsx-runtime";
 import R from "classnames";
-import q, { createContext as Se, useContext as ke, useCallback as P, useState as E, useRef as B, useEffect as $ } from "react";
+import q, { createContext as Se, useContext as ke, useCallback as _, useState as E, useRef as B, useEffect as H } from "react";
 import { StreamChatService as Re } from "@linktr.ee/messaging-core";
-import { Chat as pe, ChannelList as Fe, useMessageComposer as Te, useStateStore as De, MessageInput as Pe, useMessageInputContext as Me, useMessageComposerHasSendableData as Le, SimpleAttachmentSelector as Ue, QuotedMessagePreview as _e, AttachmentPreviewList as Oe, TextareaComposer as je, Channel as Ae, useChannelStateContext as he, Window as ze, MessageList as Be } from "stream-chat-react";
-import { XIcon as le, ArrowUpIcon as $e, ArrowLeftIcon as ae, DotsThreeIcon as ie, SpinnerGapIcon as ee, SignOutIcon as He, ProhibitInsetIcon as ce, FlagIcon as Ge, MagnifyingGlassIcon as Ve, ChatCircleDotsIcon as de } from "@phosphor-icons/react";
+import { Chat as pe, ChannelList as Fe, useMessageComposer as Te, useStateStore as De, MessageInput as _e, useMessageInputContext as Me, useMessageComposerHasSendableData as Pe, SimpleAttachmentSelector as Le, QuotedMessagePreview as Ue, AttachmentPreviewList as Oe, TextareaComposer as je, MessageTimestamp as Ae, Channel as ze, useChannelStateContext as fe, Window as Be, MessageList as He } from "stream-chat-react";
+import { XIcon as le, ArrowUpIcon as $e, ArrowLeftIcon as ae, DotsThreeIcon as ie, SpinnerGapIcon as ee, SignOutIcon as Ge, ProhibitInsetIcon as ce, FlagIcon as Ve, MagnifyingGlassIcon as We, ChatCircleDotsIcon as de } from "@phosphor-icons/react";
 import { LinkPreviewsManager as ue } from "stream-chat";
 const ge = Se({
   service: null,
@@ -15,7 +15,7 @@ const ge = Se({
   refreshConnection: async () => {
   },
   debug: !1
-}), se = () => ke(ge), ws = ({
+}), se = () => ke(ge), ys = ({
   children: t,
   user: s,
   serviceConfig: n,
@@ -23,7 +23,7 @@ const ge = Se({
   capabilities: o = {},
   debug: a = !1
 }) => {
-  const r = P(
+  const r = _(
     (u, ...N) => {
       a && console.log(`🔥 [MessagingProvider] ${u}`, ...N);
     },
@@ -35,7 +35,7 @@ const ge = Se({
     serviceConfig: !!n,
     capabilities: Object.keys(o)
   });
-  const [i, m] = E(null), [x, k] = E(null), [f, h] = E(!1), [I, g] = E(!1), [C, w] = E(null), v = B(!1), y = B({
+  const [i, m] = E(null), [x, k] = E(null), [h, f] = E(!1), [y, g] = E(!1), [C, w] = E(null), v = B(!1), I = B({
     userId: s == null ? void 0 : s.id,
     apiKey: l,
     serviceConfig: n,
@@ -45,17 +45,17 @@ const ge = Se({
     renderCount: S.current,
     currentProps: { userId: s == null ? void 0 : s.id, apiKey: (l == null ? void 0 : l.substring(0, 8)) + "..." },
     propChanges: {
-      userChanged: y.current.userId !== (s == null ? void 0 : s.id),
-      apiKeyChanged: y.current.apiKey !== l,
-      serviceConfigChanged: y.current.serviceConfig !== n,
-      capabilitiesChanged: y.current.capabilities !== o
+      userChanged: I.current.userId !== (s == null ? void 0 : s.id),
+      apiKeyChanged: I.current.apiKey !== l,
+      serviceConfigChanged: I.current.serviceConfig !== n,
+      capabilitiesChanged: I.current.capabilities !== o
     }
-  }), y.current = {
+  }), I.current = {
     userId: s == null ? void 0 : s.id,
     apiKey: l,
     serviceConfig: n,
     capabilities: o
-  }, $(() => {
+  }, H(() => {
     const u = S.current;
     if (r("🔧 SERVICE INIT EFFECT TRIGGERED", {
       renderCount: u,
@@ -64,8 +64,8 @@ const ge = Se({
       dependencies: {
         apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
         serviceConfigRef: n,
-        serviceConfigStable: y.current.serviceConfig === n,
-        apiKeyStable: y.current.apiKey === l
+        serviceConfigStable: I.current.serviceConfig === n,
+        apiKeyStable: I.current.apiKey === l
       }
     }), !l || !n) {
       r("⚠️ SERVICE INIT SKIPPED", {
@@ -77,7 +77,7 @@ const ge = Se({
     r("🚀 CREATING NEW SERVICE", {
       renderCount: u,
       apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
-      serviceConfigChanged: y.current.serviceConfig !== n
+      serviceConfigChanged: I.current.serviceConfig !== n
     });
     const N = new Re({
       ...n,
@@ -95,14 +95,14 @@ const ge = Se({
     };
   }, [l, n, a, r]);
   const p = B(null);
-  $(() => {
+  H(() => {
     var N, j;
     if (r("🔗 USER CONNECTION EFFECT TRIGGERED", {
       hasService: !!i,
       hasUser: !!s,
       userId: s == null ? void 0 : s.id,
       isConnecting: v.current,
-      isConnected: f,
+      isConnected: h,
       dependencies: { service: !!i, userId: s == null ? void 0 : s.id }
     }), !i || !s) {
       r("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
@@ -124,7 +124,7 @@ const ge = Se({
       try {
         r("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
         const A = await i.connectUser(s);
-        k(A), h(!0), p.current = { serviceId: i, userId: s.id }, r("✅ USER CONNECTION SUCCESS", {
+        k(A), f(!0), p.current = { serviceId: i, userId: s.id }, r("✅ USER CONNECTION SUCCESS", {
           userId: s.id,
           clientId: A.userID
         });
@@ -137,23 +137,23 @@ const ge = Se({
       } finally {
         g(!1), v.current = !1, r("🔄 USER CONNECTION FINISHED", {
           userId: s.id,
-          isConnected: f
+          isConnected: h
         });
       }
     })();
-  }, [i, s, r, f]), $(() => (r("🔌 CLEANUP EFFECT REGISTERED", {
+  }, [i, s, r, h]), H(() => (r("🔌 CLEANUP EFFECT REGISTERED", {
     hasService: !!i,
-    isConnected: f
+    isConnected: h
   }), () => {
-    i && f ? (r(
+    i && h ? (r(
       "🧹 CLEANUP EFFECT TRIGGERED",
       "Cleaning up connection on unmount"
     ), p.current = null, i.disconnectUser().catch(console.error)) : r("🔇 CLEANUP EFFECT SKIPPED", {
       hasService: !!i,
-      isConnected: f
+      isConnected: h
     });
-  }), [i, f, r]);
-  const T = P(async () => {
+  }), [i, h, r]);
+  const T = _(async () => {
     if (r("🔄 REFRESH CONNECTION CALLED", {
       hasService: !!i,
       hasUser: !!s
@@ -165,7 +165,7 @@ const ge = Se({
     try {
       r("🔌 DISCONNECTING FOR REFRESH"), await i.disconnectUser(), r("📞 RECONNECTING FOR REFRESH");
       const u = await i.connectUser(s);
-      k(u), h(!0), w(null), r("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
+      k(u), f(!0), w(null), r("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
     } catch (u) {
       const N = u instanceof Error ? u.message : "Refresh failed";
       w(N), r("❌ CONNECTION REFRESH ERROR", {
@@ -175,18 +175,18 @@ const ge = Se({
     } finally {
       g(!1), r("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
     }
-  }, [i, s, r]), c = q.useMemo(() => (r("💫 CONTEXT VALUE MEMOIZATION", {
+  }, [i, s, r]), d = q.useMemo(() => (r("💫 CONTEXT VALUE MEMOIZATION", {
     hasService: !!i,
     hasClient: !!x,
-    isConnected: f,
-    isLoading: I,
+    isConnected: h,
+    isLoading: y,
     hasError: !!C,
     capabilitiesKeys: Object.keys(o)
   }), {
     service: i,
     client: x,
-    isConnected: f,
-    isLoading: I,
+    isConnected: h,
+    isLoading: y,
     error: C,
     capabilities: o,
     refreshConnection: T,
@@ -194,8 +194,8 @@ const ge = Se({
   }), [
     i,
     x,
-    f,
-    I,
+    h,
+    y,
     C,
     o,
     T,
@@ -204,21 +204,21 @@ const ge = Se({
   ]);
   return r("🔄 RENDER END", {
     renderCount: S.current,
-    willRenderChat: !!(x && f),
-    contextValueReady: !!c
-  }), /* @__PURE__ */ e(ge.Provider, { value: c, children: x && f ? /* @__PURE__ */ e(pe, { client: x, children: t }) : t });
-}, We = () => se(), qe = (t, s) => {
+    willRenderChat: !!(x && h),
+    contextValueReady: !!d
+  }), /* @__PURE__ */ e(ge.Provider, { value: d, children: x && h ? /* @__PURE__ */ e(pe, { client: x, children: t }) : t });
+}, qe = () => se(), Ye = (t, s) => {
   const n = new Date(
     Date.UTC(t.getUTCFullYear(), t.getUTCMonth(), t.getUTCDate())
   ), o = new Date(
     Date.UTC(s.getUTCFullYear(), s.getUTCMonth(), s.getUTCDate())
   ).getTime() - n.getTime();
   return Math.floor(o / (1e3 * 60 * 60 * 24));
-}, Ye = (t) => {
+}, Je = (t) => {
   const s = /* @__PURE__ */ new Date();
   if (Math.floor((s.getTime() - t.getTime()) / 1e3) < 60)
     return "Just now";
-  const l = qe(t, s);
+  const l = Ye(t, s);
   return l === 0 ? t.toLocaleTimeString([], {
     hour: "numeric",
     minute: "2-digit"
@@ -255,7 +255,7 @@ const ge = Se({
   "🍈"
   // Melon
 ];
-function Je(t) {
+function Qe(t) {
   let s = 0;
   for (let n = 0; n < t.length; n++) {
     const l = t.charCodeAt(n);
@@ -263,8 +263,8 @@ function Je(t) {
   }
   return Math.abs(s);
 }
-function Qe(t) {
-  const n = Je(t) % me.length;
+function Xe(t) {
+  const n = Qe(t) % me.length;
   return me[n];
 }
 const Y = ({
@@ -274,7 +274,7 @@ const Y = ({
   className: l,
   shape: o = "squircle"
 }) => {
-  const a = Qe(t), i = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg", m = o === "circle" ? { borderRadius: "50%" } : {
+  const a = Xe(t), i = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg", m = o === "circle" ? { borderRadius: "50%" } : {
     borderRadius: "33%",
     "corner-shape": "superellipse(1.3)"
   };
@@ -307,21 +307,21 @@ const Y = ({
       )
     }
   );
-}, Xe = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: l = !1, unread: o }) => {
-  var w, v, y, S, p, T;
+}, Ze = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: l = !1, unread: o }) => {
+  var w, v, I, S, p, T;
   const a = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), r = () => {
     t && n(t);
   }, m = Object.values(((w = t == null ? void 0 : t.state) == null ? void 0 : w.members) || {}).find(
-    (c) => {
+    (d) => {
       var u, N;
-      return ((u = c.user) == null ? void 0 : u.id) && c.user.id !== ((N = t == null ? void 0 : t._client) == null ? void 0 : N.userID);
+      return ((u = d.user) == null ? void 0 : u.id) && d.user.id !== ((N = t == null ? void 0 : t._client) == null ? void 0 : N.userID);
     }
-  ), x = ((v = m == null ? void 0 : m.user) == null ? void 0 : v.name) || "Conversation", k = (y = m == null ? void 0 : m.user) == null ? void 0 : y.image, f = (p = (S = t == null ? void 0 : t.state) == null ? void 0 : S.messages) == null ? void 0 : p[t.state.messages.length - 1], I = (() => {
+  ), x = ((v = m == null ? void 0 : m.user) == null ? void 0 : v.name) || "Conversation", k = (I = m == null ? void 0 : m.user) == null ? void 0 : I.image, h = (p = (S = t == null ? void 0 : t.state) == null ? void 0 : S.messages) == null ? void 0 : p[t.state.messages.length - 1], y = (() => {
     var u;
-    if (f != null && f.text) return f.text;
-    const c = (u = f == null ? void 0 : f.attachments) == null ? void 0 : u[0];
-    return c != null && c.asset_url ? c.asset_url : c != null && c.image_url ? c.image_url : c != null && c.og_scrape_url ? c.og_scrape_url : c != null && c.thumb_url ? c.thumb_url : "No messages yet";
-  })(), g = f != null && f.created_at ? Ye(new Date(f.created_at)) : "", C = o ?? 0;
+    if (h != null && h.text) return h.text;
+    const d = (u = h == null ? void 0 : h.attachments) == null ? void 0 : u[0];
+    return d != null && d.asset_url ? d.asset_url : d != null && d.image_url ? d.image_url : d != null && d.og_scrape_url ? d.og_scrape_url : d != null && d.thumb_url ? d.thumb_url : "No messages yet";
+  })(), g = h != null && h.created_at ? Je(new Date(h.created_at)) : "", C = o ?? 0;
   return l && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
     channelId: t == null ? void 0 : t.id,
     isSelected: a,
@@ -340,7 +340,7 @@ const Y = ({
           "hover:bg-sand": !a
         }
       ),
-      children: /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
+      children: /* @__PURE__ */ c("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
           Y,
           {
@@ -351,8 +351,8 @@ const Y = ({
             className: "[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
           }
         ),
-        /* @__PURE__ */ d("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
-          /* @__PURE__ */ d("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",
               {
@@ -365,15 +365,15 @@ const Y = ({
             ),
             g && /* @__PURE__ */ e("span", { className: "text-xs text-stone flex-shrink-0", children: g })
           ] }),
-          /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
-            /* @__PURE__ */ e("p", { className: "text-xs text-stone mr-2 flex-1 line-clamp-2", children: I }),
+          /* @__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: y }),
             C > 0 && /* @__PURE__ */ e("span", { className: "bg-[#7f22fe] text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0", children: C > 99 ? "99+" : C })
           ] })
         ] })
       ] })
     }
   );
-}, Ze = ({
+}, Ke = ({
   onChannelSelect: t,
   selectedChannel: s,
   filters: n,
@@ -410,7 +410,7 @@ const Y = ({
               selectedChannelId: s == null ? void 0 : s.id,
               isSelected: (s == null ? void 0 : s.id) === ((x = i.channel) == null ? void 0 : x.id)
             }), /* @__PURE__ */ e(
-              Xe,
+              Ze,
               {
                 ...i,
                 selectedChannel: s,
@@ -444,7 +444,7 @@ const Y = ({
   }
 );
 function xe({ label: t, className: s, children: n, ...l }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "button",
     {
       type: "button",
@@ -467,16 +467,16 @@ function xe({ label: t, className: s, children: n, ...l }) {
 function Ne({ onClick: t }) {
   return /* @__PURE__ */ e(xe, { label: "Close", onClick: t, className: "p-1", children: /* @__PURE__ */ e(le, { className: "h-5 w-5 text-stone", weight: "bold" }) });
 }
-const Ke = (t) => ({
+const es = (t) => ({
   linkPreviews: Array.from(t.previews.values()).filter(
     (s) => ue.previewIsLoaded(s) || ue.previewIsLoading(s)
   )
-}), es = ({
+}), ss = ({
   link: t,
   onDismiss: s
 }) => {
   const { og_scrape_url: n, title: l, image_url: o } = t;
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ c(
     "a",
     {
       href: n,
@@ -504,22 +504,22 @@ const Ke = (t) => ({
             children: /* @__PURE__ */ e(le, { className: "size-4 text-black/90" })
           }
         ),
-        /* @__PURE__ */ d("div", { className: "p-2", children: [
+        /* @__PURE__ */ c("div", { className: "p-2", children: [
           l && /* @__PURE__ */ e("div", { className: "text-[14px] font-medium leading-5 text-white", children: l }),
           /* @__PURE__ */ e("div", { className: "text-[12px] leading-4 text-white/55", children: n })
         ] })
       ]
     }
   );
-}, ss = () => {
+}, ts = () => {
   const { linkPreviewsManager: t } = Te(), { linkPreviews: s } = De(
     t.state,
-    Ke
+    es
   ), n = (o) => {
     t.dismissPreview(o);
   };
   return s.length > 0 ? /* @__PURE__ */ e("div", { className: "str-chat__link-preview-list p-0 gap-2 mb-4", children: s.map((o) => /* @__PURE__ */ e(
-    es,
+    ss,
     {
       link: o,
       onDismiss: n
@@ -527,14 +527,14 @@ const Ke = (t) => ({
     o.og_scrape_url
   )) }) : null;
 }, ns = () => {
-  const { handleSubmit: t } = Me(), s = Le();
-  return /* @__PURE__ */ d(fe, { children: [
-    /* @__PURE__ */ e("div", { className: "left-container", children: /* @__PURE__ */ e(Ue, {}) }),
-    /* @__PURE__ */ d("div", { className: "central-container min-w-0 w-full p-2 bg-white rounded-lg shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]", children: [
-      /* @__PURE__ */ e(_e, {}),
-      /* @__PURE__ */ e(ss, {}),
+  const { handleSubmit: t } = Me(), s = Pe();
+  return /* @__PURE__ */ c(he, { children: [
+    /* @__PURE__ */ e("div", { className: "left-container", children: /* @__PURE__ */ e(Le, {}) }),
+    /* @__PURE__ */ c("div", { className: "central-container min-w-0 w-full p-2 bg-white rounded-lg shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]", children: [
+      /* @__PURE__ */ e(Ue, {}),
+      /* @__PURE__ */ e(ts, {}),
       /* @__PURE__ */ e(Oe, {}),
-      /* @__PURE__ */ d("div", { className: "flex", children: [
+      /* @__PURE__ */ c("div", { className: "flex", children: [
         /* @__PURE__ */ e("div", { className: "w-full ml-2 mr-4", children: /* @__PURE__ */ e(
           je,
           {
@@ -557,24 +557,34 @@ const Ke = (t) => ({
       ] })
     ] })
   ] });
-}, ts = ({
+}, rs = ({
   renderActions: t
-}) => /* @__PURE__ */ d("div", { className: "message-input flex items-center gap-2 p-4", children: [
+}) => /* @__PURE__ */ c("div", { className: "message-input flex items-center gap-2 p-4", children: [
   t && (t == null ? void 0 : t()),
-  /* @__PURE__ */ e(Pe, { Input: ns })
-] }), be = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
+  /* @__PURE__ */ e(_e, { Input: ns })
+] }), ls = (t) => {
+  const s = t.message.hide_date === !0;
+  return /* @__PURE__ */ c("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
+    /* @__PURE__ */ c("div", { className: "str-chat__message--system__text", children: [
+      /* @__PURE__ */ e("div", { className: "str-chat__message--system__line" }),
+      /* @__PURE__ */ e("p", { children: t.message.text }),
+      /* @__PURE__ */ e("div", { className: "str-chat__message--system__line" })
+    ] }),
+    !s && /* @__PURE__ */ e(Ae, { message: t.message })
+  ] });
+}, be = () => /* @__PURE__ */ e("div", { className: "messaging-channel-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("h2", { className: "font-semibold text-charcoal mb-2", children: "No messages yet 👀" }),
   /* @__PURE__ */ e("p", { className: "text-stone text-xs", children: "Share to social media to generate more conversations" })
-] }) }), rs = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: l }) => {
-  var m, x, k, f, h;
-  const { channel: o } = he(), a = q.useMemo(() => Object.values(o.state.members || {}).find(
+] }) }), os = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: l }) => {
+  var m, x, k, h, f;
+  const { channel: o } = fe(), a = q.useMemo(() => Object.values(o.state.members || {}).find(
     (g) => {
       var C;
       return ((C = g.user) == null ? void 0 : C.id) && g.user.id !== o._client.userID;
     }
   ), [o._client.userID, o.state.members]), r = ((m = a == null ? void 0 : a.user) == null ? void 0 : m.name) || ((x = a == null ? void 0 : a.user) == null ? void 0 : x.id) || "Unknown member", i = (k = a == null ? void 0 : a.user) == null ? void 0 : k.image;
-  return /* @__PURE__ */ d("div", { className: "@container", children: [
-    /* @__PURE__ */ d("div", { className: "flex justify-between items-center @md:hidden", children: [
+  return /* @__PURE__ */ c("div", { className: "@container", children: [
+    /* @__PURE__ */ c("div", { className: "flex justify-between items-center @md:hidden", children: [
       /* @__PURE__ */ e(
         "button",
         {
@@ -587,11 +597,11 @@ const Ke = (t) => ({
           children: /* @__PURE__ */ e(ae, { className: "size-5 text-black/90" })
         }
       ),
-      /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 items-center", children: [
+      /* @__PURE__ */ c("div", { className: "flex flex-col gap-1 items-center", children: [
         /* @__PURE__ */ e(
           Y,
           {
-            id: ((f = a == null ? void 0 : a.user) == null ? void 0 : f.id) || o.id || "unknown",
+            id: ((h = a == null ? void 0 : a.user) == null ? void 0 : h.id) || o.id || "unknown",
             name: r,
             image: i,
             size: 40
@@ -611,8 +621,8 @@ const Ke = (t) => ({
         }
       )
     ] }),
-    /* @__PURE__ */ d("div", { className: "hidden @md:flex items-center justify-between gap-3 min-h-12", children: [
-      /* @__PURE__ */ d("div", { className: "flex items-center gap-4 min-w-0", children: [
+    /* @__PURE__ */ c("div", { className: "hidden @md:flex items-center justify-between gap-3 min-h-12", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-4 min-w-0", children: [
         s && t && /* @__PURE__ */ e(
           "button",
           {
@@ -626,7 +636,7 @@ const Ke = (t) => ({
         /* @__PURE__ */ e(
           Y,
           {
-            id: ((h = a == null ? void 0 : a.user) == null ? void 0 : h.id) || o.id || "unknown",
+            id: ((f = a == null ? void 0 : a.user) == null ? void 0 : f.id) || o.id || "unknown",
             name: r,
             image: i,
             size: 40
@@ -646,7 +656,7 @@ const Ke = (t) => ({
       )
     ] })
   ] });
-}, ls = ({
+}, as = ({
   isOpen: t,
   onClose: s,
   participant: n,
@@ -655,23 +665,23 @@ const Ke = (t) => ({
   onLeaveConversation: a,
   onBlockParticipant: r
 }) => {
-  var W, O, G, J, H, V, Q;
-  const { service: i, debug: m } = se(), x = B(null), [k, f] = E(!1), [h, I] = E(!1), [g, C] = E(!1);
-  $(() => {
+  var W, O, G, J, $, V, Q;
+  const { service: i, debug: m } = se(), x = B(null), [k, h] = E(!1), [f, y] = E(!1), [g, C] = E(!1);
+  H(() => {
     const F = x.current;
     F && (t ? F.showModal() : F.close());
   }, [t]);
-  const w = P(async () => {
+  const w = _(async () => {
     var F;
     if (!(!i || !((F = n == null ? void 0 : n.user) != null && F.id)))
       try {
-        const L = (await i.getBlockedUsers()).some(
-          (U) => {
+        const P = (await i.getBlockedUsers()).some(
+          (L) => {
             var X;
-            return U.blocked_user_id === ((X = n == null ? void 0 : n.user) == null ? void 0 : X.id);
+            return L.blocked_user_id === ((X = n == null ? void 0 : n.user) == null ? void 0 : X.id);
           }
         );
-        f(L);
+        h(P);
       } catch (M) {
         console.error(
           "[ChannelInfoDialog] Failed to check blocked status:",
@@ -679,42 +689,42 @@ const Ke = (t) => ({
         );
       }
   }, [i, (W = n == null ? void 0 : n.user) == null ? void 0 : W.id]);
-  $(() => {
+  H(() => {
     t && w();
   }, [t, w]);
   const v = async () => {
     var F;
-    if (!h) {
-      m && console.log("[ChannelInfoDialog] Leave conversation", l.cid), I(!0);
+    if (!f) {
+      m && console.log("[ChannelInfoDialog] Leave conversation", l.cid), y(!0);
       try {
         const M = ((F = l._client) == null ? void 0 : F.userID) ?? null;
         await l.hide(M, !1), a && await a(l), s();
       } catch (M) {
         console.error("[ChannelInfoDialog] Failed to leave conversation", M);
       } finally {
-        I(!1);
+        y(!1);
       }
     }
-  }, y = async () => {
-    var F, M, L;
+  }, I = async () => {
+    var F, M, P;
     if (!(g || !i)) {
       m && console.log("[ChannelInfoDialog] Block member", (F = n == null ? void 0 : n.user) == null ? void 0 : F.id), C(!0);
       try {
-        await i.blockUser((M = n == null ? void 0 : n.user) == null ? void 0 : M.id), r && await r((L = n == null ? void 0 : n.user) == null ? void 0 : L.id), s();
-      } catch (U) {
-        console.error("[ChannelInfoDialog] Failed to block member", U);
+        await i.blockUser((M = n == null ? void 0 : n.user) == null ? void 0 : M.id), r && await r((P = n == null ? void 0 : n.user) == null ? void 0 : P.id), s();
+      } catch (L) {
+        console.error("[ChannelInfoDialog] Failed to block member", L);
       } finally {
         C(!1);
       }
     }
   }, S = async () => {
-    var F, M, L;
+    var F, M, P;
     if (!(g || !i)) {
       m && console.log("[ChannelInfoDialog] Unblock member", (F = n == null ? void 0 : n.user) == null ? void 0 : F.id), C(!0);
       try {
-        await i.unBlockUser((M = n == null ? void 0 : n.user) == null ? void 0 : M.id), r && await r((L = n == null ? void 0 : n.user) == null ? void 0 : L.id), s();
-      } catch (U) {
-        console.error("[ChannelInfoDialog] Failed to unblock member", U);
+        await i.unBlockUser((M = n == null ? void 0 : n.user) == null ? void 0 : M.id), r && await r((P = n == null ? void 0 : n.user) == null ? void 0 : P.id), s();
+      } catch (L) {
+        console.error("[ChannelInfoDialog] Failed to unblock member", L);
       } finally {
         C(!1);
       }
@@ -727,7 +737,7 @@ const Ke = (t) => ({
     );
   };
   if (!n) return null;
-  const T = ((O = n.user) == null ? void 0 : O.name) || ((G = n.user) == null ? void 0 : G.id) || "Unknown member", c = (J = n.user) == null ? void 0 : J.image, u = (H = n.user) == null ? void 0 : H.email, N = (V = n.user) == null ? void 0 : V.username, j = u || (N ? `linktr.ee/${N}` : void 0), A = ((Q = n.user) == null ? void 0 : Q.id) || "unknown";
+  const T = ((O = n.user) == null ? void 0 : O.name) || ((G = n.user) == null ? void 0 : G.id) || "Unknown member", d = (J = n.user) == null ? void 0 : J.image, u = ($ = n.user) == null ? void 0 : $.email, N = (V = n.user) == null ? void 0 : V.username, j = u || (N ? `linktr.ee/${N}` : void 0), A = ((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(
@@ -739,29 +749,29 @@ const Ke = (t) => ({
         onClick: (F) => {
           F.target === x.current && s();
         },
-        children: /* @__PURE__ */ d("div", { className: "ml-auto flex h-full w-full flex-col bg-white shadow-max-elevation-light", children: [
-          /* @__PURE__ */ d("div", { className: "flex items-center justify-between border-b border-sand px-4 py-3", children: [
+        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(Ne, { onClick: s })
           ] }),
-          /* @__PURE__ */ d("div", { className: "flex-1 px-2 overflow-y-auto w-full", children: [
+          /* @__PURE__ */ c("div", { className: "flex-1 px-2 overflow-y-auto w-full", children: [
             /* @__PURE__ */ e(
               "div",
               {
                 className: "flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]",
                 style: { backgroundColor: "#FBFAF9" },
-                children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3 w-full", children: [
+                children: /* @__PURE__ */ c("div", { className: "flex items-center gap-3 w-full", children: [
                   /* @__PURE__ */ e(
                     Y,
                     {
                       id: A,
                       name: T,
-                      image: c,
+                      image: d,
                       size: 88,
                       shape: "circle"
                     }
                   ),
-                  /* @__PURE__ */ d("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                  /* @__PURE__ */ c("div", { className: "flex flex-col min-w-0 flex-1", children: [
                     /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: T }),
                     j && /* @__PURE__ */ e("p", { className: "truncate text-sm text-[#00000055]", children: j }),
                     o && /* @__PURE__ */ e(
@@ -782,20 +792,20 @@ const Ke = (t) => ({
                 ] })
               }
             ),
-            /* @__PURE__ */ d("ul", { className: "flex flex-col gap-2 mt-2", children: [
-              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
+            /* @__PURE__ */ c("ul", { className: "flex flex-col gap-2 mt-2", children: [
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
                 K,
                 {
                   onClick: v,
-                  disabled: h,
-                  "aria-busy": h,
+                  disabled: f,
+                  "aria-busy": f,
                   children: [
-                    h ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(He, { className: "h-5 w-5" }),
+                    f ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(Ge, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Delete Conversation" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: k ? /* @__PURE__ */ d(
+              /* @__PURE__ */ e("li", { children: k ? /* @__PURE__ */ c(
                 K,
                 {
                   onClick: S,
@@ -806,10 +816,10 @@ const Ke = (t) => ({
                     /* @__PURE__ */ e("span", { children: "Unblock" })
                   ]
                 }
-              ) : /* @__PURE__ */ d(
+              ) : /* @__PURE__ */ c(
                 K,
                 {
-                  onClick: y,
+                  onClick: I,
                   disabled: g,
                   "aria-busy": g,
                   children: [
@@ -818,8 +828,8 @@ const Ke = (t) => ({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(K, { variant: "danger", onClick: p, children: [
-                /* @__PURE__ */ e(Ge, { className: "h-5 w-5" }),
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(K, { variant: "danger", onClick: p, children: [
+                /* @__PURE__ */ e(Ve, { className: "h-5 w-5" }),
                 /* @__PURE__ */ e("span", { children: "Report" })
               ] }) })
             ] })
@@ -828,7 +838,7 @@ const Ke = (t) => ({
       }
     )
   );
-}, os = ({
+}, is = ({
   onBack: t,
   showBackButton: s,
   renderMessageInputActions: n,
@@ -836,23 +846,23 @@ const Ke = (t) => ({
   onBlockParticipant: o,
   CustomChannelEmptyState: a = be
 }) => {
-  var h, I;
-  const { channel: r } = he(), [i, m] = E(!1), x = (((I = (h = r == null ? void 0 : r.state) == null ? void 0 : h.messages) == null ? void 0 : I.length) ?? 0) > 0, k = q.useMemo(() => Object.values(r.state.members || {}).find(
+  var f, y;
+  const { channel: r } = fe(), [i, m] = E(!1), x = (((y = (f = r == null ? void 0 : r.state) == null ? void 0 : f.messages) == null ? void 0 : y.length) ?? 0) > 0, k = q.useMemo(() => Object.values(r.state.members || {}).find(
     (C) => {
       var w;
       return ((w = C.user) == null ? void 0 : w.id) && C.user.id !== r._client.userID;
     }
-  ), [r._client.userID, r.state.members]), f = q.useMemo(() => {
+  ), [r._client.userID, r.state.members]), h = q.useMemo(() => {
     const g = r.data ?? {};
     if (g.followerStatus)
       return String(g.followerStatus);
     if (g.isFollower !== void 0)
       return g.isFollower ? "Subscribed to you" : "Not subscribed";
   }, [r.data]);
-  return /* @__PURE__ */ d(fe, { children: [
-    /* @__PURE__ */ d(ze, { children: [
+  return /* @__PURE__ */ c(he, { children: [
+    /* @__PURE__ */ c(Be, { children: [
       /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
-        rs,
+        os,
         {
           onBack: t,
           showBackButton: s,
@@ -860,9 +870,9 @@ const Ke = (t) => ({
           canShowInfo: !!k
         }
       ) }),
-      /* @__PURE__ */ d("div", { className: "flex-1 overflow-hidden relative", children: [
+      /* @__PURE__ */ c("div", { className: "flex-1 overflow-hidden relative", children: [
         /* @__PURE__ */ e(
-          Be,
+          He,
           {
             hideDeletedMessages: !0,
             hideNewMessageSeparator: !1,
@@ -872,26 +882,26 @@ const Ke = (t) => ({
         !x && a && /* @__PURE__ */ e("div", { className: "absolute inset-0 w-full h-full", children: /* @__PURE__ */ e(a, {}) })
       ] }),
       /* @__PURE__ */ e(
-        ts,
+        rs,
         {
           renderActions: () => n == null ? void 0 : n(r)
         }
       )
     ] }),
     /* @__PURE__ */ e(
-      ls,
+      as,
       {
         isOpen: i,
         onClose: () => m(!1),
         participant: k,
         channel: r,
-        followerStatusLabel: f,
+        followerStatusLabel: h,
         onLeaveConversation: l,
         onBlockParticipant: o
       }
     )
   ] });
-}, as = ({
+}, cs = ({
   channel: t,
   onBack: s,
   showBackButton: n = !1,
@@ -907,8 +917,8 @@ const Ke = (t) => ({
       "messaging-channel-view h-full flex flex-col bg-[#FBFAF9]",
       r
     ),
-    children: /* @__PURE__ */ e(Ae, { channel: t, children: /* @__PURE__ */ e(
-      os,
+    children: /* @__PURE__ */ e(ze, { channel: t, MessageSystem: ls, children: /* @__PURE__ */ e(
+      is,
       {
         onBack: s,
         showBackButton: n,
@@ -920,15 +930,15 @@ const Ke = (t) => ({
     ) })
   }
 );
-function is({
+function ds({
   searchQuery: t,
   setSearchQuery: s,
   placeholder: n
 }) {
   const l = B(null);
-  return /* @__PURE__ */ d("div", { className: "relative", children: [
+  return /* @__PURE__ */ c("div", { className: "relative", children: [
     /* @__PURE__ */ e(
-      Ve,
+      We,
       {
         className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone",
         weight: "bold"
@@ -959,7 +969,7 @@ function is({
     )
   ] });
 }
-const cs = ({
+const us = ({
   participantSource: t,
   onSelectParticipant: s,
   onClose: n,
@@ -968,26 +978,26 @@ const cs = ({
   searchPlaceholder: a = "Search participants...",
   className: r
 }) => {
-  const { debug: i } = se(), [m, x] = E(""), [k, f] = E([]), [h, I] = E(!1), [g, C] = E(null), [w, v] = E(
+  const { debug: i } = se(), [m, x] = E(""), [k, h] = E([]), [f, y] = E(!1), [g, C] = E(null), [w, v] = E(
     null
-  ), y = B(!1);
-  $(() => {
+  ), I = B(!1);
+  H(() => {
     if (t.loading) {
       i && console.log(
         "[ParticipantPicker] Waiting for participant source to finish loading..."
       );
       return;
     }
-    if (y.current) return;
+    if (I.current) return;
     (async () => {
-      i && console.log("[ParticipantPicker] Loading initial participants..."), I(!0), C(null);
+      i && console.log("[ParticipantPicker] Loading initial participants..."), y(!0), C(null);
       try {
         const u = await t.loadParticipants({
           search: "",
           // Load all participants initially
           limit: 100
         });
-        f(u.participants), y.current = !0, i && console.log(
+        h(u.participants), I.current = !0, i && console.log(
           "[ParticipantPicker] Participants loaded successfully:",
           u.participants.length
         );
@@ -995,37 +1005,37 @@ const cs = ({
         const N = u instanceof Error ? u.message : "Failed to load participants";
         C(N), console.error("[ParticipantPicker] Failed to load participants:", u);
       } finally {
-        I(!1);
+        y(!1);
       }
     })();
   }, [t.loading, i]);
-  const S = k.filter((c) => !l.has(c.id)).filter((c) => {
+  const S = k.filter((d) => !l.has(d.id)).filter((d) => {
     var N;
     if (!m) return !0;
     const u = m.toLowerCase();
-    return c.name.toLowerCase().includes(u) || ((N = c.email) == null ? void 0 : N.toLowerCase().includes(u)) || !1;
-  }), p = P(
-    async (c) => {
+    return d.name.toLowerCase().includes(u) || ((N = d.email) == null ? void 0 : N.toLowerCase().includes(u)) || !1;
+  }), p = _(
+    async (d) => {
       if (!w) {
-        v(c.id);
+        v(d.id);
         try {
-          await s(c);
+          await s(d);
         } catch (u) {
           console.error("[ParticipantPicker] Failed to start chat:", u), v(null);
         }
       }
     },
     [s, w]
-  ), T = (c, u) => {
-    (c.key === "Enter" || c.key === " ") && (c.preventDefault(), p(u));
+  ), T = (d, u) => {
+    (d.key === "Enter" || d.key === " ") && (d.preventDefault(), p(u));
   };
-  return /* @__PURE__ */ d("div", { className: R("flex flex-col h-full", r), children: [
-    /* @__PURE__ */ d("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: [
-      /* @__PURE__ */ d("div", { className: "flex items-center justify-between mb-3", children: [
+  return /* @__PURE__ */ c("div", { className: R("flex flex-col h-full", r), 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(Ne, { onClick: n })
       ] }),
-      /* @__PURE__ */ d("p", { className: "text-xs text-stone mb-3", children: [
+      /* @__PURE__ */ c("p", { className: "text-xs text-stone mb-3", children: [
         "Select a ",
         o.slice(0, -1),
         " to start messaging (",
@@ -1034,7 +1044,7 @@ const cs = ({
         t.totalCount !== void 0 && ` • ${t.totalCount} ${o} total`
       ] }),
       /* @__PURE__ */ e(
-        is,
+        ds,
         {
           searchQuery: m,
           setSearchQuery: x,
@@ -1042,65 +1052,65 @@ const cs = ({
         }
       )
     ] }),
-    g && /* @__PURE__ */ d("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 ",
       o,
       ": ",
       g
     ] }),
-    /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: h && S.length === 0 ? /* @__PURE__ */ e("div", { className: "h-32 flex items-center justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
+    /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: f && S.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__ */ d("span", { className: "text-sm text-stone", children: [
+      /* @__PURE__ */ c("span", { className: "text-sm text-stone", children: [
         "Loading ",
         o,
         "..."
       ] })
-    ] }) }) : S.length === 0 ? /* @__PURE__ */ d("div", { className: "p-6 text-center", children: [
+    ] }) }) : S.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(de, { className: "h-8 w-8 text-charcoal" }) }),
       /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-charcoal mb-2", children: m ? `No ${o} found` : k.length > 0 ? `Already chatting with all ${o}` : `No ${o} yet` }),
       /* @__PURE__ */ e("p", { className: "text-xs text-stone", children: m ? "Try a different search term" : k.length > 0 ? `You have existing conversations with all your ${o}` : `${o.charAt(0).toUpperCase() + o.slice(1)} will appear here` })
-    ] }) : /* @__PURE__ */ d("ul", { className: "space-y-0", children: [
-      S.map((c) => {
-        const u = c.name || c.email || c.id, N = c.email && c.name ? c.email : c.phone;
+    ] }) : /* @__PURE__ */ c("ul", { className: "space-y-0", children: [
+      S.map((d) => {
+        const u = d.name || d.email || d.id, N = d.email && d.name ? d.email : d.phone;
         return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: () => p(c),
-            onKeyDown: (j) => T(j, c),
+            onClick: () => p(d),
+            onKeyDown: (j) => T(j, d),
             className: "w-full px-4 py-3 hover:bg-sand transition-colors border-b border-sand text-left focus:outline-none focus:ring-2 focus:ring-black",
-            children: /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ d("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [
+            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,
                   {
-                    id: c.id,
+                    id: d.id,
                     name: u,
-                    image: c.image,
+                    image: d.image,
                     size: 40
                   }
                 ),
-                /* @__PURE__ */ d("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: u }),
                   N && /* @__PURE__ */ e("p", { className: "text-xs text-stone truncate", children: N })
                 ] })
               ] }),
-              /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: w === c.id ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ e(de, { className: "h-5 w-5 text-stone" }) })
+              /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: w === d.id ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ e(de, { className: "h-5 w-5 text-stone" }) })
             ] })
           }
-        ) }, c.id);
+        ) }, d.id);
       }),
-      h && /* @__PURE__ */ e("li", { className: "p-4 flex justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
+      f && /* @__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..." })
       ] }) })
     ] }) })
   ] });
-}, ds = ({ hasChannels: t }) => /* @__PURE__ */ e("div", { className: "messaging-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
+}, ms = ({ hasChannels: t }) => /* @__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 ? "Choose a conversation from the list." : "No conversations yet." })
-] }) }), re = ({ message: t, onBack: s }) => /* @__PURE__ */ e("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
+] }) }), 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 }),
@@ -1113,12 +1123,12 @@ const cs = ({
       children: "Go Back"
     }
   )
-] }) }), us = ({ className: t, message: s }) => /* @__PURE__ */ d(
+] }) }), hs = ({ className: t, message: s }) => /* @__PURE__ */ c(
   "div",
   {
     className: R("flex items-center justify-center h-full", t),
     children: [
-      /* @__PURE__ */ d("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",
           {
@@ -1156,10 +1166,10 @@ const cs = ({
       s && /* @__PURE__ */ e("span", { className: "text-stone", children: s })
     ]
   }
-), ms = () => /* @__PURE__ */ e("div", { className: "messaging-loading-state flex items-center justify-center h-full", children: /* @__PURE__ */ d("div", { className: "flex items-center", children: [
-  /* @__PURE__ */ e(us, { className: "w-6 h-6" }),
+), fs = () => /* @__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(hs, { className: "w-6 h-6" }),
   /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
-] }) }), Es = ({
+] }) }), Is = ({
   capabilities: t = {},
   className: s,
   renderMessageInputActions: n,
@@ -1173,15 +1183,15 @@ const cs = ({
   channelListCustomEmptyStateIndicator: k
 }) => {
   const {
-    service: f,
-    client: h,
-    isConnected: I,
+    service: h,
+    client: f,
+    isConnected: y,
     isLoading: g,
     error: C,
     refreshConnection: w,
     debug: v
-  } = We(), [y, S] = E(null), [p, T] = E(!1), [c, u] = E(!1), [N, j] = E(/* @__PURE__ */ new Set()), [A, W] = E(0), [O, G] = E(!1), [J, H] = E(null), V = B(null), { participantSource: Q, participantLabel: F = "participants" } = t, M = q.useMemo(() => {
-    const b = h == null ? void 0 : h.userID;
+  } = qe(), [I, S] = E(null), [p, T] = E(!1), [d, u] = E(!1), [N, j] = E(/* @__PURE__ */ new Set()), [A, W] = E(0), [O, G] = E(!1), [J, $] = E(null), V = B(null), { participantSource: Q, participantLabel: F = "participants" } = t, M = q.useMemo(() => {
+    const b = f == null ? void 0 : f.userID;
     return {
       ...{
         type: "messaging",
@@ -1193,13 +1203,13 @@ const cs = ({
       },
       ...x
     };
-  }, [x, h == null ? void 0 : h.userID]), L = B(null), U = P(async () => {
-    if (!h || !I) return;
-    const b = h.userID;
+  }, [x, f == null ? void 0 : f.userID]), P = B(null), L = _(async () => {
+    if (!f || !y) return;
+    const b = f.userID;
     if (b)
       try {
         v && console.log("[MessagingShell] Syncing channels for user:", b);
-        const _ = await h.queryChannels(
+        const U = await f.queryChannels(
           {
             type: "messaging",
             members: { $in: [b] }
@@ -1207,61 +1217,61 @@ const cs = ({
           {},
           { limit: 100 }
         ), D = /* @__PURE__ */ new Set();
-        _.forEach((z) => {
-          const Ie = z.state.members;
-          Object.values(Ie).forEach((ye) => {
+        U.forEach((z) => {
+          const ye = z.state.members;
+          Object.values(ye).forEach((Ie) => {
             var oe;
-            const te = (oe = ye.user) == null ? void 0 : oe.id;
-            te && te !== b && D.add(te);
+            const ne = (oe = Ie.user) == null ? void 0 : oe.id;
+            ne && ne !== b && D.add(ne);
           });
-        }), j(D), T(_.length > 0), L.current = b, v && console.log("[MessagingShell] Channels synced successfully:", {
-          channelCount: _.length,
+        }), j(D), T(U.length > 0), P.current = b, v && console.log("[MessagingShell] Channels synced successfully:", {
+          channelCount: U.length,
           memberCount: D.size
         });
-      } catch (_) {
-        console.error("[MessagingShell] Failed to sync channels:", _);
+      } catch (U) {
+        console.error("[MessagingShell] Failed to sync channels:", U);
       }
-  }, [h, I, v]);
-  $(() => {
-    if (!h || !I) return;
-    const b = h.userID;
-    b && L.current !== b && U();
-  }, [h, I, U]), $(() => {
-    if (!a || !h || !I) return;
+  }, [f, y, v]);
+  H(() => {
+    if (!f || !y) return;
+    const b = f.userID;
+    b && P.current !== b && L();
+  }, [f, y, L]), H(() => {
+    if (!a || !f || !y) return;
     (async () => {
-      const _ = h.userID;
-      if (_)
+      const U = f.userID;
+      if (U)
         try {
           v && console.log(
             "[MessagingShell] Loading initial conversation with:",
             a
           );
-          const D = await h.queryChannels(
+          const D = await f.queryChannels(
             {
               type: "messaging",
-              members: { $eq: [_, a] }
+              members: { $eq: [U, a] }
             },
             {},
             { limit: 1 }
           );
           if (D.length > 0)
-            S(D[0]), G(!0), H(null), l && l(D[0]), v && console.log(
+            S(D[0]), G(!0), $(null), l && l(D[0]), v && console.log(
               "[MessagingShell] Initial conversation loaded:",
               D[0].id
             );
-          else if (r && f) {
+          else if (r && h) {
             v && console.log(
               "[MessagingShell] No conversation found, creating one for:",
               r
             );
             try {
-              const z = await f.startChannelWithParticipant({
+              const z = await h.startChannelWithParticipant({
                 id: r.id,
                 name: r.name,
                 email: r.email,
                 phone: r.phone
               });
-              S(z), G(!0), H(null), l && l(z), v && console.log(
+              S(z), G(!0), $(null), l && l(z), v && console.log(
                 "[MessagingShell] Channel created and loaded:",
                 z.id
               );
@@ -1269,10 +1279,10 @@ const cs = ({
               console.error(
                 "[MessagingShell] Failed to create conversation:",
                 z
-              ), H("Failed to create conversation");
+              ), $("Failed to create conversation");
             }
           } else
-            H(
+            $(
               "No conversation found with this account"
             ), v && console.log(
               "[MessagingShell] No conversation found for:",
@@ -1282,35 +1292,35 @@ const cs = ({
           console.error(
             "[MessagingShell] Failed to load initial conversation:",
             D
-          ), H("Failed to load conversation");
+          ), $("Failed to load conversation");
         }
     })();
   }, [
     a,
     r,
-    h,
-    I,
     f,
+    y,
+    h,
     v,
     l
   ]);
-  const X = P(
+  const X = _(
     (b) => {
       S(b), l == null || l(b);
     },
     [l]
-  ), ve = P(() => {
+  ), ve = _(() => {
     O || S(null);
-  }, [O]), Ce = P(
+  }, [O]), Ce = _(
     async (b) => {
-      var _;
-      if (f)
+      var U;
+      if (h)
         try {
           v && console.log(
             "[MessagingShell] Starting conversation with:",
             b.id
           );
-          const D = await f.startChannelWithParticipant({
+          const D = await h.startChannelWithParticipant({
             id: b.id,
             name: b.name,
             email: b.email,
@@ -1321,33 +1331,33 @@ const cs = ({
           } catch (z) {
             console.warn("[MessagingShell] Failed to unhide channel:", z);
           }
-          S(D), u(!1), (_ = V.current) == null || _.close(), o == null || o(b);
+          S(D), u(!1), (U = V.current) == null || U.close(), o == null || o(b);
         } catch (D) {
           console.error("[MessagingShell] Failed to start conversation:", D);
         }
     },
-    [f, o, v]
-  ), ne = P(() => {
+    [h, o, v]
+  ), te = _(() => {
     var b;
     u(!1), (b = V.current) == null || b.close();
-  }, []), we = P(
+  }, []), we = _(
     async (b) => {
-      v && console.log("[MessagingShell] Leaving conversation:", b.id), S(null), G(!1), L.current = null, await U();
+      v && console.log("[MessagingShell] Leaving conversation:", b.id), S(null), G(!1), P.current = null, await L();
     },
-    [U, v]
-  ), Ee = P(
+    [L, v]
+  ), Ee = _(
     async (b) => {
-      v && console.log("[MessagingShell] Blocking participant:", b), S(null), G(!1), L.current = null, await U();
+      v && console.log("[MessagingShell] Blocking participant:", b), S(null), G(!1), P.current = null, await L();
     },
-    [U, v]
-  ), Z = !!y;
-  return g ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(ms, {}) }) : C ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(re, { message: C, onBack: w }) }) : !I || !h ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(
+    [L, v]
+  ), Z = !!I;
+  return g ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(fs, {}) }) : C ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(re, { message: C, onBack: w }) }) : !y || !f ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(
     re,
     {
       message: "Not connected to messaging service",
       onBack: w
     }
-  ) }) : J ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(re, { message: J }) }) : /* @__PURE__ */ d(
+  ) }) : J ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(re, { message: J }) }) : /* @__PURE__ */ c(
     "div",
     {
       className: R(
@@ -1355,7 +1365,7 @@ const cs = ({
         s
       ),
       children: [
-        /* @__PURE__ */ d("div", { className: "flex h-full min-h-0", children: [
+        /* @__PURE__ */ c("div", { className: "flex h-full min-h-0", children: [
           /* @__PURE__ */ e(
             "div",
             {
@@ -1371,10 +1381,10 @@ const cs = ({
                 }
               ),
               children: /* @__PURE__ */ e(
-                Ze,
+                Ke,
                 {
                   onChannelSelect: X,
-                  selectedChannel: y || void 0,
+                  selectedChannel: I || void 0,
                   filters: M,
                   customEmptyStateIndicator: k
                 }
@@ -1393,10 +1403,10 @@ const cs = ({
                   "hidden lg:flex": !O && !Z
                 }
               ),
-              children: y ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
-                as,
+              children: I ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
+                cs,
                 {
-                  channel: y,
+                  channel: I,
                   onBack: ve,
                   showBackButton: !O,
                   renderMessageInputActions: n,
@@ -1404,8 +1414,8 @@ const cs = ({
                   onBlockParticipant: Ee,
                   CustomChannelEmptyState: i
                 },
-                y.id
-              ) }) : /* @__PURE__ */ e(ds, { hasChannels: p })
+                I.id
+              ) }) : /* @__PURE__ */ e(ms, { hasChannels: p })
             }
           )
         ] }),
@@ -1416,15 +1426,15 @@ const cs = ({
             ref: V,
             className: "mes-dialog",
             onClick: (b) => {
-              b.target === V.current && ne();
+              b.target === V.current && te();
             },
-            onClose: ne,
+            onClose: te,
             children: /* @__PURE__ */ e("div", { className: "h-full w-full bg-white shadow-max-elevation-light", children: /* @__PURE__ */ e(
-              cs,
+              us,
               {
                 participantSource: Q,
                 onSelectParticipant: Ce,
-                onClose: ne,
+                onClose: te,
                 existingParticipantIds: N,
                 participantLabel: F,
                 searchPlaceholder: `Search ${F}...`
@@ -1436,7 +1446,7 @@ const cs = ({
       ]
     }
   );
-}, fs = ({
+}, gs = ({
   question: t,
   onClick: s,
   loading: n = !1,
@@ -1458,7 +1468,7 @@ const cs = ({
     ),
     children: t
   }
-), Is = ({
+), Ss = ({
   faqs: t,
   onFaqClick: s,
   loadingFaqId: n,
@@ -1468,7 +1478,7 @@ const cs = ({
   avatarName: r
 }) => {
   const i = t.filter((m) => m.enabled).sort((m, x) => (m.order ?? 0) - (x.order ?? 0));
-  return i.length === 0 ? null : /* @__PURE__ */ e("div", { className: R("px-4 py-6", o), children: /* @__PURE__ */ d("div", { className: "flex gap-3 items-end", children: [
+  return i.length === 0 ? null : /* @__PURE__ */ e("div", { className: R("px-4 py-6", o), children: /* @__PURE__ */ c("div", { className: "flex gap-3 items-end", children: [
     (a || r) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
       Y,
       {
@@ -1479,7 +1489,7 @@ const cs = ({
         shape: "circle"
       }
     ) }),
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "div",
       {
         className: "flex-1 flex flex-col gap-3 rounded-lg p-4",
@@ -1487,7 +1497,7 @@ const cs = ({
         children: [
           l && /* @__PURE__ */ e("p", { className: "text-md text-charcoal mb-4", children: l }),
           i.map((m) => /* @__PURE__ */ e(
-            fs,
+            gs,
             {
               question: m.question,
               onClick: () => s(m.id),
@@ -1499,59 +1509,59 @@ const cs = ({
       }
     )
   ] }) });
-}, ys = (t, s = {}) => {
-  const { initialSearch: n = "", pageSize: l = 20 } = s, [o, a] = E([]), [r, i] = E(!1), [m, x] = E(null), [k, f] = E(n), [h, I] = E(!0), [g, C] = E(), w = P(async (p = !1, T) => {
+}, ks = (t, s = {}) => {
+  const { initialSearch: n = "", pageSize: l = 20 } = s, [o, a] = E([]), [r, i] = E(!1), [m, x] = E(null), [k, h] = E(n), [f, y] = E(!0), [g, C] = E(), w = _(async (p = !1, T) => {
     if (r) return;
-    const c = T !== void 0 ? T : k;
+    const d = T !== void 0 ? T : k;
     i(!0), x(null);
     try {
       const u = await t.loadParticipants({
-        search: c || void 0,
+        search: d || void 0,
         limit: l,
         cursor: p ? void 0 : g
       });
       a(
         (N) => p ? u.participants : [...N, ...u.participants]
-      ), I(u.hasMore), C(u.nextCursor);
+      ), y(u.hasMore), C(u.nextCursor);
     } catch (u) {
       const N = u instanceof Error ? u.message : "Failed to load participants";
       x(N), console.error("[useParticipants] Load error:", u);
     } finally {
       i(!1);
     }
-  }, [t, k, g, l, r]), v = P(() => {
-    h && !r && w(!1);
-  }, [h, r, w]), y = P((p) => {
-    f(p), C(void 0), w(!0, p);
-  }, [w]), S = P(() => {
+  }, [t, k, g, l, r]), v = _(() => {
+    f && !r && w(!1);
+  }, [f, r, w]), I = _((p) => {
+    h(p), C(void 0), w(!0, p);
+  }, [w]), S = _(() => {
     C(void 0), w(!0);
   }, [w]);
-  return $(() => {
+  return H(() => {
     w(!0);
   }, [t.loadParticipants]), {
     participants: o,
     loading: r,
     error: m,
     searchQuery: k,
-    hasMore: h,
+    hasMore: f,
     totalCount: t.totalCount,
     loadMore: v,
-    search: y,
+    search: I,
     refresh: S
   };
 };
 export {
   Y as Avatar,
   be as ChannelEmptyState,
-  Ze as ChannelList,
-  as as ChannelView,
-  Is as FaqList,
-  fs as FaqListItem,
-  ws as MessagingProvider,
-  Es as MessagingShell,
-  cs as ParticipantPicker,
-  Ye as formatRelativeTime,
-  We as useMessaging,
-  ys as useParticipants
+  Ke as ChannelList,
+  cs as ChannelView,
+  Ss as FaqList,
+  gs as FaqListItem,
+  ys as MessagingProvider,
+  Is as MessagingShell,
+  us as ParticipantPicker,
+  Je as formatRelativeTime,
+  qe as useMessaging,
+  ks as useParticipants
 };
 //# sourceMappingURL=index.js.map