sceyt-chat-react-uikit 1.7.1-beta.12 → 1.7.1-beta.14

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 (5) hide show
  1. package/components/Channel/index.d.ts +1 -0
  2. package/components/ChannelList/index.d.ts +1 -0
  3. package/index.js +126 -35
  4. package/index.modern.js +126 -35
  5. package/package.json +1 -1
package/components/Channel/index.d.ts CHANGED
@@ -46,6 +46,7 @@ interface IChannelProps {
46
46
  user: IUser;
47
47
  MessageText: any;
48
48
  }) => any;
49
+ doNotShowMessageDeliveryTypes: string[];
49
50
  }
50
51
  declare const Channel: React.FC<IChannelProps>;
51
52
  export default Channel;
package/components/ChannelList/index.d.ts CHANGED
@@ -77,6 +77,7 @@ interface IChannelListProps {
77
77
  getCustomLatestMessage?: (lastMessage: IMessage, typingOrRecording: any, draftMessageText: any, textSecondary: string, channel: IChannel, channelLastMessageFontSize: string, channelLastMessageHeight: string, isDirectChannel: boolean, textPrimary: string, messageAuthorRef: any, contactsMap: {
78
78
  [key: string]: IContact;
79
79
  }, getFromContacts: boolean, warningColor: string, user: IUser, MessageText: any) => any;
80
+ doNotShowMessageDeliveryTypes: string[];
80
81
  }
81
82
  declare const ChannelList: React.FC<IChannelListProps>;
82
83
  export default ChannelList;
