Skip to main content
Display chat messages with auto-scrolling and empty states.

​
Conversation

Container for the message list. Sets up ARIA role for accessibility. 
import { Conversation, ConversationContent } from "modifywithai"

<Conversation>
    <ConversationContent>
        {/* Messages go here */}
    </ConversationContent>
</Conversation>

​
ConversationContent

Scrollable content area with auto-scroll behavior. 
<ConversationContent>
    {messages.map((msg) => (
        <Message key={msg.id} message={msg}>
            <MessageContent />
        </Message>
    ))}
</ConversationContent>

​
ConversationEmptyState

Display when no messages exist: 
import { ConversationEmptyState } from "modifywithai"

{messages.length === 0 && (
    <ConversationEmptyState
        title="How can I help?"
        description="Ask me to perform actions in your app"
        icon={<SparklesIcon />}
    />
)}

​
Props

PropTypeDescription
titlestringMain heading text
descriptionstringSubheading text
iconReactNodeIcon to display

​
ConversationScrollButton

Button to scroll to the bottom of the conversation: 
import { ConversationScrollButton } from "modifywithai"

<ConversationScrollButton onClick={scrollToBottom}>
    ↓ New messages
</ConversationScrollButton>

​
Message

Wrapper for individual messages: 
import { Message, MessageContent } from "modifywithai"

<Message message={msg}>
    <MessageContent />
</Message>

​
Props

PropTypeDescription
messageMessageThe message object
childrenReactNodeContent to render

​
MessageContent

Renders the message body: 
<Message message={msg}>
    <MessageContent />
</Message>

​
MessageResponse

Specialized display for assistant responses: 
import { MessageResponse } from "modifywithai"

{msg.role === "assistant" && (
    <MessageResponse message={msg} />
)}

​
Complete Example

import {
    Conversation,
    ConversationContent,
    ConversationEmptyState,
    Message,
    MessageContent,
} from "modifywithai"

function ChatWindow({ messages }) {
    return (
        <Conversation>
            <ConversationContent>
                {messages.length === 0 ? (
                    <ConversationEmptyState
                        title="Start a conversation"
                        description="Ask me anything"
                    />
                ) : (
                    messages.map((msg) => (
                        <Message key={msg.id} message={msg}>
                            <MessageContent />
                        </Message>
                    ))
                )}
            </ConversationContent>
        </Conversation>
    )
}