@composy/chat-core 0.0.1 → 0.0.2

package/esm/renderer/dom-renderer.js

@@ -1,13 +1,14 @@
 /*!
 * ***********************************
-* @composy/chat-core v0.0.1       *
+* @composy/chat-core v0.0.2       *
 * Built with rollup               *
-* Build time: 2024-08-17 11:30:32 *
+* Build time: 2024-10-12 21:52:18 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
 */
 import { cx, normalizeClassPrefix } from "../constants/dom.js";
+import { applyThemeTokens } from "./style-manager.js";
 //#region src/renderer/dom-renderer.ts
 const SEND_ICON_SVG = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"></line><polygon points=\"22 2 15 22 11 13 2 9 22 2\"></polygon></svg>";
 const ICON_IMAGE = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></svg>";
@@ -15,6 +16,48 @@ const ICON_PAPERCLIP = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"curren
 const ICON_MIC = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2\"/><line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/></svg>";
 const ICON_MIC_OFF = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\"/><path d=\"M18.89 13.23A7.12 7.12 0 0 0 19 12v-2\"/><path d=\"M5 10v2a7 7 0 0 0 12 5.29\"/><path d=\"M15 9.34V5a3 3 0 0 0-5.68-1.33\"/><path d=\"M9 9v3a3 3 0 0 0 5.12 2.12\"/><line x1=\"12\" x2=\"12\" y1=\"19\" y2=\"22\"/></svg>";
 const FILE_ICON = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\"/><path d=\"M14 2v4a2 2 0 0 0 2 2h4\"/></svg>";
