new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

shadcn/ui · Components · all subjects

message/usage

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Message component imports

Import Message, MessageAvatar, and MessageContent from @/components/ui/message. Also import Avatar, AvatarFallback, and AvatarImage from @/components/ui/avatar, and Bubble, BubbleContent from @/components/ui/bubble.

Basic Message component structure

The basic Message structure wraps MessageAvatar containing an Avatar component and MessageContent containing a Bubble with BubbleContent. Example: <Message><MessageAvatar><Avatar><AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" /><AvatarFallback>CN</AvatarFallback></Avatar></MessageAvatar><MessageContent><Bubble><BubbleContent>How can I help you today?</BubbleContent></Bubble></MessageContent></Message>

Message uses Bubble for message surface

The visible message surface should be rendered inside Message using the Bubble component. For the scroll container around a conversation, use MessageScroller.

Message usage example with avatar

Example of using the Message component with an avatar: ```tsx import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Bubble, BubbleContent } from "@/components/ui/bubble" import { Message, MessageAvatar, MessageContent } from "@/components/ui/message" <Message> <MessageAvatar> <Avatar> <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" /> <AvatarFallback>CN</AvatarFallback> </Avatar> </MessageAvatar> <MessageContent> <Bubble> <BubbleContent>How can I help you today?</BubbleContent> </Bubble> </MessageContent> </Message> ```

Message owns row layout

The Message component owns the row layout—avatar, alignment, header, and footer. Render the visible message surface inside it with the Bubble component. For the scroll container around a conversation, use the MessageScroller component.

MessageAvatar alignment with align prop

Use MessageAvatar to render an avatar next to the message. Set align="end" on the message to align the avatar to the end of the message. The align prop accepts: start (align the message to the start of the conversation) or end (align the message to the end of the conversation).

MessageGroup for consecutive messages

Use MessageGroup to stack consecutive messages from the same sender. Render an empty MessageAvatar on the earlier messages to keep them aligned with the avatar on the last one.

MessageHeader and MessageFooter usage

Use MessageHeader for a sender name and MessageFooter for metadata such as a delivery or read status.

Give your agent this brain