@linktr.ee/messaging-react 3.32.0-rc-1786001289 → 3.32.0

package/dist/{index-KC2xnb1K.js → index-DtTSu6m9.js}

@@ -3,7 +3,7 @@ import F, { createContext as Ve, useContext as _e, useCallback as q, useState as
 import { StreamChatService as en } from "@linktr.ee/messaging-core";
 import { StreamChat as tn, LinkPreviewsManager as et } from "stream-chat";
 import { Chat as sn, useChannelStateContext as fe, useChatContext as Ee, DateSeparator as nn, useMessageContext as ge, MessageStatus as an, MessageErrorIcon as tt, MessageText as ze, areMessageUIPropsEqual as rn, useMessageReminder as on, useComponentContext as is, Attachment as ln, EditMessageModal as cn, MessageBlocked as dn, MessageBouncePrompt as un, MessageDeleted as mn, MessageIsThreadReplyInChannelButtonIndicator as hn, MessageRepliesCountButton as fn, ReminderNotification as gn, StreamedMessageText as pn, messageHasAttachments as bn, messageHasReactions as vn, isDateSeparatorMessage as xn, isMessageBlocked as wn, isMessageBounced as _n, MessageBounceModal as yn, Poll as Nn, useMessageComposer as kn, useStateStore as Cn, MessageInput as Ht, useMessageInputContext as Sn, useMessageComposerHasSendableData as En, AttachmentPreviewList as In, QuotedMessagePreview as Tn, TextareaComposer as An, MessageTimestamp as Ye, AIStates as We, useTypingContext as Ln, useAIState as Mn, Channel as Rn, WithComponents as Dn, Window as Pn, MessageList as Gt, ChannelList as On, InfiniteScroll as zn } from "stream-chat-react";
-import k from "classnames";
+import N from "classnames";
 import { StarIcon as st, DotsThreeIcon as Bn, SpinnerGapIcon as Pe, SignOutIcon as Fn, ProhibitInsetIcon as Yt, FlagIcon as os, CurrencyDollarIcon as $n, CaretRightIcon as ls, ArrowLeftIcon as Un, FileIcon as cs, ImageIcon as jn, SpeakerHighIcon as Vn, VideoCameraIcon as ds, FileMdIcon as Hn, FileTextIcon as Gn, FileZipIcon as Yn, FilePptIcon as Wn, FileCsvIcon as qn, FileXlsIcon as Xn, FileDocIcon as Kn, FilePdfIcon as Zn, CircleNotchIcon as xe, PlayIcon as nt, PauseIcon as Jn, LinkIcon as Qn, DownloadSimpleIcon as Se, XIcon as ot, CaretLeftIcon as ea, GiftIcon as ta, ThumbsUpIcon as sa, ThumbsDownIcon as na, WarningCircleIcon as aa, MegaphoneIcon as ra, ChecksIcon as ia, PencilSimpleIcon as oa, TrashSimpleIcon as la, ArrowUpIcon as ca, SparkleIcon as da, ProhibitIcon as ua } from "@phosphor-icons/react";
 import { isOfficialChannel as ma, OFFICIAL_SENDER_USER_ID as ha, MESSAGE_CUSTOM_TYPE as ce, isDmAgentSystemType as Wt, isAgeSafetySystemType as fa, selectEnabledFaqs as ga } from "@linktr.ee/messaging-taxonomy";
 import { MessageActions as pa, DefaultDropdownActionButton as us } from "stream-chat-react/experimental";
@@ -26,7 +26,7 @@ const ms = Ve({
   debug: i = !1,
   client: l
 }) => {
-  var S, T;
+  var S, A;
   const o = q(
     (E, ...B) => {
       i && console.log(`🔥 [MessagingProvider] ${E}`, ...B);
@@ -39,11 +39,11 @@ const ms = Ve({
     serviceConfig: !!n,
     capabilities: Object.keys(r)
   });
-  const [d, m] = $(null), [f, u] = $(null), [g, c] = $(!1), [x, w] = $(!1), [p, b] = $(null), v = H(!1), _ = H(null), N = H(n);
-  N.current = n;
-  const A = H(i);
-  A.current = i;
-  const L = H({
+  const [d, m] = $(null), [f, u] = $(null), [g, c] = $(!1), [x, w] = $(!1), [b, p] = $(null), v = H(!1), _ = H(null), k = H(n);
+  k.current = n;
+  const L = H(i);
+  L.current = i;
+  const T = H({
     userId: t == null ? void 0 : t.id,
     apiKey: a,
     serviceConfig: n,
@@ -53,12 +53,12 @@ const ms = Ve({
     renderCount: z.current,
     currentProps: { userId: t == null ? void 0 : t.id, apiKey: (a == null ? void 0 : a.substring(0, 8)) + "..." },
     propChanges: {
-      userChanged: L.current.userId !== (t == null ? void 0 : t.id),
-      apiKeyChanged: L.current.apiKey !== a,
-      serviceConfigChanged: L.current.serviceConfig !== n,
-      capabilitiesChanged: L.current.capabilities !== r
+      userChanged: T.current.userId !== (t == null ? void 0 : t.id),
+      apiKeyChanged: T.current.apiKey !== a,
+      serviceConfigChanged: T.current.serviceConfig !== n,
+      capabilitiesChanged: T.current.capabilities !== r
     }
-  }), L.current = {
+  }), T.current = {
     userId: t == null ? void 0 : t.id,
     apiKey: a,
     serviceConfig: n,
@@ -66,11 +66,11 @@ const ms = Ve({
   };
   const P = H(null);
   !l && a && ((S = P.current) == null ? void 0 : S.apiKey) !== a && (P.current = { apiKey: a, client: new tn(a) });
-  const U = l || (a ? ((T = P.current) == null ? void 0 : T.client) ?? null : null);
+  const U = l || (a ? ((A = P.current) == null ? void 0 : A.client) ?? null : null);
   Y(() => {
-    const E = z.current, B = N.current;
+    const E = z.current, B = k.current;
     if (l) {
-      _.current = null, m(null), u(null), c(!1), b(null), w(!1);
+      _.current = null, m(null), u(null), c(!1), p(null), w(!1);
       return;
     }
     if (!a || !U || !B) {
@@ -87,7 +87,7 @@ const ms = Ve({
     const O = new en({
       ...B,
       apiKey: a,
-      debug: A.current,
+      debug: L.current,
       client: U
     });
     _.current = O, m(O), o("✅ SERVICE SET", {
@@ -123,7 +123,7 @@ const ms = Ve({
       return;
     }
     (async () => {
-      o("🚀 STARTING USER CONNECTION", { userId: t.id }), v.current = !0, w(!0), b(null);
+      o("🚀 STARTING USER CONNECTION", { userId: t.id }), v.current = !0, w(!0), p(null);
       try {
         o("📞 CALLING SERVICE.CONNECTUSER", { userId: t.id });
         const j = await d.connectUser(t);
@@ -133,7 +133,7 @@ const ms = Ve({
         });
       } catch (j) {
         const K = j instanceof Error ? j.message : "Connection failed";
-        b(K), o("❌ USER CONNECTION ERROR", {
+        p(K), o("❌ USER CONNECTION ERROR", {
           userId: t.id,
           error: K
         });
@@ -164,10 +164,10 @@ const ms = Ve({
       try {
         o("🔌 DISCONNECTING FOR REFRESH"), await d.disconnectUser(), o("📞 RECONNECTING FOR REFRESH");
         const E = await d.connectUser(t);
-        u(E), c(!0), b(null), o("✅ CONNECTION REFRESH SUCCESS", { userId: t.id });
+        u(E), c(!0), p(null), o("✅ CONNECTION REFRESH SUCCESS", { userId: t.id });
       } catch (E) {
         const B = E instanceof Error ? E.message : "Refresh failed";
-        b(B), o("❌ CONNECTION REFRESH ERROR", {
+        p(B), o("❌ CONNECTION REFRESH ERROR", {
           userId: t.id,
           error: B
         });
@@ -180,7 +180,7 @@ const ms = Ve({
     hasClient: !!f,
     isConnected: g,
     isLoading: x,
-    hasError: !!p,
+    hasError: !!b,
     capabilitiesKeys: Object.keys(r)
   }), {
     // With an injected client, expose no service — the injected client owns
@@ -195,7 +195,7 @@ const ms = Ve({
     client: l ?? f,
     isConnected: l ? !0 : g,
     isLoading: l ? !1 : x,
-    error: l ? null : p,
+    error: l ? null : b,
     capabilities: r,
     refreshConnection: C,
     debug: i
@@ -205,7 +205,7 @@ const ms = Ve({
     l,
     g,
     x,
-    p,
+    b,
     r,
     C,
     i,
@@ -342,7 +342,7 @@ const ye = ({
     "div",
     {
       "aria-hidden": "true",
-      className: k(
+      className: N(
         "avatar-fallback flex h-full w-full items-center justify-center font-semibold select-none transition-colors"
       ),
       style: { fontSize: u, lineHeight: 1 },
@@ -352,7 +352,7 @@ const ye = ({
   return /* @__PURE__ */ h(
     "div",
     {
-      className: k(
+      className: N(
         "relative flex-shrink-0",
         a
       ),
@@ -376,7 +376,7 @@ const ye = ({
           "div",
           {
             "data-testid": "avatar-ring",
-            className: k(
+            className: N(
               "h-full w-full",
               "bg-transparent"
             ),
@@ -409,24 +409,24 @@ const ye = ({
   logLabel: f = "useChannelModerationActions"
 }) => {
   var D;
-  const { service: u, debug: g } = lt(), c = (D = t == null ? void 0 : t.user) == null ? void 0 : D.id, x = !!(a && n && u && c), [w, p] = $(!1), [b, v] = $(null), [_, N] = $(!1), [A, L] = $(!1), z = x && ((b == null ? void 0 : b.participantId) !== c || (b == null ? void 0 : b.service) !== u);
+  const { service: u, debug: g } = lt(), c = (D = t == null ? void 0 : t.user) == null ? void 0 : D.id, x = !!(a && n && u && c), [w, b] = $(!1), [p, v] = $(null), [_, k] = $(!1), [L, T] = $(!1), z = x && ((p == null ? void 0 : p.participantId) !== c || (p == null ? void 0 : p.service) !== u);
   return Y(() => {
     if (!x || !u || !c) {
-      p(!1), v(null);
+      b(!1), v(null);
       return;
     }
     let S = !1;
     return (async () => {
       try {
-        const T = await u.getBlockedUsers();
+        const A = await u.getBlockedUsers();
         if (S) return;
-        p(
-          T.some(
+        b(
+          A.some(
             (E) => E.blocked_user_id === c
           )
         );
-      } catch (T) {
-        S || console.error(`[${f}] Failed to check blocked status:`, T);
+      } catch (A) {
+        S || console.error(`[${f}] Failed to check blocked status:`, A);
       } finally {
         S || v({ participantId: c, service: u });
       }
@@ -437,44 +437,44 @@ const ye = ({
     isParticipantBlocked: w,
     isCheckingBlockedStatus: z,
     isLeaving: _,
-    isUpdatingBlockStatus: A,
+    isUpdatingBlockStatus: L,
     handleLeaveConversation: async () => {
       var S;
       if (!_) {
-        l == null || l(), g && console.log(`[${f}] Leave conversation`, e.cid), N(!0);
+        l == null || l(), g && console.log(`[${f}] Leave conversation`, e.cid), k(!0);
         try {
-          const T = ((S = e._client) == null ? void 0 : S.userID) ?? null;
-          await e.hide(T, !1), r && await r(e), m == null || m();
-        } catch (T) {
-          console.error(`[${f}] Failed to leave conversation`, T);
+          const A = ((S = e._client) == null ? void 0 : S.userID) ?? null;
+          await e.hide(A, !1), r && await r(e), m == null || m();
+        } catch (A) {
+          console.error(`[${f}] Failed to leave conversation`, A);
         } finally {
-          N(!1);
+          k(!1);
         }
       }
     },
     handleBlockUser: async () => {
-      var S, T, E;
-      if (!(A || !u)) {
-        o == null || o(), g && console.log(`[${f}] Block member`, (S = t == null ? void 0 : t.user) == null ? void 0 : S.id), L(!0);
+      var S, A, E;
+      if (!(L || !u)) {
+        o == null || o(), g && console.log(`[${f}] Block member`, (S = t == null ? void 0 : t.user) == null ? void 0 : S.id), T(!0);
         try {
-          await u.blockUser((T = t == null ? void 0 : t.user) == null ? void 0 : T.id), i && await i((E = t == null ? void 0 : t.user) == null ? void 0 : E.id), m == null || m();
+          await u.blockUser((A = t == null ? void 0 : t.user) == null ? void 0 : A.id), i && await i((E = t == null ? void 0 : t.user) == null ? void 0 : E.id), m == null || m();
         } catch (B) {
           console.error(`[${f}] Failed to block member`, B);
         } finally {
-          L(!1);
+          T(!1);
         }
       }
     },
     handleUnblockUser: async () => {
-      var S, T, E;
-      if (!(A || !u)) {
-        o == null || o(), g && console.log(`[${f}] Unblock member`, (S = t == null ? void 0 : t.user) == null ? void 0 : S.id), L(!0);
+      var S, A, E;
+      if (!(L || !u)) {
+        o == null || o(), g && console.log(`[${f}] Unblock member`, (S = t == null ? void 0 : t.user) == null ? void 0 : S.id), T(!0);
         try {
-          await u.unBlockUser((T = t == null ? void 0 : t.user) == null ? void 0 : T.id), i && await i((E = t == null ? void 0 : t.user) == null ? void 0 : E.id), m == null || m();
+          await u.unBlockUser((A = t == null ? void 0 : t.user) == null ? void 0 : A.id), i && await i((E = t == null ? void 0 : t.user) == null ? void 0 : E.id), m == null || m();
         } catch (B) {
           console.error(`[${f}] Failed to unblock member`, B);
         } finally {
-          L(!1);
+          T(!1);
         }
       }
     },
@@ -491,7 +491,7 @@ const ye = ({
   "button",
   {
     type: "button",
-    className: k(
+    className: N(
       "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60",
       e === "danger" ? "text-danger hover:bg-danger/50" : "text-charcoal hover:bg-sand",
       t
@@ -513,13 +513,13 @@ const ye = ({
   customChannelActions: f,
   triggerClassName: u
 }) => {
-  const [g, c] = $(!1), x = H(null), w = Js(), p = q(() => c(!1), []), {
-    isParticipantBlocked: b,
+  const [g, c] = $(!1), x = H(null), w = Js(), b = q(() => c(!1), []), {
+    isParticipantBlocked: p,
     isCheckingBlockedStatus: v,
     isLeaving: _,
-    isUpdatingBlockStatus: N,
-    handleLeaveConversation: A,
-    handleBlockUser: L,
+    isUpdatingBlockStatus: k,
+    handleLeaveConversation: L,
+    handleBlockUser: T,
     handleUnblockUser: z,
     handleReportUser: P
   } = ka({
@@ -532,7 +532,7 @@ const ye = ({
     onDeleteConversationClick: o,
     onBlockParticipantClick: d,
     onReportParticipantClick: m,
-    onActionComplete: p,
+    onActionComplete: b,
     logLabel: "ChannelActionsMenu"
   });
   return Y(() => {
@@ -566,7 +566,7 @@ const ye = ({
       {
         id: w,
         "aria-label": "Conversation options",
-        className: k(
+        className: N(
           "absolute right-0 top-full z-50 mt-2 w-56 overflow-hidden",
           "rounded-lg border border-sand bg-white p-1 shadow-max-elevation-light"
         ),
@@ -574,7 +574,7 @@ const ye = ({
           n && /* @__PURE__ */ s("li", { children: /* @__PURE__ */ h(
             Ne,
             {
-              onClick: A,
+              onClick: L,
               disabled: _,
               "aria-busy": _,
               children: [
@@ -590,25 +590,25 @@ const ye = ({
               /* @__PURE__ */ s(Pe, { className: "h-5 w-5 animate-spin" }),
               /* @__PURE__ */ s("span", { children: "Block" })
             ] })
-          ) : b ? /* @__PURE__ */ h(
+          ) : p ? /* @__PURE__ */ h(
             Ne,
             {
               onClick: z,
-              disabled: N,
-              "aria-busy": N,
+              disabled: k,
+              "aria-busy": k,
               children: [
-                N ? /* @__PURE__ */ s(Pe, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ s(Yt, { className: "h-5 w-5" }),
+                k ? /* @__PURE__ */ s(Pe, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ s(Yt, { className: "h-5 w-5" }),
                 /* @__PURE__ */ s("span", { children: "Unblock" })
               ]
             }
           ) : /* @__PURE__ */ h(
             Ne,
             {
-              onClick: L,
-              disabled: N,
-              "aria-busy": N,
+              onClick: T,
+              disabled: k,
+              "aria-busy": k,
               children: [
-                N ? /* @__PURE__ */ s(Pe, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ s(Yt, { className: "h-5 w-5" }),
+                k ? /* @__PURE__ */ s(Pe, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ s(Yt, { className: "h-5 w-5" }),
                 /* @__PURE__ */ s("span", { children: "Block" })
               ]
             }
@@ -640,20 +640,20 @@ const ye = ({
   showChannelInfo: x = !0,
   onParticipantNameClick: w
 }) => {
-  var C, D, S, T;
-  const { channel: p } = fe(), { client: b } = Ee(), v = F.useMemo(
+  var C, D, S, A;
+  const { channel: b } = fe(), { client: p } = Ee(), v = F.useMemo(
     () => {
       var E;
       return fs(
-        (E = p.state) == null ? void 0 : E.members,
-        b == null ? void 0 : b.userID,
-        p.type
+        (E = b.state) == null ? void 0 : E.members,
+        p == null ? void 0 : p.userID,
+        b.type
       );
     },
-    [(C = p.state) == null ? void 0 : C.members, b == null ? void 0 : b.userID, p.type]
-  ), _ = gs(v == null ? void 0 : v.user), N = (D = v == null ? void 0 : v.user) == null ? void 0 : D.image, A = hs(p), L = Ea((S = p.data) == null ? void 0 : S.customer_tag) && (v == null ? void 0 : v.is_follower) === !0, z = a && A, P = L || z || !!w, U = async () => {
+    [(C = b.state) == null ? void 0 : C.members, p == null ? void 0 : p.userID, b.type]
+  ), _ = gs(v == null ? void 0 : v.user), k = (D = v == null ? void 0 : v.user) == null ? void 0 : D.image, L = hs(b), T = Ea((S = b.data) == null ? void 0 : S.customer_tag) && (v == null ? void 0 : v.is_follower) === !0, z = a && L, P = T || z || !!w, U = async () => {
     try {
-      A ? await p.unpin() : await p.pin();
+      L ? await b.unpin() : await b.pin();
     } catch (E) {
       console.error(
         "[ChannelHeaderRedesign] Failed to update pinned status:",
@@ -664,9 +664,9 @@ const ye = ({
     /* @__PURE__ */ s(
       ye,
       {
-        id: ((T = v == null ? void 0 : v.user) == null ? void 0 : T.id) || p.id || "unknown",
+        id: ((A = v == null ? void 0 : v.user) == null ? void 0 : A.id) || b.id || "unknown",
         name: _,
-        image: N,
+        image: k,
         shape: "circle",
         size: 48,
         className: "-mb-2"
@@ -675,14 +675,14 @@ const ye = ({
     /* @__PURE__ */ s(
       "span",
       {
-        className: k(
+        className: N(
           "relative z-10 flex max-w-full flex-col items-center justify-center rounded-full border border-white/10 bg-white/65 py-1.5 shadow-[0px_0px_0px_0px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)] backdrop-blur-[2px] transition-filter duration-150 group-hover:brightness-95",
           P ? "pl-3 pr-2" : "px-3"
         ),
         children: /* @__PURE__ */ h("span", { className: "flex max-w-full items-center justify-center", children: [
           /* @__PURE__ */ s("span", { className: "min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90", children: _ }),
           P && /* @__PURE__ */ h("span", { className: "ml-2 flex gap-1", children: [
-            L && /* @__PURE__ */ s(
+            T && /* @__PURE__ */ s(
               "span",
               {
                 "aria-label": "Paid customer",
@@ -714,7 +714,7 @@ const ye = ({
   return /* @__PURE__ */ s(
     "div",
     {
-      className: k(
+      className: N(
         "@container bg-[linear-gradient(180deg,#FBFAF9_0%,rgba(251,250,249,0.92)_58%,rgba(251,250,249,0)_100%)]",
         e
       ),
@@ -722,7 +722,7 @@ const ye = ({
         /* @__PURE__ */ s("div", { className: "flex items-start", children: n && /* @__PURE__ */ s(
           "button",
           {
-            className: k(
+            className: N(
               qe,
               "messaging-channel-view-back-button-mobile messaging-channel-view-back-button-desktop"
             ),
@@ -750,16 +750,16 @@ const ye = ({
               className: qe,
               onClick: U,
               type: "button",
-              "aria-pressed": A,
-              "aria-label": A ? "Unstar conversation" : "Star conversation",
+              "aria-pressed": L,
+              "aria-label": L ? "Unstar conversation" : "Star conversation",
               children: /* @__PURE__ */ s(
                 st,
                 {
-                  className: k("size-5", {
-                    "text-[#FFD60A]": A,
-                    "text-black/90": !A
+                  className: N("size-5", {
+                    "text-[#FFD60A]": L,
+                    "text-black/90": !L
                   }),
-                  weight: A ? "fill" : "regular"
+                  weight: L ? "fill" : "regular"
                 }
               )
             }
@@ -767,7 +767,7 @@ const ye = ({
           x && (c !== void 0 ? c : /* @__PURE__ */ s(
             Ca,
             {
-              channel: p,
+              channel: b,
               participant: v,
               showDeleteConversation: l,
               showBlockParticipant: o,
@@ -905,8 +905,8 @@ const $a = (e) => {
   muted: d = !1,
   onContainerClick: m
 }) => {
-  const f = de(t), u = H(null), g = H(null), c = H(null), x = H(r), [w, p] = $(a), [b, v] = $(0), [_, N] = $(!1), [A, L] = $(!1), [z, P] = $(!1), [U, R] = $(!1), [C, D] = $(!0), [S, T] = $(null), E = q(() => {
-    P(!1), p(!0);
+  const f = de(t), u = H(null), g = H(null), c = H(null), x = H(r), [w, b] = $(a), [p, v] = $(0), [_, k] = $(!1), [L, T] = $(!1), [z, P] = $(!1), [U, R] = $(!1), [C, D] = $(!0), [S, A] = $(null), E = q(() => {
+    P(!1), b(!0);
   }, []), B = q((y) => {
     const I = g.current;
     if (!I) return 0;
@@ -919,12 +919,12 @@ const $a = (e) => {
     const I = u.current;
     I && I.duration && (I.currentTime = y * I.duration);
   }, []), j = (y) => {
-    y.stopPropagation(), N(!0);
+    y.stopPropagation(), k(!0);
     const I = B(y);
     v(I), O(I);
   };
   Y(() => {
-    r !== void 0 && r !== x.current && (x.current = r, p(r));
+    r !== void 0 && r !== x.current && (x.current = r, b(r));
   }, [r]), Y(() => {
     if (!w) {
       c.current !== null && (cancelAnimationFrame(c.current), c.current = null);
@@ -940,18 +940,18 @@ const $a = (e) => {
   }, [w, _]), Y(() => {
     const y = u.current;
     y && (w ? y.play().catch((I) => {
-      p(!1), P(!0);
+      b(!1), P(!0);
     }) : y.pause());
   }, [w]), Y(() => {
     if (!_) return;
     const y = (W) => v(B(W)), I = (W) => {
-      N(!1), O(B(W));
+      k(!1), O(B(W));
     };
     return window.addEventListener("mousemove", y), window.addEventListener("mouseup", I), window.addEventListener("touchmove", y, { passive: !0 }), window.addEventListener("touchend", I), () => {
       window.removeEventListener("mousemove", y), window.removeEventListener("mouseup", I), window.removeEventListener("touchmove", y), window.removeEventListener("touchend", I);
     };
   }, [_, B, O]);
-  const K = S ? { aspectRatio: String(S) } : void 0, se = S ? "" : " aspect-video", G = Math.round(b * 100);
+  const K = S ? { aspectRatio: String(S) } : void 0, se = S ? "" : " aspect-video", G = Math.round(p * 100);
   return /* @__PURE__ */ h(
     "div",
     {
@@ -964,7 +964,7 @@ const $a = (e) => {
           m(y);
           return;
         }
-        z || l && p((I) => !I);
+        z || l && b((I) => !I);
       },
       onKeyDown: (y) => {
         if (!(y.key !== "Enter" && y.key !== " ")) {
@@ -972,7 +972,7 @@ const $a = (e) => {
             m(y);
             return;
           }
-          z || l && p((I) => !I);
+          z || l && b((I) => !I);
         }
       },
       children: [
@@ -1003,7 +1003,7 @@ const $a = (e) => {
             onWaiting: () => R(!0),
             onPlay: () => P(!1),
             onEnded: () => {
-              i || (p(!1), v(0));
+              i || (b(!1), v(0));
             },
             children: /* @__PURE__ */ s("track", { kind: "captions" })
           }
@@ -1024,10 +1024,10 @@ const $a = (e) => {
             onPlay: () => P(!1),
             onLoadedMetadata: () => {
               const y = u.current;
-              y instanceof HTMLVideoElement && y.videoWidth && y.videoHeight && T(y.videoWidth / y.videoHeight);
+              y instanceof HTMLVideoElement && y.videoWidth && y.videoHeight && A(y.videoWidth / y.videoHeight);
             },
             onEnded: () => {
-              i || (p(!1), v(0));
+              i || (b(!1), v(0));
             },
             children: /* @__PURE__ */ s("track", { kind: "captions" })
           }
@@ -1070,7 +1070,7 @@ const $a = (e) => {
             onTouchStart: j,
             onClick: (y) => y.stopPropagation(),
             onKeyDown: (y) => {
-              y.key === "ArrowRight" && O(Math.min(1, b + 0.05)), y.key === "ArrowLeft" && O(Math.max(0, b - 0.05));
+              y.key === "ArrowRight" && O(Math.min(1, p + 0.05)), y.key === "ArrowLeft" && O(Math.max(0, p - 0.05));
             },
             children: /* @__PURE__ */ s("div", { className: "w-full overflow-hidden rounded-full bg-white/30 h-1", children: /* @__PURE__ */ s(
               "div",
@@ -1087,7 +1087,7 @@ const $a = (e) => {
             {
               type: "button",
               onClick: (y) => {
-                y.stopPropagation(), p((I) => !I);
+                y.stopPropagation(), b((I) => !I);
               },
               className: "shrink-0 text-white",
               "aria-label": w ? "Pause" : "Play",
@@ -1108,16 +1108,16 @@ const $a = (e) => {
               onMouseDown: j,
               onTouchStart: j,
               onClick: (y) => y.stopPropagation(),
-              onMouseEnter: () => L(!0),
-              onMouseLeave: () => L(!1),
+              onMouseEnter: () => T(!0),
+              onMouseLeave: () => T(!1),
               onKeyDown: (y) => {
-                y.key === "ArrowRight" && O(Math.min(1, b + 0.05)), y.key === "ArrowLeft" && O(Math.max(0, b - 0.05));
+                y.key === "ArrowRight" && O(Math.min(1, p + 0.05)), y.key === "ArrowLeft" && O(Math.max(0, p - 0.05));
               },
               children: [
                 /* @__PURE__ */ s(
                   "div",
                   {
-                    className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${A || _ ? "h-1.5" : "h-1"}`,
+                    className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${L || _ ? "h-1.5" : "h-1"}`,
                     children: /* @__PURE__ */ s(
                       "div",
                       {
@@ -1130,7 +1130,7 @@ const $a = (e) => {
                 /* @__PURE__ */ s(
                   "div",
                   {
-                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${A || _ ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
+                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${L || _ ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
                     style: { left: `${G}%` }
                   }
                 )
@@ -1241,7 +1241,7 @@ const $a = (e) => {
     {
       ref: f,
       "data-testid": u,
-      className: k(
+      className: N(
         "relative w-[280px] select-none overflow-hidden rounded-[24px] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]",
         g ? "bg-[#1e2330]" : "bg-white"
       ),
@@ -1253,7 +1253,7 @@ const $a = (e) => {
           c.trim() !== "" && /* @__PURE__ */ s(
             "p",
             {
-              className: k("mb-0.5 truncate text-base font-medium", {
+              className: N("mb-0.5 truncate text-base font-medium", {
                 "text-black": !g,
                 "text-white/30": g && x,
                 "text-white": g && !x
@@ -1263,7 +1263,7 @@ const $a = (e) => {
           ),
           /* @__PURE__ */ h("div", { className: "flex flex-wrap items-center gap-1", children: [
             we(r, {
-              className: k(
+              className: N(
                 "size-5 shrink-0",
                 g ? "text-white/55" : "text-black/55"
               ),
@@ -1272,7 +1272,7 @@ const $a = (e) => {
             i != null && i !== "" && /* @__PURE__ */ s(
               "span",
               {
-                className: k(
+                className: N(
                   "text-xs font-medium",
                   g ? "text-white/55" : "text-black/55"
                 ),
@@ -1547,7 +1547,7 @@ const Ns = ({
     {
       "data-testid": m,
       "data-group-position": a,
-      className: k(
+      className: N(
         // Defaults describe a 280px-wide document / audio / link
         // bubble: that width matches the mobile chat attachment and
         // the 8px / 16px inset matches `--str-chat__spacing-2
@@ -1581,7 +1581,7 @@ const Ns = ({
         f ? /* @__PURE__ */ s(
           "p",
           {
-            className: k(
+            className: N(
               // No `text-*` / `font-*` overrides here — caption inherits
               // the same font family + size as `.str-chat__message-text`
               // so it matches the surrounding `CustomMessage` bubbles.
@@ -1613,7 +1613,7 @@ const Ns = ({
       a.stopPropagation(), e();
     },
     "aria-label": n,
-    className: k(
+    className: N(
       "flex size-6 items-center justify-center rounded-full text-white",
       t === "overlay" ? "bg-[#121110]/85 backdrop-blur" : "bg-white/15 hover:bg-white/25"
     ),
@@ -1747,13 +1747,13 @@ const gr = {
   const d = n ?? t ?? "File", m = fr(a, t, r), f = /* @__PURE__ */ s(
     "div",
     {
-      className: k(
+      className: N(
         "flex size-10 shrink-0 items-center justify-center rounded-sm",
         pr[e]
       ),
       "aria-hidden": !0,
       children: we(a, {
-        className: k("size-6", br[e]),
+        className: N("size-6", br[e]),
         weight: "regular"
       })
     }
@@ -1762,7 +1762,7 @@ const gr = {
     m ? /* @__PURE__ */ s(
       "p",
       {
-        className: k(
+        className: N(
           "truncate text-xs leading-4",
           gr[e]
         ),
@@ -1775,7 +1775,7 @@ const gr = {
       type: "button",
       onClick: i,
       "aria-label": l,
-      className: k(
+      className: N(
         "flex min-w-0 flex-1 items-center gap-3 rounded-sm text-left transition-colors",
         e === "dark" ? "hover:bg-white/[0.04]" : "hover:bg-black/[0.04]"
       ),
@@ -1855,19 +1855,19 @@ const vr = ({
     mimeType: r,
     title: i,
     items: l
-  }), x = (p) => {
-    if ((m == null ? void 0 : m(p)) === !1) return;
-    const b = c[p];
-    if (!b) return;
-    const v = b.filename ?? re(b.src);
-    Ss(b.src, v);
+  }), x = (b) => {
+    if ((m == null ? void 0 : m(b)) === !1) return;
+    const p = c[b];
+    if (!p) return;
+    const v = p.filename ?? re(p.src);
+    Ss(p.src, v);
   };
   if (c.length === 0)
     return null;
   const w = /* @__PURE__ */ s(
     "span",
     {
-      className: k(
+      className: N(
         "flex size-8 items-center justify-center rounded-full",
         u === "dark" ? "text-white/70" : "text-black/70"
       ),
@@ -1882,16 +1882,16 @@ const vr = ({
       text: o,
       groupPosition: d,
       "data-testid": "file-attachment",
-      children: /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: c.map((p, b) => /* @__PURE__ */ s(
+      children: /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: c.map((b, p) => /* @__PURE__ */ s(
         xr,
         {
           variant: u,
-          item: p,
-          index: b,
+          item: b,
+          index: p,
           onActivate: x,
-          trailingAction: g && b === 0 ? /* @__PURE__ */ s(Te, { onClick: f, variant: "inline" }) : w
+          trailingAction: g && p === 0 ? /* @__PURE__ */ s(Te, { onClick: f, variant: "inline" }) : w
         },
-        `${p.src}-${b}`
+        `${b.src}-${p}`
       )) })
     }
   );
@@ -1942,7 +1942,7 @@ const vr = ({
       }));
     },
     [o, e, t, l]
-  ), f = r ?? n !== "pill", g = { className: k(
+  ), f = r ?? n !== "pill", g = { className: N(
     n === "pill" ? "size-4" : "size-5",
     "shrink-0"
   ), weight: "bold" };
@@ -1953,7 +1953,7 @@ const vr = ({
       onClick: m,
       disabled: o,
       "aria-label": a,
-      className: k(
+      className: N(
         "flex size-8 shrink-0 items-center justify-center rounded-full transition-colors disabled:opacity-70",
         {
           dark: "text-white/70 hover:bg-white/[0.08] hover:text-white",
@@ -1993,7 +1993,7 @@ const vr = ({
       onClick: m,
       disabled: o,
       "aria-label": f ? a : void 0,
-      className: k(
+      className: N(
         "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full px-4 text-sm font-medium leading-none transition-colors disabled:opacity-70",
         i === "dark" ? "bg-[#121110] text-white hover:bg-[#2a2928]" : "bg-white text-[#121110] hover:bg-white/90"
       ),
@@ -2202,7 +2202,7 @@ const vr = ({
   if (i === 0) return null;
   const l = e.slice(0, Math.min(i, n)), o = i - l.length, d = (f, u, g) => {
     var x;
-    const c = k(
+    const c = N(
       kr,
       "h-full w-full",
       (x = Cr[l.length]) == null ? void 0 : x[u]
@@ -2213,7 +2213,7 @@ const vr = ({
         type: "button",
         onClick: () => t(u),
         "aria-label": f.ariaLabel ?? `Open media ${u + 1}`,
-        className: k(c, "cursor-zoom-in"),
+        className: N(c, "cursor-zoom-in"),
         children: [
           f.content,
           g
@@ -2236,7 +2236,7 @@ const vr = ({
   }), l.length === 1 ? /* @__PURE__ */ s(
     "div",
     {
-      className: k(
+      className: N(
         a ? Er : "aspect-square w-full",
         r
       ),
@@ -2246,7 +2246,7 @@ const vr = ({
   ) : l.length === 2 ? /* @__PURE__ */ s(
     "div",
     {
-      className: k(
+      className: N(
         "grid aspect-[16/9] w-full grid-cols-2 gap-0.5",
         r
       ),
@@ -2255,7 +2255,7 @@ const vr = ({
   ) : l.length === 3 ? /* @__PURE__ */ h(
     "div",
     {
-      className: k(
+      className: N(
         "grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5",
         r
       ),
@@ -2268,7 +2268,7 @@ const vr = ({
   ) : /* @__PURE__ */ s(
     "div",
     {
-      className: k(
+      className: N(
         // 379x286 is the content box of Figma's 383x290 stacked-media
         // card (`attachment-single-image` 1973:13863) once its 2px
         // frame is removed. Pinning the aspect on the container — as
@@ -2404,17 +2404,17 @@ const vr = ({
 }) => {
   const m = Ar({ src: t, alt: n, items: r }), f = Ae(e), { viewerOpen: u, viewerIndex: g, handleActivate: c, closeViewer: x } = Le(
     d
-  ), w = m.length === 1, p = Rr(w ? m[0] : void 0);
+  ), w = m.length === 1, b = Rr(w ? m[0] : void 0);
   if (m.length === 0)
     return null;
-  const b = m.map(
+  const p = m.map(
     (v, _) => Tr({
       item: v,
       index: _,
       totalCount: m.length,
       fallbackLoading: o,
-      imgRef: w ? p.imgRef : void 0,
-      onLoad: w ? p.onLoad : void 0
+      imgRef: w ? b.imgRef : void 0,
+      onLoad: w ? b.onLoad : void 0
     })
   );
   return /* @__PURE__ */ h(
@@ -2432,9 +2432,9 @@ const vr = ({
         /* @__PURE__ */ s("div", { className: "relative", children: /* @__PURE__ */ s(
           Ts,
           {
-            tiles: b,
+            tiles: p,
             onTileActivate: c,
-            singleAspectRatio: w ? p.ratio : void 0
+            singleAspectRatio: w ? b.ratio : void 0
           }
         ) }),
         /* @__PURE__ */ s(
@@ -2545,10 +2545,10 @@ const vr = ({
 }) => {
   const f = Ae(e), u = $r({ src: t, filename: n, fileSize: a, title: r, items: i }), { viewerOpen: g, viewerIndex: c, handleActivate: x, closeViewer: w } = Le(
     d
-  ), p = e === "composer" && !!m;
+  ), b = e === "composer" && !!m;
   if (u.length === 0)
     return null;
-  const b = u.map((v) => ({
+  const p = u.map((v) => ({
     src: v.src,
     filename: v.filename ?? re(v.src)
   }));
@@ -2561,13 +2561,13 @@ const vr = ({
       "data-testid": "pdf-attachment",
       children: [
         /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: u.map((v, _) => {
-          const N = v.filename ?? re(v.src), A = p && _ === 0 ? /* @__PURE__ */ s(Te, { onClick: m, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ s(
+          const k = v.filename ?? re(v.src), L = b && _ === 0 ? /* @__PURE__ */ s(Te, { onClick: m, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ s(
             Es,
             {
               url: v.src,
-              filename: N,
+              filename: k,
               variant: "inline",
-              label: `Download ${N}`,
+              label: `Download ${k}`,
               tone: f
             }
           );
@@ -2578,7 +2578,7 @@ const vr = ({
               item: v,
               index: _,
               onActivate: x,
-              trailingAction: A
+              trailingAction: L
             },
             `${v.src}-${_}`
           );
@@ -2587,7 +2587,7 @@ const vr = ({
           Br,
           {
             open: g,
-            items: b,
+            items: p,
             initialIndex: c,
             onClose: w
           }
@@ -2733,8 +2733,8 @@ const vr = ({
   );
   if (f.length === 0)
     return null;
-  const p = f.map(
-    (b, v) => Wr(b, v, f.length)
+  const b = f.map(
+    (p, v) => Wr(p, v, f.length)
   );
   return /* @__PURE__ */ h(
     Ie,
@@ -2744,7 +2744,7 @@ const vr = ({
       groupPosition: o,
       "data-testid": "video-attachment",
       children: [
-        /* @__PURE__ */ s("div", { className: "relative", children: /* @__PURE__ */ s(Ts, { tiles: p, onTileActivate: x }) }),
+        /* @__PURE__ */ s("div", { className: "relative", children: /* @__PURE__ */ s(Ts, { tiles: b, onTileActivate: x }) }),
         /* @__PURE__ */ s(
           Ms,
           {
@@ -2803,7 +2803,7 @@ const vr = ({
 function ii(e) {
   return _e(zs)[e] ?? ri[e];
 }
-const oi = F.lazy(() => import("./Card-qS17qnN0.js")), li = F.lazy(() => import("./Card-DPKAKVEP.js")), ci = () => /* @__PURE__ */ s(
+const oi = F.lazy(() => import("./Card-qS17qnN0.js")), li = F.lazy(() => import("./Card-C0e9vL3X.js")), ci = () => /* @__PURE__ */ s(
   "div",
   {
     className: "w-[280px] min-h-[200px] animate-pulse rounded-md bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]",
@@ -2887,7 +2887,7 @@ const oi = F.lazy(() => import("./Card-qS17qnN0.js")), li = F.lazy(() => import(
     "button",
     {
       type: "button",
-      className: k("message-vote-button focus-ring", {
+      className: N("message-vote-button focus-ring", {
         "message-vote-button--selected": e === "up"
       }),
       onClick: t,
@@ -2901,7 +2901,7 @@ const oi = F.lazy(() => import("./Card-qS17qnN0.js")), li = F.lazy(() => import(
     "button",
     {
       type: "button",
-      className: k("message-vote-button focus-ring", {
+      className: N("message-vote-button focus-ring", {
         "message-vote-button--selected": e === "down"
       }),
       onClick: n,
@@ -3032,7 +3032,7 @@ const yi = {
     secondary: "bg-black/[0.06] text-[#121110] hover:bg-black/10"
   }
 }, Ni = ({ variant: e, cta: t }) => {
-  const n = t.variant ?? "primary", a = k(
+  const n = t.variant ?? "primary", a = N(
     "mt-2 inline-flex h-10 w-full items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors",
     yi[e][n]
   ), r = _t(t.href);
@@ -3072,59 +3072,60 @@ const yi = {
   light: "bg-black/15"
 }, yt = ({
   variant: e,
-  chinTextColor: t,
-  title: n,
-  placeholderTitle: a,
-  description: r,
-  url: i,
-  appIcon: l,
-  cta: o,
-  trailingAction: d,
-  isLoading: m = !1
+  ctaSurface: t,
+  chinTextColor: n,
+  title: a,
+  placeholderTitle: r,
+  description: i,
+  url: l,
+  appIcon: o,
+  cta: d,
+  trailingAction: m,
+  isLoading: f = !1
 }) => {
-  const f = e === "dark", u = n ?? (f ? a : void 0) ?? "", g = u.trim() !== "", c = r != null && r.trim() !== "", x = typeof i == "string" ? i.trim() : "", w = x !== "", p = o != null;
-  if (!m && !g && !c && !w && !p)
+  const u = e === "dark", g = a ?? (u ? r : void 0) ?? "", c = g.trim() !== "", x = i != null && i.trim() !== "", w = typeof l == "string" ? l.trim() : "", b = w !== "", p = d != null;
+  if (!f && !c && !x && !b && !p)
     return null;
-  const b = f && !n, v = k(
+  const v = u && !a, _ = N(
     "line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.28px]",
-    t == null && (b ? Ci : ki[e])
-  ), _ = k(
+    n == null && (v ? Ci : ki[e])
+  ), k = N(
     "truncate text-[12px] leading-4 tracking-[0.24px]",
-    t == null && Si[e]
+    n == null && Si[e]
   );
-  if (m) {
-    const A = k(
+  if (f) {
+    const T = N(
       "animate-pulse rounded",
       Ei[e]
     );
     return /* @__PURE__ */ s("div", { className: "shrink-0 px-4 py-3", children: /* @__PURE__ */ h("div", { className: "flex min-w-0 flex-col gap-[2px]", children: [
-      /* @__PURE__ */ s("div", { className: k("h-5 w-3/4", A), "aria-hidden": !0 }),
-      /* @__PURE__ */ s("div", { className: k("h-4 w-1/2", A), "aria-hidden": !0 })
+      /* @__PURE__ */ s("div", { className: N("h-5 w-3/4", T), "aria-hidden": !0 }),
+      /* @__PURE__ */ s("div", { className: N("h-4 w-1/2", T), "aria-hidden": !0 })
     ] }) });
   }
-  const N = t ? { color: t } : void 0;
+  const L = n ? { color: n } : void 0;
   return /* @__PURE__ */ h("div", { className: "shrink-0 px-4 py-3", children: [
     /* @__PURE__ */ h("div", { className: "flex items-end gap-3", children: [
       /* @__PURE__ */ h("div", { className: "flex min-w-0 flex-1 flex-col gap-[2px]", children: [
-        g && /* @__PURE__ */ h("div", { className: "flex min-w-0 items-center gap-2", children: [
-          l ? /* @__PURE__ */ s("span", { className: "shrink-0", children: l }) : null,
+        c && /* @__PURE__ */ h("div", { className: "flex min-w-0 items-center gap-2", children: [
+          o ? /* @__PURE__ */ s("span", { className: "shrink-0", children: o }) : null,
           /* @__PURE__ */ s(
             "p",
             {
-              className: k("min-w-0", v),
-              style: N,
-              children: u
+              className: N("min-w-0", _),
+              style: L,
+              children: g
             }
           )
         ] }),
-        c && /* @__PURE__ */ s("p", { className: _, style: N, children: r }),
-        !p && w && /* @__PURE__ */ s("p", { className: _, style: N, children: x })
+        x && /* @__PURE__ */ s("p", { className: k, style: L, children: i }),
+        !p && b && /* @__PURE__ */ s("p", { className: k, style: L, children: w })
       ] }),
-      d && /* @__PURE__ */ s("div", { className: "shrink-0", children: d })
+      m && /* @__PURE__ */ s("div", { className: "shrink-0", children: m })
     ] }),
-    o && /* @__PURE__ */ s(Ni, { variant: e, cta: o })
+    d && /* @__PURE__ */ s(Ni, { variant: t ?? e, cta: d })
   ] });
-}, Ii = "Loading link preview", Ti = k(
+}, Ii = "Loading link preview", Ti = N(
   "relative w-[290px] select-none overflow-hidden",
   // 20px corners — no token exists for it in the component-library preset,
   // whose radius scale is sm .5rem / md 1rem / lg 1.5rem / xl 4rem.
@@ -3143,7 +3144,7 @@ const yi = {
   busy: f = !1,
   "data-testid": u
 }) => {
-  const g = n != null || a != null, c = k(
+  const g = n != null || a != null, c = N(
     "messaging-link-card",
     Ti,
     m ? Ai : "block",
@@ -3168,7 +3169,7 @@ const yi = {
     // tailwind preset — outline-none + a black 2px focus-visible ring
     // with offset, so keyboard users can see the focused card.
     g ? "cursor-pointer no-underline focus-ring" : null
-  ), x = f ? { role: "status", "aria-busy": !0, "aria-label": Ii } : void 0, w = d ? { "--accent": d } : void 0, p = l ? /* @__PURE__ */ s("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: l }) : null;
+  ), x = f ? { role: "status", "aria-busy": !0, "aria-label": Ii } : void 0, w = d ? { "--accent": d } : void 0, b = l ? /* @__PURE__ */ s("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: l }) : null;
   return n ? /* @__PURE__ */ h(
     "a",
     {
@@ -3184,7 +3185,7 @@ const yi = {
       ...x,
       children: [
         t,
-        p
+        b
       ]
     }
   ) : a ? /* @__PURE__ */ h(
@@ -3196,12 +3197,12 @@ const yi = {
       "aria-label": r,
       "data-testid": u,
       "data-variant": e,
-      className: k(c, "text-left"),
+      className: N(c, "text-left"),
       style: w,
       ...x,
       children: [
         t,
-        p
+        b
       ]
     }
   ) : /* @__PURE__ */ h(
@@ -3215,7 +3216,7 @@ const yi = {
       ...x,
       children: [
         t,
-        p
+        b
       ]
     }
   );
@@ -3253,7 +3254,7 @@ const yi = {
   ) }) : /* @__PURE__ */ h(
     "div",
     {
-      className: k(
+      className: N(
         // `flex-1 min-h-0` inside the shell's 250px column: the hero takes
         // every pixel the chin doesn't, which is 168px at a two-line title
         // and 188px at one.
@@ -3270,7 +3271,7 @@ const yi = {
           /* @__PURE__ */ s(
             "div",
             {
-              className: k(
+              className: N(
                 "h-full w-full animate-pulse",
                 Jt[e]
               ),
@@ -3314,7 +3315,7 @@ const yi = {
         ) : /* @__PURE__ */ s(
           "div",
           {
-            className: k(
+            className: N(
               "flex h-full w-full items-center justify-center",
               Jt[e]
             ),
@@ -3358,6 +3359,7 @@ function Ct({
     thumbnailUrl: o ? void 0 : r,
     accentHex: c,
     chinTextColor: x,
+    surface: f ? "light" : e,
     isLoading: n === "loading",
     onImageError: m
   };
@@ -3379,7 +3381,7 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
   onEditClick: c,
   dismissLabel: x = "Dismiss attachment"
 }) => {
-  const w = o === "classic", p = Me(r, l), b = Ct({
+  const w = o === "classic", b = Me(r, l), p = Ct({
     variant: "dark",
     accentColor: f,
     status: u,
@@ -3393,9 +3395,9 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
       type: "button",
       onClick: g,
       "aria-label": x,
-      className: k(
+      className: N(
         Oi,
-        !p && zi
+        !b && zi
       ),
       children: /* @__PURE__ */ s(ot, { className: "size-3", weight: "bold" })
     }
@@ -3409,7 +3411,7 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
       children: /* @__PURE__ */ s(oa, { className: "size-5", weight: "regular" })
     }
   ) : void 0;
-  return p && !b.isLoading ? /* @__PURE__ */ s(Fe, { variant: "dark", bgClassName: kt, children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2 pr-3", children: [
+  return b && !p.isLoading ? /* @__PURE__ */ s(Fe, { variant: "dark", bgClassName: kt, children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2 pr-3", children: [
     /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ s(
       $e,
       {
@@ -3425,28 +3427,29 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
     {
       variant: "dark",
       fixedHeight: !w,
-      accentHex: b.accentHex,
-      busy: b.isLoading,
+      accentHex: p.accentHex,
+      busy: p.isLoading,
       topRight: w ? v : void 0,
       children: [
         !w && /* @__PURE__ */ s(
           $e,
           {
             variant: "dark",
-            thumbnailUrl: b.thumbnailUrl,
+            thumbnailUrl: p.thumbnailUrl,
             sourceUrl: l,
             title: e,
             mimeType: r,
             topRight: v,
-            isLoading: b.isLoading,
-            onImageError: b.onImageError
+            isLoading: p.isLoading,
+            onImageError: p.onImageError
           }
         ),
         /* @__PURE__ */ s(
           yt,
           {
-            chinTextColor: b.chinTextColor,
+            chinTextColor: p.chinTextColor,
             variant: "dark",
+            ctaSurface: p.surface,
             title: e,
             placeholderTitle: t,
             description: n,
@@ -3454,7 +3457,7 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
             appIcon: d,
             cta: m,
             trailingAction: _,
-            isLoading: b.isLoading
+            isLoading: p.isLoading
           }
         )
       ]
@@ -3478,7 +3481,7 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
         "data-testid": "link-card-tail",
         "data-variant": t === "sender" ? "dark" : "light",
         style: e ? { "--accent": e } : void 0,
-        className: k(
+        className: N(
           "messaging-link-card-tail",
           t === "receiver" && "messaging-link-card-tail--received"
         )
@@ -3500,11 +3503,11 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
   onClick: u,
   groupPosition: g = "single"
 }) => {
-  const c = Nt(a, i), x = _t(n), w = d == null && x != null && !c ? x : void 0, p = d == null && !c ? u : void 0, b = f !== "loading" && Me(a, i) ? kt : void 0, v = d && u ? {
+  const c = Nt(a, i), x = _t(n), w = d == null && x != null && !c ? x : void 0, b = d == null && !c ? u : void 0, p = f !== "loading" && Me(a, i) ? kt : void 0, v = d && u ? {
     ...d,
     onClick: () => {
-      var N;
-      u(), (N = d.onClick) == null || N.call(d);
+      var k;
+      u(), (k = d.onClick) == null || k.call(d);
     }
   } : d, _ = Ct({
     variant: "light",
@@ -3520,18 +3523,18 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
     {
       accentHex: _.accentHex,
       side: "receiver",
-      visible: b == null && (g === "single" || g === "end"),
+      visible: p == null && (g === "single" || g === "end"),
       children: /* @__PURE__ */ h(
         Fe,
         {
           variant: "light",
           href: w,
-          onClick: p,
+          onClick: b,
           ariaLabel: e ?? "Open attachment preview",
-          fixedHeight: l === "featured" && b == null,
+          fixedHeight: l === "featured" && p == null,
           accentHex: _.accentHex,
           busy: _.isLoading,
-          bgClassName: b,
+          bgClassName: p,
           "data-testid": "link-attachment",
           children: [
             l === "featured" && /* @__PURE__ */ s(
@@ -3551,6 +3554,7 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
               {
                 chinTextColor: _.chinTextColor,
                 variant: "light",
+                ctaSurface: _.surface,
                 title: e,
                 description: t,
                 url: n,
@@ -3580,7 +3584,7 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
   onClick: g,
   groupPosition: c = "single"
 }) => {
-  const x = Nt(r, l), w = _t(a), p = m == null && w != null && !x ? w : void 0, b = m == null && !x && p != null ? g : void 0, v = u !== "loading" && Me(r, l), _ = Ct({
+  const x = Nt(r, l), w = _t(a), b = m == null && w != null && !x ? w : void 0, p = m == null && !x && b != null ? g : void 0, v = u !== "loading" && Me(r, l), _ = Ct({
     variant: "dark",
     accentColor: f,
     status: u,
@@ -3599,8 +3603,8 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
         Fe,
         {
           variant: "dark",
-          href: p,
-          onClick: b,
+          href: b,
+          onClick: p,
           fixedHeight: o === "featured" && !v,
           accentHex: _.accentHex,
           busy: _.isLoading,
@@ -3623,6 +3627,7 @@ const Oi = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
               {
                 chinTextColor: _.chinTextColor,
                 variant: "dark",
+                ctaSurface: _.surface,
                 title: e,
                 placeholderTitle: t,
                 description: n,
@@ -3843,21 +3848,21 @@ const qi = ({
   var w;
   const r = Vs(n.attachments);
   if (r.length === 0) return null;
-  const i = Vi(r), l = (w = n.text) == null ? void 0 : w.trim(), o = r.find((p) => p.type === "link"), d = (o == null ? void 0 : o.type) === "link" ? es(o.attachments[0] ?? {}).url : void 0, m = l && Ui(l, d) ? void 0 : l;
+  const i = Vi(r), l = (w = n.text) == null ? void 0 : w.trim(), o = r.find((b) => b.type === "link"), d = (o == null ? void 0 : o.type) === "link" ? es(o.attachments[0] ?? {}).url : void 0, m = l && Ui(l, d) ? void 0 : l;
   let f = 0;
-  const u = [], g = m ? "middle" : e, c = (p, b, v) => {
+  const u = [], g = m ? "middle" : e, c = (b, p, v) => {
     const _ = t ? it.Sent : it.Received;
     u.push(
       /* @__PURE__ */ s(
         _,
         {
-          ...es(p),
+          ...es(b),
           groupPosition: v ? g : "middle"
         },
-        b
+        p
       )
     );
-  }, x = (p, b) => {
+  }, x = (b, p) => {
     const v = Hi(
       f,
       i,
@@ -3869,25 +3874,25 @@ const qi = ({
         {
           groupPosition: v,
           isMyMessage: t,
-          segment: p
+          segment: b
         },
-        b
+        p
       )
     );
   };
-  return r.forEach((p, b) => {
-    const v = b === r.length - 1;
-    if (p.type === "link") {
-      p.attachments.forEach((_, N) => {
+  return r.forEach((b, p) => {
+    const v = p === r.length - 1;
+    if (b.type === "link") {
+      b.attachments.forEach((_, k) => {
         c(
           _,
-          `link-${b}-${N}`,
-          v && N === p.attachments.length - 1
+          `link-${p}-${k}`,
+          v && k === b.attachments.length - 1
         );
       });
       return;
     }
-    x(p, `media-${b}`);
+    x(b, `media-${p}`);
   }), /* @__PURE__ */ h("div", { className: "str-chat__message-bubble-wrapper", children: [
     /* @__PURE__ */ h(
       "div",
@@ -3929,10 +3934,10 @@ const qi = ({
     message: c,
     renderText: x,
     threadList: w,
-    viewerLanguage: p,
-    onBroadcastClick: b,
+    viewerLanguage: b,
+    onBroadcastClick: p,
     resolvedBroadcastName: v
-  } = e, { client: _ } = Ee("CustomMessage"), { channel: N } = fe("CustomMessage"), { isUnlocking: A, onUnlockClick: L, onFetchSource: z, onDownloadClick: P } = ii("LockedAttachment"), [U, R] = $(!1), C = on(c.id), { selected: D, voteUp: S, voteDown: T } = La(c), {
+  } = e, { client: _ } = Ee("CustomMessage"), { channel: k } = fe("CustomMessage"), { isUnlocking: L, onUnlockClick: T, onFetchSource: z, onDownloadClick: P } = ii("LockedAttachment"), [U, R] = $(!1), C = on(c.id), { selected: D, voteUp: S, voteDown: A } = La(c), {
     Attachment: E = ln,
     EditMessageModal: B = cn,
     MessageActions: O,
@@ -3956,9 +3961,9 @@ const qi = ({
     () => Vs(V),
     [V]
   ), ie = ae(() => {
-    const me = bs({ message: c, viewerLanguage: p });
+    const me = bs({ message: c, viewerLanguage: b });
     return me === c.text ? c : { ...c, text: me };
-  }, [c, p]), Re = ee.length > 0, De = ee.reduce(
+  }, [c, b]), Re = ee.length > 0, De = ee.reduce(
     (me, ve) => me + ve.attachments.length,
     0
   ) === ((V == null ? void 0 : V.length) ?? 0), oe = ar({
@@ -3975,7 +3980,7 @@ const qi = ({
   const ue = !w && !!c.reply_count, le = !w && c.show_in_channel && c.parent_id, St = c.status === "failed" && ((Mt = c.error) == null ? void 0 : Mt.status) !== 403, Et = _n(c);
   let pe;
   St ? pe = () => m(c) : Et && (pe = () => R(!0));
-  const te = g(), Xs = k(
+  const te = g(), Xs = N(
     "str-chat__message str-chat__message-simple",
     `str-chat__message--${c.type}`,
     `str-chat__message--${c.status}`,
@@ -4005,7 +4010,7 @@ const qi = ({
     amountText: (Ft = c.metadata) == null ? void 0 : Ft.amount_text,
     detail: ($t = c.metadata) == null ? void 0 : $t.attachment_detail,
     paymentStatus: (Ut = c.metadata) == null ? void 0 : Ut.payment_status,
-    onFetchSource: z ? () => z(c, N) : void 0
+    onFetchSource: z ? () => z(c, k) : void 0
   };
   return /* @__PURE__ */ h(J, { children: [
     a && /* @__PURE__ */ s(
@@ -4046,7 +4051,7 @@ const qi = ({
           /* @__PURE__ */ s(
             "div",
             {
-              className: k("str-chat__message-inner", {
+              className: N("str-chat__message-inner", {
                 "str-chat__simple-message--error-failed": St || Et
               }),
               "data-testid": "message-inner",
@@ -4073,8 +4078,8 @@ const qi = ({
                   {
                     ...At,
                     isMine: !1,
-                    isUnlocking: A(c.id),
-                    onUnlockClick: () => L == null ? void 0 : L(c, N)
+                    isUnlocking: L(c.id),
+                    onUnlockClick: () => T == null ? void 0 : T(c, k)
                   }
                 ),
                 !te && O && /* @__PURE__ */ s(O, {})
@@ -4086,16 +4091,16 @@ const qi = ({
                     {
                       ...Lt,
                       isMine: !0,
-                      onPreviewClick: () => L ? L(c, N) : void 0
+                      onPreviewClick: () => T ? T(c, k) : void 0
                     }
                   ) : /* @__PURE__ */ s(
                     Oe,
                     {
                       ...Lt,
                       isMine: !1,
-                      isUnlocking: A(c.id),
-                      onUnlockClick: () => L ? L(c, N) : void 0,
-                      onDownloadClick: () => P ? P(c, N) : void 0
+                      isUnlocking: L(c.id),
+                      onUnlockClick: () => T ? T(c, k) : void 0,
+                      onDownloadClick: () => P ? P(c, k) : void 0
                     }
                   ),
                   !te && O && /* @__PURE__ */ s(O, {})
@@ -4170,14 +4175,14 @@ const qi = ({
               {
                 selected: D,
                 onVoteUp: S,
-                onVoteDown: T
+                onVoteDown: A
               }
             )
           ] }),
           /* @__PURE__ */ s(
             xi,
             {
-              onBroadcastClick: b,
+              onBroadcastClick: p,
               resolvedBroadcastName: v
             }
           ),
@@ -4445,15 +4450,15 @@ const qi = ({
       return;
     let c = u.offsetHeight;
     const x = () => {
-      const p = u.offsetHeight, b = p > c;
-      c = p;
+      const b = u.offsetHeight, p = b > c;
+      c = b;
       const v = Array.from(
         g.querySelectorAll(".str-chat__list")
-      ).find((N) => N.scrollHeight > N.clientHeight) ?? null, _ = v ? v.scrollHeight - v.scrollTop - v.clientHeight < no : !1;
+      ).find((k) => k.scrollHeight > k.clientHeight) ?? null, _ = v ? v.scrollHeight - v.scrollTop - v.clientHeight < no : !1;
       g.style.setProperty(
         "--messaging-composer-height",
-        `${p}px`
-      ), b && _ && v && (v.scrollTop = v.scrollHeight);
+        `${b}px`
+      ), p && _ && v && (v.scrollTop = v.scrollHeight);
     };
     if (x(), typeof ResizeObserver > "u")
       return;
@@ -4668,13 +4673,13 @@ const qi = ({
   var x, w;
   const { channel: t, channelConfig: n, thread: a } = fe(), { client: r } = Ee(), { typing: i = {} } = Ln(), { aiState: l } = Mn(t), o = _e(Hs);
   if (!e && o && go.has(l)) {
-    const p = bo(t, (x = r.user) == null ? void 0 : x.id);
+    const b = bo(t, (x = r.user) == null ? void 0 : x.id);
     return /* @__PURE__ */ s(
       as,
       {
-        avatarId: (p == null ? void 0 : p.id) ?? "ai-agent",
-        avatarName: (p == null ? void 0 : p.name) ?? (p == null ? void 0 : p.id) ?? "Agent",
-        avatarImage: p == null ? void 0 : p.image,
+        avatarId: (b == null ? void 0 : b.id) ?? "ai-agent",
+        avatarName: (b == null ? void 0 : b.name) ?? (b == null ? void 0 : b.id) ?? "Agent",
+        avatarImage: b == null ? void 0 : b.image,
         testId: "typing-indicator-ai"
       }
     );
@@ -4682,14 +4687,14 @@ const qi = ({
   if ((n == null ? void 0 : n.typing_events) === !1)
     return null;
   const m = e ? [] : Object.values(i).filter(
-    ({ parent_id: p, user: b }) => {
+    ({ parent_id: b, user: p }) => {
       var v;
-      return (b == null ? void 0 : b.id) !== ((v = r.user) == null ? void 0 : v.id) && !p;
+      return (p == null ? void 0 : p.id) !== ((v = r.user) == null ? void 0 : v.id) && !b;
     }
   ), f = e ? Object.values(i).filter(
-    ({ parent_id: p, user: b }) => {
+    ({ parent_id: b, user: p }) => {
       var v;
-      return (b == null ? void 0 : b.id) !== ((v = r.user) == null ? void 0 : v.id) && p === (a == null ? void 0 : a.id);
+      return (p == null ? void 0 : p.id) !== ((v = r.user) == null ? void 0 : v.id) && b === (a == null ? void 0 : a.id);
     }
   ) : [], u = e ? f : m;
   if (!u.length)
@@ -4760,7 +4765,7 @@ function bo(e, t) {
 const vo = () => null, xo = ({ className: e, message: t }) => /* @__PURE__ */ h(
   "div",
   {
-    className: k("flex items-center justify-center h-full", e),
+    className: N("flex items-center justify-center h-full", e),
     children: [
       /* @__PURE__ */ h("svg", { viewBox: "0 0 100 100", className: "size-8 fill-pebble", stroke: "none", children: [
         /* @__PURE__ */ s("circle", { cx: "6", cy: "50", r: "6", children: /* @__PURE__ */ s(
@@ -4822,13 +4827,13 @@ const wo = ({
   composerDisabled: c = !1,
   composerDisabledReason: x,
   showStarButton: w = !1,
-  chatbotVotingEnabled: p = !1,
-  renderChannelBanner: b,
+  chatbotVotingEnabled: b = !1,
+  renderChannelBanner: p,
   customChannelActions: v,
   renderChannelActions: _,
-  renderMessage: N,
-  viewerLanguage: A,
-  showChannelInfo: L = !0,
+  renderMessage: k,
+  viewerLanguage: L,
+  showChannelInfo: T = !0,
   onParticipantNameClick: z,
   onBroadcastClick: P,
   resolveBroadcastName: U,
@@ -4838,21 +4843,21 @@ const wo = ({
   Y(() => {
     S.current = P;
   }, [P]);
-  const T = q((G) => {
+  const A = q((G) => {
     var y;
     (y = S.current) == null || y.call(S, G);
-  }, []), E = P ? T : void 0, B = ni(
+  }, []), E = P ? A : void 0, B = ni(
     D,
     U
   ), O = C.state.messages.some(
     (G) => G.type !== "deleted"
-  ), j = b ? /* @__PURE__ */ s(F.Fragment, { children: b() }, "lt-channel-banner") : null, K = /* @__PURE__ */ s(
+  ), j = p ? /* @__PURE__ */ s(F.Fragment, { children: p() }, "lt-channel-banner") : null, K = /* @__PURE__ */ s(
     Ia,
     {
       className: "-mx-[var(--str-chat\\_\\_spacing-2)] px-[var(--str-chat\\_\\_spacing-2)] md:-mx-[min(var(--str-chat\\_\\_spacing-10),4%)] md:px-[min(var(--str-chat\\_\\_spacing-10),4%)]",
       onBack: e,
       showBackButton: t,
-      showChannelInfo: L,
+      showChannelInfo: T,
       showStarButton: w,
       onLeaveConversation: i,
       onBlockParticipant: l,
@@ -4872,14 +4877,14 @@ const wo = ({
         Zi,
         {
           ...G,
-          chatbotVotingEnabled: p,
-          viewerLanguage: A,
+          chatbotVotingEnabled: b,
+          viewerLanguage: L,
           onBroadcastClick: E
         }
       );
-      return !N || !y ? I : N(I, y);
+      return !k || !y ? I : k(I, y);
     },
-    [p, E, N, A]
+    [b, E, k, L]
   );
   return /* @__PURE__ */ s(Os.Provider, { value: B, children: /* @__PURE__ */ s(
     Dn,
@@ -4991,13 +4996,13 @@ const wo = ({
     onReportParticipantClick: c,
     showBlockParticipant: x = !0,
     showReportParticipant: w = !0,
-    composerDisabled: p = !1,
-    composerDisabledReason: b,
+    composerDisabled: b = !1,
+    composerDisabledReason: p,
     dmAgentEnabled: v,
     messageMetadata: _,
-    onMessageSent: N,
-    showStarButton: A = !1,
-    chatbotVotingEnabled: L = !1,
+    onMessageSent: k,
+    showStarButton: L = !1,
+    chatbotVotingEnabled: T = !1,
     renderChannelBanner: z,
     customChannelActions: P,
     renderChannelActions: U,
@@ -5005,7 +5010,7 @@ const wo = ({
     onMessageLinkClick: C,
     sendButton: D,
     attachmentPreviewList: S,
-    viewerLanguage: T,
+    viewerLanguage: A,
     showChannelInfo: E = !0,
     onParticipantNameClick: B,
     onBroadcastClick: O,
@@ -5028,9 +5033,9 @@ const wo = ({
           ...W,
           ...X && { skip_push: !0 }
         }, V = await e.sendMessage(ne, Z);
-        return N == null || N(V), V;
+        return k == null || k(V), V;
       },
-      [e, v, _, N]
+      [e, v, _, k]
     ), G = H(null);
     return Y(() => {
       if (!C) return;
@@ -5047,7 +5052,7 @@ const wo = ({
       "div",
       {
         ref: G,
-        className: k(
+        className: N(
           "messaging-channel-view h-full flex flex-col",
           d
         ),
@@ -5080,15 +5085,15 @@ const wo = ({
                 onReportParticipantClick: c,
                 showBlockParticipant: x,
                 showReportParticipant: w,
-                composerDisabled: p,
-                composerDisabledReason: b,
-                showStarButton: A,
-                chatbotVotingEnabled: L,
+                composerDisabled: b,
+                composerDisabledReason: p,
+                showStarButton: L,
+                chatbotVotingEnabled: T,
                 renderChannelBanner: z,
                 customChannelActions: P,
                 renderChannelActions: U,
                 renderMessage: R,
-                viewerLanguage: T,
+                viewerLanguage: A,
                 showChannelInfo: E,
                 onParticipantNameClick: B,
                 onBroadcastClick: O,
@@ -5135,13 +5140,13 @@ const Wo = ({
   viewerLanguage: c,
   renderChannelBanner: x,
   customChannelActions: w,
-  renderChannelActions: p,
-  onParticipantNameClick: b,
+  renderChannelActions: b,
+  onParticipantNameClick: p,
   onBroadcastClick: v,
   resolveBroadcastName: _,
-  renderMessage: N,
-  onMessageLinkClick: A,
-  showChannelInfo: L,
+  renderMessage: k,
+  onMessageLinkClick: L,
+  showChannelInfo: T,
   composerInput: z
 }) => {
   const {
@@ -5151,7 +5156,7 @@ const Wo = ({
     error: C,
     refreshConnection: D,
     service: S,
-    debug: T
+    debug: A
   } = ba(), [E, B] = $(null), [O, j] = $(null), [K, se] = $(!1), { showDeleteConversation: G = !0 } = e, y = H(l);
   y.current = l;
   const I = H(a);
@@ -5172,7 +5177,7 @@ const Wo = ({
     (async () => {
       var Re, De;
       try {
-        T && console.log(
+        A && console.log(
           "[MessagingShell] Loading initial conversation with:",
           i
         );
@@ -5185,7 +5190,7 @@ const Wo = ({
           { limit: 1 }
         );
         if (oe.length > 0) {
-          B(oe[0]), j(null), (Re = I.current) == null || Re.call(I, oe[0]), T && console.log(
+          B(oe[0]), j(null), (Re = I.current) == null || Re.call(I, oe[0]), A && console.log(
             "[MessagingShell] Initial conversation loaded:",
             oe[0].id
           );
@@ -5193,7 +5198,7 @@ const Wo = ({
         }
         const ue = y.current;
         if (!ue || !S) {
-          ee(), j("No conversation found with this account"), T && console.log(
+          ee(), j("No conversation found with this account"), A && console.log(
             "[MessagingShell] No conversation found for:",
             i
           );
@@ -5205,7 +5210,7 @@ const Wo = ({
             name: ue.name,
             phone: ue.phone
           });
-          B(le), j(null), (De = I.current) == null || De.call(I, le), T && console.log(
+          B(le), j(null), (De = I.current) == null || De.call(I, le), A && console.log(
             "[MessagingShell] Channel created and loaded:",
             le.id
           );
@@ -5222,7 +5227,7 @@ const Wo = ({
         ), ee(), Q.current || j("Failed to load conversation");
       }
     })();
-  }, [i, P, U, S, T]);
+  }, [i, P, U, S, A]);
   const X = H(r);
   X.current = r;
   const ne = q(() => {
@@ -5253,13 +5258,13 @@ const Wo = ({
       chatbotVotingEnabled: g,
       viewerLanguage: c,
       customChannelActions: w,
-      renderChannelActions: p,
-      onParticipantNameClick: b,
+      renderChannelActions: b,
+      onParticipantNameClick: p,
       onBroadcastClick: v,
       resolveBroadcastName: _,
-      renderMessage: N,
-      onMessageLinkClick: A,
-      showChannelInfo: L,
+      renderMessage: k,
+      onMessageLinkClick: L,
+      showChannelInfo: T,
       composerInput: z
     },
     E.id
@@ -5330,7 +5335,7 @@ const Ys = F.createContext({
       (P = t == null ? void 0 : t.state) == null ? void 0 : P.members,
       m == null ? void 0 : m.userID,
       t == null ? void 0 : t.type
-    ), w = gs(x == null ? void 0 : x.user), p = (U = x == null ? void 0 : x.user) == null ? void 0 : U.image, b = (() => {
+    ), w = gs(x == null ? void 0 : x.user), b = (U = x == null ? void 0 : x.user) == null ? void 0 : U.image, p = (() => {
       var D;
       const C = (D = t == null ? void 0 : t.state) == null ? void 0 : D.messages;
       if (C != null && C.length) {
@@ -5340,9 +5345,9 @@ const Ys = F.createContext({
     })(), _ = (() => {
       var E;
       const C = bs({
-        message: b,
+        message: p,
         viewerLanguage: d
-      }), { custom_type: D, attachment_content_type: S } = (b == null ? void 0 : b.metadata) || {};
+      }), { custom_type: D, attachment_content_type: S } = (p == null ? void 0 : p.metadata) || {};
       if (D === ce.TIP)
         return C || "Sent a tip";
       if (D === ce.PAID)
@@ -5354,15 +5359,15 @@ const Ys = F.createContext({
           return "🔒 Sent a locked attachment";
       }
       if (C) return C;
-      const T = (E = b == null ? void 0 : b.attachments) == null ? void 0 : E[0];
-      return T ? T.og_scrape_url ? T.og_scrape_url : T.type === "image" ? "📷 Sent an image" : T.type === "video" ? "🎥 Sent a video" : T.type === "audio" ? "🎵 Sent audio" : T.type === "file" ? "📎 Sent a file" : "📎 Sent an attachment" : "No messages yet";
-    })(), N = b != null && b.created_at ? Co(new Date(b.created_at)) : "", A = b ? Be(b) : !1, L = o ? o(b, _) : `${A ? "✨ " : ""}${_}`, z = n ?? 0;
+      const A = (E = p == null ? void 0 : p.attachments) == null ? void 0 : E[0];
+      return A ? A.og_scrape_url ? A.og_scrape_url : A.type === "image" ? "📷 Sent an image" : A.type === "video" ? "🎥 Sent a video" : A.type === "audio" ? "🎵 Sent audio" : A.type === "file" ? "📎 Sent a file" : "📎 Sent an attachment" : "No messages yet";
+    })(), k = p != null && p.created_at ? Co(new Date(p.created_at)) : "", L = p ? Be(p) : !1, T = o ? o(p, _) : `${L ? "✨ " : ""}${_}`, z = n ?? 0;
     return i && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
       channelId: t == null ? void 0 : t.id,
       isSelected: f,
       participantName: w,
       unreadCount: z,
-      hasTimestamp: !!N
+      hasTimestamp: !!k
     }), /* @__PURE__ */ s(
       "div",
       {
@@ -5370,7 +5375,7 @@ const Ys = F.createContext({
         tabIndex: 0,
         onClick: g,
         onKeyDown: c,
-        className: k(
+        className: N(
           "group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring rounded-[12px] [&+&]:mt-2",
           {
             "bg-black/[0.04]": f,
@@ -5384,7 +5389,7 @@ const Ys = F.createContext({
             {
               id: ((R = x == null ? void 0 : x.user) == null ? void 0 : R.id) || t.id || "unknown",
               name: w,
-              image: p,
+              image: b,
               size: 48,
               starred: u
             }
@@ -5394,7 +5399,7 @@ const Ys = F.createContext({
               /* @__PURE__ */ h(
                 "h3",
                 {
-                  className: k(
+                  className: N(
                     "text-sm font-medium truncate text-[#191918]"
                   ),
                   children: [
@@ -5403,10 +5408,10 @@ const Ys = F.createContext({
                   ]
                 }
               ),
-              N && /* @__PURE__ */ s("span", { className: "text-xs text-[#717070] flex-shrink-0", children: N })
+              k && /* @__PURE__ */ s("span", { className: "text-xs text-[#717070] flex-shrink-0", children: k })
             ] }),
             /* @__PURE__ */ h("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
-              /* @__PURE__ */ s("p", { className: "text-sm text-[#717070] flex-1 line-clamp-1", children: L }),
+              /* @__PURE__ */ s("p", { className: "text-sm text-[#717070] flex-1 line-clamp-1", children: T }),
               z > 0 && /* @__PURE__ */ s("span", { className: "bg-[#7f22fe] text-white text-[10px] rounded-full h-4 flex items-center justify-center p-1 min-w-4 text-center flex-shrink-0", children: z > 99 ? "99+" : z })
             ] })
           ] })
@@ -5434,16 +5439,16 @@ const So = { last_message_at: -1 }, Eo = F.memo(
     onMessageNewHandler: c,
     onMessageNew: x,
     onChannelVisible: w,
-    onAddedToChannel: p,
-    onChannelUpdated: b
+    onAddedToChannel: b,
+    onChannelUpdated: p
   }) => {
     const v = F.useRef(0);
     v.current++;
-    const { debug: _ = !1 } = lt(), N = F.useCallback(
-      (L) => {
-        for (const z of L)
+    const { debug: _ = !1 } = lt(), k = F.useCallback(
+      (T) => {
+        for (const z of T)
           _o(z);
-        return r ? r(L) : L;
+        return r ? r(T) : T;
       },
       [r]
     );
@@ -5452,7 +5457,7 @@ const So = { last_message_at: -1 }, Eo = F.memo(
       selectedChannelId: t == null ? void 0 : t.id,
       filters: n
     });
-    const A = F.useMemo(
+    const L = F.useMemo(
       () => ({
         selectedChannel: t,
         onChannelSelect: e,
@@ -5473,24 +5478,24 @@ const So = { last_message_at: -1 }, Eo = F.memo(
     return /* @__PURE__ */ s(
       "div",
       {
-        className: k(
+        className: N(
           "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
           l
         ),
-        children: /* @__PURE__ */ s("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ s(yo, { value: A, children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ s("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ s(yo, { value: L, children: /* @__PURE__ */ s(
           On,
           {
             filters: n,
             sort: i,
             options: { limit: 30 },
             allowNewMessagesFromUnfilteredChannels: a,
-            channelRenderFilterFn: N,
+            channelRenderFilterFn: k,
             lockChannelOrder: g,
             onMessageNewHandler: c,
             onMessageNew: x,
             onChannelVisible: w,
-            onAddedToChannel: p,
-            onChannelUpdated: b,
+            onAddedToChannel: b,
+            onChannelUpdated: p,
             Paginator: d,
             Preview: Ws,
             EmptyStateIndicator: o
@@ -5539,7 +5544,7 @@ const rs = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
   "div",
   {
     "data-dd-privacy": "mask",
-    className: k(
+    className: N(
       "relative px-4 py-3",
       "text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]",
       r
@@ -5584,7 +5589,7 @@ const rs = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     onClick: t,
     disabled: n,
     style: { backgroundColor: "#E6E5E3" },
-    className: k(
+    className: N(
       "w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors focus-ring",
       {
         "hover:brightness-95 active:brightness-90": !n,
@@ -5675,4 +5680,4 @@ export {
   fs as y,
   ut as z
 };
-//# sourceMappingURL=index-KC2xnb1K.js.map
+//# sourceMappingURL=index-DtTSu6m9.js.map