sceyt-chat-react-uikit 1.7.6-beta.5 → 1.7.6-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components/Message/OGMetadata/index.d.ts +2 -2
  2. package/index.js +165 -93
  3. package/index.modern.js +165 -93
  4. package/package.json +1 -1
package/components/Message/OGMetadata/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { IAttachment } from '../../../types';
2
+ import { IAttachment, IOGMetadata } from '../../../types';
3
3
  declare const OGMetadata: ({ attachments, state, incoming, ogShowUrl, ogShowTitle, ogShowDescription, ogShowFavicon, order, maxWidth, maxHeight, ogContainerBorderRadius, ogContainerPadding, ogContainerClassName, ogContainerShowBackground, ogContainerBackground, infoPadding, ogContainerMargin, target, isInviteLink, metadataGetSuccessCallback }: {
4
4
  attachments: IAttachment[];
5
5
  state: string;
@@ -25,6 +25,6 @@ declare const OGMetadata: ({ attachments, state, incoming, ogShowUrl, ogShowTitl
25
25
  ogContainerMargin?: string | undefined;
26
26
  target?: string | undefined;
27
27
  isInviteLink?: boolean | undefined;
28
- metadataGetSuccessCallback?: ((url: string, success: boolean, hasImage: boolean) => void) | undefined;
28
+ metadataGetSuccessCallback?: ((url: string, success: boolean, hasImage: boolean, metadata: IOGMetadata | null) => void) | undefined;
29
29
  }) => React.JSX.Element;
30
30
  export { OGMetadata };
package/index.js CHANGED
@@ -11220,7 +11220,16 @@ var messageSlice = createSlice({
11220
11220
  markersMap = _action$payload2.markersMap;
11221
11221
  var markerName = name;
11222
11222
  for (var index = 0; index < state.activeChannelMessages.length; index++) {
11223
- if (markersMap[state.activeChannelMessages[index].id] && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || markerName === MESSAGE_DELIVERY_STATUS.READ) && state.activeChannelMessages[index].state !== 'Deleted') {
11223
+ if (markerName === MESSAGE_DELIVERY_STATUS.DELIVERED && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
11224
+ continue;
11225
+ }
11226
+ if (markerName === MESSAGE_DELIVERY_STATUS.READ && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
11227
+ continue;
11228
+ }
11229
+ if (markerName === MESSAGE_DELIVERY_STATUS.PLAYED && state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED) {
11230
+ continue;
11231
+ }
11232
+ if (markersMap[state.activeChannelMessages[index].id] && state.activeChannelMessages[index].state !== 'Deleted') {
11224
11233
  state.activeChannelMessages[index].deliveryStatus = markerName;
11225
11234
  }
11226
11235
  }
@@ -34762,7 +34771,8 @@ var OGMetadata = function OGMetadata(_ref) {
34762
34771
  var _useColor = useColors(),
34763
34772
  incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
34764
34773
  outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X],
34765
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
34774
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
34775
+ textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
34766
34776
  var attachment = React.useMemo(function () {
34767
34777
  return attachments.find(function (attachment) {
34768
34778
  return attachment.type === attachmentTypes.link;
@@ -34888,7 +34898,7 @@ var OGMetadata = function OGMetadata(_ref) {
34888
34898
  }
34889
34899
  }, []);
34890
34900
  React.useEffect(function () {
34891
- if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
34901
+ if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !(oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url])) {
34892
34902
  setShouldAnimate(true);
34893
34903
  var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
34894
34904
  if (url) {
@@ -34896,6 +34906,7 @@ var OGMetadata = function OGMetadata(_ref) {
34896
34906
  try {
34897
34907
  if (cachedMetadata) {
34898
34908
  handleMetadata(cachedMetadata);
34909
+ setMetadataLoaded(true);
34899
34910
  }
34900
34911
  ogMetadataQueryBuilder(url);
34901
34912
  return Promise.resolve();
@@ -34908,7 +34919,7 @@ var OGMetadata = function OGMetadata(_ref) {
34908
34919
  });
34909
34920
  }
34910
34921
  }
34911
- }, [attachment, metadata]);
34922
+ }, [attachment, oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]]);
34912
34923
  var ogUrl = React.useMemo(function () {
34913
34924
  var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
34914
34925
  var urlObj = validateUrl(url);
@@ -34943,18 +34954,23 @@ var OGMetadata = function OGMetadata(_ref) {
34943
34954
  link: 4
34944
34955
  };
34945
34956
  }, [order]);
34957
+ var MIN_IMAGE_HEIGHT = 180;
34958
+ var MAX_IMAGE_HEIGHT = 400;
34959
+ var showImage = React.useMemo(function () {
34960
+ return hasImage && calculatedImageHeight >= MIN_IMAGE_HEIGHT && calculatedImageHeight <= MAX_IMAGE_HEIGHT;
34961
+ }, [hasImage, calculatedImageHeight]);
34946
34962
  React.useEffect(function () {
34947
34963
  if (metadataLoaded || oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]) {
34948
- if (metadata && metadataGetSuccessCallback && (hasImage || faviconUrl)) {
34949
- metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, hasImage);
34964
+ if (oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] && metadataGetSuccessCallback && metadata) {
34965
+ metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, showImage, metadata);
34950
34966
  } else {
34951
- metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false);
34967
+ metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false, metadata);
34952
34968
  }
34953
34969
  }
34954
- }, [metadata, metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, hasImage]);
34970
+ }, [metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
34955
34971
  var elements = React.useMemo(function () {
34956
- var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _resolvedOrder$link;
34957
- return [hasImage ? {
34972
+ var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _metadata$og13$title, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _metadata$og15$descri, _resolvedOrder$link;
34973
+ return [showImage ? {
34958
34974
  key: 'image',
34959
34975
  order: (_resolvedOrder$image = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.image) != null ? _resolvedOrder$image : 1,
34960
34976
  render: (/*#__PURE__*/React__default.createElement(ImageContainer, {
@@ -34975,8 +34991,9 @@ var OGMetadata = function OGMetadata(_ref) {
34975
34991
  render: ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.title) && (/*#__PURE__*/React__default.createElement(Title$3, {
34976
34992
  maxWidth: maxWidth,
34977
34993
  shouldAnimate: shouldAnimate,
34978
- padding: infoPadding
34979
- }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : _metadata$og13.title)))
34994
+ padding: infoPadding,
34995
+ color: textPrimary
34996
+ }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : (_metadata$og13$title = _metadata$og13.title) === null || _metadata$og13$title === void 0 ? void 0 : _metadata$og13$title.trim())))
34980
34997
  }, {
34981
34998
  key: 'description',
34982
34999
  order: (_resolvedOrder$descri = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.description) != null ? _resolvedOrder$descri : 3,
@@ -34985,7 +35002,7 @@ var OGMetadata = function OGMetadata(_ref) {
34985
35002
  shouldAnimate: shouldAnimate,
34986
35003
  color: textSecondary,
34987
35004
  padding: infoPadding
34988
- }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : _metadata$og15.description))
35005
+ }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : (_metadata$og15$descri = _metadata$og15.description) === null || _metadata$og15$descri === void 0 ? void 0 : _metadata$og15$descri.trim()))
34989
35006
  }, {
34990
35007
  key: 'link',
34991
35008
  order: (_resolvedOrder$link = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.link) != null ? _resolvedOrder$link : 4,
@@ -35043,7 +35060,8 @@ var OGMetadata = function OGMetadata(_ref) {
35043
35060
  borderRadius: ogContainerBorderRadius,
35044
35061
  padding: ogContainerPadding,
35045
35062
  className: ogContainerClassName,
35046
- containerMargin: ogContainerMargin
35063
+ containerMargin: ogContainerMargin,
35064
+ maxWidth: maxWidth
35047
35065
  }, isInviteLink ? {
35048
35066
  as: 'div',
35049
35067
  onClick: function onClick() {
@@ -35057,84 +35075,90 @@ var OGMetadata = function OGMetadata(_ref) {
35057
35075
  }), content);
35058
35076
  };
