...

Presentation/HushianWebApp/Pages/Chat.razor

@@ -127,10 +127,10 @@
                 @if (ChatCurrent != null)
                 {
                     <p type="text" class="form-control fw-bold text-primary" style="border:none;align-self: center;" aria-describedby="basic-addon1">@SelectedChatUserName</p>
-                    <span class="input-group-text-chat" id="basic-addon1">
+                      <div class="d-flex gap-2 ms-auto">
                         @if (ChatCurrent.status == Common.Enums.ConversationStatus.InProgress)
                         {
-                            <Button Color="ButtonColor.Danger" Size=ButtonSize.ExtraSmall Outline="true"
+                            <Button Color="ButtonColor.Danger" Size=ButtonSize.ExtraSmall Outline="true" Class="finish-conversation-btn"
                             @onclick="async()=>
                             {
                                 if(await chatService.ChatIsFinish(ChatCurrent.ID))
@@ -139,25 +139,24 @@
                                 <Icon Name="IconName.Escape" /> اتمام گفتگو
                             </Button>
 
-                            <Button Color="ButtonColor.Secondary" Size=ButtonSize.ExtraSmall Outline="true"
+                            <Button Color="ButtonColor.Secondary" Size=ButtonSize.ExtraSmall Outline="true" Class="toexper-btn">
-                            Class="m-3">
                                 <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">
+                            <Button Color="ButtonColor.Success" Size=ButtonSize.ExtraSmall Outline="true" Class="finish-conversation-btn">
 
                                 <Icon Name="IconName.Escape" /> باز کردن گفتگو
                             </Button>
                         }
-                    </span>
+                    </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 (ChatCurrent != null && ChatCurrent.Responses != null)
                 {
                     <div class="chat-container p-3">
@@ -169,17 +168,19 @@
                             @if (!target && ((!msg.IsRead && msg.Type == Common.Enums.ConversationType.UE) || ChatCurrent.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)
+                                @if (msg.Type != Common.Enums.ConversationType.UE)
                                 {
                                     if (msg.IsRead)
                                     {
@@ -215,12 +216,13 @@
             @if (ChatCurrent != null && ChatCurrent.status != Common.Enums.ConversationStatus.Finished && ChatCurrent.Responses != null)
             {
                 <!-- B2: Message input -->
-                <div class="border m-2 p-2 rounded d-flex align-items-center" id="B2">
+                <div class="message-input-container" id="B2">
-                    <input type="text" @bind-value="MsgInput" class="form-control" style="margin-left:10px" placeholder="پیام خود را بنویسید..." />
+                    <div class="input-wrapper">
-
+                        <input type="text" @bind-value="MsgInput" class="message-input" placeholder="پیام خود را بنویسید..." />
-                    <Button Color="ButtonColor.Dark" Outline="true" @onclick="OnClickSendMsg"><Icon Name="IconName.AppIndicator" /> </Button>
+                        <Button Color="ButtonColor.Primary" Size=ButtonSize.Small @onclick="OnClickSendMsg" Class="send-btn">
-
+                            <Icon Name="IconName.Send" />
-
+                        </Button>
+                    </div>
                 </div>
             }
 
@@ -338,30 +340,29 @@
 }
 
 <style>
-    .chat-bubble {
+    /* Improved input group styling */
-        padding: 0.5rem 0.75rem;
+    .input-group {
-        border-radius: 1rem;
+        margin-bottom: 1rem;
-        max-width: 75%;
+        border-radius: 0.5rem;
-        word-wrap: break-word;
+        overflow: hidden;
-        white-space: pre-wrap;
+    }
+    /* 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);
     }
 
-    .chat-mine {
+        .input-group p {
-        background: linear-gradient(to right, #005eff, #267fff);
+            margin: 0;
-        color: white;
+            font-size: 1.1rem;
-        border-top-left-radius: 0;
+            font-weight: 700;
-    }
+            background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);
-
+            -webkit-background-clip: text;
-    .chat-other {
+            -webkit-text-fill-color: transparent;
-        background-color: #f1f1f1;
+            background-clip: text;
-        color: #333;
-        border-top-right-radius: 0;
-    }
-
-    .chat-ai {
-        background-color: #f1f1f1;
-        color: #353;
-        border-top-right-radius: 0;
         }
 
     .input-group-text-chat {
@@ -376,6 +377,383 @@
         white-space: nowrap;
         border-radius: var(--bs-border-radius);
     }
+    /* 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);
+        }
+
+    /* 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 {
+     
+        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;
+        }
+
+    .input-group-text-chat {
+        display: flex;
+        align-items: center;
+        padding: .375rem .75rem;
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5;
+        color: var(--bs-body-color);
+        text-align: center;
+        white-space: nowrap;
+        border-radius: var(--bs-border-radius);
+    }
+
+    /* 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;
+    }
+
+    /* 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%);
+    }
+    /* 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;
+        }
+
+    .toexper-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%);
+    }
+
+        .toexper-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;
+        }
 
 </style>
 <script>
@@ -395,7 +773,69 @@
     window.scrollToBottom = (elementId) => {
         const el = document.getElementById(elementId);
         if (el) {
-            el.scrollTop = el.scrollHeight;
+            el.scrollTo({
+                top: el.scrollHeight,
+                behavior: 'smooth'
+            });
+        }
+    };
+
+    // Scroll to target element (new message separator)
+    window.scrollToTarget = () => {
+        const targetElement = document.getElementById('target');
+        if (targetElement) {
+            const chatContainer = document.getElementById('B1');
+            if (chatContainer) {
+                // Calculate the position of target element relative to chat container
+                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({
+                    top: scrollPosition,
+                    behavior: 'smooth'
+                });
+            }
+        } else {
+            // If no target element exists, scroll to bottom smoothly
+            window.scrollToBottom('B1');
+        }
+    };
+
+    // Observe visibility of chat bubbles using existing scroll-visibility.js approach
+    window.observeVisibility = (dotNetHelper) => {
+        const elements = document.querySelectorAll(".chat-bubble[data-id]");
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    const id = entry.target.getAttribute("data-id");
+                    dotNetHelper.invokeMethodAsync("MarkAsRead", parseInt(id));
+                    observer.unobserve(entry.target); // Don't observe again
+                }
+            });
+        }, {
+            threshold: 0.6 // 60% of the message must be visible
+        });
+
+        elements.forEach(el => observer.observe(el));
+    };
+
+    // Auto scroll to target when new messages arrive
+    window.autoScrollToNewMessage = () => {
+        setTimeout(() => {
+            window.scrollToTarget();
+        }, 100); // Small delay to ensure DOM is updated
+    };
+
+    // Check if target exists and scroll accordingly
+    window.scrollToTargetOrBottom = () => {
+        const targetElement = document.getElementById('target');
+        if (targetElement && targetElement.style.display !== 'none') {
+            window.scrollToTarget();
+        } else {
+            window.scrollToBottom('B1');
         }
     };
 </script>

Presentation/HushianWebApp/Pages/FromUserSide/UserCP.razor

@@ -403,7 +403,6 @@
         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);
     }