Message

"use client";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Bubble, BubbleContent } from "@/components/ui/bubble";
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from "@/components/ui/message";

export function Demo() {
  return (
    <MessageGroup className="w-full max-w-md gap-fe-4">
      <Message align="start">
        <MessageAvatar>
          <Avatar>
            <AvatarFallback>RF</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>Assistente</MessageHeader>
          <Bubble variant="secondary">
            <BubbleContent>
              Mensagem de entrada com avatar, cabeçalho e rodapé.
            </BubbleContent>
          </Bubble>
          <MessageFooter>agora</MessageFooter>
        </MessageContent>
      </Message>
      <Message align="end">
        <MessageAvatar>
          <Avatar>
            <AvatarFallback>VC</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>Você</MessageHeader>
          <Bubble>
            <BubbleContent>Resposta alinhada ao fim da thread.</BubbleContent>
          </Bubble>
          <MessageFooter>enviado</MessageFooter>
        </MessageContent>
      </Message>
    </MessageGroup>
  );
}