MoonUI

Conversation Marker

PRO

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

Unlock advanced capabilities with the Pro version

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

Usage

Pro Required
NV
Nova
Morning! Overnight jobs finished without errors.
08:02
MK
Perfect. Anything flagged for review?
08:05
NV
Nova
One slow query on the reports table — I opened a ticket.
09:41

Examples

Separator

PRO

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.

Pro Required
NV
Nova
Morning! Overnight jobs finished without errors.
08:02
MK
Perfect. Anything flagged for review?
08:05
NV
Nova
One slow query on the reports table — I opened a ticket.
09:41

System Note

PRO

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.

Pro Required
Conversation started
Can you help me refactor this component?
Model switched to GPT-4
Happy to help — paste the component and I will suggest edits.

Live Status

PRO

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.

Pro Required
Summarize the release notes for me.
Assistant is typing…

Full Conversation Flow

PRO

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.

Pro Required
Conversation started
MK
What changed in version 3.7?
10:12
NV
Nova
Dark mode ships by default and the table gained virtual scrolling.
10:12
Model switched to GPT-4
MK
Can you draft the migration guide too?
10:13
Assistant is typing…