@patternfly/chatbot 2.1.0-prerelease.17

package/dist/cjs/MessageBar/MessageBar.js

@@ -0,0 +1,112 @@
+"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.MessageBar = void 0;
+const react_1 = __importDefault(require("react"));
+// 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"]);
+    // Text Input
+    // --------------------------------------------------------------------------
+    const [message, setMessage] = react_1.default.useState('');
+    const [isListeningMessage, setIsListeningMessage] = react_1.default.useState(false);
+    const [showPlaceholder, setShowPlaceholder] = react_1.default.useState(true);
+    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, '');
+        }
+        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);
+            }
+            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();
+            }
+            return '';
+        });
+    }, [onSendMessage]);
+    const handleKeyDown = react_1.default.useCallback((event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            if (!isSendButtonDisabled && !hasStopButton) {
+                handleSend();
+            }
+        }
+    }, [handleSend]);
+    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 renderButtons = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (hasStopButton && handleStopButton) {
+            return (react_1.default.createElement(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
+        }
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            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: setMessage, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent }, (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.props))),
+            (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: handleSend, isDisabled: isSendButtonDisabled, tooltipContent: (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _k === void 0 ? void 0 : _k.tooltipContent }, (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.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("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) => {
+                var _a;
+                (_a = attachButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(isAttachMenuOpen);
+                (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange(isAttachMenuOpen));
+            }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: '8' }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder })));
+    }
+    return react_1.default.createElement("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents);
+};
+exports.MessageBar = MessageBar;
+exports.default = exports.MessageBar;

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

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

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

