A chat interface component for displaying and sending messages in multi-participant conversations. RadzenChat provides a complete chat UI with message history, user avatars, typing indicators, and message composition. Creates a messaging interface similar to modern chat applications, ideal for customer support chats, team collaboration, messaging features, or AI chatbots. Features multi-user support displaying messages from multiple participants with avatars and names, chronological message list with sender identification, user avatars showing photos or initials with customizable colors, optional "User is typing..." feedback, text input with Send button for new messages, customizable templates for message rendering/empty state/typing indicator, automatic scrolling to newest messages, and message send time stamps. Provide a list of ChatUser objects for participants and ChatMessage objects for message history. Set CurrentUserId to distinguish the current user's messages (typically right-aligned) from others (left-aligned). Handle MessageSent to process new messages (save to database, send to server, etc.).
IComponent
IHandleEvent
IHandleAfterRender
RadzenComponent.SetParametersAsync
RadzenComponent.RaiseContextMenu
RadzenComponent.RaiseMouseEnter
RadzenComponent.AddContextMenu
RadzenComponent.RaiseMouseLeave
RadzenComponent.OnBecameInvisible
RadzenComponent.DefaultCulture
RadzenComponent.IsJSRuntimeAvailable
ComponentBase.OnInitializedAsync
ComponentBase.OnParametersSet
ComponentBase.OnParametersSetAsync
ComponentBase.StateHasChanged
ComponentBase.ShouldRender
ComponentBase.OnAfterRender
ComponentBase.InvokeAsync
ComponentBase.DispatchExceptionAsync
ComponentBase.RendererInfo
ComponentBase.Assets
ComponentBase.AssignedRenderMode
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
public class RadzenChat : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRenderBasic chat:
<RadzenChat CurrentUserId=@currentUserId Users=@users Messages=@messages MessageSent=@OnMessageSent />
@code {
string currentUserId = "user1";
List<ChatUser> users = new() { new ChatUser { Id = "user1", Name = "John" }, new ChatUser { Id = "user2", Name = "Jane" } };
List<ChatMessage> messages = new();
async Task OnMessageSent(ChatMessage message)
{
messages.Add(message);
await SaveMessage(message);
}
}A chat interface component for displaying and sending messages in multi-participant conversations. RadzenChat provides a complete chat UI with message history, user avatars, typing indicators, and message composition. Creates a messaging interface similar to modern chat applications, ideal for customer support chats, team collaboration, messaging features, or AI chatbots. Features multi-user support displaying messages from multiple participants with avatars and names, chronological message list with sender identification, user avatars showing photos or initials with customizable colors, optional "User is typing..." feedback, text input with Send button for new messages, customizable templates for message rendering/empty state/typing indicator, automatic scrolling to newest messages, and message send time stamps. Provide a list of ChatUser objects for participants and ChatMessage objects for message history. Set CurrentUserId to distinguish the current user's messages (typically right-aligned) from others (left-aligned). Handle MessageSent to process new messages (save to database, send to server, etc.).
public RadzenChat()Event callback that is invoked when the chat is cleared.
public EventCallback ChatCleared { get; set; }
| Type | Description |
|---|---|
| EventCallback | Event callback that is invoked when the chat is cleared. |
Gets or sets the current user's participant ID.
public string CurrentUserId { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the current user's participant ID. |
Gets or sets whether the chat is disabled.
public bool Disabled { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets whether the chat is disabled. |
Gets or sets the message displayed when there are no messages.
public string EmptyMessage { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the message displayed when there are no messages. |
Gets or sets the empty template shown when there are no messages.
public RenderFragment EmptyTemplate { get; set; }
| Type | Description |
|---|---|
| RenderFragment | Gets or sets the empty template shown when there are no messages. |
Specifies additional custom attributes that will be rendered by the input.
public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
| Type | Description |
|---|---|
| IReadOnlyDictionary<string, object> | Specifies additional custom attributes that will be rendered by the input. |
Gets or sets the maximum number of messages to keep in the chat.
public int MaxMessages { get; set; }
| Type | Description |
|---|---|
| int | Gets or sets the maximum number of messages to keep in the chat. |
Gets or sets the maximum number of users to show in the header.
public int MaxVisibleUsers { get; set; }
| Type | Description |
|---|---|
| int | Gets or sets the maximum number of users to show in the header. |
Event callback that is invoked when a new message is added.
public EventCallback<ChatMessage> MessageAdded { get; set; }
| Type | Description |
|---|---|
| EventCallback<ChatMessage> | Event callback that is invoked when a new message is added. |
Event callback that is invoked when a message is sent.
public EventCallback<ChatMessage> MessageSent { get; set; }
| Type | Description |
|---|---|
| EventCallback<ChatMessage> | Event callback that is invoked when a message is sent. |
Gets or sets the message template.
public RenderFragment<ChatMessage> MessageTemplate { get; set; }
| Type | Description |
|---|---|
| RenderFragment<ChatMessage> | Gets or sets the message template. |
Gets or sets the list of chat messages.
public IEnumerable<ChatMessage> Messages { get; set; }
| Type | Description |
|---|---|
| IEnumerable<ChatMessage> | Gets or sets the list of chat messages. |
Event callback that is invoked when the messages list changes.
public EventCallback<IEnumerable<ChatMessage>> MessagesChanged { get; set; }
| Type | Description |
|---|---|
| EventCallback<IEnumerable<ChatMessage>> | Event callback that is invoked when the messages list changes. |
Gets or sets the multiple users typing format. TypingTemplate has preference over this property.
public string MultipleUsersTypingFormat { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the multiple users typing format. TypingTemplate has preference over this property. |
Gets or sets the text displayed on the new messages indicator button.
public string NewMessagesText { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the text displayed on the new messages indicator button. |
Gets or sets the placeholder text for the input field.
public string Placeholder { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the placeholder text for the input field. |
Gets or sets whether the input is read-only.
public bool ReadOnly { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets whether the input is read-only. |
Gets or sets whether to show the clear chat button.
public bool ShowClearButton { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets whether to show the clear chat button. |
Gets or sets whether to show a typing indicator in the message list.
public bool ShowTypingIndicator { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets whether to show a typing indicator in the message list. |
Gets or sets whether to show participant names above messages.
public bool ShowUserNames { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets whether to show participant names above messages. |
Gets or sets whether to show users in the header.
public bool ShowUsers { get; set; }
| Type | Description |
|---|---|
| bool | Gets or sets whether to show users in the header. |
Gets or sets the title displayed in the chat header.
public string Title { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the title displayed in the chat header. |
Gets or sets the two users typing format. TypingTemplate has preference over this property.
public string TwoUsersTypingFormat { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the two users typing format. TypingTemplate has preference over this property. |
Raised when the current user's typing state changes (true/false). Use this to broadcast typing state via SignalR etc.
public EventCallback<ChatTypingEventArgs> TypingChanged { get; set; }
| Type | Description |
|---|---|
| EventCallback<ChatTypingEventArgs> | Raised when the current user's typing state changes (true/false). Use this to broadcast typing state via SignalR etc. |
Gets or sets the single user typing format. TypingTemplate has preference over this property.
public string TypingFormat { get; set; }
| Type | Description |
|---|---|
| string | Gets or sets the single user typing format. TypingTemplate has preference over this property. |
Optional template to render typing indicator content. Receives the typing ChatUser list (excluding current user by default).
public RenderFragment<IReadOnlyList<ChatUser>> TypingTemplate { get; set; }
| Type | Description |
|---|---|
| RenderFragment<IReadOnlyList<ChatUser>> | Optional template to render typing indicator content. Receives the typing ChatUser list (excluding current user by default). |
Gets or sets the debounce timeout (in milliseconds) after the last keystroke before the current user is considered "not typing".
public int TypingTimeout { get; set; }
| Type | Description |
|---|---|
| int | Gets or sets the debounce timeout (in milliseconds) after the last keystroke before the current user is considered "not typing". |
Event callback that is invoked when a participant is added.
public EventCallback<ChatUser> UserAdded { get; set; }
| Type | Description |
|---|---|
| EventCallback<ChatUser> | Event callback that is invoked when a participant is added. |
Event callback that is invoked when a participant is removed.
public EventCallback<ChatUser> UserRemoved { get; set; }
| Type | Description |
|---|---|
| EventCallback<ChatUser> | Event callback that is invoked when a participant is removed. |
Gets or sets the list of chat users.
public IEnumerable<ChatUser> Users { get; set; }
| Type | Description |
|---|---|
| IEnumerable<ChatUser> | Gets or sets the list of chat users. |
Event callback that is invoked when the users list changes.
public EventCallback<IEnumerable<ChatUser>> UsersChanged { get; set; }
| Type | Description |
|---|---|
| EventCallback<IEnumerable<ChatUser>> | Event callback that is invoked when the users list changes. |
Adds a message to the chat.
public Task<ChatMessage> AddMessage(string content, string userId)
| Type | Name | Description |
|---|---|---|
| string | content | The message content. |
| string | userId | The ID of the participant who sent the message. |
| Type | Description |
|---|---|
| Task<ChatMessage> | The created message. |
Adds a participant to the chat.
public Task AddUser(ChatUser participant)
| Type | Name | Description |
|---|---|---|
| ChatUser | participant | The participant to add. |
| Type | Description |
|---|---|
| Task |
protected override void BuildRenderTree(Rendering.RenderTreeBuilder __builder)
| Type | Name | Description |
|---|---|---|
| Rendering.RenderTreeBuilder | __builder |
Clears all messages from the chat.
public Task ClearChat()
| Type | Description |
|---|---|
| Task |
protected override string GetComponentCssClass()
| Type | Description |
|---|---|
| string |
Gets the current list of messages.
public IReadOnlyList<ChatMessage> GetMessages()
| Type | Description |
|---|---|
| IReadOnlyList<ChatMessage> |
Gets the current list of users.
public ChatUser GetUser(string userId)
| Type | Name | Description |
|---|---|---|
| string | userId |
| Type | Description |
|---|---|
| ChatUser |
Gets the current list of users.
public IReadOnlyList<ChatUser> GetUsers()
| Type | Description |
|---|---|
| IReadOnlyList<ChatUser> |
Loads messages from an external source.
public Task LoadMessages(IEnumerable<ChatMessage> messages)
| Type | Name | Description |
|---|---|---|
| IEnumerable<ChatMessage> | messages | The messages to load. |
| Type | Description |
|---|---|
| Task |
protected override Task OnAfterRenderAsync(bool firstRender)
| Type | Name | Description |
|---|---|---|
| bool | firstRender |
| Type | Description |
|---|---|
| Task |
Removes a participant from the chat.
public Task RemoveUser(string userId)
| Type | Name | Description |
|---|---|---|
| string | userId | The ID of the participant to remove. |
| Type | Description |
|---|---|
| Task |
Scrolls to the bottom of the message list and dismisses the new messages indicator.
public Task ScrollToBottom()
| Type | Description |
|---|---|
| Task |
Sends a message programmatically.
public Task SendMessage(string content, string userId)
| Type | Name | Description |
|---|---|---|
| string | content | The message content to send. |
| string | userId | The ID of the participant sending the message (defaults to CurrentUserId). |
| Type | Description |
|---|---|
| Task |
Sets a participant typing state. Use this for remote users (e.g. SignalR updates).
public Task SetUserTyping(string userId, bool isTyping)
| Type | Name | Description |
|---|---|---|
| string | userId | |
| bool | isTyping |
| Type | Description |
|---|---|
| Task |
Updates a participant's online status.
public Task UpdateUserStatus(string userId, bool isOnline)
| Type | Name | Description |
|---|---|---|
| string | userId | The participant ID. |
| bool | isOnline | The online status. |
| Type | Description |
|---|---|
| Task |