@patternfly/chatbot 2.2.0-prerelease.3 → 2.2.0-prerelease.31

package/dist/cjs/PreviewAttachment/PreviewAttachment.test.js

@@ -0,0 +1,28 @@
+"use strict";
+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");
+const PreviewAttachment_1 = require("./PreviewAttachment");
+describe('PreviewAttachment', () => {
+    it('should render PreviewAttachment', () => {
+        (0, react_2.render)(react_1.default.createElement(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: jest.fn() }));
+        expect(react_2.screen.getByText('Preview attachment')).toBeTruthy();
+        expect(react_2.screen.getByText('greetings')).toBeTruthy();
+        expect(react_2.screen.getAllByText('TEXT')).toBeTruthy();
+    });
+    it('should call onEdit handler when edit button is pressed', () => {
+        const onEdit = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: onEdit, handleModalToggle: jest.fn() }));
+        react_2.fireEvent.click(react_2.screen.getByText('Edit'));
+        expect(onEdit).toHaveBeenCalled();
+    });
+    it('should call onDismiss handler when dismiss button is pressed', () => {
+        const onDismiss = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(PreviewAttachment_1.PreviewAttachment, { code: "Hello world", fileName: "greetings.txt", isModalOpen: true, onEdit: jest.fn(), handleModalToggle: onDismiss }));
+        react_2.fireEvent.click(react_2.screen.getByText('Dismiss'));
+        expect(onDismiss).toHaveBeenCalled();
+    });
+});

package/dist/cjs/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,15 @@ 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;
+    /** Ref applied to button  */
+    innerRef?: React.Ref<HTMLButtonElement>;
 }
-export declare const ResponseActionButton: React.FunctionComponent<ResponseActionButtonProps>;
+export declare const ResponseActionButtonBase: React.FunctionComponent<ResponseActionButtonProps>;
+declare const ResponseActionButton: React.ForwardRefExoticComponent<ResponseActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default ResponseActionButton;

package/dist/cjs/ResponseActions/ResponseActionButton.js

@@ -1,12 +1,35 @@
 "use strict";
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResponseActionButton = void 0;
+exports.ResponseActionButtonBase = 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" })));
-exports.ResponseActionButton = ResponseActionButton;
-exports.default = exports.ResponseActionButton;
+const ResponseActionButtonBase = (_a) => {
+    var { ariaLabel, clickedAriaLabel = ariaLabel, className, icon, isDisabled, onClick, tooltipContent, clickedTooltipContent = tooltipContent, tooltipProps, isClicked = false, innerRef } = _a, props = __rest(_a, ["ariaLabel", "clickedAriaLabel", "className", "icon", "isDisabled", "onClick", "tooltipContent", "clickedTooltipContent", "tooltipProps", "isClicked", "innerRef"]);
+    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, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
+        react_1.default.createElement(react_core_1.Button, Object.assign({ 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", ref: innerRef }, props))));
+};
+exports.ResponseActionButtonBase = ResponseActionButtonBase;
+const ResponseActionButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.ResponseActionButtonBase, Object.assign({ innerRef: ref }, props))));
+exports.default = ResponseActionButton;

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

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

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

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

@@ -1,8 +1,10 @@
 import React from 'react';
-import { TooltipProps } from '@patternfly/react-core';
-export interface ActionProps {
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ActionProps extends Omit<ButtonProps, 'ref'> {
     /** 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,10 +13,18 @@ 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 */
     icon?: React.ReactNode;
+    /** Ref for response action button */
+    ref?: React.Ref<HTMLButtonElement>;
+    /** Whether content launched by button, such as the feedback form, is expanded */
+    'aria-expanded'?: boolean;
+    /** Id for content controlled by the button, such as the feedback form */
+    'aria-controls'?: string;
 }
 export interface ResponseActionProps {
     /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */

package/dist/cjs/ResponseActions/ResponseActions.js

@@ -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', ref: positive.ref, "aria-expanded": positive['aria-expanded'], "aria-controls": positive['aria-controls'] })),
+        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', ref: negative.ref, "aria-expanded": negative['aria-expanded'], "aria-controls": negative['aria-controls'] })),
+        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', ref: copy.ref, "aria-expanded": copy['aria-expanded'], "aria-controls": copy['aria-controls'] })),
+        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', ref: share.ref, "aria-expanded": share['aria-expanded'], "aria-controls": share['aria-controls'] })),
+        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', ref: listen.ref, "aria-expanded": listen['aria-expanded'], "aria-controls": listen['aria-controls'] })),
         Object.keys(additionalActions).map((action) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            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, _j, _k, _l;
+            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, ref: (_j = additionalActions[action]) === null || _j === void 0 ? void 0 : _j.ref, "aria-expanded": (_k = additionalActions[action]) === null || _k === void 0 ? void 0 : _k['aria-expanded'], "aria-controls": (_l = additionalActions[action]) === null || _l === void 0 ? void 0 : _l['aria-controls'] }));
         })));
 };
 exports.ResponseActions = ResponseActions;

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

@@ -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: "I updated your account with those settings. You're ready to set up your first dashboard!", 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("I updated your account with those settings. You're ready to set up your first dashboard!"));
+        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/cjs/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/cjs/Settings/SettingsForm.js

