@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/dist/esm/MessageBar/MessageBar.test.js

@@ -7,31 +7,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import '@testing-library/jest-dom';
-import React from 'react';
 import { DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
 import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
 import SourceDetailsMenuItem from '../SourceDetailsMenuItem';
 import { MessageBar } from './MessageBar';
 const ATTACH_MENU_ITEMS = [
-    React.createElement(DropdownList, { key: "list-1" },
-        React.createElement(DropdownItem, { className: "pf-chatbot-source-details-dropdown-item", value: "auth-operator Pod", id: "0" },
-            React.createElement(SourceDetailsMenuItem, { icon: React.createElement("svg", { width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.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.createElement("g", { clipPath: "url(#clip0_3280_27488)" },
-                        React.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.createElement("defs", null,
-                        React.createElement("clipPath", { id: "clip0_3280_27488" },
-                            React.createElement("rect", { width: "7.5", height: "12", fill: "white", transform: "translate(8.25 6.5)" })))), name: "auth-operator", type: "Pod" }))),
-    React.createElement(DropdownGroup, { key: "group2" },
-        React.createElement(DropdownList, null,
-            React.createElement(DropdownItem, { value: "Alerts", id: "1", icon: React.createElement(BellIcon, null) }, "Alerts"),
-            React.createElement(DropdownItem, { value: "Events", id: "2", icon: React.createElement(CalendarAltIcon, null) }, "Events"),
-            React.createElement(DropdownItem, { value: "Logs", id: "3", icon: React.createElement(ClipboardIcon, null) }, "Logs"),
-            React.createElement(DropdownItem, { value: "YAML - Status", id: "4", icon: React.createElement(CodeIcon, null) }, "YAML - Status"),
-            React.createElement(DropdownItem, { value: "YAML - All contents", id: "5", icon: React.createElement(CodeIcon, null) }, "YAML - All contents")))
+    _jsx(DropdownList, { children: _jsx(DropdownItem, { className: "pf-chatbot-source-details-dropdown-item", value: "auth-operator Pod", id: "0", children: _jsx(SourceDetailsMenuItem, { icon: _jsxs("svg", { width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_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" }), _jsx("g", { clipPath: "url(#clip0_3280_27488)", children: _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" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_3280_27488", children: _jsx("rect", { width: "7.5", height: "12", fill: "white", transform: "translate(8.25 6.5)" }) }) })] }), name: "auth-operator", type: "Pod" }) }) }, "list-1"),
+    _jsx(DropdownGroup, { children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "Alerts", id: "1", icon: _jsx(BellIcon, {}), children: "Alerts" }), _jsx(DropdownItem, { value: "Events", id: "2", icon: _jsx(CalendarAltIcon, {}), children: "Events" }), _jsx(DropdownItem, { value: "Logs", id: "3", icon: _jsx(ClipboardIcon, {}), children: "Logs" }), _jsx(DropdownItem, { value: "YAML - Status", id: "4", icon: _jsx(CodeIcon, {}), children: "YAML - Status" }), _jsx(DropdownItem, { value: "YAML - All contents", id: "5", icon: _jsx(CodeIcon, {}), children: "YAML - All contents" })] }) }, "group2")
 ];
 const originalSpeechRecognition = window.SpeechRecognition;
 const mockSpeechRecognition = () => {
@@ -47,15 +34,15 @@ describe('Message bar', () => {
         window.SpeechRecognition = originalSpeechRecognition;
     });
     it('should render correctly', () => {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn }));
-        expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-        expect(screen.queryByRole('button', { name: 'Send button' })).toBeFalsy();
-        expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn }));
+        expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: 'Send' })).toBeFalsy();
+        expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
         expect(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();
-        render(React.createElement(MessageBar, { onSendMessage: spy }));
+        render(_jsx(MessageBar, { onSendMessage: spy }));
         const input = screen.getByRole('textbox', { name: /Send a message.../i });
         yield userEvent.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
@@ -64,7 +51,7 @@ describe('Message bar', () => {
     }));
     it('calls onChange callback appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, onChange: spy }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, onChange: spy }));
         const input = screen.getByRole('textbox', { name: /Send a message.../i });
         yield userEvent.type(input, 'A');
         expect(input).toHaveTextContent('A');
@@ -72,7 +59,7 @@ describe('Message bar', () => {
         expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
     }));
     it('can use specified placeholder text', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
         const input = screen.getByRole('textbox', { name: /test placeholder/i });
         yield userEvent.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
@@ -80,54 +67,59 @@ describe('Message bar', () => {
     // Send button
     // --------------------------------------------------------------------------
     it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn }));
         const input = screen.getByRole('textbox', { name: /Send a message.../i });
         yield userEvent.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
-        expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
     }));
     it('can disable send button shown when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, isSendButtonDisabled: true }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, isSendButtonDisabled: true }));
         const input = screen.getByRole('textbox', { name: /Send a message.../i });
         yield userEvent.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
-        expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-        expect(screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
     }));
     it('can click send button', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(MessageBar, { onSendMessage: spy }));
