MessageInput

The MessageInput component is a React Context provider that wraps all of the logic, functionality, and UI for the message input displayed in a channel. It provides the MessageInputContext to its children. All of the input UI components consume the MessageInputContext and rely on the stored data for their display and interaction.

Basic Usage

As a context consumer, the MessageInput component must be rendered as a child of the Channel component. MessageInput has no required props and calls custom hooks to assemble the context values loaded into the MessageInputContext and provided to its children.

<Chat client={client}>
  <ChannelList />
  <Channel>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>

UI Customization

The MessageInput component does not inject any UI, so all input customization is handled by the Input UI component. The Input UI component is passed as the Input prop into either the Channel or MessageInput component.

Props

additionalTextareaProps

Additional props to be passed to the underlying AutoCompleteTextarea component, available props.

clearEditingState

Function to clear the editing state while editing a message.

disabled

If true, disables the text input.

disableMentions

If true, the suggestion list will not display and autocomplete @mentions.

doFileUploadRequest

Function to override the default file upload request.

doImageUploadRequest

Function to override the default image upload request.

errorHandler

Custom error handler function to be called with a file/image upload fails.

focus

If true, focuses the text input on component mount.

getDefaultValue

Generates the default value for the underlying textarea element. The function’s return value takes precedence over additionalTextareaProps.defaultValue.

grow

If true, expands the text input vertically for new lines.

hideSendButton

Allows to hide MessageInput’s send button. Used by MessageSimple to hide the send button in EditMessageForm.

Input

Custom UI component handling how the message input is rendered.

isThreadInput

Signals that the MessageInput is rendered in a message thread (Thread component).

maxRows

Max number of rows the underlying textarea component is allowed to grow.

mentionAllAppUsers

If true, the suggestion list will search all app users for an @mention, not just current channel members/watchers.

mentionQueryParams

Object containing filters/sort/options overrides for an @mention user query.

message

If provided, the existing message will be edited on submit.

minRows

Min number of rows the underlying textarea will start with. The grow on MessageInput prop has to be enabled for minRows to take effect.

noFiles

If true, disables file uploads for all attachments except for those with type ‘image’.

overrideSubmitHandler

Function to override the default submit handler.

parent

When replying in a thread, the parent message object.

publishTypingEvent

If true, triggers typing events on text input keystroke.

shouldSubmit

Currently, Enter is the default submission key and Shift+Enter is the default combination for the new line. If specified, this function overrides the default behavior specified previously.

keyCodeSubmitKeys={[[16,13], [57], [48]]} // submission keys are Shift+Enter, 9, and 0

const shouldSubmit = (event) =>
  (event.key === 'Enter' && event.shiftKey) || event.key === '9' || event.key === '0';

...

shouldSubmit={shouldSubmit}

urlEnrichmentConfig

Configuration parameters for link previews to customize:

• link discovery,
• what actions to execute on link preview card dismissal,
• what is the debounce interval after which the link enrichment queries are run

It also allows us to disable querying and rendering the link previews with enrichURLForPreview parameter.

export type URLEnrichmentConfig = {
  /** Number of milliseconds to debounce firing the URL enrichment queries when typing. The default value is 1500(ms). */
  debounceURLEnrichmentMs?: number;
  /** Allows for toggling the URL enrichment and link previews in `MessageInput`. By default, the feature is disabled. */
  enrichURLForPreview?: boolean;
  /** Custom function to identify URLs in a string for later generation of link previews */
  findURLFn?: (text: string) => string[];
  /** Custom function to react to link preview dismissal */
  onLinkPreviewDismissed?: (linkPreview: LinkPreview) => void;
};

useMentionsTransliteration

If true, will use an optional dependency to support transliteration in the input for mentions. See: https://github.com/sindresorhus/transliterate