sceyt-chat-react-uikit 1.6.7-beta.17 → 1.6.7-beta.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/index.js +22 -23
  2. package/index.modern.js +22 -23
  3. package/package.json +1 -1
package/index.js CHANGED
@@ -19242,7 +19242,7 @@ var DeletedAvatarWrapper = styled__default(SvgDeletedUserAvatar)(_templateObject
19242
19242
  return props.color;
19243
19243
  });
19244
19244
 
19245
- var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
19245
+ var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1;
19246
19246
  var ChannelMessageText = function ChannelMessageText(_ref) {
19247
19247
  var isTypingOrRecording = _ref.isTypingOrRecording,
19248
19248
  textPrimary = _ref.textPrimary,
@@ -19257,7 +19257,7 @@ var ChannelMessageText = function ChannelMessageText(_ref) {
19257
19257
  typingOrRecording = _ref.typingOrRecording,
19258
19258
  channel = _ref.channel,
19259
19259
  isDirectChannel = _ref.isDirectChannel;
19260
- return /*#__PURE__*/React__default.createElement("div", null, isTypingOrRecording && (/*#__PURE__*/React__default.createElement(TypingIndicator, null, !isDirectChannel && /*#__PURE__*/React__default.createElement(Points, {
19260
+ return /*#__PURE__*/React__default.createElement(MessageTextContainer, null, isTypingOrRecording && (/*#__PURE__*/React__default.createElement(TypingIndicator, null, !isDirectChannel && /*#__PURE__*/React__default.createElement(Points, {
19261
19261
  color: textPrimary
19262
19262
  }, ":"), typingOrRecording.isTyping ? 'typing' : 'recording', "...")), !isTypingOrRecording && (draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageText, {
19263
19263
  color: textSecondary
@@ -19614,6 +19614,7 @@ var UnreadCount = styled__default.span(_templateObject17$1 || (_templateObject17
19614
19614
  var PinnedIconWrapper = styled__default.span(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n & > svg {\n color: ", ";\n }\n"])), function (props) {
19615
19615
  return props.color;
19616
19616
  });
19617
+ var MessageTextContainer = styled__default.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-end;\n gap: 4px;\n"])));
19617
19618
 
19618
19619
  var _templateObject$5, _templateObject2$5;
19619
19620
  var SearchInputContainer = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n width: 100%;\n max-width: ", ";\n box-sizing: border-box;\n padding: ", ";\n\n & ", " {\n ", ";\n }\n"])), function (props) {
@@ -19978,7 +19979,7 @@ var Container$4 = styled__default.div(_templateObject$8 || (_templateObject$8 =
19978
19979
  }, function (props) {
19979
19980
  return props.height ? props.height + "px" : '0px';
19980
19981
  }, function (props) {
19981
- return props.background;
19982
+ return props.background + "40";
19982
19983
  });
19983
19984
 
19984
19985
  var _templateObject$9, _templateObject2$8, _templateObject3$5, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject0$2, _templateObject1$2;
@@ -21509,6 +21510,7 @@ var ChannelList = function ChannelList(_ref) {
21509
21510
  var _useState4 = React.useState(false),
21510
21511
  isScrolling = _useState4[0],
21511
21512
  setIsScrolling = _useState4[1];
21513
+ var activeChannelMembers = reactRedux.useSelector(activeChannelMembersSelector, reactRedux.shallowEqual);
21512
21514
  var handleSetChannelList = function handleSetChannelList(updatedChannels, isRemove) {
21513
21515
  if (isRemove) {
21514
21516
  var channelsMap = {};
@@ -21668,9 +21670,11 @@ var ChannelList = function ChannelList(_ref) {
21668
21670
  }, [searchValue]);
21669
21671
  useDidUpdate(function () {
21670
21672
  if (getSelectedChannel) {
21671
- getSelectedChannel(activeChannel);
21673
+ getSelectedChannel(_extends({}, activeChannel, activeChannelMembers && activeChannelMembers.length > 0 ? {
21674
+ members: activeChannelMembers
21675
+ } : {}));
21672
21676
  }
21673
- }, [activeChannel.id]);
21677
+ }, [activeChannel.id, activeChannelMembers === null || activeChannelMembers === void 0 ? void 0 : activeChannelMembers.length]);
21674
21678
  useDidUpdate(function () {
21675
21679
  if (closeSearchChannels) {
21676
21680
  getMyChannels();
@@ -24280,8 +24284,7 @@ function ReactionsPopup(_ref) {
24280
24284
  backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
24281
24285
  textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
24282
24286
  surface1 = _useColor[THEME_COLORS.SURFACE_1],
24283
- backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
24284
- surface2 = _useColor[THEME_COLORS.SURFACE_2];
24287
+ backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED];
24285
24288
  var popupRef = React.useRef(null);
24286
24289
  var scoresRef = React.useRef(null);
24287
24290
  var reactions = reactRedux.useSelector(reactionsListSelector, reactRedux.shallowEqual);
@@ -24395,8 +24398,7 @@ function ReactionsPopup(_ref) {
24395
24398
  },
24396
24399
  onMouseLeave: function onMouseLeave() {
24397
24400
  return setIsScrolling(false);
24398
- },
24399
- thumbColor: surface2
24401
+ }
24400
24402
  }, /*#__PURE__*/React__default.createElement(ReactionScoresList, {
24401
24403
  borderBottom: reactionsDetailsPopupHeaderItemsStyle !== 'bubbles'
24402
24404
  }, /*#__PURE__*/React__default.createElement(ReactionScoreItem, {
@@ -24432,8 +24434,7 @@ function ReactionsPopup(_ref) {
24432
24434
  },
24433
24435
  onMouseLeave: function onMouseLeave() {
24434
24436
  return setIsScrolling(false);
24435
- },
24436
- thumbColor: surface2
24437
+ }
24437
24438
  }, reactions.map(function (reaction) {
24438
24439
  return /*#__PURE__*/React__default.createElement(ReactionItem$1, {
24439
24440
  key: reaction.id,
@@ -24492,22 +24493,18 @@ var Container$d = styled__default.div(_templateObject$q || (_templateObject$q =
24492
24493
  }, function (props) {
24493
24494
  return props.backgroundColor;
24494
24495
  });
24495
- var UserNamePresence$1 = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n width: 100%;\n margin-left: 12px;\n"])));
24496
- var MemberName$1 = styled__default.h3(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n margin: 0;\n max-width: calc(100% - 47px);\n font-weight: 500;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n color: ", ";\n & > span {\n color: ", ";\n }\n"])), function (props) {
24496
+ var UserNamePresence$1 = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n width: calc(100% - 70px);\n margin-left: 12px;\n"])));
24497
+ var MemberName$1 = styled__default.h3(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n margin: 0;\n max-width: calc(100% - 7px);\n font-weight: 500;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n color: ", ";\n & > span {\n color: ", ";\n }\n"])), function (props) {
24497
24498
  return props.color;
24498
24499
  }, function (props) {
24499
24500
  return props.color;
24500
24501
  });
24501
- var ReactionsList = styled__default.ul(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n overflow: ", ";\n overflow-x: hidden;\n list-style: none;\n transition: all 0.2s;\n height: ", ";\n calc(100% - 57px);\n\n &.show-scrollbar {\n overflow-x: hidden;\n }\n &::-webkit-scrollbar {\n width: 8px;\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n &.show-scrollbar::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 4px;\n }\n &.show-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n }\n"])), function (props) {
24502
+ var ReactionsList = styled__default.ul(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n overflow: ", ";\n overflow-y: auto;\n overflow-x: hidden;\n list-style: none;\n transition: all 0.2s;\n height: ", ";\n\n &::-webkit-scrollbar {\n display: none;\n }\n &::-webkit-scrollbar-thumb {\n display: none;\n }\n &::-webkit-scrollbar-track {\n display: none;\n }\n"])), function (props) {
24502
24503
  return !props.popupHeight && 'hidden';
24503
24504
  }, function (props) {
24504
24505
  return "calc(100% - " + (props.scoresHeight || 57) + "px)";
24505
- }, function (props) {
24506
- return props.thumbColor;
24507
- });
24508
- var ReactionScoresCont = styled__default.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n overflow-y: auto;\n &.show-scrollbar {\n overflow-x: hidden;\n }\n &::-webkit-scrollbar {\n width: 8px;\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n &.show-scrollbar::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 4px;\n }\n &.show-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n }\n"])), function (props) {
24509
- return props.thumbColor;
24510
24506
  });
24507
+ var ReactionScoresCont = styled__default.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n overflow: auto;\n overflow-y: hidden;\n\n &::-webkit-scrollbar {\n display: none;\n }\n &::-webkit-scrollbar-thumb {\n display: none;\n }\n &::-webkit-scrollbar-track {\n display: none;\n }\n"])));
24511
24508
  var ReactionScoresList = styled__default.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n display: flex;\n padding: 2px 8px 0;\n"])));
24512
24509
  var TabKey = styled__default.span(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose([""])));
24513
24510
  var ReactionScoreItem = styled__default.div(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n white-space: nowrap;\n padding: ", ";\n font-weight: 500;\n font-size: 13px;\n color: ", ";\n margin-bottom: -1px;\n cursor: pointer;\n & > span {\n position: relative;\n padding: ", ";\n border-radius: 16px;\n height: 30px;\n box-sizing: border-box;\n font-family: Inter, sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: ", ";\n background-color: ", ";\n color: ", ";\n ", "\n\n & ", " {\n font-family:\n apple color emoji,\n segoe ui emoji,\n noto color emoji,\n android emoji,\n emojisymbols,\n emojione mozilla,\n twemoji mozilla,\n segoe ui symbol;\n margin-right: 4px;\n font-size: 15px;\n }\n }\n"])), function (props) {
@@ -33822,7 +33819,7 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
33822
33819
  }));
33823
33820
  };
33824
33821
 
33825
- var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$1, _templateObject20$1, _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;
33822
+ var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$1, _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;
33826
33823
  function AutoFocusPlugin(_ref) {
33827
33824
  var messageForReply = _ref.messageForReply;
33828
33825
  var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
@@ -35471,7 +35468,7 @@ var AudioCont = styled__default.div(_templateObject15$2 || (_templateObject15$2
35471
35468
  var ChosenAttachments = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 16px 16px 14px;\n overflow-x: auto;\n\n & ", " {\n width: 100%;\n height: 100%;\n border-radius: 4px;\n object-fit: cover;\n }\n\n & ", " {\n width: 240px;\n padding: 5px 12px;\n border-radius: 8px;\n height: 50px;\n }\n"])), AttachmentImg$1, AttachmentFile$1);
35472
35469
  var TypingIndicator$1 = styled__default.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 100%;\n left: 16px;\n"])));
35473
35470
  var TypingIndicatorCont = styled__default.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 12px;\n gap: 4px;\n"])));
35474
- var TypingFrom = styled__default.h5(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n margin: 0 4px 0 0;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
35471
+ var TypingFrom = styled__default.h5(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n margin: 0 4px 0 0;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
35475
35472
  return props.color;
35476
35473
  });
35477
35474
  var sizeAnimation = styled.keyframes(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n 0% {\n width: 2px;\n height: 2px;\n opacity: 0.4;\n }\n 50% {\n width: 2px;\n height: 2px;\n opacity: 0.4;\n }\n 100% {\n width: 6px;\n height: 6px;\n opacity: 1;\n }\n"])));
@@ -37243,7 +37240,9 @@ var VoiceItem = function VoiceItem(_ref) {
37243
37240
  type: 'audio/mpeg'
37244
37241
  })));
37245
37242
  };
37246
- var FileIconCont$1 = styled__default.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n circle {\n fill: ", ";\n }\n"])), function (props) {
37243
+ var FileIconCont$1 = styled__default.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n fill: ", ";\n rect {\n fill: ", ";\n }\n"])), function (props) {
37244
+ return props.fill || 'transparent';
37245
+ }, function (props) {
37247
37246
  return props.fill || 'transparent';
37248
37247
  });
37249
37248
  var FileHoverIconCont$1 = styled__default.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n fill: ", ";\n rect {\n fill: ", ";\n }\n"])), function (props) {
@@ -37449,7 +37448,7 @@ var DetailsTab = function DetailsTab(_ref) {
37449
37448
  })));
37450
37449
  };
37451
37450
  var Container$r = styled__default.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n min-height: calc(100vh - 64px);\n"])));
37452
- var DetailsTabHeader = styled__default.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n overflow-x: auto;\n overflow-y: hidden;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n display: flex;\n justify-content: center;\n position: sticky;\n top: 0;\n z-index: 12;\n /* width */\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: transparent;\n }\n button {\n position: relative;\n border: none;\n background: transparent;\n outline: none;\n height: 44px;\n text-transform: capitalize;\n font-style: normal;\n font-weight: 500;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n min-width: ", ";\n cursor: pointer;\n }\n\n & span {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: 100%;\n }\n\n & .active span {\n color: ", ";\n\n &:after {\n content: '';\n width: 100%;\n border-radius: 2px;\n height: 2px;\n background-color: ", ";\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n }\n }\n"])), function (props) {
37451
+ var DetailsTabHeader = styled__default.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n overflow-x: auto;\n overflow-y: hidden;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n display: flex;\n justify-content: space-between;\n position: sticky;\n top: 0;\n z-index: 12;\n /* width */\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: transparent;\n }\n button {\n position: relative;\n border: none;\n background: transparent;\n outline: none;\n height: 44px;\n text-transform: capitalize;\n font-style: normal;\n font-weight: 500;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n min-width: ", ";\n cursor: pointer;\n }\n\n & span {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: 100%;\n }\n\n & .active span {\n color: ", ";\n\n &:after {\n content: '';\n width: 100%;\n border-radius: 2px;\n height: 2px;\n background-color: ", ";\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n }\n }\n"])), function (props) {
37453
37452
  return props.borderColor;
37454
37453
  }, function (props) {
37455
37454
  return props.backgroundColor || 'transparent';
package/index.modern.js CHANGED
@@ -19219,7 +19219,7 @@ var DeletedAvatarWrapper = styled(SvgDeletedUserAvatar)(_templateObject4$2 || (_
19219
19219
  return props.color;
19220
19220
  });
19221
19221
 
19222
- var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
19222
+ var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1;
19223
19223
  var ChannelMessageText = function ChannelMessageText(_ref) {
19224
19224
  var isTypingOrRecording = _ref.isTypingOrRecording,
19225
19225
  textPrimary = _ref.textPrimary,
@@ -19234,7 +19234,7 @@ var ChannelMessageText = function ChannelMessageText(_ref) {
19234
19234
  typingOrRecording = _ref.typingOrRecording,
19235
19235
  channel = _ref.channel,
19236
19236
  isDirectChannel = _ref.isDirectChannel;
19237
- return /*#__PURE__*/React__default.createElement("div", null, isTypingOrRecording && (/*#__PURE__*/React__default.createElement(TypingIndicator, null, !isDirectChannel && /*#__PURE__*/React__default.createElement(Points, {
19237
+ return /*#__PURE__*/React__default.createElement(MessageTextContainer, null, isTypingOrRecording && (/*#__PURE__*/React__default.createElement(TypingIndicator, null, !isDirectChannel && /*#__PURE__*/React__default.createElement(Points, {
19238
19238
  color: textPrimary
19239
19239
  }, ":"), typingOrRecording.isTyping ? 'typing' : 'recording', "...")), !isTypingOrRecording && (draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageText, {
19240
19240
  color: textSecondary
@@ -19591,6 +19591,7 @@ var UnreadCount = styled.span(_templateObject17$1 || (_templateObject17$1 = _tag
19591
19591
  var PinnedIconWrapper = styled.span(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n & > svg {\n color: ", ";\n }\n"])), function (props) {
19592
19592
  return props.color;
19593
19593
  });
19594
+ var MessageTextContainer = styled.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: flex-end;\n gap: 4px;\n"])));
19594
19595
 
19595
19596
  var _templateObject$5, _templateObject2$5;
19596
19597
  var SearchInputContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n width: 100%;\n max-width: ", ";\n box-sizing: border-box;\n padding: ", ";\n\n & ", " {\n ", ";\n }\n"])), function (props) {
@@ -19955,7 +19956,7 @@ var Container$4 = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTe
19955
19956
  }, function (props) {
19956
19957
  return props.height ? props.height + "px" : '0px';
19957
19958
  }, function (props) {
19958
- return props.background;
19959
+ return props.background + "40";
19959
19960
  });
19960
19961
 
19961
19962
  var _templateObject$9, _templateObject2$8, _templateObject3$5, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject0$2, _templateObject1$2;
@@ -21486,6 +21487,7 @@ var ChannelList = function ChannelList(_ref) {
21486
21487
  var _useState4 = useState(false),
21487
21488
  isScrolling = _useState4[0],
21488
21489
  setIsScrolling = _useState4[1];
21490
+ var activeChannelMembers = useSelector(activeChannelMembersSelector, shallowEqual);
21489
21491
  var handleSetChannelList = function handleSetChannelList(updatedChannels, isRemove) {
21490
21492
  if (isRemove) {
21491
21493
  var channelsMap = {};
@@ -21645,9 +21647,11 @@ var ChannelList = function ChannelList(_ref) {
21645
21647
  }, [searchValue]);
21646
21648
  useDidUpdate(function () {
21647
21649
  if (getSelectedChannel) {
21648
- getSelectedChannel(activeChannel);
21650
+ getSelectedChannel(_extends({}, activeChannel, activeChannelMembers && activeChannelMembers.length > 0 ? {
21651
+ members: activeChannelMembers
21652
+ } : {}));
21649
21653
  }
21650
- }, [activeChannel.id]);
21654
+ }, [activeChannel.id, activeChannelMembers === null || activeChannelMembers === void 0 ? void 0 : activeChannelMembers.length]);
21651
21655
  useDidUpdate(function () {
21652
21656
  if (closeSearchChannels) {
21653
21657
  getMyChannels();
@@ -24257,8 +24261,7 @@ function ReactionsPopup(_ref) {
24257
24261
  backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
24258
24262
  textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
24259
24263
  surface1 = _useColor[THEME_COLORS.SURFACE_1],
24260
- backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
24261
- surface2 = _useColor[THEME_COLORS.SURFACE_2];
24264
+ backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED];
24262
24265
  var popupRef = useRef(null);
24263
24266
  var scoresRef = useRef(null);
24264
24267
  var reactions = useSelector(reactionsListSelector, shallowEqual);
@@ -24372,8 +24375,7 @@ function ReactionsPopup(_ref) {
24372
24375
  },
24373
24376
  onMouseLeave: function onMouseLeave() {
24374
24377
  return setIsScrolling(false);
24375
- },
24376
- thumbColor: surface2
24378
+ }
24377
24379
  }, /*#__PURE__*/React__default.createElement(ReactionScoresList, {
24378
24380
  borderBottom: reactionsDetailsPopupHeaderItemsStyle !== 'bubbles'
24379
24381
  }, /*#__PURE__*/React__default.createElement(ReactionScoreItem, {
@@ -24409,8 +24411,7 @@ function ReactionsPopup(_ref) {
24409
24411
  },
24410
24412
  onMouseLeave: function onMouseLeave() {
24411
24413
  return setIsScrolling(false);
24412
- },
24413
- thumbColor: surface2
24414
+ }
24414
24415
  }, reactions.map(function (reaction) {
24415
24416
  return /*#__PURE__*/React__default.createElement(ReactionItem$1, {
24416
24417
  key: reaction.id,
@@ -24469,22 +24470,18 @@ var Container$d = styled.div(_templateObject$q || (_templateObject$q = _taggedTe
24469
24470
  }, function (props) {
24470
24471
  return props.backgroundColor;
24471
24472
  });
24472
- var UserNamePresence$1 = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n width: 100%;\n margin-left: 12px;\n"])));
24473
- var MemberName$1 = styled.h3(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n margin: 0;\n max-width: calc(100% - 47px);\n font-weight: 500;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n color: ", ";\n & > span {\n color: ", ";\n }\n"])), function (props) {
24473
+ var UserNamePresence$1 = styled.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n width: calc(100% - 70px);\n margin-left: 12px;\n"])));
24474
+ var MemberName$1 = styled.h3(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n margin: 0;\n max-width: calc(100% - 7px);\n font-weight: 500;\n font-size: 15px;\n line-height: 18px;\n letter-spacing: -0.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n color: ", ";\n & > span {\n color: ", ";\n }\n"])), function (props) {
24474
24475
  return props.color;
24475
24476
  }, function (props) {
24476
24477
  return props.color;
24477
24478
  });
24478
- var ReactionsList = styled.ul(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n overflow: ", ";\n overflow-x: hidden;\n list-style: none;\n transition: all 0.2s;\n height: ", ";\n calc(100% - 57px);\n\n &.show-scrollbar {\n overflow-x: hidden;\n }\n &::-webkit-scrollbar {\n width: 8px;\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n &.show-scrollbar::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 4px;\n }\n &.show-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n }\n"])), function (props) {
24479
+ var ReactionsList = styled.ul(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n overflow: ", ";\n overflow-y: auto;\n overflow-x: hidden;\n list-style: none;\n transition: all 0.2s;\n height: ", ";\n\n &::-webkit-scrollbar {\n display: none;\n }\n &::-webkit-scrollbar-thumb {\n display: none;\n }\n &::-webkit-scrollbar-track {\n display: none;\n }\n"])), function (props) {
24479
24480
  return !props.popupHeight && 'hidden';
24480
24481
  }, function (props) {
24481
24482
  return "calc(100% - " + (props.scoresHeight || 57) + "px)";
24482
- }, function (props) {
24483
- return props.thumbColor;
24484
- });
24485
- var ReactionScoresCont = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n overflow-y: auto;\n &.show-scrollbar {\n overflow-x: hidden;\n }\n &::-webkit-scrollbar {\n width: 8px;\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n &.show-scrollbar::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 4px;\n }\n &.show-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n }\n"])), function (props) {
24486
- return props.thumbColor;
24487
24483
  });
24484
+ var ReactionScoresCont = styled.div(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n overflow: auto;\n overflow-y: hidden;\n\n &::-webkit-scrollbar {\n display: none;\n }\n &::-webkit-scrollbar-thumb {\n display: none;\n }\n &::-webkit-scrollbar-track {\n display: none;\n }\n"])));
24488
24485
  var ReactionScoresList = styled.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n display: flex;\n padding: 2px 8px 0;\n"])));
24489
24486
  var TabKey = styled.span(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose([""])));
24490
24487
  var ReactionScoreItem = styled.div(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n white-space: nowrap;\n padding: ", ";\n font-weight: 500;\n font-size: 13px;\n color: ", ";\n margin-bottom: -1px;\n cursor: pointer;\n & > span {\n position: relative;\n padding: ", ";\n border-radius: 16px;\n height: 30px;\n box-sizing: border-box;\n font-family: Inter, sans-serif;\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: ", ";\n background-color: ", ";\n color: ", ";\n ", "\n\n & ", " {\n font-family:\n apple color emoji,\n segoe ui emoji,\n noto color emoji,\n android emoji,\n emojisymbols,\n emojione mozilla,\n twemoji mozilla,\n segoe ui symbol;\n margin-right: 4px;\n font-size: 15px;\n }\n }\n"])), function (props) {
@@ -33799,7 +33796,7 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
33799
33796
  }));
33800
33797
  };
33801
33798
 
33802
- var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$1, _templateObject20$1, _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;
33799
+ var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$1, _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;
33803
33800
  function AutoFocusPlugin(_ref) {
33804
33801
  var messageForReply = _ref.messageForReply;
33805
33802
  var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -35448,7 +35445,7 @@ var AudioCont = styled.div(_templateObject15$2 || (_templateObject15$2 = _tagged
35448
35445
  var ChosenAttachments = styled.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 16px 16px 14px;\n overflow-x: auto;\n\n & ", " {\n width: 100%;\n height: 100%;\n border-radius: 4px;\n object-fit: cover;\n }\n\n & ", " {\n width: 240px;\n padding: 5px 12px;\n border-radius: 8px;\n height: 50px;\n }\n"])), AttachmentImg$1, AttachmentFile$1);
35449
35446
  var TypingIndicator$1 = styled.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 100%;\n left: 16px;\n"])));
35450
35447
  var TypingIndicatorCont = styled.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 12px;\n gap: 4px;\n"])));
35451
- var TypingFrom = styled.h5(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n margin: 0 4px 0 0;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
35448
+ var TypingFrom = styled.h5(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n margin: 0 4px 0 0;\n font-weight: 400;\n font-size: 13px;\n line-height: 16px;\n letter-spacing: -0.2px;\n color: ", ";\n"])), function (props) {
35452
35449
  return props.color;
35453
35450
  });
35454
35451
  var sizeAnimation = keyframes(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n 0% {\n width: 2px;\n height: 2px;\n opacity: 0.4;\n }\n 50% {\n width: 2px;\n height: 2px;\n opacity: 0.4;\n }\n 100% {\n width: 6px;\n height: 6px;\n opacity: 1;\n }\n"])));
@@ -37220,7 +37217,9 @@ var VoiceItem = function VoiceItem(_ref) {
37220
37217
  type: 'audio/mpeg'
37221
37218
  })));
37222
37219
  };
37223
- var FileIconCont$1 = styled.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n circle {\n fill: ", ";\n }\n"])), function (props) {
37220
+ var FileIconCont$1 = styled.span(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: inline-flex;\n fill: ", ";\n rect {\n fill: ", ";\n }\n"])), function (props) {
37221
+ return props.fill || 'transparent';
37222
+ }, function (props) {
37224
37223
  return props.fill || 'transparent';
37225
37224
  });
37226
37225
  var FileHoverIconCont$1 = styled.span(_templateObject2$K || (_templateObject2$K = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: none;\n fill: ", ";\n rect {\n fill: ", ";\n }\n"])), function (props) {
@@ -37426,7 +37425,7 @@ var DetailsTab = function DetailsTab(_ref) {
37426
37425
  })));
37427
37426
  };
37428
37427
  var Container$r = styled.div(_templateObject$S || (_templateObject$S = _taggedTemplateLiteralLoose(["\n min-height: calc(100vh - 64px);\n"])));
37429
- var DetailsTabHeader = styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n overflow-x: auto;\n overflow-y: hidden;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n display: flex;\n justify-content: center;\n position: sticky;\n top: 0;\n z-index: 12;\n /* width */\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: transparent;\n }\n button {\n position: relative;\n border: none;\n background: transparent;\n outline: none;\n height: 44px;\n text-transform: capitalize;\n font-style: normal;\n font-weight: 500;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n min-width: ", ";\n cursor: pointer;\n }\n\n & span {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: 100%;\n }\n\n & .active span {\n color: ", ";\n\n &:after {\n content: '';\n width: 100%;\n border-radius: 2px;\n height: 2px;\n background-color: ", ";\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n }\n }\n"])), function (props) {
37428
+ var DetailsTabHeader = styled.div(_templateObject2$L || (_templateObject2$L = _taggedTemplateLiteralLoose(["\n overflow-x: auto;\n overflow-y: hidden;\n border-bottom: 1px solid ", ";\n background-color: ", ";\n display: flex;\n justify-content: space-between;\n position: sticky;\n top: 0;\n z-index: 12;\n /* width */\n &::-webkit-scrollbar {\n width: 0;\n height: 0;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n /* Handle on hover */\n &::-webkit-scrollbar-thumb:hover {\n background: transparent;\n }\n button {\n position: relative;\n border: none;\n background: transparent;\n outline: none;\n height: 44px;\n text-transform: capitalize;\n font-style: normal;\n font-weight: 500;\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n min-width: ", ";\n cursor: pointer;\n }\n\n & span {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: 100%;\n }\n\n & .active span {\n color: ", ";\n\n &:after {\n content: '';\n width: 100%;\n border-radius: 2px;\n height: 2px;\n background-color: ", ";\n position: absolute;\n top: calc(100% - 1px);\n left: 0;\n }\n }\n"])), function (props) {
37430
37429
  return props.borderColor;
37431
37430
  }, function (props) {
37432
37431
  return props.backgroundColor || 'transparent';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.6.7-beta.17",
3
+ "version": "1.6.7-beta.19",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",