+        render(_jsx(MessageBar, { onSendMessage: spy }));
         const input = screen.getByRole('textbox', { name: /Send a message.../i });
         yield userEvent.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
-        const sendButton = screen.getByRole('button', { name: 'Send button' });
+        const sendButton = screen.getByRole('button', { name: 'Send' });
         expect(sendButton).toBeTruthy();
         yield userEvent.click(sendButton);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('can always show send button', () => {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true }));
-        expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-        expect(screen.getByRole('button', { name: 'Send button' })).toBeEnabled();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true }));
+        expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send' })).toBeEnabled();
     });
     it('can disable send button if always showing', () => {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, isSendButtonDisabled: true }));
-        expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-        expect(screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, isSendButtonDisabled: true }));
+        expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send' })).toBeDisabled();
     });
     it('can handle buttonProps tooltipContent  appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipContent: 'Test' } } }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipContent: 'Test' } } }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Send' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
+    it('can handle buttonProps tooltipProps  appropriately for send', () => {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipProps: { isVisible: true } } } }));
+        // isVisible, so no need for click
+        expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
+    });
     it('can handle buttonProps props appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { props: { 'aria-label': 'Test' } } } }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { props: { 'aria-label': 'Test' } } } }));
         yield userEvent.click(screen.getByRole('button', { name: 'Test' }));
     }));
     // Attach button
     // --------------------------------------------------------------------------
     it('can show attach menu', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
                 isAttachMenuOpen: true,
                 setIsAttachMenuOpen: jest.fn(),
                 onAttachMenuToggleClick: jest.fn(),
@@ -144,7 +136,7 @@ describe('Message bar', () => {
     }));
     it('can toggle attach menu', () => __awaiter(void 0, void 0, void 0, function* () {
         const attachToggleClickSpy = jest.fn();
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, attachMenuProps: {
                 isAttachMenuOpen: false,
                 setIsAttachMenuOpen: jest.fn(),
                 onAttachMenuToggleClick: attachToggleClickSpy,
@@ -158,96 +150,118 @@ describe('Message bar', () => {
         expect(screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
         expect(screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
         expect(screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
-        const attachButton = screen.getByRole('button', { name: 'Attach button' });
+        const attachButton = screen.getByRole('button', { name: 'Attach' });
         yield userEvent.click(attachButton);
         expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
     }));
     it('can hide attach button', () => {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasAttachButton: false }));
-        expect(screen.queryByRole('button', { name: 'Attach button' })).toBeFalsy();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasAttachButton: false }));
+        expect(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();
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, handleAttach: spy, buttonProps: { attach: { inputTestId: 'input' } } }));
-        expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, handleAttach: spy, buttonProps: { attach: { inputTestId: 'input' } } }));
+        expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         const file = new File(['test'], 'test.json');
         const input = screen.getByTestId('input');
         yield userEvent.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* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { tooltipContent: 'Test' } } }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+    it('can handle buttonProps tooltipContent appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { tooltipContent: 'Test' } } }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
+    it('can handle buttonProps tooltipProps  appropriately for attach', () => {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { attach: { tooltipProps: { isVisible: true } } } }));
+        // isVisible, so no need for click
+        expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+    });
     it('can handle buttonProps props appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { props: { 'aria-label': 'Test' } } } }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { props: { 'aria-label': 'Test' } } } }));
         yield userEvent.click(screen.getByRole('button', { name: 'Test' }));
     }));
     // Stop button
     // --------------------------------------------------------------------------
     it('can show stop button', () => {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn }));
