Building an AI Chat Interface using Microsoft Blazor and C#

Using Visual Studio 2022

Blazor offers a powerful framework for crafting web UIs with C#. This article dives into creating a chat application interface using Blazor, complete with message display and user interaction.

Prerequisites:

• Basic understanding of Blazor development
• Familiarity with C#

Choosing the Blazor Project Type:

Selecting a Project in Visual Studio 2022

There are two main Blazor project types: Blazor Server and Blazor WebAssembly. For a chat application with real-time updates, Blazor Server is an excellent choice. It leverages a server-side connection for updates, making it ideal for interactive applications.

Setting Up the Project:

1. Create a new Blazor Server project in Visual Studio or your preferred IDE.

Building the Chat UI:

1. Create a Blazor component (Chat.razor) to house the chat interface.
2. Utilize a MudList component to display chat messages.
3. Define a ChatItem class to represent individual messages with sender name, timestamp, and content.
4. Use a Blazor @bind-value directive to connect the messages with a list of ChatItem objects in your C# code.

This code snippet demonstrates a basic chat UI with message list and a text box for user input:

@page "/"

<PageTitle>Chat</PageTitle>

@using System.Collections.Generic;

<h1>Chat Room</h1>

<div class="chat-window" style="height: 400px; width: 100%; background-color: antiquewhite; margin-bottom: 30px;">
    @foreach (var message in messages)
    {
        <div style="padding: 6px; background-color: cornflowerblue; border-radius: 4px;">
            <div>
                <div><b>@message.UserName</b> - @message.SentAt</div>
                <div style="text-align: right;">@message.Message</div>
            </div>
        </div>
    }
</div>

<div class="message-input">
    <input Label="Type your message" @bind-value="@newMessage" />
    <button type="button" @onclick="SendMessage">Send</button>
</div>

@code {
    private List<ChatItem> messages = new List<ChatItem>();
    private string newMessage = "";

    private void SendMessage()
    {
        messages.Add(new ChatItem { UserName = "User", Message = newMessage, SentAt = DateTime.Now });
        newMessage = "";
        Console.WriteLine("Button clicked!");
        StateHasChanged(); // Very important to call StateHasChanged() to update the UI
    }

    private class ChatItem
    {
        public string? UserName { get; set; } // Make UserName nullable
        public string? Message { get; set; } // Make Message nullable
        public DateTime SentAt { get; set; }
    }
}

Explanation:

• This code defines a Chat.razor component.
• A ChatItem class represents each message with username, message content, and timestamp.
• The SendMessage method sends the user's message to the `ChatItem` List.
• Note that this is a simplified example, and additional logic is required for server-side processing and authentication in a full application.

CSS (optional):

You can add CSS classes like .chat-window and .message-input to style the chat UI elements.

This code provides a starting point for building a chat interface with Blazor. You can further customize it with features like user avatars, timestamp formatting, and improved styling.

View created.

Enhancing the UI:

• Include a text box for users to compose messages.
• Implement a button or form submission to trigger sending messages using SignalR.
• Consider using UI libraries for pre-built components like avatars, timestamps, and message formatting.

Remember:

• Implement proper user authentication and authorization for a production-ready chat application.
• Explore features like private messaging or chat history management for a more comprehensive experience.

Additional Resources:

• Microsoft Blazor Tutorial: https://learn.microsoft.com/en-us/azure/azure-signalr/signalr-tutorial-build-blazor-server-chat-app

By following these steps and exploring the provided resources, you can build a functional and visually appealing chat interface using Blazor. Remember, this is a basic structure, and you can customize it further to create a robust and feature-rich chat application.

Before you go

It would be an immense help if…

• You would be sure to clap 👏 and follow 👀 me on Medium.
• Look 👀 me up on LinkedIn.

Disclaimer: The views and opinions expressed in this article are solely those of the author and do not necessarily reflect the official policy or position of Microsoft Corporation. The author is an employee of Microsoft, but this content is not endorsed by, directly affiliated with, sponsored, or specifically approved by Microsoft and should not be considered as professional advice from Microsoft.