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

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

@@ -65,6 +65,7 @@ interface ICustomMessageItem {
     handleOpenUserProfile: (user: IUser) => void;
     unsupportedMessage: boolean;
     onInviteLinkClick?: (key: string) => void;
+    onPhoneNumberClick?: (phoneNumber: string, dataPhone: string) => void;
     ifLatestAndHasNotPreview: boolean;
 }
 export interface IMessageProps {
@@ -229,5 +230,6 @@ export interface IMessageProps {
     collapsedLinesLimit?: number;
     createChatOnAvatarTap?: boolean;
     ifLatestAndHasNotPreview: boolean;
+    onPhoneNumberClick?: (phoneNumber: string, dataPhone: string) => void;
 }
 export {};

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

@@ -138,8 +138,9 @@ interface IMessageBodyProps {
     ogMetadataProps?: OGMetadataProps;
     unsupportedMessage: boolean;
     onInviteLinkClick?: (key: string) => void;
+    onPhoneNumberClick?: (phoneNumber: string, dataPhone: string) => void;
     ifLatestAndHasNotPreview: boolean;
     collapsedLinesLimit?: number;
 }
-declare const _default: React.MemoExoticComponent<({ message, channel, MessageActionsMenu, handleScrollToRepliedMessage, handleMediaItemClick, isPendingMessage, prevMessage, nextMessage, 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, showInfoMessage, allowEditDeleteIncomingMessage, forwardMessage, reportMessage, reactionIcon, editIcon, copyIcon, replyIcon, replyInThreadIcon, forwardIcon, deleteIcon, infoIcon, selectIcon, retractVoteIcon, endVoteIcon, starIcon, staredIcon, reportIcon, reactionIconOrder, editIconOrder, copyIconOrder, replyIconOrder, replyInThreadIconOrder, forwardIconOrder, deleteIconOrder, infoIconOrder, selectIconOrder, starIconOrder, reportIconOrder, reactionIconTooltipText, editIconTooltipText, copyIconTooltipText, replyIconTooltipText, replyInThreadIconTooltipText, forwardIconTooltipText, deleteIconTooltipText, selectIconTooltipText, starIconTooltipText, reportIconTooltipText, infoIconTooltipText, messageActionIconsColor, messageStatusSize, messageStatusColor, messageReadStatusColor, messageStateFontSize, messageStateColor, messageTimeFontSize, messageTimeColor, messageStatusAndTimeLineHeight, messageTimeColorOnAttachment, fileAttachmentsIcon, fileAttachmentsBoxWidth, fileAttachmentsBoxBorder, fileAttachmentsTitleColor, fileAttachmentsSizeColor, imageAttachmentMaxWidth, imageAttachmentMaxHeight, videoAttachmentMaxWidth, videoAttachmentMaxHeight, emojisCategoryIconsPosition, emojisContainerBorderRadius, fixEmojiCategoriesTitleOnTop, selectedMessagesMap, contactsMap, messageTextFontSize, messageTextLineHeight, handleToggleForwardMessagePopup, handleToggleInfoMessagePopupOpen, messageActionsShow, handleRetractVote, handleEndVote, closeMessageActions, handleDeletePendingMessage, handleReplyMessage, handleToggleDeleteMessagePopup, handleToggleReportPopupOpen, handleResendMessage, handleOpenEmojis, emojisPopupOpen, setEmojisPopupOpen, emojisPopupPosition, frequentlyEmojisOpen, handleCopyMessage, toggleEditMode, handleSelectMessage, handleMouseEnter, handleMouseLeave, handleReactionAddDelete, handleCreateChat, messageTextRef, handleOpenUserProfile, shouldOpenUserProfileForMention, ogMetadataProps, unsupportedMessage, onInviteLinkClick, collapsedLinesLimit, ifLatestAndHasNotPreview }: IMessageBodyProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ message, channel, MessageActionsMenu, handleScrollToRepliedMessage, handleMediaItemClick, isPendingMessage, prevMessage, nextMessage, 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, showInfoMessage, allowEditDeleteIncomingMessage, forwardMessage, reportMessage, reactionIcon, editIcon, copyIcon, replyIcon, replyInThreadIcon, forwardIcon, deleteIcon, infoIcon, selectIcon, retractVoteIcon, endVoteIcon, starIcon, staredIcon, reportIcon, reactionIconOrder, editIconOrder, copyIconOrder, replyIconOrder, replyInThreadIconOrder, forwardIconOrder, deleteIconOrder, infoIconOrder, selectIconOrder, starIconOrder, reportIconOrder, reactionIconTooltipText, editIconTooltipText, copyIconTooltipText, replyIconTooltipText, replyInThreadIconTooltipText, forwardIconTooltipText, deleteIconTooltipText, selectIconTooltipText, starIconTooltipText, reportIconTooltipText, infoIconTooltipText, messageActionIconsColor, messageStatusSize, messageStatusColor, messageReadStatusColor, messageStateFontSize, messageStateColor, messageTimeFontSize, messageTimeColor, messageStatusAndTimeLineHeight, messageTimeColorOnAttachment, fileAttachmentsIcon, fileAttachmentsBoxWidth, fileAttachmentsBoxBorder, fileAttachmentsTitleColor, fileAttachmentsSizeColor, imageAttachmentMaxWidth, imageAttachmentMaxHeight, videoAttachmentMaxWidth, videoAttachmentMaxHeight, emojisCategoryIconsPosition, emojisContainerBorderRadius, fixEmojiCategoriesTitleOnTop, selectedMessagesMap, contactsMap, messageTextFontSize, messageTextLineHeight, handleToggleForwardMessagePopup, handleToggleInfoMessagePopupOpen, messageActionsShow, handleRetractVote, handleEndVote, closeMessageActions, handleDeletePendingMessage, handleReplyMessage, handleToggleDeleteMessagePopup, handleToggleReportPopupOpen, handleResendMessage, handleOpenEmojis, emojisPopupOpen, setEmojisPopupOpen, emojisPopupPosition, frequentlyEmojisOpen, handleCopyMessage, toggleEditMode, handleSelectMessage, handleMouseEnter, handleMouseLeave, handleReactionAddDelete, handleCreateChat, messageTextRef, handleOpenUserProfile, shouldOpenUserProfileForMention, ogMetadataProps, unsupportedMessage, onInviteLinkClick, onPhoneNumberClick, collapsedLinesLimit, ifLatestAndHasNotPreview }: 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, queueReadMarker, queueDeliveredMarker, disableAutoReadTracking, isUnreadMessage, nextMessageStartsUnreadSection, 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, showInfoMessage, allowEditDeleteIncomingMessage, forwardMessage, reportMessage, reactionIcon, editIcon, copyIcon, replyIcon, replyInThreadIcon, forwardIcon, deleteIcon, selectIcon, starIcon, staredIcon, reportIcon, retractVoteIcon, endVoteIcon, reactionIconOrder, openFrequentlyUsedReactions, editIconOrder, copyIconOrder, replyIconOrder, replyInThreadIconOrder, forwardIconOrder, deleteIconOrder, selectIconOrder, starIconOrder, reportIconOrder, infoIconOrder, reactionIconTooltipText, editIconTooltipText, copyIconTooltipText, replyIconTooltipText, replyInThreadIconTooltipText, forwardIconTooltipText, deleteIconTooltipText, selectIconTooltipText, starIconTooltipText, reportIconTooltipText, infoIconTooltipText, 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, tabIsActiveRef, connectionStatus, messageTextFontSize, messageTextLineHeight, messageTimeColorOnAttachment, shouldOpenUserProfileForMention, ogMetadataProps, showInfoMessageProps, collapsedLinesLimit, createChatOnAvatarTap, ifLatestAndHasNotPreview }: IMessageProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ message, channel, MessageActionsMenu, CustomMessageItem, handleScrollToRepliedMessage, handleMediaItemClick, stopScrolling, isPendingMessage, prevMessage, nextMessage, setLastVisibleMessageId, queueReadMarker, queueDeliveredMarker, disableAutoReadTracking, isUnreadMessage, nextMessageStartsUnreadSection, 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, showInfoMessage, allowEditDeleteIncomingMessage, forwardMessage, reportMessage, reactionIcon, editIcon, copyIcon, replyIcon, replyInThreadIcon, forwardIcon, deleteIcon, selectIcon, starIcon, staredIcon, reportIcon, retractVoteIcon, endVoteIcon, reactionIconOrder, openFrequentlyUsedReactions, editIconOrder, copyIconOrder, replyIconOrder, replyInThreadIconOrder, forwardIconOrder, deleteIconOrder, selectIconOrder, starIconOrder, reportIconOrder, infoIconOrder, reactionIconTooltipText, editIconTooltipText, copyIconTooltipText, replyIconTooltipText, replyInThreadIconTooltipText, forwardIconTooltipText, deleteIconTooltipText, selectIconTooltipText, starIconTooltipText, reportIconTooltipText, infoIconTooltipText, 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, tabIsActiveRef, connectionStatus, messageTextFontSize, messageTextLineHeight, messageTimeColorOnAttachment, shouldOpenUserProfileForMention, ogMetadataProps, showInfoMessageProps, collapsedLinesLimit, createChatOnAvatarTap, ifLatestAndHasNotPreview, onPhoneNumberClick }: IMessageProps) => React.JSX.Element>;
 export default _default;

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

