@antdv-next/x 0.0.3 → 0.0.4

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-import { Fragment, Teleport, Transition, TransitionGroup, computed, createTextVNode, createVNode, defineComponent, inject, isVNode, mergeProps, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, toRefs, unref, useAttrs, useSlots, vShow, watch, withDirectives } from "vue";
+import { Fragment, Teleport, Transition, TransitionGroup, computed, createTextVNode, createVNode, defineComponent, inject, isVNode, mergeProps, nextTick, onBeforeUnmount, onMounted, provide, ref, render, shallowRef, toRefs, unref, useAttrs, useSlots, vShow, watch, withDirectives } from "vue";
 import { useConfig } from "antdv-next/dist/config-provider/context";
-import { Button, Carousel, Cascader, ConfigProvider, Divider, Dropdown, Flex, Image as Image$1, Popover, Progress, Segmented, Skeleton, Spin, TextArea, Tooltip, Typography, Upload, theme } from "antdv-next";
+import { Button, Carousel, Cascader, ConfigProvider, Divider, Dropdown, Flex, Image as Image$1, Input, Popover, Progress, Segmented, Skeleton, Spin, TextArea, Tooltip, Typography, Upload, theme } from "antdv-next";
 import Icon, { ArrowUpOutlined, AudioMutedOutlined, AudioOutlined, CheckCircleOutlined, CheckOutlined, ClearOutlined, CloseCircleFilled, CloseCircleOutlined, CloseOutlined, CopyOutlined, DislikeFilled, DislikeOutlined, DownloadOutlined, EllipsisOutlined, FileExcelFilled, FileImageFilled, FileMarkdownFilled, FilePdfFilled, FilePptFilled, FileTextFilled, FileWordFilled, FileZipFilled, JavaOutlined, JavaScriptOutlined, LeftOutlined, LikeFilled, LikeOutlined, LoadingOutlined, MinusCircleOutlined, MoonOutlined, MutedOutlined, PlusOutlined, PythonOutlined, RightOutlined, SoundOutlined, SunOutlined, ZoomInOutlined, ZoomOutOutlined } from "@antdv-next/icons";
 import { Keyframes, unit } from "@antdv-next/cssinjs";
 import { genStyleUtils, mergeToken } from "@antdv-next/cssinjs/cssinjs-utils";
@@ -10,7 +10,7 @@ import { useResizeObserver } from "@vueuse/core";
 import { KeyCode, classNames } from "@v-c/util";
 import mermaid from "mermaid";
 //#region package.json
-var version = "0.0.3";
+var version = "0.0.4";
 //#endregion
 //#region components/x-provider/context.ts
 var XProviderContextKey = Symbol("antdv-next-x-provider-context");
@@ -489,7 +489,7 @@ var style_default$13 = genStyleHooks("Actions", (token) => {
 }, 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]" && !isVNode(s);
 }
 function getMotionTransitionProps(motionName) {
@@ -649,7 +649,7 @@ var XActions = /* @__PURE__ */ defineComponent({
 					attrs.style,
 					props.style
 				]
-			}), [transitionProps.value ? createVNode(Transition, transitionProps.value, _isSlot$6(_slot = renderList()) ? _slot : { default: () => [_slot] }) : renderList()]);
+			}), [transitionProps.value ? createVNode(Transition, transitionProps.value, _isSlot$7(_slot = renderList()) ? _slot : { default: () => [_slot] }) : renderList()]);
 		};
 	}
 });
@@ -2165,7 +2165,7 @@ var XFileCard = /* @__PURE__ */ defineComponent({
 });
 //#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]" && !isVNode(s);
 }
 var XFileCardList = /* @__PURE__ */ defineComponent({
@@ -2333,7 +2333,7 @@ var XFileCardList = /* @__PURE__ */ defineComponent({
 				"style": [props.style, splitStyles.value.root],
 				"onScroll": checkPing
 			}, [
-				createVNode(TransitionGroup, { "name": `${compCls.value}-motion` }, _isSlot$5(_slot = list.value.map((item, itemIndex) => {
+				createVNode(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?.({
@@ -2660,7 +2660,7 @@ var FileList_default = /* @__PURE__ */ defineComponent({
 });
 //#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]" && !isVNode(s);
 }
 var PlaceholderUploader = /* @__PURE__ */ defineComponent({
@@ -2755,7 +2755,7 @@ var PlaceholderUploader = /* @__PURE__ */ defineComponent({
 					border: 0,
 					background: "transparent"
 				}
-			}), _isSlot$4(node) ? node : { default: () => [node] })]);
+			}), _isSlot$5(node) ? node : { default: () => [node] })]);
 		};
 	}
 });
