FEAT : audio alert added for new msg

src/components/messages/MessageElement.jsx

@@ -6,14 +6,16 @@ dayjs.extend(relativeTime);
 
 const MessageElement = ({ message }) => {
  const { userId, profilePicture } = useAuth();
- const { conversation } = useConversation();
+ const { conversation, onlineUsers } = useConversation();
+ let isOnline =
+ userId === message.receiverId && onlineUsers.includes(message.senderId);
 
  const formattedTime = dayjs(message.createdAt).fromNow();
  const self = userId === message.senderId;
  return (
  <div
  className={`chat ${self ? "chat-end" : "chat-start"} ${message?.shake && "animate-shake"}`}>
- <div className="chat-image avatar">
+ <div className={`chat-image avatar ${isOnline && "online"} z-0`}>
  <div className="w-8 rounded-full">
  <img
  alt="Tailwind CSS chat bubble component"

src/components/messages/SendMessageForm.jsx

@@ -90,12 +90,12 @@ const SendMessageForm = () => {
  onBlur={() => setInputFocused(false)}
  />
  <button
- className="border-none btn rounded-3xl disabled:bg-opacity-95 disabled:cursor-no-drop"
+ className="border-none btn rounded-3xl bg-green-300 disabled:bg-opacity-95 disabled:cursor-no-drop"
  disabled={loading || !formState.isValid}>
  {loading ? (
  <span className="loading w-4 loading-spinner"></span>
  ) : (
- <BsFillSendFill className="w-4" />
+ <BsFillSendFill className="w-4 text-black" />
  )}
  </button>
  </form>

src/hooks/socket/useNewMessage.js

@@ -2,14 +2,17 @@ import { useEffect } from "react";
 import { socket } from "../../socket/socket";
 import { useConversation } from "../../stores/useConversation";
 import scrollDown from "../../utils/scrollDown";
+import incomingAudio from "../../assets/audio/incoming.mp3";
 
 const useNewMessage = () => {
  const { setMessage } = useConversation();
+ const notificationSound = new Audio(incomingAudio);
 
  useEffect(() => {
  const newMessageComes = (newMessage) => {
  newMessage = { ...newMessage, shake: true };
  setMessage(newMessage);
+ notificationSound.play();
  return scrollDown();
  };