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

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

@@ -53,9 +53,9 @@ describe('Message bar', () => {
     });
     it('should render correctly', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-        expect(react_2.screen.queryByRole('button', { name: 'Send button' })).toBeFalsy();
-        expect(react_2.screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        expect(react_2.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: 'Send' })).toBeFalsy();
+        expect(react_2.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
         expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
     });
     it('can send via enter key', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -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* () {
@@ -83,15 +89,15 @@ describe('Message bar', () => {
         const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
         yield user_event_1.default.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
     }));
     it('can disable send button shown when text is input', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, isSendButtonDisabled: true }));
         const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
         yield user_event_1.default.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
     }));
     it('can click send button', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
@@ -99,24 +105,24 @@ describe('Message bar', () => {
         const input = react_2.screen.getByRole('textbox', { name: /Send a message.../i });
         yield user_event_1.default.type(input, 'Hello world');
         expect(input).toHaveTextContent('Hello world');
-        const sendButton = react_2.screen.getByRole('button', { name: 'Send button' });
+        const sendButton = react_2.screen.getByRole('button', { name: 'Send' });
         expect(sendButton).toBeTruthy();
         yield user_event_1.default.click(sendButton);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('can always show send button', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeEnabled();
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeEnabled();
     });
     it('can disable send button if always showing', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, isSendButtonDisabled: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeDisabled();
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeDisabled();
     });
     it('can handle buttonProps tooltipContent  appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, alwayShowSendButton: true, buttonProps: { send: { tooltipContent: 'Test' } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('can handle buttonProps props appropriately for send', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -157,30 +163,30 @@ describe('Message bar', () => {
         expect(react_2.screen.queryByRole('menuitem', { name: /Logs/i })).toBeFalsy();
         expect(react_2.screen.queryByRole('menuitem', { name: /YAML - Status/i })).toBeFalsy();
         expect(react_2.screen.queryByRole('menuitem', { name: /YAML - All contents/i })).toBeFalsy();
-        const attachButton = react_2.screen.getByRole('button', { name: 'Attach button' });
+        const attachButton = react_2.screen.getByRole('button', { name: 'Attach' });
         yield user_event_1.default.click(attachButton);
         expect(attachToggleClickSpy).toHaveBeenCalledTimes(1);
     }));
     it('can hide attach button', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: false }));
-        expect(react_2.screen.queryByRole('button', { name: 'Attach button' })).toBeFalsy();
+        expect(react_2.screen.queryByRole('button', { name: 'Attach' })).toBeFalsy();
     });
     // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
     // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
     it('can handle handleAttach', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, handleAttach: spy, buttonProps: { attach: { inputTestId: 'input' } } }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        expect(react_2.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach' }));
         const file = new File(['test'], 'test.json');
         const input = react_2.screen.getByTestId('input');
         yield user_event_1.default.upload(input, file);
         expect(input.files).toHaveLength(1);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
-    it('can handle buttonProps tooltipContent  appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
+    it('can handle buttonProps tooltipContent appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasAttachButton: true, buttonProps: { attach: { tooltipContent: 'Test' } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('can handle buttonProps props appropriately for attach', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -191,17 +197,17 @@ describe('Message bar', () => {
     // --------------------------------------------------------------------------
     it('can show stop button', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn }));
-        expect(react_2.screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
     });
     it('can call handleStopButton', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop' }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('can handle buttonProps tooltipContent appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasStopButton: true, handleStopButton: jest.fn, buttonProps: { stop: { tooltipContent: 'Test' } } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('can handle buttonProps props appropriately for stop', () => __awaiter(void 0, void 0, void 0, function* () {
@@ -212,23 +218,30 @@ describe('Message bar', () => {
     // --------------------------------------------------------------------------
     it('can hide microphone button when window.SpeechRecognition is not there', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
-        expect(react_2.screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        expect(react_2.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
     });
     it('can show microphone button', () => {
         mockSpeechRecognition();
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, hasMicrophoneButton: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Microphone button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Use microphone' })).toBeTruthy();
     });
     it('can handle buttonProps 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: { tooltipContent: { active: 'Currently listening', inactive: 'Not currently listening' } }
             } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Use microphone' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Currently listening' })).toBeTruthy();
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Microphone button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop listening' }));
         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: 'Use microphone' }));
+        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' } } } }));
@@ -236,9 +249,9 @@ describe('Message bar', () => {
     }));
     it('can be controlled', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBar_1.MessageBar, { onSendMessage: jest.fn, value: "test" }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
-        expect(react_2.screen.queryByRole('button', { name: 'Microphone button' })).toBeFalsy();
+        expect(react_2.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
+        expect(react_2.screen.queryByRole('button', { name: 'Use microphone' })).toBeFalsy();
         expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toBeTruthy();
         expect(react_2.screen.getByRole('textbox', { name: /Send a message.../i })).toHaveValue('test');
     });

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

