Composer

Agentic message input with token chips, mentions, commands, attachments, formatting, keyboard submission, and deterministic value output.

Composer owns the reusable local interaction contract: token insertion, command and mention menus, rich text formatting shortcuts, attachment display, and controlled/uncontrolled value flow. Product code owns persistence, remote search, uploads, command execution, collaboration, and domain-specific editor schemas.

DOM render JPEG render

arihan/eval triage-v2router-v2.ts · 3.2 KB

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

Rendered matrix.

Every state maps to the same component render route through the `state` query param.

arihan/eval triage-v2router-v2.ts · 3.2 KB

Default

Filled message with mention, command, attachment, shortcut hint, and send action.

/render state

Empty

Blank composer with placeholder and toolbar affordances.

/render state

Mention

Mention popdown opened from the @ trigger.

/render state

Command

Command popdown opened from the / trigger.

/render state

Formatting

Rich formatted content with inline command and mention tokens.

/render state

arihan/eval triage-v2router-v2.ts · 3.2 KB

Disabled

Read-only pending surface with all controls disabled.

/render state

Props

Public contract.

Name	Type	Default	Description
`value`	`ComposerValue`	-	Controlled rich text, token, and attachment value. Validated by composerValueSchema.
`defaultValue`	`ComposerValue`	`empty ComposerValue`	Uncontrolled initial value with text/html, mentions, commands, and attachments.
`placeholder`	`string`	`Write a message...`	Placeholder shown when the editor has no content.
`mentionOptions`	`readonly ComposerSuggestion[]`	-	People suggestions for @ menus. Validated by composerSuggestionSchema.
`commandOptions`	`readonly ComposerSuggestion[]`	-	Slash-command suggestions for / menus. Product code owns execution.
`defaultMenuKind`	`'command' \| 'mention'`	-	Initial open menu for deterministic demos, onboarding, and screenshots.
`defaultMenuQuery`	`string`	`''`	Initial suggestion filter when defaultMenuKind is set.
`submitOnEnter`	`boolean`	`true`	When true, Enter submits and Shift+Enter inserts a line break.
`submitLabel`	`ReactNode`	`Send`	Send button label.
`disabled`	`boolean`	`false`	Locks editor, toolbar, menus, and submit action.
`onValueChange`	`(value: ComposerValue) => void`	-	Receives deterministic value output.
`onSubmit`	`(value: ComposerValue) => void`	-	Submit callback for keyboard or button send.
`onAttachmentRequest`	`() => void`	-	Called when the attach tool is clicked.
`onAttachmentRemove`	`(attachment: ComposerAttachment) => void`	-	Called after a visible attachment chip is removed.