@linktr.ee/messaging-react 1.8.8 → 1.9.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as c, Fragment as se } from "react/jsx-runtime";
+import { jsx as e, jsxs as d, Fragment as se } 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";
@@ -20,29 +20,29 @@ const ge = Re({
   user: s,
   serviceConfig: n,
   apiKey: r,
-  capabilities: i = {},
-  customization: d = {},
-  debug: a = !1
+  capabilities: a = {},
+  customization: c = {},
+  debug: i = !1
 }) => {
   const l = P(
     (x, ...D) => {
-      a && console.log(`🔥 [MessagingProvider] ${x}`, ...D);
+      i && console.log(`🔥 [MessagingProvider] ${x}`, ...D);
     },
-    [a]
+    [i]
   );
   l("🔄 RENDER START", {
     userId: s == null ? void 0 : s.id,
     apiKey: (r == null ? void 0 : r.substring(0, 8)) + "...",
     serviceConfig: !!n,
-    capabilities: Object.keys(i),
-    customization: Object.keys(d)
+    capabilities: Object.keys(a),
+    customization: Object.keys(c)
   });
   const [o, w] = y(null), [I, N] = y(null), [m, S] = y(!1), [g, b] = y(!1), [E, v] = y(null), F = $(!1), C = $({
     userId: s == null ? void 0 : s.id,
     apiKey: r,
     serviceConfig: n,
-    capabilities: i,
-    customization: d
+    capabilities: a,
+    customization: c
   }), T = $(0);
   T.current++, l("📊 RENDER INFO", {
     renderCount: T.current,
@@ -51,15 +51,15 @@ const ge = Re({
       userChanged: C.current.userId !== (s == null ? void 0 : s.id),
       apiKeyChanged: C.current.apiKey !== r,
       serviceConfigChanged: C.current.serviceConfig !== n,
-      capabilitiesChanged: C.current.capabilities !== i,
-      customizationChanged: C.current.customization !== d
+      capabilitiesChanged: C.current.capabilities !== a,
+      customizationChanged: C.current.customization !== c
     }
   }), C.current = {
     userId: s == null ? void 0 : s.id,
     apiKey: r,
     serviceConfig: n,
-    capabilities: i,
-    customization: d
+    capabilities: a,
+    customization: c
   }, H(() => {
     const x = T.current;
     if (l("🔧 SERVICE INIT EFFECT TRIGGERED", {
@@ -87,7 +87,7 @@ const ge = Re({
     const D = new Te({
       ...n,
       apiKey: r,
-      debug: a
+      debug: i
     });
     return w(D), l("✅ SERVICE SET", {
       renderCount: x,
@@ -98,7 +98,7 @@ const ge = Re({
         reason: "Effect cleanup"
       }), D.disconnectUser().catch(console.error);
     };
-  }, [r, n, a, l]);
+  }, [r, n, i, l]);
   const p = $(null);
   H(() => {
     var D, q;
@@ -186,28 +186,28 @@ const ge = Re({
     isConnected: m,
     isLoading: g,
     hasError: !!E,
-    capabilitiesKeys: Object.keys(i),
-    customizationKeys: Object.keys(d)
+    capabilitiesKeys: Object.keys(a),
+    customizationKeys: Object.keys(c)
   }), {
     service: o,
     client: I,
     isConnected: m,
     isLoading: g,
     error: E,
-    capabilities: i,
-    customization: d,
+    capabilities: a,
+    customization: c,
     refreshConnection: u,
-    debug: a
+    debug: i
   }), [
     o,
     I,
     m,
     g,
     E,
-    i,
-    d,
-    u,
     a,
+    c,
+    u,
+    i,
     l
   ]);
   return l("🔄 RENDER END", {
@@ -218,10 +218,10 @@ const ge = Re({
 }, qe = () => ne(), Ye = (t, s) => {
   const n = new Date(
     Date.UTC(t.getUTCFullYear(), t.getUTCMonth(), t.getUTCDate())
-  ), i = new Date(
+  ), a = new Date(
     Date.UTC(s.getUTCFullYear(), s.getUTCMonth(), s.getUTCDate())
   ).getTime() - n.getTime();
-  return Math.floor(i / (1e3 * 60 * 60 * 24));
+  return Math.floor(a / (1e3 * 60 * 60 * 24));
 }, Je = (t) => {
   const s = /* @__PURE__ */ new Date();
   if (Math.floor((s.getTime() - t.getTime()) / 1e3) < 60)
@@ -279,9 +279,13 @@ const J = ({
   id: t,
   image: s,
   size: n = 40,
-  className: r
+  className: r,
+  shape: a = "squircle"
 }) => {
-  const i = Xe(t), a = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg";
+  const c = Xe(t), l = n < 32 ? "text-xs" : n < 56 ? "text-sm" : "text-lg", o = a === "circle" ? { borderRadius: "50%" } : {
+    borderRadius: "33%",
+    "corner-shape": "superellipse(1.3)"
+  };
   return /* @__PURE__ */ e(
     "div",
     {
@@ -289,9 +293,7 @@ const J = ({
       style: {
         width: `${n}px`,
         height: `${n}px`,
-        borderRadius: "33%",
-        // @ts-expect-error - corner-shape is not recognized by react types
-        "corner-shape": "superellipse(1.3)"
+        ...o
       },
       children: s ? /* @__PURE__ */ e(
         "img",
@@ -306,16 +308,16 @@ 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",
-            a
+            l
           ),
-          children: i
+          children: c
         }
       )
     }
   );
-}, Ze = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: r = !1, unread: i }) => {
+}, Ze = ({ channel: t, selectedChannel: s, onChannelSelect: n, debug: r = !1, unread: a }) => {
   var E, v, F, C, T, p;
-  const d = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), a = () => {
+  const c = (s == null ? void 0 : s.id) === (t == null ? void 0 : t.id), i = () => {
     t && n(t);
   }, o = Object.values(((E = t == null ? void 0 : t.state) == null ? void 0 : E.members) || {}).find(
     (u) => {
@@ -327,10 +329,10 @@ const J = ({
     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 = i ?? 0;
+  })(), g = N != null && N.created_at ? Je(new Date(N.created_at)) : "", b = a ?? 0;
   return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
     channelId: t == null ? void 0 : t.id,
-    isSelected: d,
+    isSelected: c,
     participantName: w,
     unreadCount: b,
     hasTimestamp: !!g
@@ -338,15 +340,15 @@ const J = ({
     "button",
     {
       type: "button",
-      onClick: a,
+      onClick: i,
       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": d,
-          "hover:bg-sand": !d
+          "bg-primary-alt/10 border-l-4 border-l-primary": c,
+          "hover:bg-sand": !c
         }
       ),
-      children: /* @__PURE__ */ c("div", { className: "flex items-start gap-3", children: [
+      children: /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
           J,
           {
@@ -357,21 +359,21 @@ const J = ({
             className: "[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
           }
         ),
-        /* @__PURE__ */ c("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
-          /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ d("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
+          /* @__PURE__ */ d("div", { className: "flex items-center justify-between gap-2", children: [
             /* @__PURE__ */ e(
               "h3",
               {
                 className: R(
                   "text-sm font-medium truncate",
-                  d ? "text-primary" : "text-charcoal"
+                  c ? "text-primary" : "text-charcoal"
                 ),
                 children: w
               }
             ),
             g && /* @__PURE__ */ e("span", { className: "text-xs text-stone flex-shrink-0", children: g })
           ] }),
-          /* @__PURE__ */ c("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
+          /* @__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-primary text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0", children: b > 99 ? "99+" : b })
           ] })
@@ -384,13 +386,13 @@ const J = ({
   selectedChannel: s,
   filters: n,
   className: r,
-  customEmptyStateIndicator: i
+  customEmptyStateIndicator: a
 }) => {
-  const d = Y.useRef(0);
-  d.current++;
-  const { debug: a = !1 } = ne();
-  return a && console.log("📺 [ChannelList] 🔄 RENDER START", {
-    renderCount: d.current,
+  const c = Y.useRef(0);
+  c.current++;
+  const { debug: i = !1 } = ne();
+  return i && console.log("📺 [ChannelList] 🔄 RENDER START", {
+    renderCount: c.current,
     selectedChannelId: s == null ? void 0 : s.id,
     filters: n
   }), /* @__PURE__ */ e(
@@ -400,8 +402,8 @@ const J = ({
         "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
         r
       ),
-      children: /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (a && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
-        renderCount: d.current,
+      children: /* @__PURE__ */ e("div", { className: "flex-1 overflow-hidden min-w-0", children: (i && console.log("📺 [ChannelList] 🎬 RENDERING STREAM CHANNEL LIST", {
+        renderCount: c.current,
         filters: n
       }), /* @__PURE__ */ e(
         pe,
@@ -411,7 +413,7 @@ const J = ({
           options: { limit: 30 },
           Preview: (l) => {
             var o, w;
-            return a && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+            return i && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
               channelId: (o = l.channel) == null ? void 0 : o.id,
               selectedChannelId: s == null ? void 0 : s.id,
               isSelected: (s == null ? void 0 : s.id) === ((w = l.channel) == null ? void 0 : w.id)
@@ -421,11 +423,11 @@ const J = ({
                 ...l,
                 selectedChannel: s,
                 onChannelSelect: t,
-                debug: a
+                debug: i
               }
             );
           },
-          EmptyStateIndicator: i
+          EmptyStateIndicator: a
         },
         JSON.stringify(n)
       )) })
@@ -450,7 +452,7 @@ const J = ({
   }
 );
 function xe({ label: t, className: s, children: n, ...r }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ d(
     "button",
     {
       type: "button",
@@ -475,13 +477,13 @@ function Ne({ onClick: t }) {
 }
 const es = () => {
   const { handleSubmit: t } = Pe(), s = Ue();
-  return /* @__PURE__ */ c(se, { children: [
+  return /* @__PURE__ */ d(se, { children: [
     /* @__PURE__ */ e("div", { className: "left-container", children: /* @__PURE__ */ e(Oe, {}) }),
-    /* @__PURE__ */ c("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__ */ 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, {}),
       /* @__PURE__ */ e(_e, {}),
       /* @__PURE__ */ e(je, {}),
-      /* @__PURE__ */ c("div", { className: "flex", children: [
+      /* @__PURE__ */ d("div", { className: "flex", children: [
         /* @__PURE__ */ e("div", { className: "w-full ml-2 mr-4", children: /* @__PURE__ */ e(
           Ae,
           {
@@ -506,22 +508,22 @@ const es = () => {
   ] });
 }, ss = ({
   renderActions: t
-}) => /* @__PURE__ */ c("div", { className: "message-input flex items-center gap-2 p-4", children: [
+}) => /* @__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 })
-] }), be = () => /* @__PURE__ */ e("div", { className: "messaging-channel-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ c("div", { className: "text-center max-w-sm", children: [
+] }), 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: i } = fe(), d = Y.useMemo(() => Object.values(i.state.members || {}).find(
+  const { channel: a } = fe(), c = Y.useMemo(() => Object.values(a.state.members || {}).find(
     (g) => {
       var b;
-      return ((b = g.user) == null ? void 0 : b.id) && g.user.id !== i._client.userID;
+      return ((b = g.user) == null ? void 0 : b.id) && g.user.id !== a._client.userID;
     }
-  ), [i._client.userID, i.state.members]), a = ((o = d == null ? void 0 : d.user) == null ? void 0 : o.name) || ((w = d == null ? void 0 : d.user) == null ? void 0 : w.id) || "Unknown member", l = (I = d == null ? void 0 : d.user) == null ? void 0 : I.image;
-  return /* @__PURE__ */ c("div", { className: "@container", children: [
-    /* @__PURE__ */ c("div", { className: "flex justify-between items-center @md:hidden", children: [
+  ), [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;
+  return /* @__PURE__ */ d("div", { className: "@container", children: [
+    /* @__PURE__ */ d("div", { className: "flex justify-between items-center @md:hidden", children: [
       /* @__PURE__ */ e(
         "button",
         {
@@ -534,17 +536,17 @@ const es = () => {
           children: /* @__PURE__ */ e(ae, { className: "size-5 text-black/90" })
         }
       ),
-      /* @__PURE__ */ c("div", { className: "flex flex-col gap-1 items-center", children: [
+      /* @__PURE__ */ d("div", { className: "flex flex-col gap-1 items-center", children: [
         /* @__PURE__ */ e(
           J,
           {
-            id: ((N = d == null ? void 0 : d.user) == null ? void 0 : N.id) || i.id || "unknown",
-            name: a,
+            id: ((N = c == null ? void 0 : c.user) == null ? void 0 : N.id) || a.id || "unknown",
+            name: i,
             image: l,
             size: 40
           }
         ),
-        /* @__PURE__ */ e("h1", { className: "text-xs font-medium text-black/90", children: a })
+        /* @__PURE__ */ e("h1", { className: "text-xs font-medium text-black/90", children: i })
       ] }),
       /* @__PURE__ */ e(
         "button",
@@ -558,8 +560,8 @@ const es = () => {
         }
       )
     ] }),
-    /* @__PURE__ */ c("div", { className: "hidden @md:flex items-center justify-between gap-3 min-h-12", children: [
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-4 min-w-0", children: [
+    /* @__PURE__ */ d("div", { className: "hidden @md:flex items-center justify-between gap-3 min-h-12", children: [
+      /* @__PURE__ */ d("div", { className: "flex items-center gap-4 min-w-0", children: [
         s && t && /* @__PURE__ */ e(
           "button",
           {
@@ -573,13 +575,13 @@ const es = () => {
         /* @__PURE__ */ e(
           J,
           {
-            id: ((m = d == null ? void 0 : d.user) == null ? void 0 : m.id) || i.id || "unknown",
-            name: a,
+            id: ((m = c == null ? void 0 : c.user) == null ? void 0 : m.id) || a.id || "unknown",
+            name: i,
             image: l,
             size: 40
           }
         ),
-        /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "font-medium text-black/90 truncate", children: a }) })
+        /* @__PURE__ */ e("div", { className: "min-w-0", children: /* @__PURE__ */ e("h1", { className: "font-medium text-black/90 truncate", children: i }) })
       ] }),
       r && n && /* @__PURE__ */ e(
         "button",
@@ -598,9 +600,9 @@ const es = () => {
   onClose: s,
   participant: n,
   channel: r,
-  followerStatusLabel: i,
-  onLeaveConversation: d,
-  onBlockParticipant: a
+  followerStatusLabel: a,
+  onLeaveConversation: c,
+  onBlockParticipant: i
 }) => {
   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);
@@ -635,7 +637,7 @@ const es = () => {
       o && console.log("[ChannelInfoDialog] Leave conversation", r.cid), S(!0);
       try {
         const M = ((k = r._client) == null ? void 0 : k.userID) ?? null;
-        await r.hide(M, !1), d && await d(r), s();
+        await r.hide(M, !1), c && await c(r), s();
       } catch (M) {
         console.error("[ChannelInfoDialog] Failed to leave conversation", M);
       } finally {
@@ -647,7 +649,7 @@ const es = () => {
     if (!(g || !l)) {
       o && console.log("[ChannelInfoDialog] Block member", (k = n == null ? void 0 : n.user) == null ? void 0 : k.id), b(!0);
       try {
-        await l.blockUser((M = n == null ? void 0 : n.user) == null ? void 0 : M.id), a && await a((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
+        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);
       } finally {
@@ -659,7 +661,7 @@ const es = () => {
     if (!(g || !l)) {
       o && console.log("[ChannelInfoDialog] Unblock member", (k = n == null ? void 0 : n.user) == null ? void 0 : k.id), b(!0);
       try {
-        await l.unBlockUser((M = n == null ? void 0 : n.user) == null ? void 0 : M.id), a && await a((A = n == null ? void 0 : n.user) == null ? void 0 : A.id), s();
+        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);
       } finally {
@@ -686,18 +688,18 @@ const es = () => {
         onClick: (k) => {
           k.target === w.current && s();
         },
-        children: /* @__PURE__ */ c("div", { className: "ml-auto flex h-full w-full flex-col bg-white shadow-max-elevation-light", children: [
-          /* @__PURE__ */ c("div", { className: "flex items-center justify-between border-b border-sand px-4 py-3", children: [
+        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: [
             /* @__PURE__ */ e("h2", { className: "text-base font-semibold text-charcoal", children: "Chat info" }),
             /* @__PURE__ */ e(Ne, { onClick: s })
           ] }),
-          /* @__PURE__ */ c("div", { className: "flex-1 px-2 overflow-y-auto w-full", children: [
+          /* @__PURE__ */ d("div", { className: "flex-1 px-2 overflow-y-auto w-full", children: [
             /* @__PURE__ */ e(
               "div",
               {
                 className: "flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]",
                 style: { backgroundColor: "#FBFAF9" },
-                children: /* @__PURE__ */ c("div", { className: "flex items-center gap-3 w-full", children: [
+                children: /* @__PURE__ */ d("div", { className: "flex items-center gap-3 w-full", children: [
                   /* @__PURE__ */ e(
                     J,
                     {
@@ -705,32 +707,32 @@ const es = () => {
                       name: p,
                       image: u,
                       size: 88,
-                      className: "!rounded-full"
+                      shape: "circle"
                     }
                   ),
-                  /* @__PURE__ */ c("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                  /* @__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 }),
-                    i && /* @__PURE__ */ e(
+                    a && /* @__PURE__ */ e(
                       "span",
                       {
                         className: "mt-1 rounded-full text-xs font-normal w-fit",
                         style: {
                           padding: "4px 8px",
-                          backgroundColor: i === "Subscribed to you" ? "#DCFCE7" : "#F5F5F4",
-                          color: i === "Subscribed to you" ? "#008236" : "#78716C",
+                          backgroundColor: a === "Subscribed to you" ? "#DCFCE7" : "#F5F5F4",
+                          color: a === "Subscribed to you" ? "#008236" : "#78716C",
                           lineHeight: "133.333%",
                           letterSpacing: "0.21px"
                         },
-                        children: i
+                        children: a
                       }
                     )
                   ] })
                 ] })
               }
             ),
-            /* @__PURE__ */ c("ul", { className: "flex flex-col gap-2 mt-2", children: [
-              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(
+            /* @__PURE__ */ d("ul", { className: "flex flex-col gap-2 mt-2", children: [
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(
                 K,
                 {
                   onClick: v,
@@ -742,7 +744,7 @@ const es = () => {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: I ? /* @__PURE__ */ c(
+              /* @__PURE__ */ e("li", { children: I ? /* @__PURE__ */ d(
                 K,
                 {
                   onClick: C,
@@ -753,7 +755,7 @@ const es = () => {
                     /* @__PURE__ */ e("span", { children: "Unblock" })
                   ]
                 }
-              ) : /* @__PURE__ */ c(
+              ) : /* @__PURE__ */ d(
                 K,
                 {
                   onClick: F,
@@ -765,7 +767,7 @@ const es = () => {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ c(K, { variant: "danger", onClick: T, children: [
+              /* @__PURE__ */ e("li", { children: /* @__PURE__ */ d(K, { variant: "danger", onClick: T, children: [
                 /* @__PURE__ */ e(Ve, { className: "h-5 w-5" }),
                 /* @__PURE__ */ e("span", { children: "Report" })
               ] }) })
@@ -780,24 +782,24 @@ const es = () => {
   showBackButton: s,
   renderMessageInputActions: n,
   onLeaveConversation: r,
-  onBlockParticipant: i,
-  CustomChannelEmptyState: d = be
+  onBlockParticipant: a,
+  CustomChannelEmptyState: c = be
 }) => {
   var m, S;
-  const { channel: a } = fe(), [l, o] = y(!1), w = (((S = (m = a == null ? void 0 : a.state) == null ? void 0 : m.messages) == null ? void 0 : S.length) ?? 0) > 0, I = Y.useMemo(() => Object.values(a.state.members || {}).find(
+  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 !== a._client.userID;
+      return ((E = b.user) == null ? void 0 : E.id) && b.user.id !== i._client.userID;
     }
-  ), [a._client.userID, a.state.members]), N = Y.useMemo(() => {
-    const g = a.data ?? {};
+  ), [i._client.userID, i.state.members]), N = Y.useMemo(() => {
+    const g = i.data ?? {};
     if (g.followerStatus)
       return String(g.followerStatus);
     if (g.isFollower !== void 0)
       return g.isFollower ? "Subscribed to you" : "Not subscribed";
-  }, [a.data]);
-  return /* @__PURE__ */ c(se, { children: [
-    /* @__PURE__ */ c(ze, { children: [
+  }, [i.data]);
+  return /* @__PURE__ */ d(se, { children: [
+    /* @__PURE__ */ d(ze, { children: [
       /* @__PURE__ */ e("div", { className: "p-4", children: /* @__PURE__ */ e(
         ns,
         {
@@ -807,7 +809,7 @@ const es = () => {
           canShowInfo: !!I
         }
       ) }),
-      /* @__PURE__ */ c("div", { className: "flex-1 overflow-hidden relative", children: [
+      /* @__PURE__ */ d("div", { className: "flex-1 overflow-hidden relative", children: [
         /* @__PURE__ */ e(
           $e,
           {
@@ -816,12 +818,12 @@ const es = () => {
             messageActions: []
           }
         ),
-        !w && d && /* @__PURE__ */ e("div", { className: "absolute inset-0 w-full h-full", children: /* @__PURE__ */ e(d, {}) })
+        !w && c && /* @__PURE__ */ e("div", { className: "absolute inset-0 w-full h-full", children: /* @__PURE__ */ e(c, {}) })
       ] }),
       /* @__PURE__ */ e(
         ss,
         {
-          renderActions: () => n == null ? void 0 : n(a)
+          renderActions: () => n == null ? void 0 : n(i)
         }
       )
     ] }),
@@ -831,10 +833,10 @@ const es = () => {
         isOpen: l,
         onClose: () => o(!1),
         participant: I,
-        channel: a,
+        channel: i,
         followerStatusLabel: N,
         onLeaveConversation: r,
-        onBlockParticipant: i
+        onBlockParticipant: a
       }
     )
   ] });
@@ -843,16 +845,16 @@ const es = () => {
   onBack: s,
   showBackButton: n = !1,
   renderMessageInputActions: r,
-  onLeaveConversation: i,
-  onBlockParticipant: d,
-  className: a,
+  onLeaveConversation: a,
+  onBlockParticipant: c,
+  className: i,
   CustomChannelEmptyState: l = be
 }) => /* @__PURE__ */ e(
   "div",
   {
     className: R(
       "messaging-channel-view h-full flex flex-col bg-[#FBFAF9]",
-      a
+      i
     ),
     children: /* @__PURE__ */ e(Be, { channel: t, children: /* @__PURE__ */ e(
       rs,
@@ -860,8 +862,8 @@ const es = () => {
         onBack: s,
         showBackButton: n,
         renderMessageInputActions: r,
-        onLeaveConversation: i,
-        onBlockParticipant: d,
+        onLeaveConversation: a,
+        onBlockParticipant: c,
         CustomChannelEmptyState: l
       }
     ) })
@@ -873,7 +875,7 @@ function os({
   placeholder: n
 }) {
   const r = $(null);
-  return /* @__PURE__ */ c("div", { className: "relative", children: [
+  return /* @__PURE__ */ d("div", { className: "relative", children: [
     /* @__PURE__ */ e(
       We,
       {
@@ -888,7 +890,7 @@ function os({
         type: "text",
         placeholder: n,
         value: t,
-        onChange: (i) => s(i.target.value),
+        onChange: (a) => s(a.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"
       }
     ),
@@ -897,8 +899,8 @@ function os({
       {
         label: "Clear search",
         onClick: () => {
-          var i;
-          s(""), (i = r.current) == null || i.focus();
+          var a;
+          s(""), (a = r.current) == null || a.focus();
         },
         className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 text-stone hover:text-charcoal",
         children: /* @__PURE__ */ e(he, { className: "h-4 w-4", weight: "bold" })
@@ -911,9 +913,9 @@ const as = ({
   onSelectParticipant: s,
   onClose: n,
   existingParticipantIds: r = /* @__PURE__ */ new Set(),
-  participantLabel: i = "participants",
-  searchPlaceholder: d = "Search participants...",
-  className: a
+  participantLabel: a = "participants",
+  searchPlaceholder: c = "Search participants...",
+  className: i
 }) => {
   const { debug: l } = ne(), [o, w] = y(""), [I, N] = y([]), [m, S] = y(!1), [g, b] = y(null), [E, v] = y(
     null
@@ -966,47 +968,47 @@ const as = ({
   ), p = (u, f) => {
     (u.key === "Enter" || u.key === " ") && (u.preventDefault(), T(f));
   };
-  return /* @__PURE__ */ c("div", { className: R("flex flex-col h-full", a), children: [
-    /* @__PURE__ */ c("div", { className: "px-4 py-4 border-b border-sand bg-chalk", children: [
-      /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-3", children: [
+  return /* @__PURE__ */ d("div", { className: R("flex flex-col h-full", i), 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" }),
         /* @__PURE__ */ e(Ne, { onClick: n })
       ] }),
-      /* @__PURE__ */ c("p", { className: "text-xs text-stone mb-3", children: [
+      /* @__PURE__ */ d("p", { className: "text-xs text-stone mb-3", children: [
         "Select a ",
-        i.slice(0, -1),
+        a.slice(0, -1),
         " to start messaging (",
         C.length,
         " available)",
-        t.totalCount !== void 0 && ` • ${t.totalCount} ${i} total`
+        t.totalCount !== void 0 && ` • ${t.totalCount} ${a} total`
       ] }),
       /* @__PURE__ */ e(
         os,
         {
           searchQuery: o,
           setSearchQuery: w,
-          placeholder: d
+          placeholder: c
         }
       )
     ] }),
-    g && /* @__PURE__ */ c("div", { className: "p-4 text-sm text-danger bg-danger-alt", children: [
+    g && /* @__PURE__ */ d("div", { className: "p-4 text-sm text-danger bg-danger-alt", children: [
       "Error loading ",
-      i,
+      a,
       ": ",
       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__ */ c("div", { className: "flex items-center space-x-2", children: [
+    /* @__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: "w-4 h-4 animate-spin rounded-full border-2 border-primary border-t-transparent" }),
-      /* @__PURE__ */ c("span", { className: "text-sm text-stone", children: [
+      /* @__PURE__ */ d("span", { className: "text-sm text-stone", children: [
         "Loading ",
-        i,
+        a,
         "..."
       ] })
-    ] }) }) : C.length === 0 ? /* @__PURE__ */ c("div", { className: "p-6 text-center", children: [
+    ] }) }) : C.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 ${i} found` : I.length > 0 ? `Already chatting with all ${i}` : `No ${i} yet` }),
-      /* @__PURE__ */ e("p", { className: "text-xs text-stone", children: o ? "Try a different search term" : I.length > 0 ? `You have existing conversations with all your ${i}` : `${i.charAt(0).toUpperCase() + i.slice(1)} will appear here` })
-    ] }) : /* @__PURE__ */ c("ul", { className: "space-y-0", children: [
+      /* @__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__ */ 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;
         return /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
@@ -1016,8 +1018,8 @@ const as = ({
             onClick: () => T(u),
             onKeyDown: (D) => p(D, u),
             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__ */ c("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ c("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [
+            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,
                   {
@@ -1027,7 +1029,7 @@ const as = ({
                     size: 40
                   }
                 ),
-                /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+                /* @__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 })
                 ] })
@@ -1037,25 +1039,25 @@ const as = ({
           }
         ) }, u.id);
       }),
-      m && /* @__PURE__ */ e("li", { className: "p-4 flex justify-center", children: /* @__PURE__ */ c("div", { className: "flex items-center space-x-2", children: [
+      m && /* @__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__ */ c("div", { className: "text-center max-w-sm", children: [
+}, 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: [
   /* @__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__ */ c(se, { children: [
+  /* @__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__ */ c(me, { onClick: s, children: [
+    s && /* @__PURE__ */ d(me, { onClick: s, children: [
       "start a new conversation with a ",
       n.slice(0, -1),
       "."
     ] })
-  ] }) : s && /* @__PURE__ */ c(se, { children: [
-    /* @__PURE__ */ c(me, { onClick: s, children: [
+  ] }) : s && /* @__PURE__ */ d(se, { children: [
+    /* @__PURE__ */ d(me, { onClick: s, children: [
       "Start a new conversation with one of your ",
       n
     ] }),
@@ -1073,7 +1075,7 @@ const as = ({
     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__ */ c("div", { className: "text-center max-w-sm", children: [
+), le = ({ message: t, onBack: s }) => /* @__PURE__ */ e("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ 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 }),
@@ -1086,12 +1088,12 @@ const as = ({
       children: "Go Back"
     }
   )
-] }) }), cs = ({ className: t, message: s }) => /* @__PURE__ */ c(
+] }) }), cs = ({ className: t, message: s }) => /* @__PURE__ */ d(
   "div",
   {
     className: R("flex items-center justify-center h-full", t),
     children: [
-      /* @__PURE__ */ c("svg", { viewBox: "0 0 100 100", className: "size-8 fill-pebble", stroke: "none", children: [
+      /* @__PURE__ */ d("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",
           {
@@ -1129,7 +1131,7 @@ 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__ */ c("div", { className: "flex items-center", children: [
+), 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" }),
   /* @__PURE__ */ e("span", { className: "text-sm text-stone", children: "Loading messages" })
 ] }) }), vs = ({
@@ -1137,9 +1139,9 @@ const as = ({
   className: s,
   renderMessageInputActions: n,
   onChannelSelect: r,
-  onParticipantSelect: i,
-  initialParticipantFilter: d,
-  initialParticipantData: a,
+  onParticipantSelect: a,
+  initialParticipantFilter: c,
+  initialParticipantData: i,
   CustomChannelEmptyState: l,
   showChannelList: o = !0,
   filters: w,
@@ -1204,19 +1206,19 @@ const as = ({
     const h = m.userID;
     h && j.current !== h && B();
   }, [m, S, B]), H(() => {
-    if (!d || !m || !S) return;
+    if (!c || !m || !S) return;
     (async () => {
       const L = m.userID;
       if (L)
         try {
           v && console.log(
             "[MessagingShell] Loading initial conversation with:",
-            d
+            c
           );
           const U = await m.queryChannels(
             {
               type: "messaging",
-              members: { $eq: [L, d] }
+              members: { $eq: [L, c] }
             },
             {},
             { limit: 1 }
@@ -1226,17 +1228,17 @@ const as = ({
               "[MessagingShell] Initial conversation loaded:",
               U[0].id
             );
-          else if (a && N) {
+          else if (i && N) {
             v && console.log(
               "[MessagingShell] No conversation found, creating one for:",
-              a
+              i
             );
             try {
               const z = await N.startChannelWithParticipant({
-                id: a.id,
-                name: a.name,
-                email: a.email,
-                phone: a.phone
+                id: i.id,
+                name: i.name,
+                email: i.email,
+                phone: i.phone
               });
               C(z), W(!0), G(null), r && r(z), v && console.log(
                 "[MessagingShell] Channel created and loaded:",
@@ -1253,7 +1255,7 @@ const as = ({
               "No conversation found with this account"
             ), v && console.log(
               "[MessagingShell] No conversation found for:",
-              d
+              c
             );
         } catch (U) {
           console.error(
@@ -1263,8 +1265,8 @@ const as = ({
         }
     })();
   }, [
-    d,
-    a,
+    c,
+    i,
     m,
     S,
     N,
@@ -1301,12 +1303,12 @@ const as = ({
           } catch (z) {
             console.warn("[MessagingShell] Failed to unhide channel:", z);
           }
-          C(U), f(!1), (L = V.current) == null || L.close(), i == null || i(h);
+          C(U), f(!1), (L = V.current) == null || L.close(), a == null || a(h);
         } catch (U) {
           console.error("[MessagingShell] Failed to start conversation:", U);
         }
     },
-    [N, i, v]
+    [N, a, v]
   ), te = P(() => {
     var h;
     f(!1), (h = V.current) == null || h.close();
@@ -1327,7 +1329,7 @@ const as = ({
       message: "Not connected to messaging service",
       onBack: E
     }
-  ) }) : Q ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(le, { message: Q }) }) : /* @__PURE__ */ c(
+  ) }) : Q ? /* @__PURE__ */ e("div", { className: R("h-full", s), children: /* @__PURE__ */ e(le, { message: Q }) }) : /* @__PURE__ */ d(
     "div",
     {
       className: R(
@@ -1335,7 +1337,7 @@ const as = ({
         s
       ),
       children: [
-        /* @__PURE__ */ c("div", { className: "flex h-full min-h-0", children: [
+        /* @__PURE__ */ d("div", { className: "flex h-full min-h-0", children: [
           /* @__PURE__ */ e(
             "div",
             {
@@ -1450,25 +1452,26 @@ const as = ({
   onFaqClick: s,
   loadingFaqId: n,
   headerText: r,
-  className: i,
-  avatarImage: d,
-  avatarName: a
+  className: a,
+  avatarImage: c,
+  avatarName: i
 }) => {
   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", i), children: /* @__PURE__ */ c("div", { className: "flex gap-3 items-end", children: [
-    (d || a) && /* @__PURE__ */ e("div", { className: "flex-none", children: /* @__PURE__ */ e(
+  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,
       {
-        id: a || "account",
-        name: a || "Account",
-        image: d,
-        size: 24
+        id: i || "account",
+        name: i || "Account",
+        image: c,
+        size: 24,
+        shape: "circle"
       }
     ) }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ d(
       "div",
       {
-        className: "flex-1 rounded-lg p-4 space-y-3",
+        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 }),
@@ -1486,8 +1489,8 @@ const as = ({
     )
   ] }) });
 }, ws = (t, s = {}) => {
-  const { initialSearch: n = "", pageSize: r = 20 } = s, [i, d] = y([]), [a, 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 (a) return;
+  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);
     try {
@@ -1496,7 +1499,7 @@ const as = ({
         limit: r,
         cursor: T ? void 0 : g
       });
-      d(
+      c(
         (x) => T ? f.participants : [...x, ...f.participants]
       ), S(f.hasMore), b(f.nextCursor);
     } catch (f) {
@@ -1505,9 +1508,9 @@ const as = ({
     } finally {
       l(!1);
     }
-  }, [t, I, g, r, a]), v = P(() => {
-    m && !a && E(!1);
-  }, [m, a, E]), F = P((T) => {
+  }, [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);
@@ -1515,8 +1518,8 @@ const as = ({
   return H(() => {
     E(!0);
   }, [t.loadParticipants]), {
-    participants: i,
-    loading: a,
+    participants: a,
+    loading: i,
     error: o,
     searchQuery: I,
     hasMore: m,