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

Merge remote-tracking branch 'origin/develop' into SA-106-wishlists-cart-pages

Browse Source
This commit is contained in:
AndriiSyrotenko 2023-11-20 12:57:15 +00:00
commit 4f984d4136
23 changed files with 1358 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ShoppingAssistantWebClient.Web/Models/Enums/SearchEventType.cs Normal file
View File

@ -0,0 +1,9 @@
namespace ShoppingAssistantWebClient.Web.Models.Enums;
public enum SearchEventType
{
Wishlist = 0,
Message = 1,
Suggestion = 2,
Product = 3
}

6
ShoppingAssistantWebClient.Web/Models/Input/MessageCreateDto.cs Normal file
View File

@ -0,0 +1,6 @@
namespace ShoppingAssistantWebClient.Web.Models.Input;
public class MessageCreateDto
{
public required string Text { get; set; }
}

18
ShoppingAssistantWebClient.Web/Models/Messages.cs Normal file
View File

@ -0,0 +1,18 @@
namespace ShoppingAssistantWebClient.Web.Models
{
public class Messages
{
public string Id { get; set; }
public string Text { get; set; }
public string Role { get; set; }
public string CreatedById { get; set; }
}
}

42
ShoppingAssistantWebClient.Web/Models/Product.cs
View File

@ -1,22 +1,22 @@
namespace ShoppingAssistantWebClient.Web.Models;
public class Product
{
public required string Id {get; set;}
public required string Url {get; set;}
public required string Name {get; set;}
public required string Description {get; set;}
public required double Rating {get; set;}
public required double Price { get; set; }
public required string[] ImagesUrls {get; set;}
public required bool WasOpened {get; set;}
public required string WishlistId {get; set;}
namespace ShoppingAssistantWebClient.Web.Models;
public class Product
{
public required string Id {get; set;}
public required string Url {get; set;}
public required string Name {get; set;}
public required string Description {get; set;}
public required double Rating {get; set;}
public required double Price { get; set; }
public required string[] ImagesUrls {get; set;}
public required bool WasOpened {get; set;}
public required string WishlistId {get; set;}
}

10
ShoppingAssistantWebClient.Web/Models/ProductSearch/ServerSentEvent.cs Normal file
View File

@ -0,0 +1,10 @@
using ShoppingAssistantWebClient.Web.Models.Enums;
namespace ShoppingAssistantWebClient.Web.Models.ProductSearch;
public class ServerSentEvent
{
public SearchEventType Event { get; set; }
public string Data { get; set; }
}

52
ShoppingAssistantWebClient.Web/Network/ApiClient.cs
View File

@ -3,6 +3,9 @@ using GraphQL;
using Newtonsoft.Json;
using System.Net.Http.Headers;
using ShoppingAssistantWebClient.Web.Models.GlobalInstances;
using ShoppingAssistantWebClient.Web.Models.ProductSearch;
using System.Text;
using ShoppingAssistantWebClient.Web.Models.Enums;
namespace ShoppingAssistantWebClient.Web.Network;
@ -93,6 +96,55 @@ public class ApiClient
return model;
}
public async IAsyncEnumerable<ServerSentEvent> GetServerSentEventStreamed(string url, Object obj, CancellationToken cancellationToken)
{
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);
SearchEventType eventType = SearchEventType.Message;
while (!cancellationToken.IsCancellationRequested)
{
var jsonChunk = await reader.ReadLineAsync(cancellationToken);
count += 1; //
if (count >=5 ){ //
break; //
}; //
if (jsonChunk == null) continue;
if (jsonChunk.StartsWith("event: "))
{
count = 0; //
var type = jsonChunk.Substring("event: ".Length);
switch(type)
{
case "Message":
eventType = SearchEventType.Message;
break;
case "Suggestion":
eventType = SearchEventType.Suggestion;
break;
case "Product":
eventType = SearchEventType.Product;
break;
case "Wishlist":
eventType = SearchEventType.Wishlist;
break;
}
}
if (jsonChunk.StartsWith("data: "))
{
yield return new ServerSentEvent
{
Event = eventType,
Data = jsonChunk.Substring("data: ".Length),
};
}
}
}
private MultipartFormDataContent MapIFormCollectionToForm(IFormCollection formCollection)
{
var formDataContent = new MultipartFormDataContent();

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

@ -1,133 +1,139 @@
@page "/chat/1"
<div class="container-fluid">
<div class="left_frame" id="leftFrame">
<div class="logo">
<img src="/images/logo.png" alt="Logo site">
<span class="logo_name">CARTAID</span>
</div>
<div class="menu">
<div class="elements_wishlisht">
<div class="close_menu">
<span >Wishlists</span>
<a class="button_close_menu" >
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="add_chat">
<a href="/">
<span >Add chat +</span>
</a>
</div>
<div class="wishlist_names">
<section>
<span id ="wishlist_id_1" class="wishlist_name">Gift for Jessica</span>
</section>
<section>
<span id ="wishlist_id_2" class="wishlist_name">Secret Santa</span>
</section>
<section>
<span id ="wishlist_id_3" class="wishlist_name">Phone charger</span>
</section>
<section>
<span class="wishlist_name">Phone</span>
</section>
<section>
<span class="wishlist_name">Printer</span>
</section>
<section>
<span class="wishlist_name">Books</span>
</section>
</div>
</div>
<div class="line"></div>
<div class="elements">
<div class="info_user">
<img src="/images/avatar.jpg" alt="Avatar user">
<span class="user_name">Username</span>
</div>
</div>
</div>
</div>
<div class="right_frame" id="rightFrame">
<div class="open_menu">
<a class="button_open_menu" >
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="chat_frame">
<div class="new_chat">
<div class="title_one_frame">Gift for Jessica</div>
<ul class="chat_box">
<li class="chat_outgoing">
<p>Give me product recommendation. Ask me questions if you need more directions. I am looking for: hub for my macbook to connect external monitors</p>
</li>
<li class=" chat_incoming">
<p>Sure! I can help you with that. I will ask you some leading questions. This is the first:
<br>
How many external monitors do you want to connect to your MacBook?</p>
</li>
<li class="chat_outgoing">
<p>7</p>
</li>
<li class=" chat_incoming">
<p>Thank you. Here is the next question:
<br>
What type of external monitors do you have? (e.g., HDMI, DisplayPort, VGA)</p>
</li>
</ul>
<div class="chat_input">
<input type="text" id="chatInput" placeholder="Describe what you are looking for....">
<a class="button_sende">
<img src="/images/send.png" alt="Send message">
</a>
</div>
</div>
</div>
</div>
</div>
@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="chat_message" @ref="chatMessageRef">
<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">
@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 @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>
window.scrollToBottom = function (element) {
if (element) {
element.scrollTop = 9999;
}
};
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();
}
}
private ElementReference chatMessageRef;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("scrollToBottom", chatMessageRef);
}
private void ClickOption(string item)
{
inputValue = item;
}
}

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

