sceyt-chat-react-uikit 1.6.9-beta.9 → 1.7.0

package/index.modern.js

@@ -2,7 +2,6 @@ import React__default, { createElement as createElement$1, useRef, useEffect, us
 import { useSelector, useDispatch, shallowEqual, Provider } from 'react-redux';
 import log from 'loglevel';
 import createSagaMiddleware, { eventChannel } from 'redux-saga';
-import { createStore, isPlainObject as isPlainObject$1, combineReducers, applyMiddleware, compose, isAction } from 'redux';
 import FileSaver from 'file-saver';
 import { select, put, call, take, takeLatest, takeEvery, all } from 'redux-saga/effects';
 import { v4 } from 'uuid';
@@ -23,6 +22,367 @@ import { useBasicTypeaheadTriggerMatch, LexicalTypeaheadMenuPlugin, MenuOption }
 import { $createOffsetView } from '@lexical/offset';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 
+// src/utils/formatProdErrorMessage.ts
+function formatProdErrorMessage(code) {
+  return `Minified Redux error #${code}; visit https://redux.js.org/Errors?code=${code} for the full message or use the non-minified dev environment for full errors. `;
+}
+
+// src/utils/symbol-observable.ts
+var $$observable = /* @__PURE__ */ (() => typeof Symbol === "function" && Symbol.observable || "@@observable")();
+var symbol_observable_default = $$observable;
+
+// src/utils/actionTypes.ts
+var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
+var ActionTypes = {
+  INIT: `@@redux/INIT${/* @__PURE__ */ randomString()}`,
+  REPLACE: `@@redux/REPLACE${/* @__PURE__ */ randomString()}`,
+  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
+};
+var actionTypes_default = ActionTypes;
+
+// src/utils/isPlainObject.ts
+function isPlainObject(obj) {
+  if (typeof obj !== "object" || obj === null)
+    return false;
+  let proto = obj;
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
+  return Object.getPrototypeOf(obj) === proto || Object.getPrototypeOf(obj) === null;
+}
+
+// src/utils/kindOf.ts
+function miniKindOf(val) {
+  if (val === void 0)
+    return "undefined";
+  if (val === null)
+    return "null";
+  const type = typeof val;
+  switch (type) {
+    case "boolean":
+    case "string":
+    case "number":
+    case "symbol":
+    case "function": {
+      return type;
+    }
+  }
+  if (Array.isArray(val))
+    return "array";
+  if (isDate(val))
+    return "date";
+  if (isError(val))
+    return "error";
+  const constructorName = ctorName(val);
+  switch (constructorName) {
+    case "Symbol":
+    case "Promise":
+    case "WeakMap":
+    case "WeakSet":
+    case "Map":
+    case "Set":
+      return constructorName;
+  }
+  return Object.prototype.toString.call(val).slice(8, -1).toLowerCase().replace(/\s/g, "");
+}
+function ctorName(val) {
+  return typeof val.constructor === "function" ? val.constructor.name : null;
+}
+function isError(val) {
+  return val instanceof Error || typeof val.message === "string" && val.constructor && typeof val.constructor.stackTraceLimit === "number";
+}
+function isDate(val) {
+  if (val instanceof Date)
+    return true;
+  return typeof val.toDateString === "function" && typeof val.getDate === "function" && typeof val.setDate === "function";
+}
+function kindOf(val) {
+  let typeOfVal = typeof val;
+  if (process.env.NODE_ENV !== "production") {
+    typeOfVal = miniKindOf(val);
+  }
+  return typeOfVal;
+}
+
+// src/createStore.ts
+function createStore(reducer, preloadedState, enhancer) {
+  if (typeof reducer !== "function") {
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(2) : `Expected the root reducer to be a function. Instead, received: '${kindOf(reducer)}'`);
+  }
+  if (typeof preloadedState === "function" && typeof enhancer === "function" || typeof enhancer === "function" && typeof arguments[3] === "function") {
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(0) : "It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function. See https://redux.js.org/tutorials/fundamentals/part-4-store#creating-a-store-with-enhancers for an example.");
+  }
+  if (typeof preloadedState === "function" && typeof enhancer === "undefined") {
+    enhancer = preloadedState;
+    preloadedState = void 0;
+  }
+  if (typeof enhancer !== "undefined") {
+    if (typeof enhancer !== "function") {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(1) : `Expected the enhancer to be a function. Instead, received: '${kindOf(enhancer)}'`);
+    }
+    return enhancer(createStore)(reducer, preloadedState);
+  }
+  let currentReducer = reducer;
+  let currentState = preloadedState;
+  let currentListeners = /* @__PURE__ */ new Map();
+  let nextListeners = currentListeners;
+  let listenerIdCounter = 0;
+  let isDispatching = false;
+  function ensureCanMutateNextListeners() {
+    if (nextListeners === currentListeners) {
+      nextListeners = /* @__PURE__ */ new Map();
+      currentListeners.forEach((listener, key) => {
+        nextListeners.set(key, listener);
+      });
+    }
+  }
+  function getState() {
+    if (isDispatching) {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(3) : "You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.");
+    }
+    return currentState;
+  }
+  function subscribe(listener) {
+    if (typeof listener !== "function") {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(4) : `Expected the listener to be a function. Instead, received: '${kindOf(listener)}'`);
+    }
+    if (isDispatching) {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(5) : "You may not call store.subscribe() while the reducer is executing. If you would like to be notified after the store has been updated, subscribe from a component and invoke store.getState() in the callback to access the latest state. See https://redux.js.org/api/store#subscribelistener for more details.");
+    }
+    let isSubscribed = true;
+    ensureCanMutateNextListeners();
+    const listenerId = listenerIdCounter++;
+    nextListeners.set(listenerId, listener);
+    return function unsubscribe() {
+      if (!isSubscribed) {
+        return;
+      }
+      if (isDispatching) {
+        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(6) : "You may not unsubscribe from a store listener while the reducer is executing. See https://redux.js.org/api/store#subscribelistener for more details.");
+      }
+      isSubscribed = false;
+      ensureCanMutateNextListeners();
+      nextListeners.delete(listenerId);
+      currentListeners = null;
+    };
+  }
+  function dispatch(action) {
+    if (!isPlainObject(action)) {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(7) : `Actions must be plain objects. Instead, the actual type was: '${kindOf(action)}'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.`);
+    }
+    if (typeof action.type === "undefined") {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(8) : 'Actions may not have an undefined "type" property. You may have misspelled an action type string constant.');
+    }
+    if (typeof action.type !== "string") {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(17) : `Action "type" property must be a string. Instead, the actual type was: '${kindOf(action.type)}'. Value was: '${action.type}' (stringified)`);
+    }
+    if (isDispatching) {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(9) : "Reducers may not dispatch actions.");
+    }
+    try {
+      isDispatching = true;
+      currentState = currentReducer(currentState, action);
+    } finally {
+      isDispatching = false;
+    }
+    const listeners = currentListeners = nextListeners;
+    listeners.forEach((listener) => {
+      listener();
+    });
+    return action;
+  }
+  function replaceReducer(nextReducer) {
+    if (typeof nextReducer !== "function") {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(10) : `Expected the nextReducer to be a function. Instead, received: '${kindOf(nextReducer)}`);
+    }
+    currentReducer = nextReducer;
+    dispatch({
+      type: actionTypes_default.REPLACE
+    });
+  }
+  function observable() {
+    const outerSubscribe = subscribe;
+    return {
+      /**
+       * The minimal observable subscription method.
+       * @param observer Any object that can be used as an observer.
+       * The observer object should have a `next` method.
+       * @returns An object with an `unsubscribe` method that can
+       * be used to unsubscribe the observable from the store, and prevent further
+       * emission of values from the observable.
+       */
+      subscribe(observer) {
+        if (typeof observer !== "object" || observer === null) {
+          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(11) : `Expected the observer to be an object. Instead, received: '${kindOf(observer)}'`);
+        }
+        function observeState() {
+          const observerAsObserver = observer;
+          if (observerAsObserver.next) {
+            observerAsObserver.next(getState());
+          }
+        }
+        observeState();
+        const unsubscribe = outerSubscribe(observeState);
+        return {
+          unsubscribe
+        };
+      },
+      [symbol_observable_default]() {
+        return this;
+      }
+    };
+  }
+  dispatch({
+    type: actionTypes_default.INIT
+  });
+  const store = {
+    dispatch,
+    subscribe,
+    getState,
+    replaceReducer,
+    [symbol_observable_default]: observable
+  };
+  return store;
+}
+
+// src/utils/warning.ts
+function warning(message) {
+  if (typeof console !== "undefined" && typeof console.error === "function") {
+    console.error(message);
+  }
+  try {
+    throw new Error(message);
+  } catch (e) {
+  }
+}
+
+// src/combineReducers.ts
+function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
+  const reducerKeys = Object.keys(reducers);
+  const argumentName = action && action.type === actionTypes_default.INIT ? "preloadedState argument passed to createStore" : "previous state received by the reducer";
+  if (reducerKeys.length === 0) {
+    return "Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.";
+  }
+  if (!isPlainObject(inputState)) {
+    return `The ${argumentName} has unexpected type of "${kindOf(inputState)}". Expected argument to be an object with the following keys: "${reducerKeys.join('", "')}"`;
+  }
+  const unexpectedKeys = Object.keys(inputState).filter((key) => !reducers.hasOwnProperty(key) && !unexpectedKeyCache[key]);
+  unexpectedKeys.forEach((key) => {
+    unexpectedKeyCache[key] = true;
+  });
+  if (action && action.type === actionTypes_default.REPLACE)
+    return;
+  if (unexpectedKeys.length > 0) {
+    return `Unexpected ${unexpectedKeys.length > 1 ? "keys" : "key"} "${unexpectedKeys.join('", "')}" found in ${argumentName}. Expected to find one of the known reducer keys instead: "${reducerKeys.join('", "')}". Unexpected keys will be ignored.`;
+  }
+}
+function assertReducerShape(reducers) {
+  Object.keys(reducers).forEach((key) => {
+    const reducer = reducers[key];
+    const initialState = reducer(void 0, {
+      type: actionTypes_default.INIT
+    });
+    if (typeof initialState === "undefined") {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(12) : `The slice reducer for key "${key}" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.`);
+    }
+    if (typeof reducer(void 0, {
+      type: actionTypes_default.PROBE_UNKNOWN_ACTION()
+    }) === "undefined") {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(13) : `The slice reducer for key "${key}" returned undefined when probed with a random type. Don't try to handle '${actionTypes_default.INIT}' or other actions in "redux/*" namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined, but can be null.`);
+    }
+  });
+}
+function combineReducers(reducers) {
+  const reducerKeys = Object.keys(reducers);
+  const finalReducers = {};
+  for (let i = 0; i < reducerKeys.length; i++) {
+    const key = reducerKeys[i];
+    if (process.env.NODE_ENV !== "production") {
+      if (typeof reducers[key] === "undefined") {
+        warning(`No reducer provided for key "${key}"`);
+      }
+    }
+    if (typeof reducers[key] === "function") {
+      finalReducers[key] = reducers[key];
+    }
+  }
+  const finalReducerKeys = Object.keys(finalReducers);
+  let unexpectedKeyCache;
+  if (process.env.NODE_ENV !== "production") {
+    unexpectedKeyCache = {};
+  }
+  let shapeAssertionError;
+  try {
+    assertReducerShape(finalReducers);
+  } catch (e) {
+    shapeAssertionError = e;
+  }
+  return function combination(state = {}, action) {
+    if (shapeAssertionError) {
+      throw shapeAssertionError;
+    }
+    if (process.env.NODE_ENV !== "production") {
+      const warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);
+      if (warningMessage) {
+        warning(warningMessage);
+      }
+    }
+    let hasChanged = false;
+    const nextState = {};
+    for (let i = 0; i < finalReducerKeys.length; i++) {
+      const key = finalReducerKeys[i];
+      const reducer = finalReducers[key];
+      const previousStateForKey = state[key];
+      const nextStateForKey = reducer(previousStateForKey, action);
+      if (typeof nextStateForKey === "undefined") {
+        const actionType = action && action.type;
+        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(14) : `When called with an action of type ${actionType ? `"${String(actionType)}"` : "(unknown type)"}, the slice reducer for key "${key}" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.`);
+      }
+      nextState[key] = nextStateForKey;
+      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
+    }
+    hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length;
+    return hasChanged ? nextState : state;
+  };
+}
+
+// src/compose.ts
+function compose(...funcs) {
+  if (funcs.length === 0) {
+    return (arg) => arg;
+  }
+  if (funcs.length === 1) {
+    return funcs[0];
+  }
+  return funcs.reduce((a, b) => (...args) => a(b(...args)));
+}
+
+// src/applyMiddleware.ts
+function applyMiddleware(...middlewares) {
+  return (createStore2) => (reducer, preloadedState) => {
+    const store = createStore2(reducer, preloadedState);
+    let dispatch = () => {
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(15) : "Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch.");
+    };
+    const middlewareAPI = {
+      getState: store.getState,
+      dispatch: (action, ...args) => dispatch(action, ...args)
+    };
+    const chain = middlewares.map((middleware) => middleware(middlewareAPI));
+    dispatch = compose(...chain)(store.dispatch);
+    return {
+      ...store,
+      dispatch
+    };
+  };
+}
+
+// src/utils/isAction.ts
+function isAction(action) {
+  return isPlainObject(action) && "type" in action && typeof action.type === "string";
+}
+//# sourceMappingURL=redux.mjs.map
+
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -97,10 +457,10 @@ function isDraftable(value) {
   var _a;
   if (!value)
     return false;
-  return isPlainObject(value) || Array.isArray(value) || !!value[DRAFTABLE] || !!((_a = value.constructor) == null ? void 0 : _a[DRAFTABLE]) || isMap(value) || isSet(value);
+  return isPlainObject$1(value) || Array.isArray(value) || !!value[DRAFTABLE] || !!((_a = value.constructor) == null ? void 0 : _a[DRAFTABLE]) || isMap(value) || isSet(value);
 }
 var objectCtorString = Object.prototype.constructor.toString();
-function isPlainObject(value) {
+function isPlainObject$1(value) {
   if (!value || typeof value !== "object")
     return false;
   const proto = getPrototypeOf(value);
@@ -162,7 +522,7 @@ function shallowCopy(base, strict) {
   }
   if (Array.isArray(base))
     return Array.prototype.slice.call(base);
-  const isPlain = isPlainObject(base);
+  const isPlain = isPlainObject$1(base);
   if (strict === true || strict === "class_only" && !isPlain) {
     const descriptors = Object.getOwnPropertyDescriptors(base);
     delete descriptors[DRAFT_STATE];
@@ -220,6 +580,10 @@ function getPlugin(pluginKey) {
   }
   return plugin;
 }
+function loadPlugin(pluginKey, implementation) {
+  if (!plugins[pluginKey])
+    plugins[pluginKey] = implementation;
+}
 
 // src/core/scope.ts
 var currentScope;
@@ -736,6 +1100,256 @@ function currentImpl(value) {
   return copy;
 }
 
+// src/plugins/mapset.ts
+function enableMapSet() {
+  class DraftMap extends Map {
+    constructor(target, parent) {
+      super();
+      this[DRAFT_STATE] = {
+        type_: 2 /* Map */,
+        parent_: parent,
+        scope_: parent ? parent.scope_ : getCurrentScope(),
+        modified_: false,
+        finalized_: false,
+        copy_: void 0,
+        assigned_: void 0,
+        base_: target,
+        draft_: this,
+        isManual_: false,
+        revoked_: false
+      };
+    }
+    get size() {
+      return latest(this[DRAFT_STATE]).size;
+    }
+    has(key) {
+      return latest(this[DRAFT_STATE]).has(key);
+    }
+    set(key, value) {
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      if (!latest(state).has(key) || latest(state).get(key) !== value) {
+        prepareMapCopy(state);
+        markChanged(state);
+        state.assigned_.set(key, true);
+        state.copy_.set(key, value);
+        state.assigned_.set(key, true);
+      }
+      return this;
+    }
+    delete(key) {
+      if (!this.has(key)) {
+        return false;
+      }
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      prepareMapCopy(state);
+      markChanged(state);
+      if (state.base_.has(key)) {
+        state.assigned_.set(key, false);
+      } else {
+        state.assigned_.delete(key);
+      }
+      state.copy_.delete(key);
+      return true;
+    }
+    clear() {
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      if (latest(state).size) {
+        prepareMapCopy(state);
+        markChanged(state);
+        state.assigned_ = /* @__PURE__ */ new Map();
+        each(state.base_, (key) => {
+          state.assigned_.set(key, false);
+        });
+        state.copy_.clear();
+      }
+    }
+    forEach(cb, thisArg) {
+      const state = this[DRAFT_STATE];
+      latest(state).forEach((_value, key, _map) => {
+        cb.call(thisArg, this.get(key), key, this);
+      });
+    }
+    get(key) {
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      const value = latest(state).get(key);
+      if (state.finalized_ || !isDraftable(value)) {
+        return value;
+      }
+      if (value !== state.base_.get(key)) {
+        return value;
+      }
+      const draft = createProxy(value, state);
+      prepareMapCopy(state);
+      state.copy_.set(key, draft);
+      return draft;
+    }
+    keys() {
+      return latest(this[DRAFT_STATE]).keys();
+    }
+    values() {
+      const iterator = this.keys();
+      return {
+        [Symbol.iterator]: () => this.values(),
+        next: () => {
+          const r = iterator.next();
+          if (r.done)
+            return r;
+          const value = this.get(r.value);
+          return {
+            done: false,
+            value
+          };
+        }
+      };
+    }
+    entries() {
+      const iterator = this.keys();
+      return {
+        [Symbol.iterator]: () => this.entries(),
+        next: () => {
+          const r = iterator.next();
+          if (r.done)
+            return r;
+          const value = this.get(r.value);
+          return {
+            done: false,
+            value: [r.value, value]
+          };
+        }
+      };
+    }
+    [(Symbol.iterator)]() {
+      return this.entries();
+    }
+  }
+  function proxyMap_(target, parent) {
+    return new DraftMap(target, parent);
+  }
+  function prepareMapCopy(state) {
+    if (!state.copy_) {
+      state.assigned_ = /* @__PURE__ */ new Map();
+      state.copy_ = new Map(state.base_);
+    }
+  }
+  class DraftSet extends Set {
+    constructor(target, parent) {
+      super();
+      this[DRAFT_STATE] = {
+        type_: 3 /* Set */,
+        parent_: parent,
+        scope_: parent ? parent.scope_ : getCurrentScope(),
+        modified_: false,
+        finalized_: false,
+        copy_: void 0,
+        base_: target,
+        draft_: this,
+        drafts_: /* @__PURE__ */ new Map(),
+        revoked_: false,
+        isManual_: false
+      };
+    }
+    get size() {
+      return latest(this[DRAFT_STATE]).size;
+    }
+    has(value) {
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      if (!state.copy_) {
+        return state.base_.has(value);
+      }
+      if (state.copy_.has(value))
+        return true;
+      if (state.drafts_.has(value) && state.copy_.has(state.drafts_.get(value)))
+        return true;
+      return false;
+    }
+    add(value) {
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      if (!this.has(value)) {
+        prepareSetCopy(state);
+        markChanged(state);
+        state.copy_.add(value);
+      }
+      return this;
+    }
+    delete(value) {
+      if (!this.has(value)) {
+        return false;
+      }
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      prepareSetCopy(state);
+      markChanged(state);
+      return state.copy_.delete(value) || (state.drafts_.has(value) ? state.copy_.delete(state.drafts_.get(value)) : (
+        /* istanbul ignore next */
+        false
+      ));
+    }
+    clear() {
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      if (latest(state).size) {
+        prepareSetCopy(state);
+        markChanged(state);
+        state.copy_.clear();
+      }
+    }
+    values() {
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      prepareSetCopy(state);
+      return state.copy_.values();
+    }
+    entries() {
+      const state = this[DRAFT_STATE];
+      assertUnrevoked(state);
+      prepareSetCopy(state);
+      return state.copy_.entries();
+    }
+    keys() {
+      return this.values();
+    }
+    [(Symbol.iterator)]() {
+      return this.values();
+    }
+    forEach(cb, thisArg) {
+      const iterator = this.values();
+      let result = iterator.next();
+      while (!result.done) {
+        cb.call(thisArg, result.value, result.value, this);
+        result = iterator.next();
+      }
+    }
+  }
+  function proxySet_(target, parent) {
+    return new DraftSet(target, parent);
+  }
+  function prepareSetCopy(state) {
+    if (!state.copy_) {
+      state.copy_ = /* @__PURE__ */ new Set();
+      state.base_.forEach((value) => {
+        if (isDraftable(value)) {
+          const draft = createProxy(value, state);
+          state.drafts_.set(value, draft);
+          state.copy_.add(draft);
+        } else {
+          state.copy_.add(value);
+        }
+      });
+    }
+  }
+  function assertUnrevoked(state) {
+    if (state.revoked_)
+      die(3, JSON.stringify(latest(state)));
+  }
+  loadPlugin("MapSet", { proxyMap_, proxySet_ });
+}
+
 // src/immer.ts
 var immer = new Immer2();
 var produce = immer.produce;
@@ -810,7 +1424,7 @@ function createAction(type, prepareAction) {
     if (prepareAction) {
       let prepared = prepareAction(...args);
       if (!prepared) {
-        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(0) : "prepareAction did not return an object");
+        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(0) : "prepareAction did not return an object");
       }
       return __spreadValues$1(__spreadValues$1({
         type,
@@ -1019,7 +1633,7 @@ function createImmutableStateInvariantMiddleware(options = {}) {
           result = tracker.detectMutations();
           tracker = track(state);
           if (result.wasMutated) {
-            throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(19) : `A state mutation was detected between dispatches, in the path '${result.path || ""}'.  This may cause incorrect behavior. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)`);
+            throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(19) : `A state mutation was detected between dispatches, in the path '${result.path || ""}'.  This may cause incorrect behavior. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)`);
           }
         });
         const dispatchedAction = next(action);
@@ -1028,7 +1642,7 @@ function createImmutableStateInvariantMiddleware(options = {}) {
           result = tracker.detectMutations();
           tracker = track(state);
           if (result.wasMutated) {
-            throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(20) : `A state mutation was detected inside a dispatch, in the path: ${result.path || ""}. Take a look at the reducer(s) handling the action ${stringify2(action)}. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)`);
+            throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(20) : `A state mutation was detected inside a dispatch, in the path: ${result.path || ""}. Take a look at the reducer(s) handling the action ${stringify2(action)}. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)`);
           }
         });
         measureUtils.warnIfExceeded();
