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.js CHANGED
@@ -7734,7 +7734,7 @@ var getCustomUploader = function getCustomUploader() {
7734
7734
  var getCustomDownloader = function getCustomDownloader() {
7735
7735
  return CustomUploader && CustomUploader.download;
7736
7736
  };
7737
- var customUpload = function customUpload(attachment, progress, getUpdatedFilePath) {
7737
+ var customUpload = function customUpload(attachment, progress, messageType, getUpdatedFilePath) {
7738
7738
  return new Promise(function (resolve, reject) {
7739
7739
  if (CustomUploader) {
7740
7740
  var uploadTask = {
@@ -7751,7 +7751,7 @@ var customUpload = function customUpload(attachment, progress, getUpdatedFilePat
7751
7751
  resume: function resume() {}
7752
7752
  };
7753
7753
  pendingUploaders[attachment.tid] = uploadTask;
7754
- CustomUploader.upload(attachment, uploadTask);
7754
+ CustomUploader.upload(attachment, uploadTask, messageType);
7755
7755
  } else {
7756
7756
  reject(new Error('No Custom uploader'));
7757
7757
  }
@@ -7803,7 +7803,7 @@ var filesPromisesOnDownload = {};
7803
7803
  var setDownloadFilePromise = function setDownloadFilePromise(attachmentId, promise) {
7804
7804
  filesPromisesOnDownload[attachmentId] = promise;
7805
7805
  };
7806
- var downloadFile = function downloadFile(attachment, download, done, progressCallback) {
7806
+ var downloadFile = function downloadFile(attachment, download, done, progressCallback, messageType) {
7807
7807
  try {
7808
7808
  return Promise.resolve(_catch(function () {
7809
7809
  var customDownloader = getCustomDownloader();
@@ -7814,7 +7814,7 @@ var downloadFile = function downloadFile(attachment, download, done, progressCal
7814
7814
  if (progressCallback) {
7815
7815
  progressCallback(progress);
7816
7816
  }
7817
- });
7817
+ }, messageType);
7818
7818
  filesPromisesOnDownload[attachment.id] = urlPromise;
7819
7819
  return Promise.resolve(urlPromise).then(function (result) {
7820
7820
  FileSaver.saveAs(result.Body, attachment.name);
@@ -9073,6 +9073,8 @@ var THEME_COLORS = {
9073
9073
  AVATAR_BRAND_2: 'avatarBrand2',
9074
9074
  AVATAR_BRAND_3: 'avatarBrand3',
9075
9075
  AVATAR_BRAND_4: 'avatarBrand4',
9076
+ AVATAR_BRAND_5: 'avatarBrand5',
9077
+ AVATAR_BRAND_6: 'avatarBrand6',
9076
9078
  TEXT_PRIMARY: 'textPrimary',
9077
9079
  TEXT_SECONDARY: 'textSecondary',
9078
9080
  TEXT_FOOTNOTE: 'textFootnote',
@@ -9098,7 +9100,8 @@ var THEME_COLORS = {
9098
9100
  INCOMING_MESSAGE_BACKGROUND: 'incomingMessageBackground',
9099
9101
  INCOMING_MESSAGE_BACKGROUND_X: 'incomingMessageBackgroundX',
9100
9102
  LINK_COLOR: 'linkColor',
9101
- HIGHLIGHTED_BACKGROUND: 'highlightedBackground'
9103
+ HIGHLIGHTED_BACKGROUND: 'highlightedBackground',
9104
+ TOOLTIP_BACKGROUND: 'tooltipBackground'
9102
9105
  };
9103
9106
  var defaultTheme = {
9104
9107
  colors: (_colors = {}, _colors[THEME_COLORS.ACCENT] = {
@@ -9116,6 +9119,12 @@ var defaultTheme = {
9116
9119
  }, _colors[THEME_COLORS.AVATAR_BRAND_4] = {
9117
9120
  light: '#67D292',
9118
9121
  dark: '#67D292'
9122
+ }, _colors[THEME_COLORS.AVATAR_BRAND_5] = {
9123
+ light: '#9F35E7',
9124
+ dark: '#9F35E7'
9125
+ }, _colors[THEME_COLORS.AVATAR_BRAND_6] = {
9126
+ light: '#63AFFF',
9127
+ dark: '#63AFFF'
9119
9128
  }, _colors[THEME_COLORS.BACKGROUND] = {
9120
9129
  light: '#FFFFFF',
9121
9130
  dark: '#19191B'
@@ -9194,6 +9203,9 @@ var defaultTheme = {
9194
9203
  }, _colors[THEME_COLORS.HIGHLIGHTED_BACKGROUND] = {
9195
9204
  light: '#C8D0FF',
9196
9205
  dark: '#3B3D68'
9206
+ }, _colors[THEME_COLORS.TOOLTIP_BACKGROUND] = {
9207
+ light: '#11153980',
9208
+ dark: '#00000080'
9197
9209
  }, _colors)
9198
9210
  };
9199
9211
  var defaultThemeMode = 'light';
@@ -10734,12 +10746,22 @@ function SvgPendingIcon(props) {
10734
10746
  })));
10735
10747
  }
10736
10748
 
10737
- var _avatarColors = ['#FF3E74', '#4F6AFF', '#FBB019', '#00CC99', '#9F35E7', '#63AFFF'];
10749
+ var avatarColors = {
10750
+ 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],
10751
+ 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]
10752
+ };
10753
+ var _avatarColors = {
10754
+ light: avatarColors.light,
10755
+ dark: avatarColors.dark
10756
+ };
10738
10757
  var setAvatarColor = function setAvatarColor(colors) {
10739
- _avatarColors = colors;
10758
+ _avatarColors = {
10759
+ light: colors,
10760
+ dark: colors
10761
+ };
10740
10762
  };
10741
- var getAvatarColors = function getAvatarColors() {
10742
- return _avatarColors;
10763
+ var getAvatarColors = function getAvatarColors(theme) {
10764
+ return _avatarColors[theme];
10743
10765
  };
10744
10766
 
10745
10767
  var _path$4;
@@ -10921,8 +10943,8 @@ function md5(inputString) {
10921
10943
  return rh(a) + rh(b) + rh(c) + rh(d);
10922
10944
  }
10923
10945
  var GlobalStyles = styled.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"])));
10924
- function generateAvatarColor(itemName) {
10925
- var avatarColors = getAvatarColors();
10946
+ function generateAvatarColor(itemName, theme) {
10947
+ var avatarColors = getAvatarColors(theme);
10926
10948
  if (itemName && itemName !== '') {
10927
10949
  var hash = md5(itemName).toString().padStart(32, '0').slice(-6);
10928
10950
  var hashInt = parseInt(hash, 16);
@@ -11113,14 +11135,14 @@ var SectionHeader = styled__default.h4(_templateObject20 || (_templateObject20 =
11113
11135
  }, function (props) {
11114
11136
  return props.uppercase && 'uppercase';
11115
11137
  });
11116
- var ItemNote = styled__default.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) {
11138
+ var ItemNote = styled__default.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) {
11117
11139
  return props.bgColor;
11118
11140
  }, function (props) {
11119
11141
  return props.bgColor;
11120
11142
  }, function (props) {
11121
- return props.direction === 'right' && "\n left: -5px;\n top: 50%;\n transform: translateY(-50%) rotate(45deg);\n ";
11143
+ return props.bgColor;
11122
11144
  }, function (props) {
11123
- return props.direction === 'top' && "\n bottom: -5px;\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n ";
11145
+ return props.bgColor;
11124
11146
  }, function (props) {
11125
11147
  return props.visible && "\n display: block;\n ";
11126
11148
  }, function (props) {
@@ -15547,7 +15569,7 @@ var handleUploadAttachments = function handleUploadAttachments(attachments, mess
15547
15569
  }
15548
15570
  });
15549
15571
  } else {
15550
- return Promise.resolve(customUpload(attachment, handleUploadProgress, handleUpdateLocalPath)).then(function (_customUpload) {
15572
+ return Promise.resolve(customUpload(attachment, handleUploadProgress, message.type, handleUpdateLocalPath)).then(function (_customUpload) {
15551
15573
  uri = _customUpload;
15552
15574
  });
15553
15575
  }
@@ -16523,7 +16545,7 @@ function resendMessage(action) {
16523
16545
  messageAttachment.data = pendingAttachment.file;
16524
16546
  messageAttachment.url = pendingAttachment.file;
16525
16547
  _context6.next = 41;
16526
- return effects.call(customUpload, messageAttachment, handleUploadProgress, handleUpdateLocalPath);
16548
+ return effects.call(customUpload, messageAttachment, handleUploadProgress, message.type, handleUpdateLocalPath);
16527
16549
  case 41:
16528
16550
  uri = _context6.sent;
16529
16551
  case 42:
@@ -19275,6 +19297,7 @@ var Avatar = function Avatar(_ref) {
19275
19297
  border = _ref.border,
19276
19298
  borderRadius = _ref.borderRadius,
19277
19299
  handleAvatarClick = _ref.handleAvatarClick;
19300
+ var theme = reactRedux.useSelector(themeSelector);
19278
19301
  var _useColor = useColors(),
19279
19302
  iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE];
19280
19303
  var isDeletedUserAvatar = !image && !name;
@@ -19302,7 +19325,8 @@ var Avatar = function Avatar(_ref) {
19302
19325
  textSize: textSize,
19303
19326
  onClick: handleAvatarClick,
19304
19327
  cursorPointer: !!handleAvatarClick,
19305
- borderRadius: borderRadius
19328
+ borderRadius: borderRadius,
19329
+ theme: theme
19306
19330
  }, isDeletedUserAvatar ? DeletedIcon || /*#__PURE__*/React__default.createElement(DeletedAvatarWrapper, {
19307
19331
  color: iconInactive
19308
19332
  }) : !image ? setDefaultAvatar ? DefaultAvatar || /*#__PURE__*/React__default.createElement(DefaultAvatarWrapper, {
@@ -19326,7 +19350,7 @@ var Container$1 = styled__default.div(_templateObject$3 || (_templateObject$3 =
19326
19350
  }, function (props) {
19327
19351
  return props.marginAuto ? 'auto' : '';
19328
19352
  }, function (props) {
19329
- return !props.isImage ? "background-color:" + generateAvatarColor(props.avatarName) + ";" : '';
19353
+ return !props.isImage ? "background-color:" + generateAvatarColor(props.avatarName, props.theme) + ";" : '';
19330
19354
  }, function (props) {
19331
19355
  return props.cursorPointer && 'pointer';
19332
19356
  }, function (props) {
@@ -19420,7 +19444,8 @@ var Channel = function Channel(_ref2) {
19420
19444
  onlineStatus = _useColor[THEME_COLORS.ONLINE_STATUS],
19421
19445
  backgroundFocused = _useColor[THEME_COLORS.BACKGROUND_FOCUSED],
19422
19446
  iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
19423
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
19447
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
19448
+ background = _useColor[THEME_COLORS.BACKGROUND];
19424
19449
  var dispatch = reactRedux.useDispatch();
19425
19450
  var ChatClient = getClient();
19426
19451
  var getFromContacts = getShowOnlyContactUsers();
@@ -19541,11 +19566,13 @@ var Channel = function Channel(_ref2) {
19541
19566
  textSize: channelAvatarTextSize || 16,
19542
19567
  setDefaultAvatar: isDirectChannel
19543
19568
  }), isDirectChannel && directChannelUser && hideUserPresence && (hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus, {
19544
- backgroundColor: onlineStatus
19569
+ backgroundColor: onlineStatus,
19570
+ borderColor: background
19545
19571
  })))), /*#__PURE__*/React__default.createElement(ChannelInfo, {
19546
19572
  theme: theme,
19547
19573
  avatar: showAvatar,
19548
19574
  isMuted: channel.muted,
19575
+ isPinned: !!channel.pinnedAt,
19549
19576
  statusWidth: statusWidth,
19550
19577
  uppercase: directChannelUser && hideUserPresence && hideUserPresence(directChannelUser),
19551
19578
  subjectFontSize: channelSubjectFontSize,
@@ -19614,25 +19641,10 @@ var Channel = function Channel(_ref2) {
19614
19641
  color: iconInactive
19615
19642
  }, pinedIcon || /*#__PURE__*/React__default.createElement(SvgPin, null)))));
19616
19643
  };
19617
- var Container$2 = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n cursor: pointer;\n 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) {
19618
- return props.selectedChannel ? props.selectedBackgroundColor : 'inherit';
19619
- }, function (props) {
19620
- return props.selectedChannel ? props.selectedChannelLeftBorder : null;
19621
- }, function (props) {
19622
- return props.selectedChannel ? props.selectedChannelPaddings || props.channelsPaddings || '8px' : props.channelsPaddings || '8px';
19623
- }, function (props) {
19624
- return props.channelsMargin || '0 8px';
19625
- }, function (props) {
19626
- return props.selectedChannelBorderRadius || '12px';
19627
- }, function (_ref3) {
19628
- var selectedChannel = _ref3.selectedChannel,
19629
- hoverBackground = _ref3.hoverBackground;
19630
- return !selectedChannel && "\n background-color: " + hoverBackground + ";\n ";
19631
- });
19632
- var ChannelInfo = styled__default.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) {
19644
+ var ChannelInfo = styled__default.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) {
19633
19645
  return props.avatar && '12px';
19634
19646
  }, function (props) {
19635
- return props.avatarSize ? "calc(100% - " + (props.avatarSize + 52) + "px)" : 'calc(100% - 102px)';
19647
+ return props.avatarSize ? "calc(100% - " + (props.avatarSize + 52) + "px)" : "calc(100% - " + (props.isPinned ? 92 : 72) + "px)";
19636
19648
  }, function (props) {
19637
19649
  return props.subjectFontSize || '15px';
19638
19650
  }, function (props) {
@@ -19644,10 +19656,10 @@ var ChannelInfo = styled__default.div(_templateObject2$4 || (_templateObject2$4
19644
19656
  }, function (props) {
19645
19657
  return props.uppercase && 'uppercase';
19646
19658
  });
19647
- var MutedIcon = styled__default.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) {
19659
+ var MutedIcon = styled__default.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) {
19648
19660
  return props.color;
19649
19661
  });
19650
- var LastMessage = styled__default.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) {
19662
+ var LastMessage = styled__default.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) {
19651
19663
  return props.fontSize || '14px';
19652
19664
  }, function (props) {
19653
19665
  return props.color;
@@ -19656,9 +19668,30 @@ var LastMessage = styled__default.div(_templateObject4$3 || (_templateObject4$3
19656
19668
  }, function (props) {
19657
19669
  return props.height || '20px';
19658
19670
  });
19659
- var AvatarWrapper = styled__default.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19660
- var UserStatus = styled__default.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) {
19671
+ var AvatarWrapper = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19672
+ var UserStatus = styled__default.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) {
19661
19673
  return props.backgroundColor || '#56E464';
19674
+ }, function (props) {
19675
+ return props.borderColor || '#ffffff';
19676
+ });
19677
+ var Container$2 = styled__default.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) {
19678
+ return props.selectedChannel ? props.selectedBackgroundColor : 'inherit';
19679
+ }, function (props) {
19680
+ return props.selectedChannel ? props.selectedChannelLeftBorder : null;
19681
+ }, function (props) {
19682
+ return props.selectedChannel ? props.selectedChannelPaddings || props.channelsPaddings || '8px' : props.channelsPaddings || '8px';
19683
+ }, function (props) {
19684
+ return props.channelsMargin || '0 8px';
19685
+ }, function (props) {
19686
+ return props.selectedChannelBorderRadius || '12px';
19687
+ }, function (_ref3) {
19688
+ var selectedChannel = _ref3.selectedChannel,
19689
+ hoverBackground = _ref3.hoverBackground;
19690
+ return !selectedChannel && "\n background-color: " + hoverBackground + ";\n ";
19691
+ }, UserStatus, function (props) {
19692
+ return props.selectedChannel ? props.selectedBackgroundColor : props.hoverBackground;
19693
+ }, UserStatus, function (props) {
19694
+ return props.selectedChannel && "\n border-color: " + props.selectedBackgroundColor + ";\n ";
19662
19695
  });
19663
19696
  var DraftMessageTitle = styled__default.span(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n color: ", ";\n"])), function (props) {
19664
19697
  return props.color;
@@ -19799,7 +19832,8 @@ var ContactItem = function ContactItem(_ref) {
19799
19832
  var _useColor = useColors(),
19800
19833
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
19801
19834
  online = _useColor[THEME_COLORS.ONLINE_STATUS],
19802
- backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED];
19835
+ backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
19836
+ background = _useColor[THEME_COLORS.BACKGROUND];
19803
19837
  var getFromContacts = getShowOnlyContactUsers();
19804
19838
  var contactUserName = makeUsername(contact, undefined, getFromContacts);
19805
19839
  return /*#__PURE__*/React__default.createElement(Container$3, {
@@ -19818,7 +19852,8 @@ var ContactItem = function ContactItem(_ref) {
19818
19852
  textSize: channelAvatarTextSize || 16,
19819
19853
  setDefaultAvatar: true
19820
19854
  }), hideUserPresence && (hideUserPresence(contact.user) ? '' : contact.user.presence && contact.user.presence.state === USER_PRESENCE_STATUS.ONLINE) && (/*#__PURE__*/React__default.createElement(UserStatus$1, {
19821
- backgroundColor: online
19855
+ backgroundColor: online,
19856
+ borderColor: background
19822
19857
  })))), /*#__PURE__*/React__default.createElement(ChannelInfo$1, {
19823
19858
  theme: theme,
19824
19859
  avatar: showAvatar,
@@ -19828,14 +19863,7 @@ var ContactItem = function ContactItem(_ref) {
19828
19863
  textColor: textPrimary
19829
19864
  }, /*#__PURE__*/React__default.createElement("h3", null, contactUserName)));
19830
19865
  };
19831
- var Container$3 = styled__default.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) {
19832
- return props.channelsPaddings || '8px';
19833
- }, function (props) {
19834
- return props.channelsMargin || '0 8px';
19835
- }, function (props) {
19836
- return props.hoverBackground;
19837
- });
19838
- var ChannelInfo$1 = styled__default.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) {
19866
+ var ChannelInfo$1 = styled__default.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) {
19839
19867
  return props.avatar && '12px';
19840
19868
  }, function (props) {
19841
19869
  return props.subjectFontSize || '15px';
@@ -19844,9 +19872,20 @@ var ChannelInfo$1 = styled__default.div(_templateObject2$6 || (_templateObject2$
19844
19872
  }, function (props) {
19845
19873
  return props.subjectColor || props.textColor;
19846
19874
  });
19847
- var AvatarWrapper$1 = styled__default.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19848
- var UserStatus$1 = styled__default.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) {
19875
+ var AvatarWrapper$1 = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n position: relative;\n"])));
19876
+ var UserStatus$1 = styled__default.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) {
19849
19877
  return props.backgroundColor || '#56E464';
19878
+ }, function (props) {
19879
+ return props.borderColor || '#ffffff';
19880
+ });
19881
+ var Container$3 = styled__default.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) {
19882
+ return props.channelsPaddings || '8px';
19883
+ }, function (props) {
19884
+ return props.channelsMargin || '0 8px';
19885
+ }, function (props) {
19886
+ return props.hoverBackground;
19887
+ }, UserStatus$1, function (props) {
19888
+ return props.hoverBackground;
19850
19889
  });