@@ -208,6 +208,7 @@ interface MessagesProps {
     collapsedLinesLimit?: number;
     createChatOnAvatarTap?: boolean;
     allowSendAttachment?: boolean;
+    onPhoneNumberClick?: (phoneNumber: string, dataPhone: string) => void;
 }
 declare const MessageList: React.FC<MessagesProps>;
 export default MessageList;

package/components/Messages/index.d.ts

@@ -206,6 +206,7 @@ interface MessagesProps {
     collapsedLinesLimit?: number;
     createChatOnAvatarTap?: boolean;
     allowSendAttachment?: boolean;
+    onPhoneNumberClick?: (phoneNumber: string, dataPhone: string) => void;
 }
 declare const MessagesContainer: React.FC<MessagesProps>;
 export default MessagesContainer;

package/index.js

@@ -12,6 +12,7 @@ var uuid = require('uuid');
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
 var LinkifyIt = _interopDefault(require('linkify-it'));
+var libphonenumberJs = require('libphonenumber-js');
 var Pica = _interopDefault(require('pica'));
 var reactDom = require('react-dom');
 var Cropper = _interopDefault(require('react-easy-crop'));
@@ -15147,7 +15148,7 @@ var UploadAvatarButton = styled__default.button(_templateObject23 || (_templateO
 var UploadAvatarHandler = styled__default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledText = styled__default.span(_templateObject25 || (_templateObject25 = _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) {
+var StyledText = styled__default.span(_templateObject25 || (_templateObject25 = _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  &.phone-number {\n    color: ", ";\n    cursor: pointer;\n  }\n  &:hover {\n    &.phone-number {\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
   return props.fontWeight || props.isLastMessage && '500';
 }, function (props) {
   return props.fontFamily;
@@ -15163,6 +15164,8 @@ var StyledText = styled__default.span(_templateObject25 || (_templateObject25 =
   return props.isLastMessage && '500';
 }, function (props) {
   return props.shouldOpenUserProfileForMention && 'pointer';
+}, function (props) {
+  return props.color;
 });
 var MessageOwner = styled__default.h3(_templateObject26 || (_templateObject26 = _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;
@@ -15443,6 +15446,103 @@ var linkifyTextPart = function linkifyTextPart(textPart, match, target, isInvite
   });
   return newMessageText || textPart;
 };
+var linkifyPhoneNumbers = function linkifyPhoneNumbers(parts, onPhoneNumberClick, accentColor, messageId) {
+  var defaultCountry = function () {
+    try {
+      var _getClient$user;
+      var userId = (_getClient$user = getClient().user) === null || _getClient$user === void 0 ? void 0 : _getClient$user.id;
+      if (userId) return libphonenumberJs.parsePhoneNumber('+' + userId).country;
+    } catch (_unused) {}
+    return undefined;
+  }();
+  var processString = function processString(str, keyPrefix) {
+    var libMatches = libphonenumberJs.findPhoneNumbersInText(str, defaultCountry);
+    var BARE_REGEX = /(?<![+\d])((?:\d[-\s.()]?){6,}\d)/g;
+    var allMatches = libMatches.map(function (m) {
+      return {
+        startsAt: m.startsAt,
+        endsAt: m.endsAt,
+        e164: m.number.number
+      };
+    });
+    var bareMatch;
+    BARE_REGEX.lastIndex = 0;
+    var _loop = function _loop() {
+      var start = bareMatch.index;
+      var end = start + bareMatch[0].length;
+      if (allMatches.some(function (m) {
+        return start >= m.startsAt && end <= m.endsAt;
+      })) return 1;
+      try {
+        var phone;
+        try {
+          phone = libphonenumberJs.parsePhoneNumber('+' + bareMatch[0].replace(/\D/g, ''));
+        } catch (_unused2) {
+          if (defaultCountry) {
+            phone = libphonenumberJs.parsePhoneNumber(bareMatch[0], defaultCountry);
+          }
+        }
+        if (phone && phone.isValid()) {
+          allMatches.push({
+            startsAt: start,
+            endsAt: end,
+            e164: phone.number
+          });
+        }
+      } catch (_unused3) {}
+    };
+    while ((bareMatch = BARE_REGEX.exec(str)) !== null) {
+      if (_loop()) continue;
+    }
+    if (allMatches.length === 0) return str;
+    allMatches.sort(function (a, b) {
+      return a.startsAt - b.startsAt;
+    });
+    var result = [];
+    var lastIndex = 0;
+    allMatches.forEach(function (match, i) {
+      var _match$e;
+      result.push(str.substring(lastIndex, match.startsAt));
+      var dataPhone = "" + (messageId ? messageId + "_" : '') + ((_match$e = match.e164) === null || _match$e === void 0 ? void 0 : _match$e.replace('+', '')) + "_" + i;
+      result.push(/*#__PURE__*/React__default.createElement(StyledText, {
+        className: 'phone-number',
+        key: keyPrefix + "-phone-" + i,
+        color: accentColor,
+        style: {
+          cursor: 'pointer'
+        },
+        "data-phone": dataPhone,
+        onClick: function onClick() {
+          onPhoneNumberClick(match.e164, dataPhone);
+        }
+      }, str.substring(match.startsAt, match.endsAt)));
+      lastIndex = match.endsAt;
+    });
+    result.push(str.substring(lastIndex));
+    return result;
+  };
+  if (typeof parts === 'string') {
+    return processString(parts, 'root');
+  }
+  if (Array.isArray(parts)) {
+    var changed = false;
+    var mapped = parts.map(function (part, index) {
+      if (typeof part === 'string') {
+        var processed = processString(part, String(index));
+        if (processed !== part) {
+          changed = true;
+          return processed;
+        }
+      }
+      return part;
+    });
+    if (!changed) return parts;
+    return mapped.flatMap(function (item) {
+      return Array.isArray(item) ? item : [item];
+    });
+  }
+  return parts;
+};
 var MessageTextFormat = function MessageTextFormat(_ref2) {
   var text = _ref2.text,
     message = _ref2.message,
@@ -15459,7 +15559,8 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     target = _ref2$target === void 0 ? '_blank' : _ref2$target,
     _ref2$isInviteLink = _ref2.isInviteLink,
     isInviteLink = _ref2$isInviteLink === void 0 ? false : _ref2$isInviteLink,
-    onInviteLinkClick = _ref2.onInviteLinkClick;
+    onInviteLinkClick = _ref2.onInviteLinkClick,
+    onPhoneNumberClick = _ref2.onPhoneNumberClick;
   try {
     var messageText = [];
     var linkify = new LinkifyIt();
@@ -15479,11 +15580,17 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
           if (!isLastMessage && !asSampleText && firstPartMatch) {
             firstPart = linkifyTextPart(firstPart, firstPartMatch, target, isInviteLink, onInviteLinkClick);
           }
+          if (!isLastMessage && !asSampleText && onPhoneNumberClick) {
+            firstPart = linkifyPhoneNumbers(firstPart, onPhoneNumberClick, '#438ced', message.id);
+          }
           var secondPart = "" + (textPart ? textPart === null || textPart === void 0 ? void 0 : textPart.substring(attributeOffset + attribute.length) : '');
           var secondPartMatch = secondPart ? linkify.match(secondPart) : '';
           if (!isLastMessage && !asSampleText && secondPartMatch) {
             secondPart = linkifyTextPart(secondPart, secondPartMatch, target, isInviteLink, onInviteLinkClick);
           }
+          if (!isLastMessage && !asSampleText && onPhoneNumberClick) {
+            secondPart = linkifyPhoneNumbers(secondPart, onPhoneNumberClick, '#438ced', message.id);
+          }
           if (attribute.type.includes('mention')) {
             var mentionDisplay = message.mentionedUsers && message.mentionedUsers.find(function (men) {
               return men.id === attribute.metadata;
@@ -15545,6 +15652,9 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
             if (!isLastMessage && !asSampleText && match) {
               newTextPart = linkifyTextPart(_textPart, match, target, isInviteLink, onInviteLinkClick);
             }
+            if (!isLastMessage && !asSampleText && onPhoneNumberClick) {
+              newTextPart = linkifyPhoneNumbers(newTextPart, onPhoneNumberClick, '#438ced', message.id);
+            }
             messageText.push(firstPart, asSampleText ? newTextPart : (/*#__PURE__*/React__default.createElement(StyledText, {
               isLastMessage: isLastMessage,
               className: attribute.type,
@@ -15561,6 +15671,9 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
       if (!isLastMessage && !asSampleText && match) {
         messageText = linkifyTextPart(text, match, target, isInviteLink, onInviteLinkClick);
       }
+      if (!isLastMessage && !asSampleText && onPhoneNumberClick) {
+        messageText = linkifyPhoneNumbers(messageText.length > 0 ? messageText : text, onPhoneNumberClick, '#438ced', message.id);
+      }
     }
     return messageText.length > 1 ? asSampleText ? messageText.join('') : messageText : text;
   } catch (e) {
@@ -40985,6 +41098,7 @@ var MessageBody = function MessageBody(_ref) {
     ogMetadataProps = _ref.ogMetadataProps,
     unsupportedMessage = _ref.unsupportedMessage,
     onInviteLinkClick = _ref.onInviteLinkClick,
+    onPhoneNumberClick = _ref.onPhoneNumberClick,
     collapsedLinesLimit = _ref.collapsedLinesLimit,
     ifLatestAndHasNotPreview = _ref.ifLatestAndHasNotPreview;
   var _useColor = useColors(),
@@ -41022,9 +41136,10 @@ var MessageBody = function MessageBody(_ref) {
       unsupportedMessage: unsupportedMessage,
       target: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.target,
       isInviteLink: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink) || false,
-      onInviteLinkClick: onInviteLinkClick
+      onInviteLinkClick: onInviteLinkClick,
+      onPhoneNumberClick: onPhoneNumberClick
     });
-  }, [message, contactsMap, getFromContacts, accentColor, textSecondary, shouldOpenUserProfileForMention, unsupportedMessage, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.target, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink, onInviteLinkClick]);
+  }, [message, contactsMap, getFromContacts, accentColor, textSecondary, shouldOpenUserProfileForMention, unsupportedMessage, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.target, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink, onInviteLinkClick, onPhoneNumberClick]);
   var viewOnce = React.useMemo(function () {
     return message.viewOnce;
   }, [message === null || message === void 0 ? void 0 : message.viewOnce]);
@@ -43119,7 +43234,8 @@ var Message$1 = function Message(_ref) {
     collapsedLinesLimit = _ref.collapsedLinesLimit,
     _ref$createChatOnAvat = _ref.createChatOnAvatarTap,
     createChatOnAvatarTap = _ref$createChatOnAvat === void 0 ? true : _ref$createChatOnAvat,
-    ifLatestAndHasNotPreview = _ref.ifLatestAndHasNotPreview;
+    ifLatestAndHasNotPreview = _ref.ifLatestAndHasNotPreview,
+    onPhoneNumberClick = _ref.onPhoneNumberClick;
   var isTabActive = (_tabIsActiveRef$curre = tabIsActiveRef === null || tabIsActiveRef === void 0 ? void 0 : tabIsActiveRef.current) != null ? _tabIsActiveRef$curre : tabIsActive;
   var getComparableUserId = function getComparableUserId(messageUser) {
     return messageUser !== null && messageUser !== void 0 && messageUser.id ? String(messageUser.id) : 'deleted';
@@ -43585,6 +43701,7 @@ var Message$1 = function Message(_ref) {
   })) : (/*#__PURE__*/React__default.createElement(MessageBody$1, {
     ifLatestAndHasNotPreview: ifLatestAndHasNotPreview,
     onInviteLinkClick: onInviteLinkClick,
+    onPhoneNumberClick: onPhoneNumberClick,
     handleRetractVote: handleRetractVote,
     handleEndVote: handleEndVote,
     message: message,
@@ -46263,7 +46380,8 @@ var MessageList = function MessageList(_ref) {
     _ref$createChatOnAvat = _ref.createChatOnAvatarTap,
     createChatOnAvatarTap = _ref$createChatOnAvat === void 0 ? true : _ref$createChatOnAvat,
     _ref$allowSendAttachm = _ref.allowSendAttachment,
-    allowSendAttachment = _ref$allowSendAttachm === void 0 ? true : _ref$allowSendAttachm;
+    allowSendAttachment = _ref$allowSendAttachm === void 0 ? true : _ref$allowSendAttachm,
+    onPhoneNumberClick = _ref.onPhoneNumberClick;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -46753,7 +46871,8 @@ var MessageList = function MessageList(_ref) {
       showInfoMessageProps: showInfoMessageProps,
       ogMetadataProps: ogMetadataProps,
       collapsedLinesLimit: collapsedLinesLimit,
-      createChatOnAvatarTap: createChatOnAvatarTap
+      createChatOnAvatarTap: createChatOnAvatarTap,
+      onPhoneNumberClick: onPhoneNumberClick
     }));
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, allowSendAttachment && isDragging && !(attachmentsPreview !== null && attachmentsPreview !== void 0 && attachmentsPreview.show && mediaFile) && (/*#__PURE__*/React__default.createElement(DragAndDropContainer, {
@@ -47131,7 +47250,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     _ref$createChatOnAvat = _ref.createChatOnAvatarTap,
     createChatOnAvatarTap = _ref$createChatOnAvat === void 0 ? true : _ref$createChatOnAvat,
     _ref$allowSendAttachm = _ref.allowSendAttachment,
-    allowSendAttachment = _ref$allowSendAttachm === void 0 ? true : _ref$allowSendAttachm;
+    allowSendAttachment = _ref$allowSendAttachm === void 0 ? true : _ref$allowSendAttachm,
+    onPhoneNumberClick = _ref.onPhoneNumberClick;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
     fontFamily: fontFamily,
     ownMessageOnRightSide: ownMessageOnRightSide,
@@ -47268,7 +47388,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     ogMetadataProps: ogMetadataProps,
     collapsedLinesLimit: collapsedLinesLimit,
     createChatOnAvatarTap: createChatOnAvatarTap,
-    allowSendAttachment: allowSendAttachment
+    allowSendAttachment: allowSendAttachment,
+    onPhoneNumberClick: onPhoneNumberClick
   }));
 };
 

package/index.modern.js

@@ -7,6 +7,7 @@ import { select, put, call, take, takeLatest, takeEvery, delay, spawn, race, all
 import { v4 } from 'uuid';
 import styled, { createGlobalStyle, keyframes } from 'styled-components';
 import LinkifyIt from 'linkify-it';
+import { parsePhoneNumber, findPhoneNumbersInText } from 'libphonenumber-js';
 import Pica from 'pica';
 import { createPortal } from 'react-dom';
 import Cropper from 'react-easy-crop';
@@ -15146,7 +15147,7 @@ var UploadAvatarButton = styled.button(_templateObject23 || (_templateObject23 =
 var UploadAvatarHandler = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledText = styled.span(_templateObject25 || (_templateObject25 = _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) {
+var StyledText = styled.span(_templateObject25 || (_templateObject25 = _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  &.phone-number {\n    color: ", ";\n    cursor: pointer;\n  }\n  &:hover {\n    &.phone-number {\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
   return props.fontWeight || props.isLastMessage && '500';
 }, function (props) {
   return props.fontFamily;
@@ -15162,6 +15163,8 @@ var StyledText = styled.span(_templateObject25 || (_templateObject25 = _taggedTe
   return props.isLastMessage && '500';
 }, function (props) {
   return props.shouldOpenUserProfileForMention && 'pointer';
+}, function (props) {
+  return props.color;
 });
 var MessageOwner = styled.h3(_templateObject26 || (_templateObject26 = _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;
@@ -15442,6 +15445,103 @@ var linkifyTextPart = function linkifyTextPart(textPart, match, target, isInvite
   });
   return newMessageText || textPart;
 };
+var linkifyPhoneNumbers = function linkifyPhoneNumbers(parts, onPhoneNumberClick, accentColor, messageId) {
+  var defaultCountry = function () {
+    try {
+      var _getClient$user;
+      var userId = (_getClient$user = getClient().user) === null || _getClient$user === void 0 ? void 0 : _getClient$user.id;
+      if (userId) return parsePhoneNumber('+' + userId).country;
+    } catch (_unused) {}
+    return undefined;
+  }();
+  var processString = function processString(str, keyPrefix) {
+    var libMatches = findPhoneNumbersInText(str, defaultCountry);
+    var BARE_REGEX = /(?<![+\d])((?:\d[-\s.()]?){6,}\d)/g;
+    var allMatches = libMatches.map(function (m) {
+      return {
+        startsAt: m.startsAt,
+        endsAt: m.endsAt,
+        e164: m.number.number
+      };
+    });
+    var bareMatch;
+    BARE_REGEX.lastIndex = 0;
+    var _loop = function _loop() {
+      var start = bareMatch.index;
+      var end = start + bareMatch[0].length;
+      if (allMatches.some(function (m) {
+        return start >= m.startsAt && end <= m.endsAt;
+      })) return 1;
+      try {
+        var phone;
+        try {
+          phone = parsePhoneNumber('+' + bareMatch[0].replace(/\D/g, ''));
+        } catch (_unused2) {
+          if (defaultCountry) {
+            phone = parsePhoneNumber(bareMatch[0], defaultCountry);
+          }
+        }
+        if (phone && phone.isValid()) {
+          allMatches.push({
+            startsAt: start,
+            endsAt: end,
+            e164: phone.number
+          });
+        }
+      } catch (_unused3) {}
+    };
+    while ((bareMatch = BARE_REGEX.exec(str)) !== null) {
+      if (_loop()) continue;
+    }
+    if (allMatches.length === 0) return str;
+    allMatches.sort(function (a, b) {
+      return a.startsAt - b.startsAt;
+    });
+    var result = [];
+    var lastIndex = 0;
+    allMatches.forEach(function (match, i) {
+      var _match$e;
+      result.push(str.substring(lastIndex, match.startsAt));
+      var dataPhone = "" + (messageId ? messageId + "_" : '') + ((_match$e = match.e164) === null || _match$e === void 0 ? void 0 : _match$e.replace('+', '')) + "_" + i;
+      result.push(/*#__PURE__*/React__default.createElement(StyledText, {
+        className: 'phone-number',
+        key: keyPrefix + "-phone-" + i,
+        color: accentColor,
+        style: {
+          cursor: 'pointer'
+        },
+        "data-phone": dataPhone,
+        onClick: function onClick() {
+          onPhoneNumberClick(match.e164, dataPhone);
+        }
+      }, str.substring(match.startsAt, match.endsAt)));
+      lastIndex = match.endsAt;
+    });
+    result.push(str.substring(lastIndex));
+    return result;
+  };
+  if (typeof parts === 'string') {
+    return processString(parts, 'root');
+  }
+  if (Array.isArray(parts)) {
+    var changed = false;
+    var mapped = parts.map(function (part, index) {
+      if (typeof part === 'string') {
+        var processed = processString(part, String(index));
+        if (processed !== part) {
+          changed = true;
+          return processed;
+        }
+      }
+      return part;
+    });
+    if (!changed) return parts;
+    return mapped.flatMap(function (item) {
+      return Array.isArray(item) ? item : [item];
+    });
+  }
+  return parts;
+};
 var MessageTextFormat = function MessageTextFormat(_ref2) {
   var text = _ref2.text,
     message = _ref2.message,
@@ -15458,7 +15558,8 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
     target = _ref2$target === void 0 ? '_blank' : _ref2$target,
     _ref2$isInviteLink = _ref2.isInviteLink,
     isInviteLink = _ref2$isInviteLink === void 0 ? false : _ref2$isInviteLink,
-    onInviteLinkClick = _ref2.onInviteLinkClick;
+    onInviteLinkClick = _ref2.onInviteLinkClick,
+    onPhoneNumberClick = _ref2.onPhoneNumberClick;
   try {
     var messageText = [];
     var linkify = new LinkifyIt();
@@ -15478,11 +15579,17 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
           if (!isLastMessage && !asSampleText && firstPartMatch) {
             firstPart = linkifyTextPart(firstPart, firstPartMatch, target, isInviteLink, onInviteLinkClick);
           }
+          if (!isLastMessage && !asSampleText && onPhoneNumberClick) {
+            firstPart = linkifyPhoneNumbers(firstPart, onPhoneNumberClick, '#438ced', message.id);
+          }
           var secondPart = "" + (textPart ? textPart === null || textPart === void 0 ? void 0 : textPart.substring(attributeOffset + attribute.length) : '');
           var secondPartMatch = secondPart ? linkify.match(secondPart) : '';
           if (!isLastMessage && !asSampleText && secondPartMatch) {
             secondPart = linkifyTextPart(secondPart, secondPartMatch, target, isInviteLink, onInviteLinkClick);
           }
+          if (!isLastMessage && !asSampleText && onPhoneNumberClick) {
+            secondPart = linkifyPhoneNumbers(secondPart, onPhoneNumberClick, '#438ced', message.id);
+          }
           if (attribute.type.includes('mention')) {
             var mentionDisplay = message.mentionedUsers && message.mentionedUsers.find(function (men) {
               return men.id === attribute.metadata;
@@ -15544,6 +15651,9 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
             if (!isLastMessage && !asSampleText && match) {
               newTextPart = linkifyTextPart(_textPart, match, target, isInviteLink, onInviteLinkClick);
             }
+            if (!isLastMessage && !asSampleText && onPhoneNumberClick) {
+              newTextPart = linkifyPhoneNumbers(newTextPart, onPhoneNumberClick, '#438ced', message.id);
+            }
             messageText.push(firstPart, asSampleText ? newTextPart : (/*#__PURE__*/React__default.createElement(StyledText, {
               isLastMessage: isLastMessage,
               className: attribute.type,
@@ -15560,6 +15670,9 @@ var MessageTextFormat = function MessageTextFormat(_ref2) {
       if (!isLastMessage && !asSampleText && match) {
         messageText = linkifyTextPart(text, match, target, isInviteLink, onInviteLinkClick);
       }
+      if (!isLastMessage && !asSampleText && onPhoneNumberClick) {
+        messageText = linkifyPhoneNumbers(messageText.length > 0 ? messageText : text, onPhoneNumberClick, '#438ced', message.id);
+      }
     }
     return messageText.length > 1 ? asSampleText ? messageText.join('') : messageText : text;
   } catch (e) {
@@ -40984,6 +41097,7 @@ var MessageBody = function MessageBody(_ref) {
     ogMetadataProps = _ref.ogMetadataProps,
     unsupportedMessage = _ref.unsupportedMessage,
     onInviteLinkClick = _ref.onInviteLinkClick,
+    onPhoneNumberClick = _ref.onPhoneNumberClick,
     collapsedLinesLimit = _ref.collapsedLinesLimit,
     ifLatestAndHasNotPreview = _ref.ifLatestAndHasNotPreview;
   var _useColor = useColors(),
@@ -41021,9 +41135,10 @@ var MessageBody = function MessageBody(_ref) {
       unsupportedMessage: unsupportedMessage,
       target: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.target,
       isInviteLink: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink) || false,
-      onInviteLinkClick: onInviteLinkClick
+      onInviteLinkClick: onInviteLinkClick,
+      onPhoneNumberClick: onPhoneNumberClick
     });
-  }, [message, contactsMap, getFromContacts, accentColor, textSecondary, shouldOpenUserProfileForMention, unsupportedMessage, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.target, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink, onInviteLinkClick]);
+  }, [message, contactsMap, getFromContacts, accentColor, textSecondary, shouldOpenUserProfileForMention, unsupportedMessage, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.target, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink, onInviteLinkClick, onPhoneNumberClick]);
   var viewOnce = useMemo(function () {
     return message.viewOnce;
   }, [message === null || message === void 0 ? void 0 : message.viewOnce]);
@@ -43118,7 +43233,8 @@ var Message$1 = function Message(_ref) {
     collapsedLinesLimit = _ref.collapsedLinesLimit,
     _ref$createChatOnAvat = _ref.createChatOnAvatarTap,
     createChatOnAvatarTap = _ref$createChatOnAvat === void 0 ? true : _ref$createChatOnAvat,
-    ifLatestAndHasNotPreview = _ref.ifLatestAndHasNotPreview;
+    ifLatestAndHasNotPreview = _ref.ifLatestAndHasNotPreview,
+    onPhoneNumberClick = _ref.onPhoneNumberClick;
   var isTabActive = (_tabIsActiveRef$curre = tabIsActiveRef === null || tabIsActiveRef === void 0 ? void 0 : tabIsActiveRef.current) != null ? _tabIsActiveRef$curre : tabIsActive;
   var getComparableUserId = function getComparableUserId(messageUser) {
     return messageUser !== null && messageUser !== void 0 && messageUser.id ? String(messageUser.id) : 'deleted';
@@ -43584,6 +43700,7 @@ var Message$1 = function Message(_ref) {
   })) : (/*#__PURE__*/React__default.createElement(MessageBody$1, {
     ifLatestAndHasNotPreview: ifLatestAndHasNotPreview,
     onInviteLinkClick: onInviteLinkClick,
+    onPhoneNumberClick: onPhoneNumberClick,
     handleRetractVote: handleRetractVote,
     handleEndVote: handleEndVote,
     message: message,
@@ -46262,7 +46379,8 @@ var MessageList = function MessageList(_ref) {
     _ref$createChatOnAvat = _ref.createChatOnAvatarTap,
     createChatOnAvatarTap = _ref$createChatOnAvat === void 0 ? true : _ref$createChatOnAvat,
     _ref$allowSendAttachm = _ref.allowSendAttachment,
-    allowSendAttachment = _ref$allowSendAttachm === void 0 ? true : _ref$allowSendAttachm;
+    allowSendAttachment = _ref$allowSendAttachm === void 0 ? true : _ref$allowSendAttachm,
+    onPhoneNumberClick = _ref.onPhoneNumberClick;
   var _useColor = useColors(),
     outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
     themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -46752,7 +46870,8 @@ var MessageList = function MessageList(_ref) {
       showInfoMessageProps: showInfoMessageProps,
       ogMetadataProps: ogMetadataProps,
       collapsedLinesLimit: collapsedLinesLimit,
-      createChatOnAvatarTap: createChatOnAvatarTap
+      createChatOnAvatarTap: createChatOnAvatarTap,
+      onPhoneNumberClick: onPhoneNumberClick
     }));
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, allowSendAttachment && isDragging && !(attachmentsPreview !== null && attachmentsPreview !== void 0 && attachmentsPreview.show && mediaFile) && (/*#__PURE__*/React__default.createElement(DragAndDropContainer, {
@@ -47130,7 +47249,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     _ref$createChatOnAvat = _ref.createChatOnAvatarTap,
     createChatOnAvatarTap = _ref$createChatOnAvat === void 0 ? true : _ref$createChatOnAvat,
     _ref$allowSendAttachm = _ref.allowSendAttachment,
-    allowSendAttachment = _ref$allowSendAttachm === void 0 ? true : _ref$allowSendAttachm;
+    allowSendAttachment = _ref$allowSendAttachm === void 0 ? true : _ref$allowSendAttachm,
+    onPhoneNumberClick = _ref.onPhoneNumberClick;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
     fontFamily: fontFamily,
     ownMessageOnRightSide: ownMessageOnRightSide,
@@ -47267,7 +47387,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
     ogMetadataProps: ogMetadataProps,
     collapsedLinesLimit: collapsedLinesLimit,
     createChatOnAvatarTap: createChatOnAvatarTap,
-    allowSendAttachment: allowSendAttachment
+    allowSendAttachment: allowSendAttachment,
+    onPhoneNumberClick: onPhoneNumberClick
   }));
 };
 

package/messageUtils/index.d.ts

@@ -8,7 +8,7 @@ declare const MessageStatusIcon: ({ messageStatus, messageStatusDisplayingType,
     readIconColor?: string | undefined;
     accentColor?: string | undefined;
 }) => React.JSX.Element;
-declare const MessageTextFormat: ({ text, message, contactsMap, getFromContacts, isLastMessage, asSampleText, accentColor, textSecondary, onMentionNameClick, shouldOpenUserProfileForMention, unsupportedMessage, target, isInviteLink, onInviteLinkClick }: {
+declare const MessageTextFormat: ({ text, message, contactsMap, getFromContacts, isLastMessage, asSampleText, accentColor, textSecondary, onMentionNameClick, shouldOpenUserProfileForMention, unsupportedMessage, target, isInviteLink, onInviteLinkClick, onPhoneNumberClick }: {
     text: string;
     message: any;
     contactsMap?: IContactsMap | undefined;
@@ -23,5 +23,6 @@ declare const MessageTextFormat: ({ text, message, contactsMap, getFromContacts,
     target?: string | undefined;
     isInviteLink?: boolean | undefined;
     onInviteLinkClick?: ((key: string) => void) | undefined;
+    onPhoneNumberClick?: ((phoneNumber: string, dataPhone: string) => void) | undefined;
 }) => any;
 export { MessageStatusIcon, MessageTextFormat };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.8.7-beta.4",
+  "version": "1.8.7-beta.5",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",
@@ -85,6 +85,7 @@
     "@lexical/offset": "^0.12.2",
     "@lexical/react": "^0.12.2",
     "lexical": "^0.12.2",
+    "libphonenumber-js": "^1.13.1",
     "linkify-it": "^4.0.1",
     "loglevel": "^1.9.2",
     "@ffmpeg/ffmpeg": "^0.12.10",