35059
35077
  var sharedKeyframes = "\n @keyframes fadeInSlideUp {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes expandHeight {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 1000px;\n opacity: 1;\n }\n }\n";
35060
- var OGMetadataContainer = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n min-width: inherit;\n max-width: inherit;\n width: 100%;\n display: grid;\n grid-template-columns: 1fr;\n background-color: ", ";\n border-radius: ", ";\n margin: ", ";\n // margin-bottom: ", ";\n padding: ", ";\n text-decoration: none;\n color: inherit;\n &:hover {\n opacity: 0.9;\n cursor: pointer;\n }\n"])), function (_ref2) {
35061
- var showBackground = _ref2.showBackground,
35062
- customBg = _ref2.customBg,
35063
- bgColor = _ref2.bgColor;
35064
- return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
35078
+ var OGMetadataContainer = styled__default.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n min-width: inherit;\n max-width: ", ";\n width: 100%;\n display: grid;\n grid-template-columns: 1fr;\n border-radius: 8px;\n background-color: ", ";\n border-radius: ", ";\n margin: ", ";\n // margin-bottom: ", ";\n padding: ", ";\n text-decoration: none;\n // color: inherit;\n &:hover {\n opacity: 0.9;\n cursor: pointer;\n }\n"])), function (_ref2) {
35079
+ var maxWidth = _ref2.maxWidth;
35080
+ return maxWidth ? maxWidth + "px" : 'inherit';
35065
35081
  }, function (_ref3) {
35066
- var borderRadius = _ref3.borderRadius;
35067
- return borderRadius !== undefined ? borderRadius : '8px';
35082
+ var showBackground = _ref3.showBackground,
35083
+ customBg = _ref3.customBg,
35084
+ bgColor = _ref3.bgColor;
35085
+ return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
35068
35086
  }, function (_ref4) {
35069
- var containerMargin = _ref4.containerMargin;
35070
- return containerMargin != null ? containerMargin : '0.8rem auto 0';
35087
+ var borderRadius = _ref4.borderRadius;
35088
+ return borderRadius !== undefined ? borderRadius : '8px';
35071
35089
  }, function (_ref5) {
35072
- var showOGMetadata = _ref5.showOGMetadata;
35073
- return showOGMetadata ? '0.4rem' : '0';
35090
+ var containerMargin = _ref5.containerMargin;
35091
+ return containerMargin != null ? containerMargin : '0.8rem auto 0';
35074
35092
  }, function (_ref6) {
35075
- var padding = _ref6.padding;
35093
+ var showOGMetadata = _ref6.showOGMetadata;
35094
+ return showOGMetadata ? '0.4rem' : '0';
35095
+ }, function (_ref7) {
35096
+ var padding = _ref7.padding;
35076
35097
  return padding != null ? padding : '0';
35077
35098
  });
35078
- var ImageContainer = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: ", ";\n opacity: ", ";\n margin: 0 auto;\n overflow: hidden;\n ", "\n"])), sharedKeyframes, function (_ref7) {
35079
- var containerHeight = _ref7.containerHeight;
35099
+ var ImageContainer = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: ", ";\n opacity: ", ";\n margin: 0 auto;\n border-radius: 8px 8px 0 0;\n overflow: hidden;\n ", "\n"])), sharedKeyframes, function (_ref8) {
35100
+ var containerHeight = _ref8.containerHeight;
35080
35101
  return containerHeight ? containerHeight + "px" : '0px';
35081
- }, function (_ref8) {
35082
- var showOGMetadata = _ref8.showOGMetadata,
35083
- containerHeight = _ref8.containerHeight;
35084
- return showOGMetadata && containerHeight ? 1 : 0;
35085
35102
  }, function (_ref9) {
35086
- var shouldAnimate = _ref9.shouldAnimate,
35087
- showOGMetadata = _ref9.showOGMetadata,
35103
+ var showOGMetadata = _ref9.showOGMetadata,
35088
35104
  containerHeight = _ref9.containerHeight;
35105
+ return showOGMetadata && containerHeight ? 1 : 0;
35106
+ }, function (_ref0) {
35107
+ var shouldAnimate = _ref0.shouldAnimate,
35108
+ showOGMetadata = _ref0.showOGMetadata,
35109
+ containerHeight = _ref0.containerHeight;
35089
35110
  return shouldAnimate && showOGMetadata && containerHeight && "\n animation: expandHeight 0.3s ease-out forwards;\n ";
35090
35111
  });
35091
- var OGText = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n flex-direction: column;\n gap: 0;\n ", "\n ", ";\n"])), sharedKeyframes, function (_ref0) {
35092
- var shouldAnimate = _ref0.shouldAnimate;
35112
+ var OGText = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n flex-direction: column;\n gap: 0;\n ", "\n ", ";\n"])), sharedKeyframes, function (_ref1) {
35113
+ var shouldAnimate = _ref1.shouldAnimate;
35093
35114
  return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out forwards;\n ";
35094
- }, function (_ref1) {
35095
- var margin = _ref1.margin;
35115
+ }, function (_ref10) {
35116
+ var margin = _ref10.margin;
35096
35117
  return margin ? '12px' : '0';
35097
35118
  });
35098
- var Title$3 = styled__default.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: bold;\n font-size: 13px;\n line-height: 16px;\n margin: 8px 0 0 0;\n padding: ", ";\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref10) {
35099
- var padding = _ref10.padding;
35119
+ var Title$3 = styled__default.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n ", "\n // font-family: Inter;\n font-weight: 500;\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0px;\n color: ", ";\n margin: 4px 0 0 0;\n padding: ", ";\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref11) {
35120
+ var color = _ref11.color;
35121
+ return color;
35122
+ }, function (_ref12) {
35123
+ var padding = _ref12.padding;
35100
35124
  return padding != null ? padding : '0';
35101
- }, function (_ref11) {
35102
- var maxWidth = _ref11.maxWidth;
35125
+ }, function (_ref13) {
35126
+ var maxWidth = _ref13.maxWidth;
35103
35127
  return maxWidth && "\n max-width: " + maxWidth + "px;\n ";
35104
- }, function (_ref12) {
35105
- var shouldAnimate = _ref12.shouldAnimate;
35128
+ }, function (_ref14) {
35129
+ var shouldAnimate = _ref14.shouldAnimate;
35106
35130
  return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out 0.1s backwards;\n ";
35107
35131
  });
35108
- var Desc = styled__default.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: normal;\n font-size: 13px;\n line-height: 16px;\n margin: 0 0 8px 0;\n padding: ", ";\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref13) {
35109
- var padding = _ref13.padding;
35132
+ var Desc = styled__default.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: normal;\n font-size: 13px;\n line-height: 16px;\n margin: 4px 0 4px 0;\n padding: ", ";\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref15) {
35133
+ var padding = _ref15.padding;
35110
35134
  return padding != null ? padding : '0';
35111
- }, function (_ref14) {
35112
- var color = _ref14.color;
35135
+ }, function (_ref16) {
35136
+ var color = _ref16.color;
35113
35137
  return color;
35114
- }, function (_ref15) {
35115
- var maxWidth = _ref15.maxWidth;
35138
+ }, function (_ref17) {
35139
+ var maxWidth = _ref17.maxWidth;
35116
35140
  return maxWidth && "\n max-width: " + maxWidth + "px;\n ";
35117
- }, function (_ref16) {
35118
- var shouldAnimate = _ref16.shouldAnimate;
35141
+ }, function (_ref18) {
35142
+ var shouldAnimate = _ref18.shouldAnimate;
35119
35143
  return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out 0.2s backwards;\n ";
35120
35144
  });
