Message Composer
Chat send bar with attach, emoji, and slash affordances, a typing indicator row, and a Send button with an Enter keyboard hint.
Chat send bar with attach, emoji, and slash affordances, a typing indicator row, and a Send button with an Enter keyboard hint.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One strong use is the direct message input bar. Other composer variants:
Tip: show the typing indicator even in a static screenshot; it is the detail that makes the block feel live rather than a placeholder.