@antdv-next/x 1.2.3-beta.1 → 1.2.4

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-beta.1";
+	var version = "1.2.4";
 	//#endregion
 	//#region components/x-provider/context.ts
 	var XProviderContextKey = Symbol("antdv-next-x-provider-context");
@@ -559,7 +559,7 @@
 	}, prepareComponentToken$14);
 	//#endregion
 	//#region components/actions/Actions.tsx
-	function _isSlot$7(s) {
+	function _isSlot$12(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	function getMotionTransitionProps(motionName) {
@@ -719,7 +719,7 @@
 						attrs.style,
 						props.style
 					]
-				}), [transitionProps.value ? (0, vue.createVNode)(vue.Transition, transitionProps.value, _isSlot$7(_slot = renderList()) ? _slot : { default: () => [_slot] }) : renderList()]);
+				}), [transitionProps.value ? (0, vue.createVNode)(vue.Transition, transitionProps.value, _isSlot$12(_slot = renderList()) ? _slot : { default: () => [_slot] }) : renderList()]);
 			};
 		}
 	});
@@ -2235,7 +2235,7 @@
 	});
 	//#endregion
 	//#region components/file-card/List.tsx
-	function _isSlot$6(s) {
+	function _isSlot$11(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var XFileCardList = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2403,7 +2403,7 @@
 					"style": [props.style, splitStyles.value.root],
 					"onScroll": checkPing
 				}, [
-					(0, vue.createVNode)(vue.TransitionGroup, { "name": `${compCls.value}-motion` }, _isSlot$6(_slot = list.value.map((item, itemIndex) => {
+					(0, vue.createVNode)(vue.TransitionGroup, { "name": `${compCls.value}-motion` }, _isSlot$11(_slot = list.value.map((item, itemIndex) => {
 						const { __key, ...fileItem } = item;
 						const cardSlots = {
 							description: slots.description ? (slotInfo) => slots.description?.({
@@ -2730,7 +2730,7 @@
 	});
 	//#endregion
 	//#region components/attachments/PlaceholderUploader.tsx
-	function _isSlot$5(s) {
+	function _isSlot$10(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var PlaceholderUploader = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -2851,7 +2851,7 @@
 						border: 0,
 						background: "transparent"
 					}
-				}), _isSlot$5(node) ? node : { default: () => [node] })]);
+				}), _isSlot$10(node) ? node : { default: () => [node] })]);
 			};
 		}
 	});
@@ -2968,7 +2968,7 @@
 	}, prepareComponentToken$12);
 	//#endregion
 	//#region components/attachments/index.tsx
-	function _isSlot$4(s) {
+	function _isSlot$9(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var XAttachments = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -3195,7 +3195,7 @@
 						props.rootClass,
 						mergedClasses.value.root
 					]
-				}, _isSlot$4(_slot = getPlaceholderNode("drop")) ? _slot : { default: () => [_slot] })]);
+				}, _isSlot$9(_slot = getPlaceholderNode("drop")) ? _slot : { default: () => [_slot] })]);
 			};
 			const renderNormalMode = () => {
 				let _slot2;
@@ -3234,7 +3234,7 @@
 						"getDropContainer": props.getDropContainer || (() => containerRef.value),
 						"prefixCls": props.prefixCls,
 						"class": [hashId.value, cssVarCls.value]
-					}, _isSlot$4(_slot2 = getPlaceholderNode("drop")) ? _slot2 : { default: () => [_slot2] })
+					}, _isSlot$9(_slot2 = getPlaceholderNode("drop")) ? _slot2 : { default: () => [_slot2] })
 				]);
 			};
 			return () => slots.default ? renderWithChildren() : renderNormalMode();
@@ -4255,7 +4255,7 @@
 	});
 	//#endregion
 	//#region components/bubble/Divider.tsx
