@linktr.ee/messaging-react 3.12.7 → 3.13.0-rc-1784206423

package/dist/{index-CQm_f20V.js → index-5x3u5nJw.js}

@@ -1,5 +1,5 @@
-import { jsx as s, jsxs as u, Fragment as se } from "react/jsx-runtime";
-import V, { createContext as ct, useContext as Te, useCallback as J, useState as B, useRef as G, useEffect as K, useId as Vs, useMemo as re, Suspense as Gs } from "react";
+import { jsx as s, jsxs as m, Fragment as ne } from "react/jsx-runtime";
+import j, { createContext as ct, useContext as Te, useCallback as J, useState as B, useRef as G, useEffect as K, useId as Vs, useMemo as re, Suspense as Gs } from "react";
 import { StreamChatService as Hs } from "@linktr.ee/messaging-core";
 import { StreamChat as Ys, LinkPreviewsManager as Yt } from "stream-chat";
 import { Chat as qs, useChannelStateContext as oe, useChatContext as fe, DateSeparator as Ws, MessageStatus as Xs, useMessageContext as Ne, MessageErrorIcon as nt, MessageText as $e, areMessageUIPropsEqual as Ks, useMessageReminder as Zs, useComponentContext as rs, Attachment as Js, EditMessageModal as Qs, MessageBlocked as en, MessageBouncePrompt as tn, MessageDeleted as sn, MessageIsThreadReplyInChannelButtonIndicator as nn, MessageRepliesCountButton as an, ReminderNotification as rn, StreamedMessageText as ln, messageHasAttachments as on, messageHasReactions as cn, isDateSeparatorMessage as dn, isMessageBlocked as un, isMessageBounced as mn, MessageBounceModal as hn, Poll as fn, useMessageComposer as gn, useStateStore as pn, MessageInput as bn, useMessageInputContext as vn, useMessageComposerHasSendableData as xn, AttachmentPreviewList as wn, QuotedMessagePreview as _n, TextareaComposer as Nn, MessageTimestamp as Xe, AIStates as Ke, useTypingContext as yn, useAIState as kn, Channel as Cn, WithComponents as Sn, Window as En, MessageList as In, ChannelList as Tn, InfiniteScroll as Mn } from "stream-chat-react";
@@ -38,7 +38,7 @@ const ds = ct({
     serviceConfig: !!n,
     capabilities: Object.keys(r)
   });
-  const [d, m] = B(null), [f, h] = B(null), [g, c] = B(!1), [b, v] = B(!1), [x, p] = B(null), _ = G(!1), w = G(null), C = G(n);
+  const [d, u] = B(null), [f, h] = B(null), [g, c] = B(!1), [b, v] = B(!1), [x, p] = B(null), _ = G(!1), w = G(null), C = G(n);
   C.current = n;
   const D = G(i);
   D.current = i;
