import { ComposerPrimitiveAddAttachmentProps, ComposerPrimitiveAttachmentByIndexProps, ComposerPrimitiveAttachmentDropzoneProps, ComposerPrimitiveAttachmentsProps, ComposerPrimitiveCancelProps, ComposerPrimitiveDictateProps, ComposerPrimitiveDictationTranscriptProps, ComposerPrimitiveIfProps, ComposerPrimitiveInputProps, ComposerPrimitiveQueueProps, ComposerPrimitiveQuoteDismissProps, ComposerPrimitiveQuoteProps, ComposerPrimitiveQuoteTextProps, ComposerPrimitiveRootProps, ComposerPrimitiveSendProps, ComposerPrimitiveStopDictationProps, ComposerPrimitiveUnstable_TriggerPopoverBackProps, ComposerPrimitiveUnstable_TriggerPopoverCategoriesProps, ComposerPrimitiveUnstable_TriggerPopoverCategoryItemProps, ComposerPrimitiveUnstable_TriggerPopoverItemProps, ComposerPrimitiveUnstable_TriggerPopoverItemsProps, ComposerPrimitiveUnstable_TriggerPopoverProps, ComposerPrimitiveUnstable_TriggerPopoverRootProps } from "@/generated/typeDocs";
import { ComposerPrimitive as ComposerPrimitiveDocs } from "@/generated/primitiveDocs";

{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts /}
{/ Do not edit manually. */}

For examples and usage patterns, see Composer.

{/* api-manual */}

Anatomy#

import { ComposerPrimitive } from "@assistant-ui/react";

// creating a new message
const Composer = () => (
  <ComposerPrimitive.Root>
    <ComposerPrimitive.AttachmentDropzone>
      <ComposerPrimitive.Quote>
        <ComposerPrimitive.QuoteText />
        <ComposerPrimitive.QuoteDismiss />
      </ComposerPrimitive.Quote>
      <ComposerPrimitive.Attachments />
      <ComposerPrimitive.AddAttachment />
      <ComposerPrimitive.Input />
      <ComposerPrimitive.Send />
    </ComposerPrimitive.AttachmentDropzone>
  </ComposerPrimitive.Root>
);

// editing an existing message
const EditComposer = () => (
  <ComposerPrimitive.Root>
    <ComposerPrimitive.Input />
    <ComposerPrimitive.Send />
    <ComposerPrimitive.Cancel />
  </ComposerPrimitive.Root>
);

// with voice input (dictation)
const ComposerWithDictation = () => (
  <ComposerPrimitive.Root>
    <ComposerPrimitive.Input />
    <AuiIf condition={(s) => s.composer.dictation == null}>
      <ComposerPrimitive.Dictate />
    </AuiIf>
    <AuiIf condition={(s) => s.composer.dictation != null}>
      <ComposerPrimitive.StopDictation />
    </AuiIf>
    <ComposerPrimitive.Send />
  </ComposerPrimitive.Root>
);

{/* api-manual */}

{/* api-reference /}
{/ AUTO-GENERATED by scripts/generate-api-reference.mts /}
{/ Do not edit this block manually. */}

API Reference#

Root#

{ComposerPrimitiveDocs.Root?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Root.deprecated}

)}

{ComposerPrimitiveDocs.Root?.description}

{ComposerPrimitiveDocs.Root?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Root?.element}>`} element unless asChild is set.

<ComposerPrimitive.Root>
  <ComposerPrimitive.Input placeholder="Type your message..." />
  <ComposerPrimitive.Send>Send</ComposerPrimitive.Send>
</ComposerPrimitive.Root>

<ParametersTable {...ComposerPrimitiveRootProps} />

Input#

{ComposerPrimitiveDocs.Input?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Input.deprecated}

)}

{ComposerPrimitiveDocs.Input?.description}

{ComposerPrimitiveDocs.Input?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Input?.element}>`} element unless asChild is set.

// Ctrl/Cmd+Enter to submit (plain Enter inserts newline)
<ComposerPrimitive.Input
  placeholder="Type your message..."
  submitMode="ctrlEnter"