package/index.js CHANGED
@@ -9091,7 +9091,7 @@ function updateChannelLastMessageOnAllChannels(channelId, message) {
9091
9091
  var updateChannel = allChannels.find(function (chan) {
9092
9092
  return chan.id === channelId;
9093
9093
  });
9094
- if (message.state === 'Deleted' || message.state === 'Edited') {
9094
+ if ((message === null || message === void 0 ? void 0 : message.state) === 'Deleted' || (message === null || message === void 0 ? void 0 : message.state) === 'Edited') {
9095
9095
  var _updateChannel;
9096
9096
  if (((_updateChannel = updateChannel) === null || _updateChannel === void 0 ? void 0 : _updateChannel.lastMessage.id) === message.id) {
9097
9097
  allChannels = allChannels.map(function (chan) {
@@ -21179,7 +21179,8 @@ var Channel = function Channel(_ref3) {
21179
21179
  channelAvatarSize = _ref3.channelAvatarSize,
21180
21180
  channelAvatarTextSize = _ref3.channelAvatarTextSize,
21181
21181
  setSelectedChannel = _ref3.setSelectedChannel,
21182
- getCustomLatestMessage = _ref3.getCustomLatestMessage;
21182
+ getCustomLatestMessage = _ref3.getCustomLatestMessage,
21183
+ doNotShowMessageDeliveryTypes = _ref3.doNotShowMessageDeliveryTypes;
21183
21184
  var _useColor = useColors(),
21184
21185
  accentColor = _useColor[THEME_COLORS.ACCENT],
21185
21186
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -21335,6 +21336,9 @@ var Channel = function Channel(_ref3) {
21335
21336
  MessageText: MessageText
21336
21337
  });
21337
21338
  }, [getCustomLatestMessage, lastMessage, typingOrRecording, draftMessageText, textSecondary, channel, channelLastMessageFontSize, channelLastMessageHeight, isDirectChannel, textPrimary, messageAuthorRef, contactsMap, getFromContacts, warningColor, user, MessageText]);
21339
+ var isTypeValid = React.useCallback(function (type) {
21340
+ return !doNotShowMessageDeliveryTypes.includes(type);
21341
+ }, [doNotShowMessageDeliveryTypes]);
21338
21342
  return /*#__PURE__*/React__default.createElement(Container$2, {
21339
21343
  theme: theme,
21340
21344
  selectedChannel: channel.id === activeChannel.id,
@@ -21423,7 +21427,7 @@ var Channel = function Channel(_ref3) {
21423
21427
  }, MessageText)))), /*#__PURE__*/React__default.createElement(ChannelStatus, {
21424
21428
  color: iconInactive,
21425
21429
  ref: messageTimeAndStatusRef
21426
- }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && (/*#__PURE__*/React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && lastMessage.type !== 'system' && MessageStatusIcon({
21430
+ }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && (/*#__PURE__*/React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && isTypeValid(lastMessage.type) && MessageStatusIcon({
21427
21431
  messageStatus: lastMessage.deliveryStatus,
21428
21432
  messageStatusDisplayingType: 'ticks',
21429
21433
  readIconColor: accentColor,
@@ -23428,7 +23432,9 @@ var ChannelList = function ChannelList(_ref) {
23428
23432
  searchChannelInputFontSize = _ref.searchChannelInputFontSize,
23429
23433
  searchedChannelsTitleFontSize = _ref.searchedChannelsTitleFontSize,
23430
23434
  searchChannelsPadding = _ref.searchChannelsPadding,
23431
- getCustomLatestMessage = _ref.getCustomLatestMessage;
23435
+ getCustomLatestMessage = _ref.getCustomLatestMessage,
23436
+ _ref$doNotShowMessage = _ref.doNotShowMessageDeliveryTypes,
23437
+ doNotShowMessageDeliveryTypes = _ref$doNotShowMessage === void 0 ? ['system'] : _ref$doNotShowMessage;
23432
23438
  var _useColor = useColors(),
23433
23439
  background = _useColor[THEME_COLORS.BACKGROUND],
23434
23440
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -23736,7 +23742,8 @@ var ChannelList = function ChannelList(_ref) {
23736
23742
  key: channel.id,
23737
23743
  contactsMap: contactsMap,
23738
23744
  setSelectedChannel: setSelectedChannel,
23739
- getCustomLatestMessage: getCustomLatestMessage
23745
+ getCustomLatestMessage: getCustomLatestMessage,
23746
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23740
23747
  }));
23741
23748
  }))) : channelsLoading === LOADING_STATE.LOADED && searchValue ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchedChannels !== null && searchedChannels !== void 0 && (_searchedChannels$cha = searchedChannels.chats_groups) !== null && _searchedChannels$cha !== void 0 && _searchedChannels$cha.length || searchedChannels !== null && searchedChannels !== void 0 && (_searchedChannels$cha2 = searchedChannels.channels) !== null && _searchedChannels$cha2 !== void 0 && _searchedChannels$cha2.length || searchedChannels !== null && searchedChannels !== void 0 && (_searchedChannels$con = searchedChannels.contacts) !== null && _searchedChannels$con !== void 0 && _searchedChannels$con.length ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !!(searchedChannels.chats_groups && searchedChannels.chats_groups.length) && (/*#__PURE__*/React__default.createElement(DirectChannels, null, /*#__PURE__*/React__default.createElement(SearchedChannelsHeader, {
23742
23749
  color: textSecondary,
@@ -23772,7 +23779,8 @@ var ChannelList = function ChannelList(_ref) {
23772
23779
  key: channel.id,
23773
23780
  contactsMap: contactsMap,
23774
23781
  setSelectedChannel: setSelectedChannel,
23775
- getCustomLatestMessage: getCustomLatestMessage
23782
+ getCustomLatestMessage: getCustomLatestMessage,
23783
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23776
23784
  }));
23777
23785
  }))), !!(searchedChannels.contacts && searchedChannels.contacts.length) && (/*#__PURE__*/React__default.createElement(GroupChannels, null, /*#__PURE__*/React__default.createElement(SearchedChannelsHeader, {
23778
23786
  color: textSecondary,
@@ -23840,7 +23848,8 @@ var ChannelList = function ChannelList(_ref) {
23840
23848
  key: channel.id,
23841
23849
  contactsMap: contactsMap,
23842
23850
  setSelectedChannel: setSelectedChannel,
23843
- getCustomLatestMessage: getCustomLatestMessage
23851
+ getCustomLatestMessage: getCustomLatestMessage,
23852
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23844
23853
  }));
23845
23854
  }))))) : (/*#__PURE__*/React__default.createElement(NoData, {
23846
23855
  color: textSecondary,
@@ -23889,7 +23898,8 @@ var ChannelList = function ChannelList(_ref) {
23889
23898
  key: channel.id,
23890
23899
  contactsMap: contactsMap,
23891
23900
  setSelectedChannel: setSelectedChannel,
23892
- getCustomLatestMessage: getCustomLatestMessage
23901
+ getCustomLatestMessage: getCustomLatestMessage,
23902
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23893
23903
  }));
23894
23904
  }))), !!searchValue && (channelsLoading === LOADING_STATE.LOADED ? !((_searchedChannels$cha4 = searchedChannels.chats_groups) !== null && _searchedChannels$cha4 !== void 0 && _searchedChannels$cha4.length) && !((_searchedChannels$cha5 = searchedChannels.chats_groups) !== null && _searchedChannels$cha5 !== void 0 && _searchedChannels$cha5.length) && !((_searchedChannels$cha6 = searchedChannels.channels) !== null && _searchedChannels$cha6 !== void 0 && _searchedChannels$cha6.length) ? (/*#__PURE__*/React__default.createElement(NoData, {
23895
23905
  color: textSecondary,
@@ -23928,7 +23938,8 @@ var ChannelList = function ChannelList(_ref) {
23928
23938
  contactsMap: contactsMap,
23929
23939
  key: channel.id,
23930
23940
  setSelectedChannel: setSelectedChannel,
23931
- getCustomLatestMessage: getCustomLatestMessage
23941
+ getCustomLatestMessage: getCustomLatestMessage,
23942
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23932
23943
  }));
23933
23944
  }))), !!searchedChannels.channels.length && (/*#__PURE__*/React__default.createElement(GroupChannels, null, /*#__PURE__*/React__default.createElement(SearchedChannelsHeader, {
23934
23945
  color: textSecondary,
@@ -23964,7 +23975,8 @@ var ChannelList = function ChannelList(_ref) {
23964
23975
  key: channel.id,
23965
23976
  contactsMap: contactsMap,
23966
23977
  setSelectedChannel: setSelectedChannel,
23967
- getCustomLatestMessage: getCustomLatestMessage
23978
+ getCustomLatestMessage: getCustomLatestMessage,
23979
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23968
23980
  }));
23969
23981
  }))))) : (/*#__PURE__*/React__default.createElement(LoadingWrapper, null, /*#__PURE__*/React__default.createElement(UploadingIcon, {
23970
23982
  color: textFootnote
@@ -31258,7 +31270,7 @@ var validateUrl = function validateUrl(url) {
31258
31270
  }
31259
31271
  };
31260
31272
  var OGMetadata = function OGMetadata(_ref) {
31261
- var _metadata$og4, _metadata$og4$image, _metadata$og4$image$, _metadata$og5, _metadata$og5$image, _metadata$og5$image$, _metadata$og6, _metadata$og7, _metadata$og7$favicon, _metadata$og8, _metadata$og8$favicon, _metadata$og9, _metadata$og0, _metadata$og1;
31273
+ var _metadata$og6, _metadata$og6$image, _metadata$og6$image$, _metadata$og7, _metadata$og7$image, _metadata$og7$image$, _metadata$og8, _metadata$og8$image, _metadata$og8$image$, _metadata$og9, _metadata$og0, _metadata$og0$favicon, _metadata$og1, _metadata$og1$favicon, _metadata$og10, _metadata$og11, _metadata$og12;
31262
31274
  var attachments = _ref.attachments,
31263
31275
  state = _ref.state;
31264
31276
  var _useState = React.useState(null),
@@ -31270,6 +31282,15 @@ var OGMetadata = function OGMetadata(_ref) {
31270
31282
  var _useState3 = React.useState(true),
31271
31283
  faviconLoadError = _useState3[0],
31272
31284
  setFaviconLoadError = _useState3[1];
31285
+ var _useState4 = React.useState(false),
31286
+ imageLoaded = _useState4[0],
31287
+ setImageLoaded = _useState4[1];
31288
+ var _useState5 = React.useState(0),
31289
+ imageWidth = _useState5[0],
31290
+ setImageWidth = _useState5[1];
31291
+ var _useState6 = React.useState(0),
31292
+ imageHeight = _useState6[0],
31293
+ setImageHeight = _useState6[1];
31273
31294
  var attachment = React.useMemo(function () {
31274
31295
  return attachments.find(function (attachment) {
31275
31296
  return attachment.type === attachmentTypes.link;
@@ -31336,6 +31357,35 @@ var OGMetadata = function OGMetadata(_ref) {
31336
31357
  var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
31337
31358
  return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
31338
31359
  }, [state, metadata]);
31360
+ React.useEffect(function () {
31361
+ var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
31362
+ if (metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url) {
31363
+ var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
31364
+ var image = new Image();
31365
+ image.src = metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url;
31366
+ image.onload = function () {
31367
+ var imageWidth = image.width;
31368
+ var imageHeight = image.height;
31369
+ setImageWidth(imageWidth);
31370
+ setImageHeight(imageHeight);
31371
+ setImageLoadError(false);
31372
+ setImageLoaded(true);
31373
+ };
31374
+ image.onerror = function () {
31375
+ setImageLoadError(true);
31376
+ setImageLoaded(true);
31377
+ };
31378
+ }
31379
+ }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : (_metadata$og6$image = _metadata$og6.image) === null || _metadata$og6$image === void 0 ? void 0 : (_metadata$og6$image$ = _metadata$og6$image[0]) === null || _metadata$og6$image$ === void 0 ? void 0 : _metadata$og6$image$.url]);
31380
+ var calculatedImageWidth = React.useMemo(function () {
31381
+ if (imageWidth > 400) {
31382
+ return 400;
31383
+ }
31384
+ return imageWidth;
31385
+ }, [imageWidth]);
31386
+ var calculatedImageHeight = React.useMemo(function () {
31387
+ return imageHeight / (imageWidth / calculatedImageWidth);
31388
+ }, [imageWidth, imageHeight]);
31339
31389
  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
31340
31390
  showOGMetadata: !!showOGMetadata
31341
31391
  }, /*#__PURE__*/React__default.createElement("div", {
@@ -31343,43 +31393,84 @@ var OGMetadata = function OGMetadata(_ref) {
31343
31393
  window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
31344
31394
  }
31345
31395
  }, /*#__PURE__*/React__default.createElement(ImageContainer, {
31346
- showOGMetadata: !!showOGMetadata && !imageLoadError
31347
- }, metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url ? (/*#__PURE__*/React__default.createElement(Img, {
31348
- src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url,
31396
+ showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
31397
+ width: calculatedImageWidth,
31398
+ height: calculatedImageHeight
31399
+ }, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$image = _metadata$og7.image) !== null && _metadata$og7$image !== void 0 && (_metadata$og7$image$ = _metadata$og7$image[0]) !== null && _metadata$og7$image$ !== void 0 && _metadata$og7$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
31400
+ src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$image = _metadata$og8.image) === null || _metadata$og8$image === void 0 ? void 0 : (_metadata$og8$image$ = _metadata$og8$image[0]) === null || _metadata$og8$image$ === void 0 ? void 0 : _metadata$og8$image$.url,
31349
31401
  alt: 'OG metadata image',
31350
- onLoad: function onLoad() {
31351
- return setImageLoadError(false);
31352
- },
31353
- onError: function onError() {
31354
- return setImageLoadError(true);
31355
- }
31356
- })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, null, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, null, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
31357
- src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url,
31402
+ width: calculatedImageWidth,
31403
+ height: calculatedImageHeight
31404
+ })) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
31405
+ maxWidth: calculatedImageWidth
31406
+ }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
31407
+ maxWidth: calculatedImageWidth
31408
+ }, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && (_metadata$og0$favicon = _metadata$og0.favicon) !== null && _metadata$og0$favicon !== void 0 && _metadata$og0$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
31409
+ src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : (_metadata$og1$favicon = _metadata$og1.favicon) === null || _metadata$og1$favicon === void 0 ? void 0 : _metadata$og1$favicon.url,
31358
31410
  onLoad: function onLoad() {
31359
31411
  return setFaviconLoadError(false);
31360
31412
  },
31361
31413
  onError: function onError() {
31362
31414
  return setFaviconLoadError(true);
31363
31415
  }
31364
- })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? /*#__PURE__*/React__default.createElement(Desc, null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description) : null)) : null));
31416
+ })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? (/*#__PURE__*/React__default.createElement(Desc, {
31417
+ maxWidth: calculatedImageWidth
31418
+ }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description)) : null)) : null));
31365
31419
  };
