Message | Arcadia Design

Yesterday12:04 AM

Can you keep an eye on the smoke flow tonight?

Ping me if it goes red twice.

On it.

I will run it every hour and keep a list of anything flaky.

You will hear from me only if it fails twice in a row.

Sweeper

PR 231 is green. Please verify the e2e smoke before it merges.

import {
  AgentAvatar, Bubble, MessageGroup, TimeSeparator, TypingIndicator,
} from "@arcadia/ui";

<div {...sx("cmp-thread", styles.thread)}>
  <TimeSeparator day="Yesterday" time="12:04 AM" />
  <MessageGroup side="end">
    <Bubble side="end" position="first">Can you keep an eye on the smoke flow tonight?</Bubble>
    <Bubble side="end" position="last">Ping me if it goes red twice.</Bubble>
  </MessageGroup>
  <MessageGroup avatar={avatar}>
    <Bubble position="first">On it.</Bubble>
    <Bubble position="middle">I will run it every hour and keep a list of anything flaky.</Bubble>
    <Bubble position="last">You will hear from me only if it fails twice in a row.</Bubble>
  </MessageGroup>
  <MessageGroup avatar={<AgentAvatar avatar={SWEEPER} name="Sweeper" size={24} aria-hidden />} name="Sweeper">
    <Bubble variant="outline">PR 231 is green. Please verify the e2e smoke before it merges.</Bubble>
  </MessageGroup>
  <MessageGroup avatar={avatar}>
    <TypingIndicator label="Juniper is working" />
  </MessageGroup>
</div>

TSX

import { Bubble, MessageGroup, bubblePosition } from "@arcadia/ui";

<MessageGroup side={side} avatar={avatar}>
  {messages.map((m, i) => (
    <Bubble key={m.id} side={side} position={bubblePosition(i, messages.length)}>{m.text}</Bubble>
  ))}
</MessageGroup>

A conversation is runs of bubbles. Consecutive messages from one sender share a MessageGroup, which stacks them --message-gap (2px) apart on their side; give each bubble its position from bubblePosition(i, n) and the corners that face a neighbour tighten to --bubble-tight, so the run reads as one voice. The end side is you: a step of ink over the raised surface, ink text. The start side is the other party on the raised surface, no frame: a solid bubble's fill is its edge. variant="outline" is a hairline and no fill, for a message relayed from someone else. Space runs apart with the conversation's own gap.

Put a TimeSeparator before the first message and wherever the conversation resumes after a pause. While the other side works, end its run with a TypingIndicator, where its next bubble will land.

Examples

Arrival

enter plays once on mount: send rises from the composer and grows from its corner on a spring, arrive rises in from its own side.

import { useState } from "react";
import { Bubble, Button, MessageGroup, bubblePosition } from "@arcadia/ui";

function Arrivals() {
  const [sent, setSent] = useState<string[]>([]);
  return (
    <div {...sx("cmp-thread", styles.thread)}>
      <MessageGroup side="end">
        {sent.map((text, i) => (
          <Bubble key={i} side="end" position={bubblePosition(i, sent.length)} enter="send">{text}</Bubble>
        ))}
      </MessageGroup>
      <Button variant="secondary" size="sm" onClick={() => setSent([...sent, sent.length ? "One more thing" : "Hello"])}>Send</Button>
    </div>
  );
}

Receipt

meta is a quiet caption under the run, on its side: a delivery state or a time.

Run the smoke flow when you can.

Delivered

rootStyle takes where a bubble sits and these knobs: its material as palette tokens, its corners as radius tokens, its measure, padding and enter delay.

Takes	Default	Sets
`Paint`	`var(--bg-raised)`	The fill. `start` reads the raised surface, `end` a step of ink over the page.
`Paint`	`var(--bg-elevated)`	The fill while the bubble is selected (its menu is open).
`Paint`	`var(--text-prose)`	Text colour.
`Paint`	`transparent`	The hairline drawn inside the bubble: none on a solid bubble (its fill is its edge), a frame on an outline one.
`Ref<Radius>`	`var(--radius-2xl)`	The outer corners.
`Ref<Radius>`	`var(--radius-sm)`	The corners that face a neighbour in the same run.
``${number}%` \| Ref<Measure>`	`80%`	Widest a bubble grows, as a share of its column.
`Ref<Space>`	`var(--space-3)`	Inline padding.
`Ref<Space>`	`var(--space-1-5)`	Block padding.
`Ref<Duration> \| "0s"`	`0s`	How long the enter waits before it plays (the bubble stays hidden until then): a reply's typing bubble waits for the sent bubble to land.

Takes	Default	Sets
`Ref<Space>`	`Ref<Space>;`	The gap between bubbles of one run.
`Ref<Control \| Space>`	`Ref<Control \| Space>;`	The avatar column's width (start side, with an avatar).
`Paint`	`Paint;`	The name and caption colour.

Knob	Takes	Default	Sets
	`Ref<Space>`	`Ref<Space>;`	One dot's diameter.
	`Paint`	`Paint;`	The dots' ink.

Usage

Examples

Arrival

Receipt

Customising

Accessibility

API reference

Bubble

MessageGroup5 props

TimeSeparator4 props

TypingIndicator6 props