@patternfly/chatbot 6.6.0-prerelease.4 → 6.6.0-prerelease.6

package/dist/esm/Message/Message.test.js

@@ -17,6 +17,22 @@ import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quic
 import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
 import { AlertActionLink, Button, CodeBlockAction } from '@patternfly/react-core';
+// Mock the icon components
+jest.mock('@patternfly/react-icons', () => ({
+    OutlinedThumbsUpIcon: () => _jsx("div", { children: "OutlinedThumbsUpIcon" }),
+    ThumbsUpIcon: () => _jsx("div", { children: "ThumbsUpIcon" }),
+    OutlinedThumbsDownIcon: () => _jsx("div", { children: "OutlinedThumbsDownIcon" }),
+    ThumbsDownIcon: () => _jsx("div", { children: "ThumbsDownIcon" }),
+    OutlinedCopyIcon: () => _jsx("div", { children: "OutlinedCopyIcon" }),
+    DownloadIcon: () => _jsx("div", { children: "DownloadIcon" }),
+    ExternalLinkAltIcon: () => _jsx("div", { children: "ExternalLinkAltIcon" }),
+    VolumeUpIcon: () => _jsx("div", { children: "VolumeUpIcon" }),
+    PencilAltIcon: () => _jsx("div", { children: "PencilAltIcon" }),
+    CheckIcon: () => _jsx("div", { children: "CheckIcon" }),
+    CloseIcon: () => _jsx("div", { children: "CloseIcon" }),
+    ExternalLinkSquareAltIcon: () => _jsx("div", { children: "ExternalLinkSquareAltIcon" }),
+    TimesIcon: () => _jsx("div", { children: "TimesIcon" })
+}));
 const ALL_ACTIONS = [
     { label: /Good response/i },
     { label: /Bad response/i },
@@ -999,4 +1015,97 @@ describe('Message', () => {
         render(_jsx(Message, { alignment: "end", avatar: "./img", role: "user", name: "User", content: "" }));
         expect(screen.getByRole('region')).toHaveClass('pf-m-end');
     });
+    // We're just testing the positive action here to ensure logic passes through as needed, the other actions are
+    // tested in ResponseActions.test.tsx along with other aspects of this functionality
+    it('should not swap icons when useFilledIconsOnClick is omitted', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
+                positive: { onClick: jest.fn() }
+            } }));
+        expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+        yield user.click(screen.getByRole('button', { name: /Good response/i }));
+        expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+        expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+    }));
+    it('should swap icons when useFilledIconsOnClick is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = userEvent.setup();
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
+                positive: { onClick: jest.fn() }
+            }, useFilledIconsOnClick: true }));
+        yield user.click(screen.getByRole('button', { name: /Good response/i }));
+        expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+        expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
+    }));
+    it('should apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is true', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: true, actions: {
+                positive: { onClick: jest.fn() }
+            } }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions');
+        expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class to response actions when showActionsOnInteraction is false', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: false, actions: {
+                positive: { onClick: jest.fn() }
+            } }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions');
+        expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class to response actions by default', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: {
+                positive: { onClick: jest.fn() }
+            } }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions');
+        expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is true', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: true, actions: [
+                {
+                    positive: { onClick: jest.fn() },
+                    negative: { onClick: jest.fn() }
+                },
+                {
+                    copy: { onClick: jest.fn() }
+                }
+            ] }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions-groups');
+        expect(responseContainer).toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class to grouped actions container when showActionsOnInteraction is false', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", showActionsOnInteraction: false, actions: [
+                {
+                    positive: { onClick: jest.fn() },
+                    negative: { onClick: jest.fn() }
+                },
+                {
+                    copy: { onClick: jest.fn() }
+                }
+            ] }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions-groups');
+        expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class to grouped actions container by default', () => {
+        render(_jsx(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", actions: [
+                {
+                    positive: { onClick: jest.fn() },
+                    negative: { onClick: jest.fn() }
+                },
+                {
+                    copy: { onClick: jest.fn() }
+                }
+            ] }));
+        const responseContainer = screen
+            .getByRole('button', { name: 'Good response' })
+            .closest('.pf-chatbot__response-actions-groups');
+        expect(responseContainer).not.toHaveClass('pf-m-visible-interaction');
+    });
 });

