@antdv-next/x 0.0.2 → 0.0.4

package/dist/index.umd.js

@@ -44,7 +44,7 @@
 	antdv_next_dist_theme_useToken = __toESM(antdv_next_dist_theme_useToken);
 	mermaid = __toESM(mermaid);
 	//#region package.json
-	var version = "0.0.2";
+	var version = "0.0.4";
 	//#endregion
 	//#region components/x-provider/context.ts
 	var XProviderContextKey = Symbol("antdv-next-x-provider-context");
@@ -523,7 +523,7 @@
 	}, prepareComponentToken$13);
 	//#endregion
 	//#region components/actions/Actions.tsx
-	function _isSlot$6(s) {
+	function _isSlot$7(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	function getMotionTransitionProps(motionName) {
@@ -683,7 +683,7 @@
 						attrs.style,
 						props.style
 					]
-				}), [transitionProps.value ? (0, vue.createVNode)(vue.Transition, transitionProps.value, _isSlot$6(_slot = renderList()) ? _slot : { default: () => [_slot] }) : renderList()]);
+				}), [transitionProps.value ? (0, vue.createVNode)(vue.Transition, transitionProps.value, _isSlot$7(_slot = renderList()) ? _slot : { default: () => [_slot] }) : renderList()]);
 			};
 		}
 	});
@@ -2199,7 +2199,7 @@
 	});
 	//#endregion
 	//#region components/file-card/List.tsx
-	function _isSlot$5(s) {
+	function _isSlot$6(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var XFileCardList = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2367,7 +2367,7 @@
 					"style": [props.style, splitStyles.value.root],
 					"onScroll": checkPing
 				}, [
-					(0, vue.createVNode)(vue.TransitionGroup, { "name": `${compCls.value}-motion` }, _isSlot$5(_slot = list.value.map((item, itemIndex) => {
+					(0, vue.createVNode)(vue.TransitionGroup, { "name": `${compCls.value}-motion` }, _isSlot$6(_slot = list.value.map((item, itemIndex) => {
 						const { __key, ...fileItem } = item;
 						const cardSlots = {
 							description: slots.description ? (slotInfo) => slots.description?.({
@@ -2694,7 +2694,7 @@
 	});
 	//#endregion
 	//#region components/attachments/PlaceholderUploader.tsx
-	function _isSlot$4(s) {
+	function _isSlot$5(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var PlaceholderUploader = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2789,7 +2789,7 @@
 						border: 0,
 						background: "transparent"
 					}
-				}), _isSlot$4(node) ? node : { default: () => [node] })]);
+				}), _isSlot$5(node) ? node : { default: () => [node] })]);
 			};
 		}
 	});
@@ -2906,7 +2906,7 @@
 	}, prepareComponentToken$11);
 	//#endregion
 	//#region components/attachments/index.tsx
-	function _isSlot$3(s) {
+	function _isSlot$4(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var XAttachments = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -3132,7 +3132,7 @@
 						props.rootClass,
 						mergedClasses.value.root
 					]
-				}, _isSlot$3(_slot = getPlaceholderNode("drop")) ? _slot : { default: () => [_slot] })]);
+				}, _isSlot$4(_slot = getPlaceholderNode("drop")) ? _slot : { default: () => [_slot] })]);
 			};
 			const renderNormalMode = () => {
 				let _slot2;
@@ -3171,7 +3171,7 @@
 						"getDropContainer": props.getDropContainer || (() => containerRef.value),
 						"prefixCls": props.prefixCls,
 						"class": [hashId.value, cssVarCls.value]
-					}, _isSlot$3(_slot2 = getPlaceholderNode("drop")) ? _slot2 : { default: () => [_slot2] })
+					}, _isSlot$4(_slot2 = getPlaceholderNode("drop")) ? _slot2 : { default: () => [_slot2] })
 				]);
 			};
 			return () => slots.default ? renderWithChildren() : renderNormalMode();
@@ -4191,7 +4191,7 @@
 	});
 	//#endregion
 	//#region components/bubble/Divider.tsx
-	function _isSlot$2(s) {
+	function _isSlot$3(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var XBubbleDivider = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -4257,7 +4257,7 @@
 				"class": [`${props.prefixCls}-divider`, props.class],
 				"styles": props.styles,
 				"classes": props.classes
-			}), { contentRender: ({ content }) => (0, vue.createVNode)(antdv_next.Divider, props.dividerProps, _isSlot$2(content) ? content : { default: () => [content] }) });
+			}), { contentRender: ({ content }) => (0, vue.createVNode)(antdv_next.Divider, props.dividerProps, _isSlot$3(content) ? content : { default: () => [content] }) });
 		}
 	});
 	//#endregion
@@ -5579,7 +5579,7 @@
 	}
 	//#endregion
 	//#region components/conversations/Item.tsx
-	function _isSlot$1(s) {
+	function _isSlot$2(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var stopPropagation = (event) => {
@@ -5720,14 +5720,14 @@
 					}
 				}, [
 					hasRenderableNode$6(iconNode) && (0, vue.createVNode)("div", { "class": `${props.prefixCls}-icon` }, [iconNode]),
-					(0, vue.createVNode)(antdv_next.Typography.Text, { "class": `${props.prefixCls}-label` }, _isSlot$1(labelNode) ? labelNode : { default: () => [labelNode] }),
+					(0, vue.createVNode)(antdv_next.Typography.Text, { "class": `${props.prefixCls}-label` }, _isSlot$2(labelNode) ? labelNode : { default: () => [labelNode] }),
 					!disabled && props.menu && (0, vue.createVNode)("div", { "onClick": stopPropagation }, [(0, vue.createVNode)(antdv_next.Dropdown, {
 						"menu": menuProps.value,
 						"placement": props.direction === "rtl" ? "bottomLeft" : "bottomRight",
 						"trigger": ["click"],
 						"disabled": disabled,
 						"getPopupContainer": menuProps.value?.getPopupContainer
-					}, _isSlot$1(_slot = renderMenuTrigger(props.info)) ? _slot : { default: () => [_slot] })])
+					}, _isSlot$2(_slot = renderMenuTrigger(props.info)) ? _slot : { default: () => [_slot] })])
 				]);
 			};
 		}
@@ -7074,10 +7074,6 @@
 			variant: {
 				type: String,
 				default: void 0
-			},
-			class: {
-				type: String,
-				default: void 0
 			}
 		},
 		setup(props, { attrs }) {
@@ -7100,7 +7096,7 @@
 					"disabled": mergedDisabled.value,
 					"class": [
 						prefixCls,
-						props.class,
+						attrs.class,
 						{ [`${prefixCls}-disabled`]: mergedDisabled.value }
 					],
 					"onClick": (e) => {
@@ -7211,6 +7207,811 @@
 		}
 	});
 	//#endregion