@ -1,14 +1,169 @@
using Microsoft.AspNetCore.Components;
namespace ShoppingAssistantWebClient.Web.Pages;
public partial class Chat : ComponentBase
{
[Inject]
public ILogger<Chat> Logger { get; set; }
protected override async Task OnInitializedAsync()
{
// Get data from Back-end
}
}
using Microsoft.AspNetCore.Components;
using ShoppingAssistantWebClient.Web.Models;
using GraphQL;
using Newtonsoft.Json;
using ShoppingAssistantWebClient.Web.Network;
using ShoppingAssistantWebClient.Web.Models.Input;
using ShoppingAssistantWebClient.Web.Models.Enums;
using System.Text.RegularExpressions;
namespace ShoppingAssistantWebClient.Web.Pages;
public partial class Chat : ComponentBase
{
[Inject]
private ApiClient _apiClient { get; set; }
[Inject]
private NavigationManager Navigation { get; set; }
public List<Messages> Messages { get; set; }
public List<String> Suggestion { get; set; } = new List<String>();
public Messages Message { get; set; }
private CancellationTokenSource cancelTokenSource;
private MessageCreateDto messageCreateDto;
public bool isLoading = true;
private string inputValue = "";
private string name = "";
protected override async Task OnInitializedAsync()
{
await LoadMessages();
}
private async Task LoadMessages()
{
try{
string wishlistId = chatId;
var request = new GraphQLRequest
{
Query = @"query PersonalWishlist( $wishlistId: String!) {
personalWishlist(wishlistId: $wishlistId) {
name
}
}",
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!) {
messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize)
{
items {
id
text
role
createdById
}
}
}",
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}");
}
}
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))
{
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);
}
}
}catch(Exception ex){
Console.WriteLine($"Error : {ex.Message}");
}
}
}

455
ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
View File

