ComposerSendButton

ComposerSendButton is the default submit control for Composer. It switches between sending a draft and stopping an active response using state from the parent contract.

Usage

Replace the default control through sendButtonComponent. Composer supplies the submission and generation state.

import {
  Composer,
  ComposerSendButton,
  type ComposerSendButtonProps,
} from '@hyperflow/chakra-ui'

function ProjectSendButton(props: ComposerSendButtonProps) {
  return <ComposerSendButton {...props} />
}

export function ProjectComposer() {
  return <Composer sendButtonComponent={ProjectSendButton} />
}

Examples

Change the send label

The default button uses the same send and stop behavior when you change only its label.

function ProjectSendButton(props: ComposerSendButtonProps) {
  return <ComposerSendButton {...props} submitLabel="Send message" />
}

Guide

Let Composer decide whether to submit

canSubmit already accounts for the current draft, attachments, and pending work. Use it to control the disabled state instead of recomputing it.

Render the stop action while generating

When isGenerating is true, render an action that calls onStop. This lets a user stop the current response without submitting another message.

Keep busy feedback visible

Use isBusy and isStopping to show pending feedback while Composer submits or stops a response.

Props

Prop	Default	Type
`canSubmit`	—	`boolean` Whether the current draft can be submitted.
`isBusy`	—	`boolean` Whether a submit action is pending.
`isGenerating`	`false`	`boolean` Whether the active response can be stopped.
`isStopping`	`false`	`boolean` Whether a stop request is pending.
`onStop`	—	`MouseEventHandler<HTMLButtonElement>` Stops the active response.
`submitLabel`	`"Invia"`	`string` Accessible label for the send action.

On this page