logoassistant-ui
Primitives

Message

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.Content />
 
    <BranchPicker />
    <ActionBar />
  </Message.Root>
);
 
const AssistantMessage = () => (
  <MessagePrimitive.Root>
    Assistant: <MessagePrimitive.Content />
 
    <BranchPicker />
    <ActionBar />
  </Message.Root>
);

API Reference

Root

Containts all parts of the message.

This primitive renders a <div> element unless asChild is set.

MessagePrimitiveRootProps

asChild:

boolean = false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

Content

The content of the message. This renders a separate component for each content part of the message.

MessagePrimitiveContentProps

components?:

ContentPartComponents

The components to render for each content part.

ContentPartComponents

Text?:

TextContentPartComponent

The component to render for each text content part.

Image?:

ImageContentPartComponent

The component to render for each image content part.

UI?:

UIContentPartComponent

The component to render for each UI content part.

tools?:

object

The component to render for each tool call content part.

by_name?:

Record<string, ToolCallContentPartComponent>

The components to render for each tool call content part.

Fallback?:

ToolCallContentPartComponent

The fallback component to render for tool call content parts.

If

Renders children if a condition is met.

UseMessageIfProps

user?:

boolean | undefined

Render children if the message is from the user.

assistant?:

boolean | undefined

Render children if the message is from the assistant.

hasBranches?:

boolean | undefined

Render children if the message has branches.

copied?:

boolean | undefined

Render children if the message is copied.

lastOrHover?:

boolean | undefined

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>

useMessageIf

import { useMessageIf } from "@assistant-ui/react";
 
const Message = () => {
  const isUser = useMessageIf({ user: true });
 
  return isUser ? <UserMessage /> : <AssistantMessage />;
};

Previous

Composer

Next

BranchPicker

On this page

AnatomyAPI ReferenceRootContentIfuseMessageIf
Edit on Github