sceyt-chat-react-uikit 1.5.0 → 1.5.2

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 (19) hide show
  1. package/assets/svg/copyIcon.svg +3 -0
  2. package/assets/svg/deleteIcon.svg +3 -0
  3. package/assets/svg/editIcon.svg +3 -0
  4. package/assets/svg/emojiAnimalIcon.svg +2 -6
  5. package/assets/svg/emojiFlagicon.svg +2 -2
  6. package/assets/svg/emojiFoodIcon.svg +4 -2
  7. package/assets/svg/emojiObjectIcon.svg +9 -2
  8. package/assets/svg/emojiSmileIcon.svg +3 -5
  9. package/assets/svg/emojiSymbolsIcon.svg +2 -2
  10. package/assets/svg/emojiTravelIcon.svg +2 -2
  11. package/assets/svg/replyIcon.svg +2 -2
  12. package/assets/svg/replyInThreadIcon.svg +3 -0
  13. package/components/Emojis/index.d.ts +2 -2
  14. package/components/Message/index.d.ts +5 -2
  15. package/components/Messages/index.d.ts +4 -1
  16. package/components/SendMessageInput/index.d.ts +1 -1
  17. package/index.js +811 -681
  18. package/package.json +1 -1
  19. package/types/index.d.ts +26 -17
package/index.js CHANGED
@@ -1455,6 +1455,25 @@ var queryDirection = {
1455
1455
  NEAR: 'near'
1456
1456
  };
1457
1457
 
1458
+ // A type of promise-like that resolves synchronously and supports only one observer
1459
+
1460
+ const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
1461
+
1462
+ const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
1463
+
1464
+ // Asynchronously call a function and send errors to recovery continuation
1465
+ function _catch(body, recover) {
1466
+ try {
1467
+ var result = body();
1468
+ } catch(e) {
1469
+ return recover(e);
1470
+ }
1471
+ if (result && result.then) {
1472
+ return result.then(void 0, recover);
1473
+ }
1474
+ return result;
1475
+ }
1476
+
1458
1477
  var _path;
1459
1478
 
