sceyt-chat-react-uikit 1.6.8-beta.15 → 1.6.8-beta.17

package/index.modern.js

@@ -8268,9 +8268,6 @@ function checkChannelExistsOnMessagesMap(channelId) {
   return !!messagesMap[channelId];
 }
 var pendingVideoAttachmentsThumbs = {};
-var setVideoThumb = function setVideoThumb(attachmentId, thumb) {
-  pendingVideoAttachmentsThumbs[attachmentId] = thumb;
-};
 var getVideoThumb = function getVideoThumb(attachmentId) {
   return pendingVideoAttachmentsThumbs[attachmentId];
 };
@@ -11170,7 +11167,7 @@ var UploadAvatarButton = styled.button(_templateObject24 || (_templateObject24 =
 var UploadAvatarHandler = styled.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledText = styled.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
+var StyledText = styled.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n    cursor: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
   return props.fontWeight || props.isLastMessage && '500';
 }, function (props) {
   return props.fontFamily;
@@ -11184,6 +11181,8 @@ var StyledText = styled.span(_templateObject26 || (_templateObject26 = _taggedTe
   return props.color;
 }, function (props) {
   return props.isLastMessage && '500';
+}, function (props) {
+  return props.shouldOpenUserProfileForMention && 'pointer';
 });
 var MessageOwner = styled.h3(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n  margin: 0 12px 4px 0;\n  white-space: nowrap;\n  color: ", ";\n  margin-left: ", ";\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n  cursor: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
   return props.color;
@@ -11429,7 +11428,9 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     isLastMessage = _ref2.isLastMessage,
     asSampleText = _ref2.asSampleText,
     accentColor = _ref2.accentColor,
-    textSecondary = _ref2.textSecondary;
+    textSecondary = _ref2.textSecondary,
+    onMentionNameClick = _ref2.onMentionNameClick,
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
   try {
     var messageText = [];
     var linkify = new LinkifyIt();
@@ -11474,12 +11475,18 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
                 className: "" + combinedAttributesList[index - 1].type,
                 isLastMessage: isLastMessage,
                 key: attributeOffset + index,
-                color: isLastMessage ? textSecondary : accentColor
+                color: isLastMessage ? textSecondary : accentColor,
+                shouldOpenUserProfileForMention: onMentionNameClick && shouldOpenUserProfileForMention
               }, firsTextPart, /*#__PURE__*/React__default.createElement(StyledText, {
                 className: 'mention',
                 isLastMessage: isLastMessage,
                 color: isLastMessage ? textSecondary : accentColor,
-                key: attributeOffset + index
+                key: attributeOffset + index,
+                onClick: function onClick() {
+                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                    onMentionNameClick(mentionDisplay);
+                  }
+                }
               }, mentionDisplayName), secondTextPart)), index === combinedAttributesList.length - 1 ? secondPart : '');
             } else {
               nextPartIndex = attribute.offset + attribute.length;
@@ -11487,7 +11494,13 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
                 className: attribute.type,
                 isLastMessage: isLastMessage,
                 color: isLastMessage ? textSecondary : accentColor,
-                key: attributeOffset
+                key: attributeOffset,
+                onClick: function onClick() {
+                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                    onMentionNameClick(mentionDisplay);
+                  }
+                },
+                shouldOpenUserProfileForMention: onMentionNameClick && shouldOpenUserProfileForMention
               }, mentionDisplayName)), index === combinedAttributesList.length - 1 ? secondPart : '');
             }
           } else {
@@ -15490,21 +15503,6 @@ var addData = function addData(db, storeName, keyPath, data) {
   }
 };
 
