sceyt-chat-react-uikit 1.7.2-beta.3 → 1.7.2-beta.5

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { IAttachment } from '../../../types';
-declare const OGMetadata: ({ attachments, state }: {
+declare const OGMetadata: ({ attachments, state, incoming }: {
     attachments: IAttachment[];
     state: string;
+    incoming: boolean;
 }) => React.JSX.Element;
 export { OGMetadata };

package/index.js

@@ -31389,11 +31389,15 @@ var validateUrl = function validateUrl(url) {
 var OGMetadata = function OGMetadata(_ref) {
   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;
   var attachments = _ref.attachments,
-    state = _ref.state;
+    state = _ref.state,
+    incoming = _ref.incoming;
   var dispatch = useDispatch();
   var oGMetadata = useSelector(function (state) {
     return state.MessageReducer.oGMetadata;
   });
+  var _useColor = useColors(),
+    incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
+    outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X];
   var attachment = React.useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
@@ -31522,13 +31526,14 @@ var OGMetadata = function OGMetadata(_ref) {
     return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / 400);
   }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
   return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
-    showOGMetadata: !!showOGMetadata
+    showOGMetadata: !!showOGMetadata,
+    bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX
   }, /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick() {
       window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
     },
     style: {
-      width: showOGMetadata ? '400px' : 'auto'
+      width: showOGMetadata ? '100%' : 'auto'
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
     showOGMetadata: !!showOGMetadata && !imageLoadError,
@@ -31570,66 +31575,69 @@ var OGMetadata = function OGMetadata(_ref) {
     shouldAnimate: shouldAnimate
   }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description)) : null)) : null));
 };
-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) {
-  var showOGMetadata = _ref2.showOGMetadata;
+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: ", ";\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) {
+  var bgColor = _ref2.bgColor;
+  return bgColor;
+}, function (_ref3) {
+  var showOGMetadata = _ref3.showOGMetadata;
   return showOGMetadata ? '0.8rem' : '0';
 });
-var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  opacity: ", ";\n  overflow: hidden;\n  margin: 0 auto;\n  padding: ", ";\n  ", "\n"])), function (_ref3) {
-  var containerWidth = _ref3.containerWidth;
+var ImageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  opacity: ", ";\n  overflow: hidden;\n  margin: 0 auto;\n  padding: ", ";\n  ", "\n"])), function (_ref4) {
+  var containerWidth = _ref4.containerWidth;
   return containerWidth ? "\n    max-width: " + (containerWidth + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
-}, function (_ref4) {
-  var containerHeight = _ref4.containerHeight,
-    showOGMetadata = _ref4.showOGMetadata;
-  return containerHeight ? "\n    max-height: " + (containerHeight + "px") + ";\n    height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n  " : "\n      height: 0;\n  ";
 }, function (_ref5) {
-  var showOGMetadata = _ref5.showOGMetadata,
-    containerHeight = _ref5.containerHeight;
-  return showOGMetadata && containerHeight ? 1 : 0;
+  var containerHeight = _ref5.containerHeight,
+    showOGMetadata = _ref5.showOGMetadata;
+  return containerHeight ? "\n    max-height: " + (containerHeight + "px") + ";\n    height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n  " : "\n      height: 0;\n  ";
 }, function (_ref6) {
   var showOGMetadata = _ref6.showOGMetadata,
     containerHeight = _ref6.containerHeight;
-  return showOGMetadata && containerHeight ? '4px' : '0';
+  return showOGMetadata && containerHeight ? 1 : 0;
 }, function (_ref7) {
-  var shouldAnimate = _ref7.shouldAnimate;
+  var showOGMetadata = _ref7.showOGMetadata,
+    containerHeight = _ref7.containerHeight;
+  return showOGMetadata && containerHeight ? '4px' : '0';
+}, function (_ref8) {
+  var shouldAnimate = _ref8.shouldAnimate;
   return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
 });