1460
1479
  function _extends$1() {
@@ -7300,7 +7319,7 @@ var colors = {
7300
7319
  gray7: '#898B99',
7301
7320
  gray8: '#3A3C3E',
7302
7321
  gray9: '#757D8B',
7303
- gray10: '#F3F5F7',
7322
+ gray10: '#707388',
7304
7323
  gray11: '#F1F2F6',
7305
7324
  pink1: '#ff3e74',
7306
7325
  purple1: '#9f35e7',
@@ -7448,36 +7467,52 @@ var bytesToSize = function bytesToSize(bytes, decimals) {
7448
7467
  var systemMessageUserName = function systemMessageUserName(contact, userId) {
7449
7468
  return contact ? contact.firstName ? contact.firstName.split(' ')[0] : contact.id : userId || 'Deleted user';
7450
7469
  };
7451
- var downloadFile = function downloadFile(attachment) {
7470
+ var downloadFile = function downloadFile(attachment, done) {
7452
7471
  try {
7453
- var customDownloader = getCustomDownloader();
7454
- var response;
7472
+ return Promise.resolve(_catch(function () {
7473
+ var customDownloader = getCustomDownloader();
7474
+ var response;
7455
7475
 
7456
- var _temp2 = function () {
7457
- if (customDownloader) {
7458
- customDownloader(attachment.url).then(function (url) {
7459
- try {
7460
- return Promise.resolve(fetch(url)).then(function (_fetch2) {
7461
- response = _fetch2;
7462
- return Promise.resolve(response.blob()).then(function (data) {
7463
- FileSaver.saveAs(data, attachment.name);
7476
+ var _temp = function () {
7477
+ if (customDownloader) {
7478
+ customDownloader(attachment.url).then(function (url) {
7479
+ try {
7480
+ return Promise.resolve(fetch(url)).then(function (_fetch2) {
7481
+ response = _fetch2;
7482
+ return Promise.resolve(response.blob()).then(function (data) {
7483
+ if (done) {
7484
+ done(attachment.id || '');
7485
+ }
7486
+
7487
+ FileSaver.saveAs(data, attachment.name);
7488
+ });
7464
7489
  });
7490
+ } catch (e) {
7491
+ return Promise.reject(e);
7492
+ }
7493
+ });
7494
+ } else {
7495
+ return Promise.resolve(fetch(attachment.url)).then(function (_fetch) {
7496
+ response = _fetch;
7497
+ return Promise.resolve(response.blob()).then(function (data) {
7498
+ if (done) {
7499
+ done(attachment.id || '');
7500
+ }
7501
+
7502
+ FileSaver.saveAs(data, attachment.name);
7465
7503
  });
7466
- } catch (e) {
7467
- return Promise.reject(e);
7468
- }
7469
- });
7470
- } else {
7471
- return Promise.resolve(fetch(attachment.url)).then(function (_fetch) {
7472
- response = _fetch;
7473
- return Promise.resolve(response.blob()).then(function (data) {
7474
- FileSaver.saveAs(data, attachment.name);
7475
7504
  });
7476
- });
7477
- }
7478
- }();
7505
+ }
7506
+ }();
7507
+
7508
+ if (_temp && _temp.then) return _temp.then(function () {});
7509
+ }, function (e) {
7510
+ console.log('error on download... ', e);
7479
7511
 
7480
- return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
7512
+ if (done) {
7513
+ done(attachment.id || '', true);
7514
+ }
7515
+ }));
7481
7516
  } catch (e) {
7482
7517
  return Promise.reject(e);
7483
7518
  }
@@ -9529,10 +9564,12 @@ var Button = styled__default.button(_templateObject16 || (_templateObject16 = _t
9529
9564
  }, function (props) {
9530
9565
  return props.disabled ? 0.5 : 0.8;
9531
9566
  });
9532
- var PopupName = styled__default.h3(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n line-height: 23px;\n color: ", ";\n margin: 0;\n margin-top: ", ";\n margin-bottom: ", ";\n word-break: break-word;\n\n ", "\n"])), colors.gray6, function (props) {
9567
+ var PopupName = styled__default.h3(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: 500;\n font-size: 20px;\n line-height: 23px;\n color: ", ";\n margin: 0;\n margin-top: ", ";\n margin-bottom: ", ";\n padding: ", ";\n word-break: break-word;\n\n ", "\n"])), colors.gray6, function (props) {
9533
9568
  return props.marginTop;
9534
9569
  }, function (props) {
9535
9570
  return props.marginBottom;
9571
+ }, function (props) {
9572
+ return props.padding;
9536
9573
  }, function (props) {
9537
9574
  if (props.isDelete) {
9538
9575
  return "\n max-width: calc(100% - 20px);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n ";
@@ -9571,10 +9608,10 @@ var Popup = styled__default.div(_templateObject20 || (_templateObject20 = _tagge
9571
9608
  }, function (props) {
9572
9609
  return props.isLoading && "\n user-select: none;\n\n & > * {\n pointer-events: none;\n user-select: none;\n }\n\n " + ButtonBlock + " {\n a, button {\n pointer-events: none;\n user-select: none;\n opacity: 0.7;\n }\n }\n ";
9573
9610
  });
9574
- var PopupBody = styled__default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n padding: ", ";\n margin-bottom: 8px;\n\n height: ", ";\n"])), function (props) {
9575
- return props.padding + "px";
9611
+ var PopupBody = styled__default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n padding: ", ";\n margin-bottom: 8px;\n height: ", ";\n"])), function (props) {
9612
+ return (props.paddingV || 0) + " " + (props.paddingH || 0);
9576
9613
  }, function (props) {
9577
- return props.withFooter ? "calc(100% - (54px + " + props.padding + "px))" : 'calc(100% - 54px)';
9614
+ return props.withFooter ? "calc(100% - (54px + " + props.paddingV + "))" : 'calc(100% - 54px)';
9578
9615
  });
9579
9616
  var PopupDescription = styled__default.span(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: normal;\n font-size: 15px;\n line-height: 22px;\n color: ", ";\n cursor: default;\n white-space: pre-line;\n margin-top: ", ";\n margin-bottom: ", ";\n word-break: break-word;\n\n .highlight {\n text-decoration: underline;\n font-weight: 500;\n color: ", ";\n }\n"])), colors.gray8, function (props) {
9580
9617
  return props.marginTop || '10px';
@@ -9590,7 +9627,7 @@ var SectionHeader = styled__default.h4(_templateObject25 || (_templateObject25 =
9590
9627
  }, function (props) {
9591
9628
  return props.margin || 0;
9592
9629
  });
9593
- var ItemNote = styled__default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n display: none;\n position: absolute;\n z-index: 301;\n padding: 10px 12px;\n background-color: ", ";\n border-radius: 4px;\n font-size: 0.75rem;\n white-space: nowrap;\n font-weight: 600;\n color: white;\n pointer-events: none;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n z-index: -1;\n background-color: ", ";\n border-radius: 1px;\n width: 14px;\n height: 14px;\n\n ", " ", "\n }\n\n ", " ", " ", " ", "\n"])), colors.blue6, colors.blue6, function (props) {
9630
+ var ItemNote = styled__default.div(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n display: none;\n position: absolute;\n z-index: 301;\n padding: 10px 12px;\n background-color: ", ";\n border-radius: 12px;\n font-size: 0.75rem;\n white-space: nowrap;\n font-weight: 600;\n color: white;\n pointer-events: none;\n user-select: none;\n\n &::before {\n content: '';\n position: absolute;\n z-index: -1;\n background-color: ", ";\n border-radius: 3px;\n width: 14px;\n height: 14px;\n\n ", " ", "\n }\n\n ", " ", " ", " ", "\n"])), colors.textColor1, colors.textColor1, function (props) {
9594
9631
  return props.direction === 'right' && "\n left: -5px;\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n ";
9595
9632
  }, function (props) {
9596
9633
  return props.direction === 'top' && "\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
@@ -9642,22 +9679,26 @@ var ReplyMessageText = styled__default.span(_templateObject34 || (_templateObjec
9642
9679
  return props.lineHeight || '20px';
9643
9680
  }, colors.gray6);
9644
9681
  var CloseIcon = styled__default(SvgClose)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 13px;\n right: 13px;\n cursor: pointer;\n padding: 15px;\n"])));
9645
- var ClearTypedText = styled__default(CloseIcon)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 8px;\n right: 22px;\n cursor: pointer;\n padding: 4px;\n"])));
9682
+ var ClearTypedText = styled__default(CloseIcon)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 8px;\n right: 10px;\n cursor: pointer;\n padding: 4px;\n"])));
9646
9683
  var StyledSearchSvg = styled__default(SvgSearch)(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 12px;\n left: ", ";\n"])), function (props) {
9647
9684
  return props.left || '14px';
9648
9685
  });
9649
- var SubTitle = styled__default.span(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n line-height: 16px;\n letter-spacing: -0.078px;\n color: ", ";\n"])), function (props) {
9686
+ var SubTitle = styled__default.span(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n font-size: 13px;\n line-height: 16px;\n letter-spacing: -0.078px;\n color: ", ";\n margin: ", ";\n"])), function (props) {
9650
9687
  return props.color || colors.gray9;
9688
+ }, function (props) {
9689
+ return props.margin;
9651
9690
  });
9652
9691
  var AttachmentIconCont = styled__default.span(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n"])));
9653
- var UploadingIcon = styled__default.span(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n border: ", " solid rgba(255, 255, 255, 0.8);\n border-top: ", " solid rgba(0, 0, 0, 0);\n border-radius: 50%;\n width: ", ";\n height: ", ";\n\n animation: preloader 1.5s linear infinite;\n\n @keyframes preloader {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])), function (props) {
9654
- return props.fileAttachment ? '2px' : '3px';
9692
+ var UploadingIcon = styled__default.span(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n border-style: solid;\n border-color: ", ";\n border-width: ", ";\n border-top-width: ", ";\n border-top-color: rgba(0, 0, 0, 0);\n border-radius: 50%;\n width: ", ";\n height: ", ";\n\n animation: preloader 1.5s linear infinite;\n\n @keyframes preloader {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n"])), function (props) {
9693
+ return props.color || 'rgba(255, 255, 255, 0.8)';
9655
9694
  }, function (props) {
9656
- return props.fileAttachment ? '2px' : '3px';
9695
+ return props.borderWidth || (props.fileAttachment ? '2px' : '3px');
9657
9696
  }, function (props) {
9658
- return props.fileAttachment ? '26px' : props.isRepliedMessage ? '28px' : '40px';
9697
+ return props.borderWidth || (props.fileAttachment ? '2px' : '3px');
9659
9698
  }, function (props) {
9660
- return props.fileAttachment ? '26px' : props.isRepliedMessage ? '28px' : '40px';
9699
+ return props.width || (props.fileAttachment ? '26px' : props.isRepliedMessage ? '28px' : '40px');
9700
+ }, function (props) {
9701
+ return props.height || (props.fileAttachment ? '26px' : props.isRepliedMessage ? '28px' : '40px');
9661
9702
  });
9662
9703
  var TextInOneLine = styled__default.span(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n display: -webkit-box;\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n"])));
9663
9704
  var UploadPercent = styled__default.span(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n color: #fff;\n width: ", ";\n height: ", ";\n background-color: rgba(0,0,0,0.4);\n border-radius: ", ";\n}\n ", "\n"])), function (props) {
@@ -9780,7 +9821,6 @@ var makeUsername = function makeUsername(contact, user, fromContact) {
9780
9821
  var _contact$lastName;
9781
9822
 
9782
9823
  if (hideUserPresence && user && user.id && hideUserPresence(user)) {
9783
- console.log('user. .. . . ', user);
9784
9824
  return user.id.charAt(0).toUpperCase() + user.id.slice(1);
9785
9825
  }
9786
9826
 
@@ -9939,7 +9979,7 @@ function getActiveChannelId() {
9939
9979
  function setChannelsInMap(channels) {
9940
9980
  var channelsForUpdateLastReactionMessage = [];
9941
9981
  var formattedChannel = channels.map(function (channel) {
9942
- if (channel.userMessageReactions && channel.userMessageReactions.length && channel.lastMessage && channel.lastMessage.id < channel.userMessageReactions[0].id && channel.lastMessage.id !== channel.userMessageReactions[0].messageId) {
9982
+ if (channel.newReactions && channel.newReactions.length && channel.lastMessage && channel.lastMessage.id < channel.newReactions[0].id && channel.lastMessage.id !== channel.newReactions[0].messageId) {
9943
9983
  channelsForUpdateLastReactionMessage.push(channel);
9944
9984
  }
9945
9985
 
@@ -11659,7 +11699,7 @@ function watchForEvents() {
11659
11699
 
11660
11700
  _context3.next = 201;
11661
11701
  return effects.put(updateChannelDataAC(_channel8.id, {
11662
- unreadMessageCount: _channel8.unreadMessageCount
11702
+ unreadMessageCount: _channel8.newMessageCount
11663
11703
  }));
11664
11704
 
11665
11705
  case 201:
@@ -11745,13 +11785,13 @@ function watchForEvents() {
11745
11785
  }
11746
11786
  }
11747
11787
 
11748
- if (!(_channel10.userMessageReactions && _channel10.userMessageReactions.length)) {
11788
+ if (!(_channel10.newReactions && _channel10.newReactions.length)) {
11749
11789
  _context3.next = 232;
11750
11790
  break;
11751
11791
  }
11752
11792
 
11753
11793
  channelUpdateParams = {
11754
- userMessageReactions: _channel10.userMessageReactions,
11794
+ userMessageReactions: _channel10.newReactions,
11755
11795
  lastReactedMessage: _message2
11756
11796
  };
11757
11797
  _context3.next = 232;
@@ -11782,7 +11822,7 @@ function watchForEvents() {
11782
11822
  removeReactionOnAllMessages(_message3, _reaction, true);
11783
11823
 
11784
11824
  case 242:
11785
- if (_channel11.userMessageReactions && _channel11.userMessageReactions.length) {
11825
+ if (_channel11.newReactions && _channel11.newReactions.length) {
11786
11826
  _context3.next = 246;
11787
11827
  break;
11788
11828
  }
@@ -11846,7 +11886,7 @@ function watchForEvents() {
11846
11886
 
11847
11887
  _context3.next = 270;
11848
11888
  return effects.put(updateChannelDataAC(_channel13.id, {
11849
- lastMessage: {},
11889
+ lastMessage: null,
11850
11890
  unreadMessageCount: 0
11851
11891
  }));
11852
11892
 
@@ -11859,7 +11899,7 @@ function watchForEvents() {
11859
11899
  _context3.next = 275;
11860
11900
  return effects.put(updateChannelDataAC(_channel14.id, {
11861
11901
  muted: _channel14.muted,
11862
- muteExpireDate: _channel14.muteExpireDate
11902
+ mutedTill: _channel14.mutedTill
11863
11903
  }));
11864
11904
 
11865
11905
  case 275:
@@ -11871,7 +11911,7 @@ function watchForEvents() {
11871
11911
  _context3.next = 280;
11872
11912
  return effects.put(updateChannelDataAC(_channel15.id, {
11873
11913
  muted: _channel15.muted,
11874
- muteExpireDate: _channel15.muteExpireDate
11914
+ mutedTill: _channel15.mutedTill
11875
11915
  }));
11876
11916
 
11877
11917
  case 280:
@@ -11899,7 +11939,7 @@ function watchForEvents() {
11899
11939
  _channel18 = args.channel;
11900
11940
  _context3.next = 294;
11901
11941
  return effects.put(updateChannelDataAC(_channel18.id, {
11902
- markedAsUnread: _channel18.markedAsUnread
11942
+ markedAsUnread: _channel18.unread
11903
11943
  }));
11904
11944
 
11905
11945
  case 294:
@@ -11909,7 +11949,7 @@ function watchForEvents() {
11909
11949
  _channel19 = args.channel;
11910
11950
  _context3.next = 298;
11911
11951
  return effects.put(updateChannelDataAC(_channel19.id, {
11912
- markedAsUnread: _channel19.markedAsUnread
11952
+ markedAsUnread: _channel19.unread
11913
11953
  }));
11914
11954
 
11915
11955
  case 298:
@@ -12151,7 +12191,7 @@ function getChannels(action) {
12151
12191
  groupChannelQueryBuilder = new SceytChatClient.ChannelListQueryBuilder();
12152
12192
  groupChannelQueryBuilder.subjectContains(searchBy);
12153
12193
  groupChannelQueryBuilder.sortByLastMessage();
12154
- groupChannelQueryBuilder.limit(20);
12194
+ groupChannelQueryBuilder.limit(30);
12155
12195
  _context2.next = 25;
12156
12196
  return effects.call(groupChannelQueryBuilder.build);
12157
12197
 
@@ -12189,7 +12229,7 @@ function getChannels(action) {
12189
12229
  return Promise.resolve(Promise.all(channelsForUpdateLastReactionMessage.map(function (channel) {
12190
12230
  try {
12191
12231
  return Promise.resolve(new Promise(function (resolve) {
12192
- channel.getMessagesById([channel.userMessageReactions[0].messageId]).then(function (messages) {
12232
+ channel.getMessagesById([channel.newReactions[0].messageId]).then(function (messages) {
12193
12233
  channelMessageMap[channel.id] = messages[0];
12194
12234
  resolve(true);
12195
12235
  });
@@ -12283,7 +12323,7 @@ function getChannels(action) {
12283
12323
  return Promise.resolve(Promise.all(_channelsForUpdateLastReactionMessage.map(function (channel) {
12284
12324
  try {
12285
12325
  return Promise.resolve(new Promise(function (resolve) {
12286
- channel.getMessagesById([channel.userMessageReactions[0].messageId]).then(function (messages) {
12326
+ channel.getMessagesById([channel.newReactions[0].messageId]).then(function (messages) {
12287
12327
  _channelMessageMap[channel.id] = messages[0];
12288
12328
  resolve(true);
12289
12329
  })["catch"](function (e) {
@@ -12530,7 +12570,7 @@ function channelsLoadMore(action) {
12530
12570
  return Promise.resolve(Promise.all(channelsForUpdateLastReactionMessage.map(function (channel) {
12531
12571
  try {
12532
12572
  return Promise.resolve(new Promise(function (resolve) {
12533
- channel.getMessagesById([channel.userMessageReactions[0].messageId]).then(function (messages) {
12573
+ channel.getMessagesById([channel.newReactions[0].messageId]).then(function (messages) {
12534
12574
  channelMessageMap[channel.id] = messages[0];
12535
12575
  resolve(true);
12536
12576
  })["catch"](function (e) {
@@ -12673,9 +12713,9 @@ function markMessagesRead(action) {
12673
12713
  markedMessageIds = _context6.sent;
12674
12714
  _context6.next = 11;
12675
12715
  return effects.put(updateChannelDataAC(channel.id, {
12676
- markedAsUnread: channel.markedAsUnread,
12677
- lastReadMessageId: channel.lastReadMessageId,
12678
- unreadMessageCount: channel.unreadMessageCount
12716
+ markedAsUnread: channel.unread,
12717
+ lastReadMessageId: channel.lastDisplayedMsgId,
12718
+ unreadMessageCount: channel.newMessageCount
12679
12719
  }));
12680
12720
 
12681
12721
  case 11:
@@ -12800,7 +12840,7 @@ function notificationsTurnOff(action) {
12800
12840
  _context9.next = 13;
12801
12841
  return effects.put(updateChannelDataAC(updatedChannel.id, {
12802
12842
  muted: updatedChannel.muted,
12803
- muteExpireDate: updatedChannel.muteExpireDate
12843
+ mutedTill: updatedChannel.mutedTill
12804
12844
  }));
12805
12845
 
12806
12846
  case 13:
@@ -12845,7 +12885,7 @@ function notificationsTurnOn() {
12845
12885
  _context10.next = 12;
12846
12886
  return effects.put(updateChannelDataAC(updatedChannel.id, {
12847
12887
  muted: updatedChannel.muted,
12848
- muteExpireDate: updatedChannel.muteExpireDate
12888
+ mutedTill: updatedChannel.mutedTill
12849
12889
  }));
12850
12890
 
12851
12891
  case 12:
@@ -13146,7 +13186,7 @@ function blockChannel(action) {
13146
13186
  }
13147
13187
 
13148
13188
  function updateChannel(action) {
13149
- var payload, channelId, config, SceytChatClient, channel, paramsToUpdate, fileToUpload, _yield$call7, subject, avatarUrl, label, metadata;
13189
+ var payload, channelId, config, SceytChatClient, channel, paramsToUpdate, fileToUpload, _yield$call7, subject, avatarUrl, metadata;
13150
13190
 
13151
13191
  return _regeneratorRuntime().wrap(function updateChannel$(_context17) {
13152
13192
  while (1) {
@@ -13164,7 +13204,6 @@ function updateChannel(action) {
13164
13204
  paramsToUpdate = {
13165
13205
  uri: channel.uri,
13166
13206
  subject: channel.subject,
13167
- label: channel.label,
13168
13207
  metadata: channel.metadata,
13169
13208
  avatarUrl: channel.avatarUrl
13170
13209
  };
@@ -13206,31 +13245,29 @@ function updateChannel(action) {
13206
13245
  _yield$call7 = _context17.sent;
13207
13246
  subject = _yield$call7.subject;
13208
13247
  avatarUrl = _yield$call7.avatarUrl;
13209
- label = _yield$call7.label;
13210
13248
  metadata = _yield$call7.metadata;
13211
- _context17.next = 25;
13249
+ _context17.next = 24;
13212
13250
  return effects.put(updateChannelDataAC(channelId, {
13213
13251
  subject: subject,
13214
13252
  avatarUrl: avatarUrl,
13215
- label: label,
13216
13253
  metadata: metadata
13217
13254
  }));
13218
13255
 
13219
- case 25:
13220
- _context17.next = 30;
13256
+ case 24:
13257
+ _context17.next = 29;
13221
13258
  break;
13222
13259
 
13223
- case 27:
13224
- _context17.prev = 27;
13260
+ case 26:
13261
+ _context17.prev = 26;
13225
13262
  _context17.t0 = _context17["catch"](0);
13226
13263
  console.log('ERROR in update channel', _context17.t0.message);
13227
13264
 
13228
- case 30:
13265
+ case 29:
13229
13266
  case "end":
13230
13267
  return _context17.stop();
13231
13268
  }
13232
13269
  }
13233
- }, _marked17, null, [[0, 27]]);
13270
+ }, _marked17, null, [[0, 26]]);
13234
13271
  }
13235
13272
 
13236
13273
  function checkUsersStatus(action) {
@@ -13379,7 +13416,7 @@ function clearHistory(action) {
13379
13416
 
13380
13417
  _context20.next = 18;
13381
13418
  return effects.put(updateChannelDataAC(channel.id, {
13382
- lastMessage: {},
13419
+ lastMessage: null,
13383
13420
  unreadMessageCount: 0
13384
13421
  }));
13385
13422
 
@@ -15122,7 +15159,7 @@ function getMessagesQuery(action) {
15122
15159
  break;
15123
15160
 
15124
15161
  case 48:
15125
- if (!(channel.unreadMessageCount && channel.lastReadMessageId)) {
15162
+ if (!(channel.newMessageCount && channel.lastDisplayedMsgId)) {
15126
15163
  _context7.next = 72;
15127
15164
  break;
15128
15165
  }
@@ -15130,13 +15167,13 @@ function getMessagesQuery(action) {
15130
15167
  setAllMessages([]);
15131
15168
  messageQuery.limit = MESSAGES_MAX_LENGTH;
15132
15169
 
15133
- if (!Number(channel.lastReadMessageId)) {
15170
+ if (!Number(channel.lastDisplayedMsgId)) {
15134
15171
  _context7.next = 57;
15135
15172
  break;
15136
15173
  }
15137
15174
 
15138
15175
  _context7.next = 54;
15139
- return effects.call(messageQuery.loadNearMessageId, channel.lastReadMessageId);
15176
+ return effects.call(messageQuery.loadNearMessageId, channel.lastDisplayedMsgId);
15140
15177
 
15141
15178
  case 54:
15142
15179
  result = _context7.sent;
@@ -17639,18 +17676,18 @@ var Channel = function Channel(_ref) {
17639
17676
  }, React__default.createElement("h3", null, channel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), channel.muted && React__default.createElement(MutedIcon, {
17640
17677
  color: notificationsIsMutedIconColor
17641
17678
  }, notificationsIsMutedIcon || React__default.createElement(SvgNotificationsOff3, null)), (lastMessage || !!typingIndicator) && React__default.createElement(LastMessage, {
17642
- markedAsUnread: !!(channel.markedAsUnread || channel.unreadMessageCount && channel.unreadMessageCount > 0),
17643
- unreadMentions: !!(channel.unreadMentionsCount && channel.unreadMentionsCount > 0)
17679
+ markedAsUnread: !!(channel.unread || channel.newMessageCount && channel.newMessageCount > 0),
17680
+ unreadMentions: !!(channel.newMentionCount && channel.newMentionCount > 0)
17644
17681
  }, typingIndicator ? !isDirectChannel ? React__default.createElement(LastMessageAuthor, {
17645
17682
  typing: typingIndicator,
17646
17683
  minWidth: messageAuthorRef.current && messageAuthorRef.current.offsetWidth
17647
17684
  }, React__default.createElement("span", {
17648
17685
  ref: messageAuthorRef
17649
- }, typingIndicator ? getFromContacts ? contactsMap[typingIndicator.from.id] && contactsMap[typingIndicator.from.id].firstName ? contactsMap[typingIndicator.from.id].firstName.split(' ')[0] : typingIndicator.from.id : typingIndicator.from && typingIndicator.from.firstName || typingIndicator.from.id : '')) : null : channel.lastReactedMessage && channel.userMessageReactions && channel.userMessageReactions[0] ? lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.userMessageReactions[0].user && channel.userMessageReactions[0].user.id === user.id || !isDirectChannel) && lastMessage.type !== 'system' && React__default.createElement(LastMessageAuthor, {
17686
+ }, typingIndicator ? getFromContacts ? contactsMap[typingIndicator.from.id] && contactsMap[typingIndicator.from.id].firstName ? contactsMap[typingIndicator.from.id].firstName.split(' ')[0] : typingIndicator.from.id : typingIndicator.from && typingIndicator.from.firstName || typingIndicator.from.id : '')) : null : channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.newReactions[0].user && channel.newReactions[0].user.id === user.id || !isDirectChannel) && lastMessage.type !== 'system' && React__default.createElement(LastMessageAuthor, {
17650
17687
  minWidth: messageAuthorRef.current && messageAuthorRef.current.offsetWidth
17651
17688
  }, React__default.createElement("span", {
17652
17689
  ref: messageAuthorRef
17653
- }, channel.userMessageReactions[0].user.id === user.id ? 'You' : contactsMap[channel.userMessageReactions[0].user.id] ? contactsMap[channel.userMessageReactions[0].user.id].firstName : channel.userMessageReactions[0].user.id || 'Deleted')) : lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (lastMessage.user && lastMessage.user.id === user.id || !isDirectChannel) && lastMessage.type !== 'system' && React__default.createElement(LastMessageAuthor, {
17690
+ }, channel.newReactions[0].user.id === user.id ? 'You' : contactsMap[channel.newReactions[0].user.id] ? contactsMap[channel.newReactions[0].user.id].firstName : channel.newReactions[0].user.id || 'Deleted')) : lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (lastMessage.user && lastMessage.user.id === user.id || !isDirectChannel) && lastMessage.type !== 'system' && React__default.createElement(LastMessageAuthor, {
17654
17691
  minWidth: messageAuthorRef.current && messageAuthorRef.current.offsetWidth
17655
17692
  }, React__default.createElement("span", {
17656
17693
  ref: messageAuthorRef
@@ -17662,7 +17699,7 @@ var Channel = function Channel(_ref) {
17662
17699
  return mem === user.id ? ' You' : " " + systemMessageUserName(contactsMap[mem], mem);
17663
17700
  })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'RM' ? " removed " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
17664
17701
  return mem === user.id ? ' You' : " " + systemMessageUserName(contactsMap[mem], mem);
17665
- })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : '') : React__default.createElement(React__default.Fragment, null, channel.lastReactedMessage && React__default.createElement(React__default.Fragment, null, "Reacted", React__default.createElement(ReactionItem, null, channel.userMessageReactions && channel.userMessageReactions[0].key), "to", ' "'), !!(lastMessage.attachments && lastMessage.attachments.length) && (lastMessage.attachments[0].type === attachmentTypes.image ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgPicture, null), lastMessage.body ? '' : 'Photo') : lastMessage.attachments[0].type === attachmentTypes.video ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgVideoCall, null), lastMessage.body ? '' : 'Video') : lastMessage.attachments[0].type === attachmentTypes.file ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgChoseFile, null), lastMessage.body ? '' : 'File') : lastMessage.attachments[0].type === attachmentTypes.voice ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgVoiceIcon, null), lastMessage.body ? '' : 'Voice') : null), !!(lastMessage && lastMessage.id) && MessageTextFormat({
17702
+ })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'LG' ? 'Left this group' : '') : React__default.createElement(React__default.Fragment, null, channel.lastReactedMessage && React__default.createElement(React__default.Fragment, null, "Reacted", React__default.createElement(ReactionItem, null, channel.newReactions && channel.newReactions[0] && channel.newReactions[0].key), "to", ' "'), !!(lastMessage.attachments && lastMessage.attachments.length) && (lastMessage.attachments[0].type === attachmentTypes.image ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgPicture, null), lastMessage.body ? '' : 'Photo') : lastMessage.attachments[0].type === attachmentTypes.video ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgVideoCall, null), lastMessage.body ? '' : 'Video') : lastMessage.attachments[0].type === attachmentTypes.file ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgChoseFile, null), lastMessage.body ? '' : 'File') : lastMessage.attachments[0].type === attachmentTypes.voice ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgVoiceIcon, null), lastMessage.body ? '' : 'Voice') : null), !!(lastMessage && lastMessage.id) && MessageTextFormat({
17666
17703
  text: lastMessage.body,
17667
17704
  message: lastMessage,
17668
17705
  contactsMap: contactsMap,
@@ -17670,13 +17707,13 @@ var Channel = function Channel(_ref) {
17670
17707
  isLastMessage: true
17671
17708
  }), channel.lastReactedMessage && '"')))), React__default.createElement(ChannelStatus, {
17672
17709
  ref: messageTimeAndStatusRef
17673
- }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && lastMessage.type !== 'system' && messageStatusIcon(lastMessage.deliveryStatus, 'ticks', undefined, colors.primary)), React__default.createElement(LastMessageDate, null, lastMessage && lastMessage.createdAt && lastMessageDateFormat(lastMessage.createdAt))), React__default.createElement(UnreadInfo, null, !!(channel.unreadMentionsCount && channel.unreadMentionsCount > 0) && React__default.createElement(UnreadMentionIconWrapper, {
17710
+ }, lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && React__default.createElement(DeliveryIconCont, null, lastMessage && lastMessage.user && lastMessage.user.id === user.id && lastMessage.type !== 'system' && messageStatusIcon(lastMessage.deliveryStatus, 'ticks', undefined, colors.primary)), React__default.createElement(LastMessageDate, null, lastMessage && lastMessage.createdAt && lastMessageDateFormat(lastMessage.createdAt))), React__default.createElement(UnreadInfo, null, !!(channel.newMentionCount && channel.newMentionCount > 0) && React__default.createElement(UnreadMentionIconWrapper, {
17674
17711
  iconColor: colors.primary,
17675
- rightMargin: !!(channel.unreadMessageCount || channel.markedAsUnread)
17676
- }, React__default.createElement(SvgUnreadMention, null)), !!(channel.unreadMessageCount || channel.markedAsUnread) && React__default.createElement(UnreadCount, {
17712
+ rightMargin: !!(channel.newMessageCount || channel.unread)
17713
+ }, React__default.createElement(SvgUnreadMention, null)), !!(channel.newMessageCount || channel.unread) && React__default.createElement(UnreadCount, {
17677
17714
  backgroundColor: colors.primary,
17678
17715
  isMuted: channel.muted
17679
- }, channel.unreadMessageCount ? channel.unreadMessageCount > 99 ? '99+' : channel.unreadMessageCount : '')));
17716
+ }, channel.newMessageCount ? channel.newMessageCount > 99 ? '99+' : channel.newMessageCount : '')));
17680
17717
  };
17681
17718
  var Container$2 = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n height: 48px;\n background-color: ", ";\n border-left: ", ";\n // padding: selectedChannel ? '8px 16px 8px 13px' : '8px 16px'\n padding: ", ";\n margin: ", ";\n border-radius: ", ";\n"])), function (props) {
17682
17719
  return props.selectedChannel ? props.selectedBackgroundColor || colors.primaryLight : 'inherit';
@@ -17741,7 +17778,7 @@ var UnreadCount = styled__default.span(_templateObject17$1 || (_templateObject17
17741
17778
  });
17742
17779
 
17743
17780
  var _templateObject$5, _templateObject2$5;
17744
- var SearchInputContainer = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n width: 100%;\n box-sizing: border-box;\n padding: ", ";\n margin-bottom: ", ";\n"])), function (props) {
17781
+ var SearchInputContainer = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n box-sizing: border-box;\n margin: ", ";\n margin-bottom: ", ";\n"])), function (props) {
17745
17782
  return !props.inline && '0 12px';
17746
17783
  }, function (props) {
17747
17784
  return !props.inline && '16px';
@@ -17758,9 +17795,7 @@ var ChannelSearch = function ChannelSearch(_ref) {
17758
17795
  borderRadius = _ref.borderRadius;
17759
17796
  return React__default.createElement(SearchInputContainer, {
17760
17797
  inline: inline
17761
- }, React__default.createElement(StyledSearchSvg, {
17762
- left: !inline ? '26px' : ''
17763
- }), React__default.createElement(SearchInput, {
17798
+ }, React__default.createElement(StyledSearchSvg, null), React__default.createElement(SearchInput, {
17764
17799
  borderRadius: borderRadius,
17765
17800
  type: 'text',
17766
17801
  onChange: handleSearchValueChange,
@@ -18391,6 +18426,7 @@ var UsersPopup = function UsersPopup(_ref) {
18391
18426
  }));
18392
18427
  }
18393
18428
  }, []);
18429
+ console.log('actionType. . . .', actionType);
18394
18430
  return React__default.createElement(PopupContainer, null, React__default.createElement(Popup, {
18395
18431
  maxHeight: popupHeight || '721px',
18396
18432
  width: popupWidth || '433px',
@@ -18399,11 +18435,14 @@ var UsersPopup = function UsersPopup(_ref) {
18399
18435
  padding: '0',
18400
18436
  display: 'flex'
18401
18437
  }, React__default.createElement(PopupBody, {
18402
- padding: 24,
18438
+ paddingH: '12px',
18439
+ paddingV: '24px',
18403
18440
  withFooter: actionType !== 'createChat'
18404
18441
  }, React__default.createElement(CloseIcon, {
18405
18442
  onClick: handleClosePopup
18406
- }), React__default.createElement(PopupName, null, actionType === 'createChat' ? 'Creat a new chat' : (channel === null || channel === void 0 ? void 0 : channel.type) === CHANNEL_TYPE.BROADCAST ? 'Add subscribers' : 'Add members'), React__default.createElement(SearchUserCont, {
18443
+ }), React__default.createElement(PopupName, {
18444
+ padding: '0 12px'
18445
+ }, actionType === 'createChat' ? 'Creat a new chat' : (channel === null || channel === void 0 ? void 0 : channel.type) === CHANNEL_TYPE.BROADCAST ? 'Add subscribers' : 'Add members'), React__default.createElement(SearchUserCont, {
18407
18446
  className: 'p-relative'
18408
18447
  }, React__default.createElement(StyledSearchSvg, null), React__default.createElement(SearchUsersInput, {
18409
18448
  height: '40px',
@@ -18497,16 +18536,16 @@ var List = styled__default.div(_templateObject$8 || (_templateObject$8 = _tagged
18497
18536
  var MembersContainer = styled__default(List)(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n //margin-top: 24px;\n position: relative;\n max-height: ", ";\n overflow-y: auto;\n\n width: calc(100% + 16px);\n padding-right: 16px;\n"])), function (props) {
18498
18537
  return "calc(100% - (" + ((props.isAdd ? 75 : 70) + props.selectedMembersHeight) + "px))";
18499
18538
  });
18500
- var SearchUserCont = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n width: 100%;\n margin-top: 24px;\n\n ", " {\n top: 10px;\n right: 11px;\n }\n"])), ClearTypedText);
18539
+ var SearchUserCont = styled__default.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin: 24px 12px 0;\n\n ", " {\n top: 10px;\n right: 11px;\n }\n"])), ClearTypedText);
18501
18540
  var SearchUsersInput = styled__default.input(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n height: 40px;\n width: 100%;\n font-size: 14px;\n background: #ffffff;\n border: 1px solid rgb(225, 226, 229);\n box-sizing: border-box;\n border-radius: 8px;\n padding-left: 36px;\n\n &::placeholder {\n color: ", ";\n font-size: 14px;\n opacity: 1;\n }\n\n &:focus {\n outline: none;\n }\n"])), colors.gray4);
18502
- var ListRow = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n min-height: 40px;\n padding: 7px 0;\n cursor: ", ";\n transition: all 0.2s;\n\n &:hover {\n background-color: ", ";\n }\n\n & ", " {\n width: 10px;\n height: 10px;\n }\n"])), function (props) {
18541
+ var ListRow = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n min-height: 40px;\n padding: 7px 12px;\n cursor: ", ";\n border-radius: 6px;\n transition: all 0.2s;\n\n &:hover {\n background-color: ", ";\n }\n\n & ", " {\n width: 10px;\n height: 10px;\n }\n"])), function (props) {
18503
18542
  return !props.isAdd && 'pointer';
18504
18543
  }, function (props) {
18505
18544
  return !props.isAdd && colors.gray0;
18506
18545
  }, UserStatus);
18507
18546
  var UserNamePresence = styled__default.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: calc(100% - 70px);\n margin: 0 auto 0 8px;\n line-height: 10px;\n"])));
18508
18547
  var MemberName = styled__default.h4(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-size: 15px;\n font-weight: 500;\n line-height: 16px;\n color: ", ";\n margin: 0;\n max-width: calc(100% - 10px);\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n"])), colors.blue6);
18509
- var SelectedMembersContainer = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n max-height: 85px;\n overflow-x: hidden;\n padding-top: 2px;\n box-sizing: border-box;\n //flex: 0 0 auto;\n"])));
18548
+ var SelectedMembersContainer = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-start;\n flex-wrap: wrap;\n width: 100%;\n max-height: 85px;\n overflow-x: hidden;\n padding: 2px 12px 0;\n box-sizing: border-box;\n //flex: 0 0 auto;\n"])));
18510
18549
  var SelectedMemberBuble = styled__default.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n background: ", ";\n border-radius: 16px;\n align-items: center;\n padding: 4px 10px 4px 0;\n height: 28px;\n margin: 8px 8px 0 0;\n box-sizing: border-box;\n"])), colors.gray5);
18511
18550
  var SelectedMemberName = styled__default.span(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 16px;\n margin-left: 8px;\n color: ", ";\n"])), colors.blue6);
18512
18551
  var StyledSubtractSvg = styled__default(SvgCross)(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n margin-left: 4px;\n transform: translate(2px, 0);\n"])));
@@ -18544,25 +18583,6 @@ function SvgCameraIcon(props) {
18544
18583
  })));
18545
18584
  }
18546
18585
 
18547
- // A type of promise-like that resolves synchronously and supports only one observer
18548
-
18549
- const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
18550
-
18551
- const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
18552
-
18553
- // Asynchronously call a function and send errors to recovery continuation
18554
- function _catch(body, recover) {
18555
- try {
18556
- var result = body();
18557
- } catch(e) {
18558
- return recover(e);
18559
- }
18560
- if (result && result.then) {
18561
- return result.then(void 0, recover);
18562
- }
18563
- return result;
18564
- }
18565
-
18566
18586
  var getCroppedImg = function getCroppedImg(imageSrc, pixelCrop, rotation, fileName) {
18567
18587
  try {
18568
18588
  if (rotation === void 0) {
@@ -18673,7 +18693,8 @@ var ImageCrop = function ImageCrop(_ref) {
18673
18693
  maxWidth: '600px',
18674
18694
  padding: '0'
18675
18695
  }, React__default.createElement(PopupBody, {
18676
- padding: 24
18696
+ paddingH: '24px',
18697
+ paddingV: '24px'
18677
18698
  }, React__default.createElement(CloseIcon, {
18678
18699
  onClick: handleClosePopup
18679
18700
  }), React__default.createElement(Row, {
@@ -18919,7 +18940,8 @@ function CreateChannel(_ref) {
18919
18940
  maxWidth: '520px',
18920
18941
  padding: '0'
18921
18942
  }, React__default.createElement(PopupBody, {
18922
- padding: 24
18943
+ paddingH: '24px',
18944
+ paddingV: '24px'
18923
18945
  }, React__default.createElement(CloseIcon, {
18924
18946
  onClick: toggleCreateGroupChannelPopup
18925
18947
  }), React__default.createElement(PopupName, {
@@ -19860,7 +19882,7 @@ function Chat$1(_ref) {
19860
19882
  }, children);
19861
19883
  }
19862
19884
  var Container$7 = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n position: relative;\n width: 100%;\n max-width: ", ";\n display: flex;\n flex-direction: column;\n"])), function (props) {
19863
- return props.widthOffset || props.channelDetailsIsOpen ? "calc(100% - " + (props.widthOffset + (props.channelDetailsIsOpen ? 400 : 0)) + "px)" : '';
19885
+ return props.widthOffset || props.channelDetailsIsOpen ? "calc(100% - " + (props.widthOffset + (props.channelDetailsIsOpen ? 402 : 0)) + "px)" : '';
19864
19886
  });
19865
19887
 
19866
19888
  var _path$o;
@@ -19955,7 +19977,7 @@ function ChatHeader(_ref) {
19955
19977
  color: titleColor
19956
19978
  }, activeChannel.subject || (isDirectChannel && directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), showMemberInfo && (isDirectChannel && directChannelUser ? React__default.createElement(SubTitle, {
19957
19979
  color: memberInfoTextColor
19958
- }, hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && (directChannelUser.presence.state === PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt))) : React__default.createElement(SubTitle, {
19980
+ }, hideUserPresence && hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && (directChannelUser.presence.state === PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt))) : React__default.createElement(SubTitle, {
19959
19981
  color: memberInfoTextColor
19960
19982
  }, !activeChannel.subject && !isDirectChannel ? '' : activeChannel.memberCount + " " + (activeChannel.type === CHANNEL_TYPE.BROADCAST ? activeChannel.memberCount > 1 ? 'subscribers' : 'subscriber' : activeChannel.memberCount > 1 ? 'members' : 'member') + " ")))), !channelListHidden && React__default.createElement(ChanelInfo, {
19961
19983
  onClick: function onClick() {
@@ -20130,18 +20152,15 @@ function _extends$u() {
20130
20152
  return _extends$u.apply(this, arguments);
20131
20153
  }
20132
20154
 
20133
- function SvgTrash(props) {
20155
+ function SvgDeleteIcon(props) {
20134
20156
  return /*#__PURE__*/React.createElement("svg", _extends$u({
20135
- width: 16,
20136
- height: 16,
20157
+ width: 20,
20158
+ height: 20,
20137
20159
  fill: "none",
20138
20160
  xmlns: "http://www.w3.org/2000/svg"
20139
20161
  }, props), _path$r || (_path$r = /*#__PURE__*/React.createElement("path", {
20140
- d: "M1.5 3.89h13M5.111 3.889V2.444A1.444 1.444 0 016.556 1h2.888a1.444 1.444 0 011.445 1.444V3.89m2.167 0V14a1.444 1.444 0 01-1.445 1.444H4.39A1.444 1.444 0 012.944 14V3.889h10.112zM6.556 7.5v4.333M9.444 7.5v4.333",
20141
- stroke: "currentColor",
20142
- strokeWidth: 1.4,
20143
- strokeLinecap: "round",
20144
- strokeLinejoin: "round"
20162
+ d: "M15.714 7.143v7.5a3.214 3.214 0 01-3.214 3.214h-5a3.214 3.214 0 01-3.214-3.214v-7.5h-.507a.922.922 0 01-.922-.922V5.178c0-1.085.88-1.964 1.964-1.964h1.18a2.144 2.144 0 011.856-1.071h4.286c.783 0 1.482.423 1.856 1.071h1.18c1.085 0 1.964.88 1.964 1.964v1.043a.922.922 0 01-.922.922h-.507zM15 5.714h.714v-.536a.536.536 0 00-.535-.535h-1.652a.714.714 0 01-.692-.537.715.715 0 00-.692-.535H7.857a.715.715 0 00-.692.535.714.714 0 01-.691.537H4.82a.536.536 0 00-.535.535v.536H15zM5.714 7.143v7.5c0 .986.8 1.785 1.786 1.785h5c.986 0 1.786-.8 1.786-1.785v-7.5H5.714z",
20163
+ fill: "#FA4C56"
20145
20164
  })));
20146
20165
  }
20147
20166
 
@@ -20197,17 +20216,18 @@ function _extends$w() {
20197
20216
  return _extends$w.apply(this, arguments);
20198
20217
  }
20199
20218
 
20200
- function SvgEditSquare(props) {
20219
+ function SvgEditIcon(props) {
20201
20220
  return /*#__PURE__*/React.createElement("svg", _extends$w({
20202
- width: 15,
20203
- height: 14,
20221
+ width: 20,
20222
+ height: 20,
20223
+ viewBox: "0 0 20.01 20.01",
20204
20224
  fill: "none",
20205
20225
  xmlns: "http://www.w3.org/2000/svg"
20206
20226
  }, props), _path$t || (_path$t = /*#__PURE__*/React.createElement("path", {
20207
20227
  fillRule: "evenodd",
20208
20228
  clipRule: "evenodd",
20209
- d: "M10.78.56a1.91 1.91 0 112.703 2.702L7.539 9.206a.67.67 0 01-.267.164l-1.3.422-.516.168a1.09 1.09 0 01-1.374-1.374l.168-.516.423-1.3a.67.67 0 01.164-.267L10.78.56zM5.51 8.532l.048-.015 1.146-.373 4.257-4.258-.805-.805L5.9 7.339l-.373 1.146-.015.047zm5.536-6.34l.805.805.683-.684a.569.569 0 000-.804.57.57 0 00-.805 0l-.683.683zm-4.03-.418H2.349A2.348 2.348 0 000 4.122v7.53A2.348 2.348 0 002.348 14H9.9a2.348 2.348 0 002.348-2.348V7.004l-1.341 1.342v3.307a1.006 1.006 0 01-1.006 1.006H2.348a1.006 1.006 0 01-1.006-1.006v-7.53a1.006 1.006 0 011.006-1.006h3.327l1.342-1.342z",
20210
- fill: "currentColor"
20229
+ d: "M11.883 6.232l-7.531 7.53a.917.917 0 00-.269.65v1.422c0 .046.038.083.084.083h1.422a.917.917 0 00.648-.268l7.531-7.531-1.885-1.886zm1.06-1.06l1.886 1.885.943-.943a.5.5 0 000-.707l-1.179-1.179a.5.5 0 00-.707 0l-.943.943zm-9.652 7.53l9.534-9.534a2 2 0 012.829 0l1.178 1.178a2 2 0 010 2.829l-9.534 9.534a2.417 2.417 0 01-1.709.708H4.167a1.583 1.583 0 01-1.584-1.583V14.41c0-.64.255-1.256.708-1.709z",
20230
+ fill: "CurrentColor"
20211
20231
  })));
20212
20232
  }
20213
20233
 
@@ -20243,7 +20263,7 @@ function SvgResend(props) {
20243
20263
  })));
20244
20264
  }
20245
20265
 
20246
- var _path$v, _path2$4, _path3$2;
20266
+ var _path$v, _path2$4;
20247
20267
 
20248
20268
  function _extends$y() {
20249
20269
  _extends$y = Object.assign ? Object.assign.bind() : function (target) {
@@ -20262,29 +20282,23 @@ function _extends$y() {
20262
20282
  return _extends$y.apply(this, arguments);
20263
20283
  }
20264
20284
 
20265
- function SvgReact(props) {
20285
+ function SvgEmojiSmileIcon(props) {
20266
20286
  return /*#__PURE__*/React.createElement("svg", _extends$y({
20267
20287
  width: 20,
20268
20288
  height: 20,
20289
+ viewBox: "0 0 20.01 20.01",
20269
20290
  fill: "none",
20270
20291
  xmlns: "http://www.w3.org/2000/svg"
20271
20292
  }, props), _path$v || (_path$v = /*#__PURE__*/React.createElement("path", {
20272
- d: "M15.913 3v4.174M13.826 5.088H18M6.174 11.348s1.043 1.739 2.782 1.739c1.74 0 2.783-1.74 2.783-1.74",
20273
- stroke: "currentColor",
20274
- strokeWidth: 1.3,
20275
- strokeLinecap: "round",
20276
- strokeLinejoin: "round"
20293
+ fillRule: "evenodd",
20294
+ clipRule: "evenodd",
20295
+ d: "M10 3.043a6.957 6.957 0 100 13.914 6.957 6.957 0 000-13.914zM1.667 10a8.333 8.333 0 1116.666 0 8.333 8.333 0 01-16.666 0zm4.97-2.293a1.07 1.07 0 112.14 0 1.07 1.07 0 01-2.14 0zm4.586 0a1.07 1.07 0 112.141 0 1.07 1.07 0 01-2.14 0z",
20296
+ fill: "CurrentColor"
20277
20297
  })), _path2$4 || (_path2$4 = /*#__PURE__*/React.createElement("path", {
20278
- d: "M6.87 7.87h.006M11.043 7.87h.007",
20279
- stroke: "currentColor",
20280
- strokeWidth: 2,
20281
- strokeLinecap: "round",
20282
- strokeLinejoin: "round"
20283
- })), _path3$2 || (_path3$2 = /*#__PURE__*/React.createElement("path", {
20284
- d: "M15.913 9.957a6.957 6.957 0 11-4.708-6.584",
20285
- stroke: "currentColor",
20286
- strokeWidth: 1.3,
20287
- strokeLinecap: "round"
20298
+ fillRule: "evenodd",
20299
+ clipRule: "evenodd",
20300
+ d: "M6.546 11.287a.714.714 0 01.977.26 2.865 2.865 0 004.955 0 .714.714 0 011.235.717 4.293 4.293 0 01-7.426 0 .714.714 0 01.26-.977z",
20301
+ fill: "CurrentColor"
20288
20302
  })));
20289
20303
  }
20290
20304
 
@@ -20309,16 +20323,16 @@ function _extends$z() {
20309
20323
 
20310
20324
  function SvgReplyIcon(props) {
20311
20325
  return /*#__PURE__*/React.createElement("svg", _extends$z({
20312
- width: 24,
20313
- height: 24,
20314
- viewBox: "0 0 24.01 24.01",
20326
+ width: 20,
20327
+ height: 20,
20328
+ viewBox: "0 0 20.01 20.01",
20315
20329
  fill: "none",
20316
20330
  xmlns: "http://www.w3.org/2000/svg"
20317
20331
  }, props), _path$w || (_path$w = /*#__PURE__*/React.createElement("path", {
20318
20332
  fillRule: "evenodd",
20319
20333
  clipRule: "evenodd",
20320
- d: "M19.78 12l-6.958-6.045v2.83c0 .452-.346.87-.847.899-.318.018-1.494.102-2.809.388-1.35.294-2.693.768-3.47 1.479-.94.857-1.459 2.44-1.706 4.128-.095.652-.146 1.29-.17 1.86.133-.152.272-.306.416-.46.753-.806 1.716-1.698 2.688-2.161.917-.437 2.086-.584 3.02-.63a16.68 16.68 0 012.052.027.897.897 0 01.826.896v2.834L19.78 12zm1.658-.68a.9.9 0 010 1.36l-8.726 7.58a.9.9 0 01-1.49-.68v-3.705a14.97 14.97 0 00-1.197.01c-.885.044-1.791.181-2.413.477-.686.327-1.479 1.03-2.206 1.808-.71.76-1.291 1.52-1.557 1.88-.483.655-1.577.39-1.622-.485a22.078 22.078 0 01.18-4.117c.256-1.751.835-3.823 2.21-5.079 1.11-1.014 2.814-1.557 4.21-1.86a21.08 21.08 0 012.395-.37v-3.72a.9.9 0 011.49-.68l8.726 7.582z",
20321
- fill: "currentColor"
20334
+ d: "M6.364 3.637a.75.75 0 010 1.06L4.31 6.75h9.439a4.5 4.5 0 110 9H10a.75.75 0 010-1.5h3.75a3 3 0 100-6H4.31l2.054 2.053a.75.75 0 01-1.061 1.061L1.97 8.031a.75.75 0 010-1.061l3.333-3.333a.75.75 0 011.06 0z",
20335
+ fill: "CurrentColor"
20322
20336
  })));
20323
20337
  }
20324
20338
 
@@ -20341,15 +20355,17 @@ function _extends$A() {
20341
20355
  return _extends$A.apply(this, arguments);
20342
20356
  }
20343
20357
 
20344
- function SvgCopy(props) {
20358
+ function SvgCopyIcon(props) {
20345
20359
  return /*#__PURE__*/React.createElement("svg", _extends$A({
20346
- width: 18,
20347
- height: 18,
20348
- viewBox: "0 0 18.01 18.01",
20360
+ width: 20,
20361
+ height: 20,
20362
+ viewBox: "0 0 20.01 20.01",
20349
20363
  fill: "none",
20350
20364
  xmlns: "http://www.w3.org/2000/svg"
20351
20365
  }, props), _path$x || (_path$x = /*#__PURE__*/React.createElement("path", {
20352
- d: "M3 13.5a1.508 1.508 0 01-1.5-1.508V4.138A2.638 2.638 0 014.138 1.5h7.854c.83 0 1.504.67 1.508 1.5H5.073A2.073 2.073 0 003 5.073V13.5zm3.008-9h8.985c.832 0 1.507.675 1.507 1.508v8.985c0 .832-.675 1.507-1.508 1.507H6.008A1.507 1.507 0 014.5 14.992V6.008c0-.832.675-1.507 1.508-1.507zM6.75 6a.75.75 0 00-.75.75v7.5c0 .414.336.75.75.75h7.5a.75.75 0 00.75-.75v-7.5a.75.75 0 00-.75-.75h-7.5z",
20366
+ fillRule: "evenodd",
20367
+ clipRule: "evenodd",
20368
+ d: "M14.121 3.564c-.497-.041-1.134-.042-2.042-.042H6.401a.72.72 0 010-1.439h5.71c.868 0 1.565 0 2.127.046.578.047 1.079.146 1.54.381a3.919 3.919 0 011.711 1.712c.235.46.334.961.382 1.54.046.562.046 1.258.046 2.127v5.71a.72.72 0 01-1.44 0V7.92c0-.908 0-1.545-.041-2.043-.04-.489-.115-.778-.229-1.002a2.48 2.48 0 00-1.083-1.083c-.224-.114-.514-.19-1.003-.23zM5.334 4.882h6.533c.424 0 .785 0 1.081.024.311.025.614.081.904.229.436.222.79.577 1.013 1.013.147.29.203.592.229.903.024.297.024.657.024 1.081v6.534c0 .424 0 .784-.024 1.08-.026.312-.082.615-.229.904a2.32 2.32 0 01-1.013 1.014c-.29.147-.593.203-.904.228-.296.024-.657.024-1.08.024H5.333c-.424 0-.785 0-1.081-.024-.311-.025-.614-.08-.904-.228a2.32 2.32 0 01-1.013-1.014c-.147-.29-.203-.592-.229-.903-.024-.296-.024-.657-.024-1.081V8.132c0-.424 0-.784.024-1.08.026-.312.082-.615.229-.904a2.319 2.319 0 011.013-1.013c.29-.148.593-.204.904-.229.296-.024.657-.024 1.08-.024zM4.37 6.34c-.222.018-.314.05-.367.076a.88.88 0 00-.384.385c-.027.052-.059.144-.077.367-.019.23-.02.532-.02.991v6.478c0 .46.001.761.02.992.018.222.05.314.077.367a.88.88 0 00.384.384c.053.027.145.058.367.076.23.02.532.02.992.02h6.477c.46 0 .761 0 .992-.02.222-.018.314-.05.367-.076a.88.88 0 00.384-.384c.027-.053.059-.145.077-.367.019-.231.02-.533.02-.992V8.16c0-.46-.001-.76-.02-.991-.018-.223-.05-.315-.077-.367a.88.88 0 00-.384-.385c-.053-.027-.145-.058-.367-.076-.23-.02-.532-.02-.992-.02H5.362c-.46 0-.761 0-.992.02z",
20353
20369
  fill: "CurrentColor"
20354
20370
  })));
20355
20371
  }
@@ -20373,16 +20389,18 @@ function _extends$B() {
20373
20389
  return _extends$B.apply(this, arguments);
20374
20390
  }
20375
20391
 
20376
- function SvgThreadReply(props) {
20392
+ function SvgReplyInThreadIcon(props) {
20377
20393
  return /*#__PURE__*/React.createElement("svg", _extends$B({
20378
20394
  width: 20,
20379
20395
  height: 20,
20380
- fill: "currentColor",
20396
+ viewBox: "0 0 20.01 20.01",
20397
+ fill: "none",
20381
20398
  xmlns: "http://www.w3.org/2000/svg"
20382
20399
  }, props), _path$y || (_path$y = /*#__PURE__*/React.createElement("path", {
20383
20400
  fillRule: "evenodd",
20384
20401
  clipRule: "evenodd",
20385
- d: "M19.072 10.206c.26.255.283.66.068.942l-.06.068-4.901 5a.714.714 0 01-.95.061l-.068-.06-2.955-2.991a.714.714 0 01.95-1.064l.066.06 2.446 2.475 4.394-4.483a.714.714 0 011.01-.008zM6.786 12.144a.714.714 0 010 1.428H3.214a.714.714 0 010-1.428h3.572zm8.571-4.286a.714.714 0 110 1.429H3.214a.714.714 0 110-1.429h12.143zm0-4.286a.714.714 0 110 1.429H3.214a.714.714 0 010-1.429h12.143z"
20402
+ d: "M6.469 1.75h7.062c.674 0 1.225 0 1.672.037.463.037.882.118 1.273.317a3.25 3.25 0 011.42 1.42c.199.391.28.81.317 1.273.037.448.037.998.037 1.672v4.562c0 .674 0 1.224-.037 1.672-.037.463-.118.882-.317 1.273a3.25 3.25 0 01-1.42 1.42c-.391.199-.81.28-1.273.317-.447.037-.998.037-1.671.037h-2.129c-.55 0-.72.004-.878.036a1.752 1.752 0 00-.444.156c-.143.073-.279.177-.708.52l-2.01 1.608a6.553 6.553 0 01-.441.334c-.129.085-.366.229-.67.23-.356 0-.692-.162-.914-.44-.19-.238-.226-.513-.24-.666-.015-.16-.015-.356-.015-.554v-1.229c-.358-.008-.655-.034-.924-.106a3.25 3.25 0 01-2.298-2.298c-.111-.415-.111-.896-.111-1.566V6.469c0-.674 0-1.224.037-1.672.037-.463.118-.882.317-1.272a3.25 3.25 0 011.42-1.42c.391-.2.81-.28 1.273-.318.448-.037.998-.037 1.672-.037zm-1.55 1.532c-.37.03-.57.085-.713.159a1.75 1.75 0 00-.765.765c-.074.144-.13.343-.16.713-.03.38-.03.869-.03 1.581v5.167c0 .823.006 1.087.059 1.286a1.75 1.75 0 001.237 1.237c.199.054.463.06 1.286.06a.75.75 0 01.75.75v1.773l1.853-1.482.053-.042c.355-.285.614-.492.91-.643.26-.133.538-.23.825-.29.324-.066.657-.066 1.112-.066H13.5c.713 0 1.202 0 1.581-.032.37-.03.57-.085.713-.159a1.75 1.75 0 00.765-.764c.074-.145.13-.344.16-.714.03-.38.031-.869.031-1.581V6.5c0-.712 0-1.202-.032-1.58-.03-.371-.085-.57-.159-.714a1.75 1.75 0 00-.765-.765c-.144-.074-.343-.13-.713-.16-.38-.03-.868-.031-1.58-.031h-7c-.713 0-1.203 0-1.582.032zm.164 3.801a.75.75 0 01.75-.75H10a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75zm0 2.917a.75.75 0 01.75-.75H12.5a.75.75 0 010 1.5H5.833a.75.75 0 01-.75-.75z",
20403
+ fill: "CurrentColor"
20386
20404
  })));
20387
20405
  }
20388
20406
 
@@ -20497,7 +20515,7 @@ function MessageActions(_ref) {
20497
20515
  onClick: handleOpenReaction
20498
20516
  }, React__default.createElement(ItemNote, {
20499
20517
  direction: 'top'
20500
- }, reactionIconTooltipText || 'React'), reactionIcon || React__default.createElement(SvgReact, null)), showEditMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (isIncoming ? allowEditDeleteIncomingMessage : true) && editMessagePermitted && (isDirectChannel && directChannelUser ? !isIncoming && directChannelUser.activityState !== 'Deleted' : true) && React__default.createElement(Action, {
20518
+ }, reactionIconTooltipText || 'React'), reactionIcon || React__default.createElement(SvgEmojiSmileIcon, null)), showEditMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (isIncoming ? allowEditDeleteIncomingMessage : true) && editMessagePermitted && (isDirectChannel && directChannelUser ? !isIncoming && directChannelUser.activityState !== 'Deleted' : true) && React__default.createElement(Action, {
20501
20519
  order: editIconOrder || 1,
20502
20520
  iconColor: messageActionIconsColor,
20503
20521
  hoverIconColor: colors.primary,
@@ -20506,7 +20524,7 @@ function MessageActions(_ref) {
20506
20524
  }
20507
20525
  }, React__default.createElement(ItemNote, {
20508
20526
  direction: 'top'
20509
- }, editIconTooltipText || 'Edit Message'), editIcon || React__default.createElement(SvgEditSquare, null)), messageStatus === MESSAGE_DELIVERY_STATUS.PENDING && React__default.createElement(Action, {
20527
+ }, editIconTooltipText || 'Edit Message'), editIcon || React__default.createElement(SvgEditIcon, null)), messageStatus === MESSAGE_DELIVERY_STATUS.PENDING && React__default.createElement(Action, {
20510
20528
  iconColor: messageActionIconsColor,
20511
20529
  hoverIconColor: colors.primary,
20512
20530
  onClick: function onClick() {
@@ -20532,7 +20550,7 @@ function MessageActions(_ref) {
20532
20550
  }
20533
20551
  }, React__default.createElement(ItemNote, {
20534
20552
  direction: 'top'
20535
- }, replyInThreadIconTooltipText || 'Reply in thread'), replyInThreadIcon || React__default.createElement(SvgThreadReply, null))), showCopyMessage && React__default.createElement(Action, {
20553
+ }, replyInThreadIconTooltipText || 'Reply in thread'), replyInThreadIcon || React__default.createElement(SvgReplyInThreadIcon, null))), showCopyMessage && React__default.createElement(Action, {
20536
20554
  order: copyIconOrder || 4,
20537
20555
  iconColor: messageActionIconsColor,
20538
20556
  hoverIconColor: colors.primary,
@@ -20541,7 +20559,7 @@ function MessageActions(_ref) {
20541
20559
  }
20542
20560
  }, React__default.createElement(ItemNote, {
20543
20561
  direction: 'top'
20544
- }, copyIconTooltipText || 'Copy'), copyIcon || React__default.createElement(SvgCopy, null)), showForwardMessage && forwardMessagePermitted && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && React__default.createElement(Action, {
20562
+ }, copyIconTooltipText || 'Copy'), copyIcon || React__default.createElement(SvgCopyIcon, null)), showForwardMessage && forwardMessagePermitted && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && React__default.createElement(Action, {
20545
20563
  order: forwardIconOrder || 5,
20546
20564
  iconColor: messageActionIconsColor,
20547
20565
  hoverIconColor: colors.primary,
@@ -20559,7 +20577,7 @@ function MessageActions(_ref) {
20559
20577
  }
20560
20578
  }, React__default.createElement(ItemNote, {
20561
20579
  direction: 'top'
20562
- }, deleteIconTooltipText || 'Delete Message'), deleteIcon || React__default.createElement(SvgTrash, null)), showReportMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && React__default.createElement(Action, {
20580
+ }, deleteIconTooltipText || 'Delete Message'), deleteIcon || React__default.createElement(SvgDeleteIcon, null)), showReportMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && React__default.createElement(Action, {
20563
20581
  order: reportIconOrder || 7,
20564
20582
  iconColor: messageActionIconsColor,
20565
20583
  hoverIconColor: colors.primary,
@@ -20580,16 +20598,16 @@ var MessageActionsWrapper = styled__default.div(_templateObject$i || (_templateO
20580
20598
  }, function (props) {
20581
20599
  return props.rtlDirection ? 'initial' : '';
20582
20600
  });
20583
- var EditMessageContainer = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n direction: ", ";\n background-color: #fff;\n border: 1px solid ", ";\n box-sizing: border-box;\n border-radius: 4px;\n box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n //opacity: 0;\n //visibility: hidden;\n transition: all 0.2s;\n z-index: 100;\n"])), function (props) {
20601
+ var EditMessageContainer = styled__default.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n direction: ", ";\n background-color: #fff;\n padding: 8px 2px;\n box-sizing: border-box;\n border-radius: 12px;\n box-shadow: 0 0 2px rgba(17, 21, 57, 0.08), 0 0 24px rgba(17, 21, 57, 0.16);\n //opacity: 0;\n //visibility: hidden;\n transition: all 0.2s;\n z-index: 100;\n"])), function (props) {
20584
20602
  return props.rtlDirection && 'initial';
20585
- }, colors.gray1);
20586
- var Action = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 9px;\n cursor: pointer;\n color: ", ";\n transition: all 0.2s;\n order: ", ";\n\n &:hover {\n color: ", ";\n\n ", " {\n display: block;\n }\n }\n"])), function (props) {
20603
+ });
20604
+ var Action = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n padding: 4px;\n margin: 0 6px;\n cursor: pointer;\n color: ", ";\n transition: all 0.2s;\n order: ", ";\n color: ", ";\n border-radius: 50%;\n\n &:hover {\n color: ", ";\n background-color: ", ";\n\n ", " {\n display: block;\n }\n }\n"])), function (props) {
20587
20605
  return props.iconColor || colors.gray6;
20588
20606
  }, function (props) {
20589
20607
  return props.order || 1;
20590
- }, function (props) {
20608
+ }, colors.gray10, function (props) {
20591
20609
  return props.hoverIconColor || colors.primary;
20592
- }, ItemNote);
20610
+ }, colors.gray11, ItemNote);
20593
20611
 
20594
20612
  var _path$z;
20595
20613
 
@@ -20623,7 +20641,7 @@ function SvgCancel(props) {
20623
20641
  })));
20624
20642
  }
20625
20643
 
20626
- var _path$A, _path2$5, _path3$3;
20644
+ var _path$A, _path2$5, _path3$2;
20627
20645
 
20628
20646
  function _extends$D() {
20629
20647
  _extends$D = Object.assign ? Object.assign.bind() : function (target) {
@@ -20660,7 +20678,7 @@ function SvgFileIcon(props) {
20660
20678
  strokeWidth: 1.4,
20661
20679
  strokeLinecap: "round",
20662
20680
  strokeLinejoin: "round"
20663
- })), _path3$3 || (_path3$3 = /*#__PURE__*/React.createElement("path", {
20681
+ })), _path3$2 || (_path3$2 = /*#__PURE__*/React.createElement("path", {
20664
20682
  d: "M12 19h12M12 23h8",
20665
20683
  stroke: "#2F81FF",
20666
20684
  strokeWidth: 1.4,
@@ -21497,17 +21515,21 @@ var Attachment = function Attachment(_ref) {
21497
21515
  var connectionStatus = reactRedux.useSelector(connectionStatusSelector);
21498
21516
  var imageContRef = React.useRef(null);
21499
21517
 
21500
- var _useState = React.useState(''),
21501
- attachmentUrl = _useState[0],
21502
- setAttachmentUrl = _useState[1];
21518
+ var _useState = React.useState(false),
21519
+ downloadingFile = _useState[0],
21520
+ setDownloadingFile = _useState[1];
21503
21521
 
21504
- var _useState2 = React.useState(true),
21505
- isCached = _useState2[0],
21506
- setIsCached = _useState2[1];
21522
+ var _useState2 = React.useState(''),
21523
+ attachmentUrl = _useState2[0],
21524
+ setAttachmentUrl = _useState2[1];
21507
21525
 
21508
- var _useState3 = React.useState(false),
21509
- downloadIsCancelled = _useState3[0],
21510
- setDownloadIsCancelled = _useState3[1];
21526
+ var _useState3 = React.useState(true),
21527
+ isCached = _useState3[0],
21528
+ setIsCached = _useState3[1];
21529
+
21530
+ var _useState4 = React.useState(false),
21531
+ downloadIsCancelled = _useState4[0],
21532
+ setDownloadIsCancelled = _useState4[1];
21511
21533
 
21512
21534
  var fileNameRef = React.useRef(null);
21513
21535
  var customDownloader = getCustomDownloader();
@@ -21566,6 +21588,17 @@ var Attachment = function Attachment(_ref) {
21566
21588
  }
21567
21589
  };
21568
21590
 
21591
+ var handleCompleteDownload = function handleCompleteDownload(attachmentId) {
21592
+ if (attachmentId === attachment.id) {
21593
+ setDownloadingFile(false);
21594
+ }
21595
+ };
21596
+
21597
+ var handleDownloadFile = function handleDownloadFile(attachment) {
21598
+ setDownloadingFile(true);
21599
+ downloadFile(attachment, handleCompleteDownload);
21600
+ };
21601
+
21569
21602
  React.useEffect(function () {
21570
21603
  if (downloadIsCancelled) {
21571
21604
  setAttachmentUrl('');
@@ -21745,7 +21778,7 @@ var Attachment = function Attachment(_ref) {
21745
21778
  }, selectedFileAttachmentsIcon || React__default.createElement(SvgFileIcon, null)), !isRepliedMessage && !isPrevious && React__default.createElement(DownloadFile$1, {
21746
21779
  backgroundColor: colors.primary,
21747
21780
  onClick: function onClick() {
21748
- return downloadFile(attachment);
21781
+ return handleDownloadFile(attachment);
21749
21782
  },
21750
21783
  onMouseEnter: function onMouseEnter() {
21751
21784
  return handleMouseEvent(true);
@@ -21753,7 +21786,9 @@ var Attachment = function Attachment(_ref) {
21753
21786
  onMouseLeave: function onMouseLeave() {
21754
21787
  return handleMouseEvent(false);
21755
21788
  }
21756
- }, React__default.createElement(SvgDownload, null)), !isPrevious && attachmentCompilationState[attachment.attachmentId] && (attachmentCompilationState[attachment.attachmentId] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.attachmentId] === UPLOAD_STATE.PAUSED) ? React__default.createElement(UploadProgress, {
21789
+ }, downloadingFile ? React__default.createElement(UploadingIcon, {
21790
+ fileAttachment: true
21791
+ }) : React__default.createElement(SvgDownload, null)), !isPrevious && attachmentCompilationState[attachment.attachmentId] && (attachmentCompilationState[attachment.attachmentId] === UPLOAD_STATE.UPLOADING || attachmentCompilationState[attachment.attachmentId] === UPLOAD_STATE.PAUSED) ? React__default.createElement(UploadProgress, {
21757
21792
  fileAttachment: true,
21758
21793
  onClick: handlePauseResumeUpload
21759
21794
  }, React__default.createElement(UploadPercent, {
@@ -21935,7 +21970,8 @@ function ConfirmPopup(_ref) {
21935
21970
  isLoading: loading,
21936
21971
  padding: '0'
21937
21972
  }, React__default.createElement(PopupBody, {
21938
- padding: 24
21973
+ paddingH: '24px',
21974
+ paddingV: '24px'
21939
21975
  }, React__default.createElement(CloseIcon, {
21940
21976
  onClick: function onClick() {
21941
21977
  return togglePopup();
@@ -22128,7 +22164,8 @@ function ForwardMessagePopup(_ref) {
22128
22164
  isLoading: loading,
22129
22165
  padding: '0'
22130
22166
  }, React__default.createElement(PopupBody, {
22131
- padding: 24,
22167
+ paddingH: '24px',
22168
+ paddingV: '24px',
22132
22169
  withFooter: true
22133
22170
  }, React__default.createElement(CloseIcon, {
22134
22171
  onClick: function onClick() {
@@ -22227,6 +22264,8 @@ function ReactionsPopup(_ref) {
22227
22264
  handleAddDeleteEmoji = _ref.handleAddDeleteEmoji,
22228
22265
  bottomPosition = _ref.bottomPosition,
22229
22266
  reactionScores = _ref.reactionScores,
22267
+ reactionsDetailsPopupBorderRadius = _ref.reactionsDetailsPopupBorderRadius,
22268
+ reactionsDetailsPopupHeaderItemsStyle = _ref.reactionsDetailsPopupHeaderItemsStyle,
22230
22269
  rtlDirection = _ref.rtlDirection;
22231
22270
  var popupRef = React.useRef(null);
22232
22271
  var reactions = reactRedux.useSelector(reactionsListSelector, reactRedux.shallowEqual);
@@ -22328,15 +22367,21 @@ function ReactionsPopup(_ref) {
22328
22367
  popupVerticalPosition: popupVerticalPosition,
22329
22368
  className: 'reactions_popup',
22330
22369
  height: popupHeight,
22331
- visible: !!(reactions && reactions.length && reactionsLoadingState === LOADING_STATE$1.LOADED),
22332
- rtlDirection: rtlDirection
22333
- }, React__default.createElement(ReactionScoresCont, null, React__default.createElement(ReactionScoresList, null, React__default.createElement(ReactionScoreItem, {
22370
+ visible: !calculateSizes,
22371
+ rtlDirection: rtlDirection,
22372
+ borderRadius: reactionsDetailsPopupBorderRadius
22373
+ }, React__default.createElement(ReactionScoresCont, null, React__default.createElement(ReactionScoresList, {
22374
+ borderBottom: reactionsDetailsPopupHeaderItemsStyle !== 'bubbles'
22375
+ }, React__default.createElement(ReactionScoreItem, {
22376
+ bubbleStyle: reactionsDetailsPopupHeaderItemsStyle === 'bubbles',
22334
22377
  active: activeTabKey === 'all',
22378
+ activeColor: colors.primary,
22335
22379
  onClick: function onClick() {
22336
22380
  return handleGetReactions();
22337
22381
  }
22338
22382
  }, React__default.createElement("span", null, "All " + totalReactions)), reactionsList.map(function (reaction) {
22339
22383
  return React__default.createElement(ReactionScoreItem, {
22384
+ bubbleStyle: reactionsDetailsPopupHeaderItemsStyle === 'bubbles',
22340
22385
  key: reaction.key,
22341
22386
  onClick: function onClick() {
22342
22387
  return handleGetReactions(reaction.key);
@@ -22363,7 +22408,7 @@ function ReactionsPopup(_ref) {
22363
22408
  }, reaction.key));
22364
22409
  })));
22365
22410
  }
22366
- var Container$b = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n position: absolute;\n /*right: ", ";*/\n right: ", ";\n /*left: ", ";*/\n left: ", ";\n top: ", ";\n bottom: ", ";\n width: 340px;\n height: ", "px;\n //overflow: ", ";\n overflow: hidden;\n max-height: 320px;\n background: #ffffff;\n //border: 1px solid #dfe0eb;\n box-shadow: 0 6px 24px -6px rgba(15, 34, 67, 0.12), 0px 1px 3px rgba(24, 23, 37, 0.14);\n box-sizing: border-box;\n //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n border-radius: 6px;\n visibility: ", ";\n transition: all 0.2s;\n\n direction: initial;\n z-index: 12;\n &::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n\n right: ", ";\n left: ", ";\n top: ", ";\n bottom: ", ";\n transform: rotate(45deg);\n box-shadow: ", ";\n border-radius: 2px;\n visibility: ", ";\n transition-delay: 150ms;\n transition-property: visibility;\n\n background: ", ";\n }\n"])), function (props) {
22411
+ var Container$b = styled__default.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n position: absolute;\n /*right: ", ";*/\n right: ", ";\n /*left: ", ";*/\n left: ", ";\n top: ", ";\n bottom: ", ";\n width: 340px;\n height: ", "px;\n //overflow: ", ";\n overflow: hidden;\n max-height: 320px;\n background: #ffffff;\n //border: 1px solid #dfe0eb;\n box-shadow: 0 6px 24px -6px rgba(15, 34, 67, 0.12), 0px 1px 3px rgba(24, 23, 37, 0.14);\n box-sizing: border-box;\n //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n border-radius: ", ";\n visibility: ", ";\n transition: all 0.2s;\n\n direction: initial;\n z-index: 12;\n &::after {\n content: '';\n position: absolute;\n width: 12px;\n height: 12px;\n\n right: ", ";\n left: ", ";\n top: ", ";\n bottom: ", ";\n transform: rotate(45deg);\n box-shadow: ", ";\n border-radius: 2px;\n visibility: ", ";\n transition-delay: 150ms;\n transition-property: visibility;\n\n background: ", ";\n }\n"])), function (props) {
22367
22412
  return props.popupHorizontalPosition === 'left' && (props.rtlDirection ? 'calc(100% - 80px)' : 0);
22368
22413
  }, function (props) {
22369
22414
  return props.rtlDirection && 0;
@@ -22379,6 +22424,8 @@ var Container$b = styled__default.div(_templateObject$p || (_templateObject$p =
22379
22424
  return props.height && props.height + 22;
22380
22425
  }, function (props) {
22381
22426
  return !props.height && 'hidden';
22427
+ }, function (props) {
22428
+ return props.borderRadius || '12px';
22382
22429
  }, function (props) {
22383
22430
  return props.visible ? 'visible' : 'hidden';
22384
22431
  }, function (props) {
@@ -22400,17 +22447,33 @@ var ReactionsList = styled__default.ul(_templateObject4$d || (_templateObject4$d
22400
22447
  return !props.popupHeight && 'hidden';
22401
22448
  });
22402
22449
  var ReactionScoresCont = styled__default.div(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteralLoose(["\n max-width: 100%;\n overflow-y: auto;\n"])));
22403
- var ReactionScoresList = styled__default.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n display: flex;\n border-bottom: 1px solid ", ";\n"])), colors.gray1);
22404
- var ReactionScoreItem = styled__default.div(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n white-space: nowrap;\n padding: 12px;\n font-weight: 500;\n font-size: 13px;\n line-height: 20px;\n border-bottom: 1px solid ", ";\n color: ", ";\n margin-bottom: -1px;\n cursor: pointer;\n & > span {\n position: relative;\n ", "\n }\n"])), colors.gray1, function (props) {
22450
+ var ReactionScoresList = styled__default.div(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteralLoose(["\n display: flex;\n border-bottom: ", ";\n padding: 2px 8px 0;\n"])), function (props) {
22451
+ return props.borderBottom && "1px solid " + colors.gray1;
22452
+ });
22453
+ var TabKey = styled__default.span(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose([""])));
22454
+ var ReactionScoreItem = styled__default.div(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n white-space: nowrap;\n padding: ", ";\n font-weight: 500;\n font-size: 13px;\n border-bottom: ", ";\n color: ", ";\n margin-bottom: -1px;\n cursor: pointer;\n & > span {\n position: relative;\n border: ", ";\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: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla,\n twemoji mozilla, segoe ui symbol;\n margin-right: 4px;\n font-size: 15px;\n }\n }\n"])), function (props) {
22455
+ return props.bubbleStyle ? '12px 4px' : '12px';
22456
+ }, function (props) {
22457
+ return !props.bubbleStyle && "1px solid " + colors.gray1;
22458
+ }, function (props) {
22405
22459
  return props.active ? colors.gray6 : colors.gray9;
22406
22460
  }, function (props) {
22407
- return props.active && "\n &::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: -13px;\n width: 100%;\n height: 2px;\n background-color: " + (props.activeColor || colors.primary) + ";\n border-radius: 2px;\n }";
22408
- });
22409
- var TabKey = styled__default.span(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla,\n twemoji mozilla, segoe ui symbol;\n margin-right: 4px;\n font-size: 15px;\n"])));
22461
+ return props.bubbleStyle && !props.active && "1px solid " + colors.gray1;
22462
+ }, function (props) {
22463
+ return props.bubbleStyle && '6px 12px';
22464
+ }, function (props) {
22465
+ return props.bubbleStyle ? '18px' : '30px';
22466
+ }, function (props) {
22467
+ return props.active && props.bubbleStyle && colors.primary;
22468
+ }, function (props) {
22469
+ return props.active && props.bubbleStyle && colors.white;
22470
+ }, function (props) {
22471
+ return props.active && !props.bubbleStyle && "\n &::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: -13px;\n width: 100%;\n height: 2px;\n background-color: " + (props.activeColor || colors.primary) + ";\n border-radius: 2px;\n }\n ";
22472
+ }, TabKey);
22410
22473
  var ReactionKey = styled__default.span(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla,\n twemoji mozilla, segoe ui symbol;\n font-size: 20px;\n cursor: pointer;\n"])));
22411
22474
  var ReactionItem$1 = styled__default.li(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 15px;\n padding: 6px 16px;\n transition: all 0.2s;\n\n & ", " {\n width: 10px;\n height: 10px;\n }\n"])), UserStatus);
22412
22475
 
22413
- var _path$H, _path2$6;
22476
+ var _path$H;
22414
22477
 
22415
22478
  function _extends$K() {
22416
22479
  _extends$K = Object.assign ? Object.assign.bind() : function (target) {
@@ -22429,22 +22492,22 @@ function _extends$K() {
22429
22492
  return _extends$K.apply(this, arguments);
22430
22493
  }
22431
22494
 
22432
- function SvgEmojiSmileIcon(props) {
22495
+ function SvgEmojiAnimalIcon(props) {
22433
22496
  return /*#__PURE__*/React.createElement("svg", _extends$K({
22434
- width: 24,
22435
- height: 24,
22436
- fill: "currentColor",
22497
+ width: 20,
22498
+ height: 20,
22499
+ viewBox: "0 0 20.01 20.01",
22500
+ fill: "none",
22437
22501
  xmlns: "http://www.w3.org/2000/svg"
22438
22502
  }, props), _path$H || (_path$H = /*#__PURE__*/React.createElement("path", {
22439
- d: "M8.438 14.297a.9.9 0 011.273.149 2.77 2.77 0 00.516.415c.383.24.97.489 1.773.489.803 0 1.39-.25 1.773-.489a2.773 2.773 0 00.516-.415l.012-.013.002-.003a.9.9 0 011.4 1.132L15 15l.703.562-.001.001-.002.002-.002.003-.007.008-.018.022a3.487 3.487 0 01-.245.254c-.16.15-.394.344-.7.536A5.094 5.094 0 0112 17.15a5.094 5.094 0 01-2.727-.762 4.567 4.567 0 01-.7-.537 3.501 3.501 0 01-.246-.253l-.018-.022-.007-.008-.002-.003-.002-.002L9 15l-.703.562a.9.9 0 01.14-1.265zM10.25 10.25a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0zM15 11.5A1.25 1.25 0 1015 9a1.25 1.25 0 000 2.5z"
22440
- })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
22441
22503
  fillRule: "evenodd",
22442
22504
  clipRule: "evenodd",
22443
- d: "M12 2.1c-5.468 0-9.9 4.432-9.9 9.9 0 5.467 4.432 9.9 9.9 9.9s9.9-4.433 9.9-9.9c0-5.468-4.432-9.9-9.9-9.9zM3.9 12a8.1 8.1 0 1116.2 0 8.1 8.1 0 01-16.2 0z"
22505
+ d: "M7.188 3.875a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.313.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zm7.938-.813a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.313.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zM3.437 7.624a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.312.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zm15.438-.813a.813.813 0 100 1.625.813.813 0 000-1.625zm-2.313.813a2.312 2.312 0 114.625 0 2.312 2.312 0 01-4.625 0zm-6.393-.359a3.563 3.563 0 015.567 1.862c.193.672.643 1.24 1.252 1.582a3.25 3.25 0 01-1.548 6.102h-.002c-.435 0-.864-.086-1.265-.253a4.859 4.859 0 00-3.722 0h.001a3.28 3.28 0 01-1.265.253h-.003a3.25 3.25 0 01-1.548-6.101A2.657 2.657 0 006.576 9.94a3.563 3.563 0 011.28-1.862zM10 8.863a2.062 2.062 0 00-1.982 1.493 4.156 4.156 0 01-1.964 2.478l-.008.004a1.75 1.75 0 001.517 3.15l.001-.001a6.358 6.358 0 014.872 0h.001a1.75 1.75 0 001.516-3.15l-.007-.003a4.156 4.156 0 01-1.964-2.478A2.062 2.062 0 0010 8.863z",
22506
+ fill: "CurrentColor"
22444
22507
  })));
22445
22508
  }
22446
22509
 
22447
- var _path$I;
22510
+ var _path$I, _path2$6, _path3$3;
22448
22511
 
22449
22512
  function _extends$L() {
22450
22513
  _extends$L = Object.assign ? Object.assign.bind() : function (target) {
@@ -22463,16 +22526,28 @@ function _extends$L() {
22463
22526
  return _extends$L.apply(this, arguments);
22464
22527
  }
22465
22528
 
22466
- function SvgEmojiAnimalIcon(props) {
22529
+ function SvgEmojiFoodIcon(props) {
22467
22530
  return /*#__PURE__*/React.createElement("svg", _extends$L({
22468
- width: 24,
22469
- height: 24,
22470
- fill: "currentColor",
22531
+ width: 20,
22532
+ height: 20,
22533
+ viewBox: "0 0 20.01 20.01",
22534
+ fill: "none",
22471
22535
  xmlns: "http://www.w3.org/2000/svg"
22472
22536
  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
22473
22537
  fillRule: "evenodd",
22474
22538
  clipRule: "evenodd",
22475
- d: "M14.068 3.405c.559-.56 1.345-.95 2.212-.804.873.147 1.481.776 1.81 1.496.33.723.424 1.61.26 2.5-.165.89-.57 1.689-1.133 2.254-.558.56-1.344.95-2.212.804-.872-.147-1.48-.776-1.81-1.497-.33-.722-.423-1.61-.258-2.5.164-.89.569-1.688 1.131-2.253zm1.215 1.21c-.291.292-.552.765-.66 1.355-.11.59-.034 1.114.132 1.476.166.364.378.492.535.518.161.027.418-.027.713-.323.291-.292.551-.765.66-1.355.11-.59.033-1.115-.132-1.476-.166-.364-.378-.492-.535-.518-.162-.027-.418.027-.713.323zM9.264 11.68c.632-.78 1.499-1.395 2.736-1.395 1.24 0 2.106.621 2.737 1.4.523.646.937 1.468 1.304 2.198l.151.299c.3.588.588 1.046.857 1.474.1.159.197.313.291.469.322.53.66 1.148.66 1.871 0 .587-.143 1.1-.44 1.517-.295.413-.69.661-1.073.809-.66.255-1.413.251-1.82.25l-.095-.001c-.464 0-.833-.065-1.16-.122l-.11-.02A7.038 7.038 0 0012 20.315c-.576 0-.953.056-1.302.116l-.11.02a6.337 6.337 0 01-1.16.12H9.24c-.447-.003-1.216-.025-1.889-.341a2.298 2.298 0 01-.964-.82C6.127 19.01 6 18.534 6 17.996c0-.695.344-1.316.658-1.839.09-.15.182-.3.277-.454.273-.441.568-.917.871-1.519l.14-.277c.37-.742.788-1.575 1.318-2.227zm.211 3.002l-.138.275c-.341.675-.691 1.24-.97 1.692-.088.14-.168.27-.239.389-.33.55-.414.794-.414.958 0 .264.06.401.108.475.05.075.127.145.258.206.298.14.723.175 1.171.179h.178c.308 0 .537-.04.87-.097l.11-.019c.4-.068.881-.14 1.591-.14s1.19.072 1.591.14l.11.02c.334.057.562.096.87.096h.034c.47 0 .918 0 1.265-.133.153-.06.24-.13.293-.205.052-.072.123-.219.123-.522 0-.2-.09-.452-.412-.983-.072-.119-.154-.25-.245-.393-.277-.441-.627-.997-.964-1.66l-.157-.31c-.381-.754-.705-1.394-1.103-1.886C12.988 12.25 12.57 12 12 12c-.57 0-.99.25-1.406.761-.403.497-.73 1.15-1.119 1.922zM11.063 5.659c-.164-.891-.569-1.69-1.131-2.254-.559-.56-1.345-.95-2.212-.804-.873.147-1.481.776-1.81 1.496-.33.723-.424 1.61-.26 2.5.165.89.57 1.689 1.132 2.254.56.56 1.345.95 2.213.804.872-.147 1.48-.776 1.81-1.497.33-.722.423-1.61.258-2.5zM8.004 4.292c.162-.027.418.027.713.323.291.292.552.765.66 1.355.11.59.034 1.114-.132 1.476-.166.364-.378.492-.535.518-.161.027-.418-.027-.713-.323-.291-.292-.551-.765-.66-1.355-.11-.59-.033-1.115.132-1.476.166-.364.378-.492.535-.518zM4.83 8.949c.648.367 1.214.975 1.588 1.723.374.746.518 1.558.398 2.285-.12.73-.526 1.445-1.298 1.78-.757.33-1.565.162-2.205-.201-.648-.367-1.214-.976-1.588-1.723-.374-.747-.518-1.558-.398-2.286.12-.73.526-1.445 1.297-1.78.757-.33 1.566-.161 2.206.202zm-.846 1.49c-.331-.187-.56-.17-.676-.12-.102.044-.237.167-.29.485-.052.32.003.768.24 1.242.236.472.576.815.9.998.332.188.561.172.677.121.101-.044.237-.167.29-.485.052-.32-.003-.768-.24-1.241-.236-.473-.576-.815-.9-1zM21.407 8.773c-.787-.38-1.627-.18-2.271.225-.65.41-1.206 1.08-1.57 1.886-.363.808-.497 1.672-.384 2.437.11.752.49 1.529 1.269 1.905.787.38 1.626.18 2.27-.226.65-.41 1.206-1.079 1.57-1.886.363-.807.497-1.671.384-2.436-.11-.753-.49-1.53-1.268-1.905zm-2.277 2.815c.247-.55.598-.936.92-1.139.327-.206.526-.174.611-.133.094.046.258.2.319.612.059.4-.006.934-.253 1.482-.247.55-.597.937-.92 1.14-.327.206-.525.173-.61.132-.095-.045-.259-.2-.32-.612-.058-.4.006-.934.253-1.482z"
22539
+ d: "M12.143 7.855c0-.395.32-.714.714-.714.779 0 1.501.261 2.033.779.535.52.824 1.249.824 2.078a.714.714 0 11-1.428 0c0-.49-.165-.833-.392-1.054-.23-.224-.579-.375-1.037-.375a.714.714 0 01-.714-.714z",
22540
+ fill: "CurrentColor"
22541
+ })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
22542
+ fillRule: "evenodd",
22543
+ clipRule: "evenodd",
22544
+ d: "M10.083 2.222c-.616.616-.81 1.522-.797 2.367a6.008 6.008 0 00-1.905-.306c-3.438 0-5.952 2.45-5.952 5.858 0 1.644.588 3.698 1.574 5.35.968 1.622 2.465 3.08 4.378 3.08a5.98 5.98 0 002.62-.596 5.98 5.98 0 002.618.597c1.914 0 3.41-1.46 4.378-3.081.986-1.652 1.574-3.706 1.574-5.35 0-3.208-2.229-5.568-5.36-5.833.223-.434.307-.893.34-1.244.049-.518-.016-1.016-.09-1.528-.513-.072-1.01-.14-1.528-.09-.524.048-1.288.213-1.85.776zM7.38 5.712c-2.674 0-4.524 1.835-4.524 4.43 0 1.356.503 3.16 1.372 4.616.887 1.486 2.01 2.385 3.152 2.385.758 0 1.454-.178 2.075-.492a1.206 1.206 0 011.088 0 4.55 4.55 0 002.075.492c1.142 0 2.265-.899 3.152-2.385.869-1.456 1.372-3.26 1.372-4.617 0-2.594-1.85-4.43-4.524-4.43a4.57 4.57 0 00-2.073.493 1.206 1.206 0 01-1.09 0 4.551 4.551 0 00-2.075-.492zm3.341-1.437c.362-.026.776-.105 1.043-.37.265-.267.344-.682.37-1.043-.361.026-.776.104-1.042.37-.266.267-.345.681-.37 1.043z",
22545
+ fill: "CurrentColor"
22546
+ })), _path3$3 || (_path3$3 = /*#__PURE__*/React.createElement("path", {
22547
+ fillRule: "evenodd",
22548
+ clipRule: "evenodd",
22549
+ d: "M12.857 7.14a.714.714 0 000 1.43c.458 0 .807.15 1.037.374.227.221.392.565.392 1.054a.714.714 0 101.428 0c0-.83-.289-1.557-.824-2.078-.532-.518-1.254-.78-2.033-.78z",
22550
+ fill: "CurrentColor"
22476
22551
  })));
22477
22552
  }
22478
22553
 
@@ -22495,18 +22570,22 @@ function _extends$M() {
22495
22570
  return _extends$M.apply(this, arguments);
22496
22571
  }
22497
22572
 
22498
- function SvgEmojiFoodIcon(props) {
22573
+ function SvgEmojiTravelIcon(props) {
22499
22574
  return /*#__PURE__*/React.createElement("svg", _extends$M({
22500
- width: 24,
22501
- height: 24,
22502
- fill: "currentColor",
22575
+ width: 20,
22576
+ height: 20,
22577
+ viewBox: "0 0 20.01 20.01",
22578
+ fill: "none",
22503
22579
  xmlns: "http://www.w3.org/2000/svg"
22504
22580
  }, props), _path$J || (_path$J = /*#__PURE__*/React.createElement("path", {
22505
- d: "M16.375 5.336c-1.608 0-2.517.346-3.22.817.449-1.026 1.547-2.567 4.095-2.567a.875.875 0 100-1.75c-2.556 0-4.05 1.194-4.854 2.198-.056.068-.104.141-.157.213C11.764 2.588 10.949 1 9.556 1c-.55 0-1.187.248-1.931.836-1.726 1.366-1.462 2.558-.444 3.518C4.658 5.549 1.5 7.413 1.5 12.328c0 4.009 4.34 9.633 7.875 9.633 1.728 0 2.075-.426 2.625-.875.55.45.897.875 2.625.875 3.534 0 7.875-5.616 7.875-9.625 0-5.21-3.548-7-6.125-7zM8.712 3.208c.56-.445.825-.458.844-.458.373.148.853 1.23 1.188 2.673-1.337-.55-2.399-1.183-2.608-1.615.052-.098.21-.312.576-.6zm5.913 17.003c-.945 0-1.059-.096-1.364-.352l-.154-.128a1.739 1.739 0 00-1.108-.395 1.74 1.74 0 00-1.108.395l-.154.128c-.303.255-.417.352-1.362.352-2.461 0-6.125-4.716-6.125-7.883 0-5.095 3.927-5.242 4.375-5.242 1.697 0 2.174.412 2.964 1.094l.282.242a1.745 1.745 0 002.258 0l.282-.242c.79-.682 1.267-1.094 2.964-1.094.448 0 4.375.147 4.375 5.25 0 3.165-3.664 7.875-6.125 7.875z"
22581
+ fillRule: "evenodd",
22582
+ clipRule: "evenodd",
22583
+ d: "M13.763 2.458a2.6 2.6 0 013.748 3.604l-2.135 2.236a5.065 5.065 0 00-.188.204.076.076 0 00-.004.017l.004.03c.008.05.024.116.053.241l1.327 5.754.012.05c.044.189.096.412.079.639-.015.197-.07.39-.162.564-.106.202-.268.364-.406.5l-.036.037-.306.306c-.215.215-.409.408-.58.55-.175.147-.406.309-.705.362a1.46 1.46 0 01-1.124-.266c-.244-.18-.378-.429-.47-.638-.089-.204-.175-.464-.272-.752l-1.2-3.6-1.779 1.78a4.815 4.815 0 00-.172.178.076.076 0 00-.005.015l.001.027c.003.045.01.105.022.22l.141 1.27.005.045c.02.168.042.368.01.567a1.46 1.46 0 01-.172.49c-.1.176-.242.317-.362.437l-.032.032-.152.151-.018.019c-.166.166-.32.32-.46.438-.15.125-.338.258-.583.322a1.46 1.46 0 01-1.007-.1 1.49 1.49 0 01-.508-.43c-.114-.142-.236-.325-.366-.52l-1.22-1.83a4.929 4.929 0 00-.063-.09l-.009-.006a4.655 4.655 0 00-.077-.052l-1.829-1.22a7.783 7.783 0 01-.52-.365 1.492 1.492 0 01-.43-.509 1.46 1.46 0 01-.1-1.006c.065-.245.197-.434.323-.584.117-.14.272-.294.438-.46l.018-.018.152-.152.031-.032c.12-.12.262-.262.437-.362.152-.086.318-.145.49-.172a2.09 2.09 0 01.568.01l.044.005 1.27.141a4.747 4.747 0 00.247.023.075.075 0 00.015-.005 4.867 4.867 0 00.178-.172l1.78-1.78-3.6-1.199a9.48 9.48 0 01-.752-.272c-.209-.092-.457-.226-.638-.47a1.46 1.46 0 01-.265-1.124c.053-.298.215-.53.36-.705.143-.171.337-.365.552-.58l.02-.02.285-.285.037-.037c.136-.137.298-.3.5-.406a1.46 1.46 0 01.564-.161c.228-.018.45.034.64.078l.05.012 5.731 1.323a5.096 5.096 0 00.275.057.075.075 0 00.019-.005 5.146 5.146 0 00.199-.197l2.082-2.152zm2.728.948a1.216 1.216 0 00-1.734.014l-2.082 2.151-.036.037c-.132.137-.288.3-.483.407a1.46 1.46 0 01-.602.178c-.223.016-.442-.036-.627-.079l-.05-.011L5.146 4.78a5.06 5.06 0 00-.279-.059.077.077 0 00-.017.005 5.065 5.065 0 00-.205.197l-.285.285c-.243.243-.39.392-.487.508a.915.915 0 00-.063.083c0 .006.002.012.004.018.016.01.045.025.094.046.138.06.337.128.662.236l4.633 1.544a.692.692 0 01.27 1.146l-2.57 2.57-.032.032c-.12.12-.261.262-.436.362a1.459 1.459 0 01-.492.172 2.09 2.09 0 01-.567-.01l-.044-.005-1.27-.141a4.747 4.747 0 00-.247-.023.075.075 0 00-.015.005 4.867 4.867 0 00-.178.172l-.152.152c-.19.19-.301.302-.375.39a.735.735 0 00-.045.058c0 .008 0 .015.002.023.01.009.027.025.056.048.09.072.22.16.444.309l1.808 1.205.015.01a1.466 1.466 0 01.507.507l.01.016 1.206 1.807c.15.225.237.355.308.444.024.03.04.047.049.056a.076.076 0 00.022.002.723.723 0 00.059-.045c.087-.073.199-.184.39-.375l.151-.151a4.89 4.89 0 00.172-.178.077.077 0 00.005-.016v-.026a4.94 4.94 0 00-.023-.22l-.14-1.27-.006-.045a2.091 2.091 0 01-.01-.567 1.46 1.46 0 01.172-.491c.1-.175.242-.317.363-.437l.031-.031 2.57-2.57a.692.692 0 011.146.27L13.9 15.43c.109.325.175.523.236.662a.9.9 0 00.046.093.073.073 0 00.019.004.917.917 0 00.083-.063c.116-.096.264-.244.507-.486l.285-.285a5.078 5.078 0 00.197-.206.073.073 0 00.005-.017 5.042 5.042 0 00-.058-.279l-1.328-5.753-.011-.049c-.044-.184-.095-.401-.079-.624a1.46 1.46 0 01.152-.553c.1-.199.255-.36.386-.496l.034-.037 2.136-2.236a1.216 1.216 0 00-.02-1.7z",
22584
+ fill: "CurrentColor"
22506
22585
  })));
22507
22586
  }
22508
22587
 
22509
- var _path$K;
22588
+ var _g$2, _defs;
22510
22589
 
22511
22590
  function _extends$N() {
22512
22591
  _extends$N = Object.assign ? Object.assign.bind() : function (target) {
@@ -22525,20 +22604,29 @@ function _extends$N() {
22525
22604
  return _extends$N.apply(this, arguments);
22526
22605
  }
22527
22606
 
22528
- function SvgEmojiTravelIcon(props) {
22607
+ function SvgEmojiObjectIcon(props) {
22529
22608
  return /*#__PURE__*/React.createElement("svg", _extends$N({
22530
- width: 24,
22531
- height: 24,
22532
- fill: "currentColor",
22609
+ width: 20,
22610
+ height: 20,
22611
+ viewBox: "0 0 20.01 20.01",
22612
+ fill: "none",
22533
22613
  xmlns: "http://www.w3.org/2000/svg"
22534
- }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
22614
+ }, props), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
22615
+ clipPath: "url(#emojiObjectIcon_svg__clip0_1048_8610)"
22616
+ }, /*#__PURE__*/React.createElement("path", {
22535
22617
  fillRule: "evenodd",
22536
22618
  clipRule: "evenodd",
22537
- d: "M9.61 3.6H14.39c1.117 0 1.89-.001 2.59.24a4.4 4.4 0 011.643 1.016c.529.518.874 1.209 1.374 2.209l.067.134.84 1.68h1.216a.88.88 0 01.88.88v.312c0 .82-.59 1.462-1.32 1.607v7.148c0 .093 0 .209-.008.312a1.28 1.28 0 01-.131.485c-.122.24-.318.435-.558.558-.187.095-.364.12-.485.13-.103.009-.219.009-.313.009h-.531c-.093 0-.21 0-.312-.009a1.284 1.284 0 01-.485-.13 1.275 1.275 0 01-.558-.558 1.284 1.284 0 01-.13-.485c-.01-.103-.009-.22-.009-.313v-.265H5.84v.266c0 .093 0 .209-.008.312-.01.12-.036.298-.131.485-.122.24-.318.435-.558.558-.187.095-.364.12-.485.13-.103.009-.219.009-.312.009h-.532c-.093 0-.21 0-.312-.009a1.284 1.284 0 01-.485-.13 1.276 1.276 0 01-.558-.558 1.282 1.282 0 01-.13-.485 3.969 3.969 0 01-.009-.313v-7.147A1.637 1.637 0 011 10.071V9.76a.88.88 0 01.88-.88h1.216l.84-1.68.067-.135c.5-1 .845-1.691 1.374-2.209A4.4 4.4 0 017.02 3.84c.7-.241 1.472-.24 2.59-.24zM4.095 16.363a9.285 9.285 0 01-.015-.682v-4.143c.063.011.14.025.234.04.283.044.715.102 1.336.158 1.243.113 3.25.224 6.35.224 3.1 0 5.107-.111 6.35-.224a20.77 20.77 0 001.336-.158c.094-.015.171-.029.234-.04v4.03c0 .384 0 .619-.015.795a1.126 1.126 0 01-.03.19.44.44 0 01-.199.2l-.003.002a1.126 1.126 0 01-.19.03c-.176.014-.41.015-.795.015H5.312c-.384 0-.62-.001-.795-.015a1.127 1.127 0 01-.19-.03.44.44 0 01-.202-.202 1.126 1.126 0 01-.03-.19zm15.32-6.524l-.925-1.852c-.594-1.188-.807-1.588-1.098-1.873a2.64 2.64 0 00-.987-.61c-.385-.133-.839-.144-2.166-.144H9.761c-1.328 0-1.781.011-2.166.144a2.64 2.64 0 00-.987.61c-.29.285-.504.685-1.098 1.873l-.926 1.852h.004c.24.038.633.09 1.222.144 1.177.107 3.13.217 6.19.217 3.06 0 5.013-.11 6.19-.217a19.01 19.01 0 001.226-.144zm-1.146 5.194a.88.88 0 10-.218-1.746l-1.76.22a.88.88 0 00.218 1.746l1.76-.22zM4.967 14.05a.88.88 0 00.764.982l1.76.22a.88.88 0 10.218-1.746l-1.76-.22a.88.88 0 00-.982.763z"
22538
- })));
22619
+ d: "M10 .917a.75.75 0 01.75.75V2.5a.75.75 0 01-1.5 0v-.833a.75.75 0 01.75-.75zM3.553 3.553a.75.75 0 011.06 0l.5.5a.75.75 0 11-1.06 1.061l-.5-.5a.75.75 0 010-1.06zm12.894 0a.75.75 0 010 1.061l-.5.5a.75.75 0 11-1.06-1.06l.5-.5a.75.75 0 011.06 0zM10 5.75a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5zM4.25 10a5.75 5.75 0 118.167 5.22v1.447a2.417 2.417 0 01-4.834 0v-1.448A5.75 5.75 0 014.25 10zm4.833 5.678v.989a.917.917 0 101.834 0v-.99a5.795 5.795 0 01-1.834 0zM.917 10a.75.75 0 01.75-.75H2.5a.75.75 0 110 1.5h-.833a.75.75 0 01-.75-.75zm15.833 0a.75.75 0 01.75-.75h.833a.75.75 0 110 1.5H17.5a.75.75 0 01-.75-.75z",
22620
+ fill: "CurrentColor"
22621
+ }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
22622
+ id: "emojiObjectIcon_svg__clip0_1048_8610"
22623
+ }, /*#__PURE__*/React.createElement("path", {
22624
+ fill: "CurrentColor",
22625
+ d: "M0 0h20v20H0z"
22626
+ })))));
22539
22627
  }
22540
22628
 
22541
- var _path$L;
22629
+ var _path$K;
22542
22630
 
22543
22631
  function _extends$O() {
22544
22632
  _extends$O = Object.assign ? Object.assign.bind() : function (target) {
@@ -22557,18 +22645,22 @@ function _extends$O() {
22557
22645
  return _extends$O.apply(this, arguments);
22558
22646
  }
22559
22647
 
22560
- function SvgEmojiObjectIcon(props) {
22648
+ function SvgEmojiSymbolsIcon(props) {
22561
22649
  return /*#__PURE__*/React.createElement("svg", _extends$O({
22562
- width: 24,
22563
- height: 24,
22564
- fill: "currentColor",
22650
+ width: 20,
22651
+ height: 20,
22652
+ viewBox: "0 0 20.01 20.01",
22653
+ fill: "none",
22565
22654
  xmlns: "http://www.w3.org/2000/svg"
22566
- }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
22567
- d: "M10 16h1.19v-2.06a1.007 1.007 0 01-.16-.12L9.32 12.1a1 1 0 111.41-1.41l1.25 1.25 1.32-1.32a.97.97 0 011.38 0c.4.4.4 1.05 0 1.46L13 13.74a.998.998 0 01-.19.15V16H14v-.15a1.002 1.002 0 01.3-.73c2.71-2.58 3.71-4.17 3.71-6.27a5.93 5.93 0 00-6-5.85C8.69 3 6 5.63 6 8.85c0 2.1.98 3.66 3.7 6.26.19.18.3.45.3.72V16zm0 2v1a1 1 0 001 1h2a1 1 0 001-1v-1h-4zm-2-1.75c-2.85-2.77-4-4.7-4-7.4C4 4.51 7.6 1 12 1c4.42 0 8.01 3.51 8.01 7.85 0 2.7-1.17 4.66-4.01 7.42V19a3 3 0 01-3 3h-2a3 3 0 01-3-3v-2.75z"
22655
+ }, props), _path$K || (_path$K = /*#__PURE__*/React.createElement("path", {
22656
+ fillRule: "evenodd",
22657
+ clipRule: "evenodd",
22658
+ d: "M8.04 1.76a.75.75 0 01.616.863l-.548 3.294h5.146l.59-3.54a.75.75 0 111.48.246l-.55 3.294h2.31a.75.75 0 010 1.5h-2.56l-.86 5.167h2.586a.75.75 0 110 1.5h-2.837l-.59 3.54a.75.75 0 11-1.48-.247l.55-3.293H6.745l-.59 3.54a.75.75 0 11-1.48-.247l.55-3.293H2.083a.75.75 0 010-1.5h3.393l.86-5.167h-3.42a.75.75 0 110-1.5h3.67l.59-3.54a.75.75 0 01.864-.617zm-.182 5.657l-.862 5.167h5.146l.862-5.167H7.858z",
22659
+ fill: "CurrentColor"
22568
22660
  })));
22569
22661
  }
22570
22662
 
22571
- var _path$M;
22663
+ var _path$L;
22572
22664
 
22573
22665
  function _extends$P() {
22574
22666
  _extends$P = Object.assign ? Object.assign.bind() : function (target) {
@@ -22587,44 +22679,18 @@ function _extends$P() {
22587
22679
  return _extends$P.apply(this, arguments);
22588
22680
  }
22589
22681
 
22590
- function SvgEmojiSymbolsIcon(props) {
22682
+ function SvgEmojiFlagicon(props) {
22591
22683
  return /*#__PURE__*/React.createElement("svg", _extends$P({
22592
- width: 24,
22593
- height: 24,
22594
- fill: "currentColor",
22684
+ width: 20,
22685
+ height: 20,
22686
+ viewBox: "0 0 20.01 20.01",
22687
+ fill: "none",
22595
22688
  xmlns: "http://www.w3.org/2000/svg"
22596
- }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
22597
- d: "M19.1 4a4.6 4.6 0 011.37.28A4.01 4.01 0 0123 7.9c.03 2.73.03 5.47 0 8.2a4.15 4.15 0 01-.98 2.52A4.02 4.02 0 0119.1 20c-4.73.06-9.47.06-14.2 0a4.572 4.572 0 01-1.37-.28A4.02 4.02 0 011 16.1c-.03-2.73-.03-5.47 0-8.2A4.01 4.01 0 014.9 4c4.73-.06 9.47-.06 14.2 0zM5 6a2.02 2.02 0 00-2 1.95c-.034 2.7-.034 5.4 0 8.1A2.02 2.02 0 004.95 18c4.7.06 9.4.06 14.1 0A2.02 2.02 0 0021 16.05c.034-2.7.034-5.4 0-8.1A2.02 2.02 0 0019.05 6C14.37 5.94 9.68 6 5 6zm2 7.88a1.12 1.12 0 110 2.24 1.12 1.12 0 010-2.24zm4 .03a1.1 1.1 0 110 2.19 1.1 1.1 0 010-2.2v.01zm6.44-3.8l.23-1.18c.06-.3.1-.46.27-.62.1-.1.25-.15.42-.15.18 0 .37.07.5.2.23.22.18.53.12.83l-.19.92h.2c.32 0 .45.01.58.08.19.1.31.3.31.56 0 .27-.12.46-.3.56-.14.07-.27.08-.59.08h-.45l-.26 1.27h.33c.32 0 .44.02.58.09.18.1.3.29.3.55 0 .27-.12.47-.3.56-.14.07-.26.08-.58.08h-.58l-.27 1.33c-.06.3-.1.46-.26.62a.6.6 0 01-.42.15.74.74 0 01-.5-.2c-.23-.22-.18-.53-.12-.83l.21-1.07h-1.3l-.27 1.33c-.06.3-.1.46-.27.62-.1.1-.25.15-.42.15a.74.74 0 01-.49-.2c-.24-.22-.18-.53-.12-.83l.2-1.07h-.2c-.31 0-.44 0-.57-.08-.19-.1-.31-.29-.31-.56 0-.26.12-.46.3-.55.14-.07.27-.09.59-.09h.45l.26-1.27h-.33c-.32 0-.44-.01-.58-.08-.18-.1-.3-.3-.3-.56 0-.27.12-.46.3-.56.14-.07.26-.08.58-.08h.58l.24-1.18c.06-.3.1-.46.27-.62.1-.1.25-.15.41-.15.18 0 .37.07.5.2.24.22.18.53.12.83l-.18.92h1.31zm-8.14-.2c0-1.33-1.05-2.18-2.36-2.18-.68 0-1.35.23-1.78.6-.45.4-.64 1-.64 1.34 0 .23.1.42.22.53.12.12.3.2.5.2.21 0 .36-.07.5-.18.34-.25.42-.63.55-.77a.85.85 0 01.66-.27c.55 0 .76.27.76.75 0 .3-.24.67-.43.89l-.65.83c-.28.4-.4.7-.38 1.03.02.36.28.67.57.7.24.02.6 0 .79-.38.13-.25.53-.73.73-1.07l.47-.62c.34-.43.49-.8.49-1.4zm2.54-1.17c0-.36-.01-.49-.11-.68-.13-.22-.4-.37-.73-.37-.33 0-.6.15-.73.37-.1.19-.11.32-.11.68v3.45c0 .36 0 .5.11.68.13.22.4.37.73.37.33 0 .6-.15.73-.37.1-.19.11-.32.11-.68V8.74zm5.09 3.92l.25-1.27h-1.3l-.26 1.27h1.31z"
22598
- })));
22599
- }
22600
-
22601
- var _path$N;
22602
-
22603
- function _extends$Q() {
22604
- _extends$Q = Object.assign ? Object.assign.bind() : function (target) {
22605
- for (var i = 1; i < arguments.length; i++) {
22606
- var source = arguments[i];
22607
-
22608
- for (var key in source) {
22609
- if (Object.prototype.hasOwnProperty.call(source, key)) {
22610
- target[key] = source[key];
22611
- }
22612
- }
22613
- }
22614
-
22615
- return target;
22616
- };
22617
- return _extends$Q.apply(this, arguments);
22618
- }
22619
-
22620
- function SvgEmojiFlagicon(props) {
22621
- return /*#__PURE__*/React.createElement("svg", _extends$Q({
22622
- width: 24,
22623
- height: 24,
22624
- fill: "currentColor",
22625
- xmlns: "http://www.w3.org/2000/svg"
22626
- }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
22627
- d: "M6.63 3.23c2.13 1.12 3.18.99 5.4-.13l.03-.03c2.8-1.4 4.52-1.57 7.43.08a1 1 0 01.51.87v9.23a1 1 0 01-1.5.87c-2.69-1.52-4.13-1.43-6.62-.22-.33.158-.66.315-.99.47-1.4.62-2.6.81-3.89.43V20a1 1 0 11-2 0V4a1 1 0 011.63-.77zM7 12.66c1.05.5 1.87.42 3.08-.12.314-.137.624-.283.93-.44 2.56-1.24 4.46-1.53 6.99-.46V4.62c-1.9-.98-2.96-.81-5.03.24l-.04.02c-2.3 1.16-3.85 1.5-5.93.71v7.07z"
22689
+ }, props), _path$L || (_path$L = /*#__PURE__*/React.createElement("path", {
22690
+ fillRule: "evenodd",
22691
+ clipRule: "evenodd",
22692
+ d: "M4.167 3.25a.917.917 0 00-.917.917v7.764c.288-.118.6-.181.917-.181h5.416a.75.75 0 01.53.22l.614.613h5.56L14.329 8.67a.75.75 0 010-.671l1.957-3.915H10.75V7.5a.75.75 0 01-1.5 0V3.25H4.167zm6.56-.667l-.613-.613a.75.75 0 00-.53-.22H4.166A2.417 2.417 0 001.75 4.167V17.5a.75.75 0 001.5 0v-3.333a.917.917 0 01.917-.917h5.106l.613.614c.141.14.332.22.53.22H17.5a.75.75 0 00.67-1.086l-2.332-4.665 2.333-4.664a.75.75 0 00-.671-1.086h-6.773z",
22693
+ fill: "CurrentColor"
22628
22694
  })));
22629
22695
  }
22630
22696
 
@@ -22868,6 +22934,15 @@ var EMOJIS = [{
22868
22934
  key: 'other-object',
22869
22935
  array: ['🚬', '⚰️', '⚱️', '🗿']
22870
22936
  }]
22937
+ }, {
22938
+ key: 'Flags',
22939
+ array: [{
22940
+ key: 'country-flag',
22941
+ array: ['🇦🇨', '🇦🇩', '🇦🇪', '🇦🇫', '🇦🇬', '🇦🇮', '🇦🇱', '🇦🇲', '🇦🇴', '🇦🇶', '🇦🇷', '🇦🇸', '🇦🇹', '🇦🇺', '🇦🇼', '🇦🇽', '🇦🇿', '🇧🇦', '🇧🇧', '🇧🇩', '🇧🇪', '🇧🇫', '🇧🇬', '🇧🇭', '🇧🇮', '🇧🇯', '🇧🇱', '🇧🇲', '🇧🇳', '🇧🇴', '🇧🇶', '🇧🇷', '🇧🇸', '🇧🇹', '🇧🇻', '🇧🇼', '🇧🇾', '🇧🇿', '🇨🇦', '🇨🇨', '🇨🇩', '🇨🇫', '🇨🇬', '🇨🇭', '🇨🇮', '🇨🇰', '🇨🇱', '🇨🇲', '🇨🇳', '🇨🇴', '🇨🇵', '🇨🇷', '🇨🇺', '🇨🇻', '🇨🇼', '🇨🇽', '🇨🇾', '🇨🇿', '🇩🇪', '🇩🇬', '🇩🇯', '🇩🇰', '🇩🇲', '🇩🇴', '🇩🇿', '🇪🇦', '🇪🇨', '🇪🇪', '🇪🇬', '🇪🇭', '🇪🇷', '🇪🇸', '🇪🇹', '🇪🇺', '🇫🇮', '🇫🇯', '🇫🇰', '🇫🇲', '🇫🇴', '🇫🇷', '🇬🇦', '🇬🇧', '🇬🇩', '🇬🇪', '🇬🇫', '🇬🇬', '🇬🇭', '🇬🇮', '🇬🇱', '🇬🇲', '🇬🇳', '🇬🇵', '🇬🇶', '🇬🇷', '🇬🇸', '🇬🇹', '🇬🇺', '🇬🇼', '🇬🇾', '🇭🇰', '🇭🇲', '🇭🇳', '🇭🇷', '🇭🇹', '🇭🇺', '🇮🇨', '🇮🇩', '🇮🇪', '🇮🇱', '🇮🇲', '🇮🇳', '🇮🇴', '🇮🇶', '🇮🇷', '🇮🇸', '🇮🇹', '🇯🇪', '🇯🇲', '🇯🇴', '🇯🇵', '🇰🇪', '🇰🇬', '🇰🇭', '🇰🇮', '🇰🇲', '🇰🇳', '🇰🇵', '🇰🇷', '🇰🇼', '🇰🇾', '🇰🇿', '🇱🇦', '🇱🇧', '🇱🇨', '🇱🇮', '🇱🇰', '🇱🇷', '🇱🇸', '🇱🇹', '🇱🇺', '🇱🇻', '🇱🇾', '🇲🇦', '🇲🇨', '🇲🇩', '🇲🇪', '🇲🇫', '🇲🇬', '🇲🇭', '🇲🇰', '🇲🇱', '🇲🇲', '🇲🇳', '🇲🇴', '🇲🇵', '🇲🇶', '🇲🇷', '🇲🇸', '🇲🇹', '🇲🇺', '🇲🇻', '🇲🇼', '🇲🇽', '🇲🇾', '🇲🇿', '🇳🇦', '🇳🇨', '🇳🇪', '🇳🇫', '🇳🇬', '🇳🇮', '🇳🇱', '🇳🇴', '🇳🇵', '🇳🇷', '🇳🇺', '🇳🇿', '🇴🇲', '🇵🇦', '🇵🇪', '🇵🇫', '🇵🇬', '🇵🇭', '🇵🇰', '🇵🇱', '🇵🇲', '🇵🇳', '🇵🇷', '🇵🇸', '🇵🇹', '🇵🇼', '🇵🇾', '🇶🇦', '🇷🇪', '🇷🇴', '🇷🇸', '🇷🇺', '🇷🇼', '🇸🇦', '🇸🇧', '🇸🇨', '🇸🇩', '🇸🇪', '🇸🇬', '🇸🇭', '🇸🇮', '🇸🇯', '🇸🇰', '🇸🇱', '🇸🇲', '🇸🇳', '🇸🇴', '🇸🇷', '🇸🇸', '🇸🇹', '🇸🇻', '🇸🇽', '🇸🇾', '🇸🇿', '🇹🇦', '🇹🇨', '🇹🇩', '🇹🇫', '🇹🇬', '🇹🇭', '🇹🇯', '🇹🇰', '🇹🇱', '🇹🇲', '🇹🇳', '🇹🇴', '🇹🇷', '🇹🇹', '🇹🇻', '🇹🇼', '🇹🇿', '🇺🇦', '🇺🇬', '🇺🇲', '🇺🇳', '🇺🇸', '🇺🇾', '🇺🇿', '🇻🇦', '🇻🇨', '🇻🇪', '🇻🇬', '🇻🇮', '🇻🇳', '🇻🇺', '🇼🇫', '🇼🇸', '🇽🇰', '🇾🇪', '🇾🇹', '🇿🇦', '🇿🇲', '🇿🇼']
22942
+ }, {
22943
+ key: 'subdivision-flag',
22944
+ array: ['🏴󠁧󠁢󠁥󠁮󠁧󠁿', '🏴󠁧󠁢󠁳󠁣󠁴󠁿', '🏴󠁧󠁢󠁷󠁬󠁳󠁿']
22945
+ }]
22871
22946
  }, {
22872
22947
  key: 'Symbols',
22873
22948
  array: [{
@@ -22889,15 +22964,6 @@ var EMOJIS = [{
22889
22964
  key: 'other-symbol',
22890
22965
  array: ['♻️', '⚜️', '🔱', '📛', '🔰', '⭕', '✅', '☑️', '✔️', '✖️', '✖', '❌', '❎', '➕', '➖', '➗', '➰', '➿', '〽️', '✳️', '✴️', '❇️', '‼️', '⁉️', '❓', '❗']
22891
22966
  }]
22892
- }, {
22893
- key: 'Flags',
22894
- array: [{
22895
- key: 'country-flag',
22896
- array: ['🇦🇨', '🇦🇩', '🇦🇪', '🇦🇫', '🇦🇬', '🇦🇮', '🇦🇱', '🇦🇲', '🇦🇴', '🇦🇶', '🇦🇷', '🇦🇸', '🇦🇹', '🇦🇺', '🇦🇼', '🇦🇽', '🇦🇿', '🇧🇦', '🇧🇧', '🇧🇩', '🇧🇪', '🇧🇫', '🇧🇬', '🇧🇭', '🇧🇮', '🇧🇯', '🇧🇱', '🇧🇲', '🇧🇳', '🇧🇴', '🇧🇶', '🇧🇷', '🇧🇸', '🇧🇹', '🇧🇻', '🇧🇼', '🇧🇾', '🇧🇿', '🇨🇦', '🇨🇨', '🇨🇩', '🇨🇫', '🇨🇬', '🇨🇭', '🇨🇮', '🇨🇰', '🇨🇱', '🇨🇲', '🇨🇳', '🇨🇴', '🇨🇵', '🇨🇷', '🇨🇺', '🇨🇻', '🇨🇼', '🇨🇽', '🇨🇾', '🇨🇿', '🇩🇪', '🇩🇬', '🇩🇯', '🇩🇰', '🇩🇲', '🇩🇴', '🇩🇿', '🇪🇦', '🇪🇨', '🇪🇪', '🇪🇬', '🇪🇭', '🇪🇷', '🇪🇸', '🇪🇹', '🇪🇺', '🇫🇮', '🇫🇯', '🇫🇰', '🇫🇲', '🇫🇴', '🇫🇷', '🇬🇦', '🇬🇧', '🇬🇩', '🇬🇪', '🇬🇫', '🇬🇬', '🇬🇭', '🇬🇮', '🇬🇱', '🇬🇲', '🇬🇳', '🇬🇵', '🇬🇶', '🇬🇷', '🇬🇸', '🇬🇹', '🇬🇺', '🇬🇼', '🇬🇾', '🇭🇰', '🇭🇲', '🇭🇳', '🇭🇷', '🇭🇹', '🇭🇺', '🇮🇨', '🇮🇩', '🇮🇪', '🇮🇱', '🇮🇲', '🇮🇳', '🇮🇴', '🇮🇶', '🇮🇷', '🇮🇸', '🇮🇹', '🇯🇪', '🇯🇲', '🇯🇴', '🇯🇵', '🇰🇪', '🇰🇬', '🇰🇭', '🇰🇮', '🇰🇲', '🇰🇳', '🇰🇵', '🇰🇷', '🇰🇼', '🇰🇾', '🇰🇿', '🇱🇦', '🇱🇧', '🇱🇨', '🇱🇮', '🇱🇰', '🇱🇷', '🇱🇸', '🇱🇹', '🇱🇺', '🇱🇻', '🇱🇾', '🇲🇦', '🇲🇨', '🇲🇩', '🇲🇪', '🇲🇫', '🇲🇬', '🇲🇭', '🇲🇰', '🇲🇱', '🇲🇲', '🇲🇳', '🇲🇴', '🇲🇵', '🇲🇶', '🇲🇷', '🇲🇸', '🇲🇹', '🇲🇺', '🇲🇻', '🇲🇼', '🇲🇽', '🇲🇾', '🇲🇿', '🇳🇦', '🇳🇨', '🇳🇪', '🇳🇫', '🇳🇬', '🇳🇮', '🇳🇱', '🇳🇴', '🇳🇵', '🇳🇷', '🇳🇺', '🇳🇿', '🇴🇲', '🇵🇦', '🇵🇪', '🇵🇫', '🇵🇬', '🇵🇭', '🇵🇰', '🇵🇱', '🇵🇲', '🇵🇳', '🇵🇷', '🇵🇸', '🇵🇹', '🇵🇼', '🇵🇾', '🇶🇦', '🇷🇪', '🇷🇴', '🇷🇸', '🇷🇺', '🇷🇼', '🇸🇦', '🇸🇧', '🇸🇨', '🇸🇩', '🇸🇪', '🇸🇬', '🇸🇭', '🇸🇮', '🇸🇯', '🇸🇰', '🇸🇱', '🇸🇲', '🇸🇳', '🇸🇴', '🇸🇷', '🇸🇸', '🇸🇹', '🇸🇻', '🇸🇽', '🇸🇾', '🇸🇿', '🇹🇦', '🇹🇨', '🇹🇩', '🇹🇫', '🇹🇬', '🇹🇭', '🇹🇯', '🇹🇰', '🇹🇱', '🇹🇲', '🇹🇳', '🇹🇴', '🇹🇷', '🇹🇹', '🇹🇻', '🇹🇼', '🇹🇿', '🇺🇦', '🇺🇬', '🇺🇲', '🇺🇳', '🇺🇸', '🇺🇾', '🇺🇿', '🇻🇦', '🇻🇨', '🇻🇪', '🇻🇬', '🇻🇮', '🇻🇳', '🇻🇺', '🇼🇫', '🇼🇸', '🇽🇰', '🇾🇪', '🇾🇹', '🇿🇦', '🇿🇲', '🇿🇼']
22897
- }, {
22898
- key: 'subdivision-flag',
22899
- array: ['🏴󠁧󠁢󠁥󠁮󠁧󠁿', '🏴󠁧󠁢󠁳󠁣󠁴󠁿', '🏴󠁧󠁢󠁷󠁬󠁳󠁿']
22900
- }]
22901
22967
  }];
22902
22968
 
22903
22969
  var _templateObject$q, _templateObject2$n, _templateObject3$i, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$9, _templateObject8$8;
@@ -22921,12 +22987,12 @@ var EmojiIcon = function EmojiIcon(_ref) {
22921
22987
  case 'Objects':
22922
22988
  return React__default.createElement(SvgEmojiObjectIcon, null);
22923
22989
 
22924
- case 'Symbols':
22925
- return React__default.createElement(SvgEmojiSymbolsIcon, null);
22926
-
22927
22990
  case 'Flags':
22928
22991
  return React__default.createElement(SvgEmojiFlagicon, null);
22929
22992
 
22993
+ case 'Symbols':
22994
+ return React__default.createElement(SvgEmojiSymbolsIcon, null);
22995
+
22930
22996
  default:
22931
22997
  return null;
22932
22998
  }
@@ -22939,8 +23005,9 @@ function EmojisPopup(_ref2) {
22939
23005
  rightSide = _ref2.rightSide,
22940
23006
  bottomPosition = _ref2.bottomPosition,
22941
23007
  emojisContainerBorderRadius = _ref2.emojisContainerBorderRadius,
22942
- emojisCategoryIconsPosition = _ref2.emojisCategoryIconsPosition,
22943
- separateEmojiCategoriesWithTitle = _ref2.separateEmojiCategoriesWithTitle,
23008
+ _ref2$emojisCategoryI = _ref2.emojisCategoryIconsPosition,
23009
+ emojisCategoryIconsPosition = _ref2$emojisCategoryI === void 0 ? 'top' : _ref2$emojisCategoryI,
23010
+ fixEmojiCategoriesTitleOnTop = _ref2.fixEmojiCategoriesTitleOnTop,
22944
23011
  emojisPopupPosition = _ref2.emojisPopupPosition,
22945
23012
  relativePosition = _ref2.relativePosition;
22946
23013
 
@@ -22968,9 +23035,9 @@ function EmojisPopup(_ref2) {
22968
23035
  var scrollPos = emojiContainerRef.current.scrollTop;
22969
23036
 
22970
23037
  if (collectionHeights[6] < scrollPos) {
22971
- setActiveCollection('Flags');
22972
- } else if (collectionHeights[5] < scrollPos) {
22973
23038
  setActiveCollection('Symbols');
23039
+ } else if (collectionHeights[5] < scrollPos) {
23040
+ setActiveCollection('Flags');
22974
23041
  } else if (collectionHeights[4] < scrollPos) {
22975
23042
  setActiveCollection('Objects');
22976
23043
  } else if (collectionHeights[3] < scrollPos) {
@@ -23033,7 +23100,7 @@ function EmojisPopup(_ref2) {
23033
23100
  }, React__default.createElement(EmojiIcon, {
23034
23101
  collectionName: emoji.key
23035
23102
  }));
23036
- })), !separateEmojiCategoriesWithTitle && React__default.createElement(EmojiHeader, {
23103
+ })), fixEmojiCategoriesTitleOnTop && React__default.createElement(EmojiHeader, {
23037
23104
  padding: emojisCategoryIconsPosition !== 'top' ? '10px 18px 6px' : ''
23038
23105
  }, getEmojisCategoryTitle(activeCollection)), React__default.createElement(EmojiSection, {
23039
23106
  ref: emojiContainerRef,
@@ -23042,8 +23109,8 @@ function EmojisPopup(_ref2) {
23042
23109
  var mainCollectionKey = emojiBigCollection.key;
23043
23110
  return React__default.createElement(React__default.Fragment, {
23044
23111
  key: mainCollectionKey
23045
- }, separateEmojiCategoriesWithTitle && React__default.createElement(EmojiHeader, {
23046
- padding: '6px 8px'
23112
+ }, !fixEmojiCategoriesTitleOnTop && React__default.createElement(EmojiHeader, {
23113
+ padding: '6px 8px 0'
23047
23114
  }, getEmojisCategoryTitle(mainCollectionKey)), emojiBigCollection.array.map(function (emojiSmallCollection, bigIndex) {
23048
23115
  var label = emojiSmallCollection.key;
23049
23116
  var array = emojiSmallCollection.array;
@@ -23088,7 +23155,7 @@ var Container$c = styled__default.div(_templateObject$q || (_templateObject$q =
23088
23155
  }, function (props) {
23089
23156
  return props.bottomPosition;
23090
23157
  }, colors.gray1, function (props) {
23091
- return props.borderRadius || '6px';
23158
+ return props.borderRadius || '12px';
23092
23159
  }, colors.white, function (props) {
23093
23160
  return props.emojisPopupPosition === 'bottom' ? '0 0' : '0 100%';
23094
23161
  }, function (props) {
@@ -23097,12 +23164,12 @@ var Container$c = styled__default.div(_templateObject$q || (_templateObject$q =
23097
23164
  var EmojiHeader = styled__default.div(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n align-items: flex-end;\n font-style: normal;\n font-weight: 500;\n font-size: 12px;\n line-height: 22px;\n text-transform: uppercase;\n color: ", ";\n display: flex;\n padding: ", ";\n"])), colors.gray9, function (props) {
23098
23165
  return props.padding || '6px 18px';
23099
23166
  });
23100
- var EmojiSection = styled__default.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n height: 200px;\n overflow-x: hidden;\n"])));
23167
+ var EmojiSection = styled__default.div(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteralLoose(["\n height: 180px;\n overflow-x: hidden;\n"])));
23101
23168
  var EmojiCollection = styled__default.span(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n\n & > * {\n color: ", ";\n }\n"])), function (props) {
23102
23169
  return props.activeCollection ? colors.primary : colors.gray7;
23103
23170
  });
23104
23171
  var CollectionPointer = styled__default.span(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteralLoose([""])));
23105
- var AllEmojis = styled__default.ul(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n padding: 8px;\n margin: 0;\n"])));
23172
+ var AllEmojis = styled__default.ul(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n padding: 0 8px 8px;\n margin: 0;\n"])));
23106
23173
  var EmojiFooter = styled__default.div(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n height: 42px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n border-top: ", ";\n border-bottom: ", ";\n padding: 0 10px;\n & > span {\n width: 100%;\n text-align: center;\n }\n"])), function (props) {
23107
23174
  return props.emojisCategoryIconsPosition !== 'top' && "1px solid " + colors.gray1;
23108
23175
  }, function (props) {
@@ -23110,10 +23177,10 @@ var EmojiFooter = styled__default.div(_templateObject7$9 || (_templateObject7$9
23110
23177
  });
23111
23178
  var Emoji = styled__default.li(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n width: 32px;\n height: 32px;\n margin: 0 2px;\n display: inline-block;\n box-sizing: border-box;\n border-radius: 50%;\n padding-top: 2px;\n text-align: center;\n background: transparent;\n font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla,\n twemoji mozilla, segoe ui symbol;\n & > * {\n font-size: 22px;\n }\n &:hover {\n background: #f5f5f8;\n }\n"])));
23112
23179
 
23113
- var _path$O;
23180
+ var _path$M;
23114
23181
 
23115
- function _extends$R() {
23116
- _extends$R = Object.assign ? Object.assign.bind() : function (target) {
23182
+ function _extends$Q() {
23183
+ _extends$Q = Object.assign ? Object.assign.bind() : function (target) {
23117
23184
  for (var i = 1; i < arguments.length; i++) {
23118
23185
  var source = arguments[i];
23119
23186
 
@@ -23126,17 +23193,17 @@ function _extends$R() {
23126
23193
 
23127
23194
  return target;
23128
23195
  };
23129
- return _extends$R.apply(this, arguments);
23196
+ return _extends$Q.apply(this, arguments);
23130
23197
  }
23131
23198
 
23132
23199
  function SvgPlus(props) {
23133
- return /*#__PURE__*/React.createElement("svg", _extends$R({
23200
+ return /*#__PURE__*/React.createElement("svg", _extends$Q({
23134
23201
  width: 20,
23135
23202
  height: 20,
23136
23203
  viewBox: "0 0 20.01 20.01",
23137
23204
  fill: "none",
23138
23205
  xmlns: "http://www.w3.org/2000/svg"
23139
- }, props), _path$O || (_path$O = /*#__PURE__*/React.createElement("path", {
23206
+ }, props), _path$M || (_path$M = /*#__PURE__*/React.createElement("path", {
23140
23207
  d: "M10 3.778c.43 0 .778.348.778.778v4.666h4.666a.778.778 0 110 1.556h-4.666v4.666a.778.778 0 11-1.556 0v-4.666H4.556a.778.778 0 110-1.556h4.666V4.556c0-.43.348-.778.778-.778z",
23141
23208
  fill: "#818C99"
23142
23209
  })));
@@ -23275,7 +23342,7 @@ var EmojiItem = styled__default.span(_templateObject2$o || (_templateObject2$o =
23275
23342
  }, colors.gray5);
23276
23343
  var OpenMoreEmojis = styled__default.span(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n background-color: ", ";\n cursor: pointer;\n\n & > svg {\n color: ", ";\n height: 18px;\n width: 18px;\n }\n border-radius: 50%;\n"])), colors.gray5, colors.gray4);
23277
23344
 
23278
- var _templateObject$s, _templateObject2$p, _templateObject3$k, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$a, _templateObject8$9, _templateObject9$7, _templateObject10$6, _templateObject11$4, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1;
23345
+ var _templateObject$s, _templateObject2$p, _templateObject3$k, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$a, _templateObject8$9, _templateObject9$7, _templateObject10$6, _templateObject11$4, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23$1;
23279
23346
 
23280
23347
  var Message = function Message(_ref) {
23281
23348
  var message = _ref.message,
@@ -23345,7 +23412,8 @@ var Message = function Message(_ref) {
23345
23412
  staredIcon = _ref.staredIcon,
23346
23413
  reportIcon = _ref.reportIcon,
23347
23414
  reactionIconOrder = _ref.reactionIconOrder,
23348
- openFrequentlyUsedReactions = _ref.openFrequentlyUsedReactions,
23415
+ _ref$openFrequentlyUs = _ref.openFrequentlyUsedReactions,
23416
+ openFrequentlyUsedReactions = _ref$openFrequentlyUs === void 0 ? true : _ref$openFrequentlyUs,
23349
23417
  editIconOrder = _ref.editIconOrder,
23350
23418
  copyIconOrder = _ref.copyIconOrder,
23351
23419
  replyIconOrder = _ref.replyIconOrder,
@@ -23369,6 +23437,7 @@ var Message = function Message(_ref) {
23369
23437
  reactionsDisplayCount = _ref$reactionsDisplay === void 0 ? 5 : _ref$reactionsDisplay,
23370
23438
  _ref$showEachReaction = _ref.showEachReactionCount,
23371
23439
  showEachReactionCount = _ref$showEachReaction === void 0 ? true : _ref$showEachReaction,
23440
+ showTotalReactionCount = _ref.showTotalReactionCount,
23372
23441
  reactionItemBorder = _ref.reactionItemBorder,
23373
23442
  reactionItemBorderRadius = _ref.reactionItemBorderRadius,
23374
23443
  reactionItemBackground = _ref.reactionItemBackground,
@@ -23381,6 +23450,8 @@ var Message = function Message(_ref) {
23381
23450
  reactionsContainerBackground = _ref.reactionsContainerBackground,
23382
23451
  reactionsContainerPadding = _ref.reactionsContainerPadding,
23383
23452
  reactionsContainerTopPosition = _ref.reactionsContainerTopPosition,
23453
+ reactionsDetailsPopupBorderRadius = _ref.reactionsDetailsPopupBorderRadius,
23454
+ reactionsDetailsPopupHeaderItemsStyle = _ref.reactionsDetailsPopupHeaderItemsStyle,
23384
23455
  fileAttachmentsBoxWidth = _ref.fileAttachmentsBoxWidth,
23385
23456
  fileAttachmentsBoxBorder = _ref.fileAttachmentsBoxBorder,
23386
23457
  fileAttachmentsTitleColor = _ref.fileAttachmentsTitleColor,
@@ -23391,7 +23462,7 @@ var Message = function Message(_ref) {
23391
23462
  videoAttachmentMaxHeight = _ref.videoAttachmentMaxHeight,
23392
23463
  emojisCategoryIconsPosition = _ref.emojisCategoryIconsPosition,
23393
23464
  emojisContainerBorderRadius = _ref.emojisContainerBorderRadius,
23394
- separateEmojiCategoriesWithTitle = _ref.separateEmojiCategoriesWithTitle,
23465
+ fixEmojiCategoriesTitleOnTop = _ref.fixEmojiCategoriesTitleOnTop,
23395
23466
  sameUserMessageSpacing = _ref.sameUserMessageSpacing,
23396
23467
  differentUserMessageSpacing = _ref.differentUserMessageSpacing;
23397
23468
  var dispatch = reactRedux.useDispatch();
@@ -23592,7 +23663,7 @@ var Message = function Message(_ref) {
23592
23663
  if (message.selfReactions && message.selfReactions.some(function (item) {
23593
23664
  return item.key === selectedEmoji;
23594
23665
  })) {
23595
- dispatch(deleteReactionAC(channel.id, message.id, selectedEmoji, channel.userMessageReactions && channel.userMessageReactions[0] && channel.userMessageReactions[0].messageId === message.id && channel.userMessageReactions[0].key === selectedEmoji));
23666
+ dispatch(deleteReactionAC(channel.id, message.id, selectedEmoji, channel.newReactions && channel.newReactions[0] && channel.newReactions[0].messageId === message.id && channel.newReactions[0].key === selectedEmoji));
23596
23667
  } else {
23597
23668
  var score = 1;
23598
23669
  var reason = 'mmm';
@@ -23665,6 +23736,7 @@ var Message = function Message(_ref) {
23665
23736
  }, [tabIsActive]);
23666
23737
  React.useEffect(function () {
23667
23738
  if (emojisPopupOpen) {
23739
+ console.log('messageItemRef.current.getBoundingClientRect().bottom. . .. ', messageItemRef.current.getBoundingClientRect().bottom);
23668
23740
  var bottomPos = messageItemRef.current ? messageItemRef.current.getBoundingClientRect().bottom : 0;
23669
23741
  var offsetBottom = window.innerHeight - bottomPos;
23670
23742
  setEmojisPopupPosition(offsetBottom < 300 ? 'top' : 'bottom');
@@ -23886,7 +23958,7 @@ var Message = function Message(_ref) {
23886
23958
  emojisPopupPosition: emojisPopupPosition,
23887
23959
  emojisCategoryIconsPosition: emojisCategoryIconsPosition,
23888
23960
  emojisContainerBorderRadius: emojisContainerBorderRadius,
23889
- separateEmojiCategoriesWithTitle: separateEmojiCategoriesWithTitle,
23961
+ fixEmojiCategoriesTitleOnTop: fixEmojiCategoriesTitleOnTop,
23890
23962
  rtlDirection: ownMessageOnRightSide && !message.incoming,
23891
23963
  handleEmojiPopupToggle: setEmojisPopupOpen,
23892
23964
  handleAddEmoji: handleReactionAddDelete
@@ -23916,7 +23988,9 @@ var Message = function Message(_ref) {
23916
23988
  messageId: message.id,
23917
23989
  handleReactionsPopupClose: handleToggleReactionsPopup,
23918
23990
  rtlDirection: ownMessageOnRightSide && !message.incoming,
23919
- handleAddDeleteEmoji: handleReactionAddDelete
23991
+ handleAddDeleteEmoji: handleReactionAddDelete,
23992
+ reactionsDetailsPopupBorderRadius: reactionsDetailsPopupBorderRadius,
23993
+ reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle
23920
23994
  }), reactionsList && reactionsList.length && React__default.createElement(ReactionsContainer, {
23921
23995
  id: message.id + "_reactions_container",
23922
23996
  border: reactionsContainerBorder,
@@ -23942,8 +24016,8 @@ var Message = function Message(_ref) {
23942
24016
  margin: reactionItemMargin,
23943
24017
  isLastReaction: reactionsCount === 1,
23944
24018
  fontSize: reactionsFontSize
23945
- }, React__default.createElement(MessageReactionKey, null, key + " " + (showEachReactionCount ? message.reactionScores[key] : '')));
23946
- }), reactionsCount && reactionsCount > 1 && React__default.createElement(MessageReaction, {
24019
+ }, React__default.createElement(MessageReactionKey, null, key, showEachReactionCount && React__default.createElement(ReactionItemCount, null, message.reactionScores[key], " ")));
24020
+ }), showTotalReactionCount && reactionsCount && reactionsCount > 1 && React__default.createElement(MessageReaction, {
23947
24021
  border: reactionItemBorder,
23948
24022
  borderRadius: reactionItemBorderRadius,
23949
24023
  backgroundColor: reactionItemBackground,
@@ -23968,13 +24042,14 @@ var Message = function Message(_ref) {
23968
24042
  title: 'Forward message'
23969
24043
  }));
23970
24044
  };
23971
- var MessageReactionKey = styled__default.span(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla,\n twemoji mozilla, segoe ui symbol;\n"])));
23972
- var MessageReaction = styled__default.span(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n //min-width: 23px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin: ", ";\n margin-right: ", ";\n border: ", ";\n border-color: ", ";\n color: ", ";\n box-sizing: border-box;\n border-radius: ", ";\n font-size: ", ";\n line-height: ", ";\n padding: ", ";\n background-color: ", ";\n white-space: nowrap;\n"])), function (props) {
23973
- return props.margin || '0 6px 0 0';
24045
+ var MessageReactionKey = styled__default.span(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla,\n twemoji mozilla, segoe ui symbol;\n"])));
24046
+ var ReactionItemCount = styled__default.span(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteralLoose(["\n margin-left: 2px;\n font-family: Inter, sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 16px;\n color: ", ";\n"])), colors.textColor1);
24047
+ var MessageReaction = styled__default.span(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n //min-width: 23px;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n margin: ", ";\n margin-right: ", ";\n border: ", ";\n border-color: ", ";\n color: ", ";\n box-sizing: border-box;\n border-radius: ", ";\n font-size: ", ";\n line-height: ", ";\n padding: ", ";\n background-color: ", ";\n white-space: nowrap;\n\n &:last-child {\n margin-right: 0;\n }\n"])), function (props) {
24048
+ return props.margin || '0 8px 0 0';
23974
24049
  }, function (props) {
23975
24050
  return props.isLastReaction && '0';
23976
24051
  }, function (props) {
23977
- return props.border || "1px solid " + colors.gray3;
24052
+ return props.border;
23978
24053
  }, function (props) {
23979
24054
  return props.self && colors.primary;
23980
24055
  }, function (props) {
@@ -23982,45 +24057,45 @@ var MessageReaction = styled__default.span(_templateObject2$p || (_templateObjec
23982
24057
  }, function (props) {
23983
24058
  return props.borderRadius || '16px';
23984
24059
  }, function (props) {
23985
- return props.fontSize || '13px';
24060
+ return props.fontSize || '18px';
23986
24061
  }, function (props) {
23987
- return props.fontSize || '13px';
24062
+ return props.fontSize || '18px';
23988
24063
  }, function (props) {
23989
- return props.padding || '2px 6px';
24064
+ return props.padding || '0';
23990
24065
  }, function (props) {
23991
- return props.backgroundColor || colors.white;
24066
+ return props.backgroundColor;
23992
24067
  });
23993
- var ThreadMessageCountContainer = styled__default.div(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n position: relative;\n color: ", ";\n font-weight: 500;\n font-size: 13px;\n line-height: 15px;\n margin: 12px;\n cursor: pointer;\n\n &::before {\n content: '';\n position: absolute;\n left: -25px;\n top: -21px;\n width: 16px;\n height: 26px;\n border-left: 2px solid #cdcdcf;\n border-bottom: 2px solid #cdcdcf;\n border-radius: 0 0 0 14px;\n }\n"])), colors.primary);
23994
- var FailedMessageIcon = styled__default.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -6px;\n left: ", ";\n right: ", ";\n width: 20px;\n height: 20px;\n"])), function (props) {
24068
+ var ThreadMessageCountContainer = styled__default.div(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteralLoose(["\n position: relative;\n color: ", ";\n font-weight: 500;\n font-size: 13px;\n line-height: 15px;\n margin: 12px;\n cursor: pointer;\n\n &::before {\n content: '';\n position: absolute;\n left: -25px;\n top: -21px;\n width: 16px;\n height: 26px;\n border-left: 2px solid #cdcdcf;\n border-bottom: 2px solid #cdcdcf;\n border-radius: 0 0 0 14px;\n }\n"])), colors.primary);
24069
+ var FailedMessageIcon = styled__default.div(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -6px;\n left: ", ";\n right: ", ";\n width: 20px;\n height: 20px;\n"])), function (props) {
23995
24070
  return !props.rtl && '-24px';
23996
24071
  }, function (props) {
23997
24072
  return props.rtl && '-24px';
23998
24073
  });
23999
- var ErrorIconWrapper = styled__default(SvgErrorIcon)(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n"])));
24000
- var ReactionsContainer = styled__default.div(_templateObject6$c || (_templateObject6$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 border-radius: ", ";\n background-color: ", ";\n padding: ", ";\n z-index: 9;\n ", ";\n"])), function (props) {
24074
+ var ErrorIconWrapper = styled__default(SvgErrorIcon)(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n"])));
24075
+ var ReactionsContainer = styled__default.div(_templateObject7$a || (_templateObject7$a = _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"])), function (props) {
24001
24076
  return props.rtlDirection && 'auto';
24002
24077
  }, function (props) {
24003
24078
  return !props.rtlDirection && 'auto';
24004
24079
  }, function (props) {
24005
24080
  return props.border;
24006
24081
  }, function (props) {
24007
- return props.boxShadow;
24082
+ return props.boxShadow || '0px 4px 12px -2px rgba(17, 21, 57, 0.08)';
24008
24083
  }, function (props) {
24009
- return props.borderRadius;
24084
+ return props.borderRadius || '16px';
24010
24085
  }, function (props) {
24011
- return props.backgroundColor;
24086
+ return props.backgroundColor || colors.white;
24012
24087
  }, function (props) {
24013
- return props.padding;
24088
+ return props.padding || '4px 8px';
24014
24089
  }, function (props) {
24015
24090
  return props.topPosition && "\n position: relative;\n top: " + props.topPosition + ";\n ";
24016
24091
  });
24017
- var MessageReactionsCont = styled__default.div(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n max-width: 300px;\n //overflow-x: auto;\n direction: ", ";\n cursor: pointer;\n"])), function (props) {
24092
+ var MessageReactionsCont = styled__default.div(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: inline-flex;\n max-width: 300px;\n //overflow-x: auto;\n direction: ", ";\n cursor: pointer;\n"])), function (props) {
24018
24093
  return props.rtlDirection && 'ltr';
24019
24094
  });
24020
- var MessageHeaderCont = styled__default.div(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: ", ";\n"])), function (props) {
24095
+ var MessageHeaderCont = styled__default.div(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: ", ";\n"])), function (props) {
24021
24096
  return props.withPadding && (props.isForwarded ? '8px 0 2px 12px' : !props.isReplied && !props.messageBody ? '8px 0 8px 12px' : '8px 0 0 12px');
24022
24097
  });
24023
- var ReplyMessageContainer = styled__default.div(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n border-left: 2px solid ", ";\n padding: 0 6px;\n position: relative;\n //margin: ", ";\n margin: ", ";\n margin-top: ", ";\n cursor: pointer;\n"])), function (props) {
24098
+ var ReplyMessageContainer = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n border-left: 2px solid ", ";\n padding: 0 6px;\n position: relative;\n //margin: ", ";\n margin: ", ";\n margin-top: ", ";\n cursor: pointer;\n"])), function (props) {
24024
24099
  return props.leftBorderColor || '#b8b9c2';
24025
24100
  }, function (props) {
24026
24101
  return props.withAttachments ? '8px 8px' : '0 0 8px';
@@ -24029,10 +24104,10 @@ var ReplyMessageContainer = styled__default.div(_templateObject9$7 || (_template
24029
24104
  }, function (props) {
24030
24105
  return !props.withSenderName && props.withAttachments && '8px';
24031
24106
  });
24032
- var ReplyMessageBody = styled__default.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n margin-top: auto;\n margin-bottom: auto;\n direction: ", ";\n max-width: 100%;\n"])), function (props) {
24107
+ var ReplyMessageBody = styled__default.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n margin-top: auto;\n margin-bottom: auto;\n direction: ", ";\n max-width: 100%;\n"])), function (props) {
24033
24108
  return props.rtlDirection ? 'initial' : '';
24034
24109
  });
24035
- var ForwardedTitle = styled__default.h3(_templateObject11$4 || (_templateObject11$4 = _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 & > svg {\n margin-right: 4px;\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
24110
+ var ForwardedTitle = styled__default.h3(_templateObject12$2 || (_templateObject12$2 = _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 & > svg {\n margin-right: 4px;\n width: 16px;\n height: 16px;\n color: ", ";\n }\n"])), function (props) {
24036
24111
  return props.color || colors.primary;
24037
24112
  }, function (props) {
24038
24113
  return props.withAttachments && props.withBody ? '0' : '0 0 4px';
@@ -24045,14 +24120,14 @@ var ForwardedTitle = styled__default.h3(_templateObject11$4 || (_templateObject1
24045
24120
  }, function (props) {
24046
24121
  return props.color || colors.primary;
24047
24122
  });
24048
- var MessageStatus = styled__default.span(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n margin-left: 4px;\n text-align: right;\n transform: translate(0px, -1px);\n height: 14px;\n //visibility: ", ";\n"])), function (_ref2) {
24123
+ var MessageStatus = styled__default.span(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n margin-left: 4px;\n text-align: right;\n transform: translate(0px, -1px);\n height: 14px;\n //visibility: ", ";\n"])), function (_ref2) {
24049
24124
  var lastMessage = _ref2.lastMessage;
24050
24125
  return lastMessage ? 'visible' : 'hidden';
24051
24126
  });
24052
- var HiddenMessageTime = styled__default.span(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n display: ", ";\n font-weight: 400;\n font-size: 12px;\n color: ", ";\n"])), function (props) {
24127
+ var HiddenMessageTime = styled__default.span(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n display: ", ";\n font-weight: 400;\n font-size: 12px;\n color: ", ";\n"])), function (props) {
24053
24128
  return props.hide && 'none';
24054
24129
  }, colors.gray9);
24055
- var MessageStatusAndTime = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n display: ", ";\n align-items: flex-end;\n border-radius: 16px;\n padding: ", ";\n background-color: ", ";\n float: right;\n line-height: 14px;\n margin-right: ", ";\n margin-left: ", ";\n margin-bottom: ", ";\n direction: ", ";\n transform: translate(0px, 4px);\n white-space: nowrap;\n width: ", ";\n justify-content: ", ";\n & > svg {\n margin-left: 4px;\n transform: translate(0px, -1px);\n height: 14px;\n }\n\n & > ", " {\n color: ", ";\n }\n\n ", "\n"])), function (props) {
24130
+ var MessageStatusAndTime = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n display: ", ";\n align-items: flex-end;\n border-radius: 16px;\n padding: ", ";\n background-color: ", ";\n float: right;\n line-height: 14px;\n margin-right: ", ";\n margin-left: ", ";\n margin-bottom: ", ";\n direction: ", ";\n transform: translate(0px, 4px);\n white-space: nowrap;\n width: ", ";\n justify-content: ", ";\n & > svg {\n margin-left: 4px;\n transform: translate(0px, -1px);\n height: 14px;\n }\n\n & > ", " {\n color: ", ";\n }\n\n ", "\n"])), function (props) {
24056
24131
  return props.hide ? 'none' : 'flex';
24057
24132
  }, function (props) {
24058
24133
  return props.withAttachment && '4px 6px';
@@ -24075,11 +24150,11 @@ var MessageStatusAndTime = styled__default.div(_templateObject14$2 || (_template
24075
24150
  }, function (props) {
24076
24151
  return props.withAttachment && "\n position: absolute;\n z-index: 3;\n right: " + (props.fileAttachment ? '6px' : '10px') + ";\n bottom: " + (props.fileAttachment ? '9px' : '14px') + ";\n ";
24077
24152
  });
24078
- var MessageStatusUpdated = styled__default.span(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n margin-right: 4px;\n font-style: italic;\n font-weight: 400;\n font-size: 12px;\n color: ", ";\n"])), function (props) {
24153
+ var MessageStatusUpdated = styled__default.span(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n margin-right: 4px;\n font-style: italic;\n font-weight: 400;\n font-size: 12px;\n color: ", ";\n"])), function (props) {
24079
24154
  return props.color || colors.gray4;
24080
24155
  });
24081
- var MessageStatusDeleted = styled__default.span(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-style: italic;\n"])), colors.gray9);
24082
- var MessageBody = styled__default.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n position: relative;\n background-color: ", ";\n //display: inline-block;\n border-radius: ", ";\n direction: ", ";\n max-width: ", ";\n padding: ", ";\n //direction: ", ";\n overflow: ", ";\n transition: all 0.3s;\n transform-origin: right;\n"])), function (props) {
24156
+ var MessageStatusDeleted = styled__default.span(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-style: italic;\n"])), colors.gray9);
24157
+ var MessageBody = styled__default.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n position: relative;\n background-color: ", ";\n //display: inline-block;\n border-radius: ", ";\n direction: ", ";\n max-width: ", ";\n padding: ", ";\n //direction: ", ";\n overflow: ", ";\n transition: all 0.3s;\n transform-origin: right;\n"])), function (props) {
24083
24158
  return props.isSelfMessage ? props.ownMessageBackground : props.incomingMessageBackground;
24084
24159
  }, function (props) {
24085
24160
  return props.borderRadius || '4px 16px 16px 4px';
@@ -24094,7 +24169,7 @@ var MessageBody = styled__default.div(_templateObject17$2 || (_templateObject17$
24094
24169
  }, function (props) {
24095
24170
  return props.noBody && 'hidden';
24096
24171
  });
24097
- var MessageContent = styled__default.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-left: ", ";\n margin-right: ", ";\n //transform: ", ";\n max-width: ", ";\n\n display: flex;\n flex-direction: column;\n"])), function (props) {
24172
+ var MessageContent = styled__default.div(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-left: ", ";\n margin-right: ", ";\n //transform: ", ";\n max-width: ", ";\n\n display: flex;\n flex-direction: column;\n"])), function (props) {
24098
24173
  return props.withAvatar && '13px';
24099
24174
  }, function (props) {
24100
24175
  return props.withAvatar && '13px';
@@ -24103,10 +24178,10 @@ var MessageContent = styled__default.div(_templateObject18$1 || (_templateObject
24103
24178
  }, function (props) {
24104
24179
  return props.messageWidthPercent ? props.messageWidthPercent + "%" : '100%';
24105
24180
  });
24106
- var VoiceIconWrapper = styled__default(SvgVoiceIcon)(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n transform: translate(0px, 3.5px);\n color: ", ";\n"])), function (props) {
24181
+ var VoiceIconWrapper = styled__default(SvgVoiceIcon)(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n transform: translate(0px, 3.5px);\n color: ", ";\n"])), function (props) {
24107
24182
  return props.color || colors.primary;
24108
24183
  });
24109
- var MessageItem = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n margin-top: ", ";\n margin-bottom: ", ";\n padding: 0 4%;\n padding-left: ", ";\n padding-right: ", ";\n transition: all 0.2s;\n width: 100%;\n box-sizing: border-box;\n\n ", "\n /* &:last-child {\n margin-bottom: 0;\n }*/\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n display: inline-block;\n }\n &:hover ", " {\n display: flex;\n }\n\n &:hover ", " {\n visibility: visible;\n }\n"])), function (props) {
24184
+ var MessageItem = styled__default.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n margin-top: ", ";\n margin-bottom: ", ";\n padding: 0 4%;\n padding-left: ", ";\n padding-right: ", ";\n transition: all 0.2s;\n width: 100%;\n box-sizing: border-box;\n\n ", "\n /* &:last-child {\n margin-bottom: 0;\n }*/\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n display: inline-block;\n }\n &:hover ", " {\n display: flex;\n }\n\n &:hover ", " {\n visibility: visible;\n }\n"])), function (props) {
24110
24185
  return props.topMargin || '12px';
24111
24186
  }, function (props) {
24112
24187
  return props.bottomMargin;
@@ -24119,23 +24194,27 @@ var MessageItem = styled__default.div(_templateObject20$1 || (_templateObject20$
24119
24194
  }, function (props) {
24120
24195
  return props.hoverBackground || '';
24121
24196
  }, HiddenMessageTime, MessageStatusAndTime, MessageStatus);
24122
- var EmojiContainer = styled__default.div(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", ";\n right: ", ";\n top: ", ";\n z-index: 99;\n"])), function (props) {
24197
+ var EmojiContainer = styled__default.div(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", ";\n right: ", ";\n //top: ", ";\n top: ", ";\n bottom: ", ";\n z-index: 99;\n"])), function (props) {
24123
24198
  return props.rtlDirection ? '' : '0';
24124
24199
  }, function (props) {
24125
24200
  return props.rtlDirection && '0';
24126
24201
  }, function (props) {
24127
24202
  return props.position === 'top' ? '-250px' : 'calc(100% + 6px)';
24203
+ }, function (props) {
24204
+ return props.position === 'bottom' && 'calc(100% + 4px)';
24205
+ }, function (props) {
24206
+ return props.position === 'top' && 'calc(100% + 4px)';
24128
24207
  });
24129
- var FrequentlyEmojisContainer = styled__default.div(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", ";\n right: ", ";\n top: -50px;\n z-index: 99;\n"])), function (props) {
24208
+ var FrequentlyEmojisContainer = styled__default.div(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", ";\n right: ", ";\n top: -50px;\n z-index: 99;\n"])), function (props) {
24130
24209
  return props.rtlDirection ? '' : '0';
24131
24210
  }, function (props) {
24132
24211
  return props.rtlDirection && '0';
24133
24212
  });
24134
24213
 
24135
- var _path$P;
24214
+ var _path$N;
24136
24215
 
24137
- function _extends$S() {
24138
- _extends$S = Object.assign ? Object.assign.bind() : function (target) {
24216
+ function _extends$R() {
24217
+ _extends$R = Object.assign ? Object.assign.bind() : function (target) {
24139
24218
  for (var i = 1; i < arguments.length; i++) {
24140
24219
  var source = arguments[i];
24141
24220
 
@@ -24148,17 +24227,17 @@ function _extends$S() {
24148
24227
 
24149
24228
  return target;
24150
24229
  };
24151
- return _extends$S.apply(this, arguments);
24230
+ return _extends$R.apply(this, arguments);
24152
24231
  }
24153
24232
 
24154
24233
  function SvgSliderButtonRight(props) {
24155
- return /*#__PURE__*/React.createElement("svg", _extends$S({
24234
+ return /*#__PURE__*/React.createElement("svg", _extends$R({
24156
24235
  width: 28,
24157
24236
  height: 28,
24158
24237
  viewBox: "0 0 28.01 28.01",
24159
24238
  fill: "none",
24160
24239
  xmlns: "http://www.w3.org/2000/svg"
24161
- }, props), _path$P || (_path$P = /*#__PURE__*/React.createElement("path", {
24240
+ }, props), _path$N || (_path$N = /*#__PURE__*/React.createElement("path", {
24162
24241
  fillRule: "evenodd",
24163
24242
  clipRule: "evenodd",
24164
24243
  d: "M9.846 5.763a1.75 1.75 0 012.475 0l7 7a1.75 1.75 0 010 2.474l-7 7a1.75 1.75 0 11-2.475-2.474L15.61 14 9.846 8.237a1.75 1.75 0 010-2.474z",
@@ -24166,10 +24245,10 @@ function SvgSliderButtonRight(props) {
24166
24245
  })));
24167
24246
  }
24168
24247
 
24169
- var _path$Q;
24248
+ var _path$O;
24170
24249
 
24171
- function _extends$T() {
24172
- _extends$T = Object.assign ? Object.assign.bind() : function (target) {
24250
+ function _extends$S() {
24251
+ _extends$S = Object.assign ? Object.assign.bind() : function (target) {
24173
24252
  for (var i = 1; i < arguments.length; i++) {
24174
24253
  var source = arguments[i];
24175
24254
 
@@ -24182,17 +24261,17 @@ function _extends$T() {
24182
24261
 
24183
24262
  return target;
24184
24263
  };
24185
- return _extends$T.apply(this, arguments);
24264
+ return _extends$S.apply(this, arguments);
24186
24265
  }
24187
24266
 
24188
24267
  function SvgSliderButtonLeft(props) {
24189
- return /*#__PURE__*/React.createElement("svg", _extends$T({
24268
+ return /*#__PURE__*/React.createElement("svg", _extends$S({
24190
24269
  width: 28,
24191
24270
  height: 28,
24192
24271
  viewBox: "0 0 28.01 28.01",
24193
24272
  fill: "none",
24194
24273
  xmlns: "http://www.w3.org/2000/svg"
24195
- }, props), _path$Q || (_path$Q = /*#__PURE__*/React.createElement("path", {
24274
+ }, props), _path$O || (_path$O = /*#__PURE__*/React.createElement("path", {
24196
24275
  fillRule: "evenodd",
24197
24276
  clipRule: "evenodd",
24198
24277
  d: "M18.154 5.763a1.75 1.75 0 00-2.475 0l-7 7a1.75 1.75 0 000 2.474l7 7a1.75 1.75 0 102.475-2.474L12.392 14l5.762-5.763a1.75 1.75 0 000-2.474z",
@@ -24200,10 +24279,10 @@ function SvgSliderButtonLeft(props) {
24200
24279
  })));
24201
24280
  }
24202
24281
 
24203
- var _path$R;
24282
+ var _path$P;
24204
24283
 
24205
- function _extends$U() {
24206
- _extends$U = Object.assign ? Object.assign.bind() : function (target) {
24284
+ function _extends$T() {
24285
+ _extends$T = Object.assign ? Object.assign.bind() : function (target) {
24207
24286
  for (var i = 1; i < arguments.length; i++) {
24208
24287
  var source = arguments[i];
24209
24288
 
@@ -24216,26 +24295,26 @@ function _extends$U() {
24216
24295
 
24217
24296
  return target;
24218
24297
  };
24219
- return _extends$U.apply(this, arguments);
24298
+ return _extends$T.apply(this, arguments);
24220
24299
  }
24221
24300
 
24222
24301
  function SvgVideoPlayerPlay(props) {
24223
- return /*#__PURE__*/React.createElement("svg", _extends$U({
24302
+ return /*#__PURE__*/React.createElement("svg", _extends$T({
24224
24303
  width: 20,
24225
24304
  height: 20,
24226
24305
  viewBox: "0 0 20.01 20.01",
24227
24306
  fill: "none",
24228
24307
  xmlns: "http://www.w3.org/2000/svg"
24229
- }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
24308
+ }, props), _path$P || (_path$P = /*#__PURE__*/React.createElement("path", {
24230
24309
  d: "M16.28 8.913c.793.48.793 1.692 0 2.172l-8.265 4.997c-.787.475-1.765-.126-1.765-1.086V5.002c0-.96.979-1.561 1.765-1.086l8.265 4.997z",
24231
24310
  fill: "#fff"
24232
24311
  })));
24233
24312
  }
24234
24313
 
24235
- var _path$S;
24314
+ var _path$Q;
24236
24315
 
24237
- function _extends$V() {
24238
- _extends$V = Object.assign ? Object.assign.bind() : function (target) {
24316
+ function _extends$U() {
24317
+ _extends$U = Object.assign ? Object.assign.bind() : function (target) {
24239
24318
  for (var i = 1; i < arguments.length; i++) {
24240
24319
  var source = arguments[i];
24241
24320
 
@@ -24248,26 +24327,26 @@ function _extends$V() {
24248
24327
 
24249
24328
  return target;
24250
24329
  };
24251
- return _extends$V.apply(this, arguments);
24330
+ return _extends$U.apply(this, arguments);
24252
24331
  }
24253
24332
 
24254
24333
  function SvgVideoPlayerPause(props) {
24255
- return /*#__PURE__*/React.createElement("svg", _extends$V({
24334
+ return /*#__PURE__*/React.createElement("svg", _extends$U({
24256
24335
  width: 20,
24257
24336
  height: 20,
24258
24337
  viewBox: "0 0 20.01 20.01",
24259
24338
  fill: "none",
24260
24339
  xmlns: "http://www.w3.org/2000/svg"
24261
- }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
24340
+ }, props), _path$Q || (_path$Q = /*#__PURE__*/React.createElement("path", {
24262
24341
  d: "M7.468 3.75c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v9.936c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134H6.282c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V5.032c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134h1.186zm6.25 0c.446 0 .607.046.77.134.163.087.291.215.378.378.088.163.134.324.134.77v9.936c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.162.088-.324.134-.77.134h-1.186c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V5.032c0-.446.046-.607.134-.77a.908.908 0 01.378-.378c.162-.088.324-.134.77-.134h1.186z",
24263
24342
  fill: "#fff"
24264
24343
  })));
24265
24344
  }
24266
24345
 
24267
- var _path$T;
24346
+ var _path$R;
24268
24347
 
24269
- function _extends$W() {
24270
- _extends$W = Object.assign ? Object.assign.bind() : function (target) {
24348
+ function _extends$V() {
24349
+ _extends$V = Object.assign ? Object.assign.bind() : function (target) {
24271
24350
  for (var i = 1; i < arguments.length; i++) {
24272
24351
  var source = arguments[i];
24273
24352
 
@@ -24280,26 +24359,26 @@ function _extends$W() {
24280
24359
 
24281
24360
  return target;
24282
24361
  };
24283
- return _extends$W.apply(this, arguments);
24362
+ return _extends$V.apply(this, arguments);
24284
24363
  }
24285
24364
 
24286
24365
  function SvgVolume(props) {
24287
- return /*#__PURE__*/React.createElement("svg", _extends$W({
24366
+ return /*#__PURE__*/React.createElement("svg", _extends$V({
24288
24367
  width: 20,
24289
24368
  height: 20,
24290
24369
  viewBox: "0 0 20.01 20.01",
24291
24370
  fill: "none",
24292
24371
  xmlns: "http://www.w3.org/2000/svg"
24293
- }, props), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
24372
+ }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
24294
24373
  d: "M11.667 2.5c.46 0 .833.373.833.833v13.334c0 .46-.373.833-.833.833a2.062 2.062 0 01-1.433-.579L5.66 12.5H3.334c-.92 0-1.667-.746-1.667-1.667V9.167c0-.92.746-1.667 1.667-1.667h2.304l4.595-4.422c.385-.37.9-.578 1.434-.578zm4.487 2.786a.75.75 0 011.06 0 6.667 6.667 0 010 9.428.75.75 0 01-1.06-1.06 5.167 5.167 0 000-7.307.75.75 0 010-1.061zm-2.122 2.121a.75.75 0 011.061 0 3.667 3.667 0 010 5.186.75.75 0 01-1.06-1.06 2.167 2.167 0 000-3.065.75.75 0 010-1.06z",
24295
24374
  fill: "#fff"
24296
24375
  })));
24297
24376
  }
24298
24377
 
24299
- var _path$U;
24378
+ var _path$S;
24300
24379
 
24301
- function _extends$X() {
24302
- _extends$X = Object.assign ? Object.assign.bind() : function (target) {
24380
+ function _extends$W() {
24381
+ _extends$W = Object.assign ? Object.assign.bind() : function (target) {
24303
24382
  for (var i = 1; i < arguments.length; i++) {
24304
24383
  var source = arguments[i];
24305
24384
 
@@ -24312,26 +24391,26 @@ function _extends$X() {
24312
24391
 
24313
24392
  return target;
24314
24393
  };
24315
- return _extends$X.apply(this, arguments);
24394
+ return _extends$W.apply(this, arguments);
24316
24395
  }
24317
24396
 
24318
24397
  function SvgVolumeMute(props) {
24319
- return /*#__PURE__*/React.createElement("svg", _extends$X({
24398
+ return /*#__PURE__*/React.createElement("svg", _extends$W({
24320
24399
  width: 20,
24321
24400
  height: 20,
24322
24401
  viewBox: "0 0 20.01 20.01",
24323
24402
  fill: "none",
24324
24403
  xmlns: "http://www.w3.org/2000/svg"
24325
- }, props), _path$U || (_path$U = /*#__PURE__*/React.createElement("path", {
24404
+ }, props), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
24326
24405
  d: "M4.763 2.746l11.655 11.658a.833.833 0 01-1.1 1.248l-.078-.07-2.74-2.74v3.825c0 .427-.321.78-.736.827l-.097.006a2.062 2.062 0 01-1.433-.579L5.66 12.5H3.334c-.92 0-1.667-.746-1.667-1.667V9.167c0-.92.746-1.667 1.667-1.667h2.304l.775-.747-2.829-2.828a.833.833 0 011.179-1.179zm6.904-.246c.46 0 .833.373.833.833v4.8L8.812 4.445l1.421-1.367a2.068 2.068 0 011.274-.572l.16-.006z",
24327
24406
  fill: "#fff"
24328
24407
  })));
24329
24408
  }
24330
24409
 
24331
- var _path$V;
24410
+ var _path$T;
24332
24411
 
24333
- function _extends$Y() {
24334
- _extends$Y = Object.assign ? Object.assign.bind() : function (target) {
24412
+ function _extends$X() {
24413
+ _extends$X = Object.assign ? Object.assign.bind() : function (target) {
24335
24414
  for (var i = 1; i < arguments.length; i++) {
24336
24415
  var source = arguments[i];
24337
24416
 
@@ -24344,17 +24423,17 @@ function _extends$Y() {
24344
24423
 
24345
24424
  return target;
24346
24425
  };
24347
- return _extends$Y.apply(this, arguments);
24426
+ return _extends$X.apply(this, arguments);
24348
24427
  }
24349
24428
 
24350
24429
  function SvgFullscreen(props) {
24351
- return /*#__PURE__*/React.createElement("svg", _extends$Y({
24430
+ return /*#__PURE__*/React.createElement("svg", _extends$X({
24352
24431
  width: 20,
24353
24432
  height: 20,
24354
24433
  viewBox: "0 0 20.01 20.01",
24355
24434
  fill: "none",
24356
24435
  xmlns: "http://www.w3.org/2000/svg"
24357
- }, props), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
24436
+ }, props), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
24358
24437
  fillRule: "evenodd",
24359
24438
  clipRule: "evenodd",
24360
24439
  d: "M11.875 3.344c0-.466.378-.844.844-.844h3.937c.466 0 .844.378.844.844V7.28a.844.844 0 01-1.688 0v-1.9l-3.434 3.434a.844.844 0 01-1.193-1.193l3.434-3.434h-1.9a.844.844 0 01-.844-.844zM8.815 11.185c.33.33.33.863 0 1.193l-3.434 3.434H7.28a.844.844 0 010 1.688H3.344a.844.844 0 01-.844-.844V12.72a.844.844 0 111.688 0v1.9l3.434-3.434a.844.844 0 011.193 0z",
@@ -24362,10 +24441,10 @@ function SvgFullscreen(props) {
24362
24441
  })));
24363
24442
  }
24364
24443
 
24365
- var _path$W;
24444
+ var _path$U;
24366
24445
 
24367
- function _extends$Z() {
24368
- _extends$Z = Object.assign ? Object.assign.bind() : function (target) {
24446
+ function _extends$Y() {
24447
+ _extends$Y = Object.assign ? Object.assign.bind() : function (target) {
24369
24448
  for (var i = 1; i < arguments.length; i++) {
24370
24449
  var source = arguments[i];
24371
24450
 
@@ -24378,17 +24457,17 @@ function _extends$Z() {
24378
24457
 
24379
24458
  return target;
24380
24459
  };
24381
- return _extends$Z.apply(this, arguments);
24460
+ return _extends$Y.apply(this, arguments);
24382
24461
  }
24383
24462
 
24384
24463
  function SvgFullscreenExit(props) {
24385
- return /*#__PURE__*/React.createElement("svg", _extends$Z({
24464
+ return /*#__PURE__*/React.createElement("svg", _extends$Y({
24386
24465
  width: 20,
24387
24466
  height: 20,
24388
24467
  viewBox: "0 0 20.01 20.01",
24389
24468
  fill: "none",
24390
24469
  xmlns: "http://www.w3.org/2000/svg"
24391
- }, props), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
24470
+ }, props), _path$U || (_path$U = /*#__PURE__*/React.createElement("path", {
24392
24471
  fillRule: "evenodd",
24393
24472
  clipRule: "evenodd",
24394
24473
  d: "M3.438 11.781c0-.466.377-.844.843-.844H8.22c.466 0 .844.378.844.844v3.938a.844.844 0 01-1.688 0v-1.9L3.94 17.252a.844.844 0 11-1.193-1.193l3.435-3.435h-1.9a.844.844 0 01-.844-.844zM17.253 2.747c.33.33.33.864 0 1.193l-3.435 3.435h1.899a.844.844 0 110 1.688h-3.936a.844.844 0 01-.844-.844V4.28a.844.844 0 011.688 0v1.9l3.435-3.434a.844.844 0 011.193 0z",
@@ -24644,35 +24723,38 @@ var SliderPopup = function SliderPopup(_ref) {
24644
24723
  currentFile = _useState[0],
24645
24724
  setCurrentFile = _useState[1];
24646
24725
 
24647
- var _useState2 = React.useState([]),
24648
- attachmentsList = _useState2[0],
24649
- setAttachmentsList = _useState2[1];
24726
+ var _useState2 = React.useState({}),
24727
+ downloadingFilesMap = _useState2[0],
24728
+ setDownloadingFilesMap = _useState2[1];
24650
24729
 
24651
- var _useState3 = React.useState(true),
24652
- imageLoading = _useState3[0],
24653
- setImageLoading = _useState3[1];
24730
+ var _useState3 = React.useState([]),
24731
+ attachmentsList = _useState3[0],
24732
+ setAttachmentsList = _useState3[1];
24654
24733
 
24655
- var _useState4 = React.useState({}),
24656
- downloadedFiles = _useState4[0],
24657
- setDownloadedFiles = _useState4[1];
24734
+ var _useState4 = React.useState(true),
24735
+ imageLoading = _useState4[0],
24736
+ setImageLoading = _useState4[1];
24658
24737
 
24659
- var _useState5 = React.useState(),
24660
- playedVideo = _useState5[0],
24661
- setPlayedVideo = _useState5[1];
24738
+ var _useState5 = React.useState({}),
24739
+ downloadedFiles = _useState5[0],
24740
+ setDownloadedFiles = _useState5[1];
24662
24741
 
24663
- var _useState6 = React.useState(true),
24664
- nextButtonDisabled = _useState6[0],
24665
- setNextButtonDisabled = _useState6[1];
24742
+ var _useState6 = React.useState(),
24743
+ playedVideo = _useState6[0],
24744
+ setPlayedVideo = _useState6[1];
24666
24745
 
24667
24746
  var _useState7 = React.useState(true),
24668
- prevButtonDisabled = _useState7[0],
24669
- setPrevButtonDisabled = _useState7[1];
24747
+ nextButtonDisabled = _useState7[0],
24748
+ setNextButtonDisabled = _useState7[1];
24670
24749
 
24671
- var _useState8 = React.useState(false),
24672
- visibleSlide = _useState8[0],
24673
- setVisibleSlide = _useState8[1];
24750
+ var _useState8 = React.useState(true),
24751
+ prevButtonDisabled = _useState8[0],
24752
+ setPrevButtonDisabled = _useState8[1];
24753
+
24754
+ var _useState9 = React.useState(false),
24755
+ visibleSlide = _useState9[0],
24756
+ setVisibleSlide = _useState9[1];
24674
24757
 
24675
- var customUploader = getCustomUploader();
24676
24758
  var customDownloader = getCustomDownloader();
24677
24759
  var contactsMap = reactRedux.useSelector(contactsMapSelector);
24678
24760
  var attachments = reactRedux.useSelector(attachmentsForPopupSelector, reactRedux.shallowEqual) || [];
@@ -24703,6 +24785,29 @@ var SliderPopup = function SliderPopup(_ref) {
24703
24785
  };
24704
24786
  };
24705
24787
 
24788
+ var handleCompleteDownload = function handleCompleteDownload(attachmentId, failed) {
24789
+ if (failed) {
24790
+ console.log('file download failed!');
24791
+ }
24792
+
24793
+ var stateCopy = _extends({}, downloadingFilesMap);
24794
+
24795
+ delete stateCopy[attachmentId];
24796
+ setDownloadingFilesMap(stateCopy);
24797
+ };
24798
+
24799
+ var handleDownloadFile = function handleDownloadFile(attachment) {
24800
+ if (attachment.id) {
24801
+ setDownloadingFilesMap(function (prevState) {
24802
+ var _extends3;
24803
+
24804
+ return _extends({}, prevState, (_extends3 = {}, _extends3[attachment.id] = true, _extends3));
24805
+ });
24806
+ }
24807
+
24808
+ downloadFile(attachment, handleCompleteDownload);
24809
+ };
24810
+
24706
24811
  var handleClicks = function handleClicks(e) {
24707
24812
  if (!e.target.closest('.custom_carousel_item') && !e.target.closest('.custom_carousel_arrow')) {
24708
24813
  handleClosePopup();
@@ -24710,16 +24815,18 @@ var SliderPopup = function SliderPopup(_ref) {
24710
24815
  };
24711
24816
 
24712
24817
  useDidUpdate(function () {
24713
- if (customUploader && currentFile) {
24714
- if (playedVideo) {
24715
- var videoElem = document.getElementById(playedVideo);
24818
+ if (playedVideo) {
24819
+ var videoElem = document.getElementById(playedVideo);
24716
24820
 
24717
- if (videoElem) {
24718
- videoElem.pause();
24719
- }
24821
+ if (videoElem) {
24822
+ videoElem.pause();
24720
24823
  }
24824
+ }
24825
+
24826
+ getAttachmentUrlFromCache(currentFile.id).then(function (cachedUrl) {
24827
+ if (currentFile) {
24828
+ console.log('cachedUrl. . . . .', cachedUrl);
24721
24829
 
24722
- getAttachmentUrlFromCache(currentFile.id).then(function (cachedUrl) {
24723
24830
  if (cachedUrl) {
24724
24831
  if (!downloadedFiles[currentFile.id]) {
24725
24832
  setVisibleSlide(false);
@@ -24727,21 +24834,21 @@ var SliderPopup = function SliderPopup(_ref) {
24727
24834
  if (currentFile.type === 'image') {
24728
24835
  downloadImage(cachedUrl, true);
24729
24836
  } else {
24730
- var _extends3;
24837
+ var _extends4;
24731
24838
 
24732
24839
  clearTimeout(visibilityTimeout.current);
24733
- setDownloadedFiles(_extends({}, downloadedFiles, (_extends3 = {}, _extends3[currentFile.id] = cachedUrl, _extends3)));
24840
+ setDownloadedFiles(_extends({}, downloadedFiles, (_extends4 = {}, _extends4[currentFile.id] = cachedUrl, _extends4)));
24734
24841
  setPlayedVideo(currentFile.id);
24735
24842
  visibilityTimeout.current = setTimeout(function () {
24736
24843
  setVisibleSlide(true);
24737
24844
  }, 100);
24738
24845
  }
24739
- }
24740
-
24741
- if (currentFile.type === 'image') {
24742
- downloadImage(cachedUrl);
24743
24846
  } else {
24744
- setVisibleSlide(true);
24847
+ if (currentFile.type === 'image') {
24848
+ downloadImage(cachedUrl);
24849
+ } else {
24850
+ setVisibleSlide(true);
24851
+ }
24745
24852
  }
24746
24853
  } else {
24747
24854
  if (customDownloader) {
@@ -24753,10 +24860,10 @@ var SliderPopup = function SliderPopup(_ref) {
24753
24860
  if (currentFile.type === 'image') {
24754
24861
  downloadImage(url);
24755
24862
  } else {
24756
- var _extends4;
24863
+ var _extends5;
24757
24864
 
24758
24865
  clearTimeout(visibilityTimeout.current);
24759
- setDownloadedFiles(_extends({}, downloadedFiles, (_extends4 = {}, _extends4[currentFile.id] = url, _extends4)));
24866
+ setDownloadedFiles(_extends({}, downloadedFiles, (_extends5 = {}, _extends5[currentFile.id] = url, _extends5)));
24760
24867
  setPlayedVideo(currentFile.id);
24761
24868
  visibilityTimeout.current = setTimeout(function () {
24762
24869
  setVisibleSlide(true);
@@ -24768,22 +24875,32 @@ var SliderPopup = function SliderPopup(_ref) {
24768
24875
  }
24769
24876
  });
24770
24877
  } else {
24771
- if (currentFile.type === 'image') {
24772
- downloadImage(currentFile.url);
24773
- } else {
24774
- var _extends5;
24878
+ if (!downloadedFiles[currentFile.id]) {
24879
+ setVisibleSlide(false);
24775
24880
 
24776
- clearTimeout(visibilityTimeout.current);
24777
- setDownloadedFiles(_extends({}, downloadedFiles, (_extends5 = {}, _extends5[currentFile.id] = currentFile.url, _extends5)));
24778
- setPlayedVideo(currentFile.id);
24779
- visibilityTimeout.current = setTimeout(function () {
24881
+ if (currentFile.type === 'image') {
24882
+ downloadImage(currentFile.url, true);
24883
+ } else {
24884
+ var _extends6;
24885
+
24886
+ clearTimeout(visibilityTimeout.current);
24887
+ setDownloadedFiles(_extends({}, downloadedFiles, (_extends6 = {}, _extends6[currentFile.id] = currentFile.url, _extends6)));
24888
+ setPlayedVideo(currentFile.id);
24889
+ visibilityTimeout.current = setTimeout(function () {
24890
+ setVisibleSlide(true);
24891
+ }, 100);
24892
+ }
24893
+ } else {
24894
+ if (currentFile.type === 'image') {
24895
+ downloadImage(cachedUrl);
24896
+ } else {
24780
24897
  setVisibleSlide(true);
24781
- }, 100);
24898
+ }
24782
24899
  }
24783
24900
  }
24784
24901
  }
24785
- });
24786
- }
24902
+ }
24903
+ });
24787
24904
  }, [currentFile]);
24788
24905
  useDidUpdate(function () {
24789
24906
  var currentMedia = attachmentsList.find(function (att) {
@@ -24810,6 +24927,7 @@ var SliderPopup = function SliderPopup(_ref) {
24810
24927
  }
24811
24928
  }, [attachmentsList]);
24812
24929
  useDidUpdate(function () {
24930
+ console.log('attachments .... ', attachments);
24813
24931
  setAttachmentsList(attachments || []);
24814
24932
  }, [attachments]);
24815
24933
  React.useEffect(function () {
@@ -24819,9 +24937,9 @@ var SliderPopup = function SliderPopup(_ref) {
24819
24937
  if (currentMediaFile.type === 'image') {
24820
24938
  downloadImage(cachedUrl);
24821
24939
  } else {
24822
- var _extends6;
24940
+ var _extends7;
24823
24941
 
24824
- setDownloadedFiles(_extends({}, downloadedFiles, (_extends6 = {}, _extends6[currentMediaFile.id] = cachedUrl, _extends6)));
24942
+ setDownloadedFiles(_extends({}, downloadedFiles, (_extends7 = {}, _extends7[currentMediaFile.id] = cachedUrl, _extends7)));
24825
24943
  setPlayedVideo(currentMediaFile.id);
24826
24944
  }
24827
24945
  } else {
@@ -24834,9 +24952,9 @@ var SliderPopup = function SliderPopup(_ref) {
24834
24952
  if (currentMediaFile.type === 'image') {
24835
24953
  downloadImage(url);
24836
24954
  } else {
24837
- var _extends7;
24955
+ var _extends8;
24838
24956
 
24839
- setDownloadedFiles(_extends({}, downloadedFiles, (_extends7 = {}, _extends7[currentMediaFile.id] = url, _extends7)));
24957
+ setDownloadedFiles(_extends({}, downloadedFiles, (_extends8 = {}, _extends8[currentMediaFile.id] = url, _extends8)));
24840
24958
  setPlayedVideo(currentMediaFile.id);
24841
24959
  }
24842
24960
  });
@@ -24870,9 +24988,14 @@ var SliderPopup = function SliderPopup(_ref) {
24870
24988
  image: currentFile && currentFile.user && currentFile.user.avatarUrl
24871
24989
  }), React__default.createElement(Info, null, React__default.createElement(UserName, null, attachmentUserName), React__default.createElement(FileDateAndSize, null, moment(currentFile && currentFile.createdAt).format('DD.MM.YYYY HH:mm'), ' ', React__default.createElement(FileSize, null, currentFile && currentFile.fileSize && currentFile.fileSize > 0 ? bytesToSize(currentFile.fileSize, 1) : '')))), React__default.createElement(ActionDownload, {
24872
24990
  onClick: function onClick() {
24873
- return downloadFile(currentFile);
24874
- }
24875
- }, React__default.createElement(SvgDownload, null)), React__default.createElement(Actions, null, React__default.createElement(ActionItem, {
24991
+ return handleDownloadFile(currentFile);
24992
+ }
24993
+ }, downloadingFilesMap[currentFile.id] ? React__default.createElement(UploadingIcon, {
24994
+ width: '24px',
24995
+ height: '24px',
24996
+ borderWidth: '3px',
24997
+ color: colors.gray10
24998
+ }) : React__default.createElement(SvgDownload, null)), React__default.createElement(Actions, null, React__default.createElement(ActionItem, {
24876
24999
  onClick: handleClosePopup
24877
25000
  }, React__default.createElement(SvgClose, null)))), React__default.createElement(SliderBody, {
24878
25001
  onClick: handleClicks
@@ -24963,10 +25086,10 @@ var ArrowButton = styled__default.button(_templateObject14$3 || (_templateObject
24963
25086
  return props.leftButton && '4px';
24964
25087
  });
24965
25088
 
24966
- var _path$X;
25089
+ var _path$V;
24967
25090
 
24968
- function _extends$_() {
24969
- _extends$_ = Object.assign ? Object.assign.bind() : function (target) {
25091
+ function _extends$Z() {
25092
+ _extends$Z = Object.assign ? Object.assign.bind() : function (target) {
24970
25093
  for (var i = 1; i < arguments.length; i++) {
24971
25094
  var source = arguments[i];
24972
25095
 
@@ -24979,17 +25102,17 @@ function _extends$_() {
24979
25102
 
24980
25103
  return target;
24981
25104
  };
24982
- return _extends$_.apply(this, arguments);
25105
+ return _extends$Z.apply(this, arguments);
24983
25106
  }
24984
25107
 
24985
25108
  function SvgChoseMedia(props) {
24986
- return /*#__PURE__*/React.createElement("svg", _extends$_({
25109
+ return /*#__PURE__*/React.createElement("svg", _extends$Z({
24987
25110
  width: 18,
24988
25111
  height: 18,
24989
25112
  viewBox: "0 0 19 19",
24990
25113
  fill: "none",
24991
25114
  xmlns: "http://www.w3.org/2000/svg"
24992
- }, props), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
25115
+ }, props), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
24993
25116
  fillRule: "evenodd",
24994
25117
  clipRule: "evenodd",
24995
25118
  d: "M3.614 2.052C4.366 1.65 5.107 1.5 6.798 1.5h4.404c1.691 0 2.432.15 3.184.552.672.36 1.203.89 1.562 1.562.402.752.552 1.493.552 3.184v4.404c0 1.691-.15 2.432-.552 3.184a3.763 3.763 0 01-1.562 1.562c-.752.402-1.493.552-3.184.552H6.798c-1.691 0-2.432-.15-3.184-.552a3.764 3.764 0 01-1.562-1.562c-.402-.752-.552-1.493-.552-3.184V6.798c0-1.691.15-2.432.552-3.184.36-.672.89-1.203 1.562-1.562zm7.16 7.07a.297.297 0 01.482.004l3.04 4.193c.101.139.074.335-.06.44a.297.297 0 01-.183.062h-9.57a.309.309 0 01-.304-.314c0-.07.022-.137.064-.192l2.22-2.954a.297.297 0 01.473-.008l1.528 1.861 2.31-3.092zM5.785 6.857a1.071 1.071 0 100-2.143 1.071 1.071 0 000 2.143z",
@@ -25098,11 +25221,12 @@ var MessageList = function MessageList(_ref2) {
25098
25221
  reportIcon = _ref2.reportIcon,
25099
25222
  reactionIconOrder = _ref2.reactionIconOrder,
25100
25223
  openFrequentlyUsedReactions = _ref2.openFrequentlyUsedReactions,
25101
- separateEmojiCategoriesWithTitle = _ref2.separateEmojiCategoriesWithTitle,
25224
+ fixEmojiCategoriesTitleOnTop = _ref2.fixEmojiCategoriesTitleOnTop,
25102
25225
  emojisCategoryIconsPosition = _ref2.emojisCategoryIconsPosition,
25103
25226
  emojisContainerBorderRadius = _ref2.emojisContainerBorderRadius,
25104
25227
  reactionsDisplayCount = _ref2.reactionsDisplayCount,
25105
25228
  showEachReactionCount = _ref2.showEachReactionCount,
25229
+ showTotalReactionCount = _ref2.showTotalReactionCount,
25106
25230
  reactionItemBorder = _ref2.reactionItemBorder,
25107
25231
  reactionItemBorderRadius = _ref2.reactionItemBorderRadius,
25108
25232
  reactionItemBackground = _ref2.reactionItemBackground,
@@ -25115,6 +25239,9 @@ var MessageList = function MessageList(_ref2) {
25115
25239
  reactionsContainerBackground = _ref2.reactionsContainerBackground,
25116
25240
  reactionsContainerPadding = _ref2.reactionsContainerPadding,
25117
25241
  reactionsContainerTopPosition = _ref2.reactionsContainerTopPosition,
25242
+ reactionsDetailsPopupBorderRadius = _ref2.reactionsDetailsPopupBorderRadius,
25243
+ _ref2$reactionsDetail = _ref2.reactionsDetailsPopupHeaderItemsStyle,
25244
+ reactionsDetailsPopupHeaderItemsStyle = _ref2$reactionsDetail === void 0 ? 'bubbles' : _ref2$reactionsDetail,
25118
25245
  editIconOrder = _ref2.editIconOrder,
25119
25246
  copyIconOrder = _ref2.copyIconOrder,
25120
25247
  replyIconOrder = _ref2.replyIconOrder,
@@ -25506,8 +25633,8 @@ var MessageList = function MessageList(_ref2) {
25506
25633
  dispatch(getMessagesAC(channel));
25507
25634
 
25508
25635
  if (channel.id) {
25509
- if (channel.unreadMessageCount && channel.unreadMessageCount > 0) {
25510
- setUnreadMessageId(channel.lastReadMessageId);
25636
+ if (channel.newMessageCount && channel.newMessageCount > 0) {
25637
+ setUnreadMessageId(channel.lastDisplayedMsgId);
25511
25638
  } else {
25512
25639
  setUnreadMessageId('');
25513
25640
  }
@@ -25591,12 +25718,12 @@ var MessageList = function MessageList(_ref2) {
25591
25718
  }
25592
25719
  }, [connectionStatus]);
25593
25720
  React.useEffect(function () {
25594
- if (channel.unreadMessageCount && channel.unreadMessageCount > 0 && getUnreadScrollTo()) {
25721
+ if (channel.newMessageCount && channel.newMessageCount > 0 && getUnreadScrollTo()) {
25595
25722
  if (scrollRef.current) {
25596
25723
  scrollRef.current.style.scrollBehavior = 'inherit';
25597
25724
  }
25598
25725
 
25599
- var lastReadMessageNode = document.getElementById(channel.lastReadMessageId);
25726
+ var lastReadMessageNode = document.getElementById(channel.lastDisplayedMsgId);
25600
25727
 
25601
25728
  if (lastReadMessageNode) {
25602
25729
  scrollRef.current.scrollTop = lastReadMessageNode.offsetTop;
@@ -25745,7 +25872,7 @@ var MessageList = function MessageList(_ref2) {
25745
25872
  openFrequentlyUsedReactions: openFrequentlyUsedReactions,
25746
25873
  emojisCategoryIconsPosition: emojisCategoryIconsPosition,
25747
25874
  emojisContainerBorderRadius: emojisContainerBorderRadius,
25748
- separateEmojiCategoriesWithTitle: separateEmojiCategoriesWithTitle,
25875
+ fixEmojiCategoriesTitleOnTop: fixEmojiCategoriesTitleOnTop,
25749
25876
  editIconOrder: editIconOrder,
25750
25877
  copyIconOrder: copyIconOrder,
25751
25878
  replyIconOrder: replyIconOrder,
@@ -25777,6 +25904,7 @@ var MessageList = function MessageList(_ref2) {
25777
25904
  videoAttachmentMaxHeight: videoAttachmentMaxHeight,
25778
25905
  reactionsDisplayCount: reactionsDisplayCount,
25779
25906
  showEachReactionCount: showEachReactionCount,
25907
+ showTotalReactionCount: showTotalReactionCount,
25780
25908
  reactionItemBorder: reactionItemBorder,
25781
25909
  reactionItemBorderRadius: reactionItemBorderRadius,
25782
25910
  reactionItemBackground: reactionItemBackground,
@@ -25789,6 +25917,8 @@ var MessageList = function MessageList(_ref2) {
25789
25917
  reactionsContainerPadding: reactionsContainerPadding,
25790
25918
  reactionsContainerBackground: reactionsContainerBackground,
25791
25919
  reactionsContainerTopPosition: reactionsContainerTopPosition,
25920
+ reactionsDetailsPopupBorderRadius: reactionsDetailsPopupBorderRadius,
25921
+ reactionsDetailsPopupHeaderItemsStyle: reactionsDetailsPopupHeaderItemsStyle,
25792
25922
  sameUserMessageSpacing: sameUserMessageSpacing,
25793
25923
  differentUserMessageSpacing: differentUserMessageSpacing
25794
25924
  })), isUnreadMessage ? React__default.createElement(MessageDivider, {
@@ -25850,10 +25980,10 @@ var DropAttachmentArea = styled__default.div(_templateObject7$d || (_templateObj
25850
25980
  var MessageWrapper = styled__default.div(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n &.highlight {\n & .messageBody {\n transform: scale(1.1);\n background-color: #d5d5d5;\n }\n }\n"])));
25851
25981
  var NoMessagesContainer = styled__default.div(_templateObject9$a || (_templateObject9$a = _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"])), colors.gray6);
25852
25982
 
25853
- var _circle$5, _path$Y;
25983
+ var _circle$5, _path$W;
25854
25984
 
25855
- function _extends$$() {
25856
- _extends$$ = Object.assign ? Object.assign.bind() : function (target) {
25985
+ function _extends$_() {
25986
+ _extends$_ = Object.assign ? Object.assign.bind() : function (target) {
25857
25987
  for (var i = 1; i < arguments.length; i++) {
25858
25988
  var source = arguments[i];
25859
25989
 
@@ -25866,11 +25996,11 @@ function _extends$$() {
25866
25996
 
25867
25997
  return target;
25868
25998
  };
25869
- return _extends$$.apply(this, arguments);
25999
+ return _extends$_.apply(this, arguments);
25870
26000
  }
25871
26001
 
25872
26002
  function SvgSend(props) {
25873
- return /*#__PURE__*/React.createElement("svg", _extends$$({
26003
+ return /*#__PURE__*/React.createElement("svg", _extends$_({
25874
26004
  width: 32,
25875
26005
  height: 32,
25876
26006
  fill: "none",
@@ -25880,16 +26010,16 @@ function SvgSend(props) {
25880
26010
  cy: 16,
25881
26011
  r: 16,
25882
26012
  fill: "currentColor"
25883
- })), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
26013
+ })), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
25884
26014
  d: "M10.953 18.945c-.545 1.46-.888 2.485-1.028 3.076-.439 1.856-.758 2.274.879 1.392 1.637-.882 9.56-5.251 11.329-6.222 2.304-1.266 2.335-1.167-.124-2.511-1.873-1.024-9.704-5.279-11.205-6.115-1.501-.835-1.318-.464-.879 1.392.142.6.49 1.634 1.043 3.105a3.143 3.143 0 002.35 1.98l4.595.88a.079.079 0 010 .155l-4.606.88a3.143 3.143 0 00-2.354 1.988z",
25885
26015
  fill: "#fff"
25886
26016
  })));
25887
26017
  }
25888
26018
 
25889
- var _path$Z;
26019
+ var _path$X;
25890
26020
 
25891
- function _extends$10() {
25892
- _extends$10 = Object.assign ? Object.assign.bind() : function (target) {
26021
+ function _extends$$() {
26022
+ _extends$$ = Object.assign ? Object.assign.bind() : function (target) {
25893
26023
  for (var i = 1; i < arguments.length; i++) {
25894
26024
  var source = arguments[i];
25895
26025
 
@@ -25902,57 +26032,25 @@ function _extends$10() {
25902
26032
 
25903
26033
  return target;
25904
26034
  };
25905
- return _extends$10.apply(this, arguments);
26035
+ return _extends$$.apply(this, arguments);
25906
26036
  }
25907
26037
 
25908
26038
  function SvgEye(props) {
25909
- return /*#__PURE__*/React.createElement("svg", _extends$10({
25910
- width: 25,
25911
- height: 24,
25912
- fill: "none",
25913
- xmlns: "http://www.w3.org/2000/svg"
25914
- }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
25915
- d: "M12.5 5c6 0 10 5.6 10 7 0 1.4-4 7-10 7s-10-5.6-10-7c0-1.4 4-7 10-7zm0 2a5 5 0 100 10 5 5 0 000-10zm.001 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5z",
25916
- fill: "CurrentColor"
25917
- })));
25918
- }
25919
-
25920
- var _path$_;
25921
-
25922
- function _extends$11() {
25923
- _extends$11 = Object.assign ? Object.assign.bind() : function (target) {
25924
- for (var i = 1; i < arguments.length; i++) {
25925
- var source = arguments[i];
25926
-
25927
- for (var key in source) {
25928
- if (Object.prototype.hasOwnProperty.call(source, key)) {
25929
- target[key] = source[key];
25930
- }
25931
- }
25932
- }
25933
-
25934
- return target;
25935
- };
25936
- return _extends$11.apply(this, arguments);
25937
- }
25938
-
25939
- function SvgEdit(props) {
25940
- return /*#__PURE__*/React.createElement("svg", _extends$11({
25941
- width: 24,
26039
+ return /*#__PURE__*/React.createElement("svg", _extends$$({
26040
+ width: 25,
25942
26041
  height: 24,
25943
- viewBox: "0 0 25 25",
25944
26042
  fill: "none",
25945
26043
  xmlns: "http://www.w3.org/2000/svg"
25946
- }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
25947
- d: "M13.92 6.768l3.312 3.312-7.934 7.925a6.229 6.229 0 01-2.586 1.554l-2.71.827a.312.312 0 01-.388-.389l.827-2.71a6.231 6.231 0 011.553-2.586l7.926-7.933zm4.746-2.758l1.324 1.324a1.4 1.4 0 01.096 1.874l-.096.106-1.414 1.41-3.3-3.3 1.41-1.414a1.4 1.4 0 011.98 0z",
26044
+ }, props), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
26045
+ d: "M12.5 5c6 0 10 5.6 10 7 0 1.4-4 7-10 7s-10-5.6-10-7c0-1.4 4-7 10-7zm0 2a5 5 0 100 10 5 5 0 000-10zm.001 2.5a2.5 2.5 0 110 5 2.5 2.5 0 010-5z",
25948
26046
  fill: "CurrentColor"
25949
26047
  })));
25950
26048
  }
25951
26049
 
25952
- var _path$$;
26050
+ var _path$Y;
25953
26051
 
25954
- function _extends$12() {
25955
- _extends$12 = Object.assign ? Object.assign.bind() : function (target) {
26052
+ function _extends$10() {
26053
+ _extends$10 = Object.assign ? Object.assign.bind() : function (target) {
25956
26054
  for (var i = 1; i < arguments.length; i++) {
25957
26055
  var source = arguments[i];
25958
26056
 
@@ -25965,25 +26063,25 @@ function _extends$12() {
25965
26063
 
25966
26064
  return target;
25967
26065
  };
25968
- return _extends$12.apply(this, arguments);
26066
+ return _extends$10.apply(this, arguments);
25969
26067
  }
25970
26068
 
25971
26069
  function SvgAddAttachment(props) {
25972
- return /*#__PURE__*/React.createElement("svg", _extends$12({
26070
+ return /*#__PURE__*/React.createElement("svg", _extends$10({
25973
26071
  width: 24,
25974
26072
  height: 24,
25975
26073
  fill: "none",
25976
26074
  xmlns: "http://www.w3.org/2000/svg"
25977
- }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
26075
+ }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
25978
26076
  d: "M12 1.714c5.68 0 10.286 4.605 10.286 10.286 0 5.68-4.605 10.286-10.286 10.286C6.32 22.286 1.714 17.68 1.714 12 1.714 6.32 6.32 1.714 12 1.714zm0 1.715a8.571 8.571 0 100 17.143 8.571 8.571 0 000-17.143zm0 3.428c.473 0 .857.384.857.857v3.429h3.429a.857.857 0 010 1.714h-3.429v3.429a.857.857 0 11-1.714 0v-3.429H7.714a.857.857 0 110-1.714h3.429V7.714c0-.473.384-.857.857-.857z",
25979
26077
  fill: "CurrentColor"
25980
26078
  })));
25981
26079
  }
25982
26080
 
25983
- var _path$10;
26081
+ var _path$Z;
25984
26082
 
25985
- function _extends$13() {
25986
- _extends$13 = Object.assign ? Object.assign.bind() : function (target) {
26083
+ function _extends$11() {
26084
+ _extends$11 = Object.assign ? Object.assign.bind() : function (target) {
25987
26085
  for (var i = 1; i < arguments.length; i++) {
25988
26086
  var source = arguments[i];
25989
26087
 
@@ -25996,16 +26094,16 @@ function _extends$13() {
25996
26094
 
25997
26095
  return target;
25998
26096
  };
25999
- return _extends$13.apply(this, arguments);
26097
+ return _extends$11.apply(this, arguments);
26000
26098
  }
26001
26099
 
26002
26100
  function SvgErrorCircle(props) {
26003
- return /*#__PURE__*/React.createElement("svg", _extends$13({
26101
+ return /*#__PURE__*/React.createElement("svg", _extends$11({
26004
26102
  width: 25,
26005
26103
  height: 24,
26006
26104
  fill: "none",
26007
26105
  xmlns: "http://www.w3.org/2000/svg"
26008
- }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
26106
+ }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
26009
26107
  d: "M12.5 1.714c5.68 0 10.286 4.605 10.286 10.286 0 5.68-4.605 10.285-10.286 10.285C6.82 22.285 2.214 17.68 2.214 12 2.214 6.319 6.82 1.714 12.5 1.714zm0 1.714a8.571 8.571 0 100 17.143 8.571 8.571 0 000-17.143zm0 11.657a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4zm.063-8.228c.204 0 .332.032.443.091.112.06.2.148.26.26.06.111.091.24.091.443v5.269c0 .204-.032.331-.091.443a.623.623 0 01-.26.26c-.111.059-.24.09-.443.09h-.126c-.204 0-.332-.031-.443-.09a.624.624 0 01-.26-.26c-.06-.112-.091-.24-.091-.443V7.65c0-.203.032-.33.091-.442.06-.112.148-.2.26-.26.111-.06.24-.091.443-.091h.126z",
26010
26108
  fill: "#FFB73D"
26011
26109
  })));
@@ -26175,7 +26273,7 @@ var MemberItem = styled__default.li(_templateObject6$g || (_templateObject6$g =
26175
26273
  return props.isActiveItem && colors.gray0;
26176
26274
  }, EditMemberIcon, UserStatus);
26177
26275
 
26178
- var _templateObject$x, _templateObject2$u, _templateObject3$p, _templateObject4$k, _templateObject5$i, _templateObject6$h, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject10$9, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$2, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1;
26276
+ var _templateObject$x, _templateObject2$u, _templateObject3$p, _templateObject4$k, _templateObject5$i, _templateObject6$h, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject10$9, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$4, _templateObject15$3, _templateObject16$3, _templateObject17$3, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$2, _templateObject23$2, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1;
26179
26277
  var prevActiveChannelId;
26180
26278
 
26181
26279
  var SendMessageInput = function SendMessageInput(_ref) {
@@ -26206,12 +26304,12 @@ var SendMessageInput = function SendMessageInput(_ref) {
26206
26304
  inputPaddings = _ref.inputPaddings,
26207
26305
  selectedAttachmentsBorderRadius = _ref.selectedAttachmentsBorderRadius,
26208
26306
  selectedFileAttachmentsIcon = _ref.selectedFileAttachmentsIcon,
26209
- selectedFileAttachmentsBoxWidth = _ref.selectedFileAttachmentsBoxWidth,
26210
26307
  selectedFileAttachmentsBoxBackground = _ref.selectedFileAttachmentsBoxBackground,
26211
26308
  selectedFileAttachmentsBoxBorder = _ref.selectedFileAttachmentsBoxBorder,
26212
26309
  selectedFileAttachmentsTitleColor = _ref.selectedFileAttachmentsTitleColor,
26213
26310
  selectedFileAttachmentsSizeColor = _ref.selectedFileAttachmentsSizeColor,
26214
26311
  replyMessageIcon = _ref.replyMessageIcon,
26312
+ editMessageIcon = _ref.editMessageIcon,
26215
26313
  sendAttachmentSeparately = _ref.sendAttachmentSeparately,
26216
26314
  _ref$allowMentionUser = _ref.allowMentionUser,
26217
26315
  allowMentionUser = _ref$allowMentionUser === void 0 ? true : _ref$allowMentionUser;
@@ -26416,18 +26514,11 @@ var SendMessageInput = function SendMessageInput(_ref) {
26416
26514
  var messageTextToFormat = editMessageText || messageText;
26417
26515
  var currentText = "" + messageTextToFormat.slice(0, mentionToChange ? mentionToChange.start + 1 : currentMentions.start + 1) + mentionDisplayName + messageTextToFormat.slice(mentionToChange ? mentionToChange.end : currentMentions.start + 1 + currentMentions.typed.length);
26418
26516
  var mentionedMembersPositions = [];
26419
- var editingMentions = [];
26420
-
26421
- if (messageToEdit && messageToEdit.mentionedUsers && messageToEdit.mentionedUsers.length > 0) {
26422
- editingMentions = getDuplicateMentionsFromMeta(messageToEdit.metadata, messageToEdit.mentionedUsers);
26423
- }
26424
26517
 
26425
- var mentions = editingMentions && editingMentions.length ? [].concat(editingMentions, mentionedMembers) : mentionedMembers;
26426
-
26427
- if (mentions && mentions.length > 0) {
26518
+ if (mentionedMembers && mentionedMembers.length > 0) {
26428
26519
  var lastFoundIndex = 0;
26429
26520
  var starts = {};
26430
- mentions.forEach(function (menMem) {
26521
+ mentionedMembers.forEach(function (menMem) {
26431
26522
  var mentionDisplayName = "@" + makeUsername(contactsMap[menMem.id], menMem, getFromContacts).trim();
26432
26523
  var menIndex = currentText.indexOf(mentionDisplayName, lastFoundIndex);
26433
26524
  lastFoundIndex = menIndex + mentionDisplayName.length;
@@ -26546,7 +26637,7 @@ var SendMessageInput = function SendMessageInput(_ref) {
26546
26637
  var starts = {};
26547
26638
  var updatedMentionedMembers = [];
26548
26639
  mentionedMembers.forEach(function (menMem) {
26549
- var mentionDisplayName = mentionedMembersDisplayName[menMem.id].displayName;
26640
+ var mentionDisplayName = menMem.displayName || mentionedMembersDisplayName[menMem.id].displayName;
26550
26641
  var menIndex = currentText.indexOf(mentionDisplayName, lastFoundIndex);
26551
26642
  lastFoundIndex = menIndex + mentionDisplayName.length;
26552
26643
 
@@ -26556,7 +26647,7 @@ var SendMessageInput = function SendMessageInput(_ref) {
26556
26647
  end: menIndex + mentionDisplayName.length
26557
26648
  }));
26558
26649
  mentionedMembersPositions.push({
26559
- displayName: mentionedMembersDisplayName[menMem.id].displayName,
26650
+ displayName: mentionDisplayName,
26560
26651
  start: menIndex,
26561
26652
  end: menIndex + mentionDisplayName.length
26562
26653
  });
@@ -26572,7 +26663,13 @@ var SendMessageInput = function SendMessageInput(_ref) {
26572
26663
  messageInputRef.current.innerHTML = currentTextCont;
26573
26664
  }
26574
26665
 
26575
- setMessageText(currentText);
26666
+ if (messageToEdit) {
26667
+ setEditMessageText(currentText);
26668
+ } else {
26669
+ setMessageText(currentText);
26670
+ }
26671
+
26672
+ console.log('set pos .. . ', selPos);
26576
26673
 
26577
26674
  if (selPos > 0) {
26578
26675
  setCursorPosition(messageInputRef.current, selPos);
@@ -26744,11 +26841,10 @@ var SendMessageInput = function SendMessageInput(_ref) {
26744
26841
  var mentionedMembersPositions = [];
26745
26842
  var mentionedUserForSend = [];
26746
26843
 
26747
- if (messageToEdit.mentionedUsers && messageToEdit.mentionedUsers.length) {
26748
- var mentions = [].concat(messageToEdit.mentionedUsers, mentionedMembers);
26844
+ if (mentionedMembers && mentionedMembers.length) {
26749
26845
  var lastFoundIndex = 0;
26750
26846
  var starts = {};
26751
- mentions.forEach(function (menMem) {
26847
+ mentionedMembers.forEach(function (menMem) {
26752
26848
  var mentionDisplayName = ("@" + makeUsername(contactsMap[menMem.id], menMem, getFromContacts)).trim();
26753
26849
  var menIndex = messageTexToSend.indexOf(mentionDisplayName, lastFoundIndex);
26754
26850
 
@@ -27169,6 +27265,7 @@ var SendMessageInput = function SendMessageInput(_ref) {
27169
27265
  setEditMessageText(formattedText);
27170
27266
  var mentions = getDuplicateMentionsFromMeta(messageToEdit.metadata, messageToEdit.mentionedUsers);
27171
27267
  var mentionedMembersPositions = [];
27268
+ var editingMentionedMembers = [];
27172
27269
  var lastFoundIndex = 0;
27173
27270
  var starts = {};
27174
27271
  mentions.forEach(function (menMem) {
@@ -27177,15 +27274,18 @@ var SendMessageInput = function SendMessageInput(_ref) {
27177
27274
  lastFoundIndex = menIndex + mentionDisplayName.length;
27178
27275
 
27179
27276
  if (!starts[menIndex]) {
27180
- mentionedMembersPositions.push({
27277
+ var mentionInfo = {
27181
27278
  displayName: mentionDisplayName,
27182
27279
  start: menIndex,
27183
27280
  end: menIndex + mentionDisplayName.length
27184
- });
27281
+ };
27282
+ editingMentionedMembers.push(_extends({}, menMem, mentionInfo));
27283
+ mentionedMembersPositions.push(mentionInfo);
27185
27284
  }
27186
27285
 
27187
27286
  starts[menIndex] = true;
27188
27287
  });
27288
+ setMentionedMembers(editingMentionedMembers);
27189
27289
  var currentTextCont = typingTextFormat({
27190
27290
  text: messageToEdit.body,
27191
27291
  mentionedMembers: [].concat(mentionedMembersPositions)
@@ -27239,7 +27339,7 @@ var SendMessageInput = function SendMessageInput(_ref) {
27239
27339
  onClick: handleCloseEditMode
27240
27340
  }, React__default.createElement(SvgClose, null)), React__default.createElement(EditReplyMessageHeader, {
27241
27341
  color: colors.primary
27242
- }, React__default.createElement(SvgEdit, null), "Edit Message"), React__default.createElement(EditMessageText, null, messageToEdit.body)), messageForReply && React__default.createElement(EditReplyMessageCont, null, React__default.createElement(CloseEditMode, {
27342
+ }, editMessageIcon || React__default.createElement(SvgEditIcon, null), "Edit Message"), React__default.createElement(EditMessageText, null, messageToEdit.body)), messageForReply && React__default.createElement(EditReplyMessageCont, null, React__default.createElement(CloseEditMode, {
27243
27343
  onClick: handleCloseReply
27244
27344
  }, React__default.createElement(SvgClose, null)), React__default.createElement(ReplyMessageCont, null, !!(messageForReply.attachments && messageForReply.attachments.length) && (messageForReply.attachments[0].type === attachmentTypes.image || messageForReply.attachments[0].type === attachmentTypes.video ? React__default.createElement(Attachment, {
27245
27345
  attachment: messageForReply.attachments[0],
@@ -27254,9 +27354,7 @@ var SendMessageInput = function SendMessageInput(_ref) {
27254
27354
  message: messageForReply,
27255
27355
  contactsMap: contactsMap,
27256
27356
  getFromContacts: getFromContacts
27257
- })))), !!attachments.length && !sendAttachmentSeparately && React__default.createElement(ChosenAttachments, {
27258
- fileBoxWidth: selectedFileAttachmentsBoxWidth
27259
- }, attachments.map(function (attachment) {
27357
+ })))), !!attachments.length && !sendAttachmentSeparately && React__default.createElement(ChosenAttachments, null, attachments.map(function (attachment) {
27260
27358
  return React__default.createElement(Attachment, {
27261
27359
  attachment: attachment,
27262
27360
  isPrevious: true,
@@ -27415,9 +27513,7 @@ var SendMessageIcon = styled__default.span(_templateObject13$4 || (_templateObje
27415
27513
  }, function (props) {
27416
27514
  return props.isActive ? colors.primary : '#ccc';
27417
27515
  });
27418
- var ChosenAttachments = styled__default.div(_templateObject14$4 || (_templateObject14$4 = _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: ", ";\n padding: 6px 12px;\n height: 36px;\n }\n"])), AttachmentImg$1, AttachmentFile$1, function (props) {
27419
- return props.fileBoxWidth || '200px';
27420
- });
27516
+ var ChosenAttachments = styled__default.div(_templateObject14$4 || (_templateObject14$4 = _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: 6px 12px;\n height: 48px;\n }\n"])), AttachmentImg$1, AttachmentFile$1);
27421
27517
  var TypingIndicator$1 = styled__default.div(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 100%;\n left: 16px;\n"])));
27422
27518
  var TypingIndicatorCont = styled__default.div(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 12px;\n"])));
27423
27519
  var TypingFrom = styled__default.h5(_templateObject17$3 || (_templateObject17$3 = _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"])), colors.gray9);
@@ -27426,7 +27522,7 @@ var DotOne = styled__default.span(_templateObject19$2 || (_templateObject19$2 =
27426
27522
  var DotTwo = styled__default.span(_templateObject20$2 || (_templateObject20$2 = _taggedTemplateLiteralLoose([""])));
27427
27523
  var DotThree = styled__default.span(_templateObject21$2 || (_templateObject21$2 = _taggedTemplateLiteralLoose([""])));
27428
27524
  var TypingAnimation = styled__default.div(_templateObject22$2 || (_templateObject22$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n\n & > span {\n position: relative;\n width: 6px;\n height: 6px;\n margin-right: 3px;\n display: flex;\n align-items: center;\n justify-content: center;\n animation-timing-function: linear;\n\n &:after {\n content: '';\n position: absolute;\n\n width: 3.5px;\n height: 3.5px;\n border-radius: 50%;\n background-color: #818c99;\n animation-name: ", ";\n animation-duration: 0.6s;\n animation-iteration-count: infinite;\n }\n }\n\n & ", " {\n &:after {\n animation-delay: 0s;\n }\n }\n\n & ", " {\n &:after {\n animation-delay: 0.2s;\n }\n }\n\n & ", " {\n &:after {\n animation-delay: 0.3s;\n }\n }\n"])), sizeAnimation, DotOne, DotTwo, DotThree);
27429
- var Loading = styled__default.div(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose(["\n height: 36px;\n"])));
27525
+ var Loading = styled__default.div(_templateObject23$2 || (_templateObject23$2 = _taggedTemplateLiteralLoose(["\n height: 36px;\n"])));
27430
27526
  var BlockedUserInfo = styled__default.div(_templateObject24$1 || (_templateObject24$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px;\n font-weight: 400;\n font-size: 15px;\n line-height: 20px;\n color: ", ";\n\n & > svg {\n margin-right: 12px;\n }\n"])), colors.gray6);
27431
27527
  var JoinChannelCont = styled__default.div(_templateObject25$1 || (_templateObject25$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 -12px;\n padding: 14px;\n font-weight: 500;\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.2px;\n color: ", ";\n background-color: ", ";\n cursor: pointer;\n"])), function (props) {
27432
27528
  return props.color || colors.primary;
@@ -27439,10 +27535,10 @@ var ReplyIconWrapper = styled__default.span(_templateObject28$1 || (_templateObj
27439
27535
  return props.backgroundColor || colors.primary;
27440
27536
  }, colors.white);
27441
27537
 
27442
- var _path$11;
27538
+ var _path$_;
27443
27539
 
27444
- function _extends$14() {
27445
- _extends$14 = Object.assign ? Object.assign.bind() : function (target) {
27540
+ function _extends$12() {
27541
+ _extends$12 = Object.assign ? Object.assign.bind() : function (target) {
27446
27542
  for (var i = 1; i < arguments.length; i++) {
27447
27543
  var source = arguments[i];
27448
27544
 
@@ -27455,16 +27551,16 @@ function _extends$14() {
27455
27551
 
27456
27552
  return target;
27457
27553
  };
27458
- return _extends$14.apply(this, arguments);
27554
+ return _extends$12.apply(this, arguments);
27459
27555
  }
27460
27556
 
27461
27557
  function SvgBottom(props) {
27462
- return /*#__PURE__*/React.createElement("svg", _extends$14({
27558
+ return /*#__PURE__*/React.createElement("svg", _extends$12({
27463
27559
  width: 12,
27464
27560
  height: 7,
27465
27561
  fill: "none",
27466
27562
  xmlns: "http://www.w3.org/2000/svg"
27467
- }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
27563
+ }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
27468
27564
  d: "M1.5 1.5l4.5 4 4.5-4",
27469
27565
  stroke: "#676A7C",
27470
27566
  strokeWidth: 1.4,
@@ -27473,10 +27569,10 @@ function SvgBottom(props) {
27473
27569
  })));
27474
27570
  }
27475
27571
 
27476
- var _path$12;
27572
+ var _path$$;
27477
27573
 
27478
- function _extends$15() {
27479
- _extends$15 = Object.assign ? Object.assign.bind() : function (target) {
27574
+ function _extends$13() {
27575
+ _extends$13 = Object.assign ? Object.assign.bind() : function (target) {
27480
27576
  for (var i = 1; i < arguments.length; i++) {
27481
27577
  var source = arguments[i];
27482
27578
 
@@ -27489,16 +27585,16 @@ function _extends$15() {
27489
27585
 
27490
27586
  return target;
27491
27587
  };
27492
- return _extends$15.apply(this, arguments);
27588
+ return _extends$13.apply(this, arguments);
27493
27589
  }
27494
27590
 
27495
27591
  function SvgNotificationsOff2(props) {
27496
- return /*#__PURE__*/React.createElement("svg", _extends$15({
27592
+ return /*#__PURE__*/React.createElement("svg", _extends$13({
27497
27593
  width: 16,
27498
27594
  height: 16,
27499
27595
  fill: "none",
27500
27596
  xmlns: "http://www.w3.org/2000/svg"
27501
- }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
27597
+ }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
27502
27598
  d: "M9.259 14.3a1.454 1.454 0 01-2.517 0M12.821 9.007a13.013 13.013 0 01-.458-3.636M3.826 4.105c-.126.41-.19.837-.189 1.266 0 5.09-2.182 6.545-2.182 6.545h10.182M12.365 5.37a4.363 4.363 0 00-6.786-3.636M1 1l14 14",
27503
27599
  stroke: "CurrentColor",
27504
27600
  strokeWidth: 1.4,
@@ -27507,10 +27603,10 @@ function SvgNotificationsOff2(props) {
27507
27603
  })));
27508
27604
  }
27509
27605
 
27510
- var _path$13, _circle$6;
27606
+ var _path$10, _circle$6;
27511
27607
 
27512
- function _extends$16() {
27513
- _extends$16 = Object.assign ? Object.assign.bind() : function (target) {
27608
+ function _extends$14() {
27609
+ _extends$14 = Object.assign ? Object.assign.bind() : function (target) {
27514
27610
  for (var i = 1; i < arguments.length; i++) {
27515
27611
  var source = arguments[i];
27516
27612
 
@@ -27523,16 +27619,16 @@ function _extends$16() {
27523
27619
 
27524
27620
  return target;
27525
27621
  };
27526
- return _extends$16.apply(this, arguments);
27622
+ return _extends$14.apply(this, arguments);
27527
27623
  }
27528
27624
 
27529
27625
  function SvgMarkAsUnRead(props) {
27530
- return /*#__PURE__*/React.createElement("svg", _extends$16({
27626
+ return /*#__PURE__*/React.createElement("svg", _extends$14({
27531
27627
  width: 20,
27532
27628
  height: 20,
27533
27629
  fill: "none",
27534
27630
  xmlns: "http://www.w3.org/2000/svg"
27535
- }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
27631
+ }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
27536
27632
  fillRule: "evenodd",
27537
27633
  clipRule: "evenodd",
27538
27634
  d: "M17.778 8.516a3.958 3.958 0 01-5.117-5.982 7.847 7.847 0 00-2.631-.451c-4.356 0-7.887 3.544-7.887 7.917 0 1.359.341 2.638.942 3.755l-.967 3.118a.732.732 0 00.912.919l3.043-.943a7.827 7.827 0 003.957 1.067c4.356 0 7.887-3.544 7.887-7.916 0-.507-.048-1.003-.139-1.484z",
@@ -27546,10 +27642,10 @@ function SvgMarkAsUnRead(props) {
27546
27642
  })));
27547
27643
  }
27548
27644
 
27549
- var _path$14;
27645
+ var _path$11;
27550
27646
 
27551
- function _extends$17() {
27552
- _extends$17 = Object.assign ? Object.assign.bind() : function (target) {
27647
+ function _extends$15() {
27648
+ _extends$15 = Object.assign ? Object.assign.bind() : function (target) {
27553
27649
  for (var i = 1; i < arguments.length; i++) {
27554
27650
  var source = arguments[i];
27555
27651
 
@@ -27562,16 +27658,16 @@ function _extends$17() {
27562
27658
 
27563
27659
  return target;
27564
27660
  };
27565
- return _extends$17.apply(this, arguments);
27661
+ return _extends$15.apply(this, arguments);
27566
27662
  }
27567
27663
 
27568
27664
  function SvgMarkAsRead(props) {
27569
- return /*#__PURE__*/React.createElement("svg", _extends$17({
27665
+ return /*#__PURE__*/React.createElement("svg", _extends$15({
27570
27666
  width: 20,
27571
27667
  height: 20,
27572
27668
  fill: "none",
27573
27669
  xmlns: "http://www.w3.org/2000/svg"
27574
- }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
27670
+ }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
27575
27671
  fillRule: "evenodd",
27576
27672
  clipRule: "evenodd",
27577
27673
  d: "M17.917 10c0 4.372-3.531 7.916-7.887 7.916a7.827 7.827 0 01-3.957-1.067l-3.043.943a.732.732 0 01-.913-.919l.968-3.118A7.904 7.904 0 012.143 10c0-4.373 3.531-7.917 7.887-7.917S17.917 5.627 17.917 10z",
@@ -27579,10 +27675,10 @@ function SvgMarkAsRead(props) {
27579
27675
  })));
27580
27676
  }
27581
27677
 
27582
- var _path$15;
27678
+ var _path$12;
27583
27679
 
27584
- function _extends$18() {
27585
- _extends$18 = Object.assign ? Object.assign.bind() : function (target) {
27680
+ function _extends$16() {
27681
+ _extends$16 = Object.assign ? Object.assign.bind() : function (target) {
27586
27682
  for (var i = 1; i < arguments.length; i++) {
27587
27683
  var source = arguments[i];
27588
27684
 
@@ -27595,25 +27691,25 @@ function _extends$18() {
27595
27691
 
27596
27692
  return target;
27597
27693
  };
27598
- return _extends$18.apply(this, arguments);
27694
+ return _extends$16.apply(this, arguments);
27599
27695
  }
27600
27696
 
27601
27697
  function SvgDeleteChannel(props) {
27602
- return /*#__PURE__*/React.createElement("svg", _extends$18({
27698
+ return /*#__PURE__*/React.createElement("svg", _extends$16({
27603
27699
  width: 20,
27604
27700
  height: 21,
27605
27701
  fill: "none",
27606
27702
  xmlns: "http://www.w3.org/2000/svg"
27607
- }, props), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
27703
+ }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
27608
27704
  d: "M5 16.333C5 17.25 5.75 18 6.667 18h6.666C14.25 18 15 17.25 15 16.333V8c0-.917-.75-1.667-1.667-1.667H6.667C5.75 6.333 5 7.083 5 8v8.333zm10-12.5h-2.083l-.592-.591A.84.84 0 0011.742 3H8.258a.84.84 0 00-.583.242l-.592.591H5a.836.836 0 00-.833.834c0 .458.375.833.833.833h10a.836.836 0 00.833-.833.836.836 0 00-.833-.834z",
27609
27705
  fill: "CurrentColor"
27610
27706
  })));
27611
27707
  }
27612
27708
 
27613
- var _path$16;
27709
+ var _path$13;
27614
27710
 
27615
- function _extends$19() {
27616
- _extends$19 = Object.assign ? Object.assign.bind() : function (target) {
27711
+ function _extends$17() {
27712
+ _extends$17 = Object.assign ? Object.assign.bind() : function (target) {
27617
27713
  for (var i = 1; i < arguments.length; i++) {
27618
27714
  var source = arguments[i];
27619
27715
 
@@ -27626,16 +27722,16 @@ function _extends$19() {
27626
27722
 
27627
27723
  return target;
27628
27724
  };
27629
- return _extends$19.apply(this, arguments);
27725
+ return _extends$17.apply(this, arguments);
27630
27726
  }
27631
27727
 
27632
27728
  function SvgClear(props) {
27633
- return /*#__PURE__*/React.createElement("svg", _extends$19({
27729
+ return /*#__PURE__*/React.createElement("svg", _extends$17({
27634
27730
  width: 20,
27635
27731
  height: 21,
27636
27732
  fill: "none",
27637
27733
  xmlns: "http://www.w3.org/2000/svg"
27638
- }, props), _path$16 || (_path$16 = /*#__PURE__*/React.createElement("path", {
27734
+ }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
27639
27735
  fillRule: "evenodd",
27640
27736
  clipRule: "evenodd",
27641
27737
  d: "M10 3.833a6.667 6.667 0 100 13.333 6.667 6.667 0 000-13.333zm-8.333 6.666a8.333 8.333 0 1116.667 0 8.333 8.333 0 01-16.667 0zM6.911 7.41a.833.833 0 011.179 0L10 9.32l1.911-1.91A.833.833 0 0113.09 8.59l-1.911 1.91 1.91 1.911a.833.833 0 01-1.178 1.179l-1.91-1.911-1.911 1.91A.833.833 0 016.91 12.41l1.91-1.91-1.91-1.911a.833.833 0 010-1.179z",
@@ -27643,10 +27739,10 @@ function SvgClear(props) {
27643
27739
  })));
27644
27740
  }
27645
27741
 
27646
- var _path$17;
27742
+ var _path$14;
27647
27743
 
27648
- function _extends$1a() {
27649
- _extends$1a = Object.assign ? Object.assign.bind() : function (target) {
27744
+ function _extends$18() {
27745
+ _extends$18 = Object.assign ? Object.assign.bind() : function (target) {
27650
27746
  for (var i = 1; i < arguments.length; i++) {
27651
27747
  var source = arguments[i];
27652
27748
 
@@ -27659,25 +27755,25 @@ function _extends$1a() {
27659
27755
 
27660
27756
  return target;
27661
27757
  };
27662
- return _extends$1a.apply(this, arguments);
27758
+ return _extends$18.apply(this, arguments);
27663
27759
  }
27664
27760
 
27665
27761
  function SvgBlockChannel(props) {
27666
- return /*#__PURE__*/React.createElement("svg", _extends$1a({
27762
+ return /*#__PURE__*/React.createElement("svg", _extends$18({
27667
27763
  width: 20,
27668
27764
  height: 21,
27669
27765
  fill: "none",
27670
27766
  xmlns: "http://www.w3.org/2000/svg"
27671
- }, props), _path$17 || (_path$17 = /*#__PURE__*/React.createElement("path", {
27767
+ }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
27672
27768
  d: "M10 2.167A8.336 8.336 0 001.667 10.5c0 4.6 3.733 8.334 8.333 8.334s8.333-3.734 8.333-8.334S14.6 2.167 10 2.167zm0 15A6.665 6.665 0 013.333 10.5c0-1.541.525-2.958 1.409-4.083l9.341 9.342A6.586 6.586 0 0110 17.167zm5.258-2.583L5.917 5.242A6.585 6.585 0 0110 3.834a6.665 6.665 0 016.667 6.666 6.586 6.586 0 01-1.409 4.084z",
27673
27769
  fill: "CurrentColor"
27674
27770
  })));
27675
27771
  }
27676
27772
 
27677
- var _path$18, _path2$7;
27773
+ var _path$15, _path2$7;
27678
27774
 
27679
- function _extends$1b() {
27680
- _extends$1b = Object.assign ? Object.assign.bind() : function (target) {
27775
+ function _extends$19() {
27776
+ _extends$19 = Object.assign ? Object.assign.bind() : function (target) {
27681
27777
  for (var i = 1; i < arguments.length; i++) {
27682
27778
  var source = arguments[i];
27683
27779
 
@@ -27690,16 +27786,16 @@ function _extends$1b() {
27690
27786
 
27691
27787
  return target;
27692
27788
  };
27693
- return _extends$1b.apply(this, arguments);
27789
+ return _extends$19.apply(this, arguments);
27694
27790
  }
27695
27791
 
27696
27792
  function SvgReport(props) {
27697
- return /*#__PURE__*/React.createElement("svg", _extends$1b({
27793
+ return /*#__PURE__*/React.createElement("svg", _extends$19({
27698
27794
  width: 20,
27699
27795
  height: 21,
27700
27796
  fill: "none",
27701
27797
  xmlns: "http://www.w3.org/2000/svg"
27702
- }, props), _path$18 || (_path$18 = /*#__PURE__*/React.createElement("path", {
27798
+ }, props), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
27703
27799
  d: "M9.096 10.402a.882.882 0 011.765 0v3.627a.882.882 0 11-1.765 0v-3.627zM9.979 6.088a.98.98 0 100 1.96.98.98 0 000-1.96z",
27704
27800
  fill: "CurrentColor"
27705
27801
  })), _path2$7 || (_path2$7 = /*#__PURE__*/React.createElement("path", {
@@ -27710,10 +27806,10 @@ function SvgReport(props) {
27710
27806
  })));
27711
27807
  }
27712
27808
 
27713
- var _path$19;
27809
+ var _path$16;
27714
27810
 
27715
- function _extends$1c() {
27716
- _extends$1c = Object.assign ? Object.assign.bind() : function (target) {
27811
+ function _extends$1a() {
27812
+ _extends$1a = Object.assign ? Object.assign.bind() : function (target) {
27717
27813
  for (var i = 1; i < arguments.length; i++) {
27718
27814
  var source = arguments[i];
27719
27815
 
@@ -27726,25 +27822,25 @@ function _extends$1c() {
27726
27822
 
27727
27823
  return target;
27728
27824
  };
27729
- return _extends$1c.apply(this, arguments);
27825
+ return _extends$1a.apply(this, arguments);
27730
27826
  }
27731
27827
 
27732
27828
  function SvgStar(props) {
27733
- return /*#__PURE__*/React.createElement("svg", _extends$1c({
27829
+ return /*#__PURE__*/React.createElement("svg", _extends$1a({
27734
27830
  width: 20,
27735
27831
  height: 20,
27736
27832
  fill: "none",
27737
27833
  xmlns: "http://www.w3.org/2000/svg"
27738
- }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
27834
+ }, props), _path$16 || (_path$16 = /*#__PURE__*/React.createElement("path", {
27739
27835
  d: "M12.888 7.002l3.823.367c1.33.128 1.739 1.43.711 2.285l-2.993 2.49 1.111 4.06c.365 1.332-.767 2.14-1.901 1.337l-3.637-2.573-3.637 2.573c-1.13.799-2.267-.005-1.902-1.338l1.111-4.058-2.993-2.491c-1.032-.86-.625-2.156.711-2.285l3.823-.367 1.684-3.889c.528-1.217 1.878-1.217 2.405 0l1.684 3.889z",
27740
27836
  fill: "#B2B6BE"
27741
27837
  })));
27742
27838
  }
27743
27839
 
27744
- var _path$1a;
27840
+ var _path$17;
27745
27841
 
27746
- function _extends$1d() {
27747
- _extends$1d = Object.assign ? Object.assign.bind() : function (target) {
27842
+ function _extends$1b() {
27843
+ _extends$1b = Object.assign ? Object.assign.bind() : function (target) {
27748
27844
  for (var i = 1; i < arguments.length; i++) {
27749
27845
  var source = arguments[i];
27750
27846
 
@@ -27757,16 +27853,16 @@ function _extends$1d() {
27757
27853
 
27758
27854
  return target;
27759
27855
  };
27760
- return _extends$1d.apply(this, arguments);
27856
+ return _extends$1b.apply(this, arguments);
27761
27857
  }
27762
27858
 
27763
27859
  function SvgPin(props) {
27764
- return /*#__PURE__*/React.createElement("svg", _extends$1d({
27860
+ return /*#__PURE__*/React.createElement("svg", _extends$1b({
27765
27861
  width: 20,
27766
27862
  height: 20,
27767
27863
  fill: "none",
27768
27864
  xmlns: "http://www.w3.org/2000/svg"
27769
- }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
27865
+ }, props), _path$17 || (_path$17 = /*#__PURE__*/React.createElement("path", {
27770
27866
  d: "M12.253 2.663a.583.583 0 01.825 0l4.258 4.258a.583.583 0 01-.412.996h-1.509l-2.5 2.5v5.218a.6.6 0 01-1.024.424l-3.24-3.24-3.956 3.958a1.042 1.042 0 11-1.473-1.473l3.956-3.958L3.94 8.108a.6.6 0 01-.168-.33l-.007-.095a.6.6 0 01.6-.6h5.218l2.5-2.5V3.075c0-.155.061-.303.17-.412z",
27771
27867
  fill: "#B2B6BE"
27772
27868
  })));
@@ -27981,9 +28077,9 @@ var Actions$1 = function Actions(_ref) {
27981
28077
  };
27982
28078
 
27983
28079
  var handleToggleChannelMarkAs = function handleToggleChannelMarkAs() {
27984
- console.log('handle action mark read ', channel.markedAsUnread);
28080
+ console.log('handle action mark read ', channel.unread);
27985
28081
 
27986
- if (channel.markedAsUnread) {
28082
+ if (channel.unread) {
27987
28083
  dispatch(markChannelAsReadAC(channel.id));
27988
28084
  } else {
27989
28085
  dispatch(markChannelAsUnReadAC(channel.id));
@@ -28069,7 +28165,7 @@ var Actions$1 = function Actions(_ref) {
28069
28165
  iconColor: pinChannelIconColor || colors.gray4,
28070
28166
  color: pinChannelTextColor || colors.gray6,
28071
28167
  hoverColor: pinChannelTextColor || colors.gray6
28072
- }, React__default.createElement(React__default.Fragment, null, pinChannelIcon || React__default.createElement(SvgPin, null), " Pin")), showMarkAsReadUnread && (isDirectChannel && directChannelUser ? directChannelUser.activityState !== 'Deleted' : true) && (channel.markedAsUnread ? React__default.createElement(ActionItem$1, {
28168
+ }, React__default.createElement(React__default.Fragment, null, pinChannelIcon || React__default.createElement(SvgPin, null), " Pin")), showMarkAsReadUnread && (isDirectChannel && directChannelUser ? directChannelUser.activityState !== 'Deleted' : true) && (channel.unread ? React__default.createElement(ActionItem$1, {
28073
28169
  key: 3,
28074
28170
  onClick: handleToggleChannelMarkAs,
28075
28171
  order: markAsReadUnreadOrder,
@@ -28091,10 +28187,10 @@ var Actions$1 = function Actions(_ref) {
28091
28187
  hoverColor: leaveChannelTextColor || colors.red1,
28092
28188
  onClick: function onClick() {
28093
28189
  setPopupButtonText('Leave');
28094
- setPopupTitle("Leave " + channel.type);
28190
+ setPopupTitle("Leave " + (channel.type === 'private' ? 'group' : channel.type === 'public' || channel.type === 'broadcast' ? 'channel' : channel.type));
28095
28191
  handleToggleLeaveChannelPopupOpen();
28096
28192
  }
28097
- }, leaveChannelIcon || React__default.createElement(SvgLeave, null), " Leave ", channel.type), isDirectChannel && otherMembers.length === 1 ? React__default.createElement(React__default.Fragment, null, showBlockUser && (isDirectChannel && directChannelUser ? directChannelUser.activityState !== 'Deleted' : true) && (directChannelUser && directChannelUser.blocked ? React__default.createElement(ActionItem$1, {
28193
+ }, leaveChannelIcon || React__default.createElement(SvgLeave, null), " Leave " + (channel.type === 'private' ? 'group' : channel.type === 'public' || channel.type === 'broadcast' ? 'channel' : channel.type)), isDirectChannel && otherMembers.length === 1 ? React__default.createElement(React__default.Fragment, null, showBlockUser && (isDirectChannel && directChannelUser ? directChannelUser.activityState !== 'Deleted' : true) && (directChannelUser && directChannelUser.blocked ? React__default.createElement(ActionItem$1, {
28098
28194
  key: 5,
28099
28195
  color: unblockUserTextColor || colors.gray6,
28100
28196
  hoverColor: unblockUserTextColor || colors.gray6,
@@ -28126,10 +28222,10 @@ var Actions$1 = function Actions(_ref) {
28126
28222
  hoverColor: blockAndLeaveChannelTextColor || colors.red1,
28127
28223
  onClick: function onClick() {
28128
28224
  setPopupButtonText('Block');
28129
- setPopupTitle("Block and Leave " + channel.type);
28225
+ setPopupTitle("Block and Leave " + (channel.type === 'private' ? 'group' : channel.type === 'public' || channel.type === 'broadcast' ? 'channel' : channel.type === 'direct' ? 'chat' : channel.type));
28130
28226
  handleToggleBlockChannelPopupOpen();
28131
28227
  }
28132
- }, blockAndLeaveChannelIcon || React__default.createElement(SvgBlockChannel, null), " Block and Leave ", channel.type), showReportChannel && React__default.createElement(ActionItem$1, {
28228
+ }, blockAndLeaveChannelIcon || React__default.createElement(SvgBlockChannel, null), "Block and Leave " + (channel.type === 'private' ? 'group' : channel.type === 'public' || channel.type === 'broadcast' ? 'channel' : channel.type === 'direct' ? 'chat' : channel.type) + "\n "), showReportChannel && React__default.createElement(ActionItem$1, {
28133
28229
  key: 9,
28134
28230
  order: reportChannelOrder,
28135
28231
  color: reportChannelTextColor || colors.red1,
@@ -28170,10 +28266,10 @@ var Actions$1 = function Actions(_ref) {
28170
28266
  hoverColor: deleteChannelTextColor || colors.red1,
28171
28267
  onClick: function onClick() {
28172
28268
  setPopupButtonText('Delete');
28173
- setPopupTitle("Delete " + channel.type);
28269
+ setPopupTitle("Delete " + (channel.type === 'private' ? 'group' : channel.type === 'public' || channel.type === 'broadcast' ? 'channel' : channel.type === 'direct' ? 'chat' : channel.type));
28174
28270
  handleToggleDeleteChannelPopupOpen();
28175
28271
  }
28176
- }, deleteChannelIcon || React__default.createElement(SvgDeleteChannel, null), " Delete ", channel.type)), leaveChannelPopupOpen && React__default.createElement(ConfirmPopup, {
28272
+ }, deleteChannelIcon || React__default.createElement(SvgDeleteChannel, null), " Delete " + (channel.type === 'private' ? 'group' : channel.type === 'public' || channel.type === 'broadcast' ? 'channel' : channel.type === 'direct' ? 'chat' : channel.type))), leaveChannelPopupOpen && React__default.createElement(ConfirmPopup, {
28177
28273
  handleFunction: handleLeaveChannel,
28178
28274
  togglePopup: handleToggleLeaveChannelPopupOpen,
28179
28275
  buttonText: popupButtonText,
@@ -28238,10 +28334,10 @@ var ActionItem$1 = styled__default.li(_templateObject6$i || (_templateObject6$i
28238
28334
  return props.hoverColor || colors.blue2;
28239
28335
  });
28240
28336
 
28241
- var _rect$1, _rect2, _path$1b;
28337
+ var _rect$1, _rect2, _path$18;
28242
28338
 
28243
- function _extends$1e() {
28244
- _extends$1e = Object.assign ? Object.assign.bind() : function (target) {
28339
+ function _extends$1c() {
28340
+ _extends$1c = Object.assign ? Object.assign.bind() : function (target) {
28245
28341
  for (var i = 1; i < arguments.length; i++) {
28246
28342
  var source = arguments[i];
28247
28343
 
@@ -28254,11 +28350,11 @@ function _extends$1e() {
28254
28350
 
28255
28351
  return target;
28256
28352
  };
28257
- return _extends$1e.apply(this, arguments);
28353
+ return _extends$1c.apply(this, arguments);
28258
28354
  }
28259
28355
 
28260
28356
  function SvgAddMember(props) {
28261
- return /*#__PURE__*/React.createElement("svg", _extends$1e({
28357
+ return /*#__PURE__*/React.createElement("svg", _extends$1c({
28262
28358
  width: 40,
28263
28359
  height: 40,
28264
28360
  fill: "none",
@@ -28277,16 +28373,16 @@ function SvgAddMember(props) {
28277
28373
  stroke: "#000",
28278
28374
  strokeOpacity: 0.08,
28279
28375
  strokeWidth: 0.5
28280
- })), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
28376
+ })), _path$18 || (_path$18 = /*#__PURE__*/React.createElement("path", {
28281
28377
  d: "M20 12a1 1 0 011 1v6h6a1 1 0 110 2h-6v6a1 1 0 11-2 0l-.001-6H13a1 1 0 110-2h5.999L19 13a1 1 0 011-1z",
28282
28378
  fill: "CurrentColor"
28283
28379
  })));
28284
28380
  }
28285
28381
 
28286
- var _path$1c;
28382
+ var _path$19;
28287
28383
 
28288
- function _extends$1f() {
28289
- _extends$1f = Object.assign ? Object.assign.bind() : function (target) {
28384
+ function _extends$1d() {
28385
+ _extends$1d = Object.assign ? Object.assign.bind() : function (target) {
28290
28386
  for (var i = 1; i < arguments.length; i++) {
28291
28387
  var source = arguments[i];
28292
28388
 
@@ -28299,16 +28395,16 @@ function _extends$1f() {
28299
28395
 
28300
28396
  return target;
28301
28397
  };
28302
- return _extends$1f.apply(this, arguments);
28398
+ return _extends$1d.apply(this, arguments);
28303
28399
  }
28304
28400
 
28305
28401
  function SvgMoreVert(props) {
28306
- return /*#__PURE__*/React.createElement("svg", _extends$1f({
28402
+ return /*#__PURE__*/React.createElement("svg", _extends$1d({
28307
28403
  width: 4,
28308
28404
  height: 14,
28309
28405
  fill: "none",
28310
28406
  xmlns: "http://www.w3.org/2000/svg"
28311
- }, props), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
28407
+ }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
28312
28408
  d: "M.532 11.012c.355-.355.764-.533 1.228-.533.464 0 .874.178 1.228.533.355.354.532.764.532 1.228 0 .464-.177.873-.532 1.228-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 13.113 0 12.704 0 12.24c0-.464.177-.873.532-1.228zm0-5.24c.355-.355.764-.532 1.228-.532.464 0 .874.177 1.228.532.355.355.532.764.532 1.228 0 .464-.177.873-.532 1.228-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 7.873 0 7.464 0 7c0-.464.177-.873.532-1.228zm2.456-2.784c-.354.355-.764.532-1.228.532-.464 0-.873-.177-1.228-.532C.177 2.634 0 2.224 0 1.76 0 1.296.177.887.532.532.887.177 1.296 0 1.76 0c.464 0 .874.177 1.228.532.355.355.532.764.532 1.228 0 .464-.177.874-.532 1.228z",
28313
28409
  fill: "#9B9DA8"
28314
28410
  })));
@@ -28359,7 +28455,8 @@ var ChangeMemberRole = function ChangeMemberRole(_ref) {
28359
28455
  maxWidth: '400px',
28360
28456
  padding: '0'
28361
28457
  }, React__default.createElement(PopupBody, {
28362
- padding: 24
28458
+ paddingH: '24px',
28459
+ paddingV: '24px'
28363
28460
  }, React__default.createElement(CloseIcon, {
28364
28461
  onClick: function onClick() {
28365
28462
  return handleClosePopup();
@@ -28397,7 +28494,7 @@ var RolesSelect = styled__default.div(_templateObject$z || (_templateObject$z =
28397
28494
  var RoleLabel = styled__default.div(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n margin: 20px 0 8px;\n color: #1f233c;\n"])));
28398
28495
  var RoleSpan = styled__default.span(_templateObject3$r || (_templateObject3$r = _taggedTemplateLiteralLoose(["\n font-style: normal;\n font-weight: normal;\n font-size: 14px;\n color: #383b51;\n text-transform: capitalize;\n"])));
28399
28496
 
28400
- var _templateObject$A, _templateObject2$x, _templateObject3$s, _templateObject4$m, _templateObject5$k, _templateObject6$j, _templateObject7$f, _templateObject8$e;
28497
+ var _templateObject$A, _templateObject2$x, _templateObject3$s, _templateObject4$m, _templateObject5$k, _templateObject6$j, _templateObject7$f, _templateObject8$e, _templateObject9$c;
28401
28498
 
28402
28499
  var Members = function Members(_ref) {
28403
28500
  var channel = _ref.channel,
@@ -28561,11 +28658,13 @@ var Members = function Members(_ref) {
28561
28658
  size: 40,
28562
28659
  textSize: 14,
28563
28660
  setDefaultAvatar: true
28564
- }), React__default.createElement(MemberNamePresence, null, React__default.createElement(MemberName$3, null, member.id === user.id ? 'You' : makeUsername(member.id === user.id ? member : contactsMap[member.id], member, getFromContacts), member.role === 'owner' ? React__default.createElement(RoleBadge, {
28661
+ }), React__default.createElement(MemberNamePresence, null, React__default.createElement(MemberNameWrapper, null, React__default.createElement(MemberName$3, null, member.id === user.id ? 'You' : makeUsername(member.id === user.id ? member : contactsMap[member.id], member, getFromContacts)), member.role === 'owner' ? React__default.createElement(RoleBadge, {
28565
28662
  color: colors.primary
28566
28663
  }, "Owner") : member.role === 'admin' ? React__default.createElement(RoleBadge, {
28567
28664
  color: colors.purple
28568
- }, "Admin") : ''), React__default.createElement(SubTitle, null, member.presence && member.presence.state === PRESENCE_STATUS.ONLINE ? 'Online' : member.presence && member.presence.lastActiveAt && userLastActiveDateFormat(member.presence.lastActiveAt))), !noMemberEditPermissions && member.role !== 'owner' && member.id !== user.id && React__default.createElement(DropDown, {
28665
+ }, "Admin") : ''), React__default.createElement(SubTitle, {
28666
+ margin: '1px 0 0'
28667
+ }, member.presence && member.presence.state === PRESENCE_STATUS.ONLINE ? 'Online' : member.presence && member.presence.lastActiveAt && userLastActiveDateFormat(member.presence.lastActiveAt))), !noMemberEditPermissions && member.role !== 'owner' && member.id !== user.id && React__default.createElement(DropDown, {
28569
28668
  isSelect: true,
28570
28669
  forceClose: !!(closeMenu && closeMenu !== member.id),
28571
28670
  watchToggleState: function watchToggleState(state) {
@@ -28651,16 +28750,17 @@ var Members = function Members(_ref) {
28651
28750
  };
28652
28751
  var Container$j = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose([""])));
28653
28752
  var ActionsMenu$1 = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: all 0.2s;\n"])));
28654
- var MemberNamePresence = styled__default.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n max-width: calc(100% - 64px);\n"])));
28655
- var MemberName$3 = styled__default.h4(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n margin: 0;\n width: 100%;\n font-weight: 400;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n color: ", ";\n"])), colors.gray6);
28656
- var EditMemberIcon$1 = styled__default.span(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n margin-left: auto;\n cursor: pointer;\n padding: 2px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n"])));
28657
- var MembersList$1 = styled__default.ul(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n list-style: none;\n transition: all 0.2s;\n"])));
28658
- var MemberItem$1 = styled__default.li(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 15px;\n font-weight: 500;\n padding: 6px 16px;\n transition: all 0.2s;\n\n &:first-child {\n color: ", ";\n cursor: pointer;\n background-color: #fff;\n\n > svg {\n color: ", ";\n margin-right: 12px;\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n\n & .dropdown-wrapper {\n margin-left: auto;\n }\n\n & ", " {\n width: 12px;\n height: 12px;\n right: -1px;\n bottom: -1px;\n }\n"])), colors.gray6, function (props) {
28753
+ var MemberNamePresence = styled__default.div(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n max-width: calc(100% - 54px);\n\n & > ", " {\n display: block;\n }\n"])), SubTitle);
28754
+ var MemberNameWrapper = styled__default.div(_templateObject4$m || (_templateObject4$m = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n"])));
28755
+ var MemberName$3 = styled__default.h4(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n margin: 0;\n font-weight: 400;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n color: ", ";\n"])), colors.gray6);
28756
+ var EditMemberIcon$1 = styled__default.span(_templateObject6$j || (_templateObject6$j = _taggedTemplateLiteralLoose(["\n margin-left: auto;\n cursor: pointer;\n padding: 2px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.2s;\n"])));
28757
+ var MembersList$1 = styled__default.ul(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n list-style: none;\n transition: all 0.2s;\n"])));
28758
+ var MemberItem$1 = styled__default.li(_templateObject8$e || (_templateObject8$e = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 15px;\n font-weight: 500;\n padding: 6px 16px;\n transition: all 0.2s;\n\n &:first-child {\n color: ", ";\n cursor: pointer;\n background-color: #fff;\n\n > svg {\n color: ", ";\n margin-right: 12px;\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:hover ", " {\n opacity: 1;\n visibility: visible;\n }\n\n & .dropdown-wrapper {\n margin-left: auto;\n }\n\n & ", " {\n width: 12px;\n height: 12px;\n right: -1px;\n bottom: -1px;\n }\n"])), colors.gray6, function (props) {
28659
28759
  return props.addMemberIconColor || colors.primary;
28660
28760
  }, function (props) {
28661
28761
  return props.hoverBackground || colors.gray0;
28662
28762
  }, EditMemberIcon$1, UserStatus);
28663
- var RoleBadge = styled__default.span(_templateObject8$e || (_templateObject8$e = _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) {
28763
+ var RoleBadge = styled__default.span(_templateObject9$c || (_templateObject9$c = _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) {
28664
28764
  return props.color;
28665
28765
  }, function (props) {
28666
28766
  return props.color || colors.primary;
@@ -28717,10 +28817,10 @@ var Media = function Media(_ref) {
28717
28817
  var Container$k = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n padding: 6px 4px;\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n transition: all 0.2s;\n align-items: flex-start;\n display: flex;\n flex-wrap: wrap;\n"])));
28718
28818
  var MediaItem = styled__default.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n width: calc(33.3333% - 4px);\n height: 110px;\n box-sizing: border-box;\n //border: 1px solid #ccc;\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n overflow: hidden;\n margin: 2px;\n"])));
28719
28819
 
28720
- var _path$1d, _path2$8, _path3$4;
28820
+ var _path$1a, _path2$8, _path3$4;
28721
28821
 
28722
- function _extends$1g() {
28723
- _extends$1g = Object.assign ? Object.assign.bind() : function (target) {
28822
+ function _extends$1e() {
28823
+ _extends$1e = Object.assign ? Object.assign.bind() : function (target) {
28724
28824
  for (var i = 1; i < arguments.length; i++) {
28725
28825
  var source = arguments[i];
28726
28826
 
@@ -28733,17 +28833,17 @@ function _extends$1g() {
28733
28833
 
28734
28834
  return target;
28735
28835
  };
28736
- return _extends$1g.apply(this, arguments);
28836
+ return _extends$1e.apply(this, arguments);
28737
28837
  }
28738
28838
 
28739
28839
  function SvgFileIcon$1(props) {
28740
- return /*#__PURE__*/React.createElement("svg", _extends$1g({
28840
+ return /*#__PURE__*/React.createElement("svg", _extends$1e({
28741
28841
  width: 28,
28742
28842
  height: 28,
28743
28843
  viewBox: "0 0 30 30",
28744
28844
  fill: "none",
28745
28845
  xmlns: "http://www.w3.org/2000/svg"
28746
- }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
28846
+ }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
28747
28847
  d: "M16.25 2.5H7.5A2.5 2.5 0 005 5v20a2.5 2.5 0 002.5 2.5h15A2.5 2.5 0 0025 25V11.25L16.25 2.5z",
28748
28848
  stroke: "#2F81FF",
28749
28849
  strokeWidth: 1.4,
@@ -28763,10 +28863,10 @@ function SvgFileIcon$1(props) {
28763
28863
  })));
28764
28864
  }
28765
28865
 
28766
- var _path$1e, _path2$9;
28866
+ var _path$1b, _path2$9;
28767
28867
 
28768
- function _extends$1h() {
28769
- _extends$1h = Object.assign ? Object.assign.bind() : function (target) {
28868
+ function _extends$1f() {
28869
+ _extends$1f = Object.assign ? Object.assign.bind() : function (target) {
28770
28870
  for (var i = 1; i < arguments.length; i++) {
28771
28871
  var source = arguments[i];
28772
28872
 
@@ -28779,16 +28879,16 @@ function _extends$1h() {
28779
28879
 
28780
28880
  return target;
28781
28881
  };
28782
- return _extends$1h.apply(this, arguments);
28882
+ return _extends$1f.apply(this, arguments);
28783
28883
  }
28784
28884
 
28785
28885
  function SvgDownloadFile(props) {
28786
- return /*#__PURE__*/React.createElement("svg", _extends$1h({
28886
+ return /*#__PURE__*/React.createElement("svg", _extends$1f({
28787
28887
  width: 18,
28788
28888
  height: 18,
28789
28889
  fill: "none",
28790
28890
  xmlns: "http://www.w3.org/2000/svg"
28791
- }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
28891
+ }, props), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
28792
28892
  d: "M16.5 11.5v3.333a1.666 1.666 0 01-1.667 1.667H3.167A1.667 1.667 0 011.5 14.833V11.5",
28793
28893
  stroke: "#2F81FF",
28794
28894
  strokeWidth: 1.4,
@@ -28814,7 +28914,32 @@ var Files = function Files(_ref) {
28814
28914
  filePreviewHoverBackgroundColor = _ref.filePreviewHoverBackgroundColor,
28815
28915
  filePreviewDownloadIcon = _ref.filePreviewDownloadIcon;
28816
28916
  var dispatch = reactRedux.useDispatch();
28917
+
28918
+ var _useState = React.useState({}),
28919
+ downloadingFilesMap = _useState[0],
28920
+ setDownloadingFilesMap = _useState[1];
28921
+
28817
28922
  var attachments = reactRedux.useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
28923
+
28924
+ var handleCompleteDownload = function handleCompleteDownload(attachmentId) {
28925
+ var stateCopy = _extends({}, downloadingFilesMap);
28926
+
28927
+ delete stateCopy[attachmentId];
28928
+ setDownloadingFilesMap(stateCopy);
28929
+ };
28930
+
28931
+ var handleDownloadFile = function handleDownloadFile(attachment) {
28932
+ if (attachment.id) {
28933
+ setDownloadingFilesMap(function (prevState) {
28934
+ var _extends2;
28935
+
28936
+ return _extends({}, prevState, (_extends2 = {}, _extends2[attachment.id] = true, _extends2));
28937
+ });
28938
+ }
28939
+
28940
+ downloadFile(attachment, handleCompleteDownload);
28941
+ };
28942
+
28818
28943
  React.useEffect(function () {
28819
28944
  dispatch(getAttachmentsAC(channelId, channelDetailsTabs.file));
28820
28945
  }, [channelId]);
@@ -28831,9 +28956,14 @@ var Files = function Files(_ref) {
28831
28956
  color: filePreviewSizeColor
28832
28957
  }, file.fileSize ? bytesToSize(file.fileSize) : '')), React__default.createElement(DownloadWrapper, {
28833
28958
  onClick: function onClick() {
28834
- return downloadFile(file);
28835
- }
28836
- }, filePreviewDownloadIcon || React__default.createElement(SvgDownloadFile, null)));
28959
+ return handleDownloadFile(file);
28960
+ }
28961
+ }, downloadingFilesMap[file.id] ? React__default.createElement(UploadingIcon, {
28962
+ width: '12px',
28963
+ height: '12px',
28964
+ borderWidth: '2px',
28965
+ color: colors.gray10
28966
+ }) : filePreviewDownloadIcon || React__default.createElement(SvgDownloadFile, null)));
28837
28967
  }));
28838
28968
  };
28839
28969
  var Container$l = styled__default.ul(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n transition: all 0.2s;\n"])));
@@ -28848,10 +28978,10 @@ var FileSizeAndDate = styled__default.span(_templateObject7$g || (_templateObjec
28848
28978
  return props.color || colors.gray6;
28849
28979
  });
28850
28980
 
28851
- var _rect$2, _rect2$1, _g$2, _defs;
28981
+ var _rect$2, _rect2$1, _g$3, _defs$1;
28852
28982
 
28853
- function _extends$1i() {
28854
- _extends$1i = Object.assign ? Object.assign.bind() : function (target) {
28983
+ function _extends$1g() {
28984
+ _extends$1g = Object.assign ? Object.assign.bind() : function (target) {
28855
28985
  for (var i = 1; i < arguments.length; i++) {
28856
28986
  var source = arguments[i];
28857
28987
 
@@ -28864,11 +28994,11 @@ function _extends$1i() {
28864
28994
 
28865
28995
  return target;
28866
28996
  };
28867
- return _extends$1i.apply(this, arguments);
28997
+ return _extends$1g.apply(this, arguments);
28868
28998
  }
28869
28999
 
28870
29000
  function SvgLinkIcon(props) {
28871
- return /*#__PURE__*/React.createElement("svg", _extends$1i({
29001
+ return /*#__PURE__*/React.createElement("svg", _extends$1g({
28872
29002
  width: 42,
28873
29003
  height: 42,
28874
29004
  fill: "none",
@@ -28887,12 +29017,12 @@ function SvgLinkIcon(props) {
28887
29017
  stroke: "#000",
28888
29018
  strokeOpacity: 0.1,
28889
29019
  strokeWidth: 0.5
28890
- })), _g$2 || (_g$2 = /*#__PURE__*/React.createElement("g", {
29020
+ })), _g$3 || (_g$3 = /*#__PURE__*/React.createElement("g", {
28891
29021
  clipPath: "url(#linkIcon_svg__clip0)"
28892
29022
  }, /*#__PURE__*/React.createElement("path", {
28893
29023
  d: "M20.314 20.973a.984.984 0 11-1.754.895 3.939 3.939 0 01.724-4.574l2.088-2.088a3.938 3.938 0 115.569 5.569.984.984 0 01-1.392-1.393 1.969 1.969 0 00-2.785-2.784l-2.088 2.088a1.97 1.97 0 00-.362 2.287zm1.522.198a.984.984 0 111.754-.895 3.939 3.939 0 01-.724 4.574l-2.089 2.088a3.938 3.938 0 01-5.568-5.569.984.984 0 011.392 1.392 1.969 1.969 0 002.784 2.785l2.088-2.089a1.97 1.97 0 00.363-2.286z",
28894
29024
  fill: "#95A6FF"
28895
- }))), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
29025
+ }))), _defs$1 || (_defs$1 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
28896
29026
  id: "linkIcon_svg__clip0"
28897
29027
  }, /*#__PURE__*/React.createElement("path", {
28898
29028
  fill: "#fff",
@@ -28960,10 +29090,10 @@ var Links = function Links(_ref) {
28960
29090
  };
28961
29091
  var Container$m = styled__default.ul(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 11px 0 0;\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n transition: all 0.2s;\n"])));
28962
29092
 
28963
- var _rect$3, _circle$7, _path$1f;
29093
+ var _rect$3, _circle$7, _path$1c;
28964
29094
 
28965
- function _extends$1j() {
28966
- _extends$1j = Object.assign ? Object.assign.bind() : function (target) {
29095
+ function _extends$1h() {
29096
+ _extends$1h = Object.assign ? Object.assign.bind() : function (target) {
28967
29097
  for (var i = 1; i < arguments.length; i++) {
28968
29098
  var source = arguments[i];
28969
29099
 
@@ -28976,11 +29106,11 @@ function _extends$1j() {
28976
29106
 
28977
29107
  return target;
28978
29108
  };
28979
- return _extends$1j.apply(this, arguments);
29109
+ return _extends$1h.apply(this, arguments);
28980
29110
  }
28981
29111
 
28982
29112
  function SvgVoicePreview(props) {
28983
- return /*#__PURE__*/React.createElement("svg", _extends$1j({
29113
+ return /*#__PURE__*/React.createElement("svg", _extends$1h({
28984
29114
  width: 40,
28985
29115
  height: 40,
28986
29116
  fill: "none",
@@ -28995,16 +29125,16 @@ function SvgVoicePreview(props) {
28995
29125
  cy: 20,
28996
29126
  r: 14,
28997
29127
  fill: "#0DBD8B"
28998
- })), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
29128
+ })), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
28999
29129
  d: "M25.024 19.13c.635.385.635 1.354 0 1.738l-6.612 3.997c-.63.38-1.412-.1-1.412-.868v-7.995c0-.768.783-1.25 1.412-.869l6.612 3.998z",
29000
29130
  fill: "#fff"
29001
29131
  })));
29002
29132
  }
29003
29133
 
29004
- var _rect$4, _circle$8, _path$1g;
29134
+ var _rect$4, _circle$8, _path$1d;
29005
29135
 
29006
- function _extends$1k() {
29007
- _extends$1k = Object.assign ? Object.assign.bind() : function (target) {
29136
+ function _extends$1i() {
29137
+ _extends$1i = Object.assign ? Object.assign.bind() : function (target) {
29008
29138
  for (var i = 1; i < arguments.length; i++) {
29009
29139
  var source = arguments[i];
29010
29140
 
@@ -29017,11 +29147,11 @@ function _extends$1k() {
29017
29147
 
29018
29148
  return target;
29019
29149
  };
29020
- return _extends$1k.apply(this, arguments);
29150
+ return _extends$1i.apply(this, arguments);
29021
29151
  }
29022
29152
 
29023
29153
  function SvgVoicePreviewPause(props) {
29024
- return /*#__PURE__*/React.createElement("svg", _extends$1k({
29154
+ return /*#__PURE__*/React.createElement("svg", _extends$1i({
29025
29155
  width: 40,
29026
29156
  height: 40,
29027
29157
  fill: "none",
@@ -29036,16 +29166,16 @@ function SvgVoicePreviewPause(props) {
29036
29166
  cy: 20,
29037
29167
  r: 14,
29038
29168
  fill: "#0DBD8B"
29039
- })), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
29169
+ })), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
29040
29170
  d: "M17.974 15c.357 0 .486.037.617.107.13.07.232.172.302.302.07.13.107.26.107.617v7.948c0 .357-.037.486-.107.617a.726.726 0 01-.302.302c-.13.07-.26.107-.617.107h-.948c-.357 0-.486-.037-.617-.107a.726.726 0 01-.302-.302c-.07-.13-.107-.26-.107-.617v-7.948c0-.357.037-.486.107-.617a.726.726 0 01.302-.302c.13-.07.26-.107.617-.107h.948zm5 0c.357 0 .486.037.617.107.13.07.232.172.302.302.07.13.107.26.107.617v7.948c0 .357-.037.486-.107.617a.726.726 0 01-.302.302c-.13.07-.26.107-.617.107h-.948c-.357 0-.486-.037-.617-.107a.726.726 0 01-.302-.302c-.07-.13-.107-.26-.107-.617v-7.948c0-.357.037-.486.107-.617a.726.726 0 01.302-.302c.13-.07.26-.107.617-.107h.948z",
29041
29171
  fill: "#fff"
29042
29172
  })));
29043
29173
  }
29044
29174
 
29045
- var _rect$5, _circle$9, _path$1h;
29175
+ var _rect$5, _circle$9, _path$1e;
29046
29176
 
29047
- function _extends$1l() {
29048
- _extends$1l = Object.assign ? Object.assign.bind() : function (target) {
29177
+ function _extends$1j() {
29178
+ _extends$1j = Object.assign ? Object.assign.bind() : function (target) {
29049
29179
  for (var i = 1; i < arguments.length; i++) {
29050
29180
  var source = arguments[i];
29051
29181
 
@@ -29058,11 +29188,11 @@ function _extends$1l() {
29058
29188
 
29059
29189
  return target;
29060
29190
  };
29061
- return _extends$1l.apply(this, arguments);
29191
+ return _extends$1j.apply(this, arguments);
29062
29192
  }
29063
29193
 
29064
29194
  function SvgVoicePreviewHoverIcon(props) {
29065
- return /*#__PURE__*/React.createElement("svg", _extends$1l({
29195
+ return /*#__PURE__*/React.createElement("svg", _extends$1j({
29066
29196
  width: 40,
29067
29197
  height: 40,
29068
29198
  fill: "none",
@@ -29077,16 +29207,16 @@ function SvgVoicePreviewHoverIcon(props) {
29077
29207
  cy: 20,
29078
29208
  r: 14,
29079
29209
  fill: "#0DBD8B"
29080
- })), _path$1h || (_path$1h = /*#__PURE__*/React.createElement("path", {
29210
+ })), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
29081
29211
  d: "M25.024 19.13c.635.385.635 1.354 0 1.738l-6.612 3.997c-.63.38-1.412-.1-1.412-.868v-7.995c0-.768.783-1.25 1.412-.869l6.612 3.998z",
29082
29212
  fill: "#fff"
29083
29213
  })));
29084
29214
  }
29085
29215
 
29086
- var _rect$6, _circle$a, _path$1i;
29216
+ var _rect$6, _circle$a, _path$1f;
29087
29217
 
29088
- function _extends$1m() {
29089
- _extends$1m = Object.assign ? Object.assign.bind() : function (target) {
29218
+ function _extends$1k() {
29219
+ _extends$1k = Object.assign ? Object.assign.bind() : function (target) {
29090
29220
  for (var i = 1; i < arguments.length; i++) {
29091
29221
  var source = arguments[i];
29092
29222
 
@@ -29099,11 +29229,11 @@ function _extends$1m() {
29099
29229
 
29100
29230
  return target;
29101
29231
  };
29102
- return _extends$1m.apply(this, arguments);
29232
+ return _extends$1k.apply(this, arguments);
29103
29233
  }
29104
29234
 
29105
29235
  function SvgVoicePreviewPauseHover(props) {
29106
- return /*#__PURE__*/React.createElement("svg", _extends$1m({
29236
+ return /*#__PURE__*/React.createElement("svg", _extends$1k({
29107
29237
  width: 40,
29108
29238
  height: 40,
29109
29239
  fill: "none",
@@ -29118,7 +29248,7 @@ function SvgVoicePreviewPauseHover(props) {
29118
29248
  cy: 20,
29119
29249
  r: 14,
29120
29250
  fill: "#0DBD8B"
29121
- })), _path$1i || (_path$1i = /*#__PURE__*/React.createElement("path", {
29251
+ })), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
29122
29252
  d: "M17.974 15c.357 0 .486.037.617.107.13.07.232.172.302.302.07.13.107.26.107.617v7.948c0 .357-.037.486-.107.617a.726.726 0 01-.302.302c-.13.07-.26.107-.617.107h-.948c-.357 0-.486-.037-.617-.107a.726.726 0 01-.302-.302c-.07-.13-.107-.26-.107-.617v-7.948c0-.357.037-.486.107-.617a.726.726 0 01.302-.302c.13-.07.26-.107.617-.107h.948zm5 0c.357 0 .486.037.617.107.13.07.232.172.302.302.07.13.107.26.107.617v7.948c0 .357-.037.486-.107.617a.726.726 0 01-.302.302c-.13.07-.26.107-.617.107h-.948c-.357 0-.486-.037-.617-.107a.726.726 0 01-.302-.302c-.07-.13-.107-.26-.107-.617v-7.948c0-.357.037-.486.107-.617a.726.726 0 01.302-.302c.13-.07.26-.107.617-.107h.948z",
29123
29253
  fill: "#fff"
29124
29254
  })));
@@ -29810,7 +29940,7 @@ var Details = function Details(_ref) {
29810
29940
  onClick: function onClick() {
29811
29941
  return setEditMode(true);
29812
29942
  }
29813
- }, channelEditIcon || React__default.createElement(SvgEdit, null))), channel.role && React__default.createElement(Actions$1, {
29943
+ }, channelEditIcon || React__default.createElement(SvgEditIcon, null))), channel.role && React__default.createElement(Actions$1, {
29814
29944
  showMuteUnmuteNotifications: showMuteUnmuteNotifications,
29815
29945
  muteUnmuteNotificationsOrder: muteUnmuteNotificationsOrder,
29816
29946
  unmuteNotificationIcon: unmuteNotificationIcon,
@@ -30065,10 +30195,10 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
30065
30195
  }));
30066
30196
  };
30067
30197
 
30068
- var _path$1j, _path2$a, _path3$5;
30198
+ var _path$1g, _path2$a, _path3$5;
30069
30199
 
30070
- function _extends$1n() {
30071
- _extends$1n = Object.assign ? Object.assign.bind() : function (target) {
30200
+ function _extends$1l() {
30201
+ _extends$1l = Object.assign ? Object.assign.bind() : function (target) {
30072
30202
  for (var i = 1; i < arguments.length; i++) {
30073
30203
  var source = arguments[i];
30074
30204
 
@@ -30081,15 +30211,15 @@ function _extends$1n() {
30081
30211
 
30082
30212
  return target;
30083
30213
  };
30084
- return _extends$1n.apply(this, arguments);
30214
+ return _extends$1l.apply(this, arguments);
30085
30215
  }
30086
30216
 
30087
30217
  function SvgChatLogo(props) {
30088
- return /*#__PURE__*/React.createElement("svg", _extends$1n({
30218
+ return /*#__PURE__*/React.createElement("svg", _extends$1l({
30089
30219
  viewBox: "0 0 249 41",
30090
30220
  fill: "none",
30091
30221
  xmlns: "http://www.w3.org/2000/svg"
30092
- }, props), _path$1j || (_path$1j = /*#__PURE__*/React.createElement("path", {
30222
+ }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
30093
30223
  d: "M12.507.012a13.357 13.357 0 00-8.978 4.275 13.325 13.325 0 00.355 18.435 13.358 13.358 0 009.136 3.927h10.826a2.536 2.536 0 002.545-2.541V13.336a13.3 13.3 0 00-4.094-9.623 13.333 13.333 0 00-9.79-3.701z",
30094
30224
  fill: "#e17335"
30095
30225
  })), _path2$a || (_path2$a = /*#__PURE__*/React.createElement("path", {
@@ -30109,10 +30239,10 @@ function SceytChatHeader() {
30109
30239
  return React__default.createElement(Container$r, null, React__default.createElement(Logo, null, React__default.createElement(SvgChatLogo, null)));
30110
30240
  }
30111
30241
 
30112
- var _path$1k;
30242
+ var _path$1h;
30113
30243
 
30114
- function _extends$1o() {
30115
- _extends$1o = Object.assign ? Object.assign.bind() : function (target) {
30244
+ function _extends$1m() {
30245
+ _extends$1m = Object.assign ? Object.assign.bind() : function (target) {
30116
30246
  for (var i = 1; i < arguments.length; i++) {
30117
30247
  var source = arguments[i];
30118
30248
 
@@ -30125,16 +30255,16 @@ function _extends$1o() {
30125
30255
 
30126
30256
  return target;
30127
30257
  };
30128
- return _extends$1o.apply(this, arguments);
30258
+ return _extends$1m.apply(this, arguments);
30129
30259
  }
30130
30260
 
30131
30261
  function SvgChevronDown(props) {
30132
- return /*#__PURE__*/React.createElement("svg", _extends$1o({
30262
+ return /*#__PURE__*/React.createElement("svg", _extends$1m({
30133
30263
  width: 32,
30134
30264
  height: 32,
30135
30265
  fill: "none",
30136
30266
  xmlns: "http://www.w3.org/2000/svg"
30137
- }, props), _path$1k || (_path$1k = /*#__PURE__*/React.createElement("path", {
30267
+ }, props), _path$1h || (_path$1h = /*#__PURE__*/React.createElement("path", {
30138
30268
  d: "M9.298 12.937a1.056 1.056 0 10-1.374 1.603l7.39 6.333c.395.339.978.339 1.373 0l7.389-6.333a1.056 1.056 0 10-1.374-1.603L16 18.68l-6.702-5.744z",
30139
30269
  fill: "CurrentColor"
30140
30270
  })));
@@ -30174,14 +30304,14 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
30174
30304
  shadow: buttonShadow,
30175
30305
  onClick: handleScrollToBottom,
30176
30306
  bottomPos: sendMessageInputHeight
30177
- }, !!(channel.unreadMessageCount && channel.unreadMessageCount > 0) && React__default.createElement(UnreadCount$1, {
30307
+ }, !!(channel.newMessageCount && channel.newMessageCount > 0) && React__default.createElement(UnreadCount$1, {
30178
30308
  width: unreadCountWidth,
30179
30309
  height: unreadCountHeight,
30180
30310
  textColor: unreadCountTextColor,
30181
30311
  fontSize: unreadCountFontSize,
30182
30312
  backgroundColor: colors.primary,
30183
30313
  isMuted: channel.muted
30184
- }, channel.unreadMessageCount ? channel.unreadMessageCount > 99 ? '99+' : channel.unreadMessageCount : ''), buttonIcon || React__default.createElement(SvgChevronDown, null)));
30314
+ }, channel.newMessageCount ? channel.newMessageCount > 99 ? '99+' : channel.newMessageCount : ''), buttonIcon || React__default.createElement(SvgChevronDown, null)));
30185
30315
  };
30186
30316
  var BottomButton = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: ", ";\n right: 16px;\n margin-right: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: ", ";\n border: 0.5px solid rgba(0, 0, 0, 0.1);\n border-radius: 50px;\n width: 48px;\n height: 48px;\n cursor: pointer;\n z-index: 14;\n\n & > svg {\n color: rgba(129, 140, 153, 1);\n }\n\n & > span {\n bottom: 32px;\n right: 0;\n }\n"])), function (props) {
30187
30317
  return props.bottomPos + 45 + "px";