ASP.NET Core Chat Overview

Telerik UI for ASP.NET Core Ninja image

The Chat is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI Chat TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Chat widget. To add the component to your ASP.NET Core app, you can use either.

The Chat allows the user to participate in chat sessions with other users or with chat bots. It provides support for default cards and actions, and enables the configuration of custom templates and custom components.

Initializing the Chat

The following example demonstrates how to define the Chat.

    @(Html.Kendo().Chat()
        // The name of the Chat is mandatory.
        // It specifies the "id" and the "name" attributes of the widget.
        .Name("chat")
    )
    <kendo-chat name="chat"></kendo-chat>

Basic Configuration

The following example demonstrates the available configuration options supported by the Chat component.

    @(Html.Kendo().Chat()
        .Name("chat")
        // The user configuration of the Chat.
        .User(u => u
            .Name("ChatBot Name")
            .IconUrl("https://demos.telerik.com/kendo-ui/content/chat/avatar.png")
        )
        // Attach the event handlers.
        .Events(e => e
            .Post("onPost")
            .ActionClick("onActionClick")
            .SendMessage("onSendMessage")
            .TypingStart("onTypingStart")
            .TypingEnd("onTypingEnd")
        )
        // Configure the placeholder message.
        .Messages(m => m
            .Placeholder("Type your message")
        )
    )
    <!-- Initializing the Chat and attaching the event handlers -->
    <kendo-chat name="chat"
        on-post="onPost"
        on-action-click="onActionClick"
        on-send-message="onSendMessage"
        on-typing-start="onTypingStart"
        on-typing-end="onTypingEnd">
            <!-- The Chat User configuration -->
            <user name="ChatBot Name"
                icon-url="https://demos.telerik.com/kendo-ui/content/chat/avatar.png" />
            <!-- Configuring the Placeholder message -->
            <messages placeholder="Type your message" />
    </kendo-chat>

Functionality and Features

  • Toolbar—The component allows you to add toolbar actions for achieving a more user-friendly conversational UI.
  • Peer-to-Peer Chat—The Chat provides an option for creating a peer-to-peer Chat application by using SignalR.

Next Steps

See Also

In this article