Composer

Basic

Enter sends (Shift+Enter for a newline); whitespace-only messages are never sendable. The field clears optimistically on submit.

Mentions

An @ trigger with a local candidate list. Committed mentions are atomic tokens: backspace removes the whole token and the caret never rests inside one.

Slash commands and emoji

A / trigger scoped to the start of the message, plus a : emoji trigger from createEmojiTrigger(), which resolves against the full shared emoji set (~1,900 emoji) — the same source the picker uses. Directly typing a known :shortcode: commits the emoji without opening the menu. The menu now eases in (fade + scale) and honours reduced motion.

Inline expression panel & filled surface

accessoryPanel docks host content (here the full emoji picker) below the field, inside the composer's own stack — never a floating overlay that covers the message you are typing, the web analogue of WhatsApp's panel-in-the-keyboard. A toggle button appears in the action row; open/close is animated and reduced-motion aware. This example also uses surface="filled": a calm muted fill distinct from the page with a tasteful focus ring.

Attachments

Files arrive via paste, drag-and-drop, or imperatively through apiRef.addAttachment. Chips render in a tray above the field and now animate in (fade + scale) and out (a faster exit) before unmounting; attachments-only messages are sendable. Under reduced motion the removal is instant.

Busy / stop

While busy, the send button becomes a stop button and Enter is swallowed — the ChatGPT/Claude-style send ⇄ stop swap is one prop.

Edit in place

beginEdit seeds the field and submissions carry editingMessageId; Escape cancels and restores the pre-edit draft. ArrowUp on an empty field fires onEditLastRequested.

States

Disabled (distinct placeholder), read-only (selectable, not editable), a draft-preserving validation error, and the grapheme-aware counter near the limit.

Installation

Usage

import { RefractionComposer, type ComposerTrigger } from '@refraction-ui/react'

const mentions: ComposerTrigger = {
  id: 'mention',
  symbol: '@',
  resolve: (query) => searchTeammates(query), // sync or async
}

export function ChatFooter() {
  return (
    <RefractionComposer
      placeholder="Send a message…"
      triggers={[mentions]}
      maxLength={2000}
      onSubmit={({ plainText, tokens, attachments }) => {
        sendMessage({ plainText, tokens, attachments })
      }}
    />
  )
}

Props