Chat

Chat Overview

The Chat component is a UI element that facilitates interactive communication within applications. It allows end-users to engage in real-time conversations and exchange messages and multimedia content with other users, chatbots, or AI models. The Chat component includes various sub-elements applicable for different use cases according to the type of communication—person-to-person conversations, conversations with chatbots or AI models.

Live Demo

Appearance

The Chat component provides built-in styling options that grant visually appealing and flexible rendering experience.

Anatomy

The anatomy of the Chat summarizes the visual and functional elements of the component. The main elements include a message list, where the message bubbles and attachments are displayed, and a message box.

The next image shows the anatomy of a Chat and includes the following elements:

1. Message list
2. Message box
3. Message stamp
4. Header (Optional)
5. Message bubble
6. Avatar (Optional)
7. Message author (Optional)
8. Quick replies (Optional)
9. SpeechToTextButton and Upload icon buttons
10. Message TextArea
11. Submit icon button

Scenarios

Depending on the type of chat participants, you can use the Conversational UI in three scenarios: person-to-person conversations, person-to-bot conversations, and person-to-AI model conversations. The elements rendered in the Conversational UI and their properties will differ for each of the three scenarios.

Person-to-Person Conversations

Unlike the other types of conversations, the person-to-person communication might sometimes be asynchronous, which requires using specific message attributes such as message time and status that are visible upon interaction. 

Person-to-Bot Conversations

Person-to-bot conversation is happening simultaneously, which does not suggest using indicators such as message time or status. It usually implies certain flows that the user is expected to follow, which is why including quick replies is specific to person-to-bot conversation UI. 

Person-to-AI Model Conversations

Person-to-AI model conversation is also happening simultaneously, but it does not follow a predefined flow. However, the user might use so-called prompt suggestions based on their previous interaction.  

Message bubbles within this type of conversation are more complex as they could be collapsable for longer prompts and could take the full width of the viewport. Actions such as copy, retry, download, share, or rate the output are common for communication with AI models and are usually displayed below each output bubble. 

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular ChatFind more information about the Kendo UI for Angular Chat in the official product documentation of the component.

Kendo UI for jQuery ChatFind more information about the Kendo UI for jQuery Chat in the official product documentation of the component.

KendoReact ChatFind more information about the KendoReact Chat in the official product documentation of the component.

Kendo UI for Vue ChatFind more information about the Kendo UI for Vue Chat in the official product documentation of the component.

Telerik UI for ASP.NET Core ChatFind more information about the Telerik UI for ASP.NET Core Chat component.

Telerik UI for ASP.NET MVC ChatFind more information about the Telerik UI for ASP.NET MVC Chat component.