diff --git a/packages/ai/test/pages/TextArea.html b/packages/ai/test/pages/TextArea.html
index 0a93922e8a7c..b573e67fe99e 100644
--- a/packages/ai/test/pages/TextArea.html
+++ b/packages/ai/test/pages/TextArea.html
@@ -193,7 +193,7 @@ <h1 class="demo-title">AI TextArea Component</h1>
 				textarea.value = versionHistory[versionIndex].value;
 			}
 
-			textarea.currentVersion = currentIndexHistory;
+			textarea.currentVersion = currentIndexHistory + 1;
 			textarea.totalVersions = versionHistory.length;
 
 			if (versionHistory[currentIndexHistory]) {
@@ -366,13 +366,27 @@ <h1 class="demo-title">AI TextArea Component</h1>
 			stopTypingAnimation();
 			currentGenerationIndex += 1;
 			
-			// Restore the previous content instead of saving the cancelled action
-			textarea.value = contentBeforeGeneration;
+			const stoppedValue = textarea.value;
+			if (stoppedValue.trim()) {
+				const menuItem = findMenuItemByAction(currentActionInProgress);
+				const completedLabel = (menuItem && menuItem.dataset.completedLabel) 
+					? menuItem.dataset.completedLabel + " (stopped)" 
+					: "Generation stopped";
+
+				versionHistory.push({
+					value: stoppedValue,
+					action: currentActionInProgress,
+					endAction: completedLabel,
+					timestamp: new Date().toISOString()
+				});
+
+				currentIndexHistory = versionHistory.length - 1;
+				buildMenuFromConfig();
+				updateComponentState();
+			}
+
 			currentActionInProgress = null;
 			textarea.loading = false;
-			textarea.promptDescription = "";
-
-			updateComponentState();
 		}
 
 		function handleVersionChange(event) {
diff --git a/packages/website/docs/_samples/ai/TextArea/Extended/main.js b/packages/website/docs/_samples/ai/TextArea/Extended/main.js
index 755e2eadb5fe..f85217ce2480 100644
--- a/packages/website/docs/_samples/ai/TextArea/Extended/main.js
+++ b/packages/website/docs/_samples/ai/TextArea/Extended/main.js
@@ -72,6 +72,7 @@ let currentIndexHistory = 0;
 let currentActionInProgress = null;
 let typingInterval = null;
 let currentGenerationIndex = 0;
+let contentBeforeGeneration = "";
 
 const textarea = document.getElementById('ai-textarea');
 const menu = document.getElementById('ai-menu');
@@ -95,7 +96,7 @@ function updateComponentState(versionIndex = null) {
 		textarea.value = versionHistory[versionIndex].value;
 	}
 
-	textarea.currentVersion = currentIndexHistory;
+	textarea.currentVersion = currentIndexHistory + 1;
 	textarea.totalVersions = versionHistory.length;
 
 	if (versionHistory[currentIndexHistory]) {
@@ -242,6 +243,7 @@ async function executeAction(action) {
 	const textKey = menuItem.dataset.textKey || 'en';
 
 	saveCurrentVersion();
+	contentBeforeGeneration = textarea.value;
 	currentActionInProgress = action;
 	currentGenerationIndex += 1;
 	const generationIdForThisRun = currentGenerationIndex;
@@ -267,22 +269,26 @@ function stopGeneration() {
 
 	stopTypingAnimation();
 	currentGenerationIndex += 1;
-	const action = currentActionInProgress || 'generate';
-	const menuItem = findMenuItemByAction(action);
-	const completedLabel = (menuItem && menuItem.dataset.completedLabel) ? menuItem.dataset.completedLabel : 'Action completed';
-
-	versionHistory.push({
-		value: textarea.value,
-		action,
-		endAction: completedLabel + " (stopped)",
-		timestamp: new Date().toISOString()
-	});
+	
+	const stoppedValue = textarea.value;
+	if (stoppedValue.trim()) {
+		const action = currentActionInProgress || 'generate';
+		const menuItem = findMenuItemByAction(action);
+		const completedLabel = (menuItem && menuItem.dataset.completedLabel) ? menuItem.dataset.completedLabel : 'Action completed';
+
+		versionHistory.push({
+			value: stoppedValue,
+			action,
+			endAction: completedLabel + " (stopped)",
+			timestamp: new Date().toISOString()
+		});
+
+		currentIndexHistory = versionHistory.length - 1;
+		buildMenuFromConfig();
+		updateComponentState();
+	}
 
-	currentIndexHistory = versionHistory.length - 1;
 	currentActionInProgress = null;
-
-	buildMenuFromConfig();
-	updateComponentState();
 	textarea.loading = false;
 }