@patternfly/chatbot 2.2.0-prerelease.2 → 2.2.0-prerelease.20

package/dist/cjs/Message/UserFeedback/UserFeedbackComplete.test.js

@@ -0,0 +1,249 @@
+"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 UserFeedbackComplete_1 = __importDefault(require("./UserFeedbackComplete"));
+describe('UserFeedbackComplete', () => {
+    it('should render correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12" }));
+        expect(react_2.screen.getByText('Feedback submitted')).toBeTruthy();
+        react_2.screen.getByText(/We've received your response. Thank you for sharing your feedback!/i);
+        expect(react_2.screen.queryByRole('button', { name: /Close/i })).toBeFalsy();
+    });
+    it('should render different title correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", title: "Thanks!" }));
+        expect(react_2.screen.getByText('Thanks!')).toBeTruthy();
+        react_2.screen.getByText(/We've received your response. Thank you for sharing your feedback!/i);
+    });
+    it('should render different string body correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", body: "Thanks!" }));
+        expect(react_2.screen.getByText('Feedback submitted')).toBeTruthy();
+        expect(react_2.screen.getByText('Thanks!')).toBeTruthy();
+    });
+    it('should render different node body correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", body: react_1.default.createElement("div", null, "Thanks!") }));
+        expect(react_2.screen.getByText('Feedback submitted')).toBeTruthy();
+        expect(react_2.screen.getByText('Thanks!')).toBeTruthy();
+    });
+    it('should handle onClose correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", onClose: spy }));
+        const closeButton = react_2.screen.getByRole('button', { name: 'Close feedback for message received at 12/12/12' });
+        expect(closeButton).toBeTruthy();
+        yield user_event_1.default.click(closeButton);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to change close button aria label', () => {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", onClose: spy, closeButtonAriaLabel: "Ima button" }));
+        expect(react_2.screen.getByRole('button', { name: /Ima button/i })).toBeTruthy();
+    });
+    it('should handle className', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", className: "test", "data-testid": "card" }));
+        expect(react_2.screen.getByTestId('card')).toHaveClass('test');
+    }));
+    it('should apply id', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", id: "test", "data-testid": "card" }));
+        expect(react_2.screen.getByTestId('card').parentElement).toHaveAttribute('id', 'test');
+    }));
+    it('renders with no timeout by default', () => {
+        jest.useFakeTimers();
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12" }));
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(8000);
+        });
+        expect(react_2.screen.getByText('Feedback submitted')).toBeVisible();
+        jest.useRealTimers();
+    });
+    it('should handle timeout correctly after 8000ms when timeout = true', () => __awaiter(void 0, void 0, void 0, function* () {
+        jest.useFakeTimers();
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true }));
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(7999);
+        });
+        expect(react_2.screen.getByText('Feedback submitted')).toBeVisible();
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(1);
+        });
+        expect(react_2.screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+        jest.useRealTimers();
+    }));
+    it('should handle timeout correctly when timeout = numeric value', () => __awaiter(void 0, void 0, void 0, function* () {
+        jest.useFakeTimers();
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: 300 }));
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(299);
+        });
+        expect(react_2.screen.getByText('Feedback submitted')).toBeVisible();
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(1);
+        });
+        expect(react_2.screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+        jest.useRealTimers();
+    }));
+    it('does not get removed on timeout if the user is focused on the card', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup({
+            advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+        });
+        jest.useFakeTimers();
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true, "data-testid": "card" }));
+        expect(react_2.screen.getByText('Feedback submitted')).toBeTruthy();
+        yield user.click(react_2.screen.getByTestId('card'));
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(8000);
+        });
+        expect(react_2.screen.getByText('Feedback submitted')).toBeTruthy();
+        jest.useRealTimers();
+    }));
+    it('does not remove the card on timeout if the user is hovered over it', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup({
+            advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+        });
+        jest.useFakeTimers();
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true, "data-testid": "card" }));
+        const card = react_2.screen.getByTestId('card');
+        yield user.hover(card);
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(8000);
+        });
+        expect(card).toBeVisible();
+        jest.useRealTimers();
+    }));
+    it('removes the card after the user removes focus from the card and 3000ms have passed', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup({
+            advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+        });
+        jest.useFakeTimers();
+        (0, react_2.render)(react_1.default.createElement("div", null,
+            react_1.default.createElement("input", null),
+            react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true, "data-testid": "card" })));
+        const card = react_2.screen.getByTestId('card');
+        yield user.click(card);
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(8000);
+        });
+        yield user.click(react_2.screen.getByRole('textbox'));
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(3000);
+        });
+        expect(react_2.screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+        jest.useRealTimers();
+    }));
+    it('removes the card after the user removes hover from the card and 3000ms have passed', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup({
+            advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+        });
+        jest.useFakeTimers();
+        (0, react_2.render)(react_1.default.createElement("div", null,
+            react_1.default.createElement("input", null),
+            react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true, "data-testid": "card" })));
+        const card = react_2.screen.getByTestId('card');
+        yield user.hover(card);
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(8000);
+        });
+        yield user.hover(react_2.screen.getByRole('textbox'));
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(3000);
+        });
+        expect(react_2.screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+        jest.useRealTimers();
+    }));
+    it('removes the card after the user removes hover from the card and timeoutAnimation time has passed', () => __awaiter(void 0, void 0, void 0, function* () {
+        const user = user_event_1.default.setup({
+            advanceTimers: (delay) => jest.advanceTimersByTime(delay)
+        });
+        jest.useFakeTimers();
+        (0, react_2.render)(react_1.default.createElement("div", null,
+            react_1.default.createElement("input", null),
+            react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true, "data-testid": "card", timeoutAnimation: 1000 })));
+        const card = react_2.screen.getByTestId('card');
+        yield user.hover(card);
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(8000);
+        });
+        yield user.hover(react_2.screen.getByRole('textbox'));
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(1000);
+        });
+        expect(react_2.screen.queryByText('Feedback submitted')).not.toBeInTheDocument();
+        jest.useRealTimers();
+    }));
+    it('does not call the onTimeout callback before the timeout period has expired', () => {
+        const spy = jest.fn();
+        jest.useFakeTimers();
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true, "data-testid": "card", onTimeout: spy }));
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(7999);
+        });
+        expect(spy).not.toHaveBeenCalled();
+        jest.useRealTimers();
+    });
+    it('calls the onTimeout callback after the timeout period has expired', () => {
+        jest.useFakeTimers();
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true, "data-testid": "card", onTimeout: spy }));
+        (0, react_2.act)(() => {
+            jest.advanceTimersByTime(8000);
+        });
+        expect(spy).toHaveBeenCalledTimes(1);
+        jest.useRealTimers();
+    });
+    it('renders without aria-live and aria-atomic attributes by default', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true, "data-testid": "card" }));
+        const card = react_2.screen.getByTestId('card').parentElement;
+        expect(card).not.toHaveAttribute('aria-live');
+        expect(card).not.toHaveAttribute('aria-atomic');
+    });
+    it('has an aria-live value of polite and aria-atomic value of false when isLiveRegion = true', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", timeout: true, "data-testid": "card", isLiveRegion: true }));
+        const card = react_2.screen.getByTestId('card').parentElement;
+        expect(card).toHaveAttribute('aria-live', 'polite');
+        expect(card).toHaveAttribute('aria-atomic', 'false');
+    });
+    it('calls onMouseEnter appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        const user = user_event_1.default.setup();
+        (0, react_2.render)(react_1.default.createElement("div", null,
+            react_1.default.createElement("input", null),
+            react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", "data-testid": "card", onMouseEnter: spy })));
+        const card = react_2.screen.getByTestId('card');
+        expect(spy).toHaveBeenCalledTimes(0);
+        yield user.hover(card);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('calls onMouseLeave appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        const user = user_event_1.default.setup();
+        (0, react_2.render)(react_1.default.createElement("div", null,
+            react_1.default.createElement("input", null),
+            react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", "data-testid": "card", onMouseLeave: spy })));
+        const card = react_2.screen.getByTestId('card');
+        expect(spy).toHaveBeenCalledTimes(0);
+        yield user.hover(card);
+        yield user.hover(react_2.screen.getByRole('textbox'));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should focus on load by default', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", "data-testid": "card" }));
+        expect(react_2.screen.getByTestId('card').parentElement).toHaveFocus();
+    });
+    it('should not focus on load if focusOnLoad = false', () => {
+        (0, react_2.render)(react_1.default.createElement(UserFeedbackComplete_1.default, { timestamp: "12/12/12", "data-testid": "card", focusOnLoad: false }));
+        expect(react_2.screen.getByTestId('card').parentElement).not.toHaveFocus();
+    });
+});

package/dist/cjs/MessageBar/AttachButton.js

@@ -30,8 +30,10 @@ const AttachButtonBase = (_a) => {
         onDropAccepted: onAttachAccepted
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", Object.assign({ "data-testid": inputTestId }, getInputProps())),
-        react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, 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_1.default.createElement("input", Object.assign({ "data-testid": inputTestId }, getInputProps(), { hidden: true })),
+        react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, 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, 
+            // prevents VO announcements of both aria label and tooltip
+            aria: "none" }, tooltipProps),
             react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach button', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
                     react_1.default.createElement(paperclip_icon_1.PaperclipIcon, null)) }, props)))));
 };