35121
- var Url = styled__default.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: normal;\n font-size: 13px;\n line-height: 16px;\n margin: 0 0 12px 0;\n padding: ", ";\n color: gray;\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref17) {
35122
- var padding = _ref17.padding;
35145
+ var Url = styled__default.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: normal;\n font-size: 13px;\n line-height: 16px;\n margin: 0 0 12px 0;\n padding: ", ";\n color: gray;\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref19) {
35146
+ var padding = _ref19.padding;
35123
35147
  return padding != null ? padding : '0';
35124
- }, function (_ref18) {
35125
- var maxWidth = _ref18.maxWidth;
35148
+ }, function (_ref20) {
35149
+ var maxWidth = _ref20.maxWidth;
35126
35150
  return maxWidth && "\n max-width: " + maxWidth + "px;\n ";
35127
- }, function (_ref19) {
35128
- var shouldAnimate = _ref19.shouldAnimate;
35151
+ }, function (_ref21) {
35152
+ var shouldAnimate = _ref21.shouldAnimate;
35129
35153
  return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out 0.3s backwards;\n ";
35130
35154
  });
35131
- var Img = styled__default.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n border-radius: inherit;\n ", "\n"])), sharedKeyframes, function (_ref20) {
35132
- var shouldAnimate = _ref20.shouldAnimate;
35155
+ var Img = styled__default.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n // object-fit: cover;\n // object-position: center;\n // image-rendering: auto;\n border-radius: inherit;\n ", "\n"])), sharedKeyframes, function (_ref22) {
35156
+ var shouldAnimate = _ref22.shouldAnimate;
35133
35157
  return shouldAnimate && "\n animation: fadeIn 0.4s ease-out forwards;\n ";
35134
35158
  });
35135
- var OGRow = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n"])));
35159
+ var OGRow = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 0;\n"])));
35136
35160
  var OGTextWrapper = styled__default.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n flex: 1 1 auto;\n"])));
35137
- var FaviconContainer = styled__default.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n width: 52px;\n height: 52px;\n border-radius: 8px;\n overflow: hidden;\n margin: 12px;\n flex: 0 0 52px;\n"])));
35161
+ var FaviconContainer = styled__default.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n width: 52px;\n height: 52px;\n border-radius: 8px;\n overflow: hidden;\n margin: 8px;\n flex: 0 0 52px;\n"])));
35138
35162
  var FaviconImg = styled__default.img(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n"])));
35139
35163
 
35140
35164
  var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m;
@@ -35363,6 +35387,41 @@ var MessageBody = function MessageBody(_ref) {
35363
35387
  var selectionIsActive = React.useMemo(function () {
35364
35388
  return selectedMessagesMap && selectedMessagesMap.size > 0;
35365
35389
  }, [selectedMessagesMap]);
35390
+ var hasLongLinkAttachmentUrl = React.useMemo(function () {
35391
+ if (!linkAttachment || !linkAttachment.url) return false;
35392
+ return linkAttachment.url.length > 100;
35393
+ }, [linkAttachment]);
35394
+ var oGMetadata = useSelector(function (state) {
35395
+ return state.MessageReducer.oGMetadata;
35396
+ });
35397
+ var linkMetadata = React.useMemo(function () {
35398
+ if (!(linkAttachment !== null && linkAttachment !== void 0 && linkAttachment.url)) return null;
35399
+ return (oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[linkAttachment.url]) || null;
35400
+ }, [oGMetadata, linkAttachment === null || linkAttachment === void 0 ? void 0 : linkAttachment.url]);
35401
+ var ogMetadataContainerWidth = React.useMemo(function () {
35402
+ var _linkMetadata$og, _linkMetadata$og$imag, _linkMetadata$og$imag2, _linkMetadata$og2, _linkMetadata$og3, _linkMetadata$og3$fav;
35403
+ if (!linkMetadata || !linkAttachment) return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
35404
+ if (hasLongLinkAttachmentUrl) {
35405
+ return 400;
35406
+ }
35407
+ var hasImage = (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og = linkMetadata.og) === null || _linkMetadata$og === void 0 ? void 0 : (_linkMetadata$og$imag = _linkMetadata$og.image) === null || _linkMetadata$og$imag === void 0 ? void 0 : (_linkMetadata$og$imag2 = _linkMetadata$og$imag[0]) === null || _linkMetadata$og$imag2 === void 0 ? void 0 : _linkMetadata$og$imag2.url) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight);
35408
+ var imageWidth = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth;
35409
+ var imageHeight = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight;
35410
+ var calculatedImageHeight = imageWidth && imageHeight ? imageHeight / (imageWidth / ((ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400)) : 0;
35411
+ var showImage = hasImage && calculatedImageHeight >= 180 && calculatedImageHeight <= 400;
35412
+ var hasDescription = linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og2 = linkMetadata.og) === null || _linkMetadata$og2 === void 0 ? void 0 : _linkMetadata$og2.description;
35413
+ var hasFavicon = (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.faviconLoaded) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og3 = linkMetadata.og) === null || _linkMetadata$og3 === void 0 ? void 0 : (_linkMetadata$og3$fav = _linkMetadata$og3.favicon) === null || _linkMetadata$og3$fav === void 0 ? void 0 : _linkMetadata$og3$fav.url);
35414
+ if (showImage) {
35415
+ return 400;
35416
+ }
35417
+ if (hasDescription && hasFavicon) {
35418
+ return 336;
35419
+ }
35420
+ if (hasDescription) {
35421
+ return 356;
35422
+ }
35423
+ return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
35424
+ }, [linkMetadata, linkAttachment, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon, hasLongLinkAttachmentUrl]);
35366
35425
  var handleRemoveFailedAttachment = function handleRemoveFailedAttachment(attachmentId) {
35367
35426
  log.info('remove attachment .. ', attachmentId);
35368
35427
  };
@@ -35380,7 +35439,10 @@ var MessageBody = function MessageBody(_ref) {
35380
35439
  },
35381
35440
  borderRadius: borderRadius,
35382
35441
  withAttachments: notLinkAttachment,
35383
- attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 420 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
35442
+ hasLinkAttachment: !!linkAttachment,
35443
+ hasLongLinkAttachmentUrl: hasLongLinkAttachmentUrl,
35444
+ attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 400 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
35445
+ ogMetadataMaxWidth: ogMetadataContainerWidth,
35384
35446
  noBody: !message.body && !withAttachments,
35385
35447
  onMouseEnter: handleMouseEnter,
35386
35448
  onMouseLeave: handleMouseLeave
@@ -35536,7 +35598,7 @@ var MessageBody = function MessageBody(_ref) {
35536
35598
  unsupportedMessage: unsupportedMessage,
35537
35599
  unsupportedMessageColor: textSecondary
35538
35600
  }, ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
35539
- maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
35601
+ maxWidth: ogMetadataContainerWidth,
35540
35602
  maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
35541
35603
  attachments: [linkAttachment],
35542
35604
  state: message.state,
@@ -35575,7 +35637,7 @@ var MessageBody = function MessageBody(_ref) {
35575
35637
  }))), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
35576
35638
  color: textSecondary
35577
35639
  }, " Message was deleted. ")) : '', !ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
35578
- maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
35640
+ maxWidth: ogMetadataContainerWidth,
35579
35641
  maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
35580
35642
  attachments: [linkAttachment],
35581
35643
  state: message.state,
@@ -35597,7 +35659,7 @@ var MessageBody = function MessageBody(_ref) {
35597
35659
  ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
35598
35660
  infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding,
35599
35661
  isInviteLink: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink
35600
- })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
35662
+ })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && !!linkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
35601
35663
  message: message,
35602
35664
  showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
