Usage

Renders a single token chip outside the contentEditable input. Wraps a badge config or custom render function in the correct data-astryx-token span so the token serializes properly and stays visually consistent with tokens inside the composer.

import { ChatComposerTokenElement } from '@astryx-vue/core/Chat'

Examples

Common configurations, variations, and states.

ChatComposerTokenElement — Badge tokens

Cindy Zhang/summarize#design-systemDone

Badge tokens outside the editor. Each one keeps the value the composer would serialize, so a chip copied out of the draft and a chip rendered elsewhere read the same.

ChatComposerTokenElement — Custom tokens

design-spec.pdfAda Lovelace

Custom rendering for a chip that needs its own markup. The value is still what goes into the submitted draft.