@antdv-next/x 1.2.3 → 1.2.5

package/dist/index.umd.js

@@ -66,7 +66,7 @@
 	shiki_dist_themes_vitesse_dark_mjs = __toESM(shiki_dist_themes_vitesse_dark_mjs, 1);
 	shiki_dist_themes_vitesse_light_mjs = __toESM(shiki_dist_themes_vitesse_light_mjs, 1);
 	//#region package.json
-	var version = "1.2.3";
+	var version = "1.2.5";
 	//#endregion
 	//#region components/x-provider/context.ts
 	var XProviderContextKey = Symbol("antdv-next-x-provider-context");
@@ -7321,6 +7321,10 @@
 			const mergedRenderType = (0, vue.computed)(() => {
 				return props.renderType ?? internalRenderType.value;
 			});
+			const latestRenderRef = (0, vue.ref)({
+				content: props.content,
+				renderType: mergedRenderType.value
+			});
 			const mergedActions = (0, vue.computed)(() => {
 				return {
 					enableZoom: props.actions?.enableZoom ?? true,
@@ -7350,23 +7354,29 @@
 				svgEl.style.transition = isDragging.value ? "none" : "transform 0.1s ease-out";
 				svgEl.style.cursor = isDragging.value ? "grabbing" : "grab";
 			}
+			let renderRequestId = 0;
+			let latestCommittedRequestId = 0;
 			const renderDiagram = throttle(async () => {
-				if (mergedRenderType.value === RenderType.Code) {
-					if (graphRef.value) graphRef.value.innerHTML = "";
-					return;
-				}
-				if (!props.content?.trim()) return;
+				const { content, renderType } = latestRenderRef.value;
 				const graphEl = graphRef.value;
-				if (!graphEl) return;
+				if (!graphEl || renderType === RenderType.Code || !content?.trim()) return;
+				const requestId = ++renderRequestId;
 				try {
-					if (await parseMermaid(props.content, { suppressErrors: true }) === false) throw new Error("Invalid Mermaid syntax");
-					const { svg } = await renderMermaid(`${renderBaseId}-${idSeed++}-${props.content.length || 0}`, props.content);
+					if (await parseMermaid(content, { suppressErrors: true }) === false) throw new Error("Invalid Mermaid syntax");
+					const { svg } = await renderMermaid(`${renderBaseId}-${idSeed++}-${content.length || 0}`, content);
+					if (requestId <= latestCommittedRequestId) return;
 					graphEl.innerHTML = svg;
+					latestCommittedRequestId = requestId;
 					applySvgTransform();
 				} catch (error) {
+					if (requestId !== renderRequestId || latestRenderRef.value.content !== content || latestRenderRef.value.renderType !== renderType) return;
 					warning(false, "Mermaid", `Render failed: ${String(error)}`);
 				}
 			}, 100);
+			const invalidateRender = () => {
+				latestCommittedRequestId = ++renderRequestId;
+				renderDiagram.cancel();
+			};
 			function switchRenderType(nextType) {
 				if (props.renderType === void 0) internalRenderType.value = nextType;
 				emit("update:renderType", nextType);
@@ -7545,7 +7555,17 @@
 				mergedRenderType,
 				() => graphRef.value
 			], () => {
-				if (!graphRef.value) return;
+				latestRenderRef.value = {
+					content: props.content,
+					renderType: mergedRenderType.value
+				};
+				const graphEl = graphRef.value;
+				if (mergedRenderType.value === RenderType.Code || !props.content?.trim()) {
+					invalidateRender();
+					if (graphEl) graphEl.innerHTML = "";
+					return;
+				}
+				if (!graphEl) return;
 				renderDiagram();
 			}, {
 				immediate: true,
@@ -7583,7 +7603,7 @@
 				applySvgTransform();
 			}, { deep: true });
 			(0, vue.onBeforeUnmount)(() => {
-				renderDiagram.cancel();
+				invalidateRender();
 			});
 			expose({ get nativeElement() {
 				return rootRef.value;
@@ -21421,7 +21441,7 @@
 					"class": (0, _v_c_util.classNames)([
 						inputCls,
 						`${inputCls}-slot`,
-						senderCtx.value.classNames?.input
+						senderCtx.value.classes?.input ?? senderCtx.value.classNames?.input
 					]),
 					"style": mergeInputStyle.value,
 					"data-placeholder": senderCtx.value.placeholder
@@ -21621,7 +21641,7 @@
 					"ref": inputRef,
 					"disabled": ctx.disabled,
 					"style": ctx.styles?.input,
-					"class": [`${ctx.prefixCls}-input`, ctx.classNames?.input],
+					"class": [`${ctx.prefixCls}-input`, ctx.classes?.input ?? ctx.classNames?.input],
 					"autoSize": ctx.autoSize,
 					"value": ctx.value,
 					"onChange": (e) => {
@@ -22179,6 +22199,13 @@
 				type: [Boolean, Object],
 				default: () => ({ maxRows: 8 })
 			},
+			classes: {
+				type: Object,
+				default: () => ({})
+			},
+			/**
+			* @deprecated Use `classes` instead.
+			*/
 			classNames: {
 				type: Object,
 				default: () => ({})
@@ -22342,6 +22369,10 @@
 					return inputRef.value?.getValue() ?? { value: "" };
 				}
 			});
+			const mergedClasses = (0, vue.computed)(() => ({
+				...props.classNames,
+				...props.classes
+			}));
 			provideSenderContext((0, vue.computed)(() => ({
 				value: mergedValue.value,
 				onChange: triggerValueChange,
@@ -22356,7 +22387,8 @@
 				submitType: props.submitType,
 				prefixCls: prefixCls.value,
 				styles: props.styles,
-				classNames: props.classNames,
+				classes: mergedClasses.value,
+				classNames: mergedClasses.value,
 				autoSize: props.autoSize,
 				triggerSend,
 				placeholder: props.placeholder,
@@ -22406,7 +22438,7 @@
 						contextConfig.value.classes?.root,
 						props.class,
 						props.rootClass,
-						props.classNames.root,
+						mergedClasses.value.root,
 						hashId.value,
 						cssVarCls.value,
 						`${cls}-main`,
@@ -22424,7 +22456,7 @@
 				}, attrs), [
 					headerNode,
 					(0, vue.createVNode)("div", {
-						"class": [`${cls}-content`, props.classNames.content],
+						"class": [`${cls}-content`, mergedClasses.value.content],
 						"style": props.styles.content,
 						"onMousedown": (e) => {
 							const inputNode = containerRef.value?.querySelector(`.${cls}-input`);
@@ -22436,7 +22468,7 @@
 							"class": [
 								`${cls}-prefix`,
 								contextConfig.value.classes?.prefix,
-								props.classNames.prefix
+								mergedClasses.value.prefix
 							],
 							"style": [contextConfig.value.styles?.prefix, props.styles.prefix]
 						}, [prefixNode]),
@@ -22445,7 +22477,7 @@
 							"class": [
 								actionListCls,
 								contextConfig.value.classes?.suffix,
-								props.classNames.suffix
+								mergedClasses.value.suffix
 							],
 							"style": [contextConfig.value.styles?.suffix, props.styles.suffix]
 						}, [suffixNode])
@@ -22454,7 +22486,7 @@
 						"class": [
 							`${cls}-footer`,
 							contextConfig.value.classes?.footer,
-							props.classNames.footer
+							mergedClasses.value.footer
 						],
 						"style": [contextConfig.value.styles?.footer, props.styles.footer]
 					}, [footerNode])
@@ -22491,6 +22523,13 @@
 				type: [String, Object],
 				default: void 0
 			},
+			classes: {
+				type: Object,
+				default: () => ({})
+			},
+			/**
+			* @deprecated Use `classes` instead.
+			*/
 			classNames: {
 				type: Object,
 				default: () => ({})
@@ -22516,6 +22555,10 @@
 				return `${props.prefixCls ?? senderPrefix ?? "antd-sender"}-header`;
 			});
 			const direction = (0, vue.computed)(() => configCtx.value.direction);
