shopping-assistant-web-client/ShoppingAssistantWebClient.Web/Pages/Index.razor

@page "/"
<PageTitle>New Chat</PageTitle>

<div class="right_frame" id="rightFrame">

    <div id="button_open" class="open_menu">
        <a class="button_open_menu">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>

    <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">
                <button @onclick="Сhoose_product" class="switch_product" id="choose_product">
                    Product
                </button>
                <button text="Gift" hover-text="Сoming soon" onmouseover="showMessage()" onmouseout="hideMessage()"
                    class="switch_gift" id="choose_gift">
                </button>
            </div>


            <div class="title_three_frame">What you're looking for, we will help you solve your problem and find it
            </div>

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

                <div @onclick="() => ClickTopic(2)" class="topic_two">
                    <a class="button_topic_two">
                        🎃 Halloween gift
                    </a>
                </div>

                <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">
            <img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
        </div>

    </div>


</div>

<script>


    var choose_gift = document.getElementById("choose_gift");
    var choose_product = document.getElementById("choose_product");
    var switchGi = document.querySelector(".switch_gift");
    var switchProd = document.querySelector(".switch_product");
    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";

    }

    function switchProduct() {
        choose_product.style.backgroundColor = "#0052CC";
        choose_gift.style.backgroundColor = "transparent";
        switchProd.style.color = "white";
        switchGi.style.color = "#202124";
        choose = "Product";

    }
    function myJavaScriptFunction(wishlistId) {

        UpdateMenu(wishlistId);

    }

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

    document.getElementById('button_open').addEventListener('click', changetyle);
</script>
@code{
    private string selectedChoice = "Product";

    private void Сhoose_product() {
        selectedChoice = "Product";
    }
    private void Сhoose_gift() {
        selectedChoice = "Gift";
    }

    private async Task UpdateSideMenu(string 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)
    {
        // Оновіть значення поля введення при кожному введенні тексту
        inputValue = e.Value.ToString();
    }
    public void Enter(KeyboardEventArgs e)
    {
        if (e.Code == "Enter" || e.Code == "NumpadEnter")
        {

            if (!string.IsNullOrWhiteSpace(inputValue))
            {
                CreateNewChat();
            }
        }
    }
}