AssistantModalPrimitive

A popover chat interface for floating assistant UI in the corner of the screen.

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>
  </AssistantModalPrimitive.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.