+	//#region components/sender/context.ts
+	var SenderContextKey = Symbol("sender-context");
+	function useSenderContext() {
+		return (0, vue.inject)(SenderContextKey, (0, vue.computed)(() => ({})));
+	}
+	function provideSenderContext(value) {
+		(0, vue.provide)(SenderContextKey, value);
+	}
+	//#endregion
+	//#region components/sender/components/Skill.tsx
+	function _isSlot$1(s) {
+		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+	}
+	var Skill_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		name: "SenderSkill",
+		props: {
+			prefixCls: {
+				type: String,
+				required: true
+			},
+			skill: {
+				type: Object,
+				required: true
+			},
+			removeSkill: {
+				type: Function,
+				required: true
+			}
+		},
+		setup(props) {
+			const componentCls = (0, vue.computed)(() => `${props.prefixCls}-skill`);
+			const closeNode = (0, vue.computed)(() => {
+				const closable = props.skill.closable;
+				if (!closable) return null;
+				const config = typeof closable === "boolean" ? {} : closable;
+				const closeIcon = config.closeIcon ?? (0, vue.createVNode)(_antdv_next_icons.CloseOutlined, { "class": `${componentCls.value}-close-icon` }, null);
+				return (0, vue.createVNode)("div", {
+					"class": (0, _v_c_util.classNames)([`${componentCls.value}-close`, { [`${componentCls.value}-close-disabled`]: config.disabled }]),
+					"role": "button",
+					"aria-label": "Close skill",
+					"tabindex": 0,
+					"onClick": (event) => {
+						if (config.disabled) return;
+						event.stopPropagation();
+						props.removeSkill();
+						config.onClose?.(event);
+					}
+				}, [closeIcon]);
+			});
+			return () => {
+				const mergeTitle = props.skill.title ?? props.skill.value;
+				const titleNode = props.skill.toolTip ? (0, vue.createVNode)(antdv_next.Tooltip, props.skill.toolTip, _isSlot$1(mergeTitle) ? mergeTitle : { default: () => [mergeTitle] }) : mergeTitle;
+				return (0, vue.createVNode)("div", {
+					"class": `${componentCls.value}-wrapper`,
+					"contenteditable": false
+				}, [(0, vue.createVNode)("div", {
+					"class": `${componentCls.value}-tag`,
+					"contenteditable": false,
+					"role": "button",
+					"tabindex": 0
+				}, [(0, vue.createVNode)("span", { "class": `${componentCls.value}-tag-text` }, [titleNode]), closeNode.value]), (0, vue.createVNode)("div", { "class": `${componentCls.value}-holder` }, null)]);
+			};
+		}
+	});
+	//#endregion
+	//#region components/sender/components/SlotTextArea.tsx
+	var SUPPORTED_INPUT_TYPES = new Set([
+		"input",
+		"select",
+		"custom",
+		"content"
+	]);
+	function stringifyValue(value) {
+		if (value === void 0 || value === null) return "";
+		if (typeof value === "string") return value;
+		if (typeof value === "number" || typeof value === "boolean") return `${value}`;
+		try {
+			return JSON.stringify(value);
+		} catch {
+			return "";
+		}
+	}
+	function getDefaultSlotValue(config) {
+		if (!config.key) return void 0;
+		const props = config.props ?? {};
+		if (SUPPORTED_INPUT_TYPES.has(config.type)) return props.defaultValue ?? "";
+		return props.value ?? props.label ?? "";
+	}
+	var SlotTextArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
+		name: "SlotTextArea",
+		setup(_, { expose }) {
+			const senderCtx = useSenderContext();
+			const editableRef = (0, vue.ref)();
+			const slotDomMap = (0, vue.ref)(/* @__PURE__ */ new Map());
+			const slotConfigMap = (0, vue.ref)(/* @__PURE__ */ new Map());
+			const slotValues = (0, vue.ref)({});
+			const mountedDomSet = (0, vue.ref)(/* @__PURE__ */ new Set());
+			const skillDomRef = (0, vue.ref)(null);
+			const currentSkillRef = (0, vue.ref)(void 0);
+			const lastSlotConfigRef = (0, vue.ref)(void 0);
+			const lastSkillRef = (0, vue.ref)(void 0);
+			const isComposing = (0, vue.ref)(false);
+			const keyLock = (0, vue.ref)(false);
+			const prefixCls = (0, vue.computed)(() => senderCtx.value.prefixCls || "antd-sender");
+			const mergeInputStyle = (0, vue.computed)(() => ({
+				...senderCtx.value.styles?.input,
+				...getAutoSizeStyle()
+			}));
+			const getAutoSizeStyle = () => {
+				const autoSize = senderCtx.value.autoSize;
+				if (autoSize === true) return { height: "auto" };
+				if (!autoSize || typeof autoSize !== "object") return {};
+				const lineHeight = 22;
+				return {
+					minHeight: autoSize.minRows ? `${autoSize.minRows * lineHeight}px` : void 0,
+					maxHeight: autoSize.maxRows ? `${autoSize.maxRows * lineHeight}px` : void 0,
+					overflowY: "auto"
+				};
+			};
+			const getNodeInfo = (targetNode) => {
+				if (!targetNode?.dataset) return null;
+				const slotKey = targetNode.dataset.slotKey;
+				return {
+					slotKey,
+					skillKey: targetNode.dataset.skillKey,
+					nodeType: targetNode.dataset.nodeType,
+					slotConfig: slotKey ? slotConfigMap.value.get(slotKey) : void 0
+				};
+			};
+			const unmountDom = (container) => {
+				if (!container) return;
+				(0, vue.render)(null, container);
+				mountedDomSet.value.delete(container);
+			};
+			const unmountAllPortals = () => {
+				mountedDomSet.value.forEach((container) => {
+					(0, vue.render)(null, container);
+				});
+				mountedDomSet.value.clear();
+			};
+			const buildSkillSpan = (key) => {
+				const span = document.createElement("span");
+				span.setAttribute("contenteditable", "false");
+				span.dataset.skillKey = key;
+				span.dataset.placeholder = senderCtx.value.placeholder || "";
+				span.className = `${prefixCls.value}-skill`;
+				return span;
+			};
+			const buildSlotSpan = (key) => {
+				const span = document.createElement("span");
+				span.setAttribute("contenteditable", "false");
+				span.dataset.slotKey = key;
+				span.className = `${prefixCls.value}-slot`;
+				return span;
+			};
+			const buildEditSlotSpan = (config) => {
+				const span = document.createElement("span");
+				span.setAttribute("contenteditable", senderCtx.value.readOnly ? "false" : "true");
+				span.dataset.slotKey = config.key;
+				span.className = `${prefixCls.value}-slot ${prefixCls.value}-slot-content`;
+				return span;
+			};
+			const buildSpaceSpan = (slotKey, position) => {
+				const span = document.createElement("span");
+				span.setAttribute("contenteditable", "false");
+				span.dataset.slotKey = slotKey;
+				span.dataset.nodeType = "nbsp";
+				span.className = `${prefixCls.value}-slot-${position} ${prefixCls.value}-slot-no-width`;
+				span.textContent = "\xA0";
+				return span;
+			};
+			const getNodeTextValue = (node) => {
+				if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
+				if (node.nodeType !== Node.ELEMENT_NODE) return "";
+				const element = node;
+				const nodeInfo = getNodeInfo(element);
+				if (!nodeInfo) return element.innerText || "";
+				if (nodeInfo.skillKey) return "";
+				if (nodeInfo.slotKey) {
+					if (nodeInfo.nodeType === "nbsp") return " ";
+					const config = nodeInfo.slotConfig;
+					if (!config || config.type === "content") return element.innerText || "";
+					const rawValue = slotValues.value[nodeInfo.slotKey];
+					return config.formatResult?.(rawValue) ?? stringifyValue(rawValue);
+				}
+				return element.innerText || "";
+			};
+			const getEditorValue = () => {
+				const editable = editableRef.value;
+				const emptyResult = {
+					value: "",
+					slotConfig: [],
+					skill: void 0
+				};
+				if (!editable) return emptyResult;
+				const childNodes = editable.childNodes;
+				if (childNodes.length === 0) return emptyResult;
+				const textList = [];
+				const currentSlotConfig = [];
+				let currentSkill;
+				childNodes.forEach((node) => {
+					const textValue = getNodeTextValue(node);
+					textList.push(textValue);
+					if (node.nodeType === Node.TEXT_NODE) {
+						if (textValue) currentSlotConfig.push({
+							type: "text",
+							value: textValue
+						});
+						return;
+					}
+					if (node.nodeType === Node.ELEMENT_NODE) {
+						const info = getNodeInfo(node);
+						if (!info) return;
+						if (info.skillKey && currentSkillRef.value) currentSkill = currentSkillRef.value;
+						if (info.slotKey && info.nodeType !== "nbsp") {
+							const cfg = slotConfigMap.value.get(info.slotKey);
+							if (cfg) currentSlotConfig.push({
+								...cfg,
+								value: textValue
+							});
+						}
+					}
+				});
+				return {
+					value: textList.join(""),
+					slotConfig: currentSlotConfig,
+					skill: currentSkill
+				};
+			};
+			const updateSubmitDisabled = () => {
+				const value = getEditorValue();
+				senderCtx.value.setSubmitDisabled?.(!value.value && value.slotConfig.length === 0 && !value.skill);
+			};
+			const triggerValueChange = (event) => {
+				const value = getEditorValue();
+				senderCtx.value.onChange?.(value.value, event, value.slotConfig, value.skill);
+				updateSkillEmptyStatus(value);
+				updateSubmitDisabled();
+			};
+			const updateSlot = (key, value, event) => {
+				slotValues.value = {
+					...slotValues.value,
+					[key]: value
+				};
+				const config = slotConfigMap.value.get(key);
+				const dom = slotDomMap.value.get(key);
+				if (config && dom && config.type !== "content") renderSlot(config, dom);
+				triggerValueChange(event);
+			};
+			const buildSelectMenuItems = (options) => {
+				return (options ?? []).map((option) => ({
+					label: option,
+					key: option
+				}));
+			};
+			const renderSlot = (config, slotDom) => {
+				if (!("key" in config) || !config.key) return;
+				const slotValue = slotValues.value[config.key];
+				let node = null;
+				switch (config.type) {
+					case "input":
+						node = (0, vue.createVNode)(antdv_next.Input, {
+							"class": `${prefixCls.value}-slot-input`,
+							"placeholder": config.props?.placeholder,
+							"value": slotValue ?? "",
+							"size": "small",
+							"variant": "borderless",
+							"readonly": senderCtx.value.readOnly,
+							"disabled": senderCtx.value.disabled,
+							"onKeydown": onInternalKeyDown,
+							"onChange": (e) => {
+								updateSlot(config.key, e?.target?.value ?? "", e);
+							}
+						}, null);
+						break;
+					case "select": {
+						const displayValue = stringifyValue(slotValue);
+						node = (0, vue.createVNode)(antdv_next.Dropdown, {
+							"disabled": senderCtx.value.readOnly || senderCtx.value.disabled,
+							"trigger": ["click"],
+							"menu": {
+								items: buildSelectMenuItems(config.props?.options),
+								selectable: true,
+								selectedKeys: displayValue ? [displayValue] : [],
+								onSelect: ({ key, domEvent }) => {
+									updateSlot(config.key, key, domEvent);
+								}
+							}
+						}, { default: () => [(0, vue.createVNode)("span", { "class": (0, _v_c_util.classNames)([`${prefixCls.value}-slot-select`, {
+							placeholder: !displayValue,
+							[`${prefixCls.value}-slot-select-selector-value`]: !!displayValue
+						}]) }, [(0, vue.createVNode)("span", {
+							"data-placeholder": config.props?.placeholder,
+							"class": `${prefixCls.value}-slot-select-value`
+						}, [displayValue]), (0, vue.createVNode)("span", { "class": `${prefixCls.value}-slot-select-arrow` }, [(0, vue.createTextVNode)("▼")])])] });
+						break;
+					}
+					case "tag":
+						node = (0, vue.createVNode)("span", { "class": `${prefixCls.value}-slot-tag` }, [config.props?.label ?? config.props?.value ?? ""]);
+						break;
+					case "custom":
+						node = config.customRender?.(slotValue, (nextValue) => {
+							updateSlot(config.key, nextValue);
+						}, {
+							disabled: senderCtx.value.disabled,
+							readOnly: senderCtx.value.readOnly
+						}, config);
+						break;
+					case "content":
+						slotDom.innerText = stringifyValue(slotValue);
+						slotDom.dataset.placeholder = config.props?.placeholder ?? "";
+						return;
+					default: return;
+				}
+				if (!node) return;
+				mountedDomSet.value.add(slotDom);
+				(0, vue.render)(node, slotDom);
+			};
+			const buildSlotNodes = (configs) => {
+				const list = [];
+				configs.forEach((config) => {
+					if (config.type === "text") {
+						list.push(document.createTextNode(config.value || ""));
+						return;
+					}
+					if (!("key" in config) || !config.key) {
+						warning(false, "Sender", "Slot key is missing");
+						return;
+					}
+					slotConfigMap.value.set(config.key, config);
+					if (config.type === "content") {
+						const before = buildSpaceSpan(config.key, "before");
+						const slot = buildEditSlotSpan(config);
+						const after = buildSpaceSpan(config.key, "after");
+						slotValues.value[config.key] = slotValues.value[config.key] ?? getDefaultSlotValue(config);
+						slot.innerText = stringifyValue(slotValues.value[config.key]);
+						slot.dataset.placeholder = config.props?.placeholder ?? "";
+						slotDomMap.value.set(`${config.key}_before`, before);
+						slotDomMap.value.set(config.key, slot);
+						slotDomMap.value.set(`${config.key}_after`, after);
+						list.push(before, slot, after);
+						return;
+					}
+					const slot = buildSlotSpan(config.key);
+					slotValues.value[config.key] = slotValues.value[config.key] ?? getDefaultSlotValue(config);
+					slotDomMap.value.set(config.key, slot);
+					renderSlot(config, slot);
+					list.push(slot);
+				});
+				return list;
+			};
+			const mergeSlotConfig = (configs) => {
+				const nextValues = { ...slotValues.value };
+				configs.forEach((config) => {
+					if ("key" in config && config.key) {
+						slotConfigMap.value.set(config.key, config);
+						if (!(config.key in nextValues)) nextValues[config.key] = getDefaultSlotValue(config);
+					}
+				});
+				slotValues.value = nextValues;
+			};
+			const clearEditor = () => {
+				unmountAllPortals();
+				slotDomMap.value.clear();
+				slotConfigMap.value.clear();
+				slotValues.value = {};
+				currentSkillRef.value = void 0;
+				if (skillDomRef.value) unmountDom(skillDomRef.value);
+				skillDomRef.value = null;
+				if (editableRef.value) editableRef.value.innerHTML = "";
+			};
+			const getSelection = () => {
+				if (typeof window === "undefined") return null;
+				return window.getSelection();
+			};
+			const setRange = (range, selection) => {
+				selection.removeAllRanges();
+				selection.addRange(range);
+			};
+			const setCursorPosition = (targetNode, offset, preventScroll) => {
+				const editable = editableRef.value;
+				if (!editable) return;
+				editable.focus({ preventScroll });
+				const selection = getSelection();
+				if (!selection) return;
+				const range = document.createRange();
+				range.setStart(targetNode, offset);
+				range.collapse(true);
+				setRange(range, selection);
+			};
+			const setStartCursor = (preventScroll) => {
+				const editable = editableRef.value;
+				if (!editable) return;
+				setCursorPosition(editable, skillDomRef.value ? 1 : 0, preventScroll);
+			};
+			const setEndCursor = (preventScroll) => {
+				const editable = editableRef.value;
+				if (!editable) return;
+				editable.focus({ preventScroll });
+				const selection = getSelection();
+				if (!selection) return;
+				const range = document.createRange();
+				range.selectNodeContents(editable);
+				range.collapse(false);
+				setRange(range, selection);
+			};
+			const selectAll = (preventScroll) => {
+				const editable = editableRef.value;
+				if (!editable) return;
+				editable.focus({ preventScroll });
+				const selection = getSelection();
+				if (!selection) return;
+				const range = document.createRange();
+				range.selectNodeContents(editable);
+				if (skillDomRef.value) range.setStart(editable, 1);
+				setRange(range, selection);
+			};
+			const focusSlot = (key, preventScroll) => {
+				const editable = editableRef.value;
+				if (!editable) return;
+				const resolveTarget = (slotKey) => {
+					const slotDom = slotDomMap.value.get(slotKey);
+					const slotCfg = slotConfigMap.value.get(slotKey);
+					if (!slotDom || !slotCfg) return null;
+					if (slotCfg.type === "input") return slotDom.querySelector("input");
+					if (slotCfg.type === "content") return slotDom;
+					return null;
+				};
+				if (key) {
+					const target = resolveTarget(key);
+					if (target instanceof HTMLInputElement) {
+						target.focus({ preventScroll });
+						return;
+					}
+					if (target instanceof HTMLSpanElement) {
+						setCursorPosition(target, 0, preventScroll);
+						return;
+					}
+				}
+				for (const node of Array.from(editable.childNodes)) {
+					if (!(node instanceof HTMLElement)) continue;
+					const slotKey = node.dataset.slotKey;
+					const nodeType = node.dataset.nodeType;
+					if (!slotKey || nodeType === "nbsp") continue;
+					const target = resolveTarget(slotKey);
+					if (target instanceof HTMLInputElement) {
+						target.focus({ preventScroll });
+						return;
+					}
+					if (target instanceof HTMLSpanElement) {
+						setCursorPosition(target, 0, preventScroll);
+						return;
+					}
+				}
+				setEndCursor(preventScroll);
+			};
+			const removeSlot = (key, event) => {
+				const editable = editableRef.value;
+				if (!editable) return;
+				editable.querySelectorAll(`[data-slot-key="${key}"]`).forEach((element) => {
+					unmountDom(element);
+					element.remove();
+				});
+				const nextValues = { ...slotValues.value };
+				delete nextValues[key];
+				slotValues.value = nextValues;
+				slotConfigMap.value.delete(key);
+				slotDomMap.value.delete(key);
+				slotDomMap.value.delete(`${key}_before`);
+				slotDomMap.value.delete(`${key}_after`);
+				triggerValueChange(event);
+			};
+			const removeSkill = (triggerChange = true) => {
+				const skillDom = skillDomRef.value;
+				if (!skillDom) return;
+				unmountDom(skillDom);
+				skillDom.remove();
+				skillDomRef.value = null;
+				currentSkillRef.value = void 0;
+				if (triggerChange) triggerValueChange();
+			};
+			const renderSkill = () => {
+				const editable = editableRef.value;
+				const skill = senderCtx.value.skill;
+				if (!editable) return;
+				if (!skill) {
+					removeSkill(false);
+					return;
+				}
+				let skillDom = skillDomRef.value;
+				if (!skillDom) {
+					skillDom = buildSkillSpan(skill.value);
+					editable.insertBefore(skillDom, editable.firstChild);
+					skillDomRef.value = skillDom;
+				}
+				currentSkillRef.value = skill;
+				mountedDomSet.value.add(skillDom);
+				(0, vue.render)((0, vue.createVNode)(Skill_default, {
+					"prefixCls": prefixCls.value,
+					"skill": skill,
+					"removeSkill": () => removeSkill(true)
+				}, null), skillDom);
+			};
+			const updateSkillEmptyStatus = (value = getEditorValue()) => {
+				const skillDom = skillDomRef.value;
+				if (!skillDom) return;
+				if (!value.value && value.slotConfig.length === 0 && !!senderCtx.value.placeholder) {
+					skillDom.setAttribute("contenteditable", "true");
+					skillDom.classList.add(`${prefixCls.value}-skill-empty`);
+				} else {
+					skillDom.setAttribute("contenteditable", "false");
+					skillDom.classList.remove(`${prefixCls.value}-skill-empty`);
+				}
+			};
+			const initFromSlotConfig = (configs) => {
+				const editable = editableRef.value;
+				if (!editable) return;
+				clearEditor();
+				const mergeConfigs = configs ?? [];
+				mergeConfigs.forEach((config) => {
+					if ("key" in config && config.key) {
+						slotConfigMap.value.set(config.key, config);
+						const defaultValue = getDefaultSlotValue(config);
+						if (defaultValue !== void 0) slotValues.value[config.key] = defaultValue;
+					}
+				});
+				buildSlotNodes(mergeConfigs).forEach((node) => {
+					editable.appendChild(node);
+				});
+				renderSkill();
+				(0, vue.nextTick)(() => {
+					triggerValueChange();
+				});
+			};
+			const removeSpecificBRs = () => {
+				if (senderCtx.value.submitType !== "enter") return;
+				editableRef.value?.querySelectorAll("br").forEach((br) => br.remove());
+			};
+			const shouldSubmit = (event) => {
+				const { key, shiftKey, ctrlKey, altKey, metaKey } = event;
+				if (key !== "Enter") return false;
+				const isModifierPressed = ctrlKey || altKey || metaKey;
+				const submitType = senderCtx.value.submitType ?? "enter";
+				return submitType === "enter" && !shiftKey && !isModifierPressed || submitType === "shiftEnter" && shiftKey && !isModifierPressed;
+			};
+			const findOuterContainer = (node) => {
+				const editable = editableRef.value;
+				if (!node || !editable) return null;
+				let current = node;
+				if (current.nodeType === Node.TEXT_NODE) current = current.parentNode;
+				while (current && current !== editable) {
+					if (current instanceof HTMLElement && current.tagName === "SPAN") return current;
+					current = current.parentNode;
+				}
+				return null;
+			};
+			const handleBackspaceDelete = (event) => {
+				const selection = getSelection();
+				if (!selection || !selection.isCollapsed) return false;
+				const editable = editableRef.value;
+				if (!editable) return false;
+				let anchorNode = selection.anchorNode;
+				let offset = selection.anchorOffset;
+				if (!anchorNode || !editable.contains(anchorNode)) return false;
+				if (anchorNode === editable && offset > 0) {
+					anchorNode = editable.childNodes[offset - 1] ?? anchorNode;
+					offset = 0;
+				}
+				if (anchorNode.nodeType === Node.TEXT_NODE && offset > 0) return false;
+				const target = anchorNode.nodeType === Node.TEXT_NODE ? anchorNode.parentNode : anchorNode;
+				const previous = target === editable ? editable.childNodes[Math.max(0, selection.anchorOffset - 1)] : target?.previousSibling;
+				if (!(previous instanceof HTMLElement)) return false;
+				const info = getNodeInfo(previous);
+				if (info?.slotKey) {
+					event.preventDefault();
+					removeSlot(info.slotKey, event);
+					return true;
+				}
+				if (info?.skillKey) {
+					event.preventDefault();
+					removeSkill(true);
+					return true;
+				}
+				return false;
+			};
+			const onInternalKeyDown = (event) => {
+				if (senderCtx.value.onKeyDown?.(event) === false || keyLock.value || isComposing.value) return;
+				if (event.key === "Backspace" && handleBackspaceDelete(event)) return;
+				if (shouldSubmit(event)) {
+					event.preventDefault();
+					keyLock.value = true;
+					senderCtx.value.triggerSend?.();
+					return;
+				}
+				if ((event.key === "a" || event.key === "A") && (event.ctrlKey || event.metaKey)) {
+					event.preventDefault();
+					selectAll(true);
+				}
+			};
+			const onInternalKeyUp = (event) => {
+				if (event.key === "Enter") keyLock.value = false;
+				senderCtx.value.onKeyUp?.(event);
+			};
+			const onInternalInput = (event) => {
+				removeSpecificBRs();
+				triggerValueChange(event);
+			};
+			const onInternalPaste = (event) => {
+				event.preventDefault();
+				const files = event.clipboardData?.files;
+				const text = event.clipboardData?.getData("text/plain") ?? "";
+				if (!text && files?.length && senderCtx.value.onPasteFile) {
+					senderCtx.value.onPasteFile(files);
+					return;
+				}
+				if (text) {
+					const selection = getSelection();
+					if (selection && selection.rangeCount > 0) {
+						const range = selection.getRangeAt(0);
+						range.deleteContents();
+						const textNode = document.createTextNode(text.replace(/\u200B/g, ""));
+						range.insertNode(textNode);
+						range.setStartAfter(textNode);
+						range.collapse(true);
+						selection.removeAllRanges();
+						selection.addRange(range);
+					}
+				}
+				onInternalInput(event);
+				senderCtx.value.onPaste?.(event);
+			};
+			const onInternalSelect = () => {
+				const selection = getSelection();
+				const editable = editableRef.value;
+				if (!selection || !editable) return;
+				if (selection.focusNode === editable && selection.focusOffset === 0 && getEditorValue().skill) setCursorPosition(editable, 1);
+			};
+			const getRangeForInsert = (position = "cursor") => {
+				const editable = editableRef.value;
+				if (!editable) return null;
+				const selection = getSelection();
+				const range = document.createRange();
+				if (position === "start") {
+					const index = skillDomRef.value ? 1 : 0;
+					range.setStart(editable, index);
+					range.collapse(true);
+					return {
+						range,
+						selection
+					};
+				}
+				if (position === "end") {
+					range.selectNodeContents(editable);
+					range.collapse(false);
+					return {
+						range,
+						selection
+					};
+				}
+				if (selection && selection.rangeCount > 0 && editable.contains(selection.getRangeAt(0).startContainer)) {
+					const currentRange = selection.getRangeAt(0).cloneRange();
+					const outer = findOuterContainer(currentRange.startContainer);
+					const outerInfo = outer ? getNodeInfo(outer) : null;
+					if (outer && outerInfo?.slotKey && outerInfo.slotConfig?.type !== "content") {
+						currentRange.setStartAfter(outer);
+						currentRange.collapse(true);
+					}
+					return {
+						range: currentRange,
+						selection
+					};
+				}
+				range.selectNodeContents(editable);
+				range.collapse(false);
+				return {
+					range,
+					selection
+				};
+			};
+			const insert = (slotConfig, position = "cursor", replaceCharacters, preventScroll) => {
+				const editable = editableRef.value;
+				if (!editable || !slotConfig.length) return;
+				mergeSlotConfig(slotConfig);
+				const nodes = buildSlotNodes(slotConfig);
+				if (!nodes.length) return;
+				const insertContext = getRangeForInsert(position);
+				if (!insertContext?.range) return;
+				const { range, selection } = insertContext;
+				editable.focus({ preventScroll });
+				if (replaceCharacters) {
+					if ((getSelection()?.toString() ?? "").endsWith(replaceCharacters)) range.setStart(range.startContainer, Math.max(0, range.startOffset - replaceCharacters.length));
+				}
+				range.deleteContents();
+				nodes.forEach((node) => {
+					range.insertNode(node);
+					range.setStartAfter(node);
+				});
+				range.collapse(true);
+				if (selection) {
+					selection.removeAllRanges();
+					selection.addRange(range);
+				}
+				onInternalInput();
+			};
+			const focus = (options) => {
+				const cursor = options?.cursor ?? "end";
+				if (cursor === "start") {
+					setStartCursor(options?.preventScroll);
+					return;
+				}
+				if (cursor === "all") {
+					selectAll(options?.preventScroll);
+					return;
+				}
+				if (cursor === "slot") {
+					focusSlot(options?.key, options?.preventScroll);
+					return;
+				}
+				setEndCursor(options?.preventScroll);
+			};
+			const clear = () => {
+				clearEditor();
+				renderSkill();
+				onInternalInput();
+			};
+			expose({
+				get nativeElement() {
+					return editableRef.value ?? null;
+				},
+				focus,
+				blur() {
+					editableRef.value?.blur();
+				},
+				insert,
+				clear,
+				getValue: getEditorValue
+			});
+			const applySlotConfig = (configs, force = false) => {
+				if (!force && configs === lastSlotConfigRef.value) return;
+				lastSlotConfigRef.value = configs;
+				initFromSlotConfig(configs);
+			};
+			(0, vue.watch)(() => editableRef.value, (editable) => {
+				if (!editable) return;
+				applySlotConfig(senderCtx.value.slotConfig, true);
+			}, { immediate: true });
+			(0, vue.watch)(() => senderCtx.value.slotConfig, (configs) => {
+				applySlotConfig(configs);
+			}, { immediate: true });
+			(0, vue.watch)(() => senderCtx.value.skill, (skill) => {
+				if (skill === lastSkillRef.value && skillDomRef.value) return;
+				lastSkillRef.value = skill;
+				renderSkill();
+				(0, vue.nextTick)(() => {
+					triggerValueChange();
+				});
+			}, { immediate: true });
+			(0, vue.watch)(() => senderCtx.value.readOnly, (readOnly) => {
+				slotConfigMap.value.forEach((config, key) => {
+					if (config.type === "content") slotDomMap.value.get(key)?.setAttribute("contenteditable", readOnly ? "false" : "true");
+				});
+			});
+			(0, vue.onBeforeUnmount)(() => {
+				unmountAllPortals();
+			});
+			return () => {
+				const inputCls = `${prefixCls.value}-input`;
+				return (0, vue.createVNode)("div", {
+					"ref": editableRef,
+					"role": "textbox",
+					"tabindex": 0,
+					"class": (0, _v_c_util.classNames)([
+						inputCls,
+						`${inputCls}-slot`,
+						senderCtx.value.classNames?.input
+					]),
+					"style": mergeInputStyle.value,
+					"data-placeholder": senderCtx.value.placeholder,
+					"contenteditable": !senderCtx.value.readOnly,
+					"spellcheck": false,
+					"onInput": onInternalInput,
+					"onKeydown": onInternalKeyDown,
+					"onKeyup": onInternalKeyUp,
+					"onPaste": onInternalPaste,
+					"onCut": onInternalInput,
+					"onSelect": onInternalSelect,
+					"onFocus": (e) => {
+						senderCtx.value.onFocus?.(e);
+					},
+					"onBlur": (e) => {
+						keyLock.value = false;
+						senderCtx.value.onBlur?.(e);
+					},
+					"onCompositionstart": () => {
+						isComposing.value = true;
+					},
+					"onCompositionend": () => {
+						isComposing.value = false;
+						keyLock.value = false;
+					}
+				}, null);
+			};
+		}
+	});
+	//#endregion
 	//#region components/sender/components/SpeechButton/RecordingIcon.tsx
 	var SIZE = 1e3;
 	var COUNT = 4;
