Docs
Message List

Message List

A component for rendering a list of chat messages with a typing indicator.

Hello! What is your name?

The MessageList component renders a vertical list of chat messages with optional typing indicators and timestamps.

Installation

npx shadcn@latest add https://shadcn-chatbot-kit.vercel.app/r/message-list.json

Usage

import { MessageList } from "@/components/ui/message-list"
 
export function ChatDemo() {
  const messages = [
    {
      id: "1",
      role: "user",
      content: "Hello, how are you?",
    },
    {
      id: "2",
      role: "assistant",
      content: "I'm doing well, thank you for asking!",
    },
  ]
 
  return <MessageList messages={messages} isTyping={false} />
}

With Custom Message Options

import { MessageList } from "@/components/ui/message-list"
 
export function ChatWithCustomOptions() {
  return (
    <MessageList
      messages={messages}
      messageOptions={{
        className: "custom-message-class",
      }}
    />
  )
}

With Dynamic Message Options

import { MessageList } from "@/components/ui/message-list"
 
export function ChatWithDynamicOptions() {
  return (
    <MessageList
      messages={messages}
      messageOptions={(message) => ({
        className:
          message.role === "user" ? "user-message" : "assistant-message",
      })}
    />
  )
}

Props

PropTypeDefaultDescription
messagesMessage[]RequiredArray of messages to display
showTimeStampsbooleantrueWhether to show timestamps on messages
isTypingbooleanfalseWhether to show the typing indicator
messageOptionsAdditionalMessageOptions | ((message: Message) => AdditionalMessageOptions)-Additional options to pass to each ChatMessage component

Message Type

interface Message {
  id: string
  role: "user" | "assistant"
  content: string
  createdAt?: Date
  attachments?: File[]
}

Examples

Basic Usage

<MessageList
  messages={[
    {
      id: "1",
      role: "user",
      content: "Hello!",
    },
    {
      id: "2",
      role: "assistant",
      content: "Hi there! How can I help you today?",
    },
  ]}
  isTyping={false}
/>

Without Timestamps

<MessageList messages={messages} showTimeStamps={false} />
Message InputChat Message