31366
31420
  var OGMetadataContainer = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n min-width: inherit;\n max-width: inherit;\n display: grid;\n grid-template-columns: 1fr;\n background-color: rgba(0, 0, 0, 0.034);\n border-radius: 6px;\n margin-bottom: 0.4rem;\n margin: 0 auto;\n margin-bottom: ", ";\n &:hover {\n background-color: rgba(0, 0, 0, 0.1);\n cursor: pointer;\n }\n"])), function (_ref2) {
31367
31421
  var showOGMetadata = _ref2.showOGMetadata;
31368
31422
  return showOGMetadata ? '0.8rem' : '0';
31369
31423
  });
31370
- var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n max-height: 200px;\n width: 100%;\n margin: 0 auto;\n padding: ", ";\n height: ", ";\n transition: height 0.2s ease;\n"])), function (_ref3) {
31371
- var showOGMetadata = _ref3.showOGMetadata;
31372
- return showOGMetadata ? '0.3rem' : '0';
31424
+ var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n max-height: ", ";\n opacity: ", ";\n overflow: hidden;\n width: 100%;\n margin: 0 auto;\n padding: ", ";\n height: ", ";\n transition: height 0.2s ease;\n"])), function (_ref3) {
31425
+ var width = _ref3.width;
31426
+ return width + "px";
31373
31427
  }, function (_ref4) {
31374
- var showOGMetadata = _ref4.showOGMetadata;
31375
- return showOGMetadata ? '200px' : '0';
31376
- });
31377
- var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n width: 80%;\n padding: 0.5rem;\n margin: 0;\n"])));
31378
- var Url = styled__default.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n margin: 0 0 12px 0;\n color: gray;\n"])));
31379
- var Title = styled__default.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n font-weight: bold;\n font-size: 13px;\n padding: 0;\n display: flex;\n align-items: center;\n"])));
31380
- var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n"])));
31381
- var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n max-height: 100%;\n width: 100%;\n height: 200px;\n object-fit: cover;\n transition: height 0.2s ease;\n"])));
31382
- var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])));
31428
+ var height = _ref4.height;
31429
+ return height + "px";
31430
+ }, function (_ref5) {
31431
+ var showOGMetadata = _ref5.showOGMetadata;
31432
+ return showOGMetadata ? 1 : 0;
31433
+ }, function (_ref6) {
31434
+ var showOGMetadata = _ref6.showOGMetadata;
31435
+ return showOGMetadata ? '0.3rem' : '0';
31436
+ }, function (_ref7) {
31437
+ var showOGMetadata = _ref7.showOGMetadata,
31438
+ height = _ref7.height;
31439
+ return showOGMetadata ? height + "px" : '0';
31440
+ });
31441
+ var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n width: 80%;\n padding: 0.5rem;\n margin: 0;\n transition: all 0.2s ease;\n"])));
31442
+ var Url = styled__default.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n margin: 0 0 12px 0;\n color: gray;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref8) {
31443
+ var maxWidth = _ref8.maxWidth;
31444
+ return maxWidth + "px";
31445
+ });
31446
+ var Title = styled__default.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n font-weight: bold;\n font-size: 13px;\n padding: 0;\n display: flex;\n align-items: center;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref9) {
31447
+ var maxWidth = _ref9.maxWidth;
31448
+ return maxWidth + "px";
31449
+ });
31450
+ var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref0) {
31451
+ var maxWidth = _ref0.maxWidth;
31452
+ return maxWidth + "px";
31453
+ });
31454
+ var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n min-width: ", ";\n max-height: ", ";\n min-height: ", ";\n width: ", ";\n height: ", ";\n object-fit: cover;\n transition: height 0.2s ease;\n"])), function (_ref1) {
31455
+ var width = _ref1.width;
31456
+ return width + "px";
31457
+ }, function (_ref10) {
31458
+ var width = _ref10.width;
31459
+ return width + "px";
31460
+ }, function (_ref11) {
31461
+ var height = _ref11.height;
31462
+ return height + "px";
31463
+ }, function (_ref12) {
31464
+ var height = _ref12.height;
31465
+ return height + "px";
31466
+ }, function (_ref13) {
31467
+ var width = _ref13.width;
31468
+ return width + "px";
31469
+ }, function (_ref14) {
31470
+ var height = _ref14.height;
31471
+ return height + "px";
31472
+ });
31473
+ var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n transition: all 0.2s ease;\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])));
31383
31474
 
