Component

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.
layout
DOM renderImage render
ComposerDefault
arihan/eval triage-v2router-v2.ts · 3.2 KB
Send message⌘↵

Playground

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

Loading playground

Rendered matrix

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

Default

Filled message with mention, command, attachment, shortcut hint, and send action.
arihan/eval triage-v2router-v2.ts · 3.2 KB
Send message⌘↵
Render state

Empty

Blank composer with placeholder and toolbar affordances.
Send message⌘↵
Render state

Mention

Mention popdown opened from the @ trigger.
Send message⌘↵
Render state

Command

Command popdown opened from the / trigger.
Send message⌘↵
Render state

Suggestions

Custom command suggestions with a disabled workflow row.
Send message⌘↵
Render state

Formatting

Rich formatted content with inline command and mention tokens.
Send message⌘↵
Render state

Disabled

Read-only pending surface with all controls disabled.
arihan/eval triage-v2router-v2.ts · 3.2 KB
Send message⌘↵
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
valueComposerValue-Controlled rich text, token, and attachment value. Validated by composerValueSchema.
defaultValueComposerValueempty ComposerValueUncontrolled initial value with text/html, mentions, commands, and attachments.
placeholderstringWrite a message...Placeholder shown when the editor has no content.
mentionOptionsreadonly ComposerSuggestion[]-People suggestions for @ menus. Validated by composerSuggestionSchema.
commandOptionsreadonly ComposerSuggestion[]-Slash-command suggestions for / menus. Product code owns execution.
defaultMenuKind'command' | 'mention'-Initial open menu for deterministic demos, onboarding, and screenshots.
defaultMenuQuerystring''Initial suggestion filter when defaultMenuKind is set.
submitOnEnterbooleantrueWhen true, Enter submits and Shift+Enter inserts a line break.
submitLabelReactNodeSendSend button label.
disabledbooleanfalseLocks 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.