sceyt-chat-react-uikit 1.6.5-beta.7 → 1.6.5-beta.8

package/index.js

@@ -690,47 +690,77 @@ function _possibleConstructorReturn(t, e) {
 }
 function _regeneratorRuntime() {
   _regeneratorRuntime = function () {
-    return e;
+    return r;
   };
   var t,
-    e = {},
-    r = Object.prototype,
-    n = r.hasOwnProperty,
-    o = Object.defineProperty || function (t, e, r) {
-      t[e] = r.value;
-    },
-    i = "function" == typeof Symbol ? Symbol : {},
-    a = i.iterator || "@@iterator",
-    c = i.asyncIterator || "@@asyncIterator",
-    u = i.toStringTag || "@@toStringTag";
-  function define(t, e, r) {
-    return Object.defineProperty(t, e, {
-      value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
-    }), t[e];
+    r = {},
+    e = Object.prototype,
+    n = e.hasOwnProperty,
+    o = "function" == typeof Symbol ? Symbol : {},
+    i = o.iterator || "@@iterator",
+    a = o.asyncIterator || "@@asyncIterator",
+    u = o.toStringTag || "@@toStringTag";
+  function c(t, r, e, n) {
+    return Object.defineProperty(t, r, {
+      value: e,
+      enumerable: !n,
+      configurable: !n,
+      writable: !n
+    });
   }
   try {
-    define({}, "");
+    c({}, "");
   } catch (t) {
-    define = function (t, e, r) {
-      return t[e] = r;
+    c = function (t, r, e) {
+      return t[r] = e;
     };
   }
-  function wrap(t, e, r, n) {
+  function h(r, e, n, o) {
     var i = e && e.prototype instanceof Generator ? e : Generator,
-      a = Object.create(i.prototype),
-      c = new Context(n || []);
-    return o(a, "_invoke", {
-      value: makeInvokeMethod(t, r, c)
-    }), a;
+      a = Object.create(i.prototype);
+    return c(a, "_invoke", function (r, e, n) {
+      var o = 1;
+      return function (i, a) {
+        if (3 === o) throw Error("Generator is already running");
+        if (4 === o) {
+          if ("throw" === i) throw a;
+          return {
+            value: t,
+            done: !0
+          };
+        }
+        for (n.method = i, n.arg = a;;) {
+          var u = n.delegate;
+          if (u) {
+            var c = d(u, n);
+            if (c) {
+              if (c === f) continue;
+              return c;
+            }
+          }
+          if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
+            if (1 === o) throw o = 4, n.arg;
+            n.dispatchException(n.arg);
+          } else "return" === n.method && n.abrupt("return", n.arg);
+          o = 3;
+          var h = s(r, e, n);
+          if ("normal" === h.type) {
+            if (o = n.done ? 4 : 2, h.arg === f) continue;
+            return {
+              value: h.arg,
+              done: n.done
+            };
+          }
+          "throw" === h.type && (o = 4, n.method = "throw", n.arg = h.arg);
+        }
+      };
+    }(r, n, new Context(o || [])), !0), a;
   }
-  function tryCatch(t, e, r) {
+  function s(t, r, e) {
     try {
       return {
         type: "normal",
-        arg: t.call(e, r)
+        arg: t.call(r, e)
       };
     } catch (t) {
       return {
@@ -739,255 +769,193 @@ function _regeneratorRuntime() {
       };
     }
   }
-  e.wrap = wrap;
-  var h = "suspendedStart",
-    l = "suspendedYield",
-    f = "executing",
-    s = "completed",
-    y = {};
+  r.wrap = h;
+  var f = {};
   function Generator() {}
   function GeneratorFunction() {}
   function GeneratorFunctionPrototype() {}
-  var p = {};
-  define(p, a, function () {
+  var l = {};
+  c(l, i, function () {
     return this;
   });
-  var d = Object.getPrototypeOf,
-    v = d && d(d(values([])));
-  v && v !== r && n.call(v, a) && (p = v);
-  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
-  function defineIteratorMethods(t) {
-    ["next", "throw", "return"].forEach(function (e) {
-      define(t, e, function (t) {
-        return this._invoke(e, t);
+  var p = Object.getPrototypeOf,
+    y = p && p(p(x([])));
+  y && y !== e && n.call(y, i) && (l = y);
+  var v = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(l);
+  function g(t) {
+    ["next", "throw", "return"].forEach(function (r) {
+      c(t, r, function (t) {
+        return this._invoke(r, t);
       });
     });
   }
-  function AsyncIterator(t, e) {
-    function invoke(r, o, i, a) {
-      var c = tryCatch(t[r], t, o);
+  function AsyncIterator(t, r) {
+    function e(o, i, a, u) {
+      var c = s(t[o], t, i);
       if ("throw" !== c.type) {
-        var u = c.arg,
-          h = u.value;
-        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
-          invoke("next", t, i, a);
+        var h = c.arg,
+          f = h.value;
+        return f && "object" == typeof f && n.call(f, "__await") ? r.resolve(f.__await).then(function (t) {
+          e("next", t, a, u);
         }, function (t) {
-          invoke("throw", t, i, a);
-        }) : e.resolve(h).then(function (t) {
-          u.value = t, i(u);
+          e("throw", t, a, u);
+        }) : r.resolve(f).then(function (t) {
+          h.value = t, a(h);
         }, function (t) {
-          return invoke("throw", t, i, a);
+          return e("throw", t, a, u);
         });
       }
-      a(c.arg);
+      u(c.arg);
     }
-    var r;
-    o(this, "_invoke", {
-      value: function (t, n) {
-        function callInvokeWithMethodAndArg() {
-          return new e(function (e, r) {
-            invoke(t, n, e, r);
-          });
-        }
-        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-      }
-    });
-  }
-  function makeInvokeMethod(e, r, n) {
-    var o = h;
-    return function (i, a) {
-      if (o === f) throw Error("Generator is already running");
-      if (o === s) {
-        if ("throw" === i) throw a;
-        return {
-          value: t,
-          done: !0
-        };
-      }
-      for (n.method = i, n.arg = a;;) {
-        var c = n.delegate;
-        if (c) {
-          var u = maybeInvokeDelegate(c, n);
-          if (u) {
-            if (u === y) continue;
-            return u;
-          }
-        }
-        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
-          if (o === h) throw o = s, n.arg;
-          n.dispatchException(n.arg);
-        } else "return" === n.method && n.abrupt("return", n.arg);
-        o = f;
-        var p = tryCatch(e, r, n);
-        if ("normal" === p.type) {
-          if (o = n.done ? s : l, p.arg === y) continue;
-          return {
-            value: p.arg,
-            done: n.done
-          };
-        }
-        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
+    var o;
+    c(this, "_invoke", function (t, n) {
+      function i() {
+        return new r(function (r, o) {
+          e(t, n, r, o);
+        });
       }
-    };
+      return o = o ? o.then(i, i) : i();
+    }, !0);
   }
-  function maybeInvokeDelegate(e, r) {
-    var n = r.method,
-      o = e.iterator[n];
-    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
-    var i = tryCatch(o, e.iterator, r.arg);
-    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
+  function d(r, e) {
+    var n = e.method,
+      o = r.i[n];
+    if (o === t) return e.delegate = null, "throw" === n && r.i.return && (e.method = "return", e.arg = t, d(r, e), "throw" === e.method) || "return" !== n && (e.method = "throw", e.arg = new TypeError("The iterator does not provide a '" + n + "' method")), f;
+    var i = s(o, r.i, e.arg);
+    if ("throw" === i.type) return e.method = "throw", e.arg = i.arg, e.delegate = null, f;
     var a = i.arg;
-    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
+    return a ? a.done ? (e[r.r] = a.value, e.next = r.n, "return" !== e.method && (e.method = "next", e.arg = t), e.delegate = null, f) : a : (e.method = "throw", e.arg = new TypeError("iterator result is not an object"), e.delegate = null, f);
   }
-  function pushTryEntry(t) {
-    var e = {
-      tryLoc: t[0]
-    };
-    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
+  function w(t) {
+    this.tryEntries.push(t);
   }
-  function resetTryEntry(t) {
-    var e = t.completion || {};
-    e.type = "normal", delete e.arg, t.completion = e;
+  function m(r) {
+    var e = r[4] || {};
+    e.type = "normal", e.arg = t, r[4] = e;
   }
   function Context(t) {
-    this.tryEntries = [{
-      tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
+    this.tryEntries = [[-1]], t.forEach(w, this), this.reset(!0);
   }
-  function values(e) {
-    if (e || "" === e) {
-      var r = e[a];
-      if (r) return r.call(e);
-      if ("function" == typeof e.next) return e;
-      if (!isNaN(e.length)) {
+  function x(r) {
+    if (null != r) {
+      var e = r[i];
+      if (e) return e.call(r);
+      if ("function" == typeof r.next) return r;
+      if (!isNaN(r.length)) {
         var o = -1,
-          i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
+          a = function e() {
+            for (; ++o < r.length;) if (n.call(r, o)) return e.value = r[o], e.done = !1, e;
+            return e.value = t, e.done = !0, e;
           };
-        return i.next = i;
+        return a.next = a;
       }
     }
-    throw new TypeError(typeof e + " is not iterable");
+    throw new TypeError(typeof r + " is not iterable");
   }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
-    value: GeneratorFunctionPrototype,
-    configurable: !0
-  }), o(GeneratorFunctionPrototype, "constructor", {
-    value: GeneratorFunction,
-    configurable: !0
-  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
-    var e = "function" == typeof t && t.constructor;
-    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
-  }, e.mark = function (t) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
-  }, e.awrap = function (t) {
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, c(v, "constructor", GeneratorFunctionPrototype), c(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = c(GeneratorFunctionPrototype, u, "GeneratorFunction"), r.isGeneratorFunction = function (t) {
+    var r = "function" == typeof t && t.constructor;
+    return !!r && (r === GeneratorFunction || "GeneratorFunction" === (r.displayName || r.name));
+  }, r.mark = function (t) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, c(t, u, "GeneratorFunction")), t.prototype = Object.create(v), t;
+  }, r.awrap = function (t) {
     return {
       __await: t
     };
-  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
+  }, g(AsyncIterator.prototype), c(AsyncIterator.prototype, a, function () {
     return this;
-  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
+  }), r.AsyncIterator = AsyncIterator, r.async = function (t, e, n, o, i) {
     void 0 === i && (i = Promise);
-    var a = new AsyncIterator(wrap(t, r, n, o), i);
-    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
+    var a = new AsyncIterator(h(t, e, n, o), i);
+    return r.isGeneratorFunction(e) ? a : a.next().then(function (t) {
       return t.done ? t.value : a.next();
     });
-  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
+  }, g(v), c(v, u, "Generator"), c(v, i, function () {
     return this;
-  }), define(g, "toString", function () {
+  }), c(v, "toString", function () {
     return "[object Generator]";
-  }), e.keys = function (t) {
-    var e = Object(t),
-      r = [];
-    for (var n in e) r.push(n);
-    return r.reverse(), function next() {
-      for (; r.length;) {
-        var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
-      }
-      return next.done = !0, next;
+  }), r.keys = function (t) {
+    var r = Object(t),
+      e = [];
+    for (var n in r) e.unshift(n);
+    return function t() {
+      for (; e.length;) if ((n = e.pop()) in r) return t.value = n, t.done = !1, t;
+      return t.done = !0, t;
     };
-  }, e.values = values, Context.prototype = {
+  }, r.values = x, Context.prototype = {
     constructor: Context,
-    reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+    reset: function (r) {
+      if (this.prev = this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(m), !r) for (var e in this) "t" === e.charAt(0) && n.call(this, e) && !isNaN(+e.slice(1)) && (this[e] = t);
     },
     stop: function () {
       this.done = !0;
-      var t = this.tryEntries[0].completion;
+      var t = this.tryEntries[0][4];
       if ("throw" === t.type) throw t.arg;
       return this.rval;
     },
-    dispatchException: function (e) {
-      if (this.done) throw e;
-      var r = this;
-      function handle(n, o) {
-        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
+    dispatchException: function (r) {
+      if (this.done) throw r;
+      var e = this;
+      function n(t) {
+        a.type = "throw", a.arg = r, e.next = t;
       }
-      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
+      for (var o = e.tryEntries.length - 1; o >= 0; --o) {
         var i = this.tryEntries[o],
-          a = i.completion;
-        if ("root" === i.tryLoc) return handle("end");
-        if (i.tryLoc <= this.prev) {
-          var c = n.call(i, "catchLoc"),
-            u = n.call(i, "finallyLoc");
-          if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-          } else {
-            if (!u) throw Error("try statement without catch or finally");
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          }
+          a = i[4],
+          u = this.prev,
+          c = i[1],
+          h = i[2];
+        if (-1 === i[0]) return n("end"), !1;
+        if (!c && !h) throw Error("try statement without catch or finally");
+        if (null != i[0] && i[0] <= u) {
+          if (u < c) return this.method = "next", this.arg = t, n(c), !0;
+          if (u < h) return n(h), !1;
         }
       }
     },
-    abrupt: function (t, e) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var o = this.tryEntries[r];
-        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
-          var i = o;
+    abrupt: function (t, r) {
+      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
+        var n = this.tryEntries[e];
+        if (n[0] > -1 && n[0] <= this.prev && this.prev < n[2]) {
+          var o = n;
           break;
         }
       }
-      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
-      var a = i ? i.completion : {};
-      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
+      o && ("break" === t || "continue" === t) && o[0] <= r && r <= o[2] && (o = null);
+      var i = o ? o[4] : {};
+      return i.type = t, i.arg = r, o ? (this.method = "next", this.next = o[2], f) : this.complete(i);
     },
-    complete: function (t, e) {
+    complete: function (t, r) {
       if ("throw" === t.type) throw t.arg;
-      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
+      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && r && (this.next = r), f;
     },
     finish: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
+      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
+        var e = this.tryEntries[r];
+        if (e[2] === t) return this.complete(e[4], e[3]), m(e), f;
       }
     },
     catch: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.tryLoc === t) {
-          var n = r.completion;
+      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
+        var e = this.tryEntries[r];
+        if (e[0] === t) {
+          var n = e[4];
           if ("throw" === n.type) {
             var o = n.arg;
-            resetTryEntry(r);
+            m(e);
           }
           return o;
         }
       }
       throw Error("illegal catch attempt");
     },
-    delegateYield: function (e, r, n) {
+    delegateYield: function (r, e, n) {
       return this.delegate = {
-        iterator: values(e),
-        resultName: r,
-        nextLoc: n
-      }, "next" === this.method && (this.arg = t), y;
+        i: x(r),
+        r: e,
+        n: n
+      }, "next" === this.method && (this.arg = t), f;
     }
-  }, e;
+  }, r;
 }
 function _setPrototypeOf(t, e) {
   return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
@@ -998,10 +966,10 @@ function _superPropBase(t, o) {
   for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t)););
   return t;
 }
-function _superPropGet(t, e, o, r) {
-  var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), e, o);
+function _superPropGet(t, o, e, r) {
+  var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e);
   return 2 & r && "function" == typeof p ? function (t) {
-    return p.apply(o, t);
+    return p.apply(e, t);
   } : p;
 }
 function _taggedTemplateLiteralLoose(e, t) {
@@ -10772,7 +10740,7 @@ function SvgSearch(props) {
   })));
 }
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40;
 function md5(inputString) {
   var hc = '0123456789abcdef';
   function rh(n) {
@@ -10953,7 +10921,7 @@ var UploadFileLabel = styled__default.label(_templateObject8 || (_templateObject
 var InputErrorMessage = styled__default.p(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  color: ", ";\n  margin: 4px 0 0;\n"])), function (props) {
   return props.color;
 });
-var CustomInput = styled__default.input(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  color: ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding: 11px 14px;\n  font-family: Inter, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 15px;\n  line-height: 20px;\n  opacity: 1;\n  outline: none;\n\n  &:focus {\n    border: 1px solid ", ";\n    outline: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    opacity: 1;\n    color: #383b51;\n  }\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), function (props) {
+var CustomInput = styled__default.input(_templateObject0 || (_templateObject0 = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  width: 100%;\n  background: ", ";\n  border: ", ";\n  color: ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\n  padding: 11px 14px;\n  font-family: Inter, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 15px;\n  line-height: 20px;\n  opacity: 1;\n  outline: none;\n\n  &:focus {\n    border: 1px solid ", ";\n    outline: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    opacity: 1;\n    color: #383b51;\n  }\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), function (props) {
   return props.theme === THEME.DARK ? props.backgroundColor : colors.white;
 }, function (props) {
   return props.error ? "1px solid " + props.errorColor : props.theme !== THEME.DARK ? "1px solid " + colors.gray1 : 'none';
@@ -10966,9 +10934,9 @@ var CustomInput = styled__default.input(_templateObject10 || (_templateObject10
 }, colors.gray0, function (props) {
   return props.placeholderColor;
 });
-var FilterField = styled__default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  border: 1px solid #d7d8e3;\n  border-radius: 4px;\n  background-color: transparent;\n  margin-left: 12px;\n"])));
-var FilterFieldSpan = styled__default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 100px;\n  padding: 8px 0 8px 8px;\n  text-align: left;\n  font-size: 0.875rem;\n  line-height: 1rem;\n"])));
-var Row = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  margin: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  width: ", ";\n  height: ", ";\n  min-height: ", ";\n  padding: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  flex-wrap: ", ";\n"])), function (props) {
+var FilterField = styled__default.div(_templateObject1 || (_templateObject1 = _taggedTemplateLiteralLoose(["\n  border: 1px solid #d7d8e3;\n  border-radius: 4px;\n  background-color: transparent;\n  margin-left: 12px;\n"])));
+var FilterFieldSpan = styled__default.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 100px;\n  padding: 8px 0 8px 8px;\n  text-align: left;\n  font-size: 0.875rem;\n  line-height: 1rem;\n"])));
+var Row = styled__default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  margin: ", ";\n  margin-top: ", ";\n  margin-bottom: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  width: ", ";\n  height: ", ";\n  min-height: ", ";\n  padding: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  flex-wrap: ", ";\n"])), function (props) {
   return props.margin;
 }, function (props) {
   return props.marginTop;
@@ -10997,7 +10965,7 @@ var Row = styled__default.div(_templateObject13 || (_templateObject13 = _taggedT
 }, function (props) {
   return props.flexWrap;
 });
-var Button = styled__default.button(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  outline: none;\n  cursor: ", ";\n  text-align: center;\n  font-style: normal;\n  border-radius: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  padding: 8px 16px;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  margin: ", ";\n  user-select: none;\n  transition: opacity 0.1s;\n  opacity: ", ";\n  &:hover,\n  &:focus {\n    opacity: ", ";\n  }\n"])), function (props) {
+var Button = styled__default.button(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  box-sizing: border-box;\n  text-decoration: none;\n  outline: none;\n  cursor: ", ";\n  text-align: center;\n  font-style: normal;\n  border-radius: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  padding: 8px 16px;\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  margin: ", ";\n  user-select: none;\n  transition: opacity 0.1s;\n  opacity: ", ";\n  &:hover,\n  &:focus {\n    opacity: ", ";\n  }\n"])), function (props) {
   return !props.disabled && 'pointer';
 }, function (props) {
   return props.borderRadius || '4px';
@@ -11014,7 +10982,7 @@ var Button = styled__default.button(_templateObject14 || (_templateObject14 = _t
 }, function (props) {
   return props.disabled ? 0.5 : 0.8;
 });
-var PopupName = styled__default.h3(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 20px;\n  line-height: 23px;\n  color: ", ";\n  margin: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  padding: ", ";\n  word-break: break-word;\n\n  ", "\n"])), function (props) {
+var PopupName = styled__default.h3(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 20px;\n  line-height: 23px;\n  color: ", ";\n  margin: 0;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  padding: ", ";\n  word-break: break-word;\n\n  ", "\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.marginTop;
@@ -11028,7 +10996,7 @@ var PopupName = styled__default.h3(_templateObject15 || (_templateObject15 = _ta
   }
   return '';
 });
-var ButtonBlock = styled__default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-top: ", ";\n  padding-right: ", ";\n  justify-content: ", ";\n  height: ", ";\n  min-height: ", ";\n  background-color: ", ";\n\n  a {\n    width: 88px;\n    height: 40px;\n    margin: 0 4px;\n    font-size: 15px;\n    font-weight: 500;\n  }\n"])), function (props) {
+var ButtonBlock = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-top: ", ";\n  padding-right: ", ";\n  justify-content: ", ";\n  height: ", ";\n  min-height: ", ";\n  background-color: ", ";\n\n  a {\n    width: 88px;\n    height: 40px;\n    margin: 0 4px;\n    font-size: 15px;\n    font-weight: 500;\n  }\n"])), function (props) {
   return props.marginTop || '10px';
 }, function (props) {
   return props.paddingRight || '0px';
@@ -11041,7 +11009,7 @@ var ButtonBlock = styled__default.div(_templateObject16 || (_templateObject16 =
 }, function (props) {
   return props.backgroundColor;
 });
-var Popup = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  min-height: 150px;\n  min-width: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  display: ", ";\n  flex-direction: column;\n  padding: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n\n  ", ";\n"])), function (props) {
+var Popup = styled__default.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  min-height: 150px;\n  min-width: ", ";\n  max-width: ", ";\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  display: ", ";\n  flex-direction: column;\n  padding: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  border-radius: 8px;\n  box-sizing: border-box;\n\n  ", ";\n"])), function (props) {
   return props.minWidth || '400px';
 }, function (props) {
   return props.maxWidth || '600px';
@@ -11062,23 +11030,23 @@ var Popup = styled__default.div(_templateObject17 || (_templateObject17 = _tagge
 }, function (props) {
   return props.isLoading && "\n        user-select: none;\n\n        & > * {\n           pointer-events: none;\n           user-select: none;\n        }\n\n         " + ButtonBlock + " {\n          a, button {\n            pointer-events: none;\n            user-select: none;\n            opacity: 0.7;\n          }\n        }\n    ";
 });
-var PopupBody = styled__default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  margin-bottom: 8px;\n  height: ", ";\n"])), function (props) {
+var PopupBody = styled__default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n  padding: ", ";\n  margin-bottom: 8px;\n  height: ", ";\n"])), function (props) {
   return (props.paddingV || 0) + " " + (props.paddingH || 0);
 }, function (props) {
   return props.withFooter ? "calc(100% - (54px + " + props.paddingV + "))" : 'calc(100% - 54px)';
 });
-var PopupDescription = styled__default.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 15px;\n  line-height: 22px;\n  color: ", ";\n  cursor: default;\n  white-space: pre-line;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  word-break: break-word;\n\n  .highlight {\n    text-decoration: underline;\n    font-weight: 500;\n    color: ", ";\n  }\n"])), function (props) {
+var PopupDescription = styled__default.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 15px;\n  line-height: 22px;\n  color: ", ";\n  cursor: default;\n  white-space: pre-line;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  word-break: break-word;\n\n  .highlight {\n    text-decoration: underline;\n    font-weight: 500;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.marginTop || '10px';
 }, function (props) {
   return props.marginBottom || '10px';
 }, colors.primary);
-var BoltText = styled__default.span(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n"])));
-var PopupFooter = styled__default(ButtonBlock)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  margin-top: ", ";\n  padding: 8px 16px;\n  border-radius: 0 0 8px 8px;\n  z-index: 2;\n"])), function (props) {
+var BoltText = styled__default.span(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n"])));
+var PopupFooter = styled__default(ButtonBlock)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n  margin-top: ", ";\n  padding: 8px 16px;\n  border-radius: 0 0 8px 8px;\n  z-index: 2;\n"])), function (props) {
   return props.marginTop || '0';
 });
-var SectionHeader = styled__default.h4(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin: ", ";\n  text-transform: ", ";\n"])), function (props) {
+var SectionHeader = styled__default.h4(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin: ", ";\n  text-transform: ", ";\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
   return props.lineHeight || '20px';
@@ -11089,7 +11057,7 @@ var SectionHeader = styled__default.h4(_templateObject22 || (_templateObject22 =
 }, function (props) {
   return props.uppercase && 'uppercase';
 });
-var ItemNote = styled__default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n  display: none;\n  position: absolute;\n  z-index: 301;\n  padding: 10px 12px;\n  background-color: ", ";\n  border-radius: 12px;\n  font-size: 0.75rem;\n  white-space: nowrap;\n  font-weight: 600;\n  color: white;\n  pointer-events: none;\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    z-index: -1;\n    background-color: ", ";\n    border-radius: 3px;\n    width: 14px;\n    height: 14px;\n\n    ", " ", "\n  }\n\n  ", " ", " ", " ", "\n"])), function (props) {
+var ItemNote = styled__default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n  display: none;\n  position: absolute;\n  z-index: 301;\n  padding: 10px 12px;\n  background-color: ", ";\n  border-radius: 12px;\n  font-size: 0.75rem;\n  white-space: nowrap;\n  font-weight: 600;\n  color: white;\n  pointer-events: none;\n  user-select: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    z-index: -1;\n    background-color: ", ";\n    border-radius: 3px;\n    width: 14px;\n    height: 14px;\n\n    ", " ", "\n  }\n\n  ", " ", " ", " ", "\n"])), function (props) {
   return props.bgColor;
 }, function (props) {
   return props.bgColor;
@@ -11108,13 +11076,13 @@ var ItemNote = styled__default.div(_templateObject23 || (_templateObject23 = _ta
     return props.disabledColor;
   } + ";";
 });
-var CustomSwitcher = styled__default.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n"])));
-var SwitcherLabel = styled__default.label(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  width: 48px;\n  height: 28px;\n  background: rgb(226, 226, 226);\n  display: inline-block;\n  border-radius: 50px;\n  position: relative;\n  transition: all 0.3s ease;\n  transform-origin: 20% center;\n  border: 3px solid #fff;\n  cursor: pointer;\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    transition: all 0.2s ease;\n    width: 24px;\n    height: 24px;\n    top: 2px;\n    left: 2px;\n    border-radius: 20px;\n    box-shadow:\n      0 1px 2px rgba(0, 0, 0, 0.251475),\n      0 2px 6px rgba(0, 0, 0, 0.404256);\n    background: #fff;\n  }\n"])));
-var UploadAvatarButton = styled__default.button(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 32px;\n  margin-top: 8px;\n  border: none;\n  color: #fff;\n  font-weight: 500;\n  font-size: 14px;\n  background: ", ";\n  border-radius: 4px;\n  outline: none !important;\n  cursor: pointer;\n  padding: 7px 12px;\n  line-height: 10px;\n"])), colors.primary);
-var UploadAvatarHandler = styled__default.div(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
+var CustomSwitcher = styled__default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n"])));
+var SwitcherLabel = styled__default.label(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n  width: 48px;\n  height: 28px;\n  background: rgb(226, 226, 226);\n  display: inline-block;\n  border-radius: 50px;\n  position: relative;\n  transition: all 0.3s ease;\n  transform-origin: 20% center;\n  border: 3px solid #fff;\n  cursor: pointer;\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    transition: all 0.2s ease;\n    width: 24px;\n    height: 24px;\n    top: 2px;\n    left: 2px;\n    border-radius: 20px;\n    box-shadow:\n      0 1px 2px rgba(0, 0, 0, 0.251475),\n      0 2px 6px rgba(0, 0, 0, 0.404256);\n    background: #fff;\n  }\n"])));
+var UploadAvatarButton = styled__default.button(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 32px;\n  margin-top: 8px;\n  border: none;\n  color: #fff;\n  font-weight: 500;\n  font-size: 14px;\n  background: ", ";\n  border-radius: 4px;\n  outline: none !important;\n  cursor: pointer;\n  padding: 7px 12px;\n  line-height: 10px;\n"])), colors.primary);
+var UploadAvatarHandler = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledText = styled__default.span(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
+var StyledText = styled__default.span(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
   return props.fontWeight || props.isLastMessage && '500';
 }, function (props) {
   return props.fontFamily;
@@ -11129,7 +11097,7 @@ var StyledText = styled__default.span(_templateObject28 || (_templateObject28 =
 }, function (props) {
   return props.isLastMessage && '500';
 });
-var MessageOwner = styled__default.h3(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n  margin: 0 12px 4px 0;\n  white-space: nowrap;\n  color: ", ";\n  margin-left: ", ";\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n  cursor: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
+var MessageOwner = styled__default.h3(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n  margin: 0 12px 4px 0;\n  white-space: nowrap;\n  color: ", ";\n  margin-left: ", ";\n  font-weight: 500;\n  font-size: ", ";\n  line-height: ", ";\n  cursor: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
   return props.color || colors.primary;
 }, function (props) {
   return props.rtlDirection && 'auto';
@@ -11140,7 +11108,7 @@ var MessageOwner = styled__default.h3(_templateObject29 || (_templateObject29 =
 }, function (props) {
   return props.clickable && 'pointer';
 });
-var MessageText = styled__default.pre(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n  display: flow-root;\n  position: relative;\n  font-family: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-bottom: ", ";\n  //font-size: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: 400;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  //white-space: normal;\n  //letter-spacing: -0.2px;\n  letter-spacing: 0.3px;\n  color: ", ";\n  user-select: text;\n  //overflow: hidden;\n\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n  }\n\n  & a {\n    color: ", ";\n  }\n"])), function (props) {
+var MessageText = styled__default.pre(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n  display: flow-root;\n  position: relative;\n  font-family: ", ";\n  margin: 0;\n  padding: ", ";\n  padding-bottom: ", ";\n  //font-size: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: 400;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  //white-space: normal;\n  //letter-spacing: -0.2px;\n  letter-spacing: 0.3px;\n  color: ", ";\n  user-select: text;\n  //overflow: hidden;\n\n  ", "\n\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    height: 1px;\n  }\n\n  & a {\n    color: ", ";\n  }\n"])), function (props) {
   return props.fontFamily || 'sans-serif';
 }, function (props) {
   return props.withAttachment && (props.showMessageSenderName ? props.withPaddings ? '0 12px 10px' : '0 0 10px' : props.isForwarded ? props.withPaddings ? '4px 12px 10px' : '4px 0px 10px' : '8px 12px 10px');
@@ -11158,7 +11126,7 @@ var MessageText = styled__default.pre(_templateObject30 || (_templateObject30 =
 }, function (props) {
   return props.isRepliedMessage && "\n      display: -webkit-box;\n      -webkit-line-clamp: 1;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      text-overflow: ellipsis;\n  ";
 }, colors.blue);
-var ReplyMessageText = styled__default.span(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  position: relative;\n  margin: 0;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: ", ";\n  letter-spacing: -0.2px;\n  color: ", ";\n  user-select: text;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  & a {\n    color: ", ";\n  }\n"])), function (props) {
+var ReplyMessageText = styled__default.span(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  position: relative;\n  margin: 0;\n  padding: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: ", ";\n  letter-spacing: -0.2px;\n  color: ", ";\n  user-select: text;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  & a {\n    color: ", ";\n  }\n"])), function (props) {
   return props.withAttachment && props.showMessageSenderName ? '0 12px 10px' : props.withAttachment ? '8px 12px 10px' : '';
 }, function (props) {
   return props.fontSize || '15px';
@@ -11167,14 +11135,14 @@ var ReplyMessageText = styled__default.span(_templateObject31 || (_templateObjec
 }, function (props) {
   return props.color;
 }, colors.blue);
-var CloseIcon = styled__default(SvgClose)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 13px;\n  right: 13px;\n  cursor: pointer;\n  padding: 15px;\n  box-sizing: content-box;\n  color: ", ";\n"])), function (props) {
+var CloseIcon = styled__default(SvgClose)(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 13px;\n  right: 13px;\n  cursor: pointer;\n  padding: 15px;\n  box-sizing: content-box;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var ClearTypedText = styled__default(CloseIcon)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 10px;\n  cursor: pointer;\n  padding: 4px;\n"])));
-var StyledSearchSvg = styled__default(SvgSearch)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 12px;\n  left: ", ";\n"])), function (props) {
+var ClearTypedText = styled__default(CloseIcon)(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 8px;\n  right: 10px;\n  cursor: pointer;\n  padding: 4px;\n"])));
+var StyledSearchSvg = styled__default(SvgSearch)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 12px;\n  left: ", ";\n"])), function (props) {
   return props.left || '14px';
 });
-var SubTitle = styled__default.span(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: -0.078px;\n  color: ", ";\n  margin: ", ";\n"])), function (props) {
+var SubTitle = styled__default.span(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n  font-size: ", ";\n  line-height: ", ";\n  letter-spacing: -0.078px;\n  color: ", ";\n  margin: ", ";\n"])), function (props) {
   return props.fontSize || '13px';
 }, function (props) {
   return props.lineHeight || '16px';
@@ -11183,10 +11151,10 @@ var SubTitle = styled__default.span(_templateObject35 || (_templateObject35 = _t
 }, function (props) {
   return props.margin;
 });
-var AttachmentIconCont = styled__default.span(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 40px;\n  height: 40px;\n  background-color: ", ";\n  border-radius: 50%;\n"])), function (props) {
+var AttachmentIconCont = styled__default.span(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 40px;\n  height: 40px;\n  background-color: ", ";\n  border-radius: 50%;\n"])), function (props) {
   return props.backgroundColor || colors.primary;
 });
-var UploadingIcon = styled__default.span(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  border-style: solid;\n  border-color: ", ";\n  border-width: ", ";\n  border-top-width: ", ";\n  border-top-color: rgba(0, 0, 0, 0);\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\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"])), function (props) {
+var UploadingIcon = styled__default.span(_templateObject35 || (_templateObject35 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  border-style: solid;\n  border-color: ", ";\n  border-width: ", ";\n  border-top-width: ", ";\n  border-top-color: rgba(0, 0, 0, 0);\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n\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"])), function (props) {
   return props.color || 'rgba(255, 255, 255, 0.8)';
 }, function (props) {
   return props.borderWidth || (props.fileAttachment ? '2px' : '3px');
@@ -11197,9 +11165,9 @@ var UploadingIcon = styled__default.span(_templateObject37 || (_templateObject37
 }, function (props) {
   return props.height || (props.fileAttachment ? '26px' : props.isRepliedMessage ? '28px' : '40px');
 });
-var TextInOneLine = styled__default.span(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-var CancelResumeWrapper = styled__default.span(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  z-index: 3;\n\n  > svg {\n    width: 20px;\n    height: 20px;\n  }\n"])));
-var UploadPercent = styled__default.span(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  color: #fff;\n  width: ", ";\n  height: ", ";\n  //background-color: rgba(0,0,0,0.4);\n  background-color: ", ";\n  border-radius: ", ";\n}\n  ", "\n"])), function (props) {
+var TextInOneLine = styled__default.span(_templateObject36 || (_templateObject36 = _taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var CancelResumeWrapper = styled__default.span(_templateObject37 || (_templateObject37 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  z-index: 3;\n\n  > svg {\n    width: 20px;\n    height: 20px;\n  }\n"])));
+var UploadPercent = styled__default.span(_templateObject38 || (_templateObject38 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  color: #fff;\n  width: ", ";\n  height: ", ";\n  //background-color: rgba(0,0,0,0.4);\n  background-color: ", ";\n  border-radius: ", ";\n}\n  ", "\n"])), function (props) {
   return props.fileAttachment || props.isRepliedMessage || props.isDetailsView ? '40px' : '56px';
 }, function (props) {
   return props.fileAttachment || props.isRepliedMessage || props.isDetailsView ? '40px' : '56px';
@@ -11210,7 +11178,7 @@ var UploadPercent = styled__default.span(_templateObject40 || (_templateObject40
 }, function (props) {
   return (props.fileAttachment || props.isRepliedMessage) && "& > svg {\n    width: 15px;\n    height: 15px;\n  }";
 });
-var UploadProgress = styled__default.div(_templateObject41 || (_templateObject41 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  display: flex;\n  //display: none;\n  align-items: center;\n  justify-content: center;\n  //border-radius: ", ";\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border-radius: ", ";\n  z-index: ", ";\n  cursor: pointer;\n  border: ", ";\n  box-sizing: border-box;\n  /* ", "*/\n  ", "\n  ", "\n"])), function (props) {
+var UploadProgress = styled__default.div(_templateObject39 || (_templateObject39 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n  min-width: ", ";\n  min-height: ", ";\n  display: flex;\n  //display: none;\n  align-items: center;\n  justify-content: center;\n  //border-radius: ", ";\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border-radius: ", ";\n  z-index: ", ";\n  cursor: pointer;\n  border: ", ";\n  box-sizing: border-box;\n  /* ", "*/\n  ", "\n  ", "\n"])), function (props) {
   return !props.positionStatic && 'absolute';
 }, function (props) {
   return props.fileAttachment ? '8px' : '0';
@@ -11241,7 +11209,7 @@ var UploadProgress = styled__default.div(_templateObject41 || (_templateObject41
 }, function (props) {
   return props.isDetailsView && "\n    width: 100%;\n    height: 100%;\n    min-width: inherit;\n  ";
 });
-var AttachmentPreviewTitle = styled__default.span(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 20px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  height: ", ";\n  color: ", ";\n"])), function (props) {
+var AttachmentPreviewTitle = styled__default.span(_templateObject40 || (_templateObject40 = _taggedTemplateLiteralLoose(["\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 20px);\n  font-style: normal;\n  font-weight: normal;\n  font-size: ", ";\n  line-height: ", ";\n  height: ", ";\n  color: ", ";\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
   return props.lineHeight || '20px';
@@ -11832,7 +11800,7 @@ function watchForEvents() {
           };
         });
         _loop = /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, contactsMap, _getFromContacts, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, lastMessage, _channel7, from, _channel8, _from, _channelId, _channel9, _channel10, deletedMessage, _activeChannelId7, _channelExists7, _channel11, _message, _activeChannelId8, _channelExists8, _channel12, user, _message2, reaction, isSelf, _activeChannelId9, _contactsMap, _getFromContacts2, _messageBody, channelUpdateParams, _channel13, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId10, _channelUpdateParams, _channel14, _updatedChannel, _channel15, _activeChannelId11, channelExist, _channel16, _channel17, _channel18, _channel19, _channel20, _channel21, _channel22, _groupName5, _channel23, _groupName6, _channel24, members, _activeChannelId12, i, _channel25, _channel26, status;
+          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, contactsMap, _getFromContacts, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, lastMessage, _channel7, from, _channel8, _from, _channelId, _channel9, _channel0, deletedMessage, _activeChannelId7, _channelExists7, _channel1, _message, _activeChannelId8, _channelExists8, _channel10, user, _message2, reaction, isSelf, _activeChannelId9, _contactsMap, _getFromContacts2, _messageBody, channelUpdateParams, _channel11, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId0, _channelUpdateParams, _channel12, _updatedChannel, _channel13, _activeChannelId1, channelExist, _channel14, _channel15, _channel16, _channel17, _channel18, _channel19, _channel20, _groupName5, _channel21, _groupName6, _channel22, members, _activeChannelId10, i, _channel23, _channel24, status;
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
@@ -12333,11 +12301,11 @@ function watchForEvents() {
                 deleteChannelFromAllChannels(_channelId);
                 return _context.abrupt("break", 423);
               case 240:
-                _channel10 = args.channel, deletedMessage = args.deletedMessage;
+                _channel0 = args.channel, deletedMessage = args.deletedMessage;
                 _activeChannelId7 = getActiveChannelId();
                 log.info('channel DELETE_MESSAGE ... ');
-                _channelExists7 = checkChannelExists(_channel10.id);
-                if (!(_channel10.id === _activeChannelId7)) {
+                _channelExists7 = checkChannelExists(_channel0.id);
+                if (!(_channel0.id === _activeChannelId7)) {
                   _context.next = 248;
                   break;
                 }
@@ -12345,7 +12313,7 @@ function watchForEvents() {
                 _context.next = 248;
                 return effects.put(updateMessageAC(deletedMessage.id, deletedMessage));
               case 248:
-                updateMessageOnMap(_channel10.id, {
+                updateMessageOnMap(_channel0.id, {
                   messageId: deletedMessage.id,
                   params: deletedMessage
                 });
@@ -12354,31 +12322,31 @@ function watchForEvents() {
                   break;
                 }
                 _context.next = 252;
-                return effects.put(updateChannelDataAC(_channel10.id, {
-                  newMessageCount: _channel10.newMessageCount,
-                  muted: _channel10.muted,
-                  mutedTill: _channel10.mutedTill
+                return effects.put(updateChannelDataAC(_channel0.id, {
+                  newMessageCount: _channel0.newMessageCount,
+                  muted: _channel0.muted,
+                  mutedTill: _channel0.mutedTill
                 }));
               case 252:
-                if (!(_channel10.lastMessage.id === deletedMessage.id)) {
+                if (!(_channel0.lastMessage.id === deletedMessage.id)) {
                   _context.next = 255;
                   break;
                 }
                 _context.next = 255;
-                return effects.put(updateChannelLastMessageAC(deletedMessage, _channel10));
+                return effects.put(updateChannelLastMessageAC(deletedMessage, _channel0));
               case 255:
-                updateChannelOnAllChannels(_channel10.id, {
-                  newMessageCount: _channel10.newMessageCount,
-                  muted: _channel10.muted,
-                  mutedTill: _channel10.mutedTill
+                updateChannelOnAllChannels(_channel0.id, {
+                  newMessageCount: _channel0.newMessageCount,
+                  muted: _channel0.muted,
+                  mutedTill: _channel0.mutedTill
                 }, deletedMessage);
                 return _context.abrupt("break", 423);
               case 257:
-                _channel11 = args.channel, _message = args.message;
+                _channel1 = args.channel, _message = args.message;
                 log.info('channel EDIT_MESSAGE ... ', _message);
                 _activeChannelId8 = getActiveChannelId();
-                _channelExists8 = checkChannelExists(_channel11.id);
-                if (!(_channel11.id === _activeChannelId8)) {
+                _channelExists8 = checkChannelExists(_channel1.id);
+                if (!(_channel1.id === _activeChannelId8)) {
                   _context.next = 265;
                   break;
                 }
@@ -12405,27 +12373,27 @@ function watchForEvents() {
                   _context.next = 269;
                   break;
                 }
-                if (!(_channel11.lastMessage.id === _message.id)) {
+                if (!(_channel1.lastMessage.id === _message.id)) {
                   _context.next = 269;
                   break;
                 }
                 _context.next = 269;
-                return effects.put(updateChannelLastMessageAC(_message, _channel11));
+                return effects.put(updateChannelLastMessageAC(_message, _channel1));
               case 269:
-                if (checkChannelExistsOnMessagesMap(_channel11.id)) {
-                  updateMessageOnMap(_channel11.id, {
+                if (checkChannelExistsOnMessagesMap(_channel1.id)) {
+                  updateMessageOnMap(_channel1.id, {
                     messageId: _message.id,
                     params: _message
                   });
                 }
-                updateChannelOnAllChannels(_channel11.id, {}, _message);
+                updateChannelOnAllChannels(_channel1.id, {}, _message);
                 return _context.abrupt("break", 423);
               case 272:
-                _channel12 = args.channel, user = args.user, _message2 = args.message, reaction = args.reaction;
+                _channel10 = args.channel, user = args.user, _message2 = args.message, reaction = args.reaction;
                 log.info('channel REACTION_ADDED ... ', args);
                 isSelf = user.id === SceytChatClient.user.id;
                 _activeChannelId9 = getActiveChannelId();
-                if (!(_channel12.id === _activeChannelId9)) {
+                if (!(_channel10.id === _activeChannelId9)) {
                   _context.next = 280;
                   break;
                 }
@@ -12442,7 +12410,7 @@ function watchForEvents() {
                   _context.next = 289;
                   break;
                 }
-                if (!(document.visibilityState !== 'visible' || _channel12.id !== _activeChannelId9)) {
+                if (!(document.visibilityState !== 'visible' || _channel10.id !== _activeChannelId9)) {
                   _context.next = 289;
                   break;
                 }
@@ -12459,43 +12427,43 @@ function watchForEvents() {
                   isLastMessage: false,
                   asSampleText: true
                 });
-                setNotification(_messageBody, reaction.user, _channel12, reaction.key, _message2.attachments && _message2.attachments.length ? _message2.attachments.find(function (att) {
+                setNotification(_messageBody, reaction.user, _channel10, reaction.key, _message2.attachments && _message2.attachments.length ? _message2.attachments.find(function (att) {
                   return att.type !== attachmentTypes.link;
                 }) : undefined);
               case 289:
-                if (!(_channel12.newReactions && _channel12.newReactions.length)) {
+                if (!(_channel10.newReactions && _channel10.newReactions.length)) {
                   _context.next = 293;
                   break;
                 }
                 channelUpdateParams = {
-                  userMessageReactions: _channel12.newReactions,
+                  userMessageReactions: _channel10.newReactions,
                   lastReactedMessage: _message2,
-                  newReactions: _channel12.newReactions,
-                  muted: _channel12.muted,
-                  mutedTill: _channel12.mutedTill
+                  newReactions: _channel10.newReactions,
+                  muted: _channel10.muted,
+                  mutedTill: _channel10.mutedTill
                 };
                 _context.next = 293;
-                return effects.put(updateChannelDataAC(_channel12.id, channelUpdateParams));
+                return effects.put(updateChannelDataAC(_channel10.id, channelUpdateParams));
               case 293:
-                updateChannelOnAllChannels(_channel12.id, {
-                  userMessageReactions: _channel12.newReactions,
+                updateChannelOnAllChannels(_channel10.id, {
+                  userMessageReactions: _channel10.newReactions,
                   lastReactedMessage: _message2,
-                  newReactions: _channel12.newReactions,
-                  muted: _channel12.muted,
-                  mutedTill: _channel12.mutedTill
+                  newReactions: _channel10.newReactions,
+                  muted: _channel10.muted,
+                  mutedTill: _channel10.mutedTill
                 });
               case 294:
-                if (checkChannelExistsOnMessagesMap(_channel12.id)) {
-                  addReactionToMessageOnMap(_channel12.id, _message2, reaction, true);
+                if (checkChannelExistsOnMessagesMap(_channel10.id)) {
+                  addReactionToMessageOnMap(_channel10.id, _message2, reaction, true);
                 }
                 return _context.abrupt("break", 423);
               case 296:
-                _channel13 = args.channel, _user = args.user, _message3 = args.message, _reaction = args.reaction;
-                log.info('channel REACTION_DELETED ... ', _channel13);
-                channelFromMap = getChannelFromMap(_channel13.id);
+                _channel11 = args.channel, _user = args.user, _message3 = args.message, _reaction = args.reaction;
+                log.info('channel REACTION_DELETED ... ', _channel11);
+                channelFromMap = getChannelFromMap(_channel11.id);
                 _isSelf = _user.id === SceytChatClient.user.id;
-                _activeChannelId10 = getActiveChannelId();
-                if (!(_channel13.id === _activeChannelId10)) {
+                _activeChannelId0 = getActiveChannelId();
+                if (!(_channel11.id === _activeChannelId0)) {
                   _context.next = 305;
                   break;
                 }
@@ -12504,43 +12472,43 @@ function watchForEvents() {
               case 304:
                 removeReactionOnAllMessages(_message3, _reaction, true);
               case 305:
-                _channelUpdateParams = JSON.parse(JSON.stringify(_channel13));
+                _channelUpdateParams = JSON.parse(JSON.stringify(_channel11));
                 if (channelFromMap && channelFromMap.lastReactedMessage && channelFromMap.lastReactedMessage.id === _message3.id) {
                   _channelUpdateParams.lastReactedMessage = null;
                 }
                 _context.next = 309;
-                return effects.put(updateChannelDataAC(_channel13.id, _channelUpdateParams));
+                return effects.put(updateChannelDataAC(_channel11.id, _channelUpdateParams));
               case 309:
-                updateChannelOnAllChannels(_channel13.id, _channelUpdateParams);
-                if (checkChannelExistsOnMessagesMap(_channel13.id)) {
-                  removeReactionToMessageOnMap(_channel13.id, _message3, _reaction, true);
+                updateChannelOnAllChannels(_channel11.id, _channelUpdateParams);
+                if (checkChannelExistsOnMessagesMap(_channel11.id)) {
+                  removeReactionToMessageOnMap(_channel11.id, _message3, _reaction, true);
                 }
                 return _context.abrupt("break", 423);
               case 312:
-                _channel14 = args.channel;
-                if (!_channel14) {
+                _channel12 = args.channel;
+                if (!_channel12) {
                   _context.next = 318;
                   break;
                 }
-                _updatedChannel = JSON.parse(JSON.stringify(_channel14));
+                _updatedChannel = JSON.parse(JSON.stringify(_channel12));
                 _context.next = 317;
-                return effects.put(updateChannelDataAC(_channel14.id, _updatedChannel));
+                return effects.put(updateChannelDataAC(_channel12.id, _updatedChannel));
               case 317:
-                updateChannelOnAllChannels(_channel14.id, _updatedChannel);
+                updateChannelOnAllChannels(_channel12.id, _updatedChannel);
               case 318:
                 return _context.abrupt("break", 423);
               case 319:
-                _channel15 = args.channel;
-                log.info('CLEAR_HISTORY: ', _channel15);
+                _channel13 = args.channel;
+                log.info('CLEAR_HISTORY: ', _channel13);
                 _context.next = 323;
                 return effects.call(getActiveChannelId);
               case 323:
-                _activeChannelId11 = _context.sent;
+                _activeChannelId1 = _context.sent;
                 _context.next = 326;
-                return effects.call(checkChannelExists, _channel15.id);
+                return effects.call(checkChannelExists, _channel13.id);
               case 326:
                 channelExist = _context.sent;
-                if (!(_channel15.id === _activeChannelId11)) {
+                if (!(_channel13.id === _activeChannelId1)) {
                   _context.next = 331;
                   break;
                 }
@@ -12549,141 +12517,141 @@ function watchForEvents() {
               case 330:
                 removeAllMessages();
               case 331:
-                removeMessagesFromMap(_channel15.id);
+                removeMessagesFromMap(_channel13.id);
                 if (!channelExist) {
                   _context.next = 335;
                   break;
                 }
                 _context.next = 335;
-                return effects.put(updateChannelDataAC(_channel15.id, {
+                return effects.put(updateChannelDataAC(_channel13.id, {
                   lastMessage: null,
                   newMessageCount: 0,
                   newMentionCount: 0,
-                  muted: _channel15.muted,
-                  mutedTill: _channel15.mutedTill
+                  muted: _channel13.muted,
+                  mutedTill: _channel13.mutedTill
                 }));
               case 335:
-                updateChannelOnAllChannels(_channel15.id, {
+                updateChannelOnAllChannels(_channel13.id, {
                   lastMessage: null,
                   newMessageCount: 0,
                   newMentionCount: 0,
-                  muted: _channel15.muted,
-                  mutedTill: _channel15.mutedTill
+                  muted: _channel13.muted,
+                  mutedTill: _channel13.mutedTill
                 });
                 return _context.abrupt("break", 423);
               case 337:
-                _channel16 = args.channel;
+                _channel14 = args.channel;
                 log.info('channel MUTE ... ');
                 _context.next = 341;
-                return effects.put(updateChannelDataAC(_channel16.id, {
-                  muted: _channel16.muted,
-                  mutedTill: _channel16.mutedTill
+                return effects.put(updateChannelDataAC(_channel14.id, {
+                  muted: _channel14.muted,
+                  mutedTill: _channel14.mutedTill
                 }));
               case 341:
-                updateChannelOnAllChannels(_channel16.id, {
-                  muted: _channel16.muted,
-                  mutedTill: _channel16.mutedTill
+                updateChannelOnAllChannels(_channel14.id, {
+                  muted: _channel14.muted,
+                  mutedTill: _channel14.mutedTill
                 });
                 return _context.abrupt("break", 423);
               case 343:
-                _channel17 = args.channel;
+                _channel15 = args.channel;
                 log.info('channel UNMUTE ... ');
                 _context.next = 347;
-                return effects.put(updateChannelDataAC(_channel17.id, {
-                  muted: _channel17.muted,
-                  mutedTill: _channel17.mutedTill
+                return effects.put(updateChannelDataAC(_channel15.id, {
+                  muted: _channel15.muted,
+                  mutedTill: _channel15.mutedTill
                 }));
               case 347:
-                updateChannelOnAllChannels(_channel17.id, {
-                  muted: _channel17.muted,
-                  mutedTill: _channel17.mutedTill
+                updateChannelOnAllChannels(_channel15.id, {
+                  muted: _channel15.muted,
+                  mutedTill: _channel15.mutedTill
                 });
                 return _context.abrupt("break", 423);
               case 349:
-                _channel18 = args.channel;
+                _channel16 = args.channel;
                 log.info('channel PINED ... ');
                 _context.next = 353;
-                return effects.put(updateChannelDataAC(_channel18.id, {
-                  pinnedAt: _channel18.pinnedAt
+                return effects.put(updateChannelDataAC(_channel16.id, {
+                  pinnedAt: _channel16.pinnedAt
                 }, true));
               case 353:
-                updateChannelOnAllChannels(_channel18.id, {
-                  pinnedAt: _channel18.pinnedAt
+                updateChannelOnAllChannels(_channel16.id, {
+                  pinnedAt: _channel16.pinnedAt
                 });
                 return _context.abrupt("break", 423);
               case 355:
-                _channel19 = args.channel;
+                _channel17 = args.channel;
                 log.info('channel UNPINED ... ');
                 _context.next = 359;
-                return effects.put(updateChannelDataAC(_channel19.id, {
-                  pinnedAt: _channel19.pinnedAt
+                return effects.put(updateChannelDataAC(_channel17.id, {
+                  pinnedAt: _channel17.pinnedAt
                 }, false, true));
               case 359:
-                updateChannelOnAllChannels(_channel19.id, {
-                  pinnedAt: _channel19.pinnedAt
+                updateChannelOnAllChannels(_channel17.id, {
+                  pinnedAt: _channel17.pinnedAt
                 });
                 return _context.abrupt("break", 423);
               case 361:
-                _channel20 = args.channel;
+                _channel18 = args.channel;
                 log.info('channel HIDE ... ');
                 _context.next = 365;
-                return effects.put(setChannelToHideAC(_channel20));
+                return effects.put(setChannelToHideAC(_channel18));
               case 365:
                 return _context.abrupt("break", 423);
               case 366:
-                _channel21 = args.channel;
+                _channel19 = args.channel;
                 log.info('channel UNHIDE ... ');
                 _context.next = 370;
-                return effects.put(setChannelToUnHideAC(_channel21));
+                return effects.put(setChannelToUnHideAC(_channel19));
               case 370:
                 return _context.abrupt("break", 423);
               case 371:
-                _channel22 = args.channel;
+                _channel20 = args.channel;
                 _context.next = 374;
-                return effects.put(updateChannelDataAC(_channel22.id, {
-                  unread: _channel22.unread,
-                  muted: _channel22.muted,
-                  mutedTill: _channel22.mutedTill
+                return effects.put(updateChannelDataAC(_channel20.id, {
+                  unread: _channel20.unread,
+                  muted: _channel20.muted,
+                  mutedTill: _channel20.mutedTill
                 }));
               case 374:
-                _groupName5 = getChannelGroupName(_channel22);
+                _groupName5 = getChannelGroupName(_channel20);
                 _context.next = 377;
-                return effects.put(updateSearchedChannelDataAC(_channel22.id, {
-                  unread: _channel22.unread
+                return effects.put(updateSearchedChannelDataAC(_channel20.id, {
+                  unread: _channel20.unread
                 }, _groupName5));
               case 377:
-                updateChannelOnAllChannels(_channel22.id, {
-                  unread: _channel22.unread
+                updateChannelOnAllChannels(_channel20.id, {
+                  unread: _channel20.unread
                 });
                 return _context.abrupt("break", 423);
               case 379:
-                _channel23 = args.channel;
+                _channel21 = args.channel;
                 _context.next = 382;
-                return effects.put(updateChannelDataAC(_channel23.id, {
-                  unread: _channel23.unread,
-                  muted: _channel23.muted,
-                  mutedTill: _channel23.mutedTill
+                return effects.put(updateChannelDataAC(_channel21.id, {
+                  unread: _channel21.unread,
+                  muted: _channel21.muted,
+                  mutedTill: _channel21.mutedTill
                 }));
               case 382:
-                _groupName6 = getChannelGroupName(_channel23);
+                _groupName6 = getChannelGroupName(_channel21);
                 _context.next = 385;
-                return effects.put(updateSearchedChannelDataAC(_channel23.id, {
-                  unread: _channel23.unread
+                return effects.put(updateSearchedChannelDataAC(_channel21.id, {
+                  unread: _channel21.unread
                 }, _groupName6));
               case 385:
-                updateChannelOnAllChannels(_channel23.id, {
-                  unread: _channel23.unread
+                updateChannelOnAllChannels(_channel21.id, {
+                  unread: _channel21.unread
                 });
                 return _context.abrupt("break", 423);
               case 387:
-                _channel24 = args.channel, members = args.members;
-                log.info('channel CHANGE_ROLE  channel ... ', _channel24);
+                _channel22 = args.channel, members = args.members;
+                log.info('channel CHANGE_ROLE  channel ... ', _channel22);
                 log.info('channel CHANGE_ROLE  member ... ', members);
                 _context.next = 392;
                 return effects.call(getActiveChannelId);
               case 392:
-                _activeChannelId12 = _context.sent;
-                if (!(_channel24.id === _activeChannelId12)) {
+                _activeChannelId10 = _context.sent;
+                if (!(_channel22.id === _activeChannelId10)) {
                   _context.next = 396;
                   break;
                 }
@@ -12701,16 +12669,16 @@ function watchForEvents() {
                   break;
                 }
                 _context.next = 401;
-                return effects.put(updateChannelDataAC(_channel24.id, {
+                return effects.put(updateChannelDataAC(_channel22.id, {
                   userRole: members[i].role,
-                  muted: _channel24.muted,
-                  mutedTill: _channel24.mutedTill
+                  muted: _channel22.muted,
+                  mutedTill: _channel22.mutedTill
                 }));
               case 401:
-                updateChannelOnAllChannels(_channel24.id, {
+                updateChannelOnAllChannels(_channel22.id, {
                   userRole: members[i].role,
-                  muted: _channel24.muted,
-                  mutedTill: _channel24.mutedTill
+                  muted: _channel22.muted,
+                  mutedTill: _channel22.mutedTill
                 });
               case 402:
                 i++;
@@ -12719,12 +12687,12 @@ function watchForEvents() {
               case 405:
                 return _context.abrupt("break", 423);
               case 406:
-                _channel25 = args.channel;
-                log.info('channel frozen  channel ... ', _channel25);
+                _channel23 = args.channel;
+                log.info('channel frozen  channel ... ', _channel23);
                 return _context.abrupt("break", 423);
               case 409:
-                _channel26 = args.channel;
-                log.info('channel unfrozen  channel ... ', _channel26);
+                _channel24 = args.channel;
+                log.info('channel unfrozen  channel ... ', _channel24);
                 return _context.abrupt("break", 423);
               case 412:
                 log.info('channel event received >>>... . . . . . ', args);
@@ -12847,25 +12815,25 @@ var _marked$1 = /*#__PURE__*/_regeneratorRuntime().mark(createChannel),
   _marked7 = /*#__PURE__*/_regeneratorRuntime().mark(channelsForForwardLoadMore),
   _marked8 = /*#__PURE__*/_regeneratorRuntime().mark(markMessagesRead),
   _marked9 = /*#__PURE__*/_regeneratorRuntime().mark(markMessagesDelivered),
-  _marked10 = /*#__PURE__*/_regeneratorRuntime().mark(switchChannel),
-  _marked11 = /*#__PURE__*/_regeneratorRuntime().mark(notificationsTurnOff),
-  _marked12 = /*#__PURE__*/_regeneratorRuntime().mark(notificationsTurnOn),
-  _marked13 = /*#__PURE__*/_regeneratorRuntime().mark(markChannelAsRead),
-  _marked14 = /*#__PURE__*/_regeneratorRuntime().mark(markChannelAsUnRead),
-  _marked15 = /*#__PURE__*/_regeneratorRuntime().mark(pinChannel),
-  _marked16 = /*#__PURE__*/_regeneratorRuntime().mark(unpinChannel),
-  _marked17 = /*#__PURE__*/_regeneratorRuntime().mark(removeChannelCaches),
-  _marked18 = /*#__PURE__*/_regeneratorRuntime().mark(leaveChannel),
-  _marked19 = /*#__PURE__*/_regeneratorRuntime().mark(deleteChannel),
-  _marked20 = /*#__PURE__*/_regeneratorRuntime().mark(blockChannel),
-  _marked21 = /*#__PURE__*/_regeneratorRuntime().mark(updateChannel),
-  _marked22 = /*#__PURE__*/_regeneratorRuntime().mark(checkUsersStatus),
-  _marked23 = /*#__PURE__*/_regeneratorRuntime().mark(sendTyping),
-  _marked24 = /*#__PURE__*/_regeneratorRuntime().mark(clearHistory),
-  _marked25 = /*#__PURE__*/_regeneratorRuntime().mark(deleteAllMessages),
-  _marked26 = /*#__PURE__*/_regeneratorRuntime().mark(joinChannel),
-  _marked27 = /*#__PURE__*/_regeneratorRuntime().mark(watchForChannelEvents),
-  _marked28 = /*#__PURE__*/_regeneratorRuntime().mark(ChannelsSaga);
+  _marked0 = /*#__PURE__*/_regeneratorRuntime().mark(switchChannel),
+  _marked1 = /*#__PURE__*/_regeneratorRuntime().mark(notificationsTurnOff),
+  _marked10 = /*#__PURE__*/_regeneratorRuntime().mark(notificationsTurnOn),
+  _marked11 = /*#__PURE__*/_regeneratorRuntime().mark(markChannelAsRead),
+  _marked12 = /*#__PURE__*/_regeneratorRuntime().mark(markChannelAsUnRead),
+  _marked13 = /*#__PURE__*/_regeneratorRuntime().mark(pinChannel),
+  _marked14 = /*#__PURE__*/_regeneratorRuntime().mark(unpinChannel),
+  _marked15 = /*#__PURE__*/_regeneratorRuntime().mark(removeChannelCaches),
+  _marked16 = /*#__PURE__*/_regeneratorRuntime().mark(leaveChannel),
+  _marked17 = /*#__PURE__*/_regeneratorRuntime().mark(deleteChannel),
+  _marked18 = /*#__PURE__*/_regeneratorRuntime().mark(blockChannel),
+  _marked19 = /*#__PURE__*/_regeneratorRuntime().mark(updateChannel),
+  _marked20 = /*#__PURE__*/_regeneratorRuntime().mark(checkUsersStatus),
+  _marked21 = /*#__PURE__*/_regeneratorRuntime().mark(sendTyping),
+  _marked22 = /*#__PURE__*/_regeneratorRuntime().mark(clearHistory),
+  _marked23 = /*#__PURE__*/_regeneratorRuntime().mark(deleteAllMessages),
+  _marked24 = /*#__PURE__*/_regeneratorRuntime().mark(joinChannel),
+  _marked25 = /*#__PURE__*/_regeneratorRuntime().mark(watchForChannelEvents),
+  _marked26 = /*#__PURE__*/_regeneratorRuntime().mark(ChannelsSaga);
 function createChannel(action) {
   var payload, channelData, dontCreateIfNotExists, SceytChatClient, createChannelData, fileToUpload, isSelfChannel, channelIsExistOnAllChannels, createdChannel, allChannels, memberId, checkChannelExist, messageToSend, _allChannels, _memberId;
   return _regeneratorRuntime().wrap(function createChannel$(_context) {
@@ -13761,182 +13729,182 @@ function markMessagesDelivered(action) {
 }
 function switchChannel(action) {
   var payload, channel, channelToSwitch, existingChannel, addChannel, SceytChatClient, fetchedChannel, channelFromMap, currentActiveChannel;
-  return _regeneratorRuntime().wrap(function switchChannel$(_context10) {
-    while (1) switch (_context10.prev = _context10.next) {
+  return _regeneratorRuntime().wrap(function switchChannel$(_context0) {
+    while (1) switch (_context0.prev = _context0.next) {
       case 0:
-        _context10.prev = 0;
+        _context0.prev = 0;
         payload = action.payload;
         channel = payload.channel;
         channelToSwitch = channel;
         if (channel !== null && channel !== void 0 && channel.id) {
-          _context10.next = 10;
+          _context0.next = 10;
           break;
         }
-        _context10.next = 7;
+        _context0.next = 7;
         return effects.call(setActiveChannelId, '');
       case 7:
-        _context10.next = 9;
+        _context0.next = 9;
         return effects.put(setActiveChannelAC({}));
       case 9:
-        return _context10.abrupt("return");
+        return _context0.abrupt("return");
       case 10:
         existingChannel = checkChannelExists(channel.id);
         if (existingChannel) {
-          _context10.next = 31;
+          _context0.next = 31;
           break;
         }
         addChannel = getChannelFromAllChannels(channel.id);
         if (!addChannel) {
-          _context10.next = 20;
+          _context0.next = 20;
           break;
         }
         setChannelInMap(addChannel);
-        _context10.next = 17;
+        _context0.next = 17;
         return effects.put(addChannelAC(JSON.parse(JSON.stringify(addChannel))));
       case 17:
         channelToSwitch = _extends({}, channelToSwitch, addChannel);
-        _context10.next = 29;
+        _context0.next = 29;
         break;
       case 20:
         SceytChatClient = getClient();
-        _context10.next = 23;
+        _context0.next = 23;
         return effects.call(SceytChatClient.getChannel, channel.id);
       case 23:
-        fetchedChannel = _context10.sent;
+        fetchedChannel = _context0.sent;
         addChannelToAllChannels(fetchedChannel);
         setChannelInMap(fetchedChannel);
-        _context10.next = 28;
+        _context0.next = 28;
         return effects.put(addChannelAC(JSON.parse(JSON.stringify(fetchedChannel))));
       case 28:
         channelToSwitch = _extends({}, channelToSwitch, fetchedChannel);
       case 29:
-        _context10.next = 33;
+        _context0.next = 33;
         break;
       case 31:
         channelFromMap = getChannelFromMap(channel.id);
         channelToSwitch = _extends({}, channelToSwitch, channelFromMap);
       case 33:
         currentActiveChannel = getChannelFromMap(getActiveChannelId());
-        _context10.next = 36;
+        _context0.next = 36;
         return effects.call(setUnreadScrollTo, true);
       case 36:
-        _context10.next = 38;
+        _context0.next = 38;
         return effects.call(setActiveChannelId, channel && channel.id);
       case 38:
         if (channel.isLinkedChannel) {
           channelToSwitch.linkedFrom = currentActiveChannel;
         }
-        _context10.next = 41;
+        _context0.next = 41;
         return effects.put(setActiveChannelAC(_extends({}, channelToSwitch)));
       case 41:
-        _context10.next = 47;
+        _context0.next = 47;
         break;
       case 44:
-        _context10.prev = 44;
-        _context10.t0 = _context10["catch"](0);
-        log.error('error in switch channel', _context10.t0);
+        _context0.prev = 44;
+        _context0.t0 = _context0["catch"](0);
+        log.error('error in switch channel', _context0.t0);
       case 47:
       case "end":
-        return _context10.stop();
+        return _context0.stop();
     }
-  }, _marked10, null, [[0, 44]]);
+  }, _marked0, null, [[0, 44]]);
 }
 function notificationsTurnOff(action) {
   var expireTime, activeChannelId, channel, updatedChannel;
-  return _regeneratorRuntime().wrap(function notificationsTurnOff$(_context11) {
-    while (1) switch (_context11.prev = _context11.next) {
+  return _regeneratorRuntime().wrap(function notificationsTurnOff$(_context1) {
+    while (1) switch (_context1.prev = _context1.next) {
       case 0:
         expireTime = action.payload.expireTime;
-        _context11.next = 3;
+        _context1.next = 3;
         return effects.call(getActiveChannelId);
       case 3:
-        activeChannelId = _context11.sent;
-        _context11.next = 6;
+        activeChannelId = _context1.sent;
+        _context1.next = 6;
         return effects.call(getChannelFromMap, activeChannelId);
       case 6:
-        channel = _context11.sent;
-        _context11.prev = 7;
-        _context11.next = 10;
+        channel = _context1.sent;
+        _context1.prev = 7;
+        _context1.next = 10;
         return effects.call(channel.mute, expireTime);
       case 10:
-        updatedChannel = _context11.sent;
+        updatedChannel = _context1.sent;
         updateChannelOnAllChannels(channel.id, {
           muted: updatedChannel.muted,
           mutedTill: updatedChannel.mutedTill
         });
-        _context11.next = 14;
+        _context1.next = 14;
         return effects.put(updateChannelDataAC(updatedChannel.id, {
           muted: updatedChannel.muted,
           mutedTill: updatedChannel.mutedTill
         }));
       case 14:
-        _context11.next = 19;
+        _context1.next = 19;
         break;
       case 16:
-        _context11.prev = 16;
-        _context11.t0 = _context11["catch"](7);
-        log.error('ERROR turn off notifications', _context11.t0.message);
+        _context1.prev = 16;
+        _context1.t0 = _context1["catch"](7);
+        log.error('ERROR turn off notifications', _context1.t0.message);
       case 19:
       case "end":
-        return _context11.stop();
+        return _context1.stop();
     }
-  }, _marked11, null, [[7, 16]]);
+  }, _marked1, null, [[7, 16]]);
 }
 function notificationsTurnOn() {
   var activeChannelId, channel, updatedChannel;
-  return _regeneratorRuntime().wrap(function notificationsTurnOn$(_context12) {
-    while (1) switch (_context12.prev = _context12.next) {
+  return _regeneratorRuntime().wrap(function notificationsTurnOn$(_context10) {
+    while (1) switch (_context10.prev = _context10.next) {
       case 0:
-        _context12.next = 2;
+        _context10.next = 2;
         return effects.call(getActiveChannelId);
       case 2:
-        activeChannelId = _context12.sent;
-        _context12.next = 5;
+        activeChannelId = _context10.sent;
+        _context10.next = 5;
         return effects.call(getChannelFromMap, activeChannelId);
       case 5:
-        channel = _context12.sent;
-        _context12.prev = 6;
-        _context12.next = 9;
+        channel = _context10.sent;
+        _context10.prev = 6;
+        _context10.next = 9;
         return effects.call(channel.unmute);
       case 9:
-        updatedChannel = _context12.sent;
+        updatedChannel = _context10.sent;
         updateChannelOnAllChannels(channel.id, {
           muted: updatedChannel.muted,
           mutedTill: updatedChannel.mutedTill
         });
-        _context12.next = 13;
+        _context10.next = 13;
         return effects.put(updateChannelDataAC(updatedChannel.id, {
           muted: updatedChannel.muted,
           mutedTill: updatedChannel.mutedTill
         }));
       case 13:
-        _context12.next = 18;
+        _context10.next = 18;
         break;
       case 15:
-        _context12.prev = 15;
-        _context12.t0 = _context12["catch"](6);
-        log.error('ERROR turn on notifications: ', _context12.t0.message);
+        _context10.prev = 15;
+        _context10.t0 = _context10["catch"](6);
+        log.error('ERROR turn on notifications: ', _context10.t0.message);
       case 18:
       case "end":
-        return _context12.stop();
+        return _context10.stop();
     }
-  }, _marked12, null, [[6, 15]]);
+  }, _marked10, null, [[6, 15]]);
 }
 function markChannelAsRead(action) {
   var channelId, channel, updateData;
-  return _regeneratorRuntime().wrap(function markChannelAsRead$(_context13) {
-    while (1) switch (_context13.prev = _context13.next) {
+  return _regeneratorRuntime().wrap(function markChannelAsRead$(_context11) {
+    while (1) switch (_context11.prev = _context11.next) {
       case 0:
-        _context13.prev = 0;
+        _context11.prev = 0;
         channelId = action.payload.channelId;
-        _context13.next = 4;
+        _context11.next = 4;
         return effects.call(getChannelFromMap, channelId);
       case 4:
-        channel = _context13.sent;
+        channel = _context11.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
-        _context13.next = 8;
+        _context11.next = 8;
         return effects.call(channel.markAsRead);
       case 8:
         updateData = {
@@ -13945,316 +13913,316 @@ function markChannelAsRead(action) {
           newMentionCount: 0
         };
         updateChannelOnAllChannels(channel.id, updateData);
-        _context13.next = 12;
+        _context11.next = 12;
         return effects.put(updateChannelDataAC(channel.id, updateData));
       case 12:
-        _context13.next = 17;
+        _context11.next = 17;
         break;
       case 14:
-        _context13.prev = 14;
-        _context13.t0 = _context13["catch"](0);
-        log.error(_context13.t0, 'Error in set channel unread');
+        _context11.prev = 14;
+        _context11.t0 = _context11["catch"](0);
+        log.error(_context11.t0, 'Error in set channel unread');
       case 17:
       case "end":
-        return _context13.stop();
+        return _context11.stop();
     }
-  }, _marked13, null, [[0, 14]]);
+  }, _marked11, null, [[0, 14]]);
 }
 function markChannelAsUnRead(action) {
   var channelId, channel;
-  return _regeneratorRuntime().wrap(function markChannelAsUnRead$(_context14) {
-    while (1) switch (_context14.prev = _context14.next) {
+  return _regeneratorRuntime().wrap(function markChannelAsUnRead$(_context12) {
+    while (1) switch (_context12.prev = _context12.next) {
       case 0:
-        _context14.prev = 0;
+        _context12.prev = 0;
         channelId = action.payload.channelId;
-        _context14.next = 4;
+        _context12.next = 4;
         return effects.call(getChannelFromMap, channelId);
       case 4:
-        channel = _context14.sent;
+        channel = _context12.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
-        _context14.next = 8;
+        _context12.next = 8;
         return effects.call(channel.markAsUnRead);
       case 8:
         updateChannelOnAllChannels(channel.id, {
           unread: true
         });
-        _context14.next = 11;
+        _context12.next = 11;
         return effects.put(updateChannelDataAC(channel.id, {
           unread: true
         }));
       case 11:
-        _context14.next = 16;
+        _context12.next = 16;
         break;
       case 13:
-        _context14.prev = 13;
-        _context14.t0 = _context14["catch"](0);
-        log.error(_context14.t0, 'Error in set channel unread');
+        _context12.prev = 13;
+        _context12.t0 = _context12["catch"](0);
+        log.error(_context12.t0, 'Error in set channel unread');
       case 16:
       case "end":
-        return _context14.stop();
+        return _context12.stop();
     }
-  }, _marked14, null, [[0, 13]]);
+  }, _marked12, null, [[0, 13]]);
 }
 function pinChannel(action) {
   var channelId, channel, updatedChannel;
-  return _regeneratorRuntime().wrap(function pinChannel$(_context15) {
-    while (1) switch (_context15.prev = _context15.next) {
+  return _regeneratorRuntime().wrap(function pinChannel$(_context13) {
+    while (1) switch (_context13.prev = _context13.next) {
       case 0:
-        _context15.prev = 0;
+        _context13.prev = 0;
         channelId = action.payload.channelId;
-        _context15.next = 4;
+        _context13.next = 4;
         return effects.call(getChannelFromMap, channelId);
       case 4:
-        channel = _context15.sent;
+        channel = _context13.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
-        _context15.next = 8;
+        _context13.next = 8;
         return effects.call(channel.pin);
       case 8:
-        updatedChannel = _context15.sent;
+        updatedChannel = _context13.sent;
         updateChannelOnAllChannels(channel.id, {
           pinnedAt: updatedChannel.pinnedAt
         });
-        _context15.next = 12;
+        _context13.next = 12;
         return effects.put(updateChannelDataAC(updatedChannel.id, {
           pinnedAt: updatedChannel.pinnedAt
         }, true));
       case 12:
-        _context15.next = 17;
+        _context13.next = 17;
         break;
       case 14:
-        _context15.prev = 14;
-        _context15.t0 = _context15["catch"](0);
-        log.error(_context15.t0, 'Error in pinChannel');
+        _context13.prev = 14;
+        _context13.t0 = _context13["catch"](0);
+        log.error(_context13.t0, 'Error in pinChannel');
       case 17:
       case "end":
-        return _context15.stop();
+        return _context13.stop();
     }
-  }, _marked15, null, [[0, 14]]);
+  }, _marked13, null, [[0, 14]]);
 }
 function unpinChannel(action) {
   var channelId, channel, updatedChannel;
-  return _regeneratorRuntime().wrap(function unpinChannel$(_context16) {
-    while (1) switch (_context16.prev = _context16.next) {
+  return _regeneratorRuntime().wrap(function unpinChannel$(_context14) {
+    while (1) switch (_context14.prev = _context14.next) {
       case 0:
-        _context16.prev = 0;
+        _context14.prev = 0;
         channelId = action.payload.channelId;
-        _context16.next = 4;
+        _context14.next = 4;
         return effects.call(getChannelFromMap, channelId);
       case 4:
-        channel = _context16.sent;
+        channel = _context14.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
-        _context16.next = 8;
+        _context14.next = 8;
         return effects.call(channel.unpin);
       case 8:
-        updatedChannel = _context16.sent;
+        updatedChannel = _context14.sent;
         updateChannelOnAllChannels(channel.id, {
           pinnedAt: updatedChannel.pinnedAt
         });
-        _context16.next = 12;
+        _context14.next = 12;
         return effects.put(updateChannelDataAC(updatedChannel.id, {
           pinnedAt: updatedChannel.pinnedAt
         }, false, true));
       case 12:
-        _context16.next = 17;
+        _context14.next = 17;
         break;
       case 14:
-        _context16.prev = 14;
-        _context16.t0 = _context16["catch"](0);
-        log.error(_context16.t0, 'Error in unpinChannel');
+        _context14.prev = 14;
+        _context14.t0 = _context14["catch"](0);
+        log.error(_context14.t0, 'Error in unpinChannel');
       case 17:
       case "end":
-        return _context16.stop();
+        return _context14.stop();
     }
-  }, _marked16, null, [[0, 14]]);
+  }, _marked14, null, [[0, 14]]);
 }
 function removeChannelCaches(action) {
   var payload, channelId, activeChannelId, activeChannel;
-  return _regeneratorRuntime().wrap(function removeChannelCaches$(_context17) {
-    while (1) switch (_context17.prev = _context17.next) {
+  return _regeneratorRuntime().wrap(function removeChannelCaches$(_context15) {
+    while (1) switch (_context15.prev = _context15.next) {
       case 0:
         payload = action.payload;
         channelId = payload.channelId;
-        _context17.next = 4;
+        _context15.next = 4;
         return effects.call(getActiveChannelId);
       case 4:
-        activeChannelId = _context17.sent;
+        activeChannelId = _context15.sent;
         removeChannelFromMap(channelId);
         removeMessagesFromMap(channelId);
         if (!(activeChannelId === channelId)) {
-          _context17.next = 14;
+          _context15.next = 14;
           break;
         }
-        _context17.next = 10;
+        _context15.next = 10;
         return effects.call(getLastChannelFromMap);
       case 10:
-        activeChannel = _context17.sent;
+        activeChannel = _context15.sent;
         if (!activeChannel) {
-          _context17.next = 14;
+          _context15.next = 14;
           break;
         }
-        _context17.next = 14;
+        _context15.next = 14;
         return effects.put(switchChannelActionAC(JSON.parse(JSON.stringify(activeChannel))));
       case 14:
       case "end":
-        return _context17.stop();
+        return _context15.stop();
     }
-  }, _marked17);
+  }, _marked15);
 }
 function leaveChannel(action) {
   var payload, channelId, channel, messageBuilder, messageToSend;
-  return _regeneratorRuntime().wrap(function leaveChannel$(_context18) {
-    while (1) switch (_context18.prev = _context18.next) {
+  return _regeneratorRuntime().wrap(function leaveChannel$(_context16) {
+    while (1) switch (_context16.prev = _context16.next) {
       case 0:
-        _context18.prev = 0;
+        _context16.prev = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context18.next = 5;
+        _context16.next = 5;
         return effects.call(getChannelFromMap, channelId);
       case 5:
-        channel = _context18.sent;
+        channel = _context16.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (!channel) {
-          _context18.next = 24;
+          _context16.next = 24;
           break;
         }
         if (!(channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE)) {
-          _context18.next = 16;
+          _context16.next = 16;
           break;
         }
         messageBuilder = channel.createMessageBuilder();
         messageBuilder.setBody('LG').setType('system').setDisplayCount(0).setSilent(true);
         messageToSend = messageBuilder.create();
         log.info('send message for left');
-        _context18.next = 16;
+        _context16.next = 16;
         return effects.call(channel.sendMessage, messageToSend);
       case 16:
         log.info('leave');
-        _context18.next = 19;
+        _context16.next = 19;
         return effects.call(channel.leave);
       case 19:
-        _context18.next = 21;
+        _context16.next = 21;
         return effects.put(removeChannelAC(channelId));
       case 21:
         deleteChannelFromAllChannels(channelId);
-        _context18.next = 24;
+        _context16.next = 24;
         return effects.put(removeChannelCachesAC(channelId));
       case 24:
-        _context18.next = 29;
+        _context16.next = 29;
         break;
       case 26:
-        _context18.prev = 26;
-        _context18.t0 = _context18["catch"](0);
-        log.error('ERROR in leave channel - ', _context18.t0.message);
+        _context16.prev = 26;
+        _context16.t0 = _context16["catch"](0);
+        log.error('ERROR in leave channel - ', _context16.t0.message);
       case 29:
       case "end":
-        return _context18.stop();
+        return _context16.stop();
     }
-  }, _marked18, null, [[0, 26]]);
+  }, _marked16, null, [[0, 26]]);
 }
 function deleteChannel(action) {
   var payload, channelId, channel;
-  return _regeneratorRuntime().wrap(function deleteChannel$(_context19) {
-    while (1) switch (_context19.prev = _context19.next) {
+  return _regeneratorRuntime().wrap(function deleteChannel$(_context17) {
+    while (1) switch (_context17.prev = _context17.next) {
       case 0:
-        _context19.prev = 0;
+        _context17.prev = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context19.next = 5;
+        _context17.next = 5;
         return effects.call(getChannelFromMap, channelId);
       case 5:
-        channel = _context19.sent;
+        channel = _context17.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (!channel) {
-          _context19.next = 16;
+          _context17.next = 16;
           break;
         }
-        _context19.next = 10;
+        _context17.next = 10;
         return effects.call(channel["delete"]);
       case 10:
-        _context19.next = 12;
+        _context17.next = 12;
         return effects.put(setChannelToRemoveAC(channel));
       case 12:
-        _context19.next = 14;
+        _context17.next = 14;
         return effects.put(removeChannelAC(channelId));
       case 14:
-        _context19.next = 16;
+        _context17.next = 16;
         return effects.put(removeChannelCachesAC(channelId));
       case 16:
-        _context19.next = 21;
+        _context17.next = 21;
         break;
       case 18:
-        _context19.prev = 18;
-        _context19.t0 = _context19["catch"](0);
-        log.error('ERROR in delete channel', _context19.t0);
+        _context17.prev = 18;
+        _context17.t0 = _context17["catch"](0);
+        log.error('ERROR in delete channel', _context17.t0);
       case 21:
       case "end":
-        return _context19.stop();
+        return _context17.stop();
     }
-  }, _marked19, null, [[0, 18]]);
+  }, _marked17, null, [[0, 18]]);
 }
 function blockChannel(action) {
   var payload, channelId, channel;
-  return _regeneratorRuntime().wrap(function blockChannel$(_context20) {
-    while (1) switch (_context20.prev = _context20.next) {
+  return _regeneratorRuntime().wrap(function blockChannel$(_context18) {
+    while (1) switch (_context18.prev = _context18.next) {
       case 0:
-        _context20.prev = 0;
+        _context18.prev = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context20.next = 5;
+        _context18.next = 5;
         return effects.call(getChannelFromMap, channelId);
       case 5:
-        channel = _context20.sent;
+        channel = _context18.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (!channel) {
-          _context20.next = 14;
+          _context18.next = 14;
           break;
         }
-        _context20.next = 10;
+        _context18.next = 10;
         return effects.call(channel.block);
       case 10:
-        _context20.next = 12;
+        _context18.next = 12;
         return effects.put(removeChannelAC(channelId));
       case 12:
-        _context20.next = 14;
+        _context18.next = 14;
         return effects.put(removeChannelCachesAC(channelId));
       case 14:
-        _context20.next = 19;
+        _context18.next = 19;
         break;
       case 16:
-        _context20.prev = 16;
-        _context20.t0 = _context20["catch"](0);
-        log.error('ERROR in block channel - ', _context20.t0.message);
+        _context18.prev = 16;
+        _context18.t0 = _context18["catch"](0);
+        log.error('ERROR in block channel - ', _context18.t0.message);
       case 19:
       case "end":
-        return _context20.stop();
+        return _context18.stop();
     }
-  }, _marked20, null, [[0, 16]]);
+  }, _marked18, null, [[0, 16]]);
 }
 function updateChannel(action) {
   var payload, channelId, config, SceytChatClient, channel, paramsToUpdate, fileToUpload, _yield$call5, subject, avatarUrl, metadata;
-  return _regeneratorRuntime().wrap(function updateChannel$(_context21) {
-    while (1) switch (_context21.prev = _context21.next) {
+  return _regeneratorRuntime().wrap(function updateChannel$(_context19) {
+    while (1) switch (_context19.prev = _context19.next) {
       case 0:
-        _context21.prev = 0;
+        _context19.prev = 0;
         payload = action.payload;
         channelId = payload.channelId, config = payload.config;
         SceytChatClient = getClient();
-        _context21.next = 6;
+        _context19.next = 6;
         return effects.call(getChannelFromMap, channelId);
       case 6:
-        channel = _context21.sent;
+        channel = _context19.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
@@ -14265,7 +14233,7 @@ function updateChannel(action) {
           avatarUrl: channel.avatarUrl
         };
         if (!config.avatar) {
-          _context21.next = 14;
+          _context19.next = 14;
           break;
         }
         fileToUpload = {
@@ -14274,10 +14242,10 @@ function updateChannel(action) {
             log.info('upload percent - ', progressPercent);
           }
         };
-        _context21.next = 13;
+        _context19.next = 13;
         return effects.call(SceytChatClient.uploadFile, fileToUpload);
       case 13:
-        paramsToUpdate.avatarUrl = _context21.sent;
+        paramsToUpdate.avatarUrl = _context19.sent;
       case 14:
         if (config.subject) {
           paramsToUpdate.subject = config.subject;
@@ -14288,14 +14256,14 @@ function updateChannel(action) {
         if (config.avatarUrl === '') {
           paramsToUpdate.avatarUrl = '';
         }
-        _context21.next = 19;
+        _context19.next = 19;
         return effects.call(channel.update, paramsToUpdate);
       case 19:
-        _yield$call5 = _context21.sent;
+        _yield$call5 = _context19.sent;
         subject = _yield$call5.subject;
         avatarUrl = _yield$call5.avatarUrl;
         metadata = _yield$call5.metadata;
-        _context21.next = 25;
+        _context19.next = 25;
         return effects.put(updateChannelDataAC(channelId, {
           subject: subject,
           avatarUrl: avatarUrl,
@@ -14307,30 +14275,30 @@ function updateChannel(action) {
           avatarUrl: avatarUrl,
           metadata: isJSON(metadata) ? JSON.parse(metadata) : metadata
         });
-        _context21.next = 31;
+        _context19.next = 31;
         break;
       case 28:
-        _context21.prev = 28;
-        _context21.t0 = _context21["catch"](0);
-        log.error('ERROR in update channel', _context21.t0.message);
+        _context19.prev = 28;
+        _context19.t0 = _context19["catch"](0);
+        log.error('ERROR in update channel', _context19.t0.message);
       case 31:
       case "end":
-        return _context21.stop();
+        return _context19.stop();
     }
-  }, _marked21, null, [[0, 28]]);
+  }, _marked19, null, [[0, 28]]);
 }
 function checkUsersStatus() {
   var SceytChatClient, usersForUpdate, updatedUsers, usersToUpdateMap, update, updateData;
-  return _regeneratorRuntime().wrap(function checkUsersStatus$(_context22) {
-    while (1) switch (_context22.prev = _context22.next) {
+  return _regeneratorRuntime().wrap(function checkUsersStatus$(_context20) {
+    while (1) switch (_context20.prev = _context20.next) {
       case 0:
-        _context22.prev = 0;
+        _context20.prev = 0;
         SceytChatClient = getClient();
         usersForUpdate = Object.keys(usersMap);
-        _context22.next = 5;
+        _context20.next = 5;
         return effects.call(SceytChatClient.getUsers, usersForUpdate);
       case 5:
-        updatedUsers = _context22.sent;
+        updatedUsers = _context20.sent;
         usersToUpdateMap = {};
         update = false;
         updatedUsers.forEach(function (updatedUser) {
@@ -14341,112 +14309,112 @@ function checkUsersStatus() {
           }
         });
         if (!update) {
-          _context22.next = 17;
+          _context20.next = 17;
           break;
         }
         updateData = JSON.parse(JSON.stringify(usersToUpdateMap));
-        _context22.next = 13;
+        _context20.next = 13;
         return effects.put(updateMembersPresenceAC(updateData));
       case 13:
-        _context22.next = 15;
+        _context20.next = 15;
         return effects.put(updateUserStatusOnMapAC(updateData));
       case 15:
-        _context22.next = 17;
+        _context20.next = 17;
         return effects.put(updateUserStatusOnChannelAC(updateData));
       case 17:
-        _context22.next = 22;
+        _context20.next = 22;
         break;
       case 19:
-        _context22.prev = 19;
-        _context22.t0 = _context22["catch"](0);
-        log.error('ERROR in check user status : ', _context22.t0.message);
+        _context20.prev = 19;
+        _context20.t0 = _context20["catch"](0);
+        log.error('ERROR in check user status : ', _context20.t0.message);
       case 22:
       case "end":
-        return _context22.stop();
+        return _context20.stop();
     }
-  }, _marked22, null, [[0, 19]]);
+  }, _marked20, null, [[0, 19]]);
 }
 function sendTyping(action) {
   var state, activeChannelId, channel;
-  return _regeneratorRuntime().wrap(function sendTyping$(_context23) {
-    while (1) switch (_context23.prev = _context23.next) {
+  return _regeneratorRuntime().wrap(function sendTyping$(_context21) {
+    while (1) switch (_context21.prev = _context21.next) {
       case 0:
         state = action.payload.state;
-        _context23.next = 3;
+        _context21.next = 3;
         return effects.call(getActiveChannelId);
       case 3:
-        activeChannelId = _context23.sent;
-        _context23.next = 6;
+        activeChannelId = _context21.sent;
+        _context21.next = 6;
         return effects.call(getChannelFromMap, activeChannelId);
       case 6:
-        channel = _context23.sent;
-        _context23.prev = 7;
+        channel = _context21.sent;
+        _context21.prev = 7;
         if (!channel) {
-          _context23.next = 16;
+          _context21.next = 16;
           break;
         }
         if (!state) {
-          _context23.next = 14;
+          _context21.next = 14;
           break;
         }
-        _context23.next = 12;
+        _context21.next = 12;
         return effects.call(channel.startTyping);
       case 12:
-        _context23.next = 16;
+        _context21.next = 16;
         break;
       case 14:
-        _context23.next = 16;
+        _context21.next = 16;
         return effects.call(channel.stopTyping);
       case 16:
-        _context23.next = 21;
+        _context21.next = 21;
         break;
       case 18:
-        _context23.prev = 18;
-        _context23.t0 = _context23["catch"](7);
-        log.error('ERROR in send typing', _context23.t0);
+        _context21.prev = 18;
+        _context21.t0 = _context21["catch"](7);
+        log.error('ERROR in send typing', _context21.t0);
       case 21:
       case "end":
-        return _context23.stop();
+        return _context21.stop();
     }
-  }, _marked23, null, [[7, 18]]);
+  }, _marked21, null, [[7, 18]]);
 }
 function clearHistory(action) {
   var payload, channelId, channel, activeChannelId, groupName;
-  return _regeneratorRuntime().wrap(function clearHistory$(_context24) {
-    while (1) switch (_context24.prev = _context24.next) {
+  return _regeneratorRuntime().wrap(function clearHistory$(_context22) {
+    while (1) switch (_context22.prev = _context22.next) {
       case 0:
-        _context24.prev = 0;
+        _context22.prev = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context24.next = 5;
+        _context22.next = 5;
         return effects.call(getChannelFromMap, channelId);
       case 5:
-        channel = _context24.sent;
+        channel = _context22.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
-        _context24.next = 9;
+        _context22.next = 9;
         return effects.call(getActiveChannelId);
       case 9:
-        activeChannelId = _context24.sent;
+        activeChannelId = _context22.sent;
         if (!channel) {
-          _context24.next = 25;
+          _context22.next = 25;
           break;
         }
-        _context24.next = 13;
+        _context22.next = 13;
         return effects.call(channel.deleteAllMessages);
       case 13:
-        _context24.next = 15;
+        _context22.next = 15;
         return effects.put(clearMessagesAC());
       case 15:
         removeMessagesFromMap(channelId);
         if (channelId === activeChannelId) {
           removeAllMessages();
         }
-        _context24.next = 19;
+        _context22.next = 19;
         return effects.put(clearSelectedMessagesAC());
       case 19:
-        _context24.next = 21;
+        _context22.next = 21;
         return effects.put(updateChannelDataAC(channel.id, {
           lastMessage: null,
           newMessageCount: 0,
@@ -14459,65 +14427,65 @@ function clearHistory(action) {
           newMentionCount: 0
         });
         groupName = getChannelGroupName(channel);
-        _context24.next = 25;
+        _context22.next = 25;
         return effects.put(updateSearchedChannelDataAC(channel.id, {
           lastMessage: null,
           newMessageCount: 0,
           newMentionCount: 0
         }, groupName));
       case 25:
-        _context24.next = 30;
+        _context22.next = 30;
         break;
       case 27:
-        _context24.prev = 27;
-        _context24.t0 = _context24["catch"](0);
-        log.error('ERROR in clear history', _context24.t0);
+        _context22.prev = 27;
+        _context22.t0 = _context22["catch"](0);
+        log.error('ERROR in clear history', _context22.t0);
       case 30:
       case "end":
-        return _context24.stop();
+        return _context22.stop();
     }
-  }, _marked24, null, [[0, 27]]);
+  }, _marked22, null, [[0, 27]]);
 }
 function deleteAllMessages(action) {
   var payload, channelId, channel, activeChannelId, groupName;
-  return _regeneratorRuntime().wrap(function deleteAllMessages$(_context25) {
-    while (1) switch (_context25.prev = _context25.next) {
+  return _regeneratorRuntime().wrap(function deleteAllMessages$(_context23) {
+    while (1) switch (_context23.prev = _context23.next) {
       case 0:
-        _context25.prev = 0;
+        _context23.prev = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context25.next = 5;
+        _context23.next = 5;
         return effects.call(getChannelFromMap, channelId);
       case 5:
-        channel = _context25.sent;
+        channel = _context23.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
-        _context25.next = 9;
+        _context23.next = 9;
         return effects.call(getActiveChannelId);
       case 9:
-        activeChannelId = _context25.sent;
+        activeChannelId = _context23.sent;
         if (!channel) {
-          _context25.next = 26;
+          _context23.next = 26;
           break;
         }
-        _context25.next = 13;
+        _context23.next = 13;
         return effects.call(channel.deleteAllMessages, true);
       case 13:
         removeMessagesFromMap(channelId);
         if (!(channelId === activeChannelId)) {
-          _context25.next = 18;
+          _context23.next = 18;
           break;
         }
-        _context25.next = 17;
+        _context23.next = 17;
         return effects.put(clearMessagesAC());
       case 17:
         removeAllMessages();
       case 18:
-        _context25.next = 20;
+        _context23.next = 20;
         return effects.put(clearSelectedMessagesAC());
       case 20:
-        _context25.next = 22;
+        _context23.next = 22;
         return effects.put(updateChannelDataAC(channel.id, {
           lastMessage: null,
           newMessageCount: 0,
@@ -14530,180 +14498,180 @@ function deleteAllMessages(action) {
           newMentionCount: 0
         });
         groupName = getChannelGroupName(channel);
-        _context25.next = 26;
+        _context23.next = 26;
         return effects.put(updateSearchedChannelDataAC(channel.id, {
           lastMessage: null,
           newMessageCount: 0,
           newMentionCount: 0
         }, groupName));
       case 26:
-        _context25.next = 31;
+        _context23.next = 31;
         break;
       case 28:
-        _context25.prev = 28;
-        _context25.t0 = _context25["catch"](0);
-        log.error('ERROR in clear history', _context25.t0);
+        _context23.prev = 28;
+        _context23.t0 = _context23["catch"](0);
+        log.error('ERROR in clear history', _context23.t0);
       case 31:
       case "end":
-        return _context25.stop();
+        return _context23.stop();
     }
-  }, _marked25, null, [[0, 28]]);
+  }, _marked23, null, [[0, 28]]);
 }
 function joinChannel(action) {
   var payload, channelId, SceytChatClient, channel, joinedChannel;
-  return _regeneratorRuntime().wrap(function joinChannel$(_context26) {
-    while (1) switch (_context26.prev = _context26.next) {
+  return _regeneratorRuntime().wrap(function joinChannel$(_context24) {
+    while (1) switch (_context24.prev = _context24.next) {
       case 0:
-        _context26.prev = 0;
+        _context24.prev = 0;
         payload = action.payload;
         channelId = payload.channelId;
         SceytChatClient = getClient();
-        _context26.next = 6;
+        _context24.next = 6;
         return effects.call(getChannelFromMap, channelId);
       case 6:
-        channel = _context26.sent;
+        channel = _context24.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (channel) {
-          _context26.next = 12;
+          _context24.next = 12;
           break;
         }
-        _context26.next = 11;
+        _context24.next = 11;
         return effects.call(SceytChatClient.getChannel, channelId);
       case 11:
-        channel = _context26.sent;
+        channel = _context24.sent;
       case 12:
-        _context26.next = 14;
+        _context24.next = 14;
         return effects.call(channel.join);
       case 14:
-        joinedChannel = _context26.sent;
-        _context26.next = 17;
+        joinedChannel = _context24.sent;
+        _context24.next = 17;
         return effects.put(setCloseSearchChannelsAC(true));
       case 17:
-        _context26.next = 19;
+        _context24.next = 19;
         return effects.put(setChannelToAddAC(JSON.parse(JSON.stringify(joinedChannel))));
       case 19:
-        _context26.next = 21;
+        _context24.next = 21;
         return effects.put(switchChannelActionAC(JSON.parse(JSON.stringify(joinedChannel))));
       case 21:
         addChannelToAllChannels(joinedChannel);
-        _context26.next = 24;
+        _context24.next = 24;
         return effects.call(setActiveChannelId, joinedChannel.id);
       case 24:
-        _context26.next = 29;
+        _context24.next = 29;
         break;
       case 26:
-        _context26.prev = 26;
-        _context26.t0 = _context26["catch"](0);
-        log.error(_context26.t0, 'Error in join to channel');
+        _context24.prev = 26;
+        _context24.t0 = _context24["catch"](0);
+        log.error(_context24.t0, 'Error in join to channel');
       case 29:
       case "end":
-        return _context26.stop();
+        return _context24.stop();
     }
-  }, _marked26, null, [[0, 26]]);
+  }, _marked24, null, [[0, 26]]);
 }
 function watchForChannelEvents() {
-  return _regeneratorRuntime().wrap(function watchForChannelEvents$(_context27) {
-    while (1) switch (_context27.prev = _context27.next) {
+  return _regeneratorRuntime().wrap(function watchForChannelEvents$(_context25) {
+    while (1) switch (_context25.prev = _context25.next) {
       case 0:
-        _context27.next = 2;
+        _context25.next = 2;
         return effects.call(watchForEvents);
       case 2:
       case "end":
-        return _context27.stop();
+        return _context25.stop();
     }
-  }, _marked27);
+  }, _marked25);
 }
 function ChannelsSaga() {
-  return _regeneratorRuntime().wrap(function ChannelsSaga$(_context28) {
-    while (1) switch (_context28.prev = _context28.next) {
+  return _regeneratorRuntime().wrap(function ChannelsSaga$(_context26) {
+    while (1) switch (_context26.prev = _context26.next) {
       case 0:
-        _context28.next = 2;
+        _context26.next = 2;
         return effects.takeLatest(CREATE_CHANNEL, createChannel);
       case 2:
-        _context28.next = 4;
+        _context26.next = 4;
         return effects.takeLatest(GET_CHANNELS, getChannels);
       case 4:
-        _context28.next = 6;
+        _context26.next = 6;
         return effects.takeLatest(SEARCH_CHANNELS, searchChannels);
       case 6:
-        _context28.next = 8;
+        _context26.next = 8;
         return effects.takeLatest(GET_CHANNELS_FOR_FORWARD, getChannelsForForward);
       case 8:
-        _context28.next = 10;
+        _context26.next = 10;
         return effects.takeLatest(SEARCH_CHANNELS_FOR_FORWARD, searchChannelsForForward);
       case 10:
-        _context28.next = 12;
+        _context26.next = 12;
         return effects.takeLatest(LOAD_MORE_CHANNEL, channelsLoadMore);
       case 12:
-        _context28.next = 14;
+        _context26.next = 14;
         return effects.takeLatest(LOAD_MORE_CHANNELS_FOR_FORWARD, channelsForForwardLoadMore);
       case 14:
-        _context28.next = 16;
+        _context26.next = 16;
         return effects.takeEvery(SWITCH_CHANNEL, switchChannel);
       case 16:
-        _context28.next = 18;
+        _context26.next = 18;
         return effects.takeLatest(LEAVE_CHANNEL, leaveChannel);
       case 18:
-        _context28.next = 20;
+        _context26.next = 20;
         return effects.takeLatest(DELETE_CHANNEL, deleteChannel);
       case 20:
-        _context28.next = 22;
+        _context26.next = 22;
         return effects.takeLatest(BLOCK_CHANNEL, blockChannel);
       case 22:
-        _context28.next = 24;
+        _context26.next = 24;
         return effects.takeLatest(UPDATE_CHANNEL, updateChannel);
       case 24:
-        _context28.next = 26;
+        _context26.next = 26;
         return effects.takeEvery(MARK_MESSAGES_AS_READ, markMessagesRead);
       case 26:
-        _context28.next = 28;
+        _context26.next = 28;
         return effects.takeLatest(MARK_MESSAGES_AS_DELIVERED, markMessagesDelivered);
       case 28:
-        _context28.next = 30;
+        _context26.next = 30;
         return effects.takeLatest(WATCH_FOR_EVENTS, watchForChannelEvents);
       case 30:
-        _context28.next = 32;
+        _context26.next = 32;
         return effects.takeLatest(TURN_OFF_NOTIFICATION, notificationsTurnOff);
       case 32:
-        _context28.next = 34;
+        _context26.next = 34;
         return effects.takeLatest(TURN_ON_NOTIFICATION, notificationsTurnOn);
       case 34:
-        _context28.next = 36;
+        _context26.next = 36;
         return effects.takeLatest(MARK_CHANNEL_AS_READ, markChannelAsRead);
       case 36:
-        _context28.next = 38;
+        _context26.next = 38;
         return effects.takeLatest(MARK_CHANNEL_AS_UNREAD, markChannelAsUnRead);
       case 38:
-        _context28.next = 40;
+        _context26.next = 40;
         return effects.takeLatest(CHECK_USER_STATUS, checkUsersStatus);
       case 40:
-        _context28.next = 42;
+        _context26.next = 42;
         return effects.takeLatest(SEND_TYPING, sendTyping);
       case 42:
-        _context28.next = 44;
+        _context26.next = 44;
         return effects.takeLatest(PIN_CHANNEL, pinChannel);
       case 44:
-        _context28.next = 46;
+        _context26.next = 46;
         return effects.takeLatest(UNPIN_CHANNEL, unpinChannel);
       case 46:
-        _context28.next = 48;
+        _context26.next = 48;
         return effects.takeLatest(CLEAR_HISTORY, clearHistory);
       case 48:
-        _context28.next = 50;
+        _context26.next = 50;
         return effects.takeLatest(JOIN_TO_CHANNEL, joinChannel);
       case 50:
-        _context28.next = 52;
+        _context26.next = 52;
         return effects.takeLatest(DELETE_ALL_MESSAGES, deleteAllMessages);
       case 52:
-        _context28.next = 54;
+        _context26.next = 54;
         return effects.takeLatest(REMOVE_CHANNEL_CACHES, removeChannelCaches);
       case 54:
       case "end":
-        return _context28.stop();
+        return _context26.stop();
     }
-  }, _marked28);
+  }, _marked26);
 }
 
 function rgbaToThumbHash(w, h, rgba) {
@@ -15219,14 +15187,14 @@ var _marked$2 = /*#__PURE__*/_regeneratorRuntime().mark(sendMessage),
   _marked7$1 = /*#__PURE__*/_regeneratorRuntime().mark(getMessagesQuery),
   _marked8$1 = /*#__PURE__*/_regeneratorRuntime().mark(loadMoreMessages),
   _marked9$1 = /*#__PURE__*/_regeneratorRuntime().mark(addReaction),
-  _marked10$1 = /*#__PURE__*/_regeneratorRuntime().mark(deleteReaction),
-  _marked11$1 = /*#__PURE__*/_regeneratorRuntime().mark(getReactions),
-  _marked12$1 = /*#__PURE__*/_regeneratorRuntime().mark(loadMoreReactions),
-  _marked13$1 = /*#__PURE__*/_regeneratorRuntime().mark(getMessageAttachments),
-  _marked14$1 = /*#__PURE__*/_regeneratorRuntime().mark(loadMoreMessageAttachments),
-  _marked15$1 = /*#__PURE__*/_regeneratorRuntime().mark(pauseAttachmentUploading),
-  _marked16$1 = /*#__PURE__*/_regeneratorRuntime().mark(resumeAttachmentUploading),
-  _marked17$1 = /*#__PURE__*/_regeneratorRuntime().mark(MessageSaga);
+  _marked0$1 = /*#__PURE__*/_regeneratorRuntime().mark(deleteReaction),
+  _marked1$1 = /*#__PURE__*/_regeneratorRuntime().mark(getReactions),
+  _marked10$1 = /*#__PURE__*/_regeneratorRuntime().mark(loadMoreReactions),
+  _marked11$1 = /*#__PURE__*/_regeneratorRuntime().mark(getMessageAttachments),
+  _marked12$1 = /*#__PURE__*/_regeneratorRuntime().mark(loadMoreMessageAttachments),
+  _marked13$1 = /*#__PURE__*/_regeneratorRuntime().mark(pauseAttachmentUploading),
+  _marked14$1 = /*#__PURE__*/_regeneratorRuntime().mark(resumeAttachmentUploading),
+  _marked15$1 = /*#__PURE__*/_regeneratorRuntime().mark(MessageSaga);
 var handleUploadAttachments = function handleUploadAttachments(attachments, message, channel) {
   try {
     return Promise.resolve(Promise.all(attachments.map(function (attachment) {
@@ -16192,7 +16160,7 @@ function forwardMessage(action) {
   }, _marked3$1, null, [[0, 73]]);
 }
 function resendMessage(action) {
-  var payload, message, connectionState, channelId, channel, customUploader, attachmentCompilation, messageAttachment, messageCopy, handleUploadProgress, uri, filePath, handleUpdateLocalPath, pendingAttachment, _thumbnailMetas, fileSize, meta, attachmentMeta, attachmentBuilder, attachmentToSend, messageResponse, messageUpdateData, fileType, messageToUpdate, _messageCopy3, _messageResponse, _messageUpdateData, activeChannelId, _messageToUpdate;
+  var payload, message, connectionState, channelId, channel, customUploader, attachmentCompilation, messageAttachment, messageCopy, handleUploadProgress, uri, filePath, handleUpdateLocalPath, pendingAttachment, thumbnailMetas, fileSize, meta, attachmentMeta, attachmentBuilder, attachmentToSend, messageResponse, messageUpdateData, fileType, messageToUpdate, _messageCopy3, _messageResponse, _messageUpdateData, activeChannelId, _messageToUpdate;
   return _regeneratorRuntime().wrap(function resendMessage$(_context6) {
     while (1) switch (_context6.prev = _context6.next) {
       case 0:
@@ -16263,7 +16231,7 @@ function resendMessage(action) {
         _context6.prev = 29;
         handleUpdateLocalPath = function handleUpdateLocalPath(updatedLink) {
           filePath = updatedLink;
-          _thumbnailMetas = getVideoThumb(messageAttachment.tid);
+          thumbnailMetas = getVideoThumb(messageAttachment.tid);
           messageCopy.attachments[0] = _extends({}, messageCopy.attachments[0], {
             attachmentUrl: updatedLink
           });
@@ -16301,7 +16269,7 @@ function resendMessage(action) {
         return effects.put(updateAttachmentUploadingStateAC(UPLOAD_STATE.SUCCESS, messageAttachment.tid));
       case 45:
         delete messageCopy.createdAt;
-        _thumbnailMetas = {};
+        thumbnailMetas = {};
         fileSize = messageAttachment.cachedUrl ? messageAttachment.size : pendingAttachment.file.size;
         log.info('uri ... ', uri);
         if (!(!messageAttachment.cachedUrl && messageAttachment.url.type.split('/')[0] === 'image')) {
@@ -16315,7 +16283,7 @@ function resendMessage(action) {
         _context6.next = 55;
         return effects.call(createImageThumbnail, null, filePath, messageAttachment.type === 'file' ? 50 : undefined, messageAttachment.type === 'file' ? 50 : undefined);
       case 55:
-        _thumbnailMetas = _context6.sent;
+        thumbnailMetas = _context6.sent;
         _context6.next = 64;
         break;
       case 58:
@@ -16331,7 +16299,7 @@ function resendMessage(action) {
         return effects.call(getFrame, filePath);
       case 62:
         meta = _context6.sent;
-        _thumbnailMetas = {
+        thumbnailMetas = {
           thumbnail: meta.thumb,
           imageWidth: meta.width,
           imageHeight: meta.height,
@@ -16341,12 +16309,12 @@ function resendMessage(action) {
         if (messageAttachment.cachedUrl) {
           attachmentMeta = messageAttachment.metadata;
         } else {
-          attachmentMeta = JSON.stringify(_extends({}, messageAttachment.metadata ? typeof messageAttachment.metadata === 'string' ? JSON.parse(messageAttachment.metadata) : messageAttachment.metadata : {}, _thumbnailMetas && _thumbnailMetas.thumbnail && _extends({
-            tmb: _thumbnailMetas.thumbnail,
-            szw: _thumbnailMetas.imageWidth,
-            szh: _thumbnailMetas.imageHeight
-          }, _thumbnailMetas.duration ? {
-            dur: _thumbnailMetas.duration
+          attachmentMeta = JSON.stringify(_extends({}, messageAttachment.metadata ? typeof messageAttachment.metadata === 'string' ? JSON.parse(messageAttachment.metadata) : messageAttachment.metadata : {}, thumbnailMetas && thumbnailMetas.thumbnail && _extends({
+            tmb: thumbnailMetas.thumbnail,
+            szw: thumbnailMetas.imageWidth,
+            szh: thumbnailMetas.imageHeight
+          }, thumbnailMetas.duration ? {
+            dur: thumbnailMetas.duration
           } : {})));
         }
         log.info('attachmentMeta ... ', attachmentMeta);
@@ -16968,22 +16936,22 @@ function getMessagesQuery(action) {
 }
 function loadMoreMessages(action) {
   var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result;
-  return _regeneratorRuntime().wrap(function loadMoreMessages$(_context10) {
-    while (1) switch (_context10.prev = _context10.next) {
+  return _regeneratorRuntime().wrap(function loadMoreMessages$(_context0) {
+    while (1) switch (_context0.prev = _context0.next) {
       case 0:
-        _context10.prev = 0;
+        _context0.prev = 0;
         payload = action.payload;
         limit = payload.limit, direction = payload.direction, channelId = payload.channelId, messageId = payload.messageId, hasNext = payload.hasNext;
         log.info('loadMoreMessages .. .. ', payload);
         SceytChatClient = getClient();
         messageQueryBuilder = new SceytChatClient.MessageListQueryBuilder(channelId);
         messageQueryBuilder.reverse(true);
-        _context10.next = 9;
+        _context0.next = 9;
         return effects.call(messageQueryBuilder.build);
       case 9:
-        messageQuery = _context10.sent;
+        messageQuery = _context0.sent;
         messageQuery.limit = limit || 5;
-        _context10.next = 13;
+        _context0.next = 13;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
       case 13:
         result = {
@@ -16991,117 +16959,117 @@ function loadMoreMessages(action) {
           hasNext: false
         };
         if (!(direction === MESSAGE_LOAD_DIRECTION.PREV)) {
-          _context10.next = 28;
+          _context0.next = 28;
           break;
         }
         if (!getHasPrevCached()) {
-          _context10.next = 19;
+          _context0.next = 19;
           break;
         }
         result.messages = getFromAllMessagesByMessageId(messageId, MESSAGE_LOAD_DIRECTION.PREV);
-        _context10.next = 26;
+        _context0.next = 26;
         break;
       case 19:
         if (!hasNext) {
-          _context10.next = 26;
+          _context0.next = 26;
           break;
         }
-        _context10.next = 22;
+        _context0.next = 22;
         return effects.call(messageQuery.loadPreviousMessageId, messageId);
       case 22:
-        result = _context10.sent;
+        result = _context0.sent;
         if (result.messages.length) {
           addAllMessages(result.messages, MESSAGE_LOAD_DIRECTION.PREV);
         }
-        _context10.next = 26;
+        _context0.next = 26;
         return effects.put(setMessagesHasPrevAC(result.hasNext));
       case 26:
-        _context10.next = 44;
+        _context0.next = 44;
         break;
       case 28:
         if (!getHasNextCached()) {
-          _context10.next = 32;
+          _context0.next = 32;
           break;
         }
         result.messages = getFromAllMessagesByMessageId(messageId, MESSAGE_LOAD_DIRECTION.NEXT);
-        _context10.next = 42;
+        _context0.next = 42;
         break;
       case 32:
         if (!hasNext) {
-          _context10.next = 42;
+          _context0.next = 42;
           break;
         }
         log.info('saga load next from server ... ', messageId);
         messageQuery.reverse = false;
-        _context10.next = 37;
+        _context0.next = 37;
         return effects.call(messageQuery.loadNextMessageId, messageId);
       case 37:
-        result = _context10.sent;
+        result = _context0.sent;
         log.info('result from server next ... ', result);
         if (result.messages.length) {
           addAllMessages(result.messages, MESSAGE_LOAD_DIRECTION.NEXT);
         }
-        _context10.next = 42;
+        _context0.next = 42;
         return effects.put(setMessagesHasNextAC(result.hasNext));
       case 42:
-        _context10.next = 44;
+        _context0.next = 44;
         return effects.put(setMessagesHasPrevAC(true));
       case 44:
         if (!(result.messages && result.messages.length && result.messages.length > 0)) {
-          _context10.next = 49;
+          _context0.next = 49;
           break;
         }
-        _context10.next = 47;
+        _context0.next = 47;
         return effects.put(addMessagesAC(JSON.parse(JSON.stringify(result.messages)), direction));
       case 47:
-        _context10.next = 51;
+        _context0.next = 51;
         break;
       case 49:
-        _context10.next = 51;
+        _context0.next = 51;
         return effects.put(addMessagesAC([], direction));
       case 51:
-        _context10.next = 53;
+        _context0.next = 53;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 53:
-        _context10.next = 58;
+        _context0.next = 58;
         break;
       case 55:
-        _context10.prev = 55;
-        _context10.t0 = _context10["catch"](0);
-        log.error('error in load more messages', _context10.t0);
+        _context0.prev = 55;
+        _context0.t0 = _context0["catch"](0);
+        log.error('error in load more messages', _context0.t0);
       case 58:
       case "end":
-        return _context10.stop();
+        return _context0.stop();
     }
   }, _marked8$1, null, [[0, 55]]);
 }
 function addReaction(action) {
   var payload, channelId, messageId, key, score, reason, enforceUnique, user, channel, _yield$call, message, reaction, channelUpdateParam;
-  return _regeneratorRuntime().wrap(function addReaction$(_context11) {
-    while (1) switch (_context11.prev = _context11.next) {
+  return _regeneratorRuntime().wrap(function addReaction$(_context1) {
+    while (1) switch (_context1.prev = _context1.next) {
       case 0:
-        _context11.prev = 0;
+        _context1.prev = 0;
         payload = action.payload;
         channelId = payload.channelId, messageId = payload.messageId, key = payload.key, score = payload.score, reason = payload.reason, enforceUnique = payload.enforceUnique;
         user = getClient().user;
-        _context11.next = 6;
+        _context1.next = 6;
         return effects.call(getChannelFromMap, channelId);
       case 6:
-        channel = _context11.sent;
+        channel = _context1.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
           if (channel) {
             setChannelInMap(channel);
           }
         }
-        _context11.next = 10;
+        _context1.next = 10;
         return effects.call(channel.addReaction, messageId, key, score, reason, enforceUnique);
       case 10:
-        _yield$call = _context11.sent;
+        _yield$call = _context1.sent;
         message = _yield$call.message;
         reaction = _yield$call.reaction;
         if (!(user.id === message.user.id)) {
-          _context11.next = 18;
+          _context1.next = 18;
           break;
         }
         channelUpdateParam = {
@@ -17109,102 +17077,102 @@ function addReaction(action) {
           lastReactedMessage: message,
           newReactions: [reaction]
         };
-        _context11.next = 17;
+        _context1.next = 17;
         return effects.put(updateChannelDataAC(channel.id, channelUpdateParam));
       case 17:
         updateChannelOnAllChannels(channel.id, channelUpdateParam);
       case 18:
-        _context11.next = 20;
+        _context1.next = 20;
         return effects.put(addChannelAC(JSON.parse(JSON.stringify(channel))));
       case 20:
-        _context11.next = 22;
+        _context1.next = 22;
         return effects.put(addReactionToListAC(reaction));
       case 22:
-        _context11.next = 24;
+        _context1.next = 24;
         return effects.put(addReactionToMessageAC(message, reaction, true));
       case 24:
         addReactionToMessageOnMap(channelId, message, reaction, true);
         addReactionOnAllMessages(message, reaction, true);
-        _context11.next = 31;
+        _context1.next = 31;
         break;
       case 28:
-        _context11.prev = 28;
-        _context11.t0 = _context11["catch"](0);
-        log.error('ERROR in add reaction', _context11.t0.message);
+        _context1.prev = 28;
+        _context1.t0 = _context1["catch"](0);
+        log.error('ERROR in add reaction', _context1.t0.message);
       case 31:
       case "end":
-        return _context11.stop();
+        return _context1.stop();
     }
   }, _marked9$1, null, [[0, 28]]);
 }
 function deleteReaction(action) {
   var payload, channelId, messageId, key, isLastReaction, channel, _yield$call2, message, reaction, channelUpdateParam;
-  return _regeneratorRuntime().wrap(function deleteReaction$(_context12) {
-    while (1) switch (_context12.prev = _context12.next) {
+  return _regeneratorRuntime().wrap(function deleteReaction$(_context10) {
+    while (1) switch (_context10.prev = _context10.next) {
       case 0:
-        _context12.prev = 0;
+        _context10.prev = 0;
         payload = action.payload;
         channelId = payload.channelId, messageId = payload.messageId, key = payload.key, isLastReaction = payload.isLastReaction;
-        _context12.next = 5;
+        _context10.next = 5;
         return effects.call(getChannelFromMap, channelId);
       case 5:
-        channel = _context12.sent;
+        channel = _context10.sent;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
           if (channel) {
             setChannelInMap(channel);
           }
         }
-        _context12.next = 9;
+        _context10.next = 9;
         return effects.call(channel.deleteReaction, messageId, key);
       case 9:
-        _yield$call2 = _context12.sent;
+        _yield$call2 = _context10.sent;
         message = _yield$call2.message;
         reaction = _yield$call2.reaction;
         if (!isLastReaction) {
-          _context12.next = 17;
+          _context10.next = 17;
           break;
         }
         channelUpdateParam = {
           userMessageReactions: [],
           lastReactedMessage: null
         };
-        _context12.next = 16;
+        _context10.next = 16;
         return effects.put(updateChannelDataAC(channel.id, channelUpdateParam));
       case 16:
         updateChannelOnAllChannels(channel.id, channelUpdateParam);
       case 17:
         log.info('message received. ... ', message);
-        _context12.next = 20;
+        _context10.next = 20;
         return effects.put(deleteReactionFromListAC(reaction));
       case 20:
-        _context12.next = 22;
+        _context10.next = 22;
         return effects.put(deleteReactionFromMessageAC(message, reaction, true));
       case 22:
         removeReactionToMessageOnMap(channelId, message, reaction, true);
         removeReactionOnAllMessages(message, reaction, true);
-        _context12.next = 29;
+        _context10.next = 29;
         break;
       case 26:
-        _context12.prev = 26;
-        _context12.t0 = _context12["catch"](0);
-        log.error('ERROR in delete reaction', _context12.t0.message);
+        _context10.prev = 26;
+        _context10.t0 = _context10["catch"](0);
+        log.error('ERROR in delete reaction', _context10.t0.message);
       case 29:
       case "end":
-        return _context12.stop();
+        return _context10.stop();
     }
-  }, _marked10$1, null, [[0, 26]]);
+  }, _marked0$1, null, [[0, 26]]);
 }
 function getReactions(action) {
   var payload, messageId, key, limit, SceytChatClient, reactionQueryBuilder, reactionQuery, result;
-  return _regeneratorRuntime().wrap(function getReactions$(_context13) {
-    while (1) switch (_context13.prev = _context13.next) {
+  return _regeneratorRuntime().wrap(function getReactions$(_context11) {
+    while (1) switch (_context11.prev = _context11.next) {
       case 0:
-        _context13.prev = 0;
+        _context11.prev = 0;
         payload = action.payload;
         messageId = payload.messageId, key = payload.key, limit = payload.limit;
         SceytChatClient = getClient();
-        _context13.next = 6;
+        _context11.next = 6;
         return effects.put(setReactionsLoadingStateAC(LOADING_STATE.LOADING));
       case 6:
         reactionQueryBuilder = new SceytChatClient.ReactionListQueryBuilder(messageId);
@@ -17212,76 +17180,76 @@ function getReactions(action) {
         if (key) {
           reactionQueryBuilder.setKey(key);
         }
-        _context13.next = 11;
+        _context11.next = 11;
         return effects.call(reactionQueryBuilder.build);
       case 11:
-        reactionQuery = _context13.sent;
-        _context13.next = 14;
+        reactionQuery = _context11.sent;
+        _context11.next = 14;
         return effects.call(reactionQuery.loadNext);
       case 14:
-        result = _context13.sent;
+        result = _context11.sent;
         query.ReactionsQuery = reactionQuery;
-        _context13.next = 18;
+        _context11.next = 18;
         return effects.put(setReactionsListAC(result.reactions, result.hasNext));
       case 18:
-        _context13.next = 20;
+        _context11.next = 20;
         return effects.put(setReactionsLoadingStateAC(LOADING_STATE.LOADED));
       case 20:
-        _context13.next = 25;
+        _context11.next = 25;
         break;
       case 22:
-        _context13.prev = 22;
-        _context13.t0 = _context13["catch"](0);
-        log.error('ERROR in get reactions', _context13.t0.message);
+        _context11.prev = 22;
+        _context11.t0 = _context11["catch"](0);
+        log.error('ERROR in get reactions', _context11.t0.message);
       case 25:
       case "end":
-        return _context13.stop();
+        return _context11.stop();
     }
-  }, _marked11$1, null, [[0, 22]]);
+  }, _marked1$1, null, [[0, 22]]);
 }
 function loadMoreReactions(action) {
   var payload, limit, ReactionQuery, result;
-  return _regeneratorRuntime().wrap(function loadMoreReactions$(_context14) {
-    while (1) switch (_context14.prev = _context14.next) {
+  return _regeneratorRuntime().wrap(function loadMoreReactions$(_context12) {
+    while (1) switch (_context12.prev = _context12.next) {
       case 0:
-        _context14.prev = 0;
+        _context12.prev = 0;
         payload = action.payload;
         limit = payload.limit;
-        _context14.next = 5;
+        _context12.next = 5;
         return effects.put(setReactionsLoadingStateAC(LOADING_STATE.LOADING));
       case 5:
         ReactionQuery = query.ReactionsQuery;
         if (limit) {
           ReactionQuery.limit = limit;
         }
-        _context14.next = 9;
+        _context12.next = 9;
         return effects.call(ReactionQuery.loadNext);
       case 9:
-        result = _context14.sent;
-        _context14.next = 12;
+        result = _context12.sent;
+        _context12.next = 12;
         return effects.put(addReactionsToListAC(result.reactions, result.hasNext));
       case 12:
-        _context14.next = 14;
+        _context12.next = 14;
         return effects.put(setReactionsLoadingStateAC(LOADING_STATE.LOADED));
       case 14:
-        _context14.next = 19;
+        _context12.next = 19;
         break;
       case 16:
-        _context14.prev = 16;
-        _context14.t0 = _context14["catch"](0);
-        log.error('ERROR in load more reactions', _context14.t0.message);
+        _context12.prev = 16;
+        _context12.t0 = _context12["catch"](0);
+        log.error('ERROR in load more reactions', _context12.t0.message);
       case 19:
       case "end":
-        return _context14.stop();
+        return _context12.stop();
     }
-  }, _marked12$1, null, [[0, 16]]);
+  }, _marked10$1, null, [[0, 16]]);
 }
 function getMessageAttachments(action) {
   var _action$payload2, channelId, attachmentType, limit, direction, attachmentId, forPopup, SceytChatClient, typeList, AttachmentByTypeQueryBuilder, AttachmentByTypeQuery, result;
-  return _regeneratorRuntime().wrap(function getMessageAttachments$(_context15) {
-    while (1) switch (_context15.prev = _context15.next) {
+  return _regeneratorRuntime().wrap(function getMessageAttachments$(_context13) {
+    while (1) switch (_context13.prev = _context13.next) {
       case 0:
-        _context15.prev = 0;
+        _context13.prev = 0;
         _action$payload2 = action.payload, channelId = _action$payload2.channelId, attachmentType = _action$payload2.attachmentType, limit = _action$payload2.limit, direction = _action$payload2.direction, attachmentId = _action$payload2.attachmentId, forPopup = _action$payload2.forPopup;
         SceytChatClient = getClient();
         typeList = [attachmentTypes.video, attachmentTypes.image, attachmentTypes.file, attachmentTypes.link, attachmentTypes.voice];
@@ -17296,245 +17264,245 @@ function getMessageAttachments(action) {
         }
         AttachmentByTypeQueryBuilder = new SceytChatClient.AttachmentListQueryBuilder(channelId, typeList);
         AttachmentByTypeQueryBuilder.limit(limit || 34);
-        _context15.next = 9;
+        _context13.next = 9;
         return effects.call(AttachmentByTypeQueryBuilder.build);
       case 9:
-        AttachmentByTypeQuery = _context15.sent;
+        AttachmentByTypeQuery = _context13.sent;
         if (forPopup) {
           AttachmentByTypeQuery.reverse = true;
         }
         if (!(direction === queryDirection.NEXT)) {
-          _context15.next = 17;
+          _context13.next = 17;
           break;
         }
-        _context15.next = 14;
+        _context13.next = 14;
         return effects.call(AttachmentByTypeQuery.loadPrevious);
       case 14:
-        result = _context15.sent;
-        _context15.next = 26;
+        result = _context13.sent;
+        _context13.next = 26;
         break;
       case 17:
         if (!(direction === queryDirection.NEAR)) {
-          _context15.next = 23;
+          _context13.next = 23;
           break;
         }
-        _context15.next = 20;
+        _context13.next = 20;
         return effects.call(AttachmentByTypeQuery.loadNearMessageId, attachmentId);
       case 20:
-        result = _context15.sent;
-        _context15.next = 26;
+        result = _context13.sent;
+        _context13.next = 26;
         break;
       case 23:
-        _context15.next = 25;
+        _context13.next = 25;
         return effects.call(AttachmentByTypeQuery.loadPrevious);
       case 25:
-        result = _context15.sent;
+        result = _context13.sent;
       case 26:
         if (!forPopup) {
-          _context15.next = 34;
+          _context13.next = 34;
           break;
         }
         query.AttachmentByTypeQueryForPopup = AttachmentByTypeQuery;
-        _context15.next = 30;
+        _context13.next = 30;
         return effects.put(setAttachmentsForPopupAC(JSON.parse(JSON.stringify(result.attachments))));
       case 30:
-        _context15.next = 32;
+        _context13.next = 32;
         return effects.put(setAttachmentsCompleteForPopupAC(result.hasNext));
       case 32:
-        _context15.next = 39;
+        _context13.next = 39;
         break;
       case 34:
         query.AttachmentByTypeQuery = AttachmentByTypeQuery;
-        _context15.next = 37;
+        _context13.next = 37;
         return effects.put(setAttachmentsCompleteAC(result.hasNext));
       case 37:
-        _context15.next = 39;
+        _context13.next = 39;
         return effects.put(setAttachmentsAC(JSON.parse(JSON.stringify(result.attachments))));
       case 39:
-        _context15.next = 44;
+        _context13.next = 44;
         break;
       case 41:
-        _context15.prev = 41;
-        _context15.t0 = _context15["catch"](0);
-        log.error('error in message attachment query', _context15.t0);
+        _context13.prev = 41;
+        _context13.t0 = _context13["catch"](0);
+        log.error('error in message attachment query', _context13.t0);
       case 44:
       case "end":
-        return _context15.stop();
+        return _context13.stop();
     }
-  }, _marked13$1, null, [[0, 41]]);
+  }, _marked11$1, null, [[0, 41]]);
 }
 function loadMoreMessageAttachments(action) {
   var _action$payload3, limit, direction, forPopup, AttachmentQuery, _yield$call3, attachments, hasNext;
-  return _regeneratorRuntime().wrap(function loadMoreMessageAttachments$(_context16) {
-    while (1) switch (_context16.prev = _context16.next) {
+  return _regeneratorRuntime().wrap(function loadMoreMessageAttachments$(_context14) {
+    while (1) switch (_context14.prev = _context14.next) {
       case 0:
-        _context16.prev = 0;
+        _context14.prev = 0;
         _action$payload3 = action.payload, limit = _action$payload3.limit, direction = _action$payload3.direction, forPopup = _action$payload3.forPopup;
         if (forPopup) {
           AttachmentQuery = query.AttachmentByTypeQueryForPopup;
         } else {
           AttachmentQuery = query.AttachmentByTypeQuery;
         }
-        _context16.next = 5;
+        _context14.next = 5;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
       case 5:
         AttachmentQuery.limit = limit;
-        _context16.next = 8;
+        _context14.next = 8;
         return effects.call(AttachmentQuery.loadPrevious);
       case 8:
-        _yield$call3 = _context16.sent;
+        _yield$call3 = _context14.sent;
         attachments = _yield$call3.attachments;
         hasNext = _yield$call3.hasNext;
         if (!forPopup) {
-          _context16.next = 16;
+          _context14.next = 16;
           break;
         }
-        _context16.next = 14;
+        _context14.next = 14;
         return effects.put(addAttachmentsForPopupAC(attachments, direction));
       case 14:
-        _context16.next = 22;
+        _context14.next = 22;
         break;
       case 16:
-        _context16.next = 18;
+        _context14.next = 18;
         return effects.put(setAttachmentsCompleteAC(hasNext));
       case 18:
-        _context16.next = 20;
+        _context14.next = 20;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       case 20:
-        _context16.next = 22;
+        _context14.next = 22;
         return effects.put(addAttachmentsAC(attachments));
       case 22:
-        _context16.next = 28;
+        _context14.next = 28;
         break;
       case 24:
-        _context16.prev = 24;
-        _context16.t0 = _context16["catch"](0);
-        log.error('error in message attachment query', _context16.t0);
+        _context14.prev = 24;
+        _context14.t0 = _context14["catch"](0);
+        log.error('error in message attachment query', _context14.t0);
       case 28:
       case "end":
-        return _context16.stop();
+        return _context14.stop();
     }
-  }, _marked14$1, null, [[0, 24]]);
+  }, _marked12$1, null, [[0, 24]]);
 }
 function pauseAttachmentUploading(action) {
   var attachmentId, isPaused;
-  return _regeneratorRuntime().wrap(function pauseAttachmentUploading$(_context17) {
-    while (1) switch (_context17.prev = _context17.next) {
+  return _regeneratorRuntime().wrap(function pauseAttachmentUploading$(_context15) {
+    while (1) switch (_context15.prev = _context15.next) {
       case 0:
-        _context17.prev = 0;
+        _context15.prev = 0;
         attachmentId = action.payload.attachmentId;
         if (!getCustomUploader()) {
-          _context17.next = 7;
+          _context15.next = 7;
           break;
         }
         isPaused = pauseUpload(attachmentId);
         if (!isPaused) {
-          _context17.next = 7;
+          _context15.next = 7;
           break;
         }
-        _context17.next = 7;
+        _context15.next = 7;
         return effects.put(updateAttachmentUploadingStateAC(UPLOAD_STATE.PAUSED, attachmentId));
       case 7:
-        _context17.next = 13;
+        _context15.next = 13;
         break;
       case 9:
-        _context17.prev = 9;
-        _context17.t0 = _context17["catch"](0);
-        log.error('error in pause attachment uploading', _context17.t0);
+        _context15.prev = 9;
+        _context15.t0 = _context15["catch"](0);
+        log.error('error in pause attachment uploading', _context15.t0);
       case 13:
       case "end":
-        return _context17.stop();
+        return _context15.stop();
     }
-  }, _marked15$1, null, [[0, 9]]);
+  }, _marked13$1, null, [[0, 9]]);
 }
 function resumeAttachmentUploading(action) {
   var attachmentId, isResumed;
-  return _regeneratorRuntime().wrap(function resumeAttachmentUploading$(_context18) {
-    while (1) switch (_context18.prev = _context18.next) {
+  return _regeneratorRuntime().wrap(function resumeAttachmentUploading$(_context16) {
+    while (1) switch (_context16.prev = _context16.next) {
       case 0:
-        _context18.prev = 0;
+        _context16.prev = 0;
         attachmentId = action.payload.attachmentId;
         log.info('resume for attachment ... ', attachmentId);
         if (!getCustomUploader()) {
-          _context18.next = 8;
+          _context16.next = 8;
           break;
         }
         isResumed = resumeUpload(attachmentId);
         if (!isResumed) {
-          _context18.next = 8;
+          _context16.next = 8;
           break;
         }
-        _context18.next = 8;
+        _context16.next = 8;
         return effects.put(updateAttachmentUploadingStateAC(UPLOAD_STATE.UPLOADING, attachmentId));
       case 8:
-        _context18.next = 14;
+        _context16.next = 14;
         break;
       case 10:
-        _context18.prev = 10;
-        _context18.t0 = _context18["catch"](0);
-        log.error('error in resume attachment uploading', _context18.t0);
+        _context16.prev = 10;
+        _context16.t0 = _context16["catch"](0);
+        log.error('error in resume attachment uploading', _context16.t0);
       case 14:
       case "end":
-        return _context18.stop();
+        return _context16.stop();
     }
-  }, _marked16$1, null, [[0, 10]]);
+  }, _marked14$1, null, [[0, 10]]);
 }
 function MessageSaga() {
-  return _regeneratorRuntime().wrap(function MessageSaga$(_context19) {
-    while (1) switch (_context19.prev = _context19.next) {
+  return _regeneratorRuntime().wrap(function MessageSaga$(_context17) {
+    while (1) switch (_context17.prev = _context17.next) {
       case 0:
-        _context19.next = 2;
+        _context17.next = 2;
         return effects.takeEvery(SEND_MESSAGE, sendMessage);
       case 2:
-        _context19.next = 4;
+        _context17.next = 4;
         return effects.takeEvery(SEND_TEXT_MESSAGE, sendTextMessage);
       case 4:
-        _context19.next = 6;
+        _context17.next = 6;
         return effects.takeEvery(FORWARD_MESSAGE, forwardMessage);
       case 6:
-        _context19.next = 8;
+        _context17.next = 8;
         return effects.takeEvery(RESEND_MESSAGE, resendMessage);
       case 8:
-        _context19.next = 10;
+        _context17.next = 10;
         return effects.takeLatest(EDIT_MESSAGE, editMessage);
       case 10:
-        _context19.next = 12;
+        _context17.next = 12;
         return effects.takeEvery(DELETE_MESSAGE, deleteMessage);
       case 12:
-        _context19.next = 14;
+        _context17.next = 14;
         return effects.takeLatest(GET_MESSAGES, getMessagesQuery);
       case 14:
-        _context19.next = 16;
+        _context17.next = 16;
         return effects.takeLatest(GET_MESSAGES_ATTACHMENTS, getMessageAttachments);
       case 16:
-        _context19.next = 18;
+        _context17.next = 18;
         return effects.takeLatest(LOAD_MORE_MESSAGES_ATTACHMENTS, loadMoreMessageAttachments);
       case 18:
-        _context19.next = 20;
+        _context17.next = 20;
         return effects.takeLatest(ADD_REACTION, addReaction);
       case 20:
-        _context19.next = 22;
+        _context17.next = 22;
         return effects.takeLatest(DELETE_REACTION, deleteReaction);
       case 22:
-        _context19.next = 24;
+        _context17.next = 24;
         return effects.takeEvery(LOAD_MORE_MESSAGES, loadMoreMessages);
       case 24:
-        _context19.next = 26;
+        _context17.next = 26;
         return effects.takeEvery(GET_REACTIONS, getReactions);
       case 26:
-        _context19.next = 28;
+        _context17.next = 28;
         return effects.takeEvery(LOAD_MORE_REACTIONS, loadMoreReactions);
       case 28:
-        _context19.next = 30;
+        _context17.next = 30;
         return effects.takeEvery(PAUSE_ATTACHMENT_UPLOADING, pauseAttachmentUploading);
       case 30:
-        _context19.next = 32;
+        _context17.next = 32;
         return effects.takeEvery(RESUME_ATTACHMENT_UPLOADING, resumeAttachmentUploading);
       case 32:
       case "end":
-        return _context19.stop();
+        return _context17.stop();
     }
-  }, _marked17$1);
+  }, _marked15$1);
 }
 
 var _marked$3 = /*#__PURE__*/_regeneratorRuntime().mark(getMembers),
@@ -19130,7 +19098,7 @@ var DeletedAvatarWrapper = styled__default(SvgDeletedUserAvatar)(_templateObject
   return props.color || colors.deleteUserIconBackground;
 });
 
-var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1;
+var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject0$1, _templateObject1$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1;
 var Channel = function Channel(_ref) {
   var _channel$metadata, _channel$metadata2;
   var channel = _ref.channel,
@@ -19385,10 +19353,10 @@ var DraftMessageText = styled__default.span(_templateObject8$1 || (_templateObje
 var LastMessageAuthor = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  max-width: 120px;\n  font-weight: 500;\n  color: ", ";\n\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n"])), function (props) {
   return props.color;
 });
-var Points = styled__default.span(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n"])), function (props) {
+var Points = styled__default.span(_templateObject0$1 || (_templateObject0$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 4px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var LastMessageText = styled__default.span(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n  font-style: ", ";\n  transform: ", ";\n  //height: 20px;\n\n  > svg {\n    width: 16px;\n    height: 16px;\n    margin-right: 4px;\n    color: ", ";\n    //transform: ", ";\n    transform: translate(0px, 3px);\n  }\n"])), function (props) {
+var LastMessageText = styled__default.span(_templateObject1$1 || (_templateObject1$1 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: ", ";\n  font-style: ", ";\n  transform: ", ";\n  //height: 20px;\n\n  > svg {\n    width: 16px;\n    height: 16px;\n    margin-right: 4px;\n    color: ", ";\n    //transform: ", ";\n    transform: translate(0px, 3px);\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.deletedMessage && 'italic';
@@ -19399,26 +19367,26 @@ var LastMessageText = styled__default.span(_templateObject11$1 || (_templateObje
 }, function (props) {
   return props.withAttachments ? 'translate(0px, 3px)' : 'translate(0px, 2px)';
 });
-var ChannelStatus = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 16px;\n  top: 15px;\n  display: flex;\n  flex-wrap: wrap;\n  height: 42px;\n  margin-left: auto;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
+var ChannelStatus = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  right: 16px;\n  top: 15px;\n  display: flex;\n  flex-wrap: wrap;\n  height: 42px;\n  margin-left: auto;\n\n  & > svg {\n    width: 16px;\n    height: 16px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var LastMessageDate = styled__default.span(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  line-height: 16px;\n"])), function (props) {
+var LastMessageDate = styled__default.span(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: ", ";\n  line-height: 16px;\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.fontSize || '12px';
 });
-var DeliveryIconCont = styled__default.span(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 6px;\n  line-height: 13px;\n"])));
-var UnreadMentionIconWrapper = styled__default.span(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  margin-right: ", ";\n  line-height: 13px;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var DeliveryIconCont = styled__default.span(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n  margin-right: 6px;\n  line-height: 13px;\n"])));
+var UnreadMentionIconWrapper = styled__default.span(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n  margin-right: ", ";\n  line-height: 13px;\n\n  & > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.rightMargin && '8px';
 }, function (props) {
   return props.iconColor || colors.primary;
 });
-var TypingIndicator = styled__default.span(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  font-style: italic;\n"])));
-var ReactionItem = styled__default.span(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  padding: 0 3px;\n"])));
-var UnreadInfo = styled__default.span(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: ", ";\n  right: 16px;\n  display: flex;\n  margin-top: 7px;\n  align-items: center;\n  flex: 0 0 auto;\n  margin-left: auto;\n"])), function (props) {
+var TypingIndicator = styled__default.span(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteralLoose(["\n  font-style: italic;\n"])));
+var ReactionItem = styled__default.span(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  padding: 0 3px;\n"])));
+var UnreadInfo = styled__default.span(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: ", ";\n  right: 16px;\n  display: flex;\n  margin-top: 7px;\n  align-items: center;\n  flex: 0 0 auto;\n  margin-left: auto;\n"])), function (props) {
   return props.bottom || '11px';
 });
-var UnreadCount = styled__default.span(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  min-width: ", ";\n  height: ", ";\n  text-align: center;\n  font-weight: 500;\n  color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n\n  ", "\n"])), function (props) {
+var UnreadCount = styled__default.span(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  padding: 0 4px;\n  font-size: ", ";\n  min-width: ", ";\n  height: ", ";\n  text-align: center;\n  font-weight: 500;\n  color: ", ";\n  border-radius: 10px;\n  box-sizing: border-box;\n\n  ", "\n"])), function (props) {
   return props.backgroundColor || colors.primary;
 }, function (props) {
   return props.fontSize || '13px';
@@ -19782,7 +19750,7 @@ var Container$4 = styled__default.div(_templateObject$8 || (_templateObject$8 =
   return props.height ? props.height + "px" : '0px';
 });
 
-var _templateObject$9, _templateObject2$8, _templateObject3$5, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject10$2, _templateObject11$2;
+var _templateObject$9, _templateObject2$8, _templateObject3$5, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject0$2, _templateObject1$2;
 var UsersPopup = function UsersPopup(_ref) {
   var channel = _ref.channel,
     toggleCreatePopup = _ref.toggleCreatePopup,
@@ -20124,10 +20092,10 @@ var SelectedMembersContainer = styled__default.div(_templateObject8$2 || (_templ
 var SelectedMemberBubble = styled__default.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  background: ", ";\n  border-radius: 16px;\n  align-items: center;\n  padding: 4px 10px 4px 0;\n  height: 28px;\n  margin: 8px 8px 0 0;\n  box-sizing: border-box;\n"])), function (props) {
   return props.backgroundColor;
 });
-var SelectedMemberName = styled__default.span(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 16px;\n  margin-left: 8px;\n  color: ", ";\n"])), function (props) {
+var SelectedMemberName = styled__default.span(_templateObject0$2 || (_templateObject0$2 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 16px;\n  margin-left: 8px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledSubtractSvg = styled__default(SvgCross)(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-left: 4px;\n  transform: translate(2px, 0);\n"])));
+var StyledSubtractSvg = styled__default(SvgCross)(_templateObject1$2 || (_templateObject1$2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-left: 4px;\n  transform: translate(2px, 0);\n"])));
 
 var _path$l;
 function _extends$m() {
@@ -20374,9 +20342,9 @@ function CreateChannel(_ref) {
   var _useState9 = React.useState(''),
     metadataValue = _useState9[0],
     setMetadataValue = _useState9[1];
-  var _useState10 = React.useState(false),
-    cropPopup = _useState10[0],
-    setCropPopup = _useState10[1];
+  var _useState0 = React.useState(false),
+    cropPopup = _useState0[0],
+    setCropPopup = _useState0[1];
   var _useStateComplex = useStateComplex({
       src: {},
       url: ''
@@ -21146,7 +21114,7 @@ var UserNumber = styled__default.h4(_templateObject6$4 || (_templateObject6$4 =
   return props.color;
 });
 
-var _templateObject$g, _templateObject2$e, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject10$3;
+var _templateObject$g, _templateObject2$e, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$4, _templateObject8$4, _templateObject9$4, _templateObject0$3;
 var ChannelList = function ChannelList(_ref) {
   var _channelListRef$curre2, _searchedChannels$cha, _searchedChannels$cha2, _searchedChannels$con, _searchedChannels$cha3, _searchedChannels$cha4, _searchedChannels$cha5, _searchedChannels$cha6;
   var className = _ref.className,
@@ -21752,7 +21720,7 @@ var NoData = styled__default.div(_templateObject8$4 || (_templateObject8$4 = _ta
   return props.color;
 });
 var LoadingWrapper = styled__default.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc(50% - 20px);\n  top: calc(50% - 20px);\n"])));
-var ChannelListHeader = styled__default.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: ", ";\n  padding: 12px;\n  box-sizing: border-box;\n  padding-left: ", ";\n  border-right: ", ";\n"])), function (props) {
+var ChannelListHeader = styled__default.div(_templateObject0$3 || (_templateObject0$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-between;\n  max-width: ", ";\n  padding: 12px;\n  box-sizing: border-box;\n  padding-left: ", ";\n  border-right: ", ";\n"])), function (props) {
   return props.maxWidth ? props.maxWidth + "px" : 'inherit';
 }, function (props) {
   return props.withoutProfile && '52px';
@@ -21912,7 +21880,7 @@ function SvgInfo(props) {
   })));
 }
 
-var _templateObject$i, _templateObject2$g, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject10$4;
+var _templateObject$i, _templateObject2$g, _templateObject3$c, _templateObject4$a, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$5, _templateObject9$5, _templateObject0$4;
 function ChatHeader(_ref) {
   var _activeChannel$metada;
   var infoIcon = _ref.infoIcon,
@@ -22061,7 +22029,7 @@ var MobileBackButtonWrapper = styled__default.span(_templateObject8$5 || (_templ
   return props.hoverBackground || colors.primaryLight;
 });
 var DefaultInfoIcon = styled__default(SvgInfo)(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose([""])));
-var WrapArrowLeftIcon = styled__default(SvgArrowLeft)(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose([""])));
+var WrapArrowLeftIcon = styled__default(SvgArrowLeft)(_templateObject0$4 || (_templateObject0$4 = _taggedTemplateLiteralLoose([""])));
 
 var _path$s;
 function _extends$t() {
@@ -22551,12 +22519,13 @@ function SvgFullscreenExit(props) {
   })));
 }
 
-var _templateObject$k, _templateObject2$h, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject10$5, _templateObject11$3;
+var _templateObject$k, _templateObject2$h, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$6, _templateObject9$6, _templateObject0$5, _templateObject1$3;
 var timerInterval;
 var VideoPlayer = function VideoPlayer(_ref) {
   var src = _ref.src,
     videoFileId = _ref.videoFileId,
-    activeFileId = _ref.activeFileId;
+    activeFileId = _ref.activeFileId,
+    onMouseDown = _ref.onMouseDown;
   var containerRef = React.useRef(null);
   var videoRef = React.useRef(null);
   var progressRef = React.useRef(null);
@@ -22711,7 +22680,8 @@ var VideoPlayer = function VideoPlayer(_ref) {
     ref: containerRef,
     loaded: isLoaded,
     fullScreen: isFullScreen,
-    className: 'custom_video_player'
+    className: 'custom_video_player',
+    onMouseDown: onMouseDown
   }, /*#__PURE__*/React__default.createElement("video", {
     onClick: function onClick() {
       return videoHandler(playing ? 'pause' : 'play');
@@ -22769,10 +22739,10 @@ var ProgressBlock = styled__default.div(_templateObject6$7 || (_templateObject6$
 var VolumeController = styled__default.div(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n"])));
 var VolumeIconWrapper = styled__default.span(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  @media (max-width: 768px) {\n    & > svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n  @media (max-width: 768px) {\n    & > svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n"])));
 var VolumeSlide = styled__default.input(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n  -webkit-appearance: none;\n  margin-left: 8px;\n  width: 60px;\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    visibility: hidden;\n    -webkit-appearance: none;\n    height: 1px;\n    width: 1px;\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    visibility: hidden;\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    visibility: hidden;\n    -webkit-appearance: none;\n    height: 1px;\n    width: 1px;\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  &::-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\n  @media (max-width: 768px) {\n    width: 50px;\n  }\n"])));
-var Progress = styled__default.input(_templateObject10$5 || (_templateObject10$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(_templateObject11$3 || (_templateObject11$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 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, _templateObject10$6;
+var _templateObject$l, _templateObject2$i, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject0$6;
 function ForwardMessagePopup(_ref) {
   var title = _ref.title,
     buttonText = _ref.buttonText,
@@ -23061,7 +23031,7 @@ var SelectedChannelBuble = styled__default.div(_templateObject8$7 || (_templateO
 var SelectedChannelName = styled__default.span(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: 500;\n  font-size: 14px;\n  line-height: 16px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledSubtractSvg$1 = styled__default(SvgCross)(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-left: 4px;\n  transform: translate(2px, 0);\n"])));
+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 _templateObject$m, _templateObject2$j;
 var CustomRadio = function CustomRadio(_ref) {
@@ -23231,7 +23201,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, _templateObject10$7, _templateObject11$4, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2;
+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 SliderPopup = function SliderPopup(_ref) {
   var channel = _ref.channel,
     setIsSliderOpen = _ref.setIsSliderOpen,
@@ -23273,12 +23243,12 @@ var SliderPopup = function SliderPopup(_ref) {
   var _useState9 = React.useState(false),
     visibleSlide = _useState9[0],
     setVisibleSlide = _useState9[1];
-  var _useState10 = React.useState(false),
-    forwardPopupOpen = _useState10[0],
-    setForwardPopupOpen = _useState10[1];
-  var _useState11 = React.useState(),
-    messageToDelete = _useState11[0],
-    setMessageToDelete = _useState11[1];
+  var _useState0 = React.useState(false),
+    forwardPopupOpen = _useState0[0],
+    setForwardPopupOpen = _useState0[1];
+  var _useState1 = React.useState(),
+    messageToDelete = _useState1[0],
+    setMessageToDelete = _useState1[1];
   var customDownloader = getCustomDownloader();
   var contactsMap = reactRedux.useSelector(contactsMapSelector);
   var attachments = reactRedux.useSelector(attachmentsForPopupSelector, reactRedux.shallowEqual) || [];
@@ -23353,15 +23323,15 @@ var SliderPopup = function SliderPopup(_ref) {
       var _temp3 = function () {
         if (!message) {
           var _temp2 = function _temp2() {
-            return Promise.resolve(_channelInstance.getMessagesById([currentFile.messageId])).then(function (messages) {
+            return Promise.resolve(channelInstance.getMessagesById([currentFile.messageId])).then(function (messages) {
               message = messages[0];
             });
           };
-          var _channelInstance = getChannelFromMap(channel.id);
+          var channelInstance = getChannelFromMap(channel.id);
           var _temp = function () {
-            if (!_channelInstance) {
+            if (!channelInstance) {
               return Promise.resolve(ChatClient.getChannelById(channel.id)).then(function (_ChatClient$getChanne) {
-                _channelInstance = _ChatClient$getChanne;
+                channelInstance = _ChatClient$getChanne;
               });
             }
           }();
@@ -23381,27 +23351,27 @@ var SliderPopup = function SliderPopup(_ref) {
       var _temp9 = function () {
         if (!messageToDelete) {
           var _temp8 = function _temp8() {
-            if (!_message.deliveryStatus || _message.deliveryStatus === MESSAGE_DELIVERY_STATUS.PENDING) {
-              deletePendingMessage(channel.id, _message);
+            if (!message.deliveryStatus || message.deliveryStatus === MESSAGE_DELIVERY_STATUS.PENDING) {
+              deletePendingMessage(channel.id, message);
             } else {
-              setMessageToDelete(_message);
+              setMessageToDelete(message);
             }
           };
-          var _message = getAllMessages().find(function (message) {
+          var message = getAllMessages().find(function (message) {
             return message.id === currentFile.messageId;
           });
           var _temp7 = function () {
-            if (!_message) {
+            if (!message) {
               var _temp6 = function _temp6() {
-                return Promise.resolve(_channelInstance2.getMessagesById([currentFile.messageId])).then(function (messages) {
-                  _message = messages[0];
+                return Promise.resolve(channelInstance.getMessagesById([currentFile.messageId])).then(function (messages) {
+                  message = messages[0];
                 });
               };
-              var _channelInstance2 = getChannelFromMap(channel.id);
+              var channelInstance = getChannelFromMap(channel.id);
               var _temp5 = function () {
-                if (!_channelInstance2) {
+                if (!channelInstance) {
                   return Promise.resolve(ChatClient.getChannelById(channel.id)).then(function (_ChatClient$getChanne2) {
-                    _channelInstance2 = _ChatClient$getChanne2;
+                    channelInstance = _ChatClient$getChanne2;
                   });
                 }
               }();
@@ -23584,15 +23554,11 @@ var SliderPopup = function SliderPopup(_ref) {
       return item.id === currentFile.id;
     });
   }, [attachmentsList, currentFile]);
-  React.useEffect(function () {
-    var handleContextMenu = function handleContextMenu(event) {
-      event.preventDefault();
-    };
-    window.addEventListener('contextmenu', handleContextMenu);
-    return function () {
-      window.removeEventListener('contextmenu', handleContextMenu);
-    };
-  }, []);
+  var handleCarouselItemMouseDown = function handleCarouselItemMouseDown(e) {
+    if (e.button === 2) {
+      e.stopPropagation();
+    }
+  };
   return /*#__PURE__*/React__default.createElement(Container$b, {
     draggable: false
   }, /*#__PURE__*/React__default.createElement(SliderHeader, null, /*#__PURE__*/React__default.createElement(FileInfo, null, /*#__PURE__*/React__default.createElement(Avatar, {
@@ -23638,7 +23604,15 @@ var SliderPopup = function SliderPopup(_ref) {
   }, /*#__PURE__*/React__default.createElement(SvgDeleteChannel, null))), /*#__PURE__*/React__default.createElement(ClosePopupWrapper, null, /*#__PURE__*/React__default.createElement(IconWrapper, {
     onClick: handleClosePopup
   }, /*#__PURE__*/React__default.createElement(SvgCancel, null)))), /*#__PURE__*/React__default.createElement(SliderBody, {
-    onClick: handleClicks
+    onClick: handleClicks,
+    onMouseDown: function onMouseDown(e) {
+      if (e.button === 2) {
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+      return true;
+    }
   }, activeFileIndex >= 0 && attachmentsList && attachmentsList.length ? (
   /*#__PURE__*/
   React__default.createElement(Carousel, {
@@ -23685,15 +23659,29 @@ var SliderPopup = function SliderPopup(_ref) {
       className: 'custom_carousel_item',
       key: file.id,
       draggable: false,
-      visibleSlide: visibleSlide
+      visibleSlide: visibleSlide,
+      onMouseDown: handleCarouselItemMouseDown,
+      onContextMenu: function onContextMenu(e) {
+        e.stopPropagation();
+      }
     }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, file.type === 'image' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !downloadedFiles[file.id] && imageLoading ? (/*#__PURE__*/React__default.createElement(UploadCont$1, null, /*#__PURE__*/React__default.createElement(UploadingIcon, null))) : (/*#__PURE__*/React__default.createElement("img", {
       draggable: false,
       src: downloadedFiles[file.id],
-      alt: file.name
+      alt: file.name,
+      onMouseDown: function onMouseDown(e) {
+        if (e.button === 2) {
+          e.stopPropagation();
+        }
+      }
     })))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(VideoPlayer, {
       activeFileId: (currentFile === null || currentFile === void 0 ? void 0 : currentFile.id) || '',
       videoFileId: file.id,
-      src: downloadedFiles[file.id]
+      src: downloadedFiles[file.id],
+      onMouseDown: function onMouseDown(e) {
+        if (e.button === 2) {
+          e.stopPropagation();
+        }
+      }
     })))));
   }))) : (/*#__PURE__*/React__default.createElement(UploadingIcon, null))), forwardPopupOpen && (/*#__PURE__*/React__default.createElement(ForwardMessagePopup, {
     handleForward: handleForwardMessage,
@@ -23726,18 +23714,18 @@ var FileDateAndSize = styled__default.span(_templateObject8$8 || (_templateObjec
 var FileSize = styled__default.span(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: 12px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: -10px;\n    top: 6px;\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.color;
 });
-var UserName = styled__default.h4(_templateObject10$7 || (_templateObject10$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"])), colors.white);
-var ActionsWrapper = styled__default.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var IconWrapper = styled__default.span(_templateObject12$2 || (_templateObject12$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"])), colors.white, function (props) {
+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"])), colors.white);
+var ActionsWrapper = styled__default.div(_templateObject1$4 || (_templateObject1$4 = _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"])), colors.white, function (props) {
   return props.margin;
 }, function (props) {
   return props.hideInMobile && "\n    @media (max-width: 550px) {\n      display: none;\n    }\n  ";
 });
-var CarouselItem = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  opacity: ", ";\n\n  img,\n  video {\n    //max-width: calc(100vw - 300px);\n    min-width: 280px;\n    max-width: 100%;\n    max-height: calc(100vh - 200px);\n    height: 100%;\n    @media (max-width: 480px) {\n      min-width: inherit;\n    }\n  }\n\n  img {\n    min-width: inherit;\n  }\n"])), function (props) {
+var CarouselItem = styled__default.div(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  opacity: ", ";\n\n  img,\n  video {\n    //max-width: calc(100vw - 300px);\n    min-width: 280px;\n    max-width: 100%;\n    max-height: calc(100vh - 200px);\n    height: 100%;\n    @media (max-width: 480px) {\n      min-width: inherit;\n    }\n  }\n\n  img {\n    min-width: inherit;\n  }\n"])), function (props) {
   return props.visibleSlide ? 1 : 0;
 });
-var UploadCont$1 = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  //position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  min-height: 100px;\n  min-width: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var ArrowButton = styled__default.button(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  min-width: 60px;\n  max-width: 60px;\n  height: 60px;\n  margin-right: ", ";\n  margin-left: ", ";\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  border-radius: 50%;\n  line-height: 1px;\n  align-self: center;\n  outline: none;\n  cursor: pointer;\n  visibility: ", ";\n  @media (max-width: 768px) {\n    min-width: 36px;\n    max-width: 36px;\n    height: 36px;\n    margin-right: ", ";\n    margin-left: ", ";\n\n    & > svg {\n      width: 22px;\n      height: 22px;\n    }\n  }\n  @media (max-width: 450px) {\n    min-width: 32px;\n    max-width: 32px;\n    height: 32px;\n\n    & > svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n"])), function (props) {
+var UploadCont$1 = styled__default.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n  //position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  min-height: 100px;\n  min-width: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var ArrowButton = styled__default.button(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  min-width: 60px;\n  max-width: 60px;\n  height: 60px;\n  margin-right: ", ";\n  margin-left: ", ";\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  border-radius: 50%;\n  line-height: 1px;\n  align-self: center;\n  outline: none;\n  cursor: pointer;\n  visibility: ", ";\n  @media (max-width: 768px) {\n    min-width: 36px;\n    max-width: 36px;\n    height: 36px;\n    margin-right: ", ";\n    margin-left: ", ";\n\n    & > svg {\n      width: 22px;\n      height: 22px;\n    }\n  }\n  @media (max-width: 450px) {\n    min-width: 32px;\n    max-width: 32px;\n    height: 32px;\n\n    & > svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n"])), function (props) {
   return !props.leftButton && '24px';
 }, function (props) {
   return props.leftButton && '24px';
@@ -23885,7 +23873,7 @@ function SvgSelectionIcon(props) {
   })));
 }
 
-var _templateObject$q, _templateObject2$m, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$a, _templateObject7$9, _templateObject8$9, _templateObject9$9, _templateObject10$8;
+var _templateObject$q, _templateObject2$m, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$a, _templateObject7$9, _templateObject8$9, _templateObject9$9, _templateObject0$8;
 var reactionsPrevLength = 0;
 function ReactionsPopup(_ref) {
   var messageId = _ref.messageId,
@@ -24113,7 +24101,7 @@ var ReactionScoreItem = styled__default.div(_templateObject8$9 || (_templateObje
   return props.active && !props.bubbleStyle && "\n    &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: -13px;\n    width: 100%;\n    height: 2px;\n    background-color: " + (props.activeColor || colors.primary) + ";\n    border-radius: 2px;\n    }\n  ";
 }, TabKey);
 var ReactionKey = styled__default.span(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  font-size: 20px;\n  cursor: pointer;\n"])));
-var ReactionItem$1 = styled__default.li(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), UserStatus);
+var ReactionItem$1 = styled__default.li(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), UserStatus);
 
 var _path$I;
 function _extends$J() {
@@ -26933,7 +26921,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, _templateObject10$9, _templateObject11$5, _templateObject12$3, _templateObject13$3;
+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 Attachment = function Attachment(_ref) {
   var attachment = _ref.attachment,
     _ref$isPreview = _ref.isPreview,
@@ -27569,15 +27557,15 @@ var RemoveChosenFile = styled__default(SvgDeleteUpload)(_templateObject8$a || (_
 var AttachmentName = styled__default.h3(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 18px;\n  color: ", ";\n  max-width: 275px;\n  white-space: nowrap;\n  margin: 0;\n"])), function (props) {
   return props.color;
 });
-var AttachmentSize = styled__default.span(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  color: ", ";\n  & > span {\n    color: ", ";\n    margin-left: 8px;\n  }\n"])), function (props) {
+var AttachmentSize = styled__default.span(_templateObject0$9 || (_templateObject0$9 = _taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  color: ", ";\n  & > span {\n    color: ", ";\n    margin-left: 8px;\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.errorColor;
 });
-var AttachmentFileInfo = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  ", "\n"])), function (props) {
+var AttachmentFileInfo = styled__default.div(_templateObject1$5 || (_templateObject1$5 = _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(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  border-radius: ", ";\n  border: ", ";\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) {
+var AttachmentImg$1 = styled__default.img(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  border-radius: ", ";\n  border: ", ";\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) {
   return props.absolute && 'absolute';
 }, function (props) {
   return props.isRepliedMessage ? '4px' : props.borderRadius || '6px';
@@ -27596,7 +27584,7 @@ var AttachmentImg$1 = styled__default.img(_templateObject12$3 || (_templateObjec
 }, function (props) {
   return props.hidden && 'hidden';
 });
-var VideoCont = styled__default.div(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  height: ", ";\n"])), function (props) {
+var VideoCont = styled__default.div(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n  height: ", ";\n"])), function (props) {
   return props.isDetailsView && '100%';
 });
 
@@ -29141,7 +29129,7 @@ var FrequentlyEmojisContainer = styled__default.div(_templateObject5$h || (_temp
   return props.rtlDirection && '0';
 });
 
-var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i, _templateObject6$f, _templateObject7$d, _templateObject8$c, _templateObject9$b, _templateObject10$a, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$3;
+var _templateObject$B, _templateObject2$w, _templateObject3$q, _templateObject4$m, _templateObject5$i, _templateObject6$f, _templateObject7$d, _templateObject8$c, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$3;
 var Message$1 = function Message(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -29323,12 +29311,12 @@ var Message$1 = function Message(_ref) {
   var _useState9 = React.useState(''),
     emojisPopupPosition = _useState9[0],
     setEmojisPopupPosition = _useState9[1];
-  var _useState10 = React.useState({
+  var _useState0 = React.useState({
       left: 0,
       right: 0
     }),
-    reactionsPopupHorizontalPosition = _useState10[0],
-    setReactionsPopupHorizontalPosition = _useState10[1];
+    reactionsPopupHorizontalPosition = _useState0[0],
+    setReactionsPopupHorizontalPosition = _useState0[1];
   var messageItemRef = React.useRef();
   var isVisible = useOnScreen(messageItemRef);
   var reactionsCount = message.reactionTotals && message.reactionTotals.reduce(function (prevValue, currentValue) {
@@ -29883,20 +29871,20 @@ var ReactionsContainer = styled__default.div(_templateObject9$b || (_templateObj
 }, function (props) {
   return props.topPosition && "\n      position: relative;\n      top: " + props.topPosition + ";\n  ";
 });
-var MessageReactionsCont = styled__default.div(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n  max-width: 300px;\n  direction: ", ";\n  cursor: pointer;\n"])), function (props) {
+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(_templateObject11$6 || (_templateObject11$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$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) {
   return props.height || '14px';
 });
-var HiddenMessageTime$1 = styled__default.span(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
+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) {
   return props.hide && 'none';
 }, function (props) {
   return props.fontSize || '12px';
 }, function (props) {
   return props.color;
 });
-var MessageContent = styled__default.div(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-right: ", ";\n  //transform: ", ";\n  max-width: ", ";\n\n  display: flex;\n  flex-direction: column;\n  pointer-events: ", ";\n"])), function (props) {
+var MessageContent = styled__default.div(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-left: ", ";\n  margin-right: ", ";\n  //transform: ", ";\n  max-width: ", ";\n\n  display: flex;\n  flex-direction: column;\n  pointer-events: ", ";\n"])), function (props) {
   return props.withAvatar && '13px';
 }, function (props) {
   return props.withAvatar && '13px';
@@ -29907,7 +29895,7 @@ var MessageContent = styled__default.div(_templateObject13$4 || (_templateObject
 }, function (props) {
   return props.selectionIsActive && 'none';
 });
-var MessageItem = styled__default.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  padding: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  //transition: all 0.2s;\n  width: 100%;\n  box-sizing: border-box;\n  transition: padding-left 0.2s;\n  cursor: ", ";\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    display: inline-block;\n  }\n  &:hover .message_status_time {\n    display: flex;\n    visibility: visible;\n  }\n\n  &:hover ", " {\n    visibility: visible;\n  }\n"])), function (props) {
+var MessageItem = styled__default.div(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  position: relative;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  padding: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  //transition: all 0.2s;\n  width: 100%;\n  box-sizing: border-box;\n  transition: padding-left 0.2s;\n  cursor: ", ";\n  ", ";\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:hover ", " {\n    display: inline-block;\n  }\n  &:hover .message_status_time {\n    display: flex;\n    visibility: visible;\n  }\n\n  &:hover ", " {\n    visibility: visible;\n  }\n"])), function (props) {
   return props.topMargin || '12px';
 }, function (props) {
   return props.bottomMargin;
@@ -29931,7 +29919,7 @@ var HiddenMessageProperty;
   HiddenMessageProperty["hideAfterSendMessage"] = "hideAfterSendMessage";
 })(HiddenMessageProperty || (HiddenMessageProperty = {}));
 
-var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$j, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$c, _templateObject10$b, _templateObject11$7;
+var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$j, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$c, _templateObject0$b, _templateObject1$7;
 var loading = false;
 var loadFromServer = false;
 var loadDirection = '';
@@ -30871,10 +30859,10 @@ var MessageWrapper = styled__default.div(_templateObject8$d || (_templateObject8
 var NoMessagesContainer = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var NoMessagesTitle = styled__default.h4(_templateObject10$b || (_templateObject10$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) {
+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(_templateObject11$7 || (_templateObject11$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$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) {
   return props.color;
 });
 
@@ -31498,7 +31486,7 @@ function MentionsPlugin(_ref3) {
         if (nodeToReplace) {
           var replacedNode = nodeToReplace.replace(mentionNode);
           var appendedNode = replacedNode.insertAfter(lexical.$createTextNode(' '));
-          appendedNode.select();
+          appendedNode.selectStart();
         }
         closeMenu();
       });
@@ -31965,7 +31953,7 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
         if (!nextSibling) {
           editor.update(function () {
             var appendedNode = node.insertAfter(lexical.$createTextNode(' '));
-            appendedNode.select(0, 0);
+            appendedNode.selectStart();
           });
         }
       }
@@ -33204,7 +33192,7 @@ var Timer$2 = styled__default.div(_templateObject7$g || (_templateObject7$g = _t
   return props.color;
 });
 
-var _templateObject$H, _templateObject2$C, _templateObject3$v, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject10$c, _templateObject11$8, _templateObject12$5, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$1, _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, _templateObject35$1;
+var _templateObject$H, _templateObject2$C, _templateObject3$v, _templateObject4$r, _templateObject5$n, _templateObject6$j, _templateObject7$h, _templateObject8$f, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$1, _templateObject19$1, _templateObject20$1, _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;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = LexicalComposerContext.useLexicalComposerContext(),
@@ -33394,66 +33382,66 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useState9 = React.useState(false),
     emojisInRightSide = _useState9[0],
     setEmojisInRightSide = _useState9[1];
-  var _useState10 = React.useState(0),
-    emojisPopupLeftPosition = _useState10[0],
-    setEmojisPopupLeftPosition = _useState10[1];
-  var _useState11 = React.useState(0),
-    emojisPopupBottomPosition = _useState11[0],
-    setEmojisPopupBottomPosition = _useState11[1];
-  var _useState12 = React.useState(false),
-    addAttachmentsInRightSide = _useState12[0],
-    setAddAttachmentsInRightSide = _useState12[1];
-  var _useState13 = React.useState({
+  var _useState0 = React.useState(0),
+    emojisPopupLeftPosition = _useState0[0],
+    setEmojisPopupLeftPosition = _useState0[1];
+  var _useState1 = React.useState(0),
+    emojisPopupBottomPosition = _useState1[0],
+    setEmojisPopupBottomPosition = _useState1[1];
+  var _useState10 = React.useState(false),
+    addAttachmentsInRightSide = _useState10[0],
+    setAddAttachmentsInRightSide = _useState10[1];
+  var _useState11 = React.useState({
       clear: false
     }),
-    shouldClearEditor = _useState13[0],
-    setShouldClearEditor = _useState13[1];
-  var _useState14 = React.useState([]),
-    messageBodyAttributes = _useState14[0],
-    setMessageBodyAttributes = _useState14[1];
-  var _useState15 = React.useState([]),
-    mentionedMembers = _useState15[0],
-    setMentionedMembers = _useState15[1];
-  var _useState16 = React.useState(''),
-    browser = _useState16[0],
-    setBrowser = _useState16[1];
-  var _useState17 = React.useState(false),
-    mentionsIsOpen = _useState17[0],
-    setMentionsIsOpen = _useState17[1];
-  var _useState18 = React.useState(),
-    inputContainerHeight = _useState18[0],
-    setInputContainerHeight = _useState18[1];
+    shouldClearEditor = _useState11[0],
+    setShouldClearEditor = _useState11[1];
+  var _useState12 = React.useState([]),
+    messageBodyAttributes = _useState12[0],
+    setMessageBodyAttributes = _useState12[1];
+  var _useState13 = React.useState([]),
+    mentionedMembers = _useState13[0],
+    setMentionedMembers = _useState13[1];
+  var _useState14 = React.useState(''),
+    browser = _useState14[0],
+    setBrowser = _useState14[1];
+  var _useState15 = React.useState(false),
+    mentionsIsOpen = _useState15[0],
+    setMentionsIsOpen = _useState15[1];
+  var _useState16 = React.useState(),
+    inputContainerHeight = _useState16[0],
+    setInputContainerHeight = _useState16[1];
   var selectedText = React.useRef(null);
-  var _useState19 = React.useState(),
-    typingTimout = _useState19[0],
-    setTypingTimout = _useState19[1];
-  var _useState20 = React.useState(),
-    inTypingStateTimout = _useState20[0],
-    setInTypingStateTimout = _useState20[1];
-  var _useState21 = React.useState(false),
-    inTypingState = _useState21[0],
-    setInTypingState = _useState21[1];
+  var _useState17 = React.useState(),
+    typingTimout = _useState17[0],
+    setTypingTimout = _useState17[1];
+  var _useState18 = React.useState(),
+    inTypingStateTimout = _useState18[0],
+    setInTypingStateTimout = _useState18[1];
+  var _useState19 = React.useState(false),
+    inTypingState = _useState19[0],
+    setInTypingState = _useState19[1];
+  var _useState20 = React.useState(false),
+    sendMessageIsActive = _useState20[0],
+    setSendMessageIsActive = _useState20[1];
+  var _useState21 = React.useState([]),
+    attachments = _useState21[0],
+    setAttachments = _useState21[1];
   var _useState22 = React.useState(false),
-    sendMessageIsActive = _useState22[0],
-    setSendMessageIsActive = _useState22[1];
-  var _useState23 = React.useState([]),
-    attachments = _useState23[0],
-    setAttachments = _useState23[1];
+    forwardPopupOpen = _useState22[0],
+    setForwardPopupOpen = _useState22[1];
+  var _useState23 = React.useState(false),
+    deletePopupOpen = _useState23[0],
+    setDeletePopupOpen = _useState23[1];
   var _useState24 = React.useState(false),
-    forwardPopupOpen = _useState24[0],
-    setForwardPopupOpen = _useState24[1];
-  var _useState25 = React.useState(false),
-    deletePopupOpen = _useState25[0],
-    setDeletePopupOpen = _useState25[1];
-  var _useState26 = React.useState(false),
-    isIncomingMessage = _useState26[0],
-    setIsIncomingMessage = _useState26[1];
-  var _useState27 = React.useState('.jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.wmv,.flv,.webm,.jfif'),
-    mediaExtensions = _useState27[0],
-    setMediaExtensions = _useState27[1];
-  var _useState28 = React.useState(''),
-    uploadErrorMessage = _useState28[0],
-    setUploadErrorMessage = _useState28[1];
+    isIncomingMessage = _useState24[0],
+    setIsIncomingMessage = _useState24[1];
+  var _useState25 = React.useState('.jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.wmv,.flv,.webm,.jfif'),
+    mediaExtensions = _useState25[0],
+    setMediaExtensions = _useState25[1];
+  var _useState26 = React.useState(''),
+    uploadErrorMessage = _useState26[0],
+    setUploadErrorMessage = _useState26[1];
   var typingIndicator = reactRedux.useSelector(typingIndicatorSelector(activeChannel.id));
   var contactsMap = reactRedux.useSelector(contactsMapSelector);
   var connectionStatus = reactRedux.useSelector(connectionStatusSelector, reactRedux.shallowEqual);
@@ -33463,15 +33451,15 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var messageInputRef = React.useRef(null);
   var emojiBtnRef = React.useRef(null);
   var addAttachmentsBtnRef = React.useRef(null);
-  var _useState29 = React.useState(),
-    realEditorState = _useState29[0],
-    setRealEditorState = _useState29[1];
-  var _useState30 = React.useState(null),
-    floatingAnchorElem = _useState30[0],
-    setFloatingAnchorElem = _useState30[1];
-  var _useState31 = React.useState(false),
-    isSmallWidthViewport = _useState31[0],
-    setIsSmallWidthViewport = _useState31[1];
+  var _useState27 = React.useState(),
+    realEditorState = _useState27[0],
+    setRealEditorState = _useState27[1];
+  var _useState28 = React.useState(null),
+    floatingAnchorElem = _useState28[0],
+    setFloatingAnchorElem = _useState28[1];
+  var _useState29 = React.useState(false),
+    isSmallWidthViewport = _useState29[0],
+    setIsSmallWidthViewport = _useState29[1];
   var addAttachmentByMenu = showChooseFileAttachment && showChooseMediaAttachment;
   function onChange(editorState) {
     setRealEditorState(editorState);
@@ -33855,7 +33843,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
             fileChecksum = "" + reader.result;
           }
           return Promise.resolve(hashString(fileChecksum || '')).then(function (checksumHash) {
-            function _temp12() {
+            function _temp10() {
               if (dataFromDb) {
                 cachedUrl = dataFromDb.url;
                 setPendingAttachment(tid, {
@@ -33867,7 +33855,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                   checksum: checksumHash
                 });
               }
-              var _temp10 = function () {
+              var _temp0 = function () {
                 if (customUploader) {
                   if (fileType === 'image') {
                     resizeImage(file).then(function (resizedFile) {
@@ -33931,10 +33919,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                                   tid: tid,
                                   type: fileType,
                                   size: dataFromDb ? dataFromDb.size : file.size,
-                                  metadata: dataFromDb ? _metas : JSON.stringify({
-                                    tmb: _metas.thumbnail,
-                                    szw: _metas.imageWidth,
-                                    szh: _metas.imageHeight
+                                  metadata: dataFromDb ? metas : JSON.stringify({
+                                    tmb: metas.thumbnail,
+                                    szw: metas.imageWidth,
+                                    szh: metas.imageHeight
                                   })
                                 }]);
                               });
@@ -33949,7 +33937,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                                     tid: tid,
                                     type: fileType,
                                     size: dataFromDb.size,
-                                    metadata: _metas
+                                    metadata: metas
                                   }]);
                                 });
                               } else {
@@ -33965,7 +33953,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                                         type: fileType,
                                         size: resizedFile.size,
                                         metadata: JSON.stringify({
-                                          tmb: _metas.thumbnail,
+                                          tmb: metas.thumbnail,
                                           szw: resizedFileData.newWidth,
                                           szh: resizedFileData.newHeight
                                         })
@@ -33979,18 +33967,18 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                               }
                             }
                           };
-                          var _metas = {};
+                          var metas = {};
                           var _temp = function () {
                             if (dataFromDb) {
-                              _metas = dataFromDb.metadata;
+                              metas = dataFromDb.metadata;
                             } else {
                               return Promise.resolve(createImageThumbnail(file)).then(function (_ref4) {
                                 var thumbnail = _ref4.thumbnail,
                                   imageWidth = _ref4.imageWidth,
                                   imageHeight = _ref4.imageHeight;
-                                _metas.imageHeight = imageHeight;
-                                _metas.imageWidth = imageWidth;
-                                _metas.thumbnail = thumbnail;
+                                metas.imageHeight = imageHeight;
+                                metas.imageWidth = imageWidth;
+                                metas.thumbnail = thumbnail;
                               });
                             }
                           }();
@@ -34006,20 +33994,20 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                                 attachmentUrl: URL.createObjectURL(file),
                                 tid: tid,
                                 size: dataFromDb ? dataFromDb.size : file.size,
-                                metadata: dataFromDb ? _metas2 : JSON.stringify({
-                                  tmb: _metas2.thumbnail
+                                metadata: dataFromDb ? _metas : JSON.stringify({
+                                  tmb: _metas.thumbnail
                                 })
                               }]);
                             });
                           };
-                          var _metas2 = {};
+                          var _metas = {};
                           var _temp3 = function () {
                             if (dataFromDb) {
-                              _metas2 = dataFromDb.metadata;
+                              _metas = dataFromDb.metadata;
                             } else {
                               return Promise.resolve(createImageThumbnail(file, undefined, 50, 50)).then(function (_ref5) {
                                 var thumbnail = _ref5.thumbnail;
-                                _metas2.thumbnail = thumbnail;
+                                _metas.thumbnail = thumbnail;
                               });
                             }
                           }();
@@ -34028,7 +34016,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                       }();
                       if (_temp5 && _temp5.then) return _temp5.then(function () {});
                     } else {
-                      var _temp13 = function () {
+                      var _temp11 = function () {
                         if (fileType === 'video') {
                           var _temp7 = function _temp7() {
                             setAttachments(function (prevState) {
@@ -34040,23 +34028,23 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                                 size: dataFromDb ? dataFromDb.size : file.size,
                                 attachmentUrl: URL.createObjectURL(file),
                                 tid: tid,
-                                metadata: _metas3
+                                metadata: metas
                               }]);
                             });
                           };
-                          var _metas3 = {};
+                          var metas = {};
                           var _temp6 = function () {
                             if (dataFromDb) {
-                              _metas3 = dataFromDb.metadata;
+                              metas = dataFromDb.metadata;
                             } else {
                               return Promise.resolve(getFrame(URL.createObjectURL(file), 0)).then(function (_ref6) {
                                 var thumb = _ref6.thumb,
                                   width = _ref6.width,
                                   height = _ref6.height;
-                                _metas3.tmb = thumb;
-                                _metas3.width = width;
-                                _metas3.height = height;
-                                _metas3 = JSON.stringify(_metas3);
+                                metas.tmb = thumb;
+                                metas.width = width;
+                                metas.height = height;
+                                metas = JSON.stringify(metas);
                               });
                             }
                           }();
@@ -34075,23 +34063,23 @@ var SendMessageInput = function SendMessageInput(_ref3) {
                           });
                         }
                       }();
-                      if (_temp13 && _temp13.then) return _temp13.then(function () {});
+                      if (_temp11 && _temp11.then) return _temp11.then(function () {});
                     }
                   }();
                   if (_temp9 && _temp9.then) return _temp9.then(function () {});
                 }
               }();
-              if (_temp10 && _temp10.then) return _temp10.then(function () {});
+              if (_temp0 && _temp0.then) return _temp0.then(function () {});
             }
             var dataFromDb;
-            var _temp11 = _catch(function () {
+            var _temp1 = _catch(function () {
               return Promise.resolve(_getDataFromDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, checksumHash, 'checksum')).then(function (_getDataFromDB) {
                 dataFromDb = _getDataFromDB;
               });
             }, function (e) {
               log.error('error in get data from db . . . . ', e);
             });
-            return _temp11 && _temp11.then ? _temp11.then(_temp12) : _temp12(_temp11);
+            return _temp1 && _temp1.then ? _temp1.then(_temp10) : _temp10(_temp1);
           });
         } catch (e) {
           return Promise.reject(e);
@@ -34354,10 +34342,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       var windowHeight = window.innerHeight;
       var _emojiBtnRef$current$ = emojiBtnRef.current.getBoundingClientRect(),
         left = _emojiBtnRef$current$.left,
-        width = _emojiBtnRef$current$.width,
+        _width = _emojiBtnRef$current$.width,
         top = _emojiBtnRef$current$.top;
       setEmojisPopupBottomPosition(windowHeight - top);
-      setEmojisPopupLeftPosition(left - width / 2);
+      setEmojisPopupLeftPosition(left - _width / 2);
       if (emojiBtnRef.current.getBoundingClientRect().left > messageInputRef.current.getBoundingClientRect().left) {
         setEmojisInRightSide(true);
       }
@@ -34732,7 +34720,7 @@ var ReplyMessageBody$1 = styled__default.div(_templateObject8$f || (_templateObj
 var EditReplyMessageHeader = styled__default.h4(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin: 0 0 2px;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  color: ", ";\n\n  > svg {\n    margin-right: 4px;\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
   return props.color;
 });
-var AddAttachmentIcon = styled__default.span(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  margin: 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n\n  > svg {\n    ", ";\n    width: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var AddAttachmentIcon = styled__default.span(_templateObject0$c || (_templateObject0$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  margin: 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n\n  > svg {\n    ", ";\n    width: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.height ? props.height + "px" : '36px';
 }, function (props) {
   return props.order === 0 || props.order ? props.order : 1;
@@ -34741,21 +34729,21 @@ var AddAttachmentIcon = styled__default.span(_templateObject10$c || (_templateOb
 }, function (props) {
   return props.hoverColor;
 });
-var SendMessageInputContainer = styled__default.div(_templateObject11$8 || (_templateObject11$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$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) {
   return props.minHeight || '36px';
 }, function (props) {
   return props.messageForReply ? '0 0 4px 4px' : '4px';
 }, AddAttachmentIcon, function (props) {
   return props.iconColor;
 });
-var MessageInputWrapper = styled__default.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  max-width: calc(100% - 50px);\n  //max-width: ", ";\n  //max-width: calc(100% - 110px);\n  background-color: ", ";\n  border-radius: ", ";\n  position: relative;\n"])), function (props) {
+var MessageInputWrapper = styled__default.div(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  max-width: calc(100% - 50px);\n  //max-width: ", ";\n  //max-width: calc(100% - 110px);\n  background-color: ", ";\n  border-radius: ", ";\n  position: relative;\n"])), function (props) {
   return props.channelDetailsIsOpen ? "calc(100% - " + (props.channelDetailsIsOpen ? 362 : 0) + "px)" : '';
 }, function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.borderRadius || '18px';
 });
-var LexicalWrapper = styled__default.div(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  & .rich_text_editor {\n    width: 100%;\n    max-height: 80px;\n    min-height: 20px;\n    display: block;\n    border: none;\n    box-sizing: border-box;\n    outline: none !important;\n    overflow: auto;\n    border-radius: ", ";\n    background-color: ", ";\n    padding: ", ";\n    color: ", ";\n    order: ", ";\n\n    & p {\n      font-size: 15px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &::selection {\n      background-color: ", ";\n    }\n\n    & *::selection {\n      background-color: ", ";\n    }\n\n    & span::selection {\n      background-color: ", ";\n    }\n\n    &:empty:before {\n      content: attr(data-placeholder);\n    }\n\n    & .content_editable_input {\n      border: none !important;\n      outline: none !important;\n    }\n\n    & .mention {\n      color: ", ";\n      background-color: inherit !important;\n      user-modify: read-only;\n    }\n\n    & span.bold {\n      font-weight: bold;\n    }\n\n    & .editor_paragraph {\n      margin: 0;\n    }\n\n    & .text_bold {\n      font-weight: 600;\n    }\n\n    & .text_italic {\n      font-style: italic;\n    }\n\n    & .text_underline {\n      text-decoration: underline;\n    }\n\n    & .text_strikethrough {\n      text-decoration: line-through;\n    }\n\n    & .text_underlineStrikethrough {\n      text-decoration: underline line-through;\n    }\n\n    & code {\n      font-family: inherit;\n      letter-spacing: 4px;\n    }\n  }\n"])), function (props) {
+var LexicalWrapper = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  & .rich_text_editor {\n    width: 100%;\n    max-height: 80px;\n    min-height: 20px;\n    display: block;\n    border: none;\n    box-sizing: border-box;\n    outline: none !important;\n    overflow: auto;\n    border-radius: ", ";\n    background-color: ", ";\n    padding: ", ";\n    color: ", ";\n    order: ", ";\n\n    & p {\n      font-size: 15px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &::selection {\n      background-color: ", ";\n    }\n\n    & *::selection {\n      background-color: ", ";\n    }\n\n    & span::selection {\n      background-color: ", ";\n    }\n\n    &:empty:before {\n      content: attr(data-placeholder);\n    }\n\n    & .content_editable_input {\n      border: none !important;\n      outline: none !important;\n    }\n\n    & .mention {\n      color: ", ";\n      background-color: inherit !important;\n      user-modify: read-only;\n    }\n\n    & span.bold {\n      font-weight: bold;\n    }\n\n    & .editor_paragraph {\n      margin: 0;\n    }\n\n    & .text_bold {\n      font-weight: 600;\n    }\n\n    & .text_italic {\n      font-style: italic;\n    }\n\n    & .text_underline {\n      text-decoration: underline;\n    }\n\n    & .text_strikethrough {\n      text-decoration: line-through;\n    }\n\n    & .text_underlineStrikethrough {\n      text-decoration: underline line-through;\n    }\n\n    & code {\n      font-family: inherit;\n      letter-spacing: 4px;\n    }\n  }\n"])), function (props) {
   return props.borderRadius;
 }, function (props) {
   return props.backgroundColor;
@@ -34776,12 +34764,12 @@ var LexicalWrapper = styled__default.div(_templateObject13$5 || (_templateObject
 }, function (props) {
   return props.mentionColor;
 });
-var Placeholder = styled__default.span(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  color: ", ";\n  padding: ", ";\n  line-height: 20px;\n\n  @media (max-width: 768px) {\n    font-size: 13px;\n  }\n"])), function (props) {
+var Placeholder = styled__default.span(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  color: ", ";\n  padding: ", ";\n  line-height: 20px;\n\n  @media (max-width: 768px) {\n    font-size: 13px;\n  }\n"])), function (props) {
   return props.color || colors.placeholderTextColor;
 }, function (props) {
   return props.paddings || '8px 6px';
 });
-var EmojiButton = styled__default.span(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  position: relative;\n  margin: auto 8px 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n  -webkit-tap-highlight-color: transparent;\n\n  > svg {\n    ", ";\n    width: 24px;\n    height: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
+var EmojiButton = styled__default.span(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: ", ";\n  align-items: center;\n  position: relative;\n  margin: auto 8px 0 8px;\n  cursor: pointer;\n  line-height: 13px;\n  z-index: 2;\n  order: ", ";\n  -webkit-tap-highlight-color: transparent;\n\n  > svg {\n    ", ";\n    width: 24px;\n    height: 24px;\n  }\n\n  &:hover > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.height ? props.height + "px" : '36px';
 }, function (props) {
   return props.order === 0 || props.order ? props.order : 2;
@@ -34790,48 +34778,48 @@ var EmojiButton = styled__default.span(_templateObject15$3 || (_templateObject15
 }, function (props) {
   return props.hoverColor;
 });
-var SendMessageButton = styled__default.span(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (props) {
+var SendMessageButton = styled__default.span(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (props) {
   return !props.isCustomButton && "\n  display: flex;\n  height: " + (props.height ? props.height + "px" : '36px') + ";\n  align-items: center;\n  // margin: 0 8px 0 auto;\n  cursor: " + (props.isActive && 'pointer') + ";\n  line-height: 13px;\n  order: " + (props.order === 0 || props.order ? props.order : 4) + ";\n  -webkit-tap-highlight-color: transparent;\n\n  color: " + (props.isActive ? colors.primary : props.color) + ";\n  & > svg {\n    color: " + props.iconColor + ";\n  }\n  ";
 });
-var AudioCont = styled__default.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  justify-content: flex-end;\n"])));
-var ChosenAttachments = styled__default.div(_templateObject18$2 || (_templateObject18$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px 16px 14px;\n  overflow-x: auto;\n\n  & ", " {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    object-fit: cover;\n  }\n\n  & ", " {\n    width: 240px;\n    padding: 5px 12px;\n    border-radius: 8px;\n    height: 50px;\n  }\n"])), AttachmentImg$1, AttachmentFile$1);
-var TypingIndicator$1 = styled__default.div(_templateObject19$2 || (_templateObject19$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 100%;\n  left: 16px;\n"])));
-var TypingIndicatorCont = styled__default.div(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 12px;\n"])));
-var TypingFrom = styled__default.h5(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n  margin: 0 4px 0 0;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
+var AudioCont = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  justify-content: flex-end;\n"])));
+var ChosenAttachments = styled__default.div(_templateObject16$2 || (_templateObject16$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 16px 16px 14px;\n  overflow-x: auto;\n\n  & ", " {\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    object-fit: cover;\n  }\n\n  & ", " {\n    width: 240px;\n    padding: 5px 12px;\n    border-radius: 8px;\n    height: 50px;\n  }\n"])), AttachmentImg$1, AttachmentFile$1);
+var TypingIndicator$1 = styled__default.div(_templateObject17$2 || (_templateObject17$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 100%;\n  left: 16px;\n"])));
+var TypingIndicatorCont = styled__default.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 12px;\n"])));
+var TypingFrom = styled__default.h5(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n  margin: 0 4px 0 0;\n  font-weight: 400;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: -0.2px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var sizeAnimation = styled.keyframes(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n  0% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  50% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  100% {\n    width: 6px;\n    height: 6px;\n    opacity: 1;\n  }\n"])));
-var DotOne = styled__default.span(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose([""])));
-var DotTwo = styled__default.span(_templateObject24$1 || (_templateObject24$1 = _taggedTemplateLiteralLoose([""])));
-var DotThree = styled__default.span(_templateObject25$1 || (_templateObject25$1 = _taggedTemplateLiteralLoose([""])));
-var TypingAnimation = styled__default.div(_templateObject26$1 || (_templateObject26$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  & > span {\n    position: relative;\n    width: 6px;\n    height: 6px;\n    margin-right: 3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation-timing-function: linear;\n\n    &:after {\n      content: '';\n      position: absolute;\n\n      width: 3.5px;\n      height: 3.5px;\n      border-radius: 50%;\n      background-color: ", ";\n      animation-name: ", ";\n      animation-duration: 0.6s;\n      animation-iteration-count: infinite;\n    }\n  }\n\n  & ", " {\n    &:after {\n      animation-delay: 0s;\n    }\n  }\n\n  & ", " {\n    &:after {\n      animation-delay: 0.2s;\n    }\n  }\n\n  & ", " {\n    &:after {\n      animation-delay: 0.3s;\n    }\n  }\n"])), colors.borderColor2, sizeAnimation, DotOne, DotTwo, DotThree);
-var Loading = styled__default.div(_templateObject27$1 || (_templateObject27$1 = _taggedTemplateLiteralLoose(["\n  height: 36px;\n"])));
-var BlockedUserInfo = styled__default.div(_templateObject28$1 || (_templateObject28$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  color: ", ";\n\n  & > svg {\n    margin-right: 12px;\n  }\n"])), function (props) {
+var sizeAnimation = styled.keyframes(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n  0% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  50% {\n    width: 2px;\n    height: 2px;\n    opacity: 0.4;\n  }\n  100% {\n    width: 6px;\n    height: 6px;\n    opacity: 1;\n  }\n"])));
+var DotOne = styled__default.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose([""])));
+var DotTwo = styled__default.span(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose([""])));
+var DotThree = styled__default.span(_templateObject23$1 || (_templateObject23$1 = _taggedTemplateLiteralLoose([""])));
+var TypingAnimation = styled__default.div(_templateObject24$1 || (_templateObject24$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n\n  & > span {\n    position: relative;\n    width: 6px;\n    height: 6px;\n    margin-right: 3px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    animation-timing-function: linear;\n\n    &:after {\n      content: '';\n      position: absolute;\n\n      width: 3.5px;\n      height: 3.5px;\n      border-radius: 50%;\n      background-color: ", ";\n      animation-name: ", ";\n      animation-duration: 0.6s;\n      animation-iteration-count: infinite;\n    }\n  }\n\n  & ", " {\n    &:after {\n      animation-delay: 0s;\n    }\n  }\n\n  & ", " {\n    &:after {\n      animation-delay: 0.2s;\n    }\n  }\n\n  & ", " {\n    &:after {\n      animation-delay: 0.3s;\n    }\n  }\n"])), colors.borderColor2, sizeAnimation, DotOne, DotTwo, DotThree);
+var Loading = styled__default.div(_templateObject25$1 || (_templateObject25$1 = _taggedTemplateLiteralLoose(["\n  height: 36px;\n"])));
+var BlockedUserInfo = styled__default.div(_templateObject26$1 || (_templateObject26$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  color: ", ";\n\n  & > svg {\n    margin-right: 12px;\n  }\n"])), function (props) {
   return props.color;
 });
-var JoinChannelCont = styled__default.div(_templateObject29$1 || (_templateObject29$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 -12px;\n  padding: 14px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  background-color: ", ";\n  cursor: pointer;\n"])), function (props) {
+var JoinChannelCont = styled__default.div(_templateObject27$1 || (_templateObject27$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0 -12px;\n  padding: 14px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n  background-color: ", ";\n  cursor: pointer;\n"])), function (props) {
   return props.color || colors.primary;
 }, function (props) {
   return props.backgroundColor;
 });
-var ReadOnlyCont = styled__default.div(_templateObject30$1 || (_templateObject30$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n\n  & > svg {\n    margin-right: 12px;\n    color: ", ";\n  }\n"])), function (props) {
+var ReadOnlyCont = styled__default.div(_templateObject28$1 || (_templateObject28$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 12px;\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n  color: ", ";\n\n  & > svg {\n    margin-right: 12px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.iconColor || colors.primary;
 });
-var ReplyMessageCont = styled__default.div(_templateObject31$1 || (_templateObject31$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var ReplyIconWrapper = styled__default.span(_templateObject32$1 || (_templateObject32$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 12px;\n  width: 40px;\n  height: 40px;\n  background-color: ", ";\n  border-radius: 50%;\n\n  & > svg {\n    width: 20px;\n    height: 20px;\n    color: ", ";\n  }\n"])), function (props) {
+var ReplyMessageCont = styled__default.div(_templateObject29$1 || (_templateObject29$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var ReplyIconWrapper = styled__default.span(_templateObject30$1 || (_templateObject30$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 12px;\n  width: 40px;\n  height: 40px;\n  background-color: ", ";\n  border-radius: 50%;\n\n  & > svg {\n    width: 20px;\n    height: 20px;\n    color: ", ";\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, colors.white);
-var SelectedMessagesWrapper = styled__default.div(_templateObject33$1 || (_templateObject33$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n"])));
-var CustomButton = styled__default.span(_templateObject34$1 || (_templateObject34$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  padding: 8px 16px;\n  background-color: ", ";\n  margin-left: ", ";\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-weight: 500;\n  cursor: pointer;\n\n  > svg {\n    width: 20px;\n    height: 20px;\n    margin-right: 8px;\n  }\n"])), function (props) {
+var SelectedMessagesWrapper = styled__default.div(_templateObject31$1 || (_templateObject31$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  padding: 12px 16px;\n"])));
+var CustomButton = styled__default.span(_templateObject32$1 || (_templateObject32$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  padding: 8px 16px;\n  background-color: ", ";\n  margin-left: ", ";\n  border-radius: 8px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-weight: 500;\n  cursor: pointer;\n\n  > svg {\n    width: 20px;\n    height: 20px;\n    margin-right: 8px;\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.backgroundColor || colors.primaryLight;
 }, function (props) {
   return props.marginLeft || '8px';
 });
-var CloseIconWrapper = styled__default.span(_templateObject35$1 || (_templateObject35$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  cursor: pointer;\n  margin-left: auto;\n  padding: 10px;\n"])));
+var CloseIconWrapper = styled__default.span(_templateObject33$1 || (_templateObject33$1 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  cursor: pointer;\n  margin-left: auto;\n  padding: 10px;\n"])));
 
 var _path$1c;
 function _extends$1g() {
@@ -35028,7 +35016,7 @@ function SvgUnpin(props) {
   })));
 }
 
-var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$e, _templateObject10$d, _templateObject11$9, _templateObject12$6, _templateObject13$6, _templateObject14$5, _templateObject15$4, _templateObject16$3, _templateObject17$3, _templateObject18$3;
+var _templateObject$I, _templateObject2$D, _templateObject3$w, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var _channel$metadata;
   var channel = _ref.channel,
@@ -35141,9 +35129,9 @@ var Actions = function Actions(_ref) {
   var _useState9 = React.useState(''),
     popupButtonText = _useState9[0],
     setPopupButtonText = _useState9[1];
-  var _useState10 = React.useState(''),
-    popupTitle = _useState10[0],
-    setPopupTitle = _useState10[1];
+  var _useState0 = React.useState(''),
+    popupTitle = _useState0[0],
+    setPopupTitle = _useState0[1];
   var dispatch = reactRedux.useDispatch();
   var oneHour = 60 * 60 * 1000;
   var twoHours = oneHour * 2;
@@ -35500,15 +35488,15 @@ var DefaultMuteIcon = styled__default(SvgNotifications)(_templateObject6$k || (_
 var DefaultStarIcon = styled__default(SvgStar)(_templateObject7$i || (_templateObject7$i = _taggedTemplateLiteralLoose([""])));
 var DefaultUnpinIcon = styled__default(SvgUnpin)(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose([""])));
 var DefaultPinIcon = styled__default(SvgPin)(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject11$9 || (_templateObject11$9 = _taggedTemplateLiteralLoose([""])));
-var DefaultBlockIcon = styled__default(SvgBlockChannel)(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose([""])));
-var DefaultReportIcon = styled__default(SvgReport)(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose([""])));
-var DefaultClearIcon = styled__default(SvgClear)(_templateObject14$5 || (_templateObject14$5 = _taggedTemplateLiteralLoose([""])));
-var DefaultDeleteChannelIcon = styled__default(SvgDeleteChannel)(_templateObject15$4 || (_templateObject15$4 = _taggedTemplateLiteralLoose([""])));
-var DefaultBottomIcon = styled__default(SvgBottom)(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsReadIcon = styled__default(SvgLeave)(_templateObject17$3 || (_templateObject17$3 = _taggedTemplateLiteralLoose([""])));
-var ActionItem = styled__default.li(_templateObject18$3 || (_templateObject18$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 10px 0;\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n  order: ", ";\n  pointer-events: ", ";\n\n  & > div {\n    margin-left: auto;\n  }\n\n  & > svg {\n    margin-right: 16px;\n    color: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n  }\n\n  &:last-child {\n    //margin-bottom: 0;\n  }\n"])), function (props) {
+var DefaultMarkAsRead = styled__default(SvgMarkAsRead)(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsUnRead = styled__default(SvgMarkAsUnRead)(_templateObject1$9 || (_templateObject1$9 = _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([""])));
+var DefaultDeleteChannelIcon = styled__default(SvgDeleteChannel)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose([""])));
+var DefaultBottomIcon = styled__default(SvgBottom)(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsReadIcon = styled__default(SvgLeave)(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteralLoose([""])));
+var ActionItem = styled__default.li(_templateObject16$3 || (_templateObject16$3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 10px 0;\n  font-size: ", ";\n  color: ", ";\n  cursor: pointer;\n  order: ", ";\n  pointer-events: ", ";\n\n  & > div {\n    margin-left: auto;\n  }\n\n  & > svg {\n    margin-right: 16px;\n    color: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n  }\n\n  &:last-child {\n    //margin-bottom: 0;\n  }\n"])), function (props) {
   return props.fontSize || '15px';
 }, function (props) {
   return props.color;
@@ -37056,7 +37044,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$T, _templateObject2$M, _templateObject3$D, _templateObject4$y, _templateObject5$t, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$g, _templateObject10$e, _templateObject11$a, _templateObject12$7;
+var _templateObject$T, _templateObject2$M, _templateObject3$D, _templateObject4$y, _templateObject5$t, _templateObject6$o, _templateObject7$m, _templateObject8$k, _templateObject9$g, _templateObject0$e, _templateObject1$a, _templateObject10$7;
 var Details = function Details(_ref) {
   var _activeChannel$metada;
   var detailsTitleText = _ref.detailsTitleText,
@@ -37451,15 +37439,15 @@ var DetailsHeader = styled__default.div(_templateObject8$k || (_templateObject8$
 var ChannelAvatarAndName = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex-direction: ", ";\n"])), function (props) {
   return props.direction;
 });
-var ChannelName$1 = styled__default(SectionHeader)(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  max-width: ", ";\n  text-overflow: ellipsis;\n  text-color: ", ";\n  overflow: hidden;\n  text-transform: ", ";\n"])), function (props) {
+var ChannelName$1 = styled__default(SectionHeader)(_templateObject0$e || (_templateObject0$e = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n  max-width: ", ";\n  text-overflow: ellipsis;\n  text-color: ", ";\n  overflow: hidden;\n  text-transform: ", ";\n"])), function (props) {
   return props.isDirect ? '200px' : '168px';
 }, function (props) {
   return props.color;
 }, function (props) {
   return props.uppercase && 'uppercase';
 });
-var ChannelNameWrapper = styled__default.div(_templateObject11$a || (_templateObject11$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
-var EditButton = styled__default.span(_templateObject12$7 || (_templateObject12$7 = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
+var ChannelNameWrapper = styled__default.div(_templateObject1$a || (_templateObject1$a = _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$U;
 var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {