@linktr.ee/messaging-react 3.4.0-rc-1782374156 → 3.4.0-rc-1782392192

package/dist/{index-DKq7HA0h.js → index-BOsrtjME.js}

@@ -1,10 +1,10 @@
 import { jsx as n, jsxs as h, Fragment as se } from "react/jsx-runtime";
-import U, { createContext as Ye, useContext as Ae, useCallback as J, useState as z, useRef as j, useEffect as X, useId as Sn, useMemo as ne, Suspense as qe } from "react";
+import U, { createContext as Ye, useContext as Ae, useCallback as K, useState as z, useRef as H, useEffect as X, useId as Sn, useMemo as ne, Suspense as qe } from "react";
 import { StreamChatService as In } from "@linktr.ee/messaging-core";
 import { StreamChat as Tn, LinkPreviewsManager as At } from "stream-chat";
 import { Chat as An, DateSeparator as Mn, useChannelStateContext as de, useChatContext as We, areMessageUIPropsEqual as Rn, useMessageReminder as Ln, useComponentContext as jt, Attachment as Dn, EditMessageModal as On, MessageBlocked as Pn, MessageBouncePrompt as zn, MessageDeleted as $n, MessageIsThreadReplyInChannelButtonIndicator as Fn, MessageRepliesCountButton as Bn, ReminderNotification as Un, StreamedMessageText as jn, messageHasAttachments as Vn, messageHasReactions as Gn, isDateSeparatorMessage as Hn, isMessageBlocked as Yn, isMessageBounced as qn, MessageBounceModal as Wn, MessageText as Mt, Poll as Xn, MessageErrorIcon as Kn, useMessageContext as xe, useMessageComposer as Jn, useStateStore as Zn, MessageInput as Qn, useMessageInputContext as es, useMessageComposerHasSendableData as ts, AttachmentPreviewList as ns, QuotedMessagePreview as ss, TextareaComposer as as, MessageTimestamp as De, AIStates as Oe, useTypingContext as rs, useAIState as is, Channel as os, WithComponents as ls, Window as cs, MessageList as ds, ChannelList as us, InfiniteScroll as ms } from "stream-chat-react";
 import { StarIcon as Be, DotsThreeIcon as hs, SpinnerGapIcon as ke, SignOutIcon as fs, ProhibitInsetIcon as Rt, FlagIcon as Vt, FileIcon as Gt, ImageIcon as gs, SpeakerHighIcon as bs, VideoCameraIcon as Ht, FileMdIcon as ps, FileTextIcon as vs, FileZipIcon as xs, FilePptIcon as ws, FileCsvIcon as _s, FileXlsIcon as Ns, FileDocIcon as ys, FilePdfIcon as Cs, CircleNotchIcon as pe, PlayIcon as Ue, PauseIcon as ks, LinkIcon as Es, DownloadSimpleIcon as ve, GiftIcon as Ss, ThumbsUpIcon as Is, ThumbsDownIcon as Ts, TrashSimpleIcon as As, XIcon as Me, ArrowUpIcon as Ms, SparkleIcon as je, ProhibitIcon as Rs, ArrowLeftIcon as Lt, CaretRightIcon as Ve, PencilSimpleIcon as Ls, CaretLeftIcon as Ds } from "@phosphor-icons/react";
