logoassistant-ui
Primitives

ActionBar

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:

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.

Thumbnail

The thumbnail of the attachment.

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

AttachmentPrimitiveThumbnailProps

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.

Name

The name of the attachment.

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

AttachmentPrimitiveNameProps

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.

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.

Previous

ContentPart

Next

Picking a Runtime

On this page

Edit on Github