@patternfly/chatbot 2.2.1 → 6.3.0-prerelease.10

package/dist/esm/Message/Message.js

@@ -41,8 +41,13 @@ import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSanitize from 'rehype-sanitize';
 import LinkMessage from './LinkMessage/LinkMessage';
 import ErrorMessage from './ErrorMessage/ErrorMessage';
+import MessageInput from './MessageInput';
 export 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 = [], error } = _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", "error"]);
+    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.useState(content);
+    React.useEffect(() => {
+        setMessageText(content);
+    }, [content]);
     const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
     let rehypePlugins = [rehypeUnwrapImages];
     if (openLinkInNewTab) {
@@ -60,6 +65,51 @@ export const MessageBase = (_a) => {
     // Keep timestamps consistent between Timestamp component and aria-label
     const date = new Date();
     const dateString = timestamp !== null && timestamp !== void 0 ? timestamp : `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+    const renderMessage = () => {
+        if (isLoading) {
+            return React.createElement(MessageLoading, { loadingWord: loadingWord });
+        }
+        if (isEditable) {
+            return (React.createElement(React.Fragment, null,
+                beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
+                React.createElement(MessageInput, Object.assign({ content: content, editPlaceholder: editPlaceholder, updateWord: updateWord, cancelWord: cancelWord, onEditUpdate: (event, text) => {
+                        onEditUpdate && onEditUpdate(event);
+                        setMessageText(text);
+                    }, onEditCancel: onEditCancel }, editFormProps))));
+        }
+        return (React.createElement(React.Fragment, null,
+            beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
+            error ? (React.createElement(ErrorMessage, Object.assign({}, error))) : (React.createElement(Markdown, { components: {
+                    p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
+                    code: (_a) => {
+                        var { children } = _a, props = __rest(_a, ["children"]);
+                        return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
+                    },
+                    h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
+                    h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
+                    h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
+                    h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
+                    h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
+                    h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
+                    blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
+                    ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
+                    ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
+                    li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
+                    table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
+                    tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
+                    thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
+                    tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
+                    td: (props) => {
+                        // Conflicts with Td type
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        const { width } = props, rest = __rest(props, ["width"]);
+                        return React.createElement(TdMessage, Object.assign({}, rest));
+                    },
+                    th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
+                    img: (props) => React.createElement(ImageMessage, Object.assign({}, props)),
+                    a: (props) => (React.createElement(LinkMessage, Object.assign({ href: props.href, rel: props.rel, target: props.target }, linkProps), props.children))
+                }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, messageText))));
+    };
     return (React.createElement("section", Object.assign({ "aria-label": `Message from ${role} - ${dateString}`, className: `pf-chatbot__message pf-chatbot__message--${role}`, "aria-live": isLiveRegion ? 'polite' : undefined, "aria-atomic": isLiveRegion ? false : undefined, ref: innerRef }, props),
         React.createElement(Avatar, Object.assign({ className: `pf-chatbot__message-avatar ${hasRoundAvatar ? 'pf-chatbot__message-avatar--round' : ''} ${avatarClassName ? avatarClassName : ''}`, src: avatar, alt: "" }, avatarProps)),
         React.createElement("div", { className: "pf-chatbot__message-contents" },
@@ -70,45 +120,14 @@ export const MessageBase = (_a) => {
                 React.createElement(Timestamp, { date: date }, timestamp)),
             React.createElement("div", { className: "pf-chatbot__message-response" },
                 React.createElement("div", { className: "pf-chatbot__message-and-actions" },
-                    isLoading ? (React.createElement(MessageLoading, { loadingWord: loadingWord })) : (React.createElement(React.Fragment, null,
-                        beforeMainContent && React.createElement(React.Fragment, null, beforeMainContent),
-                        error ? (React.createElement(ErrorMessage, Object.assign({}, error))) : (React.createElement(Markdown, { components: {
-                                p: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.p }, props)),
-                                code: (_a) => {
-                                    var { children } = _a, props = __rest(_a, ["children"]);
-                                    return (React.createElement(CodeBlockMessage, Object.assign({}, props, codeBlockProps), children));
-                                },
-                                h1: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h1 }, props)),
-                                h2: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h2 }, props)),
-                                h3: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h3 }, props)),
-                                h4: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h4 }, props)),
-                                h5: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h5 }, props)),
-                                h6: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.h6 }, props)),
-                                blockquote: (props) => React.createElement(TextMessage, Object.assign({ component: ContentVariants.blockquote }, props)),
-                                ul: (props) => React.createElement(UnorderedListMessage, Object.assign({}, props)),
-                                ol: (props) => React.createElement(OrderedListMessage, Object.assign({}, props)),
-                                li: (props) => React.createElement(ListItemMessage, Object.assign({}, props)),
-                                table: (props) => React.createElement(TableMessage, Object.assign({}, props, tableProps)),
-                                tbody: (props) => React.createElement(TbodyMessage, Object.assign({}, props)),
-                                thead: (props) => React.createElement(TheadMessage, Object.assign({}, props)),
-                                tr: (props) => React.createElement(TrMessage, Object.assign({}, props)),
-                                td: (props) => {
-                                    // Conflicts with Td type
-                                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                                    const { width } = props, rest = __rest(props, ["width"]);
-                                    return React.createElement(TdMessage, Object.assign({}, rest));
-                                },
-                                th: (props) => React.createElement(ThMessage, Object.assign({}, props)),
-                                img: (props) => React.createElement(ImageMessage, Object.assign({}, props)),
-                                a: (props) => (React.createElement(LinkMessage, { href: props.href, rel: props.rel, target: props.target }, props.children))
-                            }, remarkPlugins: [remarkGfm], rehypePlugins: rehypePlugins }, content)),
-                        afterMainContent && React.createElement(React.Fragment, null, afterMainContent))),
-                    !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources)),
-                    quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { quickStart: quickStarts.quickStart, onSelectQuickStart: quickStarts.onSelectQuickStart, minuteWord: quickStarts.minuteWord, minuteWordPlural: quickStarts.minuteWordPlural, prerequisiteWord: quickStarts.prerequisiteWord, prerequisiteWordPlural: quickStarts.prerequisiteWordPlural, quickStartButtonAriaLabel: quickStarts.quickStartButtonAriaLabel })),
+                    renderMessage(),
+                    afterMainContent && React.createElement(React.Fragment, null, afterMainContent),
+                    !isLoading && sources && React.createElement(SourcesCard, Object.assign({}, sources, { isCompact: isCompact })),
+                    quickStarts && quickStarts.quickStart && (React.createElement(QuickStartTile, { 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.createElement(ResponseActions, { actions: actions }),
-                    userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString })),
-                    userFeedbackComplete && React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString })),
-                    !isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps }))),
+                    userFeedbackForm && React.createElement(UserFeedback, Object.assign({}, userFeedbackForm, { timestamp: dateString, isCompact: isCompact })),
+                    userFeedbackComplete && (React.createElement(UserFeedbackComplete, Object.assign({}, userFeedbackComplete, { timestamp: dateString, isCompact: isCompact }))),
+                    !isLoading && quickResponses && (React.createElement(QuickResponse, { quickResponses: quickResponses, quickResponseContainerProps: quickResponseContainerProps, isCompact: isCompact }))),
                 attachments && (React.createElement("div", { className: "pf-chatbot__message-attachments-container" }, attachments.map((attachment) => {
                     var _a;
                     return (React.createElement("div", { key: (_a = attachment.id) !== null && _a !== void 0 ? _a : attachment.name, className: "pf-chatbot__message-attachment" },

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

@@ -282,6 +282,18 @@ describe('Message', () => {
         yield userEvent.click(quickResponse);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
+    it('should be able to handle isCompact', () => __awaiter(void 0, void 0, void 0, function* () {
+        render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
+                {
+                    id: '1',
+                    content: 'Yes',
+                    onClick: jest.fn(),
+                    className: 'test'
+                }
+            ], isCompact: true }));
+        const parent = 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();
         render(React.createElement(Message, { avatar: "./img", role: "bot", name: "Bot", content: "Hi", quickResponses: [
@@ -597,6 +609,12 @@ describe('Message', () => {
         // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
         expect(rehypeExternalLinks).not.toHaveBeenCalled();
     });
+    it('should handle extra link props correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", content: `[PatternFly](https://www.patternfly.org/)`, linkProps: { onClick: spy } }));
+        yield userEvent.click(screen.getByRole('link', { name: /PatternFly/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
     it('should handle error correctly', () => {
         render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", error: ERROR }));
         expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
@@ -614,4 +632,50 @@ describe('Message', () => {
         expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
         expect(screen.queryByText('Test')).toBeFalsy();
     });
+    it('should handle isEditable when there is message content', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, content: "Test" }));
+        expect(screen.getByRole('textbox')).toBeTruthy();
+        expect(screen.getByRole('textbox')).toHaveValue('Test');
+        expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+    });
+    it('should handle isEditable when there is no message content', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true }));
+        expect(screen.getByRole('textbox')).toBeTruthy();
+        expect(screen.getByRole('textbox')).toHaveValue('');
+        expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'Edit prompt message...');
+        expect(screen.getByRole('button', { name: /Update/i })).toBeTruthy();
+        expect(screen.getByRole('button', { name: /Cancel/i })).toBeTruthy();
+    });
+    it('should be able to change edit placeholder', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, editPlaceholder: "I am a placeholder" }));
+        expect(screen.getByRole('textbox')).toBeTruthy();
+        expect(screen.getByRole('textbox')).toHaveValue('');
+        expect(screen.getByRole('textbox')).toHaveAttribute('placeholder', 'I am a placeholder');
+    });
+    it('should be able to change updateWord', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, updateWord: "Submit" }));
+        expect(screen.getByRole('button', { name: /Submit/i })).toBeTruthy();
+    });
+    it('should be able to change cancelWord', () => {
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, cancelWord: "Don't submit" }));
+        expect(screen.getByRole('button', { name: /Don't submit/i })).toBeTruthy();
+    });
+    it('should be able to add onEditUpdate', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditUpdate: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Update/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to add onEditCancel', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, onEditCancel: spy }));
+        yield userEvent.click(screen.getByRole('button', { name: /Cancel/i }));
+        expect(spy).toHaveBeenCalledTimes(1);
+    }));
+    it('should be able to add  editFormProps', () => {
+        const { container } = render(React.createElement(Message, { avatar: "./img", role: "user", name: "User", isEditable: true, editFormProps: { className: 'test' } }));
+        const form = container.querySelector('form');
+        expect(form).toHaveClass('test');
+    });
 });

