fix(ui5-ai-textarea): apply feedback and suggestions

ndeshev · web-flow · commit 6ed3731008f4 · 2025-11-03T16:18:36.000+02:00
* fix(ui5-ai-textarea): apply feedback and improvements

Added "Stop Generating" tooltip to button during generation.
Improved version history management in the test sample.
Other minor fixes and improvements.
diff --git a/packages/ai/cypress/specs/WritingAssistant.cy.tsx b/packages/ai/cypress/specs/WritingAssistant.cy.tsx
@@ -869,6 +869,46 @@ describe("WritingAssistant Component", () => {
 					.should("have.attr", "tooltip", "Writing Assistant (Shift + F4)");
 			});
 
+			it("should have stop tooltip when loading", () => {
+				cy.mount(<WritingAssistant loading={true} />);
+
+				cy.get("[ui5-ai-writing-assistant]")
+					.shadow()
+					.find("#ai-menu-btn")
+					.should("have.attr", "tooltip", "Stop Generating (Esc)");
+			});
+
+			it("should change tooltip based on loading state", () => {
+				cy.mount(<WritingAssistant loading={false} />);
+
+				cy.get("[ui5-ai-writing-assistant]")
+					.as("writingAssistant");
+
+				// Verify initial button tooltip
+				cy.get("@writingAssistant")
+					.shadow()
+					.find("#ai-menu-btn")
+					.should("have.attr", "tooltip", "Writing Assistant (Shift + F4)");
+
+				// Change to loading state
+				cy.get("@writingAssistant").invoke("prop", "loading", true);
+
+				// Verify stop tooltip
+				cy.get("@writingAssistant")
+					.shadow()
+					.find("#ai-menu-btn")
+					.should("have.attr", "tooltip", "Stop Generating (Esc)");
+
+				// Change back to non-loading state
+				cy.get("@writingAssistant").invoke("prop", "loading", false);
+
+				// Verify button tooltip is restored
+				cy.get("@writingAssistant")
+					.shadow()
+					.find("#ai-menu-btn")
+					.should("have.attr", "tooltip", "Writing Assistant (Shift + F4)");
+			});
+
 			it("should maintain accessibility attributes when loading state changes", () => {
 				cy.mount(<WritingAssistant loading={false} />);
 
@@ -923,7 +963,7 @@ describe("WritingAssistant Component", () => {
 					.find("#ai-menu-btn")
 					.should("have.attr", "data-state", "generating")
 					.should("have.attr", "accessible-name", "Writing Assistant")
-					.should("have.attr", "tooltip", "Writing Assistant (Shift + F4)")
+					.should("have.attr", "tooltip", "Stop Generating (Esc)")
 					.should("have.attr", "icon", "stop");
 			});
 
diff --git a/packages/ai/src/TextArea.ts b/packages/ai/src/TextArea.ts
@@ -5,7 +5,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 
 import { BaseTextArea } from "@ui5/webcomponents/dist/TextArea.js";
-import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
@@ -18,7 +17,6 @@ import valueStateMessageStyles from "@ui5/webcomponents/dist/generated/themes/Va
 
 // Templates
 import TextAreaTemplate from "./TextAreaTemplate.js";
-import WritingAssistant from "./WritingAssistant.js";
 
 /**
  * @class
@@ -56,10 +54,6 @@ import WritingAssistant from "./WritingAssistant.js";
 		valueStateMessageStyles,
 		TextAreaCss,
 	],
-	dependencies: [
-		WritingAssistant,
-		BusyIndicator,
-	],
 })
 
 /**
diff --git a/packages/ai/src/WritingAssistant.ts b/packages/ai/src/WritingAssistant.ts
@@ -5,6 +5,7 @@ import { i18n } from "@ui5/webcomponents-base/dist/decorators.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
 	WRITING_ASSISTANT_LABEL,
@@ -14,6 +15,7 @@ import {
 	WRITING_ASSISTANT_TOOLBAR_ACCESSIBLE_NAME,
 	WRITING_ASSISTANT_BUTTON_ACCESSIBLE_NAME,
 	WRITING_ASSISTANT_BUTTON_TOOLTIP,
+	WRITING_ASSISTANT_STOP_TOOLTIP,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -153,6 +155,10 @@ class WritingAssistant extends UI5Element {
 	@i18n("@ui5/webcomponents-ai")
 	static i18nBundleAi: I18nBundle;
 
+	static async onDefine() {
+		WritingAssistant.i18nBundleAi = await getI18nBundle("@ui5/webcomponents-ai");
+	}
+
 	/**
 	 * Handles the version change event from the versioning component.
 	 */
@@ -198,6 +204,10 @@ class WritingAssistant extends UI5Element {
 	get _buttonTooltip() {
 		return WritingAssistant.i18nBundleAi.getText(WRITING_ASSISTANT_BUTTON_TOOLTIP);
 	}
+
+	get _stopTooltip() {
+		return WritingAssistant.i18nBundleAi.getText(WRITING_ASSISTANT_STOP_TOOLTIP);
+	}
 }
 
 WritingAssistant.define();
diff --git a/packages/ai/src/WritingAssistantTemplate.tsx b/packages/ai/src/WritingAssistantTemplate.tsx
@@ -39,7 +39,7 @@ export default function WritingAssistantTemplate(this: WritingAssistant) {
 				icon={this.loading ? "stop" : "ai"}
 				data-state={this.loading ? "generating" : "generate"}
 				onClick={this.handleButtonClick}
-				tooltip={this._buttonTooltip}
+				tooltip={this.loading ? this._stopTooltip : this._buttonTooltip}
 				accessibilityAttributes={{ hasPopup: this.loading ? "false" : "menu" }}
 				accessibleName={this._buttonAccessibleName}
 				overflowPriority="NeverOverflow"
diff --git a/packages/ai/src/i18n/messagebundle.properties b/packages/ai/src/i18n/messagebundle.properties
@@ -37,9 +37,12 @@ WRITING_ASSISTANT_TOOLBAR_ACCESSIBLE_NAME=Writing Assistant Toolbar
 #XFLD: Accessible name for the Writing Assistant button
 WRITING_ASSISTANT_BUTTON_ACCESSIBLE_NAME=Writing Assistant
 
-#XFLD: Tooltip for the Writing Assistant button
+#XTOL: Tooltip for the Writing Assistant button
 WRITING_ASSISTANT_BUTTON_TOOLTIP=Writing Assistant (Shift + F4)
 
+#XTOL: Writing Assistant stop generating button tooltip
+WRITING_ASSISTANT_STOP_TOOLTIP=Stop Generating (Esc)
+
 #XFLD: Tooltip for the Previous Version button
 VERSIONING_PREVIOUS_BUTTON_TOOLTIP=Previous Version
 
diff --git a/packages/ai/test/pages/TextArea.html b/packages/ai/test/pages/TextArea.html
@@ -92,7 +92,7 @@ <h1 class="demo-title">AI TextArea Component</h1>
 			
 			<strong>Generation Behavior:</strong><br>
 			• Selecting a new action while generating will stop current generation<br>
-			• Stopped generations are saved as versions with "(stopped)" suffix<br>
+			• Cancelled generations restore previous content and are not saved to history<br>
 			• History is limited to 50 versions to prevent memory issues
 		</div>
 	</div>
@@ -169,6 +169,7 @@ <h1 class="demo-title">AI TextArea Component</h1>
 		let currentActionInProgress = null;
 		let typingInterval = null;
 		let currentGenerationIndex = 0;
+		let contentBeforeGeneration = "";
 
 		const textarea = document.getElementById('ai-textarea');
 		const menu = document.getElementById('ai-menu');
@@ -234,14 +235,13 @@ <h1 class="demo-title">AI TextArea Component</h1>
 
 			menu.innerHTML = '';
 			
-			// Add initial "Generate text" option if no history
 			if (!hasHistory) {
 				const generateItem = document.createElement('ui5-menu-item');
 				generateItem.setAttribute('text', 'Generate text');
 				generateItem.dataset.action = 'generate';
-				generateItem.dataset.processingLabel = 'Generating text...';
+				generateItem.dataset.processingLabel = 'Generating...';
 				generateItem.dataset.completedLabel = 'Generated text';
-				generateItem.dataset.textKey = 'en';
+				generateItem.dataset.textKey = 'generateText';
 				menu.appendChild(generateItem);
 			}
 
@@ -339,6 +339,7 @@ <h1 class="demo-title">AI TextArea Component</h1>
 			const textKey = menuItem.dataset.textKey || 'en';
 
 			saveCurrentVersion();
+			contentBeforeGeneration = textarea.value;
 			currentActionInProgress = action;
 			currentGenerationIndex += 1;
 			const generationIdForThisRun = currentGenerationIndex;
@@ -364,23 +365,14 @@ <h1 class="demo-title">AI TextArea Component</h1>
 
 			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()
-			});
-
-			currentIndexHistory = versionHistory.length - 1;
+			
+			// Restore the previous content instead of saving the cancelled action
+			textarea.value = contentBeforeGeneration;
 			currentActionInProgress = null;
+			textarea.loading = false;
+			textarea.promptDescription = "";
 
-			buildMenuFromConfig();
 			updateComponentState();
-			textarea.loading = false;
 		}
 
 		function handleVersionChange(event) {
@@ -423,6 +415,7 @@ <h1 class="demo-title">AI TextArea Component</h1>
 			currentIndexHistory = 0;
 			currentGenerationIndex = 0;
 			currentActionInProgress = null;
+			contentBeforeGeneration = "";
 			
 			textarea.value = "Innovation managers operate with both creativity and business acumen, driving initiatives that cultivate an innovation-friendly culture.";
 			textarea.loading = false;
