ChatView

A production-ready chat UI control that handles message bubbles, typing indicators, reactions, pagination, smart scrolling, and input — so you can focus on your messaging logic instead of pixel-pushing.

• 
• 

Frameworks

.NET MAUI

Blazor

Screenshot

What You Get Out of the Box

Feature	MAUI	Blazor
Message bubbles with grouping & timestamps	✓	✓
Multi-person chat with avatars & colors	✓	✓
Typing indicators (animated dots)	✓	✓
Image messages	✓	✓
Link auto-detection	✓	✓
Acknowledgement reactions (emoji badges)	✓	✓
Smart scroll & unread pill	✓	✓
Load-more pagination	✓	✓
DateSent pending state (dimmed bubble, offline support)	✓	✓
Input bar with attach button	✓	✓
Per-message bubble tools (⋯ menu)	✓	—
Input bar tools (FAB menu)	✓	—
Custom message templates	✓	—
Speech-to-text input	✓	—
Text-to-speech bubble tool	✓	—
Haptic feedback	✓	—

Quick Start

MAUI

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

<shiny:ChatView Messages="{Binding Messages}"
                SendCommand="{Binding SendCommand}"
                MyBubbleColor="#DCF8C6"
                OtherBubbleColor="White" />

public partial class ChatViewModel : ObservableObject
{
    [ObservableProperty] ObservableCollection<ChatMessage> messages = [];

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

Blazor

@using Shiny.Blazor.Controls.Chat

<div style="height: 600px;">
    <ChatView Messages="messages"
              SendCommand="OnSend"
              MyBubbleColor="#DCF8C6"
              OtherBubbleColor="#FFFFFF" />
</div>

@code {
    List<ChatMessage> messages = new();

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

Documentation Sections

Section	What You’ll Learn
Getting Started	Full setup, packages, first working chat
Messages	Sending, images, links, pending state, identifiers
Participants & Avatars	Multi-person mode, avatars, per-user colors
Typing Indicators	Animated dots, toast pills, scroll-aware behavior
Scrolling & Pagination	Smart scroll, unread pill, load-more, scroll-to-message
Acknowledgements	Emoji reactions, grouping, dynamic updates
Bubble Tools	Per-message action menus, built-in & custom tools
Input Bar & Tools	Input config, FAB tools, speech-to-text
Message Templates	Custom rendering with DataTemplate/DataTemplateSelector
Scenarios	AI assistant, customer support, group chat, read-only
API Reference	Full property, command, method & event tables

AI Skill

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny-controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny-controls@shiny

View shiny-controls Plugin