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

@page "/chat/{chatId}"

@inject IHttpClientFactory ClientFactory

<PageTitle>Gift for Jessica</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">Gift for Jessica</div>

            <ul class="chat_box">

                @if(!isLoading && Messages!=null){

                    @foreach (var item in Messages){

                      if(item.Role!="User"){

                        <li class=" chat_incoming">
                            <p>@item.Text</p>
                        </li>

                      }else{

                        <li class="chat_outgoing">
                            <p>@item.Text</p>
                        </li>

                      }
                    }

                }

            </ul>


        </div>


        <div class="possible_options">

            <div class="tite_options">Several possible options</div>

            <div class="options">

                <div class="topic_options">
                    HDMI
                </div>
                <div class="topic_options">
                    VGA
                </div>
                <div class="topic_options">
                    DisplayPort
                </div>

            </div>

        </div>


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

    </div>

</div>


<script>


    document.getElementById('button_open').addEventListener('click', changetyle);
</script>
@code {

    [Parameter] public string chatId { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        await LoadMessages();
    }

    public void Enter(KeyboardEventArgs e)
    {
        if (e.Code == "Enter" || e.Code == "NumpadEnter")
        {
           AddNewMessage();
        }
    }
    
}