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

package/dist/cjs/CodeModal/CodeModal.js

@@ -50,7 +50,7 @@ const FileDetails_1 = __importStar(require("../FileDetails"));
 const Chatbot_1 = require("../Chatbot");
 const ChatbotModal_1 = __importDefault(require("../ChatbotModal/ChatbotModal"));
 const CodeModal = (_a) => {
-    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = Chatbot_1.ChatbotDisplayMode.default } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode"]);
+    var { fileName, code, codeEditorControlClassName: codeEditorClassName, handleModalToggle, isCopyEnabled, isLineNumbersVisible, isModalOpen, isReadOnly, onPrimaryAction, onSecondaryAction, primaryActionBtn, secondaryActionBtn, title, displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact } = _a, props = __rest(_a, ["fileName", "code", "codeEditorControlClassName", "handleModalToggle", "isCopyEnabled", "isLineNumbersVisible", "isModalOpen", "isReadOnly", "onPrimaryAction", "onSecondaryAction", "primaryActionBtn", "secondaryActionBtn", "title", "displayMode", "isCompact"]);
     const [newCode, setNewCode] = react_1.default.useState(code);
     const handlePrimaryAction = (_event) => {
         handleModalToggle(_event);
@@ -75,13 +75,13 @@ const CodeModal = (_a) => {
             setNewCode(value);
         }
     };
