# 对话标记文本

## 使用方法

存下来的纯文本里如果带着「标记的值」，用 `ChatTokenizedText` 就能在消息里把它们显示成行内徽章，或者显示成你自己画的内容。没匹配上的文字原样保留；标记的值是空字符串时不参与匹配，所以渲染总能收尾。

文字写在默认插槽里。要直接传一个字符串时，用 `text` 属性也一样；两个都写以属性为准。每个标记的 `value` 按字面匹配，所以输入框触发器返回的那组标记对象可以原样搬过来复用。普通标记渲染成 `Badge`；带 `render` 函数的标记渲染成你自己的内容，那部分由你负责。

```vue
<script setup lang="ts">
import { ChatMessage, ChatMessageBubble, ChatTokenizedText } from '@astryx-vue/core/Chat'

const tokens = [
  { value: '@Cindy', label: '@Cindy', variant: 'blue' as const },
]
</script>

<template>
  <ChatMessage sender="user">
    <ChatMessageBubble>
      <ChatTokenizedText :tokens="tokens">
        Assign @Cindy as a reviewer.
      </ChatTokenizedText>
    </ChatMessageBubble>
  </ChatMessage>
</template>
```

### 结构

- **标记文本**: 行内的根元素。没匹配上的文字原样保留，样式挂在 chat-tokenized-text 上。
- **渲染出的标记**: 行内的标记内容。普通标记由 `Badge` 渲染，自定义标记由调用方渲染。

## 建议

| 建议 | 做法 |
| --- | --- |
| 推荐 | 输入框插入和消息渲染用同一份标记定义，存下来的值和看到的文字才不会对不上。 |
| 推荐 | 标记的值要非空、要稳定，这样每个定义都对得上真实存在的文字。 |
| 避免 | 用标记上的文字替代周围的正文。整句话按顺序读下来必须是通的。 |
| 避免 | 自定义标记里塞交互或无障碍行为。那部分内容归调用方自己管。 |

## 示例

常见的用法和不同的状态。

### 基础

一句话里带 @ 提及标记。匹配到的部分换成对应的名字徽章。

```vue
<script setup lang="ts">
import type { ChatComposerToken } from '@astryx-vue/core/Chat'
import { ChatMessage, ChatMessageBubble, ChatMessageList, ChatTokenizedText } from '@astryx-vue/core/Chat'

const tokens: ChatComposerToken[] = [
  { value: '@Cindy', label: '@Cindy' },
  { value: '@Alex', label: '@Alex' },
]
</script>

<template>
  <ChatMessageList>
    <ChatMessage sender="user">
      <ChatMessageBubble>
        <ChatTokenizedText text="Assign @Cindy and @Alex as reviewers." :tokens="tokens" />
      </ChatMessageBubble>
    </ChatMessage>
  </ChatMessageList>
</template>
```

### 颜色

不同颜色的标记，用来区分人、缺陷和需求。蓝色给人，红色给缺陷，绿色给需求，一眼就能分出类别。

```vue
<script setup lang="ts">
import type { ChatComposerToken } from '@astryx-vue/core/Chat'
import { ChatMessage, ChatMessageBubble, ChatMessageList, ChatTokenizedText } from '@astryx-vue/core/Chat'

const tokens: ChatComposerToken[] = [
  { value: '@Cindy', label: '@Cindy', variant: 'blue' },
  { value: '#bug', label: '#bug', variant: 'red' },
  { value: '#feature', label: '#feature', variant: 'green' },
]
</script>

<template>
  <ChatMessageList>
    <ChatMessage sender="user">
      <ChatMessageBubble>
        <ChatTokenizedText text="@Cindy filed #bug and #feature for the sprint" :tokens="tokens" />
      </ChatMessageBubble>
    </ChatMessage>
  </ChatMessageList>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `tokens` | `ChatComposerToken[]` | — | 标记定义，类型跟输入框用的是同一个。每个非空的 `value` 按字面匹配。普通标记渲染成 `Badge`，带 `render` 的标记渲染成你自己的内容。 |
| `text` | `string` | — | 跟默认插槽一样，是消息文字，里面可能带着标记的值。没匹配上的部分原样输出。属性和插槽都写时，以属性为准。 |

## 插槽

- `default`：消息文字。这里只放纯文本，标记内容由 `tokens` 属性提供。没匹配上标记的部分原样输出。