MessagePrimitive
A single message in a conversation. Messages may consist of multiple parts.
Anatomy
import { MessagePrimitive } from "@assistant-ui/react";
const UserMessage = () => (
<MessagePrimitive.Root>
User: <MessagePrimitive.Parts />
<BranchPicker />
<ActionBar />
</MessagePrimitive.Root>
);
const AssistantMessage = () => (
<MessagePrimitive.Root>
Assistant: <MessagePrimitive.Parts />
<BranchPicker />
<ActionBar />
</MessagePrimitive.Root>
);API Reference
Root
Containts all parts of the message.
This primitive renders a <div> element unless asChild is set.
MessagePrimitiveRootProps
asChild:
Change the default rendered element for the one passed as a child, merging their props and behavior.
Read the Composition guide for more details.
Parts
The content of the message. This renders a separate component for each content part of the message.
MessagePrimitiveContentProps
components?:
The components to render for each content part.
ContentPartComponents
Text?:
The component to render for each text content part.
Image?:
The component to render for each image content part.
Source?:
The component to render for each source content part.
File?:
The component to render for each file content part.
Unstable_Audio?:
The component to render for each audio content part.
tools?:
The component to render for each tool call content part.
by_name?:
The components to render for each tool call content part.
Fallback?:
The fallback component to render for tool call content parts.
ToolGroup?:
Component for rendering grouped consecutive tool calls. When provided, consecutive tool-call content parts will be automatically grouped and wrapped with this component.
ToolGroupProps
startIndex:
Index of the first tool call in the group.
endIndex:
Index of the last tool call in the group.
children:
The rendered tool call components within the group.
PartByIndex
Renders a single message part at the specified index.
<MessagePrimitive.PartByIndex
index={0}
components={{
Text: MyTextComponent,
Image: MyImageComponent
}}
/>MessagePrimitive.PartByIndex.Props
index:
The index of the message part to render.
components?:
The components to render for the message part.
Attachments
Renders all attachments of the message.
MessagePrimitive.Attachments.Props
components?:
The components to render for each attachment.
AttachmentComponents
Image?:
The component to render for image attachments.
Document?:
The component to render for document attachments.
File?:
The component to render for file attachments.
Attachment?:
The fallback component to render for any attachment type.
AttachmentByIndex
Renders a single attachment at the specified index within the message.
<MessagePrimitive.AttachmentByIndex
index={0}
components={{
Image: MyImageAttachment,
Document: MyDocumentAttachment
}}
/>MessagePrimitive.AttachmentByIndex.Props
index:
The index of the attachment to render.
components?:
The components to render for the attachment.
If
Renders children if a condition is met.
UseMessageIfProps
user?:
Render children if the message is from the user.
assistant?:
Render children if the message is from the assistant.
hasBranches?:
Render children if the message has branches.
copied?:
Render children if the message is copied.
lastOrHover?:
Render children if the message is the last or hovered over.
<Message.If user>
{/* rendered if message is from the user */}
</Message.If>
<Message.If assistant>
{/* rendered if message is from the assistant */}
</Message.If>Error
Renders children only if the message has an error status.
<MessagePrimitive.Error>
{/* rendered if the message has an error status */}
<ErrorPrimitive.Root>
<ErrorPrimitive.Message />
</ErrorPrimitive.Root>
</MessagePrimitive.Error>