-	function _isSlot$3(s) {
+	function _isSlot$8(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var XBubbleDivider = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -4321,7 +4321,7 @@
 				"class": [`${props.prefixCls}-divider`, props.class],
 				"styles": props.styles,
 				"classes": props.classes
-			}), { content: ({ content }) => (0, vue.createVNode)(antdv_next.Divider, props.dividerProps, _isSlot$3(content) ? content : { default: () => [content] }) });
+			}), { content: ({ content }) => (0, vue.createVNode)(antdv_next.Divider, props.dividerProps, _isSlot$8(content) ? content : { default: () => [content] }) });
 		}
 	});
 	//#endregion
@@ -5812,7 +5812,7 @@
 	}
 	//#endregion
 	//#region components/conversations/Item.tsx
-	function _isSlot$2(s) {
+	function _isSlot$7(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var stopPropagation = (event) => {
@@ -5949,14 +5949,14 @@
 					}
 				}, [
 					hasRenderableNode(iconNode) && (0, vue.createVNode)("div", { "class": `${props.prefixCls}-icon` }, [iconNode]),
-					(0, vue.createVNode)(antdv_next.Typography.Text, { "class": `${props.prefixCls}-label` }, _isSlot$2(labelNode) ? labelNode : { default: () => [labelNode] }),
+					(0, vue.createVNode)(antdv_next.Typography.Text, { "class": `${props.prefixCls}-label` }, _isSlot$7(labelNode) ? labelNode : { default: () => [labelNode] }),
 					!disabled && props.menu && (0, vue.createVNode)("div", { "onClick": stopPropagation }, [(0, vue.createVNode)(antdv_next.Dropdown, {
 						"menu": menuProps.value,
 						"placement": props.direction === "rtl" ? "bottomLeft" : "bottomRight",
 						"trigger": ["click"],
 						"disabled": disabled,
 						"getPopupContainer": menuProps.value?.getPopupContainer
-					}, _isSlot$2(_slot = renderMenuTrigger(props.info)) ? _slot : { default: () => [_slot] })])
+					}, _isSlot$7(_slot = renderMenuTrigger(props.info)) ? _slot : { default: () => [_slot] })])
 				]);
 			};
 		}
@@ -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);
@@ -7401,7 +7411,7 @@
 			}
 			function handleZoomIn() {
 				if (mergedRenderType.value !== RenderType.Image) return;
-				scale.value = Math.min(scale.value + .2, 3);
+				scale.value = scale.value + .2;
 			}
 			function handleZoomOut() {
 				if (mergedRenderType.value !== RenderType.Image) return;
@@ -7426,11 +7436,26 @@
 				if (mergedRenderType.value !== RenderType.Image) return;
 				const svgElement = graphRef.value?.querySelector("svg");
 				if (!svgElement) return;
-				const svgString = new XMLSerializer().serializeToString(svgElement);
+				const exportSvg = svgElement.cloneNode(true);
+				exportSvg.style.removeProperty("transform");
+				exportSvg.style.removeProperty("transform-origin");
+				exportSvg.style.removeProperty("transition");
+				exportSvg.style.removeProperty("cursor");
+				const viewBox = svgElement.viewBox.baseVal;
+				let width = viewBox.width || svgElement.width.baseVal.value;
+				let height = viewBox.height || svgElement.height.baseVal.value;
+				if (!width || !height) {
+					const bounds = svgElement.getBoundingClientRect();
+					width ||= bounds.width / scale.value;
+					height ||= bounds.height / scale.value;
+				}
+				if (!width || !height) return;
+				exportSvg.setAttribute("width", `${width}`);
+				exportSvg.setAttribute("height", `${height}`);
+				const svgString = new XMLSerializer().serializeToString(exportSvg);
 				const canvas = document.createElement("canvas");
 				const ctx = canvas.getContext("2d");
 				if (!ctx) return;
-				const { width, height } = svgElement.getBoundingClientRect();
 				const dpr = globalThis.window?.devicePixelRatio || 1;
 				canvas.width = width * dpr;
 				canvas.height = height * dpr;
@@ -7530,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,
@@ -7552,7 +7587,7 @@
 					if (now - lastTime < 16) return;
 					lastTime = now;
 					const delta = event.deltaY > 0 ? -.1 : .1;
-					scale.value = Math.max(.5, Math.min(3, scale.value + delta));
+					scale.value = Math.max(.5, scale.value + delta);
 				};
 				graphEl.addEventListener("wheel", wheelHandler, { passive: false });
 				onCleanup(() => {
@@ -7568,7 +7603,7 @@
 				applySvgTransform();
 			}, { deep: true });
 			(0, vue.onBeforeUnmount)(() => {
-				renderDiagram.cancel();
+				invalidateRender();
 			});
 			expose({ get nativeElement() {
 				return rootRef.value;
@@ -8032,6 +8067,9 @@
 	});
 	//#endregion
 	//#region components/sender/components/ActionButton.tsx
+	function _isSlot$6(s) {
+		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+	}
 	var ActionButtonContextKey = Symbol("action-button-context");
 	function useActionButtonContext() {
 		return (0, vue.inject)(ActionButtonContextKey, (0, vue.computed)(() => ({ prefixCls: "" })));
@@ -8072,7 +8110,7 @@
 				default: void 0
 			}
 		},
