MessageList Component

The MessageList component is a container that displays a list of messages with automatic scrolling and virtualization support.

Import

import { MessageList } from 'aichatkit'

Usage

Basic Example

basic-message-list.tsx

import { MessageList } from 'aichatkit'
 
function BasicMessageList() {
  const messages = [
    {
      id: '1',
      role: 'assistant',
      content: 'Hello! How can I help you today?',
      timestamp: new Date()
    },
    {
      id: '2',
      role: 'user',
      content: 'I need help with my code',
      timestamp: new Date()
    }
  ]
 
  return <MessageList messages={messages} />
}

With Auto-scroll

auto-scroll-list.tsx

<MessageList 
  messages={messages}
  autoScroll={true}
  scrollBehavior="smooth"
/>

API Reference

Props

Prop	Type	Default	Description
`messages`	`Message[]`	`[]`	Array of messages to display
`autoScroll`	`boolean`	`true`	Auto-scroll to bottom on new messages
`scrollBehavior`	`'auto' \| 'smooth'`	`'smooth'`	Scroll animation behavior
`virtualized`	`boolean`	`false`	Enable virtualization for large lists
`height`	`string \| number`	`'400px'`	Height of the message list container

Enable virtualization for better performance when displaying large numbers of messages.

Message ChatInput