@@ -18,6 +18,7 @@ export interface MicrophoneButtonProps extends ButtonProps {
     };
     /** Locale code for language speech recognition is conducted in. This should be in the format 'en-US', a.k.a. the ISO 639-1 code, a dash, and the ISO_3166-1 code. */
     language?: string;
+    isCompact?: boolean;
 }
 export declare const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps>;
 export default MicrophoneButton;

package/dist/cjs/MessageBar/MicrophoneButton.js

@@ -24,7 +24,7 @@ const react_core_1 = require("@patternfly/react-core");
 // Import FontAwesome icons
 const microphone_icon_1 = require("@patternfly/react-icons/dist/esm/icons/microphone-icon");
 const MicrophoneButton = (_a) => {
-    var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US' } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language"]);
+    var { isListening, onIsListeningChange, onSpeechRecognition, className, tooltipProps, tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' }, language = 'en-US', isCompact } = _a, props = __rest(_a, ["isListening", "onIsListeningChange", "onSpeechRecognition", "className", "tooltipProps", "tooltipContent", "language", "isCompact"]);
     // Microphone
     // --------------------------------------------------------------------------
     const [speechRecognition, setSpeechRecognition] = react_1.default.useState();
@@ -69,8 +69,8 @@ const MicrophoneButton = (_a) => {
         return null;
     }
     return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ aria: "none", "aria-live": "polite", id: "pf-chatbot__tooltip--use-microphone", content: isListening ? tooltipContent.active : tooltipContent.inactive, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0 }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Microphone button', onClick: isListening ? stopListening : startListening, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
-                react_1.default.createElement(microphone_icon_1.MicrophoneIcon, null)) }, props))));
+        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || (isListening ? 'Stop listening' : 'Use microphone'), "aria-pressed": isListening, onClick: isListening ? stopListening : startListening, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                react_1.default.createElement(microphone_icon_1.MicrophoneIcon, null)), size: isCompact ? 'sm' : undefined }, props))));
 };
 exports.MicrophoneButton = MicrophoneButton;
 exports.default = exports.MicrophoneButton;

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

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

package/dist/cjs/MessageBar/SendButton.js

