shadcn.io is not affiliated with official shadcn/ui
Context Menu Chat Block for Radix UI
A desktop messenger thread where each message has a secondary-click and long-press menu, plus a More actions button for keyboard and touch, with reply, edit, copy, pin and delete with undo.
Installation
Overview
Give every message a menu of actions with this context menu chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Pinbrook, a desktop messenger. Each bubble is wrapped in a Context Menu that opens with a secondary click or a long press, and every message also has a "More actions" button beside it, shown on hover and focus and always on a touch screen, which opens the same list in a Dropdown Menu because a context menu alone cannot be reached by keyboard. Reply puts a closable "Replying to" chip over the composer, Edit on your own messages fills the field with an "Editing message" chip (Escape cancels, saving marks it edited), Copy writes to the clipboard, Pin adds a pin glyph and the word Pinned, and Delete on your own turns the bubble into "You deleted this message" with Undo. The actions of one message are drawn open above the composer, with their Kbd keys. The Shine Button that sends is the only colored control, and the frame is ruled by Guides. For a messenger, a team chat or any list of items with actions.
FAQ
How do I open the menu?
Three ways: a secondary click or a long press on the bubble, or the More actions button beside it. The button is in the tab order, so a keyboard user reaches it, and it appears on hover, on focus and always on touch screens. Both menus list the same actions in the same order.
Which shortcuts work?
With focus on a message's More actions button, R replies, E edits your own message, C copies, P pins or unpins, and Delete removes your own message. The keys are shown beside each action. In the composer, Escape leaves a reply or an edit and Enter sends.
Why are Edit and Delete missing on some messages?
They only exist on your own messages, so the list for the other person's message has Reply, Copy and Pin. Pinned messages show Unpin instead.
How does Delete work?
The message is not removed from the page. It becomes a line saying you deleted it, with an Undo button that takes focus so you can restore it at once. In your app, delete on the server after a short delay or when the line is dismissed.