shadcn.io is not affiliated with official shadcn/ui
Reply Quote Chat Block for React
A group messenger where a reply carries a quoted block that jumps to the original, with text, clamped, photo and deleted quotes, and a Replying to chip fed by each message's More menu.
Installation
Overview
Show which message a reply answers with this reply quote chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for the Ridge walkers group of Replyline, a group messenger, as flat rows. A reply starts with a quoted block: a start rule, the sender in medium weight and up to two lines of the original, or a drawn thumbnail and "Photo" for a picture. Pressing a quote scrolls the log to the original, rings it and moves focus to it, while the quote of a deleted original is plain text that says so. Every message has a More Dropdown Menu with Reply, which puts a "Replying to" chip beside the status line, and the composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
Everything. The ten messages are typed in SEED, replies to what you send come from a short script and the drawn picture is an SVG in the file. A real version stores the id of the original with each reply (ref) and looks the quote up with quoteOf, so the quote always shows the original's current state; nothing is copied into the reply.
Which kinds of quote are there?
Four: a short text, a long text cut to two lines, a photo with a drawn thumbnail and the word "Photo", and a deleted original, which is not a button and says "Original message was deleted". The thread has all four, so each can be seen without any action.
What does a reply to a reply quote?
Only the message it answers. The quote shows that message's own text, never its quote, so chains do not nest. The third reply in the thread answers the second one, and its quote shows the second one's words.
How does the jump work?
It scrolls the log, never the page, so the original sits about a third from the top, rings it for a moment and focuses it. With reduced motion the ring stays until the next jump. The quote is a real button with the hidden words "Jump to the message from" before the sender.
How do I reply?
Open More on a message (it shows on hover and focus, and always on a touch screen) and choose Reply. The chip "Replying to Zelda" appears in space reserved beside the status line, focus moves to the composer, and your next message carries the quote. The chip's button cancels the reply. A deleted message has no menu.