# Chat System Message

## Usage

Use ChatSystemMessage for concise, non-sender content inside a chat transcript. Choose the default variant for factual status notices and the divider variant for date or section breaks. Long default content wraps within the available width. The component exposes status semantics and the divider branch includes a labelled separator.

The row is `role="status"`, so a change here is announced without moving focus. Text goes in the default slot and is required. The `icon` slot renders before the text in the default variant; the divider variant renders a labelled `Divider` and ignores the icon.

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

### Anatomy

- **System message**: The noninteractive status row that carries the chat-system-message theme target.
- **Content**: The concise caller-provided message or divider label.
- **Icon content**: Rendered before the message in the default variant; the divider variant currently does not render it.
- **Divider**: A labelled horizontal `Divider` rendered by the divider variant.

## Best practices

| Guidance | Practices |
| --- | --- |
| Do | Keep the visible message concise and self-contained so it remains understandable without an icon. |
| Do | Use the divider variant for temporal or section boundaries and the default variant for factual status notices. |
| Don't | Use ChatSystemMessage for sender-authored content; use ChatMessage and ChatMessageBubble instead. |
| Don't | Use caller-provided icon artwork as the only source of meaning; the visible message must carry the same information. |

## Examples

Common configurations, variations, and states.

### Icon

System messages with a leading icon that reinforces the message type. Use icons to help users scan and identify message categories at a glance.

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

### Status Updates

Realistic status messages in a conversation flow showing membership changes, timestamps, and resolution notices.

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

### Variants

Default and divider variants side by side. Use default for inline status updates and divider for date separators or section breaks.

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `'default' \| 'divider'` | `'default'` | `'default'` renders a centered line. `'divider'` draws a rule on each side with the text as its label, for date separators and section breaks. |

## Slots

- `default`: the message text, or the divider label. Required.
- `icon`: icon before the text. Ignored for the divider variant. Wrap it in `Icon` for consistent sizing.