@linktr.ee/messaging-react 1.12.1 → 1.12.2-rc-1765326466

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export declare interface AvatarProps {
 
 /**
  * Empty state component shown when a channel has no messages
+ * Returns null to show nothing - the LoadingIndicator handles the loading state
  */
 export declare const ChannelEmptyState: default_2.FC;
 

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 { 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 ue, 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 = Ue({
   service: null,
   client: null,
   isConnected: !1,
@@ -15,7 +15,7 @@ const we = Ue({
   refreshConnection: async () => {
   },
   debug: !1
-}), ae = () => Oe(we), Ms = ({
+}), ae = () => Oe(ye), Ms = ({
   children: t,
   user: s,
   serviceConfig: n,
@@ -206,7 +206,7 @@ const we = Ue({
     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,
@@ -236,7 +236,7 @@ const we = Ue({
     day: "numeric",
     year: "2-digit"
   });
-}, be = [
+}, Ce = [
   "🍎",
   // Apple
   "🍌",
@@ -273,8 +273,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,
@@ -316,7 +316,7 @@ const q = ({
       )
     }
   );
-}, ye = P.memo(
+}, Ee = P.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 = () => {
@@ -385,8 +385,8 @@ const q = ({
     );
   }
 );
-ye.displayName = "CustomChannelPreview";
-const Ee = P.memo(
+Ee.displayName = "CustomChannelPreview";
+const Ie = P.memo(
   ({
     onChannelSelect: t,
     selectedChannel: s,
@@ -403,7 +403,7 @@ const Ee = P.memo(
       filters: n
     });
     const m = P.useMemo(() => (g) => /* @__PURE__ */ e(
-      ye,
+      Ee,
       {
         ...g,
         selectedChannel: s,
@@ -433,7 +433,7 @@ const Ee = P.memo(
     );
   }
 );
-Ee.displayName = "ChannelList";
+Ie.displayName = "ChannelList";
 const ne = ({
   variant: t = "default",
   className: s,
@@ -452,7 +452,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 +473,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(ue, { 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,
@@ -537,7 +537,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,9 +581,57 @@ 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 })
+    ]
+  }
+), me = 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(xs, { className: "w-6 h-6" }),
+  /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
+] }) }));
+me.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(), d = P.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;
@@ -602,7 +650,7 @@ 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: [
@@ -626,7 +674,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,7 +687,7 @@ 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(
@@ -660,12 +708,12 @@ 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,
@@ -760,7 +808,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(
@@ -820,7 +868,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 +879,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,7 +894,7 @@ const cs = (t) => ({
       }
     )
   );
-}, bs = ({
+}, Cs = ({
   onBack: t,
   showBackButton: s,
   renderMessageInputActions: n,
@@ -857,7 +905,7 @@ const cs = (t) => ({
   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 = P.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;
@@ -875,10 +923,10 @@ const cs = (t) => ({
     var c;
     (c = w.current) == null || c.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 +950,7 @@ const cs = (t) => ({
       )
     ] }),
     /* @__PURE__ */ e(
-      Ns,
+      bs,
       {
         dialogRef: w,
         onClose: v,
@@ -918,7 +966,7 @@ const cs = (t) => ({
       }
     )
   ] });
-}, pe = P.memo(
+}, ke = P.memo(
   ({
     channel: t,
     onBack: s,
@@ -945,8 +993,9 @@ const cs = (t) => ({
           channel: t,
           MessageSystem: fs,
           EmptyStateIndicator: m,
+          LoadingIndicator: me,
           children: /* @__PURE__ */ e(
-            bs,
+            Cs,
             {
               onBack: s,
               showBackButton: n,
@@ -965,8 +1014,8 @@ const cs = (t) => ({
     }
   )
 );
-pe.displayName = "ChannelView";
-function Cs({
+ke.displayName = "ChannelView";
+function vs({
   searchQuery: t,
   setSearchQuery: s,
   placeholder: n
@@ -992,7 +1041,7 @@ function Cs({
       }
     ),
     t && /* @__PURE__ */ e(
-      Ie,
+      Se,
       {
         label: "Clear search",
         onClick: () => {
@@ -1005,7 +1054,7 @@ function Cs({
     )
   ] });
 }
-const vs = ({
+const ws = ({
   participantSource: t,
   onSelectParticipant: s,
   onClose: n,
@@ -1069,7 +1118,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,7 +1129,7 @@ const vs = ({
         t.totalCount !== void 0 && ` • ${t.totalCount} ${a} total`
       ] }),
       /* @__PURE__ */ e(
-        Cs,
+        vs,
         {
           searchQuery: h,
           setSearchQuery: g,
@@ -1102,7 +1151,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 +1180,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 +1191,7 @@ const vs = ({
       ] }) })
     ] }) })
   ] });
-}, ws = ({ className: t }) => /* @__PURE__ */ i(
+}, ys = ({ className: t }) => /* @__PURE__ */ i(
   "svg",
   {
     width: "140",
@@ -1276,16 +1325,16 @@ const vs = ({
       ] })
     ]
   }
-), ke = P.memo(
+), Re = P.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";
+Re.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: [
   /* @__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!" }),
@@ -1301,54 +1350,6 @@ 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,
@@ -1407,8 +1408,8 @@ const Fs = ({
         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;
+            var he;
+            const de = (he = Pe.user) == null ? void 0 : he.id;
             de && de !== C && F.add(de);
           });
         }), 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:", {
@@ -1543,7 +1544,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(me, {}) }) : 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(
     le,
     {
       message: "Not connected to messaging service",
@@ -1564,16 +1565,15 @@ const Fs = ({
               className: p(
                 "messaging-channel-list-sidebar min-h-0 min-w-0 lg:flex lg:flex-col",
                 {
-                  // Explicitly hidden via prop or in direct conversation mode
                   "!hidden": h === !1 || O,
-                  // Normal mode: hide on mobile when channel selected, show on desktop
+                  // Hide on mobile when channel selected, show on desktop with consistent narrow width
                   "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": h !== !1 && !O && te,
-                  // Normal mode: show when no channel selected
-                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": h !== !1 && !O && !te
+                  // Show on mobile when no channel selected, use same narrow width on desktop
+                  "flex flex-col w-full lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": h !== !1 && !O && !te
                 }
               ),
               children: /* @__PURE__ */ e(
-                Ee,
+                Ie,
                 {
                   onChannelSelect: _e,
                   selectedChannel: R || void 0,
@@ -1596,7 +1596,7 @@ const Fs = ({
                 }
               ),
               children: R ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
-                pe,
+                ke,
                 {
                   channel: R,
                   onBack: De,
@@ -1612,7 +1612,7 @@ const Fs = ({
                 },
                 R.id
               ) }) : /* @__PURE__ */ e(
-                ke,
+                Re,
                 {
                   hasChannels: u,
                   channelsLoaded: B
@@ -1630,7 +1630,7 @@ 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,
@@ -1753,13 +1753,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