/>

// Insert a newline on Enter on touch-primary devices.
<ComposerPrimitive.Input
  placeholder="Type your message..."
  unstable_insertNewlineOnTouchEnter
/>

// Old API (deprecated, still supported)
<ComposerPrimitive.Input
  placeholder="Type your message..."
  submitOnEnter={true}
/>

<ParametersTable {...ComposerPrimitiveInputProps} />

{/* api-manual.Input */}

Keyboard Shortcuts#

Default (submitMode="enter"):

With submitMode="ctrlEnter":

With submitMode="none":

Touch-primary devices#

Pass unstable_insertNewlineOnTouchEnter to make plain Enter insert a newline on phones and tablets without a hardware keyboard, detected via the (pointer: coarse) and (not (any-pointer: fine)) media query. Messages then dispatch only via the explicit Send button, matching the chat-input convention used by WhatsApp, Slack, Discord, iMessage, ChatGPT, and Claude.ai.

<ComposerPrimitive.Input
  placeholder="Ask anything..."
  unstable_insertNewlineOnTouchEnter
/>

Only takes effect when submitMode resolves to "enter" (the default); "ctrlEnter" and "none" are unchanged, so a tablet paired with a hardware keyboard can still submit via Cmd/Ctrl+Enter.
{/* api-manual.Input */}

Send#

{ComposerPrimitiveDocs.Send?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Send.deprecated}

)}

{ComposerPrimitiveDocs.Send?.description}

{ComposerPrimitiveDocs.Send?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Send?.element}>`} element unless asChild is set.

<ComposerPrimitive.Send>
  Send Message
</ComposerPrimitive.Send>

<ParametersTable {...ComposerPrimitiveSendProps} />

Cancel#

{ComposerPrimitiveDocs.Cancel?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Cancel.deprecated}

)}

{ComposerPrimitiveDocs.Cancel?.description}

{ComposerPrimitiveDocs.Cancel?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Cancel?.element}>`} element unless asChild is set.

<ComposerPrimitive.Cancel>
  Cancel
</ComposerPrimitive.Cancel>

<ParametersTable {...ComposerPrimitiveCancelProps} />

AddAttachment#

{ComposerPrimitiveDocs.AddAttachment?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.AddAttachment.deprecated}

)}

{ComposerPrimitiveDocs.AddAttachment?.description}

{ComposerPrimitiveDocs.AddAttachment?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.AddAttachment?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveAddAttachmentProps} />

Attachments#

{ComposerPrimitiveDocs.Attachments?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Attachments.deprecated}

)}

{ComposerPrimitiveDocs.Attachments?.description}

{ComposerPrimitiveDocs.Attachments?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Attachments?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveAttachmentsProps} />

AttachmentByIndex#

{ComposerPrimitiveDocs.AttachmentByIndex?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.AttachmentByIndex.deprecated}

)}

{ComposerPrimitiveDocs.AttachmentByIndex?.description}

{ComposerPrimitiveDocs.AttachmentByIndex?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.AttachmentByIndex?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveAttachmentByIndexProps} />

AttachmentDropzone#

{ComposerPrimitiveDocs.AttachmentDropzone?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.AttachmentDropzone.deprecated}

)}

{ComposerPrimitiveDocs.AttachmentDropzone?.description}

{ComposerPrimitiveDocs.AttachmentDropzone?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.AttachmentDropzone?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveAttachmentDropzoneProps} />

{/* api-manual.AttachmentDropzone */}

Dictate#

{ComposerPrimitiveDocs.Dictate?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Dictate.deprecated}

)}

{ComposerPrimitiveDocs.Dictate?.description}

{ComposerPrimitiveDocs.Dictate?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Dictate?.element}>`} element unless asChild is set.

<ComposerPrimitive.Dictate>
  <MicIcon />
</ComposerPrimitive.Dictate>

<ParametersTable {...ComposerPrimitiveDictateProps} />

StopDictation#

{ComposerPrimitiveDocs.StopDictation?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.StopDictation.deprecated}

)}

{ComposerPrimitiveDocs.StopDictation?.description}

{ComposerPrimitiveDocs.StopDictation?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.StopDictation?.element}>`} element unless asChild is set.

