@ui5/webcomponents-ai 2.15.0 → 2.16.0-rc.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents-ai",
-  "version": "2.15.0",
+  "version": "2.16.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -317,6 +317,83 @@
               }
             ]
           }
+        },
+        {
+          "name": "ui5-ai-textarea",
+          "description": "### Overview\n\nThe `ui5-ai-textarea` component extends the standard TextArea with AI Writing Assistant capabilities.\nIt provides AI-powered text generation, editing suggestions, and version management functionality.\n\n### Structure\nThe `ui5-ai-textarea` consists of the following elements:\n- TextArea: The main text input area with all standard textarea functionality\n- AI Toolbar: Specialized toolbar with AI generation controls\n- Version Navigation: Controls for navigating between AI-generated versions\n- Menu Integration: Support for AI action menu\n\nSingle vs multiple result display is determined internally based on totalVersions count.\n\n### ES6 Module Import\n\n`import \"@sap-webcomponents/ai/dist/TextArea.js\";`\n---\n\n\n### **Events:**\n - **version-change** - Fired when the user clicks on version navigation buttons.\n- **stop-generation** - Fired when the user requests to stop AI text generation.\n\n### **Slots:**\n - **menu** - Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "loading",
+              "description": "Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "action-text",
+              "description": "Defines the action text of the AI Writing Assistant.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "current-version-index",
+              "description": "Indicates the index of the currently displayed result version.\n\nThe index is **1-based** (i.e. `1` represents the first result).",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "total-versions",
+              "description": "Indicates the total number of result versions available.",
+              "value": { "type": "number", "default": "1" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "menu",
+              "description": "Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant."
+            }
+          ],
+          "events": [
+            {
+              "name": "version-change",
+              "description": "Fired when the user clicks on version navigation buttons."
+            },
+            {
+              "name": "stop-generation",
+              "description": "Fired when the user requests to stop AI text generation."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "loading",
+                "description": "Defines whether the `ui5-ai-textarea` is currently in a loading(processing) state.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "action-text",
+                "description": "Defines the action text of the AI Writing Assistant.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "current-version-index",
+                "description": "Indicates the index of the currently displayed result version.\n\nThe index is **1-based** (i.e. `1` represents the first result).",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "total-versions",
+                "description": "Indicates the total number of result versions available.",
+                "value": { "type": "number" }
+              }
+            ],
+            "events": [
+              {
+                "name": "version-change",
+                "description": "Fired when the user clicks on version navigation buttons."
+              },
+              {
+                "name": "stop-generation",
+                "description": "Fired when the user requests to stop AI text generation."
+              }
+            ]
+          }
         }
       ]
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-ai",
-  "version": "2.15.0",
+  "version": "2.16.0-rc.0",
   "description": "UI5 Web Components: webcomponents.ai",
   "ui5": {
     "webComponentsPackage": true
@@ -46,19 +46,19 @@
     "directory": "packages/ai"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.15.0",
-    "@ui5/webcomponents-base": "2.15.0",
-    "@ui5/webcomponents-icons": "2.15.0",
-    "@ui5/webcomponents-theming": "2.15.0"
+    "@ui5/webcomponents": "2.16.0-rc.0",
+    "@ui5/webcomponents-base": "2.16.0-rc.0",
+    "@ui5/webcomponents-icons": "2.16.0-rc.0",
+    "@ui5/webcomponents-theming": "2.16.0-rc.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "patch:@custom-elements-manifest/analyzer@npm%3A0.10.6#~/.yarn/patches/@custom-elements-manifest-analyzer-npm-0.10.6-9b5ff0c50b.patch",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.15.0",
+    "@ui5/webcomponents-tools": "2.16.0-rc.0",
     "chokidar-cli": "^3.0.0",
     "cypress": "^15.3.0",
     "eslint": "^7.22.0",
     "vite": "5.4.8"
   },
-  "gitHead": "5c40df56e6b1b834e277adee102d0e299a5c772c"
+  "gitHead": "07b91ccebabfc50f7ae3112c66255423c2dde07d"
 }

package/src/TextArea.css

