Conversation
conversationStacks chat messages in a scrollable timeline that follows new messages and streamed growth.
Usage
Basic usage
Get an independent scrolling message flow at a given height; stack ChatMessage vertically inside, and the content will automatically stick to the bottom as it grows.
<Conversation className="h-72 max-w-lg">
<ChatMessage role="user" name="Me">Does Hulian support dark mode?</ChatMessage>
<ChatMessage role="assistant" name="Hulian AI">
Yes. Light and dark themes render without a flash because SSR injects variables before first paint.
</ChatMessage>
<ChatMessage role="user" name="Me">How do I switch themes?</ChatMessage>
<ChatMessage role="assistant" name="Hulian AI" loading>Placeholder</ChatMessage>
</Conversation>Hide scroll bar
hideScrollbar hides the scroll bar (the content can still be scrolled), suitable for ChatGPT-style immersive chat area.
<Conversation hideScrollbar className="h-72 max-w-lg">
<ChatMessage role="user" name="Me">This is a long message...</ChatMessage>
<ChatMessage role="assistant" name="Hulian AI">Received. </ChatMessage>
</Conversation>When to Use
Wrap a sequence of ChatMessage items in a scrolling conversation that follows new messages and streaming tokens. Conversation owns stacking and scrolling only; ChatMessage renders each bubble and PromptInput handles composer input.
Import
import { Conversation } from "@hulianui/ui"Props
Inherit HTMLAttributes<HTMLDivElement> (including className, children, etc.).
| Name | Type | Default | Description |
|---|---|---|---|
| autoScroll | boolean | true | Automatically scroll to the bottom when the content changes (fitting chat flow/streaming token addition) |
| hideScrollbar | boolean | false | Hide scroll bar (content can still be scrolled, ChatGPT style immersive chat area) |
Usage Guidelines
- The component has no intrinsic height. Give it a bounded height such as
h-72orh-dvhso it becomes an independent scroller andautoScrollcan follow the bottom; an unbounded container simply grows with its content.
Related
ChatMessage · PromptInput · TypingDots · ThinkingBlock · ToolCall · AgentPlan