@bcc-code/vue-bcc-chat-ui 7.1.47 → 7.1.48

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", gh), e.provide("theme", { theme: El });
+	n && (n.config.ripple = !0, n.config.inputVariant = "filled"), e.component("BccChat", hh), e.provide("theme", { theme: El });
 	let r = Vl(t.environment);
 	zl(Ol.INFO, "Initializing chat", {
 		environment: t.environment,
@@ -7974,27 +7974,47 @@ function ef(e) {
 			y: 0
 		};
 	}
-	function _(e, t) {
+	async function _(e, t) {
 		if (o.value) {
 			let t = g(e);
 			return {
 				x: t.x + 2,
-				y: t.y + 2
+				y: t.y + 2,
+				element: void 0
 			};
-		} else if (window) {
-			let n = e.target instanceof HTMLElement ? e.target.closest(".message-item").getBoundingClientRect().height : 0;
+		}
+		if (typeof window < "u") {
+			let n = null, r = null;
+			e.target instanceof HTMLElement && (n = e.target.closest(".message-item"), r = n?.querySelector(".message-bubble--spotlight .message-bubble"));
+			let i = t.isOwn ? window.innerWidth * 2 / 3 : window.innerWidth / 3, a = window.innerHeight / 2;
+			if (r) {
+				await new Promise((e) => requestAnimationFrame(() => e()));
+				let e = r.getBoundingClientRect();
+				a = e.top + e.height;
+			} else if (n) {
+				let e = n ? n.getBoundingClientRect().height : 0;
+				a = window.innerHeight / 2 + e / 2;
+			}
 			return {
-				x: t.isOwn ? window.innerWidth * 2 / 3 : window.innerWidth / 3,
-				y: window.innerHeight / 2 + n / 2
+				x: i,
+				y: a,
+				element: r ?? n ?? void 0
 			};
 		}
 		return {
 			x: 0,
-			y: 0
+			y: 0,
+			element: void 0
 		};
 	}
 	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))));
