@patternfly/chatbot 6.3.0-prerelease.1 → 6.3.0-prerelease.11

package/dist/esm/Message/QuickResponse/QuickResponse.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { Label, LabelGroup } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
-export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
+export const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect, isCompact }) => {
     const [selectedQuickResponse, setSelectedQuickResponse] = React.useState();
     const handleQuickResponseClick = (id, onClick) => {
         setSelectedQuickResponse(id);
@@ -21,7 +21,7 @@ export const QuickResponse = ({ quickResponses, quickResponseContainerProps = {
     };
     return (React.createElement(LabelGroup, Object.assign({ className: `pf-chatbot__message-quick-response ${(quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className) ? quickResponseContainerProps === null || quickResponseContainerProps === void 0 ? void 0 : quickResponseContainerProps.className : ''}` }, quickResponseContainerProps), quickResponses.map((_a) => {
         var { id, onClick, content, className } = _a, props = __rest(_a, ["id", "onClick", "content", "className"]);
-        return (React.createElement(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? React.createElement(CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}` }, props), content));
+        return (React.createElement(Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? React.createElement(CheckIcon, null) : undefined, color: "blue", key: id, onClick: () => handleQuickResponseClick(id, onClick), className: `${id === selectedQuickResponse ? 'pf-chatbot__message-quick-response--selected' : ''} ${className ? className : ''}`, isCompact: isCompact }, props), content));
     })));
 };
 export default QuickResponse;

package/dist/esm/Message/QuickStarts/QuickStartTile.d.ts

@@ -22,6 +22,8 @@ export interface QuickStartTileProps {
     prerequisiteWordPlural?: string;
     /** Aria-label for the quick start description button */
     quickStartButtonAriaLabel?: string;
+    /** Sets the tile to compact styling */
+    isCompact?: boolean;
 }
 declare const QuickStartTile: React.FC<QuickStartTileProps>;
 export default QuickStartTile;

package/dist/esm/Message/QuickStarts/QuickStartTile.js

@@ -12,7 +12,7 @@ export const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function
     } // or if (/\s+/.test(match)) for white spaces
     return index === 0 ? match.toLowerCase() : match.toUpperCase();
 });
-const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action }) => {
+const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, minuteWord = 'minute', minuteWordPlural = 'minutes', prerequisiteWord, prerequisiteWordPlural, quickStartButtonAriaLabel, action, isCompact }) => {
     const { metadata: { name: id }, spec: { icon, displayName, description, durationMinutes, prerequisites, link, type } } = quickStart;
     let quickStartIcon;
     if (typeof icon === 'object') {
@@ -33,7 +33,7 @@ const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, mi
     };
     const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
     const additionalAction = action ? (React.createElement(Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
-    return (React.createElement(Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${camelize(displayName)}` },
+    return (React.createElement(Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${camelize(displayName)}`, isCompact: isCompact },
         React.createElement(CardHeader, Object.assign({}, (action && {
             actions: { actions: additionalAction }
         })), quickStartIcon),

package/dist/esm/Message/UserFeedback/UserFeedback.js

@@ -18,7 +18,7 @@ import { ActionGroup, Button, Card, CardBody, CardHeader, Form, TextArea } from
 import QuickResponse from '../QuickResponse/QuickResponse';
 import CloseButton from './CloseButton';
 const UserFeedback = (_a) => {
-    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad"]);
+    var { className, timestamp, title = 'Why did you choose this rating?', hasTextArea, textAreaAriaLabel = `Provide optional additional feedback for message received at ${timestamp}`, textAreaPlaceholder = 'Provide optional additional feedback', onTextAreaChange, submitWord = 'Submit', quickResponses, quickResponseContainerProps = { 'aria-label': `Quick feedback for message received at ${timestamp}` }, onSubmit, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, id, headingLevel: HeadingLevel = 'h1', focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "timestamp", "title", "hasTextArea", "textAreaAriaLabel", "textAreaPlaceholder", "onTextAreaChange", "submitWord", "quickResponses", "quickResponseContainerProps", "onSubmit", "onClose", "closeButtonAriaLabel", "id", "headingLevel", "focusOnLoad", "isCompact"]);
     const [selectedResponse, setSelectedResponse] = React.useState();
     const [value, setValue] = React.useState('');
     const divRef = React.useRef(null);
@@ -31,14 +31,14 @@ const UserFeedback = (_a) => {
     return (
     /* card does not have ref forwarding; hence wrapper div */
     React.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
-        React.createElement(Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
+        React.createElement(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
             React.createElement(CardHeader, { actions: {
                     actions: React.createElement(CloseButton, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
                 } },
                 React.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
             React.createElement(CardBody, null,
-                React.createElement(Form, { className: "pf-chatbot__feedback-card-form" },
-                    quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id) })),
+                React.createElement(Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` },
+                    quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })),
                     hasTextArea && (React.createElement(TextArea, { value: value, onChange: (_event, value) => {
                             setValue(value);
                             onTextAreaChange && onTextAreaChange(_event, value);

package/dist/esm/Message/UserFeedback/UserFeedback.test.js

@@ -125,4 +125,8 @@ describe('UserFeedback', () => {
         render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", focusOnLoad: false }));
         expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
     });
+    it('should handle isCompact', () => {
+        render(React.createElement(UserFeedback, { timestamp: "12/12/12", onClose: jest.fn, onSubmit: jest.fn, quickResponses: MOCK_RESPONSES, "data-testid": "card", isCompact: true }));
+        expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/esm/Message/UserFeedback/UserFeedbackComplete.js

@@ -17,7 +17,7 @@ import React from 'react';
 import { Card, CardBody, CardHeader, CardTitle, useOUIAProps } from '@patternfly/react-core';
 import CloseButton from './CloseButton';
 const UserFeedbackComplete = (_a) => {
-    var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad"]);
+    var { className, title = 'Feedback submitted', body = "We've received your response. Thank you for sharing your feedback!", timestamp, timeout = false, timeoutAnimation = 3000, onTimeout, onClose, closeButtonAriaLabel = `Close feedback for message received at ${timestamp}`, onMouseEnter, onMouseLeave, ouiaId, ouiaSafe, isLiveRegion, id, focusOnLoad = true, isCompact } = _a, props = __rest(_a, ["className", "title", "body", "timestamp", "timeout", "timeoutAnimation", "onTimeout", "onClose", "closeButtonAriaLabel", "onMouseEnter", "onMouseLeave", "ouiaId", "ouiaSafe", "isLiveRegion", "id", "focusOnLoad", "isCompact"]);
     const [timedOut, setTimedOut] = React.useState(false);
     const [timedOutAnimation, setTimedOutAnimation] = React.useState(true);
     const [isMouseOver, setIsMouseOver] = React.useState();
@@ -80,8 +80,8 @@ const UserFeedbackComplete = (_a) => {
         'aria-live': 'polite',
         'aria-atomic': 'false'
     }), { id: id, tabIndex: 0, "aria-label": title }, ouiaProps),
-        React.createElement(Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
-            React.createElement(CardHeader, { actions: 
+        React.createElement(Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}` }, props),
+            React.createElement(CardHeader, { className: onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header', actions: 
                 /* eslint-disable indent */
                 onClose
                     ? {
@@ -107,6 +107,6 @@ const UserFeedbackComplete = (_a) => {
                         React.createElement("path", { d: "M27.7803 30.1276C27.6098 30.1276 27.4497 30.0614 27.3298 29.9406L22.9465 25.5562C22.8267 25.4364 22.7595 25.2762 22.7595 25.1068C22.7595 24.9374 22.8256 24.7762 22.9465 24.6554L24.2379 23.364C24.3577 23.2442 24.5178 23.177 24.6883 23.177C24.8587 23.177 25.0168 23.2431 25.1377 23.363L27.7803 26.0056L34.861 18.9259C34.9808 18.8061 35.1409 18.7389 35.3103 18.7389C35.4798 18.7389 35.6389 18.8051 35.7597 18.9239L37.0531 20.2173C37.173 20.3361 37.2401 20.4962 37.2401 20.6677C37.2401 20.8392 37.174 20.9983 37.0531 21.1181L28.2317 29.9406C28.1119 30.0604 27.9518 30.1265 27.7823 30.1265L27.7803 30.1276Z", fill: "white" }))),
                 React.createElement("div", { className: "pf-chatbot__feedback-complete-text" },
                     React.createElement(CardTitle, { className: "pf-chatbot__feedback-complete-title" }, title),
-                    React.createElement(CardBody, { className: `pf-chatbot__feedback-complete-body` }, body))))));
+                    React.createElement(CardBody, { className: `pf-chatbot__feedback-complete-card-body` }, body))))));
 };
 export default UserFeedbackComplete;

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

@@ -241,4 +241,8 @@ describe('UserFeedbackComplete', () => {
         render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", focusOnLoad: false }));
         expect(screen.getByTestId('card').parentElement).not.toHaveFocus();
     });
+    it('should handle isCompact', () => {
+        render(React.createElement(UserFeedbackComplete, { timestamp: "12/12/12", "data-testid": "card", isCompact: true }));
+        expect(screen.getByTestId('card')).toHaveClass('pf-m-compact');
+    });
 });

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

@@ -17,5 +17,6 @@ export interface AttachButtonProps extends ButtonProps {
     tooltipContent?: string;
     /** Test id applied to input */
     inputTestId?: string;
+    isCompact?: boolean;
 }
 export declare const AttachButton: React.ForwardRefExoticComponent<AttachButtonProps & React.RefAttributes<any>>;

package/dist/esm/MessageBar/AttachButton.js

@@ -18,7 +18,7 @@ import { Button, Icon, Tooltip } from '@patternfly/react-core';
 import { useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 const AttachButtonBase = (_a) => {
-    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId"]);
+    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact"]);
     const { open, getInputProps } = useDropzone({
         multiple: true,
         onDropAccepted: onAttachAccepted
@@ -28,7 +28,7 @@ const AttachButtonBase = (_a) => {
         React.createElement(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, position: "top", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
             // prevents VO announcements of both aria label and tooltip
             aria: "none" }, tooltipProps),
-            React.createElement(Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach button', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: React.createElement(Icon, { iconSize: "xl", isInline: true },
-                    React.createElement(PaperclipIcon, null)) }, props)))));
+            React.createElement(Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: React.createElement(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                    React.createElement(PaperclipIcon, null)), size: isCompact ? 'sm' : undefined }, props)))));
 };
 export const AttachButton = React.forwardRef((props, ref) => (React.createElement(AttachButtonBase, Object.assign({ innerRef: ref }, props))));

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

@@ -15,11 +15,11 @@ import { AttachButton } from './AttachButton';
 describe('Attach button', () => {
     it('should render button correctly', () => {
         render(React.createElement(AttachButton, null));
-        expect(screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
     });
     it('should handle isDisabled prop', () => {
         render(React.createElement(AttachButton, { isDisabled: true }));
-        expect(screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: 'Attach' })).toBeDisabled();
     });
     it('should handle spread props, including aria-label', () => {
         render(React.createElement(AttachButton, { "aria-label": "test" }));
@@ -28,22 +28,22 @@ describe('Attach button', () => {
     it('should handle onClick', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         render(React.createElement(AttachButton, { onClick: spy }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle className prop', () => {
         render(React.createElement(AttachButton, { className: "test" }));
-        expect(screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
+        expect(screen.getByRole('button', { name: 'Attach' })).toHaveClass('test');
     });
     it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         render(React.createElement(AttachButton, { onClick: jest.fn, tooltipContent: "Test" }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
         render(React.createElement(AttachButton, { tooltipProps: { id: 'test' } }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         expect(screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
     }));
     // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
@@ -51,11 +51,15 @@ describe('Attach button', () => {
     it('should handle onAttachAccepted prop', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         render(React.createElement(AttachButton, { onAttachAccepted: spy, inputTestId: "input" }));
-        yield userEvent.click(screen.getByRole('button', { name: 'Attach button' }));
+        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('should handle isCompact', () => {
+        render(React.createElement(AttachButton, { isCompact: true, "data-testid": "button" }));
+        expect(screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

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

@@ -28,10 +28,14 @@ export interface MessageBarProps extends TextAreaProps {
     className?: string;
     /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */
     alwayShowSendButton?: boolean;
+    /** Placeholder for message input */
+    placeholder?: string;
     /** Flag to disable/enable the Attach button  */
     hasAttachButton?: boolean;
     /** Flag to enable the Microphone button  */
     hasMicrophoneButton?: boolean;
+    /** Placeholder text when listening */
+    listeningText?: string;
     /** Flag to enable the Stop button, used for streaming content */
     hasStopButton?: boolean;
     /** Callback function for when stop button is clicked */
@@ -74,6 +78,7 @@ export interface MessageBarProps extends TextAreaProps {
     onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
     /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
     displayMode?: ChatbotDisplayMode;
+    isCompact?: boolean;
 }
 export declare const MessageBar: React.FunctionComponent<MessageBarProps>;
 export default MessageBar;

package/dist/esm/MessageBar/MessageBar.js

@@ -18,7 +18,7 @@ import { AttachButton } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 export const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, hasAttachButton = true, hasMicrophoneButton, handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "hasAttachButton", "hasMicrophoneButton", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = React.useState(value !== null && value !== void 0 ? value : '');
@@ -26,11 +26,12 @@ export const MessageBar = (_a) => {
     const [hasSentMessage, setHasSentMessage] = React.useState(false);
     const textareaRef = React.useRef(null);
     const attachButtonRef = React.useRef(null);
+    const topMargin = '1rem';
     const setInitialLineHeight = (field) => {
         field.style.setProperty('line-height', '1rem');
         const parent = field.parentElement;
         if (parent) {
-            parent.style.setProperty('margin-top', `1rem`);
+            parent.style.setProperty('margin-top', topMargin);
             parent.style.setProperty('margin-bottom', `0rem`);
             parent.style.setProperty('height', 'inherit');
             const grandparent = parent.parentElement;
@@ -52,8 +53,8 @@ export const MessageBar = (_a) => {
                 parseInt(computed.getPropertyValue('border-bottom-width'));
             parent.style.setProperty('height', `${height}px`);
             if (height > 32 || window.innerWidth <= 507) {
-                parent.style.setProperty('margin-bottom', `1rem`);
-                parent.style.setProperty('margin-top', `1rem`);
+                parent.style.setProperty('margin-bottom', topMargin);
+                parent.style.setProperty('margin-top', topMargin);
             }
         }
     };
@@ -74,8 +75,8 @@ export const MessageBar = (_a) => {
     const handleNewLine = (field) => {
         const parent = field.parentElement;
         if (parent) {
-            parent.style.setProperty('margin-bottom', `1rem`);
-            parent.style.setProperty('margin-top', `1rem`);
+            parent.style.setProperty('margin-bottom', topMargin);
+            parent.style.setProperty('margin-top', topMargin);
         }
     };
     React.useEffect(() => {
@@ -170,17 +171,17 @@ export const MessageBar = (_a) => {
     const renderButtons = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (hasStopButton && handleStopButton) {
-            return (React.createElement(StopButton, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
+            return (React.createElement(StopButton, 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 }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
         }
         return (React.createElement(React.Fragment, null,
-            attachMenuProps && (React.createElement(AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
-            !attachMenuProps && hasAttachButton && (React.createElement(AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
-            hasMicrophoneButton && (React.createElement(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
-            (alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
+            attachMenuProps && (React.createElement(AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent, isCompact: isCompact }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
+            !attachMenuProps && hasAttachButton && (React.createElement(AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId, isCompact: isCompact }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
+            hasMicrophoneButton && (React.createElement(MicrophoneButton, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language, isCompact: isCompact }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
+            (alwayShowSendButton || message) && (React.createElement(SendButton, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent, isCompact: isCompact }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
     };
     const messageBarContents = (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "pf-chatbot__message-bar-input" },
-            React.createElement(TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? 'Listening' : 'Send a message...', placeholder: isListeningMessage ? 'Listening' : 'Send a message...', ref: textareaRef, onKeyDown: handleKeyDown }, props))),
+        React.createElement("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}` },
+            React.createElement(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 }, props))),
         React.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
     if (attachMenuProps) {
         return (React.createElement(AttachMenu, Object.assign({ toggle: (toggleRef) => (React.createElement("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents)), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {

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

@@ -48,9 +48,9 @@ describe('Message bar', () => {
     });
     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();
+        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* () {
@@ -71,6 +71,12 @@ describe('Message bar', () => {
         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* () {
+        render(React.createElement(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');
+    }));
     // Send button
     // --------------------------------------------------------------------------
     it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -78,15 +84,15 @@ describe('Message bar', () => {
         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 }));
         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();
@@ -94,24 +100,24 @@ describe('Message bar', () => {
         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();
+        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();
+        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' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Send' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('can handle buttonProps props appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -152,30 +158,30 @@ 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();
+        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' }));
+        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* () {
+    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' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Attach' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('can handle buttonProps props appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -186,17 +192,17 @@ describe('Message bar', () => {
     // --------------------------------------------------------------------------
     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();
+        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' }));
+        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' }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Stop' }));
         expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('can handle buttonProps props appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -207,23 +213,30 @@ describe('Message bar', () => {
     // --------------------------------------------------------------------------
     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();
+        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();
+        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: {
                 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: 'Use microphone' }));
+        const input = screen.getByRole('textbox', { name: /I am listening/i });
+        expect(input).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' } } } }));
@@ -231,9 +244,9 @@ describe('Message bar', () => {
     }));
     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();
+        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');
     });

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

@@ -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 default MicrophoneButton;

package/dist/esm/MessageBar/MicrophoneButton.js

@@ -18,7 +18,7 @@ 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();
@@ -63,7 +63,7 @@ export const MicrophoneButton = (_a) => {
         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))));
+        React.createElement(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: React.createElement(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                React.createElement(MicrophoneIcon, null)), size: isCompact ? 'sm' : undefined }, props))));
 };
 export default MicrophoneButton;

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

@@ -9,6 +9,7 @@ export interface SendButtonProps extends ButtonProps {
     tooltipProps?: Omit<TooltipProps, 'content'>;
     /** English text "Send" used in the tooltip */
     tooltipContent?: string;
+    isCompact?: boolean;
 }
 export declare const SendButton: React.FunctionComponent<SendButtonProps>;
 export default SendButton;

package/dist/esm/MessageBar/SendButton.js

@@ -17,11 +17,11 @@ import React from 'react';
 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"]);
+    var { className, onClick, tooltipProps, tooltipContent = 'Send', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
     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, 
         // 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))));
+        React.createElement(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: React.createElement(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                React.createElement(PaperPlaneIcon, null)), size: isCompact ? 'sm' : undefined }, props))));
 };
 export default SendButton;