@patternfly/chatbot 6.8.0-prerelease.1 → 6.8.0-prerelease.3

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 (11) hide show
  1. package/dist/cjs/Message/Message.test.js +17 -14
  2. package/dist/cjs/ResponseActions/ResponseActions.js +21 -5
  3. package/dist/cjs/ResponseActions/ResponseActions.test.js +33 -29
  4. package/dist/esm/Message/Message.test.js +17 -14
  5. package/dist/esm/ResponseActions/ResponseActions.js +22 -6
  6. package/dist/esm/ResponseActions/ResponseActions.test.js +33 -29
  7. package/package.json +1 -1
  8. package/patternfly-a11y.config.js +2 -1
  9. package/src/Message/Message.test.tsx +17 -14
  10. package/src/ResponseActions/ResponseActions.test.tsx +33 -29
  11. package/src/ResponseActions/ResponseActions.tsx +37 -18
package/dist/cjs/Message/Message.test.js CHANGED
@@ -24,15 +24,18 @@ const rehype_external_links_1 = __importDefault(require("../__mocks__/rehype-ext
24
24
  const react_core_1 = require("@patternfly/react-core");
25
25
  // Mock the icon components
26
26
  jest.mock('@patternfly/react-icons', () => ({
27
- OutlinedThumbsUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "OutlinedThumbsUpIcon" }),
28
- ThumbsUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ThumbsUpIcon" }),
29
- OutlinedThumbsDownIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "OutlinedThumbsDownIcon" }),
30
- ThumbsDownIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ThumbsDownIcon" }),
31
- OutlinedCopyIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "OutlinedCopyIcon" }),
32
- DownloadIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "DownloadIcon" }),
33
- ExternalLinkAltIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ExternalLinkAltIcon" }),
34
- VolumeUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "VolumeUpIcon" }),
35
- PencilAltIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "PencilAltIcon" }),
27
+ RhUiLikeIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiLikeIcon" }),
28
+ RhUiLikeFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiLikeFillIcon" }),
29
+ RhUiDislikeIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiDislikeIcon" }),
30
+ RhUiDislikeFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiDislikeFillIcon" }),
31
+ RhUiCopyIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiCopyIcon" }),
32
+ RhUiCopyFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiCopyFillIcon" }),
33
+ RhUiEditIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiEditIcon" }),
34
+ RhUiEditFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiEditFillIcon" }),
35
+ RhUiVolumeUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiVolumeUpIcon" }),
36
+ RhUiVolumeUpFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiVolumeUpFillIcon" }),
37
+ RhUiExportIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiExportIcon" }),
38
+ RhUiExportFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiExportFillIcon" }),
36
39
  CheckIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "CheckIcon" }),
37
40
  CloseIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "CloseIcon" }),
38
41
  ExternalLinkSquareAltIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ExternalLinkSquareAltIcon" }),
@@ -1053,10 +1056,10 @@ describe('Message', () => {
1053
1056
  (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
1054
1057
  positive: { onClick: jest.fn() }
1055
1058
  } }));
1056
- expect(react_2.screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
1059
+ expect(react_2.screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
1057
1060
  yield user.click(react_2.screen.getByRole('button', { name: /Good response/i }));
1058
- expect(react_2.screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
1059
- expect(react_2.screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
1061
+ expect(react_2.screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
1062
+ expect(react_2.screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
1060
1063
  }));
1061
1064
  it('should swap icons when useFilledIconsOnClick is true', () => __awaiter(void 0, void 0, void 0, function* () {
1062
1065
  const user = user_event_1.default.setup();
@@ -1064,8 +1067,8 @@ describe('Message', () => {
1064
1067
  positive: { onClick: jest.fn() }
1065
1068
  }, useFilledIconsOnClick: true }));
1066
1069
  yield user.click(react_2.screen.getByRole('button', { name: /Good response/i }));
1067
- expect(react_2.screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
1068
- expect(react_2.screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
1070
+ expect(react_2.screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
1071
+ expect(react_2.screen.queryByText('RhUiLikeIcon')).not.toBeInTheDocument();
1069
1072
  }));
1070
1073
  it('should apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is true', () => {
1071
1074
  (0, react_2.render)((0, jsx_runtime_1.jsx)(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: true, actions: {
package/dist/cjs/ResponseActions/ResponseActions.js CHANGED
@@ -91,12 +91,28 @@ const ResponseActions = (_a) => {
91
91
  };
92
92
  const iconMap = {
93
93
  positive: {
94
- filled: (0, jsx_runtime_1.jsx)(react_icons_1.ThumbsUpIcon, {}),
95
- outlined: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedThumbsUpIcon, {})
94
+ filled: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiLikeFillIcon, {}),
95
+ outlined: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiLikeIcon, {})
96
96
  },
97
97
  negative: {
98
- filled: (0, jsx_runtime_1.jsx)(react_icons_1.ThumbsDownIcon, {}),
99
- outlined: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedThumbsDownIcon, {})
98
+ filled: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiDislikeFillIcon, {}),
99
+ outlined: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiDislikeIcon, {})
100
+ },
101
+ listen: {
102
+ filled: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiVolumeUpFillIcon, {}),
103
+ outlined: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiVolumeUpIcon, {})
104
+ },
105
+ copy: {
106
+ filled: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCopyFillIcon, {}),
107
+ outlined: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiCopyIcon, {})
108
+ },
109
+ edit: {
110
+ filled: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiEditFillIcon, {}),
111
+ outlined: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiEditIcon, {})
112
+ },
113
+ download: {
114
+ filled: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiExportFillIcon, {}),
115
+ outlined: (0, jsx_runtime_1.jsx)(react_icons_1.RhUiExportIcon, {})
100
116
  }
101
117
  };
