{messages.map((message) => (
{message.parts.map((part, i) => {
switch (part.type) {
case "text": // we don't use any reasoning or tool calls in this example
return {part.text};
default:
return null;
}
})}
))}
);
};
export default MessageDemo;
```
## Features
- Displays messages from both the user and AI assistant with distinct styling.
- Two visual variants: **contained** (default) and **flat** for different design preferences.
- Includes avatar images for message senders with fallback initials.
- Shows the sender's name through avatar fallbacks.
- Automatically aligns user and assistant messages on opposite sides.
- Uses different background colors for user and assistant messages.
- Accepts any React node as message content.
## Variants
### Contained (default)
The **contained** variant provides distinct visual separation with colored backgrounds:
- User messages appear with primary background color and are right-aligned
- Assistant messages have secondary background color and are left-aligned
- Both message types have padding and rounded corners
### Flat
The **flat** variant offers a minimalist design that matches modern AI interfaces like ChatGPT and Gemini:
- User messages use softer secondary colors with subtle borders
- Assistant messages display full-width without background or padding
- Creates a cleaner, more streamlined conversation appearance
## Notes
Always render the `AIMessageContent` first, then the `AIMessageAvatar`. The `AIMessage` component is a wrapper that determines the alignment of the message.
## Examples
### Render Markdown
We can use the [`Response`](/elements/components/response) component to render markdown content.