sceyt-chat-react-uikit 1.6.8-beta.4 → 1.6.8-beta.6

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 (10) hide show
  1. package/assets/svg/arrowDown.svg +3 -0
  2. package/components/Attachment/index.d.ts +2 -1
  3. package/components/Avatar/index.d.ts +1 -0
  4. package/components/Channel/index.d.ts +2 -0
  5. package/components/ChannelDetails/DetailsTab/Voices/voiceItem.d.ts +2 -1
  6. package/components/ChannelList/ContactItem/index.d.ts +1 -0
  7. package/components/ChatContainer/index.d.ts +2 -2
  8. package/index.js +444 -366
  9. package/index.modern.js +444 -366
  10. package/package.json +1 -1
package/index.modern.js CHANGED
@@ -7711,7 +7711,7 @@ var getCustomUploader = function getCustomUploader() {
7711
7711
  var getCustomDownloader = function getCustomDownloader() {
7712
7712
  return CustomUploader && CustomUploader.download;
7713
7713
  };
7714
- var customUpload = function customUpload(attachment, progress, getUpdatedFilePath) {
7714
+ var customUpload = function customUpload(attachment, progress, messageType, getUpdatedFilePath) {
7715
7715
  return new Promise(function (resolve, reject) {
7716
7716
  if (CustomUploader) {
7717
7717
  var uploadTask = {
@@ -7728,7 +7728,7 @@ var customUpload = function customUpload(attachment, progress, getUpdatedFilePat
7728
7728
  resume: function resume() {}
7729
7729
  };
7730
7730
  pendingUploaders[attachment.tid] = uploadTask;
7731
- CustomUploader.upload(attachment, uploadTask);
7731
+ CustomUploader.upload(attachment, uploadTask, messageType);
7732
7732
  } else {
7733
7733
  reject(new Error('No Custom uploader'));
7734
7734
  }
@@ -7780,7 +7780,7 @@ var filesPromisesOnDownload = {};
7780
7780
  var setDownloadFilePromise = function setDownloadFilePromise(attachmentId, promise) {
7781
7781
  filesPromisesOnDownload[attachmentId] = promise;
7782
7782
  };
7783
- var downloadFile = function downloadFile(attachment, download, done, progressCallback) {
7783
+ var downloadFile = function downloadFile(attachment, download, done, progressCallback, messageType) {
7784
7784
  try {
7785
7785
  return Promise.resolve(_catch(function () {
7786
7786
  var customDownloader = getCustomDownloader();
@@ -7791,7 +7791,7 @@ var downloadFile = function downloadFile(attachment, download, done, progressCal
7791
7791
  if (progressCallback) {
7792
7792
  progressCallback(progress);
7793
7793
  }
7794
- });
7794
+ }, messageType);
7795
7795
  filesPromisesOnDownload[attachment.id] = urlPromise;
7796
7796
  return Promise.resolve(urlPromise).then(function (result) {
7797
7797
  FileSaver.saveAs(result.Body, attachment.name);
@@ -9050,6 +9050,8 @@ var THEME_COLORS = {
9050
9050
  AVATAR_BRAND_2: 'avatarBrand2',
9051
9051
  AVATAR_BRAND_3: 'avatarBrand3',
9052
9052
  AVATAR_BRAND_4: 'avatarBrand4',
9053
+ AVATAR_BRAND_5: 'avatarBrand5',
9054
+ AVATAR_BRAND_6: 'avatarBrand6',
9053
9055
  TEXT_PRIMARY: 'textPrimary',
9054
9056
  TEXT_SECONDARY: 'textSecondary',
9055
9057
  TEXT_FOOTNOTE: 'textFootnote',
@@ -9075,7 +9077,8 @@ var THEME_COLORS = {
9075
9077
  INCOMING_MESSAGE_BACKGROUND: 'incomingMessageBackground',
9076
9078
  INCOMING_MESSAGE_BACKGROUND_X: 'incomingMessageBackgroundX',
9077
9079
  LINK_COLOR: 'linkColor',
9078
- HIGHLIGHTED_BACKGROUND: 'highlightedBackground'
9080
+ HIGHLIGHTED_BACKGROUND: 'highlightedBackground',
9081
+ TOOLTIP_BACKGROUND: 'tooltipBackground'
9079
9082
  };
9080
9083
  var defaultTheme = {
9081
9084
  colors: (_colors = {}, _colors[THEME_COLORS.ACCENT] = {
@@ -9093,6 +9096,12 @@ var defaultTheme = {
9093
9096
  }, _colors[THEME_COLORS.AVATAR_BRAND_4] = {
9094
9097
  light: '#67D292',
9095
9098
  dark: '#67D292'
9099
+ }, _colors[THEME_COLORS.AVATAR_BRAND_5] = {
9100
+ light: '#9F35E7',
9101
+ dark: '#9F35E7'
9102
+ }, _colors[THEME_COLORS.AVATAR_BRAND_6] = {
9103
+ light: '#63AFFF',
9104
+ dark: '#63AFFF'
9096
9105
  }, _colors[THEME_COLORS.BACKGROUND] = {
9097
9106
  light: '#FFFFFF',
9098
9107
  dark: '#19191B'
@@ -9171,6 +9180,9 @@ var defaultTheme = {
9171
9180
  }, _colors[THEME_COLORS.HIGHLIGHTED_BACKGROUND] = {
9172
9181
  light: '#C8D0FF',
9173
9182
  dark: '#3B3D68'
9183
+ }, _colors[THEME_COLORS.TOOLTIP_BACKGROUND] = {
9184
+ light: '#11153980',
9185
+ dark: '#00000080'
9174
9186
  }, _colors)
9175
9187
  };
9176
9188
  var defaultThemeMode = 'light';
@@ -10711,12 +10723,22 @@ function SvgPendingIcon(props) {
10711
10723
  })));
10712
10724
  }
10713
10725
 
10714
- var _avatarColors = ['#FF3E74', '#4F6AFF', '#FBB019', '#00CC99', '#9F35E7', '#63AFFF'];
10726
+ var avatarColors = {
10727
+ light: [defaultTheme.colors.avatarBrand1.light, defaultTheme.colors.avatarBrand2.light, defaultTheme.colors.avatarBrand3.light, defaultTheme.colors.avatarBrand4.light, defaultTheme.colors.avatarBrand5.light, defaultTheme.colors.avatarBrand6.light],
10728
+ dark: [defaultTheme.colors.avatarBrand1.dark, defaultTheme.colors.avatarBrand2.dark, defaultTheme.colors.avatarBrand3.dark, defaultTheme.colors.avatarBrand4.dark, defaultTheme.colors.avatarBrand5.dark, defaultTheme.colors.avatarBrand6.dark]
10729
+ };
10730
+ var _avatarColors = {
10731
+ light: avatarColors.light,
10732
+ dark: avatarColors.dark
10733
+ };
10715
10734
  var setAvatarColor = function setAvatarColor(colors) {
10716
- _avatarColors = colors;
10735
+ _avatarColors = {
10736
+ light: colors,
10737
+ dark: colors
10738
+ };
10717
10739
  };
10718
- var getAvatarColors = function getAvatarColors() {
10719
- return _avatarColors;
10740
+ var getAvatarColors = function getAvatarColors(theme) {
10741
+ return _avatarColors[theme];
10720
10742
  };
10721
10743
 
10722
10744
  var _path$4;
@@ -10898,8 +10920,8 @@ function md5(inputString) {
10898
10920
  return rh(a) + rh(b) + rh(c) + rh(d);
10899
10921
  }
10900
10922
  var GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n\n .mention_menu_item-active {\n background: #e6f7ff;\n }\n\n @keyframes makeVisible {\n 0% {\n opacity: 0;\n visibility: visible;\n }\n 100% {\n opacity: 1;\n visibility: visible;\n }\n }\n"])));
10901
- function generateAvatarColor(itemName) {
10902
- var avatarColors = getAvatarColors();
10923
+ function generateAvatarColor(itemName, theme) {
10924
+ var avatarColors = getAvatarColors(theme);
10903
10925
  if (itemName && itemName !== '') {
10904
10926
  var hash = md5(itemName).toString().padStart(32, '0').slice(-6);
10905
10927
  var hashInt = parseInt(hash, 16);
@@ -11090,14 +11112,14 @@ var SectionHeader = styled.h4(_templateObject20 || (_templateObject20 = _taggedT
11090
11112
  }, function (props) {
11091
11113
  return props.uppercase && 'uppercase';
11092
11114
  });
11093
- var ItemNote = styled.div(_templateObject21 || (_templateObject21 = _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"])), function (props) {
11115
+ var ItemNote = styled.div(_templateObject21 || (_templateObject21 = _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 & > svg {\n width: 20px;\n height: 20px;\n color: ", ";\n fill: ", ";\n position: absolute;\n top: 100%;\n left: calc(50% - 10px);\n path {\n fill: ", " !important;\n }\n }\n ", " ", " ", " ", "\n"])), function (props) {
11094
11116
  return props.bgColor;
11095
11117
  }, function (props) {
11096
11118
  return props.bgColor;
11097
11119
  }, function (props) {
11098
- return props.direction === 'right' && "\n left: -5px;\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n ";
11120
+ return props.bgColor;
11099
11121
  }, function (props) {
11100
- return props.direction === 'top' && "\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
11122
+ return props.bgColor;
11101
11123
  }, function (props) {
11102
11124
  return props.visible && "\n display: block;\n ";
11103
11125
  }, function (props) {
@@ -15524,7 +15546,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
15524
15546
  }
15525
15547
  });
15526
15548
  } else {
15527
- return Promise.resolve(customUpload(attachment, handleUploadProgress, handleUpdateLocalPath)).then(function (_customUpload) {
15549
+ return Promise.resolve(customUpload(attachment, handleUploadProgress, message.type, handleUpdateLocalPath)).then(function (_customUpload) {
15528
15550
  uri = _customUpload;
15529
15551
  });
15530
15552
  }
@@ -16500,7 +16522,7 @@ function resendMessage(action) {
16500
16522
  messageAttachment.data = pendingAttachment.file;
16501
16523
  messageAttachment.url = pendingAttachment.file;
16502
16524
  _context6.next = 41;
16503
- return call(customUpload, messageAttachment, handleUploadProgress, handleUpdateLocalPath);
16525
+ return call(customUpload, messageAttachment, handleUploadProgress, message.type, handleUpdateLocalPath);
16504
16526
  case 41:
16505
16527
  uri = _context6.sent;
16506
16528
  case 42:
@@ -19252,6 +19274,7 @@ var Avatar = function Avatar(_ref) {
19252
19274
  border = _ref.border,
19253
19275
  borderRadius = _ref.borderRadius,
19254
19276
  handleAvatarClick = _ref.handleAvatarClick;
19277
+ var theme = useSelector(themeSelector);
19255
19278
  var _useColor = useColors(),
19256
19279
  iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE];
19257
19280
  var isDeletedUserAvatar = !image && !name;
@@ -19279,7 +19302,8 @@ var Avatar = function Avatar(_ref) {
19279
19302
  textSize: textSize,
19280
19303
  onClick: handleAvatarClick,
19281
19304
  cursorPointer: !!handleAvatarClick,
19282
- borderRadius: borderRadius
19305
+ borderRadius: borderRadius,
19306
+ theme: theme
19283
19307
  }, isDeletedUserAvatar ? DeletedIcon || /*#__PURE__*/React__default.createElement(DeletedAvatarWrapper, {
19284
19308
  color: iconInactive
19285
19309
  }) : !image ? setDefaultAvatar ? DefaultAvatar || /*#__PURE__*/React__default.createElement(DefaultAvatarWrapper, {
@@ -19303,7 +19327,7 @@ var Container$1 = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTe
19303
19327
  }, function (props) {
19304
19328
  return props.marginAuto ? 'auto' : '';
19305
19329
  }, function (props) {
19306
- return !props.isImage ? "background-color:" + generateAvatarColor(props.avatarName) + ";" : '';
19330
+ return !props.isImage ? "background-color:" + generateAvatarColor(props.avatarName, props.theme) + ";" : '';
19307
19331
  }, function (props) {
19308
19332
  return props.cursorPointer && 'pointer';
19309
19333
  }, function (props) {
@@ -19397,7 +19421,8 @@ var Channel = function Channel(_ref2) {
19397
19421
  onlineStatus = _useColor[THEME_COLORS.ONLINE_STATUS],
19398
19422
  backgroundFocused = _useColor[THEME_COLORS.BACKGROUND_FOCUSED],
19399
19423
  iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
19400
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
19424
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
19425
+ background = _useColor[THEME_COLORS.BACKGROUND];
19401
19426
  var dispatch = useDispatch();
19402
19427
  var ChatClient = getClient();
19403
19428
  var getFromContacts = getShowOnlyContactUsers();
@@ -19518,11 +19543,13 @@ var Channel = function Channel(_ref2) {
19518
19543
  textSize: channelAvatarTextSize || 16,
19519
19544
  setDefaultAvatar: isDirectChannel
19520
19545
  }), isDirectChannel && directChannelUser && hideUserPresence && (hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus, {
19521
- backgroundColor: onlineStatus
19546
+ backgroundColor: onlineStatus,
19547
+ borderColor: background
19522
19548
  })))), /*#__PURE__*/React__default.createElement(ChannelInfo, {
19523
19549
  theme: theme,
19524
19550
  avatar: showAvatar,
19525
19551
  isMuted: channel.muted,
19552
+ isPinned: !!channel.pinnedAt,
19526
19553
  statusWidth: statusWidth,
19527
19554
  uppercase: directChannelUser && hideUserPresence && hideUserPresence(directChannelUser),
19528
19555
  subjectFontSize: channelSubjectFontSize,
@@ -19591,25 +19618,10 @@ var Channel = function Channel(_ref2) {
19591
19618
  color: iconInactive
19592
19619
  }, pinedIcon || /*#__PURE__*/React__default.createElement(SvgPin, null)))));
19593
19620
  };
19594
- var Container$2 = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n background-color: ", ";\n border-left: ", ";\n // padding: selectedChannel ? '8px 16px 8px 13px' : '8px 16px'\n padding: ", ";\n margin: ", ";\n border-radius: ", ";\n\n transition: all 0.2s;\n &:hover {\n ", "\n }\n"])), function (props) {
19595
- return props.selectedChannel ? props.selectedBackgroundColor : 'inherit';
19596
- }, function (props) {
19597
- return props.selectedChannel ? props.selectedChannelLeftBorder : null;
19598
- }, function (props) {
19599
- return props.selectedChannel ? props.selectedChannelPaddings || props.channelsPaddings || '8px' : props.channelsPaddings || '8px';
19600
- }, function (props) {
19601
- return props.channelsMargin || '0 8px';
19602
- }, function (props) {
19603
- return props.selectedChannelBorderRadius || '12px';
19604
- }, function (_ref3) {
19605
- var selectedChannel = _ref3.selectedChannel,
19606
- hoverBackground = _ref3.hoverBackground;
19607
- return !selectedChannel && "\n background-color: " + hoverBackground + ";\n ";
19608
- });
19609
- var ChannelInfo = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n text-align: left;\n margin-left: ", ";\n width: 100%;\n max-width: ", ";\n\n h3 {\n display: inline-block;\n margin: 0;\n font-size: ", ";\n font-weight: 500;\n text-overflow: ellipsis;\n line-height: ", ";\n letter-spacing: -0.2px;%;\n max-width: ", ";\n overflow: hidden;\n white-space: nowrap;\n color: ", ";\n text-transform: ", ";\n }\n"])), function (props) {
19621
+ var ChannelInfo = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n text-align: left;\n margin-left: ", ";\n width: 100%;\n max-width: ", ";\n\n h3 {\n display: inline-block;\n margin: 0;\n font-size: ", ";\n font-weight: 500;\n text-overflow: ellipsis;\n line-height: ", ";\n letter-spacing: -0.2px;%;\n max-width: ", ";\n overflow: hidden;\n white-space: nowrap;\n color: ", ";\n text-transform: ", ";\n }\n"])), function (props) {
19610
19622
  return props.avatar && '12px';
19611
19623
  }, function (props) {
19612
- return props.avatarSize ? "calc(100% - " + (props.avatarSize + 52) + "px)" : 'calc(100% - 102px)';
19624
+ return props.avatarSize ? "calc(100% - " + (props.avatarSize + 52) + "px)" : "calc(100% - " + (props.isPinned ? 92 : 72) + "px)";
19613
19625
  }, function (props) {
19614
19626
  return props.subjectFontSize || '15px';
19615
19627
  }, function (props) {
@@ -19621,10 +19633,10 @@ var ChannelInfo = styled.div(_templateObject2$4 || (_templateObject2$4 = _tagged
19621
19633
  }, function (props) {
19622
19634
  return props.uppercase && 'uppercase';
19623
19635
  });
19624
- var MutedIcon = styled.span(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n & > svg {\n height: 16px;\n width: 16px;\n margin-left: 5px;\n color: ", ";\n }\n"])), function (props) {
19636
+ var MutedIcon = styled.span(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n & > svg {\n height: 16px;\n width: 16px;\n margin-left: 5px;\n color: ", ";\n }\n"])), function (props) {
19625
19637
  return props.color;
19626
19638
  });
19627
- var LastMessage = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n color: ", ";\n max-width: ", ";\n\n height: ", ";\n"])), function (props) {
19639
+ var LastMessage = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: ", ";\n color: ", ";\n max-width: ", ";\n\n height: ", ";\n"])), function (props) {
19628
19640
  return props.fontSize || '14px';
19629
19641
  }, function (props) {
19630
19642
  return props.color;
@@ -19633,9 +19645,30 @@ var LastMessage = styled.div(_templateObject4$3 || (_templateObject4$3 = _tagged
19633
19645
  }, function (props) {
19634
19646
  return props.height || '20px';
19635
19647
  });
19636
- var AvatarWrapper = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19637
- var UserStatus = styled.span(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 14px;\n height: 14px;\n right: 0;\n bottom: 0;\n border-radius: 50%;\n background-color: ", ";\n border: 2.5px solid #ffffff;\n box-sizing: border-box;\n"])), function (props) {
19648
+ var AvatarWrapper = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19649
+ var UserStatus = styled.span(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 12px;\n height: 12px;\n right: 0;\n bottom: 0;\n border-radius: 50%;\n background-color: ", ";\n border: 2.5px solid ", ";\n box-sizing: border-box;\n"])), function (props) {
19638
19650
  return props.backgroundColor || '#56E464';
19651
+ }, function (props) {
19652
+ return props.borderColor || '#ffffff';
19653
+ });
19654
+ var Container$2 = styled.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n background-color: ", ";\n border-left: ", ";\n // padding: selectedChannel ? '8px 16px 8px 13px' : '8px 16px'\n padding: ", ";\n margin: ", ";\n border-radius: ", ";\n\n transition: all 0.2s;\n &:hover {\n ", "\n ", " {\n border-color: ", ";\n }\n }\n ", " {\n ", "\n }\n"])), function (props) {
19655
+ return props.selectedChannel ? props.selectedBackgroundColor : 'inherit';
19656
+ }, function (props) {
19657
+ return props.selectedChannel ? props.selectedChannelLeftBorder : null;
19658
+ }, function (props) {
19659
+ return props.selectedChannel ? props.selectedChannelPaddings || props.channelsPaddings || '8px' : props.channelsPaddings || '8px';
19660
+ }, function (props) {
19661
+ return props.channelsMargin || '0 8px';
19662
+ }, function (props) {
19663
+ return props.selectedChannelBorderRadius || '12px';
19664
+ }, function (_ref3) {
19665
+ var selectedChannel = _ref3.selectedChannel,
19666
+ hoverBackground = _ref3.hoverBackground;
19667
+ return !selectedChannel && "\n background-color: " + hoverBackground + ";\n ";
19668
+ }, UserStatus, function (props) {
19669
+ return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
19670
+ }, UserStatus, function (props) {
19671
+ return props.selectedChannel && "\n border-color: " + props.selectedBackgroundColor + ";\n ";
19639
19672
  });
19640
19673
  var DraftMessageTitle = styled.span(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (props) {
19641
19674
  return props.color;
@@ -19776,7 +19809,8 @@ var ContactItem = function ContactItem(_ref) {
19776
19809
  var _useColor = useColors(),
19777
19810
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
19778
19811
  online = _useColor[THEME_COLORS.ONLINE_STATUS],
19779
- backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED];
19812
+ backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
19813
+ background = _useColor[THEME_COLORS.BACKGROUND];
19780
19814
  var getFromContacts = getShowOnlyContactUsers();
19781
19815
  var contactUserName = makeUsername(contact, undefined, getFromContacts);
19782
19816
  return /*#__PURE__*/React__default.createElement(Container$3, {
@@ -19795,7 +19829,8 @@ var ContactItem = function ContactItem(_ref) {
19795
19829
  textSize: channelAvatarTextSize || 16,
19796
19830
  setDefaultAvatar: true
19797
19831
  }), hideUserPresence && (hideUserPresence(contact.user) ? '' : contact.user.presence && contact.user.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus$1, {
19798
- backgroundColor: online
19832
+ backgroundColor: online,
19833
+ borderColor: background
19799
19834
  })))), /*#__PURE__*/React__default.createElement(ChannelInfo$1, {
19800
19835
  theme: theme,
19801
19836
  avatar: showAvatar,
@@ -19805,14 +19840,7 @@ var ContactItem = function ContactItem(_ref) {
19805
19840
  textColor: textPrimary
19806
19841
  }, /*#__PURE__*/React__default.createElement("h3", null, contactUserName)));
19807
19842
  };
19808
- var Container$3 = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin: ", ";\n &:hover {\n background-color: ", ";\n }\n"])), function (props) {
19809
- return props.channelsPaddings || '8px';
19810
- }, function (props) {
19811
- return props.channelsMargin || '0 8px';
19812
- }, function (props) {
19813
- return props.hoverBackground;
19814
- });
19815
- var ChannelInfo$1 = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n text-align: left;\n margin-left: ", ";\n width: 100%;\n max-width: calc(100% - 62px);\n\n h3 {\n display: inline-block;\n margin: 0;\n font-size: ", ";\n font-weight: 500;\n text-overflow: ellipsis;\n line-height: ", ";\n letter-spacing: -0.2px;%;\n max-width: calc(100% - 2px);\n overflow: hidden;\n white-space: nowrap;\n color: ", ";\n }\n"])), function (props) {
19843
+ var ChannelInfo$1 = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n text-align: left;\n margin-left: ", ";\n width: 100%;\n max-width: calc(100% - 62px);\n\n h3 {\n display: inline-block;\n margin: 0;\n font-size: ", ";\n font-weight: 500;\n text-overflow: ellipsis;\n line-height: ", ";\n letter-spacing: -0.2px;%;\n max-width: calc(100% - 2px);\n overflow: hidden;\n white-space: nowrap;\n color: ", ";\n }\n"])), function (props) {
19816
19844
  return props.avatar && '12px';
19817
19845
  }, function (props) {
19818
19846
  return props.subjectFontSize || '15px';
@@ -19821,9 +19849,20 @@ var ChannelInfo$1 = styled.div(_templateObject2$6 || (_templateObject2$6 = _tagg
19821
19849
  }, function (props) {
19822
19850
  return props.subjectColor || props.textColor;
19823
19851
  });
19824
- var AvatarWrapper$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19825
- var UserStatus$1 = styled.span(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 14px;\n height: 14px;\n right: 0;\n bottom: 0;\n border-radius: 50%;\n background-color: ", ";\n border: 2.5px solid #ffffff;\n box-sizing: border-box;\n"])), function (props) {
19852
+ var AvatarWrapper$1 = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19853
+ var UserStatus$1 = styled.span(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 12px;\n height: 12px;\n right: 0;\n bottom: 0;\n border-radius: 50%;\n background-color: ", ";\n border: 2.5px solid ", ";\n box-sizing: border-box;\n"])), function (props) {
19826
19854
  return props.backgroundColor || '#56E464';
19855
+ }, function (props) {
19856
+ return props.borderColor || '#ffffff';
19857
+ });
19858
+ var Container$3 = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin: ", ";\n &:hover {\n background-color: ", ";\n ", " {\n border-color: ", ";\n }\n }\n"])), function (props) {
19859
+ return props.channelsPaddings || '8px';
19860
+ }, function (props) {
19861
+ return props.channelsMargin || '0 8px';
19862
+ }, function (props) {
19863
+ return props.hoverBackground;
19864
+ }, UserStatus$1, function (props) {
19865
+ return props.hoverBackground;
19827
19866
  });
19828
19867
 
19829
19868
  var _path$f;
@@ -23406,7 +23445,8 @@ function ForwardMessagePopup(_ref) {
23406
23445
  onClick: function onClick() {
23407
23446
  return handleChannelSelect(!isSelected, channel);
23408
23447
  },
23409
- disabled: selectedChannels.length >= 5 && !isSelected
23448
+ disabled: selectedChannels.length >= 5 && !isSelected,
23449
+ backgroundHover: backgroundHovered
23410
23450
  }, /*#__PURE__*/React__default.createElement(Avatar, {
23411
23451
  name: channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : ''),
23412
23452
  image: channel.avatarUrl || (isDirectChannel && directChannelUser ? directChannelUser.avatarUrl : ''),
@@ -23446,12 +23486,12 @@ function ForwardMessagePopup(_ref) {
23446
23486
  onClick: handleForwardMessage
23447
23487
  }, buttonText || 'Forward'))));
23448
23488
  }
23449
- var ForwardChannelsCont = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n overflow-y: auto;\n margin-top: 16px;\n max-height: ", ";\n padding-right: 22px;\n\n &::-webkit-scrollbar {\n width: 8px;\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n &.show-scrollbar::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 4px;\n }\n &.show-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n }\n"])), function (props) {
23450
- return "calc(100% - " + (props.selectedChannelsHeight + 64) + "px)";
23489
+ var ForwardChannelsCont = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n overflow-y: auto;\n margin-top: 16px;\n max-height: ", ";\n\n &::-webkit-scrollbar {\n width: 8px;\n background: transparent;\n }\n &::-webkit-scrollbar-thumb {\n background: transparent;\n }\n\n &.show-scrollbar::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 4px;\n }\n &.show-scrollbar::-webkit-scrollbar-track {\n background: transparent;\n }\n"])), function (props) {
23490
+ return "calc(100% - " + (props.selectedChannelsHeight + 82) + "px)";
23451
23491
  }, function (props) {
23452
23492
  return props.thumbColor;
23453
23493
  });