102
118
  const getIcon = (actionName) => {
@@ -111,7 +127,7 @@ const ResponseActions = (_a) => {
111
127
  // to disappear but the tooltip will remain visible.
112
128
  const getTooltipContainer = () => responseActions.current || document.body;
113
129
  const getTooltipProps = (tooltipProps) => (Object.assign(Object.assign({}, (showActionsOnInteraction && { appendTo: getTooltipContainer })), tooltipProps));
114
- return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: responseActions, className: (0, react_styles_1.css)('pf-chatbot__response-actions', showActionsOnInteraction && 'pf-m-visible-interaction', className) }, props, { children: [positive && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, positive, { ariaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Good response', clickedAriaLabel: (_c = positive.ariaLabel) !== null && _c !== void 0 ? _c : 'Good response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_d = positive.tooltipContent) !== null && _d !== void 0 ? _d : 'Good response', clickedTooltipContent: (_e = positive.clickedTooltipContent) !== null && _e !== void 0 ? _e : 'Good response recorded', tooltipProps: getTooltipProps(positive.tooltipProps), icon: getIcon('positive'), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, negative, { ariaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Bad response', clickedAriaLabel: (_g = negative.ariaLabel) !== null && _g !== void 0 ? _g : 'Bad response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_h = negative.tooltipContent) !== null && _h !== void 0 ? _h : 'Bad response', clickedTooltipContent: (_j = negative.clickedTooltipContent) !== null && _j !== void 0 ? _j : 'Bad response recorded', tooltipProps: getTooltipProps(negative.tooltipProps), icon: getIcon('negative'), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, copy, { ariaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copy', clickedAriaLabel: (_l = copy.ariaLabel) !== null && _l !== void 0 ? _l : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_m = copy.tooltipContent) !== null && _m !== void 0 ? _m : 'Copy', clickedTooltipContent: (_o = copy.clickedTooltipContent) !== null && _o !== void 0 ? _o : 'Copied', tooltipProps: getTooltipProps(copy.tooltipProps), icon: (0, jsx_runtime_1.jsx)(react_icons_1.OutlinedCopyIcon, {}), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), edit && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, edit, { ariaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Edit', clickedAriaLabel: (_q = edit.ariaLabel) !== null && _q !== void 0 ? _q : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_r = edit.tooltipContent) !== null && _r !== void 0 ? _r : 'Edit ', clickedTooltipContent: (_s = edit.clickedTooltipContent) !== null && _s !== void 0 ? _s : 'Editing', tooltipProps: getTooltipProps(edit.tooltipProps), icon: (0, jsx_runtime_1.jsx)(react_icons_1.PencilAltIcon, {}), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, share, { ariaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Share', clickedAriaLabel: (_u = share.ariaLabel) !== null && _u !== void 0 ? _u : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_v = share.tooltipContent) !== null && _v !== void 0 ? _v : 'Share', clickedTooltipContent: (_w = share.clickedTooltipContent) !== null && _w !== void 0 ? _w : 'Shared', tooltipProps: getTooltipProps(share.tooltipProps), icon: (0, jsx_runtime_1.jsx)(react_icons_1.ExternalLinkAltIcon, {}), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, download, { ariaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Download', clickedAriaLabel: (_y = download.ariaLabel) !== null && _y !== void 0 ? _y : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_z = download.tooltipContent) !== null && _z !== void 0 ? _z : 'Download', clickedTooltipContent: (_0 = download.clickedTooltipContent) !== null && _0 !== void 0 ? _0 : 'Downloaded', tooltipProps: getTooltipProps(download.tooltipProps), icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {}), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, listen, { ariaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listen', clickedAriaLabel: (_2 = listen.ariaLabel) !== null && _2 !== void 0 ? _2 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_3 = listen.tooltipContent) !== null && _3 !== void 0 ? _3 : 'Listen', clickedTooltipContent: (_4 = listen.clickedTooltipContent) !== null && _4 !== void 0 ? _4 : 'Listening', tooltipProps: getTooltipProps(listen.tooltipProps), icon: (0, jsx_runtime_1.jsx)(react_icons_1.VolumeUpIcon, {}), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] }))), Object.keys(additionalActions).map((action) => {
130
+ return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: responseActions, className: (0, react_styles_1.css)('pf-chatbot__response-actions', showActionsOnInteraction && 'pf-m-visible-interaction', className) }, props, { children: [positive && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, positive, { ariaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Good response', clickedAriaLabel: (_c = positive.ariaLabel) !== null && _c !== void 0 ? _c : 'Good response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_d = positive.tooltipContent) !== null && _d !== void 0 ? _d : 'Good response', clickedTooltipContent: (_e = positive.clickedTooltipContent) !== null && _e !== void 0 ? _e : 'Good response recorded', tooltipProps: getTooltipProps(positive.tooltipProps), icon: getIcon('positive'), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, negative, { ariaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Bad response', clickedAriaLabel: (_g = negative.ariaLabel) !== null && _g !== void 0 ? _g : 'Bad response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_h = negative.tooltipContent) !== null && _h !== void 0 ? _h : 'Bad response', clickedTooltipContent: (_j = negative.clickedTooltipContent) !== null && _j !== void 0 ? _j : 'Bad response recorded', tooltipProps: getTooltipProps(negative.tooltipProps), icon: getIcon('negative'), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, copy, { ariaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copy', clickedAriaLabel: (_l = copy.ariaLabel) !== null && _l !== void 0 ? _l : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_m = copy.tooltipContent) !== null && _m !== void 0 ? _m : 'Copy', clickedTooltipContent: (_o = copy.clickedTooltipContent) !== null && _o !== void 0 ? _o : 'Copied', tooltipProps: getTooltipProps(copy.tooltipProps), icon: getIcon('copy'), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), edit && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, edit, { ariaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Edit', clickedAriaLabel: (_q = edit.ariaLabel) !== null && _q !== void 0 ? _q : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_r = edit.tooltipContent) !== null && _r !== void 0 ? _r : 'Edit ', clickedTooltipContent: (_s = edit.clickedTooltipContent) !== null && _s !== void 0 ? _s : 'Editing', tooltipProps: getTooltipProps(edit.tooltipProps), icon: getIcon('edit'), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, share, { ariaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Share', clickedAriaLabel: (_u = share.ariaLabel) !== null && _u !== void 0 ? _u : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_v = share.tooltipContent) !== null && _v !== void 0 ? _v : 'Share', clickedTooltipContent: (_w = share.clickedTooltipContent) !== null && _w !== void 0 ? _w : 'Shared', tooltipProps: getTooltipProps(share.tooltipProps), icon: getIcon('download'), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, download, { ariaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Download', clickedAriaLabel: (_y = download.ariaLabel) !== null && _y !== void 0 ? _y : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_z = download.tooltipContent) !== null && _z !== void 0 ? _z : 'Download', clickedTooltipContent: (_0 = download.clickedTooltipContent) !== null && _0 !== void 0 ? _0 : 'Downloaded', tooltipProps: getTooltipProps(download.tooltipProps), icon: getIcon('download'), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && ((0, jsx_runtime_1.jsx)(ResponseActionButton_1.default, Object.assign({}, listen, { ariaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listen', clickedAriaLabel: (_2 = listen.ariaLabel) !== null && _2 !== void 0 ? _2 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_3 = listen.tooltipContent) !== null && _3 !== void 0 ? _3 : 'Listen', clickedTooltipContent: (_4 = listen.clickedTooltipContent) !== null && _4 !== void 0 ? _4 : 'Listening', tooltipProps: getTooltipProps(listen.tooltipProps), icon: getIcon('listen'), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] }))), Object.keys(additionalActions).map((action) => {
115
131
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
116
132
  return ((0, react_1.createElement)(ResponseActionButton_1.default, Object.assign({}, additionalActions[action], { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, clickedAriaLabel: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.clickedAriaLabel, onClick: (e) => { var _a; return handleClick(e, action, (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.onClick); }, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: getTooltipProps((_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps), clickedTooltipContent: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.clickedTooltipContent, icon: (_h = additionalActions[action]) === null || _h === void 0 ? void 0 : _h.icon, isClicked: activeButton === action, ref: (_j = additionalActions[action]) === null || _j === void 0 ? void 0 : _j.ref, "aria-expanded": (_k = additionalActions[action]) === null || _k === void 0 ? void 0 : _k['aria-expanded'], "aria-controls": (_l = additionalActions[action]) === null || _l === void 0 ? void 0 : _l['aria-controls'] })));
117
133
  })] })));
package/dist/cjs/ResponseActions/ResponseActions.test.js CHANGED
@@ -21,17 +21,21 @@ const react_icons_1 = require("@patternfly/react-icons");
21
21
  const Message_1 = __importDefault(require("../Message"));
22
22
  // Mock the icon components
23
23
  jest.mock('@patternfly/react-icons', () => ({
24
- OutlinedThumbsUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "OutlinedThumbsUpIcon" }),
25
- ThumbsUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ThumbsUpIcon" }),
26
- OutlinedThumbsDownIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "OutlinedThumbsDownIcon" }),
27
- ThumbsDownIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ThumbsDownIcon" }),
28
- OutlinedCopyIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "OutlinedCopyIcon" }),
24
+ RhUiLikeIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiLikeIcon" }),
25
+ RhUiLikeFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiLikeFillIcon" }),
26
+ RhUiDislikeIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiDislikeIcon" }),
27
+ RhUiDislikeFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiDislikeFillIcon" }),
28
+ RhUiCopyIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiCopyIcon" }),
29
+ RhUiCopyFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiCopyFillIcon" }),
30
+ RhUiEditIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiEditIcon" }),
31
+ RhUiEditFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiEditFillIcon" }),
32
+ RhUiVolumeUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiVolumeUpIcon" }),
33
+ RhUiVolumeUpFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiVolumeUpFillIcon" }),
34
+ RhUiExportIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiExportIcon" }),
35
+ RhUiExportFillIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RhUiExportFillIcon" }),
29
36
  DownloadIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "DownloadIcon" }),
30
37
  InfoCircleIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "InfoCircleIcon" }),
