UI Components

As described in the Input UI component, the default MessageComposerUI is composed from smaller exported building blocks.

Best Practices

Prefer composing these exported pieces instead of re-implementing composer state.
Keep TextareaComposer central so autocomplete, commands, and shortcuts continue to work.
Treat VoiceRecordingPreviewSlot as separate from AttachmentPreviewList.
Use LinkPreviewList for scraped content previews; scraped links are not rendered in AttachmentPreviewList.
Decide whether your custom layout should match the default command-selected state, where the attachment selector and extra actions collapse while CommandChip is visible.
Reuse the default preview stack order unless your product intentionally changes that experience.

Available Building Blocks

Text composition and actions

Preview stack

Attachment and recorder UI

Command-State Behavior

In the default MessageComposerUI, command state is surfaced through CommandChip.

When a slash command is selected:

the composer applies str-chat__message-composer--command-active
AttachmentSelector is hidden by layout
AdditionalMessageComposerActions collapses out of view
MessageComposerActions no longer shows the audio-recording button

Custom composers can keep or change that behavior, but those are the current defaults to match if you want visual parity with MessageComposerUI.

`TextareaComposer` Props

Prop	Description	Type
`additionalTextareaProps`	Props forwarded to the underlying `textarea`.	`Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "defaultValue" \| "style" \| "disabled" \| "value">`
`closeSuggestionsOnClickOutside`	Closes the suggestion list when the user clicks outside the composer.	`boolean`
`containerClassName`	Class name for the outer `div` that wraps the textarea.	`string`
`listClassName`	Class name for the suggestion-list container.	`string`
`maxRows`	Maximum number of rows the textarea can grow to. Defaults to `10`.	`number`
`minRows`	Minimum number of rows the textarea can shrink to.	`number`
`shouldSubmit`	Custom keyboard-submit logic.	`(event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean`

`LinkPreviewList` Props

Prop	Description	Type
`displayLinkCount`	Number of loaded previews rendered by the default list. Defaults to `1`.	`number`

`AttachmentPreviewList` Slots

AttachmentPreviewList renders uploaded attachments and shared location previews. It does not render:

scraped links, which are handled by LinkPreviewList
voice recordings, which are handled by VoiceRecordingPreviewSlot

The list can be customized with these component props:

Prop	Purpose
`AudioAttachmentPreview`	preview for uploaded audio files
`FileAttachmentPreview`	preview for generic file uploads
`GeolocationPreview`	preview for shared location data
`ImageAttachmentPreview`	preview for uploaded images
`UnsupportedAttachmentPreview`	preview for custom local attachment types
`VideoAttachmentPreview`	preview for uploaded videos

Upload Progress And Size Indicators

The default preview stack uses a few smaller primitives during upload:

UploadProgressIndicator renders the determinate progress ring used by uploading file, audio, image, and video previews
UploadedSizeIndicator renders the uploaded-vs-total byte size fraction
FileSizeIndicator formats the individual byte values used by UploadedSizeIndicator

By default:

file previews show UploadProgressIndicator and uploaded size while uploading
audio previews show UploadProgressIndicator and can show uploaded size before playback metadata is available
image and video previews show UploadProgressIndicator as an overlay, but not the uploaded-size fraction

If you need to change that low-level upload UI without replacing the full preview components, register ProgressIndicator, UploadedSizeIndicator, or FileSizeIndicator through WithComponents.

`VoiceRecordingPreviewSlot` Props

Prop	Description	Type
`VoiceRecordingPreview`	Custom component used for the dedicated voice-recording preview area above the main attachment list.	`ComponentType<VoiceRecordingPreviewProps>`

Input UI

Emoji Picker