-    const modal = (react_1.default.createElement(ChatbotModal_1.default, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode },
+    const modal = (react_1.default.createElement(ChatbotModal_1.default, { isOpen: isModalOpen, onClose: handleModalToggle, ouiaId: "CodeModal", "aria-labelledby": "code-modal-title", "aria-describedby": "code-modal", className: `pf-chatbot__code-modal ${isCompact ? 'pf-m-compact' : ''} pf-chatbot__code-modal--${displayMode}`, displayMode: displayMode, isCompact: isCompact },
         react_1.default.createElement(react_core_1.ModalHeader, { title: title, labelId: "code-modal-title" }),
         react_1.default.createElement(react_core_1.ModalBody, { id: "code-modal-body" },
             react_1.default.createElement(react_core_1.Stack, { className: "pf-chatbot__code-modal-body" },
                 react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-file-details" },
                     react_1.default.createElement(FileDetails_1.default, { fileName: fileName })),
-                react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-body" },
+                react_1.default.createElement(react_core_1.StackItem, { className: "pf-chatbot__code-modal-editor" },
                     react_1.default.createElement(react_code_editor_1.CodeEditor, Object.assign({ isDarkTheme: true, isLineNumbersVisible: isLineNumbersVisible, isLanguageLabelVisible: true, isCopyEnabled: isCopyEnabled, isReadOnly: isReadOnly, code: newCode, language: FileDetails_1.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)], onEditorDidMount: onEditorDidMount, onCodeChange: onCodeChange, className: codeEditorClassName, isFullHeight: true, options: {
                             glyphMargin: false,
                             folding: false

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

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

package/dist/cjs/CodeModal/CodeModal.test.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+const CodeModal_1 = __importDefault(require("./CodeModal"));
+describe('ChatbotModal', () => {
+    it('should render compact modal', () => {
+        (0, react_2.render)(react_1.default.createElement(CodeModal_1.default, { isCompact: true, code: "Hello world", fileName: "greetings.txt", isModalOpen: true, handleModalToggle: jest.fn(), onPrimaryAction: jest.fn(), onSecondaryAction: jest.fn(), title: "Preview attachment", primaryActionBtn: "Submit", secondaryActionBtn: "Cancel" }));
+        expect(react_2.screen.getByRole('dialog')).toHaveClass('pf-m-compact');
+    });
+});

package/dist/cjs/FileDetails/FileDetails.js

@@ -935,7 +935,7 @@ exports.extensionToLanguage = {
 const FileDetails = ({ className, fileName, fileNameClassName, languageTestId }) => {
     var _a;
     const language = (_a = exports.extensionToLanguage[path_browserify_1.default.extname(fileName).slice(1)]) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-    return (react_1.default.createElement(react_core_1.Flex, { className: `pf-chatbot__file-details ${className}`, gap: { default: 'gapSm' } },
+    return (react_1.default.createElement(react_core_1.Flex, { className: `pf-chatbot__file-details ${className ? className : ''}`, gap: { default: 'gapSm' } },
         react_1.default.createElement(react_core_1.Flex, { className: "pf-chatbot__code-icon", justifyContent: { default: 'justifyContentCenter' }, alignItems: { default: 'alignItemsCenter' }, alignSelf: { default: 'alignSelfCenter' } },
             react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
                 react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "currentColor" }),

package/dist/cjs/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -52,7 +52,7 @@ const CodeBlockMessage = (_a) => {
     const actions = (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_core_1.CodeBlockAction, null,
             language && react_1.default.createElement("div", { className: "pf-chatbot__message-code-block-language" }, language),
-            react_1.default.createElement(react_core_1.Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code button', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children) }, copied ? react_1.default.createElement(check_icon_1.CheckIcon, null) : react_1.default.createElement(copy_icon_1.CopyIcon, null)),
+            react_1.default.createElement(react_core_1.Button, { ref: buttonRef, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Copy code', variant: "plain", className: "pf-chatbot__button--copy", onClick: (event) => handleCopy(event, children) }, copied ? react_1.default.createElement(check_icon_1.CheckIcon, null) : react_1.default.createElement(copy_icon_1.CopyIcon, null)),
             react_1.default.createElement(react_core_1.Tooltip, { id: tooltipID, content: "Copy", position: "top", triggerRef: buttonRef }))));
     return (react_1.default.createElement("div", { className: "pf-chatbot__message-code-block" },
         react_1.default.createElement(react_core_1.CodeBlock, { actions: actions },

package/dist/cjs/Message/Message.d.ts

@@ -120,6 +120,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
     onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Props for edit form */
     editFormProps?: FormProps;
+    /** Sets message to compact styling. */
+    isCompact?: boolean;
 }
 export declare const MessageBase: React.FunctionComponent<MessageProps>;
 declare const Message: React.ForwardRefExoticComponent<Omit<MessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/Message/Message.js

@@ -49,7 +49,7 @@ const LinkMessage_1 = __importDefault(require("./LinkMessage/LinkMessage"));
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage/ErrorMessage"));
 const MessageInput_1 = __importDefault(require("./MessageInput"));
 const MessageBase = (_a) => {
-    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps"]);
+    var { role, content, extraContent, name, avatar, timestamp, isLoading, actions, sources, botWord = 'AI', loadingWord = 'Loading message', codeBlockProps, quickResponses, quickResponseContainerProps = { numLabels: 5 }, attachments, hasRoundAvatar = true, avatarProps, quickStarts, userFeedbackForm, userFeedbackComplete, isLiveRegion = true, innerRef, tableProps, openLinkInNewTab = true, additionalRehypePlugins = [], linkProps, error, isEditable, editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, editFormProps, isCompact } = _a, props = __rest(_a, ["role", "content", "extraContent", "name", "avatar", "timestamp", "isLoading", "actions", "sources", "botWord", "loadingWord", "codeBlockProps", "quickResponses", "quickResponseContainerProps", "attachments", "hasRoundAvatar", "avatarProps", "quickStarts", "userFeedbackForm", "userFeedbackComplete", "isLiveRegion", "innerRef", "tableProps", "openLinkInNewTab", "additionalRehypePlugins", "linkProps", "error", "isEditable", "editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "editFormProps", "isCompact"]);
     const [messageText, setMessageText] = react_1.default.useState(content);
     react_1.default.useEffect(() => {
         setMessageText(content);
@@ -128,12 +128,12 @@ const MessageBase = (_a) => {
                 react_1.default.createElement("div", { className: "pf-chatbot__message-and-actions" },
                     renderMessage(),
                     afterMainContent && react_1.default.createElement(react_1.default.Fragment, null, afterMainContent),
-                    !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources)),
-                    quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
+                    !isLoading && sources && react_1.default.createElement(SourcesCard_1.default, Object.assign({}, sources, { isCompact: isCompact })),
+                    quickStarts && quickStarts.quickStart && (react_1.default.createElement(QuickStartTile_1.default, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel, isCompact: isCompact })),
                     !isLoading && actions && react_1.default.createElement(ResponseActions_1.default, { actions: actions }),
-                    userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
-                    userFeedbackComplete && react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
-                    !isLoading && quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
+                    userFeedbackForm && react_1.default.createElement(UserFeedback_1.default, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
+                    userFeedbackComplete && (react_1.default.createElement(UserFeedbackComplete_1.default, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
+                    !isLoading && quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))),
                 attachments && (react_1.default.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
                     var _a;
                     return (react_1.default.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },

package/dist/cjs/Message/Message.test.js

@@ -287,6 +287,18 @@ describe('Message', () => {
         yield user_event_1.default.click(quickResponse);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
+    it('should be able to handle isCompact', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
+                {
+                    id: '1',
+                    content: 'Yes',
+                    onClick: jest.fn(),
+                    className: 'test'
+                }
+            ], isCompact: true }));
+        const parent = react_2.screen.getByRole('button', { name: /Yes/i }).parentNode;
+        expect(parent).toHaveClass('pf-m-compact');
+    }));
     it('should be able to show more than 1 quick response', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
@@ -384,7 +396,7 @@ describe('Message', () => {
     it('should render code correctly', () => {
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
         expect(react_2.screen.getByText('Here is some YAML code:')).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
         expect(react_2.screen.getByText(/yaml/)).toBeTruthy();
         expect(react_2.screen.getByText(/apiVersion:/i)).toBeTruthy();
         expect(react_2.screen.getByText(/helm.openshift.io\/v1beta1/i)).toBeTruthy();
@@ -400,8 +412,8 @@ describe('Message', () => {
         // need explicit setup since RTL stubs clipboard if you do this
         const user = user_event_1.default.setup();
         (0, react_2.render)(react_1.default.createElement(Message_1.default, { avatar: "./img", role: "user", name: "User", content: CODE_MESSAGE }));
-        expect(react_2.screen.getByRole('button', { name: 'Copy code button' })).toBeTruthy();
-        yield user.click(react_2.screen.getByRole('button', { name: 'Copy code button' }));
+        expect(react_2.screen.getByRole('button', { name: 'Copy code' })).toBeTruthy();
+        yield user.click(react_2.screen.getByRole('button', { name: 'Copy code' }));
         const clipboardText = yield navigator.clipboard.readText();
         expect(clipboardText.trim()).toEqual(CODE.trim());
     }));

package/dist/cjs/Message/QuickResponse/QuickResponse.d.ts

@@ -12,6 +12,8 @@ export interface QuickResponseProps {
     quickResponseContainerProps?: Omit<LabelGroupProps, 'ref'>;
     /** Callback when a response is clicked; used in feedback cards */
     onSelect?: (id: string) => void;
+    /** Sets the quick responses to compact styling */
+    isCompact?: boolean;
 }
 export declare const QuickResponse: React.FunctionComponent<QuickResponseProps>;
 export default QuickResponse;

package/dist/cjs/Message/QuickResponse/QuickResponse.js

@@ -18,7 +18,7 @@ exports.QuickResponse = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const react_icons_1 = require("@patternfly/react-icons");
-const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect }) => {
+const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabels: 5 }, onSelect, isCompact }) => {
     const [selectedQuickResponse, setSelectedQuickResponse] = react_1.default.useState();
     const handleQuickResponseClick = (id, onClick) => {
         setSelectedQuickResponse(id);
@@ -27,7 +27,7 @@ const QuickResponse = ({ quickResponses, quickResponseContainerProps = { numLabe
     };
     return (react_1.default.createElement(react_core_1.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_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.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_1.default.createElement(react_core_1.Label, Object.assign({ variant: id === selectedQuickResponse ? undefined : 'outline', icon: id === selectedQuickResponse ? react_1.default.createElement(react_icons_1.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));
     })));
 };
 exports.QuickResponse = QuickResponse;

package/dist/cjs/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/cjs/Message/QuickStarts/QuickStartTile.js

@@ -42,7 +42,7 @@ const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match
     return index === 0 ? match.toLowerCase() : match.toUpperCase();
 });
 exports.camelize = camelize;
-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') {
@@ -63,7 +63,7 @@ const QuickStartTile = ({ className, quickStart, onClick, onSelectQuickStart, mi
     };
     const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || outlined_bookmark_icon_1.default;
     const additionalAction = action ? (React.createElement(react_core_1.Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
-    return (React.createElement(react_core_1.Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${(0, exports.camelize)(displayName)}` },
+    return (React.createElement(react_core_1.Card, { className: `pf-chatbot__quickstarts-tile ${className ? className : ''}`, id: `${id}-chatbot-qs-tile`, style: { height: '100%' }, "data-testid": `chatbot-qs-card-${(0, exports.camelize)(displayName)}`, isCompact: isCompact },
         React.createElement(react_core_1.CardHeader, Object.assign({}, (action && {
             actions: { actions: additionalAction }
         })), quickStartIcon),

package/dist/cjs/Message/UserFeedback/UserFeedback.js

@@ -23,7 +23,7 @@ const react_core_1 = require("@patternfly/react-core");
 const QuickResponse_1 = __importDefault(require("../QuickResponse/QuickResponse"));
 const CloseButton_1 = __importDefault(require("./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_1.default.useState();
     const [value, setValue] = react_1.default.useState('');
     const divRef = react_1.default.useRef(null);
@@ -36,14 +36,14 @@ const UserFeedback = (_a) => {
     return (
     /* card does not have ref forwarding; hence wrapper div */
     react_1.default.createElement("div", { ref: divRef, id: id, tabIndex: 0, "aria-label": title },
-        react_1.default.createElement(react_core_1.Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
+        react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
             react_1.default.createElement(react_core_1.CardHeader, { actions: {
                     actions: react_1.default.createElement(CloseButton_1.default, { onClose: onClose, ariaLabel: closeButtonAriaLabel })
                 } },
                 react_1.default.createElement(HeadingLevel, { className: "pf-chatbot__feedback-card-title" }, title)),
             react_1.default.createElement(react_core_1.CardBody, null,
-                react_1.default.createElement(react_core_1.Form, { className: "pf-chatbot__feedback-card-form" },
-                    quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id) })),
+                react_1.default.createElement(react_core_1.Form, { className: `pf-chatbot__feedback-card-form ${isCompact ? 'pf-m-compact' : ''}` },
+                    quickResponses && (react_1.default.createElement(QuickResponse_1.default, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, onSelect: (id) => setSelectedResponse(id), isCompact: isCompact })),
                     hasTextArea && (react_1.default.createElement(react_core_1.TextArea, { value: value, onChange: (_event, value) => {
                             setValue(value);
                             onTextAreaChange && onTextAreaChange(_event, value);

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

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

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

@@ -22,7 +22,7 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const CloseButton_1 = __importDefault(require("./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_1.default.useState(false);
     const [timedOutAnimation, setTimedOutAnimation] = react_1.default.useState(true);
     const [isMouseOver, setIsMouseOver] = react_1.default.useState();
@@ -85,8 +85,8 @@ const UserFeedbackComplete = (_a) => {
         'aria-live': 'polite',
         'aria-atomic': 'false'
     }), { id: id, tabIndex: 0, "aria-label": title }, ouiaProps),
-        react_1.default.createElement(react_core_1.Card, Object.assign({ className: `pf-chatbot__feedback-card ${className ? className : ''}` }, props),
-            react_1.default.createElement(react_core_1.CardHeader, { actions: 
+        react_1.default.createElement(react_core_1.Card, Object.assign({ isCompact: isCompact, className: `pf-chatbot__feedback-card pf-chatbot__feedback-card-complete${className ? ` ${className}` : ''}` }, props),
+            react_1.default.createElement(react_core_1.CardHeader, { className: onClose ? 'pf-chatbot__feedback-card-complete-header' : 'pf-chatbot__feedback-card-complete-empty-header', actions: 
                 /* eslint-disable indent */
                 onClose
                     ? {
@@ -112,6 +112,6 @@ const UserFeedbackComplete = (_a) => {
                         react_1.default.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_1.default.createElement("div", { className: "pf-chatbot__feedback-complete-text" },
                     react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__feedback-complete-title" }, title),
-                    react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__feedback-complete-body` }, body))))));
+                    react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__feedback-complete-card-body` }, body))))));
 };
 exports.default = UserFeedbackComplete;

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

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

package/dist/cjs/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/cjs/MessageBar/AttachButton.js

@@ -24,7 +24,7 @@ const react_core_1 = require("@patternfly/react-core");
 const react_dropzone_1 = require("react-dropzone");
 const paperclip_icon_1 = require("@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 } = (0, react_dropzone_1.useDropzone)({
         multiple: true,
         onDropAccepted: onAttachAccepted
@@ -34,7 +34,7 @@ const AttachButtonBase = (_a) => {
         react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, position: "top", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
             // prevents VO announcements of both aria label and tooltip
             aria: "none" }, tooltipProps),
-            react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach button', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
-                    react_1.default.createElement(paperclip_icon_1.PaperclipIcon, null)) }, props)))));
+            react_1.default.createElement(react_core_1.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_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                    react_1.default.createElement(paperclip_icon_1.PaperclipIcon, null)), size: isCompact ? 'sm' : undefined }, props)))));
 };
 exports.AttachButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(AttachButtonBase, Object.assign({ innerRef: ref }, props))));

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

@@ -20,11 +20,11 @@ const AttachButton_1 = require("./AttachButton");
 describe('Attach button', () => {
     it('should render button correctly', () => {
         (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, null));
-        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
     });
     it('should handle isDisabled prop', () => {
         (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { isDisabled: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
+        expect(react_2.screen.getByRole('button', { name: 'Attach' })).toBeDisabled();
     });
     it('should handle spread props, including aria-label', () => {
         (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { "aria-label": "test" }));
@@ -33,22 +33,22 @@ describe('Attach button', () => {
     it('should handle onClick', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { onClick: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle className prop', () => {
         (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { className: "test" }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
+        expect(react_2.screen.getByRole('button', { name: 'Attach' })).toHaveClass('test');
     });
     it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { onClick: jest.fn, tooltipContent: "Test" }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { tooltipProps: { id: 'test' } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach' }));
         expect(react_2.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
@@ -56,11 +56,15 @@ describe('Attach button', () => {
     it('should handle onAttachAccepted prop', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { onAttachAccepted: spy, inputTestId: "input" }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach' }));
         const file = new File(['test'], 'test.json');
         const input = react_2.screen.getByTestId('input');
         yield user_event_1.default.upload(input, file);
         expect(input.files).toHaveLength(1);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
+    it('should handle isCompact', () => {
+        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { isCompact: true, "data-testid": "button" }));
+        expect(react_2.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/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/cjs/MessageBar/MessageBar.js

@@ -24,7 +24,7 @@ const AttachButton_1 = require("./AttachButton");
 const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
 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_1.default.useState(value !== null && value !== void 0 ? value : '');
@@ -32,11 +32,12 @@ const MessageBar = (_a) => {
     const [hasSentMessage, setHasSentMessage] = react_1.default.useState(false);
     const textareaRef = react_1.default.useRef(null);
     const attachButtonRef = react_1.default.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;
@@ -58,8 +59,8 @@ 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);
             }
         }
     };
@@ -80,8 +81,8 @@ 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_1.default.useEffect(() => {
@@ -176,17 +177,17 @@ const MessageBar = (_a) => {
     const renderButtons = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (hasStopButton && handleStopButton) {
-            return (react_1.default.createElement(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
+            return (react_1.default.createElement(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
         }
         return (react_1.default.createElement(react_1.default.Fragment, null,
-            attachMenuProps && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
-            !attachMenuProps && hasAttachButton && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
-            hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
-            (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(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_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent, isCompact: isCompact }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
+            !attachMenuProps && hasAttachButton && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId, isCompact: isCompact }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
+            hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language, isCompact: isCompact }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
+            (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(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_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "pf-chatbot__message-bar-input" },
-            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? 'Listening' : 'Send a message...', placeholder: isListeningMessage ? 'Listening' : 'Send a message...', ref: textareaRef, onKeyDown: handleKeyDown }, props))),
+        react_1.default.createElement("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}` },
+            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props))),
         react_1.default.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
     if (attachMenuProps) {
         return (react_1.default.createElement(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => (react_1.default.createElement("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents)), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {