BlazorChat 1.0.0

BlazorChat

A drop-in, embeddable real-time chat component for Blazor applications.

BlazorChat is designed to be a lightweight, yet feature-rich, chat solution that can be easily integrated into any Blazor Server or Blazor WebAssembly application. It delegates persistence, broadcasting, and presence to a host-provided service, allowing for flexible backend implementations.

Key Features

• ✅ Real-time Messaging: Built for instant message delivery.
• ✅ Backend Agnostic: Pluggable backend via the IChatService interface.
• ✅ In-Memory Provider: Includes a basic in-memory service for quick demos and testing.
• ✅ Message Reactions: Users can react to messages with emojis.
• ✅ Typing Indicators: Shows when other users are typing.
• ✅ Active User Presence: Displays a count and list of active users in the thread.
• ✅ Message Editing & Deletion: Users can edit or delete their own messages.
• ✅ Reply to Message: Provides context for conversations.
• ✅ Customizable Styling: Easily theme the widget using CSS variables or choose from presets.
• ✅ Accessible: Designed with ARIA attributes and keyboard navigation in mind.

Getting Started

Installation

First, add the BlazorChat NuGet package to your Blazor project.

dotnet add package BlazorChat

Backend Service Configuration

The ChatWidget requires a backend service that implements the IChatService interface. You can use the provided in-memory service for demos or a SignalR-based service for production.

Option 1: In-Memory Service (For Demos)

For quick setup and testing, you can use the built-in InMemoryChatService. This service works within a single server instance.

In your Program.cs, register it as a singleton:

// Program.cs 
	using BlazorChat.Services;

// ... other services 
	builder.Services.AddSingleton<IChatService, InMemoryChatService>();

Note: The InMemoryChatService is for demonstration purposes only. For any real multi-user application, a robust SignalR backend is required.

Option 2: BlazorChat.Server (Recommended for Production)

To unlock the full potential of BlazorChat in a scalable, multi-user production environment, we offer BlazorChat.Server.

BlazorChat.Server is a pre-built, enterprise-ready SignalR backend designed to work seamlessly with the BlazorChat component. It saves you significant development time and provides a fully implemented, persistent, and scalable chat service right out of the box.

Benefits of BlazorChat.Server:

• Instant Setup: No need to build or maintain your own chat backend.
• Database Persistence: Pre-configured to save and retrieve message history.
• Scalable Architecture: Built to handle a large number of concurrent users.
• Authentication Ready: Easily integrates with your existing authentication system.
• Professionally Supported: Receive dedicated support for your chat implementation.

Skip the hassle of backend development. **Learn more and purchase BlazorChat.Server at www.loneworx.com **.

Add the Component to a Page

Once your service is configured (either the demo InMemoryChatService or the production BlazorChat.Server), embed the ChatWidget in any Razor component. The component will automatically create its own SignalRChatService instance if one is not injected.

@page "/my-chat"

<ChatWidget ThreadId="project-alpha-general" 
            ChatSender="@currentUser" 
            HubUrl="/chathub" 
            ThreadTitle="Project Alpha Chat" />

@code 
{ 
    private ChatSender currentUser = new() { Id = "user123", 
                                             DisplayName = "Sam Wilson", 
                                             AvatarUrl = "https://i.pravatar.cc/150?img=11" }; 
}

Component Parameters

Customization

You can customize the look and feel of the chat widget by overriding the available CSS variables. Apply these styles in your global stylesheet.

/* Example: In your app.css */ 

:root { 
    --blazor-chat-bubble-background-mine: #007bff; 
    --blazor-chat-bubble-color-mine: white; 
    --blazor-chat-bubble-background-other: #f1f1f1; 
    --blazor-chat-bubble-color-other: #333; 
    --blazor-chat-border-radius: 12px; 
}