A conversation between two people

// apps/docs/examples/ui/message.tsx'use client';
import {  Avatar,  AvatarFallback,} from '@workspace/active-ui/components/primitives/avatar';import {  Bubble,  BubbleContent,} from '@workspace/active-ui/components/primitives/bubble';import {  Message,  MessageAvatar,  MessageContent,  MessageFooter,  MessageGroup,  MessageHeader,} from '@workspace/active-ui/components/primitives/message';
/** * A conversation laid out as messages: the other person on the start side * with an avatar and a name, your own messages on the end side, a header with * the time and a footer with the delivery state. The text sits in bubbles. */export default function MessageExample() {  return (    <MessageGroup className="w-full max-w-md">      <Message>        <MessageAvatar>          <Avatar size="sm">            <AvatarFallback>SV</AvatarFallback>          </Avatar>        </MessageAvatar>        <MessageContent>          <MessageHeader>Sam de Vries · 10:42</MessageHeader>          <Bubble variant="muted">            <BubbleContent>              Could you check the address of participant 1042 before Friday?            </BubbleContent>          </Bubble>        </MessageContent>      </Message>      <Message align="end">        <MessageContent>          <MessageHeader>You · 10:45</MessageHeader>          <Bubble align="end">            <BubbleContent>Done, it was an old address.</BubbleContent>          </Bubble>          <Bubble align="end">            <BubbleContent>              The statement goes out with the others.            </BubbleContent>          </Bubble>          <MessageFooter>Read</MessageFooter>        </MessageContent>      </Message>    </MessageGroup>  );}