feat(ui5-ai-textarea): introduce new component

[ndeshev]

UI5 AI Textarea Component Overview

Component Tag: ui5-ai-textarea

An AI-enhanced textarea component that provides intelligent text generation capabilities with version management and user-friendly controls.

Component Architecture

Internal Components

The ui5-ai-textarea component is composed of two specialized internal components:

1. WritingAssistant (ui5-ai-writing-assistant)

• Purpose: Specialized AI toolbar with generation controls and version navigation
• Type: Internal component (private)
• Features:
  • AI button with loading states
  • Version navigation controls
  • Action status labels
  • Integration with menu system

2. Versioning (ui5-ai-versioning)

• Purpose: Version navigation controls for AI-generated content
• Type: Internal component (private)
• Features:
  • Previous/Next navigation buttons
  • Version counter display
  • Smart focus management
  • Boundary state handling

---

API Reference

Core AI Properties

Property	Type	Default	Description
loading	Boolean	false	Indicates AI processing state
actionText	String	""	Displays current AI action being performed
currentVersionIndex	Number	1	Current version index (1-based)
totalVersions	Number	1	Total number of AI-generated versions

Inherited Properties

The component inherits all standard TextArea properties, including:

• value, placeholder, disabled, readonly
• required, maxlength, rows, growing
• valueState, accessibleName

Events

AI-Specific Events

Event	Description	Detail Object
version-change	Fired when user navigates between versions	{ backwards: boolean }
stop-generation	Fired when user stops AI text generation	{}

Inherited Events

All standard TextArea events: input, change, select, etc.

---

User Interface & Interactions

Menu Integration

<ui5-ai-textarea>
  <ui5-menu slot="menu">
    <ui5-menu-item text="Generate content"></ui5-menu-item>
    <ui5-menu-item text="Improve text"></ui5-menu-item>
    <ui5-menu-item text="Summarize"></ui5-menu-item>
  </ui5-menu>
</ui5-ai-textarea>

• Slot: menu - Accepts ui5-menu component for AI action menus
• Behavior: Automatically opens when AI button is clicked
• Integration: Menu opener is automatically set to the AI button

⌨️ Keyboard Shortcuts

Shortcut	Action	Availability
Shift + F4	Focus AI menu button	Always
Ctrl/Cmd + Shift + Z	Navigate to previous version	Multiple versions only
Ctrl/Cmd + Shift + Y	Navigate to next version	Multiple versions only

---

🔄 UI States & Behavior

⏳ Loading State

When loading="true":

• ⚡ Shows busy indicator overlay on textarea
• 🛑 AI button transforms to "Stop" button with stop icon
• 📢 Action text is announced to screen readers via aria-live region
• 🚫 Prevents version navigation during generation

📊 Version Management

Single Version (totalVersions = 1)

• ✨ Clean interface with no version controls shown
• 🎯 Focus remains on core AI functionality

Multiple Versions (totalVersions > 1)

• 🔄 Shows version navigation controls:
  • Previous/Next buttons with navigation icons
  • Version counter display (e.g., "2 / 5")
• 🧠 Smart focus management when reaching boundaries
• 🎛️ Automatic button state management (disabled at boundaries)

---

Usage Examples

🚀 Basic Implementation

<ui5-ai-textarea 
  value="Sample text" 
  placeholder="Enter text here...">
  <ui5-menu slot="menu">
    <ui5-menu-item text="Generate content"></ui5-menu-item>
    <ui5-menu-item text="Improve writing"></ui5-menu-item>
  </ui5-menu>
</ui5-ai-textarea>

🔄 With Version Management

<ui5-ai-textarea 
  loading="false" 
  action-text="Generated content" 
  current-version-index="2" 
  total-versions="3">
  <ui5-menu slot="menu">
    <ui5-menu-item text="Generate content"></ui5-menu-item>
    <ui5-menu-item text="Refine text"></ui5-menu-item>
    <ui5-menu-item text="Change tone"></ui5-menu-item>
  </ui5-menu>
</ui5-ai-textarea>

⚡ Loading State Example