-		setup(props, { attrs }) {
+		setup(props, { attrs, slots }) {
 			const context = useActionButtonContext();
 			const mergedDisabled = (0, vue.computed)(() => {
 				if (props.disabled !== void 0) return props.disabled;
@@ -8101,17 +8139,20 @@
 						if (typeof handler === "function") handler();
 						attrs.onClick?.(e);
 					}
-				}), null);
+				}), _isSlot$6(slots) ? slots : { default: () => [slots] });
 			};
 		}
 	});
 	//#endregion
 	//#region components/sender/components/ClearButton.tsx
+	function _isSlot$5(s) {
+		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+	}
 	var ClearButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "ClearButton",
 		inheritAttrs: false,
-		setup(_, { attrs }) {
-			return () => (0, vue.createVNode)(ActionButton, (0, vue.mergeProps)({ "icon": (0, vue.createVNode)(_antdv_next_icons.ClearOutlined, null, null) }, attrs, { "action": "onClear" }), null);
+		setup(_, { attrs, slots }) {
+			return () => (0, vue.createVNode)(ActionButton, (0, vue.mergeProps)({ "icon": (0, vue.createVNode)(_antdv_next_icons.ClearOutlined, null, null) }, attrs, { "action": "onClear" }), _isSlot$5(slots) ? slots : { default: () => [slots] });
 		}
 	});
 	//#endregion
@@ -8170,10 +8211,13 @@
 	});
 	//#endregion
 	//#region components/sender/components/LoadingButton/index.tsx
+	function _isSlot$4(s) {
+		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+	}
 	var LoadingButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "LoadingButton",
 		inheritAttrs: false,
-		setup(_, { attrs }) {
+		setup(_, { attrs, slots }) {
 			const context = useActionButtonContext();
 			return () => {
 				const { prefixCls } = context.value;
@@ -8185,21 +8229,24 @@
 				}, attrs, {
 					"class": (0, _v_c_util.classNames)([attrs.class, `${prefixCls}-loading-button`]),
 					"action": "onCancel"
-				}), null);
+				}), _isSlot$4(slots) ? slots : { default: () => [slots] });
 			};
 		}
 	});
 	//#endregion
 	//#region components/sender/components/SendButton.tsx
+	function _isSlot$3(s) {
+		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+	}
 	var SendButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "SendButton",
 		inheritAttrs: false,
