@patternfly/chatbot 1.0.0

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

@@ -0,0 +1,452 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+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"));
+// Mock the icon components
+jest.mock('@patternfly/react-icons', () => ({
+    OutlinedThumbsUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "OutlinedThumbsUpIcon" }),
+    ThumbsUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ThumbsUpIcon" }),
+    OutlinedThumbsDownIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "OutlinedThumbsDownIcon" }),
+    ThumbsDownIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ThumbsDownIcon" }),
+    OutlinedCopyIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "OutlinedCopyIcon" }),
+    DownloadIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "DownloadIcon" }),
+    InfoCircleIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "InfoCircleIcon" }),
+    RedoIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "RedoIcon" }),
+    ExternalLinkAltIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "ExternalLinkAltIcon" }),
+    VolumeUpIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "VolumeUpIcon" }),
+    PencilAltIcon: () => (0, jsx_runtime_1.jsx)("div", { children: "PencilAltIcon" })
+}));
+const ALL_ACTIONS = [
+    { type: 'positive', label: 'Good response', clickedLabel: 'Good response recorded' },
+    { type: 'negative', label: 'Bad response', clickedLabel: 'Bad response recorded' },
+    { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+    { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
+    { 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: (0, jsx_runtime_1.jsx)(react_icons_1.RedoIcon, {})
+        },
+        download: {
+            ariaLabel: 'Download',
+            clickedAriaLabel: 'Downloaded',
+            onClick: jest.fn(),
+            tooltipContent: 'Download',
+            clickedTooltipContent: 'Downloaded',
+            icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {})
+        },
+        info: {
+            ariaLabel: 'Info',
+            onClick: jest.fn(),
+            tooltipContent: 'Info',
+            icon: (0, jsx_runtime_1.jsx)(react_icons_1.InfoCircleIcon, {})
+        }
+    }
+];
+const ALL_ACTIONS_DATA_TEST = [
+    { type: 'positive', label: 'Good response', dataTestId: 'positive' },
+    { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
+    { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+    { type: 'edit', label: 'Edit', dataTestId: 'edit' },
+    { type: 'share', label: 'Share', dataTestId: 'share' },
+    { type: 'download', label: 'Download', dataTestId: 'download' },
+    { type: 'listen', label: 'Listen', dataTestId: 'listen' }
+];
+describe('ResponseActions', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('should handle click within group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() },
+                copy: { onClick: jest.fn() },
+                edit: { onClick: jest.fn() },
+                share: { onClick: jest.fn() },
+                download: { onClick: jest.fn() },
+                listen: { onClick: jest.fn() }
+            } }));
+        const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_1.screen.getByRole('button', { name: 'Bad response' });
+        const copyBtn = react_1.screen.getByRole('button', { name: 'Copy' });
+        const editBtn = react_1.screen.getByRole('button', { name: 'Edit' });
+        const shareBtn = react_1.screen.getByRole('button', { name: 'Share' });
+        const downloadBtn = react_1.screen.getByRole('button', { name: 'Download' });
+        const listenBtn = react_1.screen.getByRole('button', { name: 'Listen' });
+        const buttons = [goodBtn, badBtn, copyBtn, editBtn, shareBtn, downloadBtn, listenBtn];
+        buttons.forEach((button) => {
+            expect(button).toBeTruthy();
+        });
+        yield user_event_1.default.click(goodBtn);
+        expect(react_1.screen.getByRole('button', { name: 'Good 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_1.screen.getByRole('button', { name: 'Bad 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_1.render)((0, jsx_runtime_1.jsx)(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_1.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_1.screen.getByRole('button', { name: 'Bad response' });
+        expect(goodBtn).toBeTruthy();
+        expect(badBtn).toBeTruthy();
+        yield user_event_1.default.click(goodBtn);
+        expect(react_1.screen.getByRole('button', { name: 'Good 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_1.screen.getByRole('button', { name: 'Bad 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_1.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 handle isClicked prop within group of buttons correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+                negative: { 'data-testid': 'negative-btn', onClick: jest.fn() }
+            } }));
+        expect(react_1.screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should set "listen" button as active if its `isClicked` is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: false },
+                negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: false },
+                listen: { 'data-testid': 'listen-btn', onClick: jest.fn(), isClicked: true }
+            } }));
+        expect(react_1.screen.getByTestId('listen-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByTestId('positive-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should prioritize "positive" when both "positive" and "negative" are set to clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+                negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: true }
+            } }));
+        // Positive button should take precendence
+        expect(react_1.screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(react_1.screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should set an additional action button as active if it is initially clicked and no predefined are clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const [additionalActions] = CUSTOM_ACTIONS;
+        const customActions = Object.assign({ positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false }, negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: false } }, Object.keys(additionalActions).reduce((acc, actionKey) => {
+            acc[actionKey] = Object.assign(Object.assign({}, additionalActions[actionKey]), { 'data-testid': actionKey, isClicked: actionKey === 'regenerate' });
+            return acc;
+        }, {}));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: customActions }));
+        Object.keys(customActions).forEach((actionKey) => {
+            if (actionKey === 'regenerate') {
+                expect(react_1.screen.getByTestId(actionKey)).toHaveClass('pf-chatbot__button--response-action-clicked');
+            }
+            else {
+                // Other actions should not have clicked class
+                expect(react_1.screen.getByTestId(actionKey)).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+            }
+        });
+    }));
+    it('should activate the clicked button and deactivate any previously active button', () => __awaiter(void 0, void 0, void 0, function* () {
+        const actions = {
+            positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+            negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: true }
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions }));
+        const negativeBtn = react_1.screen.getByTestId('negative');
+        const positiveBtn = react_1.screen.getByTestId('positive');
+        // negative button is initially clicked
+        expect(negativeBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(positiveBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(positiveBtn);
+        // positive button should now have the clicked class
+        expect(positiveBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(negativeBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should render buttons correctly', () => {
+        ALL_ACTIONS.forEach(({ type, label }) => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_1.screen.getByRole('button', { name: label })).toBeTruthy();
+        });
+    });
+    it('should be able to call onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        for (const { type, label } of ALL_ACTIONS) {
+            const spy = jest.fn();
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: spy } } }));
+            yield user_event_1.default.click(react_1.screen.getByRole('button', { name: label }));
+            expect(spy).toHaveBeenCalledTimes(1);
+        }
+    }));
+    it('should swap clicked and non-clicked aria labels on click', () => __awaiter(void 0, void 0, void 0, function* () {
+        for (const { type, label, clickedLabel } of ALL_ACTIONS) {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_1.screen.getByRole('button', { name: label })).toBeTruthy();
+            yield user_event_1.default.click(react_1.screen.getByRole('button', { name: label }));
+            expect(react_1.screen.getByRole('button', { name: clickedLabel })).toBeTruthy();
+        }
+    }));
+    it('should swap clicked and non-clicked tooltips on click', () => __awaiter(void 0, void 0, void 0, function* () {
+        for (const { type, label, clickedLabel } of ALL_ACTIONS) {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn() } } }));
+            expect(react_1.screen.getByRole('button', { name: label })).toBeTruthy();
+            yield user_event_1.default.click(react_1.screen.getByRole('button', { name: label }));
+            expect(react_1.screen.getByRole('tooltip', { name: clickedLabel })).toBeTruthy();
+        }
+    }));
+    it('should be able to change aria labels', () => {
+        const actions = [
+            { type: 'positive', ariaLabel: 'Thumbs up' },
+            { type: 'negative', ariaLabel: 'Thumbs down' },
+            { type: 'copy', ariaLabel: 'Copy the message' },
+            { type: 'edit', ariaLabel: 'Edit this message' },
+            { type: 'share', ariaLabel: 'Share it with friends' },
+            { type: 'download', ariaLabel: 'Download your cool message' },
+            { type: 'listen', ariaLabel: 'Listen up' }
+        ];
+        actions.forEach(({ type, ariaLabel }) => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), ariaLabel } } }));
+            expect(react_1.screen.getByRole('button', { name: ariaLabel })).toBeTruthy();
+        });
+    });
+    it('should be able to disable buttons', () => {
+        ALL_ACTIONS.forEach(({ type, label }) => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), isDisabled: true } } }));
+            expect(react_1.screen.getByRole('button', { name: label })).toBeDisabled();
+        });
+    });
+    it('should be able to add class to buttons', () => {
+        ALL_ACTIONS.forEach(({ type, label }) => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), className: 'test' } } }));
+            expect(react_1.screen.getByRole('button', { name: label })).toHaveClass('test');
+        });
+    });
+    it('should be able to add custom attributes to buttons', () => {
+        ALL_ACTIONS_DATA_TEST.forEach(({ type, dataTestId }) => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: { [type]: { onClick: jest.fn(), 'data-testid': dataTestId } } }));
+            expect(react_1.screen.getByTestId(dataTestId)).toBeTruthy();
+        });
+    });
+    it('should be able to add custom actions', () => {
+        CUSTOM_ACTIONS.forEach((action) => {
+            const key = Object.keys(action)[0];
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                    [key]: {
+                        tooltipContent: action[key].tooltipContent,
+                        onClick: action[key].onClick,
+                        // doing this just because it's easier to test without a regex for the button name
+                        ariaLabel: action[key].ariaLabel.toLowerCase(),
+                        icon: action[key].icon,
+                        'data-testid': action[key]
+                    }
+                } }));
+            expect(react_1.screen.getByRole('button', { name: key })).toBeTruthy();
+            expect(react_1.screen.getByTestId(action[key])).toBeTruthy();
+        });
+    });
+    // we are testing for the reverse case already above
+    it('should not deselect when clicking outside when persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "Test content", actions: {
+                positive: {},
+                negative: {}
+            }, persistActionSelection: true }));
+        const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
+        yield user_event_1.default.click(goodBtn);
+        expect(react_1.screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(react_1.screen.getByText('Test content'));
+        expect(react_1.screen.getByRole('button', { name: 'Good response recorded' })).toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should switch selection to another button when persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "Test content", actions: {
+                positive: {},
+                negative: {}
+            }, persistActionSelection: true }));
+        const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
+        const badBtn = react_1.screen.getByRole('button', { name: 'Bad response' });
+        yield user_event_1.default.click(goodBtn);
+        expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(badBtn);
+        expect(badBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should toggle off when clicking the same button when persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(Message_1.default, { name: "Bot", role: "bot", avatar: "", content: "Test content", actions: {
+                positive: {},
+                negative: {}
+            }, persistActionSelection: true }));
+        const goodBtn = react_1.screen.getByRole('button', { name: 'Good response' });
+        yield user_event_1.default.click(goodBtn);
+        expect(goodBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(goodBtn);
+        expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should work with custom actions when persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const actions = {
+            positive: { 'data-testid': 'positive', onClick: jest.fn() },
+            negative: { 'data-testid': 'negative', onClick: jest.fn() },
+            custom: {
+                'data-testid': 'custom',
+                onClick: jest.fn(),
+                ariaLabel: 'Custom',
+                tooltipContent: 'Custom action',
+                icon: (0, jsx_runtime_1.jsx)(react_icons_1.DownloadIcon, {})
+            }
+        };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: actions, persistActionSelection: true }));
+        const customBtn = react_1.screen.getByTestId('custom');
+        yield user_event_1.default.click(customBtn);
+        expect(customBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+        yield user_event_1.default.click(customBtn);
+        expect(customBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    }));
+    it('should apply pf-m-visible-interaction class when showActionsOnInteraction is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            }, showActionsOnInteraction: true }));
+        expect(react_1.screen.getByTestId('test-id')).toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class when showActionsOnInteraction is false', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            }, showActionsOnInteraction: false }));
+        expect(react_1.screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should not apply pf-m-visible-interaction class by default', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            } }));
+        expect(react_1.screen.getByTestId('test-id')).not.toHaveClass('pf-m-visible-interaction');
+    });
+    it('should render with custom className', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { "data-testid": "test-id", actions: {
+                positive: { onClick: jest.fn() },
+                negative: { onClick: jest.fn() }
+            }, className: "custom-class" }));
+        expect(react_1.screen.getByTestId('test-id')).toHaveClass('custom-class');
+    });
+    describe('icon swapping with useFilledIconsOnClick', () => {
+        it('should render outline icons by default', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                    positive: { onClick: jest.fn() },
+                    negative: { onClick: jest.fn() }
+                } }));
+            expect(react_1.screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+            expect(react_1.screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+            expect(react_1.screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+            expect(react_1.screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
+        });
+        describe('positive actions', () => {
+            it('should not swap positive icon when clicked and useFilledIconsOnClick is false', () => __awaiter(void 0, void 0, void 0, function* () {
+                const user = user_event_1.default.setup();
+                (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                        positive: { onClick: jest.fn() }
+                    }, useFilledIconsOnClick: false }));
+                yield user.click(react_1.screen.getByRole('button', { name: 'Good response' }));
+                expect(react_1.screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+                expect(react_1.screen.queryByText('ThumbsUpIcon')).not.toBeInTheDocument();
+            }));
+            it('should swap positive icon from outline to filled when clicked with useFilledIconsOnClick', () => __awaiter(void 0, void 0, void 0, function* () {
+                const user = user_event_1.default.setup();
+                (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                        positive: { onClick: jest.fn() }
+                    }, useFilledIconsOnClick: true }));
+                yield user.click(react_1.screen.getByRole('button', { name: 'Good response' }));
+                expect(react_1.screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+                expect(react_1.screen.queryByText('OutlinedThumbsUpIcon')).not.toBeInTheDocument();
+            }));
+            it('should revert positive icon to outline icon when clicking outside', () => __awaiter(void 0, void 0, void 0, function* () {
+                const user = user_event_1.default.setup();
+                (0, react_1.render)((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                                positive: { onClick: jest.fn() }
+                            }, useFilledIconsOnClick: true }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "outside", children: "Outside" })] }));
+                yield user.click(react_1.screen.getByRole('button', { name: 'Good response' }));
+                expect(react_1.screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+                yield user.click(react_1.screen.getByTestId('outside'));
+                expect(react_1.screen.getByText('OutlinedThumbsUpIcon')).toBeInTheDocument();
+            }));
+            it('should not revert positive icon to outline icon when clicking outside if persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+                const user = user_event_1.default.setup();
+                (0, react_1.render)((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                                positive: { onClick: jest.fn() }
+                            }, persistActionSelection: true, useFilledIconsOnClick: true }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "outside", children: "Outside" })] }));
+                yield user.click(react_1.screen.getByRole('button', { name: 'Good response' }));
+                expect(react_1.screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+                yield user.click(react_1.screen.getByTestId('outside'));
+                expect(react_1.screen.getByText('ThumbsUpIcon')).toBeInTheDocument();
+            }));
+            describe('negative actions', () => {
+                it('should not swap negative icon when clicked and useFilledIconsOnClick is false', () => __awaiter(void 0, void 0, void 0, function* () {
+                    const user = user_event_1.default.setup();
+                    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                            negative: { onClick: jest.fn() }
+                        }, useFilledIconsOnClick: false }));
+                    yield user.click(react_1.screen.getByRole('button', { name: 'Bad response' }));
+                    expect(react_1.screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+                    expect(react_1.screen.queryByText('ThumbsDownIcon')).not.toBeInTheDocument();
+                }));
+                it('should swap negative icon from outline to filled when clicked with useFilledIconsOnClick', () => __awaiter(void 0, void 0, void 0, function* () {
+                    const user = user_event_1.default.setup();
+                    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                            negative: { onClick: jest.fn() }
+                        }, useFilledIconsOnClick: true }));
+                    yield user.click(react_1.screen.getByRole('button', { name: 'Bad response' }));
+                    expect(react_1.screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+                    expect(react_1.screen.queryByText('OutlinedThumbsDownIcon')).not.toBeInTheDocument();
+                }));
+                it('should revert negative icon to outline when clicking outside', () => __awaiter(void 0, void 0, void 0, function* () {
+                    const user = user_event_1.default.setup();
+                    (0, react_1.render)((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                                    negative: { onClick: jest.fn() }
+                                }, useFilledIconsOnClick: true }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "outside", children: "Outside" })] }));
+                    yield user.click(react_1.screen.getByRole('button', { name: 'Bad response' }));
+                    expect(react_1.screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+                    yield user.click(react_1.screen.getByTestId('outside'));
+                    expect(react_1.screen.getByText('OutlinedThumbsDownIcon')).toBeInTheDocument();
+                }));
+                it('should not revert negative icon to outline icon when clicking outside if persistActionSelection is true', () => __awaiter(void 0, void 0, void 0, function* () {
+                    const user = user_event_1.default.setup();
+                    (0, react_1.render)((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ResponseActions_1.default, { actions: {
+                                    negative: { onClick: jest.fn() }
+                                }, persistActionSelection: true, useFilledIconsOnClick: true }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "outside", children: "Outside" })] }));
+                    yield user.click(react_1.screen.getByRole('button', { name: 'Bad response' }));
+                    expect(react_1.screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+                    yield user.click(react_1.screen.getByTestId('outside'));
+                    expect(react_1.screen.getByText('ThumbsDownIcon')).toBeInTheDocument();
+                }));
+            });
+        });
+    });
+});

