Events in Blazor Chat UI component

17 Dec 20253 minutes to read

This section describes the Chat UI events that will be triggered when appropriate actions are performed. The following events are available in the Chat UI component.

Created

The Chat UI component triggers the Created event when the component rendering is completed.

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 400px;">
    <SfChatUI Created="Created"></SfChatUI>
</div>

@code {
    private void Created()
    {
        // Your required action here
    }
}

Sending message

The MessageSend event is triggered when the message is being sent in the Chat UI component.

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 400px;">
    <SfChatUI MessageSend="MessageSend"></SfChatUI>
</div>

@code {
    private void MessageSend(ChatMessageSendEventArgs args)
    {
        // Your required action here
    }
}

User typing

The UserTyping event is triggered when the user is typing a message in the Chat UI component.

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 400px;">
    <SfChatUI UserTyping="UserTyping"></SfChatUI>
</div>

@code {
    private void UserTyping(ChatUserTypingEventArgs args)
    {
        // Your required action here
    }
}

OnAttachmentUploadReady

The OnAttachmentUploadReady event is triggered before the attached files upload begins in the Chat UI component.

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 400px;">
    <SfChatUI OnAttachmentUploadReady="OnAttachmentUploadReady">
        <ChatUIAttachment Enable SaveUrl="@SaveUrl" RemoveUrl="@RemoveUrl"></ChatUIAttachment>
    </SfChatUI>
</div>

@code {

    private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
    private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";

    private void OnAttachmentUploadReady(AttachmentUploadReadyEventArgs args)
    {
        // Your required action here
    }
}

AttachmentUploadSuccess

The AttachmentUploadSuccess event is triggered when the attached file is successfully uploaded in the Chat UI component.

@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Inputs

<div style="height: 400px; width: 400px;">
    <SfChatUI AttachmentUploadSuccess="AttachmentUploadSuccess">
        <ChatUIAttachment Enable SaveUrl="@SaveUrl" RemoveUrl="@RemoveUrl"></ChatUIAttachment>
    </SfChatUI>
</div>

@code {

    private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
    private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";

    private void AttachmentUploadSuccess(SuccessEventArgs args)
    {
        // Your required action here
    }
}

AttachmentUploadFailed

The AttachmentUploadFailed event is triggered when the attached file upload fails in the Chat UI component.

@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Inputs

<div style="height: 400px; width: 400px;">
    <SfChatUI AttachmentUploadFailed="AttachmentUploadFailed">
        <ChatUIAttachment Enable SaveUrl="@SaveUrl" RemoveUrl="@RemoveUrl"></ChatUIAttachment>
    </SfChatUI>
</div>

@code {

    private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
    private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";

    private void AttachmentUploadFailed(FailureEventArgs args)
    {
        // Your required action here
    }
}

AttachmentRemoved

The AttachmentRemoved event is triggered when an attached file is removed in the Chat UI component.

@using Syncfusion.Blazor.InteractiveChat
@using Syncfusion.Blazor.Inputs

<div style="height: 400px; width: 400px;">
    <SfChatUI AttachmentRemoved="AttachmentRemoved">
        <ChatUIAttachment Enable SaveUrl="@SaveUrl" RemoveUrl="@RemoveUrl"></ChatUIAttachment>
    </SfChatUI>
</div>

@code {

    private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
    private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";

    private void AttachmentRemoved(RemovingEventArgs args)
    {
        // Your required action here
    }
}

AttachmentClick

The AttachmentClick event is triggered when an attached file is clicked in the Chat UI component.

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 400px;">
    <SfChatUI AttachmentClick="AttachmentClick">
        <ChatUIAttachment Enable SaveUrl="@SaveUrl" RemoveUrl="@RemoveUrl"></ChatUIAttachment>
    </SfChatUI>
</div>

@code {

    private string SaveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Save";
    private string RemoveUrl = "https://blazor.syncfusion.com/services/production/api/FileUploader/Remove";

    private void AttachmentClick(ChatAttachmentClickEventArgs args)
    {
        // Your required action here
    }
}