@@ -2872,7 +2872,7 @@ var style_default$11 = genStyleHooks("Attachments", (token) => {
 }, 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]" && !isVNode(s);
 }
 var XAttachments = /* @__PURE__ */ defineComponent({
@@ -3098,7 +3098,7 @@ var XAttachments = /* @__PURE__ */ defineComponent({
 					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;
@@ -3137,7 +3137,7 @@ var XAttachments = /* @__PURE__ */ defineComponent({
 					"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();
@@ -4157,7 +4157,7 @@ var XBubble = /* @__PURE__ */ defineComponent({
 });
 //#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]" && !isVNode(s);
 }
 var XBubbleDivider = /* @__PURE__ */ defineComponent({
@@ -4223,7 +4223,7 @@ var XBubbleDivider = /* @__PURE__ */ defineComponent({
 			"class": [`${props.prefixCls}-divider`, props.class],
 			"styles": props.styles,
 			"classes": props.classes
-		}), { contentRender: ({ content }) => createVNode(Divider, props.dividerProps, _isSlot$2(content) ? content : { default: () => [content] }) });
+		}), { contentRender: ({ content }) => createVNode(Divider, props.dividerProps, _isSlot$3(content) ? content : { default: () => [content] }) });
 	}
 });
 //#endregion
@@ -5545,7 +5545,7 @@ function useGroupable(groupable, items) {
 }
 //#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]" && !isVNode(s);
 }
 var stopPropagation = (event) => {
@@ -5686,14 +5686,14 @@ var ConversationsItem = /* @__PURE__ */ defineComponent({
 				}
 			}, [
 				hasRenderableNode$6(iconNode) && createVNode("div", { "class": `${props.prefixCls}-icon` }, [iconNode]),
-				createVNode(Typography.Text, { "class": `${props.prefixCls}-label` }, _isSlot$1(labelNode) ? labelNode : { default: () => [labelNode] }),
+				createVNode(Typography.Text, { "class": `${props.prefixCls}-label` }, _isSlot$2(labelNode) ? labelNode : { default: () => [labelNode] }),
 				!disabled && props.menu && createVNode("div", { "onClick": stopPropagation }, [createVNode(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] })])
 			]);
 		};
 	}
