Astryx Design System

Chat Message Metadata@astryxdesign/core v0.0.15 · ChatMessageMetadata

Usage

Composable metadata row for chat messages. Renders timestamp, footer content, and delivery status in a single row. Direction reverses for user sender. Renders nothing if all props are empty.

ts
import {ChatMessageMetadata} from '@astryxdesign/core/Chat'

Examples

Common configurations, variations, and states.

ChatMessageMetadata — Footer Actions

Assistant message with footer actions: copy, retry, thumbs up/down, and model label. Use for AI responses that need feedback or utility controls.

ChatMessageMetadata — Status

All 5 delivery statuses (sending, sent, delivered, read, and error), each with a timestamp. Use to show message delivery progress or surface failures.

ChatMessageMetadata — Timestamps

Timestamp-only metadata on user and assistant messages. Supports absolute time and relative formats via Timestamp.