From d02781b13abe25ef1ba6eaa466c9895f453656f9 Mon Sep 17 00:00:00 2001
From: Marcel Baumgartner <marcel.kbkm@gmail.com>
Date: Thu, 23 Feb 2023 11:39:58 +0100
Subject: [PATCH] Added typing indicators

---
 .../Services/Support/SupportAdminService.cs   | 56 +++++++++++++++++++
 .../Services/Support/SupportClientService.cs  | 56 +++++++++++++++++++
 .../Shared/Views/Admin/Support/View.razor     | 54 ++++++++++++++++--
 Moonlight/Shared/Views/Support.razor          | 43 +++++++++++++-
 Moonlight/resources/lang/de_de.lang           |  3 +
 Moonlight/wwwroot/assets/css/utils.css        | 27 +++++++++
 6 files changed, 233 insertions(+), 6 deletions(-)

diff --git a/Moonlight/App/Services/Support/SupportAdminService.cs b/Moonlight/App/Services/Support/SupportAdminService.cs
index ce11083..682ddf6 100644
--- a/Moonlight/App/Services/Support/SupportAdminService.cs
+++ b/Moonlight/App/Services/Support/SupportAdminService.cs
@@ -11,6 +11,9 @@ public class SupportAdminService
 
     public EventHandler<SupportMessage> OnNewMessage;
 
+    public EventHandler OnUpdateTyping;
+    private List<string> TypingUsers = new();
+    
     private User Self;
     private User Recipient;
 
@@ -38,6 +41,48 @@ public class SupportAdminService
 
                 return Task.CompletedTask;
             });
+        
+        MessageService.Subscribe<SupportClientService, User>(
+            $"support.{Self.Id}.typing",
+            this,  
+            user =>
+            {
+                HandleTyping(user);
+                return Task.CompletedTask;
+            });
+    }
+    
+    private void HandleTyping(User user)
+    {
+        var name = $"{user.FirstName} {user.LastName}";
+        
+        lock (TypingUsers)
+        {
+            if (!TypingUsers.Contains(name))
+            {
+                TypingUsers.Add(name);
+                OnUpdateTyping!.Invoke(this, null!);
+
+                Task.Run(async () =>
+                {
+                    await Task.Delay(TimeSpan.FromSeconds(5));
+
+                    if (TypingUsers.Contains(name))
+                    {
+                        TypingUsers.Remove(name);
+                        OnUpdateTyping!.Invoke(this, null!);
+                    }
+                });
+            }
+        }
+    }
+    
+    public string[] GetTypingUsers()
+    {
+        lock (TypingUsers)
+        {
+            return TypingUsers.ToArray();
+        }
     }
 
     public async Task<SupportMessage[]> GetMessages()
@@ -65,8 +110,19 @@ public class SupportAdminService
         await SupportServerService.Close(Recipient);
     }
 
+    public Task TriggerTyping()
+    {
+        Task.Run(async () =>
+        {
+            await MessageService.Emit($"support.{Recipient.Id}.admintyping", Self);
+        });
+
+        return Task.CompletedTask;
+    }
+
     public void Dispose()
     {
         MessageService.Unsubscribe($"support.{Recipient.Id}.message", this);
+        MessageService.Unsubscribe($"support.{Recipient.Id}.typing", this);
     }
 }
\ No newline at end of file
diff --git a/Moonlight/App/Services/Support/SupportClientService.cs b/Moonlight/App/Services/Support/SupportClientService.cs
index c08b9e0..328b3a9 100644
--- a/Moonlight/App/Services/Support/SupportClientService.cs
+++ b/Moonlight/App/Services/Support/SupportClientService.cs
@@ -10,6 +10,9 @@ public class SupportClientService : IDisposable
     private readonly MessageService MessageService;
 
     public EventHandler<SupportMessage> OnNewMessage;
+    
+    public EventHandler OnUpdateTyping;
+    private List<string> TypingUsers = new();
 
     private User Self;
     