+			const mergedClasses = (0, vue.computed)(() => ({
+				...props.classNames,
+				...props.classes
+			}));
 			return () => {
 				const headerCls = prefixCls.value;
 				const contentNode = (0, vue.createVNode)("div", {
@@ -22526,7 +22569,7 @@
 					],
 					"style": props.style
 				}, [(props.closable || props.title) && (0, vue.createVNode)("div", {
-					"class": [`${headerCls}-header`, props.classNames.header],
+					"class": [`${headerCls}-header`, mergedClasses.value.header],
 					"style": props.styles.header
 				}, [(0, vue.createVNode)("div", { "class": `${headerCls}-title` }, [slots.title?.() ?? props.title]), props.closable && (0, vue.createVNode)("div", { "class": `${headerCls}-close` }, [(0, vue.createVNode)(antdv_next.Button, {
 					"type": "text",
@@ -22534,7 +22577,7 @@
 					"size": "small",
 					"onClick": () => props.onOpenChange?.(!props.open)
 				}, null)])]), slots.default && (0, vue.createVNode)("div", {
-					"class": [`${headerCls}-content`, props.classNames.content],
+					"class": [`${headerCls}-content`, mergedClasses.value.content],
 					"style": props.styles.content
 				}, [slots.default()])]);
 				return (0, vue.createVNode)(vue.Transition, {
@@ -22624,6 +22667,13 @@
 				type: Function,
 				default: void 0
 			},
+			classes: {
+				type: Object,
+				default: () => ({})
+			},
+			/**
+			* @deprecated Use `classes` instead.
+			*/
 			classNames: {
 				type: Object,
 				default: () => ({})
@@ -22650,6 +22700,10 @@
 				if (val !== void 0) innerChecked.value = val;
 			}, { immediate: true });
 			const mergedChecked = (0, vue.computed)(() => props.value ?? innerChecked.value);
+			const mergedClasses = (0, vue.computed)(() => ({
+				...props.classNames,
+				...props.classes
+			}));
 			expose({ get nativeElement() {
 				return containerRef.value;
 			} });
@@ -22666,8 +22720,8 @@
 						props.class,
 						props.rootClass,
 						contextConfig.value.classes?.switch,
