Span annotatorPro
Select spans in an output and tag them.
On this page
ProSelect words and tag them; two spans are already tagged.
Installation
Usage
import { SpanAnnotator } from "@/components/ui/chatcn/pro/span-annotator"
<SpanAnnotator text={output} tags={tags} annotations={marks} onAnnotationsChange={setMarks} />Each tag draws its own underline shape (wavy, solid, dotted, dashed) on a soft tint, so tags differ without hue. Selections trim spaces at their edges.
Examples
States
ProNothing tagged yet.
Props
| Prop | Type | Notes |
|---|---|---|
text | string | The output |
tags | { id, label, tone }[] | Tag set |
annotations, onAnnotationsChange | { id, start, end, tag }[] | Character offsets |
Accessibility
- Tag a whole sentence from the keyboard with the sentence picker; tagged spans carry their tag in hidden text.