-var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  ", "\n"])), function (_ref8) {
-  var shouldAnimate = _ref8.shouldAnimate;
+var OGText = styled__default.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  ", "\n"])), function (_ref9) {
+  var shouldAnimate = _ref9.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-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  ", "\n  ", "\n"])), function (_ref9) {
-  var maxWidth = _ref9.maxWidth;
+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  ", "\n  ", "\n"])), function (_ref0) {
+  var maxWidth = _ref0.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
-}, function (_ref0) {
-  var shouldAnimate = _ref0.shouldAnimate;
+}, function (_ref1) {
+  var shouldAnimate = _ref1.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-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  ", "\n  ", "\n"])), function (_ref1) {
-  var maxWidth = _ref1.maxWidth;
+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  ", "\n  ", "\n"])), function (_ref10) {
+  var maxWidth = _ref10.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
-}, function (_ref10) {
-  var shouldAnimate = _ref10.shouldAnimate;
+}, function (_ref11) {
+  var shouldAnimate = _ref11.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _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 (_ref11) {
-  var maxWidth = _ref11.maxWidth;
+var Desc = styled__default.p(_templateObject6$f || (_templateObject6$f = _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) {
+  var maxWidth = _ref12.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
-}, function (_ref12) {
-  var shouldAnimate = _ref12.shouldAnimate;
+}, function (_ref13) {
+  var shouldAnimate = _ref13.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  object-fit: cover;\n  ", "\n"])), function (_ref13) {
-  var imageWidth = _ref13.imageWidth;
-  return imageWidth && "\n    max-width: " + (imageWidth + "px") + ";\n    width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n  ";
-}, function (_ref14) {
-  var imageHeight = _ref14.imageHeight;
-  return imageHeight && "\n    max-height: " + (imageHeight + "px") + ";\n    min-height: " + (imageHeight + "px") + ";\n    height: " + (imageHeight + "px") + ";\n  ";
+var Img = styled__default.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  object-fit: cover;\n  ", "\n"])), function (_ref14) {
+  var imageWidth = _ref14.imageWidth;
+  return imageWidth && "\n    max-width: 100%;\n    width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n  ";
 }, function (_ref15) {
-  var shouldAnimate = _ref15.shouldAnimate;
+  var imageHeight = _ref15.imageHeight;
+  return imageHeight && "\n    max-height: " + (imageHeight + "px") + ";\n    min-height: " + (imageHeight + "px") + ";\n    height: " + (imageHeight + "px") + ";\n  ";
+}, function (_ref16) {
+  var shouldAnimate = _ref16.shouldAnimate;
   return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
 });
-var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])), function (_ref16) {
-  var shouldAnimate = _ref16.shouldAnimate;
+var Favicon = styled__default.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])), function (_ref17) {
+  var shouldAnimate = _ref17.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
 
@@ -31996,10 +32004,11 @@ var MessageBody = function MessageBody(_ref) {
     incomingMessageStyles: incomingMessageStyles,
     incoming: message.incoming,
     linkColor: linkColor
-  }, linkAttachment && /*#__PURE__*/React__default.createElement(OGMetadata, {
+  }, linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
     attachments: [linkAttachment],
-    state: message.state
-  }), /*#__PURE__*/React__default.createElement("span", {
+    state: message.state,
+    incoming: message.incoming
+  })), /*#__PURE__*/React__default.createElement("span", {
     ref: messageTextRef
   }, MessageTextFormat({
     text: message.body,
@@ -33242,7 +33251,14 @@ var MessageList = function MessageList(_ref2) {
     var text = '';
     for (var i = dateLabels.length - 1; i >= 0; i--) {
       var dateLabel = dateLabels[i];
-      if (!text && container.scrollTop > dateLabel.offsetTop - 28) {
+      var aroundThreshold = 40;
+      var labelTop = dateLabel.offsetTop - 28;
+      var labelBottom = labelTop + (dateLabel.offsetHeight || 0) - 28;
+      if (container.scrollTop >= labelTop - aroundThreshold && container.scrollTop <= labelBottom + aroundThreshold) {
+        setShowTopDate(false);
+        break;
+      }
+      if (!text && container.scrollTop > labelTop - 28) {
         var span = (dateLabel === null || dateLabel === void 0 ? void 0 : dateLabel.firstChild) && dateLabel.firstChild.firstChild;
         text = span ? span.innerText || '' : '';
         setTopDateLabel(text);
@@ -33264,9 +33280,6 @@ var MessageList = function MessageList(_ref2) {
       }
       setShowTopDate(true);
       clearTimeout(hideTopDateTimeout.current);
-      hideTopDateTimeout.current = setTimeout(function () {
-        setShowTopDate(false);
-      }, 1000);
       renderTopDate();
       var forceLoadPrevMessages = false;
       if (-target.scrollTop + target.offsetHeight + 30 > target.scrollHeight) {

package/index.modern.js

@@ -31368,11 +31368,15 @@ var validateUrl = function validateUrl(url) {
 var OGMetadata = function OGMetadata(_ref) {
   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;
   var attachments = _ref.attachments,
-    state = _ref.state;
+    state = _ref.state,
+    incoming = _ref.incoming;
   var dispatch = useDispatch();
   var oGMetadata = useSelector(function (state) {
     return state.MessageReducer.oGMetadata;
   });
+  var _useColor = useColors(),
+    incomingMessageBackgroundX = _useColor[THEME_COLORS.INCOMING_MESSAGE_BACKGROUND_X],
+    outgoingMessageBackgroundX = _useColor[THEME_COLORS.OUTGOING_MESSAGE_BACKGROUND_X];
   var attachment = useMemo(function () {
     return attachments.find(function (attachment) {
       return attachment.type === attachmentTypes.link;
@@ -31501,13 +31505,14 @@ var OGMetadata = function OGMetadata(_ref) {
     return (metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight) / ((metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth) / 400);
   }, [metadata === null || metadata === void 0 ? void 0 : metadata.imageWidth, metadata === null || metadata === void 0 ? void 0 : metadata.imageHeight]);
   return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
-    showOGMetadata: !!showOGMetadata
+    showOGMetadata: !!showOGMetadata,
+    bgColor: incoming ? incomingMessageBackgroundX : outgoingMessageBackgroundX
   }, /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick() {
       window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
     },
     style: {
-      width: showOGMetadata ? '400px' : 'auto'
+      width: showOGMetadata ? '100%' : 'auto'
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
     showOGMetadata: !!showOGMetadata && !imageLoadError,
@@ -31549,66 +31554,69 @@ var OGMetadata = function OGMetadata(_ref) {
     shouldAnimate: shouldAnimate
   }, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description)) : null)) : null));
 };
-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) {
-  var showOGMetadata = _ref2.showOGMetadata;
+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: ", ";\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) {
+  var bgColor = _ref2.bgColor;
+  return bgColor;
+}, function (_ref3) {
+  var showOGMetadata = _ref3.showOGMetadata;
   return showOGMetadata ? '0.8rem' : '0';
 });
-var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  opacity: ", ";\n  overflow: hidden;\n  margin: 0 auto;\n  padding: ", ";\n  ", "\n"])), function (_ref3) {
-  var containerWidth = _ref3.containerWidth;
+var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n\n  opacity: ", ";\n  overflow: hidden;\n  margin: 0 auto;\n  padding: ", ";\n  ", "\n"])), function (_ref4) {
+  var containerWidth = _ref4.containerWidth;
   return containerWidth ? "\n    max-width: " + (containerWidth + "px") + ";\n  " : "\n    max-width: 100%;\n    width: 100%;\n  ";
-}, function (_ref4) {
-  var containerHeight = _ref4.containerHeight,
-    showOGMetadata = _ref4.showOGMetadata;
-  return containerHeight ? "\n    max-height: " + (containerHeight + "px") + ";\n    height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n  " : "\n      height: 0;\n  ";
 }, function (_ref5) {
-  var showOGMetadata = _ref5.showOGMetadata,
-    containerHeight = _ref5.containerHeight;
-  return showOGMetadata && containerHeight ? 1 : 0;
+  var containerHeight = _ref5.containerHeight,
+    showOGMetadata = _ref5.showOGMetadata;
+  return containerHeight ? "\n    max-height: " + (containerHeight + "px") + ";\n    height: " + (showOGMetadata ? containerHeight + "px" : '0') + ";\n  " : "\n      height: 0;\n  ";
 }, function (_ref6) {
   var showOGMetadata = _ref6.showOGMetadata,
     containerHeight = _ref6.containerHeight;
-  return showOGMetadata && containerHeight ? '4px' : '0';
+  return showOGMetadata && containerHeight ? 1 : 0;
 }, function (_ref7) {
-  var shouldAnimate = _ref7.shouldAnimate;
+  var showOGMetadata = _ref7.showOGMetadata,
+    containerHeight = _ref7.containerHeight;
+  return showOGMetadata && containerHeight ? '4px' : '0';
+}, function (_ref8) {
+  var shouldAnimate = _ref8.shouldAnimate;
   return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
 });
-var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  ", "\n"])), function (_ref8) {
-  var shouldAnimate = _ref8.shouldAnimate;
+var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  padding: 0.5rem;\n  margin: 0;\n  ", "\n"])), function (_ref9) {
+  var shouldAnimate = _ref9.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-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  ", "\n  ", "\n"])), function (_ref9) {
-  var maxWidth = _ref9.maxWidth;
+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  ", "\n  ", "\n"])), function (_ref0) {
+  var maxWidth = _ref0.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
-}, function (_ref0) {
-  var shouldAnimate = _ref0.shouldAnimate;
+}, function (_ref1) {
+  var shouldAnimate = _ref1.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-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  ", "\n  ", "\n"])), function (_ref1) {
-  var maxWidth = _ref1.maxWidth;
+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  ", "\n  ", "\n"])), function (_ref10) {
+  var maxWidth = _ref10.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
-}, function (_ref10) {
-  var shouldAnimate = _ref10.shouldAnimate;
+}, function (_ref11) {
+  var shouldAnimate = _ref11.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _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 (_ref11) {
-  var maxWidth = _ref11.maxWidth;
+var Desc = styled.p(_templateObject6$f || (_templateObject6$f = _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) {
+  var maxWidth = _ref12.maxWidth;
   return maxWidth && "\n    max-width: " + (maxWidth + "px") + ";\n  ";
-}, function (_ref12) {
-  var shouldAnimate = _ref12.shouldAnimate;
+}, function (_ref13) {
+  var shouldAnimate = _ref13.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
-var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  object-fit: cover;\n  ", "\n"])), function (_ref13) {
-  var imageWidth = _ref13.imageWidth;
-  return imageWidth && "\n    max-width: " + (imageWidth + "px") + ";\n    width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n  ";
-}, function (_ref14) {
-  var imageHeight = _ref14.imageHeight;
-  return imageHeight && "\n    max-height: " + (imageHeight + "px") + ";\n    min-height: " + (imageHeight + "px") + ";\n    height: " + (imageHeight + "px") + ";\n  ";
+var Img = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n\n  object-fit: cover;\n  ", "\n"])), function (_ref14) {
+  var imageWidth = _ref14.imageWidth;
+  return imageWidth && "\n    max-width: 100%;\n    width: " + ("calc(" + imageWidth + "px - 8px)") + ";\n  ";
 }, function (_ref15) {
-  var shouldAnimate = _ref15.shouldAnimate;
+  var imageHeight = _ref15.imageHeight;
+  return imageHeight && "\n    max-height: " + (imageHeight + "px") + ";\n    min-height: " + (imageHeight + "px") + ";\n    height: " + (imageHeight + "px") + ";\n  ";
+}, function (_ref16) {
+  var shouldAnimate = _ref16.shouldAnimate;
   return shouldAnimate && "\n    transition: height 0.2s ease;\n  ";
 });
-var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])), function (_ref16) {
-  var shouldAnimate = _ref16.shouldAnimate;
+var Favicon = styled.img(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  ", "\n  width: 24px;\n  height: 24px;\n  object-fit: contain;\n  margin-right: 4px;\n"])), function (_ref17) {
+  var shouldAnimate = _ref17.shouldAnimate;
   return shouldAnimate && "\n    transition: all 0.2s ease;\n  ";
 });
 
