# 对话系统消息

## 使用方法

`ChatSystemMessage` 用在对话里放「不是某个人说的话」那一类内容：谁进群了、谁退群了、话题换了、今天几号。要陈述事实就用 `default`，要分隔日期或段落就用 `divider`。`default` 的长文本会在可用宽度里换行。整行带状态语义，`divider` 那一支还带一条有文字标签的分隔线。

这一行是 `role="status"`，所以内容变了读屏会播报，但焦点不动。文字放在默认插槽里，必填。`icon` 插槽的内容在 `default` 里排在文字前面；`divider` 渲染的是一条带标签的 `Divider`，不看图标。

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

<template>
  <ChatSystemMessage>Alex joined the conversation</ChatSystemMessage>
  <ChatSystemMessage variant="divider">
    March 15, 2026
  </ChatSystemMessage>
</template>
```

### 结构

- **系统消息**: 一行不可交互的状态文字，样式挂在 chat-system-message 上。
- **内容**: 简短的消息文字，或者分隔线上的标签，由调用方给。
- **图标内容**: 在 default 变体里排在文字前面；divider 变体不渲染它。
- **分隔线**: divider 变体渲染的一条带标签的横向 `Divider`。

## 建议

| 建议 | 做法 |
| --- | --- |
| 推荐 | 文字写短、写全，没有图标也能看懂。 |
| 推荐 | 日期、段落分界用 `divider`；陈述状态用 `default`。 |
| 避免 | 拿它代替某个人说的话。那种内容用 `ChatMessage` 和 `ChatMessageBubble`。 |
| 避免 | 只靠图标传达意思。文字本身要把同样的信息说清楚。 |

## 示例

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

### 图标

每条系统消息前面带一个图标，帮忙说明这是哪一类。扫一眼就能认出是进群、加密还是校验通过。

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

<template>
  <ChatMessageList>
    <p class="chat-preview__caption">
      {{ 'Icons reinforce the message type' }}
    </p>
    <ChatSystemMessage>
      <template #icon>
        <span class="i-carbon-user-follow" style="width: 14px; height: 14px" />
      </template>
      {{ 'Jordan was added to the conversation' }}
    </ChatSystemMessage>
    <ChatSystemMessage>
      <template #icon>
        <span class="i-carbon-locked" style="width: 14px; height: 14px" />
      </template>
      {{ 'Messages are end-to-end encrypted' }}
    </ChatSystemMessage>
    <ChatSystemMessage>
      <template #icon>
        <span class="i-carbon-renew" style="width: 14px; height: 14px" />
      </template>
      {{ 'Agent is generating a response…' }}
    </ChatSystemMessage>
    <ChatSystemMessage>
      <template #icon>
        <span class="i-carbon-checkmark" style="width: 14px; height: 14px" />
      </template>
      {{ 'Conversation verified by admin' }}
    </ChatSystemMessage>
  </ChatMessageList>
</template>
```

### 状态更新

一段对话里真实的系统消息：成员进出、日期分界，还有解决提示。

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

<template>
  <ChatMessageList>
    <ChatSystemMessage variant="divider">
      {{ 'March 14, 2026' }}
    </ChatSystemMessage>
    <ChatSystemMessage>
      <template #icon>
        <span class="i-heroicons-user-plus" style="width: 20px; height: 20px" />
      </template>
      {{ 'Sarah Chen joined the conversation' }}
    </ChatSystemMessage>
    <ChatSystemMessage>
      {{ 'Topic changed to "Q2 Launch Planning"' }}
    </ChatSystemMessage>
    <ChatSystemMessage variant="divider">
      {{ 'March 15, 2026' }}
    </ChatSystemMessage>
    <ChatSystemMessage>
      <template #icon>
        <span class="i-heroicons-user-minus" style="width: 20px; height: 20px" />
      </template>
      {{ 'Alex Rivera left the conversation' }}
    </ChatSystemMessage>
    <ChatSystemMessage variant="divider">
      {{ 'Today' }}
    </ChatSystemMessage>
    <ChatSystemMessage>
      <template #icon>
        <span class="i-heroicons-check-circle" style="width: 20px; height: 20px" />
      </template>
      {{ 'Conversation marked as resolved' }}
    </ChatSystemMessage>
  </ChatMessageList>
</template>
```

### 变体

default 和 divider 两种变体并排看。行内的状态提示用 default，日期分隔或分段用 divider。

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

<template>
  <div class="chat-preview-columns" style="grid-template-columns: repeat(2, minmax(0, 1fr));">
    <div>
      <p class="chat-preview__caption">
        {{ 'Default' }}
      </p>
      <ChatMessageList class="chat-preview-pane">
        <ChatSystemMessage>
          {{ 'Alex joined the conversation' }}
        </ChatSystemMessage>
        <ChatSystemMessage>
          {{ 'Conversation marked as resolved' }}
        </ChatSystemMessage>
      </ChatMessageList>
    </div>
    <div>
      <p class="chat-preview__caption">
        {{ 'Divider' }}
      </p>
      <ChatMessageList class="chat-preview-pane">
        <ChatSystemMessage variant="divider">
          {{ 'March 15, 2026' }}
        </ChatSystemMessage>
        <ChatSystemMessage variant="divider">
          {{ 'Today' }}
        </ChatSystemMessage>
      </ChatMessageList>
    </div>
  </div>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `variant` | `'default' \| 'divider'` | `'default'` | `'default'` 居中显示一行文字。`'divider'` 两侧各画一条线，文字放在中间当标签，用来分隔日期或段落。 |

## 插槽

- `default`：消息文字，或者分隔线上的标签。必填。
- `icon`：文字前面的图标。`divider` 变体不用它。想让它大小一致，就套一层 `Icon`。