@@ -0,0 +1,45 @@
+.ui5-ai-textarea-root {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-ai-textarea-root .ui5-textarea-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	position: relative;
+}
+
+.ui5-ai-textarea-root [part="footer"] {
+	position: relative;
+	width: 100%;
+	margin-top: auto;
+	flex-shrink: 0;
+}
+
+.ui5-ai-writing-assistant-footer-bar {
+	background: var(--_ui5_texteditor_toolbar_background, var(--sapPageFooter_Background));
+	width: 100%;
+	box-sizing: border-box;
+	box-shadow: none;
+	border-bottom: none;
+	border-top: none;
+}
+
+.ui5-ai-writing-assistant-footer-bar--with-border {
+	border-top: 1px solid var(--sapPageFooter_BorderColor);
+}
+
+.ui5-ai-writing-assistant-action-label {
+	margin-left: 0.5rem;
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSmallSize);
+}
+
+#ai-menu-wrapper {
+	position: relative;
+	z-index: 1000;
+}

package/src/TextAreaTemplate.tsx

@@ -0,0 +1,90 @@
+import type AITextArea from "./TextArea.js";
+import WritingAssistant from "./WritingAssistant.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import TextAreaPopoverTemplate from "@ui5/webcomponents/dist/TextAreaPopoverTemplate.js";
+
+export default function TextAreaTemplate(this: AITextArea) {
+	return (
+		<div class="ui5-ai-textarea-root">
+			<div
+				class={this.classes.root}
+				onFocusIn={this._onfocusin}
+				onFocusOut={this._onfocusout}
+			>
+				<div class="ui5-textarea-wrapper">
+					{this.growing &&
+					<div id={`${this._id}-mirror`} class="ui5-textarea-mirror" aria-hidden="true">
+						{this._mirrorText.map(mirrorText => {
+							return (
+								<>
+									{mirrorText.text}
+									<br />
+								</>
+							);
+						})}
+					</div>
+					}
+					<BusyIndicator
+						id={`${this._id}-busyIndicator`}
+						active={this.loading}
+						class="ui5-textarea-busy-indicator"
+					>
+						<textarea
+							id={`${this._id}-inner`}
+							class="ui5-textarea-inner"
+							part="textarea"
+							placeholder={this.placeholder}
+							disabled={this.disabled}
+							readonly={this.readonly}
+							aria-label={this._ariaLabel}
+							aria-describedby={this.ariaDescribedBy}
+							aria-invalid={this._ariaInvalid}
+							aria-required={this.required}
+							maxlength={this._exceededTextProps.calcedMaxLength}
+							value={this.value}
+							data-sap-focus-ref
+							onInput={this._oninput}
+							onChange={this._onchange}
+							onKeyUp={this._onkeyup}
+							onKeyDown={this._onkeydown}
+							onSelect={this._onselect}
+							onScroll={this._onscroll}>
+						</textarea>
+					</BusyIndicator>
+					<div part="footer">
+						<slot name="footer">
+							<WritingAssistant
+								loading={this.loading}
+								currentVersionIndex={this.currentVersionIndex}
+								totalVersions={this.totalVersions}
+								actionText={this.actionText}
+								onButtonClick={this._handleAIButtonClick}
+								onStopGeneration={this.handleStopGeneration}
+								onVersionChange={this._handleVersionChange}
+							/>
+						</slot>
+					</div>
+				</div>
+
+				{this.showExceededText &&
+				<span class="ui5-textarea-exceeded-text">{this._exceededTextProps.exceededText}</span>
+				}
+
+				{this.hasValueState &&
+				<span id={`${this._id}-valueStateDesc`} class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+				}
+			</div>
+
+			{TextAreaPopoverTemplate.call(this)}
+
+			{/* ARIA live region for screen readers */}
+			<div aria-live="polite" aria-atomic="true" class="ui5-hidden-text">
+				{this.loading ? this.actionText : ""}
+			</div>
+
+			<div id="ai-menu-wrapper">
+				<slot name="menu"></slot>
+			</div>
+		</div>
+	);
+}

