---
id: message_input_context
title: MessageInputContext
---

The `MessageInputContext` is established within the [`MessageInput`](../message-input-components/message-input.mdx) component.
The value is the combination of the `MessageInputProps`, `MessageInputState` (returned by the `useMessageInputState` hook), and `cooldownTimerState` (returned by the `useCooldownTimer hook`).
It provides data to the [Input UI](../message-input-components/input-ui.mdx) component and its children. Use the values stored
within this context to build a custom Input UI component. You can access the context values by calling the `useMessageInputContext`
custom hook.

## Basic Usage

Pull values from context with our custom hook:

```jsx
const { autocompleteTriggers, handleSubmit } = useMessageInputContext();
```

## Values

### additionalTextareaProps

Additional props to be passed to the underlying `AutoCompleteTextarea` component, [available props](https://www.npmjs.com/package/react-textarea-autosize).

| Type   |
| ------ |
| object |

### attachments

An array of attachments added to the current message. Every attachment object carries attribute `localMetadata` that is internally used to manage the attachment state in the composer (update, remove attachments from the state, keep reference to uploaded files, keep information about the file upload state). The `localMetadata` object is discarded from each attachment object before sending the resulting message to the server. The attachments array does not contain attachments created by URL enrichment. These scraped attachments are kept in `linkPreviews` map.

| Type              |
| ----------------- |
| LocalAttachment[] |

### autocompleteTriggers

A mapping of the current triggers permitted in the currently active channel.

| Type   | Default Triggers |
| ------ | ---------------- |
| object | `/` - commands   |
|        | `@` - mentions   |
|        | `:` - emojis     |

### cancelURLEnrichment

Function cancels all the scheduled or in-progress URL enrichment queries and resets the state.

| Type       |
| ---------- |
| () => void |

### clearEditingState

Function to clear the editing state while editing a message.

| Type       |
| ---------- |
| () => void |

### closeCommandsList

Function to manually close the list of supported slash commands.

| Type       |
| ---------- |
| () => void |

### closeMentionsList

Function to manually close the list of potential users to mention.

| Type       |
| ---------- |
| () => void |

### cooldownInterval

If slow mode is enabled, the required wait time between messages for each user.

| Type   |
| ------ |
| number |

### cooldownRemaining

If slow mode is enabled, the amount of time remaining before the connected user can send another message.

| Type   |
| ------ |
| number |

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

### dismissLinkPreview

Function called when a single link preview is dismissed.

| Type                               |
| ---------------------------------- |
| (linkPreview: LinkPreview) => void |

### 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\> |

### emojiIndex

Custom class constructor to override default `NimbleEmojiIndex` from ['emoji-mart'](https://www.npmjs.com/package/emoji-mart).

| Type        | Default                                                              |
| ----------- | -------------------------------------------------------------------- |
| constructor | [ComponentContext['EmojiIndex']](./component-context.mdx#emojiindex) |

### emojiPickerIsOpen

If true, signifies the `EmojiPicker` component is currently open.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### emojiPickerRef

React mutable ref placed on the `EmojiPicker` container `div`.

| Type                                    |
| --------------------------------------- |
| React.MutableRefObject<HTMLDivElement\> |

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

### findAndEnqueueURLsToEnrich

A function responsible for initiating URL discovery and their subsequent enrichment. It is available only if link preview rendering is enabled. Link previews are disabled by default.

| Type                                              |
| ------------------------------------------------- |
| (text: string, mode?: SetLinkPreviewMode) => void |

### focus

If true, focuses the text input on component mount.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### grow

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

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### handleChange

Function that runs onChange to the underlying `textarea` component.

| Type                                           |
| ---------------------------------------------- |
| React.ChangeEventHandler<HTMLTextAreaElement\> |

### handleEmojiKeyDown

Opens the `EmojiPicker` component on Enter or Spacebar key down.

| Type                                         |
| -------------------------------------------- |
| React.KeyboardEventHandler<HTMLSpanElement\> |

### handleSubmit

Function that runs onSubmit to the underlying `textarea` component.

| Type                                                                   |
| ---------------------------------------------------------------------- |
| (event: React.BaseSyntheticEvent, customMessageData?: Message) => void |

### hideSendButton

Allows to hide MessageInput's send button. Used by `MessageSimple` to hide the send button in `EditMessageForm`. Received from `MessageInputProps`.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### insertText

Function to insert text into the value of the underlying `textarea` component.

| Type                           |
| ------------------------------ |
| (textToInsert: string) => void |

### isThreadInput

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

| Type    |
| ------- |
| boolean |

### isUploadEnabled

If true, file uploads are enabled in the currently active channel.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### linkPreviews

A Map of `LinkPreview` objects (a union type of `LinkPreviewState` and `OGAttachment`) indexed by string representing link URL. The link URL value is provided by `OGAttachment.og_scrape_url`.

| Type                       |
| -------------------------- |
| Map<LinkURL, LinkPreview\> |

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

### maxFilesLeft

The maximum number of allowed uploads minus the current number of successful uploads.

| Type   |
| ------ |
| number |

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

### mentioned_users

An array of users mentioned in the current message.

| Type           |
| -------------- |
| UserResponse[] |

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

### minRows

Min number of rows the underlying `textarea` will start with. The [`grow`](./#grow) on MessageInput prop has to be enabled for `minRows` to take effect.

| Type   | Default |
| ------ | ------- |
| number | 1       |

### noFiles

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

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### numberOfUploads

The number of successfully uploaded files for the current message.

| Type   |
| ------ |
| number |

### onPaste

Function that runs onPaste to the underlying `textarea` component.

| Type                                                        |
| ----------------------------------------------------------- |
| (event: React.ClipboardEvent<HTMLTextAreaElement\>) => void |

### onSelectEmoji

Function that runs on select of an emoji in the `EmojiPicker` component.

| Type                       |
| -------------------------- |
| (emoji: EmojiData) => void |

### onSelectUser

Function that runs on select of a user in the suggestion list following an @mention.

| Type                         |
| ---------------------------- |
| (item: UserResponse) => void |

### openCommandsList

Function to manually open the list of supported slash commands.

| Type       |
| ---------- |
| () => void |

### openEmojiPicker

Function to open the `EmojiPicker` component.

| Type                                      |
| ----------------------------------------- |
| React.MouseEventHandler<HTMLSpanElement\> |

### openMentionsList

Function to manually open the list of potential users to mention.

| Type       |
| ---------- |
| () => void |

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

### removeAttachments

Function to remove an attachment objects from the `attachments` array in the `MessageInputState`.

| Type                   |
| ---------------------- |
| (id: string[]) => void |

```jsx
const Component = () => {
  const { attachments, removeAttachments } = useMessageInputContext();

  return (
    <div>
      {attachments.map((att) => (
        <button onClick={() => removeAttachments([att.localMetadata.id])}>Remove</button>
      ))}
    </div>
  );
};
```

### setCooldownRemaining

React state hook function that sets the `cooldownRemaining` value.

| Type                                          |
| --------------------------------------------- |
| React.Dispatch<React.SetStateAction<number\>> |

### setText

Function that overrides and sets the text value of the underlying `textarea` component.

| Type                   |
| ---------------------- |
| (text: string) => void |

### showCommandsList

If true, show the list of supported slash commands above the text input.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### showMentionsList

If true, show the list of potential users to mention above the text input.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### text

The current input value of the underlying `textarea` component.

| Type   |
| ------ |
| string |

### textareaRef

React mutable ref placed on the underlying `textarea` component.

| Type                                         |
| -------------------------------------------- |
| React.MutableRefObject<HTMLTextAreaElement\> |

### uploadAttachment

Uploads the file that comes as a part of the `attachment` object argument. The function expects the `attachment` object to contain attribute `localMetadata`, which in turn should contain `file` attribute referring to the file to be uploaded and an attribute `id` with attachment's unique identifier string. The `localMetadata` object is discarded when the message is posted.

So the minimum required `attachment` object for upload would be:

```
type MinimumUploadAttachment = {
    localMetadata: {
        file: File | Blob;
        id: string;
    }
}
```

The function returns `undefined` if, custom upload function (`doImageUploadRequest`, `doFileUploadRequest`) fails.

| Type                                                                                                             |
| ---------------------------------------------------------------------------------------------------------------- |
| `(attachment: LocalAttachment<StreamChatGenerics>) => Promise<LocalAttachment<StreamChatGenerics> \| undefined>` |

### uploadNewFiles

Function to upload an array of files and store the results as `LocalAttachment` objects in `attachments` array of the `MessageInputContext`.

| Type                                |
| ----------------------------------- |
| (files: FileList \| File[]) => void |

### upsertAttachments

Function that adds or updates `attachments` array in `MessageInputState`. Accepts an array of objects.

| Type                                                                                               |
| -------------------------------------------------------------------------------------------------- |
| `(attachments: (Attachment<StreamChatGenerics> \| LocalAttachment<StreamChatGenerics>)[]) => void` |

```jsx
const Component = () => {
  const { upsertAttachments } = useMessageInputContext();

  const handleSelect = (location) => {
    upsertAttachments([
      {
        type: 'geolocation',
        longitude: location.longitude,
        latitude: location.latitude,
        name: location.name,
      },
    ]);
  };

  // ...
};
```

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