@linktr.ee/messaging-react 1.12.2 → 1.12.4

package/dist/index.js

@@ -1,11 +1,11 @@
-import { jsx as e, jsxs as i, Fragment as Ce } from "react/jsx-runtime";
+import { jsx as e, jsxs as i, Fragment as ve } from "react/jsx-runtime";
 import p from "classnames";
-import P, { createContext as Ue, useContext as Oe, useCallback as D, useState as y, useRef as z, useEffect as G } from "react";
+import U, { createContext as Pe, useContext as Oe, useCallback as D, useState as y, useRef as z, useEffect as G } from "react";
 import { StreamChatService as je } from "@linktr.ee/messaging-core";
-import { Chat as Ae, ChannelList as ze, useMessageComposer as Be, useStateStore as $e, MessageInput as Ge, useMessageInputContext as He, useMessageComposerHasSendableData as Ve, SimpleAttachmentSelector as We, QuotedMessagePreview as Ze, AttachmentPreviewList as qe, TextareaComposer as Ye, MessageTimestamp as Je, Channel as Qe, useChannelStateContext as ve, Window as Xe, MessageList as Ke } from "stream-chat-react";
-import { XIcon as ue, ArrowUpIcon as es, ArrowLeftIcon as he, DotsThreeIcon as fe, SpinnerGapIcon as re, SignOutIcon as ss, ProhibitInsetIcon as ge, FlagIcon as ts, MagnifyingGlassIcon as ns, ChatCircleDotsIcon as xe } from "@phosphor-icons/react";
-import { LinkPreviewsManager as Ne } from "stream-chat";
-const we = Ue({
+import { Chat as Ae, ChannelList as ze, useMessageComposer as Be, useStateStore as $e, MessageInput as Ge, useMessageInputContext as He, useMessageComposerHasSendableData as Ve, SimpleAttachmentSelector as We, QuotedMessagePreview as Ze, AttachmentPreviewList as qe, TextareaComposer as Ye, MessageTimestamp as Je, Channel as Qe, useChannelStateContext as we, Window as Xe, MessageList as Ke } from "stream-chat-react";
+import { XIcon as me, ArrowUpIcon as es, ArrowLeftIcon as fe, DotsThreeIcon as ge, SpinnerGapIcon as re, SignOutIcon as ss, ProhibitInsetIcon as xe, FlagIcon as ts, MagnifyingGlassIcon as ns, ChatCircleDotsIcon as Ne } from "@phosphor-icons/react";
+import { LinkPreviewsManager as be } from "stream-chat";
+const ye = Pe({
   service: null,
   client: null,
   isConnected: !1,
@@ -15,19 +15,19 @@ const we = Ue({
   refreshConnection: async () => {
   },
   debug: !1
-}), ae = () => Oe(we), Ms = ({
+}), oe = () => Oe(ye), Ms = ({
   children: t,
   user: s,
   serviceConfig: n,
   apiKey: r,
   capabilities: a = {},
-  debug: d = !1
+  debug: c = !1
 }) => {
   const l = D(
     (u, ...b) => {
-      d && console.log(`🔥 [MessagingProvider] ${u}`, ...b);
+      c && console.log(`🔥 [MessagingProvider] ${u}`, ...b);
     },
-    [d]
+    [c]
   );
   l("🔄 RENDER START", {
     userId: s == null ? void 0 : s.id,
@@ -35,7 +35,7 @@ const we = Ue({
     serviceConfig: !!n,
     capabilities: Object.keys(a)
   });
-  const [m, h] = y(null), [g, w] = y(null), [f, S] = y(!1), [M, v] = y(!1), [c, N] = y(null), E = z(!1), I = z({
+  const [m, h] = y(null), [g, w] = y(null), [f, S] = y(!1), [M, v] = y(!1), [d, N] = y(null), E = z(!1), I = z({
     userId: s == null ? void 0 : s.id,
     apiKey: r,
     serviceConfig: n,
@@ -82,7 +82,7 @@ const we = Ue({
     const b = new je({
       ...n,
       apiKey: r,
-      debug: d
+      debug: c
     });
     return h(b), l("✅ SERVICE SET", {
       renderCount: u,
@@ -93,7 +93,7 @@ const we = Ue({
         reason: "Effect cleanup"
       }), b.disconnectUser().catch(console.error);
     };
-  }, [r, n, d, l]);
+  }, [r, n, c, l]);
   const x = z(null);
   G(() => {
     var b, B;
@@ -175,38 +175,38 @@ const we = Ue({
     } finally {
       v(!1), l("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
     }
-  }, [m, s, l]), o = P.useMemo(() => (l("💫 CONTEXT VALUE MEMOIZATION", {
+  }, [m, s, l]), o = U.useMemo(() => (l("💫 CONTEXT VALUE MEMOIZATION", {
     hasService: !!m,
     hasClient: !!g,
     isConnected: f,
     isLoading: M,
-    hasError: !!c,
+    hasError: !!d,
     capabilitiesKeys: Object.keys(a)
   }), {
     service: m,
     client: g,
     isConnected: f,
     isLoading: M,
-    error: c,
+    error: d,
     capabilities: a,
     refreshConnection: R,
-    debug: d
+    debug: c
   }), [
     m,
     g,
     f,
     M,
-    c,
+    d,
     a,
     R,
-    d,
+    c,
     l
   ]);
   return l("🔄 RENDER END", {
     renderCount: k.current,
     willRenderChat: !!(g && f),
     contextValueReady: !!o
-  }), /* @__PURE__ */ e(we.Provider, { value: o, children: g && f ? /* @__PURE__ */ e(
+  }), /* @__PURE__ */ e(ye.Provider, { value: o, children: g && f ? /* @__PURE__ */ e(
     Ae,
     {
       client: g,
@@ -216,7 +216,7 @@ const we = Ue({
       children: t
     }
   ) : t });
-}, rs = () => ae(), ls = (t, s) => {
+}, rs = () => oe(), ls = (t, s) => {
   const n = new Date(
     Date.UTC(t.getUTCFullYear(), t.getUTCMonth(), t.getUTCDate())
   ), a = new Date(
@@ -230,13 +230,14 @@ const we = Ue({
   const r = ls(t, s);
   return r === 0 ? t.toLocaleTimeString([], {
     hour: "numeric",
-    minute: "2-digit"
+    minute: "2-digit",
+    hour12: !0
   }) : r === 1 ? "Yesterday" : r < 7 ? `${r}d` : r < 28 ? `${Math.floor(r / 7)}w` : t.toLocaleDateString("en-US", {
     month: "numeric",
     day: "numeric",
     year: "2-digit"
   });
-}, be = [
+}, Ce = [
   "🍎",
   // Apple
   "🍌",
@@ -273,8 +274,8 @@ function os(t) {
   return Math.abs(s);
 }
 function is(t) {
-  const n = os(t) % be.length;
-  return be[n];
+  const n = os(t) % Ce.length;
+  return Ce[n];
 }
 const q = ({
   id: t,
@@ -283,7 +284,7 @@ const q = ({
   className: r,
   shape: a = "squircle"
 }) => {
-  const d = is(t), m = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg", h = a === "circle" ? { borderRadius: "50%" } : {
+  const c = is(t), m = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg", h = a === "circle" ? { borderRadius: "50%" } : {
     borderRadius: "33%",
     "corner-shape": "superellipse(1.3)"
   };
@@ -311,15 +312,15 @@ const q = ({
             "avatar-fallback flex h-full w-full items-center justify-center font-semibold bg-[#E6E5E3] select-none transition-colors",
             m
           ),
-          children: d
+          children: c
         }
       )
     }
   );
-}, ye = P.memo(
+}, Ee = U.memo(
   ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: r = !1, unread: a }) => {
     var N, E, I, k, x, R;
-    const d = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), l = () => {
+    const c = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), l = () => {
       t && n(t);
     }, h = Object.values(((N = t == null ? void 0 : t.state) == null ? void 0 : N.members) || {}).find(
       (o) => {
@@ -331,12 +332,12 @@ const q = ({
       if (f != null && f.text) return f.text;
       const o = (u = f == null ? void 0 : f.attachments) == null ? void 0 : u[0];
       return o != null && o.asset_url ? o.asset_url : o != null && o.image_url ? o.image_url : o != null && o.og_scrape_url ? o.og_scrape_url : o != null && o.thumb_url ? o.thumb_url : "No messages yet";
-    })(), v = f != null && f.created_at ? as(new Date(f.created_at)) : "", c = a ?? 0;
+    })(), v = f != null && f.created_at ? as(new Date(f.created_at)) : "", d = a ?? 0;
     return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
       channelId: t == null ? void 0 : t.id,
-      isSelected: d,
+      isSelected: c,
       participantName: g,
-      unreadCount: c,
+      unreadCount: d,
       hasTimestamp: !!v
     }), /* @__PURE__ */ e(
       "button",
@@ -346,8 +347,8 @@ const q = ({
         className: p(
           "group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring",
           {
-            "bg-primary-alt/10 border-l-4 border-l-primary": d,
-            "hover:bg-sand": !d
+            "bg-primary-alt/10 border-l-4 border-l-primary": c,
+            "hover:bg-sand": !c
           }
         ),
         children: /* @__PURE__ */ i("div", { className: "flex items-start gap-3", children: [
@@ -368,7 +369,7 @@ const q = ({
                 {
                   className: p(
                     "text-sm font-medium truncate",
-                    d ? "text-primary" : "text-charcoal"
+                    c ? "text-primary" : "text-charcoal"
                   ),
                   children: g
                 }
@@ -377,7 +378,7 @@ const q = ({
             ] }),
             /* @__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: M }),
-              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 })
+              d > 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: d > 99 ? "99+" : d })
             ] })
           ] })
         ] })
@@ -385,8 +386,8 @@ const q = ({
     );
   }
 );
-ye.displayName = "CustomChannelPreview";
-const Ee = P.memo(
+Ee.displayName = "CustomChannelPreview";
+const Ie = U.memo(
   ({
     onChannelSelect: t,
     selectedChannel: s,
@@ -394,16 +395,16 @@ const Ee = P.memo(
     className: r,
     customEmptyStateIndicator: a
   }) => {
-    const d = P.useRef(0);
-    d.current++;
-    const { debug: l = !1 } = ae();
+    const c = U.useRef(0);
+    c.current++;
+    const { debug: l = !1 } = oe();
     l && console.log("📺 [ChannelList] 🔄 RENDER START", {
-      renderCount: d.current,
+      renderCount: c.current,
       selectedChannelId: s == null ? void 0 : s.id,
       filters: n
     });
-    const m = P.useMemo(() => (g) => /* @__PURE__ */ e(
-      ye,
+    const m = U.useMemo(() => (g) => /* @__PURE__ */ e(
+      Ee,
       {
         ...g,
         selectedChannel: s,
@@ -433,7 +434,7 @@ const Ee = P.memo(
     );
   }
 );
-Ee.displayName = "ChannelList";
+Ie.displayName = "ChannelList";
 const ne = ({
   variant: t = "default",
   className: s,
@@ -452,7 +453,7 @@ const ne = ({
     children: n
   }
 );
-function Ie({ label: t, className: s, children: n, ...r }) {
+function Se({ label: t, className: s, children: n, ...r }) {
   return /* @__PURE__ */ i(
     "button",
     {
@@ -473,12 +474,12 @@ function Ie({ label: t, className: s, children: n, ...r }) {
     }
   );
 }
-function Se({ onClick: t }) {
-  return /* @__PURE__ */ e(Ie, { label: "Close", onClick: t, className: "p-1", children: /* @__PURE__ */ e(ue, { className: "h-5 w-5 text-stone", weight: "bold" }) });
+function pe({ 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 cs = (t) => ({
   linkPreviews: Array.from(t.previews.values()).filter(
-    (s) => Ne.previewIsLoaded(s) || Ne.previewIsLoading(s)
+    (s) => be.previewIsLoaded(s) || be.previewIsLoading(s)
   )
 }), ds = ({
   link: t,
@@ -510,7 +511,7 @@ const cs = (t) => ({
             },
             className: "absolute right-4 top-4 flex size-6 items-center justify-center rounded-full border border-white/40 bg-white/70 backdrop-blur-2xl",
             "aria-label": "Close link preview",
-            children: /* @__PURE__ */ e(ue, { className: "size-4 text-black/90" })
+            children: /* @__PURE__ */ e(me, { className: "size-4 text-black/90" })
           }
         ),
         /* @__PURE__ */ i("div", { className: "p-2", children: [
@@ -537,7 +538,7 @@ const cs = (t) => ({
   )) }) : null;
 }, ms = () => {
   const { handleSubmit: t } = He(), s = Ve();
-  return /* @__PURE__ */ i(Ce, { children: [
+  return /* @__PURE__ */ i(ve, { children: [
     /* @__PURE__ */ e("div", { className: "left-container", children: /* @__PURE__ */ e(We, {}) }),
     /* @__PURE__ */ i("div", { className: "central-container min-w-0 w-full p-2 bg-white rounded-[1.5rem] 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(Ze, {}),
@@ -581,14 +582,62 @@ const cs = (t) => ({
     ] }),
     !s && /* @__PURE__ */ e(Je, { message: t.message })
   ] });
-}, gs = () => null, xs = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: r }) => {
+}, gs = () => null, xs = ({ className: t, message: s }) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: p("flex items-center justify-center h-full", t),
+    children: [
+      /* @__PURE__ */ i("svg", { viewBox: "0 0 100 100", className: "size-8 fill-pebble", stroke: "none", children: [
+        /* @__PURE__ */ e("circle", { cx: "6", cy: "50", r: "6", children: /* @__PURE__ */ e(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            dur: "1s",
+            type: "translate",
+            values: "0 15 ; 0 -15; 0 15",
+            repeatCount: "indefinite",
+            begin: "0.1"
+          }
+        ) }),
+        /* @__PURE__ */ e("circle", { cx: "30", cy: "50", r: "6", children: /* @__PURE__ */ e(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            dur: "1s",
+            type: "translate",
+            values: "0 10 ; 0 -10; 0 10",
+            repeatCount: "indefinite",
+            begin: "0.2"
+          }
+        ) }),
+        /* @__PURE__ */ e("circle", { cx: "54", cy: "50", r: "6", children: /* @__PURE__ */ e(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            dur: "1s",
+            type: "translate",
+            values: "0 5 ; 0 -5; 0 5",
+            repeatCount: "indefinite",
+            begin: "0.3"
+          }
+        ) })
+      ] }),
+      s && /* @__PURE__ */ e("span", { className: "text-stone", children: s })
+    ]
+  }
+), ae = U.memo(() => /* @__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(xs, { className: "w-6 h-6" }),
+  /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
+] }) }));
+ae.displayName = "LoadingState";
+const Ns = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: r }) => {
   var h, g, w, f, S;
-  const { channel: a } = ve(), d = P.useMemo(() => Object.values(a.state.members || {}).find(
+  const { channel: a } = we(), c = U.useMemo(() => Object.values(a.state.members || {}).find(
     (v) => {
-      var c;
-      return ((c = v.user) == null ? void 0 : c.id) && v.user.id !== a._client.userID;
+      var d;
+      return ((d = v.user) == null ? void 0 : d.id) && v.user.id !== a._client.userID;
     }
-  ), [a._client.userID, a.state.members]), l = ((h = d == null ? void 0 : d.user) == null ? void 0 : h.name) || ((g = d == null ? void 0 : d.user) == null ? void 0 : g.id) || "Unknown member", m = (w = d == null ? void 0 : d.user) == null ? void 0 : w.image;
+  ), [a._client.userID, a.state.members]), l = ((h = c == null ? void 0 : c.user) == null ? void 0 : h.name) || ((g = c == null ? void 0 : c.user) == null ? void 0 : g.id) || "Unknown member", m = (w = c == null ? void 0 : c.user) == null ? void 0 : w.image;
   return /* @__PURE__ */ i("div", { className: "@container", children: [
     /* @__PURE__ */ i("div", { className: "flex justify-between items-center @lg:hidden", children: [
       /* @__PURE__ */ e(
@@ -602,14 +651,14 @@ const cs = (t) => ({
           }),
           type: "button",
           "aria-label": "Back to conversations",
-          children: /* @__PURE__ */ e(he, { className: "size-5 text-black/90" })
+          children: /* @__PURE__ */ e(fe, { className: "size-5 text-black/90" })
         }
       ),
       /* @__PURE__ */ i("div", { className: "flex flex-col gap-1 items-center", children: [
         /* @__PURE__ */ e(
           q,
           {
-            id: ((f = d == null ? void 0 : d.user) == null ? void 0 : f.id) || a.id || "unknown",
+            id: ((f = c == null ? void 0 : c.user) == null ? void 0 : f.id) || a.id || "unknown",
             name: l,
             image: m,
             size: 40
@@ -626,7 +675,7 @@ const cs = (t) => ({
           onClick: n,
           type: "button",
           "aria-label": "Show info",
-          children: /* @__PURE__ */ e(fe, { className: "size-5 text-black/90" })
+          children: /* @__PURE__ */ e(ge, { className: "size-5 text-black/90" })
         }
       )
     ] }),
@@ -639,13 +688,13 @@ const cs = (t) => ({
             onClick: t,
             className: "size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center",
             "aria-label": "Back to conversations",
-            children: /* @__PURE__ */ e(he, { className: "size-5 text-black/90" })
+            children: /* @__PURE__ */ e(fe, { className: "size-5 text-black/90" })
           }
         ),
         /* @__PURE__ */ e(
           q,
           {
-            id: ((S = d == null ? void 0 : d.user) == null ? void 0 : S.id) || a.id || "unknown",
+            id: ((S = c == null ? void 0 : c.user) == null ? void 0 : S.id) || a.id || "unknown",
             name: l,
             image: m,
             size: 40
@@ -660,26 +709,26 @@ const cs = (t) => ({
             "size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
           ),
           onClick: n,
-          children: /* @__PURE__ */ e(fe, { className: "size-5 text-black/90" })
+          children: /* @__PURE__ */ e(ge, { className: "size-5 text-black/90" })
         }
       )
     ] })
   ] });
-}, Ns = ({
+}, bs = ({
   dialogRef: t,
   onClose: s,
   participant: n,
   channel: r,
   followerStatusLabel: a,
-  onLeaveConversation: d,
+  onLeaveConversation: c,
   onBlockParticipant: l,
   showDeleteConversation: m = !0,
   onDeleteConversationClick: h,
   onBlockParticipantClick: g,
   onReportParticipantClick: w
 }) => {
-  var Q, X, ie, O, H, J, $;
-  const { service: f, debug: S } = ae(), [M, v] = y(!1), [c, N] = y(!1), [E, I] = y(!1), k = D(async () => {
+  var Q, X, ce, O, H, J, $;
+  const { service: f, debug: S } = oe(), [M, v] = y(!1), [d, N] = y(!1), [E, I] = y(!1), k = D(async () => {
     var _;
     if (!(!f || !((_ = n == null ? void 0 : n.user) != null && _.id)))
       try {
@@ -702,11 +751,11 @@ const cs = (t) => ({
   }, [k]);
   const x = async () => {
     var _;
-    if (!c) {
+    if (!d) {
       h == null || h(), S && console.log("[ChannelInfoDialog] Leave conversation", r.cid), N(!0);
       try {
         const T = ((_ = r._client) == null ? void 0 : _.userID) ?? null;
-        await r.hide(T, !1), d && await d(r), s();
+        await r.hide(T, !1), c && await c(r), s();
       } catch (T) {
         console.error("[ChannelInfoDialog] Failed to leave conversation", T);
       } finally {
@@ -745,7 +794,7 @@ const cs = (t) => ({
     );
   };
   if (!n) return null;
-  const b = ((X = n.user) == null ? void 0 : X.name) || ((ie = n.user) == null ? void 0 : ie.id) || "Unknown member", B = (O = n.user) == null ? void 0 : O.image, j = (H = n.user) == null ? void 0 : H.email, W = (J = n.user) == null ? void 0 : J.username, Y = j || (W ? `linktr.ee/${W}` : void 0), oe = (($ = n.user) == null ? void 0 : $.id) || "unknown";
+  const b = ((X = n.user) == null ? void 0 : X.name) || ((ce = n.user) == null ? void 0 : ce.id) || "Unknown member", B = (O = n.user) == null ? void 0 : O.image, j = (H = n.user) == null ? void 0 : H.email, W = (J = n.user) == null ? void 0 : J.username, Y = j || (W ? `linktr.ee/${W}` : void 0), ie = (($ = n.user) == null ? void 0 : $.id) || "unknown";
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ e(
@@ -760,7 +809,7 @@ const cs = (t) => ({
         children: /* @__PURE__ */ i("div", { className: "ml-auto flex h-full w-full flex-col bg-white shadow-none transition-shadow duration-200 group-open:shadow-max-elevation-light", children: [
           /* @__PURE__ */ i("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(Se, { onClick: s })
+            /* @__PURE__ */ e(pe, { onClick: s })
           ] }),
           /* @__PURE__ */ i("div", { className: "flex-1 px-2 overflow-y-auto w-full", children: [
             /* @__PURE__ */ e(
@@ -772,7 +821,7 @@ const cs = (t) => ({
                   /* @__PURE__ */ e(
                     q,
                     {
-                      id: oe,
+                      id: ie,
                       name: b,
                       image: B,
                       size: 88,
@@ -805,10 +854,10 @@ const cs = (t) => ({
                 ne,
                 {
                   onClick: x,
-                  disabled: c,
-                  "aria-busy": c,
+                  disabled: d,
+                  "aria-busy": d,
                   children: [
-                    c ? /* @__PURE__ */ e(re, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(ss, { className: "h-5 w-5" }),
+                    d ? /* @__PURE__ */ e(re, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(ss, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Delete Conversation" })
                   ]
                 }
@@ -820,7 +869,7 @@ const cs = (t) => ({
                   disabled: E,
                   "aria-busy": E,
                   children: [
-                    E ? /* @__PURE__ */ e(re, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(ge, { className: "h-5 w-5" }),
+                    E ? /* @__PURE__ */ e(re, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(xe, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Unblock" })
                   ]
                 }
@@ -831,7 +880,7 @@ const cs = (t) => ({
                   disabled: E,
                   "aria-busy": E,
                   children: [
-                    E ? /* @__PURE__ */ e(re, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(ge, { className: "h-5 w-5" }),
+                    E ? /* @__PURE__ */ e(re, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(xe, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Block" })
                   ]
                 }
@@ -846,39 +895,39 @@ const cs = (t) => ({
       }
     )
   );
-}, bs = ({
+}, Cs = ({
   onBack: t,
   showBackButton: s,
   renderMessageInputActions: n,
   onLeaveConversation: r,
   onBlockParticipant: a,
-  showDeleteConversation: d = !0,
+  showDeleteConversation: c = !0,
   onDeleteConversationClick: l,
   onBlockParticipantClick: m,
   onReportParticipantClick: h
 }) => {
-  const { channel: g } = ve(), w = z(null), f = P.useMemo(() => Object.values(g.state.members || {}).find(
+  const { channel: g } = we(), w = z(null), f = U.useMemo(() => Object.values(g.state.members || {}).find(
     (N) => {
       var E;
       return ((E = N.user) == null ? void 0 : E.id) && N.user.id !== g._client.userID;
     }
-  ), [g._client.userID, g.state.members]), S = P.useMemo(() => {
-    const c = g.data ?? {};
-    if (c.followerStatus)
-      return String(c.followerStatus);
-    if (c.isFollower !== void 0)
-      return c.isFollower ? "Subscribed to you" : "Not subscribed";
+  ), [g._client.userID, g.state.members]), S = U.useMemo(() => {
+    const d = g.data ?? {};
+    if (d.followerStatus)
+      return String(d.followerStatus);
+    if (d.isFollower !== void 0)
+      return d.isFollower ? "Subscribed to you" : "Not subscribed";
   }, [g.data]), M = D(() => {
-    var c;
-    (c = w.current) == null || c.showModal();
+    var d;
+    (d = w.current) == null || d.showModal();
   }, []), v = D(() => {
-    var c;
-    (c = w.current) == null || c.close();
+    var d;
+    (d = w.current) == null || d.close();
   }, []);
-  return /* @__PURE__ */ i(Ce, { children: [
+  return /* @__PURE__ */ i(ve, { children: [
     /* @__PURE__ */ i(Xe, { children: [
       /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
-        xs,
+        Ns,
         {
           onBack: t,
           showBackButton: s,
@@ -902,7 +951,7 @@ const cs = (t) => ({
       )
     ] }),
     /* @__PURE__ */ e(
-      Ns,
+      bs,
       {
         dialogRef: w,
         onClose: v,
@@ -911,21 +960,21 @@ const cs = (t) => ({
         followerStatusLabel: S,
         onLeaveConversation: r,
         onBlockParticipant: a,
-        showDeleteConversation: d,
+        showDeleteConversation: c,
         onDeleteConversationClick: l,
         onBlockParticipantClick: m,
         onReportParticipantClick: h
       }
     )
   ] });
-}, pe = P.memo(
+}, ke = U.memo(
   ({
     channel: t,
     onBack: s,
     showBackButton: n = !1,
     renderMessageInputActions: r,
     onLeaveConversation: a,
-    onBlockParticipant: d,
+    onBlockParticipant: c,
     className: l,
     CustomChannelEmptyState: m = gs,
     showDeleteConversation: h = !0,
@@ -945,14 +994,15 @@ const cs = (t) => ({
           channel: t,
           MessageSystem: fs,
           EmptyStateIndicator: m,
+          LoadingIndicator: ae,
           children: /* @__PURE__ */ e(
-            bs,
+            Cs,
             {
               onBack: s,
               showBackButton: n,
               renderMessageInputActions: r,
               onLeaveConversation: a,
-              onBlockParticipant: d,
+              onBlockParticipant: c,
               CustomChannelEmptyState: m,
               showDeleteConversation: h,
               onDeleteConversationClick: g,
@@ -965,8 +1015,8 @@ const cs = (t) => ({
     }
   )
 );
-pe.displayName = "ChannelView";
-function Cs({
+ke.displayName = "ChannelView";
+function vs({
   searchQuery: t,
   setSearchQuery: s,
   placeholder: n
@@ -992,7 +1042,7 @@ function Cs({
       }
     ),
     t && /* @__PURE__ */ e(
-      Ie,
+      Se,
       {
         label: "Clear search",
         onClick: () => {
@@ -1000,21 +1050,21 @@ function Cs({
           s(""), (a = r.current) == null || a.focus();
         },
         className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-stone hover:text-charcoal",
-        children: /* @__PURE__ */ e(ue, { className: "h-4 w-4", weight: "bold" })
+        children: /* @__PURE__ */ e(me, { className: "h-4 w-4", weight: "bold" })
       }
     )
   ] });
 }
-const vs = ({
+const ws = ({
   participantSource: t,
   onSelectParticipant: s,
   onClose: n,
   existingParticipantIds: r = /* @__PURE__ */ new Set(),
   participantLabel: a = "participants",
-  searchPlaceholder: d = "Search participants...",
+  searchPlaceholder: c = "Search participants...",
   className: l
 }) => {
-  const { debug: m } = ae(), [h, g] = y(""), [w, f] = y([]), [S, M] = y(!1), [v, c] = y(null), [N, E] = y(
+  const { debug: m } = oe(), [h, g] = y(""), [w, f] = y([]), [S, M] = y(!1), [v, d] = y(null), [N, E] = y(
     null
   ), I = z(!1);
   G(() => {
@@ -1026,7 +1076,7 @@ const vs = ({
     }
     if (I.current) return;
     (async () => {
-      m && console.log("[ParticipantPicker] Loading initial participants..."), M(!0), c(null);
+      m && console.log("[ParticipantPicker] Loading initial participants..."), M(!0), d(null);
       try {
         const u = await t.loadParticipants({
           search: "",
@@ -1039,7 +1089,7 @@ const vs = ({
         );
       } catch (u) {
         const b = u instanceof Error ? u.message : "Failed to load participants";
-        c(b), console.error("[ParticipantPicker] Failed to load participants:", u);
+        d(b), console.error("[ParticipantPicker] Failed to load participants:", u);
       } finally {
         M(!1);
       }
@@ -1069,7 +1119,7 @@ const vs = ({
     /* @__PURE__ */ i("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: [
       /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-3", children: [
         /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-charcoal", children: "Start a new Conversation" }),
-        /* @__PURE__ */ e(Se, { onClick: n })
+        /* @__PURE__ */ e(pe, { onClick: n })
       ] }),
       /* @__PURE__ */ i("p", { className: "text-xs text-stone mb-3", children: [
         "Select a ",
@@ -1080,11 +1130,11 @@ const vs = ({
         t.totalCount !== void 0 && ` • ${t.totalCount} ${a} total`
       ] }),
       /* @__PURE__ */ e(
-        Cs,
+        vs,
         {
           searchQuery: h,
           setSearchQuery: g,
-          placeholder: d
+          placeholder: c
         }
       )
     ] }),
@@ -1102,7 +1152,7 @@ const vs = ({
         "..."
       ] })
     ] }) }) : k.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(xe, { className: "h-8 w-8 text-charcoal" }) }),
+      /* @__PURE__ */ e("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-sand", children: /* @__PURE__ */ e(Ne, { className: "h-8 w-8 text-charcoal" }) }),
       /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-charcoal mb-2", children: h ? `No ${a} found` : w.length > 0 ? `Already chatting with all ${a}` : `No ${a} yet` }),
       /* @__PURE__ */ e("p", { className: "text-xs text-stone", children: h ? "Try a different search term" : w.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: [
@@ -1131,7 +1181,7 @@ const vs = ({
                   b && /* @__PURE__ */ e("p", { className: "text-xs text-stone truncate", children: b })
                 ] })
               ] }),
-              /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: N === o.id ? /* @__PURE__ */ e(re, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ e(xe, { className: "h-5 w-5 text-stone" }) })
+              /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: N === o.id ? /* @__PURE__ */ e(re, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ e(Ne, { className: "h-5 w-5 text-stone" }) })
             ] })
           }
         ) }, o.id);
@@ -1142,7 +1192,7 @@ const vs = ({
       ] }) })
     ] }) })
   ] });
-}, ws = ({ className: t }) => /* @__PURE__ */ i(
+}, ys = ({ className: t }) => /* @__PURE__ */ i(
   "svg",
   {
     width: "140",
@@ -1276,17 +1326,17 @@ const vs = ({
       ] })
     ]
   }
-), ke = P.memo(
+), Re = U.memo(
   ({ hasChannels: t, channelsLoaded: s }) => /* @__PURE__ */ e("div", { className: "messaging-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ i("div", { className: "flex flex-col items-center max-w-sm text-center", children: [
-    /* @__PURE__ */ e(ws, {}),
+    /* @__PURE__ */ e(ys, {}),
     s && !t && /* @__PURE__ */ i("div", { className: "mt-8", children: [
       /* @__PURE__ */ e("h2", { className: "font-medium text-black text-[18px] mb-2", children: "Your inbox is empty" }),
       /* @__PURE__ */ e("p", { className: "text-[#676B5F] text-sm mb-6", children: "Share with your followers to start receiving messages" })
     ] })
   ] }) })
 );
-ke.displayName = "EmptyState";
-const le = P.memo(({ message: t, 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: [
+Re.displayName = "EmptyState";
+const le = U.memo(({ message: t, 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: [
   /* @__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 }),
@@ -1301,61 +1351,13 @@ const le = P.memo(({ message: t, onBack: s }) => /* @__PURE__ */ e("div", { clas
   )
 ] }) }));
 le.displayName = "ErrorState";
-const ys = ({ className: t, message: s }) => /* @__PURE__ */ i(
-  "div",
-  {
-    className: p("flex items-center justify-center h-full", t),
-    children: [
-      /* @__PURE__ */ i("svg", { viewBox: "0 0 100 100", className: "size-8 fill-pebble", stroke: "none", children: [
-        /* @__PURE__ */ e("circle", { cx: "6", cy: "50", r: "6", children: /* @__PURE__ */ e(
-          "animateTransform",
-          {
-            attributeName: "transform",
-            dur: "1s",
-            type: "translate",
-            values: "0 15 ; 0 -15; 0 15",
-            repeatCount: "indefinite",
-            begin: "0.1"
-          }
-        ) }),
-        /* @__PURE__ */ e("circle", { cx: "30", cy: "50", r: "6", children: /* @__PURE__ */ e(
-          "animateTransform",
-          {
-            attributeName: "transform",
-            dur: "1s",
-            type: "translate",
-            values: "0 10 ; 0 -10; 0 10",
-            repeatCount: "indefinite",
-            begin: "0.2"
-          }
-        ) }),
-        /* @__PURE__ */ e("circle", { cx: "54", cy: "50", r: "6", children: /* @__PURE__ */ e(
-          "animateTransform",
-          {
-            attributeName: "transform",
-            dur: "1s",
-            type: "translate",
-            values: "0 5 ; 0 -5; 0 5",
-            repeatCount: "indefinite",
-            begin: "0.3"
-          }
-        ) })
-      ] }),
-      s && /* @__PURE__ */ e("span", { className: "text-stone", children: s })
-    ]
-  }
-), Re = P.memo(() => /* @__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(ys, { className: "w-6 h-6" }),
-  /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
-] }) }));
-Re.displayName = "LoadingState";
 const Fs = ({
   capabilities: t = {},
   className: s,
   renderMessageInputActions: n,
   onChannelSelect: r,
   onParticipantSelect: a,
-  initialParticipantFilter: d,
+  initialParticipantFilter: c,
   initialParticipantData: l,
   CustomChannelEmptyState: m,
   showChannelList: h = !0,
@@ -1367,18 +1369,18 @@ const Fs = ({
 }) => {
   const {
     service: v,
-    client: c,
+    client: d,
     isConnected: N,
     isLoading: E,
     error: I,
     refreshConnection: k,
     debug: x
-  } = rs(), [R, o] = y(null), [u, b] = y(!1), [B, j] = y(!1), [W, Y] = y(!1), [oe, Q] = y(/* @__PURE__ */ new Set()), [X, ie] = y(0), [O, H] = y(!1), [J, $] = y(null), _ = z(null), {
+  } = rs(), [R, o] = y(null), [u, b] = y(!1), [B, j] = y(!1), [W, Y] = y(!1), [ie, Q] = y(/* @__PURE__ */ new Set()), [X, ce] = y(0), [O, H] = y(!1), [J, $] = y(null), _ = z(null), {
     participantSource: T,
     participantLabel: A = "participants",
     showDeleteConversation: V = !0
-  } = t, K = P.useMemo(() => {
-    const C = c == null ? void 0 : c.userID;
+  } = t, K = U.useMemo(() => {
+    const C = d == null ? void 0 : d.userID;
     return {
       ...{
         type: "messaging",
@@ -1390,13 +1392,13 @@ const Fs = ({
       },
       ...g
     };
-  }, [g, c == null ? void 0 : c.userID]), ee = z(null), Z = D(async () => {
-    if (!c || !N) return;
-    const C = c.userID;
+  }, [g, d == null ? void 0 : d.userID]), ee = z(null), Z = D(async () => {
+    if (!d || !N) return;
+    const C = d.userID;
     if (C)
       try {
         x && console.log("[MessagingShell] Syncing channels for user:", C);
-        const U = await c.queryChannels(
+        const P = await d.queryChannels(
           {
             type: "messaging",
             members: { $in: [C] }
@@ -1404,39 +1406,39 @@ const Fs = ({
           {},
           { limit: 100 }
         ), F = /* @__PURE__ */ new Set();
-        U.forEach((L) => {
-          const ce = L.state.members;
-          Object.values(ce).forEach((Pe) => {
-            var me;
-            const de = (me = Pe.user) == null ? void 0 : me.id;
-            de && de !== C && F.add(de);
+        P.forEach((L) => {
+          const de = L.state.members;
+          Object.values(de).forEach((Ue) => {
+            var he;
+            const ue = (he = Ue.user) == null ? void 0 : he.id;
+            ue && ue !== C && F.add(ue);
           });
-        }), Q((L) => L.size === F.size && [...L].every((ce) => F.has(ce)) ? L : F), b(U.length > 0), j(!0), ee.current = C, x && console.log("[MessagingShell] Channels synced successfully:", {
-          channelCount: U.length,
+        }), Q((L) => L.size === F.size && [...L].every((de) => F.has(de)) ? L : F), b(P.length > 0), j(!0), ee.current = C, x && console.log("[MessagingShell] Channels synced successfully:", {
+          channelCount: P.length,
           memberCount: F.size
         });
-      } catch (U) {
-        console.error("[MessagingShell] Failed to sync channels:", U);
+      } catch (P) {
+        console.error("[MessagingShell] Failed to sync channels:", P);
       }
-  }, [c, N, x]);
+  }, [d, N, x]);
   G(() => {
-    if (!c || !N) return;
-    const C = c.userID;
+    if (!d || !N) return;
+    const C = d.userID;
     C && ee.current !== C && Z();
-  }, [c, N, Z]), G(() => {
-    if (!d || !c || !N) return;
+  }, [d, N, Z]), G(() => {
+    if (!c || !d || !N) return;
     (async () => {
-      const U = c.userID;
-      if (U)
+      const P = d.userID;
+      if (P)
         try {
           x && console.log(
             "[MessagingShell] Loading initial conversation with:",
-            d
+            c
           );
-          const F = await c.queryChannels(
+          const F = await d.queryChannels(
             {
               type: "messaging",
-              members: { $eq: [U, d] }
+              members: { $eq: [P, c] }
             },
             {},
             { limit: 1 }
@@ -1473,7 +1475,7 @@ const Fs = ({
               "No conversation found with this account"
             ), x && console.log(
               "[MessagingShell] No conversation found for:",
-              d
+              c
             );
         } catch (F) {
           console.error(
@@ -1483,9 +1485,9 @@ const Fs = ({
         }
     })();
   }, [
-    d,
-    l,
     c,
+    l,
+    d,
     N,
     v,
     x,
@@ -1500,7 +1502,7 @@ const Fs = ({
     O || o(null);
   }, [O]), Me = D(
     async (C) => {
-      var U;
+      var P;
       if (v)
         try {
           x && console.log(
@@ -1518,7 +1520,7 @@ const Fs = ({
           } catch (L) {
             console.warn("[MessagingShell] Failed to unhide channel:", L);
           }
-          o(F), Y(!1), (U = _.current) == null || U.close(), a == null || a(C);
+          o(F), Y(!1), (P = _.current) == null || P.close(), a == null || a(C);
         } catch (F) {
           console.error("[MessagingShell] Failed to start conversation:", F);
         }
@@ -1543,7 +1545,7 @@ const Fs = ({
     },
     [Z, x]
   ), te = !!R;
-  return E ? /* @__PURE__ */ e("div", { className: p("h-full", s), children: /* @__PURE__ */ e(Re, {}) }) : I ? /* @__PURE__ */ e("div", { className: p("h-full", s), children: /* @__PURE__ */ e(le, { message: I, onBack: k }) }) : !N || !c ? /* @__PURE__ */ e("div", { className: p("h-full", s), children: /* @__PURE__ */ e(
+  return E ? /* @__PURE__ */ e("div", { className: p("h-full", s), children: /* @__PURE__ */ e(ae, {}) }) : I ? /* @__PURE__ */ e("div", { className: p("h-full", s), children: /* @__PURE__ */ e(le, { message: I, onBack: k }) }) : !N || !d ? /* @__PURE__ */ e("div", { className: p("h-full", s), children: /* @__PURE__ */ e(
     le,
     {
       message: "Not connected to messaging service",
@@ -1572,7 +1574,7 @@ const Fs = ({
                 }
               ),
               children: /* @__PURE__ */ e(
-                Ee,
+                Ie,
                 {
                   onChannelSelect: _e,
                   selectedChannel: R || void 0,
@@ -1588,14 +1590,14 @@ const Fs = ({
               className: p(
                 "messaging-conversation-view flex-1 flex-col min-w-0 min-h-0",
                 {
-                  // In direct conversation mode, always show (full width)
-                  flex: O || te,
+                  // In direct conversation mode (or waiting for it), always show (full width)
+                  flex: O || te || c,
                   // Normal mode: hide on mobile when no channel selected
-                  "hidden lg:flex": !O && !te
+                  "hidden lg:flex": !O && !te && !c
                 }
               ),
               children: R ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
-                pe,
+                ke,
                 {
                   channel: R,
                   onBack: De,
@@ -1610,8 +1612,11 @@ const Fs = ({
                   onReportParticipantClick: M
                 },
                 R.id
-              ) }) : /* @__PURE__ */ e(
-                ke,
+              ) }) : c ? (
+                // Show loading while creating/loading direct conversation channel
+                /* @__PURE__ */ e(ae, {})
+              ) : /* @__PURE__ */ e(
+                Re,
                 {
                   hasChannels: u,
                   channelsLoaded: B
@@ -1629,12 +1634,12 @@ const Fs = ({
             onClick: Fe,
             onClose: se,
             children: /* @__PURE__ */ e("div", { className: "h-full w-full bg-white shadow-max-elevation-light", children: /* @__PURE__ */ e(
-              vs,
+              ws,
               {
                 participantSource: T,
                 onSelectParticipant: Me,
                 onClose: se,
-                existingParticipantIds: oe,
+                existingParticipantIds: ie,
                 participantLabel: A,
                 searchPlaceholder: `Search ${A}...`
               },
@@ -1673,17 +1678,17 @@ const Fs = ({
   loadingFaqId: n,
   headerText: r,
   className: a,
-  avatarImage: d,
+  avatarImage: c,
   avatarName: l
 }) => {
   const m = t.filter((h) => h.enabled).sort((h, g) => (h.order ?? 0) - (g.order ?? 0));
   return m.length === 0 ? null : /* @__PURE__ */ e("div", { className: a, children: /* @__PURE__ */ i("div", { className: "flex gap-3 items-end", children: [
-    (d || l) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
+    (c || l) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
       q,
       {
         id: l || "account",
         name: l || "Account",
-        image: d,
+        image: c,
         size: 24,
         shape: "circle"
       }
@@ -1709,7 +1714,7 @@ const Fs = ({
     )
   ] }) });
 }, Ls = (t, s = {}) => {
-  const { initialSearch: n = "", pageSize: r = 20 } = s, [a, d] = y([]), [l, m] = y(!1), [h, g] = y(null), [w, f] = y(n), [S, M] = y(!0), [v, c] = y(), N = D(async (x = !1, R) => {
+  const { initialSearch: n = "", pageSize: r = 20 } = s, [a, c] = y([]), [l, m] = y(!1), [h, g] = y(null), [w, f] = y(n), [S, M] = y(!0), [v, d] = y(), N = D(async (x = !1, R) => {
     if (l) return;
     const o = R !== void 0 ? R : w;
     m(!0), g(null);
@@ -1719,9 +1724,9 @@ const Fs = ({
         limit: r,
         cursor: x ? void 0 : v
       });
-      d(
+      c(
         (b) => x ? u.participants : [...b, ...u.participants]
-      ), M(u.hasMore), c(u.nextCursor);
+      ), M(u.hasMore), d(u.nextCursor);
     } catch (u) {
       const b = u instanceof Error ? u.message : "Failed to load participants";
       g(b), console.error("[useParticipants] Load error:", u);
@@ -1731,9 +1736,9 @@ const Fs = ({
   }, [t, w, v, r, l]), E = D(() => {
     S && !l && N(!1);
   }, [S, l, N]), I = D((x) => {
-    f(x), c(void 0), N(!0, x);
+    f(x), d(void 0), N(!0, x);
   }, [N]), k = D(() => {
-    c(void 0), N(!0);
+    d(void 0), N(!0);
   }, [N]);
   return G(() => {
     N(!0);
@@ -1752,13 +1757,13 @@ const Fs = ({
 export {
   q as Avatar,
   gs as ChannelEmptyState,
-  Ee as ChannelList,
-  pe as ChannelView,
+  Ie as ChannelList,
+  ke as ChannelView,
   Ts as FaqList,
   Es as FaqListItem,
   Ms as MessagingProvider,
   Fs as MessagingShell,
-  vs as ParticipantPicker,
+  ws as ParticipantPicker,
   as as formatRelativeTime,
   rs as useMessaging,
   Ls as useParticipants