Buttons to interact with attachments.

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.

<ParametersTable
type="AttachmentPrimitiveRootProps"
parameters={[
{
name: "asChild",
},
{
name: "...props",
type: "HTMLAttributes",
description: "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.

<ParametersTable
type="AttachmentPrimitiveThumbProps"
parameters={[
{
name: "asChild",
},
{
name: "...props",
type: "HTMLAttributes",
description: "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.

Remove#

Removes the attachment.

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

<ParametersTable
type="AttachmentPrimitiveRemoveProps"
parameters={[
{
name: "asChild",
},
]}
/>