sceyt-chat-react-uikit 1.7.4-beta.6 → 1.7.4-beta.8

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.
package/index.modern.js CHANGED
@@ -10302,6 +10302,11 @@ var setPendingMessage = function setPendingMessage(channelId, pendingMessage) {
10302
10302
  var getPendingMessagesMap = function getPendingMessagesMap() {
10303
10303
  return pendingMessagesMap;
10304
10304
  };
10305
+ var clearPendingMessagesMap = function clearPendingMessagesMap() {
10306
+ Object.keys(pendingMessagesMap).forEach(function (channelId) {
10307
+ delete pendingMessagesMap[channelId];
10308
+ });
10309
+ };
10305
10310
  var draftMessagesMap = {};
10306
10311
  var audioRecordingMap = {};
10307
10312
  var getDraftMessageFromMap = function getDraftMessageFromMap(channelId) {
@@ -10815,7 +10820,6 @@ var _messageSlice$actions = messageSlice.actions,
10815
10820
  removeSelectedMessage = _messageSlice$actions.removeSelectedMessage,
10816
10821
  clearSelectedMessages = _messageSlice$actions.clearSelectedMessages,
10817
10822
  setOGMetadata = _messageSlice$actions.setOGMetadata,
10818
- updateOGMetadata = _messageSlice$actions.updateOGMetadata,
10819
10823
  setMessageMarkers = _messageSlice$actions.setMessageMarkers,
10820
10824
  setMessagesMarkersLoadingState = _messageSlice$actions.setMessagesMarkersLoadingState,
10821
10825
  updateMessagesMarkers = _messageSlice$actions.updateMessagesMarkers;
@@ -11980,12 +11984,6 @@ function setOGMetadataAC(url, metadata) {
11980
11984
  metadata: metadata
11981
11985
  });
11982
11986
  }
11983
- function updateOGMetadataAC(url, metadata) {
11984
- return updateOGMetadata({
11985
- url: url,
11986
- metadata: metadata
11987
- });
11988
- }
11989
11987
  function setUpdateMessageAttachmentAC(url, attachmentUrl) {
11990
11988
  return updateMessageAttachment({
11991
11989
  url: url,
@@ -32343,7 +32341,7 @@ var MessageStatusUpdated = styled.span(_templateObject4$m || (_templateObject4$m
32343
32341
  return props.color;
32344
32342
  });
32345
32343
 
32346
- var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$e, _templateObject8$d;
32344
+ var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$i, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7;
32347
32345
  var validateUrl = function validateUrl(url) {
32348
32346
  try {
32349
32347
  var urlObj = new URL(url);
@@ -32353,10 +32351,37 @@ var validateUrl = function validateUrl(url) {
32353
32351
  }
32354
32352
  };
32355
32353
  var OGMetadata = function OGMetadata(_ref) {
32356
- 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;
32354
+ var _metadata$og7, _metadata$og7$image, _metadata$og7$image$, _metadata$og9, _metadata$og9$favicon, _metadata$og13, _metadata$og14, _metadata$og15;
32357
32355
  var attachments = _ref.attachments,
32358
32356
  state = _ref.state,
32359
32357
  incoming = _ref.incoming,
32358
+ _ref$ogShowUrl = _ref.ogShowUrl,
32359
+ ogShowUrl = _ref$ogShowUrl === void 0 ? false : _ref$ogShowUrl,
32360
+ _ref$ogShowTitle = _ref.ogShowTitle,
32361
+ ogShowTitle = _ref$ogShowTitle === void 0 ? true : _ref$ogShowTitle,
32362
+ _ref$ogShowDescriptio = _ref.ogShowDescription,
32363
+ ogShowDescription = _ref$ogShowDescriptio === void 0 ? true : _ref$ogShowDescriptio,
32364
+ _ref$ogShowFavicon = _ref.ogShowFavicon,
32365
+ ogShowFavicon = _ref$ogShowFavicon === void 0 ? true : _ref$ogShowFavicon,
32366
+ _ref$order = _ref.order,
32367
+ order = _ref$order === void 0 ? {
32368
+ image: 1,
32369
+ title: 2,
32370
+ description: 3,
32371
+ link: 4
32372
+ } : _ref$order,
32373
+ _ref$maxWidth = _ref.maxWidth,
32374
+ maxWidth = _ref$maxWidth === void 0 ? 400 : _ref$maxWidth,
32375
+ maxHeight = _ref.maxHeight,
32376
+ ogContainerBorderRadius = _ref.ogContainerBorderRadius,
32377
+ ogContainerPadding = _ref.ogContainerPadding,
32378
+ ogContainerClassName = _ref.ogContainerClassName,
32379
+ _ref$ogContainerShowB = _ref.ogContainerShowBackground,
32380
+ ogContainerShowBackground = _ref$ogContainerShowB === void 0 ? true : _ref$ogContainerShowB,
32381
+ ogContainerBackground = _ref.ogContainerBackground,
32382
+ _ref$infoPadding = _ref.infoPadding,
32383
+ infoPadding = _ref$infoPadding === void 0 ? '0 8px' : _ref$infoPadding,
32384
+ ogContainerMargin = _ref.ogContainerMargin,
32360
32385
  _ref$target = _ref.target,
32361
32386
  target = _ref$target === void 0 ? '_blank' : _ref$target;
32362
32387
  var dispatch = useDispatch();
@@ -32365,7 +32390,8 @@ var OGMetadata = function OGMetadata(_ref) {
32365
32390
  });
32366
32391
  var _useColor = useColors(),
32367
32392
  incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
32368
- outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X];
32393
+ outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X],
32394
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
32369
32395
  var attachment = useMemo(function () {
32370
32396
  return attachments.find(function (attachment) {
32371
32397
  return attachment.type === attachmentTypes.link;
@@ -32373,28 +32399,25 @@ var OGMetadata = function OGMetadata(_ref) {
32373
32399
  }, [attachments]);
32374
32400
  var metadata = useMemo(function () {
32375
32401
  return oGMetadata[attachment === null || attachment === void 0 ? void 0 : attachment.url] || null;
32376
- }, [oGMetadata, attachment === null || attachment === void 0 ? void 0 : attachment.url]);
32402
+ }, [oGMetadata, attachment]);
32377
32403
  var _useState = useState(false),
32378
32404
  imageLoadError = _useState[0],
32379
32405
  setImageLoadError = _useState[1];
32380
32406
  var _useState2 = useState(false),
32381
- faviconLoadError = _useState2[0],
32382
- setFaviconLoadError = _useState2[1];
32383
- var _useState3 = useState(false),
32384
- shouldAnimate = _useState3[0],
32385
- setShouldAnimate = _useState3[1];
32407
+ shouldAnimate = _useState2[0],
32408
+ setShouldAnimate = _useState2[1];
32386
32409
  var handleMetadata = useCallback(function (metadata) {
32387
32410
  if (metadata) {
32388
32411
  dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata));
32389
32412
  } else {
32390
32413
  dispatch(setOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, null));
32391
32414
  }
32392
- }, []);
32415
+ }, [dispatch, attachment]);
32393
32416
  var ogMetadataQueryBuilder = useCallback(function (url) {
32394
32417
  try {
32395
32418
  var client = getClient();
32396
32419
  var _temp3 = function () {
32397
- if (client) {
32420
+ if (client && client.connectionState === CONNECTION_STATUS.CONNECTED) {
32398
32421
  var _temp2 = _catch(function () {
32399
32422
  var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
32400
32423
  return Promise.resolve(queryBuilder.build()).then(function (query) {
@@ -32441,7 +32464,7 @@ var OGMetadata = function OGMetadata(_ref) {
32441
32464
  });
32442
32465
  });
32443
32466
  }, function () {
32444
- console.log('Failed to fetch OG metadata');
32467
+ console.log('Failed to fetch OG metadata', url);
32445
32468
  handleMetadata(null);
32446
32469
  });
32447
32470
  if (_temp2 && _temp2.then) return _temp2.then(function () {});
@@ -32453,7 +32476,7 @@ var OGMetadata = function OGMetadata(_ref) {
32453
32476
  } catch (e) {
32454
32477
  return Promise.reject(e);
32455
32478
  }
32456
- }, []);
32479
+ }, [handleMetadata]);
32457
32480
  useEffect(function () {
32458
32481
  if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url && !metadata) {
32459
32482
  setShouldAnimate(true);
@@ -32474,7 +32497,7 @@ var OGMetadata = function OGMetadata(_ref) {
32474
32497
  });
32475
32498
  }
32476
32499
  }