23454
- var ChannelItem = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-bottom: 8px;\n cursor: pointer;\n &:hover {\n background-color: ", ";\n }\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n"])), function (props) {
23494
+ var ChannelItem = styled.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 8px;\n &:hover {\n background-color: ", ";\n }\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n"])), function (props) {
23455
23495
  return props.backgroundHover;
23456
23496
  });
23457
23497
  var ChannelInfo$3 = styled.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: auto;\n max-width: calc(100% - 74px);\n"])));
@@ -23654,9 +23694,11 @@ var SliderPopup = function SliderPopup(_ref) {
23654
23694
  mediaFiles = _ref.mediaFiles,
23655
23695
  currentMediaFile = _ref.currentMediaFile,
23656
23696
  allowEditDeleteIncomingMessage = _ref.allowEditDeleteIncomingMessage,
23657
- attachmentsPreview = _ref.attachmentsPreview;
23697
+ attachmentsPreview = _ref.attachmentsPreview,
23698
+ messageType = _ref.messageType;
23658
23699
  var _useColor = useColors(),
23659
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
23700
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
23701
+ overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2];
23660
23702
  var dispatch = useDispatch();
23661
23703
  var getFromContacts = getShowOnlyContactUsers();
23662
23704
  var connectionStatus = useSelector(connectionStatusSelector);
@@ -23728,7 +23770,7 @@ var SliderPopup = function SliderPopup(_ref) {
23728
23770
  delete stateCopy[attachmentId];
23729
23771
  setDownloadingFilesMap(stateCopy);
23730
23772
  };
23731
- var handleDownloadFile = function handleDownloadFile(attachment) {
23773
+ var handleDownloadFile = function handleDownloadFile(attachment, messageType) {
23732
23774
  if (attachment.id) {
23733
23775
  setDownloadingFilesMap(function (prevState) {
23734
23776
  var _extends3;
@@ -23746,7 +23788,7 @@ var SliderPopup = function SliderPopup(_ref) {
23746
23788
  uploadPercent: uploadPercent
23747
23789
  }, _extends4));
23748
23790
  });
23749
- });
23791
+ }, messageType);
23750
23792
  };
