Skip to content

Commit

Permalink
chatbox fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spylak
Spylak committed Jul 26, 2023
1 parent 20f391b commit 191fc89
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 53 deletions.
87 changes: 51 additions & 36 deletions BlazorWebCV/Components/Chat.razor
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,30 @@
<MudItem Style="padding:0">
<div Style="min-height: 100px; max-height: 300px;overflow-y: scroll;overflow-x: hidden; display: flex;flex-direction: column-reverse;">
<MudGrid >
@foreach (var msg in Messages)
<div Style="padding:0">
<div Style="height: 300px;overflow-y: scroll;overflow-x: hidden; display: flex;flex-direction: column-reverse;">
@foreach (var msg in Messages
.OrderBy(item => item.Order).Reverse())
{
if (msg.Split("&&")[0] == "robot")
if (msg.Message.Split("&&")[0] == "robot")
{
<MudHidden Invert="true" Breakpoint="Breakpoint.SmAndUp">
<MudItem Style="padding-left: 18px" sm="2">
<MudAvatar Image="images/avatarme.png"/>
<div class="chat friend">
<MudItem xs="2">
<MudAvatar Style="margin: 15px" Image="images/avatarme.png"/>
</MudItem>
</MudHidden>
<MudItem xs="12" sm="10">
<MudTextField T="string" Text="@msg.Split("&&")[1]" Label="Bot"
Variant="Variant.Filled"
DisableUnderLine="true"
ReadOnly="true"
Lines=5/>
</MudItem>
<MudItem xs="10">
<MudText Class="chat-message">@msg.Message.Split("&&")[1]</MudText>
</MudItem>
</div>
}
else
{
<MudItem xs="12" sm="10">
<MudTextField T="string" Text="@msg.Split("&&")[1]"
Label="You"
Variant="Variant.Filled"
DisableUnderLine="true"
Style="background-color: #a5a2a2"
ReadOnly="true"
Lines="2"/>
</MudItem>
<MudHidden Invert="true" Breakpoint="Breakpoint.SmAndUp">
<MudItem Style="padding-left: 0" sm="2">
<MudAvatar Image="images/unknown.png"/>
</MudItem>
</MudHidden>
<div class="chat self">
<p class="chat-message">@msg.Message.Split("&&")[1]</p>
</div>
}
}
</MudGrid>
</div>
<MudItem xs="12">
<div>
<EditForm Model="@input" OnSubmit="Send">
<MudGrid>
<MudGrid Style="align-items: center">
<MudItem xs="10">
<div style="display: flex">
<MudIcon Icon="@Icons.Filled.Info"
Expand All @@ -51,7 +35,7 @@
Style="margin-left: 10px"/>
</div>
</MudItem>
<MudItem xs="2">
<MudItem xs="2" Style="padding-left: 0">
<MudFab Icon="@Icons.Filled.Send"
IconColor="Color.Tertiary"
Size="Size.Small"
Expand All @@ -60,8 +44,39 @@
</MudItem>
</MudGrid>
</EditForm>
</MudItem>
</MudItem>
</div>
</div>
<style>
.chat {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
margin-bottom: 10px;
}
.chat .chat-message {
background: #f4f4f4;
padding: 15px;
border-radius: 10px;
color: #333;
font-size: 18px;
line-height: 1.3;
position: relative;
margin: 15px;
}
.chat.self {
justify-content: flex-end;
}
.chat.self .chat-message {
background: gray;
color: #fff;
order: 1;
}
</style>

