shadcn.io is not affiliated with official shadcn/ui
Message Actions Chat Block for Solid
A team channel where a toolbar follows the message you are on, with a thumbs-up count, Reply, Copy and a More menu for reminders, mark unread and reporting.
Installation
Overview
Put every verb a message needs one press away with this message actions chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for the Design crew channel of Flickbar, a team chat. The bubbles are Message and Bubble rows, and the one under the pointer, with focus or tapped is the active message: a small toolbar sits in the gap under it with a Toggle for a thumbs-up count, Reply, Copy and a More Dropdown Menu for Remind me, Mark unread and, on a teammate's message, Report behind an Alert Dialog. Reply puts a "Replying to" chip beside the status line, Copy writes the message to the clipboard, and the composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a team chat, an inbox or any thread where people act on single messages.
FAQ
What stays in the page, and how do I make it real?
Everything, apart from Copy, which really writes the message to the clipboard. The thread is typed in SEED, replies to what you send come from a short script, a reminder is only a tag on the message and Report only marks it as reported here. Nothing is scheduled, sent or saved. To wire it for real, replace the handlers like, remind, markUnread and confirmReport with calls to your API and keep their state updates as the optimistic result.
Why does nothing jump when the toolbar moves?
Every message row keeps a band under it for the toolbar, and the toolbar is drawn over that band rather than inserted into the flow. Moving the pointer, focusing another message or tapping one only moves the toolbar, so the log never reflows and the window never changes height. The newest message from a teammate is active on load, so the toolbar is visible without any action.
How do I use it with a keyboard?
The log has one tab stop on its active message. Up and Down move to the previous or next message, Tab goes on to the toolbar, the arrow keys, Home and End move between its buttons (flipped in a right-to-left page) and Escape returns to the message. Closing the More menu or the Report dialog puts focus back on the More button, and Reply moves it to the composer.
How are the reminders and the unread divider worked out?
From the typed time of the channel, never from the clock. Remind me in 1 hour adds an hour to NOW_MINUTES and Remind me tomorrow takes the day after AS_OF at 09:00, and both are written as tags such as "Reminder: Tue 13 Oct, 09:00" by one date helper. Mark unread moves an "Unread" divider above the message and the status line counts the teammates' messages from there, for example "3 unread".
What does Report do?
It is a confirm for a teammate's message only: Keep it is the first button and Report message the destructive one. Confirming marks the message "Reported" in this page and says so in the status line; nothing is sent. Your own messages do not offer it.
How does it work on a phone?
A tap on a message makes it active, because the bubble is a button, and the toolbar's four buttons are icons with hidden names. The same single column keeps the bubbles within 80% of the width and the composer at the foot. The window keeps its height and only the log scrolls, even at 320 px wide.