@@ -23,12 +23,12 @@ const react_1 = __importDefault(require("react"));
 const react_core_1 = require("@patternfly/react-core");
 const paper_plane_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paper-plane-icon");
 const SendButton = (_a) => {
-    var { className, onClick, tooltipProps, tooltipContent = 'Send' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
+    var { className, onClick, tooltipProps, tooltipContent = 'Send', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
     return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--send", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
         // prevents VO announcements of both aria label and tooltip
         aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
-                react_1.default.createElement(paper_plane_icon_1.PaperPlaneIcon, null)) }, props))));
+        react_1.default.createElement(react_core_1.Button, Object.assign({ variant: "plain", className: `pf-chatbot__button--send ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Send', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
+                react_1.default.createElement(paper_plane_icon_1.PaperPlaneIcon, null)), size: isCompact ? 'sm' : undefined }, props))));
 };
 exports.SendButton = SendButton;
 exports.default = exports.SendButton;

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

@@ -24,23 +24,23 @@ const renderSend = (props) => {
 describe('Send button', () => {
     it('should render button correctly', () => {
         renderSend();
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toBeTruthy();
     });
     it('should handle onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_2.render)(react_1.default.createElement(SendButton_1.SendButton, { onClick: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_2.render)(react_1.default.createElement(SendButton_1.SendButton, { onClick: jest.fn, tooltipContent: "Test" }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('should handle className prop', () => {
         renderSend({ className: 'test' });
-        expect(react_2.screen.getByRole('button', { name: 'Send button' })).toHaveClass('test');
+        expect(react_2.screen.getByRole('button', { name: 'Send' })).toHaveClass('test');
     });
     it('should handle spread props, including aria-label', () => {
         renderSend({ 'aria-label': 'test' });
@@ -48,7 +48,11 @@ describe('Send button', () => {
     });
     it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
         renderSend({ tooltipProps: { id: 'test' } });
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Send' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Send' })).toHaveAttribute('id', 'test');
     }));
+    it('should handle isCompact', () => {
+        renderSend({ 'data-testid': 'button', isCompact: true });
+        expect(react_2.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

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

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

package/dist/cjs/MessageBar/StopButton.js

@@ -22,13 +22,13 @@ const react_1 = __importDefault(require("react"));
 // Import PatternFly components
 const react_core_1 = require("@patternfly/react-core");
 const StopButton = (_a) => {
-    var { className, onClick, tooltipProps, tooltipContent = 'Stop' } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent"]);
+    var { className, onClick, tooltipProps, tooltipContent = 'Stop', isCompact } = _a, props = __rest(_a, ["className", "onClick", "tooltipProps", "tooltipContent", "isCompact"]);
     return (react_1.default.createElement(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--stop", content: tooltipContent, position: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.position) || 'top', entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
         // prevents VO announcements of both aria label and tooltip
         aria: "none" }, tooltipProps),
-        react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--stop ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop button', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: "xl", isInline: true },
+        react_1.default.createElement(react_core_1.Button, Object.assign({ className: `pf-chatbot__button--stop ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, variant: "link", "aria-label": props['aria-label'] || 'Stop', onClick: onClick, icon: react_1.default.createElement(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true },
                 react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    react_1.default.createElement("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }))) }, props))));
+                    react_1.default.createElement("path", { d: "M0.5 3C0.5 1.62109 1.62109 0.5 3 0.5H13C14.3789 0.5 15.5 1.62109 15.5 3V13C15.5 14.3789 14.3789 15.5 13 15.5H3C1.62109 15.5 0.5 14.3789 0.5 13V3Z", fill: "currentColor" }))), size: isCompact ? 'sm' : undefined }, props))));
 };
 exports.StopButton = StopButton;
 exports.default = exports.StopButton;

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

@@ -24,23 +24,23 @@ const renderStop = (props) => {
 describe('Stop button', () => {
     it('should render button correctly', () => {
         renderStop();
-        expect(react_2.screen.getByRole('button', { name: 'Stop button' })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: 'Stop' })).toBeTruthy();
     });
     it('should handle onClick correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_2.render)(react_1.default.createElement(StopButton_1.StopButton, { onClick: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_2.render)(react_1.default.createElement(StopButton_1.StopButton, { onClick: jest.fn, tooltipContent: "Test" }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('should handle className prop', () => {
         renderStop({ className: 'test' });
-        expect(react_2.screen.getByRole('button', { name: 'Stop button' })).toHaveClass('test');
+        expect(react_2.screen.getByRole('button', { name: 'Stop' })).toHaveClass('test');
     });
     it('should handle spread props, including aria-label', () => {
         renderStop({ 'aria-label': 'test' });
@@ -48,7 +48,11 @@ describe('Stop button', () => {
     });
     it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
         renderStop({ tooltipProps: { id: 'test' } });
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop button' }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Stop' }));
         expect(react_2.screen.getByRole('tooltip', { name: 'Stop' })).toHaveAttribute('id', 'test');
     }));
+    it('should handle isCompact', () => {
+        renderStop({ 'data-testid': 'button', isCompact: true });
+        expect(react_2.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+    });
 });

package/dist/cjs/MessageBox/JumpButton.js

