@linktr.ee/messaging-react 1.9.1 → 1.9.3

package/dist/index.js

@@ -1,241 +1,233 @@
-import { jsx as e, jsxs as d, Fragment as se } from "react/jsx-runtime";
+import { jsx as e, jsxs as d, Fragment as fe } from "react/jsx-runtime";
 import R from "classnames";
-import Y, { createContext as Re, useContext as Fe, useCallback as P, useState as y, useRef as $, useEffect as H } from "react";
-import { StreamChatService as Te } from "@linktr.ee/messaging-core";
-import { Chat as De, ChannelList as pe, MessageInput as Me, useMessageInputContext as Pe, useMessageComposerHasSendableData as Ue, SimpleAttachmentSelector as Oe, QuotedMessagePreview as Le, LinkPreviewList as _e, AttachmentPreviewList as je, TextareaComposer as Ae, Channel as Be, useChannelStateContext as fe, Window as ze, MessageList as $e } from "stream-chat-react";
-import { XIcon as he, ArrowUpIcon as He, 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";
-const ge = Re({
+import q, { createContext as Se, useContext as ke, useCallback as P, useState as E, useRef as B, useEffect as $ } 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 { LinkPreviewsManager as ue } from "stream-chat";
+const ge = Se({
   service: null,
   client: null,
   isConnected: !1,
   isLoading: !1,
   error: null,
   capabilities: {},
-  customization: {},
   refreshConnection: async () => {
   },
   debug: !1
-}), ne = () => Fe(ge), bs = ({
+}), se = () => ke(ge), ws = ({
   children: t,
   user: s,
   serviceConfig: n,
-  apiKey: r,
-  capabilities: a = {},
-  customization: c = {},
-  debug: i = !1
+  apiKey: l,
+  capabilities: o = {},
+  debug: a = !1
 }) => {
-  const l = P(
-    (x, ...D) => {
-      i && console.log(`🔥 [MessagingProvider] ${x}`, ...D);
+  const r = P(
+    (u, ...N) => {
+      a && console.log(`🔥 [MessagingProvider] ${u}`, ...N);
     },
-    [i]
+    [a]
   );
-  l("🔄 RENDER START", {
+  r("🔄 RENDER START", {
     userId: s == null ? void 0 : s.id,
-    apiKey: (r == null ? void 0 : r.substring(0, 8)) + "...",
+    apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
     serviceConfig: !!n,
-    capabilities: Object.keys(a),
-    customization: Object.keys(c)
+    capabilities: Object.keys(o)
   });
-  const [o, w] = y(null), [I, N] = y(null), [m, S] = y(!1), [g, b] = y(!1), [E, v] = y(null), F = $(!1), C = $({
+  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({
     userId: s == null ? void 0 : s.id,
-    apiKey: r,
+    apiKey: l,
     serviceConfig: n,
-    capabilities: a,
-    customization: c
-  }), T = $(0);
-  T.current++, l("📊 RENDER INFO", {
-    renderCount: T.current,
-    currentProps: { userId: s == null ? void 0 : s.id, apiKey: (r == null ? void 0 : r.substring(0, 8)) + "..." },
+    capabilities: o
+  }), S = B(0);
+  S.current++, r("📊 RENDER INFO", {
+    renderCount: S.current,
+    currentProps: { userId: s == null ? void 0 : s.id, apiKey: (l == null ? void 0 : l.substring(0, 8)) + "..." },
     propChanges: {
-      userChanged: C.current.userId !== (s == null ? void 0 : s.id),
-      apiKeyChanged: C.current.apiKey !== r,
-      serviceConfigChanged: C.current.serviceConfig !== n,
-      capabilitiesChanged: C.current.capabilities !== a,
-      customizationChanged: C.current.customization !== c
+      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
     }
-  }), C.current = {
+  }), y.current = {
     userId: s == null ? void 0 : s.id,
-    apiKey: r,
+    apiKey: l,
     serviceConfig: n,
-    capabilities: a,
-    customization: c
-  }, H(() => {
-    const x = T.current;
-    if (l("🔧 SERVICE INIT EFFECT TRIGGERED", {
-      renderCount: x,
-      apiKey: !!r,
+    capabilities: o
+  }, $(() => {
+    const u = S.current;
+    if (r("🔧 SERVICE INIT EFFECT TRIGGERED", {
+      renderCount: u,
+      apiKey: !!l,
       serviceConfig: !!n,
       dependencies: {
-        apiKey: (r == null ? void 0 : r.substring(0, 8)) + "...",
+        apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
         serviceConfigRef: n,
-        serviceConfigStable: C.current.serviceConfig === n,
-        apiKeyStable: C.current.apiKey === r
+        serviceConfigStable: y.current.serviceConfig === n,
+        apiKeyStable: y.current.apiKey === l
       }
-    }), !r || !n) {
-      l("⚠️ SERVICE INIT SKIPPED", {
-        renderCount: x,
+    }), !l || !n) {
+      r("⚠️ SERVICE INIT SKIPPED", {
+        renderCount: u,
         reason: "Missing apiKey or serviceConfig"
       });
       return;
     }
-    l("🚀 CREATING NEW SERVICE", {
-      renderCount: x,
-      apiKey: (r == null ? void 0 : r.substring(0, 8)) + "...",
-      serviceConfigChanged: C.current.serviceConfig !== n
+    r("🚀 CREATING NEW SERVICE", {
+      renderCount: u,
+      apiKey: (l == null ? void 0 : l.substring(0, 8)) + "...",
+      serviceConfigChanged: y.current.serviceConfig !== n
     });
-    const D = new Te({
+    const N = new Re({
       ...n,
-      apiKey: r,
-      debug: i
+      apiKey: l,
+      debug: a
     });
-    return w(D), l("✅ SERVICE SET", {
-      renderCount: x,
-      serviceInstance: !!D
+    return m(N), r("✅ SERVICE SET", {
+      renderCount: u,
+      serviceInstance: !!N
     }), () => {
-      l("🧹 SERVICE CLEANUP", {
-        renderCount: x,
+      r("🧹 SERVICE CLEANUP", {
+        renderCount: u,
         reason: "Effect cleanup"
-      }), D.disconnectUser().catch(console.error);
+      }), N.disconnectUser().catch(console.error);
     };
-  }, [r, n, i, l]);
-  const p = $(null);
-  H(() => {
-    var D, q;
-    if (l("🔗 USER CONNECTION EFFECT TRIGGERED", {
-      hasService: !!o,
+  }, [l, n, a, r]);
+  const p = B(null);
+  $(() => {
+    var N, j;
+    if (r("🔗 USER CONNECTION EFFECT TRIGGERED", {
+      hasService: !!i,
       hasUser: !!s,
       userId: s == null ? void 0 : s.id,
-      isConnecting: F.current,
-      isConnected: m,
-      dependencies: { service: !!o, userId: s == null ? void 0 : s.id }
-    }), !o || !s) {
-      l("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
+      isConnecting: v.current,
+      isConnected: f,
+      dependencies: { service: !!i, userId: s == null ? void 0 : s.id }
+    }), !i || !s) {
+      r("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    if (F.current) {
-      l("⚠️ USER CONNECTION SKIPPED", "Already connecting");
+    if (v.current) {
+      r("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
-    if (((D = p.current) == null ? void 0 : D.serviceId) === o && ((q = p.current) == null ? void 0 : q.userId) === s.id) {
-      l(
+    if (((N = p.current) == null ? void 0 : N.serviceId) === i && ((j = p.current) == null ? void 0 : j.userId) === s.id) {
+      r(
         "⚠️ USER CONNECTION SKIPPED",
         "Already connected this user with this service"
       );
       return;
     }
     (async () => {
-      l("🚀 STARTING USER CONNECTION", { userId: s.id }), F.current = !0, b(!0), v(null);
+      r("🚀 STARTING USER CONNECTION", { userId: s.id }), v.current = !0, g(!0), w(null);
       try {
-        l("📞 CALLING SERVICE.CONNECTUSER", { userId: s.id });
-        const _ = await o.connectUser(s);
-        N(_), S(!0), p.current = { serviceId: o, userId: s.id }, l("✅ USER CONNECTION SUCCESS", {
+        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", {
           userId: s.id,
-          clientId: _.userID
+          clientId: A.userID
         });
-      } catch (_) {
-        const O = _ instanceof Error ? _.message : "Connection failed";
-        v(O), l("❌ USER CONNECTION ERROR", {
+      } catch (A) {
+        const W = A instanceof Error ? A.message : "Connection failed";
+        w(W), r("❌ USER CONNECTION ERROR", {
           userId: s.id,
-          error: O
+          error: W
         });
       } finally {
-        b(!1), F.current = !1, l("🔄 USER CONNECTION FINISHED", {
+        g(!1), v.current = !1, r("🔄 USER CONNECTION FINISHED", {
           userId: s.id,
-          isConnected: m
+          isConnected: f
         });
       }
     })();
-  }, [o, s, l, m]), H(() => (l("🔌 CLEANUP EFFECT REGISTERED", {
-    hasService: !!o,
-    isConnected: m
+  }, [i, s, r, f]), $(() => (r("🔌 CLEANUP EFFECT REGISTERED", {
+    hasService: !!i,
+    isConnected: f
   }), () => {
-    o && m ? (l(
+    i && f ? (r(
       "🧹 CLEANUP EFFECT TRIGGERED",
       "Cleaning up connection on unmount"
-    ), p.current = null, o.disconnectUser().catch(console.error)) : l("🔇 CLEANUP EFFECT SKIPPED", {
-      hasService: !!o,
-      isConnected: m
+    ), p.current = null, i.disconnectUser().catch(console.error)) : r("🔇 CLEANUP EFFECT SKIPPED", {
+      hasService: !!i,
+      isConnected: f
     });
-  }), [o, m, l]);
-  const u = P(async () => {
-    if (l("🔄 REFRESH CONNECTION CALLED", {
-      hasService: !!o,
+  }), [i, f, r]);
+  const T = P(async () => {
+    if (r("🔄 REFRESH CONNECTION CALLED", {
+      hasService: !!i,
       hasUser: !!s
-    }), !o || !s) {
-      l("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
+    }), !i || !s) {
+      r("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    l("🚀 STARTING CONNECTION REFRESH", { userId: s.id }), b(!0);
+    r("🚀 STARTING CONNECTION REFRESH", { userId: s.id }), g(!0);
     try {
-      l("🔌 DISCONNECTING FOR REFRESH"), await o.disconnectUser(), l("📞 RECONNECTING FOR REFRESH");
-      const x = await o.connectUser(s);
-      N(x), S(!0), v(null), l("✅ CONNECTION REFRESH SUCCESS", { userId: s.id });
-    } catch (x) {
-      const D = x instanceof Error ? x.message : "Refresh failed";
-      v(D), l("❌ CONNECTION REFRESH ERROR", {
+      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 });
+    } catch (u) {
+      const N = u instanceof Error ? u.message : "Refresh failed";
+      w(N), r("❌ CONNECTION REFRESH ERROR", {
         userId: s.id,
-        error: D
+        error: N
       });
     } finally {
-      b(!1), l("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
+      g(!1), r("🔄 CONNECTION REFRESH FINISHED", { userId: s.id });
     }
-  }, [o, s, l]), f = Y.useMemo(() => (l("💫 CONTEXT VALUE MEMOIZATION", {
-    hasService: !!o,
-    hasClient: !!I,
-    isConnected: m,
-    isLoading: g,
-    hasError: !!E,
-    capabilitiesKeys: Object.keys(a),
-    customizationKeys: Object.keys(c)
+  }, [i, s, r]), c = q.useMemo(() => (r("💫 CONTEXT VALUE MEMOIZATION", {
+    hasService: !!i,
+    hasClient: !!x,
+    isConnected: f,
+    isLoading: I,
+    hasError: !!C,
+    capabilitiesKeys: Object.keys(o)
   }), {
-    service: o,
-    client: I,
-    isConnected: m,
-    isLoading: g,
-    error: E,
-    capabilities: a,
-    customization: c,
-    refreshConnection: u,
-    debug: i
+    service: i,
+    client: x,
+    isConnected: f,
+    isLoading: I,
+    error: C,
+    capabilities: o,
+    refreshConnection: T,
+    debug: a
   }), [
-    o,
+    i,
+    x,
+    f,
     I,
-    m,
-    g,
-    E,
+    C,
+    o,
+    T,
     a,
-    c,
-    u,
-    i,
-    l
+    r
   ]);
-  return l("🔄 RENDER END", {
-    renderCount: T.current,
-    willRenderChat: !!(I && m),
-    contextValueReady: !!f
-  }), /* @__PURE__ */ e(ge.Provider, { value: f, children: I && m ? /* @__PURE__ */ e(De, { client: I, children: t }) : t });
-}, qe = () => ne(), Ye = (t, s) => {
+  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) => {
   const n = new Date(
     Date.UTC(t.getUTCFullYear(), t.getUTCMonth(), t.getUTCDate())
-  ), a = new Date(
+  ), o = new Date(
     Date.UTC(s.getUTCFullYear(), s.getUTCMonth(), s.getUTCDate())
   ).getTime() - n.getTime();
-  return Math.floor(a / (1e3 * 60 * 60 * 24));
-}, Je = (t) => {
+  return Math.floor(o / (1e3 * 60 * 60 * 24));
+}, Ye = (t) => {
   const s = /* @__PURE__ */ new Date();
   if (Math.floor((s.getTime() - t.getTime()) / 1e3) < 60)
     return "Just now";
-  const r = Ye(t, s);
-  return r === 0 ? t.toLocaleTimeString([], {
+  const l = qe(t, s);
+  return l === 0 ? t.toLocaleTimeString([], {
     hour: "numeric",
     minute: "2-digit"
-  }) : r === 1 ? "Yesterday" : r < 7 ? `${r}d` : r < 28 ? `${Math.floor(r / 7)}w` : t.toLocaleDateString("en-US", {
+  }) : l === 1 ? "Yesterday" : l < 7 ? `${l}d` : l < 28 ? `${Math.floor(l / 7)}w` : t.toLocaleDateString("en-US", {
     month: "numeric",
     day: "numeric",
     year: "2-digit"
   });
-}, ue = [
+}, me = [
   "🍎",
   // Apple
   "🍌",
@@ -263,37 +255,37 @@ const ge = Re({
   "🍈"
   // Melon
 ];
-function Qe(t) {
+function Je(t) {
   let s = 0;
   for (let n = 0; n < t.length; n++) {
-    const r = t.charCodeAt(n);
-    s = (s << 5) - s + r, s = s & s;
+    const l = t.charCodeAt(n);
+    s = (s << 5) - s + l, s = s & s;
   }
   return Math.abs(s);
 }
-function Xe(t) {
-  const n = Qe(t) % ue.length;
-  return ue[n];
+function Qe(t) {
+  const n = Je(t) % me.length;
+  return me[n];
 }
-const J = ({
+const Y = ({
   id: t,
   image: s,
   size: n = 40,
-  className: r,
-  shape: a = "squircle"
+  className: l,
+  shape: o = "squircle"
 }) => {
-  const c = Xe(t), l = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg", o = a === "circle" ? { borderRadius: "50%" } : {
+  const a = Qe(t), i = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg", m = o === "circle" ? { borderRadius: "50%" } : {
     borderRadius: "33%",
     "corner-shape": "superellipse(1.3)"
   };
   return /* @__PURE__ */ e(
     "div",
     {
-      className: R("flex-shrink-0 overflow-hidden", r),
+      className: R("flex-shrink-0 overflow-hidden", l),
       style: {
         width: `${n}px`,
         height: `${n}px`,
-        ...o
+        ...m
       },
       children: s ? /* @__PURE__ */ e(
         "img",
@@ -308,53 +300,53 @@ const J = ({
           "aria-hidden": "true",
           className: R(
             "avatar-fallback flex h-full w-full items-center justify-center font-semibold bg-[#E6E5E3] select-none transition-colors",
-            l
+            i
           ),
-          children: c
+          children: a
         }
       )
     }
   );
-}, Ze = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: r = !1, unread: a }) => {
-  var E, v, F, C, T, p;
-  const c = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), i = () => {
+}, Xe = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: l = !1, unread: o }) => {
+  var w, v, y, S, p, T;
+  const a = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), r = () => {
     t && n(t);
-  }, o = Object.values(((E = t == null ? void 0 : t.state) == null ? void 0 : E.members) || {}).find(
-    (u) => {
-      var f, x;
-      return ((f = u.user) == null ? void 0 : f.id) && u.user.id !== ((x = t == null ? void 0 : t._client) == null ? void 0 : x.userID);
+  }, m = Object.values(((w = t == null ? void 0 : t.state) == null ? void 0 : w.members) || {}).find(
+    (c) => {
+      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);
     }
-  ), w = ((v = o == null ? void 0 : o.user) == null ? void 0 : v.name) || "Conversation", I = (F = o == null ? void 0 : o.user) == null ? void 0 : F.image, N = (T = (C = t == null ? void 0 : t.state) == null ? void 0 : C.messages) == null ? void 0 : T[t.state.messages.length - 1], S = (() => {
-    var f;
-    if (N != null && N.text) return N.text;
-    const u = (f = N == null ? void 0 : N.attachments) == null ? void 0 : f[0];
-    return u != null && u.asset_url ? u.asset_url : u != null && u.image_url ? u.image_url : u != null && u.og_scrape_url ? u.og_scrape_url : u != null && u.thumb_url ? u.thumb_url : "No messages yet";
-  })(), g = N != null && N.created_at ? Je(new Date(N.created_at)) : "", b = a ?? 0;
-  return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+  ), 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 = (() => {
+    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;
+  return l && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
     channelId: t == null ? void 0 : t.id,
-    isSelected: c,
-    participantName: w,
-    unreadCount: b,
+    isSelected: a,
+    participantName: x,
+    unreadCount: C,
     hasTimestamp: !!g
   }), /* @__PURE__ */ e(
     "button",
     {
       type: "button",
-      onClick: i,
+      onClick: r,
       className: R(
         "group w-full px-4 py-3 transition-colors border-b border-sand text-left max-w-full overflow-hidden focus-ring",
         {
-          "bg-primary-alt/10 border-l-4 border-l-primary": c,
-          "hover:bg-sand": !c
+          "bg-primary-alt/10 border-l-4 border-l-primary": a,
+          "hover:bg-sand": !a
         }
       ),
       children: /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
-          J,
+          Y,
           {
-            id: ((p = o == null ? void 0 : o.user) == null ? void 0 : p.id) || t.id || "unknown",
-            name: w,
-            image: I,
+            id: ((T = m == null ? void 0 : m.user) == null ? void 0 : T.id) || t.id || "unknown",
+            name: x,
+            image: k,
             size: 44,
             className: "[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
           }
@@ -366,33 +358,33 @@ const J = ({
               {
                 className: R(
                   "text-sm font-medium truncate",
-                  c ? "text-primary" : "text-charcoal"
+                  a ? "text-primary" : "text-charcoal"
                 ),
-                children: w
+                children: x
               }
             ),
             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: S }),
-            b > 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: b > 99 ? "99+" : b })
+            /* @__PURE__ */ e("p", { className: "text-xs text-stone mr-2 flex-1 line-clamp-2", children: I }),
+            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 })
           ] })
         ] })
       ] })
     }
   );
-}, Ke = ({
+}, Ze = ({
   onChannelSelect: t,
   selectedChannel: s,
   filters: n,
-  className: r,
-  customEmptyStateIndicator: a
+  className: l,
+  customEmptyStateIndicator: o
 }) => {
-  const c = Y.useRef(0);
-  c.current++;
-  const { debug: i = !1 } = ne();
-  return i && console.log("📺 [ChannelList] 🔄 RENDER START", {
-    renderCount: c.current,
+  const a = q.useRef(0);
+  a.current++;
+  const { debug: r = !1 } = se();
+  return r && console.log("📺 [ChannelList] 🔄 RENDER START", {
+    renderCount: a.current,
     selectedChannelId: s == null ? void 0 : s.id,
     filters: n
   }), /* @__PURE__ */ e(
@@ -400,34 +392,34 @@ const J = ({
     {
       className: R(
         "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
-        r
+        l
       ),
-      children: /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (i && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
-        renderCount: c.current,
+      children: /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (r && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
+        renderCount: a.current,
         filters: n
       }), /* @__PURE__ */ e(
-        pe,
+        Fe,
         {
           filters: n,
           sort: { last_message_at: -1 },
           options: { limit: 30 },
-          Preview: (l) => {
-            var o, w;
-            return i && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
-              channelId: (o = l.channel) == null ? void 0 : o.id,
+          Preview: (i) => {
+            var m, x;
+            return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+              channelId: (m = i.channel) == null ? void 0 : m.id,
               selectedChannelId: s == null ? void 0 : s.id,
-              isSelected: (s == null ? void 0 : s.id) === ((w = l.channel) == null ? void 0 : w.id)
+              isSelected: (s == null ? void 0 : s.id) === ((x = i.channel) == null ? void 0 : x.id)
             }), /* @__PURE__ */ e(
-              Ze,
+              Xe,
               {
-                ...l,
+                ...i,
                 selectedChannel: s,
                 onChannelSelect: t,
-                debug: i
+                debug: r
               }
             );
           },
-          EmptyStateIndicator: a
+          EmptyStateIndicator: o
         },
         JSON.stringify(n)
       )) })
@@ -437,7 +429,7 @@ const J = ({
   variant: t = "default",
   className: s,
   children: n,
-  ...r
+  ...l
 }) => /* @__PURE__ */ e(
   "button",
   {
@@ -447,11 +439,11 @@ const J = ({
       t === "danger" ? "text-danger hover:bg-danger/50" : "text-charcoal hover:bg-sand",
       s
     ),
-    ...r,
+    ...l,
     children: n
   }
 );
-function xe({ label: t, className: s, children: n, ...r }) {
+function xe({ label: t, className: s, children: n, ...l }) {
   return /* @__PURE__ */ d(
     "button",
     {
@@ -459,12 +451,12 @@ function xe({ label: t, className: s, children: n, ...r }) {
       className: R(
         "rounded-full p-2 transition-colors focus-ring",
         {
-          "cursor-not-allowed opacity-50": r.disabled,
-          "hover:bg-sand": !r.disabled
+          "cursor-not-allowed opacity-50": l.disabled,
+          "hover:bg-sand": !l.disabled
         },
         s
       ),
-      ...r,
+      ...l,
       children: [
         /* @__PURE__ */ e("span", { className: "sr-only", children: t }),
         n
@@ -473,19 +465,78 @@ function xe({ label: t, className: s, children: n, ...r }) {
   );
 }
 function Ne({ onClick: t }) {
-  return /* @__PURE__ */ e(xe, { label: "Close", onClick: t, className: "p-1", children: /* @__PURE__ */ e(he, { className: "h-5 w-5 text-stone", weight: "bold" }) });
+  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 es = () => {
-  const { handleSubmit: t } = Pe(), s = Ue();
-  return /* @__PURE__ */ d(se, { children: [
-    /* @__PURE__ */ e("div", { className: "left-container", children: /* @__PURE__ */ e(Oe, {}) }),
-    /* @__PURE__ */ d("div", { className: "central-container 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(Le, {}),
+const Ke = (t) => ({
+  linkPreviews: Array.from(t.previews.values()).filter(
+    (s) => ue.previewIsLoaded(s) || ue.previewIsLoading(s)
+  )
+}), es = ({
+  link: t,
+  onDismiss: s
+}) => {
+  const { og_scrape_url: n, title: l, image_url: o } = t;
+  return /* @__PURE__ */ d(
+    "a",
+    {
+      href: n,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "relative w-full block rounded-[24px] bg-[#121110] p-2 no-underline transition-opacity hover:opacity-90",
+      children: [
+        o && /* @__PURE__ */ e(
+          "img",
+          {
+            src: o,
+            alt: l || "",
+            className: "h-[148px] w-full rounded-[20px] object-cover"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: (r) => {
+              r.preventDefault(), s(n);
+            },
+            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(le, { className: "size-4 text-black/90" })
+          }
+        ),
+        /* @__PURE__ */ d("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 = () => {
+  const { linkPreviewsManager: t } = Te(), { linkPreviews: s } = De(
+    t.state,
+    Ke
+  ), 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,
+    {
+      link: o,
+      onDismiss: n
+    },
+    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(je, {}),
+      /* @__PURE__ */ e(ss, {}),
+      /* @__PURE__ */ e(Oe, {}),
       /* @__PURE__ */ d("div", { className: "flex", children: [
         /* @__PURE__ */ e("div", { className: "w-full ml-2 mr-4", children: /* @__PURE__ */ e(
-          Ae,
+          je,
           {
             className: "align-middle w-full resize-none outline-none",
             maxRows: 4
@@ -500,28 +551,28 @@ const es = () => {
             disabled: !s,
             onClick: t,
             type: "button",
-            children: /* @__PURE__ */ e(He, { className: "size-4" })
+            children: /* @__PURE__ */ e($e, { className: "size-4" })
           }
         )
       ] })
     ] })
   ] });
-}, ss = ({
+}, ts = ({
   renderActions: t
 }) => /* @__PURE__ */ d("div", { className: "message-input flex items-center gap-2 p-4", children: [
   t && (t == null ? void 0 : t()),
-  /* @__PURE__ */ e(Me, { Input: es })
+  /* @__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("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" })
-] }) }), ns = ({ onBack: t, showBackButton: s, onShowInfo: n, canShowInfo: r }) => {
-  var o, w, I, N, m;
-  const { channel: a } = fe(), c = Y.useMemo(() => Object.values(a.state.members || {}).find(
+] }) }), 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(
     (g) => {
-      var b;
-      return ((b = g.user) == null ? void 0 : b.id) && g.user.id !== a._client.userID;
+      var C;
+      return ((C = g.user) == null ? void 0 : C.id) && g.user.id !== o._client.userID;
     }
-  ), [a._client.userID, a.state.members]), i = ((o = c == null ? void 0 : c.user) == null ? void 0 : o.name) || ((w = c == null ? void 0 : c.user) == null ? void 0 : w.id) || "Unknown member", l = (I = c == null ? void 0 : c.user) == null ? void 0 : I.image;
+  ), [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: [
       /* @__PURE__ */ e(
@@ -538,15 +589,15 @@ const es = () => {
       ),
       /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 items-center", children: [
         /* @__PURE__ */ e(
-          J,
+          Y,
           {
-            id: ((N = c == null ? void 0 : c.user) == null ? void 0 : N.id) || a.id || "unknown",
-            name: i,
-            image: l,
+            id: ((f = a == null ? void 0 : a.user) == null ? void 0 : f.id) || o.id || "unknown",
+            name: r,
+            image: i,
             size: 40
           }
         ),
-        /* @__PURE__ */ e("h1", { className: "text-xs font-medium text-black/90", children: i })
+        /* @__PURE__ */ e("h1", { className: "text-xs font-medium text-black/90", children: r })
       ] }),
       /* @__PURE__ */ e(
         "button",
@@ -573,17 +624,17 @@ const es = () => {
           }
         ),
         /* @__PURE__ */ e(
-          J,
+          Y,
           {
-            id: ((m = c == null ? void 0 : c.user) == null ? void 0 : m.id) || a.id || "unknown",
-            name: i,
-            image: l,
+            id: ((h = a == null ? void 0 : a.user) == null ? void 0 : h.id) || o.id || "unknown",
+            name: r,
+            image: i,
             size: 40
           }
         ),
-        /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "font-medium text-black/90 truncate", children: i }) })
+        /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "font-medium text-black/90 truncate", children: r }) })
       ] }),
-      r && n && /* @__PURE__ */ e(
+      l && n && /* @__PURE__ */ e(
         "button",
         {
           className: R(
@@ -595,80 +646,80 @@ const es = () => {
       )
     ] })
   ] });
-}, ts = ({
+}, ls = ({
   isOpen: t,
   onClose: s,
   participant: n,
-  channel: r,
-  followerStatusLabel: a,
-  onLeaveConversation: c,
-  onBlockParticipant: i
+  channel: l,
+  followerStatusLabel: o,
+  onLeaveConversation: a,
+  onBlockParticipant: r
 }) => {
-  var _, O, W, Q, G, V, X;
-  const { service: l, debug: o } = ne(), w = $(null), [I, N] = y(!1), [m, S] = y(!1), [g, b] = y(!1);
-  H(() => {
-    const k = w.current;
-    k && (t ? k.showModal() : k.close());
+  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);
+  $(() => {
+    const F = x.current;
+    F && (t ? F.showModal() : F.close());
   }, [t]);
-  const E = P(async () => {
-    var k;
-    if (!(!l || !((k = n == null ? void 0 : n.user) != null && k.id)))
+  const w = P(async () => {
+    var F;
+    if (!(!i || !((F = n == null ? void 0 : n.user) != null && F.id)))
       try {
-        const A = (await l.getBlockedUsers()).some(
-          (j) => {
-            var B;
-            return j.blocked_user_id === ((B = n == null ? void 0 : n.user) == null ? void 0 : B.id);
+        const L = (await i.getBlockedUsers()).some(
+          (U) => {
+            var X;
+            return U.blocked_user_id === ((X = n == null ? void 0 : n.user) == null ? void 0 : X.id);
           }
         );
-        N(A);
+        f(L);
       } catch (M) {
         console.error(
           "[ChannelInfoDialog] Failed to check blocked status:",
           M
         );
       }
-  }, [l, (_ = n == null ? void 0 : n.user) == null ? void 0 : _.id]);
-  H(() => {
-    t && E();
-  }, [t, E]);
+  }, [i, (W = n == null ? void 0 : n.user) == null ? void 0 : W.id]);
+  $(() => {
+    t && w();
+  }, [t, w]);
   const v = async () => {
-    var k;
-    if (!m) {
-      o && console.log("[ChannelInfoDialog] Leave conversation", r.cid), S(!0);
+    var F;
+    if (!h) {
+      m && console.log("[ChannelInfoDialog] Leave conversation", l.cid), I(!0);
       try {
-        const M = ((k = r._client) == null ? void 0 : k.userID) ?? null;
-        await r.hide(M, !1), c && await c(r), s();
+        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 {
-        S(!1);
+        I(!1);
       }
     }
-  }, F = async () => {
-    var k, M, A;
-    if (!(g || !l)) {
-      o && console.log("[ChannelInfoDialog] Block member", (k = n == null ? void 0 : n.user) == null ? void 0 : k.id), b(!0);
+  }, y = async () => {
+    var F, M, L;
+    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 l.blockUser((M = n == null ? void 0 : n.user) == null ? void 0 : M.id), i && await i((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
-      } catch (j) {
-        console.error("[ChannelInfoDialog] Failed to block member", j);
+        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);
       } finally {
-        b(!1);
+        C(!1);
       }
     }
-  }, C = async () => {
-    var k, M, A;
-    if (!(g || !l)) {
-      o && console.log("[ChannelInfoDialog] Unblock member", (k = n == null ? void 0 : n.user) == null ? void 0 : k.id), b(!0);
+  }, S = async () => {
+    var F, M, L;
+    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 l.unBlockUser((M = n == null ? void 0 : n.user) == null ? void 0 : M.id), i && await i((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
-      } catch (j) {
-        console.error("[ChannelInfoDialog] Failed to unblock member", j);
+        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);
       } finally {
-        b(!1);
+        C(!1);
       }
     }
-  }, T = () => {
+  }, p = () => {
     s(), window.open(
       "https://linktr.ee/s/about/trust-center/report",
       "_blank",
@@ -676,17 +727,17 @@ const es = () => {
     );
   };
   if (!n) return null;
-  const p = ((O = n.user) == null ? void 0 : O.name) || ((W = n.user) == null ? void 0 : W.id) || "Unknown member", u = (Q = n.user) == null ? void 0 : Q.image, f = (G = n.user) == null ? void 0 : G.email, x = (V = n.user) == null ? void 0 : V.username, D = f || (x ? `linktr.ee/${x}` : void 0), q = ((X = n.user) == null ? void 0 : X.id) || "unknown";
+  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";
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ e(
       "dialog",
       {
-        ref: w,
+        ref: x,
         className: "mes-dialog",
         onClose: s,
-        onClick: (k) => {
-          k.target === w.current && s();
+        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: [
@@ -701,30 +752,30 @@ const es = () => {
                 style: { backgroundColor: "#FBFAF9" },
                 children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3 w-full", children: [
                   /* @__PURE__ */ e(
-                    J,
+                    Y,
                     {
-                      id: q,
-                      name: p,
-                      image: u,
+                      id: A,
+                      name: T,
+                      image: c,
                       size: 88,
                       shape: "circle"
                     }
                   ),
                   /* @__PURE__ */ d("div", { className: "flex flex-col min-w-0 flex-1", children: [
-                    /* @__PURE__ */ e("p", { className: "truncate text-base font-semibold text-charcoal", children: p }),
-                    D && /* @__PURE__ */ e("p", { className: "truncate text-sm text-[#00000055]", children: D }),
-                    a && /* @__PURE__ */ e(
+                    /* @__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(
                       "span",
                       {
                         className: "mt-1 rounded-full text-xs font-normal w-fit",
                         style: {
                           padding: "4px 8px",
-                          backgroundColor: a === "Subscribed to you" ? "#DCFCE7" : "#F5F5F4",
-                          color: a === "Subscribed to you" ? "#008236" : "#78716C",
+                          backgroundColor: o === "Subscribed to you" ? "#DCFCE7" : "#F5F5F4",
+                          color: o === "Subscribed to you" ? "#008236" : "#78716C",
                           lineHeight: "133.333%",
                           letterSpacing: "0.21px"
                         },
-                        children: a
+                        children: o
                       }
                     )
                   ] })
@@ -736,18 +787,18 @@ const es = () => {
                 K,
                 {
                   onClick: v,
-                  disabled: m,
-                  "aria-busy": m,
+                  disabled: h,
+                  "aria-busy": h,
                   children: [
-                    m ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(Ge, { className: "h-5 w-5" }),
+                    h ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ e(He, { className: "h-5 w-5" }),
                     /* @__PURE__ */ e("span", { children: "Delete Conversation" })
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: I ? /* @__PURE__ */ d(
+              /* @__PURE__ */ e("li", { children: k ? /* @__PURE__ */ d(
                 K,
                 {
-                  onClick: C,
+                  onClick: S,
                   disabled: g,
                   "aria-busy": g,
                   children: [
@@ -758,7 +809,7 @@ const es = () => {
               ) : /* @__PURE__ */ d(
                 K,
                 {
-                  onClick: F,
+                  onClick: y,
                   disabled: g,
                   "aria-busy": g,
                   children: [
@@ -767,8 +818,8 @@ const es = () => {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(K, { variant: "danger", onClick: T, children: [
-                /* @__PURE__ */ e(Ve, { className: "h-5 w-5" }),
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(K, { variant: "danger", onClick: p, children: [
+                /* @__PURE__ */ e(Ge, { className: "h-5 w-5" }),
                 /* @__PURE__ */ e("span", { children: "Report" })
               ] }) })
             ] })
@@ -777,107 +828,107 @@ const es = () => {
       }
     )
   );
-}, rs = ({
+}, os = ({
   onBack: t,
   showBackButton: s,
   renderMessageInputActions: n,
-  onLeaveConversation: r,
-  onBlockParticipant: a,
-  CustomChannelEmptyState: c = be
+  onLeaveConversation: l,
+  onBlockParticipant: o,
+  CustomChannelEmptyState: a = be
 }) => {
-  var m, S;
-  const { channel: i } = fe(), [l, o] = y(!1), w = (((S = (m = i == null ? void 0 : i.state) == null ? void 0 : m.messages) == null ? void 0 : S.length) ?? 0) > 0, I = Y.useMemo(() => Object.values(i.state.members || {}).find(
-    (b) => {
-      var E;
-      return ((E = b.user) == null ? void 0 : E.id) && b.user.id !== i._client.userID;
+  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(
+    (C) => {
+      var w;
+      return ((w = C.user) == null ? void 0 : w.id) && C.user.id !== r._client.userID;
     }
-  ), [i._client.userID, i.state.members]), N = Y.useMemo(() => {
-    const g = i.data ?? {};
+  ), [r._client.userID, r.state.members]), f = 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";
-  }, [i.data]);
-  return /* @__PURE__ */ d(se, { children: [
+  }, [r.data]);
+  return /* @__PURE__ */ d(fe, { children: [
     /* @__PURE__ */ d(ze, { children: [
       /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
-        ns,
+        rs,
         {
           onBack: t,
           showBackButton: s,
-          onShowInfo: () => o(!0),
-          canShowInfo: !!I
+          onShowInfo: () => m(!0),
+          canShowInfo: !!k
         }
       ) }),
       /* @__PURE__ */ d("div", { className: "flex-1 overflow-hidden relative", children: [
         /* @__PURE__ */ e(
-          $e,
+          Be,
           {
             hideDeletedMessages: !0,
             hideNewMessageSeparator: !1,
             messageActions: []
           }
         ),
-        !w && c && /* @__PURE__ */ e("div", { className: "absolute inset-0 w-full h-full", children: /* @__PURE__ */ e(c, {}) })
+        !x && a && /* @__PURE__ */ e("div", { className: "absolute inset-0 w-full h-full", children: /* @__PURE__ */ e(a, {}) })
       ] }),
       /* @__PURE__ */ e(
-        ss,
+        ts,
         {
-          renderActions: () => n == null ? void 0 : n(i)
+          renderActions: () => n == null ? void 0 : n(r)
         }
       )
     ] }),
     /* @__PURE__ */ e(
-      ts,
+      ls,
       {
-        isOpen: l,
-        onClose: () => o(!1),
-        participant: I,
-        channel: i,
-        followerStatusLabel: N,
-        onLeaveConversation: r,
-        onBlockParticipant: a
+        isOpen: i,
+        onClose: () => m(!1),
+        participant: k,
+        channel: r,
+        followerStatusLabel: f,
+        onLeaveConversation: l,
+        onBlockParticipant: o
       }
     )
   ] });
-}, ls = ({
+}, as = ({
   channel: t,
   onBack: s,
   showBackButton: n = !1,
-  renderMessageInputActions: r,
-  onLeaveConversation: a,
-  onBlockParticipant: c,
-  className: i,
-  CustomChannelEmptyState: l = be
+  renderMessageInputActions: l,
+  onLeaveConversation: o,
+  onBlockParticipant: a,
+  className: r,
+  CustomChannelEmptyState: i = be
 }) => /* @__PURE__ */ e(
   "div",
   {
     className: R(
       "messaging-channel-view h-full flex flex-col bg-[#FBFAF9]",
-      i
+      r
     ),
-    children: /* @__PURE__ */ e(Be, { channel: t, children: /* @__PURE__ */ e(
-      rs,
+    children: /* @__PURE__ */ e(Ae, { channel: t, children: /* @__PURE__ */ e(
+      os,
       {
         onBack: s,
         showBackButton: n,
-        renderMessageInputActions: r,
-        onLeaveConversation: a,
-        onBlockParticipant: c,
-        CustomChannelEmptyState: l
+        renderMessageInputActions: l,
+        onLeaveConversation: o,
+        onBlockParticipant: a,
+        CustomChannelEmptyState: i
       }
     ) })
   }
 );
-function os({
+function is({
   searchQuery: t,
   setSearchQuery: s,
   placeholder: n
 }) {
-  const r = $(null);
+  const l = B(null);
   return /* @__PURE__ */ d("div", { className: "relative", children: [
     /* @__PURE__ */ e(
-      We,
+      Ve,
       {
         className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stone",
         weight: "bold"
@@ -886,11 +937,11 @@ function os({
     /* @__PURE__ */ e(
       "input",
       {
-        ref: r,
+        ref: l,
         type: "text",
         placeholder: n,
         value: t,
-        onChange: (a) => s(a.target.value),
+        onChange: (o) => s(o.target.value),
         className: "w-full pl-10 pr-10 py-3 text-sm border border-sand rounded-xl focus:outline-none focus:ring-2 focus:ring-black focus:border-transparent"
       }
     ),
@@ -899,76 +950,76 @@ function os({
       {
         label: "Clear search",
         onClick: () => {
-          var a;
-          s(""), (a = r.current) == null || a.focus();
+          var o;
+          s(""), (o = l.current) == null || o.focus();
         },
         className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-stone hover:text-charcoal",
-        children: /* @__PURE__ */ e(he, { className: "h-4 w-4", weight: "bold" })
+        children: /* @__PURE__ */ e(le, { className: "h-4 w-4", weight: "bold" })
       }
     )
   ] });
 }
-const as = ({
+const cs = ({
   participantSource: t,
   onSelectParticipant: s,
   onClose: n,
-  existingParticipantIds: r = /* @__PURE__ */ new Set(),
-  participantLabel: a = "participants",
-  searchPlaceholder: c = "Search participants...",
-  className: i
+  existingParticipantIds: l = /* @__PURE__ */ new Set(),
+  participantLabel: o = "participants",
+  searchPlaceholder: a = "Search participants...",
+  className: r
 }) => {
-  const { debug: l } = ne(), [o, w] = y(""), [I, N] = y([]), [m, S] = y(!1), [g, b] = y(null), [E, v] = y(
+  const { debug: i } = se(), [m, x] = E(""), [k, f] = E([]), [h, I] = E(!1), [g, C] = E(null), [w, v] = E(
     null
-  ), F = $(!1);
-  H(() => {
+  ), y = B(!1);
+  $(() => {
     if (t.loading) {
-      l && console.log(
+      i && console.log(
         "[ParticipantPicker] Waiting for participant source to finish loading..."
       );
       return;
     }
-    if (F.current) return;
+    if (y.current) return;
     (async () => {
-      l && console.log("[ParticipantPicker] Loading initial participants..."), S(!0), b(null);
+      i && console.log("[ParticipantPicker] Loading initial participants..."), I(!0), C(null);
       try {
-        const f = await t.loadParticipants({
+        const u = await t.loadParticipants({
           search: "",
           // Load all participants initially
           limit: 100
         });
-        N(f.participants), F.current = !0, l && console.log(
+        f(u.participants), y.current = !0, i && console.log(
           "[ParticipantPicker] Participants loaded successfully:",
-          f.participants.length
+          u.participants.length
         );
-      } catch (f) {
-        const x = f instanceof Error ? f.message : "Failed to load participants";
-        b(x), console.error("[ParticipantPicker] Failed to load participants:", f);
+      } catch (u) {
+        const N = u instanceof Error ? u.message : "Failed to load participants";
+        C(N), console.error("[ParticipantPicker] Failed to load participants:", u);
       } finally {
-        S(!1);
+        I(!1);
       }
     })();
-  }, [t.loading, l]);
-  const C = I.filter((u) => !r.has(u.id)).filter((u) => {
-    var x;
-    if (!o) return !0;
-    const f = o.toLowerCase();
-    return u.name.toLowerCase().includes(f) || ((x = u.email) == null ? void 0 : x.toLowerCase().includes(f)) || !1;
-  }), T = P(
-    async (u) => {
-      if (!E) {
-        v(u.id);
+  }, [t.loading, i]);
+  const S = k.filter((c) => !l.has(c.id)).filter((c) => {
+    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) => {
+      if (!w) {
+        v(c.id);
         try {
-          await s(u);
-        } catch (f) {
-          console.error("[ParticipantPicker] Failed to start chat:", f), v(null);
+          await s(c);
+        } catch (u) {
+          console.error("[ParticipantPicker] Failed to start chat:", u), v(null);
         }
       }
     },
-    [s, E]
-  ), p = (u, f) => {
-    (u.key === "Enter" || u.key === " ") && (u.preventDefault(), T(f));
+    [s, w]
+  ), T = (c, u) => {
+    (c.key === "Enter" || c.key === " ") && (c.preventDefault(), p(u));
   };
-  return /* @__PURE__ */ d("div", { className: R("flex flex-col h-full", i), children: [
+  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: [
         /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-charcoal", children: "Start a new Conversation" }),
@@ -976,106 +1027,80 @@ const as = ({
       ] }),
       /* @__PURE__ */ d("p", { className: "text-xs text-stone mb-3", children: [
         "Select a ",
-        a.slice(0, -1),
+        o.slice(0, -1),
         " to start messaging (",
-        C.length,
+        S.length,
         " available)",
-        t.totalCount !== void 0 && ` • ${t.totalCount} ${a} total`
+        t.totalCount !== void 0 && ` • ${t.totalCount} ${o} total`
       ] }),
       /* @__PURE__ */ e(
-        os,
+        is,
         {
-          searchQuery: o,
-          setSearchQuery: w,
-          placeholder: c
+          searchQuery: m,
+          setSearchQuery: x,
+          placeholder: a
         }
       )
     ] }),
     g && /* @__PURE__ */ d("div", { className: "p-4 text-sm text-danger bg-danger-alt", children: [
       "Error loading ",
-      a,
+      o,
       ": ",
       g
     ] }),
-    /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: m && C.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: 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: "w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
       /* @__PURE__ */ d("span", { className: "text-sm text-stone", children: [
         "Loading ",
-        a,
+        o,
         "..."
       ] })
-    ] }) }) : C.length === 0 ? /* @__PURE__ */ d("div", { className: "p-6 text-center", children: [
+    ] }) }) : S.length === 0 ? /* @__PURE__ */ d("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: o ? `No ${a} found` : I.length > 0 ? `Already chatting with all ${a}` : `No ${a} yet` }),
-      /* @__PURE__ */ e("p", { className: "text-xs text-stone", children: o ? "Try a different search term" : I.length > 0 ? `You have existing conversations with all your ${a}` : `${a.charAt(0).toUpperCase() + a.slice(1)} will appear here` })
+      /* @__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: [
-      C.map((u) => {
-        const f = u.name || u.email || u.id, x = u.email && u.name ? u.email : u.phone;
+      S.map((c) => {
+        const u = c.name || c.email || c.id, N = c.email && c.name ? c.email : c.phone;
         return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
           "button",
           {
             type: "button",
-            onClick: () => T(u),
-            onKeyDown: (D) => p(D, u),
+            onClick: () => p(c),
+            onKeyDown: (j) => T(j, c),
             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: [
                 /* @__PURE__ */ e(
-                  J,
+                  Y,
                   {
-                    id: u.id,
-                    name: f,
-                    image: u.image,
+                    id: c.id,
+                    name: u,
+                    image: c.image,
                     size: 40
                   }
                 ),
                 /* @__PURE__ */ d("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ e("h4", { className: "text-sm font-medium text-charcoal truncate", children: f }),
-                  x && /* @__PURE__ */ e("p", { className: "text-xs text-stone truncate", children: x })
+                  /* @__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: E === u.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 === c.id ? /* @__PURE__ */ e(ee, { className: "h-5 w-5 text-primary animate-spin" }) : /* @__PURE__ */ e(de, { className: "h-5 w-5 text-stone" }) })
             ] })
           }
-        ) }, u.id);
+        ) }, c.id);
       }),
-      m && /* @__PURE__ */ e("li", { className: "p-4 flex justify-center", children: /* @__PURE__ */ d("div", { className: "flex items-center space-x-2", children: [
+      h && /* @__PURE__ */ e("li", { className: "p-4 flex justify-center", children: /* @__PURE__ */ d("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..." })
       ] }) })
     ] }) })
   ] });
-}, is = ({ hasChannels: t, onStartConversation: s, participantLabel: n }) => /* @__PURE__ */ e("div", { className: "messaging-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ d("div", { className: "text-center max-w-sm", children: [
+}, 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: [
   /* @__PURE__ */ e("div", { className: "w-24 h-24 bg-primary-alt/10 rounded-full flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ e("span", { className: "text-4xl", children: "💬" }) }),
   /* @__PURE__ */ e("h2", { className: "font-semibold text-charcoal", children: "Welcome to Messages" }),
-  /* @__PURE__ */ e("p", { className: "text-stone text-sm mb-6", children: t ? /* @__PURE__ */ d(se, { children: [
-    "Choose a conversation from the list or",
-    " ",
-    s && /* @__PURE__ */ d(me, { onClick: s, children: [
-      "start a new conversation with a ",
-      n.slice(0, -1),
-      "."
-    ] })
-  ] }) : s && /* @__PURE__ */ d(se, { children: [
-    /* @__PURE__ */ d(me, { onClick: s, children: [
-      "Start a new conversation with one of your ",
-      n
-    ] }),
-    " ",
-    "to begin messaging."
-  ] }) })
-] }) }), me = ({
-  onClick: t,
-  children: s
-}) => /* @__PURE__ */ e(
-  "button",
-  {
-    type: "button",
-    onClick: t,
-    className: "inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary-alt focus:outline-none focus:ring-2 focus:ring-primary",
-    children: s
-  }
-), le = ({ 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: [
+  /* @__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: [
   /* @__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 }),
@@ -1088,7 +1113,7 @@ const as = ({
       children: "Go Back"
     }
   )
-] }) }), cs = ({ className: t, message: s }) => /* @__PURE__ */ d(
+] }) }), us = ({ className: t, message: s }) => /* @__PURE__ */ d(
   "div",
   {
     className: R("flex items-center justify-center h-full", t),
@@ -1131,116 +1156,112 @@ const as = ({
       s && /* @__PURE__ */ e("span", { className: "text-stone", children: s })
     ]
   }
-), ds = () => /* @__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(cs, { className: "w-6 h-6" }),
+), 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" }),
   /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
-] }) }), vs = ({
+] }) }), Es = ({
   capabilities: t = {},
   className: s,
   renderMessageInputActions: n,
-  onChannelSelect: r,
-  onParticipantSelect: a,
-  initialParticipantFilter: c,
-  initialParticipantData: i,
-  CustomChannelEmptyState: l,
-  showChannelList: o = !0,
-  filters: w,
-  channelListCustomEmptyStateIndicator: I
+  onChannelSelect: l,
+  onParticipantSelect: o,
+  initialParticipantFilter: a,
+  initialParticipantData: r,
+  CustomChannelEmptyState: i,
+  showChannelList: m = !0,
+  filters: x,
+  channelListCustomEmptyStateIndicator: k
 }) => {
   const {
-    service: N,
-    client: m,
-    isConnected: S,
+    service: f,
+    client: h,
+    isConnected: I,
     isLoading: g,
-    error: b,
-    refreshConnection: E,
+    error: C,
+    refreshConnection: w,
     debug: v
-  } = qe(), [F, C] = y(null), [T, p] = y(!1), [u, f] = y(!1), [x, D] = y(/* @__PURE__ */ new Set()), [q, _] = y(0), [O, W] = y(!1), [Q, G] = y(null), V = $(null), {
-    showStartConversation: X = !1,
-    participantSource: k,
-    participantLabel: M = "participants"
-  } = t, A = Y.useMemo(() => {
-    const h = m == null ? void 0 : m.userID;
+  } = 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;
     return {
       ...{
         type: "messaging",
         last_message_at: { $exists: !0 },
-        ...h && {
-          members: { $in: [h] },
+        ...b && {
+          members: { $in: [b] },
           hidden: !1
         }
       },
-      ...w
+      ...x
     };
-  }, [w, m == null ? void 0 : m.userID]), j = $(null), B = P(async () => {
-    if (!m || !S) return;
-    const h = m.userID;
-    if (h)
+  }, [x, h == null ? void 0 : h.userID]), L = B(null), U = P(async () => {
+    if (!h || !I) return;
+    const b = h.userID;
+    if (b)
       try {
-        v && console.log("[MessagingShell] Syncing channels for user:", h);
-        const L = await m.queryChannels(
+        v && console.log("[MessagingShell] Syncing channels for user:", b);
+        const _ = await h.queryChannels(
           {
             type: "messaging",
-            members: { $in: [h] }
+            members: { $in: [b] }
           },
           {},
           { limit: 100 }
-        ), U = /* @__PURE__ */ new Set();
-        L.forEach((z) => {
-          const Se = z.state.members;
-          Object.values(Se).forEach((ke) => {
+        ), D = /* @__PURE__ */ new Set();
+        _.forEach((z) => {
+          const Ie = z.state.members;
+          Object.values(Ie).forEach((ye) => {
             var oe;
-            const re = (oe = ke.user) == null ? void 0 : oe.id;
-            re && re !== h && U.add(re);
+            const te = (oe = ye.user) == null ? void 0 : oe.id;
+            te && te !== b && D.add(te);
           });
-        }), D(U), p(L.length > 0), j.current = h, v && console.log("[MessagingShell] Channels synced successfully:", {
-          channelCount: L.length,
-          memberCount: U.size
+        }), j(D), T(_.length > 0), L.current = b, v && console.log("[MessagingShell] Channels synced successfully:", {
+          channelCount: _.length,
+          memberCount: D.size
         });
-      } catch (L) {
-        console.error("[MessagingShell] Failed to sync channels:", L);
+      } catch (_) {
+        console.error("[MessagingShell] Failed to sync channels:", _);
       }
-  }, [m, S, v]);
-  H(() => {
-    if (!m || !S) return;
-    const h = m.userID;
-    h && j.current !== h && B();
-  }, [m, S, B]), H(() => {
-    if (!c || !m || !S) return;
+  }, [h, I, v]);
+  $(() => {
+    if (!h || !I) return;
+    const b = h.userID;
+    b && L.current !== b && U();
+  }, [h, I, U]), $(() => {
+    if (!a || !h || !I) return;
     (async () => {
-      const L = m.userID;
-      if (L)
+      const _ = h.userID;
+      if (_)
         try {
           v && console.log(
             "[MessagingShell] Loading initial conversation with:",
-            c
+            a
           );
-          const U = await m.queryChannels(
+          const D = await h.queryChannels(
             {
               type: "messaging",
-              members: { $eq: [L, c] }
+              members: { $eq: [_, a] }
             },
             {},
             { limit: 1 }
           );
-          if (U.length > 0)
-            C(U[0]), W(!0), G(null), r && r(U[0]), v && console.log(
+          if (D.length > 0)
+            S(D[0]), G(!0), H(null), l && l(D[0]), v && console.log(
               "[MessagingShell] Initial conversation loaded:",
-              U[0].id
+              D[0].id
             );
-          else if (i && N) {
+          else if (r && f) {
             v && console.log(
               "[MessagingShell] No conversation found, creating one for:",
-              i
+              r
             );
             try {
-              const z = await N.startChannelWithParticipant({
-                id: i.id,
-                name: i.name,
-                email: i.email,
-                phone: i.phone
+              const z = await f.startChannelWithParticipant({
+                id: r.id,
+                name: r.name,
+                email: r.email,
+                phone: r.phone
               });
-              C(z), W(!0), G(null), r && r(z), v && console.log(
+              S(z), G(!0), H(null), l && l(z), v && console.log(
                 "[MessagingShell] Channel created and loaded:",
                 z.id
               );
@@ -1248,88 +1269,85 @@ const as = ({
               console.error(
                 "[MessagingShell] Failed to create conversation:",
                 z
-              ), G("Failed to create conversation");
+              ), H("Failed to create conversation");
             }
           } else
-            G(
+            H(
               "No conversation found with this account"
             ), v && console.log(
               "[MessagingShell] No conversation found for:",
-              c
+              a
             );
-        } catch (U) {
+        } catch (D) {
           console.error(
             "[MessagingShell] Failed to load initial conversation:",
-            U
-          ), G("Failed to load conversation");
+            D
+          ), H("Failed to load conversation");
         }
     })();
   }, [
-    c,
-    i,
-    m,
-    S,
-    N,
+    a,
+    r,
+    h,
+    I,
+    f,
     v,
-    r
+    l
   ]);
-  const ve = P(
-    (h) => {
-      C(h), r == null || r(h);
+  const X = P(
+    (b) => {
+      S(b), l == null || l(b);
     },
-    [r]
-  ), Ce = P(() => {
-    O || C(null);
-  }, [O]), we = P(() => {
-    var h;
-    k && (_((L) => L + 1), f(!0), (h = V.current) == null || h.showModal());
-  }, [k]), Ee = P(
-    async (h) => {
-      var L;
-      if (N)
+    [l]
+  ), ve = P(() => {
+    O || S(null);
+  }, [O]), Ce = P(
+    async (b) => {
+      var _;
+      if (f)
         try {
           v && console.log(
             "[MessagingShell] Starting conversation with:",
-            h.id
+            b.id
           );
-          const U = await N.startChannelWithParticipant({
-            id: h.id,
-            name: h.name,
-            email: h.email,
-            phone: h.phone
+          const D = await f.startChannelWithParticipant({
+            id: b.id,
+            name: b.name,
+            email: b.email,
+            phone: b.phone
           });
           try {
-            await U.show();
+            await D.show();
           } catch (z) {
             console.warn("[MessagingShell] Failed to unhide channel:", z);
           }
-          C(U), f(!1), (L = V.current) == null || L.close(), a == null || a(h);
-        } catch (U) {
-          console.error("[MessagingShell] Failed to start conversation:", U);
+          S(D), u(!1), (_ = V.current) == null || _.close(), o == null || o(b);
+        } catch (D) {
+          console.error("[MessagingShell] Failed to start conversation:", D);
         }
     },
-    [N, a, v]
-  ), te = P(() => {
-    var h;
-    f(!1), (h = V.current) == null || h.close();
-  }, []), ye = P(
-    async (h) => {
-      v && console.log("[MessagingShell] Leaving conversation:", h.id), C(null), W(!1), j.current = null, await B();
+    [f, o, v]
+  ), ne = P(() => {
+    var b;
+    u(!1), (b = V.current) == null || b.close();
+  }, []), we = P(
+    async (b) => {
+      v && console.log("[MessagingShell] Leaving conversation:", b.id), S(null), G(!1), L.current = null, await U();
     },
-    [B, v]
-  ), Ie = P(
-    async (h) => {
-      v && console.log("[MessagingShell] Blocking participant:", h), C(null), W(!1), j.current = null, await B();
+    [U, v]
+  ), Ee = P(
+    async (b) => {
+      v && console.log("[MessagingShell] Blocking participant:", b), S(null), G(!1), L.current = null, await U();
     },
-    [B, v]
-  ), Z = !!F;
-  return g ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(ds, {}) }) : b ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(le, { message: b, onBack: E }) }) : !S || !m ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(
-    le,
+    [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(
+    re,
     {
       message: "Not connected to messaging service",
-      onBack: E
+      onBack: w
     }
-  ) }) : Q ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(le, { message: Q }) }) : /* @__PURE__ */ d(
+  ) }) : J ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(re, { message: J }) }) : /* @__PURE__ */ d(
     "div",
     {
       className: R(
@@ -1345,20 +1363,20 @@ const as = ({
                 "messaging-channel-list-sidebar min-h-0 min-w-0 bg-white lg:bg-chalk lg:flex lg:flex-col lg:border-r lg:border-sand",
                 {
                   // Explicitly hidden via prop or in direct conversation mode
-                  "!hidden": o === !1 || O,
+                  "!hidden": m === !1 || O,
                   // Normal mode: hide on mobile when channel selected, show on desktop
-                  "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": o !== !1 && !O && Z,
+                  "hidden lg:flex lg:w-80 lg:min-w-[280px] lg:max-w-[360px]": m !== !1 && !O && Z,
                   // Normal mode: show when no channel selected
-                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": o !== !1 && !O && !Z
+                  "flex flex-col w-full lg:flex-1 lg:max-w-2xl": m !== !1 && !O && !Z
                 }
               ),
               children: /* @__PURE__ */ e(
-                Ke,
+                Ze,
                 {
-                  onChannelSelect: ve,
-                  selectedChannel: F || void 0,
-                  filters: A,
-                  customEmptyStateIndicator: I
+                  onChannelSelect: X,
+                  selectedChannel: y || void 0,
+                  filters: M,
+                  customEmptyStateIndicator: k
                 }
               )
             }
@@ -1375,61 +1393,54 @@ const as = ({
                   "hidden lg:flex": !O && !Z
                 }
               ),
-              children: F ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
-                ls,
+              children: y ? /* @__PURE__ */ e("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ e(
+                as,
                 {
-                  channel: F,
-                  onBack: Ce,
+                  channel: y,
+                  onBack: ve,
                   showBackButton: !O,
                   renderMessageInputActions: n,
-                  onLeaveConversation: ye,
-                  onBlockParticipant: Ie,
-                  CustomChannelEmptyState: l
+                  onLeaveConversation: we,
+                  onBlockParticipant: Ee,
+                  CustomChannelEmptyState: i
                 },
-                F.id
-              ) }) : /* @__PURE__ */ e(
-                is,
-                {
-                  hasChannels: T,
-                  onStartConversation: X ? we : void 0,
-                  participantLabel: M
-                }
-              )
+                y.id
+              ) }) : /* @__PURE__ */ e(ds, { hasChannels: p })
             }
           )
         ] }),
-        k && // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        Q && // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         /* @__PURE__ */ e(
           "dialog",
           {
             ref: V,
             className: "mes-dialog",
-            onClick: (h) => {
-              h.target === V.current && te();
+            onClick: (b) => {
+              b.target === V.current && ne();
             },
-            onClose: te,
+            onClose: ne,
             children: /* @__PURE__ */ e("div", { className: "h-full w-full bg-white shadow-max-elevation-light", children: /* @__PURE__ */ e(
-              as,
+              cs,
               {
-                participantSource: k,
-                onSelectParticipant: Ee,
-                onClose: te,
-                existingParticipantIds: x,
-                participantLabel: M,
-                searchPlaceholder: `Search ${M}...`
+                participantSource: Q,
+                onSelectParticipant: Ce,
+                onClose: ne,
+                existingParticipantIds: N,
+                participantLabel: F,
+                searchPlaceholder: `Search ${F}...`
               },
-              q
+              A
             ) })
           }
         )
       ]
     }
   );
-}, us = ({
+}, fs = ({
   question: t,
   onClick: s,
   loading: n = !1,
-  className: r
+  className: l
 }) => /* @__PURE__ */ e(
   "button",
   {
@@ -1443,27 +1454,27 @@ const as = ({
         "hover:brightness-95 active:brightness-90": !n,
         "opacity-50 cursor-not-allowed": n
       },
-      r
+      l
     ),
     children: t
   }
-), Cs = ({
+), Is = ({
   faqs: t,
   onFaqClick: s,
   loadingFaqId: n,
-  headerText: r,
-  className: a,
-  avatarImage: c,
-  avatarName: i
+  headerText: l,
+  className: o,
+  avatarImage: a,
+  avatarName: r
 }) => {
-  const l = t.filter((o) => o.enabled).sort((o, w) => (o.order ?? 0) - (w.order ?? 0));
-  return l.length === 0 ? null : /* @__PURE__ */ e("div", { className: R("px-4 py-6", a), children: /* @__PURE__ */ d("div", { className: "flex gap-3 items-end", children: [
-    (c || i) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
-      J,
+  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: [
+    (a || r) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
+      Y,
       {
-        id: i || "account",
-        name: i || "Account",
-        image: c,
+        id: r || "account",
+        name: r || "Account",
+        image: a,
         size: 24,
         shape: "circle"
       }
@@ -1474,73 +1485,73 @@ const as = ({
         className: "flex-1 flex flex-col gap-3 rounded-lg p-4",
         style: { backgroundColor: "#F1F0EE" },
         children: [
-          r && /* @__PURE__ */ e("p", { className: "text-md text-charcoal mb-4", children: r }),
-          l.map((o) => /* @__PURE__ */ e(
-            us,
+          l && /* @__PURE__ */ e("p", { className: "text-md text-charcoal mb-4", children: l }),
+          i.map((m) => /* @__PURE__ */ e(
+            fs,
             {
-              question: o.question,
-              onClick: () => s(o.id),
-              loading: n === o.id
+              question: m.question,
+              onClick: () => s(m.id),
+              loading: n === m.id
             },
-            o.id
+            m.id
           ))
         ]
       }
     )
   ] }) });
-}, ws = (t, s = {}) => {
-  const { initialSearch: n = "", pageSize: r = 20 } = s, [a, c] = y([]), [i, l] = y(!1), [o, w] = y(null), [I, N] = y(n), [m, S] = y(!0), [g, b] = y(), E = P(async (T = !1, p) => {
-    if (i) return;
-    const u = p !== void 0 ? p : I;
-    l(!0), w(null);
+}, 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) => {
+    if (r) return;
+    const c = T !== void 0 ? T : k;
+    i(!0), x(null);
     try {
-      const f = await t.loadParticipants({
-        search: u || void 0,
-        limit: r,
-        cursor: T ? void 0 : g
+      const u = await t.loadParticipants({
+        search: c || void 0,
+        limit: l,
+        cursor: p ? void 0 : g
       });
-      c(
-        (x) => T ? f.participants : [...x, ...f.participants]
-      ), S(f.hasMore), b(f.nextCursor);
-    } catch (f) {
-      const x = f instanceof Error ? f.message : "Failed to load participants";
-      w(x), console.error("[useParticipants] Load error:", f);
+      a(
+        (N) => p ? u.participants : [...N, ...u.participants]
+      ), I(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 {
-      l(!1);
+      i(!1);
     }
-  }, [t, I, g, r, i]), v = P(() => {
-    m && !i && E(!1);
-  }, [m, i, E]), F = P((T) => {
-    N(T), b(void 0), E(!0, T);
-  }, [E]), C = P(() => {
-    b(void 0), E(!0);
-  }, [E]);
-  return H(() => {
-    E(!0);
+  }, [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(() => {
+    C(void 0), w(!0);
+  }, [w]);
+  return $(() => {
+    w(!0);
   }, [t.loadParticipants]), {
-    participants: a,
-    loading: i,
-    error: o,
-    searchQuery: I,
-    hasMore: m,
+    participants: o,
+    loading: r,
+    error: m,
+    searchQuery: k,
+    hasMore: h,
     totalCount: t.totalCount,
     loadMore: v,
-    search: F,
-    refresh: C
+    search: y,
+    refresh: S
   };
 };
 export {
-  J as Avatar,
+  Y as Avatar,
   be as ChannelEmptyState,
-  Ke as ChannelList,
-  ls as ChannelView,
-  Cs as FaqList,
-  us as FaqListItem,
-  bs as MessagingProvider,
-  vs as MessagingShell,
-  as as ParticipantPicker,
-  Je as formatRelativeTime,
-  qe as useMessaging,
-  ws as useParticipants
+  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
 };
 //# sourceMappingURL=index.js.map