Angular Chat Message Box

Updated on Dec 8, 2025

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

You can configure the input area to restore saved drafts, which lets users continue their conversations without interruption.

Persisting Message Box Value

The message box value contains the text that the user has typed but not yet sent. The Chat component gives you full control over the message input through the inputValue property and inputValueChange event.

The following example shows how to persist the user input when you control the Chat visibility programmatically.

Change Theme

Theme

Loading ...

Use the inputValue property to set the message box value and handle the inputValueChange event when the user types in the message input box. This lets you track changes in real-time and 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);
    }
}

Speech-to-Text

The Chat component has built-in speech-to-text functionality that turns on by default. This makes the Chat accessible for users who prefer voice input or have typing difficulties. You can customize the appearance and behavior of the speech-to-text button by setting the enableSpeechToText property to a SpeechToTextButtonSettings interface.

The following example shows how to customize the built-in speech-to-text button.

Change Theme

Theme

Loading ...

File Selection

The Chat component has built-in file selection capabilities that let users attach single or multiple files to their messages before sending them. For more details on how to work with file attachments, refer to the Message Attachments documentation.

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