feat: Implement agent-specific contact page CTA, enhance avatar loading and message previews, and refine messaging read receipts with auto-mark functionality.

src/hooks/useMessaging.ts

@@ -480,6 +480,17 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
           if (prev.some((m) => m.id === message.id)) return prev;
           return [...prev, message];
         });
+
+        // Auto-mark as read if user is currently viewing this conversation
+        // (the other user sent a message while we're looking at the chat)
+        const currentUserId = (session?.user as any)?.id;
+        if (message.senderId !== currentUserId) {
+          if (isConnected) {
+            socketService.markAsRead(message.conversationId);
+          } else {
+            messagesService.markAsRead(message.conversationId).catch(() => {});
+          }
+        }
       }
 
       // Update conversation list
@@ -536,13 +547,15 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
     const unsubscribeRead = socketService.onMessagesRead(
       (data: MessagesReadEvent) => {
         if (data.conversationId === currentConversationIdRef.current) {
-          // Update message statuses
+          const currentUserId = (session?.user as any)?.id;
+          // Only update status on messages SENT by current user (not received ones)
           setMessages((prev) =>
-            prev.map((m) => ({
-              ...m,
-              status: 'READ' as MessageStatus,
-              readAt: data.readAt,
-            }))
+            prev.map((m) => {
+              if (m.senderId === currentUserId && m.status !== 'READ') {
+                return { ...m, status: 'READ' as MessageStatus, readAt: data.readAt };
+              }
+              return m;
+            })
           );
         }
       }