# Chat

Chat components composed together.

Group: Chat

## Import

```tsx
import { Message, Bubble, MessageScroller, Marker } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function ChatComposedDemo() {
  const [reasoningOpen, setReasoningOpen] = useState(false)
  const botAvatar = (
    <Avatar.Root size="xs">
      <Avatar.Fallback name="Indoku Bot" />
    </Avatar.Root>
  )

  return (
    <Card.Root h="96" overflow="hidden">
      <MessageScroller.Root p="4" watch={[reasoningOpen]}>
        <Stack gap="5">
          <Marker.Separator>Today</Marker.Separator>

          {/* Message.Group: 2 balasan bot berurutan numpuk rapet, satu avatar di bawah grup */}
          <Message.Group avatar={botAvatar} avatarPosition="bottom" header="Indoku Bot · 09:41">
            <Bubble.Root align="start">
              <Bubble.Content>Hey! Mau liat chat bubble?</Bubble.Content>
            </Bubble.Root>
            <Bubble.Root align="start">
              <Bubble.Content>
                Gue bisa ngegrupin pesan, gonta-ganti sisi, dan bikin satu thread gampang dipindai.
              </Bubble.Content>
              <Bubble.Footer>
                <Bubble.Action aria-label="Like">👍</Bubble.Action>
                <Bubble.Action aria-label="Fire">🔥</Bubble.Action>
              </Bubble.Footer>
            </Bubble.Root>
          </Message.Group>

          <Message.Root align="end">
            <Message.Avatar />
            <Message.Content>
              <Bubble.Root align="end" variant="solid">
                <Bubble.Content>Mantap. Coba kirim lampiran juga dong.</Bubble.Content>
              </Bubble.Root>
            </Message.Content>
          </Message.Root>

          <Message.Group avatar={botAvatar} avatarPosition="bottom">
            <Bubble.Root align="start">
              <Bubble.Content>
                Nih rekapnya.
                <Attachment.Root mt="2">
                  <Attachment.Media />
                  <Attachment.Content>
                    <Attachment.Name>invoice-september.pdf</Attachment.Name>
                    <Attachment.Meta size={482000} />
                  </Attachment.Content>
                </Attachment.Root>
                <Bubble.Collapsible
                  open={reasoningOpen}
                  onOpenChange={setReasoningOpen}
                  label="Show reasoning"
                  mt="2"
                >
                  Ngambil data invoice bulan ini, ngitung total, terus dirender jadi kartu attachment.
                </Bubble.Collapsible>
              </Bubble.Content>
            </Bubble.Root>
          </Message.Group>

          <Marker.Status tone="info">
            <Marker.TypingIndicator />
            Indoku Bot is typing...
          </Marker.Status>
        </Stack>
      </MessageScroller.Root>
    </Card.Root>
  )
}
```

## Props

### Status

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `MarkerTone` |  |  |
| `icon` | `ReactNode` |  |  |

`*` = required. Style props and HTML attributes are accepted too.