We are using react-dropzone for opening the file dialog and handling drag and drop. It does not process files or provide any way to make HTTP requests to a server. If you need this, react-dropzone suggests filepond or uppy.io.
Attachment label
When an attachment is successfully uploaded, a label will appear in the message box. There are several label variants that cover different attachment states, including:
- Plain: Default attachment labels, which display the filename and extension.
- Closeable: Attachments that can be dismissed.
- Clickable: Attachments that can be selected, typically to open file details.
- Loading: Attachments that are still being uploaded.
Attachment preview
To allow users to preview the contents of an attachment, load a read-only view of the file contents in a new modal.
Editable attachments
To allow users to edit an attached file, load a new code editor within the chatbot window. On this screen, you can allow users to edit a file and save changes if they'd like. Return users to the main chatbot window once they dismiss the editor.
Failed attachment error
When an attachment upload fails, a danger alert is displayed to provide details about the reason for failure.
Props
AttachMenu
| Name | Type | Default | Description |
|---|---|---|---|
| filteredItemsrequired | React.ReactNode | Items in menu | |
| handleTextInputChangerequired | (value: string) => void | A callback for when the input value changes. | |
| isOpenrequired | boolean | Flag to indicate if menu is opened. | |
| onOpenChangerequired | (isOpen: boolean) => void | Callback to change the open state of the menu. Triggered by clicking outside of the menu. | |
| togglerequired | DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode) | Toggle to be rendered | |
| onOpenChangeKeys | 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. | |
| onSelect | (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void | Function callback called when user selects item. | |
| popperProps | ExtendedDropdownPopperProps | undefined | Additional properties to pass to the Popper |
| searchInputAriaLabel | string | 'Filter menu items' | Aria label for search input |
| searchInputPlaceholder | string | Placeholder for search input |
AttachmentEdit
| Name | Type | Default | Description |
|---|---|---|---|
| coderequired | string | Text shown in code editor | |
| fileNamerequired | string | Filename, including extension, of file shown in editor | |
| handleModalTogglerequired | (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void | Function that opens and closes modal | |
| isModalOpenrequired | boolean | Whether modal is open | |
| onCancelrequired | (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void | Function that runs when cancel button is clicked | |
| onSaverequired | (event: React.MouseEvent | MouseEvent | KeyboardEvent, code: string) => void | Function that runs when save button is clicked; allows consumers to use the edited code string | |
| displayMode | ChatbotDisplayMode | ChatbotDisplayMode.default | Display mode for the Chatbot parent; this influences the styles applied |
| title | string | 'Edit attachment' | Title of modal |
FileDetails
| Name | Type | Default | Description |
|---|
FileDetailsLabel
| Name | Type | Default | Description |
|---|---|---|---|
| onClick | No type info | undefined | |
| onClose | No type info | undefined |
FileDropZone
| Name | Type | Default | Description |
|---|---|---|---|
| onFileDroprequired | (event: DropEvent, data: File[]) => void | When files are dropped or uploaded this callback will be called with all accepted files | |
| children | React.ReactNode | Content displayed when the drop zone is not currently in use | |
| className | string | Custom classname for the outer dropzone component | |
| displayMode | ChatbotDisplayMode | ChatbotDisplayMode.default | Display mode for the Chatbot parent; this influences the styles applied |
| infoText | string | 'Maximum file size is 25 MB' | Informational text that shows below the title in the drop zone |
PreviewAttachment
| Name | Type | Default | Description |
|---|---|---|---|
| coderequired | string | Text shown in code editor | |
| fileNamerequired | string | Filename, including extension, of file shown in modal | |
| handleModalTogglerequired | (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void | Function called when modal is toggled | |
| isModalOpenrequired | boolean | Whether modal is open | |
| onEditrequired | (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void | Function called when edit button is clicked | |
| displayMode | ChatbotDisplayMode | ChatbotDisplayMode.default | Display mode for the Chatbot parent; this influences the styles applied |
| onDismiss | (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void | undefined | Function called when dismiss button is clicked |
| title | string | 'Preview attachment' | Title of modal |