@@ -36,6 +39,48 @@ public class SupportClientService : IDisposable
             
             return Task.CompletedTask;
         });
+        
+        MessageService.Subscribe<SupportClientService, User>(
+            $"support.{Self.Id}.admintyping", 
+            this,  
+            user =>
+            {
+                HandleTyping(user);
+                return Task.CompletedTask;
+            });
+    }
+
+    private void HandleTyping(User user)
+    {
+        var name = $"{user.FirstName} {user.LastName}";
+        
+        lock (TypingUsers)
+        {
+            if (!TypingUsers.Contains(name))
+            {
+                TypingUsers.Add(name);
+                OnUpdateTyping!.Invoke(this, null!);
+
+                Task.Run(async () =>
+                {
+                    await Task.Delay(TimeSpan.FromSeconds(5));
+
+                    if (TypingUsers.Contains(name))
+                    {
+                        TypingUsers.Remove(name);
+                        OnUpdateTyping!.Invoke(this, null!);
+                    }
+                });
+            }
+        }
+    }
+
+    public string[] GetTypingUsers()
+    {
+        lock (TypingUsers)
+        {
+            return TypingUsers.ToArray();
+        }
     }
 
     public async Task<SupportMessage[]> GetMessages()
@@ -56,9 +101,20 @@ public class SupportClientService : IDisposable
             Self
         );
     }
+    
+    public Task TriggerTyping()
+    {
+        Task.Run(async () =>
+        {
+            await MessageService.Emit($"support.{Self.Id}.typing", Self);
+        });
+
+        return Task.CompletedTask;
+    }
 
     public void Dispose()
     {
         MessageService.Unsubscribe($"support.{Self.Id}.message", this);
+        MessageService.Unsubscribe($"support.{Self.Id}.admintyping", this);
     }
 }
\ No newline at end of file
diff --git a/Moonlight/Shared/Views/Admin/Support/View.razor b/Moonlight/Shared/Views/Admin/Support/View.razor
index 8300475..e81ede7 100644
--- a/Moonlight/Shared/Views/Admin/Support/View.razor
+++ b/Moonlight/Shared/Views/Admin/Support/View.razor
@@ -51,7 +51,7 @@
                                                                 <img alt="Logo" src="@(ResourceService.Image("logo.svg"))">
                                                             </div>
                                                         </div>
