shopping-assistant-web-client/ShoppingAssistantWebClient.Web/Pages/Chat.razor
––AsTroLog f933e31be4 fix UI
2023-12-10 11:33:24 +00:00

176 lines
4.1 KiB
Plaintext

@page "/chat/{chatId}"
@inject IHttpClientFactory ClientFactory
@inject IJSRuntime JSRuntime
<PageTitle>@name</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="title_one_frame">@name</div>
<div class="gradient"></div>
<div class="chat_message" @ref="chatMessageRef">
<ul class="chat_box">
@if (!isLoading && Messages != null)
{
@foreach (var item in Messages)
{
if (item.Role != "User")
{
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
{
<li class="chat_outgoing">
<p>@item.Text</p>
</li>
}
}
}
</ul>
</div>
<div class="possible_options">
@if (Suggestion.Count != 0)
{
<div class="tite_options">Several possible options</div>
<div class="options">
@foreach (var item in Suggestion)
{
<div @onclick="() => ClickOption(item)" class="topic_options">
@item
</div>
}
</div>
}
</div>
<div class="chat_input">
<input @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for...." autocomplete="off">
<img @onclick="() => AddNewMessage(inputValue)" class="button_sende" src="/images/send.svg" alt="Send message">
</div>
</div>
</div>
<script>
window.scrollToBottom = function (element) {
if (element) {
element.scrollTop = 9999;
}
};
window.clearInput = () => {
document.getElementById('chatInput').value = '';
};
function myJavaScriptFunction(wishlistId) {
UpdateMenu(wishlistId);
}
document.getElementById('button_open').addEventListener('click', changetyle);
</script>
@code {
[Parameter] public string chatId { get; set; }
public string inputValue = "";
protected override async Task OnParametersSetAsync()
{
await LoadMessages();
}
private void InputChanged(ChangeEventArgs e)
{
inputValue = e.Value.ToString();
}
public void Enter(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
AddNewMessage(inputValue);
}
}
private ElementReference chatMessageRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("scrollToBottom", chatMessageRef);
}
private async Task UpdateSideMenu(string wishlistId)
{
await JSRuntime.InvokeVoidAsync("myJavaScriptFunction", wishlistId);
}
private void ClickOption(string item)
{
inputValue = item;
}
}