fix(ui5-ai-input): add docs and correct samples (#12643)

Author: MapTo0

packages/ai/cypress/specs/TextArea.cy.tsx

@@ -105,7 +105,7 @@ describe("Basic", () => {
 			cy.mount(
 				<TextArea
 					loading={false}
-					currentVersion={1}
+					currentVersion={2}
 					totalVersions={3}
 					onVersionChange={onVersionChange}
 				/>
@@ -182,7 +182,7 @@ describe("Basic", () => {
 			cy.mount(
 				<TextArea
 					loading={false}
-					currentVersion={2}
+					currentVersion={3}
 					totalVersions={3}
 				/>
 			);
@@ -602,4 +602,4 @@ describe("Basic", () => {
 				.should("not.exist");
 		});
 	});
-});
+});

packages/ai/cypress/specs/WritingAssistant.cy.tsx

@@ -240,7 +240,7 @@ describe("WritingAssistant Component", () => {
 				.shadow()
 				.find("[ui5-ai-versioning]")
 				.should("exist")
-				.should("have.prop", "currentStep", 2)
+				.should("have.prop", "currentStep", 1)
 				.should("have.prop", "totalSteps", 3);
 
 			cy.get("[ui5-ai-writing-assistant]")
@@ -255,7 +255,7 @@ describe("WritingAssistant Component", () => {
 			cy.mount(
 				<WritingAssistant
 					loading={false}
-					currentVersion={1}
+					currentVersion={2}
 					totalVersions={4}
 				/>
 			);
@@ -587,7 +587,7 @@ describe("WritingAssistant Component", () => {
 			cy.mount(
 				<WritingAssistant
 					loading={false}
-					currentVersion={1}
+					currentVersion={2}
 					totalVersions={4}
 					onVersionChange={onVersionChange}
 				/>
@@ -662,7 +662,7 @@ describe("WritingAssistant Component", () => {
 				<WritingAssistant
 					loading={false}
 					promptDescription="Generated text"
-					currentVersion={0}
+					currentVersion={1}
 					totalVersions={1}
 				/>
 			);
@@ -671,12 +671,12 @@ describe("WritingAssistant Component", () => {
 				.as("toolbar")
 				.invoke("prop", "loading", false)
 				.invoke("prop", "promptDescription", "Multiple results")
-				.invoke("prop", "currentVersion", 1)
+				.invoke("prop", "currentVersion", 2)
 				.invoke("prop", "totalVersions", 3);
 
 			cy.get("@toolbar")
 				.should("have.prop", "loading", false)
-				.should("have.prop", "currentVersion", 1)
+				.should("have.prop", "currentVersion", 2)
 				.should("have.prop", "totalVersions", 3);
 
 			cy.get("@toolbar")
@@ -796,7 +796,7 @@ describe("WritingAssistant Component", () => {
 			cy.mount(
 				<WritingAssistant
 					loading={false}
-					currentVersion={1}
+					currentVersion={2}
 					totalVersions={3}
 					onVersionChange={cy.stub().as("onVersionChange")}
 					onButtonClick={cy.stub().as("onButtonClick")}
@@ -1073,7 +1073,7 @@ describe("WritingAssistant Component", () => {
 				.shadow()
 				.find("[ui5-ai-versioning]")
 				.should("exist")
-				.should("have.prop", "currentStep", 3)
+				.should("have.prop", "currentStep", 2)
 				.should("have.prop", "totalSteps", 5);
 
 			cy.get("[ui5-ai-writing-assistant]")
@@ -1083,7 +1083,7 @@ describe("WritingAssistant Component", () => {
 				.find("ui5-ai-toolbar-label")
 				.shadow()
 				.find("span")
-				.should("contain.text", "3 / 5");
+				.should("contain.text", "2 / 5");
 		});
 
 		it("should maintain proper layout with all elements", () => {
@@ -1144,4 +1144,4 @@ describe("WritingAssistant Component", () => {
 				.should("have.prop", "loading", true);
 		});
 	});
-});
+});

packages/ai/src/Input.ts

@@ -9,6 +9,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import BaseInput from "@ui5/webcomponents/dist/Input.js";
 import type Menu from "@ui5/webcomponents/dist/Menu.js";
+import type { MenuItemClickEventDetail } from "@ui5/webcomponents/dist/Menu.js";
 import type Button from "./Button.js";
 
 // styles
@@ -26,6 +27,10 @@ import {
 	WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT,
 } from "./generated/i18n/i18n-defaults.js";
 
+type InputVersionChangeEventDetail = {
+	backwards: boolean,
+};
+
 /**
  * @class
  *
@@ -80,6 +85,11 @@ import {
 	cancelable: true,
 })
 
+/** Fired when an item from the AI actions menu is clicked.
+ * @public
+ */
+@event("item-click")
+
 /**
  * Fired when the user selects the "Stop" button to stop ongoing AI text generation.
  * @public
@@ -96,11 +106,10 @@ import {
 
 class Input extends BaseInput {
 	eventDetails!: BaseInput["eventDetails"] & {
-		"version-change": {
-			backwards: boolean;
-		};
-		"stop-generation": object;
-		"button-click": object;
+		"version-change": InputVersionChangeEventDetail;
+		"stop-generation": void;
+		"button-click": void;
+		"item-click": MenuItemClickEventDetail;
 	};
 
 	/**
@@ -246,15 +255,8 @@ class Input extends BaseInput {
 		this._handleVersionChange(new CustomEvent("version-change", { detail: { backwards: false } }));
 	}
 
-	_onMenuIconClick(): void {
-		this.menu?.addEventListener("item-click", (e: Event) => {
-			const customEvent = e as CustomEvent;
-			this.dispatchEvent(new CustomEvent("item-click", {
-				detail: customEvent.detail,
-				bubbles: true,
-				composed: true,
-			}));
-		});
+	_onMenuIconClick(e: CustomEvent<MenuItemClickEventDetail>): void {
+		this.fireDecoratorEvent("item-click", e.detail);
 	}
 
 	/**
@@ -309,10 +311,11 @@ class Input extends BaseInput {
 	}
 
 	get menu() {
-		return this.shadowRoot?.querySelector("ui5-menu") as Menu;
+		return this.shadowRoot?.querySelector("[ui5-menu]") as Menu;
 	}
 }
 
 Input.define();
 
+export type { InputVersionChangeEventDetail, MenuItemClickEventDetail as InputItemClickEventDetail };
 export default Input;

packages/ai/src/TextArea.ts

@@ -18,6 +18,10 @@ import valueStateMessageStyles from "@ui5/webcomponents/dist/generated/themes/Va
 // Templates
 import TextAreaTemplate from "./TextAreaTemplate.js";
 
+type TextAreaVersionChangeEventDetail = {
+	backwards: boolean,
+};
+
 /**
  * @class
  *
@@ -59,6 +63,7 @@ import TextAreaTemplate from "./TextAreaTemplate.js";
 /**
  * Fired when the user clicks on version navigation buttons.
  *
+ * @param {boolean} backwards - Indicates if navigation is backwards (true) or forwards (false, default).
  * @public
  */
 @event("version-change")
@@ -72,10 +77,8 @@ import TextAreaTemplate from "./TextAreaTemplate.js";
 
 class TextArea extends BaseTextArea {
 	eventDetails!: BaseTextArea["eventDetails"] & {
-		"version-change": {
-			backwards: boolean;
-		};
-		"stop-generation": object;
+		"version-change": TextAreaVersionChangeEventDetail;
+		"stop-generation": void;
 	};
 
 	// Store bound handler for proper cleanup
@@ -242,4 +245,5 @@ class TextArea extends BaseTextArea {
 
 TextArea.define();
 
+export type { TextAreaVersionChangeEventDetail };
 export default TextArea;

packages/ai/src/WritingAssistantTemplate.tsx

@@ -18,7 +18,7 @@ export default function WritingAssistantTemplate(this: WritingAssistant) {
 		>
 			{isMultiResults && !this.loading && (
 				<Versioning
-					currentStep={this.currentVersion + 1}
+					currentStep={this.currentVersion}
 					totalSteps={this.totalVersions}
 					onVersion-change={this.handleVersionChange}
 				/>

packages/website/docs/_samples/ai/TextArea/Basic/main.js

@@ -47,7 +47,7 @@ function animateTextGeneration(text) {
 function completeGeneration() {
 	versionHistory.push({
 		value: textarea.value,
-		actionText: "Generated text",
+		promptDescription: "Generated text",
 		timestamp: new Date().toISOString()
 	});
 
@@ -57,11 +57,11 @@ function completeGeneration() {
 }
 
 function updateComponentState() {
-	textarea.currentVersionIndex = currentVersionIndex + 1;
+	textarea.currentVersion = currentVersionIndex + 1;
 	textarea.totalVersions = versionHistory.length;
 
 	if (versionHistory[currentVersionIndex]) {
-		textarea.actionText = versionHistory[currentVersionIndex].actionText;
+		textarea.promptDescription = versionHistory[currentVersionIndex].promptDescription;
 	}
 }
 
@@ -75,7 +75,7 @@ async function executeGeneration() {
 
 	// Set loading state
 	textarea.loading = true;
-	textarea.actionText = "Generating text...";
+	textarea.promptDescription = "Generating text...";
 
 	try {
 		// Simulate processing delay
@@ -92,7 +92,7 @@ async function executeGeneration() {
 	} catch (error) {
 		console.error('Generation failed:', error);
 		textarea.loading = false;
-		textarea.actionText = 'Generation failed';
+		textarea.promptDescription = 'Generation failed';
 	}
 }
 
@@ -107,7 +107,7 @@ function stopGeneration() {
 	if (textarea.value.trim()) {
 		versionHistory.push({
 			value: textarea.value,
-			actionText: "Generated text (stopped)",
+			promptDescription: "Generated text (stopped)",
 			timestamp: new Date().toISOString()
 		});