23751
23793
  var handleClicks = function handleClicks(e) {
23752
23794
  if (!e.target.closest('.custom_carousel_item') && !e.target.closest('.custom_carousel_arrow')) {
@@ -23872,7 +23914,7 @@ var SliderPopup = function SliderPopup(_ref) {
23872
23914
  }
23873
23915
  } else {
23874
23916
  if (customDownloader) {
23875
- customDownloader(currentFile.url, false).then(function (url) {
23917
+ customDownloader(currentFile.url, false, function () {}, messageType).then(function (url) {
23876
23918
  try {
23877
23919
  return Promise.resolve(fetch(url)).then(function (response) {
23878
23920
  setAttachmentToCache(currentFile.url, response);
@@ -23962,7 +24004,7 @@ var SliderPopup = function SliderPopup(_ref) {
23962
24004
  }
23963
24005
  } else {
23964
24006
  if (customDownloader) {
23965
- customDownloader(currentMediaFile.url, false).then(function (url) {
24007
+ customDownloader(currentMediaFile.url, false, function () {}, messageType).then(function (url) {
23966
24008
  try {
23967
24009
  return Promise.resolve(fetch(url)).then(function (response) {
23968
24010
  setAttachmentToCache(currentMediaFile.url, response);
@@ -24020,7 +24062,7 @@ var SliderPopup = function SliderPopup(_ref) {
24020
24062
  color: textOnPrimary
24021
24063
  }, currentFile && currentFile.size && currentFile.size > 0 ? bytesToSize(currentFile.size, 1) : '')))), /*#__PURE__*/React__default.createElement(ActionsWrapper, null, /*#__PURE__*/React__default.createElement(IconWrapper, {
24022
24064
  onClick: function onClick() {
24023
- return handleDownloadFile(currentFile);
24065
+ return handleDownloadFile(currentFile, messageType);
24024
24066
  },
24025
24067
  color: textOnPrimary
24026
24068
  }, currentFile && downloadingFilesMap[currentFile.id] ? (/*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(CircularProgressbar, {
@@ -24032,7 +24074,7 @@ var SliderPopup = function SliderPopup(_ref) {
24032
24074
  text: '',
24033
24075
  styles: {
24034
24076
  background: {
24035
- fill: 'transparent'
24077
+ fill: overlayBackground2 + "40"
24036
24078
  },
24037
24079
  path: {
24038
24080
  stroke: textOnPrimary,
@@ -24833,6 +24875,31 @@ function SvgReplyInThreadIcon(props) {
24833
24875
  })));
24834
24876
  }
24835
24877
 
24878
+ var _path$R;
24879
+ function _extends$S() {
24880
+ return _extends$S = Object.assign ? Object.assign.bind() : function (n) {
24881
+ for (var e = 1; e < arguments.length; e++) {
24882
+ var t = arguments[e];
24883
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
24884
+ }
24885
+ return n;
24886
+ }, _extends$S.apply(null, arguments);
24887
+ }
24888
+ function SvgArrowDown(props) {
24889
+ return /*#__PURE__*/createElement$1("svg", _extends$S({
24890
+ width: 20,
24891
+ height: 8,
24892
+ viewBox: "0 0 20 20",
24893
+ fill: "none",
24894
+ xmlns: "http://www.w3.org/2000/svg"
24895
+ }, props), _path$R || (_path$R = /*#__PURE__*/createElement$1("path", {
24896
+ fillRule: "evenodd",
24897
+ clipRule: "evenodd",
24898
+ d: "M10 8C7 8 4 0 0 0h20c-3.975 0-7 8-10 8z",
24899
+ fill: "currentColor"
24900
+ })));
24901
+ }
24902
+
24836
24903
  var _templateObject$r, _templateObject2$n, _templateObject3$h;
24837
24904
  function MessageActions(_ref) {
24838
24905
  var editModeToggle = _ref.editModeToggle,
@@ -24892,10 +24959,10 @@ function MessageActions(_ref) {
24892
24959
  accentColor = _useColor[THEME_COLORS.ACCENT],
24893
24960
  backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
24894
24961
  backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
24895
- surface2 = _useColor[THEME_COLORS.SURFACE_2],
24896
24962
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
24897
24963
  warningColor = _useColor[THEME_COLORS.WARNING],
24898
- iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE];
24964
+ iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
24965
+ tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
24899
24966
  var ChatClient = getClient();
24900
24967
  var user = ChatClient.user;
24901
24968
  var _usePermissions = usePermissions(myRole),
@@ -24926,9 +24993,9 @@ function MessageActions(_ref) {
24926
24993
  onClick: handleOpenReaction
24927
24994
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24928
24995
  disabledColor: textSecondary,
24929
- bgColor: surface2,
24996
+ bgColor: tooltipBackground,
24930
24997
  direction: 'top'
24931
- }, reactionIconTooltipText || 'React'), reactionIcon || /*#__PURE__*/React__default.createElement(SvgEmojiSmileIcon, null))), showEditMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (isIncoming ? allowEditDeleteIncomingMessage : true) && editMessagePermitted && (isDirectChannel && directChannelUser ? !isIncoming && directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(Action, {
24998
+ }, reactionIconTooltipText || 'React', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), reactionIcon || /*#__PURE__*/React__default.createElement(SvgEmojiSmileIcon, null))), showEditMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (isIncoming ? allowEditDeleteIncomingMessage : true) && editMessagePermitted && (isDirectChannel && directChannelUser ? !isIncoming && directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(Action, {
24932
24999
  order: editIconOrder || 1,
24933
25000
  iconColor: messageActionIconsColor || iconInactive,
24934
25001
  hoverBackgroundColor: backgroundHovered,
@@ -24938,9 +25005,9 @@ function MessageActions(_ref) {
24938
25005
  }
24939
25006
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24940
25007
  disabledColor: textSecondary,
24941
- bgColor: surface2,
25008
+ bgColor: tooltipBackground,
24942
25009
  direction: 'top'
24943
- }, editIconTooltipText || 'Edit Message'), editIcon || /*#__PURE__*/React__default.createElement(SvgEditIcon, null))), messageStatus === MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25010
+ }, editIconTooltipText || 'Edit Message', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), editIcon || /*#__PURE__*/React__default.createElement(SvgEditIcon, null))), messageStatus === MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
24944
25011
  iconColor: messageActionIconsColor || iconInactive,
24945
25012
  hoverBackgroundColor: backgroundHovered,
24946
25013
  hoverIconColor: accentColor,
@@ -24949,9 +25016,9 @@ function MessageActions(_ref) {
24949
25016
  }
24950
25017
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24951
25018
  disabledColor: textSecondary,
24952
- bgColor: surface2,
25019
+ bgColor: tooltipBackground,
24953
25020
  direction: 'top'
24954
- }, ' ', "Resend Message", ' '), /*#__PURE__*/React__default.createElement(SvgResend, null))), !isThreadMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, showReplyMessage && replyMessagePermitted && (isDirectChannel && directChannelUser ? directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(Action, {
25021
+ }, ' ', "Resend Message ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgResend, null))), !isThreadMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, showReplyMessage && replyMessagePermitted && (isDirectChannel && directChannelUser ? directChannelUser.state !== USER_STATE.DELETED : true) && (/*#__PURE__*/React__default.createElement(Action, {
24955
25022
  order: replyIconOrder || 2,
24956
25023
  iconColor: messageActionIconsColor || iconInactive,
24957
25024
  hoverBackgroundColor: backgroundHovered,
@@ -24961,9 +25028,9 @@ function MessageActions(_ref) {
24961
25028
  }
24962
25029
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24963
25030
  disabledColor: textSecondary,
24964
- bgColor: surface2,
25031
+ bgColor: tooltipBackground,
24965
25032
  direction: 'top'
24966
- }, replyIconTooltipText || 'Reply'), replyIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null))), showReplyMessageInThread && replyMessagePermitted && (/*#__PURE__*/React__default.createElement(Action, {
25033
+ }, replyIconTooltipText || 'Reply', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), replyIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null))), showReplyMessageInThread && replyMessagePermitted && (/*#__PURE__*/React__default.createElement(Action, {
24967
25034
  order: replyInThreadIconOrder || 3,
24968
25035
  iconColor: messageActionIconsColor || iconInactive,
24969
25036
  hoverBackgroundColor: backgroundHovered,
@@ -24973,9 +25040,9 @@ function MessageActions(_ref) {
24973
25040
  }
24974
25041
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24975
25042
  disabledColor: textSecondary,
24976
- bgColor: surface2,
25043
+ bgColor: tooltipBackground,
24977
25044
  direction: 'top'
24978
- }, replyInThreadIconTooltipText || 'Reply in thread'), replyInThreadIcon || /*#__PURE__*/React__default.createElement(SvgReplyInThreadIcon, null))))), showCopyMessage && (/*#__PURE__*/React__default.createElement(Action, {
25045
+ }, replyInThreadIconTooltipText || 'Reply in thread', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), replyInThreadIcon || /*#__PURE__*/React__default.createElement(SvgReplyInThreadIcon, null))))), showCopyMessage && (/*#__PURE__*/React__default.createElement(Action, {
24979
25046
  order: copyIconOrder || 4,
24980
25047
  iconColor: messageActionIconsColor || iconInactive,
24981
25048
  hoverBackgroundColor: backgroundHovered,
@@ -24985,9 +25052,9 @@ function MessageActions(_ref) {
24985
25052
  }
24986
25053
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24987
25054
  disabledColor: textSecondary,
24988
- bgColor: surface2,
25055
+ bgColor: tooltipBackground,
24989
25056
  direction: 'top'
24990
- }, copyIconTooltipText || 'Copy'), copyIcon || /*#__PURE__*/React__default.createElement(SvgCopyIcon, null))), showForwardMessage && forwardMessagePermitted && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25057
+ }, copyIconTooltipText || 'Copy', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), copyIcon || /*#__PURE__*/React__default.createElement(SvgCopyIcon, null))), showForwardMessage && forwardMessagePermitted && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
24991
25058
  order: forwardIconOrder || 5,
24992
25059
  iconColor: messageActionIconsColor || iconInactive,
24993
25060
  hoverBackgroundColor: backgroundHovered,
@@ -24997,9 +25064,9 @@ function MessageActions(_ref) {
24997
25064
  }
24998
25065
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24999
25066
  disabledColor: textSecondary,
25000
- bgColor: surface2,
25067
+ bgColor: tooltipBackground,
25001
25068
  direction: 'top'
25002
- }, forwardIconTooltipText || 'Forward Message'), forwardIcon || /*#__PURE__*/React__default.createElement(SvgForward, null))), showSelectMessage && (/*#__PURE__*/React__default.createElement(Action, {
25069
+ }, forwardIconTooltipText || 'Forward Message', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), forwardIcon || /*#__PURE__*/React__default.createElement(SvgForward, null))), showSelectMessage && (/*#__PURE__*/React__default.createElement(Action, {
25003
25070
  order: selectIconOrder || 6,
25004
25071
  iconColor: messageActionIconsColor || iconInactive,
25005
25072
  hoverBackgroundColor: backgroundHovered,
@@ -25009,9 +25076,9 @@ function MessageActions(_ref) {
25009
25076
  }
25010
25077
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25011
25078
  disabledColor: textSecondary,
25012
- bgColor: surface2,
25079
+ bgColor: tooltipBackground,
25013
25080
  direction: 'top'
25014
- }, selectIconTooltipText || 'Select'), selectIcon || /*#__PURE__*/React__default.createElement(SvgCheckCircle, null))), showDeleteMessage && (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? myRole === 'owner' || myRole === 'admin' : true) && (/*#__PURE__*/React__default.createElement(Action, {
25081
+ }, selectIconTooltipText || 'Select', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), selectIcon || /*#__PURE__*/React__default.createElement(SvgCheckCircle, null))), showDeleteMessage && (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? myRole === 'owner' || myRole === 'admin' : true) && (/*#__PURE__*/React__default.createElement(Action, {
25015
25082
  order: deleteIconOrder || 7,
25016
25083
  iconColor: messageActionIconsColor || warningColor,
25017
25084
  hoverBackgroundColor: backgroundHovered,
@@ -25021,9 +25088,9 @@ function MessageActions(_ref) {
25021
25088
  }
25022
25089
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25023
25090
  disabledColor: textSecondary,
25024
- bgColor: surface2,
25091
+ bgColor: tooltipBackground,
25025
25092
  direction: 'top'
25026
- }, deleteIconTooltipText || 'Delete Message'), deleteIcon || /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null))), showReportMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25093
+ }, deleteIconTooltipText || 'Delete Message', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), deleteIcon || /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null))), showReportMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25027
25094
  order: reportIconOrder || 8,
25028
25095
  iconColor: messageActionIconsColor || iconInactive,
25029
25096
  hoverBackgroundColor: backgroundHovered,
@@ -25033,9 +25100,9 @@ function MessageActions(_ref) {
25033
25100
  }
25034
25101
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25035
25102
  disabledColor: textSecondary,
25036
- bgColor: surface2,
25103
+ bgColor: tooltipBackground,
25037
25104
  direction: 'top'
25038
- }, reportIconTooltipText || 'Report'), reportIcon || /*#__PURE__*/React__default.createElement(SvgReportIcon, null)))));
25105
+ }, reportIconTooltipText || 'Report', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), reportIcon || /*#__PURE__*/React__default.createElement(SvgReportIcon, null)))));
25039
25106
  }
25040
25107
  var MessageActionsWrapper = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", ";\n right: ", ";\n direction: ", ";\n top: -46px;\n padding: 0 0 8px;\n z-index: 90;\n"])), function (_ref2) {
25041
25108
  var isThreadMessage = _ref2.isThreadMessage,
@@ -25062,18 +25129,18 @@ var Action = styled.div(_templateObject3$h || (_templateObject3$h = _taggedTempl
25062
25129
  return props.hoverBackgroundColor;
25063
25130
  }, ItemNote);
25064
25131
 
