feat: add unread message count badge to CommonHeader for user role

src/components/providers/header-provider.tsx

@@ -6,6 +6,7 @@ import { agentsService } from '@/services/agents.service';
 import { usersService } from '@/services/users.service';
 import { uploadService } from '@/services/upload.service';
 import { notificationsApiService } from '@/services/notifications-api.service';
+import { messagesService } from '@/services/messages.service';
 import { socketService } from '@/services';
 
 interface HeaderData {
@@ -15,6 +16,7 @@ interface HeaderData {
   avatarLoaded: boolean;
   setAvatarLoaded: (loaded: boolean) => void;
   notificationCount: number;
+  messageCount: number;
 }
 
 const HeaderContext = createContext<HeaderData>({
@@ -24,6 +26,7 @@ const HeaderContext = createContext<HeaderData>({
   avatarLoaded: false,
   setAvatarLoaded: () => {},
   notificationCount: 0,
+  messageCount: 0,
 });
 
 export function useHeaderData() {
@@ -37,6 +40,7 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
   const [profileTitle, setProfileTitle] = useState<string | null>(null);
   const [avatarLoaded, setAvatarLoaded] = useState(false);
   const [notificationCount, setNotificationCount] = useState(0);
+  const [messageCount, setMessageCount] = useState(0);
   const lastAvatarKeyRef = useRef<string | null>(null);
   const hasFetchedRef = useRef(false);
 
@@ -116,18 +120,30 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
       }
     };
 
+    const fetchMessageCount = async () => {
+      try {
+        const count = await messagesService.getUnreadCount();
+        setMessageCount(count);
+      } catch {
+        // Silently fail
+      }
+    };
+
     fetchCount();
+    fetchMessageCount();
     const interval = setInterval(fetchCount, 30000);
+    const messageInterval = setInterval(fetchMessageCount, 30000);
     const handleNotification = () => fetchCount();
     window.addEventListener('notification-received', handleNotification);
 
     // Listen to socket events for immediate notification count refresh
     const unsubConnectionReq = socketService.onConnectionRequest(() => fetchCount());
     const unsubConnectionRes = socketService.onConnectionResponse(() => fetchCount());
-    const unsubNewMessage = socketService.onNewMessage(() => fetchCount());
+    const unsubNewMessage = socketService.onNewMessage(() => { fetchCount(); fetchMessageCount(); });
 
     return () => {
       clearInterval(interval);
+      clearInterval(messageInterval);
       window.removeEventListener('notification-received', handleNotification);
       unsubConnectionReq();
       unsubConnectionRes();
@@ -136,7 +152,7 @@ export function HeaderProvider({ children }: { children: React.ReactNode }) {
   }, [status]);
 
   return (
-    <HeaderContext.Provider value={{ profileImage, profileName, profileTitle, avatarLoaded, setAvatarLoaded, notificationCount }}>
+    <HeaderContext.Provider value={{ profileImage, profileName, profileTitle, avatarLoaded, setAvatarLoaded, notificationCount, messageCount }}>
       {children}
     </HeaderContext.Provider>
   );