Angular Chat Message Box

The message box of the Chat is the area that holds the text input along with the default buttons for speech to text feature, file select, and send buttons.

The input area can be configured to restore saved drafts, allowing users to continue their conversations seamlessly, or further configure how the Chat can be used from the users.

Persisting Message Box Value

The value of the message box is the text that the user has composed but not yet sent.

The Chat component provides comprehensive control over the message input through the inputValue property and inputValueChange event.

Use the inputValue property to set the value of the message box and handle inputValueChange event whenever the user types in the message input box. This allows tracking changes in real-time and helps implement features like auto-saving drafts, validating input, or pre-filling the message box based on user context.

html

<kendo-chat
    [inputValue]="messageBoxValue"
    (inputValueChange)="onInputValueChange($event)">
</kendo-chat>

ts

export class AppComponent {
    public messageBoxValue: string = "";

    public onInputValueChange(value: string): void {
        this.messageBoxValue = value;
        // Implement auto-save, validation, or other real-time features
        this.autoSaveDraft(value);
    }

    private autoSaveDraft(value: string): void {
        // Auto-save logic here
        localStorage.setItem('chatDraft', value);
    }
}

The following example demonstrates how to persist the user input when the Chat visibility is programmatically controlled.

Change Theme

Theme

Loading ...

Speech To Text

The Chat component supports built-in speech-to-text functionality which is enabled by default, making it accessible for users who prefer voice input or have typing difficulties.

To disabled this feature set the enableSpeechToText input to false.

html

<kendo-chat [enableSpeechToText]="false"></kendo-chat>

The following example demonstrates how to customize the appearance of the built-in SpeechToTextButton.

Change Theme

Theme

Loading ...

Disabling File Selection

The Chat component provides built-in file selection capabilities that allow users to attach single or multiple files to their messages before sending them. However, there are scenarios where you might want to disable this functionality to better control the user experience or meet specific application requirements.

To disable file selection, set the enableFileSelect input to false.

html

<kendo-chat [enableFileSelect]="false"></kendo-chat>

When file selection is disabled, users will only see the text input field and send button, providing a cleaner interface focused on text-based communication. Note that disabling file selection only affects the user's ability to select new files—messages can still display file attachments that were added programmatically or received from other sources.

Customizing the Message Box

You can customize the appearance and behavior of the message box by using any custom component and styles that fit your application's design. For more information on how to implement custom components, refer to the Message Box Template documentation.

Suggested Links

• Data Binding
• Attachments
• Message Templates
• Keyboard Navigation
• API Reference of the Chat