package/dist/cjs/ResponseActions/ResponseActionsGroups.d.ts

@@ -0,0 +1,13 @@
+import { FunctionComponent, HTMLProps, ReactNode } from 'react';
+/**
+ * The container for grouping multiple related ResponseActions components, typically used for having different persistence states amongst groups.
+ * Use this component when passing children to Message to customize its structure.
+ */
+export interface ResponseActionsGroupsProps extends HTMLProps<HTMLDivElement> {
+    /** Content to render inside the response actions groups container */
+    children: ReactNode;
+    /** Additional classes applied to the response actions groups container. */
+    className?: string;
+}
+export declare const ResponseActionsGroups: FunctionComponent<ResponseActionsGroupsProps>;
+export default ResponseActionsGroups;

package/dist/cjs/ResponseActions/ResponseActionsGroups.js

@@ -0,0 +1,22 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponseActionsGroups = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_styles_1 = require("@patternfly/react-styles");
+const ResponseActionsGroups = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, react_styles_1.css)('pf-chatbot__response-actions-groups', className) }, props, { children: children })));
+};
+exports.ResponseActionsGroups = ResponseActionsGroups;
+exports.default = exports.ResponseActionsGroups;

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_1 = require("@testing-library/react");
+const ResponseActionsGroups_1 = __importDefault(require("./ResponseActionsGroups"));
+test('Renders with children', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toBeInTheDocument();
+});
+test('Renders with pf-chatbot__response-actions-groups class by default', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toHaveClass('pf-chatbot__response-actions-groups', { exact: true });
+});
+test('Renders with custom className', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { className: "custom-class", children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toHaveClass('custom-class');
+});
+test('Spreads additional props', () => {
+    (0, react_1.render)((0, jsx_runtime_1.jsx)(ResponseActionsGroups_1.default, { id: "test-id", children: "Test content" }));
+    expect(react_1.screen.getByText('Test content')).toHaveAttribute('id', 'test-id');
+});

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

