shadcn.io is not affiliated with official shadcn/ui
Customer Support Chat Block for Vue
A support agent's thread in a framed window: bubbles grouped by sender with times and a delivery receipt, two reply buttons under her question, and a composer that gets a typed reply after a short typing line.
Installation
Overview
Show a customer talking to a support desk, with this customer support chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Cloudmere, a web hosting company: the top bar names the agent, Isolde Brackett, with "Support at Cloudmere, online" and the ticket number, and the log below it is a day label, a system line and three runs of Message and Bubble rows. Her name sits over the first bubble of a run and her initials and the time under the last, your newest message carries "Delivered", and her last question has two reply buttons: pressing "Yes, it works" or "Still broken" posts it as your message, spends the buttons and starts a Typing Indicator Text before her typed reply. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a help desk, a live chat widget or any two-person thread.
FAQ
What stays in the page, and how do I make it real?
Everything. The replies come from a short typed script in this file: two keyed on words such as "works" and "broken", then one fallback per message and a last line that says it was the last sample reply. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send post's text to your help desk where the code says so, append the agent's messages to the same list as they arrive, and keep the typing line for the moment she is writing.
How are messages grouped into runs?
One pure function, runsOf, marks every message as first or last of its run: a run continues while the sender stays the same and the next message is within five minutes. The name shows on the first bubble of her run, and the avatar, time and square tail corner on the last. Send two messages quickly and they join into one run; the data decides the picture. Times are typed in the list, so the demo reads the same on every visit.
How do the reply buttons work?
Each is a quick answer to her question. Pressing one posts its words as your message, exactly as if you had typed them, and the buttons turn quiet and disabled because the question has been answered; typing a reply yourself spends them too. Edit options on a message to change them, or leave it empty for none.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. The field grows with its content up to a limit. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden "Isolde Brackett, 09:41" or "You, 09:42". Delivery is a glyph and a word, never a color. Tab runs through the reply buttons, the field and Send; the avatars are hidden from assistive technology because the name is always in text.