Chat message

Bubbles for conversation UIs. Aligned with J&J DS v1.2 (Figma 22479:58733) — author name above, timestamp below, bot bubbles in warm-gray on the left, user ("You") in plain text on the right. Three kinds: text, file, and typing.

Basic text — bot and user

Bot messages render in a bg-02 bubble on the left with their name in black. User messages render plain text on the right with the “You” label in brand-red.

Ashley Bromville

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium. Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.

3:38 PM

You

Nemo enim ipsam voluptatem quia voluptas.

3:38 PM

Show source

<ChatMessage
  author="bot"
  authorName="Ashley Bromville"
  timestamp="3:38 PM"
  avatar={<Avatar size="sm" online><AvatarFallback>AB</AvatarFallback></Avatar>}
>
  Sed ut perspiciatis unde omnis iste natus error…
</ChatMessage>

<ChatMessage author="user" timestamp="3:38 PM">
  Nemo enim ipsam voluptatem quia voluptas.
</ChatMessage>

File attachment (kind="file")

Renders the message as a file card with icon + filename + size + metadata. Provide onClick to make the card keyboard-focusable and clickable.

Ashley Bromville3:38 PM

You3:38 PM

Show source

<ChatMessage
  author="bot"
  authorName="Ashley Bromville"
  timestamp="3:38 PM"
  kind="file"
  avatar={<Avatar size="sm" online><AvatarFallback>AB</AvatarFallback></Avatar>}
  file={{
    name: "File-name.pdf",
    size: "150KB",
    meta: "Metadata text goes here",
    onClick: () => download()
  }}
/>

Custom file icon (e.g. image, audio)

Pass any ReactNode in file.icon to swap the document glyph.

Ashley Bromville

Scan-2024-03.png2.1MBChest X-ray, lateral view

11:02 AM

Show source

<ChatMessage
  author="bot"
  kind="file"
  file={{
    name: "Scan-2024-03.png",
    size: "2.1MB",
    icon: <Icon icon={ImageIcon} size="lg" />,
  }}
/>

Typing indicator (kind="typing")

Three pulsing dots in a bubble. No timestamp. Matches the Figma “Typing…” state.

Ashley Bromville

Show source

<ChatMessage
  author="bot"
  authorName="Ashley Bromville"
  kind="typing"
  avatar={<Avatar size="sm" online><AvatarFallback>AB</AvatarFallback></Avatar>}
/>

Conversation flow — mixed authors and kinds

A realistic thread combining all three kinds. The online dot on the avatar is set by the Avatar component's online prop.

Ashley Bromville

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.

3:38 PM

You

Nemo enim ipsam voluptatem quia voluptas.

3:38 PM

Ashley Bromville3:39 PM

Ashley Bromville

Show source

<ChatMessage author="bot" authorName="Ashley Bromville" timestamp="3:38 PM" avatar={…}>
  Sed ut perspiciatis unde omnis…
</ChatMessage>
<ChatMessage author="user" timestamp="3:38 PM">Nemo enim ipsam voluptatem.</ChatMessage>
<ChatMessage author="bot" kind="file" file={{ name: "Report.pdf", size: "320KB" }} avatar={…} />
<ChatMessage author="bot" kind="typing" avatar={…} />