sceyt-chat-react-uikit 1.6.7-beta.7 → 1.6.7-beta.9

package/index.js

@@ -11176,7 +11176,9 @@ var ReplyMessageText = styled__default.span(_templateObject29 || (_templateObjec
 var CloseIcon = styled__default(SvgClose)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 13px;\n  right: 13px;\n  cursor: pointer;\n  padding: 15px;\n  box-sizing: content-box;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var ClearTypedText = styled__default(CloseIcon)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 10px;\n  cursor: pointer;\n  padding: 4px;\n"])));
+var ClearTypedText = styled__default(CloseIcon)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 10px;\n  cursor: pointer;\n  padding: 4px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
 var StyledSearchSvg = styled__default(SvgSearch)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 12px;\n  left: ", ";\n"])), function (props) {
   return props.left || '14px';
 });
@@ -19603,7 +19605,8 @@ var ChannelSearch = function ChannelSearch(_ref) {
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY];
   return /*#__PURE__*/React__default.createElement(SearchInputContainer, {
     inline: inline,
     borderColor: surface1Background
@@ -19620,7 +19623,8 @@ var ChannelSearch = function ChannelSearch(_ref) {
     placeholder: 'Search for channels',
     fontSize: fontSize
   }), searchValue && /*#__PURE__*/React__default.createElement(ClearTypedText, {
-    onClick: getMyChannels
+    onClick: getMyChannels,
+    color: iconPrimary
   }));
 };
 
