Hello, how can you help me today?
Hi! I'm an AI assistant. I can help you with coding questions, writing, analysis, and much more. What would you like to work on?
Can you explain React hooks?
React hooks are functions that let you use state and other React features in functional components. The most common hooks are useState for managing state, useEffect for side effects, and useContext for accessing context values.
What about custom hooks?
Custom hooks are functions that start with 'use' and can call other hooks. They let you extract component logic into reusable functions. For example, you could create a useLocalStorage hook to persist state to localStorage.
Overview
A container for chat messages with automatic scroll management. Shows a scroll-to-bottom button when the user scrolls up from the bottom.
Installation
bunx shadcn@latest add @elements/messagesUsage
import { AiMessages } from "@/components/elements/ai-elements/chat/ai-messages";
export function MessageList({ messages }) {
return (
<AiMessages>
{messages.map((message, index) => (
<div key={index} className="p-2">
{message.content}
</div>
))}
</AiMessages>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Message components |
className | string | - | Additional CSS classes |
autoScroll | boolean | true | Auto-scroll to bottom on new messages |
Auto-Scroll Behavior
The component automatically scrolls to the bottom when:
autoScrollistrue(default)- The user is already at or near the bottom
When the user scrolls up, a button appears to jump back to the bottom.
With Message Bubble
Combine with the Message Bubble component for styled messages:
import { AiMessages } from "@/components/elements/ai-elements/chat/ai-messages";
import { AiMessageBubble } from "@/components/elements/ai-elements/chat/ai-message-bubble";
export function Chat({ messages }) {
return (
<AiMessages>
{messages.map((message, index) => (
<AiMessageBubble
key={index}
role={message.role}
content={message.content}
/>
))}
</AiMessages>
);
}Features
- Auto-scroll to bottom on new messages
- Scroll-to-bottom button when scrolled up
- Smooth scroll animations
- Responsive max-width container
- Touch-friendly scrolling