package/src/ToolbarLabelTemplate.tsx

@@ -0,0 +1,9 @@
+import type ToolbarLabel from "./ToolbarLabel.js";
+
+export default function ToolbarLabelTemplate(this: ToolbarLabel) {
+	return (
+		<span class="ui5-ai-toolbar-label">
+			{this.text}
+		</span>
+	);
+}

package/src/VersioningTemplate.tsx

@@ -0,0 +1,34 @@
+import type Versioning from "./Versioning.js";
+import ToolbarLabel from "./ToolbarLabel.js";
+import ToolbarButton from "@ui5/webcomponents/dist/ToolbarButton.js";
+import "@ui5/webcomponents-icons/dist/navigation-left-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+
+export default function VersioningTemplate(this: Versioning) {
+	return (
+		<>
+			<ToolbarButton
+				design="Transparent"
+				icon="navigation-left-arrow"
+				tooltip={this._previousButtonTooltip}
+				accessibleName={this._previousButtonAccessibleName}
+				disabled={this.currentStep <= 1}
+				onClick={this.handlePreviousVersionClick}
+				data-ui5-versioning-button="previous"
+			/>
+			<ToolbarLabel
+				text={`${this.currentStep} / ${this.totalSteps}`}
+				class="version-step-counter"
+			/>
+			<ToolbarButton
+				design="Transparent"
+				icon="navigation-right-arrow"
+				tooltip={this._nextButtonTooltip}
+				accessibleName={this._nextButtonAccessibleName}
+				disabled={this.totalSteps <= 0 || this.currentStep >= this.totalSteps}
+				onClick={this.handleNextVersionClick}
+				data-ui5-versioning-button="next"
+			/>
+		</>
+	);
+}

package/src/WritingAssistantTemplate.tsx

@@ -0,0 +1,49 @@
+import type WritingAssistant from "./WritingAssistant.js";
+import Versioning from "./Versioning.js";
+import ToolbarLabel from "./ToolbarLabel.js";
+
+import Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
+import ToolbarSpacer from "@ui5/webcomponents/dist/ToolbarSpacer.js";
+import ToolbarButton from "@ui5/webcomponents/dist/ToolbarButton.js";
+
+export default function WritingAssistantTemplate(this: WritingAssistant) {
+	const isMultiResults = this.totalVersions > 1;
+	const hasResults = (this.totalVersions > 0 && this.actionText) || this.loading;
+
+	return (
+		<Toolbar
+			accessibleName={this._toolbarAccessibleName}
+			aria-roledescription="toolbar"
+			class={`ui5-ai-writing-assistant-footer-bar${hasResults ? "--with-border" : ""}`}
+		>
+			{isMultiResults && !this.loading && (
+				<Versioning
+					currentStep={this.currentVersionIndex}
+					totalSteps={this.totalVersions}
+					onVersion-change={this.handleVersionChange}
+				/>
+			)}
+
+			{hasResults && this.actionText && (
+				<ToolbarLabel
+					text={this.actionText}
+					class="ui5-ai-writing-assistant-action-label"
+				/>
+			)}
+
+			<ToolbarSpacer />
+
+			<ToolbarButton
+				id="ai-menu-btn"
+				design="Transparent"
+				icon={this.loading ? "stop" : "ai"}
+				data-state={this.loading ? "generating" : "generate"}
+				onClick={this.handleButtonClick}
+				tooltip={this._buttonTooltip}
+				accessibilityAttributes={{ hasPopup: this.loading ? "false" : "menu" }}
+				accessibleName={this._buttonAccessibleName}
+				overflowPriority="NeverOverflow"
+			/>
+		</Toolbar>
+	);
+}

package/src/i18n/messagebundle.properties

@@ -10,3 +10,29 @@ PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit
 #XTXT: Text for
 BUTTON_TOOLTIP_TEXT={0} with Artificial Intelligence
 