32477
- }, [attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
32500
+ }, [attachment, metadata, handleMetadata, ogMetadataQueryBuilder]);
32478
32501
  var ogUrl = useMemo(function () {
32479
32502
  var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
32480
32503
  var urlObj = validateUrl(url);
@@ -32482,132 +32505,206 @@ var OGMetadata = function OGMetadata(_ref) {
32482
32505
  return urlObj.hostname;
32483
32506
  }
32484
32507
  return url;
32485
- }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
32508
+ }, [attachment]);
32486
32509
  var showOGMetadata = useMemo(function () {
32487
- var _metadata$og2, _metadata$og3;
32488
- return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : _metadata$og2.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
32510
+ var _metadata$og2, _metadata$og3, _metadata$og4, _metadata$og4$image, _metadata$og4$image$, _metadata$og5, _metadata$og5$favicon;
32511
+ return state !== 'deleted' && ((metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : _metadata$og2.title) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og4 = metadata.og) === null || _metadata$og4 === void 0 ? void 0 : (_metadata$og4$image = _metadata$og4.image) === null || _metadata$og4$image === void 0 ? void 0 : (_metadata$og4$image$ = _metadata$og4$image[0]) === null || _metadata$og4$image$ === void 0 ? void 0 : _metadata$og4$image$.url) || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$favicon = _metadata$og5.favicon) === null || _metadata$og5$favicon === void 0 ? void 0 : _metadata$og5$favicon.url)) && metadata;
32489
32512
  }, [state, metadata]);
32490
32513
  var calculatedImageHeight = useMemo(function () {
32491
- if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth)) {
32514
+ if (!(metadata !== null && metadata !== void 0 && metadata.imageWidth) || !(metadata !== null && metadata !== void 0 && metadata.imageHeight)) {
32492
32515
  return 0;
32493
32516
  }
32494
- return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / 400);
32495
- }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
32496
- return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
32517
+ return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / maxWidth);
32518
+ }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight, maxWidth]);
32519
+ var hasImage = useMemo(function () {
32520
+ var _metadata$og6, _metadata$og6$image, _metadata$og6$image$;
32521
+ return (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) && !imageLoadError;
32522
+ }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og7 = metadata.og) === null || _metadata$og7 === void 0 ? void 0 : (_metadata$og7$image = _metadata$og7.image) === null || _metadata$og7$image === void 0 ? void 0 : (_metadata$og7$image$ = _metadata$og7$image[0]) === null || _metadata$og7$image$ === void 0 ? void 0 : _metadata$og7$image$.url, imageLoadError]);
32523
+ var faviconUrl = useMemo(function () {
32524
+ var _metadata$og8, _metadata$og8$favicon;
32525
+ return 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;
32526
+ }, [metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : (_metadata$og9$favicon = _metadata$og9.favicon) === null || _metadata$og9$favicon === void 0 ? void 0 : _metadata$og9$favicon.url]);
32527
+ var resolvedOrder = useMemo(function () {
32528
+ return order || {
32529
+ image: 1,
32530
+ title: 2,
32531
+ description: 3,
32532
+ link: 4
32533
+ };
32534
+ }, [order]);
32535
+ var elements = useMemo(function () {
32536
+ var _resolvedOrder$image, _metadata$og0, _metadata$og0$image, _metadata$og0$image$, _resolvedOrder$title, _metadata$og1, _metadata$og10, _resolvedOrder$descri, _metadata$og11, _metadata$og12, _resolvedOrder$link;
32537
+ return [hasImage ? {
32538
+ key: 'image',
32539
+ order: (_resolvedOrder$image = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.image) != null ? _resolvedOrder$image : 1,
32540
+ render: (/*#__PURE__*/React__default.createElement(ImageContainer, {
32541
+ showOGMetadata: !!showOGMetadata,
32542
+ containerWidth: maxWidth,
32543
+ containerHeight: calculatedImageHeight,
32544
+ shouldAnimate: shouldAnimate,
32545
+ maxWidth: maxWidth,
32546
+ maxHeight: maxHeight || calculatedImageHeight
32547
+ }, /*#__PURE__*/React__default.createElement(Img, {
32548
+ src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og0 = metadata.og) === null || _metadata$og0 === void 0 ? void 0 : (_metadata$og0$image = _metadata$og0.image) === null || _metadata$og0$image === void 0 ? void 0 : (_metadata$og0$image$ = _metadata$og0$image[0]) === null || _metadata$og0$image$ === void 0 ? void 0 : _metadata$og0$image$.url,
32549
+ alt: 'OG image',
32550
+ shouldAnimate: shouldAnimate
32551
+ })))
32552
+ } : null, {
32553
+ key: 'title',
32554
+ order: (_resolvedOrder$title = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.title) != null ? _resolvedOrder$title : 2,
32555
+ render: ogShowTitle && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.title) && (/*#__PURE__*/React__default.createElement(Title$2, {
32556
+ maxWidth: maxWidth,
32557
+ shouldAnimate: shouldAnimate,
32558
+ padding: infoPadding
32559
+ }, /*#__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)))
32560
+ }, {
32561
+ key: 'description',
32562
+ order: (_resolvedOrder$descri = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.description) != null ? _resolvedOrder$descri : 3,
32563
+ render: ogShowDescription && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og11 = metadata.og) === null || _metadata$og11 === void 0 ? void 0 : _metadata$og11.description) && (/*#__PURE__*/React__default.createElement(Desc, {
32564
+ maxWidth: maxWidth,
32565
+ shouldAnimate: shouldAnimate,
32566
+ color: textSecondary,
32567
+ padding: infoPadding
32568
+ }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og12 = metadata.og) === null || _metadata$og12 === void 0 ? void 0 : _metadata$og12.description))
32569
+ }, {
32570
+ key: 'link',
32571
+ order: (_resolvedOrder$link = resolvedOrder === null || resolvedOrder === void 0 ? void 0 : resolvedOrder.link) != null ? _resolvedOrder$link : 4,
32572
+ render: ogShowUrl && (/*#__PURE__*/React__default.createElement(Url, {
32573
+ maxWidth: maxWidth,
32574
+ shouldAnimate: shouldAnimate,
32575
+ padding: infoPadding
32576
+ }, ogUrl))
32577
+ }].filter(function (el) {
32578
+ return !!el;
32579
+ }).sort(function (a, b) {
32580
+ var _a$order, _b$order;
32581
+ return ((_a$order = a.order) != null ? _a$order : 0) - ((_b$order = b.order) != null ? _b$order : 0);
32582
+ });
32583
+ }, [hasImage, resolvedOrder, showOGMetadata, maxWidth, calculatedImageHeight, maxHeight, metadata === null || metadata === void 0 ? void 0 : (_metadata$og13 = metadata.og) === null || _metadata$og13 === void 0 ? void 0 : _metadata$og13.image, shouldAnimate, ogShowTitle, metadata === null || metadata === void 0 ? void 0 : (_metadata$og14 = metadata.og) === null || _metadata$og14 === void 0 ? void 0 : _metadata$og14.title, infoPadding, ogShowDescription, metadata === null || metadata === void 0 ? void 0 : (_metadata$og15 = metadata.og) === null || _metadata$og15 === void 0 ? void 0 : _metadata$og15.description, textSecondary, ogShowUrl, ogUrl]);
32584
+ var textContent = useMemo(function () {
32585
+ return /*#__PURE__*/React__default.createElement(OGText, {
32586
+ shouldAnimate: shouldAnimate,
32587
+ margin: ogContainerShowBackground
32588
+ }, elements.filter(function (el) {
32589
+ return el.key !== 'image';
32590
+ }).map(function (el) {
32591
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
32592
+ key: el.key
32593
+ }, el.render);
32594
+ }));
32595
+ }, [elements, shouldAnimate, ogContainerShowBackground]);
32596
+ var content = useMemo(function () {
32597
+ return hasImage ? (/*#__PURE__*/React__default.createElement(OGText, {
32598
+ shouldAnimate: shouldAnimate,
32599
+ margin: ogContainerShowBackground
32600
+ }, elements.map(function (el) {
32601
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
32602
+ key: el.key
32603
+ }, el.render);
32604
+ }))) : ogShowFavicon && faviconUrl ? (/*#__PURE__*/React__default.createElement(OGRow, null, /*#__PURE__*/React__default.createElement(OGTextWrapper, null, textContent), /*#__PURE__*/React__default.createElement(FaviconContainer, {
32605
+ "aria-hidden": 'true'
32606
+ }, /*#__PURE__*/React__default.createElement(FaviconImg, {
32607
+ src: faviconUrl,
32608
+ alt: ''
32609
+ })))) : textContent;
32610
+ }, [hasImage, elements, shouldAnimate, ogContainerShowBackground, ogShowFavicon, faviconUrl, textContent]);
32611
+ return /*#__PURE__*/React__default.createElement("div", {
32612
+ className: 'ogmetadata-container'
32613
+ }, /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
32497
32614
  showOGMetadata: !!showOGMetadata,
32498
- bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX
32499
- }, /*#__PURE__*/React__default.createElement("div", {
32500
- onClick: function onClick() {
32501
- window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, target);
32502
- },
32503
- style: {
32504
- width: showOGMetadata ? '100%' : 'auto'
32505
- }
32506
- }, /*#__PURE__*/React__default.createElement(ImageContainer, {
32507
- showOGMetadata: !!showOGMetadata && !imageLoadError,
32508
- containerWidth: 400,
32509
- containerHeight: calculatedImageHeight,
32510
- shouldAnimate: shouldAnimate
32511
- }, 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 && !imageLoadError ? (/*#__PURE__*/React__default.createElement(Img, {
32512
- 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,
32513
- alt: 'OG metadata image',
32514
- imageWidth: 400,
32515
- imageHeight: calculatedImageHeight,
32516
- shouldAnimate: shouldAnimate
32517
- })) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, {
32518
- shouldAnimate: shouldAnimate
32519
- }, /*#__PURE__*/React__default.createElement(Url, {
32520
- maxWidth: 400,
32521
- shouldAnimate: shouldAnimate
32522
- }, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title$2, {
32523
- maxWidth: 400,
32524
- shouldAnimate: shouldAnimate
32525
- }, 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, {
32526
- shouldAnimate: shouldAnimate,
32527
- 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,
32528
- onLoad: function onLoad() {
32529
- return setFaviconLoadError(false);
32530
- },
32531
- onError: function onError() {
32532
- dispatch(updateOGMetadataAC(attachment === null || attachment === void 0 ? void 0 : attachment.url, _extends({}, metadata, {
32533
- og: _extends({}, metadata === null || metadata === void 0 ? void 0 : metadata.og, {
32534
- favicon: {
32535
- url: ''
32536
- }
32537
- })
32538
- })));
32539
- setFaviconLoadError(true);
32540
- }
32541
- })) : 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, {
32542
- maxWidth: 400,
32543
- shouldAnimate: shouldAnimate
32544
- }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description)) : null)) : null));
32545
- };
32546
- var OGMetadataContainer = styled.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n min-width: inherit;\n max-width: inherit;\n display: grid;\n grid-template-columns: 1fr;\n background-color: ", ";\n border-radius: 6px;\n margin-bottom: 0.4rem;\n margin: 0 auto;\n margin-bottom: ", ";\n &:hover {\n opacity: 0.9;\n cursor: pointer;\n }\n"])), function (_ref2) {
32547
- var bgColor = _ref2.bgColor;
32548
- return bgColor;
32615
+ bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX,
32616
+ showBackground: ogContainerShowBackground,
32617
+ customBg: ogContainerBackground,
32618
+ borderRadius: ogContainerBorderRadius,
32619
+ padding: ogContainerPadding,
32620
+ className: ogContainerClassName,
32621
+ containerMargin: ogContainerMargin,
32622
+ as: "a",
32623
+ href: attachment === null || attachment === void 0 ? void 0 : attachment.url,
32624
+ target: target,
32625
+ rel: target === '_blank' ? 'noopener noreferrer' : undefined
32626
+ }, content));
32627
+ };
32628
+ 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";
32629
+ var OGMetadataContainer = styled.div(_templateObject$C || (_templateObject$C = _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) {
32630
+ var showBackground = _ref2.showBackground,
32631
+ customBg = _ref2.customBg,
32632
+ bgColor = _ref2.bgColor;
32633
+ return showBackground ? customBg != null ? customBg : bgColor : 'transparent';
32549
32634
  }, function (_ref3) {
32550
- var showOGMetadata = _ref3.showOGMetadata;
32551
- return showOGMetadata ? '0.8rem' : '0';
32552
- });
32553
- var ImageContainer = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n ", "\n\n ", "\n\n opacity: ", ";\n overflow: hidden;\n margin: 0 auto;\n padding: ", ";\n ", "\n"])), function (_ref4) {
32554
- var containerWidth = _ref4.containerWidth;
32555
- return containerWidth ? "\n max-width: " + (containerWidth + "px") + ";\n " : "\n max-width: 100%;\n width: 100%;\n ";
32635
+ var borderRadius = _ref3.borderRadius;
32636
+ return borderRadius !== undefined ? borderRadius : '8px';
32637
+ }, function (_ref4) {
32638
+ var containerMargin = _ref4.containerMargin;
32639
+ return containerMargin != null ? containerMargin : '0.8rem auto 0';
32556
32640
  }, function (_ref5) {
32557
- var containerHeight = _ref5.containerHeight,
32558
- showOGMetadata = _ref5.showOGMetadata;
32559
- return containerHeight ? "\n max-height: " + (containerHeight + "px") + ";\n height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n " : "\n height: 0;\n ";
32641
+ var showOGMetadata = _ref5.showOGMetadata;
32642
+ return showOGMetadata ? '0.4rem' : '0';
32560
32643
  }, function (_ref6) {
32561
- var showOGMetadata = _ref6.showOGMetadata,
32562
- containerHeight = _ref6.containerHeight;
32563
- return showOGMetadata && containerHeight ? 1 : 0;
32564
- }, function (_ref7) {
32565
- var showOGMetadata = _ref7.showOGMetadata,
32566
- containerHeight = _ref7.containerHeight;
32567
- return showOGMetadata && containerHeight ? '4px' : '0';
32568
- }, function (_ref8) {
32569
- var shouldAnimate = _ref8.shouldAnimate;
32570
- return shouldAnimate && "\n transition: height 0.2s ease;\n ";
32644
+ var padding = _ref6.padding;
32645
+ return padding != null ? padding : '0';
32571
32646
  });
