fix bags and connect product search

ShoppingAssistantWebClient.Web/Models/Messages.cs

@@ -3,12 +3,21 @@
     public class Messages
     {
 
-        public required string Id { get; set; }
+        public  string Id { get; set; }
 
-        public required string Text { get; set; }
+        public  string Text { get; set; }
 
-        public required string Role { get; set; }
+        public  string Role { get; set; }
+
+        public  string CreatedById { get; set; }
+
+
+    public Messages()
+    {
 
-        public required string CreatedById { get; set; }
     }
+    
+    }
+
+    
 }

ShoppingAssistantWebClient.Web/Network/ApiClient.cs

@@ -99,7 +99,7 @@ public class ApiClient
     public async IAsyncEnumerable<ServerSentEvent> GetServerSentEventStreamed(string url, Object obj, CancellationToken cancellationToken) 
     {
         await SetAuthenticationAsync();
-
+        var count = 0; //
         var requestUrl = $"{_httpClient.BaseAddress}{url}";
         var response = await _httpClient.PostAsJsonAsync(requestUrl, obj);
         using var responseStream = await response.Content.ReadAsStreamAsync();
@@ -109,9 +109,14 @@ public class ApiClient
         while (!cancellationToken.IsCancellationRequested)
         {
             var jsonChunk = await reader.ReadLineAsync(cancellationToken);
+             count += 1; //
+            if (count >=5 ){ //
+                break; //
+            }; //
             if (jsonChunk == null) continue;
             if (jsonChunk.StartsWith("event: "))
             {
+                count = 0; //
                 var type = jsonChunk.Substring("event: ".Length);
                 switch(type)
                 {

ShoppingAssistantWebClient.Web/Pages/Chat.razor

@@ -1,8 +1,9 @@
 @page "/chat/{chatId}"
 
 @inject IHttpClientFactory ClientFactory
+@inject IJSRuntime JSRuntime
 
-<PageTitle>Gift for Jessica</PageTitle>
+<PageTitle>@name</PageTitle>
 
 <div class="right_frame" id="rightFrame">
 
@@ -16,30 +17,35 @@
 
 
     <div class="new_chat">
-        <div class="chat_message">
 
+        <div class="title_one_frame">@name</div>
 
-            <div class="title_one_frame">Gift for Jessica</div>
+        <div class="chat_message" @ref="chatMessageRef">
 
             <ul class="chat_box">
 
-                @if(!isLoading && Messages!=null){
+                @if (!isLoading && Messages != null)
+                {
 
-                    @foreach (var item in Messages){
+                    @foreach (var item in Messages)
+                    {
 
-                      if(item.Role!="User"){
+                        if (item.Role != "User")
+                        {
 
-                        <li class=" chat_incoming">
+                            <li class=" chat_incoming">
-                            <p>@item.Text</p>
+                                <p>@item.Text</p>
-                        </li>
+                            </li>
 
-                      }else{
+                        }
+                        else
+                        {
 
-                        <li class="chat_outgoing">
+                            <li class="chat_outgoing">
-                            <p>@item.Text</p>
+                                <p>@item.Text</p>
-                        </li>
+                            </li>
 
-                      }
+                        }
                     }
 
                 }
@@ -52,21 +58,27 @@
 
         <div class="possible_options">
 
-            <div class="tite_options">Several possible options</div>
+            @if (Suggestion.Count != 0)
+            {
 
-            <div class="options">
+                <div class="tite_options">Several possible options</div>
 
-                <div class="topic_options">
+                <div class="options">
-                    HDMI
-                </div>
-                <div class="topic_options">
-                    VGA
-                </div>
-                <div class="topic_options">
-                    DisplayPort
-                </div>
 
-            </div>
+
+
+                @foreach (var item in Suggestion)
+                    {
+
+                        <div @onclick="() => ClickOption(item)" class="topic_options">
+                            @item
+                        </div>
+                    }
+
+
+
+                </div>
+            }
 
         </div>
 
@@ -84,8 +96,15 @@
 
 <script>
 
+    window.scrollToBottom = function (element) {
+        if (element) {
+            element.scrollTop = 9999;
+
+        }
+    };
 
     document.getElementById('button_open').addEventListener('click', changetyle);
+
 </script>
 @code {
 
@@ -100,8 +119,22 @@
     {
         if (e.Code == "Enter" || e.Code == "NumpadEnter")
         {
-           AddNewMessage();
+            AddNewMessage();
         }
     }
-    
+
+    private ElementReference chatMessageRef;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await JSRuntime.InvokeVoidAsync("scrollToBottom", chatMessageRef);
+        await JSRuntime.InvokeVoidAsync("scrollToBottom", chatMessageRef);
+        await JSRuntime.InvokeVoidAsync("scrollToBottom", chatMessageRef);
+    }
+
+
+    private void ClickOption(string item) {
+        inputValue = item;
+    }
+
 }

ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs

@@ -3,7 +3,9 @@ using ShoppingAssistantWebClient.Web.Models;
 using GraphQL;
 using Newtonsoft.Json;
 using ShoppingAssistantWebClient.Web.Network;
-
+using ShoppingAssistantWebClient.Web.Models.Input;
+using ShoppingAssistantWebClient.Web.Models.Enums;
+using System.Text.RegularExpressions;
 namespace ShoppingAssistantWebClient.Web.Pages;
 
 public partial class Chat : ComponentBase
@@ -11,10 +13,20 @@ public partial class Chat : ComponentBase
 
         [Inject]
         private ApiClient _apiClient { get; set; }
+                 [Inject]
+        private NavigationManager Navigation { get; set; }
 
         public List<Messages> Messages { get; set; }
+    public List<String> Suggestion { get; set; } = new List<String>();
+        
+        public Messages Message { get; set; }
+
+        private CancellationTokenSource cancelTokenSource; 
+
+        private MessageCreateDto messageCreateDto;
         public bool isLoading = true;
         private string inputValue = "";
+        private string name = "";
         protected override async Task OnInitializedAsync()
         {
             await LoadMessages();
@@ -23,12 +35,34 @@ public partial class Chat : ComponentBase
 
         private async Task LoadMessages()
         {
+            string wishlistId = chatId;
+            
+                                 Suggestion.Add("123");
+                     Suggestion.Add("456");
+                     Suggestion.Add("145623");
+
+            var request = new GraphQLRequest
+            {
+                Query = @"query PersonalWishlist( $wishlistId: String!) {
+                        personalWishlist(wishlistId: $wishlistId) {
+                            name
+                        }
+                    }",
+
+                Variables = new
+                {
+                    wishlistId,
+                }
+            };
+
+          var response = await _apiClient.QueryAsync(request);
+          var responseData = response.Data;
+          name = responseData.personalWishlist.name;
 
 
             isLoading = true;
             int pageNumber = 1;
-            string wishlistId = chatId;
+            request = new GraphQLRequest
-            var request = new GraphQLRequest
             {
                 Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
                             messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize) 
@@ -46,12 +80,12 @@ public partial class Chat : ComponentBase
                 {
                     wishlistId,
                     pageNumber,
-                    pageSize = 20
+                    pageSize = 200
                 }
             };
             try{
-            var response = await _apiClient.QueryAsync(request);
+             response = await _apiClient.QueryAsync(request);
-                var responseData = response.Data;
+            responseData = response.Data;
                 var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.messagesPageFromPersonalWishlist.items);
                 this.Messages = JsonConvert.DeserializeObject<List<Messages>>(jsonCategoriesResponse);
                 Messages.Reverse();
@@ -60,42 +94,127 @@ public partial class Chat : ComponentBase
             }catch{
 
             }
-            
 
-        }
+           /*
-        private async Task AddNewMessage()
+            try{
-        {
 
-            isLoading = true;
-            var pageNumber = 1;
-            var wishlistId = chatId;
-            var text = inputValue;
-            inputValue="";
-            var request = new GraphQLRequest
-            {
-                Query = @"mutation AddMessageToPersonalWishlist($wishlistId: String!, $text: String!) {
-                            addMessageToPersonalWishlist(wishlistId: $wishlistId, dto: { text: $text }) {
-                                id
-                                text
-                                role
-                                createdById
-                            }
-                        }
-                        ",
 
-                Variables = new
+                    pageNumber = 0;
-                {
+
-                    wishlistId,
+            do{
-                    text
+                pageNumber++;
+
+                request = new GraphQLRequest
+                            {
+                                Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
+                                            messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize) 
+                                            {
+                                                items {
+                                                    id
+                                                    text
+                                                    role
+                                                    createdById
+                                                }
+                                                totalPages
+                                            }
+                                        }",
+
+                                Variables = new
+                                {
+                                    wishlistId,
+                                    pageNumber,
+                                    pageSize = 1
+                                }
+                            };
+
+                response = await _apiClient.QueryAsync(request);
+                responseData = response.Data;
+                var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.messagesPageFromPersonalWishlist.items);
+                if(pageNumber == 1){
+                    Messages =  JsonConvert.DeserializeObject<List<Messages>>(jsonCategoriesResponse);
+                }else{
+                    Message =  JsonConvert.DeserializeObject<List<Messages>>(jsonCategoriesResponse);
+                    Messages.InsertRange(0, Message);
                 }
-            };
+              
+
+              //  Messages.Reverse();
+                totalPages = responseData.messagesPageFromPersonalWishlist.totalPages;
+                isLoading = false;
+                StateHasChanged();
+            }while(pageNumber<totalPages);
+             
+            }catch (Exception ex)
+            {
+                // Log the exception
+                Console.WriteLine($"An error occurred: {ex.Message}");
+            }
+          */
+
+        }
+    private async Task AddNewMessage()
+    {
+        messageCreateDto = new MessageCreateDto { Text = inputValue };;
+        Message = new Messages();
+        Message.Text = inputValue;
+        Message.Role = "User";
+        Message.Id = "";
+        Message.CreatedById = "";
+        inputValue = "";
+        Messages.Add(Message);
+        StateHasChanged();
+
+        cancelTokenSource = new CancellationTokenSource();
+        var cancellationToken = cancelTokenSource.Token;
+
+        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;
+            }
+
+            await InvokeAsync(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);
+            }
 
-            var response = await _apiClient.QueryAsync(request);
-            await LoadMessages();
         }
 
