sceyt-chat-react-uikit 1.6.9-beta.5 → 1.6.9-beta.7

package/index.js

@@ -47,8 +47,8 @@ var LexicalTypeaheadMenuPlugin = require('@lexical/react/LexicalTypeaheadMenuPlu
 var offset = require('@lexical/offset');
 var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
 
-/** A function that accepts a potential "extra argument" value to be injected later,
- * and returns an instance of the thunk middleware that uses that value
+/** A function that accepts a potential "extra argument" value to be injected later,
+ * and returns an instance of the thunk middleware that uses that value
  */
 function createThunkMiddleware(extraArgument) {
   // Standard Redux middleware definition pattern:
@@ -79,522 +79,522 @@ var thunk = createThunkMiddleware(); // Attach the factory function so users can
 
 thunk.withExtraArgument = createThunkMiddleware;
 
-var __extends = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = function (obj, key, value) { return key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value: value }) : obj[key] = value; };
-var __spreadValues = function (a, b) {
-    for (var prop in b || (b = {}))
-        if (__hasOwnProp.call(b, prop))
-            __defNormalProp(a, prop, b[prop]);
-    if (__getOwnPropSymbols)
-        for (var _i = 0, _c = __getOwnPropSymbols(b); _i < _c.length; _i++) {
-            var prop = _c[_i];
-            if (__propIsEnum.call(b, prop))
-                __defNormalProp(a, prop, b[prop]);
-        }
-    return a;
-};
-var composeWithDevTools = typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : function () {
-    if (arguments.length === 0)
-        return void 0;
-    if (typeof arguments[0] === "object")
-        return redux.compose;
-    return redux.compose.apply(null, arguments);
-};
-// src/isPlainObject.ts
-function isPlainObject(value) {
-    if (typeof value !== "object" || value === null)
-        return false;
-    var proto = Object.getPrototypeOf(value);
-    if (proto === null)
-        return true;
-    var baseProto = proto;
-    while (Object.getPrototypeOf(baseProto) !== null) {
-        baseProto = Object.getPrototypeOf(baseProto);
-    }
-    return proto === baseProto;
-}
-// src/tsHelpers.ts
-var hasMatchFunction = function (v) {
-    return v && typeof v.match === "function";
-};
-function isActionCreator(action) {
-    return typeof action === "function" && "type" in action && hasMatchFunction(action);
-}
-// src/actionCreatorInvariantMiddleware.ts
-function getMessage(type) {
-    var splitType = type ? ("" + type).split("/") : [];
-    var actionName = splitType[splitType.length - 1] || "actionCreator";
-    return "Detected an action creator with type \"" + (type || "unknown") + "\" being dispatched. \nMake sure you're calling the action creator before dispatching, i.e. `dispatch(" + actionName + "())` instead of `dispatch(" + actionName + ")`. This is necessary even if the action has no payload.";
-}
-function createActionCreatorInvariantMiddleware(options) {
-    if (options === void 0) { options = {}; }
-    if (process.env.NODE_ENV === "production") {
-        return function () { return function (next) { return function (action) { return next(action); }; }; };
-    }
-    var _c = options.isActionCreator, isActionCreator2 = _c === void 0 ? isActionCreator : _c;
-    return function () { return function (next) { return function (action) {
-        if (isActionCreator2(action)) {
-            console.warn(getMessage(action.type));
-        }
-        return next(action);
-    }; }; };
-}
-function getTimeMeasureUtils(maxDelay, fnName) {
-    var elapsed = 0;
-    return {
-        measureTime: function (fn) {
-            var started = Date.now();
-            try {
-                return fn();
-            }
-            finally {
-                var finished = Date.now();
-                elapsed += finished - started;
-            }
-        },
-        warnIfExceeded: function () {
-            if (elapsed > maxDelay) {
-                console.warn(fnName + " took " + elapsed + "ms, which is more than the warning threshold of " + maxDelay + "ms. \nIf your state or actions are very large, you may want to disable the middleware as it might cause too much of a slowdown in development mode. See https://redux-toolkit.js.org/api/getDefaultMiddleware for instructions.\nIt is disabled in production builds, so you don't need to worry about that.");
-            }
-        }
-    };
-}
-var MiddlewareArray = /** @class */ (function (_super) {
-    __extends(MiddlewareArray, _super);
-    function MiddlewareArray() {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var _this = _super.apply(this, args) || this;
-        Object.setPrototypeOf(_this, MiddlewareArray.prototype);
-        return _this;
-    }
-    Object.defineProperty(MiddlewareArray, Symbol.species, {
-        get: function () {
-            return MiddlewareArray;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MiddlewareArray.prototype.concat = function () {
-        var arr = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            arr[_i] = arguments[_i];
-        }
-        return _super.prototype.concat.apply(this, arr);
-    };
-    MiddlewareArray.prototype.prepend = function () {
-        var arr = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            arr[_i] = arguments[_i];
-        }
-        if (arr.length === 1 && Array.isArray(arr[0])) {
-            return new (MiddlewareArray.bind.apply(MiddlewareArray, __spreadArray([void 0], arr[0].concat(this))))();
-        }
-        return new (MiddlewareArray.bind.apply(MiddlewareArray, __spreadArray([void 0], arr.concat(this))))();
-    };
-    return MiddlewareArray;
-}(Array));
-var EnhancerArray = /** @class */ (function (_super) {
-    __extends(EnhancerArray, _super);
-    function EnhancerArray() {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var _this = _super.apply(this, args) || this;
-        Object.setPrototypeOf(_this, EnhancerArray.prototype);
-        return _this;
-    }
-    Object.defineProperty(EnhancerArray, Symbol.species, {
-        get: function () {
-            return EnhancerArray;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    EnhancerArray.prototype.concat = function () {
-        var arr = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            arr[_i] = arguments[_i];
-        }
-        return _super.prototype.concat.apply(this, arr);
-    };
-    EnhancerArray.prototype.prepend = function () {
-        var arr = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            arr[_i] = arguments[_i];
-        }
-        if (arr.length === 1 && Array.isArray(arr[0])) {
-            return new (EnhancerArray.bind.apply(EnhancerArray, __spreadArray([void 0], arr[0].concat(this))))();
-        }
-        return new (EnhancerArray.bind.apply(EnhancerArray, __spreadArray([void 0], arr.concat(this))))();
-    };
-    return EnhancerArray;
-}(Array));
-// src/immutableStateInvariantMiddleware.ts
-var isProduction = process.env.NODE_ENV === "production";
-var prefix = "Invariant failed";
-function invariant(condition, message) {
-    if (condition) {
-        return;
-    }
-    if (isProduction) {
-        throw new Error(prefix);
-    }
-    throw new Error(prefix + ": " + (message || ""));
-}
-function stringify(obj, serializer, indent, decycler) {
-    return JSON.stringify(obj, getSerialize(serializer, decycler), indent);
-}
-function getSerialize(serializer, decycler) {
-    var stack = [], keys = [];
-    if (!decycler)
-        decycler = function (_, value) {
-            if (stack[0] === value)
-                return "[Circular ~]";
-            return "[Circular ~." + keys.slice(0, stack.indexOf(value)).join(".") + "]";
-        };
-    return function (key, value) {
-        if (stack.length > 0) {
-            var thisPos = stack.indexOf(this);
-            ~thisPos ? stack.splice(thisPos + 1) : stack.push(this);
-            ~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key);
-            if (~stack.indexOf(value))
-                value = decycler.call(this, key, value);
-        }
-        else
-            stack.push(value);
-        return serializer == null ? value : serializer.call(this, key, value);
-    };
-}
-function isImmutableDefault(value) {
-    return typeof value !== "object" || value == null || Object.isFrozen(value);
-}
-function trackForMutations(isImmutable, ignorePaths, obj) {
-    var trackedProperties = trackProperties(isImmutable, ignorePaths, obj);
-    return {
-        detectMutations: function () {
-            return detectMutations(isImmutable, ignorePaths, trackedProperties, obj);
-        }
-    };
-}
-function trackProperties(isImmutable, ignorePaths, obj, path, checkedObjects) {
-    if (ignorePaths === void 0) { ignorePaths = []; }
-    if (path === void 0) { path = ""; }
-    if (checkedObjects === void 0) { checkedObjects = new Set(); }
-    var tracked = { value: obj };
-    if (!isImmutable(obj) && !checkedObjects.has(obj)) {
-        checkedObjects.add(obj);
-        tracked.children = {};
-        for (var key in obj) {
-            var childPath = path ? path + "." + key : key;
-            if (ignorePaths.length && ignorePaths.indexOf(childPath) !== -1) {
-                continue;
-            }
-            tracked.children[key] = trackProperties(isImmutable, ignorePaths, obj[key], childPath);
-        }
-    }
-    return tracked;
-}
-function detectMutations(isImmutable, ignoredPaths, trackedProperty, obj, sameParentRef, path) {
-    if (ignoredPaths === void 0) { ignoredPaths = []; }
-    if (sameParentRef === void 0) { sameParentRef = false; }
-    if (path === void 0) { path = ""; }
-    var prevObj = trackedProperty ? trackedProperty.value : void 0;
-    var sameRef = prevObj === obj;
-    if (sameParentRef && !sameRef && !Number.isNaN(obj)) {
-        return { wasMutated: true, path: path };
-    }
-    if (isImmutable(prevObj) || isImmutable(obj)) {
-        return { wasMutated: false };
-    }
-    var keysToDetect = {};
-    for (var key in trackedProperty.children) {
-        keysToDetect[key] = true;
-    }
-    for (var key in obj) {
-        keysToDetect[key] = true;
-    }
-    var hasIgnoredPaths = ignoredPaths.length > 0;
-    var _loop_1 = function (key) {
-        var nestedPath = path ? path + "." + key : key;
-        if (hasIgnoredPaths) {
-            var hasMatches = ignoredPaths.some(function (ignored) {
-                if (ignored instanceof RegExp) {
-                    return ignored.test(nestedPath);
-                }
-                return nestedPath === ignored;
-            });
-            if (hasMatches) {
-                return "continue";
-            }
-        }
-        var result = detectMutations(isImmutable, ignoredPaths, trackedProperty.children[key], obj[key], sameRef, nestedPath);
-        if (result.wasMutated) {
-            return { value: result };
-        }
-    };
-    for (var key in keysToDetect) {
-        var state_1 = _loop_1(key);
-        if (typeof state_1 === "object")
-            return state_1.value;
-    }
-    return { wasMutated: false };
-}
-function createImmutableStateInvariantMiddleware(options) {
-    if (options === void 0) { options = {}; }
-    if (process.env.NODE_ENV === "production") {
-        return function () { return function (next) { return function (action) { return next(action); }; }; };
-    }
-    var _c = options.isImmutable, isImmutable = _c === void 0 ? isImmutableDefault : _c, ignoredPaths = options.ignoredPaths, _d = options.warnAfter, warnAfter = _d === void 0 ? 32 : _d, ignore = options.ignore;
-    ignoredPaths = ignoredPaths || ignore;
-    var track = trackForMutations.bind(null, isImmutable, ignoredPaths);
-    return function (_c) {
-        var getState = _c.getState;
-        var state = getState();
-        var tracker = track(state);
-        var result;
-        return function (next) { return function (action) {
-            var measureUtils = getTimeMeasureUtils(warnAfter, "ImmutableStateInvariantMiddleware");
-            measureUtils.measureTime(function () {
-                state = getState();
-                result = tracker.detectMutations();
-                tracker = track(state);
-                invariant(!result.wasMutated, "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)");
-            });
-            var dispatchedAction = next(action);
-            measureUtils.measureTime(function () {
-                state = getState();
-                result = tracker.detectMutations();
-                tracker = track(state);
-                result.wasMutated && invariant(!result.wasMutated, "A state mutation was detected inside a dispatch, in the path: " + (result.path || "") + ". Take a look at the reducer(s) handling the action " + stringify(action) + ". (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)");
-            });
-            measureUtils.warnIfExceeded();
-            return dispatchedAction;
-        }; };
-    };
-}
-// src/serializableStateInvariantMiddleware.ts
-function isPlain(val) {
-    var type = typeof val;
-    return val == null || type === "string" || type === "boolean" || type === "number" || Array.isArray(val) || isPlainObject(val);
-}
-function findNonSerializableValue(value, path, isSerializable, getEntries, ignoredPaths, cache) {
-    if (path === void 0) { path = ""; }
-    if (isSerializable === void 0) { isSerializable = isPlain; }
-    if (ignoredPaths === void 0) { ignoredPaths = []; }
-    var foundNestedSerializable;
-    if (!isSerializable(value)) {
-        return {
-            keyPath: path || "<root>",
-            value: value
-        };
-    }
-    if (typeof value !== "object" || value === null) {
-        return false;
-    }
-    if (cache == null ? void 0 : cache.has(value))
-        return false;
-    var entries = getEntries != null ? getEntries(value) : Object.entries(value);
-    var hasIgnoredPaths = ignoredPaths.length > 0;
-    var _loop_2 = function (key, nestedValue) {
-        var nestedPath = path ? path + "." + key : key;
-        if (hasIgnoredPaths) {
-            var hasMatches = ignoredPaths.some(function (ignored) {
-                if (ignored instanceof RegExp) {
-                    return ignored.test(nestedPath);
-                }
-                return nestedPath === ignored;
-            });
-            if (hasMatches) {
-                return "continue";
-            }
-        }
-        if (!isSerializable(nestedValue)) {
-            return { value: {
-                    keyPath: nestedPath,
-                    value: nestedValue
-                } };
-        }
-        if (typeof nestedValue === "object") {
-            foundNestedSerializable = findNonSerializableValue(nestedValue, nestedPath, isSerializable, getEntries, ignoredPaths, cache);
-            if (foundNestedSerializable) {
-                return { value: foundNestedSerializable };
-            }
-        }
-    };
-    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
-        var _c = entries_1[_i], key = _c[0], nestedValue = _c[1];
-        var state_2 = _loop_2(key, nestedValue);
-        if (typeof state_2 === "object")
-            return state_2.value;
-    }
-    if (cache && isNestedFrozen(value))
-        cache.add(value);
-    return false;
-}
-function isNestedFrozen(value) {
-    if (!Object.isFrozen(value))
-        return false;
-    for (var _i = 0, _c = Object.values(value); _i < _c.length; _i++) {
-        var nestedValue = _c[_i];
-        if (typeof nestedValue !== "object" || nestedValue === null)
-            continue;
-        if (!isNestedFrozen(nestedValue))
-            return false;
-    }
-    return true;
-}
-function createSerializableStateInvariantMiddleware(options) {
-    if (options === void 0) { options = {}; }
-    if (process.env.NODE_ENV === "production") {
-        return function () { return function (next) { return function (action) { return next(action); }; }; };
-    }
-    var _c = options.isSerializable, isSerializable = _c === void 0 ? isPlain : _c, getEntries = options.getEntries, _d = options.ignoredActions, ignoredActions = _d === void 0 ? [] : _d, _e = options.ignoredActionPaths, ignoredActionPaths = _e === void 0 ? ["meta.arg", "meta.baseQueryMeta"] : _e, _f = options.ignoredPaths, ignoredPaths = _f === void 0 ? [] : _f, _g = options.warnAfter, warnAfter = _g === void 0 ? 32 : _g, _h = options.ignoreState, ignoreState = _h === void 0 ? false : _h, _j = options.ignoreActions, ignoreActions = _j === void 0 ? false : _j, _k = options.disableCache, disableCache = _k === void 0 ? false : _k;
-    var cache = !disableCache && WeakSet ? new WeakSet() : void 0;
-    return function (storeAPI) { return function (next) { return function (action) {
-        var result = next(action);
-        var measureUtils = getTimeMeasureUtils(warnAfter, "SerializableStateInvariantMiddleware");
-        if (!ignoreActions && !(ignoredActions.length && ignoredActions.indexOf(action.type) !== -1)) {
-            measureUtils.measureTime(function () {
-                var foundActionNonSerializableValue = findNonSerializableValue(action, "", isSerializable, getEntries, ignoredActionPaths, cache);
-                if (foundActionNonSerializableValue) {
-                    var keyPath = foundActionNonSerializableValue.keyPath, value = foundActionNonSerializableValue.value;
-                    console.error("A non-serializable value was detected in an action, in the path: `" + keyPath + "`. Value:", value, "\nTake a look at the logic that dispatched this action: ", action, "\n(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)", "\n(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)");
-                }
-            });
-        }
-        if (!ignoreState) {
-            measureUtils.measureTime(function () {
-                var state = storeAPI.getState();
-                var foundStateNonSerializableValue = findNonSerializableValue(state, "", isSerializable, getEntries, ignoredPaths, cache);
-                if (foundStateNonSerializableValue) {
-                    var keyPath = foundStateNonSerializableValue.keyPath, value = foundStateNonSerializableValue.value;
-                    console.error("A non-serializable value was detected in the state, in the path: `" + keyPath + "`. Value:", value, "\nTake a look at the reducer(s) handling this action type: " + action.type + ".\n(See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)");
-                }
-            });
-            measureUtils.warnIfExceeded();
-        }
-        return result;
-    }; }; };
-}
-// src/getDefaultMiddleware.ts
-function isBoolean(x) {
-    return typeof x === "boolean";
-}
-function curryGetDefaultMiddleware() {
-    return function curriedGetDefaultMiddleware(options) {
-        return getDefaultMiddleware(options);
-    };
-}
-function getDefaultMiddleware(options) {
-    if (options === void 0) { options = {}; }
-    var _c = options.thunk, thunk$1 = _c === void 0 ? true : _c, _d = options.immutableCheck, immutableCheck = _d === void 0 ? true : _d, _e = options.serializableCheck, serializableCheck = _e === void 0 ? true : _e, _f = options.actionCreatorCheck, actionCreatorCheck = _f === void 0 ? true : _f;
-    var middlewareArray = new MiddlewareArray();
-    if (thunk$1) {
-        if (isBoolean(thunk$1)) {
-            middlewareArray.push(thunk);
-        }
-        else {
-            middlewareArray.push(thunk.withExtraArgument(thunk$1.extraArgument));
-        }
-    }
-    if (process.env.NODE_ENV !== "production") {
-        if (immutableCheck) {
-            var immutableOptions = {};
-            if (!isBoolean(immutableCheck)) {
-                immutableOptions = immutableCheck;
-            }
-            middlewareArray.unshift(createImmutableStateInvariantMiddleware(immutableOptions));
-        }
-        if (serializableCheck) {
-            var serializableOptions = {};
-            if (!isBoolean(serializableCheck)) {
-                serializableOptions = serializableCheck;
-            }
-            middlewareArray.push(createSerializableStateInvariantMiddleware(serializableOptions));
-        }
-        if (actionCreatorCheck) {
-            var actionCreatorOptions = {};
-            if (!isBoolean(actionCreatorCheck)) {
-                actionCreatorOptions = actionCreatorCheck;
-            }
-            middlewareArray.unshift(createActionCreatorInvariantMiddleware(actionCreatorOptions));
-        }
-    }
-    return middlewareArray;
-}
-// src/configureStore.ts
-var IS_PRODUCTION = process.env.NODE_ENV === "production";
-function configureStore(options) {
-    var curriedGetDefaultMiddleware = curryGetDefaultMiddleware();
-    var _c = options || {}, _d = _c.reducer, reducer = _d === void 0 ? void 0 : _d, _e = _c.middleware, middleware = _e === void 0 ? curriedGetDefaultMiddleware() : _e, _f = _c.devTools, devTools = _f === void 0 ? true : _f, _g = _c.preloadedState, preloadedState = _g === void 0 ? void 0 : _g, _h = _c.enhancers, enhancers = _h === void 0 ? void 0 : _h;
-    var rootReducer;
-    if (typeof reducer === "function") {
-        rootReducer = reducer;
-    }
-    else if (isPlainObject(reducer)) {
-        rootReducer = redux.combineReducers(reducer);
-    }
-    else {
-        throw new Error('"reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers');
-    }
-    var finalMiddleware = middleware;
-    if (typeof finalMiddleware === "function") {
-        finalMiddleware = finalMiddleware(curriedGetDefaultMiddleware);
-        if (!IS_PRODUCTION && !Array.isArray(finalMiddleware)) {
-            throw new Error("when using a middleware builder function, an array of middleware must be returned");
-        }
-    }
-    if (!IS_PRODUCTION && finalMiddleware.some(function (item) { return typeof item !== "function"; })) {
-        throw new Error("each middleware provided to configureStore must be a function");
-    }
-    var middlewareEnhancer = redux.applyMiddleware.apply(void 0, finalMiddleware);
-    var finalCompose = redux.compose;
-    if (devTools) {
-        finalCompose = composeWithDevTools(__spreadValues({
-            trace: !IS_PRODUCTION
-        }, typeof devTools === "object" && devTools));
-    }
-    var defaultEnhancers = new EnhancerArray(middlewareEnhancer);
-    var storeEnhancers = defaultEnhancers;
-    if (Array.isArray(enhancers)) {
-        storeEnhancers = __spreadArray([middlewareEnhancer], enhancers);
-    }
-    else if (typeof enhancers === "function") {
-        storeEnhancers = enhancers(defaultEnhancers);
-    }
-    var composedEnhancer = finalCompose.apply(void 0, storeEnhancers);
-    return redux.createStore(rootReducer, preloadedState, composedEnhancer);
-}
-var promise;
-var queueMicrotaskShim = typeof queueMicrotask === "function" ? queueMicrotask.bind(typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : globalThis) : function (cb) { return (promise || (promise = Promise.resolve())).then(cb).catch(function (err) { return setTimeout(function () {
-    throw err;
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from) {
+    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
+        to[j] = from[i];
+    return to;
+};
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = function (obj, key, value) { return key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value: value }) : obj[key] = value; };
+var __spreadValues = function (a, b) {
+    for (var prop in b || (b = {}))
+        if (__hasOwnProp.call(b, prop))
+            __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+        for (var _i = 0, _c = __getOwnPropSymbols(b); _i < _c.length; _i++) {
+            var prop = _c[_i];
+            if (__propIsEnum.call(b, prop))
+                __defNormalProp(a, prop, b[prop]);
+        }
+    return a;
+};
+var composeWithDevTools = typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : function () {
+    if (arguments.length === 0)
+        return void 0;
+    if (typeof arguments[0] === "object")
+        return redux.compose;
+    return redux.compose.apply(null, arguments);
+};
+// src/isPlainObject.ts
+function isPlainObject(value) {
+    if (typeof value !== "object" || value === null)
+        return false;
+    var proto = Object.getPrototypeOf(value);
+    if (proto === null)
+        return true;
+    var baseProto = proto;
+    while (Object.getPrototypeOf(baseProto) !== null) {
+        baseProto = Object.getPrototypeOf(baseProto);
+    }
+    return proto === baseProto;
+}
+// src/tsHelpers.ts
+var hasMatchFunction = function (v) {
+    return v && typeof v.match === "function";
+};
+function isActionCreator(action) {
+    return typeof action === "function" && "type" in action && hasMatchFunction(action);
+}
+// src/actionCreatorInvariantMiddleware.ts
+function getMessage(type) {
+    var splitType = type ? ("" + type).split("/") : [];
+    var actionName = splitType[splitType.length - 1] || "actionCreator";
+    return "Detected an action creator with type \"" + (type || "unknown") + "\" being dispatched. \nMake sure you're calling the action creator before dispatching, i.e. `dispatch(" + actionName + "())` instead of `dispatch(" + actionName + ")`. This is necessary even if the action has no payload.";
+}
+function createActionCreatorInvariantMiddleware(options) {
+    if (options === void 0) { options = {}; }
+    if (process.env.NODE_ENV === "production") {
+        return function () { return function (next) { return function (action) { return next(action); }; }; };
+    }
+    var _c = options.isActionCreator, isActionCreator2 = _c === void 0 ? isActionCreator : _c;
+    return function () { return function (next) { return function (action) {
+        if (isActionCreator2(action)) {
+            console.warn(getMessage(action.type));
+        }
+        return next(action);
+    }; }; };
+}
+function getTimeMeasureUtils(maxDelay, fnName) {
+    var elapsed = 0;
+    return {
+        measureTime: function (fn) {
+            var started = Date.now();
+            try {
+                return fn();
+            }
+            finally {
+                var finished = Date.now();
+                elapsed += finished - started;
+            }
+        },
+        warnIfExceeded: function () {
+            if (elapsed > maxDelay) {
+                console.warn(fnName + " took " + elapsed + "ms, which is more than the warning threshold of " + maxDelay + "ms. \nIf your state or actions are very large, you may want to disable the middleware as it might cause too much of a slowdown in development mode. See https://redux-toolkit.js.org/api/getDefaultMiddleware for instructions.\nIt is disabled in production builds, so you don't need to worry about that.");
+            }
+        }
+    };
+}
+var MiddlewareArray = /** @class */ (function (_super) {
+    __extends(MiddlewareArray, _super);
+    function MiddlewareArray() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var _this = _super.apply(this, args) || this;
+        Object.setPrototypeOf(_this, MiddlewareArray.prototype);
+        return _this;
+    }
+    Object.defineProperty(MiddlewareArray, Symbol.species, {
+        get: function () {
+            return MiddlewareArray;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MiddlewareArray.prototype.concat = function () {
+        var arr = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            arr[_i] = arguments[_i];
+        }
+        return _super.prototype.concat.apply(this, arr);
+    };
+    MiddlewareArray.prototype.prepend = function () {
+        var arr = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            arr[_i] = arguments[_i];
+        }
+        if (arr.length === 1 && Array.isArray(arr[0])) {
+            return new (MiddlewareArray.bind.apply(MiddlewareArray, __spreadArray([void 0], arr[0].concat(this))))();
+        }
+        return new (MiddlewareArray.bind.apply(MiddlewareArray, __spreadArray([void 0], arr.concat(this))))();
+    };
+    return MiddlewareArray;
+}(Array));
+var EnhancerArray = /** @class */ (function (_super) {
+    __extends(EnhancerArray, _super);
+    function EnhancerArray() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var _this = _super.apply(this, args) || this;
+        Object.setPrototypeOf(_this, EnhancerArray.prototype);
+        return _this;
+    }
+    Object.defineProperty(EnhancerArray, Symbol.species, {
+        get: function () {
+            return EnhancerArray;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    EnhancerArray.prototype.concat = function () {
+        var arr = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            arr[_i] = arguments[_i];
+        }
+        return _super.prototype.concat.apply(this, arr);
+    };
+    EnhancerArray.prototype.prepend = function () {
+        var arr = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            arr[_i] = arguments[_i];
+        }
+        if (arr.length === 1 && Array.isArray(arr[0])) {
+            return new (EnhancerArray.bind.apply(EnhancerArray, __spreadArray([void 0], arr[0].concat(this))))();
+        }
+        return new (EnhancerArray.bind.apply(EnhancerArray, __spreadArray([void 0], arr.concat(this))))();
+    };
+    return EnhancerArray;
+}(Array));
+// src/immutableStateInvariantMiddleware.ts
+var isProduction = process.env.NODE_ENV === "production";
+var prefix = "Invariant failed";
+function invariant(condition, message) {
+    if (condition) {
+        return;
+    }
+    if (isProduction) {
+        throw new Error(prefix);
+    }
+    throw new Error(prefix + ": " + (message || ""));
+}
+function stringify(obj, serializer, indent, decycler) {
+    return JSON.stringify(obj, getSerialize(serializer, decycler), indent);
+}
+function getSerialize(serializer, decycler) {
+    var stack = [], keys = [];
+    if (!decycler)
+        decycler = function (_, value) {
+            if (stack[0] === value)
+                return "[Circular ~]";
+            return "[Circular ~." + keys.slice(0, stack.indexOf(value)).join(".") + "]";
+        };
+    return function (key, value) {
+        if (stack.length > 0) {
+            var thisPos = stack.indexOf(this);
+            ~thisPos ? stack.splice(thisPos + 1) : stack.push(this);
+            ~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key);
+            if (~stack.indexOf(value))
+                value = decycler.call(this, key, value);
+        }
+        else
+            stack.push(value);
+        return serializer == null ? value : serializer.call(this, key, value);
+    };
+}
+function isImmutableDefault(value) {
+    return typeof value !== "object" || value == null || Object.isFrozen(value);
+}
+function trackForMutations(isImmutable, ignorePaths, obj) {
+    var trackedProperties = trackProperties(isImmutable, ignorePaths, obj);
+    return {
+        detectMutations: function () {
+            return detectMutations(isImmutable, ignorePaths, trackedProperties, obj);
+        }
+    };
+}
+function trackProperties(isImmutable, ignorePaths, obj, path, checkedObjects) {
+    if (ignorePaths === void 0) { ignorePaths = []; }
+    if (path === void 0) { path = ""; }
+    if (checkedObjects === void 0) { checkedObjects = new Set(); }
+    var tracked = { value: obj };
+    if (!isImmutable(obj) && !checkedObjects.has(obj)) {
+        checkedObjects.add(obj);
+        tracked.children = {};
+        for (var key in obj) {
+            var childPath = path ? path + "." + key : key;
+            if (ignorePaths.length && ignorePaths.indexOf(childPath) !== -1) {
+                continue;
+            }
+            tracked.children[key] = trackProperties(isImmutable, ignorePaths, obj[key], childPath);
+        }
+    }
+    return tracked;
+}
+function detectMutations(isImmutable, ignoredPaths, trackedProperty, obj, sameParentRef, path) {
+    if (ignoredPaths === void 0) { ignoredPaths = []; }
+    if (sameParentRef === void 0) { sameParentRef = false; }
+    if (path === void 0) { path = ""; }
+    var prevObj = trackedProperty ? trackedProperty.value : void 0;
+    var sameRef = prevObj === obj;
+    if (sameParentRef && !sameRef && !Number.isNaN(obj)) {
+        return { wasMutated: true, path: path };
+    }
+    if (isImmutable(prevObj) || isImmutable(obj)) {
+        return { wasMutated: false };
+    }
+    var keysToDetect = {};
+    for (var key in trackedProperty.children) {
+        keysToDetect[key] = true;
+    }
+    for (var key in obj) {
+        keysToDetect[key] = true;
+    }
+    var hasIgnoredPaths = ignoredPaths.length > 0;
+    var _loop_1 = function (key) {
+        var nestedPath = path ? path + "." + key : key;
+        if (hasIgnoredPaths) {
+            var hasMatches = ignoredPaths.some(function (ignored) {
+                if (ignored instanceof RegExp) {
+                    return ignored.test(nestedPath);
+                }
+                return nestedPath === ignored;
+            });
+            if (hasMatches) {
+                return "continue";
+            }
+        }
+        var result = detectMutations(isImmutable, ignoredPaths, trackedProperty.children[key], obj[key], sameRef, nestedPath);
+        if (result.wasMutated) {
+            return { value: result };
+        }
+    };
+    for (var key in keysToDetect) {
+        var state_1 = _loop_1(key);
+        if (typeof state_1 === "object")
+            return state_1.value;
+    }
+    return { wasMutated: false };
+}
+function createImmutableStateInvariantMiddleware(options) {
+    if (options === void 0) { options = {}; }
+    if (process.env.NODE_ENV === "production") {
+        return function () { return function (next) { return function (action) { return next(action); }; }; };
+    }
+    var _c = options.isImmutable, isImmutable = _c === void 0 ? isImmutableDefault : _c, ignoredPaths = options.ignoredPaths, _d = options.warnAfter, warnAfter = _d === void 0 ? 32 : _d, ignore = options.ignore;
+    ignoredPaths = ignoredPaths || ignore;
+    var track = trackForMutations.bind(null, isImmutable, ignoredPaths);
+    return function (_c) {
+        var getState = _c.getState;
+        var state = getState();
+        var tracker = track(state);
+        var result;
+        return function (next) { return function (action) {
+            var measureUtils = getTimeMeasureUtils(warnAfter, "ImmutableStateInvariantMiddleware");
+            measureUtils.measureTime(function () {
+                state = getState();
+                result = tracker.detectMutations();
+                tracker = track(state);
+                invariant(!result.wasMutated, "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)");
+            });
+            var dispatchedAction = next(action);
+            measureUtils.measureTime(function () {
+                state = getState();
+                result = tracker.detectMutations();
+                tracker = track(state);
+                result.wasMutated && invariant(!result.wasMutated, "A state mutation was detected inside a dispatch, in the path: " + (result.path || "") + ". Take a look at the reducer(s) handling the action " + stringify(action) + ". (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)");
+            });
+            measureUtils.warnIfExceeded();
+            return dispatchedAction;
+        }; };
+    };
+}
+// src/serializableStateInvariantMiddleware.ts
+function isPlain(val) {
+    var type = typeof val;
+    return val == null || type === "string" || type === "boolean" || type === "number" || Array.isArray(val) || isPlainObject(val);
+}
+function findNonSerializableValue(value, path, isSerializable, getEntries, ignoredPaths, cache) {
+    if (path === void 0) { path = ""; }
+    if (isSerializable === void 0) { isSerializable = isPlain; }
+    if (ignoredPaths === void 0) { ignoredPaths = []; }
+    var foundNestedSerializable;
+    if (!isSerializable(value)) {
+        return {
+            keyPath: path || "<root>",
+            value: value
+        };
+    }
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    if (cache == null ? void 0 : cache.has(value))
+        return false;
+    var entries = getEntries != null ? getEntries(value) : Object.entries(value);
+    var hasIgnoredPaths = ignoredPaths.length > 0;
+    var _loop_2 = function (key, nestedValue) {
+        var nestedPath = path ? path + "." + key : key;
+        if (hasIgnoredPaths) {
+            var hasMatches = ignoredPaths.some(function (ignored) {
+                if (ignored instanceof RegExp) {
+                    return ignored.test(nestedPath);
+                }
+                return nestedPath === ignored;
+            });
+            if (hasMatches) {
+                return "continue";
+            }
+        }
+        if (!isSerializable(nestedValue)) {
+            return { value: {
+                    keyPath: nestedPath,
+                    value: nestedValue
+                } };
+        }
+        if (typeof nestedValue === "object") {
+            foundNestedSerializable = findNonSerializableValue(nestedValue, nestedPath, isSerializable, getEntries, ignoredPaths, cache);
+            if (foundNestedSerializable) {
+                return { value: foundNestedSerializable };
+            }
+        }
+    };
+    for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+        var _c = entries_1[_i], key = _c[0], nestedValue = _c[1];
+        var state_2 = _loop_2(key, nestedValue);
+        if (typeof state_2 === "object")
+            return state_2.value;
+    }
+    if (cache && isNestedFrozen(value))
+        cache.add(value);
+    return false;
+}
+function isNestedFrozen(value) {
+    if (!Object.isFrozen(value))
+        return false;
+    for (var _i = 0, _c = Object.values(value); _i < _c.length; _i++) {
+        var nestedValue = _c[_i];
+        if (typeof nestedValue !== "object" || nestedValue === null)
+            continue;
+        if (!isNestedFrozen(nestedValue))
+            return false;
+    }
+    return true;
+}
+function createSerializableStateInvariantMiddleware(options) {
+    if (options === void 0) { options = {}; }
+    if (process.env.NODE_ENV === "production") {
+        return function () { return function (next) { return function (action) { return next(action); }; }; };
+    }
+    var _c = options.isSerializable, isSerializable = _c === void 0 ? isPlain : _c, getEntries = options.getEntries, _d = options.ignoredActions, ignoredActions = _d === void 0 ? [] : _d, _e = options.ignoredActionPaths, ignoredActionPaths = _e === void 0 ? ["meta.arg", "meta.baseQueryMeta"] : _e, _f = options.ignoredPaths, ignoredPaths = _f === void 0 ? [] : _f, _g = options.warnAfter, warnAfter = _g === void 0 ? 32 : _g, _h = options.ignoreState, ignoreState = _h === void 0 ? false : _h, _j = options.ignoreActions, ignoreActions = _j === void 0 ? false : _j, _k = options.disableCache, disableCache = _k === void 0 ? false : _k;
+    var cache = !disableCache && WeakSet ? new WeakSet() : void 0;
+    return function (storeAPI) { return function (next) { return function (action) {
+        var result = next(action);
+        var measureUtils = getTimeMeasureUtils(warnAfter, "SerializableStateInvariantMiddleware");
+        if (!ignoreActions && !(ignoredActions.length && ignoredActions.indexOf(action.type) !== -1)) {
+            measureUtils.measureTime(function () {
+                var foundActionNonSerializableValue = findNonSerializableValue(action, "", isSerializable, getEntries, ignoredActionPaths, cache);
+                if (foundActionNonSerializableValue) {
+                    var keyPath = foundActionNonSerializableValue.keyPath, value = foundActionNonSerializableValue.value;
+                    console.error("A non-serializable value was detected in an action, in the path: `" + keyPath + "`. Value:", value, "\nTake a look at the logic that dispatched this action: ", action, "\n(See https://redux.js.org/faq/actions#why-should-type-be-a-string-or-at-least-serializable-why-should-my-action-types-be-constants)", "\n(To allow non-serializable values see: https://redux-toolkit.js.org/usage/usage-guide#working-with-non-serializable-data)");
+                }
+            });
+        }
+        if (!ignoreState) {
+            measureUtils.measureTime(function () {
+                var state = storeAPI.getState();
+                var foundStateNonSerializableValue = findNonSerializableValue(state, "", isSerializable, getEntries, ignoredPaths, cache);
+                if (foundStateNonSerializableValue) {
+                    var keyPath = foundStateNonSerializableValue.keyPath, value = foundStateNonSerializableValue.value;
+                    console.error("A non-serializable value was detected in the state, in the path: `" + keyPath + "`. Value:", value, "\nTake a look at the reducer(s) handling this action type: " + action.type + ".\n(See https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializable-items-in-my-store-state)");
+                }
+            });
+            measureUtils.warnIfExceeded();
+        }
+        return result;
+    }; }; };
+}
+// src/getDefaultMiddleware.ts
+function isBoolean(x) {
+    return typeof x === "boolean";
+}
+function curryGetDefaultMiddleware() {
+    return function curriedGetDefaultMiddleware(options) {
+        return getDefaultMiddleware(options);
+    };
+}
+function getDefaultMiddleware(options) {
+    if (options === void 0) { options = {}; }
+    var _c = options.thunk, thunk$1 = _c === void 0 ? true : _c, _d = options.immutableCheck, immutableCheck = _d === void 0 ? true : _d, _e = options.serializableCheck, serializableCheck = _e === void 0 ? true : _e, _f = options.actionCreatorCheck, actionCreatorCheck = _f === void 0 ? true : _f;
+    var middlewareArray = new MiddlewareArray();
+    if (thunk$1) {
+        if (isBoolean(thunk$1)) {
+            middlewareArray.push(thunk);
+        }
+        else {
+            middlewareArray.push(thunk.withExtraArgument(thunk$1.extraArgument));
+        }
+    }
+    if (process.env.NODE_ENV !== "production") {
+        if (immutableCheck) {
+            var immutableOptions = {};
+            if (!isBoolean(immutableCheck)) {
+                immutableOptions = immutableCheck;
+            }
+            middlewareArray.unshift(createImmutableStateInvariantMiddleware(immutableOptions));
+        }
+        if (serializableCheck) {
+            var serializableOptions = {};
+            if (!isBoolean(serializableCheck)) {
+                serializableOptions = serializableCheck;
+            }
+            middlewareArray.push(createSerializableStateInvariantMiddleware(serializableOptions));
+        }
+        if (actionCreatorCheck) {
+            var actionCreatorOptions = {};
+            if (!isBoolean(actionCreatorCheck)) {
+                actionCreatorOptions = actionCreatorCheck;
+            }
+            middlewareArray.unshift(createActionCreatorInvariantMiddleware(actionCreatorOptions));
+        }
+    }
+    return middlewareArray;
+}
+// src/configureStore.ts
+var IS_PRODUCTION = process.env.NODE_ENV === "production";
+function configureStore(options) {
+    var curriedGetDefaultMiddleware = curryGetDefaultMiddleware();
+    var _c = options || {}, _d = _c.reducer, reducer = _d === void 0 ? void 0 : _d, _e = _c.middleware, middleware = _e === void 0 ? curriedGetDefaultMiddleware() : _e, _f = _c.devTools, devTools = _f === void 0 ? true : _f, _g = _c.preloadedState, preloadedState = _g === void 0 ? void 0 : _g, _h = _c.enhancers, enhancers = _h === void 0 ? void 0 : _h;
+    var rootReducer;
+    if (typeof reducer === "function") {
+        rootReducer = reducer;
+    }
+    else if (isPlainObject(reducer)) {
+        rootReducer = redux.combineReducers(reducer);
+    }
+    else {
+        throw new Error('"reducer" is a required argument, and must be a function or an object of functions that can be passed to combineReducers');
+    }
+    var finalMiddleware = middleware;
+    if (typeof finalMiddleware === "function") {
+        finalMiddleware = finalMiddleware(curriedGetDefaultMiddleware);
+        if (!IS_PRODUCTION && !Array.isArray(finalMiddleware)) {
+            throw new Error("when using a middleware builder function, an array of middleware must be returned");
+        }
+    }
+    if (!IS_PRODUCTION && finalMiddleware.some(function (item) { return typeof item !== "function"; })) {
+        throw new Error("each middleware provided to configureStore must be a function");
+    }
+    var middlewareEnhancer = redux.applyMiddleware.apply(void 0, finalMiddleware);
+    var finalCompose = redux.compose;
+    if (devTools) {
+        finalCompose = composeWithDevTools(__spreadValues({
+            trace: !IS_PRODUCTION
+        }, typeof devTools === "object" && devTools));
+    }
+    var defaultEnhancers = new EnhancerArray(middlewareEnhancer);
+    var storeEnhancers = defaultEnhancers;
+    if (Array.isArray(enhancers)) {
+        storeEnhancers = __spreadArray([middlewareEnhancer], enhancers);
+    }
+    else if (typeof enhancers === "function") {
+        storeEnhancers = enhancers(defaultEnhancers);
+    }
+    var composedEnhancer = finalCompose.apply(void 0, storeEnhancers);
+    return redux.createStore(rootReducer, preloadedState, composedEnhancer);
+}
+var promise;
+var queueMicrotaskShim = typeof queueMicrotask === "function" ? queueMicrotask.bind(typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : globalThis) : function (cb) { return (promise || (promise = Promise.resolve())).then(cb).catch(function (err) { return setTimeout(function () {
+    throw err;
 }, 0); }); };
 
 function _arrayLikeToArray(r, a) {
@@ -8336,15 +8336,25 @@ var getPendingMessagesMap = function getPendingMessagesMap() {
   return pendingMessagesMap;
 };
 var draftMessagesMap = {};
+var audioRecordingMap = {};
 var getDraftMessageFromMap = function getDraftMessageFromMap(channelId) {
   return draftMessagesMap[channelId];
 };
+var getAudioRecordingFromMap = function getAudioRecordingFromMap(channelId) {
+  return audioRecordingMap[channelId];
+};
 var checkDraftMessagesIsEmpty = function checkDraftMessagesIsEmpty() {
   return Object.keys(draftMessagesMap).length === 0;
 };
+var setAudioRecordingToMap = function setAudioRecordingToMap(channelId, audioRecording) {
+  audioRecordingMap[channelId] = audioRecording;
+};
 var removeDraftMessageFromMap = function removeDraftMessageFromMap(channelId) {
   delete draftMessagesMap[channelId];
 };
+var removeAudioRecordingFromMap = function removeAudioRecordingFromMap(channelId) {
+  delete audioRecordingMap[channelId];
+};
 var setDraftMessageToMap = function setDraftMessageToMap(channelId, draftMessage) {
   draftMessagesMap[channelId] = draftMessage;
 };
@@ -16303,7 +16313,7 @@ function sendMessage(action) {
   }, _marked$3, null, [[2, 80]]);
 }
 function sendTextMessage(action) {
-  var payload, message, connectionState, channelId, channel, sendMessageTid, SceytChatClient, createChannelData, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, hasNextMessages, messagesToAdd, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam;
+  var payload, message, connectionState, channelId, channel, sendMessageTid, SceytChatClient, createChannelData, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, messagesToAdd, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam;
   return _regeneratorRuntime().wrap(function sendTextMessage$(_context4) {
     while (1) switch (_context4.prev = _context4.next) {
       case 0:
@@ -16375,51 +16385,32 @@ function sendTextMessage(action) {
           pendingMessage.metadata = JSON.parse(pendingMessage.metadata);
         }
         _context4.next = 35;
-        return effects.select(messagesHasNextSelector);
+        return effects.call(addPendingMessage, message, pendingMessage, channel);
       case 35:
-        hasNextMessages = _context4.sent;
-        if (getHasNextCached()) {
-          _context4.next = 44;
-          break;
-        }
-        if (!hasNextMessages) {
-          _context4.next = 42;
-          break;
-        }
-        _context4.next = 40;
-        return effects.put(getMessagesAC(channel));
-      case 40:
-        _context4.next = 44;
-        break;
-      case 42:
-        _context4.next = 44;
-        return effects.put(addMessageAC(JSON.parse(JSON.stringify(pendingMessage))));
-      case 44:
-        addAllMessages([pendingMessage], MESSAGE_LOAD_DIRECTION.NEXT);
         messagesToAdd = getFromAllMessagesByMessageId('', '', true);
-        _context4.next = 48;
+        _context4.next = 38;
         return effects.put(setMessagesAC(JSON.parse(JSON.stringify(messagesToAdd))));
-      case 48:
+      case 38:
         if (!(connectionState === CONNECTION_STATUS.CONNECTED)) {
-          _context4.next = 74;
+          _context4.next = 64;
           break;
         }
         if (!sendMessageHandler) {
-          _context4.next = 55;
+          _context4.next = 45;
           break;
         }
-        _context4.next = 52;
+        _context4.next = 42;
         return effects.call(sendMessageHandler, messageToSend, channel.id);
-      case 52:
+      case 42:
         messageResponse = _context4.sent;
-        _context4.next = 58;
+        _context4.next = 48;
         break;
-      case 55:
-        _context4.next = 57;
+      case 45:
+        _context4.next = 47;
         return effects.call(channel.sendMessage, messageToSend);
-      case 57:
+      case 47:
         messageResponse = _context4.sent;
-      case 58:
+      case 48:
         messageUpdateData = {
           id: messageResponse.id,
           body: messageResponse.body,
@@ -16435,9 +16426,9 @@ function sendTextMessage(action) {
           repliedInThread: messageResponse.repliedInThread,
           createdAt: messageResponse.createdAt
         };
-        _context4.next = 61;
+        _context4.next = 51;
         return effects.put(updateMessageAC(messageToSend.tid, JSON.parse(JSON.stringify(messageUpdateData))));
-      case 61:
+      case 51:
         updateMessageOnMap(channel.id, {
           messageId: messageToSend.tid,
           params: messageUpdateData
@@ -16449,32 +16440,32 @@ function sendTextMessage(action) {
           lastMessage: messageToUpdate,
           lastReactedMessage: null
         };
-        _context4.next = 68;
+        _context4.next = 58;
         return effects.put(updateChannelDataAC(channel.id, channelUpdateParam, true));
-      case 68:
+      case 58:
         updateChannelOnAllChannels(channel.id, channelUpdateParam);
         if (!channel.unread) {
-          _context4.next = 72;
+          _context4.next = 62;
           break;
         }
-        _context4.next = 72;
+        _context4.next = 62;
         return effects.put(markChannelAsReadAC(channel.id));
-      case 72:
-        _context4.next = 75;
+      case 62:
+        _context4.next = 65;
         break;
-      case 74:
+      case 64:
         throw new Error('Connection required to send message');
-      case 75:
-        _context4.next = 77;
+      case 65:
+        _context4.next = 67;
         return effects.put(scrollToNewMessageAC(true));
-      case 77:
-        _context4.next = 79;
+      case 67:
+        _context4.next = 69;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 79:
-        _context4.next = 90;
+      case 69:
+        _context4.next = 80;
         break;
-      case 81:
-        _context4.prev = 81;
+      case 71:
+        _context4.prev = 71;
         _context4.t0 = _context4["catch"](8);
         log.error('error on send text message ... ', _context4.t0);
         updateMessageOnMap(channel.id, {
@@ -16486,18 +16477,18 @@ function sendTextMessage(action) {
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.next = 88;
+        _context4.next = 78;
         return effects.put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 88:
-        _context4.next = 90;
+      case 78:
+        _context4.next = 80;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 90:
+      case 80:
       case "end":
         return _context4.stop();
     }
-  }, _marked2$2, null, [[8, 81]]);
+  }, _marked2$2, null, [[8, 71]]);
 }
 function forwardMessage(action) {
   var payload, message, channelId, connectionState, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam;
@@ -19644,11 +19635,14 @@ var ChannelMessageText = function ChannelMessageText(_ref2) {
     typingOrRecording = _ref2.typingOrRecording,
     channel = _ref2.channel,
     isDirectChannel = _ref2.isDirectChannel;
+  var audioRecording = React.useMemo(function () {
+    return getAudioRecordingFromMap(channel.id);
+  }, [channel.id, draftMessageText]);
   return /*#__PURE__*/React__default.createElement(MessageTextContainer, null, isTypingOrRecording && (/*#__PURE__*/React__default.createElement(TypingIndicator, null, !isDirectChannel && /*#__PURE__*/React__default.createElement(Points, {
     color: textPrimary
   }, ":"), typingOrRecording.isTyping ? 'typing' : 'recording', "...")), !isTypingOrRecording && (draftMessageText ? (/*#__PURE__*/React__default.createElement(DraftMessageText, {
     color: textSecondary
-  }, 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), 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) {
     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);
@@ -19742,8 +19736,13 @@ var Channel = function Channel(_ref3) {
   React.useEffect(function () {
     if (activeChannel.id !== channel.id) {
       var channelDraftMessage = getDraftMessageFromMap(channel.id);
-      if (channelDraftMessage) {
-        setDraftMessageText(channelDraftMessage.text);
+      var draftAudioRecording = getAudioRecordingFromMap(channel.id);
+      if (channelDraftMessage || draftAudioRecording) {
+        if (channelDraftMessage) {
+          setDraftMessageText(channelDraftMessage.text);
+        } else if (draftAudioRecording) {
+          setDraftMessageText('Voice');
+        }
       } else if (draftMessageText) {
         setDraftMessageText(undefined);
       }
@@ -19953,7 +19952,7 @@ var Container$2 = styled__default.div(_templateObject6$1 || (_templateObject6$1
 var DraftMessageTitle = styled__default.span(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var DraftMessageText = styled__default.span(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (props) {
+var DraftMessageText = styled__default.span(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: flex-end;\n  gap: 4px;\n"])), function (props) {
   return props.color;
 });
 var LastMessageAuthor = styled__default.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  max-width: 120px;\n  font-weight: 500;\n  color: ", ";\n\n  ", "\n  & > span {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 100%;\n  }\n"])), function (props) {
@@ -31305,9 +31304,11 @@ var MessageList = function MessageList(_ref2) {
     setIsDragging(false);
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       var fileList = Object.values(e.dataTransfer.files);
-      var attachmentsFiles = [];
       new Promise(function (resolve) {
-        fileList.forEach(function (attachment, index) {
+        var attachmentsFiles = [];
+        var readFiles = 0;
+        var errorCount = 0;
+        fileList.forEach(function (attachment) {
           var fileReader = new FileReader();
           fileReader.onload = function (event) {
             var file = event.target.result;
@@ -31316,14 +31317,23 @@ var MessageList = function MessageList(_ref2) {
               data: file,
               type: attachment.type
             });
-            if (fileList.length - 1 === index) {
-              resolve();
+            readFiles++;
+            if (readFiles + errorCount === fileList.length) {
+              resolve(attachmentsFiles);
+            }
+          };
+          fileReader.onerror = function () {
+            errorCount++;
+            if (readFiles + errorCount === fileList.length) {
+              resolve(attachmentsFiles);
             }
           };
           fileReader.readAsDataURL(attachment);
         });
-      }).then(function () {
-        dispatch(setDraggedAttachmentsAC(attachmentsFiles, 'file'));
+      }).then(function (result) {
+        dispatch(setDraggedAttachmentsAC(result, 'file'));
+      })["catch"](function (error) {
+        console.error('Error in handleDropFile:', error);
       });
       e.dataTransfer.clearData();
     }
@@ -31334,9 +31344,10 @@ var MessageList = function MessageList(_ref2) {
     setIsDragging(false);
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       var fileList = Object.values(e.dataTransfer.files);
-      var attachmentsFiles = [];
       new Promise(function (resolve) {
+        var attachmentsFiles = [];
         var readFiles = 0;
+        var errorCount = 0;
         fileList.forEach(function (attachment) {
           var fileReader = new FileReader();
           fileReader.onload = function (event) {
@@ -31347,14 +31358,22 @@ var MessageList = function MessageList(_ref2) {
               type: attachment.type
             });
             readFiles++;
-            if (fileList.length === readFiles) {
-              resolve();
+            if (readFiles + errorCount === fileList.length) {
+              resolve(attachmentsFiles);
+            }
+          };
+          fileReader.onerror = function () {
+            errorCount++;
+            if (readFiles + errorCount === fileList.length) {
+              resolve(attachmentsFiles);
             }
           };
           fileReader.readAsDataURL(attachment);
         });
-      }).then(function () {
-        dispatch(setDraggedAttachmentsAC(attachmentsFiles, 'media'));
+      }).then(function (result) {
+        dispatch(setDraggedAttachmentsAC(result, 'media'));
+      })["catch"](function (error) {
+        console.error('Error in handleDropMedia:', error);
       });
       e.dataTransfer.clearData();
     }
@@ -31848,7 +31867,7 @@ var MessageList = function MessageList(_ref2) {
     attachmentsPreview: attachmentsPreview
   })))));
 };
-var Container$h = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
+var Container$h = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column-reverse;\n  flex-grow: 1;\n  position: relative;\n  overflow: auto;\n  scroll-behavior: smooth;\n  will-change: left, top;\n  background-color: ", ";\n  overflow-x: hidden;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n    background: transparent;\n  }\n  &::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n\n  &.show-scrollbar::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 4px;\n  }\n  &.show-scrollbar::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])), function (props) {
   return props.backgroundColor;
 }, function (props) {
   return props.thumbColor;
@@ -33863,9 +33882,77 @@ function SvgRecordButton(props) {
 var _templateObject$G, _templateObject2$B, _templateObject3$u, _templateObject4$q, _templateObject5$m, _templateObject6$i, _templateObject7$g;
 var shouldDraw = false;
 var AudioRecord = function AudioRecord(_ref) {
-  var startRecording = function startRecording() {
+  var sendRecordedFile = _ref.sendRecordedFile,
+    setShowRecording = _ref.setShowRecording,
+    showRecording = _ref.showRecording,
+    channelId = _ref.channelId;
+  var _useColor = useColors(),
+    accentColor = _useColor[THEME_COLORS.ACCENT],
+    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
+    warningColor = _useColor[THEME_COLORS.WARNING],
+    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
+    surface1 = _useColor[THEME_COLORS.SURFACE_1];
+  var _useState = React.useState(null),
+    recording = _useState[0],
+    setStartRecording = _useState[1];
+  var _useState2 = React.useState(null),
+    recorder = _useState2[0],
+    setRecorder = _useState2[1];
+  var _useState3 = React.useState(null),
+    recordedFile = _useState3[0],
+    setRecordedFile = _useState3[1];
+  var _useState4 = React.useState(false),
+    recordingIsReadyToPlay = _useState4[0],
+    setRecordingIsReadyToPlay = _useState4[1];
+  var _useState5 = React.useState(0),
+    currentTime = _useState5[0],
+    setCurrentTime = _useState5[1];
+  var _useState6 = React.useState(null),
+    sendingInterval = _useState6[0],
+    setSendingInterval = _useState6[1];
+  var _useState7 = React.useState(''),
+    currentChannelId = _useState7[0],
+    setCurrentChannelId = _useState7[1];
+  var _useState8 = React.useState(false),
+    playAudio = _useState8[0],
+    setPlayAudio = _useState8[1];
+  var wavesurferContainer = React.useRef(null);
+  var recordButtonRef = React.useRef(null);
+  var wavesurfer = React.useRef({});
+  var intervalRef = React.useRef({});
+  var currentRecordedFile = React.useMemo(function () {
+    var current = getAudioRecordingFromMap(currentChannelId) || recordedFile;
+    return current;
+  }, [recordedFile, currentChannelId]);
+  React.useEffect(function () {
+    if (currentRecordedFile) {
+      setRecordedFile(currentRecordedFile);
+    }
+  }, [currentRecordedFile]);
+  var dispatch = reactRedux.useDispatch();
+  var handleStartRecording = function handleStartRecording() {
+    dispatch(sendRecordingAC(true));
+    if (sendingInterval) {
+      clearInterval(sendingInterval);
+      setSendingInterval(null);
+      return;
+    }
+    var interval = setInterval(function () {
+      dispatch(sendRecordingAC(true));
+    }, 1000);
+    setSendingInterval(interval);
+  };
+  var handleStopRecording = function handleStopRecording() {
+    dispatch(sendRecordingAC(false));
+    if (sendingInterval) {
+      clearInterval(sendingInterval);
+      setSendingInterval(null);
+    }
+  };
+  var startRecording = function startRecording(cId) {
     try {
-      var _temp3 = _catch(function () {
+      var id = cId || currentChannelId;
+      var _temp = _catch(function () {
         return Promise.resolve(navigator.permissions.query({
           name: 'microphone'
         })).then(function (permissionStatus) {
@@ -33875,18 +33962,27 @@ var AudioRecord = function AudioRecord(_ref) {
             recordButtonRef.current.style.pointerEvents = 'none';
           }
           if (recording) {
-            stopRecording(true);
-          } else if (recordedFile) {
-            sendRecordedFile(recordedFile);
+            stopRecording(true, id, false, recorder);
+          } else if (currentRecordedFile) {
+            var _wavesurfer$current;
+            removeAudioRecordingFromMap(id);
             setRecordedFile(null);
             setPlayAudio(false);
-            if (wavesurfer.current) {
-              wavesurfer.current.destroy();
+            if ((_wavesurfer$current = wavesurfer.current) !== null && _wavesurfer$current !== void 0 && _wavesurfer$current[id]) {
+              wavesurfer.current[id].destroy();
             }
             setStartRecording(false);
             setShowRecording(false);
+            dispatch(setChannelDraftMessageIsRemovedAC(id));
+            sendRecordedFile(currentRecordedFile, id);
           } else {
             handleStartRecording();
+            setAudioRecordingToMap(id, {
+              file: null,
+              objectUrl: null,
+              thumb: null,
+              dur: 0
+            });
             recorder.start().then(function () {
               recordButtonRef.current.style.pointerEvents = 'initial';
               setShowRecording(true);
@@ -33894,8 +33990,8 @@ var AudioRecord = function AudioRecord(_ref) {
               shouldDraw = true;
               var stream = recorder.activeStream;
               var obj = {};
-              function init() {
-                obj.canvas = document.getElementById('waveform');
+              var init = function init() {
+                obj.canvas = document.getElementById("waveform-" + id);
                 obj.ctx = obj.canvas.getContext('2d');
                 obj.width = 360;
                 obj.height = 28;
@@ -33903,10 +33999,10 @@ var AudioRecord = function AudioRecord(_ref) {
                 obj.canvas.height = obj.height;
                 obj.canvas.style.width = obj.width + 'px';
                 obj.canvas.style.height = obj.height + 'px';
-              }
+              };
               var timeOffset = 100;
               var now = parseInt(performance.now()) / timeOffset;
-              function loop() {
+              var _loop = function loop() {
                 if (!shouldDraw) {
                   obj.x = 0;
                   obj.ctx.clearRect(0, 0, obj.canvas.width, obj.canvas.height);
@@ -33934,10 +34030,10 @@ var AudioRecord = function AudioRecord(_ref) {
                   });
                 }
                 draw();
-                requestAnimationFrame(loop);
-              }
+                requestAnimationFrame(_loop);
+              };
               obj.bars = [];
-              function draw() {
+              var draw = function draw() {
                 for (var i = 0; i < obj.bars.length; i++) {
                   var bar = obj.bars[i];
                   obj.ctx.fillStyle = textSecondary;
@@ -33947,8 +34043,8 @@ var AudioRecord = function AudioRecord(_ref) {
                     obj.bars.splice(i, 1);
                   }
                 }
-              }
-              function soundAllowed(stream) {
+              };
+              var soundAllowed = function soundAllowed(stream) {
                 var AudioContext = window.AudioContext || window.webkitAudioContext;
                 var audioContent = new AudioContext();
                 var streamSource = audioContent.createMediaStreamSource(stream);
@@ -33957,8 +34053,8 @@ var AudioRecord = function AudioRecord(_ref) {
                 obj.analyser.fftSize = 512;
                 obj.frequencyArray = new Float32Array(obj.analyser.fftSize);
                 init();
-                loop();
-              }
+                _loop();
+              };
               soundAllowed(stream);
             })["catch"](function (e) {
               handleStopRecording();
@@ -33970,72 +34066,21 @@ var AudioRecord = function AudioRecord(_ref) {
         handleStopRecording();
         log.error(e);
       });
-      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
   };
-  var sendRecordedFile = _ref.sendRecordedFile,
-    setShowRecording = _ref.setShowRecording,
-    showRecording = _ref.showRecording;
-  var _useColor = useColors(),
-    accentColor = _useColor[THEME_COLORS.ACCENT],
-    textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
-    warningColor = _useColor[THEME_COLORS.WARNING],
-    iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
-    surface1 = _useColor[THEME_COLORS.SURFACE_1];
-  var _useState = React.useState(null),
-    recording = _useState[0],
-    setStartRecording = _useState[1];
-  var _useState2 = React.useState(null),
-    recorder = _useState2[0],
-    setRecorder = _useState2[1];
-  var _useState3 = React.useState(null),
-    recordedFile = _useState3[0],
-    setRecordedFile = _useState3[1];
-  var _useState4 = React.useState(false),
-    recordingIsReadyToPlay = _useState4[0],
-    setRecordingIsReadyToPlay = _useState4[1];
-  var _useState5 = React.useState(0),
-    currentTime = _useState5[0],
-    setCurrentTime = _useState5[1];
-  var _useState6 = React.useState(null),
-    sendingInterval = _useState6[0],
-    setSendingInterval = _useState6[1];
-  var _useState7 = React.useState(false),
-    playAudio = _useState7[0],
-    setPlayAudio = _useState7[1];
-  var wavesurfer = React.useRef(null);
-  var wavesurferContainer = React.useRef(null);
-  var intervalRef = React.useRef(null);
-  var recordButtonRef = React.useRef(null);
-  var dispatch = reactRedux.useDispatch();
-  var handleStartRecording = function handleStartRecording() {
-    dispatch(sendRecordingAC(true));
-    if (sendingInterval) {
-      clearInterval(sendingInterval);
-      setSendingInterval(null);
-      return;
-    }
-    var interval = setInterval(function () {
-      dispatch(sendRecordingAC(true));
-    }, 1000);
-    setSendingInterval(interval);
-  };
-  var handleStopRecording = function handleStopRecording() {
-    dispatch(sendRecordingAC(false));
-    if (sendingInterval) {
-      clearInterval(sendingInterval);
-      setSendingInterval(null);
-    }
-  };
-  function cancelRecording() {
+  var cancelRecording = React.useCallback(function () {
     handleStopRecording();
-    if (recordedFile) {
+    if (currentRecordedFile) {
+      var _wavesurfer$current2;
+      removeAudioRecordingFromMap(currentChannelId);
+      dispatch(setChannelDraftMessageIsRemovedAC(currentChannelId));
       setRecordedFile(null);
       setPlayAudio(false);
-      if (wavesurfer.current) {
-        wavesurfer.current.destroy();
+      if ((_wavesurfer$current2 = wavesurfer.current) !== null && _wavesurfer$current2 !== void 0 && _wavesurfer$current2[currentChannelId]) {
+        wavesurfer.current[currentChannelId].destroy();
       }
     } else {
       shouldDraw = false;
@@ -34045,13 +34090,128 @@ var AudioRecord = function AudioRecord(_ref) {
     setStartRecording(false);
     setCurrentTime(0);
     setShowRecording(false);
-  }
-  function stopRecording(send) {
+  }, [currentRecordedFile, currentChannelId, wavesurfer, setShowRecording, setRecordedFile]);
+  var _initWaveSurfer = function initWaveSurfer(draft, cId, audioRecording, container) {
+    try {
+      var _exit = false;
+      return Promise.resolve(_catch(function () {
+        var _wavesurfer$current3;
+        function _temp3(_result3) {
+          if (_exit) return _result3;
+          if (draft) {
+            return;
+          }
+          wavesurfer.current[id].on('ready', function () {
+            setRecordingIsReadyToPlay(true);
+            var audioDuration = wavesurfer.current[id].getDuration();
+            setCurrentTime(audioDuration);
+          });
+          wavesurfer.current[id].on('finish', function () {
+            setPlayAudio(false);
+            wavesurfer.current[id].seekTo(0);
+            var audioDuration = wavesurfer.current[id].getDuration();
+            setCurrentTime(audioDuration);
+            clearInterval(intervalRef.current[id]);
+          });
+          wavesurfer.current[id].on('pause', function () {
+            setPlayAudio(false);
+            clearInterval(intervalRef.current[id]);
+          });
+          wavesurfer.current[id].on('interaction', function () {
+            var currentTime = wavesurfer.current[id].getCurrentTime();
+            setCurrentTime(currentTime);
+          });
+        }
+        if (draft) {
+          return;
+        }
+        var id = cId || currentChannelId;
+        if ((_wavesurfer$current3 = wavesurfer.current) !== null && _wavesurfer$current3 !== void 0 && _wavesurfer$current3[id]) {
+          setRecordingIsReadyToPlay(true);
+          var audioDuration = wavesurfer.current[id].getDuration();
+          setCurrentTime(audioDuration);
+        }
+        var _temp2 = function (_wavesurfer$current4) {
+          if (!((_wavesurfer$current4 = wavesurfer.current) !== null && _wavesurfer$current4 !== void 0 && _wavesurfer$current4[id])) {
+            var _ref2;
+            var containerElement = wavesurferContainer.current || container;
+            if (!containerElement) {
+              setTimeout(function () {
+                return _initWaveSurfer(draft, cId, audioRecording, container);
+              }, 100);
+              _exit = true;
+              return;
+            }
+            var rect = containerElement.getBoundingClientRect();
+            if (rect.width === 0 || rect.height === 0) {
+              setTimeout(function () {
+                return _initWaveSurfer(draft, cId, audioRecording, container);
+              }, 100);
+              _exit = true;
+              return;
+            }
+            var ws = WaveSurfer.create({
+              container: containerElement,
+              waveColor: textSecondary,
+              progressColor: accentColor,
+              barWidth: 1,
+              barHeight: 2,
+              audioRate: 1,
+              hideScrollbar: true,
+              barRadius: 1.5,
+              cursorWidth: 0,
+              barGap: 2.5,
+              height: 28
+            });
+            var peaks = [];
+            if ((_ref2 = audioRecording || currentRecordedFile) !== null && _ref2 !== void 0 && _ref2.thumb) {
+              var _ref3;
+              var thumbData = (_ref3 = audioRecording || currentRecordedFile) === null || _ref3 === void 0 ? void 0 : _ref3.thumb;
+              if (Array.isArray(thumbData) && thumbData.length > 0) {
+                var maxVal = Math.max.apply(Math, thumbData);
+                if (maxVal > 0 && isFinite(maxVal)) {
+                  var dec = maxVal / 100;
+                  peaks = thumbData.map(function (peak) {
+                    var normalizedPeak = peak / dec / 100;
+                    return isFinite(normalizedPeak) ? normalizedPeak : 0;
+                  }).filter(function (peak) {
+                    return isFinite(peak);
+                  });
+                  if (peaks.length === 0) {
+                    peaks = [];
+                  }
+                }
+              }
+            }
+            wavesurfer.current[id] = ws;
+            return _catch(function () {
+              var validPeaks = peaks.length > 0 ? peaks : undefined;
+              return Promise.resolve(wavesurfer.current[id].loadBlob((audioRecording === null || audioRecording === void 0 ? void 0 : audioRecording.file) || (currentRecordedFile === null || currentRecordedFile === void 0 ? void 0 : currentRecordedFile.file), validPeaks)).then(function () {});
+            }, function () {
+              return _catch(function () {
+                return Promise.resolve(wavesurfer.current[id].loadBlob((audioRecording === null || audioRecording === void 0 ? void 0 : audioRecording.file) || (currentRecordedFile === null || currentRecordedFile === void 0 ? void 0 : currentRecordedFile.file))).then(function () {});
+              }, function (fallbackError) {
+                console.error('Failed to load audio completely:', fallbackError);
+                throw fallbackError;
+              });
+            });
+          }
+        }();
+        return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
+      }, function (e) {
+        log.error('Failed to init wavesurfer', e);
+      }));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  var stopRecording = React.useCallback(function (send, cId, draft, recorder, container) {
     handleStopRecording();
     shouldDraw = false;
-    recorder.stop().getMp3().then(function (_ref2) {
-      var buffer = _ref2[0],
-        blob = _ref2[1];
+    var id = cId || channelId;
+    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,
@@ -34079,15 +34239,29 @@ var AudioRecord = function AudioRecord(_ref) {
               objectUrl: objectUrl,
               thumb: waveform,
               dur: audioBuffer.duration
-            });
+            }, id);
             setShowRecording(false);
+            removeAudioRecordingFromMap(id);
+            dispatch(setChannelDraftMessageIsRemovedAC(id));
           } else {
-            setRecordedFile({
+            if (!draft) {
+              setRecordedFile({
+                file: file,
+                objectUrl: objectUrl,
+                thumb: waveform,
+                dur: audioBuffer.duration
+              });
+            }
+            var audioRecording = {
               file: file,
               objectUrl: objectUrl,
               thumb: waveform,
               dur: audioBuffer.duration
-            });
+            };
+            setAudioRecordingToMap(id, audioRecording);
+            if (draft) {
+              _initWaveSurfer(draft, id, audioRecording, container);
+            }
           }
         }, function (e) {
           log.info('Error decoding audio data: ' + e.err);
@@ -34098,14 +34272,15 @@ var AudioRecord = function AudioRecord(_ref) {
       handleStopRecording();
       log.error(e);
     });
-  }
-  var handlePlayPause = function handlePlayPause() {
-    if (wavesurfer.current) {
-      if (!wavesurfer.current.isPlaying()) {
+  }, [sendRecordedFile, setShowRecording, setAudioRecordingToMap, setRecordedFile, handleStopRecording, channelId]);
+  var handlePlayPause = function handlePlayPause(cId) {
+    var _wavesurfer$current5;
+    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 = setInterval(function () {
-          var currentTime = wavesurfer.current.getCurrentTime();
+        intervalRef.current[cId || currentChannelId] = setInterval(function () {
+          var currentTime = wavesurfer.current[cId || currentChannelId].getCurrentTime();
           if (currentTime >= 0) {
             setCurrentTime(currentTime);
           }
@@ -34113,7 +34288,7 @@ var AudioRecord = function AudioRecord(_ref) {
       } else {
         handleStopRecording();
       }
-      wavesurfer.current.playPause();
+      wavesurfer.current[cId || currentChannelId].playPause();
     }
   };
   React.useEffect(function () {
@@ -34125,7 +34300,7 @@ var AudioRecord = function AudioRecord(_ref) {
           setCurrentTime(function (prevState) {
             if (prevState.recordingSeconds === MAX_RECORDER_TIME) {
               clearInterval(recordingInterval);
-              stopRecording();
+              stopRecording(false, currentChannelId, false, recorder);
               return 0;
             }
             return prevState + 1;
@@ -34140,132 +34315,133 @@ var AudioRecord = function AudioRecord(_ref) {
       clearInterval(recordingInterval);
     };
   }, [recording]);
-  useDidUpdate(function () {
-    if (recordedFile) {
-      var initWaveSurfer = function initWaveSurfer() {
-        try {
-          try {
-            if (wavesurfer.current) {
-              wavesurfer.current.destroy();
-            }
-            wavesurfer.current = WaveSurfer.create({
-              container: wavesurferContainer.current,
-              waveColor: textSecondary,
-              progressColor: accentColor,
-              barWidth: 1,
-              barHeight: 2,
-              audioRate: 1,
-              hideScrollbar: true,
-              barRadius: 1.5,
-              cursorWidth: 0,
-              barGap: 2.5,
-              height: 28
-            });
-            wavesurfer.current.load(recordedFile.objectUrl);
-            wavesurfer.current.on('ready', function () {
-              setRecordingIsReadyToPlay(true);
-              var audioDuration = wavesurfer.current.getDuration();
-              setCurrentTime(audioDuration);
-            });
-            wavesurfer.current.on('finish', function () {
-              setPlayAudio(false);
-              wavesurfer.current.seekTo(0);
-              var audioDuration = wavesurfer.current.getDuration();
-              setCurrentTime(audioDuration);
-              clearInterval(intervalRef.current);
-            });
-            wavesurfer.current.on('pause', function () {
-              setPlayAudio(false);
-              clearInterval(intervalRef.current);
-            });
-            wavesurfer.current.on('interaction', function () {
-              var currentTime = wavesurfer.current.getCurrentTime();
-              setCurrentTime(currentTime);
-            });
-          } catch (e) {
-            log.error('Failed to init wavesurfer', e);
-          }
-          return Promise.resolve();
-        } catch (e) {
-          return Promise.reject(e);
-        }
-      };
-      initWaveSurfer();
+  React.useEffect(function () {
+    if (currentRecordedFile) {
+      _initWaveSurfer();
     } else {
+      var _wavesurfer$current6;
       setRecordingIsReadyToPlay(false);
-      clearInterval(intervalRef.current);
-      wavesurfer.current = null;
+      if (intervalRef.current[currentChannelId]) {
+        clearInterval(intervalRef.current[currentChannelId]);
+        intervalRef.current[currentChannelId] = null;
+      }
+      if ((_wavesurfer$current6 = wavesurfer.current) !== null && _wavesurfer$current6 !== void 0 && _wavesurfer$current6[currentChannelId]) {
+        wavesurfer.current[currentChannelId].destroy();
+        wavesurfer.current[currentChannelId] = null;
+      }
     }
     return function () {
-      clearInterval(intervalRef.current);
+      for (var key in intervalRef.current) {
+        if (intervalRef.current[key]) {
+          clearInterval(intervalRef.current[key]);
+          intervalRef.current[key] = null;
+        }
+      }
+      for (var _key in wavesurfer.current) {
+        if (wavesurfer.current[_key]) {
+          wavesurfer.current[_key].destroy();
+          wavesurfer.current[_key] = null;
+        }
+      }
     };
-  }, [recordedFile]);
+  }, [currentRecordedFile, currentChannelId]);
   React.useEffect(function () {
-    (function () {
-      try {
-        var _temp2 = function () {
-          if (!recorder) {
-            var _temp = _catch(function () {
-              return Promise.resolve(new Promise(function (resolve) { resolve(_interopNamespace(require('mic-recorder-to-mp3'))); })).then(function (MicRecorderModule) {
-                var MicRecorder = MicRecorderModule["default"];
-                var recorder = new MicRecorder({
-                  bitRate: 128
+    if (!currentRecordedFile) {
+      (function () {
+        try {
+          var _temp5 = function () {
+            if (!recorder) {
+              var _temp4 = _catch(function () {
+                return Promise.resolve(new Promise(function (resolve) { resolve(_interopNamespace(require('mic-recorder-to-mp3'))); })).then(function (MicRecorderModule) {
+                  var MicRecorder = MicRecorderModule["default"];
+                  var recorder = new MicRecorder({
+                    bitRate: 128
+                  });
+                  setRecorder(recorder);
                 });
-                setRecorder(recorder);
+              }, function (e) {
+                log.error('Failed to init mic-recorder-to-mp3', e);
               });
-            }, function (e) {
-              log.error('Failed to init mic-recorder-to-mp3', e);
-            });
-            if (_temp && _temp.then) return _temp.then(function () {});
-          }
-        }();
-        return _temp2 && _temp2.then ? _temp2.then(function () {}) : void 0;
-      } catch (e) {
-        Promise.reject(e);
-      }
-    })();
-  }, []);
+              if (_temp4 && _temp4.then) return _temp4.then(function () {});
+            }
+          }();
+          return _temp5 && _temp5.then ? _temp5.then(function () {}) : void 0;
+        } catch (e) {
+          Promise.reject(e);
+        }
+      })();
+    }
+  }, [currentRecordedFile]);
   React.useEffect(function () {
     return function () {
       handleStopRecording();
     };
   }, [showRecording]);
+  React.useEffect(function () {
+    if (channelId && (showRecording || currentRecordedFile)) {
+      if (!currentRecordedFile) {
+        stopRecording(false, currentChannelId, true, recorder, wavesurferContainer.current);
+      }
+      if (playAudio) {
+        handlePlayPause(channelId);
+      }
+      for (var key in intervalRef.current) {
+        clearInterval(intervalRef.current[key]);
+        intervalRef.current[key] = null;
+      }
+      for (var _key2 in wavesurfer.current) {
+        var _wavesurfer$current$_;
+        (_wavesurfer$current$_ = wavesurfer.current[_key2]) === null || _wavesurfer$current$_ === void 0 ? void 0 : _wavesurfer$current$_.destroy();
+        wavesurfer.current[_key2] = null;
+      }
+      setShowRecording(false);
+      setStartRecording(false);
+      setPlayAudio(false);
+      setCurrentTime(0);
+      var audioRecording = getAudioRecordingFromMap(channelId);
+      setRecordedFile(audioRecording || null);
+      setRecordingIsReadyToPlay(!!audioRecording);
+    }
+    setCurrentChannelId(channelId);
+  }, [channelId]);
   return /*#__PURE__*/React__default.createElement(Container$j, {
-    recording: showRecording
-  }, showRecording && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
+    recording: showRecording || currentRecordedFile
+  }, (showRecording || currentRecordedFile) && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
     iconColor: iconPrimary,
     onClick: function onClick() {
       return cancelRecording();
     }
   }, /*#__PURE__*/React__default.createElement(SvgClose, null))), /*#__PURE__*/React__default.createElement(AudioWrapper, {
     backgroundColor: surface1,
-    recording: recording || recordedFile
+    recording: recording || currentRecordedFile
   }, recording && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
     iconColor: warningColor,
     onClick: function onClick() {
-      return stopRecording();
+      return stopRecording(false, currentChannelId, false, recorder);
     }
   }, /*#__PURE__*/React__default.createElement(SvgStopRecord, null))), /*#__PURE__*/React__default.createElement(Canvas, {
-    hide: recordedFile,
-    id: 'waveform',
+    hide: currentRecordedFile,
+    id: "waveform-" + channelId,
     recording: recording
   }), recording && /*#__PURE__*/React__default.createElement(Timer$2, {
     color: textSecondary
-  }, formatAudioVideoTime(currentTime)), recordingIsReadyToPlay && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
+  }, formatAudioVideoTime(currentTime)), (recordingIsReadyToPlay || currentRecordedFile) && (/*#__PURE__*/React__default.createElement(PlayPause$1, {
     iconColor: accentColor,
-    onClick: handlePlayPause
+    onClick: function onClick() {
+      return handlePlayPause(channelId);
+    }
   }, playAudio ? /*#__PURE__*/React__default.createElement(SvgPauseRecord, null) : /*#__PURE__*/React__default.createElement(SvgPlayRecord, null))), /*#__PURE__*/React__default.createElement(AudioVisualization$1, {
     ref: wavesurferContainer,
-    show: recordedFile
-  }), recordingIsReadyToPlay && /*#__PURE__*/React__default.createElement(Timer$2, {
+    show: currentRecordedFile
+  }), (recordingIsReadyToPlay || currentRecordedFile) && (/*#__PURE__*/React__default.createElement(Timer$2, {
     color: textSecondary
-  }, formatAudioVideoTime(currentTime))), /*#__PURE__*/React__default.createElement(RecordIconWrapper, {
+  }, formatAudioVideoTime(currentTime)))), /*#__PURE__*/React__default.createElement(RecordIconWrapper, {
     ref: recordButtonRef,
     onClick: function onClick() {
-      return startRecording();
+      return startRecording(currentChannelId);
     },
     iconColor: accentColor
-  }, showRecording ? /*#__PURE__*/React__default.createElement(SvgSend, null) : /*#__PURE__*/React__default.createElement(SvgRecordButton, null)));
+  }, showRecording || currentRecordedFile ? /*#__PURE__*/React__default.createElement(SvgSend, null) : /*#__PURE__*/React__default.createElement(SvgRecordButton, null)));
 };
 var Container$j = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  width: 32px;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  ", ";\n  transition: all 0.3s ease-in-out;\n"])), function (props) {
   return props.recording && "width: 400px";
@@ -34282,14 +34458,14 @@ var AudioWrapper = styled__default.div(_templateObject2$B || (_templateObject2$B
 var RecordIconWrapper = styled__default.span(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  cursor: pointer;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var AudioVisualization$1 = styled__default.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  visibility: ", ";\n  width: 300px;\n  height: 28px;\n  max-width: calc(100% - 100px);\n  left: 40px;\n  background-color: ", ";\n"])), function (_ref3) {
-  var show = _ref3.show;
+var AudioVisualization$1 = styled__default.div(_templateObject4$q || (_templateObject4$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  visibility: ", ";\n  width: 300px;\n  height: 28px;\n  max-width: calc(100% - 100px);\n  left: 40px;\n  background-color: ", ";\n"])), function (_ref5) {
+  var show = _ref5.show;
   return show ? '1' : '0';
-}, function (_ref4) {
-  var show = _ref4.show;
+}, function (_ref6) {
+  var show = _ref6.show;
   return !show && '-1';
-}, function (_ref5) {
-  var show = _ref5.show;
+}, function (_ref7) {
+  var show = _ref7.show;
   return show ? 'visible' : 'hidden';
 }, function (props) {
   return props.color;
@@ -34297,14 +34473,14 @@ var AudioVisualization$1 = styled__default.div(_templateObject4$q || (_templateO
 var PlayPause$1 = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  padding: 10px;\n  > svg {\n    color: ", ";\n  }\n"])), function (props) {
   return props.iconColor;
 });
-var Canvas = styled__default.canvas(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: ", ";\n  max-width: calc(100% - 110px);\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  left: 42px;\n"])), function (_ref6) {
-  var recording = _ref6.recording;
+var Canvas = styled__default.canvas(_templateObject6$i || (_templateObject6$i = _taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: ", ";\n  max-width: calc(100% - 110px);\n  position: absolute;\n  opacity: ", ";\n  z-index: ", ";\n  left: 42px;\n"])), function (_ref8) {
+  var recording = _ref8.recording;
   return recording ? '300px' : '0';
-}, function (_ref7) {
-  var hide = _ref7.hide;
+}, function (_ref9) {
+  var hide = _ref9.hide;
   return hide ? '0' : '1';
-}, function (_ref8) {
-  var hide = _ref8.hide;
+}, function (_ref0) {
+  var hide = _ref0.hide;
   return hide && '-1';
 });
 var Timer$2 = styled__default.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 12px;\n  color: ", ";\n  margin-left: auto;\n"])), function (props) {
@@ -34508,92 +34684,89 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var _useState = React.useState(false),
     showRecording = _useState[0],
     setShowRecording = _useState[1];
-  var _useState2 = React.useState(null),
-    recordedFile = _useState2[0],
-    setRecordedFile = _useState2[1];
   var _usePermissions = usePermissions(activeChannel.userRole),
     checkActionPermission = _usePermissions[0];
-  var _useState3 = React.useState(false),
-    listenerIsAdded = _useState3[0],
-    setListenerIsAdded = _useState3[1];
+  var _useState2 = React.useState(false),
+    listenerIsAdded = _useState2[0],
+    setListenerIsAdded = _useState2[1];
+  var _useState3 = React.useState(''),
+    messageText = _useState3[0],
+    setMessageText = _useState3[1];
   var _useState4 = React.useState(''),
-    messageText = _useState4[0],
-    setMessageText = _useState4[1];
-  var _useState5 = React.useState(''),
-    editMessageText = _useState5[0],
-    setEditMessageText = _useState5[1];
-  var _useState6 = React.useState({}),
-    readyVideoAttachments = _useState6[0],
-    setReadyVideoAttachments = _useState6[1];
+    editMessageText = _useState4[0],
+    setEditMessageText = _useState4[1];
+  var _useState5 = React.useState({}),
+    readyVideoAttachments = _useState5[0],
+    setReadyVideoAttachments = _useState5[1];
+  var _useState6 = React.useState(false),
+    showChooseAttachmentType = _useState6[0],
+    setShowChooseAttachmentType = _useState6[1];
   var _useState7 = React.useState(false),
-    showChooseAttachmentType = _useState7[0],
-    setShowChooseAttachmentType = _useState7[1];
+    isEmojisOpened = _useState7[0],
+    setIsEmojisOpened = _useState7[1];
   var _useState8 = React.useState(false),
-    isEmojisOpened = _useState8[0],
-    setIsEmojisOpened = _useState8[1];
-  var _useState9 = React.useState(false),
-    emojisInRightSide = _useState9[0],
-    setEmojisInRightSide = _useState9[1];
+    emojisInRightSide = _useState8[0],
+    setEmojisInRightSide = _useState8[1];
+  var _useState9 = React.useState(0),
+    emojisPopupLeftPosition = _useState9[0],
+    setEmojisPopupLeftPosition = _useState9[1];
   var _useState0 = React.useState(0),
-    emojisPopupLeftPosition = _useState0[0],
-    setEmojisPopupLeftPosition = _useState0[1];
-  var _useState1 = React.useState(0),
-    emojisPopupBottomPosition = _useState1[0],
-    setEmojisPopupBottomPosition = _useState1[1];
-  var _useState10 = React.useState(false),
-    addAttachmentsInRightSide = _useState10[0],
-    setAddAttachmentsInRightSide = _useState10[1];
-  var _useState11 = React.useState({
+    emojisPopupBottomPosition = _useState0[0],
+    setEmojisPopupBottomPosition = _useState0[1];
+  var _useState1 = React.useState(false),
+    addAttachmentsInRightSide = _useState1[0],
+    setAddAttachmentsInRightSide = _useState1[1];
+  var _useState10 = React.useState({
       clear: false
     }),
-    shouldClearEditor = _useState11[0],
-    setShouldClearEditor = _useState11[1];
+    shouldClearEditor = _useState10[0],
+    setShouldClearEditor = _useState10[1];
+  var _useState11 = React.useState([]),
+    messageBodyAttributes = _useState11[0],
+    setMessageBodyAttributes = _useState11[1];
   var _useState12 = React.useState([]),
-    messageBodyAttributes = _useState12[0],
-    setMessageBodyAttributes = _useState12[1];
-  var _useState13 = React.useState([]),
-    mentionedMembers = _useState13[0],
-    setMentionedMembers = _useState13[1];
-  var _useState14 = React.useState(''),
-    browser = _useState14[0],
-    setBrowser = _useState14[1];
-  var _useState15 = React.useState(false),
-    mentionsIsOpen = _useState15[0],
-    setMentionsIsOpen = _useState15[1];
-  var _useState16 = React.useState(),
-    inputContainerHeight = _useState16[0],
-    setInputContainerHeight = _useState16[1];
+    mentionedMembers = _useState12[0],
+    setMentionedMembers = _useState12[1];
+  var _useState13 = React.useState(''),
+    browser = _useState13[0],
+    setBrowser = _useState13[1];
+  var _useState14 = React.useState(false),
+    mentionsIsOpen = _useState14[0],
+    setMentionsIsOpen = _useState14[1];
+  var _useState15 = React.useState(),
+    inputContainerHeight = _useState15[0],
+    setInputContainerHeight = _useState15[1];
   var selectedText = React.useRef(null);
+  var _useState16 = React.useState(),
+    typingTimout = _useState16[0],
+    setTypingTimout = _useState16[1];
   var _useState17 = React.useState(),
-    typingTimout = _useState17[0],
-    setTypingTimout = _useState17[1];
-  var _useState18 = React.useState(),
-    inTypingStateTimout = _useState18[0],
-    setInTypingStateTimout = _useState18[1];
+    inTypingStateTimout = _useState17[0],
+    setInTypingStateTimout = _useState17[1];
+  var _useState18 = React.useState(false),
+    inTypingState = _useState18[0],
+    setInTypingState = _useState18[1];
   var _useState19 = React.useState(false),
-    inTypingState = _useState19[0],
-    setInTypingState = _useState19[1];
-  var _useState20 = React.useState(false),
-    sendMessageIsActive = _useState20[0],
-    setSendMessageIsActive = _useState20[1];
-  var _useState21 = React.useState([]),
-    attachments = _useState21[0],
-    setAttachments = _useState21[1];
+    sendMessageIsActive = _useState19[0],
+    setSendMessageIsActive = _useState19[1];
+  var _useState20 = React.useState([]),
+    attachments = _useState20[0],
+    setAttachments = _useState20[1];
+  var _useState21 = React.useState(false),
+    forwardPopupOpen = _useState21[0],
+    setForwardPopupOpen = _useState21[1];
   var _useState22 = React.useState(false),
-    forwardPopupOpen = _useState22[0],
-    setForwardPopupOpen = _useState22[1];
+    deletePopupOpen = _useState22[0],
+    setDeletePopupOpen = _useState22[1];
   var _useState23 = React.useState(false),
-    deletePopupOpen = _useState23[0],
-    setDeletePopupOpen = _useState23[1];
-  var _useState24 = React.useState(false),
-    isIncomingMessage = _useState24[0],
-    setIsIncomingMessage = _useState24[1];
-  var _useState25 = React.useState('.jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.wmv,.flv,.webm,.jfif'),
-    mediaExtensions = _useState25[0],
-    setMediaExtensions = _useState25[1];
-  var _useState26 = React.useState(''),
-    uploadErrorMessage = _useState26[0],
-    setUploadErrorMessage = _useState26[1];
+    isIncomingMessage = _useState23[0],
+    setIsIncomingMessage = _useState23[1];
+  var _useState24 = React.useState('.jpg,.jpeg,.png,.gif,.mp4,.mov,.avi,.wmv,.flv,.webm,.jfif'),
+    mediaExtensions = _useState24[0],
+    setMediaExtensions = _useState24[1];
+  var _useState25 = React.useState(''),
+    uploadErrorMessage = _useState25[0],
+    setUploadErrorMessage = _useState25[1];
   var typingOrRecordingIndicator = reactRedux.useSelector(typingOrRecordingIndicatorArraySelector(activeChannel.id));
   var contactsMap = reactRedux.useSelector(contactsMapSelector);
   var connectionStatus = reactRedux.useSelector(connectionStatusSelector, reactRedux.shallowEqual);
@@ -34603,15 +34776,15 @@ var SendMessageInput = function SendMessageInput(_ref3) {
   var messageInputRef = React.useRef(null);
   var emojiBtnRef = React.useRef(null);
   var addAttachmentsBtnRef = React.useRef(null);
-  var _useState27 = React.useState(),
-    realEditorState = _useState27[0],
-    setRealEditorState = _useState27[1];
-  var _useState28 = React.useState(null),
-    floatingAnchorElem = _useState28[0],
-    setFloatingAnchorElem = _useState28[1];
-  var _useState29 = React.useState(false),
-    isSmallWidthViewport = _useState29[0],
-    setIsSmallWidthViewport = _useState29[1];
+  var _useState26 = React.useState(),
+    realEditorState = _useState26[0],
+    setRealEditorState = _useState26[1];
+  var _useState27 = React.useState(null),
+    floatingAnchorElem = _useState27[0],
+    setFloatingAnchorElem = _useState27[1];
+  var _useState28 = React.useState(false),
+    isSmallWidthViewport = _useState28[0],
+    setIsSmallWidthViewport = _useState28[1];
   var addAttachmentByMenu = showChooseFileAttachment && showChooseMediaAttachment;
   function onChange(editorState) {
     setRealEditorState(editorState);
@@ -35329,7 +35502,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       dispatch(setDraggedAttachmentsAC([], ''));
     }
   }, [draggedAttachments]);
-  React.useEffect(function () {
+  var sendRecordedFile = function sendRecordedFile(recordedFile, id) {
     if (recordedFile) {
       var tid = uuid.v4();
       var reader = new FileReader();
@@ -35369,7 +35542,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
               }],
               type: 'text'
             };
-            dispatch(sendMessageAC(messageToSend, activeChannel.id, connectionStatus));
+            dispatch(sendMessageAC(messageToSend, id, connectionStatus));
           });
         } catch (e) {
           return Promise.reject(e);
@@ -35380,7 +35553,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       };
       reader.readAsBinaryString(recordedFile.file);
     }
-  }, [recordedFile]);
+  };
   React.useEffect(function () {
     var updateViewPortWidth = function updateViewPortWidth() {
       var isNextSmallWidthViewport = CAN_USE_DOM && window.matchMedia('(max-width: 1025px)').matches;
@@ -35767,7 +35940,7 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     onChange: handleFileUpload,
     multiple: true,
     type: 'file'
-  }), showRecording ? (/*#__PURE__*/React__default.createElement(AudioCont, null)) : (/*#__PURE__*/React__default.createElement(MessageInputWrapper, {
+  }), showRecording || getAudioRecordingFromMap(activeChannel.id) ? (/*#__PURE__*/React__default.createElement(AudioCont, null)) : (/*#__PURE__*/React__default.createElement(MessageInputWrapper, {
     className: 'message_input_wrapper',
     borderRadius: messageForReply || messageToEdit ? borderRadiusOnOpenedEditReplyMessage : borderRadius,
     ref: inputWrapperRef,
@@ -35900,9 +36073,10 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     iconColor: accentColor,
     activeColor: accentColor
   }, /*#__PURE__*/React__default.createElement(AudioRecord, {
-    sendRecordedFile: setRecordedFile,
+    sendRecordedFile: sendRecordedFile,
     setShowRecording: setShowRecording,
-    showRecording: showRecording
+    showRecording: showRecording,
+    channelId: activeChannel.id
   }))))))))));
 };
 var SendMessageWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  position: relative;\n  z-index: 15;\n"])), function (props) {