shadcn.io is not affiliated with official shadcn/ui
No Chat History Empty State Block for React
An AI assistant's empty history in a framed window: the sidebar says No chats yet, a drawing of three stacked speech cards and four prompt chips lead to a log and composer with sample replies.
Installation
Overview
Show an assistant before its first chat as the app it is about to become, with this no chat history empty state for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Ponderling, an AI writing helper: the catalog Sidebar is the history rail and says "No chats yet" (collapsed it is an icon rail with tooltips, on a phone a sheet), and the page has a top bar with the open chat's name and a New chat button. While the chat is empty the log holds a drawing of three isometric speech cards stacked, the top one only dashed, and four prompt chips; a chip writes its prompt into the composer and turns the top card solid. The composer's Shine Button, the only colored control, sends: your message appears as a Message bubble, a Typing Indicator Text shows for a moment, and a reply from a typed script follows. The rail gains the chat, titled from your first words. The frame is ruled by Guides, and everything moves with CSS only. For the first screen of an assistant, a chatbot or any chat product.
FAQ
What stays in the page, and how do I make it real?
Everything. No model is called and nothing leaves the page: replies come from a short typed script, in this file, one for each of the four prompts and two general ones for anything else, and the status line under the composer says so. To wire it for real, send the conversation to your model where the code says so, stream the reply into the log, and keep each chat's messages under its own id.
How does the history work?
The first message creates a chat, titled from its first five words, and adds it to the rail. Choosing a chat in the rail opens its messages, New chat starts an empty one without losing the others, and the open chat is marked in the rail. Chats live in the page's state, so a reload empties the history.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader. The send button stays quiet while the field is empty or a reply is on its way, and says so if pressed. Focus stays in the field after sending, and the log scrolls to the newest message.
Is it usable with a keyboard and a screen reader?
Tab runs through the rail, the top bar, the log and the composer; the log is a focusable region that scrolls and is announced as a log, so new messages are read out. The rail's links are named with the chat's title and the drawing is hidden from assistive technology.
How does it look on a phone?
The sidebar becomes a sheet that the top bar's trigger opens, and choosing a chat closes it with focus back on the trigger. The prompt chips are two across, the composer keeps its place at the foot, and the window keeps its height; only the log scrolls. Nothing scrolls sideways, even at 320 px wide.
Related
- Pro
Email Client Sidebar
App contentA mail client in a fixed-height window: mailboxes and labels whose counts follow the mail you file, a searchable message list beside the open message, and Compose for a local draft.
- Pro
No Conversations Empty State
Inbox and chatA support inbox with no conversations: two drawn speech bubbles, one dashed, a list with one dashed place, and a card where you pick a customer and write a first message that becomes a bubble in a thread.
- Pro
No Files Empty State
Files and docsA file manager's empty All files page in a framed window: the catalog sidebar with its counts, a large dashed drop zone with a drawn filing drawer, and a table that lists the files you choose or drop.
- Pro
No Channels Empty State
Inbox and chatA team chat before the team joins a channel: the browse dialog shown open in place over a drawn chat shell, with a hash sign, a search that filters five channels, a Join toggle on each and one Join button that counts them.
- Pro
No Mentions Empty State
Inbox and chatA work chat's mentions popover shown open in place: a drawn list with a dashed row, a Try it field where typing @ opens five teammates, and a Post button that adds a row naming who was tagged.
- Pro
No Messages Empty State
Inbox and chatA mail app's empty inbox: tabs with their counts, a drawn letter tray with a dashed envelope, and a Compose button, or the C key, that opens a dialog whose Send fills the Sent tab.