Composer

Composer is the default Chakra surface for writing a message in a new or existing session. It owns the visual composition; the headless composer contract owns input, submission, and session state.

Usage

HyperflowApp mounts the Composer in its default session pages. When building a custom Chakra session page, render the component inside the Hyperflow application boundary:

import { Composer } from '@hyperflow/chakra-ui'

export function SessionComposer() {
  return <Composer />
}

The default surface includes the text input, attachments, send or stop behavior, and the available agent, model, toolhost, context-window, and approval controls.

Examples

Replace the text input

Use inputComponent to change the message field while keeping the Composer’s controlled value, keyboard handling, and submission behavior.

import {
  Composer,
  ComposerTextInput,
  type ComposerTextInputProps,
} from '@hyperflow/chakra-ui'

function ProjectInput(props: ComposerTextInputProps) {
  return <ComposerTextInput {...props} placeholder="Ask the project assistant" />
}

export function ProjectComposer() {
  return <Composer inputComponent={ProjectInput} />
}

Guide

Keep state in the Composer contract

Composer gets its draft, attachments, selected options, send state, and stop behavior from useComposer. Do not recreate that state or call the Hyperflow client from a replacement input or button.

Replace one visual part at a time

Use inputComponent, sendButtonComponent, attachmentMenuComponent, or attachmentPreviewComponent to replace one part of the surface. Each replacement receives a narrow prop contract from the parent Composer.

Customize the control slots

Pass slotRenderers to replace the agent, model, toolhost, context-window, or approval-policy control. Use slotSurfaceVariant="appendix" when the top and bottom slot regions should sit outside the Composer card.

For a complete customization walkthrough, see Customize the Composer.

Props

For the complete ComposerProps type, see the @hyperflow/chakra-ui reference.

Related components

• ComposerTextInput
• ComposerSendButton
• ComposerAttachmentMenu
• ComposerAttachmentPreview
• Composer slots