@ui5/webcomponents-ai 0.0.0-b804b8982 → 0.0.0-c143e338b

package/src/i18n/messagebundle_vi.properties

@@ -2,3 +2,23 @@
 PROMPT_INPUT_CHARACTERS_LEFT=còn lại {0} ký tự
 
 PROMPT_INPUT_CHARACTERS_EXCEEDED={0} ký tự quá giới hạn
+
+BUTTON_TOOLTIP_TEXT={0} có Trí tuệ nhân tạo
+
+WRITING_ASSISTANT_LABEL=Thanh công cụ trợ lý soạn thảo Shift + F4
+
+VERSIONING_PREVIOUS_BUTTON_TEXT=Phiên bản trước
+
+VERSIONING_NEXT_BUTTON_TEXT=Phiên bản tiếp theo
+
+WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT=Dừng tạo (ESC)
+
+WRITING_ASSISTANT_TOOLBAR_ACCESSIBLE_NAME=Thanh công cụ trợ lý soạn thảo
+
+WRITING_ASSISTANT_BUTTON_ACCESSIBLE_NAME=Trợ lý soạn thảo
+
+WRITING_ASSISTANT_BUTTON_TOOLTIP=Trợ lý soạn thảo (Shift + F4)
+
+VERSIONING_PREVIOUS_BUTTON_TOOLTIP=Phiên bản trước
+
+VERSIONING_NEXT_BUTTON_TOOLTIP=Phiên bản tiếp theo

package/src/i18n/messagebundle_zh_CN.properties

@@ -2,3 +2,23 @@
 PROMPT_INPUT_CHARACTERS_LEFT=剩余 {0} 个字符
 
 PROMPT_INPUT_CHARACTERS_EXCEEDED=超过限制 {0} 个字符
+
+BUTTON_TOOLTIP_TEXT={0} 具有人工智能
+
+WRITING_ASSISTANT_LABEL=写作助手工具栏 Shift + F4
+
+VERSIONING_PREVIOUS_BUTTON_TEXT=上一版本
+
+VERSIONING_NEXT_BUTTON_TEXT=下一版本
+
+WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT=停止生成 (ESC)
+
+WRITING_ASSISTANT_TOOLBAR_ACCESSIBLE_NAME=写作助手工具栏
+
+WRITING_ASSISTANT_BUTTON_ACCESSIBLE_NAME=写作助手
+
+WRITING_ASSISTANT_BUTTON_TOOLTIP=写作助手 (Shift + F4)
+
+VERSIONING_PREVIOUS_BUTTON_TOOLTIP=上一版本
+
+VERSIONING_NEXT_BUTTON_TOOLTIP=下一版本

package/src/i18n/messagebundle_zh_TW.properties

@@ -2,3 +2,23 @@
 PROMPT_INPUT_CHARACTERS_LEFT=剩下 {0} 個字元
 
 PROMPT_INPUT_CHARACTERS_EXCEEDED=超過 {0} 個字元
+
+BUTTON_TOOLTIP_TEXT={0} 搭配人工智慧
+
+WRITING_ASSISTANT_LABEL=書寫助手工具列 Shift + F4
+
+VERSIONING_PREVIOUS_BUTTON_TEXT=上一個版本
+
+VERSIONING_NEXT_BUTTON_TEXT=下一個版本
+
+WRITING_ASSISTANT_GENERATING_ANNOUNCEMENT=停止產生 (ESC)
+
+WRITING_ASSISTANT_TOOLBAR_ACCESSIBLE_NAME=書寫助手工具列
+
+WRITING_ASSISTANT_BUTTON_ACCESSIBLE_NAME=書寫助手
+
+WRITING_ASSISTANT_BUTTON_TOOLTIP=書寫助手 (Shift + F4)
+
+VERSIONING_PREVIOUS_BUTTON_TOOLTIP=上一個版本
+
+VERSIONING_NEXT_BUTTON_TOOLTIP=下一個版本

package/src/themes/Input.css