35603
35665
  messageStatusDisplayingType: messageStatusDisplayingType,
@@ -35613,25 +35675,31 @@ var MessageBody = function MessageBody(_ref) {
35613
35675
  messageStatusVisible: !!messageStatusVisible,
35614
35676
  leftMargin: true,
35615
35677
  messageTimeColorOnAttachment: messageTimeColorOnAttachment || textSecondary
35616
- })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
35617
- message: message,
35618
- showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
35619
- messageStatusDisplayingType: messageStatusDisplayingType,
35620
- messageStatusSize: messageStatusSize,
35621
- messageStatusColor: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : messageStateColor || textSecondary,
35622
- messageReadStatusColor: messageReadStatusColor,
35623
- messageStateFontSize: messageStateFontSize,
35624
- messageStateColor: messageStateColor,
35625
- messageTimeFontSize: messageTimeFontSize,
35626
- messageTimeColor: messageTimeColor,
35627
- messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
35628
- messageTimeVisible: !!messageTimeVisible,
35629
- messageStatusVisible: !!messageStatusVisible,
35630
- withAttachment: withAttachments,
35631
- leftMargin: true,
35632
- fileAttachment: withAttachments && (message.attachments[0].type === 'file' || message.attachments[0].type === 'voice'),
35633
- messageTimeColorOnAttachment: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : textSecondary
35634
- })), withAttachments && message.attachments.map(function (attachment) {
35678
+ })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && function () {
35679
+ var nonLinkAttachment = message.attachments.find(function (a) {
35680
+ return a.type !== attachmentTypes.link;
35681
+ });
35682
+ var attachmentType = nonLinkAttachment === null || nonLinkAttachment === void 0 ? void 0 : nonLinkAttachment.type;
35683
+ return /*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
35684
+ message: message,
35685
+ showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
35686
+ messageStatusDisplayingType: messageStatusDisplayingType,
35687
+ messageStatusSize: messageStatusSize,
35688
+ messageStatusColor: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : messageStateColor || textSecondary,
35689
+ messageReadStatusColor: messageReadStatusColor,
35690
+ messageStateFontSize: messageStateFontSize,
35691
+ messageStateColor: messageStateColor,
35692
+ messageTimeFontSize: messageTimeFontSize,
35693
+ messageTimeColor: messageTimeColor,
35694
+ messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
35695
+ messageTimeVisible: !!messageTimeVisible,
35696
+ messageStatusVisible: !!messageStatusVisible,
35697
+ withAttachment: withAttachments,
35698
+ leftMargin: true,
35699
+ fileAttachment: withAttachments && (attachmentType === 'file' || attachmentType === 'voice'),
35700
+ messageTimeColorOnAttachment: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : textSecondary
35701
+ });
35702
+ }(), withAttachments && message.attachments.map(function (attachment) {
35635
35703
  return /*#__PURE__*/React__default.createElement(Attachment$1, {
35636
35704
  key: attachment.tid || attachment.url,
35637
35705
  handleMediaItemClick: selectionIsActive ? undefined : handleMediaItemClick,
@@ -35704,7 +35772,7 @@ var MessageStatusDeleted$1 = styled__default.span(_templateObject2$B || (_templa
35704
35772
  }, function (props) {
35705
35773
  return props.fontSize;
35706
35774
  });
35707
- var MessageBodyContainer = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n position: relative;\n background-color: ", ";\n //display: inline-block;\n border-radius: ", ";\n direction: ", ";\n max-width: ", ";\n width: max-content;\n padding: ", ";\n //direction: ", ";\n //overflow: ", ";\n transition: all 0.3s;\n transform-origin: right;\n"])), function (props) {
35775
+ var MessageBodyContainer = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n position: relative;\n background-color: ", ";\n //display: inline-block;\n border-radius: ", ";\n direction: ", ";\n max-width: ", ";\n width: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n\n ", "\n padding: ", ";\n //direction: ", ";\n //overflow: ", ";\n transition: all 0.3s;\n transform-origin: right;\n"])), function (props) {
35708
35776
  var _props$outgoingMessag, _props$incomingMessag;
35709
35777
  return props.isSelfMessage ? (_props$outgoingMessag = props.outgoingMessageStyles) === null || _props$outgoingMessag === void 0 ? void 0 : _props$outgoingMessag.background : (_props$incomingMessag = props.incomingMessageStyles) === null || _props$incomingMessag === void 0 ? void 0 : _props$incomingMessag.background;
35710
35778
  }, function (props) {
@@ -35712,10 +35780,14 @@ var MessageBodyContainer = styled__default.div(_templateObject3$v || (_templateO
35712
35780
  }, function (props) {
35713
35781
  return props.rtlDirection ? 'initial' : '';
35714
35782
  }, function (props) {
35715
- return props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 420 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '420px' : '100%';
35783
+ return props.hasLinkAttachment && !props.withAttachments ? props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px' : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '400px' : props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 400 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '400px' : '100%';
35784
+ }, function (props) {
35785
+ return props.hasLinkAttachment && !props.withAttachments && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '416px' : 'max-content';
35786
+ }, function (props) {
35787
+ return props.hasLongLinkAttachmentUrl && "\n & a {\n overflow-wrap: anywhere;\n word-break: break-all;\n white-space: normal;\n max-width: " + (props.withAttachments ? '400px' : props.hasLinkAttachment && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px') + ";\n }\n ";
35716
35788
  }, function (props) {
35717
35789
  var _props$outgoingMessag2, _props$incomingMessag2;
35718
- return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
35790
+ return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.hasLinkAttachment ? '8px' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
35719
35791
  }, function (props) {
35720
35792
  return props.isSelfMessage ? 'initial' : '';
35721
35793
  }, function (props) {
@@ -36535,11 +36607,6 @@ var Message$1 = function Message(_ref) {
36535
36607
  setFrequentlyEmojisOpen(false);
36536
36608
  };
36537
36609
  var handleSendReadMarker = function handleSendReadMarker() {
36538
- if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
36539
- return marker.name === MESSAGE_DELIVERY_STATUS.READ;
36540
- })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
36541
- dispatch(markMessagesAsReadAC(channel.id, [message.id]));
36542
- }
36543
36610
  if (!message.userMarkers.find(function (marker) {
36544
36611
  return marker.name === MESSAGE_DELIVERY_STATUS.DELIVERED;
36545
36612
  })) {
@@ -36549,6 +36616,11 @@ var Message$1 = function Message(_ref) {
36549
36616
  dispatch(markMessagesAsDeliveredAC(channel.id, [message.id]));
36550
36617
  }
36551
36618
  }
36619
+ if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
36620
+ return marker.name === MESSAGE_DELIVERY_STATUS.READ;
36621
+ })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
36622
+ dispatch(markMessagesAsReadAC(channel.id, [message.id]));
36623
+ }
36552
36624
  };
