npm - @patternfly/chatbot - Versions diffs - 2.2.0-prerelease.4 → 2.2.0-prerelease.5 - Mend

@patternfly/chatbot 2.2.0-prerelease.4 → 2.2.0-prerelease.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/cjs/ResponseActions/ResponseActionButton.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@ import { TooltipProps } from '@patternfly/react-core';
 export interface ResponseActionButtonProps {
     /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
     ariaLabel?: string;
+    /** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */
+    clickedAriaLabel?: string;
     /** Icon for the button */
     icon: React.ReactNode;
     /** On-click handler for the button */
@@ -13,8 +15,12 @@ export interface ResponseActionButtonProps {
     isDisabled?: boolean;
     /** Content shown in the tooltip */
     tooltipContent?: string;
+    /** Content shown in the tooltip when the button is clicked. Defaults to the value of tooltipContent if not provided. */
+    clickedTooltipContent?: string;
     /** Props to control the PF Tooltip component */
     tooltipProps?: TooltipProps;
+    /** Whether button is in clicked state */
+    isClicked?: boolean;
 }
 export declare const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps>;
 export default ResponseActionButton;

package/dist/cjs/ResponseActions/ResponseActionButton.js CHANGED Viewed

@@ -6,7 +6,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResponseActionButton = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
-const ResponseActionButton = ({ ariaLabel, className, icon, isDisabled, onClick, tooltipContent, tooltipProps }) => (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: tooltipContent, position: "bottom", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
-    react_1.default.createElement(react_core_1.Button, { variant: "plain", className: `pf-chatbot__button--response-action ${className !== null && className !== void 0 ? className : ''}`, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : tooltipContent, icon: react_1.default.createElement(react_core_1.Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm" })));
+const ResponseActionButton = ({ ariaLabel, clickedAriaLabel = ariaLabel, className, icon, isDisabled, onClick, tooltipContent, clickedTooltipContent = tooltipContent, tooltipProps, isClicked = false }) => {
+    const generateAriaLabel = () => {
+        if (ariaLabel) {
+            return isClicked ? clickedAriaLabel : ariaLabel;
+        }
+        return isClicked ? clickedTooltipContent : tooltipContent;
+    };
+    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: isClicked ? clickedTooltipContent : tooltipContent, "aria-live": "polite", position: "bottom", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
+        react_1.default.createElement(react_core_1.Button, { variant: "plain", className: `pf-chatbot__button--response-action ${isClicked ? 'pf-chatbot__button--response-action-clicked' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": generateAriaLabel(), icon: react_1.default.createElement(react_core_1.Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm" })));
+};
 exports.ResponseActionButton = ResponseActionButton;
 exports.default = exports.ResponseActionButton;

package/dist/cjs/ResponseActions/ResponseActionButton.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import '@testing-library/jest-dom';

package/dist/cjs/ResponseActions/ResponseActionButton.test.js ADDED Viewed

@@ -0,0 +1,54 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const react_icons_1 = require("@patternfly/react-icons");
+const ResponseActionButton_1 = __importDefault(require("./ResponseActionButton"));
+describe('ResponseActionButton', () => {
+    it('renders aria-label correctly if not clicked', () => {
+        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), ariaLabel: "Download", clickedAriaLabel: "Downloaded" }));
+        expect(react_2.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    });
+    it('renders aria-label correctly if clicked', () => {
+        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), ariaLabel: "Download", clickedAriaLabel: "Downloaded", isClicked: true }));
+        expect(react_2.screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+    });
+    it('renders tooltip correctly if not clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), tooltipContent: "Download", clickedTooltipContent: "Downloaded" }));
+        expect(react_2.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+        // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Download' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Download' })).toBeTruthy();
+    }));
+    it('renders tooltip correctly if clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), tooltipContent: "Download", clickedTooltipContent: "Downloaded", isClicked: true }));
+        expect(react_2.screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+        // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Downloaded' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy();
+    }));
+    it('if clicked variant for tooltip is not supplied, it uses the default', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), tooltipContent: "Download", isClicked: true }));
+        // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Download' }));
+        expect(react_2.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    }));
+    it('if clicked variant for aria label is not supplied, it uses the default', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ResponseActionButton_1.default, { icon: react_1.default.createElement(react_icons_1.DownloadIcon, null), ariaLabel: "Download", isClicked: true }));
+        expect(react_2.screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    }));
+});

package/dist/cjs/ResponseActions/ResponseActions.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@ import { TooltipProps } from '@patternfly/react-core';
 export interface ActionProps {
     /** Aria-label for the button */
     ariaLabel?: string;
+    /** Aria-label for the button, shown when the button is clicked. */
+    clickedAriaLabel?: string;
     /** On-click handler for the button */
     onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
     /** Class name for the button */
@@ -11,6 +13,8 @@ export interface ActionProps {
     isDisabled?: boolean;
     /** Content shown in the tooltip */
     tooltipContent?: string;
+    /** Content shown in the tooltip when the button is clicked. */
+    clickedTooltipContent?: string;
     /** Props to control the PF Tooltip component */
     tooltipProps?: TooltipProps;
     /** Icon for custom response action */

package/dist/cjs/ResponseActions/ResponseActions.js CHANGED Viewed

@@ -19,17 +19,34 @@ const react_1 = __importDefault(require("react"));
 const react_icons_1 = require("@patternfly/react-icons");
 const ResponseActionButton_1 = __importDefault(require("./ResponseActionButton"));
 const ResponseActions = ({ actions }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const [activeButton, setActiveButton] = react_1.default.useState();
     const { positive, negative, copy, share, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "share", "listen"]);
-    return (react_1.default.createElement("div", { className: "pf-chatbot__response-actions" },
-        positive && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', onClick: positive.onClick, className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_b = positive.tooltipContent) !== null && _b !== void 0 ? _b : 'Good response', tooltipProps: positive.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedThumbsUpIcon, null) })),
-        negative && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_c = negative.ariaLabel) !== null && _c !== void 0 ? _c : 'Bad response', onClick: negative.onClick, className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_d = negative.tooltipContent) !== null && _d !== void 0 ? _d : 'Bad response', tooltipProps: negative.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedThumbsDownIcon, null) })),
-        copy && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_e = copy.ariaLabel) !== null && _e !== void 0 ? _e : 'Copy', onClick: copy.onClick, className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_f = copy.tooltipContent) !== null && _f !== void 0 ? _f : 'Copy', tooltipProps: copy.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedCopyIcon, null) })),
-        share && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_g = share.ariaLabel) !== null && _g !== void 0 ? _g : 'Share', onClick: share.onClick, className: share.className, isDisabled: share.isDisabled, tooltipContent: (_h = share.tooltipContent) !== null && _h !== void 0 ? _h : 'Share', tooltipProps: share.tooltipProps, icon: react_1.default.createElement(react_icons_1.ExternalLinkAltIcon, null) })),
-        listen && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_j = listen.ariaLabel) !== null && _j !== void 0 ? _j : 'Listen', onClick: listen.onClick, className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_k = listen.tooltipContent) !== null && _k !== void 0 ? _k : 'Listen', tooltipProps: listen.tooltipProps, icon: react_1.default.createElement(react_icons_1.VolumeUpIcon, null) })),
+    const responseActions = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (responseActions.current && !responseActions.current.contains(e.target)) {
+                setActiveButton(undefined);
+            }
+        };
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    const handleClick = (e, id, onClick) => {
+        setActiveButton(id);
+        onClick && onClick(e);
+    };
+    return (react_1.default.createElement("div", { ref: responseActions, className: "pf-chatbot__response-actions" },
+        positive && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : '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 : 'Response recorded', tooltipProps: positive.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedThumbsUpIcon, null), isClicked: activeButton === 'positive' })),
+        negative && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : '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 : 'Response recorded', tooltipProps: negative.tooltipProps, icon: react_1.default.createElement(react_icons_1.OutlinedThumbsDownIcon, null), isClicked: activeButton === 'negative' })),
+        copy && (react_1.default.createElement(ResponseActionButton_1.default, { 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: react_1.default.createElement(react_icons_1.OutlinedCopyIcon, null), isClicked: activeButton === 'copy' })),
+        share && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_o = share.ariaLabel) !== null && _o !== void 0 ? _o : 'Share', clickedAriaLabel: (_p = share.ariaLabel) !== null && _p !== void 0 ? _p : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_q = share.tooltipContent) !== null && _q !== void 0 ? _q : 'Share', clickedTooltipContent: (_r = share.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Shared', tooltipProps: share.tooltipProps, icon: react_1.default.createElement(react_icons_1.ExternalLinkAltIcon, null), isClicked: activeButton === 'share' })),
+        listen && (react_1.default.createElement(ResponseActionButton_1.default, { ariaLabel: (_s = listen.ariaLabel) !== null && _s !== void 0 ? _s : 'Listen', clickedAriaLabel: (_t = listen.ariaLabel) !== null && _t !== void 0 ? _t : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_u = listen.tooltipContent) !== null && _u !== void 0 ? _u : 'Listen', clickedTooltipContent: (_v = listen.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Listening', tooltipProps: listen.tooltipProps, icon: react_1.default.createElement(react_icons_1.VolumeUpIcon, null), isClicked: activeButton === 'listen' })),
         Object.keys(additionalActions).map((action) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return (react_1.default.createElement(ResponseActionButton_1.default, { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, onClick: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.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, icon: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.icon }));
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return (react_1.default.createElement(ResponseActionButton_1.default, { 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 }));
         })));
 };
 exports.ResponseActions = ResponseActions;

package/dist/cjs/ResponseActions/ResponseActions.test.js CHANGED Viewed

@@ -18,25 +18,30 @@ require("@testing-library/jest-dom");
 const ResponseActions_1 = __importDefault(require("./ResponseActions"));
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const react_icons_1 = require("@patternfly/react-icons");
+const Message_1 = __importDefault(require("../Message"));
 const ALL_ACTIONS = [
-    { type: 'positive', label: 'Good response' },
-    { type: 'negative', label: 'Bad response' },
-    { type: 'copy', label: 'Copy' },
-    { type: 'share', label: 'Share' },
-    { type: 'listen', label: 'Listen' }
+    { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
+    { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
+    { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+    { type: 'share', label: 'Share', clickedLabel: 'Shared' },
+    { type: 'listen', label: 'Listen', clickedLabel: 'Listening' }
 ];
 const CUSTOM_ACTIONS = [
     {
         regenerate: {
             ariaLabel: 'Regenerate',
+            clickedAriaLabel: 'Regenerated',
             onClick: jest.fn(),
             tooltipContent: 'Regenerate',
+            clickedTooltipContent: 'Regenerated',
             icon: react_1.default.createElement(react_icons_1.RedoIcon, null)
         },
         download: {
             ariaLabel: 'Download',
+            clickedAriaLabel: 'Downloaded',
             onClick: jest.fn(),
             tooltipContent: 'Download',
+            clickedTooltipContent: 'Downloaded',
             icon: react_1.default.createElement(react_icons_1.DownloadIcon, null)
         },
         info: {
@@ -48,6 +53,59 @@ const CUSTOM_ACTIONS = [
     }
 ];
 describe('ResponseActions', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should handle click within group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() },
+                copy: { onClick: jest.fn() },
+                share: { onClick: jest.fn() },
+                listen: { onClick: jest.fn() }
+            } }));
+        const goodBtn = react_2.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_2.screen.getByRole('button', { name: 'Bad response' });
+        const copyBtn = react_2.screen.getByRole('button', { name: 'Copy' });
+        const shareBtn = react_2.screen.getByRole('button', { name: 'Share' });
+        const listenBtn = react_2.screen.getByRole('button', { name: 'Listen' });
+        const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
+        buttons.forEach((button) => {
+            expect(button).toBeTruthy();
+        });
+        yield user_event_1.default.click(goodBtn);
+        expect(react_2.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        let unclickedButtons = buttons.filter((button) => button !== goodBtn);
+        unclickedButtons.forEach((button) => {
+            expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        });
+        yield user_event_1.default.click(badBtn);
+        expect(react_2.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        unclickedButtons = buttons.filter((button) => button !== badBtn);
+        unclickedButtons.forEach((button) => {
+            expect(button).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        });
+    }));
+    it('should handle click outside of group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        // using message just so we have something outside the group that's rendered
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "Example with all prebuilt actions", actions: {
+                positive: {},
+                negative: {}
+            } }));
+        const goodBtn = react_2.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_2.screen.getByRole('button', { name: 'Bad response' });
+        expect(goodBtn).toBeTruthy();
+        expect(badBtn).toBeTruthy();
+        yield user_event_1.default.click(goodBtn);
+        expect(react_2.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(badBtn);
+        expect(react_2.screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(react_2.screen.getByText('Example with all prebuilt actions'));
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
     it('should render buttons correctly', () => {
         ALL_ACTIONS.forEach(({ type, label }) => {
             (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
@@ -62,6 +120,22 @@ describe('ResponseActions', () => {
             expect(spy).toHaveBeenCalledTimes(1);
         }));
     }));
+    it('should swap clicked and non-clicked aria labels on click', () => __awaiter(void 0, void 0, void 0, function* () {
+        ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
+            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_2.screen.getByRole('button', { name: label })).toBeTruthy();
+            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: label }));
+            expect(react_2.screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
+        }));
+    }));
+    it('should swap clicked and non-clicked tooltips on click', () => __awaiter(void 0, void 0, void 0, function* () {
+        ALL_ACTIONS.forEach((_a) => __awaiter(void 0, [_a], void 0, function* ({ type, label, clickedLabel }) {
+            (0, react_2.render)(react_1.default.createElement(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_2.screen.getByRole('button', { name: label })).toBeTruthy();
+            yield user_event_1.default.click(react_2.screen.getByRole('button', { name: label }));
+            expect(react_2.screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
+        }));
+    }));
     it('should be able to change aria labels', () => {
         const actions = [
             { type: 'positive', ariaLabel: 'Thumbs up' },

package/dist/css/main.css CHANGED Viewed

@@ -1524,6 +1524,7 @@
   grid-template-columns: repeat(auto-fit, minmax(0, max-content));
 }
 .pf-chatbot__response-actions .pf-v6-c-button {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
   border-radius: var(--pf-t--global--border--radius--pill);
   width: 2.3125rem;
   height: 2.3125rem;
@@ -1531,11 +1532,17 @@
   align-items: center;
   justify-content: center;
 }
-.pf-chatbot__response-actions .pf-v6-c-button .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--subtle);
+.pf-chatbot__response-actions .pf-v6-c-button:hover {
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--subtle);
 }
-.pf-chatbot__response-actions .pf-v6-c-button:hover .pf-v6-c-button__icon, .pf-chatbot__response-actions .pf-v6-c-button:focus .pf-v6-c-button__icon {
-  color: var(--pf-t--global--icon--color--subtle);
+.pf-chatbot__response-actions .pf-v6-c-button:focus {
+  --pf-v6-c-button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
+}
+.pf-v6-c-button.pf-chatbot__button--response-action-clicked {
+  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
+  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
 }
 .pf-chatbot__source {

package/dist/css/main.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AC1GF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAGI;AAAA;IACE;IACA;;;ACpBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAQF;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;AChLN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AAUF;EACE;;AAGJ;EACE;;;ACjDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AASJ;EACE;;AAEF;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AC1IF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;ACxEN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;;AAQR;EACE;EACA;EACA;;;ACnHF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AD5CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AC3CN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;AHnBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AI9CN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;;ACbN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;;;ACTJ;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAGI;AAAA;IACE;IACA;;;ADtCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;~~AAMA~~;EACE;;;~~ACrBR~~;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACrER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;ACnCJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
1	+ {"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AC1GF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAGI;AAAA;IACE;IACA;;;ACpBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAQF;EACE;;;AAQF;EACE;;AACA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AASF;AAAA;AAAA;EACE;;;AChLN;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AAUF;EACE;;AAGJ;EACE;;;ACjDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AASJ;EACE;;AAEF;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AC1IF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC1CN;EACE;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;ACxEN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;;AAQR;EACE;EACA;EACA;;;ACnHF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AD5CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;;;AC3CN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;AHnBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AI9CN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;;ACbN;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;;;ACTJ;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAGI;AAAA;IACE;IACA;;;ADtCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACrER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;ACnCJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}

package/dist/esm/ResponseActions/ResponseActionButton.d.ts CHANGED Viewed

@@ -3,6 +3,8 @@ import { TooltipProps } from '@patternfly/react-core';
 export interface ResponseActionButtonProps {
     /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
     ariaLabel?: string;
+    /** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */
+    clickedAriaLabel?: string;
     /** Icon for the button */
     icon: React.ReactNode;
     /** On-click handler for the button */
@@ -13,8 +15,12 @@ export interface ResponseActionButtonProps {
     isDisabled?: boolean;
     /** Content shown in the tooltip */
     tooltipContent?: string;
+    /** Content shown in the tooltip when the button is clicked. Defaults to the value of tooltipContent if not provided. */
+    clickedTooltipContent?: string;
     /** Props to control the PF Tooltip component */
     tooltipProps?: TooltipProps;
+    /** Whether button is in clicked state */
+    isClicked?: boolean;
 }
 export declare const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps>;
 export default ResponseActionButton;

package/dist/esm/ResponseActions/ResponseActionButton.js CHANGED Viewed

@@ -1,5 +1,13 @@
 import React from 'react';
 import { Button, Icon, Tooltip } from '@patternfly/react-core';
-export const ResponseActionButton = ({ ariaLabel, className, icon, isDisabled, onClick, tooltipContent, tooltipProps }) => (React.createElement(Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: tooltipContent, position: "bottom", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
-    React.createElement(Button, { variant: "plain", className: `pf-chatbot__button--response-action ${className !== null && className !== void 0 ? className : ''}`, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : tooltipContent, icon: React.createElement(Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm" })));
+export const ResponseActionButton = ({ ariaLabel, clickedAriaLabel = ariaLabel, className, icon, isDisabled, onClick, tooltipContent, clickedTooltipContent = tooltipContent, tooltipProps, isClicked = false }) => {
+    const generateAriaLabel = () => {
+        if (ariaLabel) {
+            return isClicked ? clickedAriaLabel : ariaLabel;
+        }
+        return isClicked ? clickedTooltipContent : tooltipContent;
+    };
+    return (React.createElement(Tooltip, Object.assign({ id: `pf-chatbot__tooltip-response-action-${tooltipContent}`, content: isClicked ? clickedTooltipContent : tooltipContent, "aria-live": "polite", position: "bottom", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
+        React.createElement(Button, { variant: "plain", className: `pf-chatbot__button--response-action ${isClicked ? 'pf-chatbot__button--response-action-clicked' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": generateAriaLabel(), icon: React.createElement(Icon, { isInline: true, size: "lg" }, icon), isDisabled: isDisabled, onClick: onClick, size: "sm" })));
+};
 export default ResponseActionButton;

package/dist/esm/ResponseActions/ResponseActionButton.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ import '@testing-library/jest-dom';

package/dist/esm/ResponseActions/ResponseActionButton.test.js ADDED Viewed

@@ -0,0 +1,49 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { DownloadIcon } from '@patternfly/react-icons';
+import ResponseActionButton from './ResponseActionButton';
+describe('ResponseActionButton', () => {
+    it('renders aria-label correctly if not clicked', () => {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), ariaLabel: "Download", clickedAriaLabel: "Downloaded" }));
+        expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    });
+    it('renders aria-label correctly if clicked', () => {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), ariaLabel: "Download", clickedAriaLabel: "Downloaded", isClicked: true }));
+        expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+    });
+    it('renders tooltip correctly if not clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), tooltipContent: "Download", clickedTooltipContent: "Downloaded" }));
+        expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+        // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+        yield userEvent.click(screen.getByRole('button', { name: 'Download' }));
+        expect(screen.getByRole('tooltip', { name: 'Download' })).toBeTruthy();
+    }));
+    it('renders tooltip correctly if clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), tooltipContent: "Download", clickedTooltipContent: "Downloaded", isClicked: true }));
+        expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy();
+        // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+        yield userEvent.click(screen.getByRole('button', { name: 'Downloaded' }));
+        expect(screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy();
+    }));
+    it('if clicked variant for tooltip is not supplied, it uses the default', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), tooltipContent: "Download", isClicked: true }));
+        // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked
+        yield userEvent.click(screen.getByRole('button', { name: 'Download' }));
+        expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    }));
+    it('if clicked variant for aria label is not supplied, it uses the default', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(ResponseActionButton, { icon: React.createElement(DownloadIcon, null), ariaLabel: "Download", isClicked: true }));
+        expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy();
+    }));
+});

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

