Update ChatDetail.tsx

components/dashboard/ChatDetail.tsx

@@ -97,6 +97,7 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
   const [selectedMessageIndex, setSelectedMessageIndex] = useState<number | null>(null);
   const [selectedAttachmentIndex, setSelectedAttachmentIndex] = useState<number | null>(null);
+  const seenMessageIdsRef = useRef<Set<string>>(new Set());
   
   // Scroll to bottom utility functions
   const scrollToBottom = () => {
@@ -228,13 +229,31 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
         
         if (newMessages.length > 0) {
           setMessages(prev => [...prev, ...newMessages]);
+          
+          // Mark all these messages as seen to avoid notification sounds
+          newMessages.forEach((msg: Message) => {
+            seenMessageIdsRef.current.add(msg._id);
+          });
         } else {
           // If we need to replace all messages (e.g., first load or refresh)
           setMessages(Array.isArray(response.messages) ? response.messages : []);
+          
+          // Mark all messages as seen
+          if (Array.isArray(response.messages)) {
+            response.messages.forEach((msg: Message) => {
+              seenMessageIdsRef.current.add(msg._id);
+            });
+          }
         }
       } else {
         // Initial load
-        setMessages(Array.isArray(response.messages) ? response.messages : []);
+        const initialMessages = Array.isArray(response.messages) ? response.messages : [];
+        setMessages(initialMessages);
+        
+        // Mark all initial messages as seen
+        initialMessages.forEach((msg: Message) => {
+          seenMessageIdsRef.current.add(msg._id);
+        });
       }
       
       // Scroll to bottom on initial load
@@ -286,10 +305,19 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
           // Add only new messages to avoid re-rendering all messages
           setMessages(prev => [...prev, ...newMessages]);
           
-          // Play notification sound for new buyer messages
+          // Play notification sound only for new buyer messages we haven't seen before
-          const hasBuyerMessage = newMessages.some((msg: Message) => msg.sender === 'buyer');
+          const unseenBuyerMessages = newMessages.filter((msg: Message) => 
-          if (hasBuyerMessage) {
+            msg.sender === 'buyer' && !seenMessageIdsRef.current.has(msg._id)
+          );
+          
+          // If we have unseen buyer messages, play sound and mark them as seen
+          if (unseenBuyerMessages.length > 0) {
             playNotificationSound();
+            
+            // Add these messages to our seen set
+            unseenBuyerMessages.forEach((msg: Message) => {
+              seenMessageIdsRef.current.add(msg._id);
+            });
           }
           
           // If near bottom, scroll to new messages
@@ -351,6 +379,9 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
       vendorId: chatData.vendorId || ''
     };
     
+    // Add the temp message ID to seen messages
+    seenMessageIdsRef.current.add(tempId);
+    
     // Optimistically add the temp message to the UI
     setMessages(prev => [...prev, tempMessage]);
     
@@ -391,6 +422,11 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
         msg._id === tempId ? response : msg
       ));
       
+      // Add the real message ID to seen messages
+      if (response && response._id) {
+        seenMessageIdsRef.current.add(response._id);
+      }
+      
       // Update the textarea value to empty
       setMessage('');