@@ -12,6 +12,6 @@ const react_core_1 = require("@patternfly/react-core");
 const arrow_up_icon_1 = require("@patternfly/react-icons/dist/esm/icons/arrow-up-icon");
 const arrow_down_icon_1 = require("@patternfly/react-icons/dist/esm/icons/arrow-down-icon");
 const JumpButton = ({ position, isHidden, onClick }) => isHidden ? null : (react_1.default.createElement(react_core_1.Tooltip, { id: `pf-chatbot__tooltip--jump-${position}`, content: `Back to ${position}`, position: "top" },
-    react_1.default.createElement(react_core_1.Button, { variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Jump ${position} button`, onClick: onClick },
+    react_1.default.createElement(react_core_1.Button, { variant: "plain", className: `pf-chatbot__jump pf-chatbot__jump--${position}`, "aria-label": `Jump ${position}`, onClick: onClick },
         react_1.default.createElement(react_core_1.Icon, { iconSize: "lg", isInline: true }, position === 'top' ? react_1.default.createElement(arrow_up_icon_1.ArrowUpIcon, null) : react_1.default.createElement(arrow_down_icon_1.ArrowDownIcon, null)))));
 exports.default = JumpButton;

package/dist/cjs/MessageBox/JumpButton.test.js

@@ -20,20 +20,20 @@ const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('JumpButton', () => {
     it('should render top button correctly', () => {
         (0, react_2.render)(react_1.default.createElement(JumpButton_1.default, { position: "top", onClick: jest.fn() }));
-        expect(react_2.screen.getByRole('button', { name: /Jump top button/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Jump top/i })).toBeTruthy();
     });
     it('should render bottom button correctly', () => {
         (0, react_2.render)(react_1.default.createElement(JumpButton_1.default, { position: "bottom", onClick: jest.fn() }));
-        expect(react_2.screen.getByRole('button', { name: /Jump bottom button/i })).toBeTruthy();
+        expect(react_2.screen.getByRole('button', { name: /Jump bottom/i })).toBeTruthy();
     });
     it('should call onClick appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
         (0, react_2.render)(react_1.default.createElement(JumpButton_1.default, { position: "bottom", onClick: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump bottom button/i }));
+        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump bottom/i }));
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should be hidden if isHidden prop is used', () => __awaiter(void 0, void 0, void 0, function* () {
         (0, react_2.render)(react_1.default.createElement(JumpButton_1.default, { position: "bottom", onClick: jest.fn(), isHidden: true }));
-        expect(react_2.screen.queryByRole('button', { name: /Jump bottom button/i })).toBeFalsy();
+        expect(react_2.screen.queryByRole('button', { name: /Jump bottom/i })).toBeFalsy();
     }));
 });

package/dist/cjs/MessageBox/MessageBox.d.ts

@@ -12,6 +12,10 @@ export interface MessageBoxProps extends React.HTMLProps<HTMLDivElement> {
     innerRef?: React.Ref<HTMLDivElement>;
     /** Modifier that controls how content in MessageBox is positioned within the container */
     position?: 'top' | 'bottom';
+    /** Click handler for additional logic for when scroll to top jump button is clicked */
+    onScrollToTopClick?: () => void;
+    /** Click handler for additional logic for when scroll to bottom jump button is clicked */
+    onScrollToBottomClick?: () => void;
 }
 export declare const MessageBox: React.ForwardRefExoticComponent<Omit<MessageBoxProps, "ref"> & React.RefAttributes<any>>;
 export default MessageBox;

package/dist/cjs/MessageBox/MessageBox.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 };
 };
@@ -9,7 +20,8 @@ exports.MessageBox = void 0;
 // ============================================================================
 const react_1 = __importDefault(require("react"));
 const JumpButton_1 = __importDefault(require("./JumpButton"));
-const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top' }) => {
+const MessageBoxBase = (_a) => {
+    var { announcement, ariaLabel = 'Scrollable message log', children, innerRef, className, position = 'top', onScrollToTopClick, onScrollToBottomClick } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "innerRef", "className", "position", "onScrollToTopClick", "onScrollToBottomClick"]);
     const [atTop, setAtTop] = react_1.default.useState(false);
     const [atBottom, setAtBottom] = react_1.default.useState(true);
     const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
@@ -42,12 +54,14 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
         if (element) {
             element.scrollTo({ top: 0, behavior: 'smooth' });
         }
+        onScrollToTopClick && onScrollToTopClick();
     }, [messageBoxRef]);
     const scrollToBottom = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
+        onScrollToBottomClick && onScrollToBottomClick();
     }, [messageBoxRef]);
     // Detect scroll position
     react_1.default.useEffect(() => {
@@ -65,7 +79,7 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
     }, [checkOverflow, handleScroll, messageBoxRef]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
-        react_1.default.createElement("div", { role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef },
+        react_1.default.createElement("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef }, props),
             children,
             react_1.default.createElement("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite" }, announcement)),
         react_1.default.createElement(JumpButton_1.default, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: scrollToBottom })));

package/dist/cjs/MessageBox/MessageBox.test.js

@@ -1,4 +1,13 @@
 "use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,6 +15,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const MessageBox_1 = require("./MessageBox");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
 describe('MessageBox', () => {
     it('should render Message box', () => {
         (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, null,
@@ -19,4 +29,37 @@ describe('MessageBox', () => {
         expect(ref.current).not.toBeNull();
         expect(ref.current).toBeInstanceOf(HTMLDivElement);
     });
+    it('should call onScrollToBottomClick when scroll to top button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, { onScrollToBottomClick: spy },
+            react_1.default.createElement("div", null, "Test message content")));
+        // this forces button to show
+        const region = react_2.screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+        Object.defineProperty(region, 'scrollTop', { configurable: true, value: 0 });
+        region.dispatchEvent(new Event('scroll'));
+        yield (0, react_2.waitFor)(() => {
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump bottom/i }));
+            expect(spy).toHaveBeenCalled();
+        });
+    }));
+    it('should call onScrollToTopClick when scroll to top button is clicked', () => __awaiter(void 0, void 0, void 0, function* () {
+        const spy = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(MessageBox_1.MessageBox, { onScrollToTopClick: spy },
+            react_1.default.createElement("div", null, "Test message content")));
+        // this forces button to show
+        const region = react_2.screen.getByRole('region');
+        Object.defineProperty(region, 'scrollHeight', { configurable: true, value: 1000 });
+        Object.defineProperty(region, 'clientHeight', { configurable: true, value: 500 });
+        Object.defineProperty(region, 'scrollTop', {
+            configurable: true,
+            value: 500
+        });
+        region.dispatchEvent(new Event('scroll'));
+        yield (0, react_2.waitFor)(() => {
+            user_event_1.default.click(react_2.screen.getByRole('button', { name: /Jump top/i }));
+            expect(spy).toHaveBeenCalled();
+        });
+    }));
 });

package/dist/cjs/PreviewAttachment/PreviewAttachment.d.ts

@@ -17,6 +17,8 @@ export interface PreviewAttachmentProps {
     title?: string;
     /** Display mode for the Chatbot parent; this influences the styles applied */
     displayMode?: ChatbotDisplayMode;
+    /** Sets modal to compact styling. */
+    isCompact?: boolean;
 }
 export declare const PreviewAttachment: React.FunctionComponent<PreviewAttachmentProps>;
 export default PreviewAttachment;

package/dist/cjs/PreviewAttachment/PreviewAttachment.js

@@ -10,7 +10,7 @@ exports.PreviewAttachment = void 0;
 const react_1 = __importDefault(require("react"));
 const CodeModal_1 = __importDefault(require("../CodeModal"));
 const Chatbot_1 = require("../Chatbot");
-const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', displayMode = Chatbot_1.ChatbotDisplayMode.default }) => {
+const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onDismiss = undefined, onEdit, title = 'Preview attachment', displayMode = Chatbot_1.ChatbotDisplayMode.default, isCompact }) => {
     const handleEdit = (_event) => {
         handleModalToggle(_event);
         onEdit(_event);
@@ -19,7 +19,7 @@ const PreviewAttachment = ({ fileName, code, handleModalToggle, isModalOpen, onD
         handleModalToggle(_event);
         onDismiss && onDismiss(_event);
     };
-    return (react_1.default.createElement(CodeModal_1.default, { codeEditorControlClassName: "pf-chatbot__code-modal--controls", code: code, fileName: fileName, handleModalToggle: handleModalToggle, isCopyEnabled: true, isLineNumbersVisible: false, isModalOpen: isModalOpen, onPrimaryAction: handleEdit, onSecondaryAction: handleDismiss, primaryActionBtn: "Edit", secondaryActionBtn: "Dismiss", title: title, isReadOnly: true, displayMode: displayMode }));
+    return (react_1.default.createElement(CodeModal_1.default, { codeEditorControlClassName: "pf-chatbot__code-modal--controls", code: code, fileName: fileName, handleModalToggle: handleModalToggle, isCopyEnabled: true, isLineNumbersVisible: false, isModalOpen: isModalOpen, onPrimaryAction: handleEdit, onSecondaryAction: handleDismiss, primaryActionBtn: "Edit", secondaryActionBtn: "Dismiss", title: title, isReadOnly: true, displayMode: displayMode, isCompact: isCompact }));
 };
 exports.PreviewAttachment = PreviewAttachment;
 exports.default = exports.PreviewAttachment;

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');
+    });
 });