-
+    }
-
-
 
 }

ShoppingAssistantWebClient.Web/Pages/Chat.razor.css

@@ -56,7 +56,6 @@
 }
 
 .possible_options {
-  visibility: hidden;
   position: absolute;
   bottom: 5.5em;
   margin-left: 25%;
@@ -84,6 +83,7 @@
     margin: 0em 0.6em;
     flex: 1;
     text-align: center;
+    cursor: pointer;
 }
 
 .input_messages {
@@ -117,7 +117,7 @@
 .chat_message {
   position: relative;
   overflow-y: auto;
-  height: calc(100% - 5.5em);
+  height: calc(100% - 8em);
   width: 100%;
 }
 .chat_message::-webkit-scrollbar {

ShoppingAssistantWebClient.Web/Pages/Index.razor

@@ -1,5 +1,4 @@
 @page "/"
-
 <PageTitle>New Chat</PageTitle>
 
 <div class="right_frame" id="rightFrame">
@@ -87,6 +86,18 @@
         choose = "Product";
 
     }
+    function myJavaScriptFunction(wishlistId) {
+
+         UpdateMenu(wishlistId);
+
+    }
+
+
+
+
+
+
+
 
     document.getElementById('choose_gift').addEventListener('click', switchGift);
     document.getElementById('choose_product').addEventListener('click', switchProduct);
@@ -102,4 +113,12 @@
         private void Сhoose_gift() {
         selectedChoice = "Gift";
     }
+
+    private async Task UpdateSideMenu(string wishlistId)
+    {
+
+    await JSRuntime.InvokeVoidAsync("myJavaScriptFunction", wishlistId);
+
+    }
+
 }