@ -1,330 +1,139 @@
html {
font-family: 'Nunito';
padding-top: 20px;
padding-bottom: 20px;
}
.menu {
position: relative;
width: 100%;
height: 100%;
border: 1.5px solid;
border-color: #0052CC;
border-radius: 10px;
padding-top: 16px;
padding-bottom: 16px;
}
.right_frame {
position: relative;
border: 0.09em solid;
border-color: #0052CC;
border-radius: 0.6em;
height: 100%;
width: 100%;
}
.logo {
display: flex;
align-items: center;
padding-bottom: 15PX;
}
.logo_name {
padding-top: 10px;
padding-left: 3px;
font-size: 17px;
justify-content: center;
/* Горизонтальное центрирование */
align-items: center;
letter-spacing: 0.5px;
font-weight: 600;
}
.logo img {
float: left;
width: 52px;
height: 52px;
}
.left_frame {
padding-left: 20px;
position: absolute;
height: calc(100% - 105px);
left: 0;
width: 20%;
transition: 1s;
}
.wishlist_name {
font-size: 15px;
margin-top: 7px;
margin-bottom: 7px;
color: black;
cursor: pointer;
}
.elements {
padding-left: 12px;
padding-right: 12px;
}
.elements_wishlisht{
overflow-y: scroll;
padding-left: 12px;
padding-right: 12px;
height: 90%;
}
.elements_wishlisht::-webkit-scrollbar {
visibility: hidden;
}
.close_menu {
position: relative;
background-color: #EAEAEA;
border-radius: 10px;
color: #4E4E4E;
font-size: 16px;
width: 90%;
height: 40px;
padding: 7px 9px;
}
.add_chat {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
margin-bottom: 5px;
background-color: #EAEAEA;
border-radius: 10px;
font-size: 16px;
width: 100px;
height: 40px;
cursor: pointer;
}
.add_chat a{
border-radius: 10px;
padding: 7px 9px;
text-decoration: none;
color: #4E4E4E;
}
.info_user {
background-color: white;
position:absolute;
bottom: 0;
padding-bottom: 10px;
padding-top: 10px;
}
.user_name {
font-size: 16px;
padding-left: 7px;
}
.info_user img {
height: 40px;
width: 40px;
border-radius: 50%;
}
.line {
position: absolute;
bottom: 60px;
width: 100%;
border-bottom: 1px solid #4b7bc4;
}
.button_close_menu{
width: 23px;
height: 23px;
position: absolute;
right: 20px;
cursor: pointer;
}
.button_close_menu span {
width: 20px;
height: 1.5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #4E4E4E;
}
.button_close_menu span:nth-of-type(2) {
top: calc(50% - 5px);
}
.button_close_menu span:nth-of-type(3) {
top: calc(50% + 5px);
}
.right_frame {
position: absolute;
border: 1.5px solid;
border-color: #0052CC;
border-radius: 10px;
left: 20px;
height: calc(100% - 40px);
width: calc(100% - 40px);
transition: 1s;
}
.button_open_menu{
z-index: 2;
width: 23px;
height: 23px;
position: absolute;
top: 25px;
left: 25px;
cursor: pointer;
}
.button_open_menu span {
width: 20px;
height: 1.5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #4E4E4E;
}
.button_open_menu span:nth-of-type(2) {
top: calc(50% - 5px);
}
.button_open_menu span:nth-of-type(3) {
top: calc(50% + 5px);
}
.title_one_frame{
padding-top: 20px ;
color: #0052CC;
font-size: 17px;
text-align: center;
}
.title_two_frame{
padding-top: 60px ;
padding-bottom: 40px ;
color: black;
font-size: 40px;
text-align: center;
font-weight: 600;
}
.title_three_frame{
padding-top: 60px ;
padding-bottom: 40px ;
color: #202124;
font-size: 20px;
text-align: center;
font-weight: 400;
}
.topic {
font-size: 18px;
text-align: center;
line-height: 35px;
color: #009FFF;
width: 250px;
margin: 0 auto;
}
.topic div{
margin-top: 20px;
border: 1.5px solid;
.button_open_menu {
z-index: 2;
width: 1.43em;
height: 1.23em;
position: absolute;
top: 1.56em;
left: 1.56em;
cursor: pointer;
visibility: hidden;
}
.button_open_menu span {
width: 20px;
height: 1.5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #4E4E4E;
}
.button_open_menu span:nth-of-type(2) {
top: calc(50% - 5px);
}
.button_open_menu span:nth-of-type(3) {
top: calc(50% + 5px);
}
.title_one_frame {
padding-top: 1.25em;
color: #0052CC;
font-size: 1.0625em;
text-align: center;
}
.chat_input {
background-color: #EAEAEA;
position: absolute;
display: flex;
align-items: center;
bottom: 2em;
margin-left: 25%;
width: 50%;
border-radius: 0.6em;
}
.possible_options {
position: absolute;
bottom: 5.5em;
margin-left: 25%;
width: 50%;
border-radius: 0.6em;
}
.tite_options{
font-size: 0.9em;
color: #ADADAD;
margin-bottom: 0.5em;
}
.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: 10px;
justify-content: center;
align-items: center;
cursor: pointer;
}
.topic div a{
color: #009FFF;
text-decoration:none;
}
.switch{
height: 45px;
width: 350px;
margin: 0 auto;
border: 1.5px solid;
border-color: #EAEAEA;
border-radius: 10px;
border-radius: 0.6em;
margin: 0em 0.6em;
flex: 1;
text-align: center;
position: relative;
}
.switch_product{
position: absolute;
background-color: #0052CC;
border-radius: 10px;
margin: 5px;
width: calc(50% - 10px);
height: calc(100% - 10px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.8s;
color: white;
}
.switch_gift{
right: 0;
position: absolute;
border-radius: 10px;
margin: 5px;
width: calc(50% - 10px);
height: calc(100% - 10px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.8s;
color: #202124;
}
.chat_input{
position: absolute;
margin-left: 25%;
margin-bottom: 20px;
width: 50%;
border-radius: 10px;
bottom: 0;
}
.chat_input input{
font-size: 17px;
width: 100%;
position: relative;
color: #4E4E4E;
background-color: #EAEAEA;
border-radius: 10px;
border: none;
padding: 10px 20px;
outline:none;
}
.button_sende{
margin-top: 14px;
margin-right: 20px;
cursor: pointer;
height: calc(100% - 28px);
width: 2.8%;
position: absolute;
right: 0;
}
.button_sende img{
height: 100%;
width: 100%;
position: absolute;
}
.new_chat{
position: absolute;
overflow-y: scroll;
height: 100%;
width: 100%;
}
.new_chat::-webkit-scrollbar {
visibility: hidden;
}
}
.input_messages {
width: 100%;
height: 2.5em;
font-size: 1.0625em;
background-color: #EAEAEA;
color: #4E4E4E;
border-radius: 0.6em;
border: none;
padding: 0.625em 1.25em;
outline: none;
}
.button_sende {
float: right;
cursor: pointer;
line-height: 2.5em;
margin-right: 0.8em;
width: 1.5em;
height: 1.4em;
}
.new_chat {
padding-top: 0.5em;
position: relative;
height: 100%;
width: 100%;
}
.chat_message {
position: relative;
overflow-y: auto;
height: calc(100% - 8em);
width: 100%;
}
.chat_message::-webkit-scrollbar {
border-radius: 20px;
width: 0.2em;
}
.chat_message::-webkit-scrollbar-thumb {
background-color: #0052CC;
/* Колір позиції покажчика */
border-radius: 10px;
/* Закруглення країв позиції покажчика */
width: 0.2em;
}
.chat_box{
border-radius: 10px;
position: absolute;

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

@ -1,9 +1,136 @@
@page "/"
<PageTitle>New Chat</PageTitle>
<PageTitle>CartaId</PageTitle>
<div class="right_frame" id="rightFrame">
<h1>Hello, world!</h1>
<div id="button_open" class="open_menu">
<a class="button_open_menu">
<span></span>
<span></span>
<span></span>
</a>
</div>
Welcome to your new app.
@if(isLoading == false){
<SurveyPrompt Title="How is Blazor working for you?" />
<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">
Product
</div>
<div @onclick="Сhoose_gift" class="switch_gift" id="choose_gift">
Gift
</div>
</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 class="topic_one">
<a class="button_topic_one">
Date
</a>
</div>
<div class="topic_two">
<a class="button_topic_two">
🎃 Halloween gift
</a>
</div>
<div class="topic_three">
<a class="button_topic_three">
🎁 Birthday gift
</a>
</div>
</div>
</div>
<div class="chat_input">
<input @bind="inputValue" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for....">
<img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
</div>
</div>
}else{
<div class="new_chat">
<img class="loading" src="/images/loading.svg" alt="Loading chat">
</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);
}
}

