Astryx Chat System Message

Component

About

Centered system message for non-sender content like date separators, membership changes, and status notices. It is not a chat bubble; it has no avatar, no alignment, and no sender context. Use the divider variant for temporal breaks and default for inline status updates.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Astryx Chat System Message to your project and fits it to your theme.

Code

How Astryx Chat System Message is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {ChatMessageList, ChatSystemMessage} from '@/components/ui/astryx-chat-system-message';

function ChatSystemMessageShowcase() {
  return (
    <ChatMessageList>
      <ChatSystemMessage variant="divider">March 15, 2026</ChatSystemMessage>
      <ChatSystemMessage>Alex joined the conversation</ChatSystemMessage>
      <ChatSystemMessage>Agent is thinking…</ChatSystemMessage>
      <ChatSystemMessage variant="divider">Today</ChatSystemMessage>
      <ChatSystemMessage>Conversation marked as resolved</ChatSystemMessage>
    </ChatMessageList>
  );
}

export default function ChatSystemMessageShowcaseDemo() {
  return (
    <div
      data-astryx-theme="neutral"
      data-theme="light"
      style={{colorScheme: 'light', display: 'contents'}}>
      <ChatSystemMessageShowcase />
    </div>
  );
}