Attachments

• The reader attaches files to a chat message or a prompt, and sees them before sending.
• The files are part of what the reader is writing, so they belong next to the input, usually inside a Sender.Header.

Use something else when

• The upload is a form field, like an avatar or a document on a profile. Upload fits a form better and has its own list styles.
• You only need to show files that were already sent. That is FileCard, with no add or remove buttons to hide.

• For a chat, return false from beforeUpload. The file stays in the browser, and you read it from items when the message is sent. Each item's originFileObj is the File.
• To upload as soon as a file is picked, pass action or customRequest, and disable sending until every item's status is done.

• Set your state to fileList in every onChange. With items set and no onChange, picking a file or clicking remove changes nothing on screen.
• Give every item a unique uid. Removing a file looks items up by it.
• The card text comes from the item. For a failed file, set response to a short reason like “Too large”, or the card says “error”. A description replaces both the reason and the progress percent.
• Clear the list after sending by setting items to an empty array.

• Say what you accept in the description: the types, the size limit, the count. The reader cannot see accept.
• The same placeholder shows while a file is dragged over. Pass a function to word the two differently: it gets "drop" for the drag overlay.
• In a full-height chat, return document.body from getDropContainer, so a file dropped anywhere on the page is attached.

• Control the header's open with your own state, and open it when a file is dropped or pasted so the reader sees what was attached.
• For pasted files, use the Sender's onPasteFile and pass each file to ref.current.upload(file) on Attachments.
• Empty items in the Sender's onSubmit, next to clearing the text.

• Use rootClassName with children. className is ignored in this form.
• To open the picker from a button you cannot nest, like one in a toolbar, call ref.current.select() instead.

• maxCount hides the add button once the list is full. Say the limit in the placeholder too, or the button vanishing reads as a bug.
• accept limits the file types. It cannot limit the size, so check that in beforeUpload.
• In a narrow input, set overflow to scrollX, so many files stay on one row with arrows instead of pushing the input down.
• disabled keeps the files on screen without add or remove buttons, for a message that is being sent.

• The empty area and the drop overlay use a translucent, blurred fill. Change colorBgPlaceholderHover under components.Attachments to recolor it.