# MessageInputComponent
The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](/chat/docs/javascript/chat_permission_policies/).
## Configuration
The `MessageInput` component can use the [`Textarea`](/chat/docs/sdk/angular/components/TextareaComponent/) or the [`AutocompleteTextarea`](/chat/docs/sdk/angular/components/AutocompleteTextareaComponent/) component for displaying an HTML input for the users to type. You need to [provide your chosen component at module import](/chat/docs/sdk/angular/concepts/opt-in-architecture/).
## Emoji picker
The SDK doesn't have a built-in emoji picker, but it has support for providing your own template. Follow our [emoji picker guide](/chat/docs/sdk/angular/code-examples/emoji-picker/) to get to know more.
## Voice recorder
To enable recording voice messages, please follow the [voice recordings guide](/chat/docs/sdk/angular/code-examples/voice-recordings/).
## Customization
If you want to provide your own message input component you'll have to provide it in the following places:
- Replace the default message input inside the [channel](/chat/docs/sdk/angular/components/ChannelComponent/)
- Replace the default message input inside the [thread](/chat/docs/sdk/angular/components/ThreadComponent/)
You can replace the textarea inside the message input following our [Custom textarea guide](/chat/docs/sdk/angular/code-examples/custom-textarea/)
You can instert custom HTML content to the start or end of the message input using the `message-input-start` or `message-input-end` attributes:
```html
Custom content injected before the textarea
Custom content injected after the textarea
```
See [our customization guide](/chat/docs/sdk/angular/concepts/customization/) for more information.
If you want to create your own message input, you can use the following building blocks:
### Send and update messages
You can use [`ChannelService`](/chat/docs/sdk/angular/services/ChannelService/) to send and update messages.
### File uploads
You can use the [`AttachmentService`](/chat/docs/sdk/angular/services/AttachmentService/) to manage file uploads.
If more than one message input component can exist on your chat UI you should provide the `AttachmentService` on the component level:
```typescript
@Component({
selector: 'custom-message-input',
templateUrl: './message-input.component.html',
styles: [],
providers: [AttachmentService],
})
```
### `Textarea`
You can use the [`Textarea`](/chat/docs/sdk/angular/components/TextareaComponent/) or the [`AutocompleteTextarea`](/chat/docs/sdk/angular/components/AutocompleteTextareaComponent/) component to display the input HTML element for the users to type.
[//]: # "Start of generated content"
## Inputs and outputs
### isFileUploadEnabled
**isFileUploadEnabled**: `undefined` \| `boolean`
If file upload is enabled, the user can open a file selector from the input. Please note that the user also needs to have the necessary [channel capability](/chat/docs/javascript/chat_permission_policies/). If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:70](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L70)
---
### areMentionsEnabled
**areMentionsEnabled**: `undefined` \| `boolean`
If true, users can mention other users in messages. You also [need to use the `AutocompleteTextarea`](/chat/docs/sdk/angular/concepts/opt-in-architecture/) for this feature to work. If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:74](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L74)
---
### mentionScope
**mentionScope**: `undefined` \| `"channel"` \| `"application"`
The scope for user mentions, either members of the current channel of members of the application. If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:78](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L78)
---
### mode
**mode**: `"main"` \| `"thread"` = `'main'`
Determines if the message is being dispalyed in a channel or in a [thread](/chat/docs/javascript/threads/).
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:82](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L82)
---
### isMultipleFileUploadEnabled
**isMultipleFileUploadEnabled**: `undefined` \| `boolean`
If true, users can select multiple files to upload. If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:86](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L86)
---
### message
**message**: `undefined` \| `StreamMessage`
The message to edit
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:90](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L90)
---
### sendMessage$
**sendMessage$**: `undefined` \| `Observable`\<`void`\>
An observable that can be used to trigger message sending from the outside
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:94](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L94)
---
### inputMode
**inputMode**: `"mobile"` \| `"desktop"`
In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. If no value is provided, it is set from the [`MessageInputConfigService`](/chat/docs/sdk/angular/services/MessageInputConfigService/).
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:98](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L98)
---
### autoFocus
**autoFocus**: `boolean` = `true`
Enables or disables auto focus on the textarea element
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:102](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L102)
---
### watchForMessageToEdit
**watchForMessageToEdit**: `boolean` = `true`
By default the input will react to changes in `messageToEdit$` from [`MessageActionsService`](/chat/docs/sdk/angular/services/MessageActionsService/) and display the message to be edited (taking into account the current `mode`).
If you don't need that behavior, you can turn this of with this flag. In that case you should create your own edit message UI.
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:108](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L108)
---
### displaySendButton
**displaySendButton**: `boolean` = `true`
Use this input to control wether a send button is rendered or not. If you don't render a send button, you can still trigger message send using the `sendMessage$` input.
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:112](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L112)
---
### displayVoiceRecordingButton
**displayVoiceRecordingButton**: `boolean` = `false`
You can enable/disable voice recordings with this input
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:116](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L116)
---
### displayPollCreateButton
**displayPollCreateButton**: `boolean` = `false`
You can enable/disable polls with this input
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:120](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L120)
---
### messageUpdate
`Readonly` **messageUpdate**: `EventEmitter`\<\{ `message`: `StreamMessage` }\>
Emits when a message was successfuly sent or updated
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:124](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L124)
---
### messageDraftChange
`Readonly` **messageDraftChange**: `EventEmitter`\<`undefined` \| `DraftMessagePayload`\>
Emits the messsage draft whenever the composed message changes.
- If the user clears the message input, or sends the message, undefined is emitted.
- If active channel changes, nothing is emitted.
To save and fetch message drafts, you can use the [Stream message drafts API](/chat/docs/javascript/drafts/).
Message draft only works for new messages, nothing is emitted when input is in edit mode (if `message` input is set).
To load a message draft into the input, use the `loadDraft` method.
- If channel id doesn't match the active channel id, the draft is ignored.
- If a thread message is loaded, and the input isn't in thread mode or parent ids don't match, the draft is ignored.
#### Defined in
[projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:140](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts#L140)
[//]: # "End of generated content"
---
This page was last updated at 2026-03-06T17:04:17.170Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/components/MessageInputComponent/](https://getstream.io/chat/docs/sdk/angular/components/MessageInputComponent/).