@patternfly/chatbot 6.3.0-prerelease.22 → 6.3.0-prerelease.23

package/dist/cjs/FileDropZone/FileDropZone.d.ts

@@ -1,7 +1,7 @@
 import { DropEvent } from '@patternfly/react-core';
 import type { FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
-import { Accept } from 'react-dropzone/.';
+import { Accept, FileError, FileRejection } from 'react-dropzone/.';
 export interface FileDropZoneProps {
     /** Content displayed when the drop zone is not currently in use */
     children?: React.ReactNode;
@@ -19,6 +19,20 @@ export interface FileDropZoneProps {
     allowedFileTypes?: Accept;
     /** Display mode for the Chatbot parent; this influences the styles applied */
     displayMode?: ChatbotDisplayMode;
+    /** 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;
 }
 declare const FileDropZone: FunctionComponent<FileDropZoneProps>;
 export default FileDropZone;

package/dist/cjs/FileDropZone/FileDropZone.js

@@ -17,9 +17,14 @@ const react_1 = require("react");
 const Chatbot_1 = require("../Chatbot");
 const react_icons_1 = require("@patternfly/react-icons");
 const FileDropZone = (_a) => {
-    var { children, className, infoText = 'Maximum file size is 25 MB', onFileDrop, allowedFileTypes, displayMode = Chatbot_1.ChatbotDisplayMode.default } = _a, props = __rest(_a, ["children", "className", "infoText", "onFileDrop", "allowedFileTypes", "displayMode"]);
+    var { children, className, infoText = 'Maximum file size is 25 MB', onFileDrop, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, displayMode = Chatbot_1.ChatbotDisplayMode.default } = _a, props = __rest(_a, ["children", "className", "infoText", "onFileDrop", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "displayMode"]);
     const [showDropZone, setShowDropZone] = (0, react_1.useState)(false);
     const renderDropZone = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_core_1.MultipleFileUploadMain, { titleIcon: (0, jsx_runtime_1.jsx)(react_icons_1.UploadIcon, {}), titleText: "Drag and drop your file here", infoText: infoText, isUploadButtonHidden: true }) }));
-    return ((0, jsx_runtime_1.jsx)(react_core_1.MultipleFileUpload, { dropzoneProps: Object.assign({ accept: allowedFileTypes, onDrop: () => setShowDropZone(false) }, props), onDragEnter: () => setShowDropZone(true), onDragLeave: () => setShowDropZone(false), onFileDrop: onFileDrop, className: `pf-chatbot__dropzone pf-chatbot__dropzone--${displayMode} pf-chatbot__dropzone--${showDropZone ? 'visible' : 'invisible'} ${className ? className : ''}`, children: showDropZone ? renderDropZone() : children }));
+    return ((0, jsx_runtime_1.jsx)(react_core_1.MultipleFileUpload, { dropzoneProps: Object.assign({ accept: allowedFileTypes, onDrop: (acceptedFiles, fileRejections, event) => {
+                setShowDropZone(false);
+                onAttach && onAttach(acceptedFiles, fileRejections, event);
+            }, minSize,
+            maxSize,
+            maxFiles, disabled: isAttachmentDisabled, onDropRejected: onAttachRejected, validator }, props), onDragEnter: () => setShowDropZone(true), onDragLeave: () => setShowDropZone(false), onFileDrop: onFileDrop, className: `pf-chatbot__dropzone pf-chatbot__dropzone--${displayMode} pf-chatbot__dropzone--${showDropZone ? 'visible' : 'invisible'} ${className ? className : ''}`, children: showDropZone ? renderDropZone() : children }));
 };
 exports.default = FileDropZone;

package/dist/cjs/FileDropZone/FileDropZone.test.js

@@ -42,4 +42,59 @@ describe('FileDropZone', () => {
         yield user_event_1.default.upload(fileInput, file);
         expect(onFileDrop).not.toHaveBeenCalled();
     }));
+    it('should respect minSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { onFileDrop: jest.fn(), minSize: 1000, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield user_event_1.default.upload(fileInput, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { onFileDrop: jest.fn(), maxSize: 100, onAttachRejected: onAttachRejected }));
+        const largeContent = 'x'.repeat(200);
+        const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield user_event_1.default.upload(fileInput, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxFiles restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { onFileDrop: jest.fn(), maxFiles: 1, onAttachRejected: onAttachRejected }));
+        const files = [
+            new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+            new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+        ];
+        const fileInput = container.querySelector('input[type="file"]');
+        yield user_event_1.default.upload(fileInput, files);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should be disabled when isAttachmentDisabled is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onFileDrop = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { onFileDrop: onFileDrop, isAttachmentDisabled: true }));
+        const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield user_event_1.default.upload(fileInput, 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();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { onFileDrop: jest.fn(), onAttach: onAttach }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield user_event_1.default.upload(fileInput, 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();
+        const onFileDrop = jest.fn();
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(FileDropZone_1.default, { onFileDrop: onFileDrop, validator: validator, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield user_event_1.default.upload(fileInput, file);
+        expect(validator).toHaveBeenCalledWith(file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
 });

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

@@ -1,5 +1,5 @@
 import { ButtonProps, DropEvent, TooltipProps } from '@patternfly/react-core';
-import { Accept } from 'react-dropzone';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
 export interface AttachButtonProps extends ButtonProps {
     /** Callback for when button is clicked */
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -23,6 +23,23 @@ export interface AttachButtonProps extends ButtonProps {
     tooltipContent?: string;
     /** Test id applied to input */
     inputTestId?: string;
+    /** Whether button is compact */
     isCompact?: boolean;
+    /** 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;
 }
 export declare const AttachButton: import("react").ForwardRefExoticComponent<AttachButtonProps & import("react").RefAttributes<any>>;

package/dist/cjs/MessageBar/AttachButton.js

@@ -19,12 +19,10 @@ const react_core_1 = require("@patternfly/react-core");
 const react_dropzone_1 = require("react-dropzone");
 const paperclip_icon_1 = require("@patternfly/react-icons/dist/esm/icons/paperclip-icon");
 const AttachButtonBase = (_a) => {
-    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact, allowedFileTypes } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact", "allowedFileTypes"]);
-    const { open, getInputProps } = (0, react_dropzone_1.useDropzone)({
-        multiple: true,
-        onDropAccepted: onAttachAccepted,
-        accept: allowedFileTypes
-    });
+    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps"]);
+    const { open, getInputProps } = (0, react_dropzone_1.useDropzone)(Object.assign({ multiple: true, onDropAccepted: onAttachAccepted, accept: allowedFileTypes, minSize,
+        maxSize,
+        maxFiles, disabled: isAttachmentDisabled, onDrop: onAttach, onDropRejected: onAttachRejected, validator }, dropzoneProps));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ "data-testid": inputTestId }, getInputProps(), { hidden: true })), (0, jsx_runtime_1.jsx)(react_core_1.Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, position: "top", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
                 // prevents VO announcements of both aria label and tooltip
                 aria: "none" }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(react_core_1.Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: (0, jsx_runtime_1.jsx)(react_core_1.Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: (0, jsx_runtime_1.jsx)(paperclip_icon_1.PaperclipIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) }))] }));

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

@@ -91,4 +91,58 @@ describe('Attach button', () => {
         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,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { Accept } from 'react-dropzone/.';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
 import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
@@ -43,6 +43,28 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     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 */
@@ -81,12 +103,6 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     displayMode?: ChatbotDisplayMode;
     /** Whether message bar is compact */
     isCompact?: boolean;
-    /** 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;
     /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
     innerRef?: React.Ref<HTMLTextAreaElement>;
 }

package/dist/cjs/MessageBar/MessageBar.js

@@ -26,7 +26,7 @@ const AttachMenu_1 = __importDefault(require("../AttachMenu"));
 const StopButton_1 = __importDefault(require("./StopButton"));
 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, innerRef } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "innerRef"]);
+    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] = (0, react_1.useState)(value !== null && value !== void 0 ? value : '');
@@ -182,7 +182,7 @@ const MessageBarBase = (_a) => {
         if (hasStopButton && handleStopButton) {
             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 ((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 }, (_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 }, (_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)))] }));
+        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 = ((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) {

package/dist/esm/FileDropZone/FileDropZone.d.ts

@@ -1,7 +1,7 @@
 import { DropEvent } from '@patternfly/react-core';
 import type { FunctionComponent } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
-import { Accept } from 'react-dropzone/.';
+import { Accept, FileError, FileRejection } from 'react-dropzone/.';
 export interface FileDropZoneProps {
     /** Content displayed when the drop zone is not currently in use */
     children?: React.ReactNode;
@@ -19,6 +19,20 @@ export interface FileDropZoneProps {
     allowedFileTypes?: Accept;
     /** Display mode for the Chatbot parent; this influences the styles applied */
     displayMode?: ChatbotDisplayMode;
+    /** 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;
 }
 declare const FileDropZone: FunctionComponent<FileDropZoneProps>;
 export default FileDropZone;

package/dist/esm/FileDropZone/FileDropZone.js

@@ -15,9 +15,14 @@ import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
 const FileDropZone = (_a) => {
-    var { children, className, infoText = 'Maximum file size is 25 MB', onFileDrop, allowedFileTypes, displayMode = ChatbotDisplayMode.default } = _a, props = __rest(_a, ["children", "className", "infoText", "onFileDrop", "allowedFileTypes", "displayMode"]);
+    var { children, className, infoText = 'Maximum file size is 25 MB', onFileDrop, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, displayMode = ChatbotDisplayMode.default } = _a, props = __rest(_a, ["children", "className", "infoText", "onFileDrop", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "displayMode"]);
     const [showDropZone, setShowDropZone] = useState(false);
     const renderDropZone = () => (_jsx(_Fragment, { children: _jsx(MultipleFileUploadMain, { titleIcon: _jsx(UploadIcon, {}), titleText: "Drag and drop your file here", infoText: infoText, isUploadButtonHidden: true }) }));
-    return (_jsx(MultipleFileUpload, { dropzoneProps: Object.assign({ accept: allowedFileTypes, onDrop: () => setShowDropZone(false) }, props), onDragEnter: () => setShowDropZone(true), onDragLeave: () => setShowDropZone(false), onFileDrop: onFileDrop, className: `pf-chatbot__dropzone pf-chatbot__dropzone--${displayMode} pf-chatbot__dropzone--${showDropZone ? 'visible' : 'invisible'} ${className ? className : ''}`, children: showDropZone ? renderDropZone() : children }));
+    return (_jsx(MultipleFileUpload, { dropzoneProps: Object.assign({ accept: allowedFileTypes, onDrop: (acceptedFiles, fileRejections, event) => {
+                setShowDropZone(false);
+                onAttach && onAttach(acceptedFiles, fileRejections, event);
+            }, minSize,
+            maxSize,
+            maxFiles, disabled: isAttachmentDisabled, onDropRejected: onAttachRejected, validator }, props), onDragEnter: () => setShowDropZone(true), onDragLeave: () => setShowDropZone(false), onFileDrop: onFileDrop, className: `pf-chatbot__dropzone pf-chatbot__dropzone--${displayMode} pf-chatbot__dropzone--${showDropZone ? 'visible' : 'invisible'} ${className ? className : ''}`, children: showDropZone ? renderDropZone() : children }));
 };
 export default FileDropZone;

package/dist/esm/FileDropZone/FileDropZone.test.js

@@ -37,4 +37,59 @@ describe('FileDropZone', () => {
         yield userEvent.upload(fileInput, file);
         expect(onFileDrop).not.toHaveBeenCalled();
     }));
+    it('should respect minSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: jest.fn(), minSize: 1000, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: jest.fn(), maxSize: 100, onAttachRejected: onAttachRejected }));
+        const largeContent = 'x'.repeat(200);
+        const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxFiles restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: jest.fn(), maxFiles: 1, onAttachRejected: onAttachRejected }));
+        const files = [
+            new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+            new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+        ];
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, files);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should be disabled when isAttachmentDisabled is true', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onFileDrop = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: onFileDrop, isAttachmentDisabled: true }));
+        const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, 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();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: jest.fn(), onAttach: onAttach }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, 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();
+        const onFileDrop = jest.fn();
+        const { container } = render(_jsx(FileDropZone, { onFileDrop: onFileDrop, validator: validator, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const fileInput = container.querySelector('input[type="file"]');
+        yield userEvent.upload(fileInput, file);
+        expect(validator).toHaveBeenCalledWith(file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
 });

package/dist/esm/MessageBar/AttachButton.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps, DropEvent, TooltipProps } from '@patternfly/react-core';
-import { Accept } from 'react-dropzone';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone';
 export interface AttachButtonProps extends ButtonProps {
     /** Callback for when button is clicked */
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
@@ -23,6 +23,23 @@ export interface AttachButtonProps extends ButtonProps {
     tooltipContent?: string;
     /** Test id applied to input */
     inputTestId?: string;
+    /** Whether button is compact */
     isCompact?: boolean;
+    /** 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;
 }
 export declare const AttachButton: import("react").ForwardRefExoticComponent<AttachButtonProps & import("react").RefAttributes<any>>;

package/dist/esm/MessageBar/AttachButton.js

@@ -16,12 +16,10 @@ import { Button, Icon, Tooltip } from '@patternfly/react-core';
 import { useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 const AttachButtonBase = (_a) => {
-    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact, allowedFileTypes } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact", "allowedFileTypes"]);
-    const { open, getInputProps } = useDropzone({
-        multiple: true,
-        onDropAccepted: onAttachAccepted,
-        accept: allowedFileTypes
-    });
+    var { onAttachAccepted, onClick, isDisabled, className, tooltipProps, innerRef, tooltipContent = 'Attach', inputTestId, isCompact, allowedFileTypes, minSize, maxSize, maxFiles, isAttachmentDisabled, onAttach, onAttachRejected, validator, dropzoneProps } = _a, props = __rest(_a, ["onAttachAccepted", "onClick", "isDisabled", "className", "tooltipProps", "innerRef", "tooltipContent", "inputTestId", "isCompact", "allowedFileTypes", "minSize", "maxSize", "maxFiles", "isAttachmentDisabled", "onAttach", "onAttachRejected", "validator", "dropzoneProps"]);
+    const { open, getInputProps } = useDropzone(Object.assign({ multiple: true, onDropAccepted: onAttachAccepted, accept: allowedFileTypes, minSize,
+        maxSize,
+        maxFiles, disabled: isAttachmentDisabled, onDrop: onAttach, onDropRejected: onAttachRejected, validator }, dropzoneProps));
     return (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({ "data-testid": inputTestId }, getInputProps(), { hidden: true })), _jsx(Tooltip, Object.assign({ id: "pf-chatbot__tooltip--attach", content: tooltipContent, position: "top", entryDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.entryDelay) || 0, exitDelay: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.exitDelay) || 0, distance: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.distance) || 8, animationDuration: (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.animationDuration) || 0, 
                 // prevents VO announcements of both aria label and tooltip
                 aria: "none" }, tooltipProps, { children: _jsx(Button, Object.assign({ variant: "plain", ref: innerRef, className: `pf-chatbot__button--attach ${isCompact ? 'pf-m-compact' : ''} ${className !== null && className !== void 0 ? className : ''}`, "aria-label": props['aria-label'] || 'Attach', isDisabled: isDisabled, onClick: onClick !== null && onClick !== void 0 ? onClick : open, icon: _jsx(Icon, { iconSize: isCompact ? 'lg' : 'xl', isInline: true, children: _jsx(PaperclipIcon, {}) }), size: isCompact ? 'sm' : undefined }, props)) }))] }));

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

@@ -86,4 +86,58 @@ describe('Attach button', () => {
         yield userEvent.upload(input, file);
         expect(onAttachAccepted).not.toHaveBeenCalled();
     }));
+    it('should respect minSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", minSize: 1000, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxSize restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        render(_jsx(AttachButton, { inputTestId: "input", maxSize: 100, onAttachRejected: onAttachRejected }));
+        const largeContent = 'x'.repeat(200);
+        const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
+    it('should respect maxFiles restriction', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onAttachRejected = jest.fn();
+        render(_jsx(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 = screen.getByTestId('input');
+        yield userEvent.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();
+        render(_jsx(AttachButton, { inputTestId: "input", isAttachmentDisabled: true }));
+        const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.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();
+        render(_jsx(AttachButton, { inputTestId: "input", onAttach: onAttach }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.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();
+        render(_jsx(AttachButton, { inputTestId: "input", validator: validator, onAttachRejected: onAttachRejected }));
+        const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+        const input = screen.getByTestId('input');
+        yield userEvent.upload(input, file);
+        expect(validator).toHaveBeenCalledWith(file);
+        expect(onAttachRejected).toHaveBeenCalled();
+    }));
 });

package/dist/esm/MessageBar/MessageBar.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { Accept } from 'react-dropzone/.';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
 import { ButtonProps, DropEvent, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 export interface MessageBarWithAttachMenuProps {
@@ -43,6 +43,28 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     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 */
@@ -81,12 +103,6 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
     displayMode?: ChatbotDisplayMode;
     /** Whether message bar is compact */
     isCompact?: boolean;
-    /** 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;
     /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
     innerRef?: React.Ref<HTMLTextAreaElement>;
 }

package/dist/esm/MessageBar/MessageBar.js

@@ -20,7 +20,7 @@ import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 export 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, innerRef } = _a, props = __rest(_a, ["onSendMessage", "className", "alwayShowSendButton", "placeholder", "hasAttachButton", "hasMicrophoneButton", "listeningText", "handleAttach", "attachMenuProps", "isSendButtonDisabled", "handleStopButton", "hasStopButton", "buttonProps", "onChange", "displayMode", "value", "isCompact", "allowedFileTypes", "innerRef"]);
+    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] = useState(value !== null && value !== void 0 ? value : '');
@@ -176,7 +176,7 @@ export const MessageBarBase = (_a) => {
         if (hasStopButton && handleStopButton) {
             return (_jsx(StopButton, Object.assign({ onClick: handleStopButton, tooltipContent: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.stop) === null || _a === void 0 ? void 0 : _a.tooltipContent, isCompact: isCompact, 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 (_jsxs(_Fragment, { children: [attachMenuProps && (_jsx(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 }, (_f = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _f === void 0 ? void 0 : _f.props))), !attachMenuProps && hasAttachButton && (_jsx(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 }, (_k = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.attach) === null || _k === void 0 ? void 0 : _k.props))), hasMicrophoneButton && (_jsx(MicrophoneButton, 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) && (_jsx(SendButton, 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)))] }));
+        return (_jsxs(_Fragment, { children: [attachMenuProps && (_jsx(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 && (_jsx(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 && (_jsx(MicrophoneButton, 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) && (_jsx(SendButton, 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 = (_jsxs(_Fragment, { children: [_jsx("div", { className: `pf-chatbot__message-bar-input ${isCompact ? 'pf-m-compact' : ''}`, children: _jsx(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)) }), _jsx("div", { className: "pf-chatbot__message-bar-actions", children: renderButtons() })] }));
     if (attachMenuProps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.3.0-prerelease.22",
+  "version": "6.3.0-prerelease.23",
   "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/demos/ChatbotAttachment.tsx

@@ -138,10 +138,17 @@ export const BasicDemo: FunctionComponent = () => {
         }, 1000);
       })
       .catch((error: DOMException) => {
+        setShowAlert(true);
         setError(`Failed to read file: ${error.message}`);
       });
   };
 
+  const handleAttachRejected = () => {
+    setFile(undefined);
+    setShowAlert(true);
+    setError('This demo only supports file extensions .txt, .json, .yaml, and .yaml. Please try a different file.');
+  };
+
   const handleFileDrop = (event: DropEvent, data: File[]) => {
     handleFile(data);
   };
@@ -227,6 +234,7 @@ export const BasicDemo: FunctionComponent = () => {
             'application/json': ['.json'],
             'application/yaml': ['.yaml', '.yml']
           }}
+          onAttachRejected={handleAttachRejected}
         >
           <ChatbotContent>
             <MessageBox>
@@ -254,7 +262,17 @@ export const BasicDemo: FunctionComponent = () => {
                 <FileDetailsLabel fileName={file.name} isLoading={isLoadingFile} onClose={onClose} />
               </div>
             )}
-            <MessageBar onSendMessage={handleSend} hasAttachButton handleAttach={handleAttach} />
+            <MessageBar
+              onSendMessage={handleSend}
+              hasAttachButton
+              handleAttach={handleAttach}
+              allowedFileTypes={{
+                'text/plain': ['.txt'],
+                'application/json': ['.json'],
+                'application/yaml': ['.yaml', '.yml']
+              }}
+              onAttachRejected={handleAttachRejected}
+            />
             <ChatbotFootnote label="ChatBot uses AI. Check for mistakes." />
           </ChatbotFooter>
         </FileDropZone>

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx

@@ -127,6 +127,7 @@ export const AttachmentMenuDemo: FunctionComponent = () => {
   // Attachments
   // --------------------------------------------------------------------------
   const handleFileDrop = (event: DropEvent, data: File[]) => {
+    setIsOpen(false);
     setFile(data[0]);
     setIsLoadingFile(true);
     setTimeout(() => {

package/src/FileDropZone/FileDropZone.test.tsx

@@ -40,4 +40,87 @@ describe('FileDropZone', () => {
 
     expect(onFileDrop).not.toHaveBeenCalled();
   });
+
+  it('should respect minSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} minSize={1000} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+  it('should respect maxSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxSize={100} onAttachRejected={onAttachRejected} />
+    );
+
+    const largeContent = 'x'.repeat(200);
+    const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxFiles restriction', async () => {
+    const onAttachRejected = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={jest.fn()} maxFiles={1} onAttachRejected={onAttachRejected} />
+    );
+
+    const files = [
+      new File(['Test1'], 'example1.txt', { type: 'text/plain' }),
+      new File(['Test2'], 'example2.txt', { type: 'text/plain' })
+    ];
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, files);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should be disabled when isAttachmentDisabled is true', async () => {
+    const onFileDrop = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={onFileDrop} isAttachmentDisabled={true} />);
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should call onAttach when files are attached', async () => {
+    const onAttach = jest.fn();
+    const { container } = render(<FileDropZone onFileDrop={jest.fn()} onAttach={onAttach} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await userEvent.upload(fileInput, file);
+
+    expect(onAttach).toHaveBeenCalled();
+  });
+  it('should use custom validator when provided', async () => {
+    const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+    const onAttachRejected = jest.fn();
+    const onFileDrop = jest.fn();
+    const { container } = render(
+      <FileDropZone onFileDrop={onFileDrop} validator={validator} onAttachRejected={onAttachRejected} />
+    );
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+    await userEvent.upload(fileInput, file);
+
+    expect(validator).toHaveBeenCalledWith(file);
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
 });

package/src/FileDropZone/FileDropZone.tsx

@@ -3,7 +3,7 @@ import type { FunctionComponent } from 'react';
 import { useState } from 'react';
 import { ChatbotDisplayMode } from '../Chatbot';
 import { UploadIcon } from '@patternfly/react-icons';
-import { Accept } from 'react-dropzone/.';
+import { Accept, FileError, FileRejection } from 'react-dropzone/.';
 
 export interface FileDropZoneProps {
   /** Content displayed when the drop zone is not currently in use */
@@ -22,6 +22,20 @@ export interface FileDropZoneProps {
   allowedFileTypes?: Accept;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** 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;
 }
 
 const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
@@ -30,6 +44,13 @@ const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
   infoText = 'Maximum file size is 25 MB',
   onFileDrop,
   allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
   displayMode = ChatbotDisplayMode.default,
   ...props
 }: FileDropZoneProps) => {
@@ -50,7 +71,16 @@ const FileDropZone: FunctionComponent<FileDropZoneProps> = ({
     <MultipleFileUpload
       dropzoneProps={{
         accept: allowedFileTypes,
-        onDrop: () => setShowDropZone(false),
+        onDrop: (acceptedFiles, fileRejections: FileRejection[], event: DropEvent) => {
+          setShowDropZone(false);
+          onAttach && onAttach(acceptedFiles, fileRejections, event);
+        },
+        minSize,
+        maxSize,
+        maxFiles,
+        disabled: isAttachmentDisabled,
+        onDropRejected: onAttachRejected,
+        validator,
         ...props
       }}
       onDragEnter={() => setShowDropZone(true)}

package/src/MessageBar/AttachButton.test.tsx

@@ -98,4 +98,79 @@ describe('Attach button', () => {
 
     expect(onAttachAccepted).not.toHaveBeenCalled();
   });
+
+  it('should respect minSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" minSize={1000} onAttachRejected={onAttachRejected} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxSize restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" maxSize={100} onAttachRejected={onAttachRejected} />);
+
+    const largeContent = 'x'.repeat(200);
+    const file = new File([largeContent], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should respect maxFiles restriction', async () => {
+    const onAttachRejected = jest.fn();
+    render(<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 = screen.getByTestId('input');
+    await userEvent.upload(input, files);
+
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
+
+  it('should be disabled when isAttachmentDisabled is true', async () => {
+    const onFileDrop = jest.fn();
+    render(<AttachButton inputTestId="input" isAttachmentDisabled={true} />);
+
+    const file = new File(['Test'], 'example.text', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, file);
+
+    expect(onFileDrop).not.toHaveBeenCalled();
+  });
+
+  it('should call onAttach when files are attached', async () => {
+    const onAttach = jest.fn();
+    render(<AttachButton inputTestId="input" onAttach={onAttach} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+
+    await userEvent.upload(input, file);
+
+    expect(onAttach).toHaveBeenCalled();
+  });
+  it('should use custom validator when provided', async () => {
+    const validator = jest.fn().mockReturnValue({ message: 'Custom error' });
+    const onAttachRejected = jest.fn();
+    render(<AttachButton inputTestId="input" validator={validator} onAttachRejected={onAttachRejected} />);
+
+    const file = new File(['Test'], 'example.txt', { type: 'text/plain' });
+    const input = screen.getByTestId('input');
+    await userEvent.upload(input, file);
+
+    expect(validator).toHaveBeenCalledWith(file);
+    expect(onAttachRejected).toHaveBeenCalled();
+  });
 });

package/src/MessageBar/AttachButton.tsx

@@ -7,7 +7,7 @@ import { forwardRef } from 'react';
 
 // Import PatternFly components
 import { Button, ButtonProps, DropEvent, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import { Accept, useDropzone } from 'react-dropzone';
+import { Accept, DropzoneOptions, FileError, FileRejection, useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 
 export interface AttachButtonProps extends ButtonProps {
@@ -33,7 +33,24 @@ export interface AttachButtonProps extends ButtonProps {
   tooltipContent?: string;
   /** Test id applied to input */
   inputTestId?: string;
+  /** Whether button is compact */
   isCompact?: boolean;
+  /** 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;
 }
 
 const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
@@ -47,12 +64,28 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   inputTestId,
   isCompact,
   allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
+  dropzoneProps,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
     multiple: true,
     onDropAccepted: onAttachAccepted,
-    accept: allowedFileTypes
+    accept: allowedFileTypes,
+    minSize,
+    maxSize,
+    maxFiles,
+    disabled: isAttachmentDisabled,
+    onDrop: onAttach,
+    onDropRejected: onAttachRejected,
+    validator,
+    ...dropzoneProps
   });
 
   return (

package/src/MessageBar/MessageBar.tsx

@@ -1,6 +1,6 @@
 import type { ChangeEvent, FunctionComponent, KeyboardEvent as ReactKeyboardEvent, Ref } from 'react';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { Accept } from 'react-dropzone/.';
+import { Accept, DropzoneOptions, FileError, FileRejection } from 'react-dropzone/.';
 import { ButtonProps, DropEvent, TextArea, TextAreaProps, TooltipProps } from '@patternfly/react-core';
 
 // Import Chatbot components
@@ -53,6 +53,28 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   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 */
@@ -80,12 +102,6 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   displayMode?: ChatbotDisplayMode;
   /** Whether message bar is compact */
   isCompact?: boolean;
-  /** 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;
   /** Ref applied to message bar textarea, for use with focus or other custom behaviors  */
   innerRef?: React.Ref<HTMLTextAreaElement>;
 }
@@ -109,6 +125,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
   value,
   isCompact = false,
   allowedFileTypes,
+  minSize,
+  maxSize,
+  maxFiles,
+  isAttachmentDisabled,
+  onAttach,
+  onAttachRejected,
+  validator,
+  dropzoneProps,
   innerRef,
   ...props
 }: MessageBarProps) => {
@@ -309,6 +333,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             isCompact={isCompact}
             tooltipProps={buttonProps?.attach?.tooltipProps}
             allowedFileTypes={allowedFileTypes}
+            minSize={minSize}
+            maxSize={maxSize}
+            maxFiles={maxFiles}
+            isAttachmentDisabled={isAttachmentDisabled}
+            onAttach={onAttach}
+            onAttachRejected={onAttachRejected}
+            validator={validator}
+            dropzoneProps={dropzoneProps}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -321,6 +353,14 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             isCompact={isCompact}
             tooltipProps={buttonProps?.attach?.tooltipProps}
             allowedFileTypes={allowedFileTypes}
+            minSize={minSize}
+            maxSize={maxSize}
+            maxFiles={maxFiles}
+            isAttachmentDisabled={isAttachmentDisabled}
+            onAttach={onAttach}
+            onAttachRejected={onAttachRejected}
+            validator={validator}
+            dropzoneProps={dropzoneProps}
             {...buttonProps?.attach?.props}
           />
         )}