sceyt-chat-react-uikit 1.7.8-beta.17 → 1.7.8-beta.18

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 (4) hide show
  1. package/components/SendMessageInput/MentionsPlugin/index.d.ts +2 -1
  2. package/index.js +150 -73
  3. package/index.modern.js +150 -73
  4. package/package.json +1 -1
package/components/SendMessageInput/MentionsPlugin/index.d.ts CHANGED
@@ -8,13 +8,14 @@ export declare class MentionTypeaheadOption extends MenuOption {
8
8
  avatarUrl?: string;
9
9
  constructor(name: string, id: string, presence?: any, avatarUrl?: string);
10
10
  }
11
- export default function MentionsPlugin({ contactsMap, userId, getFromContacts, setMentionMember, setMentionsIsOpen, members }: {
11
+ export default function MentionsPlugin({ contactsMap, userId, getFromContacts, setMentionMember, setMentionsIsOpen, members, channelId }: {
12
12
  contactsMap: IContactsMap;
13
13
  userId: string;
14
14
  getFromContacts?: boolean;
15
15
  setMentionMember: (member: any) => void;
16
16
  setMentionsIsOpen: (state: boolean) => void;
17
17
  members: IMember[];
18
+ channelId?: string;
18
19
  }): JSX.Element | null;
19
20
  export declare const MentionsContainerWrapper: import("styled-components").StyledComponent<"div", any, {
20
21
  mentionsIsOpen?: boolean | undefined;
package/index.js CHANGED
@@ -9793,10 +9793,6 @@ var CHANNEL_EVENT_TYPES = {
9793
9793
  REACTION_ADDED: 'REACTION_ADDED',
9794
9794
  REACTION_DELETED: 'REACTION_DELETED',
9795
9795
  EDIT_MESSAGE: 'EDIT_MESSAGE',
9796
- START_TYPING: 'START_TYPING',
9797
- STOP_TYPING: 'STOP_TYPING',
9798
- START_RECORDING: 'START_RECORDING',
9799
- STOP_RECORDING: 'STOP_RECORDING',
9800
9796
  MESSAGE_MARKERS_RECEIVED: 'MESSAGE_MARKERS_RECEIVED',
9801
9797
  UNREAD_MESSAGES_INFO: 'UNREAD_MESSAGES_INFO',
9802
9798
  HIDE: 'HIDE',
@@ -12209,7 +12205,7 @@ var userSlice = createSlice({
12209
12205
  state.usersLoadingState = action.payload.state;
12210
12206
  },
12211
12207
  updateUserMap: function updateUserMap(state, action) {
12212
- state.updatedUserMap = action.payload.usersMap;
12208
+ state.updatedUserMap = _extends({}, state.updatedUserMap, action.payload.usersMap);
12213
12209
  },
12214
12210
  setContacts: function setContacts(state, action) {
12215
12211
  var contacts = action.payload.contacts;
@@ -13417,6 +13413,9 @@ var usersLoadingStateSelector = function usersLoadingStateSelector(store) {
13417
13413
  var browserTabIsActiveSelector = function browserTabIsActiveSelector(store) {
13418
13414
  return store.UserReducer.browserTabIsActive;
13419
13415
  };
13416
+ var usersMapSelector = function usersMapSelector(store) {
13417
+ return store.UserReducer.updatedUserMap;
13418
+ };
13420
13419
 
13421
13420
  var _path;
13422
13421
  function _extends$1() {
@@ -14144,6 +14143,15 @@ var MessageStatusIcon = function MessageStatusIcon(_ref) {
14144
14143
  size = _ref.size,
14145
14144
  accentColor = _ref.accentColor;
14146
14145
  switch (messageStatus) {
14146
+ case MESSAGE_DELIVERY_STATUS.PLAYED:
14147
+ return messageStatusDisplayingType === 'ticks' ? (/*#__PURE__*/React__default.createElement(ReadIconWrapper, {
14148
+ width: size,
14149
+ height: size,
14150
+ color: readIconColor || accentColor
14151
+ })) : (/*#__PURE__*/React__default.createElement(StatusText, {
14152
+ fontSize: size,
14153
+ color: color
14154
+ }, "\u2022 Seen"));
14147
14155
  case MESSAGE_DELIVERY_STATUS.READ:
14148
14156
  return messageStatusDisplayingType === 'ticks' ? (/*#__PURE__*/React__default.createElement(ReadIconWrapper, {
14149
14157
  width: size,
@@ -19815,7 +19823,7 @@ function sendMessage(action) {
19815
19823
  messagesToSend.push(messageToSend);
19816
19824
  case 12:
19817
19825
  _loop2 = /*#__PURE__*/_regenerator().m(function _callee3() {
19818
- var messageAttachment, messageToSend, messageCopy, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, pendingAttachment, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, stringifiedMessageUpdateData, activeChannelId, channelUpdateParam, isErrorResendable, _t;
19826
+ var messageAttachment, messageToSend, messageCopy, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, pendingAttachment, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, stringifiedMessageUpdateData, activeChannelId, messageToUpdate, channelUpdateParam, isErrorResendable, _t;
19819
19827
  return _regenerator().w(function (_context3) {
19820
19828
  while (1) switch (_context3.p = _context3.n) {
19821
19829
  case 0:
@@ -19917,7 +19925,7 @@ function sendMessage(action) {
19917
19925
  createdAt: messageResponse.createdAt,
19918
19926
  channelId: channel.id
19919
19927
  };
19920
- stringifiedMessageUpdateData = JSON.parse(JSON.stringify(messageUpdateData));
19928
+ stringifiedMessageUpdateData = JSON.parse(JSON.stringify(messageResponse));
19921
19929
  activeChannelId = getActiveChannelId();
19922
19930
  if (!(activeChannelId === channel.id)) {
19923
19931
  _context3.n = 9;
@@ -19929,11 +19937,12 @@ function sendMessage(action) {
19929
19937
  _context3.n = 10;
19930
19938
  return effects.put(removePendingMessageAC(channel.id, messageToSend.tid));
19931
19939
  case 10:
19932
- addMessageToMap(channel.id, stringifiedMessageUpdateData);
19933
19940
  updateMessageOnAllMessages(messageToSend.tid, messageUpdateData);
19934
- updateChannelLastMessageOnAllChannels(channel.id, stringifiedMessageUpdateData);
19941
+ messageToUpdate = JSON.parse(JSON.stringify(messageResponse));
19942
+ addMessageToMap(channel.id, messageToUpdate);
19943
+ updateChannelLastMessageOnAllChannels(channel.id, messageToUpdate);
19935
19944
  channelUpdateParam = {
19936
- lastMessage: stringifiedMessageUpdateData,
19945
+ lastMessage: messageToUpdate,
19937
19946
  lastReactedMessage: null
19938
19947
  };
19939
19948
  if (!channel.unread) {
@@ -23836,6 +23845,24 @@ var useColors = function useColors() {
23836
23845
  }, [theme.colors, currentThemeMode]);
23837
23846
  };
23838
23847
 
23848
+ function useUpdatedUser(user) {
23849
+ var dispatch = useDispatch();
23850
+ var usersMap = useSelector(usersMapSelector);
23851
+ React.useEffect(function () {
23852
+ if (user !== null && user !== void 0 && user.id && !usersMap[user.id]) {
23853
+ var _updateUserStatusOnMa;
23854
+ setUserToMap(user);
23855
+ dispatch(updateUserStatusOnMapAC((_updateUserStatusOnMa = {}, _updateUserStatusOnMa[user.id] = user, _updateUserStatusOnMa)));
23856
+ }
23857
+ }, [user === null || user === void 0 ? void 0 : user.id]);
23858
+ return React.useMemo(function () {
23859
+ if (!(user !== null && user !== void 0 && user.id)) {
23860
+ return user;
23861
+ }
23862
+ return usersMap[user.id] || user;
23863
+ }, [user, usersMap]);
23864
+ }
23865
+
23839
23866
  function setThemeAC(theme) {
23840
23867
  return {
23841
23868
  type: SET_THEME,
@@ -26008,30 +26035,43 @@ var Title$1 = styled__default.h4(_templateObject4$6 || (_templateObject4$6 = _ta
26008
26035
  });
26009
26036
 
26010
26037
  var _templateObject$b, _templateObject2$a, _templateObject3$8, _templateObject4$7, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$2;
26011
- var UsersPopup = function UsersPopup(_ref) {
26012
- var channel = _ref.channel,
26013
- toggleCreatePopup = _ref.toggleCreatePopup,
26014
- actionType = _ref.actionType,
26015
- getSelectedUsers = _ref.getSelectedUsers,
26016
- memberIds = _ref.memberIds,
26017
- creatChannelSelectedMembers = _ref.creatChannelSelectedMembers,
26018
- popupHeight = _ref.popupHeight,
26019
- selectIsRequired = _ref.selectIsRequired,
26020
- popupWidth = _ref.popupWidth,
26021
- handleOpenInviteModal = _ref.handleOpenInviteModal;
26038
+ var UserItem = function UserItem(_ref) {
26039
+ var user = _ref.user,
26040
+ memberDisplayName = _ref.memberDisplayName;
26022
26041
  var _useColor = useColors(),
26023
- accentColor = _useColor[THEME_COLORS.ACCENT],
26024
- surface1Background = _useColor[THEME_COLORS.SURFACE_1],
26025
26042
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
26026
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
26027
- iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
26028
- backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
26029
- background = _useColor[THEME_COLORS.BACKGROUND],
26030
- border = _useColor[THEME_COLORS.BORDER],
26031
- textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
26032
- surface1 = _useColor[THEME_COLORS.SURFACE_1],
26033
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
26034
- surface2 = _useColor[THEME_COLORS.SURFACE_2];
26043
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
26044
+ var userUpdated = useUpdatedUser(user);
26045
+ return /*#__PURE__*/React__default.createElement(UserNamePresence, null, /*#__PURE__*/React__default.createElement(MemberName, {
26046
+ color: textPrimary
26047
+ }, memberDisplayName), /*#__PURE__*/React__default.createElement(SubTitle, {
26048
+ color: textSecondary
26049
+ }, userUpdated.presence && userUpdated.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : userUpdated.presence && userUpdated.presence.lastActiveAt && userLastActiveDateFormat(userUpdated.presence.lastActiveAt)));
26050
+ };
26051
+ var UsersPopup = function UsersPopup(_ref2) {
26052
+ var channel = _ref2.channel,
26053
+ toggleCreatePopup = _ref2.toggleCreatePopup,
26054
+ actionType = _ref2.actionType,
26055
+ getSelectedUsers = _ref2.getSelectedUsers,
26056
+ memberIds = _ref2.memberIds,
26057
+ creatChannelSelectedMembers = _ref2.creatChannelSelectedMembers,
26058
+ popupHeight = _ref2.popupHeight,
26059
+ selectIsRequired = _ref2.selectIsRequired,
26060
+ popupWidth = _ref2.popupWidth,
26061
+ handleOpenInviteModal = _ref2.handleOpenInviteModal;
26062
+ var _useColor2 = useColors(),
26063
+ accentColor = _useColor2[THEME_COLORS.ACCENT],
26064
+ surface1Background = _useColor2[THEME_COLORS.SURFACE_1],
26065
+ textPrimary = _useColor2[THEME_COLORS.TEXT_PRIMARY],
26066
+ textSecondary = _useColor2[THEME_COLORS.TEXT_SECONDARY],
26067
+ iconInactive = _useColor2[THEME_COLORS.ICON_INACTIVE],
26068
+ backgroundHovered = _useColor2[THEME_COLORS.BACKGROUND_HOVERED],
26069
+ background = _useColor2[THEME_COLORS.BACKGROUND],
26070
+ border = _useColor2[THEME_COLORS.BORDER],
26071
+ textFootnote = _useColor2[THEME_COLORS.TEXT_FOOTNOTE],
26072
+ surface1 = _useColor2[THEME_COLORS.SURFACE_1],
26073
+ textOnPrimary = _useColor2[THEME_COLORS.TEXT_ON_PRIMARY],
26074
+ surface2 = _useColor2[THEME_COLORS.SURFACE_2];
26035
26075
  var dispatch = useDispatch();
26036
26076
  var ChatClient = getClient();
26037
26077
  var selfUser = ChatClient.user;
@@ -26306,11 +26346,10 @@ var UsersPopup = function UsersPopup(_ref) {
26306
26346
  size: 40,
26307
26347
  textSize: 16,
26308
26348
  setDefaultAvatar: true
26309
- }), /*#__PURE__*/React__default.createElement(UserNamePresence, null, /*#__PURE__*/React__default.createElement(MemberName, {
26310
- color: textPrimary
26311
- }, memberDisplayName), /*#__PURE__*/React__default.createElement(SubTitle, {
26312
- color: textSecondary
26313
- }, user.presence && user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : user.presence && user.presence.lastActiveAt && userLastActiveDateFormat(user.presence.lastActiveAt))), actionType !== 'createChat' && (/*#__PURE__*/React__default.createElement(CustomCheckbox, {
26349
+ }), /*#__PURE__*/React__default.createElement(UserItem, {
26350
+ user: user,
26351
+ memberDisplayName: memberDisplayName
26352
+ }), actionType !== 'createChat' && (/*#__PURE__*/React__default.createElement(CustomCheckbox, {
26314
26353
  index: user.id,
26315
26354
  state: isSelected,
26316
26355
  backgroundColor: 'transparent',
@@ -29177,23 +29216,35 @@ var Progress = styled__default.input(_templateObject0$5 || (_templateObject0$5 =
29177
29216
  var FullScreenWrapper = styled__default.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n margin-left: 16px;\n cursor: pointer;\n @media (max-width: 768px) {\n margin-left: 12px;\n & > svg {\n width: 18px;\n height: 18px;\n }\n }\n @media (max-width: 480px) {\n margin-left: auto;\n & > svg {\n width: 16px;\n height: 16px;\n }\n }\n"])));
29178
29217
 
29179
29218
  var _templateObject$n, _templateObject2$k, _templateObject3$h, _templateObject4$e, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$8, _templateObject9$7, _templateObject0$6, _templateObject1$4;
29180
- function ForwardMessagePopup(_ref) {
29181
- var title = _ref.title,
29182
- buttonText = _ref.buttonText,
29183
- togglePopup = _ref.togglePopup,
29184
- handleForward = _ref.handleForward,
29185
- loading = _ref.loading;
29219
+ var ChannelMembersItem = function ChannelMembersItem(_ref) {
29220
+ var channel = _ref.channel,
29221
+ directChannelUser = _ref.directChannelUser,
29222
+ isDirectChannel = _ref.isDirectChannel;
29186
29223
  var _useColor = useColors(),
29187
- accentColor = _useColor[THEME_COLORS.ACCENT],
29188
- textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
29189
- surface1 = _useColor[THEME_COLORS.SURFACE_1],
29190
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
29191
- background = _useColor[THEME_COLORS.BACKGROUND],
29192
- iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
29193
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
29194
- iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
29195
- backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
29196
- surface2 = _useColor[THEME_COLORS.SURFACE_2];
29224
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
29225
+ var updatedUser = useUpdatedUser(directChannelUser);
29226
+ var directChannelUserUpdated = isDirectChannel ? updatedUser : directChannelUser;
29227
+ return /*#__PURE__*/React__default.createElement(ChannelMembers, {
29228
+ color: textSecondary
29229
+ }, isDirectChannel && directChannelUserUpdated ? (hideUserPresence && hideUserPresence(directChannelUserUpdated) ? '' : directChannelUserUpdated.presence && directChannelUserUpdated.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUserUpdated && directChannelUserUpdated.presence && directChannelUserUpdated.presence.lastActiveAt && userLastActiveDateFormat(directChannelUserUpdated.presence.lastActiveAt) : (channel === null || channel === void 0 ? void 0 : channel.memberCount) + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'subscribers' : 'subscriber' : (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'members' : 'member') + " ");
29230
+ };
29231
+ function ForwardMessagePopup(_ref2) {
29232
+ var title = _ref2.title,
29233
+ buttonText = _ref2.buttonText,
29234
+ togglePopup = _ref2.togglePopup,
29235
+ handleForward = _ref2.handleForward,
29236
+ loading = _ref2.loading;
29237
+ var _useColor2 = useColors(),
29238
+ accentColor = _useColor2[THEME_COLORS.ACCENT],
29239
+ textPrimary = _useColor2[THEME_COLORS.TEXT_PRIMARY],
29240
+ surface1 = _useColor2[THEME_COLORS.SURFACE_1],
29241
+ textSecondary = _useColor2[THEME_COLORS.TEXT_SECONDARY],
29242
+ background = _useColor2[THEME_COLORS.BACKGROUND],
29243
+ iconInactive = _useColor2[THEME_COLORS.ICON_INACTIVE],
29244
+ textOnPrimary = _useColor2[THEME_COLORS.TEXT_ON_PRIMARY],
29245
+ iconPrimary = _useColor2[THEME_COLORS.ICON_PRIMARY],
29246
+ backgroundHovered = _useColor2[THEME_COLORS.BACKGROUND_HOVERED],
29247
+ surface2 = _useColor2[THEME_COLORS.SURFACE_2];
29197
29248
  var ChatClient = getClient();
29198
29249
  var user = ChatClient.user;
29199
29250
  var dispatch = useDispatch();
@@ -29386,9 +29437,11 @@ function ForwardMessagePopup(_ref) {
29386
29437
  setDefaultAvatar: isDirectChannel
29387
29438
  }), /*#__PURE__*/React__default.createElement(ChannelInfo$3, null, /*#__PURE__*/React__default.createElement(ChannelTitle, {
29388
29439
  color: textPrimary
29389
- }, isDirectChannel ? isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : 'Deleted User' : channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembers, {
29390
- color: textSecondary
29391
- }, isDirectChannel && directChannelUser ? (hideUserPresence && hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUser && directChannelUser.presence && directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt) : (channel === null || channel === void 0 ? void 0 : channel.memberCount) + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'subscribers' : 'subscriber' : (directChannelUser === null || directChannelUser === void 0 ? void 0 : directChannelUser.memberCount) > 1 ? 'members' : 'member') + " ")), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29440
+ }, isDirectChannel ? isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : 'Deleted User' : channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembersItem, {
29441
+ channel: channel,
29442
+ directChannelUser: directChannelUser,
29443
+ isDirectChannel: isDirectChannel
29444
+ })), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29392
29445
  borderColor: iconInactive,
29393
29446
  index: channel.id,
29394
29447
  disabled: selectedChannels.length >= 5 && !isSelected,
@@ -29406,6 +29459,11 @@ function ForwardMessagePopup(_ref) {
29406
29459
  var isSelected = selectedChannels.findIndex(function (chan) {
29407
29460
  return chan.id === channel.id;
29408
29461
  }) >= 0;
29462
+ var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
29463
+ var isSelfChannel = isDirectChannel && channel.memberCount === 1 && channel.members.length > 0 && channel.members[0].id === user.id;
29464
+ var directChannelUser = isDirectChannel && isSelfChannel ? user : channel.members.find(function (member) {
29465
+ return member.id !== user.id;
29466
+ });
29409
29467
  return /*#__PURE__*/React__default.createElement(ChannelItem, {
29410
29468
  key: channel.id,
29411
29469
  onClick: function onClick() {
@@ -29421,9 +29479,11 @@ function ForwardMessagePopup(_ref) {
29421
29479
  setDefaultAvatar: false
29422
29480
  }), /*#__PURE__*/React__default.createElement(ChannelInfo$3, null, /*#__PURE__*/React__default.createElement(ChannelTitle, {
29423
29481
  color: textPrimary
29424
- }, channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembers, {
29425
- color: textSecondary
29426
- }, channel.memberCount + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? channel.memberCount > 1 ? 'subscribers' : 'subscriber' : channel.memberCount > 1 ? 'members' : 'member') + " ")), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29482
+ }, channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembersItem, {
29483
+ channel: channel,
29484
+ directChannelUser: directChannelUser,
29485
+ isDirectChannel: isDirectChannel
29486
+ })), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29427
29487
  borderColor: iconInactive,
29428
29488
  index: channel.id,
29429
29489
  disabled: selectedChannels.length >= 5 && !isSelected,
@@ -29461,9 +29521,11 @@ function ForwardMessagePopup(_ref) {
29461
29521
  setDefaultAvatar: isDirectChannel
29462
29522
  }), /*#__PURE__*/React__default.createElement(ChannelInfo$3, null, /*#__PURE__*/React__default.createElement(ChannelTitle, {
29463
29523
  color: textPrimary
29464
- }, channel.subject || (isDirectChannel && isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), /*#__PURE__*/React__default.createElement(ChannelMembers, {
29465
- color: textSecondary
29466
- }, isDirectChannel && directChannelUser ? (hideUserPresence && hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUser && directChannelUser.presence && directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt) : channel.memberCount + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? channel.memberCount > 1 ? 'subscribers' : 'subscriber' : channel.memberCount > 1 ? 'members' : 'member') + " ")), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29524
+ }, channel.subject || (isDirectChannel && isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), /*#__PURE__*/React__default.createElement(ChannelMembersItem, {
29525
+ channel: channel,
29526
+ directChannelUser: directChannelUser,
29527
+ isDirectChannel: isDirectChannel
29528
+ })), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29467
29529
  borderColor: iconInactive,
29468
29530
  index: channel.id,
29469
29531
  disabled: selectedChannels.length >= 5 && !isSelected,
@@ -40381,7 +40443,6 @@ var LENGTH_LIMIT = 75;
40381
40443
  var AtSignMentionsRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + VALID_JOINS + '){0,' + LENGTH_LIMIT + '})' + ')$');
40382
40444
  var ALIAS_LENGTH_LIMIT = 50;
40383
40445
  var AtSignMentionsRegexAliasRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + '){0,' + ALIAS_LENGTH_LIMIT + '})' + ')$');
40384
- var SUGGESTION_LIST_LENGTH_LIMIT = 50;
40385
40446
  var mentionsCache = new Map();
40386
40447
  var membersMap = {};
40387
40448
  function useMentionLookupService(mentionString, contactsMap, userId, members, getFromContacts) {
@@ -40505,11 +40566,16 @@ function MentionsContainer(_ref2) {
40505
40566
  selectedIndex = _ref2.selectedIndex,
40506
40567
  selectOptionAndCleanUp = _ref2.selectOptionAndCleanUp,
40507
40568
  setHighlightedIndex = _ref2.setHighlightedIndex,
40508
- setMentionsIsOpen = _ref2.setMentionsIsOpen;
40569
+ setMentionsIsOpen = _ref2.setMentionsIsOpen,
40570
+ channelId = _ref2.channelId;
40509
40571
  var theme = useSelector(themeSelector);
40510
40572
  var _useColor2 = useColors(),
40511
40573
  borderColor = _useColor2[THEME_COLORS.BORDER],
40512
40574
  background = _useColor2[THEME_COLORS.BACKGROUND];
40575
+ var dispatch = useDispatch();
40576
+ var membersHasNext = useSelector(membersHasNextSelector);
40577
+ var membersLoadingState = useSelector(membersLoadingStateSelector);
40578
+ var mentionsListRef = React.useRef(null);
40513
40579
  var contRef = React.useRef();
40514
40580
  var handleKeyDown = function handleKeyDown(event) {
40515
40581
  var code = event.code;
@@ -40550,13 +40616,22 @@ function MentionsContainer(_ref2) {
40550
40616
  setMentionsIsOpen(false);
40551
40617
  };
40552
40618
  }, []);
40619
+ var handleScroll = React.useCallback(function (e) {
40620
+ var target = e.currentTarget;
40621
+ var isScrolledToBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 10;
40622
+ if (isScrolledToBottom && membersHasNext && membersLoadingState !== LOADING_STATE.LOADING && channelId) {
40623
+ dispatch(loadMoreMembersAC(15, channelId));
40624
+ }
40625
+ }, [membersHasNext, membersLoadingState, channelId, dispatch]);
40553
40626
  return /*#__PURE__*/React__default.createElement(MentionsContainerWrapper, {
40554
40627
  className: 'typeahead-popover mentions-menu',
40555
40628
  ref: contRef
40556
40629
  }, /*#__PURE__*/React__default.createElement(MentionsList, {
40630
+ ref: mentionsListRef,
40557
40631
  borderColor: borderColor,
40558
40632
  backgroundColor: background,
40559
- theme: theme
40633
+ theme: theme,
40634
+ onScroll: handleScroll
40560
40635
  }, options.map(function (option, i) {
40561
40636
  return /*#__PURE__*/React__default.createElement(MentionsTypeaheadMenuItem, {
40562
40637
  index: i,
@@ -40579,7 +40654,8 @@ function MentionsPlugin(_ref3) {
40579
40654
  getFromContacts = _ref3.getFromContacts,
40580
40655
  setMentionMember = _ref3.setMentionMember,
40581
40656
  setMentionsIsOpen = _ref3.setMentionsIsOpen,
40582
- members = _ref3.members;
40657
+ members = _ref3.members,
40658
+ channelId = _ref3.channelId;
40583
40659
  var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
40584
40660
  editor = _useLexicalComposerCo[0];
40585
40661
  var _useState2 = React.useState(null),
@@ -40592,8 +40668,8 @@ function MentionsPlugin(_ref3) {
40592
40668
  var options = React.useMemo(function () {
40593
40669
  return results.map(function (result) {
40594
40670
  return new MentionTypeaheadOption(result.name, result.id, result.presence, result.avatar);
40595
- }).slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
40596
- }, [results]);
40671
+ });
40672
+ }, [results === null || results === void 0 ? void 0 : results.length]);
40597
40673
  var handleOnOpen = function handleOnOpen() {
40598
40674
  var menuElement = document.getElementById('typeahead-menu');
40599
40675
  if (menuElement) {
@@ -40635,13 +40711,14 @@ function MentionsPlugin(_ref3) {
40635
40711
  var selectedIndex = _ref4.selectedIndex,
40636
40712
  selectOptionAndCleanUp = _ref4.selectOptionAndCleanUp,
40637
40713
  setHighlightedIndex = _ref4.setHighlightedIndex;
40638
- return anchorElementRef.current && results.length ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default.createElement(MentionsContainer, {
40714
+ return anchorElementRef.current && options.length ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default.createElement(MentionsContainer, {
40639
40715
  queryString: queryString,
40640
40716
  options: options,
40641
40717
  setMentionsIsOpen: setMentionsIsOpen,
40642
40718
  selectOptionAndCleanUp: selectOptionAndCleanUp,
40643
40719
  selectedIndex: selectedIndex,
40644
- setHighlightedIndex: setHighlightedIndex
40720
+ setHighlightedIndex: setHighlightedIndex,
40721
+ channelId: channelId
40645
40722
  }), anchorElementRef.current) : null;
40646
40723
  }
40647
40724
  });
@@ -44277,7 +44354,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
44277
44354
  setMentionedUsers([]);
44278
44355
  }, [activeChannel.id]);
44279
44356
  React.useEffect(function () {
44280
- if (messageText.trim() || editMessageText.trim() && editMessageText && editMessageText.trim() !== messageToEdit.body || attachments.length) {
44357
+ if (messageText.trim() || editMessageText !== null && editMessageText !== void 0 && editMessageText.trim() && editMessageText && (editMessageText === null || editMessageText === void 0 ? void 0 : editMessageText.trim()) !== (messageToEdit === null || messageToEdit === void 0 ? void 0 : messageToEdit.body) || attachments.length) {
44281
44358
  if (attachments.length) {
44282
44359
  var videoAttachment = false;
44283
44360
  attachments.forEach(function (att) {
@@ -44765,7 +44842,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
44765
44842
  userId: user.id,
44766
44843
  getFromContacts: getFromContacts,
44767
44844
  members: activeChannelMembers,
44768
- setMentionsIsOpen: setMentionsIsOpen
44845
+ setMentionsIsOpen: setMentionsIsOpen,
44846
+ channelId: activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id
44769
44847
  })), /*#__PURE__*/React__default.createElement(LexicalHistoryPlugin.HistoryPlugin, null), /*#__PURE__*/React__default.createElement(LexicalRichTextPlugin.RichTextPlugin, {
44770
44848
  contentEditable: /*#__PURE__*/React__default.createElement("div", {
44771
44849
  onKeyDown: handleSendEditMessage,
@@ -45674,7 +45752,6 @@ var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
45674
45752
  }
45675
45753
  }, [mutualChannelsHasNext, isLoading, dispatch]);
45676
45754
  React.useEffect(function () {
45677
- console.log('connectionStatus', connectionStatus, 'mutualChannels', !(mutualChannels !== null && mutualChannels !== void 0 && mutualChannels.length), 'user', user === null || user === void 0 ? void 0 : user.id);
45678
45755
  if (connectionStatus === CONNECTION_STATUS.CONNECTED && !(mutualChannels !== null && mutualChannels !== void 0 && mutualChannels.length)) {
45679
45756
  if (user !== null && user !== void 0 && user.id) {
45680
45757
  dispatch(getChannelsWithUserAC(user.id));
package/index.modern.js CHANGED
@@ -9792,10 +9792,6 @@ var CHANNEL_EVENT_TYPES = {
9792
9792
  REACTION_ADDED: 'REACTION_ADDED',
9793
9793
  REACTION_DELETED: 'REACTION_DELETED',
9794
9794
  EDIT_MESSAGE: 'EDIT_MESSAGE',
9795
- START_TYPING: 'START_TYPING',
9796
- STOP_TYPING: 'STOP_TYPING',
9797
- START_RECORDING: 'START_RECORDING',
9798
- STOP_RECORDING: 'STOP_RECORDING',
9799
9795
  MESSAGE_MARKERS_RECEIVED: 'MESSAGE_MARKERS_RECEIVED',
9800
9796
  UNREAD_MESSAGES_INFO: 'UNREAD_MESSAGES_INFO',
9801
9797
  HIDE: 'HIDE',
@@ -12208,7 +12204,7 @@ var userSlice = createSlice({
12208
12204
  state.usersLoadingState = action.payload.state;
12209
12205
  },
12210
12206
  updateUserMap: function updateUserMap(state, action) {
12211
- state.updatedUserMap = action.payload.usersMap;
12207
+ state.updatedUserMap = _extends({}, state.updatedUserMap, action.payload.usersMap);
12212
12208
  },
12213
12209
  setContacts: function setContacts(state, action) {
12214
12210
  var contacts = action.payload.contacts;
@@ -13416,6 +13412,9 @@ var usersLoadingStateSelector = function usersLoadingStateSelector(store) {
13416
13412
  var browserTabIsActiveSelector = function browserTabIsActiveSelector(store) {
13417
13413
  return store.UserReducer.browserTabIsActive;
13418
13414
  };
13415
+ var usersMapSelector = function usersMapSelector(store) {
13416
+ return store.UserReducer.updatedUserMap;
13417
+ };
13419
13418
 
13420
13419
  var _path;
13421
13420
  function _extends$1() {
@@ -14143,6 +14142,15 @@ var MessageStatusIcon = function MessageStatusIcon(_ref) {
14143
14142
  size = _ref.size,
14144
14143
  accentColor = _ref.accentColor;
14145
14144
  switch (messageStatus) {
14145
+ case MESSAGE_DELIVERY_STATUS.PLAYED:
14146
+ return messageStatusDisplayingType === 'ticks' ? (/*#__PURE__*/React__default.createElement(ReadIconWrapper, {
14147
+ width: size,
14148
+ height: size,
14149
+ color: readIconColor || accentColor
14150
+ })) : (/*#__PURE__*/React__default.createElement(StatusText, {
14151
+ fontSize: size,
14152
+ color: color
14153
+ }, "\u2022 Seen"));
14146
14154
  case MESSAGE_DELIVERY_STATUS.READ:
14147
14155
  return messageStatusDisplayingType === 'ticks' ? (/*#__PURE__*/React__default.createElement(ReadIconWrapper, {
14148
14156
  width: size,
@@ -19814,7 +19822,7 @@ function sendMessage(action) {
19814
19822
  messagesToSend.push(messageToSend);
19815
19823
  case 12:
19816
19824
  _loop2 = /*#__PURE__*/_regenerator().m(function _callee3() {
19817
- var messageAttachment, messageToSend, messageCopy, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, pendingAttachment, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, stringifiedMessageUpdateData, activeChannelId, channelUpdateParam, isErrorResendable, _t;
19825
+ var messageAttachment, messageToSend, messageCopy, _attachmentsToSend, linkAttachmentToSend, linkAttachmentBuilder, messageResponse, k, pendingAttachment, attachmentsToUpdate, currentAttachmentsMap, messageUpdateData, stringifiedMessageUpdateData, activeChannelId, messageToUpdate, channelUpdateParam, isErrorResendable, _t;
19818
19826
  return _regenerator().w(function (_context3) {
19819
19827
  while (1) switch (_context3.p = _context3.n) {
19820
19828
  case 0:
@@ -19916,7 +19924,7 @@ function sendMessage(action) {
19916
19924
  createdAt: messageResponse.createdAt,
19917
19925
  channelId: channel.id
19918
19926
  };
19919
- stringifiedMessageUpdateData = JSON.parse(JSON.stringify(messageUpdateData));
19927
+ stringifiedMessageUpdateData = JSON.parse(JSON.stringify(messageResponse));
19920
19928
  activeChannelId = getActiveChannelId();
19921
19929
  if (!(activeChannelId === channel.id)) {
19922
19930
  _context3.n = 9;
@@ -19928,11 +19936,12 @@ function sendMessage(action) {
19928
19936
  _context3.n = 10;
19929
19937
  return put(removePendingMessageAC(channel.id, messageToSend.tid));
19930
19938
  case 10:
19931
- addMessageToMap(channel.id, stringifiedMessageUpdateData);
19932
19939
  updateMessageOnAllMessages(messageToSend.tid, messageUpdateData);
19933
- updateChannelLastMessageOnAllChannels(channel.id, stringifiedMessageUpdateData);
19940
+ messageToUpdate = JSON.parse(JSON.stringify(messageResponse));
19941
+ addMessageToMap(channel.id, messageToUpdate);
19942
+ updateChannelLastMessageOnAllChannels(channel.id, messageToUpdate);
19934
19943
  channelUpdateParam = {
19935
- lastMessage: stringifiedMessageUpdateData,
19944
+ lastMessage: messageToUpdate,
19936
19945
  lastReactedMessage: null
19937
19946
  };
19938
19947
  if (!channel.unread) {
@@ -23835,6 +23844,24 @@ var useColors = function useColors() {
23835
23844
  }, [theme.colors, currentThemeMode]);
23836
23845
  };
23837
23846
 
23847
+ function useUpdatedUser(user) {
23848
+ var dispatch = useDispatch();
23849
+ var usersMap = useSelector(usersMapSelector);
23850
+ useEffect(function () {
23851
+ if (user !== null && user !== void 0 && user.id && !usersMap[user.id]) {
23852
+ var _updateUserStatusOnMa;
23853
+ setUserToMap(user);
23854
+ dispatch(updateUserStatusOnMapAC((_updateUserStatusOnMa = {}, _updateUserStatusOnMa[user.id] = user, _updateUserStatusOnMa)));
23855
+ }
23856
+ }, [user === null || user === void 0 ? void 0 : user.id]);
23857
+ return useMemo(function () {
23858
+ if (!(user !== null && user !== void 0 && user.id)) {
23859
+ return user;
23860
+ }
23861
+ return usersMap[user.id] || user;
23862
+ }, [user, usersMap]);
23863
+ }
23864
+
23838
23865
  function setThemeAC(theme) {
23839
23866
  return {
23840
23867
  type: SET_THEME,
@@ -26007,30 +26034,43 @@ var Title$1 = styled.h4(_templateObject4$6 || (_templateObject4$6 = _taggedTempl
26007
26034
  });
26008
26035
 
26009
26036
  var _templateObject$b, _templateObject2$a, _templateObject3$8, _templateObject4$7, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject0$2, _templateObject1$2;
26010
- var UsersPopup = function UsersPopup(_ref) {
26011
- var channel = _ref.channel,
26012
- toggleCreatePopup = _ref.toggleCreatePopup,
26013
- actionType = _ref.actionType,
26014
- getSelectedUsers = _ref.getSelectedUsers,
26015
- memberIds = _ref.memberIds,
26016
- creatChannelSelectedMembers = _ref.creatChannelSelectedMembers,
26017
- popupHeight = _ref.popupHeight,
26018
- selectIsRequired = _ref.selectIsRequired,
26019
- popupWidth = _ref.popupWidth,
26020
- handleOpenInviteModal = _ref.handleOpenInviteModal;
26037
+ var UserItem = function UserItem(_ref) {
26038
+ var user = _ref.user,
26039
+ memberDisplayName = _ref.memberDisplayName;
26021
26040
  var _useColor = useColors(),
26022
- accentColor = _useColor[THEME_COLORS.ACCENT],
26023
- surface1Background = _useColor[THEME_COLORS.SURFACE_1],
26024
26041
  textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
26025
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
26026
- iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
26027
- backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
26028
- background = _useColor[THEME_COLORS.BACKGROUND],
26029
- border = _useColor[THEME_COLORS.BORDER],
26030
- textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
26031
- surface1 = _useColor[THEME_COLORS.SURFACE_1],
26032
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
26033
- surface2 = _useColor[THEME_COLORS.SURFACE_2];
26042
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
26043
+ var userUpdated = useUpdatedUser(user);
26044
+ return /*#__PURE__*/React__default.createElement(UserNamePresence, null, /*#__PURE__*/React__default.createElement(MemberName, {
26045
+ color: textPrimary
26046
+ }, memberDisplayName), /*#__PURE__*/React__default.createElement(SubTitle, {
26047
+ color: textSecondary
26048
+ }, userUpdated.presence && userUpdated.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : userUpdated.presence && userUpdated.presence.lastActiveAt && userLastActiveDateFormat(userUpdated.presence.lastActiveAt)));
26049
+ };
26050
+ var UsersPopup = function UsersPopup(_ref2) {
26051
+ var channel = _ref2.channel,
26052
+ toggleCreatePopup = _ref2.toggleCreatePopup,
26053
+ actionType = _ref2.actionType,
26054
+ getSelectedUsers = _ref2.getSelectedUsers,
26055
+ memberIds = _ref2.memberIds,
26056
+ creatChannelSelectedMembers = _ref2.creatChannelSelectedMembers,
26057
+ popupHeight = _ref2.popupHeight,
26058
+ selectIsRequired = _ref2.selectIsRequired,
26059
+ popupWidth = _ref2.popupWidth,
26060
+ handleOpenInviteModal = _ref2.handleOpenInviteModal;
26061
+ var _useColor2 = useColors(),
26062
+ accentColor = _useColor2[THEME_COLORS.ACCENT],
26063
+ surface1Background = _useColor2[THEME_COLORS.SURFACE_1],
26064
+ textPrimary = _useColor2[THEME_COLORS.TEXT_PRIMARY],
26065
+ textSecondary = _useColor2[THEME_COLORS.TEXT_SECONDARY],
26066
+ iconInactive = _useColor2[THEME_COLORS.ICON_INACTIVE],
26067
+ backgroundHovered = _useColor2[THEME_COLORS.BACKGROUND_HOVERED],
26068
+ background = _useColor2[THEME_COLORS.BACKGROUND],
26069
+ border = _useColor2[THEME_COLORS.BORDER],
26070
+ textFootnote = _useColor2[THEME_COLORS.TEXT_FOOTNOTE],
26071
+ surface1 = _useColor2[THEME_COLORS.SURFACE_1],
26072
+ textOnPrimary = _useColor2[THEME_COLORS.TEXT_ON_PRIMARY],
26073
+ surface2 = _useColor2[THEME_COLORS.SURFACE_2];
26034
26074
  var dispatch = useDispatch();
26035
26075
  var ChatClient = getClient();
26036
26076
  var selfUser = ChatClient.user;
@@ -26305,11 +26345,10 @@ var UsersPopup = function UsersPopup(_ref) {
26305
26345
  size: 40,
26306
26346
  textSize: 16,
26307
26347
  setDefaultAvatar: true
26308
- }), /*#__PURE__*/React__default.createElement(UserNamePresence, null, /*#__PURE__*/React__default.createElement(MemberName, {
26309
- color: textPrimary
26310
- }, memberDisplayName), /*#__PURE__*/React__default.createElement(SubTitle, {
26311
- color: textSecondary
26312
- }, user.presence && user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : user.presence && user.presence.lastActiveAt && userLastActiveDateFormat(user.presence.lastActiveAt))), actionType !== 'createChat' && (/*#__PURE__*/React__default.createElement(CustomCheckbox, {
26348
+ }), /*#__PURE__*/React__default.createElement(UserItem, {
26349
+ user: user,
26350
+ memberDisplayName: memberDisplayName
26351
+ }), actionType !== 'createChat' && (/*#__PURE__*/React__default.createElement(CustomCheckbox, {
26313
26352
  index: user.id,
26314
26353
  state: isSelected,
26315
26354
  backgroundColor: 'transparent',
@@ -29176,23 +29215,35 @@ var Progress = styled.input(_templateObject0$5 || (_templateObject0$5 = _taggedT
29176
29215
  var FullScreenWrapper = styled.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n margin-left: 16px;\n cursor: pointer;\n @media (max-width: 768px) {\n margin-left: 12px;\n & > svg {\n width: 18px;\n height: 18px;\n }\n }\n @media (max-width: 480px) {\n margin-left: auto;\n & > svg {\n width: 16px;\n height: 16px;\n }\n }\n"])));
29177
29216
 
29178
29217
  var _templateObject$n, _templateObject2$k, _templateObject3$h, _templateObject4$e, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$8, _templateObject9$7, _templateObject0$6, _templateObject1$4;
29179
- function ForwardMessagePopup(_ref) {
29180
- var title = _ref.title,
29181
- buttonText = _ref.buttonText,
29182
- togglePopup = _ref.togglePopup,
29183
- handleForward = _ref.handleForward,
29184
- loading = _ref.loading;
29218
+ var ChannelMembersItem = function ChannelMembersItem(_ref) {
29219
+ var channel = _ref.channel,
29220
+ directChannelUser = _ref.directChannelUser,
29221
+ isDirectChannel = _ref.isDirectChannel;
29185
29222
  var _useColor = useColors(),
29186
- accentColor = _useColor[THEME_COLORS.ACCENT],
29187
- textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
29188
- surface1 = _useColor[THEME_COLORS.SURFACE_1],
29189
- textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
29190
- background = _useColor[THEME_COLORS.BACKGROUND],
29191
- iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
29192
- textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
29193
- iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
29194
- backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
29195
- surface2 = _useColor[THEME_COLORS.SURFACE_2];
29223
+ textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
29224
+ var updatedUser = useUpdatedUser(directChannelUser);
29225
+ var directChannelUserUpdated = isDirectChannel ? updatedUser : directChannelUser;
29226
+ return /*#__PURE__*/React__default.createElement(ChannelMembers, {
29227
+ color: textSecondary
29228
+ }, isDirectChannel && directChannelUserUpdated ? (hideUserPresence && hideUserPresence(directChannelUserUpdated) ? '' : directChannelUserUpdated.presence && directChannelUserUpdated.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUserUpdated && directChannelUserUpdated.presence && directChannelUserUpdated.presence.lastActiveAt && userLastActiveDateFormat(directChannelUserUpdated.presence.lastActiveAt) : (channel === null || channel === void 0 ? void 0 : channel.memberCount) + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'subscribers' : 'subscriber' : (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'members' : 'member') + " ");
29229
+ };
29230
+ function ForwardMessagePopup(_ref2) {
29231
+ var title = _ref2.title,
29232
+ buttonText = _ref2.buttonText,
29233
+ togglePopup = _ref2.togglePopup,
29234
+ handleForward = _ref2.handleForward,
29235
+ loading = _ref2.loading;
29236
+ var _useColor2 = useColors(),
29237
+ accentColor = _useColor2[THEME_COLORS.ACCENT],
29238
+ textPrimary = _useColor2[THEME_COLORS.TEXT_PRIMARY],
29239
+ surface1 = _useColor2[THEME_COLORS.SURFACE_1],
29240
+ textSecondary = _useColor2[THEME_COLORS.TEXT_SECONDARY],
29241
+ background = _useColor2[THEME_COLORS.BACKGROUND],
29242
+ iconInactive = _useColor2[THEME_COLORS.ICON_INACTIVE],
29243
+ textOnPrimary = _useColor2[THEME_COLORS.TEXT_ON_PRIMARY],
29244
+ iconPrimary = _useColor2[THEME_COLORS.ICON_PRIMARY],
29245
+ backgroundHovered = _useColor2[THEME_COLORS.BACKGROUND_HOVERED],
29246
+ surface2 = _useColor2[THEME_COLORS.SURFACE_2];
29196
29247
  var ChatClient = getClient();
29197
29248
  var user = ChatClient.user;
29198
29249
  var dispatch = useDispatch();
@@ -29385,9 +29436,11 @@ function ForwardMessagePopup(_ref) {
29385
29436
  setDefaultAvatar: isDirectChannel
29386
29437
  }), /*#__PURE__*/React__default.createElement(ChannelInfo$3, null, /*#__PURE__*/React__default.createElement(ChannelTitle, {
29387
29438
  color: textPrimary
29388
- }, isDirectChannel ? isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : 'Deleted User' : channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembers, {
29389
- color: textSecondary
29390
- }, isDirectChannel && directChannelUser ? (hideUserPresence && hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUser && directChannelUser.presence && directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt) : (channel === null || channel === void 0 ? void 0 : channel.memberCount) + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? (channel === null || channel === void 0 ? void 0 : channel.memberCount) > 1 ? 'subscribers' : 'subscriber' : (directChannelUser === null || directChannelUser === void 0 ? void 0 : directChannelUser.memberCount) > 1 ? 'members' : 'member') + " ")), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29439
+ }, isDirectChannel ? isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : 'Deleted User' : channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembersItem, {
29440
+ channel: channel,
29441
+ directChannelUser: directChannelUser,
29442
+ isDirectChannel: isDirectChannel
29443
+ })), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29391
29444
  borderColor: iconInactive,
29392
29445
  index: channel.id,
29393
29446
  disabled: selectedChannels.length >= 5 && !isSelected,
@@ -29405,6 +29458,11 @@ function ForwardMessagePopup(_ref) {
29405
29458
  var isSelected = selectedChannels.findIndex(function (chan) {
29406
29459
  return chan.id === channel.id;
29407
29460
  }) >= 0;
29461
+ var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
29462
+ var isSelfChannel = isDirectChannel && channel.memberCount === 1 && channel.members.length > 0 && channel.members[0].id === user.id;
29463
+ var directChannelUser = isDirectChannel && isSelfChannel ? user : channel.members.find(function (member) {
29464
+ return member.id !== user.id;
29465
+ });
29408
29466
  return /*#__PURE__*/React__default.createElement(ChannelItem, {
29409
29467
  key: channel.id,
29410
29468
  onClick: function onClick() {
@@ -29420,9 +29478,11 @@ function ForwardMessagePopup(_ref) {
29420
29478
  setDefaultAvatar: false
29421
29479
  }), /*#__PURE__*/React__default.createElement(ChannelInfo$3, null, /*#__PURE__*/React__default.createElement(ChannelTitle, {
29422
29480
  color: textPrimary
29423
- }, channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembers, {
29424
- color: textSecondary
29425
- }, channel.memberCount + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? channel.memberCount > 1 ? 'subscribers' : 'subscriber' : channel.memberCount > 1 ? 'members' : 'member') + " ")), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29481
+ }, channel.subject), /*#__PURE__*/React__default.createElement(ChannelMembersItem, {
29482
+ channel: channel,
29483
+ directChannelUser: directChannelUser,
29484
+ isDirectChannel: isDirectChannel
29485
+ })), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29426
29486
  borderColor: iconInactive,
29427
29487
  index: channel.id,
29428
29488
  disabled: selectedChannels.length >= 5 && !isSelected,
@@ -29460,9 +29520,11 @@ function ForwardMessagePopup(_ref) {
29460
29520
  setDefaultAvatar: isDirectChannel
29461
29521
  }), /*#__PURE__*/React__default.createElement(ChannelInfo$3, null, /*#__PURE__*/React__default.createElement(ChannelTitle, {
29462
29522
  color: textPrimary
29463
- }, channel.subject || (isDirectChannel && isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), /*#__PURE__*/React__default.createElement(ChannelMembers, {
29464
- color: textSecondary
29465
- }, isDirectChannel && directChannelUser ? (hideUserPresence && hideUserPresence(directChannelUser) ? '' : directChannelUser.presence && directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE) ? 'Online' : directChannelUser && directChannelUser.presence && directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt) : channel.memberCount + " " + (channel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || channel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? channel.memberCount > 1 ? 'subscribers' : 'subscriber' : channel.memberCount > 1 ? 'members' : 'member') + " ")), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29523
+ }, channel.subject || (isDirectChannel && isSelfChannel ? 'Me' : directChannelUser ? makeUsername(contactsMap[directChannelUser.id], directChannelUser, getFromContacts) : '')), /*#__PURE__*/React__default.createElement(ChannelMembersItem, {
29524
+ channel: channel,
29525
+ directChannelUser: directChannelUser,
29526
+ isDirectChannel: isDirectChannel
29527
+ })), /*#__PURE__*/React__default.createElement(CustomCheckbox, {
29466
29528
  borderColor: iconInactive,
29467
29529
  index: channel.id,
29468
29530
  disabled: selectedChannels.length >= 5 && !isSelected,
@@ -40380,7 +40442,6 @@ var LENGTH_LIMIT = 75;
40380
40442
  var AtSignMentionsRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + VALID_JOINS + '){0,' + LENGTH_LIMIT + '})' + ')$');
40381
40443
  var ALIAS_LENGTH_LIMIT = 50;
40382
40444
  var AtSignMentionsRegexAliasRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + '){0,' + ALIAS_LENGTH_LIMIT + '})' + ')$');
40383
- var SUGGESTION_LIST_LENGTH_LIMIT = 50;
40384
40445
  var mentionsCache = new Map();
40385
40446
  var membersMap = {};
40386
40447
  function useMentionLookupService(mentionString, contactsMap, userId, members, getFromContacts) {
@@ -40504,11 +40565,16 @@ function MentionsContainer(_ref2) {
40504
40565
  selectedIndex = _ref2.selectedIndex,
40505
40566
  selectOptionAndCleanUp = _ref2.selectOptionAndCleanUp,
40506
40567
  setHighlightedIndex = _ref2.setHighlightedIndex,
40507
- setMentionsIsOpen = _ref2.setMentionsIsOpen;
40568
+ setMentionsIsOpen = _ref2.setMentionsIsOpen,
40569
+ channelId = _ref2.channelId;
40508
40570
  var theme = useSelector(themeSelector);
40509
40571
  var _useColor2 = useColors(),
40510
40572
  borderColor = _useColor2[THEME_COLORS.BORDER],
40511
40573
  background = _useColor2[THEME_COLORS.BACKGROUND];
40574
+ var dispatch = useDispatch();
40575
+ var membersHasNext = useSelector(membersHasNextSelector);
40576
+ var membersLoadingState = useSelector(membersLoadingStateSelector);
40577
+ var mentionsListRef = useRef(null);
40512
40578
  var contRef = useRef();
40513
40579
  var handleKeyDown = function handleKeyDown(event) {
40514
40580
  var code = event.code;
@@ -40549,13 +40615,22 @@ function MentionsContainer(_ref2) {
40549
40615
  setMentionsIsOpen(false);
40550
40616
  };
40551
40617
  }, []);
40618
+ var handleScroll = useCallback(function (e) {
40619
+ var target = e.currentTarget;
40620
+ var isScrolledToBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 10;
40621
+ if (isScrolledToBottom && membersHasNext && membersLoadingState !== LOADING_STATE.LOADING && channelId) {
40622
+ dispatch(loadMoreMembersAC(15, channelId));
40623
+ }
40624
+ }, [membersHasNext, membersLoadingState, channelId, dispatch]);
40552
40625
  return /*#__PURE__*/React__default.createElement(MentionsContainerWrapper, {
40553
40626
  className: 'typeahead-popover mentions-menu',
40554
40627
  ref: contRef
40555
40628
  }, /*#__PURE__*/React__default.createElement(MentionsList, {
40629
+ ref: mentionsListRef,
40556
40630
  borderColor: borderColor,
40557
40631
  backgroundColor: background,
40558
- theme: theme
40632
+ theme: theme,
40633
+ onScroll: handleScroll
40559
40634
  }, options.map(function (option, i) {
40560
40635
  return /*#__PURE__*/React__default.createElement(MentionsTypeaheadMenuItem, {
40561
40636
  index: i,
@@ -40578,7 +40653,8 @@ function MentionsPlugin(_ref3) {
40578
40653
  getFromContacts = _ref3.getFromContacts,
40579
40654
  setMentionMember = _ref3.setMentionMember,
40580
40655
  setMentionsIsOpen = _ref3.setMentionsIsOpen,
40581
- members = _ref3.members;
40656
+ members = _ref3.members,
40657
+ channelId = _ref3.channelId;
40582
40658
  var _useLexicalComposerCo = useLexicalComposerContext(),
40583
40659
  editor = _useLexicalComposerCo[0];
40584
40660
  var _useState2 = useState(null),
@@ -40591,8 +40667,8 @@ function MentionsPlugin(_ref3) {
40591
40667
  var options = useMemo(function () {
40592
40668
  return results.map(function (result) {
40593
40669
  return new MentionTypeaheadOption(result.name, result.id, result.presence, result.avatar);
40594
- }).slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
40595
- }, [results]);
40670
+ });
40671
+ }, [results === null || results === void 0 ? void 0 : results.length]);
40596
40672
  var handleOnOpen = function handleOnOpen() {
40597
40673
  var menuElement = document.getElementById('typeahead-menu');
40598
40674
  if (menuElement) {
@@ -40634,13 +40710,14 @@ function MentionsPlugin(_ref3) {
40634
40710
  var selectedIndex = _ref4.selectedIndex,
40635
40711
  selectOptionAndCleanUp = _ref4.selectOptionAndCleanUp,
40636
40712
  setHighlightedIndex = _ref4.setHighlightedIndex;
40637
- return anchorElementRef.current && results.length ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(MentionsContainer, {
40713
+ return anchorElementRef.current && options.length ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(MentionsContainer, {
40638
40714
  queryString: queryString,
40639
40715
  options: options,
40640
40716
  setMentionsIsOpen: setMentionsIsOpen,
40641
40717
  selectOptionAndCleanUp: selectOptionAndCleanUp,
40642
40718
  selectedIndex: selectedIndex,
40643
- setHighlightedIndex: setHighlightedIndex
40719
+ setHighlightedIndex: setHighlightedIndex,
40720
+ channelId: channelId
40644
40721
  }), anchorElementRef.current) : null;
40645
40722
  }
40646
40723
  });
@@ -44276,7 +44353,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
44276
44353
  setMentionedUsers([]);
44277
44354
  }, [activeChannel.id]);
44278
44355
  useEffect(function () {
44279
- if (messageText.trim() || editMessageText.trim() && editMessageText && editMessageText.trim() !== messageToEdit.body || attachments.length) {
44356
+ if (messageText.trim() || editMessageText !== null && editMessageText !== void 0 && editMessageText.trim() && editMessageText && (editMessageText === null || editMessageText === void 0 ? void 0 : editMessageText.trim()) !== (messageToEdit === null || messageToEdit === void 0 ? void 0 : messageToEdit.body) || attachments.length) {
44280
44357
  if (attachments.length) {
44281
44358
  var videoAttachment = false;
44282
44359
  attachments.forEach(function (att) {
@@ -44764,7 +44841,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
44764
44841
  userId: user.id,
44765
44842
  getFromContacts: getFromContacts,
44766
44843
  members: activeChannelMembers,
44767
- setMentionsIsOpen: setMentionsIsOpen
44844
+ setMentionsIsOpen: setMentionsIsOpen,
44845
+ channelId: activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id
44768
44846
  })), /*#__PURE__*/React__default.createElement(HistoryPlugin, null), /*#__PURE__*/React__default.createElement(RichTextPlugin, {
44769
44847
  contentEditable: /*#__PURE__*/React__default.createElement("div", {
44770
44848
  onKeyDown: handleSendEditMessage,
@@ -45673,7 +45751,6 @@ var GroupsInCommonPopup = function GroupsInCommonPopup(_ref2) {
45673
45751
  }
45674
45752
  }, [mutualChannelsHasNext, isLoading, dispatch]);
45675
45753
  useEffect(function () {
45676
- console.log('connectionStatus', connectionStatus, 'mutualChannels', !(mutualChannels !== null && mutualChannels !== void 0 && mutualChannels.length), 'user', user === null || user === void 0 ? void 0 : user.id);
45677
45754
  if (connectionStatus === CONNECTION_STATUS.CONNECTED && !(mutualChannels !== null && mutualChannels !== void 0 && mutualChannels.length)) {
45678
45755
  if (user !== null && user !== void 0 && user.id) {
45679
45756
  dispatch(getChannelsWithUserAC(user.id));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sceyt-chat-react-uikit",
3
- "version": "1.7.8-beta.17",
3
+ "version": "1.7.8-beta.18",
4
4
  "description": "Interactive React UI Components for Sceyt Chat.",
5
5
  "author": "Sceyt",
6
6
  "license": "MIT",