@nethesis/chat-island 0.1.16 → 0.1.17

package/dist/index.js

@@ -565,14 +565,14 @@ var D = /* @__PURE__ */ y(((e) => {
 			e && this.write(e), this.write = function() {};
 		}
 	};
-})), M = D(), N = /* @__PURE__ */ x(O(), 1), P = /* @__PURE__ */ x(k(), 1), F = A(), ee = /* @__PURE__ */ x(j(), 1), te = class extends Error {
+})), M = D(), N = /* @__PURE__ */ x(O(), 1), P = /* @__PURE__ */ x(k(), 1), F = A(), ee = /* @__PURE__ */ x(j(), 1), I = class extends Error {
 	constructor(e) {
 		super(e), this.name = "TimeoutError";
 	}
 };
 //#endregion
 //#region node_modules/@xmpp/events/lib/delay.js
-function ne(e) {
+function te(e) {
 	let t, n = new Promise((n) => {
 		t = setTimeout(n, e);
 	});
@@ -580,32 +580,32 @@ function ne(e) {
 }
 //#endregion
 //#region node_modules/@xmpp/events/lib/timeout.js
-function re(e, t) {
-	let n = ne(t);
+function ne(e, t) {
+	let n = te(t);
 	function r() {
 		clearTimeout(n.timeout);
 	}
-	let i = new te();
+	let i = new I();
 	return Promise.race([e.finally(r), n.then(() => {
 		throw i;
 	})]);
 }
 //#endregion
 //#region node_modules/@xmpp/events/lib/onoff.js
-var ie = /* @__PURE__ */ new WeakMap();
-function I(e) {
-	let t = ie.get(e);
+var re = /* @__PURE__ */ new WeakMap();
+function ie(e) {
+	let t = re.get(e);
 	return t || (t = {
 		on: (e.addEventListener ?? e.addListener).bind(e),
 		off: (e.removeEventListener ?? e.removeListener).bind(e),
 		once: (e.once ?? ((t, n) => e.addEventListener(t, n, { once: !0 }))).bind(e)
-	}, ie.set(e, t)), t;
+	}, re.set(e, t)), t;
 }
 //#endregion
 //#region node_modules/@xmpp/events/lib/promise.js
 function L(e, t, n = "error", r) {
 	return new Promise((i, a) => {
-		let o, { off: s, once: c } = I(e), l = () => {
+		let o, { off: s, once: c } = ie(e), l = () => {
 			clearTimeout(o), s(t, d), s(n, u);
 		};
 		function u(e) {
@@ -615,7 +615,7 @@ function L(e, t, n = "error", r) {
 			i(e), l();
 		}
 		if (c(t, d), n && c(n, u), r) {
-			let e = new te();
+			let e = new I();
 			o = setTimeout(() => {
 				l(), a(e);
 			}, r);
@@ -654,11 +654,11 @@ function oe(e, t = null, n) {
 function se(e) {
 	return {
 		subscribe(t) {
-			let { on: n } = I(t);
+			let { on: n } = ie(t);
 			for (let [t, r] of Object.entries(e)) n(t, r);
 		},
 		unsubscribe(t) {
-			let { off: n } = I(t);
+			let { off: n } = ie(t);
 			for (let [t, r] of Object.entries(e)) n(t, r);
 		}
 	};
@@ -1345,7 +1345,7 @@ var qe = class {
 		let n = new ae();
 		this.handlers.set(e.attrs.id, n);
 		try {
-			await this.entity.send(e), await re(n.promise, t);
+			await this.entity.send(e), await ne(n.promise, t);
 		} catch (t) {
 			throw this.handlers.delete(e.attrs.id), t;
 		}
@@ -2322,7 +2322,8 @@ var hn = "chat.internal", W = {
 	ping: "urn:xmpp:ping",
 	reactions: "urn:xmpp:reactions:0",
 	reply: "urn:xmpp:reply:0",
-	fallback: "urn:xmpp:fallback:0"
+	fallback: "urn:xmpp:fallback:0",
+	markers: "urn:xmpp:chat-markers:0"
 }, gn = 3e4, _n = class {
 	xmpp;
 	me;
@@ -2331,6 +2332,7 @@ var hn = "chat.internal", W = {
 	uploadService;
 	mamQueries = /* @__PURE__ */ new Map();
 	mamReactions = /* @__PURE__ */ new Map();
+	mamMarkers = /* @__PURE__ */ new Map();
 	stopped = !1;
 	attempt = 0;
 	retryTimer;
@@ -2461,7 +2463,7 @@ var hn = "chat.internal", W = {
 			room: e,
 			nick: this.cfg.username,
 			reply: r
-		}) : (s.push(R("active", { xmlns: W.chatstates })), await this.xmpp.send(R("message", {
+		}) : (s.push(R("active", { xmlns: W.chatstates }), R("markable", { xmlns: W.markers })), await this.xmpp.send(R("message", {
 			to: `${e}@${this.domain}`,
 			type: "chat",
 			id: i
@@ -2477,6 +2479,16 @@ var hn = "chat.internal", W = {
 			reply: r
 		});
 	}
+	async marker(e, t, n) {
+		await this.xmpp.send(R("message", {
+			to: `${e}@${this.domain}`,
+			type: "chat",
+			id: crypto.randomUUID()
+		}, R(t, {
+			xmlns: W.markers,
+			id: n
+		}), R("store", { xmlns: W.hints })));
+	}
 	async react(e, t, n) {
 		let r = this.isGroup(e), i = R("reactions", {
 			xmlns: W.reactions,
@@ -2519,7 +2531,7 @@ var hn = "chat.internal", W = {
 	}
 	async mam(e, t, n) {
 		let r = crypto.randomUUID();
-		this.mamQueries.set(r, []), this.mamReactions.set(r, []);
+		this.mamQueries.set(r, []), this.mamReactions.set(r, []), this.mamMarkers.set(r, []);
 		let i = R("set", { xmlns: W.rsm }, R("max", {}, String(n)), R("before", {}, t ?? "")), a = [R("field", {
 			var: "FORM_TYPE",
 			type: "hidden"
@@ -2528,7 +2540,7 @@ var hn = "chat.internal", W = {
 		let o = R("x", {
 			xmlns: W.data,
 			type: "submit"
-		}, ...a), s, c, l;
+		}, ...a), s, c, l, u;
 		try {
 			s = await this.xmpp.iqCaller.request(R("iq", {
 				type: "set",
@@ -2538,14 +2550,15 @@ var hn = "chat.internal", W = {
 				queryid: r
 			}, o, i)), 3e4);
 		} finally {
-			c = this.mamQueries.get(r) ?? [], l = this.mamReactions.get(r) ?? [], this.mamQueries.delete(r), this.mamReactions.delete(r);
+			c = this.mamQueries.get(r) ?? [], l = this.mamReactions.get(r) ?? [], u = this.mamMarkers.get(r) ?? [], this.mamQueries.delete(r), this.mamReactions.delete(r), this.mamMarkers.delete(r);
 		}
-		let u = s.getChild("fin", W.mam), d = u?.getChild("set", W.rsm)?.getChildText("first") ?? void 0;
+		let d = s.getChild("fin", W.mam), f = d?.getChild("set", W.rsm)?.getChildText("first") ?? void 0;
 		return {
 			messages: c,
 			reactions: l,
-			complete: u?.attrs.complete === "true",
-			first: d
+			markers: u,
+			complete: d?.attrs.complete === "true",
+			first: f
 		};
 	}
 	async createGroup(e, t, n) {
@@ -2732,10 +2745,12 @@ var hn = "chat.internal", W = {
 			if (!t) return;
 			let e = n.getChild("forwarded", W.forward)?.getChild("message"), r = this.mamQueries.get(n.attrs.queryid);
 			if (e && r) {
-				let t = this.reactionOf(e);
-				t && this.mamReactions.get(n.attrs.queryid)?.push(t);
-				let i = t ? void 0 : this.toMessage(e, n.attrs.id, bn(n.getChild("forwarded", W.forward)));
-				i && r.push(i);
+				let t = bn(n.getChild("forwarded", W.forward)), i = this.markerOf(e, t);
+				i && this.mamMarkers.get(n.attrs.queryid)?.push(i);
+				let a = i ? void 0 : this.reactionOf(e);
+				a && this.mamReactions.get(n.attrs.queryid)?.push(a);
+				let o = a || i ? void 0 : this.toMessage(e, n.attrs.id, bn(n.getChild("forwarded", W.forward)));
+				o && r.push(o);
 			}
 			return;
 		}
@@ -2761,19 +2776,37 @@ var hn = "chat.internal", W = {
 		this.deliver(e);
 	}
 	deliver(e) {
-		let t = this.reactionOf(e);
+		let t = this.markerOf(e, bn(e));
 		if (t) {
-			this.h.reaction(t);
+			this.h.marker(t);
 			return;
 		}
-		let n = this.toMessage(e, e.getChild("stanza-id", W.sid)?.attrs.id, bn(e));
+		let n = this.reactionOf(e);
 		if (n) {
-			this.h.message(n);
+			this.h.reaction(n);
+			return;
+		}
+		let r = this.toMessage(e, e.getChild("stanza-id", W.sid)?.attrs.id, bn(e));
+		if (r) {
+			this.h.message(r);
 			return;
 		}
 		if (e.attrs.type !== "chat") return;
-		let r = G(e.attrs.from), i = r === this.me ? G(e.attrs.to) : r, a = e.getChildByAttr("xmlns", W.chatstates);
-		!e.getChild("body") && a && this.h.typing(K(i), a.name === "composing");
+		let i = G(e.attrs.from), a = i === this.me ? G(e.attrs.to) : i, o = e.getChildByAttr("xmlns", W.chatstates);
+		!e.getChild("body") && o && this.h.typing(K(a), o.name === "composing");
+	}
+	markerOf(e, t) {
+		if (e.attrs.type !== "chat") return;
+		let n = e.getChild("received", W.markers) ?? e.getChild("displayed", W.markers);
+		if (!n?.attrs.id) return;
+		let r = G(e.attrs.from), i = r === this.me || !e.attrs.from, a = K(i ? G(e.attrs.to) : r);
+		return a ? {
+			peer: a,
+			kind: n.name,
+			id: n.attrs.id,
+			ts: t,
+			mine: i
+		} : void 0;
 	}
 	reactionOf(e) {
 		let t = e.getChild("event", W.pubsubEvent), n = e, r;
@@ -3088,6 +3121,33 @@ var An = (e) => {
 			}
 		} };
 	}),
+	applyMarkers: (t) => e((e) => {
+		if (!t.length) return {};
+		let n = { ...e.conversations };
+		for (let e of t) {
+			let t = n[e.peer];
+			if (!t || t.kind !== "chat") continue;
+			let r = t.messages.find((t) => t.mine !== e.mine && (t.oid === e.id || t.id === e.id))?.ts ?? e.ts;
+			if (e.mine) {
+				e.kind === "displayed" && (n[e.peer] = {
+					...t,
+					myRead: Math.max(t.myRead ?? 0, r),
+					unread: 0
+				});
+				continue;
+			}
+			let i = Math.max(t.delivered ?? 0, r);
+			n[e.peer] = e.kind === "displayed" ? {
+				...t,
+				delivered: i,
+				read: Math.max(t.read ?? 0, r)
+			} : {
+				...t,
+				delivered: i
+			};
+		}
+		return { conversations: n };
+	}),
 	applyReactions: (t) => e((e) => {
 		if (!t.length) return {};
 		let n = { ...e.conversations };
@@ -4136,33 +4196,33 @@ function xr({ reply: e, messages: t, mine: n, name: r }) {
 		})]
 	});
 }
-function Sr({ messages: e, typing: t, onLoadOlder: n, hasOlder: r, group: a, reactions: o, me: l = "", onReact: u, onReply: p }) {
-	let m = Y((e) => e.contacts), h = s(null), g = s(!0), [_, v] = c(null), [y, b] = c(null), x = (e) => m[e]?.name ?? e;
+function Sr({ messages: e, typing: t, onLoadOlder: n, hasOlder: r, group: a, reactions: o, delivered: l = 0, read: u = 0, me: p = "", onReact: m, onReply: h }) {
+	let g = Y((e) => e.contacts), _ = s(null), v = s(!0), [y, b] = c(null), [x, S] = c(null), C = (e) => g[e]?.name ?? e;
 	i(() => {
-		let e = h.current;
-		e && g.current && (e.scrollTop = e.scrollHeight);
+		let e = _.current;
+		e && v.current && (e.scrollTop = e.scrollHeight);
 	}, [
 		e.length,
 		t,
 		o
 	]), i(() => {
-		if (!_) return;
-		let e = () => v(null), t = window.setTimeout(() => document.addEventListener("click", e, { once: !0 }), 0);
+		if (!y) return;
+		let e = () => b(null), t = window.setTimeout(() => document.addEventListener("click", e, { once: !0 }), 0);
 		return () => {
 			window.clearTimeout(t), document.removeEventListener("click", e);
 		};
-	}, [_]);
-	let S = () => {
-		let e = h.current;
-		e && (g.current = e.scrollHeight - e.scrollTop - e.clientHeight < 40, e.scrollTop < 30 && r && n());
-	}, C = (e, t) => {
-		v(null), b(null), u?.(e, t);
+	}, [y]);
+	let w = () => {
+		let e = _.current;
+		e && (v.current = e.scrollHeight - e.scrollTop - e.clientHeight < 40, e.scrollTop < 30 && r && n());
+	}, T = (e, t) => {
+		b(null), S(null), m?.(e, t);
 	};
 	return /* @__PURE__ */ f("div", {
 		className: "ci-relative ci-flex-1 ci-min-h-0 ci-flex ci-flex-col",
 		children: [/* @__PURE__ */ f("div", {
-			ref: h,
-			onScroll: S,
+			ref: _,
+			onScroll: w,
 			className: "ci-flex-1 ci-overflow-y-auto ci-px-4 ci-py-2 ci-space-y-1",
 			children: [
 				r && /* @__PURE__ */ d("div", {
@@ -4170,21 +4230,21 @@ function Sr({ messages: e, typing: t, onLoadOlder: n, hasOlder: r, group: a, rea
 					children: "Scroll up for older messages"
 				}),
 				e.map((t, n) => {
-					let r = e[n - 1], i = !r || !pr(r.ts, t.ts), s = r && !i && r.mine === t.mine && r.nick === t.nick && t.ts - r.ts < 12e4, c = a && !t.mine && t.nick ? x(t.nick) : null, h = t.oid, g = !!u && !!h && !t.pending, y = g && /* @__PURE__ */ d("button", {
+					let r = e[n - 1], i = !r || !pr(r.ts, t.ts), s = r && !i && r.mine === t.mine && r.nick === t.nick && t.ts - r.ts < 12e4, c = a && !t.mine && t.nick ? C(t.nick) : null, _ = t.oid, v = !!m && !!_ && !t.pending, x = v && /* @__PURE__ */ d("button", {
 						type: "button",
 						title: "React",
 						"aria-label": "React to this message",
 						onClick: (e) => {
-							e.stopPropagation(), v(_ === h ? null : h);
+							e.stopPropagation(), b(y === _ ? null : _);
 						},
-						className: `ci-self-center ci-h-7 ci-w-7 ci-shrink-0 ci-flex ci-items-center ci-justify-center ci-rounded-full ci-border-0 ci-bg-transparent ci-text-gray-500 dark:ci-text-gray-400 hover:ci-bg-gray-200 dark:hover:ci-bg-gray-800 focus:ci-opacity-100 ${_ === h ? "ci-opacity-100" : "ci-opacity-0 group-hover:ci-opacity-100"}`,
+						className: `ci-self-center ci-h-7 ci-w-7 ci-shrink-0 ci-flex ci-items-center ci-justify-center ci-rounded-full ci-border-0 ci-bg-transparent ci-text-gray-500 dark:ci-text-gray-400 hover:ci-bg-gray-200 dark:hover:ci-bg-gray-800 focus:ci-opacity-100 ${y === _ ? "ci-opacity-100" : "ci-opacity-0 group-hover:ci-opacity-100"}`,
 						children: $.react
-					}), S = !!p && !!h && !t.pending && /* @__PURE__ */ d("button", {
+					}), w = !!h && !!_ && !t.pending && /* @__PURE__ */ d("button", {
 						type: "button",
 						title: "Reply",
 						"aria-label": "Reply to this message",
 						onClick: (e) => {
-							e.stopPropagation(), p(t);
+							e.stopPropagation(), h(t);
 						},
 						className: "ci-self-center ci-h-7 ci-w-7 ci-shrink-0 ci-flex ci-items-center ci-justify-center ci-rounded-full ci-border-0 ci-bg-transparent ci-text-gray-500 dark:ci-text-gray-400 hover:ci-bg-gray-200 dark:hover:ci-bg-gray-800 focus:ci-opacity-100 ci-opacity-0 group-hover:ci-opacity-100",
 						children: $.reply
@@ -4201,17 +4261,17 @@ function Sr({ messages: e, typing: t, onLoadOlder: n, hasOlder: r, group: a, rea
 									className: "ci-w-7 ci-shrink-0",
 									title: c,
 									children: !s && /* @__PURE__ */ d(Kn, {
-										contact: m[t.nick],
+										contact: g[t.nick],
 										username: t.nick,
 										size: 28
 									})
 								}),
-								t.mine && S,
-								t.mine && y,
+								t.mine && w,
+								t.mine && x,
 								/* @__PURE__ */ f("div", {
 									className: `ci-relative ci-flex ci-flex-col ci-max-w-[80%] ${t.mine ? "ci-items-end" : "ci-items-start"}`,
 									children: [
-										_ === h && h && /* @__PURE__ */ f("div", {
+										y === _ && _ && /* @__PURE__ */ f("div", {
 											role: "menu",
 											onClick: (e) => e.stopPropagation(),
 											className: `ci-absolute ci-bottom-full ci-mb-1 ci-z-20 ci-flex ci-items-center ci-gap-0.5 ci-p-1 ci-rounded-full ci-bg-gray-50 dark:ci-bg-gray-950 ci-shadow-xl ci-border ci-border-solid ci-border-gray-300 dark:ci-border-gray-600 ${t.mine ? "ci-right-0" : "ci-left-0"}`,
@@ -4219,12 +4279,12 @@ function Sr({ messages: e, typing: t, onLoadOlder: n, hasOlder: r, group: a, rea
 												type: "button",
 												role: "menuitem",
 												"aria-label": e,
-												onClick: () => C(h, e),
+												onClick: () => T(_, e),
 												style: {
 													fontSize: 22,
 													lineHeight: "32px"
 												},
-												className: `ci-h-9 ci-w-9 ci-flex ci-items-center ci-justify-center ci-rounded-full ci-border-0 hover:ci-scale-125 ci-transition-transform ${o?.[h]?.[l]?.includes(e) ? "ci-bg-gray-200 dark:ci-bg-gray-800" : "ci-bg-transparent"}`,
+												className: `ci-h-9 ci-w-9 ci-flex ci-items-center ci-justify-center ci-rounded-full ci-border-0 hover:ci-scale-125 ci-transition-transform ${o?.[_]?.[p]?.includes(e) ? "ci-bg-gray-200 dark:ci-bg-gray-800" : "ci-bg-transparent"}`,
 												children: e
 											}, e)), /* @__PURE__ */ d("button", {
 												type: "button",
@@ -4232,7 +4292,7 @@ function Sr({ messages: e, typing: t, onLoadOlder: n, hasOlder: r, group: a, rea
 												title: "More emojis",
 												"aria-label": "More emojis",
 												onClick: () => {
-													v(null), b(h);
+													b(null), S(_);
 												},
 												className: "ci-h-8 ci-w-8 ci-flex ci-items-center ci-justify-center ci-rounded-full ci-border-0 ci-bg-gray-200 dark:ci-bg-gray-800 ci-text-gray-700 dark:ci-text-gray-200 ci-text-lg",
 												children: "+"
@@ -4240,37 +4300,40 @@ function Sr({ messages: e, typing: t, onLoadOlder: n, hasOlder: r, group: a, rea
 										}),
 										/* @__PURE__ */ f("div", {
 											title: dr(t.ts),
-											onDoubleClick: () => g && C(h, ar[0]),
+											onDoubleClick: () => v && T(_, ar[0]),
 											className: `ci-px-3.5 ci-py-2 ci-rounded-3xl ci-text-sm ci-select-text ci-cursor-text ${t.mine ? "ci-bg-gray-700 ci-text-gray-50 dark:ci-bg-gray-300 dark:ci-text-gray-900 ci-rounded-br-lg" : "ci-bg-elevationL2 ci-text-gray-900 dark:ci-bg-elevationL2Dark dark:ci-text-white ci-rounded-bl-lg"} ${t.pending ? "ci-opacity-60" : ""}`,
 											children: [
 												t.reply && /* @__PURE__ */ d(xr, {
 													reply: t.reply,
 													messages: e,
 													mine: t.mine,
-													name: (e) => e === l ? "You" : x(e)
+													name: (e) => e === p ? "You" : C(e)
 												}),
 												t.oob ? /* @__PURE__ */ d(hr, { url: t.oob }) : mr(t.body) ? /* @__PURE__ */ d(yr, { ...mr(t.body) }) : /* @__PURE__ */ d(vr, { text: t.body }),
 												t.oob && t.body && t.body !== t.oob && t.body !== lr(t.oob) && /* @__PURE__ */ d("div", {
 													className: "ci-text-xs ci-opacity-80 ci-mt-1",
 													children: t.body
 												}),
-												/* @__PURE__ */ d("span", {
-													className: "ci-block ci-text-right ci-text-[10px] ci-leading-none ci-opacity-60 ci-mt-1",
-													children: dr(t.ts)
+												/* @__PURE__ */ f("span", {
+													className: "ci-flex ci-items-center ci-justify-end ci-gap-1 ci-text-[10px] ci-leading-none ci-mt-1",
+													children: [/* @__PURE__ */ d("span", {
+														className: "ci-opacity-60",
+														children: dr(t.ts)
+													}), t.mine && !a && /* @__PURE__ */ d(wr, { state: t.pending ? "pending" : t.ts <= u ? "read" : t.ts <= l ? "delivered" : "sent" })]
 												})
 											]
 										}),
-										h && /* @__PURE__ */ d(br, {
-											forMsg: o?.[h],
-											me: l,
+										_ && /* @__PURE__ */ d(br, {
+											forMsg: o?.[_],
+											me: p,
 											mine: t.mine,
-											nameOf: x,
-											onReact: (e) => g && C(h, e)
+											nameOf: C,
+											onReact: (e) => v && T(_, e)
 										})
 									]
 								}),
-								!t.mine && y,
-								!t.mine && S
+								!t.mine && x,
+								!t.mine && w
 							]
 						})]
 					}, t.id);
@@ -4283,16 +4346,53 @@ function Sr({ messages: e, typing: t, onLoadOlder: n, hasOlder: r, group: a, rea
 					})
 				})
 			]
-		}), y && /* @__PURE__ */ d(or, {
+		}), x && /* @__PURE__ */ d(or, {
 			className: "ci-absolute ci-bottom-2 ci-left-1/2 ci--translate-x-1/2",
-			onPick: (e) => C(y, e),
-			onClose: () => b(null)
+			onPick: (e) => T(x, e),
+			onClose: () => S(null)
 		})]
 	});
 }
+var Cr = {
+	pending: "Sending",
+	sent: "Sent",
+	delivered: "Delivered",
+	read: "Read"
+};
+function wr({ state: e }) {
+	return /* @__PURE__ */ d("span", {
+		title: Cr[e],
+		"aria-label": Cr[e],
+		className: e === "read" ? "ci-text-phoneIslandCallDark dark:ci-text-phoneIslandCall" : "ci-opacity-60",
+		children: e === "pending" ? /* @__PURE__ */ f("svg", {
+			width: "12",
+			height: "12",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			children: [/* @__PURE__ */ d("circle", {
+				cx: "12",
+				cy: "12",
+				r: "9"
+			}), /* @__PURE__ */ d("path", { d: "M12 7v5l3 2" })]
+		}) : /* @__PURE__ */ f("svg", {
+			width: "16",
+			height: "12",
+			viewBox: "0 0 28 16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: [/* @__PURE__ */ d("path", { d: "M2 9l4 4 9-10" }), e !== "sent" && /* @__PURE__ */ d("path", { d: "M12 12l1 1 9-10" })]
+		})
+	});
+}
 //#endregion
 //#region src/ogg.ts
-function Cr(e, t, n) {
+function Tr(e, t, n) {
 	let r = e[t];
 	if (r === void 0) return null;
 	let i = 1;
@@ -4306,7 +4406,7 @@ function Cr(e, t, n) {
 		unknown: !n && o
 	};
 }
-var wr = /* @__PURE__ */ new Set([
+var Er = /* @__PURE__ */ new Set([
 	408125543,
 	524531317,
 	374648427,
@@ -4314,18 +4414,18 @@ var wr = /* @__PURE__ */ new Set([
 	225,
 	160
 ]);
-function Tr(e) {
+function Dr(e) {
 	let t = {
 		channels: 1,
 		packets: []
 	}, n = 0;
 	for (; n < e.length;) {
-		let r = Cr(e, n, !0);
+		let r = Tr(e, n, !0);
 		if (!r) break;
-		let i = Cr(e, n + r.len, !1);
+		let i = Tr(e, n + r.len, !1);
 		if (!i) break;
 		let a = n + r.len + i.len;
-		if (wr.has(r.value)) {
+		if (Er.has(r.value)) {
 			n = a;
 			continue;
 		}
@@ -4334,14 +4434,14 @@ function Tr(e) {
 		if (r.value === 25506) t.head = e.slice(a, o);
 		else if (r.value === 159) t.channels = e[a] || 1;
 		else if (r.value === 163 || r.value === 161) {
-			let n = Cr(e, a, !1);
+			let n = Tr(e, a, !1);
 			n && (e[a + n.len + 2] >> 1 & 3 || t.packets.push(e.slice(a + n.len + 3, o)));
 		}
 		n = o;
 	}
 	return t;
 }
-function Er(e) {
+function Or(e) {
 	if (!e.length) return 0;
 	let t = e[0], n = t >> 3, r;
 	r = n < 12 ? [
@@ -4358,7 +4458,7 @@ function Er(e) {
 	let i = t & 3, a = i === 0 ? 1 : i === 3 ? (e[1] ?? 0) & 63 : 2;
 	return Math.round(a * r * 48);
 }
-var Dr = (() => {
+var kr = (() => {
 	let e = /* @__PURE__ */ new Uint32Array(256);
 	for (let t = 0; t < 256; t++) {
 		let n = t << 24;
@@ -4367,12 +4467,12 @@ var Dr = (() => {
 	}
 	return e;
 })();
-function Or(e) {
+function Ar(e) {
 	let t = 0;
-	for (let n = 0; n < e.length; n++) t = (t << 8 ^ Dr[(t >>> 24 ^ e[n]) & 255]) >>> 0;
+	for (let n = 0; n < e.length; n++) t = (t << 8 ^ kr[(t >>> 24 ^ e[n]) & 255]) >>> 0;
 	return t;
 }
-function kr(e, t, n, r, i) {
+function jr(e, t, n, r, i) {
 	let a = [];
 	for (let t of e) {
 		let e = t.length;
@@ -4388,29 +4488,29 @@ function kr(e, t, n, r, i) {
 	], 0), s[5] = i, c.setUint32(6, t % 4294967296, !0), c.setUint32(10, Math.floor(t / 4294967296), !0), c.setUint32(14, n, !0), c.setUint32(18, r, !0), s[26] = a.length, s.set(a, 27);
 	let l = 27 + a.length;
 	for (let t of e) s.set(t, l), l += t.length;
-	return c.setUint32(22, Or(s), !0), s;
+	return c.setUint32(22, Ar(s), !0), s;
 }
-function Ar(e) {
+function Mr(e) {
 	let t = /* @__PURE__ */ new Uint8Array(19), n = new DataView(t.buffer);
 	return t.set(new TextEncoder().encode("OpusHead"), 0), t[8] = 1, t[9] = e, n.setUint16(10, 312, !0), n.setUint32(12, 48e3, !0), t;
 }
-function jr() {
+function Nr() {
 	let e = new TextEncoder().encode("chat-island"), t = new Uint8Array(12 + e.length + 4);
 	return t.set(new TextEncoder().encode("OpusTags"), 0), new DataView(t.buffer).setUint32(8, e.length, !0), t.set(e, 12), t;
 }
-function Mr(e) {
-	let { head: t, channels: n, packets: r } = Tr(e);
+function Pr(e) {
+	let { head: t, channels: n, packets: r } = Dr(e);
 	if (!r.length) return null;
-	let i = t && t.length >= 19 && new TextDecoder().decode(t.slice(0, 8)) === "OpusHead", a = Math.random() * 4294967295 >>> 0, o = [kr([i ? t : Ar(n)], 0, a, 0, 2), kr([jr()], 0, a, 1, 0)], s = 0, c = 2;
+	let i = t && t.length >= 19 && new TextDecoder().decode(t.slice(0, 8)) === "OpusHead", a = Math.random() * 4294967295 >>> 0, o = [jr([i ? t : Mr(n)], 0, a, 0, 2), jr([Nr()], 0, a, 1, 0)], s = 0, c = 2;
 	for (let e = 0; e < r.length;) {
 		let t = [], n = 0;
 		for (; e < r.length && t.length < 50;) {
 			let i = Math.floor(r[e].length / 255) + 1;
 			if (n + i > 255) break;
-			t.push(r[e]), n += i, s += Er(r[e]), e++;
+			t.push(r[e]), n += i, s += Or(r[e]), e++;
 		}
 		if (!t.length) return null;
-		o.push(kr(t, s, a, c++, e >= r.length ? 4 : 0));
+		o.push(jr(t, s, a, c++, e >= r.length ? 4 : 0));
 	}
 	let l = o.reduce((e, t) => e + t.length, 0), u = new Uint8Array(l), d = 0;
 	for (let e of o) u.set(e, d), d += e.length;
@@ -4418,22 +4518,22 @@ function Mr(e) {
 }
 //#endregion
 //#region src/components/Composer.tsx
-var Nr = [
+var Fr = [
 	"audio/ogg;codecs=opus",
 	"audio/webm;codecs=opus",
 	"audio/mp4",
 	"audio/webm"
 ];
-async function Pr(e, t) {
+async function Ir(e, t) {
 	let n = Date.now();
 	if (/webm/.test(t) && /opus/.test(t)) try {
-		let t = Mr(new Uint8Array(await new Blob(e).arrayBuffer()));
+		let t = Pr(new Uint8Array(await new Blob(e).arrayBuffer()));
 		if (t) return new File([t], `voice-${n}.ogg`, { type: "audio/ogg" });
 	} catch {}
-	return new File(e, `voice-${n}.${Fr(t)}`, { type: t.split(";")[0] });
+	return new File(e, `voice-${n}.${Lr(t)}`, { type: t.split(";")[0] });
 }
-var Fr = (e) => /mp4/.test(e) ? "m4a" : /ogg/.test(e) ? "ogg" : "webm", Ir = (e) => `${Math.floor(e / 6e4)}:${String(Math.floor(e % 6e4 / 1e3)).padStart(2, "0")}`;
-function Lr({ onSend: e, onTyping: t, onFile: n, disabled: r, disabledText: o, focusKey: l }) {
+var Lr = (e) => /mp4/.test(e) ? "m4a" : /ogg/.test(e) ? "ogg" : "webm", Rr = (e) => `${Math.floor(e / 6e4)}:${String(Math.floor(e % 6e4 / 1e3)).padStart(2, "0")}`;
+function zr({ onSend: e, onTyping: t, onFile: n, disabled: r, disabledText: o, focusKey: l }) {
 	let [u, p] = c(""), [m, h] = c(!1), g = s(null), _ = s(null), v = s(null), y = s(), b = s(!1), [x, S] = c(null), [C, w] = c(0), T = s(!1), E = s(!1), D = s(!1), O = s({});
 	i(() => v.current?.focus(), []), i(() => () => {
 		D.current = !0, T.current = !0, window.clearTimeout(y.current);
@@ -4474,9 +4574,9 @@ function Lr({ onSend: e, onTyping: t, onFile: n, disabled: r, disabledText: o, f
 				t.getTracks().forEach((e) => e.stop());
 				return;
 			}
-			let r = Nr.find((e) => MediaRecorder.isTypeSupported(e)), i = new MediaRecorder(e, r ? { mimeType: r } : void 0), a = [];
+			let r = Fr.find((e) => MediaRecorder.isTypeSupported(e)), i = new MediaRecorder(e, r ? { mimeType: r } : void 0), a = [];
 			i.ondataavailable = (e) => e.data.size && a.push(e.data), i.onstop = () => {
-				t.getTracks().forEach((e) => e.stop()), O.current = {}, S(null), !T.current && a.length && Pr(a, i.mimeType || r || "").then(n);
+				t.getTracks().forEach((e) => e.stop()), O.current = {}, S(null), !T.current && a.length && Ir(a, i.mimeType || r || "").then(n);
 			}, T.current = !1, i.start(), O.current = {
 				r: i,
 				stream: t
@@ -4505,7 +4605,7 @@ function Lr({ onSend: e, onTyping: t, onFile: n, disabled: r, disabledText: o, f
 			}),
 			/* @__PURE__ */ f("div", {
 				className: "ci-flex-1 ci-flex ci-items-center ci-gap-2 ci-px-4 ci-py-2.5 ci-rounded-3xl ci-bg-elevationL2 dark:ci-bg-elevationL2Dark ci-text-sm",
-				children: [/* @__PURE__ */ d("span", { className: "ci-w-2.5 ci-h-2.5 ci-rounded-full ci-bg-phoneIslandClose dark:ci-bg-phoneIslandCloseDark ci-animate-pulse" }), /* @__PURE__ */ f("span", { children: ["Recording ", Ir(C)] })]
+				children: [/* @__PURE__ */ d("span", { className: "ci-w-2.5 ci-h-2.5 ci-rounded-full ci-bg-phoneIslandClose dark:ci-bg-phoneIslandCloseDark ci-animate-pulse" }), /* @__PURE__ */ f("span", { children: ["Recording ", Rr(C)] })]
 			}),
 			/* @__PURE__ */ d(Q, {
 				variant: "green",
@@ -4585,14 +4685,14 @@ function Lr({ onSend: e, onTyping: t, onFile: n, disabled: r, disabledText: o, f
 }
 //#endregion
 //#region src/components/ChatWindow.tsx
-var Rr = (e) => !!e && ![
+var Br = (e) => !!e && ![
 	"offline",
 	"dnd",
 	"busy",
 	"ringing",
 	"onhold"
 ].includes(e);
-function zr({ peer: e, actions: t, theme: n, onDragStart: r }) {
+function Vr({ peer: e, actions: t, theme: n, onDragStart: r }) {
 	let { c: a, contacts: o, online: s, mobile: l, inactive: p, status: m, closeChat: h, openChat: g, markRead: _, order: v, me: y } = Y(w((t) => ({
 		c: t.conversations[e],
 		contacts: t.contacts,
@@ -4609,7 +4709,7 @@ function zr({ peer: e, actions: t, theme: n, onDragStart: r }) {
 	i(() => {
 		a && !a.loaded && t.loadOlder(e);
 	}, [e, a?.loaded]), i(() => {
-		_(e);
+		_(e), t.seen(e);
 	}, [e, a?.messages.length]), i(() => {
 		C(!1), E(!1), O(null);
 	}, [e]);
@@ -4674,7 +4774,7 @@ function zr({ peer: e, actions: t, theme: n, onDragStart: r }) {
 							children: F ? "No longer active" : m === "online" ? a.kind === "group" ? M.map(j).join(", ") : a.typing ? "typing…" : s[e] ? "online" : l[e] ? "Mobile" : "offline" : m
 						})]
 					}),
-					!F && a.kind !== "group" && x?.number && Rr(x.presence) && /* @__PURE__ */ d(Q, {
+					!F && a.kind !== "group" && x?.number && Br(x.presence) && /* @__PURE__ */ d(Q, {
 						variant: "call",
 						title: `Call ${x.number}`,
 						"aria-label": "Call",
@@ -4702,7 +4802,7 @@ function zr({ peer: e, actions: t, theme: n, onDragStart: r }) {
 				]
 			}),
 			/* @__PURE__ */ d("div", { className: "ci-border-t ci-border-gray-300 dark:ci-border-gray-700" }),
-			T && /* @__PURE__ */ d(Vr, {
+			T && /* @__PURE__ */ d(Ur, {
 				theme: n,
 				onClose: () => E(!1)
 			}),
@@ -4733,7 +4833,7 @@ function zr({ peer: e, actions: t, theme: n, onDragStart: r }) {
 							"aria-label": "Chat",
 							onClick: () => g(e),
 							children: $.chat
-						}), o[e]?.number && Rr(o[e]?.presence) && /* @__PURE__ */ d(Q, {
+						}), o[e]?.number && Br(o[e]?.presence) && /* @__PURE__ */ d(Q, {
 							variant: "call",
 							title: `Call ${o[e]?.number}`,
 							"aria-label": "Call",
@@ -4756,6 +4856,8 @@ function zr({ peer: e, actions: t, theme: n, onDragStart: r }) {
 						hasOlder: a.loaded && !a.complete,
 						onLoadOlder: () => t.loadOlder(e),
 						reactions: a.reactions,
+						delivered: a.delivered,
+						read: a.read,
 						me: y,
 						onReact: (n, r) => t.react(e, n, r),
 						onReply: N
@@ -4779,7 +4881,7 @@ function zr({ peer: e, actions: t, theme: n, onDragStart: r }) {
 							children: $.close
 						})]
 					}),
-					/* @__PURE__ */ d(Lr, {
+					/* @__PURE__ */ d(zr, {
 						focusKey: k,
 						disabled: m !== "online" || F,
 						disabledText: F ? "No longer active" : void 0,
@@ -4792,7 +4894,7 @@ function zr({ peer: e, actions: t, theme: n, onDragStart: r }) {
 		]
 	});
 }
-var Br = [
+var Hr = [
 	{
 		value: "light",
 		label: "Light",
@@ -4809,7 +4911,7 @@ var Br = [
 		icon: $.monitor
 	}
 ];
-function Vr({ theme: e, onClose: t }) {
+function Ur({ theme: e, onClose: t }) {
 	let n = s(null);
 	return i(() => {
 		let e = (e) => n.current && !n.current.contains(e.target) && !e.target.closest("[aria-label=\"Menu\"]") && t();
@@ -4821,7 +4923,7 @@ function Vr({ theme: e, onClose: t }) {
 		children: [/* @__PURE__ */ d("div", {
 			className: "ci-px-4 ci-py-1 ci-font-semibold ci-text-gray-600 dark:ci-text-gray-50",
 			children: "Theme"
-		}), Br.map((n) => /* @__PURE__ */ f("button", {
+		}), Hr.map((n) => /* @__PURE__ */ f("button", {
 			type: "button",
 			role: "menuitemradio",
 			"aria-checked": e === n.value,
@@ -4845,11 +4947,11 @@ function Vr({ theme: e, onClose: t }) {
 }
 //#endregion
 //#region src/components/NewChat.tsx
-async function Hr(e) {
+async function Wr(e) {
 	let t = await createImageBitmap(e), n = Math.min(t.width, t.height), r = document.createElement("canvas");
 	return r.width = r.height = 128, r.getContext("2d")?.drawImage(t, (t.width - n) / 2, (t.height - n) / 2, n, n, 0, 0, 128, 128), r.toDataURL("image/jpeg", .8);
 }
-function Ur({ onOpen: e, onCreateGroup: t, onDragStart: n }) {
+function Gr({ onOpen: e, onCreateGroup: t, onDragStart: n }) {
 	let { contacts: r, online: i, mobile: a, setPicker: l } = Y(), [p, m] = c(""), [h, g] = c([]), [_, v] = c(""), [y, b] = c(!1), [x, S] = c(), C = s(null), w = o(() => {
 		let e = Object.values(r), t = p.trim().toLowerCase();
 		return t ? e.filter((e) => (e.name ?? "").toLowerCase().includes(t) || e.username.includes(t)) : e;
@@ -4958,7 +5060,7 @@ function Ur({ onOpen: e, onCreateGroup: t, onDragStart: n }) {
 						type: "file",
 						accept: "image/*",
 						hidden: !0,
-						onChange: (e) => e.target.files?.[0] && Hr(e.target.files[0]).then(S).catch(() => {})
+						onChange: (e) => e.target.files?.[0] && Wr(e.target.files[0]).then(S).catch(() => {})
 					}),
 					/* @__PURE__ */ d("button", {
 						type: "button",
@@ -4993,22 +5095,22 @@ function Ur({ onOpen: e, onCreateGroup: t, onDragStart: n }) {
 }
 //#endregion
 //#region src/theme.ts
-var Wr = "chat-island-theme", Gr = () => {
+var Kr = "chat-island-theme", qr = () => {
 	try {
-		let e = localStorage.getItem(Wr);
+		let e = localStorage.getItem(Kr);
 		return e === "light" || e === "dark" || e === "system" ? e : void 0;
 	} catch {
 		return;
 	}
 };
-function Kr(e) {
-	let [t, n] = c(() => e ?? Gr()), [r, a] = c(!1);
-	return i(() => n(e ?? Gr()), [e]), i(() => {
+function Jr(e) {
+	let [t, n] = c(() => e ?? qr()), [r, a] = c(!1);
+	return i(() => n(e ?? qr()), [e]), i(() => {
 		let e = (e) => {
 			let t = e.detail?.theme;
 			if (t === "light" || t === "dark" || t === "system") {
 				try {
-					localStorage.setItem(Wr, t);
+					localStorage.setItem(Kr, t);
 				} catch {}
 				n(t);
 			}
@@ -5034,7 +5136,7 @@ function Kr(e) {
 }
 //#endregion
 //#region src/ChatIsland.tsx
-function qr() {
+function Yr() {
 	let e = Y.getState();
 	return Object.values(e.conversations).map((t) => {
 		let n = t.messages[t.messages.length - 1], r = e.contacts[t.peer];
@@ -5050,7 +5152,7 @@ function qr() {
 			unread: t.unread,
 			members: t.members,
 			last: n ? {
-				body: Xr(n.body),
+				body: Qr(n.body),
 				ts: n.ts,
 				mine: n.mine,
 				oob: n.oob,
@@ -5059,7 +5161,7 @@ function qr() {
 		};
 	}).filter((e) => e.last || e.kind === "group").sort((e, t) => (t.last?.ts ?? 0) - (e.last?.ts ?? 0));
 }
-var Jr = class extends t {
+var Xr = class extends t {
 	state = { failed: !1 };
 	failures = [];
 	static getDerivedStateFromError() {
@@ -5077,7 +5179,7 @@ var Jr = class extends t {
 		return this.state.failed ? null : this.props.children;
 	}
 };
-function Yr(e) {
+function Zr(e) {
 	try {
 		let [t, n, r] = atob(e).split(":");
 		return t && n && r ? {
@@ -5089,8 +5191,8 @@ function Yr(e) {
 		return null;
 	}
 }
-var Xr = (e) => (mr(e) ? "Attachment" : rr(e)).replace(/```[^\n]*\n?/g, "").replace(/(\*\*|__|~~|`)/g, "").replace(/(^|\s)[*_](\S[^*_]*)[*_]/g, "$1$2").replace(/\s+/g, " ").trim();
-function Zr(e, t = !1) {
+var Qr = (e) => (mr(e) ? "Attachment" : rr(e)).replace(/```[^\n]*\n?/g, "").replace(/(\*\*|__|~~|`)/g, "").replace(/(^|\s)[*_](\S[^*_]*)[*_]/g, "$1$2").replace(/\s+/g, " ").trim();
+function $r(e, t = !1) {
 	let [n, r] = c(e);
 	return i(() => {
 		if (e || t) return r(e);
@@ -5102,30 +5204,42 @@ function Zr(e, t = !1) {
 		(t) => !e && t.target === t.currentTarget && r(e)
 	];
 }
-function Qr({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWorker: r, maxHeads: a = 5, newChatButton: l = !0, notifications: u = "click", sound: p = !0, drag: m = !0, onDragStart: h }) {
-	let g = o(() => Yr(e), [e]), [_, v] = Kr(n), y = s(g), b = s(p), x = s(u);
-	i(() => {
-		y.current = g, b.current = p, x.current = u;
+function ei({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWorker: r, maxHeads: a = 5, newChatButton: l = !0, notifications: u = "click", sound: p = !0, drag: m = !0, onDragStart: h, headless: g = !1 }) {
+	let _ = o(() => Zr(e), [e]), [v, y] = Jr(n), b = s(_), x = s(p), S = s(u), C = s(g);
+	C.current = g, i(() => {
+		b.current = _, x.current = p, S.current = u;
 	}, [
-		g,
+		_,
 		p,
 		u
 	]), i(() => Y.setState({
 		maxHeads: a,
 		newChatButton: l
 	}), [a, l]);
-	let [S, C] = c(0);
+	let [T, D] = c(0);
 	i(() => {
-		let e = (e) => e.persisted && C((e) => e + 1);
+		let e = (e) => e.persisted && D((e) => e + 1);
 		return window.addEventListener("pageshow", e), () => window.removeEventListener("pageshow", e);
 	}, []);
-	let T = s(null), D = s(/* @__PURE__ */ new Set()), O = s(!1), k = s(null), A = s(null), j = E(A, `chat-island-pos:${g?.host ?? ""}:${g?.username ?? ""}`), { open: M, picker: N, status: P } = Y(w((e) => ({
+	let O = s(null), k = s(/* @__PURE__ */ new Set()), A = s(!1), j = s(null), M = s(null), N = E(M, `chat-island-pos:${_?.host ?? ""}:${_?.username ?? ""}`), { open: P, picker: F, status: ee } = Y(w((e) => ({
 		open: e.open,
 		picker: e.picker,
 		status: e.status
-	}))), F = o(() => ({
+	}))), I = o(() => ({
+		seen: (e) => {
+			let t = Y.getState().conversations[e];
+			if (C.current || document.visibilityState !== "visible" || t?.kind !== "chat") return;
+			let n = t.messages.findLast((e) => !e.mine && e.oid);
+			!n || n.ts <= (t.myRead ?? 0) || (Y.setState((t) => ({ conversations: {
+				...t.conversations,
+				[e]: {
+					...t.conversations[e],
+					myRead: n.ts
+				}
+			} })), O.current?.marker(e, "displayed", n.oid).catch(() => {}));
+		},
 		send: async (e, t, n) => {
-			let r = T.current;
+			let r = O.current;
 			if (!r) throw Error("not connected");
 			try {
 				Y.getState().addMessage(e, await r.send(e, rr(t), void 0, n));
@@ -5136,9 +5250,9 @@ function Qr({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWork
 				}), e;
 			}
 		},
-		typing: (e, t) => Y.getState().online[e] && T.current?.typing(e, t).catch(() => {}),
+		typing: (e, t) => Y.getState().online[e] && O.current?.typing(e, t).catch(() => {}),
 		upload: async (e, t) => {
-			let n = T.current;
+			let n = O.current;
 			if (n) try {
 				let r = await n.upload(t);
 				Y.getState().addMessage(e, await n.send(e, t.name, r));
@@ -5150,7 +5264,7 @@ function Qr({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWork
 			}
 		},
 		createGroup: async (e, t, n) => {
-			let r = T.current, i = y.current;
+			let r = O.current, i = b.current;
 			if (r && i) try {
 				let a = await r.createGroup(e, t, n), o = Y.getState();
 				o.setGroup(a, e, [...t, i.username], n), o.openChat(a);
@@ -5162,7 +5276,7 @@ function Qr({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWork
 			}
 		},
 		remove: async (e) => {
-			let t = T.current, n = y.current;
+			let t = O.current, n = b.current;
 			if (!t || !n) return;
 			let r = Y.getState().conversations[e];
 			try {
@@ -5175,7 +5289,7 @@ function Qr({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWork
 			}
 		},
 		react: async (e, t, n) => {
-			let r = T.current, i = y.current?.username;
+			let r = O.current, i = b.current?.username;
 			if (!r || !i) return;
 			let a = (Y.getState().conversations[e]?.reactions?.[t]?.[i] ?? []).includes(n) ? [] : [n];
 			try {
@@ -5193,47 +5307,48 @@ function Qr({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWork
 			}
 		},
 		loadOlder: async (e) => {
-			let t = T.current, n = Y.getState().ensure(e);
-			if (!(!t || n.complete || D.current.has(e))) {
-				D.current.add(e);
+			let t = O.current, n = Y.getState().ensure(e);
+			if (!(!t || n.complete || k.current.has(e))) {
+				k.current.add(e);
 				try {
 					let r = await t.history(e, n.oldest);
-					Y.getState().prependHistory(e, r.messages, r.complete, r.first), Y.getState().applyReactions(r.reactions);
+					Y.getState().prependHistory(e, r.messages, r.complete, r.first), Y.getState().applyReactions(r.reactions), Y.getState().applyMarkers(r.markers);
 				} catch (e) {
 					X("chat-island-error", {
 						scope: "history",
 						message: e.message
 					});
 				} finally {
-					D.current.delete(e);
+					k.current.delete(e);
 				}
 			}
 		}
 	}), []);
 	i(() => {
-		if (!g) return;
+		if (!_) return;
 		let e = Y.getState();
 		e.reset(), Y.setState({
-			me: g.username,
+			me: _.username,
 			mucHost: `conference.${hn}`,
 			maxHeads: a,
 			newChatButton: l
 		});
-		let t = new _n(g, {
+		let t = new _n(_, {
 			status: (n, a) => {
 				if (e.setStatus(n, a), X("chat-island-status", {
 					status: n,
 					error: a
-				}), n === "online" && r && !O.current && typeof Notification < "u") {
+				}), n === "online" && r && !C.current && !A.current && typeof Notification < "u") {
 					let e = Notification.permission;
-					(e === "granted" || x.current === "auto" && e === "default") && i();
+					(e === "granted" || S.current === "auto" && e === "default") && i();
 				}
 				n === "online" && t.listGroups().then((t) => t.forEach((t) => e.setGroup(t.peer, t.name, t.members, t.avatar, t.owner))).catch(() => {}).then(() => t.recent()).then((e) => {
-					e && (Y.getState().seed(e.messages, g.username), Y.getState().applyReactions(e.reactions));
+					e && (Y.getState().seed(e.messages, _.username), Y.getState().applyReactions(e.reactions), Y.getState().applyMarkers(e.markers));
 				}).catch(() => {});
 			},
 			typing: (t, n) => e.setTyping(t, n),
 			reaction: (t) => e.applyReactions([t]),
+			marker: (t) => e.applyMarkers([t]),
 			presence: (t, n) => e.setOnline(t, n),
 			groupDestroyed: (t) => e.removeConversation(t),
 			groupInvite: (n) => {
@@ -5248,13 +5363,13 @@ function Qr({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWork
 				r.room && !Y.getState().conversations[r.room]?.name && t.groupInfo(r.room).then((t) => e.setGroup(t.peer, t.name, t.members, t.avatar, t.owner)).catch(() => {}), e.addMessage(i, r, { live: !0 }), X("chat-island-message", {
 					...r,
 					peer: i
-				}), X("chat-island-unread", { total: Y.getState().totalUnread() }), r.mine || n(i, r);
+				}), X("chat-island-unread", { total: Y.getState().totalUnread() }), !r.mine && !r.room && r.oid && t.marker(i, "received", r.oid).catch(() => {}), !r.mine && !C.current && n(i, r);
 			}
 		}), n = (e, t) => {
 			let n = Y.getState(), r = document.visibilityState === "visible";
 			if (r && n.open === e) return;
 			let i = n.conversations[e], a = i?.kind === "group" ? i.name ?? e : n.contacts[e]?.name ?? n.inactive[e] ?? e, o = t.oob ? "Attachment" : rr(t.body), s = i?.kind === "group", c = s && t.nick ? n.contacts[t.nick]?.name ?? t.nick : a, l = s && t.nick ? `${c}: ${o}` : o;
-			b.current && Cn();
+			x.current && Cn();
 			let u = s ? i?.avatar : n.contacts[e]?.avatar;
 			if (X("chat-island-notify", {
 				peer: e,
@@ -5276,18 +5391,18 @@ function Qr({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWork
 				};
 			} catch {}
 		};
-		T.current = t;
+		O.current = t;
 		let i = () => {
-			r && !O.current && (O.current = !0, Wn(g, r).then((e) => {
+			r && !A.current && (A.current = !0, Wn(_, r).then((e) => {
 				if (!e) {
-					O.current = !1, Y.setState({ push: Notification.permission === "denied" ? "denied" : "ask" });
+					A.current = !1, Y.setState({ push: Notification.permission === "denied" ? "denied" : "ask" });
 					return;
 				}
 				return t.enablePush(e.service, e.node).then(() => {
-					k.current = e, Y.setState({ push: "enabled" }), X("chat-island-push", { enabled: !0 });
+					j.current = e, Y.setState({ push: "enabled" }), X("chat-island-push", { enabled: !0 });
 				});
 			}).catch((e) => {
-				O.current = !1, X("chat-island-error", {
+				A.current = !1, X("chat-island-error", {
 					scope: "push",
 					message: e.message
 				});
@@ -5300,75 +5415,81 @@ function Qr({ dataConfig: e, position: t = "bottom-right", theme: n, serviceWork
 		let s = () => t.stop();
 		window.addEventListener("pagehide", s), t.start();
 		let c = () => {
-			Rn(g.host, g.token).then(e.setMobile).catch(() => {}), zn(g.host, g.token).then(e.setInactive).catch(() => {});
+			Rn(_.host, _.token).then(e.setMobile).catch(() => {}), zn(_.host, _.token).then(e.setInactive).catch(() => {});
 		};
 		c();
 		let u = window.setInterval(c, 12e4);
-		Ln(g.host, g.token, g.username, (e) => Y.setState({ myName: e })).then(e.setContacts).catch((e) => X("chat-island-error", {
+		Ln(_.host, _.token, _.username, (e) => Y.setState({ myName: e })).then(e.setContacts).catch((e) => X("chat-island-error", {
 			scope: "contacts",
 			message: e.message
 		}));
-		let d = Z("chat-island-open", ({ username: t }) => t && e.openChat(t)), f = Z("chat-island-close", () => e.closeChat()), p = Z("chat-island-new", () => e.setPicker(!0)), m = Z("chat-island-delete", ({ username: e }) => e && F.remove(e)), h = Z("chat-island-send", ({ username: e, text: t }) => e && t && F.send(e, t).catch(() => {})), _ = Z("chat-island-group-create", ({ name: e, members: t }) => e && t?.length && F.createGroup(e, t)), v = Z("chat-island-contacts", ({ contacts: t }) => t && e.setContacts(t)), y = Z("chat-island-conversations-request", () => X("chat-island-conversations", { conversations: qr() }));
+		let d = Z("chat-island-open", ({ username: t }) => t && e.openChat(t)), f = Z("chat-island-close", () => e.closeChat()), p = Z("chat-island-new", () => e.setPicker(!0)), m = Z("chat-island-delete", ({ username: e }) => e && I.remove(e)), h = Z("chat-island-send", ({ username: e, text: t }) => e && t && I.send(e, t).catch(() => {})), g = Z("chat-island-group-create", ({ name: e, members: t }) => e && t?.length && I.createGroup(e, t)), v = Z("chat-island-contacts", ({ contacts: t }) => t && e.setContacts(t)), y = Z("chat-island-conversations-request", () => X("chat-island-conversations", { conversations: Yr() }));
 		return () => {
-			window.removeEventListener("pagehide", s), window.clearInterval(u), y(), p(), m(), h(), _(), d(), f(), v(), k.current && t.disablePush(k.current.service, k.current.node).catch(() => {}), k.current = null, t.stop(), T.current = null, O.current = !1;
+			window.removeEventListener("pagehide", s), window.clearInterval(u), y(), p(), m(), h(), g(), d(), f(), v(), j.current && t.disablePush(j.current.service, j.current.node).catch(() => {}), j.current = null, t.stop(), O.current = null, A.current = !1;
 		};
 	}, [
-		g,
+		_,
 		r,
-		S
+		T
 	]);
-	let ee = Y((e) => Object.keys(e.contacts).join(","));
+	let te = Y((e) => Object.keys(e.contacts).join(","));
 	i(() => {
-		P === "online" && ee && T.current?.announce(ee.split(","));
-	}, [P, ee]);
-	let te = Y((e) => Object.values(e.conversations).map((e) => `${e.peer}:${e.kind}:${e.name ?? ""}:${(e.members ?? []).length}:${e.unread}:${e.messages[e.messages.length - 1]?.id ?? ""}`).join("|") + "#" + Object.keys(e.contacts).length + "#" + Object.values(e.online).filter(Boolean).length + "#" + Object.keys(e.inactive).length);
-	i(() => X("chat-island-conversations", { conversations: qr() }), [te]);
-	let ne = Y((e) => Object.values(e.conversations).reduce((e, t) => e + t.unread, 0));
-	i(() => X("chat-island-unread", { total: ne }), [ne]);
-	let re = s(null), ie = s(M), I = s(null), L = !N && !!M && M !== ie.current && !!re.current;
-	L && (I.current = re.current.offsetHeight), i(() => {
-		ie.current = M, M || (I.current = null);
-	}, [M]);
-	let [ae, oe, se] = Zr(M), [ce, le, R] = Zr(N, L);
-	if (!g) return null;
-	let ue = m && !h && j.anchor ? {
-		right: j.anchor.right,
-		bottom: j.anchor.bottom
-	} : void 0, de = ue ? "" : t === "bottom-left" ? "ci-left-4 ci-bottom-5" : "ci-right-4 ci-bottom-5";
+		ee === "online" && te && O.current?.announce(te.split(","));
+	}, [ee, te]);
+	let ne = Y((e) => Object.values(e.conversations).map((e) => `${e.peer}:${e.kind}:${e.name ?? ""}:${(e.members ?? []).length}:${e.unread}:${e.messages[e.messages.length - 1]?.id ?? ""}`).join("|") + "#" + Object.keys(e.contacts).length + "#" + Object.values(e.online).filter(Boolean).length + "#" + Object.keys(e.inactive).length);
+	i(() => X("chat-island-conversations", { conversations: Yr() }), [ne]);
+	let re = Y((e) => Object.values(e.conversations).reduce((e, t) => e + t.unread, 0));
+	i(() => X("chat-island-unread", { total: re }), [re]), i(() => {
+		let e = () => {
+			let e = Y.getState().open;
+			document.visibilityState === "visible" && e && I.seen(e);
+		};
+		return document.addEventListener("visibilitychange", e), () => document.removeEventListener("visibilitychange", e);
+	}, [I]);
+	let ie = s(null), L = s(P), ae = s(null), oe = !F && !!P && P !== L.current && !!ie.current;
+	oe && (ae.current = ie.current.offsetHeight), i(() => {
+		L.current = P, P || (ae.current = null);
+	}, [P]);
+	let [se, ce, le] = $r(P), [R, ue, de] = $r(F, oe);
+	if (!_ || g) return null;
+	let fe = m && !h && N.anchor ? {
+		right: N.anchor.right,
+		bottom: N.anchor.bottom
+	} : void 0, z = fe ? "" : t === "bottom-left" ? "ci-left-4 ci-bottom-5" : "ci-right-4 ci-bottom-5";
 	return /* @__PURE__ */ d("div", {
-		ref: A,
-		style: ue,
-		onClickCapture: j.onClickCapture,
-		className: `chat-island-root ${_ ? "ci-dark" : ""} ci-fixed ${de} ci-z-[9999] ci-flex ci-items-end ci-gap-3 ci-font-sans ci-select-none`,
-		"data-status": P,
-		children: /* @__PURE__ */ f(Jr, { children: [
-			ae && /* @__PURE__ */ d("div", {
-				className: oe ? "ci-anim-close" : I.current ? "ci-anim-morph" : "ci-anim-open",
-				style: I.current ? { "--ci-from": `${I.current}px` } : void 0,
-				onAnimationEnd: se,
-				children: /* @__PURE__ */ d(zr, {
-					peer: ae,
-					actions: F,
-					theme: v,
-					onDragStart: h ?? (m ? j.start : void 0)
+		ref: M,
+		style: fe,
+		onClickCapture: N.onClickCapture,
+		className: `chat-island-root ${v ? "ci-dark" : ""} ci-fixed ${z} ci-z-[9999] ci-flex ci-items-end ci-gap-3 ci-font-sans ci-select-none`,
+		"data-status": ee,
+		children: /* @__PURE__ */ f(Xr, { children: [
+			se && /* @__PURE__ */ d("div", {
+				className: ce ? "ci-anim-close" : ae.current ? "ci-anim-morph" : "ci-anim-open",
+				style: ae.current ? { "--ci-from": `${ae.current}px` } : void 0,
+				onAnimationEnd: le,
+				children: /* @__PURE__ */ d(Vr, {
+					peer: se,
+					actions: I,
+					theme: y,
+					onDragStart: h ?? (m ? N.start : void 0)
 				})
 			}),
-			ce && /* @__PURE__ */ d("div", {
-				ref: re,
-				className: le ? "ci-anim-close" : "ci-anim-open",
-				onAnimationEnd: R,
-				children: /* @__PURE__ */ d(Ur, {
+			R && /* @__PURE__ */ d("div", {
+				ref: ie,
+				className: ue ? "ci-anim-close" : "ci-anim-open",
+				onAnimationEnd: de,
+				children: /* @__PURE__ */ d(Gr, {
 					onOpen: (e) => Y.getState().openChat(e),
-					onCreateGroup: F.createGroup,
-					onDragStart: h ?? (m ? j.start : void 0)
+					onCreateGroup: I.createGroup,
+					onDragStart: h ?? (m ? N.start : void 0)
 				})
 			}),
 			/* @__PURE__ */ d(Zn, {
-				onDragStart: h ?? (m ? j.start : void 0),
+				onDragStart: h ?? (m ? N.start : void 0),
 				pushButton: u !== "auto"
 			})
 		] })
 	});
 }
 //#endregion
-export { Qr as ChatIsland, Fn as contactsFromOperators };
+export { ei as ChatIsland, Fn as contactsFromOperators };