SystemMessage

Centered system-event rows and consumer-owned adjacent-run grouping.

Preview#

2:16 PM📦 Atlas archived this channel

2:16 PM@hermes joined this channel.

2:16 PM✅ Atlas moved #41 "Release review checklist" to Done

Anatomy#

import {
  SystemMessage,
  SystemMessageContent,
  SystemMessageGroup,
  SystemMessageGroupChevron,
  SystemMessageGroupDisclosure,
  SystemMessageGroupHeader,
  SystemMessageGroupPanel,
  SystemMessageGroupSummary,
  SystemMessageTime,
} from "raft-ui";

<SystemMessage>
  <SystemMessageTime />
  <SystemMessageContent>{message.content}</SystemMessageContent>
</SystemMessage>

<SystemMessageGroup open={open} onOpenChange={setOpen}>
  <SystemMessageGroupHeader>
    <SystemMessageGroupDisclosure>
      <SystemMessageGroupSummary>{summary}</SystemMessageGroupSummary>
      <SystemMessageGroupChevron />
    </SystemMessageGroupDisclosure>
  </SystemMessageGroupHeader>
  <SystemMessageGroupPanel>
    <SystemMessage>...</SystemMessage>
  </SystemMessageGroupPanel>
</SystemMessageGroup>

Usage#

Grouped updates#

Grouped generic#

API#WIP

SystemMessage#

...props

useRender.ComponentProps<"div">

Centered system row for product-authored system events.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"div">	—	Centered system row for product-authored system events.

SystemMessageTime#

...props

useRender.ComponentProps<"span">

Inline timestamp shown before the system copy.

Prop	Type	Default	Description
`...props`	useRender.ComponentProps<"span">	—	Inline timestamp shown before the system copy.

SystemMessageContent#

title

string

Tooltip title. Defaults to the string children when present.

...props

useRender.ComponentProps<"span">

System event content slot. Product parsing and copy stay consumer-owned.

Prop	Type	Default	Description
`title`	string	—	Tooltip title. Defaults to the string children when present.
`...props`	useRender.ComponentProps<"span">	—	System event content slot. Product parsing and copy stay consumer-owned.

SystemMessageGroup#

open

boolean

Controlled open state for the group.

defaultOpen

boolean

Default open state for the uncontrolled group.

onOpenChange

Collapsible.Root.Props['onOpenChange']

Callback fired when the group open state changes.

...props

Base UI Collapsible.Root.Props

Base UI Collapsible root for an adjacent-run system-message group.

Prop	Type	Default	Description
`open`	boolean	—	Controlled open state for the group.
`defaultOpen`	boolean	—	Default open state for the uncontrolled group.
`onOpenChange`	Collapsible.Root.Props['onOpenChange']	—	Callback fired when the group open state changes.
`...props`	Base UI Collapsible.Root.Props	—	Base UI Collapsible root for an adjacent-run system-message group.