shadcn.io is not affiliated with official shadcn/ui
New Message Banner Chat Block for Ark UI
A 24-message thread that opens scrolled up at an unread divider, with a pill that counts messages arriving out of sight, jumps to the first new one and clears, and a demo button that receives two at a time.
Installation
Overview
Keep a reader's place when new messages arrive, with this new message banner chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Backscroll, a busy channel app: 24 typed messages with Fenella Strand about an off-site, under "Yesterday" and "Today" labels, opened scrolled up from the end at an unread divider that says "2 new messages". While you are more than 80 pixels above the end, new messages do not move the log. A pill floats at the log's bottom end with a down arrow and the count; pressing it scrolls to the first new message, rings it for a moment, moves focus to it and clears the count. Scroll to the end yourself and it clears too, and at the end new messages simply scroll in. Send, or the quiet "Receive 2 messages" demo button, brings a two-line sample reply; sending also takes you to the end. It's built from Message, Bubble, Avatar, Textarea, Button, the Shine Button and Guides, with CSS only. For channels, support queues and any log read while it grows.
FAQ
What stays local, and how do I make it real?
The thread, the unread divider and the sample replies are typed in this file, and nothing is sent. To wire it for real, append messages from your socket with the same receive function: it reads whether the log is at its end, marks the first unread message and counts the rest. Keep seen as the number of messages the reader has seen, and save it to your backend as the read marker.
When does the pill show, and what does it do?
It shows while you are more than 80 pixels from the end of the log and at least one message has arrived that you haven't seen. It counts them ("1 new message", "2 new messages"), and pressing it sets the log's scrollTop to the first unseen message (never scrollIntoView, which would move the page), focuses that message and rings it for 1.2 seconds. It floats over the log, so showing or hiding it never moves a line.
Is the new count announced?
Once, in the polite status line under the composer ("2 new messages. Press the pill to jump."), when messages arrive out of sight. The pill itself is a button with its count in its name, and the log is a labelled role="log" region that is focusable for the keyboard.
What does the divider mean, and does it go away?
It marks the first message you hadn't read when the thread opened, and counts the messages from there to the end. It stays where it is as a landmark while you read; the pill is the live count.