cartaid/shopping-assistant-web-client
1
0
Fork 0
mirror of https://github.com/Shchoholiev/shopping-assistant-web-client.git synced 2025-04-04 16:49:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

SA-194 add message entering

Browse Source
This commit is contained in:
––AsTroLog 2023-11-20 09:03:32 +00:00
parent 06e813c038
commit 24e059dcb4
3 changed files with 97 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ShoppingAssistantWebClient.Web/Pages/Chat.razor
View File

@ -76,7 +76,6 @@
}
</div>
}
@ -84,11 +83,10 @@
<div class="chat_input">
<input @bind="inputValue" @onkeydown="Enter" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for....">
<input @onkeydown="Enter" @oninput="InputChanged" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for...." autocomplete="off">
<img @onclick="AddNewMessage" class="button_sende" src="/images/send.svg" alt="Send message">
</div>
</div>
</div>
@ -102,6 +100,10 @@
}
};
window.clearInput = () => {
// Отримати елемент вводу за його ідентифікатором і обнулити його значення
document.getElementById('chatInput').value = '';
};
document.getElementById('button_open').addEventListener('click', changetyle);
@ -114,12 +116,19 @@
{
await LoadMessages();
}
private void InputChanged(ChangeEventArgs e)
{
inputValue = e.Value.ToString();
}
public void Enter(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
AddNewMessage();
}
}

119
ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
View File

@ -6,8 +6,11 @@ using ShoppingAssistantWebClient.Web.Network;
using ShoppingAssistantWebClient.Web.Models.Input;
using ShoppingAssistantWebClient.Web.Models.Enums;
using System.Text.RegularExpressions;
using Microsoft.JSInterop;
namespace ShoppingAssistantWebClient.Web.Pages;
public partial class Chat : ComponentBase
{
@ -24,6 +27,7 @@ public partial class Chat : ComponentBase
private CancellationTokenSource cancelTokenSource;
private MessageCreateDto messageCreateDto;
private bool isWaitingForResponse = false;
public bool isLoading = true;
private string inputValue = "";
private string name = "";
@ -96,74 +100,83 @@ public partial class Chat : ComponentBase
}
private async Task AddNewMessage()
{
try{
messageCreateDto = new MessageCreateDto { Text = inputValue };;
Message = new Messages();
Message.Text = inputValue;
Message.Role = "User";
Message.Id = "";
Message.CreatedById = "";
inputValue = "";
Suggestion = 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;
await foreach (var sseEvent in serverSentEvent.WithCancellation(cancellationToken))
if (!isWaitingForResponse && !string.IsNullOrWhiteSpace(inputValue))
{
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;
JSRuntime.InvokeVoidAsync("clearInput");
isWaitingForResponse = true;
try{
messageCreateDto = new MessageCreateDto { Text = inputValue };;
Message = new Messages();
Message.Text = result;
Message.Role = "bot";
Message.Text = inputValue;
Message.Role = "User";
Message.Id = "";
Message.CreatedById = "";
if (first)
{
Messages.Add(Message);
first = false;
}
else
{
var lengt = Messages.Count();
Messages[lengt-1].Text += Message.Text;
}
inputValue = "";
Suggestion = new List<String>();
Messages.Add(Message);
StateHasChanged();
}else if(sseEvent.Event == SearchEventType.Product){
var url = $"/chat/{chatId}/product";
Navigation.NavigateTo(url);
cancelTokenSource = new CancellationTokenSource();
var cancellationToken = cancelTokenSource.Token;
}else if(sseEvent.Event == SearchEventType.Suggestion){
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;
}
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);
}
Suggestion.Add(sseEvent.Data);
}
isWaitingForResponse = false;
}catch(Exception ex){
Console.WriteLine($"Error : {ex.Message}");
}
}
}catch(Exception ex){
Console.WriteLine($"Error : {ex.Message}");
}
}
}

20
ShoppingAssistantWebClient.Web/Pages/Index.razor
View File

@ -52,8 +52,8 @@
</div>
<div class="chat_input">
<input @bind="inputValue" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for....">
<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>
@ -133,4 +133,20 @@
}
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();
}
}
}
}