31
- RedoIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RedoIcon" }),
32
- ExternalLinkAltIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ExternalLinkAltIcon" }),
33
- VolumeUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "VolumeUpIcon" }),
34
- PencilAltIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "PencilAltIcon" })
38
+ RedoIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RedoIcon" })
35
39
  }));
36
40
  const ALL_ACTIONS = [
37
41
  { type: 'positive', label: 'Good response', clickedLabel: 'Good response recorded' },
@@ -363,10 +367,10 @@ describe('ResponseActions', () => {
363
367
  positive: { onClick: jest.fn() },
364
368
  negative: { onClick: jest.fn() }
365
369
  } }));
366
- expect(react_1.screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
367
- expect(react_1.screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
368
- expect(react_1.screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
369
- expect(react_1.screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
370
+ expect(react_1.screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
371
+ expect(react_1.screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
372
+ expect(react_1.screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
373
+ expect(react_1.screen.queryByText('RhUiDislikeFillIcon')).not.toBeInTheDocument();
370
374
  });
371
375
  describe('positive actions', () => {
372
376
  it('should not swap positive icon when clicked and useFilledIconsOnClick is false', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -375,8 +379,8 @@ describe('ResponseActions', () => {
375
379
  positive: { onClick: jest.fn() }
376
380
  }, useFilledIconsOnClick: false }));
377
381
  yield user.click(react_1.screen.getByRole('button', { name: 'Good response' }));
378
- expect(react_1.screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
379
- expect(react_1.screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
382
+ expect(react_1.screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
383
+ expect(react_1.screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
380
384
  }));
381
385
  it('should swap positive icon from outline to filled when clicked with useFilledIconsOnClick', () => __awaiter(void 0, void 0, void 0, function* () {
382
386
  const user = user_event_1.default.setup();
@@ -384,8 +388,8 @@ describe('ResponseActions', () => {
384
388
  positive: { onClick: jest.fn() }
385
389
  }, useFilledIconsOnClick: true }));
386
390
  yield user.click(react_1.screen.getByRole('button', { name: 'Good response' }));
387
- expect(react_1.screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
388
- expect(react_1.screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
391
+ expect(react_1.screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
392
+ expect(react_1.screen.queryByText('RhUiLikeIcon')).not.toBeInTheDocument();
389
393
  }));
390
394
  it('should revert positive icon to outline icon when clicking outside', () => __awaiter(void 0, void 0, void 0, function* () {
391
395
  const user = user_event_1.default.setup();
@@ -393,9 +397,9 @@ describe('ResponseActions', () => {
393
397
  positive: { onClick: jest.fn() }
394
398
  }, useFilledIconsOnClick: true }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "outside", children: "Outside" })] }));
395
399
  yield user.click(react_1.screen.getByRole('button', { name: 'Good response' }));
396
- expect(react_1.screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
400
+ expect(react_1.screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
397
401
  yield user.click(react_1.screen.getByTestId('outside'));
398
- expect(react_1.screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
402
+ expect(react_1.screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
399
403
  }));
400
404
  it('should not revert positive icon to outline icon when clicking outside if persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
401
405
  const user = user_event_1.default.setup();
@@ -403,9 +407,9 @@ describe('ResponseActions', () => {
403
407
  positive: { onClick: jest.fn() }
404
408
  }, persistActionSelection: true, useFilledIconsOnClick: true }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "outside", children: "Outside" })] }));
405
409
  yield user.click(react_1.screen.getByRole('button', { name: 'Good response' }));
406
- expect(react_1.screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
410
+ expect(react_1.screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
407
411
  yield user.click(react_1.screen.getByTestId('outside'));
408
- expect(react_1.screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
412
+ expect(react_1.screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
409
413
  }));
410
414
  describe('negative actions', () => {
411
415
  it('should not swap negative icon when clicked and useFilledIconsOnClick is false', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -414,8 +418,8 @@ describe('ResponseActions', () => {
414
418
  negative: { onClick: jest.fn() }
415
419
  }, useFilledIconsOnClick: false }));
416
420
  yield user.click(react_1.screen.getByRole('button', { name: 'Bad response' }));
417
- expect(react_1.screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
418
- expect(react_1.screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
421
+ expect(react_1.screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
422
+ expect(react_1.screen.queryByText('RhUiDislikeFillIcon')).not.toBeInTheDocument();
419
423
  }));
420
424
  it('should swap negative icon from outline to filled when clicked with useFilledIconsOnClick', () => __awaiter(void 0, void 0, void 0, function* () {
421
425
  const user = user_event_1.default.setup();
@@ -423,8 +427,8 @@ describe('ResponseActions', () => {
423
427
  negative: { onClick: jest.fn() }
424
428
  }, useFilledIconsOnClick: true }));
425
429
  yield user.click(react_1.screen.getByRole('button', { name: 'Bad response' }));
426
- expect(react_1.screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
427
- expect(react_1.screen.queryByText('OutlinedThumbsDownIcon')).not.toBeInTheDocument();
430
+ expect(react_1.screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
431
+ expect(react_1.screen.queryByText('RhUiDislikeIcon')).not.toBeInTheDocument();
428
432
  }));
429
433
  it('should revert negative icon to outline when clicking outside', () => __awaiter(void 0, void 0, void 0, function* () {
430
434
  const user = user_event_1.default.setup();
@@ -432,9 +436,9 @@ describe('ResponseActions', () => {
432
436
  negative: { onClick: jest.fn() }
433
437
  }, useFilledIconsOnClick: true }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "outside", children: "Outside" })] }));
434
438
  yield user.click(react_1.screen.getByRole('button', { name: 'Bad response' }));
435
- expect(react_1.screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
439
+ expect(react_1.screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
436
440
  yield user.click(react_1.screen.getByTestId('outside'));
437
- expect(react_1.screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
441
+ expect(react_1.screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
438
442
  }));
439
443
  it('should not revert negative icon to outline icon when clicking outside if persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
440
444
  const user = user_event_1.default.setup();
@@ -442,9 +446,9 @@ describe('ResponseActions', () => {
442
446
  negative: { onClick: jest.fn() }
443
447
  }, persistActionSelection: true, useFilledIconsOnClick: true }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "outside", children: "Outside" })] }));
444
448
  yield user.click(react_1.screen.getByRole('button', { name: 'Bad response' }));
445
- expect(react_1.screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
449
+ expect(react_1.screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
446
450
  yield user.click(react_1.screen.getByTestId('outside'));
447
- expect(react_1.screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
451
+ expect(react_1.screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
448
452
  }));
449
453
  });
450
454
  });
package/dist/esm/Message/Message.test.js CHANGED
@@ -19,15 +19,18 @@ import rehypeExternalLinks from '../__mocks__/rehype-external-links';
19
19
  import { AlertActionLink, Button, CodeBlockAction } from '@patternfly/react-core';
20
20
  // Mock the icon components
