Chat Composer

An empty chat composer component to build AI-driven message input experiences.

Minimal

A clean composer without connected integration apps or voice input.

Slash Actions & Commands

Use the / trigger key to pop up an action command palette with quick AI commands such as /explain, /refactor, /test, and /docs.

Developer & Pull Requests

Configured for coding agents with connected developer integrations and a # trigger to reference active repository pull requests alongside @ tools.

When to use

Primary prompt input for AI assistants and tool-calling agents.
Workflows requiring connected apps, permissions, or context selection.
Surfaces needing quick switching between models, attachments, and voice.

When not to use

Plain peer-to-peer chat where a simple input and send button suffice.
Ultra-narrow spaces (below ~280px) where toolbar controls get too condensed.

API Reference

ChatComposerProps

Prop	Type	Default	Description
`value`	`string`	—	Controlled text value of the composer textarea.
`defaultValue`	`string`	`""`	Initial uncontrolled textarea value.
`onChange`	`(value: string) => void`	—	Callback fired when textarea content changes.
`onSubmit`	`(value: string) => void`	—	Callback fired on form submit or Enter key.
`placeholder`	`string`	`"Type a message..."`	Textarea placeholder text.
`disabled`	`boolean`	`false`	Whether the composer controls are disabled.
`models`	`ModelItem[]`	—	List of available models for the selector dropdown.
`model`	`string`	—	Controlled active model ID.
`defaultModel`	`string`	—	Default model ID for uncontrolled selection.
`onModelChange`	`(modelId: string) => void`	—	Callback fired when a model is selected.
`apps`	`ConnectedAppItem[]`	—	List of integration services available to connect.
`connectedAppIds`	`string[]`	—	Controlled list of currently connected app IDs.
`defaultConnectedAppIds`	`string[]`	—	Default connected app IDs for uncontrolled state.
`onConnectedAppIdsChange`	`(appIds: string[]) => void`	—	Callback fired when connected apps change.
`onConnectApp`	`(appId: string) => void`	—	Callback fired when an app is connected.
`onDisconnectApp`	`(appId: string) => void`	—	Callback fired when an app is disconnected.
`enableVoice`	`boolean`	`true`	Toggles rendering of the voice input button.
`isListening`	`boolean`	`false`	Controlled state for whether the audio visualizer is recording.
`onListeningChange`	`(isListening: boolean) => void`	—	Callback fired when voice recording toggles on/off.
`onVoiceClick`	`() => void`	—	Callback fired when clicking the voice button.
`showAttachments`	`boolean`	`true`	Toggles rendering of the attachment trigger.
`attachmentOptions`	`AttachmentOptionItem[]`	—	Custom attachment actions list.
`onSelectAttachment`	`(id: string) => void`	—	Callback fired on selecting an attachment option.
`showAppSettings`	`boolean`	`true`	Toggles rendering of the settings trigger.
`onAppSettingsClick`	`() => void`	—	Callback fired when clicking the settings button.

Accessibility

All icon-only trigger buttons provide clear, descriptive aria-label attributes.
Keyboard shortcuts support submitting prompts with Enter and multiline newline with Shift + Enter.
Menu triggers and dropdown items conform to WAI-ARIA combobox and menu navigation standards with arrow key traversal.
Live audio visualizer provides status indicators and dedicated toggle states accessible to assistive tech.

Motion

Uses motion/react spring physics with stiffness: 420 and damping: 28 for smooth state morphing.
Wrapped in <AnimatePresence mode="popLayout"> to eliminate jarring layout shifts between text and audio modes.
Pulsing recording indicators and soundwave frequency bars execute GPU-accelerated looping height transitions.

Workflow Board