Docs
Message List
Message List
A component for rendering a list of chat messages with a typing indicator.
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.jsonUsage
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
| Prop | Type | Default | Description |
|---|---|---|---|
messages | Message[] | Required | Array of messages to display |
showTimeStamps | boolean | true | Whether to show timestamps on messages |
isTyping | boolean | false | Whether to show the typing indicator |
messageOptions | AdditionalMessageOptions | ((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[]
}