sceyt-chat-react-uikit 1.6.9-beta.15 → 1.6.9-beta.17

package/index.js

@@ -2854,181 +2854,205 @@ function _catch(body, recover) {
 	return result;
 }
 
-var currentVersion = 1;
-var _setDataToDB = function setDataToDB(dbName, storeName, data, keyPath) {
-  if (!('indexedDB' in window)) {
-    log.info("This browser doesn't support IndexedDB");
-  } else {
-    var openRequest = indexedDB.open(dbName, currentVersion);
-    openRequest.onupgradeneeded = function (event) {
-      var db = openRequest.result;
-      var transaction = event.target.transaction;
-      addData(db, storeName, keyPath, data, transaction);
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer(true, e);
+	}
+	if (result && result.then) {
+		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+	}
+	return finalizer(false, result);
+}
+
+var openDatabase = function openDatabase(dbName) {
+  return new Promise(function (resolve, reject) {
+    var request = indexedDB.open(dbName);
+    request.onsuccess = function () {
+      return resolve(request.result);
     };
-    openRequest.onerror = function () {
-      log.error('Indexeddb Error ', openRequest.error);
+    request.onerror = function () {
+      return reject(request.error);
     };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
+  });
+};
+var runUpgrade = function runUpgrade(dbName, onUpgrade) {
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
+      var nextVersion = db.version + 1;
+      db.close();
+      return new Promise(function (resolve, reject) {
+        var request = indexedDB.open(dbName, nextVersion);
+        request.onupgradeneeded = function () {
+          var upgradeDb = request.result;
+          onUpgrade(upgradeDb);
+        };
+        request.onsuccess = function () {
+          return resolve(request.result);
+        };
+        request.onerror = function () {
+          return reject(request.error);
+        };
+        request.onblocked = function () {
+          log.warn('IndexedDB upgrade blocked; close other tabs to proceed');
+        };
+      });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var ensureStore = function ensureStore(dbName, storeName, keyPath) {
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
       if (db.objectStoreNames.contains(storeName)) {
-        addData(db, storeName, keyPath, data);
-      } else {
-        db.close();
-        currentVersion++;
-        _setDataToDB(dbName, storeName, data, keyPath);
+        return db;
       }
-      db.onversionchange = function () {
-        db.close();
-      };
-    };
-    openRequest.onblocked = function () {};
+      db.close();
+      return Promise.resolve(runUpgrade(dbName, function (upgradeDb) {
+        if (!upgradeDb.objectStoreNames.contains(storeName)) {
+          upgradeDb.createObjectStore(storeName, {
+            keyPath: keyPath
+          });
+        }
+      }));
+    });
+  } catch (e) {
+    return Promise.reject(e);
   }
 };
