Shiny .NET v4 is here with BLE Windows Support, Improved GPS, & More! Check It Out

ChatView | Properties & Commands

Properties

Property	Type	Default	Description
`Messages`	`IList<ChatMessage>`	`null`	Message collection (supports `INotifyCollectionChanged` on MAUI)
`Participants`	`IList<ChatParticipant>`	`null`	Participant info for avatar/name/color lookup
`IsMultiPerson`	`bool`	`false`	Show avatars and names for other participants
`ShowAvatarsInSingleChat`	`bool`	`false`	Force avatars even in single-person mode
`MyBubbleColor`	`Color` / `string`	`#DCF8C6`	Local user bubble color
`MyTextColor`	`Color` / `string`	`Black`	Local user text color
`OtherBubbleColor`	`Color` / `string`	`White`	Default other-user bubble color
`OtherTextColor`	`Color` / `string`	`Black`	Other-user text color
`PlaceholderText`	`string`	`"Type a message..."`	Input field placeholder
`SendButtonText`	`string`	`"Send"`	Send button label
`IsInputBarVisible`	`bool`	`true`	Show/hide the input bar
`ShowTypingIndicator`	`bool`	`true`	Enable/disable typing notifications
`TypingParticipants`	`IList<ChatParticipant>`	`null`	Currently typing participants
`ScrollToFirstUnread`	`bool`	`false`	Scroll to first unread instead of end
`FirstUnreadMessageId`	`string?`	`null`	ID of the first unread message
`UseHapticFeedback`	`bool`	`true`	Haptic feedback on send (MAUI only)

Commands

MAUI (ICommand)	Blazor (EventCallback)	Parameter	Description
`SendCommand`	`EventCallback<string>`	text string	Fires when user sends via Enter key or Send button
`AttachImageCommand`	`EventCallback`	—	Fires when user taps attach; implement your own image picker
`LoadMoreCommand`	`EventCallback`	—	Fires when user scrolls near top; prepend older messages

Methods

Method	Returns	Description
`ScrollToEnd(bool animate)`	`void`	Scroll to the latest message
`ScrollToMessage(string messageId, bool animate)`	`void`	Scroll to a specific message by ID

ViewModel Pattern

public partial class ChatViewModel : ObservableObject
{
    [ObservableProperty] ObservableCollection<ChatMessage> messages = [];
    [ObservableProperty] ObservableCollection<ChatParticipant> participants = [];
    [ObservableProperty] ObservableCollection<ChatParticipant> typingParticipants = [];
    [ObservableProperty] bool isMultiPerson = true;

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

    [RelayCommand]
    void AttachImage()
    {
        // Implement your own image picker, then add:
        Messages.Add(new ChatMessage
        {
            ImageUrl = "https://example.com/photo.jpg",
            SenderId = "me",
            IsFromMe = true,
            Timestamp = DateTimeOffset.Now
        });
    }

    [RelayCommand]
    void LoadMore()
    {
        // Fetch older messages from your data source and insert at index 0
        var olderMessages = FetchOlderMessages();
        foreach (var msg in olderMessages)
            Messages.Insert(0, msg);
    }
}

Blazor Usage

The Blazor <ChatView> component mirrors the MAUI control. Colors use CSS strings and commands use EventCallback:

@using Shiny.Blazor.Controls.Chat

<div style="height:600px;">
    <ChatView Messages="messages"
              Participants="participants"
              IsMultiPerson="true"
              TypingParticipants="typingParticipants"
              SendCommand="OnSend"
              AttachImageCommand="OnAttach"
              LoadMoreCommand="OnLoadMore"
              MyBubbleColor="#DCF8C6"
              OtherBubbleColor="#FFFFFF" />
</div>

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

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

    Task OnAttach() => Task.CompletedTask;
    Task OnLoadMore() => Task.CompletedTask;
}