package/dist/esm/Message/MessageInput.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FormProps } from '@patternfly/react-core';
+export interface MessageInputProps extends FormProps {
+    /** Placeholder for edit input */
+    editPlaceholder?: string;
+    /** Label for the English word "Update" used in edit mode. */
+    updateWord?: string;
+    /** Label for the English word "Cancel" used in edit mode. */
+    cancelWord?: string;
+    /** Callback function for when edit mode update button is clicked */
+    onEditUpdate?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
+    /** Callback functionf or when edit cancel update button is clicked */
+    onEditCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /** Message text */
+    content?: string;
+}
+declare const MessageInput: React.FunctionComponent<MessageInputProps>;
+export default MessageInput;

package/dist/esm/Message/MessageInput.js

@@ -0,0 +1,29 @@
+// ============================================================================
+// Chatbot Main - Message Input
+// ============================================================================
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { ActionGroup, Button, Form, TextArea } from '@patternfly/react-core';
+const MessageInput = (_a) => {
+    var { editPlaceholder = 'Edit prompt message...', updateWord = 'Update', cancelWord = 'Cancel', onEditUpdate, onEditCancel, content } = _a, props = __rest(_a, ["editPlaceholder", "updateWord", "cancelWord", "onEditUpdate", "onEditCancel", "content"]);
+    const [messageText, setMessageText] = React.useState(content !== null && content !== void 0 ? content : '');
+    const onChange = (event, value) => {
+        setMessageText(value);
+    };
+    return (React.createElement(Form, Object.assign({}, props),
+        React.createElement(TextArea, { placeholder: editPlaceholder, value: messageText, onChange: onChange, "aria-label": editPlaceholder, autoResize: true }),
+        React.createElement(ActionGroup, { className: "pf-chatbot__message-edit-buttons" },
+            React.createElement(Button, { variant: "primary", onClick: (event) => onEditUpdate && onEditUpdate(event, messageText) }, updateWord),
+            React.createElement(Button, { variant: "secondary", onClick: onEditCancel }, cancelWord))));
+};
+export default MessageInput;

package/dist/esm/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/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 button', 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

@@ -58,4 +58,8 @@ describe('Attach button', () => {
         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

@@ -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* () {
@@ -224,6 +230,13 @@ describe('Message bar', () => {
         yield userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
         expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
     }));
+    it('can customize the listening placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        render(React.createElement(MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
+        yield userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
+        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' } } } }));

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;