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

Create connection to api

Browse Source
This commit is contained in:
––AsTroLog 2023-11-05 16:18:31 +00:00
parent f8a32070c5
commit 32764e3040
8 changed files with 203 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -23,25 +23,26 @@
<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>
@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>
@ -71,9 +72,9 @@
<div class="chat_input">
<input class="input_messages" type="text" id="chatInput"
<input @bind="inputValue" @onkeydown="Enter" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for....">
<img class="button_sende" src="/images/send.svg" alt="Send message">
<img @onclick="AddNewMessage" class="button_sende" src="/images/send.svg" alt="Send message">
</div>
</div>
@ -89,4 +90,18 @@
@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();
}
}
}

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

@ -9,40 +9,91 @@ namespace ShoppingAssistantWebClient.Web.Pages;
public partial class Chat : ComponentBase
{
[Inject]
private ApiClient _apiClient { get; set; }
[Inject]
private ApiClient _apiClient { get; set; }
protected override async Task OnInitializedAsync()
public List<Messages> Messages { get; set; }
public bool isLoading = true;
private string inputValue = "";
protected override async Task OnInitializedAsync()
{
await LoadMenus();
await LoadMessages();
}
private async Task LoadMenus()
private async Task LoadMessages()
{
var pageNumber = 1;
isLoading = true;
int pageNumber = 1;
string wishlistId = chatId;
var request = new GraphQLRequest
{
Query = @"mutation StartPersonalWishlist {
startPersonalWishlist(dto: { type: product, firstMessageText: hello }) {
id
name
type
createdById
}
}",
Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize)
{
items {
id
text
role
createdById
}
}
}",
Variables = new
{
pageNumber = pageNumber,
pageSize = 12,
wishlistId,
pageNumber,
pageSize = 20
}
};
try{
var response = await _apiClient.QueryAsync(request);
var responseData = response.Data;
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.messagesPageFromPersonalWishlist.items);
this.Messages = JsonConvert.DeserializeObject<List<Messages>>(jsonCategoriesResponse);
Messages.Reverse();
isLoading = false;
}catch{
}
}
private async Task AddNewMessage()
{
isLoading = true;
var pageNumber = 1;
var wishlistId = chatId;
var text = inputValue;
inputValue="";
var request = new GraphQLRequest
{
Query = @"mutation AddMessageToPersonalWishlist($wishlistId: String!, $text: String!) {
addMessageToPersonalWishlist(wishlistId: $wishlistId, dto: { text: $text }) {
id
text
role
createdById
}
}
",
Variables = new
{
wishlistId,
text
}
};
var response = await _apiClient.QueryAsync(request);
var response = await _apiClient.QueryAsync(request);
await LoadMessages();
}
}

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

@ -56,6 +56,7 @@
}
.possible_options {
visibility: hidden;
position: absolute;
bottom: 5.5em;
margin-left: 25%;

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

@ -19,10 +19,10 @@
<div class="title_two_frame">What you're looking for</div>
<div class="switch">
<div class="switch_product" id="choose_product">
<div @onclick="Сhoose_product"class="switch_product" id="choose_product">
Product
</div>
<div class="switch_gift" id="choose_gift">
<div @onclick="Сhoose_gift" class="switch_gift" id="choose_gift">
Gift
</div>
</div>
@ -52,9 +52,9 @@
</div>
<div class="chat_input">
<input class="input_messages" type="text" id="chatInput"
<input @bind="inputValue" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for....">
<img class="button_sende" src="/images/send.svg" alt="Send message">
<img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
</div>
</div>
@ -68,12 +68,15 @@
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() {
@ -81,6 +84,8 @@
choose_gift.style.backgroundColor = "transparent";
switchProd.style.color = "white";
switchGi.style.color = "#202124";
choose = "Product";
}
document.getElementById('choose_gift').addEventListener('click', switchGift);
@ -88,3 +93,13 @@
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";
}
}

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

@ -0,0 +1,57 @@
using Microsoft.AspNetCore.Components;
using ShoppingAssistantWebClient.Web.Models;
using GraphQL;
using Newtonsoft.Json;
using ShoppingAssistantWebClient.Web.Network;
namespace ShoppingAssistantWebClient.Web.Pages
{
public partial class Index : ComponentBase
{
[Inject]
private ApiClient _apiClient { get; set; }
[Inject]
private NavigationManager Navigation { get; set; }
private string inputValue = "";
public bool isLoading = true;
private async Task CreateNewChat() {
if(inputValue!=""){
var type = selectedChoice;
var firstMessageText= inputValue;
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 chat_id = responseData.startPersonalWishlist.id;
var url = $"/chat/{chat_id}";
Navigation.NavigateTo(url);
}
}
}
}

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

@ -3,7 +3,6 @@
<div id="leftframe" class="left_frame">
<div class="logo">
<img src="/images/logo.svg" alt="Logo site">
<span class="logo_name">CARTAID</span>
@ -39,11 +38,8 @@
</section>
}
}else{
<div>loading ...</div>
}
</div>
</div>
@ -58,10 +54,8 @@
</div>
</div>
</div>
@ -85,20 +79,12 @@
right_frame.style.left = '23.25em';
}
}
document.getElementById('button_close').addEventListener('click', changetyle);
</script>
@code {
private void RedirectToPage(string itemId) {
var url = $"/chat/{itemId}";
Navigation.NavigateTo(url);
@ -117,4 +103,9 @@
}
public void UpdateSideMenu()
{
StateHasChanged();
}
}

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

@ -11,23 +11,14 @@ namespace ShoppingAssistantWebClient.Web.Shared
[Inject]
private ApiClient _apiClient { get; set; }
//public string jwt;
public List<Wishlist> Wishlists { get; set; }
public bool isLoading = true;
protected override async Task OnInitializedAsync()
{
//jwt = _apiClient.JwtToken;
await LoadMenus();
}
private async Task LoadMenus()
{
isLoading = true;
var pageNumber = 1;
var request = new GraphQLRequest
@ -53,7 +44,6 @@ namespace ShoppingAssistantWebClient.Web.Shared
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
isLoading = false;
}
protected async Task DeleteWish(string wishlistId)
@ -74,7 +64,7 @@ namespace ShoppingAssistantWebClient.Web.Shared
};
var response = await _apiClient.QueryAsync(request);
var responseData = response.Data;
await LoadMenus();
}
}