Message
The layout of a message in a conversation, with an avatar, a header, the content and a footer, on either side.
Message lays out one message of a conversation: the avatar of the sender, a header with the name
and time, the content, and a footer such as the delivery state. Messages from the other party sit on
the start side, your own on the end side. The text itself goes in a bubble;
a long conversation scrolls in a message scroller.
// 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> );}Usage#
import { Bubble, BubbleContent,} from '@workspace/active-ui/components/primitives/bubble';import { Message, MessageContent, MessageHeader,} from '@workspace/active-ui/components/primitives/message';
<Message align="end"> <MessageContent> <MessageHeader>You · 10:45</MessageHeader> <Bubble align="end"> <BubbleContent>Done, it was an old address.</BubbleContent> </Bubble> </MessageContent></Message>;Anatomy#
Message: a column of messages with a gap.Group Message: one message.align:start(the default, the other party) orend(your own); the avatar and the content follow the side.Message: the place for an avatar.Avatar Message: the column withContent Message, the bubbles andHeader Message, in small muted text.Footer
What your application provides#
The sender, the time (formatted with active-format), the content and the delivery state.
The order and the grouping of consecutive messages of one sender.
Accessibility#
Messages are <div>s read in order. Put the sender and the time in the header so that each message
is understandable on its own; an avatar beside a visible name is decoration.
API#
Import from @workspace/
Props
- Type
"end""start"- Default
'start'
The side of the message: start for the other party, end for your own.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Other parts#
Parts that take only their element’s attributes
Message: the attributes of aGroup <div>, with className and ref.Message: the attributes of aAvatar <div>, with className and ref.Message: the attributes of aContent <div>, with className and ref.Message: the attributes of aHeader <div>, with className and ref.