-		setup(_, { attrs }) {
+		setup(_, { attrs, slots }) {
 			return () => (0, vue.createVNode)(ActionButton, (0, vue.mergeProps)({
 				"icon": (0, vue.createVNode)(_antdv_next_icons.ArrowUpOutlined, null, null),
 				"type": "primary",
 				"shape": "circle"
-			}, attrs, { "action": "onSend" }), null);
+			}, attrs, { "action": "onSend" }), _isSlot$3(slots) ? slots : { default: () => [slots] });
 		}
 	});
 	//#endregion
@@ -20162,7 +20209,7 @@
 	}
 	//#endregion
 	//#region components/sender/components/Skill.tsx
-	function _isSlot$1(s) {
+	function _isSlot$2(s) {
 		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
 	}
 	var Skill_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -20231,7 +20278,7 @@
 			});
 			return () => {
 				const mergeTitle = props.skill.title ?? props.skill.value;
-				const titleNode = props.skill.toolTip ? (0, vue.createVNode)(antdv_next.Tooltip, props.skill.toolTip, _isSlot$1(mergeTitle) ? mergeTitle : { default: () => [mergeTitle] }) : mergeTitle;
+				const titleNode = props.skill.toolTip ? (0, vue.createVNode)(antdv_next.Tooltip, props.skill.toolTip, _isSlot$2(mergeTitle) ? mergeTitle : { default: () => [mergeTitle] }) : mergeTitle;
 				return (0, vue.createVNode)("div", {
 					"class": `${componentCls.value}-wrapper`,
 					"contenteditable": false
@@ -20499,10 +20546,10 @@
 				(type === "copy" ? senderCtx.value.onCopy : senderCtx.value.onCut)?.(event, info);
 				if (event.defaultPrevented) return true;
 				if (type === "copy" && !slice && !payloadText) return false;
+				if (type === "cut" && isLocked()) return true;
 				try {
 					event.clipboardData?.setData("text/plain", payloadText);
 				} catch {}
-				if (type === "cut" && isLocked()) return true;
 				if (type === "cut" && slice) {
 					flushDom();
 					syncSelectionFromDom();
@@ -20648,7 +20695,8 @@
 								skill: void 0
 							};
 							senderCtx.value.onPaste?.(event, info);
-							if (!event.defaultPrevented) routePasteEvent(event);
+							if (!event.defaultPrevented) if (isLocked()) event.preventDefault();
+							else routePasteEvent(event);
 						},
 						"onCopy": (event) => {
 							routeControlCopyOrCut(event, "copy");
@@ -20980,10 +21028,37 @@
 					if (pos !== null) {
 						const contentNode = editorView.state.doc.nodeAt(pos);
 						if (contentNode && contentNode.type === senderSchema.nodes.contentSlot) try {
-							const from = editorView.posAtDOM(nativeRange.startContainer, nativeRange.startOffset);
-							const to = editorView.posAtDOM(nativeRange.endContainer, nativeRange.endOffset);
 							const contentFrom = pos + 1;
 							const contentTo = pos + contentNode.nodeSize - 1;
+							const domNodeSize = (node) => {
+								if (node.nodeType === Node.TEXT_NODE) return node.textContent?.length ?? 0;
+								if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "BR") return 1;
+								let size = 0;
+								node.childNodes.forEach((child) => {
+									size += domNodeSize(child);
+								});
+								return size;
+							};
+							const contentOffsetAt = (container, offset) => {
+								let current = container;
+								let result = container.nodeType === Node.TEXT_NODE ? offset : Array.from(container.childNodes).slice(0, offset).reduce((sum, child) => sum + domNodeSize(child), 0);
+								while (current && current !== startContent) {
+									const parent = current.parentNode;
+									if (!parent) return null;
+									let sibling = current.previousSibling;
+									while (sibling) {
+										result += domNodeSize(sibling);
+										sibling = sibling.previousSibling;
+									}
+									current = parent;
+								}
+								return current === startContent ? result : null;
+							};
+							const startOffset = contentOffsetAt(nativeRange.startContainer, nativeRange.startOffset);
+							const endOffset = contentOffsetAt(nativeRange.endContainer, nativeRange.endOffset);
+							if (startOffset === null || endOffset === null) return false;
+							const from = contentFrom + startOffset;
+							const to = contentFrom + endOffset;
 							if (contentFrom <= from && from <= to && to <= contentTo) {
 								event.preventDefault();
 								const transaction = editorView.state.tr.delete(from, to);
@@ -21429,10 +21504,13 @@
 	});
 	//#endregion
 	//#region components/sender/components/SpeechButton/index.tsx
+	function _isSlot$1(s) {
+		return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+	}
 	var SpeechButton_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		name: "SpeechButton",
 		inheritAttrs: false,
-		setup(_, { attrs }) {
+		setup(_, { attrs, slots }) {
 			const context = useActionButtonContext();
 			const mergedDisabled = (0, vue.computed)(() => {
 				return attrs.disabled ?? context.value.disabled ?? context.value.onSpeechDisabled;
@@ -21447,7 +21525,7 @@
 				"icon": icon.value,
 				"variant": "text",
 				"color": "primary"
-			}, attrs, { "action": "onSpeech" }), null);
+			}, attrs, { "action": "onSpeech" }), _isSlot$1(slots) ? slots : { default: () => [slots] });
 		}
 	});
 	//#endregion

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);
@@ -229,7 +239,7 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 		}
 		function handleZoomIn() {
 			if (mergedRenderType.value !== RenderType.Image) return;
-			scale.value = Math.min(scale.value + .2, 3);
+			scale.value = scale.value + .2;
 		}
 		function handleZoomOut() {
 			if (mergedRenderType.value !== RenderType.Image) return;
@@ -254,11 +264,26 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 			if (mergedRenderType.value !== RenderType.Image) return;
 			const svgElement = graphRef.value?.querySelector("svg");
 			if (!svgElement) return;
-			const svgString = new XMLSerializer().serializeToString(svgElement);
+			const exportSvg = svgElement.cloneNode(true);
+			exportSvg.style.removeProperty("transform");
+			exportSvg.style.removeProperty("transform-origin");
+			exportSvg.style.removeProperty("transition");
+			exportSvg.style.removeProperty("cursor");
+			const viewBox = svgElement.viewBox.baseVal;
+			let width = viewBox.width || svgElement.width.baseVal.value;
+			let height = viewBox.height || svgElement.height.baseVal.value;
+			if (!width || !height) {
+				const bounds = svgElement.getBoundingClientRect();
+				width ||= bounds.width / scale.value;
+				height ||= bounds.height / scale.value;
+			}
+			if (!width || !height) return;
+			exportSvg.setAttribute("width", `${width}`);
+			exportSvg.setAttribute("height", `${height}`);
+			const svgString = new XMLSerializer().serializeToString(exportSvg);
 			const canvas = document.createElement("canvas");
 			const ctx = canvas.getContext("2d");
 			if (!ctx) return;
-			const { width, height } = svgElement.getBoundingClientRect();
 			const dpr = globalThis.window?.devicePixelRatio || 1;
 			canvas.width = width * dpr;
 			canvas.height = height * dpr;
@@ -358,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,
@@ -380,7 +415,7 @@ var XMermaid = /* @__PURE__ */ defineComponent({
 				if (now - lastTime < 16) return;
 				lastTime = now;
 				const delta = event.deltaY > 0 ? -.1 : .1;
-				scale.value = Math.max(.5, Math.min(3, scale.value + delta));
+				scale.value = Math.max(.5, scale.value + delta);
 			};
 			graphEl.addEventListener("wheel", wheelHandler, { passive: false });
 			onCleanup(() => {
@@ -396,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-beta.1";
+var version = "1.2.4";
 //#endregion
 export { version };

package/dist/sender/components/ActionButton.js

@@ -1,6 +1,9 @@
-import { computed, createVNode, defineComponent, inject, mergeProps, provide } from "vue";
+import { computed, createVNode, defineComponent, inject, isVNode, mergeProps, provide } from "vue";
 import { Button } from "antdv-next";
 //#region components/sender/components/ActionButton.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var ActionButtonContextKey = Symbol("action-button-context");
 function useActionButtonContext() {
 	return inject(ActionButtonContextKey, computed(() => ({ prefixCls: "" })));
@@ -41,7 +44,7 @@ var ActionButton = /* @__PURE__ */ defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		const context = useActionButtonContext();
 		const mergedDisabled = computed(() => {
 			if (props.disabled !== void 0) return props.disabled;
@@ -70,7 +73,7 @@ var ActionButton = /* @__PURE__ */ defineComponent({
 					if (typeof handler === "function") handler();
 					attrs.onClick?.(e);
 				}
-			}), null);
+			}), _isSlot(slots) ? slots : { default: () => [slots] });
 		};
 	}
 });