31384
31475
  var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
31385
31476
  var MessageBody = function MessageBody(_ref) {
package/index.modern.js CHANGED
@@ -9070,7 +9070,7 @@ function updateChannelLastMessageOnAllChannels(channelId, message) {
9070
9070
  var updateChannel = allChannels.find(function (chan) {
9071
9071
  return chan.id === channelId;
9072
9072
  });
9073
- if (message.state === 'Deleted' || message.state === 'Edited') {
9073
+ if ((message === null || message === void 0 ? void 0 : message.state) === 'Deleted' || (message === null || message === void 0 ? void 0 : message.state) === 'Edited') {
9074
9074
  var _updateChannel;
9075
9075
  if (((_updateChannel = updateChannel) === null || _updateChannel === void 0 ? void 0 : _updateChannel.lastMessage.id) === message.id) {
9076
9076
  allChannels = allChannels.map(function (chan) {
@@ -21158,7 +21158,8 @@ var Channel = function Channel(_ref3) {
21158
21158
  channelAvatarSize = _ref3.channelAvatarSize,
21159
21159
  channelAvatarTextSize = _ref3.channelAvatarTextSize,
21160
21160
  setSelectedChannel = _ref3.setSelectedChannel,
21161
- getCustomLatestMessage = _ref3.getCustomLatestMessage;
21161
+ getCustomLatestMessage = _ref3.getCustomLatestMessage,
21162
+ doNotShowMessageDeliveryTypes = _ref3.doNotShowMessageDeliveryTypes;
21162
21163
  var _useColor = useColors(),
21163
21164
  accentColor = _useColor[THEME_COLORS.ACCENT],
21164
21165
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -21314,6 +21315,9 @@ var Channel = function Channel(_ref3) {
21314
21315
  MessageText: MessageText
21315
21316
  });
21316
21317
  }, [getCustomLatestMessage, lastMessage, typingOrRecording, draftMessageText, textSecondary, channel, channelLastMessageFontSize, channelLastMessageHeight, isDirectChannel, textPrimary, messageAuthorRef, contactsMap, getFromContacts, warningColor, user, MessageText]);
21318
+ var isTypeValid = useCallback(function (type) {
21319
+ return !doNotShowMessageDeliveryTypes.includes(type);
21320
+ }, [doNotShowMessageDeliveryTypes]);
21317
21321
  return /*#__PURE__*/React__default.createElement(Container$2, {
21318
21322
  theme: theme,
21319
21323
  selectedChannel: channel.id === activeChannel.id,
@@ -21402,7 +21406,7 @@ var Channel = function Channel(_ref3) {
21402
21406
  }, MessageText)))), /*#__PURE__*/React__default.createElement(ChannelStatus, {
21403
21407
  color: iconInactive,
21404
21408
  ref: messageTimeAndStatusRef
21405
- }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && (/*#__PURE__*/React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && lastMessage.type !== 'system' && MessageStatusIcon({
21409
+ }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && (/*#__PURE__*/React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && isTypeValid(lastMessage.type) && MessageStatusIcon({
21406
21410
  messageStatus: lastMessage.deliveryStatus,
21407
21411
  messageStatusDisplayingType: 'ticks',
21408
21412
  readIconColor: accentColor,
@@ -23407,7 +23411,9 @@ var ChannelList = function ChannelList(_ref) {
23407
23411
  searchChannelInputFontSize = _ref.searchChannelInputFontSize,
23408
23412
  searchedChannelsTitleFontSize = _ref.searchedChannelsTitleFontSize,
23409
23413
  searchChannelsPadding = _ref.searchChannelsPadding,
23410
- getCustomLatestMessage = _ref.getCustomLatestMessage;
23414
+ getCustomLatestMessage = _ref.getCustomLatestMessage,
23415
+ _ref$doNotShowMessage = _ref.doNotShowMessageDeliveryTypes,
23416
+ doNotShowMessageDeliveryTypes = _ref$doNotShowMessage === void 0 ? ['system'] : _ref$doNotShowMessage;
23411
23417
  var _useColor = useColors(),
23412
23418
  background = _useColor[THEME_COLORS.BACKGROUND],
23413
23419
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -23715,7 +23721,8 @@ var ChannelList = function ChannelList(_ref) {
23715
23721
  key: channel.id,
23716
23722
  contactsMap: contactsMap,
23717
23723
  setSelectedChannel: setSelectedChannel,
23718
- getCustomLatestMessage: getCustomLatestMessage
23724
+ getCustomLatestMessage: getCustomLatestMessage,
23725
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23719
23726
  }));
23720
23727
  }))) : channelsLoading === LOADING_STATE.LOADED && searchValue ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, searchedChannels !== null && searchedChannels !== void 0 && (_searchedChannels$cha = searchedChannels.chats_groups) !== null && _searchedChannels$cha !== void 0 && _searchedChannels$cha.length || searchedChannels !== null && searchedChannels !== void 0 && (_searchedChannels$cha2 = searchedChannels.channels) !== null && _searchedChannels$cha2 !== void 0 && _searchedChannels$cha2.length || searchedChannels !== null && searchedChannels !== void 0 && (_searchedChannels$con = searchedChannels.contacts) !== null && _searchedChannels$con !== void 0 && _searchedChannels$con.length ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !!(searchedChannels.chats_groups && searchedChannels.chats_groups.length) && (/*#__PURE__*/React__default.createElement(DirectChannels, null, /*#__PURE__*/React__default.createElement(SearchedChannelsHeader, {
23721
23728
  color: textSecondary,
@@ -23751,7 +23758,8 @@ var ChannelList = function ChannelList(_ref) {
23751
23758
  key: channel.id,
23752
23759
  contactsMap: contactsMap,
23753
23760
  setSelectedChannel: setSelectedChannel,
23754
- getCustomLatestMessage: getCustomLatestMessage
23761
+ getCustomLatestMessage: getCustomLatestMessage,
23762
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23755
23763
  }));
23756
23764
  }))), !!(searchedChannels.contacts && searchedChannels.contacts.length) && (/*#__PURE__*/React__default.createElement(GroupChannels, null, /*#__PURE__*/React__default.createElement(SearchedChannelsHeader, {
23757
23765
  color: textSecondary,
@@ -23819,7 +23827,8 @@ var ChannelList = function ChannelList(_ref) {
23819
23827
  key: channel.id,
23820
23828
  contactsMap: contactsMap,
23821
23829
  setSelectedChannel: setSelectedChannel,
23822
- getCustomLatestMessage: getCustomLatestMessage
23830
+ getCustomLatestMessage: getCustomLatestMessage,
23831
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23823
23832
  }));
23824
23833
  }))))) : (/*#__PURE__*/React__default.createElement(NoData, {
23825
23834
  color: textSecondary,
@@ -23868,7 +23877,8 @@ var ChannelList = function ChannelList(_ref) {
23868
23877
  key: channel.id,
23869
23878
  contactsMap: contactsMap,
23870
23879
  setSelectedChannel: setSelectedChannel,
23871
- getCustomLatestMessage: getCustomLatestMessage
23880
+ getCustomLatestMessage: getCustomLatestMessage,
23881
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23872
23882
  }));
23873
23883
  }))), !!searchValue && (channelsLoading === LOADING_STATE.LOADED ? !((_searchedChannels$cha4 = searchedChannels.chats_groups) !== null && _searchedChannels$cha4 !== void 0 && _searchedChannels$cha4.length) && !((_searchedChannels$cha5 = searchedChannels.chats_groups) !== null && _searchedChannels$cha5 !== void 0 && _searchedChannels$cha5.length) && !((_searchedChannels$cha6 = searchedChannels.channels) !== null && _searchedChannels$cha6 !== void 0 && _searchedChannels$cha6.length) ? (/*#__PURE__*/React__default.createElement(NoData, {
23874
23884
  color: textSecondary,
@@ -23907,7 +23917,8 @@ var ChannelList = function ChannelList(_ref) {
23907
23917
  contactsMap: contactsMap,
23908
23918
  key: channel.id,
23909
23919
  setSelectedChannel: setSelectedChannel,
23910
- getCustomLatestMessage: getCustomLatestMessage
23920
+ getCustomLatestMessage: getCustomLatestMessage,
23921
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23911
23922
  }));
23912
23923
  }))), !!searchedChannels.channels.length && (/*#__PURE__*/React__default.createElement(GroupChannels, null, /*#__PURE__*/React__default.createElement(SearchedChannelsHeader, {
23913
23924
  color: textSecondary,
@@ -23943,7 +23954,8 @@ var ChannelList = function ChannelList(_ref) {
23943
23954
  key: channel.id,
23944
23955
  contactsMap: contactsMap,
23945
23956
  setSelectedChannel: setSelectedChannel,
23946
- getCustomLatestMessage: getCustomLatestMessage
23957
+ getCustomLatestMessage: getCustomLatestMessage,
23958
+ doNotShowMessageDeliveryTypes: doNotShowMessageDeliveryTypes
23947
23959
  }));
23948
23960
  }))))) : (/*#__PURE__*/React__default.createElement(LoadingWrapper, null, /*#__PURE__*/React__default.createElement(UploadingIcon, {
23949
23961
  color: textFootnote
@@ -31237,7 +31249,7 @@ var validateUrl = function validateUrl(url) {
31237
31249
  }
31238
31250
  };
31239
31251
  var OGMetadata = function OGMetadata(_ref) {
31240
- var _metadata$og4, _metadata$og4$image, _metadata$og4$image$, _metadata$og5, _metadata$og5$image, _metadata$og5$image$, _metadata$og6, _metadata$og7, _metadata$og7$favicon, _metadata$og8, _metadata$og8$favicon, _metadata$og9, _metadata$og0, _metadata$og1;
31252
+ var _metadata$og6, _metadata$og6$image, _metadata$og6$image$, _metadata$og7, _metadata$og7$image, _metadata$og7$image$, _metadata$og8, _metadata$og8$image, _metadata$og8$image$, _metadata$og9, _metadata$og0, _metadata$og0$favicon, _metadata$og1, _metadata$og1$favicon, _metadata$og10, _metadata$og11, _metadata$og12;
31241
31253
  var attachments = _ref.attachments,
31242
31254
  state = _ref.state;
31243
31255
  var _useState = useState(null),
@@ -31249,6 +31261,15 @@ var OGMetadata = function OGMetadata(_ref) {
31249
31261
  var _useState3 = useState(true),
31250
31262
  faviconLoadError = _useState3[0],
31251
31263
  setFaviconLoadError = _useState3[1];
31264
+ var _useState4 = useState(false),
31265
+ imageLoaded = _useState4[0],
31266
+ setImageLoaded = _useState4[1];
31267
+ var _useState5 = useState(0),
31268
+ imageWidth = _useState5[0],
31269
+ setImageWidth = _useState5[1];
31270
+ var _useState6 = useState(0),
31271
+ imageHeight = _useState6[0],
31272
+ setImageHeight = _useState6[1];
31252
31273
  var attachment = useMemo(function () {
31253
31274
  return attachments.find(function (attachment) {
31254
31275
  return attachment.type === attachmentTypes.link;
@@ -31315,6 +31336,35 @@ var OGMetadata = function OGMetadata(_ref) {
31315
31336
  var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
31316
31337
  return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
31317
31338
  }, [state, metadata]);
31339
+ useEffect(function () {
31340
+ var _metadata$og4, _metadata$og4$image, _metadata$og4$image$;
31341
+ if (metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url) {
31342
+ var _metadata$og5, _metadata$og5$image, _metadata$og5$image$;
31343
+ var image = new Image();
31344
+ image.src = metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url;
31345
+ image.onload = function () {
31346
+ var imageWidth = image.width;
31347
+ var imageHeight = image.height;
31348
+ setImageWidth(imageWidth);
31349
+ setImageHeight(imageHeight);
31350
+ setImageLoadError(false);
31351
+ setImageLoaded(true);
31352
+ };
31353
+ image.onerror = function () {
31354
+ setImageLoadError(true);
31355
+ setImageLoaded(true);
31356
+ };
31357
+ }
31358
+ }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og6 = metadata.og) === null || _metadata$og6 === void 0 ? void 0 : (_metadata$og6$image = _metadata$og6.image) === null || _metadata$og6$image === void 0 ? void 0 : (_metadata$og6$image$ = _metadata$og6$image[0]) === null || _metadata$og6$image$ === void 0 ? void 0 : _metadata$og6$image$.url]);
31359
+ var calculatedImageWidth = useMemo(function () {
31360
+ if (imageWidth > 400) {
31361
+ return 400;
31362
+ }
31363
+ return imageWidth;
31364
+ }, [imageWidth]);
31365
+ var calculatedImageHeight = useMemo(function () {
31366
+ return imageHeight / (imageWidth / calculatedImageWidth);
31367
+ }, [imageWidth, imageHeight]);
31318
31368
  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
31319
31369
  showOGMetadata: !!showOGMetadata
31320
31370
  }, /*#__PURE__*/React__default.createElement("div", {
@@ -31322,43 +31372,84 @@ var OGMetadata = function OGMetadata(_ref) {
31322
31372
  window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
31323
31373
  }
31324
31374
  }, /*#__PURE__*/React__default.createElement(ImageContainer, {
31325
- showOGMetadata: !!showOGMetadata && !imageLoadError
31326
- }, metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url ? (/*#__PURE__*/React__default.createElement(Img, {
31327
- src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url,
31375
+ showOGMetadata: !!showOGMetadata && !imageLoadError && imageLoaded,
31376
+ width: calculatedImageWidth,
31377
+ height: calculatedImageHeight
31378
+ }, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$image = _metadata$og7.image) !== null && _metadata$og7$image !== void 0 && (_metadata$og7$image$ = _metadata$og7$image[0]) !== null && _metadata$og7$image$ !== void 0 && _metadata$og7$image$.url && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
31379
+ src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$image = _metadata$og8.image) === null || _metadata$og8$image === void 0 ? void 0 : (_metadata$og8$image$ = _metadata$og8$image[0]) === null || _metadata$og8$image$ === void 0 ? void 0 : _metadata$og8$image$.url,
31328
31380
  alt: 'OG metadata image',
31329
- onLoad: function onLoad() {
31330
- return setImageLoadError(false);
31331
- },
31332
- onError: function onError() {
31333
- return setImageLoadError(true);
31334
- }
31335
- })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, null, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, null, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
31336
- src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url,
31381
+ width: calculatedImageWidth,
31382
+ height: calculatedImageHeight
31383
+ })) : null), showOGMetadata && imageLoaded ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, {
31384
+ maxWidth: calculatedImageWidth
31385
+ }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og9 = metadata.og) !== null && _metadata$og9 !== void 0 && _metadata$og9.title ? (/*#__PURE__*/React__default.createElement(Title, {
31386
+ maxWidth: calculatedImageWidth
31387
+ }, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && (_metadata$og0$favicon = _metadata$og0.favicon) !== null && _metadata$og0$favicon !== void 0 && _metadata$og0$favicon.url && !faviconLoadError ? (/*#__PURE__*/React__default.createElement(Favicon, {
31388
+ src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : (_metadata$og1$favicon = _metadata$og1.favicon) === null || _metadata$og1$favicon === void 0 ? void 0 : _metadata$og1$favicon.url,
31337
31389
  onLoad: function onLoad() {
31338
31390
  return setFaviconLoadError(false);
31339
31391
  },
31340
31392
  onError: function onError() {
31341
31393
  return setFaviconLoadError(true);
31342
31394
  }
31343
- })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? /*#__PURE__*/React__default.createElement(Desc, null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description) : null)) : null));
31395
+ })) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og10 = metadata.og) === null || _metadata$og10 === void 0 ? void 0 : _metadata$og10.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og11 = metadata.og) !== null && _metadata$og11 !== void 0 && _metadata$og11.description ? (/*#__PURE__*/React__default.createElement(Desc, {
31396
+ maxWidth: calculatedImageWidth
31397
+ }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description)) : null)) : null));
31344
31398
  };
