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

package/dist/cjs/Chatbot/Chatbot.d.ts

@@ -12,6 +12,8 @@ export interface ChatbotProps {
     innerRef?: React.Ref<HTMLDivElement>;
     /** Custom aria label applied to focusable container */
     ariaLabel?: string;
+    /** Density of information within the ChatBot */
+    isCompact?: boolean;
 }
 export declare enum ChatbotDisplayMode {
     default = "default",

package/dist/cjs/Chatbot/Chatbot.js

@@ -29,13 +29,13 @@ var ChatbotDisplayMode;
     ChatbotDisplayMode["drawer"] = "drawer";
 })(ChatbotDisplayMode || (exports.ChatbotDisplayMode = ChatbotDisplayMode = {}));
 const ChatbotBase = (_a) => {
-    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel"]);
+    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel, isCompact } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel", "isCompact"]);
     // Configure animations
     const motionChatbot = {
         visible: { opacity: 1, y: 0 },
         hidden: { opacity: 0, y: '16px' }
     };
-    return (react_1.default.createElement(framer_motion_1.motion.div, Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''} ${className !== null && className !== void 0 ? className : ''}`, variants: motionChatbot, initial: "hidden", animate: isVisible ? 'visible' : 'hidden' }, props), isVisible ? (react_1.default.createElement("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef }, children)) : undefined));
+    return (react_1.default.createElement(framer_motion_1.motion.div, Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''}  ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variants: motionChatbot, initial: "hidden", animate: isVisible ? 'visible' : 'hidden' }, props), isVisible ? (react_1.default.createElement("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef }, children)) : undefined));
 };
 const Chatbot = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotBase, Object.assign({ innerRef: ref }, props))));
 exports.default = Chatbot;

package/dist/cjs/ChatbotHeader/ChatbotHeader.js

@@ -7,7 +7,7 @@ exports.ChatbotHeader = void 0;
 const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const ChatbotHeader = ({ className, children }) => (react_1.default.createElement("div", { className: "pf-chatbot__header-container" },
-    react_1.default.createElement("div", { className: `pf-chatbot__header ${className !== null && className !== void 0 ? className : ''}` }, children),
+    react_1.default.createElement("div", { className: `pf-chatbot__header${className ? ` ${className}` : ''}` }, children),
     react_1.default.createElement(react_core_1.Divider, { className: "pf-chatbot__header__divider" })));
 exports.ChatbotHeader = ChatbotHeader;
 exports.default = exports.ChatbotHeader;

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TooltipProps } from '@patternfly/react-core';
-export interface ChatbotHeaderCloseButtonProps {
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ChatbotHeaderCloseButtonProps extends ButtonProps {
     /** Callback function for when button is clicked */
     onClick: () => void;
     /** Custom classname for the header component */
@@ -13,5 +13,7 @@ export interface ChatbotHeaderCloseButtonProps {
     innerRef?: React.Ref<HTMLButtonElement>;
     /** Content used in tooltip */
     tooltipContent?: string;
+    /** Sets button to compact styling. */
+    isCompact?: boolean;
 }
 export declare const ChatbotHeaderCloseButton: React.ForwardRefExoticComponent<ChatbotHeaderCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -7,10 +18,13 @@ exports.ChatbotHeaderCloseButton = 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 ChatbotHeaderCloseButtonBase = ({ className, onClick, tooltipProps, menuAriaLabel = 'Close', innerRef, tooltipContent = 'Close' }) => (react_1.default.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
-        // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: "xl", isInline: true },
-                react_1.default.createElement(react_icons_1.CloseIcon, null)) }))));
+const ChatbotHeaderCloseButtonBase = (_a) => {
+    var { className, onClick, tooltipProps, menuAriaLabel = 'Close', innerRef, tooltipContent = 'Close', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
+    return (react_1.default.createElement("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}` },
+        react_1.default.createElement(react_core_1.Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+            // prevents VO announcements of both aria label and tooltip
+            aria: "none" }, tooltipProps),
+            react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: react_1.default.createElement(react_core_1.Icon, { size: isCompact ? 'lg' : 'xl', isInline: true },
+                    react_1.default.createElement(react_icons_1.CloseIcon, null)), size: isCompact ? 'sm' : undefined }, props)))));
+};
 exports.ChatbotHeaderCloseButton = react_1.default.forwardRef((props, ref) => (react_1.default.createElement(ChatbotHeaderCloseButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/cjs/ChatbotHeader/ChatbotHeaderCloseButton.test.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const ChatbotHeaderCloseButton_1 = require("./ChatbotHeaderCloseButton");
+require("@testing-library/jest-dom");
 describe('ChatbotHeaderCloseButton', () => {
     it('should render ChatbotHeaderCloseButton', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(ChatbotHeaderCloseButton_1.ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: jest.fn() }));
@@ -17,4 +18,8 @@ describe('ChatbotHeaderCloseButton', () => {
         react_2.fireEvent.click(react_2.screen.getByRole('button', { name: 'Close' }));
         expect(onClick).toHaveBeenCalled();
     });
+    it('should render button with isCompact', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotHeaderCloseButton_1.ChatbotHeaderCloseButton, { "data-testid": "close-button", onClick: jest.fn(), isCompact: true }));
+        expect(react_2.screen.getByTestId('close-button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/ChatbotHeader/ChatbotHeaderMain.js

@@ -5,6 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChatbotHeaderMain = void 0;
 const react_1 = __importDefault(require("react"));
-const ChatbotHeaderMain = ({ className, children }) => react_1.default.createElement("div", { className: `pf-chatbot__header-main ${className}` }, children);
+const ChatbotHeaderMain = ({ className, children }) => (react_1.default.createElement("div", { className: `pf-chatbot__header-main${className ? ` ${className}` : ''}` }, children));
 exports.ChatbotHeaderMain = ChatbotHeaderMain;
 exports.default = exports.ChatbotHeaderMain;

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 */

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 } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
@@ -186,7 +186,7 @@ const MessageBar = (_a) => {
     };
     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(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) => {

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

@@ -76,6 +76,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* () {
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, placeholder: "test placeholder" }));
+        const input = react_2.screen.getByRole('textbox', { name: /test placeholder/i });
+        yield user_event_1.default.type(input, 'Hello world');
+        expect(input).toHaveTextContent('Hello world');
+    }));
     // Send button
     // --------------------------------------------------------------------------
     it('shows send button when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -229,6 +235,13 @@ describe('Message bar', () => {
         yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
     }));