package/dist/sender/components/ClearButton.js

@@ -1,12 +1,15 @@
 import ActionButton from "./ActionButton.js";
-import { createVNode, defineComponent, mergeProps } from "vue";
+import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
 import { ClearOutlined } from "@antdv-next/icons";
 //#region components/sender/components/ClearButton.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var ClearButton_default = /* @__PURE__ */ defineComponent({
 	name: "ClearButton",
 	inheritAttrs: false,
-	setup(_, { attrs }) {
-		return () => createVNode(ActionButton, mergeProps({ "icon": createVNode(ClearOutlined, null, null) }, attrs, { "action": "onClear" }), null);
+	setup(_, { attrs, slots }) {
+		return () => createVNode(ActionButton, mergeProps({ "icon": createVNode(ClearOutlined, null, null) }, attrs, { "action": "onClear" }), _isSlot(slots) ? slots : { default: () => [slots] });
 	}
 });
 //#endregion

package/dist/sender/components/LoadingButton/index.js

@@ -1,12 +1,15 @@
 import ActionButton, { useActionButtonContext } from "../ActionButton.js";
 import StopLoading_default from "./StopLoading.js";
 import { classNames } from "@v-c/util";
-import { createVNode, defineComponent, mergeProps } from "vue";
+import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
 //#region components/sender/components/LoadingButton/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var LoadingButton_default = /* @__PURE__ */ defineComponent({
 	name: "LoadingButton",
 	inheritAttrs: false,
