shadcn.io is not affiliated with official shadcn/ui
File Sharing Chat Block for React Aria
A team thread with six file cards and an end pane that lists every shared file in a table sortable by name, size, who and date, with real small sample files you can download from either place.
Installation
Overview
Show the files of a conversation in two places at once, with this file sharing chat for React with React Aria. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Parcelford, a team messenger: the log holds six Attachment cards, each with a type glyph, the name, the size and the type and a Download button, spread over three days, and the end pane "Files (6)" lists the same files in a table with sortable column heads that say which column is sorted and in which direction. Both places download the same small real file. A Toggle Group switches between the chat and the files on a phone, and the composer's Shine Button is the only colored control.
FAQ
What stays in the page, and how do I make it real?
The six files are short text, CSV, Markdown, JSON and calendar documents written in the file, and the size shown is the size of what you get. Nothing is uploaded. To wire it for real, replace each file's content with a link to your storage, make saveFile fetch it, and add an upload control to the composer.
How does the table sort?
Each column head is a button. The first press sorts ascending, a second press on the same column reverses it, and the head carries aria-sort plus a visible arrow and a sentence above the table, "Sorted by date, descending", which is also in the table's caption. Ties fall back to the file id so the order never jumps.
Which files download, and are they real?
All six, from the card or from the table row. Each is built as a Blob with the right type and saved under its own name, and the status line says what was saved. They are tiny sample documents, not copies of anything private.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus returns to the field after sending. Replies come from a short typed script keyed on words in your message, with one fallback per message and a last line that says it was the last sample reply.