From 7852e9735390c00cfa4b0848ade4e8cdeb1b3af5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=96=C2=96AsTroLog?= <tarasbondarenko3@gmail.com>
Date: Tue, 12 Dec 2023 23:48:09 +0000
Subject: [PATCH] Sa-227 Fix suggestions

---
 .../Pages/Chat.razor                          | 54 ++++++++++++-------
 .../Pages/Chat.razor.cs                       |  5 +-
 .../Pages/Chat.razor.css                      | 14 ++++-
 3 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor b/ShoppingAssistantWebClient.Web/Pages/Chat.razor
index 4f07e36..e938d12 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor
@@ -72,34 +72,34 @@
 
             </ul>
 
+         </div>
+            <div class="possible_options">
 
-        </div>
+                @if (Suggestion.Count != 0)
+                {
 
+                    <div class="tite_options">Several possible options</div>
 
-        <div class="possible_options">
-
-            @if (Suggestion.Count != 0)
-            {
-
-                <div class="tite_options">Several possible options</div>
-
-                <div class="options">
+                    <div class="options">
 
 
 
-                @foreach (var item in Suggestion)
-                    {
+                    @foreach (var item in Suggestion)
+                        {
 
-                        <div @onclick="() => ClickOption(item)" class="topic_options">
-                            @item
-                        </div>
-                    }
+                            <div @onclick="() => ClickOption(item)" class="topic_options">
+                                @item
+                            </div>
+                        }
+
+
+                    </div>
+                }
+
+            </div>
 
 
-                </div>
-            }
 
-        </div>
 
 
         <div class="chat_input">
@@ -127,9 +127,24 @@
     function myJavaScriptFunction(wishlistId) {
         UpdateMenu(wishlistId);
     }
+
+
+
     document.getElementById('button_open').addEventListener('click', changetyle);
 
 </script>
+
+<script>
+    function myJavaScriptHeight() {
+
+        var myDiv = document.querySelector('.possible_options');
+
+        var posth = document.querySelector('.chat_message');
+        var height = myDiv.offsetHeight*0.063
+        posth.style.height = 'calc(100% - ' + (8.5 + height) + 'em)';
+    }
+        document.getElementById('button_open').addEventListener('click', myJavaScriptHeight);
+</script> 
 @code {
 
     [Parameter] public string chatId { get; set; }
@@ -159,7 +174,9 @@
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+                await JSRuntime.InvokeVoidAsync("myJavaScriptHeight");
         await JSRuntime.InvokeVoidAsync("scrollToBottom", chatMessageRef);
+
     }
 
     private async Task UpdateSideMenu(string wishlistId)
@@ -171,6 +188,7 @@
     private void ClickOption(string item)
     {
         inputValue = item;
+        AddNewMessage(inputValue);
     }
 
 }
\ No newline at end of file
diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
index 99eee0a..a9ed1c5 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
@@ -210,8 +210,9 @@ public partial class Chat : ComponentBase
                 Products.Add(input);
 
             } else if(sseEvent.Event == SearchEventType.Suggestion){
-
-                Suggestion.Add(result);
+                if(Suggestion.Count<6){
+                    Suggestion.Add(result);
+                }
             }
 
         }
diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
index a7a69bf..0fb9912 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
@@ -84,6 +84,18 @@
   margin-left: 25%;
   width: 50%;
   border-radius: 0.6em;
+
+  @media screen and (max-width: 750px) {
+    margin-left: 15%;
+    width: 70%;
+
+  }
+
+  @media screen and (max-width: 480px) {
+    margin-left: 2%;
+    width: 96%;
+
+  }
 }
 
 .tite_options {
@@ -105,7 +117,7 @@
   border: 0.09em solid;
   border-color: #009FFF;
   border-radius: 0.6em;
-  margin: 0em 0.6em;
+  margin: 0.2em 0.2em;
   flex: 1;
   text-align: center;
   cursor: pointer;