@patternfly/chatbot 2.2.0-prerelease.4 → 2.2.0-prerelease.5
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/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/css/main.css +11 -4
- package/dist/css/main.css.map +1 -1
- 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/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/demos/Chatbot.md +2 -2
- 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
@@ -12,6 +12,8 @@ import { TooltipProps } from '@patternfly/react-core';
|
|
12
12
|
export interface ActionProps {
|
13
13
|
/** Aria-label for the button */
|
14
14
|
ariaLabel?: string;
|
15
|
+
/** Aria-label for the button, shown when the button is clicked. */
|
16
|
+
clickedAriaLabel?: string;
|
15
17
|
/** On-click handler for the button */
|
16
18
|
onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
|
17
19
|
/** Class name for the button */
|
@@ -20,6 +22,8 @@ export interface ActionProps {
|
|
20
22
|
isDisabled?: boolean;
|
21
23
|
/** Content shown in the tooltip */
|
22
24
|
tooltipContent?: string;
|
25
|
+
/** Content shown in the tooltip when the button is clicked. */
|
26
|
+
clickedTooltipContent?: string;
|
23
27
|
/** Props to control the PF Tooltip component */
|
24
28
|
tooltipProps?: TooltipProps;
|
25
29
|
/** Icon for custom response action */
|
@@ -38,74 +42,117 @@ export interface ResponseActionProps {
|
|
38
42
|
}
|
39
43
|
|
40
44
|
export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({ actions }) => {
|
45
|
+
const [activeButton, setActiveButton] = React.useState<string>();
|
41
46
|
const { positive, negative, copy, share, listen, ...additionalActions } = actions;
|
47
|
+
const responseActions = React.useRef<HTMLDivElement>(null);
|
48
|
+
|
49
|
+
React.useEffect(() => {
|
50
|
+
const handleClickOutside = (e) => {
|
51
|
+
if (responseActions.current && !responseActions.current.contains(e.target)) {
|
52
|
+
setActiveButton(undefined);
|
53
|
+
}
|
54
|
+
};
|
55
|
+
window.addEventListener('click', handleClickOutside);
|
56
|
+
|
57
|
+
return () => {
|
58
|
+
window.removeEventListener('click', handleClickOutside);
|
59
|
+
};
|
60
|
+
}, []);
|
61
|
+
|
62
|
+
const handleClick = (
|
63
|
+
e: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent,
|
64
|
+
id: string,
|
65
|
+
onClick?: (event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
|
66
|
+
) => {
|
67
|
+
setActiveButton(id);
|
68
|
+
onClick && onClick(e);
|
69
|
+
};
|
70
|
+
|
42
71
|
return (
|
43
|
-
<div className="pf-chatbot__response-actions">
|
72
|
+
<div ref={responseActions} className="pf-chatbot__response-actions">
|
44
73
|
{positive && (
|
45
74
|
<ResponseActionButton
|
46
75
|
ariaLabel={positive.ariaLabel ?? 'Good response'}
|
47
|
-
|
76
|
+
clickedAriaLabel={positive.ariaLabel ?? 'Response recorded'}
|
77
|
+
onClick={(e) => handleClick(e, 'positive', positive.onClick)}
|
48
78
|
className={positive.className}
|
49
79
|
isDisabled={positive.isDisabled}
|
50
80
|
tooltipContent={positive.tooltipContent ?? 'Good response'}
|
81
|
+
clickedTooltipContent={positive.clickedTooltipContent ?? 'Response recorded'}
|
51
82
|
tooltipProps={positive.tooltipProps}
|
52
83
|
icon={<OutlinedThumbsUpIcon />}
|
84
|
+
isClicked={activeButton === 'positive'}
|
53
85
|
></ResponseActionButton>
|
54
86
|
)}
|
55
87
|
{negative && (
|
56
88
|
<ResponseActionButton
|
57
89
|
ariaLabel={negative.ariaLabel ?? 'Bad response'}
|
58
|
-
|
90
|
+
clickedAriaLabel={negative.ariaLabel ?? 'Response recorded'}
|
91
|
+
onClick={(e) => handleClick(e, 'negative', negative.onClick)}
|
59
92
|
className={negative.className}
|
60
93
|
isDisabled={negative.isDisabled}
|
61
94
|
tooltipContent={negative.tooltipContent ?? 'Bad response'}
|
95
|
+
clickedTooltipContent={negative.clickedTooltipContent ?? 'Response recorded'}
|
62
96
|
tooltipProps={negative.tooltipProps}
|
63
97
|
icon={<OutlinedThumbsDownIcon />}
|
98
|
+
isClicked={activeButton === 'negative'}
|
64
99
|
></ResponseActionButton>
|
65
100
|
)}
|
66
101
|
{copy && (
|
67
102
|
<ResponseActionButton
|
68
103
|
ariaLabel={copy.ariaLabel ?? 'Copy'}
|
69
|
-
|
104
|
+
clickedAriaLabel={copy.ariaLabel ?? 'Copied'}
|
105
|
+
onClick={(e) => handleClick(e, 'copy', copy.onClick)}
|
70
106
|
className={copy.className}
|
71
107
|
isDisabled={copy.isDisabled}
|
72
108
|
tooltipContent={copy.tooltipContent ?? 'Copy'}
|
109
|
+
clickedTooltipContent={copy.clickedTooltipContent ?? 'Copied'}
|
73
110
|
tooltipProps={copy.tooltipProps}
|
74
111
|
icon={<OutlinedCopyIcon />}
|
112
|
+
isClicked={activeButton === 'copy'}
|
75
113
|
></ResponseActionButton>
|
76
114
|
)}
|
77
115
|
{share && (
|
78
116
|
<ResponseActionButton
|
79
117
|
ariaLabel={share.ariaLabel ?? 'Share'}
|
80
|
-
|
118
|
+
clickedAriaLabel={share.ariaLabel ?? 'Shared'}
|
119
|
+
onClick={(e) => handleClick(e, 'share', share.onClick)}
|
81
120
|
className={share.className}
|
82
121
|
isDisabled={share.isDisabled}
|
83
122
|
tooltipContent={share.tooltipContent ?? 'Share'}
|
123
|
+
clickedTooltipContent={share.clickedTooltipContent ?? 'Shared'}
|
84
124
|
tooltipProps={share.tooltipProps}
|
85
125
|
icon={<ExternalLinkAltIcon />}
|
126
|
+
isClicked={activeButton === 'share'}
|
86
127
|
></ResponseActionButton>
|
87
128
|
)}
|
88
129
|
{listen && (
|
89
130
|
<ResponseActionButton
|
90
131
|
ariaLabel={listen.ariaLabel ?? 'Listen'}
|
91
|
-
|
132
|
+
clickedAriaLabel={listen.ariaLabel ?? 'Listening'}
|
133
|
+
onClick={(e) => handleClick(e, 'listen', listen.onClick)}
|
92
134
|
className={listen.className}
|
93
135
|
isDisabled={listen.isDisabled}
|
94
136
|
tooltipContent={listen.tooltipContent ?? 'Listen'}
|
137
|
+
clickedTooltipContent={listen.clickedTooltipContent ?? 'Listening'}
|
95
138
|
tooltipProps={listen.tooltipProps}
|
96
139
|
icon={<VolumeUpIcon />}
|
140
|
+
isClicked={activeButton === 'listen'}
|
97
141
|
></ResponseActionButton>
|
98
142
|
)}
|
99
143
|
{Object.keys(additionalActions).map((action) => (
|
100
144
|
<ResponseActionButton
|
101
145
|
key={action}
|
102
146
|
ariaLabel={additionalActions[action]?.ariaLabel}
|
103
|
-
|
147
|
+
clickedAriaLabel={additionalActions[action]?.clickedAriaLabel}
|
148
|
+
onClick={(e) => handleClick(e, action, additionalActions[action]?.onClick)}
|
104
149
|
className={additionalActions[action]?.className}
|
105
150
|
isDisabled={additionalActions[action]?.isDisabled}
|
106
151
|
tooltipContent={additionalActions[action]?.tooltipContent}
|
107
152
|
tooltipProps={additionalActions[action]?.tooltipProps}
|
153
|
+
clickedTooltipContent={additionalActions[action]?.clickedTooltipContent}
|
108
154
|
icon={additionalActions[action]?.icon}
|
155
|
+
isClicked={activeButton === action}
|
109
156
|
/>
|
110
157
|
))}
|
111
158
|
</div>
|