Skip to main content

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?