Message

One turn in a conversation, with avatar, header, bubbles and footer. For chat and AI interfaces.

Jordan10:42

The HRIS staging build is green.

Can we demo payroll to UB Finance on Thursday?

Yes. I'll freeze main on Wednesday night.

Read

Usage

import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@zynactra/ui/message"
import { Bubble, BubbleContent } from "@zynactra/ui/bubble"

<MessageGroup>
  <Message>
    <MessageContent>
      <Bubble variant="muted">
        <BubbleContent>The staging build is green.</BubbleContent>
      </Bubble>
    </MessageContent>
  </Message>
  <Message align="end">
    <MessageContent>
      <Bubble>
        <BubbleContent>Ship it.</BubbleContent>
      </Bubble>
      <MessageFooter>Read</MessageFooter>
    </MessageContent>
  </Message>
</MessageGroup>

align="end" puts the current user's messages on the right. Message is layout only; the text goes in a Bubble, and files in an Attachment.

Guidelines

The current user is end with the default bubble; everyone else is start with muted. For an AI assistant, ghost bubbles read as a document rather than a chat partner.
Group consecutive messages from one sender in a BubbleGroup with one avatar and one header.
Timestamps go in the header, delivery state in the footer.

Usage

Guidelines

On this page