21
21
  jest.mock('@patternfly/react-icons', () => ({
22
- OutlinedThumbsUpIcon: () => _jsx("div", { children: "OutlinedThumbsUpIcon" }),
23
- ThumbsUpIcon: () => _jsx("div", { children: "ThumbsUpIcon" }),
24
- OutlinedThumbsDownIcon: () => _jsx("div", { children: "OutlinedThumbsDownIcon" }),
25
- ThumbsDownIcon: () => _jsx("div", { children: "ThumbsDownIcon" }),
26
- OutlinedCopyIcon: () => _jsx("div", { children: "OutlinedCopyIcon" }),
27
- DownloadIcon: () => _jsx("div", { children: "DownloadIcon" }),
28
- ExternalLinkAltIcon: () => _jsx("div", { children: "ExternalLinkAltIcon" }),
29
- VolumeUpIcon: () => _jsx("div", { children: "VolumeUpIcon" }),
30
- PencilAltIcon: () => _jsx("div", { children: "PencilAltIcon" }),
22
+ RhUiLikeIcon: () => _jsx("div", { children: "RhUiLikeIcon" }),
23
+ RhUiLikeFillIcon: () => _jsx("div", { children: "RhUiLikeFillIcon" }),
24
+ RhUiDislikeIcon: () => _jsx("div", { children: "RhUiDislikeIcon" }),
25
+ RhUiDislikeFillIcon: () => _jsx("div", { children: "RhUiDislikeFillIcon" }),
26
+ RhUiCopyIcon: () => _jsx("div", { children: "RhUiCopyIcon" }),
27
+ RhUiCopyFillIcon: () => _jsx("div", { children: "RhUiCopyFillIcon" }),
28
+ RhUiEditIcon: () => _jsx("div", { children: "RhUiEditIcon" }),
29
+ RhUiEditFillIcon: () => _jsx("div", { children: "RhUiEditFillIcon" }),
30
+ RhUiVolumeUpIcon: () => _jsx("div", { children: "RhUiVolumeUpIcon" }),
31
+ RhUiVolumeUpFillIcon: () => _jsx("div", { children: "RhUiVolumeUpFillIcon" }),
32
+ RhUiExportIcon: () => _jsx("div", { children: "RhUiExportIcon" }),
33
+ RhUiExportFillIcon: () => _jsx("div", { children: "RhUiExportFillIcon" }),
31
34
  CheckIcon: () => _jsx("div", { children: "CheckIcon" }),
32
35
  CloseIcon: () => _jsx("div", { children: "CloseIcon" }),
33
36
  ExternalLinkSquareAltIcon: () => _jsx("div", { children: "ExternalLinkSquareAltIcon" }),
@@ -1048,10 +1051,10 @@ describe('Message', () => {
1048
1051
  render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
1049
1052
  positive: { onClick: jest.fn() }
1050
1053
  } }));
1051
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
1054
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
1052
1055
  yield user.click(screen.getByRole('button', { name: /Good response/i }));
1053
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
1054
- expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
1056
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
1057
+ expect(screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
1055
1058
  }));
1056
1059
  it('should swap icons when useFilledIconsOnClick is true', () => __awaiter(void 0, void 0, void 0, function* () {
1057
1060
  const user = userEvent.setup();
@@ -1059,8 +1062,8 @@ describe('Message', () => {
1059
1062
  positive: { onClick: jest.fn() }
1060
1063
  }, useFilledIconsOnClick: true }));
1061
1064
  yield user.click(screen.getByRole('button', { name: /Good response/i }));
1062
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
1063
- expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
1065
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
1066
+ expect(screen.queryByText('RhUiLikeIcon')).not.toBeInTheDocument();
1064
1067
  }));
