ComposerActionStatus

A send/cancel button that auto-switches based on thread state.

Overview

ComposerActionStatus replaces the common pattern of conditionally rendering a Send button when idle and a Cancel button when running. It reads the thread and composer state and renders the appropriate action automatically.

Demo

Try typing in the input, sending a message, and watch the button change between idle, composing, and running states.

Try typing, sending, and watch the button states change

<ComposerPrimitive.Root>
  <ComposerPrimitive.Input />
  <ComposerActionStatus />
</ComposerPrimitive.Root>

<ComposerPrimitive.Root>
  <ComposerPrimitive.Input />

  {/* Conditional rendering based on thread state */}
  <AuiIf condition={({ thread }) => !thread.isRunning}>
    <ComposerPrimitive.Send>
      <ArrowUpIcon />
    </ComposerPrimitive.Send>
  </AuiIf>
  <AuiIf condition={({ thread }) => thread.isRunning}>
    <ComposerPrimitive.Cancel>
      <StopIcon />
    </ComposerPrimitive.Cancel>
  </AuiIf>
</ComposerPrimitive.Root>

States

State	Condition	Renders
idle	Not running, composer is empty	Muted send button (disabled)
composing	Not running, composer has text	Active send button
running	Thread is running	Cancel/stop button

Props

Prop

Type

{/* Orange rounded square */}
<ComposerActionStatus
  idleButtonClassName="flex size-8 rounded-lg items-center justify-center bg-orange-400/20 text-white/40"
  buttonClassName="flex size-8 rounded-lg items-center justify-center bg-orange-400 text-white"
/>

{/* Cyan circle with custom icon */}
<ComposerActionStatus
  idleButtonClassName="flex size-8 rounded-full items-center justify-center bg-cyan-400/20 text-black/40"
  buttonClassName="flex size-8 rounded-full items-center justify-center bg-cyan-400 text-black"
  renderVisual={() => <ArrowRightIcon />}
/>

{/* Minimal with PaperPlane icon */}
<ComposerActionStatus
  idleButtonClassName="flex size-8 rounded-full items-center justify-center text-black/40 dark:text-white/40"
  buttonClassName="flex size-8 rounded-full items-center justify-center text-black dark:text-white"
  renderVisual={() => <PaperPlaneIcon />}
/>

Underlying Primitives

ComposerPrimitive.Send — for idle and composing states
ComposerPrimitive.Cancel — for running state
Uses useThread() and useComposer() hooks internally to derive state