package/dist/esm/ResponseActions/ResponseActions.d.ts

@@ -34,6 +34,8 @@ type ExtendedActionProps = ActionProps & {
  * Use this component when passing children to Message to customize its structure.
  */
 export interface ResponseActionProps {
+    /** Additional classes for the response actions container. */
+    className?: string;
     /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
     actions: Record<string, ExtendedActionProps | undefined> & {
         positive?: ActionProps;
@@ -47,6 +49,13 @@ export interface ResponseActionProps {
     /** When true, the selected action will persist even when clicking outside the component.
      * When false (default), clicking outside or clicking another action will deselect the current selection. */
     persistActionSelection?: boolean;
+    /** When true, automatically swaps to filled icon variants when predefined actions are clicked.
+     * Predefined actions will use filled variants (e.g., ThumbsUpIcon) when clicked and outline variants (e.g., OutlinedThumbsUpIcon) when not clicked. */
+    useFilledIconsOnClick?: boolean;
+    /** Flag indicating whether the actions container is only visible when a message is hovered or an action would receive focus. Note
+     * that setting this to true will append tooltips inline instead of the document.body.
+     */
+    showActionsOnInteraction?: boolean;
 }
 export declare const ResponseActions: FunctionComponent<ResponseActionProps>;
 export default ResponseActions;

package/dist/esm/ResponseActions/ResponseActions.js

@@ -12,10 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { ExternalLinkAltIcon, VolumeUpIcon, OutlinedThumbsUpIcon, OutlinedThumbsDownIcon, OutlinedCopyIcon, DownloadIcon, PencilAltIcon } from '@patternfly/react-icons';
+import { ExternalLinkAltIcon, VolumeUpIcon, OutlinedThumbsUpIcon, ThumbsUpIcon, OutlinedThumbsDownIcon, ThumbsDownIcon, OutlinedCopyIcon, DownloadIcon, PencilAltIcon } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
-export const ResponseActions = ({ actions, persistActionSelection = false }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+import { css } from '@patternfly/react-styles';
+export const ResponseActions = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    var { className, actions, persistActionSelection = false, useFilledIconsOnClick = false, showActionsOnInteraction = false } = _a, props = __rest(_a, ["className", "actions", "persistActionSelection", "useFilledIconsOnClick", "showActionsOnInteraction"]);
     const [activeButton, setActiveButton] = useState();
     const [clickStatePersisted, setClickStatePersisted] = useState(false);
     const { positive, negative, copy, edit, share, download, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "edit", "share", "download", "listen"]);
@@ -63,6 +65,7 @@ export const ResponseActions = ({ actions, persistActionSelection = false }) =>
         };
     }, [clickStatePersisted, persistActionSelection]);
     const handleClick = (e, id, onClick) => {
+        e.stopPropagation();
         if (persistActionSelection) {
             if (activeButton === id) {
                 // Toggle off if clicking the same button
@@ -80,9 +83,31 @@ export const ResponseActions = ({ actions, persistActionSelection = false }) =>
         }
         onClick && onClick(e);
     };
-    return (_jsxs("div", { ref: responseActions, className: "pf-chatbot__response-actions", children: [positive && (_jsx(ResponseActionButton, Object.assign({}, positive, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : 'Good response recorded', onClick: (e) => handleClick(e, 'positive', positive.onClick), className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_c = positive.tooltipContent) !== null && _c !== void 0 ? _c : 'Good response', clickedTooltipContent: (_d = positive.clickedTooltipContent) !== null && _d !== void 0 ? _d : 'Good response recorded', tooltipProps: positive.tooltipProps, icon: _jsx(OutlinedThumbsUpIcon, {}), isClicked: activeButton === 'positive', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] }))), negative && (_jsx(ResponseActionButton, Object.assign({}, negative, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : 'Bad response recorded', onClick: (e) => handleClick(e, 'negative', negative.onClick), className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_g = negative.tooltipContent) !== null && _g !== void 0 ? _g : 'Bad response', clickedTooltipContent: (_h = negative.clickedTooltipContent) !== null && _h !== void 0 ? _h : 'Bad response recorded', tooltipProps: negative.tooltipProps, icon: _jsx(OutlinedThumbsDownIcon, {}), isClicked: activeButton === 'negative', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] }))), copy && (_jsx(ResponseActionButton, Object.assign({}, copy, { ariaLabel: (_j = copy.ariaLabel) !== null && _j !== void 0 ? _j : 'Copy', clickedAriaLabel: (_k = copy.ariaLabel) !== null && _k !== void 0 ? _k : 'Copied', onClick: (e) => handleClick(e, 'copy', copy.onClick), className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_l = copy.tooltipContent) !== null && _l !== void 0 ? _l : 'Copy', clickedTooltipContent: (_m = copy.clickedTooltipContent) !== null && _m !== void 0 ? _m : 'Copied', tooltipProps: 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: (_o = edit.ariaLabel) !== null && _o !== void 0 ? _o : 'Edit', clickedAriaLabel: (_p = edit.ariaLabel) !== null && _p !== void 0 ? _p : 'Editing', onClick: (e) => handleClick(e, 'edit', edit.onClick), className: edit.className, isDisabled: edit.isDisabled, tooltipContent: (_q = edit.tooltipContent) !== null && _q !== void 0 ? _q : 'Edit ', clickedTooltipContent: (_r = edit.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Editing', tooltipProps: 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: (_s = share.ariaLabel) !== null && _s !== void 0 ? _s : 'Share', clickedAriaLabel: (_t = share.ariaLabel) !== null && _t !== void 0 ? _t : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_u = share.tooltipContent) !== null && _u !== void 0 ? _u : 'Share', clickedTooltipContent: (_v = share.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Shared', tooltipProps: 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: (_w = download.ariaLabel) !== null && _w !== void 0 ? _w : 'Download', clickedAriaLabel: (_x = download.ariaLabel) !== null && _x !== void 0 ? _x : 'Downloaded', onClick: (e) => handleClick(e, 'download', download.onClick), className: download.className, isDisabled: download.isDisabled, tooltipContent: (_y = download.tooltipContent) !== null && _y !== void 0 ? _y : 'Download', clickedTooltipContent: (_z = download.clickedTooltipContent) !== null && _z !== void 0 ? _z : 'Downloaded', tooltipProps: 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: (_0 = listen.ariaLabel) !== null && _0 !== void 0 ? _0 : 'Listen', clickedAriaLabel: (_1 = listen.ariaLabel) !== null && _1 !== void 0 ? _1 : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_2 = listen.tooltipContent) !== null && _2 !== void 0 ? _2 : 'Listen', clickedTooltipContent: (_3 = listen.clickedTooltipContent) !== null && _3 !== void 0 ? _3 : 'Listening', tooltipProps: 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) => {
+    const iconMap = {
+        positive: {
+            filled: _jsx(ThumbsUpIcon, {}),
+            outlined: _jsx(OutlinedThumbsUpIcon, {})
+        },
+        negative: {
+            filled: _jsx(ThumbsDownIcon, {}),
+            outlined: _jsx(OutlinedThumbsDownIcon, {})
+        }
+    };
+    const getIcon = (actionName) => {
+        const isClicked = activeButton === actionName;
+        if (isClicked && useFilledIconsOnClick) {
+            return iconMap[actionName].filled;
+        }
+        return iconMap[actionName].outlined;
+    };
+    // We want to append the tooltip inline so that hovering the tooltip keeps the actions container visible
+    // when showActionsOnInteraction is true. Otherwise hovering the tooltip causes the actions container
+    // to disappear but the tooltip will remain visible.
+    const getTooltipContainer = () => responseActions.current || document.body;
+    const getTooltipProps = (tooltipProps) => (Object.assign(Object.assign({}, (showActionsOnInteraction && { appendTo: getTooltipContainer })), tooltipProps));
+    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) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-                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: (_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'] })));
-            })] }));
+                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'] })));
+            })] })));
 };
 export default ResponseActions;