32572
- var OGText = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n padding: 0.5rem;\n margin: 0;\n ", "\n"])), function (_ref9) {
32573
- var shouldAnimate = _ref9.shouldAnimate;
32574
- return shouldAnimate && "\n transition: all 0.2s ease;\n ";
32575
- });
32576
- var Url = styled.p(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n margin: 0 0 12px 0;\n color: gray;\n ", "\n ", "\n"])), function (_ref0) {
32577
- var maxWidth = _ref0.maxWidth;
32578
- return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
32647
+ var ImageContainer = styled.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: ", ";\n opacity: ", ";\n margin: 0 auto;\n overflow: hidden;\n ", "\n"])), sharedKeyframes, function (_ref7) {
32648
+ var containerHeight = _ref7.containerHeight;
32649
+ return containerHeight ? containerHeight + "px" : '0px';
32650
+ }, function (_ref8) {
32651
+ var showOGMetadata = _ref8.showOGMetadata,
32652
+ containerHeight = _ref8.containerHeight;
32653
+ return showOGMetadata && containerHeight ? 1 : 0;
32654
+ }, function (_ref9) {
32655
+ var shouldAnimate = _ref9.shouldAnimate,
32656
+ showOGMetadata = _ref9.showOGMetadata,
32657
+ containerHeight = _ref9.containerHeight;
32658
+ return shouldAnimate && showOGMetadata && containerHeight && "\n animation: expandHeight 0.3s ease-out forwards;\n ";
32659
+ });
32660
+ var OGText = styled.div(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n flex-direction: column;\n gap: 0;\n ", "\n ", ";\n"])), sharedKeyframes, function (_ref0) {
32661
+ var shouldAnimate = _ref0.shouldAnimate;
32662
+ return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out forwards;\n ";
32579
32663
  }, function (_ref1) {
32580
- var shouldAnimate = _ref1.shouldAnimate;
32581
- return shouldAnimate && "\n transition: all 0.2s ease;\n ";
32664
+ var margin = _ref1.margin;
32665
+ return margin ? '12px' : '0';
32582
32666
  });