36553
36625
  var handleForwardMessage = function handleForwardMessage(channelIds) {
36554
36626
  if (channelIds && channelIds.length) {
package/index.modern.js CHANGED
@@ -11219,7 +11219,16 @@ var messageSlice = createSlice({
11219
11219
  markersMap = _action$payload2.markersMap;
11220
11220
  var markerName = name;
11221
11221
  for (var index = 0; index < state.activeChannelMessages.length; index++) {
11222
- if (markersMap[state.activeChannelMessages[index].id] && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.SENT || markerName === MESSAGE_DELIVERY_STATUS.READ) && state.activeChannelMessages[index].state !== 'Deleted') {
11222
+ if (markerName === MESSAGE_DELIVERY_STATUS.DELIVERED && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.DELIVERED || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
11223
+ continue;
11224
+ }
11225
+ if (markerName === MESSAGE_DELIVERY_STATUS.READ && (state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.READ || state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED)) {
11226
+ continue;
11227
+ }
11228
+ if (markerName === MESSAGE_DELIVERY_STATUS.PLAYED && state.activeChannelMessages[index].deliveryStatus === MESSAGE_DELIVERY_STATUS.PLAYED) {
11229
+ continue;
11230
+ }
11231
+ if (markersMap[state.activeChannelMessages[index].id] && state.activeChannelMessages[index].state !== 'Deleted') {
11223
11232
  state.activeChannelMessages[index].deliveryStatus = markerName;
11224
11233
  }
11225
11234
  }
@@ -34761,7 +34770,8 @@ var OGMetadata = function OGMetadata(_ref) {
34761
34770
  var _useColor = useColors(),
34762
34771
  incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
34763
34772
  outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X],
34764
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
34773
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
34774
+ textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY];
34765
34775
  var attachment = useMemo(function () {
34766
34776
  return attachments.find(function (attachment) {
34767
34777
  return attachment.type === attachmentTypes.link;
@@ -34887,7 +34897,7 @@ var OGMetadata = function OGMetadata(_ref) {
34887
34897
  }
34888
34898
  }, []);
34889
34899
  useEffect(function () {
34890
- if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
34900
+ if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !(oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url])) {
34891
34901
  setShouldAnimate(true);
34892
34902
  var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
34893
34903
  if (url) {
@@ -34895,6 +34905,7 @@ var OGMetadata = function OGMetadata(_ref) {
34895
34905
  try {
34896
34906
  if (cachedMetadata) {
34897
34907
  handleMetadata(cachedMetadata);
34908
+ setMetadataLoaded(true);
34898
34909
  }
34899
34910
  ogMetadataQueryBuilder(url);
34900
34911
  return Promise.resolve();
@@ -34907,7 +34918,7 @@ var OGMetadata = function OGMetadata(_ref) {
34907
34918
  });
34908
34919
  }
34909
34920
  }
34910
- }, [attachment, metadata]);
34921
+ }, [attachment, oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]]);
34911
34922
  var ogUrl = useMemo(function () {
34912
34923
  var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
34913
34924
  var urlObj = validateUrl(url);
@@ -34942,18 +34953,23 @@ var OGMetadata = function OGMetadata(_ref) {
34942
34953
  link: 4
34943
34954
  };
34944
34955
  }, [order]);
34956
+ var MIN_IMAGE_HEIGHT = 180;
34957
+ var MAX_IMAGE_HEIGHT = 400;
34958
+ var showImage = useMemo(function () {
34959
+ return hasImage && calculatedImageHeight >= MIN_IMAGE_HEIGHT && calculatedImageHeight <= MAX_IMAGE_HEIGHT;
34960
+ }, [hasImage, calculatedImageHeight]);
34945
34961
  useEffect(function () {
34946
34962
  if (metadataLoaded || oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url]) {
34947
- if (metadata && metadataGetSuccessCallback && (hasImage || faviconUrl)) {
34948
- metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, hasImage);
34963
+ if (oGMetadata !== null && oGMetadata !== void 0 && oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] && metadataGetSuccessCallback && metadata) {
34964
+ metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, true, showImage, metadata);
34949
34965
  } else {
34950
- metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false);
34966
+ metadataGetSuccessCallback === null || metadataGetSuccessCallback === void 0 ? void 0 : metadataGetSuccessCallback(attachment === null || attachment === void 0 ? void 0 : attachment.url, false, false, metadata);
34951
34967
  }
34952
34968
  }
34953
- }, [metadata, metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, hasImage]);
34969
+ }, [metadataLoaded, oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
34954
34970
  var elements = useMemo(function () {
34955
- var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _resolvedOrder$link;
34956
- return [hasImage ? {
34971
+ var _resolvedOrder$image, _metadata$og11, _metadata$og11$image, _metadata$og11$image$, _resolvedOrder$title, _metadata$og12, _metadata$og13, _metadata$og13$title, _resolvedOrder$descri, _metadata$og14, _metadata$og15, _metadata$og15$descri, _resolvedOrder$link;
34972
+ return [showImage ? {
34957
34973
  key: 'image',
34958
34974
  order: (_resolvedOrder$image = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.image) != null ? _resolvedOrder$image : 1,
34959
34975
  render: (/*#__PURE__*/React__default.createElement(ImageContainer, {
@@ -34974,8 +34990,9 @@ var OGMetadata = function OGMetadata(_ref) {
34974
34990
  render: ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.title) && (/*#__PURE__*/React__default.createElement(Title$3, {
34975
34991
  maxWidth: maxWidth,
34976
34992
  shouldAnimate: shouldAnimate,
34977
- padding: infoPadding
34978
- }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : _metadata$og13.title)))
34993
+ padding: infoPadding,
34994
+ color: textPrimary
34995
+ }, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : (_metadata$og13$title = _metadata$og13.title) === null || _metadata$og13$title === void 0 ? void 0 : _metadata$og13$title.trim())))
34979
34996
  }, {
34980
34997
  key: 'description',
34981
34998
  order: (_resolvedOrder$descri = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.description) != null ? _resolvedOrder$descri : 3,
@@ -34984,7 +35001,7 @@ var OGMetadata = function OGMetadata(_ref) {
34984
35001
  shouldAnimate: shouldAnimate,
34985
35002
  color: textSecondary,
34986
35003
  padding: infoPadding
34987
- }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : _metadata$og15.description))
35004
+ }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : (_metadata$og15$descri = _metadata$og15.description) === null || _metadata$og15$descri === void 0 ? void 0 : _metadata$og15$descri.trim()))
34988
35005
  }, {
34989
35006
  key: 'link',
34990
35007
  order: (_resolvedOrder$link = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.link) != null ? _resolvedOrder$link : 4,
@@ -35042,7 +35059,8 @@ var OGMetadata = function OGMetadata(_ref) {
35042
35059
  borderRadius: ogContainerBorderRadius,
35043
35060
  padding: ogContainerPadding,
35044
35061
  className: ogContainerClassName,
35045
- containerMargin: ogContainerMargin
35062
+ containerMargin: ogContainerMargin,
35063
+ maxWidth: maxWidth
35046
35064
  }, isInviteLink ? {
35047
35065
  as: 'div',
35048
35066
  onClick: function onClick() {
@@ -35056,84 +35074,90 @@ var OGMetadata = function OGMetadata(_ref) {
35056
35074
  }), content);
35057
35075
  };
35058
35076
  var sharedKeyframes = "\n @keyframes fadeInSlideUp {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes expandHeight {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 1000px;\n opacity: 1;\n }\n }\n";
