All components (204)

Conversation

Data · Conversation · .amset-thread

What it is and when to use it

A thread of messages: a support ticket, a chat with the store, the notes of an order. One's own on one side, other people's on the other and system notices in the middle; each message with its author, its time and, if needed, its status.

When to use it

To show an exchange between people. Messages come out in the order they arrive in messages: it does not sort them by date.
side: custom (whoever is looking at the screen), other (default) or system (assignments, status changes).
state on a message for "Sending" or "Could not send"; extra for attachments or quick replies.
maxHeight when the thread is long and has to scroll inside its box. empty is what is shown with no messages.

When not to

For comments with nested replies: Comments.
For a record of what has happened, without dialog: History.

Keyboard: the thread is one Tab stop, so that it can be scrolled with the arrow keys when it does not fit in its maxHeight. After that, Tab continues through whatever is inside the messages (the extra buttons).

Accessibility: it is an ordered list (ol) with a name (label), so you hear how many messages there are. Each message says who writes it with one word (the author, "You" for one's own without an author —customName changes it— or "System"): the side and the color are not heard. The avatar (with the message's photo, or the initials) is decorative, because the name is already written next to it. The time is relative ("5 minutes ago") and carries the exact date in its datetime.

Fine-tuning: CSS variables --amset-thread-*: -author, -bubble, -footer, -gap, -radius, -text, -width. The size moves the gap, the padding of the bubble and how wide a message can get.

What it looks like

Ada
I'm not receiving the order receipt.
Unknown date
Support
We're resending it right now.
Unknown date

<Conversation
  label="Conversation with support"
  messages={[
    { key: '1', author: 'Ada', text: 'I'm not receiving the receipt.', date: '10:02' },
    { key: '2', author: 'Support', text: 'We're resending it.', date: '10:05', side: 'custom' },
  ]}
/>

Props

Import it with import { Conversation } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	What the conversation is about: "Ticket 1042", "Chat with support".
`messages`required	`readonly Message[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`customName`	`string`	What the person writing the user's own messages is called. By default, "You".
`empty`	`ReactNode`	What shows with no messages: a text, or a node with its illustration and its call to action.
`loading`	`boolean`	The thread is arriving: three skeleton bubbles instead of the messages, and the thread is marked busy.
`loadingOlder`	`boolean`	Earlier messages are arriving: a row with its text at the top of the thread.
`maxHeight`	`string`	Maximum height before scrolling inside the thread.
`onReachStart`	`() => void`	Called ONCE on reaching the very top, to ask for the earlier messages. It is not repeated until `loadingOlder` goes from `true` to `false` -or the reader moves away and comes back.
`revealKey`	`string`	Brings the message with this `key` into view every time it changes: the next match of a search. It moves the thread's scroll, not the page's.
`size`	`"sm" \| "md" \| "lg"`	—
`stickToBottom`	`boolean`	Follows the end: every new message, and every letter of one being typed, takes the thread down ONLY if the reader was already at the bottom. Whoever has moved away to reread is not dragged.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-thread-gap`	`var(--amset-space-3)`
`--amset-thread-bubble`	`var(--amset-space-2) var(--amset-space-3)`
`--amset-thread-radius`	`var(--amset-radius-lg)`
`--amset-thread-text`	`var(--amset-text-sm)`
`--amset-thread-author`	`var(--amset-text-xs)`
`--amset-thread-footer`	`var(--amset-text-xs)`
`--amset-thread-width`	`85%`

How to change it

.amset-thread {
  --amset-thread-gap: ...;
  --amset-thread-bubble: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: