sceyt-chat-react-uikit 1.7.4-beta.4 → 1.7.4-beta.5

package/index.js

@@ -13136,7 +13136,7 @@ var MessageOwner = styled__default.h3(_templateObject27 || (_templateObject27 =
 }, function (props) {
   return props.clickable && 'pointer';
 });
-var MessageText = styled__default.pre(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n  display: flow-root;\n  position: relative;\n  font-family: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-bottom: ", ";\n  //font-size: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: 400;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  //white-space: normal;\n  //letter-spacing: -0.2px;\n  letter-spacing: 0.3px;\n  color: ", ";\n  user-select: text;\n  //overflow: hidden;\n\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n  }\n\n  & a {\n    color: ", ";\n  }\n"])), function (props) {
+var MessageText = styled__default.pre(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n  display: flow-root;\n  position: relative;\n  font-family: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-bottom: ", ";\n  //font-size: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: 400;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  //white-space: normal;\n  //letter-spacing: -0.2px;\n  letter-spacing: 0.3px;\n  color: ", ";\n  user-select: text;\n  //overflow: hidden;\n  ", "\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n  }\n\n  & a {\n    color: ", ";\n  }\n"])), function (props) {
   return props.fontFamily || 'sans-serif';
 }, function (props) {
   return props.withAttachment && (props.showMessageSenderName ? props.withPaddings ? '0 12px 10px' : '0 0 10px' : props.isForwarded ? props.withPaddings ? '4px 12px 10px' : '4px 0px 10px' : '8px 12px 10px');
@@ -13151,6 +13151,8 @@ var MessageText = styled__default.pre(_templateObject28 || (_templateObject28 =
 }, function (props) {
   var _props$incomingMessag, _props$outgoingMessag;
   return (props.incoming ? props === null || props === void 0 ? void 0 : (_props$incomingMessag = props.incomingMessageStyles) === null || _props$incomingMessag === void 0 ? void 0 : _props$incomingMessag.textColor : props === null || props === void 0 ? void 0 : (_props$outgoingMessag = props.outgoingMessageStyles) === null || _props$outgoingMessag === void 0 ? void 0 : _props$outgoingMessag.textColor) || props.color;
+}, function (props) {
+  return props.unsupportedMessage && "\n      color: " + (props.unsupportedMessageColor || '#757D8B') + ";\n      font-style: italic;\n    ";
 }, function (props) {
   return props.isRepliedMessage && "\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n  ";
 }, function (props) {
@@ -13371,11 +13373,15 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     accentColor = _ref2.accentColor,
     textSecondary = _ref2.textSecondary,
     onMentionNameClick = _ref2.onMentionNameClick,
-    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention,
+    unsupportedMessage = _ref2.unsupportedMessage;
   try {
     var messageText = [];
     var linkify = new LinkifyIt();
     var messageBodyAttributes = message.bodyAttributes && JSON.parse(JSON.stringify(message.bodyAttributes));
+    if (unsupportedMessage) {
+      return 'This message is not supported. Update your app to view this message.';
+    }
     if (message.body && messageBodyAttributes && messageBodyAttributes.length > 0) {
       var combinedAttributesList = combineMessageAttributes(messageBodyAttributes);
       var textPart = text;
@@ -15397,7 +15403,7 @@ function searchChannels(action) {
                 contactsWithChannelsMap[directChannelUser.id] = true;
               }
               var userName = makeUsername(directChannelUser && contactsMap[directChannelUser.id], directChannelUser, getFromContacts).toLowerCase();
-              if (userName.includes(lowerCaseSearchBy) || isSelfChannel && 'me'.includes(lowerCaseSearchBy)) {
+              if (userName.includes(lowerCaseSearchBy) || isSelfChannel && 'me'.includes(lowerCaseSearchBy) || isSelfChannel && 'you'.includes(lowerCaseSearchBy)) {
                 chatsGroups.push(channel);
               }
             } else {
@@ -15584,7 +15590,7 @@ function searchChannelsForForward(action) {
                 _contactsWithChannelsMap[directChannelUser.id] = true;
               }
               var userName = makeUsername(directChannelUser && _contactsMap[directChannelUser.id], directChannelUser, _getFromContacts).toLowerCase();
-              if (userName.includes(_lowerCaseSearchBy) || isSelfChannel && 'me'.includes(_lowerCaseSearchBy)) {
+              if (userName.includes(_lowerCaseSearchBy) || isSelfChannel && 'me'.includes(_lowerCaseSearchBy) || isSelfChannel && 'you'.includes(_lowerCaseSearchBy)) {
                 _chatsGroups.push(channel);
               }
             } else {
@@ -17722,6 +17728,20 @@ var getFrame = function getFrame(videoSrc, time) {
   }
 };
 
+var HiddenMessageProperty;
+(function (HiddenMessageProperty) {
+  HiddenMessageProperty["hideAfterChannelChange"] = "hideAfterChannelChange";
+  HiddenMessageProperty["hideAfterSendMessage"] = "hideAfterSendMessage";
+})(HiddenMessageProperty || (HiddenMessageProperty = {}));
+(function (MESSAGE_TYPE) {
+  MESSAGE_TYPE["TEXT"] = "text";
+  MESSAGE_TYPE["MEDIA"] = "media";
+  MESSAGE_TYPE["SYSTEM"] = "system";
+  MESSAGE_TYPE["LINK"] = "link";
+  MESSAGE_TYPE["FILE"] = "file";
+  MESSAGE_TYPE["POLL"] = "poll";
+})(exports.MESSAGE_TYPE || (exports.MESSAGE_TYPE = {}));
+
 var _marked$3 = /*#__PURE__*/_regenerator().m(sendMessage),
   _marked2$2 = /*#__PURE__*/_regenerator().m(sendTextMessage),
   _marked3$1 = /*#__PURE__*/_regenerator().m(forwardMessage),
@@ -17955,7 +17975,7 @@ function sendMessage(action) {
                   break;
                 }
                 _messageBuilder = channel.createMessageBuilder();
-                _messageBuilder.setBody(i === 0 ? message.body : '').setAttachments([]).setBodyAttributes(i === 0 ? message.bodyAttributes : {}).setMentionUserIds(i === 0 ? mentionedUserIds : []).setType(message.type).setDisplayCount(message.type === 'system' ? 0 : 1).setSilent(message.type === 'system').setMetadata(i === 0 ? JSON.stringify(message.metadata) : '');
+                _messageBuilder.setBody(i === 0 ? message.body : '').setAttachments([]).setBodyAttributes(i === 0 ? message.bodyAttributes : {}).setMentionUserIds(i === 0 ? mentionedUserIds : []).setType(message.type).setDisplayCount(message.type === exports.MESSAGE_TYPE.SYSTEM ? 0 : 1).setSilent(message.type === exports.MESSAGE_TYPE.SYSTEM).setMetadata(i === 0 ? JSON.stringify(message.metadata) : '');
                 if (message.parentMessage) {
                   _messageBuilder.setParentMessageId(message.parentMessage ? message.parentMessage.id : null);
                 }
@@ -18008,7 +18028,7 @@ function sendMessage(action) {
           break;
         }
         messageBuilder = channel.createMessageBuilder();
-        messageBuilder.setBody(message.body).setBodyAttributes(message.bodyAttributes).setAttachments(message.attachments).setMentionUserIds(mentionedUserIds).setType(message.type).setDisplayCount(message.type === 'system' ? 0 : 1).setSilent(message.type === 'system').setMetadata(JSON.stringify(message.metadata));
+        messageBuilder.setBody(message.body).setBodyAttributes(message.bodyAttributes).setAttachments(message.attachments).setMentionUserIds(mentionedUserIds).setType(message.type).setDisplayCount(message.type === exports.MESSAGE_TYPE.SYSTEM ? 0 : 1).setSilent(message.type === exports.MESSAGE_TYPE.SYSTEM).setMetadata(JSON.stringify(message.metadata));
         if (message.parentMessage) {
           messageBuilder.setParentMessageId(message.parentMessage ? message.parentMessage.id : null);
         }
@@ -18275,7 +18295,7 @@ function sendTextMessage(action) {
           attachments = [att];
         }
         messageBuilder = channel.createMessageBuilder();
-        messageBuilder.setBody(message.body).setBodyAttributes(message.bodyAttributes).setAttachments(attachments).setMentionUserIds(mentionedUserIds).setType(message.type).setDisplayCount((message === null || message === void 0 ? void 0 : message.displayCount) !== undefined ? message.displayCount : message.type === 'system' ? 0 : 1).setSilent((message === null || message === void 0 ? void 0 : message.silent) !== undefined ? message.silent : message.type === 'system').setMetadata(JSON.stringify(message.metadata));
+        messageBuilder.setBody(message.body).setBodyAttributes(message.bodyAttributes).setAttachments(attachments).setMentionUserIds(mentionedUserIds).setType(message.type).setDisplayCount((message === null || message === void 0 ? void 0 : message.displayCount) !== undefined ? message.displayCount : message.type === exports.MESSAGE_TYPE.SYSTEM ? 0 : 1).setSilent((message === null || message === void 0 ? void 0 : message.silent) !== undefined ? message.silent : message.type === exports.MESSAGE_TYPE.SYSTEM).setMetadata(JSON.stringify(message.metadata));
         if (message.parentMessage) {
           messageBuilder.setParentMessageId(message.parentMessage ? message.parentMessage.id : null);
         }
@@ -22078,7 +22098,8 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     accentColor = _ref2.accentColor,
     typingOrRecording = _ref2.typingOrRecording,
     channel = _ref2.channel,
-    isDirectChannel = _ref2.isDirectChannel;
+    isDirectChannel = _ref2.isDirectChannel,
+    unsupportedMessage = _ref2.unsupportedMessage;
   var audioRecording = React.useMemo(function () {
     return getAudioRecordingFromMap(channel.id);
   }, [channel.id, draftMessageText]);
@@ -22093,8 +22114,9 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     getFromContacts: getFromContacts,
     isLastMessage: true,
     accentColor: accentColor,
-    textSecondary: textSecondary
-  }))) : lastMessage.state === MESSAGE_STATUS.DELETE ? 'Message was deleted.' : lastMessage.type === 'system' ? (lastMessage.user && (lastMessage.user.id === user.id ? 'You ' : makeUsername(lastMessage.user && contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts))) + " " + (lastMessage.body === 'CC' ? 'created this channel' : lastMessage.body === 'CG' ? 'created this group' : lastMessage.body === 'AM' ? " added " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
+    textSecondary: textSecondary,
+    unsupportedMessage: unsupportedMessage
+  }))) : lastMessage.state === MESSAGE_STATUS.DELETE ? 'Message was deleted.' : lastMessage.type === exports.MESSAGE_TYPE.SYSTEM ? (lastMessage.user && (lastMessage.user.id === user.id ? 'You ' : makeUsername(lastMessage.user && contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts))) + " " + (lastMessage.body === 'CC' ? 'created this channel' : lastMessage.body === 'CG' ? 'created this group' : lastMessage.body === 'AM' ? " added " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
   })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'RM' ? " removed " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
@@ -22107,7 +22129,8 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     getFromContacts: getFromContacts,
     isLastMessage: true,
     accentColor: accentColor,
-    textSecondary: textSecondary
+    textSecondary: textSecondary,
+    unsupportedMessage: unsupportedMessage
   }), channel.lastReactedMessage && '"')))));
 };
 var Channel = function Channel(_ref3) {
@@ -22172,11 +22195,11 @@ var Channel = function Channel(_ref3) {
     draftMessage = _useState2[0],
     setDraftMessage = _useState2[1];
   var lastMessage = channel.lastReactedMessage || channel.lastMessage;
-  var lastMessageMetas = lastMessage && lastMessage.type === 'system' && lastMessage.metadata && (isJSON(lastMessage.metadata) ? JSON.parse(lastMessage.metadata) : lastMessage.metadata);
+  var lastMessageMetas = lastMessage && lastMessage.type === exports.MESSAGE_TYPE.SYSTEM && lastMessage.metadata && (isJSON(lastMessage.metadata) ? JSON.parse(lastMessage.metadata) : lastMessage.metadata);
   var _useState3 = React.useState(0),
     statusWidth = _useState3[0],
     setStatusWidth = _useState3[1];
-  var avatarName = channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : isSelfChannel ? 'Me' : '');
+  var avatarName = channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : isSelfChannel ? showPhoneNumber ? "+" + user.id + " (You)" : 'Me' : '');
   var messageAuthorRef = React.useRef(null);
   var messageTimeAndStatusRef = React.useRef(null);
   useUpdatePresence(channel, true);