35059
- var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n min-width: inherit;\n max-width: inherit;\n width: 100%;\n display: grid;\n grid-template-columns: 1fr;\n background-color: ", ";\n border-radius: ", ";\n margin: ", ";\n // margin-bottom: ", ";\n padding: ", ";\n text-decoration: none;\n color: inherit;\n &:hover {\n opacity: 0.9;\n cursor: pointer;\n }\n"])), function (_ref2) {
35060
- var showBackground = _ref2.showBackground,
35061
- customBg = _ref2.customBg,
35062
- bgColor = _ref2.bgColor;
35063
- return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
35077
+ var OGMetadataContainer = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLiteralLoose(["\n min-width: inherit;\n max-width: ", ";\n width: 100%;\n display: grid;\n grid-template-columns: 1fr;\n border-radius: 8px;\n background-color: ", ";\n border-radius: ", ";\n margin: ", ";\n // margin-bottom: ", ";\n padding: ", ";\n text-decoration: none;\n // color: inherit;\n &:hover {\n opacity: 0.9;\n cursor: pointer;\n }\n"])), function (_ref2) {
35078
+ var maxWidth = _ref2.maxWidth;
35079
+ return maxWidth ? maxWidth + "px" : 'inherit';
35064
35080
  }, function (_ref3) {
35065
- var borderRadius = _ref3.borderRadius;
35066
- return borderRadius !== undefined ? borderRadius : '8px';
35081
+ var showBackground = _ref3.showBackground,
35082
+ customBg = _ref3.customBg,
35083
+ bgColor = _ref3.bgColor;
35084
+ return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
35067
35085
  }, function (_ref4) {
35068
- var containerMargin = _ref4.containerMargin;
35069
- return containerMargin != null ? containerMargin : '0.8rem auto 0';
35086
+ var borderRadius = _ref4.borderRadius;
35087
+ return borderRadius !== undefined ? borderRadius : '8px';
35070
35088
  }, function (_ref5) {
35071
- var showOGMetadata = _ref5.showOGMetadata;
35072
- return showOGMetadata ? '0.4rem' : '0';
35089
+ var containerMargin = _ref5.containerMargin;
35090
+ return containerMargin != null ? containerMargin : '0.8rem auto 0';
35073
35091
  }, function (_ref6) {
35074
- var padding = _ref6.padding;
35092
+ var showOGMetadata = _ref6.showOGMetadata;
35093
+ return showOGMetadata ? '0.4rem' : '0';
35094
+ }, function (_ref7) {
35095
+ var padding = _ref7.padding;
35075
35096
  return padding != null ? padding : '0';
35076
35097
  });
35077
- var ImageContainer = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: ", ";\n opacity: ", ";\n margin: 0 auto;\n overflow: hidden;\n ", "\n"])), sharedKeyframes, function (_ref7) {
35078
- var containerHeight = _ref7.containerHeight;
35098
+ var ImageContainer = styled.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: ", ";\n opacity: ", ";\n margin: 0 auto;\n border-radius: 8px 8px 0 0;\n overflow: hidden;\n ", "\n"])), sharedKeyframes, function (_ref8) {
35099
+ var containerHeight = _ref8.containerHeight;
35079
35100
  return containerHeight ? containerHeight + "px" : '0px';
35080
- }, function (_ref8) {
35081
- var showOGMetadata = _ref8.showOGMetadata,
35082
- containerHeight = _ref8.containerHeight;
35083
- return showOGMetadata && containerHeight ? 1 : 0;
35084
35101
  }, function (_ref9) {
35085
- var shouldAnimate = _ref9.shouldAnimate,
35086
- showOGMetadata = _ref9.showOGMetadata,
35102
+ var showOGMetadata = _ref9.showOGMetadata,
35087
35103
  containerHeight = _ref9.containerHeight;
35104
+ return showOGMetadata && containerHeight ? 1 : 0;
35105
+ }, function (_ref0) {
35106
+ var shouldAnimate = _ref0.shouldAnimate,
35107
+ showOGMetadata = _ref0.showOGMetadata,
35108
+ containerHeight = _ref0.containerHeight;
35088
35109
  return shouldAnimate && showOGMetadata && containerHeight && "\n animation: expandHeight 0.3s ease-out forwards;\n ";
35089
35110
  });
35090
- var OGText = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n flex-direction: column;\n gap: 0;\n ", "\n ", ";\n"])), sharedKeyframes, function (_ref0) {
35091
- var shouldAnimate = _ref0.shouldAnimate;
35111
+ var OGText = styled.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n flex-direction: column;\n gap: 0;\n ", "\n ", ";\n"])), sharedKeyframes, function (_ref1) {
35112
+ var shouldAnimate = _ref1.shouldAnimate;
35092
35113
  return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out forwards;\n ";
35093
- }, function (_ref1) {
35094
- var margin = _ref1.margin;
35114
+ }, function (_ref10) {
35115
+ var margin = _ref10.margin;
35095
35116
  return margin ? '12px' : '0';
35096
35117
  });
35097
- var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: bold;\n font-size: 13px;\n line-height: 16px;\n margin: 8px 0 0 0;\n padding: ", ";\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref10) {
35098
- var padding = _ref10.padding;
35118
+ var Title$3 = styled.p(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n ", "\n // font-family: Inter;\n font-weight: 500;\n font-size: 14px;\n line-height: 18px;\n letter-spacing: 0px;\n color: ", ";\n margin: 4px 0 0 0;\n padding: ", ";\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref11) {
35119
+ var color = _ref11.color;
35120
+ return color;
35121
+ }, function (_ref12) {
35122
+ var padding = _ref12.padding;
35099
35123
  return padding != null ? padding : '0';
35100
- }, function (_ref11) {
35101
- var maxWidth = _ref11.maxWidth;
35124
+ }, function (_ref13) {
35125
+ var maxWidth = _ref13.maxWidth;
35102
35126
  return maxWidth && "\n max-width: " + maxWidth + "px;\n ";
35103
- }, function (_ref12) {
35104
- var shouldAnimate = _ref12.shouldAnimate;
35127
+ }, function (_ref14) {
35128
+ var shouldAnimate = _ref14.shouldAnimate;
35105
35129
  return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out 0.1s backwards;\n ";
35106
35130
  });
35107
- var Desc = styled.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: normal;\n font-size: 13px;\n line-height: 16px;\n margin: 0 0 8px 0;\n padding: ", ";\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref13) {
35108
- var padding = _ref13.padding;
35131
+ var Desc = styled.p(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: normal;\n font-size: 13px;\n line-height: 16px;\n margin: 4px 0 4px 0;\n padding: ", ";\n color: ", ";\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref15) {
35132
+ var padding = _ref15.padding;
35109
35133
  return padding != null ? padding : '0';
35110
- }, function (_ref14) {
35111
- var color = _ref14.color;
35134
+ }, function (_ref16) {
35135
+ var color = _ref16.color;
35112
35136
  return color;
35113
- }, function (_ref15) {
35114
- var maxWidth = _ref15.maxWidth;
35137
+ }, function (_ref17) {
35138
+ var maxWidth = _ref17.maxWidth;
35115
35139
  return maxWidth && "\n max-width: " + maxWidth + "px;\n ";
35116
- }, function (_ref16) {
35117
- var shouldAnimate = _ref16.shouldAnimate;
35140
+ }, function (_ref18) {
35141
+ var shouldAnimate = _ref18.shouldAnimate;
35118
35142
  return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out 0.2s backwards;\n ";
35119
35143
  });
35120
- var Url = styled.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: normal;\n font-size: 13px;\n line-height: 16px;\n margin: 0 0 12px 0;\n padding: ", ";\n color: gray;\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref17) {
35121
- var padding = _ref17.padding;
35144
+ var Url = styled.p(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n ", "\n font-weight: normal;\n font-size: 13px;\n line-height: 16px;\n margin: 0 0 12px 0;\n padding: ", ";\n color: gray;\n box-sizing: border-box;\n ", "\n ", "\n"])), sharedKeyframes, function (_ref19) {
35145
+ var padding = _ref19.padding;
35122
35146
  return padding != null ? padding : '0';
35123
- }, function (_ref18) {
35124
- var maxWidth = _ref18.maxWidth;
35147
+ }, function (_ref20) {
35148
+ var maxWidth = _ref20.maxWidth;
35125
35149
  return maxWidth && "\n max-width: " + maxWidth + "px;\n ";
35126
- }, function (_ref19) {
35127
- var shouldAnimate = _ref19.shouldAnimate;
35150
+ }, function (_ref21) {
35151
+ var shouldAnimate = _ref21.shouldAnimate;
35128
35152
  return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out 0.3s backwards;\n ";
35129
35153
  });
35130
- var Img = styled.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n border-radius: inherit;\n ", "\n"])), sharedKeyframes, function (_ref20) {
35131
- var shouldAnimate = _ref20.shouldAnimate;
35154
+ var Img = styled.img(_templateObject7$h || (_templateObject7$h = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n // object-fit: cover;\n // object-position: center;\n // image-rendering: auto;\n border-radius: inherit;\n ", "\n"])), sharedKeyframes, function (_ref22) {
35155
+ var shouldAnimate = _ref22.shouldAnimate;
35132
35156
  return shouldAnimate && "\n animation: fadeIn 0.4s ease-out forwards;\n ";
35133
35157
  });
35134
- var OGRow = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n"])));
35158
+ var OGRow = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n padding: 0;\n"])));
35135
35159
  var OGTextWrapper = styled.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n flex: 1 1 auto;\n"])));
35136
- var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n width: 52px;\n height: 52px;\n border-radius: 8px;\n overflow: hidden;\n margin: 12px;\n flex: 0 0 52px;\n"])));
35160
+ var FaviconContainer = styled.div(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n width: 52px;\n height: 52px;\n border-radius: 8px;\n overflow: hidden;\n margin: 8px;\n flex: 0 0 52px;\n"])));
35137
35161
  var FaviconImg = styled.img(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n"])));
35138
35162
 
35139
35163
  var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m;
@@ -35362,6 +35386,41 @@ var MessageBody = function MessageBody(_ref) {
35362
35386
  var selectionIsActive = useMemo(function () {
35363
35387
  return selectedMessagesMap && selectedMessagesMap.size > 0;
35364
35388
  }, [selectedMessagesMap]);
35389
+ var hasLongLinkAttachmentUrl = useMemo(function () {
35390
+ if (!linkAttachment || !linkAttachment.url) return false;
35391
+ return linkAttachment.url.length > 100;
35392
+ }, [linkAttachment]);
35393
+ var oGMetadata = useSelector(function (state) {
35394
+ return state.MessageReducer.oGMetadata;
35395
+ });
35396
+ var linkMetadata = useMemo(function () {
35397
+ if (!(linkAttachment !== null && linkAttachment !== void 0 && linkAttachment.url)) return null;
35398
+ return (oGMetadata === null || oGMetadata === void 0 ? void 0 : oGMetadata[linkAttachment.url]) || null;
35399
+ }, [oGMetadata, linkAttachment === null || linkAttachment === void 0 ? void 0 : linkAttachment.url]);
35400
+ var ogMetadataContainerWidth = useMemo(function () {
35401
+ var _linkMetadata$og, _linkMetadata$og$imag, _linkMetadata$og$imag2, _linkMetadata$og2, _linkMetadata$og3, _linkMetadata$og3$fav;
35402
+ if (!linkMetadata || !linkAttachment) return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
35403
+ if (hasLongLinkAttachmentUrl) {
35404
+ return 400;
35405
+ }
35406
+ var hasImage = (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og = linkMetadata.og) === null || _linkMetadata$og === void 0 ? void 0 : (_linkMetadata$og$imag = _linkMetadata$og.image) === null || _linkMetadata$og$imag === void 0 ? void 0 : (_linkMetadata$og$imag2 = _linkMetadata$og$imag[0]) === null || _linkMetadata$og$imag2 === void 0 ? void 0 : _linkMetadata$og$imag2.url) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight);
35407
+ var imageWidth = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageWidth;
35408
+ var imageHeight = linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.imageHeight;
35409
+ var calculatedImageHeight = imageWidth && imageHeight ? imageHeight / (imageWidth / ((ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400)) : 0;
35410
+ var showImage = hasImage && calculatedImageHeight >= 180 && calculatedImageHeight <= 400;
35411
+ var hasDescription = linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og2 = linkMetadata.og) === null || _linkMetadata$og2 === void 0 ? void 0 : _linkMetadata$og2.description;
35412
+ var hasFavicon = (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : linkMetadata.faviconLoaded) && (linkMetadata === null || linkMetadata === void 0 ? void 0 : (_linkMetadata$og3 = linkMetadata.og) === null || _linkMetadata$og3 === void 0 ? void 0 : (_linkMetadata$og3$fav = _linkMetadata$og3.favicon) === null || _linkMetadata$og3$fav === void 0 ? void 0 : _linkMetadata$og3$fav.url);
35413
+ if (showImage) {
35414
+ return 400;
35415
+ }
35416
+ if (hasDescription && hasFavicon) {
35417
+ return 336;
35418
+ }
35419
+ if (hasDescription) {
35420
+ return 356;
35421
+ }
35422
+ return (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400;
35423
+ }, [linkMetadata, linkAttachment, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth, ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogShowFavicon, hasLongLinkAttachmentUrl]);
35365
35424
  var handleRemoveFailedAttachment = function handleRemoveFailedAttachment(attachmentId) {
35366
35425
  log.info('remove attachment .. ', attachmentId);
35367
35426
  };
@@ -35379,7 +35438,10 @@ var MessageBody = function MessageBody(_ref) {
35379
35438
  },
35380
35439
  borderRadius: borderRadius,
35381
35440
  withAttachments: notLinkAttachment,
35382
- attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 420 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
35441
+ hasLinkAttachment: !!linkAttachment,
35442
+ hasLongLinkAttachmentUrl: hasLongLinkAttachmentUrl,
35443
+ attachmentWidth: withAttachments ? mediaAttachment ? attachmentMetas && getSendAttachmentsAsSeparateMessages() && attachmentMetas.szw && calculateRenderedImageWidth(attachmentMetas.szw, attachmentMetas.szh, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxWidth : videoAttachmentMaxWidth, mediaAttachment.type === attachmentTypes.image ? imageAttachmentMaxHeight : videoAttachmentMaxHeight)[0] || 400 : message.attachments[0].type === attachmentTypes.voice ? 254 : message.attachments[0].type === attachmentTypes.file ? fileAttachmentsBoxWidth : undefined : undefined,
35444
+ ogMetadataMaxWidth: ogMetadataContainerWidth,
35383
35445
  noBody: !message.body && !withAttachments,
35384
35446
  onMouseEnter: handleMouseEnter,
35385
35447
  onMouseLeave: handleMouseLeave
@@ -35535,7 +35597,7 @@ var MessageBody = function MessageBody(_ref) {
35535
35597
  unsupportedMessage: unsupportedMessage,
35536
35598
  unsupportedMessageColor: textSecondary
35537
35599
  }, ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
35538
- maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
35600
+ maxWidth: ogMetadataContainerWidth,
35539
35601
  maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
35540
35602
  attachments: [linkAttachment],
35541
35603
  state: message.state,
@@ -35574,7 +35636,7 @@ var MessageBody = function MessageBody(_ref) {
35574
35636
  }))), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
35575
35637
  color: textSecondary
35576
35638
  }, " Message was deleted. ")) : '', !ogContainerFirst && linkAttachment && !mediaAttachment && !withMediaAttachment && !fileAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
35577
- maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
35639
+ maxWidth: ogMetadataContainerWidth,
35578
35640
  maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
35579
35641
  attachments: [linkAttachment],
35580
35642
  state: message.state,
@@ -35596,7 +35658,7 @@ var MessageBody = function MessageBody(_ref) {
35596
35658
  ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
35597
35659
  infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding,
35598
35660
  isInviteLink: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.isInviteLink
35599
- })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
35661
+ })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && !!linkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
35600
35662
  message: message,
35601
35663
  showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
35602
35664
  messageStatusDisplayingType: messageStatusDisplayingType,
