Agentic

Composer

Composes plain-text or rich drafts with mentions, slash actions, toolbar pickers, attachments, a working state, and one submission policy.

idle

Usage

import {
	Composer,
	ComposerActionGroup,
	ComposerActions,
	ComposerAttachment,
	ComposerAttachments,
	ComposerContextMeter,
	ComposerDictation,
	ComposerInput,
	ComposerPicker,
	ComposerStatusBar,
	ComposerStatusBarGroup,
	ComposerStatusItem,
	ComposerSubmit,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Composer>
	<ComposerAttachments>
		<ComposerAttachment />
	</ComposerAttachments>
	<ComposerInput />
	<ComposerActions>
		<ComposerActionGroup>
			<ComposerPicker />
		</ComposerActionGroup>
		<ComposerActionGroup>
			<ComposerPicker />
			<ComposerDictation />
			<ComposerSubmit />
		</ComposerActionGroup>
	</ComposerActions>
</Composer>
<ComposerStatusBar>
	<ComposerStatusBarGroup>
		<ComposerStatusItem />
	</ComposerStatusBarGroup>
	<ComposerStatusBarGroup>
		<ComposerContextMeter />
	</ComposerStatusBarGroup>
</ComposerStatusBar>

Examples

While the agent works

Light travels the rim and Stop replaces Send. The person can keep typing the next message.

Attachments

Files keep their tiles while they upload, and Send waits until every upload finishes.

Mentions and commands

@ adds files and people as chips, and / runs a command on the draft.

Single line

One line for a chat sidebar. It grows into a stacked composer once the draft wraps.

Recommendations

Guidance	Practice
Do	Name the message input and submit action. Preserve the draft when sending fails.

Usage boundaries

Guidance	Boundary
Scope	Composer owns draft editing and input controls. Use Conversation for message history and auto-scroll, and Message for individual messages.
Scope	The caller owns sending, attachments, and retries. Submitting a draft does not prove successful delivery.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`value / defaultValue`	`ComposerValue`	`[]`	A structured array of text and mention/action parts. Choose controlled or uncontrolled state.
`onValueChange`	`(value: ComposerValue, details: ComposerChangeDetails) => void`	`—`	Reports input, suggestion selection, history, and reset changes. Update controlled values synchronously.
`onSubmit`	`(value: ComposerValue) => void`	`—`	Receives an allowed draft. Draft clearing and transport remain caller-owned.
`ComposerInput`	`ComposerInputProps`	`Contenteditable div`	Supply an accessible name. Render a native textarea for plain-text editing; triggers and tokens require contenteditable.
`layout`	`"stacked" \| "adaptive"`	`"stacked"`	Adaptive actions sit beside a one-line draft, then move below multiline text.
`submitOnEnter`	`"always" \| "desktop" \| "never"`	`"always"`	Shift+Enter inserts a line break. Desktop sends only with a fine pointer. Never leaves Enter for editing.
`disabled / readOnly / submitDisabled / allowEmpty`	`boolean`	`false`	Disable all editing, allow copying without edits, block submission while editing, or permit attachment-only messages.
`triggers`	`readonly ComposerTrigger[]`	`[]`	Configure trigger characters, items, filtering, loading/error status, and optional async query identity.
`onQueryChange / onAction`	`Query and action callbacks`	`—`	Observe caret-specific queries. Action callbacks remove the query without inserting a token or submitting.
`ComposerPopup / ComposerList / ComposerItem / ComposerStatus`	`Suggestion parts`	`Optional`	Compose an anchored listbox, keyboard-highlighted items, and loading or empty feedback. Suggestions retain editor focus.
`ComposerToken / renderToken`	`Token presentation`	`Text with trigger`	Use chip presentation and icons without changing canonical text, IDs, kinds, or metadata.
`ComposerActions`	`ComposerActionsProps`	`Optional`	Keeps controls outside the draft scroller.
`ComposerActionGroup`	`ComposerActionGroupProps`	`align="start"`	Aligns leading or trailing controls in stacked and adaptive layouts.
`ComposerPicker`	`{ label, value, options, onValueChange, icon?, learnMoreHref?, effort?, onEffortChange? }`	`Optional`	A quiet toolbar choice, such as the model or the permission mode. Options can carry an icon, shown on the trigger once chosen, a one-line description, a group heading such as the provider, and efforts: the levels that model's API takes. The chosen row then opens them to the side, and the trigger reads 'Claude Opus 5.5 · High'. learnMoreHref adds a link beside the menu title.
`ComposerSubmit`	`ComposerSubmitProps`	`Native button`	Supports a rendered Button and obeys the shared submission gate. The default button stays quiet until there is something to send. A local disabled override never bypasses the parent gate.
`render / name`	`Base UI render prop / string`	`form / —`	Render a div inside another form. Name writes canonical message text to FormData. Form reset restores the initial draft.
`getComposerText / useComposerContext / useComposerFilter`	`Helpers and hooks`	`—`	Extract canonical text, build custom reset/trigger/submit controls, or filter suggestions with locale-aware helpers.
`submitOnEmptySuggestions / getSuggestionsAnnouncement`	`boolean / callback`	`false / English announcement`	Configure Enter when an open suggestion list has no selectable items, and customize the live result announcement.
`--composer-min-rows / --composer-max-rows / --composer-max-height`	`CSS variables`	`1–2 / 4–8 / row-based`	Configure input growth on the Composer frame. Draft scrolling is capped at half the viewport; actions stay visible.
`Composer.working`	`boolean`	`false`	While the agent works on the last message, a band of light travels the rim. It pauses when the draft has keyboard focus and stays still under reduced motion.
`Composer.onStop`	`() => void`	`undefined`	While working, turns the submit button into Stop and keeps Enter from sending. Stopping moves focus to the draft.
`ComposerAttachments`	`Tray`	`undefined`	Lists files above the input; place it first inside Composer.
`ComposerAttachment`	`{ name, preview?, progress?, onRemove? }`	`undefined`	One file tile: an image thumbnail or its extension, upload progress, and a remove button.
`ComposerStatusBar`	`Row`	`undefined`	A quiet row under the composer for where the agent works; group items with ComposerStatusBarGroup.
`ComposerDictation`	`{ listening, onListeningChange }`	`Optional`	A microphone toggle for the toolbar. The app runs speech recognition and puts the words into the draft; the button shows the recording state with aria-pressed.
`ComposerContextMeter`	`{ usedTokens, maxTokens, usage?, cost?, currency?, locale? }`	`undefined`	Shows "57% context" with a ring. Hovering or pressing it opens a card with used / limit, a bar, and, when passed, input, output, reasoning, and cached tokens. usage takes the AI SDK usage object as is. cost is in currency units; Mizen ships no prices.

import { Composer, ComposerActionGroup, ComposerActions, ComposerAttachment, ComposerAttachments, ComposerContextMeter, ComposerDictation, ComposerInput, ComposerPicker, ComposerStatusBar, ComposerStatusBarGroup, ComposerStatusItem, ComposerSubmit, } from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Composer>
	<ComposerAttachments>
		<ComposerAttachment />
	</ComposerAttachments>
	<ComposerInput />
	<ComposerActions>
		<ComposerActionGroup>
			<ComposerPicker />
		</ComposerActionGroup>
		<ComposerActionGroup>
			<ComposerPicker />
			<ComposerDictation />
			<ComposerSubmit />
		</ComposerActionGroup>
	</ComposerActions>
</Composer>
<ComposerStatusBar>
	<ComposerStatusBarGroup>
		<ComposerStatusItem />
	</ComposerStatusBarGroup>
	<ComposerStatusBarGroup>
		<ComposerContextMeter />
	</ComposerStatusBarGroup>
</ComposerStatusBar>

Examples

While the agent works

Light travels the rim and Stop replaces Send. The person can keep typing the next message.

Attachments

Files keep their tiles while they upload, and Send waits until every upload finishes.

Mentions and commands

@ adds files and people as chips, and / runs a command on the draft.

Single line

One line for a chat sidebar. It grows into a stacked composer once the draft wraps.

Guidance

Practice

Name the message input and submit action. Preserve the draft when sending fails.

Guidance

Boundary

Scope

Composer owns draft editing and input controls. Use Conversation for message history and auto-scroll, and Message for individual messages.

Scope

The caller owns sending, attachments, and retries. Submitting a draft does not prove successful delivery.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`value / defaultValue`	`ComposerValue`	`[]`	A structured array of text and mention/action parts. Choose controlled or uncontrolled state.
`onValueChange`	`(value: ComposerValue, details: ComposerChangeDetails) => void`	`—`	Reports input, suggestion selection, history, and reset changes. Update controlled values synchronously.
`onSubmit`	`(value: ComposerValue) => void`	`—`	Receives an allowed draft. Draft clearing and transport remain caller-owned.
`ComposerInput`	`ComposerInputProps`	`Contenteditable div`	Supply an accessible name. Render a native textarea for plain-text editing; triggers and tokens require contenteditable.
`layout`	`"stacked" \| "adaptive"`	`"stacked"`	Adaptive actions sit beside a one-line draft, then move below multiline text.
`submitOnEnter`	`"always" \| "desktop" \| "never"`	`"always"`	Shift+Enter inserts a line break. Desktop sends only with a fine pointer. Never leaves Enter for editing.
`disabled / readOnly / submitDisabled / allowEmpty`	`boolean`	`false`	Disable all editing, allow copying without edits, block submission while editing, or permit attachment-only messages.
`triggers`	`readonly ComposerTrigger[]`	`[]`	Configure trigger characters, items, filtering, loading/error status, and optional async query identity.
`onQueryChange / onAction`	`Query and action callbacks`	`—`	Observe caret-specific queries. Action callbacks remove the query without inserting a token or submitting.
`ComposerPopup / ComposerList / ComposerItem / ComposerStatus`	`Suggestion parts`	`Optional`	Compose an anchored listbox, keyboard-highlighted items, and loading or empty feedback. Suggestions retain editor focus.
`ComposerToken / renderToken`	`Token presentation`	`Text with trigger`	Use chip presentation and icons without changing canonical text, IDs, kinds, or metadata.
`ComposerActions`	`ComposerActionsProps`	`Optional`	Keeps controls outside the draft scroller.
`ComposerActionGroup`	`ComposerActionGroupProps`	`align="start"`	Aligns leading or trailing controls in stacked and adaptive layouts.
`ComposerPicker`	`{ label, value, options, onValueChange, icon?, learnMoreHref?, effort?, onEffortChange? }`	`Optional`	A quiet toolbar choice, such as the model or the permission mode. Options can carry an icon, shown on the trigger once chosen, a one-line description, a group heading such as the provider, and efforts: the levels that model's API takes. The chosen row then opens them to the side, and the trigger reads 'Claude Opus 5.5 · High'. learnMoreHref adds a link beside the menu title.
`ComposerSubmit`	`ComposerSubmitProps`	`Native button`	Supports a rendered Button and obeys the shared submission gate. The default button stays quiet until there is something to send. A local disabled override never bypasses the parent gate.
`render / name`	`Base UI render prop / string`	`form / —`	Render a div inside another form. Name writes canonical message text to FormData. Form reset restores the initial draft.
`getComposerText / useComposerContext / useComposerFilter`	`Helpers and hooks`	`—`	Extract canonical text, build custom reset/trigger/submit controls, or filter suggestions with locale-aware helpers.
`submitOnEmptySuggestions / getSuggestionsAnnouncement`	`boolean / callback`	`false / English announcement`	Configure Enter when an open suggestion list has no selectable items, and customize the live result announcement.
`--composer-min-rows / --composer-max-rows / --composer-max-height`	`CSS variables`	`1–2 / 4–8 / row-based`	Configure input growth on the Composer frame. Draft scrolling is capped at half the viewport; actions stay visible.
`Composer.working`	`boolean`	`false`	While the agent works on the last message, a band of light travels the rim. It pauses when the draft has keyboard focus and stays still under reduced motion.
`Composer.onStop`	`() => void`	`undefined`	While working, turns the submit button into Stop and keeps Enter from sending. Stopping moves focus to the draft.
`ComposerAttachments`	`Tray`	`undefined`	Lists files above the input; place it first inside Composer.
`ComposerAttachment`	`{ name, preview?, progress?, onRemove? }`	`undefined`	One file tile: an image thumbnail or its extension, upload progress, and a remove button.
`ComposerStatusBar`	`Row`	`undefined`	A quiet row under the composer for where the agent works; group items with ComposerStatusBarGroup.
`ComposerDictation`	`{ listening, onListeningChange }`	`Optional`	A microphone toggle for the toolbar. The app runs speech recognition and puts the words into the draft; the button shows the recording state with aria-pressed.
`ComposerContextMeter`	`{ usedTokens, maxTokens, usage?, cost?, currency?, locale? }`	`undefined`	Shows "57% context" with a ring. Hovering or pressing it opens a card with used / limit, a bar, and, when passed, input, output, reasoning, and cached tokens. usage takes the AI SDK usage object as is. cost is in currency units; Mizen ships no prices.