ChatView

A modern chat UI control with message bubbles, typing indicators, load-more pagination, and a bottom input bar. Supports single-person and multi-person conversations with per-participant colors and avatars.

• 
• 

Frameworks

.NET MAUI

Blazor

Screenshot

Basic Usage

<shiny:ChatView Messages="{Binding Messages}"
                Participants="{Binding Participants}"
                IsMultiPerson="True"
                TypingParticipants="{Binding TypingParticipants}"
                SendCommand="{Binding SendCommand}"
                AttachImageCommand="{Binding AttachImageCommand}"
                LoadMoreCommand="{Binding LoadMoreCommand}"
                MyBubbleColor="#DCF8C6"
                OtherBubbleColor="White"
                PlaceholderText="Type a message..." />

Features

• Chat Bubbles — Right-aligned for local user, left-aligned for others. Rounded corners with a smaller tail radius on the last message in a group. Per-participant colors via ChatParticipant.BubbleColor.
• Visual Grouping — Consecutive messages from the same sender within the same minute are grouped together. Tight spacing (2px) within a group, wider spacing (12px) between groups.
• Timestamps — Shown below the last message in each group. Today’s messages show time only (“2:30 PM”); previous days show full date (“Apr 15, 2:30 PM”).
• Multi-person mode — First message in each group shows an avatar circle (initials or image) and display name. Disabled by default; enable with IsMultiPerson.
• Single-person mode — Avatars and names hidden by default. Override with ShowAvatarsInSingleChat.
• Typing Indicators — Animated bouncing dots with contextual text: “{Name} is typing…”, “{Name1}, {Name2} are typing”, or “Multiple users are typing” (3+ users). Never shows “you are typing”.
• Link Detection — URLs in text messages are auto-detected and rendered as tappable links.
• Image Messages — Set ChatMessage.ImageUrl for image bubbles. Text and image are mutually exclusive per message.
• Virtualization — MAUI uses CollectionView with RemainingItemsThreshold for automatic load-more. Chat starts scrolled to the latest messages.
• Input Bar — Text entry with Enter-to-send and a Send button. Optional attach button appears when AttachImageCommand is set. Hide the entire bar with IsInputBarVisible = false.

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