Skip to content

Commit 0b1f2fb

Browse files
Lukas742Lukas742
committed
run wrapper script (ai), add new components + input story
1 parent 7c26314 commit 0b1f2fb

File tree

6 files changed

+266
-0
lines changed

6 files changed

+266
-0
lines changed

‎packages/ai/package.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,14 @@
2626
"./PromptInput": {
2727
"types": "./dist/components/PromptInput/index.d.ts",
2828
"default": "./dist/components/PromptInput/index.js"
29+
},
30+
"./Input": {
31+
"types": "./dist/components/Input/index.d.ts",
32+
"default": "./dist/components/Input/index.js"
33+
},
34+
"./TextArea": {
35+
"types": "./dist/components/TextArea/index.d.ts",
36+
"default": "./dist/components/TextArea/index.js"
2937
}
3038
},
3139
"homepage": "https://ui5.github.io/webcomponents-react",

‎packages/ai/src/components/Input/Input.mdx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
2+
import { Canvas, Meta } from '@storybook/addon-docs/blocks';
3+
import * as ComponentStories from './Input.stories.tsx';
4+
5+
<Meta of={ComponentStories} />
6+
7+
<DocsHeader of={ComponentStories} experimental />
8+
9+
<br />
10+
11+
## Example
12+
13+
<Canvas of={ComponentStories.Default} />
14+
15+
## Properties
16+
17+
<ControlsWithNote of={ComponentStories.Default} />
18+
19+
<Footer />

‎packages/ai/src/components/Input/Input.stories.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import '@ui5/webcomponents-ai/dist/Input.js';
2+
import '@ui5/webcomponents/dist/MenuItem.js';
3+
import type { Meta, StoryObj } from '@storybook/react-vite';
4+
import { MenuItem } from '@ui5/webcomponents-react';
5+
import { useRef, useState } from 'react';
6+
import { Input } from './index.js';
7+
8+
const meta = {
9+
title: 'Input',
10+
component: Input,
11+
argTypes: {
12+
actions: { control: { disable: true } },
13+
},
14+
tags: ['package:@ui5/webcomponents-ai', 'experimental'],
15+
} satisfies Meta<typeof Input>;
16+
17+
export default meta;
18+
type Story = StoryObj<typeof meta>;
19+
20+
export const Default: Story = {};

‎packages/ai/src/components/Input/index.tsx‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
'use client';
2+
3+
import '@ui5/webcomponents-ai/dist/Input.js';
4+
import { withWebComponent } from '@ui5/webcomponents-react-base';
5+
import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
6+
7+
interface InputAttributes {
8+
/**
9+
* Indicates the index of the currently displayed version.
10+
* @default 0
11+
*/
12+
currentVersion?: number;
13+
14+
/**
15+
* Defines whether the AI Writing Assistant is currently loading.
16+
*
17+
* When `true`, indicates that an AI action is in progress.
18+
* @default false
19+
*/
20+
loading?: boolean;
21+
22+
/**
23+
* Indicates the total number of result versions available.
24+
*
25+
* When not set or set to 0, the versioning will be hidden.
26+
* @default 0
27+
*/
28+
totalVersions?: number;
29+
}
30+
31+
interface InputDomRef extends Required<InputAttributes>, Ui5DomRef {}
32+
33+
interface InputPropTypes
34+
extends InputAttributes,
35+
Omit<CommonProps, keyof InputAttributes | 'actions' | 'onButtonClick' | 'onStopGeneration' | 'onVersionChange'> {
36+
/**
37+
* Defines the items of the menu for the component.
38+
*
39+
* __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="actions"`).
40+
* Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
41+
*
42+
* __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
43+
* Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
44+
*
45+
* __Supported Node Type/s:__ `Array<HTMLElement>`
46+
*/
47+
actions?: UI5WCSlotsNode;
48+
/**
49+
* Fired when the user selects the AI button.
50+
*
51+
* **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
52+
*
53+
* | cancelable | bubbles |
54+
* | :--------: | :-----: |
55+
* | ✅|❌|
56+
*/
57+
onButtonClick?: (event: Ui5CustomEvent<InputDomRef>) => void;
58+
59+
/**
60+
* Fired when the user selects the "Stop" button to stop ongoing AI text generation.
61+
*
62+
* | cancelable | bubbles |
63+
* | :--------: | :-----: |
64+
* | ❌|❌|
65+
*/
66+
onStopGeneration?: (event: Ui5CustomEvent<InputDomRef>) => void;
67+
68+
/**
69+
* Fired when the user selects the version navigation buttons.
70+
*
71+
* | cancelable | bubbles |
72+
* | :--------: | :-----: |
73+
* | ❌|❌|
74+
*/
75+
onVersionChange?: (event: Ui5CustomEvent<InputDomRef>) => void;
76+
}
77+
78+
/**
79+
* The `Input` component extends the standard `ui5-input` with **AI Writing Assistant** capabilities.
80+
*
81+
* ### Structure
82+
*
83+
* The `Input` consists of the following main parts:
84+
*
85+
* - **Input Field** – Inherits all standard Input behaviors.
86+
* - **AI Action Button** – Appears when focused or loading, providing access to AI-related actions or stopping generation.
87+
*
88+
* The component automatically determines which elements to render based on its internal state:
89+
* - The AI Button is only shown when there are available `actions`.
90+
* - The version navigation appears only when `totalVersions > 1`.
91+
*
92+
* ### Keyboard Support
93+
*
94+
* - **Shift + F4** — Opens the AI menu.
95+
* - **Ctrl + Shift + Z / Y** — Navigates backward/forward between AI-generated versions.
96+
*
97+
*
98+
*
99+
* __Note:__ This is a UI5 Web Component! [Input UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/Input) | [Repository](https://github.com/UI5/webcomponents)
100+
*
101+
* @since [2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of __@ui5/webcomponents-ai__.
102+
* @experimental The **@ui5/webcomponents-ai** package is under active development and considered experimental. Component APIs are subject to change.
103+
*/
104+
const Input = withWebComponent<InputPropTypes, InputDomRef>(
105+
'ui5-ai-input',
106+
['currentVersion', 'totalVersions'],
107+
['loading'],
108+
['actions'],
109+
['button-click', 'stop-generation', 'version-change'],
110+
);
111+
112+
Input.displayName = 'Input';
113+
114+
export { Input };
115+
export type { InputDomRef, InputPropTypes };

