@bcc-code/vue-bcc-chat-ui 7.1.44 → 7.1.46

package/dist/vue-bcc-chat-ui.js

@@ -6143,7 +6143,7 @@ F([() => Q.value?.conversations.value, () => Hl.value], async () => {
 async function Ql(e, t) {
 	Pl.value = t.loggerCallback, _t(t.language ?? "en"), Bl(t.themeMode);
 	let n = e.config.globalProperties.$primevue;
-	n && (n.config.ripple = !0, n.config.inputVariant = "filled"), e.component("BccChat", mh), e.provide("theme", { theme: El });
+	n && (n.config.ripple = !0, n.config.inputVariant = "filled"), e.component("BccChat", gh), e.provide("theme", { theme: El });
 	let r = Vl(t.environment);
 	zl(Ol.INFO, "Initializing chat", {
 		environment: t.environment,
@@ -7916,11 +7916,15 @@ var dd = ["data-testid", "onClick"], fd = { class: "composer-actions-menu__icon"
 	}
 }), [["__scopeId", "data-v-84a9e2b1"]]), $d = 1800;
 function ef(e) {
-	let t = e.actionMenuRef, n = w(null), r = w(null), i = typeof window < "u" && window.matchMedia("(hover: hover) and (pointer: fine)").matches, a = null;
-	function o(e) {
+	let t = e.actionMenuRef, r = w(null), i = w(null), a = typeof window < "u" ? window.matchMedia("(hover: hover) and (pointer: fine)") : null, o = w(!!a?.matches);
+	a?.addEventListener("change", (e) => {
+		o.value = e.matches;
+	});
+	let s = null;
+	function c(e) {
 		return e.kind === "text" && Hs(e.text);
 	}
-	function s(e) {
+	function l(e) {
 		return e.isOwn && [
 			"text",
 			"image",
@@ -7929,29 +7933,29 @@ function ef(e) {
 			"file"
 		].includes(e.kind) && !e.isDeleted && e.deliveryState === "sent";
 	}
-	function c(e) {
+	function u(e) {
 		return e.isOwn && e.deliveryState === "sent";
 	}
-	function l(e) {
+	function d(e) {
 		return e.isOwn && !e.isDeleted;
 	}
-	function u(e) {
+	function f(e) {
 		return Xs(e);
 	}
-	function d(e) {
+	function p(e) {
 		return e.attachments.find((e) => e.kind === "image" && !!e.url);
 	}
-	async function f(e) {
-		let t = d(e);
+	async function m(e) {
+		let t = p(e);
 		if (!t?.url || typeof navigator > "u" || !navigator.clipboard?.write || typeof ClipboardItem > "u") return !1;
 		let n = await fetch(t.url);
 		if (!n.ok) return !1;
 		let r = await n.blob();
 		if (!r.type.startsWith("image/")) return !1;
-		let i = { [r.type]: r }, a = u(e);
+		let i = { [r.type]: r }, a = f(e);
 		return a && (i["text/plain"] = new Blob([a], { type: "text/plain" })), await navigator.clipboard.write([new ClipboardItem(i)]), !0;
 	}
-	function p(e) {
+	function g(e) {
 		let t = Number.isFinite(e.clientX) ? e.clientX : 0, n = Number.isFinite(e.clientY) ? e.clientY : 0;
 		if (t > 0 || n > 0) return {
 			x: t,
@@ -7970,137 +7974,150 @@ function ef(e) {
 			y: 0
 		};
 	}
-	async function m(r, a, o) {
-		if (!e.canUseMessageActions() || o === "contextmenu" && !i || o === "tap" && i) return;
-		a.preventDefault(), a.stopPropagation(), e.onMenuOpen?.(), n.value = r;
-		let s = p(a);
-		await h(), t.value?.show(a, {
-			x: s.x + 2,
-			y: s.y + 2
-		});
+	function _(e, t) {
+		if (o.value) {
+			let t = g(e);
+			return {
+				x: t.x + 2,
+				y: t.y + 2
+			};
+		} else if (window) {
+			let n = e.target instanceof HTMLElement ? e.target.closest(".message-item").getBoundingClientRect().height : 0;
+			return {
+				x: t.isOwn ? window.innerWidth * 2 / 3 : window.innerWidth / 3,
+				y: window.innerHeight / 2 + n / 2
+			};
+		}
+		return {
+			x: 0,
+			y: 0
+		};
 	}
-	function g(e, t) {
-		m(e, t, "contextmenu");
+	async function v(n, i, a) {
+		e.canUseMessageActions() && (a === "contextmenu" && !o.value || a === "tap" && o.value || (i.preventDefault(), i.stopPropagation(), e.onMenuOpen?.(), r.value = n, await h(), t.value?.show(i, _(i, n))));
 	}
-	function _(e, t) {
-		if (n.value) {
-			t.preventDefault(), t.stopPropagation(), v();
+	function y(e, t) {
+		v(e, t, "contextmenu");
+	}
+	function b(e, t) {
+		if (r.value) {
+			t.preventDefault(), t.stopPropagation(), x();
 			return;
 		}
-		m(e, t, "tap");
+		v(e, t, "tap");
 	}
-	function v() {
-		y(), t.value?.hide();
+	function x() {
+		S(), t.value?.hide();
 	}
-	function y() {
-		n.value = null;
+	function S() {
+		r.value = null;
 	}
-	function b(t, n) {
-		e.canReact() && (e.emit.toggleReaction(t, n), v());
+	function C(t, n) {
+		e.canReact() && (e.emit.toggleReaction(t, n), x());
 	}
-	function x(t, n) {
+	function T(t, n) {
 		e.canReact() && e.emit.toggleReaction(t, n);
 	}
-	async function S(e) {
+	async function E(e) {
 		if (typeof navigator > "u") return;
 		let t = !1;
 		try {
-			t = await f(e);
+			t = await m(e);
 		} catch {
 			t = !1;
 		}
 		if (!t) {
-			let t = u(e);
+			let t = f(e);
 			if (!t || !navigator.clipboard?.writeText) return;
 			await navigator.clipboard.writeText(t);
 		}
-		r.value = e.id, a && clearTimeout(a), a = setTimeout(() => {
-			r.value = null;
-		}, $d), v();
-	}
-	function C(t) {
-		e.canReply() && (e.emit.reply(t), v());
-	}
-	function T(t) {
-		e.emit.edit(t), v();
-	}
-	function E(t) {
-		e.canOpenThread() && (e.emit.openThread(t), v());
+		i.value = e.id, s && clearTimeout(s), s = setTimeout(() => {
+			i.value = null;
+		}, $d), x();
 	}
 	function D(t) {
-		e.emit.translate(t), v();
+		e.canReply() && (e.emit.reply(t), x());
 	}
 	function O(t) {
-		e.emit.info(t), v();
+		e.emit.edit(t), x();
 	}
 	function k(t) {
-		e.emit.delete(t), v();
+		e.canOpenThread() && (e.emit.openThread(t), x());
 	}
 	function A(t) {
+		e.emit.translate(t), x();
+	}
+	function j(t) {
+		e.emit.info(t), x();
+	}
+	function M(t) {
+		e.emit.delete(t), x();
+	}
+	function N(t) {
 		return [
 			{
 				key: "reply",
 				label: e.t("reply"),
 				icon: Me,
 				visible: e.canReply(),
-				command: () => C(t)
+				command: () => D(t)
 			},
 			{
 				key: "edit",
 				label: e.t("edit"),
 				icon: ye,
-				visible: s(t),
-				command: () => T(t)
+				visible: l(t),
+				command: () => O(t)
 			},
 			{
 				key: "copy",
-				label: r.value === t.id ? e.t("copied") : e.t("copyText"),
-				icon: r.value === t.id ? de : me,
+				label: i.value === t.id ? e.t("copied") : e.t("copyText"),
+				icon: i.value === t.id ? de : me,
 				visible: !0,
-				command: () => S(t)
+				command: () => E(t)
 			},
 			{
 				key: "info",
 				label: e.t("info"),
 				icon: Te,
-				visible: c(t),
-				command: () => O(t)
+				visible: u(t),
+				command: () => j(t)
 			},
 			{
 				key: "thread",
 				label: e.t("threadWithCount", { count: t.replyCount }),
 				icon: Ce,
 				visible: !e.isInThread() && e.canOpenThread(),
-				command: () => E(t)
+				command: () => k(t)
 			},
 			{
 				key: "delete",
 				label: e.t("delete"),
 				icon: he,
-				visible: l(t),
-				command: () => k(t)
+				visible: d(t),
+				command: () => M(t)
 			},
 			{
 				key: "translate",
 				label: e.t("translate"),
 				icon: Le,
-				visible: o(t),
-				command: () => D(t)
+				visible: c(t),
+				command: () => A(t)
 			}
 		].filter((e) => e.visible);
 	}
 	return {
 		actionMenuRef: t,
-		activeActionMessage: n,
-		copiedMessageId: r,
-		supportsDesktopContextMenu: i,
-		handleMessageContextMenu: g,
-		handleMessageTap: _,
-		closeActionMenu: v,
-		resetActionMenuState: y,
-		reactToMessage: b,
-		toggleInlineReaction: x,
-		getActionItems: A
+		activeActionMessage: r,
+		copiedMessageId: i,
+		isTouchUI: n(() => !o.value),
+		handleMessageContextMenu: y,
+		handleMessageTap: b,
+		closeActionMenu: x,
+		resetActionMenuState: S,
+		reactToMessage: C,
+		toggleInlineReaction: T,
+		getActionItems: N
 	};
 }
 //#endregion
@@ -8883,17 +8900,19 @@ var df = { class: "w-full" }, ff = {
 	"id",
 	"data-message-id",
 	"data-message-kind"
-], Lp = { class: "message-item__footer body-sm text-subtlest mt-0.5 flex items-end justify-between gap-2" }, Rp = /* @__PURE__ */ $(/* @__PURE__ */ u({
+], Lp = { class: "message-item__footer body-sm text-subtlest mt-0.5 flex items-end justify-between gap-2" }, Rp = { class: "message-bubble-wrapper" }, zp = { class: "message-item__footer body-sm text-subtlest mt-0.5 flex items-end justify-between gap-2" }, Bp = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageItem",
 	props: {
 		message: {},
 		currentUserId: {},
 		canReact: { type: Boolean },
 		canOpenThread: { type: Boolean },
+		contextMenuOpen: { type: Boolean },
 		canShowSenderAvatar: { type: Boolean },
 		pendingOptionKey: {},
 		actionMessageClass: {},
-		actionMessageRowClass: {}
+		actionMessageRowClass: {},
+		isTouchUi: { type: Boolean }
 	},
 	emits: [
 		"contextmenu",
@@ -8906,17 +8925,20 @@ var df = { class: "w-full" }, ff = {
 		"anchorclick"
 	],
 	setup(t, { emit: s }) {
-		let c = t, u = s, d = n(() => c.message.kind === "action" ? ["is-action", c.actionMessageClass] : c.message.isOwn ? "is-own" : "is-other"), f = n(() => c.actionMessageRowClass ?? c.actionMessageClass);
-		function p(e) {
-			return e instanceof Element ? !!e.closest("button, a, input, textarea, select, label, summary, video, audio") : !1;
-		}
+		let c = t, u = s, d = n(() => {
+			let e = [];
+			return e = c.message.kind === "action" ? ["is-action", c.actionMessageClass] : [c.message.isOwn ? "is-own" : "is-other"], c.contextMenuOpen && e.push("context-menu-open"), c.isTouchUi && e.push("is-touch-ui"), e.filter((e) => !!e);
+		}), f = n(() => c.message.kind === "poll" ? "message-bubble--poll" : c.message.attachments?.length ? "message-bubble--attachment" : "message-bubble--text"), p = n(() => c.actionMessageRowClass ?? c.actionMessageClass);
 		function m(e) {
-			p(e.target) || u("contextmenu", e);
+			return e instanceof Element ? !!e.closest("button, a, input, textarea, select, label, summary, video, audio") : !1;
 		}
 		function h(e) {
-			p(e.target) || u("tap", e);
+			m(e.target) || u("contextmenu", e);
 		}
-		function _() {
+		function _(e) {
+			m(e.target) || u("tap", e);
+		}
+		function v() {
 			let e = c.message.replyTo?.messageId?.trim();
 			e && u("openReferencedMessage", e);
 		}
@@ -8928,71 +8950,118 @@ var df = { class: "w-full" }, ff = {
 		}, [t.message.kind === "action" ? (S(), r(Nf, {
 			key: 0,
 			text: t.message.text,
-			class: g(f.value)
-		}, null, 8, ["text", "class"])) : (S(), a(e, { key: 1 }, [t.canShowSenderAvatar && !t.message.isOwn ? (S(), r(j(R), {
-			key: 0,
-			image: t.message.senderAvatar,
-			label: t.message.senderAvatar ? void 0 : t.message.senderName.slice(0, 1).toUpperCase(),
-			shape: "circle",
-			class: "mb-1 shrink-0 self-end"
-		}, null, 8, ["image", "label"])) : i("", !0), o("div", {
-			"data-testid": "message-bubble",
-			class: g(["message-bubble", [t.message.kind === "poll" ? "message-bubble--poll" : t.message.attachments?.length ? "message-bubble--attachment" : "message-bubble--text"]]),
-			onContextmenu: m,
-			onClick: h
-		}, [
-			!t.message.isOwn || t.message.scheduled?.scheduleDate ? (S(), r(hp, {
+			class: g(p.value)
+		}, null, 8, ["text", "class"])) : (S(), a(e, { key: 1 }, [
+			t.canShowSenderAvatar && !t.message.isOwn ? (S(), r(j(R), {
 				key: 0,
-				message: t.message
-			}, null, 8, ["message"])) : i("", !0),
-			t.message.replyTo ? (S(), r(Np, {
+				image: t.message.senderAvatar,
+				label: t.message.senderAvatar ? void 0 : t.message.senderName.slice(0, 1).toUpperCase(),
+				shape: "circle",
+				class: "mb-1 shrink-0 self-end"
+			}, null, 8, ["image", "label"])) : i("", !0),
+			o("div", {
+				"data-testid": "message-bubble",
+				class: g(["message-bubble", f.value]),
+				onContextmenu: h,
+				onClick: _
+			}, [
+				!t.message.isOwn || t.message.scheduled?.scheduleDate ? (S(), r(hp, {
+					key: 0,
+					message: t.message
+				}, null, 8, ["message"])) : i("", !0),
+				t.message.replyTo ? (S(), r(Np, {
+					key: 1,
+					message: t.message,
+					onOpen: v
+				}, null, 8, ["message"])) : i("", !0),
+				t.message.kind === "poll" && t.message.poll ? (S(), r(Ap, {
+					key: 2,
+					message: t.message,
+					"current-user-id": t.currentUserId,
+					"pending-option-key": t.pendingOptionKey,
+					onVote: s[0] ||= (e) => u("votePoll", e)
+				}, null, 8, [
+					"message",
+					"current-user-id",
+					"pending-option-key"
+				])) : t.message.attachments?.length ? (S(), r(lp, {
+					key: 3,
+					message: t.message,
+					onOpenMedia: s[1] ||= (e) => u("openMedia", e)
+				}, null, 8, ["message"])) : (S(), r(Fp, {
+					key: 4,
+					message: t.message,
+					onAnchorclick: s[2] ||= (e, t) => n.$emit("anchorclick", e, t)
+				}, null, 8, ["message"])),
+				o("div", Lp, [l(xp, {
+					message: t.message,
+					"can-react": t.canReact,
+					"can-open-thread": t.canOpenThread,
+					onToggleReaction: s[3] ||= (e) => u("toggleReaction", e),
+					onOpenThread: s[4] ||= (e) => u("openThread")
+				}, null, 8, [
+					"message",
+					"can-react",
+					"can-open-thread"
+				]), l(fp, { message: t.message }, null, 8, ["message"])])
+			], 34),
+			t.contextMenuOpen && t.isTouchUi ? (S(), a("div", {
 				key: 1,
-				message: t.message,
-				onOpen: _
-			}, null, 8, ["message"])) : i("", !0),
-			t.message.kind === "poll" && t.message.poll ? (S(), r(Ap, {
-				key: 2,
-				message: t.message,
-				"current-user-id": t.currentUserId,
-				"pending-option-key": t.pendingOptionKey,
-				onVote: s[0] ||= (e) => u("votePoll", e)
-			}, null, 8, [
-				"message",
-				"current-user-id",
-				"pending-option-key"
-			])) : t.message.attachments?.length ? (S(), r(lp, {
-				key: 3,
-				message: t.message,
-				onOpenMedia: s[1] ||= (e) => u("openMedia", e)
-			}, null, 8, ["message"])) : (S(), r(Fp, {
-				key: 4,
-				message: t.message,
-				onAnchorclick: s[2] ||= (e, t) => n.$emit("anchorclick", e, t)
-			}, null, 8, ["message"])),
-			o("div", Lp, [l(xp, {
-				message: t.message,
-				"can-react": t.canReact,
-				"can-open-thread": t.canOpenThread,
-				onToggleReaction: s[3] ||= (e) => u("toggleReaction", e),
-				onOpenThread: s[4] ||= (e) => u("openThread")
-			}, null, 8, [
-				"message",
-				"can-react",
-				"can-open-thread"
-			]), l(fp, { message: t.message }, null, 8, ["message"])])
-		], 34)], 64))], 10, Ip));
+				class: g(["message-bubble--spotlight", f.value])
+			}, [o("div", Rp, [o("div", { class: g(["message-bubble", f.value]) }, [
+				!t.message.isOwn || t.message.scheduled?.scheduleDate ? (S(), r(hp, {
+					key: 0,
+					message: t.message
+				}, null, 8, ["message"])) : i("", !0),
+				t.message.replyTo ? (S(), r(Np, {
+					key: 1,
+					message: t.message,
+					onOpen: v
+				}, null, 8, ["message"])) : i("", !0),
+				t.message.kind === "poll" && t.message.poll ? (S(), r(Ap, {
+					key: 2,
+					message: t.message,
+					"current-user-id": t.currentUserId,
+					"pending-option-key": t.pendingOptionKey,
+					onVote: s[5] ||= (e) => u("votePoll", e)
+				}, null, 8, [
+					"message",
+					"current-user-id",
+					"pending-option-key"
+				])) : t.message.attachments?.length ? (S(), r(lp, {
+					key: 3,
+					message: t.message,
+					onOpenMedia: s[6] ||= (e) => u("openMedia", e)
+				}, null, 8, ["message"])) : (S(), r(Fp, {
+					key: 4,
+					message: t.message,
+					onAnchorclick: s[7] ||= (e, t) => n.$emit("anchorclick", e, t)
+				}, null, 8, ["message"])),
+				o("div", zp, [l(xp, {
+					message: t.message,
+					"can-react": t.canReact,
+					"can-open-thread": t.canOpenThread,
+					onToggleReaction: s[8] ||= (e) => u("toggleReaction", e),
+					onOpenThread: s[9] ||= (e) => u("openThread")
+				}, null, 8, [
+					"message",
+					"can-react",
+					"can-open-thread"
+				]), l(fp, { message: t.message }, null, 8, ["message"])])
+			], 2)])], 2)) : i("", !0)
+		], 64))], 10, Ip));
 	}
-}), [["__scopeId", "data-v-cb4a4183"]]), zp = [
+}), [["__scopeId", "data-v-96aad7a9"]]), Vp = [
 	"👍",
 	"❤️",
 	"🔥",
 	"😂",
 	"🙏",
 	"🎉"
-], Bp = /* @__PURE__ */ "👏.😍.🤯.😮.😢.😡.👀.✅.💯.🙌.🤝.👌.💪.🤔.🫶.😅.🥳.💛.🌟.🚀.💥.🎯.📌.💡.🕊️.☀️.🌈.🍀.🎶.🫡".split("."), Vp = { class: "shadow-overlay bg-elevation-surface-raised-default mx-auto flex w-max max-w-full items-center gap-1 rounded-full px-3 py-1" }, Hp = ["disabled", "onClick"], Up = ["disabled"], Wp = {
+], Hp = /* @__PURE__ */ "👏.😍.🤯.😮.😢.😡.👀.✅.💯.🙌.🤝.👌.💪.🤔.🫶.😅.🥳.💛.🌟.🚀.💥.🎯.📌.💡.🕊️.☀️.🌈.🍀.🎶.🫡".split("."), Up = { class: "shadow-overlay bg-elevation-surface-raised-default mx-auto flex w-max max-w-full items-center gap-1 rounded-full px-3 py-1" }, Wp = ["disabled", "onClick"], Gp = ["disabled"], Kp = {
 	key: 0,
 	class: "bg-elevation-surface-raised-default shadow-overlay m-0 grid grid-cols-6 gap-1 rounded-lg p-1.5"
-}, Gp = ["onClick"], Kp = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, qp = ["onClick"], Jp = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageItemMenuReactions",
 	props: {
 		message: {},
@@ -9004,20 +9073,20 @@ var df = { class: "w-full" }, ff = {
 		F(() => c.message.id, () => {
 			u.value = !1;
 		});
-		let d = n(() => Bp);
+		let d = n(() => Hp);
 		function f(e) {
 			return (c.message.reactions ?? []).some((t) => t.emoji === e);
 		}
 		function p() {
 			c.canReact && (u.value = !u.value);
 		}
-		return (n, s) => (S(), a(e, null, [o("div", Vp, [(S(!0), a(e, null, T(j(zp), (e) => (S(), a("button", {
+		return (n, s) => (S(), a(e, null, [o("div", Up, [(S(!0), a(e, null, T(j(Vp), (e) => (S(), a("button", {
 			key: `${t.message.id}-${e}-common`,
 			type: "button",
 			class: g(["message-reaction-button", f(e) ? "bg-background-success-default" : "bg-transparent"]),
 			disabled: !t.canReact,
 			onClick: (t) => l("react", e)
-		}, k(e), 11, Hp))), 128)), o("button", {
+		}, k(e), 11, Wp))), 128)), o("button", {
 			type: "button",
 			class: "message-reaction-more",
 			disabled: !t.canReact,
@@ -9025,14 +9094,14 @@ var df = { class: "w-full" }, ff = {
 		}, [(S(), r(D(u.value ? j(De) : j(Ee)), {
 			class: "size-7",
 			"aria-hidden": "true"
-		}))], 8, Up)]), u.value && t.canReact ? (S(), a("div", Wp, [(S(!0), a(e, null, T(d.value, (e) => (S(), a("button", {
+		}))], 8, Gp)]), u.value && t.canReact ? (S(), a("div", Kp, [(S(!0), a(e, null, T(d.value, (e) => (S(), a("button", {
 			key: `${t.message.id}-${e}-extended`,
 			type: "button",
 			class: g(["message-expanded-reaction-button", f(e) ? "bg-background-success-default" : "bg-transparent"]),
 			onClick: (t) => l("react", e)
-		}, k(e), 11, Gp))), 128))])) : i("", !0)], 64));
+		}, k(e), 11, qp))), 128))])) : i("", !0)], 64));
 	}
-}), [["__scopeId", "data-v-0a11761a"]]), qp = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-0a11761a"]]), Yp = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageItemMenu",
 	props: {
 		message: {},
@@ -9040,75 +9109,87 @@ var df = { class: "w-full" }, ff = {
 		actionItems: {}
 	},
 	emits: ["hide", "react"],
-	setup(e, { expose: n, emit: o }) {
-		let s = o, c = w(null), u = w(!1), d = w({
+	setup(e, { expose: o, emit: s }) {
+		let c = s, u = w(null), d = w(!1), f = w({
 			left: 0,
 			top: 0
-		}), f = null, p = null;
-		function m(e) {
+		}), p = null, m = null;
+		function g(e) {
 			let t = e.currentTarget ?? e.target;
 			return t instanceof HTMLElement ? t : null;
 		}
-		async function g() {
-			if (typeof window > "u" || !c.value) return;
-			let e = window.visualViewport, t = e?.offsetLeft ?? 0, n = e?.offsetTop ?? 0, r = e?.width ?? window.innerWidth, i = e?.height ?? window.innerHeight, a = c.value.getBoundingClientRect(), o = t + 12, s = t + r - a.width - 12, l = n + 12, u = n + i - a.height - 12, m = Math.max(o, s), h = o, g = l;
-			if (p) {
-				let e = p.y + 10 + a.height <= n + i - 12;
-				h = Math.min(Math.max(p.x - a.width / 2, o), m), g = e ? Math.min(p.y + 10, u) : Math.max(p.y - a.height - 10, l);
-			} else if (f) {
-				let e = f.getBoundingClientRect(), t = e.left + e.width / 2, r = e.top + Math.min(e.height / 2, 32), s = r + 10 + a.height <= n + i - 12;
-				h = Math.min(Math.max(t - a.width / 2, o), m), g = s ? Math.min(r + 10, u) : Math.max(r - a.height - 10, l);
+		async function _() {
+			if (typeof window > "u" || !u.value) return;
+			let e = window.visualViewport, t = e?.offsetLeft ?? 0, n = e?.offsetTop ?? 0, r = e?.width ?? window.innerWidth, i = e?.height ?? window.innerHeight, a = u.value.getBoundingClientRect(), o = t + 12, s = t + r - a.width - 12, c = n + 12, l = n + i - a.height - 12, d = Math.max(o, s), h = o, g = c;
+			if (m) {
+				let e = m.y + 10 + a.height <= n + i - 12;
+				h = Math.min(Math.max(m.x - a.width / 2, o), d), g = e ? Math.min(m.y + 10, l) : Math.max(m.y - a.height - 10, c);
+			} else if (p) {
+				let e = p.getBoundingClientRect(), t = e.left + e.width / 2, r = e.top + Math.min(e.height / 2, 32), s = r + 10 + a.height <= n + i - 12;
+				h = Math.min(Math.max(t - a.width / 2, o), d), g = s ? Math.min(r + 10, l) : Math.max(r - a.height - 10, c);
 			}
-			d.value = {
+			f.value = {
 				left: h,
 				top: g
 			};
 		}
-		async function _(e, t) {
-			f = m(e), p = t ?? null, !(!f && !p) && (u.value = !0, await h(), await g());
+		async function b(e, t) {
+			p = g(e), m = t ?? null, !(!p && !m) && (d.value = !0, await h(), await _());
 		}
-		function b() {
-			u.value && (u.value = !1, f = null, p = null, s("hide"));
-		}
-		function x(e) {
-			if (!u.value) return;
-			let t = e.target;
-			c.value?.contains(t) || f?.contains(t) || b();
+		function x() {
+			d.value && (d.value = !1, p = null, m = null, c("hide"));
 		}
 		function C(e) {
-			e.key === "Escape" && b();
-		}
-		function T() {
-			b();
+			if (!d.value) return;
+			let t = e.target;
+			if (!u.value?.contains(t)) {
+				if (p) {
+					if (p.closest(".message-item")?.contains(t) && t instanceof HTMLElement && t.classList.contains("message-bubble--spotlight")) {
+						setTimeout(() => {
+							x();
+						}, 100);
+						return;
+					}
+					if (p?.contains(t) || p.closest(".message-item")?.contains(t)) return;
+				}
+				x();
+			}
 		}
-		return typeof window < "u" && (document.addEventListener("pointerdown", x, !0), document.addEventListener("keydown", C), window.addEventListener("resize", T), window.addEventListener("scroll", T, !0)), y(() => {
-			typeof window > "u" || (document.removeEventListener("pointerdown", x, !0), document.removeEventListener("keydown", C), window.removeEventListener("resize", T), window.removeEventListener("scroll", T, !0));
-		}), n({
-			show: _,
-			hide: b
-		}), (n, o) => (S(), r(t, { to: "body" }, [u.value && e.message ? (S(), a("div", {
+		function T(e) {
+			e.key === "Escape" && x();
+		}
+		function E() {
+			x();
+		}
+		return typeof window < "u" && (document.addEventListener("pointerdown", C, !0), document.addEventListener("keydown", T), window.addEventListener("resize", E), window.addEventListener("scroll", E, !0)), y(() => {
+			typeof window > "u" || (document.removeEventListener("pointerdown", C, !0), document.removeEventListener("keydown", T), window.removeEventListener("resize", E), window.removeEventListener("scroll", E, !0));
+		}), o({
+			show: b,
+			hide: x,
+			visible: n(() => d.value)
+		}), (n, o) => (S(), r(t, { to: "body" }, [d.value && e.message ? (S(), a("div", {
 			key: 0,
 			ref_key: "panelRef",
-			ref: c,
+			ref: u,
 			class: "message-action-menu max-w-62 min-w-54",
 			style: v({
-				left: `${d.value.left}px`,
-				top: `${d.value.top}px`
+				left: `${f.value.left}px`,
+				top: `${f.value.top}px`
 			}),
 			"data-testid": "message-action-popover-shell"
-		}, [l(Kp, {
+		}, [l(Jp, {
 			message: e.message,
 			"can-react": e.canReact,
-			onReact: o[0] ||= (e) => s("react", e)
+			onReact: o[0] ||= (e) => c("react", e)
 		}, null, 8, ["message", "can-react"]), l(j(ae), { model: e.actionItems }, null, 8, ["model"])], 4)) : i("", !0)]));
 	}
-}), [["__scopeId", "data-v-54f6bf5c"]]), Jp = { class: "chat-header border-default bg-elevation-surface-default sticky top-0 z-10 flex items-center justify-between gap-3 border-b px-4 py-3 max-md:px-4 max-md:pb-3 sm:px-5 sm:py-3.5" }, Yp = {
+}), [["__scopeId", "data-v-f45f7b6d"]]), Xp = { class: "chat-header border-default bg-elevation-surface-default sticky top-0 z-10 flex items-center justify-between gap-3 border-b px-4 py-3 max-md:px-4 max-md:pb-3 sm:px-5 sm:py-3.5" }, Zp = {
 	key: 0,
 	class: "chat-header__identity flex min-w-0 items-center gap-3"
-}, Xp = { class: "chat-header__text min-w-0" }, Zp = { class: "chat-header__title heading-md text-default sm:heading-lg truncate" }, Qp = { class: "chat-header__subtitle body-sm text-subtle sm:body-md truncate" }, $p = { key: 0 }, em = { key: 1 }, tm = { class: "chat-header__actions flex items-center gap-2" }, nm = {
+}, Qp = { class: "chat-header__text min-w-0" }, $p = { class: "chat-header__title heading-md text-default sm:heading-lg truncate" }, em = { class: "chat-header__subtitle body-sm text-subtle sm:body-md truncate" }, tm = { key: 0 }, nm = { key: 1 }, rm = { class: "chat-header__actions flex items-center gap-2" }, im = {
 	key: 0,
 	class: "chat-header__tags hidden flex-wrap gap-2 md:flex"
-}, rm = /* @__PURE__ */ u({
+}, am = /* @__PURE__ */ u({
 	__name: "MessageListHeader",
 	props: {
 		conversation: {},
@@ -9116,28 +9197,28 @@ var df = { class: "w-full" }, ff = {
 	},
 	setup(t) {
 		let { t: n } = K();
-		return (s, c) => (S(), a("header", Jp, [t.conversation ? (S(), a("div", Yp, [l(j(R), {
+		return (s, c) => (S(), a("header", Xp, [t.conversation ? (S(), a("div", Zp, [l(j(R), {
 			image: t.conversation.avatar,
 			label: t.conversation.avatar ? void 0 : t.conversation.title.slice(0, 1).toUpperCase(),
 			shape: "circle",
 			class: "chat-header__avatar shrink-0"
-		}, null, 8, ["image", "label"]), o("div", Xp, [o("p", Zp, k(t.parentMessage ? j(n)("thread") : t.conversation.title), 1), o("p", Qp, [t.parentMessage ? (S(), a("span", $p, k(t.parentMessage.senderName), 1)) : (S(), a("span", em, k(t.conversation.memberCount ? j(n)("members", { count: t.conversation.memberCount }) : j(n)("groupChat")), 1))])])])) : i("", !0), o("div", tm, [t.conversation?.tags?.length ? (S(), a("div", nm, [(S(!0), a(e, null, T(t.conversation.tags.slice(0, 3), (e) => (S(), r(j(V), {
+		}, null, 8, ["image", "label"]), o("div", Qp, [o("p", $p, k(t.parentMessage ? j(n)("thread") : t.conversation.title), 1), o("p", em, [t.parentMessage ? (S(), a("span", tm, k(t.parentMessage.senderName), 1)) : (S(), a("span", nm, k(t.conversation.memberCount ? j(n)("members", { count: t.conversation.memberCount }) : j(n)("groupChat")), 1))])])])) : i("", !0), o("div", rm, [t.conversation?.tags?.length ? (S(), a("div", im, [(S(!0), a(e, null, T(t.conversation.tags.slice(0, 3), (e) => (S(), r(j(V), {
 			key: e,
 			text: e,
 			context: "secondary",
 			rounded: ""
 		}, null, 8, ["text"]))), 128))])) : i("", !0)])]));
 	}
-}), im = {
+}), om = {
 	key: 1,
 	class: "message-list__empty-state"
-}, am = { class: "space-y-2" }, om = {
+}, sm = { class: "space-y-2" }, cm = {
 	key: 0,
 	class: "message-list__thread-root"
-}, sm = { class: "body-sm text-subtlest truncate font-semibold uppercase" }, cm = { class: "body-md text-default mt-1 line-clamp-2" }, lm = {
+}, lm = { class: "body-sm text-subtlest truncate font-semibold uppercase" }, um = { class: "body-md text-default mt-1 line-clamp-2" }, dm = {
 	key: 1,
 	class: "surface-default text-subtle rounded-2xl p-5 text-center"
-}, um = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, fm = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageList",
 	props: {
 		target: {},
@@ -9163,7 +9244,7 @@ var df = { class: "w-full" }, ff = {
 			canLoadOlder: () => b.value,
 			onLoadOlder: () => f.emit("list:loadOlder", { target: s.target }),
 			threadRef: te
-		}), R = N("actionMenuRef"), { activeActionMessage: z, handleMessageContextMenu: ne, handleMessageTap: B, resetActionMenuState: re, reactToMessage: ie, toggleInlineReaction: ae, getActionItems: oe } = ef({
+		}), R = N("actionMenuRef"), { activeActionMessage: z, handleMessageContextMenu: ne, handleMessageTap: B, resetActionMenuState: re, reactToMessage: ie, toggleInlineReaction: ae, getActionItems: oe, isTouchUI: se } = ef({
 			canUseMessageActions: () => u.canUseMessageActions.value,
 			canReact: () => u.canReact.value,
 			canReply: () => u.canReply.value,
@@ -9185,20 +9266,20 @@ var df = { class: "w-full" }, ff = {
 			},
 			onMenuOpen: () => f.emit("ui:closeComposerActions")
 		});
-		function se(e) {
+		function V(e) {
 			return !!e.url && [
 				"image",
 				"video",
 				"audio"
 			].includes(e.kind);
 		}
-		function V(e) {
-			se(e) && (M.value = e);
+		function H(e) {
+			V(e) && (M.value = e);
 		}
-		function H() {
+		function U() {
 			M.value = null;
 		}
-		async function U(e, t) {
+		async function ce(e, t) {
 			ee.value = `${e.id}:${t}`;
 			try {
 				f.emit("message:votePoll", {
@@ -9211,15 +9292,15 @@ var df = { class: "w-full" }, ff = {
 				}, 300);
 			}
 		}
-		function ce(e) {
+		function le(e) {
 			v.value && f.emit("message:openThread", e);
 		}
-		function le(e, t) {
+		function ue(e, t) {
 			return e.getFullYear() !== t.getFullYear() || e.getMonth() !== t.getMonth() || e.getDate() !== t.getDate();
 		}
-		function ue(e) {
+		function de(e) {
 			let t = m.value;
-			return e === 0 ? !0 : le(t[e].sentAt, t[e - 1].sentAt);
+			return e === 0 ? !0 : ue(t[e].sentAt, t[e - 1].sentAt);
 		}
 		return (t, n) => (S(), a(e, null, [
 			o("section", { class: g(["message-list-root", [t.$attrs.class, F.value ? "message-list--embedded-thread" : P.value ? "message-list--thread" : "message-list--main"]]) }, [y.value ? E(t.$slots, "header", {
@@ -9230,7 +9311,7 @@ var df = { class: "w-full" }, ff = {
 				title: D.value,
 				subtitle: O.value,
 				memberCount: A.value
-			}, () => [l(rm, {
+			}, () => [l(am, {
 				conversation: j(u).conversation.value,
 				"parent-message": _.value
 			}, null, 8, ["conversation", "parent-message"])], !0) : i("", !0), j(u).conversation.value ? (S(), a("div", {
@@ -9241,12 +9322,12 @@ var df = { class: "w-full" }, ff = {
 				ref: te,
 				class: g(["message-list__scroll min-h-0 flex-1", F.value ? "p-0" : P.value ? "px-5 py-4" : "px-2 pt-2 pb-3"]),
 				onScroll: n[2] ||= (...e) => j(L) && j(L)(...e)
-			}, [o("div", am, [
-				_.value ? (S(), a("div", om, [o("p", sm, k(_.value.senderName), 1), o("p", cm, k(j(Ws)(_.value, j(c)("message"), j(u).mentionNameByUid.value)), 1)])) : i("", !0),
-				(S(!0), a(e, null, T(m.value, (o, c) => (S(), a(e, { key: o.id }, [ue(c) ? (S(), r(Af, {
+			}, [o("div", sm, [
+				_.value ? (S(), a("div", cm, [o("p", lm, k(_.value.senderName), 1), o("p", um, k(j(Ws)(_.value, j(c)("message"), j(u).mentionNameByUid.value)), 1)])) : i("", !0),
+				(S(!0), a(e, null, T(m.value, (o, c) => (S(), a(e, { key: o.id }, [de(c) ? (S(), r(Af, {
 					key: 0,
 					date: o.sentAt
-				}, null, 8, ["date"])) : i("", !0), l(Rp, {
+				}, null, 8, ["date"])) : i("", !0), l(Bp, {
 					message: o,
 					"current-user-id": j(u).currentUserId.value,
 					"can-react": j(u).canReact.value,
@@ -9255,12 +9336,14 @@ var df = { class: "w-full" }, ff = {
 					"pending-option-key": ee.value,
 					"action-message-class": s.actionMessageClass,
 					"action-message-row-class": s.actionMessageRowClass,
+					"context-menu-open": j(z)?.id === o.id && R.value?.visible,
+					"is-touch-ui": j(se),
 					onContextmenu: (e) => j(ne)(o, e),
 					onTap: (e) => j(B)(o, e),
-					onOpenMedia: V,
-					onVotePoll: (e) => U(o, e),
+					onOpenMedia: H,
+					onVotePoll: (e) => ce(o, e),
 					onToggleReaction: (e) => j(ae)(o, e),
-					onOpenThread: (e) => ce(o),
+					onOpenThread: (e) => le(o),
 					onOpenReferencedMessage: n[0] ||= (e) => j(f).emit("message:openReference", e),
 					onAnchorclick: n[1] ||= (e, n) => t.$emit("anchorclick", e, n)
 				}, null, 8, [
@@ -9272,19 +9355,21 @@ var df = { class: "w-full" }, ff = {
 					"pending-option-key",
 					"action-message-class",
 					"action-message-row-class",
+					"context-menu-open",
+					"is-touch-ui",
 					"onContextmenu",
 					"onTap",
 					"onVotePoll",
 					"onToggleReaction",
 					"onOpenThread"
 				])], 64))), 128)),
-				m.value.length === 0 && C.value && !h.value ? (S(), a("div", lm, k(j(c)("noMessagesYetInThisGroup")), 1)) : i("", !0)
-			])], 34), o("footer", { class: g(["message-list__composer flex shrink-0 flex-col", P.value ? F.value ? "bg-transparent p-0" : "message-list__composer--thread" : "bg-transparent p-0"]) }, [E(t.$slots, "composer", {}, void 0, !0)], 2)], 2)) : (S(), a("div", im, k(j(c)("selectConversationToStart")), 1))], 2),
+				m.value.length === 0 && C.value && !h.value ? (S(), a("div", dm, k(j(c)("noMessagesYetInThisGroup")), 1)) : i("", !0)
+			])], 34), o("footer", { class: g(["message-list__composer flex shrink-0 flex-col", P.value ? F.value ? "bg-transparent p-0" : "message-list__composer--thread" : "bg-transparent p-0"]) }, [E(t.$slots, "composer", {}, void 0, !0)], 2)], 2)) : (S(), a("div", om, k(j(c)("selectConversationToStart")), 1))], 2),
 			l(Df, {
 				attachment: M.value,
-				onClose: H
+				onClose: U
 			}, null, 8, ["attachment"]),
-			l(qp, {
+			l(Yp, {
 				ref_key: "actionMenuRef",
 				ref: R,
 				message: j(z),
@@ -9300,13 +9385,13 @@ var df = { class: "w-full" }, ff = {
 			])
 		], 64));
 	}
-}), [["__scopeId", "data-v-bea26e53"]]), dm = { class: "receipt-section" }, fm = { class: "receipt-section__header" }, pm = { class: "heading-sm text-default" }, mm = { class: "body-sm text-subtlest" }, hm = {
+}), [["__scopeId", "data-v-b0f7fcc2"]]), pm = { class: "receipt-section" }, mm = { class: "receipt-section__header" }, hm = { class: "heading-sm text-default" }, gm = { class: "body-sm text-subtlest" }, _m = {
 	key: 0,
 	class: "space-y-2"
-}, gm = { class: "flex min-w-0 items-center gap-3" }, _m = { class: "min-w-0" }, vm = { class: "heading-sm text-default truncate" }, ym = { class: "body-sm text-subtle truncate" }, bm = { class: "body-sm text-subtle shrink-0" }, xm = {
+}, vm = { class: "flex min-w-0 items-center gap-3" }, ym = { class: "min-w-0" }, bm = { class: "heading-sm text-default truncate" }, xm = { class: "body-sm text-subtle truncate" }, Sm = { class: "body-sm text-subtle shrink-0" }, Cm = {
 	key: 1,
 	class: "receipt-section__empty"
-}, Sm = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, wm = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "ReceiptSection",
 	props: {
 		title: {},
@@ -9315,29 +9400,29 @@ var df = { class: "w-full" }, ff = {
 		formatDateTime: { type: Function }
 	},
 	setup(t) {
-		return (n, r) => (S(), a("section", dm, [o("div", fm, [o("p", pm, k(t.title), 1), o("span", mm, k(t.receipts.length), 1)]), t.receipts.length ? (S(), a("div", hm, [(S(!0), a(e, null, T(t.receipts, (e) => (S(), a("div", {
+		return (n, r) => (S(), a("section", pm, [o("div", mm, [o("p", hm, k(t.title), 1), o("span", gm, k(t.receipts.length), 1)]), t.receipts.length ? (S(), a("div", _m, [(S(!0), a(e, null, T(t.receipts, (e) => (S(), a("div", {
 			key: `${e.kind}-${e.user.uid}`,
 			class: "receipt-section__row"
-		}, [o("div", gm, [l(j(R), {
+		}, [o("div", vm, [l(j(R), {
 			image: e.user.avatar,
 			label: e.user.avatar ? void 0 : e.user.name.slice(0, 1).toUpperCase(),
 			shape: "circle",
 			class: "shrink-0"
-		}, null, 8, ["image", "label"]), o("div", _m, [o("p", vm, k(e.user.name), 1), o("p", ym, k(e.user.uid), 1)])]), o("p", bm, k(t.formatDateTime(e.timestamp)), 1)]))), 128))])) : (S(), a("div", xm, k(t.emptyLabel), 1))]));
+		}, null, 8, ["image", "label"]), o("div", ym, [o("p", bm, k(e.user.name), 1), o("p", xm, k(e.user.uid), 1)])]), o("p", Sm, k(t.formatDateTime(e.timestamp)), 1)]))), 128))])) : (S(), a("div", Cm, k(t.emptyLabel), 1))]));
 	}
-}), [["__scopeId", "data-v-2b2f0a3e"]]), Cm = {
+}), [["__scopeId", "data-v-2b2f0a3e"]]), Tm = {
 	key: 0,
 	class: "message-info-dialog-content space-y-5 overflow-y-auto"
-}, wm = { class: "message-info-summary px-4 py-4 sm:px-6 sm:py-5" }, Tm = { class: "body-md text-default wrap-break-word whitespace-pre-wrap" }, Em = { class: "mt-4 grid gap-3 sm:grid-cols-3" }, Dm = { class: "message-info-metric px-3 py-3" }, Om = { class: "body-sm text-subtlest font-semibold uppercase" }, km = { class: "heading-sm text-default mt-1" }, Am = { class: "message-info-metric px-3 py-3" }, jm = { class: "flex items-center gap-2" }, Mm = { class: "body-sm text-subtlest font-semibold uppercase" }, Nm = { class: "heading-sm text-default mt-1" }, Pm = { class: "message-info-metric px-3 py-3" }, Fm = { class: "flex items-center gap-2" }, Im = { class: "body-sm text-subtlest font-semibold uppercase" }, Lm = { class: "heading-sm text-default mt-1" }, Rm = {
+}, Em = { class: "message-info-summary px-4 py-4 sm:px-6 sm:py-5" }, Dm = { class: "body-md text-default wrap-break-word whitespace-pre-wrap" }, Om = { class: "mt-4 grid gap-3 sm:grid-cols-3" }, km = { class: "message-info-metric px-3 py-3" }, Am = { class: "body-sm text-subtlest font-semibold uppercase" }, jm = { class: "heading-sm text-default mt-1" }, Mm = { class: "message-info-metric px-3 py-3" }, Nm = { class: "flex items-center gap-2" }, Pm = { class: "body-sm text-subtlest font-semibold uppercase" }, Fm = { class: "heading-sm text-default mt-1" }, Im = { class: "message-info-metric px-3 py-3" }, Lm = { class: "flex items-center gap-2" }, Rm = { class: "body-sm text-subtlest font-semibold uppercase" }, zm = { class: "heading-sm text-default mt-1" }, Bm = {
 	key: 0,
 	class: "flex items-center justify-center px-4 py-8 sm:px-6"
-}, zm = {
+}, Vm = {
 	key: 1,
 	class: "message-info-error body-md mx-4 rounded-xl px-4 py-3 sm:mx-6"
-}, Bm = {
+}, Hm = {
 	key: 2,
 	class: "space-y-4 pb-4 sm:pb-5"
-}, Vm = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, Um = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageInfoDialog",
 	props: {
 		open: { type: Boolean },
@@ -9366,27 +9451,27 @@ var df = { class: "w-full" }, ff = {
 			"close-label": j(d)("close"),
 			onClose: n[0] ||= (e) => c("close")
 		}, {
-			default: I(() => [e.message ? (S(), a("div", Cm, [o("div", wm, [o("p", Tm, k(j(Ws)(e.message, j(d)("message"), j(f).mentionNameByUid.value)), 1), o("div", Em, [
-				o("div", Dm, [o("p", Om, k(j(d)("sent")), 1), o("p", km, k(g(e.message.sentAt)), 1)]),
-				o("div", Am, [o("div", jm, [o("p", Mm, k(j(d)("deliveredToAll")), 1), h.value.length ? (S(), r(j(V), {
+			default: I(() => [e.message ? (S(), a("div", Tm, [o("div", Em, [o("p", Dm, k(j(Ws)(e.message, j(d)("message"), j(f).mentionNameByUid.value)), 1), o("div", Om, [
+				o("div", km, [o("p", Am, k(j(d)("sent")), 1), o("p", jm, k(g(e.message.sentAt)), 1)]),
+				o("div", Mm, [o("div", Nm, [o("p", Pm, k(j(d)("deliveredToAll")), 1), h.value.length ? (S(), r(j(V), {
 					key: 0,
 					text: String(h.value.length),
 					context: "secondary",
 					rounded: ""
-				}, null, 8, ["text"])) : i("", !0)]), o("p", Nm, k(_(e.message.receipts.deliveredAt, h.value.length)), 1)]),
-				o("div", Pm, [o("div", Fm, [o("p", Im, k(j(d)("readByAll")), 1), m.value.length ? (S(), r(j(V), {
+				}, null, 8, ["text"])) : i("", !0)]), o("p", Fm, k(_(e.message.receipts.deliveredAt, h.value.length)), 1)]),
+				o("div", Im, [o("div", Lm, [o("p", Rm, k(j(d)("readByAll")), 1), m.value.length ? (S(), r(j(V), {
 					key: 0,
 					text: String(m.value.length),
 					context: "success",
 					rounded: ""
-				}, null, 8, ["text"])) : i("", !0)]), o("p", Lm, k(_(e.message.receipts.readAt, m.value.length)), 1)])
-			])]), e.loading ? (S(), a("div", Rm, [l(j(se), {
+				}, null, 8, ["text"])) : i("", !0)]), o("p", zm, k(_(e.message.receipts.readAt, m.value.length)), 1)])
+			])]), e.loading ? (S(), a("div", Bm, [l(j(se), {
 				style: {
 					width: "2.5rem",
 					height: "2.5rem"
 				},
 				"stroke-width": "5"
-			})])) : e.error ? (S(), a("div", zm, k(e.error), 1)) : (S(), a("div", Bm, [l(Sm, {
+			})])) : e.error ? (S(), a("div", Vm, k(e.error), 1)) : (S(), a("div", Hm, [l(wm, {
 				title: j(d)("readBy"),
 				receipts: m.value,
 				"empty-label": j(d)("nobodyHasReadThisMessageYet"),
@@ -9395,7 +9480,7 @@ var df = { class: "w-full" }, ff = {
 				"title",
 				"receipts",
 				"empty-label"
-			]), l(Sm, {
+			]), l(wm, {
 				title: j(d)("deliveredNotYetRead"),
 				receipts: p.value,
 				"empty-label": j(d)("noRecipientsDeliveredStageYet"),
@@ -9413,34 +9498,34 @@ var df = { class: "w-full" }, ff = {
 			"close-label"
 		]));
 	}
-}), [["__scopeId", "data-v-30ce65f1"]]), Hm = { class: "min-h-0 flex-1 overflow-y-auto" }, Um = {
+}), [["__scopeId", "data-v-30ce65f1"]]), Wm = { class: "min-h-0 flex-1 overflow-y-auto" }, Gm = {
 	key: 0,
 	class: "flex h-full min-h-64 items-center justify-center"
-}, Wm = {
+}, Km = {
 	key: 1,
 	class: "bg-elevation-surface-sunken-default body-md flex h-full min-h-64 items-center justify-center rounded-xl px-6 text-center"
-}, Gm = {
+}, qm = {
 	key: 2,
 	class: "space-y-3"
-}, Km = { class: "flex flex-wrap items-start justify-between gap-3" }, qm = { class: "w-full space-y-2" }, Jm = { class: "center between gap-2" }, Ym = { class: "" }, Xm = { class: "space-y-1" }, Zm = { class: "heading-sm text-default" }, Qm = {
+}, Jm = { class: "flex flex-wrap items-start justify-between gap-3" }, Ym = { class: "w-full space-y-2" }, Xm = { class: "center between gap-2" }, Zm = { class: "" }, Qm = { class: "space-y-1" }, $m = { class: "heading-sm text-default" }, eh = {
 	key: 0,
 	class: "body-md text-default"
-}, $m = {
+}, th = {
 	key: 1,
 	class: "body-md text-default wrap-break-word whitespace-pre-wrap"
-}, eh = {
+}, nh = {
 	key: 0,
 	class: "max-w-sm"
-}, th = { class: "flex flex-wrap items-center gap-1" }, nh = {
+}, rh = { class: "flex flex-wrap items-center gap-1" }, ih = {
 	key: 0,
 	class: "bg-elevation-surface-sunken-default mt-4 flex flex-col gap-3 rounded-xl p-3 sm:flex-row sm:items-center"
-}, rh = { class: "grid w-full grid-cols-1 gap-2 sm:grid-cols-[1fr_8rem]" }, ih = { class: "flex items-center gap-2" }, ah = {
+}, ah = { class: "grid w-full grid-cols-1 gap-2 sm:grid-cols-[1fr_8rem]" }, oh = { class: "flex items-center gap-2" }, sh = {
 	key: 1,
 	class: "bg-elevation-surface-sunken-default mt-4 flex flex-col gap-3 rounded-xl p-3"
-}, oh = {
+}, ch = {
 	key: 0,
 	class: "relative max-w-sm"
-}, sh = { class: "absolute top-2 right-2" }, ch = ["placeholder"], lh = { class: "flex items-center justify-end gap-2" }, uh = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, lh = { class: "absolute top-2 right-2" }, uh = ["placeholder"], dh = { class: "flex items-center justify-end gap-2" }, fh = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "ScheduledMessagesDialog",
 	props: {
 		open: { type: Boolean },
@@ -9529,17 +9614,17 @@ var df = { class: "w-full" }, ff = {
 			"close-label": j(v)("close"),
 			onClose: s[3] ||= (e) => u("close")
 		}, {
-			default: I(() => [o("div", Hm, [t.loading ? (S(), a("div", Um, [l(j(se), {
+			default: I(() => [o("div", Wm, [t.loading ? (S(), a("div", Gm, [l(j(se), {
 				style: {
 					width: "2.75rem",
 					height: "2.75rem"
 				},
 				"stroke-width": "6"
-			})])) : y.value.length === 0 ? (S(), a("div", Wm, k(j(v)("noScheduledMessagesForConversation")), 1)) : (S(), a("div", Gm, [(S(!0), a(e, null, T(y.value, (e) => (S(), a("article", {
+			})])) : y.value.length === 0 ? (S(), a("div", Km, k(j(v)("noScheduledMessagesForConversation")), 1)) : (S(), a("div", qm, [(S(!0), a(e, null, T(y.value, (e) => (S(), a("article", {
 				key: e.id,
 				class: "border-default rounded-lg border px-4 py-3"
-			}, [o("div", Km, [o("div", qm, [
-				o("div", Jm, [o("div", Ym, [e.kind === "poll" ? (S(), r(j(V), {
+			}, [o("div", Jm, [o("div", Ym, [
+				o("div", Xm, [o("div", Zm, [e.kind === "poll" ? (S(), r(j(V), {
 					key: 0,
 					text: j(v)("poll"),
 					context: "info",
@@ -9560,9 +9645,9 @@ var df = { class: "w-full" }, ff = {
 					size: "small",
 					onClick: (t) => B(e)
 				}, null, 8, ["icon", "onClick"])]),
-				o("div", Xm, [o("p", Zm, k(x(e.scheduled?.scheduleDate)), 1), e.kind === "poll" && e.poll ? (S(), a("p", Qm, k(e.poll.question), 1)) : (S(), a("p", $m, k(j(Ws)(e, j(v)("attachment"))), 1))]),
-				L(e) && !(d.value === e.id && f.value === "text") ? (S(), a("div", eh, [l(lp, { message: N(e) }, null, 8, ["message"])])) : i("", !0)
-			]), o("div", th, [e.kind === "poll" ? i("", !0) : (S(), r(j(z), {
+				o("div", Qm, [o("p", $m, k(x(e.scheduled?.scheduleDate)), 1), e.kind === "poll" && e.poll ? (S(), a("p", eh, k(e.poll.question), 1)) : (S(), a("p", th, k(j(Ws)(e, j(v)("attachment"))), 1))]),
+				L(e) && !(d.value === e.id && f.value === "text") ? (S(), a("div", nh, [l(lp, { message: N(e) }, null, 8, ["message"])])) : i("", !0)
+			]), o("div", rh, [e.kind === "poll" ? i("", !0) : (S(), r(j(z), {
 				key: 0,
 				label: j(v)("edit"),
 				icon: j(ye),
@@ -9584,7 +9669,7 @@ var df = { class: "w-full" }, ff = {
 				"label",
 				"icon",
 				"onClick"
-			])) : i("", !0)])]), d.value === e.id && f.value === "reschedule" ? (S(), a("div", nh, [o("div", rh, [te(o("input", {
+			])) : i("", !0)])]), d.value === e.id && f.value === "reschedule" ? (S(), a("div", ih, [o("div", ah, [te(o("input", {
 				"onUpdate:modelValue": s[0] ||= (e) => m.value = e,
 				type: "date",
 				class: "surface-input body-md w-full rounded-xl p-2 ring-0 outline-none"
@@ -9596,7 +9681,7 @@ var df = { class: "w-full" }, ff = {
 				pattern: "^([01]\\d|2[0-3]):([0-5]\\d)$",
 				"aria-label": "Time (24-hour)",
 				class: "surface-input body-md w-full rounded-xl p-2 ring-0 outline-none"
-			}, null, 512), [[ee, h.value]])]), o("div", ih, [l(j(z), {
+			}, null, 512), [[ee, h.value]])]), o("div", oh, [l(j(z), {
 				label: j(v)("save"),
 				size: "small",
 				disabled: !m.value || !b.value,
@@ -9610,8 +9695,8 @@ var df = { class: "w-full" }, ff = {
 				size: "small",
 				text: "",
 				onClick: M
-			}, null, 8, ["label"])])])) : d.value === e.id && f.value === "text" ? (S(), a("div", ah, [
-				L(e) ? (S(), a("div", oh, [l(lp, { message: N(e) }, null, 8, ["message"]), o("div", sh, [l(j(z), {
+			}, null, 8, ["label"])])])) : d.value === e.id && f.value === "text" ? (S(), a("div", sh, [
+				L(e) ? (S(), a("div", ch, [l(lp, { message: N(e) }, null, 8, ["message"]), o("div", lh, [l(j(z), {
 					icon: j(fe),
 					"aria-label": j(v)("remove"),
 					text: "",
@@ -9625,8 +9710,8 @@ var df = { class: "w-full" }, ff = {
 					rows: "3",
 					class: "surface-input body-md w-full rounded-xl px-3 py-2 ring-0 outline-none",
 					placeholder: j(v)("writeMessage")
-				}, null, 8, ch), [[ee, g.value]]),
-				o("div", lh, [l(j(z), {
+				}, null, 8, uh), [[ee, g.value]]),
+				o("div", dh, [l(j(z), {
 					label: j(v)("cancel"),
 					size: "small",
 					text: "",
@@ -9650,7 +9735,7 @@ var df = { class: "w-full" }, ff = {
 			"close-label"
 		]));
 	}
-}), [["__scopeId", "data-v-0bb2dc95"]]), dh = { class: "chat-status-overlay" }, fh = { class: "chat-status-overlay__card" }, ph = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-0bb2dc95"]]), ph = { class: "chat-status-overlay" }, mh = { class: "chat-status-overlay__card" }, hh = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "ChatStatusOverlay",
 	props: {
 		visible: { type: Boolean },
@@ -9683,9 +9768,9 @@ var df = { class: "w-full" }, ff = {
 			message: t.messages.connecting,
 			slotName: "connecting"
 		} : null);
-		return (e, t) => r.value ? E(e.$slots, r.value.slotName, { key: 0 }, () => [o("div", dh, [o("div", fh, [E(e.$slots, `${r.value.slotName}-content`, {}, () => [o("span", null, k(r.value.message), 1)], !0)])])], !0) : i("", !0);
+		return (e, t) => r.value ? E(e.$slots, r.value.slotName, { key: 0 }, () => [o("div", ph, [o("div", mh, [E(e.$slots, `${r.value.slotName}-content`, {}, () => [o("span", null, k(r.value.message), 1)], !0)])])], !0) : i("", !0);
 	}
-}), [["__scopeId", "data-v-7749aec9"]]), mh = /* @__PURE__ */ u({
+}), [["__scopeId", "data-v-7749aec9"]]), gh = /* @__PURE__ */ u({
 	__name: "BccChat",
 	props: {
 		client: { default: null },
@@ -9916,7 +10001,7 @@ var df = { class: "w-full" }, ff = {
 				_: 1
 			})]) : i("", !0),
 			T.value ? (S(), a(e, { key: 1 }, [
-				l(um, {
+				l(fm, {
 					target: "main",
 					class: g(["h-full", t.containerClass]),
 					"hide-group-actions": t.hideGroupActions,
@@ -9950,7 +10035,7 @@ var df = { class: "w-full" }, ff = {
 					"close-aria-label": j(m)("closeThread"),
 					onClose: r[0] ||= (e) => j(re).emit("ui:closeThread")
 				}, {
-					default: I(() => [l(um, {
+					default: I(() => [l(fm, {
 						target: "thread",
 						class: "min-h-0 flex-1",
 						"action-message-class": t.actionMessageClass,
@@ -9971,7 +10056,7 @@ var df = { class: "w-full" }, ff = {
 					"close-label",
 					"close-aria-label"
 				]),
-				l(uh, {
+				l(fh, {
 					open: j(R).showScheduledMessages.value,
 					loading: j(R).loadingScheduledMessages.value,
 					messages: j(R).scheduledMessages.value,
@@ -9986,7 +10071,7 @@ var df = { class: "w-full" }, ff = {
 					"messages",
 					"conversation-title"
 				]),
-				l(Vm, {
+				l(Um, {
 					open: !!j(R).infoMessage.value,
 					message: j(R).infoMessage.value,
 					receipts: j(R).infoMessageReceipts.value,
@@ -10001,7 +10086,7 @@ var df = { class: "w-full" }, ff = {
 					"error"
 				])
 			], 64)) : i("", !0),
-			l(ph, {
+			l(hh, {
 				visible: D.value && (T.value?.offlineMode.value || !T.value?.connected.value || x.value && !te.value || v.value || C.value || t.displayNoMessagesText && j(P).isChatEmpty.value),
 				"offline-mode": !!(T.value?.offlineMode.value && !O.value),
 				connected: !!(T.value?.connected.value || O.value),
@@ -10041,6 +10126,6 @@ var df = { class: "w-full" }, ff = {
 	}
 });
 //#endregion
-export { mh as BccChat, mh as BccChatMessageList, Ol as LogSeverity, gu as chat, gu as default, cc as createChatClient };
+export { gh as BccChat, gh as BccChatMessageList, Ol as LogSeverity, gu as chat, gu as default, cc as createChatClient };
 
 //# sourceMappingURL=vue-bcc-chat-ui.js.map