-var getFrame3 = function getFrame3(video, time) {
-  try {
-    var canvas = document.createElement('canvas');
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    var ctx = canvas.getContext('2d');
-    if (time) {
-      video.currentTime = time;
-    }
-    ctx.drawImage(video, 0, 0);
-    return Promise.resolve(createImageThumbnail(null, canvas.toDataURL(), 10, 10));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
 var getFrame = function getFrame(videoSrc, time) {
   try {
     var video = document.createElement('video');
@@ -25411,55 +25409,42 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
     }
   }
   useEffect(function () {
-    var checkVideoInterval;
-    if (videoRef.current) {
-      var intervalCount = 0;
-      checkVideoInterval = setInterval(function () {
-        try {
-          var _temp4 = function _temp4() {
-            if (intervalCount >= 8) {
-              if (setVideoIsReadyToSend) {
-                setVideoIsReadyToSend(file.tid);
-                clearInterval(checkVideoInterval);
-              }
-            }
-          };
-          intervalCount++;
-          var _temp3 = function () {
-            if (videoRef.current && videoRef.current.readyState > 3) {
-              var _temp2 = function _temp2() {
-                clearInterval(checkVideoInterval);
-              };
-              setLoading(false);
-              setVideoDuration(videoRef.current.duration);
-              var minutes = Math.floor(videoRef.current.duration / 60);
-              var seconds = Math.floor(videoRef.current.duration % 60);
-              setVideoCurrentTime(minutes + ":" + (seconds < 10 ? "0" + seconds : seconds));
-              var _temp = function () {
-                if (isPreview) {
-                  return Promise.resolve(getFrame3(videoRef.current, 0)).then(function (thumb) {
-                    if (thumb) {
-                      setVideoThumb(file.tid, _extends({}, thumb, {
-                        duration: videoRef.current.duration
-                      }));
-                      if (setVideoIsReadyToSend) {
-                        setVideoIsReadyToSend(file.tid);
-                      }
-                    }
-                  });
-                }
-              }();
-              return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
-            }
-          }();
-          return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3));
-        } catch (e) {
-          return Promise.reject(e);
+    var video = videoRef.current;
+    if (!video) return;
+    var checkReadyState = function checkReadyState() {
+      if (video.readyState > 3) {
+        setLoading(false);
+        setVideoDuration(video.duration);
+        var minutes = Math.floor(video.duration / 60);
+        var seconds = Math.floor(video.duration % 60);
+        setVideoCurrentTime(minutes + ":" + (seconds < 10 ? "0" + seconds : seconds));
+        console.log('videoCurrentTime **************', minutes + ":" + (seconds < 10 ? "0" + seconds : seconds));
+        if (setVideoIsReadyToSend) {
+          setVideoIsReadyToSend(file.tid);
         }
-      }, 1000);
-    }
+        return true;
+      }
+      return false;
+    };
+    if (checkReadyState()) return;
+    var handleCanPlay = function handleCanPlay() {
+      return checkReadyState();
+    };
+    var handleLoadedMetadata = function handleLoadedMetadata() {
+      return checkReadyState();
+    };
+    video.addEventListener('canplay', handleCanPlay);
+    video.addEventListener('loadedmetadata', handleLoadedMetadata);
+    var interval = setInterval(function () {
+      console.log('checkReadyState **************');
+      if (checkReadyState()) {
+        clearInterval(interval);
+      }
+    }, 1000);
     return function () {
-      return clearInterval(checkVideoInterval);
+      video.removeEventListener('canplay', handleCanPlay);
+      video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+      clearInterval(interval);
     };
   }, []);
   useEffect(function () {
@@ -25504,7 +25489,7 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
   }, !isRepliedMessage && !isPreview && /*#__PURE__*/React__default.createElement(SvgVideoCall, null), videoCurrentTime))));
 });
 var VideoControls = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var VideoTime = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  font-size: ", ";\n  display: flex;\n  align-items: center;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  line-height: 14px;\n  color: ", ";\n\n  & > svg {\n    color: ", ";\n    margin-right: 4px;\n  }\n"])), function (props) {
