@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

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.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { ButtonProps, DropEvent } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
     /** Flag to enable whether attach menu is open */
     isAttachMenuOpen: boolean;
@@ -20,9 +21,9 @@ export interface MessageBarWithAttachMenuProps {
     /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
     onAttachMenuOpenChange?: (isOpen: boolean) => void;
 }
-export interface MessageBarProps {
+export interface MessageBarProps extends TextAreaProps {
     /** Callback to get the value of input message by user */
-    onSendMessage: (message: string) => void;
+    onSendMessage: (message: string | number) => void;
     /** Class Name for the MessageBar component */
     className?: string;
     /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
@@ -47,14 +48,17 @@ export interface MessageBarProps {
             tooltipContent?: string;
             props?: ButtonProps;
             inputTestId?: string;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         stop?: {
             tooltipContent?: string;
             props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         send?: {
             tooltipContent?: string;
             props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
         microphone?: {
             tooltipContent?: {
@@ -63,10 +67,13 @@ export interface MessageBarProps {
             };
             language?: string;
             props?: ButtonProps;
+            tooltipProps?: Omit<TooltipProps, 'content'>;
         };
     };
     /** A callback for when the text area value changes. */
-    onChange?: (event: React.ChangeEvent<HTMLDivElement>, value: string) => void;
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
+    /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
+    displayMode?: ChatbotDisplayMode;
 }
 export declare const MessageBar: React.FunctionComponent<MessageBarProps>;
 export default MessageBar;

package/dist/cjs/MessageBar/MessageBar.js

@@ -16,74 +16,161 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageBar = void 0;
 const react_1 = __importDefault(require("react"));
+const react_core_1 = require("@patternfly/react-core");
 // Import Chatbot components
 const SendButton_1 = __importDefault(require("./SendButton"));
 const MicrophoneButton_1 = __importDefault(require("./MicrophoneButton"));
 const AttachButton_1 = require("./AttachButton");
 const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
-const dompurify_1 = __importDefault(require("dompurify"));
 const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange"]);
+    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
     // Text Input
     // --------------------------------------------------------------------------
-    const [message, setMessage] = react_1.default.useState('');
+    const [message, setMessage] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
     const [isListeningMessage, setIsListeningMessage] = react_1.default.useState(false);
-    const [showPlaceholder, setShowPlaceholder] = react_1.default.useState(true);
+    const [hasSentMessage, setHasSentMessage] = react_1.default.useState(false);
     const textareaRef = react_1.default.useRef(null);
     const attachButtonRef = react_1.default.useRef(null);
-    const handleInput = (event) => {
-        // newMessage === '' doesn't work unless we trim, which causes other problems
-        // textContent seems to work, but doesn't allow for markdown, so we need both
-        const messageText = dompurify_1.default.sanitize(event.target.textContent);
-        if (messageText === '') {
-            setShowPlaceholder(true);
-            setMessage('');
-            onChange && onChange(event, '');
+    const setInitialLineHeight = (field) => {
+        field.style.setProperty('line-height', '1rem');
+        const parent = field.parentElement;
+        if (parent) {
+            parent.style.setProperty('margin-top', `1rem`);
+            parent.style.setProperty('margin-bottom', `0rem`);
+            parent.style.setProperty('height', 'inherit');
+            const grandparent = parent.parentElement;
+            if (grandparent) {
+                grandparent.style.setProperty('flex-basis', 'auto');
+            }
         }
-        else {
-            setShowPlaceholder(false);
-            // this is so that tests work; RTL doesn't seem to like event.target.innerText, but browsers don't pick up markdown without it
-            let newMessage = messageText;
-            if (event.target.innerText) {
-                newMessage = dompurify_1.default.sanitize(event.target.innerText);
+    };
+    const setAutoHeight = (field) => {
+        const parent = field.parentElement;
+        if (parent) {
+            parent.style.setProperty('height', 'inherit');
+            const computed = window.getComputedStyle(field);
+            // Calculate the height
+            const height = parseInt(computed.getPropertyValue('border-top-width')) +
+                parseInt(computed.getPropertyValue('padding-top')) +
+                field.scrollHeight +
+                parseInt(computed.getPropertyValue('padding-bottom')) +
+                parseInt(computed.getPropertyValue('border-bottom-width'));
+            parent.style.setProperty('height', `${height}px`);
+            if (height > 32 || window.innerWidth <= 507) {
+                parent.style.setProperty('margin-bottom', `1rem`);
+                parent.style.setProperty('margin-top', `1rem`);
             }
-            setMessage(newMessage);
-            onChange && onChange(event, newMessage);
         }
     };
-    // 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();
+    const textIsLongerThan2Lines = (field) => {
+        const lineHeight = parseFloat(window.getComputedStyle(field).lineHeight);
+        const lines = field.scrollHeight / lineHeight;
+        return lines > 2;
+    };
+    const setAutoWidth = react_1.default.useCallback((field) => {
+        const parent = field.parentElement;
+        if (parent) {
+            const grandparent = parent.parentElement;
+            if (textIsLongerThan2Lines(field) && grandparent) {
+                grandparent.style.setProperty('flex-basis', `100%`);
+            }
+        }
+    }, []);
+    const handleNewLine = (field) => {
+        const parent = field.parentElement;
+        if (parent) {
+            parent.style.setProperty('margin-bottom', `1rem`);
+            parent.style.setProperty('margin-top', `1rem`);
+        }
+    };
+    react_1.default.useEffect(() => {
+        const field = textareaRef.current;
+        if (field) {
+            if (field.value === '') {
+                if (window.innerWidth > 507) {
+                    setInitialLineHeight(field);
+                }
+            }
+            else {
+                setAutoHeight(field);
+                setAutoWidth(field);
+            }
+        }
+        const resetHeight = () => {
+            if (field) {
+                if (field.value === '') {
+                    if (window.innerWidth > 507) {
+                        setInitialLineHeight(field);
+                    }
+                }
+                else {
+                    setAutoHeight(field);
+                    setAutoWidth(field);
+                }
             }
-            return '';
-        });
+        };
+        window.addEventListener('resize', resetHeight);
+        return () => {
+            window.removeEventListener('resize', resetHeight);
+        };
+    }, [setAutoWidth]);
+    react_1.default.useEffect(() => {
+        const field = textareaRef.current;
+        if (field) {
+            if (field.value === '') {
+                setInitialLineHeight(textareaRef.current);
+            }
+            else {
+                setAutoHeight(textareaRef.current);
+                setAutoWidth(field);
+            }
+        }
+    }, [displayMode, message, setAutoWidth]);
+    react_1.default.useEffect(() => {
+        const field = textareaRef.current;
+        if (field) {
+            setInitialLineHeight(field);
+            setHasSentMessage(false);
+        }
+    }, [hasSentMessage]);
+    const handleChange = react_1.default.useCallback((event) => {
+        onChange && onChange(event, event.target.value);
+        if (textareaRef.current) {
+            if (event.target.value === '') {
+                setInitialLineHeight(textareaRef.current);
+            }
+            else {
+                setAutoHeight(textareaRef.current);
+            }
+        }
+        setMessage(event.target.value);
+    }, [onChange]);
+    // Handle sending message
+    const handleSend = react_1.default.useCallback((newMessage) => {
+        onSendMessage(newMessage);
+        setHasSentMessage(true);
+        setMessage('');
     }, [onSendMessage]);
     const handleKeyDown = react_1.default.useCallback((event) => {
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
             if (!isSendButtonDisabled && !hasStopButton) {
-                handleSend();
+                handleSend(message);
+            }
+        }
+        if (event.key === 'Enter' && event.shiftKey) {
+            if (textareaRef.current) {
+                handleNewLine(textareaRef.current);
             }
         }
-    }, [handleSend]);
+    }, [isSendButtonDisabled, hasStopButton, handleSend, message]);
     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();
     };
     const handleSpeechRecognition = (message) => {
         setMessage(message);
-        const textarea = textareaRef.current;
-        if (textarea) {
-            textarea.focus();
-            textarea.textContent = dompurify_1.default.sanitize(message);
-        }
         onChange && onChange({}, message);
     };
     const renderButtons = () => {
@@ -95,17 +182,11 @@ const MessageBar = (_a) => {
             attachMenuProps && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
             !attachMenuProps && hasAttachButton && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
             hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
-            (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
+            (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
     };
-    const placeholder = isListeningMessage ? 'Listening' : 'Send a message...';
     const messageBarContents = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { className: "pf-chatbot__message-bar-input" },
-            (showPlaceholder || message === '') && (react_1.default.createElement("div", { className: "pf-chatbot__message-bar-placeholder" }, placeholder)),
-            react_1.default.createElement("div", Object.assign({ contentEditable: true, suppressContentEditableWarning: true, role: "textbox", "aria-multiline": "false", className: "pf-chatbot__message-textarea", onInput: handleInput, onFocus: () => setShowPlaceholder(false), onBlur: () => {
-                    if (message === '') {
-                        setShowPlaceholder(!showPlaceholder);
-                    }
-                }, "aria-label": placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props))),
+            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? 'Listening' : 'Send a message...', placeholder: isListeningMessage ? 'Listening' : 'Send a message...', ref: textareaRef, onKeyDown: handleKeyDown }, props))),
         react_1.default.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
     if (attachMenuProps) {
         return (react_1.default.createElement(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => (react_1.default.createElement("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents)), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {

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" },
@@ -234,4 +234,12 @@ describe('Message bar', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Test' }));
     }));
+    it('can be controlled', () => {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test" }));
+        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+        expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
+    });
 });

package/dist/cjs/MessageBar/MicrophoneButton.d.ts

@@ -10,7 +10,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
     /** Callback to update the message value once speech recognition is complete */
     onSpeechRecognition: React.Dispatch<React.SetStateAction<string>>;
     /** Props to control the PF Tooltip component */
-    tooltipProps?: TooltipProps;
+    tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Use microphone" and "Stop listening" used in the tooltip */
     tooltipContent?: {
         active?: string;

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 {};