+		if (!e.canUseMessageActions() || a === "contextmenu" && !o.value || a === "tap" && o.value) return;
+		i.preventDefault(), i.stopPropagation(), e.onMenuOpen?.(), r.value = n, await h();
+		let { x: s, y: c, element: l } = await _(i, n);
+		t.value?.show(i, l ? void 0 : {
+			x: s,
+			y: c
+		}, l);
 	}
 	function y(e, t) {
 		v(e, t, "contextmenu");
@@ -8900,7 +8920,7 @@ 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 = { 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({
+], Lp = { class: "message-item__footer body-sm text-subtlest mt-0.5 flex items-end justify-between gap-2" }, Rp = { class: "message-item__footer body-sm text-subtlest mt-0.5 flex items-end justify-between gap-2" }, zp = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageItem",
 	props: {
 		message: {},
@@ -8932,13 +8952,19 @@ var df = { class: "w-full" }, ff = {
 		function m(e) {
 			return e instanceof Element ? !!e.closest("button, a, input, textarea, select, label, summary, video, audio") : !1;
 		}
-		function h(e) {
+		function _(e) {
 			m(e.target) || u("contextmenu", e);
 		}
-		function _(e) {
+		function y(e) {
 			m(e.target) || u("tap", e);
 		}
-		function v() {
+		let b = N("originalBubble"), x = w("0px");
+		F(() => c.contextMenuOpen && c.isTouchUi, async (e) => {
+			if (!e || (await h(), !b.value)) return;
+			let t = b.value.getBoundingClientRect(), n = Math.min(t.top, window.innerHeight - 50 - t.height);
+			x.value = `${Math.max(0, n - 32)}px`;
+		}, { immediate: !0 });
+		function C() {
 			let e = c.message.replyTo?.messageId?.trim();
 			e && u("openReferencedMessage", e);
 		}
@@ -8960,10 +8986,11 @@ var df = { class: "w-full" }, ff = {
 				class: "mb-1 shrink-0 self-end"
 			}, null, 8, ["image", "label"])) : i("", !0),
 			o("div", {
+				ref: "originalBubble",
 				"data-testid": "message-bubble",
 				class: g(["message-bubble", f.value]),
-				onContextmenu: h,
-				onClick: _
+				onContextmenu: _,
+				onClick: y
 			}, [
 				!t.message.isOwn || t.message.scheduled?.scheduleDate ? (S(), r(hp, {
 					key: 0,
@@ -8972,7 +8999,7 @@ var df = { class: "w-full" }, ff = {
 				t.message.replyTo ? (S(), r(Np, {
 					key: 1,
 					message: t.message,
-					onOpen: v
+					onOpen: C
 				}, null, 8, ["message"])) : i("", !0),
 				t.message.kind === "poll" && t.message.poll ? (S(), r(Ap, {
 					key: 2,
@@ -9008,7 +9035,10 @@ var df = { class: "w-full" }, ff = {
 			t.contextMenuOpen && t.isTouchUi ? (S(), a("div", {
 				key: 1,
 				class: g(["message-bubble--spotlight", f.value])
-			}, [o("div", Rp, [o("div", { class: g(["message-bubble", f.value]) }, [
+			}, [o("div", {
+				class: "message-bubble-wrapper",
+				style: v({ top: x.value })
+			}, [o("div", { class: g(["message-bubble", f.value]) }, [
 				!t.message.isOwn || t.message.scheduled?.scheduleDate ? (S(), r(hp, {
 					key: 0,
 					message: t.message
@@ -9016,7 +9046,7 @@ var df = { class: "w-full" }, ff = {
 				t.message.replyTo ? (S(), r(Np, {
 					key: 1,
 					message: t.message,
-					onOpen: v
+					onOpen: C
 				}, null, 8, ["message"])) : i("", !0),
 				t.message.kind === "poll" && t.message.poll ? (S(), r(Ap, {
 					key: 2,
@@ -9037,7 +9067,7 @@ var df = { class: "w-full" }, ff = {
 					message: t.message,
 					onAnchorclick: s[7] ||= (e, t) => n.$emit("anchorclick", e, t)
 				}, null, 8, ["message"])),
-				o("div", zp, [l(xp, {
+				o("div", Rp, [l(xp, {
 					message: t.message,
 					"can-react": t.canReact,
 					"can-open-thread": t.canOpenThread,
@@ -9048,20 +9078,20 @@ var df = { class: "w-full" }, ff = {
 					"can-react",
 					"can-open-thread"
 				]), l(fp, { message: t.message }, null, 8, ["message"])])
-			], 2)])], 2)) : i("", !0)
+			], 2)], 4)], 2)) : i("", !0)
 		], 64))], 10, Ip));
 	}
-}), [["__scopeId", "data-v-7d936de6"]]), Vp = [
+}), [["__scopeId", "data-v-02761d2e"]]), Bp = [
 	"👍",
 	"❤️",
 	"🔥",
 	"😂",
 	"🙏",
 	"🎉"
-], 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 = {
+], Vp = /* @__PURE__ */ "👏.😍.🤯.😮.😢.😡.👀.✅.💯.🙌.🤝.👌.💪.🤔.🫶.😅.🥳.💛.🌟.🚀.💥.🎯.📌.💡.🕊️.☀️.🌈.🍀.🎶.🫡".split("."), Hp = { 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" }, Up = ["disabled", "onClick"], Wp = ["disabled"], Gp = {
 	key: 0,
 	class: "bg-elevation-surface-raised-default shadow-overlay m-0 grid grid-cols-6 gap-1 rounded-lg p-1.5"
-}, qp = ["onClick"], Jp = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, Kp = ["onClick"], qp = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageItemMenuReactions",
 	props: {
 		message: {},
@@ -9073,20 +9103,20 @@ var df = { class: "w-full" }, ff = {
 		F(() => c.message.id, () => {
 			u.value = !1;
 		});
-		let d = n(() => Hp);
+		let d = n(() => Vp);
 		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", Up, [(S(!0), a(e, null, T(j(Vp), (e) => (S(), a("button", {
+		return (n, s) => (S(), a(e, null, [o("div", Hp, [(S(!0), a(e, null, T(j(Bp), (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, Wp))), 128)), o("button", {
+		}, k(e), 11, Up))), 128)), o("button", {
 			type: "button",
 			class: "message-reaction-more",
 			disabled: !t.canReact,
@@ -9094,14 +9124,14 @@ var df = { class: "w-full" }, ff = {
 		}, [(S(), r(D(u.value ? j(De) : j(Ee)), {
 			class: "size-7",
 			"aria-hidden": "true"
-		}))], 8, Gp)]), u.value && t.canReact ? (S(), a("div", Kp, [(S(!0), a(e, null, T(d.value, (e) => (S(), a("button", {
+		}))], 8, Wp)]), u.value && t.canReact ? (S(), a("div", Gp, [(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, qp))), 128))])) : i("", !0)], 64));
+		}, k(e), 11, Kp))), 128))])) : i("", !0)], 64));
 	}
