Merge pull request #12 from Shchoholiev/feature/SA-194-bug-for-pressing-the-enter-button

SA-194 Add  message entering

ShoppingAssistantWebClient.Web/Pages/Chat.razor

@@ -76,7 +76,6 @@
                     }
 
 
-
                 </div>
             }
 
@@ -84,11 +83,10 @@
 
 
         <div class="chat_input">
-            <input @bind="inputValue" @onkeydown="Enter" class="input_messages" type="text" id="chatInput"
+            <input @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text" id="chatInput"
-                placeholder="Describe what you are looking for....">
+                placeholder="Describe what you are looking for...." autocomplete="off">
             <img @onclick="AddNewMessage" class="button_sende" src="/images/send.svg" alt="Send message">
         </div>
-
     </div>
 
 </div>
@@ -102,6 +100,10 @@
 
         }
     };
+    window.clearInput = () => {
+        // Отримати елемент вводу за його ідентифікатором і обнулити його значення
+        document.getElementById('chatInput').value = '';
+    };
 
     document.getElementById('button_open').addEventListener('click', changetyle);
 
@@ -114,12 +116,19 @@
     {
         await LoadMessages();
     }
+    private void InputChanged(ChangeEventArgs e)
+    {
+        inputValue = e.Value.ToString();
+
+    }
 
     public void Enter(KeyboardEventArgs e)
     {
         if (e.Code == "Enter" || e.Code == "NumpadEnter")
         {
             AddNewMessage();
+
+
         }
     }
 

ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs

@@ -6,8 +6,11 @@ using ShoppingAssistantWebClient.Web.Network;
 using ShoppingAssistantWebClient.Web.Models.Input;
 using ShoppingAssistantWebClient.Web.Models.Enums;
 using System.Text.RegularExpressions;
+using Microsoft.JSInterop;
+
 namespace ShoppingAssistantWebClient.Web.Pages;
 
+
 public partial class Chat : ComponentBase
 {
 
@@ -24,6 +27,7 @@ public partial class Chat : ComponentBase
         private CancellationTokenSource cancelTokenSource; 
 
         private MessageCreateDto messageCreateDto;
+        private bool isWaitingForResponse = false;
         public bool isLoading = true;
         private string inputValue = "";
         private string name = "";
@@ -96,7 +100,15 @@ public partial class Chat : ComponentBase
         }
     private async Task AddNewMessage()
     {
+
+
+        if (!isWaitingForResponse && !string.IsNullOrWhiteSpace(inputValue))
+        {
+            JSRuntime.InvokeVoidAsync("clearInput");
+            isWaitingForResponse = true;
+
             try{
+                
             messageCreateDto = new MessageCreateDto { Text = inputValue };;
             Message = new Messages();
             Message.Text = inputValue;
@@ -159,10 +171,11 @@ public partial class Chat : ComponentBase
 
             }
 
+            isWaitingForResponse = false;
             }catch(Exception ex){
                     Console.WriteLine($"Error : {ex.Message}");
                 }
-
+        }
 
     }
 

ShoppingAssistantWebClient.Web/Pages/Index.razor

@@ -52,8 +52,8 @@
 
         </div>
         <div class="chat_input">
-            <input @bind="inputValue" class="input_messages" type="text" id="chatInput"
+            <input @bind="inputValue" @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text" id="chatInput"
-                placeholder="Describe what you are looking for....">
+                placeholder="Describe what you are looking for...." autocomplete="off">
             <img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
         </div>
 
@@ -133,4 +133,20 @@
 
     }
 
+    private void InputChanged(ChangeEventArgs e)
+    {
+        // Оновіть значення поля введення при кожному введенні тексту
+        inputValue = e.Value.ToString();
+    }
+    public void Enter(KeyboardEventArgs e)
+    {
+        if (e.Code == "Enter" || e.Code == "NumpadEnter")
+        {
+
+            if (!string.IsNullOrWhiteSpace(inputValue))
+            {
+                CreateNewChat();
+            }
+        }
+    }
 }