.message {
white-space: normal;
overflow: hidden;
border-radius: 0.75rem;
border-width: 1px;
border-style: solid;
word-wrap: break-word;
position: relative;
display: inline-block;
max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
border-color: #F2F2F2;
background-color: #F2F2F2;
color: #171717;
}
.has-avatar-spacer .message {
max-width: calc(100% - 3rem - 0.25rem - 0.25rem);
}
.by-me .message {
border-color: #EC4899;
background-color: #EC4899;
color: #fff;
margin-right: 0.50rem;
}
<script>
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
// Populate users any way you prefer
Me = new User()
{
Id = 123456,
Name = "Alice",
Email = new string[] { "alice@example.com" } ,
PhotoUrl = "https://talkjs.com/images/avatar-1.jpg",
WelcomeMessage = "Hey there! How are you? :-)",
};
OtherUsers = new List<User>();
OtherUsers.Add(new User()
{
Id = 654321,
Name = "Sebastian",
Email = new string[] { "sebastian@example.com" },
PhotoUrl = "https://talkjs.com/images/avatar-5.jpg",
WelcomeMessage = "Hey, how can I help?",
});
StateHasChanged();
}
</script>
We were able to offload all messaging to TalkJS — hugely simplifying our development of an otherwise complex stack.