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.

Configuration

The MessageInput component can use the Textarea or the AutocompleteTextarea component for displaying an HTML input for the users to type. You need to provide your chosen component at module import.

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 to get to know more.

Voice recorder

To enable recording voice messages, please follow the voice recordings guide.

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
• Replace the default message input inside the thread

You can replace the textarea inside the message input following our Custom textarea guide

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:

<stream-message-input>
  <div message-input-start>Custom content injected before the textarea</div>
  <div message-input-end>Custom content injected after the textarea</div>
</stream-message-input>

See our customization guide for more information.

@Component({
  selector: 'custom-message-input',
  templateUrl: './message-input.component.html',
  styles: [],
  providers: [AttachmentService],
})

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. If no value is provided, it is set from the MessageInputConfigService.

Defined in

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:64

areMentionsEnabled

areMentionsEnabled: undefined | boolean

If true, users can mention other users in messages. You also need to use the AutocompleteTextarea for this feature to work. If no value is provided, it is set from the MessageInputConfigService.

Defined in

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:68

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.

Defined in

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:72

mode

mode: "main" | "thread" = 'main'

Determines if the message is being dispalyed in a channel or in a thread.

Defined in

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:76

isMultipleFileUploadEnabled

isMultipleFileUploadEnabled: undefined | boolean

If true, users can select multiple files to upload. If no value is provided, it is set from the MessageInputConfigService.

Defined in

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:80

message

message: undefined | StreamMessage

The message to edit

Defined in

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:84

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:88

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.

Defined in

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts:92

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:96

watchForMessageToEdit

watchForMessageToEdit: boolean = true

By default the input will react to changes in messageToEdit$ from 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:102

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:106

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:110

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:114