-	setup(_, { attrs }) {
+	setup(_, { attrs, slots }) {
 		const context = useActionButtonContext();
 		return () => {
 			const { prefixCls } = context.value;
@@ -18,7 +21,7 @@ var LoadingButton_default = /* @__PURE__ */ defineComponent({
 			}, attrs, {
 				"class": classNames([attrs.class, `${prefixCls}-loading-button`]),
 				"action": "onCancel"
-			}), null);
+			}), _isSlot(slots) ? slots : { default: () => [slots] });
 		};
 	}
 });

package/dist/sender/components/SendButton.js

@@ -1,16 +1,19 @@
 import ActionButton from "./ActionButton.js";
-import { createVNode, defineComponent, mergeProps } from "vue";
+import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
 import { ArrowUpOutlined } from "@antdv-next/icons";
 //#region components/sender/components/SendButton.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
 var SendButton_default = /* @__PURE__ */ defineComponent({
 	name: "SendButton",
 	inheritAttrs: false,
-	setup(_, { attrs }) {
+	setup(_, { attrs, slots }) {
 		return () => createVNode(ActionButton, mergeProps({
 			"icon": createVNode(ArrowUpOutlined, null, null),
 			"type": "primary",
 			"shape": "circle"
-		}, attrs, { "action": "onSend" }), null);
+		}, attrs, { "action": "onSend" }), _isSlot(slots) ? slots : { default: () => [slots] });
 	}
 });
 //#endregion