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

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 {
@@ -18873,6 +18995,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 +19089,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 +19165,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,

package/index.modern.js

@@ -10380,7 +10380,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) {
@@ -10388,35 +10460,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;
@@ -10430,6 +10527,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 {
@@ -18850,6 +18972,9 @@ var SceytChat = function SceytChat(_ref) {
       dispatch(setIsDraggingAC(true));
     }
   };
+  var handleUserInteraction = function handleUserInteraction() {
+    requestPermissionOnUserInteraction();
+  };
   var handleVisibilityChange = function handleVisibilityChange() {
     if (document[hidden]) {
       setTabIsActive(false);
@@ -18941,15 +19066,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 () {
@@ -19025,6 +19142,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.6.9-beta.1",
+  "version": "1.6.9-beta.2",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",