@linktr.ee/messaging-react 4.3.1-rc-1787559873 → 4.3.1-rc-1787564018

package/dist/{index-D0fG7q_k.js → index-B0knLCIZ.js}

@@ -2,9 +2,9 @@ import { jsx as s, jsxs as h, Fragment as G } from "react/jsx-runtime";
 import R, { createContext as Se, useMemo as re, useContext as he, useCallback as J, useState as $, useRef as j, useEffect as q, useId as Js, Suspense as Qs } from "react";
 import { StreamChatService as en } from "@linktr.ee/messaging-core";
 import { StreamChat as tn, LinkPreviewsManager as tt } from "stream-chat";
-import { Chat as sn, useChannelStateContext as be, useChatContext as Ge, DateSeparator as nn, useMessageContext as fe, MessageStatus as an, MessageErrorIcon as st, MessageText as Fe, areMessageUIPropsEqual as rn, useMessageReminder as on, useComponentContext as os, 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 Cn, useStateStore as Sn, MessageInput as $t, useMessageInputContext as kn, useMessageComposerHasSendableData as En, AttachmentPreviewList as In, QuotedMessagePreview as Tn, TextareaComposer as An, MessageTimestamp as qe, AIStates as Ke, useTypingContext as Rn, useAIState as Ln, Channel as Mn, WithComponents as Dn, Window as On, MessageList as Ut, ChannelList as Pn, InfiniteScroll as Bn } from "stream-chat-react";
+import { Chat as sn, useChannelStateContext as be, useChatContext as Ge, DateSeparator as nn, useMessageContext as fe, MessageStatus as an, MessageErrorIcon as st, MessageText as Fe, areMessageUIPropsEqual as rn, useMessageReminder as on, useComponentContext as os, 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 Nn, Poll as yn, useMessageComposer as Cn, useStateStore as Sn, MessageInput as $t, useMessageInputContext as kn, useMessageComposerHasSendableData as En, AttachmentPreviewList as In, QuotedMessagePreview as Tn, TextareaComposer as An, MessageTimestamp as qe, AIStates as Ke, useTypingContext as Rn, useAIState as Ln, Channel as Mn, WithComponents as Dn, Window as On, MessageList as Ut, ChannelList as Pn, InfiniteScroll as Bn } from "stream-chat-react";
 import { isOfficialChannel as ls, OFFICIAL_SENDER_USER_ID as Fn, MESSAGE_CUSTOM_TYPE as ce, isDmAgentSystemType as jt, isAgeSafetySystemType as zn, resolveRichCardImagePresentation as $n, selectEnabledFaqs as Un } from "@linktr.ee/messaging-taxonomy";
-import N from "classnames";
+import y from "classnames";
 import { StarIcon as nt, DotsThreeIcon as jn, SpinnerGapIcon as Oe, SignOutIcon as Hn, ProhibitInsetIcon as Ht, FlagIcon as cs, CurrencyDollarIcon as Vn, CaretRightIcon as ds, ArrowLeftIcon as Gn, GiftIcon as Yn, WarningCircleIcon as Wn, MegaphoneIcon as Xn, ChecksIcon as qn, CircleNotchIcon as ze, FileIcon as us, ImageIcon as Kn, SpeakerHighIcon as Zn, VideoCameraIcon as ms, FileMdIcon as Jn, FileTextIcon as Qn, FileZipIcon as ea, FilePptIcon as ta, FileCsvIcon as sa, FileXlsIcon as na, FileDocIcon as aa, FilePdfIcon as ra, XIcon as rt, PencilSimpleIcon as ia, DownloadSimpleIcon as $e, CaretLeftIcon as oa, PlayIcon as la, TrashSimpleIcon as ca, ArrowUpIcon as da, SparkleIcon as ua, ProhibitIcon as ma } from "@phosphor-icons/react";
 import { MessageActions as ha, DefaultDropdownActionButton as hs } from "stream-chat-react/experimental";
 const _e = {
@@ -53,7 +53,7 @@ const _e = {
     serviceConfig: !!n,
     capabilities: Object.keys(r)
   });
-  const [u, f] = $(null), [m, g] = $(null), [o, x] = $(!1), [_, b] = $(!1), [v, p] = $(null), y = j(!1), w = j(null), k = j(n);
+  const [u, f] = $(null), [m, g] = $(null), [o, x] = $(!1), [_, b] = $(!1), [v, p] = $(null), N = j(!1), w = j(null), k = j(n);
   k.current = n;
   const T = j(i);
   T.current = i;
@@ -121,7 +121,7 @@ const _e = {
       hasService: !!u,
       hasUser: !!t,
       userId: t == null ? void 0 : t.id,
-      isConnecting: y.current,
+      isConnecting: N.current,
       isConnected: o,
       dependencies: { service: !!u, userId: t == null ? void 0 : t.id }
     }), c)
