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