sceyt-chat-react-uikit 1.7.6-beta.11 → 1.7.6-beta.13

package/index.js

@@ -9883,6 +9883,11 @@ var calculateRenderedImageWidth = function calculateRenderedImageWidth(width, he
     }
   }
 };
+var formatChannelDetailsDate = function formatChannelDetailsDate(date) {
+  if (!date) return '';
+  var momentDate = moment(date);
+  return momentDate.isValid() ? momentDate.format('DD.MM.YY, HH:mm') : '';
+};
 var userLastActiveDateFormat = function userLastActiveDateFormat(date) {
   var formattingDate = moment(date).format();
   var currentTime = moment();
@@ -15016,9 +15021,7 @@ function watchForEvents() {
                   _context.n = 77;
                   break;
                 }
-                lastMessage = _extends({}, _channel6.lastMessage, {
-                  deliveryStatus: markerList.name
-                });
+                lastMessage = _extends({}, _channel6.lastMessage, updateMessageDeliveryStatusAndMarkers(_channel6.lastMessage, markerList.name));
                 updateChannelLastMessageOnAllChannels(_channel6.id, lastMessage);
                 _context.n = 77;
                 return effects.put(updateChannelLastMessageStatusAC(lastMessage, _channel6));
@@ -23186,7 +23189,9 @@ function JoinGroupPopup(_ref) {
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     background = _useColor[THEME_COLORS.BACKGROUND],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    surface1 = _useColor[THEME_COLORS.SURFACE_1];
+    surface1 = _useColor[THEME_COLORS.SURFACE_1],
+    accentColor = _useColor[THEME_COLORS.ACCENT],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
   var contactsMap = useSelector(contactsMapSelector, reactRedux.shallowEqual);
   var members = React.useMemo(function () {
     return channel.members.map(function (m) {
@@ -23286,8 +23291,8 @@ function JoinGroupPopup(_ref) {
     color: textSecondary
   }, membersLine), /*#__PURE__*/React__default.createElement(Center, null, /*#__PURE__*/React__default.createElement(Button, {
     type: 'button',
-    color: '#fff',
-    backgroundColor: '#0DBD8B',
+    color: textOnPrimary,
+    backgroundColor: accentColor,
     borderRadius: '8px',
     onClick: onJoin
   }, joinButtonText)))));
@@ -36644,6 +36649,7 @@ var Message$1 = function Message(_ref) {
       left: reactionsContainer ? reactionsContainer.getBoundingClientRect().left : 0,
       right: reactionsContPos ? window.innerWidth - reactionsContPos.left - reactionsContPos.width : 0
     });
+    dispatch(setReactionsListAC([], false));
     setReactionsPopupOpen(!reactionsPopupOpen);
   };
   var handleMouseEnter = function handleMouseEnter() {
@@ -36734,7 +36740,7 @@ var Message$1 = function Message(_ref) {
     }
   };
   React.useEffect(function () {
-    if (isVisible) {
+    if (isVisible && !unreadScrollTo) {
       var _channel$lastMessage;
       if (setLastVisibleMessageId) {
         setLastVisibleMessageId(message.id);
@@ -36752,7 +36758,7 @@ var Message$1 = function Message(_ref) {
         removeMessageFromVisibleMessagesMap(message);
       }
     }
-  }, [isVisible]);
+  }, [isVisible, unreadScrollTo]);
   useDidUpdate(function () {
     if (tabIsActive) {
       handleSendReadMarker();
@@ -38036,6 +38042,9 @@ var MessageList = function MessageList(_ref2) {
           setScrollIntoView(false);
         }, 100);
       }
+    } else {
+      dispatch(setUnreadScrollToAC(false));
+      setScrollIntoView(false);
     }
   }, [channel.id, channel.newMessageCount, scrollRef.current, unreadScrollTo, channel.lastDisplayedMessageId, scrollIntoView, messages.length]);
   React.useEffect(function () {
@@ -42886,7 +42895,28 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     iconColor: textOnPrimary
   }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, null, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
     color: accentColor
-  }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), " Reply to", /*#__PURE__*/React__default.createElement(UserName$1, null, user.id === messageForReply.user.id ? user.firstName ? user.firstName + " " + user.lastName : user.id : makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? 'Voice' : messageForReply.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Photo')) : messageForReply.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Video')) : (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'File')) : MessageTextFormat({
+  }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), " Reply to", /*#__PURE__*/React__default.createElement(UserName$1, null, user.id === messageForReply.user.id ? user.firstName ? user.firstName + " " + user.lastName : user.id : makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? 'Voice' : messageForReply.body && messageForReply.bodyAttributes && messageForReply.bodyAttributes.length > 0 ? MessageTextFormat({
+    text: messageForReply.body,
+    message: _extends({}, messageForReply, {
+      mentionedUsers: messageForReply.mentionedUsers && messageForReply.mentionedUsers.length > 0 ? messageForReply.mentionedUsers : activeChannelMembers && messageForReply.bodyAttributes && messageForReply.bodyAttributes.length > 0 ? messageForReply.bodyAttributes.filter(function (attr) {
+        return attr.type.includes('mention');
+      }).map(function (attr) {
+        var member = activeChannelMembers.find(function (m) {
+          return m.id === attr.metadata;
+        });
+        return member || null;
+      }).filter(function (m) {
+        return m !== null;
+      }) : messageForReply.mentionedUsers || [],
+      channel: activeChannelMembers ? {
+        members: activeChannelMembers
+      } : undefined
+    }),
+    contactsMap: contactsMap,
+    getFromContacts: getFromContacts,
+    accentColor: accentColor,
+    textSecondary: textSecondary
+  }) : messageForReply.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Photo')) : messageForReply.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Video')) : (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'File')) : MessageTextFormat({
     text: messageForReply.body,
     message: messageForReply,
     contactsMap: contactsMap,
@@ -45223,7 +45253,7 @@ var Files = function Files(_ref) {
       fontSize: fileSizeFontSize,
       lineHeight: fileSizeLineHeight,
       color: filePreviewSizeColor || textSecondary
-    }, file.size ? bytesToSize(file.size) : '')), /*#__PURE__*/React__default.createElement(DownloadWrapper, {
+    }, file.size ? bytesToSize(file.size) + " \u2022 " + formatChannelDetailsDate(file.createdAt) : formatChannelDetailsDate(file.createdAt))), /*#__PURE__*/React__default.createElement(DownloadWrapper, {
       visible: !!downloadingFilesMap[file.id],
       iconColor: accentColor,
       onClick: function onClick() {
@@ -45555,7 +45585,7 @@ var VoiceItem = function VoiceItem(_ref) {
     color: voicePreviewTitleColor || textPrimary
   }, file.user && (file.user.id === user.id ? 'You' : makeUsername(contactsMap[file.user.id], file.user, getFromContacts))), /*#__PURE__*/React__default.createElement(AudioDate, {
     color: voicePreviewDateAndTimeColor || textSecondary
-  }, moment(file.createdAt).format('DD MMMM, YYYY')), /*#__PURE__*/React__default.createElement(AudioSendTime, {
+  }, formatChannelDetailsDate(file.createdAt)), /*#__PURE__*/React__default.createElement(AudioSendTime, {
     color: textSecondary
   }, currentTime || (file.metadata.dur ? formatAudioVideoTime(file.metadata.dur) : ''))), /*#__PURE__*/React__default.createElement(Audio, {
     controls: true,
@@ -45586,7 +45616,7 @@ var AudioInfo = styled__default.div(_templateObject4$F || (_templateObject4$F =
 var AudioTitle = styled__default.span(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioDate = styled__default.span(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AudioDate = styled__default.span(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 var AudioSendTime = styled__default.span(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {

package/index.modern.js

@@ -9882,6 +9882,11 @@ var calculateRenderedImageWidth = function calculateRenderedImageWidth(width, he
     }
   }
 };
+var formatChannelDetailsDate = function formatChannelDetailsDate(date) {
+  if (!date) return '';
+  var momentDate = moment(date);
+  return momentDate.isValid() ? momentDate.format('DD.MM.YY, HH:mm') : '';
+};
 var userLastActiveDateFormat = function userLastActiveDateFormat(date) {
   var formattingDate = moment(date).format();
   var currentTime = moment();
@@ -15015,9 +15020,7 @@ function watchForEvents() {
                   _context.n = 77;
                   break;
                 }
-                lastMessage = _extends({}, _channel6.lastMessage, {
-                  deliveryStatus: markerList.name
-                });
+                lastMessage = _extends({}, _channel6.lastMessage, updateMessageDeliveryStatusAndMarkers(_channel6.lastMessage, markerList.name));
                 updateChannelLastMessageOnAllChannels(_channel6.id, lastMessage);
                 _context.n = 77;
                 return put(updateChannelLastMessageStatusAC(lastMessage, _channel6));
@@ -23185,7 +23188,9 @@ function JoinGroupPopup(_ref) {
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     background = _useColor[THEME_COLORS.BACKGROUND],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    surface1 = _useColor[THEME_COLORS.SURFACE_1];
+    surface1 = _useColor[THEME_COLORS.SURFACE_1],
+    accentColor = _useColor[THEME_COLORS.ACCENT],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
   var contactsMap = useSelector(contactsMapSelector, shallowEqual);
   var members = useMemo(function () {
     return channel.members.map(function (m) {
@@ -23285,8 +23290,8 @@ function JoinGroupPopup(_ref) {
     color: textSecondary
   }, membersLine), /*#__PURE__*/React__default.createElement(Center, null, /*#__PURE__*/React__default.createElement(Button, {
     type: 'button',
-    color: '#fff',
-    backgroundColor: '#0DBD8B',
+    color: textOnPrimary,
+    backgroundColor: accentColor,
     borderRadius: '8px',
     onClick: onJoin
   }, joinButtonText)))));
@@ -36643,6 +36648,7 @@ var Message$1 = function Message(_ref) {
       left: reactionsContainer ? reactionsContainer.getBoundingClientRect().left : 0,
       right: reactionsContPos ? window.innerWidth - reactionsContPos.left - reactionsContPos.width : 0
     });
+    dispatch(setReactionsListAC([], false));
     setReactionsPopupOpen(!reactionsPopupOpen);
   };
   var handleMouseEnter = function handleMouseEnter() {
@@ -36733,7 +36739,7 @@ var Message$1 = function Message(_ref) {
     }
   };
   useEffect(function () {
-    if (isVisible) {
+    if (isVisible && !unreadScrollTo) {
       var _channel$lastMessage;
       if (setLastVisibleMessageId) {
         setLastVisibleMessageId(message.id);
@@ -36751,7 +36757,7 @@ var Message$1 = function Message(_ref) {
         removeMessageFromVisibleMessagesMap(message);
       }
     }
-  }, [isVisible]);
+  }, [isVisible, unreadScrollTo]);
   useDidUpdate(function () {
     if (tabIsActive) {
       handleSendReadMarker();
@@ -38035,6 +38041,9 @@ var MessageList = function MessageList(_ref2) {
           setScrollIntoView(false);
         }, 100);
       }
+    } else {
+      dispatch(setUnreadScrollToAC(false));
+      setScrollIntoView(false);
     }
   }, [channel.id, channel.newMessageCount, scrollRef.current, unreadScrollTo, channel.lastDisplayedMessageId, scrollIntoView, messages.length]);
   useEffect(function () {
@@ -42885,7 +42894,28 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     iconColor: textOnPrimary
   }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, null, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
     color: accentColor
-  }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), " Reply to", /*#__PURE__*/React__default.createElement(UserName$1, null, user.id === messageForReply.user.id ? user.firstName ? user.firstName + " " + user.lastName : user.id : makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? 'Voice' : messageForReply.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Photo')) : messageForReply.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Video')) : (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'File')) : MessageTextFormat({
+  }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), " Reply to", /*#__PURE__*/React__default.createElement(UserName$1, null, user.id === messageForReply.user.id ? user.firstName ? user.firstName + " " + user.lastName : user.id : makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? 'Voice' : messageForReply.body && messageForReply.bodyAttributes && messageForReply.bodyAttributes.length > 0 ? MessageTextFormat({
+    text: messageForReply.body,
+    message: _extends({}, messageForReply, {
+      mentionedUsers: messageForReply.mentionedUsers && messageForReply.mentionedUsers.length > 0 ? messageForReply.mentionedUsers : activeChannelMembers && messageForReply.bodyAttributes && messageForReply.bodyAttributes.length > 0 ? messageForReply.bodyAttributes.filter(function (attr) {
+        return attr.type.includes('mention');
+      }).map(function (attr) {
+        var member = activeChannelMembers.find(function (m) {
+          return m.id === attr.metadata;
+        });
+        return member || null;
+      }).filter(function (m) {
+        return m !== null;
+      }) : messageForReply.mentionedUsers || [],
+      channel: activeChannelMembers ? {
+        members: activeChannelMembers
+      } : undefined
+    }),
+    contactsMap: contactsMap,
+    getFromContacts: getFromContacts,
+    accentColor: accentColor,
+    textSecondary: textSecondary
+  }) : messageForReply.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Photo')) : messageForReply.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Video')) : (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'File')) : MessageTextFormat({
     text: messageForReply.body,
     message: messageForReply,
     contactsMap: contactsMap,
@@ -45222,7 +45252,7 @@ var Files = function Files(_ref) {
       fontSize: fileSizeFontSize,
       lineHeight: fileSizeLineHeight,
       color: filePreviewSizeColor || textSecondary
-    }, file.size ? bytesToSize(file.size) : '')), /*#__PURE__*/React__default.createElement(DownloadWrapper, {
+    }, file.size ? bytesToSize(file.size) + " \u2022 " + formatChannelDetailsDate(file.createdAt) : formatChannelDetailsDate(file.createdAt))), /*#__PURE__*/React__default.createElement(DownloadWrapper, {
       visible: !!downloadingFilesMap[file.id],
       iconColor: accentColor,
       onClick: function onClick() {
@@ -45554,7 +45584,7 @@ var VoiceItem = function VoiceItem(_ref) {
     color: voicePreviewTitleColor || textPrimary
   }, file.user && (file.user.id === user.id ? 'You' : makeUsername(contactsMap[file.user.id], file.user, getFromContacts))), /*#__PURE__*/React__default.createElement(AudioDate, {
     color: voicePreviewDateAndTimeColor || textSecondary
-  }, moment(file.createdAt).format('DD MMMM, YYYY')), /*#__PURE__*/React__default.createElement(AudioSendTime, {
+  }, formatChannelDetailsDate(file.createdAt)), /*#__PURE__*/React__default.createElement(AudioSendTime, {
     color: textSecondary
   }, currentTime || (file.metadata.dur ? formatAudioVideoTime(file.metadata.dur) : ''))), /*#__PURE__*/React__default.createElement(Audio, {
     controls: true,
@@ -45585,7 +45615,7 @@ var AudioInfo = styled.div(_templateObject4$F || (_templateObject4$F = _taggedTe
 var AudioTitle = styled.span(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var AudioDate = styled.span(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 12px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+var AudioDate = styled.span(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 var AudioSendTime = styled.span(_templateObject7$t || (_templateObject7$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {

package/package.json

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