@patternfly/chatbot 1.0.0

package/dist/cjs/MessageBar/MessageBar.js

@@ -0,0 +1,248 @@
+"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 = exports.MessageBarBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_core_1 = require("@patternfly/react-core");
+const react_styles_1 = require("@patternfly/react-styles");
+// 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 MessageBarBase = (_a) => {
+    var _b;
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, attachButtonPosition = 'end', hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef, isPrimary, additionalActions, forceMultilineLayout = false } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "attachButtonPosition", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef", "isPrimary", "additionalActions", "forceMultilineLayout"]);
+    // Text Input
+    // --------------------------------------------------------------------------
+    const [message, setMessage] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
+    const [isListeningMessage, setIsListeningMessage] = (0, react_1.useState)(false);
+    const [hasSentMessage, setHasSentMessage] = (0, react_1.useState)(false);
+    const [isComposing, setIsComposing] = (0, react_1.useState)(false);
+    const shouldForceMultiline = forceMultilineLayout || additionalActions;
+    const [isMultiline, setIsMultiline] = (0, react_1.useState)(shouldForceMultiline);
+    const inputRef = (0, react_1.useRef)(null);
+    const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
+    const attachButtonRef = (0, react_1.useRef)(null);
+    const topMargin = '1rem';
+    (0, react_1.useEffect)(() => {
+        if (value !== undefined && value !== message) {
+            setMessage(value);
+        }
+    }, [value, message]);
+    const setInitialLineHeight = (field) => {
+        field.style.setProperty('line-height', '1rem');
+        const parent = field.parentElement;
+        if (parent) {
+            parent.style.setProperty('margin-top', topMargin);
+            parent.style.setProperty('margin-bottom', `0rem`);
+            parent.style.setProperty('height', 'inherit');
+            const grandparent = parent.parentElement;
+            if (grandparent) {
+                grandparent.style.setProperty('flex-basis', shouldForceMultiline ? '100%' : 'auto');
+            }
+        }
+    };
+    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', topMargin);
+                parent.style.setProperty('margin-top', topMargin);
+            }
+        }
+    };
+    const textIsLongerThan2Lines = (field) => {
+        const lineHeight = parseFloat(window.getComputedStyle(field).lineHeight);
+        const lines = field.scrollHeight / lineHeight;
+        return lines > 2;
+    };
+    const checkIfMultiline = (0, react_1.useCallback)((field) => {
+        const parent = field.parentElement;
+        const grandparent = parent === null || parent === void 0 ? void 0 : parent.parentElement;
+        if (grandparent) {
+            const containerHeight = grandparent.offsetHeight;
+            const threshold = isCompact ? 56 : 70;
+            setIsMultiline(containerHeight > threshold);
+        }
+    }, [isCompact]);
+    const setAutoWidth = (0, react_1.useCallback)((field) => {
+        const parent = field.parentElement;
+        if (parent) {
+            const grandparent = parent.parentElement;
+            if ((textIsLongerThan2Lines(field) || shouldForceMultiline) && grandparent) {
+                grandparent.style.setProperty('flex-basis', `100%`);
+            }
+        }
+    }, []);
+    const handleNewLine = (field) => {
+        const parent = field.parentElement;
+        if (parent) {
+            parent.style.setProperty('margin-bottom', topMargin);
+            parent.style.setProperty('margin-top', topMargin);
+        }
+    };
+    (0, react_1.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);
+                }
+            }
+        };
+        window.addEventListener('resize', resetHeight);
+        return () => {
+            window.removeEventListener('resize', resetHeight);
+        };
+    }, [setAutoWidth]);
+    (0, react_1.useEffect)(() => {
+        const field = textareaRef.current;
+        if (field) {
+            if (field.value === '') {
+                setInitialLineHeight(field);
+                !shouldForceMultiline && setIsMultiline(false);
+            }
+            else {
+                setAutoHeight(field);
+                setAutoWidth(field);
+                !shouldForceMultiline && checkIfMultiline(field);
+            }
+        }
+    }, [displayMode, message, setAutoWidth, shouldForceMultiline, checkIfMultiline]);
+    (0, react_1.useEffect)(() => {
+        const field = textareaRef.current;
+        if (field) {
+            setInitialLineHeight(field);
+            setHasSentMessage(false);
+        }
+    }, [hasSentMessage]);
+    const handleChange = (0, react_1.useCallback)((event) => {
+        onChange && onChange(event, event.target.value);
+        if (textareaRef.current) {
+            if (event.target.value === '') {
+                setInitialLineHeight(textareaRef.current);
+                !shouldForceMultiline && setIsMultiline(false);
+            }
+            else {
+                setAutoHeight(textareaRef.current);
+                !shouldForceMultiline && checkIfMultiline(textareaRef.current);
+            }
+        }
+        setMessage(event.target.value);
+    }, [onChange, checkIfMultiline]);
+    // Handle sending message
+    const handleSend = (0, react_1.useCallback)((newMessage) => {
+        onSendMessage(newMessage);
+        setHasSentMessage(true);
+        setMessage('');
+    }, [onSendMessage]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        // Japanese and other languages may use IME for character input.
+        // In these cases, enter is used to select the final input, so we need to check for composition end instead.
+        // See more info at https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
+        // Chrome, Edge, and Firefox seem to work well with just the compose event.
+        // Safari is a little bit special. We need to handle 229 as well in this case.
+        const nativeEvent = event.nativeEvent;
+        const isCompositionKey = nativeEvent.which === 229;
+        const isCurrentlyComposing = isComposing || isCompositionKey;
+        if (event.key === 'Enter' && !isCurrentlyComposing && !event.shiftKey) {
+            event.preventDefault();
+            if (!isSendButtonDisabled && !hasStopButton) {
+                handleSend(message);
+            }
+        }
+        if (event.key === 'Enter' && !isCurrentlyComposing && event.shiftKey) {
+            if (textareaRef.current) {
+                handleNewLine(textareaRef.current);
+            }
+        }
+    }, [isSendButtonDisabled, hasStopButton, handleSend, message, isComposing]);
+    const handleCompositionStart = (0, react_1.useCallback)(() => {
+        setIsComposing(true);
+    }, []);
+    const handleCompositionEnd = (0, react_1.useCallback)(() => {
+        setIsComposing(false);
+    }, []);
+    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);
+        onChange && onChange({}, message);
+    };
+    const renderAttachButton = () => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!attachMenuProps && hasAttachButton) {
+            return ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _a === void 0 ? void 0 : _a.tooltipContent, inputTestId: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _b === void 0 ? void 0 : _b.inputTestId, isCompact: isCompact, tooltipProps: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props)));
+        }
+        if (attachMenuProps) {
+            return ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach)));
+        }
+    };
+    const isAttachButtonAtStart = attachButtonPosition === 'start';
+    const renderButtons = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        if (hasStopButton && handleStopButton) {
+            return ((0, jsx_runtime_1.jsx)(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, isCompact: isCompact, tooltipProps: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.tooltipProps }, (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _c === void 0 ? void 0 : _c.props)));
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isAttachButtonAtStart && renderAttachButton(), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _d === void 0 ? void 0 : _d.tooltipContent, language: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _e === void 0 ? void 0 : _e.language, isCompact: isCompact, tooltipProps: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _f === void 0 ? void 0 : _f.tooltipProps }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _g === void 0 ? void 0 : _g.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _h === void 0 ? void 0 : _h.tooltipContent, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _j === void 0 ? void 0 : _j.tooltipProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _k === void 0 ? void 0 : _k.props)))] }));
+    };
+    const hasGroupedActions = additionalActions || (isAttachButtonAtStart && isMultiline);
+    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isAttachButtonAtStart && !isMultiline && ((0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions test", children: renderAttachButton() })), (0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: (0, jsx_runtime_1.jsx)(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd }, props)) }), (0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar-actions', hasGroupedActions && 'pf-m-grouped'), children: hasGroupedActions ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar-actions-group'), children: [isAttachButtonAtStart && renderAttachButton(), additionalActions] }), (0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar-actions-group'), children: renderButtons() })] })) : (renderButtons()) })] }));
+    if (attachMenuProps) {
+        return ((0, jsx_runtime_1.jsx)(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => ((0, jsx_runtime_1.jsx)("div", { ref: toggleRef, className: (0, react_styles_1.css)('pf-chatbot__message-bar', isMultiline && 'pf-m-multiline', className), children: 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 }, attachMenuProps)));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, react_styles_1.css)('pf-chatbot__message-bar', isPrimary && 'pf-m-primary', isMultiline && 'pf-m-multiline', className), children: messageBarContents }));
+};
+exports.MessageBarBase = MessageBarBase;
+const MessageBar = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.MessageBarBase, Object.assign({ innerRef: ref }, props))));
+exports.MessageBar = MessageBar;
+exports.default = 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,338 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom");
+const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const react_2 = require("react");
+const SourceDetailsMenuItem_1 = __importDefault(require("../SourceDetailsMenuItem"));
+const MessageBar_1 = require("./MessageBar");
+const ATTACH_MENU_ITEMS = [
+    (0, jsx_runtime_1.jsx)(react_core_1.DropdownList, { children: (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { className: "pf-chatbot-source-details-dropdown-item", value: "auth-operator Pod", id: "0", children: (0, jsx_runtime_1.jsx)(SourceDetailsMenuItem_1.default, { icon: (0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("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" }), (0, jsx_runtime_1.jsx)("g", { clipPath: "url(#clip0_3280_27488)", children: (0, jsx_runtime_1.jsx)("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" }) }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "clip0_3280_27488", children: (0, jsx_runtime_1.jsx)("rect", { width: "7.5", height: "12", fill: "white", transform: "translate(8.25 6.5)" }) }) })] }), name: "auth-operator", type: "Pod" }) }) }, "list-1"),
+    (0, jsx_runtime_1.jsx)(react_core_1.DropdownGroup, { children: (0, jsx_runtime_1.jsxs)(react_core_1.DropdownList, { children: [(0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Alerts", id: "1", icon: (0, jsx_runtime_1.jsx)(react_icons_1.BellIcon, {}), children: "Alerts" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Events", id: "2", icon: (0, jsx_runtime_1.jsx)(react_icons_1.CalendarAltIcon, {}), children: "Events" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "Logs", id: "3", icon: (0, jsx_runtime_1.jsx)(react_icons_1.ClipboardIcon, {}), children: "Logs" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "YAML - Status", id: "4", icon: (0, jsx_runtime_1.jsx)(react_icons_1.CodeIcon, {}), children: "YAML - Status" }), (0, jsx_runtime_1.jsx)(react_core_1.DropdownItem, { value: "YAML - All contents", id: "5", icon: (0, jsx_runtime_1.jsx)(react_icons_1.CodeIcon, {}), children: "YAML - All contents" })] }) }, "group2")
+];
+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_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: 'Send' })).toBeFalsy();
+        expect(react_1.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
+        expect(react_1.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_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: spy }));
+        const input = react_1.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_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, onChange: spy }));
+        const input = react_1.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');
+    }));
+    it('can use specified placeholder text', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
+        const input = react_1.screen.getByRole('textbox', { name: /test placeholder/i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+    }));
+    // Send button
+    // --------------------------------------------------------------------------
+    it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
+        const input = react_1.screen.getByRole('textbox', { name: /Send a message.../i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+    }));
+    it('can disable send button shown when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, isSendButtonDisabled: true }));
+        const input = react_1.screen.getByRole('textbox', { name: /Send a message.../i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
+    }));
+    it('can click send button', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: spy }));
+        const input = react_1.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_1.screen.getByRole('button', { name: 'Send' });
+        expect(sendButton).toBeTruthy();
+        yield user_event_1.default.click(sendButton);
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('can always show send button', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeEnabled();
+    });
+    it('can disable send button if always showing', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, isSendButtonDisabled: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
+    });
+    it('can handle buttonProps tooltipContent  appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipContent: 'Test' } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Send' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('can handle buttonProps tooltipProps  appropriately for send', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipProps: { isVisible: true } } } }));
+        // isVisible, so no need for click
+        expect(react_1.screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
+    });
+    it('can handle buttonProps props appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Test' }));
+    }));
+    // Attach button
+    // --------------------------------------------------------------------------
+    it('can show attach menu', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS
+            } }));
+        expect(react_1.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /auth-operator/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /Alerts/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /Events/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /Logs/i })).toBeTruthy();
+        expect(react_1.screen.getByRole('menuitem', { name: /YAML - Status/i })).toBeTruthy();
+        expect(react_1.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_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+                isAttachMenuOpen: false,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: attachToggleClickSpy,
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS
+            } }));
+        expect(react_1.screen.queryByRole('textbox', { name: /Filter menu items/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /auth-operator/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /Alerts/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /Events/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
+        expect(react_1.screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
+        const attachButton = react_1.screen.getByRole('button', { name: 'Attach' });
+        yield user_event_1.default.click(attachButton);
+        expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
+    }));
+    it('can pass searchInputProps to search input in AttachMenu', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test", attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS,
+                searchInputProps: { isDisabled: true }
+            } }));
+        expect(react_1.screen.getByRole('textbox', { name: /Filter menu items/i })).toBeDisabled();
+    });
+    it('can pass menuSearchProps to search input in AttachMenu', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test", attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS,
+                menuSearchProps: { 'data-testid': 'menu-search' }
+            } }));
+        expect(react_1.screen.getByTestId('menu-search')).toBeTruthy();
+    });
+    it('can pass menuSearchInputProps to search input in AttachMenu', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test", attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                onAttachMenuInputChange: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS,
+                menuSearchInputProps: { 'data-testid': 'menu-search-input' }
+            } }));
+        expect(react_1.screen.getByTestId('menu-search-input')).toBeTruthy();
+    });
+    it('can remove input from attach menu', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+                isAttachMenuOpen: true,
+                setIsAttachMenuOpen: jest.fn(),
+                onAttachMenuToggleClick: jest.fn(),
+                attachMenuItems: ATTACH_MENU_ITEMS
+            } }));
+        expect(react_1.screen.queryByRole('textbox', { name: /Filter menu items/i })).not.toBeInTheDocument();
+    }));
+    it('can hide attach button', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: false }));
+        expect(react_1.screen.queryByRole('button', { name: 'Attach' })).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_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, handleAttach: spy, buttonProps: { attach: { inputTestId: 'input' } } }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        const file = new File(['test'], 'test.json');
+        const input = react_1.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_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { tooltipContent: 'Test' } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('can handle buttonProps tooltipProps  appropriately for attach', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { attach: { tooltipProps: { isVisible: true } } } }));
+        // isVisible, so no need for click
+        expect(react_1.screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+    });
+    it('can handle buttonProps props appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Test' }));
+    }));
+    it('can change attach button icon', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: {
+                attach: {
+                    icon: (0, jsx_runtime_1.jsx)("img", { alt: "", src: "" })
+                }
+            } }));
+        expect(react_1.screen.getByRole('img')).toBeVisible();
+    });
+    // Stop button
+    // --------------------------------------------------------------------------
+    it('can show stop button', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn }));
+        expect(react_1.screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
+    });
+    it('can call handleStopButton', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: spy }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Stop' }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('can handle buttonProps tooltipContent appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipContent: 'Test' } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Stop' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+    }));
+    it('can handle buttonProps tooltipProps  appropriately for stop', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipProps: { isVisible: true } } } }));
+        // isVisible, so no need for click
+        expect(react_1.screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
+    });
+    it('can handle buttonProps props appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Test' }));
+    }));
+    // Microphone button
+    // --------------------------------------------------------------------------
+    it('can hide microphone button when window.SpeechRecognition is not there', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
+        expect(react_1.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
+    });
+    it('can show microphone button', () => {
+        mockSpeechRecognition();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Use microphone' })).toBeTruthy();
+    });
+    it('can handle buttonProps appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(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_1.screen.getByRole('button', { name: 'Use microphone' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Stop listening' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
+    }));
+    it('can customize the listening placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Use microphone' }));
+        const input = react_1.screen.getByRole('textbox', { name: /I am listening/i });
+        expect(input).toBeTruthy();
+    }));
+    it('can handle buttonProps tooltipProps  appropriately for microphone', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { tooltipProps: { isVisible: true } } } }));
+        // isVisible, so no need for click
+        expect(react_1.screen.getByRole('tooltip', { name: 'Use microphone' })).toBeTruthy();
+    });
+    it('can handle buttonProps props appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Test' }));
+    }));
+    it('can be controlled', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test" }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        expect(react_1.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_1.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
+        expect(react_1.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
+        expect(react_1.screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
+    });
+    it('should focus textarea when using a custom ref', () => {
+        var _a;
+        const ref = (0, react_2.createRef)();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn, innerRef: ref }));
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        expect(document.activeElement).toBe(react_1.screen.getByRole('textbox'));
+    });
+    it('should handle isPrimary', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { isPrimary: true, onSendMessage: jest.fn }));
+        expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+    });
+    it('Renders with flex-basis of auto by default', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
+        expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: auto;');
+    });
+    it('Renders with flex-basis of 100% when forceMultilineLayout is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { forceMultilineLayout: true, onSendMessage: jest.fn }));
+        expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: 100%;');
+    });
+    it('Renders with flex-basis of 100% when additionalActions is truthy', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(MessageBar_1.MessageBar, { additionalActions: "actions", onSendMessage: jest.fn }));
+        expect(react_1.screen.getByRole('textbox').closest('.pf-chatbot__message-bar-input')).toHaveAttribute('style', 'flex-basis: 100%;');
+    });
+});

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

@@ -0,0 +1,24 @@
+import type { FunctionComponent } 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?: Omit<TooltipProps, 'content'>;
+    /** English text "Use microphone" and "Stop listening" used in the tooltip */
+    tooltipContent?: {
+        active?: string;
+        inactive?: string;
+    };
+    /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
+    language?: string;
+    isCompact?: boolean;
+}
+export declare const MicrophoneButton: FunctionComponent<MicrophoneButtonProps>;
+export default MicrophoneButton;