-    
+
                                                         <div class="p-5 rounded bg-light-primary text-dark fw-semibold mw-lg-400px text-end">
                                                             @if (message.IsSystem)
                                                             {
@@ -80,7 +80,7 @@
                                                                 <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">
                                                             @(message.Message)
                                                         </div>
@@ -92,8 +92,34 @@
                                 </LazyLoader>
                             </div>
                             <div class="card-footer">
-                                <textarea @bind="Content" class="form-control form-control-flush mb-3" rows="1" placeholder="Type a message">            
-                    </textarea>
+                                @{
+                                    var typingUsers = SupportAdminService.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">
@@ -114,7 +140,7 @@
                             <h2 class="text-dark fw-bold mb-11">
                                 <TL>User information</TL>
                             </h2>
-    
+
                             <div class="d-flex align-items-center mb-6">
                                 <spna class="fw-semibold text-gray-800 fs-5 m-0">
                                     <TL>Firstname</TL>: @(User.FirstName)
@@ -156,6 +182,8 @@
     private SupportMessage[] Messages;
     private string Content = "";
 
+    private DateTime LastTypingTimestamp = DateTime.UtcNow.AddMinutes(-10);
+
     private async Task Load(LazyLoader arg)
     {
         User = UserRepository
@@ -165,11 +193,17 @@
         if (User != null)
         {
             SupportAdminService.OnNewMessage += OnNewMessage;
+            SupportAdminService.OnUpdateTyping += OnUpdateTyping;
 
             await SupportAdminService.Start(User);
         }
     }
 
+    private async void OnUpdateTyping(object? sender, EventArgs e)
+    {
+        await InvokeAsync(StateHasChanged);
+    }
+
     private async void OnNewMessage(object? sender, SupportMessage e)
     {
         Messages = (await SupportAdminService.GetMessages()).Reverse().ToArray();
@@ -191,4 +225,14 @@
     {
         await SupportAdminService.Close();
     }
+
+    private async Task OnTyping()
+    {
+        if ((DateTime.UtcNow - LastTypingTimestamp).TotalSeconds > 5)
+        {
+            LastTypingTimestamp = DateTime.UtcNow;
+
+            await SupportAdminService.TriggerTyping();
+        }
+    }
 }
\ No newline at end of file
diff --git a/Moonlight/Shared/Views/Support.razor b/Moonlight/Shared/Views/Support.razor
index beae23b..3bd8e49 100644
--- a/Moonlight/Shared/Views/Support.razor
+++ b/Moonlight/Shared/Views/Support.razor
@@ -99,7 +99,30 @@
                 </LazyLoader>
             </div>
             <div class="card-footer">
-                <textarea @bind="Content" class="form-control form-control-flush mb-3" rows="1" placeholder="Type a message">            
+                @{
+                    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">
@@ -124,6 +147,8 @@
 
     private SupportMessage[] Messages;
     private string Content = "";
+    
+    private DateTime LastTypingTimestamp = DateTime.UtcNow.AddMinutes(-10);
 
     private async Task Load(LazyLoader lazyLoader)
     {
@@ -132,10 +157,16 @@
         await lazyLoader.SetText("Starting chat client");
 
         SupportClientService.OnNewMessage += OnNewMessage;
+        SupportClientService.OnUpdateTyping += OnUpdateTyping;
 
         await SupportClientService.Start();
     }
 
+    private async void OnUpdateTyping(object? sender, EventArgs e)
+    {
+        await InvokeAsync(StateHasChanged);
+    }
+
     private async void OnNewMessage(object? sender, SupportMessage e)
     {
         Messages = (await SupportClientService.GetMessages()).Reverse().ToArray();
@@ -153,4 +184,14 @@
     {
         Messages = (await SupportClientService.GetMessages()).Reverse().ToArray();
     }
+
+    private async void OnTyping()
+    {
+        if ((DateTime.UtcNow - LastTypingTimestamp).TotalSeconds > 5)
+        {
+            LastTypingTimestamp = DateTime.UtcNow;
+
+            await SupportClientService.TriggerTyping();
+        }
+    }
 }
\ No newline at end of file
diff --git a/Moonlight/resources/lang/de_de.lang b/Moonlight/resources/lang/de_de.lang
index 4d83d5d..7f49733 100644
--- a/Moonlight/resources/lang/de_de.lang
+++ b/Moonlight/resources/lang/de_de.lang
@@ -224,3 +224,6 @@ Close ticket;Close ticket
 Closing;Closing
 The support team has been notified. Please be patient;The support team has been notified. Please be patient
 The ticket is now closed. Type a message to open it again;The ticket is now closed. Type a message to open it again
+1 day ago;1 day ago
+is typing;is typing
+are typing;are typing
diff --git a/Moonlight/wwwroot/assets/css/utils.css b/Moonlight/wwwroot/assets/css/utils.css
index 3ee036a..872fe2c 100644
--- a/Moonlight/wwwroot/assets/css/utils.css
+++ b/Moonlight/wwwroot/assets/css/utils.css
@@ -14,4 +14,31 @@
 
 .blur-unless-hover:hover {
     filter: none;
+}
+
+div.wave {
+}
+div.wave .dot {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 3px;
+    background-color: var(--bs-body-color);
+    animation: wave 1.3s linear infinite;
+}
+div.wave .dot:nth-child(2) {
+    animation-delay: -1.1s;
+}
+div.wave .dot:nth-child(3) {
+    animation-delay: -0.9s;
+}
+
+@keyframes wave {
+    0%, 60%, 100% {
+        transform: initial;
+    }
+    30% {
+        transform: translateY(-15px);
+    }
 }
\ No newline at end of file