@@ -69,7 +69,7 @@ const ds = ct({
   K(() => {
     const M = R.current, P = C.current;
     if (o) {
-      w.current = null, m(null), h(null), c(!1), p(null), v(!1);
+      w.current = null, u(null), h(null), c(!1), p(null), v(!1);
       return;
     }
     if (!a || !F || !P) {
@@ -89,7 +89,7 @@ const ds = ct({
       debug: D.current,
       client: F
     });
-    w.current = $, m($), l("✅ SERVICE SET", {
+    w.current = $, u($), l("✅ SERVICE SET", {
       renderCount: M,
       serviceInstance: !!$
     });
@@ -125,13 +125,13 @@ const ds = ct({
       l("🚀 STARTING USER CONNECTION", { userId: t.id }), _.current = !0, v(!0), p(null);
       try {
         l("📞 CALLING SERVICE.CONNECTUSER", { userId: t.id });
-        const j = await d.connectUser(t);
-        h(j), c(!0), L.current = { serviceId: d, userId: t.id }, l("✅ USER CONNECTION SUCCESS", {
+        const V = await d.connectUser(t);
+        h(V), c(!0), L.current = { serviceId: d, userId: t.id }, l("✅ USER CONNECTION SUCCESS", {
           userId: t.id,
-          clientId: j.userID
+          clientId: V.userID
         });
-      } catch (j) {
-        const Q = j instanceof Error ? j.message : "Connection failed";
+      } catch (V) {
+        const Q = V instanceof Error ? V.message : "Connection failed";
         p(Q), l("❌ USER CONNECTION ERROR", {
           userId: t.id,
           error: Q
@@ -174,7 +174,7 @@ const ds = ct({
         v(!1), l("🔄 CONNECTION REFRESH FINISHED", { userId: t.id });
       }
     }
-  }, [d, t, l, o]), I = V.useMemo(() => (l("💫 CONTEXT VALUE MEMOIZATION", {
+  }, [d, t, l, o]), I = j.useMemo(() => (l("💫 CONTEXT VALUE MEMOIZATION", {
     hasService: !!d,
     hasClient: !!f,
     isConnected: g,
@@ -321,7 +321,7 @@ function oa(e) {
 function ca(e) {
   return us(e).bgColor;
 }
-const ne = ({
+const se = ({
   id: e,
   image: t,
   size: n = 40,
@@ -330,7 +330,7 @@ const ne = ({
   shape: i = "squircle",
   dmAgentEnabled: o = !1
 }) => {
-  const l = oa(e), d = ca(e), m = 0.45, h = n < 32 ? Math.round(n * m) : n < 56 ? 14 : n < 120 ? 18 : 36, g = n >= 40 ? 2 : 1, c = i === "circle" ? { borderRadius: "50%" } : { borderRadius: "1rem" }, b = /* @__PURE__ */ s("div", { className: "h-full w-full overflow-hidden", style: c, children: t ? /* @__PURE__ */ s(
+  const l = oa(e), d = ca(e), u = 0.45, h = n < 32 ? Math.round(n * u) : n < 56 ? 14 : n < 120 ? 18 : 36, g = n >= 40 ? 2 : 1, c = i === "circle" ? { borderRadius: "50%" } : { borderRadius: "1rem" }, b = /* @__PURE__ */ s("div", { className: "h-full w-full overflow-hidden", style: c, children: t ? /* @__PURE__ */ s(
     "img",
     {
       src: t,
@@ -348,7 +348,7 @@ const ne = ({
       children: l
     }
   ) });
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     "div",
     {
       className: k(
@@ -404,7 +404,7 @@ const ne = ({
   onDeleteConversationClick: o,
   onBlockParticipantClick: l,
   onReportParticipantClick: d,
-  onActionComplete: m,
+  onActionComplete: u,
   logLabel: f = "useChannelModerationActions"
 }) => {
   var I;
@@ -443,7 +443,7 @@ const ne = ({
         o == null || o(), g && console.log(`[${f}] Leave conversation`, e.cid), C(!0);
         try {
           const T = ((y = e._client) == null ? void 0 : y.userID) ?? null;
-          await e.hide(T, !1), r && await r(e), m == null || m();
+          await e.hide(T, !1), r && await r(e), u == null || u();
         } catch (T) {
           console.error(`[${f}] Failed to leave conversation`, T);
         } finally {
@@ -456,7 +456,7 @@ const ne = ({
       if (!(D || !h)) {
         l == null || l(), g && console.log(`[${f}] Block member`, (y = t == null ? void 0 : t.user) == null ? void 0 : y.id), E(!0);
         try {
-          await h.blockUser((T = t == null ? void 0 : t.user) == null ? void 0 : T.id), i && await i((M = t == null ? void 0 : t.user) == null ? void 0 : M.id), m == null || m();
+          await h.blockUser((T = t == null ? void 0 : t.user) == null ? void 0 : T.id), i && await i((M = t == null ? void 0 : t.user) == null ? void 0 : M.id), u == null || u();
         } catch (P) {
           console.error(`[${f}] Failed to block member`, P);
         } finally {
@@ -469,7 +469,7 @@ const ne = ({
       if (!(D || !h)) {
         l == null || l(), g && console.log(`[${f}] Unblock member`, (y = t == null ? void 0 : t.user) == null ? void 0 : y.id), E(!0);
         try {
-          await h.unBlockUser((T = t == null ? void 0 : t.user) == null ? void 0 : T.id), i && await i((M = t == null ? void 0 : t.user) == null ? void 0 : M.id), m == null || m();
+          await h.unBlockUser((T = t == null ? void 0 : t.user) == null ? void 0 : T.id), i && await i((M = t == null ? void 0 : t.user) == null ? void 0 : M.id), u == null || u();
         } catch (P) {
           console.error(`[${f}] Failed to unblock member`, P);
         } finally {
@@ -478,7 +478,7 @@ const ne = ({
       }
     },
     handleReportUser: () => {
-      d == null || d(), m == null || m(), window.open(da, "_blank", "noopener,noreferrer");
+      d == null || d(), u == null || u(), window.open(da, "_blank", "noopener,noreferrer");
     }
   };
 }, ye = ({
@@ -508,7 +508,7 @@ const ne = ({
   onBlockParticipant: o,
   onDeleteConversationClick: l,
   onBlockParticipantClick: d,
-  onReportParticipantClick: m,
+  onReportParticipantClick: u,
   customChannelActions: f,
   triggerClassName: h
 }) => {
@@ -530,7 +530,7 @@ const ne = ({
     onBlockParticipant: o,
     onDeleteConversationClick: l,
     onBlockParticipantClick: d,
-    onReportParticipantClick: m,
+    onReportParticipantClick: u,
     onActionComplete: x,
     logLabel: "ChannelActionsMenu"
   });
@@ -544,8 +544,8 @@ const ne = ({
     return document.addEventListener("mousedown", L), document.addEventListener("keydown", S), () => {
       document.removeEventListener("mousedown", L), document.removeEventListener("keydown", S);
     };
-  }, [g]), !t || !(n || a || r || !!f) ? null : /* @__PURE__ */ u("div", { ref: b, className: "relative", children: [
-    /* @__PURE__ */ u(
+  }, [g]), !t || !(n || a || r || !!f) ? null : /* @__PURE__ */ m("div", { ref: b, className: "relative", children: [
+    /* @__PURE__ */ m(
       "button",
       {
         className: h,
@@ -569,8 +569,8 @@ const ne = ({
           "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"
         ),
-        children: /* @__PURE__ */ u("ul", { className: "flex flex-col gap-1", children: [
-          n && /* @__PURE__ */ s("li", { children: /* @__PURE__ */ u(
+        children: /* @__PURE__ */ m("ul", { className: "flex flex-col gap-1", children: [
+          n && /* @__PURE__ */ s("li", { children: /* @__PURE__ */ m(
             ye,
             {
               onClick: D,
@@ -585,11 +585,11 @@ const ne = ({
           a && /* @__PURE__ */ s("li", { children: _ ? (
             // Block status not yet resolved — show a disabled placeholder
             // so a premature click can't act on a stale block state.
-            /* @__PURE__ */ u(ye, { disabled: !0, "aria-busy": !0, children: [
+            /* @__PURE__ */ m(ye, { disabled: !0, "aria-busy": !0, children: [
               /* @__PURE__ */ s(Fe, { className: "h-5 w-5 animate-spin" }),
               /* @__PURE__ */ s("span", { children: "Block" })
             ] })
-          ) : p ? /* @__PURE__ */ u(
+          ) : p ? /* @__PURE__ */ m(
             ye,
             {
               onClick: R,
@@ -600,7 +600,7 @@ const ne = ({
                 /* @__PURE__ */ s("span", { children: "Unblock" })
               ]
             }
-          ) : /* @__PURE__ */ u(
+          ) : /* @__PURE__ */ m(
             ye,
             {
               onClick: E,
@@ -612,7 +612,7 @@ const ne = ({
               ]
             }
           ) }),
-          r && /* @__PURE__ */ s("li", { children: /* @__PURE__ */ u(ye, { variant: "danger", onClick: O, children: [
+          r && /* @__PURE__ */ s("li", { children: /* @__PURE__ */ m(ye, { variant: "danger", onClick: O, children: [
             /* @__PURE__ */ s(is, { className: "h-5 w-5" }),
             /* @__PURE__ */ s("span", { children: "Report" })
           ] }) }),
@@ -631,7 +631,7 @@ const ne = ({
   onBlockParticipant: o,
   showDeleteConversation: l = !0,
   showBlockParticipant: d = !0,
-  showReportParticipant: m = !0,
+  showReportParticipant: u = !0,
   onDeleteConversationClick: f,
   onBlockParticipantClick: h,
   onReportParticipantClick: g,
@@ -641,7 +641,7 @@ const ne = ({
   onParticipantNameClick: x
 }) => {
   var F, L, S, I;
-  const { channel: p } = oe(), { client: _ } = fe(), w = V.useMemo(
+  const { channel: p } = oe(), { client: _ } = fe(), w = j.useMemo(
     () => {
       var y;
       return He(
@@ -668,7 +668,7 @@ const ne = ({
         "@container bg-[linear-gradient(180deg,#FBFAF9_0%,rgba(251,250,249,0.92)_58%,rgba(251,250,249,0)_100%)]",
         e
       ),
-      children: /* @__PURE__ */ u("div", { className: "grid min-h-[100px] grid-cols-[minmax(40px,1fr)_auto_minmax(40px,1fr)] items-start pb-2 pt-5 @lg:min-h-[104px] @lg:pt-6", children: [
+      children: /* @__PURE__ */ m("div", { className: "grid min-h-[100px] grid-cols-[minmax(40px,1fr)_auto_minmax(40px,1fr)] items-start pb-2 pt-5 @lg:min-h-[104px] @lg:pt-6", children: [
         /* @__PURE__ */ s("div", { className: "flex items-start", children: n && /* @__PURE__ */ s(
           "button",
           {
@@ -683,7 +683,7 @@ const ne = ({
             children: /* @__PURE__ */ s(at, { className: "size-5 text-black/90" })
           }
         ) }),
-        /* @__PURE__ */ s("div", { className: "flex min-w-0 justify-center", "data-dd-privacy": "mask", children: /* @__PURE__ */ u(
+        /* @__PURE__ */ s("div", { className: "flex min-w-0 justify-center", "data-dd-privacy": "mask", children: /* @__PURE__ */ m(
           "button",
           {
             type: "button",
@@ -692,7 +692,7 @@ const ne = ({
             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: [
               /* @__PURE__ */ s(
-                ne,
+                se,
                 {
                   id: ((I = w == null ? void 0 : w.user) == null ? void 0 : I.id) || p.id || "unknown",
                   name: C,
@@ -703,10 +703,10 @@ const ne = ({
                   className: "-mb-2"
                 }
               ),
-              /* @__PURE__ */ u("span", { className: "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 pl-3 pr-2 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", children: [
-                /* @__PURE__ */ u("span", { className: "flex max-w-full items-center justify-center", children: [
+              /* @__PURE__ */ m("span", { className: "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 pl-3 pr-2 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", children: [
+                /* @__PURE__ */ m("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: C }),
-                  /* @__PURE__ */ u("span", { className: "ml-2 flex gap-1", children: [
+                  /* @__PURE__ */ m("span", { className: "ml-2 flex gap-1", children: [
                     R && /* @__PURE__ */ s(
                       "span",
                       {
@@ -733,7 +733,7 @@ const ne = ({
                     )
                   ] })
                 ] }),
-                r && /* @__PURE__ */ u("span", { className: "mt-1 flex items-center gap-1 px-1 pb-0.5 text-[10px] leading-3 text-black/55", children: [
+                r && /* @__PURE__ */ m("span", { className: "mt-1 flex items-center gap-1 px-1 pb-0.5 text-[10px] leading-3 text-black/55", children: [
                   /* @__PURE__ */ s(we, { className: "size-3 shrink-0 text-black/55" }),
                   /* @__PURE__ */ s("span", { children: ha })
                 ] })
@@ -741,7 +741,7 @@ const ne = ({
             ]
           }
         ) }),
-        /* @__PURE__ */ u("div", { className: "flex items-start justify-end gap-2", children: [
+        /* @__PURE__ */ m("div", { className: "flex items-start justify-end gap-2", children: [
           a && /* @__PURE__ */ s(
             "button",
             {
@@ -769,7 +769,7 @@ const ne = ({
               participant: w,
               showDeleteConversation: l,
               showBlockParticipant: d,
-              showReportParticipant: m,
+              showReportParticipant: u,
               onLeaveConversation: i,
               onBlockParticipant: o,
               onDeleteConversationClick: f,
@@ -886,7 +886,7 @@ function Sa(e) {
   return t !== "document" ? ka[t] : Ca[hs(e)];
 }
 function _e(e, t) {
-  return V.createElement(Sa(e), t);
+  return j.createElement(Sa(e), t);
 }
 const Ea = (e) => {
   var t, n;
@@ -901,7 +901,7 @@ const Ea = (e) => {
   controls: o = !0,
   showProgress: l = !1,
   muted: d = !1,
-  onContainerClick: m
+  onContainerClick: u
 }) => {
   const f = ce(t), h = G(null), g = G(null), c = G(null), b = G(r), [v, x] = B(a), [p, _] = B(0), [w, C] = B(!1), [D, E] = B(!1), [R, O] = B(!1), [F, L] = B(!1), [S, I] = B(!0), [y, T] = B(null), M = J(() => {
     O(!1), x(!0);
@@ -916,7 +916,7 @@ const Ea = (e) => {
   }, []), $ = J((N) => {
     const A = h.current;
     A && A.duration && (A.currentTime = N * A.duration);
-  }, []), j = (N) => {
+  }, []), V = (N) => {
     N.stopPropagation(), C(!0);
     const A = P(N);
     _(A), $(A);
@@ -950,7 +950,7 @@ const Ea = (e) => {
     };
   }, [w, P, $]);
   const Q = y ? { aspectRatio: String(y) } : void 0, ee = y ? "" : " aspect-video", X = Math.round(p * 100);
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     "div",
     {
       role: "button",
@@ -958,16 +958,16 @@ const Ea = (e) => {
       className: `relative cursor-pointer overflow-hidden bg-black ${ee}`,
       style: Q,
       onClick: (N) => {
-        if (m) {
-          m(N);
+        if (u) {
+          u(N);
           return;
         }
         R || o && x((A) => !A);
       },
       onKeyDown: (N) => {
         if (!(N.key !== "Enter" && N.key !== " ")) {
-          if (N.preventDefault(), m) {
-            m(N);
+          if (N.preventDefault(), u) {
+            u(N);
             return;
           }
           R || o && x((A) => !A);
@@ -1064,8 +1064,8 @@ const Ea = (e) => {
             tabIndex: 0,
             ref: g,
             className: "relative flex h-4 w-full cursor-pointer items-center",
-            onMouseDown: j,
-            onTouchStart: j,
+            onMouseDown: V,
+            onTouchStart: V,
             onClick: (N) => N.stopPropagation(),
             onKeyDown: (N) => {
               N.key === "ArrowRight" && $(Math.min(1, p + 0.05)), N.key === "ArrowLeft" && $(Math.max(0, p - 0.05));
@@ -1079,7 +1079,7 @@ const Ea = (e) => {
             ) })
           }
         ) }),
-        o && /* @__PURE__ */ u("div", { className: "absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200", children: [
+        o && /* @__PURE__ */ m("div", { className: "absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200", children: [
           /* @__PURE__ */ s(
             "button",
             {
@@ -1092,7 +1092,7 @@ const Ea = (e) => {
               children: v ? /* @__PURE__ */ s(Gn, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ s(rt, { className: "size-5 translate-x-px", weight: "fill" })
             }
           ),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ m(
             "div",
             {
               role: "slider",
@@ -1103,8 +1103,8 @@ const Ea = (e) => {
               tabIndex: 0,
               ref: g,
               className: "relative flex h-4 w-full cursor-pointer items-center",
-              onMouseDown: j,
-              onTouchStart: j,
+              onMouseDown: V,
+              onTouchStart: V,
               onClick: (N) => N.stopPropagation(),
               onMouseEnter: () => E(!0),
               onMouseLeave: () => E(!1),
@@ -1148,7 +1148,7 @@ const Ea = (e) => {
   mediaPlayerProps: i,
   containedImage: o = !1
 }) => {
-  const l = ce(e), [d, m] = B(!1), f = he(t), h = he(n);
+  const l = ce(e), [d, u] = B(!1), f = he(t), h = he(n);
   return t && (l === "video" || l === "audio") ? /* @__PURE__ */ s(
     Ia,
     {
@@ -1165,7 +1165,7 @@ const Ea = (e) => {
       alt: a ?? "",
       className: `absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${d ? "opacity-100" : "opacity-0"}`,
       draggable: !1,
-      onLoad: () => m(!0)
+      onLoad: () => u(!0)
     }
   ) }) : /* @__PURE__ */ s(
     "img",
@@ -1182,7 +1182,7 @@ const Ea = (e) => {
       alt: a ?? "",
       className: `absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${d ? "opacity-100" : "opacity-0"}`,
       draggable: !1,
-      onLoad: () => m(!0)
+      onLoad: () => u(!0)
     }
   ) }) : /* @__PURE__ */ s(
     "img",
@@ -1229,12 +1229,12 @@ const Ea = (e) => {
   statusBadge: o,
   action: l,
   topLeft: d,
-  topRight: m,
+  topRight: u,
   rootRef: f,
   "data-testid": h
 }) => {
   const g = e === "dark", c = g ? n ?? a : n ?? "", b = g && !n;
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     "div",
     {
       ref: f,
@@ -1245,9 +1245,9 @@ const Ea = (e) => {
       ),
       children: [
         d ? /* @__PURE__ */ s("div", { className: "pointer-events-auto absolute left-3 top-3 z-50", children: d }) : null,
-        m ? /* @__PURE__ */ s("div", { className: "pointer-events-auto absolute right-3 top-3 z-50", children: m }) : null,
+        u ? /* @__PURE__ */ s("div", { className: "pointer-events-auto absolute right-3 top-3 z-50", children: u }) : null,
         t,
-        /* @__PURE__ */ u("div", { className: "px-4 pb-3 pt-3", children: [
+        /* @__PURE__ */ m("div", { className: "px-4 pb-3 pt-3", children: [
           c.trim() !== "" && /* @__PURE__ */ s(
             "p",
             {
@@ -1259,7 +1259,7 @@ const Ea = (e) => {
               children: c
             }
           ),
-          /* @__PURE__ */ u("div", { className: "flex flex-wrap items-center gap-1", children: [
+          /* @__PURE__ */ m("div", { className: "flex flex-wrap items-center gap-1", children: [
             _e(r, {
               className: k(
                 "size-5 shrink-0",
@@ -1307,7 +1307,7 @@ function Da(e) {
   return e ? "text-white/20" : "text-black/20";
 }
 const ft = ({ attachment: e, isMyMessage: t }) => {
-  const { title: n, text: a, image_url: r, og_scrape_url: i, title_link: o } = e, l = i ?? o, d = typeof l == "string" && l.trim() !== "" ? l : void 0, m = /* @__PURE__ */ u(V.Fragment, { children: [
+  const { title: n, text: a, image_url: r, og_scrape_url: i, title_link: o } = e, l = i ?? o, d = typeof l == "string" && l.trim() !== "" ? l : void 0, u = /* @__PURE__ */ m(j.Fragment, { children: [
     /* @__PURE__ */ s("div", { className: "p-2", children: r ? /* @__PURE__ */ s(
       "img",
       {
@@ -1322,13 +1322,13 @@ const ft = ({ attachment: e, isMyMessage: t }) => {
         children: /* @__PURE__ */ s(Hn, { className: `size-12 ${Da(t)}` })
       }
     ) }),
-    /* @__PURE__ */ u("div", { className: "px-3 pb-3", children: [
+    /* @__PURE__ */ m("div", { className: "px-3 pb-3", children: [
       n && /* @__PURE__ */ s("p", { className: `truncate text-[14px] font-medium leading-5 ${Aa(t)}`, children: n }),
       a && /* @__PURE__ */ s("p", { className: `truncate text-[12px] leading-4 ${Ra(t)}`, children: a }),
       d && /* @__PURE__ */ s("p", { className: `mt-1 truncate text-[12px] leading-4 ${La(t)}`, children: d })
     ] })
   ] });
-  return d ? /* @__PURE__ */ s("a", { href: d, target: "_blank", rel: "noopener noreferrer", className: "block no-underline", children: m }) : /* @__PURE__ */ s("div", { className: "block", children: m });
+  return d ? /* @__PURE__ */ s("a", { href: d, target: "_blank", rel: "noopener noreferrer", className: "block no-underline", children: u }) : /* @__PURE__ */ s("div", { className: "block", children: u });
 };
 function bs(e) {
   return e.type === "link" || !!e.og_scrape_url && !e.asset_url;
@@ -1369,7 +1369,7 @@ const Fa = ({
       },
       disabled: n,
       className: "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70",
-      children: n ? /* @__PURE__ */ s(Se, { className: "size-4 animate-spin text-white", weight: "bold" }) : /* @__PURE__ */ u(V.Fragment, { children: [
+      children: n ? /* @__PURE__ */ s(Se, { className: "size-4 animate-spin text-white", weight: "bold" }) : /* @__PURE__ */ m(j.Fragment, { children: [
         /* @__PURE__ */ s(Ee, { className: "size-4 text-white", weight: "bold" }),
         "Download"
       ] })
@@ -1388,12 +1388,12 @@ function pt(e) {
     (v) => v.type === "file" && v.asset_url
   ), i = t ?? n ?? a ?? r, o = (t == null ? void 0 : t.asset_url) ?? (n == null ? void 0 : n.image_url) ?? (a == null ? void 0 : a.asset_url) ?? (r == null ? void 0 : r.asset_url);
   if (!o) return null;
-  const l = (i == null ? void 0 : i.mime_type) ?? ((i == null ? void 0 : i.type) === "image" ? "image/jpeg" : (i == null ? void 0 : i.type) === "video" ? "video/mp4" : (i == null ? void 0 : i.type) === "audio" ? "audio/mpeg" : "application/octet-stream"), d = i == null ? void 0 : i.title, m = i == null ? void 0 : i.file_size, f = t == null ? void 0 : t.thumb_url;
+  const l = (i == null ? void 0 : i.mime_type) ?? ((i == null ? void 0 : i.type) === "image" ? "image/jpeg" : (i == null ? void 0 : i.type) === "video" ? "video/mp4" : (i == null ? void 0 : i.type) === "audio" ? "audio/mpeg" : "application/octet-stream"), d = i == null ? void 0 : i.title, u = i == null ? void 0 : i.file_size, f = t == null ? void 0 : t.thumb_url;
   return {
     resolvedUrl: o,
     resolvedType: l,
     title: d,
-    fileSize: m,
+    fileSize: u,
     thumbnailUrl: f
   };
 }
@@ -1459,9 +1459,9 @@ const vs = ({
   isMyMessage: t = !1
 }) => {
   const n = gt(e), a = pt(e);
-  return !n && !a ? null : /* @__PURE__ */ u("div", { className: t ? "str-chat__message str-chat__message-simple str-chat__message--me str-chat__message-simple--me" : "str-chat__message str-chat__message-simple str-chat__message--other", "data-dd-privacy": "mask", children: [
+  return !n && !a ? null : /* @__PURE__ */ m("div", { className: t ? "str-chat__message str-chat__message-simple str-chat__message--me str-chat__message-simple--me" : "str-chat__message str-chat__message-simple str-chat__message--other", "data-dd-privacy": "mask", children: [
     !t && e.user && /* @__PURE__ */ s(
-      ne,
+      se,
       {
         className: "str-chat__avatar str-chat__message-sender-avatar",
         id: e.user.id,
@@ -1537,7 +1537,7 @@ const vs = ({
   "data-testid": o
 }) => {
   const l = t != null && t !== "", d = Ga[Va(e)][a];
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     "div",
     {
       "data-testid": o,
@@ -1606,7 +1606,7 @@ const vs = ({
   mimeType: t,
   filename: n,
   items: a
-}) => a && a.length > 0 ? a : e ? [{ src: e, mimeType: t, filename: n }] : [], qa = ({ item: e, preload: t, trailingAction: n }) => /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+}) => a && a.length > 0 ? a : e ? [{ src: e, mimeType: t, filename: n }] : [], qa = ({ item: e, preload: t, trailingAction: n }) => /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
   /* @__PURE__ */ s(
     "audio",
     {
@@ -1629,14 +1629,14 @@ const vs = ({
   preload: l,
   onDismiss: d
 }) => {
-  const m = Re(e), f = e === "composer" && !!d, h = Ya({ src: t, mimeType: n, filename: a, items: r });
+  const u = Re(e), f = e === "composer" && !!d, h = Ya({ src: t, mimeType: n, filename: a, items: r });
   if (h.length === 0)
     return null;
   const g = l ?? (h.length > 1 ? "none" : "metadata");
   return /* @__PURE__ */ s(
     Me,
     {
-      variant: m,
+      variant: u,
       text: i,
       groupPosition: o,
       "data-testid": "audio-attachment",
@@ -1722,7 +1722,7 @@ const sr = {
   activateLabel: o,
   trailingAction: l
 }) => {
-  const d = n ?? t ?? "File", m = tr(a, t, r), f = /* @__PURE__ */ s(
+  const d = n ?? t ?? "File", u = tr(a, t, r), f = /* @__PURE__ */ s(
     "div",
     {
       className: k(
@@ -1735,19 +1735,19 @@ const sr = {
         weight: "regular"
       })
     }
-  ), h = /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-1 flex-col text-left", children: [
+  ), h = /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-1 flex-col text-left", children: [
     /* @__PURE__ */ s("p", { className: "truncate font-medium leading-snug", children: d }),
-    m ? /* @__PURE__ */ s(
+    u ? /* @__PURE__ */ s(
       "p",
       {
         className: k(
           "truncate text-xs leading-4",
           sr[e]
         ),
-        children: m
+        children: u
       }
     ) : null
-  ] }), g = i ? /* @__PURE__ */ u(
+  ] }), g = i ? /* @__PURE__ */ m(
     "button",
     {
       type: "button",
@@ -1762,11 +1762,11 @@ const sr = {
         h
       ]
     }
-  ) : /* @__PURE__ */ u(se, { children: [
+  ) : /* @__PURE__ */ m(ne, { children: [
     f,
     h
   ] });
-  return /* @__PURE__ */ u("div", { className: "flex items-center gap-3 px-3 py-2", children: [
+  return /* @__PURE__ */ m("div", { className: "flex items-center gap-3 px-3 py-2", children: [
     g,
     l ? /* @__PURE__ */ s("div", { className: "shrink-0", children: l }) : null
   ] });
@@ -1823,7 +1823,7 @@ const rr = ({
   items: o,
   text: l,
   groupPosition: d,
-  onClick: m,
+  onClick: u,
   onDismiss: f
 }) => {
   const h = Re(e), g = e === "composer" && !!f, c = rr({
@@ -1834,7 +1834,7 @@ const rr = ({
     title: i,
     items: o
   }), b = (x) => {
-    if ((m == null ? void 0 : m(x)) === !1) return;
+    if ((u == null ? void 0 : u(x)) === !1) return;
     const p = c[x];
     if (!p) return;
     const _ = p.filename ?? ie(p.src);
@@ -1882,7 +1882,7 @@ const rr = ({
   onNext: t,
   prevLabel: n = "Previous",
   nextLabel: a = "Next"
-}) => /* @__PURE__ */ u(se, { children: [
+}) => /* @__PURE__ */ m(ne, { children: [
   /* @__PURE__ */ s(
     "button",
     {
@@ -1912,7 +1912,7 @@ const rr = ({
   tone: i = "dark",
   onTriggered: o
 }) => {
-  const [l, d] = B(!1), m = J(
+  const [l, d] = B(!1), u = J(
     (c) => {
       c.stopPropagation(), !l && (d(!0), _s(e, t).catch(() => {
       }).finally(() => {
@@ -1928,7 +1928,7 @@ const rr = ({
     "button",
     {
       type: "button",
-      onClick: m,
+      onClick: u,
       disabled: l,
       "aria-label": a,
       className: k(
@@ -1958,17 +1958,17 @@ const rr = ({
     "button",
     {
       type: "button",
-      onClick: m,
+      onClick: u,
       disabled: l,
       "aria-label": a,
       className: "mes-media-viewer__action",
       children: l ? /* @__PURE__ */ s(Se, { size: 20, weight: "bold", "aria-hidden": !0 }) : /* @__PURE__ */ s(Ee, { size: 20, weight: "bold", "aria-hidden": !0 })
     }
-  ) : /* @__PURE__ */ u(
+  ) : /* @__PURE__ */ m(
     "button",
     {
       type: "button",
-      onClick: m,
+      onClick: u,
       disabled: l,
       "aria-label": f ? a : void 0,
       className: k(
@@ -2006,10 +2006,10 @@ const rr = ({
   }, [e]);
   return K(() => {
     if (!n || e <= 1) return;
-    const d = (m) => {
-      if (m.key !== "ArrowLeft" && m.key !== "ArrowRight") return;
+    const d = (u) => {
+      if (u.key !== "ArrowLeft" && u.key !== "ArrowRight") return;
       const f = document.activeElement;
-      f && (f.tagName === "VIDEO" || f.tagName === "AUDIO") || (m.preventDefault(), m.key === "ArrowLeft" ? o() : l());
+      f && (f.tagName === "VIDEO" || f.tagName === "AUDIO") || (u.preventDefault(), u.key === "ArrowLeft" ? o() : l());
     };
     return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
   }, [n, e, o, l]), { index: r, prev: o, next: l };
@@ -2068,7 +2068,7 @@ const rr = ({
   // `jsx-a11y` rules below don't model `<dialog>` as interactive, so
   // we silence them locally with the rationale captured here.
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-  /* @__PURE__ */ u(
+  /* @__PURE__ */ m(
     "dialog",
     {
       ref: l,
@@ -2082,9 +2082,9 @@ const rr = ({
         h.target === l.current && t();
       },
       children: [
-        /* @__PURE__ */ u("div", { className: "mes-media-viewer__chrome", children: [
+        /* @__PURE__ */ m("div", { className: "mes-media-viewer__chrome", children: [
           a ? /* @__PURE__ */ s("span", { className: "mes-media-viewer__counter", children: a }) : null,
-          /* @__PURE__ */ u("div", { className: "mes-media-viewer__actions", children: [
+          /* @__PURE__ */ m("div", { className: "mes-media-viewer__actions", children: [
             r,
             /* @__PURE__ */ s(
               "button",
@@ -2117,7 +2117,7 @@ const rr = ({
     () => (l == null ? void 0 : l.filename) ?? (l ? ie(l.src) : "image"),
     [l]
   );
-  return l ? /* @__PURE__ */ u(
+  return l ? /* @__PURE__ */ m(
     _t,
     {
       open: e,
@@ -2167,25 +2167,25 @@ const rr = ({
 }) => {
   const r = e.length;
   if (r === 0) return null;
-  const i = e.slice(0, Math.min(r, n)), o = r - i.length, l = (d, m, f) => {
+  const i = e.slice(0, Math.min(r, n)), o = r - i.length, l = (d, u, f) => {
     const h = k(ur, "h-full w-full");
-    return t ? /* @__PURE__ */ u(
+    return t ? /* @__PURE__ */ m(
       "button",
       {
         type: "button",
-        onClick: () => t(m),
-        "aria-label": d.ariaLabel ?? `Open media ${m + 1}`,
+        onClick: () => t(u),
+        "aria-label": d.ariaLabel ?? `Open media ${u + 1}`,
         className: k(h, "cursor-zoom-in"),
         children: [
           d.content,
           f
         ]
       },
-      m
-    ) : /* @__PURE__ */ u("div", { className: h, children: [
+      u
+    ) : /* @__PURE__ */ m("div", { className: h, children: [
       d.content,
       f
-    ] }, m);
+    ] }, u);
   };
   return i.length === 1 ? /* @__PURE__ */ s("div", { className: k("aspect-square w-full", a), children: l(i[0], 0) }) : i.length === 2 ? /* @__PURE__ */ s(
     "div",
@@ -2194,9 +2194,9 @@ const rr = ({
         "grid aspect-[16/9] w-full grid-cols-2 gap-0.5",
         a
       ),
-      children: i.map((d, m) => l(d, m))
+      children: i.map((d, u) => l(d, u))
     }
-  ) : i.length === 3 ? /* @__PURE__ */ u(
+  ) : i.length === 3 ? /* @__PURE__ */ m(
     "div",
     {
       className: k(
@@ -2216,12 +2216,12 @@ const rr = ({
         "grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5",
         a
       ),
-      children: i.map((d, m) => {
-        const f = o > 0 && m === i.length - 1;
+      children: i.map((d, u) => {
+        const f = o > 0 && u === i.length - 1;
         return l(
           d,
-          m,
-          f ? /* @__PURE__ */ u("div", { className: "absolute inset-0 flex items-center justify-center bg-black/55 text-2xl font-semibold text-white", children: [
+          u,
+          f ? /* @__PURE__ */ m("div", { className: "absolute inset-0 flex items-center justify-center bg-black/55 text-2xl font-semibold text-white", children: [
             "+",
             o
           ] }) : null
@@ -2261,10 +2261,10 @@ const rr = ({
   alt: n.alt,
   filename: t && e.length === 1 ? t : t ? `${t} (${a + 1})` : void 0
 })), fr = ({ src: e, alt: t, filename: n, loading: a = "lazy", onClick: r, onDismiss: i }) => {
-  const { viewerOpen: o, viewerIndex: l, handleActivate: d, closeViewer: m } = Le(
+  const { viewerOpen: o, viewerIndex: l, handleActivate: d, closeViewer: u } = Le(
     r
   );
-  return /* @__PURE__ */ u("div", { className: "relative w-fit", children: [
+  return /* @__PURE__ */ m("div", { className: "relative w-fit", children: [
     /* @__PURE__ */ s(
       "button",
       {
@@ -2292,7 +2292,7 @@ const rr = ({
         open: o,
         items: Cs([{ src: e, alt: t }], n),
         initialIndex: l,
-        onClose: m
+        onClose: u
       }
     )
   ] });
@@ -2307,15 +2307,15 @@ const rr = ({
   loading: l = "lazy",
   onClick: d
 }) => {
-  const m = hr({ src: t, alt: n, items: r }), f = Re(e), { viewerOpen: h, viewerIndex: g, handleActivate: c, closeViewer: b } = Le(
+  const u = hr({ src: t, alt: n, items: r }), f = Re(e), { viewerOpen: h, viewerIndex: g, handleActivate: c, closeViewer: b } = Le(
     d
   );
-  if (m.length === 0)
+  if (u.length === 0)
     return null;
-  const v = m.map(
-    (x, p) => mr(x, p, m.length, l)
+  const v = u.map(
+    (x, p) => mr(x, p, u.length, l)
   );
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     Me,
     {
       variant: f,
@@ -2328,7 +2328,7 @@ const rr = ({
           ys,
           {
             open: h,
-            items: Cs(m, a),
+            items: Cs(u, a),
             initialIndex: g,
             onClose: b
           }
@@ -2353,11 +2353,11 @@ const rr = ({
   }), l = t[r], d = re(
     () => (l == null ? void 0 : l.filename) ?? (l ? ie(l.src) : "document"),
     [l]
-  ), m = re(
+  ), u = re(
     () => l ? wr(l.src) : void 0,
     [l]
   );
-  return !l || !m ? null : /* @__PURE__ */ u(
+  return !l || !u ? null : /* @__PURE__ */ m(
     _t,
     {
       open: e,
@@ -2369,7 +2369,7 @@ const rr = ({
         /* @__PURE__ */ s(
           "iframe",
           {
-            src: m,
+            src: u,
             title: d,
             className: "mes-media-viewer__iframe",
             sandbox: "allow-scripts allow-forms allow-popups allow-downloads"
@@ -2428,18 +2428,18 @@ const rr = ({
   text: o,
   groupPosition: l,
   onClick: d,
-  onDismiss: m
+  onDismiss: u
 }) => {
   const f = Re(e), h = _r({ src: t, filename: n, fileSize: a, title: r, items: i }), { viewerOpen: g, viewerIndex: c, handleActivate: b, closeViewer: v } = Le(
     d
-  ), x = e === "composer" && !!m;
+  ), x = e === "composer" && !!u;
   if (h.length === 0)
     return null;
   const p = h.map((_) => ({
     src: _.src,
     filename: _.filename ?? ie(_.src)
   }));
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     Me,
     {
       variant: f,
@@ -2448,7 +2448,7 @@ const rr = ({
       "data-testid": "pdf-attachment",
       children: [
         /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: h.map((_, w) => {
-          const C = _.filename ?? ie(_.src), D = x && w === 0 ? /* @__PURE__ */ s(Ae, { onClick: m, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ s(
+          const C = _.filename ?? ie(_.src), D = x && w === 0 ? /* @__PURE__ */ s(Ae, { onClick: u, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ s(
             Ns,
             {
               url: _.src,
@@ -2500,7 +2500,7 @@ const rr = ({
     () => (l == null ? void 0 : l.filename) ?? (l ? ie(l.src) : "video"),
     [l]
   );
-  return l ? /* @__PURE__ */ u(
+  return l ? /* @__PURE__ */ m(
     _t,
     {
       open: e,
@@ -2539,7 +2539,7 @@ const rr = ({
 }, Er = () => /* @__PURE__ */ s("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ s("span", { className: "flex size-12 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur", children: /* @__PURE__ */ s(rt, { className: "size-6", weight: "fill", "aria-hidden": !0 }) }) }), Is = ({
   item: e,
   index: t
-}) => /* @__PURE__ */ u("div", { className: "absolute inset-0 size-full bg-[#0d0d0d]", children: [
+}) => /* @__PURE__ */ m("div", { className: "absolute inset-0 size-full bg-[#0d0d0d]", children: [
   e.poster ? /* @__PURE__ */ s(
     "img",
     {
@@ -2575,15 +2575,15 @@ const rr = ({
   preload: n.preload,
   filename: t && e.length === 1 ? t : t ? `${t} (${a + 1})` : void 0
 })), Mr = ({ src: e, poster: t, mimeType: n, filename: a, preload: r, onClick: i, onDismiss: o }) => {
-  const { viewerOpen: l, viewerIndex: d, handleActivate: m, closeViewer: f } = Le(
+  const { viewerOpen: l, viewerIndex: d, handleActivate: u, closeViewer: f } = Le(
     i
   );
-  return /* @__PURE__ */ u("div", { className: "relative w-fit", children: [
+  return /* @__PURE__ */ m("div", { className: "relative w-fit", children: [
     /* @__PURE__ */ s(
       "button",
       {
         type: "button",
-        onClick: () => m(0),
+        onClick: () => u(0),
         "aria-label": "Play video",
         className: "relative block size-[280px] cursor-pointer overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-black/40",
         children: /* @__PURE__ */ s(Is, { item: { src: e, poster: t, mimeType: n }, index: 0 })
@@ -2613,17 +2613,17 @@ const rr = ({
   text: o,
   groupPosition: l,
   preload: d,
-  onClick: m
+  onClick: u
 }) => {
   const f = Tr({ src: t, poster: n, mimeType: a, preload: d, items: i }), h = Re(e), { viewerOpen: g, viewerIndex: c, handleActivate: b, closeViewer: v } = Le(
-    m
+    u
   );
   if (f.length === 0)
     return null;
   const x = f.map(
     (p, _) => Ir(p, _, f.length)
   );
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     Me,
     {
       variant: h,
@@ -2669,7 +2669,7 @@ const rr = ({
 function Pr(e) {
   return Te(As)[e] ?? Fr[e];
 }
-const Or = V.lazy(() => import("./Card-qS17qnN0.js")), $r = V.lazy(() => import("./Card-Dvcwvr5y.js")), Ur = () => /* @__PURE__ */ s(
+const Or = j.lazy(() => import("./Card-qS17qnN0.js")), $r = j.lazy(() => import("./Card-DRuAkKPA.js")), Ur = () => /* @__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)]",
@@ -2727,7 +2727,7 @@ const Or = V.lazy(() => import("./Card-qS17qnN0.js")), $r = V.lazy(() => import(
     const g = (h = e.metadata) == null ? void 0 : h.amount_text;
     if (!g) return null;
     const c = t ? "message-tip-standalone" : "message-tag message-tag--tip", b = t ? `${g} tip` : `Delivered with ${g} tip`;
-    return /* @__PURE__ */ u("div", { className: c, children: [
+    return /* @__PURE__ */ m("div", { className: c, children: [
       /* @__PURE__ */ s(qn, { size: t ? 14 : 12 }),
       /* @__PURE__ */ s("span", { children: b })
     ] });
@@ -2736,19 +2736,19 @@ const Or = V.lazy(() => import("./Card-qS17qnN0.js")), $r = V.lazy(() => import(
     "message-chatbot-indicator",
     n ? "message-chatbot-indicator--sender" : "message-chatbot-indicator--receiver",
     o ? "message-chatbot-indicator--attachment" : "message-chatbot-indicator--text"
-  ].join(" "), m = /* @__PURE__ */ s("span", { className: "message-chatbot-indicator__label", children: l }), f = /* @__PURE__ */ s("span", { className: "message-chatbot-indicator__icon", children: /* @__PURE__ */ s(Br, { size: o ? 12 : 15 }) });
-  return /* @__PURE__ */ s("div", { className: d, "data-testid": "message-chatbot-indicator", children: n && !o ? /* @__PURE__ */ u(se, { children: [
-    m,
+  ].join(" "), u = /* @__PURE__ */ s("span", { className: "message-chatbot-indicator__label", children: l }), f = /* @__PURE__ */ s("span", { className: "message-chatbot-indicator__icon", children: /* @__PURE__ */ s(Br, { size: o ? 12 : 15 }) });
+  return /* @__PURE__ */ s("div", { className: d, "data-testid": "message-chatbot-indicator", children: n && !o ? /* @__PURE__ */ m(ne, { children: [
+    u,
     f
-  ] }) : /* @__PURE__ */ u(se, { children: [
+  ] }) : /* @__PURE__ */ m(ne, { children: [
     f,
-    m
+    u
   ] }) });
 }, qr = ({
   selected: e,
   onVoteUp: t,
   onVoteDown: n
-}) => /* @__PURE__ */ u("div", { className: "message-vote-buttons", children: [
+}) => /* @__PURE__ */ m("div", { className: "message-vote-buttons", children: [
   /* @__PURE__ */ s(
     "button",
     {
@@ -2786,7 +2786,7 @@ const Or = V.lazy(() => import("./Card-qS17qnN0.js")), $r = V.lazy(() => import(
           return r.id;
       }
   })();
-  return e.id !== n ? null : /* @__PURE__ */ u(se, { children: [
+  return e.id !== n ? null : /* @__PURE__ */ m(ne, { children: [
     /* @__PURE__ */ s(Kn, { weight: "bold", "aria-hidden": "true" }),
     /* @__PURE__ */ s("span", { "data-testid": "sent-message-delivery-status", children: "Delivered" })
   ] });
@@ -2859,7 +2859,7 @@ const Jr = {
   cta: o,
   trailingAction: l
 }) => {
-  const d = e === "dark", m = t ?? (d ? n : void 0) ?? "", f = m.trim() !== "", h = a != null && a.trim() !== "", g = typeof r == "string" ? r.trim() : "", c = g !== "", b = o != null;
+  const d = e === "dark", u = t ?? (d ? n : void 0) ?? "", f = u.trim() !== "", h = a != null && a.trim() !== "", g = typeof r == "string" ? r.trim() : "", c = g !== "", b = o != null;
   if (!f && !h && !c && !b) return null;
   const x = k(
     "truncate text-base font-medium leading-6",
@@ -2868,13 +2868,13 @@ const Jr = {
     "truncate text-xs leading-4",
     si[e]
   );
-  return /* @__PURE__ */ u("div", { className: "px-4 py-3", children: [
-    /* @__PURE__ */ u("div", { className: "flex items-end gap-3", children: [
-      /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
-        /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-col gap-1", children: [
-          f && /* @__PURE__ */ u("div", { className: "flex min-w-0 items-center gap-2", children: [
+  return /* @__PURE__ */ m("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ m("div", { className: "flex items-end gap-3", children: [
+      /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+        /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          f && /* @__PURE__ */ m("div", { className: "flex min-w-0 items-center gap-2", children: [
             i ? /* @__PURE__ */ s("span", { className: "shrink-0", children: i }) : null,
-            /* @__PURE__ */ s("p", { className: k("min-w-0", x), children: m })
+            /* @__PURE__ */ s("p", { className: k("min-w-0", x), children: u })
           ] }),
           h && /* @__PURE__ */ s("p", { className: p, children: a })
         ] }),
@@ -2902,15 +2902,15 @@ const Jr = {
   bgClassName: l,
   "data-testid": d
 }) => {
-  const m = n != null || a != null, f = k(
+  const u = n != null || a != null, f = k(
     ni,
     l ?? (e === "dark" ? "bg-[#1e2330]" : "bg-white"),
     // `focus-ring` is a design-system utility from the component-library
     // tailwind preset — outline-none + a black 2px focus-visible ring
     // with offset, so keyboard users can see the focused card.
-    m ? "cursor-pointer no-underline focus-ring" : null
+    u ? "cursor-pointer no-underline focus-ring" : null
   ), h = o ? /* @__PURE__ */ s("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: o }) : null;
-  return n ? /* @__PURE__ */ u(
+  return n ? /* @__PURE__ */ m(
     "a",
     {
       ref: i,
@@ -2925,7 +2925,7 @@ const Jr = {
         h
       ]
     }
-  ) : a ? /* @__PURE__ */ u(
+  ) : a ? /* @__PURE__ */ m(
     "button",
     {
       ref: i,
@@ -2939,7 +2939,7 @@ const Jr = {
         h
       ]
     }
-  ) : /* @__PURE__ */ u(
+  ) : /* @__PURE__ */ m(
     "div",
     {
       ref: i,
@@ -2970,7 +2970,7 @@ const Jr = {
   topLeft: i,
   topRight: o
 }) => {
-  const l = ce(r), d = !!n && l === "video", m = he(t);
+  const l = ce(r), d = !!n && l === "video", u = he(t);
   return Ye(r, n) ? /* @__PURE__ */ s("div", { className: "p-3", children: /* @__PURE__ */ s(
     "audio",
     {
@@ -2980,7 +2980,7 @@ const Jr = {
       className: "block w-full",
       children: /* @__PURE__ */ s("track", { kind: "captions" })
     }
-  ) }) : /* @__PURE__ */ u(
+  ) }) : /* @__PURE__ */ m(
     "div",
     {
       className: k(
@@ -2992,7 +2992,7 @@ const Jr = {
           "video",
           {
             src: n,
-            poster: m,
+            poster: u,
             controls: !0,
             playsInline: !0,
             preload: "metadata",
@@ -3002,7 +3002,7 @@ const Jr = {
         ) : t ? /* @__PURE__ */ s(
           "img",
           {
-            src: m ?? t,
+            src: u ?? t,
             alt: a ?? "",
             draggable: !1,
             className: "absolute inset-0 h-full w-full object-cover"
@@ -3035,7 +3035,7 @@ const Jr = {
   sourceUrl: o,
   layout: l = "featured",
   appIcon: d,
-  cta: m,
+  cta: u,
   onDismiss: f,
   onEditClick: h
 }) => {
@@ -3058,7 +3058,7 @@ const Jr = {
       children: /* @__PURE__ */ s(Zn, { className: "size-5", weight: "regular" })
     }
   ) : void 0;
-  return c ? /* @__PURE__ */ s(Be, { variant: "dark", bgClassName: Et, children: /* @__PURE__ */ u("div", { className: "flex items-center gap-2 pr-3", children: [
+  return c ? /* @__PURE__ */ s(Be, { variant: "dark", bgClassName: Et, children: /* @__PURE__ */ m("div", { className: "flex items-center gap-2 pr-3", children: [
     /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ s(
       je,
       {
@@ -3069,7 +3069,7 @@ const Jr = {
       }
     ) }),
     b && /* @__PURE__ */ s("div", { className: "shrink-0", children: b })
-  ] }) }) : /* @__PURE__ */ u(
+  ] }) }) : /* @__PURE__ */ m(
     Be,
     {
       variant: "dark",
@@ -3095,7 +3095,7 @@ const Jr = {
             description: n,
             url: a,
             appIcon: d,
-            cta: m,
+            cta: u,
             trailingAction: v
           }
         )
@@ -3112,16 +3112,16 @@ const Jr = {
   layout: o = "featured",
   appIcon: l,
   cta: d,
-  onClick: m
+  onClick: u
 }) => {
-  const f = St(a, i), h = kt(n), g = d == null && h != null && !f ? h : void 0, c = d == null && !f ? m : void 0, b = Ye(a, i) ? Et : void 0, v = d && m ? {
+  const f = St(a, i), h = kt(n), g = d == null && h != null && !f ? h : void 0, c = d == null && !f ? u : void 0, b = Ye(a, i) ? Et : void 0, v = d && u ? {
     ...d,
     onClick: () => {
       var x;
-      m(), (x = d.onClick) == null || x.call(d);
+      u(), (x = d.onClick) == null || x.call(d);
     }
   } : d;
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     Be,
     {
       variant: "light",
@@ -3165,11 +3165,11 @@ const Jr = {
   sourceUrl: o,
   layout: l = "featured",
   appIcon: d,
-  cta: m,
+  cta: u,
   onClick: f
 }) => {
-  const h = St(r, o), g = kt(a), c = m == null && g != null && !h ? g : void 0, b = m == null && !h && c != null ? f : void 0;
-  return /* @__PURE__ */ u(
+  const h = St(r, o), g = kt(a), c = u == null && g != null && !h ? g : void 0, b = u == null && !h && c != null ? f : void 0;
+  return /* @__PURE__ */ m(
     Be,
     {
       variant: "dark",
@@ -3196,7 +3196,7 @@ const Jr = {
             description: n,
             url: a,
             appIcon: d,
-            cta: m
+            cta: u
           }
         )
       ]
@@ -3404,7 +3404,7 @@ const pi = ({
   var b;
   const r = Ds(n.attachments);
   if (r.length === 0) return null;
-  const i = ui(r), o = (b = n.text) == null ? void 0 : b.trim(), l = r.find((v) => v.type === "link"), d = (l == null ? void 0 : l.type) === "link" ? es(l.attachments[0] ?? {}).url : void 0, m = o && ci(o, d) ? void 0 : o;
+  const i = ui(r), o = (b = n.text) == null ? void 0 : b.trim(), l = r.find((v) => v.type === "link"), d = (l == null ? void 0 : l.type) === "link" ? es(l.attachments[0] ?? {}).url : void 0, u = o && ci(o, d) ? void 0 : o;
   let f = 0;
   const h = [], g = (v, x) => {
     const p = t ? Jt.Sent : Jt.Received;
@@ -3437,8 +3437,8 @@ const pi = ({
       return;
     }
     c(v, `media-${x}`);
-  }), /* @__PURE__ */ u("div", { className: "str-chat__message-bubble-wrapper", children: [
-    /* @__PURE__ */ u(
+  }), /* @__PURE__ */ m("div", { className: "str-chat__message-bubble-wrapper", children: [
+    /* @__PURE__ */ m(
       "div",
       {
         className: "str-chat__message-bubble",
@@ -3451,11 +3451,11 @@ const pi = ({
         },
         children: [
           h,
-          !m && /* @__PURE__ */ s(nt, {})
+          !u && /* @__PURE__ */ s(nt, {})
         ]
       }
     ),
-    m ? /* @__PURE__ */ u("div", { className: "str-chat__message-bubble", children: [
+    u ? /* @__PURE__ */ m("div", { className: "str-chat__message-bubble", children: [
       /* @__PURE__ */ s(
         $e,
         {
@@ -3477,7 +3477,7 @@ const pi = ({
     groupedByUser: o,
     handleAction: l,
     handleOpenThread: d,
-    handleRetry: m,
+    handleRetry: u,
     highlighted: f,
     isMessageAIGenerated: h,
     isMyMessage: g,
@@ -3491,7 +3491,7 @@ const pi = ({
     MessageActions: M,
     MessageBlocked: P = en,
     MessageBouncePrompt: $ = tn,
-    MessageDeleted: j = sn,
+    MessageDeleted: V = sn,
     MessageIsThreadReplyInChannelButtonIndicator: Q = nn,
     MessageRepliesCountButton: ee = an,
     ReminderNotification: X = rn,
@@ -3522,12 +3522,12 @@ const pi = ({
   if (dn(c))
     return null;
   if (c.deleted_at || c.type === "deleted")
-    return /* @__PURE__ */ s(j, { message: c });
+    return /* @__PURE__ */ s(V, { message: c });
   if (un(c))
     return /* @__PURE__ */ s(P, {});
   const ae = !v && !!c.reply_count, ue = !v && c.show_in_channel && c.parent_id, le = c.status === "failed" && ((Dt = c.error) == null ? void 0 : Dt.status) !== 403, Tt = mn(c);
   let ge;
-  le ? ge = () => m(c) : Tt && (ge = () => O(!0));
+  le ? ge = () => u(c) : Tt && (ge = () => O(!0));
   const te = g(), Us = k(
     "str-chat__message str-chat__message-simple",
     `str-chat__message--${c.type}`,
@@ -3560,7 +3560,7 @@ const pi = ({
     paymentStatus: (Vt = c.metadata) == null ? void 0 : Vt.payment_status,
     onFetchSource: D ? () => D(c, _) : void 0
   };
-  return /* @__PURE__ */ u(se, { children: [
+  return /* @__PURE__ */ m(ne, { children: [
     a && /* @__PURE__ */ s(
       T,
       {
@@ -3575,7 +3575,7 @@ const pi = ({
         open: R
       }
     ),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ m(
       "div",
       {
         className: Us,
@@ -3585,7 +3585,7 @@ const pi = ({
           A && /* @__PURE__ */ s(A, {}),
           !!F && /* @__PURE__ */ s(X, { reminder: F }),
           c.user && /* @__PURE__ */ s(
-            ne,
+            se,
             {
               className: "str-chat__avatar str-chat__message-sender-avatar",
               id: c.user.id,
@@ -3613,7 +3613,7 @@ const pi = ({
                 marginInlineEnd: 0,
                 marginInlineStart: 0
               },
-              children: Mt ? /* @__PURE__ */ s(Qe, { message: c, standalone: !0 }) : Gr(c) ? /* @__PURE__ */ s("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+              children: Mt ? /* @__PURE__ */ s(Qe, { message: c, standalone: !0 }) : Gr(c) ? /* @__PURE__ */ s("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
                 te && M && /* @__PURE__ */ s(M, {}),
                 te ? /* @__PURE__ */ s(
                   Pe,
@@ -3631,8 +3631,8 @@ const pi = ({
                   }
                 ),
                 !te && M && /* @__PURE__ */ s(M, {})
-              ] }) }) : Hr(c) ? /* @__PURE__ */ u("div", { className: "str-chat__message-bubble-wrapper", children: [
-                /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+              ] }) }) : Hr(c) ? /* @__PURE__ */ m("div", { className: "str-chat__message-bubble-wrapper", children: [
+                /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
                   te && M && /* @__PURE__ */ s(M, {}),
                   te ? /* @__PURE__ */ s(
                     Pe,
@@ -3675,7 +3675,7 @@ const pi = ({
                   },
                   renderText: b
                 }
-              ) : /* @__PURE__ */ s("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ u("div", { className: "str-chat__message-bubble", children: [
+              ) : /* @__PURE__ */ s("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ m("div", { className: "str-chat__message-bubble", children: [
                 pe && !At && /* @__PURE__ */ s(
                   Qe,
                   {
@@ -3709,7 +3709,7 @@ const pi = ({
               ] }) })
             }
           ),
-          !Bs && !Mt && /* @__PURE__ */ u("div", { className: "str-chat__message-footer", children: [
+          !Bs && !Mt && /* @__PURE__ */ m("div", { className: "str-chat__message-footer", children: [
             (!pe || At) && /* @__PURE__ */ s(
               Qe,
               {
@@ -3741,7 +3741,7 @@ const pi = ({
       c.id
     )
   ] });
-}, vi = V.memo(
+}, vi = j.memo(
   bi,
   (e, t) => e.chatbotVotingEnabled !== t.chatbotVotingEnabled || e.viewerLanguage !== t.viewerLanguage ? !1 : Ks(e, t)
 ), xi = (e) => {
@@ -3789,7 +3789,7 @@ const pi = ({
   onDismiss: t
 }) => {
   const { og_scrape_url: n, title: a, image_url: r } = e;
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ m(
     "a",
     {
       href: n,
@@ -3817,7 +3817,7 @@ const pi = ({
             children: /* @__PURE__ */ s(Ge, { className: "size-4 text-black/90" })
           }
         ),
-        /* @__PURE__ */ u("div", { className: "p-2", children: [
+        /* @__PURE__ */ m("div", { className: "p-2", children: [
           a && /* @__PURE__ */ s("div", { className: "truncate text-[14px] font-medium leading-5 text-white", children: a }),
           /* @__PURE__ */ s("div", { className: "truncate text-[12px] leading-4 text-white/55", children: n })
         ] })
@@ -3846,7 +3846,7 @@ const pi = ({
     // fixed-height hero would spill out of the collapsed card box.
     /* @__PURE__ */ s("div", { className: "messaging-link-preview-list flex min-h-0 flex-col items-stretch w-full gap-2 mb-4 overflow-y-auto overscroll-contain", children: t.map((r) => /* @__PURE__ */ s("div", { className: "w-full shrink-0", children: /* @__PURE__ */ s(yi, { link: r, onDismiss: n }) }, r.og_scrape_url)) })
   ) : null;
-}, It = V.createContext(!1), gl = () => Te(It), Si = ({ sendMessage: e, disabled: t, ...n }) => /* @__PURE__ */ s(
+}, It = j.createContext(!1), gl = () => Te(It), Si = ({ sendMessage: e, disabled: t, ...n }) => /* @__PURE__ */ s(
   "button",
   {
     ...n,
@@ -3870,7 +3870,7 @@ const pi = ({
     // content height and the squeeze never reaches the preview list. Stream's
     // <MessageInput> renders its Input directly (context providers only, no
     // wrapper element), so this is a direct flex item of that row.
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ m(
       "div",
       {
         className: "central-container flex min-h-0 flex-col gap-2 min-w-0 w-full self-stretch p-2 bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]",
@@ -3879,7 +3879,7 @@ const pi = ({
           /* @__PURE__ */ s(_n, {}),
           /* @__PURE__ */ s(Ci, {}),
           /* @__PURE__ */ s(i, {}),
-          /* @__PURE__ */ u("div", { className: "flex shrink-0", children: [
+          /* @__PURE__ */ m("div", { className: "flex shrink-0", children: [
             /* @__PURE__ */ s("div", { className: "w-full ml-2 mr-4 self-center leading-[0]", children: /* @__PURE__ */ s(
               Nn,
               {
@@ -3915,25 +3915,61 @@ const pi = ({
   disabledReason: a,
   composerInput: r
 }) => {
-  var l;
-  const { channel: i } = oe(), o = ((l = i == null ? void 0 : i.data) == null ? void 0 : l.frozen) === !0;
-  return n ? /* @__PURE__ */ u(se, { children: [
-    /* @__PURE__ */ s("div", { className: "messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4", children: a ? /* @__PURE__ */ s("p", { className: "max-w-[345px] text-center text-xs font-normal leading-[1.3] tracking-[0.12px] text-black/40", children: a }) : null }),
-    t == null ? void 0 : t()
-  ] }) : /* @__PURE__ */ u("div", { className: "flex min-h-0 flex-col gap-4 p-4", children: [
-    /* @__PURE__ */ u(
-      "div",
-      {
-        inert: o ? "" : void 0,
-        "aria-disabled": o || void 0,
-        className: "message-input flex min-h-0 items-end gap-4 aria-disabled:opacity-40",
-        children: [
-          e && /* @__PURE__ */ s("div", { className: "flex h-12 shrink-0 items-center justify-center", children: e() }),
-          /* @__PURE__ */ s(It.Provider, { value: o, children: /* @__PURE__ */ s(bn, { Input: r ?? Ei }) })
-        ]
-      }
-    ),
-    t == null ? void 0 : t()
+  var d;
+  const { channel: i } = oe(), o = ((d = i == null ? void 0 : i.data) == null ? void 0 : d.frozen) === !0, l = j.useRef(null);
+  return j.useEffect(() => {
+    const u = l.current, f = u == null ? void 0 : u.parentElement;
+    if (!u || !f)
+      return;
+    const h = () => {
+      f.style.setProperty(
+        "--messaging-composer-height",
+        `${u.offsetHeight + 16}px`
+      );
+    };
+    if (h(), typeof ResizeObserver > "u")
+      return;
+    const g = new ResizeObserver(h);
+    return g.observe(u), () => {
+      g.disconnect(), f.style.removeProperty("--messaging-composer-height");
+    };
+  }, []), n ? /* @__PURE__ */ m("div", { ref: l, className: "messaging-composer-chrome", children: [
+    /* @__PURE__ */ m("div", { className: "messaging-composer-backdrop", "aria-hidden": "true", children: [
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-gradient" })
+    ] }),
+    /* @__PURE__ */ m("div", { className: "relative z-10 flex flex-col", children: [
+      /* @__PURE__ */ s("div", { className: "messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4", children: a ? /* @__PURE__ */ s("p", { className: "max-w-[345px] text-center text-xs font-normal leading-[1.3] tracking-[0.12px] text-black/40", children: a }) : null }),
+      t == null ? void 0 : t()
+    ] })
+  ] }) : /* @__PURE__ */ m("div", { ref: l, className: "messaging-composer-chrome", children: [
+    /* @__PURE__ */ m("div", { className: "messaging-composer-backdrop", "aria-hidden": "true", children: [
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-blur" }),
+      /* @__PURE__ */ s("div", { className: "messaging-composer-backdrop-gradient" })
+    ] }),
+    /* @__PURE__ */ m("div", { className: "relative z-10 flex min-h-0 flex-col gap-4 p-4", children: [
+      /* @__PURE__ */ m(
+        "div",
+        {
+          inert: o ? "" : void 0,
+          "aria-disabled": o || void 0,
+          className: "message-input flex min-h-0 items-end gap-4 aria-disabled:opacity-40",
+          children: [
+            e && /* @__PURE__ */ s("div", { className: "flex h-12 shrink-0 items-center justify-center", children: e() }),
+            /* @__PURE__ */ s(It.Provider, { value: o, children: /* @__PURE__ */ s(bn, { Input: r ?? Ei }) })
+          ]
+        }
+      ),
+      t == null ? void 0 : t()
+    ] })
   ] });
 }, Ti = [
   "SYSTEM_DM_AGENT_PAUSED",
@@ -3969,7 +4005,7 @@ const pi = ({
   if (t === -1)
     return e;
   const n = t + tt.length;
-  return /* @__PURE__ */ u(se, { children: [
+  return /* @__PURE__ */ m(ne, { children: [
     e.slice(0, t),
     /* @__PURE__ */ s(
       "a",
@@ -3990,8 +4026,8 @@ const pi = ({
   );
   if ((n == null ? void 0 : n.kind) === "dm-agent") {
     const i = ((a = e.message.text) == null ? void 0 : a.trim()) || Mi[n.type];
-    return /* @__PURE__ */ u("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
-      /* @__PURE__ */ u(
+    return /* @__PURE__ */ m("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
+      /* @__PURE__ */ m(
         "div",
         {
           className: "mes-dm-agent-system-message mx-auto mb-2 inline-flex w-fit max-w-[min(100%,480px)] items-center justify-center gap-[10px] rounded-[12px] border border-[rgba(0,0,0,0.08)] p-3 text-[rgba(0,0,0,0.55)]",
@@ -4016,8 +4052,8 @@ const pi = ({
   }
   if ((n == null ? void 0 : n.kind) === "age-safety") {
     const i = ((r = e.message.text) == null ? void 0 : r.trim()) || Ri[n.type];
-    return /* @__PURE__ */ u("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
-      /* @__PURE__ */ u(
+    return /* @__PURE__ */ m("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
+      /* @__PURE__ */ m(
         "div",
         {
           className: "mes-age-safety-system-message box-border mx-auto mb-2 flex w-full max-w-[329px] items-start justify-center gap-3 rounded-[12px] border border-[var(--border-secondary,rgba(0,0,0,0.08))] bg-[var(--bg-warning-subtle,#fef3c6)] px-2 py-4 pl-5 text-[color:var(--text-warning-on-warning,#894b00)]",
@@ -4041,8 +4077,8 @@ const pi = ({
       !t && /* @__PURE__ */ s(Xe, { message: e.message })
     ] });
   }
-  return /* @__PURE__ */ u("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
-    /* @__PURE__ */ u("div", { className: "str-chat__message--system__text", children: [
+  return /* @__PURE__ */ m("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
+    /* @__PURE__ */ m("div", { className: "str-chat__message--system__text", children: [
       /* @__PURE__ */ s("div", { className: "str-chat__message--system__line" }),
       /* @__PURE__ */ s("p", { children: e.message.text }),
       /* @__PURE__ */ s("div", { className: "str-chat__message--system__line" })
@@ -4080,7 +4116,7 @@ const pi = ({
   }
   if ((n == null ? void 0 : n.typing_events) === !1)
     return null;
-  const m = e ? [] : Object.values(i).filter(
+  const u = e ? [] : Object.values(i).filter(
     ({ parent_id: x, user: p }) => {
       var _;
       return (p == null ? void 0 : p.id) !== ((_ = r.user) == null ? void 0 : _.id) && !x;
@@ -4090,7 +4126,7 @@ const pi = ({
       var _;
       return (p == null ? void 0 : p.id) !== ((_ = r.user) == null ? void 0 : _.id) && x === (a == null ? void 0 : a.id);
     }
-  ) : [], h = e ? f : m;
+  ) : [], h = e ? f : u;
   if (!h.length)
     return null;
   const g = (v = h[0]) == null ? void 0 : v.user, c = g != null && g.id && t.state.members[g.id] ? t.state.members[g.id].user : void 0;
@@ -4116,9 +4152,9 @@ const pi = ({
     style: {
       marginBottom: "var(--messaging-channel-input-spacer-height, 80px)"
     },
-    children: /* @__PURE__ */ u("div", { className: "str-chat__message str-chat__message-simple str-chat__message--regular str-chat__message--received str-chat__message--other str-chat__message--has-text", children: [
+    children: /* @__PURE__ */ m("div", { className: "str-chat__message str-chat__message-simple str-chat__message--regular str-chat__message--received str-chat__message--other str-chat__message--has-text", children: [
       /* @__PURE__ */ s(
-        ne,
+        se,
         {
           className: "str-chat__avatar str-chat__message-sender-avatar",
           id: e,
@@ -4128,7 +4164,7 @@ const pi = ({
           shape: "circle"
         }
       ),
-      /* @__PURE__ */ s("div", { className: "str-chat__message-inner mx-0", children: /* @__PURE__ */ s("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ s("div", { className: "str-chat__message-bubble", children: /* @__PURE__ */ s("div", { className: "str-chat__message-text min-h-11 flex items-center", children: /* @__PURE__ */ s("div", { className: "str-chat__message-text-inner str-chat__message-simple-text-inner", children: /* @__PURE__ */ u(
+      /* @__PURE__ */ s("div", { className: "str-chat__message-inner mx-0", children: /* @__PURE__ */ s("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ s("div", { className: "str-chat__message-bubble", children: /* @__PURE__ */ s("div", { className: "str-chat__message-text min-h-11 flex items-center", children: /* @__PURE__ */ s("div", { className: "str-chat__message-text-inner str-chat__message-simple-text-inner", children: /* @__PURE__ */ m(
         "svg",
         {
           "aria-hidden": "true",
@@ -4156,12 +4192,12 @@ function Ui(e, t) {
       return i;
   }
 }
-const Bi = () => null, ji = ({ className: e, message: t }) => /* @__PURE__ */ u(
+const Bi = () => null, ji = ({ className: e, message: t }) => /* @__PURE__ */ m(
   "div",
   {
     className: k("flex items-center justify-center h-full", e),
     children: [
-      /* @__PURE__ */ u("svg", { viewBox: "0 0 100 100", className: "size-8 fill-pebble", stroke: "none", children: [
+      /* @__PURE__ */ m("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(
           "animateTransform",
           {
@@ -4199,7 +4235,7 @@ const Bi = () => null, ji = ({ className: e, message: t }) => /* @__PURE__ */ u(
       t && /* @__PURE__ */ s("span", { className: "text-stone", children: t })
     ]
   }
-), Ve = V.memo(() => /* @__PURE__ */ s("div", { className: "messaging-loading-state flex items-center justify-center h-full", children: /* @__PURE__ */ u("div", { className: "flex items-center", children: [
+), Ve = j.memo(() => /* @__PURE__ */ s("div", { className: "messaging-loading-state flex items-center justify-center h-full", children: /* @__PURE__ */ m("div", { className: "flex items-center", children: [
   /* @__PURE__ */ s(ji, { className: "w-6 h-6" }),
   /* @__PURE__ */ s("span", { className: "text-sm text-stone", children: "Loading messages" })
 ] }) }));
@@ -4214,7 +4250,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
   showDeleteConversation: o = !0,
   showBlockParticipant: l = !0,
   showReportParticipant: d = !0,
-  onDeleteConversationClick: m,
+  onDeleteConversationClick: u,
   onBlockParticipantClick: f,
   onReportParticipantClick: h,
   customChannelActions: g,
@@ -4224,11 +4260,11 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
   renderHeaderTitleBadges: x
 }) => {
   var I, y, T, M, P, $;
-  const { channel: p } = oe(), { client: _ } = fe(), w = V.useMemo(
+  const { channel: p } = oe(), { client: _ } = fe(), w = j.useMemo(
     () => {
-      var j;
+      var V;
       return He(
-        (j = p.state) == null ? void 0 : j.members,
+        (V = p.state) == null ? void 0 : V.members,
         _ == null ? void 0 : _.userID,
         p.type
       );
@@ -4237,21 +4273,21 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
   ), C = mt(w == null ? void 0 : w.user), D = (y = w == null ? void 0 : w.user) == null ? void 0 : y.image, E = ut(p), R = x == null ? void 0 : x({
     channel: p,
     participant: w
-  }), O = "flex max-w-full flex-col items-center gap-1 rounded-[12px] px-1 py-0.5 text-center text-xs font-medium text-black/90", F = "flex min-w-0 max-w-full items-center gap-4 rounded-[12px] px-1 py-0.5 text-left text-black/90", L = /* @__PURE__ */ u(se, { children: [
+  }), O = "flex max-w-full flex-col items-center gap-1 rounded-[12px] px-1 py-0.5 text-center text-xs font-medium text-black/90", F = "flex min-w-0 max-w-full items-center gap-4 rounded-[12px] px-1 py-0.5 text-left text-black/90", L = /* @__PURE__ */ m(ne, { children: [
     /* @__PURE__ */ s("span", { className: "min-w-0 truncate", children: C }),
     R && /* @__PURE__ */ s("span", { className: "shrink-0", children: R })
   ] }), S = async () => {
     try {
       E ? await p.unpin() : await p.pin();
-    } catch (j) {
+    } catch (V) {
       console.error(
         "[CustomChannelHeader] Failed to update pinned status:",
-        j
+        V
       );
     }
   };
-  return /* @__PURE__ */ u("div", { className: "@container", children: [
-    /* @__PURE__ */ u("div", { className: "grid grid-cols-[1fr_auto_1fr] w-full items-center @lg:hidden px-6 py-3", children: [
+  return /* @__PURE__ */ m("div", { className: "@container", children: [
+    /* @__PURE__ */ m("div", { className: "grid grid-cols-[1fr_auto_1fr] w-full items-center @lg:hidden px-6 py-3", children: [
       /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: t && /* @__PURE__ */ s(
         "button",
         {
@@ -4271,7 +4307,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
         {
           className: "flex flex-col gap-1 items-center",
           "data-dd-privacy": "mask",
-          children: v ? /* @__PURE__ */ u(
+          children: v ? /* @__PURE__ */ m(
             "button",
             {
               type: "button",
@@ -4283,7 +4319,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
               ),
               children: [
                 /* @__PURE__ */ s(
-                  ne,
+                  se,
                   {
                     id: ((T = w == null ? void 0 : w.user) == null ? void 0 : T.id) || p.id || "unknown",
                     name: C,
@@ -4293,19 +4329,19 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
                     size: 48
                   }
                 ),
-                /* @__PURE__ */ u("span", { className: "flex max-w-full items-center gap-0.5", children: [
+                /* @__PURE__ */ m("span", { className: "flex max-w-full items-center gap-0.5", children: [
                   L,
                   /* @__PURE__ */ s(xe, { className: "size-3 shrink-0", weight: "bold" })
                 ] }),
-                a && /* @__PURE__ */ u("div", { className: "flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
+                a && /* @__PURE__ */ m("div", { className: "flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
                   /* @__PURE__ */ s(we, { className: "size-3 shrink-0 text-black/55" }),
                   /* @__PURE__ */ s("span", { children: Oe })
                 ] })
               ]
             }
-          ) : /* @__PURE__ */ u("div", { className: O, children: [
+          ) : /* @__PURE__ */ m("div", { className: O, children: [
             /* @__PURE__ */ s(
-              ne,
+              se,
               {
                 id: ((M = w == null ? void 0 : w.user) == null ? void 0 : M.id) || p.id || "unknown",
                 name: C,
@@ -4315,7 +4351,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
                 size: 48
               }
             ),
-            /* @__PURE__ */ u("p", { className: "flex max-w-full items-center justify-center gap-0.5", children: [
+            /* @__PURE__ */ m("p", { className: "flex max-w-full items-center justify-center gap-0.5", children: [
               L,
               /* @__PURE__ */ s(
                 xe,
@@ -4325,14 +4361,14 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
                 }
               )
             ] }),
-            a && /* @__PURE__ */ u("div", { className: "flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
+            a && /* @__PURE__ */ m("div", { className: "flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
               /* @__PURE__ */ s(we, { className: "size-3 shrink-0 text-black/55" }),
               /* @__PURE__ */ s("span", { children: Oe })
             ] })
           ] })
         }
       ),
-      /* @__PURE__ */ u("div", { className: "flex justify-end items-center gap-2", children: [
+      /* @__PURE__ */ m("div", { className: "flex justify-end items-center gap-2", children: [
         n && /* @__PURE__ */ s(
           "button",
           {
@@ -4362,7 +4398,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
             showReportParticipant: d,
             onLeaveConversation: r,
             onBlockParticipant: i,
-            onDeleteConversationClick: m,
+            onDeleteConversationClick: u,
             onBlockParticipantClick: f,
             onReportParticipantClick: h,
             customChannelActions: g,
@@ -4371,8 +4407,8 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
         ))
       ] })
     ] }),
-    /* @__PURE__ */ u("div", { className: "px-6 py-3 hidden @lg:flex items-center justify-between gap-3 min-h-12 border-b border-b-black/[0.08]", children: [
-      /* @__PURE__ */ u("div", { className: "flex items-center gap-4 min-w-0", "data-dd-privacy": "mask", children: [
+    /* @__PURE__ */ m("div", { className: "px-6 py-3 hidden @lg:flex items-center justify-between gap-3 min-h-12 border-b border-b-black/[0.08]", children: [
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-4 min-w-0", "data-dd-privacy": "mask", children: [
         t && e && /* @__PURE__ */ s(
           "button",
           {
@@ -4386,7 +4422,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
             children: /* @__PURE__ */ s(at, { className: "size-5 text-black/90" })
           }
         ),
-        v ? /* @__PURE__ */ u(
+        v ? /* @__PURE__ */ m(
           "button",
           {
             type: "button",
@@ -4398,7 +4434,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
             ),
             children: [
               /* @__PURE__ */ s(
-                ne,
+                se,
                 {
                   id: ((P = w == null ? void 0 : w.user) == null ? void 0 : P.id) || p.id || "unknown",
                   name: C,
@@ -4408,21 +4444,21 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
                   size: 48
                 }
               ),
-              /* @__PURE__ */ u("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ u("h1", { className: "flex min-w-0 items-center gap-1 font-medium text-black/90", children: [
+              /* @__PURE__ */ m("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ m("h1", { className: "flex min-w-0 items-center gap-1 font-medium text-black/90", children: [
                   L,
                   /* @__PURE__ */ s(xe, { className: "size-4 shrink-0", weight: "bold" })
                 ] }),
-                a && /* @__PURE__ */ u("div", { className: "mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
+                a && /* @__PURE__ */ m("div", { className: "mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
                   /* @__PURE__ */ s(we, { className: "size-3 shrink-0 text-black/55" }),
                   /* @__PURE__ */ s("span", { className: "truncate", children: Oe })
                 ] })
               ] })
             ]
           }
-        ) : /* @__PURE__ */ u("div", { className: F, children: [
+        ) : /* @__PURE__ */ m("div", { className: F, children: [
           /* @__PURE__ */ s(
-            ne,
+            se,
             {
               id: (($ = w == null ? void 0 : w.user) == null ? void 0 : $.id) || p.id || "unknown",
               name: C,
@@ -4432,8 +4468,8 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
               size: 48
             }
           ),
-          /* @__PURE__ */ u("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ u("h1", { className: "flex min-w-0 items-center gap-1 font-medium text-black/90", children: [
+          /* @__PURE__ */ m("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ m("h1", { className: "flex min-w-0 items-center gap-1 font-medium text-black/90", children: [
               L,
               /* @__PURE__ */ s(
                 xe,
@@ -4443,14 +4479,14 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
                 }
               )
             ] }),
-            a && /* @__PURE__ */ u("div", { className: "mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
+            a && /* @__PURE__ */ m("div", { className: "mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
               /* @__PURE__ */ s(we, { className: "size-3 shrink-0 text-black/55" }),
               /* @__PURE__ */ s("span", { className: "truncate", children: Oe })
             ] })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
         n && /* @__PURE__ */ s(
           "button",
           {
@@ -4480,7 +4516,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
             showReportParticipant: d,
             onLeaveConversation: r,
             onBlockParticipant: i,
-            onDeleteConversationClick: m,
+            onDeleteConversationClick: u,
             onBlockParticipantClick: f,
             onReportParticipantClick: h,
             customChannelActions: g,
@@ -4500,7 +4536,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
   onBlockParticipant: o,
   showDeleteConversation: l = !0,
   onDeleteConversationClick: d,
-  onBlockParticipantClick: m,
+  onBlockParticipantClick: u,
   onReportParticipantClick: f,
   showBlockParticipant: h = !0,
   showReportParticipant: g = !0,
@@ -4520,7 +4556,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
   composerInput: L
 }) => {
   var N, A, H, q;
-  const { channel: S } = oe(), { client: I } = fe(), y = V.useMemo(
+  const { channel: S } = oe(), { client: I } = fe(), y = j.useMemo(
     () => {
       var Y;
       return He(
@@ -4530,16 +4566,16 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
       );
     },
     [(N = S.state) == null ? void 0 : N.members, I == null ? void 0 : I.userID, S.type]
-  ), T = V.useMemo(() => {
+  ), T = j.useMemo(() => {
     var W;
     const Y = I == null ? void 0 : I.userID;
     return Y ? Object.values(((W = S.state) == null ? void 0 : W.members) || {}).find((Z) => {
       var de;
       return ((de = Z.user) == null ? void 0 : de.id) === Y;
     }) : void 0;
-  }, [I == null ? void 0 : I.userID, (A = S.state) == null ? void 0 : A.members]), M = ((H = T == null ? void 0 : T.user) == null ? void 0 : H.is_account) ?? (T == null ? void 0 : T.is_account), P = ((q = y == null ? void 0 : y.user) == null ? void 0 : q.is_account) ?? (y == null ? void 0 : y.is_account), $ = E && M === !1 && P === !0, j = S.state.messages.some(
+  }, [I == null ? void 0 : I.userID, (A = S.state) == null ? void 0 : A.members]), M = ((H = T == null ? void 0 : T.user) == null ? void 0 : H.is_account) ?? (T == null ? void 0 : T.is_account), P = ((q = y == null ? void 0 : y.user) == null ? void 0 : q.is_account) ?? (y == null ? void 0 : y.is_account), $ = E && M === !1 && P === !0, V = S.state.messages.some(
     (Y) => Y.type !== "deleted"
-  ), Q = p ? /* @__PURE__ */ s(V.Fragment, { children: p() }, "lt-channel-banner") : null, ee = F ? /* @__PURE__ */ s(
+  ), Q = p ? /* @__PURE__ */ s(j.Fragment, { children: p() }, "lt-channel-banner") : null, ee = F ? /* @__PURE__ */ s(
     ga,
     {
       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%)]",
@@ -4554,7 +4590,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
       showBlockParticipant: h,
       showReportParticipant: g,
       onDeleteConversationClick: d,
-      onBlockParticipantClick: m,
+      onBlockParticipantClick: u,
       onReportParticipantClick: f,
       customChannelActions: w,
       renderChannelActions: C,
@@ -4574,7 +4610,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
     },
     [x, D, R]
   );
-  return /* @__PURE__ */ s(se, { children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(ne, { children: /* @__PURE__ */ s(
     Sn,
     {
       overrides: {
@@ -4583,8 +4619,8 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
         UnreadMessagesNotification: () => null,
         UnreadMessagesSeparator: () => null
       },
-      children: /* @__PURE__ */ u(En, { children: [
-        !F && /* @__PURE__ */ u(se, { children: [
+      children: /* @__PURE__ */ m(En, { children: [
+        !F && /* @__PURE__ */ m(ne, { children: [
           /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s(
             Vi,
             {
@@ -4599,7 +4635,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
               showBlockParticipant: h,
               showReportParticipant: g,
               onDeleteConversationClick: d,
-              onBlockParticipantClick: m,
+              onBlockParticipantClick: u,
               onReportParticipantClick: f,
               customChannelActions: w,
               renderChannelActions: C,
@@ -4608,48 +4644,50 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
           ) }, "lt-channel-header"),
           Q
         ] }),
-        /* @__PURE__ */ u(
-          "div",
-          {
-            className: "flex-1 overflow-hidden relative",
-            children: [
-              F && !j && /* @__PURE__ */ s("div", { className: "str-chat__list", children: /* @__PURE__ */ u("div", { className: "str-chat__message-list-scroll", children: [
-                ee,
-                Q
-              ] }) }),
-              /* @__PURE__ */ s(
-                In,
-                {
-                  head: F && j ? /* @__PURE__ */ u("div", { className: "sticky top-0 z-10", children: [
-                    ee,
-                    Q
-                  ] }) : void 0,
-                  hideDeletedMessages: !0,
-                  hideNewMessageSeparator: !1
-                }
-              )
-            ]
-          },
-          "lt-channel-message-list"
-        ),
-        r ? /* @__PURE__ */ s(V.Fragment, { children: r(S) }, "lt-channel-conversation-footer") : null,
-        /* @__PURE__ */ s(
-          Ii,
-          {
-            ...n && {
-              renderActions: () => n == null ? void 0 : n(S)
+        /* @__PURE__ */ m("div", { className: "messaging-channel-layout relative flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ m(
+            "div",
+            {
+              className: "messaging-channel-message-list relative min-h-0 flex-1 overflow-hidden",
+              children: [
+                F && !V && /* @__PURE__ */ s("div", { className: "str-chat__list", children: /* @__PURE__ */ m("div", { className: "str-chat__message-list-scroll", children: [
+                  ee,
+                  Q
+                ] }) }),
+                /* @__PURE__ */ s(
+                  In,
+                  {
+                    head: F && V ? /* @__PURE__ */ m("div", { className: "sticky top-0 z-10", children: [
+                      ee,
+                      Q
+                    ] }) : void 0,
+                    hideDeletedMessages: !0,
+                    hideNewMessageSeparator: !1
+                  }
+                )
+              ]
             },
-            renderFooter: () => a == null ? void 0 : a(S),
-            disabled: c,
-            disabledReason: b,
-            composerInput: L
-          },
-          "lt-channel-message-input"
-        )
+            "lt-channel-message-list"
+          ),
+          r ? /* @__PURE__ */ s(j.Fragment, { children: r(S) }, "lt-channel-conversation-footer") : null,
+          /* @__PURE__ */ s(
+            Ii,
+            {
+              ...n && {
+                renderActions: () => n == null ? void 0 : n(S)
+              },
+              renderFooter: () => a == null ? void 0 : a(S),
+              disabled: c,
+              disabledReason: b,
+              composerInput: L
+            },
+            "lt-channel-message-input"
+          )
+        ] })
       ] })
     }
   ) });
-}, Fs = V.memo(
+}, Fs = j.memo(
   ({
     channel: e,
     onBack: t,
@@ -4660,7 +4698,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
     onLeaveConversation: o,
     onBlockParticipant: l,
     className: d,
-    CustomChannelEmptyState: m = Bi,
+    CustomChannelEmptyState: u = Bi,
     showDeleteConversation: f = !0,
     onDeleteConversationClick: h,
     onBlockParticipantClick: g,
@@ -4685,7 +4723,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
     viewerLanguage: M,
     showChannelInfo: P = !0,
     onParticipantNameClick: $,
-    composerInput: j
+    composerInput: V
   }) => {
     const Q = J(
       async (X, N, A) => {
@@ -4731,7 +4769,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
           {
             channel: e,
             MessageSystem: Pi,
-            EmptyStateIndicator: m,
+            EmptyStateIndicator: u,
             LoadingIndicator: Ve,
             DateSeparator: pa,
             TypingIndicator: $i,
@@ -4748,7 +4786,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
                 renderConversationFooter: i,
                 onLeaveConversation: o,
                 onBlockParticipant: l,
-                CustomChannelEmptyState: m,
+                CustomChannelEmptyState: u,
                 showDeleteConversation: f,
                 onDeleteConversationClick: h,
                 onBlockParticipantClick: g,
@@ -4768,7 +4806,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
                 viewerLanguage: M,
                 showChannelInfo: P,
                 onParticipantNameClick: $,
-                composerInput: j
+                composerInput: V
               }
             )
           }
@@ -4778,7 +4816,7 @@ const ve = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
   }
 );
 Fs.displayName = "ChannelView";
-const Ce = V.memo(({ message: e, onBack: t }) => /* @__PURE__ */ s("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ u("div", { className: "text-center max-w-sm", children: [
+const Ce = j.memo(({ message: e, onBack: t }) => /* @__PURE__ */ s("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ m("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 }),
@@ -4803,7 +4841,7 @@ const pl = ({
   initialParticipantData: o,
   CustomChannelEmptyState: l,
   onBlockParticipantClick: d,
-  onReportParticipantClick: m,
+  onReportParticipantClick: u,
   dmAgentEnabled: f,
   onMessageSent: h,
   chatbotVotingEnabled: g = !1,
@@ -4826,7 +4864,7 @@ const pl = ({
     refreshConnection: S,
     service: I,
     debug: y
-  } = sa(), [T, M] = B(null), [P, $] = B(null), [j, Q] = B(!1), { showDeleteConversation: ee = !0 } = e, X = G(o);
+  } = sa(), [T, M] = B(null), [P, $] = B(null), [V, Q] = B(!1), { showDeleteConversation: ee = !0 } = e, X = G(o);
   X.current = o;
   const N = G(a);
   N.current = a;
@@ -4909,7 +4947,7 @@ const pl = ({
       message: "Not connected to messaging service",
       onBack: S
     }
-  ) : P ? /* @__PURE__ */ s(Ce, { message: P }) : j && !T ? /* @__PURE__ */ s(Ce, { message: "Conversation ended" }) : T ? /* @__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(
+  ) : P ? /* @__PURE__ */ s(Ce, { message: P }) : V && !T ? /* @__PURE__ */ s(Ce, { message: "Conversation ended" }) : T ? /* @__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(
     Fs,
     {
       channel: T,
@@ -4921,7 +4959,7 @@ const pl = ({
       CustomChannelEmptyState: l,
       showDeleteConversation: ee,
       onBlockParticipantClick: d,
-      onReportParticipantClick: m,
+      onReportParticipantClick: u,
       dmAgentEnabled: f,
       onMessageSent: h,
       chatbotVotingEnabled: g,
@@ -4944,7 +4982,7 @@ function Hi(e) {
     for (const n of t)
       e.state.addMessageSorted(n.message);
 }
-const Ps = V.createContext({
+const Ps = j.createContext({
   selectedChannel: void 0,
   onChannelSelect: () => {
   },
@@ -4952,7 +4990,7 @@ const Ps = V.createContext({
   renderMessagePreview: void 0,
   channelPreview: void 0,
   viewerLanguage: void 0
-}), Yi = Ps.Provider, qi = () => V.useContext(Ps), Wi = (e, t) => {
+}), Yi = Ps.Provider, qi = () => j.useContext(Ps), Wi = (e, t) => {
   const n = new Date(
     Date.UTC(e.getUTCFullYear(), e.getUTCMonth(), e.getUTCDate())
   ), r = new Date(
@@ -4973,7 +5011,7 @@ const Ps = V.createContext({
     day: "numeric",
     year: "2-digit"
   });
-}, Os = V.memo(
+}, Os = j.memo(
   (e) => {
     var O, F, L;
     const { channel: t, unread: n } = e, {
@@ -4983,7 +5021,7 @@ const Ps = V.createContext({
       channelPreview: o,
       renderMessagePreview: l,
       viewerLanguage: d
-    } = qi(), { client: m } = fe(), f = (a == null ? void 0 : a.id) === (t == null ? void 0 : t.id), h = ut(t);
+    } = qi(), { client: u } = fe(), f = (a == null ? void 0 : a.id) === (t == null ? void 0 : t.id), h = ut(t);
     if (o)
       return /* @__PURE__ */ s(
         o,
@@ -5002,7 +5040,7 @@ const Ps = V.createContext({
       !I || y || (S.preventDefault(), g());
     }, b = He(
       (O = t == null ? void 0 : t.state) == null ? void 0 : O.members,
-      m == null ? void 0 : m.userID,
+      u == null ? void 0 : u.userID,
       t == null ? void 0 : t.type
     ), v = mt(b == null ? void 0 : b.user), x = (F = b == null ? void 0 : b.user) == null ? void 0 : F.image, p = (() => {
       var I;
@@ -5052,9 +5090,9 @@ const Ps = V.createContext({
           }
         ),
         "data-dd-privacy": "mask",
-        children: /* @__PURE__ */ u("div", { className: "flex items-start gap-4", children: [
+        children: /* @__PURE__ */ m("div", { className: "flex items-start gap-4", children: [
           /* @__PURE__ */ s(
-            ne,
+            se,
             {
               id: ((L = b == null ? void 0 : b.user) == null ? void 0 : L.id) || t.id || "unknown",
               name: v,
@@ -5063,9 +5101,9 @@ const Ps = V.createContext({
               starred: h
             }
           ),
-          /* @__PURE__ */ u("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
-            /* @__PURE__ */ u("div", { className: "flex items-center justify-between gap-2", children: [
-              /* @__PURE__ */ u(
+          /* @__PURE__ */ m("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
+            /* @__PURE__ */ m("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ m(
                 "h3",
                 {
                   className: k(
@@ -5079,7 +5117,7 @@ const Ps = V.createContext({
               ),
               C && /* @__PURE__ */ s("span", { className: "text-xs text-[#717070] flex-shrink-0", children: C })
             ] }),
-            /* @__PURE__ */ u("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
+            /* @__PURE__ */ m("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: E }),
               R > 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: R > 99 ? "99+" : R })
             ] })
@@ -5090,7 +5128,7 @@ const Ps = V.createContext({
   }
 );
 Os.displayName = "CustomChannelPreview";
-const Ki = { last_message_at: -1 }, Zi = V.memo(
+const Ki = { last_message_at: -1 }, Zi = j.memo(
   ({
     onChannelSelect: e,
     selectedChannel: t,
@@ -5101,7 +5139,7 @@ const Ki = { last_message_at: -1 }, Zi = V.memo(
     className: o,
     customEmptyStateIndicator: l,
     channelListPaginator: d = Mn,
-    channelPreview: m,
+    channelPreview: u,
     renderMessagePreview: f,
     viewerLanguage: h,
     lockChannelOrder: g,
@@ -5111,9 +5149,9 @@ const Ki = { last_message_at: -1 }, Zi = V.memo(
     onAddedToChannel: x,
     onChannelUpdated: p
   }) => {
-    const _ = V.useRef(0);
+    const _ = j.useRef(0);
     _.current++;
-    const { debug: w = !1 } = dt(), C = V.useCallback(
+    const { debug: w = !1 } = dt(), C = j.useCallback(
       (E) => {
         for (const R of E)
           Hi(R);
@@ -5126,12 +5164,12 @@ const Ki = { last_message_at: -1 }, Zi = V.memo(
       selectedChannelId: t == null ? void 0 : t.id,
       filters: n
     });
-    const D = V.useMemo(
+    const D = j.useMemo(
       () => ({
         selectedChannel: t,
         onChannelSelect: e,
         debug: w,
-        channelPreview: m,
+        channelPreview: u,
         renderMessagePreview: f,
         viewerLanguage: h
       }),
@@ -5139,7 +5177,7 @@ const Ki = { last_message_at: -1 }, Zi = V.memo(
         t,
         e,
         w,
-        m,
+        u,
         f,
         h
       ]
@@ -5209,7 +5247,7 @@ const as = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
   tail: n = !0,
   header: a,
   className: r
-}) => /* @__PURE__ */ u(
+}) => /* @__PURE__ */ m(
   "div",
   {
     "data-dd-privacy": "mask",
@@ -5277,10 +5315,10 @@ const as = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
   avatarImage: i,
   avatarName: o
 }) => {
-  const l = e.filter((d) => d.enabled).sort((d, m) => (d.order ?? 0) - (m.order ?? 0));
-  return l.length === 0 ? null : /* @__PURE__ */ s("div", { className: r, children: /* @__PURE__ */ u("div", { className: "flex gap-3 items-end", children: [
+  const l = e.filter((d) => d.enabled).sort((d, u) => (d.order ?? 0) - (u.order ?? 0));
+  return l.length === 0 ? null : /* @__PURE__ */ s("div", { className: r, children: /* @__PURE__ */ m("div", { className: "flex gap-3 items-end", children: [
     (i || o) && /* @__PURE__ */ s("div", { className: "flex-none", children: /* @__PURE__ */ s(
-      ne,
+      se,
       {
         id: o || "account",
         name: o || "Account",
@@ -5289,7 +5327,7 @@ const as = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
         shape: "circle"
       }
     ) }),
-    /* @__PURE__ */ u(
+    /* @__PURE__ */ m(
       "div",
       {
         className: "flex-1 flex flex-col gap-3 rounded-lg p-4",
@@ -5323,7 +5361,7 @@ export {
   Jt as L,
   hl as M,
   ye as a,
-  ne as b,
+  se as b,
   Zi as c,
   Fs as d,
   fl as e,
@@ -5349,4 +5387,4 @@ export {
   He as y,
   gt as z
 };
-//# sourceMappingURL=index-CQm_f20V.js.map
+//# sourceMappingURL=index-5x3u5nJw.js.map