@@ -22244,6 +22267,9 @@ var Channel = function Channel(_ref3) {
       })
     };
   }, [typingOrRecordingIndicator]);
+  var unsupportedMessage = React.useMemo(function () {
+    return (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) !== exports.MESSAGE_TYPE.SYSTEM && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) !== exports.MESSAGE_TYPE.TEXT && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) !== exports.MESSAGE_TYPE.MEDIA && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) !== exports.MESSAGE_TYPE.FILE && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) !== exports.MESSAGE_TYPE.LINK && (lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type) !== exports.MESSAGE_TYPE.POLL;
+  }, [lastMessage === null || lastMessage === void 0 ? void 0 : lastMessage.type]);
   var MessageText = React.useMemo(function () {
     return /*#__PURE__*/React__default.createElement(ChannelMessageText, {
       isTypingOrRecording: (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording),
@@ -22258,9 +22284,10 @@ var Channel = function Channel(_ref3) {
       textSecondary: textSecondary,
       draftMessageText: draftMessageText,
       lastMessage: draftMessage || lastMessage,
-      isDirectChannel: isDirectChannel
+      isDirectChannel: isDirectChannel,
+      unsupportedMessage: unsupportedMessage
     });
-  }, [typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping, typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel]);
+  }, [typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping, typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel, unsupportedMessage]);
   var getCustomLatestMessageComponent = React.useCallback(function (_ref4) {
     var lastMessage = _ref4.lastMessage,
       typingOrRecording = _ref4.typingOrRecording,
@@ -22276,7 +22303,8 @@ var Channel = function Channel(_ref3) {
       getFromContacts = _ref4.getFromContacts,
       warningColor = _ref4.warningColor,
       user = _ref4.user,
-      MessageText = _ref4.MessageText;
+      MessageText = _ref4.MessageText,
+      unsupportedMessage = _ref4.unsupportedMessage;
     return getCustomLatestMessage && getCustomLatestMessage({
       lastMessage: lastMessage,
       typingOrRecording: typingOrRecording,
@@ -22292,9 +22320,10 @@ var Channel = function Channel(_ref3) {
       getFromContacts: getFromContacts,
       warningColor: warningColor,
       user: user,
-      MessageText: MessageText
+      MessageText: MessageText,
+      unsupportedMessage: unsupportedMessage
     });
-  }, [getCustomLatestMessage, lastMessage, typingOrRecording, draftMessageText, textSecondary, channel, channelLastMessageFontSize, channelLastMessageHeight, isDirectChannel, textPrimary, messageAuthorRef, contactsMap, getFromContacts, warningColor, user, MessageText]);
+  }, [getCustomLatestMessage, lastMessage, typingOrRecording, draftMessageText, textSecondary, channel, channelLastMessageFontSize, channelLastMessageHeight, isDirectChannel, textPrimary, messageAuthorRef, contactsMap, getFromContacts, warningColor, user, MessageText, unsupportedMessage]);
   var isTypeValid = React.useCallback(function (type) {
     return !doNotShowMessageDeliveryTypes.includes(type);
   }, [doNotShowMessageDeliveryTypes]);
