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

package/components/Message/Message.types.d.ts

@@ -57,6 +57,7 @@ interface ICustomMessageItem {
     handleScrollToRepliedMessage: (messageId: string) => void;
     handleMediaItemClick?: (attachment: IAttachment) => void;
     isThreadMessage?: boolean;
+    handleOpenUserProfile: (user: IUser) => void;
 }
 export interface IMessageProps {
     message: IMessage;
@@ -187,5 +188,6 @@ export interface IMessageProps {
     messageTextFontSize?: string;
     messageTextLineHeight?: string;
     messageTimeColorOnAttachment?: string;
+    shouldOpenUserProfileForMention?: boolean;
 }
 export {};

package/components/Message/MessageBody/index.d.ts

@@ -125,6 +125,8 @@ interface IMessageBodyProps {
     handleReactionAddDelete: (emoji: any) => void;
     handleCreateChat: (user?: IUser) => void;
     messageTextRef: React.RefObject<HTMLSpanElement>;
+    handleOpenUserProfile: (user: IUser) => void;
+    shouldOpenUserProfileForMention?: boolean;
 }
-declare const _default: React.MemoExoticComponent<({ message, channel, MessageActionsMenu, handleScrollToRepliedMessage, handleMediaItemClick, isPendingMessage, prevMessage, nextMessage, isUnreadMessage, unreadMessageId, isThreadMessage, fontFamily, ownMessageOnRightSide, showSenderNameOnDirectChannel, showSenderNameOnGroupChannel, showSenderNameOnOwnMessages, messageStatusAndTimePosition, messageStatusDisplayingType, outgoingMessageStyles, incomingMessageStyles, ownRepliedMessageBackground, incomingRepliedMessageBackground, showMessageStatus, showMessageTimeAndStatusOnlyOnHover, showMessageTime, showMessageStatusForEachMessage, showMessageTimeForEachMessage, messageReaction, editMessage, copyMessage, replyMessage, replyMessageInThread, deleteMessage, selectMessage, allowEditDeleteIncomingMessage, forwardMessage, reportMessage, reactionIcon, editIcon, copyIcon, replyIcon, replyInThreadIcon, forwardIcon, deleteIcon, selectIcon, starIcon, staredIcon, reportIcon, reactionIconOrder, editIconOrder, copyIconOrder, replyIconOrder, replyInThreadIconOrder, forwardIconOrder, deleteIconOrder, selectIconOrder, starIconOrder, reportIconOrder, reactionIconTooltipText, editIconTooltipText, copyIconTooltipText, replyIconTooltipText, replyInThreadIconTooltipText, forwardIconTooltipText, deleteIconTooltipText, selectIconTooltipText, starIconTooltipText, reportIconTooltipText, messageActionIconsColor, messageStatusSize, messageStatusColor, messageReadStatusColor, messageStateFontSize, messageStateColor, messageTimeFontSize, messageTimeColor, messageStatusAndTimeLineHeight, messageTimeColorOnAttachment, fileAttachmentsIcon, fileAttachmentsBoxWidth, fileAttachmentsBoxBorder, fileAttachmentsTitleColor, fileAttachmentsSizeColor, imageAttachmentMaxWidth, imageAttachmentMaxHeight, videoAttachmentMaxWidth, videoAttachmentMaxHeight, emojisCategoryIconsPosition, emojisContainerBorderRadius, fixEmojiCategoriesTitleOnTop, selectedMessagesMap, contactsMap, theme, messageTextFontSize, messageTextLineHeight, handleToggleForwardMessagePopup, messageActionsShow, closeMessageActions, handleDeletePendingMessage, handleReplyMessage, handleToggleDeleteMessagePopup, handleToggleReportPopupOpen, handleResendMessage, handleOpenEmojis, emojisPopupOpen, setEmojisPopupOpen, emojisPopupPosition, frequentlyEmojisOpen, handleCopyMessage, toggleEditMode, handleSelectMessage, handleMouseEnter, handleMouseLeave, handleReactionAddDelete, handleCreateChat, messageTextRef }: IMessageBodyProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ message, channel, MessageActionsMenu, handleScrollToRepliedMessage, handleMediaItemClick, isPendingMessage, prevMessage, nextMessage, isUnreadMessage, unreadMessageId, isThreadMessage, fontFamily, ownMessageOnRightSide, showSenderNameOnDirectChannel, showSenderNameOnGroupChannel, showSenderNameOnOwnMessages, messageStatusAndTimePosition, messageStatusDisplayingType, outgoingMessageStyles, incomingMessageStyles, ownRepliedMessageBackground, incomingRepliedMessageBackground, showMessageStatus, showMessageTimeAndStatusOnlyOnHover, showMessageTime, showMessageStatusForEachMessage, showMessageTimeForEachMessage, messageReaction, editMessage, copyMessage, replyMessage, replyMessageInThread, deleteMessage, selectMessage, allowEditDeleteIncomingMessage, forwardMessage, reportMessage, reactionIcon, editIcon, copyIcon, replyIcon, replyInThreadIcon, forwardIcon, deleteIcon, selectIcon, starIcon, staredIcon, reportIcon, reactionIconOrder, editIconOrder, copyIconOrder, replyIconOrder, replyInThreadIconOrder, forwardIconOrder, deleteIconOrder, selectIconOrder, starIconOrder, reportIconOrder, reactionIconTooltipText, editIconTooltipText, copyIconTooltipText, replyIconTooltipText, replyInThreadIconTooltipText, forwardIconTooltipText, deleteIconTooltipText, selectIconTooltipText, starIconTooltipText, reportIconTooltipText, messageActionIconsColor, messageStatusSize, messageStatusColor, messageReadStatusColor, messageStateFontSize, messageStateColor, messageTimeFontSize, messageTimeColor, messageStatusAndTimeLineHeight, messageTimeColorOnAttachment, fileAttachmentsIcon, fileAttachmentsBoxWidth, fileAttachmentsBoxBorder, fileAttachmentsTitleColor, fileAttachmentsSizeColor, imageAttachmentMaxWidth, imageAttachmentMaxHeight, videoAttachmentMaxWidth, videoAttachmentMaxHeight, emojisCategoryIconsPosition, emojisContainerBorderRadius, fixEmojiCategoriesTitleOnTop, selectedMessagesMap, contactsMap, theme, messageTextFontSize, messageTextLineHeight, handleToggleForwardMessagePopup, messageActionsShow, closeMessageActions, handleDeletePendingMessage, handleReplyMessage, handleToggleDeleteMessagePopup, handleToggleReportPopupOpen, handleResendMessage, handleOpenEmojis, emojisPopupOpen, setEmojisPopupOpen, emojisPopupPosition, frequentlyEmojisOpen, handleCopyMessage, toggleEditMode, handleSelectMessage, handleMouseEnter, handleMouseLeave, handleReactionAddDelete, handleCreateChat, messageTextRef, handleOpenUserProfile, shouldOpenUserProfileForMention }: IMessageBodyProps) => React.JSX.Element>;
 export default _default;

