shadcn.io is not affiliated with official shadcn/ui
Offline Banner Chat Block for Vue
A crew thread you can read but not write when the connection drops: a held-height strip with a Pretend switch, a Last updated divider, a read-only field, and three missed messages arriving under it when you are back online.
Installation
Overview
Show what a chat does with no connection, with this offline banner chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Tinwire, a field-crew messenger, with a thread from Lorcan Dray. Under the top bar a strip that is always 2.5rem tall says "Connected" or "Offline. Showing messages from 09:41" and holds a "Pretend I'm offline" Switch (the block also listens for the browser's own offline and online events after it mounts). Offline, the log keeps what it had and ends with "Last updated 09:41", the field is read only and says "Reading offline", Send says why it can't, and the Search and Attach buttons are quiet with a Tooltip that says "Needs a connection". Switch it off and the divider becomes "While you were offline, 3 messages", the three messages land under it and the field opens with focus where it was. It's built from Message, Bubble, Avatar, Textarea, the Shine Button and Guides. For field apps, crew tools and any chat that has to be honest about being cut off.
FAQ
What stays local, and how do I make it real?
The switch and the three missed messages are the demo. In your app derive offline from navigator.onLine and the online and offline events (this block already listens for them), and append the missed messages from your sync call when the connection returns; the divider text comes from the time of the last message you had. The sample replies are typed in this file and nothing is sent.
Why doesn't it queue my messages while offline?
On purpose: this block is for reading. Offline the field is read only and Send explains why in the status line. A chat that queues what you write and sends it later is chat-connection-status; one that retries after a failure is chat-error-state.
Does anything move when the connection changes?
The strip is always 2.5rem tall, so the words and the switch change inside it without moving the log. The field and Send keep their size and only change their state, and the status line keeps its one line. The divider and the missed messages are new lines at the end of the log, which follows them.
How do screen readers and keyboards fare?
Switching is announced by the one polite status line ("Offline. You can read, not send." and "Back online. 3 new messages."). The disabled controls are aria-disabled, not removed, so they stay in the tab order and explain themselves: Send is tied to its reason with aria-describedby, and the Search and Attach tooltips open on focus as well as hover. Nothing changes state by colour: the offline strip uses a glyph and words.