31345
31399
  var OGMetadataContainer = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n min-width: inherit;\n max-width: inherit;\n display: grid;\n grid-template-columns: 1fr;\n background-color: rgba(0, 0, 0, 0.034);\n border-radius: 6px;\n margin-bottom: 0.4rem;\n margin: 0 auto;\n margin-bottom: ", ";\n &:hover {\n background-color: rgba(0, 0, 0, 0.1);\n cursor: pointer;\n }\n"])), function (_ref2) {
31346
31400
  var showOGMetadata = _ref2.showOGMetadata;
31347
31401
  return showOGMetadata ? '0.8rem' : '0';
31348
31402
  });
31349
- var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n max-height: 200px;\n width: 100%;\n margin: 0 auto;\n padding: ", ";\n height: ", ";\n transition: height 0.2s ease;\n"])), function (_ref3) {
31350
- var showOGMetadata = _ref3.showOGMetadata;
31351
- return showOGMetadata ? '0.3rem' : '0';
31403
+ var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n max-height: ", ";\n opacity: ", ";\n overflow: hidden;\n width: 100%;\n margin: 0 auto;\n padding: ", ";\n height: ", ";\n transition: height 0.2s ease;\n"])), function (_ref3) {
31404
+ var width = _ref3.width;
31405
+ return width + "px";
31352
31406
  }, function (_ref4) {
31353
- var showOGMetadata = _ref4.showOGMetadata;
31354
- return showOGMetadata ? '200px' : '0';
31355
- });
31356
- var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n width: 80%;\n padding: 0.5rem;\n margin: 0;\n"])));
31357
- var Url = styled.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n margin: 0 0 12px 0;\n color: gray;\n"])));
31358
- var Title = styled.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n font-weight: bold;\n font-size: 13px;\n padding: 0;\n display: flex;\n align-items: center;\n"])));
31359
- var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n"])));
31360
- var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n max-height: 100%;\n width: 100%;\n height: 200px;\n object-fit: cover;\n transition: height 0.2s ease;\n"])));
31361
- var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])));
31407
+ var height = _ref4.height;
31408
+ return height + "px";
31409
+ }, function (_ref5) {
31410
+ var showOGMetadata = _ref5.showOGMetadata;
31411
+ return showOGMetadata ? 1 : 0;
31412
+ }, function (_ref6) {
31413
+ var showOGMetadata = _ref6.showOGMetadata;
31414
+ return showOGMetadata ? '0.3rem' : '0';
31415
+ }, function (_ref7) {
31416
+ var showOGMetadata = _ref7.showOGMetadata,
31417
+ height = _ref7.height;
31418
+ return showOGMetadata ? height + "px" : '0';
31419
+ });
31420
+ var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n width: 80%;\n padding: 0.5rem;\n margin: 0;\n transition: all 0.2s ease;\n"])));
31421
+ var Url = styled.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n margin: 0 0 12px 0;\n color: gray;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref8) {
31422
+ var maxWidth = _ref8.maxWidth;
31423
+ return maxWidth + "px";
31424
+ });
31425
+ var Title = styled.p(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n font-weight: bold;\n font-size: 13px;\n padding: 0;\n display: flex;\n align-items: center;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref9) {
31426
+ var maxWidth = _ref9.maxWidth;
31427
+ return maxWidth + "px";
31428
+ });
31429
+ var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n max-width: ", ";\n transition: all 0.2s ease;\n"])), function (_ref0) {
31430
+ var maxWidth = _ref0.maxWidth;
31431
+ return maxWidth + "px";
31432
+ });
31433
+ var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n min-width: ", ";\n max-height: ", ";\n min-height: ", ";\n width: ", ";\n height: ", ";\n object-fit: cover;\n transition: height 0.2s ease;\n"])), function (_ref1) {
31434
+ var width = _ref1.width;
31435
+ return width + "px";
31436
+ }, function (_ref10) {
31437
+ var width = _ref10.width;
31438
+ return width + "px";
31439
+ }, function (_ref11) {
31440
+ var height = _ref11.height;
31441
+ return height + "px";
31442
+ }, function (_ref12) {
31443
+ var height = _ref12.height;
31444
+ return height + "px";
31445
+ }, function (_ref13) {
31446
+ var width = _ref13.width;
31447
+ return width + "px";
31448
+ }, function (_ref14) {
31449
+ var height = _ref14.height;
31450
+ return height + "px";
31451
+ });
31452
+ var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n transition: all 0.2s ease;\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])));
31362
31453
 
31363
31454
  var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i;
31364
31455
  var MessageBody = function MessageBody(_ref) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.7.1-beta.12",
3
+ "version": "1.7.1-beta.14",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",