120
ShoppingAssistantWebClient.Web/Pages/Index.razor.cs Normal file
View File

@ -0,0 +1,120 @@
using Microsoft.AspNetCore.Components;
using ShoppingAssistantWebClient.Web.Models;
using ShoppingAssistantWebClient.Web.Models.ProductSearch;
using ShoppingAssistantWebClient.Web.Models.Input;
using GraphQL;
using Newtonsoft.Json;
using ShoppingAssistantWebClient.Web.Network;
using System;
using Microsoft.JSInterop;
namespace ShoppingAssistantWebClient.Web.Pages
{
public partial class Index : ComponentBase
{
[Inject]
private ApiClient _apiClient { get; set; }
[Inject]
private NavigationManager Navigation { get; set; }
[Inject]
protected IJSRuntime JSRuntime { get; set; }
private MessageCreateDto messageCreateDto;
private CancellationTokenSource cancelTokenSource;
private string inputValue = "";
public bool isLoading;
private async Task CreateNewChat() {
try
{
if (string.IsNullOrWhiteSpace(inputValue))
{
return;
}
isLoading = true;
StateHasChanged();
messageCreateDto = new MessageCreateDto { Text = inputValue };
var type = selectedChoice;
var firstMessageText = $"What are you looking for?";
var request = new GraphQLRequest
{
Query = @"
mutation StartPersonalWishlist($type: String!, $firstMessageText: String!) {
startPersonalWishlist(dto: { type: $type, firstMessageText: $firstMessageText }) {
id
}
}",
Variables = new
{
type,
firstMessageText
}
};
var response = await _apiClient.QueryAsync(request);
var responseData = response.Data;
var chatId = responseData?.startPersonalWishlist?.id;
string wishlistId1 = chatId;
var text = inputValue;
cancelTokenSource = new CancellationTokenSource();
var cancellationToken = cancelTokenSource.Token;
var serverSentEvent = _apiClient.GetServerSentEventStreamed($"ProductsSearch/search/{chatId}", messageCreateDto, cancellationToken);
await foreach (var sseEvent in serverSentEvent.WithCancellation(cancellationToken))
{
// Handle each ServerSentEvent as needed
Console.WriteLine($"Received SSE Event: {sseEvent.Event}, Data: {sseEvent.Data}");
}
string wishlistId = chatId;
request = new GraphQLRequest
{
Query = @"mutation GenerateNameForPersonalWishlist($wishlistId: String!) {
generateNameForPersonalWishlist(wishlistId: $wishlistId) {
id
name
}
}",
Variables = new
{
wishlistId
}
};
response = await _apiClient.QueryAsync(request);
isLoading = false;
StateHasChanged();
await UpdateSideMenu(wishlistId1);
var url = $"/chat/{chatId}";
Navigation.NavigateTo(url);
}
catch (Exception ex)
{
// Handle exceptions appropriately
Console.WriteLine($"Error in CreateNewChat: {ex.Message}");
}
finally
{
isLoading = false;
cancelTokenSource?.Dispose();
}
}
}
}

196
ShoppingAssistantWebClient.Web/Pages/Index.razor.css Normal file
View File

