From 2af5325c6b9cf7adaf3a27a98f35186dc024c312 Mon Sep 17 00:00:00 2001 From: nocnico Date: Thu, 24 Jul 2025 03:24:24 +0200 Subject: [PATCH] Make new Chat message more visible #93 --- apps/dispatch/app/_components/left/Chat.tsx | 31 ++++++++++++++------ apps/dispatch/public/sounds/newChat.mp3 | Bin 0 -> 40704 bytes 2 files changed, 22 insertions(+), 9 deletions(-) create mode 100644 apps/dispatch/public/sounds/newChat.mp3 diff --git a/apps/dispatch/app/_components/left/Chat.tsx b/apps/dispatch/app/_components/left/Chat.tsx index 21b0b177..d09a5ebf 100644 --- a/apps/dispatch/app/_components/left/Chat.tsx +++ b/apps/dispatch/app/_components/left/Chat.tsx @@ -2,7 +2,7 @@ import { ChatBubbleIcon, PaperPlaneIcon } from "@radix-ui/react-icons"; import { useLeftMenuStore } from "_store/leftMenuStore"; import { useSession } from "next-auth/react"; -import { Fragment, useEffect, useState } from "react"; +import { Fragment, useEffect, useState, useRef } from "react"; import { cn } from "@repo/shared-components"; import { asPublicUser } from "@repo/db"; import { useQuery } from "@tanstack/react-query"; @@ -30,6 +30,8 @@ export const Chat = () => { const [message, setMessage] = useState(""); const dispatcherConnected = useDispatchConnectionStore((state) => state.status === "connected"); const pilotConnected = usePilotConnectionStore((state) => state.status === "connected"); + const [someChat, setSomeChat] = useState(false); + const audioRef = useRef(null); const { data: dispatcher } = useQuery({ queryKey: ["dispatcher"], @@ -61,16 +63,27 @@ export const Chat = () => { } }, [btnActive, setChatOpen]); + useEffect(() => { + if (Object.values(chats).some((c) => c.notification)) { + setSomeChat(true); + if (audioRef.current) { + audioRef.current.volume = 0.5; + audioRef.current.play().catch(() => {}); + } + } else { + setSomeChat(false); + } + }, [chats]); + return (
+