Components for displaying and managing file attachments in messages and composer.
Buttons to interact with attachments.
Dual Use! Attachments can appear in both messages and composers.
Anatomy
import { AttachmentPrimitive } from "@assistant-ui/react";
const MyMessageAttachment = () => (
<AttachmentPrimitive.Root>
<AttachmentPrimitive.Thumbnail />
<AttachmentPrimitive.Name />
</AttachmentPrimitive.Root>
);
const MyComposerAttachment = () => (
<AttachmentPrimitive.Root>
<AttachmentPrimitive.Thumbnail />
<AttachmentPrimitive.Name />
<AttachmentPrimitive.Remove />
</AttachmentPrimitive.Root>
);API Reference
Container
Containts all parts of the attachment.
This primitive renders a <div> element unless asChild is set.
AttachmentPrimitiveRootProps
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.
Thumbnail
The thumbnail of the attachment.
This primitive renders a <div> element unless asChild is set.
AttachmentPrimitiveThumbnailProps
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.
Name
The name of the attachment.
This primitive renders a <div> element unless asChild is set.
AttachmentPrimitiveNameProps
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.
Remove
Removes the attachment.
This primitive renders a <button> element unless asChild is set.
AttachmentPrimitiveRemoveProps
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.