@@ -0,0 +1,237 @@
+"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 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 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" },
+            react_1.default.createElement(SourceDetailsMenuItem_1.default, { icon: react_1.default.createElement("svg", { width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                    react_1.default.createElement("path", { d: "M0 12.5C0 5.87258 5.37258 0.5 12 0.5C18.6274 0.5 24 5.87258 24 12.5C24 19.1274 18.6274 24.5 12 24.5C5.37258 24.5 0 19.1274 0 12.5Z", fill: "currentColor" }),
+                    react_1.default.createElement("g", { clipPath: "url(#clip0_3280_27488)" },
+                        react_1.default.createElement("path", { d: "M8.25 8.75C8.25 7.92266 8.92266 7.25 9.75 7.25H12C14.0719 7.25 15.75 8.92812 15.75 11C15.75 13.0719 14.0719 14.75 12 14.75H9.75V17C9.75 17.4148 9.41484 17.75 9 17.75C8.58516 17.75 8.25 17.4148 8.25 17V14V8.75ZM9.75 13.25H12C13.2422 13.25 14.25 12.2422 14.25 11C14.25 9.75781 13.2422 8.75 12 8.75H9.75V13.25Z", fill: "white" })),
+                    react_1.default.createElement("defs", null,
+                        react_1.default.createElement("clipPath", { id: "clip0_3280_27488" },
+                            react_1.default.createElement("rect", { width: "7.5", height: "12", fill: "white", transform: "translate(8.25 6.5)" })))), name: "auth-operator", type: "Pod" }))),
+    react_1.default.createElement(react_core_1.DropdownGroup, { key: "group2" },
+        react_1.default.createElement(react_core_1.DropdownList, null,
+            react_1.default.createElement(react_core_1.DropdownItem, { value: "Alerts", id: "1", icon: react_1.default.createElement(react_icons_1.BellIcon, null) }, "Alerts"),
+            react_1.default.createElement(react_core_1.DropdownItem, { value: "Events", id: "2", icon: react_1.default.createElement(react_icons_1.CalendarAltIcon, null) }, "Events"),
+            react_1.default.createElement(react_core_1.DropdownItem, { value: "Logs", id: "3", icon: react_1.default.createElement(react_icons_1.ClipboardIcon, null) }, "Logs"),
+            react_1.default.createElement(react_core_1.DropdownItem, { value: "YAML - Status", id: "4", icon: react_1.default.createElement(react_icons_1.CodeIcon, null) }, "YAML - Status"),
+            react_1.default.createElement(react_core_1.DropdownItem, { value: "YAML - All contents", id: "5", icon: react_1.default.createElement(react_icons_1.CodeIcon, null) }, "YAML - All contents")))
+];
+const originalSpeechRecognition = window.SpeechRecognition;
+const mockSpeechRecognition = () => {
+    const MockSpeechRecognition = jest.fn().mockImplementation(() => ({
+        start: jest.fn(),
+        stop: jest.fn()
+    }));
+    MockSpeechRecognition.prototype = {};
+    window.SpeechRecognition = MockSpeechRecognition;
+};
+describe('Message bar', () => {
+    afterAll(() => {
+        window.SpeechRecognition = originalSpeechRecognition;
+    });
+    it('should render correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
+        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: 'Send button' })).toBeFalsy();
+        expect(react_2.screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+    });
+    it('can send via enter key', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: spy }));
+        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+        yield user_event_1.default.type(input, '[Enter]');
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('calls onChange callback appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, onChange: spy }));
+        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        yield user_event_1.default.type(input, 'A');
+        expect(input).toHaveTextContent('A');
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
+    }));
+    // Send button
+    // --------------------------------------------------------------------------
+    it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
+        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    }));
+    it('can disable send button shown when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, isSendButtonDisabled: true }));
+        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+    }));
+    it('can click send button', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: spy }));
+        const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+        const sendButton = react_2.screen.getByRole('button', { name: 'Send button' });
+        expect(sendButton).toBeTruthy();
+        yield user_event_1.default.click(sendButton);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('can always show send button', () => {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true }));
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeEnabled();
+    });
+    it('can disable send button if always showing', () => {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, isSendButtonDisabled: true }));
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+    });
+    it('can handle buttonProps tooltipContent  appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipContent: 'Test' } } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('can handle buttonProps props appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Test' }));
+    }));
+    // Attach button
+    // --------------------------------------------------------------------------
+    it('can show attach menu', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS
+            } }));
+        expect(react_2.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('menuitem', { name: /auth-operator/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('menuitem', { name: /Alerts/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('menuitem', { name: /Events/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('menuitem', { name: /Logs/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('menuitem', { name: /YAML - Status/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('menuitem', { name: /YAML - All contents/i })).toBeTruthy();
+    }));
+    it('can toggle attach menu', () => __awaiter(void 0, void 0, void 0, function* () {
+        const attachToggleClickSpy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+                isAttachMenuOpen: false,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: attachToggleClickSpy,
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS
+            } }));
+        expect(react_2.screen.queryByRole('textbox', { name: /Filter menu items/i })).toBeFalsy();
+        expect(react_2.screen.queryByRole('menuitem', { name: /auth-operator/i })).toBeFalsy();
+        expect(react_2.screen.queryByRole('menuitem', { name: /Alerts/i })).toBeFalsy();
+        expect(react_2.screen.queryByRole('menuitem', { name: /Events/i })).toBeFalsy();
+        expect(react_2.screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
+        expect(react_2.screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
+        expect(react_2.screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
+        const attachButton = react_2.screen.getByRole('button', { name: 'Attach button' });
+        yield user_event_1.default.click(attachButton);
+        expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
+    }));
+    it('can hide attach button', () => {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: false }));
+        expect(react_2.screen.queryByRole('button', { name: 'Attach button' })).toBeFalsy();
+    });
+    // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
+    // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
+    it('can handle handleAttach', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, handleAttach: spy, buttonProps: { attach: { inputTestId: 'input' } } }));
+        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        const file = new File(['test'], 'test.json');
+        const input = react_2.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(input.files).toHaveLength(1);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('can handle buttonProps tooltipContent  appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { tooltipContent: 'Test' } } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('can handle buttonProps props appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Test' }));
+    }));
+    // Stop button
+    // --------------------------------------------------------------------------
+    it('can show stop button', () => {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn }));
+        expect(react_2.screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+    });
+    it('can call handleStopButton', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: spy }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('can handle buttonProps tooltipContent appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipContent: 'Test' } } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('can handle buttonProps props appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Test' }));
+    }));
+    // Microphone button
+    // --------------------------------------------------------------------------
+    it('can hide microphone button when window.SpeechRecognition is not there', () => {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
+        expect(react_2.screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+    });
+    it('can show microphone button', () => {
+        mockSpeechRecognition();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
+        expect(react_2.screen.getByRole('button', { name: 'Microphone button' })).toBeTruthy();
+    });
+    it('can handle buttonProps appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: {
+                microphone: { tooltipContent: { active: 'Currently listening', inactive: 'Not currently listening' } }
+            } }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
+    }));
+    it('can handle buttonProps props appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        (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' }));
+    }));
+});

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface MicrophoneButtonProps extends ButtonProps {
+    /** Boolean check if the browser is listening to speech or not */
+    isListening: boolean;
+    /** Class name for MicrophoneButton */
+    className?: string;
+    /** Callback to update the value of isListening */
+    onIsListeningChange: React.Dispatch<React.SetStateAction<boolean>>;
+    /** 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;
+    /** English text "Use microphone" and "Stop listening" used in the tooltip */
+    tooltipContent?: {
+        active?: string;
+        inactive?: string;
+    };
+}
+export declare const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps>;
+export default MicrophoneButton;

package/dist/cjs/MessageBar/MicrophoneButton.js