+const ALLOWED_CUSTOM_TAGS = /* @__PURE__ */ new Set([
+	"a",
+	"b",
+	"blockquote",
+	"br",
+	"code",
+	"div",
+	"em",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"i",
+	"img",
+	"li",
+	"ol",
+	"p",
+	"pre",
+	"s",
+	"span",
+	"strong",
+	"u",
+	"ul"
+]);
+const DANGEROUS_CUSTOM_TAGS = /* @__PURE__ */ new Set([
+	"iframe",
+	"object",
+	"embed",
+	"script",
+	"style",
+	"svg",
+	"math",
+	"template",
+	"form",
+	"input",
+	"button",
+	"link",
+	"meta",
+	"base"
+]);
 const STATUS_MAP = {
 	sending: "...",
 	sent: "✓",
@@ -36,13 +79,17 @@ var DOMRenderer = class {
 		this.isRecording = false;
 		this.recognition = null;
 		this.lastVoiceTranscript = "";
+		this.destroyed = false;
+		this.pendingFileInputs = /* @__PURE__ */ new Set();
 		this.container = container;
+		this.document = container.ownerDocument;
 		this.config = config;
 		this.emitter = emitter;
 		this.mentionEngine = mentionEngine;
 		this.prefix = normalizeClassPrefix(config.classPrefix ?? "ldesign-chat");
 	}
 	init() {
+		if (this.destroyed) return;
 		this.container.innerHTML = "";
 		this.root = this.el("div", `${this.prefix}-container`);
 		this.messageListEl = this.el("div", `${this.prefix}-message-list`);
@@ -52,7 +99,7 @@ var DOMRenderer = class {
 		this.setupEventListeners();
 	}
 	updateMessageContent(id, content) {
-		const bubble = this.messageListEl.querySelector(`[data-msg-id="${this.escapeAttr(id)}"]`)?.querySelector(`.${this.prefix}-bubble`);
+		const bubble = this.getMessageRow(id)?.querySelector(`.${this.prefix}-bubble`);
 		if (!bubble) return;
 		bubble.innerHTML = this.renderTextContent(content);
 	}
@@ -86,7 +133,7 @@ var DOMRenderer = class {
 		this.removeEmpty();
 		const scrollHeight = this.messageListEl.scrollHeight;
 		const scrollTop = this.messageListEl.scrollTop;
-		const fragment = document.createDocumentFragment();
+		const fragment = this.document.createDocumentFragment();
 		let lastTimestamp = 0;
 		const interval = this.config.timeGroupInterval ?? 3e5;
 		for (const message of messages) {
@@ -103,13 +150,18 @@ var DOMRenderer = class {
 		this.messageListEl.scrollTop = scrollTop + (this.messageListEl.scrollHeight - scrollHeight);
 	}
 	updateMessage(id, message) {
-		const rowEl = this.messageListEl.querySelector(`[data-msg-id="${this.escapeAttr(id)}"]`);
+		const rowEl = this.getMessageRow(id);
 		if (!rowEl) return;
-		rowEl.replaceWith(this.createMessageRow(message));
+		rowEl.replaceWith(this.createMessageRow({
+			...message,
+			id
+		}));
 	}
 	removeMessage(id) {
-		this.messageListEl.querySelector(`[data-msg-id="${this.escapeAttr(id)}"]`)?.remove();
+		this.getMessageRow(id)?.remove();
+		this.refreshTimeDividers();
 		if (this.getMessageElements().length === 0) this.renderEmpty();
+		else this.removeEmpty();
 	}
 	scrollToBottom(smooth = true) {
 		if (typeof this.messageListEl.scrollTo === "function") {
@@ -130,6 +182,12 @@ var DOMRenderer = class {
 		this.loadMoreEl.textContent = loading ? "加载中..." : this.config.loadMoreText ?? "加载更多";
 		this.loadMoreEl.classList.toggle(`${this.prefix}-load-more--loading`, loading);
 	}
+	setThemeTokens(tokens) {
+		if (this.root) applyThemeTokens(this.root, tokens);
+	}
+	getRootElement() {
+		return this.root;
+	}
 	focusInput() {
 		this.textareaEl?.focus();
 	}
@@ -160,8 +218,8 @@ var DOMRenderer = class {
 			item.setAttribute("aria-selected", String(index === activeIndex));
 			const avatar = this.el("div", `${this.prefix}-mention-item-avatar`);
 			if (member.avatar) {
-				const img = document.createElement("img");
-				img.src = member.avatar;
+				const img = this.document.createElement("img");
+				img.src = this.safeResourceUrl(member.avatar);
 				img.alt = "";
 				avatar.appendChild(img);
 			} else avatar.textContent = member.name[0]?.toUpperCase() ?? "";
@@ -169,8 +227,12 @@ var DOMRenderer = class {
 			const name = this.el("span", `${this.prefix}-mention-item-name`);
 			name.textContent = member.name;
 			item.appendChild(name);
+			item.addEventListener("mousedown", (event) => event.preventDefault());
 			item.addEventListener("click", () => {
-				this.mentionEngine.select(index);
+				const triggerPosition = this.mentionEngine.getState().triggerPosition;
+				const selectionEnd = this.textareaEl?.selectionEnd;
+				const selected = this.mentionEngine.select(index);
+				if (selected) this.insertMention(selected, triggerPosition, selectionEnd);
 			});
 			this.mentionPanel?.appendChild(item);
 		});
@@ -179,8 +241,13 @@ var DOMRenderer = class {
 		if (this.mentionPanel) this.mentionPanel.style.display = "none";
 	}
 	destroy() {
+		if (this.destroyed) return;
+		this.destroyed = true;
 		this.stopVoice();
-		this.container.innerHTML = "";
+		this.finishVoice();
+		this.pendingFileInputs.forEach((input) => input.remove());
+		this.pendingFileInputs.clear();
+		this.root?.remove();
 	}
 	renderInputArea() {
 		this.inputArea = this.el("div", `${this.prefix}-input-area`);
@@ -190,7 +257,7 @@ var DOMRenderer = class {
 		this.mentionPanel.setAttribute("role", "listbox");
 		wrapper.appendChild(this.mentionPanel);
 		if (this.config.enableToolbar !== false) this.renderToolbar(wrapper);
-		this.textareaEl = document.createElement("textarea");
+		this.textareaEl = this.document.createElement("textarea");
 		this.textareaEl.className = `${this.prefix}-textarea`;
 		this.textareaEl.placeholder = this.config.inputPlaceholder ?? "输入消息...";
 		this.textareaEl.rows = 1;
@@ -201,7 +268,7 @@ var DOMRenderer = class {
 		this.dropOverlay.style.display = "none";
 		wrapper.appendChild(this.dropOverlay);
 		this.inputArea.appendChild(wrapper);
-		this.sendBtn = document.createElement("button");
+		this.sendBtn = this.document.createElement("button");
 		this.sendBtn.className = `${this.prefix}-send-btn`;
 		this.sendBtn.innerHTML = SEND_ICON_SVG;
 		this.sendBtn.title = "发送";
@@ -231,7 +298,7 @@ var DOMRenderer = class {
 		wrapper.insertBefore(this.toolbarEl, wrapper.firstChild);
 	}
 	createToolbarBtn(iconSvg, title) {
-		const btn = document.createElement("button");
+		const btn = this.document.createElement("button");
 		btn.className = `${this.prefix}-toolbar-btn`;
 		btn.innerHTML = iconSvg;
 		btn.title = title;
@@ -239,21 +306,27 @@ var DOMRenderer = class {
 		return btn;
 	}
 	openFilePicker(accept) {
-		const input = document.createElement("input");
+		const input = this.document.createElement("input");
 		input.type = "file";
 		input.accept = accept;
 		input.multiple = true;
 		input.style.display = "none";
+		this.pendingFileInputs.add(input);
+		const cleanup = () => {
+			input.remove();
+			this.pendingFileInputs.delete(input);
+		};
 		input.addEventListener("change", () => {
 			const files = Array.from(input.files ?? []);
-			input.remove();
+			cleanup();
 			if (!files.length) return;
 			const isImage = accept.startsWith("image");
 			this.emitter.emit(isImage ? "toolbar-image" : "toolbar-file", files);
 			if (isImage) this.config.onImageUpload?.(files);
 			else this.config.onFileUpload?.(files);
 		});
-		document.body.appendChild(input);
+		input.addEventListener("cancel", cleanup);
+		(this.document.body ?? this.document.documentElement).appendChild(input);
 		input.click();
 	}
 	toggleVoice() {
@@ -261,8 +334,8 @@ var DOMRenderer = class {
 		else this.startVoice();
 	}
 	startVoice() {
-		if (typeof window === "undefined") return;
-		const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+		const view = this.document.defaultView;
+		const SpeechRecognition = view?.SpeechRecognition || view?.webkitSpeechRecognition;
 		if (!SpeechRecognition) {
 			this.emitter.emit("toolbar-voice-unsupported");
 			this.config.onVoiceUnsupported?.();
@@ -270,22 +343,34 @@ var DOMRenderer = class {
 		}
 		try {
 			this.lastVoiceTranscript = "";
-			this.recognition = new SpeechRecognition();
-			this.recognition.continuous = false;
-			this.recognition.interimResults = true;
-			this.recognition.lang = this.config.voiceLang ?? "zh-CN";
-			this.recognition.onresult = (event) => {
-				let transcript = "";
-				for (let i = 0; i < event.results.length; i++) transcript += event.results[i][0].transcript;
-				this.lastVoiceTranscript = transcript;
-				if (event.results[event.results.length - 1]?.isFinal && this.textareaEl) this.insertTextAtCursor(transcript);
+			const recognition = new SpeechRecognition();
+			const finalSegments = /* @__PURE__ */ new Map();
+			recognition.continuous = false;
+			recognition.interimResults = true;
+			recognition.lang = this.config.voiceLang ?? "zh-CN";
+			this.recognition = recognition;
+			recognition.onresult = (event) => {
+				if (this.destroyed || this.recognition !== recognition) return;
+				const firstChangedResult = Math.max(0, event.resultIndex ?? 0);
+				const newFinalSegments = [];
+				for (let index = firstChangedResult; index < event.results.length; index++) {
+					const result = event.results[index];
+					if (!result?.isFinal || finalSegments.has(index)) continue;
+					finalSegments.set(index, result[0].transcript);
+					newFinalSegments.push(result[0].transcript);
+				}
+				this.lastVoiceTranscript = [...finalSegments.entries()].sort(([left], [right]) => left - right).map(([, transcript]) => transcript).join("");
+				if (newFinalSegments.length && this.textareaEl) this.insertTextAtCursor(newFinalSegments.join(""));
 			};
-			this.recognition.onend = () => {
+			recognition.onend = () => {
+				if (this.destroyed || this.recognition !== recognition) return;
+				const transcript = this.lastVoiceTranscript;
 				this.finishVoice();
-				this.emitter.emit("toolbar-voice-end", this.lastVoiceTranscript);
-				this.config.onVoiceEnd?.(this.lastVoiceTranscript);
+				this.emitter.emit("toolbar-voice-end", transcript);
+				this.config.onVoiceEnd?.(transcript);
 			};
-			this.recognition.onerror = (error) => {
+			recognition.onerror = (error) => {
+				if (this.destroyed || this.recognition !== recognition) return;
 				this.finishVoice();
 				this.emitter.emit("toolbar-voice-error", error);
 				this.config.onVoiceError?.(error);
@@ -293,7 +378,7 @@ var DOMRenderer = class {
 			this.isRecording = true;
 			this.voiceBtn?.classList.add(`${this.prefix}-toolbar-btn--active`);
 			if (this.voiceBtn) this.voiceBtn.innerHTML = ICON_MIC_OFF;
-			this.recognition.start();
+			recognition.start();
 			this.emitter.emit("toolbar-voice-start");
 			this.config.onVoiceStart?.();
 		} catch (error) {
@@ -305,7 +390,6 @@ var DOMRenderer = class {
 	stopVoice() {
 		if (!this.recognition) return;
 		const recognition = this.recognition;
-		this.recognition = null;
 		try {
 			recognition.stop();
 		} catch {
@@ -329,7 +413,8 @@ var DOMRenderer = class {
 				if (this.config.enableMention && this.textareaEl) this.mentionEngine.handleInput(this.textareaEl.value, this.textareaEl.selectionStart);
 			});
 			this.textareaEl.addEventListener("keydown", (event) => {
-				if (this.mentionEngine.getState().active) {
+				const mentionState = this.mentionEngine.getState();
+				if (mentionState.active) {
 					if (event.key === "ArrowUp") {
 						event.preventDefault();
 						this.mentionEngine.moveUp();
@@ -338,8 +423,10 @@ var DOMRenderer = class {
 						this.mentionEngine.moveDown();
 					} else if (event.key === "Enter" && !event.shiftKey) {
 						event.preventDefault();
+						const triggerPosition = mentionState.triggerPosition;
+						const selectionEnd = this.textareaEl.selectionEnd;
 						const member = this.mentionEngine.selectCurrent();
-						if (member) this.insertMention(member);
+						if (member) this.insertMention(member, triggerPosition, selectionEnd);
 					} else if (event.key === "Escape") {
 						event.preventDefault();
 						this.mentionEngine.deactivate();
@@ -424,14 +511,14 @@ var DOMRenderer = class {
 		if (this.config.clearInputOnSend !== false) this.clearInput();
 		this.mentionEngine.resetSelected();
 	}
-	insertMention(member) {
+	insertMention(member, triggerPosition, selectionEnd) {
 		if (!this.textareaEl) return;
 		const state = this.mentionEngine.getState();
 		const text = this.textareaEl.value;
-		const pos = this.textareaEl.selectionStart;
+		const end = selectionEnd ?? this.textareaEl.selectionEnd;
 		const insertText = this.mentionEngine.getInsertText(member);
-		const before = text.slice(0, state.triggerPosition);
-		const after = text.slice(pos);
+		const before = text.slice(0, triggerPosition ?? state.triggerPosition);
+		const after = text.slice(end);
 		this.textareaEl.value = this.limitInput(before + insertText + after);
 		const newPos = Math.min(before.length + insertText.length, this.textareaEl.value.length);
 		this.textareaEl.setSelectionRange(newPos, newPos);
@@ -455,8 +542,7 @@ var DOMRenderer = class {
 	autoResize() {
 		if (!this.textareaEl) return;
 		this.textareaEl.style.height = "auto";
-		const maxHeight = this.getCssSizeValue("--ldesign-chat-textarea-max-height", 120);
-		this.textareaEl.style.height = `${Math.min(this.textareaEl.scrollHeight, maxHeight)}px`;
+		this.textareaEl.style.height = `${this.textareaEl.scrollHeight}px`;
 	}
 	updateSendButtonState() {
 		if (!this.sendBtn) return;
@@ -466,21 +552,28 @@ var DOMRenderer = class {
 		this.loadMoreEl = this.el("div", `${this.prefix}-load-more`);
 		this.loadMoreEl.textContent = this.config.loadMoreText ?? "加载更多";
 		this.loadMoreEl.addEventListener("click", () => {
-			if (this.loadingMore) return;
+			if (this.destroyed || this.loadingMore) return;
 			this.setLoadingMore(true);
 			this.emitter.emit("load-more");
-			Promise.resolve(this.config.onLoadMore?.()).finally(() => {
-				this.setLoadingMore(false);
-			});
+			this.loadMore();
 		});
 		this.messageListEl.appendChild(this.loadMoreEl);
 	}
+	async loadMore() {
+		try {
+			await this.config.onLoadMore?.();
+		} catch (error) {
+			this.emitter.emit("load-more-error", error);
+		} finally {
+			if (!this.destroyed) this.setLoadingMore(false);
+		}
+	}
 	renderTimeDivider(timestamp) {
 		this.messageListEl.appendChild(this.createTimeDivider(timestamp));
 	}
 	createTimeDivider(timestamp) {
 		const divider = this.el("div", `${this.prefix}-time-divider`);
-		const span = document.createElement("span");
+		const span = this.document.createElement("span");
 		span.textContent = this.formatTime(timestamp);
 		divider.appendChild(span);
 		return divider;
@@ -522,8 +615,8 @@ var DOMRenderer = class {
 	createAvatar(name, avatarUrl) {
 		const avatar = this.el("div", `${this.prefix}-avatar`);
 		if (avatarUrl) {
-			const img = document.createElement("img");
-			img.src = avatarUrl;
+			const img = this.document.createElement("img");
+			img.src = this.safeResourceUrl(avatarUrl);
 			img.alt = name;
 			avatar.appendChild(img);
 		} else avatar.textContent = name[0]?.toUpperCase() ?? "";
@@ -559,8 +652,8 @@ var DOMRenderer = class {
 			case "image": {
 				const bubble = this.el("div", cx(`${p}-bubble`, dirClass, `${p}-bubble--image`));
 				if (message.image) {
-					const img = document.createElement("img");
-					img.src = message.image.thumbUrl ?? message.image.url;
+					const img = this.document.createElement("img");
+					img.src = this.safeResourceUrl(message.image.thumbUrl ?? message.image.url);
 					img.alt = message.content ?? "";
 					if (message.image.width) img.width = Math.min(message.image.width, 240);
 					bubble.appendChild(img);
@@ -586,17 +679,89 @@ var DOMRenderer = class {
 			}
 			case "custom": {
 				const bubble = this.el("div", cx(`${p}-bubble`, dirClass));
-				if (message.customHtml) bubble.innerHTML = message.customHtml;
+				if (message.customHtml) this.setSanitizedCustomHtml(bubble, message.customHtml);
 				else bubble.textContent = message.content ?? "";
 				return bubble;
 			}
 			default: {
 				const bubble = this.el("div", cx(`${p}-bubble`, dirClass, message.streaming && `${p}-bubble--streaming`));
-				bubble.innerHTML = this.renderTextContent(message.content ?? "", message.mentions);
+				if (message.contentBlocks?.length) this.renderContentBlocks(bubble, message.contentBlocks);
+				else bubble.innerHTML = this.renderTextContent(message.content ?? "", message.mentions);
 				return bubble;
 			}
 		}
 	}
+	renderContentBlocks(target, blocks) {
+		target.replaceChildren();
+		for (const block of blocks) switch (block.type) {
+			case "text":
+				target.appendChild(this.document.createTextNode(block.text));
+				break;
+			case "mention": {
+				const mention = this.el("span", `${this.prefix}-mention-tag`);
+				mention.dataset.mentionId = block.id;
+				mention.textContent = `@${block.label}`;
+				target.appendChild(mention);
+				break;
+			}
+			case "link": {
+				const link = this.document.createElement("a");
+				const safeUrl = this.safeUrl(block.url, [
+					"http:",
+					"https:",
+					"mailto:"
+				]);
+				link.className = `${this.prefix}-link`;
+				link.textContent = block.label ?? block.url;
+				if (safeUrl) {
+					link.href = safeUrl;
+					link.target = "_blank";
+					link.rel = "noopener noreferrer";
+				}
+				target.appendChild(link);
+				break;
+			}
+			case "code": {
+				const code = this.document.createElement("code");
+				code.textContent = block.code;
+				if (block.language) code.dataset.language = block.language;
+				target.appendChild(code);
+				break;
+			}
+			case "image": {
+				const image = this.document.createElement("img");
+				const safeUrl = this.safeResourceUrl(block.src);
+				const width = block.width;
+				const height = block.height;
+				if (safeUrl) image.src = safeUrl;
+				image.alt = block.alt ?? "";
+				image.loading = "lazy";
+				if (Number.isFinite(width) && width > 0) image.width = width;
+				if (Number.isFinite(height) && height > 0) image.height = height;
+				target.appendChild(image);
+				break;
+			}
+			case "file": {
+				const file = this.document.createElement("a");
+				const safeUrl = this.safeResourceUrl(block.url);
+				file.className = `${this.prefix}-file-link`;
+				file.textContent = block.name;
+				if (safeUrl) {
+					file.href = safeUrl;
+					file.target = "_blank";
+					file.rel = "noopener noreferrer";
+				}
+				target.appendChild(file);
+				break;
+			}
+			case "break":
+				target.appendChild(this.document.createElement("br"));
+				break;
+			case "custom":
+				target.appendChild(this.document.createTextNode(block.fallback ?? `[${block.kind}]`));
+				break;
+		}
+	}
 	renderTextContent(content, mentions) {
 		let html = this.escapeHtml(content);
 		if (mentions?.length) for (const mention of mentions) {
@@ -605,6 +770,89 @@ var DOMRenderer = class {
 		}
 		return html.replace(/(https?:\/\/[^\s<]+)/g, `<a class="${this.prefix}-link" href="$1" target="_blank" rel="noopener noreferrer">$1</a>`);
 	}
+	setSanitizedCustomHtml(target, html) {
+		const template = this.document.createElement("template");
+		template.innerHTML = html;
+		const fragment = this.document.createDocumentFragment();
+		for (const node of Array.from(template.content.childNodes)) {
+			const sanitized = this.sanitizeCustomNode(node);
+			if (sanitized) fragment.appendChild(sanitized);
+		}
+		target.replaceChildren(fragment);
+	}
+	sanitizeCustomNode(node) {
+		if (node.nodeType === 3) return this.document.createTextNode(node.textContent ?? "");
+		if (node.nodeType !== 1) return null;
+		const source = node;
+		const tagName = source.tagName.toLowerCase();
+		if (DANGEROUS_CUSTOM_TAGS.has(tagName)) return null;
+		if (!ALLOWED_CUSTOM_TAGS.has(tagName)) {
+			const fragment = this.document.createDocumentFragment();
+			for (const child of Array.from(source.childNodes)) {
+				const sanitized = this.sanitizeCustomNode(child);
+				if (sanitized) fragment.appendChild(sanitized);
+			}
+			return fragment;
+		}
+		const element = this.document.createElement(tagName);
+		const title = source.getAttribute("title");
+		if (title) element.setAttribute("title", title);
+		const ariaLabel = source.getAttribute("aria-label");
+		if (ariaLabel) element.setAttribute("aria-label", ariaLabel);
+		if (tagName === "a") {
+			const href = source.getAttribute("href");
+			const safeHref = href ? this.safeUrl(href, [
+				"http:",
+				"https:",
+				"mailto:"
+			]) : null;
+			if (safeHref) element.setAttribute("href", safeHref);
+			const target = source.getAttribute("target");
+			if (target === "_blank" || target === "_self") element.setAttribute("target", target);
+			element.setAttribute("rel", "noopener noreferrer");
+		}
+		if (tagName === "img") {
+			const src = source.getAttribute("src");
+			const safeSrc = src ? this.safeUrl(src, [
+				"http:",
+				"https:",
+				"blob:"
+			]) : null;
+			if (safeSrc) element.setAttribute("src", safeSrc);
+			element.setAttribute("alt", source.getAttribute("alt") ?? "");
+			for (const dimension of ["width", "height"]) {
+				const value = Number(source.getAttribute(dimension));
+				if (Number.isFinite(value) && value > 0) element.setAttribute(dimension, String(value));
+			}
+			element.setAttribute("loading", "lazy");
+		}
+		for (const child of Array.from(source.childNodes)) {
+			const sanitized = this.sanitizeCustomNode(child);
+			if (sanitized) element.appendChild(sanitized);
+		}
+		return element;
+	}
+	safeResourceUrl(value) {
+		if (!value) return "";
+		return this.safeUrl(value, [
+			"http:",
+			"https:",
+			"blob:"
+		]) ?? "";
+	}
+	safeUrl(value, protocols) {
+		const trimmed = value.trim();
+		if (!trimmed || [...trimmed].some((character) => {
+			const code = character.charCodeAt(0);
+			return code < 32 || code === 127;
+		})) return null;
+		try {
+			const resolved = new URL(trimmed, this.document.baseURI);
+			return protocols.includes(resolved.protocol) ? trimmed : null;
+		} catch {
+			return null;
+		}
+	}
 	renderEmpty() {
 		if (this.messageListEl.querySelector(`.${this.prefix}-empty`)) return;
 		const empty = this.el("div", `${this.prefix}-empty`);
@@ -615,13 +863,26 @@ var DOMRenderer = class {
 		this.messageListEl.querySelector(`.${this.prefix}-empty`)?.remove();
 	}
 	el(tag, className) {
-		const el = document.createElement(tag);
+		const el = this.document.createElement(tag);
 		el.className = className;
 		return el;
 	}
 	getMessageElements() {
 		return Array.from(this.messageListEl.querySelectorAll(`.${this.prefix}-message-row`));
 	}
+	getMessageRow(id) {
+		return this.getMessageElements().find((element) => element.dataset.msgId === id) ?? null;
+	}
+	refreshTimeDividers() {
+		this.messageListEl.querySelectorAll(`.${this.prefix}-time-divider`).forEach((divider) => divider.remove());
+		const interval = this.config.timeGroupInterval ?? 3e5;
+		let previousTimestamp = 0;
+		for (const row of this.getMessageElements()) {
+			const timestamp = Number(row.dataset.timestamp ?? 0);
+			if (this.config.showTimestamp !== false && timestamp - previousTimestamp > interval) row.before(this.createTimeDivider(timestamp));
+			previousTimestamp = timestamp;
+		}
+	}
 	formatTime(timestamp) {
 		if (this.config.formatTime) return this.config.formatTime(timestamp);
 		const date = new Date(timestamp);
@@ -653,14 +914,8 @@ var DOMRenderer = class {
 		if (!max || max <= 0) return content;
 		return content.slice(0, max);
 	}
-	getCssSizeValue(name, fallback) {
-		if (typeof window === "undefined" || !this.root) return fallback;
-		const value = window.getComputedStyle(this.root).getPropertyValue(name).trim();
-		const parsed = Number.parseFloat(value);
-		return Number.isFinite(parsed) ? parsed : fallback;
-	}
 	escapeHtml(str) {
-		const div = document.createElement("div");
+		const div = this.document.createElement("div");
 		div.textContent = str;
 		return div.innerHTML;
 	}