Conversation Marker
A low-emphasis divider and status line that sits between messages in a chat thread. Three semantic variants cover date and unread separators, system notes such as model changes, and live status lines like a typing indicator — each with the right ARIA role.
Pro features
What the Pro version adds to this component.
Three Semantic Variants
One component covers separators, system notes, and live status lines — each with a layout and ARIA role tuned to its meaning
Labeled Separators
A centered label between two rules for date breaks and unread dividers, or a plain full-width line when the label is omitted
System Notes
A centered pill with role="note" for contextual events such as conversation start, model changes, and tool calls
Live Status Line
An inline line with aria-live="polite" that announces transient state like a typing or reconnecting indicator
Icon Slot
Drop in any Lucide glyph, animated dots, or spinner as a decorative, aria-hidden leading icon on any variant
Semantic and Accessible
Correct roles out of the box with a data-variant hook, token-based styling, and every ARIA attribute overridable via props
Installation
Install via CLI
npx @moontra/moonui-cli add conversation-markerUsage
Examples
Separator
The default variant draws a thin rule on each side of a centered label — ideal for date breaks like "Today" or an unread marker like "New messages" placed between messages. Omit the label for a plain full-width divider.
System Note
The system variant renders a centered pill for contextual events — "Conversation started", "Model switched to GPT-4", or a tool call. Pass an icon for a leading glyph. Its role="note" marks it as an auxiliary annotation rather than a message.
Live Status
The status variant is an inline line for transient state such as "Assistant is typing…". Its root carries aria-live="polite", so screen readers announce the update without interrupting the current reading. Pass any node as the icon — here an animated set of dots.
Full Conversation Flow
All three variants working together in one realistic AI-chat thread: a system note opens the conversation, a separator marks the day, messages flow between the user and the assistant, another system note records a model switch, and a live status line closes it while the assistant responds.