@@ -35612,25 +35674,31 @@ var MessageBody = function MessageBody(_ref) {
35612
35674
  messageStatusVisible: !!messageStatusVisible,
35613
35675
  leftMargin: true,
35614
35676
  messageTimeColorOnAttachment: messageTimeColorOnAttachment || textSecondary
35615
- })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
35616
- message: message,
35617
- showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
35618
- messageStatusDisplayingType: messageStatusDisplayingType,
35619
- messageStatusSize: messageStatusSize,
35620
- messageStatusColor: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : messageStateColor || textSecondary,
35621
- messageReadStatusColor: messageReadStatusColor,
35622
- messageStateFontSize: messageStateFontSize,
35623
- messageStateColor: messageStateColor,
35624
- messageTimeFontSize: messageTimeFontSize,
35625
- messageTimeColor: messageTimeColor,
35626
- messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
35627
- messageTimeVisible: !!messageTimeVisible,
35628
- messageStatusVisible: !!messageStatusVisible,
35629
- withAttachment: withAttachments,
35630
- leftMargin: true,
35631
- fileAttachment: withAttachments && (message.attachments[0].type === 'file' || message.attachments[0].type === 'voice'),
35632
- messageTimeColorOnAttachment: message.attachments[0].type === 'voice' ? textSecondary : message.attachments[0].type === 'image' || message.attachments[0].type === 'video' ? textOnPrimary : textSecondary
35633
- })), withAttachments && message.attachments.map(function (attachment) {
35677
+ })) : null), notLinkAttachment && messageStatusAndTimePosition === 'onMessage' && (messageStatusVisible || messageTimeVisible) && function () {
35678
+ var nonLinkAttachment = message.attachments.find(function (a) {
35679
+ return a.type !== attachmentTypes.link;
35680
+ });
35681
+ var attachmentType = nonLinkAttachment === null || nonLinkAttachment === void 0 ? void 0 : nonLinkAttachment.type;
35682
+ return /*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
35683
+ message: message,
35684
+ showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
35685
+ messageStatusDisplayingType: messageStatusDisplayingType,
35686
+ messageStatusSize: messageStatusSize,
35687
+ messageStatusColor: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : messageStateColor || textSecondary,
35688
+ messageReadStatusColor: messageReadStatusColor,
35689
+ messageStateFontSize: messageStateFontSize,
35690
+ messageStateColor: messageStateColor,
35691
+ messageTimeFontSize: messageTimeFontSize,
35692
+ messageTimeColor: messageTimeColor,
35693
+ messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
35694
+ messageTimeVisible: !!messageTimeVisible,
35695
+ messageStatusVisible: !!messageStatusVisible,
35696
+ withAttachment: withAttachments,
35697
+ leftMargin: true,
35698
+ fileAttachment: withAttachments && (attachmentType === 'file' || attachmentType === 'voice'),
35699
+ messageTimeColorOnAttachment: attachmentType === 'voice' ? textSecondary : attachmentType === 'image' || attachmentType === 'video' ? textOnPrimary : textSecondary
35700
+ });
35701
+ }(), withAttachments && message.attachments.map(function (attachment) {
35634
35702
  return /*#__PURE__*/React__default.createElement(Attachment$1, {
35635
35703
  key: attachment.tid || attachment.url,
35636
35704
  handleMediaItemClick: selectionIsActive ? undefined : handleMediaItemClick,
@@ -35703,7 +35771,7 @@ var MessageStatusDeleted$1 = styled.span(_templateObject2$B || (_templateObject2
35703
35771
  }, function (props) {
35704
35772
  return props.fontSize;
35705
35773
  });
35706
- var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n position: relative;\n background-color: ", ";\n //display: inline-block;\n border-radius: ", ";\n direction: ", ";\n max-width: ", ";\n width: max-content;\n padding: ", ";\n //direction: ", ";\n //overflow: ", ";\n transition: all 0.3s;\n transform-origin: right;\n"])), function (props) {
35774
+ var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n position: relative;\n background-color: ", ";\n //display: inline-block;\n border-radius: ", ";\n direction: ", ";\n max-width: ", ";\n width: ", ";\n overflow-wrap: break-word;\n word-break: break-word;\n\n ", "\n padding: ", ";\n //direction: ", ";\n //overflow: ", ";\n transition: all 0.3s;\n transform-origin: right;\n"])), function (props) {
35707
35775
  var _props$outgoingMessag, _props$incomingMessag;
35708
35776
  return props.isSelfMessage ? (_props$outgoingMessag = props.outgoingMessageStyles) === null || _props$outgoingMessag === void 0 ? void 0 : _props$outgoingMessag.background : (_props$incomingMessag = props.incomingMessageStyles) === null || _props$incomingMessag === void 0 ? void 0 : _props$incomingMessag.background;
35709
35777
  }, function (props) {
@@ -35711,10 +35779,14 @@ var MessageBodyContainer = styled.div(_templateObject3$v || (_templateObject3$v
35711
35779
  }, function (props) {
35712
35780
  return props.rtlDirection ? 'initial' : '';
35713
35781
  }, function (props) {
35714
- return props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 420 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '420px' : '100%';
35782
+ return props.hasLinkAttachment && !props.withAttachments ? props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px' : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '400px' : props.withAttachments ? props.attachmentWidth && props.attachmentWidth < 400 ? props.attachmentWidth < 165 ? props.isReplyMessage ? '210px' : '165px' : props.attachmentWidth + "px" : '400px' : '100%';
35783
+ }, function (props) {
35784
+ return props.hasLinkAttachment && !props.withAttachments && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : props.hasLongLinkAttachmentUrl && !props.withAttachments ? '416px' : 'max-content';
35785
+ }, function (props) {
35786
+ return props.hasLongLinkAttachmentUrl && "\n & a {\n overflow-wrap: anywhere;\n word-break: break-all;\n white-space: normal;\n max-width: " + (props.withAttachments ? '400px' : props.hasLinkAttachment && props.ogMetadataMaxWidth ? props.ogMetadataMaxWidth + "px" : '416px') + ";\n }\n ";
35715
35787
  }, function (props) {
35716
35788
  var _props$outgoingMessag2, _props$incomingMessag2;
35717
- return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
35789
+ return props.withAttachments ? props.isReplyMessage ? '1px 0 0 ' : '0' : props.hasLinkAttachment ? '8px' : props.isSelfMessage ? ((_props$outgoingMessag2 = props.outgoingMessageStyles) === null || _props$outgoingMessag2 === void 0 ? void 0 : _props$outgoingMessag2.background) === 'inherit' ? '0' : '8px 12px' : ((_props$incomingMessag2 = props.incomingMessageStyles) === null || _props$incomingMessag2 === void 0 ? void 0 : _props$incomingMessag2.background) === 'inherit' ? ' 0' : '8px 12px';
35718
35790
  }, function (props) {
35719
35791
  return props.isSelfMessage ? 'initial' : '';
35720
35792
  }, function (props) {
@@ -36534,11 +36606,6 @@ var Message$1 = function Message(_ref) {
36534
36606
  setFrequentlyEmojisOpen(false);
36535
36607
  };
36536
36608
  var handleSendReadMarker = function handleSendReadMarker() {
36537
- if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
36538
- return marker.name === MESSAGE_DELIVERY_STATUS.READ;
36539
- })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
36540
- dispatch(markMessagesAsReadAC(channel.id, [message.id]));
36541
- }
36542
36609
  if (!message.userMarkers.find(function (marker) {
36543
36610
  return marker.name === MESSAGE_DELIVERY_STATUS.DELIVERED;
36544
36611
  })) {
@@ -36548,6 +36615,11 @@ var Message$1 = function Message(_ref) {
36548
36615
  dispatch(markMessagesAsDeliveredAC(channel.id, [message.id]));
36549
36616
  }
36550
36617
  }
36618
+ if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
36619
+ return marker.name === MESSAGE_DELIVERY_STATUS.READ;
36620
+ })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
36621
+ dispatch(markMessagesAsReadAC(channel.id, [message.id]));
36622
+ }
36551
36623
  };
36552
36624
  var handleForwardMessage = function handleForwardMessage(channelIds) {
36553
36625
  if (channelIds && channelIds.length) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.7.6-beta.5",
3
+ "version": "1.7.6-beta.6",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",