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

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/PromptInput.css

@@ -1,3 +1,7 @@
+:host(:not([hidden])) {
+    display: inline-block;
+}
+
 .ai-prompt-input-button {
 	margin-left: .5rem;
 	margin-top: 3px;
@@ -6,7 +10,7 @@
 .ai-prompt-input-wrapper {
 	display: flex;
 	flex-direction: column;
-	width: 270px;
+	min-width: 270px;
 }
 
 .ai-prompt-input-form-wrapper {

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;
+}