@composy/chat-core 0.0.1

package/es/renderer/dom-renderer.js

@@ -0,0 +1,677 @@
+/*!
+* ***********************************
+* @composy/chat-core v0.0.1       *
+* Built with rollup               *
+* Build time: 2024-08-17 11:30:32 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { cx, normalizeClassPrefix } from "../constants/dom.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>";
+const ICON_PAPERCLIP = "<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48\"/></svg>";
+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 STATUS_MAP = {
+	sending: "...",
+	sent: "✓",
+	delivered: "✓✓",
+	read: "✓✓",
+	failed: "!"
+};
+var DOMRenderer = class {
+	constructor(container, config, emitter, mentionEngine) {
+		this.inputArea = null;
+		this.textareaEl = null;
+		this.sendBtn = null;
+		this.mentionPanel = null;
+		this.loadMoreEl = null;
+		this.toolbarEl = null;
+		this.dropOverlay = null;
+		this.voiceBtn = null;
+		this.loadingMore = false;
+		this.isRecording = false;
+		this.recognition = null;
+		this.lastVoiceTranscript = "";
+		this.container = container;
+		this.config = config;
+		this.emitter = emitter;
+		this.mentionEngine = mentionEngine;
+		this.prefix = normalizeClassPrefix(config.classPrefix ?? "ldesign-chat");
+	}
+	init() {
+		this.container.innerHTML = "";
+		this.root = this.el("div", `${this.prefix}-container`);
+		this.messageListEl = this.el("div", `${this.prefix}-message-list`);
+		this.root.appendChild(this.messageListEl);
+		if (this.config.showInput !== false) this.renderInputArea();
+		this.container.appendChild(this.root);
+		this.setupEventListeners();
+	}
+	updateMessageContent(id, content) {
+		const bubble = this.messageListEl.querySelector(`[data-msg-id="${this.escapeAttr(id)}"]`)?.querySelector(`.${this.prefix}-bubble`);
+		if (!bubble) return;
+		bubble.innerHTML = this.renderTextContent(content);
+	}
+	renderMessages(messages) {
+		this.messageListEl.innerHTML = "";
+		if (this.config.enableLoadMore) this.renderLoadMoreButton();
+		if (messages.length === 0) {
+			this.renderEmpty();
+			return;
+		}
+		let lastTimestamp = 0;
+		const interval = this.config.timeGroupInterval ?? 3e5;
+		for (const message of messages) {
+			if (this.config.showTimestamp !== false && message.timestamp - lastTimestamp > interval) {
+				this.renderTimeDivider(message.timestamp);
+				lastTimestamp = message.timestamp;
+			}
+			this.renderMessageRow(message);
+		}
+	}
+	appendMessage(message) {
+		this.removeEmpty();
+		const messageEls = this.getMessageElements();
+		const lastTime = messageEls.length > 0 ? Number.parseInt(messageEls[messageEls.length - 1].dataset.timestamp ?? "0", 10) : 0;
+		const interval = this.config.timeGroupInterval ?? 3e5;
+		if (this.config.showTimestamp !== false && message.timestamp - lastTime > interval) this.renderTimeDivider(message.timestamp);
+		this.renderMessageRow(message);
+	}
+	prependMessages(messages) {
+		if (!messages.length) return;
+		this.removeEmpty();
+		const scrollHeight = this.messageListEl.scrollHeight;
+		const scrollTop = this.messageListEl.scrollTop;
+		const fragment = document.createDocumentFragment();
+		let lastTimestamp = 0;
+		const interval = this.config.timeGroupInterval ?? 3e5;
+		for (const message of messages) {
+			if (this.config.showTimestamp !== false && message.timestamp - lastTimestamp > interval) {
+				fragment.appendChild(this.createTimeDivider(message.timestamp));
+				lastTimestamp = message.timestamp;
+			}
+			fragment.appendChild(this.createMessageRow(message));
+		}
+		const firstMessage = this.messageListEl.querySelector(`.${this.prefix}-message-row, .${this.prefix}-time-divider`);
+		if (firstMessage) firstMessage.before(fragment);
+		else if (this.loadMoreEl) this.loadMoreEl.after(fragment);
+		else this.messageListEl.appendChild(fragment);
+		this.messageListEl.scrollTop = scrollTop + (this.messageListEl.scrollHeight - scrollHeight);
+	}
+	updateMessage(id, message) {
+		const rowEl = this.messageListEl.querySelector(`[data-msg-id="${this.escapeAttr(id)}"]`);
+		if (!rowEl) return;
+		rowEl.replaceWith(this.createMessageRow(message));
+	}
+	removeMessage(id) {
+		this.messageListEl.querySelector(`[data-msg-id="${this.escapeAttr(id)}"]`)?.remove();
+		if (this.getMessageElements().length === 0) this.renderEmpty();
+	}
+	scrollToBottom(smooth = true) {
+		if (typeof this.messageListEl.scrollTo === "function") {
+			this.messageListEl.scrollTo({
+				top: this.messageListEl.scrollHeight,
+				behavior: smooth ? "smooth" : "auto"
+			});
+			return;
+		}
+		this.messageListEl.scrollTop = this.messageListEl.scrollHeight;
+	}
+	isAtBottom(threshold = 4) {
+		return this.messageListEl.scrollHeight - this.messageListEl.scrollTop - this.messageListEl.clientHeight <= threshold;
+	}
+	setLoadingMore(loading) {
+		this.loadingMore = loading;
+		if (!this.loadMoreEl) return;
+		this.loadMoreEl.textContent = loading ? "加载中..." : this.config.loadMoreText ?? "加载更多";
+		this.loadMoreEl.classList.toggle(`${this.prefix}-load-more--loading`, loading);
+	}
+	focusInput() {
+		this.textareaEl?.focus();
+	}
+	setInputContent(content) {
+		if (!this.textareaEl) return;
+		this.textareaEl.value = this.limitInput(content);
+		this.autoResize();
+		this.updateSendButtonState();
+		this.config.onInputChange?.(this.textareaEl.value);
+	}
+	getInputContent() {
+		return this.textareaEl?.value ?? "";
+	}
+	clearInput() {
+		this.setInputContent("");
+	}
+	renderMentionPanel(members, activeIndex) {
+		if (!this.mentionPanel) return;
+		if (members.length === 0) {
+			this.mentionPanel.style.display = "none";
+			return;
+		}
+		this.mentionPanel.style.display = "block";
+		this.mentionPanel.innerHTML = "";
+		members.forEach((member, index) => {
+			const item = this.el("div", cx(`${this.prefix}-mention-item`, index === activeIndex && `${this.prefix}-mention-item--active`));
+			item.setAttribute("role", "option");
+			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;
+				img.alt = "";
+				avatar.appendChild(img);
+			} else avatar.textContent = member.name[0]?.toUpperCase() ?? "";
+			item.appendChild(avatar);
+			const name = this.el("span", `${this.prefix}-mention-item-name`);
+			name.textContent = member.name;
+			item.appendChild(name);
+			item.addEventListener("click", () => {
+				this.mentionEngine.select(index);
+			});
+			this.mentionPanel?.appendChild(item);
+		});
+	}
+	hideMentionPanel() {
+		if (this.mentionPanel) this.mentionPanel.style.display = "none";
+	}
+	destroy() {
+		this.stopVoice();
+		this.container.innerHTML = "";
+	}
+	renderInputArea() {
+		this.inputArea = this.el("div", `${this.prefix}-input-area`);
+		const wrapper = this.el("div", `${this.prefix}-input-wrapper`);
+		this.mentionPanel = this.el("div", `${this.prefix}-mention-panel`);
+		this.mentionPanel.style.display = "none";
+		this.mentionPanel.setAttribute("role", "listbox");
+		wrapper.appendChild(this.mentionPanel);
+		if (this.config.enableToolbar !== false) this.renderToolbar(wrapper);
+		this.textareaEl = document.createElement("textarea");
+		this.textareaEl.className = `${this.prefix}-textarea`;
+		this.textareaEl.placeholder = this.config.inputPlaceholder ?? "输入消息...";
+		this.textareaEl.rows = 1;
+		if (this.config.maxInputLength && this.config.maxInputLength > 0) this.textareaEl.maxLength = this.config.maxInputLength;
+		wrapper.appendChild(this.textareaEl);
+		this.dropOverlay = this.el("div", `${this.prefix}-drop-overlay`);
+		this.dropOverlay.innerHTML = "<span>拖放文件到这里</span>";
+		this.dropOverlay.style.display = "none";
+		wrapper.appendChild(this.dropOverlay);
+		this.inputArea.appendChild(wrapper);
+		this.sendBtn = document.createElement("button");
+		this.sendBtn.className = `${this.prefix}-send-btn`;
+		this.sendBtn.innerHTML = SEND_ICON_SVG;
+		this.sendBtn.title = "发送";
+		this.sendBtn.type = "button";
+		this.sendBtn.disabled = true;
+		this.inputArea.appendChild(this.sendBtn);
+		this.root.appendChild(this.inputArea);
+	}
+	renderToolbar(wrapper) {
+		const toolbar = this.config.toolbarConfig ?? {};
+		this.toolbarEl = this.el("div", `${this.prefix}-toolbar`);
+		if (toolbar.image !== false) {
+			const imageBtn = this.createToolbarBtn(ICON_IMAGE, "插入图片");
+			imageBtn.addEventListener("click", () => this.openFilePicker("image/*"));
+			this.toolbarEl.appendChild(imageBtn);
+		}
+		if (toolbar.file !== false) {
+			const fileBtn = this.createToolbarBtn(ICON_PAPERCLIP, "插入文件");
+			fileBtn.addEventListener("click", () => this.openFilePicker("*/*"));
+			this.toolbarEl.appendChild(fileBtn);
+		}
+		if (toolbar.voice !== false) {
+			this.voiceBtn = this.createToolbarBtn(ICON_MIC, "语音输入");
+			this.voiceBtn.addEventListener("click", () => this.toggleVoice());
+			this.toolbarEl.appendChild(this.voiceBtn);
+		}
+		wrapper.insertBefore(this.toolbarEl, wrapper.firstChild);
+	}
+	createToolbarBtn(iconSvg, title) {
+		const btn = document.createElement("button");
+		btn.className = `${this.prefix}-toolbar-btn`;
+		btn.innerHTML = iconSvg;
+		btn.title = title;
+		btn.type = "button";
+		return btn;
+	}
+	openFilePicker(accept) {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.accept = accept;
+		input.multiple = true;
+		input.style.display = "none";
+		input.addEventListener("change", () => {
+			const files = Array.from(input.files ?? []);
+			input.remove();
+			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.click();
+	}
+	toggleVoice() {
+		if (this.isRecording) this.stopVoice();
+		else this.startVoice();
+	}
+	startVoice() {
+		if (typeof window === "undefined") return;
+		const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+		if (!SpeechRecognition) {
+			this.emitter.emit("toolbar-voice-unsupported");
+			this.config.onVoiceUnsupported?.();
+			return;
+		}
+		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);
+			};
+			this.recognition.onend = () => {
+				this.finishVoice();
+				this.emitter.emit("toolbar-voice-end", this.lastVoiceTranscript);
+				this.config.onVoiceEnd?.(this.lastVoiceTranscript);
+			};
+			this.recognition.onerror = (error) => {
+				this.finishVoice();
+				this.emitter.emit("toolbar-voice-error", error);
+				this.config.onVoiceError?.(error);
+			};
+			this.isRecording = true;
+			this.voiceBtn?.classList.add(`${this.prefix}-toolbar-btn--active`);
+			if (this.voiceBtn) this.voiceBtn.innerHTML = ICON_MIC_OFF;
+			this.recognition.start();
+			this.emitter.emit("toolbar-voice-start");
+			this.config.onVoiceStart?.();
+		} catch (error) {
+			this.finishVoice();
+			this.emitter.emit("toolbar-voice-error", error);
+			this.config.onVoiceError?.(error);
+		}
+	}
+	stopVoice() {
+		if (!this.recognition) return;
+		const recognition = this.recognition;
+		this.recognition = null;
+		try {
+			recognition.stop();
+		} catch {
+			this.finishVoice();
+		}
+	}
+	finishVoice() {
+		this.isRecording = false;
+		this.recognition = null;
+		this.voiceBtn?.classList.remove(`${this.prefix}-toolbar-btn--active`);
+		if (this.voiceBtn) this.voiceBtn.innerHTML = ICON_MIC;
+	}
+	setupEventListeners() {
+		if (this.textareaEl) {
+			this.textareaEl.addEventListener("input", () => {
+				const limited = this.limitInput(this.textareaEl?.value ?? "");
+				if (this.textareaEl && limited !== this.textareaEl.value) this.textareaEl.value = limited;
+				this.autoResize();
+				this.updateSendButtonState();
+				this.config.onInputChange?.(this.textareaEl?.value ?? "");
+				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) {
+					if (event.key === "ArrowUp") {
+						event.preventDefault();
+						this.mentionEngine.moveUp();
+					} else if (event.key === "ArrowDown") {
+						event.preventDefault();
+						this.mentionEngine.moveDown();
+					} else if (event.key === "Enter" && !event.shiftKey) {
+						event.preventDefault();
+						const member = this.mentionEngine.selectCurrent();
+						if (member) this.insertMention(member);
+					} else if (event.key === "Escape") {
+						event.preventDefault();
+						this.mentionEngine.deactivate();
+					}
+					return;
+				}
+				if (this.config.enterToSend !== false && event.key === "Enter" && !event.shiftKey) {
+					event.preventDefault();
+					this.handleSend();
+				}
+			});
+			this.textareaEl.addEventListener("paste", (event) => {
+				const items = event.clipboardData?.items;
+				if (!items) return;
+				const files = [];
+				for (let i = 0; i < items.length; i++) if (items[i].kind === "file") {
+					const file = items[i].getAsFile();
+					if (file) files.push(file);
+				}
+				if (files.length > 0) {
+					event.preventDefault();
+					this.emitter.emit("toolbar-paste", files);
+					this.config.onPaste?.(files);
+				}
+			});
+		}
+		if (this.inputArea) {
+			const wrapper = this.inputArea.querySelector(`.${this.prefix}-input-wrapper`);
+			if (wrapper) this.setupDropEvents(wrapper);
+		}
+		this.sendBtn?.addEventListener("click", () => {
+			this.handleSend();
+		});
+		this.emitter.on("mention-filter", (state) => {
+			this.renderMentionPanel(state.filtered, state.activeIndex);
+		});
+		this.emitter.on("mention-active-change", (index) => {
+			(this.mentionPanel?.querySelectorAll(`.${this.prefix}-mention-item`))?.forEach((el, i) => {
+				el.classList.toggle(`${this.prefix}-mention-item--active`, i === index);
+				el.setAttribute("aria-selected", String(i === index));
+			});
+		});
+		this.emitter.on("mention-deactivate", () => {
+			this.hideMentionPanel();
+		});
+	}
+	setupDropEvents(wrapper) {
+		let dragCounter = 0;
+		wrapper.addEventListener("dragenter", (event) => {
+			event.preventDefault();
+			dragCounter++;
+			if (this.dropOverlay) this.dropOverlay.style.display = "flex";
+		});
+		wrapper.addEventListener("dragleave", (event) => {
+			event.preventDefault();
+			dragCounter--;
+			if (dragCounter <= 0) {
+				dragCounter = 0;
+				if (this.dropOverlay) this.dropOverlay.style.display = "none";
+			}
+		});
+		wrapper.addEventListener("dragover", (event) => {
+			event.preventDefault();
+		});
+		wrapper.addEventListener("drop", (event) => {
+			event.preventDefault();
+			dragCounter = 0;
+			if (this.dropOverlay) this.dropOverlay.style.display = "none";
+			const files = Array.from(event.dataTransfer?.files ?? []);
+			if (files.length > 0) {
+				this.emitter.emit("toolbar-drop", files);
+				this.config.onDrop?.(files);
+			}
+		});
+	}
+	handleSend() {
+		const content = (this.textareaEl?.value ?? "").trim();
+		if (!content) return;
+		const mentions = this.mentionEngine.parseMentions(content);
+		this.emitter.emit("send", content, mentions);
+		this.config.onSend?.(content, mentions);
+		if (this.config.clearInputOnSend !== false) this.clearInput();
+		this.mentionEngine.resetSelected();
+	}
+	insertMention(member) {
+		if (!this.textareaEl) return;
+		const state = this.mentionEngine.getState();
+		const text = this.textareaEl.value;
+		const pos = this.textareaEl.selectionStart;
+		const insertText = this.mentionEngine.getInsertText(member);
+		const before = text.slice(0, state.triggerPosition);
+		const after = text.slice(pos);
+		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);
+		this.textareaEl.focus();
+		this.autoResize();
+		this.updateSendButtonState();
+		this.config.onInputChange?.(this.textareaEl.value);
+	}
+	insertTextAtCursor(text) {
+		if (!this.textareaEl) return;
+		const current = this.textareaEl.value;
+		const start = this.textareaEl.selectionStart;
+		const end = this.textareaEl.selectionEnd;
+		this.textareaEl.value = this.limitInput(current.slice(0, start) + text + current.slice(end));
+		const nextCursor = Math.min(start + text.length, this.textareaEl.value.length);
+		this.textareaEl.setSelectionRange(nextCursor, nextCursor);
+		this.autoResize();
+		this.updateSendButtonState();
+		this.config.onInputChange?.(this.textareaEl.value);
+	}
+	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`;
+	}
+	updateSendButtonState() {
+		if (!this.sendBtn) return;
+		this.sendBtn.disabled = !this.getInputContent().trim();
+	}
+	renderLoadMoreButton() {
+		this.loadMoreEl = this.el("div", `${this.prefix}-load-more`);
+		this.loadMoreEl.textContent = this.config.loadMoreText ?? "加载更多";
+		this.loadMoreEl.addEventListener("click", () => {
+			if (this.loadingMore) return;
+			this.setLoadingMore(true);
+			this.emitter.emit("load-more");
+			Promise.resolve(this.config.onLoadMore?.()).finally(() => {
+				this.setLoadingMore(false);
+			});
+		});
+		this.messageListEl.appendChild(this.loadMoreEl);
+	}
+	renderTimeDivider(timestamp) {
+		this.messageListEl.appendChild(this.createTimeDivider(timestamp));
+	}
+	createTimeDivider(timestamp) {
+		const divider = this.el("div", `${this.prefix}-time-divider`);
+		const span = document.createElement("span");
+		span.textContent = this.formatTime(timestamp);
+		divider.appendChild(span);
+		return divider;
+	}
+	renderMessageRow(message) {
+		this.messageListEl.appendChild(this.createMessageRow(message));
+	}
+	createMessageRow(message) {
+		const p = this.prefix;
+		if (message.type === "system") {
+			const row2 = this.el("div", cx(`${p}-message-row`, `${p}-message-row--system`));
+			row2.dataset.msgId = message.id;
+			row2.dataset.timestamp = String(message.timestamp);
+			const system = this.el("div", `${p}-system-message`);
+			system.textContent = message.content ?? "";
+			row2.appendChild(system);
+			return row2;
+		}
+		const isOutgoing = message.direction === "outgoing";
+		const row = this.el("div", cx(`${p}-message-row`, isOutgoing && `${p}-message-row--outgoing`));
+		row.dataset.msgId = message.id;
+		row.dataset.timestamp = String(message.timestamp);
+		if (this.config.showAvatar !== false) row.appendChild(this.createAvatar(message.sender.nickname, message.sender.avatar));
+		const body = this.el("div", `${p}-message-body`);
+		if (this.config.showNickname !== false && !isOutgoing) {
+			const nickname = this.el("div", `${p}-nickname`);
+			nickname.textContent = message.sender.nickname;
+			body.appendChild(nickname);
+		}
+		body.appendChild(this.createBubble(message, isOutgoing));
+		body.appendChild(this.createMessageFooter(message, isOutgoing));
+		row.appendChild(body);
+		row.addEventListener("click", () => {
+			this.emitter.emit("message-click", message);
+			this.config.onMessageClick?.(message);
+		});
+		return row;
+	}
+	createAvatar(name, avatarUrl) {
+		const avatar = this.el("div", `${this.prefix}-avatar`);
+		if (avatarUrl) {
+			const img = document.createElement("img");
+			img.src = avatarUrl;
+			img.alt = name;
+			avatar.appendChild(img);
+		} else avatar.textContent = name[0]?.toUpperCase() ?? "";
+		return avatar;
+	}
+	createMessageFooter(message, isOutgoing) {
+		const footer = this.el("div", `${this.prefix}-message-footer`);
+		if (this.config.showTimestamp !== false) {
+			const time = this.el("span", `${this.prefix}-timestamp`);
+			time.textContent = this.formatShortTime(message.timestamp);
+			footer.appendChild(time);
+		}
+		if (this.config.showStatus !== false && isOutgoing && message.status) {
+			const status = this.el("span", cx(`${this.prefix}-status`, `${this.prefix}-status--${message.status}`));
+			status.textContent = STATUS_MAP[message.status] ?? "";
+			if (message.status === "failed") status.addEventListener("click", (event) => {
+				event.stopPropagation();
+				this.emitter.emit("message-retry", message);
+			});
+			footer.appendChild(status);
+		}
+		return footer;
+	}
+	createBubble(message, isOutgoing) {
+		const p = this.prefix;
+		const dirClass = isOutgoing ? `${p}-bubble--outgoing` : `${p}-bubble--incoming`;
+		if (message.revoked) {
+			const bubble = this.el("div", cx(`${p}-bubble`, dirClass, `${p}-bubble--revoked`));
+			bubble.textContent = "消息已撤回";
+			return bubble;
+		}
+		switch (message.type) {
+			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;
+					img.alt = message.content ?? "";
+					if (message.image.width) img.width = Math.min(message.image.width, 240);
+					bubble.appendChild(img);
+				}
+				return bubble;
+			}
+			case "file": {
+				const bubble = this.el("div", cx(`${p}-bubble`, dirClass, `${p}-bubble--file`));
+				const icon = this.el("div", `${p}-file-icon`);
+				icon.innerHTML = FILE_ICON;
+				bubble.appendChild(icon);
+				const info = this.el("div", `${p}-file-info`);
+				const name = this.el("div", `${p}-file-name`);
+				name.textContent = message.file?.name ?? "file";
+				info.appendChild(name);
+				if (message.file?.size) {
+					const size = this.el("div", `${p}-file-size`);
+					size.textContent = this.formatFileSize(message.file.size);
+					info.appendChild(size);
+				}
+				bubble.appendChild(info);
+				return bubble;
+			}
+			case "custom": {
+				const bubble = this.el("div", cx(`${p}-bubble`, dirClass));
+				if (message.customHtml) bubble.innerHTML = 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);
+				return bubble;
+			}
+		}
+	}
+	renderTextContent(content, mentions) {
+		let html = this.escapeHtml(content);
+		if (mentions?.length) for (const mention of mentions) {
+			const tag = `<span class="${this.prefix}-mention-tag" data-mention-id="${this.escapeAttr(mention.id)}">@${this.escapeHtml(mention.name)}</span>`;
+			html = html.replace(new RegExp(`@${this.escapeRegex(mention.name)}`, "g"), tag);
+		}
+		return html.replace(/(https?:\/\/[^\s<]+)/g, `<a class="${this.prefix}-link" href="$1" target="_blank" rel="noopener noreferrer">$1</a>`);
+	}
+	renderEmpty() {
+		if (this.messageListEl.querySelector(`.${this.prefix}-empty`)) return;
+		const empty = this.el("div", `${this.prefix}-empty`);
+		empty.textContent = "暂无消息";
+		this.messageListEl.appendChild(empty);
+	}
+	removeEmpty() {
+		this.messageListEl.querySelector(`.${this.prefix}-empty`)?.remove();
+	}
+	el(tag, className) {
+		const el = document.createElement(tag);
+		el.className = className;
+		return el;
+	}
+	getMessageElements() {
+		return Array.from(this.messageListEl.querySelectorAll(`.${this.prefix}-message-row`));
+	}
+	formatTime(timestamp) {
+		if (this.config.formatTime) return this.config.formatTime(timestamp);
+		const date = new Date(timestamp);
+		const now = /* @__PURE__ */ new Date();
+		if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString("zh-CN", {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+		return date.toLocaleDateString("zh-CN", {
+			month: "2-digit",
+			day: "2-digit",
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	}
+	formatShortTime(timestamp) {
+		return new Date(timestamp).toLocaleTimeString("zh-CN", {
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	}
+	formatFileSize(bytes) {
+		if (bytes < 1024) return `${bytes} B`;
+		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+		return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	}
+	limitInput(content) {
+		const max = this.config.maxInputLength;
+		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");
+		div.textContent = str;
+		return div.innerHTML;
+	}
+	escapeAttr(str) {
+		return str.replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+	}
+	escapeRegex(str) {
+		return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+	}
+};
+//#endregion
+export { DOMRenderer };
+/*! End of @composy/chat-core | Powered by @composy/builder */
+//# sourceMappingURL=dom-renderer.js.map