ChatMessages
Virtualized, auto-scrolling message list powered by react-virtuoso.
ChatMessages renders the conversation as a virtualized list with automatic scroll-following during streaming. It includes a built-in ChatScrollButton and skeleton loading state. Must be rendered inside a ChatProvider.
Messages
Can you refactor the auth middleware?
2m ago
Coder
I'll refactor the auth middleware to use a cleaner pattern with early returns and proper error handling. Let me update the file.
Looks good, now add rate limiting
30s ago
Loading state
Import
import { ChatMessages, type ChatMessagesHandle, type ChatMessagesProps } from "@polpo-ai/chat";Props
| Prop | Type | Default | Description |
|---|---|---|---|
renderItem | (msg: ChatMessage, index: number, isLast: boolean, isStreaming: boolean) => ReactNode | plain text fallback | Custom renderer for each message |
className | string | — | Extra classes applied to the container |
skeletonCount | number | 3 | Number of skeleton pairs to show during initial load |
Ref handle
The component exposes a ChatMessagesHandle via ref:
| Method | Signature | Description |
|---|---|---|
scrollToBottom | (behavior?: "smooth" | "auto") => void | Programmatically scroll to the bottom |
Usage
const messagesRef = useRef<ChatMessagesHandle>(null);
<ChatProvider agent="my-agent">
<ChatMessages
ref={messagesRef}
renderItem={(msg, index, isLast, isStreaming) => (
<ChatMessage
msg={msg}
isLast={isLast}
isStreaming={isStreaming}
avatar={<BotIcon />}
/>
)}
/>
<ChatInput />
</ChatProvider>