fix(playground): tsx support in editor (#12599)

Author: nnaydenow

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 VersionChangeEventDetail = {
+	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": VersionChangeEventDetail;
+		"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,7 +311,7 @@ class Input extends BaseInput {
 	}
 
 	get menu() {
-		return this.shadowRoot?.querySelector("ui5-menu") as Menu;
+		return this.shadowRoot?.querySelector("[ui5-menu]") as Menu;
 	}
 }
 

packages/ai/src/TextArea.ts

@@ -20,6 +20,10 @@ import valueStateMessageStyles from "@ui5/webcomponents/dist/generated/themes/Va
 import TextAreaTemplate from "./TextAreaTemplate.js";
 import WritingAssistant from "./WritingAssistant.js";
 
+type VersionChangeEventDetail = {
+	backwards: boolean,
+};
+
 /**
  * @class
  *
@@ -78,10 +82,8 @@ import WritingAssistant from "./WritingAssistant.js";
 
 class TextArea extends BaseTextArea {
 	eventDetails!: BaseTextArea["eventDetails"] & {
-		"version-change": {
-			backwards: boolean;
-		};
-		"stop-generation": object;
+		"version-change": VersionChangeEventDetail;
+		"stop-generation": void;
 	};
 
 	// Store bound handler for proper cleanup

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()
 		});