ShoppingAssistantWebClient.Web/Pages/Index.razor.cs

@@ -1,11 +1,12 @@
 using Microsoft.AspNetCore.Components;
+using ShoppingAssistantWebClient.Web.Models;
 using ShoppingAssistantWebClient.Web.Models.ProductSearch;
 using ShoppingAssistantWebClient.Web.Models.Input;
 using GraphQL;
 using Newtonsoft.Json;
 using ShoppingAssistantWebClient.Web.Network;
 using System;
-
+using Microsoft.JSInterop;
 
 namespace ShoppingAssistantWebClient.Web.Pages
 {
@@ -15,7 +16,11 @@ namespace ShoppingAssistantWebClient.Web.Pages
          [Inject]
         private ApiClient _apiClient { get; set; }
          [Inject]
+         
         private NavigationManager Navigation { get; set; }
+        [Inject]
+        protected IJSRuntime JSRuntime { get; set; }
+
         private MessageCreateDto messageCreateDto;
 
         private CancellationTokenSource cancelTokenSource; 
@@ -26,7 +31,7 @@ namespace ShoppingAssistantWebClient.Web.Pages
 
         private async Task CreateNewChat() {
 
-    try
+          try
             {
                 if (string.IsNullOrWhiteSpace(inputValue))
                 {
@@ -36,7 +41,7 @@ namespace ShoppingAssistantWebClient.Web.Pages
                 isLoading = true;
                 messageCreateDto = new MessageCreateDto { Text = inputValue };
                 var type = selectedChoice;
-                var firstMessageText = $"[Question] What are you looking for? [Suggestions] " + inputValue;
+                var firstMessageText = $"What are you looking for?";
 
                 var request = new GraphQLRequest
                 {
@@ -56,20 +61,68 @@ namespace ShoppingAssistantWebClient.Web.Pages
                 var response = await _apiClient.QueryAsync(request);
                 var responseData = response.Data;
                 var chatId = responseData?.startPersonalWishlist?.id;
-                isLoading = false;
+                                string wishlistId1 = chatId;
-                var url = $"/chat/{chatId}";
+                await UpdateSideMenu(wishlistId1);
+
+                var text = inputValue;
+/*
+                inputValue="";
+                request = new GraphQLRequest
+                {
+                    Query = @"mutation AddMessageToPersonalWishlist($wishlistId: String!, $text: String!) {
+                                addMessageToPersonalWishlist(wishlistId: $wishlistId, dto: { text: $text }) {
+                                    id
+                                    text
+                                    role
+                                    createdById
+                                }
+                            }
+                            ",
+
+                    Variables = new
+                    {
+                        wishlistId =chatId,
+                        text
+                    }
+                };
+
+                 await _apiClient.QueryAsync(request);
+*/
+
 
                 cancelTokenSource = new CancellationTokenSource();
                 var cancellationToken = cancelTokenSource.Token;
 
                 var serverSentEvent =  _apiClient.GetServerSentEventStreamed($"ProductsSearch/search/{chatId}", messageCreateDto, cancellationToken);
-                Navigation.NavigateTo(url);
+
                 await foreach (var sseEvent in serverSentEvent.WithCancellation(cancellationToken))
                 {
                     // Handle each ServerSentEvent as needed
                     Console.WriteLine($"Received SSE Event: {sseEvent.Event}, Data: {sseEvent.Data}");
                 }
 
+                string wishlistId = chatId;
+
+                request = new GraphQLRequest
+                {
+                    Query = @"mutation GenerateNameForPersonalWishlist($wishlistId: String!) {
+                            generateNameForPersonalWishlist(wishlistId: $wishlistId) {
+                                id
+                                name
+                            }
+                        }",
+                     Variables = new
+                    {
+                        wishlistId
+                        
+                    }
+                };
+
+                response = await _apiClient.QueryAsync(request);
+
+                var url = $"/chat/{chatId}";
+                Navigation.NavigateTo(url);
+
                 }
                 catch (Exception ex)
                 {

ShoppingAssistantWebClient.Web/Shared/NavMenu.razor

@@ -1,5 +1,9 @@
 @using Models.GlobalInstances
+@using System.Linq
+@using Microsoft.AspNetCore.Components
+@using Microsoft.JSInterop
 @inject NavigationManager Navigation
+@inject IJSRuntime JSRuntime;
 
 <div id="leftframe" class="left_frame">
 
@@ -16,7 +20,8 @@
             <span></span>
         </a>
 
-        <div class="elements_wishlisht">
+
+        <div class="elements_wishlisht" id="elements_wishlisht" > 
 
             <div class="add_chat" @onclick="RedirectToNewChat" >
                 <div>
@@ -29,15 +34,15 @@
 
                 @if(!isLoading){
 
-                        @foreach (var item in Wishlists)
+                    @foreach (var item in Wishlists)
                     {
-                        <section class="cont_wishlist">
+
-                            <div @onclick="() => RedirectToPage(item.Id)" class="wishlist_name" >@item.Name</div>
+                        <section class="cont_wishlist @(selectedWishlistId == item.Id ? "selected_wishlist" : "")">
-                            <img @onclick="() => DeleteWishlist(item.Id)" class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
+                            <div class="wishlist_name" @onclick="() => RedirectToPage(item.Id)">@item.Name</div>
-                            <img @onclick="() => RedirectToCard(item.Id)" class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
+                            <img class="button_delete_chat" @onclick="() => DeleteWishlist(item.Id)" src="/images/icon_delete.svg" alt="Delete wishlist">
+                            <img class="button_open_card" @onclick="() => RedirectToCard(item.Id)" src="/images/icon_open_card.svg" alt="Card open">
                         </section>
                     }
-
                 }
 
             </div>
@@ -81,31 +86,99 @@
     }
     document.getElementById('button_close').addEventListener('click', changetyle);
 
+/*
+    window.getScrollTop = function (element) {
+        return element.scrollTop;
+    };
+
+    window.getOffsetHeight = function (element) {
+        return element.offsetHeight;
+    };
+
+    window.getScrollHeight = function (element) {
+        return element.scrollHeight;
+    };
+
+    window.setScrollTop = function (element, scrollTop) {
+        element.scrollTop = scrollTop;
+    };
+*/
+</script>
+
+
+<script>
+    
+    function UpdateMenu(wishlistId)
+    {
+
+        DotNet.invokeMethodAsync('ShoppingAssistantWebClient.Web', 'Update', wishlistId);
+
+    }
+
 </script>
 
 @code {
 
+    [Parameter] public string chatId { get; set; }
+
+
+    private string selectedWishlistId;
+
+
+    private static NavMenu _app;
+
+    public NavMenu ()
+    {
+        _app = this;
+        
+    }
+
+    [JSInvokable]
+    public static void Update(string wishlistId)
+    {
+        _app.LoadMenus(1,200);
+        _app.selectedWishlistId=wishlistId;
+    }
+
     private void RedirectToPage(string itemId) {
-            var url = $"/chat/{itemId}";
+        _app.selectedWishlistId = itemId;
-            Navigation.NavigateTo(url);
+        var url = $"/chat/{itemId}";
-        }
+        Navigation.NavigateTo(url);
+    }
     private void RedirectToNewChat() {
-            var url = $"/";
+        var url = $"/";
-            Navigation.NavigateTo(url);
+        Navigation.NavigateTo(url);
-        }
+    }
     private void RedirectToCard(string itemId) {
-            var url = $"/chat/{itemId}/cart";
+        var url = $"/chat/{itemId}/cart";
-            Navigation.NavigateTo(url);
+        Navigation.NavigateTo(url);
-        }
+    }
     private async void DeleteWishlist(string itemId) {
 
         await DeleteWish(itemId);
-         
-    }
 
-    public void UpdateSideMenu()
-    {
-        StateHasChanged();
     }
+/*
+    private int savedScrollTop = 0;
+
+    private ElementReference wishlishtRef;
+
+    private async Task OnScroll()
+    {
+        var scrollTop = await JSRuntime.InvokeAsync<int>("getScrollTop", wishlishtRef);
+        var offsetHeight = await JSRuntime.InvokeAsync<int>("getOffsetHeight", wishlishtRef);
+        var scrollHeight = await JSRuntime.InvokeAsync<int>("getScrollHeight", wishlishtRef);
+
+        if (scrollTop + offsetHeight > scrollHeight - 100)
+        {
+            savedScrollTop = scrollTop; 
+            currentPage++;
+            await LoadMenus(currentPage, pageSize);
+            await InvokeAsync(() => JSRuntime.InvokeVoidAsync("setScrollTop", wishlishtRef, savedScrollTop));
+        }
+    }
+*/
+
+
 
 }

ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs

@@ -14,14 +14,20 @@ namespace ShoppingAssistantWebClient.Web.Shared
         public List<Wishlist> Wishlists { get; set; }
         public bool isLoading = true;
 
+        public int pageSize { get; set; }
+        public int currentPage { get; set; }
+
         protected override async Task OnInitializedAsync()
         {
-            await LoadMenus();
+            pageSize = 200;
+            currentPage = 1;
+            Wishlists = new List<Wishlist>();
+            await LoadMenus(currentPage, pageSize);
+        
         }
-        private async Task LoadMenus()
+        public async Task LoadMenus(int pageNumber,  int pageSize )
         {
             isLoading = true;
-            var pageNumber = 1;
             var request = new GraphQLRequest
             {
                 Query = @"query PersonalWishlistsPage( $pageNumber: Int!, $pageSize: Int!) {
@@ -36,17 +42,19 @@ namespace ShoppingAssistantWebClient.Web.Shared
                 Variables = new
                 {
                     pageNumber,
-                    pageSize = 40,
+                    pageSize,
                 }
             };
 
-            var response = await _apiClient.QueryAsync(request);
+          var response = await _apiClient.QueryAsync(request);
-            var responseData = response.Data;
+          var responseData = response.Data;
-            var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
+          var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
-            this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
+          this.Wishlists.AddRange(JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse));
-            isLoading = false;
+          Wishlists.Reverse();
+          isLoading = false;
+          StateHasChanged();
         }
-
+         
         protected async Task DeleteWish(string wishlistId)
         {
             var request = new GraphQLRequest
@@ -65,7 +73,7 @@ namespace ShoppingAssistantWebClient.Web.Shared
             };
 
             var response = await _apiClient.QueryAsync(request);
-            await LoadMenus();
+                  await LoadMenus(currentPage, pageSize);
         }
 
     }

ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css

@@ -1,10 +1,10 @@
-
 .left_frame {
   position: relative;
   height: 100%;
   width: 100%;
   transition: 1s;
 }
+
 .logo {
   height: 5em;
   position: relative;
@@ -12,26 +12,35 @@
   align-items: center;
   padding-bottom: 1.5%;
 }
+
 .menu {
   position: absolute;
   width: 100%;
-  top: 5em; 
+  top: 5em;
   bottom: 0;
   border: 1.5px solid;
   border-color: #0052CC;
   border-radius: 0.6em;
   padding-top: 1.5%;
 }
+
 .elements_wishlisht {
-  
   position: absolute;
-  overflow-y: auto;
   top: 2.43em;
   width: 100%;
-  bottom: 4em;
+  bottom: 3.8em;
   padding-left: 1.25em;
   padding-right: 1.25em;
+  padding-bottom: 3.8em;
 }
+
+.wishlist_names {
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+  height:100%;
+}
+
 .info_user {
   position: absolute;
   display: flex;
@@ -46,6 +55,7 @@
   padding-right: 1.25em;
   border-top: 1px solid #0165FF;
 }