@@ -0,0 +1,3 @@
+export { default } from './ResponseActions';
+export * from './ResponseActions';
+export * from './ResponseActionsGroups';

package/dist/cjs/ResponseActions/index.js

@@ -0,0 +1,24 @@
+"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 ResponseActions_1 = require("./ResponseActions");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ResponseActions_1).default; } });
+__exportStar(require("./ResponseActions"), exports);
+__exportStar(require("./ResponseActionsGroups"), exports);

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

@@ -0,0 +1,15 @@
+import type { FunctionComponent } 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;
+    }[];
+    /** Sets form to compact styling. */
+    isCompact?: boolean;
+}
+export declare const SettingsForm: FunctionComponent<SettingsFormProps>;
+export default SettingsForm;

package/dist/cjs/Settings/SettingsForm.js

@@ -0,0 +1,21 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const SettingsForm = (_a) => {
+    var { className, fields = [], isCompact } = _a, props = __rest(_a, ["className", "fields", "isCompact"]);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}` }, props, { children: (0, jsx_runtime_1.jsx)("form", { className: "pf-chatbot__settings-form", children: fields.map((field) => ((0, jsx_runtime_1.jsxs)("div", { className: "pf-chatbot__settings-form-row", children: [(0, jsx_runtime_1.jsx)("label", { className: "pf-chatbot__settings-label", htmlFor: field.id, children: field.label }), field.field] }, field.label))) }) })));
+};
+exports.SettingsForm = SettingsForm;
+exports.default = exports.SettingsForm;

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

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

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_core_1 = require("@patternfly/react-core");
+const react_1 = require("@testing-library/react");
+const SettingsForm_1 = require("./SettingsForm");
+require("@testing-library/jest-dom");
+describe('SettingsForm', () => {
+    it('should render settingsForm with custom classname', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(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: ((0, jsx_runtime_1.jsx)(react_core_1.Button, { id: "archived-chat", variant: "secondary", children: "Archive chat" }))
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SettingsForm_1.SettingsForm, { fields: fields }));
+        expect(react_1.screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+    });
+    it('should render settingsForm with isCompact', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: ((0, jsx_runtime_1.jsx)(react_core_1.Button, { id: "archived-chat", variant: "secondary", children: "Archive chat" }))
+            }
+        ];
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(SettingsForm_1.SettingsForm, { "data-testid": "settings-form", fields: fields, isCompact: true }));
+        expect(react_1.screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+    });
+});

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

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