npm - @linktr.ee/messaging-react - Versions diffs - 3.15.1 → 3.15.2-rc-1784883706 - Mend

@linktr.ee/messaging-react 3.15.1 → 3.15.2-rc-1784883706

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/{Card-BPPe6RVF.cjs → Card-CUyz-aAc.cjs} +2 -2
package/dist/{Card-BPPe6RVF.cjs.map → Card-CUyz-aAc.cjs.map} +1 -1
package/dist/{Card-opmIFszT.js → Card-DC9ICajo.js} +2 -2
package/dist/{Card-opmIFszT.js.map → Card-DC9ICajo.js.map} +1 -1
package/dist/{index-BdRJRNr3.js → index-8L0IGn55.js} +406 -397
package/dist/index-8L0IGn55.js.map +1 -0
package/dist/index-DkQbOrDi.cjs +2 -0
package/dist/index-DkQbOrDi.cjs.map +1 -0
package/dist/index.cjs +1 -1
package/dist/index.js +1 -1
package/package.json +2 -2
package/src/components/ChannelHeaderRedesign.tsx +37 -26
package/dist/index-BdRJRNr3.js.map +0 -1
package/dist/index-ftxF5ams.cjs +0 -2
package/dist/index-ftxF5ams.cjs.map +0 -1

package/dist/{index-BdRJRNr3.js → index-8L0IGn55.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import j, { createContext as st, useContext as ye, useCallback as W, useState as
 import { StreamChatService as Gs } from "@linktr.ee/messaging-core";
 import { StreamChat as Hs, LinkPreviewsManager as Ot } from "stream-chat";
 import { Chat as Ys, useChannelStateContext as ue, useChatContext as ke, DateSeparator as qs, MessageStatus as Ws, useMessageContext as pe, MessageErrorIcon as Ze, MessageText as Le, areMessageUIPropsEqual as Xs, useMessageReminder as Ks, useComponentContext as es, Attachment as Zs, EditMessageModal as Js, MessageBlocked as Qs, MessageBouncePrompt as en, MessageDeleted as tn, MessageIsThreadReplyInChannelButtonIndicator as sn, MessageRepliesCountButton as nn, ReminderNotification as an, StreamedMessageText as rn, messageHasAttachments as on, messageHasReactions as ln, isDateSeparatorMessage as cn, isMessageBlocked as dn, isMessageBounced as un, MessageBounceModal as mn, Poll as hn, useMessageComposer as fn, useStateStore as gn, MessageInput as Ft, useMessageInputContext as pn, useMessageComposerHasSendableData as bn, AttachmentPreviewList as vn, QuotedMessagePreview as xn, TextareaComposer as wn, MessageTimestamp as Ve, AIStates as Ge, useTypingContext as _n, useAIState as Nn, Channel as yn, WithComponents as kn, Window as Cn, MessageList as Bt, ChannelList as Sn, InfiniteScroll as En } from "stream-chat-react";
-import y from "classnames";
+import N from "classnames";
 import { StarIcon as Je, DotsThreeIcon as In, SpinnerGapIcon as Ae, SignOutIcon as Tn, ProhibitInsetIcon as $t, FlagIcon as ts, CurrencyDollarIcon as Mn, CaretRightIcon as ss, ArrowLeftIcon as An, FileIcon as ns, ImageIcon as Rn, SpeakerHighIcon as Ln, VideoCameraIcon as as, FileMdIcon as Dn, FileTextIcon as Pn, FileZipIcon as zn, FilePptIcon as On, FileCsvIcon as Fn, FileXlsIcon as Bn, FileDocIcon as $n, FilePdfIcon as Un, CircleNotchIcon as _e, PlayIcon as Qe, PauseIcon as jn, LinkIcon as Vn, DownloadSimpleIcon as Ne, XIcon as Be, CaretLeftIcon as Gn, GiftIcon as Hn, ThumbsUpIcon as Yn, ThumbsDownIcon as qn, ChecksIcon as Wn, PencilSimpleIcon as Xn, TrashSimpleIcon as Kn, ArrowUpIcon as Zn, SparkleIcon as Jn, ProhibitIcon as Qn } from "@phosphor-icons/react";
 import { MessageActions as ea, DefaultDropdownActionButton as rs } from "stream-chat-react/experimental";
 const is = st({
@@ -25,10 +25,10 @@ const is = st({
   debug: i = !1,
   client: l
 }) => {
-  var N, M;
+  var S, I;
   const o = W(
-    (E, ...D) => {
-      i && console.log(`🔥 [MessagingProvider] ${E}`, ...D);
+    (y, ...D) => {
+      i && console.log(`🔥 [MessagingProvider] ${y}`, ...D);
     },
     [i]
   );
@@ -38,7 +38,7 @@ const is = st({
     serviceConfig: !!n,
     capabilities: Object.keys(r)
   });
-  const [d, u] = F(null), [g, m] = F(null), [f, c] = F(!1), [v, w] = F(!1), [p, b] = F(null), x = G(!1), S = G(null), k = G(n);
+  const [d, u] = F(null), [g, m] = F(null), [f, c] = F(!1), [v, x] = F(!1), [p, b] = F(null), w = G(!1), E = G(null), k = G(n);
   k.current = n;
   const R = G(i);
   R.current = i;
@@ -47,9 +47,9 @@ const is = st({
     apiKey: a,
     serviceConfig: n,
     capabilities: r
-  }), O = G(0);
-  O.current++, o("📊 RENDER INFO", {
-    renderCount: O.current,
+  }), z = G(0);
+  z.current++, o("📊 RENDER INFO", {
+    renderCount: z.current,
     currentProps: { userId: t == null ? void 0 : t.id, apiKey: (a == null ? void 0 : a.substring(0, 8)) + "..." },
     propChanges: {
       userChanged: A.current.userId !== (t == null ? void 0 : t.id),
@@ -64,36 +64,36 @@ const is = st({
     capabilities: r
   };
   const B = G(null);
-  !l && a && ((N = B.current) == null ? void 0 : N.apiKey) !== a && (B.current = { apiKey: a, client: new Hs(a) });
-  const z = l || (a ? ((M = B.current) == null ? void 0 : M.client) ?? null : null);
+  !l && a && ((S = B.current) == null ? void 0 : S.apiKey) !== a && (B.current = { apiKey: a, client: new Hs(a) });
+  const O = l || (a ? ((I = B.current) == null ? void 0 : I.client) ?? null : null);
   Y(() => {
-    const E = O.current, D = k.current;
+    const y = z.current, D = k.current;
     if (l) {
-      S.current = null, u(null), m(null), c(!1), b(null), w(!1);
+      E.current = null, u(null), m(null), c(!1), b(null), x(!1);
       return;
     }
-    if (!a || !z || !D) {
+    if (!a || !O || !D) {
       o("⚠️ SERVICE INIT SKIPPED", {
-        renderCount: E,
+        renderCount: y,
         reason: "Missing apiKey, client, or serviceConfig"
       });
       return;
     }
     o("🚀 CREATING SERVICE", {
-      renderCount: E,
+      renderCount: y,
       apiKey: (a == null ? void 0 : a.substring(0, 8)) + "..."
     });
     const H = new Gs({
       ...D,
       apiKey: a,
       debug: R.current,
-      client: z
+      client: O
     });
-    S.current = H, u(H), o("✅ SERVICE SET", {
-      renderCount: E,
+    E.current = H, u(H), o("✅ SERVICE SET", {
+      renderCount: y,
       serviceInstance: !!H
     });
-  }, [a, z, l]);
+  }, [a, O, l]);
   const L = G(null);
   Y(() => {
     var D, H;
@@ -101,7 +101,7 @@ const is = st({
       hasService: !!d,
       hasUser: !!t,
       userId: t == null ? void 0 : t.id,
-      isConnecting: x.current,
+      isConnecting: w.current,
       isConnected: f,
       dependencies: { service: !!d, userId: t == null ? void 0 : t.id }
     }), l)
@@ -110,7 +110,7 @@ const is = st({
       o("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    if (x.current) {
+    if (w.current) {
       o("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
@@ -122,7 +122,7 @@ const is = st({
       return;
     }
     (async () => {
-      o("🚀 STARTING USER CONNECTION", { userId: t.id }), x.current = !0, w(!0), b(null);
+      o("🚀 STARTING USER CONNECTION", { userId: t.id }), w.current = !0, x(!0), b(null);
       try {
         o("📞 CALLING SERVICE.CONNECTUSER", { userId: t.id });
         const q = await d.connectUser(t);
@@ -137,19 +137,19 @@ const is = st({
           error: K
         });
       } finally {
-        w(!1), x.current = !1, o("🔄 USER CONNECTION FINISHED", {
+        x(!1), w.current = !1, o("🔄 USER CONNECTION FINISHED", {
           userId: t.id,
           isConnected: f
         });
       }
     })();
   }, [d, t, o, f, l]), Y(() => {
-    const E = z;
+    const y = O;
     return () => {
       var D;
-      E && (L.current = null, (D = S.current) == null || D.disconnectUser().catch(console.error));
+      y && (L.current = null, (D = E.current) == null || D.disconnectUser().catch(console.error));
     };
-  }, [z]);
+  }, [O]);
   const C = W(async () => {
     if (o("🔄 REFRESH CONNECTION CALLED", {
       hasService: !!d,
@@ -159,22 +159,22 @@ const is = st({
         o("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
         return;
       }
-      o("🚀 STARTING CONNECTION REFRESH", { userId: t.id }), w(!0);
+      o("🚀 STARTING CONNECTION REFRESH", { userId: t.id }), x(!0);
       try {
         o("🔌 DISCONNECTING FOR REFRESH"), await d.disconnectUser(), o("📞 RECONNECTING FOR REFRESH");
-        const E = await d.connectUser(t);
-        m(E), c(!0), b(null), o("✅ CONNECTION REFRESH SUCCESS", { userId: t.id });
-      } catch (E) {
-        const D = E instanceof Error ? E.message : "Refresh failed";
+        const y = await d.connectUser(t);
+        m(y), c(!0), b(null), o("✅ CONNECTION REFRESH SUCCESS", { userId: t.id });
+      } catch (y) {
+        const D = y instanceof Error ? y.message : "Refresh failed";
         b(D), o("❌ CONNECTION REFRESH ERROR", {
           userId: t.id,
           error: D
         });
       } finally {
-        w(!1), o("🔄 CONNECTION REFRESH FINISHED", { userId: t.id });
+        x(!1), o("🔄 CONNECTION REFRESH FINISHED", { userId: t.id });
       }
     }
-  }, [d, t, o, l]), I = j.useMemo(() => (o("💫 CONTEXT VALUE MEMOIZATION", {
+  }, [d, t, o, l]), T = j.useMemo(() => (o("💫 CONTEXT VALUE MEMOIZATION", {
     hasService: !!d,
     hasClient: !!g,
     isConnected: f,
@@ -211,13 +211,13 @@ const is = st({
     o
   ]);
   return o("🔄 RENDER END", {
-    renderCount: O.current,
-    willRenderChat: !!z,
-    contextValueReady: !!I
-  }), /* @__PURE__ */ s(is.Provider, { value: I, children: z ? /* @__PURE__ */ s(
+    renderCount: z.current,
+    willRenderChat: !!O,
+    contextValueReady: !!T
+  }), /* @__PURE__ */ s(is.Provider, { value: T, children: O ? /* @__PURE__ */ s(
     Ys,
     {
-      client: z,
+      client: O,
       customClasses: {
         channelList: "str-chat__channel-list str-chat__channel-list-react bg-transparent lg:border-r-2 border-r-0 border-[#0000000A]"
       },
@@ -341,7 +341,7 @@ const be = ({
     "div",
     {
       "aria-hidden": "true",
-      className: y(
+      className: N(
         "avatar-fallback flex h-full w-full items-center justify-center font-semibold select-none transition-colors"
       ),
       style: { fontSize: m, lineHeight: 1 },
@@ -351,7 +351,7 @@ const be = ({
   return /* @__PURE__ */ h(
     "div",
     {
-      className: y(
+      className: N(
         "relative flex-shrink-0",
         a
       ),
@@ -375,7 +375,7 @@ const be = ({
           "div",
           {
             "data-testid": "avatar-ring",
-            className: y(
+            className: N(
               "h-full w-full",
               "bg-transparent"
             ),
@@ -407,56 +407,56 @@ const be = ({
   onActionComplete: u,
   logLabel: g = "useChannelModerationActions"
 }) => {
-  var I;
-  const { service: m, debug: f } = nt(), c = (I = t == null ? void 0 : t.user) == null ? void 0 : I.id, v = !!(a && n && m && c), [w, p] = F(!1), [b, x] = F(null), [S, k] = F(!1), [R, A] = F(!1), O = v && ((b == null ? void 0 : b.participantId) !== c || (b == null ? void 0 : b.service) !== m);
+  var T;
+  const { service: m, debug: f } = nt(), c = (T = t == null ? void 0 : t.user) == null ? void 0 : T.id, v = !!(a && n && m && c), [x, p] = F(!1), [b, w] = F(null), [E, k] = F(!1), [R, A] = F(!1), z = v && ((b == null ? void 0 : b.participantId) !== c || (b == null ? void 0 : b.service) !== m);
   return Y(() => {
     if (!v || !m || !c) {
-      p(!1), x(null);
+      p(!1), w(null);
       return;
     }
-    let N = !1;
+    let S = !1;
     return (async () => {
       try {
-        const M = await m.getBlockedUsers();
-        if (N) return;
+        const I = await m.getBlockedUsers();
+        if (S) return;
         p(
-          M.some(
-            (E) => E.blocked_user_id === c
+          I.some(
+            (y) => y.blocked_user_id === c
           )
         );
-      } catch (M) {
-        N || console.error(`[${g}] Failed to check blocked status:`, M);
+      } catch (I) {
+        S || console.error(`[${g}] Failed to check blocked status:`, I);
       } finally {
-        N || x({ participantId: c, service: m });
+        S || w({ participantId: c, service: m });
       }
     })(), () => {
-      N = !0;
+      S = !0;
     };
   }, [v, m, c, g]), {
-    isParticipantBlocked: w,
-    isCheckingBlockedStatus: O,
-    isLeaving: S,
+    isParticipantBlocked: x,
+    isCheckingBlockedStatus: z,
+    isLeaving: E,
     isUpdatingBlockStatus: R,
     handleLeaveConversation: async () => {
-      var N;
-      if (!S) {
+      var S;
+      if (!E) {
         l == null || l(), f && console.log(`[${g}] Leave conversation`, e.cid), k(!0);
         try {
-          const M = ((N = e._client) == null ? void 0 : N.userID) ?? null;
-          await e.hide(M, !1), r && await r(e), u == null || u();
-        } catch (M) {
-          console.error(`[${g}] Failed to leave conversation`, M);
+          const I = ((S = e._client) == null ? void 0 : S.userID) ?? null;
+          await e.hide(I, !1), r && await r(e), u == null || u();
+        } catch (I) {
+          console.error(`[${g}] Failed to leave conversation`, I);
         } finally {
           k(!1);
         }
       }
     },
     handleBlockUser: async () => {
-      var N, M, E;
+      var S, I, y;
       if (!(R || !m)) {
-        o == null || o(), f && console.log(`[${g}] Block member`, (N = t == null ? void 0 : t.user) == null ? void 0 : N.id), A(!0);
+        o == null || o(), f && console.log(`[${g}] Block member`, (S = t == null ? void 0 : t.user) == null ? void 0 : S.id), A(!0);
         try {
-          await m.blockUser((M = t == null ? void 0 : t.user) == null ? void 0 : M.id), i && await i((E = t == null ? void 0 : t.user) == null ? void 0 : E.id), u == null || u();
+          await m.blockUser((I = t == null ? void 0 : t.user) == null ? void 0 : I.id), i && await i((y = t == null ? void 0 : t.user) == null ? void 0 : y.id), u == null || u();
         } catch (D) {
           console.error(`[${g}] Failed to block member`, D);
         } finally {
@@ -465,11 +465,11 @@ const be = ({
       }
     },
     handleUnblockUser: async () => {
-      var N, M, E;
+      var S, I, y;
       if (!(R || !m)) {
-        o == null || o(), f && console.log(`[${g}] Unblock member`, (N = t == null ? void 0 : t.user) == null ? void 0 : N.id), A(!0);
+        o == null || o(), f && console.log(`[${g}] Unblock member`, (S = t == null ? void 0 : t.user) == null ? void 0 : S.id), A(!0);
         try {
-          await m.unBlockUser((M = t == null ? void 0 : t.user) == null ? void 0 : M.id), i && await i((E = t == null ? void 0 : t.user) == null ? void 0 : E.id), u == null || u();
+          await m.unBlockUser((I = t == null ? void 0 : t.user) == null ? void 0 : I.id), i && await i((y = t == null ? void 0 : t.user) == null ? void 0 : y.id), u == null || u();
         } catch (D) {
           console.error(`[${g}] Failed to unblock member`, D);
         } finally {
@@ -490,7 +490,7 @@ const be = ({
   "button",
   {
     type: "button",
-    className: y(
+    className: N(
       "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60",
       e === "danger" ? "text-danger hover:bg-danger/50" : "text-charcoal hover:bg-sand",
       t
@@ -512,14 +512,14 @@ const be = ({
   customChannelActions: g,
   triggerClassName: m
 }) => {
-  const [f, c] = F(!1), v = G(null), w = js(), p = W(() => c(!1), []), {
+  const [f, c] = F(!1), v = G(null), x = js(), p = W(() => c(!1), []), {
     isParticipantBlocked: b,
-    isCheckingBlockedStatus: x,
-    isLeaving: S,
+    isCheckingBlockedStatus: w,
+    isLeaving: E,
     isUpdatingBlockStatus: k,
     handleLeaveConversation: R,
     handleBlockUser: A,
-    handleUnblockUser: O,
+    handleUnblockUser: z,
     handleReportUser: B
   } = da({
     channel: e,
@@ -536,10 +536,10 @@ const be = ({
   });
   return Y(() => {
     if (!f) return;
-    const L = (I) => {
-      v.current && !v.current.contains(I.target) && c(!1);
-    }, C = (I) => {
-      I.key === "Escape" && c(!1);
+    const L = (T) => {
+      v.current && !v.current.contains(T.target) && c(!1);
+    }, C = (T) => {
+      T.key === "Escape" && c(!1);
     };
     return document.addEventListener("mousedown", L), document.addEventListener("keydown", C), () => {
       document.removeEventListener("mousedown", L), document.removeEventListener("keydown", C);
@@ -552,7 +552,7 @@ const be = ({
         type: "button",
         "aria-haspopup": "true",
         "aria-expanded": f,
-        "aria-controls": f ? w : void 0,
+        "aria-controls": f ? x : void 0,
         onClick: () => c((L) => !L),
         children: [
           /* @__PURE__ */ s(In, { className: "size-5 text-black/90" }),
@@ -563,9 +563,9 @@ const be = ({
     f && /* @__PURE__ */ s(
       "div",
       {
-        id: w,
+        id: x,
         "aria-label": "Conversation options",
-        className: y(
+        className: N(
           "absolute right-0 top-full z-50 mt-2 w-56 overflow-hidden",
           "rounded-lg border border-sand bg-white p-1 shadow-max-elevation-light"
         ),
@@ -574,15 +574,15 @@ const be = ({
             ve,
             {
               onClick: R,
-              disabled: S,
-              "aria-busy": S,
+              disabled: E,
+              "aria-busy": E,
               children: [
-                S ? /* @__PURE__ */ s(Ae, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ s(Tn, { className: "h-5 w-5" }),
+                E ? /* @__PURE__ */ s(Ae, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ s(Tn, { className: "h-5 w-5" }),
                 /* @__PURE__ */ s("span", { children: "Delete Conversation" })
               ]
             }
           ) }),
-          a && /* @__PURE__ */ s("li", { children: x ? (
+          a && /* @__PURE__ */ s("li", { children: w ? (
             // Block status not yet resolved — show a disabled placeholder
             // so a premature click can't act on a stale block state.
             /* @__PURE__ */ h(ve, { disabled: !0, "aria-busy": !0, children: [
@@ -592,7 +592,7 @@ const be = ({
           ) : b ? /* @__PURE__ */ h(
             ve,
             {
-              onClick: O,
+              onClick: z,
               disabled: k,
               "aria-busy": k,
               children: [
@@ -637,74 +637,83 @@ const be = ({
   customChannelActions: f,
   renderChannelActions: c,
   showChannelInfo: v = !0,
-  onParticipantNameClick: w
+  onParticipantNameClick: x
 }) => {
-  var z, L, C, I;
-  const { channel: p } = ue(), { client: b } = ke(), x = j.useMemo(
+  var C, T, S, I;
+  const { channel: p } = ue(), { client: b } = ke(), w = j.useMemo(
     () => {
-      var N;
+      var y;
       return ls(
-        (N = p.state) == null ? void 0 : N.members,
+        (y = p.state) == null ? void 0 : y.members,
         b == null ? void 0 : b.userID,
         p.type
       );
     },
-    [(z = p.state) == null ? void 0 : z.members, b == null ? void 0 : b.userID, p.type]
-  ), S = cs(x == null ? void 0 : x.user), k = (L = x == null ? void 0 : x.user) == null ? void 0 : L.image, R = os(p), A = ha((C = p.data) == null ? void 0 : C.customer_tag) && (x == null ? void 0 : x.is_follower) === !0, O = async () => {
+    [(C = p.state) == null ? void 0 : C.members, b == null ? void 0 : b.userID, p.type]
+  ), E = cs(w == null ? void 0 : w.user), k = (T = w == null ? void 0 : w.user) == null ? void 0 : T.image, R = os(p), A = ha((S = p.data) == null ? void 0 : S.customer_tag) && (w == null ? void 0 : w.is_follower) === !0, z = a && R, B = A || z || !!x, O = async () => {
     try {
       R ? await p.unpin() : await p.pin();
-    } catch (N) {
+    } catch (y) {
       console.error(
         "[ChannelHeaderRedesign] Failed to update pinned status:",
-        N
+        y
       );
     }
-  }, B = /* @__PURE__ */ h(ee, { children: [
+  }, L = /* @__PURE__ */ h(ee, { children: [
     /* @__PURE__ */ s(
       be,
       {
-        id: ((I = x == null ? void 0 : x.user) == null ? void 0 : I.id) || p.id || "unknown",
-        name: S,
+        id: ((I = w == null ? void 0 : w.user) == null ? void 0 : I.id) || p.id || "unknown",
+        name: E,
         image: k,
         shape: "circle",
         size: 48,
         className: "-mb-2"
       }
     ),
-    /* @__PURE__ */ s("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__ */ h("span", { className: "flex max-w-full items-center justify-center", children: [
-      /* @__PURE__ */ s("span", { className: "min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90", children: S }),
-      /* @__PURE__ */ h("span", { className: "ml-2 flex gap-1", children: [
-        A && /* @__PURE__ */ s(
-          "span",
-          {
-            "aria-label": "Paid customer",
-            className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-[#34C759] text-white",
-            children: /* @__PURE__ */ s(Mn, { className: "size-2.5", weight: "bold" })
-          }
-        ),
-        a && R && /* @__PURE__ */ s(
-          "span",
-          {
-            "aria-label": "Starred conversation",
-            className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-[#FFD60A] text-white",
-            children: /* @__PURE__ */ s(Je, { className: "size-2.5", weight: "fill" })
-          }
+    /* @__PURE__ */ s(
+      "span",
+      {
+        className: N(
+          "relative z-10 flex max-w-full flex-col items-center justify-center rounded-full border border-white/10 bg-white/65 py-1.5 shadow-[0px_0px_0px_0px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)] backdrop-blur-[2px] transition-filter duration-150 group-hover:brightness-95",
+          B ? "pl-3 pr-2" : "px-3"
         ),
-        w && /* @__PURE__ */ s(
-          ss,
-          {
-            "aria-hidden": "true",
-            className: "size-4 shrink-0 text-black/65",
-            weight: "bold"
-          }
-        )
-      ] })
-    ] }) })
+        children: /* @__PURE__ */ h("span", { className: "flex max-w-full items-center justify-center", children: [
+          /* @__PURE__ */ s("span", { className: "min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90", children: E }),
+          B && /* @__PURE__ */ h("span", { className: "ml-1 flex gap-1", children: [
+            A && /* @__PURE__ */ s(
+              "span",
+              {
+                "aria-label": "Paid customer",
+                className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-[#34C759] text-white",
+                children: /* @__PURE__ */ s(Mn, { className: "size-2.5", weight: "bold" })
+              }
+            ),
+            z && /* @__PURE__ */ s(
+              "span",
+              {
+                "aria-label": "Starred conversation",
+                className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-[#FFD60A] text-white",
+                children: /* @__PURE__ */ s(Je, { className: "size-2.5", weight: "fill" })
+              }
+            ),
+            x && /* @__PURE__ */ s(
+              ss,
+              {
+                "aria-hidden": "true",
+                className: "size-4 shrink-0 text-black/65",
+                weight: "bold"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
   ] });
   return /* @__PURE__ */ s(
     "div",
     {
-      className: y(
+      className: N(
         "@container bg-[linear-gradient(180deg,#FBFAF9_0%,rgba(251,250,249,0.92)_58%,rgba(251,250,249,0)_100%)]",
         e
       ),
@@ -712,7 +721,7 @@ const be = ({
         /* @__PURE__ */ s("div", { className: "flex items-start", children: n && /* @__PURE__ */ s(
           "button",
           {
-            className: y(
+            className: N(
               He,
               "messaging-channel-view-back-button-mobile messaging-channel-view-back-button-desktop"
             ),
@@ -723,16 +732,16 @@ const be = ({
             children: /* @__PURE__ */ s(An, { className: "size-5 text-black/90" })
           }
         ) }),
-        /* @__PURE__ */ s("div", { className: "flex min-w-0 justify-center", "data-dd-privacy": "mask", children: w ? /* @__PURE__ */ s(
+        /* @__PURE__ */ s("div", { className: "flex min-w-0 justify-center", "data-dd-privacy": "mask", children: x ? /* @__PURE__ */ s(
           "button",
           {
             type: "button",
-            onClick: w,
-            "aria-label": `View details for ${S}`,
+            onClick: x,
+            "aria-label": `View details for ${E}`,
             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: B
+            children: L
           }
-        ) : /* @__PURE__ */ s("div", { className: "flex min-w-0 max-w-full flex-col items-center px-2", children: B }) }),
+        ) : /* @__PURE__ */ s("div", { className: "flex min-w-0 max-w-full flex-col items-center px-2", children: L }) }),
         /* @__PURE__ */ h("div", { className: "flex items-start justify-end gap-2", children: [
           a && /* @__PURE__ */ s(
             "button",
@@ -745,7 +754,7 @@ const be = ({
               children: /* @__PURE__ */ s(
                 Je,
                 {
-                  className: y("size-5", {
+                  className: N("size-5", {
                     "text-[#FFD60A]": R,
                     "text-black/90": !R
                   }),
@@ -758,7 +767,7 @@ const be = ({
             ua,
             {
               channel: p,
-              participant: x,
+              participant: w,
               showDeleteConversation: l,
               showBlockParticipant: o,
               showReportParticipant: d,
@@ -895,53 +904,53 @@ const Sa = (e) => {
   muted: d = !1,
   onContainerClick: u
 }) => {
-  const g = oe(t), m = G(null), f = G(null), c = G(null), v = G(r), [w, p] = F(a), [b, x] = F(0), [S, k] = F(!1), [R, A] = F(!1), [O, B] = F(!1), [z, L] = F(!1), [C, I] = F(!0), [N, M] = F(null), E = W(() => {
+  const g = oe(t), m = G(null), f = G(null), c = G(null), v = G(r), [x, p] = F(a), [b, w] = F(0), [E, k] = F(!1), [R, A] = F(!1), [z, B] = F(!1), [O, L] = F(!1), [C, T] = F(!0), [S, I] = F(null), y = W(() => {
     B(!1), p(!0);
   }, []), D = W((_) => {
-    const T = f.current;
-    if (!T) return 0;
-    const $ = T.getBoundingClientRect();
+    const M = f.current;
+    if (!M) return 0;
+    const $ = M.getBoundingClientRect();
     return Math.max(
       0,
       Math.min(1, (Sa(_) - $.left) / $.width)
     );
   }, []), H = W((_) => {
-    const T = m.current;
-    T && T.duration && (T.currentTime = _ * T.duration);
+    const M = m.current;
+    M && M.duration && (M.currentTime = _ * M.duration);
   }, []), q = (_) => {
     _.stopPropagation(), k(!0);
-    const T = D(_);
-    x(T), H(T);
+    const M = D(_);
+    w(M), H(M);
   };
   Y(() => {
     r !== void 0 && r !== v.current && (v.current = r, p(r));
   }, [r]), Y(() => {
-    if (!w) {
+    if (!x) {
       c.current !== null && (cancelAnimationFrame(c.current), c.current = null);
       return;
     }
     const _ = () => {
-      const T = m.current;
-      T && T.duration && !S && x(T.currentTime / T.duration), c.current = requestAnimationFrame(_);
+      const M = m.current;
+      M && M.duration && !E && w(M.currentTime / M.duration), c.current = requestAnimationFrame(_);
     };
     return c.current = requestAnimationFrame(_), () => {
       c.current !== null && cancelAnimationFrame(c.current);
     };
-  }, [w, S]), Y(() => {
+  }, [x, E]), Y(() => {
     const _ = m.current;
-    _ && (w ? _.play().catch((T) => {
+    _ && (x ? _.play().catch((M) => {
       p(!1), B(!0);
     }) : _.pause());
-  }, [w]), Y(() => {
-    if (!S) return;
-    const _ = ($) => x(D($)), T = ($) => {
+  }, [x]), Y(() => {
+    if (!E) return;
+    const _ = ($) => w(D($)), M = ($) => {
       k(!1), H(D($));
     };
-    return window.addEventListener("mousemove", _), window.addEventListener("mouseup", T), window.addEventListener("touchmove", _, { passive: !0 }), window.addEventListener("touchend", T), () => {
-      window.removeEventListener("mousemove", _), window.removeEventListener("mouseup", T), window.removeEventListener("touchmove", _), window.removeEventListener("touchend", T);
+    return window.addEventListener("mousemove", _), window.addEventListener("mouseup", M), window.addEventListener("touchmove", _, { passive: !0 }), window.addEventListener("touchend", M), () => {
+      window.removeEventListener("mousemove", _), window.removeEventListener("mouseup", M), window.removeEventListener("touchmove", _), window.removeEventListener("touchend", M);
     };
-  }, [S, D, H]);
-  const K = N ? { aspectRatio: String(N) } : void 0, Z = N ? "" : " aspect-video", V = Math.round(b * 100);
+  }, [E, D, H]);
+  const K = S ? { aspectRatio: String(S) } : void 0, Z = S ? "" : " aspect-video", V = Math.round(b * 100);
   return /* @__PURE__ */ h(
     "div",
     {
@@ -954,7 +963,7 @@ const Sa = (e) => {
           u(_);
           return;
         }
-        O || l && p((T) => !T);
+        z || l && p((M) => !M);
       },
       onKeyDown: (_) => {
         if (!(_.key !== "Enter" && _.key !== " ")) {
@@ -962,7 +971,7 @@ const Sa = (e) => {
             u(_);
             return;
           }
-          O || l && p((T) => !T);
+          z || l && p((M) => !M);
         }
       },
       children: [
@@ -988,12 +997,12 @@ const Sa = (e) => {
             style: { width: "100%", height: "100%" },
             onLoadStart: () => L(!0),
             onCanPlay: () => {
-              L(!1), I(!1);
+              L(!1), T(!1);
             },
             onWaiting: () => L(!0),
             onPlay: () => B(!1),
             onEnded: () => {
-              i || (p(!1), x(0));
+              i || (p(!1), w(0));
             },
             children: /* @__PURE__ */ s("track", { kind: "captions" })
           }
@@ -1008,28 +1017,28 @@ const Sa = (e) => {
             style: { width: "100%", height: "100%" },
             onLoadStart: () => L(!0),
             onCanPlay: () => {
-              L(!1), I(!1);
+              L(!1), T(!1);
             },
             onWaiting: () => L(!0),
             onPlay: () => B(!1),
             onLoadedMetadata: () => {
               const _ = m.current;
-              _ instanceof HTMLVideoElement && _.videoWidth && _.videoHeight && M(_.videoWidth / _.videoHeight);
+              _ instanceof HTMLVideoElement && _.videoWidth && _.videoHeight && I(_.videoWidth / _.videoHeight);
             },
             onEnded: () => {
-              i || (p(!1), x(0));
+              i || (p(!1), w(0));
             },
             children: /* @__PURE__ */ s("track", { kind: "captions" })
           }
         ) }),
-        z && !O && /* @__PURE__ */ s("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ s(
+        O && !z && /* @__PURE__ */ s("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ s(
           _e,
           {
             className: "size-8 animate-spin text-white/80",
             weight: "bold"
           }
         ) }),
-        O && !l && /* @__PURE__ */ s(
+        z && !l && /* @__PURE__ */ s(
           "div",
           {
             className: "absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black/35",
@@ -1037,10 +1046,10 @@ const Sa = (e) => {
             tabIndex: 0,
             "aria-label": "Play preview",
             onClick: (_) => {
-              _.stopPropagation(), E();
+              _.stopPropagation(), y();
             },
             onKeyDown: (_) => {
-              _.key !== "Enter" && _.key !== " " || (_.preventDefault(), _.stopPropagation(), E());
+              _.key !== "Enter" && _.key !== " " || (_.preventDefault(), _.stopPropagation(), y());
             },
             children: /* @__PURE__ */ s("span", { className: "flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm", children: /* @__PURE__ */ s(Qe, { className: "size-9 translate-x-0.5", weight: "fill" }) })
           }
@@ -1077,11 +1086,11 @@ const Sa = (e) => {
             {
               type: "button",
               onClick: (_) => {
-                _.stopPropagation(), p((T) => !T);
+                _.stopPropagation(), p((M) => !M);
               },
               className: "shrink-0 text-white",
-              "aria-label": w ? "Pause" : "Play",
-              children: w ? /* @__PURE__ */ s(jn, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ s(Qe, { className: "size-5 translate-x-px", weight: "fill" })
+              "aria-label": x ? "Pause" : "Play",
+              children: x ? /* @__PURE__ */ s(jn, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ s(Qe, { className: "size-5 translate-x-px", weight: "fill" })
             }
           ),
           /* @__PURE__ */ h(
@@ -1107,7 +1116,7 @@ const Sa = (e) => {
                 /* @__PURE__ */ s(
                   "div",
                   {
-                    className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${R || S ? "h-1.5" : "h-1"}`,
+                    className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${R || E ? "h-1.5" : "h-1"}`,
                     children: /* @__PURE__ */ s(
                       "div",
                       {
@@ -1120,7 +1129,7 @@ const Sa = (e) => {
                 /* @__PURE__ */ s(
                   "div",
                   {
-                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${R || S ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
+                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${R || E ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
                     style: { left: `${V}%` }
                   }
                 )
@@ -1231,7 +1240,7 @@ const Sa = (e) => {
     {
       ref: g,
       "data-testid": m,
-      className: y(
+      className: N(
         "relative w-[280px] select-none overflow-hidden rounded-[24px] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]",
         f ? "bg-[#1e2330]" : "bg-white"
       ),
@@ -1243,7 +1252,7 @@ const Sa = (e) => {
           c.trim() !== "" && /* @__PURE__ */ s(
             "p",
             {
-              className: y("mb-0.5 truncate text-base font-medium", {
+              className: N("mb-0.5 truncate text-base font-medium", {
                 "text-black": !f,
                 "text-white/30": f && v,
                 "text-white": f && !v
@@ -1253,7 +1262,7 @@ const Sa = (e) => {
           ),
           /* @__PURE__ */ h("div", { className: "flex flex-wrap items-center gap-1", children: [
             ge(r, {
-              className: y(
+              className: N(
                 "size-5 shrink-0",
                 f ? "text-white/55" : "text-black/55"
               ),
@@ -1262,7 +1271,7 @@ const Sa = (e) => {
             i != null && i !== "" && /* @__PURE__ */ s(
               "span",
               {
-                className: y(
+                className: N(
                   "text-xs font-medium",
                   f ? "text-white/55" : "text-black/55"
                 ),
@@ -1371,13 +1380,13 @@ const Pa = ({
 function ot(e) {
   var m, f, c, v;
   const t = (m = e.attachments) == null ? void 0 : m.find(
-    (w) => w.type === "video" && w.asset_url
+    (x) => x.type === "video" && x.asset_url
   ), n = (f = e.attachments) == null ? void 0 : f.find(
-    (w) => w.type === "image" && w.image_url
+    (x) => x.type === "image" && x.image_url
   ), a = (c = e.attachments) == null ? void 0 : c.find(
-    (w) => w.type === "audio" && w.asset_url
+    (x) => x.type === "audio" && x.asset_url
   ), r = (v = e.attachments) == null ? void 0 : v.find(
-    (w) => w.type === "file" && w.asset_url
+    (x) => x.type === "file" && x.asset_url
   ), i = t ?? n ?? a ?? r, l = (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 (!l) return null;
   const o = (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, g = t == null ? void 0 : t.thumb_url;
@@ -1534,7 +1543,7 @@ const bs = ({
     {
       "data-testid": l,
       "data-group-position": a,
-      className: y(
+      className: N(
         // 280px-wide bubble — matches the mobile chat attachment width
         // and keeps the document / image / audio bubbles visually
         // consistent inside the conversation timeline. The 8px / 16px
@@ -1554,7 +1563,7 @@ const bs = ({
         o ? /* @__PURE__ */ s(
           "p",
           {
-            className: y(
+            className: N(
               // No `text-*` / `font-*` overrides here — caption inherits
               // the same font family + size as `.str-chat__message-text`
               // so it matches the surrounding `CustomMessage` bubbles.
@@ -1583,7 +1592,7 @@ const bs = ({
       a.stopPropagation(), e();
     },
     "aria-label": n,
-    className: y(
+    className: N(
       "flex size-6 items-center justify-center rounded-full text-white",
       t === "overlay" ? "bg-[#121110]/85 backdrop-blur" : "bg-white/15 hover:bg-white/25"
     ),
@@ -1717,13 +1726,13 @@ const tr = {
   const d = n ?? t ?? "File", u = er(a, t, r), g = /* @__PURE__ */ s(
     "div",
     {
-      className: y(
+      className: N(
         "flex size-10 shrink-0 items-center justify-center rounded-sm",
         sr[e]
       ),
       "aria-hidden": !0,
       children: ge(a, {
-        className: y("size-6", nr[e]),
+        className: N("size-6", nr[e]),
         weight: "regular"
       })
     }
@@ -1732,7 +1741,7 @@ const tr = {
     u ? /* @__PURE__ */ s(
       "p",
       {
-        className: y(
+        className: N(
           "truncate text-xs leading-4",
           tr[e]
         ),
@@ -1745,7 +1754,7 @@ const tr = {
       type: "button",
       onClick: i,
       "aria-label": l,
-      className: y(
+      className: N(
         "flex min-w-0 flex-1 items-center gap-3 rounded-sm text-left transition-colors",
         e === "dark" ? "hover:bg-white/[0.04]" : "hover:bg-black/[0.04]"
       ),
@@ -1829,15 +1838,15 @@ const ar = ({
     if ((u == null ? void 0 : u(p)) === !1) return;
     const b = c[p];
     if (!b) return;
-    const x = b.filename ?? ne(b.src);
-    ws(b.src, x);
+    const w = b.filename ?? ne(b.src);
+    ws(b.src, w);
   };
   if (c.length === 0)
     return null;
-  const w = /* @__PURE__ */ s(
+  const x = /* @__PURE__ */ s(
     "span",
     {
-      className: y(
+      className: N(
         "flex size-8 items-center justify-center rounded-full",
         m === "dark" ? "text-white/70" : "text-black/70"
       ),
@@ -1859,7 +1868,7 @@ const ar = ({
           item: p,
           index: b,
           onActivate: v,
-          trailingAction: f && b === 0 ? /* @__PURE__ */ s(Se, { onClick: g, variant: "inline" }) : w
+          trailingAction: f && b === 0 ? /* @__PURE__ */ s(Se, { onClick: g, variant: "inline" }) : x
         },
         `${p.src}-${b}`
       )) })
@@ -1912,7 +1921,7 @@ const ar = ({
       }));
     },
     [o, e, t, l]
-  ), g = r ?? n !== "pill", f = { className: y(
+  ), g = r ?? n !== "pill", f = { className: N(
     n === "pill" ? "size-4" : "size-5",
     "shrink-0"
   ), weight: "bold" };
@@ -1923,7 +1932,7 @@ const ar = ({
       onClick: u,
       disabled: o,
       "aria-label": a,
-      className: y(
+      className: N(
         "flex size-8 shrink-0 items-center justify-center rounded-full transition-colors disabled:opacity-70",
         {
           dark: "text-white/70 hover:bg-white/[0.08] hover:text-white",
@@ -1963,7 +1972,7 @@ const ar = ({
       onClick: u,
       disabled: o,
       "aria-label": g ? a : void 0,
-      className: y(
+      className: N(
         "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full px-4 text-sm font-medium leading-none transition-colors disabled:opacity-70",
         i === "dark" ? "bg-[#121110] text-white hover:bg-[#2a2928]" : "bg-white text-[#121110] hover:bg-white/90"
       ),
@@ -2160,14 +2169,14 @@ const ar = ({
   const r = e.length;
   if (r === 0) return null;
   const i = e.slice(0, Math.min(r, n)), l = r - i.length, o = (d, u, g) => {
-    const m = y(dr, "h-full w-full");
+    const m = N(dr, "h-full w-full");
     return t ? /* @__PURE__ */ h(
       "button",
       {
         type: "button",
         onClick: () => t(u),
         "aria-label": d.ariaLabel ?? `Open media ${u + 1}`,
-        className: y(m, "cursor-zoom-in"),
+        className: N(m, "cursor-zoom-in"),
         children: [
           d.content,
           g
@@ -2179,10 +2188,10 @@ const ar = ({
       g
     ] }, u);
   };
-  return i.length === 1 ? /* @__PURE__ */ s("div", { className: y("aspect-square w-full", a), children: o(i[0], 0) }) : i.length === 2 ? /* @__PURE__ */ s(
+  return i.length === 1 ? /* @__PURE__ */ s("div", { className: N("aspect-square w-full", a), children: o(i[0], 0) }) : i.length === 2 ? /* @__PURE__ */ s(
     "div",
     {
-      className: y(
+      className: N(
         "grid aspect-[16/9] w-full grid-cols-2 gap-0.5",
         a
       ),
@@ -2191,7 +2200,7 @@ const ar = ({
   ) : i.length === 3 ? /* @__PURE__ */ h(
     "div",
     {
-      className: y(
+      className: N(
         "grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5",
         a
       ),
@@ -2204,7 +2213,7 @@ const ar = ({
   ) : /* @__PURE__ */ s(
     "div",
     {
-      className: y(
+      className: N(
         "grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5",
         a
       ),
@@ -2304,7 +2313,7 @@ const ar = ({
   );
   if (u.length === 0)
     return null;
-  const w = u.map(
+  const x = u.map(
     (p, b) => ur(p, b, u.length, o)
   );
   return /* @__PURE__ */ h(
@@ -2315,7 +2324,7 @@ const ar = ({
       groupPosition: l,
       "data-testid": "image-attachment",
       children: [
-        /* @__PURE__ */ s("div", { className: "relative", children: /* @__PURE__ */ s(ys, { tiles: w, onTileActivate: c }) }),
+        /* @__PURE__ */ s("div", { className: "relative", children: /* @__PURE__ */ s(ys, { tiles: x, onTileActivate: c }) }),
         /* @__PURE__ */ s(
           Ns,
           {
@@ -2422,14 +2431,14 @@ const ar = ({
   onClick: d,
   onDismiss: u
 }) => {
-  const g = Ee(e), m = wr({ src: t, filename: n, fileSize: a, title: r, items: i }), { viewerOpen: f, viewerIndex: c, handleActivate: v, closeViewer: w } = Ie(
+  const g = Ee(e), m = wr({ src: t, filename: n, fileSize: a, title: r, items: i }), { viewerOpen: f, viewerIndex: c, handleActivate: v, closeViewer: x } = Ie(
     d
   ), p = e === "composer" && !!u;
   if (m.length === 0)
     return null;
-  const b = m.map((x) => ({
-    src: x.src,
-    filename: x.filename ?? ne(x.src)
+  const b = m.map((w) => ({
+    src: w.src,
+    filename: w.filename ?? ne(w.src)
   }));
   return /* @__PURE__ */ h(
     Ce,
@@ -2439,11 +2448,11 @@ const ar = ({
       groupPosition: o,
       "data-testid": "pdf-attachment",
       children: [
-        /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: m.map((x, S) => {
-          const k = x.filename ?? ne(x.src), R = p && S === 0 ? /* @__PURE__ */ s(Se, { onClick: u, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ s(
+        /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: m.map((w, E) => {
+          const k = w.filename ?? ne(w.src), R = p && E === 0 ? /* @__PURE__ */ s(Se, { onClick: u, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ s(
             _s,
             {
-              url: x.src,
+              url: w.src,
               filename: k,
               variant: "inline",
               label: `Download ${k}`,
@@ -2454,12 +2463,12 @@ const ar = ({
             _r,
             {
               variant: g,
-              item: x,
-              index: S,
+              item: w,
+              index: E,
               onActivate: v,
               trailingAction: R
             },
-            `${x.src}-${S}`
+            `${w.src}-${E}`
           );
         }) }),
         /* @__PURE__ */ s(
@@ -2468,7 +2477,7 @@ const ar = ({
             open: f,
             items: b,
             initialIndex: c,
-            onClose: w
+            onClose: x
           }
         )
       ]
@@ -2607,13 +2616,13 @@ const ar = ({
   preload: d,
   onClick: u
 }) => {
-  const g = Ir({ src: t, poster: n, mimeType: a, preload: d, items: i }), m = Ee(e), { viewerOpen: f, viewerIndex: c, handleActivate: v, closeViewer: w } = Ie(
+  const g = Ir({ src: t, poster: n, mimeType: a, preload: d, items: i }), m = Ee(e), { viewerOpen: f, viewerIndex: c, handleActivate: v, closeViewer: x } = Ie(
     u
   );
   if (g.length === 0)
     return null;
   const p = g.map(
-    (b, x) => Er(b, x, g.length)
+    (b, w) => Er(b, w, g.length)
   );
   return /* @__PURE__ */ h(
     Ce,
@@ -2637,7 +2646,7 @@ const ar = ({
             open: f,
             items: Is(g, r),
             initialIndex: c,
-            onClose: w
+            onClose: x
           }
         )
       ]
@@ -2661,7 +2670,7 @@ const ar = ({
 function zr(e) {
   return ye(Ms)[e] ?? Pr[e];
 }
-const Or = j.lazy(() => import("./Card-qS17qnN0.js")), Fr = j.lazy(() => import("./Card-opmIFszT.js")), Br = () => /* @__PURE__ */ s(
+const Or = j.lazy(() => import("./Card-qS17qnN0.js")), Fr = j.lazy(() => import("./Card-DC9ICajo.js")), Br = () => /* @__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)]",
@@ -2745,7 +2754,7 @@ const Or = j.lazy(() => import("./Card-qS17qnN0.js")), Fr = j.lazy(() => import(
     "button",
     {
       type: "button",
-      className: y("message-vote-button focus-ring", {
+      className: N("message-vote-button focus-ring", {
         "message-vote-button--selected": e === "up"
       }),
       onClick: t,
@@ -2759,7 +2768,7 @@ const Or = j.lazy(() => import("./Card-qS17qnN0.js")), Fr = j.lazy(() => import(
     "button",
     {
       type: "button",
-      className: y("message-vote-button focus-ring", {
+      className: N("message-vote-button focus-ring", {
         "message-vote-button--selected": e === "down"
       }),
       onClick: n,
@@ -2806,7 +2815,7 @@ const Zr = {
   dark: "bg-white text-[#121110] hover:bg-white/90",
   light: "bg-[#121110] text-white hover:bg-[#2a2928]"
 }, Jr = ({ variant: e, cta: t }) => {
-  const n = y(
+  const n = N(
     "mt-2 inline-flex h-10 w-full items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors",
     Zr[e]
   ), a = gt(t.href);
@@ -2853,10 +2862,10 @@ const Zr = {
 }) => {
   const d = e === "dark", u = t ?? (d ? n : void 0) ?? "", g = u.trim() !== "", m = a != null && a.trim() !== "", f = typeof r == "string" ? r.trim() : "", c = f !== "", v = l != null;
   if (!g && !m && !c && !v) return null;
-  const p = y(
+  const p = N(
     "truncate text-base font-medium leading-6",
     d && !t ? ei : Qr[e]
-  ), b = y(
+  ), b = N(
     "truncate text-xs leading-4",
     ti[e]
   );
@@ -2866,7 +2875,7 @@ const Zr = {
         /* @__PURE__ */ h("div", { className: "flex min-w-0 flex-col gap-1", children: [
           g && /* @__PURE__ */ h("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: y("min-w-0", p), children: u })
+            /* @__PURE__ */ s("p", { className: N("min-w-0", p), children: u })
           ] }),
           m && /* @__PURE__ */ s("p", { className: b, children: a })
         ] }),
@@ -2876,7 +2885,7 @@ const Zr = {
     ] }),
     l && /* @__PURE__ */ s(Jr, { variant: e, cta: l })
   ] });
-}, si = y(
+}, si = N(
   "relative block w-[280px] select-none overflow-hidden rounded-md",
   // 1px hairline border that sits flush with the card chrome — matches
   // the messaging design system's "small border around link attachments"
@@ -2894,7 +2903,7 @@ const Zr = {
   bgClassName: o,
   "data-testid": d
 }) => {
-  const u = n != null || a != null, g = y(
+  const u = n != null || a != null, g = N(
     si,
     o ?? (e === "dark" ? "bg-[#1e2330]" : "bg-white"),
     // `focus-ring` is a design-system utility from the component-library
@@ -2925,7 +2934,7 @@ const Zr = {
       onClick: a,
       "aria-label": r,
       "data-testid": d,
-      className: y(g, "text-left"),
+      className: N(g, "text-left"),
       children: [
         t,
         m
@@ -2975,7 +2984,7 @@ const Zr = {
   ) }) : /* @__PURE__ */ h(
     "div",
     {
-      className: y(
+      className: N(
         "relative h-[180px] w-full overflow-hidden",
         d && "bg-black"
       ),
@@ -3002,7 +3011,7 @@ const Zr = {
         ) : /* @__PURE__ */ s(
           "div",
           {
-            className: y(
+            className: N(
               "flex h-full w-full items-center justify-center",
               ni[e]
             ),
@@ -3040,7 +3049,7 @@ const Zr = {
       className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
       children: /* @__PURE__ */ s(Be, { className: "size-3", weight: "bold" })
     }
-  ) : void 0, w = m ? /* @__PURE__ */ s(
+  ) : void 0, x = m ? /* @__PURE__ */ s(
     "button",
     {
       type: "button",
@@ -3088,7 +3097,7 @@ const Zr = {
             url: a,
             appIcon: d,
             cta: u,
-            trailingAction: w
+            trailingAction: x
           }
         )
       ]
@@ -3106,7 +3115,7 @@ const Zr = {
   cta: d,
   onClick: u
 }) => {
-  const g = bt(a, i), m = gt(n), f = d == null && m != null && !g ? m : void 0, c = d == null && !g ? u : void 0, v = $e(a, i) ? vt : void 0, w = d && u ? {
+  const g = bt(a, i), m = gt(n), f = d == null && m != null && !g ? m : void 0, c = d == null && !g ? u : void 0, v = $e(a, i) ? vt : void 0, x = d && u ? {
     ...d,
     onClick: () => {
       var p;
@@ -3141,7 +3150,7 @@ const Zr = {
             description: t,
             url: n,
             appIcon: o,
-            cta: w
+            cta: x
           }
         )
       ]
@@ -3396,14 +3405,14 @@ const gi = ({
   var v;
   const r = Ls(n.attachments);
   if (r.length === 0) return null;
-  const i = di(r), l = (v = n.text) == null ? void 0 : v.trim(), o = r.find((w) => w.type === "link"), d = (o == null ? void 0 : o.type) === "link" ? qt(o.attachments[0] ?? {}).url : void 0, u = l && li(l, d) ? void 0 : l;
+  const i = di(r), l = (v = n.text) == null ? void 0 : v.trim(), o = r.find((x) => x.type === "link"), d = (o == null ? void 0 : o.type) === "link" ? qt(o.attachments[0] ?? {}).url : void 0, u = l && li(l, d) ? void 0 : l;
   let g = 0;
-  const m = [], f = (w, p) => {
+  const m = [], f = (x, p) => {
     const b = t ? Ht.Sent : Ht.Received;
     m.push(
-      /* @__PURE__ */ s(b, { ...qt(w) }, p)
+      /* @__PURE__ */ s(b, { ...qt(x) }, p)
     );
-  }, c = (w, p) => {
+  }, c = (x, p) => {
     const b = ui(
       g,
       i,
@@ -3415,20 +3424,20 @@ const gi = ({
         {
           groupPosition: b,
           isMyMessage: t,
-          segment: w
+          segment: x
         },
         p
       )
     );
   };
-  return r.forEach((w, p) => {
-    if (w.type === "link") {
-      w.attachments.forEach((b, x) => {
-        f(b, `link-${p}-${x}`);
+  return r.forEach((x, p) => {
+    if (x.type === "link") {
+      x.attachments.forEach((b, w) => {
+        f(b, `link-${p}-${w}`);
       });
       return;
     }
-    c(w, `media-${p}`);
+    c(x, `media-${p}`);
   }), /* @__PURE__ */ h("div", { className: "str-chat__message-bubble-wrapper", children: [
     /* @__PURE__ */ h(
       "div",
@@ -3475,12 +3484,12 @@ const gi = ({
     isMyMessage: f,
     message: c,
     renderText: v,
-    threadList: w,
+    threadList: x,
     viewerLanguage: p
-  } = e, { client: b } = ke("CustomMessage"), { channel: x } = ue("CustomMessage"), { isUnlocking: S, onUnlockClick: k, onFetchSource: R, onDownloadClick: A } = zr("LockedAttachment"), [O, B] = F(!1), z = Ks(c.id), { selected: L, voteUp: C, voteDown: I } = ba(c), {
-    Attachment: N = Zs,
-    EditMessageModal: M = Js,
-    MessageActions: E,
+  } = e, { client: b } = ke("CustomMessage"), { channel: w } = ue("CustomMessage"), { isUnlocking: E, onUnlockClick: k, onFetchSource: R, onDownloadClick: A } = zr("LockedAttachment"), [z, B] = F(!1), O = Ks(c.id), { selected: L, voteUp: C, voteDown: T } = ba(c), {
+    Attachment: S = Zs,
+    EditMessageModal: I = Js,
+    MessageActions: y,
     MessageBlocked: D = Qs,
     MessageBouncePrompt: H = en,
     MessageDeleted: q = tn,
@@ -3488,7 +3497,7 @@ const gi = ({
     MessageRepliesCountButton: Z = nn,
     ReminderNotification: V = an,
     StreamedMessageText: _ = rn,
-    PinIndicator: T
+    PinIndicator: M
   } = es("CustomMessage"), $ = on(c), te = ln(c), X = se(
     () => m == null ? void 0 : m(c),
     [m, c]
@@ -3517,10 +3526,10 @@ const gi = ({
     return /* @__PURE__ */ s(q, { message: c });
   if (dn(c))
     return /* @__PURE__ */ s(D, {});
-  const le = !w && !!c.reply_count, ie = !w && c.show_in_channel && c.parent_id, xt = c.status === "failed" && ((Ct = c.error) == null ? void 0 : Ct.status) !== 403, wt = un(c);
+  const le = !x && !!c.reply_count, ie = !x && c.show_in_channel && c.parent_id, xt = c.status === "failed" && ((Ct = c.error) == null ? void 0 : Ct.status) !== 403, wt = un(c);
   let me;
   xt ? me = () => u(c) : wt && (me = () => B(!0));
-  const Q = f(), Bs = y(
+  const Q = f(), Bs = N(
     "str-chat__message str-chat__message-simple",
     `str-chat__message--${c.type}`,
     `str-chat__message--${c.status}`,
@@ -3550,21 +3559,21 @@ const gi = ({
     amountText: (Rt = c.metadata) == null ? void 0 : Rt.amount_text,
     detail: (Lt = c.metadata) == null ? void 0 : Lt.attachment_detail,
     paymentStatus: (Dt = c.metadata) == null ? void 0 : Dt.payment_status,
-    onFetchSource: R ? () => R(c, x) : void 0
+    onFetchSource: R ? () => R(c, w) : void 0
   };
   return /* @__PURE__ */ h(ee, { children: [
     a && /* @__PURE__ */ s(
-      M,
+      I,
       {
         additionalMessageInputProps: t
       }
     ),
-    O && /* @__PURE__ */ s(
+    z && /* @__PURE__ */ s(
       mn,
       {
         MessageBouncePrompt: H,
         onClose: () => B(!1),
-        open: O
+        open: z
       }
     ),
     /* @__PURE__ */ h(
@@ -3574,8 +3583,8 @@ const gi = ({
         "data-message-id": c.id,
         "data-dd-privacy": "mask",
         children: [
-          T && /* @__PURE__ */ s(T, {}),
-          !!z && /* @__PURE__ */ s(V, { reminder: z }),
+          M && /* @__PURE__ */ s(M, {}),
+          !!O && /* @__PURE__ */ s(V, { reminder: O }),
           c.user && /* @__PURE__ */ s(
             be,
             {
@@ -3591,7 +3600,7 @@ const gi = ({
           /* @__PURE__ */ s(
             "div",
             {
-              className: y("str-chat__message-inner", {
+              className: N("str-chat__message-inner", {
                 "str-chat__simple-message--error-failed": xt || wt
               }),
               "data-testid": "message-inner",
@@ -3606,7 +3615,7 @@ const gi = ({
                 marginInlineStart: 0
               },
               children: _t ? /* @__PURE__ */ s(qe, { message: c, standalone: !0 }) : Vr(c) ? /* @__PURE__ */ s("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
-                Q && E && /* @__PURE__ */ s(E, {}),
+                Q && y && /* @__PURE__ */ s(y, {}),
                 Q ? /* @__PURE__ */ s(
                   Re,
                   {
@@ -3618,32 +3627,32 @@ const gi = ({
                   {
                     ...yt,
                     isMine: !1,
-                    isUnlocking: S(c.id),
-                    onUnlockClick: () => k == null ? void 0 : k(c, x)
+                    isUnlocking: E(c.id),
+                    onUnlockClick: () => k == null ? void 0 : k(c, w)
                   }
                 ),
-                !Q && E && /* @__PURE__ */ s(E, {})
+                !Q && y && /* @__PURE__ */ s(y, {})
               ] }) }) : Gr(c) ? /* @__PURE__ */ h("div", { className: "str-chat__message-bubble-wrapper", children: [
                 /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
-                  Q && E && /* @__PURE__ */ s(E, {}),
+                  Q && y && /* @__PURE__ */ s(y, {}),
                   Q ? /* @__PURE__ */ s(
                     Re,
                     {
                       ...kt,
                       isMine: !0,
-                      onPreviewClick: () => k ? k(c, x) : void 0
+                      onPreviewClick: () => k ? k(c, w) : void 0
                     }
                   ) : /* @__PURE__ */ s(
                     Re,
                     {
                       ...kt,
                       isMine: !1,
-                      isUnlocking: S(c.id),
-                      onUnlockClick: () => k ? k(c, x) : void 0,
-                      onDownloadClick: () => A ? A(c, x) : void 0
+                      isUnlocking: E(c.id),
+                      onUnlockClick: () => k ? k(c, w) : void 0,
+                      onDownloadClick: () => A ? A(c, w) : void 0
                     }
                   ),
-                  !Q && E && /* @__PURE__ */ s(E, {})
+                  !Q && y && /* @__PURE__ */ s(y, {})
                 ] }),
                 c.text && /* @__PURE__ */ s("div", { className: "str-chat__message-bubble", children: /* @__PURE__ */ s(
                   Le,
@@ -3678,7 +3687,7 @@ const gi = ({
                 ),
                 Ue && /* @__PURE__ */ s(hn, { poll: Ue }),
                 U != null && U.length && !c.quoted_message ? /* @__PURE__ */ s(
-                  N,
+                  S,
                   {
                     actionHandler: o,
                     attachments: U
@@ -3715,7 +3724,7 @@ const gi = ({
               {
                 selected: L,
                 onVoteUp: C,
-                onVoteDown: I
+                onVoteDown: T
               }
             )
           ] }),
@@ -3937,19 +3946,19 @@ const gi = ({
     const v = () => {
       const p = m.offsetHeight, b = p > c;
       c = p;
-      const x = Array.from(
+      const w = Array.from(
         f.querySelectorAll(".str-chat__list")
-      ).find((k) => k.scrollHeight > k.clientHeight) ?? null, S = x ? x.scrollHeight - x.scrollTop - x.clientHeight < Ci : !1;
+      ).find((k) => k.scrollHeight > k.clientHeight) ?? null, E = w ? w.scrollHeight - w.scrollTop - w.clientHeight < Ci : !1;
       f.style.setProperty(
         "--messaging-composer-height",
         `${p}px`
-      ), b && S && x && (x.scrollTop = x.scrollHeight);
+      ), b && E && w && (w.scrollTop = w.scrollHeight);
     };
     if (v(), typeof ResizeObserver > "u")
       return;
-    const w = new ResizeObserver(v);
-    return w.observe(m), () => {
-      w.disconnect(), f.style.removeProperty("--messaging-composer-height");
+    const x = new ResizeObserver(v);
+    return x.observe(m), () => {
+      x.disconnect(), f.style.removeProperty("--messaging-composer-height");
     };
   }, [d]), a ? d ? /* @__PURE__ */ h(
     "div",
@@ -4160,7 +4169,7 @@ const gi = ({
   Ge.Generating,
   Ge.ExternalSources
 ]), $i = ({ threadList: e }) => {
-  var v, w;
+  var v, x;
   const { channel: t, channelConfig: n, thread: a } = ue(), { client: r } = ke(), { typing: i = {} } = _n(), { aiState: l } = Nn(t), o = ye(Ds);
   if (!e && o && Bi.has(l)) {
     const p = Ui(t, (v = r.user) == null ? void 0 : v.id);
@@ -4178,18 +4187,18 @@ const gi = ({
     return null;
   const u = e ? [] : Object.values(i).filter(
     ({ parent_id: p, user: b }) => {
-      var x;
-      return (b == null ? void 0 : b.id) !== ((x = r.user) == null ? void 0 : x.id) && !p;
+      var w;
+      return (b == null ? void 0 : b.id) !== ((w = r.user) == null ? void 0 : w.id) && !p;
     }
   ), g = e ? Object.values(i).filter(
     ({ parent_id: p, user: b }) => {
-      var x;
-      return (b == null ? void 0 : b.id) !== ((x = r.user) == null ? void 0 : x.id) && p === (a == null ? void 0 : a.id);
+      var w;
+      return (b == null ? void 0 : b.id) !== ((w = r.user) == null ? void 0 : w.id) && p === (a == null ? void 0 : a.id);
     }
   ) : [], m = e ? g : u;
   if (!m.length)
     return null;
-  const f = (w = m[0]) == null ? void 0 : w.user, c = f != null && f.id && t.state.members[f.id] ? t.state.members[f.id].user : void 0;
+  const f = (x = m[0]) == null ? void 0 : x.user, c = f != null && f.id && t.state.members[f.id] ? t.state.members[f.id].user : void 0;
   return /* @__PURE__ */ s(
     Jt,
     {
@@ -4255,7 +4264,7 @@ function Ui(e, t) {
 const ji = () => null, Vi = ({ className: e, message: t }) => /* @__PURE__ */ h(
   "div",
   {
-    className: y("flex items-center justify-center h-full", e),
+    className: N("flex items-center justify-center h-full", e),
     children: [
       /* @__PURE__ */ h("svg", { viewBox: "0 0 100 100", className: "size-8 fill-pebble", stroke: "none", children: [
         /* @__PURE__ */ s("circle", { cx: "6", cy: "50", r: "6", children: /* @__PURE__ */ s(
@@ -4316,27 +4325,27 @@ const Gi = ({
   showReportParticipant: f = !0,
   composerDisabled: c = !1,
   composerDisabledReason: v,
-  showStarButton: w = !1,
+  showStarButton: x = !1,
   chatbotVotingEnabled: p = !1,
   renderChannelBanner: b,
-  customChannelActions: x,
-  renderChannelActions: S,
+  customChannelActions: w,
+  renderChannelActions: E,
   renderMessage: k,
   viewerLanguage: R,
   showChannelInfo: A = !0,
-  onParticipantNameClick: O,
+  onParticipantNameClick: z,
   composerInput: B
 }) => {
-  const { channel: z } = ue(), L = z.state.messages.some(
-    (M) => M.type !== "deleted"
-  ), C = b ? /* @__PURE__ */ s(j.Fragment, { children: b() }, "lt-channel-banner") : null, I = /* @__PURE__ */ s(
+  const { channel: O } = ue(), L = O.state.messages.some(
+    (I) => I.type !== "deleted"
+  ), C = b ? /* @__PURE__ */ s(j.Fragment, { children: b() }, "lt-channel-banner") : null, T = /* @__PURE__ */ s(
     fa,
     {
       className: "-mx-[var(--str-chat\\_\\_spacing-2)] px-[var(--str-chat\\_\\_spacing-2)] md:-mx-[min(var(--str-chat\\_\\_spacing-10),4%)] md:px-[min(var(--str-chat\\_\\_spacing-10),4%)]",
       onBack: e,
       showBackButton: t,
       showChannelInfo: A,
-      showStarButton: w,
+      showStarButton: x,
       onLeaveConversation: i,
       onBlockParticipant: l,
       showDeleteConversation: o,
@@ -4345,21 +4354,21 @@ const Gi = ({
       onDeleteConversationClick: d,
       onBlockParticipantClick: u,
       onReportParticipantClick: g,
-      customChannelActions: x,
-      renderChannelActions: S,
-      onParticipantNameClick: O
+      customChannelActions: w,
+      renderChannelActions: E,
+      onParticipantNameClick: z
     }
-  ), N = W(
-    (M) => {
-      const { message: E } = pe("ChannelView"), D = /* @__PURE__ */ s(
+  ), S = W(
+    (I) => {
+      const { message: y } = pe("ChannelView"), D = /* @__PURE__ */ s(
         vi,
         {
-          ...M,
+          ...I,
           chatbotVotingEnabled: p,
           viewerLanguage: R
         }
       );
-      return !k || !E ? D : k(D, E);
+      return !k || !y ? D : k(D, y);
     },
     [p, k, R]
   );
@@ -4367,7 +4376,7 @@ const Gi = ({
     kn,
     {
       overrides: {
-        Message: N,
+        Message: S,
         MessageActions: _i,
         UnreadMessagesNotification: () => null,
         UnreadMessagesSeparator: () => null
@@ -4379,14 +4388,14 @@ const Gi = ({
             className: "messaging-channel-message-list messaging-channel-message-list--floating relative min-h-0 flex-1 overflow-hidden",
             children: [
               !L && /* @__PURE__ */ s("div", { className: "str-chat__list", children: /* @__PURE__ */ h("div", { className: "str-chat__message-list-scroll", children: [
-                I,
+                T,
                 C
               ] }) }),
               /* @__PURE__ */ s(
                 Bt,
                 {
                   head: L ? /* @__PURE__ */ h("div", { className: "sticky top-0 z-10", children: [
-                    I,
+                    T,
                     C
                   ] }) : void 0,
                   hideDeletedMessages: !0,
@@ -4401,12 +4410,12 @@ const Gi = ({
           Kt,
           {
             ...n && {
-              renderActions: () => n == null ? void 0 : n(z)
+              renderActions: () => n == null ? void 0 : n(O)
             },
             ...r && {
-              renderHeader: () => r(z)
+              renderHeader: () => r(O)
             },
-            renderFooter: () => a == null ? void 0 : a(z),
+            renderFooter: () => a == null ? void 0 : a(O),
             disabled: c,
             disabledReason: v,
             composerInput: B
@@ -4420,14 +4429,14 @@ const Gi = ({
             className: "flex-1 overflow-hidden relative",
             children: [
               !L && /* @__PURE__ */ s("div", { className: "str-chat__list", children: /* @__PURE__ */ h("div", { className: "str-chat__message-list-scroll", children: [
-                I,
+                T,
                 C
               ] }) }),
               /* @__PURE__ */ s(
                 Bt,
                 {
                   head: L ? /* @__PURE__ */ h("div", { className: "sticky top-0 z-10", children: [
-                    I,
+                    T,
                     C
                   ] }) : void 0,
                   hideDeletedMessages: !0,
@@ -4438,14 +4447,14 @@ const Gi = ({
           },
           "lt-channel-message-list"
         ),
-        r ? /* @__PURE__ */ s(j.Fragment, { children: r(z) }, "lt-channel-conversation-footer") : null,
+        r ? /* @__PURE__ */ s(j.Fragment, { children: r(O) }, "lt-channel-conversation-footer") : null,
         /* @__PURE__ */ s(
           Kt,
           {
             ...n && {
-              renderActions: () => n == null ? void 0 : n(z)
+              renderActions: () => n == null ? void 0 : n(O)
             },
-            renderFooter: () => a == null ? void 0 : a(z),
+            renderFooter: () => a == null ? void 0 : a(O),
             disabled: c,
             disabledReason: v,
             composerInput: B
@@ -4472,36 +4481,36 @@ const Gi = ({
     onBlockParticipantClick: f,
     onReportParticipantClick: c,
     showBlockParticipant: v = !0,
-    showReportParticipant: w = !0,
+    showReportParticipant: x = !0,
     composerDisabled: p = !1,
     composerDisabledReason: b,
-    dmAgentEnabled: x,
-    messageMetadata: S,
+    dmAgentEnabled: w,
+    messageMetadata: E,
     onMessageSent: k,
     showStarButton: R = !1,
     chatbotVotingEnabled: A = !1,
-    renderChannelBanner: O,
+    renderChannelBanner: z,
     customChannelActions: B,
-    renderChannelActions: z,
+    renderChannelActions: O,
     renderMessage: L,
     onMessageLinkClick: C,
-    sendButton: I,
-    attachmentPreviewList: N,
-    viewerLanguage: M,
-    showChannelInfo: E = !0,
+    sendButton: T,
+    attachmentPreviewList: S,
+    viewerLanguage: I,
+    showChannelInfo: y = !0,
     onParticipantNameClick: D,
     composerInput: H
   }) => {
     const q = W(
       async (Z, V, _) => {
         var J;
-        const T = ((J = e.data) == null ? void 0 : J.chatbot_paused) === !0, $ = x && !T, te = {
+        const M = ((J = e.data) == null ? void 0 : J.chatbot_paused) === !0, $ = w && !M, te = {
           ...V,
           ...$ && { silent: !0 },
-          ...S && {
+          ...E && {
             metadata: {
               ...V.metadata ?? {},
-              ...S
+              ...E
             }
           }
         }, X = {
@@ -4510,14 +4519,14 @@ const Gi = ({
         }, U = await e.sendMessage(te, X);
         return k == null || k(U), U;
       },
-      [e, x, S, k]
+      [e, w, E, k]
     ), K = G(null);
     return Y(() => {
       if (!C) return;
       const Z = K.current;
       if (!Z) return;
       const V = (_) => {
-        const T = _.target, $ = T == null ? void 0 : T.closest("a[href]"), te = $ == null ? void 0 : $.getAttribute("href");
+        const M = _.target, $ = M == null ? void 0 : M.closest("a[href]"), te = $ == null ? void 0 : $.getAttribute("href");
         if (!te) return;
         const X = $ == null ? void 0 : $.closest("[data-message-id]"), U = X == null ? void 0 : X.getAttribute("data-message-id"), J = U ? e.state.messages.find((ae) => ae.id === U) : void 0;
         C(te, J);
@@ -4527,11 +4536,11 @@ const Gi = ({
       "div",
       {
         ref: K,
-        className: y(
+        className: N(
           "messaging-channel-view h-full flex flex-col",
           d
         ),
-        children: /* @__PURE__ */ s(Ds.Provider, { value: x ?? !1, children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ s(Ds.Provider, { value: w ?? !1, children: /* @__PURE__ */ s(
           yn,
           {
             channel: e,
@@ -4541,8 +4550,8 @@ const Gi = ({
             DateSeparator: ga,
             TypingIndicator: $i,
             doSendMessageRequest: q,
-            ...I ? { SendButton: I } : {},
-            ...N ? { AttachmentPreviewList: N } : {},
+            ...T ? { SendButton: T } : {},
+            ...S ? { AttachmentPreviewList: S } : {},
             children: /* @__PURE__ */ s(
               Gi,
               {
@@ -4559,17 +4568,17 @@ const Gi = ({
                 onBlockParticipantClick: f,
                 onReportParticipantClick: c,
                 showBlockParticipant: v,
-                showReportParticipant: w,
+                showReportParticipant: x,
                 composerDisabled: p,
                 composerDisabledReason: b,
                 showStarButton: R,
                 chatbotVotingEnabled: A,
-                renderChannelBanner: O,
+                renderChannelBanner: z,
                 customChannelActions: B,
-                renderChannelActions: z,
+                renderChannelActions: O,
                 renderMessage: L,
-                viewerLanguage: M,
-                showChannelInfo: E,
+                viewerLanguage: I,
+                showChannelInfo: y,
                 onParticipantNameClick: D,
                 composerInput: H
               }
@@ -4612,31 +4621,31 @@ const bo = ({
   chatbotVotingEnabled: f = !1,
   viewerLanguage: c,
   renderChannelBanner: v,
-  customChannelActions: w,
+  customChannelActions: x,
   renderChannelActions: p,
   onParticipantNameClick: b,
-  renderMessage: x,
-  onMessageLinkClick: S,
+  renderMessage: w,
+  onMessageLinkClick: E,
   showChannelInfo: k,
   composerInput: R
 }) => {
   const {
     client: A,
-    isConnected: O,
+    isConnected: z,
     isLoading: B,
-    error: z,
+    error: O,
     refreshConnection: L,
     service: C,
-    debug: I
-  } = ta(), [N, M] = F(null), [E, D] = F(null), [H, q] = F(!1), { showDeleteConversation: K = !0 } = e, Z = G(l);
+    debug: T
+  } = ta(), [S, I] = F(null), [y, D] = F(null), [H, q] = F(!1), { showDeleteConversation: K = !0 } = e, Z = G(l);
   Z.current = l;
   const V = G(a);
   V.current = a;
-  const _ = G(null), T = G(null);
+  const _ = G(null), M = G(null);
   Y(() => {
-    T.current = N;
-  }, [N]), Y(() => {
-    if (!A || !O) return;
+    M.current = S;
+  }, [S]), Y(() => {
+    if (!A || !z) return;
     const X = A.userID;
     if (!X) return;
     const U = `${X}::${i}`;
@@ -4648,7 +4657,7 @@ const bo = ({
     (async () => {
       var Te, Me;
       try {
-        I && console.log(
+        T && console.log(
           "[MessagingShell] Loading initial conversation with:",
           i
         );
@@ -4661,7 +4670,7 @@ const bo = ({
           { limit: 1 }
         );
         if (re.length > 0) {
-          M(re[0]), D(null), (Te = V.current) == null || Te.call(V, re[0]), I && console.log(
+          I(re[0]), D(null), (Te = V.current) == null || Te.call(V, re[0]), T && console.log(
             "[MessagingShell] Initial conversation loaded:",
             re[0].id
           );
@@ -4669,7 +4678,7 @@ const bo = ({
         }
         const le = Z.current;
         if (!le || !C) {
-          J(), D("No conversation found with this account"), I && console.log(
+          J(), D("No conversation found with this account"), T && console.log(
             "[MessagingShell] No conversation found for:",
             i
           );
@@ -4681,7 +4690,7 @@ const bo = ({
             name: le.name,
             phone: le.phone
           });
-          M(ie), D(null), (Me = V.current) == null || Me.call(V, ie), I && console.log(
+          I(ie), D(null), (Me = V.current) == null || Me.call(V, ie), T && console.log(
             "[MessagingShell] Channel created and loaded:",
             ie.id
           );
@@ -4695,26 +4704,26 @@ const bo = ({
         console.error(
           "[MessagingShell] Failed to load initial conversation:",
           re
-        ), J(), T.current || D("Failed to load conversation");
+        ), J(), M.current || D("Failed to load conversation");
       }
     })();
-  }, [i, A, O, C, I]);
+  }, [i, A, z, C, T]);
   const $ = G(r);
   $.current = r;
   const te = W(() => {
     var X;
-    M(null), q(!0), (X = $.current) == null || X.call($);
+    I(null), q(!0), (X = $.current) == null || X.call($);
   }, []);
-  return B ? /* @__PURE__ */ s(Fe, {}) : z ? /* @__PURE__ */ s(we, { message: z, onBack: L }) : !O || !A ? /* @__PURE__ */ s(
+  return B ? /* @__PURE__ */ s(Fe, {}) : O ? /* @__PURE__ */ s(we, { message: O, onBack: L }) : !z || !A ? /* @__PURE__ */ s(
     we,
     {
       message: "Not connected to messaging service",
       onBack: L
     }
-  ) : E ? /* @__PURE__ */ s(we, { message: E }) : H && !N ? /* @__PURE__ */ s(we, { message: "Conversation ended" }) : N ? /* @__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(
+  ) : y ? /* @__PURE__ */ s(we, { message: y }) : H && !S ? /* @__PURE__ */ s(we, { message: "Conversation ended" }) : S ? /* @__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(
     Ps,
     {
-      channel: N,
+      channel: S,
       renderMessageInputActions: t,
       renderConversationFooter: n,
       renderChannelBanner: v,
@@ -4728,15 +4737,15 @@ const bo = ({
       onMessageSent: m,
       chatbotVotingEnabled: f,
       viewerLanguage: c,
-      customChannelActions: w,
+      customChannelActions: x,
       renderChannelActions: p,
       onParticipantNameClick: b,
-      renderMessage: x,
-      onMessageLinkClick: S,
+      renderMessage: w,
+      onMessageLinkClick: E,
       showChannelInfo: k,
       composerInput: R
     },
-    N.id
+    S.id
   ) }) }) : /* @__PURE__ */ s(Fe, {});
 };
 function Hi(e) {
@@ -4776,7 +4785,7 @@ const zs = j.createContext({
   });
 }, Os = j.memo(
   (e) => {
-    var B, z, L;
+    var B, O, L;
     const { channel: t, unread: n } = e, {
       selectedChannel: a,
       onChannelSelect: r,
@@ -4799,44 +4808,44 @@ const zs = j.createContext({
     const f = () => {
       t && r(t);
     }, c = (C) => {
-      const I = C.key === "Enter" || C.key === " ", N = C.repeat;
-      !I || N || (C.preventDefault(), f());
+      const T = C.key === "Enter" || C.key === " ", S = C.repeat;
+      !T || S || (C.preventDefault(), f());
     }, v = ls(
       (B = t == null ? void 0 : t.state) == null ? void 0 : B.members,
       u == null ? void 0 : u.userID,
       t == null ? void 0 : t.type
-    ), w = cs(v == null ? void 0 : v.user), p = (z = v == null ? void 0 : v.user) == null ? void 0 : z.image, b = (() => {
-      var I;
-      const C = (I = t == null ? void 0 : t.state) == null ? void 0 : I.messages;
+    ), x = cs(v == null ? void 0 : v.user), p = (O = v == null ? void 0 : v.user) == null ? void 0 : O.image, b = (() => {
+      var T;
+      const C = (T = t == null ? void 0 : t.state) == null ? void 0 : T.messages;
       if (C != null && C.length) {
-        for (let N = C.length - 1; N >= 0; N--)
-          if (C[N].type !== "system") return C[N];
+        for (let S = C.length - 1; S >= 0; S--)
+          if (C[S].type !== "system") return C[S];
       }
-    })(), S = (() => {
-      var E;
+    })(), E = (() => {
+      var y;
       const C = us({
         message: b,
         viewerLanguage: d
-      }), { custom_type: I, attachment_content_type: N } = (b == null ? void 0 : b.metadata) || {};
-      if (I === "MESSAGE_TIP")
+      }), { custom_type: T, attachment_content_type: S } = (b == null ? void 0 : b.metadata) || {};
+      if (T === "MESSAGE_TIP")
         return C || "Sent a tip";
-      if (I === "MESSAGE_PAID")
+      if (T === "MESSAGE_PAID")
         return C || "Sent a message";
-      if (I === "MESSAGE_ATTACHMENT") {
-        if (N === "text")
+      if (T === "MESSAGE_ATTACHMENT") {
+        if (S === "text")
           return "🔒 Sent a locked message";
-        if (N === "media")
+        if (S === "media")
           return "🔒 Sent a locked attachment";
       }
       if (C) return C;
-      const M = (E = b == null ? void 0 : b.attachments) == null ? void 0 : E[0];
-      return M ? M.og_scrape_url ? M.og_scrape_url : M.type === "image" ? "📷 Sent an image" : M.type === "video" ? "🎥 Sent a video" : M.type === "audio" ? "🎵 Sent audio" : M.type === "file" ? "📎 Sent a file" : "📎 Sent an attachment" : "No messages yet";
-    })(), k = b != null && b.created_at ? Xi(new Date(b.created_at)) : "", R = b ? De(b) : !1, A = o ? o(b, S) : `${R ? "✨ " : ""}${S}`, O = n ?? 0;
+      const I = (y = b == null ? void 0 : b.attachments) == null ? void 0 : y[0];
+      return I ? I.og_scrape_url ? I.og_scrape_url : I.type === "image" ? "📷 Sent an image" : I.type === "video" ? "🎥 Sent a video" : I.type === "audio" ? "🎵 Sent audio" : I.type === "file" ? "📎 Sent a file" : "📎 Sent an attachment" : "No messages yet";
+    })(), k = b != null && b.created_at ? Xi(new Date(b.created_at)) : "", R = b ? De(b) : !1, A = o ? o(b, E) : `${R ? "✨ " : ""}${E}`, z = n ?? 0;
     return i && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
       channelId: t == null ? void 0 : t.id,
       isSelected: g,
-      participantName: w,
-      unreadCount: O,
+      participantName: x,
+      unreadCount: z,
       hasTimestamp: !!k
     }), /* @__PURE__ */ s(
       "div",
@@ -4845,7 +4854,7 @@ const zs = j.createContext({
         tabIndex: 0,
         onClick: f,
         onKeyDown: c,
-        className: y(
+        className: N(
           "group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring rounded-[12px] [&+&]:mt-2",
           {
             "bg-black/[0.04]": g,
@@ -4858,7 +4867,7 @@ const zs = j.createContext({
             be,
             {
               id: ((L = v == null ? void 0 : v.user) == null ? void 0 : L.id) || t.id || "unknown",
-              name: w,
+              name: x,
               image: p,
               size: 48,
               starred: m
@@ -4869,12 +4878,12 @@ const zs = j.createContext({
               /* @__PURE__ */ h(
                 "h3",
                 {
-                  className: y(
+                  className: N(
                     "text-sm font-medium truncate text-[#191918]"
                   ),
                   children: [
                     m && /* @__PURE__ */ s("span", { className: "sr-only", children: "Starred conversation. " }),
-                    w
+                    x
                   ]
                 }
               ),
@@ -4882,7 +4891,7 @@ const zs = j.createContext({
             ] }),
             /* @__PURE__ */ h("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
               /* @__PURE__ */ s("p", { className: "text-sm text-[#717070] flex-1 line-clamp-1", children: A }),
-              O > 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: O > 99 ? "99+" : O })
+              z > 0 && /* @__PURE__ */ s("span", { className: "bg-[#7f22fe] text-white text-[10px] rounded-full h-4 flex items-center justify-center p-1 min-w-4 text-center flex-shrink-0", children: z > 99 ? "99+" : z })
             ] })
           ] })
         ] })
@@ -4908,22 +4917,22 @@ const Ki = { last_message_at: -1 }, Zi = j.memo(
     lockChannelOrder: f,
     onMessageNewHandler: c,
     onMessageNew: v,
-    onChannelVisible: w,
+    onChannelVisible: x,
     onAddedToChannel: p,
     onChannelUpdated: b
   }) => {
-    const x = j.useRef(0);
-    x.current++;
-    const { debug: S = !1 } = nt(), k = j.useCallback(
+    const w = j.useRef(0);
+    w.current++;
+    const { debug: E = !1 } = nt(), k = j.useCallback(
       (A) => {
-        for (const O of A)
-          Hi(O);
+        for (const z of A)
+          Hi(z);
         return r ? r(A) : A;
       },
       [r]
     );
-    S && console.log("📺 [ChannelList] 🔄 RENDER START", {
-      renderCount: x.current,
+    E && console.log("📺 [ChannelList] 🔄 RENDER START", {
+      renderCount: w.current,
       selectedChannelId: t == null ? void 0 : t.id,
       filters: n
     });
@@ -4931,7 +4940,7 @@ const Ki = { last_message_at: -1 }, Zi = j.memo(
       () => ({
         selectedChannel: t,
         onChannelSelect: e,
-        debug: S,
+        debug: E,
         channelPreview: u,
         renderMessagePreview: g,
         viewerLanguage: m
@@ -4939,7 +4948,7 @@ const Ki = { last_message_at: -1 }, Zi = j.memo(
       [
         t,
         e,
-        S,
+        E,
         u,
         g,
         m
@@ -4948,7 +4957,7 @@ const Ki = { last_message_at: -1 }, Zi = j.memo(
     return /* @__PURE__ */ s(
       "div",
       {
-        className: y(
+        className: N(
           "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
           l
         ),
@@ -4963,7 +4972,7 @@ const Ki = { last_message_at: -1 }, Zi = j.memo(
             lockChannelOrder: f,
             onMessageNewHandler: c,
             onMessageNew: v,
-            onChannelVisible: w,
+            onChannelVisible: x,
             onAddedToChannel: p,
             onChannelUpdated: b,
             Paginator: d,
@@ -5014,7 +5023,7 @@ const Qt = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
   "div",
   {
     "data-dd-privacy": "mask",
-    className: y(
+    className: N(
       "relative px-4 py-3",
       "text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]",
       r
@@ -5059,7 +5068,7 @@ const Qt = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     onClick: t,
     disabled: n,
     style: { backgroundColor: "#E6E5E3" },
-    className: y(
+    className: N(
       "w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors focus-ring",
       {
         "hover:brightness-95 active:brightness-90": !n,
@@ -5150,4 +5159,4 @@ export {
   ls as y,
   it as z
 };
-//# sourceMappingURL=index-BdRJRNr3.js.map
+//# sourceMappingURL=index-8L0IGn55.js.map