+var VideoTime = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  font-size: ", ";\n  display: flex;\n  align-items: center;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  line-height: 14px;\n  color: ", ";\n  z-index: 10;\n\n  & > svg {\n    color: ", ";\n    margin-right: 4px;\n  }\n"])), function (props) {
   return props.isRepliedMessage ? '3px' : props.isDetailsView ? undefined : '8px';
 }, function (props) {
   return props.isDetailsView ? '8px' : undefined;
@@ -29393,7 +29378,7 @@ var HiddenMessageTime = styled.span(_templateObject2$u || (_templateObject2$u =
 }, function (props) {
   return props.color;
 });
-var MessageStatusAndTimeContainer = styled.span(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  display: ", ";\n  align-items: flex-end;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  float: right;\n  line-height: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  direction: ", ";\n  transform: translate(0px, 4px);\n  white-space: nowrap;\n  width: ", ";\n  justify-content: ", ";\n\n  & > svg {\n    margin-left: 4px;\n    height: 14px;\n    width: 16px;\n  }\n\n  & > ", " {\n    color: ", ";\n  }\n\n  ", "\n"])), function (props) {
+var MessageStatusAndTimeContainer = styled.span(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  display: ", ";\n  align-items: flex-end;\n  border-radius: 16px;\n  padding: ", ";\n  background-color: ", ";\n  float: right;\n  line-height: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  margin-bottom: ", ";\n  direction: ", ";\n  transform: translate(0px, 4px);\n  white-space: nowrap;\n  width: ", ";\n  justify-content: ", ";\n  z-index: 10;\n\n  & > svg {\n    margin-left: 4px;\n    height: 14px;\n    width: 16px;\n  }\n\n  & > ", " {\n    color: ", ";\n  }\n\n  ", "\n"])), function (props) {
   return props.showOnlyOnHover && 'hidden';
 }, function (props) {
   return props.hide ? 'none' : 'flex';
@@ -29418,7 +29403,7 @@ var MessageStatusAndTimeContainer = styled.span(_templateObject3$o || (_template
 }, HiddenMessageTime, function (props) {
   return props.withAttachment ? props.messageTimeColorOnAttachment : '';
 }, function (props) {
-  return props.withAttachment && "\n    position: absolute;\n    z-index: 3;\n    right: " + (props.fileAttachment ? '6px' : '10px') + ";\n    bottom: " + (props.fileAttachment ? '9px' : '14px') + ";\n  ";
+  return props.withAttachment && "\n    position: absolute;\n    z-index: 10;\n    right: " + (props.fileAttachment ? '6px' : '10px') + ";\n    bottom: " + (props.fileAttachment ? '9px' : '14px') + ";\n  ";
 });
 var MessageStatusUpdated = styled.span(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  font-style: italic;\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
   return props.fontSize || '12px';
@@ -29561,7 +29546,9 @@ var MessageBody = function MessageBody(_ref) {
     handleMouseLeave = _ref.handleMouseLeave,
     handleReactionAddDelete = _ref.handleReactionAddDelete,
     handleCreateChat = _ref.handleCreateChat,
-    messageTextRef = _ref.messageTextRef;
+    messageTextRef = _ref.messageTextRef,
+    handleOpenUserProfile = _ref.handleOpenUserProfile,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -29762,7 +29749,9 @@ var MessageBody = function MessageBody(_ref) {
     contactsMap: contactsMap,
     getFromContacts: getFromContacts,
     accentColor: accentColor,
-    textSecondary: textSecondary
+    textSecondary: textSecondary,
+    onMentionNameClick: handleOpenUserProfile,
+    shouldOpenUserProfileForMention: !!shouldOpenUserProfileForMention
   })), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
     color: textSecondary
   }, " Message was deleted. ")) : '', messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
@@ -30048,7 +30037,8 @@ var Message$1 = function Message(_ref) {
     theme = _ref.theme,
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
-    messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment;
+    messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
@@ -30312,6 +30302,21 @@ var Message$1 = function Message(_ref) {
       document.removeEventListener('mousedown', handleClick);
     };
   }, []);