1065
1068
  it('should apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is true', () => {
1066
1069
  render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: true, actions: {
package/dist/esm/ResponseActions/ResponseActions.js CHANGED
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { createElement as _createElement } from "react";
13
13
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
14
14
  import { useEffect, useRef, useState } from 'react';
15
- import { ExternalLinkAltIcon, VolumeUpIcon, OutlinedThumbsUpIcon, ThumbsUpIcon, OutlinedThumbsDownIcon, ThumbsDownIcon, OutlinedCopyIcon, DownloadIcon, PencilAltIcon } from '@patternfly/react-icons';
15
+ import { RhUiLikeIcon, RhUiLikeFillIcon, RhUiDislikeIcon, RhUiDislikeFillIcon, RhUiCopyIcon, RhUiCopyFillIcon, RhUiEditIcon, RhUiEditFillIcon, RhUiVolumeUpIcon, RhUiVolumeUpFillIcon, RhUiExportIcon, RhUiExportFillIcon } from '@patternfly/react-icons';
16
16
  import ResponseActionButton from './ResponseActionButton';
17
17
  import { css } from '@patternfly/react-styles';
18
18
  export const ResponseActions = (_a) => {
@@ -85,12 +85,28 @@ export const ResponseActions = (_a) => {
85
85
  };
86
86
  const iconMap = {
87
87
  positive: {
88
- filled: _jsx(ThumbsUpIcon, {}),
89
- outlined: _jsx(OutlinedThumbsUpIcon, {})
88
+ filled: _jsx(RhUiLikeFillIcon, {}),
89
+ outlined: _jsx(RhUiLikeIcon, {})
90
90
  },
91
91
  negative: {
92
- filled: _jsx(ThumbsDownIcon, {}),
93
- outlined: _jsx(OutlinedThumbsDownIcon, {})
92
+ filled: _jsx(RhUiDislikeFillIcon, {}),
93
+ outlined: _jsx(RhUiDislikeIcon, {})
94
+ },
95
+ listen: {
96
+ filled: _jsx(RhUiVolumeUpFillIcon, {}),
97
+ outlined: _jsx(RhUiVolumeUpIcon, {})
98
+ },
99
+ copy: {
100
+ filled: _jsx(RhUiCopyFillIcon, {}),
101
+ outlined: _jsx(RhUiCopyIcon, {})
102
+ },
103
+ edit: {
104
+ filled: _jsx(RhUiEditFillIcon, {}),
105
+ outlined: _jsx(RhUiEditIcon, {})
106
+ },
107
+ download: {
108
+ filled: _jsx(RhUiExportFillIcon, {}),
109
+ outlined: _jsx(RhUiExportIcon, {})
94
110
  }
95
111
  };
96
112
  const getIcon = (actionName) => {
@@ -105,7 +121,7 @@ export const ResponseActions = (_a) => {
105
121
  // to disappear but the tooltip will remain visible.
106
122
  const getTooltipContainer = () => responseActions.current || document.body;
107
123
  const getTooltipProps = (tooltipProps) => (Object.assign(Object.assign({}, (showActionsOnInteraction && { appendTo: getTooltipContainer })), tooltipProps));
108
- return (_jsxs("div", Object.assign({ ref: responseActions, className: css('pf-chatbot__response-actions', showActionsOnInteraction && 'pf-m-visible-interaction', className) }, props, { children: [positive && (_jsx(ResponseActionButton, Object.assign({}, positive, { ariaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Good response', clickedAriaLabel: (_c = positive.ariaLabel) !== null && _c !== void 0 ? _c : 'Good response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_d = positive.tooltipContent) !== null && _d !== void 0 ? _d : 'Good response', clickedTooltipContent: (_e = positive.clickedTooltipContent) !== null && _e !== void 0 ? _e : 'Good response recorded', tooltipProps: getTooltipProps(positive.tooltipProps), icon: getIcon('positive'), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && (_jsx(ResponseActionButton, Object.assign({}, negative, { ariaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Bad response', clickedAriaLabel: (_g = negative.ariaLabel) !== null && _g !== void 0 ? _g : 'Bad response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_h = negative.tooltipContent) !== null && _h !== void 0 ? _h : 'Bad response', clickedTooltipContent: (_j = negative.clickedTooltipContent) !== null && _j !== void 0 ? _j : 'Bad response recorded', tooltipProps: getTooltipProps(negative.tooltipProps), icon: getIcon('negative'), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && (_jsx(ResponseActionButton, Object.assign({}, copy, { ariaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copy', clickedAriaLabel: (_l = copy.ariaLabel) !== null && _l !== void 0 ? _l : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_m = copy.tooltipContent) !== null && _m !== void 0 ? _m : 'Copy', clickedTooltipContent: (_o = copy.clickedTooltipContent) !== null && _o !== void 0 ? _o : 'Copied', tooltipProps: getTooltipProps(copy.tooltipProps), icon: _jsx(OutlinedCopyIcon, {}), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), edit && (_jsx(ResponseActionButton, Object.assign({}, edit, { ariaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Edit', clickedAriaLabel: (_q = edit.ariaLabel) !== null && _q !== void 0 ? _q : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_r = edit.tooltipContent) !== null && _r !== void 0 ? _r : 'Edit ', clickedTooltipContent: (_s = edit.clickedTooltipContent) !== null && _s !== void 0 ? _s : 'Editing', tooltipProps: getTooltipProps(edit.tooltipProps), icon: _jsx(PencilAltIcon, {}), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && (_jsx(ResponseActionButton, Object.assign({}, share, { ariaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Share', clickedAriaLabel: (_u = share.ariaLabel) !== null && _u !== void 0 ? _u : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_v = share.tooltipContent) !== null && _v !== void 0 ? _v : 'Share', clickedTooltipContent: (_w = share.clickedTooltipContent) !== null && _w !== void 0 ? _w : 'Shared', tooltipProps: getTooltipProps(share.tooltipProps), icon: _jsx(ExternalLinkAltIcon, {}), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && (_jsx(ResponseActionButton, Object.assign({}, download, { ariaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Download', clickedAriaLabel: (_y = download.ariaLabel) !== null && _y !== void 0 ? _y : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_z = download.tooltipContent) !== null && _z !== void 0 ? _z : 'Download', clickedTooltipContent: (_0 = download.clickedTooltipContent) !== null && _0 !== void 0 ? _0 : 'Downloaded', tooltipProps: getTooltipProps(download.tooltipProps), icon: _jsx(DownloadIcon, {}), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && (_jsx(ResponseActionButton, Object.assign({}, listen, { ariaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listen', clickedAriaLabel: (_2 = listen.ariaLabel) !== null && _2 !== void 0 ? _2 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_3 = listen.tooltipContent) !== null && _3 !== void 0 ? _3 : 'Listen', clickedTooltipContent: (_4 = listen.clickedTooltipContent) !== null && _4 !== void 0 ? _4 : 'Listening', tooltipProps: getTooltipProps(listen.tooltipProps), icon: _jsx(VolumeUpIcon, {}), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] }))), Object.keys(additionalActions).map((action) => {
124
+ return (_jsxs("div", Object.assign({ ref: responseActions, className: css('pf-chatbot__response-actions', showActionsOnInteraction && 'pf-m-visible-interaction', className) }, props, { children: [positive && (_jsx(ResponseActionButton, Object.assign({}, positive, { ariaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Good response', clickedAriaLabel: (_c = positive.ariaLabel) !== null && _c !== void 0 ? _c : 'Good response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_d = positive.tooltipContent) !== null && _d !== void 0 ? _d : 'Good response', clickedTooltipContent: (_e = positive.clickedTooltipContent) !== null && _e !== void 0 ? _e : 'Good response recorded', tooltipProps: getTooltipProps(positive.tooltipProps), icon: getIcon('positive'), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && (_jsx(ResponseActionButton, Object.assign({}, negative, { ariaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Bad response', clickedAriaLabel: (_g = negative.ariaLabel) !== null && _g !== void 0 ? _g : 'Bad response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_h = negative.tooltipContent) !== null && _h !== void 0 ? _h : 'Bad response', clickedTooltipContent: (_j = negative.clickedTooltipContent) !== null && _j !== void 0 ? _j : 'Bad response recorded', tooltipProps: getTooltipProps(negative.tooltipProps), icon: getIcon('negative'), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && (_jsx(ResponseActionButton, Object.assign({}, copy, { ariaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copy', clickedAriaLabel: (_l = copy.ariaLabel) !== null && _l !== void 0 ? _l : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_m = copy.tooltipContent) !== null && _m !== void 0 ? _m : 'Copy', clickedTooltipContent: (_o = copy.clickedTooltipContent) !== null && _o !== void 0 ? _o : 'Copied', tooltipProps: getTooltipProps(copy.tooltipProps), icon: getIcon('copy'), isClicked: activeButton === 'copy', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] }))), edit && (_jsx(ResponseActionButton, Object.assign({}, edit, { ariaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Edit', clickedAriaLabel: (_q = edit.ariaLabel) !== null && _q !== void 0 ? _q : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_r = edit.tooltipContent) !== null && _r !== void 0 ? _r : 'Edit ', clickedTooltipContent: (_s = edit.clickedTooltipContent) !== null && _s !== void 0 ? _s : 'Editing', tooltipProps: getTooltipProps(edit.tooltipProps), icon: getIcon('edit'), isClicked: activeButton === 'edit', ref: edit.ref, "aria-expanded": edit['aria-expanded'], "aria-controls": edit['aria-controls'] }))), share && (_jsx(ResponseActionButton, Object.assign({}, share, { ariaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Share', clickedAriaLabel: (_u = share.ariaLabel) !== null && _u !== void 0 ? _u : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_v = share.tooltipContent) !== null && _v !== void 0 ? _v : 'Share', clickedTooltipContent: (_w = share.clickedTooltipContent) !== null && _w !== void 0 ? _w : 'Shared', tooltipProps: getTooltipProps(share.tooltipProps), icon: getIcon('download'), isClicked: activeButton === 'share', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] }))), download && (_jsx(ResponseActionButton, Object.assign({}, download, { ariaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Download', clickedAriaLabel: (_y = download.ariaLabel) !== null && _y !== void 0 ? _y : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_z = download.tooltipContent) !== null && _z !== void 0 ? _z : 'Download', clickedTooltipContent: (_0 = download.clickedTooltipContent) !== null && _0 !== void 0 ? _0 : 'Downloaded', tooltipProps: getTooltipProps(download.tooltipProps), icon: getIcon('download'), isClicked: activeButton === 'download', ref: download.ref, "aria-expanded": download['aria-expanded'], "aria-controls": download['aria-controls'] }))), listen && (_jsx(ResponseActionButton, Object.assign({}, listen, { ariaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listen', clickedAriaLabel: (_2 = listen.ariaLabel) !== null && _2 !== void 0 ? _2 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_3 = listen.tooltipContent) !== null && _3 !== void 0 ? _3 : 'Listen', clickedTooltipContent: (_4 = listen.clickedTooltipContent) !== null && _4 !== void 0 ? _4 : 'Listening', tooltipProps: getTooltipProps(listen.tooltipProps), icon: getIcon('listen'), isClicked: activeButton === 'listen', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] }))), Object.keys(additionalActions).map((action) => {
109
125
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
110
126
  return (_createElement(ResponseActionButton, Object.assign({}, additionalActions[action], { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, clickedAriaLabel: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.clickedAriaLabel, onClick: (e) => { var _a; return handleClick(e, action, (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.onClick); }, className: (_c = additionalActions[action]) === null || _c === void 0 ? void 0 : _c.className, isDisabled: (_d = additionalActions[action]) === null || _d === void 0 ? void 0 : _d.isDisabled, tooltipContent: (_e = additionalActions[action]) === null || _e === void 0 ? void 0 : _e.tooltipContent, tooltipProps: getTooltipProps((_f = additionalActions[action]) === null || _f === void 0 ? void 0 : _f.tooltipProps), clickedTooltipContent: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.clickedTooltipContent, icon: (_h = additionalActions[action]) === null || _h === void 0 ? void 0 : _h.icon, isClicked: activeButton === action, ref: (_j = additionalActions[action]) === null || _j === void 0 ? void 0 : _j.ref, "aria-expanded": (_k = additionalActions[action]) === null || _k === void 0 ? void 0 : _k['aria-expanded'], "aria-controls": (_l = additionalActions[action]) === null || _l === void 0 ? void 0 : _l['aria-controls'] })));
111
127
  })] })));
package/dist/esm/ResponseActions/ResponseActions.test.js CHANGED
@@ -16,17 +16,21 @@ import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons'
16
16
  import Message from '../Message';
17
17
  // Mock the icon components
18
18
  jest.mock('@patternfly/react-icons', () => ({
19
- OutlinedThumbsUpIcon: () => _jsx("div", { children: "OutlinedThumbsUpIcon" }),
20
- ThumbsUpIcon: () => _jsx("div", { children: "ThumbsUpIcon" }),
21
- OutlinedThumbsDownIcon: () => _jsx("div", { children: "OutlinedThumbsDownIcon" }),
22
- ThumbsDownIcon: () => _jsx("div", { children: "ThumbsDownIcon" }),
23
- OutlinedCopyIcon: () => _jsx("div", { children: "OutlinedCopyIcon" }),
19
+ RhUiLikeIcon: () => _jsx("div", { children: "RhUiLikeIcon" }),
20
+ RhUiLikeFillIcon: () => _jsx("div", { children: "RhUiLikeFillIcon" }),
21
+ RhUiDislikeIcon: () => _jsx("div", { children: "RhUiDislikeIcon" }),
22
+ RhUiDislikeFillIcon: () => _jsx("div", { children: "RhUiDislikeFillIcon" }),
23
+ RhUiCopyIcon: () => _jsx("div", { children: "RhUiCopyIcon" }),
24
+ RhUiCopyFillIcon: () => _jsx("div", { children: "RhUiCopyFillIcon" }),
25
+ RhUiEditIcon: () => _jsx("div", { children: "RhUiEditIcon" }),
26
+ RhUiEditFillIcon: () => _jsx("div", { children: "RhUiEditFillIcon" }),
27
+ RhUiVolumeUpIcon: () => _jsx("div", { children: "RhUiVolumeUpIcon" }),
28
+ RhUiVolumeUpFillIcon: () => _jsx("div", { children: "RhUiVolumeUpFillIcon" }),
29
+ RhUiExportIcon: () => _jsx("div", { children: "RhUiExportIcon" }),
30
+ RhUiExportFillIcon: () => _jsx("div", { children: "RhUiExportFillIcon" }),
24
31
  DownloadIcon: () => _jsx("div", { children: "DownloadIcon" }),
25
32
  InfoCircleIcon: () => _jsx("div", { children: "InfoCircleIcon" }),
26
- RedoIcon: () => _jsx("div", { children: "RedoIcon" }),
27
- ExternalLinkAltIcon: () => _jsx("div", { children: "ExternalLinkAltIcon" }),
28
- VolumeUpIcon: () => _jsx("div", { children: "VolumeUpIcon" }),
29
- PencilAltIcon: () => _jsx("div", { children: "PencilAltIcon" })
33
+ RedoIcon: () => _jsx("div", { children: "RedoIcon" })
30
34
  }));
31
35
  const ALL_ACTIONS = [
32
36
  { type: 'positive', label: 'Good response', clickedLabel: 'Good response recorded' },
@@ -358,10 +362,10 @@ describe('ResponseActions', () => {
358
362
  positive: { onClick: jest.fn() },
359
363
  negative: { onClick: jest.fn() }
360
364
  } }));
361
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
362
- expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
363
- expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
364
- expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
365
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
366
+ expect(screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
367
+ expect(screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
368
+ expect(screen.queryByText('RhUiDislikeFillIcon')).not.toBeInTheDocument();
365
369
  });
366
370
  describe('positive actions', () => {
367
371
  it('should not swap positive icon when clicked and useFilledIconsOnClick is false', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -370,8 +374,8 @@ describe('ResponseActions', () => {
370
374
  positive: { onClick: jest.fn() }
371
375
  }, useFilledIconsOnClick: false }));
372
376
  yield user.click(screen.getByRole('button', { name: 'Good response' }));
373
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
374
- expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
377
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
378
+ expect(screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
375
379
  }));
376
380
  it('should swap positive icon from outline to filled when clicked with useFilledIconsOnClick', () => __awaiter(void 0, void 0, void 0, function* () {
377
381
  const user = userEvent.setup();
@@ -379,8 +383,8 @@ describe('ResponseActions', () => {
379
383
  positive: { onClick: jest.fn() }
380
384
  }, useFilledIconsOnClick: true }));
381
385
  yield user.click(screen.getByRole('button', { name: 'Good response' }));
382
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
383
- expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
386
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
387
+ expect(screen.queryByText('RhUiLikeIcon')).not.toBeInTheDocument();
384
388
  }));
385
389
  it('should revert positive icon to outline icon when clicking outside', () => __awaiter(void 0, void 0, void 0, function* () {
386
390
  const user = userEvent.setup();
@@ -388,9 +392,9 @@ describe('ResponseActions', () => {
388
392
  positive: { onClick: jest.fn() }
389
393
  }, useFilledIconsOnClick: true }), _jsx("div", { "data-testid": "outside", children: "Outside" })] }));
390
394
  yield user.click(screen.getByRole('button', { name: 'Good response' }));
391
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
395
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
392
396
  yield user.click(screen.getByTestId('outside'));
393
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
397
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
394
398
  }));
395
399
  it('should not revert positive icon to outline icon when clicking outside if persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
396
400
  const user = userEvent.setup();
@@ -398,9 +402,9 @@ describe('ResponseActions', () => {
398
402
  positive: { onClick: jest.fn() }
399
403
  }, persistActionSelection: true, useFilledIconsOnClick: true }), _jsx("div", { "data-testid": "outside", children: "Outside" })] }));
400
404
  yield user.click(screen.getByRole('button', { name: 'Good response' }));
401
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
405
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
402
406
  yield user.click(screen.getByTestId('outside'));
403
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
407
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
404
408
  }));
405
409
  describe('negative actions', () => {
406
410
  it('should not swap negative icon when clicked and useFilledIconsOnClick is false', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -409,8 +413,8 @@ describe('ResponseActions', () => {
409
413
  negative: { onClick: jest.fn() }
410
414
  }, useFilledIconsOnClick: false }));
411
415
  yield user.click(screen.getByRole('button', { name: 'Bad response' }));
412
- expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
413
- expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
416
+ expect(screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
417
+ expect(screen.queryByText('RhUiDislikeFillIcon')).not.toBeInTheDocument();
414
418
  }));
415
419
  it('should swap negative icon from outline to filled when clicked with useFilledIconsOnClick', () => __awaiter(void 0, void 0, void 0, function* () {
416
420
  const user = userEvent.setup();
@@ -418,8 +422,8 @@ describe('ResponseActions', () => {
418
422
  negative: { onClick: jest.fn() }
419
423
  }, useFilledIconsOnClick: true }));
420
424
  yield user.click(screen.getByRole('button', { name: 'Bad response' }));
421
- expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
422
- expect(screen.queryByText('OutlinedThumbsDownIcon')).not.toBeInTheDocument();
425
+ expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
426
+ expect(screen.queryByText('RhUiDislikeIcon')).not.toBeInTheDocument();
423
427
  }));
424
428
  it('should revert negative icon to outline when clicking outside', () => __awaiter(void 0, void 0, void 0, function* () {
425
429
  const user = userEvent.setup();
@@ -427,9 +431,9 @@ describe('ResponseActions', () => {
427
431
  negative: { onClick: jest.fn() }
428
432
  }, useFilledIconsOnClick: true }), _jsx("div", { "data-testid": "outside", children: "Outside" })] }));
429
433
  yield user.click(screen.getByRole('button', { name: 'Bad response' }));
430
- expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
434
+ expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
431
435
  yield user.click(screen.getByTestId('outside'));
432
- expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
436
+ expect(screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
433
437
  }));
434
438
  it('should not revert negative icon to outline icon when clicking outside if persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
435
439
  const user = userEvent.setup();
@@ -437,9 +441,9 @@ describe('ResponseActions', () => {
437
441
  negative: { onClick: jest.fn() }
438
442
  }, persistActionSelection: true, useFilledIconsOnClick: true }), _jsx("div", { "data-testid": "outside", children: "Outside" })] }));
439
443
  yield user.click(screen.getByRole('button', { name: 'Bad response' }));
440
- expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
444
+ expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
441
445
  yield user.click(screen.getByTestId('outside'));
442
- expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
446
+ expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
443
447
  }));
444
448
  });
445
449
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/chatbot",
3
- "version": "6.8.0-prerelease.1",
3
+ "version": "6.8.0-prerelease.3",
4
4
  "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/patternfly-a11y.config.js CHANGED
@@ -22,7 +22,8 @@ module.exports = {
22
22
  'color-contrast',
23
23
  'landmark-no-duplicate-main',
24
24
  'landmark-main-is-top-level',
25
- 'scrollable-region-focusable'
25
+ 'scrollable-region-focusable',
26
+ 'target-size' // See if we can remove once https://github.com/patternfly/patternfly/issues/8494 is resolved
26
27
  ].join(','),
27
28
  ignoreIncomplete: true
28
29
  };
package/src/Message/Message.test.tsx CHANGED
@@ -11,15 +11,18 @@ import { DeepThinkingProps } from '../DeepThinking';
11
11
 
12
12
  // Mock the icon components
13
13
  jest.mock('@patternfly/react-icons', () => ({
14
- OutlinedThumbsUpIcon: () => <div>OutlinedThumbsUpIcon</div>,
15
- ThumbsUpIcon: () => <div>ThumbsUpIcon</div>,
16
- OutlinedThumbsDownIcon: () => <div>OutlinedThumbsDownIcon</div>,
17
- ThumbsDownIcon: () => <div>ThumbsDownIcon</div>,
18
- OutlinedCopyIcon: () => <div>OutlinedCopyIcon</div>,
19
- DownloadIcon: () => <div>DownloadIcon</div>,
20
- ExternalLinkAltIcon: () => <div>ExternalLinkAltIcon</div>,
21
- VolumeUpIcon: () => <div>VolumeUpIcon</div>,
22
- PencilAltIcon: () => <div>PencilAltIcon</div>,
14
+ RhUiLikeIcon: () => <div>RhUiLikeIcon</div>,
15
+ RhUiLikeFillIcon: () => <div>RhUiLikeFillIcon</div>,
16
+ RhUiDislikeIcon: () => <div>RhUiDislikeIcon</div>,
17
+ RhUiDislikeFillIcon: () => <div>RhUiDislikeFillIcon</div>,
18
+ RhUiCopyIcon: () => <div>RhUiCopyIcon</div>,
19
+ RhUiCopyFillIcon: () => <div>RhUiCopyFillIcon</div>,
20
+ RhUiEditIcon: () => <div>RhUiEditIcon</div>,
21
+ RhUiEditFillIcon: () => <div>RhUiEditFillIcon</div>,
22
+ RhUiVolumeUpIcon: () => <div>RhUiVolumeUpIcon</div>,
23
+ RhUiVolumeUpFillIcon: () => <div>RhUiVolumeUpFillIcon</div>,
24
+ RhUiExportIcon: () => <div>RhUiExportIcon</div>,
25
+ RhUiExportFillIcon: () => <div>RhUiExportFillIcon</div>,
23
26
  CheckIcon: () => <div>CheckIcon</div>,
24
27
  CloseIcon: () => <div>CloseIcon</div>,
25
28
  ExternalLinkSquareAltIcon: () => <div>ExternalLinkSquareAltIcon</div>,
@@ -1423,12 +1426,12 @@ describe('Message', () => {
1423
1426
  />
1424
1427
  );
1425
1428
 
1426
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
1429
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
1427
1430
 
1428
1431
  await user.click(screen.getByRole('button', { name: /Good response/i }));
1429
1432
 
1430
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
1431
- expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
1433
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
1434
+ expect(screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
1432
1435
  });
1433
1436
 
1434
1437
  it('should swap icons when useFilledIconsOnClick is true', async () => {
@@ -1449,8 +1452,8 @@ describe('Message', () => {
1449
1452
 
1450
1453
  await user.click(screen.getByRole('button', { name: /Good response/i }));
1451
1454
 
1452
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
1453
- expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
1455
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
1456
+ expect(screen.queryByText('RhUiLikeIcon')).not.toBeInTheDocument();
1454
1457
  });
1455
1458
 
1456
1459
  it('should apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is true', () => {
package/src/ResponseActions/ResponseActions.test.tsx CHANGED
@@ -7,17 +7,21 @@ import Message from '../Message';
7
7
 
8
8
  // Mock the icon components
9
9
  jest.mock('@patternfly/react-icons', () => ({
10
- OutlinedThumbsUpIcon: () => <div>OutlinedThumbsUpIcon</div>,
11
- ThumbsUpIcon: () => <div>ThumbsUpIcon</div>,
12
- OutlinedThumbsDownIcon: () => <div>OutlinedThumbsDownIcon</div>,
13
- ThumbsDownIcon: () => <div>ThumbsDownIcon</div>,
14
- OutlinedCopyIcon: () => <div>OutlinedCopyIcon</div>,
10
+ RhUiLikeIcon: () => <div>RhUiLikeIcon</div>,
11
+ RhUiLikeFillIcon: () => <div>RhUiLikeFillIcon</div>,
12
+ RhUiDislikeIcon: () => <div>RhUiDislikeIcon</div>,
13
+ RhUiDislikeFillIcon: () => <div>RhUiDislikeFillIcon</div>,
14
+ RhUiCopyIcon: () => <div>RhUiCopyIcon</div>,
15
+ RhUiCopyFillIcon: () => <div>RhUiCopyFillIcon</div>,
16
+ RhUiEditIcon: () => <div>RhUiEditIcon</div>,
17
+ RhUiEditFillIcon: () => <div>RhUiEditFillIcon</div>,
18
+ RhUiVolumeUpIcon: () => <div>RhUiVolumeUpIcon</div>,
19
+ RhUiVolumeUpFillIcon: () => <div>RhUiVolumeUpFillIcon</div>,
20
+ RhUiExportIcon: () => <div>RhUiExportIcon</div>,
21
+ RhUiExportFillIcon: () => <div>RhUiExportFillIcon</div>,
15
22
  DownloadIcon: () => <div>DownloadIcon</div>,
16
23
  InfoCircleIcon: () => <div>InfoCircleIcon</div>,
17
- RedoIcon: () => <div>RedoIcon</div>,
18
- ExternalLinkAltIcon: () => <div>ExternalLinkAltIcon</div>,
19
- VolumeUpIcon: () => <div>VolumeUpIcon</div>,
20
- PencilAltIcon: () => <div>PencilAltIcon</div>
24
+ RedoIcon: () => <div>RedoIcon</div>
21
25
  }));
22
26
 
23
27
  const ALL_ACTIONS = [
@@ -507,11 +511,11 @@ describe('ResponseActions', () => {
507
511
  />
508
512
  );
509
513
 
510
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
511
- expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
514
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
515
+ expect(screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
512
516
 
513
- expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
514
- expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
517
+ expect(screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
518
+ expect(screen.queryByText('RhUiDislikeFillIcon')).not.toBeInTheDocument();
515
519
  });
516
520
 
517
521
  describe('positive actions', () => {
@@ -529,8 +533,8 @@ describe('ResponseActions', () => {
529
533
 
530
534
  await user.click(screen.getByRole('button', { name: 'Good response' }));
531
535
 
532
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
533
- expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
536
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
537
+ expect(screen.queryByText('RhUiLikeFillIcon')).not.toBeInTheDocument();
534
538
  });
535
539
 
536
540
  it('should swap positive icon from outline to filled when clicked with useFilledIconsOnClick', async () => {
@@ -547,8 +551,8 @@ describe('ResponseActions', () => {
547
551
 
548
552
  await user.click(screen.getByRole('button', { name: 'Good response' }));
549
553
 
550
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
551
- expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
554
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
555
+ expect(screen.queryByText('RhUiLikeIcon')).not.toBeInTheDocument();
552
556
  });
553
557
 
554
558
  it('should revert positive icon to outline icon when clicking outside', async () => {
@@ -567,10 +571,10 @@ describe('ResponseActions', () => {
567
571
  );
568
572
 
569
573
  await user.click(screen.getByRole('button', { name: 'Good response' }));
570
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
574
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
571
575
 
572
576
  await user.click(screen.getByTestId('outside'));
573
- expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
577
+ expect(screen.getByText('RhUiLikeIcon')).toBeInTheDocument();
574
578
  });
575
579
 
576
580
  it('should not revert positive icon to outline icon when clicking outside if persistActionSelection is true', async () => {
@@ -590,10 +594,10 @@ describe('ResponseActions', () => {
590
594
  );
591
595
 
592
596
  await user.click(screen.getByRole('button', { name: 'Good response' }));
593
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
597
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
594
598
 
595
599
  await user.click(screen.getByTestId('outside'));
596
- expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
600
+ expect(screen.getByText('RhUiLikeFillIcon')).toBeInTheDocument();
597
601
  });
598
602
 
599
603
  describe('negative actions', () => {
@@ -611,8 +615,8 @@ describe('ResponseActions', () => {
611
615
 
612
616
  await user.click(screen.getByRole('button', { name: 'Bad response' }));
613
617
 
614
- expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
615
- expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
618
+ expect(screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
619
+ expect(screen.queryByText('RhUiDislikeFillIcon')).not.toBeInTheDocument();
616
620
  });
617
621
 
618
622
  it('should swap negative icon from outline to filled when clicked with useFilledIconsOnClick', async () => {
@@ -629,8 +633,8 @@ describe('ResponseActions', () => {
629
633
 
630
634
  await user.click(screen.getByRole('button', { name: 'Bad response' }));
631
635
 
632
- expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
633
- expect(screen.queryByText('OutlinedThumbsDownIcon')).not.toBeInTheDocument();
636
+ expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
637
+ expect(screen.queryByText('RhUiDislikeIcon')).not.toBeInTheDocument();
634
638
  });
635
639
 
636
640
  it('should revert negative icon to outline when clicking outside', async () => {
@@ -649,10 +653,10 @@ describe('ResponseActions', () => {
649
653
  );
650
654
 
651
655
  await user.click(screen.getByRole('button', { name: 'Bad response' }));
652
- expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
656
+ expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
653
657
 
654
658
  await user.click(screen.getByTestId('outside'));
655
- expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
659
+ expect(screen.getByText('RhUiDislikeIcon')).toBeInTheDocument();
656
660
  });
657
661
 
658
662
  it('should not revert negative icon to outline icon when clicking outside if persistActionSelection is true', async () => {
@@ -672,10 +676,10 @@ describe('ResponseActions', () => {
672
676
  );
673
677
 
674
678
  await user.click(screen.getByRole('button', { name: 'Bad response' }));
675
- expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
679
+ expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
676
680
 
677
681
  await user.click(screen.getByTestId('outside'));
678
- expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
682
+ expect(screen.getByText('RhUiDislikeFillIcon')).toBeInTheDocument();
679
683
  });
680
684
  });
681
685
  });
package/src/ResponseActions/ResponseActions.tsx CHANGED
@@ -1,15 +1,18 @@
1
1
  import type { FunctionComponent, MouseEvent } from 'react';
2
2
  import { useEffect, useRef, useState } from 'react';
3
3
  import {
4
- ExternalLinkAltIcon,
5
- VolumeUpIcon,
6
- OutlinedThumbsUpIcon,
7
- ThumbsUpIcon,
8
- OutlinedThumbsDownIcon,
9
- ThumbsDownIcon,
10
- OutlinedCopyIcon,
11
- DownloadIcon,
12
- PencilAltIcon
4
+ RhUiLikeIcon,
5
+ RhUiLikeFillIcon,
6
+ RhUiDislikeIcon,
7
+ RhUiDislikeFillIcon,
8
+ RhUiCopyIcon,
9
+ RhUiCopyFillIcon,
10
+ RhUiEditIcon,
11
+ RhUiEditFillIcon,
12
+ RhUiVolumeUpIcon,
13
+ RhUiVolumeUpFillIcon,
14
+ RhUiExportIcon,
15
+ RhUiExportFillIcon
13
16
  } from '@patternfly/react-icons';
14
17
  import ResponseActionButton from './ResponseActionButton';
15
18
  import { ButtonProps, TooltipProps } from '@patternfly/react-core';
@@ -164,12 +167,28 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
164
167
 
165
168
  const iconMap = {
166
169
  positive: {
167
- filled: <ThumbsUpIcon />,
168
- outlined: <OutlinedThumbsUpIcon />
170
+ filled: <RhUiLikeFillIcon />,
171
+ outlined: <RhUiLikeIcon />
169
172
  },
170
173
  negative: {
171
- filled: <ThumbsDownIcon />,
172
- outlined: <OutlinedThumbsDownIcon />
174
+ filled: <RhUiDislikeFillIcon />,
175
+ outlined: <RhUiDislikeIcon />
176
+ },
177
+ listen: {
178
+ filled: <RhUiVolumeUpFillIcon />,
179
+ outlined: <RhUiVolumeUpIcon />
180
+ },
181
+ copy: {
182
+ filled: <RhUiCopyFillIcon />,
183
+ outlined: <RhUiCopyIcon />
184
+ },
185
+ edit: {
186
+ filled: <RhUiEditFillIcon />,
187
+ outlined: <RhUiEditIcon />
188
+ },
189
+ download: {
190
+ filled: <RhUiExportFillIcon />,
191
+ outlined: <RhUiExportIcon />
173
192
  }
174
193
  };
175
194
 
@@ -247,7 +266,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
247
266
  tooltipContent={copy.tooltipContent ?? 'Copy'}
248
267
  clickedTooltipContent={copy.clickedTooltipContent ?? 'Copied'}
249
268
  tooltipProps={getTooltipProps(copy.tooltipProps)}
250
- icon={<OutlinedCopyIcon />}
269
+ icon={getIcon('copy')}
251
270
  isClicked={activeButton === 'copy'}
252
271
  ref={copy.ref}
253
272
  aria-expanded={copy['aria-expanded']}
@@ -265,7 +284,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
265
284
  tooltipContent={edit.tooltipContent ?? 'Edit '}
266
285
  clickedTooltipContent={edit.clickedTooltipContent ?? 'Editing'}
267
286
  tooltipProps={getTooltipProps(edit.tooltipProps)}
268
- icon={<PencilAltIcon />}
287
+ icon={getIcon('edit')}
269
288
  isClicked={activeButton === 'edit'}
270
289
  ref={edit.ref}
271
290
  aria-expanded={edit['aria-expanded']}
@@ -283,7 +302,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
283
302
  tooltipContent={share.tooltipContent ?? 'Share'}
284
303
  clickedTooltipContent={share.clickedTooltipContent ?? 'Shared'}
285
304
  tooltipProps={getTooltipProps(share.tooltipProps)}
286
- icon={<ExternalLinkAltIcon />}
305
+ icon={getIcon('download')}
287
306
  isClicked={activeButton === 'share'}
288
307
  ref={share.ref}
289
308
  aria-expanded={share['aria-expanded']}
@@ -301,7 +320,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
301
320
  tooltipContent={download.tooltipContent ?? 'Download'}
302
321
  clickedTooltipContent={download.clickedTooltipContent ?? 'Downloaded'}
303
322
  tooltipProps={getTooltipProps(download.tooltipProps)}
304
- icon={<DownloadIcon />}
323
+ icon={getIcon('download')}
305
324
  isClicked={activeButton === 'download'}
306
325
  ref={download.ref}
307
326
  aria-expanded={download['aria-expanded']}
@@ -319,7 +338,7 @@ export const ResponseActions: FunctionComponent<ResponseActionProps> = ({
319
338
  tooltipContent={listen.tooltipContent ?? 'Listen'}
320
339
  clickedTooltipContent={listen.clickedTooltipContent ?? 'Listening'}
321
340
  tooltipProps={getTooltipProps(listen.tooltipProps)}
322
- icon={<VolumeUpIcon />}
341
+ icon={getIcon('listen')}
323
342
  isClicked={activeButton === 'listen'}
324
343
  ref={listen.ref}
325
344
  aria-expanded={listen['aria-expanded']}