ComposerPrimitive

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>
);

<ComposerPrimitive.AttachmentByIndex
  index={0}
  components={{
    Image: MyImageAttachment,
    Document: MyDocumentAttachment
  }}
/>

<ComposerPrimitive.AttachmentDropzone className="relative data-[dragging]:ring-2">
  <ComposerPrimitive.Input />
  <ComposerPrimitive.Send />
</ComposerPrimitive.AttachmentDropzone>

{/* Optional: Display interim transcript separately with custom styling */}
<AuiIf condition={(s) => s.composer.dictation != null}>
  <div className="dictation-preview">
    <ComposerPrimitive.DictationTranscript className="italic text-muted" />
  </div>
</AuiIf>

<ComposerPrimitive.Quote className="flex items-start gap-2 bg-muted/60 px-3 py-2">
  <ComposerPrimitive.QuoteText className="line-clamp-2 flex-1 text-sm" />
  <ComposerPrimitive.QuoteDismiss>×</ComposerPrimitive.QuoteDismiss>
</ComposerPrimitive.Quote>

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

<AuiIf condition={(s) => s.composer.isEditing}>
  {/* rendered if message is being edited */}
</AuiIf>

<AuiIf condition={(s) => s.composer.dictation != null}>
  {/* rendered if dictation is active */}
</AuiIf>

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

const Composer = () => (
  <ComposerPrimitive.Unstable_TriggerPopoverRoot>
    <ComposerPrimitive.Root>
      <ComposerPrimitive.Input />

      <ComposerPrimitive.Unstable_TriggerPopover
        char="@"
        adapter={mention.adapter}
      >
        <ComposerPrimitive.Unstable_TriggerPopover.Directive
          {...mention.directive}
        />
        <ComposerPrimitive.Unstable_TriggerPopoverCategories>
          {(categories) =>
            categories.map((cat) => (
              <ComposerPrimitive.Unstable_TriggerPopoverCategoryItem
                key={cat.id}
                categoryId={cat.id}
              >
                {cat.label}
              </ComposerPrimitive.Unstable_TriggerPopoverCategoryItem>
            ))
          }
        </ComposerPrimitive.Unstable_TriggerPopoverCategories>
        <ComposerPrimitive.Unstable_TriggerPopoverItems>
          {(items) =>
            items.map((item) => (
              <ComposerPrimitive.Unstable_TriggerPopoverItem
                key={item.id}
                item={item}
              >
                {item.label}
              </ComposerPrimitive.Unstable_TriggerPopoverItem>
            ))
          }
        </ComposerPrimitive.Unstable_TriggerPopoverItems>
        <ComposerPrimitive.Unstable_TriggerPopoverBack>
          Back
        </ComposerPrimitive.Unstable_TriggerPopoverBack>
      </ComposerPrimitive.Unstable_TriggerPopover>
    </ComposerPrimitive.Root>
  </ComposerPrimitive.Unstable_TriggerPopoverRoot>
);

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

// Equivalent shape:
// Unstable_TriggerBehavior =
//   | { kind: "directive"; formatter: Unstable_DirectiveFormatter; onInserted?: (item) => void }
//   | { kind: "action"; formatter: Unstable_DirectiveFormatter; onExecute: (item) => void; removeOnExecute?: boolean }

const {
  open,           // boolean — whether popover is visible
  query,          // string — text after the trigger character
  isSearchMode,   // boolean — whether showing search results
  highlightedIndex,
  categories,
  items,
  activeCategoryId,
  selectCategory,
  selectItem,
  goBack,
  close,
  handleKeyDown,
} = unstable_useTriggerPopoverScopeContext();

import {
  unstable_useMentionAdapter,
  type Unstable_Mention,
} from "@assistant-ui/react";

function MyComposer() {
  // Default: tools from model context as a single "Tools" category
  const mention = unstable_useMentionAdapter();

  return (
    <ComposerTriggerPopover char="@" {...mention} />
  );
}

// Multi-category + tools appended as their own category
const mention = unstable_useMentionAdapter({
  categories: [
    { id: "users", label: "Users", items: [/* ... */] },
    { id: "files", label: "Files", items: [/* ... */] },
  ],
  includeModelContextTools: true,
});

import {
  unstable_useSlashCommandAdapter,
  type Unstable_SlashCommand,
} from "@assistant-ui/react";

const SLASH_COMMANDS: readonly Unstable_SlashCommand[] = [
  { id: "summarize", execute: () => runSummarize(), icon: "FileText" },
  { id: "translate", execute: () => runTranslate(), icon: "Languages" },
];

function MyComposer() {
  const slash = unstable_useSlashCommandAdapter({ commands: SLASH_COMMANDS });
  return (
    <ComposerTriggerPopover char="/" {...slash} />
  );
}