# Message Scroller

A message list that sticks to the bottom.

Group: Chat

## Import

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

## Examples

### Basic usage

```tsx
function MessageScrollerDemo() {
  const rows = Array.from({ length: 20 }, (_, i) => i + 1)
  return (
    <Card.Root h="64" overflow="hidden" position="relative">
      <MessageScroller.Root p="4" watch={[]}>
        <Stack gap="2">
          {rows.map((n) => (
            <Text key={n} fontSize="sm" color="fg.muted">
              Pesan #{n} - scroll turun buat liat tombol "ke bawah" muncul.
            </Text>
          ))}
        </Stack>
      </MessageScroller.Root>
    </Card.Root>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` |  |  |
| `threshold` | `number` | `80` | Distance in px from the bottom that still counts as "at the bottom". |
| `watch` | `unknown[]` |  | Dependency array. When it changes (e.g. message count or the last message while streaming) the scroller sticks to the bottom if the user was already there. |

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