Tone controlsPro

Tone and length for a rewrite on one pad, with a live preview of the rewritten passage, the word count change, the original one press away and Replace passage.

Markdown

On this page

ProA delay reply to a customer on a tone and length pad; drag and the passage follows, unwritten points take a moment once.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/tone-controls

Usage

tsx

import { ToneControls } from "@/components/ui/chatcn/pro/tone-controls"

<ToneControls
  original={reply}
  getRewrite={(v) => rewrites[v.tone]?.[v.length]}
  onValueChange={requestRewrite}
  onApply={replace}
  onCancel={close}
/>

Tone runs left to right and length bottom to top; every stop is a dot, darker once its rewrite is ready, so you can see which points swap instantly. getRewrite returns the text, { loading: true } or { error } for a point; request missing points in onValueChange. While a rewrite loads, the last text stays in place a gray step back instead of collapsing. Stops are configurable: three tones by default, five work as well.

Examples

States

ProRewriting, an error with a fix, disabled and five tone stops.

Props

Prop	Type	Notes
`original`	`string`	The passage being rewritten
`tones`, `lengths`	`string[]`	Stops on each axis; lengths shortest first
`getRewrite`	`(value) => string \| { loading } \| { error } \| undefined`	The preview at a point
`value`, `defaultValue`, `onValueChange`	`{ tone, length }`	Indexes into the stops
`onApply`, `onCancel`	`(text, value) => void`, `() => void`	Replace passage and Keep original
`onRetry`	`(value) => void`	Retry a point that failed
`disabled`	`boolean`	Locks the pad and Replace

Keyboard

Key	Action
Arrow left and right	Less or more of the tone axis
Arrow up and down	Longer or shorter
Home	Back to the center

Accessibility

The pad is a slider whose value text reads both axes, for example Formal, shorter.
The preview is a polite live region and is busy while a rewrite loads.
Show original is a pressed state button; the word count states the change in numbers.

Motion

Pointer moves glide the thumb over 180 ms on the kit's ease-out, moving only translate; arrow keys jump it with no animation. The preview swaps text with no fade.