Angular Chat Message Box
The message box of the Chat reuses the PromptBox component, which is a versatile input area that can be configured to meet various use cases.
The message box serves as the primary interface for users to compose and send messages in the Chat component. It provides a convenient space for users to type their messages, attach files, and utilize speech-to-text features.
Send Button
The Chat displays a built-in send button that submits the current message. Set the sendButton property to false to hide it, or to a SendButtonSettings object to change its icon, size, theme color, or disabled state.
The following example demonstrates how to customize the send button appearance.
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 speechToTextButton property to a SpeechToTextButtonSettings interface.
The following example shows how to customize the built-in speech-to-text button.
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.
Message Box Settings
You can configure the layout and size of the message box by setting the messageBoxSettings property to a MessageBoxSettings object.
The following example demonstrates the available settings options. Use the configurator on the right to switch between modes and adjust the row count and maximum height.
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 an IT helpdesk widget where the chat panel opens and closes via a floating action button. The draft message in the input box persists each time the user minimizes and restores the panel.
Bind inputValue to a component property and update that property in the inputValueChange handler. Because Angular re-renders the chat from the bound value when the panel is shown again, the draft survives the panel toggle. You can extend the same pattern to auto-save drafts or pre-fill the input based on user context.
<kendo-chat
[inputValue]="userInput"
(inputValueChange)="onInputValueChange($event)">
</kendo-chat>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.