shadcn.io is not affiliated with official shadcn/ui
Attachment Menu Chat Block for Vue
A narrow messenger thread with a docked attach panel of six tiles (photo, file, place, contact, event, audio) that stage removable attachment cards with captions before Send posts them.
Installation
Overview
Show everything a person can attach to a message with this attachment menu chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Clipdale, a messenger, drawn with its attach panel open above the composer. The panel holds six tiles, an icon over a word: Photo, File, Place, Contact, Event and Audio. Choosing one stages a pending Attachment in a tray, with its own caption Input, a remove button and the words "Not uploaded". Photo takes the next of three drawn greyscale pictures, File opens the browser's file chooser, and the others start from a typed sample you can edit. Send posts each staged attachment as a card with its caption as the bubble, then whatever you typed as a Message, and a short reply follows behind a Typing Indicator Text. The "+" beside the field opens and closes the panel, and Escape closes it. The Shine Button that sends is the only colored control, and the frame is ruled by Guides. For a messenger, a team inbox or any composer that carries more than text.
FAQ
What does each tile attach?
Photo takes the next of three small drawn pictures in greys, so there are no image files in the block. File opens the real file chooser and reads only the chosen file's name and size. Place, Contact and Event start from a typed sample that you can edit in the tray, and Audio is a typed "Voice note 0:12" because nothing is recorded in this demo. The card that lands in the thread is built from what the tray held when you pressed Send.
How does the tray work?
Each pending attachment is a dashed card with a caption field and a remove button, and it says "Not uploaded" until you send it. Up to three can wait at once; a fourth tile press explains the limit in the status line instead of failing silently. Removing one returns focus to the message field.
How do I open and close the panel from the keyboard?
The "+" button is a toggle with an expanded state and a link to the panel, so a screen reader announces both. Pressing it opens or closes the panel, and Escape closes it from the field or from any tile. After you choose a tile the panel closes and focus moves to the new card's field, so you can type the caption straight away.
What stays in the page, and how do I make it real?
Everything. The thread, the sample places and people, the pictures and the replies are typed in the file, and no file is uploaded or even read beyond its name and size. To wire it up, upload each staged file where the code says so, replace the sample tiles with your own pickers (a map, an address book, a calendar), and post the stored result as the card's data.