@@ -130,7 +130,7 @@ const _e = {
       d("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    if (y.current) {
+    if (N.current) {
       d("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
@@ -142,7 +142,7 @@ const _e = {
       return;
     }
     (async () => {
-      d("🚀 STARTING USER CONNECTION", { userId: t.id }), y.current = !0, b(!0), p(null);
+      d("🚀 STARTING USER CONNECTION", { userId: t.id }), N.current = !0, b(!0), p(null);
       try {
         d("📞 CALLING SERVICE.CONNECTUSER", { userId: t.id });
         const H = await u.connectUser(t);
@@ -157,7 +157,7 @@ const _e = {
           error: X
         });
       } finally {
-        b(!1), y.current = !1, d("🔄 USER CONNECTION FINISHED", {
+        b(!1), N.current = !1, d("🔄 USER CONNECTION FINISHED", {
           userId: t.id,
           isConnected: o
         });
@@ -354,7 +354,7 @@ const ke = ({
     "div",
     {
       "aria-hidden": "true",
-      className: N(
+      className: y(
         "avatar-fallback flex h-full w-full items-center justify-center font-semibold select-none transition-colors"
       ),
       style: { fontSize: m, lineHeight: 1 },
@@ -364,7 +364,7 @@ const ke = ({
   return /* @__PURE__ */ h(
     "div",
     {
-      className: N("relative flex-shrink-0", a),
+      className: y("relative flex-shrink-0", a),
       style: {
         "--str-chat__avatar-size": `${n}px`,
         width: `${n}px`,
@@ -385,7 +385,7 @@ const ke = ({
           "div",
           {
             "data-testid": "avatar-ring",
-            className: N("h-full w-full", "bg-transparent"),
+            className: y("h-full w-full", "bg-transparent"),
             style: {
               ...o,
               ...c && {
@@ -401,7 +401,7 @@ const ke = ({
       ]
     }
   );
-}, _a = "https://linktr.ee/s/about/trust-center/report", ya = ({
+}, _a = "https://linktr.ee/s/about/trust-center/report", Na = ({
   channel: e,
   participant: t,
   showBlockParticipant: n = !0,
@@ -415,7 +415,7 @@ const ke = ({
   logLabel: f = "useChannelModerationActions"
 }) => {
   var I;
-  const { service: m, debug: g } = it(), o = (I = t == null ? void 0 : t.user) == null ? void 0 : I.id, x = !!(a && n && m && o), [_, b] = $(!1), [v, p] = $(null), [y, w] = $(!1), [k, T] = $(!1), A = x && ((v == null ? void 0 : v.participantId) !== o || (v == null ? void 0 : v.service) !== m);
+  const { service: m, debug: g } = it(), o = (I = t == null ? void 0 : t.user) == null ? void 0 : I.id, x = !!(a && n && m && o), [_, b] = $(!1), [v, p] = $(null), [N, w] = $(!1), [k, T] = $(!1), A = x && ((v == null ? void 0 : v.participantId) !== o || (v == null ? void 0 : v.service) !== m);
   return q(() => {
     if (!x || !m || !o) {
       b(!1), p(null);
@@ -442,11 +442,11 @@ const ke = ({
   }, [x, m, o, f]), {
     isParticipantBlocked: _,
     isCheckingBlockedStatus: A,
-    isLeaving: y,
+    isLeaving: N,
     isUpdatingBlockStatus: k,
     handleLeaveConversation: async () => {
       var E;
-      if (!y) {
+      if (!N) {
         c == null || c(), g && console.log(`[${f}] Leave conversation`, e.cid), w(!0);
         try {
           const C = ((E = e._client) == null ? void 0 : E.userID) ?? null;
@@ -497,7 +497,7 @@ const ke = ({
   "button",
   {
     type: "button",
-    className: N(
+    className: y(
       "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
@@ -505,7 +505,7 @@ const ke = ({
     ...a,
     children: n
   }
-), Na = ({
+), ya = ({
   channel: e,
   participant: t,
   showDeleteConversation: n = !0,
@@ -522,13 +522,13 @@ const ke = ({
   const [g, o] = $(!1), x = j(null), _ = Js(), b = J(() => o(!1), []), {
     isParticipantBlocked: v,
     isCheckingBlockedStatus: p,
-    isLeaving: y,
+    isLeaving: N,
     isUpdatingBlockStatus: w,
     handleLeaveConversation: k,
     handleBlockUser: T,
     handleUnblockUser: A,
     handleReportUser: D
-  } = ya({
+  } = Na({
     channel: e,
     participant: t,
     showBlockParticipant: a,
@@ -572,7 +572,7 @@ const ke = ({
       {
         id: _,
         "aria-label": "Conversation options",
-        className: N(
+        className: y(
           "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"
         ),
@@ -581,10 +581,10 @@ const ke = ({
             xe,
             {
               onClick: k,
-              disabled: y,
-              "aria-busy": y,
+              disabled: N,
+              "aria-busy": N,
               children: [
-                y ? /* @__PURE__ */ s(Oe, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ s(Hn, { className: "h-5 w-5" }),
+                N ? /* @__PURE__ */ s(Oe, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ s(Hn, { className: "h-5 w-5" }),
                 /* @__PURE__ */ s("span", { children: "Delete Conversation" })
               ]
             }
@@ -657,7 +657,7 @@ const ke = ({
       );
     },
     [(S = b.state) == null ? void 0 : S.members, v == null ? void 0 : v.userID, b.type]
-  ), y = xs(p == null ? void 0 : p.user), w = (I = p == null ? void 0 : p.user) == null ? void 0 : I.image, k = bs(b), T = Sa((E = b.data) == null ? void 0 : E.customer_tag) && (p == null ? void 0 : p.is_follower) === !0, A = a && k, D = T || A || !!_, B = async () => {
+  ), N = xs(p == null ? void 0 : p.user), w = (I = p == null ? void 0 : p.user) == null ? void 0 : I.image, k = bs(b), T = Sa((E = b.data) == null ? void 0 : E.customer_tag) && (p == null ? void 0 : p.is_follower) === !0, A = a && k, D = T || A || !!_, B = async () => {
     try {
       k ? await b.unpin() : await b.pin();
     } catch (M) {
@@ -671,7 +671,7 @@ const ke = ({
       ke,
       {
         id: ((C = p == null ? void 0 : p.user) == null ? void 0 : C.id) || b.id || "unknown",
-        name: y,
+        name: N,
         image: w,
         shape: "circle",
         size: 48,
@@ -681,12 +681,12 @@ const ke = ({
     /* @__PURE__ */ s(
       "span",
       {
-        className: N(
+        className: y(
           "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",
           D ? "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: y }),
+          /* @__PURE__ */ s("span", { className: "min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90", children: N }),
           D && /* @__PURE__ */ h("span", { className: "ml-2 flex gap-1", children: [
             T && /* @__PURE__ */ s(
               "span",
@@ -720,7 +720,7 @@ const ke = ({
   return /* @__PURE__ */ s(
     "div",
     {
-      className: N(
+      className: y(
         "@container bg-[linear-gradient(180deg,#FBFAF9_0%,rgba(251,250,249,0.92)_58%,rgba(251,250,249,0)_100%)]",
         e
       ),
@@ -728,7 +728,7 @@ const ke = ({
         /* @__PURE__ */ s("div", { className: "flex items-start", children: n && /* @__PURE__ */ s(
           "button",
           {
-            className: N(
+            className: y(
               Ze,
               "messaging-channel-view-back-button-mobile messaging-channel-view-back-button-desktop"
             ),
@@ -744,7 +744,7 @@ const ke = ({
           {
             type: "button",
             onClick: _,
-            "aria-label": `View details for ${y}`,
+            "aria-label": `View details for ${N}`,
             className: "group flex min-w-0 max-w-full appearance-none flex-col items-center border-0 bg-transparent px-2 focus-ring focus-visible:outline-none",
             children: L
           }
@@ -761,7 +761,7 @@ const ke = ({
               children: /* @__PURE__ */ s(
                 nt,
                 {
-                  className: N("size-5", {
+                  className: y("size-5", {
                     "text-[#FFD60A]": k,
                     "text-black/90": !k
                   }),
@@ -771,7 +771,7 @@ const ke = ({
             }
           ),
           x && (o !== void 0 ? o : /* @__PURE__ */ s(
-            Na,
+            ya,
             {
               channel: b,
               participant: p,
@@ -811,11 +811,11 @@ const Ta = {
   isUnlocking: () => !1
 }, Aa = {
   LockedAttachment: Ta
-}, ys = Se({}), Uo = ys.Provider;
+}, Ns = Se({}), Uo = Ns.Provider;
 function Ra(e) {
-  return he(ys)[e] ?? Aa[e];
+  return he(Ns)[e] ?? Aa[e];
 }
-const La = R.lazy(() => import("./Card-BzvDr-pU.js")), Ma = R.lazy(() => import("./Card-Bd_oNVXi.js")), Da = () => /* @__PURE__ */ s(
+const La = R.lazy(() => import("./Card-BzvDr-pU.js")), Ma = R.lazy(() => import("./Card-C-v4hEGd.js")), Da = () => /* @__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)]",
@@ -838,7 +838,7 @@ const La = R.lazy(() => import("./Card-BzvDr-pU.js")), Ma = R.lazy(() => import(
       }
     )
   }
-), Ns = (e) => {
+), ys = (e) => {
   var t;
   return ((t = e.metadata) == null ? void 0 : t.custom_type) === ce.PAID;
 }, Ue = (e) => {
@@ -855,14 +855,14 @@ const La = R.lazy(() => import("./Card-BzvDr-pU.js")), Ma = R.lazy(() => import(
   return lt(e) && ((t = e.metadata) == null ? void 0 : t.attachment_content_type) !== "text";
 }, Fa = (e) => {
   var t;
-  return Ns(e) && !!((t = e.metadata) != null && t.amount_text);
+  return ys(e) && !!((t = e.metadata) != null && t.amount_text);
 }, Yt = ({
   message: e,
   isMyMessage: t = !1,
   hasAttachment: n = !1
 }) => {
   var m;
-  const a = Ns(e), r = Ue(e);
+  const a = ys(e), r = Ue(e);
   if (!a && !r)
     return null;
   if (a) {
@@ -999,7 +999,7 @@ const La = R.lazy(() => import("./Card-BzvDr-pU.js")), Ma = R.lazy(() => import(
     /* @__PURE__ */ s(
       "span",
       {
-        className: N("sent-message-outbound-name", {
+        className: y("sent-message-outbound-name", {
           "underline [text-decoration-skip-ink:auto]": !!t
         }),
         "data-testid": "sent-message-outbound-status",
@@ -1102,7 +1102,7 @@ const er = {
   fullWidth: n = !0,
   standalone: a = !1
 }) => {
-  const r = t.variant ?? "primary", i = N(
+  const r = t.variant ?? "primary", i = y(
     "inline-flex h-10 items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors",
     n ? "w-full" : "min-w-0",
     !a && "mt-2",
@@ -1159,25 +1159,25 @@ const er = {
   const g = e === "dark", o = a ?? (g ? r : void 0) ?? "", x = o.trim() !== "", _ = i != null && i.trim() !== "", b = typeof l == "string" ? l.trim() : "", v = b !== "", p = u != null;
   if (!m && !x && !_ && !v && !p)
     return null;
-  const y = g && !a, w = N(
+  const N = g && !a, w = y(
     "line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.28px]",
-    n == null && (y ? sr : tr[e])
-  ), k = N(
+    n == null && (N ? sr : tr[e])
+  ), k = y(
     "truncate text-[12px] leading-4 tracking-[0.24px]",
     n == null && qt[e]
-  ), T = N(
+  ), T = y(
     "text-[12px] leading-4 tracking-[0.24px]",
     c <= 1 && "truncate",
     n == null && qt[e]
   );
   if (m) {
-    const B = N(
+    const B = y(
       "animate-pulse rounded",
       nr[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: N("h-5 w-3/4", B), "aria-hidden": !0 }),
-      /* @__PURE__ */ s("div", { className: N("h-4 w-1/2", B), "aria-hidden": !0 })
+      /* @__PURE__ */ s("div", { className: y("h-5 w-3/4", B), "aria-hidden": !0 }),
+      /* @__PURE__ */ s("div", { className: y("h-4 w-1/2", B), "aria-hidden": !0 })
     ] }) });
   }
   const A = n ? { color: n } : void 0, D = c > 1 ? {
@@ -1195,7 +1195,7 @@ const er = {
           /* @__PURE__ */ s(
             "p",
             {
-              className: N("min-w-0", w),
+              className: y("min-w-0", w),
               style: A,
               children: o
             }
@@ -1216,16 +1216,16 @@ const er = {
     ] }),
     u && /* @__PURE__ */ s(ks, { variant: t ?? e, cta: u })
   ] });
-}, ar = "Loading link preview", rr = N(
-  // Fluid width, capped by a channel-scoped token: default 395px. A read-only
+}, ar = "Loading link preview", rr = y(
+  // Fluid width, capped by a channel-scoped token: default 290px. A read-only
   // surface with no composer (the official channel) sets `--lt-msg-card-width`
   // on its root (see ChannelView). `w-full` fills the content column up to that
   // cap so a card never overflows a narrower viewport — it shrinks to fit.
-  "relative max-w-[var(--lt-msg-card-width,395px)] w-full select-none overflow-hidden",
+  "relative max-w-[var(--lt-msg-card-width,290px)] w-full 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.
   "rounded-[20px]"
-), ir = "flex h-[250px] flex-col", Ne = ({
+), ir = "flex h-[250px] flex-col", ye = ({
   variant: e,
   children: t,
   href: n,
@@ -1239,7 +1239,7 @@ const er = {
   busy: f = !1,
   "data-testid": m
 }) => {
-  const g = n != null || a != null, o = N(
+  const g = n != null || a != null, o = y(
     "messaging-link-card",
     rr,
     u ? ir : "block",
@@ -1292,7 +1292,7 @@ const er = {
       "aria-label": r,
       "data-testid": m,
       "data-variant": e,
-      className: N(o, "text-left"),
+      className: y(o, "text-left"),
       style: _,
       ...x,
       children: [
@@ -1391,7 +1391,7 @@ const Kt = {
   ) }) : /* @__PURE__ */ h(
     "div",
     {
-      className: N(
+      className: y(
         // `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.
@@ -1408,7 +1408,7 @@ const Kt = {
           /* @__PURE__ */ s(
             "div",
             {
-              className: N(
+              className: y(
                 "h-full w-full animate-pulse",
                 Kt[e]
               ),
@@ -1452,7 +1452,7 @@ const Kt = {
         ) : /* @__PURE__ */ s(
           "div",
           {
-            className: N(
+            className: y(
               "flex h-full w-full items-center justify-center",
               Kt[e]
             ),
@@ -1527,13 +1527,13 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
     thumbnailUrl: c,
     mimeType: i,
     sourceUrl: l
-  }), y = o ? /* @__PURE__ */ s(
+  }), N = o ? /* @__PURE__ */ s(
     "button",
     {
       type: "button",
       onClick: o,
       "aria-label": _,
-      className: N(
+      className: y(
         pr,
         !v && br
       ),
@@ -1549,7 +1549,7 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
       children: /* @__PURE__ */ s(ia, { className: "size-5", weight: "regular" })
     }
   ) : void 0;
-  return v && !p.isLoading ? /* @__PURE__ */ s(Ne, { variant: "dark", bgClassName: ht, children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2 pr-3", children: [
+  return v && !p.isLoading ? /* @__PURE__ */ s(ye, { variant: "dark", bgClassName: ht, 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(
       Ce,
       {
@@ -1559,15 +1559,15 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
         mimeType: i
       }
     ) }),
-    y && /* @__PURE__ */ s("div", { className: "shrink-0", children: y })
+    N && /* @__PURE__ */ s("div", { className: "shrink-0", children: N })
   ] }) }) : /* @__PURE__ */ h(
-    Ne,
+    ye,
     {
       variant: "dark",
       fixedHeight: !b,
       accentHex: p.accentHex,
       busy: p.isLoading,
-      topRight: b ? y : void 0,
+      topRight: b ? N : void 0,
       children: [
         !b && /* @__PURE__ */ s(
           Ce,
@@ -1577,7 +1577,7 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
             sourceUrl: l,
             title: e,
             mimeType: i,
-            topRight: y,
+            topRight: N,
             isLoading: p.isLoading,
             onImageError: p.onImageError
           }
@@ -1609,9 +1609,9 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
   children: a
 }) => n ? (
   // `isolate` keeps the tail's negative z-index from escaping behind the
-  // thread background; `w-fit` stops the wrapper from stretching in the
-  // composer's flex list.
-  /* @__PURE__ */ h("div", { className: "relative isolate w-fit", children: [
+  // thread background. Same width contract as `CardShell` (`w-full` up to
+  // the channel cap) so a short title cannot shrink the card.
+  /* @__PURE__ */ h("div", { className: "relative isolate w-full max-w-[var(--lt-msg-card-width,290px)]", children: [
     a,
     /* @__PURE__ */ s(
       "span",
@@ -1620,7 +1620,7 @@ const pr = "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: N(
+        className: y(
           "messaging-link-card-tail",
           t === "receiver" && "messaging-link-card-tail--received"
         )
@@ -1643,7 +1643,7 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
   onClick: g,
   groupPosition: o = "single"
 }) => {
-  const x = mt(r, c), _ = dt(a), b = u == null && _ != null && !x ? _ : void 0, v = u == null && !x ? g : void 0, p = m !== "loading" && Te(r, c) ? ht : void 0, y = u && g ? {
+  const x = mt(r, c), _ = dt(a), b = u == null && _ != null && !x ? _ : void 0, v = u == null && !x ? g : void 0, p = m !== "loading" && Te(r, c) ? ht : void 0, N = u && g ? {
     ...u,
     onClick: () => {
       var k;
@@ -1665,7 +1665,7 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
       side: "receiver",
       visible: p == null && (o === "single" || o === "end"),
       children: /* @__PURE__ */ h(
-        Ne,
+        ye,
         {
           variant: "light",
           href: b,
@@ -1700,7 +1700,7 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
                 descriptionLines: n,
                 url: a,
                 appIcon: d,
-                cta: y,
+                cta: N,
                 isLoading: w.isLoading
               }
             )
@@ -1726,7 +1726,7 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
   onClick: o,
   groupPosition: x = "single"
 }) => {
-  const _ = mt(i, l), b = dt(r), v = f == null && b != null && !_ ? b : void 0, p = f == null && !_ && v != null ? o : void 0, y = g !== "loading" && Te(i, l), w = Ye({
+  const _ = mt(i, l), b = dt(r), v = f == null && b != null && !_ ? b : void 0, p = f == null && !_ && v != null ? o : void 0, N = g !== "loading" && Te(i, l), w = Ye({
     variant: "dark",
     accentColor: m,
     status: g,
@@ -1740,17 +1740,17 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
     {
       accentHex: w.accentHex,
       side: "sender",
-      visible: !y && (x === "single" || x === "end"),
+      visible: !N && (x === "single" || x === "end"),
       children: /* @__PURE__ */ h(
-        Ne,
+        ye,
         {
           variant: "dark",
           href: v,
           onClick: p,
-          fixedHeight: d === "featured" && !y,
+          fixedHeight: d === "featured" && !N,
           accentHex: w.accentHex,
           busy: w.isLoading,
-          bgClassName: y ? ht : void 0,
+          bgClassName: N ? ht : void 0,
           children: [
             d === "featured" && /* @__PURE__ */ s(
               Ce,
@@ -1792,10 +1792,10 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
 }, _r = {
   dark: "bg-[#1e2330]",
   light: "bg-[#f2f1ef]"
-}, yr = {
+}, Nr = {
   dark: "text-white",
   light: "text-[#000000]"
-}, Nr = {
+}, yr = {
   dark: "border-white/[0.08]",
   light: "border-black/[0.08]"
 }, Cr = (e) => e === "dark" ? "sender" : "receiver", Sr = {
@@ -1829,7 +1829,7 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
     {
       "data-testid": u,
       "data-group-position": a,
-      className: N(
+      className: y(
         // 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
@@ -1853,9 +1853,9 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
         f && "pb-0",
         m,
         _r[e],
-        yr[e],
+        Nr[e],
         n && "border",
-        n && Nr[e],
+        n && yr[e],
         l
       ),
       children: [
@@ -1863,7 +1863,7 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
         f ? /* @__PURE__ */ s(
           "p",
           {
-            className: N(
+            className: y(
               // No `text-*` / `font-*` overrides here — caption inherits
               // the same font family + size as `.str-chat__message-text`
               // so it matches the surrounding `CustomMessage` bubbles.
@@ -1895,7 +1895,7 @@ const pr = "flex size-6 items-center justify-center rounded-full bg-[#121110] te
       a.stopPropagation(), e();
     },
     "aria-label": n,
-    className: N(
+    className: y(
       "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"
     ),
@@ -2029,13 +2029,13 @@ const Pr = {
   const d = n ?? t ?? "File", u = Or(a, t, r), f = /* @__PURE__ */ s(
     "div",
     {
-      className: N(
+      className: y(
         "flex size-10 shrink-0 items-center justify-center rounded-sm",
         Br[e]
       ),
       "aria-hidden": !0,
       children: Is(a, {
-        className: N("size-6", Fr[e]),
+        className: y("size-6", Fr[e]),
         weight: "regular"
       })
     }
@@ -2044,7 +2044,7 @@ const Pr = {
     u ? /* @__PURE__ */ s(
       "p",
       {
-        className: N(
+        className: y(
           "truncate text-xs leading-4",
           Pr[e]
         ),
@@ -2057,7 +2057,7 @@ const Pr = {
       type: "button",
       onClick: i,
       "aria-label": c,
-      className: N(
+      className: y(
         "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]"
       ),
@@ -2149,7 +2149,7 @@ const zr = ({
   const _ = /* @__PURE__ */ s(
     "span",
     {
-      className: N(
+      className: y(
         "flex size-8 items-center justify-center rounded-full",
         m === "dark" ? "text-white/70" : "text-black/70"
       ),
@@ -2224,7 +2224,7 @@ const zr = ({
       }));
     },
     [l, e, t, c]
-  ), f = r ?? n !== "pill", g = { className: N(
+  ), f = r ?? n !== "pill", g = { className: y(
     n === "pill" ? "size-4" : "size-5",
     "shrink-0"
   ), weight: "bold" };
@@ -2235,7 +2235,7 @@ const zr = ({
       onClick: u,
       disabled: l,
       "aria-label": a,
-      className: N(
+      className: y(
         "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",
@@ -2275,7 +2275,7 @@ const zr = ({
       onClick: u,
       disabled: l,
       "aria-label": f ? a : void 0,
-      className: N(
+      className: y(
         "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"
       ),
@@ -2483,7 +2483,7 @@ const zr = ({
   if (i === 0) return null;
   const c = e.slice(0, Math.min(i, n)), l = i - c.length, d = (f, m, g) => {
     var x;
-    const o = N(
+    const o = y(
       Gr,
       "h-full w-full",
       (x = Yr[c.length]) == null ? void 0 : x[m]
@@ -2494,7 +2494,7 @@ const zr = ({
         type: "button",
         onClick: () => t(m),
         "aria-label": f.ariaLabel ?? `Open media ${m + 1}`,
-        className: N(o, "cursor-zoom-in"),
+        className: y(o, "cursor-zoom-in"),
         children: [
           f.content,
           g
@@ -2517,7 +2517,7 @@ const zr = ({
   }), c.length === 1 ? /* @__PURE__ */ s(
     "div",
     {
-      className: N(
+      className: y(
         a ? Xr : "aspect-square w-full",
         r
       ),
@@ -2527,7 +2527,7 @@ const zr = ({
   ) : c.length === 2 ? /* @__PURE__ */ s(
     "div",
     {
-      className: N(
+      className: y(
         "grid aspect-[16/9] w-full grid-cols-2 gap-0.5",
         r
       ),
@@ -2536,7 +2536,7 @@ const zr = ({
   ) : c.length === 3 ? /* @__PURE__ */ h(
     "div",
     {
-      className: N(
+      className: y(
         "grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5",
         r
       ),
@@ -2549,7 +2549,7 @@ const zr = ({
   ) : /* @__PURE__ */ s(
     "div",
     {
-      className: N(
+      className: y(
         // 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
@@ -2685,9 +2685,9 @@ const zr = ({
   if (u.length === 0)
     return null;
   const v = u.map(
-    (p, y) => Kr({
+    (p, N) => Kr({
       item: p,
-      index: y,
+      index: N,
       totalCount: u.length,
       fallbackLoading: l,
       imgRef: _ ? b.imgRef : void 0,
@@ -2835,8 +2835,8 @@ const zr = ({
       groupPosition: l,
       "data-testid": "pdf-attachment",
       children: [
-        /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: m.map((p, y) => {
-          const w = p.filename ?? ie(p.src), k = b && y === 0 ? /* @__PURE__ */ s(Re, { onClick: u, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ s(
+        /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: m.map((p, N) => {
+          const w = p.filename ?? ie(p.src), k = b && N === 0 ? /* @__PURE__ */ s(Re, { onClick: u, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ s(
             Ms,
             {
               url: p.src,
@@ -2851,11 +2851,11 @@ const zr = ({
             {
               variant: f,
               item: p,
-              index: y,
+              index: N,
               onActivate: x,
               trailingAction: k
             },
-            `${p.src}-${y}`
+            `${p.src}-${N}`
           );
         }) }),
         /* @__PURE__ */ s(
@@ -3076,7 +3076,7 @@ function Qt(e) {
     status: "ready"
   };
 }
-function yi(e) {
+function Ni(e) {
   var t;
   return ot(e) ? null : e.type === "image" ? e.image_url || e.asset_url ? "image" : null : e.type === "video" && e.asset_url ? "video" : e.type === "audio" && e.asset_url ? "audio" : e.type === "file" && e.asset_url ? e.mime_type === "application/pdf" ? "pdf" : (t = e.mime_type) != null && t.startsWith("audio/") ? "audio" : "file" : null;
 }
@@ -3102,12 +3102,12 @@ function js(e) {
       a(r);
       continue;
     }
-    const i = yi(r);
+    const i = Ni(r);
     i && n(i, r);
   }
   return t;
 }
-function Ni(e) {
+function yi(e) {
   return e.filter((t) => t.type === "media").length;
 }
 function Ci(e, t, n) {
@@ -3196,22 +3196,22 @@ const Ti = ({
   var b;
   const r = js(n.attachments);
   if (r.length === 0) return null;
-  const i = Ni(r), c = (b = n.text) == null ? void 0 : b.trim(), l = r.find((v) => v.type === "link"), d = (l == null ? void 0 : l.type) === "link" ? Qt(l.attachments[0] ?? {}).url : void 0, u = c && _i(c, d) ? void 0 : c;
+  const i = yi(r), c = (b = n.text) == null ? void 0 : b.trim(), l = r.find((v) => v.type === "link"), d = (l == null ? void 0 : l.type) === "link" ? Qt(l.attachments[0] ?? {}).url : void 0, u = c && _i(c, d) ? void 0 : c;
   let f = 0;
-  const m = [], g = u ? "middle" : e, o = e === "single" || e === "end", x = (v, p, y) => {
+  const m = [], g = u ? "middle" : e, o = e === "single" || e === "end", x = (v, p, N) => {
     const w = t ? at.Sent : at.Received;
     m.push(
       /* @__PURE__ */ s(
         w,
         {
           ...Qt(v),
-          groupPosition: y ? g : "middle"
+          groupPosition: N ? g : "middle"
         },
         p
       )
     );
   }, _ = (v, p) => {
-    const y = Ci(
+    const N = Ci(
       f,
       i,
       e
@@ -3220,7 +3220,7 @@ const Ti = ({
       /* @__PURE__ */ s(
         Ii,
         {
-          groupPosition: y,
+          groupPosition: N,
           isMyMessage: t,
           segment: v
         },
@@ -3229,13 +3229,13 @@ const Ti = ({
     );
   };
   return r.forEach((v, p) => {
-    const y = p === r.length - 1;
+    const N = p === r.length - 1;
     if (v.type === "link") {
       v.attachments.forEach((w, k) => {
         x(
           w,
           `link-${p}-${k}`,
-          y && k === v.attachments.length - 1
+          N && k === v.attachments.length - 1
         );
       });
       return;
@@ -3262,7 +3262,7 @@ const Ti = ({
     u ? /* @__PURE__ */ h(
       "div",
       {
-        className: N("str-chat__message-bubble", {
+        className: y("str-chat__message-bubble", {
           "relative isolate": o
         }),
         children: [
@@ -3294,7 +3294,7 @@ const Ti = ({
     viewerLanguage: b,
     onOutboundClick: v,
     resolvedOutbound: p
-  } = e, { client: y } = Ge("CustomMessage"), { channel: w } = be("CustomMessage"), { isUnlocking: k, onUnlockClick: T, onFetchSource: A, onDownloadClick: D } = Ra("LockedAttachment"), [B, L] = $(!1), S = on(o.id), {
+  } = e, { client: N } = Ge("CustomMessage"), { channel: w } = be("CustomMessage"), { isUnlocking: k, onUnlockClick: T, onFetchSource: A, onDownloadClick: D } = Ra("LockedAttachment"), [B, L] = $(!1), S = on(o.id), {
     Attachment: I = ln,
     EditMessageModal: E = cn,
     MessageActions: C,
@@ -3333,7 +3333,7 @@ const Ti = ({
   const ae = !_ && !!o.reply_count, ue = !_ && o.show_in_channel && o.parent_id, le = o.status === "failed" && ((Et = o.error) == null ? void 0 : Et.status) !== 403, _t = _n(o);
   let ge;
   le ? ge = () => u(o) : _t && (ge = () => L(!0));
-  const Z = g(), qs = N(
+  const Z = g(), qs = y(
     "str-chat__message str-chat__message-simple",
     `str-chat__message--${o.type}`,
     `str-chat__message--${o.status}`,
@@ -3350,7 +3350,7 @@ const Ti = ({
       "str-chat__virtual-message__wrapper--first": r,
       "str-chat__virtual-message__wrapper--group": c
     }
-  ), We = o.poll_id && y.polls.fromState(o.poll_id), yt = Ss(o), ve = Ue(o), Ks = lt(o), Xe = !!(P != null && P.length && !o.quoted_message), Nt = ve && Z && Xe, Zs = ee && ne && !o.quoted_message && !We && !Q && !ve, Ct = {
+  ), We = o.poll_id && N.polls.fromState(o.poll_id), Nt = Ss(o), ve = Ue(o), Ks = lt(o), Xe = !!(P != null && P.length && !o.quoted_message), yt = ve && Z && Xe, Zs = ee && ne && !o.quoted_message && !We && !Q && !ve, Ct = {
     contentType: "text",
     amountText: (Tt = o.metadata) == null ? void 0 : Tt.amount_text,
     paymentStatus: (At = o.metadata) == null ? void 0 : At.payment_status,
@@ -3367,7 +3367,7 @@ const Ti = ({
   }, kt = /* @__PURE__ */ h(
     "div",
     {
-      className: N("str-chat__message-bubble", {
+      className: y("str-chat__message-bubble", {
         "relative isolate": de
       }),
       children: [
@@ -3384,7 +3384,7 @@ const Ti = ({
       }
     ),
     B && /* @__PURE__ */ s(
-      yn,
+      Nn,
       {
         MessageBouncePrompt: U,
         onClose: () => L(!1),
@@ -3415,7 +3415,7 @@ const Ti = ({
           /* @__PURE__ */ s(
             "div",
             {
-              className: N("str-chat__message-inner", {
+              className: y("str-chat__message-inner", {
                 "str-chat__simple-message--error-failed": le || _t
               }),
               "data-testid": "message-inner",
@@ -3429,7 +3429,7 @@ const Ti = ({
                 marginInlineEnd: 0,
                 marginInlineStart: 0
               },
-              children: yt ? /* @__PURE__ */ h("div", { className: "str-chat__message-bubble-wrapper message-tip-wrapper", children: [
+              children: Nt ? /* @__PURE__ */ h("div", { className: "str-chat__message-bubble-wrapper message-tip-wrapper", children: [
                 /* @__PURE__ */ s(Va, { message: o }),
                 ((Bt = o.text) == null ? void 0 : Bt.trim()) && kt
               ] }) : Pa(o) ? /* @__PURE__ */ s("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
@@ -3485,11 +3485,11 @@ const Ti = ({
               ) : /* @__PURE__ */ s("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ h(
                 "div",
                 {
-                  className: N("str-chat__message-bubble", {
+                  className: y("str-chat__message-bubble", {
                     "relative isolate": de
                   }),
                   children: [
-                    ve && !Nt && /* @__PURE__ */ s(
+                    ve && !yt && /* @__PURE__ */ s(
                       Yt,
                       {
                         message: o,
@@ -3497,7 +3497,7 @@ const Ti = ({
                         isMyMessage: Z
                       }
                     ),
-                    We && /* @__PURE__ */ s(Nn, { poll: We }),
+                    We && /* @__PURE__ */ s(yn, { poll: We }),
                     P != null && P.length && !o.quoted_message ? /* @__PURE__ */ s(
                       I,
                       {
@@ -3525,7 +3525,7 @@ const Ti = ({
               ) })
             }
           ),
-          !Ks && !yt && /* @__PURE__ */ s("div", { className: "str-chat__message-footer", children: (!ve || Nt) && /* @__PURE__ */ s(
+          !Ks && !Nt && /* @__PURE__ */ s("div", { className: "str-chat__message-footer", children: (!ve || yt) && /* @__PURE__ */ s(
             Yt,
             {
               message: o,
@@ -3818,11 +3818,11 @@ const Ti = ({
       o = b;
       const p = Array.from(
         g.querySelectorAll(".str-chat__list")
-      ).find((w) => w.scrollHeight > w.clientHeight) ?? null, y = p ? p.scrollHeight - p.scrollTop - p.clientHeight < Fi : !1;
+      ).find((w) => w.scrollHeight > w.clientHeight) ?? null, N = p ? p.scrollHeight - p.scrollTop - p.clientHeight < Fi : !1;
       g.style.setProperty(
         "--messaging-composer-height",
         `${b}px`
-      ), v && y && p && (p.scrollTop = p.scrollHeight);
+      ), v && N && p && (p.scrollTop = p.scrollHeight);
     };
     if (x(), typeof ResizeObserver > "u")
       return;
@@ -4120,7 +4120,7 @@ function Zi(e, t) {
 const Ji = () => null, Qi = ({ className: e, message: t }) => /* @__PURE__ */ h(
   "div",
   {
-    className: N("flex items-center justify-center h-full", e),
+    className: y("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(
@@ -4185,7 +4185,7 @@ const eo = ({
   renderChannelBanner: b,
   customChannelActions: v,
   renderChannelActions: p,
-  renderMessage: y,
+  renderMessage: N,
   viewerLanguage: w,
   showChannelInfo: k = !0,
   onParticipantNameClick: T,
@@ -4232,9 +4232,9 @@ const eo = ({
           onOutboundClick: C
         }
       );
-      return !y || !X ? K : y(K, X);
+      return !N || !X ? K : N(K, X);
     },
-    [C, y, w]
+    [C, N, w]
   );
   return /* @__PURE__ */ s(Cs.Provider, { value: M, children: /* @__PURE__ */ s(
     Dn,
@@ -4349,7 +4349,7 @@ const eo = ({
     composerDisabled: b = !1,
     composerDisabledReason: v,
     dmAgentEnabled: p,
-    messageMetadata: y,
+    messageMetadata: N,
     onMessageSent: w,
     showStarButton: k = !1,
     renderChannelBanner: T,
@@ -4372,10 +4372,10 @@ const eo = ({
         const Q = ((ne = e.data) == null ? void 0 : ne.chatbot_paused) === !0, P = p && !Q, se = {
           ...Y,
           ...P && { silent: !0 },
-          ...y && {
+          ...N && {
             metadata: {
               ...Y.metadata ?? {},
-              ...y
+              ...N
             }
           }
         }, V = {
@@ -4384,7 +4384,7 @@ const eo = ({
         }, ee = await e.sendMessage(se, V);
         return w == null || w(ee), ee;
       },
-      [e, p, y, w]
+      [e, p, N, w]
     ), H = j(null);
     q(() => {
       if (!L) return;
@@ -4403,7 +4403,7 @@ const eo = ({
       "div",
       {
         ref: H,
-        className: N(
+        className: y(
           "messaging-channel-view h-full flex flex-col",
           d
         ),
@@ -4459,7 +4459,7 @@ const eo = ({
   }
 );
 Vs.displayName = "ChannelView";
-const ye = R.memo(({ message: e, onBack: t }) => /* @__PURE__ */ s("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ h("div", { className: "text-center max-w-sm", children: [
+const Ne = R.memo(({ message: e, onBack: t }) => /* @__PURE__ */ s("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ h("div", { className: "text-center max-w-sm", children: [
   /* @__PURE__ */ s("div", { className: "w-24 h-24 bg-danger-alt/20 rounded-full flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ s("span", { className: "text-4xl", children: "⚠️" }) }),
   /* @__PURE__ */ s("h2", { className: "font-semibold text-charcoal mb-2", children: "Oops!" }),
   /* @__PURE__ */ s("p", { className: "text-stone text-sm mb-6", children: e }),
@@ -4473,7 +4473,7 @@ const ye = R.memo(({ message: e, onBack: t }) => /* @__PURE__ */ s("div", { clas
     }
   )
 ] }) }));
-ye.displayName = "ErrorState";
+Ne.displayName = "ErrorState";
 const Vo = ({
   capabilities: e = {},
   renderMessageInputActions: t,
@@ -4494,7 +4494,7 @@ const Vo = ({
   onParticipantNameClick: b,
   onOutboundClick: v,
   resolveOutbound: p,
-  renderMessage: y,
+  renderMessage: N,
   onMessageLinkClick: w,
   showChannelInfo: k,
   composerInput: T,
@@ -4585,13 +4585,13 @@ const Vo = ({
     var V;
     U(null), H(!0), (V = P.current) == null || V.call(P);
   }, []);
-  return L ? /* @__PURE__ */ s(Ve, {}) : S ? /* @__PURE__ */ s(ye, { message: S, onBack: I }) : !B || !D ? /* @__PURE__ */ s(
-    ye,
+  return L ? /* @__PURE__ */ s(Ve, {}) : S ? /* @__PURE__ */ s(Ne, { message: S, onBack: I }) : !B || !D ? /* @__PURE__ */ s(
+    Ne,
     {
       message: "Not connected to messaging service",
       onBack: I
     }
-  ) : F ? /* @__PURE__ */ s(ye, { message: F }) : W && !M ? /* @__PURE__ */ s(ye, { message: "Conversation ended" }) : M ? /* @__PURE__ */ s("div", { className: "messaging-shell h-full bg-background-primary overflow-hidden", children: /* @__PURE__ */ s("div", { className: "flex h-full min-h-0 flex-col", children: /* @__PURE__ */ s(
+  ) : F ? /* @__PURE__ */ s(Ne, { message: F }) : W && !M ? /* @__PURE__ */ s(Ne, { message: "Conversation ended" }) : M ? /* @__PURE__ */ s("div", { className: "messaging-shell h-full bg-background-primary overflow-hidden", children: /* @__PURE__ */ s("div", { className: "flex h-full min-h-0 flex-col", children: /* @__PURE__ */ s(
     Vs,
     {
       channel: M,
@@ -4612,7 +4612,7 @@ const Vo = ({
       onParticipantNameClick: b,
       onOutboundClick: v,
       resolveOutbound: p,
-      renderMessage: y,
+      renderMessage: N,
       onMessageLinkClick: w,
       showChannelInfo: k,
       composerInput: T,
@@ -4693,7 +4693,7 @@ const Gs = R.createContext({
         for (let E = S.length - 1; E >= 0; E--)
           if (S[E].type !== "system") return S[E];
       }
-    })(), y = (() => {
+    })(), N = (() => {
       var M;
       const S = _s({
         message: v,
@@ -4712,7 +4712,7 @@ const Gs = R.createContext({
       if (S) return S;
       const C = (M = v == null ? void 0 : v.attachments) == null ? void 0 : M[0];
       return C ? C.og_scrape_url ? C.og_scrape_url : C.type === "image" ? "📷 Sent an image" : C.type === "video" ? "🎥 Sent a video" : C.type === "audio" ? "🎵 Sent audio" : C.type === "file" ? "📎 Sent a file" : "📎 Sent an attachment" : "No messages yet";
-    })(), w = v != null && v.created_at ? ro(new Date(v.created_at)) : "", k = v ? Ue(v) : !1, T = l ? l(v, y) : `${k ? "✨ " : ""}${y}`, A = n ?? 0;
+    })(), w = v != null && v.created_at ? ro(new Date(v.created_at)) : "", k = v ? Ue(v) : !1, T = l ? l(v, N) : `${k ? "✨ " : ""}${N}`, A = n ?? 0;
     return i && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
       channelId: t == null ? void 0 : t.id,
       isSelected: f,
@@ -4726,7 +4726,7 @@ const Gs = R.createContext({
         tabIndex: 0,
         onClick: g,
         onKeyDown: o,
-        className: N(
+        className: y(
           "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,
@@ -4750,7 +4750,7 @@ const Gs = R.createContext({
               /* @__PURE__ */ h(
                 "h3",
                 {
-                  className: N(
+                  className: y(
                     "text-sm font-medium truncate text-[#191918]"
                   ),
                   children: [
@@ -4795,7 +4795,7 @@ const io = { last_message_at: -1 }, oo = R.memo(
   }) => {
     const p = R.useRef(0);
     p.current++;
-    const { debug: y = !1 } = it(), w = R.useCallback(
+    const { debug: N = !1 } = it(), w = R.useCallback(
       (T) => {
         for (const A of T)
           to(A);
@@ -4803,7 +4803,7 @@ const io = { last_message_at: -1 }, oo = R.memo(
       },
       [r]
     );
-    y && console.log("📺 [ChannelList] 🔄 RENDER START", {
+    N && console.log("📺 [ChannelList] 🔄 RENDER START", {
       renderCount: p.current,
       selectedChannelId: t == null ? void 0 : t.id,
       filters: n
@@ -4812,7 +4812,7 @@ const io = { last_message_at: -1 }, oo = R.memo(
       () => ({
         selectedChannel: t,
         onChannelSelect: e,
-        debug: y,
+        debug: N,
         channelPreview: u,
         renderMessagePreview: f,
         viewerLanguage: m
@@ -4820,7 +4820,7 @@ const io = { last_message_at: -1 }, oo = R.memo(
       [
         t,
         e,
-        y,
+        N,
         u,
         f,
         m
@@ -4829,7 +4829,7 @@ const io = { last_message_at: -1 }, oo = R.memo(
     return /* @__PURE__ */ s(
       "div",
       {
-        className: N(
+        className: y(
           "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
           c
         ),
@@ -4870,7 +4870,7 @@ const lo = "line-clamp-2 text-body-small-medium", co = "text-body-small-regular"
   return /* @__PURE__ */ s(
     "div",
     {
-      className: N(
+      className: y(
         "flex gap-2",
         // `row` is capped (`max-w-[60%]`) and shrinkable (`min-w-0`) so a long
         // or localized secondary label can never grow the footer past the
@@ -4914,7 +4914,7 @@ const lo = "line-clamp-2 text-body-small-medium", co = "text-body-small-regular"
       /* @__PURE__ */ s(
         "p",
         {
-          className: N("min-w-0", lo),
+          className: y("min-w-0", lo),
           style: f,
           children: n
         }
@@ -4923,12 +4923,12 @@ const lo = "line-clamp-2 text-body-small-medium", co = "text-body-small-regular"
     d && /* @__PURE__ */ s(
       "p",
       {
-        className: N(
+        className: y(
           co,
           r <= 1 && "truncate"
         ),
         style: m,
-        children: mo(a ?? "")
+        children: r > 1 ? mo(a ?? "") : a
       }
     )
   ] });
@@ -4973,7 +4973,7 @@ const lo = "line-clamp-2 text-body-small-medium", co = "text-body-small-regular"
   return /* @__PURE__ */ s(
     "div",
     {
-      className: N(
+      className: y(
         "relative flex min-h-0 w-full flex-1 items-center justify-center overflow-hidden",
         fo[e]
       ),
@@ -5045,7 +5045,7 @@ const lo = "line-clamp-2 text-body-small-medium", co = "text-body-small-regular"
       side: e === "dark" ? "sender" : "receiver",
       visible: x,
       children: /* @__PURE__ */ h(
-        Ne,
+        ye,
         {
           variant: e,
           accentHex: o.accentHex,
@@ -5079,9 +5079,9 @@ const lo = "line-clamp-2 text-body-small-medium", co = "text-body-small-regular"
       )
     }
   );
-}, yo = (e) => /* @__PURE__ */ s(Ws, { ...e, variant: "dark" }), No = (e) => /* @__PURE__ */ s(Ws, { ...e, variant: "light" }), Go = {
-  Sent: yo,
-  Received: No
+}, No = (e) => /* @__PURE__ */ s(Ws, { ...e, variant: "dark" }), yo = (e) => /* @__PURE__ */ s(Ws, { ...e, variant: "light" }), Go = {
+  Sent: No,
+  Received: yo
 }, is = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='23' fill='none'%3E%3Cpath fill='black' d='M0 0H15C15 10.1934 15.859 15.2345 19.168 21.4893C19.527 22.168 19.039 22.9917 18.274 22.9178C5.176 21.6506 0.32 6.0737 0 0Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%`, Co = {
   sent: "var(--str-chat__own-message-bubble-background-color, #1e2330)",
   received: "var(--str-chat__message-bubble-background-color, #f1f0ee)"
@@ -5115,13 +5115,13 @@ const lo = "line-clamp-2 text-body-small-medium", co = "text-body-small-regular"
   tail: n = !0,
   header: a,
   className: r
-}) => /* @__PURE__ */ h(
+}) => /* @__PURE__ */ s(
   "div",
   {
     "data-dd-privacy": "mask",
-    className: N(
+    className: y(
       "str-chat__message-bubble",
-      "relative px-4 py-3",
+      "relative",
       "text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]",
       r
     ),
@@ -5130,11 +5130,11 @@ const lo = "line-clamp-2 text-body-small-medium", co = "text-body-small-regular"
       borderRadius: "var(--str-chat__message-bubble-border-radius, 1.5rem)",
       isolation: "isolate"
     },
-    children: [
+    children: /* @__PURE__ */ h("div", { className: "str-chat__message-text", children: [
       a != null && /* @__PURE__ */ s("div", { className: "mb-1 font-medium", "data-testid": "message-bubble-header", children: a }),
       /* @__PURE__ */ s("p", { className: "m-0 whitespace-pre-wrap break-words hyphens-manual", children: t }),
       n && /* @__PURE__ */ s(So, { variant: e })
-    ]
+    ] })
   }
 ), Eo = ({
   text: e,
@@ -5165,7 +5165,7 @@ const lo = "line-clamp-2 text-body-small-medium", co = "text-body-small-regular"
     onClick: t,
     disabled: n,
     style: { backgroundColor: "#E6E5E3" },
-    className: N(
+    className: y(
       "w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors focus-ring",
       {
         "hover:brightness-95 active:brightness-90": !n,
@@ -5255,4 +5255,4 @@ export {
   xs as y,
   Ho as z
 };
-//# sourceMappingURL=index-D0fG7q_k.js.map
+//# sourceMappingURL=index-B0knLCIZ.js.map