shadcn.io is not affiliated with official shadcn/ui
Document Review Chat Block for Vue
A short launch brief with numbered comment markers beside the threads about it: press a marker to scroll to and ring its thread, resolve to hollow the marker, filter Open or Resolved, and see how many comments each version had open.
Installation
Overview
Review a document next to the conversation about it, with this document review chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Marginhall, a document review tool: a short launch brief sits in a pane at the start with a numbered marker at the end of four sentences, and the comment threads about it are chat beside it, built from Message and Bubble rows. Pressing a marker scrolls the thread to its comment and rings it; Resolve in a thread hollows its marker and says who resolved it, and an All, Open and Resolved Toggle Group filters the threads. A version select shows how many comments each version had open. The composer replies in the comment you last opened and gets a typed answer, and its Shine Button is the only colored control. On a phone a Document and Comments switch shows one pane at a time. It's the starting point for a review tool, an editorial desk or any chat anchored to a text.
FAQ
What stays in the page, and how do I make it real?
All of it. The brief, the threads, the resolved marks and the replies are typed in the file or kept in this page's state and are gone on reload; nothing is sent and no model runs, as the line under the composer says. To wire it for real, load the document and its comments from your store, write replies and Resolve where post and resolve run, and keep each marker's number equal to its thread.
How do the markers relate to the threads?
A marker is a button in the text that holds its comment number. Pressing it selects that thread, scrolls only the comment pane to it and gives it a ring that stays until you press another. The marker is filled while its comment is open and hollow once resolved, and its spoken name says "Comment 2, open" or "resolved", so the shape is never the only signal.
What do the filter and the version select do?
The filter keeps threads that are open, resolved or all of them; if none match, a line says so and the pane keeps its height. The select switches the sentence under the title between this version's open count, worked out from the threads, and how many were open on the earlier version when it went out, which is typed.
How is this different from the document Q and A block?
That block answers questions from a viewer and cites its pages. This one is people discussing a draft, with comments anchored to sentences and a resolved state that you control.
Is it usable with a keyboard and a screen reader?
Markers are real buttons with pressed state, the threads are a log region with a heading each, and Resolve is a button that switches between Resolve and Reopen. The status line says which comment opened and how many remain open. Scrolling uses the pane's own scroll position and never moves the page.