Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Conversation Analytics AI Block for Ark UI

Four headline cells worked out from a sortable table of eight topics, a period select, a detail band with three recent conversations and a Helped, Mixed, Didn't help bar for the topic you press, and a Flag for review button.

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

Show what people ask an assistant and whether the answers helped, with this insights panel for React with Ark UI. Threadlens, a conversation insights desk, has a Select for the period and four headline cells in a hairline grid (conversations, median length in turns, resolved without a person, handed over) that are all worked out from the table under them. The table lists eight topics with a volume bar, a resolved share and median turns, and sorts by topic, volume or resolved. Pressing a topic opens a band with three recent conversations and a Helped, Mixed, Didn't help bar. The Shine Button Flag for review marks the topic. For support desks, product analytics and assistant teams.

FAQ

What stays in the page, and how do I make it real?

The topics, their 30-day volumes and the 24 sample conversations are typed in the file; the 7 and 90 day views scale the volumes. The headline cells, the bars, the weighted median and the shares are worked out from the table, so they cannot disagree with it. Flags live in this page only. To wire it for real, return the same rows from your conversation store and send the flag from its handler.

Where do the headline numbers come from?

Conversations is the sum of the volumes. Resolved without a person is the sum of each topic's resolved conversations over the total, rounded, and Handed over is what is left of 100. Median length is the median of the topics' median turns, each weighted by its volume.

What does pressing a topic do?

It marks the row as pressed, fills the band under the table with that topic's recent conversations and its three-part bar, and says the topic and its volume in the status line. The band keeps the same height whichever topic is open.

What does Flag for review do?

It adds a flag to the topic, shows a flag mark in its row and a count above the table, and the button becomes Remove flag. It is a local mark; to make it real, send it to your review queue.

How does it work from the keyboard?

The period is a select, the sort heads and the topic names are buttons, and the topic you open is announced by its pressed state and the status line.

How does it look on a phone?

The four headline cells form a two by two grid. The table keeps the topic and its volume and puts the resolved share under the topic name; the detail band stacks the bar under the conversations.

All 100 ai blocks