Message Composer

About this block

Message Composer is the send bar at the bottom of any chat surface, a multiline input area with placeholder "Message Maya or type @ to mention someone." Above it a typing indicator row shows Maya Chen's avatar and the text "Maya is typing" with three animated dots. The toolbar below the input carries Paperclip, Smile, and Slash affordance buttons on the left, and a Send button paired with a "Press Enter to send" Kbd hint on the right. An @ mention hint pill for Maya Chen sits above the input field to show an active mention state.

The block is a static blueprint with no useState, the typing indicator and mention pill are always visible so the full composer state is legible in one screenshot.

When to use

Reach for this block at the foot of a chat panel, wired to your send handler and WebSocket typing events. Compose it below a message thread or inside a DM thread panel that already includes it.

A natural flow around it on an Application Pro page:

Before

• Message thread
• Dm thread panel

After

• Nothing, the composer is the last element

What you can display

One strong use is the direct message input bar. Other composer variants:

• Channel composer. Remove the @ hint pill and show the channel name in the placeholder.
• Thread reply bar. Scope the placeholder to "Reply in thread" and drop the slash affordance.
• AI prompt bar. Replace attach with a model selector and rename Send to Generate.

Tip: show the typing indicator even in a static screenshot; it is the detail that makes the block feel live rather than a placeholder.