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>
    )
}