+    it('can customize the listening placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
+        mockSpeechRecognition();
+        (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, listeningText: "I am listening" }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
+        const input = react_2.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();
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true, buttonProps: { microphone: { props: { 'aria-label': 'Test' } } } }));

package/dist/cjs/Settings/SettingsForm.d.ts

@@ -8,6 +8,8 @@ export interface SettingsFormProps {
         label: string;
         field: React.ReactElement;
     }[];
+    /** Sets form to compact styling. */
+    isCompact?: boolean;
 }
 export declare const SettingsForm: React.FunctionComponent<SettingsFormProps>;
 export default SettingsForm;

package/dist/cjs/Settings/SettingsForm.js

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SettingsForm = void 0;
 const react_1 = __importDefault(require("react"));
 const SettingsForm = (_a) => {
-    var { className, fields = [] } = _a, props = __rest(_a, ["className", "fields"]);
-    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${className}` }, props),
+    var { className, fields = [], isCompact } = _a, props = __rest(_a, ["className", "fields", "isCompact"]);
+    return (react_1.default.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}` }, props),
         react_1.default.createElement("form", { className: "pf-chatbot__settings-form" }, fields.map((field) => (react_1.default.createElement("div", { className: "pf-chatbot__settings-form-row", key: field.label },
             react_1.default.createElement("label", { className: "pf-chatbot__settings-label", htmlFor: field.id }, field.label),
             field.field))))));

package/dist/cjs/Settings/SettingsForm.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/cjs/Settings/SettingsForm.test.js

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const react_2 = require("@testing-library/react");
 const SettingsForm_1 = require("./SettingsForm");
