--- title: Overview position: 1 seo_title: Overview of the Chat Component seo_description: Learn about the basic features of the Telerik and Kendo UI Chat component, the elements of its anatomy, its states, and variants. Check out the extensive set of available options in its live demo. --- ## 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: ![A Telerik and Kendo UI Chat component and its elements](images/components-chat-overview-anatomy-v2.png "Anatomy and elements of a Telerik and Kendo UI Chat component") ### 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.  ![View of the Telerik and Kendo UI Chat component including a chat with message time and status](images/components-chat-scenarios-person2person-conversation.png "View of the Telerik and Kendo Chat component used for person-to-person conversation") #### 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.  ![View of the Telerik and Kendo UI Chat component including a chat with quick replies](images/components-chat-scenarios-person2bot-conversation.png "View of the Telerik and Kendo Chat component used for person-to-bot conversation") #### 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.  ![View of the Telerik and Kendo UI Chat component including a chat with collapsable message bubble, message toolbar, and prompt suggestions](images/components-chat-scenarios-person2ai-conversation.png "View of the Telerik and Kendo Chat component used for person-to-ai model conversation") ### Framework-Specific Documentation For specific information about the component, refer to its official product documentation: ![Kendo UI for Angular logo.](/images/angular-logo.svg) ![Kendo UI for jQuery logo.](/images/jquery-logo.svg) ![Kendo UI for React logo.](/images/react-logo.svg) ![Kendo UI for Vue logo.](/images/vue-logo.svg) ![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg) ![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)