19851
19890
 
19852
19891
  var _path$f;
@@ -23429,7 +23468,8 @@ function ForwardMessagePopup(_ref) {
23429
23468
  onClick: function onClick() {
23430
23469
  return handleChannelSelect(!isSelected, channel);
23431
23470
  },
23432
- disabled: selectedChannels.length >= 5 && !isSelected
23471
+ disabled: selectedChannels.length >= 5 && !isSelected,
23472
+ backgroundHover: backgroundHovered
23433
23473
  }, /*#__PURE__*/React__default.createElement(Avatar, {
23434
23474
  name: channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : ''),
23435
23475
  image: channel.avatarUrl || (isDirectChannel && directChannelUser ? directChannelUser.avatarUrl : ''),
@@ -23469,12 +23509,12 @@ function ForwardMessagePopup(_ref) {
23469
23509
  onClick: handleForwardMessage
23470
23510
  }, buttonText || 'Forward'))));
23471
23511
  }
23472
- var ForwardChannelsCont = styled__default.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) {
23473
- return "calc(100% - " + (props.selectedChannelsHeight + 64) + "px)";
23512
+ var ForwardChannelsCont = styled__default.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) {
23513
+ return "calc(100% - " + (props.selectedChannelsHeight + 82) + "px)";
23474
23514
  }, function (props) {
23475
23515
  return props.thumbColor;
23476
23516
  });
23477
- var ChannelItem = styled__default.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) {
23517
+ var ChannelItem = styled__default.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) {
23478
23518
  return props.backgroundHover;
23479
23519
  });
23480
23520
  var ChannelInfo$3 = styled__default.div(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: auto;\n max-width: calc(100% - 74px);\n"])));
@@ -23677,9 +23717,11 @@ var SliderPopup = function SliderPopup(_ref) {
23677
23717
  mediaFiles = _ref.mediaFiles,
23678
23718
  currentMediaFile = _ref.currentMediaFile,
23679
23719
  allowEditDeleteIncomingMessage = _ref.allowEditDeleteIncomingMessage,
23680
- attachmentsPreview = _ref.attachmentsPreview;
23720
+ attachmentsPreview = _ref.attachmentsPreview,
23721
+ messageType = _ref.messageType;
23681
23722
  var _useColor = useColors(),
23682
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
23723
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
23724
+ overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2];
23683
23725
  var dispatch = reactRedux.useDispatch();
23684
23726
  var getFromContacts = getShowOnlyContactUsers();
23685
23727
  var connectionStatus = reactRedux.useSelector(connectionStatusSelector);
@@ -23751,7 +23793,7 @@ var SliderPopup = function SliderPopup(_ref) {
23751
23793
  delete stateCopy[attachmentId];
23752
23794
  setDownloadingFilesMap(stateCopy);
23753
23795
  };
23754
- var handleDownloadFile = function handleDownloadFile(attachment) {
23796
+ var handleDownloadFile = function handleDownloadFile(attachment, messageType) {
23755
23797
  if (attachment.id) {
23756
23798
  setDownloadingFilesMap(function (prevState) {
23757
23799
  var _extends3;
@@ -23769,7 +23811,7 @@ var SliderPopup = function SliderPopup(_ref) {
23769
23811
  uploadPercent: uploadPercent
23770
23812
  }, _extends4));
23771
23813
  });
23772
- });
23814
+ }, messageType);
23773
23815
  };
