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.
#
ConfigurationThe 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 pickerThe 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.
#
CustomizationIf 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
- Provide your own messageInputTemplate$ to the
CustomTemplatesService
See our customization guide for more information.
note
If you want to create your own message input, you can use the following building blocks:
#
Send and update messagesYou can use ChannelService
to send and update messages.
#
File uploadsYou can use the 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:
@Component({
selector: 'custom-message-input',
templateUrl: './message-input.component.html',
styles: [],
providers: [AttachmentService],
})
Textarea
#
You can use the Textarea
or the AutocompleteTextarea
component to display the input HTML element for the users to type.
#
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 inlib/message-input/message-input.component.ts:61
#
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 inlib/message-input/message-input.component.ts:65
#
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 inlib/message-input/message-input.component.ts:69
#
mode• mode: "thread"
| "main"
= 'main'
Determines if the message is being dispalyed in a channel or in a thread.
#
Defined inlib/message-input/message-input.component.ts:73
#
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 inlib/message-input/message-input.component.ts:77
#
message• message: undefined
| StreamMessage
<DefaultStreamChatGenerics
>
The message to edit
#
Defined inlib/message-input/message-input.component.ts:81
#
sendMessage$• sendMessage$: undefined
| Observable
<void
>
An observable that can be used to trigger message sending from the outside
#
Defined inlib/message-input/message-input.component.ts:85
#
inputMode• inputMode: "desktop"
| "mobile"
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 inlib/message-input/message-input.component.ts:89
#
messageUpdate• Readonly
messageUpdate: EventEmitter
<void
>
Emits when a message was successfuly sent or updated