-}), [["__scopeId", "data-v-0a11761a"]]), Yp = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-0a11761a"]]), Jp = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageItemMenu",
 	props: {
 		message: {},
@@ -9125,16 +9155,16 @@ var df = { class: "w-full" }, ff = {
 				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);
+				let e = p.getBoundingClientRect(), t = e.left + e.width / 2, r = n + i, s = e.bottom + 10, u = e.top - a.height - 10, f = s + a.height <= r - 12, m = u >= c, _ = r - 12 - e.bottom - 10, v = e.top - c - 10;
+				h = Math.min(Math.max(t - a.width / 2, o), d), g = f ? Math.min(s, l) : m ? Math.min(u, l) : v >= _ ? c : l;
 			}
 			f.value = {
 				left: h,
 				top: g
 			};
 		}
-		async function b(e, t) {
-			p = g(e), m = t ?? null, !(!p && !m) && (d.value = !0, await h(), await _());
+		async function b(e, t, n) {
+			p = n ?? g(e), m = t ?? null, !(!p && !m) && (d.value = !0, await h(), await _());
 		}
 		function x() {
 			d.value && (d.value = !1, p = null, m = null, c("hide"));
@@ -9144,7 +9174,7 @@ var df = { class: "w-full" }, ff = {
 			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")) {
+					if (p.closest(".message-item")?.contains(t) && t instanceof HTMLElement && (t.classList.contains("message-bubble--spotlight") || t.classList.contains("message-bubble-wrapper"))) {
 						setTimeout(() => {
 							x();
 						}, 100);
@@ -9177,19 +9207,19 @@ var df = { class: "w-full" }, ff = {
 				top: `${f.value.top}px`
 			}),
 			"data-testid": "message-action-popover-shell"
-		}, [l(Jp, {
+		}, [l(qp, {
 			message: e.message,
 			"can-react": e.canReact,
 			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-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 = {
+}), [["__scopeId", "data-v-4cf0e796"]]), Yp = { 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" }, Xp = {
 	key: 0,
 	class: "chat-header__identity flex min-w-0 items-center gap-3"
-}, 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 = {
+}, Zp = { class: "chat-header__text min-w-0" }, Qp = { class: "chat-header__title heading-md text-default sm:heading-lg truncate" }, $p = { class: "chat-header__subtitle body-sm text-subtle sm:body-md truncate" }, em = { key: 0 }, tm = { key: 1 }, nm = { class: "chat-header__actions flex items-center gap-2" }, rm = {
 	key: 0,
 	class: "chat-header__tags hidden flex-wrap gap-2 md:flex"
-}, am = /* @__PURE__ */ u({
+}, im = /* @__PURE__ */ u({
 	__name: "MessageListHeader",
 	props: {
 		conversation: {},
@@ -9197,28 +9227,28 @@ var df = { class: "w-full" }, ff = {
 	},
 	setup(t) {
 		let { t: n } = K();
-		return (s, c) => (S(), a("header", Xp, [t.conversation ? (S(), a("div", Zp, [l(j(R), {
+		return (s, c) => (S(), a("header", Yp, [t.conversation ? (S(), a("div", Xp, [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", 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), {
+		}, null, 8, ["image", "label"]), o("div", Zp, [o("p", Qp, k(t.parentMessage ? j(n)("thread") : t.conversation.title), 1), o("p", $p, [t.parentMessage ? (S(), a("span", em, k(t.parentMessage.senderName), 1)) : (S(), a("span", tm, k(t.conversation.memberCount ? j(n)("members", { count: t.conversation.memberCount }) : j(n)("groupChat")), 1))])])])) : i("", !0), o("div", nm, [t.conversation?.tags?.length ? (S(), a("div", rm, [(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)])]));
 	}
-}), om = {
+}), am = {
 	key: 1,
 	class: "message-list__empty-state"
-}, sm = { class: "space-y-2" }, cm = {
+}, om = { class: "space-y-2" }, sm = {
 	key: 0,
 	class: "message-list__thread-root"
-}, lm = { class: "body-sm text-subtlest truncate font-semibold uppercase" }, um = { class: "body-md text-default mt-1 line-clamp-2" }, dm = {
+}, cm = { class: "body-sm text-subtlest truncate font-semibold uppercase" }, lm = { class: "body-md text-default mt-1 line-clamp-2" }, um = {
 	key: 1,
 	class: "surface-default text-subtle rounded-2xl p-5 text-center"
-}, fm = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, dm = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageList",
 	props: {
 		target: {},
@@ -9311,7 +9341,7 @@ var df = { class: "w-full" }, ff = {
 				title: D.value,
 				subtitle: O.value,
 				memberCount: A.value
-			}, () => [l(am, {
+			}, () => [l(im, {
 				conversation: j(u).conversation.value,
 				"parent-message": _.value
 			}, null, 8, ["conversation", "parent-message"])], !0) : i("", !0), j(u).conversation.value ? (S(), a("div", {
@@ -9322,12 +9352,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", 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),
+			}, [o("div", om, [
+				_.value ? (S(), a("div", sm, [o("p", cm, k(_.value.senderName), 1), o("p", lm, 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(Bp, {
+				}, null, 8, ["date"])) : i("", !0), l(zp, {
 					message: o,
 					"current-user-id": j(u).currentUserId.value,
 					"can-react": j(u).canReact.value,
@@ -9336,7 +9366,7 @@ 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,
+					"context-menu-open": j(z)?.id === o.id,
 					"is-touch-ui": j(se),
 					onContextmenu: (e) => j(ne)(o, e),
 					onTap: (e) => j(B)(o, e),
@@ -9363,13 +9393,13 @@ var df = { class: "w-full" }, ff = {
 					"onToggleReaction",
 					"onOpenThread"
 				])], 64))), 128)),
-				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),
+				m.value.length === 0 && C.value && !h.value ? (S(), a("div", um, 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", am, k(j(c)("selectConversationToStart")), 1))], 2),
 			l(Df, {
 				attachment: M.value,
 				onClose: U
 			}, null, 8, ["attachment"]),
-			l(Yp, {
+			l(Jp, {
 				ref_key: "actionMenuRef",
 				ref: R,
 				message: j(z),
@@ -9385,13 +9415,13 @@ var df = { class: "w-full" }, ff = {
 			])
 		], 64));
 	}
-}), [["__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 = {
+}), [["__scopeId", "data-v-5df7d69f"]]), fm = { class: "receipt-section" }, pm = { class: "receipt-section__header" }, mm = { class: "heading-sm text-default" }, hm = { class: "body-sm text-subtlest" }, gm = {
 	key: 0,
 	class: "space-y-2"
-}, 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 = {
+}, _m = { class: "flex min-w-0 items-center gap-3" }, vm = { class: "min-w-0" }, ym = { class: "heading-sm text-default truncate" }, bm = { class: "body-sm text-subtle truncate" }, xm = { class: "body-sm text-subtle shrink-0" }, Sm = {
 	key: 1,
 	class: "receipt-section__empty"
-}, wm = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, Cm = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "ReceiptSection",
 	props: {
 		title: {},
@@ -9400,29 +9430,29 @@ var df = { class: "w-full" }, ff = {
 		formatDateTime: { type: Function }
 	},
 	setup(t) {
-		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", {
+		return (n, r) => (S(), a("section", fm, [o("div", pm, [o("p", mm, k(t.title), 1), o("span", hm, k(t.receipts.length), 1)]), t.receipts.length ? (S(), a("div", gm, [(S(!0), a(e, null, T(t.receipts, (e) => (S(), a("div", {
 			key: `${e.kind}-${e.user.uid}`,
 			class: "receipt-section__row"
-		}, [o("div", vm, [l(j(R), {
+		}, [o("div", _m, [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", 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))]));
+		}, null, 8, ["image", "label"]), o("div", vm, [o("p", ym, k(e.user.name), 1), o("p", bm, k(e.user.uid), 1)])]), o("p", xm, k(t.formatDateTime(e.timestamp)), 1)]))), 128))])) : (S(), a("div", Sm, k(t.emptyLabel), 1))]));
 	}
-}), [["__scopeId", "data-v-2b2f0a3e"]]), Tm = {
+}), [["__scopeId", "data-v-2b2f0a3e"]]), wm = {
 	key: 0,
 	class: "message-info-dialog-content space-y-5 overflow-y-auto"
-}, 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 = {
+}, Tm = { class: "message-info-summary px-4 py-4 sm:px-6 sm:py-5" }, Em = { class: "body-md text-default wrap-break-word whitespace-pre-wrap" }, Dm = { class: "mt-4 grid gap-3 sm:grid-cols-3" }, Om = { class: "message-info-metric px-3 py-3" }, km = { class: "body-sm text-subtlest font-semibold uppercase" }, Am = { class: "heading-sm text-default mt-1" }, jm = { class: "message-info-metric px-3 py-3" }, Mm = { class: "flex items-center gap-2" }, Nm = { class: "body-sm text-subtlest font-semibold uppercase" }, Pm = { class: "heading-sm text-default mt-1" }, Fm = { class: "message-info-metric px-3 py-3" }, Im = { class: "flex items-center gap-2" }, Lm = { class: "body-sm text-subtlest font-semibold uppercase" }, Rm = { class: "heading-sm text-default mt-1" }, zm = {
 	key: 0,
 	class: "flex items-center justify-center px-4 py-8 sm:px-6"
-}, Vm = {
+}, Bm = {
 	key: 1,
 	class: "message-info-error body-md mx-4 rounded-xl px-4 py-3 sm:mx-6"
-}, Hm = {
+}, Vm = {
 	key: 2,
 	class: "space-y-4 pb-4 sm:pb-5"
-}, Um = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, Hm = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "MessageInfoDialog",
 	props: {
 		open: { type: Boolean },
@@ -9451,27 +9481,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", 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), {
+			default: I(() => [e.message ? (S(), a("div", wm, [o("div", Tm, [o("p", Em, k(j(Ws)(e.message, j(d)("message"), j(f).mentionNameByUid.value)), 1), o("div", Dm, [
+				o("div", Om, [o("p", km, k(j(d)("sent")), 1), o("p", Am, k(g(e.message.sentAt)), 1)]),
+				o("div", jm, [o("div", Mm, [o("p", Nm, 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", 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), {
+				}, null, 8, ["text"])) : i("", !0)]), o("p", Pm, k(_(e.message.receipts.deliveredAt, h.value.length)), 1)]),
+				o("div", Fm, [o("div", Im, [o("p", Lm, 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", zm, k(_(e.message.receipts.readAt, m.value.length)), 1)])
-			])]), e.loading ? (S(), a("div", Bm, [l(j(se), {
+				}, null, 8, ["text"])) : i("", !0)]), o("p", Rm, k(_(e.message.receipts.readAt, m.value.length)), 1)])
+			])]), e.loading ? (S(), a("div", zm, [l(j(se), {
 				style: {
 					width: "2.5rem",
 					height: "2.5rem"
 				},
 				"stroke-width": "5"
-			})])) : e.error ? (S(), a("div", Vm, k(e.error), 1)) : (S(), a("div", Hm, [l(wm, {
+			})])) : e.error ? (S(), a("div", Bm, k(e.error), 1)) : (S(), a("div", Vm, [l(Cm, {
 				title: j(d)("readBy"),
 				receipts: m.value,
 				"empty-label": j(d)("nobodyHasReadThisMessageYet"),
@@ -9480,7 +9510,7 @@ var df = { class: "w-full" }, ff = {
 				"title",
 				"receipts",
 				"empty-label"
-			]), l(wm, {
+			]), l(Cm, {
 				title: j(d)("deliveredNotYetRead"),
 				receipts: p.value,
 				"empty-label": j(d)("noRecipientsDeliveredStageYet"),
@@ -9498,34 +9528,34 @@ var df = { class: "w-full" }, ff = {
 			"close-label"
 		]));
 	}
-}), [["__scopeId", "data-v-30ce65f1"]]), Wm = { class: "min-h-0 flex-1 overflow-y-auto" }, Gm = {
+}), [["__scopeId", "data-v-30ce65f1"]]), Um = { class: "min-h-0 flex-1 overflow-y-auto" }, Wm = {
 	key: 0,
 	class: "flex h-full min-h-64 items-center justify-center"
-}, Km = {
+}, Gm = {
 	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"
-}, qm = {
+}, Km = {
 	key: 2,
 	class: "space-y-3"
-}, 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 = {
+}, qm = { class: "flex flex-wrap items-start justify-between gap-3" }, Jm = { class: "w-full space-y-2" }, Ym = { class: "center between gap-2" }, Xm = { class: "" }, Zm = { class: "space-y-1" }, Qm = { class: "heading-sm text-default" }, $m = {
 	key: 0,
 	class: "body-md text-default"
-}, th = {
+}, eh = {
 	key: 1,
 	class: "body-md text-default wrap-break-word whitespace-pre-wrap"
-}, nh = {
+}, th = {
 	key: 0,
 	class: "max-w-sm"
-}, rh = { class: "flex flex-wrap items-center gap-1" }, ih = {
+}, nh = { class: "flex flex-wrap items-center gap-1" }, rh = {
 	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"
-}, ah = { class: "grid w-full grid-cols-1 gap-2 sm:grid-cols-[1fr_8rem]" }, oh = { class: "flex items-center gap-2" }, sh = {
+}, ih = { class: "grid w-full grid-cols-1 gap-2 sm:grid-cols-[1fr_8rem]" }, ah = { class: "flex items-center gap-2" }, oh = {
 	key: 1,
 	class: "bg-elevation-surface-sunken-default mt-4 flex flex-col gap-3 rounded-xl p-3"
-}, ch = {
+}, sh = {
 	key: 0,
 	class: "relative max-w-sm"
-}, lh = { class: "absolute top-2 right-2" }, uh = ["placeholder"], dh = { class: "flex items-center justify-end gap-2" }, fh = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}, ch = { class: "absolute top-2 right-2" }, lh = ["placeholder"], uh = { class: "flex items-center justify-end gap-2" }, dh = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "ScheduledMessagesDialog",
 	props: {
 		open: { type: Boolean },
@@ -9614,17 +9644,17 @@ var df = { class: "w-full" }, ff = {
 			"close-label": j(v)("close"),
 			onClose: s[3] ||= (e) => u("close")
 		}, {
-			default: I(() => [o("div", Wm, [t.loading ? (S(), a("div", Gm, [l(j(se), {
+			default: I(() => [o("div", Um, [t.loading ? (S(), a("div", Wm, [l(j(se), {
 				style: {
 					width: "2.75rem",
 					height: "2.75rem"
 				},
 				"stroke-width": "6"
-			})])) : 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", {
+			})])) : y.value.length === 0 ? (S(), a("div", Gm, k(j(v)("noScheduledMessagesForConversation")), 1)) : (S(), a("div", Km, [(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", Jm, [o("div", Ym, [
-				o("div", Xm, [o("div", Zm, [e.kind === "poll" ? (S(), r(j(V), {
+			}, [o("div", qm, [o("div", Jm, [
+				o("div", Ym, [o("div", Xm, [e.kind === "poll" ? (S(), r(j(V), {
 					key: 0,
 					text: j(v)("poll"),
 					context: "info",
@@ -9645,9 +9675,9 @@ var df = { class: "w-full" }, ff = {
 					size: "small",
 					onClick: (t) => B(e)
 				}, null, 8, ["icon", "onClick"])]),
-				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), {
+				o("div", Zm, [o("p", Qm, k(x(e.scheduled?.scheduleDate)), 1), e.kind === "poll" && e.poll ? (S(), a("p", $m, k(e.poll.question), 1)) : (S(), a("p", eh, k(j(Ws)(e, j(v)("attachment"))), 1))]),
+				L(e) && !(d.value === e.id && f.value === "text") ? (S(), a("div", th, [l(lp, { message: N(e) }, null, 8, ["message"])])) : i("", !0)
+			]), o("div", nh, [e.kind === "poll" ? i("", !0) : (S(), r(j(z), {
 				key: 0,
 				label: j(v)("edit"),
 				icon: j(ye),
@@ -9669,7 +9699,7 @@ var df = { class: "w-full" }, ff = {
 				"label",
 				"icon",
 				"onClick"
-			])) : i("", !0)])]), d.value === e.id && f.value === "reschedule" ? (S(), a("div", ih, [o("div", ah, [te(o("input", {
+			])) : i("", !0)])]), d.value === e.id && f.value === "reschedule" ? (S(), a("div", rh, [o("div", ih, [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"
@@ -9681,7 +9711,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", oh, [l(j(z), {
+			}, null, 512), [[ee, h.value]])]), o("div", ah, [l(j(z), {
 				label: j(v)("save"),
 				size: "small",
 				disabled: !m.value || !b.value,
@@ -9695,8 +9725,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", sh, [
-				L(e) ? (S(), a("div", ch, [l(lp, { message: N(e) }, null, 8, ["message"]), o("div", lh, [l(j(z), {
+			}, null, 8, ["label"])])])) : d.value === e.id && f.value === "text" ? (S(), a("div", oh, [
+				L(e) ? (S(), a("div", sh, [l(lp, { message: N(e) }, null, 8, ["message"]), o("div", ch, [l(j(z), {
 					icon: j(fe),
 					"aria-label": j(v)("remove"),
 					text: "",
@@ -9710,8 +9740,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, uh), [[ee, g.value]]),
-				o("div", dh, [l(j(z), {
+				}, null, 8, lh), [[ee, g.value]]),
+				o("div", uh, [l(j(z), {
 					label: j(v)("cancel"),
 					size: "small",
 					text: "",
@@ -9735,7 +9765,7 @@ var df = { class: "w-full" }, ff = {
 			"close-label"
 		]));
 	}
-}), [["__scopeId", "data-v-0bb2dc95"]]), ph = { class: "chat-status-overlay" }, mh = { class: "chat-status-overlay__card" }, hh = /* @__PURE__ */ $(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-0bb2dc95"]]), fh = { class: "chat-status-overlay" }, ph = { class: "chat-status-overlay__card" }, mh = /* @__PURE__ */ $(/* @__PURE__ */ u({
 	__name: "ChatStatusOverlay",
 	props: {
 		visible: { type: Boolean },
@@ -9768,9 +9798,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", ph, [o("div", mh, [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", fh, [o("div", ph, [E(e.$slots, `${r.value.slotName}-content`, {}, () => [o("span", null, k(r.value.message), 1)], !0)])])], !0) : i("", !0);
 	}
-}), [["__scopeId", "data-v-7749aec9"]]), gh = /* @__PURE__ */ u({
+}), [["__scopeId", "data-v-7749aec9"]]), hh = /* @__PURE__ */ u({
 	__name: "BccChat",
 	props: {
 		client: { default: null },
@@ -10001,7 +10031,7 @@ var df = { class: "w-full" }, ff = {
 				_: 1
 			})]) : i("", !0),
 			T.value ? (S(), a(e, { key: 1 }, [
-				l(fm, {
+				l(dm, {
 					target: "main",
 					class: g(["h-full", t.containerClass]),
 					"hide-group-actions": t.hideGroupActions,
@@ -10035,7 +10065,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(fm, {
+					default: I(() => [l(dm, {
 						target: "thread",
 						class: "min-h-0 flex-1",
 						"action-message-class": t.actionMessageClass,
@@ -10056,7 +10086,7 @@ var df = { class: "w-full" }, ff = {
 					"close-label",
 					"close-aria-label"
 				]),
-				l(fh, {
+				l(dh, {
 					open: j(R).showScheduledMessages.value,
 					loading: j(R).loadingScheduledMessages.value,
 					messages: j(R).scheduledMessages.value,
@@ -10071,7 +10101,7 @@ var df = { class: "w-full" }, ff = {
 					"messages",
 					"conversation-title"
 				]),
-				l(Um, {
+				l(Hm, {
 					open: !!j(R).infoMessage.value,
 					message: j(R).infoMessage.value,
 					receipts: j(R).infoMessageReceipts.value,
@@ -10086,7 +10116,7 @@ var df = { class: "w-full" }, ff = {
 					"error"
 				])
 			], 64)) : i("", !0),
-			l(hh, {
+			l(mh, {
 				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),
@@ -10126,6 +10156,6 @@ var df = { class: "w-full" }, ff = {
 	}
 });
 //#endregion
-export { gh as BccChat, gh as BccChatMessageList, Ol as LogSeverity, gu as chat, gu as default, cc as createChatClient };
+export { hh as BccChat, hh as BccChatMessageList, Ol as LogSeverity, gu as chat, gu as default, cc as createChatClient };
 
 //# sourceMappingURL=vue-bcc-chat-ui.js.map