-        expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn }));
+        expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
     });
     it('can call handleStopButton', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: spy }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: spy }));
+        yield userEvent.click(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* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipContent: 'Test' } } }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipContent: 'Test' } } }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Stop' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
+    it('can handle buttonProps tooltipProps  appropriately for stop', () => {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipProps: { isVisible: true } } } }));
+        // isVisible, so no need for click
+        expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
+    });
     it('can handle buttonProps props appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { props: { 'aria-label': 'Test' } } } }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { props: { 'aria-label': 'Test' } } } }));
         yield userEvent.click(screen.getByRole('button', { name: 'Test' }));
     }));
     // Microphone button
     // --------------------------------------------------------------------------
     it('can hide microphone button when window.SpeechRecognition is not there', () => {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
-        expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
+        expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
     });
     it('can show microphone button', () => {
         mockSpeechRecognition();
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
-        expect(screen.getByRole('button', { name: 'Microphone button' })).toBeTruthy();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
+        expect(screen.getByRole('button', { name: 'Use microphone' })).toBeTruthy();
     });
     it('can handle buttonProps appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: {
                 microphone: { tooltipContent: { active: 'Currently listening', inactive: 'Not currently listening' } }
             } }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
         expect(screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
-        yield userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Stop listening' }));
         expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
     }));
     it('can customize the listening placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Use microphone' }));
         const input = screen.getByRole('textbox', { name: /I am listening/i });
         expect(input).toBeTruthy();
     }));
+    it('can handle buttonProps tooltipProps  appropriately for microphone', () => {
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { tooltipProps: { isVisible: true } } } }));
+        // isVisible, so no need for click
+        expect(screen.getByRole('tooltip', { name: 'Use microphone' })).toBeTruthy();
+    });
     it('can handle buttonProps props appropriately for microphone', () => __awaiter(void 0, void 0, void 0, function* () {
         mockSpeechRecognition();
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));
         yield userEvent.click(screen.getByRole('button', { name: 'Test' }));
     }));
     it('can be controlled', () => {
-        render(React.createElement(MessageBar, { onSendMessage: jest.fn, value: "test" }));
-        expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-        expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-        expect(screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, value: "test" }));
+        expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
         expect(screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
         expect(screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
     });
