sceyt-chat-react-uikit 1.7.9-beta.10 → 1.7.9-beta.11

package/index.js

@@ -9085,6 +9085,7 @@ var disableFrowardMentionsCount = false;
 var onUpdateChannel = function onUpdateChannel() {};
 var useInviteLink = false;
 var disappearingSettings;
+var customLoadMembersFunctions;
 var inviteLinkOptions = null;
 function setBaseUrlForInviteMembers(url) {
   baseUrlForInviteMembers = url;
@@ -9165,6 +9166,7 @@ function destroyChannelsMap() {
 var query = {
   channelQuery: null,
   channelQueryForward: null,
+  channelMembersQuery: null,
   blockedQuery: null,
   current: null,
   membersQuery: null,
@@ -9213,6 +9215,9 @@ function setDisableFrowardMentionsCount(disable) {
 function getDisableFrowardMentionsCount() {
   return disableFrowardMentionsCount;
 }
+function getCustomLoadMembersFunctions() {
+  return customLoadMembersFunctions;
+}
 function setOnUpdateChannel(callback) {
   onUpdateChannel = callback;
 }
@@ -9333,6 +9338,9 @@ var getShowChannelDetails = function getShowChannelDetails() {
 var setDisappearingSettings = function setDisappearingSettings(settings) {
   disappearingSettings = settings;
 };
+var setCustomLoadMembersFunctions = function setCustomLoadMembersFunctions(functions) {
+  customLoadMembersFunctions = functions;
+};
 var getDisappearingSettings = function getDisappearingSettings() {
   return disappearingSettings;
 };
@@ -12107,9 +12115,9 @@ var _messageSlice$actions = messageSlice.actions,
 var MessageReducer = messageSlice.reducer;
 
 var initialState$2 = {
-  membersLoadingState: 0,
-  membersHasNext: true,
-  activeChannelMembers: [],
+  channelsMembersLoadingState: {},
+  channelsMembersHasNextMap: {},
+  channelsMembersMap: {},
   roles: [],
   getRolesFail: undefined,
   rolesMap: {},
@@ -12125,22 +12133,34 @@ var memberSlice = createSlice({
   initialState: initialState$2,
   reducers: {
     setMembersToList: function setMembersToList(state, action) {
-      var members = action.payload.members;
-      state.activeChannelMembers = [].concat(members);
+      var _action$payload = action.payload,
+        channelId = _action$payload.channelId,
+        members = _action$payload.members;
+      if (!state.channelsMembersMap[channelId]) {
+        state.channelsMembersMap[channelId] = [];
+      }
+      state.channelsMembersMap[channelId] = Array.from(new Set([].concat(members)));
     },
     addMembersToList: function addMembersToList(state, action) {
-      var _state$activeChannelM;
-      var members = action.payload.members;
-      (_state$activeChannelM = state.activeChannelMembers).push.apply(_state$activeChannelM, members);
+      var _action$payload2 = action.payload,
+        channelId = _action$payload2.channelId,
+        members = _action$payload2.members;
+      if (!state.channelsMembersMap[channelId]) {
+        state.channelsMembersMap[channelId] = [];
+      }
+      state.channelsMembersMap[channelId] = Array.from(new Set([].concat(state.channelsMembersMap[channelId], members)));
     },
     updateMembers: function updateMembers(state, action) {
-      var members = action.payload.members;
+      var _action$payload3 = action.payload,
+        channelId = _action$payload3.channelId,
+        members = _action$payload3.members;
       if (members.length) {
+        var _state$channelsMember;
         var updatedMembersMap = {};
         for (var i = 0; i < members.length; i++) {
           updatedMembersMap[members[i].id] = members[i];
         }
-        state.activeChannelMembers = state.activeChannelMembers.map(function (member) {
+        state.channelsMembersMap[channelId] = (_state$channelsMember = state.channelsMembersMap[channelId]) === null || _state$channelsMember === void 0 ? void 0 : _state$channelsMember.map(function (member) {
           if (updatedMembersMap[member.id]) {
             return updatedMembersMap[member.id];
           }
@@ -12150,32 +12170,45 @@ var memberSlice = createSlice({
     },
     updateMembersPresence: function updateMembersPresence(state, action) {
       var usersMap = action.payload.usersMap;
-      if (state.activeChannelMembers.length) {
-        state.activeChannelMembers = state.activeChannelMembers.map(function (member) {
-          if (usersMap[member.id]) {
-            return _extends({}, member, usersMap[member.id]);
-          }
-          return member;
-        });
+      for (var channelId in usersMap) {
+        var _state$channelsMember2;
+        if ((_state$channelsMember2 = state.channelsMembersMap[channelId]) !== null && _state$channelsMember2 !== void 0 && _state$channelsMember2.length) {
+          var _state$channelsMember3;
+          state.channelsMembersMap[channelId] = (_state$channelsMember3 = state.channelsMembersMap[channelId]) === null || _state$channelsMember3 === void 0 ? void 0 : _state$channelsMember3.map(function (member) {
+            if (usersMap[member.id]) {
+              return _extends({}, member, usersMap[member.id]);
+            }
+            return member;
+          });
+        }
       }
     },
-    clearMembers: function clearMembers(state) {
-      state.activeChannelMembers = [];
+    clearMembers: function clearMembers(state, action) {
+      var channelId = action.payload.channelId;
+      if (state.channelsMembersMap[channelId]) {
+        state.channelsMembersMap[channelId] = [];
+      }
     },
     removeMemberFromList: function removeMemberFromList(state, action) {
-      var members = action.payload.members;
-      if (members.length) {
+      var _action$payload4 = action.payload,
+        channelId = _action$payload4.channelId,
+        members = _action$payload4.members;
+      if (members.length && state.channelsMembersMap[channelId]) {
+        var _state$channelsMember4;
         var removedMembersMap = {};
         for (var i = 0; i < members.length; i++) {
           removedMembersMap[members[i].id] = members[i];
         }
-        state.activeChannelMembers = state.activeChannelMembers.filter(function (member) {
+        state.channelsMembersMap[channelId] = (_state$channelsMember4 = state.channelsMembersMap[channelId]) === null || _state$channelsMember4 === void 0 ? void 0 : _state$channelsMember4.filter(function (member) {
           return !removedMembersMap[member.id];
         });
       }
     },
     setMembersLoadingState: function setMembersLoadingState(state, action) {
-      state.membersLoadingState = action.payload.state;
+      var _action$payload5 = action.payload,
+        channelId = _action$payload5.channelId,
+        loadingState = _action$payload5.loadingState;
+      state.channelsMembersLoadingState[channelId] = loadingState;
     },
     getRolesSuccess: function getRolesSuccess(state, action) {
       var roles = action.payload.roles;
@@ -12187,9 +12220,9 @@ var memberSlice = createSlice({
       state.roles = roles;
     },
     getRolesFail: function getRolesFail(state, action) {
-      var _action$payload = action.payload,
-        attempts = _action$payload.attempts,
-        timeout = _action$payload.timeout;
+      var _action$payload6 = action.payload,
+        attempts = _action$payload6.attempts,
+        timeout = _action$payload6.timeout;
       if (attempts || timeout) {
         state.getRolesFail = {
           attempts: attempts || 0,
@@ -12200,13 +12233,16 @@ var memberSlice = createSlice({
       }
     },
     setMembersHasNext: function setMembersHasNext(state, action) {
-      state.membersHasNext = action.payload.hasNext;
+      var _action$payload7 = action.payload,
+        channelId = _action$payload7.channelId,
+        hasNext = _action$payload7.hasNext;
+      state.channelsMembersHasNextMap[channelId] = hasNext;
     },
     setActionIsRestricted: function setActionIsRestricted(state, action) {
-      var _action$payload2 = action.payload,
-        isRestricted = _action$payload2.isRestricted,
-        fromChannel = _action$payload2.fromChannel,
-        members = _action$payload2.members;
+      var _action$payload8 = action.payload,
+        isRestricted = _action$payload8.isRestricted,
+        fromChannel = _action$payload8.fromChannel,
+        members = _action$payload8.members;
       state.restricted.isRestricted = isRestricted;
       state.restricted.fromChannel = fromChannel;
       state.restricted.members = members;
@@ -13423,19 +13459,22 @@ var changeMemberRoleAC = function changeMemberRoleAC(channelId, members) {
     }
   };
 };
-var setMembersToListAC = function setMembersToListAC(members) {
+var setMembersToListAC = function setMembersToListAC(members, channelId) {
   return setMembersToList({
-    members: members
+    members: members,
+    channelId: channelId
   });
 };
-var addMembersToListAC = function addMembersToListAC(members) {
+var addMembersToListAC = function addMembersToListAC(members, channelId) {
   return addMembersToList({
-    members: members
+    members: members,
+    channelId: channelId
   });
 };
-var updateMembersAC = function updateMembersAC(members) {
+var updateMembersAC = function updateMembersAC(members, channelId) {
   return updateMembers({
-    members: members
+    members: members,
+    channelId: channelId
   });
 };
 var updateMembersPresenceAC = function updateMembersPresenceAC(usersMap) {
@@ -13443,14 +13482,16 @@ var updateMembersPresenceAC = function updateMembersPresenceAC(usersMap) {
     usersMap: usersMap
   });
 };
-var setMembersLoadingStateAC = function setMembersLoadingStateAC(state) {
+var setMembersLoadingStateAC = function setMembersLoadingStateAC(loadingState, channelId) {
   return setMembersLoadingState({
-    state: state
+    loadingState: loadingState,
+    channelId: channelId
   });
 };
-var removeMemberFromListAC = function removeMemberFromListAC(members) {
+var removeMemberFromListAC = function removeMemberFromListAC(members, channelId) {
   return removeMemberFromList({
-    members: members
+    members: members,
+    channelId: channelId
   });
 };
 var getRolesSuccessAC = function getRolesSuccessAC(roles) {
@@ -13464,9 +13505,10 @@ var getRolesFailAC = function getRolesFailAC(timeout, attempts) {
     attempts: attempts
   });
 };
-var setMembersHasNextAC = function setMembersHasNextAC(hasNext) {
+var setMembersHasNextAC = function setMembersHasNextAC(hasNext, channelId) {
   return setMembersHasNext({
-    hasNext: hasNext
+    hasNext: hasNext,
+    channelId: channelId
   });
 };
 var setActionIsRestrictedAC = function setActionIsRestrictedAC(isRestricted, fromChannel, members) {
@@ -15046,7 +15088,7 @@ function watchForEvents() {
           };
         });
         _loop = /*#__PURE__*/_regenerator().m(function _callee() {
-          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _updateChannelData, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _updateChannelData2, _groupName2, onUpdateChannel, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _channel5, fields, _activeChannelId4, _groupName3, _channel6, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel7, _activeChannelId6, updateLastMessage, markersMap, activeChannelMessages, _iterator, _step, messageId, isPendingMessage, lastMessage, _channelId, _channel8, _channel9, deletedMessage, _activeChannelId7, _channelExists7, _channel0, _message, _activeChannelId8, _channelExists8, _channel1, user, _message2, reaction, isSelf, _activeChannelId9, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _pollDetailsData$chan, _pollDetailsData$chan2, _channel10, pollDetails, _messageId, pollDetailsData, _activeChannelId0, addedVotes, deletedVotes, objs, _iterator2, _step2, vote, _iterator3, _step3, _vote, _i, _objs, obj, _store$getState$Messa, key, hasNext, _i2, _objs2, _obj, _pollDetailsData$chan3, _channel11, _pollDetails, _messageId2, _pollDetailsData, _activeChannelId1, _deletedVotes, _objs3, _iterator4, _step4, _vote2, _i3, _objs4, _obj2, _i4, _objs5, _obj3, _pollDetailsData2$cha, _channel12, _pollDetails2, _messageId3, _activeChannelId10, _pollDetailsData2, retractedVotes, _objs6, _iterator5, _step5, _vote4, _i5, _objs7, _obj4, _iterator6, _step6, _vote3, _channel13, _messageId4, _activeChannelId11, _obj5, _channel14, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId12, _channelUpdateParams, _channel15, _updatedChannel, _channel16, _activeChannelId13, channelExist, _channel17, _channel18, _channel19, _channel20, _channel21, _channel22, _channel23, _groupName5, _channel24, _groupName6, _channel25, members, _activeChannelId14, i, _channel26, _channel27, _channelId2, from, name, status, _t, _t2;
+          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, joinedMember, _chan2, customLoadMembersFunctions, joinMembersEvent, membersList, updateChannelData, _channel, member, _channelExists, activeChannelId, groupName, _updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId, _channelExists3, activeChannel, _updateChannelData2, _groupName, _channel4, addedMembers, _activeChannelId2, _channelExists4, _updateChannelData3, _customLoadMembersFunctions, addMembersEvent, _membersList, _groupName2, onUpdateChannel, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _channel5, fields, _activeChannelId3, _groupName3, _channel6, message, messageToHandle, _channelFilterTypes, _activeChannelId4, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel7, _activeChannelId5, updateLastMessage, markersMap, activeChannelMessages, _iterator, _step, messageId, isPendingMessage, lastMessage, _channelId, _channel8, _channel9, deletedMessage, _activeChannelId6, _channelExists7, _channel0, _message, _activeChannelId7, _channelExists8, _channel1, user, _message2, reaction, isSelf, _activeChannelId8, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _pollDetailsData$chan, _pollDetailsData$chan2, _channel10, pollDetails, _messageId, pollDetailsData, _activeChannelId9, addedVotes, deletedVotes, objs, _iterator2, _step2, vote, _iterator3, _step3, _vote, _i, _objs, obj, _store$getState$Messa, key, hasNext, _i2, _objs2, _obj, _pollDetailsData$chan3, _channel11, _pollDetails, _messageId2, _pollDetailsData, _activeChannelId0, _deletedVotes, _objs3, _iterator4, _step4, _vote2, _i3, _objs4, _obj2, _i4, _objs5, _obj3, _pollDetailsData2$cha, _channel12, _pollDetails2, _messageId3, _activeChannelId1, _pollDetailsData2, retractedVotes, _objs6, _iterator5, _step5, _vote4, _i5, _objs7, _obj4, _iterator6, _step6, _vote3, _channel13, _messageId4, _activeChannelId10, _obj5, _channel14, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId11, _channelUpdateParams, _channel15, _updatedChannel, _channel16, _activeChannelId12, channelExist, _channel17, _channel18, _channel19, _channel20, _channel21, _channel22, _channel23, _groupName5, _channel24, _groupName6, _channel25, members, _activeChannelId13, _customLoadMembersFunctions2, updateMembersEvent, _membersList2, i, _channel26, _channel27, _channelId2, from, name, status, _t, _t2, _t3, _t4;
           return _regenerator().w(function (_context) {
             while (1) switch (_context.p = _context.n) {
               case 0:
@@ -15058,7 +15100,7 @@ function watchForEvents() {
                 type = _yield$take.type;
                 args = _yield$take.args;
                 _t = type;
-                _context.n = _t === CHANNEL_EVENT_TYPES.CREATE ? 2 : _t === CHANNEL_EVENT_TYPES.JOIN ? 7 : _t === CHANNEL_EVENT_TYPES.LEAVE ? 9 : _t === CHANNEL_EVENT_TYPES.BLOCK ? 22 : _t === CHANNEL_EVENT_TYPES.UNBLOCK ? 24 : _t === CHANNEL_EVENT_TYPES.KICK_MEMBERS ? 25 : _t === CHANNEL_EVENT_TYPES.ADD_MEMBERS ? 36 : _t === CHANNEL_EVENT_TYPES.UPDATE_CHANNEL ? 46 : _t === CHANNEL_EVENT_TYPES.MESSAGE ? 51 : _t === CHANNEL_EVENT_TYPES.MESSAGE_MARKERS_RECEIVED ? 66 : _t === CHANNEL_EVENT_TYPES.DELETE ? 79 : _t === CHANNEL_EVENT_TYPES.DELETE_MESSAGE ? 81 : _t === CHANNEL_EVENT_TYPES.EDIT_MESSAGE ? 86 : _t === CHANNEL_EVENT_TYPES.REACTION_ADDED ? 91 : _t === CHANNEL_EVENT_TYPES.POLL_ADDED ? 99 : _t === CHANNEL_EVENT_TYPES.POLL_DELETED ? 109 : _t === CHANNEL_EVENT_TYPES.POLL_RETRACTED ? 117 : _t === CHANNEL_EVENT_TYPES.POLL_CLOSED ? 125 : _t === CHANNEL_EVENT_TYPES.REACTION_DELETED ? 129 : _t === CHANNEL_EVENT_TYPES.UNREAD_MESSAGES_INFO ? 134 : _t === CHANNEL_EVENT_TYPES.CLEAR_HISTORY ? 137 : _t === CHANNEL_EVENT_TYPES.MUTE ? 143 : _t === CHANNEL_EVENT_TYPES.UNMUTE ? 145 : _t === CHANNEL_EVENT_TYPES.PINED ? 147 : _t === CHANNEL_EVENT_TYPES.UNPINED ? 149 : _t === CHANNEL_EVENT_TYPES.HIDE ? 151 : _t === CHANNEL_EVENT_TYPES.UNHIDE ? 153 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_UNREAD ? 155 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_READ ? 158 : _t === CHANNEL_EVENT_TYPES.CHANGE_ROLE ? 161 : _t === CHANNEL_EVENT_TYPES.FROZEN ? 168 : _t === CHANNEL_EVENT_TYPES.UNFROZEN ? 169 : _t === CHANNEL_EVENT_TYPES.CHANNEL_EVENT ? 170 : _t === CONNECTION_EVENT_TYPES.CONNECTION_STATUS_CHANGED ? 179 : 182;
+                _context.n = _t === CHANNEL_EVENT_TYPES.CREATE ? 2 : _t === CHANNEL_EVENT_TYPES.JOIN ? 7 : _t === CHANNEL_EVENT_TYPES.LEAVE ? 17 : _t === CHANNEL_EVENT_TYPES.BLOCK ? 30 : _t === CHANNEL_EVENT_TYPES.UNBLOCK ? 32 : _t === CHANNEL_EVENT_TYPES.KICK_MEMBERS ? 33 : _t === CHANNEL_EVENT_TYPES.ADD_MEMBERS ? 44 : _t === CHANNEL_EVENT_TYPES.UPDATE_CHANNEL ? 59 : _t === CHANNEL_EVENT_TYPES.MESSAGE ? 64 : _t === CHANNEL_EVENT_TYPES.MESSAGE_MARKERS_RECEIVED ? 79 : _t === CHANNEL_EVENT_TYPES.DELETE ? 92 : _t === CHANNEL_EVENT_TYPES.DELETE_MESSAGE ? 94 : _t === CHANNEL_EVENT_TYPES.EDIT_MESSAGE ? 99 : _t === CHANNEL_EVENT_TYPES.REACTION_ADDED ? 104 : _t === CHANNEL_EVENT_TYPES.POLL_ADDED ? 112 : _t === CHANNEL_EVENT_TYPES.POLL_DELETED ? 122 : _t === CHANNEL_EVENT_TYPES.POLL_RETRACTED ? 130 : _t === CHANNEL_EVENT_TYPES.POLL_CLOSED ? 138 : _t === CHANNEL_EVENT_TYPES.REACTION_DELETED ? 142 : _t === CHANNEL_EVENT_TYPES.UNREAD_MESSAGES_INFO ? 147 : _t === CHANNEL_EVENT_TYPES.CLEAR_HISTORY ? 150 : _t === CHANNEL_EVENT_TYPES.MUTE ? 156 : _t === CHANNEL_EVENT_TYPES.UNMUTE ? 158 : _t === CHANNEL_EVENT_TYPES.PINED ? 160 : _t === CHANNEL_EVENT_TYPES.UNPINED ? 162 : _t === CHANNEL_EVENT_TYPES.HIDE ? 164 : _t === CHANNEL_EVENT_TYPES.UNHIDE ? 166 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_UNREAD ? 168 : _t === CHANNEL_EVENT_TYPES.CHANNEL_MARKED_AS_READ ? 171 : _t === CHANNEL_EVENT_TYPES.CHANGE_ROLE ? 174 : _t === CHANNEL_EVENT_TYPES.FROZEN ? 184 : _t === CHANNEL_EVENT_TYPES.UNFROZEN ? 185 : _t === CHANNEL_EVENT_TYPES.CHANNEL_EVENT ? 186 : _t === CONNECTION_EVENT_TYPES.CONNECTION_STATUS_CHANGED ? 195 : 198;
                 break;
               case 2:
                 createdChannel = args.createdChannel;
@@ -15092,227 +15134,307 @@ function watchForEvents() {
                   addChannelToAllChannels(createdChannel);
                 }
               case 6:
-                return _context.a(3, 183);
+                return _context.a(3, 199);
               case 7:
-                channel = args.channel;
+                channel = args.channel, joinedMember = args.joinedMember;
                 log.info('channel JOIN ... . ', channel);
-                _context.n = 8;
-                return effects.call(getActiveChannelId);
-              case 8:
                 _chan2 = getChannelFromAllChannels(channel.id);
                 if (!_chan2) {
                   addChannelToAllChannels(channel);
+                  _chan2 = getChannelFromAllChannels(channel.id);
+                }
+                if (!_chan2) {
+                  _context.n = 16;
+                  break;
+                }
+                customLoadMembersFunctions = getCustomLoadMembersFunctions();
+                joinMembersEvent = customLoadMembersFunctions === null || customLoadMembersFunctions === void 0 ? void 0 : customLoadMembersFunctions.joinMembersEvent;
+                membersList = [];
+                if (!joinMembersEvent) {
+                  _context.n = 10;
+                  break;
                 }
-                return _context.a(3, 183);
+                _context.n = 8;
+                return effects.call(joinMembersEvent, _chan2.id, [joinedMember], store.getState().MembersReducer.channelsMembersMap[_chan2.id] || []);
+              case 8:
+                membersList = _context.v;
+                _context.n = 9;
+                return effects.put(setMembersToListAC(membersList, _chan2.id));
               case 9:
+                _context.n = 11;
+                break;
+              case 10:
+                _context.n = 11;
+                return effects.put(addMembersToListAC([joinedMember], _chan2.id));
+              case 11:
+                updateChannelOnAllChannels(_chan2.id, {
+                  memberCount: _chan2.memberCount + 1
+                });
+                if (!joinMembersEvent) {
+                  _context.n = 12;
+                  break;
+                }
+                _t2 = {
+                  members: membersList
+                };
+                _context.n = 14;
+                break;
+              case 12:
+                _context.n = 13;
+                return effects.call(updateActiveChannelMembersAdd, [joinedMember]) || {};
+              case 13:
+                _t2 = _context.v;
+              case 14:
+                updateChannelData = _t2;
+                _context.n = 15;
+                return effects.put(updateChannelDataAC(_chan2.id, _extends({
+                  memberCount: _chan2.memberCount + 1
+                }, updateChannelData)));
+              case 15:
+                _context.n = 16;
+                return effects.put(updateSearchedChannelDataAC(_chan2.id, {
+                  memberCount: _chan2.memberCount + 1
+                }, getChannelGroupName(_chan2)));
+              case 16:
+                return _context.a(3, 199);
+              case 17:
                 _channel = args.channel, member = args.member;
                 log.info('channel LEAVE ... ', _channel, member);
                 _channelExists = checkChannelExists(_channel.id);
-                _context.n = 10;
+                _context.n = 18;
                 return effects.call(getActiveChannelId);
-              case 10:
-                _activeChannelId = _context.v;
+              case 18:
+                activeChannelId = _context.v;
                 if (!(member.id === SceytChatClient.user.id)) {
-                  _context.n = 15;
+                  _context.n = 23;
                   break;
                 }
-                _context.n = 11;
+                _context.n = 19;
                 return effects.put(switchChannelActionAC(null));
-              case 11:
-                _context.n = 12;
+              case 19:
+                _context.n = 20;
                 return effects.put(removeChannelAC(_channel.id));
-              case 12:
+              case 20:
                 removeChannelFromMap(_channel.id);
                 deleteChannelFromAllChannels(_channel.id);
-                _context.n = 13;
+                _context.n = 21;
                 return effects.put(setChannelToRemoveAC(_channel));
-              case 13:
-                _context.n = 14;
+              case 21:
+                _context.n = 22;
                 return effects.put(removeChannelCachesAC(_channel.id));
-              case 14:
-                _context.n = 21;
+              case 22:
+                _context.n = 29;
                 break;
-              case 15:
+              case 23:
                 groupName = getChannelGroupName(_channel);
                 if (!_channelExists) {
-                  _context.n = 19;
+                  _context.n = 27;
                   break;
                 }
-                updateChannelData = {};
-                if (!(_activeChannelId === _channel.id)) {
-                  _context.n = 18;
+                _updateChannelData = {};
+                if (!(activeChannelId === _channel.id)) {
+                  _context.n = 26;
                   break;
                 }
-                _context.n = 16;
-                return effects.put(removeMemberFromListAC([member]));
-              case 16:
-                _context.n = 17;
+                _context.n = 24;
+                return effects.put(removeMemberFromListAC([member], _channel.id));
+              case 24:
+                _context.n = 25;
                 return effects.call(updateActiveChannelMembersRemove, [member]) || {};
-              case 17:
-                updateChannelData = _context.v;
-              case 18:
-                _context.n = 19;
+              case 25:
+                _updateChannelData = _context.v;
+              case 26:
+                _context.n = 27;
                 return effects.put(updateChannelDataAC(_channel.id, _extends({
                   memberCount: _channel.memberCount,
                   muted: _channel.muted,
                   mutedTill: _channel.mutedTill
-                }, updateChannelData)));
-              case 19:
-                _context.n = 20;
+                }, _updateChannelData)));
+              case 27:
+                _context.n = 28;
                 return effects.put(updateSearchedChannelDataAC(_channel.id, {
                   memberCount: _channel.memberCount,
                   muted: _channel.muted,
                   mutedTill: _channel.mutedTill
                 }, groupName));
-              case 20:
+              case 28:
                 updateChannelOnAllChannels(_channel.id, {
                   memberCount: _channel.memberCount,
                   muted: _channel.muted,
                   mutedTill: _channel.mutedTill
                 });
-              case 21:
-                return _context.a(3, 183);
-              case 22:
+              case 29:
+                return _context.a(3, 199);
+              case 30:
                 log.info('channel BLOCK ... ');
                 _channel2 = args.channel;
                 _channelExists2 = checkChannelExists(_channel2.id);
                 if (!_channelExists2) {
-                  _context.n = 23;
+                  _context.n = 31;
                   break;
                 }
-                _context.n = 23;
+                _context.n = 31;
                 return effects.put(removeChannelAC(_channel2.id));
-              case 23:
-                return _context.a(3, 183);
-              case 24:
+              case 31:
+                return _context.a(3, 199);
+              case 32:
                 log.info('channel UNBLOCK ... ');
-                return _context.a(3, 183);
-              case 25:
+                return _context.a(3, 199);
+              case 33:
                 _channel3 = args.channel, removedMembers = args.removedMembers;
                 log.info('channel KICK_MEMBERS ... ', removedMembers);
-                _context.n = 26;
+                _context.n = 34;
                 return effects.call(getActiveChannelId);
-              case 26:
-                _activeChannelId2 = _context.v;
+              case 34:
+                _activeChannelId = _context.v;
                 _channelExists3 = checkChannelExists(_channel3.id);
                 if (!_channelExists3) {
-                  _context.n = 35;
+                  _context.n = 43;
                   break;
                 }
                 if (!removedMembers.find(function (mem) {
                   return mem.id === SceytChatClient.user.id;
                 })) {
-                  _context.n = 30;
+                  _context.n = 38;
                   break;
                 }
                 removeChannelFromMap(_channel3.id);
-                _context.n = 27;
+                _context.n = 35;
                 return effects.put(removeChannelAC(_channel3.id));
-              case 27:
-                _context.n = 28;
+              case 35:
+                _context.n = 36;
                 return effects.call(getLastChannelFromMap);
-              case 28:
+              case 36:
                 activeChannel = _context.v;
                 if (!activeChannel) {
-                  _context.n = 29;
+                  _context.n = 37;
                   break;
                 }
-                _context.n = 29;
+                _context.n = 37;
                 return effects.put(switchChannelActionAC(JSON.parse(JSON.stringify(activeChannel))));
-              case 29:
-                _context.n = 35;
+              case 37:
+                _context.n = 43;
                 break;
-              case 30:
-                _updateChannelData = {};
-                if (!(_activeChannelId2 === _channel3.id)) {
-                  _context.n = 33;
+              case 38:
+                _updateChannelData2 = {};
+                if (!(_activeChannelId === _channel3.id)) {
+                  _context.n = 41;
                   break;
                 }
-                _context.n = 31;
-                return effects.put(removeMemberFromListAC(removedMembers));
-              case 31:
-                _context.n = 32;
+                _context.n = 39;
+                return effects.put(removeMemberFromListAC(removedMembers, _channel3.id));
+              case 39:
+                _context.n = 40;
                 return effects.call(updateActiveChannelMembersRemove, removedMembers) || {};
-              case 32:
-                _updateChannelData = _context.v;
-              case 33:
+              case 40:
+                _updateChannelData2 = _context.v;
+              case 41:
                 _groupName = getChannelGroupName(_channel3);
-                _context.n = 34;
+                _context.n = 42;
                 return effects.put(updateSearchedChannelDataAC(_channel3.id, {
                   memberCount: _channel3.memberCount,
                   muted: _channel3.muted,
                   mutedTill: _channel3.mutedTill
                 }, _groupName));
-              case 34:
-                _context.n = 35;
+              case 42:
+                _context.n = 43;
                 return effects.put(updateChannelDataAC(_channel3.id, _extends({
                   memberCount: _channel3.memberCount,
                   muted: _channel3.muted,
                   mutedTill: _channel3.mutedTill
-                }, _updateChannelData)));
-              case 35:
+                }, _updateChannelData2)));
+              case 43:
                 updateChannelOnAllChannels(_channel3.id, {
                   memberCount: _channel3.memberCount,
                   muted: _channel3.muted,
                   mutedTill: _channel3.mutedTill
                 });
-                return _context.a(3, 183);
-              case 36:
+                return _context.a(3, 199);
+              case 44:
                 _channel4 = args.channel, addedMembers = args.addedMembers;
                 log.info('channel ADD_MEMBERS ... ', addedMembers);
-                _context.n = 37;
+                _context.n = 45;
                 return effects.call(getActiveChannelId);
-              case 37:
-                _activeChannelId3 = _context.v;
+              case 45:
+                _activeChannelId2 = _context.v;
                 _channelExists4 = checkChannelExists(_channel4.id);
                 if (!_channelExists4) {
-                  _context.n = 42;
+                  _context.n = 55;
                   break;
                 }
-                _updateChannelData2 = {};
-                if (!(_activeChannelId3 === _channel4.id)) {
-                  _context.n = 40;
+                _updateChannelData3 = {};
+                if (!(_activeChannelId2 === _channel4.id)) {
+                  _context.n = 53;
                   break;
                 }
-                _context.n = 38;
-                return effects.put(addMembersToListAC(addedMembers));
-              case 38:
-                _context.n = 39;
+                _customLoadMembersFunctions = getCustomLoadMembersFunctions();
+                addMembersEvent = _customLoadMembersFunctions === null || _customLoadMembersFunctions === void 0 ? void 0 : _customLoadMembersFunctions.addMembersEvent;
+                _membersList = [];
+                if (!addMembersEvent) {
+                  _context.n = 48;
+                  break;
+                }
+                _context.n = 46;
+                return effects.call(addMembersEvent, _channel4.id, addedMembers, store.getState().MembersReducer.channelsMembersMap[_channel4.id] || []);
+              case 46:
+                _membersList = _context.v;
+                _context.n = 47;
+                return effects.put(setMembersToListAC(_membersList, _channel4.id));
+              case 47:
+                _context.n = 49;
+                break;
+              case 48:
+                _context.n = 49;
+                return effects.put(addMembersToListAC(addedMembers, _channel4.id));
+              case 49:
+                if (!addMembersEvent) {
+                  _context.n = 50;
+                  break;
+                }
+                _t3 = {
+                  members: _membersList
+                };
+                _context.n = 52;
+                break;
+              case 50:
+                _context.n = 51;
                 return effects.call(updateActiveChannelMembersAdd, addedMembers) || {};
-              case 39:
-                _updateChannelData2 = _context.v;
-              case 40:
-                _context.n = 41;
+              case 51:
+                _t3 = _context.v;
+              case 52:
+                _updateChannelData3 = _t3;
+              case 53:
+                _context.n = 54;
                 return effects.put(updateChannelDataAC(_channel4.id, _extends({
                   memberCount: _channel4.memberCount,
                   muted: _channel4.muted,
                   mutedTill: _channel4.mutedTill
-                }, _updateChannelData2)));
-              case 41:
-                _context.n = 44;
+                }, _updateChannelData3)));
+              case 54:
+                _context.n = 57;
                 break;
-              case 42:
-                _context.n = 43;
+              case 55:
+                _context.n = 56;
                 return effects.call(setChannelInMap, _channel4);
-              case 43:
-                _context.n = 44;
+              case 56:
+                _context.n = 57;
                 return effects.put(setAddedToChannelAC(JSON.parse(JSON.stringify(_channel4))));
-              case 44:
+              case 57:
                 _groupName2 = getChannelGroupName(_channel4);
-                _context.n = 45;
+                _context.n = 58;
                 return effects.put(updateSearchedChannelDataAC(_channel4.id, {
                   memberCount: _channel4.memberCount,
                   muted: _channel4.muted,
                   mutedTill: _channel4.mutedTill
                 }, _groupName2));
-              case 45:
+              case 58:
                 updateChannelOnAllChannels(_channel4.id, {
                   memberCount: _channel4.memberCount,
                   muted: _channel4.muted,
                   mutedTill: _channel4.mutedTill
                 });
-                return _context.a(3, 183);
-              case 46:
+                return _context.a(3, 199);
+              case 59:
                 onUpdateChannel = getOnUpdateChannel();
                 log.info('channel UPDATE_CHANNEL ... ');
                 updatedChannel = args.updatedChannel;
@@ -15341,39 +15463,39 @@ function watchForEvents() {
                   onUpdateChannel(updatedChannel, fields);
                 }
                 if (!_channelExists5) {
-                  _context.n = 49;
+                  _context.n = 62;
                   break;
                 }
-                _context.n = 47;
+                _context.n = 60;
                 return effects.put(updateChannelDataAC(updatedChannel.id, {
                   subject: subject,
                   avatarUrl: avatarUrl,
                   muted: muted,
                   mutedTill: mutedTill
                 }));
-              case 47:
-                _context.n = 48;
+              case 60:
+                _context.n = 61;
                 return effects.call(getActiveChannelId);
-              case 48:
-                _activeChannelId4 = _context.v;
-                if (!(_activeChannelId4 === updatedChannel.id)) {
-                  _context.n = 49;
+              case 61:
+                _activeChannelId3 = _context.v;
+                if (!(_activeChannelId3 === updatedChannel.id)) {
+                  _context.n = 62;
                   break;
                 }
-                _context.n = 49;
+                _context.n = 62;
                 return effects.put(setActiveChannelAC(_extends({}, updatedChannel, {
                   metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
                 })));
-              case 49:
+              case 62:
                 _groupName3 = getChannelGroupName(updatedChannel);
-                _context.n = 50;
+                _context.n = 63;
                 return effects.put(updateSearchedChannelDataAC(updatedChannel.id, {
                   subject: subject,
                   avatarUrl: avatarUrl,
                   muted: muted,
                   mutedTill: mutedTill
                 }, _groupName3));
-              case 50:
+              case 63:
                 updateChannelOnAllChannels(updatedChannel.id, {
                   subject: subject,
                   avatarUrl: avatarUrl,
@@ -15381,60 +15503,60 @@ function watchForEvents() {
                   mutedTill: mutedTill,
                   metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
                 });
-                return _context.a(3, 183);
-              case 51:
+                return _context.a(3, 199);
+              case 64:
                 _channel6 = args.channel, message = args.message;
                 log.info('channel MESSAGE ... id : ', message.id, ', channel.id: ', _channel6.id);
                 messageToHandle = handleNewMessages ? handleNewMessages(message, _channel6) : message;
                 _channelFilterTypes = getChannelTypesFilter();
                 if (!(messageToHandle && _channel6 && (_channelFilterTypes !== null && _channelFilterTypes !== void 0 && _channelFilterTypes.length ? _channelFilterTypes.includes(_channel6.type) : true))) {
-                  _context.n = 65;
+                  _context.n = 78;
                   break;
                 }
                 _channel6.metadata = isJSON(_channel6.metadata) ? JSON.parse(_channel6.metadata) : _channel6.metadata;
-                _activeChannelId5 = getActiveChannelId();
+                _activeChannelId4 = getActiveChannelId();
                 _channelExists6 = checkChannelExists(_channel6.id);
                 channelForAdd = JSON.parse(JSON.stringify(_channel6));
-                _context.n = 52;
+                _context.n = 65;
                 return effects.put(addChannelAC(channelForAdd));
-              case 52:
+              case 65:
                 if (_channelExists6) {
-                  _context.n = 53;
+                  _context.n = 66;
                   break;
                 }
                 setChannelInMap(_channel6);
-                _context.n = 54;
+                _context.n = 67;
                 break;
-              case 53:
+              case 66:
                 if (message.repliedInThread) {
-                  _context.n = 54;
+                  _context.n = 67;
                   break;
                 }
-                _context.n = 54;
+                _context.n = 67;
                 return effects.put(updateChannelLastMessageAC(message, channelForAdd));
-              case 54:
-                if (!(_channel6.id === _activeChannelId5)) {
-                  _context.n = 56;
+              case 67:
+                if (!(_channel6.id === _activeChannelId4)) {
+                  _context.n = 69;
                   break;
                 }
                 if (getHasNextCached()) {
-                  _context.n = 55;
+                  _context.n = 68;
                   break;
                 }
-                _context.n = 55;
+                _context.n = 68;
                 return effects.put(addMessageAC(message));
-              case 55:
+              case 68:
                 addAllMessages([message], MESSAGE_LOAD_DIRECTION.NEXT);
                 hasNextMessage = store.getState().MessageReducer.messagesHasNext;
                 if (!(!getHasNextCached() && !hasNextMessage)) {
-                  _context.n = 56;
+                  _context.n = 69;
                   break;
                 }
-                _context.n = 56;
+                _context.n = 69;
                 return effects.put(scrollToNewMessageAC(true, false, true));
-              case 56:
+              case 69:
                 addMessageToMap(_channel6.id, message);
-                _context.n = 57;
+                _context.n = 70;
                 return effects.put(updateChannelDataAC(_channel6.id, {
                   messageCount: channelForAdd.messageCount,
                   unread: channelForAdd.unread,
@@ -15450,9 +15572,9 @@ function watchForEvents() {
                   userMessageReactions: [],
                   lastReactedMessage: null
                 }));
-              case 57:
+              case 70:
                 _groupName4 = getChannelGroupName(_channel6);
-                _context.n = 58;
+                _context.n = 71;
                 return effects.put(updateSearchedChannelDataAC(_channel6.id, {
                   messageCount: channelForAdd.messageCount,
                   unread: channelForAdd.unread,
@@ -15468,27 +15590,27 @@ function watchForEvents() {
                   userMessageReactions: [],
                   lastReactedMessage: null
                 }, _groupName4));
-              case 58:
+              case 71:
                 showNotifications = getShowNotifications();
                 if (!(showNotifications && !message.silent && message.user.id !== SceytChatClient.user.id && !_channel6.muted)) {
-                  _context.n = 61;
+                  _context.n = 74;
                   break;
                 }
                 if (!(Notification.permission === 'granted')) {
-                  _context.n = 61;
+                  _context.n = 74;
                   break;
                 }
-                _context.n = 59;
+                _context.n = 72;
                 return effects.select(browserTabIsActiveSelector);
-              case 59:
+              case 72:
                 tabIsActive = _context.v;
-                if (!(document.visibilityState !== 'visible' || !tabIsActive || _channel6.id !== _activeChannelId5)) {
-                  _context.n = 61;
+                if (!(document.visibilityState !== 'visible' || !tabIsActive || _channel6.id !== _activeChannelId4)) {
+                  _context.n = 74;
                   break;
                 }
-                _context.n = 60;
+                _context.n = 73;
                 return effects.select(contactsMapSelector);
-              case 60:
+              case 73:
                 contactsMap = _context.v;
                 _getFromContacts = getShowOnlyContactUsers();
                 state = store.getState();
@@ -15508,20 +15630,20 @@ function watchForEvents() {
                 setNotification(messageBody, message.user, _channel6, undefined, message.attachments && message.attachments.length ? message.attachments.find(function (att) {
                   return att.type !== attachmentTypes.link;
                 }) : undefined);
-              case 61:
+              case 74:
                 if (!(message.repliedInThread && message.parentMessage.id)) {
-                  _context.n = 63;
+                  _context.n = 76;
                   break;
                 }
-                _context.n = 62;
+                _context.n = 75;
                 return effects.put(markMessagesAsDeliveredAC(message.parentMessage.id, [message.id]));
-              case 62:
-                _context.n = 64;
+              case 75:
+                _context.n = 77;
                 break;
-              case 63:
-                _context.n = 64;
+              case 76:
+                _context.n = 77;
                 return effects.put(markMessagesAsDeliveredAC(_channel6.id, [message.id]));
-              case 64:
+              case 77:
                 updateChannelOnAllChannels(_channel6.id, {
                   messageCount: channelForAdd.messageCount,
                   unread: channelForAdd.unread,
@@ -15538,50 +15660,50 @@ function watchForEvents() {
                   userMessageReactions: _channel6.userMessageReactions
                 });
                 updateChannelLastMessageOnAllChannels(_channel6.id, _channel6.lastMessage);
-              case 65:
-                return _context.a(3, 183);
-              case 66:
+              case 78:
+                return _context.a(3, 199);
+              case 79:
                 channelId = args.channelId, markerList = args.markerList;
-                _context.n = 67;
+                _context.n = 80;
                 return effects.call(getChannelFromMap, channelId);
-              case 67:
+              case 80:
                 _channel7 = _context.v;
                 log.info('channel MESSAGE_MARKERS_RECEIVED ... channel: ', _channel7, 'markers list: ', markerList);
                 if (!_channel7) {
-                  _context.n = 78;
+                  _context.n = 91;
                   break;
                 }
-                _context.n = 68;
+                _context.n = 81;
                 return effects.call(getActiveChannelId);
-              case 68:
-                _activeChannelId6 = _context.v;
+              case 81:
+                _activeChannelId5 = _context.v;
                 updateLastMessage = false;
                 markersMap = {};
-                activeChannelMessages = getMessagesFromMap(_activeChannelId6);
+                activeChannelMessages = getMessagesFromMap(_activeChannelId5);
                 _iterator = _createForOfIteratorHelperLoose(markerList.messageIds);
-              case 69:
+              case 82:
                 if ((_step = _iterator()).done) {
-                  _context.n = 74;
+                  _context.n = 87;
                   break;
                 }
                 messageId = _step.value;
                 if (!(activeChannelMessages !== null && activeChannelMessages !== void 0 && activeChannelMessages[messageId])) {
-                  _context.n = 71;
+                  _context.n = 84;
                   break;
                 }
-                _context.n = 70;
+                _context.n = 83;
                 return effects.put(removePendingMessageAC(channelId, messageId));
-              case 70:
-                _context.n = 72;
+              case 83:
+                _context.n = 85;
                 break;
-              case 71:
-                isPendingMessage = getMessageFromPendingMessagesMap(_activeChannelId6, messageId);
+              case 84:
+                isPendingMessage = getMessageFromPendingMessagesMap(_activeChannelId5, messageId);
                 if (isPendingMessage) {
-                  updatePendingMessageOnMap(_activeChannelId6, messageId, {
+                  updatePendingMessageOnMap(_activeChannelId5, messageId, {
                     deliveryStatus: markerList.name
                   });
                 }
-              case 72:
+              case 85:
                 markersMap[messageId] = true;
                 if (_channel7) {
                   if (_channel7.lastMessage && messageId === _channel7.lastMessage.id) {
@@ -15592,102 +15714,102 @@ function watchForEvents() {
                   id: messageId,
                   deliveryStatus: markerList.name
                 });
-              case 73:
-                _context.n = 69;
+              case 86:
+                _context.n = 82;
                 break;
-              case 74:
+              case 87:
                 if (!updateLastMessage) {
-                  _context.n = 75;
+                  _context.n = 88;
                   break;
                 }
                 lastMessage = _extends({}, _channel7.lastMessage, updateMessageDeliveryStatusAndMarkers(_channel7.lastMessage, markerList.name));
                 updateChannelLastMessageOnAllChannels(_channel7.id, lastMessage);
-                _context.n = 75;
+                _context.n = 88;
                 return effects.put(updateChannelLastMessageStatusAC(lastMessage, _channel7));
-              case 75:
-                if (!(_activeChannelId6 === channelId)) {
-                  _context.n = 77;
+              case 88:
+                if (!(_activeChannelId5 === channelId)) {
+                  _context.n = 90;
                   break;
                 }
-                _context.n = 76;
+                _context.n = 89;
                 return effects.put(updateMessagesStatusAC(markerList.name, markersMap));
-              case 76:
+              case 89:
                 updateMarkersOnAllMessages(markersMap, markerList.name);
-              case 77:
+              case 90:
                 updateMessageStatusOnMap(_channel7.id, {
                   name: markerList.name,
                   markersMap: markersMap
                 });
                 updateMessageStatusOnAllMessages(markerList.name, markersMap);
-                _context.n = 78;
+                _context.n = 91;
                 return effects.put(updateMessagesMarkersAC(channelId, markerList.name, markerList));
-              case 78:
-                return _context.a(3, 183);
-              case 79:
+              case 91:
+                return _context.a(3, 199);
+              case 92:
                 _channelId = args.channelId;
                 log.info('channel DELETE ... ');
                 _channel8 = getChannelFromMap(_channelId);
-                _context.n = 80;
+                _context.n = 93;
                 return effects.put(setChannelToRemoveAC(_channel8));
-              case 80:
+              case 93:
                 deleteChannelFromAllChannels(_channelId);
-                return _context.a(3, 183);
-              case 81:
+                return _context.a(3, 199);
+              case 94:
                 _channel9 = args.channel, deletedMessage = args.deletedMessage;
-                _context.n = 82;
+                _context.n = 95;
                 return effects.call(getActiveChannelId);
-              case 82:
-                _activeChannelId7 = _context.v;
+              case 95:
+                _activeChannelId6 = _context.v;
                 log.info('channel DELETE_MESSAGE ... ');
                 _channelExists7 = checkChannelExists(_channel9.id);
-                if (!(_channel9.id === _activeChannelId7)) {
-                  _context.n = 83;
+                if (!(_channel9.id === _activeChannelId6)) {
+                  _context.n = 96;
                   break;
                 }
                 updateMessageOnAllMessages(deletedMessage.id, deletedMessage);
-                _context.n = 83;
+                _context.n = 96;
                 return effects.put(updateMessageAC(deletedMessage.id, deletedMessage));
-              case 83:
+              case 96:
                 updateMessageOnMap(_channel9.id, {
                   messageId: deletedMessage.id,
                   params: deletedMessage
                 });
                 if (!_channelExists7) {
-                  _context.n = 85;
+                  _context.n = 98;
                   break;
                 }
-                _context.n = 84;
+                _context.n = 97;
                 return effects.put(updateChannelDataAC(_channel9.id, {
                   newMessageCount: _channel9.newMessageCount,
                   muted: _channel9.muted,
                   mutedTill: _channel9.mutedTill
                 }));
-              case 84:
+              case 97:
                 if (!(_channel9.lastMessage.id === deletedMessage.id)) {
-                  _context.n = 85;
+                  _context.n = 98;
                   break;
                 }
-                _context.n = 85;
+                _context.n = 98;
                 return effects.put(updateChannelLastMessageAC(deletedMessage, _channel9));
-              case 85:
+              case 98:
                 updateChannelOnAllChannels(_channel9.id, {
                   newMessageCount: _channel9.newMessageCount,
                   muted: _channel9.muted,
                   mutedTill: _channel9.mutedTill
                 }, deletedMessage);
-                return _context.a(3, 183);
-              case 86:
+                return _context.a(3, 199);
+              case 99:
                 _channel0 = args.channel, _message = args.message;
-                _context.n = 87;
+                _context.n = 100;
                 return effects.call(getActiveChannelId);
-              case 87:
-                _activeChannelId8 = _context.v;
+              case 100:
+                _activeChannelId7 = _context.v;
                 _channelExists8 = checkChannelExists(_channel0.id);
-                if (!(_channel0.id === _activeChannelId8)) {
-                  _context.n = 89;
+                if (!(_channel0.id === _activeChannelId7)) {
+                  _context.n = 102;
                   break;
                 }
-                _context.n = 88;
+                _context.n = 101;
                 return effects.put(updateMessageAC(_message.id, {
                   body: _message.body,
                   state: _message.state,
@@ -15696,7 +15818,7 @@ function watchForEvents() {
                   mentionedUsers: _message.mentionedUsers,
                   updatedAt: _message.updatedAt
                 }));
-              case 88:
+              case 101:
                 updateMessageOnAllMessages(_message.id, {
                   body: _message.body,
                   state: _message.state,
@@ -15705,18 +15827,18 @@ function watchForEvents() {
                   mentionedUsers: _message.mentionedUsers,
                   updatedAt: _message.updatedAt
                 });
-              case 89:
+              case 102:
                 if (!_channelExists8) {
-                  _context.n = 90;
+                  _context.n = 103;
                   break;
                 }
                 if (!(_channel0.lastMessage.id === _message.id)) {
-                  _context.n = 90;
+                  _context.n = 103;
                   break;
                 }
-                _context.n = 90;
+                _context.n = 103;
                 return effects.put(updateChannelLastMessageAC(_message, _channel0));
-              case 90:
+              case 103:
                 if (checkChannelExistsOnMessagesMap(_channel0.id)) {
                   updateMessageOnMap(_channel0.id, {
                     messageId: _message.id,
@@ -15724,38 +15846,38 @@ function watchForEvents() {
                   });
                 }
                 updateChannelOnAllChannels(_channel0.id, {}, _message);
-                return _context.a(3, 183);
-              case 91:
+                return _context.a(3, 199);
+              case 104:
                 _channel1 = args.channel, user = args.user, _message2 = args.message, reaction = args.reaction;
                 isSelf = user.id === SceytChatClient.user.id;
-                _context.n = 92;
+                _context.n = 105;
                 return effects.call(getActiveChannelId);
-              case 92:
-                _activeChannelId9 = _context.v;
-                if (!(_channel1.id === _activeChannelId9)) {
-                  _context.n = 94;
+              case 105:
+                _activeChannelId8 = _context.v;
+                if (!(_channel1.id === _activeChannelId8)) {
+                  _context.n = 107;
                   break;
                 }
-                _context.n = 93;
+                _context.n = 106;
                 return effects.put(addReactionToMessageAC(_message2, reaction, isSelf));
-              case 93:
+              case 106:
                 addReactionOnAllMessages(_message2, reaction, true);
-              case 94:
+              case 107:
                 if (!(_message2.user.id === SceytChatClient.user.id)) {
-                  _context.n = 98;
+                  _context.n = 111;
                   break;
                 }
                 if (!(!isSelf && Notification.permission === 'granted')) {
-                  _context.n = 96;
+                  _context.n = 109;
                   break;
                 }
-                if (!(document.visibilityState !== 'visible' || _channel1.id !== _activeChannelId9)) {
-                  _context.n = 96;
+                if (!(document.visibilityState !== 'visible' || _channel1.id !== _activeChannelId8)) {
+                  _context.n = 109;
                   break;
                 }
-                _context.n = 95;
+                _context.n = 108;
                 return effects.select(contactsMapSelector);
-              case 95:
+              case 108:
                 _contactsMap = _context.v;
                 _getFromContacts2 = getShowOnlyContactUsers();
                 _state = store.getState();
@@ -15775,9 +15897,9 @@ function watchForEvents() {
                 setNotification(_messageBody, reaction.user, _channel1, reaction.key, _message2.attachments && _message2.attachments.length ? _message2.attachments.find(function (att) {
                   return att.type !== attachmentTypes.link;
                 }) : undefined);
-              case 96:
+              case 109:
                 if (!(_channel1.newReactions && _channel1.newReactions.length)) {
-                  _context.n = 97;
+                  _context.n = 110;
                   break;
                 }
                 channelUpdateParams = {
@@ -15787,9 +15909,9 @@ function watchForEvents() {
                   muted: _channel1.muted,
                   mutedTill: _channel1.mutedTill
                 };
-                _context.n = 97;
+                _context.n = 110;
                 return effects.put(updateChannelDataAC(_channel1.id, channelUpdateParams));
-              case 97:
+              case 110:
                 updateChannelOnAllChannels(_channel1.id, {
                   userMessageReactions: _channel1.newReactions,
                   lastReactedMessage: _message2,
@@ -15797,19 +15919,19 @@ function watchForEvents() {
                   muted: _channel1.muted,
                   mutedTill: _channel1.mutedTill
                 });
-              case 98:
+              case 111:
                 if (checkChannelExistsOnMessagesMap(_channel1.id)) {
                   addReactionToMessageOnMap(_channel1.id, _message2, reaction, true);
                 }
-                return _context.a(3, 183);
-              case 99:
+                return _context.a(3, 199);
+              case 112:
                 log.info('CHANNEL_EVENT_TYPES.POLL_ADDED ... ');
                 _channel10 = args.channel, pollDetails = args.pollDetails, _messageId = args.messageId;
                 pollDetailsData = pollDetails;
-                _context.n = 100;
+                _context.n = 113;
                 return effects.call(getActiveChannelId);
-              case 100:
-                _activeChannelId0 = _context.v;
+              case 113:
+                _activeChannelId9 = _context.v;
                 addedVotes = (pollDetailsData === null || pollDetailsData === void 0 ? void 0 : (_pollDetailsData$chan = pollDetailsData.changedVotes) === null || _pollDetailsData$chan === void 0 ? void 0 : _pollDetailsData$chan.addedVotes) || [];
                 deletedVotes = (pollDetailsData === null || pollDetailsData === void 0 ? void 0 : (_pollDetailsData$chan2 = pollDetailsData.changedVotes) === null || _pollDetailsData$chan2 === void 0 ? void 0 : _pollDetailsData$chan2.removedVotes) || [];
                 objs = [];
@@ -15828,39 +15950,39 @@ function watchForEvents() {
                   });
                 }
                 _i = 0, _objs = objs;
-              case 101:
+              case 114:
                 if (!(_i < _objs.length)) {
-                  _context.n = 105;
+                  _context.n = 118;
                   break;
                 }
                 obj = _objs[_i];
                 if (!(pollDetailsData !== null && pollDetailsData !== void 0 && pollDetailsData.id && obj.vote)) {
-                  _context.n = 104;
+                  _context.n = 117;
                   break;
                 }
                 key = pollDetailsData.id + "_" + obj.vote.optionId;
                 hasNext = ((_store$getState$Messa = store.getState().MessageReducer.pollVotesHasMore) === null || _store$getState$Messa === void 0 ? void 0 : _store$getState$Messa[key]) || false;
                 if (!(obj.type === 'addOwn')) {
-                  _context.n = 103;
+                  _context.n = 116;
                   break;
                 }
-                _context.n = 102;
+                _context.n = 115;
                 return effects.put(addPollVotesToListAC(pollDetailsData.id, obj.vote.optionId, [obj.vote], hasNext, undefined));
-              case 102:
-                _context.n = 104;
+              case 115:
+                _context.n = 117;
                 break;
-              case 103:
-                _context.n = 104;
+              case 116:
+                _context.n = 117;
                 return effects.put(deletePollVotesFromListAC(pollDetailsData.id, obj.vote.optionId, [obj.vote], _messageId));
-              case 104:
+              case 117:
                 _i++;
-                _context.n = 101;
+                _context.n = 114;
                 break;
-              case 105:
+              case 118:
                 _i2 = 0, _objs2 = objs;
-              case 106:
+              case 119:
                 if (!(_i2 < _objs2.length)) {
-                  _context.n = 108;
+                  _context.n = 121;
                   break;
                 }
                 _obj = _objs2[_i2];
@@ -15871,27 +15993,27 @@ function watchForEvents() {
                   type: _obj.type,
                   vote: _obj.vote
                 });
-                if (!(_channel10.id === _activeChannelId0)) {
-                  _context.n = 107;
+                if (!(_channel10.id === _activeChannelId9)) {
+                  _context.n = 120;
                   break;
                 }
                 updateMessageOnAllMessages(_messageId, {}, _obj);
-                _context.n = 107;
+                _context.n = 120;
                 return effects.put(updateMessageAC(_messageId, {}, undefined, _obj));
-              case 107:
+              case 120:
                 _i2++;
-                _context.n = 106;
+                _context.n = 119;
                 break;
-              case 108:
-                return _context.a(3, 183);
-              case 109:
+              case 121:
+                return _context.a(3, 199);
+              case 122:
                 log.info('CHANNEL_EVENT_TYPES.POLL_DELETED ... ');
                 _channel11 = args.channel, _pollDetails = args.pollDetails, _messageId2 = args.messageId;
                 _pollDetailsData = _pollDetails;
-                _context.n = 110;
+                _context.n = 123;
                 return effects.call(getActiveChannelId);
-              case 110:
-                _activeChannelId1 = _context.v;
+              case 123:
+                _activeChannelId0 = _context.v;
                 _deletedVotes = (_pollDetailsData === null || _pollDetailsData === void 0 ? void 0 : (_pollDetailsData$chan3 = _pollDetailsData.changedVotes) === null || _pollDetailsData$chan3 === void 0 ? void 0 : _pollDetailsData$chan3.removedVotes) || [];
                 _objs3 = [];
                 for (_iterator4 = _createForOfIteratorHelperLoose(_deletedVotes); !(_step4 = _iterator4()).done;) {
@@ -15902,27 +16024,27 @@ function watchForEvents() {
                   });
                 }
                 _i3 = 0, _objs4 = _objs3;
-              case 111:
+              case 124:
                 if (!(_i3 < _objs4.length)) {
-                  _context.n = 113;
+                  _context.n = 126;
                   break;
                 }
                 _obj2 = _objs4[_i3];
                 if (!(_pollDetailsData !== null && _pollDetailsData !== void 0 && _pollDetailsData.id && _obj2.vote)) {
-                  _context.n = 112;
+                  _context.n = 125;
                   break;
                 }
-                _context.n = 112;
+                _context.n = 125;
                 return effects.put(deletePollVotesFromListAC(_pollDetailsData.id, _obj2.vote.optionId, [_obj2.vote], _messageId2));
-              case 112:
+              case 125:
                 _i3++;
-                _context.n = 111;
+                _context.n = 124;
                 break;
-              case 113:
+              case 126:
                 _i4 = 0, _objs5 = _objs3;
-              case 114:
+              case 127:
                 if (!(_i4 < _objs5.length)) {
-                  _context.n = 116;
+                  _context.n = 129;
                   break;
                 }
                 _obj3 = _objs5[_i4];
@@ -15930,26 +16052,26 @@ function watchForEvents() {
                   messageId: _messageId2,
                   params: {}
                 }, _obj3);
-                if (!(_channel11.id === _activeChannelId1)) {
-                  _context.n = 115;
+                if (!(_channel11.id === _activeChannelId0)) {
+                  _context.n = 128;
                   break;
                 }
                 updateMessageOnAllMessages(_messageId2, {}, _obj3);
-                _context.n = 115;
+                _context.n = 128;
                 return effects.put(updateMessageAC(_messageId2, {}, undefined, _obj3));
-              case 115:
+              case 128:
                 _i4++;
-                _context.n = 114;
+                _context.n = 127;
                 break;
-              case 116:
-                return _context.a(3, 183);
-              case 117:
+              case 129:
+                return _context.a(3, 199);
+              case 130:
                 log.info('CHANNEL_EVENT_TYPES.POLL_RETRACTED ... ');
                 _channel12 = args.channel, _pollDetails2 = args.pollDetails, _messageId3 = args.messageId;
-                _context.n = 118;
+                _context.n = 131;
                 return effects.call(getActiveChannelId);
-              case 118:
-                _activeChannelId10 = _context.v;
+              case 131:
+                _activeChannelId1 = _context.v;
                 _pollDetailsData2 = _pollDetails2;
                 retractedVotes = (_pollDetailsData2 === null || _pollDetailsData2 === void 0 ? void 0 : (_pollDetailsData2$cha = _pollDetailsData2.changedVotes) === null || _pollDetailsData2$cha === void 0 ? void 0 : _pollDetailsData2$cha.removedVotes) || [];
                 _objs6 = [];
@@ -15961,9 +16083,9 @@ function watchForEvents() {
                   });
                 }
                 _i5 = 0, _objs7 = _objs6;
-              case 119:
+              case 132:
                 if (!(_i5 < _objs7.length)) {
-                  _context.n = 124;
+                  _context.n = 137;
                   break;
                 }
                 _obj4 = _objs7[_i5];
@@ -15972,42 +16094,42 @@ function watchForEvents() {
                   params: {}
                 }, _obj4);
                 if (!(_pollDetailsData2 !== null && _pollDetailsData2 !== void 0 && _pollDetailsData2.id && retractedVotes.length > 0)) {
-                  _context.n = 122;
+                  _context.n = 135;
                   break;
                 }
                 _iterator6 = _createForOfIteratorHelperLoose(retractedVotes);
-              case 120:
+              case 133:
                 if ((_step6 = _iterator6()).done) {
-                  _context.n = 122;
+                  _context.n = 135;
                   break;
                 }
                 _vote3 = _step6.value;
-                _context.n = 121;
+                _context.n = 134;
                 return effects.put(deletePollVotesFromListAC(_pollDetailsData2.id, _vote3.optionId, [_vote3], _messageId3));
-              case 121:
-                _context.n = 120;
+              case 134:
+                _context.n = 133;
                 break;
-              case 122:
-                if (!(_channel12.id === _activeChannelId10)) {
-                  _context.n = 123;
+              case 135:
+                if (!(_channel12.id === _activeChannelId1)) {
+                  _context.n = 136;
                   break;
                 }
                 updateMessageOnAllMessages(_messageId3, {}, _obj4);
-                _context.n = 123;
+                _context.n = 136;
                 return effects.put(updateMessageAC(_messageId3, {}, undefined, _obj4));
-              case 123:
+              case 136:
                 _i5++;
-                _context.n = 119;
+                _context.n = 132;
                 break;
-              case 124:
-                return _context.a(3, 183);
-              case 125:
+              case 137:
+                return _context.a(3, 199);
+              case 138:
                 log.info('CHANNEL_EVENT_TYPES.POLL_CLOSED ... ');
                 _channel13 = args.channel, _messageId4 = args.messageId;
-                _context.n = 126;
+                _context.n = 139;
                 return effects.call(getActiveChannelId);
-              case 126:
-                _activeChannelId11 = _context.v;
+              case 139:
+                _activeChannelId10 = _context.v;
                 _obj5 = {
                   type: 'close'
                 };
@@ -16015,55 +16137,55 @@ function watchForEvents() {
                   messageId: _messageId4,
                   params: {}
                 }, _obj5);
-                if (!(_channel13.id === _activeChannelId11)) {
-                  _context.n = 128;
+                if (!(_channel13.id === _activeChannelId10)) {
+                  _context.n = 141;
                   break;
                 }
                 updateMessageOnAllMessages(_messageId4, {}, _obj5);
-                _context.n = 127;
+                _context.n = 140;
                 return effects.put(updateMessageAC(_messageId4, {}, undefined, _obj5));
-              case 127:
-                return _context.a(3, 183);
-              case 128:
-                return _context.a(3, 183);
-              case 129:
+              case 140:
+                return _context.a(3, 199);
+              case 141:
+                return _context.a(3, 199);
+              case 142:
                 _channel14 = args.channel, _user = args.user, _message3 = args.message, _reaction = args.reaction;
                 log.info('channel REACTION_DELETED ... ', _channel14);
                 channelFromMap = getChannelFromMap(_channel14.id);
                 _isSelf = _user.id === SceytChatClient.user.id;
-                _context.n = 130;
+                _context.n = 143;
                 return effects.call(getActiveChannelId);
-              case 130:
-                _activeChannelId12 = _context.v;
-                if (!(_channel14.id === _activeChannelId12)) {
-                  _context.n = 132;
+              case 143:
+                _activeChannelId11 = _context.v;
+                if (!(_channel14.id === _activeChannelId11)) {
+                  _context.n = 145;
                   break;
                 }
-                _context.n = 131;
+                _context.n = 144;
                 return effects.put(deleteReactionFromMessageAC(_message3, _reaction, _isSelf));
-              case 131:
+              case 144:
                 removeReactionOnAllMessages(_message3, _reaction, true);
-              case 132:
+              case 145:
                 _channelUpdateParams = JSON.parse(JSON.stringify(_channel14));
                 if (channelFromMap && channelFromMap.lastReactedMessage && channelFromMap.lastReactedMessage.id === _message3.id) {
                   _channelUpdateParams.lastReactedMessage = null;
                 }
-                _context.n = 133;
+                _context.n = 146;
                 return effects.put(updateChannelDataAC(_channel14.id, _channelUpdateParams));
-              case 133:
+              case 146:
                 updateChannelOnAllChannels(_channel14.id, _channelUpdateParams);
                 if (checkChannelExistsOnMessagesMap(_channel14.id)) {
                   removeReactionToMessageOnMap(_channel14.id, _message3, _reaction, true);
                 }
-                return _context.a(3, 183);
-              case 134:
+                return _context.a(3, 199);
+              case 147:
                 _channel15 = args.channel;
                 if (!_channel15) {
-                  _context.n = 136;
+                  _context.n = 149;
                   break;
                 }
                 _updatedChannel = JSON.parse(JSON.stringify(_channel15));
-                _context.n = 135;
+                _context.n = 148;
                 return effects.put(updateChannelDataAC(_channel15.id, {
                   lastMessage: _channel15.lastMessage,
                   newMessageCount: _channel15.newMessageCount,
@@ -16076,36 +16198,36 @@ function watchForEvents() {
                   lastDisplayedMessageId: _channel15.lastDisplayedMessageId,
                   messageRetentionPeriod: _channel15.messageRetentionPeriod
                 }));
-              case 135:
+              case 148:
                 updateChannelOnAllChannels(_channel15.id, _updatedChannel);
-              case 136:
-                return _context.a(3, 183);
-              case 137:
+              case 149:
+                return _context.a(3, 199);
+              case 150:
                 _channel16 = args.channel;
                 log.info('CLEAR_HISTORY: ', _channel16);
-                _context.n = 138;
+                _context.n = 151;
                 return effects.call(getActiveChannelId);
-              case 138:
-                _activeChannelId13 = _context.v;
-                _context.n = 139;
+              case 151:
+                _activeChannelId12 = _context.v;
+                _context.n = 152;
                 return effects.call(checkChannelExists, _channel16.id);
-              case 139:
+              case 152:
                 channelExist = _context.v;
-                if (!(_channel16.id === _activeChannelId13)) {
-                  _context.n = 141;
+                if (!(_channel16.id === _activeChannelId12)) {
+                  _context.n = 154;
                   break;
                 }
-                _context.n = 140;
+                _context.n = 153;
                 return effects.put(clearMessagesAC());
-              case 140:
+              case 153:
                 removeAllMessages();
-              case 141:
+              case 154:
                 removeMessagesFromMap(_channel16.id);
                 if (!channelExist) {
-                  _context.n = 142;
+                  _context.n = 155;
                   break;
                 }
-                _context.n = 142;
+                _context.n = 155;
                 return effects.put(updateChannelDataAC(_channel16.id, {
                   lastMessage: null,
                   newMessageCount: 0,
@@ -16113,7 +16235,7 @@ function watchForEvents() {
                   muted: _channel16.muted,
                   mutedTill: _channel16.mutedTill
                 }));
-              case 142:
+              case 155:
                 updateChannelOnAllChannels(_channel16.id, {
                   lastMessage: null,
                   newMessageCount: 0,
@@ -16121,173 +16243,189 @@ function watchForEvents() {
                   muted: _channel16.muted,
                   mutedTill: _channel16.mutedTill
                 });
-                return _context.a(3, 183);
-              case 143:
+                return _context.a(3, 199);
+              case 156:
                 _channel17 = args.channel;
                 log.info('channel MUTE ... ');
-                _context.n = 144;
+                _context.n = 157;
                 return effects.put(updateChannelDataAC(_channel17.id, {
                   muted: _channel17.muted,
                   mutedTill: _channel17.mutedTill
                 }));
-              case 144:
+              case 157:
                 updateChannelOnAllChannels(_channel17.id, {
                   muted: _channel17.muted,
                   mutedTill: _channel17.mutedTill
                 });
-                return _context.a(3, 183);
-              case 145:
+                return _context.a(3, 199);
+              case 158:
                 _channel18 = args.channel;
                 log.info('channel UNMUTE ... ');
-                _context.n = 146;
+                _context.n = 159;
                 return effects.put(updateChannelDataAC(_channel18.id, {
                   muted: _channel18.muted,
                   mutedTill: _channel18.mutedTill
                 }));
-              case 146:
+              case 159:
                 updateChannelOnAllChannels(_channel18.id, {
                   muted: _channel18.muted,
                   mutedTill: _channel18.mutedTill
                 });
-                return _context.a(3, 183);
-              case 147:
+                return _context.a(3, 199);
+              case 160:
                 _channel19 = args.channel;
                 log.info('channel PINED ... ');
-                _context.n = 148;
+                _context.n = 161;
                 return effects.put(updateChannelDataAC(_channel19.id, {
                   pinnedAt: _channel19.pinnedAt
                 }, true));
-              case 148:
+              case 161:
                 updateChannelOnAllChannels(_channel19.id, {
                   pinnedAt: _channel19.pinnedAt
                 });
-                return _context.a(3, 183);
-              case 149:
+                return _context.a(3, 199);
+              case 162:
                 _channel20 = args.channel;
                 log.info('channel UNPINED ... ');
-                _context.n = 150;
+                _context.n = 163;
                 return effects.put(updateChannelDataAC(_channel20.id, {
                   pinnedAt: _channel20.pinnedAt
                 }, false, true));
-              case 150:
+              case 163:
                 updateChannelOnAllChannels(_channel20.id, {
                   pinnedAt: _channel20.pinnedAt
                 });
-                return _context.a(3, 183);
-              case 151:
+                return _context.a(3, 199);
+              case 164:
                 _channel21 = args.channel;
                 log.info('channel HIDE ... ');
-                _context.n = 152;
+                _context.n = 165;
                 return effects.put(setChannelToHideAC(_channel21));
-              case 152:
-                return _context.a(3, 183);
-              case 153:
+              case 165:
+                return _context.a(3, 199);
+              case 166:
                 _channel22 = args.channel;
                 log.info('channel UNHIDE ... ');
-                _context.n = 154;
+                _context.n = 167;
                 return effects.put(setChannelToUnHideAC(_channel22));
-              case 154:
-                return _context.a(3, 183);
-              case 155:
+              case 167:
+                return _context.a(3, 199);
+              case 168:
                 _channel23 = args.channel;
-                _context.n = 156;
+                _context.n = 169;
                 return effects.put(updateChannelDataAC(_channel23.id, {
                   unread: _channel23.unread,
                   muted: _channel23.muted,
                   mutedTill: _channel23.mutedTill
                 }));
-              case 156:
+              case 169:
                 _groupName5 = getChannelGroupName(_channel23);
-                _context.n = 157;
+                _context.n = 170;
                 return effects.put(updateSearchedChannelDataAC(_channel23.id, {
                   unread: _channel23.unread
                 }, _groupName5));
-              case 157:
+              case 170:
                 updateChannelOnAllChannels(_channel23.id, {
                   unread: _channel23.unread
                 });
-                return _context.a(3, 183);
-              case 158:
+                return _context.a(3, 199);
+              case 171:
                 _channel24 = args.channel;
-                _context.n = 159;
+                _context.n = 172;
                 return effects.put(updateChannelDataAC(_channel24.id, {
                   unread: _channel24.unread,
                   muted: _channel24.muted,
                   mutedTill: _channel24.mutedTill
                 }));
-              case 159:
+              case 172:
                 _groupName6 = getChannelGroupName(_channel24);
-                _context.n = 160;
+                _context.n = 173;
                 return effects.put(updateSearchedChannelDataAC(_channel24.id, {
                   unread: _channel24.unread
                 }, _groupName6));
-              case 160:
+              case 173:
                 updateChannelOnAllChannels(_channel24.id, {
                   unread: _channel24.unread
                 });
-                return _context.a(3, 183);
-              case 161:
+                return _context.a(3, 199);
+              case 174:
                 _channel25 = args.channel, members = args.members;
                 log.info('channel CHANGE_ROLE  channel ... ', _channel25);
                 log.info('channel CHANGE_ROLE  member ... ', members);
-                _context.n = 162;
+                _context.n = 175;
                 return effects.call(getActiveChannelId);
-              case 162:
-                _activeChannelId14 = _context.v;
-                if (!(_channel25.id === _activeChannelId14)) {
-                  _context.n = 163;
+              case 175:
+                _activeChannelId13 = _context.v;
+                if (!(_channel25.id === _activeChannelId13)) {
+                  _context.n = 179;
                   break;
                 }
-                _context.n = 163;
-                return effects.put(updateMembersAC(members));
-              case 163:
+                _customLoadMembersFunctions2 = getCustomLoadMembersFunctions();
+                updateMembersEvent = _customLoadMembersFunctions2 === null || _customLoadMembersFunctions2 === void 0 ? void 0 : _customLoadMembersFunctions2.updateMembersEvent;
+                if (!updateMembersEvent) {
+                  _context.n = 178;
+                  break;
+                }
+                _context.n = 176;
+                return effects.call(updateMembersEvent, _channel25.id, members, store.getState().MembersReducer.channelsMembersMap[_channel25.id] || []);
+              case 176:
+                _membersList2 = _context.v;
+                _context.n = 177;
+                return effects.put(setMembersToListAC(_membersList2, _channel25.id));
+              case 177:
+                _context.n = 179;
+                break;
+              case 178:
+                _context.n = 179;
+                return effects.put(updateMembersAC(members, _channel25.id));
+              case 179:
                 i = 0;
-              case 164:
+              case 180:
                 if (!(i < members.length)) {
-                  _context.n = 167;
+                  _context.n = 183;
                   break;
                 }
                 if (!(members[i].id === SceytChatClient.user.id)) {
-                  _context.n = 166;
+                  _context.n = 182;
                   break;
                 }
-                _context.n = 165;
+                _context.n = 181;
                 return effects.put(updateChannelDataAC(_channel25.id, {
                   userRole: members[i].role,
                   muted: _channel25.muted,
                   mutedTill: _channel25.mutedTill
                 }));
-              case 165:
+              case 181:
                 updateChannelOnAllChannels(_channel25.id, {
                   userRole: members[i].role,
                   muted: _channel25.muted,
                   mutedTill: _channel25.mutedTill
                 });
-              case 166:
+              case 182:
                 i++;
-                _context.n = 164;
+                _context.n = 180;
                 break;
-              case 167:
-                return _context.a(3, 183);
-              case 168:
+              case 183:
+                return _context.a(3, 199);
+              case 184:
                 _channel26 = args.channel;
                 log.info('channel frozen  channel ... ', _channel26);
-                return _context.a(3, 183);
-              case 169:
+                return _context.a(3, 199);
+              case 185:
                 _channel27 = args.channel;
                 log.info('channel unfrozen  channel ... ', _channel27);
-                return _context.a(3, 183);
-              case 170:
+                return _context.a(3, 199);
+              case 186:
                 _channelId2 = args.channelId, from = args.from, name = args.name;
                 log.info('channel event received >>>... . . . . . ', args);
                 if (!(from.id === SceytChatClient.user.id)) {
-                  _context.n = 171;
+                  _context.n = 187;
                   break;
                 }
-                return _context.a(3, 183);
-              case 171:
+                return _context.a(3, 199);
+              case 187:
                 if (!(name === 'start_typing')) {
-                  _context.n = 173;
+                  _context.n = 189;
                   break;
                 }
                 if (!usersTimeout.typingTimeout[_channelId2]) {
@@ -16299,27 +16437,27 @@ function watchForEvents() {
                 usersTimeout.typingTimeout[_channelId2][from.id] = setTimeout(function () {
                   channelListener.onReceivedChannelEvent(_channelId2, from, 'stop_typing');
                 }, 5000);
-                _context.n = 172;
+                _context.n = 188;
                 return effects.put(switchTypingIndicatorAC(true, _channelId2, from));
-              case 172:
-                _context.n = 178;
+              case 188:
+                _context.n = 194;
                 break;
-              case 173:
+              case 189:
                 if (!(name === 'stop_typing')) {
-                  _context.n = 175;
+                  _context.n = 191;
                   break;
                 }
                 if (usersTimeout.typingTimeout[_channelId2] && usersTimeout.typingTimeout[_channelId2][from.id]) {
                   clearTimeout(usersTimeout.typingTimeout[_channelId2][from.id]);
                 }
-                _context.n = 174;
+                _context.n = 190;
                 return effects.put(switchTypingIndicatorAC(false, _channelId2, from));
-              case 174:
-                _context.n = 178;
+              case 190:
+                _context.n = 194;
                 break;
-              case 175:
+              case 191:
                 if (!(name === 'start_recording')) {
-                  _context.n = 177;
+                  _context.n = 193;
                   break;
                 }
                 if (!usersTimeout.recordingTimeout[_channelId2]) {
@@ -16331,50 +16469,50 @@ function watchForEvents() {
                 usersTimeout.recordingTimeout[_channelId2][from.id] = setTimeout(function () {
                   channelListener.onReceivedChannelEvent(_channelId2, from, 'stop_recording');
                 }, 5000);
-                _context.n = 176;
+                _context.n = 192;
                 return effects.put(switchRecordingIndicatorAC(true, _channelId2, from));
-              case 176:
-                _context.n = 178;
+              case 192:
+                _context.n = 194;
                 break;
-              case 177:
+              case 193:
                 if (!(name === 'stop_recording')) {
-                  _context.n = 178;
+                  _context.n = 194;
                   break;
                 }
                 if (usersTimeout.recordingTimeout[_channelId2] && usersTimeout.recordingTimeout[_channelId2][from.id]) {
                   clearTimeout(usersTimeout.recordingTimeout[_channelId2][from.id]);
                 }
-                _context.n = 178;
+                _context.n = 194;
                 return effects.put(switchRecordingIndicatorAC(false, _channelId2, from));
-              case 178:
-                return _context.a(3, 183);
-              case 179:
+              case 194:
+                return _context.a(3, 199);
+              case 195:
                 status = args.status;
                 log.info('connection status changed . . . . . ', status);
-                _context.n = 180;
+                _context.n = 196;
                 return effects.put(setConnectionStatusAC(status));
-              case 180:
+              case 196:
                 if (!(status === CONNECTION_STATUS.CONNECTED)) {
-                  _context.n = 181;
+                  _context.n = 197;
                   break;
                 }
-                _context.n = 181;
+                _context.n = 197;
                 return effects.put(getRolesAC());
-              case 181:
-                return _context.a(3, 183);
-              case 182:
+              case 197:
+                return _context.a(3, 199);
+              case 198:
                 log.warn('UNHANDLED EVENT FROM REDUX-SAGA EVENT-CHANNEL');
-              case 183:
-                _context.n = 185;
+              case 199:
+                _context.n = 201;
                 break;
-              case 184:
-                _context.p = 184;
-                _t2 = _context.v;
-                log.error('Error in watchForEvents:', _t2);
-              case 185:
+              case 200:
+                _context.p = 200;
+                _t4 = _context.v;
+                log.error('Error in watchForEvents:', _t4);
+              case 201:
                 return _context.a(2);
             }
-          }, _callee, null, [[0, 184]]);
+          }, _callee, null, [[0, 200]]);
         });
       case 1:
         return _context2.d(_regeneratorValues(_loop()), 2);
@@ -22945,121 +23083,186 @@ var _marked$4 = /*#__PURE__*/_regenerator().m(getMembers),
   _marked8$2 = /*#__PURE__*/_regenerator().m(getRoles),
   _marked9$2 = /*#__PURE__*/_regenerator().m(MembersSaga);
 function getMembers(action) {
-  var payload, channelId, SceytChatClient, membersQueryBuilder, membersQuery, _yield$call, members, hasNext, updateChannelData, _t;
+  var payload, channelId, SceytChatClient, membersQueryBuilder, membersQuery, _query$channelMembers, customLoadMembersFunctions, _getMembers, channel, _ref, members, hasNext, updateChannelData, _t, _t2;
   return _regenerator().w(function (_context) {
     while (1) switch (_context.p = _context.n) {
       case 0:
-        _context.p = 0;
-        _context.n = 1;
-        return effects.put(setMembersHasNextAC(true));
-      case 1:
         payload = action.payload;
         channelId = payload.channelId;
-        if (channelId) {
-          _context.n = 2;
+        _context.p = 1;
+        _context.n = 2;
+        return effects.put(setMembersHasNextAC(true, channelId));
+      case 2:
+        if (!(!channelId || store.getState().MembersReducer.channelsMembersHasNextMap[channelId] === false)) {
+          _context.n = 3;
           break;
         }
         return _context.a(2);
-      case 2:
+      case 3:
         SceytChatClient = getClient();
         membersQueryBuilder = new SceytChatClient.MemberListQueryBuilder(channelId);
         membersQueryBuilder.all().byAffiliationOrder().orderKeyByUsername().limit(50);
-        _context.n = 3;
-        return effects.call(membersQueryBuilder.build);
-      case 3:
-        membersQuery = _context.v;
-        query.membersQuery = membersQuery;
         _context.n = 4;
-        return effects.put(setMembersLoadingStateAC(LOADING_STATE.LOADING));
+        return effects.call(membersQueryBuilder.build);
       case 4:
+        membersQuery = _context.v;
+        if (!query.channelMembersQuery) {
+          query.channelMembersQuery = (_query$channelMembers = {}, _query$channelMembers[channelId] = membersQuery, _query$channelMembers);
+        } else {
+          query.channelMembersQuery[channelId] = membersQuery;
+        }
         _context.n = 5;
-        return effects.call(membersQuery.loadNextPage);
+        return effects.put(setMembersLoadingStateAC(LOADING_STATE.LOADING, channelId));
       case 5:
-        _yield$call = _context.v;
-        members = _yield$call.members;
-        hasNext = _yield$call.hasNext;
+        customLoadMembersFunctions = getCustomLoadMembersFunctions();
+        _getMembers = customLoadMembersFunctions === null || customLoadMembersFunctions === void 0 ? void 0 : customLoadMembersFunctions.getMembers;
+        channel = getChannelFromMap(channelId);
+        if (channel) {
+          _context.n = 7;
+          break;
+        }
+        channel = getChannelFromAllChannels(channelId);
+        if (!channel) {
+          _context.n = 7;
+          break;
+        }
         _context.n = 6;
-        return effects.put(setMembersToListAC(members));
+        return effects.call(SceytChatClient.getChannel, channelId);
       case 6:
-        _context.n = 7;
-        return effects.put(setMembersHasNextAC(hasNext));
+        channel = _context.v;
       case 7:
+        if (!_getMembers) {
+          _context.n = 9;
+          break;
+        }
         _context.n = 8;
-        return effects.call(updateActiveChannelMembersAdd, members) || {};
+        return effects.call(_getMembers, channel);
       case 8:
-        updateChannelData = _context.v;
-        _context.n = 9;
-        return effects.put(updateChannelDataAC(channelId, updateChannelData));
-      case 9:
+        _t = _context.v;
         _context.n = 11;
         break;
+      case 9:
+        _context.n = 10;
+        return effects.call(membersQuery.loadNextPage);
       case 10:
-        _context.p = 10;
         _t = _context.v;
-        log.error('ERROR in get members - ', _t.message);
       case 11:
-        _context.p = 11;
+        _ref = _t;
+        members = _ref.members;
+        hasNext = _ref.hasNext;
         _context.n = 12;
-        return effects.put(setMembersLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(setMembersToListAC(members, channelId));
       case 12:
-        return _context.f(11);
+        _context.n = 13;
+        return effects.put(setMembersHasNextAC(hasNext, channelId));
       case 13:
+        _context.n = 14;
+        return effects.call(updateActiveChannelMembersAdd, members) || {};
+      case 14:
+        updateChannelData = _context.v;
+        _context.n = 15;
+        return effects.put(updateChannelDataAC(channelId, updateChannelData));
+      case 15:
+        _context.n = 17;
+        break;
+      case 16:
+        _context.p = 16;
+        _t2 = _context.v;
+        log.error('ERROR in get members - ', _t2.message);
+      case 17:
+        _context.p = 17;
+        _context.n = 18;
+        return effects.put(setMembersLoadingStateAC(LOADING_STATE.LOADED, channelId));
+      case 18:
+        return _context.f(17);
+      case 19:
         return _context.a(2);
     }
-  }, _marked$4, null, [[0, 10, 11, 13]]);
+  }, _marked$4, null, [[1, 16, 17, 19]]);
 }
 function loadMoreMembers(action) {
-  var payload, limit, channelId, membersQuery, _yield$call2, members, hasNext, updateChannelData;
+  var payload, limit, channelId, channelMembersQuery, membersQuery, customLoadMembersFunctions, _loadMoreMembers, channel, SceytChatClient, _ref2, members, hasNext, updateChannelData, _t3;
   return _regenerator().w(function (_context2) {
     while (1) switch (_context2.p = _context2.n) {
       case 0:
-        _context2.p = 0;
         payload = action.payload;
-        limit = payload.limit;
-        channelId = payload.channelId;
-        membersQuery = query.membersQuery;
+        limit = payload.limit, channelId = payload.channelId;
+        _context2.p = 1;
+        channelMembersQuery = query.channelMembersQuery;
+        membersQuery = channelMembersQuery === null || channelMembersQuery === void 0 ? void 0 : channelMembersQuery[channelId];
         if (limit && membersQuery) {
           membersQuery.limit = limit;
         }
-        _context2.n = 1;
-        return effects.put(setMembersLoadingStateAC(LOADING_STATE.LOADING));
-      case 1:
         _context2.n = 2;
-        return effects.call(membersQuery.loadNextPage);
+        return effects.put(setMembersLoadingStateAC(LOADING_STATE.LOADING, channelId));
       case 2:
-        _yield$call2 = _context2.v;
-        members = _yield$call2.members;
-        hasNext = _yield$call2.hasNext;
+        customLoadMembersFunctions = getCustomLoadMembersFunctions();
+        _loadMoreMembers = customLoadMembersFunctions === null || customLoadMembersFunctions === void 0 ? void 0 : customLoadMembersFunctions.loadMoreMembers;
+        channel = getChannelFromMap(channelId);
+        if (channel) {
+          _context2.n = 4;
+          break;
+        }
+        channel = getChannelFromAllChannels(channelId);
+        if (!channel) {
+          _context2.n = 4;
+          break;
+        }
+        SceytChatClient = getClient();
         _context2.n = 3;
-        return effects.put(addMembersToListAC(members));
+        return effects.call(SceytChatClient.getChannel, channelId);
       case 3:
-        _context2.n = 4;
-        return effects.put(setMembersHasNextAC(hasNext));
+        channel = _context2.v;
       case 4:
+        if (!_loadMoreMembers) {
+          _context2.n = 6;
+          break;
+        }
         _context2.n = 5;
-        return effects.call(updateActiveChannelMembersAdd, members) || {};
+        return effects.call(_loadMoreMembers, channel, limit);
       case 5:
-        updateChannelData = _context2.v;
-        _context2.n = 6;
-        return effects.put(updateChannelDataAC(channelId, updateChannelData));
-      case 6:
+        _t3 = _context2.v;
         _context2.n = 8;
         break;
+      case 6:
+        _context2.n = 7;
+        return effects.call(membersQuery.loadNextPage);
       case 7:
-        _context2.p = 7;
+        _t3 = _context2.v;
       case 8:
-        _context2.p = 8;
+        _ref2 = _t3;
+        members = _ref2.members;
+        hasNext = _ref2.hasNext;
         _context2.n = 9;
-        return effects.put(setMembersLoadingStateAC(LOADING_STATE.LOADED));
+        return effects.put(addMembersToListAC(members, channelId));
       case 9:
-        return _context2.f(8);
+        _context2.n = 10;
+        return effects.put(setMembersHasNextAC(hasNext, channelId));
       case 10:
+        _context2.n = 11;
+        return effects.call(updateActiveChannelMembersAdd, members) || {};
+      case 11:
+        updateChannelData = _context2.v;
+        _context2.n = 12;
+        return effects.put(updateChannelDataAC(channelId, updateChannelData));
+      case 12:
+        _context2.n = 14;
+        break;
+      case 13:
+        _context2.p = 13;
+      case 14:
+        _context2.p = 14;
+        _context2.n = 15;
+        return effects.put(setMembersLoadingStateAC(LOADING_STATE.LOADED, channelId));
+      case 15:
+        return _context2.f(14);
+      case 16:
         return _context2.a(2);
     }
-  }, _marked2$3, null, [[0, 7, 8, 10]]);
+  }, _marked2$3, null, [[1, 13, 14, 16]]);
 }
 function addMembers(action) {
-  var payload, members, channelId, channel, membersToAdd, addedMembers, whoDoesNotAdded, membersIds, messageToSend, updateChannelData, _t3;
+  var payload, members, channelId, channel, membersToAdd, addedMembers, whoDoesNotAdded, membersIds, messageToSend, customLoadMembersFunctions, addMembersEvent, membersList, updateChannelData, _t5, _t6;
   return _regenerator().w(function (_context3) {
     while (1) switch (_context3.p = _context3.n) {
       case 0:
@@ -23071,7 +23274,7 @@ function addMembers(action) {
       case 1:
         channel = _context3.v;
         if (!channel) {
-          _context3.n = 7;
+          _context3.n = 12;
           break;
         }
         membersToAdd = members.map(function (mem) {
@@ -23118,31 +23321,60 @@ function addMembers(action) {
         _context3.n = 4;
         return effects.put(sendTextMessageAC(messageToSend, channelId, CONNECTION_STATUS.CONNECTED));
       case 4:
+        customLoadMembersFunctions = getCustomLoadMembersFunctions();
+        addMembersEvent = customLoadMembersFunctions === null || customLoadMembersFunctions === void 0 ? void 0 : customLoadMembersFunctions.addMembersEvent;
+        membersList = [];
+        if (!addMembersEvent) {
+          _context3.n = 7;
+          break;
+        }
         _context3.n = 5;
-        return effects.put(addMembersToListAC(addedMembers));
+        return effects.call(addMembersEvent, channelId, addedMembers, store.getState().MembersReducer.channelsMembersMap[channelId] || []);
       case 5:
+        membersList = _context3.v;
+        _context3.n = 6;
+        return effects.put(setMembersToListAC(membersList, channelId));
+      case 6:
+        _context3.n = 8;
+        break;
+      case 7:
+        _context3.n = 8;
+        return effects.put(addMembersToListAC(addedMembers, channelId));
+      case 8:
         updateChannelOnAllChannels(channel.id, {
           memberCount: channel.memberCount + addedMembers.length
         });
-        _context3.n = 6;
+        if (!addMembersEvent) {
+          _context3.n = 9;
+          break;
+        }
+        _t5 = {
+          members: membersList
+        };
+        _context3.n = 11;
+        break;
+      case 9:
+        _context3.n = 10;
         return effects.call(updateActiveChannelMembersAdd, addedMembers) || {};
-      case 6:
-        updateChannelData = _context3.v;
-        _context3.n = 7;
+      case 10:
+        _t5 = _context3.v;
+      case 11:
+        updateChannelData = _t5;
+        _context3.n = 12;
         return effects.put(updateChannelDataAC(channel.id, _extends({
           memberCount: channel.memberCount + addedMembers.length
         }, updateChannelData)));
-      case 7:
-        _context3.n = 9;
+      case 12:
+        _context3.n = 14;
         break;
-      case 8:
-        _context3.p = 8;
-        _t3 = _context3.v;
-        log.error('error on add members... ', _t3);
-      case 9:
+      case 13:
+        _context3.p = 13;
+        _t6 = _context3.v;
+        log.error('error on add members... ', _t6);
+      case 14:
         return _context3.a(2);
     }
-  }, _marked3$2, null, [[0, 8]]);
+  }, _marked3$2, null, [[0, 13]]);
 }
 function kickMemberFromChannel(action) {
   var payload, memberId, channelId, channel, removedMembers, membersIds, messageToSend, updateChannelData;
@@ -23181,7 +23413,7 @@ function kickMemberFromChannel(action) {
         return effects.put(sendTextMessageAC(messageToSend, channelId, CONNECTION_STATUS.CONNECTED));
       case 3:
         _context4.n = 4;
-        return effects.put(removeMemberFromListAC(removedMembers));
+        return effects.put(removeMemberFromListAC(removedMembers, channelId));
       case 4:
         updateChannelOnAllChannels(channel.id, {
           memberCount: channel.memberCount - removedMembers.length
@@ -23221,7 +23453,7 @@ function blockMember(action) {
       case 2:
         removedMembers = _context5.v;
         _context5.n = 3;
-        return effects.put(removeMemberFromListAC(removedMembers));
+        return effects.put(removeMemberFromListAC(removedMembers, channelId));
       case 3:
         updateChannelOnAllChannels(channel.id, {
           memberCount: channel.memberCount - removedMembers.length
@@ -23245,7 +23477,7 @@ function blockMember(action) {
   }, _marked5$2, null, [[0, 6]]);
 }
 function changeMemberRole(action) {
-  var payload, channelId, members, channel, updatedMembers, _t6;
+  var payload, channelId, members, channel, updatedMembers, customLoadMembersFunctions, updateMembersEvent, membersList, _t9;
   return _regenerator().w(function (_context6) {
     while (1) switch (_context6.p = _context6.n) {
       case 0:
@@ -23260,22 +23492,38 @@ function changeMemberRole(action) {
         return effects.call(channel.changeMembersRole, members);
       case 2:
         updatedMembers = _context6.v;
+        customLoadMembersFunctions = getCustomLoadMembersFunctions();
+        updateMembersEvent = customLoadMembersFunctions === null || customLoadMembersFunctions === void 0 ? void 0 : customLoadMembersFunctions.updateMembersEvent;
+        if (!updateMembersEvent) {
+          _context6.n = 5;
+          break;
+        }
         _context6.n = 3;
-        return effects.put(updateMembersAC(updatedMembers));
+        return effects.call(updateMembersEvent, channelId, updatedMembers, store.getState().MembersReducer.channelsMembersMap[channelId] || []);
       case 3:
-        _context6.n = 5;
-        break;
+        membersList = _context6.v;
+        _context6.n = 4;
+        return effects.put(setMembersToListAC(membersList, channelId));
       case 4:
-        _context6.p = 4;
-        _t6 = _context6.v;
-        log.error('error in change member role', _t6);
+        _context6.n = 6;
+        break;
       case 5:
+        _context6.n = 6;
+        return effects.put(updateMembersAC(updatedMembers, channelId));
+      case 6:
+        _context6.n = 8;
+        break;
+      case 7:
+        _context6.p = 7;
+        _t9 = _context6.v;
+        log.error('error in change member role', _t9);
+      case 8:
         return _context6.a(2);
     }
-  }, _marked6$2, null, [[0, 4]]);
+  }, _marked6$2, null, [[0, 7]]);
 }
 function reportMember(action) {
-  var reportData, SceytChatClient, _t7;
+  var reportData, SceytChatClient, _t0;
   return _regenerator().w(function (_context7) {
     while (1) switch (_context7.p = _context7.n) {
       case 0:
@@ -23289,15 +23537,15 @@ function reportMember(action) {
         break;
       case 3:
         _context7.p = 3;
-        _t7 = _context7.v;
-        log.error('ERROR report user', _t7.message);
+        _t0 = _context7.v;
+        log.error('ERROR report user', _t0.message);
       case 4:
         return _context7.a(2);
     }
   }, _marked7$2, null, [[1, 3]]);
 }
 function getRoles(action) {
-  var _action$payload, timeout, attempts, SceytChatClient, roles, _t8;
+  var _action$payload, timeout, attempts, SceytChatClient, roles, _t1;
   return _regenerator().w(function (_context8) {
     while (1) switch (_context8.p = _context8.n) {
       case 0:
@@ -23324,8 +23572,8 @@ function getRoles(action) {
         break;
       case 6:
         _context8.p = 6;
-        _t8 = _context8.v;
-        log.error('ERROR get roles', _t8);
+        _t1 = _context8.v;
+        log.error('ERROR get roles', _t1);
         _context8.n = 7;
         return effects.put(getRolesFailAC((timeout || 0) + 300, (attempts || 0) + 1));
       case 7:
@@ -23338,7 +23586,7 @@ function MembersSaga() {
     while (1) switch (_context9.n) {
       case 0:
         _context9.n = 1;
-        return effects.takeLatest(GET_MEMBERS, getMembers);
+        return effects.takeEvery(GET_MEMBERS, getMembers);
       case 1:
         _context9.n = 2;
         return effects.takeEvery(LOAD_MORE_MEMBERS, loadMoreMembers);
@@ -23855,8 +24103,8 @@ var mutualChannelsLoadingStateSelector = function mutualChannelsLoadingStateSele
   return store.ChannelReducer.mutualChannelsLoadingState;
 };
 
-var activeChannelMembersSelector = function activeChannelMembersSelector(store) {
-  return store.MembersReducer.activeChannelMembers;
+var activeChannelMembersMapSelector = function activeChannelMembersMapSelector(store) {
+  return store.MembersReducer.channelsMembersMap;
 };
 var rolesSelector = function rolesSelector(store) {
   return store.MembersReducer.roles;
@@ -23867,11 +24115,11 @@ var getRolesFailSelector = function getRolesFailSelector(store) {
 var rolesMapSelector = function rolesMapSelector(store) {
   return store.MembersReducer.rolesMap;
 };
-var membersLoadingStateSelector = function membersLoadingStateSelector(store) {
-  return store.MembersReducer.membersLoadingState;
+var channelsMembersLoadingStateSelector = function channelsMembersLoadingStateSelector(store) {
+  return store.MembersReducer.channelsMembersLoadingState;
 };
-var membersHasNextSelector = function membersHasNextSelector(store) {
-  return store.MembersReducer.membersHasNext;
+var channelsMembersHasNextMapSelector = function channelsMembersHasNextMapSelector(store) {
+  return store.MembersReducer.channelsMembersHasNextMap;
 };
 var restrictedSelector = function restrictedSelector(store) {
   return store.MembersReducer.restricted;
@@ -24915,7 +25163,9 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
     embeddedJoinGroupPopup = _ref$embeddedJoinGrou === void 0 ? false : _ref$embeddedJoinGrou,
     onUpdateChannel = _ref.onUpdateChannel,
     _ref$disappearingSett = _ref.disappearingSettings,
-    disappearingSettings = _ref$disappearingSett === void 0 ? null : _ref$disappearingSett;
+    disappearingSettings = _ref$disappearingSett === void 0 ? null : _ref$disappearingSett,
+    _ref$customLoadMember = _ref.customLoadMembersFunctions,
+    customLoadMembersFunctions = _ref$customLoadMember === void 0 ? null : _ref$customLoadMember;
   React.useEffect(function () {
     log.setLevel(logLevel);
   }, [logLevel]);
@@ -24939,6 +25189,11 @@ var SceytChatContainer = function SceytChatContainer(_ref) {
       setDisappearingSettings(disappearingSettings);
     }
   }, [disappearingSettings]);
+  React.useEffect(function () {
+    if (customLoadMembersFunctions) {
+      setCustomLoadMembersFunctions(customLoadMembersFunctions);
+    }
+  }, [customLoadMembersFunctions]);
   return /*#__PURE__*/React__default.createElement(reactRedux.Provider, {
     store: store,
     context: SceytReduxContext
@@ -40742,8 +40997,14 @@ function MentionsContainer(_ref2) {
     borderColor = _useColor2[THEME_COLORS.BORDER],
     background = _useColor2[THEME_COLORS.BACKGROUND];
   var dispatch = useDispatch();
-  var membersHasNext = useSelector(membersHasNextSelector);
-  var membersLoadingState = useSelector(membersLoadingStateSelector);
+  var channelsMembersHasNext = useSelector(channelsMembersHasNextMapSelector, reactRedux.shallowEqual);
+  var channelsMembersLoadingState = useSelector(channelsMembersLoadingStateSelector, reactRedux.shallowEqual);
+  var membersLoadingState = React.useMemo(function () {
+    return channelsMembersLoadingState === null || channelsMembersLoadingState === void 0 ? void 0 : channelsMembersLoadingState[channelId];
+  }, [channelsMembersLoadingState === null || channelsMembersLoadingState === void 0 ? void 0 : channelsMembersLoadingState[channelId]]);
+  var membersHasNext = React.useMemo(function () {
+    return channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[channelId];
+  }, [channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[channelId]]);
   var mentionsListRef = React.useRef(null);
   var contRef = React.useRef();
   var handleKeyDown = function handleKeyDown(event) {
@@ -40792,6 +41053,11 @@ function MentionsContainer(_ref2) {
       dispatch(loadMoreMembersAC(15, channelId));
     }
   }, [membersHasNext, membersLoadingState, channelId, dispatch]);
+  React.useEffect(function () {
+    if ((options === null || options === void 0 ? void 0 : options.length) < 20 && membersHasNext && membersLoadingState === LOADING_STATE.LOADED && channelId) {
+      dispatch(loadMoreMembersAC(15, channelId));
+    }
+  }, [options === null || options === void 0 ? void 0 : options.length, membersHasNext, membersLoadingState, channelId, dispatch]);
   return /*#__PURE__*/React__default.createElement(MentionsContainerWrapper, {
     className: 'typeahead-popover mentions-menu',
     ref: contRef
@@ -40880,7 +41146,7 @@ function MentionsPlugin(_ref3) {
       var selectedIndex = _ref4.selectedIndex,
         selectOptionAndCleanUp = _ref4.selectOptionAndCleanUp,
         setHighlightedIndex = _ref4.setHighlightedIndex;
-      return anchorElementRef.current && options.length ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default.createElement(MentionsContainer, {
+      return anchorElementRef.current ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React__default.createElement(MentionsContainer, {
         queryString: queryString,
         options: options,
         setMentionsIsOpen: setMentionsIsOpen,
@@ -43561,7 +43827,14 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var getFromContacts = getShowOnlyContactUsers();
   var activeChannel = useSelector(activeChannelSelector);
   var messageToEdit = useSelector(messageToEditSelector);
-  var activeChannelMembers = useSelector(activeChannelMembersSelector, reactRedux.shallowEqual);
+  var activeChannelMembersMap = useSelector(activeChannelMembersMapSelector, reactRedux.shallowEqual);
+  var activeChannelMembers = React.useMemo(function () {
+    return (activeChannelMembersMap === null || activeChannelMembersMap === void 0 ? void 0 : activeChannelMembersMap[activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id]) || [];
+  }, [activeChannelMembersMap === null || activeChannelMembersMap === void 0 ? void 0 : activeChannelMembersMap[activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id]]);
+  var channelsMembersHasNext = useSelector(channelsMembersHasNextMapSelector, reactRedux.shallowEqual);
+  var membersHasNext = React.useMemo(function () {
+    return channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id];
+  }, [channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id]]);
   var messageForReply = useSelector(messageForReplySelector);
   var draggedAttachments = useSelector(draggedAttachmentsSelector);
   var selectedMessagesMap = useSelector(selectedMessagesMapSelector);
@@ -44517,7 +44790,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (activeChannel.id) {
       prevActiveChannelId = activeChannel.id;
     }
-    if (activeChannel.id) {
+    if (activeChannel.id && membersHasNext === undefined) {
       dispatch(getMembersAC(activeChannel.id));
     }
     setMentionedUsers([]);
@@ -46572,7 +46845,95 @@ var DisappearingMessagesStatus = styled__default.span(_templateObject19$3 || (_t
 });
 var ChevronRightIconWrapper$1 = styled__default.span(_templateObject20$3 || (_templateObject20$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    transform: rotate(-90deg);\n  }\n"])));
 
-var _rect$2, _rect2, _path$1w;
+var _templateObject$W;
+var MonthHeader = function MonthHeader(_ref) {
+  var currentCreatedAt = _ref.currentCreatedAt,
+    previousCreatedAt = _ref.previousCreatedAt,
+    isFirst = _ref.isFirst,
+    padding = _ref.padding,
+    fullWidth = _ref.fullWidth;
+  var _useColor = useColors(),
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
+  var monthComponent = React.useMemo(function () {
+    var shouldShowHeader = isFirst || previousCreatedAt && new Date(currentCreatedAt).getMonth() !== new Date(previousCreatedAt).getMonth();
+    if (!shouldShowHeader) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(MonthHeaderContainer, {
+      color: textSecondary,
+      padding: padding,
+      fullWidth: fullWidth
+    }, new Date(currentCreatedAt).toLocaleDateString('en-US', {
+      month: 'long',
+      year: 'numeric'
+    }));
+  }, [currentCreatedAt, previousCreatedAt, isFirst, textSecondary, padding, fullWidth]);
+  return monthComponent;
+};
+var MonthHeaderContainer = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
+  return props.padding || '9px 12px';
+}, function (props) {
+  return props.fullWidth ? '100%' : 'auto';
+}, function (props) {
+  return props.color;
+});
+
+var _templateObject$X, _templateObject2$R;
+var Media = function Media(_ref) {
+  var channel = _ref.channel;
+  var _useColor = useColors(),
+    background = _useColor[THEME_COLORS.BACKGROUND];
+  var attachments = useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
+  var _useState = React.useState(null),
+    mediaFile = _useState[0],
+    setMediaFile = _useState[1];
+  var dispatch = useDispatch();
+  var handleMediaItemClick = function handleMediaItemClick(file) {
+    setMediaFile(file);
+  };
+  React.useEffect(function () {
+    dispatch(setAttachmentsAC([]));
+    dispatch(getAttachmentsAC(channel.id, channelDetailsTabs.media));
+  }, [channel.id]);
+  return /*#__PURE__*/React__default.createElement(Container$o, null, attachments.map(function (file, index) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: file.id
+    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
+      currentCreatedAt: file.createdAt,
+      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
+      isFirst: index === 0,
+      padding: '9px 6px',
+      fullWidth: true
+    }), /*#__PURE__*/React__default.createElement(MediaItem, null, file.type === 'image' ? (/*#__PURE__*/React__default.createElement(Attachment$1, {
+      attachment: _extends({}, file, {
+        metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
+      }),
+      handleMediaItemClick: handleMediaItemClick,
+      backgroundColor: background,
+      borderRadius: '8px',
+      isDetailsView: true
+    })) : (
+    /*#__PURE__*/
+    React__default.createElement(Attachment$1, {
+      attachment: _extends({}, file, {
+        metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
+      }),
+      handleMediaItemClick: handleMediaItemClick,
+      backgroundColor: background,
+      borderRadius: '8px',
+      isDetailsView: true
+    }))));
+  }), mediaFile && (/*#__PURE__*/React__default.createElement(SliderPopup, {
+    channel: channel,
+    setIsSliderOpen: setMediaFile,
+    mediaFiles: attachments,
+    currentMediaFile: mediaFile
+  })));
+};
+var Container$o = styled__default.div(_templateObject$X || (_templateObject$X = _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"])));
+var MediaItem = styled__default.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\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"])));
+
+var _rect$2, _path$1w;
 function _extends$1A() {
   return _extends$1A = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -46582,30 +46943,23 @@ function _extends$1A() {
     return n;
   }, _extends$1A.apply(null, arguments);
 }
-function SvgAddMember(props) {
+function SvgDocumentIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1A({
     width: 40,
     height: 40,
-    viewBox: "0 0 40.01 40.01",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _rect$2 || (_rect$2 = /*#__PURE__*/React.createElement("rect", {
     width: 40,
     height: 40,
-    rx: 20,
-    fill: "#F3F5F7"
-  })), _rect2 || (_rect2 = /*#__PURE__*/React.createElement("rect", {
-    x: 0.25,
-    y: 0.25,
-    width: 39.5,
-    height: 39.5,
-    rx: 19.75,
-    stroke: "#000",
-    strokeOpacity: 0.08,
-    strokeWidth: 0.5
+    rx: 8,
+    fill: "currentColor",
+    fillOpacity: 0.2
   })), _path$1w || (_path$1w = /*#__PURE__*/React.createElement("path", {
-    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",
-    fill: "CurrentColor"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.593 9.5c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.939-.687 1.864-.687 3.962v7.386c0 2.098.185 3.023.687 3.962a4.685 4.685 0 001.944 1.944c.939.502 1.864.686 3.962.686h3.957c2.098 0 3.023-.184 3.962-.687a4.685 4.685 0 001.944-1.944c.502-.938.687-1.863.687-3.961v-5.1c0-.683-.024-.99-.105-1.34a3.094 3.094 0 00-.399-.964c-.19-.305-.39-.54-.874-1.022l-4.175-4.175c-.483-.483-.717-.684-1.022-.874a3.096 3.096 0 00-.963-.4c-.294-.067-.556-.095-1.034-.102V9.5h-1.978zm0 1.714c-2.002 0-2.587.182-3.154.485a2.971 2.971 0 00-1.24 1.24c-.303.567-.485 1.152-.485 3.154v7.386c0 2.001.182 2.587.485 3.153a2.97 2.97 0 001.24 1.24c.567.304 1.152.485 3.154.485h3.957c2.001 0 2.587-.181 3.153-.484a2.97 2.97 0 001.241-1.241c.303-.566.485-1.152.485-3.153v-5.1c0-.118-.001-.22-.003-.308h-4.712a2.143 2.143 0 01-2.143-2.142l.002-4.713-.15-.001h-1.83zm3.785.876l-.092-.091v3.93c0 .21.151.385.351.421l.077.007 3.932.002-.093-.094-4.175-4.175zm-6.092 12.839c0-.474.383-.858.857-.858h3.428a.857.857 0 010 1.715h-3.428a.857.857 0 01-.857-.857zm.857-4.286a.857.857 0 100 1.714h6a.857.857 0 000-1.714h-6z",
+    fill: "currentColor"
   })));
 }
 
@@ -46619,227 +46973,796 @@ function _extends$1B() {
     return n;
   }, _extends$1B.apply(null, arguments);
 }
-function SvgMoreVert(props) {
+function SvgDownloadFile(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1B({
-    width: 4,
-    height: 14,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    width: 24,
+    height: 24,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor"
   }, props), _path$1x || (_path$1x = /*#__PURE__*/React.createElement("path", {
-    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",
-    fill: "#9B9DA8"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    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"
   })));
 }
 
-var _templateObject$W, _templateObject2$R, _templateObject3$K;
-var ChangeMemberRole = function ChangeMemberRole(_ref) {
-  var theme = _ref.theme,
-    channelId = _ref.channelId,
-    member = _ref.member,
-    handleClosePopup = _ref.handleClosePopup;
-  var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
+var _templateObject$Y, _templateObject2$S, _templateObject3$K, _templateObject4$D, _templateObject5$y, _templateObject6$v, _templateObject7$u, _templateObject8$q;
+var Files = function Files(_ref) {
+  var channelId = _ref.channelId,
+    filePreviewIcon = _ref.filePreviewIcon,
+    filePreviewHoverIcon = _ref.filePreviewHoverIcon,
+    filePreviewTitleColor = _ref.filePreviewTitleColor,
+    filePreviewSizeColor = _ref.filePreviewSizeColor,
+    filePreviewHoverBackgroundColor = _ref.filePreviewHoverBackgroundColor,
+    filePreviewDownloadIcon = _ref.filePreviewDownloadIcon,
+    fileNameFontSize = _ref.fileNameFontSize,
+    fileNameLineHeight = _ref.fileNameLineHeight,
+    fileSizeFontSize = _ref.fileSizeFontSize,
+    fileSizeLineHeight = _ref.fileSizeLineHeight;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
-    warningColor = _useColor[THEME_COLORS.WARNING],
     backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
-    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
-    background = _useColor[THEME_COLORS.BACKGROUND],
     surface1 = _useColor[THEME_COLORS.SURFACE_1],
-    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    border = _useColor[THEME_COLORS.BORDER];
+    overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2];
   var dispatch = useDispatch();
-  var _useState = React.useState(false),
-    isChanged = _useState[0],
-    setIsChanged = _useState[1];
-  var _useState2 = React.useState(),
-    selectedRole = _useState2[0],
-    setSelectedRole = _useState2[1];
-  var roles = useSelector(rolesSelector, reactRedux.shallowEqual) || [];
-  React.useEffect(function () {
-    if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      dispatch(getRolesAC());
-    }
-  }, [connectionStatus]);
-  var handleSave = function handleSave() {
-    if (isChanged && selectedRole) {
-      var updateMember = _extends({}, member, {
-        role: selectedRole
+  var _useState = React.useState({}),
+    downloadingFilesMap = _useState[0],
+    setDownloadingFilesMap = _useState[1];
+  var attachments = useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
+  var nameSizeNum = fileNameFontSize && Number(fileNameFontSize.slice(0, -2));
+  var nameMaxLength = nameSizeNum ? 32 - (nameSizeNum - 15) * (nameSizeNum < 20 ? 2 : 1) : 32;
+  var handleCompleteDownload = function handleCompleteDownload(attachmentId) {
+    var stateCopy = _extends({}, downloadingFilesMap);
+    delete stateCopy[attachmentId];
+    setDownloadingFilesMap(stateCopy);
+  };
+  var handleDownloadFile = function handleDownloadFile(attachment) {
+    if (attachment.id) {
+      setDownloadingFilesMap(function (prevState) {
+        var _extends2;
+        return _extends({}, prevState, (_extends2 = {}, _extends2[attachment.id] = {
+          uploadPercent: 1
+        }, _extends2));
       });
-      dispatch(changeMemberRoleAC(channelId, [updateMember]));
     }
-    handleClosePopup();
+    downloadFile(attachment, true, handleCompleteDownload, function (progress) {
+      var loadedRes = progress.loaded && progress.loaded / progress.total;
+      var uploadPercent = loadedRes && loadedRes * 100;
+      setDownloadingFilesMap(function (prevState) {
+        var _extends3;
+        return _extends({}, prevState, (_extends3 = {}, _extends3[attachment.id] = {
+          uploadPercent: uploadPercent
+        }, _extends3));
+      });
+    });
   };
-  function onChangeFunction(roleName) {
-    if (member.role !== roleName) {
-      setIsChanged(true);
+  React.useEffect(function () {
+    dispatch(getAttachmentsAC(channelId, channelDetailsTabs.file));
+  }, [channelId]);
+  return /*#__PURE__*/React__default.createElement(Container$p, null, attachments.map(function (file, index) {
+    var metas = file.metadata && isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata;
+    var withPrefix = true;
+    var attachmentThumb = '';
+    if (metas && metas.tmb) {
+      if (metas.tmb.length < 70) {
+        attachmentThumb = base64ToDataURL(metas.tmb);
+        withPrefix = false;
+      } else {
+        attachmentThumb = metas.tmb;
+      }
     }
-    setSelectedRole(roleName);
-  }
-  return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
-    backgroundColor: background,
-    maxWidth: '400px',
-    padding: '0'
-  }, /*#__PURE__*/React__default.createElement(PopupBody, {
-    paddingH: '24px',
-    paddingV: '24px'
-  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
-    color: iconPrimary,
-    onClick: handleClosePopup
-  }), /*#__PURE__*/React__default.createElement(PopupName, {
-    color: textPrimary
-  }, "Change member role"), /*#__PURE__*/React__default.createElement(RolesSelect, null, /*#__PURE__*/React__default.createElement(RoleLabel, {
-    color: textSecondary
-  }, "Roles"), /*#__PURE__*/React__default.createElement(CustomSelect, {
-    backgroundColor: background,
-    color: textPrimary,
-    errorColor: warningColor,
-    placeholderColor: textFootnote,
-    borderColor: border,
-    disabledColor: surface1
-  }, /*#__PURE__*/React__default.createElement(DropDown, {
-    withIcon: true,
-    theme: theme,
-    isSelect: true,
-    trigger: /*#__PURE__*/React__default.createElement(CustomSelectTrigger, {
-      color: textPrimary
-    }, selectedRole || member.role || 'Select')
-  }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, {
-    theme: theme
-  }, !!roles.length && roles.map(function (role) {
-    return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
-      hoverBackground: backgroundHovered,
-      key: role.name,
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: file.id
+    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
+      currentCreatedAt: file.createdAt,
+      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
+      isFirst: index === 0,
+      padding: '14px 14px 0'
+    }), /*#__PURE__*/React__default.createElement(FileItem, {
+      hoverBackgroundColor: filePreviewHoverBackgroundColor || backgroundHovered
+    }, metas && metas.tmb ? (/*#__PURE__*/React__default.createElement(FileThumb, {
+      draggable: false,
+      src: "" + (withPrefix ? 'data:image/jpeg;base64,' : '') + attachmentThumb
+    })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont, {
+      iconColor: accentColor,
+      fillColor: surface1
+    }, filePreviewIcon || /*#__PURE__*/React__default.createElement(SvgDocumentIcon, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont, {
+      iconColor: accentColor,
+      fillColor: surface1
+    }, filePreviewHoverIcon || /*#__PURE__*/React__default.createElement(SvgDocumentIcon, null)))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(AttachmentPreviewTitle, {
+      fontSize: fileNameFontSize,
+      lineHeight: fileNameLineHeight,
+      color: filePreviewTitleColor || textPrimary
+    }, _formatLargeText(file.name, nameMaxLength)), /*#__PURE__*/React__default.createElement(FileSizeAndDate, {
+      fontSize: fileSizeFontSize,
+      lineHeight: fileSizeLineHeight,
+      color: filePreviewSizeColor || textSecondary
+    }, file.size ? bytesToSize(file.size) + " \u2022 " + formatChannelDetailsDate(file.createdAt) : formatChannelDetailsDate(file.createdAt))), /*#__PURE__*/React__default.createElement(DownloadWrapper, {
+      visible: !!downloadingFilesMap[file.id],
+      iconColor: accentColor,
       onClick: function onClick() {
-        return onChangeFunction(role.name);
-      },
-      textColor: textPrimary
-    }, /*#__PURE__*/React__default.createElement(RoleSpan, null, role.name));
-  })))))), /*#__PURE__*/React__default.createElement(PopupFooter, {
-    backgroundColor: surface1
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    type: 'button',
-    color: textPrimary,
-    backgroundColor: 'transparent',
-    onClick: function onClick() {
-      return handleClosePopup();
-    }
-  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
-    type: 'button',
-    color: textOnPrimary,
-    backgroundColor: accentColor,
-    borderRadius: '8px',
-    onClick: handleSave
-  }, "Save"))));
+        return handleDownloadFile(file);
+      }
+    }, downloadingFilesMap[file.id] ? (/*#__PURE__*/React__default.createElement(ProgressWrapper$2, null, /*#__PURE__*/React__default.createElement(reactCircularProgressbar.CircularProgressbar, {
+      minValue: 0,
+      maxValue: 100,
+      value: downloadingFilesMap[file.id].uploadPercent || 0,
+      backgroundPadding: 6,
+      background: true,
+      text: '',
+      styles: {
+        background: {
+          fill: overlayBackground2 + "66"
+        },
+        path: {
+          stroke: accentColor,
+          strokeLinecap: 'butt',
+          strokeWidth: '6px',
+          transition: 'stroke-dashoffset 0.5s ease 0s',
+          transform: 'rotate(0turn)',
+          transformOrigin: 'center center'
+        }
+      }
+    }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null))));
+  }));
 };
-var RolesSelect = styled__default.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
-var RoleLabel = styled__default.div(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  margin: 20px 0 8px;\n  color: ", ";\n"])), function (_ref2) {
-  var color = _ref2.color;
-  return color;
+var Container$p = styled__default.ul(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var DownloadWrapper = styled__default.a(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  visibility: ", ";\n  padding: 5px 6px;\n  position: absolute;\n  top: 25%;\n  right: 16px;\n  cursor: pointer;\n  & > svg {\n    & path {\n      fill: ", ";\n    }\n    color: ", ";\n  }\n"])), function (props) {
+  return props.visible ? 'visible' : 'hidden';
+}, function (props) {
+  return props.iconColor;
+}, function (props) {
+  return props.iconColor;
+});
+var ProgressWrapper$2 = styled__default.span(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  animation: preloader 1.5s linear infinite;\n\n  @keyframes preloader {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+var FileIconCont = styled__default.span(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+  return props.iconColor;
+}, function (props) {
+  return props.fillColor;
+});
+var FileHoverIconCont = styled__default.span(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+  return props.iconColor;
+}, function (props) {
+  return props.fillColor;
+});
+var FileThumb = styled__default.img(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  object-fit: cover;\n"])));
+var FileItem = styled__default.div(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 11px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  transition: all 0.2s;\n  div {\n    margin-left: 7px;\n    width: calc(100% - 48px);\n  }\n  &:hover {\n    background-color: ", ";\n    ", " {\n      visibility: visible;\n    }\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n  /*&.isHover {\n\n  }*/\n"])), function (props) {
+  return props.hoverBackgroundColor;
+}, DownloadWrapper, FileIconCont, FileHoverIconCont);
+var FileSizeAndDate = styled__default.span(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), function (props) {
+  return props.fontSize || '13px';
+}, function (props) {
+  return props.lineHeight || '16px';
+}, function (props) {
+  return props.color;
 });
-var RoleSpan = styled__default.span(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
 
-function ResetLinkConfirmModal(_ref) {
-  var _getInviteLinkOptions;
-  var onCancel = _ref.onCancel,
-    onConfirm = _ref.onConfirm;
-  var options = ((_getInviteLinkOptions = getInviteLinkOptions()) === null || _getInviteLinkOptions === void 0 ? void 0 : _getInviteLinkOptions.ResetLinkConfirmModal) || {};
-  var titleText = options.titleText || 'Reset link';
-  var descriptionText = options.descriptionText || (/*#__PURE__*/React__default.createElement("span", null, "Are you sure you want to reset the group link? Anyone with the existing link will no longer be able to use it to join."));
-  var buttonText = options.buttonText || 'Reset';
-  var show = options.show !== false;
-  if (!show) return null;
-  var customRender = typeof options.render === 'function' ? options.render : null;
-  var customComponent = options.component || options.CustomComponent;
-  if (customRender) {
-    return customRender({
-      onCancel: onCancel,
-      onConfirm: onConfirm,
-      defaults: {
-        titleText: titleText,
-        descriptionText: descriptionText,
-        buttonText: buttonText
-      }
-    });
-  }
-  if (customComponent) {
-    return customComponent;
-  }
-  return /*#__PURE__*/React__default.createElement(ConfirmPopup, {
-    togglePopup: onCancel,
-    handleFunction: onConfirm,
-    title: titleText,
-    description: descriptionText,
-    buttonText: buttonText
-  });
+var _rect$3, _path$1y;
+function _extends$1C() {
+  return _extends$1C = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1C.apply(null, arguments);
+}
+function SvgLinkIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1C({
+    width: 40,
+    height: 40,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    color: "#5159f6"
+  }, props), _rect$3 || (_rect$3 = /*#__PURE__*/React.createElement("rect", {
+    width: 40,
+    height: 40,
+    rx: 8,
+    fill: "currentColor",
+    fillOpacity: 0.2
+  })), _path$1y || (_path$1y = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    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",
+    fill: "currentColor"
+  })));
 }
 
-var _templateObject$X, _templateObject2$S, _templateObject3$L, _templateObject4$D, _templateObject5$y, _templateObject6$v, _templateObject7$u, _templateObject8$q, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
-function InviteLinkModal(_ref) {
-  var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
-  var onClose = _ref.onClose,
-    SVGOrPNGLogoIcon = _ref.SVGOrPNGLogoIcon,
-    channelId = _ref.channelId;
+var _templateObject$Z, _templateObject2$T, _templateObject3$L, _templateObject4$E, _templateObject5$z;
+var LinkItem = function LinkItem(_ref) {
+  var link = _ref.link,
+    linkPreviewIcon = _ref.linkPreviewIcon,
+    linkPreviewHoverIcon = _ref.linkPreviewHoverIcon,
+    linkPreviewColor = _ref.linkPreviewColor,
+    linkPreviewHoverBackgroundColor = _ref.linkPreviewHoverBackgroundColor;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    background = _useColor[THEME_COLORS.BACKGROUND],
     backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
-    surface1 = _useColor[THEME_COLORS.SURFACE_1],
-    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
-    border = _useColor[THEME_COLORS.BORDER],
-    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
-  var theme = useSelector(themeSelector) || 'light';
-  var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
-  var channelsInviteKeys = useSelector(channelInviteKeysSelector, reactRedux.shallowEqual);
+    surface1 = _useColor[THEME_COLORS.SURFACE_1];
+  React.useEffect(function () {}, []);
+  return /*#__PURE__*/React__default.createElement(FileItem$1, {
+    draggable: false,
+    hoverBackgroundColor: linkPreviewHoverBackgroundColor || backgroundHovered
+  }, /*#__PURE__*/React__default.createElement("a", {
+    draggable: false,
+    href: link.startsWith('http') ? link : "https://" + link,
+    target: '_blank',
+    rel: 'noreferrer'
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LinkIconCont, {
+    iconColor: accentColor,
+    fillColor: surface1
+  }, linkPreviewIcon || /*#__PURE__*/React__default.createElement(SvgLinkIcon, null)), /*#__PURE__*/React__default.createElement(LinkHoverIconCont, {
+    iconColor: accentColor,
+    fillColor: surface1
+  }, linkPreviewHoverIcon || /*#__PURE__*/React__default.createElement(SvgLinkIcon, null))), /*#__PURE__*/React__default.createElement(LinkInfoCont, null, /*#__PURE__*/React__default.createElement(LinkUrl, {
+    color: linkPreviewColor || textPrimary
+  }, link))));
+};
+var LinkIconCont = styled__default.span(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+  return props.iconColor;
+}, function (props) {
+  return props.fillColor;
+});
+var LinkHoverIconCont = styled__default.span(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
+  return props.iconColor;
+}, function (props) {
+  return props.fillColor;
+});
+var LinkInfoCont = styled__default.div(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
+var FileItem$1 = styled__default.li(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n  &:hover {\n    background-color: ", ";\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
+  return props.hoverBackgroundColor;
+}, LinkIconCont, LinkHoverIconCont);
+var LinkUrl = styled__default.span(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 52px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  text-decoration: underline;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+
+var _templateObject$_;
+var Links = function Links(_ref) {
+  var channelId = _ref.channelId,
+    linkPreviewIcon = _ref.linkPreviewIcon,
+    linkPreviewHoverIcon = _ref.linkPreviewHoverIcon,
+    linkPreviewTitleColor = _ref.linkPreviewTitleColor,
+    linkPreviewColor = _ref.linkPreviewColor,
+    linkPreviewHoverBackgroundColor = _ref.linkPreviewHoverBackgroundColor;
   var dispatch = useDispatch();
-  var options = ((_getInviteLinkOptions = getInviteLinkOptions()) === null || _getInviteLinkOptions === void 0 ? void 0 : _getInviteLinkOptions.InviteLinkModal) || {};
-  var customRender = typeof options.render === 'function' ? options.render : null;
-  var customComponent = options.component || options.CustomComponent;
-  var titleText = options.titleText || 'Invite link';
-  var linkLabel = options.linkLabel || 'Link';
-  var linkDescription = options.linkDescription || 'You can invite anyone to the chat using this link';
-  var shareButtonText = options.shareButtonText || 'Share';
-  var cancelButtonText = options.cancelButtonText || 'Cancel';
-  var showHistorySection = options.showHistorySection !== false;
-  var showResetButton = options.showResetButton !== false;
-  var historyTitle = options.historyTitle || 'History';
-  var showPreviousMessagesLabel = options.showPreviousMessagesLabel || 'Show Previous Messages';
-  var tabs = options.tabs || {
-    link: {
-      show: true,
-      title: 'Group Link'
-    },
-    qr: {
-      show: true,
-      title: 'QR Code'
-    }
-  };
-  var showLinkTab = ((_tabs$link = tabs.link) === null || _tabs$link === void 0 ? void 0 : _tabs$link.show) !== false;
-  var showQrTab = ((_tabs$qr = tabs.qr) === null || _tabs$qr === void 0 ? void 0 : _tabs$qr.show) !== false;
-  var linkTabTitle = ((_tabs$link2 = tabs.link) === null || _tabs$link2 === void 0 ? void 0 : _tabs$link2.title) || 'Group Link';
-  var qrTabTitle = ((_tabs$qr2 = tabs.qr) === null || _tabs$qr2 === void 0 ? void 0 : _tabs$qr2.title) || 'QR Code';
-  var qrHintText = options.qrHintText || 'Show or send this to anyone who wants to join this channel';
-  var _useState = React.useState('link'),
-    activeTab = _useState[0],
-    setActiveTab = _useState[1];
-  var _useState2 = React.useState(false),
-    showResetConfirm = _useState2[0],
-    setShowResetConfirm = _useState2[1];
-  var _useState3 = React.useState(false),
-    openForwardPopup = _useState3[0],
-    setOpenForwardPopup = _useState3[1];
-  var _useState4 = React.useState('link'),
-    shareMode = _useState4[0],
-    setShareMode = _useState4[1];
-  var _useState5 = React.useState(false),
-    showCopiedToast = _useState5[0],
-    setShowCopiedToast = _useState5[1];
-  var logoRef = React.useRef(null);
+  var attachments = useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
+  React.useEffect(function () {
+    dispatch(getAttachmentsAC(channelId, channelDetailsTabs.link));
+  }, [channelId]);
+  return /*#__PURE__*/React__default.createElement(Container$q, null, attachments.map(function (file, index) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: file.id
+    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
+      currentCreatedAt: file.createdAt,
+      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
+      isFirst: index === 0,
+      padding: '6px 14px 0'
+    }), /*#__PURE__*/React__default.createElement(LinkItem, {
+      link: file.url,
+      linkPreviewColor: linkPreviewColor,
+      linkPreviewHoverBackgroundColor: linkPreviewHoverBackgroundColor,
+      linkPreviewHoverIcon: linkPreviewHoverIcon,
+      linkPreviewTitleColor: linkPreviewTitleColor,
+      linkPreviewIcon: linkPreviewIcon
+    }));
+  }));
+};
+var Container$q = styled__default.ul(_templateObject$_ || (_templateObject$_ = _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"])));
+
+var _rect$4, _path$1z;
+function _extends$1D() {
+  return _extends$1D = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1D.apply(null, arguments);
+}
+function SvgVoicePreview(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1D({
+    width: 40,
+    height: 40,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect$4 || (_rect$4 = /*#__PURE__*/React.createElement("rect", {
+    width: 40,
+    height: 40,
+    rx: 20,
+    fill: "#5159F6"
+  })), _path$1z || (_path$1z = /*#__PURE__*/React.createElement("path", {
+    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",
+    fill: "#fff"
+  })));
+}
+
+var _rect$5, _path$1A;
+function _extends$1E() {
+  return _extends$1E = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1E.apply(null, arguments);
+}
+function SvgVoicePreviewPause(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1E({
+    width: 40,
+    height: 40,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect$5 || (_rect$5 = /*#__PURE__*/React.createElement("rect", {
+    width: 40,
+    height: 40,
+    rx: 20,
+    fill: "#5159F6"
+  })), _path$1A || (_path$1A = /*#__PURE__*/React.createElement("path", {
+    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",
+    fill: "#fff"
+  })));
+}
+
+var _templateObject$$, _templateObject2$U, _templateObject3$M, _templateObject4$F, _templateObject5$A, _templateObject6$w, _templateObject7$v, _templateObject8$r;
+var VoiceItem = function VoiceItem(_ref) {
+  var file = _ref.file,
+    voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
+    voicePreviewPlayHoverIcon = _ref.voicePreviewPlayHoverIcon,
+    voicePreviewPauseIcon = _ref.voicePreviewPauseIcon,
+    voicePreviewPauseHoverIcon = _ref.voicePreviewPauseHoverIcon,
+    voicePreviewTitleColor = _ref.voicePreviewTitleColor,
+    voicePreviewDateAndTimeColor = _ref.voicePreviewDateAndTimeColor,
+    voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor,
+    messageType = _ref.messageType;
+  var _useColor = useColors(),
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
+    accentColor = _useColor[THEME_COLORS.ACCENT];
+  var dispatch = useDispatch();
+  var playingAudioId = useSelector(playingAudioIdSelector);
+  var getFromContacts = getShowOnlyContactUsers();
+  var _useState = React.useState(''),
+    fileUrl = _useState[0],
+    setFileUrl = _useState[1];
+  var _useState2 = React.useState(false),
+    audioIsPlaying = _useState2[0],
+    setAudioIsPlaying = _useState2[1];
+  var _useState3 = React.useState(''),
+    currentTime = _useState3[0],
+    setCurrentTime = _useState3[1];
+  var customDownloader = getCustomDownloader();
+  var contactsMap = useSelector(contactsMapSelector);
+  var user = useSelector(userSelector);
+  var audioRef = React.useRef();
+  var intervalRef = React.useRef(null);
+  var handlePlayPause = function handlePlayPause() {
+    if (audioRef && audioRef.current) {
+      if (audioRef.current.paused) {
+        var _audioRef$current, _audioRef$current5;
+        var audioDuration = (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.duration;
+        dispatch(setPlayingAudioIdAC("voice_" + file.id));
+        intervalRef.current = setInterval(function () {
+          var _audioRef$current2;
+          var audioCurrentTime = (_audioRef$current2 = audioRef.current) === null || _audioRef$current2 === void 0 ? void 0 : _audioRef$current2.currentTime;
+          if (audioDuration) {
+            if ((audioCurrentTime || audioCurrentTime === 0) && audioDuration - audioCurrentTime > 0) {
+              setCurrentTime(formatAudioVideoTime(audioCurrentTime));
+            } else {
+              var _audioRef$current3;
+              setCurrentTime(formatAudioVideoTime(audioCurrentTime || 0));
+              setAudioIsPlaying(false);
+              (_audioRef$current3 = audioRef.current) === null || _audioRef$current3 === void 0 ? void 0 : _audioRef$current3.pause();
+              audioRef.current && (audioRef.current.currentTime = 0);
+              clearInterval(intervalRef.current);
+            }
+          } else {
+            var _audioRef$current4;
+            audioDuration = (_audioRef$current4 = audioRef.current) === null || _audioRef$current4 === void 0 ? void 0 : _audioRef$current4.duration;
+          }
+        }, 100);
+        setAudioIsPlaying(true);
+        (_audioRef$current5 = audioRef.current) === null || _audioRef$current5 === void 0 ? void 0 : _audioRef$current5.play();
+      } else {
+        var _audioRef$current6;
+        clearInterval(intervalRef.current);
+        dispatch(setPlayingAudioIdAC(null));
+        setAudioIsPlaying(false);
+        (_audioRef$current6 = audioRef.current) === null || _audioRef$current6 === void 0 ? void 0 : _audioRef$current6.pause();
+      }
+    }
+  };
+  useDidUpdate(function () {
+    if (audioIsPlaying && playingAudioId && playingAudioId !== "voice_" + file.id && audioRef.current) {
+      setAudioIsPlaying(false);
+      audioRef.current.pause();
+    }
+  }, [playingAudioId]);
+  React.useEffect(function () {
+    if (customDownloader) {
+      customDownloader(file.url, false, function () {}, messageType).then(function (url) {
+        setFileUrl(url);
+      });
+    } else {
+      setFileUrl(file.url);
+    }
+    return function () {
+      clearInterval(intervalRef.current);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(FileItem$2, {
+    onMouseEnter: function onMouseEnter(e) {
+      return e.currentTarget.classList.add('isHover');
+    },
+    onMouseLeave: function onMouseLeave(e) {
+      return e.currentTarget.classList.remove('isHover');
+    },
+    hoverBackgroundColor: voicePreviewHoverBackgroundColor || backgroundHovered
+  }, audioIsPlaying ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont$1, {
+    onClick: handlePlayPause,
+    fill: accentColor
+  }, voicePreviewPauseIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewPause, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont$1, {
+    onClick: handlePlayPause,
+    fill: accentColor
+  }, voicePreviewPauseHoverIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewPause, null)))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont$1, {
+    onClick: handlePlayPause,
+    fill: accentColor
+  }, voicePreviewPlayIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreview, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont$1, {
+    onClick: handlePlayPause,
+    fill: accentColor
+  }, voicePreviewPlayHoverIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreview, null)))), /*#__PURE__*/React__default.createElement(AudioInfo, null, /*#__PURE__*/React__default.createElement(AudioTitle, {
+    color: voicePreviewTitleColor || textPrimary
+  }, file.user && (file.user.id === user.id ? 'You' : makeUsername(contactsMap[file.user.id], file.user, getFromContacts))), /*#__PURE__*/React__default.createElement(AudioDate, {
+    color: voicePreviewDateAndTimeColor || textSecondary
+  }, formatChannelDetailsDate(file.createdAt)), /*#__PURE__*/React__default.createElement(AudioSendTime, {
+    color: textSecondary
+  }, currentTime || (file.metadata.dur ? formatAudioVideoTime(file.metadata.dur) : ''))), /*#__PURE__*/React__default.createElement(Audio, {
+    controls: true,
+    ref: audioRef,
+    src: fileUrl
+  }, /*#__PURE__*/React__default.createElement("source", {
+    src: fileUrl,
+    type: 'audio/ogg'
+  }), /*#__PURE__*/React__default.createElement("source", {
+    src: fileUrl,
+    type: 'audio/mpeg'
+  })));
+};
+var FileIconCont$1 = styled__default.span(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: inline-flex;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+  return props.fill || 'transparent';
+}, function (props) {
+  return props.fill || 'transparent';
+});
+var FileHoverIconCont$1 = styled__default.span(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
+  return props.fill || 'transparent';
+}, function (props) {
+  return props.fill || 'transparent';
+});
+var FileItem$2 = styled__default.li(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n  div {\n    margin-left: 12px;\n    width: 100%;\n  }\n  img {\n    width: 42px;\n    height: 42px;\n    border: 0.5px solid rgba(0, 0, 0, 0.1);\n    box-sizing: border-box;\n    border-radius: 6px;\n  }\n\n  &.isHover {\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
+  return props.hoverBackgroundColor;
+}, FileIconCont$1, FileHoverIconCont$1);
+var AudioInfo = styled__default.div(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var AudioTitle = styled__default.span(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var AudioDate = styled__default.span(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var AudioSendTime = styled__default.span(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {
+  return props.color;
+});
+var Audio = styled__default.audio(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+
+var _templateObject$10;
+var Voices = function Voices(_ref) {
+  var channelId = _ref.channelId,
+    voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
+    voicePreviewPlayHoverIcon = _ref.voicePreviewPlayHoverIcon,
+    voicePreviewPauseIcon = _ref.voicePreviewPauseIcon,
+    voicePreviewPauseHoverIcon = _ref.voicePreviewPauseHoverIcon,
+    voicePreviewTitleColor = _ref.voicePreviewTitleColor,
+    voicePreviewDateAndTimeColor = _ref.voicePreviewDateAndTimeColor,
+    voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor;
+  var dispatch = useDispatch();
+  var attachments = useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
+  React.useEffect(function () {
+    dispatch(getAttachmentsAC(channelId, channelDetailsTabs.voice));
+  }, [channelId]);
+  return /*#__PURE__*/React__default.createElement(Container$r, null, attachments.map(function (file, index) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: file.id
+    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
+      currentCreatedAt: file.createdAt,
+      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
+      isFirst: index === 0,
+      padding: '7px 14px 2px'
+    }), /*#__PURE__*/React__default.createElement(VoiceItem, {
+      file: _extends({}, file, {
+        metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
+      }),
+      voicePreviewDateAndTimeColor: voicePreviewDateAndTimeColor,
+      voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor,
+      voicePreviewPlayHoverIcon: voicePreviewPlayIcon,
+      voicePreviewPlayIcon: voicePreviewPlayHoverIcon,
+      voicePreviewPauseIcon: voicePreviewPauseIcon,
+      voicePreviewPauseHoverIcon: voicePreviewPauseHoverIcon,
+      voicePreviewTitleColor: voicePreviewTitleColor
+    }));
+  }));
+};
+var Container$r = styled__default.ul(_templateObject$10 || (_templateObject$10 = _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"])));
+
+var _rect$6, _rect2, _path$1B;
+function _extends$1F() {
+  return _extends$1F = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1F.apply(null, arguments);
+}
+function SvgAddMember(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1F({
+    width: 40,
+    height: 40,
+    viewBox: "0 0 40.01 40.01",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _rect$6 || (_rect$6 = /*#__PURE__*/React.createElement("rect", {
+    width: 40,
+    height: 40,
+    rx: 20,
+    fill: "#F3F5F7"
+  })), _rect2 || (_rect2 = /*#__PURE__*/React.createElement("rect", {
+    x: 0.25,
+    y: 0.25,
+    width: 39.5,
+    height: 39.5,
+    rx: 19.75,
+    stroke: "#000",
+    strokeOpacity: 0.08,
+    strokeWidth: 0.5
+  })), _path$1B || (_path$1B = /*#__PURE__*/React.createElement("path", {
+    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",
+    fill: "CurrentColor"
+  })));
+}
+
+var _path$1C;
+function _extends$1G() {
+  return _extends$1G = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends$1G.apply(null, arguments);
+}
+function SvgMoreVert(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1G({
+    width: 4,
+    height: 14,
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path$1C || (_path$1C = /*#__PURE__*/React.createElement("path", {
+    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",
+    fill: "#9B9DA8"
+  })));
+}
+
+var _templateObject$11, _templateObject2$V, _templateObject3$N;
+var ChangeMemberRole = function ChangeMemberRole(_ref) {
+  var theme = _ref.theme,
+    channelId = _ref.channelId,
+    member = _ref.member,
+    handleClosePopup = _ref.handleClosePopup;
+  var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
+  var _useColor = useColors(),
+    accentColor = _useColor[THEME_COLORS.ACCENT],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    textFootnote = _useColor[THEME_COLORS.TEXT_FOOTNOTE],
+    warningColor = _useColor[THEME_COLORS.WARNING],
+    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
+    background = _useColor[THEME_COLORS.BACKGROUND],
+    surface1 = _useColor[THEME_COLORS.SURFACE_1],
+    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
+    border = _useColor[THEME_COLORS.BORDER];
+  var dispatch = useDispatch();
+  var _useState = React.useState(false),
+    isChanged = _useState[0],
+    setIsChanged = _useState[1];
+  var _useState2 = React.useState(),
+    selectedRole = _useState2[0],
+    setSelectedRole = _useState2[1];
+  var roles = useSelector(rolesSelector, reactRedux.shallowEqual) || [];
+  React.useEffect(function () {
+    if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
+      dispatch(getRolesAC());
+    }
+  }, [connectionStatus]);
+  var handleSave = function handleSave() {
+    if (isChanged && selectedRole) {
+      var updateMember = _extends({}, member, {
+        role: selectedRole
+      });
+      dispatch(changeMemberRoleAC(channelId, [updateMember]));
+    }
+    handleClosePopup();
+  };
+  function onChangeFunction(roleName) {
+    if (member.role !== roleName) {
+      setIsChanged(true);
+    }
+    setSelectedRole(roleName);
+  }
+  return /*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    backgroundColor: background,
+    maxWidth: '400px',
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: handleClosePopup
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary
+  }, "Change member role"), /*#__PURE__*/React__default.createElement(RolesSelect, null, /*#__PURE__*/React__default.createElement(RoleLabel, {
+    color: textSecondary
+  }, "Roles"), /*#__PURE__*/React__default.createElement(CustomSelect, {
+    backgroundColor: background,
+    color: textPrimary,
+    errorColor: warningColor,
+    placeholderColor: textFootnote,
+    borderColor: border,
+    disabledColor: surface1
+  }, /*#__PURE__*/React__default.createElement(DropDown, {
+    withIcon: true,
+    theme: theme,
+    isSelect: true,
+    trigger: /*#__PURE__*/React__default.createElement(CustomSelectTrigger, {
+      color: textPrimary
+    }, selectedRole || member.role || 'Select')
+  }, /*#__PURE__*/React__default.createElement(DropdownOptionsUl, {
+    theme: theme
+  }, !!roles.length && roles.map(function (role) {
+    return /*#__PURE__*/React__default.createElement(DropdownOptionLi, {
+      hoverBackground: backgroundHovered,
+      key: role.name,
+      onClick: function onClick() {
+        return onChangeFunction(role.name);
+      },
+      textColor: textPrimary
+    }, /*#__PURE__*/React__default.createElement(RoleSpan, null, role.name));
+  })))))), /*#__PURE__*/React__default.createElement(PopupFooter, {
+    backgroundColor: surface1
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    color: textPrimary,
+    backgroundColor: 'transparent',
+    onClick: function onClick() {
+      return handleClosePopup();
+    }
+  }, "Cancel"), /*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    color: textOnPrimary,
+    backgroundColor: accentColor,
+    borderRadius: '8px',
+    onClick: handleSave
+  }, "Save"))));
+};
+var RolesSelect = styled__default.div(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
+var RoleLabel = styled__default.div(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  margin: 20px 0 8px;\n  color: ", ";\n"])), function (_ref2) {
+  var color = _ref2.color;
+  return color;
+});
+var RoleSpan = styled__default.span(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  text-transform: capitalize;\n"])));
+
+function ResetLinkConfirmModal(_ref) {
+  var _getInviteLinkOptions;
+  var onCancel = _ref.onCancel,
+    onConfirm = _ref.onConfirm;
+  var options = ((_getInviteLinkOptions = getInviteLinkOptions()) === null || _getInviteLinkOptions === void 0 ? void 0 : _getInviteLinkOptions.ResetLinkConfirmModal) || {};
+  var titleText = options.titleText || 'Reset link';
+  var descriptionText = options.descriptionText || (/*#__PURE__*/React__default.createElement("span", null, "Are you sure you want to reset the group link? Anyone with the existing link will no longer be able to use it to join."));
+  var buttonText = options.buttonText || 'Reset';
+  var show = options.show !== false;
+  if (!show) return null;
+  var customRender = typeof options.render === 'function' ? options.render : null;
+  var customComponent = options.component || options.CustomComponent;
+  if (customRender) {
+    return customRender({
+      onCancel: onCancel,
+      onConfirm: onConfirm,
+      defaults: {
+        titleText: titleText,
+        descriptionText: descriptionText,
+        buttonText: buttonText
+      }
+    });
+  }
+  if (customComponent) {
+    return customComponent;
+  }
+  return /*#__PURE__*/React__default.createElement(ConfirmPopup, {
+    togglePopup: onCancel,
+    handleFunction: onConfirm,
+    title: titleText,
+    description: descriptionText,
+    buttonText: buttonText
+  });
+}
+
+var _templateObject$12, _templateObject2$W, _templateObject3$O, _templateObject4$G, _templateObject5$B, _templateObject6$x, _templateObject7$w, _templateObject8$s, _templateObject9$l, _templateObject0$j, _templateObject1$g, _templateObject10$a, _templateObject11$8, _templateObject12$7, _templateObject13$5;
+function InviteLinkModal(_ref) {
+  var _getInviteLinkOptions, _tabs$link, _tabs$qr, _tabs$link2, _tabs$qr2;
+  var onClose = _ref.onClose,
+    SVGOrPNGLogoIcon = _ref.SVGOrPNGLogoIcon,
+    channelId = _ref.channelId;
+  var _useColor = useColors(),
+    accentColor = _useColor[THEME_COLORS.ACCENT],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    background = _useColor[THEME_COLORS.BACKGROUND],
+    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
+    surface1 = _useColor[THEME_COLORS.SURFACE_1],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
+    border = _useColor[THEME_COLORS.BORDER],
+    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
+    tooltipBackground = _useColor[THEME_COLORS.TOOLTIP_BACKGROUND];
+  var theme = useSelector(themeSelector) || 'light';
+  var connectionStatus = useSelector(connectionStatusSelector, reactRedux.shallowEqual);
+  var channelsInviteKeys = useSelector(channelInviteKeysSelector, reactRedux.shallowEqual);
+  var dispatch = useDispatch();
+  var options = ((_getInviteLinkOptions = getInviteLinkOptions()) === null || _getInviteLinkOptions === void 0 ? void 0 : _getInviteLinkOptions.InviteLinkModal) || {};
+  var customRender = typeof options.render === 'function' ? options.render : null;
+  var customComponent = options.component || options.CustomComponent;
+  var titleText = options.titleText || 'Invite link';
+  var linkLabel = options.linkLabel || 'Link';
+  var linkDescription = options.linkDescription || 'You can invite anyone to the chat using this link';
+  var shareButtonText = options.shareButtonText || 'Share';
+  var cancelButtonText = options.cancelButtonText || 'Cancel';
+  var showHistorySection = options.showHistorySection !== false;
+  var showResetButton = options.showResetButton !== false;
+  var historyTitle = options.historyTitle || 'History';
+  var showPreviousMessagesLabel = options.showPreviousMessagesLabel || 'Show Previous Messages';
+  var tabs = options.tabs || {
+    link: {
+      show: true,
+      title: 'Group Link'
+    },
+    qr: {
+      show: true,
+      title: 'QR Code'
+    }
+  };
+  var showLinkTab = ((_tabs$link = tabs.link) === null || _tabs$link === void 0 ? void 0 : _tabs$link.show) !== false;
+  var showQrTab = ((_tabs$qr = tabs.qr) === null || _tabs$qr === void 0 ? void 0 : _tabs$qr.show) !== false;
+  var linkTabTitle = ((_tabs$link2 = tabs.link) === null || _tabs$link2 === void 0 ? void 0 : _tabs$link2.title) || 'Group Link';
+  var qrTabTitle = ((_tabs$qr2 = tabs.qr) === null || _tabs$qr2 === void 0 ? void 0 : _tabs$qr2.title) || 'QR Code';
+  var qrHintText = options.qrHintText || 'Show or send this to anyone who wants to join this channel';
+  var _useState = React.useState('link'),
+    activeTab = _useState[0],
+    setActiveTab = _useState[1];
+  var _useState2 = React.useState(false),
+    showResetConfirm = _useState2[0],
+    setShowResetConfirm = _useState2[1];
+  var _useState3 = React.useState(false),
+    openForwardPopup = _useState3[0],
+    setOpenForwardPopup = _useState3[1];
+  var _useState4 = React.useState('link'),
+    shareMode = _useState4[0],
+    setShareMode = _useState4[1];
+  var _useState5 = React.useState(false),
+    showCopiedToast = _useState5[0],
+    setShowCopiedToast = _useState5[1];
+  var logoRef = React.useRef(null);
   var toastTimeoutRef = React.useRef(null);
   var handleCopy = function handleCopy() {
     try {
@@ -47260,34 +48183,34 @@ function InviteLinkModal(_ref) {
     handleForward: handleForwardChannels
   })));
 }
-var LogoIconCont = styled__default.div(_templateObject$X || (_templateObject$X = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 11%);\n  left: calc(50% - 11%);\n  width: 22%;\n  height: 22%;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n"])));
-var Tabs$1 = styled__default.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  border-radius: 10px;\n  background-color: ", ";\n  padding: 2px;\n  margin: 4px 0 16px;\n  border: 1px solid ", ";\n"])), function (p) {
+var LogoIconCont = styled__default.div(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - 11%);\n  left: calc(50% - 11%);\n  width: 22%;\n  height: 22%;\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    border-radius: 10px;\n  }\n"])));
+var Tabs$1 = styled__default.div(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  border-radius: 10px;\n  background-color: ", ";\n  padding: 2px;\n  margin: 4px 0 16px;\n  border: 1px solid ", ";\n"])), function (p) {
   return p.backgroundColor;
 }, function (p) {
   return p.borderColor;
 });
-var TabButton = styled__default.button(_templateObject3$L || (_templateObject3$L = _taggedTemplateLiteralLoose(["\n  height: 36px;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  background-color: ", ";\n  ", "\n  color: ", ";\n"])), function (p) {
+var TabButton = styled__default.button(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  height: 36px;\n  border: none;\n  border-radius: 10px;\n  cursor: pointer;\n  background-color: ", ";\n  ", "\n  color: ", ";\n"])), function (p) {
   return p.active ? p.activeBackgroundColor : p.backgroundColor;
 }, function (p) {
   return p.active && "\n    box-shadow: 0px 3px 6px -4px #0000001F;\n  ";
 }, function (p) {
   return p.active ? p.activeColor : p.inactiveColor;
 });
-var Description = styled__default.p(_templateObject4$D || (_templateObject4$D = _taggedTemplateLiteralLoose(["\n  margin: 8px 0 16px;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var Description = styled__default.p(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  margin: 8px 0 16px;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-var FieldLabel = styled__default.span(_templateObject5$y || (_templateObject5$y = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
+var FieldLabel = styled__default.span(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
 });
-var LinkField = styled__default.div(_templateObject6$v || (_templateObject6$v = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-top: 8px;\n  padding-left: 12px;\n  background-color: ", ";\n"])), function (p) {
+var LinkField = styled__default.div(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border: 1px solid ", ";\n  border-radius: 8px;\n  margin-top: 8px;\n  padding-left: 12px;\n  background-color: ", ";\n"])), function (p) {
   return p.borderColor;
 }, function (p) {
   return p.backgroundColor;
 });
-var LinkInput = styled__default.input(_templateObject7$u || (_templateObject7$u = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
+var LinkInput = styled__default.input(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  border: none;\n  outline: none;\n  height: 40px;\n  background: transparent;\n  color: ", ";\n  font-size: 14px;\n"])), function (p) {
   return p.color;
 });
-var CopyButton = styled__default.button(_templateObject8$q || (_templateObject8$q = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
+var CopyButton = styled__default.button(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n"])));
 var CopyButtonWrapper = styled__default.div(_templateObject9$l || (_templateObject9$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
 var SectionTitle = styled__default.h4(_templateObject0$j || (_templateObject0$j = _taggedTemplateLiteralLoose(["\n  margin: 16px 0 8px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 16px;\n  color: ", ";\n"])), function (p) {
   return p.color;
@@ -47308,10 +48231,11 @@ var QrHint = styled__default.p(_templateObject13$5 || (_templateObject13$5 = _ta
   return p.color;
 });
 
-var _templateObject$Y, _templateObject2$T, _templateObject3$M, _templateObject4$E, _templateObject5$z, _templateObject6$w, _templateObject7$v, _templateObject8$r, _templateObject9$m;
+var _templateObject$13, _templateObject2$X, _templateObject3$P, _templateObject4$H, _templateObject5$C, _templateObject6$y, _templateObject7$x, _templateObject8$t, _templateObject9$m;
 var Members = function Members(_ref) {
   var _members$find;
   var channel = _ref.channel,
+    members = _ref.members,
     theme = _ref.theme,
     checkActionPermission = _ref.checkActionPermission,
     _ref$showChangeMember = _ref.showChangeMemberRole,
@@ -47364,9 +48288,16 @@ var Members = function Members(_ref) {
   var _useState8 = React.useState(),
     closeMenu = _useState8[0],
     setCloseMenu = _useState8[1];
-  var members = useSelector(activeChannelMembersSelector) || [];
   var contactsMap = useSelector(contactsMapSelector) || {};
   var openInviteModal = useSelector(openInviteModalSelector);
+  var channelsMembersHasNext = useSelector(channelsMembersHasNextMapSelector, reactRedux.shallowEqual);
+  var membersHasNext = React.useMemo(function () {
+    return channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[channel.id];
+  }, [channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[channel.id]]);
+  var channelsMembersLoadingState = useSelector(channelsMembersLoadingStateSelector, reactRedux.shallowEqual);
+  var membersLoading = React.useMemo(function () {
+    return channelsMembersLoadingState === null || channelsMembersLoadingState === void 0 ? void 0 : channelsMembersLoadingState[channel.id];
+  }, [channelsMembersLoadingState === null || channelsMembersLoadingState === void 0 ? void 0 : channelsMembersLoadingState[channel.id]]);
   var user = getClient().user;
   var memberDisplayText = getChannelTypesMemberDisplayTextMap();
   var channelTypeRoleMap = getDefaultRolesByChannelTypesMap();
@@ -47469,14 +48400,14 @@ var Members = function Members(_ref) {
     if (getFromContacts) {
       dispatch(getContactsAC());
     }
-    if (channel !== null && channel !== void 0 && channel.id) {
+    if (channel !== null && channel !== void 0 && channel.id && membersHasNext === undefined && membersLoading !== LOADING_STATE.LOADING) {
       dispatch(getMembersAC(channel.id));
     }
   }, [channel === null || channel === void 0 ? void 0 : channel.id]);
   var currentUserRole = (_members$find = members.find(function (member) {
     return member.id === user.id;
   })) === null || _members$find === void 0 ? void 0 : _members$find.role;
-  return /*#__PURE__*/React__default.createElement(Container$o, {
+  return /*#__PURE__*/React__default.createElement(Container$s, {
     theme: theme
   }, /*#__PURE__*/React__default.createElement(ActionsMenu$1, null, /*#__PURE__*/React__default.createElement(MembersList, null, checkActionPermission('addMember') && (currentUserRole === 'owner' || currentUserRole === 'admin') && (/*#__PURE__*/React__default.createElement(MemberItem$1, {
     key: 1,
@@ -47620,18 +48551,18 @@ var Members = function Members(_ref) {
     channelId: channel.id
   })));
 };
-var Container$o = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteralLoose([""])));
-var ActionsMenu$1 = styled__default.div(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
-var MemberNamePresence = styled__default.div(_templateObject3$M || (_templateObject3$M = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
-var MemberNameWrapper = styled__default.div(_templateObject4$E || (_templateObject4$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var MemberName$3 = styled__default.h4(_templateObject5$z || (_templateObject5$z = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
+var Container$s = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose([""])));
+var ActionsMenu$1 = styled__default.div(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n  position: relative;\n  transition: all 0.2s;\n"])));
+var MemberNamePresence = styled__default.div(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  max-width: calc(100% - 84px);\n\n  & > ", " {\n    display: block;\n  }\n"])), SubTitle);
+var MemberNameWrapper = styled__default.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var MemberName$3 = styled__default.h4(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  font-weight: 400;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var EditMemberIcon = styled__default.span(_templateObject6$w || (_templateObject6$w = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  cursor: pointer;\n  padding: 15px;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s;\n\n  & svg {\n    color: ", ";\n  }\n"])), function (props) {
+var EditMemberIcon = styled__default.span(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  cursor: pointer;\n  padding: 15px;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.2s;\n\n  & svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var MembersList = styled__default.ul(_templateObject7$v || (_templateObject7$v = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var MemberItem$1 = styled__default.li(_templateObject8$r || (_templateObject8$r = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  font-weight: 500;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    rect {\n      fill: transparent;\n    }\n  }\n\n  &:first-child {\n    cursor: pointer;\n\n    > svg {\n      color: ", ";\n      margin-right: 12px;\n      & > rect {\n        fill: ", " !important;\n      }\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  & .dropdown-wrapper {\n    margin-left: auto;\n  }\n\n  & ", " {\n    width: 12px;\n    height: 12px;\n    right: -1px;\n    bottom: -1px;\n  }\n"])), function (props) {
+var MembersList = styled__default.ul(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  transition: all 0.2s;\n"])));
+var MemberItem$1 = styled__default.li(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  font-weight: 500;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  color: ", ";\n  cursor: pointer;\n\n  & > svg {\n    rect {\n      fill: transparent;\n    }\n  }\n\n  &:first-child {\n    cursor: pointer;\n\n    > svg {\n      color: ", ";\n      margin-right: 12px;\n      & > rect {\n        fill: ", " !important;\n      }\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  & .dropdown-wrapper {\n    margin-left: auto;\n  }\n\n  & ", " {\n    width: 12px;\n    height: 12px;\n    right: -1px;\n    bottom: -1px;\n  }\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
   return props.color;
@@ -47648,656 +48579,6 @@ var RoleBadge = styled__default.span(_templateObject9$m || (_templateObject9$m =
   return props.backgroundColor;
 });
 
-var _templateObject$Z;
-var MonthHeader = function MonthHeader(_ref) {
-  var currentCreatedAt = _ref.currentCreatedAt,
-    previousCreatedAt = _ref.previousCreatedAt,
-    isFirst = _ref.isFirst,
-    padding = _ref.padding,
-    fullWidth = _ref.fullWidth;
-  var _useColor = useColors(),
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY];
-  var monthComponent = React.useMemo(function () {
-    var shouldShowHeader = isFirst || previousCreatedAt && new Date(currentCreatedAt).getMonth() !== new Date(previousCreatedAt).getMonth();
-    if (!shouldShowHeader) {
-      return null;
-    }
-    return /*#__PURE__*/React__default.createElement(MonthHeaderContainer, {
-      color: textSecondary,
-      padding: padding,
-      fullWidth: fullWidth
-    }, new Date(currentCreatedAt).toLocaleDateString('en-US', {
-      month: 'long',
-      year: 'numeric'
-    }));
-  }, [currentCreatedAt, previousCreatedAt, isFirst, textSecondary, padding, fullWidth]);
-  return monthComponent;
-};
-var MonthHeaderContainer = styled__default.div(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  width: ", ";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n  text-transform: uppercase;\n"])), function (props) {
-  return props.padding || '9px 12px';
-}, function (props) {
-  return props.fullWidth ? '100%' : 'auto';
-}, function (props) {
-  return props.color;
-});
-
-var _templateObject$_, _templateObject2$U;
-var Media = function Media(_ref) {
-  var channel = _ref.channel;
-  var _useColor = useColors(),
-    background = _useColor[THEME_COLORS.BACKGROUND];
-  var attachments = useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
-  var _useState = React.useState(null),
-    mediaFile = _useState[0],
-    setMediaFile = _useState[1];
-  var dispatch = useDispatch();
-  var handleMediaItemClick = function handleMediaItemClick(file) {
-    setMediaFile(file);
-  };
-  React.useEffect(function () {
-    dispatch(setAttachmentsAC([]));
-    dispatch(getAttachmentsAC(channel.id, channelDetailsTabs.media));
-  }, [channel.id]);
-  return /*#__PURE__*/React__default.createElement(Container$p, null, attachments.map(function (file, index) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: file.id
-    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
-      currentCreatedAt: file.createdAt,
-      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
-      isFirst: index === 0,
-      padding: '9px 6px',
-      fullWidth: true
-    }), /*#__PURE__*/React__default.createElement(MediaItem, null, file.type === 'image' ? (/*#__PURE__*/React__default.createElement(Attachment$1, {
-      attachment: _extends({}, file, {
-        metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
-      }),
-      handleMediaItemClick: handleMediaItemClick,
-      backgroundColor: background,
-      borderRadius: '8px',
-      isDetailsView: true
-    })) : (
-    /*#__PURE__*/
-    React__default.createElement(Attachment$1, {
-      attachment: _extends({}, file, {
-        metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
-      }),
-      handleMediaItemClick: handleMediaItemClick,
-      backgroundColor: background,
-      borderRadius: '8px',
-      isDetailsView: true
-    }))));
-  }), mediaFile && (/*#__PURE__*/React__default.createElement(SliderPopup, {
-    channel: channel,
-    setIsSliderOpen: setMediaFile,
-    mediaFiles: attachments,
-    currentMediaFile: mediaFile
-  })));
-};
-var Container$p = styled__default.div(_templateObject$_ || (_templateObject$_ = _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"])));
-var MediaItem = styled__default.div(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  width: calc(33.3333% - 4px);\n  aspect-ratio: 1/1;\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"])));
-
-var _rect$3, _path$1y;
-function _extends$1C() {
-  return _extends$1C = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$1C.apply(null, arguments);
-}
-function SvgDocumentIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1C({
-    width: 40,
-    height: 40,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _rect$3 || (_rect$3 = /*#__PURE__*/React.createElement("rect", {
-    width: 40,
-    height: 40,
-    rx: 8,
-    fill: "currentColor",
-    fillOpacity: 0.2
-  })), _path$1y || (_path$1y = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M17.593 9.5c-2.098 0-3.023.185-3.962.687a4.685 4.685 0 00-1.944 1.944c-.502.939-.687 1.864-.687 3.962v7.386c0 2.098.185 3.023.687 3.962a4.685 4.685 0 001.944 1.944c.939.502 1.864.686 3.962.686h3.957c2.098 0 3.023-.184 3.962-.687a4.685 4.685 0 001.944-1.944c.502-.938.687-1.863.687-3.961v-5.1c0-.683-.024-.99-.105-1.34a3.094 3.094 0 00-.399-.964c-.19-.305-.39-.54-.874-1.022l-4.175-4.175c-.483-.483-.717-.684-1.022-.874a3.096 3.096 0 00-.963-.4c-.294-.067-.556-.095-1.034-.102V9.5h-1.978zm0 1.714c-2.002 0-2.587.182-3.154.485a2.971 2.971 0 00-1.24 1.24c-.303.567-.485 1.152-.485 3.154v7.386c0 2.001.182 2.587.485 3.153a2.97 2.97 0 001.24 1.24c.567.304 1.152.485 3.154.485h3.957c2.001 0 2.587-.181 3.153-.484a2.97 2.97 0 001.241-1.241c.303-.566.485-1.152.485-3.153v-5.1c0-.118-.001-.22-.003-.308h-4.712a2.143 2.143 0 01-2.143-2.142l.002-4.713-.15-.001h-1.83zm3.785.876l-.092-.091v3.93c0 .21.151.385.351.421l.077.007 3.932.002-.093-.094-4.175-4.175zm-6.092 12.839c0-.474.383-.858.857-.858h3.428a.857.857 0 010 1.715h-3.428a.857.857 0 01-.857-.857zm.857-4.286a.857.857 0 100 1.714h6a.857.857 0 000-1.714h-6z",
-    fill: "currentColor"
-  })));
-}
-
-var _path$1z;
-function _extends$1D() {
-  return _extends$1D = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$1D.apply(null, arguments);
-}
-function SvgDownloadFile(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1D({
-    width: 24,
-    height: 24,
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "currentColor"
-  }, props), _path$1z || (_path$1z = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    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"
-  })));
-}
-
-var _templateObject$$, _templateObject2$V, _templateObject3$N, _templateObject4$F, _templateObject5$A, _templateObject6$x, _templateObject7$w, _templateObject8$s;
-var Files = function Files(_ref) {
-  var channelId = _ref.channelId,
-    filePreviewIcon = _ref.filePreviewIcon,
-    filePreviewHoverIcon = _ref.filePreviewHoverIcon,
-    filePreviewTitleColor = _ref.filePreviewTitleColor,
-    filePreviewSizeColor = _ref.filePreviewSizeColor,
-    filePreviewHoverBackgroundColor = _ref.filePreviewHoverBackgroundColor,
-    filePreviewDownloadIcon = _ref.filePreviewDownloadIcon,
-    fileNameFontSize = _ref.fileNameFontSize,
-    fileNameLineHeight = _ref.fileNameLineHeight,
-    fileSizeFontSize = _ref.fileSizeFontSize,
-    fileSizeLineHeight = _ref.fileSizeLineHeight;
-  var _useColor = useColors(),
-    accentColor = _useColor[THEME_COLORS.ACCENT],
-    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
-    surface1 = _useColor[THEME_COLORS.SURFACE_1],
-    overlayBackground2 = _useColor[THEME_COLORS.OVERLAY_BACKGROUND_2];
-  var dispatch = useDispatch();
-  var _useState = React.useState({}),
-    downloadingFilesMap = _useState[0],
-    setDownloadingFilesMap = _useState[1];
-  var attachments = useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
-  var nameSizeNum = fileNameFontSize && Number(fileNameFontSize.slice(0, -2));
-  var nameMaxLength = nameSizeNum ? 32 - (nameSizeNum - 15) * (nameSizeNum < 20 ? 2 : 1) : 32;
-  var handleCompleteDownload = function handleCompleteDownload(attachmentId) {
-    var stateCopy = _extends({}, downloadingFilesMap);
-    delete stateCopy[attachmentId];
-    setDownloadingFilesMap(stateCopy);
-  };
-  var handleDownloadFile = function handleDownloadFile(attachment) {
-    if (attachment.id) {
-      setDownloadingFilesMap(function (prevState) {
-        var _extends2;
-        return _extends({}, prevState, (_extends2 = {}, _extends2[attachment.id] = {
-          uploadPercent: 1
-        }, _extends2));
-      });
-    }
-    downloadFile(attachment, true, handleCompleteDownload, function (progress) {
-      var loadedRes = progress.loaded && progress.loaded / progress.total;
-      var uploadPercent = loadedRes && loadedRes * 100;
-      setDownloadingFilesMap(function (prevState) {
-        var _extends3;
-        return _extends({}, prevState, (_extends3 = {}, _extends3[attachment.id] = {
-          uploadPercent: uploadPercent
-        }, _extends3));
-      });
-    });
-  };
-  React.useEffect(function () {
-    dispatch(getAttachmentsAC(channelId, channelDetailsTabs.file));
-  }, [channelId]);
-  return /*#__PURE__*/React__default.createElement(Container$q, null, attachments.map(function (file, index) {
-    var metas = file.metadata && isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata;
-    var withPrefix = true;
-    var attachmentThumb = '';
-    if (metas && metas.tmb) {
-      if (metas.tmb.length < 70) {
-        attachmentThumb = base64ToDataURL(metas.tmb);
-        withPrefix = false;
-      } else {
-        attachmentThumb = metas.tmb;
-      }
-    }
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: file.id
-    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
-      currentCreatedAt: file.createdAt,
-      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
-      isFirst: index === 0,
-      padding: '14px 14px 0'
-    }), /*#__PURE__*/React__default.createElement(FileItem, {
-      hoverBackgroundColor: filePreviewHoverBackgroundColor || backgroundHovered
-    }, metas && metas.tmb ? (/*#__PURE__*/React__default.createElement(FileThumb, {
-      draggable: false,
-      src: "" + (withPrefix ? 'data:image/jpeg;base64,' : '') + attachmentThumb
-    })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont, {
-      iconColor: accentColor,
-      fillColor: surface1
-    }, filePreviewIcon || /*#__PURE__*/React__default.createElement(SvgDocumentIcon, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont, {
-      iconColor: accentColor,
-      fillColor: surface1
-    }, filePreviewHoverIcon || /*#__PURE__*/React__default.createElement(SvgDocumentIcon, null)))), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(AttachmentPreviewTitle, {
-      fontSize: fileNameFontSize,
-      lineHeight: fileNameLineHeight,
-      color: filePreviewTitleColor || textPrimary
-    }, _formatLargeText(file.name, nameMaxLength)), /*#__PURE__*/React__default.createElement(FileSizeAndDate, {
-      fontSize: fileSizeFontSize,
-      lineHeight: fileSizeLineHeight,
-      color: filePreviewSizeColor || textSecondary
-    }, file.size ? bytesToSize(file.size) + " \u2022 " + formatChannelDetailsDate(file.createdAt) : formatChannelDetailsDate(file.createdAt))), /*#__PURE__*/React__default.createElement(DownloadWrapper, {
-      visible: !!downloadingFilesMap[file.id],
-      iconColor: accentColor,
-      onClick: function onClick() {
-        return handleDownloadFile(file);
-      }
-    }, downloadingFilesMap[file.id] ? (/*#__PURE__*/React__default.createElement(ProgressWrapper$2, null, /*#__PURE__*/React__default.createElement(reactCircularProgressbar.CircularProgressbar, {
-      minValue: 0,
-      maxValue: 100,
-      value: downloadingFilesMap[file.id].uploadPercent || 0,
-      backgroundPadding: 6,
-      background: true,
-      text: '',
-      styles: {
-        background: {
-          fill: overlayBackground2 + "66"
-        },
-        path: {
-          stroke: accentColor,
-          strokeLinecap: 'butt',
-          strokeWidth: '6px',
-          transition: 'stroke-dashoffset 0.5s ease 0s',
-          transform: 'rotate(0turn)',
-          transformOrigin: 'center center'
-        }
-      }
-    }))) : filePreviewDownloadIcon || /*#__PURE__*/React__default.createElement(SvgDownloadFile, null))));
-  }));
-};
-var Container$q = styled__default.ul(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  transition: all 0.2s;\n"])));
-var DownloadWrapper = styled__default.a(_templateObject2$V || (_templateObject2$V = _taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  visibility: ", ";\n  padding: 5px 6px;\n  position: absolute;\n  top: 25%;\n  right: 16px;\n  cursor: pointer;\n  & > svg {\n    & path {\n      fill: ", ";\n    }\n    color: ", ";\n  }\n"])), function (props) {
-  return props.visible ? 'visible' : 'hidden';
-}, function (props) {
-  return props.iconColor;
-}, function (props) {
-  return props.iconColor;
-});
-var ProgressWrapper$2 = styled__default.span(_templateObject3$N || (_templateObject3$N = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  animation: preloader 1.5s linear infinite;\n\n  @keyframes preloader {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
-var FileIconCont = styled__default.span(_templateObject4$F || (_templateObject4$F = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
-  return props.iconColor;
-}, function (props) {
-  return props.fillColor;
-});
-var FileHoverIconCont = styled__default.span(_templateObject5$A || (_templateObject5$A = _taggedTemplateLiteralLoose(["\n  display: none;\n  & > svg {\n    width: 40px;\n    height: 40px;\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
-  return props.iconColor;
-}, function (props) {
-  return props.fillColor;
-});
-var FileThumb = styled__default.img(_templateObject6$x || (_templateObject6$x = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border: 0.5px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  object-fit: cover;\n"])));
-var FileItem = styled__default.div(_templateObject7$w || (_templateObject7$w = _taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 11px 16px;\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  transition: all 0.2s;\n  div {\n    margin-left: 7px;\n    width: calc(100% - 48px);\n  }\n  &:hover {\n    background-color: ", ";\n    ", " {\n      visibility: visible;\n    }\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n  /*&.isHover {\n\n  }*/\n"])), function (props) {
-  return props.hoverBackgroundColor;
-}, DownloadWrapper, FileIconCont, FileHoverIconCont);
-var FileSizeAndDate = styled__default.span(_templateObject8$s || (_templateObject8$s = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-top: 2px;\n"])), function (props) {
-  return props.fontSize || '13px';
-}, function (props) {
-  return props.lineHeight || '16px';
-}, function (props) {
-  return props.color;
-});
-
-var _rect$4, _path$1A;
-function _extends$1E() {
-  return _extends$1E = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$1E.apply(null, arguments);
-}
-function SvgLinkIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1E({
-    width: 40,
-    height: 40,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    color: "#5159f6"
-  }, props), _rect$4 || (_rect$4 = /*#__PURE__*/React.createElement("rect", {
-    width: 40,
-    height: 40,
-    rx: 8,
-    fill: "currentColor",
-    fillOpacity: 0.2
-  })), _path$1A || (_path$1A = /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    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",
-    fill: "currentColor"
-  })));
-}
-
-var _templateObject$10, _templateObject2$W, _templateObject3$O, _templateObject4$G, _templateObject5$B;
-var LinkItem = function LinkItem(_ref) {
-  var link = _ref.link,
-    linkPreviewIcon = _ref.linkPreviewIcon,
-    linkPreviewHoverIcon = _ref.linkPreviewHoverIcon,
-    linkPreviewColor = _ref.linkPreviewColor,
-    linkPreviewHoverBackgroundColor = _ref.linkPreviewHoverBackgroundColor;
-  var _useColor = useColors(),
-    accentColor = _useColor[THEME_COLORS.ACCENT],
-    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
-    surface1 = _useColor[THEME_COLORS.SURFACE_1];
-  React.useEffect(function () {}, []);
-  return /*#__PURE__*/React__default.createElement(FileItem$1, {
-    draggable: false,
-    hoverBackgroundColor: linkPreviewHoverBackgroundColor || backgroundHovered
-  }, /*#__PURE__*/React__default.createElement("a", {
-    draggable: false,
-    href: link.startsWith('http') ? link : "https://" + link,
-    target: '_blank',
-    rel: 'noreferrer'
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(LinkIconCont, {
-    iconColor: accentColor,
-    fillColor: surface1
-  }, linkPreviewIcon || /*#__PURE__*/React__default.createElement(SvgLinkIcon, null)), /*#__PURE__*/React__default.createElement(LinkHoverIconCont, {
-    iconColor: accentColor,
-    fillColor: surface1
-  }, linkPreviewHoverIcon || /*#__PURE__*/React__default.createElement(SvgLinkIcon, null))), /*#__PURE__*/React__default.createElement(LinkInfoCont, null, /*#__PURE__*/React__default.createElement(LinkUrl, {
-    color: linkPreviewColor || textPrimary
-  }, link))));
-};
-var LinkIconCont = styled__default.span(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
-  return props.iconColor;
-}, function (props) {
-  return props.fillColor;
-});
-var LinkHoverIconCont = styled__default.span(_templateObject2$W || (_templateObject2$W = _taggedTemplateLiteralLoose(["\n  display: none;\n  > svg {\n    color: ", ";\n    rect {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
-  return props.iconColor;
-}, function (props) {
-  return props.fillColor;
-});
-var LinkInfoCont = styled__default.div(_templateObject3$O || (_templateObject3$O = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  width: calc(100% - 40px);\n"])));
-var FileItem$1 = styled__default.li(_templateObject4$G || (_templateObject4$G = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  a {\n    display: flex;\n    align-items: center;\n    text-decoration: none;\n  }\n  &:hover {\n    background-color: ", ";\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
-  return props.hoverBackgroundColor;
-}, LinkIconCont, LinkHoverIconCont);
-var LinkUrl = styled__default.span(_templateObject5$B || (_templateObject5$B = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 52px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  text-decoration: underline;\n  color: ", ";\n"])), function (props) {
-  return props.color;
-});
-
-var _templateObject$11;
-var Links = function Links(_ref) {
-  var channelId = _ref.channelId,
-    linkPreviewIcon = _ref.linkPreviewIcon,
-    linkPreviewHoverIcon = _ref.linkPreviewHoverIcon,
-    linkPreviewTitleColor = _ref.linkPreviewTitleColor,
-    linkPreviewColor = _ref.linkPreviewColor,
-    linkPreviewHoverBackgroundColor = _ref.linkPreviewHoverBackgroundColor;
-  var dispatch = useDispatch();
-  var attachments = useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
-  React.useEffect(function () {
-    dispatch(getAttachmentsAC(channelId, channelDetailsTabs.link));
-  }, [channelId]);
-  return /*#__PURE__*/React__default.createElement(Container$r, null, attachments.map(function (file, index) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: file.id
-    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
-      currentCreatedAt: file.createdAt,
-      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
-      isFirst: index === 0,
-      padding: '6px 14px 0'
-    }), /*#__PURE__*/React__default.createElement(LinkItem, {
-      link: file.url,
-      linkPreviewColor: linkPreviewColor,
-      linkPreviewHoverBackgroundColor: linkPreviewHoverBackgroundColor,
-      linkPreviewHoverIcon: linkPreviewHoverIcon,
-      linkPreviewTitleColor: linkPreviewTitleColor,
-      linkPreviewIcon: linkPreviewIcon
-    }));
-  }));
-};
-var Container$r = styled__default.ul(_templateObject$11 || (_templateObject$11 = _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"])));
-
-var _rect$5, _path$1B;
-function _extends$1F() {
-  return _extends$1F = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$1F.apply(null, arguments);
-}
-function SvgVoicePreview(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1F({
-    width: 40,
-    height: 40,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _rect$5 || (_rect$5 = /*#__PURE__*/React.createElement("rect", {
-    width: 40,
-    height: 40,
-    rx: 20,
-    fill: "#5159F6"
-  })), _path$1B || (_path$1B = /*#__PURE__*/React.createElement("path", {
-    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",
-    fill: "#fff"
-  })));
-}
-
-var _rect$6, _path$1C;
-function _extends$1G() {
-  return _extends$1G = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends$1G.apply(null, arguments);
-}
-function SvgVoicePreviewPause(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1G({
-    width: 40,
-    height: 40,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), _rect$6 || (_rect$6 = /*#__PURE__*/React.createElement("rect", {
-    width: 40,
-    height: 40,
-    rx: 20,
-    fill: "#5159F6"
-  })), _path$1C || (_path$1C = /*#__PURE__*/React.createElement("path", {
-    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",
-    fill: "#fff"
-  })));
-}
-
-var _templateObject$12, _templateObject2$X, _templateObject3$P, _templateObject4$H, _templateObject5$C, _templateObject6$y, _templateObject7$x, _templateObject8$t;
-var VoiceItem = function VoiceItem(_ref) {
-  var file = _ref.file,
-    voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
-    voicePreviewPlayHoverIcon = _ref.voicePreviewPlayHoverIcon,
-    voicePreviewPauseIcon = _ref.voicePreviewPauseIcon,
-    voicePreviewPauseHoverIcon = _ref.voicePreviewPauseHoverIcon,
-    voicePreviewTitleColor = _ref.voicePreviewTitleColor,
-    voicePreviewDateAndTimeColor = _ref.voicePreviewDateAndTimeColor,
-    voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor,
-    messageType = _ref.messageType;
-  var _useColor = useColors(),
-    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    backgroundHovered = _useColor[THEME_COLORS.BACKGROUND_HOVERED],
-    accentColor = _useColor[THEME_COLORS.ACCENT];
-  var dispatch = useDispatch();
-  var playingAudioId = useSelector(playingAudioIdSelector);
-  var getFromContacts = getShowOnlyContactUsers();
-  var _useState = React.useState(''),
-    fileUrl = _useState[0],
-    setFileUrl = _useState[1];
-  var _useState2 = React.useState(false),
-    audioIsPlaying = _useState2[0],
-    setAudioIsPlaying = _useState2[1];
-  var _useState3 = React.useState(''),
-    currentTime = _useState3[0],
-    setCurrentTime = _useState3[1];
-  var customDownloader = getCustomDownloader();
-  var contactsMap = useSelector(contactsMapSelector);
-  var user = useSelector(userSelector);
-  var audioRef = React.useRef();
-  var intervalRef = React.useRef(null);
-  var handlePlayPause = function handlePlayPause() {
-    if (audioRef && audioRef.current) {
-      if (audioRef.current.paused) {
-        var _audioRef$current, _audioRef$current5;
-        var audioDuration = (_audioRef$current = audioRef.current) === null || _audioRef$current === void 0 ? void 0 : _audioRef$current.duration;
-        dispatch(setPlayingAudioIdAC("voice_" + file.id));
-        intervalRef.current = setInterval(function () {
-          var _audioRef$current2;
-          var audioCurrentTime = (_audioRef$current2 = audioRef.current) === null || _audioRef$current2 === void 0 ? void 0 : _audioRef$current2.currentTime;
-          if (audioDuration) {
-            if ((audioCurrentTime || audioCurrentTime === 0) && audioDuration - audioCurrentTime > 0) {
-              setCurrentTime(formatAudioVideoTime(audioCurrentTime));
-            } else {
-              var _audioRef$current3;
-              setCurrentTime(formatAudioVideoTime(audioCurrentTime || 0));
-              setAudioIsPlaying(false);
-              (_audioRef$current3 = audioRef.current) === null || _audioRef$current3 === void 0 ? void 0 : _audioRef$current3.pause();
-              audioRef.current && (audioRef.current.currentTime = 0);
-              clearInterval(intervalRef.current);
-            }
-          } else {
-            var _audioRef$current4;
-            audioDuration = (_audioRef$current4 = audioRef.current) === null || _audioRef$current4 === void 0 ? void 0 : _audioRef$current4.duration;
-          }
-        }, 100);
-        setAudioIsPlaying(true);
-        (_audioRef$current5 = audioRef.current) === null || _audioRef$current5 === void 0 ? void 0 : _audioRef$current5.play();
-      } else {
-        var _audioRef$current6;
-        clearInterval(intervalRef.current);
-        dispatch(setPlayingAudioIdAC(null));
-        setAudioIsPlaying(false);
-        (_audioRef$current6 = audioRef.current) === null || _audioRef$current6 === void 0 ? void 0 : _audioRef$current6.pause();
-      }
-    }
-  };
-  useDidUpdate(function () {
-    if (audioIsPlaying && playingAudioId && playingAudioId !== "voice_" + file.id && audioRef.current) {
-      setAudioIsPlaying(false);
-      audioRef.current.pause();
-    }
-  }, [playingAudioId]);
-  React.useEffect(function () {
-    if (customDownloader) {
-      customDownloader(file.url, false, function () {}, messageType).then(function (url) {
-        setFileUrl(url);
-      });
-    } else {
-      setFileUrl(file.url);
-    }
-    return function () {
-      clearInterval(intervalRef.current);
-    };
-  }, []);
-  return /*#__PURE__*/React__default.createElement(FileItem$2, {
-    onMouseEnter: function onMouseEnter(e) {
-      return e.currentTarget.classList.add('isHover');
-    },
-    onMouseLeave: function onMouseLeave(e) {
-      return e.currentTarget.classList.remove('isHover');
-    },
-    hoverBackgroundColor: voicePreviewHoverBackgroundColor || backgroundHovered
-  }, audioIsPlaying ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont$1, {
-    onClick: handlePlayPause,
-    fill: accentColor
-  }, voicePreviewPauseIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewPause, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont$1, {
-    onClick: handlePlayPause,
-    fill: accentColor
-  }, voicePreviewPauseHoverIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreviewPause, null)))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FileIconCont$1, {
-    onClick: handlePlayPause,
-    fill: accentColor
-  }, voicePreviewPlayIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreview, null)), /*#__PURE__*/React__default.createElement(FileHoverIconCont$1, {
-    onClick: handlePlayPause,
-    fill: accentColor
-  }, voicePreviewPlayHoverIcon || /*#__PURE__*/React__default.createElement(SvgVoicePreview, null)))), /*#__PURE__*/React__default.createElement(AudioInfo, null, /*#__PURE__*/React__default.createElement(AudioTitle, {
-    color: voicePreviewTitleColor || textPrimary
-  }, file.user && (file.user.id === user.id ? 'You' : makeUsername(contactsMap[file.user.id], file.user, getFromContacts))), /*#__PURE__*/React__default.createElement(AudioDate, {
-    color: voicePreviewDateAndTimeColor || textSecondary
-  }, formatChannelDetailsDate(file.createdAt)), /*#__PURE__*/React__default.createElement(AudioSendTime, {
-    color: textSecondary
-  }, currentTime || (file.metadata.dur ? formatAudioVideoTime(file.metadata.dur) : ''))), /*#__PURE__*/React__default.createElement(Audio, {
-    controls: true,
-    ref: audioRef,
-    src: fileUrl
-  }, /*#__PURE__*/React__default.createElement("source", {
-    src: fileUrl,
-    type: 'audio/ogg'
-  }), /*#__PURE__*/React__default.createElement("source", {
-    src: fileUrl,
-    type: 'audio/mpeg'
-  })));
-};
-var FileIconCont$1 = styled__default.span(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: inline-flex;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
-  return props.fill || 'transparent';
-}, function (props) {
-  return props.fill || 'transparent';
-});
-var FileHoverIconCont$1 = styled__default.span(_templateObject2$X || (_templateObject2$X = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: none;\n  fill: ", ";\n  rect {\n    fill: ", ";\n  }\n"])), function (props) {
-  return props.fill || 'transparent';
-}, function (props) {
-  return props.fill || 'transparent';
-});
-var FileItem$2 = styled__default.li(_templateObject3$P || (_templateObject3$P = _taggedTemplateLiteralLoose(["\n  padding: 9px 16px;\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n\n  &:hover {\n    background-color: ", ";\n  }\n  div {\n    margin-left: 12px;\n    width: 100%;\n  }\n  img {\n    width: 42px;\n    height: 42px;\n    border: 0.5px solid rgba(0, 0, 0, 0.1);\n    box-sizing: border-box;\n    border-radius: 6px;\n  }\n\n  &.isHover {\n    & ", " {\n      display: none;\n    }\n    & ", " {\n      display: inline-flex;\n    }\n  }\n"])), function (props) {
-  return props.hoverBackgroundColor;
-}, FileIconCont$1, FileHoverIconCont$1);
-var AudioInfo = styled__default.div(_templateObject4$H || (_templateObject4$H = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var AudioTitle = styled__default.span(_templateObject5$C || (_templateObject5$C = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  color: ", ";\n"])), function (props) {
-  return props.color;
-});
-var AudioDate = styled__default.span(_templateObject6$y || (_templateObject6$y = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 72px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
-  return props.color;
-});
-var AudioSendTime = styled__default.span(_templateObject7$x || (_templateObject7$x = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 0;\n  top: 11px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n"])), function (props) {
-  return props.color;
-});
-var Audio = styled__default.audio(_templateObject8$t || (_templateObject8$t = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
-
-var _templateObject$13;
-var Voices = function Voices(_ref) {
-  var channelId = _ref.channelId,
-    voicePreviewPlayIcon = _ref.voicePreviewPlayIcon,
-    voicePreviewPlayHoverIcon = _ref.voicePreviewPlayHoverIcon,
-    voicePreviewPauseIcon = _ref.voicePreviewPauseIcon,
-    voicePreviewPauseHoverIcon = _ref.voicePreviewPauseHoverIcon,
-    voicePreviewTitleColor = _ref.voicePreviewTitleColor,
-    voicePreviewDateAndTimeColor = _ref.voicePreviewDateAndTimeColor,
-    voicePreviewHoverBackgroundColor = _ref.voicePreviewHoverBackgroundColor;
-  var dispatch = useDispatch();
-  var attachments = useSelector(activeTabAttachmentsSelector, reactRedux.shallowEqual) || [];
-  React.useEffect(function () {
-    dispatch(getAttachmentsAC(channelId, channelDetailsTabs.voice));
-  }, [channelId]);
-  return /*#__PURE__*/React__default.createElement(Container$s, null, attachments.map(function (file, index) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-      key: file.id
-    }, /*#__PURE__*/React__default.createElement(MonthHeader, {
-      currentCreatedAt: file.createdAt,
-      previousCreatedAt: index > 0 ? attachments[index - 1].createdAt : undefined,
-      isFirst: index === 0,
-      padding: '7px 14px 2px'
-    }), /*#__PURE__*/React__default.createElement(VoiceItem, {
-      file: _extends({}, file, {
-        metadata: isJSON(file.metadata) ? JSON.parse(file.metadata) : file.metadata
-      }),
-      voicePreviewDateAndTimeColor: voicePreviewDateAndTimeColor,
-      voicePreviewHoverBackgroundColor: voicePreviewHoverBackgroundColor,
-      voicePreviewPlayHoverIcon: voicePreviewPlayIcon,
-      voicePreviewPlayIcon: voicePreviewPlayHoverIcon,
-      voicePreviewPauseIcon: voicePreviewPauseIcon,
-      voicePreviewPauseHoverIcon: voicePreviewPauseHoverIcon,
-      voicePreviewTitleColor: voicePreviewTitleColor
-    }));
-  }));
-};
-var Container$s = styled__default.ul(_templateObject$13 || (_templateObject$13 = _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"])));
-
 var _templateObject$14, _templateObject2$Y;
 var DetailsTab = function DetailsTab(_ref) {
   var channel = _ref.channel,
@@ -48349,6 +48630,10 @@ var DetailsTab = function DetailsTab(_ref) {
     border = _useColor[THEME_COLORS.BORDER],
     background = _useColor[THEME_COLORS.BACKGROUND];
   var dispatch = useDispatch();
+  var activeChannelMembersMap = useSelector(activeChannelMembersMapSelector, reactRedux.shallowEqual);
+  var members = React.useMemo(function () {
+    return (activeChannelMembersMap === null || activeChannelMembersMap === void 0 ? void 0 : activeChannelMembersMap[channel.id]) || [];
+  }, [activeChannelMembersMap === null || activeChannelMembersMap === void 0 ? void 0 : activeChannelMembersMap[channel.id]]);
   var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
   var showMembers = !isDirectChannel && checkActionPermission('getMembers');
   var memberDisplayText = getChannelTypesMemberDisplayTextMap();
@@ -48403,6 +48688,7 @@ var DetailsTab = function DetailsTab(_ref) {
     }, /*#__PURE__*/React__default.createElement("span", null, channelDetailsTabs[tabKey]));
   })), showMembers && activeTab === channelDetailsTabs.member && (/*#__PURE__*/React__default.createElement(Members, {
     theme: theme,
+    members: members,
     channel: channel,
     checkActionPermission: checkActionPermission,
     showChangeMemberRole: showChangeMemberRole,
@@ -48887,8 +49173,14 @@ var Details = function Details(_ref) {
   var activeChannel = useSelector(activeChannelSelector, reactRedux.shallowEqual);
   var _usePermissions = usePermissions(activeChannel ? activeChannel.userRole : ''),
     checkActionPermission = _usePermissions[0];
-  var membersLoading = useSelector(membersLoadingStateSelector);
-  var membersHasNext = useSelector(membersHasNextSelector);
+  var channelsMembersLoadingState = useSelector(channelsMembersLoadingStateSelector, reactRedux.shallowEqual);
+  var membersLoading = React.useMemo(function () {
+    return channelsMembersLoadingState === null || channelsMembersLoadingState === void 0 ? void 0 : channelsMembersLoadingState[activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id];
+  }, [channelsMembersLoadingState === null || channelsMembersLoadingState === void 0 ? void 0 : channelsMembersLoadingState[activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id]]);
+  var channelsMembersHasNext = useSelector(channelsMembersHasNextMapSelector, reactRedux.shallowEqual);
+  var membersHasNext = React.useMemo(function () {
+    return channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id];
+  }, [channelsMembersHasNext === null || channelsMembersHasNext === void 0 ? void 0 : channelsMembersHasNext[activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id]]);
   var messagesLoading = useSelector(messagesLoadingState);
   var attachmentsHasNex = useSelector(activeTabAttachmentsHasNextSelector);
   var contactsMap = useSelector(contactsMapSelector);