shadcn.io is not affiliated with official shadcn/ui
Privacy Desk Messages Account Block for React Aria
A filterable list of five messages to a privacy desk (Question, Request or Report, with state and last reply day) beside the chosen thread as a conversation, a reply box that appends locally, Close thread, and a derived count of messages and open ones.
Installation
Overview
Let people see what they asked a company's privacy desk and what it answered, and reply in place, with this message history panel for React with React Aria. A hairline frame with a plus mark on each corner holds a list of five threads beside the chosen one. The header has a Toggle Group that filters by state, All, Open, Answered or Closed, each with its count. In the list every thread shows its kind (Question, Request or Report), its subject, its state in words and the day of the last reply. The thread opens at the end of the row as a conversation, built from Message, the desk's replies on one side and yours on the other, over a Textarea and a Shine Button that adds your reply. Close thread closes the conversation, and a closed thread takes no reply. A line at the foot counts from the threads, "5 messages, 1 open". It's built from Toggle Group, Message, Textarea, Badge, Empty, Button, Shine Button and Guides, with a CSS entrance only. For the privacy or help page of a product that keeps a record of what people asked.
FAQ
How do I change the threads and the desk's replies?
Edit THREADS at the top: each thread has an id, a kind, a subject, a state and its lines, each with a day, who wrote it and the words. The state of the list, the counts in the filter and the foot line are all worked out from those. AS_OF is the day a new reply is stamped with.
What does Send reply do?
It adds your message to the thread, stamped with the as-of day, clears the box and, on an answered thread, turns it Open again because the desk now owes a reply. Pressing it with an empty box does nothing but say "Write a reply first." and put the focus back in the box. A closed thread disables the box and says why in its placeholder.
Why do the list and the conversation never change height?
The list and the conversation are each a fixed height with their own scroll: a long conversation scrolls to its newest message when a thread opens or a reply is added, and a filter with no thread shows the Empty state in the same box. So filtering, closing and replying never move the page, and the reply box stays where it was.
What stays local, and how do I make it real?
All of it. Replies and closes change this page's state and say so in the foot ("Reply added in this demo. Nothing was sent."); no desk exists. To make it real, post the reply from the send handler, load the threads from your API and let the desk's answers arrive from there, keeping the same four states.
Is it accessible, and how does it look on a phone?
The filter is a group with pressed states, the chosen thread is marked aria-current, the conversation is a labelled scroll region you can focus and read with the arrow keys, each message names who wrote it and when, and the foot is a polite live region. State is a dot and a word, never colour alone. On a phone the list sits above the conversation, each in its own scroll area, and the filter wraps under the heading.