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.

note

If a custom input is not provided via the Input prop, MessageInputFlat will be used by default.

<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.

Type
object

clearEditingState

Function to clear the editing state while editing a message.

Type
() => void

closeEmojiPickerOnClick

If true, picking an emoji from the EmojiPicker component will close the picker.

Type	Default
boolean	false

disabled

If true, disables the text input.

Type	Default
boolean	false

disableMentions

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

Type	Default
boolean	false

doFileUploadRequest

Function to override the default file upload request.

Type
(file: FileUpload['file'], channel: Channel) => Promise<SendFileAPIResponse>

doImageUploadRequest

Function to override the default image upload request.

Type
(file: ImageUpload['file'], channel: Channel) => Promise<SendFileAPIResponse>

errorHandler

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

Type
(error: Error, type: string, file: (FileUpload | ImageUpload)['file'] & { id?: string }) => void

focus

If true, focuses the text input on component mount.

Type	Default
boolean	false

getDefaultValue

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

Type
() => string | string[])

grow

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

Type	Default
boolean	true

hideSendButton

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

Type	Default
boolean	false

Input

Custom UI component handling how the message input is rendered.

Type	Default
component	MessageInputFlat

maxRows

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

Type	Default
number	10

mentionAllAppUsers

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

Type	Default
boolean	false

mentionQueryParams

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

Type
object

message

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

Type
object

noFiles

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

Type	Default
boolean	false

overrideSubmitHandler

Function to override the default submit handler.

Type
(message: object, channelCid: string) => void

parent

When replying in a thread, the parent message object.

Type
object

publishTypingEvent

If true, triggers typing events on text input keystroke.

Type	Default
boolean	true

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.

Type
(event: KeyboardEvent) => boolean

note

Migration from versions older than 9.0.0

Property keycodeSubmitKeys has been replaced by shouldSubmit and thus is no longer supported. If you had custom key codes specified like so:

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

then that would newly translate to:

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.

Type
URLEnrichmentConfig

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

Type	Default
boolean	false