package/dist/cjs/MessageBar/MessageBar.js

@@ -54,17 +54,14 @@ const MessageBar = (_a) => {
     };
     // Handle sending message
     const handleSend = react_1.default.useCallback(() => {
-        setMessage((m) => {
-            onSendMessage(m);
-            setMessage('');
-            if (textareaRef.current) {
-                textareaRef.current.innerText = '';
-                setShowPlaceholder(true);
-                textareaRef.current.blur();
-            }
-            return '';
-        });
-    }, [onSendMessage]);
+        onSendMessage(message);
+        if (textareaRef.current) {
+            textareaRef.current.innerText = '';
+            setShowPlaceholder(true);
+            textareaRef.current.blur();
+        }
+        setMessage('');
+    }, [onSendMessage, message]);
     const handleKeyDown = react_1.default.useCallback((event) => {
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
@@ -72,7 +69,7 @@ const MessageBar = (_a) => {
                 handleSend();
             }
         }
-    }, [handleSend]);
+    }, [handleSend, isSendButtonDisabled, handleStopButton]);
     const handleAttachMenuToggle = () => {
         (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(!(attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.isAttachMenuOpen)));
         attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuToggleClick();

package/dist/cjs/MessageBar/MessageBar.test.js

@@ -12,14 +12,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");
 const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
 const react_2 = require("@testing-library/react");
-require("@testing-library/jest-dom");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const MessageBar_1 = require("./MessageBar");
-const react_core_1 = require("@patternfly/react-core");
 const SourceDetailsMenuItem_1 = __importDefault(require("../SourceDetailsMenuItem"));
-const react_icons_1 = require("@patternfly/react-icons");
+const MessageBar_1 = require("./MessageBar");
 const ATTACH_MENU_ITEMS = [
     react_1.default.createElement(react_core_1.DropdownList, { key: "list-1" },
         react_1.default.createElement(react_core_1.DropdownItem, { className: "pf-chatbot-source-details-dropdown-item", value: "auth-operator Pod", id: "0" },

package/dist/cjs/MessageBar/SendButton.js

@@ -24,7 +24,9 @@ const react_core_1 = require("@patternfly/react-core");
 const paper_plane_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paper-plane-icon");
 const SendButton = (_a) => {
     var { className, onClick, tooltipProps, tooltipContent = 'Send' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
-    return (react_1.default.createElement(react_core_1.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),
+    return (react_1.default.createElement(react_core_1.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, 
+        // 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--send ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
                 react_1.default.createElement(paper_plane_icon_1.PaperPlaneIcon, null)) }, props))));
 };

package/dist/cjs/MessageBar/StopButton.js

@@ -23,7 +23,9 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const StopButton = (_a) => {
     var { className, onClick, tooltipProps, tooltipContent = 'Stop' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
-    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", 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),
+    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", 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, 
+        // prevents VO announcements of both aria label and tooltip
+        aria: "none" }, tooltipProps),
         react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--stop ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
                 react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                     react_1.default.createElement("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }))) }, props))));

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

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

package/dist/cjs/MessageBox/MessageBox.test.js

@@ -0,0 +1,22 @@
+"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 MessageBox_1 = require("./MessageBox");
+describe('MessageBox', () => {
+    it('should render Message box', () => {
+        (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, null,
+            react_1.default.createElement(react_1.default.Fragment, null, "Chatbot Messages")));
+        expect(react_2.screen.getByText('Chatbot Messages')).toBeTruthy();
+    });
+    it('should assign ref to Message box', () => {
+        const ref = react_1.default.createRef();
+        (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, { ref: ref },
+            react_1.default.createElement("div", null, "Test message content")));
+        expect(ref.current).not.toBeNull();
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+});

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

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

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 */