mmr/Hushian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ا

Browse Source
This commit is contained in:
mmrbnjd
2025-07-31 01:15:49 +03:30
parent 39d2200ad9
commit 5eb98fe7ad
1 changed files with 481 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

523
Presentation/HushianWebApp/Pages/FromUserSide/UserCP.razor
View File

@@ -11,6 +11,8 @@
@inject CompanyService companyService
@inject UserService userService
@inject GroupService groupService
@inject ChatService chatService
@inject IJSRuntime JS
@layout UserPanelLayout
<div class="container-fluid">
<div class="row" style="height:85vh">
@@ -23,23 +25,21 @@
@if (LastOpenChat != null)
{
<p type="text" class="form-control fw-bold text-primary" style="border:none;align-self: center;" aria-describedby="basic-addon1">@ExperYou</p>
<span class="input-group-text-chat" id="basic-addon1">
@if (LastOpenChat.status == Common.Enums.ConversationStatus.InProgress)
{
<Button Color="ButtonColor.Danger" Size=ButtonSize.ExtraSmall Outline="true">
<Icon Name="IconName.Escape" /> اتمام گفتگو
</Button>
}
</span>
}
<div class="ms-auto">
<Button Color="ButtonColor.Secondary" Size=ButtonSize.Small Outline="true" @onclick="Logout">
<Icon Name="IconName.BoxArrowRight" /> خروج
<div class="d-flex gap-2 ms-auto">
@if (LastOpenChat != null && LastOpenChat.status == Common.Enums.ConversationStatus.InProgress)
{
<Button Color="ButtonColor.Danger" Size=ButtonSize.Small Outline="true" Class="finish-conversation-btn">
<Icon Name="IconName.Escape" Class="me-1" /> اتمام گفتگو
</Button>
}
<Button Color="ButtonColor.Secondary" Size=ButtonSize.Small Outline="true" @onclick="Logout" Class="logout-btn">
<Icon Name="IconName.BoxArrowRight" Class="me-1" /> خروج
</Button>
</div>
</div>
<!-- B1: Chat area -->
<div class="flex-fill border p-2 overflow-auto" id="B1" style="height: 300px; overflow-y: auto;">
<div class="flex-fill chat-area-container" id="B1">
@if (LastOpenChat != null && LastOpenChat.Responses != null)
{
<div class="chat-container p-3">
@@ -51,17 +51,19 @@
@if (!target && ((!msg.IsRead && msg.Type != Common.Enums.ConversationType.UE) || LastOpenChat.Responses.Last() == msg))
{
target = true;
<div id="target" style="text-align: center;">
<div id="target" class="chat-separator">
@if (!msg.IsRead && msg.Type != Common.Enums.ConversationType.UE)
{
<p>ـــــــــــــــــــــــــ</p>
<div class="separator-line new-message">
<span class="separator-text">پیام جدید</span>
</div>
}
</div>
}
<div class="d-flex mb-2 @(msg.Type==Common.Enums.ConversationType.UE ? "justify-content-end" : "justify-content-start")">
<div class="chat-bubble @(msg.Type==Common.Enums.ConversationType.UE ? "chat-mine": "chat-other")" data-id="@msg.ID"> @msg.text </div>
@if (msg.Type == Common.Enums.ConversationType.EU)
<div class="d-flex mb-2 @(msg.Type!=Common.Enums.ConversationType.UE ? "justify-content-end" : "justify-content-start")">
<div class="chat-bubble @(msg.Type!=Common.Enums.ConversationType.UE ? "chat-mine": "chat-other")" data-id="@msg.ID"> @msg.text </div>
@if (msg.Type == Common.Enums.ConversationType.UE)
{
if (msg.IsRead)
{
@@ -97,12 +99,13 @@
@if (LastOpenChat != null && LastOpenChat.status != Common.Enums.ConversationStatus.Finished && LastOpenChat.Responses != null)
{
<!-- B2: Message input -->
<div class="border m-2 p-2 rounded d-flex align-items-center" id="B2">
<input type="text" @bind-value="MsgInput" class="form-control" style="margin-left:10px" placeholder="پیام خود را بنویسید..." />
<Button Color="ButtonColor.Dark" Outline="true" @onclick="OnClickSendMsg"><Icon Name="IconName.AppIndicator" /> </Button>
<div class="message-input-container" id="B2">
<div class="input-wrapper">
<input type="text" @bind-value="MsgInput" class="message-input" placeholder="پیام خود را بنویسید..." />
<Button Color="ButtonColor.Primary" Size=ButtonSize.Small @onclick="OnClickSendMsg" Class="send-btn">
<Icon Name="IconName.Send" />
</Button>
</div>
</div>
}
@@ -134,6 +137,7 @@
</div>
@code {
[Parameter] public int CompanyID { get; set; }
private bool _shouldObserveVisibility = false;
ReadANDUpdate_CompanyDto? CompanyInfo = new();
Common.Dtos.CurrentUserInfo CurrentUser = new();
@@ -162,15 +166,24 @@
{
if (!string.IsNullOrEmpty(MsgInput) && LastOpenChat != null)
{
// Common.Enums.ConversationType type = CurrentUser.Role == "Company" ? Common.Enums.ConversationType.CU : Common.Enums.ConversationType.EU;
// await chatService.ADDChatResponse(LastOpenChat.ID, MsgInput, type);
// LastOpenChat?.Responses.Add(new() { text = MsgInput, Type = type });
// LastOpenChat.LastText = MsgInput;
// await Task.Yield();
// await JS.InvokeVoidAsync("scrollToBottom", "B1");
Common.Enums.ConversationType type = Common.Enums.ConversationType.UE;
var model= await chatService.ADDChatResponse(LastOpenChat.ID, MsgInput, type);
LastOpenChat?.Responses.Add(model);
LastOpenChat.LastText = MsgInput;
await Task.Yield();
await JS.InvokeVoidAsync("scrollToBottom", "B1");
MsgInput = string.Empty;
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (_shouldObserveVisibility)
{
_shouldObserveVisibility = false;
await JS.InvokeVoidAsync("observeVisibility", DotNetObjectReference.Create(this));
await JS.InvokeVoidAsync("scrollToTarget");
}
}
protected override async Task OnInitializedAsync()
{
await IsOnline();
@@ -206,23 +219,41 @@
async Task Afterlogin()
{
IsLogin = true;
CurrentUser =await userService.GetCurrentUserInfo();
CurrentUser = await userService.GetCurrentUserInfo();
await IsCompany();
}
async Task IsCompany()
{
CompanyInfo = await companyService.GetCompany(CompanyID);
if (CompanyInfo!=null)
CompanyGroups = await groupService.GetGroupsCompany(CompanyID);
if (CompanyInfo != null)
CompanyGroups = await groupService.GetGroupsCompany(CompanyID);
await IsLastChat();
}
async Task IsLastChat()
{
if (CompanyInfo != null)
{
LastOpenChat = await ChatService.GetLastOpenChatInCompany(CompanyID);
StateHasChanged();
if (LastOpenChat != null)
{
_shouldObserveVisibility = true;
StateHasChanged();
}
}
}
[JSInvokable]
public async Task MarkAsRead(int id)
{
var msg = LastOpenChat.Responses.FirstOrDefault(m => m.ID == id);
if (msg != null && !msg.IsRead && msg.Type != Common.Enums.ConversationType.UE)
{
msg.IsRead = true;
await chatService.MarkAsReadChatItemAsync(id);
}
StateHasChanged();
await Task.CompletedTask;
}
async Task Logout()
{
await baseController.RemoveToken();
@@ -276,15 +307,15 @@
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}
.login-container h4 {
font-weight: 600;
color: #495057;
}
.login-container h4 {
font-weight: 600;
color: #495057;
}
.login-container p {
font-size: 0.875rem;
line-height: 1.4;
}
.login-container p {
font-size: 0.875rem;
line-height: 1.4;
}
/* Improve spacing in the main container */
.container-fluid {
@@ -309,4 +340,412 @@
background-color: #f8f9fa;
}
/* Enhanced button styling */
.finish-conversation-btn {
border-radius: 20px;
font-weight: 600;
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
transition: all 0.3s ease;
border-width: 2px;
box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
}
.finish-conversation-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
border-color: #dc3545;
background-color: #dc3545;
color: white;
}
.logout-btn {
border-radius: 20px;
font-weight: 600;
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
transition: all 0.3s ease;
border-width: 2px;
box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.logout-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
border-color: #6c757d;
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
color: white;
}
/* Improved header layout */
.input-group {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 1px solid #e9ecef;
border-radius: 15px;
padding: 0.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.input-group p {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Enhanced chat area styling */
.chat-area-container {
height: 400px;
overflow-y: auto;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 2px solid #e9ecef;
border-radius: 20px;
padding: 1.5rem;
margin: 1rem 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
position: relative;
backdrop-filter: blur(10px);
}
.chat-area-container::-webkit-scrollbar {
width: 8px;
}
.chat-area-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.chat-area-container::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
border-radius: 10px;
transition: all 0.3s ease;
}
.chat-area-container::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #0b5ed7 0%, #0a4b9e 100%);
}
.chat-container {
background: transparent;
border-radius: 15px;
padding: 0;
}
.chat-container p {
color: #6c757d;
font-size: 0.875rem;
margin: 0.5rem 0;
text-align: center;
font-weight: 500;
}
/* Enhanced chat bubble styling */
.chat-bubble {
padding: 0.75rem 1rem;
border-radius: 18px;
max-width: 75%;
word-wrap: break-word;
white-space: pre-wrap;
font-size: 0.95rem;
line-height: 1.4;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chat-mine {
background: linear-gradient(135deg, #005eff 0%, #267fff 100%);
color: white;
border-top-left-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 94, 255, 0.3);
}
.chat-mine:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 94, 255, 0.4);
}
.chat-other {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
color: #333;
border-top-right-radius: 4px;
border: 1px solid #e9ecef;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.chat-other:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.chat-ai {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
color: #495057;
border-top-right-radius: 4px;
border: 1px solid #dee2e6;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Message status indicators */
.chat-bubble + i {
margin-left: 0.5rem;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.chat-bubble + i:hover {
opacity: 1;
}
/* Empty state styling */
.chat-area-container .d-flex.justify-content-center {
background: linear-gradient(135deg, rgba(13, 110, 253, 0.05) 0%, rgba(13, 110, 253, 0.02) 100%);
border-radius: 15px;
padding: 2rem;
margin: 1rem;
}
.chat-area-container .d-flex.justify-content-center p {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.75rem;
font-weight: 800;
text-shadow: none;
margin-top: 1rem;
}
/* Enhanced message input styling */
.message-input-container {
margin: 0.5rem 0;
padding: 0.5rem;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid #e9ecef;
border-radius: 25px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
transition: all 0.3s ease;
}
.message-input-container:hover {
border-color: #0d6efd;
box-shadow: 0 6px 12px rgba(13, 110, 253, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.message-input-container:focus-within {
border-color: #0d6efd;
box-shadow: 0 8px 16px rgba(13, 110, 253, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
transform: translateY(-1px);
}
.input-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
}
.message-input {
flex: 1;
border: none;
background: transparent;
padding: 0.5rem 0.75rem;
font-size: 0.95rem;
color: #495057;
outline: none;
border-radius: 20px;
transition: all 0.3s ease;
}
.message-input::placeholder {
color: #adb5bd;
font-weight: 400;
transition: color 0.3s ease;
}
.message-input:focus::placeholder {
color: #6c757d;
}
.message-input:focus {
background: rgba(13, 110, 253, 0.05);
}
.send-btn {
border-radius: 50%;
width: 38px;
height: 38px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
border: none;
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
transition: all 0.3s ease;
color: white;
}
.send-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
background: linear-gradient(135deg, #0b5ed7 0%, #0a4b9e 100%);
}
.send-btn:active {
transform: translateY(0) scale(0.95);
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}
.send-btn i {
font-size: 1.1rem;
transition: transform 0.3s ease;
}
.send-btn:hover i {
transform: scale(1.1);
}
/* Beautiful chat separator styling */
.chat-separator {
text-align: center;
margin: 1.5rem 0;
position: relative;
}
.separator-line {
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 0 1rem;
}
.separator-line::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(13, 110, 253, 0.3) 20%, rgba(13, 110, 253, 0.6) 50%, rgba(13, 110, 253, 0.3) 80%, transparent 100%);
transform: translateY(-50%);
z-index: 1;
}
.separator-text {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
color: white;
padding: 0.25rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
position: relative;
z-index: 2;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
animation: separatorPulse 2s ease-in-out infinite;
}
@@keyframes separatorPulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
}
}
.separator-text::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
border-radius: 20px;
z-index: -1;
opacity: 0.3;
filter: blur(4px);
}
/* Hover effect for separator */
.separator-line:hover .separator-text {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.5);
transition: all 0.3s ease;
}
/* Alternative separator style for different themes */
.separator-line.alternative::before {
background: linear-gradient(90deg, transparent 0%, rgba(220, 53, 69, 0.3) 20%, rgba(220, 53, 69, 0.6) 50%, rgba(220, 53, 69, 0.3) 80%, transparent 100%);
}
.separator-line.alternative .separator-text {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}
.separator-line.alternative .separator-text::before {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}
/* New message separator with different color scheme */
.separator-line.new-message::before {
background: linear-gradient(90deg, transparent 0%, rgba(255, 193, 7, 0.3) 20%, rgba(255, 193, 7, 0.6) 50%, rgba(255, 193, 7, 0.3) 80%, transparent 100%);
}
.separator-line.new-message .separator-text {
background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
color: #212529;
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.separator-line.new-message .separator-text::before {
background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
}
@@keyframes newMessagePulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}
}
.separator-line.new-message .separator-text {
animation: newMessagePulse 2s ease-in-out infinite;
}
.separator-line.new-message:hover .separator-text {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(255, 193, 7, 0.5);
background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%);
}
</style>
<script>
window.scrollToBottom = (elementId) => {
const el = document.getElementById(elementId);
if (el) {
el.scrollTop = el.scrollHeight;
}
};
</script>