shadcn.io is not affiliated with official shadcn/ui
Messenger Style Chat Block for Radix UI
A friends' thread whose one composer button is a Like while the field is empty and Send once you type, posting a large thumbs-up glyph or your words, with runs, avatars and a Delivered receipt.
Installation
Overview
Show a friends' messenger, with this messenger style chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Larkwing, a friends' messenger: the top bar names Calla Rennick with a filled dot and "Active now", and the log is runs of Message and Bubble rows, hers outlined with her initials under the last bubble of a run, yours soft and carrying "Delivered". The composer ends in one Shine Button, the only colored control, that is a Like while the field is empty and Send as soon as you type: it keeps its size and place, only its icon and hidden name change. A like posts one large thumbs-up glyph with no bubble; either press starts a Typing Indicator Text before a typed reply. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a social messenger or any thread with a one-press reaction.
FAQ
How does the Like button work?
While the field holds nothing but space, the button's icon is a thumb and its hidden name is "Send a like". Pressing it adds one large thumbs-up glyph on your side with no bubble, and a typed reply follows. Type anything and the same button turns into Send with an arrow. It never changes size, so the composer does not jump. Enter on an empty field does nothing, so a stray key never sends a like.
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file: a few keyed on words in your message, then one fallback per message and a last line that says it was the last sample reply. A like is answered by one fixed line. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where the code says so and append incoming messages to the same list.
How are messages grouped into runs?
One pure function, runsOf, marks every line as first or last of its run: a run continues while the sender stays the same and the next message is within five minutes. Her name shows on the first bubble of a run, her avatar and the time on the last. A like joins a run like any message.