@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.
Files changed (61) hide show
  1. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +17 -0
  2. package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js +14 -0
  3. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.d.ts +2 -0
  4. package/dist/cjs/ChatbotHeader/ChatbotHeaderMenu.js +2 -2
  5. package/dist/cjs/ChatbotHeader/index.d.ts +1 -0
  6. package/dist/cjs/ChatbotHeader/index.js +1 -0
  7. package/dist/cjs/ResponseActions/ResponseActionButton.d.ts +6 -0
  8. package/dist/cjs/ResponseActions/ResponseActionButton.js +10 -2
  9. package/dist/cjs/ResponseActions/ResponseActionButton.test.d.ts +1 -0
  10. package/dist/cjs/ResponseActions/ResponseActionButton.test.js +54 -0
  11. package/dist/cjs/ResponseActions/ResponseActions.d.ts +4 -0
  12. package/dist/cjs/ResponseActions/ResponseActions.js +26 -9
  13. package/dist/cjs/ResponseActions/ResponseActions.test.js +79 -5
  14. package/dist/cjs/Settings/SettingsForm.d.ts +13 -0
  15. package/dist/cjs/Settings/SettingsForm.js +27 -0
  16. package/dist/cjs/Settings/index.d.ts +2 -0
  17. package/dist/cjs/Settings/index.js +23 -0
  18. package/dist/cjs/index.d.ts +2 -0
  19. package/dist/cjs/index.js +4 -1
  20. package/dist/css/main.css +46 -4
  21. package/dist/css/main.css.map +1 -1
  22. package/dist/dynamic/Settings/package.json +1 -0
  23. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.d.ts +17 -0
  24. package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js +8 -0
  25. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.d.ts +2 -0
  26. package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js +2 -2
  27. package/dist/esm/ChatbotHeader/index.d.ts +1 -0
  28. package/dist/esm/ChatbotHeader/index.js +1 -0
  29. package/dist/esm/ResponseActions/ResponseActionButton.d.ts +6 -0
  30. package/dist/esm/ResponseActions/ResponseActionButton.js +10 -2
  31. package/dist/esm/ResponseActions/ResponseActionButton.test.d.ts +1 -0
  32. package/dist/esm/ResponseActions/ResponseActionButton.test.js +49 -0
  33. package/dist/esm/ResponseActions/ResponseActions.d.ts +4 -0
  34. package/dist/esm/ResponseActions/ResponseActions.js +26 -9
  35. package/dist/esm/ResponseActions/ResponseActions.test.js +79 -5
  36. package/dist/esm/Settings/SettingsForm.d.ts +13 -0
  37. package/dist/esm/Settings/SettingsForm.js +20 -0
  38. package/dist/esm/Settings/index.d.ts +2 -0
  39. package/dist/esm/Settings/index.js +2 -0
  40. package/dist/esm/index.d.ts +2 -0
  41. package/dist/esm/index.js +2 -0
  42. package/dist/tsconfig.tsbuildinfo +1 -1
  43. package/package.json +1 -1
  44. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx +4 -0
  45. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +13 -2
  46. package/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx +289 -0
  47. package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +14 -0
  48. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +2 -2
  49. package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx +51 -0
  50. package/src/ChatbotHeader/ChatbotHeaderMenu.tsx +5 -2
  51. package/src/ChatbotHeader/index.ts +1 -0
  52. package/src/ResponseActions/ResponseActionButton.test.tsx +52 -0
  53. package/src/ResponseActions/ResponseActionButton.tsx +46 -27
  54. package/src/ResponseActions/ResponseActions.scss +10 -8
  55. package/src/ResponseActions/ResponseActions.test.tsx +103 -5
  56. package/src/ResponseActions/ResponseActions.tsx +54 -7
  57. package/src/Settings/Settings.scss +34 -0
  58. package/src/Settings/SettingsForm.tsx +25 -0
  59. package/src/Settings/index.ts +3 -0
  60. package/src/index.ts +3 -0
  61. 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#messages-actions)
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/#messages-actions)
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="Menu" position="bottom" {...tooltipProps}>
30
+ <Tooltip content={tooltipContent} position="bottom" {...tooltipProps}>
28
31
  <Button
29
32
  className="pf-chatbot__button--toggle-menu"
30
33
  variant="plain"
@@ -7,3 +7,4 @@ export * from './ChatbotHeaderMenu';
7
7
  export * from './ChatbotHeaderTitle';
8
8
  export * from './ChatbotHeaderOptionsDropdown';
9
9
  export * from './ChatbotHeaderSelectorDropdown';
10
+ export * from './ChatbotHeaderCloseButton';
@@ -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
- tooltipProps
29
- }) => (
30
- <Tooltip
31
- id={`pf-chatbot__tooltip-response-action-${tooltipContent}`}
32
- content={tooltipContent}
33
- position="bottom"
34
- entryDelay={tooltipProps?.entryDelay || 0}
35
- exitDelay={tooltipProps?.exitDelay || 0}
36
- distance={tooltipProps?.distance || 8}
37
- animationDuration={tooltipProps?.animationDuration || 0}
38
- {...tooltipProps}
39
- >
40
- <Button
41
- variant="plain"
42
- className={`pf-chatbot__button--response-action ${className ?? ''}`}
43
- aria-label={ariaLabel ?? tooltipContent}
44
- icon={
45
- <Icon isInline size="lg">
46
- {icon}
47
- </Icon>
48
- }
49
- isDisabled={isDisabled}
50
- onClick={onClick}
51
- size="sm"
52
- ></Button>
53
- </Tooltip>
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
- .pf-v6-c-button__icon {
15
- color: var(--pf-t--global--icon--color--subtle);
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
- .pf-v6-c-button__icon {
22
- color: var(--pf-t--global--icon--color--subtle);
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
+ }