Message

A message row with avatar and grouping.

Import

tsx

import { Message } from "@indoku/ui"

Examples

Basic usage

Indoku Bot · 09:41

Halo! Ada yang bisa dibantu hari ini?

Tolong cek invoice bulan ini dong

Sent

avatarPosition="top" (ala Slack - avatar+nama sejajar bubble pertama)

Indoku Bot · 09:41

Baris pertama grup ini.

Baris kedua, numpuk rapet di bawahnya.

avatarPosition="bottom" (default, ala iMessage/WhatsApp - avatar sejajar bubble terakhir)

Baris pertama grup ini.

Baris kedua, numpuk rapet di bawahnya.

avatarPosition="none" (nggak ada avatar, grup ngepas ke tepi)

Baris pertama grup ini.

Baris kedua, numpuk rapet di bawahnya.

tsx

function MessageDemo() {  return (    <Card.Root p="4">      <Stack gap="4">        <Message.Root align="start">          <Message.Avatar>            <Avatar.Root size="xs">              <Avatar.Fallback name="Indoku Bot" />            </Avatar.Root>          </Message.Avatar>          <Message.Content>            <Message.Header>Indoku Bot · 09:41</Message.Header>            <Text fontSize="sm">Halo! Ada yang bisa dibantu hari ini?</Text>          </Message.Content>        </Message.Root>        <Message.Root align="end">          <Message.Avatar />          <Message.Content>            <Text fontSize="sm">Tolong cek invoice bulan ini dong</Text>            <Message.Footer>Sent</Message.Footer>          </Message.Content>        </Message.Root>      </Stack>    </Card.Root>  )}function AvatarPositionDemo() {  const botAvatar = (    <Avatar.Root size="xs">      <Avatar.Fallback name="Indoku Bot" />    </Avatar.Root>  )  const bubbles = (    <>      <Bubble.Root align="start">        <Bubble.Content>Baris pertama grup ini.</Bubble.Content>      </Bubble.Root>      <Bubble.Root align="start">        <Bubble.Content>Baris kedua, numpuk rapet di bawahnya.</Bubble.Content>      </Bubble.Root>    </>  )  return (    <Stack gap="6">      <Stack gap="2">        <Text fontSize="xs" fontWeight="medium" color="fg.subtle">          avatarPosition=&quot;top&quot; (ala Slack - avatar+nama sejajar bubble pertama)        </Text>        <Message.Group avatar={botAvatar} avatarPosition="top" header="Indoku Bot · 09:41">          {bubbles}        </Message.Group>      </Stack>      <Stack gap="2">        <Text fontSize="xs" fontWeight="medium" color="fg.subtle">          avatarPosition=&quot;bottom&quot; (default, ala iMessage/WhatsApp - avatar sejajar bubble terakhir)        </Text>        <Message.Group avatar={botAvatar} avatarPosition="bottom">          {bubbles}        </Message.Group>      </Stack>      <Stack gap="2">        <Text fontSize="xs" fontWeight="medium" color="fg.subtle">          avatarPosition=&quot;none&quot; (nggak ada avatar, grup ngepas ke tepi)        </Text>        <Message.Group avatarPosition="none">{bubbles}</Message.Group>      </Stack>    </Stack>  )}

Props

Root

Prop	Type	Default	Description
`align`	`MessageAlign`	`start`	`"end"` for your own message (right), `"start"` for the other side (left).

Group

Prop	Type	Default	Description
`align`	`MessageAlign`	`start`	Side of the group: `"start"` (left, the other person) or `"end"` (right, you).
`avatar`	`ReactNode`	–	Avatar for the whole group, rendered once (not per bubble).
`avatarPosition`	`AvatarPosition`	`bottom`	Avatar position relative to the group: `"top"` aligns with the first bubble (Slack style), `"bottom"` aligns with the last bubble (iMessage/WhatsApp style), `"none"` hides the avatar.
`header`	`ReactNode`	–	Header shown once for the whole group (e.g. sender name + time), above the first bubble.
`children`	`ReactNode`	–	`Bubble.Root` elements (one or more) — not `Message.Root`; avatar and alignment are handled here.

* required. Style props and HTML attributes are accepted as well.

← Message Scroller Bubble →

Created by @indokudev