+require("@testing-library/jest-dom");
 describe('SettingsForm', () => {
     it('should render settingsForm with custom classname', () => {
         const { container } = (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { className: "custom-settings" }));
@@ -23,4 +24,15 @@ describe('SettingsForm', () => {
         (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { fields: fields }));
         expect(react_2.screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
     });
+    it('should render settingsForm with isCompact', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: (react_1.default.createElement(react_core_1.Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+            }
+        ];
+        (0, react_2.render)(react_1.default.createElement(SettingsForm_1.SettingsForm, { "data-testid": "settings-form", fields: fields, isCompact: true }));
+        expect(react_2.screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/css/main.css

@@ -159,6 +159,10 @@
   border-radius: var(--pf-t--global--border--radius--sharp);
 }
 
+.pf-chatbot.pf-m-compact {
+  font-size: var(--pf-t--global--font--size--sm);
+}
+
 .pf-chatbot__alert {
   position: sticky;
   top: var(--pf-t--global--spacer--lg);
@@ -507,6 +511,11 @@
   display: inline-flex;
 }
 
+.pf-chatbot__button--toggle-menu.pf-m-compact {
+  width: 2rem;
+  height: 2rem;
+}
+
 .pf-chatbot__chatbot-modal-backdrop {
   position: static !important;
 }
@@ -1882,6 +1891,15 @@
   text-align: center;
 }
 
+.pf-chatbot__settings-form-container.pf-m-compact .pf-chatbot__settings-form-row {
+  padding: var(--pf-t--global--spacer--md);
+  font-size: var(--pf-t--global--font--size--body--md);
+}
+
+.pf-chatbot__header.pf-m-compact {
+  padding-inline-start: var(--pf-t--global--spacer--md);
+}
+
 .pf-chatbot__source {
   display: flex;
   flex-direction: column;

package/dist/css/main.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AC5HJ;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACzMF;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;ACrDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;ACzIF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC5CN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;ACrFF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACjGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;ADrDN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AEpDN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AC5BR;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;ACrBR;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;ACxGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;ADvCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AChCF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACvER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/AttachMenu/AttachMenu.scss","../../src/Chatbot/Chatbot.scss","../../src/ChatbotAlert/ChatbotAlert.scss","../../src/ChatbotContent/ChatbotContent.scss","../../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss","../../src/ChatbotFooter/ChatbotFootnote.scss","../../src/ChatbotFooter/ChatbotFooter.scss","../../src/ChatbotHeader/ChatbotHeader.scss","../../src/ChatbotModal/ChatbotModal.scss","../../src/ChatbotPopover/ChatbotPopover.scss","../../src/ChatbotToggle/ChatbotToggle.scss","../../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.scss","../../src/CodeModal/CodeModal.scss","../../src/Compare/Compare.scss","../../src/FileDetails/FileDetails.scss","../../src/FileDetailsLabel/FileDetailsLabel.scss","../../src/FileDropZone/FileDropZone.scss","../../src/Message/Message.scss","../../src/Message/MessageLoading.scss","../../src/Message/CodeBlockMessage/CodeBlockMessage.scss","../../src/Message/TextMessage/TextMessage.scss","../../src/Message/ImageMessage/ImageMessage.scss","../../src/Message/ListMessage/ListMessage.scss","../../src/Message/TableMessage/TableMessage.scss","../../src/Message/QuickStarts/QuickStartTile.scss","../../src/Message/QuickResponse/QuickResponse.scss","../../src/Message/UserFeedback/UserFeedback.scss","../../src/MessageBar/AttachButton.scss","../../src/MessageBar/MicrophoneButton.scss","../../src/MessageBar/SendButton.scss","../../src/MessageBar/StopButton.scss","../../src/MessageBar/MessageBar.scss","../../src/MessageBox/JumpButton.scss","../../src/MessageBox/MessageBox.scss","../../src/ResponseActions/ResponseActions.scss","../../src/Settings/Settings.scss","../../src/SourcesCard/SourcesCard.scss","../../src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss","../../src/TermsOfUse/TermsOfUse.scss","../../src/main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;AACE;AAsBA;AASA;;AA9BA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAGF;AACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAKJ;EACE;;AAGF;EACE;;AAIF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;;ACxDJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAKF;EAvBF;IAwBI;IACA;;;AAIF;EA7BF;IA8BI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAXF;IAYI;;;;AAOJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAIF;EAdF;IAeI;;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;EAGE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAOJ;EACE;;;ACpIF;EACE;EACA;EACA;;;ACAF;EACE;EACA;EACA;EACA;EACA;;AAGA;EARF;IASI;;;;AAOJ;EAII;AAAA;AAAA;IACE;IACA;;;ACrBJ;EACE;EACA;;AAIF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAMJ;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAKA;EACE;;;AASJ;EACE;;;AASF;AAAA;EACE;;AACA;AAAA;EACE;;;AASJ;EACE;;AACA;EACE;EACA;;AAEF;EACE;;;AAUF;AAAA;AAAA;AAAA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;ACzMF;EACE;;AAEA;EACE;EACA;;;ACHJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAMF;EAGI;AAAA;IACE;;EACA;AAAA;IACE;;EAGJ;AAAA;IACE;IACA;IACA;;;AASJ;EACE;;;AAQF;EACE;;;ACrDJ;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAQN;EAGI;AAAA;IACE;;EAEF;AAAA;IACE;;;AAUJ;AAAA;EACE;;;AAOJ;AAAA;EAEE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;AAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAOJ;EACE;;;AAOJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAMF;EACE;EACA;;;ACjJF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;AAAA;EAEE;;AAEF;EACE;EACA;;AAEF;EACE;;;AAOJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAGJ;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAOJ;EACE;;;AAMF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAQE;EACE;;;AAQN;EACE;;;ACvFA;EAA0B;;AAMxB;EAAM;;AACN;EAAuB;;AACvB;EACE;;AAIF;EACE;EACA;;AAEF;EACE;;;ACnBN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAIF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AC3BF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAOJ;EAIM;AAAA;IACE;IACA;;;AC5CN;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;AACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;AAAA;AAAA;EAGA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AASA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;ACrFF;EACE;EACA;EACA;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;;AAEA;EALF;IAMI;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAKN;EACE;;AAEA;EACE;;AAGF;EACE;;AAIA;EADF;IAEI;;;;AAIN;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;IACA;IACA;;;;ACrEJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;EACA;EACA;EACA;;;ACvBF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;;AAKF;EACE;;AAGF;EACE;;;AAIJ;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;;;AAKF;EACE;;;AAMF;AAAA;EACE;;;AC/DJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AAGA;EANF;IAOI;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AACA;EACE;EACA;EACA;EACA;;;AAME;EADF;IAEI;IACA;IACA;;EAEA;IACE;;;;AChDR;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAKF;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;AAEF;EACE;;AAMJ;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAMJ;EACE;EACA;EACA;;;AAGF;EACE;;;ACjGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AC9CN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1EE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;ADrDN;EACE;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAEA;EAEE;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;;;AEhFF;EACE;EACA;EACA;EACA;EAGA;;;ADDE;EACE;;;AAMN;EACE;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;AAGF;EACE;EACA;;;AAKF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;EAKE;;;AEpDN;AAAA;EAEE;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAGE;;;AAKF;AAAA;EAEE;EACA;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;ALjBJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EAEE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;EAEF;IAEE;;;;AMjDN;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;AAKA;EACE;;;AAOF;EACE;;;ACnBJ;EACE;;AAEA;EAHF;IAII;;;AAGF;EAPF;IAQI;;;AAKF;EACE;EACA;;AAIJ;AAAA;EAEE;EACA;;AAIF;EACE;EACA;EACA;;;AC7BJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AChDF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAKA;EACE;;AAIJ;EAEE;;AAEA;EACE;;AAKA;EACE;;;AC5BR;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAMA;EACE;;AAKJ;EACE;EACA;;AAGA;EACE;;AAKA;EACE;;;AAMR;EACE;IACE;;EAEF;IACE;;;AC1CJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EACE;;;AAMJ;EACE;;AACA;EACE;;AAIJ;EACE;EACA;;AAGF;AAAA;EAEE;;;AAIJ;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AC/CJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAEA;EACE;;AAKA;EACE;;;ACrBR;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAKF;EACE;IACE;IACA;;;;ACxGN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AC9CJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAIA;EAVF;IAWI;;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAII;AAAA;AAAA;IACE;IACA;;;ADvCN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAIF;;AAEA;EACE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EA3CF;IA4CI;;;;AEhDJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;;AAKN;EACE;EACA;;;AC1BF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAIA;EACE;EACA;;;AAIJ;EACE;;;AC3CF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;AAAA;EACE;;AAGJ;EACE;EACA;;AAKA;AAAA;EACE;;AAGJ;EACE;;;ACvER;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AC9BA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAIF;EACE;IACE;IACA;;;;AAKN;AAAA;EAGE;;AAGE;AAAA;EACE;;AAIJ;AAAA;EACE;;;AC5BJ;EAKE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EASA;EACA;EAEA;EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMA;EAKA;EACA;EACA;EAEA;EAEA;;;AAMF;EACE;EACA;EAEA;EAEA;EACA;;;AAGF;EACE;EACA","file":"main.css"}

package/dist/esm/Chatbot/Chatbot.d.ts

@@ -12,6 +12,8 @@ export interface ChatbotProps {
     innerRef?: React.Ref<HTMLDivElement>;
     /** Custom aria label applied to focusable container */
     ariaLabel?: string;
+    /** Density of information within the ChatBot */
+    isCompact?: boolean;
 }
 export declare enum ChatbotDisplayMode {
     default = "default",

package/dist/esm/Chatbot/Chatbot.js

@@ -23,13 +23,13 @@ export var ChatbotDisplayMode;
     ChatbotDisplayMode["drawer"] = "drawer";
 })(ChatbotDisplayMode || (ChatbotDisplayMode = {}));
 const ChatbotBase = (_a) => {
-    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel"]);
+    var { children, displayMode = ChatbotDisplayMode.default, isVisible = true, className, innerRef, ariaLabel, isCompact } = _a, props = __rest(_a, ["children", "displayMode", "isVisible", "className", "innerRef", "ariaLabel", "isCompact"]);
     // Configure animations
     const motionChatbot = {
         visible: { opacity: 1, y: 0 },
         hidden: { opacity: 0, y: '16px' }
     };
-    return (React.createElement(motion.div, Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''} ${className !== null && className !== void 0 ? className : ''}`, variants: motionChatbot, initial: "hidden", animate: isVisible ? 'visible' : 'hidden' }, props), isVisible ? (React.createElement("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef }, children)) : undefined));
+    return (React.createElement(motion.div, Object.assign({ className: `pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''}  ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variants: motionChatbot, initial: "hidden", animate: isVisible ? 'visible' : 'hidden' }, props), isVisible ? (React.createElement("section", { "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : 'Chatbot', className: `pf-chatbot-container pf-chatbot-container--${displayMode} ${!isVisible ? 'pf-chatbot-container--hidden' : ''}`, tabIndex: -1, ref: innerRef }, children)) : undefined));
 };
 const Chatbot = React.forwardRef((props, ref) => (React.createElement(ChatbotBase, Object.assign({ innerRef: ref }, props))));
 export default Chatbot;

package/dist/esm/ChatbotHeader/ChatbotHeader.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Divider } from '@patternfly/react-core';
 export const ChatbotHeader = ({ className, children }) => (React.createElement("div", { className: "pf-chatbot__header-container" },
-    React.createElement("div", { className: `pf-chatbot__header ${className !== null && className !== void 0 ? className : ''}` }, children),
+    React.createElement("div", { className: `pf-chatbot__header${className ? ` ${className}` : ''}` }, children),
     React.createElement(Divider, { className: "pf-chatbot__header__divider" })));
 export default ChatbotHeader;

package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TooltipProps } from '@patternfly/react-core';
-export interface ChatbotHeaderCloseButtonProps {
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
+export interface ChatbotHeaderCloseButtonProps extends ButtonProps {
     /** Callback function for when button is clicked */
     onClick: () => void;
     /** Custom classname for the header component */
@@ -13,5 +13,7 @@ export interface ChatbotHeaderCloseButtonProps {
     innerRef?: React.Ref<HTMLButtonElement>;
     /** Content used in tooltip */
     tooltipContent?: string;
+    /** Sets button to compact styling. */
+    isCompact?: boolean;
 }
 export declare const ChatbotHeaderCloseButton: React.ForwardRefExoticComponent<ChatbotHeaderCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.js

@@ -1,10 +1,24 @@
+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 { Button, Icon, Tooltip } from '@patternfly/react-core';
 import { CloseIcon } from '@patternfly/react-icons';
-const ChatbotHeaderCloseButtonBase = ({ className, onClick, tooltipProps, menuAriaLabel = 'Close', innerRef, tooltipContent = 'Close' }) => (React.createElement("div", { className: `pf-chatbot__menu ${className}` },
-    React.createElement(Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
-        // prevents VO announcements of both aria label and tooltip
-        aria: "none" }, tooltipProps),
-        React.createElement(Button, { className: "pf-chatbot__button--toggle-menu", variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: React.createElement(Icon, { size: "xl", isInline: true },
-                React.createElement(CloseIcon, null)) }))));
+const ChatbotHeaderCloseButtonBase = (_a) => {
+    var { className, onClick, tooltipProps, menuAriaLabel = 'Close', innerRef, tooltipContent = 'Close', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "menuAriaLabel", "innerRef", "tooltipContent", "isCompact"]);
+    return (React.createElement("div", { className: `pf-chatbot__menu${className ? ` ${className}` : ''}` },
+        React.createElement(Tooltip, Object.assign({ content: tooltipContent, position: "bottom", 
+            // prevents VO announcements of both aria label and tooltip
+            aria: "none" }, tooltipProps),
+            React.createElement(Button, Object.assign({ className: `pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`, variant: "plain", onClick: onClick, "aria-label": menuAriaLabel, ref: innerRef, icon: React.createElement(Icon, { size: isCompact ? 'lg' : 'xl', isInline: true },
+                    React.createElement(CloseIcon, null)), size: isCompact ? 'sm' : undefined }, props)))));
+};
 export const ChatbotHeaderCloseButton = React.forwardRef((props, ref) => (React.createElement(ChatbotHeaderCloseButtonBase, Object.assign({ innerRef: ref }, props))));

package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/esm/ChatbotHeader/ChatbotHeaderCloseButton.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
+import '@testing-library/jest-dom';
 describe('ChatbotHeaderCloseButton', () => {
     it('should render ChatbotHeaderCloseButton', () => {
         const { container } = render(React.createElement(ChatbotHeaderCloseButton, { className: "custom-header-close-button", onClick: jest.fn() }));
@@ -12,4 +13,8 @@ describe('ChatbotHeaderCloseButton', () => {
         fireEvent.click(screen.getByRole('button', { name: 'Close' }));
         expect(onClick).toHaveBeenCalled();
     });
+    it('should render button with isCompact', () => {
+        render(React.createElement(ChatbotHeaderCloseButton, { "data-testid": "close-button", onClick: jest.fn(), isCompact: true }));
+        expect(screen.getByTestId('close-button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/esm/ChatbotHeader/ChatbotHeaderMain.js

@@ -1,3 +1,3 @@
 import React from 'react';
-export const ChatbotHeaderMain = ({ className, children }) => React.createElement("div", { className: `pf-chatbot__header-main ${className}` }, children);
+export const ChatbotHeaderMain = ({ className, children }) => (React.createElement("div", { className: `pf-chatbot__header-main${className ? ` ${className}` : ''}` }, children));
 export default ChatbotHeaderMain;

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 */

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 } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value"]);
     // Text Input
     // --------------------------------------------------------------------------
     const [message, setMessage] = React.useState(value !== null && value !== void 0 ? value : '');
@@ -180,7 +180,7 @@ export const MessageBar = (_a) => {
     };
     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(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/Settings/SettingsForm.d.ts

@@ -8,6 +8,8 @@ export interface SettingsFormProps {
         label: string;
         field: React.ReactElement;
     }[];
+    /** Sets form to compact styling. */
+    isCompact?: boolean;
 }
 export declare const SettingsForm: React.FunctionComponent<SettingsFormProps>;
 export default SettingsForm;

package/dist/esm/Settings/SettingsForm.js

@@ -11,8 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 export const SettingsForm = (_a) => {
-    var { className, fields = [] } = _a, props = __rest(_a, ["className", "fields"]);
-    return (React.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${className}` }, props),
+    var { className, fields = [], isCompact } = _a, props = __rest(_a, ["className", "fields", "isCompact"]);
+    return (React.createElement("div", Object.assign({ className: `pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}` }, props),
         React.createElement("form", { className: "pf-chatbot__settings-form" }, fields.map((field) => (React.createElement("div", { className: "pf-chatbot__settings-form-row", key: field.label },
             React.createElement("label", { className: "pf-chatbot__settings-label", htmlFor: field.id }, field.label),
             field.field))))));

package/dist/esm/Settings/SettingsForm.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/esm/Settings/SettingsForm.test.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@patternfly/react-core';
 import { render, screen } from '@testing-library/react';
 import { SettingsForm } from './SettingsForm';
+import '@testing-library/jest-dom';
 describe('SettingsForm', () => {
     it('should render settingsForm with custom classname', () => {
         const { container } = render(React.createElement(SettingsForm, { className: "custom-settings" }));
@@ -18,4 +19,15 @@ describe('SettingsForm', () => {
         render(React.createElement(SettingsForm, { fields: fields }));
         expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
     });
+    it('should render settingsForm with isCompact', () => {
+        const fields = [
+            {
+                id: 'archived-chat',
+                label: 'Archive chat',
+                field: (React.createElement(Button, { id: "archived-chat", variant: "secondary" }, "Archive chat"))
+            }
+        ];
+        render(React.createElement(SettingsForm, { "data-testid": "settings-form", fields: fields, isCompact: true }));
+        expect(screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0-prerelease.1",
+  "version": "6.3.0-prerelease.3",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/UI/CompactSettings.tsx

@@ -0,0 +1,289 @@
+import React from 'react';
+
+import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
+import {
+  Button,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleElement,
+  Switch,
+  Title
+} from '@patternfly/react-core';
+import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotHeader, {
+  ChatbotHeaderActions,
+  ChatbotHeaderCloseButton,
+  ChatbotHeaderMain,
+  ChatbotHeaderOptionsDropdown,
+  ChatbotHeaderTitle
+} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
+import { CogIcon, ExpandIcon, OpenDrawerRightIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
+
+export const CompactSettingsDemo: React.FunctionComponent = () => {
+  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isThemeOpen, setIsThemeOpen] = React.useState(false);
+  const [isLanguageOpen, setIsLanguageOpen] = React.useState(false);
+  const [isVoiceOpen, setIsVoiceOpen] = React.useState(false);
+  const [displayMode, setDisplayMode] = React.useState(ChatbotDisplayMode.default);
+  const [areSettingsOpen, setAreSettingsOpen] = React.useState(true);
+  const chatbotVisible = true;
+
+  const onFocus = (id: string) => {
+    const element = document.getElementById(id);
+    (element as HTMLElement).focus();
+  };
+
+  const onThemeToggleClick = () => {
+    setIsThemeOpen(!isThemeOpen);
+  };
+
+  const onThemeSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    onFocus('theme');
+    setIsThemeOpen(false);
+  };
+
+  const onLanguageToggleClick = () => {
+    setIsLanguageOpen(!isLanguageOpen);
+  };
+
+  const onLanguageSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    onFocus('language');
+    setIsLanguageOpen(false);
+  };
+
+  const onVoiceToggleClick = () => {
+    onFocus('voice');
+    setIsVoiceOpen(!isVoiceOpen);
+  };
+
+  const onVoiceSelect = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', value);
+    setIsVoiceOpen(false);
+  };
+
+  const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    setIsChecked(checked);
+  };
+
+  const themeDropdown = (
+    <Dropdown
+      isOpen={isThemeOpen}
+      onSelect={onThemeSelect}
+      onOpenChange={(isOpen: boolean) => setIsThemeOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        // We want to add the id property here as well so the label is coupled
+        // with t he button on screen readers.
+        <MenuToggle size="sm" id="theme" ref={toggleRef} onClick={onThemeToggleClick} isExpanded={isThemeOpen}>
+          System
+        </MenuToggle>
+      )}
+      ouiaId="ThemeDropdown"
+    >
+      <DropdownList>
+        <DropdownItem value="System" key="system">
+          System
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+
+  const languageDropdown = (
+    <Dropdown
+      isOpen={isLanguageOpen}
+      onSelect={onLanguageSelect}
+      onOpenChange={(isOpen: boolean) => setIsLanguageOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <MenuToggle size="sm" id="language" ref={toggleRef} onClick={onLanguageToggleClick} isExpanded={isLanguageOpen}>
+          Auto-detect
+        </MenuToggle>
+      )}
+      ouiaId="LanguageDropdown"
+    >
+      <DropdownList>
+        <DropdownItem value="Auto-detect" key="auto-detect">
+          Auto-detect
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+  const voiceDropdown = (
+    <Dropdown
+      isOpen={isVoiceOpen}
+      onSelect={onVoiceSelect}
+      onOpenChange={(isOpen: boolean) => setIsVoiceOpen(isOpen)}
+      shouldFocusToggleOnSelect
+      shouldFocusFirstItemOnOpen
+      shouldPreventScrollOnItemFocus
+      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <MenuToggle size="sm" id="voice" ref={toggleRef} onClick={onVoiceToggleClick} isExpanded={isVoiceOpen}>
+          Bot
+        </MenuToggle>
+      )}
+      ouiaId="VoiceDropdown"
+    >
+      <DropdownList>
+        <DropdownItem value="Bot" key="bot">
+          Bot
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+  const children = [
+    { id: 'theme', label: 'Theme', field: themeDropdown },
+    { id: 'language', label: 'Language', field: languageDropdown },
+    { id: 'voice', label: 'Voice', field: voiceDropdown },
+    {
+      id: 'analytics',
+      label: 'Share analytics',
+      field: (
+        <Switch
+          // We want to add the id property here as well so the label is coupled
+          // with the button on screen readers.
+          id="analytics"
+          aria-label="Togglable option for whether to share analytics"
+          isChecked={isChecked}
+          onChange={handleChange}
+        />
+      )
+    },
+    {
+      id: 'archived-chat',
+      label: 'Archive chat',
+      field: (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <Button size="sm" id="archived-chat" variant="secondary">
+          Manage
+        </Button>
+      )
+    },
+    {
+      id: 'archive-all',
+      label: 'Archive all chat',
+      field: (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <Button size="sm" id="archive-all" variant="secondary">
+          Archive all
+        </Button>
+      )
+    },
+    {
+      id: 'delete-all',
+      label: 'Delete all chats',
+      field: (
+        // We want to add the id property here as well so the label is coupled
+        // with the button on screen readers.
+        <Button size="sm" id="delete-all" variant="danger">
+          Delete all
+        </Button>
+      )
+    }
+  ];
+
+  const onSelectDropdownItem = (
+    _event: React.MouseEvent<Element, MouseEvent> | undefined,
+    value: string | number | undefined
+  ) => {
+    if (value === 'Settings') {
+      setAreSettingsOpen(true);
+    } else {
+      setDisplayMode(value as ChatbotDisplayMode);
+    }
+  };
+
+  const regularChatbot = (
+    <ChatbotHeader>
+      <ChatbotHeaderActions>
+        <ChatbotHeaderOptionsDropdown isCompact onSelect={onSelectDropdownItem}>
+          <DropdownGroup label="Display mode">
+            <DropdownList>
+              <DropdownItem
+                value={ChatbotDisplayMode.default}
+                key="switchDisplayOverlay"
+                icon={<OutlinedWindowRestoreIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.default}
+              >
+                <span>Overlay</span>
+              </DropdownItem>
+              <DropdownItem
+                value={ChatbotDisplayMode.docked}
+                key="switchDisplayDock"
+                icon={<OpenDrawerRightIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.docked}
+              >
+                <span>Dock to window</span>
+              </DropdownItem>
+              <DropdownItem
+                value={ChatbotDisplayMode.fullscreen}
+                key="switchDisplayFullscreen"
+                icon={<ExpandIcon aria-hidden />}
+                isSelected={displayMode === ChatbotDisplayMode.fullscreen}
+              >
+                <span>Fullscreen</span>
+              </DropdownItem>
+            </DropdownList>
+          </DropdownGroup>
+          <Divider />
+          <DropdownList>
+            <DropdownItem value="Settings" key="switchSettings" icon={<CogIcon aria-hidden />}>
+              <span>Settings</span>
+            </DropdownItem>
+          </DropdownList>
+        </ChatbotHeaderOptionsDropdown>
+      </ChatbotHeaderActions>
+    </ChatbotHeader>
+  );
+
+  return (
+    <>
+      <Chatbot isCompact isVisible={chatbotVisible} displayMode={displayMode}>
+        {areSettingsOpen ? (
+          <>
+            <ChatbotHeader className="pf-m-compact">
+              <ChatbotHeaderMain>
+                <ChatbotHeaderTitle>
+                  <Title headingLevel="h1" size="2xl">
+                    Settings
+                  </Title>
+                </ChatbotHeaderTitle>
+              </ChatbotHeaderMain>
+              <ChatbotHeaderCloseButton isCompact onClick={() => setAreSettingsOpen(false)} />
+            </ChatbotHeader>
+            <SettingsForm isCompact fields={children} />
+          </>
+        ) : (
+          <>{regularChatbot}</>
+        )}
+      </Chatbot>
+    </>
+  );
+};

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -406,6 +406,13 @@ In this demo, you can toggle the settings page by clicking the "Settings" button
 
 ```
 
+### Compact settings
+
+To make the settings menu compact, with less spacing between the menu contents, pass `isCompact` to the `<SettingsForm>`.
+```js file="./CompactSettings.tsx" isFullscreen
+
+```
+
 ## Modals
 
 ### Modal

package/src/Chatbot/Chatbot.scss

@@ -125,3 +125,10 @@
     border-radius: var(--pf-t--global--border--radius--sharp);
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot.pf-m-compact {
+  font-size: var(--pf-t--global--font--size--sm);
+}

package/src/Chatbot/Chatbot.tsx

@@ -17,6 +17,8 @@ export interface ChatbotProps {
   innerRef?: React.Ref<HTMLDivElement>;
   /** Custom aria label applied to focusable container */
   ariaLabel?: string;
+  /** Density of information within the ChatBot */
+  isCompact?: boolean;
 }
 
 export enum ChatbotDisplayMode {
@@ -34,6 +36,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
   className,
   innerRef,
   ariaLabel,
+  isCompact,
   ...props
 }: ChatbotProps) => {
   // Configure animations
@@ -44,7 +47,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
 
   return (
     <motion.div
-      className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''} ${className ?? ''}`}
+      className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''}  ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       variants={motionChatbot}
       initial="hidden"
       animate={isVisible ? 'visible' : 'hidden'}

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -137,3 +137,11 @@
 :where(.pf-v6-theme-dark) .show-dark .pf-m-picture {
   display: inline-flex;
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot__button--toggle-menu.pf-m-compact {
+  width: 2rem;
+  height: 2rem;
+}

package/src/ChatbotHeader/ChatbotHeader.tsx

@@ -14,7 +14,7 @@ export const ChatbotHeader: React.FunctionComponent<ChatbotHeaderProps> = ({
   children
 }: ChatbotHeaderProps) => (
   <div className="pf-chatbot__header-container">
-    <div className={`pf-chatbot__header ${className ?? ''}`}>{children}</div>
+    <div className={`pf-chatbot__header${className ? ` ${className}` : ''}`}>{children}</div>
     <Divider className="pf-chatbot__header__divider" />
   </div>
 );

package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
+import '@testing-library/jest-dom';
 
 describe('ChatbotHeaderCloseButton', () => {
   it('should render ChatbotHeaderCloseButton', () => {
@@ -17,4 +18,9 @@ describe('ChatbotHeaderCloseButton', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Close' }));
     expect(onClick).toHaveBeenCalled();
   });
+
+  it('should render button with isCompact', () => {
+    render(<ChatbotHeaderCloseButton data-testid="close-button" onClick={jest.fn()} isCompact />);
+    expect(screen.getByTestId('close-button')).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 import { CloseIcon } from '@patternfly/react-icons';
 
-export interface ChatbotHeaderCloseButtonProps {
+export interface ChatbotHeaderCloseButtonProps extends ButtonProps {
   /** Callback function for when button is clicked */
   onClick: () => void;
   /** Custom classname for the header component */
@@ -16,6 +16,8 @@ export interface ChatbotHeaderCloseButtonProps {
   innerRef?: React.Ref<HTMLButtonElement>;
   /** Content used in tooltip */
   tooltipContent?: string;
+  /** Sets button to compact styling. */
+  isCompact?: boolean;
 }
 
 const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
@@ -24,9 +26,11 @@ const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseBu
   tooltipProps,
   menuAriaLabel = 'Close',
   innerRef,
-  tooltipContent = 'Close'
+  tooltipContent = 'Close',
+  isCompact,
+  ...props
 }: ChatbotHeaderCloseButtonProps) => (
-  <div className={`pf-chatbot__menu ${className}`}>
+  <div className={`pf-chatbot__menu${className ? ` ${className}` : ''}`}>
     <Tooltip
       content={tooltipContent}
       position="bottom"
@@ -35,16 +39,18 @@ const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseBu
       {...tooltipProps}
     >
       <Button
-        className="pf-chatbot__button--toggle-menu"
+        className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
         variant="plain"
         onClick={onClick}
         aria-label={menuAriaLabel}
         ref={innerRef}
         icon={
-          <Icon size="xl" isInline>
+          <Icon size={isCompact ? 'lg' : 'xl'} isInline>
             <CloseIcon />
           </Icon>
         }
+        size={isCompact ? 'sm' : undefined}
+        {...props}
       />
     </Tooltip>
   </div>

package/src/ChatbotHeader/ChatbotHeaderMain.tsx

@@ -10,6 +10,8 @@ export interface ChatbotHeaderMainProps {
 export const ChatbotHeaderMain: React.FunctionComponent<ChatbotHeaderMainProps> = ({
   className,
   children
-}: ChatbotHeaderMainProps) => <div className={`pf-chatbot__header-main ${className}`}>{children}</div>;
+}: ChatbotHeaderMainProps) => (
+  <div className={`pf-chatbot__header-main${className ? ` ${className}` : ''}`}>{children}</div>
+);
 
 export default ChatbotHeaderMain;

package/src/MessageBar/MessageBar.test.tsx

@@ -96,6 +96,12 @@ describe('Message bar', () => {
     expect(spy).toHaveBeenCalledTimes(1);
     expect(spy).toHaveBeenCalledWith(expect.any(Object), 'A');
   });
+  it('can use specified placeholder text', async () => {
+    render(<MessageBar onSendMessage={jest.fn} placeholder="test placeholder" />);
+    const input = screen.getByRole('textbox', { name: /test placeholder/i });
+    await userEvent.type(input, 'Hello world');
+    expect(input).toHaveTextContent('Hello world');
+  });
 
   // Send button
   // --------------------------------------------------------------------------
@@ -304,6 +310,13 @@ describe('Message bar', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Microphone button' }));
     expect(screen.getByRole('tooltip', { name: 'Not currently listening' })).toBeTruthy();
   });
+  it('can customize the listening placeholder', async () => {
+    mockSpeechRecognition();
+    render(<MessageBar onSendMessage={jest.fn} hasMicrophoneButton listeningText="I am listening" />);
+    await 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', async () => {
     mockSpeechRecognition();
     render(

package/src/MessageBar/MessageBar.tsx

@@ -37,10 +37,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 */
@@ -78,8 +82,10 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   onSendMessage,
   className,
   alwayShowSendButton,
+  placeholder = 'Send a message...',
   hasAttachButton = true,
   hasMicrophoneButton,
+  listeningText = 'Listening',
   handleAttach,
   attachMenuProps,
   isSendButtonDisabled,
@@ -322,8 +328,8 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
           className="pf-chatbot__message-textarea"
           value={message}
           onChange={handleChange}
-          aria-label={isListeningMessage ? 'Listening' : 'Send a message...'}
-          placeholder={isListeningMessage ? 'Listening' : 'Send a message...'}
+          aria-label={isListeningMessage ? listeningText : placeholder}
+          placeholder={isListeningMessage ? listeningText : placeholder}
           ref={textareaRef}
           onKeyDown={handleKeyDown}
           {...props}

package/src/Settings/Settings.scss

@@ -32,3 +32,14 @@
   font-weight: var(--pf-t--global--font--weight--body--bold);
   text-align: center;
 }
+
+.pf-chatbot__settings-form-container.pf-m-compact {
+  .pf-chatbot__settings-form-row {
+    padding: var(--pf-t--global--spacer--md);
+    font-size: var(--pf-t--global--font--size--body--md);
+  }
+}
+
+.pf-chatbot__header.pf-m-compact {
+  padding-inline-start: var(--pf-t--global--spacer--md);
+}

package/src/Settings/SettingsForm.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '@patternfly/react-core';
 import { render, screen } from '@testing-library/react';
 import { SettingsForm } from './SettingsForm';
+import '@testing-library/jest-dom';
 
 describe('SettingsForm', () => {
   it('should render settingsForm with custom classname', () => {
@@ -25,4 +26,20 @@ describe('SettingsForm', () => {
 
     expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
   });
+
+  it('should render settingsForm with isCompact', () => {
+    const fields = [
+      {
+        id: 'archived-chat',
+        label: 'Archive chat',
+        field: (
+          <Button id="archived-chat" variant="secondary">
+            Archive chat
+          </Button>
+        )
+      }
+    ];
+    render(<SettingsForm data-testid="settings-form" fields={fields} isCompact />);
+    expect(screen.getByTestId('settings-form')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Settings/SettingsForm.tsx

@@ -5,10 +5,20 @@ export interface SettingsFormProps {
   className?: string;
   /** Array of fields to display in the settings layout */
   fields?: { id: string; label: string; field: React.ReactElement }[];
+  /** Sets form to compact styling. */
+  isCompact?: boolean;
 }
 
-export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({ className, fields = [], ...props }) => (
-  <div className={`pf-chatbot__settings-form-container ${className}`} {...props}>
+export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({
+  className,
+  fields = [],
+  isCompact,
+  ...props
+}) => (
+  <div
+    className={`pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}`}
+    {...props}
+  >
     <form className="pf-chatbot__settings-form">
       {fields.map((field) => (
         <div className="pf-chatbot__settings-form-row" key={field.label}>