‎packages/ai/src/components/TextArea/index.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
'use client';
2+
3+
import '@ui5/webcomponents-ai/dist/TextArea.js';
4+
import { withWebComponent } from '@ui5/webcomponents-react-base';
5+
import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
6+
7+
interface TextAreaAttributes {
8+
/**
9+
* Indicates the index of the currently displayed version.
10+
* @default 0
11+
*/
12+
currentVersion?: number;
13+
14+
/**
15+
* Defines whether the `TextArea` is currently in a loading(processing) state.
16+
* @default false
17+
*/
18+
loading?: boolean;
19+
20+
/**
21+
* Defines the prompt description of the current action.
22+
*/
23+
promptDescription?: string;
24+
25+
/**
26+
* Indicates the total number of result versions available.
27+
*
28+
* Notes:
29+
* Versioning is hidden if the value is `0`
30+
* @default 0
31+
*/
32+
totalVersions?: number;
33+
}
34+
35+
interface TextAreaDomRef extends Required<TextAreaAttributes>, Ui5DomRef {}
36+
37+
interface TextAreaPropTypes
38+
extends TextAreaAttributes,
39+
Omit<CommonProps, keyof TextAreaAttributes | 'menu' | 'onStopGeneration' | 'onVersionChange'> {
40+
/**
41+
* Defines a slot for `ui5-menu` integration. This slot allows you to pass a `ui5-menu` instance that will be associated with the assistant.
42+
*
43+
* __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="menu"`).
44+
* Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
45+
*
46+
* __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
47+
* Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
48+
*
49+
* __Supported Node Type/s:__ `HTMLElement`
50+
*/
51+
menu?: UI5WCSlotsNode;
52+
/**
53+
* Fired when the user requests to stop AI text generation.
54+
*
55+
* | cancelable | bubbles |
56+
* | :--------: | :-----: |
57+
* | ❌|❌|
58+
*/
59+
onStopGeneration?: (event: Ui5CustomEvent<TextAreaDomRef>) => void;
60+
61+
/**
62+
* Fired when the user clicks on version navigation buttons.
63+
*
64+
* | cancelable | bubbles |
65+
* | :--------: | :-----: |
66+
* | ❌|❌|
67+
*/
68+
onVersionChange?: (event: Ui5CustomEvent<TextAreaDomRef>) => void;
69+
}
70+
71+
/**
72+
* The `TextArea` component extends the standard TextArea with Writing Assistant capabilities.
73+
* It provides AI-powered text generation, editing suggestions, and version management functionality.
74+
*
75+
* ### Structure
76+
* The `TextArea` consists of the following elements:
77+
* - TextArea: The main text input area with all standard textarea functionality
78+
* - WritingAssistant: Dedicated toolbar containing:
79+
* - Versioning: A component with left/right navigation buttons and a label for browsing AI-generated versions
80+
* - AI Button: Opens a menu that can be extended with custom AI generation options through slotting
81+
*
82+
*
83+
*
84+
* __Note:__ This is a UI5 Web Component! [TextArea UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/ai/TextArea) | [Repository](https://github.com/UI5/webcomponents)
85+
*
86+
* @since [2.16.0](https://github.com/UI5/webcomponents/releases/tag/v2.16.0) of __@ui5/webcomponents-ai__.
87+
* @experimental The **@ui5/webcomponents-ai** package is under development and considered experimental - components' APIs are subject to change.
88+
*/
89+
const TextArea = withWebComponent<TextAreaPropTypes, TextAreaDomRef>(
90+
'ui5-ai-textarea',
91+
['currentVersion', 'promptDescription', 'totalVersions'],
92+
['loading'],
93+
['menu'],
94+
['stop-generation', 'version-change'],
95+
);
96+
97+
TextArea.displayName = 'TextArea';
98+
99+
export { TextArea };
100+
export type { TextAreaDomRef, TextAreaPropTypes };

‎packages/ai/src/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
export { Button } from './components/Button/index.js';
22
export { ButtonState } from './components/ButtonState/index.js';
3+
export { Input } from './components/Input/index.js';
34
export { PromptInput } from './components/PromptInput/index.js';
5+
export { TextArea } from './components/TextArea/index.js';
46

57
export type { ButtonDomRef, ButtonPropTypes } from './components/Button/index.js';
68
export type { ButtonStateDomRef, ButtonStatePropTypes } from './components/ButtonState/index.js';
9+
export type { InputDomRef, InputPropTypes } from './components/Input/index.js';
710
export type { PromptInputDomRef, PromptInputPropTypes } from './components/PromptInput/index.js';
11+
export type { TextAreaDomRef, TextAreaPropTypes } from './components/TextArea/index.js';

0 commit comments

Comments
 (0)