@patternfly/chatbot 6.3.0-prerelease.9 → 6.3.1

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

@@ -12,59 +12,137 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
 require("@testing-library/jest-dom");
 const user_event_1 = __importDefault(require("@testing-library/user-event"));
 const AttachButton_1 = require("./AttachButton");
 describe('Attach button', () => {
     it('should render button correctly', () => {
-        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, null));
-        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, {}));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeTruthy();
     });
     it('should handle isDisabled prop', () => {
-        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { isDisabled: true }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toBeDisabled();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { isDisabled: true }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toBeDisabled();
     });
     it('should handle spread props, including aria-label', () => {
-        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { "aria-label": "test" }));
-        expect(react_2.screen.getByRole('button', { name: 'test' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { "aria-label": "test" }));
+        expect(react_1.screen.getByRole('button', { name: 'test' }));
     });
     it('should handle onClick', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { onClick: spy }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { onClick: spy }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle className prop', () => {
-        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { className: "test" }));
-        expect(react_2.screen.getByRole('button', { name: 'Attach button' })).toHaveClass('test');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { className: "test" }));
+        expect(react_1.screen.getByRole('button', { name: 'Attach' })).toHaveClass('test');
     });
     it('should handle custom tooltip correctly', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { onClick: jest.fn, tooltipContent: "Test" }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { onClick: jest.fn, tooltipContent: "Test" }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
     }));
     it('should handle tooltipProps prop', () => __awaiter(void 0, void 0, void 0, function* () {
-        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { tooltipProps: { id: 'test' } }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
-        expect(react_2.screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { tooltipProps: { id: 'test' } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        expect(react_1.screen.getByRole('tooltip', { name: 'Attach' })).toHaveAttribute('id', 'test');
     }));
     // Based on this because I had no idea how to do this and was looking around: https://stackoverflow.com/a/75562651
     // See also https://developer.mozilla.org/en-US/docs/Web/API/File/File for what that file variable is doing
     it('should handle onAttachAccepted prop', () => __awaiter(void 0, void 0, void 0, function* () {
         const spy = jest.fn();
-        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { onAttachAccepted: spy, inputTestId: "input" }));
-        yield user_event_1.default.click(react_2.screen.getByRole('button', { name: 'Attach button' }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { onAttachAccepted: spy, inputTestId: "input" }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
         const file = new File(['test'], 'test.json');
-        const input = react_2.screen.getByTestId('input');
+        const input = react_1.screen.getByTestId('input');
         yield user_event_1.default.upload(input, file);
         expect(input.files).toHaveLength(1);
         expect(spy).toHaveBeenCalledTimes(1);
     }));
     it('should handle isCompact', () => {
-        (0, react_2.render)(react_1.default.createElement(AttachButton_1.AttachButton, { isCompact: true, "data-testid": "button" }));
-        expect(react_2.screen.getByTestId('button')).toHaveClass('pf-m-compact');
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { isCompact: true, "data-testid": "button" }));
+        expect(react_1.screen.getByTestId('button')).toHaveClass('pf-m-compact');
     });