package/dist/esm/ResponseActions/ResponseActions.test.js

@@ -7,13 +7,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import ResponseActions from './ResponseActions';
 import userEvent from '@testing-library/user-event';
 import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
 import Message from '../Message';
+// Mock the icon components
+jest.mock('@patternfly/react-icons', () => ({
+    OutlinedThumbsUpIcon: () => _jsx("div", { children: "OutlinedThumbsUpIcon" }),
+    ThumbsUpIcon: () => _jsx("div", { children: "ThumbsUpIcon" }),
+    OutlinedThumbsDownIcon: () => _jsx("div", { children: "OutlinedThumbsDownIcon" }),
+    ThumbsDownIcon: () => _jsx("div", { children: "ThumbsDownIcon" }),
+    OutlinedCopyIcon: () => _jsx("div", { children: "OutlinedCopyIcon" }),
+    DownloadIcon: () => _jsx("div", { children: "DownloadIcon" }),
+    InfoCircleIcon: () => _jsx("div", { children: "InfoCircleIcon" }),
+    RedoIcon: () => _jsx("div", { children: "RedoIcon" }),
+    ExternalLinkAltIcon: () => _jsx("div", { children: "ExternalLinkAltIcon" }),
+    VolumeUpIcon: () => _jsx("div", { children: "VolumeUpIcon" }),
+    PencilAltIcon: () => _jsx("div", { children: "PencilAltIcon" })
+}));
 const ALL_ACTIONS = [
     { type: 'positive', label: 'Good response', clickedLabel: 'Good response recorded' },
     { type: 'negative', label: 'Bad response', clickedLabel: 'Bad response recorded' },
@@ -310,4 +324,124 @@ describe('ResponseActions', () => {
         yield userEvent.click(customBtn);
         expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     }));
