Message

import { Message, MessageAvatar, MessageContent } from "@/components/ui/message";

<Message from="user">
  <MessageAvatar src="/user-avatar.jpg" name="John" />
  <MessageContent>Hello, how can I help you?</MessageContent>
</Message>

<Message from="assistant">
  <MessageAvatar src="/assistant-avatar.jpg" name="AI" />
  <MessageContent>I'm here to assist you with any questions!</MessageContent>
</Message>

import { Message, MessageAvatar, MessageContent } from "@/components/ui/message";

export default () => (
  <>
    {/* Contained variant - default, has background and padding */}
    <Message from="user">
      <MessageAvatar src="/user-avatar.jpg" />
      <MessageContent variant="contained">
        This is a contained message with background
      </MessageContent>
    </Message>

    {/* Flat variant - no background for assistant, minimal styling */}
    <Message from="assistant">
      <MessageAvatar src="/assistant-avatar.jpg" />
      <MessageContent variant="flat">This is a flat message with minimal styling</MessageContent>
    </Message>
  </>
);

import { Conversation, ConversationContent } from "@/components/ui/conversation";
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message";

export default ({ messages }) => (
  <Conversation>
    <ConversationContent>
      {messages.map((message) => (
        <Message key={message.id} from={message.from}>
          <MessageAvatar src={message.avatarUrl} name={message.name} />
          <MessageContent>{message.content}</MessageContent>
        </Message>
      ))}
    </ConversationContent>
  </Conversation>
);