ChatView | Getting Started

Installation

MAUI

Add the NuGet package:

dotnet add package Shiny.Maui.Controls

Register in MauiProgram.cs:

builder.UseShinyControls();

Add the XML namespace to your page:

xmlns:shiny="http://shiny.com/controls"

Blazor

Add the NuGet package:

dotnet add package Shiny.Blazor.Controls

Add the using directive to _Imports.razor or your component:

@using Shiny.Blazor.Controls.Chat

Note

The Blazor ChatView must be placed inside a container with a defined height. Without a height constraint, the component cannot calculate scroll positions.

Your First Chat (MAUI)

A minimal working chat with send capability:

ChatPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:shiny="http://shiny.com/controls"
             x:Class="MyApp.ChatPage">

    <shiny:ChatView Messages="{Binding Messages}"
                    SendCommand="{Binding SendCommand}" />
</ContentPage>

ChatViewModel.cs:

public partial class ChatViewModel : ObservableObject
{
    [ObservableProperty]
    ObservableCollection<ChatMessage> messages = new()
    {
        new ChatMessage
        {
            Text = "Hey! How can I help you today?",
            SenderId = "bot",
            IsFromMe = false,
            Timestamp = DateTimeOffset.Now.AddMinutes(-2)
        }
    };

    [RelayCommand]
    void Send(string text)
    {
        Messages.Add(new ChatMessage
        {
            Text = text,
            SenderId = "me",
            IsFromMe = true,
            Timestamp = DateTimeOffset.Now
        });
    }
}

That’s it — you have a working chat with bubbles, timestamps, and Enter-to-send.

Your First Chat (Blazor)

@page "/chat"
@using Shiny.Blazor.Controls.Chat

<div style="height: 100vh;">
    <ChatView Messages="messages"
              SendCommand="OnSend" />
</div>

@code {
    List<ChatMessage> messages = new()
    {
        new ChatMessage
        {
            Text = "Hey! How can I help you today?",
            SenderId = "bot",
            IsFromMe = false,
            Timestamp = DateTimeOffset.Now.AddMinutes(-2)
        }
    };

    Task OnSend(string text)
    {
        messages.Add(new ChatMessage
        {
            Text = text,
            SenderId = "me",
            IsFromMe = true,
            Timestamp = DateTimeOffset.Now
        });
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Adding a Bot Reply

Simulate an AI or bot responding after your message:

[RelayCommand]
async Task Send(string text)
{
    // Add user message
    Messages.Add(new ChatMessage
    {
        Text = text,
        SenderId = "me",
        IsFromMe = true,
        Timestamp = DateTimeOffset.Now
    });

    // Simulate bot thinking
    await Task.Delay(1500);

    // Add bot reply
    Messages.Add(new ChatMessage
    {
        Text = "Thanks for your message! Let me look into that.",
        SenderId = "bot",
        IsFromMe = false,
        Timestamp = DateTimeOffset.Now
    });
}

Customizing Appearance

<shiny:ChatView Messages="{Binding Messages}"
                SendCommand="{Binding SendCommand}"
                ChatBackgroundColor="#F0F0F0"
                MyBubbleColor="#007AFF"
                MyTextColor="White"
                OtherBubbleColor="#E5E5EA"
                OtherTextColor="Black"
                BubbleFontSize="16"
                BubbleFontFamily="OpenSans-Regular"
                TimestampFontSize="10"
                BubbleCornerRadius="12"
                PlaceholderText="Ask me anything..."
                SendButtonText="Go"
                SendButtonBackgroundColor="#34C759"
                SendButtonTextColor="White"
                InputBarBackgroundColor="#FAFAFA"
                InputBarBorderColor="#CCCCCC" />

Next Steps

Now that you have a working chat, explore:

• Messages — Image messages, link detection, pending send state
• Participants — Add avatars and multi-person support
• Typing Indicators — Show when others are typing
• Scenarios — Build AI assistants, support chats, and more