Blazor Chat Component Overview

The Telerik UI for Blazor Chat component enables developers to build modern conversational interfaces in Blazor applications. It supports rich messaging, AI integrations, custom templates, file uploads, and accessibility features. The component is designed for extensibility, allowing integration with chatbots, LLMs, and custom business logic.

Creating Blazor Chat

1. Add the <TelerikChat> tag to your page.
2. Set the Data parameter to a collection of messages.
3. Set the AuthorId parameter to identify the current user.
4. Subscribe to the OnSendMessage event to handle new messages.
5. (optional) Configure additional features like file uploads, speech-to-text, and quick actions.

Basic configuration of the Telerik Chat

<TelerikChat Data="@Messages"
             AuthorId="@CurrentUserId"
             OnSendMessage="@HandleSendMessage"
             TextField="Content"
             AuthorIdField="UserId"
             TimestampField="SentAt"
             Height="600px"
             Width="400px"
             EnableSpeechToText="true"
             EnableFileUpload="true">
</TelerikChat>

@code {
    private List<ChatMessage> Messages { get; set; } = new List<ChatMessage>()
    {
        new ChatMessage
        {
            Id = "1",
            Content = "Hello! How can I help you today?",
            UserId = "assistant",
            SentAt = DateTime.Now.AddMinutes(-5)
        },
        new ChatMessage
        {
            Id = "2",
            Content = "Hi there! I'm looking for information about the new features.",
            UserId = "user1",
            SentAt = DateTime.Now.AddMinutes(-3)
        }
    };
    private string CurrentUserId = "user1";

    private async Task HandleSendMessage(ChatSendMessageEventArgs args)
    {
        var newMessage = new ChatMessage
        {
            Id = Guid.NewGuid().ToString(),
            Content = args.Message,
            UserId = CurrentUserId,
            SentAt = DateTime.Now
        };
        
        Messages.Add(newMessage);
        await InvokeAsync(StateHasChanged);
    }

    public class ChatMessage
    {
        public string Id { get; set; }
        public string Content { get; set; }
        public string UserId { get; set; }
        public DateTime SentAt { get; set; }
        public List<FileSelectFileInfo> Attachments { get; set; }
    }
}

Data Binding

The Chat component supports binding to collections of messages and user data. The component provides flexible field mapping to accommodate different data models. Read more about Chat data binding...

Messages

The Chat component offers rich messaging capabilities including context menus, toolbars, appearance customization, and persistence features. Messages can include text, files, and custom content. Read more about Chat messages...

Templates and Customization

The Chat component provides extensive template support for customizing the appearance and behavior of messages, timestamps, suggestions, message box, and header. Read more about Chat templates...

Integrations

Connect the Chat component with AI services, chatbots, and external APIs to create intelligent conversational experiences. The component supports integration with popular AI services and custom bot frameworks. Read more about Chat integrations...

File Uploads and Media

Enable file uploads and media sharing in your chat application. The component supports configurable file upload settings and speech-to-text functionality for enhanced user experience. Read more about file uploads and media...

Events

The Chat component exposes various events that allow you to implement custom functionality and handle user interactions. Key events include message sending, file uploads, suggestion clicks, and message actions. Read more about Chat events...

Chat Parameters

The Chat component provides a variety of parameters:

Parameter	Type and Default Value	Description
Data	IEnumerable<TItem>	The data source for chat messages.
AuthorId	string	The ID of the current user sending messages.
TextField	string ("Text")	The name of the field containing the message content.
AuthorIdField	string ("AuthorId")	The name of the field containing the author identifier.
TimestampField	string ("Timestamp")	The name of the field containing the message timestamp.
AuthorNameField	string ("AuthorName")	The name of the field containing the author display name.
AuthorImageUrlField	string ("AuthorImageUrl")	The name of the field containing the author's avatar image URL.
AttachmentsField	string ("Attachments")	The name of the field containing message file attachments.
Height	string	The height of the chat component in CSS units.
Width	string	The width of the chat component in CSS units.
EnableFileUpload	bool (false)	Enables file upload functionality in the chat input.
EnableSpeechToText	bool (true)	Enables speech-to-text functionality with microphone input.
MessageWidthMode	MessageWidthMode enum (Standard)	Controls the width behavior of messages (Standard or Full).
Suggestions	IEnumerable<string>	Collection of quick reply suggestions.

Chat Reference and Methods

The Chat component exposes a Refresh() method that refreshes the component and scrolls to the latest messages. To execute the method, obtain a reference to the Chat instance via @ref.

How to obtain a Chat reference and call methods

RAZOR

<TelerikChat @ref="@ChatRef" 
             Data="@Messages"
             OnSendMessage="@HandleSendMessage">
</TelerikChat>

<TelerikButton OnClick="@RefreshChat">Refresh Chat</TelerikButton>

@code {
    private TelerikChat<ChatMessage> ChatRef { get; set; }
    
    private void RefreshChat()
    {
        ChatRef?.Refresh();
    }
}

Next Steps

• Get started with Chat data binding
• Customize Chat templates
• Handle Chat events
• Configure file uploads and media

See Also

• Live Demo: Chat Overview
• Live Demo: AI Integration