23774
23816
  var handleClicks = function handleClicks(e) {
23775
23817
  if (!e.target.closest('.custom_carousel_item') && !e.target.closest('.custom_carousel_arrow')) {
@@ -23895,7 +23937,7 @@ var SliderPopup = function SliderPopup(_ref) {
23895
23937
  }
23896
23938
  } else {
23897
23939
  if (customDownloader) {
23898
- customDownloader(currentFile.url, false).then(function (url) {
23940
+ customDownloader(currentFile.url, false, function () {}, messageType).then(function (url) {
23899
23941
  try {
23900
23942
  return Promise.resolve(fetch(url)).then(function (response) {
23901
23943
  setAttachmentToCache(currentFile.url, response);
@@ -23985,7 +24027,7 @@ var SliderPopup = function SliderPopup(_ref) {
23985
24027
  }
23986
24028
  } else {
23987
24029
  if (customDownloader) {
23988
- customDownloader(currentMediaFile.url, false).then(function (url) {
24030
+ customDownloader(currentMediaFile.url, false, function () {}, messageType).then(function (url) {
23989
24031
  try {
23990
24032
  return Promise.resolve(fetch(url)).then(function (response) {
23991
24033
  setAttachmentToCache(currentMediaFile.url, response);
@@ -24043,7 +24085,7 @@ var SliderPopup = function SliderPopup(_ref) {
24043
24085
  color: textOnPrimary
24044
24086
  }, currentFile && currentFile.size && currentFile.size > 0 ? bytesToSize(currentFile.size, 1) : '')))), /*#__PURE__*/React__default.createElement(ActionsWrapper, null, /*#__PURE__*/React__default.createElement(IconWrapper, {
24045
24087
  onClick: function onClick() {
24046
- return handleDownloadFile(currentFile);
24088
+ return handleDownloadFile(currentFile, messageType);
24047
24089
  },
24048
24090
  color: textOnPrimary
24049
24091
  }, currentFile && downloadingFilesMap[currentFile.id] ? (/*#__PURE__*/React__default.createElement(ProgressWrapper, null, /*#__PURE__*/React__default.createElement(reactCircularProgressbar.CircularProgressbar, {
@@ -24055,7 +24097,7 @@ var SliderPopup = function SliderPopup(_ref) {
24055
24097
  text: '',
24056
24098
  styles: {
24057
24099
  background: {
24058
- fill: 'transparent'
24100
+ fill: overlayBackground2 + "40"
24059
24101
  },
24060
24102
  path: {
24061
24103
  stroke: textOnPrimary,
@@ -24856,6 +24898,31 @@ function SvgReplyInThreadIcon(props) {
24856
24898
  })));
24857
24899
  }
24858
24900
 
24901
+ var _path$R;
24902
+ function _extends$S() {
24903
+ return _extends$S = Object.assign ? Object.assign.bind() : function (n) {
24904
+ for (var e = 1; e < arguments.length; e++) {
24905
+ var t = arguments[e];
24906
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
24907
+ }
24908
+ return n;
24909
+ }, _extends$S.apply(null, arguments);
24910
+ }
24911
+ function SvgArrowDown(props) {
24912
+ return /*#__PURE__*/React.createElement("svg", _extends$S({
24913
+ width: 20,
24914
+ height: 8,
24915
+ viewBox: "0 0 20 20",
24916
+ fill: "none",
24917
+ xmlns: "http://www.w3.org/2000/svg"
24918
+ }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
24919
+ fillRule: "evenodd",
24920
+ clipRule: "evenodd",
24921
+ d: "M10 8C7 8 4 0 0 0h20c-3.975 0-7 8-10 8z",
24922
+ fill: "currentColor"
24923
+ })));
24924
+ }
24925
+
24859
24926
  var _templateObject$r, _templateObject2$n, _templateObject3$h;
24860
24927
  function MessageActions(_ref) {
24861
24928
  var editModeToggle = _ref.editModeToggle,
@@ -24915,10 +24982,10 @@ function MessageActions(_ref) {
24915
24982
  accentColor = _useColor[THEME_COLORS.ACCENT],
24916
24983
  backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
24917
24984
  backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
24918
- surface2 = _useColor[THEME_COLORS.SURFACE_2],
24919
24985
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
24920
24986
  warningColor = _useColor[THEME_COLORS.WARNING],
24921
- iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE];
24987
+ iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
24988
+ tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
24922
24989
  var ChatClient = getClient();
24923
24990
  var user = ChatClient.user;
24924
24991
  var _usePermissions = usePermissions(myRole),
@@ -24949,9 +25016,9 @@ function MessageActions(_ref) {
24949
25016
  onClick: handleOpenReaction
24950
25017
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24951
25018
  disabledColor: textSecondary,
24952
- bgColor: surface2,
25019
+ bgColor: tooltipBackground,
24953
25020
  direction: 'top'
24954
- }, 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, {
25021
+ }, 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, {
24955
25022
  order: editIconOrder || 1,
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
- }, editIconTooltipText || 'Edit Message'), editIcon || /*#__PURE__*/React__default.createElement(SvgEditIcon, null))), messageStatus === MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25033
+ }, 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, {
24967
25034
  iconColor: messageActionIconsColor || iconInactive,
24968
25035
  hoverBackgroundColor: backgroundHovered,
24969
25036
  hoverIconColor: accentColor,
@@ -24972,9 +25039,9 @@ function MessageActions(_ref) {
24972
25039
  }
24973
25040
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24974
25041
  disabledColor: textSecondary,
24975
- bgColor: surface2,
25042
+ bgColor: tooltipBackground,
24976
25043
  direction: 'top'
24977
- }, ' ', "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, {
25044
+ }, ' ', "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, {
24978
25045
  order: replyIconOrder || 2,
24979
25046
  iconColor: messageActionIconsColor || iconInactive,
24980
25047
  hoverBackgroundColor: backgroundHovered,
@@ -24984,9 +25051,9 @@ function MessageActions(_ref) {
24984
25051
  }
24985
25052
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24986
25053
  disabledColor: textSecondary,
24987
- bgColor: surface2,
25054
+ bgColor: tooltipBackground,
24988
25055
  direction: 'top'
24989
- }, replyIconTooltipText || 'Reply'), replyIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null))), showReplyMessageInThread && replyMessagePermitted && (/*#__PURE__*/React__default.createElement(Action, {
25056
+ }, replyIconTooltipText || 'Reply', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), replyIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null))), showReplyMessageInThread && replyMessagePermitted && (/*#__PURE__*/React__default.createElement(Action, {
24990
25057
  order: replyInThreadIconOrder || 3,
24991
25058
  iconColor: messageActionIconsColor || iconInactive,
24992
25059
  hoverBackgroundColor: backgroundHovered,
@@ -24996,9 +25063,9 @@ function MessageActions(_ref) {
24996
25063
  }
24997
25064
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
24998
25065
  disabledColor: textSecondary,
24999
- bgColor: surface2,
25066
+ bgColor: tooltipBackground,
25000
25067
  direction: 'top'
25001
- }, replyInThreadIconTooltipText || 'Reply in thread'), replyInThreadIcon || /*#__PURE__*/React__default.createElement(SvgReplyInThreadIcon, null))))), showCopyMessage && (/*#__PURE__*/React__default.createElement(Action, {
25068
+ }, replyInThreadIconTooltipText || 'Reply in thread', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), replyInThreadIcon || /*#__PURE__*/React__default.createElement(SvgReplyInThreadIcon, null))))), showCopyMessage && (/*#__PURE__*/React__default.createElement(Action, {
25002
25069
  order: copyIconOrder || 4,
25003
25070
  iconColor: messageActionIconsColor || iconInactive,
25004
25071
  hoverBackgroundColor: backgroundHovered,
@@ -25008,9 +25075,9 @@ function MessageActions(_ref) {
25008
25075
  }
25009
25076
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25010
25077
  disabledColor: textSecondary,
25011
- bgColor: surface2,
25078
+ bgColor: tooltipBackground,
25012
25079
  direction: 'top'
25013
- }, copyIconTooltipText || 'Copy'), copyIcon || /*#__PURE__*/React__default.createElement(SvgCopyIcon, null))), showForwardMessage && forwardMessagePermitted && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25080
+ }, 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, {
25014
25081
  order: forwardIconOrder || 5,
25015
25082
  iconColor: messageActionIconsColor || iconInactive,
25016
25083
  hoverBackgroundColor: backgroundHovered,
@@ -25020,9 +25087,9 @@ function MessageActions(_ref) {
25020
25087
  }
25021
25088
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25022
25089
  disabledColor: textSecondary,
25023
- bgColor: surface2,
25090
+ bgColor: tooltipBackground,
25024
25091
  direction: 'top'
25025
- }, forwardIconTooltipText || 'Forward Message'), forwardIcon || /*#__PURE__*/React__default.createElement(SvgForward, null))), showSelectMessage && (/*#__PURE__*/React__default.createElement(Action, {
25092
+ }, forwardIconTooltipText || 'Forward Message', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), forwardIcon || /*#__PURE__*/React__default.createElement(SvgForward, null))), showSelectMessage && (/*#__PURE__*/React__default.createElement(Action, {
25026
25093
  order: selectIconOrder || 6,
25027
25094
  iconColor: messageActionIconsColor || iconInactive,
25028
25095
  hoverBackgroundColor: backgroundHovered,
@@ -25032,9 +25099,9 @@ function MessageActions(_ref) {
25032
25099
  }
25033
25100
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25034
25101
  disabledColor: textSecondary,
25035
- bgColor: surface2,
25102
+ bgColor: tooltipBackground,
25036
25103
  direction: 'top'
25037
- }, 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, {
25104
+ }, 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, {
25038
25105
  order: deleteIconOrder || 7,
25039
25106
  iconColor: messageActionIconsColor || warningColor,
25040
25107
  hoverBackgroundColor: backgroundHovered,
@@ -25044,9 +25111,9 @@ function MessageActions(_ref) {
25044
25111
  }
25045
25112
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25046
25113
  disabledColor: textSecondary,
25047
- bgColor: surface2,
25114
+ bgColor: tooltipBackground,
25048
25115
  direction: 'top'
25049
- }, deleteIconTooltipText || 'Delete Message'), deleteIcon || /*#__PURE__*/React__default.createElement(SvgDeleteIcon, null))), showReportMessage && messageStatus !== MESSAGE_DELIVERY_STATUS.PENDING && (/*#__PURE__*/React__default.createElement(Action, {
25116
+ }, 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, {
25050
25117
  order: reportIconOrder || 8,
25051
25118
  iconColor: messageActionIconsColor || iconInactive,
25052
25119
  hoverBackgroundColor: backgroundHovered,
@@ -25056,9 +25123,9 @@ function MessageActions(_ref) {
25056
25123
  }
25057
25124
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
25058
25125
  disabledColor: textSecondary,
25059
- bgColor: surface2,
25126
+ bgColor: tooltipBackground,
25060
25127
  direction: 'top'
25061
- }, reportIconTooltipText || 'Report'), reportIcon || /*#__PURE__*/React__default.createElement(SvgReportIcon, null)))));
25128
+ }, reportIconTooltipText || 'Report', /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), reportIcon || /*#__PURE__*/React__default.createElement(SvgReportIcon, null)))));
25062
25129
  }
25063
25130
  var MessageActionsWrapper = styled__default.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) {
25064
25131
  var isThreadMessage = _ref2.isThreadMessage,
@@ -25085,18 +25152,18 @@ var Action = styled__default.div(_templateObject3$h || (_templateObject3$h = _ta
25085
25152
  return props.hoverBackgroundColor;
25086
25153
  }, ItemNote);
25087
25154
 
25088
- var _rect$1, _path$R;
25089
- function _extends$S() {
25090
- return _extends$S = Object.assign ? Object.assign.bind() : function (n) {
25155
+ var _rect$1, _path$S;
25156
+ function _extends$T() {
25157
+ return _extends$T = Object.assign ? Object.assign.bind() : function (n) {
25091
25158
  for (var e = 1; e < arguments.length; e++) {
25092
25159
  var t = arguments[e];
25093
25160
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25094
25161
  }
25095
25162
  return n;
25096
- }, _extends$S.apply(null, arguments);
25163
+ }, _extends$T.apply(null, arguments);
25097
25164
  }
25098
25165
  function SvgFileIcon(props) {
25099
- return /*#__PURE__*/React.createElement("svg", _extends$S({
25166
+ return /*#__PURE__*/React.createElement("svg", _extends$T({
25100
25167
  width: 40,
25101
25168
  height: 40,
25102
25169
  viewBox: "0 0 40.01 40.01",
@@ -25107,24 +25174,24 @@ function SvgFileIcon(props) {
25107
25174
  height: 40,
25108
25175
  rx: 20,
25109
25176
  fill: "Transparent"
25110
- })), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
25177
+ })), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
25111
25178
  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",
25112
25179
  fill: "#fff"
25113
25180
  })));
25114
25181
  }
25115
25182
 
