MessageComposer

Chat message with reply and mentions

Replying to Sam RiveraCan we move the design review to Thursday?

Message #design

Enter to send, Shift+Enter for a new line

import { useState } from 'react';
import { MessageComposer, type MessageComposerMessage } from '@rookcom/monarch-react/editor';
import { Button } from '@rookcom/monarch-react';

const PEOPLE = [
  { id: 'p1', label: 'Alex Morgan', description: 'Design' },
  { id: 'p2', label: 'Sam Rivera', description: 'Engineering' },
  { id: 'p3', label: 'Jordan Lee', description: 'Support' },
];

const searchPeople = (text: string) =>
  PEOPLE.filter((p) => p.label.toLowerCase().includes(text.toLowerCase()));

const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));

function ChatDemo() {
  const [sent, setSent] = useState<string[]>([]);
  const [replyTo, setReplyTo] = useState<{ author: string; excerpt: string } | undefined>({
    author: 'Sam Rivera',
    excerpt: 'Can we move the design review to Thursday?',
  });
  return (
    <div style={{ display: 'grid', gap: 12, width: '100%' }}>
      {sent.length ? (
        <ul style={{ margin: 0, paddingLeft: 18, fontSize: 13 }}>
          {sent.map((t, i) => (
            <li key={i}>{t}</li>
          ))}
        </ul>
      ) : null}
      <MessageComposer
        label="Message #design"
        placeholder="Message #design"
        mentions={{ search: searchPeople }}
        replyTo={replyTo}
        onDismissReply={() => setReplyTo(undefined)}
        emoji={(insert) => (
          <Button
            size="sm"
            variant="ghost"
            aria-label="Insert thumbs up"
            onClick={() => insert('👍')}
          >
            👍
          </Button>
        )}
        onSend={async (m: MessageComposerMessage) => {
          await wait(600);
          setSent((s) => [...s, m.text]);
          setReplyTo(undefined);
        }}
      />
    </div>
  );
}

<div style={{ width: '100%', maxWidth: 560 }}>
  <ChatDemo />
</div>

Usage examples

Ticket reply and internal note

import { useState } from 'react';
import { MessageComposer } from '@rookcom/monarch-react/editor';

const wait = (ms: number) => new Promise((r) => setTimeout(r, ms));

function TicketDemo() {
  const [mode, setMode] = useState('public');
  const [status, setStatus] = useState<'idle' | 'saving' | 'saved'>('idle');
  return (
    <MessageComposer
      label={mode === 'note' ? 'Internal note' : 'Reply to customer'}
      modes={[
        { value: 'public', label: 'Reply', placeholder: 'Write a reply to the customer' },
        {
          value: 'note',
          label: 'Internal note',
          tone: 'note',
          placeholder: 'Only your team can see notes',
          sendLabel: 'Add note',
        },
      ]}
      mode={mode}
      onModeChange={setMode}
      modeAside={mode === 'public' ? 'To: [email protected]' : 'Visible to your team'}
      sendOn="mod-enter"
      onDraftChange={() => {
        setStatus('saving');
        void wait(400).then(() => setStatus('saved'));
      }}
      draftStatus={status}
      maxLength={2000}
      onSend={() => wait(500)}
    />
  );
}

<div style={{ width: '100%', maxWidth: 560 }}>
  <TicketDemo />
</div>

Editing, attachments and disabled

import { MessageComposer } from '@rookcom/monarch-react/editor';

<div style={{ display: 'grid', gap: 16, width: '100%', maxWidth: 560 }}>
  <MessageComposer
    label="Edit message"
    editing
    // Editing focuses the text by default; the docs page must not move focus on load.
    // eslint-disable-next-line jsx-a11y/no-autofocus
    autoFocus={false}
    defaultValue="<p>The review is on <strong>Thursday</strong> at 10:00.</p>"
    onCancelEdit={() => {}}
    onSend={() => {}}
  />
  <MessageComposer
    label="Message"
    placeholder="Add a message"
    onFiles={() => {}}
    hasAttachments
    attachments={
      <span
        style={{
          padding: '4px 8px',
          border: '1px solid var(--mn-color-border-subtle)',
          borderRadius: 6,
          fontSize: 12,
        }}
      >
        quarterly-plan.pdf · 240 KB
      </span>
    }
    onSend={() => {}}
  />
  <MessageComposer
    label="Message #announcements"
    disabled
    disabledReason="Only admins can post in #announcements."
    onSend={() => {}}
  />
</div>

Purpose

Writes and sends a message: a chat message, a thread reply, a ticket reply or an internal note. It wraps RichTextEditor with the send behaviour and the surrounding slots every conversation surface needs.

Use when

People send messages in a conversation, thread or ticket.
The same box edits a message that was already sent.
A reply can be public or an internal note, chosen per message.

Avoid when

Long-form documents or descriptions with headings: use RichTextEditor.
A one-line comment with no formatting: a Textarea with a button loads no editor.
Email campaigns with templates and merge fields: that builder is product-specific.

Design principles

Sending is the primary action: one obvious button, one key (Enter, or ⌘/Ctrl+Enter where messages are long), and the text is never lost if sending fails.
The product owns the conversation: uploads, emoji, mentions search, drafts storage, typing presence and modes are callbacks and slots.
An internal note must never look like a public reply: the note tone changes the box surface, not just a label.
Compact by default: formatting sits on one row with the actions, so the box is small until someone writes more.

API reference

import { MESSAGE_COMPOSER_TOOLBAR, MessageComposer } from '@rookcom/monarch-react/editor';

Export	Kind	Rendering	Root class
`MESSAGE_COMPOSER_TOOLBAR`	utility	client	–
`MessageComposer`	component	client	`.mn-composer-`

Renders .mn-message-composer, containing the mode row (__modes), the reply or edit context (__context), the attachment row (__attachments), a RichTextEditor (__editor, toolbar below the text with the actions at its end) and a footer (__footer) with the key hint or disabled reason and the draft status.

editorRef reaches the underlying RichTextEditor handle (focus, insertText, clear, getHTML…).

Exports MESSAGE_COMPOSER_TOOLBAR, the default compact toolbar.

Generated from the TypeScript declarations of packages/react/src/components/collaboration/message-composer.

Properties

onSend(message) receives { html, text, json, mode }. Return a promise for the pending state: the box clears when it resolves and keeps the text when it rejects. Or control the state with sending.

value and defaultValue are HTML (the composer always uses format="html"); restore a saved draft with defaultValue.

onDraftChange(html) runs after typing pauses for draftDebounceMs, on unmount if a save is still waiting, and with "" after a successful send. Show the result with draftStatus.

modes is product data: each mode has a value, label, optional tone: "note", placeholder and send label. The chosen mode is passed to onSend.