<ui5-ai-textarea 
  loading="true" 
  action-text="Generating improved content..."
  current-version-index="1" 
  total-versions="1">
  <ui5-menu slot="menu">
    <ui5-menu-item text="Generate content"></ui5-menu-item>
  </ui5-menu>
</ui5-ai-textarea>

---

BGSOFUIRILA-4032

[Copilot]

Pull Request Overview

This PR introduces a new AI-powered textarea component that extends the standard TextArea with AI Writing Assistant capabilities, including text generation, version management, and interactive toolbar functionality.

• Introduces ui5-ai-textarea component with AI Writing Assistant integration
• Adds supporting components for version management and writing assistance toolbar
• Implements comprehensive test coverage and demo page functionality

Reviewed Changes

Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/ai/src/TextArea.ts	Main AITextArea component extending TextArea with AI capabilities
packages/ai/src/WritingAssistant.ts	WritingAssistant component providing AI toolbar functionality
packages/ai/src/Versioning.ts	Versioning component for navigating between AI-generated content versions
packages/ai/test/pages/TextArea.html	Demo page showcasing AITextArea features and interactions
packages/ai/cypress/specs/*.cy.tsx	Comprehensive Cypress test suites for all new components
packages/ai/src/themes/*.css	CSS styling for AI components
packages/ai/src/*Template.tsx	JSX templates for component rendering
packages/ai/src/types/AssistantState.ts	TypeScript enum defining AI assistant states
packages/ai/src/i18n/messagebundle.properties	Internationalization strings
packages/ai/src/bundle.esm.ts	Export bundle update
packages/ai/README.md	Documentation update
packages/localization/used-modules.txt	Localization module cleanup

Comments suppressed due to low confidence (5)

packages/ai/src/Versioning.ts:52

• The tag name uses hard-coded component reference 'ui5-ai-textarea-versioning' which violates scoping guidelines. Consider using a more generic tag name like 'ui5-ai-versioning' to make the component reusable across different contexts.

	tag: "ui5-ai-textarea-versioning",

packages/ai/src/TextArea.ts:228

• Hard-coded tag name 'ui5-ai-writing-assistant' violates scoping guidelines. Use attribute notation instead: this.shadowRoot?.querySelector('[ui5-ai-writing-assistant]')

			const toolbar = this.shadowRoot?.querySelector("ui5-ai-writing-assistant") as HTMLElement;
			const aiButton = toolbar?.shadowRoot?.querySelector("#ai-menu-btn") as HTMLElement;

packages/ai/src/TextArea.ts:215

• Hard-coded tag name 'textarea' violates scoping guidelines. Use attribute notation instead: this.shadowRoot?.querySelector('[textarea]') or use a more specific selector.

		setTimeout(() => {
			const textarea = this.shadowRoot?.querySelector("textarea");
			if (textarea && textarea.value !== this.value) {
				textarea.value = this.value;
			}
		}, 0);

packages/ai/src/TextArea.ts:258

• Hard-coded tag name 'textarea' violates scoping guidelines. Use attribute notation instead: this.shadowRoot?.querySelector('[textarea]') or use a more specific selector.

		const textarea = this.shadowRoot?.querySelector("textarea");

packages/ai/src/TextArea.ts:271

• Hard-coded tag name 'textarea' violates scoping guidelines. Use attribute notation instead: this.shadowRoot?.querySelector('[textarea]') or use a more specific selector.

			const textarea = this.shadowRoot?.querySelector("textarea");

[ui5-webcomponents-bot]

🧹 Preview deployment cleaned up: https://pr-12157--ui5-webcomponents.netlify.app

[Copilot]

Pull Request Overview

Copilot reviewed 20 out of 20 changed files in this pull request and generated 4 comments.

[ui5-webcomponents-bot]

🎉 This PR is included in version v2.16.0-rc.0 🎉

The release is available on v2.16.0-rc.0

Your semantic-release bot 📦🚀

[vladitasev]

This is not OK. Please make the slot require a ui5-menu, use the generic for getSlottedNodes and work with ui5-menu here. The way this slot is currently defined tells the user any HTML element can be used, which will be for example represented by sap.ui.core.Control in OpenUI5 integration.