+    it('should focus textarea when using a custom ref', () => {
+        var _a;
+        const ref = createRef();
+        render(_jsx(MessageBar, { onSendMessage: jest.fn, innerRef: ref }));
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        expect(document.activeElement).toBe(screen.getByRole('textbox'));
+    });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+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 */
@@ -18,6 +18,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
     };
     /** 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: React.FunctionComponent<MicrophoneButtonProps>;
+export declare const MicrophoneButton: FunctionComponent<MicrophoneButtonProps>;
 export default MicrophoneButton;

package/dist/esm/MessageBar/MicrophoneButton.js

@@ -9,35 +9,33 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Footer - Message Bar - Microphone
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
 // Import PatternFly components
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
 // Import FontAwesome icons
 import { MicrophoneIcon } from '@patternfly/react-icons/dist/esm/icons/microphone-icon';
 export const MicrophoneButton = (_a) => {
-    var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US' } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language"]);
+    var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US', isCompact } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language", "isCompact"]);
     // Microphone
     // --------------------------------------------------------------------------
-    const [speechRecognition, setSpeechRecognition] = React.useState();
+    const [speechRecognition, setSpeechRecognition] = useState();
     // Listen for speech
-    const startListening = React.useCallback(() => {
+    const startListening = useCallback(() => {
         if (speechRecognition) {
             speechRecognition.start();
             onIsListeningChange(true);
         }
     }, [onIsListeningChange, speechRecognition]);
     // Stop listening for speech
-    const stopListening = React.useCallback(() => {
+    const stopListening = useCallback(() => {
         if (speechRecognition && isListening) {
             speechRecognition.stop();
             onIsListeningChange(false);
         }
     }, [isListening, onIsListeningChange, speechRecognition]);
     // Detect speech recognition browser support
-    React.useEffect(() => {
+    useEffect(() => {
         if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
             // Initialize SpeechRecognition
             const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
@@ -62,8 +60,6 @@ export const MicrophoneButton = (_a) => {
     if (!speechRecognition) {
         return null;
     }
-    return (React.createElement(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.createElement(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.createElement(Icon, { iconSize: "xl", isInline: true },
-                React.createElement(MicrophoneIcon, null)) }, props))));
+    return (_jsx(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, { children: _jsx(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone'), "aria-pressed": isListening, onClick: isListening ? stopListening : startListening, icon: _jsx(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(MicrophoneIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })));
 };
 export default MicrophoneButton;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 export interface SendButtonProps extends ButtonProps {
     /** Callback for when button is clicked */
@@ -9,6 +9,8 @@ export interface SendButtonProps extends ButtonProps {
     tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Send" used in the tooltip */
     tooltipContent?: string;
+    /** Whether send button has compact styling */
+    isCompact?: boolean;
 }
-export declare const SendButton: React.FunctionComponent<SendButtonProps>;
+export declare const SendButton: FunctionComponent<SendButtonProps>;
 export default SendButton;

package/dist/esm/MessageBar/SendButton.js