+#XFLD: Text for the aria-label attribute of the Writing Assistant toolbar
+WRITING_ASSISTANT_LABEL=AI Writing Assistant Toolbar Shift + F4
+
+#XFLD: Previous version button accessible name
+VERSIONING_PREVIOUS_BUTTON_TEXT=Previous Version
+
+#XFLD: Next version button accessible name
+VERSIONING_NEXT_BUTTON_TEXT=Next Version
+
+#XMSG: Announcement message when AI writing assistant starts generating
+WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT=Stop generating (ESC)
+
+#XFLD: Accessible name for the AI Writing Assistant toolbar
+WRITING_ASSISTANT_TOOLBAR_ACCESSIBLE_NAME=AI Writing Assistant Toolbar
+
+#XFLD: Accessible name for the AI Writing Assistant button
+WRITING_ASSISTANT_BUTTON_ACCESSIBLE_NAME=AI Writing Assistant
+
+#XFLD: Tooltip for the AI Writing Assistant button
+WRITING_ASSISTANT_BUTTON_TOOLTIP=AI Writing Assistant (Shift + F4)
+
+#XFLD: Tooltip for the Previous Version button
+VERSIONING_PREVIOUS_BUTTON_TOOLTIP=Previous Version
+
+#XFLD: Tooltip for the Next Version button
+VERSIONING_NEXT_BUTTON_TOOLTIP=Next Version

package/src/i18n/messagebundle_en.properties

@@ -5,3 +5,4 @@ PROMPT_INPUT_CHARACTERS_EXCEEDED={0} characters over limit
 
 BUTTON_TOOLTIP_TEXT={0} with Artificial Intelligence
 
+WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT=AI writing assistant generating. Stop generating (ESC)

package/src/themes/AITextArea.css

@@ -0,0 +1,45 @@
+.ui5-ai-textarea-root {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-ai-textarea-root .ui5-textarea-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	position: relative;
+}
+
+.ui5-ai-textarea-root [part="footer"] {
+	position: relative;
+	width: 100%;
+	margin-top: auto;
+	flex-shrink: 0;
+}
+
+.ui5-ai-writing-assistant-footer-bar {
+	background: var(--_ui5_texteditor_toolbar_background, var(--sapPageFooter_Background));
+	width: 100%;
+	box-sizing: border-box;
+	box-shadow: none;
+	border-bottom: none;
+	border-top: none;
+}
+
+.ui5-ai-writing-assistant-footer-bar--with-border {
+	border-top: 1px solid var(--sapPageFooter_BorderColor);
+}
+
+.ui5-ai-writing-assistant-action-label {
+	margin-left: 0.5rem;
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSmallSize);
+}
+
+#ai-menu-wrapper {
+	position: relative;
+	z-index: 1000;
+}

package/src/themes/Versioning.css

@@ -0,0 +1,20 @@
+:host {
+	display: inline-flex;
+	align-items: center;
+}
+
+#versioning-history {
+	display: flex;
+	align-items: center;
+	gap: 0;
+}
+
+.version-step-counter {
+	margin: 0 0.25rem;
+	display: flex;
+	align-items: center;
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSmallSize);
+	line-height: 1;
+}
+

package/src/themes/WritingAssistant.css

@@ -0,0 +1,45 @@
+.ui5-ai-textarea-root {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+}
+
+.ui5-ai-textarea-root .ui5-textarea-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	position: relative;
+}
+
+.ui5-ai-textarea-root [part="footer"] {
+	width: 100%;
+	margin-top: auto;
+	flex-shrink: 0;
+}
+
+.ui5-ai-writing-assistant-footer-bar {
+	background: var(--_ui5_texteditor_toolbar_background, var(--sapPageFooter_Background));
+	width: 100%;
+	box-sizing: border-box;
+	box-shadow: none;
+	border-bottom: none;
+	border-top: none;
+	padding: 0.5rem;
+	min-height: 2.75rem;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+}
+
+.ui5-ai-writing-assistant-footer-bar--with-border {
+	border-top: 1px solid var(--sapPageFooter_BorderColor);
+}
+
+.ui5-ai-writing-assistant-action-label {
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSize);
+	font-family: "72override", var(--sapFontFamily);
+	margin-left: 0.25rem;
+}