Index2.razor

<div class="container bootstrap snippets bootdey">
    <div class="tile tile-alt" id="messages-main">

        <div class="ms-body center">
            <div class="action-header clearfix">
               @if (!string.IsNullOrEmpty(_typingUser))
               {
                   <strong>@_typingUser is typing...</strong>
               }
            </div>
            @foreach (var message in _chatHistory)
            {
                if (message.UserId != _userId)
                {
                    <div class="message-feed media">
                        <div class="pull-left">

                        </div>
                        <div class="media-body">
                            <div class="mf-content">
                               @message.MessageContent
                            </div>
                            <small class="mf-date"><i class="fa fa-clock-o"></i>@message.MessageDate</small>
                            <small class="mf-date"><i class="fa fa-user"></i> @message.UserName</small>
                        </div>
                    </div>
                }
                else
                {
                    <div class="message-feed right">
                        <div class="pull-right">

                        </div>
                        <div class="media-body">
                            <div class="mf-content">
                                @message.MessageContent
                            </div>
                            <small class="mf-date"><i class="fa fa-clock-o"></i>@message.MessageDate</small>
                        </div>
                    </div>
                }
            }


            <div class="msb-reply">
                <textarea @bind="@_message" @oninput="@InitiateUserIsTyping" placeholder="What's on your mind..."></textarea>
                <button @onclick="@SendMessage"><i class="fa fa-paper-plane-o"></i></button>
            </div>
        </div>
    </div>
</div>