@@ -22332,7 +22361,7 @@ var Channel = function Channel(_ref3) {
     subjectLineHeight: channelSubjectLineHeight,
     subjectColor: channelSubjectColor || textPrimary,
     avatarSize: channelAvatarSize
-  }, /*#__PURE__*/React__default.createElement("h3", null, channel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap && contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : isSelfChannel ? showPhoneNumber && (_channel$members = channel.members) !== null && _channel$members !== void 0 && _channel$members.length && (_channel$members$ = channel.members[0]) !== null && _channel$members$ !== void 0 && _channel$members$.id ? "+" + ((_channel$members$2 = channel.members[0]) === null || _channel$members$2 === void 0 ? void 0 : _channel$members$2.id) + " (You)" : 'Me' : '')), channel.muted && (/*#__PURE__*/React__default.createElement(MutedIcon, {
+  }, /*#__PURE__*/React__default.createElement("h3", null, channel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap && contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : isSelfChannel ? showPhoneNumber && (_channel$members = channel.members) !== null && _channel$members !== void 0 && _channel$members.length && (_channel$members$ = channel.members[0]) !== null && _channel$members$ !== void 0 && _channel$members$.id ? "+" + ((_channel$members$2 = channel.members[0]) === null || _channel$members$2 === void 0 ? void 0 : _channel$members$2.id) + " (You)" : showPhoneNumber ? "+" + user.id + " (You)" : 'Me' : '')), channel.muted && (/*#__PURE__*/React__default.createElement(MutedIcon, {
     color: notificationsIsMutedIconColor || iconInactive
   }, notificationsIsMutedIcon || /*#__PURE__*/React__default.createElement(SvgUnmuteNotifications, null))), getCustomLatestMessage ? getCustomLatestMessageComponent({
     lastMessage: lastMessage,
@@ -22349,7 +22378,8 @@ var Channel = function Channel(_ref3) {
     getFromContacts: getFromContacts,
     warningColor: warningColor,
     user: user,
-    MessageText: MessageText
+    MessageText: MessageText,
+    unsupportedMessage: unsupportedMessage
   }) : (lastMessage || typingOrRecording.items.length > 0 || draftMessageText) && (/*#__PURE__*/React__default.createElement(LastMessage, {
     color: textSecondary,
     markedAsUnread: !!(channel.unread || channel.newMessageCount && channel.newMessageCount > 0),
@@ -22368,11 +22398,11 @@ var Channel = function Channel(_ref3) {
     }, makeUsername(contactsMap && contactsMap[item.from.id], item.from, getFromContacts, true), index < typingOrRecording.items.length - 1 && ', ');
   })))) : null : draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageTitle, {
     color: warningColor
-  }, "Draft")) : channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.newReactions[0].user && channel.newReactions[0].user.id === user.id || !isDirectChannel) && lastMessage.type !== 'system' && (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
+  }, "Draft")) : channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.newReactions[0].user && channel.newReactions[0].user.id === user.id || !isDirectChannel) && lastMessage.type !== exports.MESSAGE_TYPE.SYSTEM && (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
-  }, channel.newReactions[0].user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[channel.newReactions[0].user.id], channel.newReactions[0].user, getFromContacts, true)))) : lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (lastMessage.user && lastMessage.user.id === user.id || !isDirectChannel) && lastMessage.type !== 'system' && (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
+  }, channel.newReactions[0].user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[channel.newReactions[0].user.id], channel.newReactions[0].user, getFromContacts, true)))) : lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (lastMessage.user && lastMessage.user.id === user.id || !isDirectChannel) && lastMessage.type !== exports.MESSAGE_TYPE.SYSTEM && (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
@@ -25225,7 +25255,8 @@ function ChatHeader(_ref) {
     backButtonOrder = _ref.backButtonOrder,
     channelInfoOrder = _ref.channelInfoOrder,
     infoIconOrder = _ref.infoIconOrder,
-    customActionsOrder = _ref.customActionsOrder;
+    customActionsOrder = _ref.customActionsOrder,
+    showPhoneNumber = _ref.showPhoneNumber;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -25289,7 +25320,7 @@ function ChatHeader(_ref) {
     order: channelInfoOrder
   }, /*#__PURE__*/React__default.createElement(AvatarWrapper, null, (activeChannel.subject || isDirectChannel && (directChannelUser || isSelfChannel)) && (/*#__PURE__*/React__default.createElement(Avatar, {
     borderRadius: avatarBorderRadius,
-    name: activeChannel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : isSelfChannel ? 'Me' : ''),
+    name: activeChannel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : isSelfChannel ? showPhoneNumber ? "+" + user.id + " (You)" : 'Me' : ''),
     image: activeChannel.avatarUrl || (isDirectChannel && directChannelUser ? directChannelUser.avatarUrl : isSelfChannel ? user.avatarUrl : ''),
     size: avatarSize || 36,
     textSize: avatarTextSize || 13,
@@ -25300,7 +25331,7 @@ function ChatHeader(_ref) {
     fontSize: titleFontSize,
     uppercase: directChannelUser && hideUserPresence && hideUserPresence(directChannelUser),
     lineHeight: titleLineHeight
-  }, activeChannel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : isSelfChannel ? 'Me' : '')), showMemberInfo && !isSelfChannel && (isDirectChannel && directChannelUser ? (/*#__PURE__*/React__default.createElement(SubTitle, {
+  }, activeChannel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : isSelfChannel ? showPhoneNumber ? "+" + user.id + " (You)" : 'Me' : '')), showMemberInfo && !isSelfChannel && (isDirectChannel && directChannelUser ? (/*#__PURE__*/React__default.createElement(SubTitle, {
     fontSize: memberInfoFontSize,
     lineHeight: memberInfoLineHeight,
     color: memberInfoTextColor || textSecondary
@@ -27175,7 +27206,7 @@ var Message = function Message(_ref) {
   return /*#__PURE__*/React__default.createElement(Container$c, {
     ref: messageItemRef,
     marginTop: differentUserMessageSpacing || '16px',
-    marginBottom: nextMessage && nextMessage.type !== 'system' ? differentUserMessageSpacing || '16px' : '',
+    marginBottom: nextMessage && nextMessage.type !== exports.MESSAGE_TYPE.SYSTEM ? differentUserMessageSpacing || '16px' : '',
     fontSize: fontSize,
     textColor: textColor || textOnPrimary,
     border: border,
@@ -31244,6 +31275,9 @@ var RepliedMessage = function RepliedMessage(_ref) {
     }
     return 0;
   }, [message.parentMessage.attachments, parentNotLinkAttachment, (_message$parentMessag = message.parentMessage.attachments[0]) === null || _message$parentMessag === void 0 ? void 0 : _message$parentMessag.type, message.parentMessage.attachments.length]);
+  var unsupportedMessage = React.useMemo(function () {
+    return message.parentMessage.type !== exports.MESSAGE_TYPE.SYSTEM && message.parentMessage.type !== exports.MESSAGE_TYPE.TEXT && message.parentMessage.type !== exports.MESSAGE_TYPE.MEDIA && message.parentMessage.type !== exports.MESSAGE_TYPE.FILE && message.parentMessage.type !== exports.MESSAGE_TYPE.LINK && message.parentMessage.type !== exports.MESSAGE_TYPE.POLL;
+  }, [message.parentMessage.type]);
   return /*#__PURE__*/React__default.createElement(ReplyMessageContainer, {
     withSenderName: showMessageSenderName,
     withBody: !!message.body,
@@ -31297,7 +31331,8 @@ var RepliedMessage = function RepliedMessage(_ref) {
     getFromContacts: getFromContacts,
     asSampleText: true,
     accentColor: accentColor,
-    textSecondary: textSecondary
+    textSecondary: textSecondary,
+    unsupportedMessage: unsupportedMessage
   }) : parentNotLinkAttachment && (message.parentMessage.attachments[0].type === attachmentTypes.image ? 'Photo' : message.parentMessage.attachments[0].type === attachmentTypes.video ? 'Video' : message.parentMessage.attachments[0].type === attachmentTypes.voice ? ' Voice' : 'File'))));
 };
 var RepliedMessage$1 = /*#__PURE__*/React__default.memo(RepliedMessage, function (prevProps, nextProps) {
@@ -32705,7 +32740,8 @@ var MessageBody = function MessageBody(_ref) {
     handleCreateChat = _ref.handleCreateChat,
     messageTextRef = _ref.messageTextRef,
     handleOpenUserProfile = _ref.handleOpenUserProfile,
-    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
+    unsupportedMessage = _ref.unsupportedMessage;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -32730,10 +32766,10 @@ var MessageBody = function MessageBody(_ref) {
     return moment(message.createdAt).startOf('day');
   }, [message.createdAt]);
   var firstMessageInInterval = React.useMemo(function () {
-    return !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === 'system' || unreadMessageId === prevMessage.id;
+    return !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === exports.MESSAGE_TYPE.SYSTEM || unreadMessageId === prevMessage.id;
   }, [prevMessage, current, unreadMessageId]);
   var lastMessageInInterval = React.useMemo(function () {
-    return !(nextMessage && current.diff(moment(nextMessage.createdAt).startOf('day'), 'days') === 0) || nextMessage.type === 'system';
+    return !(nextMessage && current.diff(moment(nextMessage.createdAt).startOf('day'), 'days') === 0) || nextMessage.type === exports.MESSAGE_TYPE.SYSTEM;
   }, [nextMessage, current]);
   var messageTimeVisible = React.useMemo(function () {
     return showMessageTime && (showMessageTimeForEachMessage || !nextMessage);
@@ -32935,7 +32971,9 @@ var MessageBody = function MessageBody(_ref) {
     outgoingMessageStyles: outgoingMessageStyles,
     incomingMessageStyles: incomingMessageStyles,
     incoming: message.incoming,
-    linkColor: linkColor
+    linkColor: linkColor,
+    unsupportedMessage: unsupportedMessage,
+    unsupportedMessageColor: textSecondary
   }, linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
     attachments: [linkAttachment],
     state: message.state,
@@ -32950,7 +32988,8 @@ var MessageBody = function MessageBody(_ref) {
     accentColor: accentColor,
     textSecondary: textSecondary,
     onMentionNameClick: handleOpenUserProfile,
-    shouldOpenUserProfileForMention: !!shouldOpenUserProfileForMention
+    shouldOpenUserProfileForMention: !!shouldOpenUserProfileForMention,
+    unsupportedMessage: unsupportedMessage
   })), !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, {
@@ -33724,7 +33763,7 @@ var Message$1 = function Message(_ref) {
   var messageUserID = message.user ? message.user.id : 'deleted';
   var prevMessageUserID = prevMessage ? prevMessage.user ? prevMessage.user.id : 'deleted' : null;
   var current = moment(message.createdAt).startOf('day');
-  var firstMessageInInterval = !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === 'system' || unreadMessageId === prevMessage.id;
+  var firstMessageInInterval = !(prevMessage && current.diff(moment(prevMessage.createdAt).startOf('day'), 'days') === 0) || (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === exports.MESSAGE_TYPE.SYSTEM || unreadMessageId === prevMessage.id;
   var messageTimeVisible = showMessageTime && (showMessageTimeForEachMessage || !nextMessage);
   var messageStatusVisible = !message.incoming && showMessageStatus && message.state !== MESSAGE_STATUS.DELETE && (showMessageStatusForEachMessage || !nextMessage);
   var renderAvatar = (isUnreadMessage || prevMessageUserID !== messageUserID || firstMessageInInterval) && !(channel.type === DEFAULT_CHANNEL_TYPE.DIRECT && !showSenderNameOnDirectChannel) && !(!message.incoming && !showOwnAvatar);
@@ -33854,6 +33893,15 @@ var Message$1 = function Message(_ref) {
     })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
       dispatch(markMessagesAsReadAC(channel.id, [message.id]));
     }
+    if (!message.userMarkers.find(function (marker) {
+      return marker.name === MESSAGE_DELIVERY_STATUS.DELIVERED;
+    })) {
+      if (message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
+        return marker.name === MESSAGE_DELIVERY_STATUS.READ;
+      })) {
+        dispatch(markMessagesAsDeliveredAC(channel.id, [message.id]));
+      }
+    }
   };
   var handleForwardMessage = function handleForwardMessage(channelIds) {
     if (channelIds && channelIds.length) {
@@ -33956,13 +34004,16 @@ var Message$1 = function Message(_ref) {
       handleOpenChannelDetails();
     }
   };
+  var unsupportedMessage = React.useMemo(function () {
+    return message.type !== exports.MESSAGE_TYPE.SYSTEM && message.type !== exports.MESSAGE_TYPE.POLL && message.type !== exports.MESSAGE_TYPE.FILE && message.type !== exports.MESSAGE_TYPE.LINK && message.type !== exports.MESSAGE_TYPE.MEDIA && message.type !== exports.MESSAGE_TYPE.TEXT;
+  }, [message.type]);
   return /*#__PURE__*/React__default.createElement(MessageItem, {
     className: 'message_item',
     rtl: ownMessageOnRightSide && !message.incoming,
     withAvatar: renderAvatar,
     showOwnAvatar: showOwnAvatar,
     hoverBackground: hoverBackground ? message.incoming ? (incomingMessageStyles === null || incomingMessageStyles === void 0 ? void 0 : incomingMessageStyles.background) || bubbleIncoming : (outgoingMessageStyles === null || outgoingMessageStyles === void 0 ? void 0 : outgoingMessageStyles.background) || bubbleOutgoing : '',
-    topMargin: (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === 'system' ? '0' : prevMessage && unreadMessageId === prevMessage.id ? '16px' : prevMessageUserID !== messageUserID || firstMessageInInterval ? differentUserMessageSpacing || '16px' : sameUserMessageSpacing || '8px',
+    topMargin: (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.type) === exports.MESSAGE_TYPE.SYSTEM ? '0' : prevMessage && unreadMessageId === prevMessage.id ? '16px' : prevMessageUserID !== messageUserID || firstMessageInInterval ? differentUserMessageSpacing || '16px' : sameUserMessageSpacing || '8px',
     bottomMargin: message.reactionTotals && message.reactionTotals.length ? reactionsContainerTopPosition : '',
     ref: messageItemRef,
     selectMessagesIsActive: selectionIsActive,
@@ -34026,7 +34077,8 @@ var Message$1 = function Message(_ref) {
     handleScrollToRepliedMessage: handleScrollToRepliedMessage,
     handleMediaItemClick: handleMediaItemClick,
     isThreadMessage: isThreadMessage,
-    handleOpenUserProfile: handleOpenUserProfile
+    handleOpenUserProfile: handleOpenUserProfile,
+    unsupportedMessage: unsupportedMessage
   })) : (/*#__PURE__*/React__default.createElement(MessageBody$1, {
     message: message,
     channel: channel,
@@ -34152,7 +34204,8 @@ var Message$1 = function Message(_ref) {
     messageTextRef: messageTextRef,
     messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary,
     handleOpenUserProfile: handleOpenUserProfile,
-    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
+    unsupportedMessage: unsupportedMessage
   })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -34355,12 +34408,6 @@ var MessageItem = styled__default.div(_templateObject12$3 || (_templateObject12$
   return props.hoverBackground || '';
 }, HiddenMessageTime$1, MessageStatus$1);
 
-var HiddenMessageProperty;
-(function (HiddenMessageProperty) {
-  HiddenMessageProperty["hideAfterChannelChange"] = "hideAfterChannelChange";
-  HiddenMessageProperty["hideAfterSendMessage"] = "hideAfterSendMessage";
-})(HiddenMessageProperty || (HiddenMessageProperty = {}));
-
 var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$9;
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
@@ -35213,7 +35260,7 @@ var MessageList = function MessageList(_ref2) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: message.id || message.tid
     }, /*#__PURE__*/React__default.createElement(CreateMessageDateDivider, {
-      noMargin: !isUnreadMessage && prevMessage && prevMessage.type === 'system' && message.type !== 'system',
+      noMargin: !isUnreadMessage && prevMessage && prevMessage.type === exports.MESSAGE_TYPE.SYSTEM && message.type !== exports.MESSAGE_TYPE.SYSTEM,
       theme: theme,
       lastIndex: false,
       currentMessageDate: message.createdAt,
@@ -35225,9 +35272,9 @@ var MessageList = function MessageList(_ref2) {
       dateDividerBackgroundColor: dateDividerBackgroundColor,
       chatBackgroundColor: backgroundColor || themeBackgroundColor,
       dateDividerBorderRadius: dateDividerBorderRadius,
-      marginBottom: prevMessage && prevMessage.type === 'system' && message.type !== 'system' ? '16px' : '0',
+      marginBottom: prevMessage && prevMessage.type === exports.MESSAGE_TYPE.SYSTEM && message.type !== exports.MESSAGE_TYPE.SYSTEM ? '16px' : '0',
       marginTop: differentUserMessageSpacing
-    }), message.type === 'system' ? (/*#__PURE__*/React__default.createElement(SystemMessage, {
+    }), message.type === exports.MESSAGE_TYPE.SYSTEM ? (/*#__PURE__*/React__default.createElement(SystemMessage, {
       key: message.id || message.tid,
       channel: channel,
       message: message,
@@ -35391,8 +35438,8 @@ var MessageList = function MessageList(_ref2) {
       newMessagesSeparatorLeftRightSpaceWidth: newMessagesSeparatorTextLeftRightSpacesWidth,
       newMessagesSeparatorSpaceColor: newMessagesSeparatorSpaceColor,
       dividerText: newMessagesSeparatorText || 'Unread Messages',
-      marginTop: message.type === 'system' ? '0px' : '',
-      marginBottom: message.type === 'system' ? '16px' : '0',
+      marginTop: message.type === exports.MESSAGE_TYPE.SYSTEM ? '0px' : '',
+      marginBottom: message.type === exports.MESSAGE_TYPE.SYSTEM ? '16px' : '0',
       chatBackgroundColor: backgroundColor || themeBackgroundColor,
       unread: true
     })) : null);
@@ -39825,6 +39872,41 @@ var CloseIconWrapper = styled__default.span(_templateObject34$1 || (_templateObj
   return props.color;
 });
 
+var copyToClipboard = function copyToClipboard(text) {
+  try {
+    var _temp2 = function _temp2(_result2) {
+      if (_exit) return _result2;
+      try {
+        if (typeof document !== 'undefined') {
+          var textarea = document.createElement('textarea');
+          textarea.value = text;
+          textarea.style.position = 'fixed';
+          textarea.style.left = '-9999px';
+          document.body.appendChild(textarea);
+          textarea.focus();
+          textarea.select();
+          var successful = document.execCommand('copy');
+          document.body.removeChild(textarea);
+          return successful;
+        }
+      } catch (e) {}
+      return false;
+    };
+    var _exit = false;
+    var _temp = _catch(function () {
+      if (typeof navigator !== 'undefined' && navigator.clipboard && navigator.clipboard.writeText) {
+        return Promise.resolve(navigator.clipboard.writeText(text)).then(function () {
+          _exit = true;
+          return true;
+        });
+      }
+    }, function () {});
+    return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
 var _path$1e;
 function _extends$1i() {
   return _extends$1i = Object.assign ? Object.assign.bind() : function (n) {
@@ -40724,9 +40806,7 @@ var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$
 function InviteLinkModal(_ref) {
   var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
   var onClose = _ref.onClose,
-    link = _ref.link,
-    onReset = _ref.onReset,
-    SVGLogoIcon = _ref.SVGLogoIcon,
+    SVGOrPNGLogoIcon = _ref.SVGOrPNGLogoIcon,
     channelId = _ref.channelId;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
@@ -40781,6 +40861,7 @@ function InviteLinkModal(_ref) {
   var _useState4 = React.useState('link'),
     shareMode = _useState4[0],
     setShareMode = _useState4[1];
+  var logoRef = React.useRef(null);
   var handleCopy = function handleCopy() {
     try {
       var _temp = _catch(function () {
@@ -40806,7 +40887,6 @@ function InviteLinkModal(_ref) {
         setOpenForwardPopup(false);
         return Promise.resolve();
       }
-      var qrImageUrl = "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(inviteUrl) + "&size=200x200&ecc=H&margin=12&color=000000&bgcolor=FFFFFF";
       setOpenForwardPopup(false);
       return Promise.resolve(_forOf(channelIds, function (channelId) {
         var channel = getChannelFromMap(channelId);
@@ -40824,51 +40904,162 @@ function InviteLinkModal(_ref) {
             dispatch(forwardMessageAC(message, channelId, connectionStatus, false));
           } else {
             var _temp2 = _catch(function () {
-              return Promise.resolve(fetch(qrImageUrl)).then(function (resp) {
-                return Promise.resolve(resp.blob()).then(function (blob) {
-                  var file = new File([blob], 'invite-qr.png', {
-                    type: 'image/png'
+              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);
+                      });
+                    });
                   });
-                  var localUrl = URL.createObjectURL(file);
-                  var message = {
-                    metadata: '',
-                    body: '',
-                    mentionedUsers: [],
-                    type: 'text',
-                    attachments: [{
-                      name: 'invite-qr.png',
-                      data: file,
-                      upload: false,
-                      type: "" + file.type,
-                      url: {
-                        type: "" + file.type,
-                        data: file
-                      },
-                      createdAt: new Date(),
-                      progress: 0,
-                      completion: 0,
-                      messageId: '',
-                      size: file.size,
-                      attachmentUrl: localUrl
-                    }]
-                  };
-                  return Promise.resolve(handleUploadAttachments([{
+                } catch (e) {
+                  return Promise.reject(e);
+                }
+              };
+              return Promise.resolve(toPngBlob()).then(function (blob) {
+                var file = new File([blob], 'invite-qr.png', {
+                  type: 'image/png'
+                });
+                var localUrl = URL.createObjectURL(file);
+                var message = {
+                  metadata: '',
+                  body: '',
+                  mentionedUsers: [],
+                  type: 'text',
+                  attachments: [{
                     name: 'invite-qr.png',
                     data: file,
                     upload: false,
-                    type: attachmentTypes.image,
-                    url: file,
+                    type: "" + file.type,
+                    url: {
+                      type: "" + file.type,
+                      data: file
+                    },
                     createdAt: new Date(),
                     progress: 0,
                     completion: 0,
                     messageId: '',
                     size: file.size,
                     attachmentUrl: localUrl
-                  }], message, channel)).then(function (attachmentsToSend) {
-                    dispatch(forwardMessageAC(_extends({}, message, {
-                      attachments: attachmentsToSend
-                    }), channelId, connectionStatus, false));
-                  });
+                  }]
+                };
+                return Promise.resolve(handleUploadAttachments([{
+                  name: 'invite-qr.png',
+                  data: file,
+                  upload: false,
+                  type: attachmentTypes.image,
+                  url: file,
+                  createdAt: new Date(),
+                  progress: 0,
+                  completion: 0,
+                  messageId: '',
+                  size: file.size,
+                  attachmentUrl: localUrl
+                }], message, channel)).then(function (attachmentsToSend) {
+                  dispatch(forwardMessageAC(_extends({}, message, {
+                    attachments: attachmentsToSend
+                  }), channelId, connectionStatus, false));
                 });
               });
             }, function (e) {
@@ -40900,7 +41091,6 @@ function InviteLinkModal(_ref) {
     var _channelInviteKeys$;
     setShowResetConfirm(false);
     dispatch(regenerateChannelInviteKeyAC(channelId, (channelInviteKeys === null || channelInviteKeys === void 0 ? void 0 : (_channelInviteKeys$ = channelInviteKeys[0]) === null || _channelInviteKeys$ === void 0 ? void 0 : _channelInviteKeys$.key) || ''));
-    if (onReset) onReset();
   };
   React.useEffect(function () {
     if (channelId) {
@@ -40914,8 +41104,8 @@ function InviteLinkModal(_ref) {
     return (channelInviteKeys === null || channelInviteKeys === void 0 ? void 0 : channelInviteKeys[0]) || null;
   }, [channelInviteKeys]);
   var inviteUrl = React.useMemo(function () {
-    return link || getBaseUrlForInviteMembers() + "/" + ((inviteKey === null || inviteKey === void 0 ? void 0 : inviteKey.key) || '');
-  }, [link, inviteKey]);
+    return getBaseUrlForInviteMembers() + "/" + ((inviteKey === null || inviteKey === void 0 ? void 0 : inviteKey.key) || '');
+  }, [inviteKey]);
   var handleShowPreviousMessages = function handleShowPreviousMessages() {
     dispatch(updateChannelInviteKeyAC(channelId, (inviteKey === null || inviteKey === void 0 ? void 0 : inviteKey.key) || '', !(inviteKey !== null && inviteKey !== void 0 && inviteKey.accessPriorHistory) || false));
   };
@@ -41026,11 +41216,13 @@ function InviteLinkModal(_ref) {
     borderColor: border,
     backgroundColor: surface1
   }, /*#__PURE__*/React__default.createElement("img", {
-    src: "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(inviteUrl) + "&size=200x200&ecc=H&margin=12&color=000000&bgcolor=FFFFFF",
+    src: "https://api.qrserver.com/v1/create-qr-code/?data=" + encodeURIComponent(inviteUrl) + "&size=200x200&ecc=H&margin=12&color=000000&bgcolor=FFFFFF&format=png",
     alt: 'Invite QR',
     width: 200,
     height: 200
-  }), /*#__PURE__*/React__default.createElement(LogoIconCont, null, SVGLogoIcon)), /*#__PURE__*/React__default.createElement(QrHint, {
+  }), /*#__PURE__*/React__default.createElement(LogoIconCont, {
+    ref: logoRef
+  }, SVGOrPNGLogoIcon)), /*#__PURE__*/React__default.createElement(QrHint, {
     color: textSecondary
   }, qrHintText)))), /*#__PURE__*/React__default.createElement(PopupFooter, {
     backgroundColor: surface1
@@ -41059,7 +41251,7 @@ function InviteLinkModal(_ref) {
     handleForward: handleForwardChannels
   })));
 }
-var LogoIconCont = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 18px);\n  left: calc(50% - 18px);\n  width: 36px;\n  height: 36px;\n  border-radius: 10px;\n  background-color: #ffffff;\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  padding: 6px;\n"])));
+var LogoIconCont = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 11%);\n  left: calc(50% - 11%);\n  width: 22%;\n  height: 22%;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n"])));
 var Tabs$1 = styled__default.div(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  border-radius: 10px;\n  background-color: ", ";\n  padding: 2px;\n  margin: 4px 0 16px;\n  border: 1px solid ", ";\n"])), function (p) {
   return p.backgroundColor;
 }, function (p) {
@@ -41424,7 +41616,7 @@ var Members = function Members(_ref) {
     onClose: function onClose() {
       return setOpenInviteModal(false);
     },
-    SVGLogoIcon: QRCodeIcon,
+    SVGOrPNGLogoIcon: QRCodeIcon,
     channelId: channel.id
   })));
 };
@@ -42485,7 +42677,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$Z, _templateObject2$S, _templateObject3$J, _templateObject4$D, _templateObject5$x, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$i, _templateObject0$g, _templateObject1$d, _templateObject10$8;
+var _templateObject$Z, _templateObject2$S, _templateObject3$J, _templateObject4$D, _templateObject5$x, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$i, _templateObject0$g, _templateObject1$d, _templateObject10$8, _templateObject11$8, _templateObject12$7;
 var Details = function Details(_ref) {
   var _activeChannel$member;
   var detailsTitleText = _ref.detailsTitleText,
@@ -42610,7 +42802,9 @@ var Details = function Details(_ref) {
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     borderThemeColor = _useColor[THEME_COLORS.BORDER],
     textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    surface2 = _useColor[THEME_COLORS.SURFACE_2];
+    surface2 = _useColor[THEME_COLORS.SURFACE_2],
+    tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
   var dispatch = useDispatch();
   var ChatClient = getClient();
   var user = ChatClient.user;
@@ -42642,6 +42836,10 @@ var Details = function Details(_ref) {
   var detailsRef = React.useRef(null);
   var detailsHeaderRef = React.useRef(null);
   var openTimeOut = React.useRef(null);
+  var copiedPhoneTimerRef = React.useRef(null);
+  var _useState6 = React.useState(false),
+    copiedPhone = _useState6[0],
+    setCopiedPhone = _useState6[1];
   var isDirectChannel = activeChannel && activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
   var isSelfChannel = isDirectChannel && activeChannel.memberCount === 1 && activeChannel.members.length > 0 && activeChannel.members[0].id === user.id;
   var memberDisplayText = getChannelTypesMemberDisplayTextMap();
@@ -42675,6 +42873,13 @@ var Details = function Details(_ref) {
       setChannelDetailsHeight(detailsContainer.offsetHeight);
     }
   }, []);
+  React.useEffect(function () {
+    return function () {
+      if (copiedPhoneTimerRef.current) {
+        clearTimeout(copiedPhoneTimerRef.current);
+      }
+    };
+  }, []);
   var handleTabChange = function handleTabChange() {
     if (detailsRef.current && detailsHeaderRef.current) {
       detailsRef.current.scrollTo({
@@ -42683,6 +42888,27 @@ var Details = function Details(_ref) {
       });
     }
   };
+  var handleCopyPhoneNumber = function handleCopyPhoneNumber() {
+    try {
+      var _temp = function () {
+        if (directChannelUser !== null && directChannelUser !== void 0 && directChannelUser.id) {
+          var value = "+" + directChannelUser.id;
+          return Promise.resolve(copyToClipboard(value)).then(function () {
+            setCopiedPhone(true);
+            if (copiedPhoneTimerRef.current) {
+              clearTimeout(copiedPhoneTimerRef.current);
+            }
+            copiedPhoneTimerRef.current = setTimeout(function () {
+              return setCopiedPhone(false);
+            }, 1200);
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Container$t, {
     backgroundColor: backgroundColor,
     mounted: mounted,
@@ -42735,7 +42961,7 @@ var Details = function Details(_ref) {
     direction: avatarAndNameDirection
   }, /*#__PURE__*/React__default.createElement(Avatar, {
     image: activeChannel && activeChannel.avatarUrl || directChannelUser && directChannelUser.avatarUrl || isSelfChannel && user.avatarUrl,
-    name: activeChannel && activeChannel.subject || directChannelUser && (directChannelUser.firstName || directChannelUser.id) || isSelfChannel && 'Me',
+    name: activeChannel && activeChannel.subject || directChannelUser && (directChannelUser.firstName || directChannelUser.id) || (isSelfChannel && showPhoneNumber ? "+" + user.id + " (You)" : 'Me'),
     size: channelAvatarSize || 72,
     textSize: channelAvatarTextSize || 26,
     setDefaultAvatar: isDirectChannel
@@ -42747,7 +42973,7 @@ var Details = function Details(_ref) {
     fontSize: channelNameFontSize,
     lineHeight: channelNameLineHeight,
     color: textPrimary
-  }, activeChannel && activeChannel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : isSelfChannel ? 'Me' : '')), !isDirectChannel && checkActionPermission('updateChannel') && (/*#__PURE__*/React__default.createElement(EditButton, {
+  }, activeChannel && activeChannel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : isSelfChannel ? showPhoneNumber ? "+" + user.id + " (You)" : 'Me' : '')), !isDirectChannel && checkActionPermission('updateChannel') && (/*#__PURE__*/React__default.createElement(EditButton, {
     topPosition: channelEditIconTopPosition,
     rightPosition: channelEditIconRightPosition,
     onClick: function onClick() {
@@ -42757,7 +42983,14 @@ var Details = function Details(_ref) {
     color: textSecondary,
     fontSize: channelMembersFontSize,
     lineHeight: channelMembersLineHeight
-  }, showPhoneNumber && directChannelUser !== null && directChannelUser !== void 0 && directChannelUser.id ? "+" + (directChannelUser === null || directChannelUser === void 0 ? void 0 : directChannelUser.id) : hideUserPresence && directChannelUser && hideUserPresence(directChannelUser) ? '' : directChannelUser && directChannelUser.presence && (directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
+  }, showPhoneNumber && directChannelUser !== null && directChannelUser !== void 0 && directChannelUser.id ? (/*#__PURE__*/React__default.createElement(PhoneNumberContainer, {
+    onClick: handleCopyPhoneNumber,
+    role: 'button',
+    "aria-label": 'Copy phone number'
+  }, "+" + directChannelUser.id, copiedPhone && (/*#__PURE__*/React__default.createElement(CopiedTooltip, {
+    background: tooltipBackground,
+    color: textOnPrimary
+  }, "Copied")))) : hideUserPresence && directChannelUser && hideUserPresence(directChannelUser) ? '' : directChannelUser && directChannelUser.presence && (directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
     color: textSecondary,
     fontSize: channelMembersFontSize,
     lineHeight: channelMembersLineHeight
@@ -42922,6 +43155,12 @@ var ChannelName$1 = styled__default(SectionHeader)(_templateObject0$g || (_templ
 });
 var ChannelNameWrapper = styled__default.div(_templateObject1$d || (_templateObject1$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 var EditButton = styled__default.span(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
+var PhoneNumberContainer = styled__default.span(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  user-select: text;\n"])));
+var CopiedTooltip = styled__default.span(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  bottom: calc(100% + 6px);\n  padding: 4px 8px;\n  border-radius: 6px;\n  background: ", ";\n  color: ", ";\n  font-size: 12px;\n  line-height: 14px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 10;\n"])), function (props) {
+  return props.background;
+}, function (props) {
+  return props.color;
+});
 
 var _templateObject$_;
 var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {