# 对话标签元素

## 使用方法

在可以编辑的输入区之外，单独画出一个小标签。它把「徽标配置」或者「自己渲染的内容」包进一个带 `data-astryx-token` 的 `span` 里，这样标签的值能被正确序列化，长得也跟输入区里面的标签一模一样。

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

## 示例

常见的用法、变化和状态。

### ChatComposerTokenElement — 徽标标签

放在编辑器外面的徽标标签。每一个都保留着提交时会序列化出来的值，所以从草稿里复制出来的标签、和别处画出来的标签，读起来是同一个东西。

```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 — 自定义标签

需要自己的结构时，用自定义渲染。提交进草稿的仍然是它的值。

```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>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `token` | `ChatComposerToken` | — | 必填。要么是徽标配置 `{ value, label?, variant?, icon? }`，要么是自定义标签 `{ value, render }`。`value` 就是草稿里序列化出来的内容。 |

标签本身是一个带 `data-astryx-token`、`contenteditable="false"` 的 `span`，所以它能挨着序列化的草稿放着，却不会被敲进去。徽标标签画的是一个 `Badge`；`icon` 可以填内置图形名（比如 `check`），也可以填 Iconify 的 id（比如 `carbon:user`）。自定义标签画的就是 `render` 返回的内容。