Skip to main content
Version: v11

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.

TypeDefault
booleanfalse

disabled

If true, disables the text input.

TypeDefault
booleanfalse

disableMentions

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

TypeDefault
booleanfalse

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.

TypeDefault
booleanfalse

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.

TypeDefault
booleantrue

hideSendButton

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

TypeDefault
booleanfalse

Input

Custom UI component handling how the message input is rendered.

TypeDefault
componentMessageInputFlat

maxRows

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

TypeDefault
number10

mentionAllAppUsers

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

TypeDefault
booleanfalse

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

TypeDefault
booleanfalse

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.

TypeDefault
booleantrue

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

TypeDefault
booleanfalse

Did you find this page helpful?