sceyt-chat-react-uikit 1.6.9-beta.1 → 1.6.9-beta.3

package/index.js

@@ -10403,7 +10403,79 @@ var getShowOnlyContactUsers = function getShowOnlyContactUsers() {
 var contactsMap = {};
 var logoSrc = '';
 var showNotifications = true;
+var notificationPermission = 'default';
+var isNotificationSupported = function isNotificationSupported() {
+  return 'Notification' in window;
+};
+var requestNotificationPermission = function requestNotificationPermission() {
+  try {
+    if (!isNotificationSupported()) {
+      console.warn('Notifications are not supported in this browser');
+      return Promise.resolve('denied');
+    }
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(Notification.requestPermission()).then(function (permission) {
+        notificationPermission = permission;
+        return permission;
+      });
+    }, function (error) {
+      console.error('Error requesting notification permission:', error);
+      notificationPermission = 'denied';
+      return 'denied';
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var createCustomNotification = function createCustomNotification(title, body) {
+  var notificationElement = document.createElement('div');
+  notificationElement.style.cssText = "\n    position: fixed;\n    top: 20px;\n    right: 20px;\n    background: white;\n    border: 1px solid #ddd;\n    border-radius: 8px;\n    padding: 16px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n    z-index: 10000;\n    max-width: 300px;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    animation: slideIn 0.3s ease-out;\n  ";
+  var style = document.createElement('style');
+  style.textContent = "\n    @keyframes slideIn {\n      from { transform: translateX(100%); opacity: 0; }\n      to { transform: translateX(0); opacity: 1; }\n    }\n  ";
+  document.head.appendChild(style);
+  var titleElement = document.createElement('div');
+  titleElement.style.cssText = 'font-weight: bold; margin-bottom: 8px; color: #333;';
+  titleElement.textContent = title;
+  var bodyElement = document.createElement('div');
+  bodyElement.style.cssText = 'color: #666; font-size: 14px; line-height: 1.4;';
+  bodyElement.textContent = body;
+  var closeButton = document.createElement('button');
+  closeButton.textContent = '×';
+  closeButton.style.cssText = "\n    position: absolute;\n    top: 8px;\n    right: 8px;\n    background: none;\n    border: none;\n    font-size: 18px;\n    cursor: pointer;\n    color: #999;\n    padding: 0;\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  ";
+  notificationElement.appendChild(titleElement);
+  notificationElement.appendChild(bodyElement);
+  notificationElement.appendChild(closeButton);
+  notificationElement.addEventListener('click', function (event) {
+    if (event.target !== closeButton) {
+      window.focus();
+      store.dispatch({
+        type: SWITCH_CHANNEL,
+        payload: {
+          channel: null
+        }
+      });
+    }
+  });
+  var closeNotification = function closeNotification() {
+    notificationElement.style.animation = 'slideOut 0.3s ease-in';
+    setTimeout(function () {
+      if (notificationElement.parentNode) {
+        notificationElement.parentNode.removeChild(notificationElement);
+      }
+    }, 300);
+  };
+  closeButton.addEventListener('click', closeNotification);
+  setTimeout(closeNotification, 5000);
+  document.body.appendChild(notificationElement);
+  return {
+    close: closeNotification,
+    onclick: function onclick(handler) {
+      notificationElement.addEventListener('click', handler);
+    }
+  };
+};
 var setNotification = function setNotification(body, user, channel, reaction, attachment) {
+  if (!showNotifications) return;
   var getFromContacts = getShowOnlyContactUsers();
   var attachmentType;
   if (attachment) {
@@ -10411,35 +10483,60 @@ var setNotification = function setNotification(body, user, channel, reaction, at
     attachmentType = attType === attachmentTypes.voice ? 'Voice' : attType === attachmentTypes.image ? 'Photo' : attType === attachmentTypes.video ? 'Video' : 'File';
   }
   var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
+  var title = (isDirectChannel ? makeUsername(contactsMap[user.id], user, getFromContacts) : channel.subject) || 'New Message';
+  var notificationBody = '';
+  if (reaction) {
+    notificationBody = (channel.type !== DEFAULT_CHANNEL_TYPE.DIRECT ? makeUsername(contactsMap[user.id], user, getFromContacts) + ': ' : '') + " reacted " + reaction + " to \"" + (attachmentType || '') + (attachmentType && body ? ': ' : '') + body + "\"";
+  } else {
+    notificationBody = isDirectChannel ? "" + (attachmentType || '') + (attachmentType && body ? ': ' : '') + body : makeUsername(contactsMap[user.id], user, getFromContacts) + "\n" + (attachmentType || '') + (attachmentType && body ? ': ' : '') + body;
+  }
   var notification;
-  if (showNotifications) {
-    if (reaction) {
-      notification = new Notification("" + (isDirectChannel ? makeUsername(contactsMap[user.id], user, getFromContacts) : channel.subject), {
-        body: (channel.type !== DEFAULT_CHANNEL_TYPE.DIRECT ? makeUsername(contactsMap[user.id], user, getFromContacts) + ': ' : '') + " reacted " + reaction + " to \"" + (attachmentType || '') + (attachmentType && body ? ': ' : '') + body + "\"",
-        icon: logoSrc
-      });
+  if (isNotificationSupported()) {
+    if (notificationPermission === 'granted') {
+      try {
+        notification = new Notification(title, {
+          body: notificationBody,
+          icon: logoSrc || '',
+          tag: 'sceyt-notification',
+          requireInteraction: false
+        });
+        notification.onclick = function (event) {
+          event.preventDefault();
+          window.focus();
+          store.dispatch({
+            type: SWITCH_CHANNEL,
+            payload: {
+              channel: channel
+            }
+          });
+          notification.close();
+        };
+        setTimeout(function () {
+          if (notification) {
+            notification.close();
+          }
+        }, 5000);
+      } catch (error) {
+        console.error('Error creating native notification:', error);
+        notification = createCustomNotification(title, notificationBody);
+      }
+    } else if (notificationPermission === 'default') {
+      requestPermissionOnUserInteraction();
+      notification = createCustomNotification(title, notificationBody);
     } else {
-      notification = new Notification("" + (isDirectChannel ? makeUsername(contactsMap[user.id], user, getFromContacts) : channel.subject), {
-        body: isDirectChannel ? "" + (attachmentType || '') + (attachmentType && body ? ': ' : '') + body : makeUsername(contactsMap[user.id], user, getFromContacts) + "\n" + (attachmentType || '') + (attachmentType && body ? ': ' : '') + body,
-        icon: logoSrc
-      });
+      notification = createCustomNotification(title, notificationBody);
     }
-    notification.onclick = function (event) {
-      event.preventDefault();
-      window.focus();
-      store.dispatch({
-        type: SWITCH_CHANNEL,
-        payload: {
-          channel: channel
-        }
-      });
-      notification.close();
-    };
-    if (window.sceytTabNotifications) {
+  } else {
+    notification = createCustomNotification(title, notificationBody);
+  }
+  if (window.sceytTabNotifications) {
+    try {
       window.sceytTabNotifications.close();
+    } catch (error) {
+      console.warn('Error closing previous notification:', error);
     }
-    window.sceytTabNotifications = notification;
   }
+  window.sceytTabNotifications = notification;
 };
 var setNotificationLogoSrc = function setNotificationLogoSrc(src) {
   logoSrc = src;
@@ -10453,6 +10550,31 @@ var setShowNotifications = function setShowNotifications(show) {
 var getShowNotifications = function getShowNotifications() {
   return showNotifications;
 };
+var initializeNotifications = function initializeNotifications() {
+  try {
+    if (isNotificationSupported()) {
+      notificationPermission = Notification.permission;
+      if (notificationPermission === 'default') {
+        console.log('Notification permission not yet requested');
+      }
+    }
+    return Promise.resolve();
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var requestPermissionOnUserInteraction = function requestPermissionOnUserInteraction() {
+  try {
+    var _temp = function () {
+      if (notificationPermission === 'default') {
+        return Promise.resolve(requestNotificationPermission()).then(function () {});
+      }
+    }();
+    return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
 
 function getMembersAC(channelId) {
   return {
@@ -17007,14 +17129,14 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 21]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, pendingMessages, messagesMap, filteredPendingMessages, _secondResult2, _thirdResult, _secondResult3, _pendingMessages, _messagesMap, _filteredPendingMessages, _secondResult4, _pendingMessages2, _messagesMap2, _filteredPendingMessages2;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, pendingMessages, _messagesMap, filteredPendingMessages, _secondResult2, _thirdResult, _secondResult3, _pendingMessages, _messagesMap2, _filteredPendingMessages, _secondResult4, _pendingMessages2, _messagesMap3, _filteredPendingMessages2;
   return _regeneratorRuntime().wrap(function getMessagesQuery$(_context9) {
     while (1) switch (_context9.prev = _context9.next) {
       case 0:
         _context9.prev = 0;
         _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages;
         if (!(channel.id && !channel.isMockChannel)) {
-          _context9.next = 175;
+          _context9.next = 178;
           break;
         }
         SceytChatClient = getClient();
@@ -17035,13 +17157,13 @@ function getMessagesQuery(action) {
           hasNext: false
         };
         if (!loadWithLastMessage) {
-          _context9.next = 54;
+          _context9.next = 57;
           break;
         }
         allMessages = getAllMessages();
         havLastMessage = allMessages && allMessages.length && channel.lastMessage && allMessages[allMessages.length - 1] && allMessages[allMessages.length - 1].id === channel.lastMessage.id;
         if (!(channel.newMessageCount && channel.newMessageCount > 0 || !havLastMessage)) {
-          _context9.next = 44;
+          _context9.next = 47;
           break;
         }
         setHasPrevCached(false);
@@ -17066,37 +17188,44 @@ function getMessagesQuery(action) {
         if (withDeliveredMessages) {
           sentMessages = getFromAllMessagesByMessageId('', '', true);
         }
-        result.messages = [].concat(result.messages, sentMessages);
-        _context9.next = 36;
+        messagesMap = {};
+        result.messages.forEach(function (msg) {
+          messagesMap[msg.tid || ''] = msg;
+        });
+        filteredSentMessages = sentMessages.filter(function (msg) {
+          return !messagesMap[msg.tid || ''];
+        });
+        result.messages = [].concat(result.messages, filteredSentMessages);
+        _context9.next = 39;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 36:
+      case 39:
         setMessagesToMap(channel.id, result.messages);
         setAllMessages(result.messages);
-        _context9.next = 40;
+        _context9.next = 43;
         return effects.put(setMessagesHasPrevAC(true));
-      case 40:
-        _context9.next = 42;
+      case 43:
+        _context9.next = 45;
         return effects.put(markChannelAsReadAC(channel.id));
-      case 42:
-        _context9.next = 49;
+      case 45:
+        _context9.next = 52;
         break;
-      case 44:
+      case 47:
         result.messages = getFromAllMessagesByMessageId('', '', true);
-        _context9.next = 47;
+        _context9.next = 50;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 47:
-        _context9.next = 49;
+      case 50:
+        _context9.next = 52;
         return effects.put(setMessagesHasPrevAC(true));
-      case 49:
-        _context9.next = 51;
+      case 52:
+        _context9.next = 54;
         return effects.put(setMessagesHasNextAC(false));
-      case 51:
+      case 54:
         setHasNextCached(false);
-        _context9.next = 164;
+        _context9.next = 167;
         break;
-      case 54:
+      case 57:
         if (!messageId) {
-          _context9.next = 97;
+          _context9.next = 100;
           break;
         }
         _allMessages = getAllMessages();
@@ -17105,181 +17234,181 @@ function getMessagesQuery(action) {
         });
         maxLengthPart = MESSAGES_MAX_LENGTH / 2;
         if (!(messageIndex >= maxLengthPart)) {
-          _context9.next = 66;
+          _context9.next = 69;
           break;
         }
         result.messages = _allMessages.slice(messageIndex - maxLengthPart, messageIndex + maxLengthPart);
-        _context9.next = 62;
+        _context9.next = 65;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 62:
+      case 65:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
-        _context9.next = 93;
+        _context9.next = 96;
         break;
-      case 66:
+      case 69:
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         log.info('load by message id from server ...............', messageId);
-        _context9.next = 70;
+        _context9.next = 73;
         return effects.call(messageQuery.loadNearMessageId, messageId);
-      case 70:
+      case 73:
         result = _context9.sent;
         if (!(result.messages.length === 50)) {
-          _context9.next = 83;
+          _context9.next = 86;
           break;
         }
         messageQuery.limit = (MESSAGES_MAX_LENGTH - 50) / 2;
-        _context9.next = 75;
+        _context9.next = 78;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 75:
+      case 78:
         _secondResult = _context9.sent;
         messageQuery.reverse = false;
-        _context9.next = 79;
+        _context9.next = 82;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 79:
+      case 82:
         thirdResult = _context9.sent;
         result.messages = [].concat(_secondResult.messages, result.messages, thirdResult.messages);
         result.hasNext = _secondResult.hasNext;
         messageQuery.reverse = true;
-      case 83:
+      case 86:
         log.info('result from server ....... ', result);
-        _context9.next = 86;
+        _context9.next = 89;
         return effects.put(setMessagesHasNextAC(true));
-      case 86:
+      case 89:
         pendingMessages = getPendingMessages(channel.id);
         if (pendingMessages && pendingMessages.length) {
-          messagesMap = {};
+          _messagesMap = {};
           result.messages.forEach(function (msg) {
-            messagesMap[msg.tid || ''] = msg;
+            _messagesMap[msg.tid || ''] = msg;
           });
           filteredPendingMessages = pendingMessages.filter(function (msg) {
-            return !messagesMap[msg.tid || ''];
+            return !_messagesMap[msg.tid || ''];
           });
           setPendingMessages(channel.id, filteredPendingMessages);
           result.messages = [].concat(result.messages, filteredPendingMessages);
         }
-        _context9.next = 90;
+        _context9.next = 93;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 90:
+      case 93:
         setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
-      case 93:
-        _context9.next = 95;
+      case 96:
+        _context9.next = 98;
         return effects.put(setScrollToMessagesAC(messageId));
-      case 95:
-        _context9.next = 164;
+      case 98:
+        _context9.next = 167;
         break;
-      case 97:
+      case 100:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
-          _context9.next = 143;
+          _context9.next = 146;
           break;
         }
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context9.next = 121;
+          _context9.next = 124;
           break;
         }
-        _context9.next = 103;
+        _context9.next = 106;
         return effects.call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 103:
+      case 106:
         result = _context9.sent;
         if (!(result.messages.length === 50)) {
-          _context9.next = 119;
+          _context9.next = 122;
           break;
         }
         messageQuery.limit = channel.newMessageCount > 25 ? (MESSAGES_MAX_LENGTH - 50) / 2 : MESSAGES_MAX_LENGTH - 50;
-        _context9.next = 108;
+        _context9.next = 111;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 108:
+      case 111:
         _secondResult2 = _context9.sent;
         if (!(channel.newMessageCount > 25)) {
-          _context9.next = 118;
+          _context9.next = 121;
           break;
         }
         messageQuery.reverse = false;
-        _context9.next = 113;
+        _context9.next = 116;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 113:
+      case 116:
         _thirdResult = _context9.sent;
         result.messages = [].concat(_secondResult2.messages, result.messages, _thirdResult.messages);
         messageQuery.reverse = true;
-        _context9.next = 119;
+        _context9.next = 122;
         break;
-      case 118:
+      case 121:
         result.messages = [].concat(_secondResult2.messages, result.messages);
-      case 119:
-        _context9.next = 131;
+      case 122:
+        _context9.next = 134;
         break;
-      case 121:
-        _context9.next = 123;
+      case 124:
+        _context9.next = 126;
         return effects.call(messageQuery.loadPrevious);
-      case 123:
+      case 126:
         result = _context9.sent;
         if (!(result.messages.length === 50)) {
-          _context9.next = 131;
+          _context9.next = 134;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.next = 128;
+        _context9.next = 131;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 128:
+      case 131:
         _secondResult3 = _context9.sent;
         result.messages = [].concat(_secondResult3.messages, result.messages);
         result.hasNext = _secondResult3.hasNext;
-      case 131:
+      case 134:
         setMessagesToMap(channel.id, result.messages);
-        _context9.next = 134;
+        _context9.next = 137;
         return effects.put(setMessagesHasPrevAC(true));
-      case 134:
-        _context9.next = 136;
+      case 137:
+        _context9.next = 139;
         return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
-      case 136:
+      case 139:
         _pendingMessages = getPendingMessages(channel.id);
         if (_pendingMessages && _pendingMessages.length) {
-          _messagesMap = {};
+          _messagesMap2 = {};
           result.messages.forEach(function (msg) {
-            _messagesMap[msg.tid || ''] = msg;
+            _messagesMap2[msg.tid || ''] = msg;
           });
           _filteredPendingMessages = _pendingMessages.filter(function (msg) {
-            return !_messagesMap[msg.tid || ''];
+            return !_messagesMap2[msg.tid || ''];
           });
           setPendingMessages(channel.id, _filteredPendingMessages);
           result.messages = [].concat(result.messages, _filteredPendingMessages);
         }
         setAllMessages([].concat(result.messages));
-        _context9.next = 141;
+        _context9.next = 144;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 141:
-        _context9.next = 164;
+      case 144:
+        _context9.next = 167;
         break;
-      case 143:
+      case 146:
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
-          _context9.next = 148;
+          _context9.next = 151;
           break;
         }
         setAllMessages([].concat(cachedMessages));
-        _context9.next = 148;
+        _context9.next = 151;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 148:
+      case 151:
         log.info('load message from server');
-        _context9.next = 151;
+        _context9.next = 154;
         return effects.call(messageQuery.loadPrevious);
-      case 151:
+      case 154:
         result = _context9.sent;
         if (!(result.messages.length === 50)) {
-          _context9.next = 159;
+          _context9.next = 162;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.next = 156;
+        _context9.next = 159;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 156:
+      case 159:
         _secondResult4 = _context9.sent;
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
-      case 159:
+      case 162:
         result.messages.forEach(function (msg) {
           updateMessageOnMap(channel.id, {
             messageId: msg.id,
@@ -17287,58 +17416,58 @@ function getMessagesQuery(action) {
           });
           updateMessageOnAllMessages(msg.id, msg);
         });
-        _context9.next = 162;
+        _context9.next = 165;
         return effects.put(setMessagesHasPrevAC(result.hasNext));
-      case 162:
-        _context9.next = 164;
+      case 165:
+        _context9.next = 167;
         return effects.put(setMessagesHasNextAC(false));
-      case 164:
+      case 167:
         if (cachedMessages && cachedMessages.length) {
-          _context9.next = 171;
+          _context9.next = 174;
           break;
         }
         _pendingMessages2 = getPendingMessages(channel.id);
         if (_pendingMessages2 && _pendingMessages2.length) {
-          _messagesMap2 = {};
+          _messagesMap3 = {};
           result.messages.forEach(function (msg) {
-            _messagesMap2[msg.tid || ''] = msg;
+            _messagesMap3[msg.tid || ''] = msg;
           });
           _filteredPendingMessages2 = _pendingMessages2.filter(function (msg) {
-            return !_messagesMap2[msg.tid || ''];
+            return !_messagesMap3[msg.tid || ''];
           });
           setPendingMessages(channel.id, _filteredPendingMessages2);
           result.messages = [].concat(result.messages, _filteredPendingMessages2);
         }
-        _context9.next = 169;
+        _context9.next = 172;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 169:
+      case 172:
         setMessagesToMap(channel.id, result.messages);
         setAllMessages([].concat(result.messages));
-      case 171:
-        _context9.next = 173;
+      case 174:
+        _context9.next = 176;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 173:
-        _context9.next = 178;
+      case 176:
+        _context9.next = 181;
         break;
-      case 175:
+      case 178:
         if (!channel.isMockChannel) {
-          _context9.next = 178;
+          _context9.next = 181;
           break;
         }
-        _context9.next = 178;
+        _context9.next = 181;
         return effects.put(setMessagesAC([]));
-      case 178:
-        _context9.next = 183;
+      case 181:
+        _context9.next = 186;
         break;
-      case 180:
-        _context9.prev = 180;
+      case 183:
+        _context9.prev = 183;
         _context9.t0 = _context9["catch"](0);
         log.error('error in message query', _context9.t0);
-      case 183:
+      case 186:
       case "end":
         return _context9.stop();
     }
-  }, _marked7$1, null, [[0, 180]]);
+  }, _marked7$1, null, [[0, 183]]);
 }
 function loadMoreMessages(action) {
   var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result;
@@ -18873,6 +19002,9 @@ var SceytChat = function SceytChat(_ref) {
       dispatch(setIsDraggingAC(true));
     }
   };
+  var handleUserInteraction = function handleUserInteraction() {
+    requestPermissionOnUserInteraction();
+  };
   var handleVisibilityChange = function handleVisibilityChange() {
     if (document[hidden]) {
       setTabIsActive(false);
@@ -18964,15 +19096,7 @@ var SceytChat = function SceytChat(_ref) {
       setChannelTypesFilter(channelTypeFilter);
     }
     if (showNotifications) {
-      try {
-        if (window.Notification && Notification.permission === 'default') {
-          Promise.resolve(Notification.requestPermission()).then(function (permission) {
-            log.info('permission:', permission);
-          });
-        }
-      } catch (e) {
-        log.error('safari Notification request permission', e);
-      }
+      initializeNotifications();
       window.sceytTabNotifications = null;
       window.sceytTabUrl = window.location.href;
       window.addEventListener('focus', function () {
@@ -19048,6 +19172,7 @@ var SceytChat = function SceytChat(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, SceytChatClient ? (/*#__PURE__*/React__default.createElement(ChatContainer, {
     onDrop: handleDropFile,
     onDragOver: handleDragOver,
+    onClick: handleUserInteraction,
     withChannelsList: channelsListWidth && channelsListWidth > 0,
     backgroundColor: backgroundColor,
     highlightedBackground: highlightedBackground,
@@ -19502,20 +19627,24 @@ var DeletedAvatarWrapper = styled__default(SvgDeletedUserAvatar)(_templateObject
 });
 
 var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1;
-var ChannelMessageText = function ChannelMessageText(_ref) {
-  var isTypingOrRecording = _ref.isTypingOrRecording,
-    textPrimary = _ref.textPrimary,
-    textSecondary = _ref.textSecondary,
-    draftMessageText = _ref.draftMessageText,
-    lastMessage = _ref.lastMessage,
-    user = _ref.user,
-    contactsMap = _ref.contactsMap,
-    getFromContacts = _ref.getFromContacts,
-    lastMessageMetas = _ref.lastMessageMetas,
-    accentColor = _ref.accentColor,
-    typingOrRecording = _ref.typingOrRecording,
-    channel = _ref.channel,
-    isDirectChannel = _ref.isDirectChannel;
+var LastMessageAttachments = function LastMessageAttachments(_ref) {
+  var lastMessage = _ref.lastMessage;
+  return !!(lastMessage.attachments && lastMessage.attachments.length) && (lastMessage.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgPicture, null), lastMessage.body ? '' : 'Photo')) : lastMessage.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgVideoCall, null), lastMessage.body ? '' : 'Video')) : lastMessage.attachments[0].type === attachmentTypes.file ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgChoseFile, null), lastMessage.body ? '' : 'File')) : lastMessage.attachments[0].type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), lastMessage.body ? '' : 'Voice')) : null);
+};
+var ChannelMessageText = function ChannelMessageText(_ref2) {
+  var isTypingOrRecording = _ref2.isTypingOrRecording,
+    textPrimary = _ref2.textPrimary,
+    textSecondary = _ref2.textSecondary,
+    draftMessageText = _ref2.draftMessageText,
+    lastMessage = _ref2.lastMessage,
+    user = _ref2.user,
+    contactsMap = _ref2.contactsMap,
+    getFromContacts = _ref2.getFromContacts,
+    lastMessageMetas = _ref2.lastMessageMetas,
+    accentColor = _ref2.accentColor,
+    typingOrRecording = _ref2.typingOrRecording,
+    channel = _ref2.channel,
+    isDirectChannel = _ref2.isDirectChannel;
   return /*#__PURE__*/React__default.createElement(MessageTextContainer, null, isTypingOrRecording && (/*#__PURE__*/React__default.createElement(TypingIndicator, null, !isDirectChannel && /*#__PURE__*/React__default.createElement(Points, {
     color: textPrimary
   }, ":"), typingOrRecording.isTyping ? 'typing' : 'recording', "...")), !isTypingOrRecording && (draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageText, {
@@ -19524,7 +19653,9 @@ var ChannelMessageText = function ChannelMessageText(_ref) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
   })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'RM' ? " removed " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
-  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, channel.lastReactedMessage && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Reacted", /*#__PURE__*/React__default.createElement(ReactionItem, null, channel.newReactions && channel.newReactions[0] && channel.newReactions[0].key), "to", ' "')), !!(lastMessage.attachments && lastMessage.attachments.length) && (lastMessage.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgPicture, null), lastMessage.body ? '' : 'Photo')) : lastMessage.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgVideoCall, null), lastMessage.body ? '' : 'Video')) : lastMessage.attachments[0].type === attachmentTypes.file ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgChoseFile, null), lastMessage.body ? '' : 'File')) : lastMessage.attachments[0].type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), lastMessage.body ? '' : 'Voice')) : null), /*#__PURE__*/React__default.createElement(LastMessageDescription, null, !!(lastMessage && lastMessage.id) && MessageTextFormat({
+  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : '') : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LastMessageDescription, null, channel.lastReactedMessage && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, "Reacted", /*#__PURE__*/React__default.createElement(ReactionItem, null, channel.newReactions && channel.newReactions[0] && channel.newReactions[0].key), "to", ' "')), LastMessageAttachments({
+    lastMessage: lastMessage
+  }), !!(lastMessage && lastMessage.id) && MessageTextFormat({
     text: lastMessage.body,
     message: lastMessage,
     contactsMap: contactsMap,
@@ -19532,34 +19663,34 @@ var ChannelMessageText = function ChannelMessageText(_ref) {
     isLastMessage: true,
     accentColor: accentColor,
     textSecondary: textSecondary
-  })), channel.lastReactedMessage && '"'))));
+  }), channel.lastReactedMessage && '"')))));
 };
