🚀 Feature: Give Tab Notification on New Message (#9847)

Co-authored-by: Narender Singh <narender2031@gmail.com>

app/javascript/chat/chat.jsx

@@ -7,6 +7,7 @@
 import { h, Component } from 'preact';
 import PropTypes from 'prop-types';
 import { setupPusher } from '../utilities/connect';
+import notifyUser from '../utilities/connect/newMessageNotify';
 import debounceAction from '../utilities/debounceAction';
 import { addSnackbarItem } from '../Snackbar';
 import { processImageUpload } from '../article-form/actions';
@@ -452,13 +453,13 @@ export default class Chat extends Component {
       activeChannelId,
       scrolled,
       chatChannels,
+      currentUserId,
       unopenedChannelIds,
     } = this.state;
 
     const receivedChatChannelId = message.chat_channel_id;
     const messageList = document.getElementById('messagelist');
     let newMessages = [];
-
     const nearBottom =
       messageList.scrollTop + messageList.offsetHeight + 400 >
       messageList.scrollHeight;
@@ -466,7 +467,12 @@ export default class Chat extends Component {
     if (nearBottom) {
       scrollToBottom();
     }
-    // Remove reduntant messages
+
+    // If I'm not sender and tab is not active
+    if (message.user_id !== currentUserId && document.hidden) {
+      notifyUser();
+    }
+
     if (
       message.temp_id &&
       messages[receivedChatChannelId] &&
@@ -474,6 +480,7 @@ export default class Chat extends Component {
         (oldmessage) => oldmessage.temp_id === message.temp_id,
       ) > -1
     ) {
+      // Remove reduntant messages
       return;
     }
 
@@ -485,7 +492,7 @@ export default class Chat extends Component {
       }
     }
 
-    //Show alert if message received and you have scrolled up
+    // Show alert if message received and you have scrolled up
     const newShowAlert =
       activeChannelId === receivedChatChannelId
         ? { showAlert: !nearBottom }

app/javascript/utilities/connect/newMessageNotify.js

@@ -0,0 +1,16 @@
+export default function notifyUser() {
+  modifyTitle();
+}
+
+const modifyTitle = () => {
+  const oldTitle = document.title;
+  const titleAlert = setInterval(() => {
+    if (document.title === oldTitle) document.title = 'New Message 👋';
+    else document.title = oldTitle;
+  }, 2000);
+
+  setTimeout(() => {
+    clearInterval(titleAlert);
+    document.title = oldTitle;
+  }, 12000);
+};