@composy/chat-core 0.0.1

package/dist/index.min.js

@@ -0,0 +1,1868 @@
+/*!
+* ***********************************
+* @composy/chat-core v0.0.1       *
+* Built with rollup               *
+* Build time: 2024-08-17 11:30:32 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+(function(global, factory) {
+	typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.LDesignChat = {}));
+})(this, function(exports) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	//#region src/core/event-emitter.ts
+	var EventEmitter = class {
+		constructor() {
+			this.listeners = /* @__PURE__ */ new Map();
+		}
+		/**
+		* 注册事件监听器
+		* @param event - 要监听的事件名称
+		* @param handler - 事件触发时执行的回调函数
+		* @returns 返回一个取消订阅的函数，调用即可移除该监听器
+		*/
+		on(event, handler) {
+			if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
+			this.listeners.get(event).add(handler);
+			return () => this.off(event, handler);
+		}
+		/**
+		* 移除指定事件的某个监听器
+		* @param event - 事件名称
+		* @param handler - 要移除的处理函数引用（必须与注册时为同一函数引用）
+		*/
+		off(event, handler) {
+			this.listeners.get(event)?.delete(handler);
+		}
+		/**
+		* 触发（发射）指定事件，依次调用所有已注册的监听器
+		* @param event - 要触发的事件名称
+		* @param args - 传递给监听器函数的参数列表（剩余参数语法）
+		*/
+		emit(event, ...args) {
+			this.listeners.get(event)?.forEach((handler) => {
+				try {
+					handler(...args);
+				} catch (err) {
+					console.error(`[Chat] Event handler error for "${event}":`, err);
+				}
+			});
+		}
+		/**
+		* 注册一次性事件监听器（触发一次后自动移除）
+		* @param event - 要监听的事件名称
+		* @param handler - 事件触发时执行的回调函数
+		* @returns 返回取消订阅的函数，可在触发前手动取消
+		*/
+		once(event, handler) {
+			const wrapper = (...args) => {
+				this.off(event, wrapper);
+				handler(...args);
+			};
+			return this.on(event, wrapper);
+		}
+		/**
+		* 批量移除事件监听器
+		* @param event - 可选的事件名称
+		*   - 若传入事件名，则只移除该事件的所有监听器
+		*   - 若不传参数，则清空所有事件的所有监听器
+		*/
+		removeAll(event) {
+			if (event) this.listeners.delete(event);
+			else this.listeners.clear();
+		}
+	};
+	//#endregion
+	//#region src/core/chat-manager.ts
+	var ChatManager = class {
+		constructor(emitter, initialMessages) {
+			this.messages = [];
+			this.emitter = emitter;
+			if (initialMessages?.length) this.messages = [...initialMessages];
+		}
+		/** 获取所有消息 */
+		getMessages() {
+			return [...this.messages];
+		}
+		/** 根据 ID 获取消息 */
+		getMessage(id) {
+			return this.messages.find((m) => m.id === id);
+		}
+		/** 添加消息（末尾追加） */
+		addMessage(message) {
+			this.messages.push(message);
+			this.emitter.emit("message-added", message);
+			this.emitter.emit("messages-changed", this.getMessages());
+		}
+		/** 在顶部批量插入消息（用于加载更多） */
+		prependMessages(messages) {
+			this.messages.unshift(...messages);
+			this.emitter.emit("messages-prepended", messages);
+			this.emitter.emit("messages-changed", this.getMessages());
+		}
+		/** 更新消息 */
+		updateMessage(id, updates) {
+			const index = this.messages.findIndex((m) => m.id === id);
+			if (index === -1) return;
+			this.messages[index] = {
+				...this.messages[index],
+				...updates
+			};
+			this.emitter.emit("message-updated", this.messages[index]);
+			this.emitter.emit("messages-changed", this.getMessages());
+		}
+		/** 删除消息 */
+		removeMessage(id) {
+			const index = this.messages.findIndex((m) => m.id === id);
+			if (index === -1) return;
+			const removed = this.messages.splice(index, 1)[0];
+			this.emitter.emit("message-removed", removed);
+			this.emitter.emit("messages-changed", this.getMessages());
+		}
+		/** 替换全部消息 */
+		setMessages(messages) {
+			this.messages = [...messages];
+			this.emitter.emit("messages-changed", this.getMessages());
+		}
+		/** 清空所有消息 */
+		clearMessages() {
+			this.messages = [];
+			this.emitter.emit("messages-changed", []);
+		}
+		/** 追加流式消息内容 */
+		appendMessageContent(id, chunk) {
+			const index = this.messages.findIndex((m) => m.id === id);
+			if (index === -1) return;
+			const msg = this.messages[index];
+			this.messages[index] = {
+				...msg,
+				content: (msg.content ?? "") + chunk
+			};
+			this.emitter.emit("message-content-appended", id, this.messages[index].content);
+			this.emitter.emit("messages-changed", this.getMessages());
+		}
+		/** 完成流式消息 */
+		finishStreaming(id) {
+			const index = this.messages.findIndex((m) => m.id === id);
+			if (index === -1) return;
+			this.messages[index] = {
+				...this.messages[index],
+				streaming: false
+			};
+			this.emitter.emit("message-updated", this.messages[index]);
+			this.emitter.emit("messages-changed", this.getMessages());
+		}
+	};
+	//#endregion
+	//#region src/core/mention-engine.ts
+	var MentionEngine = class {
+		constructor(emitter, members) {
+			this.members = [];
+			this.state = {
+				active: false,
+				query: "",
+				filtered: [],
+				activeIndex: 0,
+				triggerPosition: -1
+			};
+			this.selectedMentions = [];
+			this.emitter = emitter;
+			if (members) this.members = [...members];
+		}
+		getState() {
+			return {
+				...this.state,
+				filtered: [...this.state.filtered]
+			};
+		}
+		getSelectedMentions() {
+			return [...this.selectedMentions];
+		}
+		setMembers(members) {
+			this.members = [...members];
+			if (this.state.active) this.filter(this.state.query);
+		}
+		handleInput(text, cursorPos) {
+			const beforeCursor = text.slice(0, cursorPos);
+			const atIndex = beforeCursor.lastIndexOf("@");
+			if (atIndex === -1) {
+				this.deactivate();
+				return;
+			}
+			if (atIndex > 0 && !/\s/.test(beforeCursor[atIndex - 1])) {
+				this.deactivate();
+				return;
+			}
+			const query = beforeCursor.slice(atIndex + 1);
+			if (/[^\S\r\n]/.test(query)) {
+				this.deactivate();
+				return;
+			}
+			this.state.active = true;
+			this.state.triggerPosition = atIndex;
+			this.filter(query);
+		}
+		moveUp() {
+			if (!this.state.active || this.state.filtered.length === 0) return;
+			this.state.activeIndex = (this.state.activeIndex - 1 + this.state.filtered.length) % this.state.filtered.length;
+			this.emitter.emit("mention-active-change", this.state.activeIndex);
+		}
+		moveDown() {
+			if (!this.state.active || this.state.filtered.length === 0) return;
+			this.state.activeIndex = (this.state.activeIndex + 1) % this.state.filtered.length;
+			this.emitter.emit("mention-active-change", this.state.activeIndex);
+		}
+		selectCurrent() {
+			if (!this.state.active || this.state.filtered.length === 0) return null;
+			return this.select(this.state.activeIndex);
+		}
+		select(index) {
+			if (index < 0 || index >= this.state.filtered.length) return null;
+			const member = this.state.filtered[index];
+			if (!this.selectedMentions.find((m) => m.id === member.id)) this.selectedMentions.push(member);
+			this.emitter.emit("mention-select", member);
+			this.deactivate();
+			return member;
+		}
+		deactivate() {
+			if (!this.state.active) return;
+			this.state = {
+				active: false,
+				query: "",
+				filtered: [],
+				activeIndex: 0,
+				triggerPosition: -1
+			};
+			this.emitter.emit("mention-deactivate");
+		}
+		parseMentions(text) {
+			const mentions = [];
+			const sortedMembers = [...this.members].sort((a, b) => b.name.length - a.name.length);
+			for (const member of sortedMembers) if (new RegExp(`(^|\\s)@${this.escapeRegex(member.name)}(?=\\s|$|[\uFF0C\u3002\uFF01\uFF1F,.!?])`, "u").test(text) && !mentions.find((m) => m.id === member.id)) mentions.push(member);
+			return mentions;
+		}
+		resetSelected() {
+			this.selectedMentions = [];
+		}
+		getInsertText(member) {
+			return `@${member.name} `;
+		}
+		filter(query) {
+			const normalizedQuery = query.trim().toLowerCase();
+			this.state.query = query;
+			this.state.filtered = this.members.filter((member) => member.name.toLowerCase().includes(normalizedQuery) || member.id.toLowerCase().includes(normalizedQuery));
+			this.state.activeIndex = 0;
+			this.emitter.emit("mention-filter", this.getState());
+		}
+		escapeRegex(str) {
+			return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		}
+	};
+	//#endregion
+	//#region src/theme/tokens.ts
+	const lightTokens = {
+		bgPrimary: "var(--color-gray-50)",
+		bgSecondary: "var(--color-gray-100)",
+		bgBubbleOutgoing: "var(--color-primary-default)",
+		bgBubbleIncoming: "var(--color-gray-100)",
+		bgInput: "var(--color-gray-50)",
+		bgMention: "var(--color-gray-50)",
+		bgMentionHover: "var(--color-primary-50)",
+		bgMentionActive: "var(--color-primary-100)",
+		bgLoadMore: "var(--color-gray-100)",
+		bgSystemMessage: "var(--color-gray-100)",
+		bgDropOverlay: "color-mix(in srgb, var(--color-primary-default) 10%, var(--color-gray-50))",
+		bgDangerSoft: "color-mix(in srgb, var(--color-danger-default) 12%, var(--color-gray-50))",
+		textPrimary: "var(--color-gray-900)",
+		textSecondary: "var(--color-gray-600)",
+		textBubbleOutgoing: "var(--color-gray-50)",
+		textBubbleIncoming: "var(--color-gray-900)",
+		textMention: "var(--color-gray-900)",
+		textMentionTag: "var(--color-primary-default)",
+		textTimestamp: "var(--color-gray-500)",
+		textSystem: "var(--color-gray-600)",
+		textPlaceholder: "var(--color-gray-400)",
+		borderPrimary: "var(--color-gray-200)",
+		borderInput: "var(--color-gray-300)",
+		borderInputFocus: "var(--color-primary-default)",
+		borderMention: "var(--color-gray-200)",
+		colorSending: "var(--color-gray-400)",
+		colorSent: "var(--color-gray-500)",
+		colorDelivered: "var(--color-primary-default)",
+		colorRead: "var(--color-success-default)",
+		colorFailed: "var(--color-danger-default)",
+		colorLink: "var(--color-primary-default)",
+		shadowPanel: "var(--size-shadow-2)",
+		shadowMention: "var(--size-shadow-4)",
+		avatarBg: "var(--color-primary-default)",
+		avatarText: "var(--color-gray-50)",
+		btnPrimaryBg: "var(--color-primary-default)",
+		btnPrimaryText: "var(--color-gray-50)",
+		btnPrimaryHover: "var(--color-primary-hover)",
+		scrollbarThumb: "var(--color-gray-300)",
+		scrollbarTrack: "var(--color-gray-100)",
+		bgToolbar: "var(--color-gray-100)",
+		borderToolbar: "var(--color-gray-200)",
+		toolbarIconColor: "var(--color-gray-600)",
+		toolbarIconHover: "var(--color-primary-default)",
+		toolbarVoiceActive: "var(--color-danger-default)"
+	};
+	const darkTokens = {
+		bgPrimary: "var(--color-gray-900)",
+		bgSecondary: "var(--color-gray-800)",
+		bgBubbleOutgoing: "var(--color-primary-default)",
+		bgBubbleIncoming: "var(--color-gray-800)",
+		bgInput: "var(--color-gray-900)",
+		bgMention: "var(--color-gray-900)",
+		bgMentionHover: "var(--color-gray-800)",
+		bgMentionActive: "var(--color-primary-900)",
+		bgLoadMore: "var(--color-gray-800)",
+		bgSystemMessage: "var(--color-gray-800)",
+		bgDropOverlay: "color-mix(in srgb, var(--color-primary-default) 16%, var(--color-gray-900))",
+		bgDangerSoft: "color-mix(in srgb, var(--color-danger-default) 18%, var(--color-gray-900))",
+		textPrimary: "var(--color-gray-50)",
+		textSecondary: "var(--color-gray-300)",
+		textBubbleOutgoing: "var(--color-gray-50)",
+		textBubbleIncoming: "var(--color-gray-50)",
+		textMention: "var(--color-gray-50)",
+		textMentionTag: "var(--color-primary-300)",
+		textTimestamp: "var(--color-gray-400)",
+		textSystem: "var(--color-gray-300)",
+		textPlaceholder: "var(--color-gray-500)",
+		borderPrimary: "var(--color-gray-700)",
+		borderInput: "var(--color-gray-700)",
+		borderInputFocus: "var(--color-primary-default)",
+		borderMention: "var(--color-gray-700)",
+		colorSending: "var(--color-gray-500)",
+		colorSent: "var(--color-gray-400)",
+		colorDelivered: "var(--color-primary-300)",
+		colorRead: "var(--color-success-default)",
+		colorFailed: "var(--color-danger-default)",
+		colorLink: "var(--color-primary-300)",
+		shadowPanel: "var(--size-shadow-3)",
+		shadowMention: "var(--size-shadow-6)",
+		avatarBg: "var(--color-primary-default)",
+		avatarText: "var(--color-gray-50)",
+		btnPrimaryBg: "var(--color-primary-default)",
+		btnPrimaryText: "var(--color-gray-50)",
+		btnPrimaryHover: "var(--color-primary-hover)",
+		scrollbarThumb: "var(--color-gray-700)",
+		scrollbarTrack: "var(--color-gray-800)",
+		bgToolbar: "var(--color-gray-800)",
+		borderToolbar: "var(--color-gray-700)",
+		toolbarIconColor: "var(--color-gray-300)",
+		toolbarIconHover: "var(--color-primary-300)",
+		toolbarVoiceActive: "var(--color-danger-default)"
+	};
+	//#endregion
+	//#region src/theme/theme-manager.ts
+	var ThemeManager = class {
+		constructor(emitter, mode) {
+			this.mode = "light";
+			this.mediaQuery = null;
+			this.mediaHandler = null;
+			this.emitter = emitter;
+			if (mode) this.setTheme(mode);
+		}
+		/** 获取当前模式 */
+		getMode() {
+			return this.mode;
+		}
+		/** 获取当前实际主题（auto 时解析为 light/dark） */
+		getResolvedTheme() {
+			if (this.mode === "auto") return this.getSystemTheme();
+			return this.mode;
+		}
+		/** 获取当前主题令牌 */
+		getTokens() {
+			return this.getResolvedTheme() === "dark" ? darkTokens : lightTokens;
+		}
+		/** 设置主题 */
+		setTheme(mode) {
+			this.cleanupMediaListener();
+			this.mode = mode;
+			if (mode === "auto") this.setupMediaListener();
+			this.emitter.emit("theme-change", this.getResolvedTheme(), this.getTokens());
+		}
+		/** 获取系统主题偏好 */
+		getSystemTheme() {
+			if (typeof window === "undefined") return "light";
+			return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		}
+		/** 监听系统主题变化 */
+		setupMediaListener() {
+			if (typeof window === "undefined") return;
+			this.mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+			this.mediaHandler = () => {
+				this.emitter.emit("theme-change", this.getResolvedTheme(), this.getTokens());
+			};
+			this.mediaQuery.addEventListener("change", this.mediaHandler);
+		}
+		/** 清理监听器 */
+		cleanupMediaListener() {
+			if (this.mediaQuery && this.mediaHandler) {
+				this.mediaQuery.removeEventListener("change", this.mediaHandler);
+				this.mediaQuery = null;
+				this.mediaHandler = null;
+			}
+		}
+		/** 销毁 */
+		destroy() {
+			this.cleanupMediaListener();
+		}
+	};
+	//#endregion
+	//#region src/constants/dom.ts
+	const DEFAULT_CLASS_PREFIX = "ldesign-chat";
+	const COMPONENT_CSS_VAR_PREFIX = "--ldesign-chat";
+	const STYLE_ELEMENT_ID = "ldesign-chat-styles";
+	function normalizeClassPrefix(prefix) {
+		const trimmed = prefix?.trim();
+		if (!trimmed) return DEFAULT_CLASS_PREFIX;
+		if (trimmed.startsWith("ldesign-")) return trimmed;
+		return `ldesign-${trimmed.replace(/^-+/, "")}`;
+	}
+	function getStyleElementId(prefix = DEFAULT_CLASS_PREFIX) {
+		const normalized = normalizeClassPrefix(prefix);
+		return normalized === "ldesign-chat" ? STYLE_ELEMENT_ID : `${normalized}-styles`;
+	}
+	function cx(...classes) {
+		return classes.filter(Boolean).join(" ");
+	}
+	//#endregion
+	//#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
+	//#region src/renderer/style-manager.ts
+	const styleRefs = /* @__PURE__ */ new Map();
+	function injectStyles(tokens, prefix = DEFAULT_CLASS_PREFIX) {
+		const normalizedPrefix = normalizeClassPrefix(prefix);
+		const styleId = getStyleElementId(normalizedPrefix);
+		styleRefs.set(styleId, (styleRefs.get(styleId) ?? 0) + 1);
+		upsertStyle(styleId, generateCSS(tokens, normalizedPrefix));
+	}
+	function updateStyles(tokens, prefix = DEFAULT_CLASS_PREFIX) {
+		const normalizedPrefix = normalizeClassPrefix(prefix);
+		upsertStyle(getStyleElementId(normalizedPrefix), generateCSS(tokens, normalizedPrefix));
+	}
+	function removeStyles(prefix = DEFAULT_CLASS_PREFIX) {
+		const styleId = getStyleElementId(prefix);
+		const refs = styleRefs.get(styleId) ?? 0;
+		if (refs > 1) {
+			styleRefs.set(styleId, refs - 1);
+			return;
+		}
+		styleRefs.delete(styleId);
+		document.getElementById(styleId)?.remove();
+	}
+	function cls(prefix, ...parts) {
+		const normalizedPrefix = normalizeClassPrefix(prefix);
+		return parts.map((part) => `${normalizedPrefix}-${part}`).join(" ");
+	}
+	const clsx = cx;
+	function upsertStyle(styleId, cssText) {
+		let style = document.getElementById(styleId);
+		if (!style) {
+			style = document.createElement("style");
+			style.id = styleId;
+			style.dataset.ldesignChat = "true";
+			document.head.appendChild(style);
+		}
+		style.textContent = cssText;
+	}
+	function tokenVars(t) {
+		const vars = {
+			bgPrimary: t.bgPrimary,
+			bgSecondary: t.bgSecondary,
+			bgBubbleOutgoing: t.bgBubbleOutgoing,
+			bgBubbleIncoming: t.bgBubbleIncoming,
+			bgInput: t.bgInput,
+			bgMention: t.bgMention,
+			bgMentionHover: t.bgMentionHover,
+			bgMentionActive: t.bgMentionActive,
+			bgLoadMore: t.bgLoadMore,
+			bgSystemMessage: t.bgSystemMessage,
+			bgDropOverlay: t.bgDropOverlay,
+			bgDangerSoft: t.bgDangerSoft,
+			textPrimary: t.textPrimary,
+			textSecondary: t.textSecondary,
+			textBubbleOutgoing: t.textBubbleOutgoing,
+			textBubbleIncoming: t.textBubbleIncoming,
+			textMention: t.textMention,
+			textMentionTag: t.textMentionTag,
+			textTimestamp: t.textTimestamp,
+			textSystem: t.textSystem,
+			textPlaceholder: t.textPlaceholder,
+			borderPrimary: t.borderPrimary,
+			borderInput: t.borderInput,
+			borderInputFocus: t.borderInputFocus,
+			borderMention: t.borderMention,
+			colorSending: t.colorSending,
+			colorSent: t.colorSent,
+			colorDelivered: t.colorDelivered,
+			colorRead: t.colorRead,
+			colorFailed: t.colorFailed,
+			colorLink: t.colorLink,
+			shadowPanel: t.shadowPanel,
+			shadowMention: t.shadowMention,
+			avatarBg: t.avatarBg,
+			avatarText: t.avatarText,
+			btnPrimaryBg: t.btnPrimaryBg,
+			btnPrimaryText: t.btnPrimaryText,
+			btnPrimaryHover: t.btnPrimaryHover,
+			scrollbarThumb: t.scrollbarThumb,
+			scrollbarTrack: t.scrollbarTrack,
+			bgToolbar: t.bgToolbar,
+			borderToolbar: t.borderToolbar,
+			toolbarIconColor: t.toolbarIconColor,
+			toolbarIconHover: t.toolbarIconHover,
+			toolbarVoiceActive: t.toolbarVoiceActive
+		};
+		return Object.entries(vars).map(([key, value]) => `  ${COMPONENT_CSS_VAR_PREFIX}-${toKebab(key)}: ${value};`).join("\n");
+	}
+	function sizeVars() {
+		return `
+  ${COMPONENT_CSS_VAR_PREFIX}-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+  ${COMPONENT_CSS_VAR_PREFIX}-font-size: var(--size-font-base);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-size-sm: var(--size-font-sm);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-size-xs: var(--size-font-xs);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-size-lg: var(--size-font-lg);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-weight-regular: var(--size-font-weight-regular);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-weight-medium: var(--size-font-weight-medium);
+  ${COMPONENT_CSS_VAR_PREFIX}-font-weight-semibold: var(--size-font-weight-semibold);
+  ${COMPONENT_CSS_VAR_PREFIX}-line-height: var(--size-line-normal);
+  ${COMPONENT_CSS_VAR_PREFIX}-line-height-bubble: var(--size-line-relaxed);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-1: var(--size-1);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-2: var(--size-2);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-3: var(--size-3);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-4: var(--size-4);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-5: var(--size-5);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-6: var(--size-6);
+  ${COMPONENT_CSS_VAR_PREFIX}-space-8: var(--size-8);
+  ${COMPONENT_CSS_VAR_PREFIX}-avatar-size: var(--size-11);
+  ${COMPONENT_CSS_VAR_PREFIX}-mention-avatar-size: var(--size-9);
+  ${COMPONENT_CSS_VAR_PREFIX}-toolbar-button-size: var(--size-9);
+  ${COMPONENT_CSS_VAR_PREFIX}-input-button-size: var(--size-11);
+  ${COMPONENT_CSS_VAR_PREFIX}-file-icon-size: var(--size-12);
+  ${COMPONENT_CSS_VAR_PREFIX}-image-max-size: calc(var(--size-13) * 5);
+  ${COMPONENT_CSS_VAR_PREFIX}-panel-max-height: calc(var(--size-24) + var(--size-4));
+  ${COMPONENT_CSS_VAR_PREFIX}-textarea-min-height: var(--size-11);
+  ${COMPONENT_CSS_VAR_PREFIX}-textarea-max-height: calc(var(--size-12) * 3);
+  ${COMPONENT_CSS_VAR_PREFIX}-message-max-width: 65%;
+  ${COMPONENT_CSS_VAR_PREFIX}-system-message-max-width: 80%;
+  ${COMPONENT_CSS_VAR_PREFIX}-file-bubble-min-width: calc(var(--size-24) + var(--size-4));
+  ${COMPONENT_CSS_VAR_PREFIX}-border-width: var(--size-border-width-thin);
+  ${COMPONENT_CSS_VAR_PREFIX}-border-width-drop: var(--size-border-width-medium);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-xs: var(--size-radius-sm);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-sm: var(--size-radius-md);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-md: var(--size-radius-lg);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-lg: var(--size-radius-xl);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-pill: var(--size-radius-full);
+  ${COMPONENT_CSS_VAR_PREFIX}-radius-circle: var(--size-radius-circle);
+  ${COMPONENT_CSS_VAR_PREFIX}-transition-fast: var(--size-duration-fast) var(--size-ease-out);
+  ${COMPONENT_CSS_VAR_PREFIX}-transition-normal: var(--size-duration-normal) var(--size-ease-out);
+  ${COMPONENT_CSS_VAR_PREFIX}-z-overlay: var(--size-z-dropdown);
+  ${COMPONENT_CSS_VAR_PREFIX}-z-mention: var(--size-z-popover);
+`;
+	}
+	function generateCSS(tokens, p) {
+		return `
+/* @composy/chat-core styles */
+.${p}-container,
+.${p}-container * {
+  box-sizing: border-box;
+}
+
+.${p}-container {
+${tokenVars(tokens)}
+${sizeVars()}
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  background: ${v("bg-primary")};
+  color: ${v("text-primary")};
+  font-family: ${v("font-family")};
+  font-size: ${v("font-size")};
+  line-height: ${v("line-height")};
+  border: ${v("border-width")} solid ${v("border-primary")};
+  border-radius: ${v("radius-md")};
+  box-shadow: ${v("shadow-panel")};
+}
+
+.${p}-message-list {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: ${v("space-6")};
+  scroll-behavior: smooth;
+}
+
+.${p}-message-list::-webkit-scrollbar {
+  width: var(--size-3);
+}
+
+.${p}-message-list::-webkit-scrollbar-thumb {
+  background: ${v("scrollbar-thumb")};
+  border-radius: ${v("radius-pill")};
+}
+
+.${p}-message-list::-webkit-scrollbar-track {
+  background: ${v("scrollbar-track")};
+}
+
+.${p}-load-more {
+  margin-bottom: ${v("space-5")};
+  padding: ${v("space-5")};
+  text-align: center;
+  color: ${v("color-link")};
+  font-size: ${v("font-size-sm")};
+  background: ${v("bg-load-more")};
+  border-radius: ${v("radius-sm")};
+  cursor: pointer;
+  user-select: none;
+  transition: opacity ${v("transition-fast")}, background ${v("transition-fast")};
+}
+
+.${p}-load-more:hover {
+  background: ${v("bg-mention-hover")};
+}
+
+.${p}-load-more--loading {
+  cursor: default;
+  opacity: .6;
+}
+
+.${p}-time-divider {
+  padding: ${v("space-4")} 0;
+  color: ${v("text-timestamp")};
+  font-size: ${v("font-size-sm")};
+  text-align: center;
+  user-select: none;
+}
+
+.${p}-time-divider span {
+  padding: ${v("space-1")} ${v("space-5")};
+  background: ${v("bg-secondary")};
+  border-radius: ${v("radius-pill")};
+}
+
+.${p}-message-row {
+  display: flex;
+  align-items: flex-start;
+  gap: ${v("space-4")};
+  margin-bottom: ${v("space-5")};
+}
+
+.${p}-message-row--outgoing {
+  flex-direction: row-reverse;
+}
+
+.${p}-message-row--system {
+  justify-content: center;
+}
+
+.${p}-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("avatar-size")};
+  height: ${v("avatar-size")};
+  overflow: hidden;
+  flex-shrink: 0;
+  color: ${v("avatar-text")};
+  background: ${v("avatar-bg")};
+  border-radius: ${v("radius-circle")};
+  font-size: ${v("font-size")};
+  font-weight: ${v("font-weight-semibold")};
+}
+
+.${p}-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.${p}-message-body {
+  display: flex;
+  flex-direction: column;
+  max-width: ${v("message-max-width")};
+  min-width: 0;
+}
+
+.${p}-message-row--outgoing .${p}-message-body {
+  align-items: flex-end;
+}
+
+.${p}-nickname {
+  margin-bottom: ${v("space-2")};
+  padding: 0 ${v("space-2")};
+  color: ${v("text-secondary")};
+  font-size: ${v("font-size-sm")};
+}
+
+.${p}-bubble {
+  position: relative;
+  max-width: 100%;
+  padding: ${v("space-5")} ${v("space-6")};
+  border-radius: ${v("radius-lg")};
+  word-break: break-word;
+  overflow-wrap: unknownwhere;
+  white-space: pre-wrap;
+  line-height: ${v("line-height-bubble")};
+}
+
+.${p}-bubble--incoming {
+  color: ${v("text-bubble-incoming")};
+  background: ${v("bg-bubble-incoming")};
+  border-top-left-radius: ${v("radius-xs")};
+}
+
+.${p}-bubble--outgoing {
+  color: ${v("text-bubble-outgoing")};
+  background: ${v("bg-bubble-outgoing")};
+  border-top-right-radius: ${v("radius-xs")};
+}
+
+.${p}-bubble--image {
+  padding: ${v("space-2")};
+  background: unset;
+}
+
+.${p}-bubble--image img {
+  display: block;
+  max-width: ${v("image-max-size")};
+  max-height: ${v("image-max-size")};
+  border-radius: ${v("radius-md")};
+  cursor: pointer;
+}
+
+.${p}-bubble--file {
+  display: flex;
+  align-items: center;
+  gap: ${v("space-5")};
+  min-width: ${v("file-bubble-min-width")};
+}
+
+.${p}-file-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("file-icon-size")};
+  height: ${v("file-icon-size")};
+  flex-shrink: 0;
+  background: ${v("bg-secondary")};
+  border-radius: ${v("radius-sm")};
+  font-size: ${v("font-size-lg")};
+}
+
+.${p}-file-info {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.${p}-file-name {
+  overflow: hidden;
+  font-size: ${v("font-size")};
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.${p}-file-size {
+  margin-top: ${v("space-1")};
+  color: ${v("text-secondary")};
+  font-size: ${v("font-size-sm")};
+}
+
+.${p}-system-message {
+  max-width: ${v("system-message-max-width")};
+  padding: ${v("space-2")} ${v("space-6")};
+  color: ${v("text-system")};
+  background: ${v("bg-system-message")};
+  border-radius: ${v("radius-pill")};
+  font-size: ${v("font-size-sm")};
+  text-align: center;
+}
+
+.${p}-message-footer {
+  display: flex;
+  align-items: center;
+  gap: ${v("space-3")};
+  margin-top: ${v("space-1")};
+  padding: 0 ${v("space-2")};
+}
+
+.${p}-message-row--outgoing .${p}-message-footer {
+  flex-direction: row-reverse;
+}
+
+.${p}-timestamp,
+.${p}-status {
+  font-size: ${v("font-size-xs")};
+}
+
+.${p}-timestamp {
+  color: ${v("text-timestamp")};
+}
+
+.${p}-status--sending { color: ${v("color-sending")}; }
+.${p}-status--sent { color: ${v("color-sent")}; }
+.${p}-status--delivered { color: ${v("color-delivered")}; }
+.${p}-status--read { color: ${v("color-read")}; }
+.${p}-status--failed {
+  color: ${v("color-failed")};
+  cursor: pointer;
+}
+
+.${p}-mention-tag,
+.${p}-link {
+  color: ${v("text-mention-tag")};
+  font-weight: ${v("font-weight-medium")};
+}
+
+.${p}-mention-tag {
+  cursor: pointer;
+}
+
+.${p}-mention-tag:hover,
+.${p}-link:hover {
+  text-decoration: underline;
+}
+
+.${p}-input-area {
+  display: flex;
+  align-items: flex-end;
+  gap: ${v("space-4")};
+  position: relative;
+  padding: ${v("space-5")} ${v("space-6")};
+  border-top: ${v("border-width")} solid ${v("border-primary")};
+  background: ${v("bg-input")};
+}
+
+.${p}-input-wrapper {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+}
+
+.${p}-textarea {
+  width: 100%;
+  min-height: ${v("textarea-min-height")};
+  max-height: ${v("textarea-max-height")};
+  padding: ${v("space-4")} ${v("space-5")};
+  overflow-y: auto;
+  resize: none;
+  outline: none;
+  color: ${v("text-primary")};
+  background: ${v("bg-primary")};
+  border: ${v("border-width")} solid ${v("border-input")};
+  border-radius: ${v("radius-md")};
+  font-family: inherit;
+  font-size: ${v("font-size")};
+  line-height: ${v("line-height")};
+  transition: border-color ${v("transition-fast")}, box-shadow ${v("transition-fast")};
+}
+
+.${p}-textarea:focus {
+  border-color: ${v("border-input-focus")};
+  box-shadow: 0 0 0 ${v("border-width-drop")} ${v("bg-drop-overlay")};
+}
+
+.${p}-textarea::placeholder {
+  color: ${v("text-placeholder")};
+}
+
+.${p}-send-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("input-button-size")};
+  height: ${v("input-button-size")};
+  flex-shrink: 0;
+  color: ${v("btn-primary-text")};
+  background: ${v("btn-primary-bg")};
+  border: 0;
+  border-radius: ${v("radius-md")};
+  cursor: pointer;
+  transition: background ${v("transition-fast")}, opacity ${v("transition-fast")};
+}
+
+.${p}-send-btn:hover {
+  background: ${v("btn-primary-hover")};
+}
+
+.${p}-send-btn:disabled {
+  cursor: default;
+  opacity: .5;
+}
+
+.${p}-send-btn svg {
+  width: var(--size-7);
+  height: var(--size-7);
+}
+
+.${p}-mention-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 100%;
+  z-index: ${v("z-mention")};
+  max-height: ${v("panel-max-height")};
+  margin-bottom: ${v("space-2")};
+  overflow-y: auto;
+  background: ${v("bg-mention")};
+  border: ${v("border-width")} solid ${v("border-mention")};
+  border-radius: ${v("radius-md")};
+  box-shadow: ${v("shadow-mention")};
+}
+
+.${p}-mention-item {
+  display: flex;
+  align-items: center;
+  gap: ${v("space-4")};
+  padding: ${v("space-4")} ${v("space-5")};
+  color: ${v("text-mention")};
+  cursor: pointer;
+  transition: background ${v("transition-fast")};
+}
+
+.${p}-mention-item:hover {
+  background: ${v("bg-mention-hover")};
+}
+
+.${p}-mention-item--active {
+  background: ${v("bg-mention-active")};
+}
+
+.${p}-mention-item-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("mention-avatar-size")};
+  height: ${v("mention-avatar-size")};
+  flex-shrink: 0;
+  overflow: hidden;
+  color: ${v("avatar-text")};
+  background: ${v("avatar-bg")};
+  border-radius: ${v("radius-circle")};
+  font-size: ${v("font-size-sm")};
+  font-weight: ${v("font-weight-semibold")};
+}
+
+.${p}-mention-item-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.${p}-mention-item-name {
+  font-size: ${v("font-size")};
+}
+
+.${p}-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: ${v("text-secondary")};
+  font-size: ${v("font-size")};
+}
+
+.${p}-toolbar {
+  display: flex;
+  align-items: center;
+  gap: ${v("space-1")};
+  padding: ${v("space-3")} ${v("space-4")};
+  background: ${v("bg-toolbar")};
+  border-bottom: ${v("border-width")} solid ${v("border-toolbar")};
+  border-radius: ${v("radius-md")} ${v("radius-md")} 0 0;
+}
+
+.${p}-toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${v("toolbar-button-size")};
+  height: ${v("toolbar-button-size")};
+  flex-shrink: 0;
+  padding: 0;
+  color: ${v("toolbar-icon-color")};
+  background: unset;
+  border: 0;
+  border-radius: ${v("radius-sm")};
+  cursor: pointer;
+  transition: background ${v("transition-fast")}, color ${v("transition-fast")};
+}
+
+.${p}-toolbar-btn svg {
+  width: var(--size-6);
+  height: var(--size-6);
+}
+
+.${p}-toolbar-btn:hover {
+  color: ${v("toolbar-icon-hover")};
+  background: ${v("bg-drop-overlay")};
+}
+
+.${p}-toolbar-btn--active {
+  color: ${v("toolbar-voice-active")};
+  background: ${v("bg-danger-soft")};
+}
+
+.${p}-toolbar-btn--active:hover {
+  color: ${v("toolbar-voice-active")};
+  background: ${v("bg-danger-soft")};
+}
+
+.${p}-drop-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: ${v("z-overlay")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: ${v("bg-drop-overlay")};
+  border: ${v("border-width-drop")} dashed ${v("toolbar-icon-hover")};
+  border-radius: ${v("radius-md")};
+}
+
+.${p}-drop-overlay span {
+  color: ${v("toolbar-icon-hover")};
+  font-size: ${v("font-size-sm")};
+  font-weight: ${v("font-weight-medium")};
+}
+
+@keyframes ${p}-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+.${p}-bubble--streaming::after {
+  content: '';
+  display: inline-block;
+  width: ${v("border-width-drop")};
+  height: 1em;
+  margin-left: ${v("space-1")};
+  vertical-align: text-bottom;
+  background: currentColor;
+  animation: ${p}-blink 800ms infinite;
+}
+`;
+	}
+	function v(name) {
+		return `var(${COMPONENT_CSS_VAR_PREFIX}-${name})`;
+	}
+	function toKebab(key) {
+		return key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+	}
+	//#endregion
+	//#region src/index.ts
+	const version = "0.1.0";
+	function createChat(config) {
+		const container = typeof config.container === "string" ? document.querySelector(config.container) : config.container;
+		if (!container) throw new Error(`[Chat] Container not found: ${config.container}`);
+		const prefix = normalizeClassPrefix(config.classPrefix ?? "ldesign-chat");
+		const normalizedConfig = {
+			...config,
+			classPrefix: prefix
+		};
+		const emitter = new EventEmitter();
+		const chatManager = new ChatManager(emitter, normalizedConfig.messages);
+		const mentionEngine = new MentionEngine(emitter, normalizedConfig.mentionMembers);
+		const themeManager = new ThemeManager(emitter, normalizedConfig.theme ?? "light");
+		const renderer = new DOMRenderer(container, normalizedConfig, emitter, mentionEngine);
+		injectStyles(themeManager.getTokens(), prefix);
+		renderer.init();
+		renderer.renderMessages(chatManager.getMessages());
+		requestAnimationFrame(() => {
+			renderer.scrollToBottom(false);
+		});
+		emitter.on("theme-change", (_resolved, tokens) => {
+			updateStyles(tokens, prefix);
+		});
+		emitter.on("message-added", (message) => {
+			renderer.appendMessage(message);
+			requestAnimationFrame(() => {
+				renderer.scrollToBottom(true);
+			});
+		});
+		emitter.on("messages-prepended", (messages) => {
+			renderer.prependMessages(messages);
+		});
+		emitter.on("message-updated", (message) => {
+			renderer.updateMessage(message.id, message);
+		});
+		emitter.on("message-removed", (message) => {
+			renderer.removeMessage(message.id);
+		});
+		emitter.on("message-content-appended", (id, content) => {
+			renderer.updateMessageContent(id, content);
+			requestAnimationFrame(() => {
+				renderer.scrollToBottom(false);
+			});
+		});
+		return {
+			addMessage(message) {
+				chatManager.addMessage(message);
+			},
+			prependMessages(messages) {
+				chatManager.prependMessages(messages);
+			},
+			updateMessage(id, updates) {
+				chatManager.updateMessage(id, updates);
+			},
+			removeMessage(id) {
+				chatManager.removeMessage(id);
+			},
+			setMessages(messages) {
+				chatManager.setMessages(messages);
+				renderer.renderMessages(chatManager.getMessages());
+				requestAnimationFrame(() => {
+					renderer.scrollToBottom(false);
+				});
+			},
+			clearMessages() {
+				chatManager.clearMessages();
+				renderer.renderMessages([]);
+			},
+			scrollToBottom(smooth = true) {
+				renderer.scrollToBottom(smooth);
+			},
+			setTheme(theme) {
+				themeManager.setTheme(theme);
+			},
+			setMentionMembers(members) {
+				mentionEngine.setMembers(members);
+			},
+			setLoadingMore(loading) {
+				renderer.setLoadingMore(loading);
+			},
+			focusInput() {
+				renderer.focusInput();
+			},
+			setInputContent(content) {
+				renderer.setInputContent(content);
+			},
+			getInputContent() {
+				return renderer.getInputContent();
+			},
+			clearInput() {
+				renderer.clearInput();
+			},
+			isAtBottom(threshold) {
+				return renderer.isAtBottom(threshold);
+			},
+			on(event, handler) {
+				return emitter.on(event, handler);
+			},
+			getMessages() {
+				return chatManager.getMessages();
+			},
+			getMessage(id) {
+				return chatManager.getMessage(id);
+			},
+			appendMessageContent(id, chunk) {
+				chatManager.appendMessageContent(id, chunk);
+			},
+			finishStreaming(id) {
+				chatManager.finishStreaming(id);
+			},
+			destroy() {
+				themeManager.destroy();
+				renderer.destroy();
+				emitter.removeAll();
+				removeStyles(prefix);
+			}
+		};
+	}
+	//#endregion
+	exports.COMPONENT_CSS_VAR_PREFIX = COMPONENT_CSS_VAR_PREFIX;
+	exports.ChatManager = ChatManager;
+	exports.DEFAULT_CLASS_PREFIX = DEFAULT_CLASS_PREFIX;
+	exports.DOMRenderer = DOMRenderer;
+	exports.EventEmitter = EventEmitter;
+	exports.MentionEngine = MentionEngine;
+	exports.STYLE_ELEMENT_ID = STYLE_ELEMENT_ID;
+	exports.ThemeManager = ThemeManager;
+	exports.cls = cls;
+	exports.clsx = clsx;
+	exports.createChat = createChat;
+	exports.cx = cx;
+	exports.darkTokens = darkTokens;
+	exports.getStyleElementId = getStyleElementId;
+	exports.injectStyles = injectStyles;
+	exports.lightTokens = lightTokens;
+	exports.normalizeClassPrefix = normalizeClassPrefix;
+	exports.removeStyles = removeStyles;
+	exports.updateStyles = updateStyles;
+	exports.version = version;
+});
+/*! End of @composy/chat-core | Powered by @composy/builder */
+//# sourceMappingURL=index.js.map