shadcn.io is not affiliated with official shadcn/ui
Tone Adjustment Comments Block for Radix UI
A draft reply shown Before and After in a chosen tone (Warmer, Shorter, More direct), with the changed phrases marked and a reason, then used in the reply box and posted.
Installation
Overview
Reword a reply before it goes out, with this tone adjuster for React with Radix UI. A compact header sits over one framed panel. A control band holds a native select of three drafts (a late report, design feedback, a missed meeting) and a segmented set of three tones: Warmer, Shorter and More direct. Under it two cells share a hairline: Before shows the draft with the phrases that change marked and struck through, and After shows the typed rewrite for that pair with its changes marked, plus a one-line reason ("Opens with thanks and turns two orders into a request"). Use this version copies the rewrite into the reply Textarea below, where you can edit it, and the one Shine Button posts it to the list of sent replies. Both cells keep their height when you change draft or tone. It is built from Native Select, Textarea, Button, Label, Avatar, Field, Kbd, Shine Button and Guides, with a CSS entrance only. For manager tools, support macros and any place where how it reads matters.
FAQ
Where do the rewrites come from?
They are typed. Each draft has three rewrites, and each rewrite is a list of replacement pairs (the exact phrase in the draft and what replaces it). The Before and After cells are both worked out from those pairs, so the marked phrases always match what changed. The block says so: rewrites are typed for this demo; no model.
How do I use a real model?
Return the same shape from your own function: a list of pairs for the draft and tone, plus a reason. Keep the marked-phrase cells, because showing exactly what changed is what makes a rewrite trustworthy. Validate that every from phrase appears in the draft before you show it; the cells skip pairs that do not match.
How do I add a tone or a draft?
Add a row to TONES for a tone, and give each draft in DRAFTS a rewrite with that tone name. For a new draft, give it an id, a label, the text and one rewrite per tone. Pairs are applied from the earliest match in the text, so list them in any order.
What stays local?
All of it. Posting adds your reply to the list in the page and says "Posted in this demo. Nothing was sent." To make it real, send the reply from post and keep the original draft if you want to show what was suggested.
Is it accessible?
The tone choice is a set of real radio buttons in a fieldset, so arrow keys move between them. Changes are marked with a background and a strike in Before and bold in After, never colour alone. The status line says when a version is placed in the reply, and the reply box can be reached and edited with the keyboard.