+  var handleOpenChannelDetails = function handleOpenChannelDetails() {
+    dispatch(switchChannelInfoAC(true));
+  };
+  var handleOpenUserProfile = function handleOpenUserProfile(user) {
+    if (getOpenChatOnUserInteraction() && user && !selectionIsActive) {
+      dispatch(createChannelAC({
+        metadata: '',
+        type: DEFAULT_CHANNEL_TYPE.DIRECT,
+        members: [_extends({}, user, {
+          role: 'owner'
+        })]
+      }, true));
+      handleOpenChannelDetails();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(MessageItem, {
     className: 'message_item',
     rtl: ownMessageOnRightSide && !message.incoming,
@@ -30380,7 +30385,8 @@ var Message$1 = function Message(_ref) {
     handleReactionAddDelete: handleReactionAddDelete,
     handleScrollToRepliedMessage: handleScrollToRepliedMessage,
     handleMediaItemClick: handleMediaItemClick,
-    isThreadMessage: isThreadMessage
+    isThreadMessage: isThreadMessage,
+    handleOpenUserProfile: handleOpenUserProfile
   })) : (/*#__PURE__*/React__default.createElement(MessageBody$1, {
     message: message,
     channel: channel,
@@ -30500,7 +30506,9 @@ var Message$1 = function Message(_ref) {
     handleDeletePendingMessage: handleDeletePendingMessage,
     handleCreateChat: handleCreateChat,
     messageTextRef: messageTextRef,
-    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
+    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary,
+    handleOpenUserProfile: handleOpenUserProfile,
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
   })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -30748,7 +30756,7 @@ var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   }));
 };
 var MessageList = function MessageList(_ref2) {
-  var _channel$lastMessage, _channel$lastMessage2, _scrollRef$current;
+  var _channel$lastMessage, _channel$lastMessage3, _scrollRef$current;
   var messages = _ref2.messages,
     fontFamily = _ref2.fontFamily,
     _ref2$ownMessageOnRig = _ref2.ownMessageOnRightSide,
@@ -30889,7 +30897,8 @@ var MessageList = function MessageList(_ref2) {
     messageTimeFontSize = _ref2.messageTimeFontSize,
     messageTimeColor = _ref2.messageTimeColor,
     messageStatusAndTimeLineHeight = _ref2.messageStatusAndTimeLineHeight,
-    hiddenMessagesProperties = _ref2.hiddenMessagesProperties;
+    hiddenMessagesProperties = _ref2.hiddenMessagesProperties,
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -31186,10 +31195,11 @@ var MessageList = function MessageList(_ref2) {
     }
   };
   useEffect(function () {
-    if (messages.length > 0 && messages[messages.length - 1].id === channel.lastMessage.id && scrollRef.current && scrollRef.current.scrollTop > -50 && !showScrollToNewMessageButton) {
+    var _messages, _channel$lastMessage2;
+    if (messages.length > 0 && ((_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.id) === ((_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id) && scrollRef.current && scrollRef.current.scrollTop > -50 && !showScrollToNewMessageButton) {
       dispatch(showScrollToNewMessageButtonAC(false));
     }
-  }, [messages, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id, scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop, showScrollToNewMessageButton]);
+  }, [messages, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage3 = channel.lastMessage) === null || _channel$lastMessage3 === void 0 ? void 0 : _channel$lastMessage3.id, scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop, showScrollToNewMessageButton]);
   useEffect(function () {
     if (scrollToRepliedMessage) {
       loading = false;
@@ -31633,7 +31643,8 @@ var MessageList = function MessageList(_ref2) {
       messageStateColor: messageStateColor,
       messageTimeFontSize: messageTimeFontSize,
       messageTimeColor: messageTimeColor,
-      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight
+      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
+      shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
     }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
       theme: theme,
       newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
@@ -31868,7 +31879,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeColor = _ref.messageTimeColor,
     messageStatusAndTimeLineHeight = _ref.messageStatusAndTimeLineHeight,
     _ref$hiddenMessagesPr = _ref.hiddenMessagesProperties,
-    hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr;
+    hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var messages = useSelector(activeChannelMessagesSelector) || [];
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
     messages: messages,
@@ -31996,7 +32008,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeFontSize: messageTimeFontSize,
     messageTimeColor: messageTimeColor,
     messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
-    hiddenMessagesProperties: hiddenMessagesProperties
+    hiddenMessagesProperties: hiddenMessagesProperties,
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
   }));
 };
 
