ChatView | Participants & Avatars

Overview

ChatView supports both one-on-one and group conversations. The Participants collection maps sender IDs to display names, avatars, and bubble colors.

Single-Person Mode (Default)

By default, IsMultiPerson = false. Messages render without avatars or display names — just colored bubbles aligned left (others) and right (you).

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

This is ideal for:

• One-on-one conversations
• AI assistant interfaces
• Customer support (single agent)

Showing Avatars in Single-Person Mode

If you want avatars without full multi-person behavior, enable ShowAvatarsInSingleChat:

<shiny:ChatView Messages="{Binding Messages}"
                SendCommand="{Binding SendCommand}"
                ShowAvatarsInSingleChat="True"
                Participants="{Binding Participants}" />

This shows the bot/agent avatar on their messages without showing display names or changing grouping behavior.

Multi-Person Mode

Enable IsMultiPerson to show avatars and display names for group conversations:

<shiny:ChatView Messages="{Binding Messages}"
                Participants="{Binding Participants}"
                IsMultiPerson="True"
                SendCommand="{Binding SendCommand}" />

Setting Up Participants

Each participant needs an Id that matches the SenderId on their messages:

MAUI

[ObservableProperty]
ObservableCollection<ChatParticipant> participants = new()
{
    new ChatParticipant
    {
        Id = "alice",
        DisplayName = "Alice Johnson",
        Avatar = ImageSource.FromUri(new Uri("https://i.pravatar.cc/100?u=alice")),
        BubbleColor = Color.FromArgb("#E3F2FD")
    },
    new ChatParticipant
    {
        Id = "bob",
        DisplayName = "Bob Smith",
        Avatar = ImageSource.FromFile("bob_avatar.png"),
        BubbleColor = Color.FromArgb("#FFF3E0")
    },
    new ChatParticipant
    {
        Id = "charlie",
        DisplayName = "Charlie"
        // No avatar — will show initials "C"
        // No BubbleColor — falls back to OtherBubbleColor
    }
};

Blazor

List<ChatParticipant> participants = new()
{
    new ChatParticipant
    {
        Id = "alice",
        DisplayName = "Alice Johnson",
        AvatarUrl = "https://i.pravatar.cc/100?u=alice",
        BubbleColor = "#E3F2FD"
    },
    new ChatParticipant
    {
        Id = "bob",
        DisplayName = "Bob Smith",
        AvatarUrl = "/images/bob.png",
        BubbleColor = "#FFF3E0"
    }
};

Note

On MAUI, the avatar property is Avatar (type ImageSource). On Blazor, it’s AvatarUrl (type string) — a URL rendered as an <img> tag.

Avatar Display Rules

Avatars and display names appear when all of these conditions are met:

1. IsMultiPerson = true OR ShowAvatarsInSingleChat = true
2. The message is the first in its group (different sender or >1 minute gap)
3. The message is not from the local user (IsFromMe = false)

Your own messages never show an avatar — they’re right-aligned and identified by color.

Initials Fallback

When no avatar image is provided, ChatView generates initials from DisplayName:

DisplayName	Initials
”Alice Johnson”	AJ
”Bob”	B
”Jean-Pierre Dupont”	JD
null or empty	?

Initials render inside a 32×32 circular border, colored with the participant’s BubbleColor (or OtherBubbleColor as fallback).

Per-Participant Bubble Colors

Each participant can have a unique bubble color. This makes it easy to distinguish speakers in group chats:

var participants = new ObservableCollection<ChatParticipant>
{
    new() { Id = "support", DisplayName = "Support", BubbleColor = Color.FromArgb("#E8F5E9") },
    new() { Id = "billing", DisplayName = "Billing", BubbleColor = Color.FromArgb("#FFF3E0") },
    new() { Id = "tech", DisplayName = "Tech Team", BubbleColor = Color.FromArgb("#E3F2FD") }
};

Color precedence:

1. ChatParticipant.BubbleColor (if set)
2. ChatView.OtherBubbleColor (fallback)

Your messages always use MyBubbleColor.

Dynamic Participants

Participants can be added at runtime. This is useful for group chats where members join/leave:

// New user joins the conversation
Participants.Add(new ChatParticipant
{
    Id = "newuser",
    DisplayName = "Dana",
    BubbleColor = Color.FromArgb("#F3E5F5")
});

// Their message now renders with avatar and color
Messages.Add(new ChatMessage
{
    Text = "Hey everyone!",
    SenderId = "newuser",
    IsFromMe = false,
    Timestamp = DateTimeOffset.Now
});

Participant Lookup

When rendering a message, ChatView looks up the participant by matching ChatMessage.SenderId to ChatParticipant.Id. If no match is found:

• No avatar is shown (equivalent to initials with ”?”)
• The OtherBubbleColor is used
• No display name appears

This means you can send messages without participants configured — you just won’t get the visual identity features.

Common Patterns

AI Assistant with Custom Avatar

var participants = new ObservableCollection<ChatParticipant>
{
    new ChatParticipant
    {
        Id = "assistant",
        DisplayName = "AI Assistant",
        Avatar = ImageSource.FromFile("ai_avatar.png"),
        BubbleColor = Color.FromArgb("#F0F0F0")
    }
};

<shiny:ChatView Messages="{Binding Messages}"
                Participants="{Binding Participants}"
                ShowAvatarsInSingleChat="True"
                SendCommand="{Binding SendCommand}" />

Team Chat with Color Coding

var participants = new ObservableCollection<ChatParticipant>
{
    new() { Id = "design", DisplayName = "Design Team", BubbleColor = Color.FromArgb("#FCE4EC") },
    new() { Id = "eng", DisplayName = "Engineering", BubbleColor = Color.FromArgb("#E8EAF6") },
    new() { Id = "pm", DisplayName = "Product", BubbleColor = Color.FromArgb("#E8F5E9") }
};

Anonymous Chat (No Participants)

For simple scenarios where you don’t need identity:

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

Messages still work — they just render as plain colored bubbles without avatars or names.