# Chat Composer Token Element

## 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.

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

## Examples

Common configurations, variations, and states.

### ChatComposerTokenElement — Badge tokens

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.

```vue
<script setup lang="ts">
import type { ChatComposerToken } from '@astryx-vue/core/Chat'
import { ChatComposerTokenElement } from '@astryx-vue/core/Chat'
import { HStack } from '@astryx-vue/core/Stack'

const tokens: ChatComposerToken[] = [
  { value: '@cindy', label: 'Cindy Zhang', variant: 'blue', icon: 'carbon:user' },
  { value: '/summarize', label: '/summarize', variant: 'yellow' },
  { value: '#design-system', label: '#design-system', variant: 'purple' },
  { value: 'done', label: 'Done', variant: 'success', icon: 'check' },
]
</script>

<template>
  <HStack align="center" :gap="2" wrap="wrap">
    <ChatComposerTokenElement
      v-for="token in tokens"
      :key="token.value"
      :token="token"
    />
  </HStack>
</template>
```

### ChatComposerTokenElement — Custom tokens

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

```vue
<script setup lang="ts">
import type { ChatComposerTokenCustom } from '@astryx-vue/core/Chat'
import { ChatComposerTokenElement } from '@astryx-vue/core/Chat'
import { HStack } from '@astryx-vue/core/Stack'
import { h } from 'vue'

const file: ChatComposerTokenCustom = {
  value: 'design-spec.pdf',
  render: () => h('span', { class: 'chat-preview__file' }, 'design-spec.pdf'),
}

const mention: ChatComposerTokenCustom = {
  value: '@ada',
  render: () => h('strong', null, 'Ada Lovelace'),
}
</script>

<template>
  <HStack align="center" :gap="2" wrap="wrap">
    <ChatComposerTokenElement :token="file" />
    <ChatComposerTokenElement :token="mention" />
  </HStack>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `token` | `ChatComposerToken` | — | Required. Either a badge config `{ value, label?, variant?, icon? }` or a custom token `{ value, render }`. `value` is what the draft serializes to. |

The chip is a `span` with `data-astryx-token` and `contenteditable="false"`, so it can sit next to a serialized draft without being typed into. A badge token draws a `Badge`; `icon` takes a built-in glyph name such as `check`, or an Iconify id such as `carbon:user`. A custom token draws whatever `render` returns.