Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Intercom Chat Activity Monitoring Block for Ark UI

Chats started in each of 24 hours split into answered within five minutes and later, a business-hours bracket, an after-hours switch that re-derives the reply rate, and median reply, active chats and agents online.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Check whether live chats get a first reply on time with this activity chart for React with Ark UI. It is Chatlantern, a live-chat support console of the kind Intercom is (all figures and the console are made up), drawing 24 hourly columns of chats started. Each column is split into chats answered within 5 minutes (solid) and chats that waited longer (hatched), and a bracket under the axis marks business hours, 09 to 18. A Switch includes or excludes the after-hours columns, and the header sentence and the median first reply are worked out again for what is included ("91% in business hours, 54% after hours" becomes a business-hours-only figure). A hidden range over the plot reads one hour, and a band of three figures gives the median first reply, the chats in progress and the agents online. Guides draw the frame and its bands; the entrance is CSS only. For support leads, shift planning and service-level reviews.

FAQ

How do I use my own chats?

Edit HOURS: 24 entries, each with the chats started in that hour and how many were answered within 5 minutes (fast). OPEN and CLOSE set business hours, and the percentages in the header are worked out from the entries. The medians, the active chats and the agents online are typed constants because a median cannot be rebuilt from counts.

What does the switch change?

With after hours on, every column counts and the header gives the rate for all chats, then business hours and after hours separately. With it off, the after-hours columns are drawn flat and grey, and the rate and the median cover business hours only. The panel keeps its height either way.

What is real here and what is typed?

All of it is typed. No chat tool is connected and the product name is made up; Intercom is named only as the kind of tool this shows. Feed the same shapes from your chat tool's reports.

Can I read it without colour?

Yes. Within five minutes is solid and later is hatched, the bracket is labelled, and a table of the 24 hours is available to screen readers beside the Hour slider.

How does it look on a phone?

The plot scrolls sideways in a named region with the evening in view, the reading sits under it and the three figures stack.

All 100 monitoring blocks