Message Thread

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Messages *

  messages · array

  The conversation, in order. Alternate senders, and end on an outgoing message so the read receipt lands at the foot of the thread. Six short messages is the sweet spot for this budget; more are compressed to fit and the oldest scroll off the top.

  now: 6 items

• Contact

  contact · string

  Name in the thread header. Its initials draw the avatar too, so a first and last name reads best.

  now: Priya Raman

• Status

  status · string

  Small line under the contact name, e.g. 'Online' or 'Active now'. Omit for a barer header.

  now: Online

• Typing indicator

  typingIndicator · boolean

  Show a three-dot typing bubble before every incoming message, which then collapses as the message takes its place.

  now: true

• Day label

  dayLabel · string

  Rule-and-label divider above the first message, e.g. 'Today'. Omit to open straight on the first bubble.

  now: Today

• Receipt

  receipt · string

  Read receipt under the last outgoing bubble, e.g. 'Read 9:41'. Omit to leave the thread hanging.

  now: Read 9:41

• Composer

  composer · boolean

  Show the input bar pinned to the bottom of the frame. Its send button presses in just before each outgoing message.

  now: true

• Composer label

  composerLabel · string

  Placeholder text in the input bar. Only rendered when `composer` is true.

  now: Message

• Pace

  pace · number

  Scales the whole conversation's timing. 1 is the natural read, below 1 hurries it, above 1 lets it breathe. Capped automatically so the last bubble always lands before the exit window.

  now: 1.15

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate