Merge branch 'develop' into SA-208-settings

2025-04-03 16:19:48 +00:00 · 2023-12-18 21:46:05 +00:00 · 2023-12-18 21:46:05 +00:00 · 40e2395a51
commit 40e2395a51
parent cd2efe096a 1f8b50458e
13 changed files with 568 additions and 294 deletions
--- a/ShoppingAssistantWebClient.Web/Network/ApiClient.cs
+++ b/ShoppingAssistantWebClient.Web/Network/ApiClient.cs
@ -101,17 +101,24 @@ public class ApiClient
        await SetAuthenticationAsync();
        var count = 0; //
        var requestUrl = $"{_httpClient.BaseAddress}{url}";
-        var response = await _httpClient.PostAsJsonAsync(requestUrl, obj);
-        using var responseStream = await response.Content.ReadAsStreamAsync();
-        using var reader = new StreamReader(responseStream, Encoding.UTF8);
+        var jsonBody = JsonConvert.SerializeObject(obj);

-        SearchEventType eventType = SearchEventType.Message;
-        while (!cancellationToken.IsCancellationRequested)
+        var body = new StringContent(jsonBody, Encoding.UTF8, "application/json");
+        var request = new HttpRequestMessage(HttpMethod.Post, requestUrl)
        {
-            var jsonChunk = await reader.ReadLineAsync(cancellationToken);
+            Content = body
+        };
+        request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("text/event-stream"));
+
+        using var httpResponse = await _httpClient.SendAsync(request, HttpCompletionOption.ResponseHeadersRead, cancellationToken);
+        using var streamReader = new StreamReader(await httpResponse.Content.ReadAsStreamAsync(cancellationToken));
+        var eventType = SearchEventType.Message;
+        while (!streamReader.EndOfStream)
+        {
+            var jsonChunk = await streamReader.ReadLineAsync(cancellationToken);
             count += 1; //
            if (count >=5 ){ //
-                break; //
+                yield break; //
            }; //
            if (jsonChunk == null) continue;
            if (jsonChunk.StartsWith("event: "))
--- a/ShoppingAssistantWebClient.Web/Pages/Cards.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Cards.razor
@ -96,7 +96,7 @@
                    <div class="buttons-row">
                        <button class="exit-button button-animation" @onclick="(() => NavigateToMain())"></button>
                        <button class="return-button button-animation" @onclick="(() => { LoadPreviousProduct();  })"></button>
-                        <button class="more-button button-animation" @onclick="(() => LoadMoreProducts())"></button>
+                        <button class="more-button button-animation" @onclick="(() => NavigateToMain())"></button>
                    </div>
                </div>
            }
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor
+++ b/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">
+                                    @item.Text
+                                </li>
+
+                            }
+

                        }
                        else
@ -52,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">
@ -105,16 +125,31 @@
    };

    function myJavaScriptFunction(wishlistId) {
-         UpdateMenu(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; }

-   public string inputValue = "";
+    public string inputValue = "";

    protected override async Task OnParametersSetAsync()
    {
@ -139,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)
@ -151,6 +188,7 @@
    private void ClickOption(string item)
    {
        inputValue = item;
+        AddNewMessage(inputValue);
    }

 }
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
@ -15,100 +15,107 @@ namespace ShoppingAssistantWebClient.Web.Pages;
 public partial class Chat : ComponentBase
 {

-        [Inject]
-        private ApiClient _apiClient { get; set; }
-        [Inject]
-        private NavigationManager Navigation { get; set; }
-        [Inject]
-        private SearchService _searchServise { get; set; }
+    [Inject]
+    private ApiClient _apiClient { get; set; }
+    [Inject]
+    private NavigationManager Navigation { get; set; }
+    [Inject]
+    private SearchService _searchServise { get; set; }

-        public List<Messages> Messages { get; set; }
+    public List<Messages> Messages { get; set; }


-        public List<String> Products { get; set; } = new List<string>();
+    public List<String> Products { get; set; } = new List<string>();

-        public List<String> Suggestion { get; set; } = new List<String>();
-        
-        public Messages Message { get; set; }
-        public Messages MessageBot { get; set; }
+    public List<String> Suggestion { get; set; } = new List<String>();

-        private CancellationTokenSource cancelTokenSource; 
-       private bool isWaitingForResponse = false;
-        private MessageCreateDto messageCreateDto;
-        public bool isLoading = true;
-        private string name = "";
-        protected override async Task OnInitializedAsync()
+    public Messages Message { get; set; }
+    public Messages MessageBot { get; set; }
+
+    private CancellationTokenSource cancelTokenSource;
+    private bool isWaitingForResponse = false;
+    private MessageCreateDto messageCreateDto;
+    public bool isLoading = true;
+    private string name = "";
+    protected override async Task OnInitializedAsync()
+    {
+        try
        {
-            try{
-                    var input = _searchServise.FirstMessage;
+            var input = _searchServise.FirstMessage;

-                    if (input!=null){
+            if (input != null)
+            {

-                    await LoadMessages();
+                await LoadMessages();

-                    await  AddNewMessage(input);
+                await AddNewMessage(input);

-                        string wishlistId = chatId;
-                        var request = new GraphQLRequest
-                        {
-                            Query = @"mutation GenerateNameForPersonalWishlist($wishlistId: String!) {
+                string wishlistId = chatId;
+                var request = new GraphQLRequest
+                {
+                    Query = @"mutation GenerateNameForPersonalWishlist($wishlistId: String!) {
                                    generateNameForPersonalWishlist(wishlistId: $wishlistId) {
                                        id
                                        name
                                    }
                                }",
-                            Variables = new
-                            {
-                                wishlistId
+                    Variables = new
+                    {
+                        wishlistId

-                            }
-                        };
-
-                        var response = await _apiClient.QueryAsync(request);
-                        _searchServise.SetFirstMessage(null);
-                        isLoading = false;
-                        await UpdateSideMenu(wishlistId);
-                        StateHasChanged();
-
-                    }else{
-                        await LoadMessages();
                    }
-            }catch(Exception ex){
-                Console.WriteLine($"Error OnInitializedAsync: {ex.Message}");
+                };
+
+                var response = await _apiClient.QueryAsync(request);
+                _searchServise.SetFirstMessage(null);
+                isLoading = false;
+                await UpdateSideMenu(wishlistId);
+                StateHasChanged();
+
            }
-            
+            else
+            {
+                await LoadMessages();
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error OnInitializedAsync: {ex.Message}");
        }

+    }

-        private async Task LoadMessages()
+
+    private async Task LoadMessages()
+    {
+        try
        {
-            try{
-                string wishlistId = chatId;
-        
-                var request = new GraphQLRequest
-                {
-                    Query = @"query PersonalWishlist( $wishlistId: String!) {
+            string wishlistId = chatId;
+
+            var request = new GraphQLRequest
+            {
+                Query = @"query PersonalWishlist( $wishlistId: String!) {
                            personalWishlist(wishlistId: $wishlistId) {
                                name
                            }
                        }",

-                    Variables = new
-                    {
-                        wishlistId,
-                    }
-                };
+                Variables = new
+                {
+                    wishlistId,
+                }
+            };

            var response = await _apiClient.QueryAsync(request);
            var responseData = response.Data;
            name = responseData.personalWishlist.name;


-                isLoading = true;
-                int pageNumber = 1;
-                request = new GraphQLRequest
-                {
-                    Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
+            isLoading = true;
+            int pageNumber = 1;
+            request = new GraphQLRequest
+            {
+                Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
                                messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize) 
                                {
                                    items {
@ -120,112 +127,125 @@ public partial class Chat : ComponentBase
                                }
                            }",

-                    Variables = new
-                    {
-                        wishlistId,
-                        pageNumber,
-                        pageSize = 200
-                    }
-                };
-            
-           
-            
-             response = await _apiClient.QueryAsync(request);
-            responseData = response.Data;
-                var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.messagesPageFromPersonalWishlist.items);
-                this.Messages = JsonConvert.DeserializeObject<List<Messages>>(jsonCategoriesResponse);
-                Messages.Reverse();
-                isLoading = false;
+                Variables = new
+                {
+                    wishlistId,
+                    pageNumber,
+                    pageSize = 200
+                }
+            };
+
+
+
+            response = await _apiClient.QueryAsync(request);
+            responseData = response.Data;
+            var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.messagesPageFromPersonalWishlist.items);
+            this.Messages = JsonConvert.DeserializeObject<List<Messages>>(jsonCategoriesResponse);
+            Messages.Reverse();
+            isLoading = false;

-            }catch(Exception ex){
-                Console.WriteLine($"Error : {ex.Message}");
-            }
        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Error : {ex.Message}");
+        }
+    }
    private async Task AddNewMessage(string inputMessage)
    {

-      if (!isWaitingForResponse && !string.IsNullOrWhiteSpace(inputMessage))
+        if (!isWaitingForResponse && !string.IsNullOrWhiteSpace(inputMessage))
        {
            JSRuntime.InvokeVoidAsync("clearInput");
            isWaitingForResponse = true;

-        try{
-        messageCreateDto = new MessageCreateDto { Text = inputMessage };;
-        Message = new Messages();
-        Message.Text = inputMessage;
-        Message.Role = "User";
-        Message.Id = "";
-        Message.CreatedById = "";
-
-        Suggestion = new List<String>();
-        Products = new List<String>();
-        Messages.Add(Message);
-        StateHasChanged();
-
-        cancelTokenSource = new CancellationTokenSource();
-        var cancellationToken = cancelTokenSource.Token;
-
-        var serverSentEvent = _apiClient.GetServerSentEventStreamed($"ProductsSearch/search/{chatId}", messageCreateDto, cancellationToken);
-        bool first = true;
-
-        MessageBot = new Messages();
-        MessageBot.Role = "bot";
-        MessageBot.Id = "";
-        MessageBot.CreatedById = "";
-        MessageBot.Text = "Waiting for response";
-        Messages.Add(MessageBot);
-        var lengt = Messages.Count();
-        StateHasChanged();
-
-        await foreach (var sseEvent in serverSentEvent.WithCancellation(cancellationToken))
-        {
-            Console.WriteLine($"Received SSE Event: {sseEvent.Event}, Data: {sseEvent.Data}");
-
-            string input = sseEvent.Data;
-            Regex regex = new Regex("\"(.*?)\"");
-            Match match = regex.Match(input);
-            string result = match.Groups[1].Value;
-
-            if(sseEvent.Event == SearchEventType.Message){
-
- 
-                if (first)
-                {
-                    Messages[lengt-1].Text = result;
-                    first = false;
-                }
-                else
-                {
-                    Messages[lengt-1].Text += result;
-                }
+            try
+            {
+                messageCreateDto = new MessageCreateDto { Text = inputMessage }; ;
+                Message = new Messages();
+                Message.Text = inputMessage;
+                Message.Role = "User";
+                Message.Id = "";
+                Message.CreatedById = "";

+                Suggestion = new List<String>();
+                Products = new List<String>();
+                Messages.Add(Message);
                StateHasChanged();
-                
-            } else if(sseEvent.Event == SearchEventType.Product){
-                
-                string pattern = "[\\\\\"]";

-                input = Regex.Replace(input, pattern, "");
+                cancelTokenSource = new CancellationTokenSource();
+                var cancellationToken = cancelTokenSource.Token;

-                Products.Add(input);
+                var serverSentEvent = _apiClient.GetServerSentEventStreamed($"ProductsSearch/search/{chatId}", messageCreateDto, cancellationToken);
+                bool first = true;

-            } else if(sseEvent.Event == SearchEventType.Suggestion){
+                MessageBot = new Messages();
+                MessageBot.Role = "bot";
+                MessageBot.Id = "";
+                MessageBot.CreatedById = "";
+                MessageBot.Text = "Waiting for response";
+                Messages.Add(MessageBot);
+                var lengt = Messages.Count();
+                StateHasChanged();
+
+                await foreach (var sseEvent in serverSentEvent.WithCancellation(cancellationToken))
+                {
+                    Console.WriteLine($"Received SSE Event: {sseEvent.Event}, Data: {sseEvent.Data}");
+
+                    string input = sseEvent.Data;
+                    Regex regex = new Regex("\"(.*?)\"");
+                    Match match = regex.Match(input);
+                    string result = match.Groups[1].Value;
+
+                    if (sseEvent.Event == SearchEventType.Message)
+                    {
+                        if (first)
+                        {
+                            Messages[lengt - 1].Text = result;
+                            first = false;
+                        }
+                        else
+                        {
+                            Messages[lengt - 1].Text += result;
+                        }
+
+                        StateHasChanged();
+
+                    }
+                    else if (sseEvent.Event == SearchEventType.Product)
+                    {
+
+                        string pattern = "[\\\\\"]";
+
+                        input = Regex.Replace(input, pattern, "");
+
+                        Products.Add(input);
+
+                    }
+                    else if (sseEvent.Event == SearchEventType.Suggestion)
+                    {
+                        if (Suggestion.Count < 3)
+                        {
+                            Suggestion.Add(result);
+                            StateHasChanged();
+                        }
+                    }
+                }
+
+                if (Products.Count != 0)
+                {
+                    string n = name;
+                    _searchServise.SetProducts(Products);
+                    Products = null;
+                    var url = $"/cards/{name}/{chatId}";
+                    Navigation.NavigateTo(url);
+                }
+                isWaitingForResponse = false;

-                Suggestion.Add(result);
            }
-
-        }
-            if(Products.Count!=0) {
-                string n = name;
-                _searchServise.SetProducts(Products);
-                Products = null;
-                var url = $"/cards/{name}/{chatId}";
-                Navigation.NavigateTo(url);
-            }
-          isWaitingForResponse = false;
-        } catch(Exception ex){
+            catch (Exception ex)
+            {
                Console.WriteLine($"Error : {ex.Message}");
+            }
        }
    }
-    }
 }
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
@ -7,7 +7,7 @@
  width: 100%;
 }

-  
+
 .button_open_menu {
  z-index: 2;
  width: 1.43em;
@ -17,6 +17,10 @@
  left: 1.56em;
  cursor: pointer;
  visibility: hidden;
+
+  @media screen and (max-width: 900px) {
+    visibility: visible;
+  }
 }

 .button_open_menu span {
@ -38,52 +42,85 @@
 }

 .title_one_frame {
+  white-space: nowrap; /* Запобігає переносу тексту на новий рядок */
+  overflow: hidden; /* Сховує текст, який не влазить в блок */
+  text-overflow: ellipsis; /* Додає три крапки на кінці обрізаного тексту */
+  margin-left: 4em;
+  margin-right: 4em;
  padding-top: 1.25em;
  color: #0052CC;
  font-size: 1.0625em;
  text-align: center;
 }
- 
+
 .chat_input {
  background-color: #EAEAEA;
  position: absolute;
-  display: flex;
+  display: inline-flex;
+  /* Использовать inline-flex-контейнер */
  align-items: center;
  bottom: 2em;
  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%;
+
+  }
 }

+
 .possible_options {
  position: absolute;
  bottom: 5.5em;
  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{
+
+.tite_options {
  font-size: 0.9em;
  color: #ADADAD;
  margin-bottom: 0.5em;

 }
-.options{
+
+.options {
  justify-content: space-between;
  align-items: center;
  font-size: 1em;
 }
-.topic_options
-{
-    display: inline-block; 
-    padding:  0.5em;
-    border: 0.09em solid;
-    border-color: #009FFF;
-    border-radius: 0.6em;
-    margin: 0em 0.6em;
-    flex: 1;
-    text-align: center;
-    cursor: pointer;
+
+.topic_options {
+  display: inline-block;
+  padding: 0.5em;
+  border: 0.09em solid;
+  border-color: #009FFF;
+  border-radius: 0.6em;
+  margin: 0.2em 0.2em;
+  flex: 1;
+  text-align: center;
+  cursor: pointer;
 }

 .input_messages {
@ -117,9 +154,10 @@
 .chat_message {
  position: relative;
  overflow-y: auto;
-  height: calc(100% - 8em);
+  height: calc(100% - 8.5em);
  width: 100%;
 }
+
 .chat_message::-webkit-scrollbar {
  border-radius: 20px;
  width: 0.2em;
@ -134,37 +172,99 @@
 }


-  .chat_box{
-    border-radius: 10px;
-    position: absolute;
-    margin-left: 25%;
-    margin-top: 35px;
-    width: 50%;
-    list-style: none;
-    padding:0;
-    
+.chat_box {
+  border-radius: 10px;
+  position: absolute;
+  margin-left: 25%;
+  margin-top: 35px;
+  width: 50%;
+  list-style: none;
+  padding: 0;
+
+  @media screen and (max-width: 750px) {
+    margin-left: 15%;
+    width: 70%;
+
  }
-  .chat_outgoing{
-    display: flex;
+
+  @media screen and (max-width: 480px) {
+    margin-left: 4%;
+    width: 92%;
+
  }
-  .chat_incoming{
-    display: flex;
+}
+
+.chat_outgoing {
+  display: flex;
+}
+
+.chat_incoming {
+  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%;
+  /* Максимальная ширина по вашему усмотрению */
+  min-width: 155px;
+  /* Максимальная ширина по вашему усмотрению */
+}
+
+.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%; /* Максимальная ширина по вашему усмотрению */
+  min-width: 155px; /* Максимальная ширина по вашему усмотрению */
+}
+
+.chat_box .chat_outgoing p {
+  margin-left: auto;
+  background-color: #009FFF;
+  border-radius: 10px;
+  color: white;
+  padding: 10px;
+  max-width: 60%;
+
+}
+
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
  }
-  .chat_box .chat_outgoing p {
-    margin-left: auto;
-    background-color: #009FFF;
-    border-radius: 10px;
-    color: white;
-    padding: 10px;
-    max-width: 60%;
-  
+
+  100% {
+    transform: rotate(360deg);
  }
-  .chat_box .chat_incoming p {
-    background-color: #EAEAEA;
-    border-radius: 10px;
-    color: black;
-    padding: 10px;
-    width: 60%;
-    margin-bottom: 20px ;
-    margin-top: 20px ;
-  }
+}
+
+.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;
+  margin-top: -0.2em;
+}
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor
@ -11,18 +11,18 @@
        </a>
    </div>

-        <div class="new_chat">
+    <div class="new_chat">
        <div class="chat_message">
            <div class="title_one_frame">New chat</div>
            <div class="title_two_frame">What you're looking for</div>

            <div class="switch">
-                <div @onclick="Сhoose_product"class="switch_product" id="choose_product">
+                <button @onclick="Сhoose_product" class="switch_product" id="choose_product">
                    Product
-                </div>
-                <div @onclick="Сhoose_gift" class="switch_gift" id="choose_gift">
-                    Gift
-                </div>
+                </button>
+                <button text="Gift" hover-text="Сoming soon" onmouseover="showMessage()" onmouseout="hideMessage()"
+                    class="switch_gift" id="choose_gift">
+                </button>
            </div>


@ -30,33 +30,36 @@
            </div>

            <div class="topic">
-                <div class="topic_one">
+                <div @onclick="() => ClickTopic(1)" class="topic_one">
                    <a class="button_topic_one">
                        Date
                    </a>
                </div>

-                <div class="topic_two">
+                <div @onclick="() => ClickTopic(2)" class="topic_two">
                    <a class="button_topic_two">
                        🎃 Halloween gift
                    </a>
                </div>
-                <div class="topic_three">
+
+                <div @onclick="() => ClickTopic(3)" class="topic_three">
                    <a class="button_topic_three">
                        🎁 Birthday gift
                    </a>
                </div>
            </div>

+
        </div>
+
        <div class="chat_input">
-            <input @bind="inputValue" @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text" id="chatInput"
-                placeholder="Describe what you are looking for...." autocomplete="off">
+            <input @bind="inputValue" @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text"
+                id="chatInput" placeholder="Describe what you are looking for...." autocomplete="off">
            <img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
        </div>

    </div>
-    
+

 </div>

@ -70,11 +73,11 @@
    var choose = "Product";

    function switchGift() {
-        choose_gift.style.backgroundColor = "#0052CC";
-        choose_product.style.backgroundColor = "transparent";
-        switchGi.style.color = "white";
-        switchProd.style.color = "#202124";
-        choose = "Gift";
+        // choose_gift.style.backgroundColor = "#0052CC";
+        // choose_product.style.backgroundColor = "transparent";
+        // switchGi.style.color = "white";
+        //switchProd.style.color = "#202124";
+        //choose = "Gift";

    }

@ -88,17 +91,10 @@
    }
    function myJavaScriptFunction(wishlistId) {

-         UpdateMenu(wishlistId);
+        UpdateMenu(wishlistId);

    }

-
-
-
-
-
-
-
    document.getElementById('choose_gift').addEventListener('click', switchGift);
    document.getElementById('choose_product').addEventListener('click', switchProduct);

@ -110,17 +106,31 @@
    private void Сhoose_product() {
        selectedChoice = "Product";
    }
-        private void Сhoose_gift() {
+    private void Сhoose_gift() {
        selectedChoice = "Gift";
    }

    private async Task UpdateSideMenu(string wishlistId)
    {

-    await JSRuntime.InvokeVoidAsync("myJavaScriptFunction", wishlistId);
+        await JSRuntime.InvokeVoidAsync("myJavaScriptFunction", wishlistId);

    }

+
+    public void ClickTopic(int input)
+    {
+        if (input == 1){
+            inputValue ="I need a present for a date";
+        }
+        if (input == 2){
+            inputValue ="I need a present for halloween";
+        }
+        if (input == 3){
+            inputValue ="I need a present for a birthday";
+        }
+        CreateNewChat();
+    }
    private void InputChanged(ChangeEventArgs e)
    {
        // Оновіть значення поля введення при кожному введенні тексту
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
@ -26,7 +26,6 @@ namespace ShoppingAssistantWebClient.Web.Pages
        private MessageCreateDto messageCreateDto;
        private string inputValue = "";

-
        private async Task CreateNewChat() {

          try
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
@ -16,7 +16,6 @@
  left: 1.56em;
  cursor: pointer;
  visibility: hidden;
-
  @media screen and (max-width: 900px) {
    visibility: visible;
  }
@ -62,6 +61,11 @@
  font-size: 2.5em;
  text-align: center;
  font-weight: 600;
+  @media screen and (max-width: 480px) {
+
+    font-size: 1.7125em;
+
+  }
 }

 .title_three_frame {
@ -71,6 +75,13 @@
  font-size: 1.25em;
  text-align: center;
  font-weight: 400;
+  @media screen and (max-width: 480px) {
+
+    font-size: 1.0125em;
+    padding-left: 4%;
+    padding-right: 4%;
+
+  }
 }

 .topic {
@ -80,6 +91,12 @@
  color: #009FFF;
  width: 15.625em;
  margin: 0 auto;
+  @media screen and (max-width: 480px) {
+
+    width: 11.875em;
+    font-size: 0.9125em;
+
+  }
 }

 .topic div {
@ -106,6 +123,11 @@
  border-radius: 0.6em;
  text-align: center;
  position: relative;
+  @media screen and (max-width: 480px) {
+    height: 2.4125em;
+    width: 16.875em;
+
+  }
 }

 .switch_product {
@ -137,7 +159,41 @@
  transition: 0.8s;
  color: #202124;
 }
+button::before {
+  content: attr(text);

+}
+
+button:hover::before {
+  content: attr(hover-text);
+}
+button {
+  outline: none; /* Для синий ободки */
+  border: 0;
+  background: transparent;
+}
+.message {
+  right: 0;
+  position: absolute;
+  border-radius: 0.6em;
+  margin: 0.3125em;
+  width: calc(50% - 0.625em);
+  height: calc(100% - 0.625em);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: 0.8s;
+  color: #202124;
+  padding: 4px; /* Добавьте подходящий отступ, если необходимо */
+}
+.hidden {
+  display: none;
+}
+
+.show {
+  display: block;
+}
 .chat_message {
  position: relative;
  overflow-y: auto;
@ -148,14 +204,25 @@
 .chat_input {
  background-color: #EAEAEA;
  position: absolute;
-  display: flex;
+  display: inline-flex; /* Использовать inline-flex-контейнер */
  align-items: center;
  bottom: 2em;
  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%;
+
+  }
 }

+
 .input_messages {
  width: 100%;
  height: 2.5em;
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
@ -54,9 +54,8 @@
        <div class="line"></div>
        <div class="elements">
            <div class="info_user" @onclick="ShowModal" style="cursor: pointer;">
-                <img src="/images/avatar.jpg" alt="Avatar user">
-                <!-- Change to name -->
-                <span class="user_name">@GlobalUser.Id</span>
+                <img src="/images/avatar.svg" alt="Avatar user">
+                <span class="user_name">User Settings</span>
            </div>

        </div>
@ -78,42 +77,57 @@
        var button_open = document.querySelector('.button_open_menu');

        if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') {
-            left_frame.style.transform = 'translateX(-110%)';
-            button_open.style.visibility = 'visible';
-            right_frame.style.left = '1.25em';
-            amazonAssociate.style.left ='calc(50% - 12.5em)';
+
+            // меню закрите
+            if (window.innerWidth < 1100) {
+                right_frame.style.left = '1.25em';
+                amazonAssociate.style.left ='calc(50% - 12.5em)';
+                right_frame.style.zIndex = '0';
+                left_frame.style.transform = 'translateX(-110%)';
+                button_open.style.visibility = 'visible';
+            }else{
+                amazonAssociate.style.left ='calc(50% - 12.5em)';
+                left_frame.style.transform = 'translateX(-110%)';
+                button_open.style.visibility = 'visible';
+                right_frame.style.left = '1.25em';
+            }
+

        } else {
-            left_frame.style.transform = 'translateX(0)';
-            button_open.style.visibility = 'hidden';
-            right_frame.style. left = '23.25em';
-            amazonAssociate.style.left ='50%';
+          
+                // меню відкрите
+            if (window.innerWidth < 1100) {
+                right_frame.style.left = '1.25em';
+                amazonAssociate.style.left ='calc(50% - 12.5em)';
+                right_frame.style.zIndex = '0';
+                left_frame.style.zIndex = '1';
+                left_frame.style.transform = 'translateX(0)';
+                button_open.style.visibility = 'hidden';
+            }else{
+                amazonAssociate.style.left ='50%';
+                left_frame.style.transform = 'translateX(0)';
+                button_open.style.visibility = 'hidden';
+                right_frame.style. left = '23.25em';
+            }
+
+
        }
    }
    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>
-    
+        var left_frame = document.querySelector('.sidebar-menu');
+        var right_frame = document.querySelector('.right-frame');
+        var amazonAssociate = document.querySelector('.amazon-associate');
+        
+        var computedStyles = getComputedStyle(left_frame);
+        var transformValue = computedStyles.transform;
+        var button_open = document.querySelector('.button_open_menu');
+
+
    function UpdateMenu(wishlistId)
    {

@ -121,6 +135,8 @@

    }

+
+
 </script>

@code {
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
@ -11,6 +11,10 @@
  display: flex;
  align-items: center;
  padding-bottom: 1.5%;
+  background-color: white;
+  margin-left: 0.3em;
+  border-radius: 0.6em 0 0em 0em;
+
 }

 .menu {
@ -22,6 +26,7 @@
  border-color: #0052CC;
  border-radius: 0.6em;
  padding-top: 1.5%;
+  background-color: white;
 }

 .elements_wishlisht {
@ -46,7 +51,6 @@
  display: flex;
  align-items: center;
  border-radius: 0 0 0.6em 0.6em;
-  background-color: rgb(255, 255, 255);
  height: 3.6em;
  left: 0;
  bottom: 0;
@ -55,6 +59,9 @@
  padding-right: 1.25em;
  border-top: 1px solid #0165FF;
 }
+.info_user:hover{
+  background-color: #e6e6e6;
+}

 .logo_name {
  padding-top: 0.5em;
@ -211,17 +218,18 @@
 }

 .user_name {
-  padding-left: 0.4375em;
-  font-size: 1em;
+  padding-left: 0.4em;
+  font-size: 1.2em;
  justify-content: center;
  align-items: center;
 }

 .info_user img {
  float: left;
-  border-radius: 50%;
-  width: 2.3em;
-  height: 2.3em;
+  width: 2.4em;
+  height: 2.4em;
+  margin-left: 3.3em;
+
 }

 .button_close_menu {
--- a/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css
+++ b/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css
@ -9,10 +9,12 @@
 .sidebar-menu {
    position: absolute;
    width: 20em;
-    top: 1.25em;
+    top: 1.33em;
    bottom: 0em;
    margin-right: 1.5em;
+
    transition: 1s;
+    border-radius: 0.7em;

    @media screen and (max-width: 900px) {
        transform: translateX(-110%);
--- a/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.jpg
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.jpg
--- a/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.svg
+++ b/ShoppingAssistantWebClient.Web/wwwroot/images/avatar.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="512px" height="512px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g><path style="opacity:0.981" fill="#0051cb" d="M 250.5,45.5 C 303.26,46.953 338.094,72.6197 355,122.5C 364.709,171.065 349.209,209.232 308.5,237C 261.156,261.469 218.322,255.302 180,218.5C 148.541,180.815 144.207,140.149 167,96.5C 186.63,66.0302 214.464,49.0302 250.5,45.5 Z M 244.5,81.5 C 278.623,78.4668 303.123,92.1335 318,122.5C 328.631,152.688 322.464,178.854 299.5,201C 272.183,220.457 244.183,221.457 215.5,204C 189.315,182.099 181.815,154.933 193,122.5C 202.941,99.7223 220.108,86.0557 244.5,81.5 Z"/></g>
+<g><path style="opacity:0.992" fill="#009eff" d="M 357.5,258.5 C 368.188,257.262 375.688,261.596 380,271.5C 380.499,277.491 380.666,283.491 380.5,289.5C 387.692,291.177 394.525,293.843 401,297.5C 406.198,292.635 411.698,288.135 417.5,284C 422.44,282.959 427.106,283.626 431.5,286C 441.171,292.708 443.337,301.208 438,311.5C 433.984,315.348 430.151,319.348 426.5,323.5C 430.303,329.764 432.97,336.43 434.5,343.5C 451.043,339.931 461.71,346.097 466.5,362C 461.89,378.151 451.223,384.317 434.5,380.5C 433.209,387.705 430.542,394.371 426.5,400.5C 429.818,404.318 433.318,407.985 437,411.5C 443.644,422.594 441.478,431.761 430.5,439C 425.918,441.323 421.251,441.656 416.5,440C 410.727,436.064 405.394,431.564 400.5,426.5C 394.314,430.174 387.814,433.174 381,435.5C 383.986,451.555 377.82,461.888 362.5,466.5C 345.984,462.162 339.65,451.496 343.5,434.5C 336.43,432.97 329.764,430.303 323.5,426.5C 318.606,431.564 313.273,436.064 307.5,440C 302.696,441.97 298.03,441.637 293.5,439C 291,436.5 288.5,434 286,431.5C 282.667,425.5 282.667,419.5 286,413.5C 290.214,409.622 294.048,405.455 297.5,401C 293.843,394.525 291.177,387.692 289.5,380.5C 283.491,380.666 277.491,380.499 271.5,380C 260.155,374.814 256.321,366.314 260,354.5C 267.151,344.109 276.985,340.442 289.5,343.5C 291.091,336.559 293.758,330.059 297.5,324C 293.347,319.178 289.18,314.345 285,309.5C 281.307,299.714 283.807,291.881 292.5,286C 297.988,283.085 303.655,282.752 309.5,285C 314.345,289.18 319.178,293.347 324,297.5C 330.059,293.758 336.559,291.091 343.5,289.5C 340.414,275.356 345.081,265.023 357.5,258.5 Z M 361.5,323.5 C 385.544,325.182 398.544,338.016 400.5,362C 399,386.167 386.167,399 362,400.5C 338.51,398.343 325.677,385.51 323.5,362C 325.677,338.657 338.344,325.823 361.5,323.5 Z"/></g>
+<g><path style="opacity:0.979" fill="#0051cb" d="M 180.5,280.5 C 199.836,280.333 219.17,280.5 238.5,281C 250.834,286.335 254.334,295.168 249,307.5C 246.408,310.762 243.241,313.262 239.5,315C 221.5,315.333 203.5,315.667 185.5,316C 138.041,321.793 110.541,348.293 103,395.5C 100.63,406.374 103.13,415.874 110.5,424C 113.554,426.194 116.888,427.861 120.5,429C 160.213,429.023 199.88,429.69 239.5,431C 252.873,439.14 254.54,449.14 244.5,461C 241.874,463.146 238.874,464.479 235.5,465C 198.167,465.667 160.833,465.667 123.5,465C 95.9524,461.123 77.7858,445.956 69,419.5C 64.2087,370.919 81.3754,332.086 120.5,303C 138.754,290.64 158.754,283.14 180.5,280.5 Z"/></g>
+</svg>