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-08-08 18:10:25 +03:30
parent 0736632a59
commit f6013e482b
5 changed files with 242 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
Presentation/HushianWebApp/Pages/Chat.razor
View File

@@ -5,11 +5,15 @@
@using Common.Enums
@using HushianWebApp.Components
@using HushianWebApp.Service
@using HushianWebApp.Services
@using Microsoft.AspNetCore.SignalR.Client
@inject ChatService chatService
@inject GroupService groupService
@inject UserService userService
@inject IJSRuntime JS
@inject ToastService toastService
@inject ILocalStorageService localStorageService;
@inject HttpClient _Http;
<ConfirmDialog @ref="dialog" />
<Modal @ref="modal" IsVerticallyCentered="true" IsScrollable="true" />
<PageTitle>گفتمان</PageTitle>
@@ -29,7 +33,7 @@
<div class="sidebar-tabs" id="A2">
<!-- Inbox1 -->
<Button Outline="@isSelectedInbox1" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(1);}" Size=ButtonSize.Small Color="ButtonColor.Warning"
class=@($"tab-button inbox1-button {(isSelectedInbox1 ? "active-tab inbox1-active" : "")}")>
class=@($"tab-button inbox1-button {(isSelectedInbox1 ? "active-tab inbox1-active" : "")}")>
<Icon Name="IconName.Inbox" Class="tab-icon" />
<span class="tab-text">پیام های آمده</span>
<Badge Color="BadgeColor.Warning" Class="tab-badge">@Inbox1Items.Count()</Badge>
@@ -37,7 +41,7 @@
<!-- Inbox2 -->
<Button Outline="@isSelectedInbox2" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(2);}" Size=ButtonSize.Small Color="ButtonColor.Primary"
class=@($"tab-button inbox2-button {(isSelectedInbox2 ? "active-tab inbox2-active" : "")}")>
class=@($"tab-button inbox2-button {(isSelectedInbox2 ? "active-tab inbox2-active" : "")}")>
<Icon Name="IconName.Send" Class="tab-icon" />
<span class="tab-text">پیام های من</span>
<Badge Color="BadgeColor.Warning" Class="tab-badge">@Inbox2Items.Count()</Badge>
@@ -45,7 +49,7 @@
<!-- Inbox3 -->
<Button Outline="@isSelectedInbox3" Type="ButtonType.Link" @onclick="async()=>{await OnclickInbox(3);}" Size=ButtonSize.Small Color="ButtonColor.Danger"
class=@($"tab-button inbox3-button {(isSelectedInbox3 ? "active-tab inbox3-active" : "")}")>
class=@($"tab-button inbox3-button {(isSelectedInbox3 ? "active-tab inbox3-active" : "")}")>
<Icon Name="IconName.Archive" Class="tab-icon" />
<span class="tab-text">پیام های بسته</span>
</Button>
@@ -63,7 +67,8 @@
<div class="item-content">
<div class="item-header">
<strong class="item-name">@item.UserFullName </strong>
@if(!string.IsNullOrEmpty(item.GroupName)){
@if (!string.IsNullOrEmpty(item.GroupName))
{
<div class="mb-3">
<Badge Color="BadgeColor.Info" VisuallyHiddenText="Visually hidden text for Info">@item.GroupName</Badge>
</div>
@@ -156,20 +161,19 @@
@if (ChatCurrent.status == Common.Enums.ConversationStatus.InProgress)
{
<Button Color="ButtonColor.Danger" Size=ButtonSize.ExtraSmall Outline="true" Class="finish-conversation-btn"
@onclick="CloseChat">
@onclick="CloseChat">
<Icon Name="IconName.Escape" /> اتمام گفتگو
</Button>
<Button Color="ButtonColor.Secondary" Size=ButtonSize.ExtraSmall Outline="true" Class="toexper-btn" @onclick="onclickAttachedto">
<Icon Name="IconName.EnvelopeArrowUp"
/> پیوست به...
<Icon Name="IconName.EnvelopeArrowUp" /> پیوست به...
</Button>
}
else if (ChatCurrent.status == Common.Enums.ConversationStatus.Finished
&& (CurrentUser.Role == "Company" || ChatCurrent.ExperID == CurrentUser.ExperID))
{
<Button Color="ButtonColor.Success" Size=ButtonSize.ExtraSmall Outline="true" Class="open-conversation-btn"
@onclick="OpenChat">
@onclick="OpenChat">
<Icon Name="IconName.Escape" /> باز کردن گفتگو
</Button>
@@ -270,23 +274,24 @@
@code {
public Common.Dtos.CurrentUserInfo CurrentUser { get; set; }
Common.Dtos.CurrentUserInfo CurrentUser { get; set; }
List<Read_GroupDto> _Group = new List<Read_GroupDto>();
//-------------------------------------
bool isSelectedInbox1 = false;
public List<ChatItemDto> Inbox1Items { get; set; } = new();
List<ChatItemDto> Inbox1Items { get; set; } = new();
bool isSelectedInbox2 = true;
public List<ChatItemDto> Inbox2Items { get; set; } = new();
List<ChatItemDto> Inbox2Items { get; set; } = new();
bool isSelectedInbox3 = false;
public List<ChatItemDto> Inbox3Items { get; set; } = new();
List<ChatItemDto> Inbox3Items { get; set; } = new();
/////////////
public ChatItemDto? ChatCurrent { get; set; } = null;
public string MsgInput { get; set; }
ChatItemDto? ChatCurrent { get; set; } = null;
string MsgInput { get; set; }
bool chatloading = false;
string SelectedChatUserName = "مهدی ربیع نژاد";
private bool _shouldObserveVisibility = false;
private ConfirmDialog dialog = default!;
private Modal modal = default!;
private HubConnection? hubConnection;
}
@functions {
protected override async Task OnInitializedAsync()
@@ -297,6 +302,39 @@
Inbox2Items = await chatService.MyChatsIsInProgress();
Inbox3Items = await chatService.MyChatsIsFinished();
//-------------hub
var token = await localStorageService.GetItem<string>("U/key");
string AddressHub = _Http.BaseAddress.AbsoluteUri.Replace("api/", "");
hubConnection = new HubConnectionBuilder()
.WithUrl($"{_Http.BaseAddress.AbsoluteUri.Replace("api/", "")}chatNotificationHub", options =>
{
options.AccessTokenProvider = () => Task.FromResult(token);
})
.WithAutomaticReconnect()
.Build();
hubConnection.On<ChatItemResponseDto>("ReceiveNewChatItemFromUser", async (chatitem) =>
{
if (ChatCurrent.ID == chatitem.ChatItemID)
{
ChatCurrent.Responses.Add(chatitem);
StateHasChanged();
await MarkAsRead(chatitem.ID);
// Scroll to target if exists, otherwise scroll to bottom
await JS.InvokeVoidAsync("scrollToTargetOrBottom");
}
});
hubConnection.On<int>("CheckMarkAsRead", async (chatresponseid) =>
{
if (ChatCurrent.Responses.Any(a => a.ID == chatresponseid && !a.IsRead && (a.Type == Common.Enums.ConversationType.EU || a.Type == Common.Enums.ConversationType.CU)))
{ ChatCurrent.Responses.First(a => a.ID == chatresponseid).IsRead = true; StateHasChanged(); }
});
await hubConnection.StartAsync();
//---------end hub
await base.OnInitializedAsync();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -339,12 +377,13 @@
if (!string.IsNullOrEmpty(MsgInput) && ChatCurrent != null)
{
Common.Enums.ConversationType type = CurrentUser.Role == "Company" ? Common.Enums.ConversationType.CU : Common.Enums.ConversationType.EU;
await chatService.ADDChatResponse(ChatCurrent.ID, MsgInput, type);
ChatCurrent?.Responses.Add(new() { text = MsgInput, Type = type });
var geter= await chatService.ADDChatResponse(ChatCurrent.ID, MsgInput, type);
if(geter!=null)
{ChatCurrent?.Responses.Add(geter);
ChatCurrent.LastText = MsgInput;
await Task.Yield();
await JS.InvokeVoidAsync("scrollToBottom", "B1");
MsgInput = string.Empty;
MsgInput = string.Empty;}
}
}
async Task onClickSelectedChat(int InboxID, ChatItemDto chatItem)
@@ -375,7 +414,7 @@
async Task onclickAttachedto()
{
Dictionary<string, object> parameters = new Dictionary<string, object>();
parameters.Add("chatID",ChatCurrent.ID);
parameters.Add("chatID", ChatCurrent.ID);
parameters.Add("OnMultipleOfThree", EventCallback.Factory.Create(this, CallBackAttachedto));
await modal.ShowAsync<AttachedtoComponent>("پیوست کارشناس", parameters: parameters);
@@ -383,12 +422,12 @@
}
async Task CallBackAttachedto()
{
await modal.HideAsync();
await modal.HideAsync();
toastService.Notify(new ToastMessage(ToastType.Success, "کارشناس جدید به این گفتگو پیوست"));
}
async Task OpenChat()
{
if (CurrentUser.Role == "Company" || CurrentUser.Role == "Exper" && ChatCurrent.ExperID==CurrentUser.ExperID)
if (CurrentUser.Role == "Company" || CurrentUser.Role == "Exper" && ChatCurrent.ExperID == CurrentUser.ExperID)
{
if (ChatCurrent.status != Common.Enums.ConversationStatus.Finished) return;
if (await chatService.OpenChat(ChatCurrent.ID))
@@ -396,10 +435,10 @@
ChatCurrent.status = Common.Enums.ConversationStatus.InProgress;
StateHasChanged();
}
else toastService.Notify(new ToastMessage(ToastType.Danger, "تغییر وضعیت گفتگو موفق نبود"));
else toastService.Notify(new ToastMessage(ToastType.Danger, "تغییر وضعیت گفتگو موفق نبود"));
}
else toastService.Notify(new ToastMessage(ToastType.Danger, "دسترسی به این گفتگو ندارید"));
}
async Task CloseChat()
{
@@ -455,20 +494,25 @@
overflow: hidden;
}
.sidebar-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: shimmer 3s infinite;
}
.sidebar-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
animation: shimmer 3s infinite;
}
@@keyframes shimmer {
0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
.header-content {
@@ -509,33 +553,33 @@
overflow: hidden;
}
.tab-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
}
.tab-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
}
.tab-button:hover::before {
left: 100%;
}
.tab-button:hover::before {
left: 100%;
}
.tab-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.2);
border-color: #0d6efd;
}
.tab-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.2);
border-color: #0d6efd;
}
.tab-button.active-tab {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
color: white;
border-color: #0d6efd;
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}
.tab-button.active-tab {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
color: white;
border-color: #0d6efd;
box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}
/* Smaller tab buttons */
.tab-button {
@@ -559,11 +603,11 @@
background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
}
.inbox1-button:hover {
border-color: #e0a800;
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
color: #856404;
}
.inbox1-button:hover {
border-color: #e0a800;
background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
color: #856404;
}
.inbox1-active {
background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
@@ -579,11 +623,11 @@
background: linear-gradient(135deg, #e7f1ff 0%, #cce7ff 100%);
}
.inbox2-button:hover {
border-color: #0b5ed7;
background: linear-gradient(135deg, #cce7ff 0%, #b3d9ff 100%);
color: #0b5ed7;
}
.inbox2-button:hover {
border-color: #0b5ed7;
background: linear-gradient(135deg, #cce7ff 0%, #b3d9ff 100%);
color: #0b5ed7;
}
.inbox2-active {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
@@ -599,11 +643,11 @@
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
}
.inbox3-button:hover {
border-color: #c82333;
background: linear-gradient(135deg, #f5c6cb 0%, #f1b0b7 100%);
color: #721c24;
}
.inbox3-button:hover {
border-color: #c82333;
background: linear-gradient(135deg, #f5c6cb 0%, #f1b0b7 100%);
color: #721c24;
}
.inbox3-active {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
@@ -639,27 +683,27 @@
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.sidebar-chat-list::-webkit-scrollbar {
width: 6px;
}
.sidebar-chat-list::-webkit-scrollbar {
width: 6px;
}
.sidebar-chat-list::-webkit-scrollbar-track {
background: rgba(241, 241, 241, 0.5);
border-radius: 10px;
}
.sidebar-chat-list::-webkit-scrollbar-track {
background: rgba(241, 241, 241, 0.5);
border-radius: 10px;
}
.sidebar-chat-list::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
border-radius: 10px;
transition: all 0.3s ease;
}
.sidebar-chat-list::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
border-radius: 10px;
transition: all 0.3s ease;
}
.sidebar-chat-list::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #0b5ed7 0%, #0a4b9e 100%);
}
.sidebar-chat-list::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #0b5ed7 0%, #0a4b9e 100%);
}
.chat-list-item {
height:75px;
height: 75px;
display: flex;
align-items: center;
padding: 1rem;
@@ -674,26 +718,26 @@
overflow: hidden;
}
.chat-list-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.1), transparent);
transition: left 0.5s ease;
}
.chat-list-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(13, 110, 253, 0.1), transparent);
transition: left 0.5s ease;
}
.chat-list-item:hover::before {
left: 100%;
}
.chat-list-item:hover::before {
left: 100%;
}
.chat-list-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.15);
border-color: #0d6efd;
}
.chat-list-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.15);
border-color: #0d6efd;
}
.item-avatar {
width: 45px;
@@ -776,6 +820,7 @@
transform: scale(1);
box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
@@ -1015,7 +1060,6 @@
/* Empty state styling */
.chat-area-container .d-flex.justify-content-center {
border-radius: 15px;
padding: 2rem;
margin: 1rem;
@@ -1175,29 +1219,35 @@
animation: warningGlow 3s ease-in-out infinite;
}
.warning-note::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
animation: warningShimmer 4s infinite;
}
.warning-note::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 193, 7, 0.1), transparent);
animation: warningShimmer 4s infinite;
}
@@keyframes warningGlow {
0%, 100% {
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
}
50% {
box-shadow: 0 6px 16px rgba(255, 193, 7, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
}
}
@@keyframes warningShimmer {
0% { left: -100%; }
100% { left: 100%; }
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.warning-icon {
@@ -1218,6 +1268,7 @@
transform: scale(1);
box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 6px 16px rgba(255, 193, 7, 0.6);
@@ -1251,9 +1302,9 @@
transition: all 0.3s ease;
}
.warning-note:hover .warning-icon {
animation: warningPulse 1s ease-in-out infinite;
}
.warning-note:hover .warning-icon {
animation: warningPulse 1s ease-in-out infinite;
}
/* Enhanced button styling */
.finish-conversation-btn {
@@ -1291,6 +1342,7 @@
background-color: #23caba;
color: white;
}
.toexper-btn {
border-radius: 20px;
font-weight: 600;
@@ -1345,7 +1397,7 @@
const targetRect = targetElement.getBoundingClientRect();
const containerRect = chatContainer.getBoundingClientRect();
const relativeTop = targetRect.top - containerRect.top;
// Scroll to show the target element with some padding
const scrollPosition = chatContainer.scrollTop + relativeTop - 100; // 100px padding
chatContainer.scrollTo({