@@ -34810,7 +34823,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
             fileChecksum = "" + reader.result;
           }
           return Promise.resolve(hashString(fileChecksum || '')).then(function (checksumHash) {
-            function _temp10() {
+            function _temp12() {
               if (dataFromDb) {
                 cachedUrl = dataFromDb.url;
                 setPendingAttachment(tid, {
@@ -34822,60 +34835,85 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                   checksum: checksumHash
                 });
               }
-              var _temp0 = function () {
+              var _temp10 = function () {
                 if (customUploader) {
-                  if (fileType === 'image') {
-                    resizeImage(file).then(function (resizedFile) {
-                      try {
-                        setAttachments(function (prevState) {
-                          return [].concat(prevState, [{
-                            data: file,
-                            cachedUrl: cachedUrl,
-                            upload: false,
-                            type: isMediaAttachment ? fileType : 'file',
-                            attachmentUrl: URL.createObjectURL(resizedFile.blob),
-                            tid: tid,
-                            size: dataFromDb ? dataFromDb.size : file.size,
-                            metadata: dataFromDb && dataFromDb.metadata
-                          }]);
-                        });
-                        return Promise.resolve();
-                      } catch (e) {
-                        return Promise.reject(e);
-                      }
-                    });
-                  } else if (fileType === 'video') {
-                    setAttachments(function (prevState) {
-                      return [].concat(prevState, [{
-                        data: file,
-                        cachedUrl: cachedUrl,
-                        upload: false,
-                        type: isMediaAttachment ? fileType : 'file',
-                        attachmentUrl: URL.createObjectURL(file),
-                        tid: tid,
-                        size: dataFromDb ? dataFromDb.size : file.size,
-                        metadata: dataFromDb && dataFromDb.metadata
-                      }]);
-                    });
-                  } else {
-                    setAttachments(function (prevState) {
-                      return [].concat(prevState, [{
-                        data: file,
-                        cachedUrl: cachedUrl,
-                        upload: false,
-                        type: 'file',
-                        tid: tid,
-                        size: dataFromDb ? dataFromDb.size : file.size,
-                        metadata: dataFromDb && dataFromDb.metadata
-                      }]);
-                    });
-                  }
+                  var _temp2 = function () {
+                    if (fileType === 'image') {
+                      resizeImage(file).then(function (resizedFile) {
+                        try {
+                          return Promise.resolve(createImageThumbnail(file)).then(function (_ref4) {
+                            var thumbnail = _ref4.thumbnail,
+                              imageWidth = _ref4.imageWidth,
+                              imageHeight = _ref4.imageHeight;
+                            setAttachments(function (prevState) {
+                              return [].concat(prevState, [{
+                                data: file,
+                                cachedUrl: cachedUrl,
+                                upload: false,
+                                type: isMediaAttachment ? fileType : 'file',
+                                attachmentUrl: URL.createObjectURL(resizedFile.blob),
+                                tid: tid,
+                                size: dataFromDb ? dataFromDb.size : file.size,
+                                metadata: _extends({}, dataFromDb && dataFromDb.metadata, {
+                                  szw: imageWidth,
+                                  szh: imageHeight,
+                                  tmb: thumbnail
+                                })
+                              }]);
+                            });
+                          });
+                        } catch (e) {
+                          return Promise.reject(e);
+                        }
+                      });
+                    } else {
+                      var _temp13 = function () {
+                        if (fileType === 'video') {
+                          return Promise.resolve(getFrame(URL.createObjectURL(file), 0)).then(function (_ref5) {
+                            var thumb = _ref5.thumb,
+                              width = _ref5.width,
+                              height = _ref5.height;
+                            setAttachments(function (prevState) {
+                              return [].concat(prevState, [{
+                                data: file,
+                                cachedUrl: cachedUrl,
+                                upload: false,
+                                type: isMediaAttachment ? fileType : 'file',
+                                attachmentUrl: URL.createObjectURL(file),
+                                tid: tid,
+                                size: dataFromDb ? dataFromDb.size : file.size,
+                                metadata: _extends({}, dataFromDb && dataFromDb.metadata, {
+                                  szw: width,
+                                  szh: height,
+                                  tmb: thumb
+                                })
+                              }]);
+                            });
+                          });
+                        } else {
+                          setAttachments(function (prevState) {
+                            return [].concat(prevState, [{
+                              data: file,
+                              cachedUrl: cachedUrl,
+                              upload: false,
+                              type: 'file',
+                              tid: tid,
+                              size: dataFromDb ? dataFromDb.size : file.size,
+                              metadata: dataFromDb && dataFromDb.metadata
+                            }]);
+                          });
+                        }
+                      }();
+                      if (_temp13 && _temp13.then) return _temp13.then(function () {});
+                    }
+                  }();
+                  if (_temp2 && _temp2.then) return _temp2.then(function () {});
                 } else {
-                  var _temp9 = function () {
+                  var _temp1 = function () {
                     if (fileType === 'image') {
-                      var _temp5 = function () {
+                      var _temp7 = function () {
                         if (isMediaAttachment) {
-                          var _temp2 = function _temp2() {
+                          var _temp4 = function _temp4() {
                             if (file.type === 'image/gif') {
                               setAttachments(function (prevState) {
                                 return [].concat(prevState, [{
@@ -34935,23 +34973,23 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                             }
                           };
                           var metas = {};
-                          var _temp = function () {
+                          var _temp3 = function () {
                             if (dataFromDb) {
                               metas = dataFromDb.metadata;
                             } else {
-                              return Promise.resolve(createImageThumbnail(file)).then(function (_ref4) {
-                                var thumbnail = _ref4.thumbnail,
-                                  imageWidth = _ref4.imageWidth,
-                                  imageHeight = _ref4.imageHeight;
+                              return Promise.resolve(createImageThumbnail(file)).then(function (_ref6) {
+                                var thumbnail = _ref6.thumbnail,
+                                  imageWidth = _ref6.imageWidth,
+                                  imageHeight = _ref6.imageHeight;
                                 metas.imageHeight = imageHeight;
                                 metas.imageWidth = imageWidth;
                                 metas.thumbnail = thumbnail;
                               });
                             }
                           }();
-                          return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+                          return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
                         } else {
-                          var _temp4 = function _temp4() {
+                          var _temp6 = function _temp6() {
                             setAttachments(function (prevState) {
                               return [].concat(prevState, [{
                                 data: file,
@@ -34968,24 +35006,24 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                             });
                           };
                           var _metas = {};
-                          var _temp3 = function () {
+                          var _temp5 = function () {
                             if (dataFromDb) {
                               _metas = dataFromDb.metadata;
                             } else {
-                              return Promise.resolve(createImageThumbnail(file, undefined, 50, 50)).then(function (_ref5) {
-                                var thumbnail = _ref5.thumbnail;
+                              return Promise.resolve(createImageThumbnail(file, undefined, 50, 50)).then(function (_ref7) {
+                                var thumbnail = _ref7.thumbnail;
                                 _metas.thumbnail = thumbnail;
                               });
                             }
                           }();
-                          return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+                          return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
                         }
                       }();
-                      if (_temp5 && _temp5.then) return _temp5.then(function () {});
+                      if (_temp7 && _temp7.then) return _temp7.then(function () {});
                     } else {
-                      var _temp11 = function () {
+                      var _temp14 = function () {
                         if (fileType === 'video') {
-                          var _temp7 = function _temp7() {
+                          var _temp9 = function _temp9() {
                             setAttachments(function (prevState) {
                               return [].concat(prevState, [{
                                 data: file,
@@ -35000,14 +35038,14 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                             });
                           };
                           var metas = {};
-                          var _temp6 = function () {
+                          var _temp8 = function () {
                             if (dataFromDb) {
                               metas = dataFromDb.metadata;
                             } else {
-                              return Promise.resolve(getFrame(URL.createObjectURL(file), 0)).then(function (_ref6) {
-                                var thumb = _ref6.thumb,
-                                  width = _ref6.width,
-                                  height = _ref6.height;
+                              return Promise.resolve(getFrame(URL.createObjectURL(file), 0)).then(function (_ref8) {
+                                var thumb = _ref8.thumb,
+                                  width = _ref8.width,
+                                  height = _ref8.height;
                                 metas.tmb = thumb;
                                 metas.width = width;
                                 metas.height = height;
@@ -35015,7 +35053,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                               });
                             }
                           }();
-                          return _temp6 && _temp6.then ? _temp6.then(_temp7) : _temp7(_temp6);
+                          return _temp8 && _temp8.then ? _temp8.then(_temp9) : _temp9(_temp8);
                         } else {
                           setAttachments(function (prevState) {
                             return [].concat(prevState, [{
@@ -35030,23 +35068,23 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                           });
                         }
                       }();
-                      if (_temp11 && _temp11.then) return _temp11.then(function () {});
+                      if (_temp14 && _temp14.then) return _temp14.then(function () {});
                     }
                   }();
-                  if (_temp9 && _temp9.then) return _temp9.then(function () {});
+                  if (_temp1 && _temp1.then) return _temp1.then(function () {});
                 }
               }();
-              if (_temp0 && _temp0.then) return _temp0.then(function () {});
+              if (_temp10 && _temp10.then) return _temp10.then(function () {});
             }
             var dataFromDb;
-            var _temp1 = _catch(function () {
+            var _temp11 = _catch(function () {
               return Promise.resolve(_getDataFromDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, checksumHash, 'checksum')).then(function (_getDataFromDB) {
                 dataFromDb = _getDataFromDB;
               });
             }, function (e) {
               log.error('error in get data from db . . . . ', e);
             });
-            return _temp1 && _temp1.then ? _temp1.then(_temp10) : _temp10(_temp1);
+            return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
           });
         } catch (e) {
           return Promise.reject(e);

package/messageUtils/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IContactsMap } from '../types';
+import { IContactsMap, IUser } from '../types';
 declare const MessageStatusIcon: ({ messageStatus, messageStatusDisplayingType, color, readIconColor, size, accentColor }: {
     messageStatus: string;
     messageStatusDisplayingType?: string | undefined;
@@ -8,7 +8,7 @@ declare const MessageStatusIcon: ({ messageStatus, messageStatusDisplayingType,
     readIconColor?: string | undefined;
     accentColor?: string | undefined;
 }) => React.JSX.Element;
-declare const MessageTextFormat: ({ text, message, contactsMap, getFromContacts, isLastMessage, asSampleText, accentColor, textSecondary }: {
+declare const MessageTextFormat: ({ text, message, contactsMap, getFromContacts, isLastMessage, asSampleText, accentColor, textSecondary, onMentionNameClick, shouldOpenUserProfileForMention }: {
     text: string;
     message: any;
     contactsMap?: IContactsMap | undefined;
@@ -17,5 +17,7 @@ declare const MessageTextFormat: ({ text, message, contactsMap, getFromContacts,
     asSampleText?: boolean | undefined;
     accentColor: string;
     textSecondary: string;
+    onMentionNameClick?: ((user: IUser) => void) | undefined;
+    shouldOpenUserProfileForMention?: boolean | undefined;
 }) => any;
 export { MessageStatusIcon, MessageTextFormat };