-import C from "classnames";
+import y from "classnames";
 import { MessageActions as Os, DefaultDropdownActionButton as Yt } from "stream-chat-react/experimental";
 const qt = Ye({
   service: null,
@@ -24,10 +24,10 @@ const qt = Ye({
   capabilities: r = {},
   debug: i = !1
 }) => {
-  var F, T;
-  const o = J(
-    (E, ...A) => {
-      i && console.log(`🔥 [MessagingProvider] ${E}`, ...A);
+  var D, I;
+  const o = K(
+    (T, ...S) => {
+      i && console.log(`🔥 [MessagingProvider] ${T}`, ...S);
     },
     [i]
   );
@@ -37,77 +37,77 @@ const qt = Ye({
     serviceConfig: !!s,
     capabilities: Object.keys(r)
   });
-  const [l, d] = z(null), [m, g] = z(null), [u, f] = z(!1), [c, b] = z(!1), [w, p] = z(null), v = j(!1), _ = j(null), R = j(s);
-  R.current = s;
-  const y = j(i);
-  y.current = i;
-  const M = j({
+  const [l, d] = z(null), [m, g] = z(null), [u, f] = z(!1), [c, b] = z(!1), [_, v] = z(null), p = H(!1), x = H(null), A = H(s);
+  A.current = s;
+  const M = H(i);
+  M.current = i;
+  const N = H({
     userId: t == null ? void 0 : t.id,
     apiKey: a,
     serviceConfig: s,
     capabilities: r
-  }), D = j(0);
-  D.current++, o("📊 RENDER INFO", {
-    renderCount: D.current,
+  }), L = H(0);
+  L.current++, o("📊 RENDER INFO", {
+    renderCount: L.current,
     currentProps: { userId: t == null ? void 0 : t.id, apiKey: (a == null ? void 0 : a.substring(0, 8)) + "..." },
     propChanges: {
-      userChanged: M.current.userId !== (t == null ? void 0 : t.id),
-      apiKeyChanged: M.current.apiKey !== a,
-      serviceConfigChanged: M.current.serviceConfig !== s,
-      capabilitiesChanged: M.current.capabilities !== r
+      userChanged: N.current.userId !== (t == null ? void 0 : t.id),
+      apiKeyChanged: N.current.apiKey !== a,
+      serviceConfigChanged: N.current.serviceConfig !== s,
+      capabilitiesChanged: N.current.capabilities !== r
     }
-  }), M.current = {
+  }), N.current = {
     userId: t == null ? void 0 : t.id,
     apiKey: a,
     serviceConfig: s,
     capabilities: r
   };
-  const $ = j(null);
-  a && ((F = $.current) == null ? void 0 : F.apiKey) !== a && ($.current = { apiKey: a, client: new Tn(a) });
-  const L = a ? ((T = $.current) == null ? void 0 : T.client) ?? null : null;
+  const $ = H(null);
+  a && ((D = $.current) == null ? void 0 : D.apiKey) !== a && ($.current = { apiKey: a, client: new Tn(a) });
+  const O = a ? ((I = $.current) == null ? void 0 : I.client) ?? null : null;
   X(() => {
-    const E = D.current, A = R.current;
-    if (!a || !L || !A) {
+    const T = L.current, S = A.current;
+    if (!a || !O || !S) {
       o("⚠️ SERVICE INIT SKIPPED", {
-        renderCount: E,
+        renderCount: T,
         reason: "Missing apiKey, client, or serviceConfig"
       });
       return;
     }
     o("🚀 CREATING SERVICE", {
-      renderCount: E,
+      renderCount: T,
       apiKey: (a == null ? void 0 : a.substring(0, 8)) + "..."
     });
-    const O = new In({
-      ...A,
+    const P = new In({
+      ...S,
       apiKey: a,
-      debug: y.current,
-      client: L
+      debug: M.current,
+      client: O
     });
-    _.current = O, d(O), o("✅ SERVICE SET", {
-      renderCount: E,
-      serviceInstance: !!O
+    x.current = P, d(P), o("✅ SERVICE SET", {
+      renderCount: T,
+      serviceInstance: !!P
     });
-  }, [a, L]);
-  const N = j(null);
+  }, [a, O]);
+  const E = H(null);
   X(() => {
-    var A, O;
+    var S, P;
     if (o("🔗 USER CONNECTION EFFECT TRIGGERED", {
       hasService: !!l,
       hasUser: !!t,
       userId: t == null ? void 0 : t.id,
-      isConnecting: v.current,
+      isConnecting: p.current,
       isConnected: u,
       dependencies: { service: !!l, userId: t == null ? void 0 : t.id }
     }), !l || !t) {
       o("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
       return;
     }
-    if (v.current) {
+    if (p.current) {
       o("⚠️ USER CONNECTION SKIPPED", "Already connecting");
       return;
     }
-    if (((A = N.current) == null ? void 0 : A.serviceId) === l && ((O = N.current) == null ? void 0 : O.userId) === t.id) {
+    if (((S = E.current) == null ? void 0 : S.serviceId) === l && ((P = E.current) == null ? void 0 : P.userId) === t.id) {
       o(
         "⚠️ USER CONNECTION SKIPPED",
         "Already connected this user with this service"
@@ -115,35 +115,35 @@ const qt = Ye({
       return;
     }
     (async () => {
-      o("🚀 STARTING USER CONNECTION", { userId: t.id }), v.current = !0, b(!0), p(null);
+      o("🚀 STARTING USER CONNECTION", { userId: t.id }), p.current = !0, b(!0), v(null);
       try {
         o("📞 CALLING SERVICE.CONNECTUSER", { userId: t.id });
-        const B = await l.connectUser(t);
-        g(B), f(!0), N.current = { serviceId: l, userId: t.id }, o("✅ USER CONNECTION SUCCESS", {
+        const F = await l.connectUser(t);
+        g(F), f(!0), E.current = { serviceId: l, userId: t.id }, o("✅ USER CONNECTION SUCCESS", {
           userId: t.id,
-          clientId: B.userID
+          clientId: F.userID
         });
-      } catch (B) {
-        const H = B instanceof Error ? B.message : "Connection failed";
-        p(H), o("❌ USER CONNECTION ERROR", {
+      } catch (F) {
+        const Y = F instanceof Error ? F.message : "Connection failed";
+        v(Y), o("❌ USER CONNECTION ERROR", {
           userId: t.id,
-          error: H
+          error: Y
         });
       } finally {
-        b(!1), v.current = !1, o("🔄 USER CONNECTION FINISHED", {
+        b(!1), p.current = !1, o("🔄 USER CONNECTION FINISHED", {
           userId: t.id,
           isConnected: u
         });
       }
     })();
   }, [l, t, o, u]), X(() => {
-    const E = L;
+    const T = O;
     return () => {
-      var A;
-      E && (N.current = null, (A = _.current) == null || A.disconnectUser().catch(console.error));
+      var S;
+      T && (E.current = null, (S = x.current) == null || S.disconnectUser().catch(console.error));
     };
-  }, [L]);
-  const I = J(async () => {
+  }, [O]);
+  const k = K(async () => {
     if (o("🔄 REFRESH CONNECTION CALLED", {
       hasService: !!l,
       hasUser: !!t
@@ -154,52 +154,52 @@ const qt = Ye({
     o("🚀 STARTING CONNECTION REFRESH", { userId: t.id }), b(!0);
     try {
       o("🔌 DISCONNECTING FOR REFRESH"), await l.disconnectUser(), o("📞 RECONNECTING FOR REFRESH");
-      const E = await l.connectUser(t);
-      g(E), f(!0), p(null), o("✅ CONNECTION REFRESH SUCCESS", { userId: t.id });
-    } catch (E) {
-      const A = E instanceof Error ? E.message : "Refresh failed";
-      p(A), o("❌ CONNECTION REFRESH ERROR", {
+      const T = await l.connectUser(t);
+      g(T), f(!0), v(null), o("✅ CONNECTION REFRESH SUCCESS", { userId: t.id });
+    } catch (T) {
+      const S = T instanceof Error ? T.message : "Refresh failed";
+      v(S), o("❌ CONNECTION REFRESH ERROR", {
         userId: t.id,
-        error: A
+        error: S
       });
     } finally {
       b(!1), o("🔄 CONNECTION REFRESH FINISHED", { userId: t.id });
     }
-  }, [l, t, o]), S = U.useMemo(() => (o("💫 CONTEXT VALUE MEMOIZATION", {
+  }, [l, t, o]), R = U.useMemo(() => (o("💫 CONTEXT VALUE MEMOIZATION", {
     hasService: !!l,
     hasClient: !!m,
     isConnected: u,
     isLoading: c,
-    hasError: !!w,
+    hasError: !!_,
     capabilitiesKeys: Object.keys(r)
   }), {
     service: l,
     client: m,
     isConnected: u,
     isLoading: c,
-    error: w,
+    error: _,
     capabilities: r,
-    refreshConnection: I,
+    refreshConnection: k,
     debug: i
   }), [
     l,
     m,
     u,
     c,
-    w,
+    _,
     r,
-    I,
+    k,
     i,
     o
   ]);
   return o("🔄 RENDER END", {
-    renderCount: D.current,
-    willRenderChat: !!L,
-    contextValueReady: !!S
-  }), /* @__PURE__ */ n(qt.Provider, { value: S, children: L ? /* @__PURE__ */ n(
+    renderCount: L.current,
+    willRenderChat: !!O,
+    contextValueReady: !!R
+  }), /* @__PURE__ */ n(qt.Provider, { value: R, children: O ? /* @__PURE__ */ n(
     An,
     {
-      client: L,
+      client: O,
       customClasses: {
         channelList: "str-chat__channel-list str-chat__channel-list-react bg-transparent lg:border-r-2 border-r-0 border-[#0000000A]"
       },
@@ -279,7 +279,7 @@ function Bs(e) {
   const s = Fs(e) % Ot.length;
   return Ot[s];
 }
-const ie = ({
+const oe = ({
   id: e,
   image: t,
   size: s = 40,
@@ -299,7 +299,7 @@ const ie = ({
     "div",
     {
       "aria-hidden": "true",
-      className: C(
+      className: y(
         "avatar-fallback flex h-full w-full items-center justify-center bg-[#E6E5E3] font-semibold select-none transition-colors",
         m
       ),
@@ -309,7 +309,7 @@ const ie = ({
   return /* @__PURE__ */ h(
     "div",
     {
-      className: C(
+      className: y(
         "relative flex-shrink-0 !bg-transparent",
         a
       ),
@@ -331,7 +331,7 @@ const ie = ({
           "div",
           {
             "data-testid": "avatar-ring",
-            className: C(
+            className: y(
               "h-full w-full",
               "bg-transparent"
             ),
@@ -363,73 +363,73 @@ const ie = ({
   onActionComplete: m,
   logLabel: g = "useChannelModerationActions"
 }) => {
-  var F;
-  const { service: u, debug: f } = Xe(), c = (F = t == null ? void 0 : t.user) == null ? void 0 : F.id, b = !!(a && s && u && c), [w, p] = z(!1), [v, _] = z(null), [R, y] = z(!1), [M, D] = z(!1), $ = b && ((v == null ? void 0 : v.participantId) !== c || (v == null ? void 0 : v.service) !== u);
+  var D;
+  const { service: u, debug: f } = Xe(), c = (D = t == null ? void 0 : t.user) == null ? void 0 : D.id, b = !!(a && s && u && c), [_, v] = z(!1), [p, x] = z(null), [A, M] = z(!1), [N, L] = z(!1), $ = b && ((p == null ? void 0 : p.participantId) !== c || (p == null ? void 0 : p.service) !== u);
   return X(() => {
     if (!b || !u || !c) {
-      p(!1), _(null);
+      v(!1), x(null);
       return;
     }
-    let T = !1;
+    let I = !1;
     return (async () => {
       try {
-        const E = await u.getBlockedUsers();
-        if (T) return;
-        p(
-          E.some(
-            (A) => A.blocked_user_id === c
+        const T = await u.getBlockedUsers();
+        if (I) return;
+        v(
+          T.some(
+            (S) => S.blocked_user_id === c
           )
         );
-      } catch (E) {
-        T || console.error(`[${g}] Failed to check blocked status:`, E);
+      } catch (T) {
+        I || console.error(`[${g}] Failed to check blocked status:`, T);
       } finally {
-        T || _({ participantId: c, service: u });
+        I || x({ participantId: c, service: u });
       }
     })(), () => {
-      T = !0;
+      I = !0;
     };
   }, [b, u, c, g]), {
-    isParticipantBlocked: w,
+    isParticipantBlocked: _,
     isCheckingBlockedStatus: $,
-    isLeaving: R,
-    isUpdatingBlockStatus: M,
+    isLeaving: A,
+    isUpdatingBlockStatus: N,
     handleLeaveConversation: async () => {
-      var T;
-      if (!R) {
-        o == null || o(), f && console.log(`[${g}] Leave conversation`, e.cid), y(!0);
+      var I;
+      if (!A) {
+        o == null || o(), f && console.log(`[${g}] Leave conversation`, e.cid), M(!0);
         try {
-          const E = ((T = e._client) == null ? void 0 : T.userID) ?? null;
-          await e.hide(E, !1), r && await r(e), m == null || m();
-        } catch (E) {
-          console.error(`[${g}] Failed to leave conversation`, E);
+          const T = ((I = e._client) == null ? void 0 : I.userID) ?? null;
+          await e.hide(T, !1), r && await r(e), m == null || m();
+        } catch (T) {
+          console.error(`[${g}] Failed to leave conversation`, T);
         } finally {
-          y(!1);
+          M(!1);
         }
       }
     },
     handleBlockUser: async () => {
-      var T, E, A;
-      if (!(M || !u)) {
-        l == null || l(), f && console.log(`[${g}] Block member`, (T = t == null ? void 0 : t.user) == null ? void 0 : T.id), D(!0);
+      var I, T, S;
+      if (!(N || !u)) {
+        l == null || l(), f && console.log(`[${g}] Block member`, (I = t == null ? void 0 : t.user) == null ? void 0 : I.id), L(!0);
         try {
-          await u.blockUser((E = t == null ? void 0 : t.user) == null ? void 0 : E.id), i && await i((A = t == null ? void 0 : t.user) == null ? void 0 : A.id), m == null || m();
-        } catch (O) {
-          console.error(`[${g}] Failed to block member`, O);
+          await u.blockUser((T = t == null ? void 0 : t.user) == null ? void 0 : T.id), i && await i((S = t == null ? void 0 : t.user) == null ? void 0 : S.id), m == null || m();
+        } catch (P) {
+          console.error(`[${g}] Failed to block member`, P);
         } finally {
-          D(!1);
+          L(!1);
         }
       }
     },
     handleUnblockUser: async () => {
-      var T, E, A;
-      if (!(M || !u)) {
-        l == null || l(), f && console.log(`[${g}] Unblock member`, (T = t == null ? void 0 : t.user) == null ? void 0 : T.id), D(!0);
+      var I, T, S;
+      if (!(N || !u)) {
+        l == null || l(), f && console.log(`[${g}] Unblock member`, (I = t == null ? void 0 : t.user) == null ? void 0 : I.id), L(!0);
         try {
-          await u.unBlockUser((E = t == null ? void 0 : t.user) == null ? void 0 : E.id), i && await i((A = t == null ? void 0 : t.user) == null ? void 0 : A.id), m == null || m();
-        } catch (O) {
-          console.error(`[${g}] Failed to unblock member`, O);
+          await u.unBlockUser((T = t == null ? void 0 : t.user) == null ? void 0 : T.id), i && await i((S = t == null ? void 0 : t.user) == null ? void 0 : S.id), m == null || m();
+        } catch (P) {
+          console.error(`[${g}] Failed to unblock member`, P);
         } finally {
-          D(!1);
+          L(!1);
         }
       }
     },
@@ -446,7 +446,7 @@ const ie = ({
   "button",
   {
     type: "button",
-    className: C(
+    className: y(
       "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm transition-colors focus-ring disabled:cursor-not-allowed disabled:opacity-60",
       e === "danger" ? "text-danger hover:bg-danger/50" : "text-charcoal hover:bg-sand",
       t
@@ -468,15 +468,15 @@ const ie = ({
   customChannelActions: g,
   triggerClassName: u
 }) => {
-  const [f, c] = z(!1), b = j(null), w = Sn(), p = J(() => c(!1), []), {
-    isParticipantBlocked: v,
-    isCheckingBlockedStatus: _,
-    isLeaving: R,
-    isUpdatingBlockStatus: y,
-    handleLeaveConversation: M,
-    handleBlockUser: D,
+  const [f, c] = z(!1), b = H(null), _ = Sn(), v = K(() => c(!1), []), {
+    isParticipantBlocked: p,
+    isCheckingBlockedStatus: x,
+    isLeaving: A,
+    isUpdatingBlockStatus: M,
+    handleLeaveConversation: N,
+    handleBlockUser: L,
     handleUnblockUser: $,
-    handleReportUser: L
+    handleReportUser: O
   } = js({
     channel: e,
     participant: t,
@@ -487,18 +487,18 @@ const ie = ({
     onDeleteConversationClick: l,
     onBlockParticipantClick: d,
     onReportParticipantClick: m,
-    onActionComplete: p,
+    onActionComplete: v,
     logLabel: "ChannelActionsMenu"
   });
   return X(() => {
     if (!f) return;
-    const I = (F) => {
-      b.current && !b.current.contains(F.target) && c(!1);
-    }, S = (F) => {
-      F.key === "Escape" && c(!1);
+    const k = (D) => {
+      b.current && !b.current.contains(D.target) && c(!1);
+    }, R = (D) => {
+      D.key === "Escape" && c(!1);
     };
-    return document.addEventListener("mousedown", I), document.addEventListener("keydown", S), () => {
-      document.removeEventListener("mousedown", I), document.removeEventListener("keydown", S);
+    return document.addEventListener("mousedown", k), document.addEventListener("keydown", R), () => {
+      document.removeEventListener("mousedown", k), document.removeEventListener("keydown", R);
     };
   }, [f]), !t || !(s || a || r || !!g) ? null : /* @__PURE__ */ h("div", { ref: b, className: "relative", children: [
     /* @__PURE__ */ h(
@@ -508,8 +508,8 @@ const ie = ({
         type: "button",
         "aria-haspopup": "true",
         "aria-expanded": f,
-        "aria-controls": f ? w : void 0,
-        onClick: () => c((I) => !I),
+        "aria-controls": f ? _ : void 0,
+        onClick: () => c((k) => !k),
         children: [
           /* @__PURE__ */ n(hs, { className: "size-5 text-black/90" }),
           /* @__PURE__ */ n("span", { className: "sr-only", children: "More options" })
@@ -519,9 +519,9 @@ const ie = ({
     f && /* @__PURE__ */ n(
       "div",
       {
-        id: w,
+        id: _,
         "aria-label": "Conversation options",
-        className: C(
+        className: y(
           "absolute right-0 top-full z-50 mt-2 w-56 overflow-hidden",
           "rounded-lg border border-sand bg-white p-1 shadow-max-elevation-light"
         ),
@@ -529,46 +529,46 @@ const ie = ({
           s && /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(
             ge,
             {
-              onClick: M,
-              disabled: R,
-              "aria-busy": R,
+              onClick: N,
+              disabled: A,
+              "aria-busy": A,
               children: [
-                R ? /* @__PURE__ */ n(ke, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ n(fs, { className: "h-5 w-5" }),
+                A ? /* @__PURE__ */ n(ke, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ n(fs, { className: "h-5 w-5" }),
                 /* @__PURE__ */ n("span", { children: "Delete Conversation" })
               ]
             }
           ) }),
-          a && /* @__PURE__ */ n("li", { children: _ ? (
+          a && /* @__PURE__ */ n("li", { children: x ? (
             // Block status not yet resolved — show a disabled placeholder
             // so a premature click can't act on a stale block state.
             /* @__PURE__ */ h(ge, { disabled: !0, "aria-busy": !0, children: [
               /* @__PURE__ */ n(ke, { className: "h-5 w-5 animate-spin" }),
               /* @__PURE__ */ n("span", { children: "Block" })
             ] })
-          ) : v ? /* @__PURE__ */ h(
+          ) : p ? /* @__PURE__ */ h(
             ge,
             {
               onClick: $,
-              disabled: y,
-              "aria-busy": y,
+              disabled: M,
+              "aria-busy": M,
               children: [
-                y ? /* @__PURE__ */ n(ke, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ n(Rt, { className: "h-5 w-5" }),
+                M ? /* @__PURE__ */ n(ke, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ n(Rt, { className: "h-5 w-5" }),
                 /* @__PURE__ */ n("span", { children: "Unblock" })
               ]
             }
           ) : /* @__PURE__ */ h(
             ge,
             {
-              onClick: D,
-              disabled: y,
-              "aria-busy": y,
+              onClick: L,
+              disabled: M,
+              "aria-busy": M,
               children: [
-                y ? /* @__PURE__ */ n(ke, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ n(Rt, { className: "h-5 w-5" }),
+                M ? /* @__PURE__ */ n(ke, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ n(Rt, { className: "h-5 w-5" }),
                 /* @__PURE__ */ n("span", { children: "Block" })
               ]
             }
           ) }),
-          r && /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(ge, { variant: "danger", onClick: L, children: [
+          r && /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(ge, { variant: "danger", onClick: O, children: [
             /* @__PURE__ */ n(Vt, { className: "h-5 w-5" }),
             /* @__PURE__ */ n("span", { children: "Report" })
           ] }) }),
@@ -585,7 +585,7 @@ function Hs(e) {
   const { channel: t } = de(), { client: s } = We("useMessageVote"), a = ne(
     () => Gs(e.own_reactions),
     [e.own_reactions]
-  ), r = J(async () => {
+  ), r = K(async () => {
     if (s != null && s.userID)
       try {
         a === "up" ? await t.deleteReaction(e.id, Ge) : await t.sendReaction(
@@ -595,7 +595,7 @@ function Hs(e) {
         );
       } catch {
       }
-  }, [t, s == null ? void 0 : s.userID, e.id, a]), i = J(async () => {
+  }, [t, s == null ? void 0 : s.userID, e.id, a]), i = K(async () => {
     if (s != null && s.userID)
       try {
         a === "down" ? await t.deleteReaction(e.id, He) : await t.sendReaction(
@@ -619,7 +619,7 @@ function Kt({
   const s = e == null ? void 0 : e.text, a = Ys(t);
   return a ? ((r = e == null ? void 0 : e.i18n) == null ? void 0 : r[`${a}_text`]) ?? s : s;
 }
-const qs = U.lazy(() => import("./Card-DGkh6_ti.js")), Ws = U.lazy(() => import("./Card-TNeK_nFK.js")), Xs = U.lazy(() => import("./Card-h43tRi_a.js")), Ke = () => /* @__PURE__ */ n(
+const qs = U.lazy(() => import("./Card-CBi3z_Wt.js")), Ws = U.lazy(() => import("./Card-D3-jTRWp.js")), Xs = U.lazy(() => import("./Card-Cbw4GBkm.js")), Ke = () => /* @__PURE__ */ n(
   "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)]",
@@ -682,78 +682,78 @@ const sa = (e) => {
   muted: d = !1,
   onContainerClick: m
 }) => {
-  const g = ae(t), u = j(null), f = j(null), c = j(null), b = j(r), [w, p] = z(a), [v, _] = z(0), [R, y] = z(!1), [M, D] = z(!1), [$, L] = z(!1), [N, I] = z(!1), [S, F] = z(!0), [T, E] = z(null), A = J(() => {
-    L(!1), p(!0);
-  }, []), O = J((x) => {
-    const k = f.current;
-    if (!k) return 0;
-    const P = k.getBoundingClientRect();
+  const g = ae(t), u = H(null), f = H(null), c = H(null), b = H(r), [_, v] = z(a), [p, x] = z(0), [A, M] = z(!1), [N, L] = z(!1), [$, O] = z(!1), [E, k] = z(!1), [R, D] = z(!0), [I, T] = z(null), S = K(() => {
+    O(!1), v(!0);
+  }, []), P = K((w) => {
+    const C = f.current;
+    if (!C) return 0;
+    const B = C.getBoundingClientRect();
     return Math.max(
       0,
-      Math.min(1, (sa(x) - P.left) / P.width)
+      Math.min(1, (sa(w) - B.left) / B.width)
     );
-  }, []), B = J((x) => {
-    const k = u.current;
-    k && k.duration && (k.currentTime = x * k.duration);
-  }, []), H = (x) => {
-    x.stopPropagation(), y(!0);
-    const k = O(x);
-    _(k), B(k);
+  }, []), F = K((w) => {
+    const C = u.current;
+    C && C.duration && (C.currentTime = w * C.duration);
+  }, []), Y = (w) => {
+    w.stopPropagation(), M(!0);
+    const C = P(w);
+    x(C), F(C);
   };
   X(() => {
-    r !== void 0 && r !== b.current && (b.current = r, p(r));
+    r !== void 0 && r !== b.current && (b.current = r, v(r));
   }, [r]), X(() => {
-    if (!w) {
+    if (!_) {
       c.current !== null && (cancelAnimationFrame(c.current), c.current = null);
       return;
     }
-    const x = () => {
-      const k = u.current;
-      k && k.duration && !R && _(k.currentTime / k.duration), c.current = requestAnimationFrame(x);
+    const w = () => {
+      const C = u.current;
+      C && C.duration && !A && x(C.currentTime / C.duration), c.current = requestAnimationFrame(w);
     };
-    return c.current = requestAnimationFrame(x), () => {
+    return c.current = requestAnimationFrame(w), () => {
       c.current !== null && cancelAnimationFrame(c.current);
     };
-  }, [w, R]), X(() => {
-    const x = u.current;
-    x && (w ? x.play().catch((k) => {
-      p(!1), L(!0);
-    }) : x.pause());
-  }, [w]), X(() => {
-    if (!R) return;
-    const x = (P) => _(O(P)), k = (P) => {
-      y(!1), B(O(P));
+  }, [_, A]), X(() => {
+    const w = u.current;
+    w && (_ ? w.play().catch((C) => {
+      v(!1), O(!0);
+    }) : w.pause());
+  }, [_]), X(() => {
+    if (!A) return;
+    const w = (B) => x(P(B)), C = (B) => {
+      M(!1), F(P(B));
     };
-    return window.addEventListener("mousemove", x), window.addEventListener("mouseup", k), window.addEventListener("touchmove", x, { passive: !0 }), window.addEventListener("touchend", k), () => {
-      window.removeEventListener("mousemove", x), window.removeEventListener("mouseup", k), window.removeEventListener("touchmove", x), window.removeEventListener("touchend", k);
+    return window.addEventListener("mousemove", w), window.addEventListener("mouseup", C), window.addEventListener("touchmove", w, { passive: !0 }), window.addEventListener("touchend", C), () => {
+      window.removeEventListener("mousemove", w), window.removeEventListener("mouseup", C), window.removeEventListener("touchmove", w), window.removeEventListener("touchend", C);
     };
-  }, [R, O, B]);
-  const V = T ? { aspectRatio: String(T) } : void 0, Y = T ? "" : " aspect-video", q = Math.round(v * 100);
+  }, [A, P, F]);
+  const Z = I ? { aspectRatio: String(I) } : void 0, q = I ? "" : " aspect-video", G = Math.round(p * 100);
   return /* @__PURE__ */ h(
     "div",
     {
       role: "button",
       tabIndex: 0,
-      className: `relative cursor-pointer overflow-hidden bg-black ${Y}`,
-      style: V,
-      onClick: (x) => {
+      className: `relative cursor-pointer overflow-hidden bg-black ${q}`,
+      style: Z,
+      onClick: (w) => {
         if (m) {
-          m(x);
+          m(w);
           return;
         }
-        $ || o && p((k) => !k);
+        $ || o && v((C) => !C);
       },
-      onKeyDown: (x) => {
-        if (!(x.key !== "Enter" && x.key !== " ")) {
-          if (x.preventDefault(), m) {
-            m(x);
+      onKeyDown: (w) => {
+        if (!(w.key !== "Enter" && w.key !== " ")) {
+          if (w.preventDefault(), m) {
+            m(w);
             return;
           }
-          $ || o && p((k) => !k);
+          $ || o && v((C) => !C);
         }
       },
       children: [
-        s && (g === "audio" || S) && /* @__PURE__ */ n(
+        s && (g === "audio" || R) && /* @__PURE__ */ n(
           "img",
           {
             src: s,
@@ -761,7 +761,7 @@ const sa = (e) => {
             className: "absolute inset-0 h-full w-full object-cover"
           }
         ),
-        !s && (g === "audio" || S) && /* @__PURE__ */ n("div", { className: "absolute inset-0 flex items-center justify-center", children: ce(t, {
+        !s && (g === "audio" || R) && /* @__PURE__ */ n("div", { className: "absolute inset-0 flex items-center justify-center", children: ce(t, {
           className: "size-12 text-black/20",
           weight: "regular"
         }) }),
@@ -773,14 +773,14 @@ const sa = (e) => {
             loop: i,
             muted: d,
             style: { width: "100%", height: "100%" },
-            onLoadStart: () => I(!0),
+            onLoadStart: () => k(!0),
             onCanPlay: () => {
-              I(!1), F(!1);
+              k(!1), D(!1);
             },
-            onWaiting: () => I(!0),
-            onPlay: () => L(!1),
+            onWaiting: () => k(!0),
+            onPlay: () => O(!1),
             onEnded: () => {
-              i || (p(!1), _(0));
+              i || (v(!1), x(0));
             },
             children: /* @__PURE__ */ n("track", { kind: "captions" })
           }
@@ -793,23 +793,23 @@ const sa = (e) => {
             muted: d,
             playsInline: !0,
             style: { width: "100%", height: "100%" },
-            onLoadStart: () => I(!0),
+            onLoadStart: () => k(!0),
             onCanPlay: () => {
-              I(!1), F(!1);
+              k(!1), D(!1);
             },
-            onWaiting: () => I(!0),
-            onPlay: () => L(!1),
+            onWaiting: () => k(!0),
+            onPlay: () => O(!1),
             onLoadedMetadata: () => {
-              const x = u.current;
-              x instanceof HTMLVideoElement && x.videoWidth && x.videoHeight && E(x.videoWidth / x.videoHeight);
+              const w = u.current;
+              w instanceof HTMLVideoElement && w.videoWidth && w.videoHeight && T(w.videoWidth / w.videoHeight);
             },
             onEnded: () => {
-              i || (p(!1), _(0));
+              i || (v(!1), x(0));
             },
             children: /* @__PURE__ */ n("track", { kind: "captions" })
           }
         ) }),
-        N && !$ && /* @__PURE__ */ n("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ n(
+        E && !$ && /* @__PURE__ */ n("div", { className: "absolute inset-0 z-10 flex items-center justify-center", children: /* @__PURE__ */ n(
           pe,
           {
             className: "size-8 animate-spin text-white/80",
@@ -823,11 +823,11 @@ const sa = (e) => {
             role: "button",
             tabIndex: 0,
             "aria-label": "Play preview",
-            onClick: (x) => {
-              x.stopPropagation(), A();
+            onClick: (w) => {
+              w.stopPropagation(), S();
             },
-            onKeyDown: (x) => {
-              x.key !== "Enter" && x.key !== " " || (x.preventDefault(), x.stopPropagation(), A());
+            onKeyDown: (w) => {
+              w.key !== "Enter" && w.key !== " " || (w.preventDefault(), w.stopPropagation(), S());
             },
             children: /* @__PURE__ */ n("span", { className: "flex size-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm", children: /* @__PURE__ */ n(Ue, { className: "size-9 translate-x-0.5", weight: "fill" }) })
           }
@@ -837,23 +837,23 @@ const sa = (e) => {
           {
             role: "slider",
             "aria-label": "Playback position",
-            "aria-valuenow": q,
+            "aria-valuenow": G,
             "aria-valuemin": 0,
             "aria-valuemax": 100,
             tabIndex: 0,
             ref: f,
             className: "relative flex h-4 w-full cursor-pointer items-center",
-            onMouseDown: H,
-            onTouchStart: H,
-            onClick: (x) => x.stopPropagation(),
-            onKeyDown: (x) => {
-              x.key === "ArrowRight" && B(Math.min(1, v + 0.05)), x.key === "ArrowLeft" && B(Math.max(0, v - 0.05));
+            onMouseDown: Y,
+            onTouchStart: Y,
+            onClick: (w) => w.stopPropagation(),
+            onKeyDown: (w) => {
+              w.key === "ArrowRight" && F(Math.min(1, p + 0.05)), w.key === "ArrowLeft" && F(Math.max(0, p - 0.05));
             },
             children: /* @__PURE__ */ n("div", { className: "w-full overflow-hidden rounded-full bg-white/30 h-1", children: /* @__PURE__ */ n(
               "div",
               {
                 className: "h-full rounded-full bg-white",
-                style: { width: `${q}%` }
+                style: { width: `${G}%` }
               }
             ) })
           }
@@ -863,12 +863,12 @@ const sa = (e) => {
             "button",
             {
               type: "button",
-              onClick: (x) => {
-                x.stopPropagation(), p((k) => !k);
+              onClick: (w) => {
+                w.stopPropagation(), v((C) => !C);
               },
               className: "shrink-0 text-white",
-              "aria-label": w ? "Pause" : "Play",
-              children: w ? /* @__PURE__ */ n(ks, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ n(Ue, { className: "size-5 translate-x-px", weight: "fill" })
+              "aria-label": _ ? "Pause" : "Play",
+              children: _ ? /* @__PURE__ */ n(ks, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ n(Ue, { className: "size-5 translate-x-px", weight: "fill" })
             }
           ),
           /* @__PURE__ */ h(
@@ -876,30 +876,30 @@ const sa = (e) => {
             {
               role: "slider",
               "aria-label": "Playback position",
-              "aria-valuenow": q,
+              "aria-valuenow": G,
               "aria-valuemin": 0,
               "aria-valuemax": 100,
               tabIndex: 0,
               ref: f,
               className: "relative flex h-4 w-full cursor-pointer items-center",
-              onMouseDown: H,
-              onTouchStart: H,
-              onClick: (x) => x.stopPropagation(),
-              onMouseEnter: () => D(!0),
-              onMouseLeave: () => D(!1),
-              onKeyDown: (x) => {
-                x.key === "ArrowRight" && B(Math.min(1, v + 0.05)), x.key === "ArrowLeft" && B(Math.max(0, v - 0.05));
+              onMouseDown: Y,
+              onTouchStart: Y,
+              onClick: (w) => w.stopPropagation(),
+              onMouseEnter: () => L(!0),
+              onMouseLeave: () => L(!1),
+              onKeyDown: (w) => {
+                w.key === "ArrowRight" && F(Math.min(1, p + 0.05)), w.key === "ArrowLeft" && F(Math.max(0, p - 0.05));
               },
               children: [
                 /* @__PURE__ */ n(
                   "div",
                   {
-                    className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${M || R ? "h-1.5" : "h-1"}`,
+                    className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${N || A ? "h-1.5" : "h-1"}`,
                     children: /* @__PURE__ */ n(
                       "div",
                       {
                         className: "h-full rounded-full bg-white",
-                        style: { width: `${q}%` }
+                        style: { width: `${G}%` }
                       }
                     )
                   }
@@ -907,8 +907,8 @@ const sa = (e) => {
                 /* @__PURE__ */ n(
                   "div",
                   {
-                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${M || R ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
-                    style: { left: `${q}%` }
+                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${N || A ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
+                    style: { left: `${G}%` }
                   }
                 )
               ]
@@ -1018,7 +1018,7 @@ const sa = (e) => {
     {
       ref: g,
       "data-testid": u,
-      className: C(
+      className: y(
         "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-[#121110]" : "bg-white"
       ),
@@ -1030,7 +1030,7 @@ const sa = (e) => {
           c.trim() !== "" && /* @__PURE__ */ n(
             "p",
             {
-              className: C("mb-0.5 truncate text-base font-medium", {
+              className: y("mb-0.5 truncate text-base font-medium", {
                 "text-black": !f,
                 "text-white/30": f && b,
                 "text-white": f && !b
@@ -1040,7 +1040,7 @@ const sa = (e) => {
           ),
           /* @__PURE__ */ h("div", { className: "flex flex-wrap items-center gap-1", children: [
             ce(r, {
-              className: C(
+              className: y(
                 "size-5 shrink-0",
                 f ? "text-white/55" : "text-black/55"
               ),
@@ -1049,7 +1049,7 @@ const sa = (e) => {
             i != null && i !== "" && /* @__PURE__ */ n(
               "span",
               {
-                className: C(
+                className: y(
                   "text-xs font-medium",
                   f ? "text-white/55" : "text-black/55"
                 ),
@@ -1158,13 +1158,13 @@ const ma = ({
 function et(e) {
   var u, f, c, b;
   const t = (u = e.attachments) == null ? void 0 : u.find(
-    (w) => w.type === "video" && w.asset_url
+    (_) => _.type === "video" && _.asset_url
   ), s = (f = e.attachments) == null ? void 0 : f.find(
-    (w) => w.type === "image" && w.image_url
+    (_) => _.type === "image" && _.image_url
   ), a = (c = e.attachments) == null ? void 0 : c.find(
-    (w) => w.type === "audio" && w.asset_url
+    (_) => _.type === "audio" && _.asset_url
   ), r = (b = e.attachments) == null ? void 0 : b.find(
-    (w) => w.type === "file" && w.asset_url
+    (_) => _.type === "file" && _.asset_url
   ), i = t ?? s ?? a ?? r, o = (t == null ? void 0 : t.asset_url) ?? (s == null ? void 0 : s.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, g = t == null ? void 0 : t.thumb_url;
@@ -1240,7 +1240,7 @@ const an = ({
   const s = Qe(e), a = et(e);
   return !s && !a ? null : /* @__PURE__ */ h("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", children: [
     !t && e.user && /* @__PURE__ */ n(
-      ie,
+      oe,
       {
         className: "str-chat__avatar str-chat__message-sender-avatar",
         id: e.user.id,
@@ -1363,7 +1363,7 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      className: C("message-vote-button focus-ring", {
+      className: y("message-vote-button focus-ring", {
         "message-vote-button--selected": e === "up"
       }),
       onClick: t,
@@ -1377,7 +1377,7 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
     "button",
     {
       type: "button",
-      className: C("message-vote-button focus-ring", {
+      className: y("message-vote-button focus-ring", {
         "message-vote-button--selected": e === "down"
       }),
       onClick: s,
@@ -1404,62 +1404,62 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
     isMyMessage: f,
     message: c,
     renderText: b,
-    threadList: w,
-    viewerLanguage: p
-  } = e, { client: v } = We("CustomMessage"), { channel: _ } = de("CustomMessage"), { isUnlocking: R, onUnlockClick: y, onFetchSource: M, onDownloadClick: D } = va("LockedAttachment"), [$, L] = z(!1), N = Ln(c.id), { selected: I, voteUp: S, voteDown: F } = Hs(c), {
-    Attachment: T = Dn,
-    EditMessageModal: E = On,
-    MessageActions: A,
-    MessageBlocked: O = Pn,
-    MessageBouncePrompt: B = zn,
-    MessageDeleted: H = $n,
-    MessageIsThreadReplyInChannelButtonIndicator: V = Fn,
-    MessageRepliesCountButton: Y = Bn,
-    ReminderNotification: q = Un,
-    StreamedMessageText: x = jn,
-    PinIndicator: k
-  } = jt("CustomMessage"), P = Vn(c), W = Gn(c), K = ne(
+    threadList: _,
+    viewerLanguage: v
+  } = e, { client: p } = We("CustomMessage"), { channel: x } = de("CustomMessage"), { isUnlocking: A, onUnlockClick: M, onFetchSource: N, onDownloadClick: L } = va("LockedAttachment"), [$, O] = z(!1), E = Ln(c.id), { selected: k, voteUp: R, voteDown: D } = Hs(c), {
+    Attachment: I = Dn,
+    EditMessageModal: T = On,
+    MessageActions: S,
+    MessageBlocked: P = Pn,
+    MessageBouncePrompt: F = zn,
+    MessageDeleted: Y = $n,
+    MessageIsThreadReplyInChannelButtonIndicator: Z = Fn,
+    MessageRepliesCountButton: q = Bn,
+    ReminderNotification: G = Un,
+    StreamedMessageText: w = jn,
+    PinIndicator: C
+  } = jt("CustomMessage"), B = Vn(c), j = Gn(c), W = ne(
     () => u == null ? void 0 : u(c),
     [u, c]
-  ), G = ne(() => {
+  ), V = ne(() => {
     const fe = c.attachments ?? [], Ce = c.shared_location ? [c.shared_location, ...fe] : fe;
     if (!Ee(c)) return Ce;
     const It = Ce.filter((Tt) => !("type" in Tt) || !sn(Tt));
     return It.length === Ce.length ? Ce : It;
-  }, [c]), ee = ne(() => {
-    const fe = Kt({ message: c, viewerLanguage: p });
+  }, [c]), J = ne(() => {
+    const fe = Kt({ message: c, viewerLanguage: v });
     return fe === c.text ? c : { ...c, text: fe };
-  }, [c, p]);
+  }, [c, v]);
   if (Hn(c))
     return null;
   if (c.deleted_at || c.type === "deleted")
-    return /* @__PURE__ */ n(H, { message: c });
+    return /* @__PURE__ */ n(Y, { message: c });
   if (Yn(c))
-    return /* @__PURE__ */ n(O, {});
-  const ue = !w && !!c.reply_count, Z = !w && c.show_in_channel && c.parent_id, re = c.status === "failed" && ((ft = c.error) == null ? void 0 : ft.status) !== 403, te = qn(c);
-  let oe;
-  re ? oe = () => m(c) : te && (oe = () => L(!0));
-  const me = f(), En = C(
+    return /* @__PURE__ */ n(P, {});
+  const re = !_ && !!c.reply_count, ue = !_ && c.show_in_channel && c.parent_id, ee = c.status === "failed" && ((ft = c.error) == null ? void 0 : ft.status) !== 403, ie = qn(c);
+  let Q;
+  ee ? Q = () => m(c) : ie && (Q = () => O(!0));
+  const me = f(), En = y(
     "str-chat__message str-chat__message-simple",
     `str-chat__message--${c.type}`,
     `str-chat__message--${c.status}`,
     me ? "str-chat__message--me str-chat__message-simple--me" : "str-chat__message--other",
     c.text ? "str-chat__message--has-text" : "has-no-text",
     {
-      "str-chat__message--has-attachment": P,
+      "str-chat__message--has-attachment": B,
       "str-chat__message--highlighted": g,
       "str-chat__message--pinned pinned-message": c.pinned,
-      "str-chat__message--with-reactions": W,
+      "str-chat__message--with-reactions": j,
       "str-chat__message-send-can-be-retried": (c == null ? void 0 : c.status) === "failed" && ((gt = c == null ? void 0 : c.error) == null ? void 0 : gt.status) !== 403,
-      "str-chat__message-with-thread-link": ue || Z,
+      "str-chat__message-with-thread-link": re || ue,
       "str-chat__virtual-message__wrapper--end": r,
       "str-chat__virtual-message__wrapper--first": i,
       "str-chat__virtual-message__wrapper--group": o
     }
-  ), dt = c.poll_id && v.polls.fromState(c.poll_id), ut = ya(c), he = Ee(c), mt = Na(c), Le = !!(G != null && G.length && !c.quoted_message), ht = he && me && Le;
+  ), dt = c.poll_id && p.polls.fromState(c.poll_id), ut = ya(c), he = Ee(c), mt = Na(c), Le = !!(V != null && V.length && !c.quoted_message), ht = he && me && Le;
   return /* @__PURE__ */ h(se, { children: [
     a && /* @__PURE__ */ n(
-      E,
+      T,
       {
         additionalMessageInputProps: t
       }
@@ -1467,8 +1467,8 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
     $ && /* @__PURE__ */ n(
       Wn,
       {
-        MessageBouncePrompt: B,
-        onClose: () => L(!1),
+        MessageBouncePrompt: F,
+        onClose: () => O(!1),
         open: $
       }
     ),
@@ -1478,10 +1478,10 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
         className: En,
         "data-message-id": c.id,
         children: [
-          k && /* @__PURE__ */ n(k, {}),
-          !!N && /* @__PURE__ */ n(q, { reminder: N }),
+          C && /* @__PURE__ */ n(C, {}),
+          !!E && /* @__PURE__ */ n(G, { reminder: E }),
           c.user && /* @__PURE__ */ n(
-            ie,
+            oe,
             {
               className: "str-chat__avatar str-chat__message-sender-avatar",
               id: c.user.id,
@@ -1495,14 +1495,14 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
           /* @__PURE__ */ n(
             "div",
             {
-              className: C("str-chat__message-inner", {
-                "str-chat__simple-message--error-failed": re || te
+              className: y("str-chat__message-inner", {
+                "str-chat__simple-message--error-failed": ee || ie
               }),
               "data-testid": "message-inner",
-              onClick: oe,
-              onKeyDown: oe,
-              role: oe ? "button" : void 0,
-              tabIndex: oe ? 0 : void 0,
+              onClick: Q,
+              onKeyDown: Q,
+              role: Q ? "button" : void 0,
+              tabIndex: Q ? 0 : void 0,
               style: {
                 // Force margins to 0 to prevent hover layout shift
                 // Stream Chat CSS sets margin-inline-end/start to 78px, then 0 on hover
@@ -1511,7 +1511,7 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
               },
               children: mt ? /* @__PURE__ */ h("div", { className: "str-chat__message-bubble-wrapper", children: [
                 me ? /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
-                  A && /* @__PURE__ */ n(A, {}),
+                  S && /* @__PURE__ */ n(S, {}),
                   /* @__PURE__ */ n(
                     zt.Sent,
                     {
@@ -1521,8 +1521,8 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
                       amountText: (xt = c.metadata) == null ? void 0 : xt.amount_text,
                       detail: (wt = c.metadata) == null ? void 0 : wt.attachment_detail,
                       paymentStatus: (_t = c.metadata) == null ? void 0 : _t.payment_status,
-                      onPreviewClick: () => y == null ? void 0 : y(c, _),
-                      onFetchSource: async () => await (M == null ? void 0 : M(c, _))
+                      onPreviewClick: () => M == null ? void 0 : M(c, x),
+                      onFetchSource: async () => await (N == null ? void 0 : N(c, x))
                     }
                   )
                 ] }) : /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
@@ -1535,18 +1535,18 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
                       amountText: (kt = c.metadata) == null ? void 0 : kt.amount_text,
                       detail: (Et = c.metadata) == null ? void 0 : Et.attachment_detail,
                       paymentStatus: (St = c.metadata) == null ? void 0 : St.payment_status,
-                      isUnlocking: R(c.id),
-                      onUnlockClick: () => y == null ? void 0 : y(c, _),
-                      onFetchSource: async () => await (M == null ? void 0 : M(c, _)),
-                      onDownloadClick: () => D == null ? void 0 : D(c, _)
+                      isUnlocking: A(c.id),
+                      onUnlockClick: () => M == null ? void 0 : M(c, x),
+                      onFetchSource: async () => await (N == null ? void 0 : N(c, x)),
+                      onDownloadClick: () => L == null ? void 0 : L(c, x)
                     }
                   ),
-                  A && /* @__PURE__ */ n(A, {})
+                  S && /* @__PURE__ */ n(S, {})
                 ] }),
                 c.text && /* @__PURE__ */ n("div", { className: "str-chat__message-bubble", children: /* @__PURE__ */ n(
                   Mt,
                   {
-                    message: ee,
+                    message: J,
                     renderText: b
                   }
                 ) })
@@ -1563,23 +1563,23 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
                   }
                 ),
                 dt && /* @__PURE__ */ n(Xn, { poll: dt }),
-                G != null && G.length && !c.quoted_message ? /* @__PURE__ */ n(
-                  T,
+                V != null && V.length && !c.quoted_message ? /* @__PURE__ */ n(
+                  I,
                   {
                     actionHandler: l,
-                    attachments: G
+                    attachments: V
                   }
                 ) : null,
-                K ? /* @__PURE__ */ n(
-                  x,
+                W ? /* @__PURE__ */ n(
+                  w,
                   {
-                    message: ee,
+                    message: J,
                     renderText: b
                   }
                 ) : /* @__PURE__ */ n(
                   Mt,
                   {
-                    message: ee,
+                    message: J,
                     renderText: b
                   }
                 ),
@@ -1599,20 +1599,20 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
             s && he && /* @__PURE__ */ n(
               Ca,
               {
-                selected: I,
-                onVoteUp: S,
-                onVoteDown: F
+                selected: k,
+                onVoteUp: R,
+                onVoteDown: D
               }
             )
           ] }),
-          ue && /* @__PURE__ */ n(
-            Y,
+          re && /* @__PURE__ */ n(
+            q,
             {
               onClick: d,
               reply_count: c.reply_count
             }
           ),
-          Z && /* @__PURE__ */ n(V, {})
+          ue && /* @__PURE__ */ n(Z, {})
         ]
       },
       c.id
@@ -1919,16 +1919,16 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
   Oe.Generating,
   Oe.ExternalSources
 ]), qa = ({ threadList: e }) => {
-  var b, w;
+  var b, _;
   const { channel: t, channelConfig: s, thread: a } = de(), { client: r } = We(), { typing: i = {} } = rs(), { aiState: o } = is(t), l = Ae(dn);
   if (!e && l && Ya.has(o)) {
-    const p = Wa(t, (b = r.user) == null ? void 0 : b.id);
+    const v = Wa(t, (b = r.user) == null ? void 0 : b.id);
     return /* @__PURE__ */ n(
       Bt,
       {
-        avatarId: (p == null ? void 0 : p.id) ?? "ai-agent",
-        avatarName: (p == null ? void 0 : p.name) ?? (p == null ? void 0 : p.id) ?? "Agent",
-        avatarImage: p == null ? void 0 : p.image,
+        avatarId: (v == null ? void 0 : v.id) ?? "ai-agent",
+        avatarName: (v == null ? void 0 : v.name) ?? (v == null ? void 0 : v.id) ?? "Agent",
+        avatarImage: v == null ? void 0 : v.image,
         testId: "typing-indicator-ai"
       }
     );
@@ -1936,19 +1936,19 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
   if ((s == null ? void 0 : s.typing_events) === !1)
     return null;
   const m = e ? [] : Object.values(i).filter(
-    ({ parent_id: p, user: v }) => {
-      var _;
-      return (v == null ? void 0 : v.id) !== ((_ = r.user) == null ? void 0 : _.id) && !p;
+    ({ parent_id: v, user: p }) => {
+      var x;
+      return (p == null ? void 0 : p.id) !== ((x = r.user) == null ? void 0 : x.id) && !v;
     }
   ), g = e ? Object.values(i).filter(
-    ({ parent_id: p, user: v }) => {
-      var _;
-      return (v == null ? void 0 : v.id) !== ((_ = r.user) == null ? void 0 : _.id) && p === (a == null ? void 0 : a.id);
+    ({ parent_id: v, user: p }) => {
+      var x;
+      return (p == null ? void 0 : p.id) !== ((x = r.user) == null ? void 0 : x.id) && v === (a == null ? void 0 : a.id);
     }
   ) : [], u = e ? g : m;
   if (!u.length)
     return null;
-  const f = (w = u[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 = (_ = u[0]) == null ? void 0 : _.user, c = f != null && f.id && t.state.members[f.id] ? t.state.members[f.id].user : void 0;
   return /* @__PURE__ */ n(
     Bt,
     {
@@ -1973,7 +1973,7 @@ const xa = ({ size: e = 15 }) => /* @__PURE__ */ n(
     },
     children: /* @__PURE__ */ h("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__ */ n(
-        ie,
+        oe,
         {
           className: "str-chat__avatar str-chat__message-sender-avatar",
           id: e,
@@ -2014,7 +2014,7 @@ function Wa(e, t) {
 const Xa = () => null, Ka = ({ className: e, message: t }) => /* @__PURE__ */ h(
   "div",
   {
-    className: C("flex items-center justify-center h-full", e),
+    className: y("flex items-center justify-center h-full", e),
     children: [
       /* @__PURE__ */ h("svg", { viewBox: "0 0 100 100", className: "size-8 fill-pebble", stroke: "none", children: [
         /* @__PURE__ */ n("circle", { cx: "6", cy: "50", r: "6", children: /* @__PURE__ */ n(
@@ -2075,25 +2075,29 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
   customChannelActions: f,
   renderChannelActions: c,
   showChannelInfo: b = !0,
-  onParticipantNameClick: w
+  onParticipantNameClick: _,
+  renderHeaderTitleBadges: v
 }) => {
-  var D, $, L, N, I;
-  const { channel: p } = de(), v = U.useMemo(() => {
-    var T, E;
-    const S = (T = p._client) == null ? void 0 : T.userID;
-    return S ? Object.values(((E = p.state) == null ? void 0 : E.members) || {}).find(
-      (A) => {
-        var O;
-        return ((O = A.user) == null ? void 0 : O.id) && A.user.id !== S;
+  var O, E, k, R, D;
+  const { channel: p } = de(), x = U.useMemo(() => {
+    var S, P;
+    const I = (S = p._client) == null ? void 0 : S.userID;
+    return I ? Object.values(((P = p.state) == null ? void 0 : P.members) || {}).find(
+      (F) => {
+        var Y;
+        return ((Y = F.user) == null ? void 0 : Y.id) && F.user.id !== I;
       }
     ) : void 0;
-  }, [(D = p._client) == null ? void 0 : D.userID, ($ = p.state) == null ? void 0 : $.members]), _ = Xt(v == null ? void 0 : v.user), R = (L = v == null ? void 0 : v.user) == null ? void 0 : L.image, y = Wt(p), M = async () => {
+  }, [(O = p._client) == null ? void 0 : O.userID, (E = p.state) == null ? void 0 : E.members]), A = Xt(x == null ? void 0 : x.user), M = (k = x == null ? void 0 : x.user) == null ? void 0 : k.image, N = Wt(p), L = v == null ? void 0 : v({
+    channel: p,
+    participant: x
+  }), $ = async () => {
     try {
-      y ? await p.unpin() : await p.pin();
-    } catch (S) {
+      N ? await p.unpin() : await p.pin();
+    } catch (I) {
       console.error(
         "[CustomChannelHeader] Failed to update pinned status:",
-        S
+        I
       );
     }
   };
@@ -2102,7 +2106,7 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
       /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: t && /* @__PURE__ */ n(
         "button",
         {
-          className: C(
+          className: y(
             le,
             "messaging-channel-view-back-button-mobile bg-[#F1F0EE]"
           ),
@@ -2115,29 +2119,33 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
       ) }),
       /* @__PURE__ */ h("div", { className: "flex flex-col gap-1 items-center", children: [
         /* @__PURE__ */ n(
-          ie,
+          oe,
           {
-            id: ((N = v == null ? void 0 : v.user) == null ? void 0 : N.id) || p.id || "unknown",
-            name: _,
-            image: R,
-            starred: s && y,
+            id: ((R = x == null ? void 0 : x.user) == null ? void 0 : R.id) || p.id || "unknown",
+            name: A,
+            image: M,
+            starred: s && N,
             dmAgentEnabled: a,
             size: 48
           }
         ),
-        w ? /* @__PURE__ */ h(
+        _ ? /* @__PURE__ */ h(
           "button",
           {
             type: "button",
-            onClick: w,
-            "aria-label": `View details for ${_}`,
+            onClick: _,
+            "aria-label": `View details for ${A}`,
             className: "flex max-w-full items-center gap-0.5 rounded text-center text-xs font-medium text-black/90 transition-opacity hover:opacity-70",
             children: [
-              /* @__PURE__ */ n("span", { className: "truncate", children: _ }),
+              /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: A }),
+              L && /* @__PURE__ */ n("span", { className: "shrink-0", children: L }),
               /* @__PURE__ */ n(Ve, { className: "size-3 shrink-0", weight: "bold" })
             ]
           }
-        ) : /* @__PURE__ */ n("p", { className: "text-center text-xs font-medium text-black/90", children: _ }),
+        ) : /* @__PURE__ */ h("p", { className: "flex max-w-full items-center justify-center gap-1 text-center text-xs font-medium text-black/90", children: [
+          /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: A }),
+          L && /* @__PURE__ */ n("span", { className: "shrink-0", children: L })
+        ] }),
         a && /* @__PURE__ */ h("div", { className: "flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
           /* @__PURE__ */ n(je, { className: "size-3 shrink-0 text-black/55" }),
           /* @__PURE__ */ n("span", { children: Ut })
@@ -2148,17 +2156,17 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
           "button",
           {
             className: le,
-            onClick: M,
+            onClick: $,
             type: "button",
-            "aria-label": y ? "Unstar conversation" : "Star conversation",
+            "aria-label": N ? "Unstar conversation" : "Star conversation",
             children: /* @__PURE__ */ n(
               Be,
               {
-                className: C("size-5", {
-                  "text-yellow-600": y,
-                  "text-black/90": !y
+                className: y("size-5", {
+                  "text-yellow-600": N,
+                  "text-black/90": !N
                 }),
-                weight: y ? "duotone" : "regular"
+                weight: N ? "duotone" : "regular"
               }
             )
           }
@@ -2167,7 +2175,7 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
           Pt,
           {
             channel: p,
-            participant: v,
+            participant: x,
             showDeleteConversation: o,
             showBlockParticipant: l,
             showReportParticipant: d,
@@ -2177,7 +2185,7 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
             onBlockParticipantClick: g,
             onReportParticipantClick: u,
             customChannelActions: f,
-            triggerClassName: C(le, "bg-[#F1F0EE]")
+            triggerClassName: y(le, "bg-[#F1F0EE]")
           }
         ))
       ] })
@@ -2187,7 +2195,7 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
         t && e && /* @__PURE__ */ n(
           "button",
           {
-            className: C(
+            className: y(
               le,
               "messaging-channel-view-back-button-desktop"
             ),
@@ -2198,30 +2206,34 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
           }
         ),
         /* @__PURE__ */ n(
-          ie,
+          oe,
           {
-            id: ((I = v == null ? void 0 : v.user) == null ? void 0 : I.id) || p.id || "unknown",
-            name: _,
-            image: R,
-            starred: s && y,
+            id: ((D = x == null ? void 0 : x.user) == null ? void 0 : D.id) || p.id || "unknown",
+            name: A,
+            image: M,
+            starred: s && N,
             dmAgentEnabled: a,
             size: 48
           }
         ),
         /* @__PURE__ */ h("div", { className: "min-w-0", children: [
-          w ? /* @__PURE__ */ h(
+          _ ? /* @__PURE__ */ h(
             "button",
             {
               type: "button",
-              onClick: w,
-              "aria-label": `View details for ${_}`,
+              onClick: _,
+              "aria-label": `View details for ${A}`,
               className: "flex min-w-0 max-w-full items-center gap-1 rounded font-medium text-black/90 transition-opacity hover:opacity-70",
               children: [
-                /* @__PURE__ */ n("span", { className: "truncate", children: _ }),
+                /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: A }),
+                L && /* @__PURE__ */ n("span", { className: "shrink-0", children: L }),
                 /* @__PURE__ */ n(Ve, { className: "size-4 shrink-0", weight: "bold" })
               ]
             }
-          ) : /* @__PURE__ */ n("h1", { className: "font-medium text-black/90 truncate", children: _ }),
+          ) : /* @__PURE__ */ h("h1", { className: "flex min-w-0 items-center gap-1 font-medium text-black/90", children: [
+            /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: A }),
+            L && /* @__PURE__ */ n("span", { className: "shrink-0", children: L })
+          ] }),
           a && /* @__PURE__ */ h("div", { className: "mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
             /* @__PURE__ */ n(je, { className: "size-3 shrink-0 text-black/55" }),
             /* @__PURE__ */ n("span", { className: "truncate", children: Ut })
@@ -2233,17 +2245,17 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
           "button",
           {
             className: le,
-            onClick: M,
+            onClick: $,
             type: "button",
-            "aria-label": y ? "Unstar conversation" : "Star conversation",
+            "aria-label": N ? "Unstar conversation" : "Star conversation",
             children: /* @__PURE__ */ n(
               Be,
               {
-                className: C("size-6", {
-                  "text-yellow-600": y,
-                  "text-black/90": !y
+                className: y("size-6", {
+                  "text-yellow-600": N,
+                  "text-black/90": !N
                 }),
-                weight: y ? "duotone" : "regular"
+                weight: N ? "duotone" : "regular"
               }
             )
           }
@@ -2252,7 +2264,7 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
           Pt,
           {
             channel: p,
-            participant: v,
+            participant: x,
             showDeleteConversation: o,
             showBlockParticipant: l,
             showReportParticipant: d,
@@ -2284,53 +2296,54 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
   showReportParticipant: f = !0,
   composerDisabled: c = !1,
   composerDisabledReason: b,
-  showStarButton: w = !1,
-  chatbotVotingEnabled: p = !1,
-  renderChannelBanner: v,
-  customChannelActions: _,
-  renderChannelActions: R,
-  renderMessage: y,
-  dmAgentEnabled: M = !1,
-  viewerLanguage: D,
-  showChannelInfo: $ = !0,
-  onParticipantNameClick: L
+  showStarButton: _ = !1,
+  chatbotVotingEnabled: v = !1,
+  renderChannelBanner: p,
+  renderHeaderTitleBadges: x,
+  customChannelActions: A,
+  renderChannelActions: M,
+  renderMessage: N,
+  dmAgentEnabled: L = !1,
+  viewerLanguage: $,
+  showChannelInfo: O = !0,
+  onParticipantNameClick: E
 }) => {
-  var O, B, H, V, Y, q;
-  const { channel: N } = de(), I = U.useMemo(() => {
-    var P, W;
-    const x = (P = N._client) == null ? void 0 : P.userID;
-    return x ? Object.values(((W = N.state) == null ? void 0 : W.members) || {}).find(
-      (K) => {
-        var G;
-        return ((G = K.user) == null ? void 0 : G.id) && K.user.id !== x;
+  var F, Y, Z, q, G, w;
+  const { channel: k } = de(), R = U.useMemo(() => {
+    var j, W;
+    const C = (j = k._client) == null ? void 0 : j.userID;
+    return C ? Object.values(((W = k.state) == null ? void 0 : W.members) || {}).find(
+      (V) => {
+        var J;
+        return ((J = V.user) == null ? void 0 : J.id) && V.user.id !== C;
       }
     ) : void 0;
-  }, [(O = N._client) == null ? void 0 : O.userID, (B = N.state) == null ? void 0 : B.members]), S = U.useMemo(() => {
-    var P, W;
-    const x = (P = N._client) == null ? void 0 : P.userID;
-    return x ? Object.values(((W = N.state) == null ? void 0 : W.members) || {}).find((K) => {
-      var G;
-      return ((G = K.user) == null ? void 0 : G.id) === x;
+  }, [(F = k._client) == null ? void 0 : F.userID, (Y = k.state) == null ? void 0 : Y.members]), D = U.useMemo(() => {
+    var j, W;
+    const C = (j = k._client) == null ? void 0 : j.userID;
+    return C ? Object.values(((W = k.state) == null ? void 0 : W.members) || {}).find((V) => {
+      var J;
+      return ((J = V.user) == null ? void 0 : J.id) === C;
     }) : void 0;
-  }, [(H = N._client) == null ? void 0 : H.userID, (V = N.state) == null ? void 0 : V.members]), F = ((Y = S == null ? void 0 : S.user) == null ? void 0 : Y.is_account) ?? (S == null ? void 0 : S.is_account), T = ((q = I == null ? void 0 : I.user) == null ? void 0 : q.is_account) ?? (I == null ? void 0 : I.is_account), E = M && F === !1 && T === !0, A = J(
-    (x) => {
-      const { message: k } = xe("ChannelView"), P = /* @__PURE__ */ n(
+  }, [(Z = k._client) == null ? void 0 : Z.userID, (q = k.state) == null ? void 0 : q.members]), I = ((G = D == null ? void 0 : D.user) == null ? void 0 : G.is_account) ?? (D == null ? void 0 : D.is_account), T = ((w = R == null ? void 0 : R.user) == null ? void 0 : w.is_account) ?? (R == null ? void 0 : R.is_account), S = L && I === !1 && T === !0, P = K(
+    (C) => {
+      const { message: B } = xe("ChannelView"), j = /* @__PURE__ */ n(
         Sa,
         {
-          ...x,
-          chatbotVotingEnabled: p,
-          viewerLanguage: D
+          ...C,
+          chatbotVotingEnabled: v,
+          viewerLanguage: $
         }
       );
-      return !y || !k ? P : y(P, k);
+      return !N || !B ? j : N(j, B);
     },
-    [p, y, D]
+    [v, N, $]
   );
   return /* @__PURE__ */ n(se, { children: /* @__PURE__ */ n(
     ls,
     {
       overrides: {
-        Message: A,
+        Message: P,
         MessageActions: Aa
       },
       children: /* @__PURE__ */ h(cs, { children: [
@@ -2339,9 +2352,9 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
           {
             onBack: e,
             showBackButton: t,
-            showChannelInfo: $,
-            showStarButton: w,
-            dmAgentEnabled: E,
+            showChannelInfo: O,
+            showStarButton: _,
+            dmAgentEnabled: S,
             onLeaveConversation: i,
             onBlockParticipant: o,
             showDeleteConversation: l,
@@ -2350,12 +2363,13 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
             onDeleteConversationClick: d,
             onBlockParticipantClick: m,
             onReportParticipantClick: g,
-            customChannelActions: _,
-            renderChannelActions: R,
-            onParticipantNameClick: L
+            customChannelActions: A,
+            renderChannelActions: M,
+            onParticipantNameClick: E,
+            renderHeaderTitleBadges: x
           }
         ) }, "lt-channel-header"),
-        v ? /* @__PURE__ */ n(U.Fragment, { children: v() }, "lt-channel-banner") : null,
+        p ? /* @__PURE__ */ n(U.Fragment, { children: p() }, "lt-channel-banner") : null,
         /* @__PURE__ */ n(
           "div",
           {
@@ -2364,14 +2378,14 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
           },
           "lt-channel-message-list"
         ),
-        r ? /* @__PURE__ */ n(U.Fragment, { children: r(N) }, "lt-channel-conversation-footer") : null,
+        r ? /* @__PURE__ */ n(U.Fragment, { children: r(k) }, "lt-channel-conversation-footer") : null,
         /* @__PURE__ */ n(
           Pa,
           {
             ...s && {
-              renderActions: () => s == null ? void 0 : s(N)
+              renderActions: () => s == null ? void 0 : s(k)
             },
-            renderFooter: () => a == null ? void 0 : a(N),
+            renderFooter: () => a == null ? void 0 : a(k),
             disabled: c,
             disabledReason: b
           },
@@ -2397,65 +2411,66 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
     onBlockParticipantClick: f,
     onReportParticipantClick: c,
     showBlockParticipant: b = !0,
-    showReportParticipant: w = !0,
-    composerDisabled: p = !1,
-    composerDisabledReason: v,
-    dmAgentEnabled: _,
-    messageMetadata: R,
-    onMessageSent: y,
-    showStarButton: M = !1,
-    chatbotVotingEnabled: D = !1,
+    showReportParticipant: _ = !0,
+    composerDisabled: v = !1,
+    composerDisabledReason: p,
+    dmAgentEnabled: x,
+    messageMetadata: A,
+    onMessageSent: M,
+    showStarButton: N = !1,
+    chatbotVotingEnabled: L = !1,
     renderChannelBanner: $,
-    customChannelActions: L,
-    renderChannelActions: N,
-    renderMessage: I,
-    onMessageLinkClick: S,
-    sendButton: F,
+    renderHeaderTitleBadges: O,
+    customChannelActions: E,
+    renderChannelActions: k,
+    renderMessage: R,
+    onMessageLinkClick: D,
+    sendButton: I,
     attachmentPreviewList: T,
-    viewerLanguage: E,
-    showChannelInfo: A = !0,
-    onParticipantNameClick: O
+    viewerLanguage: S,
+    showChannelInfo: P = !0,
+    onParticipantNameClick: F
   }) => {
-    const B = J(
-      async (V, Y, q) => {
-        var G;
-        const x = ((G = e.data) == null ? void 0 : G.chatbot_paused) === !0, k = _ && !x, P = {
-          ...Y,
-          ...k && { silent: !0 },
-          ...R && {
+    const Y = K(
+      async (q, G, w) => {
+        var J;
+        const C = ((J = e.data) == null ? void 0 : J.chatbot_paused) === !0, B = x && !C, j = {
+          ...G,
+          ...B && { silent: !0 },
+          ...A && {
             metadata: {
-              ...Y.metadata ?? {},
-              ...R
+              ...G.metadata ?? {},
+              ...A
             }
           }
         }, W = {
-          ...q,
-          ...k && { skip_push: !0 }
-        }, K = await e.sendMessage(P, W);
-        return y == null || y(K), K;
+          ...w,
+          ...B && { skip_push: !0 }
+        }, V = await e.sendMessage(j, W);
+        return M == null || M(V), V;
       },
-      [e, _, R, y]
-    ), H = j(null);
+      [e, x, A, M]
+    ), Z = H(null);
     return X(() => {
-      if (!S) return;
-      const V = H.current;
-      if (!V) return;
-      const Y = (q) => {
-        const x = q.target, k = x == null ? void 0 : x.closest("a[href]"), P = k == null ? void 0 : k.getAttribute("href");
-        if (!P) return;
-        const W = k == null ? void 0 : k.closest("[data-message-id]"), K = W == null ? void 0 : W.getAttribute("data-message-id"), G = K ? e.state.messages.find((ee) => ee.id === K) : void 0;
-        S(P, G);
+      if (!D) return;
+      const q = Z.current;
+      if (!q) return;
+      const G = (w) => {
+        const C = w.target, B = C == null ? void 0 : C.closest("a[href]"), j = B == null ? void 0 : B.getAttribute("href");
+        if (!j) return;
+        const W = B == null ? void 0 : B.closest("[data-message-id]"), V = W == null ? void 0 : W.getAttribute("data-message-id"), J = V ? e.state.messages.find((re) => re.id === V) : void 0;
+        D(j, J);
       };
-      return V.addEventListener("click", Y), () => V.removeEventListener("click", Y);
-    }, [S, e]), /* @__PURE__ */ n(
+      return q.addEventListener("click", G), () => q.removeEventListener("click", G);
+    }, [D, e]), /* @__PURE__ */ n(
       "div",
       {
-        ref: H,
-        className: C(
+        ref: Z,
+        className: y(
           "messaging-channel-view h-full flex flex-col",
           d
         ),
-        children: /* @__PURE__ */ n(dn.Provider, { value: _ ?? !1, children: /* @__PURE__ */ n(
+        children: /* @__PURE__ */ n(dn.Provider, { value: x ?? !1, children: /* @__PURE__ */ n(
           os,
           {
             channel: e,
@@ -2464,8 +2479,8 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
             LoadingIndicator: Se,
             DateSeparator: Vs,
             TypingIndicator: qa,
-            doSendMessageRequest: B,
-            ...F ? { SendButton: F } : {},
+            doSendMessageRequest: Y,
+            ...I ? { SendButton: I } : {},
             ...T ? { AttachmentPreviewList: T } : {},
             children: /* @__PURE__ */ n(
               Za,
@@ -2483,19 +2498,20 @@ const le = "size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-ce
                 onBlockParticipantClick: f,
                 onReportParticipantClick: c,
                 showBlockParticipant: b,
-                showReportParticipant: w,
-                composerDisabled: p,
-                composerDisabledReason: v,
-                showStarButton: M,
-                dmAgentEnabled: _,
-                chatbotVotingEnabled: D,
+                showReportParticipant: _,
+                composerDisabled: v,
+                composerDisabledReason: p,
+                showStarButton: N,
+                dmAgentEnabled: x,
+                chatbotVotingEnabled: L,
                 renderChannelBanner: $,
-                customChannelActions: L,
-                renderChannelActions: N,
-                renderMessage: I,
-                viewerLanguage: E,
-                showChannelInfo: A,
-                onParticipantNameClick: O
+                renderHeaderTitleBadges: O,
+                customChannelActions: E,
+                renderChannelActions: k,
+                renderMessage: R,
+                viewerLanguage: S,
+                showChannelInfo: P,
+                onParticipantNameClick: F
               }
             )
           }
@@ -2535,128 +2551,130 @@ const ki = ({
   onMessageSent: u,
   chatbotVotingEnabled: f = !1,
   viewerLanguage: c,
-  renderChannelBanner: b,
-  customChannelActions: w,
+  renderHeaderTitleBadges: b,
+  renderChannelBanner: _,
+  customChannelActions: v,
   renderChannelActions: p,
-  renderMessage: v,
-  onMessageLinkClick: _,
-  showChannelInfo: R
+  renderMessage: x,
+  onMessageLinkClick: A,
+  showChannelInfo: M
 }) => {
   const {
-    client: y,
-    isConnected: M,
-    isLoading: D,
-    error: $,
-    refreshConnection: L,
-    service: N,
-    debug: I
-  } = Ps(), [S, F] = z(null), [T, E] = z(null), [A, O] = z(!1), { showDeleteConversation: B = !0 } = e, H = j(o);
-  H.current = o;
-  const V = j(a);
-  V.current = a;
-  const Y = j(null), q = j(null);
+    client: N,
+    isConnected: L,
+    isLoading: $,
+    error: O,
+    refreshConnection: E,
+    service: k,
+    debug: R
+  } = Ps(), [D, I] = z(null), [T, S] = z(null), [P, F] = z(!1), { showDeleteConversation: Y = !0 } = e, Z = H(o);
+  Z.current = o;
+  const q = H(a);
+  q.current = a;
+  const G = H(null), w = H(null);
   X(() => {
-    q.current = S;
-  }, [S]), X(() => {
-    if (!y || !M) return;
-    const P = y.userID;
-    if (!P) return;
-    const W = `${P}::${i}`;
-    if (Y.current === W) return;
-    Y.current = W;
-    const K = () => {
-      Y.current === W && (Y.current = null);
+    w.current = D;
+  }, [D]), X(() => {
+    if (!N || !L) return;
+    const j = N.userID;
+    if (!j) return;
+    const W = `${j}::${i}`;
+    if (G.current === W) return;
+    G.current = W;
+    const V = () => {
+      G.current === W && (G.current = null);
     };
     (async () => {
-      var ee, ue;
+      var re, ue;
       try {
-        I && console.log(
+        R && console.log(
           "[MessagingShell] Loading initial conversation with:",
           i
         );
-        const Z = await y.queryChannels(
+        const ee = await N.queryChannels(
           {
             type: "messaging",
-            members: { $eq: [P, i] }
+            members: { $eq: [j, i] }
           },
           {},
           { limit: 1 }
         );
-        if (Z.length > 0) {
-          F(Z[0]), E(null), (ee = V.current) == null || ee.call(V, Z[0]), I && console.log(
+        if (ee.length > 0) {
+          I(ee[0]), S(null), (re = q.current) == null || re.call(q, ee[0]), R && console.log(
             "[MessagingShell] Initial conversation loaded:",
-            Z[0].id
+            ee[0].id
           );
           return;
         }
-        const re = H.current;
-        if (!re || !N) {
-          K(), E("No conversation found with this account"), I && console.log(
+        const ie = Z.current;
+        if (!ie || !k) {
+          V(), S("No conversation found with this account"), R && console.log(
             "[MessagingShell] No conversation found for:",
             i
           );
           return;
         }
         try {
-          const te = await N.startChannelWithParticipant({
-            id: re.id,
-            name: re.name,
-            phone: re.phone
+          const Q = await k.startChannelWithParticipant({
+            id: ie.id,
+            name: ie.name,
+            phone: ie.phone
           });
-          F(te), E(null), (ue = V.current) == null || ue.call(V, te), I && console.log(
+          I(Q), S(null), (ue = q.current) == null || ue.call(q, Q), R && console.log(
             "[MessagingShell] Channel created and loaded:",
-            te.id
+            Q.id
           );
-        } catch (te) {
+        } catch (Q) {
           console.error(
             "[MessagingShell] Failed to create conversation:",
-            te
-          ), K(), E("Failed to create conversation");
+            Q
+          ), V(), S("Failed to create conversation");
         }
-      } catch (Z) {
+      } catch (ee) {
         console.error(
           "[MessagingShell] Failed to load initial conversation:",
-          Z
-        ), K(), q.current || E("Failed to load conversation");
+          ee
+        ), V(), w.current || S("Failed to load conversation");
       }
     })();
-  }, [i, y, M, N, I]);
-  const x = j(r);
-  x.current = r;
-  const k = J(() => {
-    var P;
-    F(null), O(!0), (P = x.current) == null || P.call(x);
+  }, [i, N, L, k, R]);
+  const C = H(r);
+  C.current = r;
+  const B = K(() => {
+    var j;
+    I(null), F(!0), (j = C.current) == null || j.call(C);
   }, []);
-  return D ? /* @__PURE__ */ n(Se, {}) : $ ? /* @__PURE__ */ n(be, { message: $, onBack: L }) : !M || !y ? /* @__PURE__ */ n(
+  return $ ? /* @__PURE__ */ n(Se, {}) : O ? /* @__PURE__ */ n(be, { message: O, onBack: E }) : !L || !N ? /* @__PURE__ */ n(
     be,
     {
       message: "Not connected to messaging service",
-      onBack: L
+      onBack: E
     }
-  ) : T ? /* @__PURE__ */ n(be, { message: T }) : A && !S ? /* @__PURE__ */ n(be, { message: "Conversation ended" }) : S ? /* @__PURE__ */ n("div", { className: "messaging-shell h-full bg-background-primary overflow-hidden", children: /* @__PURE__ */ n("div", { className: "flex h-full min-h-0 flex-col", children: /* @__PURE__ */ n(
+  ) : T ? /* @__PURE__ */ n(be, { message: T }) : P && !D ? /* @__PURE__ */ n(be, { message: "Conversation ended" }) : D ? /* @__PURE__ */ n("div", { className: "messaging-shell h-full bg-background-primary overflow-hidden", children: /* @__PURE__ */ n("div", { className: "flex h-full min-h-0 flex-col", children: /* @__PURE__ */ n(
     un,
     {
-      channel: S,
+      channel: D,
       renderMessageInputActions: t,
       renderConversationFooter: s,
-      renderChannelBanner: b,
-      onLeaveConversation: k,
-      onBlockParticipant: k,
+      renderChannelBanner: _,
+      onLeaveConversation: B,
+      onBlockParticipant: B,
       CustomChannelEmptyState: l,
-      showDeleteConversation: B,
+      showDeleteConversation: Y,
       onBlockParticipantClick: d,
       onReportParticipantClick: m,
       dmAgentEnabled: g,
       onMessageSent: u,
       chatbotVotingEnabled: f,
       viewerLanguage: c,
-      customChannelActions: w,
+      renderHeaderTitleBadges: b,
+      customChannelActions: v,
       renderChannelActions: p,
-      renderMessage: v,
-      onMessageLinkClick: _,
-      showChannelInfo: R
+      renderMessage: x,
+      onMessageLinkClick: A,
+      showChannelInfo: M
     },
-    S.id
+    D.id
   ) }) }) : /* @__PURE__ */ n(Se, {});
 };
 function Qa(e) {
@@ -2695,7 +2713,7 @@ const mn = U.createContext({
   });
 }, hn = U.memo(
   ({ channel: e, unread: t }) => {
-    var D, $, L;
+    var L, $, O;
     const {
       selectedChannel: s,
       onChannelSelect: a,
@@ -2704,40 +2722,40 @@ const mn = U.createContext({
       viewerLanguage: o
     } = tr(), l = (s == null ? void 0 : s.id) === (e == null ? void 0 : e.id), d = () => {
       e && a(e);
-    }, m = (N) => {
-      const I = N.key === "Enter" || N.key === " ", S = N.repeat;
-      !I || S || (N.preventDefault(), d());
-    }, u = Object.values(((D = e == null ? void 0 : e.state) == null ? void 0 : D.members) || {}).find(
-      (N) => {
-        var I, S;
-        return ((I = N.user) == null ? void 0 : I.id) && N.user.id !== ((S = e == null ? void 0 : e._client) == null ? void 0 : S.userID);
+    }, m = (E) => {
+      const k = E.key === "Enter" || E.key === " ", R = E.repeat;
+      !k || R || (E.preventDefault(), d());
+    }, u = Object.values(((L = e == null ? void 0 : e.state) == null ? void 0 : L.members) || {}).find(
+      (E) => {
+        var k, R;
+        return ((k = E.user) == null ? void 0 : k.id) && E.user.id !== ((R = e == null ? void 0 : e._client) == null ? void 0 : R.userID);
       }
     ), f = Xt(u == null ? void 0 : u.user), c = ($ = u == null ? void 0 : u.user) == null ? void 0 : $.image, b = (() => {
-      var I;
-      const N = (I = e == null ? void 0 : e.state) == null ? void 0 : I.messages;
-      if (N != null && N.length) {
-        for (let S = N.length - 1; S >= 0; S--)
-          if (N[S].type !== "system") return N[S];
+      var k;
+      const E = (k = e == null ? void 0 : e.state) == null ? void 0 : k.messages;
+      if (E != null && E.length) {
+        for (let R = E.length - 1; R >= 0; R--)
+          if (E[R].type !== "system") return E[R];
       }
-    })(), p = (() => {
-      var E, A, O, B;
-      const N = Kt({
+    })(), v = (() => {
+      var T, S, P, F;
+      const E = Kt({
         message: b,
         viewerLanguage: o
       });
-      if (((E = b == null ? void 0 : b.metadata) == null ? void 0 : E.custom_type) === "MESSAGE_TIP") return N ? `💵 ${N}` : "💵 Sent a tip";
-      if (((A = b == null ? void 0 : b.metadata) == null ? void 0 : A.custom_type) === "MESSAGE_PAID") return N ? `💰 ${N}` : "💰 Sent a message";
-      if (((O = b == null ? void 0 : b.metadata) == null ? void 0 : O.custom_type) === "MESSAGE_ATTACHMENT") return N ? `📎 ${N}` : "📎 Sent an attachment";
-      if (N) return N;
-      const T = (B = b == null ? void 0 : b.attachments) == null ? void 0 : B[0];
-      return T ? T.og_scrape_url ? T.og_scrape_url : T.type === "image" ? "📷 Sent an image" : T.type === "video" ? "🎥 Sent a video" : T.type === "audio" ? "🎵 Sent audio" : T.type === "file" ? "📎 Sent a file" : "📎 Sent an attachment" : "No messages yet";
-    })(), v = b != null && b.created_at ? sr(new Date(b.created_at)) : "", _ = b ? Ee(b) : !1, R = i ? i(b, p) : `${_ ? "✨ " : ""}${p}`, y = Wt(e), M = t ?? 0;
+      if (((T = b == null ? void 0 : b.metadata) == null ? void 0 : T.custom_type) === "MESSAGE_TIP") return E ? `💵 ${E}` : "💵 Sent a tip";
+      if (((S = b == null ? void 0 : b.metadata) == null ? void 0 : S.custom_type) === "MESSAGE_PAID") return E ? `💰 ${E}` : "💰 Sent a message";
+      if (((P = b == null ? void 0 : b.metadata) == null ? void 0 : P.custom_type) === "MESSAGE_ATTACHMENT") return E ? `📎 ${E}` : "📎 Sent an attachment";
+      if (E) return E;
+      const I = (F = b == null ? void 0 : b.attachments) == null ? void 0 : F[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";
+    })(), p = b != null && b.created_at ? sr(new Date(b.created_at)) : "", x = b ? Ee(b) : !1, A = i ? i(b, v) : `${x ? "✨ " : ""}${v}`, M = Wt(e), N = t ?? 0;
     return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
       channelId: e == null ? void 0 : e.id,
       isSelected: l,
       participantName: f,
-      unreadCount: M,
-      hasTimestamp: !!v
+      unreadCount: N,
+      hasTimestamp: !!p
     }), /* @__PURE__ */ n(
       "div",
       {
@@ -2745,7 +2763,7 @@ const mn = U.createContext({
         tabIndex: 0,
         onClick: d,
         onKeyDown: m,
-        className: C(
+        className: y(
           "group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring rounded-[12px] [&+&]:mt-2",
           {
             "bg-black/[0.04]": l,
@@ -2754,13 +2772,13 @@ const mn = U.createContext({
         ),
         children: /* @__PURE__ */ h("div", { className: "flex items-start gap-4", children: [
           /* @__PURE__ */ n(
-            ie,
+            oe,
             {
-              id: ((L = u == null ? void 0 : u.user) == null ? void 0 : L.id) || e.id || "unknown",
+              id: ((O = u == null ? void 0 : u.user) == null ? void 0 : O.id) || e.id || "unknown",
               name: f,
               image: c,
               size: 48,
-              starred: y
+              starred: M
             }
           ),
           /* @__PURE__ */ h("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
@@ -2768,20 +2786,20 @@ const mn = U.createContext({
               /* @__PURE__ */ h(
                 "h3",
                 {
-                  className: C(
+                  className: y(
                     "text-sm font-medium truncate text-[#191918]"
                   ),
                   children: [
-                    y && /* @__PURE__ */ n("span", { className: "sr-only", children: "Starred conversation. " }),
+                    M && /* @__PURE__ */ n("span", { className: "sr-only", children: "Starred conversation. " }),
                     f
                   ]
                 }
               ),
-              v && /* @__PURE__ */ n("span", { className: "text-xs text-[#717070] flex-shrink-0", children: v })
+              p && /* @__PURE__ */ n("span", { className: "text-xs text-[#717070] flex-shrink-0", children: p })
             ] }),
             /* @__PURE__ */ h("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
-              /* @__PURE__ */ n("p", { className: "text-sm text-[#717070] flex-1 line-clamp-1", children: R }),
-              M > 0 && /* @__PURE__ */ n("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: M > 99 ? "99+" : M })
+              /* @__PURE__ */ n("p", { className: "text-sm text-[#717070] flex-1 line-clamp-1", children: A }),
+              N > 0 && /* @__PURE__ */ n("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: N > 99 ? "99+" : N })
             ] })
           ] })
         ] })
@@ -2807,8 +2825,8 @@ const ar = { last_message_at: -1 }, rr = U.memo(
     g.current++;
     const { debug: u = !1 } = Xe(), f = U.useCallback(
       (b) => {
-        for (const w of b)
-          Qa(w);
+        for (const _ of b)
+          Qa(_);
         return r ? r(b) : b;
       },
       [r]
@@ -2837,7 +2855,7 @@ const ar = { last_message_at: -1 }, rr = U.memo(
     return /* @__PURE__ */ n(
       "div",
       {
-        className: C(
+        className: y(
           "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
           o
         ),
@@ -2876,7 +2894,7 @@ const lr = {
   dark: "bg-white text-[#121110] hover:bg-white/90",
   light: "bg-[#121110] text-white hover:bg-[#2a2928]"
 }, cr = ({ variant: e, cta: t }) => {
-  const s = C(
+  const s = y(
     "mt-2 inline-flex h-10 w-full items-center justify-center rounded-full px-4 text-sm font-medium leading-none transition-colors",
     lr[e]
   ), a = tt(t.href);
@@ -2923,10 +2941,10 @@ const lr = {
 }) => {
   const d = e === "dark", m = t ?? (d ? s : void 0) ?? "", g = m.trim() !== "", u = a != null && a.trim() !== "", f = typeof r == "string" ? r.trim() : "", c = f !== "", b = o != null;
   if (!g && !u && !c && !b) return null;
-  const p = C(
+  const v = y(
     "truncate text-base font-medium leading-6",
     d && !t ? ur : dr[e]
-  ), v = C(
+  ), p = y(
     "truncate text-xs leading-4",
     mr[e]
   );
@@ -2936,17 +2954,17 @@ const lr = {
         /* @__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__ */ n("span", { className: "shrink-0", children: i }) : null,
-            /* @__PURE__ */ n("p", { className: C("min-w-0", p), children: m })
+            /* @__PURE__ */ n("p", { className: y("min-w-0", v), children: m })
           ] }),
-          u && /* @__PURE__ */ n("p", { className: v, children: a })
+          u && /* @__PURE__ */ n("p", { className: p, children: a })
         ] }),
-        !b && c && /* @__PURE__ */ n("p", { className: v, children: f })
+        !b && c && /* @__PURE__ */ n("p", { className: p, children: f })
       ] }),
       l && /* @__PURE__ */ n("div", { className: "shrink-0", children: l })
     ] }),
     o && /* @__PURE__ */ n(cr, { variant: e, cta: o })
   ] });
-}, hr = C(
+}, hr = y(
   "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"
@@ -2964,7 +2982,7 @@ const lr = {
   bgClassName: l,
   "data-testid": d
 }) => {
-  const m = s != null || a != null, g = C(
+  const m = s != null || a != null, g = y(
     hr,
     l ?? (e === "dark" ? "bg-[#121110]" : "bg-white"),
     // `focus-ring` is a design-system utility from the component-library
@@ -2995,7 +3013,7 @@ const lr = {
       onClick: a,
       "aria-label": r,
       "data-testid": d,
-      className: C(g, "text-left"),
+      className: y(g, "text-left"),
       children: [
         t,
         u
@@ -3045,7 +3063,7 @@ const lr = {
   ) }) : /* @__PURE__ */ h(
     "div",
     {
-      className: C(
+      className: y(
         "relative h-[180px] w-full overflow-hidden",
         d && "bg-black"
       ),
@@ -3072,7 +3090,7 @@ const lr = {
         ) : /* @__PURE__ */ n(
           "div",
           {
-            className: C(
+            className: y(
               "flex h-full w-full items-center justify-center",
               fr[e]
             ),
@@ -3110,7 +3128,7 @@ const lr = {
       className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
       children: /* @__PURE__ */ n(Me, { className: "size-3", weight: "bold" })
     }
-  ) : void 0, w = u ? /* @__PURE__ */ n(
+  ) : void 0, _ = u ? /* @__PURE__ */ n(
     "button",
     {
       type: "button",
@@ -3158,7 +3176,7 @@ const lr = {
             url: a,
             appIcon: d,
             cta: m,
-            trailingAction: w
+            trailingAction: _
           }
         )
       ]
@@ -3176,11 +3194,11 @@ const lr = {
   cta: d,
   onClick: m
 }) => {
-  const g = fn(a, i), u = tt(s), f = d == null && u != null && !g ? u : void 0, c = d == null && !g ? m : void 0, b = Re(a, i) ? st : void 0, w = d && m ? {
+  const g = fn(a, i), u = tt(s), f = d == null && u != null && !g ? u : void 0, c = d == null && !g ? m : void 0, b = Re(a, i) ? st : void 0, _ = d && m ? {
     ...d,
     onClick: () => {
-      var p;
-      m(), (p = d.onClick) == null || p.call(d);
+      var v;
+      m(), (v = d.onClick) == null || v.call(d);
     }
   } : d;
   return /* @__PURE__ */ h(
@@ -3211,7 +3229,7 @@ const lr = {
             description: t,
             url: s,
             appIcon: l,
-            cta: w
+            cta: _
           }
         )
       ]
@@ -3305,7 +3323,7 @@ const lr = {
     {
       "data-testid": o,
       "data-group-position": a,
-      className: C(
+      className: y(
         // 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
@@ -3325,7 +3343,7 @@ const lr = {
         l ? /* @__PURE__ */ n(
           "p",
           {
-            className: C(
+            className: y(
               // No `text-*` / `font-*` overrides here — caption inherits
               // the same font family + size as `.str-chat__message-text`
               // so it matches the surrounding `CustomMessage` bubbles.
@@ -3354,7 +3372,7 @@ const lr = {
       a.stopPropagation(), e();
     },
     "aria-label": s,
-    className: C(
+    className: y(
       "flex size-6 items-center justify-center rounded-full text-white",
       t === "overlay" ? "bg-[#121110]/85 backdrop-blur" : "bg-white/15 hover:bg-white/25"
     ),
@@ -3458,7 +3476,7 @@ function Lr(e, t, s) {
   const a = Rr(e, t), r = typeof s == "number" && s > 0 ? Ar(s) : void 0;
   return [a, r].filter(Boolean).join(" · ") || void 0;
 }
-function Q(e) {
+function te(e) {
   try {
     const s = new URL(e).pathname.split("/").pop();
     return s && s.length > 0 ? decodeURIComponent(s) : "download";
@@ -3488,13 +3506,13 @@ const Dr = {
   const d = s ?? t ?? "File", m = Lr(a, t, r), g = /* @__PURE__ */ n(
     "div",
     {
-      className: C(
+      className: y(
         "flex size-10 shrink-0 items-center justify-center rounded-sm",
         Or[e]
       ),
       "aria-hidden": !0,
       children: ce(a, {
-        className: C("size-6", Pr[e]),
+        className: y("size-6", Pr[e]),
         weight: "regular"
       })
     }
@@ -3503,7 +3521,7 @@ const Dr = {
     m ? /* @__PURE__ */ n(
       "p",
       {
-        className: C(
+        className: y(
           "truncate text-xs leading-4",
           Dr[e]
         ),
@@ -3516,7 +3534,7 @@ const Dr = {
       type: "button",
       onClick: i,
       "aria-label": o,
-      className: C(
+      className: y(
         "flex min-w-0 flex-1 items-center gap-3 rounded-sm text-left transition-colors",
         e === "dark" ? "hover:bg-white/[0.04]" : "hover:bg-black/[0.04]"
       ),
@@ -3535,7 +3553,7 @@ const Dr = {
   ] });
 };
 async function bn(e, t) {
-  const s = t ?? Q(e);
+  const s = t ?? te(e);
   try {
     const a = await fetch(e, { mode: "cors" });
     if (!a.ok) throw new Error(`HTTP ${a.status}`);
@@ -3562,7 +3580,7 @@ const zr = ({
   onActivate: a,
   trailingAction: r
 }) => {
-  const i = t.filename ?? Q(t.src);
+  const i = t.filename ?? te(t.src);
   return /* @__PURE__ */ n(
     gn,
     {
@@ -3596,19 +3614,19 @@ const zr = ({
     mimeType: r,
     title: i,
     items: o
-  }), b = (p) => {
-    if ((m == null ? void 0 : m(p)) === !1) return;
-    const v = c[p];
-    if (!v) return;
-    const _ = v.filename ?? Q(v.src);
-    bn(v.src, _);
+  }), b = (v) => {
+    if ((m == null ? void 0 : m(v)) === !1) return;
+    const p = c[v];
+    if (!p) return;
+    const x = p.filename ?? te(p.src);
+    bn(p.src, x);
   };
   if (c.length === 0)
     return null;
-  const w = /* @__PURE__ */ n(
+  const _ = /* @__PURE__ */ n(
     "span",
     {
-      className: C(
+      className: y(
         "flex size-8 items-center justify-center rounded-full",
         u === "dark" ? "text-white/70" : "text-black/70"
       ),
@@ -3623,16 +3641,16 @@ const zr = ({
       text: l,
       groupPosition: d,
       "data-testid": "file-attachment",
-      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: c.map((p, v) => /* @__PURE__ */ n(
+      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: c.map((v, p) => /* @__PURE__ */ n(
         $r,
         {
           variant: u,
-          item: p,
-          index: v,
+          item: v,
+          index: p,
           onActivate: b,
-          trailingAction: f && v === 0 ? /* @__PURE__ */ n(_e, { onClick: g, variant: "inline" }) : w
+          trailingAction: f && p === 0 ? /* @__PURE__ */ n(_e, { onClick: g, variant: "inline" }) : _
         },
-        `${p.src}-${v}`
+        `${v.src}-${p}`
       )) })
     }
   );
@@ -3675,7 +3693,7 @@ const zr = ({
   tone: i = "dark",
   onTriggered: o
 }) => {
-  const [l, d] = z(!1), m = J(
+  const [l, d] = z(!1), m = K(
     (c) => {
       c.stopPropagation(), !l && (d(!0), bn(e, t).catch(() => {
       }).finally(() => {
@@ -3683,7 +3701,7 @@ const zr = ({
       }));
     },
     [l, e, t, o]
-  ), g = r ?? s !== "pill", f = { className: C(
+  ), g = r ?? s !== "pill", f = { className: y(
     s === "pill" ? "size-4" : "size-5",
     "shrink-0"
   ), weight: "bold" };
@@ -3694,7 +3712,7 @@ const zr = ({
       onClick: m,
       disabled: l,
       "aria-label": a,
-      className: C(
+      className: y(
         "flex size-8 shrink-0 items-center justify-center rounded-full transition-colors disabled:opacity-70",
         {
           dark: "text-white/70 hover:bg-white/[0.08] hover:text-white",
@@ -3734,7 +3752,7 @@ const zr = ({
       onClick: m,
       disabled: l,
       "aria-label": g ? a : void 0,
-      className: C(
+      className: y(
         "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full px-4 text-sm font-medium leading-none transition-colors disabled:opacity-70",
         i === "dark" ? "bg-[#121110] text-white hover:bg-[#2a2928]" : "bg-white text-[#121110] hover:bg-white/90"
       ),
@@ -3762,9 +3780,9 @@ const zr = ({
   }, [s, t, e]), X(() => {
     i((d) => Fe(d, 0, Math.max(e - 1, 0)));
   }, [e]);
-  const o = J(() => {
+  const o = K(() => {
     e <= 1 || i((d) => d <= 0 ? e - 1 : d - 1);
-  }, [e]), l = J(() => {
+  }, [e]), l = K(() => {
     e <= 1 || i((d) => d >= e - 1 ? 0 : d + 1);
   }, [e]);
   return X(() => {
@@ -3785,7 +3803,7 @@ const zr = ({
   children: i,
   "data-testid": o
 }) => {
-  const l = j(null), d = j(null);
+  const l = H(null), d = H(null);
   return X(() => {
     var f;
     const u = l.current;
@@ -3877,7 +3895,7 @@ const zr = ({
     initialIndex: s,
     open: e
   }), l = t[r], d = ne(
-    () => (l == null ? void 0 : l.filename) ?? (l ? Q(l.src) : "image"),
+    () => (l == null ? void 0 : l.filename) ?? (l ? te(l.src) : "image"),
     [l]
   );
   return l ? /* @__PURE__ */ h(
@@ -3931,14 +3949,14 @@ const zr = ({
   const r = e.length;
   if (r === 0) return null;
   const i = e.slice(0, Math.min(r, s)), o = r - i.length, l = (d, m, g) => {
-    const u = C(Vr, "h-full w-full");
+    const u = y(Vr, "h-full w-full");
     return t ? /* @__PURE__ */ h(
       "button",
       {
         type: "button",
         onClick: () => t(m),
         "aria-label": d.ariaLabel ?? `Open media ${m + 1}`,
-        className: C(u, "cursor-zoom-in"),
+        className: y(u, "cursor-zoom-in"),
         children: [
           d.content,
           g
@@ -3950,10 +3968,10 @@ const zr = ({
       g
     ] }, m);
   };
-  return i.length === 1 ? /* @__PURE__ */ n("div", { className: C("aspect-square w-full", a), children: l(i[0], 0) }) : i.length === 2 ? /* @__PURE__ */ n(
+  return i.length === 1 ? /* @__PURE__ */ n("div", { className: y("aspect-square w-full", a), children: l(i[0], 0) }) : i.length === 2 ? /* @__PURE__ */ n(
     "div",
     {
-      className: C(
+      className: y(
         "grid aspect-[16/9] w-full grid-cols-2 gap-0.5",
         a
       ),
@@ -3962,7 +3980,7 @@ const zr = ({
   ) : i.length === 3 ? /* @__PURE__ */ h(
     "div",
     {
-      className: C(
+      className: y(
         "grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5",
         a
       ),
@@ -3975,7 +3993,7 @@ const zr = ({
   ) : /* @__PURE__ */ n(
     "div",
     {
-      className: C(
+      className: y(
         "grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5",
         a
       ),
@@ -3993,12 +4011,12 @@ const zr = ({
     }
   );
 }, ye = (e) => {
-  const [t, s] = z(!1), [a, r] = z(0), i = J(
+  const [t, s] = z(!1), [a, r] = z(0), i = K(
     (l) => {
       (e == null ? void 0 : e(l)) !== !1 && (r(l), s(!0));
     },
     [e]
-  ), o = J(() => s(!1), []);
+  ), o = K(() => s(!1), []);
   return { viewerOpen: t, viewerIndex: a, handleActivate: i, closeViewer: o };
 }, Gr = (e, t, s, a) => ({
   ariaLabel: `Open image ${t + 1} of ${s}`,
@@ -4075,8 +4093,8 @@ const zr = ({
   );
   if (m.length === 0)
     return null;
-  const w = m.map(
-    (p, v) => Gr(p, v, m.length, l)
+  const _ = m.map(
+    (v, p) => Gr(v, p, m.length, l)
   );
   return /* @__PURE__ */ h(
     we,
@@ -4086,7 +4104,7 @@ const zr = ({
       groupPosition: o,
       "data-testid": "image-attachment",
       children: [
-        /* @__PURE__ */ n("div", { className: "relative", children: /* @__PURE__ */ n(xn, { tiles: w, onTileActivate: c }) }),
+        /* @__PURE__ */ n("div", { className: "relative", children: /* @__PURE__ */ n(xn, { tiles: _, onTileActivate: c }) }),
         /* @__PURE__ */ n(
           vn,
           {
@@ -4114,7 +4132,7 @@ const zr = ({
     initialIndex: s,
     open: e
   }), l = t[r], d = ne(
-    () => (l == null ? void 0 : l.filename) ?? (l ? Q(l.src) : "document"),
+    () => (l == null ? void 0 : l.filename) ?? (l ? te(l.src) : "document"),
     [l]
   ), m = ne(
     () => l ? Zr(l.src) : void 0,
@@ -4167,7 +4185,7 @@ const zr = ({
   onActivate: a,
   trailingAction: r
 }) => {
-  const i = t.filename ?? Q(t.src);
+  const i = t.filename ?? te(t.src);
   return /* @__PURE__ */ n(
     gn,
     {
@@ -4193,14 +4211,14 @@ const zr = ({
   onClick: d,
   onDismiss: m
 }) => {
-  const g = Ne(e), u = Qr({ src: t, filename: s, fileSize: a, title: r, items: i }), { viewerOpen: f, viewerIndex: c, handleActivate: b, closeViewer: w } = ye(
+  const g = Ne(e), u = Qr({ src: t, filename: s, fileSize: a, title: r, items: i }), { viewerOpen: f, viewerIndex: c, handleActivate: b, closeViewer: _ } = ye(
     d
-  ), p = e === "composer" && !!m;
+  ), v = e === "composer" && !!m;
   if (u.length === 0)
     return null;
-  const v = u.map((_) => ({
-    src: _.src,
-    filename: _.filename ?? Q(_.src)
+  const p = u.map((x) => ({
+    src: x.src,
+    filename: x.filename ?? te(x.src)
   }));
   return /* @__PURE__ */ h(
     we,
@@ -4210,14 +4228,14 @@ const zr = ({
       groupPosition: l,
       "data-testid": "pdf-attachment",
       children: [
-        /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: u.map((_, R) => {
-          const y = _.filename ?? Q(_.src), M = p && R === 0 ? /* @__PURE__ */ n(_e, { onClick: m, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ n(
+        /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: u.map((x, A) => {
+          const M = x.filename ?? te(x.src), N = v && A === 0 ? /* @__PURE__ */ n(_e, { onClick: m, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ n(
             pn,
             {
-              url: _.src,
-              filename: y,
+              url: x.src,
+              filename: M,
               variant: "inline",
-              label: `Download ${y}`,
+              label: `Download ${M}`,
               tone: g
             }
           );
@@ -4225,21 +4243,21 @@ const zr = ({
             ei,
             {
               variant: g,
-              item: _,
-              index: R,
+              item: x,
+              index: A,
               onActivate: b,
-              trailingAction: M
+              trailingAction: N
             },
-            `${_.src}-${R}`
+            `${x.src}-${A}`
           );
         }) }),
         /* @__PURE__ */ n(
           Jr,
           {
             open: f,
-            items: v,
+            items: p,
             initialIndex: c,
-            onClose: w
+            onClose: _
           }
         )
       ]
@@ -4260,7 +4278,7 @@ const zr = ({
     initialIndex: s,
     open: e
   }), l = t[r], d = ne(
-    () => (l == null ? void 0 : l.filename) ?? (l ? Q(l.src) : "video"),
+    () => (l == null ? void 0 : l.filename) ?? (l ? te(l.src) : "video"),
     [l]
   );
   return l ? /* @__PURE__ */ h(
@@ -4378,13 +4396,13 @@ const zr = ({
   preload: d,
   onClick: m
 }) => {
-  const g = oi({ src: t, poster: s, mimeType: a, preload: d, items: i }), u = Ne(e), { viewerOpen: f, viewerIndex: c, handleActivate: b, closeViewer: w } = ye(
+  const g = oi({ src: t, poster: s, mimeType: a, preload: d, items: i }), u = Ne(e), { viewerOpen: f, viewerIndex: c, handleActivate: b, closeViewer: _ } = ye(
     m
   );
   if (g.length === 0)
     return null;
-  const p = g.map(
-    (v, _) => ii(v, _, g.length)
+  const v = g.map(
+    (p, x) => ii(p, x, g.length)
   );
   return /* @__PURE__ */ h(
     we,
@@ -4397,7 +4415,7 @@ const zr = ({
         /* @__PURE__ */ n("div", { className: "relative", children: /* @__PURE__ */ n(
           xn,
           {
-            tiles: p,
+            tiles: v,
             onTileActivate: b,
             className: "overflow-hidden rounded-md"
           }
@@ -4408,7 +4426,7 @@ const zr = ({
             open: f,
             items: Cn(g, r),
             initialIndex: c,
-            onClose: w
+            onClose: _
           }
         )
       ]
@@ -4436,7 +4454,7 @@ const zr = ({
     onClick: t,
     disabled: s,
     style: { backgroundColor: "#E6E5E3" },
-    className: C(
+    className: y(
       "w-full text-center p-4 rounded-xl text-charcoal font-medium transition-colors focus-ring",
       {
         "hover:brightness-95 active:brightness-90": !s,
@@ -4458,7 +4476,7 @@ const zr = ({
   const l = e.filter((d) => d.enabled).sort((d, m) => (d.order ?? 0) - (m.order ?? 0));
   return l.length === 0 ? null : /* @__PURE__ */ n("div", { className: r, children: /* @__PURE__ */ h("div", { className: "flex gap-3 items-end", children: [
     (i || o) && /* @__PURE__ */ n("div", { className: "flex-none", children: /* @__PURE__ */ n(
-      ie,
+      oe,
       {
         id: o || "account",
         name: o || "Account",
@@ -4497,7 +4515,7 @@ export {
   Ei as L,
   yi as M,
   ge as a,
-  ie as b,
+  oe as b,
   rr as c,
   un as d,
   Ci as e,
@@ -4523,4 +4541,4 @@ export {
   Xt as y,
   va as z
 };
-//# sourceMappingURL=index-DKq7HA0h.js.map
+//# sourceMappingURL=index-BOsrtjME.js.map