@composy/chat-core 0.0.1 → 0.0.2

package/dist/index.min.js

@@ -1,174 +1,377 @@
 /*!
 * ***********************************
-* @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                    *
 * ***********************************
 */
-(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 = {}));
+(function(e, t) {
+	"object" == typeof exports && "undefined" != typeof module ? t(exports) : "function" == typeof define && define.amd ? define(["exports"], t) : t((e = "undefined" != typeof globalThis ? globalThis : e || self).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();
+	const e = "ldesign-chat", t = "--ldesign-chat", n = "ldesign-chat-styles";
+	function s(t) {
+		const n = t?.trim();
+		if (!n) return e;
+		const s = n.replace(/^ldesign-/i, "").replace(/[^\w-]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+		return s ? `ldesign-${s}` : e;
+	}
+	function i(t = e) {
+		const i = s(t);
+		return "ldesign-chat" === i ? n : `${i}-styles`;
+	}
+	function r(...e) {
+		return e.filter(Boolean).join(" ");
+	}
+	function a(e) {
+		if (!e || "object" != typeof e) throw new TypeError("Chat message must be an object.");
+		if ("string" != typeof e.id || !e.id.trim()) throw new TypeError("Chat message ID must be a non-empty string.");
+		if (!Number.isFinite(e.timestamp)) throw new TypeError("Chat message timestamp must be finite.");
+		const t = e.schemaVersion ?? 1;
+		if (t > 1) throw new Error(`Unsupported chat message schema version: ${t}.`);
+		return d({
+			...e,
+			schemaVersion: 1,
+			...e.contentBlocks && { contentBlocks: o(e.contentBlocks) }
+		});
+	}
+	function o(e) {
+		const t = [];
+		for (const n of e) {
+			const e = h(n);
+			e && t.push(e);
 		}
-		/**
-		* 注册事件监听器
-		* @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);
-				}
+		return t;
+	}
+	function l(e) {
+		const t = [], n = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set();
+		for (const i of e) {
+			const e = a(i);
+			if (n.has(e.id)) throw new Error(`Duplicate chat message ID: ${e.id}`);
+			if (e.clientMessageId && s.has(e.clientMessageId)) throw new Error(`Duplicate chat client message ID: ${e.clientMessageId}`);
+			n.add(e.id), e.clientMessageId && s.add(e.clientMessageId), t.push(e);
+		}
+		return t;
+	}
+	function d(e) {
+		return {
+			...e,
+			sender: (s = e.sender, { ...s }),
+			...e.image && { image: (n = e.image, { ...n }) },
+			...e.file && { file: (t = e.file, { ...t }) },
+			...e.mentions && { mentions: e.mentions.map(p) },
+			...e.contentBlocks && { contentBlocks: e.contentBlocks.map(c) },
+			...e.customData && { customData: f(e.customData) }
+		};
+		var t, n, s;
+	}
+	function c(e) {
+		switch (e.type) {
+			case "text": return {
+				type: "text",
+				text: e.text
+			};
+			case "mention": return {
+				type: "mention",
+				id: e.id,
+				label: e.label
+			};
+			case "link": return {
+				type: "link",
+				url: e.url,
+				...e.label && { label: e.label }
+			};
+			case "code": return {
+				type: "code",
+				code: e.code,
+				...e.language && { language: e.language }
+			};
+			case "image": return {
+				type: "image",
+				src: e.src,
+				...e.alt && { alt: e.alt },
+				...void 0 !== e.width && { width: e.width },
+				...void 0 !== e.height && { height: e.height }
+			};
+			case "file": return {
+				type: "file",
+				url: e.url,
+				name: e.name,
+				...void 0 !== e.size && { size: e.size },
+				...e.mimeType && { mimeType: e.mimeType }
+			};
+			case "break": return { type: "break" };
+			case "custom": return {
+				type: "custom",
+				kind: e.kind,
+				data: f(e.data),
+				...e.fallback && { fallback: e.fallback }
+			};
+		}
+	}
+	function h(e) {
+		if (!g(e) || "string" != typeof e.type) return null;
+		switch (e.type) {
+			case "text": return "string" == typeof e.text ? {
+				type: "text",
+				text: e.text
+			} : null;
+			case "mention": return "string" == typeof e.id && "string" == typeof e.label ? {
+				type: "mention",
+				id: e.id,
+				label: e.label
+			} : null;
+			case "link": return "string" == typeof e.url ? {
+				type: "link",
+				url: e.url,
+				..."string" == typeof e.label && { label: e.label }
+			} : null;
+			case "code": return "string" == typeof e.code ? {
+				type: "code",
+				code: e.code,
+				..."string" == typeof e.language && { language: e.language }
+			} : null;
+			case "image": return "string" == typeof e.src ? {
+				type: "image",
+				src: e.src,
+				..."string" == typeof e.alt && { alt: e.alt },
+				...u(e.width) && { width: e.width },
+				...u(e.height) && { height: e.height }
+			} : null;
+			case "file": return "string" == typeof e.url && "string" == typeof e.name ? {
+				type: "file",
+				url: e.url,
+				name: e.name,
+				...u(e.size) && { size: e.size },
+				..."string" == typeof e.mimeType && { mimeType: e.mimeType }
+			} : null;
+			case "break": return { type: "break" };
+			case "custom": return "string" == typeof e.kind && g(e.data) ? {
+				type: "custom",
+				kind: e.kind,
+				data: f(e.data),
+				..."string" == typeof e.fallback && { fallback: e.fallback }
+			} : m(e);
+			default: return m(e);
+		}
+	}
+	function m(e) {
+		return "string" == typeof e.fallback ? {
+			type: "text",
+			text: e.fallback
+		} : null;
+	}
+	function g(e) {
+		return Boolean(e) && "object" == typeof e && !Array.isArray(e);
+	}
+	function u(e) {
+		return "number" == typeof e && Number.isFinite(e) && e > 0;
+	}
+	function p(e) {
+		return { ...e };
+	}
+	function f(e, t = /* @__PURE__ */ new WeakMap()) {
+		if (!e || "object" != typeof e) return e;
+		if (t.has(e)) return t.get(e);
+		if (Array.isArray(e)) {
+			const n = [];
+			return t.set(e, n), e.forEach((e) => n.push(f(e, t))), n;
+		}
+		const n = Object.getPrototypeOf(e);
+		if (n !== Object.prototype && null !== n) return e;
+		const s = {};
+		return t.set(e, s), Object.entries(e).forEach(([e, n]) => {
+			s[e] = f(n, t);
+		}), s;
+	}
+	var b = class {
+		constructor(e, t) {
+			this.messages = [], this.streams = /* @__PURE__ */ new Map(), this.emitter = e, t?.length && (this.messages = l(t));
+		}
+		getMessages() {
+			return this.messages.map(d);
+		}
+		getMessage(e) {
+			const t = this.messages.find((t) => t.id === e);
+			return t ? d(t) : void 0;
+		}
+		getMessageIdByClientMessageId(e) {
+			return this.messages.find((t) => t.clientMessageId === e)?.id;
+		}
+		addMessage(e) {
+			const t = a(e);
+			this.assertUniqueIds([t]), this.messages.push(t), this.emitAdded(t);
+		}
+		prependMessages(e) {
+			const t = l(e);
+			this.assertUniqueIds(t), this.messages.unshift(...t), this.emitter.emit("messages-prepended", t.map(d)), this.emitChanged();
+		}
+		upsertMessage(e, t = {}) {
+			const n = a({
+				...e,
+				...void 0 !== t.sequence && { sequence: t.sequence }
+			}), s = this.findMessageIndex(n);
+			if (s < 0) return this.messages.push(n), this.emitAdded(n), "added";
+			const i = this.messages[s];
+			if (Number.isFinite(n.sequence) && Number.isFinite(i.sequence) && n.sequence <= i.sequence) return "ignored";
+			const r = a({
+				...i,
+				...n,
+				id: i.id,
+				clientMessageId: n.clientMessageId ?? i.clientMessageId,
+				sequence: n.sequence ?? i.sequence
 			});
+			return this.messages[s] = r, this.emitter.emit("message-updated", d(r)), this.emitChanged(), "updated";
 		}
-		/**
-		* 注册一次性事件监听器（触发一次后自动移除）
-		* @param event - 要监听的事件名称
-		* @param handler - 事件触发时执行的回调函数
-		* @returns 返回取消订阅的函数，可在触发前手动取消
-		*/
-		once(event, handler) {
-			const wrapper = (...args) => {
-				this.off(event, wrapper);
-				handler(...args);
+		mergeMessages(e, t = {}) {
+			const n = {
+				added: 0,
+				updated: 0,
+				ignored: 0
 			};
-			return this.on(event, wrapper);
-		}
-		/**
-		* 批量移除事件监听器
-		* @param event - 可选的事件名称
-		*   - 若传入事件名，则只移除该事件的所有监听器
-		*   - 若不传参数，则清空所有事件的所有监听器
-		*/
-		removeAll(event) {
-			if (event) this.listeners.delete(event);
-			else this.listeners.clear();
+			for (const s of e) n[this.upsertMessage(s, t)] += 1;
+			return n;
+		}
+		updateMessage(e, t) {
+			const n = this.messages.findIndex((t) => t.id === e);
+			if (-1 === n) return;
+			if (void 0 !== t.id && t.id !== e) throw new Error("Chat message IDs are immutable.");
+			const s = a({
+				...this.messages[n],
+				...t,
+				id: e
+			});
+			this.assertUniqueClientMessageId(s, e), this.messages[n] = s, this.emitter.emit("message-updated", d(s)), this.emitChanged();
 		}
-	};
-	//#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];
+		markMessageStatus(e, t) {
+			this.updateMessage(e, { status: t });
 		}
-		/** 根据 ID 获取消息 */
-		getMessage(id) {
-			return this.messages.find((m) => m.id === id);
+		removeMessage(e) {
+			const t = this.messages.findIndex((t) => t.id === e);
+			if (-1 === t) return;
+			const [n] = this.messages.splice(t, 1);
+			this.streams.delete(e), this.emitter.emit("message-removed", d(n)), this.emitChanged();
 		}
-		/** 添加消息（末尾追加） */
-		addMessage(message) {
-			this.messages.push(message);
-			this.emitter.emit("message-added", message);
-			this.emitter.emit("messages-changed", this.getMessages());
+		setMessages(e) {
+			this.messages = l(e), this.streams.clear(), this.emitChanged();
 		}
-		/** 在顶部批量插入消息（用于加载更多） */
-		prependMessages(messages) {
-			this.messages.unshift(...messages);
-			this.emitter.emit("messages-prepended", messages);
-			this.emitter.emit("messages-changed", this.getMessages());
+		clearMessages() {
+			this.messages = [], this.streams.clear(), this.emitChanged();
+		}
+		beginStreaming(e, t = function() {
+			const e = globalThis.crypto;
+			return e?.randomUUID ? e.randomUUID() : `stream-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+		}()) {
+			const n = this.messages.findIndex((t) => t.id === e);
+			return -1 === n ? null : (this.streams.set(e, {
+				generation: t,
+				lastSequence: -1
+			}), this.messages[n] = a({
+				...this.messages[n],
+				streaming: !0
+			}), this.emitter.emit("message-updated", d(this.messages[n])), this.emitChanged(), t);
+		}
+		appendMessageContent(e, t, n = {}) {
+			const s = this.streams.get(e);
+			if (n.generation) {
+				if (!s || s.generation !== n.generation) return !1;
+				const e = n.sequence;
+				if (void 0 !== e && Number.isFinite(e) && e <= s.lastSequence) return !1;
+				void 0 !== e && Number.isFinite(e) && (s.lastSequence = e);
+			}
+			const i = this.messages.findIndex((t) => t.id === e);
+			if (-1 === i) return !1;
+			const r = this.messages[i];
+			return this.messages[i] = a({
+				...r,
+				content: (r.content ?? "") + t,
+				streaming: !!n.generation || r.streaming
+			}), this.emitter.emit("message-content-appended", e, this.messages[i].content, n.generation, n.sequence), this.emitChanged(), !0;
+		}
+		finishStreaming(e, t) {
+			const n = this.streams.get(e);
+			if (t && (!n || n.generation !== t)) return !1;
+			const s = this.messages.findIndex((t) => t.id === e);
+			return -1 !== s && (this.messages[s] = a({
+				...this.messages[s],
+				streaming: !1
+			}), this.streams.delete(e), this.emitter.emit("message-updated", d(this.messages[s])), this.emitChanged(), !0);
+		}
+		cancelStreaming(e, t) {
+			const n = this.streams.get(e);
+			if (t && (!n || n.generation !== t)) return !1;
+			const s = this.messages.findIndex((t) => t.id === e);
+			return -1 !== s && (this.streams.delete(e), this.messages[s] = a({
+				...this.messages[s],
+				streaming: !1
+			}), this.emitter.emit("stream-cancelled", d(this.messages[s])), this.emitter.emit("message-updated", d(this.messages[s])), this.emitChanged(), !0);
+		}
+		getStreamGeneration(e) {
+			return this.streams.get(e)?.generation;
+		}
+		findMessageIndex(e) {
+			const t = this.messages.findIndex((t) => t.id === e.id);
+			return t >= 0 ? t : e.clientMessageId ? this.messages.findIndex((t) => t.clientMessageId === e.clientMessageId) : -1;
+		}
+		assertUniqueIds(e) {
+			const t = new Set(this.messages.map((e) => e.id)), n = new Set(this.messages.flatMap((e) => e.clientMessageId ? [e.clientMessageId] : []));
+			for (const s of e) {
+				if (!s.id || t.has(s.id)) throw new Error(`Chat message ID must be non-empty and unique: ${s.id}`);
+				if (s.clientMessageId && n.has(s.clientMessageId)) throw new Error(`Chat client message ID must be unique: ${s.clientMessageId}`);
+				t.add(s.id), s.clientMessageId && n.add(s.clientMessageId);
+			}
 		}
-		/** 更新消息 */
-		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());
+		assertUniqueClientMessageId(e, t) {
+			if (e.clientMessageId && this.messages.some((n) => n.id !== t && n.clientMessageId === e.clientMessageId)) throw new Error(`Chat client message ID must be unique: ${e.clientMessageId}`);
 		}
-		/** 删除消息 */
-		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());
+		emitAdded(e) {
+			this.emitter.emit("message-added", d(e)), this.emitChanged();
 		}
-		/** 替换全部消息 */
-		setMessages(messages) {
-			this.messages = [...messages];
+		emitChanged() {
 			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());
+	};
+	var v = class {
+		constructor() {
+			this.listeners = /* @__PURE__ */ new Map();
 		}
-		/** 完成流式消息 */
-		finishStreaming(id) {
-			const index = this.messages.findIndex((m) => m.id === id);
-			if (index === -1) return;
-			this.messages[index] = {
-				...this.messages[index],
-				streaming: false
+		on(e, t) {
+			let n = this.listeners.get(e);
+			return n || (n = /* @__PURE__ */ new Set(), this.listeners.set(e, n)), n.add(t), () => this.off(e, t);
+		}
+		off(e, t) {
+			const n = this.listeners.get(e);
+			n && (n.delete(t), 0 === n.size && this.listeners.delete(e));
+		}
+		emit(e, ...t) {
+			[...this.listeners.get(e) ?? []].forEach((n) => {
+				try {
+					n(...t);
+				} catch (t) {
+					console.error(`[Chat] Event handler error for "${e}":`, t);
+				}
+			});
+		}
+		once(e, t) {
+			const n = (...s) => {
+				this.off(e, n), t(...s);
 			};
-			this.emitter.emit("message-updated", this.messages[index]);
-			this.emitter.emit("messages-changed", this.getMessages());
+			return this.on(e, n);
 		}
-	};
-	//#endregion
-	//#region src/core/mention-engine.ts
-	var MentionEngine = class {
-		constructor(emitter, members) {
-			this.members = [];
-			this.state = {
-				active: false,
+		removeAll(e) {
+			void 0 !== e ? this.listeners.delete(e) : this.listeners.clear();
+		}
+	}, y = class {
+		constructor(e, t) {
+			this.members = [], this.state = {
+				active: !1,
 				query: "",
 				filtered: [],
 				activeIndex: 0,
 				triggerPosition: -1
-			};
-			this.selectedMentions = [];
-			this.emitter = emitter;
-			if (members) this.members = [...members];
+			}, this.selectedMentions = [], this.emitter = e, t && (this.members = t.map((e) => ({ ...e })));
 		}
 		getState() {
 			return {
@@ -177,391 +380,316 @@
 			};
 		}
 		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);
+			return this.selectedMentions.map((e) => ({ ...e }));
+		}
+		setMembers(e) {
+			this.members = e.map((e) => ({ ...e })), this.state.active && this.filter(this.state.query);
+		}
+		handleInput(e, t) {
+			const n = e.slice(0, t), s = n.lastIndexOf("@");
+			if (-1 === s) return void this.deactivate();
+			if (s > 0 && !/\s/.test(n[s - 1])) return void this.deactivate();
+			const i = n.slice(s + 1);
+			/\s/.test(i) ? this.deactivate() : (this.state.active = !0, this.state.triggerPosition = s, this.filter(i));
 		}
 		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);
+			this.state.active && 0 !== this.state.filtered.length && (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);
+			this.state.active && 0 !== this.state.filtered.length && (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);
+			return this.state.active && 0 !== this.state.filtered.length ? this.select(this.state.activeIndex) : null;
 		}
-		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;
+		select(e) {
+			if (e < 0 || e >= this.state.filtered.length) return null;
+			const t = this.state.filtered[e];
+			return this.selectedMentions.some((e) => e.id === t.id) || this.selectedMentions.push(t), this.emitter.emit("mention-select", t), this.deactivate(), t;
 		}
 		deactivate() {
-			if (!this.state.active) return;
-			this.state = {
-				active: false,
+			this.state.active && (this.state = {
+				active: !1,
 				query: "",
 				filtered: [],
 				activeIndex: 0,
 				triggerPosition: -1
-			};
-			this.emitter.emit("mention-deactivate");
+			}, 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;
+		parseMentions(e) {
+			const t = [], n = [...this.members].sort((e, t) => t.name.length - e.name.length);
+			for (const s of n) new RegExp(`(^|\\s)@${this.escapeRegex(s.name)}(?=\\s|$|[，。！？,.!?])`, "u").test(e) && !t.some((e) => e.id === s.id) && t.push({ ...s });
+			return t;
 		}
 		resetSelected() {
 			this.selectedMentions = [];
 		}
-		getInsertText(member) {
-			return `@${member.name} `;
+		getInsertText(e) {
+			return `@${e.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());
+		filter(e) {
+			const t = e.trim().toLowerCase();
+			this.state.query = e, this.state.filtered = this.members.filter((e) => e.name.toLowerCase().includes(t) || e.id.toLowerCase().includes(t)).map((e) => ({ ...e })), this.state.activeIndex = 0, this.emitter.emit("mention-filter", this.getState());
 		}
-		escapeRegex(str) {
-			return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		escapeRegex(e) {
+			return e.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;
+	}, $ = class {
+		constructor(e, t = {}) {
+			this.status = "idle", this.unsubscribeEvents = null, this.unsubscribeStatus = null, this.destroyed = !1, this.connectPromise = null, this.lifecycle = 0, this.transport = e, this.options = t, this.cursor = t.cursor;
 		}
-		/** 获取当前实际主题（auto 时解析为 light/dark） */
-		getResolvedTheme() {
-			if (this.mode === "auto") return this.getSystemTheme();
-			return this.mode;
+		getStatus() {
+			return this.status;
 		}
-		/** 获取当前主题令牌 */
-		getTokens() {
-			return this.getResolvedTheme() === "dark" ? darkTokens : lightTokens;
+		getCursor() {
+			return this.cursor;
+		}
+		async connect(e) {
+			if (this.destroyed) throw new Error("Chat transport controller is disposed.");
+			if ("connected" === this.status) return;
+			if (this.connectPromise) return this.connectPromise;
+			const t = ++this.lifecycle;
+			return this.setStatus("connecting"), this.connectPromise = (async () => {
+				this.unsubscribeEvents?.(), this.unsubscribeStatus?.(), this.unsubscribeEvents = this.transport.subscribe((e) => this.handleEvent(e)), this.unsubscribeStatus = this.transport.onStatusChange?.((e) => this.setStatus(e)) ?? null;
+				try {
+					if (await this.transport.connect({
+						conversationId: this.options.conversationId,
+						cursor: this.cursor,
+						signal: e
+					}), this.destroyed || t !== this.lifecycle) return;
+					this.setStatus("connected");
+				} catch (e) {
+					throw this.destroyed || t !== this.lifecycle || this.setStatus("error"), e;
+				} finally {
+					this.connectPromise = null;
+				}
+			})(), this.connectPromise;
 		}
-		/** 设置主题 */
-		setTheme(mode) {
-			this.cleanupMediaListener();
-			this.mode = mode;
-			if (mode === "auto") this.setupMediaListener();
-			this.emitter.emit("theme-change", this.getResolvedTheme(), this.getTokens());
+		async disconnect() {
+			if (!this.destroyed) {
+				this.lifecycle += 1, this.connectPromise = null;
+				try {
+					await this.transport.disconnect();
+				} finally {
+					this.setStatus("disconnected");
+				}
+			}
 		}
-		/** 获取系统主题偏好 */
-		getSystemTheme() {
-			if (typeof window === "undefined") return "light";
-			return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+		async send(e, t = {}) {
+			if (this.destroyed) throw new Error("Chat transport controller is disposed.");
+			if ("connected" !== this.status) throw new Error(`Chat transport is not connected: ${this.status}`);
+			const n = await this.transport.send(e, t);
+			return n && n.cursor && (this.cursor = n.cursor), n;
 		}
-		/** 监听系统主题变化 */
-		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);
+		dispose() {
+			this.destroyed || (this.destroyed = !0, this.lifecycle += 1, this.unsubscribeEvents?.(), this.unsubscribeStatus?.(), this.unsubscribeEvents = null, this.unsubscribeStatus = null, this.connectPromise = null, Promise.resolve(this.transport.disconnect()).catch(() => {}), this.setStatus("disconnected"));
 		}
-		/** 清理监听器 */
-		cleanupMediaListener() {
-			if (this.mediaQuery && this.mediaHandler) {
-				this.mediaQuery.removeEventListener("change", this.mediaHandler);
-				this.mediaQuery = null;
-				this.mediaHandler = null;
-			}
+		handleEvent(e) {
+			this.destroyed || ("cursor" in e && e.cursor && (this.cursor = e.cursor), "ack" === e.type && e.ack.cursor && (this.cursor = e.ack.cursor), "error" !== e.type || e.recoverable || this.setStatus("error"), this.options.onEvent?.(e));
 		}
-		/** 销毁 */
-		destroy() {
-			this.cleanupMediaListener();
+		setStatus(e) {
+			this.status !== e && (this.status = e, this.options.onStatusChange?.(e));
 		}
 	};
-	//#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(/^-+/, "")}`;
+	const x = /* @__PURE__ */ new WeakMap();
+	function w(t, n = e, r) {
+		const a = s(n), o = i(a), l = I(r?.ownerDocument), d = T(l);
+		d.set(o, (d.get(o) ?? 0) + 1), l.getElementById(o) || k(l, o, L(t, a)), r && C(r, t);
+	}
+	function M(t = e, n) {
+		const s = I(n), r = T(s), a = i(t), o = r.get(a) ?? 0;
+		o > 1 ? r.set(a, o - 1) : (r.delete(a), s.getElementById(a)?.remove());
 	}
-	function getStyleElementId(prefix = DEFAULT_CLASS_PREFIX) {
-		const normalized = normalizeClassPrefix(prefix);
-		return normalized === "ldesign-chat" ? STYLE_ELEMENT_ID : `${normalized}-styles`;
+	const E = r;
+	function k(e, t, n) {
+		let s = e.getElementById(t);
+		s || (s = e.createElement("style"), s.id = t, s.dataset.ldesignChat = "true", (e.head ?? e.documentElement).appendChild(s)), s.textContent = n;
 	}
-	function cx(...classes) {
-		return classes.filter(Boolean).join(" ");
+	function C(e, t) {
+		Object.entries(S(t)).forEach(([t, n]) => {
+			e.style.setProperty(t, n);
+		});
 	}
-	//#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 = {
+	function I(e) {
+		if (e) return e;
+		if ("undefined" != typeof document) return document;
+		throw new Error("[Chat] Styles require a browser Document.");
+	}
+	function T(e) {
+		let t = x.get(e);
+		return t || (t = /* @__PURE__ */ new Map(), x.set(e, t)), t;
+	}
+	function S(e) {
+		const n = {
+			bgPrimary: e.bgPrimary,
+			bgSecondary: e.bgSecondary,
+			bgBubbleOutgoing: e.bgBubbleOutgoing,
+			bgBubbleIncoming: e.bgBubbleIncoming,
+			bgInput: e.bgInput,
+			bgMention: e.bgMention,
+			bgMentionHover: e.bgMentionHover,
+			bgMentionActive: e.bgMentionActive,
+			bgLoadMore: e.bgLoadMore,
+			bgSystemMessage: e.bgSystemMessage,
+			bgDropOverlay: e.bgDropOverlay,
+			bgDangerSoft: e.bgDangerSoft,
+			textPrimary: e.textPrimary,
+			textSecondary: e.textSecondary,
+			textBubbleOutgoing: e.textBubbleOutgoing,
+			textBubbleIncoming: e.textBubbleIncoming,
+			textMention: e.textMention,
+			textMentionTag: e.textMentionTag,
+			textTimestamp: e.textTimestamp,
+			textSystem: e.textSystem,
+			textPlaceholder: e.textPlaceholder,
+			borderPrimary: e.borderPrimary,
+			borderInput: e.borderInput,
+			borderInputFocus: e.borderInputFocus,
+			borderMention: e.borderMention,
+			colorSending: e.colorSending,
+			colorSent: e.colorSent,
+			colorDelivered: e.colorDelivered,
+			colorRead: e.colorRead,
+			colorFailed: e.colorFailed,
+			colorLink: e.colorLink,
+			shadowPanel: e.shadowPanel,
+			shadowMention: e.shadowMention,
+			avatarBg: e.avatarBg,
+			avatarText: e.avatarText,
+			btnPrimaryBg: e.btnPrimaryBg,
+			btnPrimaryText: e.btnPrimaryText,
+			btnPrimaryHover: e.btnPrimaryHover,
+			scrollbarThumb: e.scrollbarThumb,
+			scrollbarTrack: e.scrollbarTrack,
+			bgToolbar: e.bgToolbar,
+			borderToolbar: e.borderToolbar,
+			toolbarIconColor: e.toolbarIconColor,
+			toolbarIconHover: e.toolbarIconHover,
+			toolbarVoiceActive: e.toolbarVoiceActive
+		};
+		return Object.fromEntries(Object.entries(n).map(([e, n]) => [`${t}-${B(e)}`, n]));
+	}
+	function L(e, n) {
+		return `\n/* @composy/chat-core styles */\n.${n}-container,\n.${n}-container * {\n  box-sizing: border-box;\n}\n\n.${n}-container {\n${s = e, Object.entries(S(s)).map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n\n  ${t}-font-family: var(--ld-font-family);\n  ${t}-font-size: var(--ld-font-base);\n  ${t}-font-size-sm: var(--ld-font-sm);\n  ${t}-font-size-xs: var(--ld-font-xs);\n  ${t}-font-size-lg: var(--ld-font-lg);\n  ${t}-font-weight-regular: 400;\n  ${t}-font-weight-medium: 500;\n  ${t}-font-weight-semibold: 600;\n  ${t}-line-height: var(--ld-line-normal);\n  ${t}-line-height-bubble: 1.6;\n  ${t}-space-1: var(--ld-spacing-3xs);\n  ${t}-space-2: var(--ld-spacing-2xs);\n  ${t}-space-3: var(--ld-spacing-xs);\n  ${t}-space-4: var(--ld-spacing-sm);\n  ${t}-space-5: var(--ld-spacing-md);\n  ${t}-space-6: var(--ld-spacing-lg);\n  ${t}-space-8: var(--ld-spacing-xl);\n  ${t}-avatar-size: calc(var(--ld-px-40) + var(--ld-px-4));\n  ${t}-mention-avatar-size: var(--ld-px-36);\n  ${t}-toolbar-button-size: var(--ld-px-36);\n  ${t}-input-button-size: calc(var(--ld-px-40) + var(--ld-px-4));\n  ${t}-file-icon-size: var(--ld-px-48);\n  ${t}-image-max-size: var(--ld-px-260);\n  ${t}-panel-max-height: var(--ld-px-220);\n  ${t}-textarea-min-height: calc(var(--ld-px-40) + var(--ld-px-4));\n  ${t}-textarea-max-height: calc(var(--ld-px-64) + var(--ld-px-56));\n  ${t}-message-max-width: 65%;\n  ${t}-system-message-max-width: 80%;\n  ${t}-file-bubble-min-width: var(--ld-px-220);\n  ${t}-border-width: var(--ld-border-width-thin);\n  ${t}-border-width-drop: var(--ld-border-width-medium);\n  ${t}-radius-xs: var(--ld-radius-sm);\n  ${t}-radius-sm: var(--ld-radius-md);\n  ${t}-radius-md: var(--ld-radius-lg);\n  ${t}-radius-lg: var(--ld-radius-xl);\n  ${t}-radius-pill: var(--ld-radius-full);\n  ${t}-radius-circle: var(--ld-radius-full);\n  ${t}-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n  ${t}-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);\n  ${t}-z-overlay: 1000;\n  ${t}-z-mention: 1100;\n  ${t}-icon-size: var(--ld-px-24);\n\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  position: relative;\n  background: ${z("bg-primary")};\n  color: ${z("text-primary")};\n  font-family: ${z("font-family")};\n  font-size: ${z("font-size")};\n  line-height: ${z("line-height")};\n  border: ${z("border-width")} solid ${z("border-primary")};\n  border-radius: ${z("radius-md")};\n  box-shadow: ${z("shadow-panel")};\n}\n\n.${n}-message-list {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: ${z("space-6")};\n  scroll-behavior: smooth;\n}\n\n.${n}-message-list::-webkit-scrollbar {\n  width: var(--ld-px-4);\n}\n\n.${n}-message-list::-webkit-scrollbar-thumb {\n  background: ${z("scrollbar-thumb")};\n  border-radius: ${z("radius-pill")};\n}\n\n.${n}-message-list::-webkit-scrollbar-track {\n  background: ${z("scrollbar-track")};\n}\n\n.${n}-load-more {\n  margin-bottom: ${z("space-5")};\n  padding: ${z("space-5")};\n  text-align: center;\n  color: ${z("color-link")};\n  font-size: ${z("font-size-sm")};\n  background: ${z("bg-load-more")};\n  border-radius: ${z("radius-sm")};\n  cursor: pointer;\n  user-select: none;\n  transition: opacity ${z("transition-fast")}, background ${z("transition-fast")};\n}\n\n.${n}-load-more:hover {\n  background: ${z("bg-mention-hover")};\n}\n\n.${n}-load-more--loading {\n  cursor: default;\n  opacity: .6;\n}\n\n.${n}-time-divider {\n  padding: ${z("space-4")} 0;\n  color: ${z("text-timestamp")};\n  font-size: ${z("font-size-sm")};\n  text-align: center;\n  user-select: none;\n}\n\n.${n}-time-divider span {\n  padding: ${z("space-1")} ${z("space-5")};\n  background: ${z("bg-secondary")};\n  border-radius: ${z("radius-pill")};\n}\n\n.${n}-message-row {\n  display: flex;\n  align-items: flex-start;\n  gap: ${z("space-4")};\n  margin-bottom: ${z("space-5")};\n}\n\n.${n}-message-row--outgoing {\n  flex-direction: row-reverse;\n}\n\n.${n}-message-row--system {\n  justify-content: center;\n}\n\n.${n}-avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${z("avatar-size")};\n  height: ${z("avatar-size")};\n  overflow: hidden;\n  flex-shrink: 0;\n  color: ${z("avatar-text")};\n  background: ${z("avatar-bg")};\n  border-radius: ${z("radius-circle")};\n  font-size: ${z("font-size")};\n  font-weight: ${z("font-weight-semibold")};\n}\n\n.${n}-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.${n}-message-body {\n  display: flex;\n  flex-direction: column;\n  max-width: ${z("message-max-width")};\n  min-width: 0;\n}\n\n.${n}-message-row--outgoing .${n}-message-body {\n  align-items: flex-end;\n}\n\n.${n}-nickname {\n  margin-bottom: ${z("space-2")};\n  padding: 0 ${z("space-2")};\n  color: ${z("text-secondary")};\n  font-size: ${z("font-size-sm")};\n}\n\n.${n}-bubble {\n  position: relative;\n  max-width: 100%;\n  padding: ${z("space-5")} ${z("space-6")};\n  border-radius: ${z("radius-lg")};\n  word-break: break-word;\n  overflow-wrap: unknownwhere;\n  white-space: pre-wrap;\n  line-height: ${z("line-height-bubble")};\n}\n\n.${n}-bubble--incoming {\n  color: ${z("text-bubble-incoming")};\n  background: ${z("bg-bubble-incoming")};\n  border-top-left-radius: ${z("radius-xs")};\n}\n\n.${n}-bubble--outgoing {\n  color: ${z("text-bubble-outgoing")};\n  background: ${z("bg-bubble-outgoing")};\n  border-top-right-radius: ${z("radius-xs")};\n}\n\n.${n}-bubble--image {\n  padding: ${z("space-2")};\n  background: unset;\n}\n\n.${n}-bubble--image img {\n  display: block;\n  max-width: ${z("image-max-size")};\n  max-height: ${z("image-max-size")};\n  border-radius: ${z("radius-md")};\n  cursor: pointer;\n}\n\n.${n}-bubble--file {\n  display: flex;\n  align-items: center;\n  gap: ${z("space-5")};\n  min-width: ${z("file-bubble-min-width")};\n}\n\n.${n}-file-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${z("file-icon-size")};\n  height: ${z("file-icon-size")};\n  flex-shrink: 0;\n  background: ${z("bg-secondary")};\n  border-radius: ${z("radius-sm")};\n  font-size: ${z("font-size-lg")};\n}\n\n.${n}-file-info {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.${n}-file-name {\n  overflow: hidden;\n  font-size: ${z("font-size")};\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.${n}-file-size {\n  margin-top: ${z("space-1")};\n  color: ${z("text-secondary")};\n  font-size: ${z("font-size-sm")};\n}\n\n.${n}-system-message {\n  max-width: ${z("system-message-max-width")};\n  padding: ${z("space-2")} ${z("space-6")};\n  color: ${z("text-system")};\n  background: ${z("bg-system-message")};\n  border-radius: ${z("radius-pill")};\n  font-size: ${z("font-size-sm")};\n  text-align: center;\n}\n\n.${n}-message-footer {\n  display: flex;\n  align-items: center;\n  gap: ${z("space-3")};\n  margin-top: ${z("space-1")};\n  padding: 0 ${z("space-2")};\n}\n\n.${n}-message-row--outgoing .${n}-message-footer {\n  flex-direction: row-reverse;\n}\n\n.${n}-timestamp,\n.${n}-status {\n  font-size: ${z("font-size-xs")};\n}\n\n.${n}-timestamp {\n  color: ${z("text-timestamp")};\n}\n\n.${n}-status--sending { color: ${z("color-sending")}; }\n.${n}-status--sent { color: ${z("color-sent")}; }\n.${n}-status--delivered { color: ${z("color-delivered")}; }\n.${n}-status--read { color: ${z("color-read")}; }\n.${n}-status--failed {\n  color: ${z("color-failed")};\n  cursor: pointer;\n}\n\n.${n}-mention-tag,\n.${n}-link {\n  color: ${z("text-mention-tag")};\n  font-weight: ${z("font-weight-medium")};\n}\n\n.${n}-mention-tag {\n  cursor: pointer;\n}\n\n.${n}-mention-tag:hover,\n.${n}-link:hover {\n  text-decoration: underline;\n}\n\n.${n}-input-area {\n  display: flex;\n  align-items: flex-end;\n  gap: ${z("space-4")};\n  position: relative;\n  padding: ${z("space-5")} ${z("space-6")};\n  border-top: ${z("border-width")} solid ${z("border-primary")};\n  background: ${z("bg-input")};\n}\n\n.${n}-input-wrapper {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n\n.${n}-textarea {\n  width: 100%;\n  min-height: ${z("textarea-min-height")};\n  max-height: ${z("textarea-max-height")};\n  padding: ${z("space-4")} ${z("space-5")};\n  overflow-y: auto;\n  resize: none;\n  outline: none;\n  color: ${z("text-primary")};\n  background: ${z("bg-primary")};\n  border: ${z("border-width")} solid ${z("border-input")};\n  border-radius: ${z("radius-md")};\n  font-family: inherit;\n  font-size: ${z("font-size")};\n  line-height: ${z("line-height")};\n  transition: border-color ${z("transition-fast")}, box-shadow ${z("transition-fast")};\n}\n\n.${n}-textarea:focus {\n  border-color: ${z("border-input-focus")};\n  box-shadow: 0 0 0 ${z("border-width-drop")} ${z("bg-drop-overlay")};\n}\n\n.${n}-textarea::placeholder {\n  color: ${z("text-placeholder")};\n}\n\n.${n}-send-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${z("input-button-size")};\n  height: ${z("input-button-size")};\n  flex-shrink: 0;\n  color: ${z("btn-primary-text")};\n  background: ${z("btn-primary-bg")};\n  border: 0;\n  border-radius: ${z("radius-md")};\n  cursor: pointer;\n  transition: background ${z("transition-fast")}, opacity ${z("transition-fast")};\n}\n\n.${n}-send-btn:hover {\n  background: ${z("btn-primary-hover")};\n}\n\n.${n}-send-btn:disabled {\n  cursor: default;\n  opacity: .5;\n}\n\n.${n}-send-btn svg {\n  width: var(--ldesign-chat-icon-size);\n  height: var(--ldesign-chat-icon-size);\n}\n\n.${n}-mention-panel {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 100%;\n  z-index: ${z("z-mention")};\n  max-height: ${z("panel-max-height")};\n  margin-bottom: ${z("space-2")};\n  overflow-y: auto;\n  background: ${z("bg-mention")};\n  border: ${z("border-width")} solid ${z("border-mention")};\n  border-radius: ${z("radius-md")};\n  box-shadow: ${z("shadow-mention")};\n}\n\n.${n}-mention-item {\n  display: flex;\n  align-items: center;\n  gap: ${z("space-4")};\n  padding: ${z("space-4")} ${z("space-5")};\n  color: ${z("text-mention")};\n  cursor: pointer;\n  transition: background ${z("transition-fast")};\n}\n\n.${n}-mention-item:hover {\n  background: ${z("bg-mention-hover")};\n}\n\n.${n}-mention-item--active {\n  background: ${z("bg-mention-active")};\n}\n\n.${n}-mention-item-avatar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${z("mention-avatar-size")};\n  height: ${z("mention-avatar-size")};\n  flex-shrink: 0;\n  overflow: hidden;\n  color: ${z("avatar-text")};\n  background: ${z("avatar-bg")};\n  border-radius: ${z("radius-circle")};\n  font-size: ${z("font-size-sm")};\n  font-weight: ${z("font-weight-semibold")};\n}\n\n.${n}-mention-item-avatar img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.${n}-mention-item-name {\n  font-size: ${z("font-size")};\n}\n\n.${n}-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: ${z("text-secondary")};\n  font-size: ${z("font-size")};\n}\n\n.${n}-toolbar {\n  display: flex;\n  align-items: center;\n  gap: ${z("space-1")};\n  padding: ${z("space-3")} ${z("space-4")};\n  background: ${z("bg-toolbar")};\n  border-bottom: ${z("border-width")} solid ${z("border-toolbar")};\n  border-radius: ${z("radius-md")} ${z("radius-md")} 0 0;\n}\n\n.${n}-toolbar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${z("toolbar-button-size")};\n  height: ${z("toolbar-button-size")};\n  flex-shrink: 0;\n  padding: 0;\n  color: ${z("toolbar-icon-color")};\n  background: unset;\n  border: 0;\n  border-radius: ${z("radius-sm")};\n  cursor: pointer;\n  transition: background ${z("transition-fast")}, color ${z("transition-fast")};\n}\n\n.${n}-toolbar-btn svg {\n  width: var(--ldesign-chat-space-6);\n  height: var(--ldesign-chat-space-6);\n}\n\n.${n}-toolbar-btn:hover {\n  color: ${z("toolbar-icon-hover")};\n  background: ${z("bg-drop-overlay")};\n}\n\n.${n}-toolbar-btn--active {\n  color: ${z("toolbar-voice-active")};\n  background: ${z("bg-danger-soft")};\n}\n\n.${n}-toolbar-btn--active:hover {\n  color: ${z("toolbar-voice-active")};\n  background: ${z("bg-danger-soft")};\n}\n\n.${n}-drop-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: ${z("z-overlay")};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  background: ${z("bg-drop-overlay")};\n  border: ${z("border-width-drop")} dashed ${z("toolbar-icon-hover")};\n  border-radius: ${z("radius-md")};\n}\n\n.${n}-drop-overlay span {\n  color: ${z("toolbar-icon-hover")};\n  font-size: ${z("font-size-sm")};\n  font-weight: ${z("font-weight-medium")};\n}\n\n@keyframes ${n}-blink {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0; }\n}\n\n.${n}-bubble--streaming::after {\n  content: '';\n  display: inline-block;\n  width: ${z("border-width-drop")};\n  height: 1em;\n  margin-left: ${z("space-1")};\n  vertical-align: text-bottom;\n  background: currentColor;\n  animation: ${n}-blink 800ms infinite;\n}\n`;
+		var s;
+	}
+	function z(e) {
+		return `var(${t}-${e})`;
+	}
+	function B(e) {
+		return e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+	}
+	const A = "<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>", P = /* @__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"
+	]), D = /* @__PURE__ */ new Set([
+		"iframe",
+		"object",
+		"embed",
+		"script",
+		"style",
+		"svg",
+		"math",
+		"template",
+		"form",
+		"input",
+		"button",
+		"link",
+		"meta",
+		"base"
+	]), q = {
 		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");
+	var R = class {
+		constructor(e, t, n, i) {
+			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 = !1, this.isRecording = !1, this.recognition = null, this.lastVoiceTranscript = "", this.destroyed = !1, this.pendingFileInputs = /* @__PURE__ */ new Set(), this.container = e, this.document = e.ownerDocument, this.config = t, this.emitter = n, this.mentionEngine = i, this.prefix = s(t.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);
-			}
+			this.destroyed || (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), !1 !== this.config.showInput && this.renderInputArea(), this.container.appendChild(this.root), this.setupEventListeners());
+		}
+		updateMessageContent(e, t) {
+			const n = this.getMessageRow(e)?.querySelector(`.${this.prefix}-bubble`);
+			n && (n.innerHTML = this.renderTextContent(t));
+		}
+		renderMessages(e) {
+			if (this.messageListEl.innerHTML = "", this.config.enableLoadMore && this.renderLoadMoreButton(), 0 === e.length) return void this.renderEmpty();
+			let t = 0;
+			const n = this.config.timeGroupInterval ?? 3e5;
+			for (const s of e) !1 !== this.config.showTimestamp && s.timestamp - t > n && (this.renderTimeDivider(s.timestamp), t = s.timestamp), this.renderMessageRow(s);
 		}
-		appendMessage(message) {
+		appendMessage(e) {
 			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;
+			const t = this.getMessageElements(), n = t.length > 0 ? Number.parseInt(t[t.length - 1].dataset.timestamp ?? "0", 10) : 0, s = this.config.timeGroupInterval ?? 3e5;
+			!1 !== this.config.showTimestamp && e.timestamp - n > s && this.renderTimeDivider(e.timestamp), this.renderMessageRow(e);
+		}
+		prependMessages(e) {
+			if (!e.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;
+			const t = this.messageListEl.scrollHeight, n = this.messageListEl.scrollTop, s = this.document.createDocumentFragment();
+			let i = 0;
+			const r = this.config.timeGroupInterval ?? 3e5;
+			for (const t of e) !1 !== this.config.showTimestamp && t.timestamp - i > r && (s.appendChild(this.createTimeDivider(t.timestamp)), i = t.timestamp), s.appendChild(this.createMessageRow(t));
+			const a = this.messageListEl.querySelector(`.${this.prefix}-message-row, .${this.prefix}-time-divider`);
+			a ? a.before(s) : this.loadMoreEl ? this.loadMoreEl.after(s) : this.messageListEl.appendChild(s), this.messageListEl.scrollTop = n + (this.messageListEl.scrollHeight - t);
+		}
+		updateMessage(e, t) {
+			const n = this.getMessageRow(e);
+			n && n.replaceWith(this.createMessageRow({
+				...t,
+				id: e
+			}));
+		}
+		removeMessage(e) {
+			this.getMessageRow(e)?.remove(), this.refreshTimeDividers(), 0 === this.getMessageElements().length ? this.renderEmpty() : this.removeEmpty();
+		}
+		scrollToBottom(e = !0) {
+			"function" != typeof this.messageListEl.scrollTo ? this.messageListEl.scrollTop = this.messageListEl.scrollHeight : this.messageListEl.scrollTo({
+				top: this.messageListEl.scrollHeight,
+				behavior: e ? "smooth" : "auto"
+			});
+		}
+		isAtBottom(e = 4) {
+			return this.messageListEl.scrollHeight - this.messageListEl.scrollTop - this.messageListEl.clientHeight <= e;
 		}
-		isAtBottom(threshold = 4) {
-			return this.messageListEl.scrollHeight - this.messageListEl.scrollTop - this.messageListEl.clientHeight <= threshold;
+		setLoadingMore(e) {
+			this.loadingMore = e, this.loadMoreEl && (this.loadMoreEl.textContent = e ? "加载中..." : this.config.loadMoreText ?? "加载更多", this.loadMoreEl.classList.toggle(`${this.prefix}-load-more--loading`, e));
 		}
-		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);
+		setThemeTokens(e) {
+			this.root && C(this.root, e);
+		}
+		getRootElement() {
+			return this.root;
 		}
 		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);
+		setInputContent(e) {
+			this.textareaEl && (this.textareaEl.value = this.limitInput(e), this.autoResize(), this.updateSendButtonState(), this.config.onInputChange?.(this.textareaEl.value));
 		}
 		getInputContent() {
 			return this.textareaEl?.value ?? "";
@@ -569,1300 +697,898 @@
 		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);
-			});
+		renderMentionPanel(e, t) {
+			this.mentionPanel && (0 !== e.length ? (this.mentionPanel.style.display = "block", this.mentionPanel.innerHTML = "", e.forEach((e, n) => {
+				const s = this.el("div", r(`${this.prefix}-mention-item`, n === t && `${this.prefix}-mention-item--active`));
+				s.setAttribute("role", "option"), s.setAttribute("aria-selected", String(n === t));
+				const i = this.el("div", `${this.prefix}-mention-item-avatar`);
+				if (e.avatar) {
+					const t = this.document.createElement("img");
+					t.src = this.safeResourceUrl(e.avatar), t.alt = "", i.appendChild(t);
+				} else i.textContent = e.name[0]?.toUpperCase() ?? "";
+				s.appendChild(i);
+				const a = this.el("span", `${this.prefix}-mention-item-name`);
+				a.textContent = e.name, s.appendChild(a), s.addEventListener("mousedown", (e) => e.preventDefault()), s.addEventListener("click", () => {
+					const e = this.mentionEngine.getState().triggerPosition, t = this.textareaEl?.selectionEnd, s = this.mentionEngine.select(n);
+					s && this.insertMention(s, e, t);
+				}), this.mentionPanel?.appendChild(s);
+			})) : this.mentionPanel.style.display = "none");
 		}
 		hideMentionPanel() {
-			if (this.mentionPanel) this.mentionPanel.style.display = "none";
+			this.mentionPanel && (this.mentionPanel.style.display = "none");
 		}
 		destroy() {
-			this.stopVoice();
-			this.container.innerHTML = "";
+			this.destroyed || (this.destroyed = !0, this.stopVoice(), this.finishVoice(), this.pendingFileInputs.forEach((e) => e.remove()), this.pendingFileInputs.clear(), this.root?.remove());
 		}
 		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);
+			const e = 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"), e.appendChild(this.mentionPanel), !1 !== this.config.enableToolbar && this.renderToolbar(e), this.textareaEl = this.document.createElement("textarea"), this.textareaEl.className = `${this.prefix}-textarea`, this.textareaEl.placeholder = this.config.inputPlaceholder ?? "输入消息...", this.textareaEl.rows = 1, this.config.maxInputLength && this.config.maxInputLength > 0 && (this.textareaEl.maxLength = this.config.maxInputLength), e.appendChild(this.textareaEl), this.dropOverlay = this.el("div", `${this.prefix}-drop-overlay`), this.dropOverlay.innerHTML = "<span>拖放文件到这里</span>", this.dropOverlay.style.display = "none", e.appendChild(this.dropOverlay), this.inputArea.appendChild(e), this.sendBtn = this.document.createElement("button"), this.sendBtn.className = `${this.prefix}-send-btn`, this.sendBtn.innerHTML = "<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>", this.sendBtn.title = "发送", this.sendBtn.type = "button", this.sendBtn.disabled = !0, this.inputArea.appendChild(this.sendBtn), this.root.appendChild(this.inputArea);
+		}
+		renderToolbar(e) {
+			const t = this.config.toolbarConfig ?? {};
+			if (this.toolbarEl = this.el("div", `${this.prefix}-toolbar`), !1 !== t.image) {
+				const e = this.createToolbarBtn("<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>", "插入图片");
+				e.addEventListener("click", () => this.openFilePicker("image/*")), this.toolbarEl.appendChild(e);
 			}
-			if (toolbar.file !== false) {
-				const fileBtn = this.createToolbarBtn(ICON_PAPERCLIP, "插入文件");
-				fileBtn.addEventListener("click", () => this.openFilePicker("*/*"));
-				this.toolbarEl.appendChild(fileBtn);
+			if (!1 !== t.file) {
+				const e = this.createToolbarBtn("<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>", "插入文件");
+				e.addEventListener("click", () => this.openFilePicker("*/*")), this.toolbarEl.appendChild(e);
 			}
-			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();
+			!1 !== t.voice && (this.voiceBtn = this.createToolbarBtn(A, "语音输入"), this.voiceBtn.addEventListener("click", () => this.toggleVoice()), this.toolbarEl.appendChild(this.voiceBtn)), e.insertBefore(this.toolbarEl, e.firstChild);
+		}
+		createToolbarBtn(e, t) {
+			const n = this.document.createElement("button");
+			return n.className = `${this.prefix}-toolbar-btn`, n.innerHTML = e, n.title = t, n.type = "button", n;
+		}
+		openFilePicker(e) {
+			const t = this.document.createElement("input");
+			t.type = "file", t.accept = e, t.multiple = !0, t.style.display = "none", this.pendingFileInputs.add(t);
+			const n = () => {
+				t.remove(), this.pendingFileInputs.delete(t);
+			};
+			t.addEventListener("change", () => {
+				const s = Array.from(t.files ?? []);
+				if (n(), !s.length) return;
+				const i = e.startsWith("image");
+				this.emitter.emit(i ? "toolbar-image" : "toolbar-file", s), i ? this.config.onImageUpload?.(s) : this.config.onFileUpload?.(s);
+			}), t.addEventListener("cancel", n), (this.document.body ?? this.document.documentElement).appendChild(t), t.click();
 		}
 		toggleVoice() {
-			if (this.isRecording) this.stopVoice();
-			else this.startVoice();
+			this.isRecording ? this.stopVoice() : 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;
-			}
+			const e = this.document.defaultView, t = e?.SpeechRecognition || e?.webkitSpeechRecognition;
+			if (!t) return this.emitter.emit("toolbar-voice-unsupported"), void this.config.onVoiceUnsupported?.();
 			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);
+				const e = new t(), n = /* @__PURE__ */ new Map();
+				e.continuous = !1, e.interimResults = !0, e.lang = this.config.voiceLang ?? "zh-CN", this.recognition = e, e.onresult = (t) => {
+					if (this.destroyed || this.recognition !== e) return;
+					const s = [];
+					for (let e = Math.max(0, t.resultIndex ?? 0); e < t.results.length; e++) {
+						const i = t.results[e];
+						i?.isFinal && !n.has(e) && (n.set(e, i[0].transcript), s.push(i[0].transcript));
+					}
+					this.lastVoiceTranscript = [...n.entries()].sort(([e], [t]) => e - t).map(([, e]) => e).join(""), s.length && this.textareaEl && this.insertTextAtCursor(s.join(""));
+				}, e.onend = () => {
+					if (this.destroyed || this.recognition !== e) return;
+					const t = this.lastVoiceTranscript;
+					this.finishVoice(), this.emitter.emit("toolbar-voice-end", t), this.config.onVoiceEnd?.(t);
+				}, e.onerror = (t) => {
+					this.destroyed || this.recognition !== e || (this.finishVoice(), this.emitter.emit("toolbar-voice-error", t), this.config.onVoiceError?.(t));
+				}, this.isRecording = !0, this.voiceBtn?.classList.add(`${this.prefix}-toolbar-btn--active`), this.voiceBtn && (this.voiceBtn.innerHTML = "<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>"), e.start(), this.emitter.emit("toolbar-voice-start"), this.config.onVoiceStart?.();
+			} catch (e) {
+				this.finishVoice(), this.emitter.emit("toolbar-voice-error", e), this.config.onVoiceError?.(e);
 			}
 		}
 		stopVoice() {
 			if (!this.recognition) return;
-			const recognition = this.recognition;
-			this.recognition = null;
+			const e = this.recognition;
 			try {
-				recognition.stop();
+				e.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;
+			this.isRecording = !1, this.recognition = null, this.voiceBtn?.classList.remove(`${this.prefix}-toolbar-btn--active`), this.voiceBtn && (this.voiceBtn.innerHTML = A);
 		}
 		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);
+			if (this.textareaEl && (this.textareaEl.addEventListener("input", () => {
+				const e = this.limitInput(this.textareaEl?.value ?? "");
+				this.textareaEl && e !== this.textareaEl.value && (this.textareaEl.value = e), this.autoResize(), this.updateSendButtonState(), this.config.onInputChange?.(this.textareaEl?.value ?? ""), this.config.enableMention && this.textareaEl && this.mentionEngine.handleInput(this.textareaEl.value, this.textareaEl.selectionStart);
+			}), this.textareaEl.addEventListener("keydown", (e) => {
+				const t = this.mentionEngine.getState();
+				if (t.active) if ("ArrowUp" === e.key) e.preventDefault(), this.mentionEngine.moveUp();
+				else if ("ArrowDown" === e.key) e.preventDefault(), this.mentionEngine.moveDown();
+				else if ("Enter" !== e.key || e.shiftKey) "Escape" === e.key && (e.preventDefault(), this.mentionEngine.deactivate());
+				else {
+					e.preventDefault();
+					const n = t.triggerPosition, s = this.textareaEl.selectionEnd, i = this.mentionEngine.selectCurrent();
+					i && this.insertMention(i, n, s);
+				}
+				else !1 === this.config.enterToSend || "Enter" !== e.key || e.shiftKey || (e.preventDefault(), this.handleSend());
+			}), this.textareaEl.addEventListener("paste", (e) => {
+				const t = e.clipboardData?.items;
+				if (!t) return;
+				const n = [];
+				for (let e = 0; e < t.length; e++) if ("file" === t[e].kind) {
+					const s = t[e].getAsFile();
+					s && n.push(s);
+				}
+				n.length > 0 && (e.preventDefault(), this.emitter.emit("toolbar-paste", n), this.config.onPaste?.(n));
+			})), this.inputArea) {
+				const e = this.inputArea.querySelector(`.${this.prefix}-input-wrapper`);
+				e && this.setupDropEvents(e);
 			}
 			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-filter", (e) => {
+				this.renderMentionPanel(e.filtered, e.activeIndex);
+			}), this.emitter.on("mention-active-change", (e) => {
+				(this.mentionPanel?.querySelectorAll(`.${this.prefix}-mention-item`))?.forEach((t, n) => {
+					t.classList.toggle(`${this.prefix}-mention-item--active`, n === e), t.setAttribute("aria-selected", String(n === e));
 				});
-			});
-			this.emitter.on("mention-deactivate", () => {
+			}), 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);
-				}
+		setupDropEvents(e) {
+			let t = 0;
+			e.addEventListener("dragenter", (e) => {
+				e.preventDefault(), t++, this.dropOverlay && (this.dropOverlay.style.display = "flex");
+			}), e.addEventListener("dragleave", (e) => {
+				e.preventDefault(), t--, t <= 0 && (t = 0, this.dropOverlay && (this.dropOverlay.style.display = "none"));
+			}), e.addEventListener("dragover", (e) => {
+				e.preventDefault();
+			}), e.addEventListener("drop", (e) => {
+				e.preventDefault(), t = 0, this.dropOverlay && (this.dropOverlay.style.display = "none");
+				const n = Array.from(e.dataTransfer?.files ?? []);
+				n.length > 0 && (this.emitter.emit("toolbar-drop", n), this.config.onDrop?.(n));
 			});
 		}
 		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) {
+			const e = (this.textareaEl?.value ?? "").trim();
+			if (!e) return;
+			const t = this.mentionEngine.parseMentions(e);
+			this.emitter.emit("send", e, t), this.config.onSend?.(e, t), !1 !== this.config.clearInputOnSend && this.clearInput(), this.mentionEngine.resetSelected();
+		}
+		insertMention(e, t, n) {
 			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) {
+			const s = this.mentionEngine.getState(), i = this.textareaEl.value, r = n ?? this.textareaEl.selectionEnd, a = this.mentionEngine.getInsertText(e), o = i.slice(0, t ?? s.triggerPosition), l = i.slice(r);
+			this.textareaEl.value = this.limitInput(o + a + l);
+			const d = Math.min(o.length + a.length, this.textareaEl.value.length);
+			this.textareaEl.setSelectionRange(d, d), this.textareaEl.focus(), this.autoResize(), this.updateSendButtonState(), this.config.onInputChange?.(this.textareaEl.value);
+		}
+		insertTextAtCursor(e) {
 			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);
+			const t = this.textareaEl.value, n = this.textareaEl.selectionStart, s = this.textareaEl.selectionEnd;
+			this.textareaEl.value = this.limitInput(t.slice(0, n) + e + t.slice(s));
+			const i = Math.min(n + e.length, this.textareaEl.value.length);
+			this.textareaEl.setSelectionRange(i, i), 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`;
+			this.textareaEl && (this.textareaEl.style.height = "auto", this.textareaEl.style.height = `${this.textareaEl.scrollHeight}px`);
 		}
 		updateSendButtonState() {
-			if (!this.sendBtn) return;
-			this.sendBtn.disabled = !this.getInputContent().trim();
+			this.sendBtn && (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;
+			this.loadMoreEl = this.el("div", `${this.prefix}-load-more`), this.loadMoreEl.textContent = this.config.loadMoreText ?? "加载更多", this.loadMoreEl.addEventListener("click", () => {
+				this.destroyed || this.loadingMore || (this.setLoadingMore(!0), this.emitter.emit("load-more"), this.loadMore());
+			}), this.messageListEl.appendChild(this.loadMoreEl);
+		}
+		async loadMore() {
+			try {
+				await this.config.onLoadMore?.();
+			} catch (e) {
+				this.emitter.emit("load-more-error", e);
+			} finally {
+				this.destroyed || this.setLoadingMore(!1);
 			}
-			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);
+		}
+		renderTimeDivider(e) {
+			this.messageListEl.appendChild(this.createTimeDivider(e));
+		}
+		createTimeDivider(e) {
+			const t = this.el("div", `${this.prefix}-time-divider`), n = this.document.createElement("span");
+			return n.textContent = this.formatTime(e), t.appendChild(n), t;
+		}
+		renderMessageRow(e) {
+			this.messageListEl.appendChild(this.createMessageRow(e));
+		}
+		createMessageRow(e) {
+			const t = this.prefix;
+			if ("system" === e.type) {
+				const n = this.el("div", r(`${t}-message-row`, `${t}-message-row--system`));
+				n.dataset.msgId = e.id, n.dataset.timestamp = String(e.timestamp);
+				const s = this.el("div", `${t}-system-message`);
+				return s.textContent = e.content ?? "", n.appendChild(s), n;
 			}
-			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);
+			const n = "outgoing" === e.direction, s = this.el("div", r(`${t}-message-row`, n && `${t}-message-row--outgoing`));
+			s.dataset.msgId = e.id, s.dataset.timestamp = String(e.timestamp), !1 !== this.config.showAvatar && s.appendChild(this.createAvatar(e.sender.nickname, e.sender.avatar));
+			const i = this.el("div", `${t}-message-body`);
+			if (!1 !== this.config.showNickname && !n) {
+				const n = this.el("div", `${t}-nickname`);
+				n.textContent = e.sender.nickname, i.appendChild(n);
 			}
-			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 i.appendChild(this.createBubble(e, n)), i.appendChild(this.createMessageFooter(e, n)), s.appendChild(i), s.addEventListener("click", () => {
+				this.emitter.emit("message-click", e), this.config.onMessageClick?.(e);
+			}), s;
+		}
+		createAvatar(e, t) {
+			const n = this.el("div", `${this.prefix}-avatar`);
+			if (t) {
+				const s = this.document.createElement("img");
+				s.src = this.safeResourceUrl(t), s.alt = e, n.appendChild(s);
+			} else n.textContent = e[0]?.toUpperCase() ?? "";
+			return n;
+		}
+		createMessageFooter(e, t) {
+			const n = this.el("div", `${this.prefix}-message-footer`);
+			if (!1 !== this.config.showTimestamp) {
+				const t = this.el("span", `${this.prefix}-timestamp`);
+				t.textContent = this.formatShortTime(e.timestamp), n.appendChild(t);
 			}
-			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;
+			if (!1 !== this.config.showStatus && t && e.status) {
+				const t = this.el("span", r(`${this.prefix}-status`, `${this.prefix}-status--${e.status}`));
+				t.textContent = q[e.status] ?? "", "failed" === e.status && t.addEventListener("click", (t) => {
+					t.stopPropagation(), this.emitter.emit("message-retry", e);
+				}), n.appendChild(t);
 			}
-			switch (message.type) {
+			return n;
+		}
+		createBubble(e, t) {
+			const n = this.prefix, s = t ? `${n}-bubble--outgoing` : `${n}-bubble--incoming`;
+			if (e.revoked) {
+				const e = this.el("div", r(`${n}-bubble`, s, `${n}-bubble--revoked`));
+				return e.textContent = "消息已撤回", e;
+			}
+			switch (e.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);
+					const t = this.el("div", r(`${n}-bubble`, s, `${n}-bubble--image`));
+					if (e.image) {
+						const n = this.document.createElement("img");
+						n.src = this.safeResourceUrl(e.image.thumbUrl ?? e.image.url), n.alt = e.content ?? "", e.image.width && (n.width = Math.min(e.image.width, 240)), t.appendChild(n);
 					}
-					return bubble;
+					return t;
 				}
 				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);
+					const t = this.el("div", r(`${n}-bubble`, s, `${n}-bubble--file`)), i = this.el("div", `${n}-file-icon`);
+					i.innerHTML = "<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>", t.appendChild(i);
+					const a = this.el("div", `${n}-file-info`), o = this.el("div", `${n}-file-name`);
+					if (o.textContent = e.file?.name ?? "file", a.appendChild(o), e.file?.size) {
+						const t = this.el("div", `${n}-file-size`);
+						t.textContent = this.formatFileSize(e.file.size), a.appendChild(t);
 					}
-					bubble.appendChild(info);
-					return bubble;
+					return t.appendChild(a), t;
 				}
 				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;
+					const t = this.el("div", r(`${n}-bubble`, s));
+					return e.customHtml ? this.setSanitizedCustomHtml(t, e.customHtml) : t.textContent = e.content ?? "", t;
 				}
 				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;
+					const t = this.el("div", r(`${n}-bubble`, s, e.streaming && `${n}-bubble--streaming`));
+					return e.contentBlocks?.length ? this.renderContentBlocks(t, e.contentBlocks) : t.innerHTML = this.renderTextContent(e.content ?? "", e.mentions), t;
+				}
+			}
+		}
+		renderContentBlocks(e, t) {
+			e.replaceChildren();
+			for (const n of t) switch (n.type) {
+				case "text":
+					e.appendChild(this.document.createTextNode(n.text));
+					break;
+				case "mention": {
+					const t = this.el("span", `${this.prefix}-mention-tag`);
+					t.dataset.mentionId = n.id, t.textContent = `@${n.label}`, e.appendChild(t);
+					break;
+				}
+				case "link": {
+					const t = this.document.createElement("a"), s = this.safeUrl(n.url, [
+						"http:",
+						"https:",
+						"mailto:"
+					]);
+					t.className = `${this.prefix}-link`, t.textContent = n.label ?? n.url, s && (t.href = s, t.target = "_blank", t.rel = "noopener noreferrer"), e.appendChild(t);
+					break;
+				}
+				case "code": {
+					const t = this.document.createElement("code");
+					t.textContent = n.code, n.language && (t.dataset.language = n.language), e.appendChild(t);
+					break;
+				}
+				case "image": {
+					const t = this.document.createElement("img"), s = this.safeResourceUrl(n.src), i = n.width, r = n.height;
+					s && (t.src = s), t.alt = n.alt ?? "", t.loading = "lazy", Number.isFinite(i) && i > 0 && (t.width = i), Number.isFinite(r) && r > 0 && (t.height = r), e.appendChild(t);
+					break;
+				}
+				case "file": {
+					const t = this.document.createElement("a"), s = this.safeResourceUrl(n.url);
+					t.className = `${this.prefix}-file-link`, t.textContent = n.name, s && (t.href = s, t.target = "_blank", t.rel = "noopener noreferrer"), e.appendChild(t);
+					break;
 				}
+				case "break":
+					e.appendChild(this.document.createElement("br"));
+					break;
+				case "custom": e.appendChild(this.document.createTextNode(n.fallback ?? `[${n.kind}]`));
 			}
 		}
-		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);
+		renderTextContent(e, t) {
+			let n = this.escapeHtml(e);
+			if (t?.length) for (const e of t) {
+				const t = `<span class="${this.prefix}-mention-tag" data-mention-id="${this.escapeAttr(e.id)}">@${this.escapeHtml(e.name)}</span>`;
+				n = n.replace(new RegExp(`@${this.escapeRegex(e.name)}`, "g"), t);
+			}
+			return n.replace(/(https?:\/\/[^\s<]+)/g, `<a class="${this.prefix}-link" href="$1" target="_blank" rel="noopener noreferrer">$1</a>`);
+		}
+		setSanitizedCustomHtml(e, t) {
+			const n = this.document.createElement("template");
+			n.innerHTML = t;
+			const s = this.document.createDocumentFragment();
+			for (const e of Array.from(n.content.childNodes)) {
+				const t = this.sanitizeCustomNode(e);
+				t && s.appendChild(t);
+			}
+			e.replaceChildren(s);
+		}
+		sanitizeCustomNode(e) {
+			if (3 === e.nodeType) return this.document.createTextNode(e.textContent ?? "");
+			if (1 !== e.nodeType) return null;
+			const t = e, n = t.tagName.toLowerCase();
+			if (D.has(n)) return null;
+			if (!P.has(n)) {
+				const e = this.document.createDocumentFragment();
+				for (const n of Array.from(t.childNodes)) {
+					const t = this.sanitizeCustomNode(n);
+					t && e.appendChild(t);
+				}
+				return e;
+			}
+			const s = this.document.createElement(n), i = t.getAttribute("title");
+			i && s.setAttribute("title", i);
+			const r = t.getAttribute("aria-label");
+			if (r && s.setAttribute("aria-label", r), "a" === n) {
+				const e = t.getAttribute("href"), n = e ? this.safeUrl(e, [
+					"http:",
+					"https:",
+					"mailto:"
+				]) : null;
+				n && s.setAttribute("href", n);
+				const i = t.getAttribute("target");
+				"_blank" !== i && "_self" !== i || s.setAttribute("target", i), s.setAttribute("rel", "noopener noreferrer");
+			}
+			if ("img" === n) {
+				const e = t.getAttribute("src"), n = e ? this.safeUrl(e, [
+					"http:",
+					"https:",
+					"blob:"
+				]) : null;
+				n && s.setAttribute("src", n), s.setAttribute("alt", t.getAttribute("alt") ?? "");
+				for (const e of ["width", "height"]) {
+					const n = Number(t.getAttribute(e));
+					Number.isFinite(n) && n > 0 && s.setAttribute(e, String(n));
+				}
+				s.setAttribute("loading", "lazy");
+			}
+			for (const e of Array.from(t.childNodes)) {
+				const t = this.sanitizeCustomNode(e);
+				t && s.appendChild(t);
+			}
+			return s;
+		}
+		safeResourceUrl(e) {
+			return e ? this.safeUrl(e, [
+				"http:",
+				"https:",
+				"blob:"
+			]) ?? "" : "";
+		}
+		safeUrl(e, t) {
+			const n = e.trim();
+			if (!n || [...n].some((e) => {
+				const t = e.charCodeAt(0);
+				return t < 32 || 127 === t;
+			})) return null;
+			try {
+				const e = new URL(n, this.document.baseURI);
+				return t.includes(e.protocol) ? n : null;
+			} catch {
+				return null;
 			}
-			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);
+			const e = this.el("div", `${this.prefix}-empty`);
+			e.textContent = "暂无消息", this.messageListEl.appendChild(e);
 		}
 		removeEmpty() {
 			this.messageListEl.querySelector(`.${this.prefix}-empty`)?.remove();
 		}
-		el(tag, className) {
-			const el = document.createElement(tag);
-			el.className = className;
-			return el;
+		el(e, t) {
+			const n = this.document.createElement(e);
+			return n.className = t, n;
 		}
 		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", {
+		getMessageRow(e) {
+			return this.getMessageElements().find((t) => t.dataset.msgId === e) ?? null;
+		}
+		refreshTimeDividers() {
+			this.messageListEl.querySelectorAll(`.${this.prefix}-time-divider`).forEach((e) => e.remove());
+			const e = this.config.timeGroupInterval ?? 3e5;
+			let t = 0;
+			for (const n of this.getMessageElements()) {
+				const s = Number(n.dataset.timestamp ?? 0);
+				!1 !== this.config.showTimestamp && s - t > e && n.before(this.createTimeDivider(s)), t = s;
+			}
+		}
+		formatTime(e) {
+			if (this.config.formatTime) return this.config.formatTime(e);
+			const t = new Date(e), n = /* @__PURE__ */ new Date();
+			return t.toDateString() === n.toDateString() ? t.toLocaleTimeString("zh-CN", {
 				hour: "2-digit",
 				minute: "2-digit"
-			});
-			return date.toLocaleDateString("zh-CN", {
+			}) : t.toLocaleDateString("zh-CN", {
 				month: "2-digit",
 				day: "2-digit",
 				hour: "2-digit",
 				minute: "2-digit"
 			});
 		}
-		formatShortTime(timestamp) {
-			return new Date(timestamp).toLocaleTimeString("zh-CN", {
+		formatShortTime(e) {
+			return new Date(e).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`;
+		formatFileSize(e) {
+			return e < 1024 ? `${e} B` : e < 1048576 ? `${(e / 1024).toFixed(1)} KB` : `${(e / 1048576).toFixed(1)} MB`;
+		}
+		limitInput(e) {
+			const t = this.config.maxInputLength;
+			return !t || t <= 0 ? e : e.slice(0, t);
+		}
+		escapeHtml(e) {
+			const t = this.document.createElement("div");
+			return t.textContent = e, t.innerHTML;
+		}
+		escapeAttr(e) {
+			return e.replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+		}
+		escapeRegex(e) {
+			return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		}
+	};
+	const H = {
+		bgPrimary: "var(--ld-bg-surface)",
+		bgSecondary: "var(--ld-bg-surface-soft)",
+		bgBubbleOutgoing: "var(--ld-primary-default)",
+		bgBubbleIncoming: "var(--ld-bg-surface-soft)",
+		bgInput: "var(--ld-bg-surface)",
+		bgMention: "var(--ld-bg-surface)",
+		bgMentionHover: "var(--ld-primary-50)",
+		bgMentionActive: "var(--ld-primary-100)",
+		bgLoadMore: "var(--ld-bg-surface-soft)",
+		bgSystemMessage: "var(--ld-bg-surface-soft)",
+		bgDropOverlay: "color-mix(in srgb, var(--ld-primary-default) 10%, var(--ld-bg-surface))",
+		bgDangerSoft: "color-mix(in srgb, var(--ld-danger-default) 12%, var(--ld-bg-surface))",
+		textPrimary: "var(--ld-text-primary)",
+		textSecondary: "var(--ld-text-secondary)",
+		textBubbleOutgoing: "var(--ld-gray-50)",
+		textBubbleIncoming: "var(--ld-text-primary)",
+		textMention: "var(--ld-text-primary)",
+		textMentionTag: "var(--ld-primary-default)",
+		textTimestamp: "var(--ld-text-muted)",
+		textSystem: "var(--ld-text-secondary)",
+		textPlaceholder: "var(--ld-text-muted)",
+		borderPrimary: "var(--ld-border)",
+		borderInput: "var(--ld-gray-300)",
+		borderInputFocus: "var(--ld-primary-default)",
+		borderMention: "var(--ld-border)",
+		colorSending: "var(--ld-gray-400)",
+		colorSent: "var(--ld-gray-500)",
+		colorDelivered: "var(--ld-primary-default)",
+		colorRead: "var(--ld-success-default)",
+		colorFailed: "var(--ld-danger-default)",
+		colorLink: "var(--ld-primary-default)",
+		shadowPanel: "none",
+		shadowMention: "none",
+		avatarBg: "var(--ld-primary-default)",
+		avatarText: "var(--ld-gray-50)",
+		btnPrimaryBg: "var(--ld-primary-default)",
+		btnPrimaryText: "var(--ld-gray-50)",
+		btnPrimaryHover: "var(--ld-primary-hover)",
+		scrollbarThumb: "var(--ld-gray-300)",
+		scrollbarTrack: "var(--ld-gray-100)",
+		bgToolbar: "var(--ld-bg-surface-soft)",
+		borderToolbar: "var(--ld-border)",
+		toolbarIconColor: "var(--ld-text-secondary)",
+		toolbarIconHover: "var(--ld-primary-default)",
+		toolbarVoiceActive: "var(--ld-danger-default)"
+	}, F = {
+		bgPrimary: "var(--ld-gray-900)",
+		bgSecondary: "var(--ld-gray-800)",
+		bgBubbleOutgoing: "var(--ld-primary-default)",
+		bgBubbleIncoming: "var(--ld-gray-800)",
+		bgInput: "var(--ld-gray-900)",
+		bgMention: "var(--ld-gray-900)",
+		bgMentionHover: "var(--ld-gray-800)",
+		bgMentionActive: "var(--ld-primary-900)",
+		bgLoadMore: "var(--ld-gray-800)",
+		bgSystemMessage: "var(--ld-gray-800)",
+		bgDropOverlay: "color-mix(in srgb, var(--ld-primary-default) 16%, var(--ld-gray-900))",
+		bgDangerSoft: "color-mix(in srgb, var(--ld-danger-default) 18%, var(--ld-gray-900))",
+		textPrimary: "var(--ld-gray-50)",
+		textSecondary: "var(--ld-gray-300)",
+		textBubbleOutgoing: "var(--ld-gray-50)",
+		textBubbleIncoming: "var(--ld-gray-50)",
+		textMention: "var(--ld-gray-50)",
+		textMentionTag: "var(--ld-primary-300)",
+		textTimestamp: "var(--ld-gray-400)",
+		textSystem: "var(--ld-gray-300)",
+		textPlaceholder: "var(--ld-gray-500)",
+		borderPrimary: "var(--ld-gray-700)",
+		borderInput: "var(--ld-gray-700)",
+		borderInputFocus: "var(--ld-primary-default)",
+		borderMention: "var(--ld-gray-700)",
+		colorSending: "var(--ld-gray-500)",
+		colorSent: "var(--ld-gray-400)",
+		colorDelivered: "var(--ld-primary-300)",
+		colorRead: "var(--ld-success-default)",
+		colorFailed: "var(--ld-danger-default)",
+		colorLink: "var(--ld-primary-300)",
+		shadowPanel: "none",
+		shadowMention: "none",
+		avatarBg: "var(--ld-primary-default)",
+		avatarText: "var(--ld-gray-50)",
+		btnPrimaryBg: "var(--ld-primary-default)",
+		btnPrimaryText: "var(--ld-gray-50)",
+		btnPrimaryHover: "var(--ld-primary-hover)",
+		scrollbarThumb: "var(--ld-gray-700)",
+		scrollbarTrack: "var(--ld-gray-800)",
+		bgToolbar: "var(--ld-gray-800)",
+		borderToolbar: "var(--ld-gray-700)",
+		toolbarIconColor: "var(--ld-gray-300)",
+		toolbarIconHover: "var(--ld-primary-300)",
+		toolbarVoiceActive: "var(--ld-danger-default)"
+	};
+	var N = class {
+		constructor(e, t, n) {
+			this.mode = "light", this.mediaQuery = null, this.mediaHandler = null, this.destroyed = !1, this.emitter = e, this.view = void 0 === n ? "undefined" == typeof window ? null : window : n, t && this.setTheme(t);
+		}
+		getMode() {
+			return this.mode;
+		}
+		getResolvedTheme() {
+			return "auto" === this.mode ? this.getSystemTheme() : this.mode;
+		}
+		getTokens() {
+			return "dark" === this.getResolvedTheme() ? F : H;
 		}
-		limitInput(content) {
-			const max = this.config.maxInputLength;
-			if (!max || max <= 0) return content;
-			return content.slice(0, max);
+		setTheme(e) {
+			this.destroyed || (this.cleanupMediaListener(), this.mode = e, "auto" === e && this.setupMediaListener(), this.emitter.emit("theme-change", this.getResolvedTheme(), this.getTokens()));
 		}
-		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;
+		getSystemTheme() {
+			const e = this.view?.matchMedia;
+			return e && e.call(this.view, "(prefers-color-scheme: dark)").matches ? "dark" : "light";
 		}
-		escapeHtml(str) {
-			const div = document.createElement("div");
-			div.textContent = str;
-			return div.innerHTML;
+		setupMediaListener() {
+			if (!this.view?.matchMedia) return;
+			this.mediaQuery = this.view.matchMedia("(prefers-color-scheme: dark)"), this.mediaHandler = () => {
+				this.emitter.emit("theme-change", this.getResolvedTheme(), this.getTokens());
+			};
+			const e = this.mediaQuery;
+			"function" == typeof e.addEventListener ? e.addEventListener("change", this.mediaHandler) : e.addListener?.(this.mediaHandler);
 		}
-		escapeAttr(str) {
-			return str.replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+		cleanupMediaListener() {
+			if (this.mediaQuery && this.mediaHandler) {
+				const e = this.mediaQuery;
+				"function" == typeof e.removeEventListener ? e.removeEventListener("change", this.mediaHandler) : e.removeListener?.(this.mediaHandler), this.mediaQuery = null, this.mediaHandler = null;
+			}
 		}
-		escapeRegex(str) {
-			return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+		destroy() {
+			this.destroyed || (this.destroyed = !0, this.cleanupMediaListener());
+		}
+	}, O = class {
+		constructor() {
+			this.entries = [];
+		}
+		load() {
+			return j(this.entries);
+		}
+		save(e) {
+			this.entries = j(e);
 		}
 	};
-	//#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 U(e) {
+		return e.clientMessageId ?? e.id;
 	}
-	function cls(prefix, ...parts) {
-		const normalizedPrefix = normalizeClassPrefix(prefix);
-		return parts.map((part) => `${normalizedPrefix}-${part}`).join(" ");
+	function V(e) {
+		return {
+			...e,
+			message: d(e.message)
+		};
 	}
-	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 j(e) {
+		return e.map(V);
 	}
-	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
+	function _(e) {
+		const t = a(e.message);
+		return {
+			id: "string" == typeof e.id && e.id ? e.id : U(t),
+			message: t,
+			enqueuedAt: Number.isFinite(e.enqueuedAt) ? e.enqueuedAt : Date.now(),
+			attempts: Number.isFinite(e.attempts) ? Math.max(0, Math.floor(e.attempts)) : 0,
+			state: "failed" === e.state ? "failed" : "pending",
+			..."string" == typeof e.lastError && { lastError: e.lastError }
 		};
-		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 G(e) {
+		return e instanceof Error ? e.message : String(e);
 	}
-	function v(name) {
-		return `var(${COMPONENT_CSS_VAR_PREFIX}-${name})`;
+	function Q() {
+		return new DOMException("The operation was aborted.", "AbortError");
 	}
-	function toKebab(key) {
-		return key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+	function W(e) {
+		const t = globalThis.crypto;
+		return t?.randomUUID ? t.randomUUID() : `client-${e}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 	}
-	//#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
+	exports.CHAT_MESSAGE_SCHEMA_VERSION = 1, exports.COMPONENT_CSS_VAR_PREFIX = t, exports.ChatManager = b, exports.ChatOutbox = class {
+		constructor(e = {}) {
+			this.entries = [], this.hydrated = !1, this.writePromise = Promise.resolve(), this.storage = e.storage ?? new O(), this.now = e.now ?? Date.now;
+		}
+		async hydrate() {
+			return this.hydrated || (this.entries = (await this.storage.load()).map(_), this.hydrated = !0), this.list();
+		}
+		list() {
+			return j(this.entries);
+		}
+		async enqueue(e) {
+			await this.hydrate();
+			const t = a({
+				...e,
+				clientMessageId: e.clientMessageId ?? e.id
+			}), n = U(t), s = this.entries.find((e) => e.id === n);
+			if (s) return V(s);
+			const i = {
+				id: n,
+				message: t,
+				enqueuedAt: this.now(),
+				attempts: 0,
+				state: "pending"
+			};
+			return this.entries.push(i), await this.persist(), V(i);
+		}
+		async remove(e) {
+			await this.hydrate();
+			const t = this.entries.findIndex((t) => t.id === e);
+			return !(t < 0) && (this.entries.splice(t, 1), await this.persist(), !0);
+		}
+		async retry(e) {
+			await this.hydrate();
+			for (const t of this.entries) e && t.id !== e || (t.state = "pending", t.lastError = void 0);
+			await this.persist();
+		}
+		async clear() {
+			await this.hydrate(), this.entries = [], await this.persist();
+		}
+		async flush(e, t = {}) {
+			await this.hydrate();
+			const n = Math.max(1, Math.floor(t.maxAttempts ?? 3)), s = Math.min(8, Math.max(1, Math.floor(t.concurrency ?? 1))), i = this.entries.filter((e) => "pending" === e.state), r = [], a = [];
+			let o = 0;
+			const l = async () => {
+				for (; o < i.length;) {
+					if (t.signal?.aborted) throw Q();
+					const s = i[o++];
+					s.attempts += 1;
+					try {
+						await e(s.message, {
+							signal: t.signal,
+							clientMessageId: s.message.clientMessageId ?? s.id
+						});
+						const n = this.entries.findIndex((e) => e.id === s.id);
+						n >= 0 && this.entries.splice(n, 1), r.push(s.id);
+					} catch (e) {
+						s.lastError = G(e), s.attempts >= n && (s.state = "failed"), a.push({
+							id: s.id,
+							error: e
+						});
+					}
+					await this.persist();
+				}
+			};
+			return await Promise.all(Array.from({ length: s }, () => l())), {
+				sent: r,
+				failed: a,
+				remaining: this.list()
+			};
+		}
+		async persist() {
+			const e = j(this.entries), t = this.writePromise;
+			this.writePromise = t.then(() => this.storage.save(e)), await this.writePromise;
+		}
+	}, exports.ChatTransportController = $, exports.DEFAULT_CLASS_PREFIX = e, exports.DOMRenderer = R, exports.EventEmitter = v, exports.MemoryChatOutboxStorage = O, exports.MentionEngine = y, exports.STYLE_ELEMENT_ID = n, exports.ThemeManager = N, exports.cloneChatMessage = d, exports.cls = function(e, ...t) {
+		const n = s(e);
+		return t.map((e) => `${n}-${e}`).join(" ");
+	}, exports.clsx = E, exports.compareChatMessages = function(e, t) {
+		return Number.isFinite(e.sequence) && Number.isFinite(t.sequence) && e.sequence !== t.sequence ? e.sequence - t.sequence : e.timestamp !== t.timestamp ? e.timestamp - t.timestamp : e.id.localeCompare(t.id);
+	}, exports.createChat = function(e) {
+		let t;
+		if ("string" == typeof e.container) {
+			if ("undefined" == typeof document) throw new Error("[Chat] A browser Document is required to resolve a container selector.");
+			t = document.querySelector(e.container);
+		} else t = e.container;
+		if (!t) throw new Error(`[Chat] Container not found: ${e.container}`);
+		const n = t.ownerDocument, i = s(e.classPrefix ?? "ldesign-chat"), r = {
+			...e,
+			classPrefix: i
+		}, o = new v(), l = new b(o, r.messages), d = new y(o, r.mentionMembers), c = new N(o, r.theme ?? "light", n.defaultView), h = new R(t, r, o, d);
+		let m = !1;
+		const g = (e) => {
+			const t = () => {
+				m || e();
+			};
+			n.defaultView?.requestAnimationFrame ? n.defaultView.requestAnimationFrame(t) : setTimeout(t, 0);
 		};
-		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);
+		h.init(), h.renderMessages(l.getMessages()), h.setThemeTokens(c.getTokens()), w(c.getTokens(), i, h.getRootElement());
+		const u = async (e) => {
+			const t = l.getMessageIdByClientMessageId(e.clientMessageId);
+			t && l.updateMessage(t, {
+				...e.message ?? {},
+				id: t,
+				clientMessageId: e.clientMessageId,
+				status: "sent",
+				...void 0 !== e.sequence && { sequence: e.sequence },
+				...void 0 !== e.cursor && { cursor: e.cursor }
+			}), r.outbox && await r.outbox.remove(e.clientMessageId), o.emit("transport-ack", e);
+		}, p = r.transport ? new $(r.transport, {
+			conversationId: r.conversationId,
+			cursor: r.transportCursor,
+			onEvent: (e) => {
+				"message" === e.type ? l.upsertMessage({
+					...e.message,
+					...void 0 !== e.cursor && { cursor: e.cursor }
+				}, {
+					sequence: e.sequence,
+					source: "remote"
+				}) : "ack" === e.type ? u(e.ack).catch((e) => {
+					o.emit("transport-error", e);
+				}) : "cursor" === e.type ? o.emit("transport-cursor", e.cursor) : o.emit("transport-error", e.error, e.recoverable);
+			},
+			onStatusChange: (e) => {
+				o.emit("transport-status", e);
+			}
+		}) : null;
+		g(() => {
+			h.scrollToBottom(!1);
+		}), o.on("theme-change", (e, t) => {
+			h.setThemeTokens(t);
+		}), o.on("message-added", (e) => {
+			h.appendMessage(e), g(() => {
+				h.scrollToBottom(!0);
 			});
-		});
-		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);
+		}), o.on("mention-select", (e) => {
+			r.onMentionSelect?.(e);
+		}), o.on("messages-prepended", (e) => {
+			h.prependMessages(e);
+		}), o.on("message-updated", (e) => {
+			h.updateMessage(e.id, e);
+		}), o.on("message-removed", (e) => {
+			h.removeMessage(e.id);
+		}), o.on("message-content-appended", (e, t) => {
+			h.updateMessageContent(e, t), g(() => {
+				h.scrollToBottom(!1);
 			});
 		});
-		return {
-			addMessage(message) {
-				chatManager.addMessage(message);
+		const f = {
+			addMessage(e) {
+				m || l.addMessage(e);
 			},
-			prependMessages(messages) {
-				chatManager.prependMessages(messages);
+			prependMessages(e) {
+				m || l.prependMessages(e);
 			},
-			updateMessage(id, updates) {
-				chatManager.updateMessage(id, updates);
+			updateMessage(e, t) {
+				m || l.updateMessage(e, t);
 			},
-			removeMessage(id) {
-				chatManager.removeMessage(id);
+			removeMessage(e) {
+				m || l.removeMessage(e);
 			},
-			setMessages(messages) {
-				chatManager.setMessages(messages);
-				renderer.renderMessages(chatManager.getMessages());
-				requestAnimationFrame(() => {
-					renderer.scrollToBottom(false);
-				});
+			setMessages(e) {
+				m || (l.setMessages(e), h.renderMessages(l.getMessages()), g(() => {
+					h.scrollToBottom(!1);
+				}));
 			},
 			clearMessages() {
-				chatManager.clearMessages();
-				renderer.renderMessages([]);
+				m || (l.clearMessages(), h.renderMessages([]));
 			},
-			scrollToBottom(smooth = true) {
-				renderer.scrollToBottom(smooth);
+			scrollToBottom(e = !0) {
+				m || h.scrollToBottom(e);
 			},
-			setTheme(theme) {
-				themeManager.setTheme(theme);
+			setTheme(e) {
+				m || c.setTheme(e);
 			},
-			setMentionMembers(members) {
-				mentionEngine.setMembers(members);
+			setMentionMembers(e) {
+				m || d.setMembers(e);
 			},
-			setLoadingMore(loading) {
-				renderer.setLoadingMore(loading);
+			setLoadingMore(e) {
+				m || h.setLoadingMore(e);
 			},
 			focusInput() {
-				renderer.focusInput();
-			},
-			setInputContent(content) {
-				renderer.setInputContent(content);
+				m || h.focusInput();
 			},
-			getInputContent() {
-				return renderer.getInputContent();
+			setInputContent(e) {
+				m || h.setInputContent(e);
 			},
+			getInputContent: () => m ? "" : h.getInputContent(),
 			clearInput() {
-				renderer.clearInput();
+				m || h.clearInput();
 			},
-			isAtBottom(threshold) {
-				return renderer.isAtBottom(threshold);
+			isAtBottom: (e) => m || h.isAtBottom(e),
+			on: (e, t) => m ? () => {} : o.on(e, t),
+			getMessages: () => m ? [] : l.getMessages(),
+			getMessage: (e) => m ? void 0 : l.getMessage(e),
+			appendMessageContent: (e, t) => !m && l.appendMessageContent(e, t),
+			finishStreaming: (e, t) => !m && l.finishStreaming(e, t),
+			beginStreaming: (e, t) => m ? null : l.beginStreaming(e, t),
+			cancelStreaming: (e, t) => !m && l.cancelStreaming(e, t),
+			mergeMessage: (e, t) => m ? "ignored" : l.upsertMessage(e, {
+				sequence: t,
+				source: "remote"
+			}),
+			async connectTransport(e) {
+				if (!p) throw new Error("No chat transport is configured.");
+				await p.connect(e);
 			},
-			on(event, handler) {
-				return emitter.on(event, handler);
+			async disconnectTransport() {
+				await p?.disconnect();
 			},
-			getMessages() {
-				return chatManager.getMessages();
-			},
-			getMessage(id) {
-				return chatManager.getMessage(id);
-			},
-			appendMessageContent(id, chunk) {
-				chatManager.appendMessageContent(id, chunk);
+			getTransportStatus: () => p?.getStatus() ?? "idle",
+			async sendMessage(e, t = {}) {
+				if (!p) throw new Error("No chat transport is configured.");
+				if (m) throw new Error("Chat instance is destroyed.");
+				const n = a({
+					...e,
+					clientMessageId: e.clientMessageId ?? W(e.id),
+					status: e.status ?? "sending"
+				});
+				l.addMessage(n);
+				try {
+					r.outbox && await r.outbox.enqueue(n);
+					const e = await p.send(n, {
+						signal: t.signal,
+						clientMessageId: n.clientMessageId
+					});
+					return e ? await u(e) : l.markMessageStatus(n.id, "sent"), o.emit("message-sent", n, e), e;
+				} catch (e) {
+					throw l.markMessageStatus(n.id, "failed"), o.emit("message-send-failed", n, e), e;
+				}
 			},
-			finishStreaming(id) {
-				chatManager.finishStreaming(id);
+			async flushOutbox(e = {}) {
+				if (!r.outbox) return {
+					sent: [],
+					failed: [],
+					remaining: []
+				};
+				if (!p) throw new Error("No chat transport is configured.");
+				return r.outbox.flush(async (e, t) => {
+					const n = await p.send(e, t);
+					n ? await u(n) : e.id && l.markMessageStatus(e.id, "sent");
+				}, e);
 			},
 			destroy() {
-				themeManager.destroy();
-				renderer.destroy();
-				emitter.removeAll();
-				removeStyles(prefix);
+				m || (m = !0, p?.dispose(), c.destroy(), h.destroy(), o.removeAll(), M(i, n));
 			}
 		};
-	}
-	//#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;
+		return r.autoConnect && p && f.connectTransport().catch((e) => {
+			o.emit("transport-error", e);
+		}), f;
+	}, exports.cx = r, exports.darkTokens = F, exports.getStyleElementId = i, exports.injectStyles = w, exports.lightTokens = H, exports.normalizeChatContentBlocks = o, exports.normalizeChatMessage = a, exports.normalizeChatMessages = l, exports.normalizeClassPrefix = s, exports.removeStyles = M, exports.updateStyles = function(t, n = e, r) {
+		const a = s(n), o = i(a);
+		r ? C(r, t) : k(I(), o, L(t, a));
+	}, exports.version = "0.1.0";
 });
 /*! End of @composy/chat-core | Powered by @composy/builder */
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.min.js.map