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