# Message Scroller

> Conversation viewport that follows streams and holds your place when you scroll away.

Registry name: `message-scroller`. HTML docs: https://ui.anuragroy.dev/component/message-scroller.

## Install

```bash
npx shadcn@latest add https://ui.anuragroy.dev/r/message-scroller.json
```

If the website is down: `npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/message-scroller.json`.

Registry JSON: https://ui.anuragroy.dev/r/message-scroller.json (GitHub: https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/message-scroller.json).

## Import

Import paths follow the consumer `components.json` aliases. After a default install:

```tsx
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport
} from "@/components/ui/message-scroller"
```

## Usage

```tsx
import {
  MessageScroller,
  MessageScrollerButton,
  MessageScrollerContent,
  MessageScrollerItem,
  MessageScrollerProvider,
  MessageScrollerViewport,
} from "@/components/ui/message-scroller"

export function Example() {
  return (
    <MessageScrollerProvider>
      <MessageScroller className="h-96">
        <MessageScrollerViewport>
          <MessageScrollerContent>
            <MessageScrollerItem scrollAnchor>User turn</MessageScrollerItem>
            <MessageScrollerItem>Assistant reply</MessageScrollerItem>
          </MessageScrollerContent>
        </MessageScrollerViewport>
        <MessageScrollerButton />
      </MessageScroller>
    </MessageScrollerProvider>
  )
}
```

## API

### MessageScrollerItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `scrollAnchor` | boolean | false | Pin the live edge to this item (typically the latest user turn). |

## Notes

- Built on `@shadcn/react/message-scroller`. Also exports `useMessageScroller`, `useMessageScrollerScrollable`, and `useMessageScrollerVisibility`.
- The jump-to-end button appears when the reader leaves the live edge.

## See also

- [HTML page](https://ui.anuragroy.dev/component/message-scroller): Preview and the same docs in the site chrome.
- [Registry item](https://ui.anuragroy.dev/r/message-scroller.json): Source files and dependencies.
- [Catalog](https://ui.anuragroy.dev/component): All components.
- [llms.txt](https://ui.anuragroy.dev/llms.txt): Agent index for this library.