@@ -1039,7 +1653,7 @@ function createImmutableStateInvariantMiddleware(options = {}) {
 }
 function isPlain(val) {
   const type = typeof val;
-  return val == null || type === "string" || type === "boolean" || type === "number" || Array.isArray(val) || isPlainObject$1(val);
+  return val == null || type === "string" || type === "boolean" || type === "number" || Array.isArray(val) || isPlainObject(val);
 }
 function findNonSerializableValue(value, path = "", isSerializable = isPlain, getEntries, ignoredPaths = [], cache) {
   let foundNestedSerializable;
@@ -1277,31 +1891,31 @@ function configureStore(options) {
   let rootReducer;
   if (typeof reducer === "function") {
     rootReducer = reducer;
-  } else if (isPlainObject$1(reducer)) {
+  } else if (isPlainObject(reducer)) {
     rootReducer = combineReducers(reducer);
   } else {
-    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(1) : "`reducer` is a required argument, and must be a function or an object of functions that can be passed to combineReducers");
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(1) : "`reducer` is a required argument, and must be a function or an object of functions that can be passed to combineReducers");
   }
   if (process.env.NODE_ENV !== "production" && middleware && typeof middleware !== "function") {
-    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(2) : "`middleware` field must be a callback");
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(2) : "`middleware` field must be a callback");
   }
   let finalMiddleware;
   if (typeof middleware === "function") {
     finalMiddleware = middleware(getDefaultMiddleware);
     if (process.env.NODE_ENV !== "production" && !Array.isArray(finalMiddleware)) {
-      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(3) : "when using a middleware builder function, an array of middleware must be returned");
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(3) : "when using a middleware builder function, an array of middleware must be returned");
     }
   } else {
     finalMiddleware = getDefaultMiddleware();
   }
   if (process.env.NODE_ENV !== "production" && finalMiddleware.some((item) => typeof item !== "function")) {
-    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(4) : "each middleware provided to configureStore must be a function");
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(4) : "each middleware provided to configureStore must be a function");
   }
   if (process.env.NODE_ENV !== "production" && duplicateMiddlewareCheck) {
     let middlewareReferences = /* @__PURE__ */ new Set();
     finalMiddleware.forEach((middleware2) => {
       if (middlewareReferences.has(middleware2)) {
-        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(42) : "Duplicate middleware references found when creating the store. Ensure that each middleware is only included once.");
+        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(42) : "Duplicate middleware references found when creating the store. Ensure that each middleware is only included once.");
       }
       middlewareReferences.add(middleware2);
     });
@@ -1316,14 +1930,14 @@ function configureStore(options) {
   const middlewareEnhancer = applyMiddleware(...finalMiddleware);
   const getDefaultEnhancers = buildGetDefaultEnhancers(middlewareEnhancer);
   if (process.env.NODE_ENV !== "production" && enhancers && typeof enhancers !== "function") {
-    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(5) : "`enhancers` field must be a callback");
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(5) : "`enhancers` field must be a callback");
   }
   let storeEnhancers = typeof enhancers === "function" ? enhancers(getDefaultEnhancers) : getDefaultEnhancers();
   if (process.env.NODE_ENV !== "production" && !Array.isArray(storeEnhancers)) {
-    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(6) : "`enhancers` callback must return an array");
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(6) : "`enhancers` callback must return an array");
   }
   if (process.env.NODE_ENV !== "production" && storeEnhancers.some((item) => typeof item !== "function")) {
-    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(7) : "each enhancer provided to configureStore must be a function");
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(7) : "each enhancer provided to configureStore must be a function");
   }
   if (process.env.NODE_ENV !== "production" && finalMiddleware.length && !storeEnhancers.includes(middlewareEnhancer)) {
     console.error("middlewares were provided, but middleware enhancer was not included in final enhancers - make sure to call `getDefaultEnhancers`");
@@ -1341,18 +1955,18 @@ function executeReducerBuilderCallback(builderCallback) {
     addCase(typeOrActionCreator, reducer) {
       if (process.env.NODE_ENV !== "production") {
         if (actionMatchers.length > 0) {
-          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(26) : "`builder.addCase` should only be called before calling `builder.addMatcher`");
+          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(26) : "`builder.addCase` should only be called before calling `builder.addMatcher`");
         }
         if (defaultCaseReducer) {
-          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(27) : "`builder.addCase` should only be called before calling `builder.addDefaultCase`");
+          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(27) : "`builder.addCase` should only be called before calling `builder.addDefaultCase`");
         }
       }
       const type = typeof typeOrActionCreator === "string" ? typeOrActionCreator : typeOrActionCreator.type;
       if (!type) {
-        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(28) : "`builder.addCase` cannot be called with an empty action type");
+        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(28) : "`builder.addCase` cannot be called with an empty action type");
       }
       if (type in actionsMap) {
-        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(29) : `\`builder.addCase\` cannot be called with two reducers for the same action type '${type}'`);
+        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(29) : `\`builder.addCase\` cannot be called with two reducers for the same action type '${type}'`);
       }
       actionsMap[type] = reducer;
       return builder;
@@ -1360,7 +1974,7 @@ function executeReducerBuilderCallback(builderCallback) {
     addMatcher(matcher, reducer) {
       if (process.env.NODE_ENV !== "production") {
         if (defaultCaseReducer) {
-          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(30) : "`builder.addMatcher` should only be called before calling `builder.addDefaultCase`");
+          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(30) : "`builder.addMatcher` should only be called before calling `builder.addDefaultCase`");
         }
       }
       actionMatchers.push({
@@ -1372,7 +1986,7 @@ function executeReducerBuilderCallback(builderCallback) {
     addDefaultCase(reducer) {
       if (process.env.NODE_ENV !== "production") {
         if (defaultCaseReducer) {
-          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(31) : "`builder.addDefaultCase` can only be called once");
+          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(31) : "`builder.addDefaultCase` can only be called once");
         }
       }
       defaultCaseReducer = reducer;
@@ -1390,7 +2004,7 @@ function isStateFunction(x) {
 function createReducer(initialState, mapOrBuilderCallback) {
   if (process.env.NODE_ENV !== "production") {
     if (typeof mapOrBuilderCallback === "object") {
-      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(8) : "The object notation for `createReducer` has been removed. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createReducer");
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(8) : "The object notation for `createReducer` has been removed. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createReducer");
     }
   }
   let [actionsMap, finalActionMatchers, finalDefaultCaseReducer] = executeReducerBuilderCallback(mapOrBuilderCallback);
@@ -1457,7 +2071,7 @@ function buildCreateSlice({
       reducerPath = name
     } = options;
     if (!name) {
-      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(11) : "`name` is a required option for createSlice");
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(11) : "`name` is a required option for createSlice");
     }
     if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
       if (options.initialState === void 0) {
@@ -1476,10 +2090,10 @@ function buildCreateSlice({
       addCase(typeOrActionCreator, reducer2) {
         const type = typeof typeOrActionCreator === "string" ? typeOrActionCreator : typeOrActionCreator.type;
         if (!type) {
-          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(12) : "`context.addCase` cannot be called with an empty action type");
+          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(12) : "`context.addCase` cannot be called with an empty action type");
         }
         if (type in context.sliceCaseReducersByType) {
-          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(13) : "`context.addCase` cannot be called with two reducers for the same action type: " + type);
+          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(13) : "`context.addCase` cannot be called with two reducers for the same action type: " + type);
         }
         context.sliceCaseReducersByType[type] = reducer2;
         return contextMethods;
@@ -1516,7 +2130,7 @@ function buildCreateSlice({
     function buildReducer() {
       if (process.env.NODE_ENV !== "production") {
         if (typeof options.extraReducers === "object") {
-          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(14) : "The object notation for `createSlice.extraReducers` has been removed. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createSlice");
+          throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(14) : "The object notation for `createSlice.extraReducers` has been removed. Please use the 'builder callback' notation instead: https://redux-toolkit.js.org/api/createSlice");
         }
       }
       const [extraReducers = {}, actionMatchers = [], defaultCaseReducer = void 0] = typeof options.extraReducers === "function" ? executeReducerBuilderCallback(options.extraReducers) : [options.extraReducers];
@@ -1555,7 +2169,7 @@ function buildCreateSlice({
           if (injected) {
             sliceState = getOrInsertComputed(injectedStateCache, selectSlice, getInitialState);
           } else if (process.env.NODE_ENV !== "production") {
-            throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(15) : "selectSlice returned undefined for an uninjected slice reducer");
+            throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(15) : "selectSlice returned undefined for an uninjected slice reducer");
           }
         }
         return sliceState;
@@ -1611,7 +2225,7 @@ function wrapSelector(selector, selectState, getInitialState, injected) {
       if (injected) {
         sliceState = getInitialState();
       } else if (process.env.NODE_ENV !== "production") {
-        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(16) : "selectState returned undefined for an uninjected slice reducer");
+        throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(16) : "selectState returned undefined for an uninjected slice reducer");
       }
     }
     return selector(sliceState, ...args);
