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

package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.d.ts

@@ -11,5 +11,7 @@ export interface ChatbotHeaderMenuProps {
     menuAriaLabel?: string;
     /** Ref applied to menu */
     innerRef?: React.Ref<HTMLButtonElement>;
+    /** Content used in tooltip */
+    tooltipContent?: string;
 }
 export declare const ChatbotHeaderMenu: React.ForwardRefExoticComponent<ChatbotHeaderMenuProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/ChatbotHeader/ChatbotHeaderMenu.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button, Icon, Tooltip } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-const ChatbotHeaderMenuBase = ({ className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef }) => (React.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    React.createElement(Tooltip, Object.assign({ content: "Menu", position: "bottom" }, tooltipProps),
+const ChatbotHeaderMenuBase = ({ className, onMenuToggle, tooltipProps, menuAriaLabel = 'Toggle menu', innerRef, tooltipContent = 'Menu' }) => (React.createElement("div", { className: `pf-chatbot__menu ${className}` },
+    React.createElement(Tooltip, Object.assign({ content: tooltipContent, position: "bottom" }, tooltipProps),
         React.createElement(Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onMenuToggle, "aria-label": menuAriaLabel, ref: innerRef, icon: React.createElement(Icon, { size: "xl", isInline: true },
                 React.createElement(BarsIcon, null)) }))));
 export const ChatbotHeaderMenu = React.forwardRef((props, ref) => (React.createElement(ChatbotHeaderMenuBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/ChatbotHeader/index.d.ts

@@ -6,3 +6,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';

package/dist/esm/ChatbotHeader/index.js

@@ -6,3 +6,4 @@ export * from './ChatbotHeaderMenu';
 export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
+export * from './ChatbotHeaderCloseButton';

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

@@ -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

@@ -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

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

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

@@ -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

@@ -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

@@ -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;

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

@@ -13,25 +13,30 @@ 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';
 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.createElement(RedoIcon, null)
         },
         download: {
             ariaLabel: 'Download',
+            clickedAriaLabel: 'Downloaded',
             onClick: jest.fn(),
             tooltipContent: 'Download',
+            clickedTooltipContent: 'Downloaded',
             icon: React.createElement(DownloadIcon, null)
         },
         info: {
@@ -43,6 +48,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* () {
+        render(React.createElement(ResponseActions, { actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() },
+                copy: { onClick: jest.fn() },
+                share: { onClick: jest.fn() },
+                listen: { onClick: jest.fn() }
+            } }));
+        const goodBtn = screen.getByRole('button', { name: 'Good response' });
+        const badBtn = screen.getByRole('button', { name: 'Bad response' });
+        const copyBtn = screen.getByRole('button', { name: 'Copy' });
+        const shareBtn = screen.getByRole('button', { name: 'Share' });
+        const listenBtn = screen.getByRole('button', { name: 'Listen' });
+        const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
+        buttons.forEach((button) => {
+            expect(button).toBeTruthy();
+        });
+        yield userEvent.click(goodBtn);
+        expect(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 userEvent.click(badBtn);
+        expect(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
+        render(React.createElement(Message, { name: "Bot", role: "bot", avatar: "", content: "Example with all prebuilt actions", actions: {
+                positive: {},
+                negative: {}
+            } }));
+        const goodBtn = screen.getByRole('button', { name: 'Good response' });
+        const badBtn = screen.getByRole('button', { name: 'Bad response' });
+        expect(goodBtn).toBeTruthy();
+        expect(badBtn).toBeTruthy();
+        yield userEvent.click(goodBtn);
+        expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(badBtn);
+        expect(screen.getByRole('button', { name: 'Response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield userEvent.click(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 }) => {
             render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
@@ -57,6 +115,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 }) {
+            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(screen.getByRole('button', { name: label })).toBeTruthy();
+            yield userEvent.click(screen.getByRole('button', { name: label }));
+            expect(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 }) {
+            render(React.createElement(ResponseActions, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(screen.getByRole('button', { name: label })).toBeTruthy();
+            yield userEvent.click(screen.getByRole('button', { name: label }));
+            expect(screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
+        }));
+    }));
     it('should be able to change aria labels', () => {
         const actions = [
             { type: 'positive', ariaLabel: 'Thumbs up' },

package/dist/esm/Settings/SettingsForm.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SettingsFormProps {
+    /** Class applied to form container */
+    className?: string;
+    /** Array of fields to display in the settings layout */
+    fields?: {
+        id: string;
+        label: string;
+        field: React.ReactElement;
+    }[];
+}
+export declare const SettingsForm: React.FunctionComponent<SettingsFormProps>;
+export default SettingsForm;

package/dist/esm/Settings/SettingsForm.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+export const SettingsForm = (_a) => {
+    var { className, fields = [] } = _a, props = __rest(_a, ["className", "fields"]);
+    return (React.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${className}` }, props),
+        React.createElement("form", { className: "pf-chatbot__settings-form" }, fields.map((field) => (React.createElement("div", { className: "pf-chatbot__settings-form-row", key: field.label },
+            React.createElement("label", { className: "pf-chatbot__settings-label", htmlFor: field.id }, field.label),
+            field.field))))));
+};
+export default SettingsForm;

package/dist/esm/Settings/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SettingsForm';
+export * from './SettingsForm';

package/dist/esm/Settings/index.js

@@ -0,0 +1,2 @@
+export { default } from './SettingsForm';
+export * from './SettingsForm';

package/dist/esm/index.d.ts

@@ -42,6 +42,8 @@ export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
+export { default as Settings } from './Settings';
+export * from './Settings';
 export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 export { default as SourcesCard } from './SourcesCard';

package/dist/esm/index.js

@@ -43,6 +43,8 @@ export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
+export { default as Settings } from './Settings';
+export * from './Settings';
 export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 export { default as SourcesCard } from './SourcesCard';

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.4",
+  "version": "2.2.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/MessageWithCustomResponseActions.tsx

@@ -15,16 +15,20 @@ export const CustomActionExample: React.FunctionComponent = () => (
     actions={{
       regenerate: {
         ariaLabel: 'Regenerate',
+        clickedAriaLabel: 'Regenerated',
         // eslint-disable-next-line no-console
         onClick: () => console.log('Clicked regenerate'),
         tooltipContent: 'Regenerate',
+        clickedTooltipContent: 'Regenerated',
         icon: <RedoIcon />
       },
       download: {
         ariaLabel: 'Download',
+        clickedAriaLabel: 'Downloaded',
         // eslint-disable-next-line no-console
         onClick: () => console.log('Clicked download'),
         tooltipContent: 'Download',
+        clickedTooltipContent: 'Downloaded',
         icon: <DownloadIcon />
       },
       info: {

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

@@ -63,7 +63,7 @@ You can further customize the avatar by applying an additional class or passing
 
 ```
 
-### Messages actions
+### Message actions
 
 You can add actions to a message, to allow users to interact with the message content. These actions can include:
 
@@ -79,7 +79,18 @@ You can add actions to a message, to allow users to interact with the message co
 
 ### Custom message actions
 
-Beyond the standard message actions (positive, negative, copy, share, or listen), you can add custom actions to a bot message by passing an `actions` object to the `<Message>` component. This object can contain the following customizations: `ariaLabel`, `onClick`, `className`, `isDisabled`, `tooltipContent`, `tooltipProps`, and `icon`.
+Beyond the standard message actions (good response, bad response, copy, share, or listen), you can add custom actions to a bot message by passing an `actions` object to the `<Message>` component. This object can contain the following customizations:
+
+- `ariaLabel`
+- `onClick`
+- `className`
+- `isDisabled`
+- `tooltipContent`
+- `tooltipContent`
+- `tooltipProps`
+- `icon`
+
+You can apply a `clickedAriaLabel` and `clickedTooltipContent` once a button is clicked. If either of these props are omitted, their values will default to the `ariaLabel` or `tooltipContent` supplied.
 
 ```js file="./MessageWithCustomResponseActions.tsx"