Raft 设计系统
English

组件 · 消息

SystemMessage

An event line in a conversation — a date, a claim, a hand-off, a status change — set in Space Mono between hairlines, alone or collapsed into a group.

稳定也叫 Event line
import { SystemMessage } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

An event line: one centered line in the timeline that records something that happened, such as a date, "Bugen claimed #25" or a task moving to Done. It isn't a message: nobody wrote it, so it has no avatar or name. A run of event lines can collapse into one summary line.

system-message/compositions/preview

When to use

SituationUse
A date in the timelineSystemMessage
An action: someone claimed, handed off, finished or moved a task; joined or archived a placeSystemMessage
Several event lines in a rowSystemMessageGroup, collapsed to one summary
Something a person or an agent saidMessageItem
An agent's full history of actionsTimeline

Agents write their actions as event lines, not messages; see Hand-offs and approvals.

Anatomy

  • SystemMessage: the line, with a hairline on each side.
  • SystemMessageTime: when it happened. Optional.
  • SystemMessageContent: what happened. Required.

A group adds:

  • SystemMessageGroup: the collapsible group.
  • SystemMessageGroupHeader: the summary line, with hairlines on each side.
  • SystemMessageGroupDisclosure: the button that opens and closes the group, holding SystemMessageGroupSummary and SystemMessageGroupChevron.
  • SystemMessageGroupPanel: the event lines inside.

Variants

VariantUse for
A single lineOne event between messages
A group of updatesA run of task and system updates, summarized by count
system-message/compositions/grouped-updates
system-message/compositions/grouped-generic

Behavior

  • A line keeps one line: its content truncates, and the full text is in its title.
  • A single line is a turn of its own: it sits the message step, 16px, from the text above and below it, like a new sender line (Timeline rhythm). It keeps 12px above its text and 4px under it, the lead and row inset of a message row, so the next row's lead makes up the rest. A collapsed group's header keeps the same distances around its disclosure's text. Lines inside an open group sit closer together.
  • The group's chevron turns when the group opens.

Content

  • Name who did it, the verb and the item: "Bugen claimed #25", "Wug → Martin · review #25", "Martin moved #25 to Done".
  • Use teammate verbs and display names (Writing).
  • Don't start a line with an emoji: emoji are content, not icons (Iconography).
  • Summarize a group by count and kind, in sentence case: "3 updates: 2 task updates, 1 system message".

Accessibility

  • A single line is a plain div; it isn't interactive.
  • Render SystemMessageTime as a <time> element with dateTime, through render, so the time is machine-readable.
  • The group wraps Base UI Collapsible: the disclosure is its trigger button and carries aria-expanded. The summary text is its accessible name; the chevron is hidden.

Rules

  • Set event lines in Space Mono, text-mono-meta, in foreground-hint, centered between two line-hairline rules. Machines write them (Typography).

API

SystemMessage, SystemMessageContent

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

SystemMessageGroup

Prop类型默认值
defaultOpenWhether the collapsible panel is initially open.booleanfalse
disabledWhether the component should ignore user interaction.booleanfalse
onOpenChangeEvent handler called when the panel is opened or closed.(open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void
openWhether the collapsible panel is currently open.boolean
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

SystemMessageGroupChevron, SystemMessageGroupDisclosure, SystemMessageGroupHeader

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

SystemMessageGroupPanel

Prop类型默认值
hiddenUntilFoundAllows the browser's built-in page search to find and expand the panel contents.booleanfalse
keepMountedWhether to keep the element in the DOM while the panel is hidden. This prop is ignored when `hiddenUntilFound` is used.booleanfalse
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

SystemMessageGroupSummary, SystemMessageTime

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

相关组件