Moonlight/Moonlight/Shared/Views/Support.razor

@page "/support"
@using Moonlight.App.Services
@using Moonlight.App.Services.Sessions
@using Moonlight.App.Database.Entities
@using Moonlight.App.Helpers
@using Moonlight.App.Services.Support

@inject ResourceService ResourceService
@inject SupportClientService SupportClientService
@inject SmartTranslateService SmartTranslateService

<LazyLoader Load="Load">
    <div class="row">
        <div class="card">
            <div class="card-body">
                <LazyLoader Load="LoadMessages">
                    <div class="scroll-y me-n5 pe-5" style="max-height: 65vh; display: flex; flex-direction: column-reverse;">
                        @foreach (var message in Messages)
                        {
                            if (message.IsSystem || message.IsSupport)
                            {
                                <div class="d-flex justify-content-start mb-10 ">
                                    <div class="d-flex flex-column align-items-start">
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="symbol  symbol-35px symbol-circle ">
                                                <img alt="Logo" src="@(ResourceService.Image("logo.svg"))">
                                            </div>
                                            <div class="ms-3">
                                                <a class="fs-5 fw-bold text-gray-900 text-hover-primary me-1">
                                                    @if (message.IsSupport && !message.IsSystem)
                                                    {
                                                        <span>@(message.Sender!.FirstName) @(message.Sender!.LastName)</span>
                                                    }
                                                    else
                                                    {
                                                        <span>System</span>
                                                    }
                                                </a>
                                                <span class="text-muted fs-7 mb-1">@(Formatter.FormatAgoFromDateTime(message.CreatedAt, SmartTranslateService))</span>
                                            </div>
                                        </div>

                                        <div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start">
                                            @if (message.IsSystem)
                                            {
                                                <TL>@(message.Message)</TL>
                                            }
                                            else
                                            {
                                                @(message.Message)
                                            }
                                        </div>
                                    </div>
                                </div>
                            }
                            else
                            {
                                <div class="d-flex justify-content-end mb-10 ">
                                    <div class="d-flex flex-column align-items-end">
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="me-3">
                                                <span class="text-muted fs-7 mb-1">@(Formatter.FormatAgoFromDateTime(message.CreatedAt, SmartTranslateService))</span>
                                                <a class="fs-5 fw-bold text-gray-900 text-hover-primary ms-1">
                                                    <span>@(message.Sender!.FirstName) @(message.Sender!.LastName)</span>
                                                </a>
                                            </div>
                                            <div class="symbol  symbol-35px symbol-circle ">
                                                <img alt="Avatar" src="@(ResourceService.Avatar(message.Sender))">
                                            </div>
                                        </div>

                                        <div class="p-5 rounded bg-light-primary text-dark fw-semibold mw-lg-400px text-end">
                                            @(message.Message)
                                        </div>
                                    </div>
                                </div>
                            }
                        }
                        <div class="d-flex justify-content-start mb-10 ">
                            <div class="d-flex flex-column align-items-start">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="symbol  symbol-35px symbol-circle ">
                                        <img alt="Logo" src="@(ResourceService.Image("logo.svg"))">
                                    </div>
                                    <div class="ms-3">
                                        <a class="fs-5 fw-bold text-gray-900 text-hover-primary me-1">
                                            <span>System</span>
                                        </a>
                                    </div>
                                </div>

                                <div class="p-5 rounded bg-light-info text-dark fw-semibold mw-lg-400px text-start">
                                    <TL>Welcome to the support chat. Ask your question here and we will help you</TL>
                                </div>
                            </div>
                        </div>
                    </div>
                </LazyLoader>
            </div>
            <div class="card-footer">
                @{
                    var typingUsers = SupportClientService.GetTypingUsers();
                }
                
                @if (typingUsers.Any())
                {
                    <span class="mb-5 fs-5 d-flex flex-row">
                        <div class="wave me-3">
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                        </div>
                        @if (typingUsers.Length > 1)
                        {
                            <span>@(typingUsers.Aggregate((current, next) => current + ", " + next)) <TL>are typing</TL></span>
                        }
                        else
                        {
                            <span>@(typingUsers.First()) <TL>is typing</TL></span>
                        }
                    </span>
                }

                <textarea @bind="Content" @oninput="OnTyping" class="form-control mb-3" rows="1" placeholder="Type a message">            
                </textarea>
                <div class="d-flex flex-stack">
                    <div class="d-flex align-items-center me-2">
                        <button class="btn btn-sm btn-icon btn-active-light-primary me-1" type="button">
                            <i class="bx bx-upload fs-3"></i>
                        </button>
                    </div>
                    <WButton Text="@(SmartTranslateService.Translate("Send"))"
                             WorkingText="@(SmartTranslateService.Translate("Sending"))"
                             CssClasses="btn-primary"
                             OnClick="Send">
                    </WButton>
                </div>
            </div>
        </div>
    </div>
</LazyLoader>

@code
{
    private SupportMessage[] Messages;
    private string Content = "";
    
    private DateTime LastTypingTimestamp = DateTime.UtcNow.AddMinutes(-10);

    private async Task Load(LazyLoader lazyLoader)
    {
        await lazyLoader.SetText("Starting chat client");

        SupportClientService.OnNewMessage += OnNewMessage;
        SupportClientService.OnUpdateTyping += OnUpdateTyping;

        await SupportClientService.Start();
    }

    private async Task Send()
    {
        await SupportClientService.SendMessage(Content);
        Content = "";
        await InvokeAsync(StateHasChanged);
    }
    
    #region Message handling
    
    private async void OnNewMessage(object? sender, SupportMessage e)
    {
        Messages = (await SupportClientService.GetMessages()).Reverse().ToArray();
        await InvokeAsync(StateHasChanged);
    }

    private async Task LoadMessages(LazyLoader arg)
    {
        Messages = (await SupportClientService.GetMessages()).Reverse().ToArray();
    }
    
    #endregion
    
    #region Typing
    
    private async void OnUpdateTyping(object? sender, EventArgs e)
    {
        await InvokeAsync(StateHasChanged);
    }

    private async void OnTyping()
    {
        if ((DateTime.UtcNow - LastTypingTimestamp).TotalSeconds > 5)
        {
            LastTypingTimestamp = DateTime.UtcNow;

            await SupportClientService.TriggerTyping();
        }
    }
    
    #endregion
}