@patternfly/chatbot 2.2.0-prerelease.4 → 2.2.0-prerelease.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +17 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js +14 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.d.ts +2 -0
- package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js +2 -2
- package/dist/cjs/ChatbotHeader/index.d.ts +1 -0
- package/dist/cjs/ChatbotHeader/index.js +1 -0
- package/dist/cjs/ResponseActions/ResponseActionButton.d.ts +6 -0
- package/dist/cjs/ResponseActions/ResponseActionButton.js +10 -2
- package/dist/cjs/ResponseActions/ResponseActionButton.test.d.ts +1 -0
- package/dist/cjs/ResponseActions/ResponseActionButton.test.js +54 -0
- package/dist/cjs/ResponseActions/ResponseActions.d.ts +4 -0
- package/dist/cjs/ResponseActions/ResponseActions.js +26 -9
- package/dist/cjs/ResponseActions/ResponseActions.test.js +79 -5
- package/dist/cjs/Settings/SettingsForm.d.ts +13 -0
- package/dist/cjs/Settings/SettingsForm.js +27 -0
- package/dist/cjs/Settings/index.d.ts +2 -0
- package/dist/cjs/Settings/index.js +23 -0
- package/dist/cjs/index.d.ts +2 -0
- package/dist/cjs/index.js +4 -1
- package/dist/css/main.css +46 -4
- package/dist/css/main.css.map +1 -1
- package/dist/dynamic/Settings/package.json +1 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +17 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js +8 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.d.ts +2 -0
- package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js +2 -2
- package/dist/esm/ChatbotHeader/index.d.ts +1 -0
- package/dist/esm/ChatbotHeader/index.js +1 -0
- package/dist/esm/ResponseActions/ResponseActionButton.d.ts +6 -0
- package/dist/esm/ResponseActions/ResponseActionButton.js +10 -2
- package/dist/esm/ResponseActions/ResponseActionButton.test.d.ts +1 -0
- package/dist/esm/ResponseActions/ResponseActionButton.test.js +49 -0
- package/dist/esm/ResponseActions/ResponseActions.d.ts +4 -0
- package/dist/esm/ResponseActions/ResponseActions.js +26 -9
- package/dist/esm/ResponseActions/ResponseActions.test.js +79 -5
- package/dist/esm/Settings/SettingsForm.d.ts +13 -0
- package/dist/esm/Settings/SettingsForm.js +20 -0
- package/dist/esm/Settings/index.d.ts +2 -0
- package/dist/esm/Settings/index.js +2 -0
- package/dist/esm/index.d.ts +2 -0
- package/dist/esm/index.js +2 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx +4 -0
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +13 -2
- package/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx +289 -0
- package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +14 -0
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +2 -2
- package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx +51 -0
- package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +5 -2
- package/src/ChatbotHeader/index.ts +1 -0
- package/src/ResponseActions/ResponseActionButton.test.tsx +52 -0
- package/src/ResponseActions/ResponseActionButton.tsx +46 -27
- package/src/ResponseActions/ResponseActions.scss +10 -8
- package/src/ResponseActions/ResponseActions.test.tsx +103 -5
- package/src/ResponseActions/ResponseActions.tsx +54 -7
- package/src/Settings/Settings.scss +34 -0
- package/src/Settings/SettingsForm.tsx +25 -0
- package/src/Settings/index.ts +3 -0
- package/src/index.ts +3 -0
- package/src/main.scss +1 -0
@@ -0,0 +1,289 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
|
3
|
+
import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
|
4
|
+
import {
|
5
|
+
Button,
|
6
|
+
Divider,
|
7
|
+
Dropdown,
|
8
|
+
DropdownGroup,
|
9
|
+
DropdownItem,
|
10
|
+
DropdownList,
|
11
|
+
MenuToggle,
|
12
|
+
MenuToggleElement,
|
13
|
+
Switch,
|
14
|
+
Title
|
15
|
+
} from '@patternfly/react-core';
|
16
|
+
import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
|
17
|
+
import ChatbotHeader, {
|
18
|
+
ChatbotHeaderActions,
|
19
|
+
ChatbotHeaderCloseButton,
|
20
|
+
ChatbotHeaderMain,
|
21
|
+
ChatbotHeaderOptionsDropdown,
|
22
|
+
ChatbotHeaderTitle
|
23
|
+
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
|
24
|
+
import { CogIcon, ExpandIcon, OpenDrawerRightIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
|
25
|
+
|
26
|
+
export const SettingsDemo: React.FunctionComponent = () => {
|
27
|
+
const [isChecked, setIsChecked] = React.useState<boolean>(true);
|
28
|
+
const [isThemeOpen, setIsThemeOpen] = React.useState(false);
|
29
|
+
const [isLanguageOpen, setIsLanguageOpen] = React.useState(false);
|
30
|
+
const [isVoiceOpen, setIsVoiceOpen] = React.useState(false);
|
31
|
+
const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
|
32
|
+
const [areSettingsOpen, setAreSettingsOpen] = React.useState(true);
|
33
|
+
const chatbotVisible = true;
|
34
|
+
|
35
|
+
const onFocus = (id: string) => {
|
36
|
+
const element = document.getElementById(id);
|
37
|
+
(element as HTMLElement).focus();
|
38
|
+
};
|
39
|
+
|
40
|
+
const onThemeToggleClick = () => {
|
41
|
+
setIsThemeOpen(!isThemeOpen);
|
42
|
+
};
|
43
|
+
|
44
|
+
const onThemeSelect = (
|
45
|
+
_event: React.MouseEvent<Element, MouseEvent> | undefined,
|
46
|
+
value: string | number | undefined
|
47
|
+
) => {
|
48
|
+
// eslint-disable-next-line no-console
|
49
|
+
console.log('selected', value);
|
50
|
+
onFocus('theme');
|
51
|
+
setIsThemeOpen(false);
|
52
|
+
};
|
53
|
+
|
54
|
+
const onLanguageToggleClick = () => {
|
55
|
+
setIsLanguageOpen(!isLanguageOpen);
|
56
|
+
};
|
57
|
+
|
58
|
+
const onLanguageSelect = (
|
59
|
+
_event: React.MouseEvent<Element, MouseEvent> | undefined,
|
60
|
+
value: string | number | undefined
|
61
|
+
) => {
|
62
|
+
// eslint-disable-next-line no-console
|
63
|
+
console.log('selected', value);
|
64
|
+
onFocus('language');
|
65
|
+
setIsLanguageOpen(false);
|
66
|
+
};
|
67
|
+
|
68
|
+
const onVoiceToggleClick = () => {
|
69
|
+
onFocus('voice');
|
70
|
+
setIsVoiceOpen(!isVoiceOpen);
|
71
|
+
};
|
72
|
+
|
73
|
+
const onVoiceSelect = (
|
74
|
+
_event: React.MouseEvent<Element, MouseEvent> | undefined,
|
75
|
+
value: string | number | undefined
|
76
|
+
) => {
|
77
|
+
// eslint-disable-next-line no-console
|
78
|
+
console.log('selected', value);
|
79
|
+
setIsVoiceOpen(false);
|
80
|
+
};
|
81
|
+
|
82
|
+
const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
|
83
|
+
setIsChecked(checked);
|
84
|
+
};
|
85
|
+
|
86
|
+
const themeDropdown = (
|
87
|
+
<Dropdown
|
88
|
+
isOpen={isThemeOpen}
|
89
|
+
onSelect={onThemeSelect}
|
90
|
+
onOpenChange={(isOpen: boolean) => setIsThemeOpen(isOpen)}
|
91
|
+
shouldFocusToggleOnSelect
|
92
|
+
shouldFocusFirstItemOnOpen
|
93
|
+
shouldPreventScrollOnItemFocus
|
94
|
+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
|
95
|
+
// We want to add the id property here as well so the label is coupled
|
96
|
+
// with the button on screen readers.
|
97
|
+
<MenuToggle id="theme" ref={toggleRef} onClick={onThemeToggleClick} isExpanded={isThemeOpen}>
|
98
|
+
System
|
99
|
+
</MenuToggle>
|
100
|
+
)}
|
101
|
+
ouiaId="ThemeDropdown"
|
102
|
+
>
|
103
|
+
<DropdownList>
|
104
|
+
<DropdownItem value="System" key="system">
|
105
|
+
System
|
106
|
+
</DropdownItem>
|
107
|
+
</DropdownList>
|
108
|
+
</Dropdown>
|
109
|
+
);
|
110
|
+
|
111
|
+
const languageDropdown = (
|
112
|
+
<Dropdown
|
113
|
+
isOpen={isLanguageOpen}
|
114
|
+
onSelect={onLanguageSelect}
|
115
|
+
onOpenChange={(isOpen: boolean) => setIsLanguageOpen(isOpen)}
|
116
|
+
shouldFocusToggleOnSelect
|
117
|
+
shouldFocusFirstItemOnOpen
|
118
|
+
shouldPreventScrollOnItemFocus
|
119
|
+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
|
120
|
+
// We want to add the id property here as well so the label is coupled
|
121
|
+
// with the button on screen readers.
|
122
|
+
<MenuToggle id="language" ref={toggleRef} onClick={onLanguageToggleClick} isExpanded={isLanguageOpen}>
|
123
|
+
Auto-detect
|
124
|
+
</MenuToggle>
|
125
|
+
)}
|
126
|
+
ouiaId="LanguageDropdown"
|
127
|
+
>
|
128
|
+
<DropdownList>
|
129
|
+
<DropdownItem value="Auto-detect" key="auto-detect">
|
130
|
+
Auto-detect
|
131
|
+
</DropdownItem>
|
132
|
+
</DropdownList>
|
133
|
+
</Dropdown>
|
134
|
+
);
|
135
|
+
const voiceDropdown = (
|
136
|
+
<Dropdown
|
137
|
+
isOpen={isVoiceOpen}
|
138
|
+
onSelect={onVoiceSelect}
|
139
|
+
onOpenChange={(isOpen: boolean) => setIsVoiceOpen(isOpen)}
|
140
|
+
shouldFocusToggleOnSelect
|
141
|
+
shouldFocusFirstItemOnOpen
|
142
|
+
shouldPreventScrollOnItemFocus
|
143
|
+
toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
|
144
|
+
// We want to add the id property here as well so the label is coupled
|
145
|
+
// with the button on screen readers.
|
146
|
+
<MenuToggle id="voice" ref={toggleRef} onClick={onVoiceToggleClick} isExpanded={isVoiceOpen}>
|
147
|
+
Bot
|
148
|
+
</MenuToggle>
|
149
|
+
)}
|
150
|
+
ouiaId="VoiceDropdown"
|
151
|
+
>
|
152
|
+
<DropdownList>
|
153
|
+
<DropdownItem value="Bot" key="bot">
|
154
|
+
Bot
|
155
|
+
</DropdownItem>
|
156
|
+
</DropdownList>
|
157
|
+
</Dropdown>
|
158
|
+
);
|
159
|
+
const children = [
|
160
|
+
{ id: 'theme', label: 'Theme', field: themeDropdown },
|
161
|
+
{ id: 'language', label: 'Language', field: languageDropdown },
|
162
|
+
{ id: 'voice', label: 'Voice', field: voiceDropdown },
|
163
|
+
{
|
164
|
+
id: 'analytics',
|
165
|
+
label: 'Share analytics',
|
166
|
+
field: (
|
167
|
+
<Switch
|
168
|
+
// We want to add the id property here as well so the label is coupled
|
169
|
+
// with the button on screen readers.
|
170
|
+
id="analytics"
|
171
|
+
aria-label="Togglable option for whether to share analytics"
|
172
|
+
isChecked={isChecked}
|
173
|
+
onChange={handleChange}
|
174
|
+
/>
|
175
|
+
)
|
176
|
+
},
|
177
|
+
{
|
178
|
+
id: 'archived-chat',
|
179
|
+
label: 'Archive chat',
|
180
|
+
field: (
|
181
|
+
// We want to add the id property here as well so the label is coupled
|
182
|
+
// with the button on screen readers.
|
183
|
+
<Button id="archived-chat" variant="secondary">
|
184
|
+
Manage
|
185
|
+
</Button>
|
186
|
+
)
|
187
|
+
},
|
188
|
+
{
|
189
|
+
id: 'archive-all',
|
190
|
+
label: 'Archive all chat',
|
191
|
+
field: (
|
192
|
+
// We want to add the id property here as well so the label is coupled
|
193
|
+
// with the button on screen readers.
|
194
|
+
<Button id="archive-all" variant="secondary">
|
195
|
+
Archive all
|
196
|
+
</Button>
|
197
|
+
)
|
198
|
+
},
|
199
|
+
{
|
200
|
+
id: 'delete-all',
|
201
|
+
label: 'Delete all chats',
|
202
|
+
field: (
|
203
|
+
// We want to add the id property here as well so the label is coupled
|
204
|
+
// with the button on screen readers.
|
205
|
+
<Button id="delete-all" variant="danger">
|
206
|
+
Delete all
|
207
|
+
</Button>
|
208
|
+
)
|
209
|
+
}
|
210
|
+
];
|
211
|
+
|
212
|
+
const onSelectDropdownItem = (
|
213
|
+
_event: React.MouseEvent<Element, MouseEvent> | undefined,
|
214
|
+
value: string | number | undefined
|
215
|
+
) => {
|
216
|
+
if (value === 'Settings') {
|
217
|
+
setAreSettingsOpen(true);
|
218
|
+
} else {
|
219
|
+
setDisplayMode(value as ChatbotDisplayMode);
|
220
|
+
}
|
221
|
+
};
|
222
|
+
|
223
|
+
const regularChatbot = (
|
224
|
+
<ChatbotHeader>
|
225
|
+
<ChatbotHeaderActions>
|
226
|
+
<ChatbotHeaderOptionsDropdown onSelect={onSelectDropdownItem}>
|
227
|
+
<DropdownGroup label="Display mode">
|
228
|
+
<DropdownList>
|
229
|
+
<DropdownItem
|
230
|
+
value={ChatbotDisplayMode.default}
|
231
|
+
key="switchDisplayOverlay"
|
232
|
+
icon={<OutlinedWindowRestoreIcon aria-hidden />}
|
233
|
+
isSelected={displayMode === ChatbotDisplayMode.default}
|
234
|
+
>
|
235
|
+
<span>Overlay</span>
|
236
|
+
</DropdownItem>
|
237
|
+
<DropdownItem
|
238
|
+
value={ChatbotDisplayMode.docked}
|
239
|
+
key="switchDisplayDock"
|
240
|
+
icon={<OpenDrawerRightIcon aria-hidden />}
|
241
|
+
isSelected={displayMode === ChatbotDisplayMode.docked}
|
242
|
+
>
|
243
|
+
<span>Dock to window</span>
|
244
|
+
</DropdownItem>
|
245
|
+
<DropdownItem
|
246
|
+
value={ChatbotDisplayMode.fullscreen}
|
247
|
+
key="switchDisplayFullscreen"
|
248
|
+
icon={<ExpandIcon aria-hidden />}
|
249
|
+
isSelected={displayMode === ChatbotDisplayMode.fullscreen}
|
250
|
+
>
|
251
|
+
<span>Fullscreen</span>
|
252
|
+
</DropdownItem>
|
253
|
+
</DropdownList>
|
254
|
+
</DropdownGroup>
|
255
|
+
<Divider />
|
256
|
+
<DropdownList>
|
257
|
+
<DropdownItem value="Settings" key="switchSettings" icon={<CogIcon aria-hidden />}>
|
258
|
+
<span>Settings</span>
|
259
|
+
</DropdownItem>
|
260
|
+
</DropdownList>
|
261
|
+
</ChatbotHeaderOptionsDropdown>
|
262
|
+
</ChatbotHeaderActions>
|
263
|
+
</ChatbotHeader>
|
264
|
+
);
|
265
|
+
|
266
|
+
return (
|
267
|
+
<>
|
268
|
+
<Chatbot isVisible={chatbotVisible} displayMode={displayMode}>
|
269
|
+
{areSettingsOpen ? (
|
270
|
+
<>
|
271
|
+
<ChatbotHeader>
|
272
|
+
<ChatbotHeaderMain>
|
273
|
+
<ChatbotHeaderTitle>
|
274
|
+
<Title headingLevel="h1" size="2xl">
|
275
|
+
Settings
|
276
|
+
</Title>
|
277
|
+
</ChatbotHeaderTitle>
|
278
|
+
</ChatbotHeaderMain>
|
279
|
+
<ChatbotHeaderCloseButton onClick={() => setAreSettingsOpen(false)} />
|
280
|
+
</ChatbotHeader>
|
281
|
+
<SettingsForm fields={children} />
|
282
|
+
</>
|
283
|
+
) : (
|
284
|
+
<>{regularChatbot}</>
|
285
|
+
)}
|
286
|
+
</Chatbot>
|
287
|
+
</>
|
288
|
+
);
|
289
|
+
};
|
@@ -55,6 +55,7 @@ import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
|
|
55
55
|
import TermsOfUse from '@patternfly/chatbot/dist/dynamic/TermsOfUse';
|
56
56
|
import {
|
57
57
|
ChatbotHeader,
|
58
|
+
ChatbotHeaderCloseButton,
|
58
59
|
ChatbotHeaderMain,
|
59
60
|
ChatbotHeaderMenu,
|
60
61
|
ChatbotHeaderActions,
|
@@ -66,6 +67,7 @@ import { ChatbotFooter, ChatbotFootnote } from '@patternfly/chatbot/dist/dynamic
|
|
66
67
|
import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
|
67
68
|
import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
|
68
69
|
import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
|
70
|
+
import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
|
69
71
|
import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
|
70
72
|
import { useDropzone } from 'react-dropzone';
|
71
73
|
|
@@ -75,11 +77,13 @@ import { DropdownItem, DropdownList, Checkbox } from '@patternfly/react-core';
|
|
75
77
|
import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
|
76
78
|
import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
|
77
79
|
import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon';
|
80
|
+
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
78
81
|
import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
|
79
82
|
import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
|
80
83
|
import userAvatar from '../Messages/user_avatar.svg';
|
81
84
|
import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
|
82
85
|
import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
|
86
|
+
import { CloseIcon } from '@patternfly/react-icons';
|
83
87
|
|
84
88
|
## Structure
|
85
89
|
|
@@ -377,6 +381,16 @@ This example also includes an example of how to use [skip to content](/patternfl
|
|
377
381
|
|
378
382
|
```
|
379
383
|
|
384
|
+
### Settings
|
385
|
+
|
386
|
+
To contain user preference controls and other ChatBot setting options, you can create a separate settings page that can accept any number of buttons, dropdown menus, toggles, labels, and so on. This settings page will render all components appropriately within all 4 display modes.
|
387
|
+
|
388
|
+
In this demo, you can toggle the settings page by clicking the "Settings" button in the display mode menu.
|
389
|
+
|
390
|
+
```js file="./Settings.tsx" isFullscreen
|
391
|
+
|
392
|
+
```
|
393
|
+
|
380
394
|
## Modals
|
381
395
|
|
382
396
|
### Modal
|
@@ -66,7 +66,7 @@ This demo displays a basic ChatBot, which includes:
|
|
66
66
|
4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
|
67
67
|
|
68
68
|
- A `<ChatbotWelcomePrompt>`
|
69
|
-
- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#
|
69
|
+
- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages#message-actions)
|
70
70
|
- Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
|
71
71
|
|
72
72
|
5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
|
@@ -92,7 +92,7 @@ This demo displays an embedded ChatBot. Embedded ChatBots are meant to be placed
|
|
92
92
|
3. A [`<ChatbotHeader>`](/patternfly-ai/chatbot/ui#header) with all built sub-components laid out, including a `<ChatbotHeaderTitle>`
|
93
93
|
4. [`<ChatbotContent>` and `<MessageBox>`](/patternfly-ai/chatbot/ui#content-and-message-box) with:
|
94
94
|
- A `<ChatbotWelcomePrompt>`
|
95
|
-
- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#
|
95
|
+
- An initial [user `<Message>`](/patternfly-ai/chatbot/messages#user-messages) and an initial bot message with [message actions.](/patternfly-ai/chatbot/messages/#message-actions)
|
96
96
|
- Logic for enabling auto-scrolling to the most recent message whenever a new message is sent or received using a `scrollToBottomRef`
|
97
97
|
5. A [`<ChatbotFooter>`](/patternfly-ai/chatbot/ui#footer) with a [`<ChatbotFootNote>`](/patternfly-ai/chatbot/ui#footnote-with-popover) and a `<MessageBar>` that contains the abilities of:
|
98
98
|
- [Speech to text.](/patternfly-ai/chatbot/ui#message-bar-with-speech-recognition-and-file-attachment)
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
|
3
|
+
import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
|
4
|
+
import { CloseIcon } from '@patternfly/react-icons';
|
5
|
+
|
6
|
+
export interface ChatbotHeaderCloseButtonProps {
|
7
|
+
/** Callback function for when button is clicked */
|
8
|
+
onClick: () => void;
|
9
|
+
/** Custom classname for the header component */
|
10
|
+
className?: string;
|
11
|
+
/** Props spread to the PF Tooltip component wrapping the display mode dropdown */
|
12
|
+
tooltipProps?: TooltipProps;
|
13
|
+
/** Aria label for menu */
|
14
|
+
menuAriaLabel?: string;
|
15
|
+
/** Ref applied to menu */
|
16
|
+
innerRef?: React.Ref<HTMLButtonElement>;
|
17
|
+
/** Content used in tooltip */
|
18
|
+
tooltipContent?: string;
|
19
|
+
}
|
20
|
+
|
21
|
+
const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
|
22
|
+
className,
|
23
|
+
onClick,
|
24
|
+
tooltipProps,
|
25
|
+
menuAriaLabel = 'Close',
|
26
|
+
innerRef,
|
27
|
+
tooltipContent = 'Close'
|
28
|
+
}: ChatbotHeaderCloseButtonProps) => (
|
29
|
+
<div className={`pf-chatbot__menu ${className}`}>
|
30
|
+
<Tooltip content={tooltipContent} position="bottom" {...tooltipProps}>
|
31
|
+
<Button
|
32
|
+
className="pf-chatbot__button--toggle-menu"
|
33
|
+
variant="plain"
|
34
|
+
onClick={onClick}
|
35
|
+
aria-label={menuAriaLabel}
|
36
|
+
ref={innerRef}
|
37
|
+
icon={
|
38
|
+
<Icon size="xl" isInline>
|
39
|
+
<CloseIcon />
|
40
|
+
</Icon>
|
41
|
+
}
|
42
|
+
/>
|
43
|
+
</Tooltip>
|
44
|
+
</div>
|
45
|
+
);
|
46
|
+
|
47
|
+
export const ChatbotHeaderCloseButton = React.forwardRef(
|
48
|
+
(props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
|
49
|
+
<ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
|
50
|
+
)
|
51
|
+
);
|
@@ -14,6 +14,8 @@ export interface ChatbotHeaderMenuProps {
|
|
14
14
|
menuAriaLabel?: string;
|
15
15
|
/** Ref applied to menu */
|
16
16
|
innerRef?: React.Ref<HTMLButtonElement>;
|
17
|
+
/** Content used in tooltip */
|
18
|
+
tooltipContent?: string;
|
17
19
|
}
|
18
20
|
|
19
21
|
const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
|
@@ -21,10 +23,11 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
|
|
21
23
|
onMenuToggle,
|
22
24
|
tooltipProps,
|
23
25
|
menuAriaLabel = 'Toggle menu',
|
24
|
-
innerRef
|
26
|
+
innerRef,
|
27
|
+
tooltipContent = 'Menu'
|
25
28
|
}: ChatbotHeaderMenuProps) => (
|
26
29
|
<div className={`pf-chatbot__menu ${className}`}>
|
27
|
-
<Tooltip content=
|
30
|
+
<Tooltip content={tooltipContent} position="bottom" {...tooltipProps}>
|
28
31
|
<Button
|
29
32
|
className="pf-chatbot__button--toggle-menu"
|
30
33
|
variant="plain"
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { render, screen } from '@testing-library/react';
|
3
|
+
import '@testing-library/jest-dom';
|
4
|
+
import userEvent from '@testing-library/user-event';
|
5
|
+
import { DownloadIcon } from '@patternfly/react-icons';
|
6
|
+
import ResponseActionButton from './ResponseActionButton';
|
7
|
+
|
8
|
+
describe('ResponseActionButton', () => {
|
9
|
+
it('renders aria-label correctly if not clicked', () => {
|
10
|
+
render(<ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" />);
|
11
|
+
expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
|
12
|
+
});
|
13
|
+
it('renders aria-label correctly if clicked', () => {
|
14
|
+
render(
|
15
|
+
<ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" clickedAriaLabel="Downloaded" isClicked />
|
16
|
+
);
|
17
|
+
expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
|
18
|
+
});
|
19
|
+
it('renders tooltip correctly if not clicked', async () => {
|
20
|
+
render(
|
21
|
+
<ResponseActionButton icon={<DownloadIcon />} tooltipContent="Download" clickedTooltipContent="Downloaded" />
|
22
|
+
);
|
23
|
+
expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
|
24
|
+
// clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
|
25
|
+
await userEvent.click(screen.getByRole('button', { name: 'Download' }));
|
26
|
+
expect(screen.getByRole('tooltip', { name: 'Download' })).toBeTruthy();
|
27
|
+
});
|
28
|
+
it('renders tooltip correctly if clicked', async () => {
|
29
|
+
render(
|
30
|
+
<ResponseActionButton
|
31
|
+
icon={<DownloadIcon />}
|
32
|
+
tooltipContent="Download"
|
33
|
+
clickedTooltipContent="Downloaded"
|
34
|
+
isClicked
|
35
|
+
/>
|
36
|
+
);
|
37
|
+
expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
|
38
|
+
// clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
|
39
|
+
await userEvent.click(screen.getByRole('button', { name: 'Downloaded' }));
|
40
|
+
expect(screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy();
|
41
|
+
});
|
42
|
+
it('if clicked variant for tooltip is not supplied, it uses the default', async () => {
|
43
|
+
render(<ResponseActionButton icon={<DownloadIcon />} tooltipContent="Download" isClicked />);
|
44
|
+
// clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
|
45
|
+
await userEvent.click(screen.getByRole('button', { name: 'Download' }));
|
46
|
+
expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
|
47
|
+
});
|
48
|
+
it('if clicked variant for aria label is not supplied, it uses the default', async () => {
|
49
|
+
render(<ResponseActionButton icon={<DownloadIcon />} ariaLabel="Download" isClicked />);
|
50
|
+
expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
|
51
|
+
});
|
52
|
+
});
|
@@ -4,6 +4,8 @@ import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
|
|
4
4
|
export interface ResponseActionButtonProps {
|
5
5
|
/** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
|
6
6
|
ariaLabel?: string;
|
7
|
+
/** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */
|
8
|
+
clickedAriaLabel?: string;
|
7
9
|
/** Icon for the button */
|
8
10
|
icon: React.ReactNode;
|
9
11
|
/** On-click handler for the button */
|
@@ -14,43 +16,60 @@ export interface ResponseActionButtonProps {
|
|
14
16
|
isDisabled?: boolean;
|
15
17
|
/** Content shown in the tooltip */
|
16
18
|
tooltipContent?: string;
|
19
|
+
/** Content shown in the tooltip when the button is clicked. Defaults to the value of tooltipContent if not provided. */
|
20
|
+
clickedTooltipContent?: string;
|
17
21
|
/** Props to control the PF Tooltip component */
|
18
22
|
tooltipProps?: TooltipProps;
|
23
|
+
/** Whether button is in clicked state */
|
24
|
+
isClicked?: boolean;
|
19
25
|
}
|
20
26
|
|
21
27
|
export const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps> = ({
|
22
28
|
ariaLabel,
|
29
|
+
clickedAriaLabel = ariaLabel,
|
23
30
|
className,
|
24
31
|
icon,
|
25
32
|
isDisabled,
|
26
33
|
onClick,
|
27
34
|
tooltipContent,
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
<
|
41
|
-
|
42
|
-
|
43
|
-
aria-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
}
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
)
|
35
|
+
clickedTooltipContent = tooltipContent,
|
36
|
+
tooltipProps,
|
37
|
+
isClicked = false
|
38
|
+
}) => {
|
39
|
+
const generateAriaLabel = () => {
|
40
|
+
if (ariaLabel) {
|
41
|
+
return isClicked ? clickedAriaLabel : ariaLabel;
|
42
|
+
}
|
43
|
+
return isClicked ? clickedTooltipContent : tooltipContent;
|
44
|
+
};
|
45
|
+
|
46
|
+
return (
|
47
|
+
<Tooltip
|
48
|
+
id={`pf-chatbot__tooltip-response-action-${tooltipContent}`}
|
49
|
+
content={isClicked ? clickedTooltipContent : tooltipContent}
|
50
|
+
aria-live="polite"
|
51
|
+
position="bottom"
|
52
|
+
entryDelay={tooltipProps?.entryDelay || 0}
|
53
|
+
exitDelay={tooltipProps?.exitDelay || 0}
|
54
|
+
distance={tooltipProps?.distance || 8}
|
55
|
+
animationDuration={tooltipProps?.animationDuration || 0}
|
56
|
+
{...tooltipProps}
|
57
|
+
>
|
58
|
+
<Button
|
59
|
+
variant="plain"
|
60
|
+
className={`pf-chatbot__button--response-action ${isClicked ? 'pf-chatbot__button--response-action-clicked' : ''} ${className ?? ''}`}
|
61
|
+
aria-label={generateAriaLabel()}
|
62
|
+
icon={
|
63
|
+
<Icon isInline size="lg">
|
64
|
+
{icon}
|
65
|
+
</Icon>
|
66
|
+
}
|
67
|
+
isDisabled={isDisabled}
|
68
|
+
onClick={onClick}
|
69
|
+
size="sm"
|
70
|
+
></Button>
|
71
|
+
</Tooltip>
|
72
|
+
);
|
73
|
+
};
|
55
74
|
|
56
75
|
export default ResponseActionButton;
|
@@ -4,6 +4,7 @@
|
|
4
4
|
grid-template-columns: repeat(auto-fit, minmax(0, max-content));
|
5
5
|
|
6
6
|
.pf-v6-c-button {
|
7
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
|
7
8
|
border-radius: var(--pf-t--global--border--radius--pill);
|
8
9
|
width: 2.3125rem;
|
9
10
|
height: 2.3125rem;
|
@@ -11,16 +12,17 @@
|
|
11
12
|
align-items: center;
|
12
13
|
justify-content: center;
|
13
14
|
|
14
|
-
|
15
|
-
|
15
|
+
&:hover {
|
16
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
|
16
17
|
}
|
17
|
-
|
18
|
-
// Interactive states
|
19
|
-
&:hover,
|
20
18
|
&:focus {
|
21
|
-
|
22
|
-
|
23
|
-
}
|
19
|
+
--pf-v6-c-button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
|
20
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
|
24
21
|
}
|
25
22
|
}
|
26
23
|
}
|
24
|
+
|
25
|
+
.pf-v6-c-button.pf-chatbot__button--response-action-clicked {
|
26
|
+
--pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
|
27
|
+
--pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
|
28
|
+
}
|