Audio tagsPro

Expressive tags such as [whispers] and [laughs] drawn as chips inside the script text, with a menu that opens on [ and filters as you type. Tags the model does not know are marked.

Markdown

On this page

ProTags drawn as chips inside the script. Type [ for the menu; the read only version below is how a take shows it.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/audio-tags

Usage

tsx

import { AudioTagsEditor, AudioTagText } from "@/components/ui/chatcn/pro/audio-tags"

<AudioTagsEditor value={script} onValueChange={setScript} tags={modelTags} />
<AudioTagText text={take.text} />

It is a real textarea with the chips drawn underneath, in the same font and wrapping: selection, undo, spell check, IME and paste behave as in any field, and the stored value is plain text with brackets. AudioTagText renders the same chips read only. parseScript, stripTags and tagQueryAt are exported from @/lib/chatcn-pro-speech for servers and counters.

Examples

States

ProEmpty, a tag the model does not know and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`string`	Plain text with `[tags]`
`tags`	`AudioTagInfo[]`	Tag, description and group. Default delivery, reaction and pacing tags
`size`	`"sm" \| "md" \| "lg"`	14, 15 or 16 px. Default md
`minRows`	`number`	Default 3
`surface`	`boolean`	Draw the field's card and focus ring. Default true
`labels`	`Partial<AudioTagsLabels>`	Every string the editor shows or announces, for translation
Textarea props		`placeholder`, `disabled`, `readOnly`, `onKeyDown`, `ref` and the rest pass through

Keyboard

Key	Action
`[`	Open the tag menu
`↑` `↓`	Move through tags
`Enter` or `Tab`	Insert the tag and a space
`Esc`	Close the menu and keep typing

Accessibility

The field is a combobox with a listbox of tags; the highlighted tag is its active descendant, so focus never leaves the text.
Inserted tags are announced. Unknown tags carry a title that says the voice may read them aloud.

Motion

None. The menu opens from typing, so it appears at once, and chips never change the width of the text.