-var _getDataFromDB = function getDataFromDB(dbName, storeName, keyPath, keyPatName) {
+var awaitTransaction = function awaitTransaction(tx) {
   return new Promise(function (resolve, reject) {
-    var openRequest = indexedDB.open(dbName, currentVersion);
-    openRequest.onupgradeneeded = function (event) {
-      var db = event.target.result;
-      var transaction = event.target.transaction;
-      if (db.objectStoreNames.contains(storeName)) {
-        var objectStore = transaction.objectStore(storeName);
-        var request = objectStore.get(keyPath);
-        request.onsuccess = function (event) {
-          var result = event.target.result;
-          resolve(result || '');
-        };
-        request.onerror = function (event) {
-          log.error('Error retrieving data during upgrade: ', event.target.error);
-          resolve('');
-        };
-      } else {
-        db.createObjectStore(storeName, {
-          keyPath: keyPatName
-        });
-        resolve('');
-      }
+    tx.oncomplete = function () {
+      return resolve();
     };
-    openRequest.onerror = function (event) {
-      if (event.target.error.name === 'VersionError') {
-        currentVersion++;
-        resolve(_getDataFromDB(dbName, storeName, keyPath));
-      } else {
-        reject(event);
-      }
+    tx.onerror = function () {
+      return reject(tx.error);
     };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
-      if (db.objectStoreNames.contains(storeName)) {
-        var transaction = db.transaction(storeName, 'readonly');
-        var objectStore = transaction.objectStore(storeName);
-        var request = objectStore.get(keyPath);
-        request.onsuccess = function (event) {
-          var result = event.target.result;
-          if (result) {
-            db.close();
-            resolve(result);
-          } else {
-            log.info('No data found for the specified keyPathValue.');
-            db.close();
-            resolve('');
-          }
-        };
-        request.onerror = function (event) {
-          db.close();
-          log.error('Error retrieving data: ', event.target.error);
-        };
-      } else {
-        db.close();
-        resolve('');
-      }
+    tx.onabort = function () {
+      return reject(tx.error);
     };
   });
 };
-var addData = function addData(db, storeName, keyPath, data, transaction) {
-  if (!db.objectStoreNames.contains(storeName)) {
-    var objectStore = db.createObjectStore(storeName, {
-      keyPath: keyPath
-    });
-    data.forEach(function (value) {
-      var request = objectStore.put(value);
-      request.onsuccess = function () {
-        log.info('data added to db during upgrade.. ', request.result);
-      };
-      request.onerror = function () {
-        log.info('Error on put data to db during upgrade.. ', request.error);
-      };
-    });
-  } else {
-    if (transaction) {
-      var store = transaction.objectStore(storeName);
-      data.forEach(function (value) {
-        var request = store.put(value);
-        request.onsuccess = function () {
-          log.info('data added to db using existing transaction.. ', request.result);
-        };
-        request.onerror = function () {
-          log.info('Error on put data to db using existing transaction.. ', request.error);
-        };
+var putWithPossibleOutOfLineKey = function putWithPossibleOutOfLineKey(store, value, keyField) {
+  try {
+    if (store.keyPath !== null) {
+      store.put(value);
+      return;
+    }
+  } catch (e) {}
+  var explicitKey = value === null || value === void 0 ? void 0 : value[keyField];
+  if (explicitKey === undefined || explicitKey === null) {
+    throw new Error("IndexedDB put requires explicit key but value has no '" + keyField + "' field");
+  }
+  store.put(value, explicitKey);
+};
+var setDataToDB = function setDataToDB(dbName, storeName, data, keyPath) {
+  try {
+    if (!('indexedDB' in window)) {
+      log.info("This browser doesn't support IndexedDB");
+      return Promise.resolve();
+    }
+    return Promise.resolve(ensureStore(dbName, storeName, keyPath)).then(function (db) {
+      var _temp = _finallyRethrows(function () {
+        var tx = db.transaction(storeName, 'readwrite');
+        var store = tx.objectStore(storeName);
+        data.forEach(function (value) {
+          putWithPossibleOutOfLineKey(store, value, keyPath);
+        });
+        return Promise.resolve(awaitTransaction(tx)).then(function () {});
+      }, function (_wasThrown, _result) {
+        db.close();
+        if (_wasThrown) throw _result;
+        return _result;
       });
-    } else {
-      var newTransaction = db.transaction(storeName, 'readwrite');
-      var _store = newTransaction.objectStore(storeName);
-      data.forEach(function (value) {
-        var request = _store.put(value);
-        request.onsuccess = function () {
-          log.info('data added to db.. ', request.result);
-        };
-        request.onerror = function () {
-          log.info('Error on put channel to db .. ', request.error);
-        };
+      if (_temp && _temp.then) return _temp.then(function () {});
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var getDataFromDB = function getDataFromDB(dbName, storeName, keyPathValue, keyPathName) {
+  try {
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(openDatabase(dbName)).then(function (db) {
+        var _exit = false;
+        function _temp5(_result2) {
+          if (_exit) return _result2;
+          var tx = db.transaction(storeName, 'readonly');
+          var objectStore = tx.objectStore(storeName);
+          return Promise.resolve(new Promise(function (resolve, reject) {
+            var request = objectStore.get(keyPathValue);
+            request.onsuccess = function () {
+              return resolve(request.result);
+            };
+            request.onerror = function () {
+              return reject(request.error);
+            };
+          })).then(function (result) {
+            db.close();
+            return result || '';
+          });
+        }
+        var _temp4 = function () {
+          if (!db.objectStoreNames.contains(storeName)) {
+            var _temp3 = function _temp3() {
+              _exit = true;
+              return '';
+            };
+            db.close();
+            var _temp2 = function () {
+              if (keyPathName) {
+                return Promise.resolve(ensureStore(dbName, storeName, keyPathName)).then(function (upgraded) {
+                  upgraded.close();
+                });
+              }
+            }();
+            return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
+          }
+        }();
+        return _temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4);
       });
-    }
+    }, function (error) {
+      log.error('Error retrieving data: ', error);
+      return '';
+    }));
+  } catch (e) {
+    return Promise.reject(e);
   }
 };
 var getAllStoreNames = function getAllStoreNames(dbName) {
-  return new Promise(function (resolve, reject) {
-    var openRequest = indexedDB.open(dbName, currentVersion);
-    openRequest.onupgradeneeded = function (event) {
-      var db = event.target.result;
-      resolve(Array.from(db.objectStoreNames));
-    };
-    openRequest.onerror = function () {
-      log.error('Indexeddb Error ', openRequest.error);
-      reject(openRequest.error);
-    };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
       try {
-        var storeNames = Array.from(db.objectStoreNames);
-        db.close();
-        resolve(storeNames);
-      } catch (error) {
+        return Array.from(db.objectStoreNames);
+      } finally {
         db.close();
-        reject(error);
       }
-    };
-  });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
 var deleteStore = function deleteStore(dbName, storeName) {
-  return new Promise(function (resolve, reject) {
-    var openRequest = indexedDB.open(dbName, currentVersion + 1);
-    openRequest.onupgradeneeded = function (event) {
-      var db = event.target.result;
-      if (db.objectStoreNames.contains(storeName)) {
-        db.deleteObjectStore(storeName);
-        currentVersion++;
-      }
-    };
-    openRequest.onerror = function () {
-      log.error('Indexeddb Error ', openRequest.error);
-      reject(openRequest.error);
-    };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
+      var shouldDelete = db.objectStoreNames.contains(storeName);
       db.close();
-      resolve();
-    };
-  });
+      if (!shouldDelete) return;
+      return Promise.resolve(runUpgrade(dbName, function (upgradeDb) {
+        if (upgradeDb.objectStoreNames.contains(storeName)) {
+          upgradeDb.deleteObjectStore(storeName);
+        }
+      })).then(function (upgraded) {
+        upgraded.close();
+      });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
 
 var METADATA_DB_NAME = 'sceyt-metadata-db';
@@ -3051,7 +3075,7 @@ var storeMetadata = function storeMetadata(url, metadata) {
       expiresAt: Date.now() + CACHE_DURATION
     });
     var _temp = _catch(function () {
-      return Promise.resolve(_setDataToDB(METADATA_DB_NAME, currentMonth, [metadataRecord], 'url')).then(function () {});
+      return Promise.resolve(setDataToDB(METADATA_DB_NAME, currentMonth, [metadataRecord], 'url')).then(function () {});
     }, function (error) {
       console.error('Failed to store metadata in IndexedDB:', error);
     });
@@ -3099,7 +3123,7 @@ var cleanupOldMonthsMetadata = function cleanupOldMonthsMetadata() {
 var getMetadata = function getMetadata(url) {
   return Promise.resolve(_catch(function () {
     var currentMonth = getCurrentMonthKey();
-    return Promise.resolve(_getDataFromDB(METADATA_DB_NAME, currentMonth, url, 'url')).then(function (result) {
+    return Promise.resolve(getDataFromDB(METADATA_DB_NAME, currentMonth, url, 'url')).then(function (result) {
       if (!result || typeof result === 'string') {
         return null;
       }
@@ -10937,11 +10961,11 @@ var defaultTheme = {
     light: '#D9D9DF',
     dark: '#303032'
   }, _colors[THEME_COLORS.OVERLAY_BACKGROUND] = {
-    light: 'rgba(0, 0, 0, 0.5)',
-    dark: 'rgba(0, 0, 0, 0.5)'
+    light: '#111539',
+    dark: '#111539'
   }, _colors[THEME_COLORS.OVERLAY_BACKGROUND_2] = {
-    light: 'rgba(17, 21, 57, 0.4)',
-    dark: 'rgba(17, 21, 57, 0.4)'
+    light: '#111539',
+    dark: '#111539'
   }, _colors[THEME_COLORS.WARNING] = {
     light: '#FA4C56',
     dark: '#FA4C56'
@@ -11267,11 +11291,12 @@ var sendTypingAC = function sendTypingAC(state) {
     }
   };
 };
-var sendRecordingAC = function sendRecordingAC(state) {
+var sendRecordingAC = function sendRecordingAC(state, channelId) {
   return {
     type: SEND_RECORDING,
     payload: {
-      state: state
+      state: state,
+      channelId: channelId
     }
   };
 };
@@ -12897,7 +12922,7 @@ var UploadPercent = styled__default.span(_templateObject38 || (_templateObject38
 }, function (props) {
   return props.fileAttachment || props.isRepliedMessage || props.isDetailsView ? '40px' : '56px';
 }, function (props) {
-  return props.backgroundColor + "40";
+  return props.backgroundColor + "66";
 }, function (props) {
   return props.borderRadius ? props.borderRadius : props.fileAttachment ? '8px' : props.isRepliedMessage ? '4px' : ' 50%';
 }, function (props) {
@@ -16218,47 +16243,43 @@ function sendTyping(action) {
   }, _marked22, null, [[3, 7]]);
 }
 function sendRecording(action) {
-  var state, activeChannelId, channel, _t24;
+  var _action$payload, state, channelId, channel, _t24;
   return _regenerator().w(function (_context23) {
     while (1) switch (_context23.p = _context23.n) {
       case 0:
-        state = action.payload.state;
+        _action$payload = action.payload, state = _action$payload.state, channelId = _action$payload.channelId;
         _context23.n = 1;
-        return effects.call(getActiveChannelId);
+        return effects.call(getChannelFromMap, channelId);
       case 1:
-        activeChannelId = _context23.v;
-        _context23.n = 2;
-        return effects.call(getChannelFromMap, activeChannelId);
-      case 2:
         channel = _context23.v;
-        _context23.p = 3;
+        _context23.p = 2;
         if (!channel) {
-          _context23.n = 6;
+          _context23.n = 5;
           break;
         }
         if (!state) {
-          _context23.n = 5;
+          _context23.n = 4;
           break;
         }
-        _context23.n = 4;
+        _context23.n = 3;
         return effects.call(channel.startRecording);
-      case 4:
-        _context23.n = 6;
+      case 3:
+        _context23.n = 5;
         break;
-      case 5:
-        _context23.n = 6;
+      case 4:
+        _context23.n = 5;
         return effects.call(channel.stopRecording);
-      case 6:
-        _context23.n = 8;
+      case 5:
+        _context23.n = 7;
         break;
-      case 7:
-        _context23.p = 7;
+      case 6:
+        _context23.p = 6;
         _t24 = _context23.v;
         log.error('ERROR in send recording', _t24);
-      case 8:
+      case 7:
         return _context23.a(2);
     }
-  }, _marked23, null, [[3, 7]]);
+  }, _marked23, null, [[2, 6]]);
 }
 function clearHistory(action) {
   var payload, channelId, channel, activeChannelId, groupName, _t25;
@@ -17239,7 +17260,7 @@ function sendMessage(action) {
                     } else {
                       var pendingAttachment = getPendingAttachment(attachment.tid);
                       if (!attachment.cachedUrl) {
-                        _setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, updatedAttachment, {
+                        setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, updatedAttachment, {
                           checksum: pendingAttachment.checksum
                         })], 'checksum');
                       }
@@ -17397,7 +17418,7 @@ function sendMessage(action) {
                 });
                 pendingAttachment = getPendingAttachment(messageAttachment[k].tid);
                 if (!messageAttachment[k].cachedUrl) {
-                  _setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, messageResponse.attachments[k], {
+                  setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, messageResponse.attachments[k], {
                     checksum: pendingAttachment.checksum || (pendingAttachment === null || pendingAttachment === void 0 ? void 0 : pendingAttachment.file)
                   })], 'checksum');
                 }
@@ -18315,23 +18336,22 @@ function getMessagesQuery(action) {
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
-        log.info('getMessagesQuery ... ');
-        _context9.p = 1;
-        _context9.n = 2;
+        _context9.p = 0;
+        _context9.n = 1;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
-      case 2:
+      case 1:
         _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight;
         if (!(channel.id && !channel.isMockChannel)) {
-          _context9.n = 49;
+          _context9.n = 47;
           break;
         }
         SceytChatClient = getClient();
         messageQueryBuilder = new SceytChatClient.MessageListQueryBuilder(channel.id);
         messageQueryBuilder.limit(limit || MESSAGES_MAX_LENGTH);
         messageQueryBuilder.reverse(true);
-        _context9.n = 3;
+        _context9.n = 2;
         return effects.call(messageQueryBuilder.build);
-      case 3:
+      case 2:
         messageQuery = _context9.v;
         query.messageQuery = messageQuery;
         cachedMessages = getMessagesFromMap(channel.id);
@@ -18340,33 +18360,33 @@ function getMessagesQuery(action) {
           hasNext: false
         };
         if (!loadWithLastMessage) {
-          _context9.n = 15;
+          _context9.n = 13;
           break;
         }
         allMessages = getAllMessages();
         havLastMessage = allMessages && allMessages.length && channel.lastMessage && allMessages[allMessages.length - 1] && allMessages[allMessages.length - 1].id === channel.lastMessage.id;
         if (!(channel.newMessageCount && channel.newMessageCount > 0 || !havLastMessage)) {
-          _context9.n = 10;
+          _context9.n = 8;
           break;
         }
         setHasPrevCached(false);
         setAllMessages([]);
-        _context9.n = 4;
+        _context9.n = 3;
         return effects.call(messageQuery.loadPreviousMessageId, '0');
-      case 4:
+      case 3:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 6;
+          _context9.n = 5;
           break;
         }
         messageQuery.limit = 30;
-        _context9.n = 5;
+        _context9.n = 4;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 5:
+      case 4:
         secondResult = _context9.v;
         result.messages = [].concat(secondResult.messages, result.messages);
         result.hasNext = secondResult.hasNext;
-      case 6:
+      case 5:
         sentMessages = [];
         if (withDeliveredMessages) {
           sentMessages = getFromAllMessagesByMessageId('', '', true);
@@ -18379,43 +18399,40 @@ function getMessagesQuery(action) {
           return !messagesMap[msg.tid || ''];
         });
         result.messages = [].concat(result.messages, filteredSentMessages).slice(filteredSentMessages.length);
-        _context9.n = 7;
+        _context9.n = 6;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 7:
+      case 6:
         setMessagesToMap(channel.id, result.messages);
         setAllMessages(result.messages);
-        _context9.n = 8;
+        _context9.n = 7;
         return effects.put(setMessagesHasPrevAC(true));
+      case 7:
+        _context9.n = 10;
+        break;
       case 8:
+        result.messages = getFromAllMessagesByMessageId('', '', true);
         _context9.n = 9;
-        return effects.put(markChannelAsReadAC(channel.id));
+        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 9:
-        _context9.n = 12;
-        break;
+        _context9.n = 10;
+        return effects.put(setMessagesHasPrevAC(true));
       case 10:
-        result.messages = getFromAllMessagesByMessageId('', '', true);
         _context9.n = 11;
-        return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 11:
-        _context9.n = 12;
-        return effects.put(setMessagesHasPrevAC(true));
-      case 12:
-        _context9.n = 13;
         return effects.put(setMessagesHasNextAC(false));
-      case 13:
+      case 11:
         setHasNextCached(false);
         if (!messageId) {
-          _context9.n = 14;
+          _context9.n = 12;
           break;
         }
-        _context9.n = 14;
+        _context9.n = 12;
         return effects.put(setScrollToMessagesAC(messageId, highlight));
-      case 14:
-        _context9.n = 46;
+      case 12:
+        _context9.n = 44;
         break;
-      case 15:
+      case 13:
         if (!messageId) {
-          _context9.n = 27;
+          _context9.n = 25;
           break;
         }
         _allMessages = getAllMessages();
@@ -18424,160 +18441,160 @@ function getMessagesQuery(action) {
         });
         maxLengthPart = MESSAGES_MAX_LENGTH / 2;
         if (!(messageIndex >= maxLengthPart)) {
-          _context9.n = 17;
+          _context9.n = 15;
           break;
         }
         result.messages = _allMessages.slice(messageIndex - maxLengthPart, messageIndex + maxLengthPart);
-        _context9.n = 16;
+        _context9.n = 14;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 16:
+      case 14:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
-        _context9.n = 24;
+        _context9.n = 22;
         break;
-      case 17:
+      case 15:
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         log.info('load by message id from server ...............', messageId);
-        _context9.n = 18;
+        _context9.n = 16;
         return effects.call(messageQuery.loadNearMessageId, messageId);
-      case 18:
+      case 16:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 21;
+          _context9.n = 19;
           break;
         }
         messageQuery.limit = (MESSAGES_MAX_LENGTH - 50) / 2;
-        _context9.n = 19;
+        _context9.n = 17;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 19:
+      case 17:
         _secondResult = _context9.v;
         messageQuery.reverse = false;
-        _context9.n = 20;
+        _context9.n = 18;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 20:
+      case 18:
         thirdResult = _context9.v;
         result.messages = [].concat(_secondResult.messages, result.messages, thirdResult.messages);
         result.hasNext = _secondResult.hasNext;
         messageQuery.reverse = true;
-      case 21:
+      case 19:
         log.info('result from server ....... ', result);
-        _context9.n = 22;
+        _context9.n = 20;
         return effects.put(setMessagesHasNextAC(true));
-      case 22:
-        _context9.n = 23;
+      case 20:
+        _context9.n = 21;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 23:
+      case 21:
         setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
-      case 24:
-        _context9.n = 25;
+      case 22:
+        _context9.n = 23;
         return effects.put(setScrollToMessagesAC(messageId));
-      case 25:
-        _context9.n = 26;
+      case 23:
+        _context9.n = 24;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 26:
-        _context9.n = 46;
+      case 24:
+        _context9.n = 44;
         break;
-      case 27:
+      case 25:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
-          _context9.n = 40;
+          _context9.n = 38;
           break;
         }
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context9.n = 33;
+          _context9.n = 31;
           break;
         }
-        _context9.n = 28;
+        _context9.n = 26;
         return effects.call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 28:
+      case 26:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 32;
+          _context9.n = 30;
           break;
         }
         messageQuery.limit = channel.newMessageCount > 25 ? (MESSAGES_MAX_LENGTH - 50) / 2 : MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 29;
+        _context9.n = 27;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 29:
+      case 27:
         _secondResult2 = _context9.v;
         if (!(channel.newMessageCount > 25)) {
-          _context9.n = 31;
+          _context9.n = 29;
           break;
         }
         messageQuery.reverse = false;
-        _context9.n = 30;
+        _context9.n = 28;
         return effects.call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 30:
+      case 28:
         _thirdResult = _context9.v;
         result.messages = [].concat(_secondResult2.messages, result.messages, _thirdResult.messages);
         messageQuery.reverse = true;
-        _context9.n = 32;
+        _context9.n = 30;
         break;
-      case 31:
+      case 29:
         result.messages = [].concat(_secondResult2.messages, result.messages);
-      case 32:
-        _context9.n = 36;
-        break;
-      case 33:
+      case 30:
         _context9.n = 34;
+        break;
+      case 31:
+        _context9.n = 32;
         return effects.call(messageQuery.loadPrevious);
-      case 34:
+      case 32:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 36;
+          _context9.n = 34;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 35;
+        _context9.n = 33;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 35:
+      case 33:
         _secondResult3 = _context9.v;
         result.messages = [].concat(_secondResult3.messages, result.messages);
         result.hasNext = _secondResult3.hasNext;
-      case 36:
+      case 34:
         setMessagesToMap(channel.id, result.messages);
-        _context9.n = 37;
+        _context9.n = 35;
         return effects.put(setMessagesHasPrevAC(true));
-      case 37:
-        _context9.n = 38;
+      case 35:
+        _context9.n = 36;
         return effects.put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
-      case 38:
+      case 36:
         setAllMessages([].concat(result.messages));
-        _context9.n = 39;
+        _context9.n = 37;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 39:
-        _context9.n = 46;
+      case 37:
+        _context9.n = 44;
         break;
-      case 40:
+      case 38:
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
-          _context9.n = 41;
+          _context9.n = 39;
           break;
         }
         setAllMessages([].concat(cachedMessages));
-        _context9.n = 41;
+        _context9.n = 39;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 41:
+      case 39:
         log.info('load message from server');
-        _context9.n = 42;
+        _context9.n = 40;
         return effects.call(messageQuery.loadPrevious);
-      case 42:
+      case 40:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 44;
+          _context9.n = 42;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 43;
+        _context9.n = 41;
         return effects.call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 43:
+      case 41:
         _secondResult4 = _context9.v;
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
-      case 44:
+      case 42:
         result.messages.forEach(function (msg) {
           updateMessageOnMap(channel.id, {
             messageId: msg.id,
@@ -18585,15 +18602,15 @@ function getMessagesQuery(action) {
           });
           updateMessageOnAllMessages(msg.id, msg);
         });
-        _context9.n = 45;
+        _context9.n = 43;
         return effects.put(setMessagesHasPrevAC(result.hasNext));
-      case 45:
-        _context9.n = 46;
+      case 43:
+        _context9.n = 44;
         return effects.put(setMessagesHasNextAC(false));
-      case 46:
+      case 44:
         pendingMessages = getPendingMessages(channel.id);
         if (!(pendingMessages && pendingMessages.length)) {
-          _context9.n = 48;
+          _context9.n = 46;
           break;
         }
         _messagesMap = {};
@@ -18603,40 +18620,40 @@ function getMessagesQuery(action) {
         filteredPendingMessages = pendingMessages.filter(function (msg) {
           return !_messagesMap[msg.tid || ''];
         });
-        _context9.n = 47;
+        _context9.n = 45;
         return effects.put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
-      case 47:
+      case 45:
         for (index = 0; index < filteredPendingMessages.length; index++) {
           mes = filteredPendingMessages[index];
           removePendingMessageFromMap(channel === null || channel === void 0 ? void 0 : channel.id, mes.tid || mes.id);
         }
-      case 48:
-        _context9.n = 50;
+      case 46:
+        _context9.n = 48;
         break;
-      case 49:
+      case 47:
         if (!channel.isMockChannel) {
-          _context9.n = 50;
+          _context9.n = 48;
           break;
         }
-        _context9.n = 50;
+        _context9.n = 48;
         return effects.put(setMessagesAC([]));
-      case 50:
-        _context9.n = 52;
+      case 48:
+        _context9.n = 50;
         break;
-      case 51:
-        _context9.p = 51;
+      case 49:
+        _context9.p = 49;
         _t9 = _context9.v;
         log.error('error in message query', _t9);
-      case 52:
-        _context9.p = 52;
-        _context9.n = 53;
+      case 50:
+        _context9.p = 50;
+        _context9.n = 51;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 53:
-        return _context9.f(52);
-      case 54:
+      case 51:
+        return _context9.f(50);
+      case 52:
         return _context9.a(2);
     }
-  }, _marked7$1, null, [[1, 51, 52, 54]]);
+  }, _marked7$1, null, [[0, 49, 50, 52]]);
 }
 function loadMoreMessages(action) {
   var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result, _t0;
@@ -21014,15 +21031,15 @@ var Channel = function Channel(_ref3) {
       items: filteredItems,
       isTyping: !!filteredItems.find(function (item) {
         return item.typingState;
+      }),
+      isRecording: !!filteredItems.find(function (item) {
+        return item.recordingState;
       })
     };
   }, [typingOrRecordingIndicator]);
-  var isTypingOrRecording = React.useMemo(function () {
-    return typingOrRecording.items.length > 0;
-  }, [typingOrRecording]);
   var MessageText = React.useMemo(function () {
     return /*#__PURE__*/React__default.createElement(ChannelMessageText, {
-      isTypingOrRecording: isTypingOrRecording,
+      isTypingOrRecording: (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording),
       user: user,
       contactsMap: contactsMap,
       getFromContacts: getFromContacts,
@@ -21036,7 +21053,7 @@ var Channel = function Channel(_ref3) {
       lastMessage: lastMessage,
       isDirectChannel: isDirectChannel
     });
-  }, [isTypingOrRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel]);
+  }, [typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping, typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel]);
   return /*#__PURE__*/React__default.createElement(Container$2, {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
@@ -21079,9 +21096,9 @@ var Channel = function Channel(_ref3) {
     unreadMentions: !!(channel.newMentionCount && channel.newMentionCount > 0),
     fontSize: channelLastMessageFontSize,
     height: channelLastMessageHeight
-  }, isTypingOrRecording ? !isDirectChannel ? (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
+  }, typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping || typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording ? !isDirectChannel ? (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
     typing: typingOrRecording.isTyping,
-    recording: !typingOrRecording.isTyping,
+    recording: typingOrRecording.isRecording,
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
@@ -21099,11 +21116,11 @@ var Channel = function Channel(_ref3) {
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
-  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !isTypingOrRecording && (isDirectChannel ? !isTypingOrRecording && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : isTypingOrRecording && draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
+  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : ((typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording)) && draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
     color: draftMessageText && warningColor || textPrimary
   }, ": ")), /*#__PURE__*/React__default.createElement(LastMessageText, {
     color: textSecondary,
-    withAttachments: !!(lastMessage && lastMessage.attachments && lastMessage.attachments.length && lastMessage.attachments[0].type !== attachmentTypes.link) && !isTypingOrRecording,
+    withAttachments: !!(lastMessage && lastMessage.attachments && lastMessage.attachments.length && lastMessage.attachments[0].type !== attachmentTypes.link) && (!(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) || !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording)),
     noBody: lastMessage && !lastMessage.body,
     deletedMessage: lastMessage && lastMessage.state === MESSAGE_STATUS.DELETE
   }, MessageText)))), /*#__PURE__*/React__default.createElement(ChannelStatus, {
@@ -21619,7 +21636,7 @@ var Container$4 = styled__default.div(_templateObject$8 || (_templateObject$8 =
 }, function (props) {
   return props.height ? props.height + "px" : '0px';
 }, function (props) {
-  return props.background + "40";
+  return props.background + "66";
 });
 
 var _templateObject$9, _templateObject2$8, _templateObject3$5, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject0$2, _templateObject1$2;
@@ -24063,7 +24080,7 @@ var Container$a = styled__default.div(_templateObject$j || (_templateObject$j =
 }, function (props) {
   return props.dateDividerTextColor;
 }, function (props) {
-  return props.dateDividerBackgroundColor + "40";
+  return props.dateDividerBackgroundColor + "66";
 }, function (props) {
   return props.dateDividerBorderRadius || '14px';
 }, function (props) {
@@ -24699,7 +24716,7 @@ var VolumeSlide = styled__default.input(_templateObject9$6 || (_templateObject9$
 var Progress = styled__default.input(_templateObject0$5 || (_templateObject0$5 = _taggedTemplateLiteralLoose(["\n  -webkit-appearance: none;\n  margin-right: 15px;\n  width: 100%;\n  height: 4px;\n  background: rgba(255, 255, 255, 0.6);\n  border-radius: 5px;\n  background-image: linear-gradient(#fff, #fff);\n  //background-size: 70% 100%;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 0 2px 0 #555;\n    transition: all 0.3s ease-in-out;\n  }\n  &::-moz-range-thumb {\n    -webkit-appearance: none;\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 0 2px 0 #555;\n    transition: all 0.3s ease-in-out;\n  }\n\n  &::-ms-thumb {\n    -webkit-appearance: none;\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n    background: #fff;\n    cursor: pointer;\n    box-shadow: 0 0 2px 0 #555;\n    transition: all 0.3s ease-in-out;\n  }\n\n  &::-webkit-slider-thumb:hover {\n    background: #fff;\n  }\n  &::-moz-range-thumb:hover {\n    background: #fff;\n  }\n  &::-ms-thumb:hover {\n    background: #fff;\n  }\n\n  &::-webkit-slider-runnable-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n    transition: all 0.3s ease-in-out;\n  }\n\n  &::-moz-range-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n    transition: all 0.3s ease-in-out;\n  }\n  &::-ms-track {\n    -webkit-appearance: none;\n    box-shadow: none;\n    border: none;\n    background: transparent;\n    transition: all 0.3s ease-in-out;\n  }\n"])));
 var FullScreenWrapper = styled__default.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-left: 16px;\n  cursor: pointer;\n  @media (max-width: 768px) {\n    margin-left: 12px;\n    & > svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n  @media (max-width: 480px) {\n    margin-left: auto;\n    & > svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n"])));
 
-var _templateObject$l, _templateObject2$i, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject0$6;
+var _templateObject$l, _templateObject2$i, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject0$6, _templateObject1$4;
 function ForwardMessagePopup(_ref) {
   var title = _ref.title,
     buttonText = _ref.buttonText,
@@ -24949,7 +24966,9 @@ function ForwardMessagePopup(_ref) {
       backgroundColor: 'transparent',
       checkedBackgroundColor: accentColor
     }));
-  }))))) : channels.map(function (channel) {
+  }))), !searchedChannels.chats_groups.length && !searchedChannels.channels.length && (/*#__PURE__*/React__default.createElement(NoResults, {
+    color: textSecondary
+  }, "No channels found")))) : channels.map(function (channel) {
     var _channel$metadata3;
     var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
     var isSelfChannel = isDirectChannel && ((_channel$metadata3 = channel.metadata) === null || _channel$metadata3 === void 0 ? void 0 : _channel$metadata3.s);
@@ -25033,6 +25052,9 @@ var SelectedChannelName = styled__default.span(_templateObject9$7 || (_templateO
   return props.color;
 });
 var StyledSubtractSvg$1 = styled__default(SvgCross)(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-left: 4px;\n  transform: translate(2px, 0);\n"])));
+var NoResults = styled__default.div(_templateObject1$4 || (_templateObject1$4 = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  line-height: 16px;\n  font-weight: 500;\n  text-align: center;\n  margin-top: 20px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
 
 var _templateObject$m, _templateObject2$j;
 var CustomRadio = function CustomRadio(_ref) {
@@ -25206,7 +25228,7 @@ var DeleteOptionItem = styled__default.div(_templateObject2$k || (_templateObjec
   return props.color;
 });
 
-var _templateObject$o, _templateObject2$l, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$8, _templateObject9$8, _templateObject0$7, _templateObject1$4, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2;
+var _templateObject$o, _templateObject2$l, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$8, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2;
 var SliderPopup = function SliderPopup(_ref) {
   var channel = _ref.channel,
     setIsSliderOpen = _ref.setIsSliderOpen,
@@ -25593,7 +25615,7 @@ var SliderPopup = function SliderPopup(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -25747,7 +25769,7 @@ var FileSize = styled__default.span(_templateObject9$8 || (_templateObject9$8 =
 var UserName = styled__default.h4(_templateObject0$7 || (_templateObject0$7 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n"])), function (props) {
   return props.color;
 });
-var ActionsWrapper = styled__default.div(_templateObject1$4 || (_templateObject1$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var ActionsWrapper = styled__default.div(_templateObject1$5 || (_templateObject1$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var IconWrapper = styled__default.span(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  color: ", ";\n  margin: ", ";\n\n  & > svg {\n    width: 28px;\n    height: 28px;\n  }\n\n  ", "\n"])), function (props) {
   return props.color;
 }, function (props) {
@@ -25848,7 +25870,7 @@ var Container$c = styled__default.div(_templateObject$p || (_templateObject$p =
 }, function (props) {
   return props.textColor;
 }, function (props) {
-  return props.backgroundColor + "40";
+  return props.backgroundColor + "66";
 }, function (props) {
   return props.border;
 }, function (props) {
@@ -26896,7 +26918,7 @@ var VideoTime = styled__default.div(_templateObject2$o || (_templateObject2$o =
 }, function (props) {
   return props.isRepliedMessage ? '0 3px' : '4px 6px';
 }, function (props) {
-  return props.messageTimeBackgroundColor + "40";
+  return props.messageTimeBackgroundColor + "66";
 }, function (props) {
   return props.color;
 }, function (props) {
@@ -29092,7 +29114,7 @@ var Timer$1 = styled__default.div(_templateObject6$c || (_templateObject6$c = _t
   return props.color;
 });
 
-var _templateObject$u, _templateObject2$q, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$a, _templateObject9$a, _templateObject0$9, _templateObject1$5, _templateObject10$3, _templateObject11$3;
+var _templateObject$u, _templateObject2$q, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$a, _templateObject9$a, _templateObject0$9, _templateObject1$6, _templateObject10$3, _templateObject11$3;
 var Attachment = function Attachment(_ref) {
   var attachment = _ref.attachment,
     _ref$isPreview = _ref.isPreview,
@@ -29510,7 +29532,7 @@ var Attachment = function Attachment(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -29560,7 +29582,7 @@ var Attachment = function Attachment(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -29667,7 +29689,7 @@ var Attachment = function Attachment(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -29759,7 +29781,7 @@ var AttachmentSize = styled__default.span(_templateObject0$9 || (_templateObject
 }, function (props) {
   return props.errorColor;
 });
-var AttachmentFileInfo = styled__default.div(_templateObject1$5 || (_templateObject1$5 = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  ", "\n"])), function (props) {
+var AttachmentFileInfo = styled__default.div(_templateObject1$6 || (_templateObject1$6 = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  ", "\n"])), function (props) {
   return props.isPreview && "line-height: 14px;\n      max-width: calc(100% - 44px);\n  ";
 });
 var AttachmentImg$1 = styled__default.img(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  object-fit: cover;\n  visibility: ", ";\n  z-index: 2;\n"])), function (props) {
@@ -30839,7 +30861,7 @@ var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
   }))));
 };
 var MessageStatusAndTime$1 = /*#__PURE__*/React__default.memo(MessageStatusAndTime, function (prevProps, nextProps) {
-  return prevProps.message.state === nextProps.message.state && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.createdAt === nextProps.message.createdAt && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageTimeVisible === nextProps.messageTimeVisible && prevProps.messageStatusVisible === nextProps.messageStatusVisible && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.bottomOfMessage === nextProps.bottomOfMessage && prevProps.marginBottom === nextProps.marginBottom && prevProps.messageTimeColorOnAttachment === nextProps.messageTimeColorOnAttachment;
+  return prevProps.message.state === nextProps.message.state && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.createdAt === nextProps.message.createdAt && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageTimeVisible === nextProps.messageTimeVisible && prevProps.messageStatusVisible === nextProps.messageStatusVisible && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.bottomOfMessage === nextProps.bottomOfMessage && prevProps.marginBottom === nextProps.marginBottom && prevProps.messageTimeColorOnAttachment === nextProps.messageTimeColorOnAttachment && prevProps.withAttachment === nextProps.withAttachment;
 });
 var MessageStatus = styled__default.span(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.height || '14px';
@@ -30858,7 +30880,7 @@ var MessageStatusAndTimeContainer = styled__default.span(_templateObject3$o || (
 }, function (props) {
   return props.withAttachment && '4px 6px';
 }, function (props) {
-  return props.withAttachment && !props.fileAttachment && props.messageTimeBackgroundColor + "40";
+  return props.withAttachment && !props.fileAttachment && props.messageTimeBackgroundColor + "66";
 }, function (props) {
   return props.lineHeight || '14px';
 }, function (props) {
@@ -30914,7 +30936,7 @@ var OGMetadata = function OGMetadata(_ref) {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
               return Promise.resolve(query.loadOGData()).then(function (metadata) {
-                return Promise.resolve(storeMetadata(url.replace('https://', ''), metadata)).then(function () {
+                return Promise.resolve(storeMetadata(url.replace('https://', '').replace('http://', ''), metadata)).then(function () {
                   setMetadata(metadata);
                 });
               });
@@ -30936,7 +30958,7 @@ var OGMetadata = function OGMetadata(_ref) {
     if (attachment !== null && attachment !== void 0 && attachment.id && !metadata) {
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
-        getMetadata(url.replace('https://', '')).then(function (cachedMetadata) {
+        getMetadata(url.replace('https://', '').replace('http://', '')).then(function (cachedMetadata) {
           try {
             if (cachedMetadata) {
               setMetadata(cachedMetadata);
@@ -31504,7 +31526,7 @@ var FrequentlyEmojisContainer = styled__default.div(_templateObject5$i || (_temp
   return props.rtlDirection && '0';
 });
 
-var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$j, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$3;
+var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$j, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7, _templateObject10$4, _templateObject11$4, _templateObject12$3;
 var Message$1 = function Message(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -31833,7 +31855,6 @@ var Message$1 = function Message(_ref) {
     if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
       return marker.name === MESSAGE_DELIVERY_STATUS.READ;
     })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      log.info('send displayed marker for message ... ', message);
       dispatch(markMessagesAsReadAC(channel.id, [message.id]));
     }
   };
@@ -32282,7 +32303,7 @@ var ReactionsContainer = styled__default.div(_templateObject9$b || (_templateObj
 var MessageReactionsCont = styled__default.div(_templateObject0$a || (_templateObject0$a = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  max-width: 300px;\n  direction: ", ";\n  cursor: pointer;\n"])), function (props) {
   return props.rtlDirection && 'ltr';
 });
-var MessageStatus$1 = styled__default.span(_templateObject1$6 || (_templateObject1$6 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
+var MessageStatus$1 = styled__default.span(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.height || '14px';
 });
 var HiddenMessageTime$1 = styled__default.span(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
@@ -32327,7 +32348,7 @@ var HiddenMessageProperty;
   HiddenMessageProperty["hideAfterSendMessage"] = "hideAfterSendMessage";
 })(HiddenMessageProperty || (HiddenMessageProperty = {}));
 
-var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$7;
+var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8;
 var loadFromServer = false;
 var loadDirection = '';
 var nextDisable = false;
@@ -33337,7 +33358,7 @@ var MessageTopDate = styled__default.div(_templateObject4$o || (_templateObject4
 }, function (props) {
   return props.dateDividerTextColor;
 }, function (props) {
-  return props.dateDividerBackgroundColor + "40";
+  return props.dateDividerBackgroundColor + "66";
 }, function (props) {
   return props.dateDividerBorder;
 }, function (props) {
@@ -33377,7 +33398,7 @@ var NoMessagesContainer = styled__default.div(_templateObject9$c || (_templateOb
 var NoMessagesTitle = styled__default.h4(_templateObject0$b || (_templateObject0$b = _taggedTemplateLiteralLoose(["\n  margin: 12px 0 8px;\n  font-family: Inter, sans-serif;\n  text-align: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var NoMessagesText = styled__default.p(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesText = styled__default.p(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
@@ -35381,19 +35402,19 @@ var AudioRecord = function AudioRecord(_ref) {
   }, [currentRecordedFile]);
   var dispatch = reactRedux.useDispatch();
   var handleStartRecording = function handleStartRecording() {
-    dispatch(sendRecordingAC(true));
+    dispatch(sendRecordingAC(true, currentChannelId));
     if (sendingInterval) {
       clearInterval(sendingInterval);
       setSendingInterval(null);
       return;
     }
     var interval = setInterval(function () {
-      dispatch(sendRecordingAC(true));
+      dispatch(sendRecordingAC(true, currentChannelId));
     }, 1000);
     setSendingInterval(interval);
   };
   var handleStopRecording = function handleStopRecording() {
-    dispatch(sendRecordingAC(false));
+    dispatch(sendRecordingAC(false, currentChannelId));
     if (sendingInterval) {
       clearInterval(sendingInterval);
       setSendingInterval(null);
@@ -35547,10 +35568,9 @@ var AudioRecord = function AudioRecord(_ref) {
       return Promise.resolve(_catch(function () {
         var _wavesurfer$current3;
         function _temp3(_result3) {
+          var _wavesurfer$current$i, _wavesurfer$current$i2;
           if (_exit) return _result3;
-          if (draft) {
-            return;
-          }
+          setCurrentTime(((_wavesurfer$current$i = wavesurfer.current[id]) === null || _wavesurfer$current$i === void 0 ? void 0 : (_wavesurfer$current$i2 = _wavesurfer$current$i.decodedData) === null || _wavesurfer$current$i2 === void 0 ? void 0 : _wavesurfer$current$i2.duration) || 0);
           wavesurfer.current[id].on('ready', function () {
             setRecordingIsReadyToPlay(true);
             var audioDuration = wavesurfer.current[id].getDuration();
@@ -35662,7 +35682,6 @@ var AudioRecord = function AudioRecord(_ref) {
     recorder.stop().getMp3().then(function (_ref4) {
       var buffer = _ref4[0],
         blob = _ref4[1];
-      setCurrentTime(0);
       var file = new File(buffer, 'record.mp3', {
         type: blob.type,
         lastModified: Date.now()
@@ -35728,15 +35747,12 @@ var AudioRecord = function AudioRecord(_ref) {
     if ((_wavesurfer$current5 = wavesurfer.current) !== null && _wavesurfer$current5 !== void 0 && _wavesurfer$current5[cId || currentChannelId]) {
       if (!wavesurfer.current[cId || currentChannelId].isPlaying()) {
         setPlayAudio(true);
-        handleStartRecording();
         intervalRef.current[cId || currentChannelId] = setInterval(function () {
           var currentTime = wavesurfer.current[cId || currentChannelId].getCurrentTime();
           if (currentTime >= 0) {
             setCurrentTime(currentTime);
           }
         }, 10);
-      } else {
-        handleStopRecording();
       }
       wavesurfer.current[cId || currentChannelId].playPause();
     }
@@ -35852,6 +35868,7 @@ var AudioRecord = function AudioRecord(_ref) {
       setRecordedFile(audioRecording || null);
       setRecordingIsReadyToPlay(!!audioRecording);
     }
+    handleStopRecording();
     setCurrentChannelId(channelId);
   }, [channelId]);
   return /*#__PURE__*/React__default.createElement(Container$j, {
@@ -35966,7 +35983,7 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
   }));
 };
 
-var _templateObject$J, _templateObject2$E, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
+var _templateObject$J, _templateObject2$E, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
@@ -36875,7 +36892,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
             }
             var dataFromDb;
             var _temp11 = _catch(function () {
-              return Promise.resolve(_getDataFromDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, checksumHash, 'checksum')).then(function (_getDataFromDB) {
+              return Promise.resolve(getDataFromDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, checksumHash, 'checksum')).then(function (_getDataFromDB) {
                 dataFromDb = _getDataFromDB;
               });
             }, function (e) {
@@ -37215,16 +37232,21 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }
     };
   }, []);
-  var filteredTypingOrRecordingIndicator = React.useMemo(function () {
-    return typingOrRecordingIndicator ? Object.values(typingOrRecordingIndicator).filter(function (item) {
+  var typingOrRecording = React.useMemo(function () {
+    var dataValues = typingOrRecordingIndicator ? Object.values(typingOrRecordingIndicator) : [];
+    var filteredItems = dataValues.filter(function (item) {
       return item.typingState || item.recordingState;
-    }) : [];
-  }, [typingOrRecordingIndicator]);
-  var isTyping = React.useMemo(function () {
-    return !!filteredTypingOrRecordingIndicator.find(function (item) {
-      return item.typingState;
     });
-  }, [filteredTypingOrRecordingIndicator]);
+    return {
+      items: filteredItems,
+      isTyping: !!filteredItems.find(function (item) {
+        return item.typingState;
+      }),
+      isRecording: !!filteredItems.find(function (item) {
+        return item.recordingState;
+      })
+    };
+  }, [typingOrRecordingIndicator]);
   var formatTypingIndicatorText = function formatTypingIndicatorText(users, maxShownUsers) {
     if (maxShownUsers === void 0) {
       maxShownUsers = 3;
@@ -37233,7 +37255,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (users.length === 1) {
       var _user = users[0];
       var userName = makeUsername(getFromContacts && _user.from && contactsMap[_user.from.id], _user.from, getFromContacts);
-      return "" + userName + (isTyping ? activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is typing' : '' : activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is recording' : '');
+      return "" + userName + (typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping ? activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is typing' : '' : activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is recording' : '');
     }
     if (users.length <= maxShownUsers) {
       var userNames = users.map(function (user) {
@@ -37303,8 +37325,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, "Join")) : (activeChannel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || activeChannel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? !(activeChannel.userRole === 'admin' || activeChannel.userRole === 'owner') : activeChannel.type !== DEFAULT_CHANNEL_TYPE.DIRECT && !checkActionPermission('sendMessage')) ? (/*#__PURE__*/React__default.createElement(ReadOnlyCont, {
     color: textPrimary,
     iconColor: accentColor
-  }, /*#__PURE__*/React__default.createElement(SvgEye, null), " Read only")) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TypingIndicator$1, null, filteredTypingOrRecordingIndicator.length > 0 && (CustomTypingIndicator ? (/*#__PURE__*/React__default.createElement(CustomTypingIndicator, {
-    from: filteredTypingOrRecordingIndicator.map(function (item) {
+  }, /*#__PURE__*/React__default.createElement(SvgEye, null), " Read only")) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TypingIndicator$1, null, (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.items.length) > 0 && (CustomTypingIndicator ? (/*#__PURE__*/React__default.createElement(CustomTypingIndicator, {
+    from: typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.items.map(function (item) {
       return {
         id: item.from.id,
         name: item.from.name,
@@ -37314,7 +37336,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     })
   })) : (/*#__PURE__*/React__default.createElement(TypingIndicatorCont, null, /*#__PURE__*/React__default.createElement(TypingFrom, {
     color: textSecondary
-  }, formatTypingIndicatorText(filteredTypingOrRecordingIndicator, 3)), isTyping ? (/*#__PURE__*/React__default.createElement(TypingAnimation, {
+  }, formatTypingIndicatorText(typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.items, 3)), typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping ? (/*#__PURE__*/React__default.createElement(TypingAnimation, {
     borderColor: iconInactive
   }, /*#__PURE__*/React__default.createElement(DotOne, null), /*#__PURE__*/React__default.createElement(DotTwo, null), /*#__PURE__*/React__default.createElement(DotThree, null))) : (/*#__PURE__*/React__default.createElement(RecordingAnimation, {
     borderColor: iconInactive
@@ -37585,7 +37607,7 @@ var AddAttachmentIcon = styled__default.span(_templateObject0$c || (_templateObj
 }, function (props) {
   return props.hoverColor;
 });
-var SendMessageInputContainer = styled__default.div(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
+var SendMessageInputContainer = styled__default.div(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
   return props.minHeight || '36px';
 }, function (props) {
   return props.messageForReply ? '0 0 4px 4px' : '4px';
@@ -37881,7 +37903,7 @@ function SvgUnpin(props) {
   })));
 }
 
-var _templateObject$K, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
+var _templateObject$K, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$e, _templateObject0$d, _templateObject1$a, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var _channel$metadata;
   var setActionsHeight = _ref.setActionsHeight,
@@ -38360,7 +38382,7 @@ var DefaultStarIcon = styled__default(SvgStar)(_templateObject7$j || (_templateO
 var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose([""])));
 var DefaultPinIcon = styled__default(SvgPin)(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose([""])));
 var DefaultBlockIcon = styled__default(SvgBlockChannel)(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose([""])));
 var DefaultReportIcon = styled__default(SvgReport)(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose([""])));
 var DefaultClearIcon = styled__default(SvgClear)(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose([""])));
@@ -39084,7 +39106,7 @@ var Files = function Files(_ref) {
       text: '',
       styles: {
         background: {
-          fill: overlayBackground2 + "40"
+          fill: overlayBackground2 + "66"
         },
         path: {
           stroke: accentColor,
@@ -39906,7 +39928,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$V, _templateObject2$O, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$g, _templateObject0$e, _templateObject1$a, _templateObject10$7;
+var _templateObject$V, _templateObject2$O, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$g, _templateObject0$e, _templateObject1$b, _templateObject10$7;
 var Details = function Details(_ref) {
   var _activeChannel$metada;
   var detailsTitleText = _ref.detailsTitleText,
@@ -40338,7 +40360,7 @@ var ChannelName$1 = styled__default(SectionHeader)(_templateObject0$e || (_templ
 }, function (props) {
   return props.uppercase && 'uppercase';
 });
-var ChannelNameWrapper = styled__default.div(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
+var ChannelNameWrapper = styled__default.div(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 var EditButton = styled__default.span(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
 
 var _templateObject$W;