@@ -7287,15 +8088,6 @@
 		}
 	});
 	//#endregion
-	//#region components/sender/context.ts
-	var SenderContextKey = Symbol("sender-context");
-	function useSenderContext() {
-		return (0, vue.inject)(SenderContextKey, (0, vue.computed)(() => ({})));
-	}
-	function provideSenderContext(value) {
-		(0, vue.provide)(SenderContextKey, value);
-	}
-	//#endregion
 	//#region components/sender/components/TextArea.tsx
 	var TextArea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "SenderTextArea",
@@ -7506,6 +8298,191 @@
 		} };
 	};
 	//#endregion
+	//#region components/sender/style/slot-textarea.ts
+	var genSlotTextAreaStyle = (token) => {
+		const { componentCls, antCls, calc } = token;
+		const slotCls = `${componentCls}-slot`;
+		const antInputCls = `${antCls}-input`;
+		const antDropdownCls = `${antCls}-dropdown-trigger`;
+		const slotInputCls = `${componentCls}-slot-input`;
+		const slotSelectCls = `${componentCls}-slot-select`;
+		const slotTagCls = `${componentCls}-slot-tag`;
+		const slotContentCls = `${componentCls}-slot-content`;
+		const skillCls = `${componentCls}-skill`;
+		return { [componentCls]: {
+			[`${componentCls}-input-slot`]: {
+				outline: "none",
+				cursor: "text",
+				whiteSpace: "pre-wrap",
+				width: "100%",
+				caretColor: token.colorPrimary,
+				fontSize: token.fontSize,
+				lineHeight: token.lineHeight,
+				[`&:empty::before`]: {
+					content: "attr(data-placeholder)",
+					color: token.colorTextPlaceholder
+				}
+			},
+			[`${slotCls}:not(${slotContentCls})`]: {
+				display: "inline-block",
+				verticalAlign: "middle",
+				alignItems: "center",
+				marginBlock: 1,
+				height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
+				wordBreak: "break-all",
+				marginInline: token.marginXXS
+			},
+			[`${antInputCls}${slotInputCls}`]: {
+				height: "100%",
+				background: token.colorBgSlot,
+				outline: "none",
+				color: token.colorTextSlot,
+				borderRadius: token.borderRadius,
+				paddingInline: token.paddingXXS,
+				fontSize: "inherit",
+				lineHeight: "inherit",
+				position: "relative",
+				[`&::placeholder`]: {
+					color: token.colorTextSlotPlaceholder,
+					fontSize: "inherit",
+					lineHeight: "inherit"
+				}
+			},
+			[slotSelectCls]: {
+				fontSize: token.fontSize,
+				lineHeight: token.lineHeight,
+				paddingInline: token.paddingXXS,
+				transition: `border-color ${token.motionDurationMid}`,
+				position: "relative",
+				display: "inline-flex",
+				alignItems: "center",
+				cursor: "pointer",
+				background: token.colorBgSlot,
+				height: "100%",
+				boxSizing: "border-box",
+				borderRadius: token.borderRadius,
+				color: token.colorTextSlot,
+				border: `1px solid ${token.colorBorderSlot}`,
+				[`&.placeholder`]: { color: token.colorTextSlotPlaceholder },
+				[`&${antDropdownCls}-open`]: { borderColor: token.colorBorderSlotHover }
+			},
+			[`${slotSelectCls}-value`]: {
+				flex: 1,
+				fontSize: token.fontSize,
+				lineHeight: token.lineHeight,
+				[`&:empty::before`]: { content: "attr(data-placeholder)" }
+			},
+			[`${slotSelectCls}-arrow`]: {
+				marginInlineStart: token.marginXXS,
+				fontSize: token.fontSize,
+				lineHeight: token.lineHeight,
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center"
+			},
+			[slotTagCls]: {
+				background: token.colorBgSlot,
+				border: `1px solid ${token.colorBorderSlot}`,
+				outline: "none",
+				color: token.colorTextSlot,
+				borderRadius: token.borderRadius,
+				padding: `0 ${(0, _antdv_next_cssinjs.unit)(token.paddingXXS)}`,
+				fontSize: token.fontSize,
+				lineHeight: token.lineHeight,
+				height: "100%",
+				boxSizing: "border-box",
+				position: "relative",
+				cursor: "default"
+			},
+			[slotContentCls]: {
+				height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
+				caretColor: token.colorPrimary,
+				background: token.colorBgSlot,
+				outline: "none",
+				color: token.colorTextSlot,
+				borderRadius: token.borderRadius,
+				paddingInline: token.paddingXXS,
+				boxSizing: "border-box",
+				verticalAlign: "middle",
+				fontSize: token.fontSize,
+				marginBlock: 1,
+				lineHeight: token.lineHeight,
+				display: "inline-block",
+				position: "relative",
+				cursor: "text",
+				[`&:empty`]: {
+					width: "fit-content",
+					[`&::after`]: {
+						display: "inline-block",
+						height: "inherit",
+						content: "attr(data-placeholder)",
+						color: token.colorTextSlotPlaceholder
+					}
+				}
+			},
+			[`${slotCls}-no-width`]: {
+				userSelect: "none",
+				width: "3px",
+				display: "inline-block",
+				lineHeight: "inherit"
+			},
+			[skillCls]: {
+				display: "inline-block",
+				verticalAlign: "baseline",
+				alignItems: "center",
+				marginBlock: 1,
+				height: calc(token.fontSize).mul(token.lineHeight).add(2).equal(),
+				wordBreak: "break-all",
+				paddingInlineEnd: 0,
+				paddingInlineStart: 0,
+				marginInlineEnd: 0,
+				marginInlineStart: -1,
+				[`&${skillCls}-empty`]: { [`&::after`]: {
+					display: "inline-block",
+					pointerEvents: "none",
+					height: "inherit",
+					content: "attr(data-placeholder)",
+					color: token.colorTextPlaceholder
+				} }
+			},
+			[`${skillCls}-wrapper`]: {
+				height: "100%",
+				display: "inline-flex"
+			},
+			[`${skillCls}-tag`]: {
+				paddingInline: token.paddingXS,
+				height: "100%",
+				backgroundColor: token.colorBgSkill,
+				borderRadius: token.borderRadius,
+				color: token.colorPrimary,
+				alignItems: "center",
+				fontWeight: 500,
+				display: "inline-flex",
+				cursor: "pointer",
+				gap: token.marginXXS,
+				transition: `background-color ${token.motionDurationMid}`,
+				[`&:hover`]: {
+					backgroundColor: token.colorBgSkillHover,
+					[`${skillCls}-close:not(${skillCls}-close-disabled)`]: { color: token.colorPrimaryHover }
+				}
+			},
+			[`${skillCls}-close`]: {
+				fontSize: token.fontSizeSM,
+				display: "inline-flex",
+				transition: `color ${token.motionDurationMid}`,
+				color: token.colorPrimary
+			},
+			[`${skillCls}-close-disabled`]: {
+				cursor: "not-allowed",
+				color: token.colorTextDisabled
+			},
+			[`${skillCls}-holder`]: {
+				width: token.marginXS,
+				height: "100%"
+			}
+		} };
+	};
+	//#endregion
 	//#region components/sender/style/switch.ts
 	var genSenderSwitchStyle = (token) => {
 		const { componentCls, antCls } = token;
@@ -7613,12 +8590,26 @@
 	};
 	var prepareComponentToken$5 = (token) => {
 		const { colorPrimary, colorFillTertiary } = token;
+		const colorBgSlot = new _ant_design_fast_color.FastColor(colorPrimary).setA(.06).toRgbString();
+		const colorBgSkill = new _ant_design_fast_color.FastColor(colorPrimary).setA(.08).toRgbString();
+		const colorBgSkillHover = new _ant_design_fast_color.FastColor(colorPrimary).setA(.15).toRgbString();
+		const colorTextSlot = colorPrimary;
+		const colorTextSlotPlaceholder = new _ant_design_fast_color.FastColor(colorPrimary).setA(.25).toRgbString();
+		const colorBorderSlotHover = new _ant_design_fast_color.FastColor(colorPrimary).setA(.1).toRgbString();
+		const colorBorderSlot = colorBgSlot;
 		const colorBorderInput = new _ant_design_fast_color.FastColor(colorFillTertiary).setA(.1).toRgbString();
 		const switchCheckedBg = new _ant_design_fast_color.FastColor(colorPrimary).setA(.08).toRgbString();
 		const switchCheckedHoverBg = new _ant_design_fast_color.FastColor(colorPrimary).setA(.1).toRgbString();
 		const switchUncheckedHoverBg = new _ant_design_fast_color.FastColor(colorFillTertiary).setA(.04).toRgbString();
 		const colorBgActionsDisabled = new _ant_design_fast_color.FastColor(colorPrimary).setA(.45).toRgbString();
 		return {
+			colorBgSlot,
+			colorBgSkill,
+			colorBgSkillHover,
+			colorTextSlot,
+			colorTextSlotPlaceholder,
+			colorBorderSlotHover,
+			colorBorderSlot,
 			colorBorderInput,
 			switchCheckedBg,
 			switchCheckedHoverBg,
@@ -7633,7 +8624,8 @@
 		return [
 			genSenderStyle(senderToken),
 			genSenderHeaderStyle(senderToken),
-			genSenderSwitchStyle(senderToken)
+			genSenderSwitchStyle(senderToken),
+			genSlotTextAreaStyle(senderToken)
 		];
 	}, prepareComponentToken$5);
 	//#endregion
