shadcn.io is not affiliated with official shadcn/ui
Private Notes Comments Block for Solid
A support ticket where a composer switch chooses Reply to customer or Internal note, notes carry a lock and a dotted rail, and Preview as customer hides every note and limits the composer to Reply.
Installation
Overview
Let a support team talk to each other and to the customer in one thread, with this private notes comment thread for Solid with Ark UI. A compact header names the ticket and holds a "Preview as customer" Switch. The frame holds the conversation in a labelled scroll region that keeps its height: a customer's question, two replies and two internal notes. A note is drawn so it can never pass for a reply: a muted band, a dotted rail at the start, a lock glyph and a "Team only" chip. Under the thread a Segment Group chooses "Reply to customer" or "Internal note" for the Textarea below it, and the button and label follow. Turn on the preview and every note disappears, a line says how many are hidden, and the composer is limited to Reply. Ctrl or ⌘ + Enter posts, a problem line is always in place and a polite status line says what changed. It is built from Segment Group, Switch, Textarea, Field, Badge, Avatar, Kbd, Shine Button and Guides, with a CSS entrance only. For help desks, shared inboxes and any thread where the team needs a private margin.
FAQ
How do I fill it with my own ticket?
Edit START and ME. Each message has an id, who wrote it, their initials and tag, an ISO at, its body and a kind: customer, reply or note. The preview filters out every note, the hidden count and the heading count are worked out from the list, and posting adds a message of the kind the composer is set to.
What stays local, and how do I make it real?
Posting and the preview live in the page, and the status line says "Reply posted in this demo. Nothing was sent." In a real app the server stores the kind of each message and never includes notes in anything it sends to the customer: the preview switch only shows what the customer view would be. Never rely on hiding notes in the browser, and send the customer's copy by email or the portal from your server.
How does it stop a note going to the customer by mistake?
The mode is always visible in the control, the textarea label and placeholder change with it ("Write to Kit" or "Only your team will read this"), and the button reads "Send reply" or "Add note". The posted message keeps its lock, band and chip. The preview switch is the last check before sending: it limits the composer to Reply.
Is it accessible?
Notes are marked in words ("Team only") as well as by their band, rail and lock glyph, never by colour alone. The mode control is a labelled group, the switch is named, the thread is a region you can scroll with the keyboard, and the status line is present from load and is read out politely. The line that reports hidden notes keeps its space and is hidden from screen readers when the preview is off.