shadcn.io is not affiliated with official shadcn/ui
Forwarded Message Chat Block for Vue
Three conversations and a Forward button on every message: a dialog with checkbox rows and a search field sends it to the chosen threads, each showing a Forwarded label and the original sender.
Installation
Overview
Send a message on to other conversations, with this forwarded message chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Relayquay, a messenger: Design crew, Ana Marchetti and Weekend plans in the start list, and the open thread of Message and Bubble rows beside it. Every message has a Forward button, shown on hover and focus and always on a touch screen, that opens a Dialog listing the other conversations as checkbox rows with a search field and a "Forward to 2" button. Confirming appends the message to each chosen thread with a Forwarded label, a corner arrow and the original sender, and raises that row's unread Badge; Weekend plans already holds one forwarded message. The thread's Shine Button sends typed text and gets a reply after a Typing Indicator Text. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for forwarding, sharing into chats or any app where one message lives in several threads.
FAQ
What stays in the page, and how do I make it real?
Everything. The three threads and the replies are typed at the top of this file, and forwarding copies the message into local state only; the foot says "Forwarded to 2 conversations" and nothing is sent. To make it real, call your API from confirm with the message id and the chosen conversation ids, and let the server add the forwarded copies and unread counts.
Where does the original sender come from?
From the message you forward: its sender and the name of the thread it sat in, such as "Basil Ormerod, Design crew". Forwarding a message that was already forwarded keeps the first origin rather than naming you, so a chain never loses where the words started.
How does the dialog work?
It is a real modal dialog: focus moves into it, Escape and Cancel close it and focus returns to the Forward button. The rows are native checkboxes in labelled rows, the search narrows them by name, and the confirm button stays quiet and says so if pressed with nothing chosen. The current conversation is not offered.
Why does the receiving row get an unread count?
It shows the whole effect in one glance: open the other thread and the forwarded message is there with its label, and its count clears. In your app that count would belong to the other person; here you play both sides.
Is it usable with a keyboard and a screen reader?
Each Forward button names its message ("Forward message from Basil Ormerod"), rows mark the open conversation with aria-current and say their unread count first, and the forwarded label is words plus a glyph. The log is a focusable region announced as a log.