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,74 +100,83 @@ public partial class Chat : ComponentBase
         }
     private async Task AddNewMessage()
     {
-        try{
-        messageCreateDto = new MessageCreateDto { Text = inputValue };;
-        Message = new Messages();
-        Message.Text = inputValue;
-        Message.Role = "User";
-        Message.Id = "";
-        Message.CreatedById = "";
-        inputValue = "";
-        Suggestion = new List<String>();
-        Messages.Add(Message);
-        StateHasChanged();
 
-        cancelTokenSource = new CancellationTokenSource();
-        var cancellationToken = cancelTokenSource.Token;
 
-        var serverSentEvent = _apiClient.GetServerSentEventStreamed($"ProductsSearch/search/{chatId}", messageCreateDto, cancellationToken);
+        if (!isWaitingForResponse && !string.IsNullOrWhiteSpace(inputValue))
-        bool first = true;
-
-        await foreach (var sseEvent in serverSentEvent.WithCancellation(cancellationToken))
         {
-            Console.WriteLine($"Received SSE Event: {sseEvent.Event}, Data: {sseEvent.Data}");
+            JSRuntime.InvokeVoidAsync("clearInput");
-
+            isWaitingForResponse = true;
-
-            if(sseEvent.Event == SearchEventType.Message){
-
-                string input = sseEvent.Data;
-                Regex regex = new Regex("\"(.*?)\"");
-                Match match = regex.Match(input);
-                string result = match.Groups[1].Value;
-    
-
 
+            try{
+                
+            messageCreateDto = new MessageCreateDto { Text = inputValue };;
             Message = new Messages();
-            Message.Text = result;
+            Message.Text = inputValue;
-            Message.Role = "bot";
+            Message.Role = "User";
             Message.Id = "";
             Message.CreatedById = "";
-
+            inputValue = "";
-            if (first)
+            Suggestion = new List<String>();
-            {
+            Messages.Add(Message);
-                Messages.Add(Message);
-                first = false;
-            }
-            else
-            {
-                var lengt = Messages.Count();
-                Messages[lengt-1].Text += Message.Text;
-            }
-
             StateHasChanged();
-                
-            }else if(sseEvent.Event == SearchEventType.Product){
 
-                var url = $"/chat/{chatId}/product";
+            cancelTokenSource = new CancellationTokenSource();
-                Navigation.NavigateTo(url);
+            var cancellationToken = cancelTokenSource.Token;
 
-            }else if(sseEvent.Event == SearchEventType.Suggestion){
+            var serverSentEvent = _apiClient.GetServerSentEventStreamed($"ProductsSearch/search/{chatId}", messageCreateDto, cancellationToken);
+            bool first = true;
+
+            await foreach (var sseEvent in serverSentEvent.WithCancellation(cancellationToken))
+            {
+                Console.WriteLine($"Received SSE Event: {sseEvent.Event}, Data: {sseEvent.Data}");
+
+
+                if(sseEvent.Event == SearchEventType.Message){
+
+                    string input = sseEvent.Data;
+                    Regex regex = new Regex("\"(.*?)\"");
+                    Match match = regex.Match(input);
+                    string result = match.Groups[1].Value;
+        
+
+
+                Message = new Messages();
+                Message.Text = result;
+                Message.Role = "bot";
+                Message.Id = "";
+                Message.CreatedById = "";
+
+                if (first)
+                {
+                    Messages.Add(Message);
+                    first = false;
+                }
+                else
+                {
+                    var lengt = Messages.Count();
+                    Messages[lengt-1].Text += Message.Text;
+                }
+
+                StateHasChanged();
+                    
+                }else if(sseEvent.Event == SearchEventType.Product){
+
+                    var url = $"/chat/{chatId}/product";
+                    Navigation.NavigateTo(url);
+
+                }else if(sseEvent.Event == SearchEventType.Suggestion){
+
+                        Suggestion.Add(sseEvent.Data);
+                }
 
-                    Suggestion.Add(sseEvent.Data);
             }
 
+            isWaitingForResponse = false;
+            }catch(Exception ex){
+                    Console.WriteLine($"Error : {ex.Message}");
+                }
         }
 
-        }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();
+            }
+        }
+    }
 }