# GenieChatMessageList

Scrollable message list that renders Genie chat messages with auto-scroll, skeleton loaders, and a streaming indicator.

## GenieChatMessageList[​](#geniechatmessagelist-1 "Direct link to GenieChatMessageList")

Scrollable message list that renders Genie chat messages with auto-scroll, skeleton loaders, and a streaming indicator.

**Source:** [`packages/appkit-ui/src/react/genie/genie-chat-message-list.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/genie/genie-chat-message-list.tsx)

### Props[​](#props "Direct link to Props")

| Prop                  | Type                 | Required | Default | Description                                                                 |
| --------------------- | -------------------- | -------- | ------- | --------------------------------------------------------------------------- |
| `messages`            | `GenieMessageItem[]` | ✓        | -       | Array of messages to display                                                |
| `status`              | `enum`               | ✓        | -       | Current chat status (controls loading indicators and skeleton placeholders) |
| `className`           | `string`             |          | -       | Additional CSS class for the scroll area                                    |
| `hasPreviousPage`     | `boolean`            |          | `false` | Whether a previous page of older messages exists                            |
| `onFetchPreviousPage` | `(() => void)`       |          | -       | Callback to fetch the previous page of messages                             |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { GenieChatMessageList } from '@databricks/appkit-ui';

<GenieChatMessageList /* props */ />

```