@@ -27846,6 +27850,7 @@ var VideoCont = styled__default.div(_templateObject11$3 || (_templateObject11$3
 
 var _templateObject$v, _templateObject2$r, _templateObject3$l, _templateObject4$i;
 var RepliedMessage = function RepliedMessage(_ref) {
+  var _message$parentMessag;
   var message = _ref.message,
     theme = _ref.theme,
     handleScrollToRepliedMessage = _ref.handleScrollToRepliedMessage,
@@ -27879,6 +27884,12 @@ var RepliedMessage = function RepliedMessage(_ref) {
   var parentNotLinkAttachment = message.parentMessage && message.parentMessage.attachments && message.parentMessage.attachments.some(function (a) {
     return a.type !== attachmentTypes.link;
   });
+  var attachementsLength = React.useMemo(function () {
+    if (message.parentMessage.attachments && !!message.parentMessage.attachments.length && message.parentMessage.attachments[0].type !== attachmentTypes.voice && parentNotLinkAttachment) {
+      return message.parentMessage.attachments.length;
+    }
+    return 0;
+  }, [message.parentMessage.attachments, parentNotLinkAttachment, (_message$parentMessag = message.parentMessage.attachments[0]) === null || _message$parentMessag === void 0 ? void 0 : _message$parentMessag.type, message.parentMessage.attachments.length]);
   return /*#__PURE__*/React__default.createElement(ReplyMessageContainer, {
     withSenderName: showMessageSenderName,
     withBody: !!message.body,
@@ -27888,7 +27899,7 @@ var RepliedMessage = function RepliedMessage(_ref) {
     onClick: function onClick() {
       return handleScrollToRepliedMessage && !selectionIsActive && handleScrollToRepliedMessage(message.parentMessage.id);
     }
-  }, message.parentMessage.attachments && !!message.parentMessage.attachments.length && message.parentMessage.attachments[0].type !== attachmentTypes.voice && parentNotLinkAttachment && message.parentMessage.attachments.map(function (attachment, index) {
+  }, attachementsLength > 0 && message.parentMessage.attachments.map(function (attachment, index) {
     return /*#__PURE__*/React__default.createElement(Attachment$1, {
       key: attachment.tid || attachment.url,
       backgroundColor: message.incoming ? incomingRepliedMessageBackground || bubbleIncomingX : ownRepliedMessageBackground || bubbleOutgoingX,
@@ -27908,7 +27919,8 @@ var RepliedMessage = function RepliedMessage(_ref) {
       videoAttachmentMaxHeight: videoAttachmentMaxHeight
     });
   }), /*#__PURE__*/React__default.createElement(ReplyMessageBody, {
-    rtlDirection: ownMessageOnRightSide && !message.incoming
+    rtlDirection: ownMessageOnRightSide && !message.incoming,
+    maxWidth: "calc(100% - " + (attachementsLength * 40 + 10) + "px)"
   }, /*#__PURE__*/React__default.createElement(MessageOwner, {
     className: 'reply-message-owner',
     color: accentColor,
@@ -27945,8 +27957,10 @@ var ReplyMessageContainer = styled__default.div(_templateObject$v || (_templateO
 }, function (props) {
   return !props.withSenderName && props.withAttachments && '8px';
 });
-var ReplyMessageBody = styled__default.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  margin-bottom: auto;\n  direction: ", ";\n  max-width: 100%;\n"])), function (props) {
+var ReplyMessageBody = styled__default.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  margin-bottom: auto;\n  direction: ", ";\n  max-width: ", ";\n"])), function (props) {
   return props.rtlDirection ? 'initial' : '';
+}, function (props) {
+  return props.maxWidth || '100%';
 });
 var MessageStatusDeleted = styled__default.span(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  font-style: italic;\n"])), function (props) {
   return props.color;

package/index.modern.js

@@ -11153,7 +11153,9 @@ var ReplyMessageText = styled.span(_templateObject29 || (_templateObject29 = _ta
 var CloseIcon = styled(SvgClose)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 13px;\n  right: 13px;\n  cursor: pointer;\n  padding: 15px;\n  box-sizing: content-box;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var ClearTypedText = styled(CloseIcon)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 10px;\n  cursor: pointer;\n  padding: 4px;\n"])));
+var ClearTypedText = styled(CloseIcon)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 10px;\n  cursor: pointer;\n  padding: 4px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
 var StyledSearchSvg = styled(SvgSearch)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 12px;\n  left: ", ";\n"])), function (props) {
   return props.left || '14px';
 });
@@ -19580,7 +19582,8 @@ var ChannelSearch = function ChannelSearch(_ref) {
   var _useColor = useColors(),
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     surface1Background = _useColor[THEME_COLORS.SURFACE_1],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY];
   return /*#__PURE__*/React__default.createElement(SearchInputContainer, {
     inline: inline,
     borderColor: surface1Background
@@ -19597,7 +19600,8 @@ var ChannelSearch = function ChannelSearch(_ref) {
     placeholder: 'Search for channels',
     fontSize: fontSize
   }), searchValue && /*#__PURE__*/React__default.createElement(ClearTypedText, {
-    onClick: getMyChannels
+    onClick: getMyChannels,
+    color: iconPrimary
   }));
 };
 
@@ -27823,6 +27827,7 @@ var VideoCont = styled.div(_templateObject11$3 || (_templateObject11$3 = _tagged
 
 var _templateObject$v, _templateObject2$r, _templateObject3$l, _templateObject4$i;
 var RepliedMessage = function RepliedMessage(_ref) {
+  var _message$parentMessag;
   var message = _ref.message,
     theme = _ref.theme,
     handleScrollToRepliedMessage = _ref.handleScrollToRepliedMessage,
@@ -27856,6 +27861,12 @@ var RepliedMessage = function RepliedMessage(_ref) {
   var parentNotLinkAttachment = message.parentMessage && message.parentMessage.attachments && message.parentMessage.attachments.some(function (a) {
     return a.type !== attachmentTypes.link;
   });
+  var attachementsLength = useMemo(function () {
+    if (message.parentMessage.attachments && !!message.parentMessage.attachments.length && message.parentMessage.attachments[0].type !== attachmentTypes.voice && parentNotLinkAttachment) {
+      return message.parentMessage.attachments.length;
+    }
+    return 0;
+  }, [message.parentMessage.attachments, parentNotLinkAttachment, (_message$parentMessag = message.parentMessage.attachments[0]) === null || _message$parentMessag === void 0 ? void 0 : _message$parentMessag.type, message.parentMessage.attachments.length]);
   return /*#__PURE__*/React__default.createElement(ReplyMessageContainer, {
     withSenderName: showMessageSenderName,
     withBody: !!message.body,
@@ -27865,7 +27876,7 @@ var RepliedMessage = function RepliedMessage(_ref) {
     onClick: function onClick() {
       return handleScrollToRepliedMessage && !selectionIsActive && handleScrollToRepliedMessage(message.parentMessage.id);
     }
-  }, message.parentMessage.attachments && !!message.parentMessage.attachments.length && message.parentMessage.attachments[0].type !== attachmentTypes.voice && parentNotLinkAttachment && message.parentMessage.attachments.map(function (attachment, index) {
+  }, attachementsLength > 0 && message.parentMessage.attachments.map(function (attachment, index) {
     return /*#__PURE__*/React__default.createElement(Attachment$1, {
       key: attachment.tid || attachment.url,
       backgroundColor: message.incoming ? incomingRepliedMessageBackground || bubbleIncomingX : ownRepliedMessageBackground || bubbleOutgoingX,
@@ -27885,7 +27896,8 @@ var RepliedMessage = function RepliedMessage(_ref) {
       videoAttachmentMaxHeight: videoAttachmentMaxHeight
     });
   }), /*#__PURE__*/React__default.createElement(ReplyMessageBody, {
-    rtlDirection: ownMessageOnRightSide && !message.incoming
+    rtlDirection: ownMessageOnRightSide && !message.incoming,
+    maxWidth: "calc(100% - " + (attachementsLength * 40 + 10) + "px)"
   }, /*#__PURE__*/React__default.createElement(MessageOwner, {
     className: 'reply-message-owner',
     color: accentColor,
@@ -27922,8 +27934,10 @@ var ReplyMessageContainer = styled.div(_templateObject$v || (_templateObject$v =
 }, function (props) {
   return !props.withSenderName && props.withAttachments && '8px';
 });
-var ReplyMessageBody = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  margin-bottom: auto;\n  direction: ", ";\n  max-width: 100%;\n"])), function (props) {
+var ReplyMessageBody = styled.div(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteralLoose(["\n  margin-top: auto;\n  margin-bottom: auto;\n  direction: ", ";\n  max-width: ", ";\n"])), function (props) {
   return props.rtlDirection ? 'initial' : '';
+}, function (props) {
+  return props.maxWidth || '100%';
 });
 var MessageStatusDeleted = styled.span(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  font-style: italic;\n"])), function (props) {
   return props.color;

package/package.json

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