AttachmentPrimitive

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.unstable_Thumb />
    <AttachmentPrimitive.Name />
  </AttachmentPrimitive.Root>
);

const MyComposerAttachment = () => (
  <AttachmentPrimitive.Root>
    <AttachmentPrimitive.unstable_Thumb />
    <AttachmentPrimitive.Name />
    <AttachmentPrimitive.Remove />
  </AttachmentPrimitive.Root>
);

API Reference

Root

Contains all parts of the attachment.

This primitive renders a <div> element unless asChild is set. Accepts all standard HTML div element props.

AttachmentPrimitiveRootProps

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.

...props?: HTMLAttributes<HTMLDivElement>

All standard div element props are forwarded to the underlying element.

unstable_Thumb

The thumbnail of the attachment.

This primitive renders a <div> element unless asChild is set. Accepts all standard HTML div element props.

AttachmentPrimitiveThumbProps

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.

...props?: HTMLAttributes<HTMLDivElement>

All standard div element props are forwarded to the underlying element.

Name

The name of the attachment.

This primitive renders a text node with the attachment's file name. It accepts no props.

AttachmentPrimitiveNameProps

Remove

Removes the attachment.

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

AttachmentPrimitiveRemoveProps

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.