Add conversations to your app: a message list with a composer, grouping of messages and a safe display of text.
Why it helps
- Message list and composer
- Grouping
- Safe plain text
Where it fits
- Support chat
- Team messaging
- Customer conversations
Example
<Chat Messages="_messages" OnSend="Send" TypingText="@(_typing ? "Support is typing..." : null)" />
@code {
private readonly List<ChatMessage> _messages = new()
{
new("Support", "Hello! How can we help?", DateTime.Today.AddHours(9)),
new("You", "My export fails on large files.", DateTime.Today.AddHours(9).AddMinutes(1), true)
};
private bool _typing;
private async Task Send(string text)
{
_messages.Add(new ChatMessage("You", text, DateTime.Now, true));
_typing = true;
StateHasChanged();
await Task.Delay(900);
_typing = false;
_messages.Add(new ChatMessage("Support", "Thanks, we are looking into it.", DateTime.Now));
}
}A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.
Part of RayCraft Complete.