@@ -0,0 +1,74 @@
+"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.MicrophoneButton = void 0;
+// ============================================================================
+// Chatbot Footer - Message Bar - Microphone
+// ============================================================================
+const react_1 = __importDefault(require("react"));
+// Import PatternFly components
+const react_core_1 = require("@patternfly/react-core");
+// Import FontAwesome icons
+const microphone_icon_1 = require("@patternfly/react-icons/dist/esm/icons/microphone-icon");
+const MicrophoneButton = (_a) => {
+    var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' } } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent"]);
+    // Microphone
+    // --------------------------------------------------------------------------
+    const [speechRecognition, setSpeechRecognition] = react_1.default.useState();
+    // Listen for speech
+    const startListening = react_1.default.useCallback(() => {
+        if (speechRecognition) {
+            speechRecognition.start();
+            onIsListeningChange(true);
+        }
+    }, [onIsListeningChange, speechRecognition]);
+    // Stop listening for speech
+    const stopListening = react_1.default.useCallback(() => {
+        if (speechRecognition && isListening) {
+            speechRecognition.stop();
+            onIsListeningChange(false);
+        }
+    }, [isListening, onIsListeningChange, speechRecognition]);
+    // Detect speech recognition browser support
+    react_1.default.useEffect(() => {
+        if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
+            // Initialize SpeechRecognition
+            const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+            recognition.continuous = false;
+            recognition.interimResults = false;
+            recognition.lang = 'en-US';
+            recognition.onresult = (event) => {
+                const result = event.results[0][0].transcript;
+                onSpeechRecognition(result);
+                recognition.stop();
+            };
+            recognition.onerror = (event) => {
+                // eslint-disable-next-line no-console
+                console.error('Speech recognition error:', event.error);
+                recognition.stop();
+            };
+            setSpeechRecognition(recognition);
+        }
+    }, [onSpeechRecognition]);
+    if (!speechRecognition) {
+        return null;
+    }
+    return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ aria: "none", "aria-live": "polite", id: "pf-chatbot__tooltip--use-microphone", content: isListening ? tooltipContent.active : tooltipContent.inactive, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
+        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Microphone button', onClick: isListening ? stopListening : startListening, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
+                react_1.default.createElement(microphone_icon_1.MicrophoneIcon, null)) }, props))));
+};
+exports.MicrophoneButton = MicrophoneButton;
+exports.default = exports.MicrophoneButton;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface SendButtonProps extends ButtonProps {
+    /** Callback for when button is clicked */
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Class Name for SendButton */
+    className?: string;
+    /** Props to control the PF Tooltip component */
+    tooltipProps?: Omit<TooltipProps, 'content'>;
+    /** English text "Send" used in the tooltip */
+    tooltipContent?: string;
+}
+export declare const SendButton: React.FunctionComponent<SendButtonProps>;
+export default SendButton;

package/dist/cjs/MessageBar/SendButton.js

@@ -0,0 +1,32 @@
+"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.SendButton = void 0;
+// ============================================================================
+// Chatbot Footer - Message Bar - Send
+// ============================================================================
+const react_1 = __importDefault(require("react"));
+// Import PatternFly components
+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),
+        react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
+                react_1.default.createElement(paper_plane_icon_1.PaperPlaneIcon, null)) }, props))));
+};
+exports.SendButton = SendButton;
+exports.default = exports.SendButton;

package/dist/cjs/MessageBar/SendButton.test.d.ts

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

package/dist/cjs/MessageBar/SendButton.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 SendButton_1 = require("./SendButton");
+const renderSend = (props) => {
+    const spy = jest.fn();
+    (0, react_2.render)(react_1.default.createElement(SendButton_1.SendButton, Object.assign({ onClick: spy }, props)));
+};
+describe('Send button', () => {
+    it('should render button correctly', () => {
+        renderSend();
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+    });
+    it('should handle onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(SendButton_1.SendButton, { onClick: spy }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(SendButton_1.SendButton, { onClick: jest.fn, tooltipContent: "Test" }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('should handle className prop', () => {
+        renderSend({ className: 'test' });
+        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toHaveClass('test');
+    });
+    it('should handle spread props, including aria-label', () => {
+        renderSend({ 'aria-label': 'test' });
+        expect(react_2.screen.getByRole('button', { name: 'test' }));
+    });
+    it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
+        renderSend({ tooltipProps: { id: 'test' } });
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send button' }));
+        expect(react_2.screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
+    }));
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface StopButtonProps extends ButtonProps {
+    /** Callback for when button is clicked */
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Class name for StopButton */
+    className?: string;
+    /** Props to control the PF Tooltip component */
+    tooltipProps?: Omit<TooltipProps, 'content'>;
+    /** English text "Stop" used in the tooltip */
+    tooltipContent?: string;
+}
+export declare const StopButton: React.FunctionComponent<StopButtonProps>;
+export default StopButton;

package/dist/cjs/MessageBar/StopButton.js

@@ -0,0 +1,32 @@
+"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.StopButton = void 0;
+// ============================================================================
+// Chatbot Footer - Message Bar - Stop
+// ============================================================================
+const react_1 = __importDefault(require("react"));
+// Import PatternFly components
+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),
+        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))));
+};
+exports.StopButton = StopButton;
+exports.default = exports.StopButton;

package/dist/cjs/MessageBar/StopButton.test.d.ts

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