Chatbot attachments

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.
Variant  
auth-operator
YAML

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.

Danger alert:File upload failed
Your file size is too large. Please ensure that your file is less than 25 MB.

Attachment dropzone

An attachment dropzone allows users to upload files via drag and drop.

Props

AttachMenu

*required
NameTypeDefaultDescription
filteredItemsrequiredReact.ReactNodeItems in menu
handleTextInputChangerequired(value: string) => voidA callback for when the input value changes.
isOpenrequiredbooleanFlag to indicate if menu is opened.
onOpenChangerequired(isOpen: boolean) => voidCallback to change the open state of the menu. Triggered by clicking outside of the menu.
togglerequiredDropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode)Toggle to be rendered
onOpenChangeKeysstring[]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) => voidFunction callback called when user selects item.
popperPropsExtendedDropdownPopperPropsundefinedAdditional properties to pass to the Popper
searchInputAriaLabelstring'Filter menu items'Aria label for search input
searchInputPlaceholderstringPlaceholder for search input

AttachmentEdit

*required
NameTypeDefaultDescription
coderequiredstringText shown in code editor
fileNamerequiredstringFilename, including extension, of file shown in editor
handleModalTogglerequired(event: React.MouseEvent | MouseEvent | KeyboardEvent) => voidFunction that opens and closes modal
isModalOpenrequiredbooleanWhether modal is open
onCancelrequired(event: React.MouseEvent | MouseEvent | KeyboardEvent) => voidFunction that runs when cancel button is clicked
onSaverequired(event: React.MouseEvent | MouseEvent | KeyboardEvent, code: string) => voidFunction that runs when save button is clicked; allows consumers to use the edited code string
displayModeChatbotDisplayModeChatbotDisplayMode.defaultDisplay mode for the Chatbot parent; this influences the styles applied
titlestring'Edit attachment'Title of modal

FileDetails

*required
NameTypeDefaultDescription

FileDetailsLabel

*required
NameTypeDefaultDescription
onClickNo type infoundefined
onCloseNo type infoundefined

FileDropZone

*required
NameTypeDefaultDescription
onFileDroprequired(event: DropEvent, data: File[]) => voidWhen files are dropped or uploaded this callback will be called with all accepted files
childrenReact.ReactNodeContent displayed when the drop zone is not currently in use
classNamestringCustom classname for the outer dropzone component
displayModeChatbotDisplayModeChatbotDisplayMode.defaultDisplay mode for the Chatbot parent; this influences the styles applied
infoTextstring'Maximum file size is 25 MB'Informational text that shows below the title in the drop zone

PreviewAttachment

*required
NameTypeDefaultDescription
coderequiredstringText shown in code editor
fileNamerequiredstringFilename, including extension, of file shown in modal
handleModalTogglerequired(event: React.MouseEvent | MouseEvent | KeyboardEvent) => voidFunction called when modal is toggled
isModalOpenrequiredbooleanWhether modal is open
onEditrequired(event: React.MouseEvent | MouseEvent | KeyboardEvent) => voidFunction called when edit button is clicked
displayModeChatbotDisplayModeChatbotDisplayMode.defaultDisplay mode for the Chatbot parent; this influences the styles applied
onDismiss(event: React.MouseEvent | MouseEvent | KeyboardEvent) => voidundefinedFunction called when dismiss button is clicked
titlestring'Preview attachment'Title of modal