32583
- var Title$2 = styled.p(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n font-weight: bold;\n font-size: 13px;\n padding: 0;\n display: flex;\n align-items: center;\n ", "\n ", "\n"])), function (_ref10) {
32584
- var maxWidth = _ref10.maxWidth;
32585
- return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
32667
+ var Title$2 = styled.p(_templateObject4$n || (_templateObject4$n = _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) {
32668
+ var padding = _ref10.padding;
32669
+ return padding != null ? padding : '0';
32586
32670
  }, function (_ref11) {
32587
- var shouldAnimate = _ref11.shouldAnimate;
32588
- return shouldAnimate && "\n transition: all 0.2s ease;\n ";
32589
- });
32590
- var Desc = styled.p(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n font-weight: normal;\n font-size: 13px;\n padding: 0;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n ", "\n ", "\n"])), function (_ref12) {
32591
- var maxWidth = _ref12.maxWidth;
32592
- return maxWidth && "\n max-width: " + (maxWidth + "px") + ";\n ";
32593
- }, function (_ref13) {
32594
- var shouldAnimate = _ref13.shouldAnimate;
32595
- return shouldAnimate && "\n transition: all 0.2s ease;\n ";
32596
- });
32597
- var Img = styled.img(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n object-fit: cover;\n ", "\n"])), function (_ref14) {
32598
- var imageWidth = _ref14.imageWidth;
32599
- return imageWidth && "\n max-width: 100%;\n width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n ";
32671
+ var maxWidth = _ref11.maxWidth;
32672
+ return maxWidth && "\n max-width: " + maxWidth + "px;\n ";
32673
+ }, function (_ref12) {
32674
+ var shouldAnimate = _ref12.shouldAnimate;
32675
+ return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out 0.1s backwards;\n ";
32676
+ });
32677
+ var Desc = styled.p(_templateObject5$i || (_templateObject5$i = _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) {
32678
+ var padding = _ref13.padding;
32679
+ return padding != null ? padding : '0';
32680
+ }, function (_ref14) {
32681
+ var color = _ref14.color;
32682
+ return color;
32600
32683
  }, function (_ref15) {
32601
- var imageHeight = _ref15.imageHeight;
32602
- return imageHeight && "\n max-height: " + (imageHeight + "px") + ";\n min-height: " + (imageHeight + "px") + ";\n height: " + (imageHeight + "px") + ";\n ";
32684
+ var maxWidth = _ref15.maxWidth;
32685
+ return maxWidth && "\n max-width: " + maxWidth + "px;\n ";
32603
32686
  }, function (_ref16) {
32604
32687
  var shouldAnimate = _ref16.shouldAnimate;
32605
- return shouldAnimate && "\n transition: height 0.2s ease;\n ";
32606
- });
32607
- var Favicon = styled.img(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n ", "\n width: 24px;\n height: 24px;\n object-fit: contain;\n margin-right: 4px;\n"])), function (_ref17) {
32608
- var shouldAnimate = _ref17.shouldAnimate;
32609
- return shouldAnimate && "\n transition: all 0.2s ease;\n ";
32610
- });
32688
+ return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out 0.2s backwards;\n ";
32689
+ });
32690
+ var Url = styled.p(_templateObject6$g || (_templateObject6$g = _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) {
32691
+ var padding = _ref17.padding;
32692
+ return padding != null ? padding : '0';
32693
+ }, function (_ref18) {
32694
+ var maxWidth = _ref18.maxWidth;
32695
+ return maxWidth && "\n max-width: " + maxWidth + "px;\n ";
32696
+ }, function (_ref19) {
32697
+ var shouldAnimate = _ref19.shouldAnimate;
32698
+ return shouldAnimate && "\n animation: fadeInSlideUp 0.3s ease-out 0.3s backwards;\n ";
32699
+ });
32700
+ var Img = styled.img(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n ", "\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n border-radius: inherit;\n ", "\n"])), sharedKeyframes, function (_ref20) {
32701
+ var shouldAnimate = _ref20.shouldAnimate;
32702
+ return shouldAnimate && "\n animation: fadeIn 0.4s ease-out forwards;\n ";
32703
+ });
32704
+ var OGRow = styled.div(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n"])));
32705
+ var OGTextWrapper = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n flex: 1 1 auto;\n"])));
32706
+ var FaviconContainer = styled.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n width: 52px;\n height: 52px;\n border-radius: 8px;\n overflow: hidden;\n margin: 12px;\n flex: 0 0 52px;\n"])));
32707
+ var FaviconImg = styled.img(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n"])));
32611
32708
 
32612
32709
  var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$j;
32613
32710
  var MessageBody = function MessageBody(_ref) {
@@ -32752,6 +32849,7 @@ var MessageBody = function MessageBody(_ref) {
32752
32849
  messageTextRef = _ref.messageTextRef,
32753
32850
  handleOpenUserProfile = _ref.handleOpenUserProfile,
32754
32851
  shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
32852
+ ogMetadataProps = _ref.ogMetadataProps,
32755
32853
  unsupportedMessage = _ref.unsupportedMessage;
32756
32854
  var _useColor = useColors(),
32757
32855
  accentColor = _useColor[THEME_COLORS.ACCENT],
@@ -32799,6 +32897,10 @@ var MessageBody = function MessageBody(_ref) {
32799
32897
  var linkAttachment = message.attachments.find(function (a) {
32800
32898
  return a.type === attachmentTypes.link;
32801
32899
  });
32900
+ var ogContainerOrder = ogMetadataProps && ogMetadataProps.ogLayoutOrder || 'og-first';
32901
+ var ogContainerFirst = useMemo(function () {
32902
+ return ogContainerOrder === 'og-first';
32903
+ }, [ogContainerOrder]);
32802
32904
  var messageOwnerIsNotCurrentUser = !!(message.user && message.user.id !== user.id && message.user.id);
32803
32905
  var mediaAttachment = useMemo(function () {
32804
32906
  return withAttachments && message.attachments.find(function (attachment) {
@@ -32985,10 +33087,28 @@ var MessageBody = function MessageBody(_ref) {
32985
33087
  linkColor: linkColor,
32986
33088
  unsupportedMessage: unsupportedMessage,
32987
33089
  unsupportedMessageColor: textSecondary
32988
- }, linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
33090
+ }, ogContainerFirst && linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
33091
+ maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
33092
+ maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
32989
33093
  attachments: [linkAttachment],
32990
33094
  state: message.state,
32991
- incoming: message.incoming
33095
+ incoming: message.incoming,
33096
+ ogShowUrl: ogMetadataProps ? ogMetadataProps.ogShowUrl : undefined,
33097
+ ogShowTitle: ogMetadataProps ? ogMetadataProps.ogShowTitle : undefined,
33098
+ ogShowDescription: ogMetadataProps ? ogMetadataProps.ogShowDescription : undefined,
33099
+ ogShowFavicon: ogMetadataProps ? ogMetadataProps.ogShowFavicon : undefined,
33100
+ order: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.order) || {
33101
+ image: 3,
33102
+ title: 1,
33103
+ description: 2,
33104
+ link: 4
33105
+ },
33106
+ ogContainerBorderRadius: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBorderRadius,
33107
+ ogContainerPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerPadding,
33108
+ ogContainerClassName: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerClassName,
33109
+ ogContainerShowBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerShowBackground,
33110
+ ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
33111
+ infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding
32992
33112
  })), /*#__PURE__*/React__default.createElement("span", {
32993
33113
  ref: messageTextRef
32994
33114
  }, MessageTextFormat({
@@ -33003,7 +33123,29 @@ var MessageBody = function MessageBody(_ref) {
33003
33123
  unsupportedMessage: unsupportedMessage
33004
33124
  })), !withAttachments && message.state === MESSAGE_STATUS.DELETE ? (/*#__PURE__*/React__default.createElement(MessageStatusDeleted$1, {
33005
33125
  color: textSecondary
33006
- }, " Message was deleted. ")) : '', messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
33126
+ }, " Message was deleted. ")) : '', !ogContainerFirst && linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
33127
+ maxWidth: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxWidth) || 400,
33128
+ maxHeight: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.maxHeight,
33129
+ attachments: [linkAttachment],
33130
+ state: message.state,
33131
+ incoming: message.incoming,
33132
+ ogShowUrl: ogMetadataProps ? ogMetadataProps.ogShowUrl : undefined,
33133
+ ogShowTitle: ogMetadataProps ? ogMetadataProps.ogShowTitle : undefined,
33134
+ ogShowDescription: ogMetadataProps ? ogMetadataProps.ogShowDescription : undefined,
33135
+ ogShowFavicon: ogMetadataProps ? ogMetadataProps.ogShowFavicon : undefined,
33136
+ order: (ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.order) || {
33137
+ image: 1,
33138
+ title: 2,
33139
+ description: 3,
33140
+ link: 4
33141
+ },
33142
+ ogContainerBorderRadius: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBorderRadius,
33143
+ ogContainerPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerPadding,
33144
+ ogContainerClassName: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerClassName,
33145
+ ogContainerShowBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerShowBackground,
33146
+ ogContainerBackground: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.ogContainerBackground,
33147
+ infoPadding: ogMetadataProps === null || ogMetadataProps === void 0 ? void 0 : ogMetadataProps.infoPadding
33148
+ })), messageStatusAndTimePosition === 'onMessage' && !notLinkAttachment && (messageStatusVisible || messageTimeVisible) ? (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
33007
33149
  message: message,
33008
33150
  showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
33009
33151
  messageStatusDisplayingType: messageStatusDisplayingType,
@@ -33087,9 +33229,10 @@ var MessageBody = function MessageBody(_ref) {
33087
33229
  }))));
33088
33230
  };