@code {

Expand Down
41 changes: 33 additions & 8 deletions BlazorWebCV/Components/Chat.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using BlazorWebCV.Models;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;

namespace BlazorWebCV.Components;

public partial class Chat
{
[Parameter] public List<string> Messages { get; set; }
[Parameter] public EventCallback<List<string>> MessagesChanged { get; set; }
[Parameter] public List<ChatMessage> Messages { get; set; }
[Parameter] public EventCallback<List<ChatMessage>> MessagesChanged { get; set; }
private class Input
{
public string Value { get; set; }
Expand Down Expand Up @@ -44,31 +45,55 @@ protected override void OnInitialized()
}
private async Task Help()
{
Messages.Add($"robot&&Available commands: {commands}");
Messages.Add(new ChatMessage()
{
Message = $"robot&&Available commands: {commands}",
Order = Messages.Count+1
});
}

private async Task Send(EditContext context)
{
if (input.Value is not null)
{
Messages.Add($"user&&{input.Value}");
Messages.Add(new ChatMessage()
{
Message = $"user&&{input.Value}",
Order = Messages.Count+1
});
var value = input.Value.ToLower();
if (AutomatedAnswers.Keys.ToList().Contains(value))
{
Messages.Add($"robot&&{AutomatedAnswers[value]}");
Messages.Add(new ChatMessage()
{
Message = $"robot&&{AutomatedAnswers[value]}",
Order = Messages.Count+1
});
}
else if (value=="help")
{
Messages.Add($"robot&&{commands}");
Messages.Add(new ChatMessage()
{
Message = $"robot&&{commands}",
Order = Messages.Count+1
});
}
else
{
Messages.Add($"robot&&I don't recognize this command. Available commands: {commands}");
Messages.Add(new ChatMessage()
{
Message = $"robot&&I don't recognize this command. Available commands: {commands}",
Order = Messages.Count+1
});
}
}
else
{
Messages.Add($"robot&&No command was given. Available commands: {commands}");
Messages.Add(new ChatMessage()
{
Message = $"robot&&No command was given. Available commands: {commands}",
Order = Messages.Count+1
});
}
await Task.Yield();
input = new Input();
Expand Down
7 changes: 7 additions & 0 deletions BlazorWebCV/Models/ChatMessage.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
namespace BlazorWebCV.Models;

public class ChatMessage
{
public int Order { get; set; }
public string Message { get; set; }
}
12 changes: 7 additions & 5 deletions BlazorWebCV/Shared/MainLayout.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,27 +27,29 @@
</CascadingValue>
</MudDrawer>
<MudMainContent Style="overflow: hidden">
<MudCard Elevation="5" Style="@($"position: fixed;top:{(CurrentBreakPoint.Equals(Breakpoint.Xs) ? "15vh" : "25vh")};z-index: 9999;height: 450px;width: 280px;visibility: {visibility}")">
<MudCard Elevation="5" Style="@($"position: fixed;bottom:10vh;z-index: 9999;height: 450px;width: 280px;visibility: {visibility}")">
<MudCardHeader>
<CardHeaderContent>
<MudText Typo="Typo.h6">Chat</MudText>
</CardHeaderContent>
<CardHeaderActions>
<MudIconButton Icon="@Icons.Material.Filled.Minimize"
@onclick="@(() => IsChatOpen = !IsChatOpen)"
Size="Size.Small"
Color="Color.Default"/>
</CardHeaderActions>
</MudCardHeader>
<MudCardContent>
<MudCardContent Style="padding: 0">
<Chat @bind-Messages="ChatMessagesContainer.ChatMessages"></Chat>
</MudCardContent>
</MudCard>
<MudAvatar Style="@($"position: fixed;top:{(CurrentBreakPoint.Equals(Breakpoint.Xs) ? "80vh" : "90vh")};z-index: 9999;border: none;cursor: pointer")"
<MudAvatar Style="position: fixed;bottom:5vh;z-index: 9999;border: none;cursor: pointer"
@onclick="@(() => IsChatOpen = !IsChatOpen)"
Elevation="5"
Color="Color.Dark"
Size="Size.Large"
Variant="Variant.Outlined">
<MudIcon Color="MudBlazor.Color.Default" Icon="@Icons.Material.Filled.Message" Size="Size.Large"/>
Variant="Variant.Filled">
<MudIcon Color="MudBlazor.Color.Tertiary" Icon="@Icons.Material.Filled.Message" Size="Size.Large"/>
</MudAvatar>
<CascadingValue Value="@theme" Name="theme">
@Body
Expand Down
13 changes: 9 additions & 4 deletions BlazorWebCV/State/ChatMessagesContainer.cs
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
using System.Collections.Generic;
using BlazorWebCV.Models;

namespace BlazorWebCV.State;

public class ChatMessagesContainer
{
public List<string> ChatMessages { get; set; } = new List<string>()
public List<ChatMessage> ChatMessages { get; set; } = new List<ChatMessage>()
{
"robot&&Greetings, welcome to my website!\n" +
"Feel free to take a look around.\n" +
"Type Help for available commands."
new ChatMessage()
{
Order = 0,
Message = "robot&&Greetings, welcome to my website!\n" +
"Feel free to take a look around.\n" +
"Type Help for available commands."
}
};
}

0 comments on commit 191fc89

Please sign in to comment.