@patternfly/chatbot 2.1.0 → 2.2.0-prerelease.10

package/dist/esm/Message/QuickStarts/types.d.ts

@@ -0,0 +1,132 @@
+import { ButtonProps } from '@patternfly/react-core';
+export interface AccessReviewResourceAttributes {
+    group?: string;
+    resource?: string;
+    subresource?: string;
+    verb?: K8sVerb;
+    name?: string;
+    namespace?: string;
+}
+export type K8sVerb = 'create' | 'get' | 'list' | 'update' | 'patch' | 'delete' | 'deletecollection' | 'watch';
+export interface QuickStart {
+    apiVersion?: string;
+    kind?: string;
+    metadata: ObjectMetadata;
+    spec: QuickStartSpec;
+}
+export interface ObjectMetadata {
+    name: string;
+    annotations?: {
+        [key: string]: string;
+    };
+    clusterName?: string;
+    creationTimestamp?: string;
+    deletionGracePeriodSeconds?: number;
+    deletionTimestamp?: string;
+    finalizers?: string[];
+    generateName?: string;
+    generation?: number;
+    labels?: {
+        [key: string]: string;
+    };
+    managedFields?: any[];
+    namespace?: string;
+    ownerReferences?: OwnerReference[];
+    resourceVersion?: string;
+    uid?: string;
+    language?: string;
+    country?: string;
+    locale?: string;
+    [key: string]: any;
+}
+export interface OwnerReference {
+    name: string;
+    kind: string;
+    uid: string;
+    apiVersion: string;
+    controller?: boolean;
+    blockOwnerDeletion?: boolean;
+}
+export interface QuickStartTask {
+    title?: string;
+    description?: string;
+    review?: QuickStartTaskReview;
+    summary?: QuickStartTaskSummary;
+    proc?: string;
+}
+export interface QuickStartTaskReview {
+    instructions?: string;
+    failedTaskHelp?: string;
+}
+export interface QuickStartTaskSummary {
+    success?: string;
+    failed?: string;
+}
+export interface QuickstartAction {
+    /** Screen reader aria label. */
+    'aria-label': string;
+    /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
+    icon?: React.ComponentType<unknown>;
+    /** Callback with synthetic event parameter. */
+    onClick?: (e: React.SyntheticEvent) => void;
+    /** Additional button props to be rendered as extra props. */
+    buttonProps?: ButtonProps;
+}
+export interface QuickStart {
+    apiVersion?: string;
+    kind?: string;
+    metadata: ObjectMetadata;
+    spec: QuickStartSpec;
+}
+export interface QuickStartSpec {
+    version?: number;
+    displayName: string;
+    durationMinutes?: number;
+    icon: React.ReactNode;
+    description: string;
+    prerequisites?: string[];
+    introduction?: string;
+    tasks?: QuickStartTask[];
+    conclusion?: string;
+    nextQuickStart?: string[];
+    accessReviewResources?: AccessReviewResourceAttributes[];
+    link?: QuickStartExternal;
+    type?: QuickStartType;
+}
+export interface QuickStartTask {
+    title?: string;
+    description?: string;
+    review?: QuickStartTaskReview;
+    summary?: QuickStartTaskSummary;
+    proc?: string;
+}
+export interface QuickStartTaskReview {
+    instructions?: string;
+    failedTaskHelp?: string;
+}
+export interface QuickStartTaskSummary {
+    success?: string;
+    failed?: string;
+}
+export type AllQuickStartStates = Record<string, QuickStartState>;
+export type QuickStartState = Record<string, string | number | QuickStartStatus>;
+export declare enum QuickStartStatus {
+    COMPLETE = "Complete",
+    IN_PROGRESS = "In Progress",
+    NOT_STARTED = "Not started"
+}
+export declare enum QuickStartTaskStatus {
+    INIT = "Initial",
+    VISITED = "Visited",
+    REVIEW = "Review",
+    SUCCESS = "Success",
+    FAILED = "Failed"
+}
+export interface QuickStartExternal {
+    href: string;
+    text?: string;
+}
+export interface QuickStartType {
+    text: string;
+    color?: 'green' | 'purple' | 'grey' | 'blue' | 'orange' | 'red' | 'teal' | 'orangered' | 'yellow';
+}

package/dist/esm/Message/QuickStarts/types.js

@@ -0,0 +1,14 @@
+export var QuickStartStatus;
+(function (QuickStartStatus) {
+    QuickStartStatus["COMPLETE"] = "Complete";
+    QuickStartStatus["IN_PROGRESS"] = "In Progress";
+    QuickStartStatus["NOT_STARTED"] = "Not started";
+})(QuickStartStatus || (QuickStartStatus = {}));
+export var QuickStartTaskStatus;
+(function (QuickStartTaskStatus) {
+    QuickStartTaskStatus["INIT"] = "Initial";
+    QuickStartTaskStatus["VISITED"] = "Visited";
+    QuickStartTaskStatus["REVIEW"] = "Review";
+    QuickStartTaskStatus["SUCCESS"] = "Success";
+    QuickStartTaskStatus["FAILED"] = "Failed";
+})(QuickStartTaskStatus || (QuickStartTaskStatus = {}));

package/dist/esm/MessageBar/SendButton.js

@@ -19,7 +19,7 @@ import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-pla
 export const SendButton = (_a) => {
     var { className, onClick, tooltipProps, tooltipContent = 'Send' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
     return (React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', 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, Object.assign({ className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
+        React.createElement(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
                 React.createElement(PaperPlaneIcon, null)) }, props))));
 };
 export default SendButton;

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/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/esm/TermsOfUse/TermsOfUse.js

@@ -0,0 +1,42 @@
+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;
+};
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+import React from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+export const TermsOfUseBase = (_a) => {
+    var { handleModalToggle, isModalOpen, onPrimaryAction, onSecondaryAction, primaryActionBtn = 'Accept', secondaryActionBtn = 'Decline', title = 'Terms of use', image, altText, displayMode = 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.createElement(ChatbotModal, 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.createElement("section", { className: `pf-chatbot__terms-of-use--section`, "aria-label": title, tabIndex: -1, ref: innerRef },
+            React.createElement(ModalHeader, null,
+                React.createElement("div", { className: "pf-chatbot__terms-of-use--header" },
+                    image && altText && React.createElement("img", { src: image, className: "pf-chatbot__terms-of-use--image", alt: altText }),
+                    React.createElement("h1", { className: "pf-chatbot__terms-of-use--title" }, title))),
+            React.createElement(ModalBody, null,
+                React.createElement(Content, null, children)),
+            React.createElement(ModalFooter, { className: "pf-chatbot__terms-of-use--footer" },
+                React.createElement(Button, { isBlock: true, key: "terms-of-use-modal-primary", variant: "primary", onClick: handlePrimaryAction, form: "terms-of-use-form", size: "lg" }, primaryActionBtn),
+                React.createElement(Button, { isBlock: true, key: "terms-of-use-modal-secondary", variant: "secondary", onClick: handleSecondaryAction, size: "lg" }, secondaryActionBtn)))));
+    return modal;
+};
+const TermsOfUse = React.forwardRef((props, ref) => (React.createElement(TermsOfUseBase, Object.assign({ innerRef: ref }, props))));
+export default TermsOfUse;

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

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