@@ -1659,7 +2273,7 @@ function handleNormalReducerDefinition({
   let prepareCallback;
   if ("reducer" in maybeReducerWithPrepare) {
     if (createNotation && !isCaseReducerWithPrepareDefinition(maybeReducerWithPrepare)) {
-      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(17) : "Please use the `create.preparedReducer` notation for prepared action creators with the `create` notation.");
+      throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(17) : "Please use the `create.preparedReducer` notation for prepared action creators with the `create` notation.");
     }
     caseReducer = maybeReducerWithPrepare.reducer;
     prepareCallback = maybeReducerWithPrepare.prepare;
@@ -1679,7 +2293,7 @@ function handleThunkCaseReducerDefinition({
   reducerName
 }, reducerDefinition, context, cAT) {
   if (!cAT) {
-    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage(18) : "Cannot use `create.asyncThunk` in the built-in `createSlice`. Use `buildCreateSlice({ creators: { asyncThunk: asyncThunkCreator } })` to create a customised version of `createSlice`.");
+    throw new Error(process.env.NODE_ENV === "production" ? formatProdErrorMessage$1(18) : "Cannot use `create.asyncThunk` in the built-in `createSlice`. Use `buildCreateSlice({ creators: { asyncThunk: asyncThunkCreator } })` to create a customised version of `createSlice`.");
   }
   const {
     payloadCreator,
@@ -1714,7 +2328,7 @@ function noop() {
 }
 
 // src/formatProdErrorMessage.ts
-function formatProdErrorMessage(code) {
+function formatProdErrorMessage$1(code) {
   return `Minified Redux Toolkit error #${code}; visit https://redux-toolkit.js.org/Errors?code=${code} for the full message or use the non-minified dev environment for full errors. `;
 }
 //# sourceMappingURL=redux-toolkit.legacy-esm.js.map
@@ -2219,182 +2833,205 @@ function _catch(body, recover) {
 	return result;
 }
 
-var currentVersion = 1;
-var _setDataToDB = function setDataToDB(dbName, storeName, data, keyPath) {
-  if (!('indexedDB' in window)) {
-    log.info("This browser doesn't support IndexedDB");
-  } else {
-    var openRequest = indexedDB.open(dbName, currentVersion);
-    openRequest.onupgradeneeded = function (event) {
-      var db = openRequest.result;
-      var transaction = event.target.transaction;
-      addData(db, storeName, keyPath, data, transaction);
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer(true, e);
+	}
+	if (result && result.then) {
+		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+	}
+	return finalizer(false, result);
+}
+
+var openDatabase = function openDatabase(dbName) {
+  return new Promise(function (resolve, reject) {
+    var request = indexedDB.open(dbName);
+    request.onsuccess = function () {
+      return resolve(request.result);
     };
-    openRequest.onerror = function () {
-      log.error('Indexeddb Error ', openRequest.error);
+    request.onerror = function () {
+      return reject(request.error);
     };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
+  });
+};
+var runUpgrade = function runUpgrade(dbName, onUpgrade) {
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
+      var nextVersion = db.version + 1;
+      db.close();
+      return new Promise(function (resolve, reject) {
+        var request = indexedDB.open(dbName, nextVersion);
+        request.onupgradeneeded = function () {
+          var upgradeDb = request.result;
+          onUpgrade(upgradeDb);
+        };
+        request.onsuccess = function () {
+          return resolve(request.result);
+        };
+        request.onerror = function () {
+          return reject(request.error);
+        };
+        request.onblocked = function () {
+          log.warn('IndexedDB upgrade blocked; close other tabs to proceed');
+        };
+      });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var ensureStore = function ensureStore(dbName, storeName, keyPath) {
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
       if (db.objectStoreNames.contains(storeName)) {
-        addData(db, storeName, keyPath, data);
-      } else {
-        db.close();
-        currentVersion++;
-        _setDataToDB(dbName, storeName, data, keyPath);
+        return db;
       }
-      db.onversionchange = function () {
-        db.close();
-        alert('The database is out of date, please reload the page.');
-      };
-    };
-    openRequest.onblocked = function () {};
+      db.close();
+      return Promise.resolve(runUpgrade(dbName, function (upgradeDb) {
+        if (!upgradeDb.objectStoreNames.contains(storeName)) {
+          upgradeDb.createObjectStore(storeName, {
+            keyPath: keyPath
+          });
+        }
+      }));
+    });
+  } catch (e) {
+    return Promise.reject(e);
   }
 };
-var _getDataFromDB = function getDataFromDB(dbName, storeName, keyPath, keyPatName) {
+var awaitTransaction = function awaitTransaction(tx) {
   return new Promise(function (resolve, reject) {
-    var openRequest = indexedDB.open(dbName, currentVersion);
-    openRequest.onupgradeneeded = function (event) {
-      var db = event.target.result;
-      var transaction = event.target.transaction;
-      if (db.objectStoreNames.contains(storeName)) {
-        var objectStore = transaction.objectStore(storeName);
-        var request = objectStore.get(keyPath);
-        request.onsuccess = function (event) {
-          var result = event.target.result;
-          resolve(result || '');
-        };
-        request.onerror = function (event) {
-          log.error('Error retrieving data during upgrade: ', event.target.error);
-          resolve('');
-        };
-      } else {
-        db.createObjectStore(storeName, {
-          keyPath: keyPatName
-        });
-        resolve('');
-      }
+    tx.oncomplete = function () {
+      return resolve();
     };
-    openRequest.onerror = function (event) {
-      if (event.target.error.name === 'VersionError') {
-        currentVersion++;
-        resolve(_getDataFromDB(dbName, storeName, keyPath));
-      } else {
-        reject(event);
-      }
+    tx.onerror = function () {
+      return reject(tx.error);
     };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
-      if (db.objectStoreNames.contains(storeName)) {
-        var transaction = db.transaction(storeName, 'readonly');
-        var objectStore = transaction.objectStore(storeName);
-        var request = objectStore.get(keyPath);
-        request.onsuccess = function (event) {
-          var result = event.target.result;
-          if (result) {
-            db.close();
-            resolve(result);
-          } else {
-            log.info('No data found for the specified keyPathValue.');
-            db.close();
-            resolve('');
-          }
-        };
-        request.onerror = function (event) {
-          db.close();
-          log.error('Error retrieving data: ', event.target.error);
-        };
-      } else {
-        db.close();
-        resolve('');
-      }
+    tx.onabort = function () {
+      return reject(tx.error);
     };
   });
 };
-var addData = function addData(db, storeName, keyPath, data, transaction) {
-  if (!db.objectStoreNames.contains(storeName)) {
-    var objectStore = db.createObjectStore(storeName, {
-      keyPath: keyPath
-    });
-    data.forEach(function (value) {
-      var request = objectStore.put(value);
-      request.onsuccess = function () {
-        log.info('data added to db during upgrade.. ', request.result);
-      };
-      request.onerror = function () {
-        log.info('Error on put data to db during upgrade.. ', request.error);
-      };
-    });
-  } else {
-    if (transaction) {
-      var store = transaction.objectStore(storeName);
-      data.forEach(function (value) {
-        var request = store.put(value);
-        request.onsuccess = function () {
-          log.info('data added to db using existing transaction.. ', request.result);
-        };
-        request.onerror = function () {
-          log.info('Error on put data to db using existing transaction.. ', request.error);
-        };
+var putWithPossibleOutOfLineKey = function putWithPossibleOutOfLineKey(store, value, keyField) {
+  try {
+    if (store.keyPath !== null) {
+      store.put(value);
+      return;
+    }
+  } catch (e) {}
+  var explicitKey = value === null || value === void 0 ? void 0 : value[keyField];
+  if (explicitKey === undefined || explicitKey === null) {
+    throw new Error("IndexedDB put requires explicit key but value has no '" + keyField + "' field");
+  }
+  store.put(value, explicitKey);
+};
+var setDataToDB = function setDataToDB(dbName, storeName, data, keyPath) {
+  try {
+    if (!('indexedDB' in window)) {
+      log.info("This browser doesn't support IndexedDB");
+      return Promise.resolve();
+    }
+    return Promise.resolve(ensureStore(dbName, storeName, keyPath)).then(function (db) {
+      var _temp = _finallyRethrows(function () {
+        var tx = db.transaction(storeName, 'readwrite');
+        var store = tx.objectStore(storeName);
+        data.forEach(function (value) {
+          putWithPossibleOutOfLineKey(store, value, keyPath);
+        });
+        return Promise.resolve(awaitTransaction(tx)).then(function () {});
+      }, function (_wasThrown, _result) {
+        db.close();
+        if (_wasThrown) throw _result;
+        return _result;
       });
-    } else {
-      var newTransaction = db.transaction(storeName, 'readwrite');
-      var _store = newTransaction.objectStore(storeName);
-      data.forEach(function (value) {
-        var request = _store.put(value);
-        request.onsuccess = function () {
-          log.info('data added to db.. ', request.result);
-        };
-        request.onerror = function () {
-          log.info('Error on put channel to db .. ', request.error);
-        };
+      if (_temp && _temp.then) return _temp.then(function () {});
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var getDataFromDB = function getDataFromDB(dbName, storeName, keyPathValue, keyPathName) {
+  try {
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(openDatabase(dbName)).then(function (db) {
+        var _exit = false;
+        function _temp5(_result2) {
+          if (_exit) return _result2;
+          var tx = db.transaction(storeName, 'readonly');
+          var objectStore = tx.objectStore(storeName);
+          return Promise.resolve(new Promise(function (resolve, reject) {
+            var request = objectStore.get(keyPathValue);
+            request.onsuccess = function () {
+              return resolve(request.result);
+            };
+            request.onerror = function () {
+              return reject(request.error);
+            };
+          })).then(function (result) {
+            db.close();
+            return result || '';
+          });
+        }
+        var _temp4 = function () {
+          if (!db.objectStoreNames.contains(storeName)) {
+            var _temp3 = function _temp3() {
+              _exit = true;
+              return '';
+            };
+            db.close();
+            var _temp2 = function () {
+              if (keyPathName) {
+                return Promise.resolve(ensureStore(dbName, storeName, keyPathName)).then(function (upgraded) {
+                  upgraded.close();
+                });
+              }
+            }();
+            return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
+          }
+        }();
+        return _temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4);
       });
-    }
+    }, function (error) {
+      log.error('Error retrieving data: ', error);
+      return '';
+    }));
+  } catch (e) {
+    return Promise.reject(e);
   }
 };
 var getAllStoreNames = function getAllStoreNames(dbName) {
-  return new Promise(function (resolve, reject) {
-    var openRequest = indexedDB.open(dbName, currentVersion);
-    openRequest.onupgradeneeded = function (event) {
-      var db = event.target.result;
-      resolve(Array.from(db.objectStoreNames));
-    };
-    openRequest.onerror = function () {
-      log.error('Indexeddb Error ', openRequest.error);
-      reject(openRequest.error);
-    };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
       try {
-        var storeNames = Array.from(db.objectStoreNames);
-        db.close();
-        resolve(storeNames);
-      } catch (error) {
+        return Array.from(db.objectStoreNames);
+      } finally {
         db.close();
-        reject(error);
       }
-    };
-  });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
 var deleteStore = function deleteStore(dbName, storeName) {
-  return new Promise(function (resolve, reject) {
-    var openRequest = indexedDB.open(dbName, currentVersion + 1);
-    openRequest.onupgradeneeded = function (event) {
-      var db = event.target.result;
-      if (db.objectStoreNames.contains(storeName)) {
-        db.deleteObjectStore(storeName);
-        currentVersion++;
-      }
-    };
-    openRequest.onerror = function () {
-      log.error('Indexeddb Error ', openRequest.error);
-      reject(openRequest.error);
-    };
-    openRequest.onsuccess = function (event) {
-      var db = event.target.result;
+  try {
+    return Promise.resolve(openDatabase(dbName)).then(function (db) {
+      var shouldDelete = db.objectStoreNames.contains(storeName);
       db.close();
-      resolve();
-    };
-  });
+      if (!shouldDelete) return;
+      return Promise.resolve(runUpgrade(dbName, function (upgradeDb) {
+        if (upgradeDb.objectStoreNames.contains(storeName)) {
+          upgradeDb.deleteObjectStore(storeName);
+        }
+      })).then(function (upgraded) {
+        upgraded.close();
+      });
+    });
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
 
 var METADATA_DB_NAME = 'sceyt-metadata-db';
@@ -2417,7 +3054,7 @@ var storeMetadata = function storeMetadata(url, metadata) {
       expiresAt: Date.now() + CACHE_DURATION
     });
     var _temp = _catch(function () {
-      return Promise.resolve(_setDataToDB(METADATA_DB_NAME, currentMonth, [metadataRecord], 'url')).then(function () {});
+      return Promise.resolve(setDataToDB(METADATA_DB_NAME, currentMonth, [metadataRecord], 'url')).then(function () {});
     }, function (error) {
       console.error('Failed to store metadata in IndexedDB:', error);
     });
@@ -2465,7 +3102,7 @@ var cleanupOldMonthsMetadata = function cleanupOldMonthsMetadata() {
 var getMetadata = function getMetadata(url) {
   return Promise.resolve(_catch(function () {
     var currentMonth = getCurrentMonthKey();
-    return Promise.resolve(_getDataFromDB(METADATA_DB_NAME, currentMonth, url, 'url')).then(function (result) {
+    return Promise.resolve(getDataFromDB(METADATA_DB_NAME, currentMonth, url, 'url')).then(function (result) {
       if (!result || typeof result === 'string') {
         return null;
       }
@@ -9390,11 +10027,7 @@ function addMessageToMap(channelId, message) {
     messagesMap[channelId] = [message];
   }
   if (message.deliveryStatus === MESSAGE_DELIVERY_STATUS.PENDING) {
-    if (pendingMessagesMap[channelId]) {
-      pendingMessagesMap[channelId].push(message);
-    } else {
-      pendingMessagesMap[channelId] = [message];
-    }
+    setPendingMessage(channelId, message);
   }
 }
 function updateMessageOnMap(channelId, updatedMessage) {
@@ -9417,18 +10050,29 @@ function updateMessageOnMap(channelId, updatedMessage) {
       }
     }
   }
+  var updatedMessageData = null;
   if (messagesMap[channelId]) {
-    messagesMap[channelId] = messagesMap[channelId].map(function (mes) {
+    messagesMap[channelId].map(function (mes) {
       if (mes.tid === updatedMessage.messageId || mes.id === updatedMessage.messageId) {
         if (updatedMessage.params.state === MESSAGE_STATUS.DELETE) {
-          return _extends({}, updatedMessage.params);
+          updatedMessageData = _extends({}, updatedMessage.params);
+          return updatedMessageData;
         } else {
-          return _extends({}, mes, updatedMessage.params);
+          var _updatedMessage$param;
+          updatedMessageData = _extends({}, mes, updatedMessage.params, {
+            attachments: [].concat(mes.attachments, ((_updatedMessage$param = updatedMessage.params) === null || _updatedMessage$param === void 0 ? void 0 : _updatedMessage$param.attachments) || []).filter(function (att, index, self) {
+              return index === self.findIndex(function (t) {
+                return t.url === att.url && t.type === att.type && t.name === att.name;
+              });
+            })
+          });
+          return updatedMessage;
         }
       }
       return mes;
     });
   }
+  return updatedMessageData;
 }
 function addReactionToMessageOnMap(channelId, message, reaction, isSelf) {
   if (messagesMap[channelId]) {
@@ -9541,6 +10185,24 @@ function removePendingMessageFromMap(channelId, messageId) {
     });
   }
 }
+function updatePendingMessageOnMap(channelId, messageId, updatedMessage) {
+  if (pendingMessagesMap[channelId]) {
+    pendingMessagesMap[channelId] = pendingMessagesMap[channelId].map(function (msg) {
+      if (msg.id === messageId || msg.tid === messageId) {
+        return _extends({}, msg, updatedMessage);
+      }
+      return msg;
+    });
+  }
+}
+function getMessageFromPendingMessagesMap(channelId, messageId) {
+  if (pendingMessagesMap[channelId]) {
+    return pendingMessagesMap[channelId].find(function (msg) {
+      return msg.id === messageId || msg.tid === messageId;
+    });
+  }
+  return null;
+}
 function clearMessagesMap() {
   messagesMap = {};
 }
@@ -9579,16 +10241,18 @@ var deletePendingMessage = function deletePendingMessage(channelId, message) {
 var getPendingMessages = function getPendingMessages(channelId) {
   return pendingMessagesMap[channelId];
 };
-var addPendingMessageToMap = function addPendingMessageToMap(channelId, pendingMessage) {
-  if (pendingMessagesMap[channelId]) {
-    pendingMessagesMap[channelId].push(pendingMessage);
+var setPendingMessage = function setPendingMessage(channelId, pendingMessage) {
+  var pendingMessages = getPendingMessages(channelId);
+  if (pendingMessages && pendingMessages !== null && pendingMessages !== void 0 && pendingMessages.length) {
+    if (!(pendingMessages !== null && pendingMessages !== void 0 && pendingMessages.find(function (msg) {
+      return msg.tid === pendingMessage.tid;
+    }))) {
+      pendingMessages.push(pendingMessage);
+    }
   } else {
     pendingMessagesMap[channelId] = [pendingMessage];
   }
 };
-var setPendingMessages = function setPendingMessages(channelId, pendingMessages) {
-  pendingMessagesMap[channelId] = pendingMessages;
-};
 var getPendingMessagesMap = function getPendingMessagesMap() {
   return pendingMessagesMap;
 };
@@ -9672,7 +10336,6 @@ var messageSlice = createSlice({
   reducers: {
     addMessage: function addMessage(state, action) {
       var message = action.payload.message;
-      log.info('addMessage ... ', message);
       state.activeChannelMessages.push(message);
     },
     deleteMessageFromList: function deleteMessageFromList(state, action) {
@@ -9790,11 +10453,48 @@ var messageSlice = createSlice({
         state.activeChannelMessages.push(params);
       }
     },
-    addReactionToMessage: function addReactionToMessage(state, action) {
+    updateMessageAttachment: function updateMessageAttachment(state, action) {
       var _action$payload4 = action.payload,
-        message = _action$payload4.message,
-        reaction = _action$payload4.reaction,
-        isSelf = _action$payload4.isSelf;
+        url = _action$payload4.url,
+        messageId = _action$payload4.messageId,
+        params = _action$payload4.params;
+      state.activeChannelMessages = state.activeChannelMessages.map(function (message) {
+        if (message.id === messageId) {
+          for (var index = 0; index < message.attachments.length; index++) {
+            var attachment = message.attachments[index];
+            if (attachment.url === url) {
+              message.attachments[index] = _extends({}, attachment, params);
+            }
+          }
+        }
+        if (message.attachments.length) {
+          var detachedAttachments = message.attachments.map(function (att) {
+            var _att$user, _att$user2;
+            return _extends({}, att, {
+              user: _extends({}, att.user, {
+                metadata: _extends({}, ((_att$user = att.user) === null || _att$user === void 0 ? void 0 : _att$user.metadata) || {}),
+                presence: _extends({}, ((_att$user2 = att.user) === null || _att$user2 === void 0 ? void 0 : _att$user2.presence) || {})
+              })
+            });
+          });
+          updateMessageOnAllMessages(messageId, {
+            attachments: detachedAttachments
+          });
+          updateMessageOnMap(message.channelId, {
+            messageId: messageId,
+            params: {
+              attachments: detachedAttachments
+            }
+          });
+        }
+        return message;
+      });
+    },
+    addReactionToMessage: function addReactionToMessage(state, action) {
+      var _action$payload5 = action.payload,
+        message = _action$payload5.message,
+        reaction = _action$payload5.reaction,
+        isSelf = _action$payload5.isSelf;
       state.activeChannelMessages = state.activeChannelMessages.map(function (msg) {
         if (msg.id === message.id) {
           var slfReactions = [].concat(msg.userReactions);
@@ -9814,10 +10514,10 @@ var messageSlice = createSlice({
       });
     },
     deleteReactionFromMessage: function deleteReactionFromMessage(state, action) {
-      var _action$payload5 = action.payload,
-        reaction = _action$payload5.reaction,
-        message = _action$payload5.message,
-        isSelf = _action$payload5.isSelf;
+      var _action$payload6 = action.payload,
+        reaction = _action$payload6.reaction,
+        message = _action$payload6.message,
+        isSelf = _action$payload6.isSelf;
       state.activeChannelMessages = state.activeChannelMessages.map(function (msg) {
         if (msg.id === message.id) {
           var userReactions = msg.userReactions;
@@ -9866,9 +10566,9 @@ var messageSlice = createSlice({
       (_state$activeTabAttac = state.activeTabAttachments).push.apply(_state$activeTabAttac, action.payload.attachments);
     },
     addAttachmentsForPopup: function addAttachmentsForPopup(state, action) {
-      var _action$payload6 = action.payload,
-        attachments = _action$payload6.attachments,
-        direction = _action$payload6.direction;
+      var _action$payload7 = action.payload,
+        attachments = _action$payload7.attachments,
+        direction = _action$payload7.direction;
       if (direction === 'prev') {
         var _state$attachmentsFor;
         (_state$attachmentsFor = state.attachmentsForPopup).push.apply(_state$attachmentsFor, attachments);
@@ -9884,11 +10584,11 @@ var messageSlice = createSlice({
       state.attachmentForPopupHasNext = action.payload.hasPrev;
     },
     updateUploadProgress: function updateUploadProgress(state, action) {
-      var _action$payload7 = action.payload,
-        uploaded = _action$payload7.uploaded,
-        total = _action$payload7.total,
-        attachmentId = _action$payload7.attachmentId,
-        progress = _action$payload7.progress;
+      var _action$payload8 = action.payload,
+        uploaded = _action$payload8.uploaded,
+        total = _action$payload8.total,
+        attachmentId = _action$payload8.attachmentId,
+        progress = _action$payload8.progress;
       var updateData = {
         uploaded: uploaded,
         total: total,
@@ -9912,23 +10612,23 @@ var messageSlice = createSlice({
       state.messageForReply = action.payload.message;
     },
     uploadAttachmentCompilation: function uploadAttachmentCompilation(state, action) {
-      var _action$payload8 = action.payload,
-        attachmentUploadingState = _action$payload8.attachmentUploadingState,
-        attachmentId = _action$payload8.attachmentId;
+      var _action$payload9 = action.payload,
+        attachmentUploadingState = _action$payload9.attachmentUploadingState,
+        attachmentId = _action$payload9.attachmentId;
       state.attachmentsUploadingState[attachmentId] = attachmentUploadingState;
     },
     setReactionsList: function setReactionsList(state, action) {
-      var _action$payload9 = action.payload,
-        reactions = _action$payload9.reactions,
-        hasNext = _action$payload9.hasNext;
+      var _action$payload0 = action.payload,
+        reactions = _action$payload0.reactions,
+        hasNext = _action$payload0.hasNext;
       state.reactionsHasNext = hasNext;
       state.reactionsList = [].concat(reactions);
     },
     addReactionsToList: function addReactionsToList(state, action) {
       var _state$reactionsList;
-      var _action$payload0 = action.payload,
-        reactions = _action$payload0.reactions,
-        hasNext = _action$payload0.hasNext;
+      var _action$payload1 = action.payload,
+        reactions = _action$payload1.reactions,
+        hasNext = _action$payload1.hasNext;
       state.reactionsHasNext = hasNext;
       (_state$reactionsList = state.reactionsList).push.apply(_state$reactionsList, reactions);
     },
@@ -9989,6 +10689,7 @@ var _messageSlice$actions = messageSlice.actions,
   addMessages = _messageSlice$actions.addMessages,
   updateMessagesStatus = _messageSlice$actions.updateMessagesStatus,
   updateMessage = _messageSlice$actions.updateMessage,
+  updateMessageAttachment = _messageSlice$actions.updateMessageAttachment,
   addReactionToMessage = _messageSlice$actions.addReactionToMessage,
   deleteReactionFromMessage = _messageSlice$actions.deleteReactionFromMessage,
   setHasPrevMessages = _messageSlice$actions.setHasPrevMessages,
@@ -10303,11 +11004,11 @@ var defaultTheme = {
     light: '#D9D9DF',
     dark: '#303032'
   }, _colors[THEME_COLORS.OVERLAY_BACKGROUND] = {
-    light: 'rgba(0, 0, 0, 0.5)',
-    dark: 'rgba(0, 0, 0, 0.5)'
+    light: '#111539',
+    dark: '#111539'
   }, _colors[THEME_COLORS.OVERLAY_BACKGROUND_2] = {
-    light: 'rgba(17, 21, 57, 0.4)',
-    dark: 'rgba(17, 21, 57, 0.4)'
+    light: '#111539',
+    dark: '#111539'
   }, _colors[THEME_COLORS.WARNING] = {
     light: '#FA4C56',
     dark: '#FA4C56'
@@ -10392,14 +11093,6 @@ var ThemeReducer = (function (state, _ref) {
   }
 });
 
-var reducers = combineReducers({
-  ChannelReducer: ChannelReducer,
-  MessageReducer: MessageReducer,
-  MembersReducer: MembersReducer,
-  ThemeReducer: ThemeReducer,
-  UserReducer: UserReducer
-});
-
 var createChannelAC = function createChannelAC(channelData, dontCreateIfNotExists) {
   return {
     type: CREATE_CHANNEL,
@@ -10641,11 +11334,12 @@ var sendTypingAC = function sendTypingAC(state) {
     }
   };
 };
-var sendRecordingAC = function sendRecordingAC(state) {
+var sendRecordingAC = function sendRecordingAC(state, channelId) {
   return {
     type: SEND_RECORDING,
     payload: {
-      state: state
+      state: state,
+      channelId: channelId
     }
   };
 };
@@ -11087,6 +11781,13 @@ function setMessagesHasNextAC(hasNext) {
     hasNext: hasNext
   });
 }
+function setUpdateMessageAttachmentAC(url, messageId, params) {
+  return updateMessageAttachment({
+    url: url,
+    messageId: messageId,
+    params: params
+  });
+}
 function updateMessageAC(messageId, params, addIfNotExists) {
   return updateMessage({
     messageId: messageId,
@@ -12271,7 +12972,7 @@ var UploadPercent = styled.span(_templateObject38 || (_templateObject38 = _tagge
 }, function (props) {
   return props.fileAttachment || props.isRepliedMessage || props.isDetailsView ? '40px' : '56px';
 }, function (props) {
-  return props.backgroundColor + "40";
+  return props.backgroundColor + "66";
 }, function (props) {
   return props.borderRadius ? props.borderRadius : props.fileAttachment ? '8px' : props.isRepliedMessage ? '4px' : ' 50%';
 }, function (props) {
@@ -12948,7 +13649,7 @@ function watchForEvents() {
           };
         });
         _loop = /*#__PURE__*/_regenerator().m(function _callee() {
-          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _updateChannelData, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _updateChannelData2, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, lastMessage, _channelId, _channel7, _channel8, deletedMessage, _activeChannelId7, _channelExists7, _channel9, _message, _activeChannelId8, _channelExists8, _channel0, user, _message2, reaction, isSelf, _activeChannelId9, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _channel1, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId0, _channelUpdateParams, _channel10, _updatedChannel, _channel11, _activeChannelId1, channelExist, _channel12, _channel13, _channel14, _channel15, _channel16, _channel17, _channel18, _groupName5, _channel19, _groupName6, _channel20, members, _activeChannelId10, i, _channel21, _channel22, _channelId2, from, name, status, _t;
+          var _yield$take, type, args, createdChannel, channelFilterTypes, getFromContacts, channelExists, _chan, channel, _chan2, _channel, member, _channelExists, _activeChannelId, groupName, updateChannelData, _channel2, _channelExists2, _channel3, removedMembers, _activeChannelId2, _channelExists3, activeChannel, _updateChannelData, _groupName, _channel4, addedMembers, _activeChannelId3, _channelExists4, _updateChannelData2, _groupName2, updatedChannel, _channelExists5, subject, avatarUrl, muted, mutedTill, metadata, _activeChannelId4, _groupName3, _channel5, message, messageToHandle, _channelFilterTypes, _activeChannelId5, _channelExists6, channelForAdd, hasNextMessage, _groupName4, showNotifications, tabIsActive, _state$ThemeReducer$n, _state$ThemeReducer$n2, _state$ThemeReducer$n3, _state$ThemeReducer$n4, _state$ThemeReducer$n5, _state$ThemeReducer$n6, contactsMap, _getFromContacts, state, theme, accentColor, textSecondary, messageBody, channelId, markerList, _channel6, _activeChannelId6, updateLastMessage, markersMap, activeChannelMessages, lastMessage, _channelId, _channel7, _channel8, deletedMessage, _activeChannelId7, _channelExists7, _channel9, _message, _activeChannelId8, _channelExists8, _channel0, user, _message2, reaction, isSelf, _activeChannelId9, _state$ThemeReducer$n7, _state$ThemeReducer$n8, _state$ThemeReducer$n9, _state$ThemeReducer$n0, _state$ThemeReducer$n1, _state$ThemeReducer$n10, _contactsMap, _getFromContacts2, _state, _theme, _accentColor, _textSecondary, _messageBody, channelUpdateParams, _channel1, _user, _message3, _reaction, channelFromMap, _isSelf, _activeChannelId0, _channelUpdateParams, _channel10, _updatedChannel, _channel11, _activeChannelId1, channelExist, _channel12, _channel13, _channel14, _channel15, _channel16, _channel17, _channel18, _groupName5, _channel19, _groupName6, _channel20, members, _activeChannelId10, i, _channel21, _channel22, _channelId2, from, name, status, _t;
           return _regenerator().w(function (_context) {
             while (1) switch (_context.n) {
               case 0:
@@ -13434,8 +14135,20 @@ function watchForEvents() {
                 _activeChannelId6 = _context.v;
                 updateLastMessage = false;
                 markersMap = {};
+                activeChannelMessages = getMessagesFromMap(_activeChannelId6);
                 markerList.messageIds.forEach(function (messageId) {
-                  removePendingMessageFromMap(_channel6.id, messageId);
+                  if (activeChannelMessages !== null && activeChannelMessages !== void 0 && activeChannelMessages.find(function (message) {
+                    return message.id === messageId;
+                  })) {
+                    removePendingMessageFromMap(_activeChannelId6, messageId);
+                  } else {
+                    var isPendingMessage = getMessageFromPendingMessagesMap(_activeChannelId6, messageId);
+                    if (isPendingMessage) {
+                      updatePendingMessageOnMap(_activeChannelId6, messageId, {
+                        deliveryStatus: markerList.name
+                      });
+                    }
+                  }
                   markersMap[messageId] = true;
                   if (_channel6) {
                     if (_channel6.lastMessage && messageId === _channel6.lastMessage.id && _channel6.lastMessage.deliveryStatus !== MESSAGE_DELIVERY_STATUS.READ) {
@@ -15592,47 +16305,43 @@ function sendTyping(action) {
   }, _marked22, null, [[3, 7]]);
 }
 function sendRecording(action) {
-  var state, activeChannelId, channel, _t24;
+  var _action$payload, state, channelId, channel, _t24;
   return _regenerator().w(function (_context23) {
     while (1) switch (_context23.p = _context23.n) {
       case 0:
-        state = action.payload.state;
+        _action$payload = action.payload, state = _action$payload.state, channelId = _action$payload.channelId;
         _context23.n = 1;
-        return call(getActiveChannelId);
+        return call(getChannelFromMap, channelId);
       case 1:
-        activeChannelId = _context23.v;
-        _context23.n = 2;
-        return call(getChannelFromMap, activeChannelId);
-      case 2:
         channel = _context23.v;
-        _context23.p = 3;
+        _context23.p = 2;
         if (!channel) {
-          _context23.n = 6;
+          _context23.n = 5;
           break;
         }
         if (!state) {
-          _context23.n = 5;
+          _context23.n = 4;
           break;
         }
-        _context23.n = 4;
+        _context23.n = 3;
         return call(channel.startRecording);
-      case 4:
-        _context23.n = 6;
+      case 3:
+        _context23.n = 5;
         break;
-      case 5:
-        _context23.n = 6;
+      case 4:
+        _context23.n = 5;
         return call(channel.stopRecording);
-      case 6:
-        _context23.n = 8;
+      case 5:
+        _context23.n = 7;
         break;
-      case 7:
-        _context23.p = 7;
+      case 6:
+        _context23.p = 6;
         _t24 = _context23.v;
         log.error('ERROR in send recording', _t24);
-      case 8:
+      case 7:
         return _context23.a(2);
     }
-  }, _marked23, null, [[3, 7]]);
+  }, _marked23, null, [[2, 6]]);
 }
 function clearHistory(action) {
   var payload, channelId, channel, activeChannelId, groupName, _t25;
@@ -16505,13 +17214,7 @@ var addPendingMessage = function addPendingMessage(message, messageCopy, channel
     })));
     addMessageToMap(channel.id, messageToAdd);
     addAllMessages([messageToAdd], MESSAGE_LOAD_DIRECTION.NEXT);
-    setPendingMessages(channel.id, [messageToAdd]);
-    var hasNextMessages = store.getState().MessageReducer.messagesHasNext;
-    var activeChannelMessages = store.getState().MessageReducer.activeChannelMessages;
-    var isLatestMessageInChannelMessages = activeChannelMessages[activeChannelMessages.length - 1].id === channel.lastMessage.id;
-    if (hasNextMessages || !isLatestMessageInChannelMessages) {
-      store.dispatch(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
-    }
+    setPendingMessage(channel.id, messageToAdd);
     store.dispatch(scrollToNewMessageAC(true));
     store.dispatch(addMessageAC(messageToAdd));
     return Promise.resolve();
@@ -16613,7 +17316,7 @@ function sendMessage(action) {
                     } else {
                       var pendingAttachment = getPendingAttachment(attachment.tid);
                       if (!attachment.cachedUrl) {
-                        _setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, updatedAttachment, {
+                        setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, updatedAttachment, {
                           checksum: pendingAttachment.checksum
                         })], 'checksum');
                       }
@@ -16771,7 +17474,7 @@ function sendMessage(action) {
                 });
                 pendingAttachment = getPendingAttachment(messageAttachment[k].tid);
                 if (!messageAttachment[k].cachedUrl) {
-                  _setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, messageResponse.attachments[k], {
+                  setDataToDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, [_extends({}, messageResponse.attachments[k], {
                     checksum: pendingAttachment.checksum || (pendingAttachment === null || pendingAttachment === void 0 ? void 0 : pendingAttachment.file)
                   })], 'checksum');
                 }
@@ -16850,9 +17553,13 @@ function sendMessage(action) {
               case 14:
                 _context2.p = 14;
                 _t = _context2.v;
-                log.error('Error on uploading attachment', message.tid, _t);
+                log.error('Error on uploading attachment', messageToSend.tid, _t);
+                if (!(messageToSend.attachments && messageToSend.attachments.length)) {
+                  _context2.n = 15;
+                  break;
+                }
                 _context2.n = 15;
-                return put(updateAttachmentUploadingStateAC(UPLOAD_STATE.FAIL, message.tid));
+                return put(updateAttachmentUploadingStateAC(UPLOAD_STATE.FAIL, messageToSend.attachments[0].tid));
               case 15:
                 updateMessageOnMap(channel.id, {
                   messageId: messageToSend.tid,
@@ -17167,7 +17874,7 @@ function forwardMessage(action) {
         if (isCachedChannel) {
           addMessageToMap(channelId, pendingMessage);
         } else {
-          addPendingMessageToMap(channelId, pendingMessage);
+          setPendingMessage(channelId, pendingMessage);
         }
       case 12:
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
@@ -17247,7 +17954,7 @@ function forwardMessage(action) {
   }, _marked3$1, null, [[0, 19]]);
 }
 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, _messageCopy2, _messageResponse, _messageUpdateData, activeChannelId, _messageToUpdate, _t5, _t6;
+  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, _messageCopy2, _getMessagesFromMap, _messageResponse, _messageUpdateData, isInActiveChannel, activeChannelId, _messageToUpdate, _t5, _t6;
   return _regenerator().w(function (_context6) {
     while (1) switch (_context6.p = _context6.n) {
       case 0:
@@ -17515,7 +18222,12 @@ function resendMessage(action) {
           bodyAttributes: _messageResponse.bodyAttributes,
           createdAt: _messageResponse.createdAt
         };
-        removePendingMessageFromMap(channel.id, _messageCopy2.tid);
+        isInActiveChannel = (_getMessagesFromMap = getMessagesFromMap(channelId)) === null || _getMessagesFromMap === void 0 ? void 0 : _getMessagesFromMap.find(function (message) {
+          return message.id === _messageCopy2.tid;
+        });
+        if (isInActiveChannel) {
+          removePendingMessageFromMap(channel.id, _messageCopy2.tid);
+        }
         _context6.n = 27;
         return put(updateMessageAC(_messageCopy2.tid, _messageUpdateData));
       case 27:
@@ -17628,7 +18340,7 @@ function deleteMessage(action) {
   }, _marked5$1, null, [[0, 5]]);
 }
 function editMessage(action) {
-  var payload, _message, channelId, channel, editedMessage, messageToUpdate, _t8;
+  var payload, _message, channelId, channel, linkAttachments, anotherAttachments, linkAttachmentsToSend, editedMessage, messageToUpdate, _t8;
   return _regenerator().w(function (_context8) {
     while (1) switch (_context8.p = _context8.n) {
       case 0:
@@ -17645,6 +18357,21 @@ function editMessage(action) {
             setChannelInMap(channel);
           }
         }
+        if (_message.attachments.length > 0) {
+          linkAttachments = _message.attachments.filter(function (att) {
+            return att.type === attachmentTypes.link;
+          });
+          anotherAttachments = _message.attachments.filter(function (att) {
+            return att.type !== attachmentTypes.link;
+          });
+          linkAttachmentsToSend = [];
+          linkAttachments.forEach(function (linkAttachment) {
+            var linkAttachmentBuilder = channel.createAttachmentBuilder(linkAttachment.data, linkAttachment.type);
+            var linkAttachmentToSend = linkAttachmentBuilder.setName(linkAttachment.name).setUpload(linkAttachment.upload).create();
+            linkAttachmentsToSend.push(linkAttachmentToSend);
+          });
+          _message.attachments = [].concat(anotherAttachments, linkAttachmentsToSend);
+        }
         _context8.n = 2;
         return call(channel.editMessage, _extends({}, _message, {
           metadata: isJSON(_message.metadata) ? _message.metadata : JSON.stringify(_message.metadata),
@@ -17685,15 +18412,17 @@ function editMessage(action) {
   }, _marked6$1, null, [[0, 5]]);
 }
 function getMessagesQuery(action) {
-  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, pendingMessages, _messagesMap, filteredPendingMessages, index, mes, _t9;
+  var _action$payload, channel, loadWithLastMessage, messageId, limit, withDeliveredMessages, highlight, SceytChatClient, messageQueryBuilder, messageQuery, cachedMessages, result, allMessages, havLastMessage, secondResult, sentMessages, messagesMap, filteredSentMessages, _allMessages, messageIndex, maxLengthPart, _secondResult, thirdResult, _secondResult2, _thirdResult, _secondResult3, _secondResult4, updatedMessages, pendingMessages, _messagesMap, filteredPendingMessages, _t9;
   return _regenerator().w(function (_context9) {
     while (1) switch (_context9.p = _context9.n) {
       case 0:
-        log.info('getMessagesQuery ... ');
-        _context9.p = 1;
+        _context9.p = 0;
+        _context9.n = 1;
+        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
+      case 1:
         _action$payload = action.payload, channel = _action$payload.channel, loadWithLastMessage = _action$payload.loadWithLastMessage, messageId = _action$payload.messageId, limit = _action$payload.limit, withDeliveredMessages = _action$payload.withDeliveredMessages, highlight = _action$payload.highlight;
         if (!(channel.id && !channel.isMockChannel)) {
-          _context9.n = 49;
+          _context9.n = 47;
           break;
         }
         SceytChatClient = getClient();
@@ -17705,42 +18434,39 @@ function getMessagesQuery(action) {
       case 2:
         messageQuery = _context9.v;
         query.messageQuery = messageQuery;
-        _context9.n = 3;
-        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
-      case 3:
         cachedMessages = getMessagesFromMap(channel.id);
         result = {
           messages: [],
           hasNext: false
         };
         if (!loadWithLastMessage) {
-          _context9.n = 15;
+          _context9.n = 13;
           break;
         }
         allMessages = getAllMessages();
         havLastMessage = allMessages && allMessages.length && channel.lastMessage && allMessages[allMessages.length - 1] && allMessages[allMessages.length - 1].id === channel.lastMessage.id;
         if (!(channel.newMessageCount && channel.newMessageCount > 0 || !havLastMessage)) {
-          _context9.n = 10;
+          _context9.n = 8;
           break;
         }
         setHasPrevCached(false);
         setAllMessages([]);
-        _context9.n = 4;
+        _context9.n = 3;
         return call(messageQuery.loadPreviousMessageId, '0');
-      case 4:
+      case 3:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 6;
+          _context9.n = 5;
           break;
         }
         messageQuery.limit = 30;
-        _context9.n = 5;
+        _context9.n = 4;
         return call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 5:
+      case 4:
         secondResult = _context9.v;
         result.messages = [].concat(secondResult.messages, result.messages);
         result.hasNext = secondResult.hasNext;
-      case 6:
+      case 5:
         sentMessages = [];
         if (withDeliveredMessages) {
           sentMessages = getFromAllMessagesByMessageId('', '', true);
@@ -17753,43 +18479,40 @@ function getMessagesQuery(action) {
           return !messagesMap[msg.tid || ''];
         });
         result.messages = [].concat(result.messages, filteredSentMessages).slice(filteredSentMessages.length);
-        _context9.n = 7;
+        _context9.n = 6;
         return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 7:
+      case 6:
         setMessagesToMap(channel.id, result.messages);
         setAllMessages(result.messages);
-        _context9.n = 8;
+        _context9.n = 7;
         return put(setMessagesHasPrevAC(true));
+      case 7:
+        _context9.n = 10;
+        break;
       case 8:
+        result.messages = getFromAllMessagesByMessageId('', '', true);
         _context9.n = 9;
-        return put(markChannelAsReadAC(channel.id));
+        return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
       case 9:
-        _context9.n = 12;
-        break;
+        _context9.n = 10;
+        return put(setMessagesHasPrevAC(true));
       case 10:
-        result.messages = getFromAllMessagesByMessageId('', '', true);
         _context9.n = 11;
-        return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 11:
-        _context9.n = 12;
-        return put(setMessagesHasPrevAC(true));
-      case 12:
-        _context9.n = 13;
         return put(setMessagesHasNextAC(false));
-      case 13:
+      case 11:
         setHasNextCached(false);
         if (!messageId) {
-          _context9.n = 14;
+          _context9.n = 12;
           break;
         }
-        _context9.n = 14;
+        _context9.n = 12;
         return put(setScrollToMessagesAC(messageId, highlight));
-      case 14:
+      case 12:
         _context9.n = 45;
         break;
-      case 15:
+      case 13:
         if (!messageId) {
-          _context9.n = 26;
+          _context9.n = 25;
           break;
         }
         _allMessages = getAllMessages();
@@ -17798,164 +18521,174 @@ function getMessagesQuery(action) {
         });
         maxLengthPart = MESSAGES_MAX_LENGTH / 2;
         if (!(messageIndex >= maxLengthPart)) {
-          _context9.n = 17;
+          _context9.n = 15;
           break;
         }
         result.messages = _allMessages.slice(messageIndex - maxLengthPart, messageIndex + maxLengthPart);
-        _context9.n = 16;
+        _context9.n = 14;
         return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 16:
+      case 14:
         setHasPrevCached(messageIndex > maxLengthPart);
         setHasNextCached(_allMessages.length > maxLengthPart);
-        _context9.n = 24;
+        _context9.n = 22;
         break;
-      case 17:
+      case 15:
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         log.info('load by message id from server ...............', messageId);
-        _context9.n = 18;
+        _context9.n = 16;
         return call(messageQuery.loadNearMessageId, messageId);
-      case 18:
+      case 16:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 21;
+          _context9.n = 19;
           break;
         }
         messageQuery.limit = (MESSAGES_MAX_LENGTH - 50) / 2;
-        _context9.n = 19;
+        _context9.n = 17;
         return call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 19:
+      case 17:
         _secondResult = _context9.v;
         messageQuery.reverse = false;
-        _context9.n = 20;
+        _context9.n = 18;
         return call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 20:
+      case 18:
         thirdResult = _context9.v;
         result.messages = [].concat(_secondResult.messages, result.messages, thirdResult.messages);
         result.hasNext = _secondResult.hasNext;
         messageQuery.reverse = true;
-      case 21:
+      case 19:
         log.info('result from server ....... ', result);
-        _context9.n = 22;
+        _context9.n = 20;
         return put(setMessagesHasNextAC(true));
-      case 22:
-        _context9.n = 23;
+      case 20:
+        _context9.n = 21;
         return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 23:
+      case 21:
         setAllMessages([].concat(result.messages));
         setHasPrevCached(false);
         setHasNextCached(false);
-      case 24:
-        _context9.n = 25;
+      case 22:
+        _context9.n = 23;
         return put(setScrollToMessagesAC(messageId));
-      case 25:
+      case 23:
+        _context9.n = 24;
+        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 24:
         _context9.n = 45;
         break;
-      case 26:
+      case 25:
         if (!(channel.newMessageCount && channel.lastDisplayedMessageId)) {
-          _context9.n = 39;
+          _context9.n = 38;
           break;
         }
         setAllMessages([]);
         messageQuery.limit = MESSAGES_MAX_LENGTH;
         if (!Number(channel.lastDisplayedMessageId)) {
-          _context9.n = 32;
+          _context9.n = 31;
           break;
         }
-        _context9.n = 27;
+        _context9.n = 26;
         return call(messageQuery.loadNearMessageId, channel.lastDisplayedMessageId);
-      case 27:
+      case 26:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 31;
+          _context9.n = 30;
           break;
         }
         messageQuery.limit = channel.newMessageCount > 25 ? (MESSAGES_MAX_LENGTH - 50) / 2 : MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 28;
+        _context9.n = 27;
         return call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 28:
+      case 27:
         _secondResult2 = _context9.v;
         if (!(channel.newMessageCount > 25)) {
-          _context9.n = 30;
+          _context9.n = 29;
           break;
         }
         messageQuery.reverse = false;
-        _context9.n = 29;
+        _context9.n = 28;
         return call(messageQuery.loadNextMessageId, result.messages[result.messages.length - 1].id);
-      case 29:
+      case 28:
         _thirdResult = _context9.v;
         result.messages = [].concat(_secondResult2.messages, result.messages, _thirdResult.messages);
         messageQuery.reverse = true;
-        _context9.n = 31;
+        _context9.n = 30;
         break;
-      case 30:
+      case 29:
         result.messages = [].concat(_secondResult2.messages, result.messages);
-      case 31:
-        _context9.n = 35;
+      case 30:
+        _context9.n = 34;
         break;
-      case 32:
-        _context9.n = 33;
+      case 31:
+        _context9.n = 32;
         return call(messageQuery.loadPrevious);
-      case 33:
+      case 32:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 35;
+          _context9.n = 34;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 34;
+        _context9.n = 33;
         return call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 34:
+      case 33:
         _secondResult3 = _context9.v;
         result.messages = [].concat(_secondResult3.messages, result.messages);
         result.hasNext = _secondResult3.hasNext;
-      case 35:
+      case 34:
         setMessagesToMap(channel.id, result.messages);
-        _context9.n = 36;
+        _context9.n = 35;
         return put(setMessagesHasPrevAC(true));
-      case 36:
-        _context9.n = 37;
+      case 35:
+        _context9.n = 36;
         return put(setMessagesHasNextAC(channel.lastMessage && result.messages.length > 0 && channel.lastMessage.id !== result.messages[result.messages.length - 1].id));
-      case 37:
+      case 36:
         setAllMessages([].concat(result.messages));
-        _context9.n = 38;
+        _context9.n = 37;
         return put(setMessagesAC(JSON.parse(JSON.stringify(result.messages))));
-      case 38:
+      case 37:
         _context9.n = 45;
         break;
-      case 39:
+      case 38:
         setAllMessages([]);
         if (!(cachedMessages && cachedMessages.length)) {
-          _context9.n = 40;
+          _context9.n = 39;
           break;
         }
         setAllMessages([].concat(cachedMessages));
-        _context9.n = 40;
+        _context9.n = 39;
         return put(setMessagesAC(JSON.parse(JSON.stringify(cachedMessages))));
-      case 40:
+      case 39:
         log.info('load message from server');
-        _context9.n = 41;
+        _context9.n = 40;
         return call(messageQuery.loadPrevious);
-      case 41:
+      case 40:
         result = _context9.v;
         if (!(result.messages.length === 50)) {
-          _context9.n = 43;
+          _context9.n = 42;
           break;
         }
         messageQuery.limit = MESSAGES_MAX_LENGTH - 50;
-        _context9.n = 42;
+        _context9.n = 41;
         return call(messageQuery.loadPreviousMessageId, result.messages[0].id);
-      case 42:
+      case 41:
         _secondResult4 = _context9.v;
         result.messages = [].concat(_secondResult4.messages, result.messages);
         result.hasNext = _secondResult4.hasNext;
-      case 43:
+      case 42:
+        updatedMessages = [];
         result.messages.forEach(function (msg) {
-          updateMessageOnMap(channel.id, {
+          var updatedMessage = updateMessageOnMap(channel.id, {
             messageId: msg.id,
             params: msg
           });
-          updateMessageOnAllMessages(msg.id, msg);
+          updateMessageOnAllMessages(msg.id, updatedMessage || msg);
+          updatedMessages.push(updatedMessage || msg);
         });
+        setMessagesToMap(channel.id, updatedMessages);
+        setAllMessages([].concat(updatedMessages));
+        _context9.n = 43;
+        return put(setMessagesAC(JSON.parse(JSON.stringify(updatedMessages))));
+      case 43:
         _context9.n = 44;
         return put(setMessagesHasPrevAC(result.hasNext));
       case 44:
@@ -17964,7 +18697,7 @@ function getMessagesQuery(action) {
       case 45:
         pendingMessages = getPendingMessages(channel.id);
         if (!(pendingMessages && pendingMessages.length)) {
-          _context9.n = 47;
+          _context9.n = 46;
           break;
         }
         _messagesMap = {};
@@ -17977,34 +18710,32 @@ function getMessagesQuery(action) {
         _context9.n = 46;
         return put(addMessagesAC(filteredPendingMessages, MESSAGE_LOAD_DIRECTION.NEXT));
       case 46:
-        for (index = 0; index < filteredPendingMessages.length; index++) {
-          mes = filteredPendingMessages[index];
-          removePendingMessageFromMap(channel === null || channel === void 0 ? void 0 : channel.id, mes.tid || mes.id);
-        }
-      case 47:
         _context9.n = 48;
-        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 48:
-        _context9.n = 50;
         break;
-      case 49:
+      case 47:
         if (!channel.isMockChannel) {
-          _context9.n = 50;
+          _context9.n = 48;
           break;
         }
-        _context9.n = 50;
+        _context9.n = 48;
         return put(setMessagesAC([]));
-      case 50:
-        _context9.n = 52;
+      case 48:
+        _context9.n = 50;
         break;
-      case 51:
-        _context9.p = 51;
+      case 49:
+        _context9.p = 49;
         _t9 = _context9.v;
         log.error('error in message query', _t9);
+      case 50:
+        _context9.p = 50;
+        _context9.n = 51;
+        return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      case 51:
+        return _context9.f(50);
       case 52:
         return _context9.a(2);
     }
-  }, _marked7$1, null, [[1, 51]]);
+  }, _marked7$1, null, [[0, 49, 50, 52]]);
 }
 function loadMoreMessages(action) {
   var payload, limit, direction, channelId, messageId, hasNext, SceytChatClient, messageQueryBuilder, messageQuery, result, _t0;
@@ -19311,9 +20042,16 @@ function rootSaga() {
   }, _marked$6);
 }
 
+enableMapSet();
 var sagaMiddleware = createSagaMiddleware();
 var store = configureStore({
-  reducer: reducers,
+  reducer: {
+    ChannelReducer: ChannelReducer,
+    MessageReducer: MessageReducer,
+    MembersReducer: MembersReducer,
+    ThemeReducer: ThemeReducer,
+    UserReducer: UserReducer
+  },
   middleware: function middleware(getDefaultMiddleware) {
     return getDefaultMiddleware({
       thunk: false,
@@ -20239,7 +20977,15 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     color: textPrimary
   }, ":"), typingOrRecording.isTyping ? 'typing' : 'recording', "...")), !isTypingOrRecording && (draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageText, {
     color: textSecondary
-  }, audioRecording && /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), draftMessageText)) : lastMessage.state === MESSAGE_STATUS.DELETE ? 'Message was deleted.' : lastMessage.type === 'system' ? (lastMessage.user && (lastMessage.user.id === user.id ? 'You ' : makeUsername(lastMessage.user && contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts))) + " " + (lastMessage.body === 'CC' ? 'created this channel' : lastMessage.body === 'CG' ? 'created this group' : lastMessage.body === 'AM' ? " added " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
+  }, audioRecording && /*#__PURE__*/React__default.createElement(SvgVoiceIcon, null), MessageTextFormat({
+    text: draftMessageText,
+    message: lastMessage,
+    contactsMap: contactsMap,
+    getFromContacts: getFromContacts,
+    isLastMessage: true,
+    accentColor: accentColor,
+    textSecondary: textSecondary
+  }))) : lastMessage.state === MESSAGE_STATUS.DELETE ? 'Message was deleted.' : lastMessage.type === 'system' ? (lastMessage.user && (lastMessage.user.id === user.id ? 'You ' : makeUsername(lastMessage.user && contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts))) + " " + (lastMessage.body === 'CC' ? 'created this channel' : lastMessage.body === 'CG' ? 'created this group' : lastMessage.body === 'AM' ? " added " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
   })) + " " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.length > 5 ? "and " + (lastMessageMetas.m.length - 5) + " more" : '') : lastMessage.body === 'RM' ? " removed " + (lastMessageMetas && lastMessageMetas.m && lastMessageMetas.m.slice(0, 5).map(function (mem) {
     return mem === user.id ? ' You' : " " + systemMessageUserName(mem, contactsMap && contactsMap[mem], lastMessage.mentionedUsers);
@@ -20309,11 +21055,14 @@ var Channel = function Channel(_ref3) {
   var _useState = useState(),
     draftMessageText = _useState[0],
     setDraftMessageText = _useState[1];
+  var _useState2 = useState(),
+    draftMessage = _useState2[0],
+    setDraftMessage = _useState2[1];
   var lastMessage = channel.lastReactedMessage || channel.lastMessage;
   var lastMessageMetas = lastMessage && lastMessage.type === 'system' && lastMessage.metadata && (isJSON(lastMessage.metadata) ? JSON.parse(lastMessage.metadata) : lastMessage.metadata);
-  var _useState2 = useState(0),
-    statusWidth = _useState2[0],
-    setStatusWidth = _useState2[1];
+  var _useState3 = useState(0),
+    statusWidth = _useState3[0],
+    setStatusWidth = _useState3[1];
   var avatarName = channel.subject || (isDirectChannel && directChannelUser ? directChannelUser.firstName || directChannelUser.id : isSelfChannel ? 'Me' : '');
   var handleChangeActiveChannel = function handleChangeActiveChannel(chan) {
     if (activeChannel.id !== chan.id) {
@@ -20337,17 +21086,25 @@ var Channel = function Channel(_ref3) {
       if (channelDraftMessage || draftAudioRecording) {
         if (channelDraftMessage) {
           setDraftMessageText(channelDraftMessage.text);
+          setDraftMessage({
+            mentionedUsers: channelDraftMessage.mentionedMembers,
+            body: channelDraftMessage.text,
+            bodyAttributes: channelDraftMessage.bodyAttributes
+          });
         } else if (draftAudioRecording) {
           setDraftMessageText('Voice');
+          setDraftMessage(undefined);
         }
       } else if (draftMessageText) {
         setDraftMessageText(undefined);
+        setDraftMessage(undefined);
       }
     }
   }, [activeChannel.id]);
   useEffect(function () {
     if (channelDraftIsRemoved && channelDraftIsRemoved === channel.id) {
       setDraftMessageText(undefined);
+      setDraftMessage(undefined);
       dispatch(setChannelDraftMessageIsRemovedAC());
     }
   }, [channelDraftIsRemoved]);
@@ -20375,15 +21132,15 @@ var Channel = function Channel(_ref3) {
       items: filteredItems,
       isTyping: !!filteredItems.find(function (item) {
         return item.typingState;
+      }),
+      isRecording: !!filteredItems.find(function (item) {
+        return item.recordingState;
       })
     };
   }, [typingOrRecordingIndicator]);
-  var isTypingOrRecording = useMemo(function () {
-    return typingOrRecording.items.length > 0;
-  }, [typingOrRecording]);
   var MessageText = useMemo(function () {
     return /*#__PURE__*/React__default.createElement(ChannelMessageText, {
-      isTypingOrRecording: isTypingOrRecording,
+      isTypingOrRecording: (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording),
       user: user,
       contactsMap: contactsMap,
       getFromContacts: getFromContacts,
@@ -20394,10 +21151,10 @@ var Channel = function Channel(_ref3) {
       textPrimary: textPrimary,
       textSecondary: textSecondary,
       draftMessageText: draftMessageText,
-      lastMessage: lastMessage,
+      lastMessage: draftMessage || lastMessage,
       isDirectChannel: isDirectChannel
     });
-  }, [isTypingOrRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel]);
+  }, [typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping, typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording, draftMessageText, lastMessage, user, contactsMap, getFromContacts, lastMessageMetas, accentColor, typingOrRecording, channel, isDirectChannel]);
   return /*#__PURE__*/React__default.createElement(Container$2, {
     theme: theme,
     selectedChannel: channel.id === activeChannel.id,
@@ -20440,9 +21197,9 @@ var Channel = function Channel(_ref3) {
     unreadMentions: !!(channel.newMentionCount && channel.newMentionCount > 0),
     fontSize: channelLastMessageFontSize,
     height: channelLastMessageHeight
-  }, isTypingOrRecording ? !isDirectChannel ? (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
+  }, typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping || typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording ? !isDirectChannel ? (/*#__PURE__*/React__default.createElement(LastMessageAuthor, {
     typing: typingOrRecording.isTyping,
-    recording: !typingOrRecording.isTyping,
+    recording: typingOrRecording.isRecording,
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
@@ -20460,11 +21217,11 @@ var Channel = function Channel(_ref3) {
     color: textPrimary
   }, /*#__PURE__*/React__default.createElement("span", {
     ref: messageAuthorRef
-  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !isTypingOrRecording && (isDirectChannel ? !isTypingOrRecording && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : isTypingOrRecording && draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
+  }, lastMessage.user.id === user.id ? 'You' : makeUsername(contactsMap && contactsMap[lastMessage.user.id], lastMessage.user, getFromContacts, true)))), !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (isDirectChannel ? !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) && !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording) && (draftMessageText || lastMessage.user && lastMessage.state !== MESSAGE_STATUS.DELETE && (channel.lastReactedMessage && channel.newReactions && channel.newReactions[0] ? channel.newReactions[0].user && channel.newReactions[0].user.id === user.id : lastMessage.user.id === user.id)) : ((typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isTyping) || (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.isRecording)) && draftMessageText || lastMessage && lastMessage.state !== MESSAGE_STATUS.DELETE && lastMessage.type !== 'system') && (/*#__PURE__*/React__default.createElement(Points, {
     color: draftMessageText && warningColor || textPrimary
   }, ": ")), /*#__PURE__*/React__default.createElement(LastMessageText, {
     color: textSecondary,
-    withAttachments: !!(lastMessage && lastMessage.attachments && lastMessage.attachments.length && lastMessage.attachments[0].type !== attachmentTypes.link) && !isTypingOrRecording,
+    withAttachments: !!(lastMessage && lastMessage.attachments && lastMessage.attachments.length && lastMessage.attachments[0].type !== attachmentTypes.link) && (!(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping) || !(typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isRecording)),
     noBody: lastMessage && !lastMessage.body,
     deletedMessage: lastMessage && lastMessage.state === MESSAGE_STATUS.DELETE
   }, MessageText)))), /*#__PURE__*/React__default.createElement(ChannelStatus, {
@@ -20483,7 +21240,7 @@ var Channel = function Channel(_ref3) {
   }, lastMessage && lastMessage.createdAt && lastMessageDateFormat(lastMessage.createdAt))), /*#__PURE__*/React__default.createElement(UnreadInfo, {
     bottom: !(lastMessage || typingOrRecording.items.length > 0 || draftMessageText) ? '5px' : ''
   }, !!(channel.newMentionCount && channel.newMentionCount > 0) && (/*#__PURE__*/React__default.createElement(UnreadMentionIconWrapper, {
-    iconColor: channel !== null && channel !== void 0 && channel.muted ? iconInactive : accentColor,
+    iconColor: accentColor,
     rightMargin: !!(channel.newMessageCount || channel.unread)
   }, /*#__PURE__*/React__default.createElement(SvgUnreadMention, null))), !!(channel.newMessageCount || channel.unread) && (/*#__PURE__*/React__default.createElement(UnreadCount, {
     backgroundColor: accentColor,
@@ -20980,7 +21737,7 @@ var Container$4 = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTe
 }, function (props) {
   return props.height ? props.height + "px" : '0px';
 }, function (props) {
-  return props.background + "40";
+  return props.background + "66";
 });
 
 var _templateObject$9, _templateObject2$8, _templateObject3$5, _templateObject4$5, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$2, _templateObject0$2, _templateObject1$2;
@@ -22473,7 +23230,8 @@ var ChannelList = function ChannelList(_ref) {
     channelAvatarSize = _ref.channelAvatarSize,
     channelAvatarTextSize = _ref.channelAvatarTextSize,
     searchChannelInputFontSize = _ref.searchChannelInputFontSize,
-    searchedChannelsTitleFontSize = _ref.searchedChannelsTitleFontSize;
+    searchedChannelsTitleFontSize = _ref.searchedChannelsTitleFontSize,
+    searchChannelsPadding = _ref.searchChannelsPadding;
   var _useColor = useColors(),
     background = _useColor[THEME_COLORS.BACKGROUND],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -22710,7 +23468,8 @@ var ChannelList = function ChannelList(_ref) {
   }, /*#__PURE__*/React__default.createElement(ChannelListHeader, {
     withCustomList: !!List,
     maxWidth: channelListRef.current && ((_channelListRef$curre2 = channelListRef.current) === null || _channelListRef$curre2 === void 0 ? void 0 : _channelListRef$curre2.clientWidth) || 0,
-    borderColor: borderColor
+    borderColor: borderColor,
+    padding: searchChannelsPadding
   }, Profile, showSearch && searchChannelsPosition === 'inline' ? (/*#__PURE__*/React__default.createElement(ChannelSearch, {
     inline: true,
     borderRadius: searchInputBorderRadius,
@@ -23033,8 +23792,10 @@ var NoData = styled.div(_templateObject8$4 || (_templateObject8$4 = _taggedTempl
   return props.color;
 });
 var LoadingWrapper = styled.div(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: calc(50% - 20px);\n  top: calc(50% - 20px);\n"])));
-var ChannelListHeader = styled.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  padding-left: 22px;\n  box-sizing: border-box;\n  padding-left: ", ";\n  border-right: ", ";\n"])), function (props) {
+var ChannelListHeader = styled.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: ", ";\n  padding-left: 22px;\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.padding || '12px';
 }, function (props) {
   return props.withoutProfile && '52px';
 }, function (props) {
@@ -23424,7 +24185,7 @@ var Container$a = styled.div(_templateObject$j || (_templateObject$j = _taggedTe
 }, function (props) {
   return props.dateDividerTextColor;
 }, function (props) {
-  return props.dateDividerBackgroundColor + "40";
+  return props.dateDividerBackgroundColor + "66";
 }, function (props) {
   return props.dateDividerBorderRadius || '14px';
 }, function (props) {
@@ -24060,7 +24821,7 @@ var VolumeSlide = styled.input(_templateObject9$6 || (_templateObject9$6 = _tagg
 var Progress = styled.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.div(_templateObject1$3 || (_templateObject1$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-left: 16px;\n  cursor: pointer;\n  @media (max-width: 768px) {\n    margin-left: 12px;\n    & > svg {\n      width: 18px;\n      height: 18px;\n    }\n  }\n  @media (max-width: 480px) {\n    margin-left: auto;\n    & > svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n"])));
 
-var _templateObject$l, _templateObject2$i, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject0$6;
+var _templateObject$l, _templateObject2$i, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject0$6, _templateObject1$4;
 function ForwardMessagePopup(_ref) {
   var title = _ref.title,
     buttonText = _ref.buttonText,
@@ -24310,7 +25071,9 @@ function ForwardMessagePopup(_ref) {
       backgroundColor: 'transparent',
       checkedBackgroundColor: accentColor
     }));
-  }))))) : channels.map(function (channel) {
+  }))), !searchedChannels.chats_groups.length && !searchedChannels.channels.length && (/*#__PURE__*/React__default.createElement(NoResults, {
+    color: textSecondary
+  }, "No channels found")))) : channels.map(function (channel) {
     var _channel$metadata3;
     var isDirectChannel = channel.type === DEFAULT_CHANNEL_TYPE.DIRECT;
     var isSelfChannel = isDirectChannel && ((_channel$metadata3 = channel.metadata) === null || _channel$metadata3 === void 0 ? void 0 : _channel$metadata3.s);
@@ -24394,6 +25157,9 @@ var SelectedChannelName = styled.span(_templateObject9$7 || (_templateObject9$7
   return props.color;
 });
 var StyledSubtractSvg$1 = styled(SvgCross)(_templateObject0$6 || (_templateObject0$6 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-left: 4px;\n  transform: translate(2px, 0);\n"])));
+var NoResults = styled.div(_templateObject1$4 || (_templateObject1$4 = _taggedTemplateLiteralLoose(["\n  font-size: 15px;\n  line-height: 16px;\n  font-weight: 500;\n  text-align: center;\n  margin-top: 20px;\n  color: ", ";\n"])), function (props) {
+  return props.color;
+});
 
 var _templateObject$m, _templateObject2$j;
 var CustomRadio = function CustomRadio(_ref) {
@@ -24567,7 +25333,7 @@ var DeleteOptionItem = styled.div(_templateObject2$k || (_templateObject2$k = _t
   return props.color;
 });
 
-var _templateObject$o, _templateObject2$l, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$8, _templateObject9$8, _templateObject0$7, _templateObject1$4, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2;
+var _templateObject$o, _templateObject2$l, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$8, _templateObject9$8, _templateObject0$7, _templateObject1$5, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$2;
 var SliderPopup = function SliderPopup(_ref) {
   var channel = _ref.channel,
     setIsSliderOpen = _ref.setIsSliderOpen,
@@ -24954,7 +25720,7 @@ var SliderPopup = function SliderPopup(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -25108,7 +25874,7 @@ var FileSize = styled.span(_templateObject9$8 || (_templateObject9$8 = _taggedTe
 var UserName = styled.h4(_templateObject0$7 || (_templateObject0$7 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  color: ", ";\n  font-weight: 500;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.2px;\n"])), function (props) {
   return props.color;
 });
-var ActionsWrapper = styled.div(_templateObject1$4 || (_templateObject1$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var ActionsWrapper = styled.div(_templateObject1$5 || (_templateObject1$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var IconWrapper = styled.span(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  color: ", ";\n  margin: ", ";\n\n  & > svg {\n    width: 28px;\n    height: 28px;\n  }\n\n  ", "\n"])), function (props) {
   return props.color;
 }, function (props) {
@@ -25209,7 +25975,7 @@ var Container$c = styled.div(_templateObject$p || (_templateObject$p = _taggedTe
 }, function (props) {
   return props.textColor;
 }, function (props) {
-  return props.backgroundColor + "40";
+  return props.backgroundColor + "66";
 }, function (props) {
   return props.border;
 }, function (props) {
@@ -26176,7 +26942,9 @@ var VideoPreview = /*#__PURE__*/memo(function VideoPreview(_ref) {
         setLoading(false);
         var minutes = Math.floor(video.duration / 60);
         var _seconds = Math.floor(video.duration % 60);
-        setVideoCurrentTime(minutes + ":" + (_seconds < 10 ? "0" + _seconds : _seconds));
+        if (!videoCurrentTime) {
+          setVideoCurrentTime(minutes + ":" + (_seconds < 10 ? "0" + _seconds : _seconds));
+        }
         if (setVideoIsReadyToSend) {
           setVideoIsReadyToSend(file.tid);
         }
@@ -26257,7 +27025,7 @@ var VideoTime = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTe
 }, function (props) {
   return props.isRepliedMessage ? '0 3px' : '4px 6px';
 }, function (props) {
-  return props.messageTimeBackgroundColor + "40";
+  return props.messageTimeBackgroundColor + "66";
 }, function (props) {
   return props.color;
 }, function (props) {
@@ -28453,7 +29221,7 @@ var Timer$1 = styled.div(_templateObject6$c || (_templateObject6$c = _taggedTemp
   return props.color;
 });
 
-var _templateObject$u, _templateObject2$q, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$a, _templateObject9$a, _templateObject0$9, _templateObject1$5, _templateObject10$3, _templateObject11$3;
+var _templateObject$u, _templateObject2$q, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$a, _templateObject9$a, _templateObject0$9, _templateObject1$6, _templateObject10$3, _templateObject11$3;
 var Attachment = function Attachment(_ref) {
   var attachment = _ref.attachment,
     _ref$isPreview = _ref.isPreview,
@@ -28566,7 +29334,15 @@ var Attachment = function Attachment(_ref) {
     if (downloadIsCancelled) {
       setDownloadIsCancelled(false);
       if (customDownloader) {
-        customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
+        customDownloader(attachment.url, false, function (progress) {
+          var loadedRes = progress.loaded && progress.loaded / progress.total;
+          var uploadPercent = loadedRes && loadedRes * 100;
+          setSizeProgress({
+            loaded: progress.loaded || 0,
+            total: progress.total || 0
+          });
+          setProgress(uploadPercent);
+        }, messageType).then(function (url) {
           downloadImage(url);
         });
       } else {
@@ -28694,23 +29470,35 @@ var Attachment = function Attachment(_ref) {
     }
   }, [attachmentUrl]);
   useEffect(function () {
-    if (connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
+    if (!attachment.attachmentUrl && connectionStatus === CONNECTION_STATUS.CONNECTED && attachment.id && !(attachment.type === attachmentTypes.file || attachment.type === attachmentTypes.link)) {
       getAttachmentUrlFromCache(attachment.url).then(function (cachedUrl) {
         try {
-          if (attachment.type === 'image' && !isPreview) {
+          if (attachment.type === attachmentTypes.image && !isPreview) {
             if (cachedUrl) {
               setAttachmentUrl(cachedUrl);
+              dispatch(setUpdateMessageAttachmentAC(attachment.url, attachment.messageId, {
+                attachmentUrl: cachedUrl
+              }));
               setIsCached(true);
             } else {
               setIsCached(false);
               setDownloadingFile(true);
               if (customDownloader) {
-                customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
+                customDownloader(attachment.url, false, function (progress) {
+                  var loadedRes = progress.loaded && progress.loaded / progress.total;
+                  var uploadPercent = loadedRes && loadedRes * 100;
+                  setSizeProgress({
+                    loaded: progress.loaded || 0,
+                    total: progress.total || 0
+                  });
+                  setProgress(uploadPercent);
+                }, messageType).then(function (url) {
                   try {
                     downloadImage(url);
                     return Promise.resolve(fetch(url)).then(function (response) {
                       setAttachmentToCache(attachment.url, response);
                       setIsCached(true);
+                      setDownloadingFile(false);
                     });
                   } catch (e) {
                     return Promise.reject(e);
@@ -28749,7 +29537,15 @@ var Attachment = function Attachment(_ref) {
         log.info('error on get attachment url from cache. .. ', e);
         if (customDownloader) {
           setDownloadingFile(true);
-          customDownloader(attachment.url, false, function () {}, messageType).then(function (url) {
+          customDownloader(attachment.url, true, function (progress) {
+            var loadedRes = progress.loaded && progress.loaded / progress.total;
+            var uploadPercent = loadedRes && loadedRes * 100;
+            setSizeProgress({
+              loaded: progress.loaded || 0,
+              total: progress.total || 0
+            });
+            setProgress(uploadPercent);
+          }, messageType).then(function (url) {
             try {
               return Promise.resolve(fetch(url)).then(function (response) {
                 setAttachmentToCache(attachment.url, response);
@@ -28816,7 +29612,7 @@ var Attachment = function Attachment(_ref) {
       }
     }
   }, [attachmentsUploadProgress]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, attachment.type === 'image' ? (/*#__PURE__*/React__default.createElement(AttachmentImgCont, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, attachment.type === attachmentTypes.image ? (/*#__PURE__*/React__default.createElement(AttachmentImgCont, {
     draggable: false,
     onClick: function onClick() {
       return handleMediaItemClick && !isInUploadingState && !downloadingFile && handleMediaItemClick(attachment);
@@ -28854,7 +29650,7 @@ var Attachment = function Attachment(_ref) {
     imageMinWidth: imageMinWidth,
     withPrefix: withPrefix,
     borderColor: borderColor
-  }, /*#__PURE__*/React__default.createElement(UploadPercent, {
+  }, !isPreview && (isInUploadingState || downloadingFile) && sizeProgress && sizeProgress.loaded < sizeProgress.total && (/*#__PURE__*/React__default.createElement(UploadPercent, {
     isRepliedMessage: isRepliedMessage,
     isDetailsView: isDetailsView,
     backgroundColor: overlayBackground2
@@ -28871,7 +29667,7 @@ var Attachment = function Attachment(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -28884,13 +29680,13 @@ var Attachment = function Attachment(_ref) {
     }
   })), sizeProgress && (/*#__PURE__*/React__default.createElement(SizeProgress, {
     color: textOnPrimary
-  }, bytesToSize(sizeProgress.loaded, 1), " / ", bytesToSize(sizeProgress.total, 1)))))))) : null, isPreview && (/*#__PURE__*/React__default.createElement(RemoveChosenFile, {
+  }, bytesToSize(sizeProgress.loaded, 1), " / ", bytesToSize(sizeProgress.total, 1))))))))) : null, isPreview && (/*#__PURE__*/React__default.createElement(RemoveChosenFile, {
     backgroundColor: background,
     color: iconInactive,
     onClick: function onClick() {
       return handleDeleteSelectedAttachment(attachment.tid);
     }
-  })))) : attachment.type === 'video' ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isPreview ? (/*#__PURE__*/React__default.createElement(VideoCont, {
+  })))) : attachment.type === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isPreview ? (/*#__PURE__*/React__default.createElement(VideoCont, {
     onClick: function onClick() {
       return handleMediaItemClick && !downloadingFile && !isInUploadingState && (attachmentCompilationState[attachment.tid] ? attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.FAIL || attachmentCompilationState[attachment.tid] !== UPLOAD_STATE.UPLOADING : true) && handleMediaItemClick(attachment);
     },
@@ -28921,7 +29717,7 @@ var Attachment = function Attachment(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -28986,7 +29782,7 @@ var Attachment = function Attachment(_ref) {
   React__default.createElement(AttachmentIconCont, {
     backgroundColor: accentColor,
     className: 'icon-warpper'
-  }, previewFileType && previewFileType === 'video' ? (/*#__PURE__*/React__default.createElement(VideoPreview, {
+  }, previewFileType && previewFileType === attachmentTypes.video ? (/*#__PURE__*/React__default.createElement(VideoPreview, {
     file: attachment,
     backgroundColor: backgroundColor && backgroundColor !== 'inherit' ? backgroundColor : overlayBackground2,
     width: '40px',
@@ -29028,7 +29824,7 @@ var Attachment = function Attachment(_ref) {
     text: '',
     styles: {
       background: {
-        fill: overlayBackground2 + "40"
+        fill: overlayBackground2 + "66"
       },
       path: {
         stroke: textOnPrimary,
@@ -29120,7 +29916,7 @@ var AttachmentSize = styled.span(_templateObject0$9 || (_templateObject0$9 = _ta
 }, function (props) {
   return props.errorColor;
 });
-var AttachmentFileInfo = styled.div(_templateObject1$5 || (_templateObject1$5 = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  ", "\n"])), function (props) {
+var AttachmentFileInfo = styled.div(_templateObject1$6 || (_templateObject1$6 = _taggedTemplateLiteralLoose(["\n  margin-left: 12px;\n  ", "\n"])), function (props) {
   return props.isPreview && "line-height: 14px;\n      max-width: calc(100% - 44px);\n  ";
 });
 var AttachmentImg$1 = styled.img(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  position: ", ";\n  border-radius: ", ";\n  padding: ", ";\n  box-sizing: border-box;\n  max-width: 100%;\n  max-height: ", ";\n  width: ", ";\n  height: ", ";\n  min-height: ", ";\n  min-width: ", ";\n  object-fit: cover;\n  visibility: ", ";\n  z-index: 2;\n"])), function (props) {
@@ -30200,7 +30996,7 @@ var MessageStatusAndTime = function MessageStatusAndTime(_ref) {
   }))));
 };
 var MessageStatusAndTime$1 = /*#__PURE__*/React__default.memo(MessageStatusAndTime, function (prevProps, nextProps) {
-  return prevProps.message.state === nextProps.message.state && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.createdAt === nextProps.message.createdAt && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageTimeVisible === nextProps.messageTimeVisible && prevProps.messageStatusVisible === nextProps.messageStatusVisible && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.bottomOfMessage === nextProps.bottomOfMessage && prevProps.marginBottom === nextProps.marginBottom && prevProps.messageTimeColorOnAttachment === nextProps.messageTimeColorOnAttachment;
+  return prevProps.message.state === nextProps.message.state && prevProps.message.deliveryStatus === nextProps.message.deliveryStatus && prevProps.message.createdAt === nextProps.message.createdAt && prevProps.showMessageTimeAndStatusOnlyOnHover === nextProps.showMessageTimeAndStatusOnlyOnHover && prevProps.messageStatusSize === nextProps.messageStatusSize && prevProps.messageStatusColor === nextProps.messageStatusColor && prevProps.messageReadStatusColor === nextProps.messageReadStatusColor && prevProps.messageStateFontSize === nextProps.messageStateFontSize && prevProps.messageStateColor === nextProps.messageStateColor && prevProps.messageTimeFontSize === nextProps.messageTimeFontSize && prevProps.messageStatusAndTimeLineHeight === nextProps.messageStatusAndTimeLineHeight && prevProps.messageTimeColor === nextProps.messageTimeColor && prevProps.messageTimeVisible === nextProps.messageTimeVisible && prevProps.messageStatusVisible === nextProps.messageStatusVisible && prevProps.ownMessageOnRightSide === nextProps.ownMessageOnRightSide && prevProps.bottomOfMessage === nextProps.bottomOfMessage && prevProps.marginBottom === nextProps.marginBottom && prevProps.messageTimeColorOnAttachment === nextProps.messageTimeColorOnAttachment && prevProps.withAttachment === nextProps.withAttachment;
 });
 var MessageStatus = styled.span(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.height || '14px';
@@ -30219,7 +31015,7 @@ var MessageStatusAndTimeContainer = styled.span(_templateObject3$o || (_template
 }, function (props) {
   return props.withAttachment && '4px 6px';
 }, function (props) {
-  return props.withAttachment && !props.fileAttachment && props.messageTimeBackgroundColor + "40";
+  return props.withAttachment && !props.fileAttachment && props.messageTimeBackgroundColor + "66";
 }, function (props) {
   return props.lineHeight || '14px';
 }, function (props) {
@@ -30263,9 +31059,9 @@ var OGMetadata = function OGMetadata(_ref) {
     setMetadata = _useState[1];
   var attachment = useMemo(function () {
     return attachments.find(function (attachment) {
-      return attachment.type === 'link';
+      return attachment.type === attachmentTypes.link;
     });
-  }, [attachments === null || attachments === void 0 ? void 0 : attachments.length]);
+  }, [attachments]);
   var ogMetadataQueryBuilder = useCallback(function (url) {
     try {
       var client = getClient();
@@ -30275,7 +31071,7 @@ var OGMetadata = function OGMetadata(_ref) {
             var queryBuilder = new client.MessageLinkOGQueryBuilder(url);
             return Promise.resolve(queryBuilder.build()).then(function (query) {
               return Promise.resolve(query.loadOGData()).then(function (metadata) {
-                return Promise.resolve(storeMetadata(url.replace('https://', ''), metadata)).then(function () {
+                return Promise.resolve(storeMetadata(url.replace('https://', '').replace('http://', ''), metadata)).then(function () {
                   setMetadata(metadata);
                 });
               });
@@ -30294,10 +31090,10 @@ var OGMetadata = function OGMetadata(_ref) {
     }
   }, []);
   useEffect(function () {
-    if (attachment !== null && attachment !== void 0 && attachment.id && !metadata) {
+    if (attachment !== null && attachment !== void 0 && attachment.id && attachment !== null && attachment !== void 0 && attachment.url) {
       var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
       if (url) {
-        getMetadata(url.replace('https://', '')).then(function (cachedMetadata) {
+        getMetadata(url.replace('https://', '').replace('http://', '')).then(function (cachedMetadata) {
           try {
             if (cachedMetadata) {
               setMetadata(cachedMetadata);
@@ -30313,7 +31109,7 @@ var OGMetadata = function OGMetadata(_ref) {
         });
       }
     }
-  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url, metadata]);
+  }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
   var ogUrl = useMemo(function () {
     var url = attachment === null || attachment === void 0 ? void 0 : attachment.url;
     var urlObj = validateUrl(url);
@@ -30324,25 +31120,33 @@ var OGMetadata = function OGMetadata(_ref) {
   }, [attachment === null || attachment === void 0 ? void 0 : attachment.url]);
   var showOGMetadata = useMemo(function () {
     var _metadata$og, _metadata$og2, _metadata$og2$image, _metadata$og2$image$, _metadata$og3;
-    return state === 'deleted' || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) === '' || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) === '' || (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) === '' || !metadata;
+    return state !== 'deleted' && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og = metadata.og) === null || _metadata$og === void 0 ? void 0 : _metadata$og.title) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og2 = metadata.og) === null || _metadata$og2 === void 0 ? void 0 : (_metadata$og2$image = _metadata$og2.image) === null || _metadata$og2$image === void 0 ? void 0 : (_metadata$og2$image$ = _metadata$og2$image[0]) === null || _metadata$og2$image$ === void 0 ? void 0 : _metadata$og2$image$.url) && (metadata === null || metadata === void 0 ? void 0 : (_metadata$og3 = metadata.og) === null || _metadata$og3 === void 0 ? void 0 : _metadata$og3.description) && metadata;
   }, [state, metadata]);
-  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, null, /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(OGMetadataContainer, {
+    showOGMetadata: !!showOGMetadata
+  }, /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick() {
       window.open(attachment === null || attachment === void 0 ? void 0 : attachment.url, '_blank');
     }
   }, /*#__PURE__*/React__default.createElement(ImageContainer, {
-    showOGMetadata: showOGMetadata
+    showOGMetadata: !!showOGMetadata
   }, metadata !== null && metadata !== void 0 && (_metadata$og4 = metadata.og) !== null && _metadata$og4 !== void 0 && (_metadata$og4$image = _metadata$og4.image) !== null && _metadata$og4$image !== void 0 && (_metadata$og4$image$ = _metadata$og4$image[0]) !== null && _metadata$og4$image$ !== void 0 && _metadata$og4$image$.url ? /*#__PURE__*/React__default.createElement(Img, {
     src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og5 = metadata.og) === null || _metadata$og5 === void 0 ? void 0 : (_metadata$og5$image = _metadata$og5.image) === null || _metadata$og5$image === void 0 ? void 0 : (_metadata$og5$image$ = _metadata$og5$image[0]) === null || _metadata$og5$image$ === void 0 ? void 0 : _metadata$og5$image$.url,
     alt: 'OG metadata image'
-  }) : null), showOGMetadata ? null : (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, null, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, null, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url ? /*#__PURE__*/React__default.createElement(Favicon, {
+  }) : null), showOGMetadata ? (/*#__PURE__*/React__default.createElement(OGText, null, /*#__PURE__*/React__default.createElement(Url, null, ogUrl), metadata !== null && metadata !== void 0 && (_metadata$og6 = metadata.og) !== null && _metadata$og6 !== void 0 && _metadata$og6.title ? (/*#__PURE__*/React__default.createElement(Title, null, metadata !== null && metadata !== void 0 && (_metadata$og7 = metadata.og) !== null && _metadata$og7 !== void 0 && (_metadata$og7$favicon = _metadata$og7.favicon) !== null && _metadata$og7$favicon !== void 0 && _metadata$og7$favicon.url ? /*#__PURE__*/React__default.createElement(Favicon, {
     src: metadata === null || metadata === void 0 ? void 0 : (_metadata$og8 = metadata.og) === null || _metadata$og8 === void 0 ? void 0 : (_metadata$og8$favicon = _metadata$og8.favicon) === null || _metadata$og8$favicon === void 0 ? void 0 : _metadata$og8$favicon.url
-  }) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? /*#__PURE__*/React__default.createElement(Desc, null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description) : null))));
+  }) : null, /*#__PURE__*/React__default.createElement("span", null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og9 = metadata.og) === null || _metadata$og9 === void 0 ? void 0 : _metadata$og9.title))) : null, metadata !== null && metadata !== void 0 && (_metadata$og0 = metadata.og) !== null && _metadata$og0 !== void 0 && _metadata$og0.description ? /*#__PURE__*/React__default.createElement(Desc, null, metadata === null || metadata === void 0 ? void 0 : (_metadata$og1 = metadata.og) === null || _metadata$og1 === void 0 ? void 0 : _metadata$og1.description) : null)) : null));
 };
-var OGMetadataContainer = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: rgba(0, 0, 0, 0.034);\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: 0.8rem;\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n"])));
-var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 200px;\n  width: 100%;\n  height: 200px;\n  margin: 0 auto;\n  padding: 0.3rem;\n  height: ", ";\n  transition: height 0.2s ease;\n"])), function (_ref2) {
+var OGMetadataContainer = styled.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  min-width: inherit;\n  max-width: inherit;\n  display: grid;\n  grid-template-columns: 1fr;\n  background-color: rgba(0, 0, 0, 0.034);\n  border-radius: 6px;\n  margin-bottom: 0.4rem;\n  margin: 0 auto;\n  margin-bottom: ", ";\n  &:hover {\n    background-color: rgba(0, 0, 0, 0.1);\n    cursor: pointer;\n  }\n"])), function (_ref2) {
   var showOGMetadata = _ref2.showOGMetadata;
-  return !showOGMetadata ? '200px' : '0';
+  return showOGMetadata ? '0.8rem' : '0';
+});
+var ImageContainer = styled.div(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 200px;\n  width: 100%;\n  margin: 0 auto;\n  padding: ", ";\n  height: ", ";\n  transition: height 0.2s ease;\n"])), function (_ref3) {
+  var showOGMetadata = _ref3.showOGMetadata;
+  return showOGMetadata ? '0.3rem' : '0';
+}, function (_ref4) {
+  var showOGMetadata = _ref4.showOGMetadata;
+  return showOGMetadata ? '200px' : '0';
 });
 var OGText = styled.div(_templateObject3$p || (_templateObject3$p = _taggedTemplateLiteralLoose(["\n  width: 80%;\n  padding: 0.5rem;\n  margin: 0;\n"])));
 var Url = styled.p(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  font-weight: normal;\n  font-size: 13px;\n  padding: 0;\n  margin: 0 0 12px 0;\n  color: gray;\n"])));
@@ -30865,7 +31669,7 @@ var FrequentlyEmojisContainer = styled.div(_templateObject5$i || (_templateObjec
   return props.rtlDirection && '0';
 });
 
-var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$j, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$3;
+var _templateObject$C, _templateObject2$x, _templateObject3$r, _templateObject4$n, _templateObject5$j, _templateObject6$g, _templateObject7$e, _templateObject8$d, _templateObject9$b, _templateObject0$a, _templateObject1$7, _templateObject10$4, _templateObject11$4, _templateObject12$3;
 var Message$1 = function Message(_ref) {
   var message = _ref.message,
     channel = _ref.channel,
@@ -31194,7 +31998,6 @@ var Message$1 = function Message(_ref) {
     if (isVisible && message.incoming && !(message.userMarkers && message.userMarkers.length && message.userMarkers.find(function (marker) {
       return marker.name === MESSAGE_DELIVERY_STATUS.READ;
     })) && channel.newMessageCount && channel.newMessageCount > 0 && connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      log.info('send displayed marker for message ... ', message);
       dispatch(markMessagesAsReadAC(channel.id, [message.id]));
     }
   };
@@ -31242,8 +32045,9 @@ var Message$1 = function Message(_ref) {
       if (!channel.isLinkedChannel) {
         setMessageToVisibleMessagesMap(message);
       }
-      if (scrollToNewMessage.scrollToBottom) {
+      if (scrollToNewMessage.scrollToBottom && (message.id === channel.lastMessage.id || !message.id)) {
         dispatch(scrollToNewMessageAC(false, false, false));
+        dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
       }
     } else {
       if (!channel.isLinkedChannel) {
@@ -31642,7 +32446,7 @@ var ReactionsContainer = styled.div(_templateObject9$b || (_templateObject9$b =
 var MessageReactionsCont = styled.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.span(_templateObject1$6 || (_templateObject1$6 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
+var MessageStatus$1 = styled.span(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  margin-left: 4px;\n  text-align: right;\n  height: ", ";\n  & > svg {\n    height: 16px;\n    width: 16px;\n  }\n"])), function (props) {
   return props.height || '14px';
 });
 var HiddenMessageTime$1 = styled.span(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  font-weight: 400;\n  font-size: ", ";\n  color: ", ";\n"])), function (props) {
@@ -31687,13 +32491,14 @@ var HiddenMessageProperty;
   HiddenMessageProperty["hideAfterSendMessage"] = "hideAfterSendMessage";
 })(HiddenMessageProperty || (HiddenMessageProperty = {}));
 
-var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$7;
+var _templateObject$D, _templateObject2$y, _templateObject3$s, _templateObject4$o, _templateObject5$k, _templateObject6$h, _templateObject7$f, _templateObject8$e, _templateObject9$c, _templateObject0$b, _templateObject1$8;
 var loadFromServer = false;
 var loadDirection = '';
 var nextDisable = false;
 var prevDisable = false;
 var scrollToBottom = false;
 var shouldLoadMessages;
+var loading = false;
 var messagesIndexMap = {};
 var CreateMessageDateDivider = function CreateMessageDateDivider(_ref) {
   var lastIndex = _ref.lastIndex,
@@ -32003,7 +32808,7 @@ var MessageList = function MessageList(_ref2) {
       } else {
         if (messagesIndexMap[lastVisibleMessageId] < 15 || forceLoadPrevMessages) {
           if (connectionStatus === CONNECTION_STATUS.CONNECTED && !scrollToNewMessage.scrollToBottom && hasPrevMessages) {
-            if (messagesLoading === LOADING_STATE.LOADING || prevDisable) {
+            if (loading || messagesLoading === LOADING_STATE.LOADING || prevDisable) {
               shouldLoadMessages = 'prev';
             } else {
               if (shouldLoadMessages === 'prev') {
@@ -32020,7 +32825,7 @@ var MessageList = function MessageList(_ref2) {
         }
         if (messagesIndexMap[lastVisibleMessageId] >= messages.length - 15 || target.scrollTop === 0) {
           if (connectionStatus === CONNECTION_STATUS.CONNECTED && !scrollToNewMessage.scrollToBottom && (hasNextMessages || getHasNextCached())) {
-            if (messagesLoading === LOADING_STATE.LOADING || nextDisable) {
+            if (loading || messagesLoading === LOADING_STATE.LOADING || nextDisable) {
               shouldLoadMessages = 'next';
             } else {
               if (shouldLoadMessages === 'next') {
@@ -32040,7 +32845,7 @@ var MessageList = function MessageList(_ref2) {
     } catch (e) {
       return Promise.reject(e);
     }
-  }, [channel === null || channel === void 0 ? void 0 : (_channel$lastMessage = channel.lastMessage) === null || _channel$lastMessage === void 0 ? void 0 : _channel$lastMessage.id, messages, scrollToMentionedMessage, scrollToNewMessage, messagesLoading, hasPrevMessages, hasNextMessages, messagesIndexMap, lastVisibleMessageId, connectionStatus, shouldLoadMessages, loadDirection, getHasPrevCached, getHasNextCached, scrollToReply]);
+  }, [channel === null || channel === void 0 ? void 0 : (_channel$lastMessage = channel.lastMessage) === null || _channel$lastMessage === void 0 ? void 0 : _channel$lastMessage.id, messages, scrollToMentionedMessage, scrollToNewMessage, messagesLoading, hasPrevMessages, hasNextMessages, messagesIndexMap, lastVisibleMessageId, connectionStatus, shouldLoadMessages, loadDirection, getHasPrevCached, getHasNextCached, scrollToReply, loading, prevDisable, nextDisable]);
   var handleScrollToRepliedMessage = function handleScrollToRepliedMessage(messageId) {
     try {
       prevDisable = true;
@@ -32080,8 +32885,10 @@ var MessageList = function MessageList(_ref2) {
     var hasNextCached = getHasNextCached();
     if (messagesLoading === LOADING_STATE.LOADED && connectionStatus === CONNECTION_STATUS.CONNECTED) {
       if (direction === MESSAGE_LOAD_DIRECTION.PREV && firstMessageId && (hasPrevMessages || hasPrevCached)) {
+        loading = true;
         dispatch(loadMoreMessagesAC(channel.id, limit, direction, firstMessageId, hasPrevMessages));
       } else if (direction === MESSAGE_LOAD_DIRECTION.NEXT && lastMessageId && (hasNextMessages || hasNextCached)) {
+        loading = true;
         dispatch(loadMoreMessagesAC(channel.id, limit, direction, lastMessageId, hasNextMessages));
       }
     }
@@ -32201,7 +33008,7 @@ var MessageList = function MessageList(_ref2) {
   }, [messages, channel === null || channel === void 0 ? void 0 : (_channel$lastMessage3 = channel.lastMessage) === null || _channel$lastMessage3 === void 0 ? void 0 : _channel$lastMessage3.id, scrollRef === null || scrollRef === void 0 ? void 0 : (_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTop, showScrollToNewMessageButton]);
   useEffect(function () {
     if (scrollToRepliedMessage) {
-      dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      loading = false;
       scrollRef.current.style.scrollBehavior = 'inherit';
       var repliedMessage = document.getElementById(scrollToRepliedMessage);
       if (repliedMessage) {
@@ -32275,7 +33082,7 @@ var MessageList = function MessageList(_ref2) {
         clearVisibleMessagesMap();
       }
       if (channel) {
-        dispatch(getMessagesAC(channel, true, undefined, undefined, true));
+        dispatch(getMessagesAC(channel, undefined, undefined, undefined, true));
       }
       if (channel.id) {
         if (channel.newMessageCount && channel.newMessageCount > 0) {
@@ -32317,7 +33124,7 @@ var MessageList = function MessageList(_ref2) {
         setShouldPreserveScroll(true);
       }
     }
-    if (messagesLoading) {
+    if (loading) {
       if (loadDirection !== 'next') {
         var lastVisibleMessage = document.getElementById(lastVisibleMessageId);
         if (lastVisibleMessage) {
@@ -32327,7 +33134,7 @@ var MessageList = function MessageList(_ref2) {
         }
         if (loadFromServer) {
           setTimeout(function () {
-            dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+            loading = false;
             loadFromServer = false;
             nextDisable = false;
             if (shouldLoadMessages === 'prev' && messagesIndexMap[lastVisibleMessageId] < 15) {
@@ -32338,7 +33145,7 @@ var MessageList = function MessageList(_ref2) {
             }
           }, 50);
         } else {
-          dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+          loading = false;
           if (shouldLoadMessages === 'prev') {
             handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
             shouldLoadMessages = '';
@@ -32355,7 +33162,7 @@ var MessageList = function MessageList(_ref2) {
           scrollRef.current.scrollTop = _lastVisibleMessage.offsetTop - scrollRef.current.offsetHeight + _lastVisibleMessage.offsetHeight;
           scrollRef.current.style.scrollBehavior = 'smooth';
         }
-        dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+        loading = false;
         prevDisable = false;
         if (shouldLoadMessages === 'prev') {
           handleLoadMoreMessages(MESSAGE_LOAD_DIRECTION.PREV, LOAD_MAX_MESSAGE_COUNT);
@@ -32387,7 +33194,7 @@ var MessageList = function MessageList(_ref2) {
   useEffect(function () {
     log.info('connection status is changed.. .... ', connectionStatus, 'channel  ... ', channel);
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
-      dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
+      loading = false;
       prevDisable = false;
       nextDisable = false;
       clearMessagesMap();
@@ -32694,7 +33501,7 @@ var MessageTopDate = styled.div(_templateObject4$o || (_templateObject4$o = _tag
 }, function (props) {
   return props.dateDividerTextColor;
 }, function (props) {
-  return props.dateDividerBackgroundColor + "40";
+  return props.dateDividerBackgroundColor + "66";
 }, function (props) {
   return props.dateDividerBorder;
 }, function (props) {
@@ -32734,7 +33541,7 @@ var NoMessagesContainer = styled.div(_templateObject9$c || (_templateObject9$c =
 var NoMessagesTitle = styled.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.p(_templateObject1$7 || (_templateObject1$7 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
+var NoMessagesText = styled.p(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  text-align: center;\n  font-feature-settings:\n    'clig' off,\n    'liga' off;\n  font-family: Inter, sans-serif;\n  font-size: 15px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
 
@@ -34738,19 +35545,19 @@ var AudioRecord = function AudioRecord(_ref) {
   }, [currentRecordedFile]);
   var dispatch = useDispatch();
   var handleStartRecording = function handleStartRecording() {
-    dispatch(sendRecordingAC(true));
+    dispatch(sendRecordingAC(true, currentChannelId));
     if (sendingInterval) {
       clearInterval(sendingInterval);
       setSendingInterval(null);
       return;
     }
     var interval = setInterval(function () {
-      dispatch(sendRecordingAC(true));
+      dispatch(sendRecordingAC(true, currentChannelId));
     }, 1000);
     setSendingInterval(interval);
   };
   var handleStopRecording = function handleStopRecording() {
-    dispatch(sendRecordingAC(false));
+    dispatch(sendRecordingAC(false, currentChannelId));
     if (sendingInterval) {
       clearInterval(sendingInterval);
       setSendingInterval(null);
@@ -34904,10 +35711,9 @@ var AudioRecord = function AudioRecord(_ref) {
       return Promise.resolve(_catch(function () {
         var _wavesurfer$current3;
         function _temp3(_result3) {
+          var _wavesurfer$current$i, _wavesurfer$current$i2;
           if (_exit) return _result3;
-          if (draft) {
-            return;
-          }
+          setCurrentTime(((_wavesurfer$current$i = wavesurfer.current[id]) === null || _wavesurfer$current$i === void 0 ? void 0 : (_wavesurfer$current$i2 = _wavesurfer$current$i.decodedData) === null || _wavesurfer$current$i2 === void 0 ? void 0 : _wavesurfer$current$i2.duration) || 0);
           wavesurfer.current[id].on('ready', function () {
             setRecordingIsReadyToPlay(true);
             var audioDuration = wavesurfer.current[id].getDuration();
@@ -35019,7 +35825,6 @@ var AudioRecord = function AudioRecord(_ref) {
     recorder.stop().getMp3().then(function (_ref4) {
       var buffer = _ref4[0],
         blob = _ref4[1];
-      setCurrentTime(0);
       var file = new File(buffer, 'record.mp3', {
         type: blob.type,
         lastModified: Date.now()
@@ -35085,15 +35890,12 @@ var AudioRecord = function AudioRecord(_ref) {
     if ((_wavesurfer$current5 = wavesurfer.current) !== null && _wavesurfer$current5 !== void 0 && _wavesurfer$current5[cId || currentChannelId]) {
       if (!wavesurfer.current[cId || currentChannelId].isPlaying()) {
         setPlayAudio(true);
-        handleStartRecording();
         intervalRef.current[cId || currentChannelId] = setInterval(function () {
           var currentTime = wavesurfer.current[cId || currentChannelId].getCurrentTime();
           if (currentTime >= 0) {
             setCurrentTime(currentTime);
           }
         }, 10);
-      } else {
-        handleStopRecording();
       }
       wavesurfer.current[cId || currentChannelId].playPause();
     }
@@ -35204,11 +36006,12 @@ var AudioRecord = function AudioRecord(_ref) {
       setShowRecording(false);
       setStartRecording(false);
       setPlayAudio(false);
-      setCurrentTime(0);
       var audioRecording = getAudioRecordingFromMap(channelId);
       setRecordedFile(audioRecording || null);
       setRecordingIsReadyToPlay(!!audioRecording);
     }
+    setCurrentTime(0);
+    handleStopRecording();
     setCurrentChannelId(channelId);
   }, [channelId]);
   return /*#__PURE__*/React__default.createElement(Container$j, {
@@ -35323,7 +36126,7 @@ var RecordingAnimation = function RecordingAnimation(_ref2) {
   }));
 };
 
-var _templateObject$J, _templateObject2$E, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$8, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
+var _templateObject$J, _templateObject2$E, _templateObject3$x, _templateObject4$s, _templateObject5$o, _templateObject6$k, _templateObject7$i, _templateObject8$g, _templateObject9$d, _templateObject0$c, _templateObject1$9, _templateObject10$5, _templateObject11$5, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$1, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -35753,6 +36556,18 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var handleEditMessage = function handleEditMessage() {
     var messageTexToSend = editMessageText.trim();
     if (messageTexToSend) {
+      var linkAttachment;
+      if (messageTexToSend) {
+        var linkify = new LinkifyIt();
+        var match = linkify.match(messageTexToSend);
+        if (match) {
+          linkAttachment = {
+            type: attachmentTypes.link,
+            data: match[0].url,
+            upload: false
+          };
+        }
+      }
       var mentionedMembersPositions = [];
       var mentionMembersToSend = [];
       if (mentionedMembers && mentionedMembers.length) {
@@ -35772,7 +36587,9 @@ var SendMessageInput = function SendMessageInput(_ref3) {
           });
         }
       }
-      var messageToSend = _extends({}, messageToEdit, {
+      var messageToSend = _extends({}, messageToEdit, linkAttachment ? {
+        attachments: [linkAttachment]
+      } : {}, {
         metadata: mentionedMembersPositions,
         bodyAttributes: messageBodyAttributes,
         mentionedUsers: mentionMembersToSend,
@@ -36232,7 +37049,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
             }
             var dataFromDb;
             var _temp11 = _catch(function () {
-              return Promise.resolve(_getDataFromDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, checksumHash, 'checksum')).then(function (_getDataFromDB) {
+              return Promise.resolve(getDataFromDB(DB_NAMES.FILES_STORAGE, DB_STORE_NAMES.ATTACHMENTS, checksumHash, 'checksum')).then(function (_getDataFromDB) {
                 dataFromDb = _getDataFromDB;
               });
             }, function (e) {
@@ -36439,14 +37256,16 @@ var SendMessageInput = function SendMessageInput(_ref3) {
           text: messageText,
           mentionedMembers: draftMessage.mentionedMembers,
           messageForReply: messageForReply,
-          editorState: realEditorState
+          editorState: realEditorState,
+          bodyAttributes: messageBodyAttributes
         });
       } else {
         setDraftMessageToMap(activeChannel.id, {
           text: messageText,
           mentionedMembers: mentionedMembers,
           messageForReply: messageForReply,
-          editorState: realEditorState
+          editorState: realEditorState,
+          bodyAttributes: messageBodyAttributes
         });
       }
       if (!listenerIsAdded) {
@@ -36467,16 +37286,18 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       setDraftMessageToMap(activeChannel.id, {
         text: messageText,
         mentionedMembers: mentionedMembers,
-        messageForReply: messageForReply
+        messageForReply: messageForReply,
+        bodyAttributes: messageBodyAttributes
       });
     }
   }, [mentionedMembers]);
   useEffect(function () {
     if (connectionStatus === CONNECTION_STATUS.CONNECTED) {
+      var pendingMessagesMap = getPendingMessagesMap();
+      var pendingMessagesMapCopy = JSON.parse(JSON.stringify(pendingMessagesMap));
       setTimeout(function () {
-        var pendingMessagesMap = getPendingMessagesMap();
-        Object.keys(pendingMessagesMap).forEach(function (key) {
-          pendingMessagesMap[key].forEach(function (msg) {
+        Object.keys(pendingMessagesMapCopy).forEach(function (key) {
+          pendingMessagesMapCopy[key].forEach(function (msg) {
             dispatch(resendMessageAC(msg, key, connectionStatus));
           });
         });
@@ -36521,7 +37342,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       setDraftMessageToMap(activeChannel.id, {
         text: messageText,
         mentionedMembers: mentionedMembers,
-        messageForReply: messageForReply
+        messageForReply: messageForReply,
+        bodyAttributes: messageBodyAttributes
       });
     }
     if (messageForReply && messageToEdit) {
@@ -36572,16 +37394,21 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }
     };
   }, []);
-  var filteredTypingOrRecordingIndicator = useMemo(function () {
-    return typingOrRecordingIndicator ? Object.values(typingOrRecordingIndicator).filter(function (item) {
+  var typingOrRecording = useMemo(function () {
+    var dataValues = typingOrRecordingIndicator ? Object.values(typingOrRecordingIndicator) : [];
+    var filteredItems = dataValues.filter(function (item) {
       return item.typingState || item.recordingState;
-    }) : [];
-  }, [typingOrRecordingIndicator]);
-  var isTyping = useMemo(function () {
-    return !!filteredTypingOrRecordingIndicator.find(function (item) {
-      return item.typingState;
     });
-  }, [filteredTypingOrRecordingIndicator]);
+    return {
+      items: filteredItems,
+      isTyping: !!filteredItems.find(function (item) {
+        return item.typingState;
+      }),
+      isRecording: !!filteredItems.find(function (item) {
+        return item.recordingState;
+      })
+    };
+  }, [typingOrRecordingIndicator]);
   var formatTypingIndicatorText = function formatTypingIndicatorText(users, maxShownUsers) {
     if (maxShownUsers === void 0) {
       maxShownUsers = 3;
@@ -36590,7 +37417,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     if (users.length === 1) {
       var _user = users[0];
       var userName = makeUsername(getFromContacts && _user.from && contactsMap[_user.from.id], _user.from, getFromContacts);
-      return "" + userName + (isTyping ? activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is typing' : '' : activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is recording' : '');
+      return "" + userName + (typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping ? activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is typing' : '' : activeChannel.type === DEFAULT_CHANNEL_TYPE.DIRECT ? ' is recording' : '');
     }
     if (users.length <= maxShownUsers) {
       var userNames = users.map(function (user) {
@@ -36660,8 +37487,8 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   }, "Join")) : (activeChannel.type === DEFAULT_CHANNEL_TYPE.BROADCAST || activeChannel.type === DEFAULT_CHANNEL_TYPE.PUBLIC ? !(activeChannel.userRole === 'admin' || activeChannel.userRole === 'owner') : activeChannel.type !== DEFAULT_CHANNEL_TYPE.DIRECT && !checkActionPermission('sendMessage')) ? (/*#__PURE__*/React__default.createElement(ReadOnlyCont, {
     color: textPrimary,
     iconColor: accentColor
-  }, /*#__PURE__*/React__default.createElement(SvgEye, null), " Read only")) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TypingIndicator$1, null, filteredTypingOrRecordingIndicator.length > 0 && (CustomTypingIndicator ? (/*#__PURE__*/React__default.createElement(CustomTypingIndicator, {
-    from: filteredTypingOrRecordingIndicator.map(function (item) {
+  }, /*#__PURE__*/React__default.createElement(SvgEye, null), " Read only")) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TypingIndicator$1, null, (typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.items.length) > 0 && (CustomTypingIndicator ? (/*#__PURE__*/React__default.createElement(CustomTypingIndicator, {
+    from: typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.items.map(function (item) {
       return {
         id: item.from.id,
         name: item.from.name,
@@ -36671,7 +37498,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     })
   })) : (/*#__PURE__*/React__default.createElement(TypingIndicatorCont, null, /*#__PURE__*/React__default.createElement(TypingFrom, {
     color: textSecondary
-  }, formatTypingIndicatorText(filteredTypingOrRecordingIndicator, 3)), isTyping ? (/*#__PURE__*/React__default.createElement(TypingAnimation, {
+  }, formatTypingIndicatorText(typingOrRecording === null || typingOrRecording === void 0 ? void 0 : typingOrRecording.items, 3)), typingOrRecording !== null && typingOrRecording !== void 0 && typingOrRecording.isTyping ? (/*#__PURE__*/React__default.createElement(TypingAnimation, {
     borderColor: iconInactive
   }, /*#__PURE__*/React__default.createElement(DotOne, null), /*#__PURE__*/React__default.createElement(DotTwo, null), /*#__PURE__*/React__default.createElement(DotThree, null))) : (/*#__PURE__*/React__default.createElement(RecordingAnimation, {
     borderColor: iconInactive
@@ -36942,7 +37769,7 @@ var AddAttachmentIcon = styled.span(_templateObject0$c || (_templateObject0$c =
 }, function (props) {
   return props.hoverColor;
 });
-var SendMessageInputContainer = styled.div(_templateObject1$8 || (_templateObject1$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
+var SendMessageInputContainer = styled.div(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  position: relative;\n  min-height: ", ";\n  box-sizing: border-box;\n  border-radius: ", ";\n\n  & .dropdown-trigger.open {\n    color: #ccc;\n\n    & ", " {\n      & > svg {\n        color: ", ";\n      }\n    ;\n    }\n  }\n}\n"])), function (props) {
   return props.minHeight || '36px';
 }, function (props) {
   return props.messageForReply ? '0 0 4px 4px' : '4px';
@@ -37238,7 +38065,7 @@ function SvgUnpin(props) {
   })));
 }
 
-var _templateObject$K, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$e, _templateObject0$d, _templateObject1$9, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
+var _templateObject$K, _templateObject2$F, _templateObject3$y, _templateObject4$t, _templateObject5$p, _templateObject6$l, _templateObject7$j, _templateObject8$h, _templateObject9$e, _templateObject0$d, _templateObject1$a, _templateObject10$6, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$3, _templateObject16$3;
 var Actions = function Actions(_ref) {
   var _channel$metadata;
   var setActionsHeight = _ref.setActionsHeight,
@@ -37717,7 +38544,7 @@ var DefaultStarIcon = styled(SvgStar)(_templateObject7$j || (_templateObject7$j
 var DefaultUnpinIcon = styled(SvgUnpin)(_templateObject8$h || (_templateObject8$h = _taggedTemplateLiteralLoose([""])));
 var DefaultPinIcon = styled(SvgPin)(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose([""])));
 var DefaultMarkAsRead = styled(SvgMarkAsRead)(_templateObject0$d || (_templateObject0$d = _taggedTemplateLiteralLoose([""])));
-var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$9 || (_templateObject1$9 = _taggedTemplateLiteralLoose([""])));
+var DefaultMarkAsUnRead = styled(SvgMarkAsUnRead)(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose([""])));
 var DefaultBlockIcon = styled(SvgBlockChannel)(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose([""])));
 var DefaultReportIcon = styled(SvgReport)(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose([""])));
 var DefaultClearIcon = styled(SvgClear)(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose([""])));
@@ -38441,7 +39268,7 @@ var Files = function Files(_ref) {
       text: '',
       styles: {
         background: {
-          fill: overlayBackground2 + "40"
+          fill: overlayBackground2 + "66"
         },
         path: {
           stroke: accentColor,
@@ -39263,7 +40090,7 @@ var EditChannel = function EditChannel(_ref) {
   })));
 };
 
-var _templateObject$V, _templateObject2$O, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$g, _templateObject0$e, _templateObject1$a, _templateObject10$7;
+var _templateObject$V, _templateObject2$O, _templateObject3$F, _templateObject4$z, _templateObject5$u, _templateObject6$p, _templateObject7$n, _templateObject8$l, _templateObject9$g, _templateObject0$e, _templateObject1$b, _templateObject10$7;
 var Details = function Details(_ref) {
   var _activeChannel$metada;
   var detailsTitleText = _ref.detailsTitleText,
@@ -39379,7 +40206,8 @@ var Details = function Details(_ref) {
     tabItemsLineHeight = _ref.tabItemsLineHeight,
     tabItemsMinWidth = _ref.tabItemsMinWidth,
     backgroundColor = _ref.backgroundColor,
-    bordersColor = _ref.bordersColor;
+    bordersColor = _ref.bordersColor,
+    showPhoneNumber = _ref.showPhoneNumber;
   var _useColor = useColors(),
     accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
@@ -39533,7 +40361,7 @@ var Details = function Details(_ref) {
     color: textSecondary,
     fontSize: channelMembersFontSize,
     lineHeight: channelMembersLineHeight
-  }, hideUserPresence && directChannelUser && hideUserPresence(directChannelUser) ? '' : directChannelUser && directChannelUser.presence && (directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
+  }, showPhoneNumber ? "+" + directChannelUser.id : hideUserPresence && directChannelUser && hideUserPresence(directChannelUser) ? '' : directChannelUser && directChannelUser.presence && (directChannelUser.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : directChannelUser.presence.lastActiveAt && userLastActiveDateFormat(directChannelUser.presence.lastActiveAt)))) : (/*#__PURE__*/React__default.createElement(SubTitle, {
     color: textSecondary,
     fontSize: channelMembersFontSize,
     lineHeight: channelMembersLineHeight
@@ -39695,7 +40523,7 @@ var ChannelName$1 = styled(SectionHeader)(_templateObject0$e || (_templateObject
 }, function (props) {
   return props.uppercase && 'uppercase';
 });
-var ChannelNameWrapper = styled.div(_templateObject1$a || (_templateObject1$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
+var ChannelNameWrapper = styled.div(_templateObject1$b || (_templateObject1$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 var EditButton = styled.span(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  margin-left: 6px;\n  cursor: pointer;\n  color: #b2b6be;\n"])));
 
 var _templateObject$W;
@@ -39809,7 +40637,8 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     tabItemsFontSize = _ref.tabItemsFontSize,
     tabItemsLineHeight = _ref.tabItemsLineHeight,
     tabItemsMinWidth = _ref.tabItemsMinWidth,
-    bordersColor = _ref.bordersColor;
+    bordersColor = _ref.bordersColor,
+    showPhoneNumber = _ref.showPhoneNumber;
   var channelDetailsIsOpen = useSelector(channelInfoIsOpenSelector, shallowEqual);
   useEffect(function () {
     setShowChannelDetails(true);
@@ -39922,7 +40751,8 @@ var ChannelDetailsContainer = function ChannelDetailsContainer(_ref) {
     addMemberIcon: addMemberIcon,
     tabItemsFontSize: tabItemsFontSize,
     tabItemsLineHeight: tabItemsLineHeight,
-    tabItemsMinWidth: tabItemsMinWidth
+    tabItemsMinWidth: tabItemsMinWidth,
+    showPhoneNumber: showPhoneNumber
   })));
 };
 var DetailsWrapper = styled.div(_templateObject$W || (_templateObject$W = _taggedTemplateLiteralLoose([""])));
@@ -39977,26 +40807,31 @@ var MessagesScrollToBottomButton = function MessagesScrollToBottomButton(_ref) {
   var showScrollToNewMessageButton = useSelector(showScrollToNewMessageButtonSelector);
   var messages = useSelector(activeChannelMessagesSelector) || [];
   var handleScrollToBottom = function handleScrollToBottom() {
-    dispatch(markMessagesAsReadAC(channel.id, [channel.lastMessage.id]));
-    handleScrollToRepliedMessage(channel.lastMessage.id);
+    var user = getClient().user;
+    if (channel.lastMessage.user.id !== user.id) {
+      dispatch(markMessagesAsReadAC(channel.id, [channel.lastMessage.id]));
+    }
+    handleScrollToLastMessage(channel.lastMessage.id);
   };
-  var handleScrollToRepliedMessage = function handleScrollToRepliedMessage(messageId) {
+  var handleScrollToLastMessage = function handleScrollToLastMessage(messageId) {
     try {
+      dispatch(scrollToNewMessageAC(true, false, false));
       if (messages.findIndex(function (msg) {
         return msg.id === messageId;
       }) >= 10) {
+        dispatch(setMessagesLoadingStateAC(LOADING_STATE.LOADING));
         var repliedMessage = document.getElementById(messageId);
         if (repliedMessage) {
           var scrollRef = document.getElementById('scrollableDiv');
           if (scrollRef) {
             scrollRef.scrollTo({
-              top: 0,
+              top: 1000,
               behavior: 'smooth'
             });
           }
         }
       } else {
-        dispatch(getMessagesAC(channel, true, messageId));
+        dispatch(getMessagesAC(channel, true, messageId, undefined, undefined, false));
       }
       return Promise.resolve();
     } catch (e) {