From f7388642d1b06236c61978758951db7a93bab124 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Mon, 19 Jan 2026 00:12:19 +0530
Subject: [PATCH] style: improve message list UI with an active conversation
 indicator, refined avatar styling, and an updated header options icon.

---
 .../assets/icons/three-dots-horizontal-icon.svg   |  5 +++++
 .../agent/message/component/ChatHeader.tsx        |  6 +++---
 src/app/(agent)/agent/message/page.tsx            | 15 ++++++++++-----
 3 files changed, 18 insertions(+), 8 deletions(-)
 create mode 100644 public/assets/icons/three-dots-horizontal-icon.svg

diff --git a/public/assets/icons/three-dots-horizontal-icon.svg b/public/assets/icons/three-dots-horizontal-icon.svg
new file mode 100644
index 0000000..5024cc7
--- /dev/null
+++ b/public/assets/icons/three-dots-horizontal-icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="12" r="2" fill="#00293d"/>
+  <circle cx="12" cy="12" r="2" fill="#00293d"/>
+  <circle cx="19" cy="12" r="2" fill="#00293d"/>
+</svg>
diff --git a/src/app/(agent)/agent/message/component/ChatHeader.tsx b/src/app/(agent)/agent/message/component/ChatHeader.tsx
index 017ecac..a2333be 100644
--- a/src/app/(agent)/agent/message/component/ChatHeader.tsx
+++ b/src/app/(agent)/agent/message/component/ChatHeader.tsx
@@ -40,7 +40,7 @@ export function ChatHeader({
         <div className="flex items-center gap-2">
           <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
             <Image
-              src="/assets/icons/three-dots-icon.svg"
+              src="/assets/icons/three-dots-horizontal-icon.svg"
               alt="More options"
               width={24}
               height={24}
@@ -61,13 +61,13 @@ export function ChatHeader({
       <div className="flex items-start gap-3">
         {/* Avatar */}
         <div className="relative flex-shrink-0">
-          <div className="w-[50px] h-[50px] rounded-full overflow-hidden">
+          <div className="w-[50px] h-[50px] rounded-full overflow-hidden border border-[#00293D]/20">
             <Image
               src={avatar}
               alt={name}
               width={50}
               height={50}
-              className="w-full h-full object-cover"
+              className="w-full h-full object-cover rounded-full"
             />
           </div>
           {isOnline && (
diff --git a/src/app/(agent)/agent/message/page.tsx b/src/app/(agent)/agent/message/page.tsx
index a41f7da..38f5674 100644
--- a/src/app/(agent)/agent/message/page.tsx
+++ b/src/app/(agent)/agent/message/page.tsx
@@ -249,10 +249,10 @@ export default function MessagePage() {
         </div>
 
         {/* Header actions */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 ml-auto">
           <button className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
             <Image
-              src="/assets/icons/three-dots-icon.svg"
+              src="/assets/icons/three-dots-horizontal-icon.svg"
               alt="More options"
               width={24}
               height={24}
@@ -278,19 +278,24 @@ export default function MessagePage() {
               <div
                 key={conversation.id}
                 onClick={() => setSelectedConversation(conversation.id)}
-                className={`flex items-start gap-3 p-4 border border-[#00293d]/10 rounded-[15px] cursor-pointer transition-colors ${
+                className={`relative flex items-start gap-3 p-4 rounded-[15px] cursor-pointer transition-colors ${
                   selectedConversation === conversation.id ? 'bg-[#00293d]/5' : 'hover:bg-[#00293d]/5'
                 }`}
+                style={{ border: '1px solid rgba(0, 41, 61, 0.1)' }}
               >
+                {/* Active indicator line */}
+                {selectedConversation === conversation.id && (
+                  <div className="absolute left-0 top-1/2 -translate-y-1/2 w-[4px] h-[70px] bg-[#E58625] rounded-r-[4px]" />
+                )}
                 {/* Avatar with online indicator */}
                 <div className="relative flex-shrink-0">
-                  <div className="w-[70px] h-[70px] rounded-full overflow-hidden">
+                  <div className="w-[70px] h-[70px] rounded-full overflow-hidden border border-[#00293D]/20">
                     <Image
                       src={conversation.avatar}
                       alt={conversation.name}
                       width={70}
                       height={70}
-                      className="w-full h-full object-cover"
+                      className="w-full h-full object-cover rounded-full"
                     />
                   </div>
                   {conversation.isOnline && (