@@ -0,0 +1,27 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsForm = void 0;
+const react_1 = __importDefault(require("react"));
+const SettingsForm = (_a) => {
+    var { className, fields = [] } = _a, props = __rest(_a, ["className", "fields"]);
+    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${className}` }, props),
+        react_1.default.createElement("form", { className: "pf-chatbot__settings-form" }, fields.map((field) => (react_1.default.createElement("div", { className: "pf-chatbot__settings-form-row", key: field.label },
+            react_1.default.createElement("label", { className: "pf-chatbot__settings-label", htmlFor: field.id }, field.label),
+            field.field))))));
+};
+exports.SettingsForm = SettingsForm;
+exports.default = exports.SettingsForm;

package/dist/cjs/Settings/SettingsForm.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/Settings/SettingsForm.test.js

@@ -0,0 +1,26 @@
+"use strict";
+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_core_1 = require("@patternfly/react-core");
+const react_2 = require("@testing-library/react");
+const SettingsForm_1 = require("./SettingsForm");
+describe('SettingsForm', () => {
+    it('should render settingsForm with custom classname', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { className: "custom-settings" }));
+        expect(container.querySelector('.custom-settings')).toBeTruthy();
+    });
+    it('should render settingsForm with fields', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: (react_1.default.createElement(react_core_1.Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+            }
+        ];
+        (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { fields: fields }));
+        expect(react_2.screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+    });
+});

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

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

package/dist/cjs/Settings/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var SettingsForm_1 = require("./SettingsForm");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(SettingsForm_1).default; } });
+__exportStar(require("./SettingsForm"), exports);

package/dist/cjs/TermsOfUse/TermsOfUse.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+export interface TermsOfUseProps extends ModalProps {
+    /** Class applied to modal */
+    className?: string;
+    /** Action assigned to primary modal button */
+    onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Action assigned to secondary modal button */
+    onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Name of primary modal button */
+    primaryActionBtn?: string;
+    /** Name of secondary modal button */
+    secondaryActionBtn?: string;
+    /** Function that handles modal toggle */
+    handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+    /** Whether modal is open */
+    isModalOpen: boolean;
+    /** Title of modal */
+    title?: string;
+    /** Display mode for the Chatbot parent; this influences the styles applied */
+    displayMode?: ChatbotDisplayMode;
+    /** Optional image displayed in header */
+    image?: string;
+    /** Alt text for optional image displayed in header */
+    altText?: string;
+    /** Ref applied to modal */
+    innerRef?: React.Ref<HTMLDivElement>;
+    /** OuiaID applied to modal */
+    ouiaId?: string;
+}
+export declare const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps>;
+declare const TermsOfUse: React.ForwardRefExoticComponent<Omit<TermsOfUseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default TermsOfUse;

package/dist/cjs/TermsOfUse/TermsOfUse.js

@@ -0,0 +1,49 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TermsOfUseBase = void 0;
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const Chatbot_1 = require("../Chatbot");
+const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
+const TermsOfUseBase = (_a) => {
+    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = Chatbot_1.ChatbotDisplayMode.default, className, children, innerRef, ouiaId = 'TermsOfUse' } = _a, props = __rest(_a, ["handleModalToggle", "isModalOpen", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "image", "altText", "displayMode", "className", "children", "innerRef", "ouiaId"]);
+    const handlePrimaryAction = (_event) => {
+        handleModalToggle(_event);
+        onPrimaryAction && onPrimaryAction(_event);
+    };
+    const handleSecondaryAction = (_event) => {
+        onSecondaryAction(_event);
+    };
+    const modal = (react_1.default.createElement(ChatbotModal_1.default, Object.assign({ isOpen: isModalOpen, ouiaId: ouiaId, "aria-labelledby": "terms-of-use-title", "aria-describedby": "terms-of-use-modal", className: `pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`, displayMode: displayMode }, props),
+        react_1.default.createElement("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef },
+            react_1.default.createElement(react_core_1.ModalHeader, null,
+                react_1.default.createElement("div", { className: "pf-chatbot__terms-of-use--header" },
+                    image && altText && react_1.default.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText }),
+                    react_1.default.createElement("h1", { className: "pf-chatbot__terms-of-use--title" }, title))),
+            react_1.default.createElement(react_core_1.ModalBody, null,
+                react_1.default.createElement(react_core_1.Content, null, children)),
+            react_1.default.createElement(react_core_1.ModalFooter, { className: "pf-chatbot__terms-of-use--footer" },
+                react_1.default.createElement(react_core_1.Button, { isBlock: true, key: "terms-of-use-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg" }, primaryActionBtn),
+                react_1.default.createElement(react_core_1.Button, { isBlock: true, key: "terms-of-use-modal-secondary", variant: "secondary", onClick: handleSecondaryAction, size: "lg" }, secondaryActionBtn)))));
+    return modal;
+};
+exports.TermsOfUseBase = TermsOfUseBase;
+const TermsOfUse = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(exports.TermsOfUseBase, Object.assign({ innerRef: ref }, props))));
+exports.default = TermsOfUse;

package/dist/cjs/TermsOfUse/TermsOfUse.test.d.ts

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