A stick-to-bottom conversation viewport for streaming chat messages.
Use ChatConversation as the scrollable message viewport for assistant and user messages.
Combine ChatConversation, ChatMessage, ChainOfThought, and PromptInput for a complete chat surface.
Add ChatConversation.ScrollButton only when your product needs an explicit jump-to-bottom control.
import {ChatConversation} from "@heroui-pro/react";
<ChatConversation>
<ChatConversation.Content>{messages}</ChatConversation.Content>
<ChatConversation.ScrollAnchor />
</ChatConversation>.chat-conversation - Scrollable root viewport.chat-conversation__content - Message column.chat-conversation__scroll-button - Jump-to-bottom button.chat-conversation__scroll-button-container - Jump-to-bottom button positioner.chat-conversation__scroll-anchor - Bottom scroll anchorRoot scroll viewport. Supports native div props.
Centers and stacks conversation content. Supports native div props.
Optional button that appears when the viewport is away from the bottom. Extends HeroUI Button props.
Bottom anchor used by the stick-to-bottom behavior. Supports native div props.