@@ -0,0 +1,83 @@
+/* root*/
+.ui5-ai-input-root {
+	width: 100%;
+	height: 100%;
+	border-right: none;
+}
+
+:host([focused]:not([opened])[_is-menu-open]) .ui5-ai-input-root:hover {
+	border-radius: var(--_ui5_input_border_radius);
+	box-shadow: var(--sapField_Hover_Shadow);
+}
+
+:host([focused]:not([opened])[_is-menu-open]) .ui5-input-focusable-element::after {
+	border: var(--_ui5-input-border);
+}
+
+.ui5-input-busy-indicator {
+	flex: 1;
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-sizing: border-box;
+	display: block;
+}
+
+.ui5-ai-input-busy .ui5-ai-input-button-wrapper {
+	background-color: inherit;
+	border: none;
+}
+
+.ui5-ai-input-button-wrapper {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: var(--_ui5_input_icon_width);
+	min-width: var(--_ui5_input_icon_width);
+	height: var(--_ui5_input_icon_wrapper_height);
+	padding: 0;
+	box-sizing: border-box;
+	border-radius: var(--_ui5_input_border_radius);
+	cursor: pointer;
+	border: none;
+}
+
+/* Hidden state */
+.ui5-input-ai-button[hidden] {
+	display: none;
+}
+
+/* Active / Open / Loading states */
+.ui5-ai-input-button-wrapper.ui5-input-button-menu-open,
+.ui5-ai-input-button-wrapper:active {
+	background-color: var(--sapButton_Selected_Background);
+	box-shadow: var(--sapField_Hover_Shadow);
+	color: var(--sapButton_Selected_TextColor);
+}
+
+/* Hover state */
+.ui5-ai-input-button-wrapper:not(.ui5-input-button-menu-open):not(.ui5-ai-input-loading):not(:active):hover,
+.ui5-ai-input-button-wrapper.ui5-ai-input-loading:hover {
+	background-color: var(--sapButton_Hover_Background);
+	border: 1px solid var(--sapButton_Hover_BorderColor);
+	box-shadow: inset 0 0 0 0.0625rem var(--sapContent_Neutral_Shadow);
+}
+
+/* menu & versioning */
+
+.ui5-input-button-menu-open {
+	background-color: var(--sapButton_Selected_Background);
+	box-shadow: var(--sapField_Hover_Shadow);
+}
+
+[ui5-menu-item].ui5-ai-versioning-menu-footer:hover {
+	background-color: inherit;
+}
+
+.ui5-ai-versioning-menu-footer::part(native-li) {
+  padding-right: 0.25rem;
+}
+
+#ai-menu-btn {
+  --_ui5_button_focused_border: none;
+}

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

package/tsconfig.json

@@ -17,6 +17,9 @@
 			"@ui5/webcomponents-base/dist/*": [
 				"../base/src/*"
 			],
+			"@ui5/webcomponents/dist/*": [
+				"../main/src/*"
+			],
 			"@ui5/webcomponents-localization/dist/*": [
 				"../localization/src/*"
 			],
@@ -38,6 +41,9 @@
 		{
 			"path": "../base"
 		},
+		{
+			"path": "../main"
+		},
 		{
 			"path": "../localization"
 		},

package/cypress/specs/Button.cy.tsx

@@ -1,14 +0,0 @@
-import Button from "../../src/Button.js";
-import ButtonState from "../../src/ButtonState.js";
-
-describe("Initial rendering", () => {
-	it("tests no config provided", () => {
-		cy.mount(
-			<Button>
-				<ButtonState name="generate" text="Generate" icon="ai">Click me</ButtonState>
-				<ButtonState name="generating" text="Stop Generating" icon="stop">Click me</ButtonState>
-				<ButtonState name="revise" text="Revise" icon="ai">Click me</ButtonState>
-			</Button>
-		);
-	});
-});

package/cypress/support/commands.ts

@@ -1,40 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
-
-import "@ui5/cypress-internal/commands.js";
-import "../../../main/cypress/support/commands.js";

package/cypress/support/component-index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>

package/cypress/support/component.ts

@@ -1,36 +0,0 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-import { mount } from '@ui5/cypress-ct-ui5-webc'
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount
-    }
-  }
-}
-
-Cypress.Commands.add('mount', mount)
-
-// Example use:
-// cy.mount(MyComponent)

package/cypress/tsconfig.json

@@ -1,43 +0,0 @@
-{
-	"extends": "@ui5/webcomponents-tools/tsconfig.json",
-	"include": [
-		"./**/*"
-	],
-	"compilerOptions": {
-		"composite": true,
-		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
-		"module": "NodeNext",
-		"moduleResolution": "nodenext",
-		"paths": {
-			"@ui5/webcomponents-base/dist/*": [
-				"../../base/src/*"
-			],
-			"@ui5/webcomponents/dist/*": [
-				"../../main/src/*"
-			],
-			"@ui5/webcomponents-localization/dist/*": [
-				"../../localization/src/*"
-			],
-			"@ui5/webcomponents-theming/dist/*": [
-				"../../theming/src/*"
-			],
-			"@ui5/webcomponents-icons/dist/*": [
-				"../../icons/src/*"
-			],
-			"@ui5/webcomponents-icons-business-suite/dist/*": [
-				"../../icons-business-suite/src/*"
-			],
-			"@ui5/webcomponents-icons-tnt/dist/*": [
-				"../../icons-tnt/src/*"
-			]
-		},
-	},
-	"references": [
-		{
-			"path": "../"
-		},
-		{
-			"path": "../../main/cypress"
-		}
-	]
-}