<ComposerPrimitive.StopDictation>
  <StopIcon />
</ComposerPrimitive.StopDictation>

<ParametersTable {...ComposerPrimitiveStopDictationProps} />

DictationTranscript#

{ComposerPrimitiveDocs.DictationTranscript?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.DictationTranscript.deprecated}

)}

{ComposerPrimitiveDocs.DictationTranscript?.description}

{ComposerPrimitiveDocs.DictationTranscript?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.DictationTranscript?.element}>`} element unless asChild is set.

<AuiIf condition={(s) => s.composer.dictation != null}>
  <div className="dictation-preview">
    <ComposerPrimitive.DictationTranscript />
  </div>
</AuiIf>

<ParametersTable {...ComposerPrimitiveDictationTranscriptProps} />

If#

{ComposerPrimitiveDocs.If?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.If.deprecated}

)}

{ComposerPrimitiveDocs.If?.description}

{ComposerPrimitiveDocs.If?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.If?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveIfProps} />

Quote#

{ComposerPrimitiveDocs.Quote?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Quote.deprecated}

)}

{ComposerPrimitiveDocs.Quote?.description}

{ComposerPrimitiveDocs.Quote?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Quote?.element}>`} element unless asChild is set.

<ComposerPrimitive.Quote>
  <ComposerPrimitive.QuoteText />
  <ComposerPrimitive.QuoteDismiss>×</ComposerPrimitive.QuoteDismiss>
</ComposerPrimitive.Quote>

<ParametersTable {...ComposerPrimitiveQuoteProps} />

QuoteText#

{ComposerPrimitiveDocs.QuoteText?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.QuoteText.deprecated}

)}

{ComposerPrimitiveDocs.QuoteText?.description}

{ComposerPrimitiveDocs.QuoteText?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.QuoteText?.element}>`} element unless asChild is set.

<ComposerPrimitive.QuoteText />

<ParametersTable {...ComposerPrimitiveQuoteTextProps} />

QuoteDismiss#

{ComposerPrimitiveDocs.QuoteDismiss?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.QuoteDismiss.deprecated}

)}

{ComposerPrimitiveDocs.QuoteDismiss?.description}

{ComposerPrimitiveDocs.QuoteDismiss?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.QuoteDismiss?.element}>`} element unless asChild is set.

<ComposerPrimitive.QuoteDismiss>×</ComposerPrimitive.QuoteDismiss>

<ParametersTable {...ComposerPrimitiveQuoteDismissProps} />

Queue#

{ComposerPrimitiveDocs.Queue?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Queue.deprecated}

)}

{ComposerPrimitiveDocs.Queue?.description}

{ComposerPrimitiveDocs.Queue?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Queue?.element}>`} element unless asChild is set.

<ComposerPrimitive.Queue>
  {({ queueItem }) => (
    <div>
      <QueueItemPrimitive.Text />
      <QueueItemPrimitive.Steer>Run Now</QueueItemPrimitive.Steer>
    </div>
  )}
</ComposerPrimitive.Queue>

<ParametersTable {...ComposerPrimitiveQueueProps} />

Unstable_TriggerPopover#

{ComposerPrimitiveDocs.Unstable_TriggerPopover?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Unstable_TriggerPopover.deprecated}

)}

{ComposerPrimitiveDocs.Unstable_TriggerPopover?.description}

{ComposerPrimitiveDocs.Unstable_TriggerPopover?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Unstable_TriggerPopover?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveUnstable_TriggerPopoverProps} />

{/* api-manual.Unstable_TriggerPopover */}

Unstable_TriggerPopoverRoot#

{ComposerPrimitiveDocs.Unstable_TriggerPopoverRoot?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Unstable_TriggerPopoverRoot.deprecated}

)}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverRoot?.description}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverRoot?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Unstable_TriggerPopoverRoot?.element}>`} element unless asChild is set.