package/components/Message/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IMessageProps } from './Message.types';
-declare const _default: React.MemoExoticComponent<({ message, channel, MessageActionsMenu, CustomMessageItem, handleScrollToRepliedMessage, handleMediaItemClick, stopScrolling, isPendingMessage, prevMessage, nextMessage, setLastVisibleMessageId, isUnreadMessage, unreadMessageId, isThreadMessage, fontFamily, ownMessageOnRightSide, messageWidthPercent, showSenderNameOnDirectChannel, showSenderNameOnGroupChannel, showSenderNameOnOwnMessages, messageStatusAndTimePosition, messageStatusDisplayingType, outgoingMessageStyles, incomingMessageStyles, ownRepliedMessageBackground, incomingRepliedMessageBackground, showOwnAvatar, showMessageStatus, showMessageTimeAndStatusOnlyOnHover, showMessageTime, showMessageStatusForEachMessage, showMessageTimeForEachMessage, hoverBackground, messageReaction, editMessage, copyMessage, replyMessage, replyMessageInThread, deleteMessage, selectMessage, allowEditDeleteIncomingMessage, forwardMessage, reportMessage, reactionIcon, editIcon, copyIcon, replyIcon, replyInThreadIcon, forwardIcon, deleteIcon, selectIcon, starIcon, staredIcon, reportIcon, reactionIconOrder, openFrequentlyUsedReactions, editIconOrder, copyIconOrder, replyIconOrder, replyInThreadIconOrder, forwardIconOrder, deleteIconOrder, selectIconOrder, starIconOrder, reportIconOrder, reactionIconTooltipText, editIconTooltipText, copyIconTooltipText, replyIconTooltipText, replyInThreadIconTooltipText, forwardIconTooltipText, deleteIconTooltipText, selectIconTooltipText, starIconTooltipText, reportIconTooltipText, messageActionIconsColor, messageStatusSize, messageStatusColor, messageReadStatusColor, messageStateFontSize, messageStateColor, messageTimeFontSize, messageTimeColor, messageStatusAndTimeLineHeight, fileAttachmentsIcon, reactionsDisplayCount, showEachReactionCount, showTotalReactionCount, reactionItemBorder, reactionItemBorderRadius, reactionItemBackground, reactionItemPadding, reactionItemMargin, reactionsFontSize, reactionsContainerBoxShadow, reactionsContainerBorder, reactionsContainerBorderRadius, reactionsContainerBackground, reactionsContainerPadding, reactionsContainerTopPosition, reactionsDetailsPopupBorderRadius, reactionsDetailsPopupHeaderItemsStyle, fileAttachmentsBoxWidth, fileAttachmentsBoxBorder, fileAttachmentsTitleColor, fileAttachmentsSizeColor, imageAttachmentMaxWidth, imageAttachmentMaxHeight, videoAttachmentMaxWidth, videoAttachmentMaxHeight, emojisCategoryIconsPosition, emojisContainerBorderRadius, fixEmojiCategoriesTitleOnTop, sameUserMessageSpacing, differentUserMessageSpacing, selectedMessagesMap, contactsMap, openedMessageMenuId, tabIsActive, connectionStatus, theme, messageTextFontSize, messageTextLineHeight, messageTimeColorOnAttachment }: IMessageProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ message, channel, MessageActionsMenu, CustomMessageItem, handleScrollToRepliedMessage, handleMediaItemClick, stopScrolling, isPendingMessage, prevMessage, nextMessage, setLastVisibleMessageId, isUnreadMessage, unreadMessageId, isThreadMessage, fontFamily, ownMessageOnRightSide, messageWidthPercent, showSenderNameOnDirectChannel, showSenderNameOnGroupChannel, showSenderNameOnOwnMessages, messageStatusAndTimePosition, messageStatusDisplayingType, outgoingMessageStyles, incomingMessageStyles, ownRepliedMessageBackground, incomingRepliedMessageBackground, showOwnAvatar, showMessageStatus, showMessageTimeAndStatusOnlyOnHover, showMessageTime, showMessageStatusForEachMessage, showMessageTimeForEachMessage, hoverBackground, messageReaction, editMessage, copyMessage, replyMessage, replyMessageInThread, deleteMessage, selectMessage, allowEditDeleteIncomingMessage, forwardMessage, reportMessage, reactionIcon, editIcon, copyIcon, replyIcon, replyInThreadIcon, forwardIcon, deleteIcon, selectIcon, starIcon, staredIcon, reportIcon, reactionIconOrder, openFrequentlyUsedReactions, editIconOrder, copyIconOrder, replyIconOrder, replyInThreadIconOrder, forwardIconOrder, deleteIconOrder, selectIconOrder, starIconOrder, reportIconOrder, reactionIconTooltipText, editIconTooltipText, copyIconTooltipText, replyIconTooltipText, replyInThreadIconTooltipText, forwardIconTooltipText, deleteIconTooltipText, selectIconTooltipText, starIconTooltipText, reportIconTooltipText, messageActionIconsColor, messageStatusSize, messageStatusColor, messageReadStatusColor, messageStateFontSize, messageStateColor, messageTimeFontSize, messageTimeColor, messageStatusAndTimeLineHeight, fileAttachmentsIcon, reactionsDisplayCount, showEachReactionCount, showTotalReactionCount, reactionItemBorder, reactionItemBorderRadius, reactionItemBackground, reactionItemPadding, reactionItemMargin, reactionsFontSize, reactionsContainerBoxShadow, reactionsContainerBorder, reactionsContainerBorderRadius, reactionsContainerBackground, reactionsContainerPadding, reactionsContainerTopPosition, reactionsDetailsPopupBorderRadius, reactionsDetailsPopupHeaderItemsStyle, fileAttachmentsBoxWidth, fileAttachmentsBoxBorder, fileAttachmentsTitleColor, fileAttachmentsSizeColor, imageAttachmentMaxWidth, imageAttachmentMaxHeight, videoAttachmentMaxWidth, videoAttachmentMaxHeight, emojisCategoryIconsPosition, emojisContainerBorderRadius, fixEmojiCategoriesTitleOnTop, sameUserMessageSpacing, differentUserMessageSpacing, selectedMessagesMap, contactsMap, openedMessageMenuId, tabIsActive, connectionStatus, theme, messageTextFontSize, messageTextLineHeight, messageTimeColorOnAttachment, shouldOpenUserProfileForMention }: IMessageProps) => React.JSX.Element>;
 export default _default;

package/components/Messages/MessageList/index.d.ts

@@ -67,6 +67,7 @@ interface MessagesProps {
         handleReactionAddDelete: (selectedEmoji: any) => void;
         handleScrollToRepliedMessage: (messageId: string) => void;
         handleMediaItemClick?: (attachment: IAttachment) => void;
+        handleOpenUserProfile: (user: IUser) => void;
         isThreadMessage?: boolean;
     }>;
     messageReaction?: boolean;
@@ -173,6 +174,7 @@ interface MessagesProps {
     messageTextFontSize?: string;
     messageTextLineHeight?: string;
     hiddenMessagesProperties?: HiddenMessageProperty[];
+    shouldOpenUserProfileForMention?: boolean;
 }
 declare const MessageList: React.FC<MessagesProps>;
 export default MessageList;

package/components/Messages/index.d.ts

@@ -173,6 +173,7 @@ interface MessagesProps {
     messageTimeColor?: string;
     messageStatusAndTimeLineHeight?: string;
     hiddenMessagesProperties?: HiddenMessageProperty[];
+    shouldOpenUserProfileForMention?: boolean;
 }
 declare const MessagesContainer: React.FC<MessagesProps>;
 export default MessagesContainer;

package/index.js

@@ -11193,7 +11193,7 @@ var UploadAvatarButton = styled__default.button(_templateObject24 || (_templateO
 var UploadAvatarHandler = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledText = styled__default.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
+var StyledText = styled__default.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n    cursor: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
   return props.fontWeight || props.isLastMessage && '500';
 }, function (props) {
   return props.fontFamily;
@@ -11207,6 +11207,8 @@ var StyledText = styled__default.span(_templateObject26 || (_templateObject26 =
   return props.color;
 }, function (props) {
   return props.isLastMessage && '500';
+}, function (props) {
+  return props.shouldOpenUserProfileForMention && 'pointer';
 });
 var MessageOwner = styled__default.h3(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n  margin: 0 12px 4px 0;\n  white-space: nowrap;\n  color: ", ";\n  margin-left: ", ";\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n  cursor: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
   return props.color;
@@ -11452,7 +11454,9 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     isLastMessage = _ref2.isLastMessage,
     asSampleText = _ref2.asSampleText,
     accentColor = _ref2.accentColor,
-    textSecondary = _ref2.textSecondary;
+    textSecondary = _ref2.textSecondary,
+    onMentionNameClick = _ref2.onMentionNameClick,
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
   try {
     var messageText = [];
     var linkify = new LinkifyIt();
@@ -11497,12 +11501,18 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
                 className: "" + combinedAttributesList[index - 1].type,
                 isLastMessage: isLastMessage,
                 key: attributeOffset + index,
-                color: isLastMessage ? textSecondary : accentColor
+                color: isLastMessage ? textSecondary : accentColor,
+                shouldOpenUserProfileForMention: onMentionNameClick && shouldOpenUserProfileForMention
               }, firsTextPart, /*#__PURE__*/React__default.createElement(StyledText, {
                 className: 'mention',
                 isLastMessage: isLastMessage,
                 color: isLastMessage ? textSecondary : accentColor,
-                key: attributeOffset + index
+                key: attributeOffset + index,
+                onClick: function onClick() {
+                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                    onMentionNameClick(mentionDisplay);
+                  }
+                }
               }, mentionDisplayName), secondTextPart)), index === combinedAttributesList.length - 1 ? secondPart : '');
             } else {
               nextPartIndex = attribute.offset + attribute.length;
@@ -11510,7 +11520,13 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
                 className: attribute.type,
                 isLastMessage: isLastMessage,
                 color: isLastMessage ? textSecondary : accentColor,
-                key: attributeOffset
+                key: attributeOffset,
+                onClick: function onClick() {
+                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                    onMentionNameClick(mentionDisplay);
+                  }
+                },
+                shouldOpenUserProfileForMention: onMentionNameClick && shouldOpenUserProfileForMention
               }, mentionDisplayName)), index === combinedAttributesList.length - 1 ? secondPart : '');
             }
           } else {
@@ -29584,7 +29600,9 @@ var MessageBody = function MessageBody(_ref) {
     handleMouseLeave = _ref.handleMouseLeave,
     handleReactionAddDelete = _ref.handleReactionAddDelete,
     handleCreateChat = _ref.handleCreateChat,
-    messageTextRef = _ref.messageTextRef;
+    messageTextRef = _ref.messageTextRef,
+    handleOpenUserProfile = _ref.handleOpenUserProfile,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -29785,7 +29803,9 @@ var MessageBody = function MessageBody(_ref) {
     contactsMap: contactsMap,
     getFromContacts: getFromContacts,
     accentColor: accentColor,
-    textSecondary: textSecondary
+    textSecondary: textSecondary,
+    onMentionNameClick: handleOpenUserProfile,
+    shouldOpenUserProfileForMention: !!shouldOpenUserProfileForMention
   })), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
     color: textSecondary
   }, " Message was deleted. ")) : '', messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
@@ -30071,7 +30091,8 @@ var Message$1 = function Message(_ref) {
     theme = _ref.theme,
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
-    messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment;
+    messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
@@ -30335,6 +30356,21 @@ var Message$1 = function Message(_ref) {
       document.removeEventListener('mousedown', handleClick);
     };
   }, []);
+  var handleOpenChannelDetails = function handleOpenChannelDetails() {
+    dispatch(switchChannelInfoAC(true));
+  };
+  var handleOpenUserProfile = function handleOpenUserProfile(user) {
+    if (getOpenChatOnUserInteraction() && user && !selectionIsActive) {
+      dispatch(createChannelAC({
+        metadata: '',
+        type: DEFAULT_CHANNEL_TYPE.DIRECT,
+        members: [_extends({}, user, {
+          role: 'owner'
+        })]
+      }, true));
+      handleOpenChannelDetails();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(MessageItem, {
     className: 'message_item',
     rtl: ownMessageOnRightSide && !message.incoming,
@@ -30403,7 +30439,8 @@ var Message$1 = function Message(_ref) {
     handleReactionAddDelete: handleReactionAddDelete,
     handleScrollToRepliedMessage: handleScrollToRepliedMessage,
     handleMediaItemClick: handleMediaItemClick,
-    isThreadMessage: isThreadMessage
+    isThreadMessage: isThreadMessage,
+    handleOpenUserProfile: handleOpenUserProfile
   })) : (/*#__PURE__*/React__default.createElement(MessageBody$1, {
     message: message,
     channel: channel,
@@ -30523,7 +30560,9 @@ var Message$1 = function Message(_ref) {
     handleDeletePendingMessage: handleDeletePendingMessage,
     handleCreateChat: handleCreateChat,
     messageTextRef: messageTextRef,
-    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
+    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary,
+    handleOpenUserProfile: handleOpenUserProfile,
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
   })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -30771,7 +30810,7 @@ var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   }));
 };
 var MessageList = function MessageList(_ref2) {
-  var _channel$lastMessage, _channel$lastMessage2, _scrollRef$current;
+  var _channel$lastMessage, _channel$lastMessage3, _scrollRef$current;
   var messages = _ref2.messages,
     fontFamily = _ref2.fontFamily,
     _ref2$ownMessageOnRig = _ref2.ownMessageOnRightSide,
@@ -30912,7 +30951,8 @@ var MessageList = function MessageList(_ref2) {
     messageTimeFontSize = _ref2.messageTimeFontSize,
     messageTimeColor = _ref2.messageTimeColor,
     messageStatusAndTimeLineHeight = _ref2.messageStatusAndTimeLineHeight,
-    hiddenMessagesProperties = _ref2.hiddenMessagesProperties;
+    hiddenMessagesProperties = _ref2.hiddenMessagesProperties,
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -31209,10 +31249,11 @@ var MessageList = function MessageList(_ref2) {
     }
   };
   React.useEffect(function () {
-    if (messages.length > 0 && messages[messages.length - 1].id === channel.lastMessage.id && scrollRef.current && scrollRef.current.scrollTop > -50 && !showScrollToNewMessageButton) {
+    var _messages, _channel$lastMessage2;
+    if (messages.length > 0 && ((_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.id) === ((_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id) && scrollRef.current && scrollRef.current.scrollTop > -50 && !showScrollToNewMessageButton) {
       dispatch(showScrollToNewMessageButtonAC(false));
     }
-  }, [messages, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id, scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop, showScrollToNewMessageButton]);
+  }, [messages, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage3 = channel.lastMessage) === null || _channel$lastMessage3 === void 0 ? void 0 : _channel$lastMessage3.id, scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop, showScrollToNewMessageButton]);
   React.useEffect(function () {
     if (scrollToRepliedMessage) {
       loading = false;
@@ -31656,7 +31697,8 @@ var MessageList = function MessageList(_ref2) {
       messageStateColor: messageStateColor,
       messageTimeFontSize: messageTimeFontSize,
       messageTimeColor: messageTimeColor,
-      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight
+      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
+      shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
     }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
       theme: theme,
       newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
@@ -31891,7 +31933,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeColor = _ref.messageTimeColor,
     messageStatusAndTimeLineHeight = _ref.messageStatusAndTimeLineHeight,
     _ref$hiddenMessagesPr = _ref.hiddenMessagesProperties,
-    hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr;
+    hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var messages = reactRedux.useSelector(activeChannelMessagesSelector) || [];
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
     messages: messages,
@@ -32019,7 +32062,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeFontSize: messageTimeFontSize,
     messageTimeColor: messageTimeColor,
     messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
-    hiddenMessagesProperties: hiddenMessagesProperties
+    hiddenMessagesProperties: hiddenMessagesProperties,
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
   }));
 };
 

package/index.modern.js

@@ -11170,7 +11170,7 @@ var UploadAvatarButton = styled.button(_templateObject24 || (_templateObject24 =
 var UploadAvatarHandler = styled.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledText = styled.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
+var StyledText = styled.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n    cursor: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
   return props.fontWeight || props.isLastMessage && '500';
 }, function (props) {
   return props.fontFamily;
@@ -11184,6 +11184,8 @@ var StyledText = styled.span(_templateObject26 || (_templateObject26 = _taggedTe
   return props.color;
 }, function (props) {
   return props.isLastMessage && '500';
+}, function (props) {
+  return props.shouldOpenUserProfileForMention && 'pointer';
 });
 var MessageOwner = styled.h3(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n  margin: 0 12px 4px 0;\n  white-space: nowrap;\n  color: ", ";\n  margin-left: ", ";\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n  cursor: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
   return props.color;
@@ -11429,7 +11431,9 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     isLastMessage = _ref2.isLastMessage,
     asSampleText = _ref2.asSampleText,
     accentColor = _ref2.accentColor,
-    textSecondary = _ref2.textSecondary;
+    textSecondary = _ref2.textSecondary,
+    onMentionNameClick = _ref2.onMentionNameClick,
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
   try {
     var messageText = [];
     var linkify = new LinkifyIt();
@@ -11474,12 +11478,18 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
                 className: "" + combinedAttributesList[index - 1].type,
                 isLastMessage: isLastMessage,
                 key: attributeOffset + index,
-                color: isLastMessage ? textSecondary : accentColor
+                color: isLastMessage ? textSecondary : accentColor,
+                shouldOpenUserProfileForMention: onMentionNameClick && shouldOpenUserProfileForMention
               }, firsTextPart, /*#__PURE__*/React__default.createElement(StyledText, {
                 className: 'mention',
                 isLastMessage: isLastMessage,
                 color: isLastMessage ? textSecondary : accentColor,
-                key: attributeOffset + index
+                key: attributeOffset + index,
+                onClick: function onClick() {
+                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                    onMentionNameClick(mentionDisplay);
+                  }
+                }
               }, mentionDisplayName), secondTextPart)), index === combinedAttributesList.length - 1 ? secondPart : '');
             } else {
               nextPartIndex = attribute.offset + attribute.length;
@@ -11487,7 +11497,13 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
                 className: attribute.type,
                 isLastMessage: isLastMessage,
                 color: isLastMessage ? textSecondary : accentColor,
-                key: attributeOffset
+                key: attributeOffset,
+                onClick: function onClick() {
+                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                    onMentionNameClick(mentionDisplay);
+                  }
+                },
+                shouldOpenUserProfileForMention: onMentionNameClick && shouldOpenUserProfileForMention
               }, mentionDisplayName)), index === combinedAttributesList.length - 1 ? secondPart : '');
             }
           } else {
@@ -29561,7 +29577,9 @@ var MessageBody = function MessageBody(_ref) {
     handleMouseLeave = _ref.handleMouseLeave,
     handleReactionAddDelete = _ref.handleReactionAddDelete,
     handleCreateChat = _ref.handleCreateChat,
-    messageTextRef = _ref.messageTextRef;
+    messageTextRef = _ref.messageTextRef,
+    handleOpenUserProfile = _ref.handleOpenUserProfile,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -29762,7 +29780,9 @@ var MessageBody = function MessageBody(_ref) {
     contactsMap: contactsMap,
     getFromContacts: getFromContacts,
     accentColor: accentColor,
-    textSecondary: textSecondary
+    textSecondary: textSecondary,
+    onMentionNameClick: handleOpenUserProfile,
+    shouldOpenUserProfileForMention: !!shouldOpenUserProfileForMention
   })), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
     color: textSecondary
   }, " Message was deleted. ")) : '', messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
@@ -30048,7 +30068,8 @@ var Message$1 = function Message(_ref) {
     theme = _ref.theme,
     messageTextFontSize = _ref.messageTextFontSize,
     messageTextLineHeight = _ref.messageTextLineHeight,
-    messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment;
+    messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
@@ -30312,6 +30333,21 @@ var Message$1 = function Message(_ref) {
       document.removeEventListener('mousedown', handleClick);
     };
   }, []);
+  var handleOpenChannelDetails = function handleOpenChannelDetails() {
+    dispatch(switchChannelInfoAC(true));
+  };
+  var handleOpenUserProfile = function handleOpenUserProfile(user) {
+    if (getOpenChatOnUserInteraction() && user && !selectionIsActive) {
+      dispatch(createChannelAC({
+        metadata: '',
+        type: DEFAULT_CHANNEL_TYPE.DIRECT,
+        members: [_extends({}, user, {
+          role: 'owner'
+        })]
+      }, true));
+      handleOpenChannelDetails();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(MessageItem, {
     className: 'message_item',
     rtl: ownMessageOnRightSide && !message.incoming,
@@ -30380,7 +30416,8 @@ var Message$1 = function Message(_ref) {
     handleReactionAddDelete: handleReactionAddDelete,
     handleScrollToRepliedMessage: handleScrollToRepliedMessage,
     handleMediaItemClick: handleMediaItemClick,
-    isThreadMessage: isThreadMessage
+    isThreadMessage: isThreadMessage,
+    handleOpenUserProfile: handleOpenUserProfile
   })) : (/*#__PURE__*/React__default.createElement(MessageBody$1, {
     message: message,
     channel: channel,
@@ -30500,7 +30537,9 @@ var Message$1 = function Message(_ref) {
     handleDeletePendingMessage: handleDeletePendingMessage,
     handleCreateChat: handleCreateChat,
     messageTextRef: messageTextRef,
-    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
+    messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary,
+    handleOpenUserProfile: handleOpenUserProfile,
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
   })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
     message: message,
     showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -30748,7 +30787,7 @@ var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   }));
 };
 var MessageList = function MessageList(_ref2) {
-  var _channel$lastMessage, _channel$lastMessage2, _scrollRef$current;
+  var _channel$lastMessage, _channel$lastMessage3, _scrollRef$current;
   var messages = _ref2.messages,
     fontFamily = _ref2.fontFamily,
     _ref2$ownMessageOnRig = _ref2.ownMessageOnRightSide,
@@ -30889,7 +30928,8 @@ var MessageList = function MessageList(_ref2) {
     messageTimeFontSize = _ref2.messageTimeFontSize,
     messageTimeColor = _ref2.messageTimeColor,
     messageStatusAndTimeLineHeight = _ref2.messageStatusAndTimeLineHeight,
-    hiddenMessagesProperties = _ref2.hiddenMessagesProperties;
+    hiddenMessagesProperties = _ref2.hiddenMessagesProperties,
+    shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -31186,10 +31226,11 @@ var MessageList = function MessageList(_ref2) {
     }
   };
   useEffect(function () {
-    if (messages.length > 0 && messages[messages.length - 1].id === channel.lastMessage.id && scrollRef.current && scrollRef.current.scrollTop > -50 && !showScrollToNewMessageButton) {
+    var _messages, _channel$lastMessage2;
+    if (messages.length > 0 && ((_messages = messages[messages.length - 1]) === null || _messages === void 0 ? void 0 : _messages.id) === ((_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id) && scrollRef.current && scrollRef.current.scrollTop > -50 && !showScrollToNewMessageButton) {
       dispatch(showScrollToNewMessageButtonAC(false));
     }
-  }, [messages, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage2 = channel.lastMessage) === null || _channel$lastMessage2 === void 0 ? void 0 : _channel$lastMessage2.id, scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop, showScrollToNewMessageButton]);
+  }, [messages, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage3 = channel.lastMessage) === null || _channel$lastMessage3 === void 0 ? void 0 : _channel$lastMessage3.id, scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop, showScrollToNewMessageButton]);
   useEffect(function () {
     if (scrollToRepliedMessage) {
       loading = false;
@@ -31633,7 +31674,8 @@ var MessageList = function MessageList(_ref2) {
       messageStateColor: messageStateColor,
       messageTimeFontSize: messageTimeFontSize,
       messageTimeColor: messageTimeColor,
-      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight
+      messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
+      shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
     }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
       theme: theme,
       newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
@@ -31868,7 +31910,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeColor = _ref.messageTimeColor,
     messageStatusAndTimeLineHeight = _ref.messageStatusAndTimeLineHeight,
     _ref$hiddenMessagesPr = _ref.hiddenMessagesProperties,
-    hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr;
+    hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr,
+    shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention;
   var messages = useSelector(activeChannelMessagesSelector) || [];
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
     messages: messages,
@@ -31996,7 +32039,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     messageTimeFontSize: messageTimeFontSize,
     messageTimeColor: messageTimeColor,
     messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
-    hiddenMessagesProperties: hiddenMessagesProperties
+    hiddenMessagesProperties: hiddenMessagesProperties,
+    shouldOpenUserProfileForMention: shouldOpenUserProfileForMention
   }));
 };
 

package/messageUtils/index.d.ts

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

package/package.json

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