shadcn.io is not affiliated with official shadcn/ui
Recent Chats Popover Block for Ark UI
A Chats button on a workspace page that opens five recent conversations with presence and unread counts, where pressing a row opens a quick reply under it that moves the row to the top without opening the thread.
Installation
Overview
Reply from anywhere without opening a thread, with this recent chats popover for React with Ark UI. The page is Workspace in Nooklet, a workspace app, and its header has a "Chats" button that reads "Chats, 3 unread". The list is shown open in place under it: five rows, each an initials avatar with a presence glyph and word, a name, a one-line preview, a typed time and an unread count. Pressing a row opens a quick reply under it with an Input and a send button (a Collapsible, one open at a time); Enter sends, the preview becomes "You: …", its count clears, the row moves to the top and the status line says nothing left the page. "View all conversations" is a quiet button at the foot. The real button opens the same list as a non-modal Popover: Escape closes it and focus returns to the button. It's built from Popover, Collapsible, Avatar, Badge, Input and Guides. For headers, rails and any bell or inbox that should answer in place.
FAQ
Which part is only the preview's?
The list drawn open in place and the drawn page behind it. They exist so the block shows its open state without a click. In your app keep the Popover and its trigger, and delete the "in-place" state, the native dialog and the Escape effect.
What stays local, and how do I wire it to a real inbox?
The five chats, their previews and times are typed in START, and a reply only updates the list: nothing is sent. Send the reply to your chat service in reply, then update the row from the saved message. The unread total on the button is derived from the rows, so it follows.
Why isn't it a modal?
A list that hangs from a button shouldn't block the page, so it's a non-modal popover: nothing is trapped, the page stays readable, Escape closes it and focus goes back to the button. The drawn copy is a native non-modal dialog.
How do I use it with the keyboard?
Tab runs through the rows, Enter or Space opens a row's reply and moves focus to its field, Enter in the field sends and returns focus to the row, which has moved to the top. Presence and unread are words as well as glyphs and numbers, so nothing relies on colour.