@@ -31975,10 +31983,11 @@ var MessageBody = function MessageBody(_ref) {
     incomingMessageStyles: incomingMessageStyles,
     incoming: message.incoming,
     linkColor: linkColor
-  }, linkAttachment && /*#__PURE__*/React__default.createElement(OGMetadata, {
+  }, linkAttachment && (/*#__PURE__*/React__default.createElement(OGMetadata, {
     attachments: [linkAttachment],
-    state: message.state
-  }), /*#__PURE__*/React__default.createElement("span", {
+    state: message.state,
+    incoming: message.incoming
+  })), /*#__PURE__*/React__default.createElement("span", {
     ref: messageTextRef
   }, MessageTextFormat({
     text: message.body,
@@ -33221,7 +33230,14 @@ var MessageList = function MessageList(_ref2) {
     var text = '';
     for (var i = dateLabels.length - 1; i >= 0; i--) {
       var dateLabel = dateLabels[i];
-      if (!text && container.scrollTop > dateLabel.offsetTop - 28) {
+      var aroundThreshold = 40;
+      var labelTop = dateLabel.offsetTop - 28;
+      var labelBottom = labelTop + (dateLabel.offsetHeight || 0) - 28;
+      if (container.scrollTop >= labelTop - aroundThreshold && container.scrollTop <= labelBottom + aroundThreshold) {
+        setShowTopDate(false);
+        break;
+      }
+      if (!text && container.scrollTop > labelTop - 28) {
         var span = (dateLabel === null || dateLabel === void 0 ? void 0 : dateLabel.firstChild) && dateLabel.firstChild.firstChild;
         text = span ? span.innerText || '' : '';
         setTopDateLabel(text);
@@ -33243,9 +33259,6 @@ var MessageList = function MessageList(_ref2) {
       }
       setShowTopDate(true);
       clearTimeout(hideTopDateTimeout.current);
-      hideTopDateTimeout.current = setTimeout(function () {
-        setShowTopDate(false);
-      }, 1000);
       renderTopDate();
       var forceLoadPrevMessages = false;
       if (-target.scrollTop + target.offsetHeight + 30 > target.scrollHeight) {

package/package.json

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