+
 .logo_name {
   padding-top: 0.5em;
   padding-left: 0.3em;
@@ -56,11 +66,13 @@
   font-weight: 600;
   overflow: hidden;
 }
+
 .logo img {
   float: left;
   height: 3.25em;
   width: 3.25em;
 }
+
 .wishlist_name {
   padding-left: 0.7em;
   padding-right: 5em;
@@ -68,10 +80,11 @@
   white-space: nowrap;
   overflow: hidden;
   position: absolute;
-  height:  2.5em;
+  height: 2.5em;
   line-height: 2.5em;
   cursor: pointer;
 }
+
 .cont_wishlist {
   margin-top: 0.4375em;
   margin-bottom: 0.4375em;
@@ -79,23 +92,64 @@
   border-radius: 0.6em;
   font-size: 1.1em;
   width: 100%;
-  height:2.5em;
+  height: 2.5em;
 
 }
+
 .cont_wishlist:hover {
+  
   background-color: #e6e6e6;
   transition: 0.2s;
 }
-.cont_wishlist:hover .button_delete_chat{
+
+.cont_wishlist:hover .button_delete_chat {
   visibility: visible;
 }
-.cont_wishlist:hover .button_open_card{
+
+.cont_wishlist:hover .button_open_card {
   visibility: visible;
-  
+
 }
+
+.selected_wishlist {
+  margin-top: 0.4375em;
+  margin-bottom: 0.4375em;
+  color: black;
+  border-radius: 0.6em;
+  font-size: 1.1em;
+  width: 100%;
+  height: 2.5em;
+    background-color: #e6e6e6;
+  transition: 0.2s;
+
+}
+
+.sel_del {
+  visibility: visible;
+  cursor: pointer;
+  margin-top: 0.55em;
+  margin-right: 1em;
+  float: right;
+  position: relative;
+
+
+}
+
+.selected_card{
+  cursor: pointer;
+  position: relative;
+  z-index: 999;
+  margin-top: 0.55em;
+  margin-right: 1em;
+  float: right;
+  visibility: visible;
+  height: 1.4em;
+  width: 1.5em;
+}
+
 .button_delete_chat {
   cursor: pointer;
-  margin-top:  0.55em;
+  margin-top: 0.55em;
   margin-right: 1em;
   float: right;
   position: relative;
@@ -103,6 +157,7 @@
   height: 1.4em;
   width: 1.4em;
 }
+
 .button_open_card {
   cursor: pointer;
   position: relative;
@@ -114,14 +169,17 @@
   height: 1.4em;
   width: 1.5em;
 }
-.elements_wishlisht::-webkit-scrollbar {
+
+.wishlist_names::-webkit-scrollbar {
   border-radius: 20px;
   width: 0.2em;
 }
 
-.elements_wishlisht::-webkit-scrollbar-thumb {
+.wishlist_names::-webkit-scrollbar-thumb {
-  background-color: #0052CC; /* Колір позиції покажчика */
+  background-color: #0052CC;
-  border-radius: 10px; /* Закруглення країв позиції покажчика */
+  /* Колір позиції покажчика */
+  border-radius: 10px;
+  /* Закруглення країв позиції покажчика */
   width: 0.2em;
 }
 
@@ -131,10 +189,11 @@
   border-radius: 0.6em;
   font-size: 1.2em;
   width: 100%;
-  height:2.5em;
+  height: 2.5em;
   cursor: pointer;
   line-height: 2.5em;
 }
+
 .add_chat div {
   justify-content: center;
   align-items: center;
@@ -143,11 +202,12 @@
   text-decoration: none;
   color: #FFFFFF;
 }
+
 .plus {
   position: absolute;
   right: 1em;
   top: -0.1em;
-  font-size: 1.9em; 
+  font-size: 1.9em;
 }
 
 .user_name {
@@ -156,12 +216,14 @@
   justify-content: center;
   align-items: center;
 }
+
 .info_user img {
   float: left;
   border-radius: 50%;
   width: 2.3em;
   height: 2.3em;
 }
+
 .button_close_menu {
   position: relative;
   width: 1.43em;
@@ -171,6 +233,7 @@
   margin-top: 0.5em;
   margin-right: 1.30em;
 }
+
 .button_close_menu span {
   width: 20px;
   height: 1.5px;
@@ -180,9 +243,11 @@
   transform: translate(-50%, -50%);
   background-color: #4E4E4E;
 }
+
 .button_close_menu span:nth-of-type(2) {
   top: calc(50% - 5px);
 }
+
 .button_close_menu span:nth-of-type(3) {
   top: calc(50% + 5px);
 }