@linktr.ee/messaging-react 2.3.4 → 2.4.1

package/dist/index-CeHWbIiy.js

@@ -0,0 +1,4733 @@
+import { jsx as n, jsxs as m, Fragment as ie } from "react/jsx-runtime";
+import y from "classnames";
+import P, { createContext as Ze, useContext as Ke, useCallback as U, useState as z, useRef as Z, useEffect as X, useMemo as re, Suspense as Je } from "react";
+import { StreamChatService as En } from "@linktr.ee/messaging-core";
+import { Chat as In, ChannelList as Sn, DateSeparator as Tn, useChannelStateContext as me, useChatContext as Qe, areMessageUIPropsEqual as Mn, useMessageReminder as An, useComponentContext as Vt, Attachment as Dn, EditMessageModal as Rn, MessageBlocked as Ln, MessageBouncePrompt as Fn, MessageDeleted as On, MessageIsThreadReplyInChannelButtonIndicator as zn, MessageRepliesCountButton as Pn, ReminderNotification as Bn, StreamedMessageText as $n, messageHasAttachments as jn, messageHasReactions as Un, isDateSeparatorMessage as Vn, isMessageBlocked as Gn, isMessageBounced as Hn, MessageBounceModal as Yn, MessageText as At, Poll as Wn, MessageErrorIcon as qn, useMessageContext as Le, useTranslationContext as Xn, useMessageComposer as Zn, useStateStore as Kn, MessageInput as Jn, useMessageInputContext as Qn, useMessageComposerHasSendableData as es, SimpleAttachmentSelector as ts, QuotedMessagePreview as ns, AttachmentPreviewList as ss, TextareaComposer as as, MessageTimestamp as ze, AIStates as Pe, useTypingContext as rs, useAIState as is, Channel as os, WithComponents as ls, Window as cs, MessageList as ds } from "stream-chat-react";
+import { StarIcon as Ge, GiftIcon as us, XIcon as xe, SpinnerGapIcon as Be, SignOutIcon as ms, ProhibitInsetIcon as Dt, FlagIcon as hs, FileIcon as Gt, ImageIcon as fs, SpeakerHighIcon as gs, VideoCameraIcon as Ht, FileMdIcon as bs, FileTextIcon as ps, FileZipIcon as vs, FilePptIcon as xs, FileCsvIcon as ws, FileXlsIcon as Ns, FileDocIcon as ys, FilePdfIcon as _s, CircleNotchIcon as pe, PlayIcon as He, PauseIcon as Cs, LinkIcon as ks, DownloadSimpleIcon as ve, ThumbsUpIcon as Es, ThumbsDownIcon as Is, ArrowUpIcon as Ss, SparkleIcon as Ye, ProhibitIcon as Ts, ArrowLeftIcon as Rt, CaretRightIcon as We, DotsThreeIcon as Lt, PencilSimpleIcon as Ms, CaretLeftIcon as As } from "@phosphor-icons/react";
+import { MessageActions as Ds, DefaultDropdownActionButton as Yt } from "stream-chat-react/experimental";
+import { LinkPreviewsManager as Ft } from "stream-chat";
+const Wt = Ze({
+  service: null,
+  client: null,
+  isConnected: !1,
+  isLoading: !1,
+  error: null,
+  capabilities: {},
+  refreshConnection: async () => {
+  },
+  debug: !1
+}), et = () => Ke(Wt), yi = ({
+  children: e,
+  user: t,
+  serviceConfig: s,
+  apiKey: a,
+  capabilities: r = {},
+  debug: i = !1
+}) => {
+  const l = U(
+    (T, ...F) => {
+      i && console.log(`🔥 [MessagingProvider] ${T}`, ...F);
+    },
+    [i]
+  );
+  l("🔄 RENDER START", {
+    userId: t == null ? void 0 : t.id,
+    apiKey: (a == null ? void 0 : a.substring(0, 8)) + "...",
+    serviceConfig: !!s,
+    capabilities: Object.keys(r)
+  });
+  const [o, d] = z(null), [h, g] = z(null), [u, f] = z(!1), [c, b] = z(!1), [x, v] = z(null), N = Z(!1), w = Z({
+    userId: t == null ? void 0 : t.id,
+    apiKey: a,
+    serviceConfig: s,
+    capabilities: r
+  }), E = Z(0);
+  E.current++, l("📊 RENDER INFO", {
+    renderCount: E.current,
+    currentProps: { userId: t == null ? void 0 : t.id, apiKey: (a == null ? void 0 : a.substring(0, 8)) + "..." },
+    propChanges: {
+      userChanged: w.current.userId !== (t == null ? void 0 : t.id),
+      apiKeyChanged: w.current.apiKey !== a,
+      serviceConfigChanged: w.current.serviceConfig !== s,
+      capabilitiesChanged: w.current.capabilities !== r
+    }
+  }), w.current = {
+    userId: t == null ? void 0 : t.id,
+    apiKey: a,
+    serviceConfig: s,
+    capabilities: r
+  }, X(() => {
+    const T = E.current;
+    if (l("🔧 SERVICE INIT EFFECT TRIGGERED", {
+      renderCount: T,
+      apiKey: !!a,
+      serviceConfig: !!s,
+      dependencies: {
+        apiKey: (a == null ? void 0 : a.substring(0, 8)) + "...",
+        serviceConfigRef: s,
+        serviceConfigStable: w.current.serviceConfig === s,
+        apiKeyStable: w.current.apiKey === a
+      }
+    }), !a || !s) {
+      l("⚠️ SERVICE INIT SKIPPED", {
+        renderCount: T,
+        reason: "Missing apiKey or serviceConfig"
+      });
+      return;
+    }
+    l("🚀 CREATING NEW SERVICE", {
+      renderCount: T,
+      apiKey: (a == null ? void 0 : a.substring(0, 8)) + "...",
+      serviceConfigChanged: w.current.serviceConfig !== s
+    });
+    const F = new En({
+      ...s,
+      apiKey: a,
+      debug: i
+    });
+    return d(F), l("✅ SERVICE SET", {
+      renderCount: T,
+      serviceInstance: !!F
+    }), () => {
+      l("🧹 SERVICE CLEANUP", {
+        renderCount: T,
+        reason: "Effect cleanup"
+      }), F.disconnectUser().catch(console.error);
+    };
+  }, [a, s, i, l]);
+  const I = Z(null);
+  X(() => {
+    var F, M;
+    if (l("🔗 USER CONNECTION EFFECT TRIGGERED", {
+      hasService: !!o,
+      hasUser: !!t,
+      userId: t == null ? void 0 : t.id,
+      isConnecting: N.current,
+      isConnected: u,
+      dependencies: { service: !!o, userId: t == null ? void 0 : t.id }
+    }), !o || !t) {
+      l("⚠️ USER CONNECTION SKIPPED", "Missing service or user");
+      return;
+    }
+    if (N.current) {
+      l("⚠️ USER CONNECTION SKIPPED", "Already connecting");
+      return;
+    }
+    if (((F = I.current) == null ? void 0 : F.serviceId) === o && ((M = I.current) == null ? void 0 : M.userId) === t.id) {
+      l(
+        "⚠️ USER CONNECTION SKIPPED",
+        "Already connected this user with this service"
+      );
+      return;
+    }
+    (async () => {
+      l("🚀 STARTING USER CONNECTION", { userId: t.id }), N.current = !0, b(!0), v(null);
+      try {
+        l("📞 CALLING SERVICE.CONNECTUSER", { userId: t.id });
+        const R = await o.connectUser(t);
+        g(R), f(!0), I.current = { serviceId: o, userId: t.id }, l("✅ USER CONNECTION SUCCESS", {
+          userId: t.id,
+          clientId: R.userID
+        });
+      } catch (R) {
+        const A = R instanceof Error ? R.message : "Connection failed";
+        v(A), l("❌ USER CONNECTION ERROR", {
+          userId: t.id,
+          error: A
+        });
+      } finally {
+        b(!1), N.current = !1, l("🔄 USER CONNECTION FINISHED", {
+          userId: t.id,
+          isConnected: u
+        });
+      }
+    })();
+  }, [o, t, l, u]), X(() => (l("🔌 CLEANUP EFFECT REGISTERED", {
+    hasService: !!o,
+    isConnected: u
+  }), () => {
+    o && u ? (l(
+      "🧹 CLEANUP EFFECT TRIGGERED",
+      "Cleaning up connection on unmount"
+    ), I.current = null, o.disconnectUser().catch(console.error)) : l("🔇 CLEANUP EFFECT SKIPPED", {
+      hasService: !!o,
+      isConnected: u
+    });
+  }), [o, u, l]);
+  const S = U(async () => {
+    if (l("🔄 REFRESH CONNECTION CALLED", {
+      hasService: !!o,
+      hasUser: !!t
+    }), !o || !t) {
+      l("⚠️ REFRESH CONNECTION SKIPPED", "Missing service or user");
+      return;
+    }
+    l("🚀 STARTING CONNECTION REFRESH", { userId: t.id }), b(!0);
+    try {
+      l("🔌 DISCONNECTING FOR REFRESH"), await o.disconnectUser(), l("📞 RECONNECTING FOR REFRESH");
+      const T = await o.connectUser(t);
+      g(T), f(!0), v(null), l("✅ CONNECTION REFRESH SUCCESS", { userId: t.id });
+    } catch (T) {
+      const F = T instanceof Error ? T.message : "Refresh failed";
+      v(F), l("❌ CONNECTION REFRESH ERROR", {
+        userId: t.id,
+        error: F
+      });
+    } finally {
+      b(!1), l("🔄 CONNECTION REFRESH FINISHED", { userId: t.id });
+    }
+  }, [o, t, l]), D = P.useMemo(() => (l("💫 CONTEXT VALUE MEMOIZATION", {
+    hasService: !!o,
+    hasClient: !!h,
+    isConnected: u,
+    isLoading: c,
+    hasError: !!x,
+    capabilitiesKeys: Object.keys(r)
+  }), {
+    service: o,
+    client: h,
+    isConnected: u,
+    isLoading: c,
+    error: x,
+    capabilities: r,
+    refreshConnection: S,
+    debug: i
+  }), [
+    o,
+    h,
+    u,
+    c,
+    x,
+    r,
+    S,
+    i,
+    l
+  ]);
+  return l("🔄 RENDER END", {
+    renderCount: E.current,
+    willRenderChat: !!(h && u),
+    contextValueReady: !!D
+  }), /* @__PURE__ */ n(Wt.Provider, { value: D, children: h && u ? /* @__PURE__ */ n(
+    In,
+    {
+      client: h,
+      customClasses: {
+        channelList: "str-chat__channel-list str-chat__channel-list-react bg-transparent lg:border-r-2 border-r-0 border-[#0000000A]"
+      },
+      children: e
+    }
+  ) : e });
+}, Rs = () => et();
+function Ls(e) {
+  const t = e.state.pending_messages;
+  if (t != null && t.length)
+    for (const s of t)
+      e.state.addMessageSorted(s.message);
+}
+const qt = P.createContext({
+  selectedChannel: void 0,
+  onChannelSelect: () => {
+  },
+  debug: !1,
+  renderMessagePreview: void 0,
+  viewerLanguage: void 0
+}), Fs = qt.Provider, Os = () => P.useContext(qt), Xt = (e) => {
+  var a, r;
+  const [t, s] = z(
+    !!((r = (a = e == null ? void 0 : e.state) == null ? void 0 : a.membership) != null && r.pinned_at)
+  );
+  return X(() => {
+    var l;
+    if (!e) {
+      s(!1);
+      return;
+    }
+    s(!!((l = e.state.membership) != null && l.pinned_at));
+    const i = (o) => {
+      var d;
+      s(
+        o != null && o.member ? !!o.member.pinned_at : !!((d = e.state.membership) != null && d.pinned_at)
+      );
+    };
+    return e.on("member.updated", i), () => {
+      e.off("member.updated", i);
+    };
+  }, [e]), t;
+}, zs = (e, t) => {
+  const s = new Date(
+    Date.UTC(e.getUTCFullYear(), e.getUTCMonth(), e.getUTCDate())
+  ), r = new Date(
+    Date.UTC(t.getUTCFullYear(), t.getUTCMonth(), t.getUTCDate())
+  ).getTime() - s.getTime();
+  return Math.floor(r / (1e3 * 60 * 60 * 24));
+}, Ps = (e) => {
+  const t = /* @__PURE__ */ new Date();
+  if (Math.floor((t.getTime() - e.getTime()) / 1e3) < 60)
+    return "Just now";
+  const a = zs(e, t);
+  return a === 0 ? e.toLocaleTimeString([], {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: !0
+  }) : a === 1 ? "Yesterday" : a < 7 ? `${a}d` : a < 28 ? `${Math.floor(a / 7)}w` : e.toLocaleDateString("en-US", {
+    month: "numeric",
+    day: "numeric",
+    year: "2-digit"
+  });
+};
+function Bs(e) {
+  return (e == null ? void 0 : e.trim().toLowerCase().split(/[-_]/)[0]) || void 0;
+}
+function Zt({
+  message: e,
+  viewerLanguage: t
+}) {
+  var r;
+  const s = e == null ? void 0 : e.text, a = Bs(t);
+  return a ? ((r = e == null ? void 0 : e.i18n) == null ? void 0 : r[`${a}_text`]) ?? s : s;
+}
+const $s = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+function js(e) {
+  return $s.test(e.trim());
+}
+function Ot(e, t) {
+  const s = e == null ? void 0 : e.trim();
+  return !s || t && s === t ? !1 : !js(s);
+}
+function tt(e) {
+  return Ot(e == null ? void 0 : e.name, e == null ? void 0 : e.id) ? e.name.trim() : Ot(e == null ? void 0 : e.username, e == null ? void 0 : e.id) ? e.username.trim() : "Unknown member";
+}
+const zt = [
+  "🍎",
+  // Apple
+  "🍌",
+  // Banana
+  "🍇",
+  // Grape
+  "🍊",
+  // Orange
+  "🍓",
+  // Strawberry
+  "🥥",
+  // Coconut
+  "🍒",
+  // Cherry
+  "🥭",
+  // Mango
+  "🍉",
+  // Watermelon
+  "🍋",
+  // Lemon
+  "🥝",
+  // Kiwi
+  "🫒",
+  // Olive
+  "🍈"
+  // Melon
+];
+function Us(e) {
+  let t = 0;
+  for (let s = 0; s < e.length; s++) {
+    const a = e.charCodeAt(s);
+    t = (t << 5) - t + a, t = t & t;
+  }
+  return Math.abs(t);
+}
+function Vs(e) {
+  const s = Us(e) % zt.length;
+  return zt[s];
+}
+const oe = ({
+  id: e,
+  image: t,
+  size: s = 40,
+  className: a,
+  starred: r = !1,
+  shape: i = "squircle",
+  dmAgentEnabled: l = !1
+}) => {
+  const o = Vs(e), h = s < 32 ? "text-xs" : s < 56 ? "text-sm" : s < 120 ? "text-lg" : "text-4xl", g = s >= 40 ? 2 : 1, u = i === "circle" ? { borderRadius: "50%" } : {
+    borderRadius: "33%",
+    cornerShape: "superellipse(1.3)"
+  }, f = /* @__PURE__ */ n("div", { className: "h-full w-full overflow-hidden", style: u, children: t ? /* @__PURE__ */ n(
+    "img",
+    {
+      src: t,
+      alt: "",
+      className: "h-full w-full object-cover"
+    }
+  ) : /* @__PURE__ */ n(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: y(
+        "avatar-fallback flex h-full w-full items-center justify-center bg-[#E6E5E3] font-semibold select-none transition-colors",
+        h
+      ),
+      children: o
+    }
+  ) });
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: y(
+        "relative flex-shrink-0 !bg-transparent",
+        a
+      ),
+      style: {
+        "--str-chat__avatar-size": `${s}px`,
+        width: `${s}px`,
+        height: `${s}px`
+      },
+      children: [
+        r && /* @__PURE__ */ n(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "absolute -left-1.5 -top-1.5 z-10 flex size-5 items-center justify-center rounded-full bg-white shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]",
+            children: /* @__PURE__ */ n(Ge, { className: "size-3 text-yellow-600", weight: "duotone" })
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            "data-testid": "avatar-ring",
+            className: y(
+              "h-full w-full",
+              "bg-transparent"
+            ),
+            style: {
+              ...u,
+              ...l && {
+                borderWidth: `${g}px`,
+                borderStyle: "solid",
+                borderColor: "var(--AI-Gradient, #7F22FE)",
+                boxShadow: "inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)"
+              }
+            },
+            children: f
+          }
+        )
+      ]
+    }
+  );
+}, Gs = ({ size: e = 15 }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: e,
+    height: e,
+    viewBox: "0 0 15 15",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ n(
+      "path",
+      {
+        d: "M12.003 9a.985.985 0 0 1-.652.934l-3.223 1.191-1.188 3.226a.995.995 0 0 1-1.867 0l-1.195-3.226L.65 9.937a.995.995 0 0 1 0-1.867l3.227-1.195 1.187-3.226a.995.995 0 0 1 1.868 0l1.195 3.226 3.226 1.187a.99.99 0 0 1 .649.938m3-5.83a.52.52 0 0 1-.344.492l-1.702.63-.627 1.703a.525.525 0 0 1-.986 0l-.63-1.704-1.704-.627a.525.525 0 0 1 0-.986l1.703-.63.627-1.704a.526.526 0 0 1 .986 0l.631 1.703 1.704.627a.52.52 0 0 1 .342.495",
+        fill: "currentColor",
+        fillOpacity: 0.55
+      }
+    )
+  }
+), Hs = (e) => {
+  var t;
+  return ((t = e.metadata) == null ? void 0 : t.custom_type) === "MESSAGE_TIP";
+}, Ys = (e) => {
+  var t;
+  return ((t = e.metadata) == null ? void 0 : t.custom_type) === "MESSAGE_PAID";
+}, Me = (e) => {
+  var t;
+  return ((t = e.metadata) == null ? void 0 : t.custom_type) === "MESSAGE_CHATBOT";
+}, Ws = (e) => {
+  var t;
+  return ((t = e.metadata) == null ? void 0 : t.custom_type) === "MESSAGE_ATTACHMENT";
+}, Kt = (e) => Hs(e) || Ys(e), qs = (e) => {
+  var t;
+  return Kt(e) && !((t = e.text) != null && t.trim());
+}, $e = ({
+  message: e,
+  standalone: t = !1,
+  isMyMessage: s = !1,
+  hasAttachment: a = !1
+}) => {
+  var u;
+  const r = Kt(e), i = Me(e);
+  if (!r && !i)
+    return null;
+  if (r) {
+    const f = (u = e.metadata) == null ? void 0 : u.amount_text;
+    if (!f) return null;
+    const c = t ? "message-tip-standalone" : "message-tag message-tag--tip", b = t ? `${f} tip` : `Delivered with ${f} tip`;
+    return /* @__PURE__ */ m("div", { className: c, children: [
+      /* @__PURE__ */ n(us, { size: t ? 14 : 12 }),
+      /* @__PURE__ */ n("span", { children: b })
+    ] });
+  }
+  const l = s && a, o = l ? "Sent with AI" : "Sent with DM Agent", d = [
+    "message-chatbot-indicator",
+    s ? "message-chatbot-indicator--sender" : "message-chatbot-indicator--receiver",
+    l ? "message-chatbot-indicator--attachment" : "message-chatbot-indicator--text"
+  ].join(" "), h = /* @__PURE__ */ n("span", { className: "message-chatbot-indicator__label", children: o }), g = /* @__PURE__ */ n("span", { className: "message-chatbot-indicator__icon", children: /* @__PURE__ */ n(Gs, { size: l ? 12 : 15 }) });
+  return /* @__PURE__ */ n("div", { className: d, "data-testid": "message-chatbot-indicator", children: s && !l ? /* @__PURE__ */ m(ie, { children: [
+    h,
+    g
+  ] }) : /* @__PURE__ */ m(ie, { children: [
+    g,
+    h
+  ] }) });
+}, Jt = P.memo(
+  ({ channel: e, unread: t }) => {
+    var D, T, F;
+    const {
+      selectedChannel: s,
+      onChannelSelect: a,
+      debug: r,
+      renderMessagePreview: i,
+      viewerLanguage: l
+    } = Os(), o = (s == null ? void 0 : s.id) === (e == null ? void 0 : e.id), d = () => {
+      e && a(e);
+    }, h = (M) => {
+      const R = M.key === "Enter" || M.key === " ", A = M.repeat;
+      !R || A || (M.preventDefault(), d());
+    }, u = Object.values(((D = e == null ? void 0 : e.state) == null ? void 0 : D.members) || {}).find(
+      (M) => {
+        var R, A;
+        return ((R = M.user) == null ? void 0 : R.id) && M.user.id !== ((A = e == null ? void 0 : e._client) == null ? void 0 : A.userID);
+      }
+    ), f = tt(u == null ? void 0 : u.user), c = (T = u == null ? void 0 : u.user) == null ? void 0 : T.image, b = (() => {
+      var R;
+      const M = (R = e == null ? void 0 : e.state) == null ? void 0 : R.messages;
+      if (M != null && M.length) {
+        for (let A = M.length - 1; A >= 0; A--)
+          if (M[A].type !== "system") return M[A];
+      }
+    })(), v = (() => {
+      var G, k;
+      const M = Zt({
+        message: b,
+        viewerLanguage: l
+      });
+      if (M) return M;
+      if (((G = b == null ? void 0 : b.metadata) == null ? void 0 : G.custom_type) === "MESSAGE_TIP") return "💵 Sent a tip";
+      const A = (k = b == null ? void 0 : b.attachments) == null ? void 0 : k[0];
+      return A ? A.og_scrape_url ? A.og_scrape_url : A.type === "image" ? "📷 Sent an image" : A.type === "video" ? "🎥 Sent a video" : A.type === "audio" ? "🎵 Sent audio" : A.type === "file" ? "📎 Sent a file" : "📎 Sent an attachment" : "No messages yet";
+    })(), N = b != null && b.created_at ? Ps(new Date(b.created_at)) : "", w = b ? Me(b) : !1, E = i ? i(b, v) : `${w ? "✨ " : ""}${v}`, I = Xt(e), S = t ?? 0;
+    return r && console.log("📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER", {
+      channelId: e == null ? void 0 : e.id,
+      isSelected: o,
+      participantName: f,
+      unreadCount: S,
+      hasTimestamp: !!N
+    }), /* @__PURE__ */ n(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick: d,
+        onKeyDown: h,
+        className: y(
+          "group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring",
+          {
+            "bg-primary-alt/10 border-l-4 border-l-primary": o,
+            "hover:bg-sand": !o
+          }
+        ),
+        children: /* @__PURE__ */ m("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ n(
+            oe,
+            {
+              id: ((F = u == null ? void 0 : u.user) == null ? void 0 : F.id) || e.id || "unknown",
+              name: f,
+              image: c,
+              size: 44,
+              starred: I,
+              className: "[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
+            }
+          ),
+          /* @__PURE__ */ m("div", { className: "flex-1 min-w-0 flex flex-col gap-1", children: [
+            /* @__PURE__ */ m("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ m(
+                "h3",
+                {
+                  className: y(
+                    "text-sm font-medium truncate",
+                    o ? "text-primary" : "text-charcoal"
+                  ),
+                  children: [
+                    I && /* @__PURE__ */ n("span", { className: "sr-only", children: "Starred conversation. " }),
+                    f
+                  ]
+                }
+              ),
+              N && /* @__PURE__ */ n("span", { className: "text-xs text-stone flex-shrink-0", children: N })
+            ] }),
+            /* @__PURE__ */ m("div", { className: "flex items-center justify-between gap-2 min-w-0", children: [
+              /* @__PURE__ */ n("p", { className: "text-xs text-stone flex-1 line-clamp-1", children: E }),
+              S > 0 && /* @__PURE__ */ n("span", { className: "bg-[#7f22fe] text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0", children: S > 99 ? "99+" : S })
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+Jt.displayName = "CustomChannelPreview";
+const Xs = { last_message_at: -1 }, Qt = P.memo(
+  ({
+    onChannelSelect: e,
+    selectedChannel: t,
+    filters: s,
+    allowNewMessagesFromUnfilteredChannels: a = !1,
+    onMessageNew: r,
+    onAddedToChannel: i,
+    channelRenderFilterFn: l,
+    sort: o = Xs,
+    className: d,
+    customEmptyStateIndicator: h,
+    renderMessagePreview: g,
+    viewerLanguage: u
+  }) => {
+    const f = P.useRef(0);
+    f.current++;
+    const { debug: c = !1 } = et(), b = P.useCallback(
+      (v) => {
+        for (const N of v)
+          Ls(N);
+        return l ? l(v) : v;
+      },
+      [l]
+    );
+    c && console.log("📺 [ChannelList] 🔄 RENDER START", {
+      renderCount: f.current,
+      selectedChannelId: t == null ? void 0 : t.id,
+      filters: s
+    });
+    const x = P.useMemo(
+      () => ({
+        selectedChannel: t,
+        onChannelSelect: e,
+        debug: c,
+        renderMessagePreview: g,
+        viewerLanguage: u
+      }),
+      [
+        t,
+        e,
+        c,
+        g,
+        u
+      ]
+    );
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        className: y(
+          "messaging-channel-list h-full flex flex-col min-w-0 overflow-hidden",
+          d
+        ),
+        children: /* @__PURE__ */ n("div", { className: "flex-1 overflow-hidden min-w-0", children: /* @__PURE__ */ n(Fs, { value: x, children: /* @__PURE__ */ n(
+          Sn,
+          {
+            filters: s,
+            sort: o,
+            options: { limit: 30 },
+            allowNewMessagesFromUnfilteredChannels: a,
+            onMessageNew: r,
+            onAddedToChannel: i,
+            channelRenderFilterFn: b,
+            Preview: Jt,
+            EmptyStateIndicator: h
+          },
+          `${JSON.stringify(s)}:${JSON.stringify(o)}`
+        ) }) })
+      }
+    );
+  }
+);
+Qt.displayName = "ChannelList";
+const Se = ({
+  variant: e = "default",
+  className: t,
+  children: s,
+  ...a
+}) => /* @__PURE__ */ n(
+  "button",
+  {
+    type: "button",
+    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
+    ),
+    ...a,
+    children: s
+  }
+);
+function Zs({ label: e, className: t, children: s, ...a }) {
+  return /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      className: y(
+        "inline-flex items-center justify-center rounded-full transition-colors focus-ring p-2",
+        {
+          "cursor-not-allowed opacity-50": a.disabled,
+          "hover:bg-sand": !a.disabled
+        },
+        t
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ n("span", { className: "sr-only", children: e }),
+        s
+      ]
+    }
+  );
+}
+function Ks({ onClick: e }) {
+  return /* @__PURE__ */ n(Zs, { label: "Close", onClick: e, className: "p-1", children: /* @__PURE__ */ n(xe, { className: "h-5 w-5 text-stone", weight: "bold" }) });
+}
+const Js = ({
+  dialogRef: e,
+  onClose: t,
+  participant: s,
+  participantDisplayName: a,
+  channel: r,
+  followerStatusLabel: i,
+  onLeaveConversation: l,
+  onBlockParticipant: o,
+  showDeleteConversation: d = !0,
+  onDeleteConversationClick: h,
+  onBlockParticipantClick: g,
+  onReportParticipantClick: u,
+  customProfileContent: f,
+  customChannelActions: c
+}) => {
+  var V, $, L, Y;
+  const { service: b, debug: x } = et(), [v, N] = z(!1), [w, E] = z(!1), [I, S] = z(!1), D = U(async () => {
+    var _;
+    if (!(!b || !((_ = s == null ? void 0 : s.user) != null && _.id)))
+      try {
+        const p = (await b.getBlockedUsers()).some(
+          (C) => {
+            var H;
+            return C.blocked_user_id === ((H = s == null ? void 0 : s.user) == null ? void 0 : H.id);
+          }
+        );
+        N(p);
+      } catch (O) {
+        console.error(
+          "[ChannelInfoDialog] Failed to check blocked status:",
+          O
+        );
+      }
+  }, [b, (V = s == null ? void 0 : s.user) == null ? void 0 : V.id]);
+  X(() => {
+    D();
+  }, [D]);
+  const T = async () => {
+    var _;
+    if (!w) {
+      h == null || h(), x && console.log("[ChannelInfoDialog] Leave conversation", r.cid), E(!0);
+      try {
+        const O = ((_ = r._client) == null ? void 0 : _.userID) ?? null;
+        await r.hide(O, !1), l && await l(r), t();
+      } catch (O) {
+        console.error("[ChannelInfoDialog] Failed to leave conversation", O);
+      } finally {
+        E(!1);
+      }
+    }
+  }, F = async () => {
+    var _, O, p;
+    if (!(I || !b)) {
+      g == null || g(), x && console.log("[ChannelInfoDialog] Block member", (_ = s == null ? void 0 : s.user) == null ? void 0 : _.id), S(!0);
+      try {
+        await b.blockUser((O = s == null ? void 0 : s.user) == null ? void 0 : O.id), o && await o((p = s == null ? void 0 : s.user) == null ? void 0 : p.id), t();
+      } catch (C) {
+        console.error("[ChannelInfoDialog] Failed to block member", C);
+      } finally {
+        S(!1);
+      }
+    }
+  }, M = async () => {
+    var _, O, p;
+    if (!(I || !b)) {
+      g == null || g(), x && console.log("[ChannelInfoDialog] Unblock member", (_ = s == null ? void 0 : s.user) == null ? void 0 : _.id), S(!0);
+      try {
+        await b.unBlockUser((O = s == null ? void 0 : s.user) == null ? void 0 : O.id), o && await o((p = s == null ? void 0 : s.user) == null ? void 0 : p.id), t();
+      } catch (C) {
+        console.error("[ChannelInfoDialog] Failed to unblock member", C);
+      } finally {
+        S(!1);
+      }
+    }
+  }, R = () => {
+    u == null || u(), t(), window.open(
+      "https://linktr.ee/s/about/trust-center/report",
+      "_blank",
+      "noopener,noreferrer"
+    );
+  };
+  if (!s) return null;
+  const A = a ?? tt(s.user), G = ($ = s.user) == null ? void 0 : $.image, k = (L = s.user) == null ? void 0 : L.username, j = k ? `linktr.ee/${k}` : void 0, W = ((Y = s.user) == null ? void 0 : Y.id) || "unknown";
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ n(
+      "dialog",
+      {
+        ref: e,
+        className: "mes-dialog group",
+        onClose: t,
+        onClick: (_) => {
+          _.target === e.current && t();
+        },
+        children: /* @__PURE__ */ m("div", { className: "ml-auto flex h-full w-full flex-col bg-white shadow-none transition-shadow duration-200 group-open:shadow-max-elevation-light", children: [
+          /* @__PURE__ */ m("div", { className: "flex items-center justify-between border-b border-sand px-4 py-3", children: [
+            /* @__PURE__ */ n("h2", { className: "text-base font-semibold text-charcoal", children: "Chat info" }),
+            /* @__PURE__ */ n(Ks, { onClick: t })
+          ] }),
+          /* @__PURE__ */ m("div", { className: "flex-1 px-2 overflow-y-auto w-full", children: [
+            /* @__PURE__ */ m(
+              "div",
+              {
+                className: "flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]",
+                style: { backgroundColor: "#FBFAF9" },
+                children: [
+                  /* @__PURE__ */ m("div", { className: "flex items-center gap-3 w-full", children: [
+                    /* @__PURE__ */ n(
+                      oe,
+                      {
+                        id: W,
+                        name: A,
+                        image: G,
+                        size: 88,
+                        shape: "circle"
+                      }
+                    ),
+                    /* @__PURE__ */ m("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                      /* @__PURE__ */ n("p", { className: "truncate text-base font-semibold text-charcoal", children: A }),
+                      j && /* @__PURE__ */ n("p", { className: "truncate text-sm text-[#00000055]", children: j }),
+                      i && !f && /* @__PURE__ */ n(
+                        "span",
+                        {
+                          className: "mt-1 rounded-full text-xs font-normal w-fit",
+                          style: {
+                            padding: "4px 8px",
+                            backgroundColor: i === "Subscribed to you" ? "#DCFCE7" : "#F5F5F4",
+                            color: i === "Subscribed to you" ? "#008236" : "#78716C",
+                            lineHeight: "133.333%",
+                            letterSpacing: "0.21px"
+                          },
+                          children: i
+                        }
+                      )
+                    ] })
+                  ] }),
+                  f && /* @__PURE__ */ n("div", { className: "w-full", children: f })
+                ]
+              }
+            ),
+            /* @__PURE__ */ m("ul", { className: "flex flex-col gap-2 mt-2", children: [
+              d && /* @__PURE__ */ n("li", { children: /* @__PURE__ */ m(
+                Se,
+                {
+                  onClick: T,
+                  disabled: w,
+                  "aria-busy": w,
+                  children: [
+                    w ? /* @__PURE__ */ n(Be, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ n(ms, { className: "h-5 w-5" }),
+                    /* @__PURE__ */ n("span", { children: "Delete Conversation" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ n("li", { children: v ? /* @__PURE__ */ m(
+                Se,
+                {
+                  onClick: M,
+                  disabled: I,
+                  "aria-busy": I,
+                  children: [
+                    I ? /* @__PURE__ */ n(Be, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ n(Dt, { className: "h-5 w-5" }),
+                    /* @__PURE__ */ n("span", { children: "Unblock" })
+                  ]
+                }
+              ) : /* @__PURE__ */ m(
+                Se,
+                {
+                  onClick: F,
+                  disabled: I,
+                  "aria-busy": I,
+                  children: [
+                    I ? /* @__PURE__ */ n(Be, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ n(Dt, { className: "h-5 w-5" }),
+                    /* @__PURE__ */ n("span", { children: "Block" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ n("li", { children: /* @__PURE__ */ m(Se, { variant: "danger", onClick: R, children: [
+                /* @__PURE__ */ n(hs, { className: "h-5 w-5" }),
+                /* @__PURE__ */ n("span", { children: "Report" })
+              ] }) }),
+              c
+            ] })
+          ] })
+        ] })
+      }
+    )
+  );
+}, Qs = (e) => /* @__PURE__ */ n(Tn, { ...e, position: "center" }), qe = "vote_up", Xe = "vote_down";
+function ea(e) {
+  return e != null && e.length ? e.some((t) => t.type === Xe) ? "down" : e.some((t) => t.type === qe) ? "up" : null : null;
+}
+function ta(e) {
+  const { channel: t } = me(), { client: s } = Qe("useMessageVote"), a = re(
+    () => ea(e.own_reactions),
+    [e.own_reactions]
+  ), r = U(async () => {
+    if (s != null && s.userID)
+      try {
+        a === "up" ? await t.deleteReaction(e.id, qe) : await t.sendReaction(
+          e.id,
+          { type: qe },
+          { enforce_unique: !0, skip_push: !0 }
+        );
+      } catch {
+      }
+  }, [t, s == null ? void 0 : s.userID, e.id, a]), i = U(async () => {
+    if (s != null && s.userID)
+      try {
+        a === "down" ? await t.deleteReaction(e.id, Xe) : await t.sendReaction(
+          e.id,
+          { type: Xe },
+          { enforce_unique: !0, skip_push: !0 }
+        );
+      } catch {
+      }
+  }, [t, s == null ? void 0 : s.userID, e.id, a]);
+  return { selected: a, voteUp: r, voteDown: i };
+}
+const na = P.lazy(() => import("./Card-DNlAktyj.js")), sa = P.lazy(() => import("./Card-CwnMzWRr.js")), aa = P.lazy(() => import("./Card-Ct_Vj2M-.js")), nt = () => /* @__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)]",
+    "aria-hidden": !0
+  }
+), ra = (e) => /* @__PURE__ */ n(Je, { fallback: /* @__PURE__ */ n(nt, {}), children: /* @__PURE__ */ n(na, { ...e }) }), en = (e) => /* @__PURE__ */ n(Je, { fallback: /* @__PURE__ */ n(nt, {}), children: /* @__PURE__ */ n(sa, { ...e }) }), tn = (e) => /* @__PURE__ */ n(Je, { fallback: /* @__PURE__ */ n(nt, {}), children: /* @__PURE__ */ n(aa, { ...e }) }), ia = en, oa = tn, Pt = { Composer: ra, Sent: en, Received: tn, Creator: ia, Visitor: oa }, la = [
+  [/pdf/, "pdf"],
+  [/wordprocessingml|msword|\.doc/, "doc"],
+  [/spreadsheetml|ms-excel|\.xls/, "xls"],
+  [/csv/, "csv"],
+  [/presentationml|ms-powerpoint|\.ppt/, "ppt"],
+  [/zip|x-rar|x-7z|x-tar|x-gzip/, "zip"],
+  [/plain|rtf/, "text"],
+  [/markdown/, "markdown"]
+];
+function le(e) {
+  return e.startsWith("video/") ? "video" : e.startsWith("audio/") ? "audio" : e.startsWith("image/") ? "image" : "document";
+}
+function nn(e) {
+  const t = la.find(
+    ([s]) => s.test(e)
+  );
+  return t ? t[1] : "generic";
+}
+const ca = {
+  video: Ht,
+  audio: gs,
+  image: fs,
+  document: Gt
+}, da = {
+  pdf: _s,
+  doc: ys,
+  xls: Ns,
+  csv: ws,
+  ppt: xs,
+  zip: vs,
+  text: ps,
+  markdown: bs,
+  generic: Gt
+};
+function ua(e) {
+  const t = le(e);
+  return t !== "document" ? ca[t] : da[nn(e)];
+}
+function ge(e, t) {
+  return P.createElement(ua(e), t);
+}
+const ma = (e) => {
+  var t, s;
+  return "touches" in e ? ((t = e.touches[0]) == null ? void 0 : t.clientX) ?? ((s = e.changedTouches[0]) == null ? void 0 : s.clientX) ?? 0 : e.clientX;
+}, ha = ({
+  source: e,
+  mimeType: t,
+  poster: s,
+  autoPlay: a = !1,
+  playing: r,
+  loop: i = !1,
+  controls: l = !0,
+  showProgress: o = !1,
+  muted: d = !1,
+  onContainerClick: h
+}) => {
+  const g = le(t), u = Z(null), f = Z(null), c = Z(null), b = Z(r), [x, v] = z(a), [N, w] = z(0), [E, I] = z(!1), [S, D] = z(!1), [T, F] = z(!1), [M, R] = z(!1), [A, G] = z(!0), [k, j] = z(null), W = U(() => {
+    F(!1), v(!0);
+  }, []), V = U((p) => {
+    const C = f.current;
+    if (!C) return 0;
+    const H = C.getBoundingClientRect();
+    return Math.max(
+      0,
+      Math.min(1, (ma(p) - H.left) / H.width)
+    );
+  }, []), $ = U((p) => {
+    const C = u.current;
+    C && C.duration && (C.currentTime = p * C.duration);
+  }, []), L = (p) => {
+    p.stopPropagation(), I(!0);
+    const C = V(p);
+    w(C), $(C);
+  };
+  X(() => {
+    r !== void 0 && r !== b.current && (b.current = r, v(r));
+  }, [r]), X(() => {
+    if (!x) {
+      c.current !== null && (cancelAnimationFrame(c.current), c.current = null);
+      return;
+    }
+    const p = () => {
+      const C = u.current;
+      C && C.duration && !E && w(C.currentTime / C.duration), c.current = requestAnimationFrame(p);
+    };
+    return c.current = requestAnimationFrame(p), () => {
+      c.current !== null && cancelAnimationFrame(c.current);
+    };
+  }, [x, E]), X(() => {
+    const p = u.current;
+    p && (x ? p.play().catch((C) => {
+      v(!1), F(!0);
+    }) : p.pause());
+  }, [x]), X(() => {
+    if (!E) return;
+    const p = (H) => w(V(H)), C = (H) => {
+      I(!1), $(V(H));
+    };
+    return window.addEventListener("mousemove", p), window.addEventListener("mouseup", C), window.addEventListener("touchmove", p, { passive: !0 }), window.addEventListener("touchend", C), () => {
+      window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", C), window.removeEventListener("touchmove", p), window.removeEventListener("touchend", C);
+    };
+  }, [E, V, $]);
+  const Y = k ? { aspectRatio: String(k) } : void 0, _ = k ? "" : " aspect-video", O = Math.round(N * 100);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      className: `relative cursor-pointer overflow-hidden bg-black ${_}`,
+      style: Y,
+      onClick: (p) => {
+        if (h) {
+          h(p);
+          return;
+        }
+        T || l && v((C) => !C);
+      },
+      onKeyDown: (p) => {
+        if (!(p.key !== "Enter" && p.key !== " ")) {
+          if (p.preventDefault(), h) {
+            h(p);
+            return;
+          }
+          T || l && v((C) => !C);
+        }
+      },
+      children: [
+        s && (g === "audio" || A) && /* @__PURE__ */ n(
+          "img",
+          {
+            src: s,
+            alt: "",
+            className: "absolute inset-0 h-full w-full object-cover"
+          }
+        ),
+        !s && (g === "audio" || A) && /* @__PURE__ */ n("div", { className: "absolute inset-0 flex items-center justify-center", children: ge(t, {
+          className: "size-12 text-black/20",
+          weight: "regular"
+        }) }),
+        /* @__PURE__ */ n("div", { className: "absolute inset-0", children: g === "audio" ? /* @__PURE__ */ n(
+          "audio",
+          {
+            ref: u,
+            src: e,
+            loop: i,
+            muted: d,
+            style: { width: "100%", height: "100%" },
+            onLoadStart: () => R(!0),
+            onCanPlay: () => {
+              R(!1), G(!1);
+            },
+            onWaiting: () => R(!0),
+            onPlay: () => F(!1),
+            onEnded: () => {
+              i || (v(!1), w(0));
+            },
+            children: /* @__PURE__ */ n("track", { kind: "captions" })
+          }
+        ) : /* @__PURE__ */ n(
+          "video",
+          {
+            ref: u,
+            src: e,
+            loop: i,
+            muted: d,
+            playsInline: !0,
+            style: { width: "100%", height: "100%" },
+            onLoadStart: () => R(!0),
+            onCanPlay: () => {
+              R(!1), G(!1);
+            },
+            onWaiting: () => R(!0),
+            onPlay: () => F(!1),
+            onLoadedMetadata: () => {
+              const p = u.current;
+              p instanceof HTMLVideoElement && p.videoWidth && p.videoHeight && j(p.videoWidth / p.videoHeight);
+            },
+            onEnded: () => {
+              i || (v(!1), w(0));
+            },
+            children: /* @__PURE__ */ n("track", { kind: "captions" })
+          }
+        ) }),
+        M && !T && /* @__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",
+            weight: "bold"
+          }
+        ) }),
+        T && !l && /* @__PURE__ */ n(
+          "div",
+          {
+            className: "absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black/35",
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Play preview",
+            onClick: (p) => {
+              p.stopPropagation(), W();
+            },
+            onKeyDown: (p) => {
+              p.key !== "Enter" && p.key !== " " || (p.preventDefault(), p.stopPropagation(), W());
+            },
+            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(He, { className: "size-9 translate-x-0.5", weight: "fill" }) })
+          }
+        ),
+        o && !l && /* @__PURE__ */ n("div", { className: "absolute inset-x-0 bottom-0 px-3 pb-2.5 pt-6 bg-gradient-to-t from-black/40 to-transparent", children: /* @__PURE__ */ n(
+          "div",
+          {
+            role: "slider",
+            "aria-label": "Playback position",
+            "aria-valuenow": O,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            tabIndex: 0,
+            ref: f,
+            className: "relative flex h-4 w-full cursor-pointer items-center",
+            onMouseDown: L,
+            onTouchStart: L,
+            onClick: (p) => p.stopPropagation(),
+            onKeyDown: (p) => {
+              p.key === "ArrowRight" && $(Math.min(1, N + 0.05)), p.key === "ArrowLeft" && $(Math.max(0, N - 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: `${O}%` }
+              }
+            ) })
+          }
+        ) }),
+        l && /* @__PURE__ */ m("div", { className: "absolute inset-x-0 bottom-0 flex items-center gap-2 bg-gradient-to-t from-black/60 to-transparent px-3 pb-2.5 pt-6 transition-all duration-200", children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: (p) => {
+                p.stopPropagation(), v((C) => !C);
+              },
+              className: "shrink-0 text-white",
+              "aria-label": x ? "Pause" : "Play",
+              children: x ? /* @__PURE__ */ n(Cs, { className: "size-5", weight: "fill" }) : /* @__PURE__ */ n(He, { className: "size-5 translate-x-px", weight: "fill" })
+            }
+          ),
+          /* @__PURE__ */ m(
+            "div",
+            {
+              role: "slider",
+              "aria-label": "Playback position",
+              "aria-valuenow": O,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              tabIndex: 0,
+              ref: f,
+              className: "relative flex h-4 w-full cursor-pointer items-center",
+              onMouseDown: L,
+              onTouchStart: L,
+              onClick: (p) => p.stopPropagation(),
+              onMouseEnter: () => D(!0),
+              onMouseLeave: () => D(!1),
+              onKeyDown: (p) => {
+                p.key === "ArrowRight" && $(Math.min(1, N + 0.05)), p.key === "ArrowLeft" && $(Math.max(0, N - 0.05));
+              },
+              children: [
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: `w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${S || E ? "h-1.5" : "h-1"}`,
+                    children: /* @__PURE__ */ n(
+                      "div",
+                      {
+                        className: "h-full rounded-full bg-white",
+                        style: { width: `${O}%` }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: `absolute size-3 -translate-x-1/2 rounded-full bg-white shadow transition-[opacity,transform] duration-200 ${S || E ? "scale-100 opacity-100" : "scale-0 opacity-0"}`,
+                    style: { left: `${O}%` }
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, Bt = (e) => e === "dark" ? "size-12 text-white/20" : "size-12 text-black/20", fa = (e) => e === "dark" ? "aspect-video overflow-hidden bg-white/10" : "aspect-video overflow-hidden bg-black/5", sn = ({
+  mimeType: e,
+  sourceUrl: t,
+  thumbnailUrl: s,
+  title: a,
+  variant: r,
+  mediaPlayerProps: i,
+  containedImage: l = !1
+}) => {
+  const o = le(e), [d, h] = z(!1);
+  return t && (o === "video" || o === "audio") ? /* @__PURE__ */ n(
+    ha,
+    {
+      source: t,
+      mimeType: e,
+      poster: s,
+      controls: !0,
+      ...i
+    }
+  ) : t && o === "image" ? l ? /* @__PURE__ */ n("div", { className: "relative aspect-video overflow-hidden bg-black/5", children: /* @__PURE__ */ n(
+    "img",
+    {
+      src: t,
+      alt: a ?? "",
+      className: `absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${d ? "opacity-100" : "opacity-0"}`,
+      draggable: !1,
+      onLoad: () => h(!0)
+    }
+  ) }) : /* @__PURE__ */ n(
+    "img",
+    {
+      src: t,
+      alt: a ?? "",
+      className: "block w-full",
+      draggable: !1
+    }
+  ) : t && o === "document" ? s ? l ? /* @__PURE__ */ n("div", { className: "relative aspect-video overflow-hidden bg-black/5", children: /* @__PURE__ */ n(
+    "img",
+    {
+      src: s,
+      alt: a ?? "",
+      className: `absolute inset-0 h-full w-full object-contain transition-opacity duration-300 ${d ? "opacity-100" : "opacity-0"}`,
+      draggable: !1,
+      onLoad: () => h(!0)
+    }
+  ) }) : /* @__PURE__ */ n(
+    "img",
+    {
+      src: s,
+      alt: "",
+      className: "block w-full",
+      draggable: !1
+    }
+  ) : /* @__PURE__ */ n(
+    "div",
+    {
+      className: `flex aspect-video w-full items-center justify-center ${r === "dark" ? "bg-white/10" : "bg-black/5"}`,
+      children: ge(e, {
+        className: Bt(r),
+        weight: "regular"
+      })
+    }
+  ) : s ? /* @__PURE__ */ n("div", { className: `relative ${fa(r)}`, children: /* @__PURE__ */ n(
+    "img",
+    {
+      src: s,
+      alt: a ?? "",
+      draggable: !1,
+      className: "absolute inset-0 h-full w-full object-cover"
+    }
+  ) }) : /* @__PURE__ */ n(
+    "div",
+    {
+      className: `flex aspect-video w-full items-center justify-center ${r === "dark" ? "bg-white/10" : "bg-black/5"}`,
+      children: ge(e, {
+        className: Bt(r),
+        weight: "regular"
+      })
+    }
+  );
+}, an = ({
+  variant: e,
+  thumbnail: t,
+  title: s,
+  placeholderTitle: a = "Attachment title",
+  mimeType: r,
+  detail: i,
+  statusBadge: l,
+  action: o,
+  topLeft: d,
+  topRight: h,
+  rootRef: g,
+  "data-testid": u
+}) => {
+  const f = e === "dark", c = f ? s ?? a : s ?? "", b = f && !s;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: g,
+      "data-testid": u,
+      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"
+      ),
+      children: [
+        d ? /* @__PURE__ */ n("div", { className: "pointer-events-auto absolute left-3 top-3 z-50", children: d }) : null,
+        h ? /* @__PURE__ */ n("div", { className: "pointer-events-auto absolute right-3 top-3 z-50", children: h }) : null,
+        t,
+        /* @__PURE__ */ m("div", { className: "px-4 pb-3 pt-3", children: [
+          c.trim() !== "" && /* @__PURE__ */ n(
+            "p",
+            {
+              className: y("mb-0.5 truncate text-base font-medium", {
+                "text-black": !f,
+                "text-white/30": f && b,
+                "text-white": f && !b
+              }),
+              children: c
+            }
+          ),
+          /* @__PURE__ */ m("div", { className: "flex flex-wrap items-center gap-1", children: [
+            ge(r, {
+              className: y(
+                "size-5 shrink-0",
+                f ? "text-white/55" : "text-black/55"
+              ),
+              weight: "regular"
+            }),
+            i != null && i !== "" && /* @__PURE__ */ n(
+              "span",
+              {
+                className: y(
+                  "text-xs font-medium",
+                  f ? "text-white/55" : "text-black/55"
+                ),
+                children: i
+              }
+            ),
+            l
+          ] }),
+          o
+        ] })
+      ]
+    }
+  );
+};
+function rn(e) {
+  return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
+}
+function st(e) {
+  return `w-[280px] select-none overflow-hidden rounded-[24px] ${e ? "bg-[#121110]" : "bg-[#F3F3F1]"} shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_4px_8px_rgba(0,0,0,0.06)]`;
+}
+function ga(e) {
+  return e ? "bg-white/10" : "bg-black/5";
+}
+function ba(e) {
+  return e ? "text-white" : "text-black";
+}
+function pa(e) {
+  return e ? "text-white/55" : "text-black/55";
+}
+function va(e) {
+  return e ? "text-white/40" : "text-black/40";
+}
+function xa(e) {
+  return e ? "text-white/20" : "text-black/20";
+}
+const at = ({ attachment: e, isMyMessage: t }) => {
+  const { title: s, text: a, image_url: r, og_scrape_url: i, title_link: l } = e, o = i ?? l, d = typeof o == "string" && o.trim() !== "" ? o : void 0, h = /* @__PURE__ */ m(P.Fragment, { children: [
+    /* @__PURE__ */ n("div", { className: "p-2", children: r ? /* @__PURE__ */ n(
+      "img",
+      {
+        src: r,
+        alt: s ?? "",
+        className: "aspect-video w-full rounded-[20px] object-cover"
+      }
+    ) : /* @__PURE__ */ n(
+      "div",
+      {
+        className: `aspect-video w-full rounded-[20px] ${ga(t)} flex items-center justify-center`,
+        children: /* @__PURE__ */ n(ks, { className: `size-12 ${xa(t)}` })
+      }
+    ) }),
+    /* @__PURE__ */ m("div", { className: "px-3 pb-3", children: [
+      s && /* @__PURE__ */ n("p", { className: `truncate text-[14px] font-medium leading-5 ${ba(t)}`, children: s }),
+      a && /* @__PURE__ */ n("p", { className: `truncate text-[12px] leading-4 ${pa(t)}`, children: a }),
+      d && /* @__PURE__ */ n("p", { className: `mt-1 truncate text-[12px] leading-4 ${va(t)}`, children: d })
+    ] })
+  ] });
+  return d ? /* @__PURE__ */ n("a", { href: d, target: "_blank", rel: "noopener noreferrer", className: "block no-underline", children: h }) : /* @__PURE__ */ n("div", { className: "block", children: h });
+};
+function on(e) {
+  return e.type === "link" || !!e.og_scrape_url && !e.asset_url;
+}
+function rt(e) {
+  var t;
+  return (t = e.attachments) == null ? void 0 : t.find(on);
+}
+async function wa(e, t) {
+  let s;
+  try {
+    s = t ?? new URL(e).pathname.split("/").pop() ?? "download";
+  } catch {
+    s = t ?? "download";
+  }
+  const a = await fetch(e, { mode: "cors" });
+  if (!a.ok) throw new Error(`HTTP ${a.status}`);
+  const r = await a.blob(), i = URL.createObjectURL(r), l = document.createElement("a");
+  l.href = i, l.download = s, l.style.display = "none", document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(i);
+}
+const Na = ({
+  url: e,
+  filename: t
+}) => {
+  const [s, a] = z(!1);
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: (i) => {
+        i.stopPropagation();
+        const l = window.open("", "_blank", "noopener,noreferrer");
+        a(!0), wa(e, t).then(() => {
+          l == null || l.close();
+        }).catch(() => {
+          l && (l.location.href = e);
+        }).finally(() => a(!1));
+      },
+      disabled: s,
+      className: "mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70",
+      children: s ? /* @__PURE__ */ n(pe, { className: "size-4 animate-spin text-white", weight: "bold" }) : /* @__PURE__ */ m(P.Fragment, { children: [
+        /* @__PURE__ */ n(ve, { className: "size-4 text-white", weight: "bold" }),
+        "Download"
+      ] })
+    }
+  );
+};
+function it(e) {
+  var u, f, c, b;
+  const t = (u = e.attachments) == null ? void 0 : u.find(
+    (x) => x.type === "video" && x.asset_url
+  ), s = (f = e.attachments) == null ? void 0 : f.find(
+    (x) => x.type === "image" && x.image_url
+  ), a = (c = e.attachments) == null ? void 0 : c.find(
+    (x) => x.type === "audio" && x.asset_url
+  ), r = (b = e.attachments) == null ? void 0 : b.find(
+    (x) => x.type === "file" && x.asset_url
+  ), i = t ?? s ?? a ?? r, l = (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 (!l) return null;
+  const o = (i == null ? void 0 : i.mime_type) ?? ((i == null ? void 0 : i.type) === "image" ? "image/jpeg" : (i == null ? void 0 : i.type) === "video" ? "video/mp4" : (i == null ? void 0 : i.type) === "audio" ? "audio/mpeg" : "application/octet-stream"), d = i == null ? void 0 : i.title, h = i == null ? void 0 : i.file_size, g = t == null ? void 0 : t.thumb_url;
+  return {
+    resolvedUrl: l,
+    resolvedType: o,
+    title: d,
+    fileSize: h,
+    thumbnailUrl: g
+  };
+}
+const ln = ({
+  resolvedUrl: e,
+  resolvedType: t,
+  title: s,
+  fileSize: a,
+  thumbnailUrl: r
+}) => {
+  const i = a !== void 0 ? rn(a) : void 0;
+  return /* @__PURE__ */ n(
+    an,
+    {
+      variant: "dark",
+      title: s,
+      placeholderTitle: "",
+      mimeType: t,
+      detail: i,
+      thumbnail: /* @__PURE__ */ n(
+        sn,
+        {
+          mimeType: t,
+          sourceUrl: e,
+          thumbnailUrl: r,
+          title: s,
+          variant: "dark"
+        }
+      )
+    }
+  );
+}, cn = ({
+  resolvedUrl: e,
+  resolvedType: t,
+  title: s,
+  fileSize: a,
+  thumbnailUrl: r
+}) => {
+  const i = le(t), l = a !== void 0 ? rn(a) : void 0;
+  return /* @__PURE__ */ n(
+    an,
+    {
+      variant: "light",
+      title: s,
+      mimeType: t,
+      detail: l,
+      thumbnail: /* @__PURE__ */ n(
+        sn,
+        {
+          mimeType: t,
+          sourceUrl: e,
+          thumbnailUrl: r,
+          title: s,
+          variant: "light",
+          containedImage: i === "image" || i === "document"
+        }
+      ),
+      action: /* @__PURE__ */ n(Na, { url: e, filename: s })
+    }
+  );
+}, ya = ({
+  message: e,
+  isMyMessage: t = !1
+}) => {
+  const s = rt(e), a = it(e);
+  return !s && !a ? null : /* @__PURE__ */ m("div", { className: t ? "str-chat__message str-chat__message-simple str-chat__message--me str-chat__message-simple--me" : "str-chat__message str-chat__message-simple str-chat__message--other", children: [
+    !t && e.user && /* @__PURE__ */ n(
+      oe,
+      {
+        className: "str-chat__avatar str-chat__message-sender-avatar",
+        id: e.user.id,
+        image: e.user.image,
+        name: e.user.name ?? e.user.id
+      }
+    ),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: "str-chat__message-inner",
+        style: { marginInlineEnd: 0, marginInlineStart: 0 },
+        children: /* @__PURE__ */ n("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ n(
+          "div",
+          {
+            className: "str-chat__message-bubble",
+            style: { padding: 0, borderRadius: 0, overflow: "visible", background: "transparent" },
+            children: s ? /* @__PURE__ */ n("div", { className: st(t), children: /* @__PURE__ */ n(at, { attachment: s, isMyMessage: t }) }) : t ? /* @__PURE__ */ n(ln, { ...a }) : /* @__PURE__ */ n(cn, { ...a })
+          }
+        ) })
+      }
+    )
+  ] });
+}, _a = ({
+  message: e
+}) => {
+  const t = rt(e);
+  if (t)
+    return /* @__PURE__ */ n("div", { className: st(!0), children: /* @__PURE__ */ n(at, { attachment: t, isMyMessage: !0 }) });
+  const s = it(e);
+  return s ? /* @__PURE__ */ n(ln, { ...s }) : null;
+}, Ca = ({
+  message: e
+}) => {
+  const t = rt(e);
+  if (t)
+    return /* @__PURE__ */ n("div", { className: st(!1), children: /* @__PURE__ */ n(at, { attachment: t, isMyMessage: !1 }) });
+  const s = it(e);
+  return s ? /* @__PURE__ */ n(cn, { ...s }) : null;
+}, _i = Object.assign(ya, {
+  Creator: _a,
+  Visitor: Ca
+}), ka = {
+  isUnlocking: () => !1
+}, Ea = {
+  LockedAttachment: ka
+}, dn = Ze({}), Ci = dn.Provider;
+function Ia(e) {
+  return Ke(dn)[e] ?? Ea[e];
+}
+const Sa = ({
+  selected: e,
+  onVoteUp: t,
+  onVoteDown: s
+}) => /* @__PURE__ */ m("div", { className: "message-vote-buttons", children: [
+  /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      className: y("message-vote-button focus-ring", {
+        "message-vote-button--selected": e === "up"
+      }),
+      onClick: t,
+      "aria-label": "Good response",
+      "aria-pressed": e === "up",
+      "data-tooltip": "Good response",
+      children: /* @__PURE__ */ n(Es, { size: 16, weight: e === "up" ? "fill" : "regular" })
+    }
+  ),
+  /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      className: y("message-vote-button focus-ring", {
+        "message-vote-button--selected": e === "down"
+      }),
+      onClick: s,
+      "aria-label": "Bad response",
+      "aria-pressed": e === "down",
+      "data-tooltip": "Bad response",
+      children: /* @__PURE__ */ n(Is, { size: 16, weight: e === "down" ? "fill" : "regular" })
+    }
+  )
+] }), Ta = (e) => {
+  var gt, bt, pt, vt, xt, wt, Nt, yt, _t, Ct, kt, Et, It, St;
+  const {
+    additionalMessageInputProps: t,
+    chatbotVotingEnabled: s,
+    editing: a,
+    endOfGroup: r,
+    firstOfGroup: i,
+    groupedByUser: l,
+    handleAction: o,
+    handleOpenThread: d,
+    handleRetry: h,
+    highlighted: g,
+    isMessageAIGenerated: u,
+    isMyMessage: f,
+    message: c,
+    renderText: b,
+    threadList: x,
+    viewerLanguage: v
+  } = e, { client: N } = Qe("CustomMessage"), { channel: w } = me("CustomMessage"), { isUnlocking: E, onUnlockClick: I, onFetchSource: S, onDownloadClick: D } = Ia("LockedAttachment"), [T, F] = z(!1), M = An(c.id), { selected: R, voteUp: A, voteDown: G } = ta(c), {
+    Attachment: k = Dn,
+    EditMessageModal: j = Rn,
+    MessageActions: W,
+    MessageBlocked: V = Ln,
+    MessageBouncePrompt: $ = Fn,
+    MessageDeleted: L = On,
+    MessageIsThreadReplyInChannelButtonIndicator: Y = zn,
+    MessageRepliesCountButton: _ = Pn,
+    ReminderNotification: O = Bn,
+    StreamedMessageText: p = $n,
+    PinIndicator: C
+  } = Vt("CustomMessage"), H = jn(c), q = Un(c), he = re(
+    () => u == null ? void 0 : u(c),
+    [u, c]
+  ), J = re(() => {
+    const be = c.attachments ?? [], Ie = c.shared_location ? [c.shared_location, ...be] : be;
+    if (!Me(c)) return Ie;
+    const Tt = Ie.filter((Mt) => !("type" in Mt) || !on(Mt));
+    return Tt.length === Ie.length ? Ie : Tt;
+  }, [c]), ee = re(() => {
+    const be = Zt({ message: c, viewerLanguage: v });
+    return be === c.text ? c : { ...c, text: be };
+  }, [c, v]);
+  if (Vn(c))
+    return null;
+  if (c.deleted_at || c.type === "deleted")
+    return /* @__PURE__ */ n(L, { message: c });
+  if (Gn(c))
+    return /* @__PURE__ */ n(V, {});
+  const Ce = !x && !!c.reply_count, ke = !x && c.show_in_channel && c.parent_id, ce = c.status === "failed" && ((gt = c.error) == null ? void 0 : gt.status) !== 403, te = Hn(c);
+  let se;
+  ce ? se = () => h(c) : te && (se = () => F(!0));
+  const de = f(), Oe = y(
+    "str-chat__message str-chat__message-simple",
+    `str-chat__message--${c.type}`,
+    `str-chat__message--${c.status}`,
+    de ? "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": H,
+      "str-chat__message--highlighted": g,
+      "str-chat__message--pinned pinned-message": c.pinned,
+      "str-chat__message--with-reactions": q,
+      "str-chat__message-send-can-be-retried": (c == null ? void 0 : c.status) === "failed" && ((bt = c == null ? void 0 : c.error) == null ? void 0 : bt.status) !== 403,
+      "str-chat__message-with-thread-link": Ce || ke,
+      "str-chat__virtual-message__wrapper--end": r,
+      "str-chat__virtual-message__wrapper--first": i,
+      "str-chat__virtual-message__wrapper--group": l
+    }
+  ), Ee = c.poll_id && N.polls.fromState(c.poll_id), ue = qs(c), B = Me(c), K = Ws(c), Q = !!(J != null && J.length && !c.quoted_message), ae = B && de && Q;
+  return /* @__PURE__ */ m(ie, { children: [
+    a && /* @__PURE__ */ n(
+      j,
+      {
+        additionalMessageInputProps: t
+      }
+    ),
+    T && /* @__PURE__ */ n(
+      Yn,
+      {
+        MessageBouncePrompt: $,
+        onClose: () => F(!1),
+        open: T
+      }
+    ),
+    /* @__PURE__ */ m("div", { className: Oe, children: [
+      C && /* @__PURE__ */ n(C, {}),
+      !!M && /* @__PURE__ */ n(O, { reminder: M }),
+      c.user && /* @__PURE__ */ n(
+        oe,
+        {
+          className: "str-chat__avatar str-chat__message-sender-avatar",
+          id: c.user.id,
+          image: c.user.image,
+          name: c.user.name || c.user.id,
+          size: B ? 24 : 28,
+          shape: "circle",
+          dmAgentEnabled: B
+        }
+      ),
+      /* @__PURE__ */ m(
+        "div",
+        {
+          className: y("str-chat__message-inner", {
+            "str-chat__simple-message--error-failed": ce || te
+          }),
+          "data-testid": "message-inner",
+          onClick: se,
+          onKeyDown: se,
+          role: se ? "button" : void 0,
+          tabIndex: se ? 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
+            marginInlineEnd: 0,
+            marginInlineStart: 0
+          },
+          children: [
+            K ? /* @__PURE__ */ m("div", { className: "str-chat__message-bubble-wrapper", children: [
+              de ? /* @__PURE__ */ n(
+                Pt.Sent,
+                {
+                  title: (pt = c.metadata) == null ? void 0 : pt.attachment_title,
+                  mimeType: (vt = c.metadata) == null ? void 0 : vt.attachment_mime_type,
+                  thumbnailUrl: (xt = c.metadata) == null ? void 0 : xt.attachment_thumbnail,
+                  amountText: (wt = c.metadata) == null ? void 0 : wt.amount_text,
+                  detail: (Nt = c.metadata) == null ? void 0 : Nt.attachment_detail,
+                  paymentStatus: (yt = c.metadata) == null ? void 0 : yt.payment_status,
+                  onPreviewClick: () => I == null ? void 0 : I(c, w),
+                  onFetchSource: async () => await (S == null ? void 0 : S(c, w))
+                }
+              ) : /* @__PURE__ */ n(
+                Pt.Received,
+                {
+                  title: (_t = c.metadata) == null ? void 0 : _t.attachment_title,
+                  mimeType: (Ct = c.metadata) == null ? void 0 : Ct.attachment_mime_type,
+                  thumbnailUrl: (kt = c.metadata) == null ? void 0 : kt.attachment_thumbnail,
+                  amountText: (Et = c.metadata) == null ? void 0 : Et.amount_text,
+                  detail: (It = c.metadata) == null ? void 0 : It.attachment_detail,
+                  paymentStatus: (St = c.metadata) == null ? void 0 : St.payment_status,
+                  isUnlocking: E(c.id),
+                  onUnlockClick: () => I == null ? void 0 : I(c, w),
+                  onFetchSource: async () => await (S == null ? void 0 : S(c, w)),
+                  onDownloadClick: () => D == null ? void 0 : D(c, w)
+                }
+              ),
+              c.text && /* @__PURE__ */ n("div", { className: "str-chat__message-bubble", children: /* @__PURE__ */ n(
+                At,
+                {
+                  message: ee,
+                  renderText: b
+                }
+              ) })
+            ] }) : ue ? (
+              /* Tip-only messages render as a standalone bubble */
+              /* @__PURE__ */ n($e, { message: c, standalone: !0 })
+            ) : /* @__PURE__ */ n("div", { className: "str-chat__message-bubble-wrapper", children: /* @__PURE__ */ m("div", { className: "str-chat__message-bubble", children: [
+              B && !ae && /* @__PURE__ */ n(
+                $e,
+                {
+                  message: c,
+                  hasAttachment: Q,
+                  isMyMessage: de
+                }
+              ),
+              Ee && /* @__PURE__ */ n(Wn, { poll: Ee }),
+              J != null && J.length && !c.quoted_message ? /* @__PURE__ */ n(
+                k,
+                {
+                  actionHandler: o,
+                  attachments: J
+                }
+              ) : null,
+              he ? /* @__PURE__ */ n(
+                p,
+                {
+                  message: ee,
+                  renderText: b
+                }
+              ) : /* @__PURE__ */ n(
+                At,
+                {
+                  message: ee,
+                  renderText: b
+                }
+              ),
+              /* @__PURE__ */ n(qn, {})
+            ] }) }),
+            W && /* @__PURE__ */ n(W, {})
+          ]
+        }
+      ),
+      !K && !ue && /* @__PURE__ */ m("div", { className: "str-chat__message-footer", children: [
+        (!B || ae) && /* @__PURE__ */ n(
+          $e,
+          {
+            message: c,
+            hasAttachment: Q,
+            isMyMessage: de
+          }
+        ),
+        s && B && /* @__PURE__ */ n(
+          Sa,
+          {
+            selected: R,
+            onVoteUp: A,
+            onVoteDown: G
+          }
+        )
+      ] }),
+      Ce && /* @__PURE__ */ n(
+        _,
+        {
+          onClick: d,
+          reply_count: c.reply_count
+        }
+      ),
+      ke && /* @__PURE__ */ n(Y, {})
+    ] }, c.id)
+  ] });
+}, Ma = P.memo(
+  Ta,
+  (e, t) => e.chatbotVotingEnabled !== t.chatbotVotingEnabled || e.viewerLanguage !== t.viewerLanguage ? !1 : Mn(e, t)
+), Aa = (e) => {
+  const t = Le("CustomMessage");
+  return /* @__PURE__ */ n(Ma, { ...t, ...e });
+}, Da = () => {
+  const { handleDelete: e } = Le("CustomMessageActions"), { t } = Xn("CustomMessageActions");
+  return /* @__PURE__ */ n(Yt, { onClick: e, children: t("Delete") });
+}, Ra = () => {
+  const { handleFlag: e } = Le("CustomMessageActions");
+  return /* @__PURE__ */ n(Yt, { onClick: e, children: "Report" });
+}, La = [
+  { Component: Da, placement: "dropdown", type: "delete" },
+  { Component: Ra, placement: "dropdown", type: "flag" }
+], Fa = () => /* @__PURE__ */ n(Ds, { messageActionSet: La }), Oa = (e) => ({
+  linkPreviews: Array.from(e.previews.values()).filter(
+    (t) => Ft.previewIsLoaded(t) || Ft.previewIsLoading(t)
+  )
+}), za = ({
+  link: e,
+  onDismiss: t
+}) => {
+  const { og_scrape_url: s, title: a, image_url: r } = e;
+  return /* @__PURE__ */ m(
+    "a",
+    {
+      href: s,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "relative w-full block rounded-[24px] bg-[#121110] p-2 no-underline transition-opacity hover:opacity-90",
+      children: [
+        r && /* @__PURE__ */ n(
+          "img",
+          {
+            src: r,
+            alt: a || "",
+            className: "h-[148px] w-full rounded-[20px] object-cover"
+          }
+        ),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: (l) => {
+              l.preventDefault(), t(s);
+            },
+            className: "absolute right-4 top-4 flex size-6 items-center justify-center rounded-full border border-white/40 bg-white/70 backdrop-blur-2xl focus-ring",
+            "aria-label": "Close link preview",
+            children: /* @__PURE__ */ n(xe, { className: "size-4 text-black/90" })
+          }
+        ),
+        /* @__PURE__ */ m("div", { className: "p-2", children: [
+          a && /* @__PURE__ */ n("div", { className: "text-[14px] font-medium leading-5 text-white", children: a }),
+          /* @__PURE__ */ n("div", { className: "text-[12px] leading-4 text-white/55", children: s })
+        ] })
+      ]
+    }
+  );
+}, Pa = () => {
+  const { linkPreviewsManager: e } = Zn(), { linkPreviews: t } = Kn(
+    e.state,
+    Oa
+  ), s = (r) => {
+    e.dismissPreview(r);
+  };
+  return t.length > 0 ? /* @__PURE__ */ n("div", { className: "flex flex-col items-center w-full gap-2 mb-4", children: t.map((r) => /* @__PURE__ */ n(
+    za,
+    {
+      link: r,
+      onDismiss: s
+    },
+    r.og_scrape_url
+  )) }) : null;
+}, Ba = ({ sendMessage: e, disabled: t, ...s }) => /* @__PURE__ */ n(
+  "button",
+  {
+    ...s,
+    type: "button",
+    "aria-label": "Send",
+    disabled: t,
+    onClick: e,
+    children: /* @__PURE__ */ n(Ss, { weight: "bold", className: "size-4" })
+  }
+), $a = () => {
+  var o;
+  const { channel: e } = me(), t = ((o = e == null ? void 0 : e.data) == null ? void 0 : o.frozen) === !0, { handleSubmit: s } = Qn(), { SendButton: a } = Vt("CustomMessageInput"), r = a ?? Ba, i = es();
+  return /* @__PURE__ */ m(ie, { children: [
+    /* @__PURE__ */ n("div", { className: "left-container", children: /* @__PURE__ */ n(ts, {}) }),
+    /* @__PURE__ */ m("div", { className: "central-container min-w-0 w-full p-2 bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]", children: [
+      /* @__PURE__ */ n(ns, {}),
+      /* @__PURE__ */ n(Pa, {}),
+      /* @__PURE__ */ n(ss, {}),
+      /* @__PURE__ */ m("div", { className: "flex", children: [
+        /* @__PURE__ */ n("div", { className: "w-full ml-2 mr-4 self-center leading-[0]", children: /* @__PURE__ */ n(
+          as,
+          {
+            "aria-disabled": t || void 0,
+            className: "w-full resize-none outline-none leading-6",
+            autoFocus: !t,
+            maxRows: 4,
+            readOnly: t,
+            tabIndex: t ? -1 : void 0
+          }
+        ) }),
+        /* @__PURE__ */ n(
+          r,
+          {
+            sendMessage: s,
+            "aria-label": "Send",
+            className: "str-chat__send-button mt-auto flex justify-center items-center flex-shrink-0 rounded-full size-8 bg-[#121110] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white focus-ring",
+            "data-testid": "send-button",
+            disabled: t || !i,
+            type: "button"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, ja = ({
+  renderActions: e
+}) => {
+  var a;
+  const { channel: t } = me(), s = ((a = t == null ? void 0 : t.data) == null ? void 0 : a.frozen) === !0;
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      inert: s ? "" : void 0,
+      "aria-disabled": s || void 0,
+      className: "message-input flex items-center gap-2 p-4 aria-disabled:opacity-40",
+      children: [
+        e == null ? void 0 : e(),
+        /* @__PURE__ */ n(Jn, { Input: $a })
+      ]
+    }
+  );
+}, Ua = [
+  "SYSTEM_DM_AGENT_PAUSED",
+  "SYSTEM_DM_AGENT_RESUMED"
+], Va = {
+  SYSTEM_DM_AGENT_PAUSED: "DM Agent has left the conversation",
+  SYSTEM_DM_AGENT_RESUMED: "DM Agent has rejoined the conversation"
+}, Ga = [
+  "SYSTEM_AGE_SAFETY_BLOCKED"
+], Ha = {
+  SYSTEM_AGE_SAFETY_BLOCKED: "This user isn’t able to reply because they don’t meet our age safety guidelines."
+}, je = "age safety guidelines.", Ya = "https://linktr.ee/s/about/contact", $t = (e) => Ua.includes(e), Wa = (e) => Ga.includes(e), qa = (e) => {
+  var a;
+  const t = (a = e.metadata) == null ? void 0 : a.custom_type;
+  if ($t(t))
+    return {
+      kind: "dm-agent",
+      type: t
+    };
+  if (Wa(t))
+    return {
+      kind: "age-safety",
+      type: t
+    };
+  const s = e.dm_agent_system_type;
+  if ($t(s))
+    return {
+      kind: "dm-agent",
+      type: s
+    };
+}, Xa = (e) => {
+  const t = e.indexOf(je);
+  if (t === -1)
+    return e;
+  const s = t + je.length;
+  return /* @__PURE__ */ m(ie, { children: [
+    e.slice(0, t),
+    /* @__PURE__ */ n(
+      "a",
+      {
+        href: Ya,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "mes-age-safety-system-message__emphasis font-medium text-inherit underline",
+        children: je
+      }
+    ),
+    e.slice(s)
+  ] });
+}, Za = (e) => {
+  var a, r;
+  const t = e.message.hide_date === !0, s = qa(
+    e.message
+  );
+  if ((s == null ? void 0 : s.kind) === "dm-agent") {
+    const i = ((a = e.message.text) == null ? void 0 : a.trim()) || Va[s.type];
+    return /* @__PURE__ */ m("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
+      /* @__PURE__ */ m(
+        "div",
+        {
+          className: "mes-dm-agent-system-message mx-auto mb-2 inline-flex w-fit max-w-[min(100%,480px)] items-center justify-center gap-[10px] rounded-[12px] border border-[rgba(0,0,0,0.08)] p-3 text-[rgba(0,0,0,0.55)]",
+          "data-testid": "dm-agent-system-message",
+          "data-dm-agent-system-type": s.type,
+          children: [
+            /* @__PURE__ */ n(
+              Ye,
+              {
+                size: 16,
+                weight: "regular",
+                "aria-hidden": !0,
+                className: "mes-dm-agent-system-message__sparkle shrink-0"
+              }
+            ),
+            /* @__PURE__ */ n("p", { className: "mes-dm-agent-system-message__text m-0 text-center text-[14px] font-normal leading-5 tracking-[0.21px]", children: i })
+          ]
+        }
+      ),
+      !t && /* @__PURE__ */ n(ze, { message: e.message })
+    ] });
+  }
+  if ((s == null ? void 0 : s.kind) === "age-safety") {
+    const i = ((r = e.message.text) == null ? void 0 : r.trim()) || Ha[s.type];
+    return /* @__PURE__ */ m("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
+      /* @__PURE__ */ m(
+        "div",
+        {
+          className: "mes-age-safety-system-message box-border mx-auto mb-2 flex w-full max-w-[329px] items-start justify-center gap-3 rounded-[12px] border border-[var(--border-secondary,rgba(0,0,0,0.08))] bg-[var(--bg-warning-subtle,#fef3c6)] px-2 py-4 pl-5 text-[color:var(--text-warning-on-warning,#894b00)]",
+          "data-testid": "age-safety-system-message",
+          "data-age-safety-system-type": s.type,
+          children: [
+            /* @__PURE__ */ n(
+              Ts,
+              {
+                size: 24,
+                weight: "duotone",
+                "aria-hidden": !0,
+                className: "mes-age-safety-system-message__icon shrink-0 text-[color:var(--text-warning-on-warning,#894b00)]",
+                "data-testid": "age-safety-system-message-icon"
+              }
+            ),
+            /* @__PURE__ */ n("div", { className: "mes-age-safety-system-message__content min-w-0 flex-[1_0_0]", children: /* @__PURE__ */ n("p", { className: "m-0 text-balance text-left text-[12px] font-normal leading-4 tracking-[0.21px] text-[color:var(--text-warning-on-warning,#894b00)]", children: Xa(i) }) })
+          ]
+        }
+      ),
+      !t && /* @__PURE__ */ n(ze, { message: e.message })
+    ] });
+  }
+  return /* @__PURE__ */ m("div", { className: "str-chat__message--system", "data-testid": "message-system", children: [
+    /* @__PURE__ */ m("div", { className: "str-chat__message--system__text", children: [
+      /* @__PURE__ */ n("div", { className: "str-chat__message--system__line" }),
+      /* @__PURE__ */ n("p", { children: e.message.text }),
+      /* @__PURE__ */ n("div", { className: "str-chat__message--system__line" })
+    ] }),
+    !t && /* @__PURE__ */ n(ze, { message: e.message })
+  ] });
+}, un = Ze(!1), Ue = ({ cx: e, index: t }) => /* @__PURE__ */ n("circle", { cx: e, cy: "4", r: "3.9", fill: "#A0A0A0", children: /* @__PURE__ */ n(
+  "animateTransform",
+  {
+    attributeName: "transform",
+    type: "translate",
+    values: "0 0; 0 -2.25; 0 0;",
+    dur: "900ms",
+    begin: `${120 * t}ms`,
+    repeatCount: "indefinite"
+  }
+) }), Ka = /* @__PURE__ */ new Set([
+  Pe.Thinking,
+  Pe.Generating,
+  Pe.ExternalSources
+]), Ja = ({ threadList: e }) => {
+  var b, x;
+  const { channel: t, channelConfig: s, thread: a } = me(), { client: r } = Qe(), { typing: i = {} } = rs(), { aiState: l } = is(t), o = Ke(un);
+  if (!e && o && Ka.has(l)) {
+    const v = Qa(t, (b = r.user) == null ? void 0 : b.id);
+    return /* @__PURE__ */ n(
+      jt,
+      {
+        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"
+      }
+    );
+  }
+  if ((s == null ? void 0 : s.typing_events) === !1)
+    return null;
+  const h = e ? [] : Object.values(i).filter(
+    ({ parent_id: v, user: N }) => {
+      var w;
+      return (N == null ? void 0 : N.id) !== ((w = r.user) == null ? void 0 : w.id) && !v;
+    }
+  ), g = e ? Object.values(i).filter(
+    ({ parent_id: v, user: N }) => {
+      var w;
+      return (N == null ? void 0 : N.id) !== ((w = r.user) == null ? void 0 : w.id) && v === (a == null ? void 0 : a.id);
+    }
+  ) : [], u = e ? g : h;
+  if (!u.length)
+    return null;
+  const f = (x = u[0]) == null ? void 0 : x.user, c = f != null && f.id && t.state.members[f.id] ? t.state.members[f.id].user : void 0;
+  return /* @__PURE__ */ n(
+    jt,
+    {
+      avatarId: (f == null ? void 0 : f.id) ?? (c == null ? void 0 : c.id) ?? "typing-user",
+      avatarName: (f == null ? void 0 : f.name) ?? (c == null ? void 0 : c.name) ?? (f == null ? void 0 : f.id) ?? "Typing user",
+      avatarImage: (f == null ? void 0 : f.image) ?? (c == null ? void 0 : c.image),
+      testId: "typing-indicator"
+    }
+  );
+}, jt = ({
+  avatarId: e,
+  avatarName: t,
+  avatarImage: s,
+  testId: a
+}) => /* @__PURE__ */ m(
+  "div",
+  {
+    className: "str-chat__typing-indicator !items-end !bg-transparent",
+    "data-testid": a,
+    style: { insetInlineStart: 0, insetInlineEnd: "auto" },
+    children: [
+      /* @__PURE__ */ n("div", { className: "shrink-0", "aria-hidden": "true", children: /* @__PURE__ */ n(
+        oe,
+        {
+          id: e,
+          name: t,
+          image: s ?? void 0,
+          size: 24,
+          shape: "circle"
+        }
+      ) }),
+      /* @__PURE__ */ n("div", { className: "px-4 py-3 rounded-lg bg-[#E9EAED] h-12 flex flex-col justify-end", children: /* @__PURE__ */ m(
+        "svg",
+        {
+          "aria-hidden": "true",
+          className: "block overflow-visible mb-[0.2rem]",
+          viewBox: "0 0 32 8",
+          width: "32",
+          height: "8",
+          overflow: "visible",
+          children: [
+            /* @__PURE__ */ n(Ue, { cx: "4", index: 0 }),
+            /* @__PURE__ */ n(Ue, { cx: "16", index: 1 }),
+            /* @__PURE__ */ n(Ue, { cx: "28", index: 2 })
+          ]
+        }
+      ) })
+    ]
+  }
+);
+function Qa(e, t) {
+  var a;
+  const s = ((a = e == null ? void 0 : e.state) == null ? void 0 : a.members) ?? {};
+  for (const r of Object.values(s)) {
+    const i = r == null ? void 0 : r.user;
+    if (i && i.id !== t)
+      return i;
+  }
+}
+const er = () => null, tr = ({ className: e, message: t }) => /* @__PURE__ */ m(
+  "div",
+  {
+    className: y("flex items-center justify-center h-full", e),
+    children: [
+      /* @__PURE__ */ m("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(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            dur: "1s",
+            type: "translate",
+            values: "0 15 ; 0 -15; 0 15",
+            repeatCount: "indefinite",
+            begin: "0.1"
+          }
+        ) }),
+        /* @__PURE__ */ n("circle", { cx: "30", cy: "50", r: "6", children: /* @__PURE__ */ n(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            dur: "1s",
+            type: "translate",
+            values: "0 10 ; 0 -10; 0 10",
+            repeatCount: "indefinite",
+            begin: "0.2"
+          }
+        ) }),
+        /* @__PURE__ */ n("circle", { cx: "54", cy: "50", r: "6", children: /* @__PURE__ */ n(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            dur: "1s",
+            type: "translate",
+            values: "0 5 ; 0 -5; 0 5",
+            repeatCount: "indefinite",
+            begin: "0.3"
+          }
+        ) })
+      ] }),
+      t && /* @__PURE__ */ n("span", { className: "text-stone", children: t })
+    ]
+  }
+), Ae = P.memo(() => /* @__PURE__ */ n("div", { className: "messaging-loading-state flex items-center justify-center h-full", children: /* @__PURE__ */ m("div", { className: "flex items-center", children: [
+  /* @__PURE__ */ n(tr, { className: "w-6 h-6" }),
+  /* @__PURE__ */ n("span", { className: "text-sm text-stone", children: "Loading messages" })
+] }) }));
+Ae.displayName = "LoadingState";
+const fe = "size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring", Ut = "Replies instantly with AI assistant", nr = ({
+  onBack: e,
+  showBackButton: t,
+  onShowInfo: s,
+  canShowInfo: a,
+  showStarButton: r = !1,
+  dmAgentEnabled: i = !1,
+  getParticipantDisplayName: l
+}) => {
+  var c, b, x, v, N;
+  const { channel: o } = me(), d = P.useMemo(() => {
+    var I, S;
+    const w = (I = o._client) == null ? void 0 : I.userID;
+    return w ? Object.values(((S = o.state) == null ? void 0 : S.members) || {}).find(
+      (D) => {
+        var T;
+        return ((T = D.user) == null ? void 0 : T.id) && D.user.id !== w;
+      }
+    ) : void 0;
+  }, [(c = o._client) == null ? void 0 : c.userID, (b = o.state) == null ? void 0 : b.members]), h = l(d), g = (x = d == null ? void 0 : d.user) == null ? void 0 : x.image, u = Xt(o), f = async () => {
+    try {
+      u ? await o.unpin() : await o.pin();
+    } catch (w) {
+      console.error(
+        "[CustomChannelHeader] Failed to update pinned status:",
+        w
+      );
+    }
+  };
+  return /* @__PURE__ */ m("div", { className: "@container", children: [
+    /* @__PURE__ */ m("div", { className: "grid grid-cols-[1fr_auto_1fr] w-full items-center @lg:hidden", children: [
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: t && /* @__PURE__ */ n(
+        "button",
+        {
+          className: fe,
+          onClick: e || (() => {
+          }),
+          type: "button",
+          "aria-label": "Back to conversations",
+          children: /* @__PURE__ */ n(Rt, { className: "size-5 text-black/90" })
+        }
+      ) }),
+      /* @__PURE__ */ m("div", { className: "flex flex-col gap-1 items-center", children: [
+        /* @__PURE__ */ n(
+          oe,
+          {
+            id: ((v = d == null ? void 0 : d.user) == null ? void 0 : v.id) || o.id || "unknown",
+            name: h,
+            image: g,
+            starred: r && u,
+            dmAgentEnabled: i,
+            size: 40
+          }
+        ),
+        /* @__PURE__ */ m(
+          "button",
+          {
+            type: "button",
+            onClick: s,
+            className: "flex items-center gap-0.5 rounded-full bg-black/[0.05] px-3 py-1 text-xs font-medium text-black/90 hover:bg-black/[0.08] transition-colors",
+            "aria-label": `View info for ${h}`,
+            children: [
+              h,
+              /* @__PURE__ */ n(We, { className: "size-3 shrink-0" })
+            ]
+          }
+        ),
+        i && /* @__PURE__ */ m("div", { className: "flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
+          /* @__PURE__ */ n(Ye, { className: "size-3 shrink-0 text-black/55" }),
+          /* @__PURE__ */ n("span", { children: Ut })
+        ] })
+      ] }),
+      /* @__PURE__ */ m("div", { className: "flex justify-end items-center gap-2", children: [
+        r && /* @__PURE__ */ n(
+          "button",
+          {
+            className: fe,
+            onClick: f,
+            type: "button",
+            "aria-label": u ? "Unstar conversation" : "Star conversation",
+            children: /* @__PURE__ */ n(
+              Ge,
+              {
+                className: y("size-5", {
+                  "text-yellow-600": u,
+                  "text-black/90": !u
+                }),
+                weight: u ? "duotone" : "regular"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            className: fe,
+            onClick: s,
+            type: "button",
+            "aria-label": "Show info",
+            children: /* @__PURE__ */ n(Lt, { className: "size-5 text-black/90" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ m("div", { className: "hidden @lg:flex items-center justify-between gap-3 min-h-12", children: [
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-4 min-w-0", children: [
+        t && e && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: e,
+            className: fe,
+            "aria-label": "Back to conversations",
+            children: /* @__PURE__ */ n(Rt, { className: "size-5 text-black/90" })
+          }
+        ),
+        /* @__PURE__ */ n(
+          oe,
+          {
+            id: ((N = d == null ? void 0 : d.user) == null ? void 0 : N.id) || o.id || "unknown",
+            name: h,
+            image: g,
+            starred: r && u,
+            dmAgentEnabled: i,
+            size: 40
+          }
+        ),
+        /* @__PURE__ */ m("div", { className: "min-w-0", children: [
+          a ? /* @__PURE__ */ m(
+            "button",
+            {
+              type: "button",
+              onClick: s,
+              className: "flex items-center gap-1 font-medium text-black/90 truncate hover:text-black/70 transition-colors",
+              "aria-label": `View info for ${h}`,
+              children: [
+                /* @__PURE__ */ n("span", { className: "truncate", children: h }),
+                /* @__PURE__ */ n(We, { className: "size-4 shrink-0" })
+              ]
+            }
+          ) : /* @__PURE__ */ n("h1", { className: "font-medium text-black/90 truncate", children: h }),
+          i && /* @__PURE__ */ m("div", { className: "mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55", children: [
+            /* @__PURE__ */ n(Ye, { className: "size-3 shrink-0 text-black/55" }),
+            /* @__PURE__ */ n("span", { className: "truncate", children: Ut })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+        r && /* @__PURE__ */ n(
+          "button",
+          {
+            className: fe,
+            onClick: f,
+            type: "button",
+            "aria-label": u ? "Unstar conversation" : "Star conversation",
+            children: /* @__PURE__ */ n(
+              Ge,
+              {
+                className: y("size-5", {
+                  "text-yellow-600": u,
+                  "text-black/90": !u
+                }),
+                weight: u ? "duotone" : "regular"
+              }
+            )
+          }
+        ),
+        a && s && /* @__PURE__ */ n(
+          "button",
+          {
+            className: fe,
+            onClick: s,
+            type: "button",
+            "aria-label": "Show info",
+            children: /* @__PURE__ */ n(Lt, { className: "size-5 text-black/90" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, sr = ({
+  onBack: e,
+  showBackButton: t,
+  renderMessageInputActions: s,
+  renderConversationFooter: a,
+  onLeaveConversation: r,
+  onBlockParticipant: i,
+  showDeleteConversation: l = !0,
+  onDeleteConversationClick: o,
+  onBlockParticipantClick: d,
+  onReportParticipantClick: h,
+  showStarButton: g = !1,
+  chatbotVotingEnabled: u = !1,
+  renderChannelBanner: f,
+  customProfileContent: c,
+  customChannelActions: b,
+  renderMessage: x,
+  dmAgentEnabled: v = !1,
+  viewerLanguage: N,
+  getParticipantDisplayName: w
+}) => {
+  var j, W, V, $, L, Y;
+  const { channel: E } = me(), I = Z(null), S = P.useMemo(() => {
+    var p, C;
+    const _ = (p = E._client) == null ? void 0 : p.userID;
+    return _ ? Object.values(((C = E.state) == null ? void 0 : C.members) || {}).find(
+      (H) => {
+        var q;
+        return ((q = H.user) == null ? void 0 : q.id) && H.user.id !== _;
+      }
+    ) : void 0;
+  }, [(j = E._client) == null ? void 0 : j.userID, (W = E.state) == null ? void 0 : W.members]), D = P.useMemo(() => {
+    var p, C;
+    const _ = (p = E._client) == null ? void 0 : p.userID;
+    return _ ? Object.values(((C = E.state) == null ? void 0 : C.members) || {}).find((H) => {
+      var q;
+      return ((q = H.user) == null ? void 0 : q.id) === _;
+    }) : void 0;
+  }, [(V = E._client) == null ? void 0 : V.userID, ($ = E.state) == null ? void 0 : $.members]), T = ((L = D == null ? void 0 : D.user) == null ? void 0 : L.is_account) ?? (D == null ? void 0 : D.is_account), F = ((Y = S == null ? void 0 : S.user) == null ? void 0 : Y.is_account) ?? (S == null ? void 0 : S.is_account), M = v && T === !1 && F === !0, R = P.useMemo(() => {
+    const _ = E.data ?? {};
+    if (_.followerStatus)
+      return String(_.followerStatus);
+    if (_.isFollower !== void 0)
+      return _.isFollower ? "Subscribed to you" : "Not subscribed";
+  }, [E.data]), A = U(() => {
+    var _;
+    (_ = I.current) == null || _.showModal();
+  }, []), G = U(() => {
+    var _;
+    (_ = I.current) == null || _.close();
+  }, []), k = U(
+    (_) => {
+      const { message: O } = Le("ChannelView"), p = /* @__PURE__ */ n(
+        Aa,
+        {
+          ..._,
+          chatbotVotingEnabled: u,
+          viewerLanguage: N
+        }
+      );
+      return !x || !O ? p : x(p, O);
+    },
+    [u, x, N]
+  );
+  return /* @__PURE__ */ m(ie, { children: [
+    /* @__PURE__ */ n(
+      ls,
+      {
+        overrides: {
+          Message: k,
+          MessageActions: Fa
+        },
+        children: /* @__PURE__ */ m(cs, { children: [
+          /* @__PURE__ */ n("div", { className: "p-4", children: /* @__PURE__ */ n(
+            nr,
+            {
+              onBack: e,
+              showBackButton: t,
+              onShowInfo: A,
+              canShowInfo: !!S,
+              showStarButton: g,
+              dmAgentEnabled: M,
+              getParticipantDisplayName: w
+            }
+          ) }, "lt-channel-header"),
+          f ? /* @__PURE__ */ n(P.Fragment, { children: f() }, "lt-channel-banner") : null,
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: "flex-1 overflow-hidden relative",
+              children: /* @__PURE__ */ n(
+                ds,
+                {
+                  hideDeletedMessages: !0,
+                  hideNewMessageSeparator: !1
+                }
+              )
+            },
+            "lt-channel-message-list"
+          ),
+          a ? /* @__PURE__ */ n(P.Fragment, { children: a(E) }, "lt-channel-conversation-footer") : null,
+          /* @__PURE__ */ n(
+            ja,
+            {
+              renderActions: () => s == null ? void 0 : s(E)
+            },
+            "lt-channel-message-input"
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ n(
+      Js,
+      {
+        dialogRef: I,
+        onClose: G,
+        participant: S,
+        participantDisplayName: w(S),
+        channel: E,
+        followerStatusLabel: R,
+        onLeaveConversation: r,
+        onBlockParticipant: i,
+        showDeleteConversation: l,
+        onDeleteConversationClick: o,
+        onBlockParticipantClick: d,
+        onReportParticipantClick: h,
+        customProfileContent: c,
+        customChannelActions: b
+      }
+    )
+  ] });
+}, mn = P.memo(
+  ({
+    channel: e,
+    onBack: t,
+    showBackButton: s = !1,
+    renderMessageInputActions: a,
+    renderConversationFooter: r,
+    onLeaveConversation: i,
+    onBlockParticipant: l,
+    className: o,
+    CustomChannelEmptyState: d = er,
+    showDeleteConversation: h = !0,
+    onDeleteConversationClick: g,
+    onBlockParticipantClick: u,
+    onReportParticipantClick: f,
+    dmAgentEnabled: c,
+    messageMetadata: b,
+    onMessageSent: x,
+    showStarButton: v = !1,
+    chatbotVotingEnabled: N = !1,
+    renderChannelBanner: w,
+    customProfileContent: E,
+    customChannelActions: I,
+    renderMessage: S,
+    onMessageLinkClick: D,
+    sendButton: T,
+    viewerLanguage: F,
+    getParticipantDisplayName: M
+  }) => {
+    const R = U(
+      (k) => (M == null ? void 0 : M(k)) ?? tt(k == null ? void 0 : k.user),
+      [M]
+    ), A = U(
+      async (k, j, W) => {
+        var O;
+        const V = ((O = e.data) == null ? void 0 : O.chatbot_paused) === !0, $ = c && !V, L = {
+          ...j,
+          ...$ && { silent: !0 },
+          ...b && {
+            metadata: {
+              ...j.metadata ?? {},
+              ...b
+            }
+          }
+        }, Y = {
+          ...W,
+          ...$ && { skip_push: !0 }
+        }, _ = await e.sendMessage(L, Y);
+        return x == null || x(_), _;
+      },
+      [e, c, b, x]
+    ), G = Z(null);
+    return X(() => {
+      if (!D) return;
+      const k = G.current;
+      if (!k) return;
+      const j = (W) => {
+        var L;
+        const V = (L = W.target) == null ? void 0 : L.closest("a[href]"), $ = V == null ? void 0 : V.getAttribute("href");
+        $ && D($);
+      };
+      return k.addEventListener("click", j), () => k.removeEventListener("click", j);
+    }, [D]), /* @__PURE__ */ n(
+      "div",
+      {
+        ref: G,
+        className: y(
+          "messaging-channel-view h-full flex flex-col",
+          o
+        ),
+        children: /* @__PURE__ */ n(un.Provider, { value: c ?? !1, children: /* @__PURE__ */ n(
+          os,
+          {
+            channel: e,
+            MessageSystem: Za,
+            EmptyStateIndicator: d,
+            LoadingIndicator: Ae,
+            DateSeparator: Qs,
+            TypingIndicator: Ja,
+            doSendMessageRequest: A,
+            ...T ? { SendButton: T } : {},
+            children: /* @__PURE__ */ n(
+              sr,
+              {
+                onBack: t,
+                showBackButton: s,
+                renderMessageInputActions: a,
+                renderConversationFooter: r,
+                onLeaveConversation: i,
+                onBlockParticipant: l,
+                CustomChannelEmptyState: d,
+                showDeleteConversation: h,
+                onDeleteConversationClick: g,
+                onBlockParticipantClick: u,
+                onReportParticipantClick: f,
+                showStarButton: v,
+                dmAgentEnabled: c,
+                chatbotVotingEnabled: N,
+                renderChannelBanner: w,
+                customProfileContent: E,
+                customChannelActions: I,
+                renderMessage: S,
+                viewerLanguage: F,
+                getParticipantDisplayName: R
+              }
+            )
+          }
+        ) })
+      }
+    );
+  }
+);
+mn.displayName = "ChannelView";
+const ar = ({ className: e }) => /* @__PURE__ */ m(
+  "svg",
+  {
+    width: "140",
+    height: "120",
+    viewBox: "44 -2 144 126",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: e,
+    children: [
+      /* @__PURE__ */ m("g", { clipPath: "url(#clip0_empty_state)", children: [
+        /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M123.68 82.1932C123.383 103.675 105.839 121 84.2417 121C77.4724 121 71.0986 119.297 65.5327 116.299L52.5873 119.687L53.8036 106.673C48.1776 99.8701 44.7994 91.1453 44.7994 81.6356C44.7994 59.8965 62.4554 42.2754 84.2374 42.2754C89.1328 42.2754 93.8175 43.1633 98.1413 44.789",
+            fill: "#D7D4CE"
+          }
+        ),
+        /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M84.2458 86.0364C82.2851 86.0364 80.6957 84.4501 80.6957 82.4933C80.6957 80.5365 82.2851 78.9502 84.2458 78.9502C86.2065 78.9502 87.7959 80.5365 87.7959 82.4933C87.7959 84.4501 86.2065 86.0364 84.2458 86.0364Z",
+            fill: "white"
+          }
+        ),
+        /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M68.3044 86.0364C66.3437 86.0364 64.7543 84.4501 64.7543 82.4933C64.7543 80.5365 66.3437 78.9502 68.3044 78.9502C70.2651 78.9502 71.8545 80.5365 71.8545 82.4933C71.8545 84.4501 70.2651 86.0364 68.3044 86.0364Z",
+            fill: "white"
+          }
+        ),
+        /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M100.183 86.0364C98.2226 86.0364 96.6332 84.4501 96.6332 82.4933C96.6332 80.5365 98.2226 78.9502 100.183 78.9502C102.144 78.9502 103.733 80.5365 103.733 82.4933C103.733 84.4501 102.144 86.0364 100.183 86.0364Z",
+            fill: "white"
+          }
+        ),
+        /* @__PURE__ */ m("g", { filter: "url(#filter0_empty_state)", children: [
+          /* @__PURE__ */ n(
+            "path",
+            {
+              d: "M171.522 68.7154C177.443 61.4539 181 52.1488 181 42C181 18.8027 162.421 0 139.5 0C116.579 0 98 18.8027 98 42C98 65.1973 116.579 84 139.5 84C146.622 84 153.328 82.1857 159.184 78.9829L172.801 82.5993L171.522 68.7154Z",
+              fill: "white"
+            }
+          ),
+          /* @__PURE__ */ n(
+            "path",
+            {
+              d: "M171.522 68.7154C177.443 61.4539 181 52.1488 181 42C181 18.8027 162.421 0 139.5 0C116.579 0 98 18.8027 98 42C98 65.1973 116.579 84 139.5 84C146.622 84 153.328 82.1857 159.184 78.9829L172.801 82.5993L171.522 68.7154Z",
+              stroke: "#D7D4CE",
+              strokeWidth: "2",
+              strokeMiterlimit: "10"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M139.502 45.5431C137.541 45.5431 135.952 43.9568 135.952 42C135.952 40.0432 137.541 38.4569 139.502 38.4569C141.462 38.4569 143.052 40.0432 143.052 42C143.052 43.9568 141.462 45.5431 139.502 45.5431Z",
+            fill: "#D7D4CE"
+          }
+        ),
+        /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M123.561 45.5431C121.601 45.5431 120.011 43.9568 120.011 42C120.011 40.0432 121.601 38.4569 123.561 38.4569C125.522 38.4569 127.111 40.0432 127.111 42C127.111 43.9568 125.522 45.5431 123.561 45.5431Z",
+            fill: "#D7D4CE"
+          }
+        ),
+        /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M155.439 45.5431C153.478 45.5431 151.889 43.9568 151.889 42C151.889 40.0432 153.478 38.4569 155.439 38.4569C157.4 38.4569 158.989 40.0432 158.989 42C158.989 43.9568 157.4 45.5431 155.439 45.5431Z",
+            fill: "#D7D4CE"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ m("defs", { children: [
+        /* @__PURE__ */ m(
+          "filter",
+          {
+            id: "filter0_empty_state",
+            x: "97",
+            y: "-1",
+            width: "89",
+            height: "90",
+            filterUnits: "userSpaceOnUse",
+            colorInterpolationFilters: "sRGB",
+            children: [
+              /* @__PURE__ */ n("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+              /* @__PURE__ */ n(
+                "feColorMatrix",
+                {
+                  in: "SourceAlpha",
+                  type: "matrix",
+                  values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+                  result: "hardAlpha"
+                }
+              ),
+              /* @__PURE__ */ n("feOffset", { dx: "4", dy: "4" }),
+              /* @__PURE__ */ n("feComposite", { in2: "hardAlpha", operator: "out" }),
+              /* @__PURE__ */ n(
+                "feColorMatrix",
+                {
+                  type: "matrix",
+                  values: "0 0 0 0 0.8428 0 0 0 0 0.830064 0 0 0 0 0.8095 0 0 0 1 0"
+                }
+              ),
+              /* @__PURE__ */ n(
+                "feBlend",
+                {
+                  mode: "normal",
+                  in2: "BackgroundImageFix",
+                  result: "effect1_dropShadow"
+                }
+              ),
+              /* @__PURE__ */ n(
+                "feBlend",
+                {
+                  mode: "normal",
+                  in: "SourceGraphic",
+                  in2: "effect1_dropShadow",
+                  result: "shape"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ n("clipPath", { id: "clip0_empty_state", children: /* @__PURE__ */ n("rect", { width: "233", height: "233", fill: "white" }) })
+      ] })
+    ]
+  }
+), hn = P.memo(
+  ({ hasChannels: e, channelsLoaded: t }) => /* @__PURE__ */ n("div", { className: "messaging-empty-state flex items-center justify-center h-full p-8 text-balance", children: /* @__PURE__ */ m("div", { className: "flex flex-col items-center max-w-sm text-center", children: [
+    /* @__PURE__ */ n(ar, {}),
+    t && !e && /* @__PURE__ */ m("div", { className: "mt-8", children: [
+      /* @__PURE__ */ n("h2", { className: "font-medium text-black text-[18px] mb-2", children: "Your inbox is empty" }),
+      /* @__PURE__ */ n("p", { className: "text-[#676B5F] text-sm mb-6", children: "Share with your followers to start receiving messages" })
+    ] })
+  ] }) })
+);
+hn.displayName = "EmptyState";
+const Te = P.memo(({ message: e, onBack: t }) => /* @__PURE__ */ n("div", { className: "messaging-error-state flex items-center justify-center h-full p-8", children: /* @__PURE__ */ m("div", { className: "text-center max-w-sm", children: [
+  /* @__PURE__ */ n("div", { className: "w-24 h-24 bg-danger-alt/20 rounded-full flex items-center justify-center mx-auto mb-6", children: /* @__PURE__ */ n("span", { className: "text-4xl", children: "⚠️" }) }),
+  /* @__PURE__ */ n("h2", { className: "font-semibold text-charcoal mb-2", children: "Oops!" }),
+  /* @__PURE__ */ n("p", { className: "text-stone text-sm mb-6", children: e }),
+  t && /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: t,
+      className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-[#7f22fe] hover:bg-primary-alt rounded-lg transition-colors focus-ring",
+      children: "Go Back"
+    }
+  )
+] }) }));
+Te.displayName = "ErrorState";
+const ki = ({
+  capabilities: e = {},
+  className: t,
+  renderMessageInputActions: s,
+  renderConversationFooter: a,
+  onChannelSelect: r,
+  initialParticipantFilter: i,
+  initialParticipantData: l,
+  CustomChannelEmptyState: o,
+  showChannelList: d = !0,
+  filters: h,
+  channelRenderFilterFn: g,
+  channelListCustomEmptyStateIndicator: u,
+  onDeleteConversationClick: f,
+  onBlockParticipantClick: c,
+  onReportParticipantClick: b,
+  dmAgentEnabled: x,
+  messageMetadata: v,
+  onMessageSent: N,
+  showStarButton: w = !1,
+  chatbotVotingEnabled: E = !1,
+  viewerLanguage: I,
+  renderMessagePreview: S,
+  renderChannelBanner: D,
+  customProfileContent: T,
+  customChannelActions: F,
+  renderMessage: M,
+  onMessageLinkClick: R,
+  sendButton: A
+}) => {
+  const {
+    service: G,
+    client: k,
+    isConnected: j,
+    isLoading: W,
+    error: V,
+    refreshConnection: $,
+    debug: L
+  } = Rs(), [Y, _] = z(null), [O, p] = z(!1), [C, H] = z(!1), [q, he] = z(!1), [J, ee] = z(null), { showDeleteConversation: Ce = !0 } = e, ke = P.useMemo(() => {
+    const B = k == null ? void 0 : k.userID;
+    return {
+      ...{
+        type: "messaging",
+        last_message_at: { $exists: !0 },
+        ...B && {
+          members: { $in: [B] },
+          hidden: !1
+        }
+      },
+      ...h
+    };
+  }, [h, k == null ? void 0 : k.userID]), ce = Z(null), te = U(async () => {
+    if (!k || !j) return;
+    const B = k.userID;
+    if (B)
+      try {
+        L && console.log("[MessagingShell] Syncing channels for user:", B);
+        const K = await k.queryChannels(
+          {
+            type: "messaging",
+            members: { $in: [B] }
+          },
+          {},
+          { limit: 100 }
+        );
+        p(K.length > 0), H(!0), ce.current = B, L && console.log("[MessagingShell] Channels synced successfully:", {
+          channelCount: K.length
+        });
+      } catch (K) {
+        console.error("[MessagingShell] Failed to sync channels:", K);
+      }
+  }, [k, j, L]);
+  X(() => {
+    if (!k || !j) return;
+    const B = k.userID;
+    B && ce.current !== B && te();
+  }, [k, j, te]), X(() => {
+    if (!i || !k || !j) return;
+    (async () => {
+      const K = k.userID;
+      if (K)
+        try {
+          L && console.log(
+            "[MessagingShell] Loading initial conversation with:",
+            i
+          );
+          const Q = await k.queryChannels(
+            {
+              type: "messaging",
+              members: { $eq: [K, i] }
+            },
+            {},
+            { limit: 1 }
+          );
+          if (Q.length > 0)
+            _(Q[0]), he(!0), ee(null), r && r(Q[0]), L && console.log(
+              "[MessagingShell] Initial conversation loaded:",
+              Q[0].id
+            );
+          else if (l && G) {
+            L && console.log(
+              "[MessagingShell] No conversation found, creating one for:",
+              l
+            );
+            try {
+              const ae = await G.startChannelWithParticipant({
+                id: l.id,
+                name: l.name,
+                phone: l.phone
+              });
+              _(ae), he(!0), ee(null), r && r(ae), L && console.log(
+                "[MessagingShell] Channel created and loaded:",
+                ae.id
+              );
+            } catch (ae) {
+              console.error(
+                "[MessagingShell] Failed to create conversation:",
+                ae
+              ), ee("Failed to create conversation");
+            }
+          } else
+            ee(
+              "No conversation found with this account"
+            ), L && console.log(
+              "[MessagingShell] No conversation found for:",
+              i
+            );
+        } catch (Q) {
+          console.error(
+            "[MessagingShell] Failed to load initial conversation:",
+            Q
+          ), ee("Failed to load conversation");
+        }
+    })();
+  }, [
+    i,
+    l,
+    k,
+    j,
+    G,
+    L,
+    r
+  ]);
+  const se = U(
+    (B) => {
+      _(B), r == null || r(B);
+    },
+    [r]
+  ), de = U(() => {
+    q || _(null);
+  }, [q]), Oe = U(
+    async (B) => {
+      L && console.log("[MessagingShell] Leaving conversation:", B.id), _(null), he(!1), ce.current = null, await te();
+    },
+    [te, L]
+  ), Ee = U(
+    async (B) => {
+      L && console.log("[MessagingShell] Blocking participant:", B), _(null), he(!1), ce.current = null, await te();
+    },
+    [te, L]
+  ), ue = !!Y;
+  return W ? /* @__PURE__ */ n("div", { className: y("h-full", t), children: /* @__PURE__ */ n(Ae, {}) }) : V ? /* @__PURE__ */ n("div", { className: y("h-full", t), children: /* @__PURE__ */ n(Te, { message: V, onBack: $ }) }) : !j || !k ? /* @__PURE__ */ n("div", { className: y("h-full", t), children: /* @__PURE__ */ n(
+    Te,
+    {
+      message: "Not connected to messaging service",
+      onBack: $
+    }
+  ) }) : J ? /* @__PURE__ */ n("div", { className: y("h-full", t), children: /* @__PURE__ */ n(Te, { message: J }) }) : /* @__PURE__ */ n(
+    "div",
+    {
+      className: y(
+        "messaging-shell h-full bg-background-primary overflow-hidden",
+        t
+      ),
+      children: /* @__PURE__ */ m("div", { className: "flex h-full min-h-0", children: [
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: y(
+              "messaging-channel-list-sidebar min-h-0 min-w-0 lg:flex lg:flex-col",
+              {
+                "!hidden": d === !1 || q,
+                // Hide on mobile when channel selected, show on desktop with consistent wide width
+                "hidden lg:flex lg:flex-1 lg:max-w-2xl": d !== !1 && !q && ue,
+                // Show on mobile when no channel selected, use same wide width on desktop
+                "flex flex-col w-full lg:flex-1 lg:max-w-2xl": d !== !1 && !q && !ue
+              }
+            ),
+            children: /* @__PURE__ */ n(
+              Qt,
+              {
+                onChannelSelect: se,
+                selectedChannel: Y || void 0,
+                filters: ke,
+                channelRenderFilterFn: g,
+                customEmptyStateIndicator: u,
+                renderMessagePreview: S,
+                viewerLanguage: I
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: y(
+              "messaging-conversation-view flex-1 flex-col min-w-0 min-h-0",
+              {
+                // In direct conversation mode (or waiting for it), always show (full width)
+                flex: q || ue || i,
+                // Normal mode: hide on mobile when no channel selected
+                "hidden lg:flex": !q && !ue && !i
+              }
+            ),
+            children: Y ? /* @__PURE__ */ n("div", { className: "flex-1 min-h-0 flex flex-col", children: /* @__PURE__ */ n(
+              mn,
+              {
+                channel: Y,
+                onBack: de,
+                showBackButton: !q,
+                renderMessageInputActions: s,
+                renderConversationFooter: a,
+                renderChannelBanner: D,
+                onLeaveConversation: Oe,
+                onBlockParticipant: Ee,
+                CustomChannelEmptyState: o,
+                showDeleteConversation: Ce,
+                onDeleteConversationClick: f,
+                onBlockParticipantClick: c,
+                onReportParticipantClick: b,
+                dmAgentEnabled: x,
+                messageMetadata: v,
+                onMessageSent: N,
+                showStarButton: w,
+                chatbotVotingEnabled: E,
+                viewerLanguage: I,
+                customProfileContent: T,
+                customChannelActions: F,
+                renderMessage: M,
+                onMessageLinkClick: R,
+                sendButton: A
+              },
+              Y.id
+            ) }) : i ? (
+              // Show loading while creating/loading direct conversation channel
+              /* @__PURE__ */ n(Ae, {})
+            ) : /* @__PURE__ */ n(
+              hn,
+              {
+                hasChannels: O,
+                channelsLoaded: C
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}, rr = /^([a-z][a-z0-9+.-]*):/i, ir = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel", "sms"]);
+function fn(e) {
+  if (typeof e != "string") return;
+  const t = e.trim();
+  if (t === "") return;
+  const s = rr.exec(t);
+  if (s) {
+    const a = s[1].toLowerCase();
+    return ir.has(a) ? t : void 0;
+  }
+  return t.startsWith("//") || t.startsWith("/") ? t : `https://${t}`;
+}
+const or = {
+  dark: "bg-white text-[#121110] hover:bg-white/90",
+  light: "bg-[#121110] text-white hover:bg-[#2a2928]"
+}, lr = ({ variant: e, cta: t }) => {
+  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",
+    or[e]
+  ), a = fn(t.href);
+  return a ? /* @__PURE__ */ n(
+    "a",
+    {
+      href: a,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (r) => {
+        var i;
+        r.stopPropagation(), (i = t.onClick) == null || i.call(t);
+      },
+      className: `${s} no-underline`,
+      children: t.label
+    }
+  ) : /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: (r) => {
+        var i;
+        r.stopPropagation(), (i = t.onClick) == null || i.call(t);
+      },
+      className: s,
+      children: t.label
+    }
+  );
+}, cr = {
+  dark: "text-white",
+  light: "text-black/90"
+}, dr = "text-white/30", ur = {
+  dark: "text-white/55",
+  light: "text-black/55"
+}, ot = ({
+  variant: e,
+  title: t,
+  placeholderTitle: s,
+  description: a,
+  url: r,
+  appIcon: i,
+  cta: l,
+  trailingAction: o
+}) => {
+  const d = e === "dark", h = t ?? (d ? s : void 0) ?? "", g = h.trim() !== "", u = a != null && a.trim() !== "", f = typeof r == "string" ? r.trim() : "", c = f !== "", b = l != null;
+  if (!g && !u && !c && !b) return null;
+  const v = y(
+    "truncate text-base font-medium leading-6",
+    d && !t ? dr : cr[e]
+  ), N = y(
+    "truncate text-xs leading-4",
+    ur[e]
+  );
+  return /* @__PURE__ */ m("div", { className: "px-4 py-3", children: [
+    /* @__PURE__ */ m("div", { className: "flex items-end gap-3", children: [
+      /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+        /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          g && /* @__PURE__ */ m("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: y("min-w-0", v), children: h })
+          ] }),
+          u && /* @__PURE__ */ n("p", { className: N, children: a })
+        ] }),
+        !b && c && /* @__PURE__ */ n("p", { className: N, children: f })
+      ] }),
+      o && /* @__PURE__ */ n("div", { className: "shrink-0", children: o })
+    ] }),
+    l && /* @__PURE__ */ n(lr, { variant: e, cta: l })
+  ] });
+}, mr = 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"
+  // treatment from the mobile spec. The drop shadow remains for depth.
+  "border border-black/[0.08]",
+  "shadow-[0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
+), De = ({
+  variant: e,
+  children: t,
+  href: s,
+  onClick: a,
+  ariaLabel: r,
+  rootRef: i,
+  topRight: l,
+  bgClassName: o,
+  "data-testid": d
+}) => {
+  const h = s != null || a != null, g = y(
+    mr,
+    o ?? (e === "dark" ? "bg-[#121110]" : "bg-white"),
+    // `focus-ring` is a design-system utility from the component-library
+    // tailwind preset — outline-none + a black 2px focus-visible ring
+    // with offset, so keyboard users can see the focused card.
+    h ? "cursor-pointer no-underline focus-ring" : null
+  ), u = l ? /* @__PURE__ */ n("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: l }) : null;
+  return s ? /* @__PURE__ */ m(
+    "a",
+    {
+      ref: i,
+      href: s,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: a,
+      "data-testid": d,
+      className: g,
+      children: [
+        t,
+        u
+      ]
+    }
+  ) : a ? /* @__PURE__ */ m(
+    "button",
+    {
+      ref: i,
+      type: "button",
+      onClick: a,
+      "aria-label": r,
+      "data-testid": d,
+      className: y(g, "text-left"),
+      children: [
+        t,
+        u
+      ]
+    }
+  ) : /* @__PURE__ */ m(
+    "div",
+    {
+      ref: i,
+      "data-testid": d,
+      className: g,
+      children: [
+        t,
+        u
+      ]
+    }
+  );
+}, hr = {
+  dark: "bg-white/10",
+  light: "bg-black/5"
+}, fr = {
+  dark: "size-16 text-white/25",
+  light: "size-16 text-black/25"
+}, Fe = (e, t) => !!t && !!e && le(e) === "audio", gr = (e, t) => {
+  if (!t || !e) return !1;
+  const s = le(e);
+  return s === "video" || s === "audio";
+}, lt = "bg-[#F2F3F4]", Re = ({
+  variant: e,
+  thumbnailUrl: t,
+  sourceUrl: s,
+  title: a,
+  mimeType: r = "image/*",
+  topLeft: i,
+  topRight: l
+}) => {
+  const o = le(r), d = !!s && o === "video";
+  return Fe(r, s) ? /* @__PURE__ */ n("div", { className: "p-3", children: /* @__PURE__ */ n(
+    "audio",
+    {
+      src: s,
+      controls: !0,
+      preload: "metadata",
+      className: "block w-full",
+      children: /* @__PURE__ */ n("track", { kind: "captions" })
+    }
+  ) }) : /* @__PURE__ */ m(
+    "div",
+    {
+      className: y(
+        "relative h-[180px] w-full overflow-hidden",
+        d && "bg-black"
+      ),
+      children: [
+        d ? /* @__PURE__ */ n(
+          "video",
+          {
+            src: s,
+            poster: t,
+            controls: !0,
+            playsInline: !0,
+            preload: "metadata",
+            className: "absolute inset-0 h-full w-full object-contain",
+            children: /* @__PURE__ */ n("track", { kind: "captions" })
+          }
+        ) : t ? /* @__PURE__ */ n(
+          "img",
+          {
+            src: t,
+            alt: a ?? "",
+            draggable: !1,
+            className: "absolute inset-0 h-full w-full object-cover"
+          }
+        ) : /* @__PURE__ */ n(
+          "div",
+          {
+            className: y(
+              "flex h-full w-full items-center justify-center",
+              hr[e]
+            ),
+            children: ge(r, {
+              className: fr[e],
+              weight: "regular"
+            })
+          }
+        ),
+        i ? /* @__PURE__ */ n("div", { className: "pointer-events-auto absolute left-3 top-3 z-10", children: i }) : null,
+        l ? /* @__PURE__ */ n("div", { className: "pointer-events-auto absolute right-3 top-3 z-10", children: l }) : null
+      ]
+    }
+  );
+}, br = ({
+  title: e,
+  placeholderTitle: t,
+  description: s,
+  url: a,
+  mimeType: r,
+  thumbnailUrl: i,
+  sourceUrl: l,
+  layout: o = "featured",
+  appIcon: d,
+  cta: h,
+  onDismiss: g,
+  onEditClick: u
+}) => {
+  const f = o === "classic", c = Fe(r, l), b = g ? /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: g,
+      "aria-label": "Dismiss attachment",
+      className: "flex size-6 items-center justify-center rounded-full bg-[#121110] text-white",
+      children: /* @__PURE__ */ n(xe, { className: "size-3", weight: "bold" })
+    }
+  ) : void 0, x = u ? /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: u,
+      "aria-label": "Edit attachment",
+      className: "flex size-10 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/15",
+      children: /* @__PURE__ */ n(Ms, { className: "size-5", weight: "regular" })
+    }
+  ) : void 0;
+  return c ? /* @__PURE__ */ n(De, { variant: "dark", bgClassName: lt, children: /* @__PURE__ */ m("div", { className: "flex items-center gap-2 pr-3", children: [
+    /* @__PURE__ */ n("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ n(
+      Re,
+      {
+        variant: "dark",
+        sourceUrl: l,
+        title: e,
+        mimeType: r
+      }
+    ) }),
+    b && /* @__PURE__ */ n("div", { className: "shrink-0", children: b })
+  ] }) }) : /* @__PURE__ */ m(
+    De,
+    {
+      variant: "dark",
+      topRight: f ? b : void 0,
+      children: [
+        !f && /* @__PURE__ */ n(
+          Re,
+          {
+            variant: "dark",
+            thumbnailUrl: i,
+            sourceUrl: l,
+            title: e,
+            mimeType: r,
+            topRight: b
+          }
+        ),
+        /* @__PURE__ */ n(
+          ot,
+          {
+            variant: "dark",
+            title: e,
+            placeholderTitle: t,
+            description: s,
+            url: a,
+            appIcon: d,
+            cta: h,
+            trailingAction: x
+          }
+        )
+      ]
+    }
+  );
+}, pr = ({
+  title: e,
+  description: t,
+  url: s,
+  mimeType: a,
+  thumbnailUrl: r,
+  sourceUrl: i,
+  layout: l = "featured",
+  appIcon: o,
+  cta: d,
+  onClick: h
+}) => {
+  const g = gr(a, i), u = fn(s), f = d == null && u != null && !g ? u : void 0, c = d == null && !g ? h : void 0, b = Fe(a, i) ? lt : void 0, x = d && h ? {
+    ...d,
+    onClick: () => {
+      var v;
+      h(), (v = d.onClick) == null || v.call(d);
+    }
+  } : d;
+  return /* @__PURE__ */ m(
+    De,
+    {
+      variant: "light",
+      href: f,
+      onClick: c,
+      ariaLabel: e ?? "Open attachment preview",
+      bgClassName: b,
+      "data-testid": "link-attachment",
+      children: [
+        l === "featured" && /* @__PURE__ */ n(
+          Re,
+          {
+            variant: "light",
+            thumbnailUrl: r,
+            sourceUrl: i,
+            title: e,
+            mimeType: a
+          }
+        ),
+        /* @__PURE__ */ n(
+          ot,
+          {
+            variant: "light",
+            title: e,
+            description: t,
+            url: s,
+            appIcon: o,
+            cta: x
+          }
+        )
+      ]
+    }
+  );
+}, vr = ({
+  title: e,
+  placeholderTitle: t,
+  description: s,
+  url: a,
+  mimeType: r,
+  thumbnailUrl: i,
+  sourceUrl: l,
+  layout: o = "featured",
+  appIcon: d,
+  cta: h
+}) => /* @__PURE__ */ m(
+  De,
+  {
+    variant: "dark",
+    bgClassName: Fe(r, l) ? lt : void 0,
+    children: [
+      o === "featured" && /* @__PURE__ */ n(
+        Re,
+        {
+          variant: "dark",
+          thumbnailUrl: i,
+          sourceUrl: l,
+          title: e,
+          mimeType: r
+        }
+      ),
+      /* @__PURE__ */ n(
+        ot,
+        {
+          variant: "dark",
+          title: e,
+          placeholderTitle: t,
+          description: s,
+          url: a,
+          appIcon: d,
+          cta: h
+        }
+      )
+    ]
+  }
+), Ei = {
+  Composer: br,
+  Sent: vr,
+  Received: pr
+}, xr = {
+  dark: "bg-[#121110]",
+  light: "bg-[#e9eaed]"
+}, wr = {
+  dark: "text-white",
+  light: "text-[#080707]"
+}, Nr = {
+  dark: "border-white/[0.08]",
+  light: "border-black/[0.08]"
+}, yr = (e) => e === "dark" ? "sender" : "receiver", _r = {
+  sender: {
+    single: "rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-[18px]",
+    first: "rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-[4px]",
+    middle: "rounded-tl-[18px] rounded-tr-[4px] rounded-bl-[18px] rounded-br-[4px]",
+    end: "rounded-tl-[18px] rounded-tr-[4px] rounded-bl-[18px] rounded-br-[18px]"
+  },
+  receiver: {
+    single: "rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-[18px]",
+    first: "rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[4px] rounded-br-[18px]",
+    middle: "rounded-tl-[4px] rounded-tr-[18px] rounded-bl-[4px] rounded-br-[18px]",
+    end: "rounded-tl-[4px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-[18px]"
+  }
+}, we = ({
+  variant: e,
+  text: t,
+  bordered: s = !0,
+  groupPosition: a = "single",
+  className: r,
+  children: i,
+  "data-testid": l
+}) => {
+  const o = t != null && t !== "", d = _r[yr(e)][a];
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      "data-testid": l,
+      "data-group-position": a,
+      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
+        // inset matches `--str-chat__spacing-2 --str-chat__spacing-4`
+        // so attachments share the same hit / negative-space rhythm
+        // as the surrounding `CustomMessage` text bubbles.
+        "relative w-[280px] overflow-hidden px-2 py-2",
+        d,
+        xr[e],
+        wr[e],
+        s && "border",
+        s && Nr[e],
+        r
+      ),
+      children: [
+        i,
+        o ? /* @__PURE__ */ n(
+          "p",
+          {
+            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.
+              "whitespace-pre-wrap break-words leading-snug",
+              // Top gutter only — bubble's `py-2` already supplies the
+              // bottom inset, and the children above already render
+              // flush against their own bottom edge.
+              "pt-2",
+              "px-2"
+            ),
+            children: t
+          }
+        ) : null
+      ]
+    }
+  );
+}, Ne = ({
+  onClick: e,
+  variant: t = "overlay",
+  ariaLabel: s = "Dismiss attachment"
+}) => /* @__PURE__ */ n(
+  "button",
+  {
+    type: "button",
+    onClick: (a) => {
+      a.stopPropagation(), e();
+    },
+    "aria-label": s,
+    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"
+    ),
+    children: /* @__PURE__ */ n(xe, { className: "size-3", weight: "bold" })
+  }
+), ye = (e) => e === "received" ? "light" : "dark", Ii = ({
+  firstOfGroup: e,
+  endOfGroup: t,
+  groupedByUser: s
+}) => !s || e && t ? "single" : e ? "first" : t ? "end" : "middle", Cr = ({
+  src: e,
+  mimeType: t,
+  filename: s,
+  items: a
+}) => a && a.length > 0 ? a : e ? [{ src: e, mimeType: t, filename: s }] : [], kr = ({ item: e, preload: t, trailingAction: s }) => /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+  /* @__PURE__ */ n(
+    "audio",
+    {
+      src: e.src,
+      controls: !0,
+      preload: e.preload ?? t,
+      className: "block min-w-0 flex-1",
+      children: e.mimeType ? /* @__PURE__ */ n("source", { src: e.src, type: e.mimeType }) : null
+    }
+  ),
+  s ?? null
+] }), ct = ({
+  state: e,
+  src: t,
+  mimeType: s,
+  filename: a,
+  items: r,
+  text: i,
+  groupPosition: l,
+  preload: o,
+  onDismiss: d
+}) => {
+  const h = ye(e), g = e === "composer" && !!d, u = Cr({ src: t, mimeType: s, filename: a, items: r });
+  if (u.length === 0)
+    return null;
+  const f = o ?? (u.length > 1 ? "none" : "metadata");
+  return /* @__PURE__ */ n(
+    we,
+    {
+      variant: h,
+      text: i,
+      groupPosition: l,
+      "data-testid": "audio-attachment",
+      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: u.map((c, b) => /* @__PURE__ */ n(
+        kr,
+        {
+          item: c,
+          preload: f,
+          trailingAction: (
+            // Composer only supports a single attachment, so the
+            // dismiss control sits on the only player.
+            g && b === 0 ? /* @__PURE__ */ n(Ne, { onClick: d, variant: "inline" }) : void 0
+          )
+        },
+        `${c.src}-${b}`
+      )) })
+    }
+  );
+}, Er = (e) => /* @__PURE__ */ n(ct, { ...e, state: "composer" }), Ir = (e) => /* @__PURE__ */ n(ct, { ...e, state: "sent" }), Sr = (e) => /* @__PURE__ */ n(ct, { ...e, state: "received" }), Tr = {
+  Composer: Er,
+  Sent: Ir,
+  Received: Sr
+};
+function Mr(e) {
+  return !Number.isFinite(e) || e < 0 ? "" : e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : e < 1024 * 1024 * 1024 ? `${(e / (1024 * 1024)).toFixed(2)} MB` : `${(e / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+const Ar = {
+  pdf: "PDF",
+  doc: "DOC",
+  xls: "XLS",
+  csv: "CSV",
+  ppt: "PPT",
+  zip: "ZIP",
+  text: "TXT",
+  markdown: "MD"
+};
+function Dr(e, t) {
+  if (t) {
+    const r = t.lastIndexOf(".");
+    if (r > 0 && r < t.length - 1) {
+      const i = t.slice(r + 1);
+      if (i && i.length <= 5) return i.toUpperCase();
+    }
+  }
+  if (!e) return;
+  if (le(e) === "document") {
+    const r = nn(e), i = Ar[r];
+    if (i) return i;
+    if (e === "application/octet-stream") return;
+  }
+  const a = e.split("/")[1];
+  if (!(!a || a === "*"))
+    return a.toUpperCase();
+}
+function Rr(e, t, s) {
+  const a = Dr(e, t), r = typeof s == "number" && s > 0 ? Mr(s) : void 0;
+  return [a, r].filter(Boolean).join(" · ") || void 0;
+}
+function ne(e) {
+  try {
+    const s = new URL(e).pathname.split("/").pop();
+    return s && s.length > 0 ? decodeURIComponent(s) : "download";
+  } catch {
+    return "download";
+  }
+}
+const Lr = {
+  dark: "text-white/55",
+  light: "text-black/65"
+}, Fr = {
+  dark: "bg-white/10",
+  light: "bg-black/5"
+}, Or = {
+  dark: "text-white/85",
+  light: "text-black/85"
+}, gn = ({
+  variant: e,
+  filename: t,
+  title: s,
+  mimeType: a = "application/octet-stream",
+  fileSize: r,
+  onActivate: i,
+  activateLabel: l,
+  trailingAction: o
+}) => {
+  const d = s ?? t ?? "File", h = Rr(a, t, r), g = /* @__PURE__ */ n(
+    "div",
+    {
+      className: y(
+        "flex size-10 shrink-0 items-center justify-center rounded-sm",
+        Fr[e]
+      ),
+      "aria-hidden": !0,
+      children: ge(a, {
+        className: y("size-6", Or[e]),
+        weight: "regular"
+      })
+    }
+  ), u = /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-1 flex-col text-left", children: [
+    /* @__PURE__ */ n("p", { className: "truncate font-medium leading-snug", children: d }),
+    h ? /* @__PURE__ */ n(
+      "p",
+      {
+        className: y(
+          "truncate text-xs leading-4",
+          Lr[e]
+        ),
+        children: h
+      }
+    ) : null
+  ] }), f = i ? /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      onClick: i,
+      "aria-label": l,
+      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]"
+      ),
+      children: [
+        g,
+        u
+      ]
+    }
+  ) : /* @__PURE__ */ m(ie, { children: [
+    g,
+    u
+  ] });
+  return /* @__PURE__ */ m("div", { className: "flex items-center gap-3 px-3 py-2", children: [
+    f,
+    o ? /* @__PURE__ */ n("div", { className: "shrink-0", children: o }) : null
+  ] });
+};
+async function bn(e, t) {
+  const s = t ?? ne(e);
+  try {
+    const a = await fetch(e, { mode: "cors" });
+    if (!a.ok) throw new Error(`HTTP ${a.status}`);
+    const r = await a.blob(), i = URL.createObjectURL(r), l = document.createElement("a");
+    l.href = i, l.download = s, l.style.display = "none", document.body.appendChild(l), l.click(), document.body.removeChild(l), URL.revokeObjectURL(i);
+  } catch {
+    if (!window.open(e, "_blank", "noopener,noreferrer")) {
+      const r = document.createElement("a");
+      r.href = e, r.download = s, r.target = "_blank", r.rel = "noopener noreferrer", r.style.display = "none", document.body.appendChild(r), r.click(), document.body.removeChild(r);
+    }
+  }
+}
+const zr = ({
+  src: e,
+  filename: t,
+  fileSize: s,
+  mimeType: a,
+  title: r,
+  items: i
+}) => i && i.length > 0 ? i : e ? [{ src: e, filename: t, fileSize: s, mimeType: a, title: r }] : [], Pr = ({
+  variant: e,
+  item: t,
+  index: s,
+  onActivate: a,
+  trailingAction: r
+}) => {
+  const i = t.filename ?? ne(t.src);
+  return /* @__PURE__ */ n(
+    gn,
+    {
+      variant: e,
+      filename: i,
+      title: t.title,
+      mimeType: t.mimeType ?? "application/octet-stream",
+      fileSize: t.fileSize,
+      onActivate: () => a(s),
+      activateLabel: `Download ${i}`,
+      trailingAction: r
+    }
+  );
+}, dt = ({
+  state: e,
+  src: t,
+  filename: s,
+  fileSize: a,
+  mimeType: r,
+  title: i,
+  items: l,
+  text: o,
+  groupPosition: d,
+  onClick: h,
+  onDismiss: g
+}) => {
+  const u = ye(e), f = e === "composer" && !!g, c = zr({
+    src: t,
+    filename: s,
+    fileSize: a,
+    mimeType: r,
+    title: i,
+    items: l
+  }), b = (v) => {
+    if ((h == null ? void 0 : h(v)) === !1) return;
+    const N = c[v];
+    if (!N) return;
+    const w = N.filename ?? ne(N.src);
+    bn(N.src, w);
+  };
+  if (c.length === 0)
+    return null;
+  const x = /* @__PURE__ */ n(
+    "span",
+    {
+      className: y(
+        "flex size-8 items-center justify-center rounded-full",
+        u === "dark" ? "text-white/70" : "text-black/70"
+      ),
+      "aria-hidden": !0,
+      children: /* @__PURE__ */ n(ve, { className: "size-5", weight: "bold" })
+    }
+  );
+  return /* @__PURE__ */ n(
+    we,
+    {
+      variant: u,
+      text: o,
+      groupPosition: d,
+      "data-testid": "file-attachment",
+      children: /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: c.map((v, N) => /* @__PURE__ */ n(
+        Pr,
+        {
+          variant: u,
+          item: v,
+          index: N,
+          onActivate: b,
+          trailingAction: f && N === 0 ? /* @__PURE__ */ n(Ne, { onClick: g, variant: "inline" }) : x
+        },
+        `${v.src}-${N}`
+      )) })
+    }
+  );
+}, Br = (e) => /* @__PURE__ */ n(dt, { ...e, state: "composer" }), $r = (e) => /* @__PURE__ */ n(dt, { ...e, state: "sent" }), jr = (e) => /* @__PURE__ */ n(dt, { ...e, state: "received" }), Ur = {
+  Composer: Br,
+  Sent: $r,
+  Received: jr
+}, ut = ({
+  onPrev: e,
+  onNext: t,
+  prevLabel: s = "Previous",
+  nextLabel: a = "Next"
+}) => /* @__PURE__ */ m(ie, { children: [
+  /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: e,
+      "aria-label": s,
+      className: "mes-media-viewer__nav mes-media-viewer__nav--prev",
+      children: /* @__PURE__ */ n(As, { size: 20, weight: "bold", "aria-hidden": !0 })
+    }
+  ),
+  /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: t,
+      "aria-label": a,
+      className: "mes-media-viewer__nav mes-media-viewer__nav--next",
+      children: /* @__PURE__ */ n(We, { size: 20, weight: "bold", "aria-hidden": !0 })
+    }
+  )
+] }), pn = ({
+  url: e,
+  filename: t,
+  variant: s = "pill",
+  label: a = "Download",
+  iconOnly: r,
+  tone: i = "dark",
+  onTriggered: l
+}) => {
+  const [o, d] = z(!1), h = U(
+    (c) => {
+      c.stopPropagation(), !o && (d(!0), bn(e, t).catch(() => {
+      }).finally(() => {
+        d(!1), l == null || l();
+      }));
+    },
+    [o, e, t, l]
+  ), g = r ?? s !== "pill", f = { className: y(
+    s === "pill" ? "size-4" : "size-5",
+    "shrink-0"
+  ), weight: "bold" };
+  return s === "inline" ? /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: h,
+      disabled: o,
+      "aria-label": a,
+      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",
+          light: "text-black/70 hover:bg-black/[0.08] hover:text-black"
+        }[i]
+      ),
+      children: o ? /* @__PURE__ */ n(
+        pe,
+        {
+          className: "size-4 animate-spin",
+          weight: "bold",
+          "aria-hidden": !0
+        }
+      ) : /* @__PURE__ */ n(
+        ve,
+        {
+          className: "size-5 shrink-0",
+          weight: "bold",
+          "aria-hidden": !0
+        }
+      )
+    }
+  ) : s === "viewer" ? /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: h,
+      disabled: o,
+      "aria-label": a,
+      className: "mes-media-viewer__action",
+      children: o ? /* @__PURE__ */ n(pe, { size: 20, weight: "bold", "aria-hidden": !0 }) : /* @__PURE__ */ n(ve, { size: 20, weight: "bold", "aria-hidden": !0 })
+    }
+  ) : /* @__PURE__ */ m(
+    "button",
+    {
+      type: "button",
+      onClick: h,
+      disabled: o,
+      "aria-label": g ? a : void 0,
+      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"
+      ),
+      children: [
+        o ? /* @__PURE__ */ n(
+          pe,
+          {
+            className: "size-4 animate-spin",
+            weight: "bold",
+            "aria-hidden": !0
+          }
+        ) : /* @__PURE__ */ n(ve, { ...f, "aria-hidden": !0 }),
+        g ? null : a
+      ]
+    }
+  );
+}, Ve = (e, t, s) => Math.min(Math.max(e, t), s), mt = ({
+  length: e,
+  initialIndex: t,
+  open: s
+}) => {
+  const a = Ve(t, 0, Math.max(e - 1, 0)), [r, i] = z(a);
+  X(() => {
+    s && i(Ve(t, 0, Math.max(e - 1, 0)));
+  }, [s, t, e]), X(() => {
+    i((d) => Ve(d, 0, Math.max(e - 1, 0)));
+  }, [e]);
+  const l = U(() => {
+    e <= 1 || i((d) => d <= 0 ? e - 1 : d - 1);
+  }, [e]), o = U(() => {
+    e <= 1 || i((d) => d >= e - 1 ? 0 : d + 1);
+  }, [e]);
+  return X(() => {
+    if (!s || e <= 1) return;
+    const d = (h) => {
+      if (h.key !== "ArrowLeft" && h.key !== "ArrowRight") return;
+      const g = document.activeElement;
+      g && (g.tagName === "VIDEO" || g.tagName === "AUDIO") || (h.preventDefault(), h.key === "ArrowLeft" ? l() : o());
+    };
+    return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
+  }, [s, e, l, o]), { index: r, prev: l, next: o };
+}, ht = ({
+  open: e,
+  onClose: t,
+  ariaLabel: s,
+  counter: a,
+  actions: r,
+  children: i,
+  "data-testid": l
+}) => {
+  const o = Z(null), d = Z(null);
+  return X(() => {
+    var f;
+    const u = o.current;
+    if (u) {
+      if (e) {
+        if (!u.open)
+          if (typeof u.showModal == "function")
+            try {
+              u.showModal();
+            } catch {
+              u.setAttribute("open", "");
+            }
+          else
+            u.setAttribute("open", "");
+        const c = typeof document < "u" ? document.activeElement : null;
+        return (f = d.current) == null || f.focus(), () => {
+          if (u.open)
+            if (typeof u.close == "function")
+              try {
+                u.close();
+              } catch {
+                u.removeAttribute("open");
+              }
+            else
+              u.removeAttribute("open");
+          c && document.body.contains(c) && c.focus();
+        };
+      }
+      if (u.open)
+        if (typeof u.close == "function")
+          try {
+            u.close();
+          } catch {
+            u.removeAttribute("open");
+          }
+        else
+          u.removeAttribute("open");
+    }
+  }, [e]), // The native `<dialog>` element ships its own keyboard dismissal
+  // (Escape, handled by the platform and surfaced through `onClose`),
+  // so the `onClick` on the backdrop doesn't need a paired keyboard
+  // listener — that's the whole point of using `<dialog>`. The
+  // `jsx-a11y` rules below don't model `<dialog>` as interactive, so
+  // we silence them locally with the rationale captured here.
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+  /* @__PURE__ */ m(
+    "dialog",
+    {
+      ref: o,
+      className: "mes-media-viewer",
+      "aria-label": s ?? "Attachment viewer",
+      "data-testid": l,
+      onClose: () => {
+        t();
+      },
+      onClick: (u) => {
+        u.target === o.current && t();
+      },
+      children: [
+        /* @__PURE__ */ m("div", { className: "mes-media-viewer__chrome", children: [
+          a ? /* @__PURE__ */ n("span", { className: "mes-media-viewer__counter", children: a }) : null,
+          /* @__PURE__ */ m("div", { className: "mes-media-viewer__actions", children: [
+            r,
+            /* @__PURE__ */ n(
+              "button",
+              {
+                ref: d,
+                type: "button",
+                onClick: t,
+                "aria-label": "Close viewer",
+                className: "mes-media-viewer__action",
+                children: /* @__PURE__ */ n(xe, { size: 20, weight: "bold", "aria-hidden": !0 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ n("div", { className: "mes-media-viewer__body", children: i })
+      ]
+    }
+  );
+}, vn = ({
+  open: e,
+  items: t,
+  initialIndex: s = 0,
+  onClose: a
+}) => {
+  const { index: r, prev: i, next: l } = mt({
+    length: t.length,
+    initialIndex: s,
+    open: e
+  }), o = t[r], d = re(
+    () => (o == null ? void 0 : o.filename) ?? (o ? ne(o.src) : "image"),
+    [o]
+  );
+  return o ? /* @__PURE__ */ m(
+    ht,
+    {
+      open: e,
+      onClose: a,
+      ariaLabel: d,
+      counter: t.length > 1 ? `${r + 1} / ${t.length}` : void 0,
+      actions: /* @__PURE__ */ n(
+        pn,
+        {
+          url: o.src,
+          filename: d,
+          variant: "viewer",
+          label: `Download ${d}`
+        }
+      ),
+      "data-testid": "image-viewer",
+      children: [
+        /* @__PURE__ */ n(
+          "img",
+          {
+            src: o.src,
+            alt: o.alt ?? d,
+            draggable: !1,
+            loading: "eager",
+            decoding: "async",
+            className: "mes-media-viewer__image"
+          },
+          `${r}:${o.src}`
+        ),
+        t.length > 1 ? /* @__PURE__ */ n(
+          ut,
+          {
+            onPrev: i,
+            onNext: l,
+            prevLabel: "Previous image",
+            nextLabel: "Next image"
+          }
+        ) : null
+      ]
+    }
+  ) : null;
+}, Vr = "relative block size-full overflow-hidden bg-black/5 outline-none focus-visible:ring-2 focus-visible:ring-white/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black", xn = ({
+  tiles: e,
+  onTileActivate: t,
+  maxVisible: s = 4,
+  className: a
+}) => {
+  const r = e.length;
+  if (r === 0) return null;
+  const i = e.slice(0, Math.min(r, s)), l = r - i.length, o = (d, h, g) => {
+    const u = y(Vr, "h-full w-full");
+    return t ? /* @__PURE__ */ m(
+      "button",
+      {
+        type: "button",
+        onClick: () => t(h),
+        "aria-label": d.ariaLabel ?? `Open media ${h + 1}`,
+        className: y(u, "cursor-zoom-in"),
+        children: [
+          d.content,
+          g
+        ]
+      },
+      h
+    ) : /* @__PURE__ */ m("div", { className: u, children: [
+      d.content,
+      g
+    ] }, h);
+  };
+  return i.length === 1 ? /* @__PURE__ */ n("div", { className: y("aspect-square w-full", a), children: o(i[0], 0) }) : i.length === 2 ? /* @__PURE__ */ n(
+    "div",
+    {
+      className: y(
+        "grid aspect-[16/9] w-full grid-cols-2 gap-0.5",
+        a
+      ),
+      children: i.map((d, h) => o(d, h))
+    }
+  ) : i.length === 3 ? /* @__PURE__ */ m(
+    "div",
+    {
+      className: y(
+        "grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5",
+        a
+      ),
+      children: [
+        /* @__PURE__ */ n("div", { className: "row-span-2", children: o(i[0], 0) }),
+        o(i[1], 1),
+        o(i[2], 2)
+      ]
+    }
+  ) : /* @__PURE__ */ n(
+    "div",
+    {
+      className: y(
+        "grid aspect-[4/3] w-full grid-cols-2 grid-rows-2 gap-0.5",
+        a
+      ),
+      children: i.map((d, h) => {
+        const g = l > 0 && h === i.length - 1;
+        return o(
+          d,
+          h,
+          g ? /* @__PURE__ */ m("div", { className: "absolute inset-0 flex items-center justify-center bg-black/55 text-2xl font-semibold text-white", children: [
+            "+",
+            l
+          ] }) : null
+        );
+      })
+    }
+  );
+}, _e = (e) => {
+  const [t, s] = z(!1), [a, r] = z(0), i = U(
+    (o) => {
+      (e == null ? void 0 : e(o)) !== !1 && (r(o), s(!0));
+    },
+    [e]
+  ), l = U(() => s(!1), []);
+  return { viewerOpen: t, viewerIndex: a, handleActivate: i, closeViewer: l };
+}, Gr = (e, t, s, a) => ({
+  ariaLabel: `Open image ${t + 1} of ${s}`,
+  content: /* @__PURE__ */ n(
+    "img",
+    {
+      src: e.src,
+      alt: e.alt ?? "",
+      width: e.width,
+      height: e.height,
+      draggable: !1,
+      loading: e.loading ?? a,
+      decoding: "async",
+      className: "absolute inset-0 size-full rounded-md object-cover"
+    }
+  )
+}), Hr = ({
+  src: e,
+  alt: t,
+  items: s
+}) => s && s.length > 0 ? s : e ? [{ src: e, alt: t }] : [], wn = (e, t) => e.map((s, a) => ({
+  src: s.src,
+  alt: s.alt,
+  filename: t && e.length === 1 ? t : t ? `${t} (${a + 1})` : void 0
+})), Yr = ({ src: e, alt: t, filename: s, loading: a = "lazy", onClick: r, onDismiss: i }) => {
+  const { viewerOpen: l, viewerIndex: o, handleActivate: d, closeViewer: h } = _e(
+    r
+  );
+  return /* @__PURE__ */ m("div", { className: "relative w-fit", children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onClick: () => d(0),
+        "aria-label": "Open image",
+        className: "block size-[280px] cursor-zoom-in overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-black/40",
+        children: /* @__PURE__ */ n(
+          "img",
+          {
+            src: e,
+            alt: t ?? "",
+            draggable: !1,
+            loading: a,
+            decoding: "async",
+            className: "size-full object-cover"
+          }
+        )
+      }
+    ),
+    i ? /* @__PURE__ */ n("div", { className: "absolute right-2 top-2 z-10", children: /* @__PURE__ */ n(Ne, { onClick: i }) }) : null,
+    /* @__PURE__ */ n(
+      vn,
+      {
+        open: l,
+        items: wn([{ src: e, alt: t }], s),
+        initialIndex: o,
+        onClose: h
+      }
+    )
+  ] });
+}, Nn = ({
+  state: e,
+  src: t,
+  alt: s,
+  filename: a,
+  items: r,
+  text: i,
+  groupPosition: l,
+  loading: o = "lazy",
+  onClick: d
+}) => {
+  const h = Hr({ src: t, alt: s, items: r }), g = ye(e), { viewerOpen: u, viewerIndex: f, handleActivate: c, closeViewer: b } = _e(
+    d
+  );
+  if (h.length === 0)
+    return null;
+  const x = h.map(
+    (v, N) => Gr(v, N, h.length, o)
+  );
+  return /* @__PURE__ */ m(
+    we,
+    {
+      variant: g,
+      text: i,
+      groupPosition: l,
+      "data-testid": "image-attachment",
+      children: [
+        /* @__PURE__ */ n("div", { className: "relative", children: /* @__PURE__ */ n(xn, { tiles: x, onTileActivate: c }) }),
+        /* @__PURE__ */ n(
+          vn,
+          {
+            open: u,
+            items: wn(h, a),
+            initialIndex: f,
+            onClose: b
+          }
+        )
+      ]
+    }
+  );
+}, Wr = (e) => /* @__PURE__ */ n(Yr, { ...e }), qr = (e) => /* @__PURE__ */ n(Nn, { ...e, state: "sent" }), Xr = (e) => /* @__PURE__ */ n(Nn, { ...e, state: "received" }), Zr = {
+  Composer: Wr,
+  Sent: qr,
+  Received: Xr
+}, Kr = ({
+  open: e,
+  items: t,
+  initialIndex: s = 0,
+  onClose: a
+}) => {
+  const { index: r, prev: i, next: l } = mt({
+    length: t.length,
+    initialIndex: s,
+    open: e
+  }), o = t[r], d = re(
+    () => (o == null ? void 0 : o.filename) ?? (o ? ne(o.src) : "document"),
+    [o]
+  ), h = re(
+    () => o ? Jr(o.src) : void 0,
+    [o]
+  );
+  return !o || !h ? null : /* @__PURE__ */ m(
+    ht,
+    {
+      open: e,
+      onClose: a,
+      ariaLabel: d,
+      counter: t.length > 1 ? `${r + 1} / ${t.length}` : void 0,
+      "data-testid": "pdf-viewer",
+      children: [
+        /* @__PURE__ */ n(
+          "iframe",
+          {
+            src: h,
+            title: d,
+            className: "mes-media-viewer__iframe",
+            sandbox: "allow-scripts allow-forms allow-popups allow-downloads"
+          },
+          `${r}:${o.src}`
+        ),
+        t.length > 1 ? /* @__PURE__ */ n(
+          ut,
+          {
+            onPrev: i,
+            onNext: l,
+            prevLabel: "Previous document",
+            nextLabel: "Next document"
+          }
+        ) : null
+      ]
+    }
+  );
+}, Jr = (e) => {
+  const t = e.indexOf("#"), s = t === -1 ? e : e.slice(0, t), a = t === -1 ? "" : e.slice(t + 1), r = new URLSearchParams(a);
+  return r.has("toolbar") || r.set("toolbar", "0"), r.has("navpanes") || r.set("navpanes", "0"), `${s}#${r.toString()}`;
+}, Qr = ({
+  src: e,
+  filename: t,
+  fileSize: s,
+  title: a,
+  items: r
+}) => r && r.length > 0 ? r : e ? [{ src: e, filename: t, fileSize: s, title: a }] : [], ei = ({
+  variant: e,
+  item: t,
+  index: s,
+  onActivate: a,
+  trailingAction: r
+}) => {
+  const i = t.filename ?? ne(t.src);
+  return /* @__PURE__ */ n(
+    gn,
+    {
+      variant: e,
+      filename: i,
+      title: t.title,
+      mimeType: "application/pdf",
+      fileSize: t.fileSize,
+      onActivate: () => a(s),
+      activateLabel: `Open ${i}`,
+      trailingAction: r
+    }
+  );
+}, ft = ({
+  state: e,
+  src: t,
+  filename: s,
+  fileSize: a,
+  title: r,
+  items: i,
+  text: l,
+  groupPosition: o,
+  onClick: d,
+  onDismiss: h
+}) => {
+  const g = ye(e), u = Qr({ src: t, filename: s, fileSize: a, title: r, items: i }), { viewerOpen: f, viewerIndex: c, handleActivate: b, closeViewer: x } = _e(
+    d
+  ), v = e === "composer" && !!h;
+  if (u.length === 0)
+    return null;
+  const N = u.map((w) => ({
+    src: w.src,
+    filename: w.filename ?? ne(w.src)
+  }));
+  return /* @__PURE__ */ m(
+    we,
+    {
+      variant: g,
+      text: l,
+      groupPosition: o,
+      "data-testid": "pdf-attachment",
+      children: [
+        /* @__PURE__ */ n("div", { className: "flex flex-col gap-2", children: u.map((w, E) => {
+          const I = w.filename ?? ne(w.src), S = v && E === 0 ? /* @__PURE__ */ n(Ne, { onClick: h, variant: "inline" }) : e === "composer" ? void 0 : /* @__PURE__ */ n(
+            pn,
+            {
+              url: w.src,
+              filename: I,
+              variant: "inline",
+              label: `Download ${I}`,
+              tone: g
+            }
+          );
+          return /* @__PURE__ */ n(
+            ei,
+            {
+              variant: g,
+              item: w,
+              index: E,
+              onActivate: b,
+              trailingAction: S
+            },
+            `${w.src}-${E}`
+          );
+        }) }),
+        /* @__PURE__ */ n(
+          Kr,
+          {
+            open: f,
+            items: N,
+            initialIndex: c,
+            onClose: x
+          }
+        )
+      ]
+    }
+  );
+}, ti = (e) => /* @__PURE__ */ n(ft, { ...e, state: "composer" }), ni = (e) => /* @__PURE__ */ n(ft, { ...e, state: "sent" }), si = (e) => /* @__PURE__ */ n(ft, { ...e, state: "received" }), ai = {
+  Composer: ti,
+  Sent: ni,
+  Received: si
+}, yn = ({
+  open: e,
+  items: t,
+  initialIndex: s = 0,
+  onClose: a
+}) => {
+  const { index: r, prev: i, next: l } = mt({
+    length: t.length,
+    initialIndex: s,
+    open: e
+  }), o = t[r], d = re(
+    () => (o == null ? void 0 : o.filename) ?? (o ? ne(o.src) : "video"),
+    [o]
+  );
+  return o ? /* @__PURE__ */ m(
+    ht,
+    {
+      open: e,
+      onClose: a,
+      ariaLabel: d,
+      counter: t.length > 1 ? `${r + 1} / ${t.length}` : void 0,
+      "data-testid": "video-viewer",
+      children: [
+        /* @__PURE__ */ n(
+          "video",
+          {
+            src: o.src,
+            poster: o.poster,
+            controls: !0,
+            autoPlay: !0,
+            muted: !0,
+            playsInline: !0,
+            preload: o.preload ?? "metadata",
+            className: "mes-media-viewer__video",
+            children: o.mimeType ? /* @__PURE__ */ n("source", { src: o.src, type: o.mimeType }) : null
+          },
+          `${r}:${o.src}`
+        ),
+        t.length > 1 ? /* @__PURE__ */ n(
+          ut,
+          {
+            onPrev: i,
+            onNext: l,
+            prevLabel: "Previous video",
+            nextLabel: "Next video"
+          }
+        ) : null
+      ]
+    }
+  ) : null;
+}, ri = () => /* @__PURE__ */ n("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ n("span", { className: "flex size-12 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur", children: /* @__PURE__ */ n(He, { className: "size-6", weight: "fill", "aria-hidden": !0 }) }) }), _n = ({
+  item: e,
+  index: t
+}) => /* @__PURE__ */ m("div", { className: "absolute inset-0 size-full bg-[#0d0d0d]", children: [
+  e.poster ? /* @__PURE__ */ n(
+    "img",
+    {
+      src: e.poster,
+      alt: `Video ${t + 1} thumbnail`,
+      draggable: !1,
+      loading: "lazy",
+      decoding: "async",
+      className: "absolute inset-0 size-full rounded-md object-cover"
+    }
+  ) : /* @__PURE__ */ n("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ n(
+    Ht,
+    {
+      className: "size-16 rounded-md text-white/30",
+      weight: "regular",
+      "aria-hidden": !0
+    }
+  ) }),
+  /* @__PURE__ */ n(ri, {})
+] }), ii = (e, t, s) => ({
+  ariaLabel: `Play video ${t + 1} of ${s}`,
+  content: /* @__PURE__ */ n(_n, { item: e, index: t })
+}), oi = ({
+  src: e,
+  poster: t,
+  mimeType: s,
+  preload: a,
+  items: r
+}) => r && r.length > 0 ? a ? r.map((i) => ({ ...i, preload: i.preload ?? a })) : r : e ? [{ src: e, poster: t, mimeType: s, preload: a }] : [], Cn = (e, t) => e.map((s, a) => ({
+  src: s.src,
+  poster: s.poster,
+  mimeType: s.mimeType,
+  preload: s.preload,
+  filename: t && e.length === 1 ? t : t ? `${t} (${a + 1})` : void 0
+})), li = ({ src: e, poster: t, mimeType: s, filename: a, preload: r, onClick: i, onDismiss: l }) => {
+  const { viewerOpen: o, viewerIndex: d, handleActivate: h, closeViewer: g } = _e(
+    i
+  );
+  return /* @__PURE__ */ m("div", { className: "relative w-fit", children: [
+    /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        onClick: () => h(0),
+        "aria-label": "Play video",
+        className: "relative block size-[280px] cursor-pointer overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-black/40",
+        children: /* @__PURE__ */ n(_n, { item: { src: e, poster: t, mimeType: s }, index: 0 })
+      }
+    ),
+    l ? /* @__PURE__ */ n("div", { className: "absolute right-2 top-2 z-10", children: /* @__PURE__ */ n(Ne, { onClick: l }) }) : null,
+    /* @__PURE__ */ n(
+      yn,
+      {
+        open: o,
+        items: Cn(
+          [{ src: e, poster: t, mimeType: s, preload: r }],
+          a
+        ),
+        initialIndex: d,
+        onClose: g
+      }
+    )
+  ] });
+}, kn = ({
+  state: e,
+  src: t,
+  poster: s,
+  mimeType: a,
+  filename: r,
+  items: i,
+  text: l,
+  groupPosition: o,
+  preload: d,
+  onClick: h
+}) => {
+  const g = oi({ src: t, poster: s, mimeType: a, preload: d, items: i }), u = ye(e), { viewerOpen: f, viewerIndex: c, handleActivate: b, closeViewer: x } = _e(
+    h
+  );
+  if (g.length === 0)
+    return null;
+  const v = g.map(
+    (N, w) => ii(N, w, g.length)
+  );
+  return /* @__PURE__ */ m(
+    we,
+    {
+      variant: u,
+      text: l,
+      groupPosition: o,
+      "data-testid": "video-attachment",
+      children: [
+        /* @__PURE__ */ n("div", { className: "relative", children: /* @__PURE__ */ n(
+          xn,
+          {
+            tiles: v,
+            onTileActivate: b,
+            className: "overflow-hidden rounded-md"
+          }
+        ) }),
+        /* @__PURE__ */ n(
+          yn,
+          {
+            open: f,
+            items: Cn(g, r),
+            initialIndex: c,
+            onClose: x
+          }
+        )
+      ]
+    }
+  );
+}, ci = (e) => /* @__PURE__ */ n(li, { ...e }), di = (e) => /* @__PURE__ */ n(kn, { ...e, state: "sent" }), ui = (e) => /* @__PURE__ */ n(kn, { ...e, state: "received" }), mi = {
+  Composer: ci,
+  Sent: di,
+  Received: ui
+}, Si = {
+  Image: Zr,
+  Video: mi,
+  Audio: Tr,
+  Pdf: ai,
+  File: Ur
+}, hi = ({
+  question: e,
+  onClick: t,
+  loading: s = !1,
+  className: a
+}) => /* @__PURE__ */ n(
+  "button",
+  {
+    type: "button",
+    onClick: t,
+    disabled: s,
+    style: { backgroundColor: "#E6E5E3" },
+    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,
+        "opacity-50 cursor-not-allowed": s
+      },
+      a
+    ),
+    children: e
+  }
+), Ti = ({
+  faqs: e,
+  onFaqClick: t,
+  loadingFaqId: s,
+  headerText: a,
+  className: r,
+  avatarImage: i,
+  avatarName: l
+}) => {
+  const o = e.filter((d) => d.enabled).sort((d, h) => (d.order ?? 0) - (h.order ?? 0));
+  return o.length === 0 ? null : /* @__PURE__ */ n("div", { className: r, children: /* @__PURE__ */ m("div", { className: "flex gap-3 items-end", children: [
+    (i || l) && /* @__PURE__ */ n("div", { className: "flex-none", children: /* @__PURE__ */ n(
+      oe,
+      {
+        id: l || "account",
+        name: l || "Account",
+        image: i,
+        size: 24,
+        shape: "circle"
+      }
+    ) }),
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: "flex-1 flex flex-col gap-3 rounded-lg p-4",
+        style: { backgroundColor: "#F1F0EE" },
+        children: [
+          a && /* @__PURE__ */ n("p", { className: "text-md text-charcoal mb-4", children: a }),
+          o.map((d) => /* @__PURE__ */ n(
+            hi,
+            {
+              question: d.question,
+              onClick: () => t(d.id),
+              loading: s === d.id
+            },
+            d.id
+          ))
+        ]
+      }
+    )
+  ] }) });
+};
+export {
+  sn as A,
+  ta as B,
+  er as C,
+  Rs as D,
+  Ti as F,
+  Ei as L,
+  _i as M,
+  Se as a,
+  oe as b,
+  Qt as c,
+  mn as d,
+  Ci as e,
+  hi as f,
+  le as g,
+  Pt as h,
+  Si as i,
+  Sa as j,
+  yi as k,
+  ki as l,
+  Rr as m,
+  Mr as n,
+  Ps as o,
+  Dr as p,
+  Zt as q,
+  ge as r,
+  on as s,
+  js as t,
+  Ii as u,
+  Bs as v,
+  rt as w,
+  it as x,
+  tt as y,
+  Ia as z
+};
+//# sourceMappingURL=index-CeHWbIiy.js.map