@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.
Files changed (26) hide show
  1. package/dist/cjs/ResponseActions/ResponseActionButton.d.ts +6 -0
  2. package/dist/cjs/ResponseActions/ResponseActionButton.js +10 -2
  3. package/dist/cjs/ResponseActions/ResponseActionButton.test.d.ts +1 -0
  4. package/dist/cjs/ResponseActions/ResponseActionButton.test.js +54 -0
  5. package/dist/cjs/ResponseActions/ResponseActions.d.ts +4 -0
  6. package/dist/cjs/ResponseActions/ResponseActions.js +26 -9
  7. package/dist/cjs/ResponseActions/ResponseActions.test.js +79 -5
  8. package/dist/css/main.css +11 -4
  9. package/dist/css/main.css.map +1 -1
  10. package/dist/esm/ResponseActions/ResponseActionButton.d.ts +6 -0
  11. package/dist/esm/ResponseActions/ResponseActionButton.js +10 -2
  12. package/dist/esm/ResponseActions/ResponseActionButton.test.d.ts +1 -0
  13. package/dist/esm/ResponseActions/ResponseActionButton.test.js +49 -0
  14. package/dist/esm/ResponseActions/ResponseActions.d.ts +4 -0
  15. package/dist/esm/ResponseActions/ResponseActions.js +26 -9
  16. package/dist/esm/ResponseActions/ResponseActions.test.js +79 -5
  17. package/dist/tsconfig.tsbuildinfo +1 -1
  18. package/package.json +1 -1
  19. package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx +4 -0
  20. package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +13 -2
  21. package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +2 -2
  22. package/src/ResponseActions/ResponseActionButton.test.tsx +52 -0
  23. package/src/ResponseActions/ResponseActionButton.tsx +46 -27
  24. package/src/ResponseActions/ResponseActions.scss +10 -8
  25. package/src/ResponseActions/ResponseActions.test.tsx +103 -5
  26. 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
- onClick={positive.onClick}
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
- onClick={negative.onClick}
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
- onClick={copy.onClick}
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
- onClick={share.onClick}
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
- onClick={listen.onClick}
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
- onClick={additionalActions[action]?.onClick}
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>