@linktr.ee/messaging-react 4.5.1 → 4.6.0-rc-1788328793

package/dist/index.d.ts

@@ -298,6 +298,13 @@ export declare interface ChannelViewProps {
      * and filter by starred/pinned status.
      */
     showStarButton?: boolean;
+    /**
+     * Show the starred badge next to the participant name in the channel header
+     * when the channel is starred. Defaults to `showStarButton`, so hosts that
+     * replace the star button with their own control (e.g. a context menu via
+     * `renderChannelActions`) can keep the badge by passing this explicitly.
+     */
+    showStarBadge?: boolean;
     /**
      * @deprecated No longer rendered. The redesigned header shows built-in paid
      * and starred badges instead. Kept temporarily so existing call sites type-check.

package/dist/index.js

@@ -571,35 +571,35 @@ var xt = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape:
 			})
 		})]
 	});
-}, Et = "flex size-10 flex-shrink-0 items-center justify-center rounded-full bg-white/65 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.06),0px_0px_0px_1px_rgba(0,0,0,0.04)] backdrop-blur-[40px] transition-filter duration-150 hover:brightness-95 aria-expanded:brightness-95 focus-ring", Dt = "CUSTOMER_PAID", Ot = (e) => typeof e == "string" && e.trim().replace(/[\s-]+/g, "_").toUpperCase() === Dt, kt = ({ className: e, onBack: t, showBackButton: n, showStarButton: r = !1, onLeaveConversation: i, onBlockParticipant: a, showDeleteConversation: s = !0, showBlockParticipant: c = !0, showReportParticipant: l = !0, onDeleteConversationClick: u, onBlockParticipantClick: d, onReportParticipantClick: f, customChannelActions: p, renderChannelActions: m, showChannelInfo: h = !0, onParticipantNameClick: g }) => {
-	let { channel: _ } = _e(), { client: v } = ve(), y = o.useMemo(() => dt(_.state?.members, v?.userID, _.type), [
-		_.state?.members,
-		v?.userID,
-		_.type
-	]), b = ht(y?.user), x = y?.user?.image, S = ut(_), C = Ot(_.data?.customer_tag) && y?.is_follower === !0, w = r && S, T = C || w || !!g, E = async () => {
+}, Et = "flex size-10 flex-shrink-0 items-center justify-center rounded-full bg-white/65 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.06),0px_0px_0px_1px_rgba(0,0,0,0.04)] backdrop-blur-[40px] transition-filter duration-150 hover:brightness-95 aria-expanded:brightness-95 focus-ring", Dt = "CUSTOMER_PAID", Ot = (e) => typeof e == "string" && e.trim().replace(/[\s-]+/g, "_").toUpperCase() === Dt, kt = ({ className: e, onBack: t, showBackButton: n, showStarButton: r = !1, showStarBadge: i = r, onLeaveConversation: a, onBlockParticipant: s, showDeleteConversation: c = !0, showBlockParticipant: l = !0, showReportParticipant: u = !0, onDeleteConversationClick: d, onBlockParticipantClick: f, onReportParticipantClick: p, customChannelActions: m, renderChannelActions: h, showChannelInfo: g = !0, onParticipantNameClick: _ }) => {
+	let { channel: v } = _e(), { client: y } = ve(), b = o.useMemo(() => dt(v.state?.members, y?.userID, v.type), [
+		v.state?.members,
+		y?.userID,
+		v.type
+	]), x = ht(b?.user), S = b?.user?.image, C = ut(v), w = Ot(v.data?.customer_tag) && b?.is_follower === !0, T = i && C, E = w || T || !!_, D = async () => {
 		try {
-			S ? await _.unpin() : await _.pin();
+			C ? await v.unpin() : await v.pin();
 		} catch (e) {
 			console.error("[ChannelHeaderRedesign] Failed to update pinned status:", e);
 		}
-	}, D = /* @__PURE__ */ q(G, { children: [/* @__PURE__ */ K(xt, {
-		id: y?.user?.id || _.id || "unknown",
-		name: b,
-		image: x,
+	}, O = /* @__PURE__ */ q(G, { children: [/* @__PURE__ */ K(xt, {
+		id: b?.user?.id || v.id || "unknown",
+		name: x,
+		image: S,
 		shape: "circle",
 		size: 48,
 		className: "-mb-2"
 	}), /* @__PURE__ */ K("span", {
-		className: X("relative z-10 flex max-w-full flex-col items-center justify-center rounded-full border border-white/10 bg-white/65 py-1.5 shadow-[0px_0px_0px_0px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)] backdrop-blur-[2px] transition-filter duration-150 group-hover:brightness-95", T ? "pl-3 pr-2" : "px-3"),
+		className: X("relative z-10 flex max-w-full flex-col items-center justify-center rounded-full border border-white/10 bg-white/65 py-1.5 shadow-[0px_0px_0px_0px_rgba(0,0,0,0.04),0px_1px_2px_0px_rgba(0,0,0,0.04),0px_8px_32px_0px_rgba(0,0,0,0.1)] backdrop-blur-[2px] transition-filter duration-150 group-hover:brightness-95", E ? "pl-3 pr-2" : "px-3"),
 		children: /* @__PURE__ */ q("span", {
 			className: "flex max-w-full items-center justify-center",
 			children: [/* @__PURE__ */ K("span", {
 				className: "min-w-0 truncate text-sm font-bold leading-[1.43] tracking-[0.28px] text-black/90",
-				children: b
-			}), T && /* @__PURE__ */ q("span", {
+				children: x
+			}), E && /* @__PURE__ */ q("span", {
 				className: "ml-2 flex gap-1",
 				children: [
-					C && /* @__PURE__ */ K("span", {
+					w && /* @__PURE__ */ K("span", {
 						"aria-label": "Paid customer",
 						className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-[#34C759] text-white",
 						children: /* @__PURE__ */ K(Pe, {
@@ -607,7 +607,7 @@ var xt = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape:
 							weight: "bold"
 						})
 					}),
-					w && /* @__PURE__ */ K("span", {
+					T && /* @__PURE__ */ K("span", {
 						className: "messaging-header-star-badge flex overflow-hidden",
 						children: /* @__PURE__ */ K("span", {
 							"aria-label": "Starred conversation",
@@ -618,7 +618,7 @@ var xt = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape:
 							})
 						})
 					}),
-					g && /* @__PURE__ */ K(Me, {
+					_ && /* @__PURE__ */ K(Me, {
 						"aria-hidden": "true",
 						className: "size-4 shrink-0 text-black/65",
 						weight: "bold"
@@ -645,46 +645,46 @@ var xt = ({ id: e, image: t, size: n = 40, className: r, starred: i = !1, shape:
 				/* @__PURE__ */ K("div", {
 					className: "flex min-w-0 justify-center",
 					"data-dd-privacy": "mask",
-					children: g ? /* @__PURE__ */ K("button", {
+					children: _ ? /* @__PURE__ */ K("button", {
 						type: "button",
-						onClick: g,
-						"aria-label": `View details for ${b}`,
+						onClick: _,
+						"aria-label": `View details for ${x}`,
 						className: "group flex min-w-0 max-w-full appearance-none flex-col items-center border-0 bg-transparent px-2 focus-ring focus-visible:outline-none",
-						children: D
+						children: O
 					}) : /* @__PURE__ */ K("div", {
 						className: "flex min-w-0 max-w-full flex-col items-center px-2",
-						children: D
+						children: O
 					})
 				}),
 				/* @__PURE__ */ q("div", {
 					className: "flex items-start justify-end gap-2",
 					children: [r && /* @__PURE__ */ K("button", {
 						className: Et,
-						onClick: E,
+						onClick: D,
 						type: "button",
-						"aria-pressed": S,
-						"aria-label": S ? "Unstar conversation" : "Star conversation",
+						"aria-pressed": C,
+						"aria-label": C ? "Unstar conversation" : "Star conversation",
 						children: /* @__PURE__ */ K(Je, {
 							className: X("size-5", {
-								"text-[#FFD60A]": S,
-								"text-black/90": !S
+								"text-[#FFD60A]": C,
+								"text-black/90": !C
 							}),
-							weight: S ? "fill" : "regular"
+							weight: C ? "fill" : "regular"
 						})
-					}), h && (m === void 0 ? /* @__PURE__ */ K(Tt, {
-						channel: _,
-						participant: y,
-						showDeleteConversation: s,
-						showBlockParticipant: c,
-						showReportParticipant: l,
-						onLeaveConversation: i,
-						onBlockParticipant: a,
-						onDeleteConversationClick: u,
-						onBlockParticipantClick: d,
-						onReportParticipantClick: f,
-						customChannelActions: p,
+					}), g && (h === void 0 ? /* @__PURE__ */ K(Tt, {
+						channel: v,
+						participant: b,
+						showDeleteConversation: c,
+						showBlockParticipant: l,
+						showReportParticipant: u,
+						onLeaveConversation: a,
+						onBlockParticipant: s,
+						onDeleteConversationClick: d,
+						onBlockParticipantClick: f,
+						onReportParticipantClick: p,
+						customChannelActions: m,
 						triggerClassName: Et
-					}) : m)]
+					}) : h)]
 				})
 			]
 		})
@@ -3353,19 +3353,20 @@ var ha = () => null, ga = ({ className: e, message: t }) => /* @__PURE__ */ q("d
 _a.displayName = "LoadingState";
 //#endregion
 //#region src/components/ChannelView.tsx
-var va = ({ onBack: e, showBackButton: t, renderMessageInputActions: n, renderMessageInputFooter: r, renderConversationFooter: i, onLeaveConversation: a, onBlockParticipant: s, showDeleteConversation: c = !0, onDeleteConversationClick: u, onBlockParticipantClick: f, onReportParticipantClick: p, showBlockParticipant: h = !0, showReportParticipant: g = !0, composerDisabled: _ = !1, composerDisabledReason: v, showStarButton: y = !1, renderChannelBanner: b, customChannelActions: x, renderChannelActions: S, renderMessage: C, viewerLanguage: w, showChannelInfo: T = !0, onParticipantNameClick: E, onOutboundClick: D, resolveOutbound: O, composerInput: k }) => {
-	let { channel: A, messages: j } = _e(), M = m(D);
+var va = ({ onBack: e, showBackButton: t, renderMessageInputActions: n, renderMessageInputFooter: r, renderConversationFooter: i, onLeaveConversation: a, onBlockParticipant: s, showDeleteConversation: c = !0, onDeleteConversationClick: u, onBlockParticipantClick: f, onReportParticipantClick: p, showBlockParticipant: h = !0, showReportParticipant: g = !0, composerDisabled: _ = !1, composerDisabledReason: v, showStarButton: y = !1, showStarBadge: b, renderChannelBanner: x, customChannelActions: S, renderChannelActions: C, renderMessage: w, viewerLanguage: T, showChannelInfo: E = !0, onParticipantNameClick: D, onOutboundClick: O, resolveOutbound: k, composerInput: A }) => {
+	let { channel: j, messages: M } = _e(), N = m(O);
 	d(() => {
-		M.current = D;
-	}, [D]);
-	let N = l((e) => {
-		M.current?.(e);
-	}, []), P = D ? N : void 0, F = Fn(j, O), L = A.state.messages.some((e) => e.type !== "deleted"), R = b ? /* @__PURE__ */ K(o.Fragment, { children: b() }, "lt-channel-banner") : null, z = /* @__PURE__ */ K(kt, {
+		N.current = O;
+	}, [O]);
+	let P = l((e) => {
+		N.current?.(e);
+	}, []), F = O ? P : void 0, L = Fn(M, k), R = j.state.messages.some((e) => e.type !== "deleted"), z = x ? /* @__PURE__ */ K(o.Fragment, { children: x() }, "lt-channel-banner") : null, B = /* @__PURE__ */ K(kt, {
 		className: "-mx-[var(--str-chat\\_\\_spacing-2)] px-[var(--str-chat\\_\\_spacing-2)] md:-mx-[min(var(--str-chat\\_\\_spacing-10),4%)] md:px-[min(var(--str-chat\\_\\_spacing-10),4%)]",
 		onBack: e,
 		showBackButton: t,
-		showChannelInfo: T,
+		showChannelInfo: E,
 		showStarButton: y,
+		showStarBadge: b,
 		onLeaveConversation: a,
 		onBlockParticipant: s,
 		showDeleteConversation: c,
@@ -3374,87 +3375,87 @@ var va = ({ onBack: e, showBackButton: t, renderMessageInputActions: n, renderMe
 		onDeleteConversationClick: u,
 		onBlockParticipantClick: f,
 		onReportParticipantClick: p,
-		customChannelActions: x,
-		renderChannelActions: S,
-		onParticipantNameClick: E
-	}), B = l((e) => {
+		customChannelActions: S,
+		renderChannelActions: C,
+		onParticipantNameClick: D
+	}), ee = l((e) => {
 		let { message: t } = H("ChannelView"), n = /* @__PURE__ */ K(Bi, {
 			...e,
-			viewerLanguage: w,
-			onOutboundClick: P
+			viewerLanguage: T,
+			onOutboundClick: F
 		});
-		return !C || !t ? n : C(n, t);
+		return !w || !t ? n : w(n, t);
 	}, [
-		P,
-		C,
-		w
+		F,
+		w,
+		T
 	]);
 	return /* @__PURE__ */ K(jn.Provider, {
-		value: F,
+		value: L,
 		children: /* @__PURE__ */ K(ae, {
 			overrides: {
-				Message: B,
+				Message: ee,
 				MessageActions: Ui,
 				UnreadMessagesNotification: () => null,
 				UnreadMessagesSeparator: () => null
 			},
-			children: /* @__PURE__ */ K(ie, { children: k ? /* @__PURE__ */ q("div", {
+			children: /* @__PURE__ */ K(ie, { children: A ? /* @__PURE__ */ q("div", {
 				className: "messaging-channel-layout relative flex min-h-0 flex-1 flex-col",
 				children: [/* @__PURE__ */ q("div", {
 					className: "messaging-channel-message-list messaging-channel-message-list--floating relative min-h-0 flex-1 overflow-hidden",
-					children: [!L && /* @__PURE__ */ K("div", {
+					children: [!R && /* @__PURE__ */ K("div", {
 						className: "str-chat__list",
 						children: /* @__PURE__ */ q("div", {
 							className: "str-chat__message-list-scroll",
-							children: [z, R]
+							children: [B, z]
 						})
 					}), /* @__PURE__ */ K(I, {
-						head: L ? /* @__PURE__ */ q("div", {
+						head: R ? /* @__PURE__ */ q("div", {
 							className: "sticky top-0 z-10",
-							children: [z, R]
+							children: [B, z]
 						}) : void 0,
 						hideDeletedMessages: !0,
 						hideNewMessageSeparator: !1
 					})]
 				}, "lt-channel-message-list"), /* @__PURE__ */ K(Qi, {
-					...n && { renderActions: () => n?.(A) },
-					...i && { renderHeader: () => i(A) },
-					renderFooter: () => r?.(A),
+					...n && { renderActions: () => n?.(j) },
+					...i && { renderHeader: () => i(j) },
+					renderFooter: () => r?.(j),
 					disabled: _,
 					disabledReason: v,
-					composerInput: k
+					composerInput: A
 				}, "lt-channel-message-input")]
 			}) : /* @__PURE__ */ q(G, { children: [
 				/* @__PURE__ */ q("div", {
 					className: "flex-1 overflow-hidden relative",
-					children: [!L && /* @__PURE__ */ K("div", {
+					children: [!R && /* @__PURE__ */ K("div", {
 						className: "str-chat__list",
 						children: /* @__PURE__ */ q("div", {
 							className: "str-chat__message-list-scroll",
-							children: [z, R]
+							children: [B, z]
 						})
 					}), /* @__PURE__ */ K(I, {
-						head: L ? /* @__PURE__ */ q("div", {
+						head: R ? /* @__PURE__ */ q("div", {
 							className: "sticky top-0 z-10",
-							children: [z, R]
+							children: [B, z]
 						}) : void 0,
 						hideDeletedMessages: !0,
 						hideNewMessageSeparator: !1
 					})]
 				}, "lt-channel-message-list"),
-				i ? /* @__PURE__ */ K(o.Fragment, { children: i(A) }, "lt-channel-conversation-footer") : null,
+				i ? /* @__PURE__ */ K(o.Fragment, { children: i(j) }, "lt-channel-conversation-footer") : null,
 				/* @__PURE__ */ K(Qi, {
-					...n && { renderActions: () => n?.(A) },
-					renderFooter: () => r?.(A),
+					...n && { renderActions: () => n?.(j) },
+					renderFooter: () => r?.(j),
 					disabled: _,
 					disabledReason: v,
-					composerInput: k
+					composerInput: A
 				}, "lt-channel-message-input")
 			] }) })
 		})
 	});
-}, ya = o.memo(({ channel: e, onBack: t, showBackButton: n = !1, renderMessageInputActions: r, renderMessageInputFooter: i, renderConversationFooter: a, onLeaveConversation: o, onBlockParticipant: s, className: c, CustomChannelEmptyState: u = ha, showDeleteConversation: f = !0, onDeleteConversationClick: p, onBlockParticipantClick: h, onReportParticipantClick: g, showBlockParticipant: _ = !0, showReportParticipant: v = !0, composerDisabled: y = !1, composerDisabledReason: b, dmAgentEnabled: x, messageMetadata: S, onMessageSent: w, showStarButton: T = !1, renderChannelBanner: E, customChannelActions: D, renderChannelActions: O, renderMessage: k, onMessageLinkClick: A, sendButton: j, attachmentPreviewList: M, viewerLanguage: N, showChannelInfo: P = !0, onParticipantNameClick: F, onOutboundClick: I, resolveOutbound: L, composerInput: R }) => {
-	let z = l(async (t, n, r) => {
+}, ya = o.memo(({ channel: e, onBack: t, showBackButton: n = !1, renderMessageInputActions: r, renderMessageInputFooter: i, renderConversationFooter: a, onLeaveConversation: o, onBlockParticipant: s, className: c, CustomChannelEmptyState: u = ha, showDeleteConversation: f = !0, onDeleteConversationClick: p, onBlockParticipantClick: h, onReportParticipantClick: g, showBlockParticipant: _ = !0, showReportParticipant: v = !0, composerDisabled: y = !1, composerDisabledReason: b, dmAgentEnabled: x, messageMetadata: S, onMessageSent: w, showStarButton: T = !1, showStarBadge: E, renderChannelBanner: D, customChannelActions: O, renderChannelActions: k, renderMessage: A, onMessageLinkClick: j, sendButton: M, attachmentPreviewList: N, viewerLanguage: P, showChannelInfo: F = !0, onParticipantNameClick: I, onOutboundClick: L, resolveOutbound: R, composerInput: z }) => {
+	let B = l(async (t, n, r) => {
 		let i = e.data?.chatbot_paused === !0, a = x && !i, o = {
 			...n,
 			...a && { silent: !0 },
@@ -3472,25 +3473,25 @@ var va = ({ onBack: e, showBackButton: t, renderMessageInputActions: n, renderMe
 		x,
 		S,
 		w
-	]), B = m(null);
+	]), ee = m(null);
 	d(() => {
-		if (!A) return;
-		let t = B.current;
+		if (!j) return;
+		let t = ee.current;
 		if (!t) return;
 		let n = (t) => {
 			let n = t.target?.closest("a[href]"), r = n?.getAttribute("href");
 			if (!r) return;
 			let i = (n?.closest("[data-message-id]"))?.getAttribute("data-message-id");
-			A(r, i ? e.state.messages.find((e) => e.id === i) : void 0);
+			j(r, i ? e.state.messages.find((e) => e.id === i) : void 0);
 		};
 		return t.addEventListener("click", n), () => t.removeEventListener("click", n);
-	}, [A, e]);
-	let ee = Y(e.type) ? { "--lt-msg-card-width": "368px" } : void 0;
+	}, [j, e]);
+	let te = Y(e.type) ? { "--lt-msg-card-width": "368px" } : void 0;
 	return /* @__PURE__ */ K("div", {
-		ref: B,
+		ref: ee,
 		"data-testid": "channel-view",
 		className: X("messaging-channel-view h-full flex flex-col", c),
-		style: ee,
+		style: te,
 		children: /* @__PURE__ */ K(la.Provider, {
 			value: x ?? !1,
 			children: /* @__PURE__ */ K(C, {
@@ -3500,9 +3501,9 @@ var va = ({ onBack: e, showBackButton: t, renderMessageInputActions: n, renderMe
 				LoadingIndicator: _a,
 				DateSeparator: At,
 				TypingIndicator: fa,
-				doSendMessageRequest: z,
-				...j ? { SendButton: j } : {},
-				...M ? { AttachmentPreviewList: M } : {},
+				doSendMessageRequest: B,
+				...M ? { SendButton: M } : {},
+				...N ? { AttachmentPreviewList: N } : {},
 				children: /* @__PURE__ */ K(va, {
 					onBack: t,
 					showBackButton: n,
@@ -3521,16 +3522,17 @@ var va = ({ onBack: e, showBackButton: t, renderMessageInputActions: n, renderMe
 					composerDisabled: y,
 					composerDisabledReason: b,
 					showStarButton: T,
-					renderChannelBanner: E,
-					customChannelActions: D,
-					renderChannelActions: O,
-					renderMessage: k,
-					viewerLanguage: N,
-					showChannelInfo: P,
-					onParticipantNameClick: F,
-					onOutboundClick: I,
-					resolveOutbound: L,
-					composerInput: R
+					showStarBadge: E,
+					renderChannelBanner: D,
+					customChannelActions: O,
+					renderChannelActions: k,
+					renderMessage: A,
+					viewerLanguage: P,
+					showChannelInfo: F,
+					onParticipantNameClick: I,
+					onOutboundClick: L,
+					resolveOutbound: R,
+					composerInput: z
 				})
 			})
 		})