-						senderCtx.value.classNames?.switch,
-						props.classNames.root,
+						senderCtx.value.classes?.switch ?? senderCtx.value.classNames?.switch,
+						mergedClasses.value.root,
 						{
 							[`${cls}-checked`]: mergedChecked.value,
 							[`${cls}-rtl`]: direction.value === "rtl"
@@ -22682,12 +22736,12 @@
 				}, attrs), [(0, vue.createVNode)(antdv_next.Button, (0, vue.mergeProps)({
 					"disabled": props.disabled,
 					"loading": props.loading,
-					"class": [`${cls}-content`, props.classNames.content],
+					"class": [`${cls}-content`, mergedClasses.value.content],
 					"style": props.styles.content
 				}, {
 					classes: {
-						icon: props.classNames.icon,
-						content: props.classNames.title
+						icon: mergedClasses.value.icon,
+						content: mergedClasses.value.title
 					},
 					styles: {
 						icon: props.styles.icon,

package/dist/mermaid/Mermaid.js

@@ -149,6 +149,10 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 		const mergedRenderType = computed(() => {
 			return props.renderType ?? internalRenderType.value;
 		});
+		const latestRenderRef = ref({
+			content: props.content,
+			renderType: mergedRenderType.value
+		});
 		const mergedActions = computed(() => {
 			return {
 				enableZoom: props.actions?.enableZoom ?? true,
@@ -178,23 +182,29 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 			svgEl.style.transition = isDragging.value ? "none" : "transform 0.1s ease-out";
 			svgEl.style.cursor = isDragging.value ? "grabbing" : "grab";
 		}
+		let renderRequestId = 0;
+		let latestCommittedRequestId = 0;
 		const renderDiagram = throttle(async () => {
-			if (mergedRenderType.value === RenderType.Code) {
-				if (graphRef.value) graphRef.value.innerHTML = "";
-				return;
-			}
-			if (!props.content?.trim()) return;
+			const { content, renderType } = latestRenderRef.value;
 			const graphEl = graphRef.value;
-			if (!graphEl) return;
+			if (!graphEl || renderType === RenderType.Code || !content?.trim()) return;
+			const requestId = ++renderRequestId;
 			try {
-				if (await parseMermaid(props.content, { suppressErrors: true }) === false) throw new Error("Invalid Mermaid syntax");
-				const { svg } = await renderMermaid(`${renderBaseId}-${idSeed++}-${props.content.length || 0}`, props.content);
+				if (await parseMermaid(content, { suppressErrors: true }) === false) throw new Error("Invalid Mermaid syntax");
+				const { svg } = await renderMermaid(`${renderBaseId}-${idSeed++}-${content.length || 0}`, content);
+				if (requestId <= latestCommittedRequestId) return;
 				graphEl.innerHTML = svg;
+				latestCommittedRequestId = requestId;
 				applySvgTransform();
 			} catch (error) {
+				if (requestId !== renderRequestId || latestRenderRef.value.content !== content || latestRenderRef.value.renderType !== renderType) return;
 				warning(false, "Mermaid", `Render failed: ${String(error)}`);
 			}
 		}, 100);
+		const invalidateRender = () => {
+			latestCommittedRequestId = ++renderRequestId;
+			renderDiagram.cancel();
+		};
 		function switchRenderType(nextType) {
 			if (props.renderType === void 0) internalRenderType.value = nextType;
 			emit("update:renderType", nextType);
@@ -373,7 +383,17 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 			mergedRenderType,
 			() => graphRef.value
 		], () => {
-			if (!graphRef.value) return;
+			latestRenderRef.value = {
+				content: props.content,
+				renderType: mergedRenderType.value
+			};
+			const graphEl = graphRef.value;
+			if (mergedRenderType.value === RenderType.Code || !props.content?.trim()) {
+				invalidateRender();
+				if (graphEl) graphEl.innerHTML = "";
+				return;
+			}
+			if (!graphEl) return;
 			renderDiagram();
 		}, {
 			immediate: true,
@@ -411,7 +431,7 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 			applySvgTransform();
 		}, { deep: true });
 		onBeforeUnmount(() => {
-			renderDiagram.cancel();
+			invalidateRender();
 		});
 		expose({ get nativeElement() {
 			return rootRef.value;

package/dist/package.js

@@ -1,4 +1,4 @@
 //#region package.json
-var version = "1.2.3";
+var version = "1.2.5";
 //#endregion
 export { version };

package/dist/sender/Sender.d.ts

@@ -66,6 +66,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             maxRows: number;
         };
     };
+    classes: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    /**
+     * @deprecated Use `classes` instead.
+     */
     classNames: {
         type: PropType<Record<string, string>>;
         default: () => {};
@@ -200,6 +207,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             maxRows: number;
         };
     };
+    classes: {
+        type: PropType<Record<string, string>>;
+        default: () => {};
+    };
+    /**
+     * @deprecated Use `classes` instead.
+     */
     classNames: {
         type: PropType<Record<string, string>>;
         default: () => {};
@@ -278,6 +292,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     loading: boolean;
     rootClass: string;
     class: string;
+    classes: Record<string, string>;
     styles: Record<string, CSSProperties>;
     footer: BaseNode | NodeRender;
     header: BaseNode | NodeRender;

package/dist/sender/Sender.js

@@ -87,6 +87,13 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 			type: [Boolean, Object],
 			default: () => ({ maxRows: 8 })
 		},
+		classes: {
+			type: Object,
+			default: () => ({})
+		},
+		/**
+		* @deprecated Use `classes` instead.
+		*/
 		classNames: {
 			type: Object,
 			default: () => ({})
@@ -250,6 +257,10 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 				return inputRef.value?.getValue() ?? { value: "" };
 			}
 		});
+		const mergedClasses = computed(() => ({
+			...props.classNames,
+			...props.classes
+		}));
 		provideSenderContext(computed(() => ({
 			value: mergedValue.value,
 			onChange: triggerValueChange,
@@ -264,7 +275,8 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 			submitType: props.submitType,
 			prefixCls: prefixCls.value,
 			styles: props.styles,
-			classNames: props.classNames,
+			classes: mergedClasses.value,
+			classNames: mergedClasses.value,
 			autoSize: props.autoSize,
 			triggerSend,
 			placeholder: props.placeholder,
@@ -314,7 +326,7 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 					contextConfig.value.classes?.root,
 					props.class,
 					props.rootClass,
-					props.classNames.root,
+					mergedClasses.value.root,
 					hashId.value,
 					cssVarCls.value,
 					`${cls}-main`,
@@ -332,7 +344,7 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 			}, attrs), [
 				headerNode,
 				createVNode("div", {
-					"class": [`${cls}-content`, props.classNames.content],
+					"class": [`${cls}-content`, mergedClasses.value.content],
 					"style": props.styles.content,
 					"onMousedown": (e) => {
 						const inputNode = containerRef.value?.querySelector(`.${cls}-input`);
@@ -344,7 +356,7 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 						"class": [
 							`${cls}-prefix`,
 							contextConfig.value.classes?.prefix,
-							props.classNames.prefix
+							mergedClasses.value.prefix
 						],
 						"style": [contextConfig.value.styles?.prefix, props.styles.prefix]
 					}, [prefixNode]),
@@ -353,7 +365,7 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 						"class": [
 							actionListCls,
 							contextConfig.value.classes?.suffix,
-							props.classNames.suffix
+							mergedClasses.value.suffix
 						],
 						"style": [contextConfig.value.styles?.suffix, props.styles.suffix]
 					}, [suffixNode])
@@ -362,7 +374,7 @@ var Sender_default = /* @__PURE__ */ defineComponent({
 					"class": [
 						`${cls}-footer`,
 						contextConfig.value.classes?.footer,
-						props.classNames.footer
+						mergedClasses.value.footer
 					],
 					"style": [contextConfig.value.styles?.footer, props.styles.footer]
 				}, [footerNode])

package/dist/sender/SenderHeader.d.ts

@@ -25,6 +25,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<string | CSSProperties>;
         default: undefined;
     };
+    classes: {
+        type: PropType<Partial<Record<HeaderSemanticType, string>>>;
+        default: () => {};
+    };
+    /**
+     * @deprecated Use `classes` instead.
+     */
     classNames: {
         type: PropType<Partial<Record<HeaderSemanticType, string>>>;
         default: () => {};
@@ -66,6 +73,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<string | CSSProperties>;
         default: undefined;
     };
+    classes: {
+        type: PropType<Partial<Record<HeaderSemanticType, string>>>;
+        default: () => {};
+    };
+    /**
+     * @deprecated Use `classes` instead.
+     */
     classNames: {
         type: PropType<Partial<Record<HeaderSemanticType, string>>>;
         default: () => {};
@@ -87,6 +101,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     style: string | CSSProperties;
     open: boolean;
     class: string;
+    classes: Partial<Record<HeaderSemanticType, string>>;
     styles: Partial<Record<HeaderSemanticType, CSSProperties>>;
     title: string | Record<string, any>;
     onOpenChange: (open: boolean) => void;

package/dist/sender/SenderHeader.js

@@ -31,6 +31,13 @@ var SenderHeader_default = /* @__PURE__ */ defineComponent({
 			type: [String, Object],
 			default: void 0
 		},
+		classes: {
+			type: Object,
+			default: () => ({})
+		},
+		/**
+		* @deprecated Use `classes` instead.
+		*/
 		classNames: {
 			type: Object,
 			default: () => ({})
@@ -56,6 +63,10 @@ var SenderHeader_default = /* @__PURE__ */ defineComponent({
 			return `${props.prefixCls ?? senderPrefix ?? "antd-sender"}-header`;
 		});
 		const direction = computed(() => configCtx.value.direction);
+		const mergedClasses = computed(() => ({
+			...props.classNames,
+			...props.classes
+		}));
 		return () => {
 			const headerCls = prefixCls.value;
 			const contentNode = createVNode("div", {
@@ -66,7 +77,7 @@ var SenderHeader_default = /* @__PURE__ */ defineComponent({
 				],
 				"style": props.style
 			}, [(props.closable || props.title) && createVNode("div", {
-				"class": [`${headerCls}-header`, props.classNames.header],
+				"class": [`${headerCls}-header`, mergedClasses.value.header],
 				"style": props.styles.header
 			}, [createVNode("div", { "class": `${headerCls}-title` }, [slots.title?.() ?? props.title]), props.closable && createVNode("div", { "class": `${headerCls}-close` }, [createVNode(Button, {
 				"type": "text",
@@ -74,7 +85,7 @@ var SenderHeader_default = /* @__PURE__ */ defineComponent({
 				"size": "small",
 				"onClick": () => props.onOpenChange?.(!props.open)
 			}, null)])]), slots.default && createVNode("div", {
-				"class": [`${headerCls}-content`, props.classNames.content],
+				"class": [`${headerCls}-content`, mergedClasses.value.content],
 				"style": props.styles.content
 			}, [slots.default()])]);
 			return createVNode(Transition, {

package/dist/sender/SenderSwitch.d.ts

@@ -49,6 +49,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<(checked: boolean) => void>;
         default: undefined;
     };
+    classes: {
+        type: PropType<Partial<Record<SwitchSemanticType, string>>>;
+        default: () => {};
+    };
+    /**
+     * @deprecated Use `classes` instead.
+     */
     classNames: {
         type: PropType<Partial<Record<SwitchSemanticType, string>>>;
         default: () => {};
@@ -106,6 +113,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<(checked: boolean) => void>;
         default: undefined;
     };
+    classes: {
+        type: PropType<Partial<Record<SwitchSemanticType, string>>>;
+        default: () => {};
+    };
+    /**
+     * @deprecated Use `classes` instead.
+     */
     classNames: {
         type: PropType<Partial<Record<SwitchSemanticType, string>>>;
         default: () => {};
@@ -123,6 +137,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     loading: boolean;
     rootClass: string;
     class: string;
+    classes: Partial<Record<SwitchSemanticType, string>>;
     styles: Partial<Record<SwitchSemanticType, CSSProperties>>;
     onChange: (checked: boolean) => void;
     classNames: Partial<Record<SwitchSemanticType, string>>;

package/dist/sender/SenderSwitch.js

@@ -60,6 +60,13 @@ var SenderSwitch_default = /* @__PURE__ */ defineComponent({
 			type: Function,
 			default: void 0
 		},
+		classes: {
+			type: Object,
+			default: () => ({})
+		},
+		/**
+		* @deprecated Use `classes` instead.
+		*/
 		classNames: {
 			type: Object,
 			default: () => ({})
@@ -86,6 +93,10 @@ var SenderSwitch_default = /* @__PURE__ */ defineComponent({
 			if (val !== void 0) innerChecked.value = val;
 		}, { immediate: true });
 		const mergedChecked = computed(() => props.value ?? innerChecked.value);
+		const mergedClasses = computed(() => ({
+			...props.classNames,
+			...props.classes
+		}));
 		expose({ get nativeElement() {
 			return containerRef.value;
 		} });
@@ -102,8 +113,8 @@ var SenderSwitch_default = /* @__PURE__ */ defineComponent({
 					props.class,
 					props.rootClass,
 					contextConfig.value.classes?.switch,
-					senderCtx.value.classNames?.switch,
-					props.classNames.root,
+					senderCtx.value.classes?.switch ?? senderCtx.value.classNames?.switch,
+					mergedClasses.value.root,
 					{
 						[`${cls}-checked`]: mergedChecked.value,
 						[`${cls}-rtl`]: direction.value === "rtl"
@@ -118,12 +129,12 @@ var SenderSwitch_default = /* @__PURE__ */ defineComponent({
 			}, attrs), [createVNode(Button, mergeProps({
 				"disabled": props.disabled,
 				"loading": props.loading,
-				"class": [`${cls}-content`, props.classNames.content],
+				"class": [`${cls}-content`, mergedClasses.value.content],
 				"style": props.styles.content
 			}, {
 				classes: {
-					icon: props.classNames.icon,
-					content: props.classNames.title
+					icon: mergedClasses.value.icon,
+					content: mergedClasses.value.title
 				},
 				styles: {
 					icon: props.styles.icon,

package/dist/sender/components/SlotTextAreaProseMirror.js

@@ -1160,7 +1160,7 @@ var SlotTextAreaProseMirror_default = /* @__PURE__ */ defineComponent({
 				"class": classNames([
 					inputCls,
 					`${inputCls}-slot`,
-					senderCtx.value.classNames?.input
+					senderCtx.value.classes?.input ?? senderCtx.value.classNames?.input
 				]),
 				"style": mergeInputStyle.value,
 				"data-placeholder": senderCtx.value.placeholder

package/dist/sender/components/TextArea.js

@@ -113,7 +113,7 @@ var TextArea_default = /* @__PURE__ */ defineComponent({
 				"ref": inputRef,
 				"disabled": ctx.disabled,
 				"style": ctx.styles?.input,
-				"class": [`${ctx.prefixCls}-input`, ctx.classNames?.input],
+				"class": [`${ctx.prefixCls}-input`, ctx.classes?.input ?? ctx.classNames?.input],
 				"autoSize": ctx.autoSize,
 				"value": ctx.value,
 				"onChange": (e) => {

package/dist/sender/interface.d.ts

@@ -116,6 +116,10 @@ export interface SenderProps {
     onCut?: (event: ClipboardEvent, info: SenderCopyInfo) => void;
     onFocus?: (event: FocusEvent) => void;
     onBlur?: (event: FocusEvent) => void;
+    classes?: Partial<Record<SemanticType, string>>;
+    /**
+     * @deprecated Use `classes` instead.
+     */
     classNames?: Partial<Record<SemanticType, string>>;
     styles?: Partial<Record<SemanticType, CSSProperties>>;
     rootClass?: string;

package/dist/x-provider/context.d.ts

@@ -35,9 +35,7 @@ export interface XComponentsConfig {
     folder?: Pick<FolderProps, "style" | "styles" | "classes">;
     mermaid?: Pick<MermaidProps, "style" | "styles" | "classes">;
     prompts?: Pick<PromptsProps, "style" | "styles" | "classes">;
-    sender?: Pick<SenderProps, "style" | "styles" | "classNames"> & {
-        classes?: SenderProps["classNames"];
-    };
+    sender?: Pick<SenderProps, "style" | "styles" | "classes" | "classNames">;
     suggestion?: Pick<SuggestionProps, "style" | "styles" | "classes">;
     think?: Pick<ThinkProps, "style" | "styles" | "classes">;
     thoughtChain?: Pick<ThoughtChainProps, "style" | "styles" | "classes">;

package/dist/x-provider/index.d.ts

@@ -154,9 +154,7 @@ declare const XProvider: import('vue').DefineComponent<import('vue').ExtractProp
     codeHighlighter: Pick<import('..').CodeHighlighterProps, "style" | "classes" | "styles"> | undefined;
     mermaid: Pick<import('..').MermaidProps, "style" | "classes" | "styles"> | undefined;
     prompts: Pick<import('..').PromptsProps, "style" | "classes" | "styles"> | undefined;
-    sender: (Pick<import('..').SenderProps, "style" | "styles" | "classNames"> & {
-        classes?: import('..').SenderProps["classNames"];
-    }) | undefined;
+    sender: Pick<import('..').SenderProps, "style" | "classes" | "styles" | "classNames"> | undefined;
     suggestion: Pick<import('..').SuggestionProps<any>, "style" | "classes" | "styles"> | undefined;
     think: Pick<import('..').ThinkProps, "style" | "classes" | "styles"> | undefined;
     thoughtChain: Pick<import('..').ThoughtChainProps, "style" | "classes" | "styles"> | undefined;

package/es/antdv-next-x.esm.js

@@ -1,7 +1,7 @@
 import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./Serializer-Sc9uEpQk.js";
 import { Comment as S, Fragment as C, Teleport as w, Text as T, Transition as E, TransitionGroup as D, cloneVNode as O, computed as k, createTextVNode as A, createVNode as j, defineComponent as M, getCurrentInstance as N, getCurrentScope as P, h as F, inject as I, isVNode as L, markRaw as R, mergeDefaults as z, mergeProps as B, nextTick as V, onBeforeMount as ee, onBeforeUnmount as H, onBeforeUpdate as U, onMounted as te, onScopeDispose as ne, onUnmounted as re, onUpdated as ie, provide as W, reactive as ae, ref as G, render as oe, resolveDynamicComponent as se, shallowReactive as ce, shallowRef as K, toRaw as le, toRef as ue, toRefs as de, toValue as fe, triggerRef as pe, unref as me, useAttrs as he, useId as ge, useSlots as _e, vShow as ve, watch as q, watchEffect as ye, withDirectives as be } from "vue";
 //#region package.json
-var xe = "1.2.3", Se = "anticon", Ce = {}, we = [
+var xe = "1.2.5", Se = "anticon", Ce = {}, we = [
 	"outlined",
 	"borderless",
 	"filled",
@@ -51167,51 +51167,55 @@ var kF = /* @__PURE__ */ M({
 		}), g = G(!1), _ = G({
 			x: 0,
 			y: 0
-		}), v = k(() => e.renderType ?? p.value), y = k(() => ({
+		}), v = k(() => e.renderType ?? p.value), y = G({
+			content: e.content,
+			renderType: v.value
+		}), b = k(() => ({
 			enableZoom: e.actions?.enableZoom ?? !0,
 			enableDownload: e.actions?.enableDownload ?? !0,
 			enableCopy: e.actions?.enableCopy ?? !0,
 			customActions: e.actions?.customActions ?? []
-		})), b = k(() => ({
+		})), x = k(() => ({
 			...s.value.classes,
 			...e.classes
-		})), x = k(() => ({
+		})), S = k(() => ({
 			...s.value.styles,
 			...e.styles
-		})), S = k(() => {
+		})), C = k(() => {
 			let { class: e, style: t, ...n } = i;
 			return n;
 		});
-		function C() {
+		function w() {
 			if (v.value !== EF.Image) return;
 			let e = l.value?.querySelector("svg");
 			e && (e.style.transform = `scale(${m.value}) translate(${h.value.x}px, ${h.value.y}px)`, e.style.transformOrigin = "center", e.style.transition = g.value ? "none" : "transform 0.1s ease-out", e.style.cursor = g.value ? "grabbing" : "grab");
 		}
-		let w = OF(async () => {
-			if (v.value === EF.Code) {
-				l.value && (l.value.innerHTML = "");
-				return;
-			}
-			if (!e.content?.trim()) return;
-			let t = l.value;
-			if (t) try {
-				if (await SF(e.content, { suppressErrors: !0 }) === !1) throw Error("Invalid Mermaid syntax");
-				let { svg: n } = await CF(`${u}-${DF++}-${e.content.length || 0}`, e.content);
-				t.innerHTML = n, C();
-			} catch (e) {
-				gF(!1, "Mermaid", `Render failed: ${String(e)}`);
-			}
-		}, 100);
-		function T(n) {
+		let T = 0, E = 0, D = OF(async () => {
+			let { content: e, renderType: t } = y.value, n = l.value;
+			if (!n || t === EF.Code || !e?.trim()) return;
+			let r = ++T;
+			try {
+				if (await SF(e, { suppressErrors: !0 }) === !1) throw Error("Invalid Mermaid syntax");
+				let { svg: t } = await CF(`${u}-${DF++}-${e.length || 0}`, e);
+				if (r <= E) return;
+				n.innerHTML = t, E = r, w();
+			} catch (n) {
+				if (r !== T || y.value.content !== e || y.value.renderType !== t) return;
+				gF(!1, "Mermaid", `Render failed: ${String(n)}`);
+			}
+		}, 100), O = () => {
+			E = ++T, D.cancel();
+		};
+		function A(n) {
 			e.renderType === void 0 && (p.value = n), t("update:renderType", n), t("renderTypeChange", n);
 		}
-		function E(e) {
+		function M(e) {
 			v.value === EF.Image && (e.preventDefault(), g.value = !0, _.value = {
 				x: e.clientX,
 				y: e.clientY
 			});
 		}
-		function D(e) {
+		function N(e) {
 			if (!g.value || v.value !== EF.Image) return;
 			e.preventDefault();
 			let t = e.clientX - _.value.x, n = e.clientY - _.value.y;
@@ -51223,29 +51227,29 @@ var kF = /* @__PURE__ */ M({
 				y: e.clientY
 			};
 		}
-		function O() {
+		function P() {
 			g.value = !1;
 		}
-		function A() {
+		function F() {
 			v.value === EF.Image && (m.value += .2);
 		}
-		function M() {
+		function I() {
 			v.value === EF.Image && (m.value = Math.max(m.value - .2, .5));
 		}
-		function N() {
+		function L() {
 			v.value === EF.Image && (m.value = 1, h.value = {
 				x: 0,
 				y: 0
 			});
 		}
-		async function P() {
+		async function R() {
 			try {
 				await navigator.clipboard.writeText(e.content);
 			} catch (e) {
 				gF(!1, "Mermaid", `Copy failed: ${String(e)}`);
 			}
 		}
-		function F() {
+		function z() {
 			if (v.value !== EF.Image) return;
 			let e = l.value?.querySelector("svg");
 			if (!e) return;
@@ -51269,47 +51273,47 @@ var kF = /* @__PURE__ */ M({
 				e.download = `${Date.now()}.png`, e.href = o.toDataURL("image/png", 1), e.click();
 			}, u.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(a)}`;
 		}
-		let I = k(() => {
+		let V = k(() => {
 			let t = [];
-			return v.value === EF.Image && (y.value.enableZoom && t.push({
+			return v.value === EF.Image && (b.value.enableZoom && t.push({
 				key: "zoomIn",
 				icon: j(Fp, null, null),
 				label: o.value.zoomIn,
-				onItemClick: A
+				onItemClick: F
 			}, {
 				key: "zoomOut",
 				icon: j(Lp, null, null),
 				label: o.value.zoomOut,
-				onItemClick: M
+				onItemClick: I
 			}, {
 				key: "zoomReset",
 				actionRender: () => j(eu, { title: o.value.zoomReset }, { default: () => [j(_h, {
 					type: "text",
 					size: "small",
-					onClick: N
+					onClick: L
 				}, { default: () => [o.value.zoomReset] })] })
-			}), y.value.enableDownload && t.push({
+			}), b.value.enableDownload && t.push({
 				key: "download",
 				icon: j(af, null, null),
 				label: o.value.download,
-				onItemClick: F
-			})), v.value === EF.Code && y.value.enableCopy && t.push({
+				onItemClick: z
+			})), v.value === EF.Code && b.value.enableCopy && t.push({
 				key: "copy",
 				actionRender: () => j(PM.Copy, { text: e.content }, null)
-			}), [...t, ...y.value.customActions];
+			}), [...t, ...b.value.customActions];
 		});
-		function L() {
+		function ee() {
 			return e.header === null ? null : r.header ? r.header({
 				renderType: v.value,
-				setRenderType: T,
-				zoomIn: A,
-				zoomOut: M,
-				resetZoom: N,
-				download: F,
-				copy: P
+				setRenderType: A,
+				zoomIn: F,
+				zoomOut: I,
+				resetZoom: L,
+				download: z,
+				copy: R
 			}) : e.header === void 0 ? j("div", {
-				class: [`${e.prefixCls}-header`, b.value.header],
-				style: x.value.header
+				class: [`${e.prefixCls}-header`, x.value.header],
+				style: S.value.header
 			}, [j(bT, {
 				options: [{
 					label: o.value.image,
@@ -51319,8 +51323,8 @@ var kF = /* @__PURE__ */ M({
 					value: EF.Code
 				}],
 				value: v.value,
-				onChange: (e) => T(e)
-			}, null), j(PM, { items: I.value }, null)]) : e.header;
+				onChange: (e) => A(e)
+			}, null), j(PM, { items: V.value }, null)]) : e.header;
 		}
 		return q(() => e.renderType, (e) => {
 			e !== void 0 && (p.value = e);
@@ -51342,13 +51346,22 @@ var kF = /* @__PURE__ */ M({
 			v,
 			() => l.value
 		], () => {
-			l.value && w();
+			y.value = {
+				content: e.content,
+				renderType: v.value
+			};
+			let t = l.value;
+			if (v.value === EF.Code || !e.content?.trim()) {
+				O(), t && (t.innerHTML = "");
+				return;
+			}
+			t && D();
 		}, {
 			immediate: !0,
 			deep: !0
 		}), q([
 			v,
-			() => y.value.enableZoom,
+			() => b.value.enableZoom,
 			() => l.value
 		], ([e, t], n, r) => {
 			let i = l.value;
@@ -51370,17 +51383,17 @@ var kF = /* @__PURE__ */ M({
 			v,
 			g
 		], () => {
-			C();
+			w();
 		}, { deep: !0 }), H(() => {
-			w.cancel();
+			O();
 		}), n({ get nativeElement() {
 			return c.value;
-		} }), () => e.content ? j("div", B({ ref: c }, S.value, {
+		} }), () => e.content ? j("div", B({ ref: c }, C.value, {
 			class: [
 				e.prefixCls,
 				s.value.classes?.root,
 				e.rootClass,
-				b.value.root,
+				x.value.root,
 				d.value,
 				f.value,
 				i.class,
@@ -51390,28 +51403,28 @@ var kF = /* @__PURE__ */ M({
 			style: [
 				s.value.style,
 				s.value.styles?.root,
-				x.value.root,
+				S.value.root,
 				i.style,
 				e.style
 			]
 		}), [
-			L(),
+			ee(),
 			j("div", {
 				ref: l,
 				class: [
 					`${e.prefixCls}-graph`,
 					v.value === EF.Code && `${e.prefixCls}-graph-hidden`,
-					b.value.graph
+					x.value.graph
 				],
-				style: x.value.graph,
-				onMousedown: E,
-				onMousemove: D,
-				onMouseup: O,
-				onMouseleave: O
+				style: S.value.graph,
+				onMousedown: M,
+				onMousemove: N,
+				onMouseup: P,
+				onMouseleave: P
 			}, null),
 			v.value === EF.Code ? j("div", {
-				class: [`${e.prefixCls}-code`, b.value.code],
-				style: x.value.code
+				class: [`${e.prefixCls}-code`, x.value.code],
+				style: S.value.code
 			}, [j(SP, B({
 				showLineNumbers: !1,
 				showLanguage: !1,
@@ -60495,7 +60508,7 @@ var sG = /* @__PURE__ */ M({
 				class: Y([
 					e,
 					`${e}-slot`,
-					n.value.classNames?.input
+					n.value.classes?.input ?? n.value.classNames?.input
 				]),
 				style: v.value,
 				"data-placeholder": n.value.placeholder
@@ -60644,7 +60657,7 @@ var bG = /* @__PURE__ */ M({
 				ref: r,
 				disabled: e.disabled,
 				style: e.styles?.input,
-				class: [`${e.prefixCls}-input`, e.classNames?.input],
+				class: [`${e.prefixCls}-input`, e.classes?.input ?? e.classNames?.input],
 				autoSize: e.autoSize,
 				value: e.value,
 				onChange: (t) => {
@@ -61134,6 +61147,10 @@ var CG = (e) => {
 			type: [Boolean, Object],
 			default: () => ({ maxRows: 8 })
 		},
+		classes: {
+			type: Object,
+			default: () => ({})
+		},
 		classNames: {
 			type: Object,
 			default: () => ({})
@@ -61275,7 +61292,12 @@ var CG = (e) => {
 			getValue() {
 				return f.value?.getValue() ?? { value: "" };
 			}
-		}), UW(k(() => ({
+		});
+		let C = k(() => ({
+			...e.classNames,
+			...e.classes
+		}));
+		UW(k(() => ({
 			value: h.value,
 			onChange: g,
 			onKeyUp: e.onKeyUp,
@@ -61289,7 +61311,8 @@ var CG = (e) => {
 			submitType: e.submitType,
 			prefixCls: s.value,
 			styles: e.styles,
-			classNames: e.classNames,
+			classes: C.value,
+			classNames: C.value,
 			autoSize: e.autoSize,
 			triggerSend: x,
 			placeholder: e.placeholder,
@@ -61301,9 +61324,9 @@ var CG = (e) => {
 				_.value = e;
 			}
 		})));
-		let C = k(() => `${s.value}-actions-btn`);
+		let w = k(() => `${s.value}-actions-btn`);
 		UF(k(() => ({
-			prefixCls: C.value,
+			prefixCls: w.value,
 			onSend: x,
 			onSendDisabled: _.value,
 			onClear: S,
@@ -61315,12 +61338,12 @@ var CG = (e) => {
 			speechRecording: b.value,
 			disabled: e.disabled
 		})));
-		let w = (e, t, r) => n[t] ? n[t]?.({
+		let T = (e, t, r) => n[t] ? n[t]?.({
 			defaultNode: r,
 			components: OG
 		}) : typeof e == "function" ? e(r, { components: OG }) : e || e === !1 ? e : null;
 		return () => {
-			let t = s.value, n = `${t}-actions-list`, r = j(HE, { class: `${n}-presets` }, { default: () => [e.allowSpeech && j(bG, null, null), e.loading ? j(YF, null, null) : j(ZF, null, null)] }), a = w(e.suffix, "suffix", r) ?? r, m = w(e.prefix, "prefix", r), h = w(e.header, "header", r), g = w(e.footer, "footer", r);
+			let t = s.value, n = `${t}-actions-list`, r = j(HE, { class: `${n}-presets` }, { default: () => [e.allowSpeech && j(bG, null, null), e.loading ? j(YF, null, null) : j(ZF, null, null)] }), a = T(e.suffix, "suffix", r) ?? r, m = T(e.prefix, "prefix", r), h = T(e.header, "header", r), g = T(e.footer, "footer", r);
 			return j("div", B({
 				ref: d,
 				class: [
@@ -61328,7 +61351,7 @@ var CG = (e) => {
 					o.value.classes?.root,
 					e.class,
 					e.rootClass,
-					e.classNames.root,
+					C.value.root,
 					l.value,
 					u.value,
 					`${t}-main`,
@@ -61346,7 +61369,7 @@ var CG = (e) => {
 			}, i), [
 				h,
 				j("div", {
-					class: [`${t}-content`, e.classNames.content],
+					class: [`${t}-content`, C.value.content],
 					style: e.styles.content,
 					onMousedown: (e) => {
 						let n = d.value?.querySelector(`.${t}-input`);
@@ -61357,7 +61380,7 @@ var CG = (e) => {
 						class: [
 							`${t}-prefix`,
 							o.value.classes?.prefix,
-							e.classNames.prefix
+							C.value.prefix
 						],
 						style: [o.value.styles?.prefix, e.styles.prefix]
 					}, [m]),
@@ -61366,7 +61389,7 @@ var CG = (e) => {
 						class: [
 							n,
 							o.value.classes?.suffix,
-							e.classNames.suffix
+							C.value.suffix
 						],
 						style: [o.value.styles?.suffix, e.styles.suffix]
 					}, [a])
@@ -61375,7 +61398,7 @@ var CG = (e) => {
 					class: [
 						`${t}-footer`,
 						o.value.classes?.footer,
-						e.classNames.footer
+						C.value.footer
 					],
 					style: [o.value.styles?.footer, e.styles.footer]
 				}, [g])
@@ -61409,6 +61432,10 @@ var CG = (e) => {
 			type: [String, Object],
 			default: void 0
 		},
+		classes: {
+			type: Object,
+			default: () => ({})
+		},
 		classNames: {
 			type: Object,
 			default: () => ({})
@@ -61430,7 +61457,10 @@ var CG = (e) => {
 		let n = Oe(), r = HW(), i = k(() => {
 			let t = r.value.prefixCls;
 			return `${e.prefixCls ?? t ?? "antd-sender"}-header`;
-		}), a = k(() => n.value.direction);
+		}), a = k(() => n.value.direction), o = k(() => ({
+			...e.classNames,
+			...e.classes
+		}));
 		return () => {
 			let n = i.value, r = j("div", {
 				class: [
@@ -61440,7 +61470,7 @@ var CG = (e) => {
 				],
 				style: e.style
 			}, [(e.closable || e.title) && j("div", {
-				class: [`${n}-header`, e.classNames.header],
+				class: [`${n}-header`, o.value.header],
 				style: e.styles.header
 			}, [j("div", { class: `${n}-title` }, [t.title?.() ?? e.title]), e.closable && j("div", { class: `${n}-close` }, [j(_h, {
 				type: "text",
@@ -61448,7 +61478,7 @@ var CG = (e) => {
 				size: "small",
 				onClick: () => e.onOpenChange?.(!e.open)
 			}, null)])]), t.default && j("div", {
-				class: [`${n}-content`, e.classNames.content],
+				class: [`${n}-content`, o.value.content],
 				style: e.styles.content
 			}, [t.default()])]);
 			return j(E, {
@@ -61530,6 +61560,10 @@ var CG = (e) => {
 			type: Function,
 			default: void 0
 		},
+		classes: {
+			type: Object,
+			default: () => ({})
+		},
 		classNames: {
 			type: Object,
 			default: () => ({})
@@ -61547,11 +61581,14 @@ var CG = (e) => {
 		q(() => e.value, (e) => {
 			e !== void 0 && (d.value = e);
 		}, { immediate: !0 });
-		let f = k(() => e.value ?? d.value);
+		let f = k(() => e.value ?? d.value), p = k(() => ({
+			...e.classNames,
+			...e.classes
+		}));
 		return t({ get nativeElement() {
 			return u.value;
 		} }), () => {
-			let t = c.value, i = n.icon?.() ?? e.icon, p = n.checkedChildren?.() ?? e.checkedChildren, m = n.unCheckedChildren?.() ?? e.unCheckedChildren;
+			let t = c.value, i = n.icon?.() ?? e.icon, m = n.checkedChildren?.() ?? e.checkedChildren, h = n.unCheckedChildren?.() ?? e.unCheckedChildren;
 			return j("div", B({
 				ref: u,
 				class: [
@@ -61560,8 +61597,8 @@ var CG = (e) => {
 					e.class,
 					e.rootClass,
 					o.value.classes?.switch,
-					a.value.classNames?.switch,
-					e.classNames.root,
+					a.value.classes?.switch ?? a.value.classNames?.switch,
+					p.value.root,
 					{
 						[`${t}-checked`]: f.value,
 						[`${t}-rtl`]: l.value === "rtl"
@@ -61576,12 +61613,12 @@ var CG = (e) => {
 			}, r), [j(_h, B({
 				disabled: e.disabled,
 				loading: e.loading,
-				class: [`${t}-content`, e.classNames.content],
+				class: [`${t}-content`, p.value.content],
 				style: e.styles.content
 			}, {
 				classes: {
-					icon: e.classNames.icon,
-					content: e.classNames.title
+					icon: p.value.icon,
+					content: p.value.title
 				},
 				styles: {
 					icon: e.styles.icon,
@@ -61595,7 +61632,7 @@ var CG = (e) => {
 					let t = !f.value;
 					d.value = t, e.onChange?.(t);
 				}
-			}), { default: () => [f.value ? p : m, n.default?.()] })]);
+			}), { default: () => [f.value ? m : h, n.default?.()] })]);
 		};
 	}
 }), MG = kG;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antdv-next/x",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "license": "MIT",
   "files": [
     "dist",