sceyt-chat-react-uikit 1.7.5-beta.12 → 1.7.5-beta.13

package/index.modern.js

@@ -13651,6 +13651,12 @@ var CopiedTooltip = styled.span(_templateObject41 || (_templateObject41 = _tagge
   return p.color;
 });
 
+var SceytReduxContext = /*#__PURE__*/React__default.createContext(null);
+
+var useSelector = createSelectorHook(SceytReduxContext);
+var useDispatch = createDispatchHook(SceytReduxContext);
+var useStore = createStoreHook(SceytReduxContext);
+
 var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1;
 var StatusText = styled.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-weight: 400;\n  font-size: ", ";\n"])), function (props) {
   return props.color;
@@ -13726,7 +13732,7 @@ var MessageStatusIcon = function MessageStatusIcon(_ref) {
       });
   }
 };
-var linkifyTextPart = function linkifyTextPart(textPart, match, target) {
+var linkifyTextPart = function linkifyTextPart(textPart, match, target, isInviteLink, onInviteLinkClick) {
   if (target === void 0) {
     target = '_blank';
   }
@@ -13737,18 +13743,29 @@ var linkifyTextPart = function linkifyTextPart(textPart, match, target) {
     var matchIndex = textPart.indexOf(matchItem.text, lastFoundIndex);
     lastFoundIndex = matchIndex + matchItem.text.length;
     if (index === 0) {
-      newMessageText = [textPart.substring(0, matchIndex), /*#__PURE__*/React__default.createElement("a", {
+      newMessageText = [textPart.substring(0, matchIndex), /*#__PURE__*/React__default.createElement("a", Object.assign({
         draggable: false,
         key: index,
-        href: matchItem.url,
+        href: isInviteLink ? undefined : matchItem.url,
         target: target,
-        rel: 'noreferrer'
-      }, "" + matchItem.text)];
+        rel: 'noreferrer',
+        style: {
+          cursor: 'pointer'
+        }
+      }, isInviteLink ? {
+        onClick: function onClick() {
+          var splitedKey = matchItem.url.split('/');
+          var key = splitedKey[splitedKey.length - 1];
+          if (key) {
+            onInviteLinkClick === null || onInviteLinkClick === void 0 ? void 0 : onInviteLinkClick(key);
+          }
+        }
+      } : {}), "" + matchItem.text)];
     } else {
       newMessageText.push(textPart.substring(prevMatchEnd, matchIndex), /*#__PURE__*/React__default.createElement("a", {
         draggable: false,
         key: index,
-        href: matchItem.url,
+        href: isInviteLink ? undefined : matchItem.url,
         target: target,
         rel: 'noreferrer'
       }, "" + matchItem.text));
@@ -13773,7 +13790,13 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention,
     unsupportedMessage = _ref2.unsupportedMessage,
     _ref2$target = _ref2.target,
-    target = _ref2$target === void 0 ? '_blank' : _ref2$target;
+    target = _ref2$target === void 0 ? '_blank' : _ref2$target,
+    _ref2$isInviteLink = _ref2.isInviteLink,
+    isInviteLink = _ref2$isInviteLink === void 0 ? false : _ref2$isInviteLink;
+  var dispatch = useDispatch();
+  var onInviteLinkClick = function onInviteLinkClick(key) {
+    dispatch(getChannelByInviteKeyAC(key));
+  };
   try {
     var messageText = [];
     var linkify = new LinkifyIt();
@@ -13791,12 +13814,12 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
           var firstPart = "" + (textPart ? textPart === null || textPart === void 0 ? void 0 : textPart.substring(nextPartIndex || 0, attributeOffset) : '');
           var firstPartMatch = firstPart ? linkify.match(firstPart) : '';
           if (!isLastMessage && !asSampleText && firstPartMatch) {
-            firstPart = linkifyTextPart(firstPart, firstPartMatch, target);
+            firstPart = linkifyTextPart(firstPart, firstPartMatch, target, isInviteLink, onInviteLinkClick);
           }
           var secondPart = "" + (textPart ? textPart === null || textPart === void 0 ? void 0 : textPart.substring(attributeOffset + attribute.length) : '');
           var secondPartMatch = secondPart ? linkify.match(secondPart) : '';
           if (!isLastMessage && !asSampleText && secondPartMatch) {
-            secondPart = linkifyTextPart(secondPart, secondPartMatch, target);
+            secondPart = linkifyTextPart(secondPart, secondPartMatch, target, isInviteLink, onInviteLinkClick);
           }
           if (attribute.type.includes('mention')) {
             var mentionDisplay = message.mentionedUsers && message.mentionedUsers.find(function (men) {
@@ -13865,7 +13888,7 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     } else {
       var match = linkify.match(text);
       if (!isLastMessage && !asSampleText && match) {
-        messageText = linkifyTextPart(text, match, target);
+        messageText = linkifyTextPart(text, match, target, isInviteLink, onInviteLinkClick);
       }
     }
     return messageText.length > 1 ? asSampleText ? messageText.join('') : messageText : text;
@@ -17659,6 +17682,7 @@ function getChannelByInviteKey(action) {
         _context33.n = 2;
         return put(setJoinableChannelAC(JSON.parse(JSON.stringify(channel[0]))));
       case 2:
+        window.history.pushState({}, '', window.location.pathname + '?join=' + key);
         _context33.n = 5;
         break;
       case 3:
@@ -22292,12 +22316,6 @@ var store = configureStore({
 });
 sagaMiddleware.run(rootSaga);
 
-var SceytReduxContext = /*#__PURE__*/React__default.createContext(null);
-
-var useSelector = createSelectorHook(SceytReduxContext);
-var useDispatch = createDispatchHook(SceytReduxContext);
-var useStore = createStoreHook(SceytReduxContext);
-
 var channelsSelector = function channelsSelector(store) {
   return store.ChannelReducer.channels;
 };
@@ -22883,6 +22901,7 @@ function JoinGroupPopup(_ref) {
     height: '12px',
     width: '12px'
   }), /*#__PURE__*/React__default.createElement(TopAvatar, null, /*#__PURE__*/React__default.createElement(Avatar, {
+    key: channel.id,
     name: channel.subject || '',
     image: channel.avatar || '',
     size: 90,
@@ -22894,7 +22913,7 @@ function JoinGroupPopup(_ref) {
     color: textPrimary
   }, subtitleText), showMembersAvatars && (/*#__PURE__*/React__default.createElement(MembersRow, null, firstMembers.map(function (m, idx) {
     return /*#__PURE__*/React__default.createElement(MemberAvatar, {
-      key: m.id,
+      key: m.id || "member-" + idx,
       index: idx,
       borderColor: background
     }, /*#__PURE__*/React__default.createElement(Avatar, {
@@ -34410,6 +34429,8 @@ var OGMetadata = function OGMetadata(_ref) {
     ogContainerMargin = _ref.ogContainerMargin,
     _ref$target = _ref.target,
     target = _ref$target === void 0 ? '_blank' : _ref$target,
+    _ref$isInviteLink = _ref.isInviteLink,
+    isInviteLink = _ref$isInviteLink === void 0 ? false : _ref$isInviteLink,
     metadataGetSuccessCallback = _ref.metadataGetSuccessCallback;
   var dispatch = useDispatch();
   var oGMetadata = useSelector(function (state) {
@@ -34687,7 +34708,14 @@ var OGMetadata = function OGMetadata(_ref) {
       alt: ''
     })))) : textContent;
   }, [hasImage, elements, shouldAnimate, ogContainerShowBackground, ogShowFavicon, faviconUrl, textContent]);
-  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
+  var getChannel = useCallback(function () {
+    var splitedKey = attachment === null || attachment === void 0 ? void 0 : attachment.url.split('/');
+    var key = splitedKey[splitedKey.length - 1];
+    if (key) {
+      dispatch(getChannelByInviteKeyAC(key));
+    }
+  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
+  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, Object.assign({
     showOGMetadata: !!showOGMetadata,
     bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX,
     showBackground: ogContainerShowBackground,
@@ -34695,12 +34723,18 @@ var OGMetadata = function OGMetadata(_ref) {
     borderRadius: ogContainerBorderRadius,
     padding: ogContainerPadding,
     className: ogContainerClassName,
-    containerMargin: ogContainerMargin,
+    containerMargin: ogContainerMargin
+  }, isInviteLink ? {
+    as: 'div',
+    onClick: function onClick() {
+      getChannel();
+    }
+  } : {
     as: 'a',
     href: attachment === null || attachment === void 0 ? void 0 : attachment.url,
     target: target,
     rel: target === '_blank' ? 'noopener noreferrer' : undefined
-  }, content);
+  }), content);
 };
 var sharedKeyframes = "\n  @keyframes fadeInSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(10px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes expandHeight {\n    from {\n      max-height: 0;\n      opacity: 0;\n    }\n    to {\n      max-height: 1000px;\n      opacity: 1;\n    }\n  }\n";
 var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: ", ";\n  border-radius: ", ";\n  margin: ", ";\n  // margin-bottom: ", ";\n  padding: ", ";\n  text-decoration: none;\n  color: inherit;\n  &:hover {\n    opacity: 0.9;\n    cursor: pointer;\n  }\n"])), function (_ref2) {
@@ -35237,7 +35271,8 @@ var MessageBody = function MessageBody(_ref) {
     ogContainerClassName: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerClassName,
     ogContainerShowBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerShowBackground,
     ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
-    infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding
+    infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding,
+    isInviteLink: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink
   })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -35969,23 +36004,7 @@ var Message$1 = function Message(_ref) {
     messageTextLineHeight = _ref.messageTextLineHeight,
     messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
     shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
-    _ref$ogMetadataProps = _ref.ogMetadataProps,
-    ogMetadataProps = _ref$ogMetadataProps === void 0 ? {
-      maxWidth: 400,
-      maxHeight: undefined,
-      ogLayoutOrder: 'link-first',
-      ogShowUrl: false,
-      ogShowTitle: true,
-      ogShowDescription: true,
-      ogShowFavicon: true,
-      order: {
-        image: 1,
-        title: 2,
-        description: 3,
-        link: 4
-      },
-      infoPadding: '0 8px'
-    } : _ref$ogMetadataProps,
+    ogMetadataProps = _ref.ogMetadataProps,
     _ref$showInfoMessageP = _ref.showInfoMessageProps,
     showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP;
   var _useColor = useColors(),
@@ -36917,23 +36936,7 @@ var MessageList = function MessageList(_ref2) {
     shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention,
     _ref2$showInfoMessage = _ref2.showInfoMessageProps,
     showInfoMessageProps = _ref2$showInfoMessage === void 0 ? {} : _ref2$showInfoMessage,
-    _ref2$ogMetadataProps = _ref2.ogMetadataProps,
-    ogMetadataProps = _ref2$ogMetadataProps === void 0 ? {
-      maxWidth: 400,
-      maxHeight: undefined,
-      ogLayoutOrder: 'link-first',
-      ogShowUrl: false,
-      ogShowTitle: true,
-      ogShowDescription: true,
-      ogShowFavicon: true,
-      order: {
-        image: 1,
-        title: 2,
-        description: 3,
-        link: 4
-      },
-      infoPadding: '0 8px'
-    } : _ref2$ogMetadataProps;
+    ogMetadataProps = _ref2.ogMetadataProps;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -38026,7 +38029,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
         description: 3,
         link: 4
       },
-      infoPadding: '0 8px'
+      infoPadding: '0 8px',
+      isInviteLink: false
     } : _ref$ogMetadataProps;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
     fontFamily: fontFamily,
@@ -43689,145 +43693,24 @@ function InviteLinkModal(_ref) {
   };
   var handleForwardChannels = function handleForwardChannels(channelIds) {
     try {
-      if (!(channelIds !== null && channelIds !== void 0 && channelIds.length)) {
-        setOpenForwardPopup(false);
-        return Promise.resolve();
-      }
-      setOpenForwardPopup(false);
-      return Promise.resolve(_forOf(channelIds, function (channelId) {
-        var channel = getChannelFromMap(channelId);
-        var _temp3 = function () {
-          if (shareMode === 'link') {
-            var linkAttachmentBuilder = channel.createAttachmentBuilder(inviteUrl, attachmentTypes.link);
-            var linkAttachmentToSend = linkAttachmentBuilder.setName('Invite link').setUpload(false).create();
-            var message = {
-              metadata: '',
-              body: inviteUrl,
-              mentionedUsers: [],
-              type: 'text',
-              attachments: [linkAttachmentToSend]
-            };
-            dispatch(forwardMessageAC(message, channelId, connectionStatus, false));
-          } else {
-            var _temp2 = _catch(function () {
-              var toPngBlob = function toPngBlob() {
-                try {
-                  var dpr = 4;
-                  var baseQrSize = 200;
-                  var qrSize = baseQrSize * dpr;
-                  var qrUrl = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(inviteUrl) + "&size=" + qrSize + "x" + qrSize + "&ecc=H&margin=32&color=000000&bgcolor=FFFFFF";
-                  return Promise.resolve(fetch(qrUrl, {
-                    cache: 'no-store'
-                  })).then(function (qrResp) {
-                    return Promise.resolve(qrResp.blob()).then(function (qrBlob) {
-                      var qrObjectUrl = URL.createObjectURL(qrBlob);
-                      var boxWidth = qrSize;
-                      var boxHeight = qrSize;
-                      var canvas = document.createElement('canvas');
-                      canvas.width = boxWidth;
-                      canvas.height = boxHeight;
-                      var ctx = canvas.getContext('2d');
-                      var img = new Image();
-                      img.src = qrObjectUrl;
-                      return Promise.resolve(new Promise(function (resolve, reject) {
-                        img.onload = function () {
-                          return resolve(null);
-                        };
-                        img.onerror = reject;
-                      })).then(function () {
-                        var _logoRef$current;
-                        function _temp6() {
-                          URL.revokeObjectURL(qrObjectUrl);
-                          return Promise.resolve(new Promise(function (resolve) {
-                            return canvas.toBlob(function (b) {
-                              return resolve(b);
-                            }, 'image/png');
-                          }));
-                        }
-                        ctx.imageSmoothingEnabled = false;
-                        ctx.drawImage(img, 0, 0, qrSize, qrSize);
-                        var overlaySize = qrSize * 22 / 100;
-                        var overlayX = (boxWidth - overlaySize) / 2;
-                        var overlayY = (boxHeight - overlaySize) / 2;
-                        var roundedPath = function roundedPath(x, y, w, h, r) {
-                          ctx.beginPath();
-                          ctx.moveTo(x + r, y);
-                          ctx.lineTo(x + w - r, y);
-                          ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-                          ctx.lineTo(x + w, y + h - r);
-                          ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-                          ctx.lineTo(x + r, y + h);
-                          ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-                          ctx.lineTo(x, y + r);
-                          ctx.quadraticCurveTo(x, y, x + r, y);
-                          ctx.closePath();
-                        };
-                        var cornerRadius = 8 * dpr;
-                        var imgElement = (_logoRef$current = logoRef.current) === null || _logoRef$current === void 0 ? void 0 : _logoRef$current.querySelector('img');
-                        var _temp5 = function () {
-                          if (imgElement && (imgElement.currentSrc || imgElement.src)) {
-                            var logoUrl = imgElement.currentSrc || imgElement.src;
-                            var logoImg = new Image();
-                            logoImg.src = logoUrl;
-                            return Promise.resolve(new Promise(function (resolve, reject) {
-                              logoImg.onload = function () {
-                                return resolve(null);
-                              };
-                              logoImg.onerror = reject;
-                            })).then(function () {
-                              ctx.save();
-                              roundedPath(overlayX, overlayY, overlaySize, overlaySize, cornerRadius);
-                              ctx.clip();
-                              ctx.drawImage(logoImg, overlayX, overlayY, overlaySize, overlaySize);
-                              ctx.restore();
-                            });
-                          } else {
-                            var _logoRef$current2;
-                            var svgElement = (_logoRef$current2 = logoRef.current) === null || _logoRef$current2 === void 0 ? void 0 : _logoRef$current2.querySelector('svg');
-                            var _temp4 = function () {
-                              if (svgElement) {
-                                var serializer = new XMLSerializer();
-                                var svgString = serializer.serializeToString(svgElement);
-                                if (!/^<svg[^>]+xmlns=/.test(svgString)) {
-                                  svgString = svgString.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
-                                }
-                                var svgBlob = new Blob([svgString], {
-                                  type: 'image/svg+xml;charset=utf-8'
-                                });
-                                var svgUrl = URL.createObjectURL(svgBlob);
-                                var _logoImg = new Image();
-                                _logoImg.src = svgUrl;
-                                return Promise.resolve(new Promise(function (resolve, reject) {
-                                  _logoImg.onload = function () {
-                                    return resolve(null);
-                                  };
-                                  _logoImg.onerror = reject;
-                                })).then(function () {
-                                  ctx.save();
-                                  roundedPath(overlayX, overlayY, overlaySize, overlaySize, cornerRadius);
-                                  ctx.clip();
-                                  ctx.drawImage(_logoImg, overlayX, overlayY, overlaySize, overlaySize);
-                                  ctx.restore();
-                                  URL.revokeObjectURL(svgUrl);
-                                });
-                              }
-                            }();
-                            if (_temp4 && _temp4.then) return _temp4.then(function () {});
-                          }
-                        }();
-                        return _temp5 && _temp5.then ? _temp5.then(_temp6) : _temp6(_temp5);
-                      });
-                    });
-                  });
-                } catch (e) {
-                  return Promise.reject(e);
-                }
+      var _temp5 = function _temp5() {
+        return _forOf(channelIds, function (channelId) {
+          var channel = getChannelFromMap(channelId);
+          var _temp3 = function () {
+            if (shareMode === 'link') {
+              var linkAttachmentBuilder = channel.createAttachmentBuilder(inviteUrl, attachmentTypes.link);
+              var linkAttachmentToSend = linkAttachmentBuilder.setName('Invite link').setUpload(false).create();
+              var message = {
+                metadata: '',
+                body: inviteUrl,
+                mentionedUsers: [],
+                type: 'text',
+                attachments: [linkAttachmentToSend]
               };
-              return Promise.resolve(toPngBlob()).then(function (blob) {
-                var file = new File([blob], 'invite-qr.png', {
-                  type: 'image/png'
-                });
-                var localUrl = URL.createObjectURL(file);
+              dispatch(forwardMessageAC(message, channelId, connectionStatus, false));
+            } else {
+              var _temp2 = _catch(function () {
+                var _file, _file2, _file3, _file4;
                 var message = {
                   metadata: '',
                   body: '',
@@ -43837,16 +43720,16 @@ function InviteLinkModal(_ref) {
                     name: 'invite-qr.png',
                     data: file,
                     upload: false,
-                    type: "" + file.type,
+                    type: "" + ((_file = file) === null || _file === void 0 ? void 0 : _file.type),
                     url: {
-                      type: "" + file.type,
+                      type: "" + ((_file2 = file) === null || _file2 === void 0 ? void 0 : _file2.type),
                       data: file
                     },
                     createdAt: new Date(),
                     progress: 0,
                     completion: 0,
                     messageId: '',
-                    size: file.size,
+                    size: (_file3 = file) === null || _file3 === void 0 ? void 0 : _file3.size,
                     attachmentUrl: localUrl
                   }]
                 };
@@ -43860,32 +43743,165 @@ function InviteLinkModal(_ref) {
                   progress: 0,
                   completion: 0,
                   messageId: '',
-                  size: file.size,
+                  size: ((_file4 = file) === null || _file4 === void 0 ? void 0 : _file4.size) || 0,
                   attachmentUrl: localUrl
                 }], message, channel)).then(function (attachmentsToSend) {
                   dispatch(forwardMessageAC(_extends({}, message, {
                     attachments: attachmentsToSend
                   }), channelId, connectionStatus, false));
                 });
+              }, function (e) {
+                console.log('error', e);
+                var linkAttachmentBuilder = channel.createAttachmentBuilder(inviteUrl, attachmentTypes.link);
+                var linkAttachmentToSend = linkAttachmentBuilder.setName('Invite link').setUpload(false).create();
+                var message = {
+                  metadata: '',
+                  body: inviteUrl,
+                  mentionedUsers: [],
+                  type: 'text',
+                  attachments: [linkAttachmentToSend]
+                };
+                dispatch(forwardMessageAC(message, channelId, connectionStatus, false));
               });
-            }, function (e) {
-              console.log('error', e);
-              var linkAttachmentBuilder = channel.createAttachmentBuilder(inviteUrl, attachmentTypes.link);
-              var linkAttachmentToSend = linkAttachmentBuilder.setName('Invite link').setUpload(false).create();
-              var message = {
-                metadata: '',
-                body: inviteUrl,
-                mentionedUsers: [],
-                type: 'text',
-                attachments: [linkAttachmentToSend]
-              };
-              dispatch(forwardMessageAC(message, channelId, connectionStatus, false));
+              if (_temp2 && _temp2.then) return _temp2.then(function () {});
+            }
+          }();
+          if (_temp3 && _temp3.then) return _temp3.then(function () {});
+        });
+      };
+      if (!(channelIds !== null && channelIds !== void 0 && channelIds.length)) {
+        setOpenForwardPopup(false);
+        return Promise.resolve();
+      }
+      setOpenForwardPopup(false);
+      var file = null;
+      var blob = null;
+      var localUrl = '';
+      var _temp4 = function () {
+        if (shareMode === 'qr') {
+          var toPngBlob = function toPngBlob() {
+            try {
+              var dpr = 4;
+              var baseQrSize = 200;
+              var qrSize = baseQrSize * dpr;
+              var qrUrl = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(inviteUrl) + "&size=" + qrSize + "x" + qrSize + "&ecc=H&margin=32&color=000000&bgcolor=FFFFFF";
+              return Promise.resolve(fetch(qrUrl, {
+                cache: 'no-store'
+              })).then(function (qrResp) {
+                return Promise.resolve(qrResp.blob()).then(function (qrBlob) {
+                  var qrObjectUrl = URL.createObjectURL(qrBlob);
+                  var boxWidth = qrSize;
+                  var boxHeight = qrSize;
+                  var canvas = document.createElement('canvas');
+                  canvas.width = boxWidth;
+                  canvas.height = boxHeight;
+                  var ctx = canvas.getContext('2d');
+                  var img = new Image();
+                  img.src = qrObjectUrl;
+                  return Promise.resolve(new Promise(function (resolve, reject) {
+                    img.onload = function () {
+                      return resolve(null);
+                    };
+                    img.onerror = reject;
+                  })).then(function () {
+                    var _logoRef$current;
+                    function _temp8() {
+                      URL.revokeObjectURL(qrObjectUrl);
+                      return Promise.resolve(new Promise(function (resolve) {
+                        return canvas.toBlob(function (b) {
+                          return resolve(b);
+                        }, 'image/png');
+                      }));
+                    }
+                    ctx.imageSmoothingEnabled = false;
+                    ctx.drawImage(img, 0, 0, qrSize, qrSize);
+                    var overlaySize = qrSize * 22 / 100;
+                    var overlayX = (boxWidth - overlaySize) / 2;
+                    var overlayY = (boxHeight - overlaySize) / 2;
+                    var roundedPath = function roundedPath(x, y, w, h, r) {
+                      ctx.beginPath();
+                      ctx.moveTo(x + r, y);
+                      ctx.lineTo(x + w - r, y);
+                      ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+                      ctx.lineTo(x + w, y + h - r);
+                      ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+                      ctx.lineTo(x + r, y + h);
+                      ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+                      ctx.lineTo(x, y + r);
+                      ctx.quadraticCurveTo(x, y, x + r, y);
+                      ctx.closePath();
+                    };
+                    var cornerRadius = 8 * dpr;
+                    var imgElement = (_logoRef$current = logoRef.current) === null || _logoRef$current === void 0 ? void 0 : _logoRef$current.querySelector('img');
+                    var _temp7 = function () {
+                      if (imgElement && (imgElement.currentSrc || imgElement.src)) {
+                        var logoUrl = imgElement.currentSrc || imgElement.src;
+                        var logoImg = new Image();
+                        logoImg.src = logoUrl;
+                        return Promise.resolve(new Promise(function (resolve, reject) {
+                          logoImg.onload = function () {
+                            return resolve(null);
+                          };
+                          logoImg.onerror = reject;
+                        })).then(function () {
+                          ctx.save();
+                          roundedPath(overlayX, overlayY, overlaySize, overlaySize, cornerRadius);
+                          ctx.clip();
+                          ctx.drawImage(logoImg, overlayX, overlayY, overlaySize, overlaySize);
+                          ctx.restore();
+                        });
+                      } else {
+                        var _logoRef$current2;
+                        var svgElement = (_logoRef$current2 = logoRef.current) === null || _logoRef$current2 === void 0 ? void 0 : _logoRef$current2.querySelector('svg');
+                        var _temp6 = function () {
+                          if (svgElement) {
+                            var serializer = new XMLSerializer();
+                            var svgString = serializer.serializeToString(svgElement);
+                            if (!/^<svg[^>]+xmlns=/.test(svgString)) {
+                              svgString = svgString.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+                            }
+                            var svgBlob = new Blob([svgString], {
+                              type: 'image/svg+xml;charset=utf-8'
+                            });
+                            var svgUrl = URL.createObjectURL(svgBlob);
+                            var _logoImg = new Image();
+                            _logoImg.src = svgUrl;
+                            return Promise.resolve(new Promise(function (resolve, reject) {
+                              _logoImg.onload = function () {
+                                return resolve(null);
+                              };
+                              _logoImg.onerror = reject;
+                            })).then(function () {
+                              ctx.save();
+                              roundedPath(overlayX, overlayY, overlaySize, overlaySize, cornerRadius);
+                              ctx.clip();
+                              ctx.drawImage(_logoImg, overlayX, overlayY, overlaySize, overlaySize);
+                              ctx.restore();
+                              URL.revokeObjectURL(svgUrl);
+                            });
+                          }
+                        }();
+                        if (_temp6 && _temp6.then) return _temp6.then(function () {});
+                      }
+                    }();
+                    return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
+                  });
+                });
+              });
+            } catch (e) {
+              return Promise.reject(e);
+            }
+          };
+          return Promise.resolve(toPngBlob()).then(function (_toPngBlob) {
+            blob = _toPngBlob;
+            file = new File([blob], 'invite-qr.png', {
+              type: 'image/png'
             });
-            if (_temp2 && _temp2.then) return _temp2.then(function () {});
-          }
-        }();
-        if (_temp3 && _temp3.then) return _temp3.then(function () {});
-      }));
+            localUrl = URL.createObjectURL(file);
+          });
+        }
+      }();
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
     } catch (e) {
       return Promise.reject(e);
     }

package/messageUtils/index.d.ts

@@ -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, onMentionNameClick, shouldOpenUserProfileForMention, unsupportedMessage, target }: {
+declare const MessageTextFormat: ({ text, message, contactsMap, getFromContacts, isLastMessage, asSampleText, accentColor, textSecondary, onMentionNameClick, shouldOpenUserProfileForMention, unsupportedMessage, target, isInviteLink }: {
     text: string;
     message: any;
     contactsMap?: IContactsMap | undefined;
@@ -21,5 +21,6 @@ declare const MessageTextFormat: ({ text, message, contactsMap, getFromContacts,
     shouldOpenUserProfileForMention?: boolean | undefined;
     unsupportedMessage?: boolean | undefined;
     target?: string | undefined;
+    isInviteLink?: boolean | undefined;
 }) => any;
 export { MessageStatusIcon, MessageTextFormat };

package/package.json

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

package/types/index.d.ts

@@ -325,4 +325,26 @@ export interface ILabels {
     receivedBy?: string;
     displayedBy?: string;
 }
+export interface OGMetadataProps {
+    maxWidth?: number;
+    maxHeight?: number;
+    ogLayoutOrder?: 'link-first' | 'og-first';
+    ogShowUrl?: boolean;
+    ogShowTitle?: boolean;
+    ogShowDescription?: boolean;
+    ogShowFavicon?: boolean;
+    order?: {
+        image?: number;
+        title?: number;
+        description?: number;
+        link?: number;
+    };
+    ogContainerBorderRadius?: string | number;
+    ogContainerPadding?: string;
+    ogContainerClassName?: string;
+    ogContainerShowBackground?: boolean;
+    ogContainerBackground?: string;
+    infoPadding?: string;
+    isInviteLink?: boolean;
+}
 export {};