25065
- var _rect$1, _path$R;
25066
- function _extends$S() {
25067
- return _extends$S = Object.assign ? Object.assign.bind() : function (n) {
25132
+ var _rect$1, _path$S;
25133
+ function _extends$T() {
25134
+ return _extends$T = Object.assign ? Object.assign.bind() : function (n) {
25068
25135
  for (var e = 1; e < arguments.length; e++) {
25069
25136
  var t = arguments[e];
25070
25137
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25071
25138
  }
25072
25139
  return n;
25073
- }, _extends$S.apply(null, arguments);
25140
+ }, _extends$T.apply(null, arguments);
25074
25141
  }
25075
25142
  function SvgFileIcon(props) {
25076
- return /*#__PURE__*/createElement$1("svg", _extends$S({
25143
+ return /*#__PURE__*/createElement$1("svg", _extends$T({
25077
25144
  width: 40,
25078
25145
  height: 40,
25079
25146
  viewBox: "0 0 40.01 40.01",
@@ -25084,24 +25151,24 @@ function SvgFileIcon(props) {
25084
25151
  height: 40,
25085
25152
  rx: 20,
25086
25153
  fill: "Transparent"
25087
- })), _path$R || (_path$R = /*#__PURE__*/createElement$1("path", {
25154
+ })), _path$S || (_path$S = /*#__PURE__*/createElement$1("path", {
25088
25155
  d: "M22.48 10.097c.298.068.56.177.819.338.258.162.468.332 1.015.88l3.372 3.37c.547.548.717.758.879 1.016.161.258.27.521.338.818.069.297.097.565.097 1.34v7.295c0 1.337-.14 1.822-.4 2.311a2.726 2.726 0 01-1.135 1.134c-.489.262-.974.401-2.31.401h-9.31c-1.337 0-1.821-.14-2.31-.4a2.726 2.726 0 01-1.134-1.135c-.262-.489-.401-.974-.401-2.31v-11.31c0-1.337.14-1.821.4-2.31a2.726 2.726 0 011.135-1.134c.489-.262.973-.401 2.31-.401h5.296c.775 0 1.043.028 1.34.097zm-.68 1.827a.3.3 0 00-.3.3V16a.5.5 0 00.5.5h3.776a.3.3 0 00.212-.512l-3.976-3.976a.3.3 0 00-.212-.088z",
25089
25156
  fill: "#fff"
25090
25157
  })));
25091
25158
  }
25092
25159
 
25093
- var _circle$2, _path$S;
25094
- function _extends$T() {
25095
- return _extends$T = Object.assign ? Object.assign.bind() : function (n) {
25160
+ var _circle$2, _path$T;
25161
+ function _extends$U() {
25162
+ return _extends$U = Object.assign ? Object.assign.bind() : function (n) {
25096
25163
  for (var e = 1; e < arguments.length; e++) {
25097
25164
  var t = arguments[e];
25098
25165
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25099
25166
  }
25100
25167
  return n;
25101
- }, _extends$T.apply(null, arguments);
25168
+ }, _extends$U.apply(null, arguments);
25102
25169
  }
25103
25170
  function SvgDeleteUpload(props) {
25104
- return /*#__PURE__*/createElement$1("svg", _extends$T({
25171
+ return /*#__PURE__*/createElement$1("svg", _extends$U({
25105
25172
  width: 20,
25106
25173
  height: 20,
25107
25174
  viewBox: "0 0 20.01 20.01",
@@ -25114,7 +25181,7 @@ function SvgDeleteUpload(props) {
25114
25181
  fill: "CurrentColor",
25115
25182
  stroke: "#fff",
25116
25183
  strokeWidth: 1.4
25117
- })), _path$S || (_path$S = /*#__PURE__*/createElement$1("path", {
25184
+ })), _path$T || (_path$T = /*#__PURE__*/createElement$1("path", {
25118
25185
  d: "M13.5 6.5l-7 7M6.5 6.5l7 7",
25119
25186
  stroke: "#fff",
25120
25187
  strokeWidth: 1.4,
@@ -25123,24 +25190,24 @@ function SvgDeleteUpload(props) {
25123
25190
  })));
25124
25191
  }
25125
25192
 
25126
- var _path$T;
25127
- function _extends$U() {
25128
- return _extends$U = Object.assign ? Object.assign.bind() : function (n) {
25193
+ var _path$U;
25194
+ function _extends$V() {
25195
+ return _extends$V = Object.assign ? Object.assign.bind() : function (n) {
25129
25196
  for (var e = 1; e < arguments.length; e++) {
25130
25197
  var t = arguments[e];
25131
25198
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25132
25199
  }
25133
25200
  return n;
25134
- }, _extends$U.apply(null, arguments);
25201
+ }, _extends$V.apply(null, arguments);
25135
25202
  }
25136
25203
  function SvgUpload(props) {
25137
- return /*#__PURE__*/createElement$1("svg", _extends$U({
25204
+ return /*#__PURE__*/createElement$1("svg", _extends$V({
25138
25205
  width: 32,
25139
25206
  height: 32,
25140
25207
  viewBox: "0 0 32.01 32.01",
25141
25208
  fill: "none",
25142
25209
  xmlns: "http://www.w3.org/2000/svg"
25143
- }, props), _path$T || (_path$T = /*#__PURE__*/createElement$1("path", {
25210
+ }, props), _path$U || (_path$U = /*#__PURE__*/createElement$1("path", {
25144
25211
  fillRule: "evenodd",
25145
25212
  clipRule: "evenodd",
25146
25213
  d: "M14.5 20.5a1.5 1.5 0 003 0V7.121l4.44 4.44a1.5 1.5 0 002.12-2.122l-7-7a1.5 1.5 0 00-2.12 0l-7 7a1.5 1.5 0 002.12 2.122l4.44-4.44V20.5zm-9 4.5a1.5 1.5 0 000 3h21a1.5 1.5 0 000-3h-21z",
@@ -25148,18 +25215,18 @@ function SvgUpload(props) {
25148
25215
  })));
25149
25216
  }
25150
25217
 
25151
- var _circle$3, _path$U;
25152
- function _extends$V() {
25153
- return _extends$V = Object.assign ? Object.assign.bind() : function (n) {
25218
+ var _circle$3, _path$V;
25219
+ function _extends$W() {
25220
+ return _extends$W = Object.assign ? Object.assign.bind() : function (n) {
25154
25221
  for (var e = 1; e < arguments.length; e++) {
25155
25222
  var t = arguments[e];
25156
25223
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25157
25224
  }
25158
25225
  return n;
25159
- }, _extends$V.apply(null, arguments);
25226
+ }, _extends$W.apply(null, arguments);
25160
25227
  }
25161
25228
  function SvgPlayVideo(props) {
25162
- return /*#__PURE__*/createElement$1("svg", _extends$V({
25229
+ return /*#__PURE__*/createElement$1("svg", _extends$W({
25163
25230
  width: 56,
25164
25231
  height: 56,
25165
25232
  fill: "none",
@@ -25170,7 +25237,7 @@ function SvgPlayVideo(props) {
25170
25237
  r: 28,
25171
25238
  fill: "#17191C",
25172
25239
  fillOpacity: 0.4
25173
- })), _path$U || (_path$U = /*#__PURE__*/createElement$1("path", {
25240
+ })), _path$V || (_path$V = /*#__PURE__*/createElement$1("path", {
25174
25241
  d: "M38.048 26.262c1.27.767 1.27 2.706 0 3.473l-13.224 7.996c-1.258.76-2.824-.202-2.824-1.737V20.003c0-1.535 1.566-2.498 2.824-1.737l13.224 7.996z",
25175
25242
  fill: "#fff"
25176
25243
  })));
@@ -25190,8 +25257,9 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
25190
25257
  isDetailsView = _ref.isDetailsView,
25191
25258
  setVideoIsReadyToSend = _ref.setVideoIsReadyToSend;
25192
25259
  var _useColor = useColors(),
25193
- textPrimary = _useColor.textPrimary,
25194
- border = _useColor.border;
25260
+ border = _useColor[THEME_COLORS.BORDER],
25261
+ overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2],
25262
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
25195
25263
  var _useState = useState(0),
25196
25264
  videoDuration = _useState[0],
25197
25265
  setVideoDuration = _useState[1];
@@ -25304,11 +25372,12 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
25304
25372
  React__default.createElement(VideoPlayButton, null, /*#__PURE__*/React__default.createElement(SvgPlayVideo, null))), /*#__PURE__*/React__default.createElement(VideoTime, {
25305
25373
  isDetailsView: isDetailsView,
25306
25374
  isRepliedMessage: isPreview || isRepliedMessage,
25307
- color: textPrimary
25375
+ color: textOnPrimary,
25376
+ messageTimeBackgroundColor: overlayBackground2
25308
25377
  }, !isRepliedMessage && !isPreview && /*#__PURE__*/React__default.createElement(SvgVideoCall, null), videoCurrentTime))));
25309
25378
  });
25310
25379
  var VideoControls = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
25311
- var VideoTime = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: ", ";\n bottom: ", ";\n left: ", ";\n font-size: ", ";\n display: flex;\n align-items: center;\n border-radius: 16px;\n padding: ", ";\n background-color: rgba(1, 1, 1, 0.3);\n line-height: 14px;\n color: ", ";\n\n & > svg {\n color: ", ";\n margin-right: 4px;\n }\n"])), function (props) {
25380
+ var VideoTime = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: ", ";\n bottom: ", ";\n left: ", ";\n font-size: ", ";\n display: flex;\n align-items: center;\n border-radius: 16px;\n padding: ", ";\n background-color: ", ";\n line-height: 14px;\n color: ", ";\n\n & > svg {\n color: ", ";\n margin-right: 4px;\n }\n"])), function (props) {
25312
25381
  return props.isRepliedMessage ? '3px' : props.isDetailsView ? undefined : '8px';
25313
25382
  }, function (props) {
25314
25383
  return props.isDetailsView ? '8px' : undefined;
@@ -25318,6 +25387,8 @@ var VideoTime = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTe
25318
25387
  return props.isRepliedMessage ? '10px' : '12px';
25319
25388
  }, function (props) {
25320
25389
  return props.isRepliedMessage ? '0 3px' : '4px 6px';
25390
+ }, function (props) {
25391
+ return props.messageTimeBackgroundColor + "40";
25321
25392
  }, function (props) {
25322
25393
  return props.color;
25323
25394
  }, function (props) {
@@ -25361,18 +25432,18 @@ var AttachmentImg = styled.img(_templateObject7$a || (_templateObject7$a = _tagg
25361
25432
  return props.borderRadius || '6px';
25362
25433
  });
25363
25434
 
25364
- var _circle$4, _path$V;
25365
- function _extends$W() {
25366
- return _extends$W = Object.assign ? Object.assign.bind() : function (n) {
25435
+ var _circle$4, _path$W;
25436
+ function _extends$X() {
25437
+ return _extends$X = Object.assign ? Object.assign.bind() : function (n) {
25367
25438
  for (var e = 1; e < arguments.length; e++) {
25368
25439
  var t = arguments[e];
25369
25440
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25370
25441
  }
25371
25442
  return n;
25372
- }, _extends$W.apply(null, arguments);
25443
+ }, _extends$X.apply(null, arguments);
25373
25444
  }
25374
25445
  function SvgPlay(props) {
25375
- return /*#__PURE__*/createElement$1("svg", _extends$W({
25446
+ return /*#__PURE__*/createElement$1("svg", _extends$X({
25376
25447
  width: 32,
25377
25448
  height: 32,
25378
25449
  viewBox: "0 0 33 33",
@@ -25383,24 +25454,24 @@ function SvgPlay(props) {
25383
25454
  cy: 16,
25384
25455
  r: 16,
25385
25456
  fill: "CurrentColor"
25386
- })), _path$V || (_path$V = /*#__PURE__*/createElement$1("path", {
25457
+ })), _path$W || (_path$W = /*#__PURE__*/createElement$1("path", {
25387
25458
  d: "M21.652 15.022c.714.432.714 1.522 0 1.954l-7.438 4.498c-.708.428-1.589-.114-1.589-.977v-8.995c0-.864.88-1.405 1.589-.977l7.438 4.497z",
25388
25459
  fill: "#fff"
25389
25460
  })));
25390
25461
  }
25391
25462
 
25392
- var _circle$5, _path$W;
25393
- function _extends$X() {
25394
- return _extends$X = Object.assign ? Object.assign.bind() : function (n) {
25463
+ var _circle$5, _path$X;
25464
+ function _extends$Y() {
25465
+ return _extends$Y = Object.assign ? Object.assign.bind() : function (n) {
25395
25466
  for (var e = 1; e < arguments.length; e++) {
25396
25467
  var t = arguments[e];
25397
25468
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25398
25469
  }
25399
25470
  return n;
25400
- }, _extends$X.apply(null, arguments);
25471
+ }, _extends$Y.apply(null, arguments);
25401
25472
  }
25402
25473
  function SvgPause(props) {
25403
- return /*#__PURE__*/createElement$1("svg", _extends$X({
25474
+ return /*#__PURE__*/createElement$1("svg", _extends$Y({
25404
25475
  width: 32,
25405
25476
  height: 32,
25406
25477
  viewBox: "0 0 33 33",
@@ -25411,7 +25482,7 @@ function SvgPause(props) {
25411
25482
  cy: 16,
25412
25483
  r: 16,
25413
25484
  fill: "CurrentColor"
25414
- })), _path$W || (_path$W = /*#__PURE__*/createElement$1("path", {
25485
+ })), _path$X || (_path$X = /*#__PURE__*/createElement$1("path", {
25415
25486
  d: "M13.721 10.375c.401 0 .547.042.694.12a.818.818 0 01.34.34c.078.147.12.293.12.694v8.942c0 .401-.042.547-.12.694a.818.818 0 01-.34.34c-.147.078-.293.12-.694.12h-1.067c-.401 0-.547-.042-.694-.12a.818.818 0 01-.34-.34c-.078-.147-.12-.293-.12-.694V11.53c0-.401.042-.547.12-.694a.818.818 0 01.34-.34c.147-.078.293-.12.694-.12h1.067zm5.625 0c.401 0 .547.042.694.12a.818.818 0 01.34.34c.078.147.12.293.12.694v8.942c0 .401-.042.547-.12.694a.818.818 0 01-.34.34c-.147.078-.293.12-.694.12H18.28c-.401 0-.547-.042-.694-.12a.818.818 0 01-.34-.34c-.078-.147-.12-.293-.12-.694V11.53c0-.401.042-.547.12-.694a.818.818 0 01.34-.34c.147-.078.293-.12.694-.12h1.067z",
25416
25487
  fill: "#fff"
25417
25488
  })));
@@ -27461,7 +27532,8 @@ var Attachment = function Attachment(_ref) {
27461
27532
  imageAttachmentMaxWidth = _ref.imageAttachmentMaxWidth,
27462
27533
  imageAttachmentMaxHeight = _ref.imageAttachmentMaxHeight,
27463
27534
  videoAttachmentMaxWidth = _ref.videoAttachmentMaxWidth,
27464
- videoAttachmentMaxHeight = _ref.videoAttachmentMaxHeight;
27535
+ videoAttachmentMaxHeight = _ref.videoAttachmentMaxHeight,
27536
+ messageType = _ref.messageType;
27465
27537
  var _useColor = useColors(),
27466
27538
  accentColor = _useColor[THEME_COLORS.ACCENT],
27467
27539
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -27548,7 +27620,7 @@ var Attachment = function Attachment(_ref) {
27548
27620
  if (downloadIsCancelled) {
27549
27621
  setDownloadIsCancelled(false);
27550
27622
  if (customDownloader) {
27551
- customDownloader(attachment.url, false).then(function (url) {
27623
+ customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
27552
27624
  downloadImage(url);
27553
27625
  });
27554
27626
  } else {
@@ -27618,7 +27690,7 @@ var Attachment = function Attachment(_ref) {
27618
27690
  loaded: progress.loaded || 0,
27619
27691
  total: progress.total || 0
27620
27692
  });
27621
- });
27693
+ }, messageType);
27622
27694
  };
27623
27695
  var handleDeleteSelectedAttachment = function handleDeleteSelectedAttachment(attachmentTid) {
27624
27696
  if (removeSelected) {
@@ -27640,7 +27712,7 @@ var Attachment = function Attachment(_ref) {
27640
27712
  total: progress.total || 0
27641
27713
  });
27642
27714
  setProgress(uploadPercent);
27643
- });
27715
+ }, messageType);
27644
27716
  setDownloadFilePromise(attachment.id, urlPromise);
27645
27717
  return Promise.resolve(urlPromise).then(function (result) {
27646
27718
  var url = URL.createObjectURL(result.Body);
@@ -27687,7 +27759,7 @@ var Attachment = function Attachment(_ref) {
27687
27759
  setIsCached(false);
27688
27760
  setDownloadingFile(true);
27689
27761
  if (customDownloader) {
27690
- customDownloader(attachment.url, false).then(function (url) {
27762
+ customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
27691
27763
  try {
27692
27764
  downloadImage(url);
27693
27765
  return Promise.resolve(fetch(url)).then(function (response) {
@@ -27731,7 +27803,7 @@ var Attachment = function Attachment(_ref) {
27731
27803
  log.info('error on get attachment url from cache. .. ', e);
27732
27804
  if (customDownloader) {
27733
27805
  setDownloadingFile(true);
27734
- customDownloader(attachment.url, false).then(function (url) {
27806
+ customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
27735
27807
  try {
27736
27808
  return Promise.resolve(fetch(url)).then(function (response) {
27737
27809
  setAttachmentToCache(attachment.url, response);
@@ -28198,7 +28270,8 @@ var RepliedMessage = function RepliedMessage(_ref) {
28198
28270
  imageAttachmentMaxWidth: imageAttachmentMaxWidth,
28199
28271
  imageAttachmentMaxHeight: imageAttachmentMaxHeight,
28200
28272
  videoAttachmentMaxWidth: videoAttachmentMaxWidth,
28201
- videoAttachmentMaxHeight: videoAttachmentMaxHeight
28273
+ videoAttachmentMaxHeight: videoAttachmentMaxHeight,
28274
+ messageType: message.type
28202
28275
  });
28203
28276
  }), /*#__PURE__*/React__default.createElement(ReplyMessageBody, {
28204
28277
  rtlDirection: ownMessageOnRightSide && !message.incoming,
@@ -28296,24 +28369,24 @@ var MessageHeaderCont = styled.div(_templateObject$w || (_templateObject$w = _ta
28296
28369
  return props.withPadding && (props.isForwarded ? '8px 0 2px 12px' : !props.isReplied && !props.messageBody ? props.withMediaAttachment ? '8px 0 8px 12px' : '8px 0 0 12px' : '8px 0 0 12px');
28297
28370
  });
28298
28371
 
28299
- var _path$X;
28300
- function _extends$Y() {
28301
- return _extends$Y = Object.assign ? Object.assign.bind() : function (n) {
28372
+ var _path$Y;
28373
+ function _extends$Z() {
28374
+ return _extends$Z = Object.assign ? Object.assign.bind() : function (n) {
28302
28375
  for (var e = 1; e < arguments.length; e++) {
28303
28376
  var t = arguments[e];
28304
28377
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28305
28378
  }
28306
28379
  return n;
28307
- }, _extends$Y.apply(null, arguments);
28380
+ }, _extends$Z.apply(null, arguments);
28308
28381
  }
28309
28382
  function SvgEmojiAnimalIcon(props) {
28310
- return /*#__PURE__*/createElement$1("svg", _extends$Y({
28383
+ return /*#__PURE__*/createElement$1("svg", _extends$Z({
28311
28384
  width: 20,
28312
28385
  height: 20,
28313
28386
  viewBox: "0 0 20.01 20.01",
28314
28387
  fill: "none",
28315
28388
  xmlns: "http://www.w3.org/2000/svg"
28316
- }, props), _path$X || (_path$X = /*#__PURE__*/createElement$1("path", {
28389
+ }, props), _path$Y || (_path$Y = /*#__PURE__*/createElement$1("path", {
28317
28390
  fillRule: "evenodd",
28318
28391
  clipRule: "evenodd",
28319
28392
  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",
@@ -28321,24 +28394,24 @@ function SvgEmojiAnimalIcon(props) {
28321
28394
  })));
28322
28395
  }
28323
28396
 
28324
- var _path$Y, _path2$5, _path3$2;
28325
- function _extends$Z() {
28326
- return _extends$Z = Object.assign ? Object.assign.bind() : function (n) {
28397
+ var _path$Z, _path2$5, _path3$2;
28398
+ function _extends$_() {
28399
+ return _extends$_ = Object.assign ? Object.assign.bind() : function (n) {
28327
28400
  for (var e = 1; e < arguments.length; e++) {
28328
28401
  var t = arguments[e];
28329
28402
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28330
28403
  }
28331
28404
  return n;
28332
- }, _extends$Z.apply(null, arguments);
28405
+ }, _extends$_.apply(null, arguments);
28333
28406
  }
28334
28407
  function SvgEmojiFoodIcon(props) {
28335
- return /*#__PURE__*/createElement$1("svg", _extends$Z({
28408
+ return /*#__PURE__*/createElement$1("svg", _extends$_({
28336
28409
  width: 20,
28337
28410
  height: 20,
28338
28411
  viewBox: "0 0 20.01 20.01",
28339
28412
  fill: "none",
28340
28413
  xmlns: "http://www.w3.org/2000/svg"
28341
- }, props), _path$Y || (_path$Y = /*#__PURE__*/createElement$1("path", {
28414
+ }, props), _path$Z || (_path$Z = /*#__PURE__*/createElement$1("path", {
28342
28415
  fillRule: "evenodd",
28343
28416
  clipRule: "evenodd",
28344
28417
  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",
@@ -28356,24 +28429,24 @@ function SvgEmojiFoodIcon(props) {
28356
28429
  })));
28357
28430
  }
28358
28431
 
28359
- var _path$Z;
28360
- function _extends$_() {
28361
- return _extends$_ = Object.assign ? Object.assign.bind() : function (n) {
28432
+ var _path$_;
28433
+ function _extends$$() {
28434
+ return _extends$$ = Object.assign ? Object.assign.bind() : function (n) {
28362
28435
  for (var e = 1; e < arguments.length; e++) {
28363
28436
  var t = arguments[e];
28364
28437
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28365
28438
  }
28366
28439
  return n;
28367
- }, _extends$_.apply(null, arguments);
28440
+ }, _extends$$.apply(null, arguments);
28368
28441
  }
28369
28442
  function SvgEmojiTravelIcon(props) {
28370
- return /*#__PURE__*/createElement$1("svg", _extends$_({
28443
+ return /*#__PURE__*/createElement$1("svg", _extends$$({
28371
28444
  width: 20,
28372
28445
  height: 20,
28373
28446
  viewBox: "0 0 20.01 20.01",
28374
28447
  fill: "none",
28375
28448
  xmlns: "http://www.w3.org/2000/svg"
28376
- }, props), _path$Z || (_path$Z = /*#__PURE__*/createElement$1("path", {
28449
+ }, props), _path$_ || (_path$_ = /*#__PURE__*/createElement$1("path", {
28377
28450
  fillRule: "evenodd",
28378
28451
  clipRule: "evenodd",
28379
28452
  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",
@@ -28382,17 +28455,17 @@ function SvgEmojiTravelIcon(props) {
28382
28455
  }
28383
28456
 
28384
28457
  var _g, _defs$1;
28385
- function _extends$$() {
28386
- return _extends$$ = Object.assign ? Object.assign.bind() : function (n) {
28458
+ function _extends$10() {
28459
+ return _extends$10 = Object.assign ? Object.assign.bind() : function (n) {
28387
28460
  for (var e = 1; e < arguments.length; e++) {
28388
28461
  var t = arguments[e];
28389
28462
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28390
28463
  }
28391
28464
  return n;
28392
- }, _extends$$.apply(null, arguments);
28465
+ }, _extends$10.apply(null, arguments);
28393
28466
  }
28394
28467
  function SvgEmojiObjectIcon(props) {
28395
- return /*#__PURE__*/createElement$1("svg", _extends$$({
28468
+ return /*#__PURE__*/createElement$1("svg", _extends$10({
28396
28469
  width: 20,
28397
28470
  height: 20,
28398
28471
  viewBox: "0 0 20.01 20.01",
@@ -28413,24 +28486,24 @@ function SvgEmojiObjectIcon(props) {
28413
28486
  })))));
28414
28487
  }
28415
28488
 
28416
- var _path$_;
28417
- function _extends$10() {
28418
- return _extends$10 = Object.assign ? Object.assign.bind() : function (n) {
28489
+ var _path$$;
28490
+ function _extends$11() {
28491
+ return _extends$11 = Object.assign ? Object.assign.bind() : function (n) {
28419
28492
  for (var e = 1; e < arguments.length; e++) {
28420
28493
  var t = arguments[e];
28421
28494
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28422
28495
  }
28423
28496
  return n;
28424
- }, _extends$10.apply(null, arguments);
28497
+ }, _extends$11.apply(null, arguments);
28425
28498
  }
28426
28499
  function SvgEmojiSymbolsIcon(props) {
28427
- return /*#__PURE__*/createElement$1("svg", _extends$10({
28500
+ return /*#__PURE__*/createElement$1("svg", _extends$11({
28428
28501
  width: 20,
28429
28502
  height: 20,
28430
28503
  viewBox: "0 0 20.01 20.01",
28431
28504
  fill: "none",
28432
28505
  xmlns: "http://www.w3.org/2000/svg"
28433
- }, props), _path$_ || (_path$_ = /*#__PURE__*/createElement$1("path", {
28506
+ }, props), _path$$ || (_path$$ = /*#__PURE__*/createElement$1("path", {
28434
28507
  fillRule: "evenodd",
28435
28508
  clipRule: "evenodd",
28436
28509
  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",
@@ -28438,24 +28511,24 @@ function SvgEmojiSymbolsIcon(props) {
28438
28511
  })));
28439
28512
  }
28440
28513
 
28441
- var _path$$;
28442
- function _extends$11() {
28443
- return _extends$11 = Object.assign ? Object.assign.bind() : function (n) {
28514
+ var _path$10;
28515
+ function _extends$12() {
28516
+ return _extends$12 = Object.assign ? Object.assign.bind() : function (n) {
28444
28517
  for (var e = 1; e < arguments.length; e++) {
28445
28518
  var t = arguments[e];
28446
28519
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28447
28520
  }
28448
28521
  return n;
28449
- }, _extends$11.apply(null, arguments);
28522
+ }, _extends$12.apply(null, arguments);
28450
28523
  }
28451
28524
  function SvgEmojiFlagicon(props) {
28452
- return /*#__PURE__*/createElement$1("svg", _extends$11({
28525
+ return /*#__PURE__*/createElement$1("svg", _extends$12({
28453
28526
  width: 20,
28454
28527
  height: 20,
28455
28528
  viewBox: "0 0 20.01 20.01",
28456
28529
  fill: "none",
28457
28530
  xmlns: "http://www.w3.org/2000/svg"
28458
- }, props), _path$$ || (_path$$ = /*#__PURE__*/createElement$1("path", {
28531
+ }, props), _path$10 || (_path$10 = /*#__PURE__*/createElement$1("path", {
28459
28532
  fillRule: "evenodd",
28460
28533
  clipRule: "evenodd",
28461
28534
  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",
@@ -28951,24 +29024,24 @@ var Emoji = styled.li(_templateObject8$b || (_templateObject8$b = _taggedTemplat
28951
29024
  return props.hoverBackgroundColor;
28952
29025
  });
28953
29026
 
28954
- var _path$10;
28955
- function _extends$12() {
28956
- return _extends$12 = Object.assign ? Object.assign.bind() : function (n) {
29027
+ var _path$11;
29028
+ function _extends$13() {
29029
+ return _extends$13 = Object.assign ? Object.assign.bind() : function (n) {
28957
29030
  for (var e = 1; e < arguments.length; e++) {
28958
29031
  var t = arguments[e];
28959
29032
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28960
29033
  }
28961
29034
  return n;
28962
- }, _extends$12.apply(null, arguments);
29035
+ }, _extends$13.apply(null, arguments);
28963
29036
  }
28964
29037
  function SvgPlus(props) {
28965
- return /*#__PURE__*/createElement$1("svg", _extends$12({
29038
+ return /*#__PURE__*/createElement$1("svg", _extends$13({
28966
29039
  width: 20,
28967
29040
  height: 20,
28968
29041
  viewBox: "0 0 20.01 20.01",
28969
29042
  fill: "none",
28970
29043
  xmlns: "http://www.w3.org/2000/svg"
28971
- }, props), _path$10 || (_path$10 = /*#__PURE__*/createElement$1("path", {
29044
+ }, props), _path$11 || (_path$11 = /*#__PURE__*/createElement$1("path", {
28972
29045
  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",
28973
29046
  fill: "currentColor"
28974
29047
  })));
@@ -29148,7 +29221,8 @@ var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
29148
29221
  accentColor = _useColor[THEME_COLORS.ACCENT],
29149
29222
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
29150
29223
  iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
29151
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
29224
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
29225
+ overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2];
29152
29226
  return /*#__PURE__*/React__default.createElement(MessageStatusAndTimeContainer, {
29153
29227
  lineHeight: messageStatusAndTimeLineHeight,
29154
29228
  showOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -29160,7 +29234,8 @@ var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
29160
29234
  bottomOfMessage: bottomOfMessage,
29161
29235
  marginBottom: marginBottom,
29162
29236
  className: 'message_status_time',
29163
- messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
29237
+ messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary,
29238
+ messageTimeBackgroundColor: overlayBackground2
29164
29239
  }, message.state === MESSAGE_STATUS.EDIT ? (/*#__PURE__*/React__default.createElement(MessageStatusUpdated, {
29165
29240
  color: messageStateColor || textSecondary,
29166
29241
  fontSize: messageStateFontSize
@@ -29198,7 +29273,7 @@ var MessageStatusAndTimeContainer = styled.span(_templateObject3$o || (_template
29198
29273
  }, function (props) {
29199
29274
  return props.withAttachment && '4px 6px';
29200
29275
  }, function (props) {
29201
- return props.withAttachment && !props.fileAttachment && 'rgba(1, 1, 1, 0.3)';
29276
+ return props.withAttachment && !props.fileAttachment && props.messageTimeBackgroundColor + "40";
29202
29277
  }, function (props) {
29203
29278
  return props.lineHeight || '14px';
29204
29279
  }, function (props) {
@@ -29214,7 +29289,7 @@ var MessageStatusAndTimeContainer = styled.span(_templateObject3$o || (_template
29214
29289
  }, function (props) {
29215
29290
  return props.bottomOfMessage && props.rtlDirection && 'flex-end';
29216
29291
  }, HiddenMessageTime, function (props) {
29217
- return props.fileAttachment ? props.statusColor : props.withAttachment ? props.messageTimeColorOnAttachment : '';
29292
+ return props.withAttachment ? props.messageTimeColorOnAttachment : '';
29218
29293
  }, function (props) {
29219
29294
  return props.withAttachment && "\n position: absolute;\n z-index: 3;\n right: " + (props.fileAttachment ? '6px' : '10px') + ";\n bottom: " + (props.fileAttachment ? '9px' : '14px') + ";\n ";
29220
29295
  });
@@ -29617,7 +29692,8 @@ var MessageBody = function MessageBody(_ref) {
29617
29692
  imageAttachmentMaxWidth: imageAttachmentMaxWidth,
29618
29693
  imageAttachmentMaxHeight: imageAttachmentMaxHeight,
29619
29694
  videoAttachmentMaxWidth: videoAttachmentMaxWidth,
29620
- videoAttachmentMaxHeight: videoAttachmentMaxHeight
29695
+ videoAttachmentMaxHeight: videoAttachmentMaxHeight,
29696
+ messageType: message.type
29621
29697
  });
29622
29698
  }), emojisPopupOpen && emojisPopupPosition && (/*#__PURE__*/React__default.createElement(EmojiContainer, {
29623
29699
  id: message.id + "_emoji_popup_container",
@@ -30298,7 +30374,7 @@ var Message$1 = function Message(_ref) {
30298
30374
  handleDeletePendingMessage: handleDeletePendingMessage,
30299
30375
  handleCreateChat: handleCreateChat,
30300
30376
  messageTextRef: messageTextRef,
30301
- messageTimeColorOnAttachment: messageTimeColorOnAttachment
30377
+ messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
30302
30378
  })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
30303
30379
  message: message,
30304
30380
  showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -32153,24 +32229,24 @@ var MemberName$2 = styled.h3(_templateObject5$k || (_templateObject5$k = _tagged
32153
32229
  return props.color;
32154
32230
  });
32155
32231
 
32156
- var _path$11;
32157
- function _extends$13() {
32158
- return _extends$13 = Object.assign ? Object.assign.bind() : function (n) {
32232
+ var _path$12;
32233
+ function _extends$14() {
32234
+ return _extends$14 = Object.assign ? Object.assign.bind() : function (n) {
32159
32235
  for (var e = 1; e < arguments.length; e++) {
32160
32236
  var t = arguments[e];
32161
32237
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32162
32238
  }
32163
32239
  return n;
32164
- }, _extends$13.apply(null, arguments);
32240
+ }, _extends$14.apply(null, arguments);
32165
32241
  }
32166
32242
  function SvgBold(props) {
32167
- return /*#__PURE__*/createElement$1("svg", _extends$13({
32243
+ return /*#__PURE__*/createElement$1("svg", _extends$14({
32168
32244
  width: 18,
32169
32245
  height: 18,
32170
32246
  viewBox: "0 0 18.01 18.01",
32171
32247
  fill: "none",
32172
32248
  xmlns: "http://www.w3.org/2000/svg"
32173
- }, props), _path$11 || (_path$11 = /*#__PURE__*/createElement$1("path", {
32249
+ }, props), _path$12 || (_path$12 = /*#__PURE__*/createElement$1("path", {
32174
32250
  fillRule: "evenodd",
32175
32251
  clipRule: "evenodd",
32176
32252
  d: "M6.35 3.029A1.1 1.1 0 005 4.1v10a1.1 1.1 0 001.35 1.072c.08.018.164.028.25.028h3.429c1.998 0 3.671-1.583 3.671-3.6a3.566 3.566 0 00-1.596-2.969c.38-.588.596-1.294.596-2.031 0-1.904-1.444-3.6-3.408-3.6H6.6c-.086 0-.17.01-.25.029zm3.41 7.138a3.318 3.318 0 01-.468.033H7.2V13h2.829c.842 0 1.471-.656 1.471-1.4 0-.744-.63-1.4-1.471-1.4a1.1 1.1 0 01-.268-.033zM7.2 8h2.092c.586 0 1.208-.542 1.208-1.4 0-.858-.622-1.4-1.208-1.4H7.2V8z",
@@ -32178,24 +32254,24 @@ function SvgBold(props) {
32178
32254
  })));
32179
32255
  }
32180
32256
 
32181
- var _path$12;
32182
- function _extends$14() {
32183
- return _extends$14 = Object.assign ? Object.assign.bind() : function (n) {
32257
+ var _path$13;
32258
+ function _extends$15() {
32259
+ return _extends$15 = Object.assign ? Object.assign.bind() : function (n) {
32184
32260
  for (var e = 1; e < arguments.length; e++) {
32185
32261
  var t = arguments[e];
32186
32262
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32187
32263
  }
32188
32264
  return n;
32189
- }, _extends$14.apply(null, arguments);
32265
+ }, _extends$15.apply(null, arguments);
32190
32266
  }
32191
32267
  function SvgItalic(props) {
32192
- return /*#__PURE__*/createElement$1("svg", _extends$14({
32268
+ return /*#__PURE__*/createElement$1("svg", _extends$15({
32193
32269
  width: 18,
32194
32270
  height: 18,
32195
32271
  viewBox: "0 0 18.01 18.01",
32196
32272
  fill: "none",
32197
32273
  xmlns: "http://www.w3.org/2000/svg"
32198
- }, props), _path$12 || (_path$12 = /*#__PURE__*/createElement$1("path", {
32274
+ }, props), _path$13 || (_path$13 = /*#__PURE__*/createElement$1("path", {
32199
32275
  fillRule: "evenodd",
32200
32276
  clipRule: "evenodd",
32201
32277
  d: "M9.984 3.2H8a.8.8 0 000 1.6h1.024l-1.68 8.4H6a.8.8 0 100 1.6h4a.8.8 0 000-1.6H8.976l1.68-8.4H12a.8.8 0 000-1.6H9.984z",
@@ -32204,17 +32280,17 @@ function SvgItalic(props) {
32204
32280
  }
32205
32281
 
32206
32282
  var _g$1;
32207
- function _extends$15() {
32208
- return _extends$15 = Object.assign ? Object.assign.bind() : function (n) {
32283
+ function _extends$16() {
32284
+ return _extends$16 = Object.assign ? Object.assign.bind() : function (n) {
32209
32285
  for (var e = 1; e < arguments.length; e++) {
32210
32286
  var t = arguments[e];
32211
32287
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32212
32288
  }
32213
32289
  return n;
32214
- }, _extends$15.apply(null, arguments);
32290
+ }, _extends$16.apply(null, arguments);
32215
32291
  }
32216
32292
  function SvgStrikethrough(props) {
32217
- return /*#__PURE__*/createElement$1("svg", _extends$15({
32293
+ return /*#__PURE__*/createElement$1("svg", _extends$16({
32218
32294
  width: 18,
32219
32295
  height: 18,
32220
32296
  viewBox: "0 0 18.01 18.01",
@@ -32231,41 +32307,41 @@ function SvgStrikethrough(props) {
32231
32307
  }))));
32232
32308
  }
32233
32309
 
32234
- var _path$13;
32235
- function _extends$16() {
32236
- return _extends$16 = Object.assign ? Object.assign.bind() : function (n) {
32310
+ var _path$14;
32311
+ function _extends$17() {
32312
+ return _extends$17 = Object.assign ? Object.assign.bind() : function (n) {
32237
32313
  for (var e = 1; e < arguments.length; e++) {
32238
32314
  var t = arguments[e];
32239
32315
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32240
32316
  }
32241
32317
  return n;
32242
- }, _extends$16.apply(null, arguments);
32318
+ }, _extends$17.apply(null, arguments);
32243
32319
  }
32244
32320
  function SvgMono(props) {
32245
- return /*#__PURE__*/createElement$1("svg", _extends$16({
32321
+ return /*#__PURE__*/createElement$1("svg", _extends$17({
32246
32322
  width: 18,
32247
32323
  height: 18,
32248
32324
  viewBox: "0 0 18.01 18.01",
32249
32325
  fill: "none",
32250
32326
  xmlns: "http://www.w3.org/2000/svg"
32251
- }, props), _path$13 || (_path$13 = /*#__PURE__*/createElement$1("path", {
32327
+ }, props), _path$14 || (_path$14 = /*#__PURE__*/createElement$1("path", {
32252
32328
  d: "M4.98 14.753A.826.826 0 014.37 15a.882.882 0 01-.624-.247.882.882 0 01-.247-.624V3.87c0-.24.082-.444.247-.608A.853.853 0 014.37 3c.581 0 1.003.258 1.266.773l3.238 6.28c0 .01.006.015.017.015.01 0 .016-.005.016-.016l3.222-6.247c.274-.537.712-.805 1.315-.805.252 0 .466.088.641.263a.873.873 0 01.263.641v10.192a.873.873 0 01-.263.641.872.872 0 01-.64.263.873.873 0 01-.642-.263.873.873 0 01-.263-.641V6.14c0-.011-.005-.017-.016-.017s-.017.006-.017.017l-2.433 4.833c-.252.493-.646.74-1.183.74s-.932-.247-1.184-.74L5.275 6.14c0-.011-.005-.017-.016-.017s-.017.006-.017.017v7.989c0 .24-.087.45-.263.624z",
32253
32329
  fill: "CurrentColor"
32254
32330
  })));
32255
32331
  }
32256
32332
 
32257
32333
  var _g$2;
32258
- function _extends$17() {
32259
- return _extends$17 = Object.assign ? Object.assign.bind() : function (n) {
32334
+ function _extends$18() {
32335
+ return _extends$18 = Object.assign ? Object.assign.bind() : function (n) {
32260
32336
  for (var e = 1; e < arguments.length; e++) {
32261
32337
  var t = arguments[e];
32262
32338
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32263
32339
  }
32264
32340
  return n;
32265
- }, _extends$17.apply(null, arguments);
32341
+ }, _extends$18.apply(null, arguments);
32266
32342
  }
32267
32343
  function SvgUnderline(props) {
32268
- return /*#__PURE__*/createElement$1("svg", _extends$17({
32344
+ return /*#__PURE__*/createElement$1("svg", _extends$18({
32269
32345
  width: 18,
32270
32346
  height: 18,
32271
32347
  viewBox: "0 0 18.01 18.01",
@@ -32359,9 +32435,9 @@ function TextFormatFloatingToolbar(_ref) {
32359
32435
  var _useColor = useColors(),
32360
32436
  accentColor = _useColor[THEME_COLORS.ACCENT],
32361
32437
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
32362
- surface2 = _useColor[THEME_COLORS.SURFACE_2],
32363
32438
  backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
32364
- surface1 = _useColor[THEME_COLORS.SURFACE_1];
32439
+ surface1 = _useColor[THEME_COLORS.SURFACE_1],
32440
+ tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
32365
32441
  var popupCharStylesEditorRef = useRef(null);
32366
32442
  function mouseMoveListener(e) {
32367
32443
  if (popupCharStylesEditorRef !== null && popupCharStylesEditorRef !== void 0 && popupCharStylesEditorRef.current && (e.buttons === 1 || e.buttons === 3)) {
@@ -32456,9 +32532,9 @@ function TextFormatFloatingToolbar(_ref) {
32456
32532
  isActive: isBold
32457
32533
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32458
32534
  disabledColor: textSecondary,
32459
- bgColor: surface2,
32535
+ bgColor: tooltipBackground,
32460
32536
  direction: 'top'
32461
- }, "Bold"), /*#__PURE__*/React__default.createElement(SvgBold, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32537
+ }, "Bold", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgBold, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32462
32538
  iconColor: textSecondary,
32463
32539
  hoverBackgroundColor: surface1,
32464
32540
  hoverIconColor: accentColor,
@@ -32470,9 +32546,9 @@ function TextFormatFloatingToolbar(_ref) {
32470
32546
  "aria-label": 'Format text as italics'
32471
32547
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32472
32548
  disabledColor: textSecondary,
32473
- bgColor: surface2,
32549
+ bgColor: tooltipBackground,
32474
32550
  direction: 'top'
32475
- }, "Italic"), /*#__PURE__*/React__default.createElement(SvgItalic, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32551
+ }, "Italic", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgItalic, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32476
32552
  iconColor: textSecondary,
32477
32553
  hoverBackgroundColor: surface1,
32478
32554
  hoverIconColor: accentColor,
@@ -32484,9 +32560,9 @@ function TextFormatFloatingToolbar(_ref) {
32484
32560
  "aria-label": 'Format text with a strikethrough'
32485
32561
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32486
32562
  disabledColor: textSecondary,
32487
- bgColor: surface2,
32563
+ bgColor: tooltipBackground,
32488
32564
  direction: 'top'
32489
- }, ' ', "Strikethrough", ' '), /*#__PURE__*/React__default.createElement(SvgStrikethrough, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32565
+ }, "Strikethrough ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgStrikethrough, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32490
32566
  type: 'button',
32491
32567
  iconColor: textSecondary,
32492
32568
  hoverBackgroundColor: surface1,
@@ -32498,9 +32574,9 @@ function TextFormatFloatingToolbar(_ref) {
32498
32574
  "aria-label": 'Insert code block'
32499
32575
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32500
32576
  disabledColor: textSecondary,
32501
- bgColor: surface2,
32577
+ bgColor: tooltipBackground,
32502
32578
  direction: 'top'
32503
- }, "Monospace"), /*#__PURE__*/React__default.createElement(SvgMono, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32579
+ }, "Monospace ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgMono, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32504
32580
  type: 'button',
32505
32581
  iconColor: textSecondary,
32506
32582
  hoverBackgroundColor: surface1,
@@ -32512,9 +32588,9 @@ function TextFormatFloatingToolbar(_ref) {
32512
32588
  "aria-label": 'Insert code block'
32513
32589
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32514
32590
  disabledColor: textSecondary,
32515
- bgColor: surface2,
32591
+ bgColor: tooltipBackground,
32516
32592
  direction: 'top'
32517
- }, "Underline"), /*#__PURE__*/React__default.createElement(SvgUnderline, null)))));
32593
+ }, "Underline ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgUnderline, null)))));
32518
32594
  }
32519
32595
  function useFloatingTextFormatToolbar(editor, anchorElem) {
32520
32596
  var _useState = useState(false),
@@ -33227,18 +33303,18 @@ var Emoji$1 = styled.li(_templateObject8$e || (_templateObject8$e = _taggedTempl
33227
33303
 
33228
33304
  var CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
33229
33305
 
33230
- var _circle$6, _path$14;
33231
- function _extends$18() {
33232
- return _extends$18 = Object.assign ? Object.assign.bind() : function (n) {
33306
+ var _circle$6, _path$15;
33307
+ function _extends$19() {
33308
+ return _extends$19 = Object.assign ? Object.assign.bind() : function (n) {
33233
33309
  for (var e = 1; e < arguments.length; e++) {
33234
33310
  var t = arguments[e];
33235
33311
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33236
33312
  }
33237
33313
  return n;
33238
- }, _extends$18.apply(null, arguments);
33314
+ }, _extends$19.apply(null, arguments);
33239
33315
  }
33240
33316
  function SvgSend(props) {
33241
- return /*#__PURE__*/createElement$1("svg", _extends$18({
33317
+ return /*#__PURE__*/createElement$1("svg", _extends$19({
33242
33318
  width: 32,
33243
33319
  height: 32,
33244
33320
  fill: "none",
@@ -33248,142 +33324,142 @@ function SvgSend(props) {
33248
33324
  cy: 16,
33249
33325
  r: 16,
33250
33326
  fill: "currentColor"
33251
- })), _path$14 || (_path$14 = /*#__PURE__*/createElement$1("path", {
33327
+ })), _path$15 || (_path$15 = /*#__PURE__*/createElement$1("path", {
33252
33328
  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",
33253
33329
  fill: "#fff"
33254
33330
  })));
33255
33331
  }
33256
33332
 
33257
- var _path$15;
33258
- function _extends$19() {
33259
- return _extends$19 = Object.assign ? Object.assign.bind() : function (n) {
33333
+ var _path$16;
33334
+ function _extends$1a() {
33335
+ return _extends$1a = Object.assign ? Object.assign.bind() : function (n) {
33260
33336
  for (var e = 1; e < arguments.length; e++) {
33261
33337
  var t = arguments[e];
33262
33338
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33263
33339
  }
33264
33340
  return n;
33265
- }, _extends$19.apply(null, arguments);
33341
+ }, _extends$1a.apply(null, arguments);
33266
33342
  }
33267
33343
  function SvgEye(props) {
33268
- return /*#__PURE__*/createElement$1("svg", _extends$19({
33344
+ return /*#__PURE__*/createElement$1("svg", _extends$1a({
33269
33345
  width: 25,
33270
33346
  height: 24,
33271
33347
  fill: "none",
33272
33348
  xmlns: "http://www.w3.org/2000/svg"
33273
- }, props), _path$15 || (_path$15 = /*#__PURE__*/createElement$1("path", {
33349
+ }, props), _path$16 || (_path$16 = /*#__PURE__*/createElement$1("path", {
33274
33350
  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",
33275
33351
  fill: "CurrentColor"
33276
33352
  })));
33277
33353
  }
33278
33354
 
33279
- var _path$16;
33280
- function _extends$1a() {
33281
- return _extends$1a = Object.assign ? Object.assign.bind() : function (n) {
33355
+ var _path$17;
33356
+ function _extends$1b() {
33357
+ return _extends$1b = Object.assign ? Object.assign.bind() : function (n) {
33282
33358
  for (var e = 1; e < arguments.length; e++) {
33283
33359
  var t = arguments[e];
33284
33360
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33285
33361
  }
33286
33362
  return n;
33287
- }, _extends$1a.apply(null, arguments);
33363
+ }, _extends$1b.apply(null, arguments);
33288
33364
  }
33289
33365
  function SvgAddAttachment(props) {
33290
- return /*#__PURE__*/createElement$1("svg", _extends$1a({
33366
+ return /*#__PURE__*/createElement$1("svg", _extends$1b({
33291
33367
  width: 24,
33292
33368
  height: 24,
33293
33369
  viewBox: "0 0 24.01 24.01",
33294
33370
  fill: "none",
33295
33371
  xmlns: "http://www.w3.org/2000/svg"
33296
- }, props), _path$16 || (_path$16 = /*#__PURE__*/createElement$1("path", {
33372
+ }, props), _path$17 || (_path$17 = /*#__PURE__*/createElement$1("path", {
33297
33373
  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",
33298
33374
  fill: "CurrentColor"
33299
33375
  })));
33300
33376
  }
33301
33377
 
33302
- var _path$17;
33303
- function _extends$1b() {
33304
- return _extends$1b = Object.assign ? Object.assign.bind() : function (n) {
33378
+ var _path$18;
33379
+ function _extends$1c() {
33380
+ return _extends$1c = Object.assign ? Object.assign.bind() : function (n) {
33305
33381
  for (var e = 1; e < arguments.length; e++) {
33306
33382
  var t = arguments[e];
33307
33383
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33308
33384
  }
33309
33385
  return n;
33310
- }, _extends$1b.apply(null, arguments);
33386
+ }, _extends$1c.apply(null, arguments);
33311
33387
  }
33312
33388
  function SvgErrorCircle(props) {
33313
- return /*#__PURE__*/createElement$1("svg", _extends$1b({
33389
+ return /*#__PURE__*/createElement$1("svg", _extends$1c({
33314
33390
  width: 25,
33315
33391
  height: 24,
33316
33392
  fill: "none",
33317
33393
  xmlns: "http://www.w3.org/2000/svg"
33318
- }, props), _path$17 || (_path$17 = /*#__PURE__*/createElement$1("path", {
33394
+ }, props), _path$18 || (_path$18 = /*#__PURE__*/createElement$1("path", {
33319
33395
  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",
33320
33396
  fill: "#FFB73D"
33321
33397
  })));
33322
33398
  }
33323
33399
 
33324
- var _path$18;
33325
- function _extends$1c() {
33326
- return _extends$1c = Object.assign ? Object.assign.bind() : function (n) {
33400
+ var _path$19;
33401
+ function _extends$1d() {
33402
+ return _extends$1d = Object.assign ? Object.assign.bind() : function (n) {
33327
33403
  for (var e = 1; e < arguments.length; e++) {
33328
33404
  var t = arguments[e];
33329
33405
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33330
33406
  }
33331
33407
  return n;
33332
- }, _extends$1c.apply(null, arguments);
33408
+ }, _extends$1d.apply(null, arguments);
33333
33409
  }
33334
33410
  function SvgPlayRecord(props) {
33335
- return /*#__PURE__*/createElement$1("svg", _extends$1c({
33411
+ return /*#__PURE__*/createElement$1("svg", _extends$1d({
33336
33412
  width: 20,
33337
33413
  height: 20,
33338
33414
  viewBox: "0 0 20.01 20.01",
33339
33415
  fill: "none",
33340
33416
  xmlns: "http://www.w3.org/2000/svg"
33341
- }, props), _path$18 || (_path$18 = /*#__PURE__*/createElement$1("path", {
33417
+ }, props), _path$19 || (_path$19 = /*#__PURE__*/createElement$1("path", {
33342
33418
  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",
33343
33419
  fill: "CurrentColor"
33344
33420
  })));
33345
33421
  }
33346
33422
 
33347
- var _path$19;
33348
- function _extends$1d() {
33349
- return _extends$1d = Object.assign ? Object.assign.bind() : function (n) {
33423
+ var _path$1a;
33424
+ function _extends$1e() {
33425
+ return _extends$1e = Object.assign ? Object.assign.bind() : function (n) {
33350
33426
  for (var e = 1; e < arguments.length; e++) {
33351
33427
  var t = arguments[e];
33352
33428
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33353
33429
  }
33354
33430
  return n;
33355
- }, _extends$1d.apply(null, arguments);
33431
+ }, _extends$1e.apply(null, arguments);
33356
33432
  }
33357
33433
  function SvgPauseRecord(props) {
33358
- return /*#__PURE__*/createElement$1("svg", _extends$1d({
33434
+ return /*#__PURE__*/createElement$1("svg", _extends$1e({
33359
33435
  width: 20,
33360
33436
  height: 20,
33361
33437
  viewBox: "0 0 20.01 20.01",
33362
33438
  fill: "none",
33363
33439
  xmlns: "http://www.w3.org/2000/svg"
33364
- }, props), _path$19 || (_path$19 = /*#__PURE__*/createElement$1("path", {
33440
+ }, props), _path$1a || (_path$1a = /*#__PURE__*/createElement$1("path", {
33365
33441
  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",
33366
33442
  fill: "CurrentColor"
33367
33443
  })));
33368
33444
  }
33369
33445
 
33370
- var _path$1a;
33371
- function _extends$1e() {
33372
- return _extends$1e = Object.assign ? Object.assign.bind() : function (n) {
33446
+ var _path$1b;
33447
+ function _extends$1f() {
33448
+ return _extends$1f = Object.assign ? Object.assign.bind() : function (n) {
33373
33449
  for (var e = 1; e < arguments.length; e++) {
33374
33450
  var t = arguments[e];
33375
33451
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33376
33452
  }
33377
33453
  return n;
33378
- }, _extends$1e.apply(null, arguments);
33454
+ }, _extends$1f.apply(null, arguments);
33379
33455
  }
33380
33456
  function SvgStopRecord(props) {
33381
- return /*#__PURE__*/createElement$1("svg", _extends$1e({
33457
+ return /*#__PURE__*/createElement$1("svg", _extends$1f({
33382
33458
  width: 20,
33383
33459
  height: 20,
33384
33460
  fill: "none",
33385
33461
  xmlns: "http://www.w3.org/2000/svg"
33386
- }, props), _path$1a || (_path$1a = /*#__PURE__*/createElement$1("path", {
33462
+ }, props), _path$1b || (_path$1b = /*#__PURE__*/createElement$1("path", {
33387
33463
  fillRule: "evenodd",
33388
33464
  clipRule: "evenodd",
33389
33465
  d: "M4.421 5.441c-.254.5-.254 1.153-.254 2.46v4.2c0 1.306 0 1.96.254 2.459.224.439.581.796 1.02 1.02.5.254 1.153.254 2.46.254h4.2c1.306 0 1.96 0 2.459-.255.439-.223.796-.58 1.02-1.02.254-.498.254-1.152.254-2.459V7.9c0-1.306 0-1.96-.255-2.459a2.333 2.333 0 00-1.02-1.02c-.498-.254-1.152-.254-2.459-.254H7.9c-1.306 0-1.96 0-2.459.254-.439.224-.796.581-1.02 1.02z",
@@ -33391,18 +33467,18 @@ function SvgStopRecord(props) {
33391
33467
  })));
33392
33468
  }
33393
33469
 
33394
- var _circle$7, _path$1b, _path2$6;
33395
- function _extends$1f() {
33396
- return _extends$1f = Object.assign ? Object.assign.bind() : function (n) {
33470
+ var _circle$7, _path$1c, _path2$6;
33471
+ function _extends$1g() {
33472
+ return _extends$1g = Object.assign ? Object.assign.bind() : function (n) {
33397
33473
  for (var e = 1; e < arguments.length; e++) {
33398
33474
  var t = arguments[e];
33399
33475
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33400
33476
  }
33401
33477
  return n;
33402
- }, _extends$1f.apply(null, arguments);
33478
+ }, _extends$1g.apply(null, arguments);
33403
33479
  }
33404
33480
  function SvgRecordButton(props) {
33405
- return /*#__PURE__*/createElement$1("svg", _extends$1f({
33481
+ return /*#__PURE__*/createElement$1("svg", _extends$1g({
33406
33482
  width: 32,
33407
33483
  height: 32,
33408
33484
  viewBox: "0 0 32.01 32.01",
@@ -33413,7 +33489,7 @@ function SvgRecordButton(props) {
33413
33489
  cy: 16,
33414
33490
  r: 16,
33415
33491
  fill: "CurrentColor"
33416
- })), _path$1b || (_path$1b = /*#__PURE__*/createElement$1("path", {
33492
+ })), _path$1c || (_path$1c = /*#__PURE__*/createElement$1("path", {
33417
33493
  d: "M12.875 10.375a3.125 3.125 0 116.25 0v5a3.125 3.125 0 11-6.25 0v-5zM15.219 22.406a.781.781 0 111.562 0v1.563a.781.781 0 11-1.562 0v-1.563zM23.5 14.906a.781.781 0 11-1.563 0 .781.781 0 011.563 0zM10.063 14.906a.781.781 0 11-1.563 0 .781.781 0 011.563 0z",
33418
33494
  fill: "#fff"
33419
33495
  })), _path2$6 || (_path2$6 = /*#__PURE__*/createElement$1("path", {
@@ -34045,7 +34121,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34045
34121
  backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
34046
34122
  background = _useColor[THEME_COLORS.BACKGROUND],
34047
34123
  textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
34048
- highlightedBackground = _useColor[THEME_COLORS.HIGHLIGHTED_BACKGROUND];
34124
+ highlightedBackground = _useColor[THEME_COLORS.HIGHLIGHTED_BACKGROUND],
34125
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
34049
34126
  var dispatch = useDispatch();
34050
34127
  var ChatClient = getClient();
34051
34128
  var user = ChatClient.user;
@@ -35267,7 +35344,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
35267
35344
  isRepliedMessage: true
35268
35345
  })) : messageForReply.attachments[0].type === attachmentTypes.file && (/*#__PURE__*/React__default.createElement(ReplyIconWrapper, {
35269
35346
  backgroundColor: accentColor,
35270
- iconColor: textPrimary
35347
+ iconColor: textOnPrimary
35271
35348
  }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, null, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
35272
35349
  color: accentColor
35273
35350
  }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), " Reply to", /*#__PURE__*/React__default.createElement(UserName$1, null, user.id === messageForReply.user.id ? user.firstName ? user.firstName + " " + user.lastName : user.id : makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? 'Voice' : messageForReply.attachments[0].type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Photo')) : messageForReply.attachments[0].type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'Video')) : (/*#__PURE__*/React__default.createElement(TextInOneLine, null, messageForReply.body || 'File')) : MessageTextFormat({
@@ -35596,23 +35673,23 @@ var CloseIconWrapper = styled.span(_templateObject34$1 || (_templateObject34$1 =
35596
35673
  return props.color;
35597
35674
  });
35598
35675
 
35599
- var _path$1c;
35600
- function _extends$1g() {
35601
- return _extends$1g = Object.assign ? Object.assign.bind() : function (n) {
35676
+ var _path$1d;
35677
+ function _extends$1h() {
35678
+ return _extends$1h = Object.assign ? Object.assign.bind() : function (n) {
35602
35679
  for (var e = 1; e < arguments.length; e++) {
35603
35680
  var t = arguments[e];
35604
35681
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35605
35682
  }
35606
35683
  return n;
35607
- }, _extends$1g.apply(null, arguments);
35684
+ }, _extends$1h.apply(null, arguments);
35608
35685
  }
35609
35686
  function SvgBottom(props) {
35610
- return /*#__PURE__*/createElement$1("svg", _extends$1g({
35687
+ return /*#__PURE__*/createElement$1("svg", _extends$1h({
35611
35688
  width: 12,
35612
35689
  height: 7,
35613
35690
  fill: "none",
35614
35691
  xmlns: "http://www.w3.org/2000/svg"
35615
- }, props), _path$1c || (_path$1c = /*#__PURE__*/createElement$1("path", {
35692
+ }, props), _path$1d || (_path$1d = /*#__PURE__*/createElement$1("path", {
35616
35693
  d: "M1.5 1.5l4.5 4 4.5-4",
35617
35694
  stroke: "#676A7C",
35618
35695
  strokeWidth: 1.4,
@@ -35621,24 +35698,24 @@ function SvgBottom(props) {
35621
35698
  })));
35622
35699
  }
35623
35700
 
35624
- var _path$1d, _path2$7;
35625
- function _extends$1h() {
35626
- return _extends$1h = Object.assign ? Object.assign.bind() : function (n) {
35701
+ var _path$1e, _path2$7;
35702
+ function _extends$1i() {
35703
+ return _extends$1i = Object.assign ? Object.assign.bind() : function (n) {
35627
35704
  for (var e = 1; e < arguments.length; e++) {
35628
35705
  var t = arguments[e];
35629
35706
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35630
35707
  }
35631
35708
  return n;
35632
- }, _extends$1h.apply(null, arguments);
35709
+ }, _extends$1i.apply(null, arguments);
35633
35710
  }
35634
35711
  function SvgMarkAsUnRead(props) {
35635
- return /*#__PURE__*/createElement$1("svg", _extends$1h({
35712
+ return /*#__PURE__*/createElement$1("svg", _extends$1i({
35636
35713
  width: 20,
35637
35714
  height: 20,
35638
35715
  viewBox: "0 0 20.01 20.01",
35639
35716
  fill: "none",
35640
35717
  xmlns: "http://www.w3.org/2000/svg"
35641
- }, props), _path$1d || (_path$1d = /*#__PURE__*/createElement$1("path", {
35718
+ }, props), _path$1e || (_path$1e = /*#__PURE__*/createElement$1("path", {
35642
35719
  d: "M18.25 7.189v3.843c0 .673 0 1.224-.037 1.671-.037.464-.118.882-.317 1.273a3.25 3.25 0 01-1.42 1.42c-.391.2-.81.28-1.273.318-.447.036-.998.036-1.671.036h-2.129c-.55 0-.72.004-.878.036a1.752 1.752 0 00-.444.156c-.143.073-.279.177-.708.52l-2.01 1.608c-.154.124-.307.246-.441.335-.129.085-.366.228-.67.228-.356 0-.692-.16-.914-.438-.19-.239-.226-.513-.24-.667-.015-.16-.015-.356-.015-.554v-1.228c-.358-.01-.655-.034-.924-.107a3.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-.881.317-1.272a3.25 3.25 0 011.42-1.42c.391-.2.81-.28 1.273-.318.448-.037.998-.037 1.672-.037h6.342c-.19.464-.3.97-.31 1.5h-6c-.713 0-1.203 0-1.582.032-.37.03-.57.086-.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.088.059 1.286a1.75 1.75 0 001.237 1.238c.199.053.463.06 1.286.06a.75.75 0 01.75.75v1.772L8.49 15.25c.355-.284.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-.031.37-.03.57-.086.713-.16a1.75 1.75 0 00.765-.764c.074-.144.13-.343.16-.714.03-.38.031-.868.031-1.58V7.498c.53-.01 1.036-.12 1.5-.31z",
35643
35720
  fill: "currentColor"
35644
35721
  })), _path2$7 || (_path2$7 = /*#__PURE__*/createElement$1("path", {
@@ -35647,24 +35724,24 @@ function SvgMarkAsUnRead(props) {
35647
35724
  })));
35648
35725
  }
35649
35726
 
35650
- var _path$1e;
35651
- function _extends$1i() {
35652
- return _extends$1i = Object.assign ? Object.assign.bind() : function (n) {
35727
+ var _path$1f;
35728
+ function _extends$1j() {
35729
+ return _extends$1j = Object.assign ? Object.assign.bind() : function (n) {
35653
35730
  for (var e = 1; e < arguments.length; e++) {
35654
35731
  var t = arguments[e];
35655
35732
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35656
35733
  }
35657
35734
  return n;
35658
- }, _extends$1i.apply(null, arguments);
35735
+ }, _extends$1j.apply(null, arguments);
35659
35736
  }
35660
35737
  function SvgMarkAsRead(props) {
35661
- return /*#__PURE__*/createElement$1("svg", _extends$1i({
35738
+ return /*#__PURE__*/createElement$1("svg", _extends$1j({
35662
35739
  width: 20,
35663
35740
  height: 20,
35664
35741
  viewBox: "0 0 20.01 20.01",
35665
35742
  fill: "none",
35666
35743
  xmlns: "http://www.w3.org/2000/svg"
35667
- }, props), _path$1e || (_path$1e = /*#__PURE__*/createElement$1("path", {
35744
+ }, props), _path$1f || (_path$1f = /*#__PURE__*/createElement$1("path", {
35668
35745
  fillRule: "evenodd",
35669
35746
  clipRule: "evenodd",
35670
35747
  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",
@@ -35672,23 +35749,23 @@ function SvgMarkAsRead(props) {
35672
35749
  })));
35673
35750
  }
35674
35751
 
35675
- var _path$1f;
35676
- function _extends$1j() {
35677
- return _extends$1j = Object.assign ? Object.assign.bind() : function (n) {
35752
+ var _path$1g;
35753
+ function _extends$1k() {
35754
+ return _extends$1k = Object.assign ? Object.assign.bind() : function (n) {
35678
35755
  for (var e = 1; e < arguments.length; e++) {
35679
35756
  var t = arguments[e];
35680
35757
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35681
35758
  }
35682
35759
  return n;
35683
- }, _extends$1j.apply(null, arguments);
35760
+ }, _extends$1k.apply(null, arguments);
35684
35761
  }
35685
35762
  function SvgClear(props) {
35686
- return /*#__PURE__*/createElement$1("svg", _extends$1j({
35763
+ return /*#__PURE__*/createElement$1("svg", _extends$1k({
35687
35764
  width: 20,
35688
35765
  height: 21,
35689
35766
  fill: "none",
35690
35767
  xmlns: "http://www.w3.org/2000/svg"
35691
- }, props), _path$1f || (_path$1f = /*#__PURE__*/createElement$1("path", {
35768
+ }, props), _path$1g || (_path$1g = /*#__PURE__*/createElement$1("path", {
35692
35769
  fillRule: "evenodd",
35693
35770
  clipRule: "evenodd",
35694
35771
  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",
@@ -35696,46 +35773,46 @@ function SvgClear(props) {
35696
35773
  })));
35697
35774
  }
35698
35775
 
35699
- var _path$1g;
35700
- function _extends$1k() {
35701
- return _extends$1k = Object.assign ? Object.assign.bind() : function (n) {
35776
+ var _path$1h;
35777
+ function _extends$1l() {
35778
+ return _extends$1l = Object.assign ? Object.assign.bind() : function (n) {
35702
35779
  for (var e = 1; e < arguments.length; e++) {
35703
35780
  var t = arguments[e];
35704
35781
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35705
35782
  }
35706
35783
  return n;
35707
- }, _extends$1k.apply(null, arguments);
35784
+ }, _extends$1l.apply(null, arguments);
35708
35785
  }
35709
35786
  function SvgBlockChannel(props) {
35710
- return /*#__PURE__*/createElement$1("svg", _extends$1k({
35787
+ return /*#__PURE__*/createElement$1("svg", _extends$1l({
35711
35788
  width: 20,
35712
35789
  height: 21,
35713
35790
  viewBox: "0 0 20.01 21.01",
35714
35791
  fill: "none",
35715
35792
  xmlns: "http://www.w3.org/2000/svg"
35716
- }, props), _path$1g || (_path$1g = /*#__PURE__*/createElement$1("path", {
35793
+ }, props), _path$1h || (_path$1h = /*#__PURE__*/createElement$1("path", {
35717
35794
  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",
35718
35795
  fill: "CurrentColor"
35719
35796
  })));
35720
35797
  }
35721
35798
 
35722
- var _path$1h, _path2$8;
35723
- function _extends$1l() {
35724
- return _extends$1l = Object.assign ? Object.assign.bind() : function (n) {
35799
+ var _path$1i, _path2$8;
35800
+ function _extends$1m() {
35801
+ return _extends$1m = Object.assign ? Object.assign.bind() : function (n) {
35725
35802
  for (var e = 1; e < arguments.length; e++) {
35726
35803
  var t = arguments[e];
35727
35804
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35728
35805
  }
35729
35806
  return n;
35730
- }, _extends$1l.apply(null, arguments);
35807
+ }, _extends$1m.apply(null, arguments);
35731
35808
  }
35732
35809
  function SvgReport(props) {
35733
- return /*#__PURE__*/createElement$1("svg", _extends$1l({
35810
+ return /*#__PURE__*/createElement$1("svg", _extends$1m({
35734
35811
  width: 20,
35735
35812
  height: 21,
35736
35813
  fill: "none",
35737
35814
  xmlns: "http://www.w3.org/2000/svg"
35738
- }, props), _path$1h || (_path$1h = /*#__PURE__*/createElement$1("path", {
35815
+ }, props), _path$1i || (_path$1i = /*#__PURE__*/createElement$1("path", {
35739
35816
  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",
35740
35817
  fill: "CurrentColor"
35741
35818
  })), _path2$8 || (_path2$8 = /*#__PURE__*/createElement$1("path", {
@@ -35746,46 +35823,46 @@ function SvgReport(props) {
35746
35823
  })));
35747
35824
  }
35748
35825
 
35749
- var _path$1i;
35750
- function _extends$1m() {
35751
- return _extends$1m = Object.assign ? Object.assign.bind() : function (n) {
35826
+ var _path$1j;
35827
+ function _extends$1n() {
35828
+ return _extends$1n = Object.assign ? Object.assign.bind() : function (n) {
35752
35829
  for (var e = 1; e < arguments.length; e++) {
35753
35830
  var t = arguments[e];
35754
35831
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35755
35832
  }
35756
35833
  return n;
35757
- }, _extends$1m.apply(null, arguments);
35834
+ }, _extends$1n.apply(null, arguments);
35758
35835
  }
35759
35836
  function SvgStar(props) {
35760
- return /*#__PURE__*/createElement$1("svg", _extends$1m({
35837
+ return /*#__PURE__*/createElement$1("svg", _extends$1n({
35761
35838
  width: 20,
35762
35839
  height: 20,
35763
35840
  fill: "none",
35764
35841
  xmlns: "http://www.w3.org/2000/svg"
35765
- }, props), _path$1i || (_path$1i = /*#__PURE__*/createElement$1("path", {
35842
+ }, props), _path$1j || (_path$1j = /*#__PURE__*/createElement$1("path", {
35766
35843
  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",
35767
35844
  fill: "#B2B6BE"
35768
35845
  })));
35769
35846
  }
35770
35847
 
35771
- var _path$1j;
35772
- function _extends$1n() {
35773
- return _extends$1n = Object.assign ? Object.assign.bind() : function (n) {
35848
+ var _path$1k;
35849
+ function _extends$1o() {
35850
+ return _extends$1o = Object.assign ? Object.assign.bind() : function (n) {
35774
35851
  for (var e = 1; e < arguments.length; e++) {
35775
35852
  var t = arguments[e];
35776
35853
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35777
35854
  }
35778
35855
  return n;
35779
- }, _extends$1n.apply(null, arguments);
35856
+ }, _extends$1o.apply(null, arguments);
35780
35857
  }
35781
35858
  function SvgUnpin(props) {
35782
- return /*#__PURE__*/createElement$1("svg", _extends$1n({
35859
+ return /*#__PURE__*/createElement$1("svg", _extends$1o({
35783
35860
  width: 20,
35784
35861
  height: 21,
35785
35862
  viewBox: "0 0 20.01 21.01",
35786
35863
  fill: "none",
35787
35864
  xmlns: "http://www.w3.org/2000/svg"
35788
- }, props), _path$1j || (_path$1j = /*#__PURE__*/createElement$1("path", {
35865
+ }, props), _path$1k || (_path$1k = /*#__PURE__*/createElement$1("path", {
35789
35866
  d: "M8.74 6.616l1.09 1.089 2.995 2.996 1.09 1.088 3.557 3.559a.77.77 0 01-1.09 1.09l-3.365-3.366-.306 3.982a1.059 1.059 0 01-1.805.667l-3.504-3.504-4.356 4.356c-.726.726-1.816-.363-1.09-1.089l4.357-4.356L2.81 9.624a1.059 1.059 0 01.667-1.805l3.982-.306L4.06 4.115a.77.77 0 011.09-1.09l3.59 3.591zm1.634-1.634l.32-.32a.385.385 0 00.106-.197l.34-1.699a.77.77 0 011.3-.394l5.717 5.718a.77.77 0 01-.393 1.3l-1.7.34a.385.385 0 00-.196.105l-.32.32a.77.77 0 01-1.09-1.089l.32-.32c.27-.269.612-.452.985-.526l.288-.058-3.683-3.683-.058.288a1.926 1.926 0 01-.526.984l-.32.32a.77.77 0 11-1.09-1.089zM8.701 8.755a1.925 1.925 0 01-.849.272l-3.214.247 6.617 6.618.248-3.214c.023-.303.117-.593.272-.849L8.7 8.755z",
35790
35867
  fill: "CurrentColor"
35791
35868
  })));
@@ -36291,18 +36368,18 @@ var ActionItem = styled.li(_templateObject16$3 || (_templateObject16$3 = _tagged
36291
36368
  return props.hoverColor;
36292
36369
  });
36293
36370
 
36294
- var _rect$2, _rect2, _path$1k;
36295
- function _extends$1o() {
36296
- return _extends$1o = Object.assign ? Object.assign.bind() : function (n) {
36371
+ var _rect$2, _rect2, _path$1l;
36372
+ function _extends$1p() {
36373
+ return _extends$1p = Object.assign ? Object.assign.bind() : function (n) {
36297
36374
  for (var e = 1; e < arguments.length; e++) {
36298
36375
  var t = arguments[e];
36299
36376
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36300
36377
  }
36301
36378
  return n;
36302
- }, _extends$1o.apply(null, arguments);
36379
+ }, _extends$1p.apply(null, arguments);
36303
36380
  }
36304
36381
  function SvgAddMember(props) {
36305
- return /*#__PURE__*/createElement$1("svg", _extends$1o({
36382
+ return /*#__PURE__*/createElement$1("svg", _extends$1p({
36306
36383
  width: 40,
36307
36384
  height: 40,
36308
36385
  viewBox: "0 0 40.01 40.01",
@@ -36322,29 +36399,29 @@ function SvgAddMember(props) {
36322
36399
  stroke: "#000",
36323
36400
  strokeOpacity: 0.08,
36324
36401
  strokeWidth: 0.5
36325
- })), _path$1k || (_path$1k = /*#__PURE__*/createElement$1("path", {
36402
+ })), _path$1l || (_path$1l = /*#__PURE__*/createElement$1("path", {
36326
36403
  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",
36327
36404
  fill: "CurrentColor"
36328
36405
  })));
36329
36406
  }
36330
36407
 
36331
- var _path$1l;
36332
- function _extends$1p() {
36333
- return _extends$1p = Object.assign ? Object.assign.bind() : function (n) {
36408
+ var _path$1m;
36409
+ function _extends$1q() {
36410
+ return _extends$1q = Object.assign ? Object.assign.bind() : function (n) {
36334
36411
  for (var e = 1; e < arguments.length; e++) {
36335
36412
  var t = arguments[e];
36336
36413
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36337
36414
  }
36338
36415
  return n;
36339
- }, _extends$1p.apply(null, arguments);
36416
+ }, _extends$1q.apply(null, arguments);
36340
36417
  }
36341
36418
  function SvgMoreVert(props) {
36342
- return /*#__PURE__*/createElement$1("svg", _extends$1p({
36419
+ return /*#__PURE__*/createElement$1("svg", _extends$1q({
36343
36420
  width: 4,
36344
36421
  height: 14,
36345
36422
  fill: "none",
36346
36423
  xmlns: "http://www.w3.org/2000/svg"
36347
- }, props), _path$1l || (_path$1l = /*#__PURE__*/createElement$1("path", {
36424
+ }, props), _path$1m || (_path$1m = /*#__PURE__*/createElement$1("path", {
36348
36425
  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",
36349
36426
  fill: "#9B9DA8"
36350
36427
  })));
@@ -36837,18 +36914,18 @@ var Media = function Media(_ref) {
36837
36914
  var Container$n = styled.div(_templateObject$M || (_templateObject$M = _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"])));
36838
36915
  var MediaItem = styled.div(_templateObject2$H || (_templateObject2$H = _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"])));
36839
36916
 
36840
- var _rect$3, _path$1m;
36841
- function _extends$1q() {
36842
- return _extends$1q = Object.assign ? Object.assign.bind() : function (n) {
36917
+ var _rect$3, _path$1n;
36918
+ function _extends$1r() {
36919
+ return _extends$1r = Object.assign ? Object.assign.bind() : function (n) {
36843
36920
  for (var e = 1; e < arguments.length; e++) {
36844
36921
  var t = arguments[e];
36845
36922
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36846
36923
  }
36847
36924
  return n;
36848
- }, _extends$1q.apply(null, arguments);
36925
+ }, _extends$1r.apply(null, arguments);
36849
36926
  }
36850
36927
  function SvgFileIcon$1(props) {
36851
- return /*#__PURE__*/createElement$1("svg", _extends$1q({
36928
+ return /*#__PURE__*/createElement$1("svg", _extends$1r({
36852
36929
  width: 40,
36853
36930
  height: 40,
36854
36931
  fill: "none",
@@ -36860,7 +36937,7 @@ function SvgFileIcon$1(props) {
36860
36937
  rx: 8,
36861
36938
  fill: "currentColor",
36862
36939
  fillOpacity: 0.2
36863
- })), _path$1m || (_path$1m = /*#__PURE__*/createElement$1("path", {
36940
+ })), _path$1n || (_path$1n = /*#__PURE__*/createElement$1("path", {
36864
36941
  fillRule: "evenodd",
36865
36942
  clipRule: "evenodd",
36866
36943
  d: "M18.022 9.714c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.94-.687 1.864-.687 3.962v7.386c0 2.098.184 3.023.687 3.962a4.686 4.686 0 001.944 1.944c.938.502 1.864.687 3.962.687h3.957c2.098 0 3.023-.185 3.962-.687a4.686 4.686 0 001.944-1.944c.502-.939.687-1.864.687-3.962v-5.1c0-.683-.024-.99-.105-1.34a3.097 3.097 0 00-.399-.964c-.19-.305-.391-.539-.874-1.022l-4.175-4.175c-.483-.483-.717-.683-1.022-.874a3.095 3.095 0 00-.964-.399c-.293-.068-.556-.095-1.033-.103v-.002h-1.978zm0 1.715c-2.002 0-2.587.181-3.154.484a2.971 2.971 0 00-1.24 1.24c-.304.567-.485 1.153-.485 3.154v7.386c0 2.001.181 2.587.484 3.153.288.538.704.954 1.241 1.241.566.303 1.152.485 3.154.485h3.957c2.001 0 2.587-.182 3.153-.485a2.971 2.971 0 001.241-1.24c.303-.567.484-1.153.484-3.154v-5.1c0-.117 0-.219-.002-.308h-4.712A2.143 2.143 0 0120 16.144l.001-4.712-.15-.002h-1.83zm3.784.875l-.092-.091v3.93c0 .21.152.385.352.422l.077.006 3.932.002-.093-.093-4.176-4.176zm-6.092 12.839c0-.474.384-.857.858-.857H20A.857.857 0 1120 26h-3.428a.857.857 0 01-.858-.857zm.858-4.286a.857.857 0 000 1.715h6a.857.857 0 000-1.715h-6z",
@@ -36868,23 +36945,23 @@ function SvgFileIcon$1(props) {
36868
36945
  })));
36869
36946
  }
36870
36947
 
36871
- var _path$1n;
36872
- function _extends$1r() {
36873
- return _extends$1r = Object.assign ? Object.assign.bind() : function (n) {
36948
+ var _path$1o;
36949
+ function _extends$1s() {
36950
+ return _extends$1s = Object.assign ? Object.assign.bind() : function (n) {
36874
36951
  for (var e = 1; e < arguments.length; e++) {
36875
36952
  var t = arguments[e];
36876
36953
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36877
36954
  }
36878
36955
  return n;
36879
- }, _extends$1r.apply(null, arguments);
36956
+ }, _extends$1s.apply(null, arguments);
36880
36957
  }
36881
36958
  function SvgDownloadFile(props) {
36882
- return /*#__PURE__*/createElement$1("svg", _extends$1r({
36959
+ return /*#__PURE__*/createElement$1("svg", _extends$1s({
36883
36960
  width: 24,
36884
36961
  height: 24,
36885
36962
  xmlns: "http://www.w3.org/2000/svg",
36886
36963
  fill: "currentColor"
36887
- }, props), _path$1n || (_path$1n = /*#__PURE__*/createElement$1("path", {
36964
+ }, props), _path$1o || (_path$1o = /*#__PURE__*/createElement$1("path", {
36888
36965
  fillRule: "evenodd",
36889
36966
  clipRule: "evenodd",
36890
36967
  d: "M12 2a.91.91 0 01.91.91v11.44l2.993-2.993a.91.91 0 011.285 1.286l-4.545 4.545a.91.91 0 01-1.286 0l-4.545-4.545a.909.909 0 111.285-1.286l2.994 2.994V2.909A.91.91 0 0112 2zM2.91 15.636a.91.91 0 01.908.91v1.136a2.5 2.5 0 002.5 2.5h11.364a2.5 2.5 0 002.5-2.5v-1.136a.91.91 0 111.818 0v1.136A4.318 4.318 0 0117.682 22H6.318A4.318 4.318 0 012 17.682v-1.136a.91.91 0 01.91-.91z"
@@ -37039,18 +37116,18 @@ var FileSizeAndDate = styled.span(_templateObject8$i || (_templateObject8$i = _t
37039
37116
  return props.color;
37040
37117
  });
37041
37118
 
37042
- var _rect$4, _path$1o;
37043
- function _extends$1s() {
37044
- return _extends$1s = Object.assign ? Object.assign.bind() : function (n) {
37119
+ var _rect$4, _path$1p;
37120
+ function _extends$1t() {
37121
+ return _extends$1t = Object.assign ? Object.assign.bind() : function (n) {
37045
37122
  for (var e = 1; e < arguments.length; e++) {
37046
37123
  var t = arguments[e];
37047
37124
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37048
37125
  }
37049
37126
  return n;
37050
- }, _extends$1s.apply(null, arguments);
37127
+ }, _extends$1t.apply(null, arguments);
37051
37128
  }
37052
37129
  function SvgLinkIcon(props) {
37053
- return /*#__PURE__*/createElement$1("svg", _extends$1s({
37130
+ return /*#__PURE__*/createElement$1("svg", _extends$1t({
37054
37131
  width: 40,
37055
37132
  height: 40,
37056
37133
  fill: "none",
@@ -37062,7 +37139,7 @@ function SvgLinkIcon(props) {
37062
37139
  rx: 8,
37063
37140
  fill: "currentColor",
37064
37141
  fillOpacity: 0.2
37065
- })), _path$1o || (_path$1o = /*#__PURE__*/createElement$1("path", {
37142
+ })), _path$1p || (_path$1p = /*#__PURE__*/createElement$1("path", {
37066
37143
  fillRule: "evenodd",
37067
37144
  clipRule: "evenodd",
37068
37145
  d: "M21.547 11.524a4.9 4.9 0 016.928 6.929l-.01.011-4 4a4.9 4.9 0 01-6.93 0 .9.9 0 011.273-1.273 3.1 3.1 0 004.384 0l3.994-3.994a3.1 3.1 0 00-4.384-4.383l-1.094 1.094a.9.9 0 01-1.272-1.273l1.1-1.1.01-.01zm-6.011 6.011a4.9 4.9 0 016.928 0 .9.9 0 11-1.272 1.273 3.1 3.1 0 00-4.384 0l-4 4-.01.011a3.1 3.1 0 104.383 4.384l.01-.012 1.103-1.1a.9.9 0 111.272 1.272l-1.097 1.096a4.9 4.9 0 11-6.928-6.929l3.995-3.995z",
@@ -37146,18 +37223,18 @@ var Links = function Links(_ref) {
37146
37223
  };
37147
37224
  var Container$p = styled.ul(_templateObject$P || (_templateObject$P = _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"])));
37148
37225
 
37149
- var _rect$5, _path$1p;
37150
- function _extends$1t() {
37151
- return _extends$1t = Object.assign ? Object.assign.bind() : function (n) {
37226
+ var _rect$5, _path$1q;
37227
+ function _extends$1u() {
37228
+ return _extends$1u = Object.assign ? Object.assign.bind() : function (n) {
37152
37229
  for (var e = 1; e < arguments.length; e++) {
37153
37230
  var t = arguments[e];
37154
37231
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37155
37232
  }
37156
37233
  return n;
37157
- }, _extends$1t.apply(null, arguments);
37234
+ }, _extends$1u.apply(null, arguments);
37158
37235
  }
37159
37236
  function SvgVoicePreview(props) {
37160
- return /*#__PURE__*/createElement$1("svg", _extends$1t({
37237
+ return /*#__PURE__*/createElement$1("svg", _extends$1u({
37161
37238
  width: 40,
37162
37239
  height: 40,
37163
37240
  fill: "none",
@@ -37167,24 +37244,24 @@ function SvgVoicePreview(props) {
37167
37244
  height: 40,
37168
37245
  rx: 20,
37169
37246
  fill: "#5159F6"
37170
- })), _path$1p || (_path$1p = /*#__PURE__*/createElement$1("path", {
37247
+ })), _path$1q || (_path$1q = /*#__PURE__*/createElement$1("path", {
37171
37248
  d: "M27.536 18.696c.952.576.952 2.03 0 2.605l-9.918 5.997c-.944.57-2.118-.151-2.118-1.303V14.002c0-1.151 1.174-1.873 2.118-1.303l9.918 5.997z",
37172
37249
  fill: "#fff"
37173
37250
  })));
37174
37251
  }
37175
37252
 
37176
- var _rect$6, _path$1q;
37177
- function _extends$1u() {
37178
- return _extends$1u = Object.assign ? Object.assign.bind() : function (n) {
37253
+ var _rect$6, _path$1r;
37254
+ function _extends$1v() {
37255
+ return _extends$1v = Object.assign ? Object.assign.bind() : function (n) {
37179
37256
  for (var e = 1; e < arguments.length; e++) {
37180
37257
  var t = arguments[e];
37181
37258
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37182
37259
  }
37183
37260
  return n;
37184
- }, _extends$1u.apply(null, arguments);
37261
+ }, _extends$1v.apply(null, arguments);
37185
37262
  }
37186
37263
  function SvgVoicePreviewPause(props) {
37187
- return /*#__PURE__*/createElement$1("svg", _extends$1u({
37264
+ return /*#__PURE__*/createElement$1("svg", _extends$1v({
37188
37265
  width: 40,
37189
37266
  height: 40,
37190
37267
  fill: "none",
@@ -37194,7 +37271,7 @@ function SvgVoicePreviewPause(props) {
37194
37271
  height: 40,
37195
37272
  rx: 20,
37196
37273
  fill: "#5159F6"
37197
- })), _path$1q || (_path$1q = /*#__PURE__*/createElement$1("path", {
37274
+ })), _path$1r || (_path$1r = /*#__PURE__*/createElement$1("path", {
37198
37275
  d: "M16.962 12.5c.535 0 .729.056.924.16.196.105.35.258.454.454.104.195.16.39.16.924v11.924c0 .535-.056.729-.16.924a1.09 1.09 0 01-.454.454c-.195.104-.39.16-.924.16h-1.424c-.535 0-.729-.056-.924-.16a1.09 1.09 0 01-.454-.454c-.104-.195-.16-.39-.16-.924V14.038c0-.535.056-.729.16-.924a1.09 1.09 0 01.454-.454c.195-.104.39-.16.924-.16h1.424zm7.5 0c.535 0 .729.056.924.16.196.105.35.258.454.454.104.195.16.39.16.924v11.924c0 .535-.056.729-.16.924a1.09 1.09 0 01-.454.454c-.195.104-.39.16-.924.16h-1.424c-.535 0-.729-.056-.924-.16a1.09 1.09 0 01-.454-.454c-.104-.195-.16-.39-.16-.924V14.038c0-.535.056-.729.16-.924a1.09 1.09 0 01.454-.454c.195-.104.39-.16.924-.16h1.424z",
37199
37276
  fill: "#fff"
37200
37277
  })));
@@ -37209,7 +37286,8 @@ var VoiceItem = function VoiceItem(_ref) {
37209
37286
  voicePreviewPauseHoverIcon = _ref.voicePreviewPauseHoverIcon,
37210
37287
  voicePreviewTitleColor = _ref.voicePreviewTitleColor,
37211
37288
  voicePreviewDateAndTimeColor = _ref.voicePreviewDateAndTimeColor,
37212
- voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor;
37289
+ voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor,
37290
+ messageType = _ref.messageType;
37213
37291
  var _useColor = useColors(),
37214
37292
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
37215
37293
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -37276,7 +37354,7 @@ var VoiceItem = function VoiceItem(_ref) {
37276
37354
  }, [playingAudioId]);
37277
37355
  useEffect(function () {
37278
37356
  if (customDownloader) {
37279
- customDownloader(file.url, false).then(function (url) {
37357
+ customDownloader(file.url, false, function () {}, messageType).then(function (url) {
37280
37358
  setFileUrl(url);
37281
37359
  });
37282
37360
  } else {
@@ -38479,23 +38557,23 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
38479
38557
  };
38480
38558
  var DetailsWrapper = styled.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose([""])));
38481
38559
 
38482
- var _path$1r;
38483
- function _extends$1v() {
38484
- return _extends$1v = Object.assign ? Object.assign.bind() : function (n) {
38560
+ var _path$1s;
38561
+ function _extends$1w() {
38562
+ return _extends$1w = Object.assign ? Object.assign.bind() : function (n) {
38485
38563
  for (var e = 1; e < arguments.length; e++) {
38486
38564
  var t = arguments[e];
38487
38565
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
38488
38566
  }
38489
38567
  return n;
38490
- }, _extends$1v.apply(null, arguments);
38568
+ }, _extends$1w.apply(null, arguments);
38491
38569
  }
38492
38570
  function SvgChevronDown(props) {
38493
- return /*#__PURE__*/createElement$1("svg", _extends$1v({
38571
+ return /*#__PURE__*/createElement$1("svg", _extends$1w({
38494
38572
  width: 32,
38495
38573
  height: 32,
38496
38574
  fill: "none",
38497
38575
  xmlns: "http://www.w3.org/2000/svg"
38498
- }, props), _path$1r || (_path$1r = /*#__PURE__*/createElement$1("path", {
38576
+ }, props), _path$1s || (_path$1s = /*#__PURE__*/createElement$1("path", {
38499
38577
  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",
38500
38578
  fill: "CurrentColor"
38501
38579
  })));