woohoo?!

components/dashboard/ChatList.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -30,8 +30,62 @@ export default function ChatList() {
   const [chats, setChats] = useState<Chat[]>([]);
   const [loading, setLoading] = useState(true);
   const [unreadCounts, setUnreadCounts] = useState<UnreadCounts>({ totalUnread: 0, chatCounts: {} });
+  const [previousTotalUnread, setPreviousTotalUnread] = useState<number>(0);
   const [selectedStore, setSelectedStore] = useState<string>("");
   const [vendorStores, setVendorStores] = useState<{ _id: string, name: string }[]>([]);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  
+  // Initialize audio element
+  useEffect(() => {
+    // Create audio element for notification sound
+    audioRef.current = new Audio('/notification.mp3');
+    
+    // Fallback if notification.mp3 doesn't exist - use browser API for a simple beep
+    audioRef.current.addEventListener('error', () => {
+      audioRef.current = null;
+    });
+    
+    return () => {
+      if (audioRef.current) {
+        audioRef.current = null;
+      }
+    };
+  }, []);
+  
+  // Function to play notification sound
+  const playNotificationSound = () => {
+    if (audioRef.current) {
+      audioRef.current.currentTime = 0;
+      audioRef.current.play().catch(err => {
+        console.log('Error playing sound:', err);
+        // Fallback to simple beep if audio file fails
+        try {
+          const context = new (window.AudioContext || (window as any).webkitAudioContext)();
+          const oscillator = context.createOscillator();
+          oscillator.type = 'sine';
+          oscillator.frequency.setValueAtTime(800, context.currentTime);
+          oscillator.connect(context.destination);
+          oscillator.start();
+          oscillator.stop(context.currentTime + 0.2);
+        } catch (e) {
+          console.error('Could not play fallback audio', e);
+        }
+      });
+    } else {
+      // Fallback to simple beep if audio element is not available
+      try {
+        const context = new (window.AudioContext || (window as any).webkitAudioContext)();
+        const oscillator = context.createOscillator();
+        oscillator.type = 'sine';
+        oscillator.frequency.setValueAtTime(800, context.currentTime);
+        oscillator.connect(context.destination);
+        oscillator.start();
+        oscillator.stop(context.currentTime + 0.2);
+      } catch (e) {
+        console.error('Could not play fallback audio', e);
+      }
+    }
+  };
   
   // Fetch vendor ID and stores
   useEffect(() => {
@@ -160,14 +214,22 @@ export default function ChatList() {
         // Fetch unread counts
         const unreadResponse = await authAxios.get(`/chats/vendor/${vendorId}/unread`);
         console.log("Unread counts:", unreadResponse.data);
+        
+        // Check if there are new unread messages and play sound
+        if (!loading && unreadResponse.data.totalUnread > previousTotalUnread) {
+          playNotificationSound();
+        }
+        
+        // Update states
         setUnreadCounts(unreadResponse.data);
+        setPreviousTotalUnread(unreadResponse.data.totalUnread);
+        setLoading(false);
         
         console.log("Chat loading complete");
       } catch (error) {
         console.error("Error fetching chats:", error);
         toast.error("Failed to load chats");
       } finally {
-        setLoading(false);
         console.log("Loading state set to false");
       }
     };
@@ -175,7 +237,7 @@ export default function ChatList() {
     fetchChats();
     
     // Set up polling for updates every 30 seconds
-    const intervalId = setInterval(fetchChats, 5000);
+    const intervalId = setInterval(fetchChats, 10000);
     
     return () => clearInterval(intervalId);
   }, [selectedStore]);