|
|
|
@@ -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({
|
|
|
|
|