shadcn.io is not affiliated with official shadcn/ui
Auto Reply Chat Block for React
A shop chat with a demo switch for offline hours: your first message gets one automatic reply with the opening hours in a data list, a second gets none, and online a person answers.
Installation
Overview
Say when you will answer, and mean it, with this auto reply chat for React with Base UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Kettlecombe, a ceramics shop, on a Saturday afternoon. A Switch in the top bar, labelled "Simulate: team is offline" so nobody mistakes it for a setting, decides who answers. Offline, your first message gets one instant reply marked with an "Automatic reply" Badge: it confirms receipt, says "We reply within 4 business hours" and shows the opening hours in a Data List with "Closed now, opens Mon 09:00" beside a hollow ring. A second message gets no second automatic reply, and the status line says so. Switch it off and a person, Pru Danforth, replies after a typing line. The composer's Shine Button, the only colored control, sends what you type; Enter sends and Shift and Enter add a line. Rows are Message and Bubble parts. The frame is ruled by Guides, and everything moves with CSS only. A start for a small team's out-of-hours chat.
FAQ
What stays in the page, and how do I make it real?
Everything. The switch is a demo control, the hours and replies are typed in the file, and nothing is sent. To wire it for real, drop the switch, read your team's presence and opening hours from your service, and send the automatic reply from your server the first time a visitor writes outside them.
Why does it reply only once?
An automatic reply is a receipt, not a conversation. Sending it again for each message would be noise, so the file remembers that one has been sent and the status line says "Automatic reply already sent" instead. Flip the switch off and on again: the memory stays, as it would for a real visitor.
Where do the hours come from?
A typed list in the file, shown as label and value pairs. The "Closed now" line is a typed phrase for the demo's fixed Saturday; in your app compute it from the visitor's clock or yours and write the next opening in words, so it never relies on a color or a glyph alone.
How is away shown without motion?
The source pulsed an away badge. Here the top bar draws a hollow ring against the filled dot of an online team, and says "Away, back Mon 09:00" in words. Nothing loops.