Composer UI components

The default input UI is built from the parts on this page. Each part reads the composer from useMessageComposerController(), so it works in a channel, in a thread and while editing. Message composer UI explains what each part shows and which store it reads.

Best practices

• Replace a part by registering it under its override key with WithComponents, so the default layout keeps the rest.
• Render the parts inside MessageComposer. Several of them, such as TextareaComposer and MessageComposerActions, read MessageComposerContext and throw outside it.
• Keep TextareaComposer in a custom layout, so mentions, commands and the Enter key keep working.
• The default layout passes a few parts what they need, such as command to CommandChip and sendMessage to SendButton. To set any other prop of a part, register a component that renders the part with it.

Available building blocks

MessageComposerActions picks its control in this order: the stop button while an AI is thinking or generating a reply; the cooldown timer during a cooldown; the record button when the composer is empty, nothing is being edited, no command is active and recording is turned on; the send button otherwise. While editing or with a command, the default send button shows a checkmark.

Command-state behavior

When the user selects a command, such as /giphy, the default layout:

• adds the str-chat__message-composer--command-active class to the composer;
• shows CommandChip before the input;
• hides AttachmentSelector and AdditionalMessageComposerActions with a CSS transition, and takes them out of the tab order;
• leaves the record button out of MessageComposerActions;
• changes the placeholder of the input to the command's arguments, or to "Search GIFs" for /giphy.

Escape, or Backspace in an empty input, clears the command. A custom layout gets the chip and the placeholder from the parts, and decides the rest itself. Commands and Giphy explains commands.

MessageComposerPreviews props

It renders the items whose isVisible holds, and nothing when none does. Each item has these fields:

useMessageComposerPreviewState lists the fields of MessageComposerPreviewVisibilityFilterParams.

The components registered under EditedMessagePreview, QuotedMessagePreview, VoiceRecordingPreviewSlot, AttachmentPreviewList and LinkPreviewList render inside the default items. Replacing parts says when each of them mounts. Message composer UI lists the default items and when each one shows.

TextareaComposer props

TextareaComposer takes every <textarea> prop except defaultValue, disabled, style and value, and these:

Some <textarea> props behave in a particular way:

• placeholder replaces "Send a message". A command's placeholder and the cooldown's "Slow mode, wait 5s..." still take its place.
• className is added to the default class names.
• onChange, onKeyDown and onScroll replace the default handling. With your own onChange, typing no longer reaches the composer. With your own onKeyDown, Enter no longer submits and the arrow keys no longer move through suggestions.
• onSelect runs before the default handling, which keeps the composer's cursor position.
• onPaste runs before the paste handler from MessageComposerContext. Call event.preventDefault() in it to skip that handler. An onPaste on <TextareaComposer/> replaces additionalTextareaProps.onPaste of <MessageComposer/>.

The input is disabled while the composer's text.enabled setting is false, and during a slow-mode cooldown.

LinkPreviewList props

The list shows the previews that are loading or loaded. To show more than one, register a LinkPreviewList that renders the default with displayLinkCount. Link previews explains them.

AttachmentPreviewList slots

AttachmentPreviewList renders the files, images and videos in the composer, each with its upload progress, and opens images and videos in a gallery. It leaves out:

• link previews, which LinkPreviewList renders;
• voice recordings, which VoiceRecordingPreviewSlot renders;
• the location to share, which the location item of the preview set renders with <GeolocationPreview/>.

Each slot replaces the preview of one kind of attachment:

Each preview gets the attachment, removeAttachments to remove it, and handleRetry, which uploads it again in place with AttachmentManager.uploadFile() and does nothing while attachmentManager.isUploadEnabled is false, as Retrying a failed upload explains. Image and video previews also get openPreview, which opens the gallery at that attachment. The default file and media previews aren't exported. AudioAttachmentPreviewProps and MediaAttachmentPreviewProps aren't exported either; read them from AttachmentPreviewListProps, as in AttachmentPreviewListProps["VideoAttachmentPreview"].

To set the slots, register an AttachmentPreviewList that renders the default with them. The Attachment previews recipe does this.

Upload progress and size indicators

The previews show an upload with these components:

By default:

• file previews show the progress ring and the size while uploading, and the size once uploaded;
• voice recording previews show the progress ring while uploading, and the size until the recording's duration is known;
• image and video previews show the progress ring over the thumbnail, and no size.

To change these without replacing the previews, register ProgressIndicator, LoadingIndicator, UploadedSizeIndicator or FileSizeIndicator with WithComponents. ProgressIndicator gets percent, from 0 to 100.

VoiceRecordingPreviewSlot props

The slot shows the first voice recording in the composer, above the attachment list. It gets the same props as the attachment previews: attachment, handleRetry and removeAttachments. Voice recordings and audio playback explains recording.

Hooks

• useMessageComposerPreviewSetFilter: the items of a preview set that are visible.
• useMessageComposerPreviewState: the composer state that isVisible gets.
• useAttachmentManagerState: the attachments and how many more fit.
• useAttachmentsForPreview: the attachments, the poll and the location to preview.
• useMessageComposerHasSendableData: whether the send button is enabled.
• useMessageComposerCommands: the channel's commands and whether each one can be used.