Merge pull request #21 from Shchoholiev/bug/SA-215-fix-visual-bugs

Bug/Sa 215 fix visual bugs

ShoppingAssistantWebClient.Web/Pages/Chat.razor

@@ -19,6 +19,8 @@
     <div class="new_chat">
 
         <div class="title_one_frame">@name</div>
+        
+        <div class="gradient"></div>
 
         <div class="chat_message" @ref="chatMessageRef">
 
@@ -33,9 +35,27 @@
                         if (item.Role != "User")
                         {
 
-                            <li class=" chat_incoming">
-                                <p>@item.Text</p>
-                            </li>
+                            if (@item.Text == "Waiting for response")
+                            {
+
+                                <div class=" chat_incoming_wait">Waiting for response
+
+                                    <div class="loading-spinner"></div>
+                                    
+                                </div>
+                                
+
+
+                            }
+                            else
+                            {
+
+                                <li class=" chat_incoming">
+                                    <p>@item.Text</p>
+                                </li>
+
+                            }
+
 
                         }
                         else
@@ -105,7 +125,7 @@
     };
 
     function myJavaScriptFunction(wishlistId) {
-         UpdateMenu(wishlistId);
+        UpdateMenu(wishlistId);
     }
     document.getElementById('button_open').addEventListener('click', changetyle);
 
@@ -114,7 +134,7 @@
 
     [Parameter] public string chatId { get; set; }
 
-   public string inputValue = "";
+    public string inputValue = "";
 
     protected override async Task OnParametersSetAsync()
     {

ShoppingAssistantWebClient.Web/Pages/Chat.razor.css

@@ -117,7 +117,7 @@
 .chat_message {
   position: relative;
   overflow-y: auto;
-  height: calc(100% - 8em);
+  height: calc(100% - 8.5em);
   width: 100%;
 }
 .chat_message::-webkit-scrollbar {
@@ -150,6 +150,18 @@
   .chat_incoming{
     display: flex;
   }
+  .chat_incoming_wait {
+    display: inline-flex; /* Использовать inline-flex-контейнер */
+    align-items: center; /* Выравнивание по центру */
+    background-color: #EAEAEA;
+    border-radius: 10px;
+    color: black;
+    padding: 10px;
+    margin-bottom: 20px;
+    margin-top: 20px;
+    max-width: 70%; /* Максимальная ширина по вашему усмотрению */
+  }
+  
   .chat_box .chat_outgoing p {
     margin-left: auto;
     background-color: #009FFF;
@@ -167,4 +179,26 @@
     width: 60%;
     margin-bottom: 20px ;
     margin-top: 20px ;
-  }
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
+  .loading-spinner {
+    border: 4px solid rgba(0, 82, 204, 0.1);
+    border-top: 4px solid #0052CC;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+    margin-left: 10px; /* Добавлен отступ для разделения текста и загрузки */
+  }
+ .gradient{
+  background: linear-gradient(rgb(255, 255, 255), rgba(0, 0, 0, 0));
+  position: absolute;
+  height: 50px;
+  width: 100%;
+  z-index: 1;
+ }