UI Components

As described in the Input UI section, our default MessageInputFlat component is a combination of various UI subcomponents. We export all the building blocks of MessageInputFlat, so a custom Input UI component can be built in a similar way. Check out the Input UI Customization section for an example.

The following UI components are available for use:

• TextareaComposer - wrapper component that provides data and functionality to the underlying textarea component imported from react-textarea-autosize

• EmojiPicker - picker component for selecting an emoji

• LinkPreviewList - component rendering scraped link data in a preview cards

• QuotedMessagePreview - displays a UI wrapper around the MessageInput when an existing message is being quoted

• SendButton - on click, sends a message to the currently active channel

• AttachmentPreviewList - displays a list of message attachments

• SendToChannelCheckbox - displays a checkbox to send the composed thread reply to the channel’s message list as well

TextareaComposer Props

additionalTextareaProps

Props forwarded to textarea element. Note that defaultValue, style, value and disabled are omitted.

type additionalTextareaProps = Omit<
  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
  "defaultValue" | "style" | "disabled" | "value"
>;

You can configure the default value and disabled state via MessageComposer configuration. The value is handled by the MessageComposer.textComposer state. The style should be attached via CSS.

closeSuggestionsOnClickOutside

If enabled, the suggestion list is hidden when clicked outside the MessageInput.

containerClassName

HTML class applied to the div wrapping the textarea.

listClassName

HTML class applied to the ul element wrapping suggestion items in SuggestionList.

maxRows

Maximum number of rows the teaxtarea allowed to grow.

minRows

Maximum number of rows the teaxtarea allowed to shrink.

shouldSubmit

Function result will decide whether the combination of keys pressed should be evaluated as signal for message submission.

EmojiPicker Props

small

If true, updates the CSS class name of the div container and renders a smaller version of the picker.

LinkPreviewList Props

The component does not have any props.

QuotedMessagePreview Props

renderText

Function to render message text content

type renderText = (
  text?: string,
  mentioned_users?: UserResponse[],
  options?: RenderTextOptions,
) => ReactNode;

SendButton Props

sendMessage

Function to send a message to the currently active channel.

AttachmentPreviewList

Renders message attachments in preview. The default (supported) message attachment types are:

• audio
• video
• image
• voiceRecording
• file

A special case of attachment is geolocation. The geolocation data is taken from message.shared_location and not from message.attachments.

If the attachment object has property og_scrape_url or title_link, then it is rendered by LinkPreviewList component and not AttachmentPreviewList.

AudioAttachmentPreview

Custom component to render audio type of attachments. By default, rendered with FileAttachmentPreview.

FileAttachmentPreview

Custom component to be rendered for attachments of type 'file'.

GeolocationPreview

Custom component to render the shared location data.

ImageAttachmentPreview

Custom component to be rendered for uploaded 'image' attachment.

UnsupportedAttachmentPreview

Custom component to be rendered for attachment that is not recognized as any of the default types.

VideoAttachmentPreview

Custom component to render video type of attachments. By default, rendered with FileAttachmentPreview.

VoiceRecordingPreview

Custom component to preview audio recorded using AudioRecorder component.