Chat System Message
@astryxdesign/core v0.7.1 · ChatSystemMessage
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.
<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
| Element | Description |
|---|---|
| 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
Icons reinforce the message type
System messages with a leading icon that reinforces the message type. Use icons to help users scan and identify message categories at a glance.
Status Updates
Realistic status messages in a conversation flow showing membership changes, timestamps, and resolution notices.
Variants
Default
Divider
Default and divider variants side by side. Use default for inline status updates and divider for date separators or section breaks.