Blazor Chat UI Component

@using Syncfusion.Blazor.InteractiveChat

<SfChatUI User="@Customer" HeaderText="LiveAssist" Messages="@ChatMessages" Width="400px" Height="500px">
</SfChatUI>

@code {

    UserModel Customer;
    UserModel SupportAgent;
    List<ChatMessage> ChatMessages;

    protected override void OnInitialized()
    {
        Customer = new UserModel()
        {
            ID = "user-1001",
            User = "Richard Rose"
        };

        SupportAgent = new UserModel()
        {
            ID = "agent-1001",
            User = "Donald Krish"
        };

        ChatMessages = new List<ChatMessage>()
        {
            new ChatMessage() { Text = "Hi, I need help with my order.", Timestamp = new DateTime(2024, 12, 11, 9, 0, 0), Author = Customer },
            new ChatMessage() { Text = "Sure, could you provide your order ID?", Timestamp = new DateTime(2024, 12, 11, 9, 1, 0), Author = SupportAgent },
            new ChatMessage() { Text = "My order ID is #12345.", Timestamp = new DateTime(2024, 12, 11, 9, 2, 0), Author = Customer },
            new ChatMessage() { Text = "Thank you. Let me check the details for you.", Timestamp = new DateTime(2024, 12, 11, 9, 3, 0), Author = SupportAgent },
            new ChatMessage() { Text = "I found it! Your package was delivered yesterday at 3 PM.", Timestamp = new DateTime(2024, 12, 11, 9, 4, 0), Author = SupportAgent },
            new ChatMessage() { Text = "Oh, I didn’t notice it. Let me check.", Timestamp = new DateTime(2024, 12, 11, 9, 5, 0), Author = Customer },
            new ChatMessage() { Text = "Found it behind the planter. Thanks for your help!", Timestamp = new DateTime(2024, 12, 11, 9, 6, 0), Author = Customer }
        };
    }
}