-var Channel = function Channel(_ref2) {
+var Channel = function Channel(_ref3) {
   var _channel$metadata, _channel$metadata2;
-  var channel = _ref2.channel,
-    theme = _ref2.theme,
-    _ref2$showAvatar = _ref2.showAvatar,
-    showAvatar = _ref2$showAvatar === void 0 ? true : _ref2$showAvatar,
-    avatarBorderRadius = _ref2.avatarBorderRadius,
-    notificationsIsMutedIcon = _ref2.notificationsIsMutedIcon,
-    notificationsIsMutedIconColor = _ref2.notificationsIsMutedIconColor,
-    pinedIcon = _ref2.pinedIcon,
-    selectedChannelLeftBorder = _ref2.selectedChannelLeftBorder,
-    selectedChannelBackground = _ref2.selectedChannelBackground,
-    contactsMap = _ref2.contactsMap,
-    selectedChannelBorderRadius = _ref2.selectedChannelBorderRadius,
-    selectedChannelPaddings = _ref2.selectedChannelPaddings,
-    channelsPaddings = _ref2.channelsPaddings,
-    channelsMargin = _ref2.channelsMargin,
-    channelHoverBackground = _ref2.channelHoverBackground,
-    channelSubjectFontSize = _ref2.channelSubjectFontSize,
-    channelSubjectLineHeight = _ref2.channelSubjectLineHeight,
-    channelSubjectColor = _ref2.channelSubjectColor,
-    channelLastMessageFontSize = _ref2.channelLastMessageFontSize,
-    channelLastMessageTimeFontSize = _ref2.channelLastMessageTimeFontSize,
-    channelLastMessageHeight = _ref2.channelLastMessageHeight,
-    channelAvatarSize = _ref2.channelAvatarSize,
-    channelAvatarTextSize = _ref2.channelAvatarTextSize;
+  var channel = _ref3.channel,
+    theme = _ref3.theme,
+    _ref3$showAvatar = _ref3.showAvatar,
+    showAvatar = _ref3$showAvatar === void 0 ? true : _ref3$showAvatar,
+    avatarBorderRadius = _ref3.avatarBorderRadius,
+    notificationsIsMutedIcon = _ref3.notificationsIsMutedIcon,
+    notificationsIsMutedIconColor = _ref3.notificationsIsMutedIconColor,
+    pinedIcon = _ref3.pinedIcon,
+    selectedChannelLeftBorder = _ref3.selectedChannelLeftBorder,
+    selectedChannelBackground = _ref3.selectedChannelBackground,
+    contactsMap = _ref3.contactsMap,
+    selectedChannelBorderRadius = _ref3.selectedChannelBorderRadius,
+    selectedChannelPaddings = _ref3.selectedChannelPaddings,
+    channelsPaddings = _ref3.channelsPaddings,
+    channelsMargin = _ref3.channelsMargin,
+    channelHoverBackground = _ref3.channelHoverBackground,
+    channelSubjectFontSize = _ref3.channelSubjectFontSize,
+    channelSubjectLineHeight = _ref3.channelSubjectLineHeight,
+    channelSubjectColor = _ref3.channelSubjectColor,
+    channelLastMessageFontSize = _ref3.channelLastMessageFontSize,
+    channelLastMessageTimeFontSize = _ref3.channelLastMessageTimeFontSize,
+    channelLastMessageHeight = _ref3.channelLastMessageHeight,
+    channelAvatarSize = _ref3.channelAvatarSize,
+    channelAvatarTextSize = _ref3.channelAvatarTextSize;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -19811,9 +19942,9 @@ var Container$2 = styled__default.div(_templateObject6$1 || (_templateObject6$1
   return props.channelsMargin || '0 8px';
 }, function (props) {
   return props.selectedChannelBorderRadius || '12px';
-}, function (_ref3) {
-  var selectedChannel = _ref3.selectedChannel,
-    hoverBackground = _ref3.hoverBackground;
+}, function (_ref4) {
+  var selectedChannel = _ref4.selectedChannel,
+    hoverBackground = _ref4.hoverBackground;
   return !selectedChannel && "\n      background-color: " + hoverBackground + ";\n    ";
 }, UserStatus, function (props) {
   return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
@@ -19828,9 +19959,9 @@ var DraftMessageText = styled__default.span(_templateObject8$1 || (_templateObje
 });
 var LastMessageAuthor = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  max-width: 120px;\n  font-weight: 500;\n  color: ", ";\n\n  ", "\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n"])), function (props) {
   return props.color;
-}, function (_ref4) {
-  var typing = _ref4.typing,
-    recording = _ref4.recording;
+}, function (_ref5) {
+  var typing = _ref5.typing,
+    recording = _ref5.recording;
   return (typing || recording) && "\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: calc(100% - " + (typing ? 62 : 76) + "px);\n  ";
 });
 var Points = styled__default.span(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n  font-style: normal;\n"])), function (props) {
@@ -19847,7 +19978,7 @@ var LastMessageText = styled__default.span(_templateObject1$1 || (_templateObjec
 }, function (props) {
   return props.color;
 });
-var LastMessageDescription = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n"])));
+var LastMessageDescription = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n  & > svg {\n    width: 18px;\n    height: 18px;\n    margin: 3px 0 -3px 0;\n    margin-right: 4px;\n  }\n"])));
 var ChannelStatus = styled__default.div(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 16px;\n  top: 15px;\n  display: flex;\n  flex-wrap: wrap;\n  height: 42px;\n  margin-left: auto;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
@@ -30789,8 +30920,7 @@ var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
 };
 var MessageList = function MessageList(_ref2) {
   var _channel$lastMessage, _channel$lastMessage3, _scrollRef$current;
-  var messages = _ref2.messages,
-    fontFamily = _ref2.fontFamily,
+  var fontFamily = _ref2.fontFamily,
     _ref2$ownMessageOnRig = _ref2.ownMessageOnRightSide,
     ownMessageOnRightSide = _ref2$ownMessageOnRig === void 0 ? true : _ref2$ownMessageOnRig,
     messageWidthPercent = _ref2.messageWidthPercent,
@@ -30963,6 +31093,7 @@ var MessageList = function MessageList(_ref2) {
   var messagesLoading = reactRedux.useSelector(messagesLoadingState);
   var draggingSelector = reactRedux.useSelector(isDraggingSelector, reactRedux.shallowEqual);
   var showScrollToNewMessageButton = reactRedux.useSelector(showScrollToNewMessageButtonSelector, reactRedux.shallowEqual);
+  var messages = reactRedux.useSelector(activeChannelMessagesSelector, reactRedux.shallowEqual) || [];
   var _useState = React.useState(''),
     unreadMessageId = _useState[0],
     setUnreadMessageId = _useState[1];
@@ -31049,14 +31180,14 @@ var MessageList = function MessageList(_ref2) {
       if (target.scrollTop === 0 && scrollToNewMessage.scrollToBottom && scrollToNewMessage.updateMessageList && messagesLoading !== LOADING_STATE.LOADING) {
         dispatch(getMessagesAC(channel, true));
       }
+      if (target.scrollTop <= -50) {
+        dispatch(showScrollToNewMessageButtonAC(true));
+      } else {
+        dispatch(showScrollToNewMessageButtonAC(false));
+      }
       if (scrollToReply) {
         target.scrollTop = scrollToReply;
       } else {
-        if (target.scrollTop <= -50) {
-          dispatch(showScrollToNewMessageButtonAC(true));
-        } else {
-          dispatch(showScrollToNewMessageButtonAC(false));
-        }
         if (messagesIndexMap[lastVisibleMessageId] < 15 || forceLoadPrevMessages) {
           if (connectionStatus === CONNECTION_STATUS.CONNECTED && !scrollToNewMessage.scrollToBottom && hasPrevMessages) {
             if (messagesLoading === LOADING_STATE.LOADING || loading || prevDisable) {
@@ -31106,7 +31237,10 @@ var MessageList = function MessageList(_ref2) {
       }) >= 10) {
         var repliedMessage = document.getElementById(messageId);
         if (repliedMessage) {
-          scrollRef.current.scrollTop = repliedMessage.offsetTop - scrollRef.current.offsetHeight / 2;
+          scrollRef.current.scrollTo({
+            top: repliedMessage.offsetTop - scrollRef.current.offsetHeight / 2,
+            behavior: 'smooth'
+          });
           repliedMessage.classList.add('highlight');
           setTimeout(function () {
             repliedMessage.classList.remove('highlight');
@@ -31239,7 +31373,10 @@ var MessageList = function MessageList(_ref2) {
       var repliedMessage = document.getElementById(scrollToRepliedMessage);
       if (repliedMessage) {
         setScrollToReply(repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200));
-        scrollRef.current.scrollTop = repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200);
+        scrollRef.current.scrollTo({
+          top: repliedMessage && repliedMessage.offsetTop - (channel.backToLinkedChannel ? 0 : 200),
+          behavior: 'smooth'
+        });
         scrollRef.current.style.scrollBehavior = 'smooth';
         if (!channel.backToLinkedChannel) {
           repliedMessage && repliedMessage.classList.add('highlight');
@@ -31261,12 +31398,18 @@ var MessageList = function MessageList(_ref2) {
     if (scrollToNewMessage.scrollToBottom) {
       if (scrollToNewMessage.isIncomingMessage) {
         if (scrollRef.current.scrollTop > -100) {
-          scrollRef.current.scrollTop = 0;
+          scrollRef.current.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+          });
         }
       } else {
         nextDisable = true;
         prevDisable = true;
-        scrollRef.current.scrollTop = 0;
+        scrollRef.current.scrollTo({
+          top: 0,
+          behavior: 'smooth'
+        });
         dispatch(showScrollToNewMessageButtonAC(false));
         setTimeout(function () {
           prevDisable = false;
@@ -31913,9 +32056,7 @@ var MessagesContainer = function MessagesContainer(_ref) {
     _ref$hiddenMessagesPr = _ref.hiddenMessagesProperties,
     hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr,
     shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
-  var messages = reactRedux.useSelector(activeChannelMessagesSelector) || [];
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
-    messages: messages,
     fontFamily: fontFamily,
     ownMessageOnRightSide: ownMessageOnRightSide,
     messageWidthPercent: messageWidthPercent,
@@ -38868,7 +39009,10 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
         if (repliedMessage) {
           var scrollRef = document.getElementById('scrollableDiv');
           if (scrollRef) {
-            scrollRef.scrollTop = repliedMessage.offsetTop;
+            scrollRef.scrollTo({
+              top: repliedMessage.offsetTop - scrollRef.offsetHeight / 2,
+              behavior: 'smooth'
+            });
           }
         }
       } else {