@@ -3,6 +3,8 @@ import { TooltipProps } from '@patternfly/react-core';
 export interface ActionProps {
     /** Aria-label for the button */
     ariaLabel?: string;
+    /** Aria-label for the button, shown when the button is clicked. */
+    clickedAriaLabel?: string;
     /** On-click handler for the button */
     onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
     /** Class name for the button */
@@ -11,6 +13,8 @@ export interface ActionProps {
     isDisabled?: boolean;
     /** Content shown in the tooltip */
     tooltipContent?: string;
+    /** Content shown in the tooltip when the button is clicked. */
+    clickedTooltipContent?: string;
     /** Props to control the PF Tooltip component */
     tooltipProps?: TooltipProps;
     /** Icon for custom response action */

package/dist/esm/ResponseActions/ResponseActions.js CHANGED Viewed

@@ -13,17 +13,34 @@ import React from 'react';
 import { ExternalLinkAltIcon, VolumeUpIcon, OutlinedThumbsUpIcon, OutlinedThumbsDownIcon, OutlinedCopyIcon } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 export const ResponseActions = ({ actions }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const [activeButton, setActiveButton] = React.useState();
     const { positive, negative, copy, share, listen } = actions, additionalActions = __rest(actions, ["positive", "negative", "copy", "share", "listen"]);
-    return (React.createElement("div", { className: "pf-chatbot__response-actions" },
-        positive && (React.createElement(ResponseActionButton, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', onClick: positive.onClick, className: positive.className, isDisabled: positive.isDisabled, tooltipContent: (_b = positive.tooltipContent) !== null && _b !== void 0 ? _b : 'Good response', tooltipProps: positive.tooltipProps, icon: React.createElement(OutlinedThumbsUpIcon, null) })),
-        negative && (React.createElement(ResponseActionButton, { ariaLabel: (_c = negative.ariaLabel) !== null && _c !== void 0 ? _c : 'Bad response', onClick: negative.onClick, className: negative.className, isDisabled: negative.isDisabled, tooltipContent: (_d = negative.tooltipContent) !== null && _d !== void 0 ? _d : 'Bad response', tooltipProps: negative.tooltipProps, icon: React.createElement(OutlinedThumbsDownIcon, null) })),
-        copy && (React.createElement(ResponseActionButton, { ariaLabel: (_e = copy.ariaLabel) !== null && _e !== void 0 ? _e : 'Copy', onClick: copy.onClick, className: copy.className, isDisabled: copy.isDisabled, tooltipContent: (_f = copy.tooltipContent) !== null && _f !== void 0 ? _f : 'Copy', tooltipProps: copy.tooltipProps, icon: React.createElement(OutlinedCopyIcon, null) })),
-        share && (React.createElement(ResponseActionButton, { ariaLabel: (_g = share.ariaLabel) !== null && _g !== void 0 ? _g : 'Share', onClick: share.onClick, className: share.className, isDisabled: share.isDisabled, tooltipContent: (_h = share.tooltipContent) !== null && _h !== void 0 ? _h : 'Share', tooltipProps: share.tooltipProps, icon: React.createElement(ExternalLinkAltIcon, null) })),
-        listen && (React.createElement(ResponseActionButton, { ariaLabel: (_j = listen.ariaLabel) !== null && _j !== void 0 ? _j : 'Listen', onClick: listen.onClick, className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_k = listen.tooltipContent) !== null && _k !== void 0 ? _k : 'Listen', tooltipProps: listen.tooltipProps, icon: React.createElement(VolumeUpIcon, null) })),
+    const responseActions = React.useRef(null);
+    React.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (responseActions.current && !responseActions.current.contains(e.target)) {
+                setActiveButton(undefined);
+            }
+        };
+        window.addEventListener('click', handleClickOutside);
+        return () => {
+            window.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    const handleClick = (e, id, onClick) => {
+        setActiveButton(id);
+        onClick && onClick(e);
+    };
+    return (React.createElement("div", { ref: responseActions, className: "pf-chatbot__response-actions" },
+        positive && (React.createElement(ResponseActionButton, { ariaLabel: (_a = positive.ariaLabel) !== null && _a !== void 0 ? _a : 'Good response', clickedAriaLabel: (_b = positive.ariaLabel) !== null && _b !== void 0 ? _b : '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 : 'Response recorded', tooltipProps: positive.tooltipProps, icon: React.createElement(OutlinedThumbsUpIcon, null), isClicked: activeButton === 'positive' })),
+        negative && (React.createElement(ResponseActionButton, { ariaLabel: (_e = negative.ariaLabel) !== null && _e !== void 0 ? _e : 'Bad response', clickedAriaLabel: (_f = negative.ariaLabel) !== null && _f !== void 0 ? _f : '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 : 'Response recorded', tooltipProps: negative.tooltipProps, icon: React.createElement(OutlinedThumbsDownIcon, null), isClicked: activeButton === 'negative' })),
+        copy && (React.createElement(ResponseActionButton, { 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: React.createElement(OutlinedCopyIcon, null), isClicked: activeButton === 'copy' })),
+        share && (React.createElement(ResponseActionButton, { ariaLabel: (_o = share.ariaLabel) !== null && _o !== void 0 ? _o : 'Share', clickedAriaLabel: (_p = share.ariaLabel) !== null && _p !== void 0 ? _p : 'Shared', onClick: (e) => handleClick(e, 'share', share.onClick), className: share.className, isDisabled: share.isDisabled, tooltipContent: (_q = share.tooltipContent) !== null && _q !== void 0 ? _q : 'Share', clickedTooltipContent: (_r = share.clickedTooltipContent) !== null && _r !== void 0 ? _r : 'Shared', tooltipProps: share.tooltipProps, icon: React.createElement(ExternalLinkAltIcon, null), isClicked: activeButton === 'share' })),
+        listen && (React.createElement(ResponseActionButton, { ariaLabel: (_s = listen.ariaLabel) !== null && _s !== void 0 ? _s : 'Listen', clickedAriaLabel: (_t = listen.ariaLabel) !== null && _t !== void 0 ? _t : 'Listening', onClick: (e) => handleClick(e, 'listen', listen.onClick), className: listen.className, isDisabled: listen.isDisabled, tooltipContent: (_u = listen.tooltipContent) !== null && _u !== void 0 ? _u : 'Listen', clickedTooltipContent: (_v = listen.clickedTooltipContent) !== null && _v !== void 0 ? _v : 'Listening', tooltipProps: listen.tooltipProps, icon: React.createElement(VolumeUpIcon, null), isClicked: activeButton === 'listen' })),
         Object.keys(additionalActions).map((action) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return (React.createElement(ResponseActionButton, { key: action, ariaLabel: (_a = additionalActions[action]) === null || _a === void 0 ? void 0 : _a.ariaLabel, onClick: (_b = additionalActions[action]) === null || _b === void 0 ? void 0 : _b.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, icon: (_g = additionalActions[action]) === null || _g === void 0 ? void 0 : _g.icon }));
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return (React.createElement(ResponseActionButton, { 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 }));
         })));
 };
 export default ResponseActions;