shadcn.io is not affiliated with official shadcn/ui
Support Chat Widget Settings Block for Radix UI
A support chat widget settings panel built around a week of opening hours, with a Preview at slider across the week that flips a drawn chat bubble between the greeting and the offline message.
Installation
Overview
Say when the chat desk is in and what visitors are told when it is not, with this support chat widget settings panel for React with Radix UI. Seven rows, one for each day, each hold a Closed Switch and an opening and closing time in half hours from two Native Selects; a closing time that would come before the opening moves the other one and says so. A Slider named Preview at runs across the 336 half hours of the week, and the drawn chat bubble beside it shows what a visitor would see at that moment: the greeting and a typical reply time while someone is in, or the offline message and when the desk is next open. A greeting Input and an offline Textarea below the hours both show a character count. The action foot counts unsaved changes beside a Shine Button that saves them and an outline button that discards them. It's built from Switch, Native Select, Slider, Input, Textarea, Button, Shine Button and Guides, with a CSS entrance only. For a help desk, a shop or any team that is only there at some hours.
FAQ
What does the Preview at slider change?
Only the drawn bubble. The slider has 336 steps, one for every half hour from Monday 00:00, and it is not part of the saved settings. Wherever it rests, the bubble applies the rows above: inside a day's opening and closing times it shows the greeting and the typical reply time, outside them it shows the offline message and the next half hour the desk is in. Edit a row and the bubble follows without moving the slider.
How are the times held, and what are the limits?
In minutes from midnight, in steps of 30, so 09:00 is 540. Opening times run from 00:00 to 23:30 and closing times from 00:30 to 24:00. If you pick an opening at or after the closing time the closing moves to the next half hour, and if you pick a closing at or before the opening the opening moves to the half hour before it; the status line says which one moved. A Closed switch greys the times out and keeps them, so turning it off brings the old hours back.
Whose time zone are the hours in?
The hours are shown as plain clock times with no zone, because the block does not know the visitor's. In your app store the hours with the desk's zone, convert to the visitor's when you show whether someone is in, and decide what a holiday does. The typical reply time is a typed constant, not something measured.
What stays local, and how do I make it real?
Everything. Nobody is answering, Save keeps the hours in this page's state and says so, and the bubble is a drawing. To make it real, save the hours, greeting and offline message with the site, have your chat loader read them to decide which text to show, and compute whether someone is in on the server so every visitor sees the same answer.
How does it work by keyboard and on a phone?
Every control is named for its day, for example Closed all day on Monday, and the slider reads its value as words such as Wednesday 14:00 and moves with the arrow keys and Home and End. The status line is a polite live region. On a phone each day takes two lines, the bubble sits under the slider and the action foot is pinned to the bottom of the screen. The day names under the track are decoration and hidden from assistive technology.