+    it('should set correct accept attribute on file input', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", allowedFileTypes: { 'text/plain': ['.txt'] } }));
+        yield user_event_1.default.click(react_1.screen.getByRole('button', { name: 'Attach' }));
+        const input = react_1.screen.getByTestId('input');
+        expect(input).toHaveAttribute('accept', 'text/plain,.txt');
+    }));
+    it('should call onAttachAccepted when file type is accepted', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachAccepted = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", allowedFileTypes: { 'text/plain': ['.txt'] }, onAttachAccepted: onAttachAccepted }));
+        const file = new File(['hello'], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttachAccepted).toHaveBeenCalled();
+        const [attachedFile] = onAttachAccepted.mock.calls[0][0];
+        expect(attachedFile).toEqual(file);
+    }));
+    it('should not call onAttachAccepted when file type is not accepted', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachAccepted = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", allowedFileTypes: { 'text/plain': ['.txt'] }, onAttachAccepted: onAttachAccepted }));
+        const file = new File(['[]'], 'example.json', { type: 'application/json' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttachAccepted).not.toHaveBeenCalled();
+    }));
+    it('should respect minSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", minSize: 1000, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", maxSize: 100, onAttachRejected: onAttachRejected }));
+        const largeContent = 'x'.repeat(200);
+        const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxFiles restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", maxFiles: 1, onAttachRejected: onAttachRejected }));
+        const files = [
+            new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+            new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+        ];
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, files);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should be disabled when isAttachmentDisabled is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onFileDrop = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", isAttachmentDisabled: true }));
+        const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onFileDrop).not.toHaveBeenCalled();
+    }));
+    it('should call onAttach when files are attached', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttach = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", onAttach: onAttach }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(onAttach).toHaveBeenCalled();
+    }));
+    it('should use custom validator when provided', () => __awaiter(void 0, void 0, void 0, function* () {
+        const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+        const onAttachRejected = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { inputTestId: "input", validator: validator, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = react_1.screen.getByTestId('input');
+        yield user_event_1.default.upload(input, file);
+        expect(validator).toHaveBeenCalledWith(file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
 });

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
 import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
@@ -21,7 +22,7 @@ export interface MessageBarWithAttachMenuProps {
     /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */
     onAttachMenuOpenChange?: (isOpen: boolean) => void;
 }
-export interface MessageBarProps extends TextAreaProps {
+export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     /** Callback to get the value of input message by user */
     onSendMessage: (message: string | number) => void;
     /** Class Name for the MessageBar component */
@@ -42,6 +43,28 @@ export interface MessageBarProps extends TextAreaProps {
     handleStopButton?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Callback function for when attach button is used to upload a file */
     handleAttach?: (data: File[], event: DropEvent) => void;
+    /** Specifies the file types accepted by the attachment upload component.
+     *  Files that don't match the accepted types will be disabled in the file picker.
+     *  For example,
+     *   allowedFileTypes: { 'application/json': ['.json'], 'text/plain': ['.txt'] }
+     **/
+    allowedFileTypes?: Accept;
+    /** Minimum file size allowed */
+    minSize?: number;
+    /** Max file size allowed */
+    maxSize?: number;
+    /** Max number of files allowed */
+    maxFiles?: number;
+    /** Whether attachments are disabled */
+    isAttachmentDisabled?: boolean;
+    /** Callback when file(s) are attached */
+    onAttach?: <T extends File>(acceptedFiles: T[], fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Callback function for AttachButton when an attachment fails */
+    onAttachRejected?: (fileRejections: FileRejection[], event: DropEvent) => void;
+    /** Validator for files; see https://react-dropzone.js.org/#!/Custom%20validation for more information */
+    validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
+    /** Additional props passed to react-dropzone */
+    dropzoneProps?: DropzoneOptions;
     /** Props to enable a menu that opens when the Attach button is clicked, instead of the attachment window */
     attachMenuProps?: MessageBarWithAttachMenuProps;
     /** Flag to provide manual control over whether send button is disabled */
@@ -78,7 +101,12 @@ export interface MessageBarProps extends TextAreaProps {
     onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string | number) => void;
     /** Display mode of chatbot, if you want to message bar to resize when the display mode changes */
     displayMode?: ChatbotDisplayMode;
+    /** Whether message bar is compact */
     isCompact?: boolean;
+    /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
+    innerRef?: React.Ref<HTMLTextAreaElement>;
 }
-export declare const MessageBar: React.FunctionComponent<MessageBarProps>;
+export declare const MessageBarBase: FunctionComponent<MessageBarProps>;
+declare const MessageBar: import("react").ForwardRefExoticComponent<MessageBarProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { MessageBar };
 export default MessageBar;

package/dist/cjs/MessageBar/MessageBar.js

@@ -14,8 +14,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageBar = void 0;
-const react_1 = __importDefault(require("react"));
+exports.MessageBar = exports.MessageBarBase = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_core_1 = require("@patternfly/react-core");
 // Import Chatbot components
 const SendButton_1 = __importDefault(require("./SendButton"));
@@ -23,15 +24,17 @@ const MicrophoneButton_1 = __importDefault(require("./MicrophoneButton"));
 const AttachButton_1 = require("./AttachButton");
 const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
-const MessageBar = (_a) => {
-    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact"]);
+const MessageBarBase = (_a) => {
+    var _b;
+    var { onSendMessage, className, alwayShowSendButton, placeholder = 'Send a message...', hasAttachButton = true, hasMicrophoneButton, listeningText = 'Listening', handleAttach, attachMenuProps, isSendButtonDisabled, handleStopButton, hasStopButton, buttonProps, onChange, displayMode, value, isCompact = false, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps, innerRef } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps", "innerRef"]);
     // Text Input
     // --------------------------------------------------------------------------
-    const [message, setMessage] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
-    const [isListeningMessage, setIsListeningMessage] = react_1.default.useState(false);
-    const [hasSentMessage, setHasSentMessage] = react_1.default.useState(false);
-    const textareaRef = react_1.default.useRef(null);
-    const attachButtonRef = react_1.default.useRef(null);
+    const [message, setMessage] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
+    const [isListeningMessage, setIsListeningMessage] = (0, react_1.useState)(false);
+    const [hasSentMessage, setHasSentMessage] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const textareaRef = (_b = innerRef) !== null && _b !== void 0 ? _b : inputRef;
+    const attachButtonRef = (0, react_1.useRef)(null);
     const topMargin = '1rem';
     const setInitialLineHeight = (field) => {
         field.style.setProperty('line-height', '1rem');
@@ -69,7 +72,7 @@ const MessageBar = (_a) => {
         const lines = field.scrollHeight / lineHeight;
         return lines > 2;
     };
-    const setAutoWidth = react_1.default.useCallback((field) => {
+    const setAutoWidth = (0, react_1.useCallback)((field) => {
         const parent = field.parentElement;
         if (parent) {
             const grandparent = parent.parentElement;
@@ -85,7 +88,7 @@ const MessageBar = (_a) => {
             parent.style.setProperty('margin-top', topMargin);
         }
     };
-    react_1.default.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const field = textareaRef.current;
         if (field) {
             if (field.value === '') {
@@ -116,26 +119,26 @@ const MessageBar = (_a) => {
             window.removeEventListener('resize', resetHeight);
         };
     }, [setAutoWidth]);
-    react_1.default.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const field = textareaRef.current;
         if (field) {
             if (field.value === '') {
-                setInitialLineHeight(textareaRef.current);
+                setInitialLineHeight(field);
             }
             else {
-                setAutoHeight(textareaRef.current);
+                setAutoHeight(field);
                 setAutoWidth(field);
             }
         }
     }, [displayMode, message, setAutoWidth]);
-    react_1.default.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const field = textareaRef.current;
         if (field) {
             setInitialLineHeight(field);
             setHasSentMessage(false);
         }
     }, [hasSentMessage]);
-    const handleChange = react_1.default.useCallback((event) => {
+    const handleChange = (0, react_1.useCallback)((event) => {
         onChange && onChange(event, event.target.value);
         if (textareaRef.current) {
             if (event.target.value === '') {
@@ -148,12 +151,12 @@ const MessageBar = (_a) => {
         setMessage(event.target.value);
     }, [onChange]);
     // Handle sending message
-    const handleSend = react_1.default.useCallback((newMessage) => {
+    const handleSend = (0, react_1.useCallback)((newMessage) => {
         onSendMessage(newMessage);
         setHasSentMessage(true);
         setMessage('');
     }, [onSendMessage]);
-    const handleKeyDown = react_1.default.useCallback((event) => {
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
             if (!isSendButtonDisabled && !hasStopButton) {
@@ -175,29 +178,24 @@ const MessageBar = (_a) => {
         onChange && onChange({}, message);
     };
     const renderButtons = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         if (hasStopButton && handleStopButton) {
-            return (react_1.default.createElement(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact }, (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.props)));
+            return ((0, jsx_runtime_1.jsx)(StopButton_1.default, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact, tooltipProps: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _b === void 0 ? void 0 : _b.tooltipProps }, (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _c === void 0 ? void 0 : _c.props)));
         }
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            attachMenuProps && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_c = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _c === void 0 ? void 0 : _c.tooltipContent, isCompact: isCompact }, (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.props))),
-            !attachMenuProps && hasAttachButton && (react_1.default.createElement(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipContent, inputTestId: (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.inputTestId, isCompact: isCompact }, (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.props))),
-            hasMicrophoneButton && (react_1.default.createElement(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _h === void 0 ? void 0 : _h.tooltipContent, language: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _j === void 0 ? void 0 : _j.language, isCompact: isCompact }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _k === void 0 ? void 0 : _k.props))),
-            (alwayShowSendButton || message) && (react_1.default.createElement(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _l === void 0 ? void 0 : _l.tooltipContent, isCompact: isCompact }, (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _m === void 0 ? void 0 : _m.props)))));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [attachMenuProps && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ ref: attachButtonRef, onClick: handleAttachMenuToggle, isDisabled: isListeningMessage, tooltipContent: (_d = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _d === void 0 ? void 0 : _d.tooltipContent, isCompact: isCompact, tooltipProps: (_e = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _e === void 0 ? void 0 : _e.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.props))), !attachMenuProps && hasAttachButton && ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, Object.assign({ onAttachAccepted: handleAttach, isDisabled: isListeningMessage, tooltipContent: (_g = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _g === void 0 ? void 0 : _g.tooltipContent, inputTestId: (_h = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _h === void 0 ? void 0 : _h.inputTestId, isCompact: isCompact, tooltipProps: (_j = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _j === void 0 ? void 0 : _j.tooltipProps, allowedFileTypes: allowedFileTypes, minSize: minSize, maxSize: maxSize, maxFiles: maxFiles, isAttachmentDisabled: isAttachmentDisabled, onAttach: onAttach, onAttachRejected: onAttachRejected, validator: validator, dropzoneProps: dropzoneProps }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _k === void 0 ? void 0 : _k.props))), hasMicrophoneButton && ((0, jsx_runtime_1.jsx)(MicrophoneButton_1.default, Object.assign({ isListening: isListeningMessage, onIsListeningChange: setIsListeningMessage, onSpeechRecognition: handleSpeechRecognition, tooltipContent: (_l = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _l === void 0 ? void 0 : _l.tooltipContent, language: (_m = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _m === void 0 ? void 0 : _m.language, isCompact: isCompact, tooltipProps: (_o = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _o === void 0 ? void 0 : _o.tooltipProps }, (_p = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.microphone) === null || _p === void 0 ? void 0 : _p.props))), (alwayShowSendButton || message) && ((0, jsx_runtime_1.jsx)(SendButton_1.default, Object.assign({ value: message, onClick: () => handleSend(message), isDisabled: isSendButtonDisabled, tooltipContent: (_q = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _q === void 0 ? void 0 : _q.tooltipContent, isCompact: isCompact, tooltipProps: (_r = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _r === void 0 ? void 0 : _r.tooltipProps }, (_s = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.send) === null || _s === void 0 ? void 0 : _s.props)))] }));
     };
-    const messageBarContents = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}` },
-            react_1.default.createElement(react_core_1.TextArea, Object.assign({ className: "pf-chatbot__message-textarea", value: message, onChange: handleChange, "aria-label": isListeningMessage ? listeningText : placeholder, placeholder: isListeningMessage ? listeningText : placeholder, ref: textareaRef, onKeyDown: handleKeyDown }, props))),
-        react_1.default.createElement("div", { className: "pf-chatbot__message-bar-actions" }, renderButtons())));
+    const messageBarContents = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: (0, jsx_runtime_1.jsx)(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)) }), (0, jsx_runtime_1.jsx)("div", { className: "pf-chatbot__message-bar-actions", children: 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) => {
+        return ((0, jsx_runtime_1.jsx)(AttachMenu_1.default, Object.assign({ toggle: (toggleRef) => ((0, jsx_runtime_1.jsx)("div", { ref: toggleRef, className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents })), filteredItems: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuItems }, (attachMenuProps && { isOpen: attachMenuProps.isAttachMenuOpen }), { onOpenChange: (isAttachMenuOpen) => {
                 var _a;
                 (_a = attachButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                 attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.setIsAttachMenuOpen(isAttachMenuOpen);
                 (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange) && (attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOpenChange(isAttachMenuOpen));
             }, onOpenChangeKeys: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuOnOpenChangeKeys, onSelect: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.onAttachMenuSelect }, (attachMenuProps && { handleTextInputChange: attachMenuProps.onAttachMenuInputChange }), { popperProps: { direction: 'up', distance: '8' }, searchInputPlaceholder: attachMenuProps === null || attachMenuProps === void 0 ? void 0 : attachMenuProps.attachMenuInputPlaceholder })));
     }
-    return react_1.default.createElement("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}` }, messageBarContents);
+    return (0, jsx_runtime_1.jsx)("div", { className: `pf-chatbot__message-bar ${className !== null && className !== void 0 ? className : ''}`, children: messageBarContents });
 };
+exports.MessageBarBase = MessageBarBase;
+const MessageBar = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.MessageBarBase, Object.assign({ innerRef: ref }, props))));
 exports.MessageBar = MessageBar;
-exports.default = exports.MessageBar;
+exports.default = MessageBar;