import type { FunctionComponent } from 'react'; import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection } from 'react-dropzone'; import { ButtonProps, MenuSearchInputProps, MenuSearchProps, SearchInputProps, TextAreaProps, TooltipProps } from '@patternfly/react-core'; import { AttachButtonProps } from './AttachButton'; import { ChatbotDisplayMode } from '../Chatbot'; export interface MessageBarWithAttachMenuProps { /** Flag to enable whether attach menu is open */ isAttachMenuOpen: boolean; /** Callback to close attach menu */ setIsAttachMenuOpen: (isOpen: boolean) => void; /** Items in menu */ attachMenuItems: React.ReactNode; /** A callback for when the attachment menu toggle is clicked */ onAttachMenuToggleClick: () => void; /** A callback for when the input value in the menu changes. */ onAttachMenuInputChange?: (value: string) => void; /** Function callback called when user selects item in menu. */ onAttachMenuSelect?: (event?: React.MouseEvent, value?: string | number) => void; /** Placeholder for search input */ attachMenuInputPlaceholder?: string; /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */ onAttachMenuOnOpenChangeKeys?: string[]; /** Callback to change the open state of the menu. Triggered by clicking outside of the menu. */ onAttachMenuOpenChange?: (isOpen: boolean) => void; /** Additional props passed to MenuSearch component in attach menu */ menuSearchProps?: Omit; /** Additional props passed to MenuSearchInput component in attach menu */ menuSearchInputProps?: Omit; /** Additional props passed to SearchInput component in attach menu */ searchInputProps?: SearchInputProps; } export interface MessageBarProps extends Omit { /** Callback to get the value of input message by user */ onSendMessage: (message: string | number) => void; /** Class Name for the MessageBar component */ className?: string; /** Flag to always to show the send button. By default send button is shown when there is a message in the input field */ alwayShowSendButton?: boolean; /** Placeholder for message input */ placeholder?: string; /** Flag to disable/enable the Attach button */ hasAttachButton?: boolean; /** Flag to enable the Microphone button */ hasMicrophoneButton?: boolean; /** Placeholder text when listening */ listeningText?: string; /** Flag to enable the Stop button, used for streaming content */ hasStopButton?: boolean; /** Callback function for when stop button is clicked */ handleStopButton?: (event: React.MouseEvent) => 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?: (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?: (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 */ isSendButtonDisabled?: boolean; /** Prop to allow passage of additional props to buttons */ buttonProps?: { attach?: AttachButtonProps & { props?: ButtonProps; }; stop?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit; }; send?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit; }; microphone?: { tooltipContent?: { active?: string; inactive?: string; }; language?: string; props?: ButtonProps; tooltipProps?: Omit; }; }; /** A callback for when the text area value changes. */ onChange?: (event: React.ChangeEvent, 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; /** Sets background color to primary */ isPrimary?: boolean; /** @beta Flag indicating whether the message bar has an AI indicator border. */ hasAiIndicator?: boolean; /** @beta Flag indicating whether the chatbot is thinking in response to a query, adding an animation to the message bar. */ isThinking?: boolean; } export declare const MessageBarBase: FunctionComponent; declare const MessageBar: import("react").ForwardRefExoticComponent>; export { MessageBar }; export default MessageBar;