# Message

A message row with avatar and grouping.

Group: Chat

## Import

```tsx
import { Message } from "@indoku/ui"
```

## Examples

### Basic usage

```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 too.