25116
- var _circle$2, _path$S;
25117
- function _extends$T() {
25118
- return _extends$T = Object.assign ? Object.assign.bind() : function (n) {
25183
+ var _circle$2, _path$T;
25184
+ function _extends$U() {
25185
+ return _extends$U = Object.assign ? Object.assign.bind() : function (n) {
25119
25186
  for (var e = 1; e < arguments.length; e++) {
25120
25187
  var t = arguments[e];
25121
25188
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25122
25189
  }
25123
25190
  return n;
25124
- }, _extends$T.apply(null, arguments);
25191
+ }, _extends$U.apply(null, arguments);
25125
25192
  }
25126
25193
  function SvgDeleteUpload(props) {
25127
- return /*#__PURE__*/React.createElement("svg", _extends$T({
25194
+ return /*#__PURE__*/React.createElement("svg", _extends$U({
25128
25195
  width: 20,
25129
25196
  height: 20,
25130
25197
  viewBox: "0 0 20.01 20.01",
@@ -25137,7 +25204,7 @@ function SvgDeleteUpload(props) {
25137
25204
  fill: "CurrentColor",
25138
25205
  stroke: "#fff",
25139
25206
  strokeWidth: 1.4
25140
- })), _path$S || (_path$S = /*#__PURE__*/React.createElement("path", {
25207
+ })), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
25141
25208
  d: "M13.5 6.5l-7 7M6.5 6.5l7 7",
25142
25209
  stroke: "#fff",
25143
25210
  strokeWidth: 1.4,
@@ -25146,24 +25213,24 @@ function SvgDeleteUpload(props) {
25146
25213
  })));
25147
25214
  }
25148
25215
 
25149
- var _path$T;
25150
- function _extends$U() {
25151
- return _extends$U = Object.assign ? Object.assign.bind() : function (n) {
25216
+ var _path$U;
25217
+ function _extends$V() {
25218
+ return _extends$V = Object.assign ? Object.assign.bind() : function (n) {
25152
25219
  for (var e = 1; e < arguments.length; e++) {
25153
25220
  var t = arguments[e];
25154
25221
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25155
25222
  }
25156
25223
  return n;
25157
- }, _extends$U.apply(null, arguments);
25224
+ }, _extends$V.apply(null, arguments);
25158
25225
  }
25159
25226
  function SvgUpload(props) {
25160
- return /*#__PURE__*/React.createElement("svg", _extends$U({
25227
+ return /*#__PURE__*/React.createElement("svg", _extends$V({
25161
25228
  width: 32,
25162
25229
  height: 32,
25163
25230
  viewBox: "0 0 32.01 32.01",
25164
25231
  fill: "none",
25165
25232
  xmlns: "http://www.w3.org/2000/svg"
25166
- }, props), _path$T || (_path$T = /*#__PURE__*/React.createElement("path", {
25233
+ }, props), _path$U || (_path$U = /*#__PURE__*/React.createElement("path", {
25167
25234
  fillRule: "evenodd",
25168
25235
  clipRule: "evenodd",
25169
25236
  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",
@@ -25171,18 +25238,18 @@ function SvgUpload(props) {
25171
25238
  })));
25172
25239
  }
25173
25240
 
25174
- var _circle$3, _path$U;
25175
- function _extends$V() {
25176
- return _extends$V = Object.assign ? Object.assign.bind() : function (n) {
25241
+ var _circle$3, _path$V;
25242
+ function _extends$W() {
25243
+ return _extends$W = Object.assign ? Object.assign.bind() : function (n) {
25177
25244
  for (var e = 1; e < arguments.length; e++) {
25178
25245
  var t = arguments[e];
25179
25246
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25180
25247
  }
25181
25248
  return n;
25182
- }, _extends$V.apply(null, arguments);
25249
+ }, _extends$W.apply(null, arguments);
25183
25250
  }
25184
25251
  function SvgPlayVideo(props) {
25185
- return /*#__PURE__*/React.createElement("svg", _extends$V({
25252
+ return /*#__PURE__*/React.createElement("svg", _extends$W({
25186
25253
  width: 56,
25187
25254
  height: 56,
25188
25255
  fill: "none",
@@ -25193,7 +25260,7 @@ function SvgPlayVideo(props) {
25193
25260
  r: 28,
25194
25261
  fill: "#17191C",
25195
25262
  fillOpacity: 0.4
25196
- })), _path$U || (_path$U = /*#__PURE__*/React.createElement("path", {
25263
+ })), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
25197
25264
  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",
25198
25265
  fill: "#fff"
25199
25266
  })));
@@ -25213,8 +25280,9 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
25213
25280
  isDetailsView = _ref.isDetailsView,
25214
25281
  setVideoIsReadyToSend = _ref.setVideoIsReadyToSend;
25215
25282
  var _useColor = useColors(),
25216
- textPrimary = _useColor.textPrimary,
25217
- border = _useColor.border;
25283
+ border = _useColor[THEME_COLORS.BORDER],
25284
+ overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2],
25285
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
25218
25286
  var _useState = React.useState(0),
25219
25287
  videoDuration = _useState[0],
25220
25288
  setVideoDuration = _useState[1];
@@ -25327,11 +25395,12 @@ var VideoPreview = /*#__PURE__*/React.memo(function VideoPreview(_ref) {
25327
25395
  React__default.createElement(VideoPlayButton, null, /*#__PURE__*/React__default.createElement(SvgPlayVideo, null))), /*#__PURE__*/React__default.createElement(VideoTime, {
25328
25396
  isDetailsView: isDetailsView,
25329
25397
  isRepliedMessage: isPreview || isRepliedMessage,
25330
- color: textPrimary
25398
+ color: textOnPrimary,
25399
+ messageTimeBackgroundColor: overlayBackground2
25331
25400
  }, !isRepliedMessage && !isPreview && /*#__PURE__*/React__default.createElement(SvgVideoCall, null), videoCurrentTime))));
25332
25401
  });
25333
25402
  var VideoControls = styled__default.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"])));
25334
- var VideoTime = styled__default.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) {
25403
+ var VideoTime = styled__default.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) {
25335
25404
  return props.isRepliedMessage ? '3px' : props.isDetailsView ? undefined : '8px';
25336
25405
  }, function (props) {
25337
25406
  return props.isDetailsView ? '8px' : undefined;
@@ -25341,6 +25410,8 @@ var VideoTime = styled__default.div(_templateObject2$o || (_templateObject2$o =
25341
25410
  return props.isRepliedMessage ? '10px' : '12px';
25342
25411
  }, function (props) {
25343
25412
  return props.isRepliedMessage ? '0 3px' : '4px 6px';
25413
+ }, function (props) {
25414
+ return props.messageTimeBackgroundColor + "40";
25344
25415
  }, function (props) {
25345
25416
  return props.color;
25346
25417
  }, function (props) {
@@ -25384,18 +25455,18 @@ var AttachmentImg = styled__default.img(_templateObject7$a || (_templateObject7$
25384
25455
  return props.borderRadius || '6px';
25385
25456
  });
25386
25457
 
25387
- var _circle$4, _path$V;
25388
- function _extends$W() {
25389
- return _extends$W = Object.assign ? Object.assign.bind() : function (n) {
25458
+ var _circle$4, _path$W;
25459
+ function _extends$X() {
25460
+ return _extends$X = Object.assign ? Object.assign.bind() : function (n) {
25390
25461
  for (var e = 1; e < arguments.length; e++) {
25391
25462
  var t = arguments[e];
25392
25463
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25393
25464
  }
25394
25465
  return n;
25395
- }, _extends$W.apply(null, arguments);
25466
+ }, _extends$X.apply(null, arguments);
25396
25467
  }
25397
25468
  function SvgPlay(props) {
25398
- return /*#__PURE__*/React.createElement("svg", _extends$W({
25469
+ return /*#__PURE__*/React.createElement("svg", _extends$X({
25399
25470
  width: 32,
25400
25471
  height: 32,
25401
25472
  viewBox: "0 0 33 33",
@@ -25406,24 +25477,24 @@ function SvgPlay(props) {
25406
25477
  cy: 16,
25407
25478
  r: 16,
25408
25479
  fill: "CurrentColor"
25409
- })), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
25480
+ })), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
25410
25481
  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",
25411
25482
  fill: "#fff"
25412
25483
  })));
25413
25484
  }
25414
25485
 
25415
- var _circle$5, _path$W;
25416
- function _extends$X() {
25417
- return _extends$X = Object.assign ? Object.assign.bind() : function (n) {
25486
+ var _circle$5, _path$X;
25487
+ function _extends$Y() {
25488
+ return _extends$Y = Object.assign ? Object.assign.bind() : function (n) {
25418
25489
  for (var e = 1; e < arguments.length; e++) {
25419
25490
  var t = arguments[e];
25420
25491
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
25421
25492
  }
25422
25493
  return n;
25423
- }, _extends$X.apply(null, arguments);
25494
+ }, _extends$Y.apply(null, arguments);
25424
25495
  }
25425
25496
  function SvgPause(props) {
25426
- return /*#__PURE__*/React.createElement("svg", _extends$X({
25497
+ return /*#__PURE__*/React.createElement("svg", _extends$Y({
25427
25498
  width: 32,
25428
25499
  height: 32,
25429
25500
  viewBox: "0 0 33 33",
@@ -25434,7 +25505,7 @@ function SvgPause(props) {
25434
25505
  cy: 16,
25435
25506
  r: 16,
25436
25507
  fill: "CurrentColor"
25437
- })), _path$W || (_path$W = /*#__PURE__*/React.createElement("path", {
25508
+ })), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
25438
25509
  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",
25439
25510
  fill: "#fff"
25440
25511
  })));
@@ -27484,7 +27555,8 @@ var Attachment = function Attachment(_ref) {
27484
27555
  imageAttachmentMaxWidth = _ref.imageAttachmentMaxWidth,
27485
27556
  imageAttachmentMaxHeight = _ref.imageAttachmentMaxHeight,
27486
27557
  videoAttachmentMaxWidth = _ref.videoAttachmentMaxWidth,
27487
- videoAttachmentMaxHeight = _ref.videoAttachmentMaxHeight;
27558
+ videoAttachmentMaxHeight = _ref.videoAttachmentMaxHeight,
27559
+ messageType = _ref.messageType;
27488
27560
  var _useColor = useColors(),
27489
27561
  accentColor = _useColor[THEME_COLORS.ACCENT],
27490
27562
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -27571,7 +27643,7 @@ var Attachment = function Attachment(_ref) {
27571
27643
  if (downloadIsCancelled) {
27572
27644
  setDownloadIsCancelled(false);
27573
27645
  if (customDownloader) {
27574
- customDownloader(attachment.url, false).then(function (url) {
27646
+ customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
27575
27647
  downloadImage(url);
27576
27648
  });
27577
27649
  } else {
@@ -27641,7 +27713,7 @@ var Attachment = function Attachment(_ref) {
27641
27713
  loaded: progress.loaded || 0,
27642
27714
  total: progress.total || 0
27643
27715
  });
27644
- });
27716
+ }, messageType);
27645
27717
  };
27646
27718
  var handleDeleteSelectedAttachment = function handleDeleteSelectedAttachment(attachmentTid) {
27647
27719
  if (removeSelected) {
@@ -27663,7 +27735,7 @@ var Attachment = function Attachment(_ref) {
27663
27735
  total: progress.total || 0
27664
27736
  });
27665
27737
  setProgress(uploadPercent);
27666
- });
27738
+ }, messageType);
27667
27739
  setDownloadFilePromise(attachment.id, urlPromise);
27668
27740
  return Promise.resolve(urlPromise).then(function (result) {
27669
27741
  var url = URL.createObjectURL(result.Body);
@@ -27710,7 +27782,7 @@ var Attachment = function Attachment(_ref) {
27710
27782
  setIsCached(false);
27711
27783
  setDownloadingFile(true);
27712
27784
  if (customDownloader) {
27713
- customDownloader(attachment.url, false).then(function (url) {
27785
+ customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
27714
27786
  try {
27715
27787
  downloadImage(url);
27716
27788
  return Promise.resolve(fetch(url)).then(function (response) {
@@ -27754,7 +27826,7 @@ var Attachment = function Attachment(_ref) {
27754
27826
  log.info('error on get attachment url from cache. .. ', e);
27755
27827
  if (customDownloader) {
27756
27828
  setDownloadingFile(true);
27757
- customDownloader(attachment.url, false).then(function (url) {
27829
+ customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
27758
27830
  try {
27759
27831
  return Promise.resolve(fetch(url)).then(function (response) {
27760
27832
  setAttachmentToCache(attachment.url, response);
@@ -28221,7 +28293,8 @@ var RepliedMessage = function RepliedMessage(_ref) {
28221
28293
  imageAttachmentMaxWidth: imageAttachmentMaxWidth,
28222
28294
  imageAttachmentMaxHeight: imageAttachmentMaxHeight,
28223
28295
  videoAttachmentMaxWidth: videoAttachmentMaxWidth,
28224
- videoAttachmentMaxHeight: videoAttachmentMaxHeight
28296
+ videoAttachmentMaxHeight: videoAttachmentMaxHeight,
28297
+ messageType: message.type
28225
28298
  });
28226
28299
  }), /*#__PURE__*/React__default.createElement(ReplyMessageBody, {
28227
28300
  rtlDirection: ownMessageOnRightSide && !message.incoming,
@@ -28319,24 +28392,24 @@ var MessageHeaderCont = styled__default.div(_templateObject$w || (_templateObjec
28319
28392
  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');
28320
28393
  });
28321
28394
 
28322
- var _path$X;
28323
- function _extends$Y() {
28324
- return _extends$Y = Object.assign ? Object.assign.bind() : function (n) {
28395
+ var _path$Y;
28396
+ function _extends$Z() {
28397
+ return _extends$Z = Object.assign ? Object.assign.bind() : function (n) {
28325
28398
  for (var e = 1; e < arguments.length; e++) {
28326
28399
  var t = arguments[e];
28327
28400
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28328
28401
  }
28329
28402
  return n;
28330
- }, _extends$Y.apply(null, arguments);
28403
+ }, _extends$Z.apply(null, arguments);
28331
28404
  }
28332
28405
  function SvgEmojiAnimalIcon(props) {
28333
- return /*#__PURE__*/React.createElement("svg", _extends$Y({
28406
+ return /*#__PURE__*/React.createElement("svg", _extends$Z({
28334
28407
  width: 20,
28335
28408
  height: 20,
28336
28409
  viewBox: "0 0 20.01 20.01",
28337
28410
  fill: "none",
28338
28411
  xmlns: "http://www.w3.org/2000/svg"
28339
- }, props), _path$X || (_path$X = /*#__PURE__*/React.createElement("path", {
28412
+ }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
28340
28413
  fillRule: "evenodd",
28341
28414
  clipRule: "evenodd",
28342
28415
  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",
@@ -28344,24 +28417,24 @@ function SvgEmojiAnimalIcon(props) {
28344
28417
  })));
28345
28418
  }
28346
28419
 
28347
- var _path$Y, _path2$5, _path3$2;
28348
- function _extends$Z() {
28349
- return _extends$Z = Object.assign ? Object.assign.bind() : function (n) {
28420
+ var _path$Z, _path2$5, _path3$2;
28421
+ function _extends$_() {
28422
+ return _extends$_ = Object.assign ? Object.assign.bind() : function (n) {
28350
28423
  for (var e = 1; e < arguments.length; e++) {
28351
28424
  var t = arguments[e];
28352
28425
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28353
28426
  }
28354
28427
  return n;
28355
- }, _extends$Z.apply(null, arguments);
28428
+ }, _extends$_.apply(null, arguments);
28356
28429
  }
28357
28430
  function SvgEmojiFoodIcon(props) {
28358
- return /*#__PURE__*/React.createElement("svg", _extends$Z({
28431
+ return /*#__PURE__*/React.createElement("svg", _extends$_({
28359
28432
  width: 20,
28360
28433
  height: 20,
28361
28434
  viewBox: "0 0 20.01 20.01",
28362
28435
  fill: "none",
28363
28436
  xmlns: "http://www.w3.org/2000/svg"
28364
- }, props), _path$Y || (_path$Y = /*#__PURE__*/React.createElement("path", {
28437
+ }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
28365
28438
  fillRule: "evenodd",
28366
28439
  clipRule: "evenodd",
28367
28440
  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",
@@ -28379,24 +28452,24 @@ function SvgEmojiFoodIcon(props) {
28379
28452
  })));
28380
28453
  }
28381
28454
 
28382
- var _path$Z;
28383
- function _extends$_() {
28384
- return _extends$_ = Object.assign ? Object.assign.bind() : function (n) {
28455
+ var _path$_;
28456
+ function _extends$$() {
28457
+ return _extends$$ = Object.assign ? Object.assign.bind() : function (n) {
28385
28458
  for (var e = 1; e < arguments.length; e++) {
28386
28459
  var t = arguments[e];
28387
28460
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28388
28461
  }
28389
28462
  return n;
28390
- }, _extends$_.apply(null, arguments);
28463
+ }, _extends$$.apply(null, arguments);
28391
28464
  }
28392
28465
  function SvgEmojiTravelIcon(props) {
28393
- return /*#__PURE__*/React.createElement("svg", _extends$_({
28466
+ return /*#__PURE__*/React.createElement("svg", _extends$$({
28394
28467
  width: 20,
28395
28468
  height: 20,
28396
28469
  viewBox: "0 0 20.01 20.01",
28397
28470
  fill: "none",
28398
28471
  xmlns: "http://www.w3.org/2000/svg"
28399
- }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
28472
+ }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
28400
28473
  fillRule: "evenodd",
28401
28474
  clipRule: "evenodd",
28402
28475
  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",
@@ -28405,17 +28478,17 @@ function SvgEmojiTravelIcon(props) {
28405
28478
  }
28406
28479
 
28407
28480
  var _g, _defs$1;
28408
- function _extends$$() {
28409
- return _extends$$ = Object.assign ? Object.assign.bind() : function (n) {
28481
+ function _extends$10() {
28482
+ return _extends$10 = Object.assign ? Object.assign.bind() : function (n) {
28410
28483
  for (var e = 1; e < arguments.length; e++) {
28411
28484
  var t = arguments[e];
28412
28485
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28413
28486
  }
28414
28487
  return n;
28415
- }, _extends$$.apply(null, arguments);
28488
+ }, _extends$10.apply(null, arguments);
28416
28489
  }
28417
28490
  function SvgEmojiObjectIcon(props) {
28418
- return /*#__PURE__*/React.createElement("svg", _extends$$({
28491
+ return /*#__PURE__*/React.createElement("svg", _extends$10({
28419
28492
  width: 20,
28420
28493
  height: 20,
28421
28494
  viewBox: "0 0 20.01 20.01",
@@ -28436,24 +28509,24 @@ function SvgEmojiObjectIcon(props) {
28436
28509
  })))));
28437
28510
  }
28438
28511
 
28439
- var _path$_;
28440
- function _extends$10() {
28441
- return _extends$10 = Object.assign ? Object.assign.bind() : function (n) {
28512
+ var _path$$;
28513
+ function _extends$11() {
28514
+ return _extends$11 = Object.assign ? Object.assign.bind() : function (n) {
28442
28515
  for (var e = 1; e < arguments.length; e++) {
28443
28516
  var t = arguments[e];
28444
28517
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28445
28518
  }
28446
28519
  return n;
28447
- }, _extends$10.apply(null, arguments);
28520
+ }, _extends$11.apply(null, arguments);
28448
28521
  }
28449
28522
  function SvgEmojiSymbolsIcon(props) {
28450
- return /*#__PURE__*/React.createElement("svg", _extends$10({
28523
+ return /*#__PURE__*/React.createElement("svg", _extends$11({
28451
28524
  width: 20,
28452
28525
  height: 20,
28453
28526
  viewBox: "0 0 20.01 20.01",
28454
28527
  fill: "none",
28455
28528
  xmlns: "http://www.w3.org/2000/svg"
28456
- }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
28529
+ }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
28457
28530
  fillRule: "evenodd",
28458
28531
  clipRule: "evenodd",
28459
28532
  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",
@@ -28461,24 +28534,24 @@ function SvgEmojiSymbolsIcon(props) {
28461
28534
  })));
28462
28535
  }
28463
28536
 
28464
- var _path$$;
28465
- function _extends$11() {
28466
- return _extends$11 = Object.assign ? Object.assign.bind() : function (n) {
28537
+ var _path$10;
28538
+ function _extends$12() {
28539
+ return _extends$12 = Object.assign ? Object.assign.bind() : function (n) {
28467
28540
  for (var e = 1; e < arguments.length; e++) {
28468
28541
  var t = arguments[e];
28469
28542
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28470
28543
  }
28471
28544
  return n;
28472
- }, _extends$11.apply(null, arguments);
28545
+ }, _extends$12.apply(null, arguments);
28473
28546
  }
28474
28547
  function SvgEmojiFlagicon(props) {
28475
- return /*#__PURE__*/React.createElement("svg", _extends$11({
28548
+ return /*#__PURE__*/React.createElement("svg", _extends$12({
28476
28549
  width: 20,
28477
28550
  height: 20,
28478
28551
  viewBox: "0 0 20.01 20.01",
28479
28552
  fill: "none",
28480
28553
  xmlns: "http://www.w3.org/2000/svg"
28481
- }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
28554
+ }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
28482
28555
  fillRule: "evenodd",
28483
28556
  clipRule: "evenodd",
28484
28557
  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",
@@ -28974,24 +29047,24 @@ var Emoji = styled__default.li(_templateObject8$b || (_templateObject8$b = _tagg
28974
29047
  return props.hoverBackgroundColor;
28975
29048
  });
28976
29049
 
28977
- var _path$10;
28978
- function _extends$12() {
28979
- return _extends$12 = Object.assign ? Object.assign.bind() : function (n) {
29050
+ var _path$11;
29051
+ function _extends$13() {
29052
+ return _extends$13 = Object.assign ? Object.assign.bind() : function (n) {
28980
29053
  for (var e = 1; e < arguments.length; e++) {
28981
29054
  var t = arguments[e];
28982
29055
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
28983
29056
  }
28984
29057
  return n;
28985
- }, _extends$12.apply(null, arguments);
29058
+ }, _extends$13.apply(null, arguments);
28986
29059
  }
28987
29060
  function SvgPlus(props) {
28988
- return /*#__PURE__*/React.createElement("svg", _extends$12({
29061
+ return /*#__PURE__*/React.createElement("svg", _extends$13({
28989
29062
  width: 20,
28990
29063
  height: 20,
28991
29064
  viewBox: "0 0 20.01 20.01",
28992
29065
  fill: "none",
28993
29066
  xmlns: "http://www.w3.org/2000/svg"
28994
- }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
29067
+ }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
28995
29068
  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",
28996
29069
  fill: "currentColor"
28997
29070
  })));
@@ -29171,7 +29244,8 @@ var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
29171
29244
  accentColor = _useColor[THEME_COLORS.ACCENT],
29172
29245
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
29173
29246
  iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
29174
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
29247
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
29248
+ overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2];
29175
29249
  return /*#__PURE__*/React__default.createElement(MessageStatusAndTimeContainer, {
29176
29250
  lineHeight: messageStatusAndTimeLineHeight,
29177
29251
  showOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -29183,7 +29257,8 @@ var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
29183
29257
  bottomOfMessage: bottomOfMessage,
29184
29258
  marginBottom: marginBottom,
29185
29259
  className: 'message_status_time',
29186
- messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
29260
+ messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary,
29261
+ messageTimeBackgroundColor: overlayBackground2
29187
29262
  }, message.state === MESSAGE_STATUS.EDIT ? (/*#__PURE__*/React__default.createElement(MessageStatusUpdated, {
29188
29263
  color: messageStateColor || textSecondary,
29189
29264
  fontSize: messageStateFontSize
@@ -29221,7 +29296,7 @@ var MessageStatusAndTimeContainer = styled__default.span(_templateObject3$o || (
29221
29296
  }, function (props) {
29222
29297
  return props.withAttachment && '4px 6px';
29223
29298
  }, function (props) {
29224
- return props.withAttachment && !props.fileAttachment && 'rgba(1, 1, 1, 0.3)';
29299
+ return props.withAttachment && !props.fileAttachment && props.messageTimeBackgroundColor + "40";
29225
29300
  }, function (props) {
29226
29301
  return props.lineHeight || '14px';
29227
29302
  }, function (props) {
@@ -29237,7 +29312,7 @@ var MessageStatusAndTimeContainer = styled__default.span(_templateObject3$o || (
29237
29312
  }, function (props) {
29238
29313
  return props.bottomOfMessage && props.rtlDirection && 'flex-end';
29239
29314
  }, HiddenMessageTime, function (props) {
29240
- return props.fileAttachment ? props.statusColor : props.withAttachment ? props.messageTimeColorOnAttachment : '';
29315
+ return props.withAttachment ? props.messageTimeColorOnAttachment : '';
29241
29316
  }, function (props) {
29242
29317
  return props.withAttachment && "\n position: absolute;\n z-index: 3;\n right: " + (props.fileAttachment ? '6px' : '10px') + ";\n bottom: " + (props.fileAttachment ? '9px' : '14px') + ";\n ";
29243
29318
  });
@@ -29640,7 +29715,8 @@ var MessageBody = function MessageBody(_ref) {
29640
29715
  imageAttachmentMaxWidth: imageAttachmentMaxWidth,
29641
29716
  imageAttachmentMaxHeight: imageAttachmentMaxHeight,
29642
29717
  videoAttachmentMaxWidth: videoAttachmentMaxWidth,
29643
- videoAttachmentMaxHeight: videoAttachmentMaxHeight
29718
+ videoAttachmentMaxHeight: videoAttachmentMaxHeight,
29719
+ messageType: message.type
29644
29720
  });
29645
29721
  }), emojisPopupOpen && emojisPopupPosition && (/*#__PURE__*/React__default.createElement(EmojiContainer, {
29646
29722
  id: message.id + "_emoji_popup_container",
@@ -30321,7 +30397,7 @@ var Message$1 = function Message(_ref) {
30321
30397
  handleDeletePendingMessage: handleDeletePendingMessage,
30322
30398
  handleCreateChat: handleCreateChat,
30323
30399
  messageTextRef: messageTextRef,
30324
- messageTimeColorOnAttachment: messageTimeColorOnAttachment
30400
+ messageTimeColorOnAttachment: messageTimeColorOnAttachment || textOnPrimary
30325
30401
  })), messageStatusAndTimePosition === 'bottomOfMessage' && (messageStatusVisible || messageTimeVisible) && (/*#__PURE__*/React__default.createElement(MessageStatusAndTime$1, {
30326
30402
  message: message,
30327
30403
  showMessageTimeAndStatusOnlyOnHover: showMessageTimeAndStatusOnlyOnHover,
@@ -32176,24 +32252,24 @@ var MemberName$2 = styled__default.h3(_templateObject5$k || (_templateObject5$k
32176
32252
  return props.color;
32177
32253
  });
32178
32254
 
32179
- var _path$11;
32180
- function _extends$13() {
32181
- return _extends$13 = Object.assign ? Object.assign.bind() : function (n) {
32255
+ var _path$12;
32256
+ function _extends$14() {
32257
+ return _extends$14 = Object.assign ? Object.assign.bind() : function (n) {
32182
32258
  for (var e = 1; e < arguments.length; e++) {
32183
32259
  var t = arguments[e];
32184
32260
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32185
32261
  }
32186
32262
  return n;
32187
- }, _extends$13.apply(null, arguments);
32263
+ }, _extends$14.apply(null, arguments);
32188
32264
  }
32189
32265
  function SvgBold(props) {
32190
- return /*#__PURE__*/React.createElement("svg", _extends$13({
32266
+ return /*#__PURE__*/React.createElement("svg", _extends$14({
32191
32267
  width: 18,
32192
32268
  height: 18,
32193
32269
  viewBox: "0 0 18.01 18.01",
32194
32270
  fill: "none",
32195
32271
  xmlns: "http://www.w3.org/2000/svg"
32196
- }, props), _path$11 || (_path$11 = /*#__PURE__*/React.createElement("path", {
32272
+ }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
32197
32273
  fillRule: "evenodd",
32198
32274
  clipRule: "evenodd",
32199
32275
  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",
@@ -32201,24 +32277,24 @@ function SvgBold(props) {
32201
32277
  })));
32202
32278
  }
32203
32279
 
32204
- var _path$12;
32205
- function _extends$14() {
32206
- return _extends$14 = Object.assign ? Object.assign.bind() : function (n) {
32280
+ var _path$13;
32281
+ function _extends$15() {
32282
+ return _extends$15 = Object.assign ? Object.assign.bind() : function (n) {
32207
32283
  for (var e = 1; e < arguments.length; e++) {
32208
32284
  var t = arguments[e];
32209
32285
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32210
32286
  }
32211
32287
  return n;
32212
- }, _extends$14.apply(null, arguments);
32288
+ }, _extends$15.apply(null, arguments);
32213
32289
  }
32214
32290
  function SvgItalic(props) {
32215
- return /*#__PURE__*/React.createElement("svg", _extends$14({
32291
+ return /*#__PURE__*/React.createElement("svg", _extends$15({
32216
32292
  width: 18,
32217
32293
  height: 18,
32218
32294
  viewBox: "0 0 18.01 18.01",
32219
32295
  fill: "none",
32220
32296
  xmlns: "http://www.w3.org/2000/svg"
32221
- }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
32297
+ }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
32222
32298
  fillRule: "evenodd",
32223
32299
  clipRule: "evenodd",
32224
32300
  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",
@@ -32227,17 +32303,17 @@ function SvgItalic(props) {
32227
32303
  }
32228
32304
 
32229
32305
  var _g$1;
32230
- function _extends$15() {
32231
- return _extends$15 = Object.assign ? Object.assign.bind() : function (n) {
32306
+ function _extends$16() {
32307
+ return _extends$16 = Object.assign ? Object.assign.bind() : function (n) {
32232
32308
  for (var e = 1; e < arguments.length; e++) {
32233
32309
  var t = arguments[e];
32234
32310
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32235
32311
  }
32236
32312
  return n;
32237
- }, _extends$15.apply(null, arguments);
32313
+ }, _extends$16.apply(null, arguments);
32238
32314
  }
32239
32315
  function SvgStrikethrough(props) {
32240
- return /*#__PURE__*/React.createElement("svg", _extends$15({
32316
+ return /*#__PURE__*/React.createElement("svg", _extends$16({
32241
32317
  width: 18,
32242
32318
  height: 18,
32243
32319
  viewBox: "0 0 18.01 18.01",
@@ -32254,41 +32330,41 @@ function SvgStrikethrough(props) {
32254
32330
  }))));
32255
32331
  }
32256
32332
 
32257
- var _path$13;
32258
- function _extends$16() {
32259
- return _extends$16 = Object.assign ? Object.assign.bind() : function (n) {
32333
+ var _path$14;
32334
+ function _extends$17() {
32335
+ return _extends$17 = 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$16.apply(null, arguments);
32341
+ }, _extends$17.apply(null, arguments);
32266
32342
  }
32267
32343
  function SvgMono(props) {
32268
- return /*#__PURE__*/React.createElement("svg", _extends$16({
32344
+ return /*#__PURE__*/React.createElement("svg", _extends$17({
32269
32345
  width: 18,
32270
32346
  height: 18,
32271
32347
  viewBox: "0 0 18.01 18.01",
32272
32348
  fill: "none",
32273
32349
  xmlns: "http://www.w3.org/2000/svg"
32274
- }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
32350
+ }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
32275
32351
  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",
32276
32352
  fill: "CurrentColor"
32277
32353
  })));
32278
32354
  }
32279
32355
 
32280
32356
  var _g$2;
32281
- function _extends$17() {
32282
- return _extends$17 = Object.assign ? Object.assign.bind() : function (n) {
32357
+ function _extends$18() {
32358
+ return _extends$18 = Object.assign ? Object.assign.bind() : function (n) {
32283
32359
  for (var e = 1; e < arguments.length; e++) {
32284
32360
  var t = arguments[e];
32285
32361
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
32286
32362
  }
32287
32363
  return n;
32288
- }, _extends$17.apply(null, arguments);
32364
+ }, _extends$18.apply(null, arguments);
32289
32365
  }
32290
32366
  function SvgUnderline(props) {
32291
- return /*#__PURE__*/React.createElement("svg", _extends$17({
32367
+ return /*#__PURE__*/React.createElement("svg", _extends$18({
32292
32368
  width: 18,
32293
32369
  height: 18,
32294
32370
  viewBox: "0 0 18.01 18.01",
@@ -32382,9 +32458,9 @@ function TextFormatFloatingToolbar(_ref) {
32382
32458
  var _useColor = useColors(),
32383
32459
  accentColor = _useColor[THEME_COLORS.ACCENT],
32384
32460
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
32385
- surface2 = _useColor[THEME_COLORS.SURFACE_2],
32386
32461
  backgroundSections = _useColor[THEME_COLORS.BACKGROUND_SECTIONS],
32387
- surface1 = _useColor[THEME_COLORS.SURFACE_1];
32462
+ surface1 = _useColor[THEME_COLORS.SURFACE_1],
32463
+ tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
32388
32464
  var popupCharStylesEditorRef = React.useRef(null);
32389
32465
  function mouseMoveListener(e) {
32390
32466
  if (popupCharStylesEditorRef !== null && popupCharStylesEditorRef !== void 0 && popupCharStylesEditorRef.current && (e.buttons === 1 || e.buttons === 3)) {
@@ -32479,9 +32555,9 @@ function TextFormatFloatingToolbar(_ref) {
32479
32555
  isActive: isBold
32480
32556
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32481
32557
  disabledColor: textSecondary,
32482
- bgColor: surface2,
32558
+ bgColor: tooltipBackground,
32483
32559
  direction: 'top'
32484
- }, "Bold"), /*#__PURE__*/React__default.createElement(SvgBold, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32560
+ }, "Bold", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgBold, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32485
32561
  iconColor: textSecondary,
32486
32562
  hoverBackgroundColor: surface1,
32487
32563
  hoverIconColor: accentColor,
@@ -32493,9 +32569,9 @@ function TextFormatFloatingToolbar(_ref) {
32493
32569
  "aria-label": 'Format text as italics'
32494
32570
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32495
32571
  disabledColor: textSecondary,
32496
- bgColor: surface2,
32572
+ bgColor: tooltipBackground,
32497
32573
  direction: 'top'
32498
- }, "Italic"), /*#__PURE__*/React__default.createElement(SvgItalic, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32574
+ }, "Italic", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgItalic, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32499
32575
  iconColor: textSecondary,
32500
32576
  hoverBackgroundColor: surface1,
32501
32577
  hoverIconColor: accentColor,
@@ -32507,9 +32583,9 @@ function TextFormatFloatingToolbar(_ref) {
32507
32583
  "aria-label": 'Format text with a strikethrough'
32508
32584
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32509
32585
  disabledColor: textSecondary,
32510
- bgColor: surface2,
32586
+ bgColor: tooltipBackground,
32511
32587
  direction: 'top'
32512
- }, ' ', "Strikethrough", ' '), /*#__PURE__*/React__default.createElement(SvgStrikethrough, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32588
+ }, "Strikethrough ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgStrikethrough, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32513
32589
  type: 'button',
32514
32590
  iconColor: textSecondary,
32515
32591
  hoverBackgroundColor: surface1,
@@ -32521,9 +32597,9 @@ function TextFormatFloatingToolbar(_ref) {
32521
32597
  "aria-label": 'Insert code block'
32522
32598
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32523
32599
  disabledColor: textSecondary,
32524
- bgColor: surface2,
32600
+ bgColor: tooltipBackground,
32525
32601
  direction: 'top'
32526
- }, "Monospace"), /*#__PURE__*/React__default.createElement(SvgMono, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32602
+ }, "Monospace ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgMono, null)), /*#__PURE__*/React__default.createElement(Action$1, {
32527
32603
  type: 'button',
32528
32604
  iconColor: textSecondary,
32529
32605
  hoverBackgroundColor: surface1,
@@ -32535,9 +32611,9 @@ function TextFormatFloatingToolbar(_ref) {
32535
32611
  "aria-label": 'Insert code block'
32536
32612
  }, /*#__PURE__*/React__default.createElement(ItemNote, {
32537
32613
  disabledColor: textSecondary,
32538
- bgColor: surface2,
32614
+ bgColor: tooltipBackground,
32539
32615
  direction: 'top'
32540
- }, "Underline"), /*#__PURE__*/React__default.createElement(SvgUnderline, null)))));
32616
+ }, "Underline ", /*#__PURE__*/React__default.createElement(SvgArrowDown, null)), /*#__PURE__*/React__default.createElement(SvgUnderline, null)))));
32541
32617
  }
32542
32618
  function useFloatingTextFormatToolbar(editor, anchorElem) {
32543
32619
  var _useState = React.useState(false),
@@ -33250,18 +33326,18 @@ var Emoji$1 = styled__default.li(_templateObject8$e || (_templateObject8$e = _ta
33250
33326
 
33251
33327
  var CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
33252
33328
 
33253
- var _circle$6, _path$14;
33254
- function _extends$18() {
33255
- return _extends$18 = Object.assign ? Object.assign.bind() : function (n) {
33329
+ var _circle$6, _path$15;
33330
+ function _extends$19() {
33331
+ return _extends$19 = Object.assign ? Object.assign.bind() : function (n) {
33256
33332
  for (var e = 1; e < arguments.length; e++) {
33257
33333
  var t = arguments[e];
33258
33334
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33259
33335
  }
33260
33336
  return n;
33261
- }, _extends$18.apply(null, arguments);
33337
+ }, _extends$19.apply(null, arguments);
33262
33338
  }
33263
33339
  function SvgSend(props) {
33264
- return /*#__PURE__*/React.createElement("svg", _extends$18({
33340
+ return /*#__PURE__*/React.createElement("svg", _extends$19({
33265
33341
  width: 32,
33266
33342
  height: 32,
33267
33343
  fill: "none",
@@ -33271,142 +33347,142 @@ function SvgSend(props) {
33271
33347
  cy: 16,
33272
33348
  r: 16,
33273
33349
  fill: "currentColor"
33274
- })), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
33350
+ })), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
33275
33351
  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",
33276
33352
  fill: "#fff"
33277
33353
  })));
33278
33354
  }
33279
33355
 
33280
- var _path$15;
33281
- function _extends$19() {
33282
- return _extends$19 = Object.assign ? Object.assign.bind() : function (n) {
33356
+ var _path$16;
33357
+ function _extends$1a() {
33358
+ return _extends$1a = Object.assign ? Object.assign.bind() : function (n) {
33283
33359
  for (var e = 1; e < arguments.length; e++) {
33284
33360
  var t = arguments[e];
33285
33361
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33286
33362
  }
33287
33363
  return n;
33288
- }, _extends$19.apply(null, arguments);
33364
+ }, _extends$1a.apply(null, arguments);
33289
33365
  }
33290
33366
  function SvgEye(props) {
33291
- return /*#__PURE__*/React.createElement("svg", _extends$19({
33367
+ return /*#__PURE__*/React.createElement("svg", _extends$1a({
33292
33368
  width: 25,
33293
33369
  height: 24,
33294
33370
  fill: "none",
33295
33371
  xmlns: "http://www.w3.org/2000/svg"
33296
- }, props), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
33372
+ }, props), _path$16 || (_path$16 = /*#__PURE__*/React.createElement("path", {
33297
33373
  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",
33298
33374
  fill: "CurrentColor"
33299
33375
  })));
33300
33376
  }
33301
33377
 
33302
- var _path$16;
33303
- function _extends$1a() {
33304
- return _extends$1a = Object.assign ? Object.assign.bind() : function (n) {
33378
+ var _path$17;
33379
+ function _extends$1b() {
33380
+ return _extends$1b = 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$1a.apply(null, arguments);
33386
+ }, _extends$1b.apply(null, arguments);
33311
33387
  }
33312
33388
  function SvgAddAttachment(props) {
33313
- return /*#__PURE__*/React.createElement("svg", _extends$1a({
33389
+ return /*#__PURE__*/React.createElement("svg", _extends$1b({
33314
33390
  width: 24,
33315
33391
  height: 24,
33316
33392
  viewBox: "0 0 24.01 24.01",
33317
33393
  fill: "none",
33318
33394
  xmlns: "http://www.w3.org/2000/svg"
33319
- }, props), _path$16 || (_path$16 = /*#__PURE__*/React.createElement("path", {
33395
+ }, props), _path$17 || (_path$17 = /*#__PURE__*/React.createElement("path", {
33320
33396
  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",
33321
33397
  fill: "CurrentColor"
33322
33398
  })));
33323
33399
  }
33324
33400
 
33325
- var _path$17;
33326
- function _extends$1b() {
33327
- return _extends$1b = Object.assign ? Object.assign.bind() : function (n) {
33401
+ var _path$18;
33402
+ function _extends$1c() {
33403
+ return _extends$1c = Object.assign ? Object.assign.bind() : function (n) {
33328
33404
  for (var e = 1; e < arguments.length; e++) {
33329
33405
  var t = arguments[e];
33330
33406
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33331
33407
  }
33332
33408
  return n;
33333
- }, _extends$1b.apply(null, arguments);
33409
+ }, _extends$1c.apply(null, arguments);
33334
33410
  }
33335
33411
  function SvgErrorCircle(props) {
33336
- return /*#__PURE__*/React.createElement("svg", _extends$1b({
33412
+ return /*#__PURE__*/React.createElement("svg", _extends$1c({
33337
33413
  width: 25,
33338
33414
  height: 24,
33339
33415
  fill: "none",
33340
33416
  xmlns: "http://www.w3.org/2000/svg"
33341
- }, props), _path$17 || (_path$17 = /*#__PURE__*/React.createElement("path", {
33417
+ }, props), _path$18 || (_path$18 = /*#__PURE__*/React.createElement("path", {
33342
33418
  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",
33343
33419
  fill: "#FFB73D"
33344
33420
  })));
33345
33421
  }
33346
33422
 
33347
- var _path$18;
33348
- function _extends$1c() {
33349
- return _extends$1c = Object.assign ? Object.assign.bind() : function (n) {
33423
+ var _path$19;
33424
+ function _extends$1d() {
33425
+ return _extends$1d = 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$1c.apply(null, arguments);
33431
+ }, _extends$1d.apply(null, arguments);
33356
33432
  }
33357
33433
  function SvgPlayRecord(props) {
33358
- return /*#__PURE__*/React.createElement("svg", _extends$1c({
33434
+ return /*#__PURE__*/React.createElement("svg", _extends$1d({
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$18 || (_path$18 = /*#__PURE__*/React.createElement("path", {
33440
+ }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
33365
33441
  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",
33366
33442
  fill: "CurrentColor"
33367
33443
  })));
33368
33444
  }
33369
33445
 
33370
- var _path$19;
33371
- function _extends$1d() {
33372
- return _extends$1d = Object.assign ? Object.assign.bind() : function (n) {
33446
+ var _path$1a;
33447
+ function _extends$1e() {
33448
+ return _extends$1e = 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$1d.apply(null, arguments);
33454
+ }, _extends$1e.apply(null, arguments);
33379
33455
  }
33380
33456
  function SvgPauseRecord(props) {
33381
- return /*#__PURE__*/React.createElement("svg", _extends$1d({
33457
+ return /*#__PURE__*/React.createElement("svg", _extends$1e({
33382
33458
  width: 20,
33383
33459
  height: 20,
33384
33460
  viewBox: "0 0 20.01 20.01",
33385
33461
  fill: "none",
33386
33462
  xmlns: "http://www.w3.org/2000/svg"
33387
- }, props), _path$19 || (_path$19 = /*#__PURE__*/React.createElement("path", {
33463
+ }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
33388
33464
  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",
33389
33465
  fill: "CurrentColor"
33390
33466
  })));
33391
33467
  }
33392
33468
 
33393
- var _path$1a;
33394
- function _extends$1e() {
33395
- return _extends$1e = Object.assign ? Object.assign.bind() : function (n) {
33469
+ var _path$1b;
33470
+ function _extends$1f() {
33471
+ return _extends$1f = Object.assign ? Object.assign.bind() : function (n) {
33396
33472
  for (var e = 1; e < arguments.length; e++) {
33397
33473
  var t = arguments[e];
33398
33474
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33399
33475
  }
33400
33476
  return n;
33401
- }, _extends$1e.apply(null, arguments);
33477
+ }, _extends$1f.apply(null, arguments);
33402
33478
  }
33403
33479
  function SvgStopRecord(props) {
33404
- return /*#__PURE__*/React.createElement("svg", _extends$1e({
33480
+ return /*#__PURE__*/React.createElement("svg", _extends$1f({
33405
33481
  width: 20,
33406
33482
  height: 20,
33407
33483
  fill: "none",
33408
33484
  xmlns: "http://www.w3.org/2000/svg"
33409
- }, props), _path$1a || (_path$1a = /*#__PURE__*/React.createElement("path", {
33485
+ }, props), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
33410
33486
  fillRule: "evenodd",
33411
33487
  clipRule: "evenodd",
33412
33488
  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",
@@ -33414,18 +33490,18 @@ function SvgStopRecord(props) {
33414
33490
  })));
33415
33491
  }
33416
33492
 
33417
- var _circle$7, _path$1b, _path2$6;
33418
- function _extends$1f() {
33419
- return _extends$1f = Object.assign ? Object.assign.bind() : function (n) {
33493
+ var _circle$7, _path$1c, _path2$6;
33494
+ function _extends$1g() {
33495
+ return _extends$1g = Object.assign ? Object.assign.bind() : function (n) {
33420
33496
  for (var e = 1; e < arguments.length; e++) {
33421
33497
  var t = arguments[e];
33422
33498
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
33423
33499
  }
33424
33500
  return n;
33425
- }, _extends$1f.apply(null, arguments);
33501
+ }, _extends$1g.apply(null, arguments);
33426
33502
  }
33427
33503
  function SvgRecordButton(props) {
33428
- return /*#__PURE__*/React.createElement("svg", _extends$1f({
33504
+ return /*#__PURE__*/React.createElement("svg", _extends$1g({
33429
33505
  width: 32,
33430
33506
  height: 32,
33431
33507
  viewBox: "0 0 32.01 32.01",
@@ -33436,7 +33512,7 @@ function SvgRecordButton(props) {
33436
33512
  cy: 16,
33437
33513
  r: 16,
33438
33514
  fill: "CurrentColor"
33439
- })), _path$1b || (_path$1b = /*#__PURE__*/React.createElement("path", {
33515
+ })), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
33440
33516
  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",
33441
33517
  fill: "#fff"
33442
33518
  })), _path2$6 || (_path2$6 = /*#__PURE__*/React.createElement("path", {
@@ -34068,7 +34144,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
34068
34144
  backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
34069
34145
  background = _useColor[THEME_COLORS.BACKGROUND],
34070
34146
  textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
34071
- highlightedBackground = _useColor[THEME_COLORS.HIGHLIGHTED_BACKGROUND];
34147
+ highlightedBackground = _useColor[THEME_COLORS.HIGHLIGHTED_BACKGROUND],
34148
+ textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
34072
34149
  var dispatch = reactRedux.useDispatch();
34073
34150
  var ChatClient = getClient();
34074
34151
  var user = ChatClient.user;
@@ -35290,7 +35367,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
35290
35367
  isRepliedMessage: true
35291
35368
  })) : messageForReply.attachments[0].type === attachmentTypes.file && (/*#__PURE__*/React__default.createElement(ReplyIconWrapper, {
35292
35369
  backgroundColor: accentColor,
35293
- iconColor: textPrimary
35370
+ iconColor: textOnPrimary
35294
35371
  }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, null, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
35295
35372
  color: accentColor
35296
35373
  }, 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({
@@ -35619,23 +35696,23 @@ var CloseIconWrapper = styled__default.span(_templateObject34$1 || (_templateObj
35619
35696
  return props.color;
35620
35697
  });
35621
35698
 
35622
- var _path$1c;
35623
- function _extends$1g() {
35624
- return _extends$1g = Object.assign ? Object.assign.bind() : function (n) {
35699
+ var _path$1d;
35700
+ function _extends$1h() {
35701
+ return _extends$1h = Object.assign ? Object.assign.bind() : function (n) {
35625
35702
  for (var e = 1; e < arguments.length; e++) {
35626
35703
  var t = arguments[e];
35627
35704
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35628
35705
  }
35629
35706
  return n;
35630
- }, _extends$1g.apply(null, arguments);
35707
+ }, _extends$1h.apply(null, arguments);
35631
35708
  }
35632
35709
  function SvgBottom(props) {
35633
- return /*#__PURE__*/React.createElement("svg", _extends$1g({
35710
+ return /*#__PURE__*/React.createElement("svg", _extends$1h({
35634
35711
  width: 12,
35635
35712
  height: 7,
35636
35713
  fill: "none",
35637
35714
  xmlns: "http://www.w3.org/2000/svg"
35638
- }, props), _path$1c || (_path$1c = /*#__PURE__*/React.createElement("path", {
35715
+ }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
35639
35716
  d: "M1.5 1.5l4.5 4 4.5-4",
35640
35717
  stroke: "#676A7C",
35641
35718
  strokeWidth: 1.4,
@@ -35644,24 +35721,24 @@ function SvgBottom(props) {
35644
35721
  })));
35645
35722
  }
35646
35723
 
35647
- var _path$1d, _path2$7;
35648
- function _extends$1h() {
35649
- return _extends$1h = Object.assign ? Object.assign.bind() : function (n) {
35724
+ var _path$1e, _path2$7;
35725
+ function _extends$1i() {
35726
+ return _extends$1i = Object.assign ? Object.assign.bind() : function (n) {
35650
35727
  for (var e = 1; e < arguments.length; e++) {
35651
35728
  var t = arguments[e];
35652
35729
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35653
35730
  }
35654
35731
  return n;
35655
- }, _extends$1h.apply(null, arguments);
35732
+ }, _extends$1i.apply(null, arguments);
35656
35733
  }
35657
35734
  function SvgMarkAsUnRead(props) {
35658
- return /*#__PURE__*/React.createElement("svg", _extends$1h({
35735
+ return /*#__PURE__*/React.createElement("svg", _extends$1i({
35659
35736
  width: 20,
35660
35737
  height: 20,
35661
35738
  viewBox: "0 0 20.01 20.01",
35662
35739
  fill: "none",
35663
35740
  xmlns: "http://www.w3.org/2000/svg"
35664
- }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
35741
+ }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
35665
35742
  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",
35666
35743
  fill: "currentColor"
35667
35744
  })), _path2$7 || (_path2$7 = /*#__PURE__*/React.createElement("path", {
@@ -35670,24 +35747,24 @@ function SvgMarkAsUnRead(props) {
35670
35747
  })));
35671
35748
  }
35672
35749
 
35673
- var _path$1e;
35674
- function _extends$1i() {
35675
- return _extends$1i = Object.assign ? Object.assign.bind() : function (n) {
35750
+ var _path$1f;
35751
+ function _extends$1j() {
35752
+ return _extends$1j = Object.assign ? Object.assign.bind() : function (n) {
35676
35753
  for (var e = 1; e < arguments.length; e++) {
35677
35754
  var t = arguments[e];
35678
35755
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35679
35756
  }
35680
35757
  return n;
35681
- }, _extends$1i.apply(null, arguments);
35758
+ }, _extends$1j.apply(null, arguments);
35682
35759
  }
35683
35760
  function SvgMarkAsRead(props) {
35684
- return /*#__PURE__*/React.createElement("svg", _extends$1i({
35761
+ return /*#__PURE__*/React.createElement("svg", _extends$1j({
35685
35762
  width: 20,
35686
35763
  height: 20,
35687
35764
  viewBox: "0 0 20.01 20.01",
35688
35765
  fill: "none",
35689
35766
  xmlns: "http://www.w3.org/2000/svg"
35690
- }, props), _path$1e || (_path$1e = /*#__PURE__*/React.createElement("path", {
35767
+ }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
35691
35768
  fillRule: "evenodd",
35692
35769
  clipRule: "evenodd",
35693
35770
  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",
@@ -35695,23 +35772,23 @@ function SvgMarkAsRead(props) {
35695
35772
  })));
35696
35773
  }
35697
35774
 
35698
- var _path$1f;
35699
- function _extends$1j() {
35700
- return _extends$1j = Object.assign ? Object.assign.bind() : function (n) {
35775
+ var _path$1g;
35776
+ function _extends$1k() {
35777
+ return _extends$1k = Object.assign ? Object.assign.bind() : function (n) {
35701
35778
  for (var e = 1; e < arguments.length; e++) {
35702
35779
  var t = arguments[e];
35703
35780
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35704
35781
  }
35705
35782
  return n;
35706
- }, _extends$1j.apply(null, arguments);
35783
+ }, _extends$1k.apply(null, arguments);
35707
35784
  }
35708
35785
  function SvgClear(props) {
35709
- return /*#__PURE__*/React.createElement("svg", _extends$1j({
35786
+ return /*#__PURE__*/React.createElement("svg", _extends$1k({
35710
35787
  width: 20,
35711
35788
  height: 21,
35712
35789
  fill: "none",
35713
35790
  xmlns: "http://www.w3.org/2000/svg"
35714
- }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
35791
+ }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
35715
35792
  fillRule: "evenodd",
35716
35793
  clipRule: "evenodd",
35717
35794
  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",
@@ -35719,46 +35796,46 @@ function SvgClear(props) {
35719
35796
  })));
35720
35797
  }
35721
35798
 
35722
- var _path$1g;
35723
- function _extends$1k() {
35724
- return _extends$1k = Object.assign ? Object.assign.bind() : function (n) {
35799
+ var _path$1h;
35800
+ function _extends$1l() {
35801
+ return _extends$1l = 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$1k.apply(null, arguments);
35807
+ }, _extends$1l.apply(null, arguments);
35731
35808
  }
35732
35809
  function SvgBlockChannel(props) {
35733
- return /*#__PURE__*/React.createElement("svg", _extends$1k({
35810
+ return /*#__PURE__*/React.createElement("svg", _extends$1l({
35734
35811
  width: 20,
35735
35812
  height: 21,
35736
35813
  viewBox: "0 0 20.01 21.01",
35737
35814
  fill: "none",
35738
35815
  xmlns: "http://www.w3.org/2000/svg"
35739
- }, props), _path$1g || (_path$1g = /*#__PURE__*/React.createElement("path", {
35816
+ }, props), _path$1h || (_path$1h = /*#__PURE__*/React.createElement("path", {
35740
35817
  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",
35741
35818
  fill: "CurrentColor"
35742
35819
  })));
35743
35820
  }
35744
35821
 
35745
- var _path$1h, _path2$8;
35746
- function _extends$1l() {
35747
- return _extends$1l = Object.assign ? Object.assign.bind() : function (n) {
35822
+ var _path$1i, _path2$8;
35823
+ function _extends$1m() {
35824
+ return _extends$1m = Object.assign ? Object.assign.bind() : function (n) {
35748
35825
  for (var e = 1; e < arguments.length; e++) {
35749
35826
  var t = arguments[e];
35750
35827
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35751
35828
  }
35752
35829
  return n;
35753
- }, _extends$1l.apply(null, arguments);
35830
+ }, _extends$1m.apply(null, arguments);
35754
35831
  }
35755
35832
  function SvgReport(props) {
35756
- return /*#__PURE__*/React.createElement("svg", _extends$1l({
35833
+ return /*#__PURE__*/React.createElement("svg", _extends$1m({
35757
35834
  width: 20,
35758
35835
  height: 21,
35759
35836
  fill: "none",
35760
35837
  xmlns: "http://www.w3.org/2000/svg"
35761
- }, props), _path$1h || (_path$1h = /*#__PURE__*/React.createElement("path", {
35838
+ }, props), _path$1i || (_path$1i = /*#__PURE__*/React.createElement("path", {
35762
35839
  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",
35763
35840
  fill: "CurrentColor"
35764
35841
  })), _path2$8 || (_path2$8 = /*#__PURE__*/React.createElement("path", {
@@ -35769,46 +35846,46 @@ function SvgReport(props) {
35769
35846
  })));
35770
35847
  }
35771
35848
 
35772
- var _path$1i;
35773
- function _extends$1m() {
35774
- return _extends$1m = Object.assign ? Object.assign.bind() : function (n) {
35849
+ var _path$1j;
35850
+ function _extends$1n() {
35851
+ return _extends$1n = Object.assign ? Object.assign.bind() : function (n) {
35775
35852
  for (var e = 1; e < arguments.length; e++) {
35776
35853
  var t = arguments[e];
35777
35854
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35778
35855
  }
35779
35856
  return n;
35780
- }, _extends$1m.apply(null, arguments);
35857
+ }, _extends$1n.apply(null, arguments);
35781
35858
  }
35782
35859
  function SvgStar(props) {
35783
- return /*#__PURE__*/React.createElement("svg", _extends$1m({
35860
+ return /*#__PURE__*/React.createElement("svg", _extends$1n({
35784
35861
  width: 20,
35785
35862
  height: 20,
35786
35863
  fill: "none",
35787
35864
  xmlns: "http://www.w3.org/2000/svg"
35788
- }, props), _path$1i || (_path$1i = /*#__PURE__*/React.createElement("path", {
35865
+ }, props), _path$1j || (_path$1j = /*#__PURE__*/React.createElement("path", {
35789
35866
  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",
35790
35867
  fill: "#B2B6BE"
35791
35868
  })));
35792
35869
  }
35793
35870
 
35794
- var _path$1j;
35795
- function _extends$1n() {
35796
- return _extends$1n = Object.assign ? Object.assign.bind() : function (n) {
35871
+ var _path$1k;
35872
+ function _extends$1o() {
35873
+ return _extends$1o = Object.assign ? Object.assign.bind() : function (n) {
35797
35874
  for (var e = 1; e < arguments.length; e++) {
35798
35875
  var t = arguments[e];
35799
35876
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
35800
35877
  }
35801
35878
  return n;
35802
- }, _extends$1n.apply(null, arguments);
35879
+ }, _extends$1o.apply(null, arguments);
35803
35880
  }
35804
35881
  function SvgUnpin(props) {
35805
- return /*#__PURE__*/React.createElement("svg", _extends$1n({
35882
+ return /*#__PURE__*/React.createElement("svg", _extends$1o({
35806
35883
  width: 20,
35807
35884
  height: 21,
35808
35885
  viewBox: "0 0 20.01 21.01",
35809
35886
  fill: "none",
35810
35887
  xmlns: "http://www.w3.org/2000/svg"
35811
- }, props), _path$1j || (_path$1j = /*#__PURE__*/React.createElement("path", {
35888
+ }, props), _path$1k || (_path$1k = /*#__PURE__*/React.createElement("path", {
35812
35889
  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",
35813
35890
  fill: "CurrentColor"
35814
35891
  })));
@@ -36314,18 +36391,18 @@ var ActionItem = styled__default.li(_templateObject16$3 || (_templateObject16$3
36314
36391
  return props.hoverColor;
36315
36392
  });
36316
36393
 
36317
- var _rect$2, _rect2, _path$1k;
36318
- function _extends$1o() {
36319
- return _extends$1o = Object.assign ? Object.assign.bind() : function (n) {
36394
+ var _rect$2, _rect2, _path$1l;
36395
+ function _extends$1p() {
36396
+ return _extends$1p = Object.assign ? Object.assign.bind() : function (n) {
36320
36397
  for (var e = 1; e < arguments.length; e++) {
36321
36398
  var t = arguments[e];
36322
36399
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36323
36400
  }
36324
36401
  return n;
36325
- }, _extends$1o.apply(null, arguments);
36402
+ }, _extends$1p.apply(null, arguments);
36326
36403
  }
36327
36404
  function SvgAddMember(props) {
36328
- return /*#__PURE__*/React.createElement("svg", _extends$1o({
36405
+ return /*#__PURE__*/React.createElement("svg", _extends$1p({
36329
36406
  width: 40,
36330
36407
  height: 40,
36331
36408
  viewBox: "0 0 40.01 40.01",
@@ -36345,29 +36422,29 @@ function SvgAddMember(props) {
36345
36422
  stroke: "#000",
36346
36423
  strokeOpacity: 0.08,
36347
36424
  strokeWidth: 0.5
36348
- })), _path$1k || (_path$1k = /*#__PURE__*/React.createElement("path", {
36425
+ })), _path$1l || (_path$1l = /*#__PURE__*/React.createElement("path", {
36349
36426
  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",
36350
36427
  fill: "CurrentColor"
36351
36428
  })));
36352
36429
  }
36353
36430
 
36354
- var _path$1l;
36355
- function _extends$1p() {
36356
- return _extends$1p = Object.assign ? Object.assign.bind() : function (n) {
36431
+ var _path$1m;
36432
+ function _extends$1q() {
36433
+ return _extends$1q = Object.assign ? Object.assign.bind() : function (n) {
36357
36434
  for (var e = 1; e < arguments.length; e++) {
36358
36435
  var t = arguments[e];
36359
36436
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36360
36437
  }
36361
36438
  return n;
36362
- }, _extends$1p.apply(null, arguments);
36439
+ }, _extends$1q.apply(null, arguments);
36363
36440
  }
36364
36441
  function SvgMoreVert(props) {
36365
- return /*#__PURE__*/React.createElement("svg", _extends$1p({
36442
+ return /*#__PURE__*/React.createElement("svg", _extends$1q({
36366
36443
  width: 4,
36367
36444
  height: 14,
36368
36445
  fill: "none",
36369
36446
  xmlns: "http://www.w3.org/2000/svg"
36370
- }, props), _path$1l || (_path$1l = /*#__PURE__*/React.createElement("path", {
36447
+ }, props), _path$1m || (_path$1m = /*#__PURE__*/React.createElement("path", {
36371
36448
  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",
36372
36449
  fill: "#9B9DA8"
36373
36450
  })));
@@ -36860,18 +36937,18 @@ var Media = function Media(_ref) {
36860
36937
  var Container$n = styled__default.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"])));
36861
36938
  var MediaItem = styled__default.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"])));
36862
36939
 
36863
- var _rect$3, _path$1m;
36864
- function _extends$1q() {
36865
- return _extends$1q = Object.assign ? Object.assign.bind() : function (n) {
36940
+ var _rect$3, _path$1n;
36941
+ function _extends$1r() {
36942
+ return _extends$1r = Object.assign ? Object.assign.bind() : function (n) {
36866
36943
  for (var e = 1; e < arguments.length; e++) {
36867
36944
  var t = arguments[e];
36868
36945
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36869
36946
  }
36870
36947
  return n;
36871
- }, _extends$1q.apply(null, arguments);
36948
+ }, _extends$1r.apply(null, arguments);
36872
36949
  }
36873
36950
  function SvgFileIcon$1(props) {
36874
- return /*#__PURE__*/React.createElement("svg", _extends$1q({
36951
+ return /*#__PURE__*/React.createElement("svg", _extends$1r({
36875
36952
  width: 40,
36876
36953
  height: 40,
36877
36954
  fill: "none",
@@ -36883,7 +36960,7 @@ function SvgFileIcon$1(props) {
36883
36960
  rx: 8,
36884
36961
  fill: "currentColor",
36885
36962
  fillOpacity: 0.2
36886
- })), _path$1m || (_path$1m = /*#__PURE__*/React.createElement("path", {
36963
+ })), _path$1n || (_path$1n = /*#__PURE__*/React.createElement("path", {
36887
36964
  fillRule: "evenodd",
36888
36965
  clipRule: "evenodd",
36889
36966
  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",
@@ -36891,23 +36968,23 @@ function SvgFileIcon$1(props) {
36891
36968
  })));
36892
36969
  }
36893
36970
 
36894
- var _path$1n;
36895
- function _extends$1r() {
36896
- return _extends$1r = Object.assign ? Object.assign.bind() : function (n) {
36971
+ var _path$1o;
36972
+ function _extends$1s() {
36973
+ return _extends$1s = Object.assign ? Object.assign.bind() : function (n) {
36897
36974
  for (var e = 1; e < arguments.length; e++) {
36898
36975
  var t = arguments[e];
36899
36976
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
36900
36977
  }
36901
36978
  return n;
36902
- }, _extends$1r.apply(null, arguments);
36979
+ }, _extends$1s.apply(null, arguments);
36903
36980
  }
36904
36981
  function SvgDownloadFile(props) {
36905
- return /*#__PURE__*/React.createElement("svg", _extends$1r({
36982
+ return /*#__PURE__*/React.createElement("svg", _extends$1s({
36906
36983
  width: 24,
36907
36984
  height: 24,
36908
36985
  xmlns: "http://www.w3.org/2000/svg",
36909
36986
  fill: "currentColor"
36910
- }, props), _path$1n || (_path$1n = /*#__PURE__*/React.createElement("path", {
36987
+ }, props), _path$1o || (_path$1o = /*#__PURE__*/React.createElement("path", {
36911
36988
  fillRule: "evenodd",
36912
36989
  clipRule: "evenodd",
36913
36990
  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"
@@ -37062,18 +37139,18 @@ var FileSizeAndDate = styled__default.span(_templateObject8$i || (_templateObjec
37062
37139
  return props.color;
37063
37140
  });
37064
37141
 
37065
- var _rect$4, _path$1o;
37066
- function _extends$1s() {
37067
- return _extends$1s = Object.assign ? Object.assign.bind() : function (n) {
37142
+ var _rect$4, _path$1p;
37143
+ function _extends$1t() {
37144
+ return _extends$1t = Object.assign ? Object.assign.bind() : function (n) {
37068
37145
  for (var e = 1; e < arguments.length; e++) {
37069
37146
  var t = arguments[e];
37070
37147
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37071
37148
  }
37072
37149
  return n;
37073
- }, _extends$1s.apply(null, arguments);
37150
+ }, _extends$1t.apply(null, arguments);
37074
37151
  }
37075
37152
  function SvgLinkIcon(props) {
37076
- return /*#__PURE__*/React.createElement("svg", _extends$1s({
37153
+ return /*#__PURE__*/React.createElement("svg", _extends$1t({
37077
37154
  width: 40,
37078
37155
  height: 40,
37079
37156
  fill: "none",
@@ -37085,7 +37162,7 @@ function SvgLinkIcon(props) {
37085
37162
  rx: 8,
37086
37163
  fill: "currentColor",
37087
37164
  fillOpacity: 0.2
37088
- })), _path$1o || (_path$1o = /*#__PURE__*/React.createElement("path", {
37165
+ })), _path$1p || (_path$1p = /*#__PURE__*/React.createElement("path", {
37089
37166
  fillRule: "evenodd",
37090
37167
  clipRule: "evenodd",
37091
37168
  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",
@@ -37169,18 +37246,18 @@ var Links = function Links(_ref) {
37169
37246
  };
37170
37247
  var Container$p = styled__default.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"])));
37171
37248
 
37172
- var _rect$5, _path$1p;
37173
- function _extends$1t() {
37174
- return _extends$1t = Object.assign ? Object.assign.bind() : function (n) {
37249
+ var _rect$5, _path$1q;
37250
+ function _extends$1u() {
37251
+ return _extends$1u = Object.assign ? Object.assign.bind() : function (n) {
37175
37252
  for (var e = 1; e < arguments.length; e++) {
37176
37253
  var t = arguments[e];
37177
37254
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37178
37255
  }
37179
37256
  return n;
37180
- }, _extends$1t.apply(null, arguments);
37257
+ }, _extends$1u.apply(null, arguments);
37181
37258
  }
37182
37259
  function SvgVoicePreview(props) {
37183
- return /*#__PURE__*/React.createElement("svg", _extends$1t({
37260
+ return /*#__PURE__*/React.createElement("svg", _extends$1u({
37184
37261
  width: 40,
37185
37262
  height: 40,
37186
37263
  fill: "none",
@@ -37190,24 +37267,24 @@ function SvgVoicePreview(props) {
37190
37267
  height: 40,
37191
37268
  rx: 20,
37192
37269
  fill: "#5159F6"
37193
- })), _path$1p || (_path$1p = /*#__PURE__*/React.createElement("path", {
37270
+ })), _path$1q || (_path$1q = /*#__PURE__*/React.createElement("path", {
37194
37271
  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",
37195
37272
  fill: "#fff"
37196
37273
  })));
37197
37274
  }
37198
37275
 
37199
- var _rect$6, _path$1q;
37200
- function _extends$1u() {
37201
- return _extends$1u = Object.assign ? Object.assign.bind() : function (n) {
37276
+ var _rect$6, _path$1r;
37277
+ function _extends$1v() {
37278
+ return _extends$1v = Object.assign ? Object.assign.bind() : function (n) {
37202
37279
  for (var e = 1; e < arguments.length; e++) {
37203
37280
  var t = arguments[e];
37204
37281
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
37205
37282
  }
37206
37283
  return n;
37207
- }, _extends$1u.apply(null, arguments);
37284
+ }, _extends$1v.apply(null, arguments);
37208
37285
  }
37209
37286
  function SvgVoicePreviewPause(props) {
37210
- return /*#__PURE__*/React.createElement("svg", _extends$1u({
37287
+ return /*#__PURE__*/React.createElement("svg", _extends$1v({
37211
37288
  width: 40,
37212
37289
  height: 40,
37213
37290
  fill: "none",
@@ -37217,7 +37294,7 @@ function SvgVoicePreviewPause(props) {
37217
37294
  height: 40,
37218
37295
  rx: 20,
37219
37296
  fill: "#5159F6"
37220
- })), _path$1q || (_path$1q = /*#__PURE__*/React.createElement("path", {
37297
+ })), _path$1r || (_path$1r = /*#__PURE__*/React.createElement("path", {
37221
37298
  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",
37222
37299
  fill: "#fff"
37223
37300
  })));
@@ -37232,7 +37309,8 @@ var VoiceItem = function VoiceItem(_ref) {
37232
37309
  voicePreviewPauseHoverIcon = _ref.voicePreviewPauseHoverIcon,
37233
37310
  voicePreviewTitleColor = _ref.voicePreviewTitleColor,
37234
37311
  voicePreviewDateAndTimeColor = _ref.voicePreviewDateAndTimeColor,
37235
- voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor;
37312
+ voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor,
37313
+ messageType = _ref.messageType;
37236
37314
  var _useColor = useColors(),
37237
37315
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
37238
37316
  textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
@@ -37299,7 +37377,7 @@ var VoiceItem = function VoiceItem(_ref) {
37299
37377
  }, [playingAudioId]);
37300
37378
  React.useEffect(function () {
37301
37379
  if (customDownloader) {
37302
- customDownloader(file.url, false).then(function (url) {
37380
+ customDownloader(file.url, false, function () {}, messageType).then(function (url) {
37303
37381
  setFileUrl(url);
37304
37382
  });
37305
37383
  } else {
@@ -38502,23 +38580,23 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
38502
38580
  };
38503
38581
  var DetailsWrapper = styled__default.div(_templateObject$V || (_templateObject$V = _taggedTemplateLiteralLoose([""])));
38504
38582
 
38505
- var _path$1r;
38506
- function _extends$1v() {
38507
- return _extends$1v = Object.assign ? Object.assign.bind() : function (n) {
38583
+ var _path$1s;
38584
+ function _extends$1w() {
38585
+ return _extends$1w = Object.assign ? Object.assign.bind() : function (n) {
38508
38586
  for (var e = 1; e < arguments.length; e++) {
38509
38587
  var t = arguments[e];
38510
38588
  for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
38511
38589
  }
38512
38590
  return n;
38513
- }, _extends$1v.apply(null, arguments);
38591
+ }, _extends$1w.apply(null, arguments);
38514
38592
  }
38515
38593
  function SvgChevronDown(props) {
38516
- return /*#__PURE__*/React.createElement("svg", _extends$1v({
38594
+ return /*#__PURE__*/React.createElement("svg", _extends$1w({
38517
38595
  width: 32,
38518
38596
  height: 32,
38519
38597
  fill: "none",
38520
38598
  xmlns: "http://www.w3.org/2000/svg"
38521
- }, props), _path$1r || (_path$1r = /*#__PURE__*/React.createElement("path", {
38599
+ }, props), _path$1s || (_path$1s = /*#__PURE__*/React.createElement("path", {
38522
38600
  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",
38523
38601
  fill: "CurrentColor"
38524
38602
  })));