@@ -7692,6 +8684,14 @@
 				type: Boolean,
 				default: false
 			},
+			slotConfig: {
+				type: Array,
+				default: void 0
+			},
+			skill: {
+				type: Object,
+				default: void 0
+			},
 			placeholder: {
 				type: String,
 				default: void 0
@@ -7790,21 +8790,40 @@
 			const [hashId, cssVarCls] = style_default$5(prefixCls);
 			const containerRef = (0, vue.ref)();
 			const inputRef = (0, vue.ref)();
+			const isSlotMode = (0, vue.computed)(() => Array.isArray(props.slotConfig) || !!props.skill?.value);
 			const innerValue = (0, vue.ref)(props.defaultValue);
 			const mergedValue = (0, vue.computed)(() => props.value ?? innerValue.value);
-			const triggerValueChange = (nextValue, event) => {
+			const triggerValueChange = (nextValue, event, slotConfig, skill) => {
 				innerValue.value = nextValue;
-				props.onChange?.(nextValue, event);
+				props.onChange?.(nextValue, event, slotConfig, skill);
 			};
+			const submitDisabled = (0, vue.ref)(!mergedValue.value);
+			(0, vue.watch)(() => mergedValue.value, (next) => {
+				if (!isSlotMode.value) submitDisabled.value = !next;
+			}, { immediate: true });
 			const [speechPermission, triggerSpeech, speechRecording] = useSpeech((transcript) => {
+				if (isSlotMode.value) {
+					inputRef.value?.insert?.([{
+						type: "text",
+						value: transcript
+					}]);
+					return;
+				}
 				triggerValueChange(`${mergedValue.value} ${transcript}`);
 			}, () => props.allowSpeech);
 			const triggerSend = () => {
-				if (props.onSubmit && !props.loading && mergedValue.value) props.onSubmit(mergedValue.value);
+				if (!props.onSubmit || props.loading || submitDisabled.value) return;
+				const value = inputRef.value?.getValue?.() ?? { value: "" };
+				const slotConfig = "slotConfig" in value ? value.slotConfig : void 0;
+				const skill = "skill" in value ? value.skill : void 0;
+				props.onSubmit(value.value, slotConfig, skill);
 			};
 			const triggerClear = () => {
+				if (inputRef.value?.clear) {
+					inputRef.value.clear();
+					return;
+				}
 				triggerValueChange("");
-				inputRef.value?.clear();
 			};
 			expose({
 				get nativeElement() {
@@ -7820,7 +8839,19 @@
 					triggerClear();
 				},
 				insert(text, position) {
-					inputRef.value?.insert(text, position);
+					if (isSlotMode.value) {
+						const slotList = Array.isArray(text) ? text : [{
+							type: "text",
+							value: text
+						}];
+						inputRef.value?.insert?.(slotList, position);
+						return;
+					}
+					const textValue = Array.isArray(text) ? text.map((config) => {
+						if (config.type === "text") return config.value ?? "";
+						return config.formatResult?.(config.props?.defaultValue) ?? "";
+					}).join("") : text;
+					inputRef.value?.insert?.(textValue, position);
 				},
 				getValue() {
 					return inputRef.value?.getValue() ?? { value: "" };
@@ -7843,15 +8874,20 @@
 				triggerSend,
 				placeholder: props.placeholder,
 				onFocus: props.onFocus,
-				onBlur: props.onBlur
+				onBlur: props.onBlur,
+				slotConfig: props.slotConfig,
+				skill: props.skill,
+				setSubmitDisabled: (disabled) => {
+					submitDisabled.value = disabled;
+				}
 			})));
 			const actionBtnCls = (0, vue.computed)(() => `${prefixCls.value}-actions-btn`);
 			provideActionButtonContext((0, vue.computed)(() => ({
 				prefixCls: actionBtnCls.value,
 				onSend: triggerSend,
-				onSendDisabled: !mergedValue.value,
+				onSendDisabled: submitDisabled.value,
 				onClear: triggerClear,
-				onClearDisabled: !mergedValue.value,
+				onClearDisabled: submitDisabled.value,
 				onCancel: props.onCancel,
 				onCancelDisabled: !props.loading,
 				onSpeech: () => triggerSpeech(false),
@@ -7904,8 +8940,9 @@
 						"class": [`${cls}-content`, props.classNames.content],
 						"style": props.styles.content,
 						"onMousedown": (e) => {
-							if (e.target !== containerRef.value?.querySelector(`.${cls}-input`)) e.preventDefault();
-							inputRef.value?.focus();
+							const inputNode = containerRef.value?.querySelector(`.${cls}-input`);
+							if (!isSlotMode.value && e.target !== inputNode) e.preventDefault();
+							if (e.target === inputNode || e.target === containerRef.value) inputRef.value?.focus();
 						}
 					}, [
 						prefixNode && (0, vue.createVNode)("div", {
@@ -7916,7 +8953,7 @@
 							],
 							"style": [contextConfig.value.styles?.prefix, props.styles.prefix]
 						}, [prefixNode]),
-						(0, vue.createVNode)(TextArea_default, { "ref": inputRef }, null),
+						isSlotMode.value ? (0, vue.createVNode)(SlotTextArea_default, { "ref": inputRef }, null) : (0, vue.createVNode)(TextArea_default, { "ref": inputRef }, null),
 						suffixNode && (0, vue.createVNode)("div", {
 							"class": [
 								actionListCls,
@@ -8161,7 +9198,7 @@
 					"class": [`${cls}-content`, props.classNames.content],
 					"style": props.styles.content
 				}, {
-					classNames: {
+					classes: {
 						icon: props.classNames.icon,
 						content: props.classNames.title
 					},
@@ -8681,20 +9718,24 @@
 				case "ArrowDown":
 					offsetRow(1);
 					event.preventDefault();
+					event.stopPropagation();
 					break;
 				case "ArrowUp":
 					offsetRow(-1);
 					event.preventDefault();
+					event.stopPropagation();
 					break;
 				case "ArrowRight":
 					if (rtl.value) offsetPrev();
 					else offsetNext();
 					event.preventDefault();
+					event.stopPropagation();
 					break;
 				case "ArrowLeft":
 					if (rtl.value) offsetNext();
 					else offsetPrev();
 					event.preventDefault();
+					event.stopPropagation();
 					break;
 				case "Enter":
 					event.preventDefault();