@@ -9,19 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Footer - Message Bar - Send
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Import PatternFly components
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
 import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
 export const SendButton = (_a) => {
-    var { className, onClick, tooltipProps, tooltipContent = 'Send' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
-    return (React.createElement(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, 
+    var { className, onClick, tooltipProps, tooltipContent = 'Send', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
+    return (_jsx(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        React.createElement(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
-                React.createElement(PaperPlaneIcon, null)) }, props))));
+        aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send', onClick: onClick, icon: _jsx(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(PaperPlaneIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) })));
 };
 export default SendButton;

package/dist/esm/MessageBar/SendButton.test.js

@@ -7,35 +7,35 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { SendButton } from './SendButton';
 const renderSend = (props) => {
     const spy = jest.fn();
-    render(React.createElement(SendButton, Object.assign({ onClick: spy }, props)));
+    render(_jsx(SendButton, Object.assign({ onClick: spy }, props)));
 };
 describe('Send button', () => {
     it('should render button correctly', () => {
         renderSend();
-        expect(screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Send' })).toBeTruthy();
     });
     it('should handle onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(SendButton, { onClick: spy }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+        render(_jsx(SendButton, { onClick: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Send' }));
         expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(SendButton, { onClick: jest.fn, tooltipContent: "Test" }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+        render(_jsx(SendButton, { onClick: jest.fn, tooltipContent: "Test" }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Send' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('should handle className prop', () => {
         renderSend({ className: 'test' });
-        expect(screen.getByRole('button', { name: 'Send button' })).toHaveClass('test');
+        expect(screen.getByRole('button', { name: 'Send' })).toHaveClass('test');
     });
     it('should handle spread props, including aria-label', () => {
         renderSend({ 'aria-label': 'test' });
@@ -43,7 +43,11 @@ describe('Send button', () => {
     });
     it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
         renderSend({ tooltipProps: { id: 'test' } });
-        yield userEvent.click(screen.getByRole('button', { name: 'Send button' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Send' }));
         expect(screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
     }));
+    it('should handle isCompact', () => {
+        renderSend({ 'data-testid': 'button', isCompact: true });
+        expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 export interface StopButtonProps extends ButtonProps {
     /** Callback for when button is clicked */
@@ -9,6 +9,8 @@ export interface StopButtonProps extends ButtonProps {
     tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Stop" used in the tooltip */
     tooltipContent?: string;
+    /** Whether stop button has compact styling */
+    isCompact?: boolean;
 }
-export declare const StopButton: React.FunctionComponent<StopButtonProps>;
+export declare const StopButton: FunctionComponent<StopButtonProps>;
 export default StopButton;

package/dist/esm/MessageBar/StopButton.js

@@ -9,19 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-// ============================================================================
-// Chatbot Footer - Message Bar - Stop
-// ============================================================================
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Import PatternFly components
 import { Button, Tooltip, Icon } from '@patternfly/react-core';
 export const StopButton = (_a) => {
-    var { className, onClick, tooltipProps, tooltipContent = 'Stop' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
-    return (React.createElement(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, 
+    var { className, onClick, tooltipProps, tooltipContent = 'Stop', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
+    return (_jsx(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
         // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        React.createElement(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.createElement(Icon, { iconSize: "xl", isInline: true },
-                React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.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))));
+        aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ className: `pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop', onClick: onClick, icon: _jsx(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("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" }) }) }), size: isCompact ? 'sm' : undefined }, props)) })));
 };
 export default StopButton;

package/dist/esm/MessageBar/StopButton.test.js

@@ -7,35 +7,35 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { StopButton } from './StopButton';
 const renderStop = (props) => {
     const spy = jest.fn();
-    render(React.createElement(StopButton, Object.assign({ onClick: spy }, props)));
+    render(_jsx(StopButton, Object.assign({ onClick: spy }, props)));
 };
 describe('Stop button', () => {
     it('should render button correctly', () => {
         renderStop();
-        expect(screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
     });
     it('should handle onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        render(React.createElement(StopButton, { onClick: spy }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+        render(_jsx(StopButton, { onClick: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Stop' }));
         expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        render(React.createElement(StopButton, { onClick: jest.fn, tooltipContent: "Test" }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+        render(_jsx(StopButton, { onClick: jest.fn, tooltipContent: "Test" }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Stop' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('should handle className prop', () => {
         renderStop({ className: 'test' });
-        expect(screen.getByRole('button', { name: 'Stop button' })).toHaveClass('test');
+        expect(screen.getByRole('button', { name: 'Stop' })).toHaveClass('test');
     });
     it('should handle spread props, including aria-label', () => {
         renderStop({ 'aria-label': 'test' });
@@ -43,7 +43,11 @@ describe('Stop button', () => {
     });
     it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
         renderStop({ tooltipProps: { id: 'test' } });
-        yield userEvent.click(screen.getByRole('button', { name: 'Stop button' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Stop' }));
         expect(screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
     }));
+    it('should handle isCompact', () => {
+        renderStop({ 'data-testid': 'button', isCompact: true });
+        expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/esm/MessageBox/JumpButton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 export interface JumpButtonProps {
     /** Position of the Jump Button(top/bottom) */
     position: 'top' | 'bottom';
@@ -7,5 +7,5 @@ export interface JumpButtonProps {
     /** Flag to change the visibilty of the button */
     isHidden?: boolean;
 }
-declare const JumpButton: React.FunctionComponent<JumpButtonProps>;
+declare const JumpButton: FunctionComponent<JumpButtonProps>;
 export default JumpButton;