shadcn.io is not affiliated with official shadcn/ui
AI Summarization Comments Block for Ark UI
A twelve-comment thread beside a hand-written summary of what was decided, what is open and what happens next, with Brief and Detailed lengths and links that jump to the comment each point comes from.
Installation
Overview
Catch a busy lead up on a long thread, with this summary beside a discussion for React with Ark UI. One hairline frame holds the thread on one side and the summary on the other (above the thread on a phone). The thread is twelve numbered comments in a labelled scroll region that keeps its height. The summary groups its points under Decided, Open and Next, and every point ends in a link such as "comment 7" that scrolls the thread region to that comment, outlines it and moves focus there. A Segment Group switches between a Brief (three points) and a Detailed summary (six), and a Collapsible hides the summary. A status line at the foot says what a press did. It is built from Segment Group, Collapsible, Button styles, Avatar, Badge and Guides, with a CSS entrance only. For digests, handovers and review threads where the decision matters more than the discussion.
FAQ
Who wrote the summary?
Nobody generated it: the points are typed by hand in POINTS, and the block says "Written by hand for this demo." Each point has a kind (Decided, Open or Next), its text, the at id of the comment it comes from, and whether the Brief keeps it. To use a model, produce the same list of points from the thread (ask for the kind and the source comment of each) and keep the links: a summary whose claims cannot be checked against the comments is a summary people stop trusting.
What do the comment links do?
Pressing "comment 7" finds that comment's row in the thread region, sets the region's scrollTop to it (the page does not move), outlines the row and moves focus to it, so the next Tab continues from there. The status line says "Jumped to comment 7." The numbers are the comments' positions in the thread, worked out from the list.
How do I use my own thread?
Edit PEOPLE, THREAD and POINTS. A comment has an id, who wrote it, an ISO at and its body; a point refers to a comment id, so it keeps working when comments are added before it. Ages such as "3 d ago" come from AS_OF and the typed times, never from the clock.
What stays local?
The length, whether the summary is shown and which comment is outlined. Nothing is sent, copied or saved. In a real app, generate or edit the summary on the server when the thread changes, store it with the time and the number of comments it covers, and say when the summary is older than the latest comment.
Is it accessible?
The summary points sit in a list under a label for each group, and the links read "comment 7 in the thread". The thread and the summary are labelled regions you can reach with Tab and scroll with the arrow keys. The Brief and Detailed control is a labelled segmented control, and the status region is present from load and speaks each jump and each length change.