@@ -7040,10 +7040,6 @@ var ActionButton = /* @__PURE__ */ defineComponent({
 		variant: {
 			type: String,
 			default: void 0
-		},
-		class: {
-			type: String,
-			default: void 0
 		}
 	},
 	setup(props, { attrs }) {
@@ -7066,7 +7062,7 @@ var ActionButton = /* @__PURE__ */ defineComponent({
 				"disabled": mergedDisabled.value,
 				"class": [
 					prefixCls,
-					props.class,
+					attrs.class,
 					{ [`${prefixCls}-disabled`]: mergedDisabled.value }
 				],
 				"onClick": (e) => {
@@ -7177,6 +7173,811 @@ var SendButton_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region components/sender/context.ts
+var SenderContextKey = Symbol("sender-context");
+function useSenderContext() {
+	return inject(SenderContextKey, computed(() => ({})));
+}
+function provideSenderContext(value) {
+	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]" && !isVNode(s);
+}
+var Skill_default = /* @__PURE__ */ defineComponent({
+	name: "SenderSkill",
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		skill: {
+			type: Object,
+			required: true
+		},
+		removeSkill: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		const componentCls = computed(() => `${props.prefixCls}-skill`);
+		const closeNode = computed(() => {
+			const closable = props.skill.closable;
+			if (!closable) return null;
+			const config = typeof closable === "boolean" ? {} : closable;
+			const closeIcon = config.closeIcon ?? createVNode(CloseOutlined, { "class": `${componentCls.value}-close-icon` }, null);
+			return createVNode("div", {
+				"class": 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 ? createVNode(Tooltip, props.skill.toolTip, _isSlot$1(mergeTitle) ? mergeTitle : { default: () => [mergeTitle] }) : mergeTitle;
+			return createVNode("div", {
+				"class": `${componentCls.value}-wrapper`,
+				"contenteditable": false
+			}, [createVNode("div", {
+				"class": `${componentCls.value}-tag`,
+				"contenteditable": false,
+				"role": "button",
+				"tabindex": 0
+			}, [createVNode("span", { "class": `${componentCls.value}-tag-text` }, [titleNode]), closeNode.value]), 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__ */ defineComponent({
+	name: "SlotTextArea",
+	setup(_, { expose }) {
+		const senderCtx = useSenderContext();
+		const editableRef = ref();
+		const slotDomMap = ref(/* @__PURE__ */ new Map());
+		const slotConfigMap = ref(/* @__PURE__ */ new Map());
+		const slotValues = ref({});
+		const mountedDomSet = ref(/* @__PURE__ */ new Set());
+		const skillDomRef = ref(null);
+		const currentSkillRef = ref(void 0);
+		const lastSlotConfigRef = ref(void 0);
+		const lastSkillRef = ref(void 0);
+		const isComposing = ref(false);
+		const keyLock = ref(false);
+		const prefixCls = computed(() => senderCtx.value.prefixCls || "antd-sender");
+		const mergeInputStyle = 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;
+			render(null, container);
+			mountedDomSet.value.delete(container);
+		};
+		const unmountAllPortals = () => {
+			mountedDomSet.value.forEach((container) => {
+				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 = createVNode(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 = createVNode(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: () => [createVNode("span", { "class": classNames([`${prefixCls.value}-slot-select`, {
+						placeholder: !displayValue,
+						[`${prefixCls.value}-slot-select-selector-value`]: !!displayValue
+					}]) }, [createVNode("span", {
+						"data-placeholder": config.props?.placeholder,
+						"class": `${prefixCls.value}-slot-select-value`
+					}, [displayValue]), createVNode("span", { "class": `${prefixCls.value}-slot-select-arrow` }, [createTextVNode("▼")])])] });
+					break;
+				}
+				case "tag":
+					node = 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);
+			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);
+			render(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();
+			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);
+		};
+		watch(() => editableRef.value, (editable) => {
+			if (!editable) return;
+			applySlotConfig(senderCtx.value.slotConfig, true);
+		}, { immediate: true });
+		watch(() => senderCtx.value.slotConfig, (configs) => {
+			applySlotConfig(configs);
+		}, { immediate: true });
+		watch(() => senderCtx.value.skill, (skill) => {
+			if (skill === lastSkillRef.value && skillDomRef.value) return;
+			lastSkillRef.value = skill;
+			renderSkill();
+			nextTick(() => {
+				triggerValueChange();
+			});
+		}, { immediate: true });
+		watch(() => senderCtx.value.readOnly, (readOnly) => {
+			slotConfigMap.value.forEach((config, key) => {
+				if (config.type === "content") slotDomMap.value.get(key)?.setAttribute("contenteditable", readOnly ? "false" : "true");
+			});
+		});
+		onBeforeUnmount(() => {
+			unmountAllPortals();
+		});
+		return () => {
+			const inputCls = `${prefixCls.value}-input`;
+			return createVNode("div", {
+				"ref": editableRef,
+				"role": "textbox",
+				"tabindex": 0,
+				"class": 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;
@@ -7253,15 +8054,6 @@ var SpeechButton_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region components/sender/context.ts
-var SenderContextKey = Symbol("sender-context");
-function useSenderContext() {
-	return inject(SenderContextKey, computed(() => ({})));
-}
-function provideSenderContext(value) {
-	provide(SenderContextKey, value);
-}
-//#endregion
 //#region components/sender/components/TextArea.tsx
 var TextArea_default = /* @__PURE__ */ defineComponent({
 	name: "SenderTextArea",
@@ -7472,6 +8264,191 @@ var genSenderHeaderStyle = (token) => {
 	} };
 };
 //#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 ${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;
@@ -7579,12 +8556,26 @@ var genSenderStyle = (token) => {
 };
 var prepareComponentToken$5 = (token) => {
 	const { colorPrimary, colorFillTertiary } = token;
+	const colorBgSlot = new FastColor(colorPrimary).setA(.06).toRgbString();
+	const colorBgSkill = new FastColor(colorPrimary).setA(.08).toRgbString();
+	const colorBgSkillHover = new FastColor(colorPrimary).setA(.15).toRgbString();
+	const colorTextSlot = colorPrimary;
+	const colorTextSlotPlaceholder = new FastColor(colorPrimary).setA(.25).toRgbString();
+	const colorBorderSlotHover = new FastColor(colorPrimary).setA(.1).toRgbString();
+	const colorBorderSlot = colorBgSlot;
 	const colorBorderInput = new FastColor(colorFillTertiary).setA(.1).toRgbString();
 	const switchCheckedBg = new FastColor(colorPrimary).setA(.08).toRgbString();
 	const switchCheckedHoverBg = new FastColor(colorPrimary).setA(.1).toRgbString();
 	const switchUncheckedHoverBg = new FastColor(colorFillTertiary).setA(.04).toRgbString();
 	const colorBgActionsDisabled = new FastColor(colorPrimary).setA(.45).toRgbString();
 	return {
+		colorBgSlot,
+		colorBgSkill,
+		colorBgSkillHover,
+		colorTextSlot,
+		colorTextSlotPlaceholder,
+		colorBorderSlotHover,
+		colorBorderSlot,
 		colorBorderInput,
 		switchCheckedBg,
 		switchCheckedHoverBg,
@@ -7599,7 +8590,8 @@ var style_default$5 = genStyleHooks("Sender", (token) => {
 	return [
 		genSenderStyle(senderToken),
 		genSenderHeaderStyle(senderToken),
-		genSenderSwitchStyle(senderToken)
+		genSenderSwitchStyle(senderToken),
+		genSlotTextAreaStyle(senderToken)
 	];
 }, prepareComponentToken$5);
 //#endregion
@@ -7658,6 +8650,14 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		slotConfig: {
+			type: Array,
+			default: void 0
+		},
+		skill: {
+			type: Object,
+			default: void 0
+		},
 		placeholder: {
 			type: String,
 			default: void 0
@@ -7756,21 +8756,40 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 		const [hashId, cssVarCls] = style_default$5(prefixCls);
 		const containerRef = ref();
 		const inputRef = ref();
+		const isSlotMode = computed(() => Array.isArray(props.slotConfig) || !!props.skill?.value);
 		const innerValue = ref(props.defaultValue);
 		const mergedValue = 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 = ref(!mergedValue.value);
+		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() {
@@ -7786,7 +8805,19 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 				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: "" };
@@ -7809,15 +8840,20 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 			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 = computed(() => `${prefixCls.value}-actions-btn`);
 		provideActionButtonContext(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),
@@ -7870,8 +8906,9 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 					"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 && createVNode("div", {
@@ -7882,7 +8919,7 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 						],
 						"style": [contextConfig.value.styles?.prefix, props.styles.prefix]
 					}, [prefixNode]),
-					createVNode(TextArea_default, { "ref": inputRef }, null),
+					isSlotMode.value ? createVNode(SlotTextArea_default, { "ref": inputRef }, null) : createVNode(TextArea_default, { "ref": inputRef }, null),
 					suffixNode && createVNode("div", {
 						"class": [
 							actionListCls,
@@ -8127,7 +9164,7 @@ var SenderSwitch_default = /* @__PURE__ */ defineComponent({
 				"class": [`${cls}-content`, props.classNames.content],
 				"style": props.styles.content
 			}, {
-				classNames: {
+				classes: {
 					icon: props.classNames.icon,
 					content: props.classNames.title
 				},
@@ -8647,20 +9684,24 @@ function useActive(items, open, rtl, onCancel) {
 			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();