React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
REST@Component({
selector: "app-custom-message-input",
template: `
<stream-autocomplete-textarea
[(value)]="textareaValue"
(send)="messageSent()"
(userMentions)="mentionedUsers = $event"
></stream-autocomplete-textarea>
<!-- Other parts of the custom message input component -->
`,
})
export class CustomMessageInputComponent {
textareaValue = "";
mentionedUsers = [];
messageSent() {
// Send your message
}
}AutocompleteTextareaComponent
The AutocompleteTextarea component is used by the MessageInput component to display the input HTML element where users can type their message.
Message send can be triggered with the Enter key, new line can be added with the Shift+Enter combination.
Feature overview
The AutocompleteTextarea extends the functionalities of the Textarea component with autocomplete features:
- users can mention other users in a message (transliteration is used to support languages with non-Latin characters)
- users can send commands (for example /giphy)
Basic usage
You can use the AutocompleteTextarea component if you want to create your own message input component to override the default one:
Customizations
User mentions
- You can enable/disable user mentions using the
MessageInputConfigService - You can set the mention scope (channel members or all users) using the
MessageInputConfigService
Commands
- You can set available commands for channel types
- You can add custom commands
Custom autocompletes
You can create your own autocompletes (for example to add support for hashtags #). To do that you can follow the custom autocompletes guide.
Custom component
For maximum flexibilty, you can create your own textarea component.
Inputs and outputs
value
value: string = ''
The value of the input HTML element.
Implementation of
TextareaInterface.value
Defined in
placeholder
placeholder: string = ''
Placeholder of the textarea
Implementation of
TextareaInterface.placeholder
Defined in
areMentionsEnabled
areMentionsEnabled: undefined | boolean = true
If true, users can mention other users in messages. You can also set this input on the MessageInput component.
Implementation of
TextareaInterface.areMentionsEnabled
Defined in
inputMode
inputMode: "mobile" | "desktop"
See MessageInputConfigService for more information
Implementation of
TextareaInterface.inputMode
Defined in
mentionScope
mentionScope: "channel" | "application" = 'channel'
The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the MessageInput component.
Implementation of
TextareaInterface.mentionScope
Defined in
autoFocus
autoFocus: boolean = true
Enables or disables auto focus on the textarea element
Implementation of
TextareaInterface.autoFocus
Defined in
valueChange
Readonly valueChange: EventEmitter<string>
Emits the current value of the input element when a user types.
Implementation of
TextareaInterface.valueChange
Defined in
send
Readonly send: EventEmitter<void>
Emits when a user triggers a message send event (this happens when they hit the Enter key).
Implementation of
TextareaInterface.send
Defined in
userMentions
Readonly userMentions: EventEmitter<UserResponse<DefaultGenerics>[]>
Emits the array of users that are mentioned in the message, it is updated when a user mentions a new user or deletes a mention.
Implementation of
TextareaInterface.userMentions
Defined in
pasteFromClipboard
Readonly pasteFromClipboard: EventEmitter<ClipboardEvent>
Emits any paste event that occured inside the textarea
Implementation of
TextareaInterface.pasteFromClipboard