AssistantModal

A modal chat UI usually displayed in the bottom right corner of the screen.

Anatomy

import { AssistantModalPrimitive } from "@assistant-ui/react";
 
const Thread = () => (
  <AssistantModalPrimitive.Root>
    <AssistantModalPrimitive.Trigger>
      <FloatingAssistantButton />
    </AssistantModalPrimitive.Trigger>
    <AssistantModalPrimitive.Content>
      <Thread />
    </AssistantModalPrimitive.Content>
  </ThreadPrimitive.Root>
);

API Reference

Root

Contains all parts of the assistant modal.

AssistantModalPrimitiveRootProps

defaultOpen:

boolean = false

The open state of the assistant modal when it is initially rendered. Use when you do not need to control its open state.

open?:

boolean

Not recommended. The controlled open state of the assistant modal. Must be used in conjunction with onOpenChange.

onOpenChange?:

(open: boolean) => void

Event handler called when the open state of the assistant modal changes.

modal:

boolean = false

The modality of the assistant modal. When set to true, interaction with outside elements will be disabled and only modal content will be visible to screen readers.

Trigger

A button that toggles the open state of the assistant modal. AssistantModalPrimitive.Content will position itself against this button.

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

AssistantModalPrimitiveTriggerProps

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.

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

Anchor

The anchor element that the assistant modal is attached to. Defaults to the Trigger element.

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

Content

The component that pops out when the assistant modal is open.

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

AssistantModalPrimitiveContentProps

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.

side:

'top' | 'right' | 'bottom' | 'left' = 'top'

The side of the assistant modal to position against.

align:

'start' | 'center' | 'end' = 'end'

The alignment of the assistant modal to position against.

dissmissOnInteractOutside:

boolean = false

Dismiss the assistant modal when the user interacts outside of it.

Refer to radix-ui's Documentation for Popover.Content for more details.

AssistantModal

Anatomy

API Reference

Root

AssistantModalPrimitiveRootProps

defaultOpen:

open?:

onOpenChange?:

modal:

Trigger

AssistantModalPrimitiveTriggerProps

asChild:

Anchor

Content

AssistantModalPrimitiveContentProps

asChild:

side:

align:

dissmissOnInteractOutside:

On this page