@ -0,0 +1,196 @@
.right_frame {
position: relative;
border: 0.09em solid;
border-color: #0052CC;
border-radius: 0.6em;
height: 100%;
width: 100%;
}
.button_open_menu {
z-index: 2;
width: 1.43em;
height: 1.23em;
position: absolute;
top: 1.56em;
left: 1.56em;
cursor: pointer;
visibility: hidden;
}
.loading {
margin: 0 auto;
margin-top: 25%;
height: 10em;
width: 10em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.button_open_menu span {
width: 20px;
height: 1.5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #4E4E4E;
}
.button_open_menu span:nth-of-type(2) {
top: calc(50% - 5px);
}
.button_open_menu span:nth-of-type(3) {
top: calc(50% + 5px);
}
.title_one_frame {
padding-top: 1.25em;
color: #0052CC;
font-size: 1.0625em;
text-align: center;
}
.title_two_frame {
padding-top: 2.25em;
padding-bottom: 1.5em;
font-size: 2.5em;
text-align: center;
font-weight: 600;
}
.title_three_frame {
padding-top: 3.75em;
padding-bottom: 2.5em;
color: #202124;
font-size: 1.25em;
text-align: center;
font-weight: 400;
}
.topic {
font-size: 1.125em;
text-align: center;
line-height: 2.1875em;
color: #009FFF;
width: 15.625em;
margin: 0 auto;
}
.topic div {
margin-top: 1.25em;
border: 0.09em solid;
border-color: #009FFF;
border-radius: 0.6em;
justify-content: center;
align-items: center;
cursor: pointer;
}
.topic div a {
color: #009FFF;
text-decoration: none;
}
.switch {
height: 2.8125em;
width: 21.875em;
margin: 0 auto;
border: 0.09em solid;
border-color: #EAEAEA;
border-radius: 0.6em;
text-align: center;
position: relative;
}
.switch_product {
position: absolute;
background-color: #0052CC;
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: white;
}
.switch_gift {
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;
}
.chat_message {
position: relative;
overflow-y: auto;
height: calc(100% - 5.5em);
width: 100%;
}
.chat_input {
background-color: #EAEAEA;
position: absolute;
display: flex;
align-items: center;
bottom: 2em;
margin-left: 25%;
width: 50%;
border-radius: 0.6em;
}
.input_messages {
width: 100%;
height: 2.5em;
font-size: 1.0625em;
background-color: #EAEAEA;
color: #4E4E4E;
border-radius: 0.6em;
border: none;
padding: 0.625em 1.25em;
outline: none;
}
.button_sende {
float: right;
cursor: pointer;
line-height: 2.5em;
margin-right: 0.8em;
width: 1.8em;
height: 1.7em;
}
.new_chat {
padding-top: 0.5em;
position: relative;
height: 100%;
width: 100%;
}
.chat_message::-webkit-scrollbar {
border-radius: 20px;
width: 0.2em;
}
.chat_message::-webkit-scrollbar-thumb {
background-color: #0052CC;
/* Колір позиції покажчика */
border-radius: 10px;
/* Закруглення країв позиції покажчика */
width: 0.2em;
}

2
ShoppingAssistantWebClient.Web/Program.cs
View File

@ -1,5 +1,7 @@
using GraphQL.Client.Http;
using ShoppingAssistantWebClient.Web.Configurations;
using ShoppingAssistantWebClient.Web.Data;
using ShoppingAssistantWebClient.Web.Network;
var builder = WebApplication.CreateBuilder(args);

2
ShoppingAssistantWebClient.Web/Shared/MainLayout.razor
View File

@ -1,6 +1,6 @@
@inherits LayoutComponentBase
@using ShoppingAssistantWebClient.Web.Pages
<PageTitle>ShoppingAssistantWebClient.Web</PageTitle>
<PageTitle>CARTAID</PageTitle>
<head>
<link rel="stylesheet" href="css/MainLayout.css" />
</head>

24
ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css Normal file
View File

@ -0,0 +1,24 @@
.page {
position: relative;
width: 100%;
height: 100vh;
padding: 1.25em;
}
.sidebar-menu {
position: absolute;
width: 20em;
top: 1.25em;
bottom: 1.25em;
margin-right: 1.5em;
transition: 1s;
}
.right-frame {
position: absolute;
right: 1.25em;
left: 23.25em;
top: 1.25em;
bottom: 1.25em;
transition: 1s;
}

134
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
View File

@ -1,7 +1,11 @@
@using Models.GlobalInstances
@using Models.GlobalInstances
@using System.Linq
@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@inject NavigationManager Navigation
<div id="leftframe" class="left_frame">
@inject IJSRuntime JSRuntime;
<div id="leftframe" class="left_frame">
<div class="logo">
<img src="/images/logo.svg" alt="Logo site">
@ -16,7 +20,8 @@
<span></span>
</a>
<div class="elements_wishlisht">
<div class="elements_wishlisht" id="elements_wishlisht" >
<div class="add_chat" @onclick="RedirectToNewChat" >
<div>
@ -27,22 +32,19 @@
<div class="wishlist_names">
@if(Wishlists!=null){
@if(!isLoading){
@foreach (var item in Wishlists)
@foreach (var item in Wishlists)
{
<section class="cont_wishlist">
<div @onclick="() => RedirectToPage(item.Id)" class="wishlist_name" >@item.Name</div>
<img @onclick="() => DeleteWishlist(item.Id)" class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
<img @onclick="() => RedirectToCard(item.Id)" class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
<section class="cont_wishlist @(selectedWishlistId == item.Id ? "selected_wishlist" : "")">
<div class="wishlist_name" @onclick="() => RedirectToPage(item.Id)">@item.Name</div>
<img class="button_delete_chat" @onclick="() => DeleteWishlist(item.Id)" src="/images/icon_delete.svg" alt="Delete wishlist">
<img class="button_open_card" @onclick="() => RedirectToCard(item.Id)" src="/images/icon_open_card.svg" alt="Card open">
</section>
}
}else{
<div>loading ...</div>
}
</div>
</div>
@ -51,15 +53,14 @@
<div class="elements">
<div class="info_user">
<img src="/images/avatar.jpg" alt="Avatar user">
<!-- Change to name -->
<span class="user_name">@GlobalUser.Id</span>
</div>
</div>
</div>
</div>
@ -85,24 +86,99 @@
}
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>
function UpdateMenu(wishlistId)
{
DotNet.invokeMethodAsync('ShoppingAssistantWebClient.Web', 'Update', wishlistId);
}
</script>
@code {
private void RedirectToPage(string itemId) {
var url = $"/chat/{itemId}";
Navigation.NavigateTo(url);
}
private void RedirectToNewChat() {
var url = $"/";
Navigation.NavigateTo(url);
}
private void RedirectToCard(string itemId) {
var url = $"/chat/{itemId}/cart";
Navigation.NavigateTo(url);
}
private void DeleteWishlist(string itemId) {
[Parameter] public string chatId { get; set; }
private string selectedWishlistId;
private static NavMenu _app;
public NavMenu ()
{
_app = this;
}
[JSInvokable]
public static void Update(string wishlistId)
{
_app.LoadMenus(1,200);
_app.selectedWishlistId=wishlistId;
}
private void RedirectToPage(string itemId) {
_app.selectedWishlistId = itemId;
var url = $"/chat/{itemId}";
Navigation.NavigateTo(url);
}
private void RedirectToNewChat() {
var url = $"/";
Navigation.NavigateTo(url);
}
private void RedirectToCard(string itemId) {
var url = $"/chat/{itemId}/cart";
Navigation.NavigateTo(url);
}
private async void DeleteWishlist(string itemId) {
await DeleteWish(itemId);
}
/*
private int savedScrollTop = 0;
private ElementReference wishlishtRef;
private async Task OnScroll()
{
var scrollTop = await JSRuntime.InvokeAsync<int>("getScrollTop", wishlishtRef);
var offsetHeight = await JSRuntime.InvokeAsync<int>("getOffsetHeight", wishlishtRef);
var scrollHeight = await JSRuntime.InvokeAsync<int>("getScrollHeight", wishlishtRef);
if (scrollTop + offsetHeight > scrollHeight - 100)
{
savedScrollTop = scrollTop;
currentPage++;
await LoadMenus(currentPage, pageSize);
await InvokeAsync(() => JSRuntime.InvokeVoidAsync("setScrollTop", wishlishtRef, savedScrollTop));
}
}
*/
}

93
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
View File

@ -2,7 +2,6 @@ using Microsoft.AspNetCore.Components;
using ShoppingAssistantWebClient.Web.Models;
using GraphQL;
using Newtonsoft.Json;
using ShoppingAssistantWebClient.Web.Models;
using ShoppingAssistantWebClient.Web.Network;
namespace ShoppingAssistantWebClient.Web.Shared
@ -10,7 +9,13 @@ namespace ShoppingAssistantWebClient.Web.Shared
public partial class NavMenu : ComponentBase
{
[Inject]
private ApiClient _apiClient { get; set; }
public List<Wishlist> Wishlists { get; set; }
public bool isLoading = true;
public int pageSize { get; set; }
public int currentPage { get; set; }
private readonly ApiClient _apiClient;
@ -24,27 +29,77 @@ namespace ShoppingAssistantWebClient.Web.Shared
}
public async Task OnGetAsync()
{
var request = new GraphQLRequest
{
Query = @"query PersonalWishlistsPage {
personalWishlistsPage(pageNumber: $pageNumber, pageSize: $pageSize) {
items {
pageSize = 200;
currentPage = 1;
Wishlists = new List<Wishlist>();
await LoadMenus(currentPage, pageSize);
}
public async Task LoadMenus(int pageNumber, int pageSize )
{
try{
isLoading = true;
var request = new GraphQLRequest
{
Query = @"query PersonalWishlistsPage( $pageNumber: Int!, $pageSize: Int!) {
personalWishlistsPage(pageNumber: $pageNumber, pageSize: $pageSize) {
items {
id
name
}
}
}",
Variables = new
{
pageNumber,
pageSize,
}
};
var response = await _apiClient.QueryAsync(request);
var responseData = response.Data;
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
Wishlists.Reverse();
isLoading = false;
StateHasChanged();
}catch(Exception ex){
Console.WriteLine($"Error : {ex.Message}");
}
}
protected async Task DeleteWish(string wishlistId)
{
try{
var request = new GraphQLRequest
{
Query = @"mutation DeletePersonalWishlist($wishlistId: String!) {
deletePersonalWishlist(wishlistId: $wishlistId) {
id
name
}
}
}
",
",
Variables = new
{
pageNumber = 1,
pageSize = 10,
}
};
var response = await _apiClient.QueryAsync(request);
var jsonCategoriesResponse = JsonConvert.SerializeObject(response.Data.personalWishlistsPage.items);
this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
Variables = new
{
wishlistId
}
};
var response = await _apiClient.QueryAsync(request);
await LoadMenus(currentPage, pageSize);
var url = $"/";
Navigation.NavigateTo(url);
}catch(Exception ex){
Console.WriteLine($"Error : {ex.Message}");
}
}
}
}
}