<ComposerPrimitive.Unstable_TriggerPopoverRoot>
  <ComposerPrimitive.Unstable_TriggerPopover char="@" adapter={mentionAdapter}>
    <ComposerPrimitive.Unstable_TriggerPopover.Directive formatter={formatter} />
    ...
  </ComposerPrimitive.Unstable_TriggerPopover>

  <ComposerPrimitive.Unstable_TriggerPopover char="/" adapter={slashAdapter}>
    <ComposerPrimitive.Unstable_TriggerPopover.Action onExecute={handler} />
    ...
  </ComposerPrimitive.Unstable_TriggerPopover>

  <ComposerPrimitive.Root>
    <ComposerPrimitive.Input />
  </ComposerPrimitive.Root>
</ComposerPrimitive.Unstable_TriggerPopoverRoot>

<ParametersTable {...ComposerPrimitiveUnstable_TriggerPopoverRootProps} />

Unstable_TriggerPopoverCategories#

{ComposerPrimitiveDocs.Unstable_TriggerPopoverCategories?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Unstable_TriggerPopoverCategories.deprecated}

)}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverCategories?.description}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverCategories?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Unstable_TriggerPopoverCategories?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveUnstable_TriggerPopoverCategoriesProps} />

Unstable_TriggerPopoverCategoryItem#

{ComposerPrimitiveDocs.Unstable_TriggerPopoverCategoryItem?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Unstable_TriggerPopoverCategoryItem.deprecated}

)}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverCategoryItem?.description}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverCategoryItem?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Unstable_TriggerPopoverCategoryItem?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveUnstable_TriggerPopoverCategoryItemProps} />

{/* api-manual.Unstable_TriggerPopoverCategoryItem */}

Unstable_TriggerPopoverItems#

{ComposerPrimitiveDocs.Unstable_TriggerPopoverItems?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Unstable_TriggerPopoverItems.deprecated}

)}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverItems?.description}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverItems?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Unstable_TriggerPopoverItems?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveUnstable_TriggerPopoverItemsProps} />

Unstable_TriggerPopoverItem#

{ComposerPrimitiveDocs.Unstable_TriggerPopoverItem?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Unstable_TriggerPopoverItem.deprecated}

)}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverItem?.description}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverItem?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Unstable_TriggerPopoverItem?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveUnstable_TriggerPopoverItemProps} />

{/* api-manual.Unstable_TriggerPopoverItem */}

Unstable_TriggerPopoverBack#

{ComposerPrimitiveDocs.Unstable_TriggerPopoverBack?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Unstable_TriggerPopoverBack.deprecated}

)}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverBack?.description}

{ComposerPrimitiveDocs.Unstable_TriggerPopoverBack?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Unstable_TriggerPopoverBack?.element}>`} element unless asChild is set.

<ParametersTable {...ComposerPrimitiveUnstable_TriggerPopoverBackProps} />

Unstable_RegisteredTrigger#

{ComposerPrimitiveDocs.Unstable_RegisteredTrigger?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Unstable_RegisteredTrigger.deprecated}

)}

{ComposerPrimitiveDocs.Unstable_RegisteredTrigger?.description}

{ComposerPrimitiveDocs.Unstable_RegisteredTrigger?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Unstable_RegisteredTrigger?.element}>`} element unless asChild is set.

{ComposerPrimitiveDocs.Unstable_RegisteredTrigger?.props && (

)}

Unstable_TriggerMatcher#

{ComposerPrimitiveDocs.Unstable_TriggerMatcher?.deprecated && (

Deprecated. {ComposerPrimitiveDocs.Unstable_TriggerMatcher.deprecated}

)}

{ComposerPrimitiveDocs.Unstable_TriggerMatcher?.description}

{ComposerPrimitiveDocs.Unstable_TriggerMatcher?.element && (

This primitive renders a {`<${ComposerPrimitiveDocs.Unstable_TriggerMatcher?.element}>`} element unless asChild is set.

{ComposerPrimitiveDocs.Unstable_TriggerMatcher?.props && (

)}
{/* api-reference */}