33089
33231
  var MessageBody$1 = /*#__PURE__*/React__default.memo(MessageBody, function (prevProps, nextProps) {
33090
- return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen);
33232
+ var _prevProps$ogMetadata, _nextProps$ogMetadata, _prevProps$ogMetadata2, _nextProps$ogMetadata2, _prevProps$ogMetadata3, _nextProps$ogMetadata3, _prevProps$ogMetadata4, _nextProps$ogMetadata4, _prevProps$ogMetadata5, _nextProps$ogMetadata5, _prevProps$ogMetadata6, _nextProps$ogMetadata6;
33233
+ return !!(prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.state === nextProps.message.state && prevProps.message.userReactions === nextProps.message.userReactions && prevProps.message.body === nextProps.message.body && prevProps.message.reactionTotals === nextProps.message.reactionTotals && prevProps.message.attachments === nextProps.message.attachments && prevProps.message.userMarkers === nextProps.message.userMarkers && prevProps.prevMessage === nextProps.prevMessage && prevProps.nextMessage === nextProps.nextMessage && prevProps.selectedMessagesMap === nextProps.selectedMessagesMap && prevProps.contactsMap === nextProps.contactsMap && prevProps.connectionStatus === nextProps.connectionStatus && prevProps.openedMessageMenuId === nextProps.openedMessageMenuId && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.showSenderNameOnDirectChannel === nextProps.showSenderNameOnDirectChannel && prevProps.showSenderNameOnGroupChannel === nextProps.showSenderNameOnGroupChannel && prevProps.showSenderNameOnOwnMessages === nextProps.showSenderNameOnOwnMessages && prevProps.messageStatusAndTimePosition === nextProps.messageStatusAndTimePosition && prevProps.messageStatusDisplayingType === nextProps.messageStatusDisplayingType && prevProps.outgoingMessageStyles === nextProps.outgoingMessageStyles && prevProps.incomingMessageStyles === nextProps.incomingMessageStyles && prevProps.ownRepliedMessageBackground === nextProps.ownRepliedMessageBackground && prevProps.incomingRepliedMessageBackground === nextProps.incomingRepliedMessageBackground && prevProps.showMessageStatus === nextProps.showMessageStatus && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.showMessageTime === nextProps.showMessageTime && prevProps.showMessageStatusForEachMessage === nextProps.showMessageStatusForEachMessage && prevProps.showMessageTimeForEachMessage === nextProps.showMessageTimeForEachMessage && prevProps.messageReaction === nextProps.messageReaction && prevProps.editMessage === nextProps.editMessage && prevProps.copyMessage === nextProps.copyMessage && prevProps.replyMessage === nextProps.replyMessage && prevProps.replyMessageInThread === nextProps.replyMessageInThread && prevProps.forwardMessage === nextProps.forwardMessage && prevProps.deleteMessage === nextProps.deleteMessage && prevProps.selectMessage === nextProps.selectMessage && prevProps.allowEditDeleteIncomingMessage === nextProps.allowEditDeleteIncomingMessage && prevProps.reportMessage === nextProps.reportMessage && prevProps.reactionIcon === nextProps.reactionIcon && prevProps.editIcon === nextProps.editIcon && prevProps.copyIcon === nextProps.copyIcon && prevProps.replyIcon === nextProps.replyIcon && prevProps.replyInThreadIcon === nextProps.replyInThreadIcon && prevProps.forwardIcon === nextProps.forwardIcon && prevProps.deleteIcon === nextProps.deleteIcon && prevProps.selectIcon === nextProps.selectIcon && prevProps.starIcon === nextProps.starIcon && prevProps.staredIcon === nextProps.staredIcon && prevProps.reportIcon === nextProps.reportIcon && prevProps.fixEmojiCategoriesTitleOnTop === nextProps.fixEmojiCategoriesTitleOnTop && prevProps.emojisCategoryIconsPosition === nextProps.emojisCategoryIconsPosition && prevProps.emojisContainerBorderRadius === nextProps.emojisContainerBorderRadius && prevProps.reactionIconOrder === nextProps.reactionIconOrder && prevProps.editIconOrder === nextProps.editIconOrder && prevProps.copyIconOrder === nextProps.copyIconOrder && prevProps.replyIconOrder === nextProps.replyIconOrder && prevProps.replyInThreadIconOrder === nextProps.replyInThreadIconOrder && prevProps.forwardIconOrder === nextProps.forwardIconOrder && prevProps.deleteIconOrder === nextProps.deleteIconOrder && prevProps.selectIconOrder === nextProps.selectIconOrder && prevProps.starIconOrder === nextProps.starIconOrder && prevProps.reportIconOrder === nextProps.reportIconOrder && prevProps.reactionIconTooltipText === nextProps.reactionIconTooltipText && prevProps.editIconTooltipText === nextProps.editIconTooltipText && prevProps.copyIconTooltipText === nextProps.copyIconTooltipText && prevProps.replyIconTooltipText === nextProps.replyIconTooltipText && prevProps.replyInThreadIconTooltipText === nextProps.replyInThreadIconTooltipText && prevProps.forwardIconTooltipText === nextProps.forwardIconTooltipText && prevProps.deleteIconTooltipText === nextProps.deleteIconTooltipText && prevProps.selectIconTooltipText === nextProps.selectIconTooltipText && prevProps.starIconTooltipText === nextProps.starIconTooltipText && prevProps.reportIconTooltipText === nextProps.reportIconTooltipText && prevProps.messageActionIconsColor === nextProps.messageActionIconsColor && prevProps.inlineReactionIcon === nextProps.inlineReactionIcon && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.fileAttachmentsBoxWidth === nextProps.fileAttachmentsBoxWidth && prevProps.fileAttachmentsBoxBackground === nextProps.fileAttachmentsBoxBackground && prevProps.fileAttachmentsBoxBorder === nextProps.fileAttachmentsBoxBorder && prevProps.fileAttachmentsTitleColor === nextProps.fileAttachmentsTitleColor && prevProps.fileAttachmentsSizeColor === nextProps.fileAttachmentsSizeColor && prevProps.fileAttachmentsIcon === nextProps.fileAttachmentsIcon && prevProps.imageAttachmentMaxWidth === nextProps.imageAttachmentMaxWidth && prevProps.imageAttachmentMaxHeight === nextProps.imageAttachmentMaxHeight && prevProps.videoAttachmentMaxWidth === nextProps.videoAttachmentMaxWidth && prevProps.videoAttachmentMaxHeight === nextProps.videoAttachmentMaxHeight && prevProps.theme === nextProps.theme && prevProps.messageTextFontSize === nextProps.messageTextFontSize && prevProps.messageTextLineHeight === nextProps.messageTextLineHeight && prevProps.messageActionsShow === nextProps.messageActionsShow && prevProps.emojisPopupOpen === nextProps.emojisPopupOpen && prevProps.emojisPopupPosition === nextProps.emojisPopupPosition && prevProps.frequentlyEmojisOpen === nextProps.frequentlyEmojisOpen && (((_prevProps$ogMetadata = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata === void 0 ? void 0 : _prevProps$ogMetadata.ogLayoutOrder) || 'og-first') === (((_nextProps$ogMetadata = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata === void 0 ? void 0 : _nextProps$ogMetadata.ogLayoutOrder) || 'og-first') && ((_prevProps$ogMetadata2 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata2 === void 0 ? void 0 : _prevProps$ogMetadata2.ogShowUrl) === ((_nextProps$ogMetadata2 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata2 === void 0 ? void 0 : _nextProps$ogMetadata2.ogShowUrl) && ((_prevProps$ogMetadata3 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata3 === void 0 ? void 0 : _prevProps$ogMetadata3.ogShowTitle) === ((_nextProps$ogMetadata3 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata3 === void 0 ? void 0 : _nextProps$ogMetadata3.ogShowTitle) && ((_prevProps$ogMetadata4 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata4 === void 0 ? void 0 : _prevProps$ogMetadata4.ogShowDescription) === ((_nextProps$ogMetadata4 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata4 === void 0 ? void 0 : _nextProps$ogMetadata4.ogShowDescription) && ((_prevProps$ogMetadata5 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata5 === void 0 ? void 0 : _prevProps$ogMetadata5.ogShowFavicon) === ((_nextProps$ogMetadata5 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata5 === void 0 ? void 0 : _nextProps$ogMetadata5.ogShowFavicon) && ((_prevProps$ogMetadata6 = prevProps.ogMetadataProps) === null || _prevProps$ogMetadata6 === void 0 ? void 0 : _prevProps$ogMetadata6.order) === ((_nextProps$ogMetadata6 = nextProps.ogMetadataProps) === null || _nextProps$ogMetadata6 === void 0 ? void 0 : _nextProps$ogMetadata6.order));
33091
33234
  });
33092
- var ForwardedTitle = styled.h3(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-weight: 500;\n font-size: 13px;\n line-height: 16px;\n color: ", ";\n //margin: ", ";\n margin: 0;\n padding: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n\n & > svg {\n margin-right: 4px;\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
33235
+ var ForwardedTitle = styled.h3(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-weight: 500;\n font-size: 13px;\n line-height: 16px;\n color: ", ";\n // margin: ", ";\n margin: 0;\n padding: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n\n & > svg {\n margin-right: 4px;\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
33093
33236
  return props.color;
33094
33237
  }, function (props) {
33095
33238
  return props.withAttachments && props.withBody ? '0' : '0 0 4px';
@@ -33141,7 +33284,7 @@ var FrequentlyEmojisContainer = styled.div(_templateObject5$j || (_templateObjec
33141
33284
  return props.rtlDirection && '0';
33142
33285
  });
33143
33286
 
33144
- var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$b, _templateObject0$a, _templateObject1$7;
33287
+ var _templateObject$E, _templateObject2$z, _templateObject3$t, _templateObject4$p, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8;
33145
33288
  var defaultFormatDate = function defaultFormatDate(date) {
33146
33289
  var m = moment(date);
33147
33290
  if (m.isSame(moment(), 'day')) {
@@ -33537,7 +33680,7 @@ var RowDate = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemp
33537
33680
  var Empty = styled.div(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n color: ", ";\n text-align: center;\n padding: 16px 0;\n font-size: 14px;\n height: calc(100% - 32px);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n"])), function (p) {
33538
33681
  return p.color;
33539
33682
  });
33540
- var DropdownRoot = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: ", ";\n bottom: ", ";\n ", "\n z-index: 15;\n background: ", ";\n box-shadow: 0px 0px 24px 0px #11153929;\n border-radius: 16px;\n direction: initial;\n visibility: ", ";\n"])), function (p) {
33683
+ var DropdownRoot = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: ", ";\n bottom: ", ";\n ", "\n z-index: 15;\n background: ", ";\n box-shadow: 0px 0px 24px 0px #11153929;\n border-radius: 16px;\n direction: initial;\n visibility: ", ";\n"])), function (p) {
33541
33684
  return p.flip ? 'auto' : 'calc(100% + 8px)';
33542
33685
  }, function (p) {
33543
33686
  return p.flip ? 'calc(100% + 8px)' : 'auto';
@@ -33549,7 +33692,7 @@ var DropdownRoot = styled.div(_templateObject9$b || (_templateObject9$b = _tagge
33549
33692
  }, function (p) {
33550
33693
  return p.ready ? 'visible' : 'hidden';
33551
33694
  });
33552
- var Panel = styled.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n background: ", ";\n border-radius: 16px;\n overflow: hidden;\n transition: height 0.25s ease;\n height: ", ";\n width: ", ";\n min-width: ", ";\n display: flex;\n flex-direction: column;\n"])), function (p) {
33695
+ var Panel = styled.div(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n background: ", ";\n border-radius: 16px;\n overflow: hidden;\n transition: height 0.25s ease;\n height: ", ";\n width: ", ";\n min-width: ", ";\n display: flex;\n flex-direction: column;\n"])), function (p) {
33553
33696
  return p.bg;
33554
33697
  }, function (p) {
33555
33698
  return p.open ? Math.min(p.heightPx || 0, parseInt(String(p.maxHeight || '300'), 10) || 300) + "px" : '0';
@@ -33558,9 +33701,9 @@ var Panel = styled.div(_templateObject0$a || (_templateObject0$a = _taggedTempla
33558
33701
  }, function (p) {
33559
33702
  return p.minWidth || '340px';
33560
33703
  });
33561
- var Content = styled.div(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n padding: 16px 12px;\n height: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n"])));
33704
+ var Content = styled.div(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n padding: 16px 12px;\n height: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n"])));
33562
33705
 
33563
- var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$c, _templateObject0$b, _templateObject1$8, _templateObject10$4, _templateObject11$4, _templateObject12$3;
33706
+ var _templateObject$F, _templateObject2$A, _templateObject3$u, _templateObject4$q, _templateObject5$l, _templateObject6$i, _templateObject7$g, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$4, _templateObject11$4, _templateObject12$3;
33564
33707
  var Message$1 = function Message(_ref) {
33565
33708
  var message = _ref.message,
33566
33709
  channel = _ref.channel,
@@ -33714,6 +33857,23 @@ var Message$1 = function Message(_ref) {
33714
33857
  messageTextLineHeight = _ref.messageTextLineHeight,
33715
33858
  messageTimeColorOnAttachment = _ref.messageTimeColorOnAttachment,
33716
33859
  shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
33860
+ _ref$ogMetadataProps = _ref.ogMetadataProps,
33861
+ ogMetadataProps = _ref$ogMetadataProps === void 0 ? {
33862
+ maxWidth: 400,
33863
+ maxHeight: undefined,
33864
+ ogLayoutOrder: 'link-first',
33865
+ ogShowUrl: false,
33866
+ ogShowTitle: true,
33867
+ ogShowDescription: true,
33868
+ ogShowFavicon: true,
33869
+ order: {
33870
+ image: 1,
33871
+ title: 2,
33872
+ description: 3,
33873
+ link: 4
33874
+ },
33875
+ infoPadding: '0 8px'
33876
+ } : _ref$ogMetadataProps,
33717
33877
  _ref$showInfoMessageP = _ref.showInfoMessageProps,
33718
33878
  showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP;
33719
33879
  var _useColor = useColors(),
@@ -34216,6 +34376,7 @@ var Message$1 = function Message(_ref) {
34216
34376
  messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary,
34217
34377
  handleOpenUserProfile: handleOpenUserProfile,
34218
34378
  shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
34379
+ ogMetadataProps: ogMetadataProps,
34219
34380
  unsupportedMessage: unsupportedMessage
34220
34381
  })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
34221
34382
  message: message,
@@ -34358,7 +34519,7 @@ var EmptySelection = styled.span(_templateObject8$f || (_templateObject8$f = _ta
34358
34519
  }, function (props) {
34359
34520
  return props.disabled && '0.5';
34360
34521
  });
34361
- var ReactionsContainer = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n margin-left: ", ";\n margin-right: ", ";\n\n margin-top: 4px;\n justify-content: flex-end;\n border: ", ";\n box-shadow: ", ";\n filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n border-radius: ", ";\n background-color: ", ";\n padding: ", ";\n z-index: 9;\n ", ";\n overflow: hidden;\n height: ", ";\n transition: all 0.3s;\n"])), function (props) {
34522
+ var ReactionsContainer = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n margin-left: ", ";\n margin-right: ", ";\n\n margin-top: 4px;\n justify-content: flex-end;\n border: ", ";\n box-shadow: ", ";\n filter: drop-shadow(0px 0px 2px rgba(17, 21, 57, 0.08));\n border-radius: ", ";\n background-color: ", ";\n padding: ", ";\n z-index: 9;\n ", ";\n overflow: hidden;\n height: ", ";\n transition: all 0.3s;\n"])), function (props) {
34362
34523
  return props.rtlDirection && 'auto';
34363
34524
  }, function (props) {
34364
34525
  return !props.rtlDirection && 'auto';
@@ -34377,10 +34538,10 @@ var ReactionsContainer = styled.div(_templateObject9$c || (_templateObject9$c =
34377
34538
  }, function (props) {
34378
34539
  return props.isReacted ? '16px' : '0';
34379
34540
  });
34380
- var MessageReactionsCont = styled.div(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n max-width: 300px;\n direction: ", ";\n cursor: pointer;\n"])), function (props) {
34541
+ var MessageReactionsCont = styled.div(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n max-width: 300px;\n direction: ", ";\n cursor: pointer;\n"])), function (props) {
34381
34542
  return props.rtlDirection && 'ltr';
34382
34543
  });
34383
- var MessageStatus$1 = styled.span(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n margin-left: 4px;\n text-align: right;\n height: ", ";\n & > svg {\n height: 16px;\n width: 16px;\n }\n"])), function (props) {
34544
+ var MessageStatus$1 = styled.span(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n margin-left: 4px;\n text-align: right;\n height: ", ";\n & > svg {\n height: 16px;\n width: 16px;\n }\n"])), function (props) {
34384
34545
  return props.height || '14px';
34385
34546
  });
34386
34547
  var HiddenMessageTime$1 = styled.span(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n display: ", ";\n font-weight: 400;\n font-size: ", ";\n color: ", ";\n"])), function (props) {
@@ -34419,7 +34580,7 @@ var MessageItem = styled.div(_templateObject12$3 || (_templateObject12$3 = _tagg
34419
34580
  return props.hoverBackground || '';
34420
34581
  }, HiddenMessageTime$1, MessageStatus$1);
34421
34582
 
34422
- var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$9;
34583
+ var _templateObject$G, _templateObject2$B, _templateObject3$v, _templateObject4$r, _templateObject5$m, _templateObject6$j, _templateObject7$h, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$a;
34423
34584
  var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
34424
34585
  var lastIndex = _ref.lastIndex,
34425
34586
  currentMessageDate = _ref.currentMessageDate,
@@ -34606,7 +34767,24 @@ var MessageList = function MessageList(_ref2) {
34606
34767
  hiddenMessagesProperties = _ref2.hiddenMessagesProperties,
34607
34768
  shouldOpenUserProfileForMention = _ref2.shouldOpenUserProfileForMention,
34608
34769
  _ref2$showInfoMessage = _ref2.showInfoMessageProps,
34609
- showInfoMessageProps = _ref2$showInfoMessage === void 0 ? {} : _ref2$showInfoMessage;
34770
+ showInfoMessageProps = _ref2$showInfoMessage === void 0 ? {} : _ref2$showInfoMessage,
34771
+ _ref2$ogMetadataProps = _ref2.ogMetadataProps,
34772
+ ogMetadataProps = _ref2$ogMetadataProps === void 0 ? {
34773
+ maxWidth: 400,
34774
+ maxHeight: undefined,
34775
+ ogLayoutOrder: 'link-first',
34776
+ ogShowUrl: false,
34777
+ ogShowTitle: true,
34778
+ ogShowDescription: true,
34779
+ ogShowFavicon: true,
34780
+ order: {
34781
+ image: 1,
34782
+ title: 2,
34783
+ description: 3,
34784
+ link: 4
34785
+ },
34786
+ infoPadding: '0 8px'
34787
+ } : _ref2$ogMetadataProps;
34610
34788
  var _useColor = useColors(),
34611
34789
  outgoingMessageBackground = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND],
34612
34790
  themeBackgroundColor = _useColor[THEME_COLORS.BACKGROUND],
@@ -35437,7 +35615,8 @@ var MessageList = function MessageList(_ref2) {
35437
35615
  messageTimeColor: messageTimeColor,
35438
35616
  messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
35439
35617
  shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
35440
- showInfoMessageProps: showInfoMessageProps
35618
+ showInfoMessageProps: showInfoMessageProps,
35619
+ ogMetadataProps: ogMetadataProps
35441
35620
  }))), isUnreadMessage ? (/*#__PURE__*/React__default.createElement(MessageDivider, {
35442
35621
  theme: theme,
35443
35622
  newMessagesSeparatorTextColor: newMessagesSeparatorTextColor,
@@ -35521,13 +35700,13 @@ var DropAttachmentArea = styled.div(_templateObject7$h || (_templateObject7$h =
35521
35700
  var MessageWrapper = styled.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n &.highlight {\n & .message_item {\n transition: all 0.2s ease-in-out;\n padding-top: 4px;\n padding-bottom: 4px;\n background-color: ", ";\n }\n }\n\n & .message_item {\n transition: all 0.2s ease-in-out;\n }\n"])), function (props) {
35522
35701
  return props.highlightBg || '#d5d5d5';
35523
35702
  });
35524
- var NoMessagesContainer = styled.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n height: 100%;\n width: 100%;\n font-weight: 400;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
35703
+ var NoMessagesContainer = styled.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n height: 100%;\n width: 100%;\n font-weight: 400;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
35525
35704
  return props.color;
35526
35705
  });
35527
- var NoMessagesTitle = styled.h4(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n margin: 12px 0 8px;\n font-family: Inter, sans-serif;\n text-align: center;\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n color: ", ";\n"])), function (props) {
35706
+ var NoMessagesTitle = styled.h4(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n margin: 12px 0 8px;\n font-family: Inter, sans-serif;\n text-align: center;\n font-size: 20px;\n font-style: normal;\n font-weight: 500;\n line-height: 24px;\n color: ", ";\n"])), function (props) {
35528
35707
  return props.color;
35529
35708
  });
35530
- var NoMessagesText = styled.p(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n margin: 0;\n text-align: center;\n font-feature-settings:\n 'clig' off,\n 'liga' off;\n font-family: Inter, sans-serif;\n font-size: 15px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: ", ";\n"])), function (props) {
35709
+ var NoMessagesText = styled.p(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n margin: 0;\n text-align: center;\n font-feature-settings:\n 'clig' off,\n 'liga' off;\n font-family: Inter, sans-serif;\n font-size: 15px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n color: ", ";\n"])), function (props) {
35531
35710
  return props.color;
35532
35711
  });
35533
35712
 
@@ -35678,7 +35857,24 @@ var MessagesContainer = function MessagesContainer(_ref) {
35678
35857
  hiddenMessagesProperties = _ref$hiddenMessagesPr === void 0 ? [] : _ref$hiddenMessagesPr,
35679
35858
  shouldOpenUserProfileForMention = _ref.shouldOpenUserProfileForMention,
35680
35859
  _ref$showInfoMessageP = _ref.showInfoMessageProps,
35681
- showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP;
35860
+ showInfoMessageProps = _ref$showInfoMessageP === void 0 ? {} : _ref$showInfoMessageP,
35861
+ _ref$ogMetadataProps = _ref.ogMetadataProps,
35862
+ ogMetadataProps = _ref$ogMetadataProps === void 0 ? {
35863
+ maxWidth: 400,
35864
+ maxHeight: undefined,
35865
+ ogLayoutOrder: 'link-first',
35866
+ ogShowUrl: false,
35867
+ ogShowTitle: true,
35868
+ ogShowDescription: true,
35869
+ ogShowFavicon: true,
35870
+ order: {
35871
+ image: 1,
35872
+ title: 2,
35873
+ description: 3,
35874
+ link: 4
35875
+ },
35876
+ infoPadding: '0 8px'
35877
+ } : _ref$ogMetadataProps;
35682
35878
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MessageList, {
35683
35879
  fontFamily: fontFamily,
35684
35880
  ownMessageOnRightSide: ownMessageOnRightSide,
@@ -35809,7 +36005,8 @@ var MessagesContainer = function MessagesContainer(_ref) {
35809
36005
  messageStatusAndTimeLineHeight: messageStatusAndTimeLineHeight,
35810
36006
  hiddenMessagesProperties: hiddenMessagesProperties,
35811
36007
  shouldOpenUserProfileForMention: shouldOpenUserProfileForMention,
35812
- showInfoMessageProps: showInfoMessageProps
36008
+ showInfoMessageProps: showInfoMessageProps,
36009
+ ogMetadataProps: ogMetadataProps
35813
36010
  }));
35814
36011
  };
35815
36012
 
@@ -38139,7 +38336,7 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
38139
38336
  }));
38140
38337
  };
38141
38338
 
38142
- var _templateObject$M, _templateObject2$H, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i, _templateObject9$e, _templateObject0$d, _templateObject1$a, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
38339
+ var _templateObject$M, _templateObject2$H, _templateObject3$A, _templateObject4$v, _templateObject5$q, _templateObject6$m, _templateObject7$k, _templateObject8$i, _templateObject9$f, _templateObject0$e, _templateObject1$b, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
38143
38340
  function AutoFocusPlugin(_ref) {
38144
38341
  var messageForReply = _ref.messageForReply;
38145
38342
  var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -39307,6 +39504,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
39307
39504
  if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
39308
39505
  var pendingMessagesMap = getPendingMessagesMap();
39309
39506
  var pendingMessagesMapCopy = JSON.parse(JSON.stringify(pendingMessagesMap));
39507
+ clearPendingMessagesMap();
39310
39508
  setTimeout(function () {
39311
39509
  Object.keys(pendingMessagesMapCopy).forEach(function (key) {
39312
39510
  pendingMessagesMapCopy[key].forEach(function (msg) {
@@ -39770,10 +39968,10 @@ var CloseEditMode = styled.span(_templateObject6$m || (_templateObject6$m = _tag
39770
39968
  });
39771
39969
  var UserName$1 = styled.span(_templateObject7$k || (_templateObject7$k = _taggedTemplateLiteralLoose(["\n font-weight: 500;\n margin-left: 4px;\n"])));
39772
39970
  var ReplyMessageBody$1 = styled.div(_templateObject8$i || (_templateObject8$i = _taggedTemplateLiteralLoose(["\n word-break: break-word;\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
39773
- var EditReplyMessageHeader = styled.h4(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n display: flex;\n margin: 0 0 2px;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n color: ", ";\n\n > svg {\n margin-right: 4px;\n width: 16px;\n height: 16px;\n }\n"])), function (props) {
39971
+ var EditReplyMessageHeader = styled.h4(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n display: flex;\n margin: 0 0 2px;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n color: ", ";\n\n > svg {\n margin-right: 4px;\n width: 16px;\n height: 16px;\n }\n"])), function (props) {
39774
39972
  return props.color;
39775
39973
  });
39776
- var AddAttachmentIcon = styled.span(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose(["\n display: flex;\n height: ", ";\n align-items: center;\n margin: 0 8px;\n cursor: pointer;\n line-height: 13px;\n z-index: 2;\n order: ", ";\n\n > svg {\n ", ";\n width: 24px;\n }\n\n &:hover > svg {\n color: ", ";\n }\n"])), function (props) {
39974
+ var AddAttachmentIcon = styled.span(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose(["\n display: flex;\n height: ", ";\n align-items: center;\n margin: 0 8px;\n cursor: pointer;\n line-height: 13px;\n z-index: 2;\n order: ", ";\n\n > svg {\n ", ";\n width: 24px;\n }\n\n &:hover > svg {\n color: ", ";\n }\n"])), function (props) {
39777
39975
  return props.height ? props.height + "px" : '36px';
39778
39976
  }, function (props) {
39779
39977
  return props.order === 0 || props.order ? props.order : 1;
@@ -39782,7 +39980,7 @@ var AddAttachmentIcon = styled.span(_templateObject0$d || (_templateObject0$d =
39782
39980
  }, function (props) {
39783
39981
  return props.hoverColor;
39784
39982
  });
39785
- var SendMessageInputContainer = styled.div(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n position: relative;\n min-height: ", ";\n box-sizing: border-box;\n border-radius: ", ";\n\n & .dropdown-trigger.open {\n color: #ccc;\n\n & ", " {\n & > svg {\n color: ", ";\n }\n ;\n }\n }\n}\n"])), function (props) {
39983
+ var SendMessageInputContainer = styled.div(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n position: relative;\n min-height: ", ";\n box-sizing: border-box;\n border-radius: ", ";\n\n & .dropdown-trigger.open {\n color: #ccc;\n\n & ", " {\n & > svg {\n color: ", ";\n }\n ;\n }\n }\n}\n"])), function (props) {
39786
39984
  return props.minHeight || '36px';
39787
39985
  }, function (props) {
39788
39986
  return props.messageForReply ? '0 0 4px 4px' : '4px';
@@ -40113,7 +40311,7 @@ function SvgUnpin(props) {
40113
40311
  })));
40114
40312
  }
40115
40313
 
40116
- var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$j, _templateObject9$f, _templateObject0$e, _templateObject1$b, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
40314
+ var _templateObject$N, _templateObject2$I, _templateObject3$B, _templateObject4$w, _templateObject5$r, _templateObject6$n, _templateObject7$l, _templateObject8$j, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
40117
40315
  var Actions = function Actions(_ref) {
40118
40316
  var setActionsHeight = _ref.setActionsHeight,
40119
40317
  channel = _ref.channel,
@@ -40589,9 +40787,9 @@ var DefaultMutedIcon = styled(SvgUnmuteNotifications)(_templateObject5$r || (_te
40589
40787
  var DefaultMuteIcon = styled(SvgNotifications)(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose([""])));
40590
40788
  var DefaultStarIcon = styled(SvgStar)(_templateObject7$l || (_templateObject7$l = _taggedTemplateLiteralLoose([""])));
40591
40789
  var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose([""])));
40592
- var DefaultPinIcon = styled(SvgPin)(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose([""])));
40593
- var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose([""])));
40594
- var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose([""])));
40790
+ var DefaultPinIcon = styled(SvgPin)(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose([""])));
40791
+ var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$f || (_templateObject0$f = _taggedTemplateLiteralLoose([""])));
40792
+ var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$c || (_templateObject1$c = _taggedTemplateLiteralLoose([""])));
40595
40793
  var DefaultBlockIcon = styled(SvgBlockChannel)(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose([""])));
40596
40794
  var DefaultReportIcon = styled(SvgReport)(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose([""])));
40597
40795
  var DefaultClearIcon = styled(SvgClear)(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose([""])));
@@ -40813,7 +41011,7 @@ function ResetLinkConfirmModal(_ref) {
40813
41011
  });
40814
41012
  }
40815
41013
 
40816
- var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$g, _templateObject0$f, _templateObject1$c, _templateObject10$7, _templateObject11$7, _templateObject12$6, _templateObject13$5;
41014
+ var _templateObject$P, _templateObject2$K, _templateObject3$D, _templateObject4$x, _templateObject5$s, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$h, _templateObject0$g, _templateObject1$d, _templateObject10$7, _templateObject11$7, _templateObject12$6, _templateObject13$5;
40817
41015
  function InviteLinkModal(_ref) {
40818
41016
  var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
40819
41017
  var onClose = _ref.onClose,
@@ -41313,11 +41511,11 @@ var LinkInput = styled.input(_templateObject7$m || (_templateObject7$m = _tagged
41313
41511
  return p.color;
41314
41512
  });
41315
41513
  var CopyButton = styled.button(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border: none;\n background: transparent;\n cursor: pointer;\n"])));
41316
- var CopyButtonWrapper = styled.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])));
41317
- var SectionTitle = styled.h4(_templateObject0$f || (_templateObject0$f = _taggedTemplateLiteralLoose(["\n margin: 16px 0 8px;\n font-weight: 500;\n font-size: 15px;\n line-height: 16px;\n color: ", ";\n"])), function (p) {
41514
+ var CopyButtonWrapper = styled.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n"])));
41515
+ var SectionTitle = styled.h4(_templateObject0$g || (_templateObject0$g = _taggedTemplateLiteralLoose(["\n margin: 16px 0 8px;\n font-weight: 500;\n font-size: 15px;\n line-height: 16px;\n color: ", ";\n"])), function (p) {
41318
41516
  return p.color;
41319
41517
  });
41320
- var HistoryRow = styled.div(_templateObject1$c || (_templateObject1$c = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n"])));
41518
+ var HistoryRow = styled.div(_templateObject1$d || (_templateObject1$d = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n"])));
41321
41519
  var Switch = styled.div(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n width: 44px;\n height: 26px;\n border-radius: 13px;\n background: ", ";\n position: relative;\n cursor: pointer;\n transition: background 0.2s ease;\n\n &:after {\n content: '';\n position: absolute;\n top: 3px;\n left: ", ";\n width: 20px;\n height: 20px;\n background: #fff;\n border-radius: 50%;\n transition: left 0.2s ease;\n }\n"])), function (p) {
41322
41520
  return p.active ? p.accent : 'rgba(226,226,226,1)';
41323
41521
  }, function (p) {
@@ -41333,7 +41531,7 @@ var QrHint = styled.p(_templateObject13$5 || (_templateObject13$5 = _taggedTempl
41333
41531
  return p.color;
41334
41532
  });
41335
41533
 
41336
- var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$h;
41534
+ var _templateObject$Q, _templateObject2$L, _templateObject3$E, _templateObject4$y, _templateObject5$t, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$i;
41337
41535
  var Members = function Members(_ref) {
41338
41536
  var _members$find;
41339
41537
  var channel = _ref.channel,
@@ -41677,7 +41875,7 @@ var MemberItem$1 = styled.li(_templateObject8$l || (_templateObject8$l = _tagged
41677
41875
  }, function (props) {
41678
41876
  return props.hoverBackground;
41679
41877
  }, EditMemberIcon, UserStatus);
41680
- var RoleBadge = styled.span(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n position: relative;\n padding: 2px 8px;\n border-radius: 12px;\n margin-left: 4px;\n font-weight: 500;\n font-size: 12px;\n line-height: 16px;\n color: ", ";\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 12px;\n width: 100%;\n height: 100%;\n background-color: ", ";\n opacity: 0.1;\n }\n"])), function (props) {
41878
+ var RoleBadge = styled.span(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n position: relative;\n padding: 2px 8px;\n border-radius: 12px;\n margin-left: 4px;\n font-weight: 500;\n font-size: 12px;\n line-height: 16px;\n color: ", ";\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n border-radius: 12px;\n width: 100%;\n height: 100%;\n background-color: ", ";\n opacity: 0.1;\n }\n"])), function (props) {
41681
41879
  return props.color;
41682
41880
  }, function (props) {
41683
41881
  return props.backgroundColor;
@@ -42712,7 +42910,7 @@ var EditChannel = function EditChannel(_ref) {
42712
42910
  })));
42713
42911
  };
42714
42912
 
42715
- var _templateObject$Z, _templateObject2$S, _templateObject3$J, _templateObject4$D, _templateObject5$x, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$i, _templateObject0$g, _templateObject1$d, _templateObject10$8, _templateObject11$8;
42913
+ var _templateObject$Z, _templateObject2$S, _templateObject3$J, _templateObject4$D, _templateObject5$x, _templateObject6$s, _templateObject7$q, _templateObject8$o, _templateObject9$j, _templateObject0$h, _templateObject1$e, _templateObject10$8, _templateObject11$8;
42716
42914
  var Details = function Details(_ref) {
42717
42915
  var _activeChannel$member;
42718
42916
  var detailsTitleText = _ref.detailsTitleText,
@@ -43178,17 +43376,17 @@ var ChannelInfo$4 = styled.div(_templateObject7$q || (_templateObject7$q = _tagg
43178
43376
  var DetailsHeader = styled.div(_templateObject8$o || (_templateObject8$o = _taggedTemplateLiteralLoose(["\n border-bottom: 6px solid ", ";\n align-items: center;\n box-sizing: border-box;\n padding: 20px 16px;\n"])), function (props) {
43179
43377
  return props.borderColor;
43180
43378
  });
43181
- var ChannelAvatarAndName = styled.div(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n flex-direction: ", ";\n"])), function (props) {
43379
+ var ChannelAvatarAndName = styled.div(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n flex-direction: ", ";\n"])), function (props) {
43182
43380
  return props.direction;
43183
43381
  });
43184
- var ChannelName$1 = styled(SectionHeader)(_templateObject0$g || (_templateObject0$g = _taggedTemplateLiteralLoose(["\n white-space: nowrap;\n max-width: ", ";\n text-overflow: ellipsis;\n text-color: ", ";\n overflow: hidden;\n text-transform: ", ";\n"])), function (props) {
43382
+ var ChannelName$1 = styled(SectionHeader)(_templateObject0$h || (_templateObject0$h = _taggedTemplateLiteralLoose(["\n white-space: nowrap;\n max-width: ", ";\n text-overflow: ellipsis;\n text-color: ", ";\n overflow: hidden;\n text-transform: ", ";\n"])), function (props) {
43185
43383
  return props.isDirect ? '200px' : '168px';
43186
43384
  }, function (props) {
43187
43385
  return props.color;
43188
43386
  }, function (props) {
43189
43387
  return props.uppercase && 'uppercase';
43190
43388
  });
43191
- var ChannelNameWrapper = styled.div(_templateObject1$d || (_templateObject1$d = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n"])));
43389
+ var ChannelNameWrapper = styled.div(_templateObject1$e || (_templateObject1$e = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n"])));
43192
43390
  var EditButton = styled.span(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n margin-left: 6px;\n cursor: pointer;\n color: #b2b6be;\n"])));
43193
43391
  var PhoneNumberContainer = styled.span(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n user-select: text;\n"])));
43194
43392