123
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
View File

@ -1,11 +1,10 @@
.left_frame {
position: relative;
height: 100%;
width: 100%;
transition: 1s;
transform: translateX(0%);
}
.logo {
height: 5em;
position: relative;
@ -13,33 +12,42 @@
align-items: center;
padding-bottom: 1.5%;
}
.menu {
position: absolute;
width: 100%;
top: 5em;
top: 5em;
bottom: 0;
border: 1.5px solid;
border-color: #0052CC;
border-radius: 0.6em;
padding-top: 1.5%;
}
.elements_wishlisht {
position: absolute;
overflow-y: auto;
top: 2.43em;
width: 100%;
bottom: 4em;
bottom: 3.8em;
padding-left: 1.25em;
padding-right: 1.25em;
padding-bottom: 3.8em;
}
.wishlist_names {
overflow-y: auto;
position: relative;
width: 100%;
height:100%;
}
.info_user {
position: absolute;
display: flex;
align-items: center;
border-radius: 0 0 0.6em 0.6em;
background-color: rgb(255, 255, 255);
height: 4em;
height: 3.6em;
left: 0;
bottom: 0;
width: 100%;
@ -47,6 +55,7 @@
padding-right: 1.25em;
border-top: 1px solid #0165FF;
}
.logo_name {
padding-top: 0.5em;
padding-left: 0.3em;
@ -57,20 +66,25 @@
font-weight: 600;
overflow: hidden;
}
.logo img {
float: left;
height: 3.25em;
width: 3.25em;
}
.wishlist_name {
padding-left: 0.7em;
padding-right: 5em;
width: 10.5em;
white-space: nowrap;
overflow: hidden;
position: absolute;
height: 2.5em;
height: 2.5em;
line-height: 2.5em;
cursor: pointer;
}
.cont_wishlist {
margin-top: 0.4375em;
margin-bottom: 0.4375em;
@ -78,52 +92,109 @@
border-radius: 0.6em;
font-size: 1.1em;
width: 100%;
height:2.5em;
cursor: pointer;
height: 2.5em;
}
.cont_wishlist:hover {
background-color: #e6e6e6;
transition: 0.2s;
}
.cont_wishlist:hover .button_delete_chat{
.cont_wishlist:hover .button_delete_chat {
visibility: visible;
}
.cont_wishlist:hover .button_open_card{
.cont_wishlist:hover .button_open_card {
visibility: visible;
}
.selected_wishlist {
margin-top: 0.4375em;
margin-bottom: 0.4375em;
color: black;
border-radius: 0.6em;
font-size: 1.1em;
width: 100%;
height: 2.5em;
background-color: #e6e6e6;
transition: 0.2s;
}
.sel_del {
visibility: visible;
cursor: pointer;
margin-top: 0.55em;
margin-right: 1em;
float: right;
position: relative;
}
.selected_card{
cursor: pointer;
position: relative;
z-index: 999;
margin-top: 0.55em;
margin-right: 1em;
float: right;
visibility: visible;
height: 1.4em;
width: 1.5em;
}
.button_delete_chat {
margin-top: 0.65em;
cursor: pointer;
margin-top: 0.55em;
margin-right: 1em;
float: right;
position: relative;
visibility: hidden;
height: 1.2em;
width: 1.2em;
height: 1.4em;
width: 1.4em;
}
.button_open_card {
margin-top: 0.65em;
cursor: pointer;
position: relative;
z-index: 999;
margin-top: 0.55em;
margin-right: 1em;
float: right;
visibility: hidden;
height: 1.2em;
width: 1.3em;
height: 1.4em;
width: 1.5em;
}
.elements_wishlisht::-webkit-scrollbar {
background-color: #009FFF;
.wishlist_names::-webkit-scrollbar {
border-radius: 20px;
width: 0.2em;
}
.wishlist_names::-webkit-scrollbar-thumb {
background-color: #0052CC;
/* Колір позиції покажчика */
border-radius: 10px;
/* Закруглення країв позиції покажчика */
width: 0.2em;
}
.add_chat {
margin-bottom: 0.3125em;
background-color: #0165FF;
border-radius: 0.6em;
font-size: 1.2em;
width: 100%;
height:2.5em;
height: 2.5em;
cursor: pointer;
line-height: 2.5em;
}
.add_chat a {
.add_chat div {
justify-content: center;
align-items: center;
border-radius: 0.6em;
@ -131,11 +202,12 @@
text-decoration: none;
color: #FFFFFF;
}
.plus {
position: absolute;
right: 1em;
top: -0.1em;
font-size: 1.9em;
font-size: 1.9em;
}
.user_name {
@ -144,12 +216,14 @@
justify-content: center;
align-items: center;
}
.info_user img {
float: left;
border-radius: 50%;
width: 2.3em;
height: 2.3em;
}
.button_close_menu {
position: relative;
width: 1.43em;
@ -159,6 +233,7 @@
margin-top: 0.5em;
margin-right: 1.30em;
}
.button_close_menu span {
width: 20px;
height: 1.5px;
@ -168,9 +243,11 @@
transform: translate(-50%, -50%);
background-color: #4E4E4E;
}
.button_close_menu span:nth-of-type(2) {
top: calc(50% - 5px);
}
.button_close_menu span:nth-of-type(3) {
top: calc(50% + 5px);
}

16
ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor
View File

@ -1,16 +0,0 @@
<div class="alert alert-secondary mt-4">
<span class="oi oi-pencil me-2" aria-hidden="true"></span>
<strong>@Title</strong>
<span class="text-nowrap">
Please take our
<a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2186158">brief survey</a>
</span>
and tell us what you think.
</div>
@code {
// Demonstrates how a parent component can supply parameters
[Parameter]
public string? Title { get; set; }
}

6
ShoppingAssistantWebClient.Web/appsettings.Development.json
View File

@ -1,3 +1,5 @@
{
"ApiUrl": "https://shopping-assistant-api-dev.azurewebsites.net/"
}
"ApiUrl": "https://shopping-assistant-api-dev.azurewebsites.net/"
}

42
ShoppingAssistantWebClient.Web/wwwroot/images/loading.svg Normal file
View File

@ -0,0 +1,42 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="602.000000pt" height="597.000000pt" viewBox="0 0 602.000000 597.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,597.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M2819 5887 c-104 -30 -199 -113 -247 -215 -22 -48 -27 -71 -27 -142
0 -105 28 -173 105 -254 74 -79 150 -111 260 -111 72 0 94 4 145 28 79 37 156
114 192 191 24 52 28 74 28 146 0 71 -4 94 -27 142 -77 166 -267 261 -429 215z"/>
<path d="M4083 5579 c-203 -64 -333 -300 -279 -509 40 -155 147 -257 308 -295
252 -59 480 80 521 318 28 163 -56 334 -213 435 -110 71 -221 88 -337 51z"/>
<path d="M1493 5496 c-116 -38 -189 -113 -225 -229 -24 -80 -21 -174 7 -245
21 -51 88 -112 164 -149 81 -38 211 -44 296 -13 81 30 165 114 190 191 56 164
-20 351 -172 425 -67 33 -191 43 -260 20z"/>
<path d="M5061 4675 c-366 -103 -489 -487 -241 -758 86 -94 189 -148 315 -166
202 -29 380 72 473 266 36 76 37 81 37 188 0 131 -20 191 -94 288 -115 150
-326 228 -490 182z"/>
<path d="M532 4508 c-51 -17 -124 -89 -157 -155 -26 -50 -30 -69 -30 -138 0
-71 4 -89 33 -147 37 -75 73 -110 151 -146 46 -21 63 -24 130 -20 90 6 152 32
212 90 62 60 83 116 84 218 0 73 -4 92 -27 136 -32 61 -94 119 -157 147 -54
24 -187 32 -239 15z"/>
<path d="M5440 3389 c-145 -25 -278 -125 -344 -261 -94 -190 -59 -406 89 -554
194 -195 490 -191 683 10 66 68 105 136 127 223 83 319 -222 639 -555 582z"/>
<path d="M218 3187 c-132 -37 -217 -162 -206 -301 13 -163 137 -267 303 -254
103 9 187 64 229 151 55 112 41 216 -40 306 -81 90 -185 126 -286 98z"/>
<path d="M5085 2120 c-164 -34 -301 -145 -383 -311 -103 -208 -72 -411 85
-568 101 -101 244 -161 383 -161 228 0 444 155 516 370 27 82 25 225 -4 312
-87 253 -347 409 -597 358z"/>
<path d="M539 1877 c-72 -20 -129 -75 -166 -157 -19 -43 -22 -168 -5 -227 15
-50 82 -122 143 -155 58 -30 186 -33 239 -4 63 33 115 83 145 137 26 47 30 64
30 134 0 63 -5 89 -23 122 -30 57 -86 111 -139 135 -56 25 -164 32 -224 15z"/>
<path d="M1509 870 c-20 -11 -49 -34 -64 -52 -36 -42 -85 -146 -85 -178 0 -78
56 -161 134 -203 63 -33 166 -31 228 5 98 58 144 191 100 290 -25 58 -87 127
-129 145 -47 19 -141 16 -184 -7z"/>
<path d="M2822 537 c-49 -15 -127 -90 -147 -139 -56 -139 19 -302 159 -343 62
-19 90 -19 152 0 140 41 214 197 161 337 -22 57 -100 132 -153 147 -48 13
-128 13 -172 -2z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
ShoppingAssistantWebClient.Web/wwwroot/images/send.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 413 B

3
ShoppingAssistantWebClient.Web/wwwroot/images/send.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 11.0192V0L14 5.50962L0 11.0192ZM1.47368 8.95313L10.2053 5.50962L1.47368 2.06611V4.47656L5.89474 5.50962L1.47368 6.54267V8.95313Z" fill="#4E4E4E" fill-opacity="0.4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 281 B