@linktr.ee/messaging-react 4.4.3 → 4.4.4-rc-1788190776

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, o as r, r as i, s as a } from "./AttachmentCard-BqwWgqvi.js";
+import { a as e, i as t, n, o as r, r as i, s as a } from "./AttachmentCard-DSekwIOA.js";
 import o, { Suspense as s, createContext as c, useCallback as l, useContext as u, useEffect as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
 import { StreamChatService as g } from "@linktr.ee/messaging-core";
 import { LinkPreviewsManager as _, StreamChat as v } from "stream-chat";
@@ -364,6 +364,7 @@ function gt(e) {
 //#region src/components/Avatar/index.tsx
 var _t = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape: a = "squircle", dmAgentEnabled: o = !1 }) => {
 	let s = ht(e), c = gt(e), l = n < 32 ? Math.round(n * .45) : n < 56 ? 14 : n < 120 ? 18 : 36, u = n >= 40 ? 2 : 1, d = a === "circle" ? { borderRadius: "50%" } : { borderRadius: "1rem" }, f = /* @__PURE__ */ U("div", {
+		"data-testid": "avatar-inner",
 		className: "h-full w-full overflow-hidden",
 		style: d,
 		children: t ? /* @__PURE__ */ U("img", {
@@ -372,6 +373,7 @@ var _t = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape:
 			className: "h-full w-full object-cover"
 		}) : /* @__PURE__ */ U("div", {
 			"aria-hidden": "true",
+			"data-testid": "avatar-fallback",
 			className: J("avatar-fallback flex h-full w-full items-center justify-center font-semibold select-none transition-colors"),
 			style: {
 				fontSize: l,
@@ -381,6 +383,7 @@ var _t = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape:
 		})
 	});
 	return /* @__PURE__ */ W("div", {
+		"data-testid": "avatar",
 		className: J("relative flex-shrink-0", r),
 		style: {
 			"--str-chat__avatar-size": `${n}px`,
@@ -391,6 +394,7 @@ var _t = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape:
 		},
 		children: [i && /* @__PURE__ */ U("div", {
 			"aria-hidden": "true",
+			"data-testid": "avatar-star",
 			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__ */ U(We, {
 				className: "size-3 text-yellow-600",
@@ -413,7 +417,7 @@ var _t = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape:
 	});
 }, vt = "https://linktr.ee/s/about/trust-center/report", yt = ({ channel: e, participant: t, showBlockParticipant: n = !0, enabled: r = !0, onLeaveConversation: i, onBlockParticipant: a, onDeleteConversationClick: o, onBlockParticipantClick: s, onReportParticipantClick: c, onActionComplete: l, logLabel: u = "useChannelModerationActions" }) => {
 	let { service: f, debug: p } = rt(), m = t?.user?.id, g = !!(r && n && f && m), [_, v] = h(!1), [y, b] = h(null), [x, S] = h(!1), [C, w] = h(!1), T = g && (y?.participantId !== m || y?.service !== f);
-	return d(() => {
+	d(() => {
 		if (!g || !f || !m) {
 			v(!1), b(null);
 			return;
@@ -440,48 +444,40 @@ var _t = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape:
 		f,
 		m,
 		u
-	]), {
+	]);
+	let E = async () => {
+		if (!x) {
+			o?.(), p && console.log(`[${u}] Leave conversation`, e.cid), S(!0);
+			try {
+				let t = e._client?.userID ?? null;
+				await e.hide(t, !1), i && await i(e), l?.();
+			} catch (e) {
+				console.error(`[${u}] Failed to leave conversation`, e);
+			} finally {
+				S(!1);
+			}
+		}
+	}, D = (e) => async () => {
+		if (C || !f) return;
+		s?.();
+		let n = t?.user?.id;
+		p && console.log(`[${u}] ${e === "block" ? "Block" : "Unblock"} member`, n), w(!0);
+		try {
+			e === "block" ? await f.blockUser(n) : await f.unBlockUser(n), a && await a(n), l?.();
+		} catch (t) {
+			console.error(`[${u}] Failed to ${e} member`, t);
+		} finally {
+			w(!1);
+		}
+	};
+	return {
 		isParticipantBlocked: _,
 		isCheckingBlockedStatus: T,
 		isLeaving: x,
 		isUpdatingBlockStatus: C,
-		handleLeaveConversation: async () => {
-			if (!x) {
-				o?.(), p && console.log(`[${u}] Leave conversation`, e.cid), S(!0);
-				try {
-					let t = e._client?.userID ?? null;
-					await e.hide(t, !1), i && await i(e), l?.();
-				} catch (e) {
-					console.error(`[${u}] Failed to leave conversation`, e);
-				} finally {
-					S(!1);
-				}
-			}
-		},
-		handleBlockUser: async () => {
-			if (!(C || !f)) {
-				s?.(), p && console.log(`[${u}] Block member`, t?.user?.id), w(!0);
-				try {
-					await f.blockUser(t?.user?.id), a && await a(t?.user?.id), l?.();
-				} catch (e) {
-					console.error(`[${u}] Failed to block member`, e);
-				} finally {
-					w(!1);
-				}
-			}
-		},
-		handleUnblockUser: async () => {
-			if (!(C || !f)) {
-				s?.(), p && console.log(`[${u}] Unblock member`, t?.user?.id), w(!0);
-				try {
-					await f.unBlockUser(t?.user?.id), a && await a(t?.user?.id), l?.();
-				} catch (e) {
-					console.error(`[${u}] Failed to unblock member`, e);
-				} finally {
-					w(!1);
-				}
-			}
-		},
+		handleLeaveConversation: E,
+		handleBlockUser: D("block"),
+		handleUnblockUser: D("unblock"),
 		handleReportUser: () => {
 			c?.(), l?.(), window.open(vt, "_blank", "noopener,noreferrer");
 		}
@@ -711,7 +707,7 @@ function Nt(e) {
 }
 //#endregion
 //#region src/components/CustomMessage/LockedAttachment/index.tsx
-var Pt = o.lazy(() => import("./Card-C7uLQbYz.js")), Ft = o.lazy(() => import("./Card-f51K6V7Y.js")), It = () => /* @__PURE__ */ U("div", {
+var Pt = o.lazy(() => import("./Card-C7uLQbYz.js")), Ft = o.lazy(() => import("./Card-BhwBkgxI.js")), It = () => /* @__PURE__ */ U("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
 }), Lt = (e) => /* @__PURE__ */ U(s, {
@@ -951,9 +947,11 @@ var fn = {
 			children: /* @__PURE__ */ W("div", {
 				className: "flex min-w-0 flex-col gap-[2px]",
 				children: [/* @__PURE__ */ U("div", {
+					"data-testid": "card-body-skeleton-bar",
 					className: J("h-5 w-3/4", t),
 					"aria-hidden": !0
 				}), /* @__PURE__ */ U("div", {
+					"data-testid": "card-body-skeleton-bar",
 					className: J("h-4 w-1/2", t),
 					"aria-hidden": !0
 				})]
@@ -1006,12 +1004,13 @@ var fn = {
 			cta: l
 		})]
 	});
-}, yn = "Loading link preview", bn = J("relative w-[var(--lt-msg-card-width,290px)] max-w-full select-none overflow-hidden", "rounded-[20px]"), xn = "flex h-[250px] flex-col", Sn = ({ variant: e, children: t, href: n, onClick: r, ariaLabel: i, rootRef: a, topRight: o, bgClassName: s, accentHex: c, fixedHeight: l = !1, busy: u = !1, "data-testid": d }) => {
+}, yn = "Loading link preview", bn = J("relative w-[var(--lt-msg-card-width,290px)] max-w-full select-none overflow-hidden", "rounded-[20px]"), xn = "flex h-[250px] flex-col", Sn = ({ variant: e, children: t, href: n, onClick: r, ariaLabel: i, rootRef: a, topRight: o, bgClassName: s, accentHex: c, fixedHeight: l = !1, busy: u = !1, "data-testid": d = "link-card" }) => {
 	let f = J("messaging-link-card", bn, l ? xn : "block", s ?? (e === "dark" ? "bg-[#1e2330]" : "bg-[#f1f0ee]"), n != null || r != null ? "cursor-pointer no-underline focus-ring" : null), p = u ? {
 		role: "status",
 		"aria-busy": !0,
 		"aria-label": yn
 	} : void 0, m = c ? { "--accent": c } : void 0, h = o ? /* @__PURE__ */ U("div", {
+		"data-testid": "card-shell-top-right",
 		className: "pointer-events-auto absolute right-3 top-3 z-10",
 		children: o
 	}) : null;
@@ -1063,6 +1062,7 @@ var fn = {
 		className: "p-3",
 		children: /* @__PURE__ */ U("audio", {
 			...e,
+			"data-testid": "card-thumbnail-audio",
 			src: o,
 			controls: !0,
 			preload: "metadata",
@@ -1070,12 +1070,15 @@ var fn = {
 			children: /* @__PURE__ */ U("track", { kind: "captions" })
 		})
 	}) : /* @__PURE__ */ W("div", {
+		"data-testid": "card-thumbnail-hero",
 		className: J("relative min-h-0 w-full flex-1 overflow-hidden", m && "bg-black"),
 		children: [
 			d ? /* @__PURE__ */ U("div", {
+				"data-testid": "card-thumbnail-skeleton",
 				className: J("h-full w-full animate-pulse", Cn[r]),
 				"aria-hidden": !0
 			}) : m ? /* @__PURE__ */ W(H, { children: [/* @__PURE__ */ U("video", {
+				"data-testid": "card-thumbnail-video",
 				src: o,
 				poster: h,
 				controls: !0,
@@ -1098,6 +1101,7 @@ var fn = {
 				onError: f,
 				className: "absolute inset-0 h-full w-full object-cover"
 			}) : /* @__PURE__ */ U("div", {
+				"data-testid": "card-thumbnail-placeholder",
 				className: J("flex h-full w-full items-center justify-center", Cn[r]),
 				children: n(c, {
 					className: wn[r],
@@ -1105,10 +1109,12 @@ var fn = {
 				})
 			}),
 			l ? /* @__PURE__ */ U("div", {
+				"data-testid": "card-thumbnail-top-left",
 				className: "pointer-events-auto absolute left-3 top-3 z-10",
 				children: l
 			}) : null,
 			u ? /* @__PURE__ */ U("div", {
+				"data-testid": "card-thumbnail-top-right",
 				className: "pointer-events-auto absolute right-3 top-3 z-10",
 				children: u
 			}) : null
@@ -2144,6 +2150,7 @@ var cr = ({ src: e, filename: t, fileSize: n, mimeType: r, title: i, items: a })
 		"data-testid": "video-viewer",
 		children: [u ? /* @__PURE__ */ U("video", {
 			ref: c,
+			"data-testid": "video-viewer-media",
 			src: g.src,
 			poster: g.poster,
 			controls: !0,
@@ -2477,6 +2484,7 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 		children: [/* @__PURE__ */ W("div", {
 			className: "str-chat__message-bubble",
 			"data-attachment-bubble": "true",
+			"data-testid": "message-attachment-bubble",
 			style: {
 				background: "transparent",
 				borderRadius: 0,
@@ -2485,6 +2493,7 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 			},
 			children: [d, !l && /* @__PURE__ */ U(M, {})]
 		}), l ? /* @__PURE__ */ W("div", {
+			"data-testid": "message-caption-bubble",
 			className: J("str-chat__message-bubble", { "relative isolate": p }),
 			children: [
 				/* @__PURE__ */ U(R, {
@@ -2729,6 +2738,7 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 		e.dismissPreview(t);
 	};
 	return t.length > 0 ? /* @__PURE__ */ U("div", {
+		"data-testid": "link-preview-list",
 		className: "messaging-link-preview-list flex flex-col items-stretch w-full gap-2",
 		children: t.map((e) => {
 			let t = _.previewIsLoading(e);
@@ -2771,9 +2781,11 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 		return e.addEventListener("paste", t), () => e.removeEventListener("paste", t);
 	}, []), /* @__PURE__ */ W("div", {
 		ref: s,
+		"data-testid": "composer-card",
 		className: "central-container flex flex-col min-w-0 w-full max-h-[calc(var(--messaging-surface-height,100dvh)*0.5)] overflow-y-auto overscroll-contain 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)] [&>:not(.messaging-composer-previews):not(.messaging-composer-row)]:p-2",
 		"data-dd-privacy": "mask",
 		children: [/* @__PURE__ */ W("div", {
+			"data-testid": "composer-previews",
 			className: "messaging-composer-previews empty:hidden flex flex-col gap-2 px-2 pt-2",
 			children: [
 				/* @__PURE__ */ U(te, {}),
@@ -2781,6 +2793,7 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 				/* @__PURE__ */ U(a, {})
 			]
 		}), /* @__PURE__ */ W("div", {
+			"data-testid": "composer-row",
 			className: "messaging-composer-row flex items-start",
 			children: [/* @__PURE__ */ U(ie, {
 				"aria-disabled": e || void 0,
@@ -2792,6 +2805,7 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 				readOnly: e,
 				tabIndex: e ? -1 : void 0
 			}), /* @__PURE__ */ U("div", {
+				"data-testid": "send-button-wrapper",
 				className: "sticky bottom-2 mt-auto mb-2 mr-2 shrink-0 pt-2",
 				children: /* @__PURE__ */ U(i, {
 					sendMessage: t,
@@ -2834,12 +2848,14 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 		};
 	}, [l]), r ? l ? /* @__PURE__ */ W("div", {
 		ref: u,
+		"data-testid": "composer-chrome",
 		className: "messaging-composer-chrome messaging-composer-chrome--floating",
 		children: [/* @__PURE__ */ U(Ti, {}), /* @__PURE__ */ W("div", {
 			className: "relative z-10 flex flex-col",
 			children: [
 				t?.(),
 				/* @__PURE__ */ U("div", {
+					"data-testid": "composer-locked-panel",
 					className: "messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4",
 					children: i ? /* @__PURE__ */ U("p", {
 						className: "max-w-[345px] text-center text-xs font-normal leading-[1.3] tracking-[0.12px] text-black/40",
@@ -2852,6 +2868,7 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 	}) : /* @__PURE__ */ W(H, { children: [
 		t?.(),
 		/* @__PURE__ */ U("div", {
+			"data-testid": "composer-locked-panel",
 			className: "messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4",
 			children: i ? /* @__PURE__ */ U("p", {
 				className: "max-w-[345px] text-center text-xs font-normal leading-[1.3] tracking-[0.12px] text-black/40",
@@ -2861,6 +2878,7 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 		n?.()
 	] }) : l ? /* @__PURE__ */ W("div", {
 		ref: u,
+		"data-testid": "composer-chrome",
 		className: "messaging-composer-chrome messaging-composer-chrome--floating",
 		children: [/* @__PURE__ */ U(Ti, {}), /* @__PURE__ */ W("div", {
 			className: "relative z-10 flex min-h-0 flex-col",
@@ -2869,6 +2887,7 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 				children: [/* @__PURE__ */ W("div", {
 					inert: c ? "" : void 0,
 					"aria-disabled": c || void 0,
+					"data-testid": "message-input",
 					className: "message-input flex min-h-0 items-end gap-4 aria-disabled:opacity-40",
 					children: [e && /* @__PURE__ */ U("div", {
 						className: "flex h-12 shrink-0 items-center justify-center",
@@ -2887,6 +2906,7 @@ var fi = ({ groupPosition: e, isMyMessage: t, message: n, renderText: r }) => {
 			/* @__PURE__ */ W("div", {
 				inert: c ? "" : void 0,
 				"aria-disabled": c || void 0,
+				"data-testid": "message-input",
 				className: "message-input flex min-h-0 items-end gap-4 aria-disabled:opacity-40",
 				children: [e && /* @__PURE__ */ U("div", {
 					className: "flex h-12 shrink-0 items-center justify-center",
@@ -3290,6 +3310,7 @@ var Ki = ({ onBack: e, showBackButton: t, renderMessageInputActions: n, renderMe
 	let te = we(e.type) ? { "--lt-msg-card-width": "368px" } : void 0;
 	return /* @__PURE__ */ U("div", {
 		ref: ee,
+		"data-testid": "channel-view",
 		className: J("messaging-channel-view h-full flex flex-col", c),
 		style: te,
 		children: /* @__PURE__ */ U(Li.Provider, {
@@ -3573,6 +3594,7 @@ var Zi = o.createContext({
 							children: "Starred conversation. "
 						}), h]
 					}), y && /* @__PURE__ */ U("span", {
+						"data-testid": "channel-preview-timestamp",
 						className: "text-xs text-[#717070] flex-shrink-0",
 						children: y
 					})]
@@ -3582,6 +3604,7 @@ var Zi = o.createContext({
 						className: "text-sm text-[#717070] flex-1 line-clamp-1",
 						children: x
 					}), S > 0 && /* @__PURE__ */ U("span", {
+						"data-testid": "channel-preview-unread-badge",
 						className: "bg-[#7f22fe] text-white text-[10px] rounded-full h-4 flex items-center justify-center p-1 min-w-4 text-center flex-shrink-0",
 						children: S > 99 ? "99+" : S
 					})]
@@ -3694,6 +3717,7 @@ var aa = "line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.02em]", oa
 	return /* @__PURE__ */ U("div", {
 		className: "shrink-0 px-4 py-3",
 		children: f ? /* @__PURE__ */ W("div", {
+			"data-testid": "rich-card-chin-row",
 			className: "flex items-center justify-between gap-3",
 			children: [p, /* @__PURE__ */ U(la, {
 				surface: e,
@@ -3911,6 +3935,7 @@ var aa = "line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.02em]", oa
 				className: "flex-1 flex flex-col gap-3 rounded-lg p-4",
 				style: { backgroundColor: "#F1F0EE" },
 				children: [r && /* @__PURE__ */ U("p", {
+					"data-testid": "faq-list-header",
 					className: "text-md text-charcoal mb-4",
 					children: r
 				}), s.map((e) => /* @__PURE__ */ U(Da, {