+    it('should apply pf-m-visible-interaction class when showActionsOnInteraction is true', () => {
+        render(_jsx(ResponseActions, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            }, showActionsOnInteraction: true }));
+        expect(screen.getByTestId('test-id')).toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class when showActionsOnInteraction is false', () => {
+        render(_jsx(ResponseActions, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            }, showActionsOnInteraction: false }));
+        expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class by default', () => {
+        render(_jsx(ResponseActions, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            } }));
+        expect(screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should render with custom className', () => {
+        render(_jsx(ResponseActions, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            }, className: "custom-class" }));
+        expect(screen.getByTestId('test-id')).toHaveClass('custom-class');
+    });
+    describe('icon swapping with useFilledIconsOnClick', () => {
+        it('should render outline icons by default', () => {
+            render(_jsx(ResponseActions, { actions: {
+                    positive: { onClick: jest.fn() },
+                    negative: { onClick: jest.fn() }
+                } }));
+            expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+            expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+            expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+            expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
+        });
+        describe('positive actions', () => {
+            it('should not swap positive icon when clicked and useFilledIconsOnClick is false', () => __awaiter(void 0, void 0, void 0, function* () {
+                const user = userEvent.setup();
+                render(_jsx(ResponseActions, { actions: {
+                        positive: { onClick: jest.fn() }
+                    }, useFilledIconsOnClick: false }));
+                yield user.click(screen.getByRole('button', { name: 'Good response' }));
+                expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+                expect(screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+            }));
+            it('should swap positive icon from outline to filled when clicked with useFilledIconsOnClick', () => __awaiter(void 0, void 0, void 0, function* () {
+                const user = userEvent.setup();
+                render(_jsx(ResponseActions, { actions: {
+                        positive: { onClick: jest.fn() }
+                    }, useFilledIconsOnClick: true }));
+                yield user.click(screen.getByRole('button', { name: 'Good response' }));
+                expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+                expect(screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
+            }));
+            it('should revert positive icon to outline icon when clicking outside', () => __awaiter(void 0, void 0, void 0, function* () {
+                const user = userEvent.setup();
+                render(_jsxs("div", { children: [_jsx(ResponseActions, { actions: {
+                                positive: { onClick: jest.fn() }
+                            }, useFilledIconsOnClick: true }), _jsx("div", { "data-testid": "outside", children: "Outside" })] }));
+                yield user.click(screen.getByRole('button', { name: 'Good response' }));
+                expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+                yield user.click(screen.getByTestId('outside'));
+                expect(screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+            }));
+            it('should not revert positive icon to outline icon when clicking outside if persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+                const user = userEvent.setup();
+                render(_jsxs("div", { children: [_jsx(ResponseActions, { actions: {
+                                positive: { onClick: jest.fn() }
+                            }, persistActionSelection: true, useFilledIconsOnClick: true }), _jsx("div", { "data-testid": "outside", children: "Outside" })] }));
+                yield user.click(screen.getByRole('button', { name: 'Good response' }));
+                expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+                yield user.click(screen.getByTestId('outside'));
+                expect(screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+            }));
+            describe('negative actions', () => {
+                it('should not swap negative icon when clicked and useFilledIconsOnClick is false', () => __awaiter(void 0, void 0, void 0, function* () {
+                    const user = userEvent.setup();
+                    render(_jsx(ResponseActions, { actions: {
+                            negative: { onClick: jest.fn() }
+                        }, useFilledIconsOnClick: false }));
+                    yield user.click(screen.getByRole('button', { name: 'Bad response' }));
+                    expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+                    expect(screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
+                }));
+                it('should swap negative icon from outline to filled when clicked with useFilledIconsOnClick', () => __awaiter(void 0, void 0, void 0, function* () {
+                    const user = userEvent.setup();
+                    render(_jsx(ResponseActions, { actions: {
+                            negative: { onClick: jest.fn() }
+                        }, useFilledIconsOnClick: true }));
+                    yield user.click(screen.getByRole('button', { name: 'Bad response' }));
+                    expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+                    expect(screen.queryByText('OutlinedThumbsDownIcon')).not.toBeInTheDocument();
+                }));
+                it('should revert negative icon to outline when clicking outside', () => __awaiter(void 0, void 0, void 0, function* () {
+                    const user = userEvent.setup();
+                    render(_jsxs("div", { children: [_jsx(ResponseActions, { actions: {
+                                    negative: { onClick: jest.fn() }
+                                }, useFilledIconsOnClick: true }), _jsx("div", { "data-testid": "outside", children: "Outside" })] }));
+                    yield user.click(screen.getByRole('button', { name: 'Bad response' }));
+                    expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+                    yield user.click(screen.getByTestId('outside'));
+                    expect(screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+                }));
+                it('should not revert negative icon to outline icon when clicking outside if persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+                    const user = userEvent.setup();
+                    render(_jsxs("div", { children: [_jsx(ResponseActions, { actions: {
+                                    negative: { onClick: jest.fn() }
+                                }, persistActionSelection: true, useFilledIconsOnClick: true }), _jsx("div", { "data-testid": "outside", children: "Outside" })] }));
+                    yield user.click(screen.getByRole('button', { name: 'Bad response' }));
+                    expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+                    yield user.click(screen.getByTestId('outside'));
+                    expect(screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+                }));
+            });
+        });
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.6.0-prerelease.4",
+  "version": "6.6.0-prerelease.6",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithIconSwapping.tsx

@@ -0,0 +1,22 @@
+import { FunctionComponent } from 'react';
+
+import Message from '@patternfly/chatbot/dist/dynamic/Message';
+import patternflyAvatar from './patternfly_avatar.jpg';
+
+export const IconSwappingExample: FunctionComponent = () => (
+  <Message
+    name="Bot"
+    role="bot"
+    avatar={patternflyAvatar}
+    content="Click the response actions to see the outlined icons swapped with the filled variants!"
+    actions={{
+      // eslint-disable-next-line no-console
+      positive: { onClick: () => console.log('Good response') },
+      // eslint-disable-next-line no-console
+      negative: { onClick: () => console.log('Bad response') },
+      // eslint-disable-next-line no-console
+      copy: { onClick: () => console.log('Copied') }
+    }}
+    useFilledIconsOnClick
+  />
+);

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithResponseActions.tsx

@@ -4,22 +4,43 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
 
 export const ResponseActionExample: FunctionComponent = () => (
-  <Message
-    name="Bot"
-    role="bot"
-    avatar={patternflyAvatar}
-    content="I updated your account with those settings. You're ready to set up your first dashboard!"
-    actions={{
-      // eslint-disable-next-line no-console
-      positive: { onClick: () => console.log('Good response') },
-      // eslint-disable-next-line no-console
-      negative: { onClick: () => console.log('Bad response') },
-      // eslint-disable-next-line no-console
-      copy: { onClick: () => console.log('Copy') },
-      // eslint-disable-next-line no-console
-      download: { onClick: () => console.log('Download') },
-      // eslint-disable-next-line no-console
-      listen: { onClick: () => console.log('Listen') }
-    }}
-  />
+  <>
+    <Message
+      name="Bot"
+      role="bot"
+      avatar={patternflyAvatar}
+      content="I updated your account with those settings. You're ready to set up your first dashboard!"
+      actions={{
+        // eslint-disable-next-line no-console
+        positive: { onClick: () => console.log('Good response') },
+        // eslint-disable-next-line no-console
+        negative: { onClick: () => console.log('Bad response') },
+        // eslint-disable-next-line no-console
+        copy: { onClick: () => console.log('Copy') },
+        // eslint-disable-next-line no-console
+        download: { onClick: () => console.log('Download') },
+        // eslint-disable-next-line no-console
+        listen: { onClick: () => console.log('Listen') }
+      }}
+    />
+    <Message
+      name="Bot"
+      role="bot"
+      showActionsOnInteraction
+      avatar={patternflyAvatar}
+      content="This message has response actions visually hidden until you hover over the message via mouse, or an action would receive focus via keyboard."
+      actions={{
+        // eslint-disable-next-line no-console
+        positive: { onClick: () => console.log('Good response') },
+        // eslint-disable-next-line no-console
+        negative: { onClick: () => console.log('Bad response') },
+        // eslint-disable-next-line no-console
+        copy: { onClick: () => console.log('Copy') },
+        // eslint-disable-next-line no-console
+        download: { onClick: () => console.log('Download') },
+        // eslint-disable-next-line no-console
+        listen: { onClick: () => console.log('Listen') }
+      }}
+    />
+  </>
 );

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -95,14 +95,16 @@ For example, you can use the default divider to display a "timestamp" for more s
 
 ### Message actions
 
-You can add actions to a message, to allow users to interact with the message content. These actions can include:
+To let users interact with a bot's responses, you can add support for message actions. While you can customize message actions to your needs, default options include the following:
 
-- Feedback responses that allow users to rate a message as "good" or "bad".
-- Copy and share controls that allow users to share the message content with others.
-- An edit action to allow users to edit a message they previously sent. This should only be applied to user messages - see the [user messages example](#user-messages) for details on how to implement this action.
-- A listen action, that will read the message content out loud.
+- Positive and negative feedback: Allows users to rate a message as "good" or "bad."
+- Copy: Allows users to copy the message content to their clipboard.
+- Download: Allows users to download the message content.
+- Listen: Reads the message content out loud using text-to-speech.
 
-**Note:** The logic for the actions is not built into the component and must be implemented by the consuming application.
+You can display message actions by default, or use the `showActionsOnInteraction` prop to reveal actions on hover or keyboard focus.
+
+**Note**: The underlying logic for these actions is not built-in and must be implemented within the consuming application.
 
 ```js file="./MessageWithResponseActions.tsx"
 
@@ -138,6 +140,16 @@ When `persistActionSelection` is `true`:
 
 ```
 
+### Message actions that fill
+
+To provide enhanced visual feedback when users interact with response actions, you can enable icon swapping by setting `useFilledIconsOnClick` to `true`. When enabled, the predefined "positive" and "negative" actions will automatically swap to their filled icon counterparts when clicked, replacing the original outlined icon variants.
+
+This is especially useful for actions that are intended to persist (such as the "positive" and "negative" responses), so that a user's selection is more clear and emphasized.
+
+```js file="./MessageWithIconSwapping.tsx"
+
+```
+
 ### Multiple messsage action groups
 
 To maintain finer control over message action selection behavior, you can create groups of actions by passing an array of objects to the `actions` prop. This allows you to separate actions into conceptually or functionally different groups and implement different behavior for each group as needed. For example, you could separate feedback actions (thumbs up/down) form utility actions (copy and download), and have different selection behaviors for each group.

package/src/Message/Message.scss

@@ -92,6 +92,18 @@
     gap: var(--pf-t--global--spacer--sm);
   }
 
+  .pf-m-visible-interaction {
+    opacity: 0;
+    transition-timing-function: var(--pf-t--global--motion--timing-function--default);
+    transition-duration: var(--pf-t--global--motion--duration--fade--short);
+    transition-property: opacity;
+  }
+
+  &:hover .pf-m-visible-interaction,
+  .pf-m-visible-interaction:focus-within {
+    opacity: 1;
+  }
+
   // targets footnotes specifically
   .footnotes,
   .pf-chatbot__message-text.footnotes {