quickblox-react-ui-kit 0.5.0-beta.2 → 0.5.0-beta.3

package/dist/index-ui.js

@@ -57268,6 +57268,31 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.message-caption__user{padding:0px 16p
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 3614:
+/***/ ((module) => {
+
+"use strict";
+
+
+module.exports = {
+    'unsupport': 'QBMediaRecorder is not supported this environment.',
+    'unsupportCustomAudioRecorder': 'qbAudioRecorderWorker.js wasn\'t found.',
+    'unsupportAudioContext': 'AudioContext API is not supported this environment.',
+    'unsupportMediaRecorderWithOptions': 'Got a warning when creating a MediaRecorder, trying to create MediaRecorder without options.',
+    'requreArgument': '1 argument required, but only 0 present.',
+    'callbackError': 'Founded an error in callback:',
+    'actionFailed': 'QBMediaRecorder is not created or has an invalid state.',
+    'no_recorded_chunks': 'Does not have any recording data.',
+    'streamRequired': 'MediaStream is required.',
+    'InvalidState': 'QBMediaRecorder is not in a state in which the proposed operation is allowed to be executed.',
+    'OutOfMemory': 'The UA has exhaused the available memory. User agents SHOULD provide as much additional information as possible in the message attribute.',
+    'IllegalStreamModification': 'A modification to the stream has occurred that makes it impossible to continue recording. An example would be the addition of a Track while recording is occurring. User agents SHOULD provide as much additional information as possible in the message attribute.',
+    'OtherRecordingError': 'Used for an fatal error other than those listed above. User agents SHOULD provide as much additional information as possible in the message attribute.',
+    'GenericError': 'The UA cannot provide the codec or recording option that has been requested'
+};
+
 /***/ }),
 
 /***/ 3628:
@@ -57427,6 +57452,758 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.message-item{display:flex;flex-direct
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 4505:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+"use strict";
+
+
+var ERRORS = __webpack_require__(3614);
+
+/**
+ * @constructor QBMediaRecorder
+ * @param {Object}   [opts] - Object of parameters.
+ * @param {String}   opts[].mimeType=video - Specifies the media type and container format for the recording. You can set simply: 'video' or 'audio' or 'audio/webm' ('audio/wav' or 'audio/mp3' mimeTypes uses AudioContext API instead of MediaRecorder API);
+ * @param {String}   opts[].workerPath - Relative path from index.html.
+ * @param {Number}   opts[].timeslice=1000 - The minimum number of milliseconds of data to return in a single Blob, fire 'ondataavaible' callback (isn't need to use with 'audio/wav' of 'audio/mp3').
+ * @param {Boolean}  opts[].ignoreMutedMedia=true - What to do with a muted input MediaStreamTrack, e.g. insert black frames/zero audio volume in the recording or ignore altogether.
+ * @param {Function} opts[].onstart - Called to handle the start event.
+ * @param {Function} opts[].onstop - Called to handle the stop event.
+ * @param {Function} opts[].onpause - Called to handle the pause event.
+ * @param {Function} opts[].onresume - Called to handle the resume event.
+ * @param {Function} opts[].onerror - Called to handle an ErrorEvent.
+ * @param {Function} opts[].onchange - Called to handle the change a stream event.
+ * @param {Function} opts[].ondataavailable - Called to handle the dataavailable event. The Blob of recorded data is contained in this event (Callback isn't supported if use 'audio/wav' of 'audio/mp3' for recording).
+ *
+ * @example
+ * var opts = {
+ *     onstart: function onStart() { // Use named function.
+ *         console.log('Recorder is started');
+ *     },
+ *     onstop: function onStop(Blob) {
+ *         videoElement.src = URL.createObjectURL(blob);
+ *     },
+ *     mimeType: 'video/mp4'
+ * };
+ *
+ * // uses as global variable, QBMediaRecorder is built as a UMD module.
+ * var recorder = new QBMediaRecorder(opts);
+ *
+ * @example
+ * // For record 'audio/mp3' or 'audio/wav' need to add {@link https://github.com/QuickBlox/javascript-media-recorder/blob/master/qbAudioRecorderWorker.js|'qbAudioRecorderWorker.js'} file to your project.
+ * var opts = {
+ *     // use named function
+ *     onstart: function onStart() {
+ *         console.log('Recorder is started');
+ *     },
+ *     onstop: function onStop(Blob) {
+ *         videoElement.src = URL.createObjectURL(blob);
+ *     },
+ *     // 'audio/wav' or 'audio/mp3'
+ *     mimeType: 'audio/mp3',
+ *     // set relative path (from folder node_modules for example)
+ *     workerPath: '../node_modules/javascript-media-recorder/qbAudioRecorderWorker.js'
+ * };
+ *
+ * // uses as global variable, QBMediaRecorder is built as a UMD module.
+ * var recorder = new QBMediaRecorder(opts);
+ */
+function QBMediaRecorder(opts) {
+    this.toggleMimeType(opts.mimeType);
+
+    if (opts.workerPath) {
+        this._setCustomRecorderTools(opts.workerPath);
+    }
+
+    this.timeslice = opts && opts.timeslice && isNaN(+opts.timeslice) ? opts.timeslice : 1000;
+    this.callbacks = opts ? this._getCallbacks(opts) : {};
+    this.recordedBlobs = [];
+    this.ignoreMutedMedia = opts && typeof(opts.ignoreMutedMedia) === 'boolean' ? opts.ignoreMutedMedia : true;
+
+    this._stream = null;
+    this._mediaRecorder = null;
+    this._recordedChunks = [];
+    this._keepRecording = false;
+}
+
+/**
+ * @param  {String} mimeType - The mimeType to set as option.
+ * @return {Boolean}         - True if the MediaRecorder implementation is capable of recording Blob objects for the specified MIME type.
+ *
+ * @example
+ * var opts = {
+ *     onstart: function onStart() {
+ *         console.log('Recorder is started');
+ *     },
+ *     onstop: function onStop(Blob) {
+ *         videoElement.src = URL.createObjectURL(blob);
+ *     },
+ *     mimeType: 'video/mp4',
+ *     // set the path to the worker before if 'audio/wav' or 'audio/mp3' mimeTypes will be used.
+ *     workerPath: '../node_modules/javascript-media-recorder/qbAudioRecorderWorker.js'
+ * };
+ *
+ * var recorder = new QBMediaRecorder(opts);
+ *
+ * recorder.toggleMimeType('audio/mp3');
+ */
+QBMediaRecorder.prototype.toggleMimeType = function(mimeType) {
+    var prefferedMimeType = mimeType ? mimeType : false;
+
+    this._customMimeType = (prefferedMimeType === 'audio/wav') ? 'audio/wav' :
+        (prefferedMimeType === 'audio/mp3') ? 'audio/mp3' : false;
+
+    if (!QBMediaRecorder.isAvailable() && !this._customMimeType) {
+        throw new Error(ERRORS.unsupport);
+    }
+
+    this.mimeType = this._customMimeType ? this._customMimeType : this._getMimeType(prefferedMimeType);
+};
+
+QBMediaRecorder.prototype._setCustomRecorderTools = function(path) {
+    var self = this;
+
+    // init worker for custom audio types (audio/wav, audio/mp3)
+    try {
+        self._worker = new Worker(path);
+
+        self._postMessageToWorker({
+            cmd: 'init',
+            mimeType: self.mimeType
+        });
+
+        self._worker.onmessage = function(event) {
+            self._createBlob(event.data);
+            self._closeAudioProcess();
+        };
+
+        if (!QBMediaRecorder.isAudioContext()) {
+            throw new Error(ERRORS.unsupportAudioContext);
+        }
+
+        /*
+        * context = new AudioContext();
+        * context.createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels);
+        *
+        * link: https://developer.mozilla.org/ru/docs/Web/API/AudioContext/createScriptProcessor
+        */
+        self.BUFFER_SIZE = 2048; // the buffer size in units of sample-frames.
+        self.INPUT_CHANNELS = 1; // the number of channels for this node's input, defaults to 2
+        self.OUTPUT_CHANNELS = 1; // the number of channels for this node's output, defaults to 2
+        self._audioContext = null;
+    } catch(e) {
+        throw new Error(ERRORS.unsupportCustomAudioRecorder, e);
+    }
+};
+
+QBMediaRecorder.prototype._getMimeType = function (preffered) {
+    var mimeType,
+        type = 'video';
+
+    if(preffered && QBMediaRecorder.isTypeSupported(preffered)) {
+        mimeType = preffered;
+    } else if(preffered) {
+        type = preffered.toString().toLowerCase().indexOf('audio') === -1 ? 'video' : 'audio';
+        mimeType = QBMediaRecorder.getSupportedMimeTypes(type)[0];
+    } else {
+        mimeType = QBMediaRecorder.getSupportedMimeTypes(type)[0];
+    }
+
+    return mimeType;
+};
+
+QBMediaRecorder.prototype._getCallbacks = function(opts) {
+    var callbacks = {},
+        callbackNames = ['onstart', 'onstop', 'onpause', 'onresume', 'onerror', 'onchange', 'ondataavailable'];
+
+    callbackNames.forEach(function(name) {
+        if (name in opts) {
+            callbacks[name] = opts[name];
+        }
+    });
+
+    return callbacks;
+};
+
+QBMediaRecorder._mimeTypes = __webpack_require__(9808);
+
+QBMediaRecorder._STATES = ['inactive', 'recording', 'paused'];
+
+/**
+ * It checks capability of recording in the environment.
+ * Checks MediaRecorder, MediaRecorder.isTypeSupported and Blob.
+ * @return {Boolean} Returns true if the QBMediaRecorder is available and can run, or false otherwise.
+ *
+ * @example
+ * if(QBMediaRecorder.isAvailable()) {
+ *     // ... show UI for recording
+ * }
+ */
+QBMediaRecorder.isAvailable = function() {
+    return !!(window && window.MediaRecorder && typeof window.MediaRecorder.isTypeSupported === 'function' && window.Blob);
+};
+
+/**
+ * It checks the AudioContext API.
+ * Checks window.AudioContext or window.webkitAudioContext.
+ * @return {Boolean} Returns true if the AudioContext API is available in a browser, or false otherwise.
+ *
+ * @example
+ * if(QBMediaRecorder.isAudioContext()) {
+ *     // ... the QBMediaRecorder is available for recording 'audio/mp3' or 'audio/wav'
+ * }
+ */
+QBMediaRecorder.isAudioContext = function() {
+    return !!(window && (window.AudioContext || window.webkitAudioContext));
+};
+
+/**
+ * Returns a Boolean which is true if the MIME type specified is one the user agent can record.
+ * @param  {String} mimeType - The mimeType to check.
+ * @return {Boolean}         - True if the MediaRecorder implementation is capable of recording Blob objects for the specified MIME type.
+ *
+ * @example
+ * if( QBMediaRecorder.isTypeSupported('video/mp4') ) {
+ *     el.textContent = 'Will be record in video/mp4';
+ * }
+ */
+QBMediaRecorder.isTypeSupported = function(mimeType) {
+    var result = false;
+
+    if(!QBMediaRecorder.isAvailable()) {
+        throw new Error(ERRORS.unsupport);
+    }
+
+    if(!mimeType) {
+        throw new Error(ERRORS.requreArgument);
+    }
+
+    switch(mimeType) {
+        case 'audio/wav':
+            if (QBMediaRecorder.isAudioContext()) {
+                result = true;
+            }
+            break;
+
+        case 'audio/mp3':
+            if (QBMediaRecorder.isAudioContext()) {
+                result = true;
+            }
+            break;
+
+        default:
+            result = window.MediaRecorder.isTypeSupported(mimeType);
+            break;
+    }
+
+    return result;
+};
+
+/**
+ * Return all supported mime types and container format.
+ * @param  {String} [type=video] Type of media.
+ * @return {Array}               Array of supported mimetypes. Recommended mimetype has 0 index.
+ *
+ * @example
+ * var type = QBMediaRecorder.getSupportedMimeTypes('audio');
+ * console.info(`Call will recording in ${type[0]}`);
+ */
+QBMediaRecorder.getSupportedMimeTypes = function(type) {
+    var typeMedia = type || 'video';
+
+    if (!QBMediaRecorder.isAvailable()) {
+        throw new Error(ERRORS.unsupport);
+    }
+
+    return QBMediaRecorder._mimeTypes[typeMedia].filter(function(mimeType) {
+        return QBMediaRecorder.isTypeSupported(mimeType);
+    });
+};
+
+/**
+ * Return the current [state of QBMediaRecorder instance](https://w3c.github.io/mediacapture-record/MediaRecorder.html#idl-def-recordingstate).
+ * Possibly states: **inactive**, **recording**, **paused**.
+ * @return {String} Name of a state.
+ *
+ * @example
+ * var recorder = new QBMediaRecorder();
+ * // ...some code
+ *
+ * if(recorder.getState() == 'recording') {
+ *     console.info('You are still recording.');
+ * }
+ */
+QBMediaRecorder.prototype.getState = function() {
+    return this._mediaRecorder ? this._mediaRecorder.state : QBMediaRecorder._STATES[0];
+};
+
+
+/**
+ * Start to recording a stream.
+ * Fire the method `stop` if an instance inprogress (has a state recording or paused).
+ * Fire onstart callback.
+ * @param {MediaStream} stream - Stream object representing a flux of audio- or video-related data.
+ * @returns {void}
+ *
+ * @example
+ * var options = {
+ *     onstart: function onStart() {
+ *         var time = 0,
+ *             step = 1000;
+ *
+ *         setTimeout(function () {
+ *             time += step;
+ *             console.info(`You are recording ${time} sec.`);
+ *         }, step);
+ *     }
+ * }
+ *
+ * var rec = new qbRecorder(options);
+ * // ...
+ * rec.start(stream);
+ */
+QBMediaRecorder.prototype.start = function(stream) {
+    var self = this;
+
+    if(!stream) {
+        throw new Error(ERRORS.requreArgument);
+    }
+
+    var mediaRecorderState = this.getState();
+
+    if(mediaRecorderState === QBMediaRecorder._STATES[1] || mediaRecorderState === QBMediaRecorder._STATES[2]) {
+        this._mediaRecorder.stop();
+    }
+
+    if(this._stream) {
+        this._stream = null;
+    }
+    // TODO: need to stream.clone
+    self._stream = stream;
+    self._mediaRecorder = null;
+    self._recordedChunks.length = 0;
+
+    if (self._customMimeType) {
+        self._setCustomRecorder();
+    } else {
+        self._setMediaRecorder();
+    }
+    self._setEvents();
+};
+
+QBMediaRecorder.prototype._setMediaRecorder = function () {
+    var self = this;
+
+    try {
+        self._mediaRecorder = new window.MediaRecorder(self._stream, {
+            'mimeType': self.mimeType,
+            'ignoreMutedMedia': self.ignoreMutedMedia
+        });
+    } catch(e) {
+        console.warn(ERRORS.unsupportMediaRecorderWithOptions, e);
+
+        self._mediaRecorder = new window.MediaRecorder(self._stream);
+    }
+};
+
+QBMediaRecorder.prototype._setCustomRecorder = function() {
+    var self = this;
+
+    self._closeAudioProcess();
+
+    self._mediaRecorder = {
+        start: function() {
+            try {
+                this.state = QBMediaRecorder._STATES[1];
+                self._startAudioProcess();
+                this.onstart();
+            } catch(error) {
+                this.onerror(error);
+            }
+        },
+
+        stop: function() {
+            try {
+                this.state = QBMediaRecorder._STATES[0];
+                self._stopAudioProcess();
+                this.onstop();
+            } catch(error) {
+                this.onerror(error);
+            }
+        },
+
+        pause: function() {
+            try {
+                this.state = QBMediaRecorder._STATES[2];
+                this.onpause();
+            } catch(error) {
+                this.onerror(error);
+            }
+        },
+
+        resume: function() {
+            try {
+                this.state = QBMediaRecorder._STATES[1];
+                this.onresume();
+            } catch(error) {
+                this.onerror(error);
+            }
+        },
+
+        /* callbacks */
+        onstart: function() {
+            if (this.state !== 'recording') {
+                this.state = QBMediaRecorder._STATES[1];
+            }
+        },
+
+        onstop: function() {
+            if (this.state !== 'inactive') {
+                this.state = QBMediaRecorder._STATES[0];
+            }
+        },
+
+        onpause: function() {
+            if (this.state !== 'paused') {
+                this.state = QBMediaRecorder._STATES[2];
+            }
+        },
+
+        onresume: function() {
+            if (this.state !== 'recording') {
+                this.state = QBMediaRecorder._STATES[1];
+            }
+        },
+
+        onerror: function() {
+            try {
+                self._closeAudioProcess();
+            } catch(error) {
+                throw new Error(error);
+            }
+        }
+    };
+};
+
+QBMediaRecorder.prototype._fireCallback = function(name, args) {
+    var self = this;
+
+    if(Object.keys(self.callbacks).length !== 0 && typeof self.callbacks[name] === 'function') {
+        try {
+            self.callbacks[name](args);
+        } catch(e) {
+            console.error('Founded an error in callback:' + name, e);
+        }
+    }
+};
+
+QBMediaRecorder.prototype._setEvents = function() {
+    var self = this;
+
+    if (!self._customMimeType) {
+        self._mediaRecorder.ondataavailable = function(e) {
+            if(e.data && e.data.size > 0) {
+                self._recordedChunks.push(e.data);
+                self._fireCallback('ondataavailable', e);
+            }
+        };
+    }
+
+    self._mediaRecorder.onpause = function() {
+        self._fireCallback('onpause');
+    };
+
+    self._mediaRecorder.onresume = function() {
+        self._fireCallback('onresume');
+    };
+
+    self._mediaRecorder.onerror = function(error) {
+        switch(error.name) {
+            case 'InvalidState':
+                console.error(ERRORS[error.name]);
+                break;
+
+            case 'OutOfMemory':
+                console.error(ERRORS[error.name]);
+                break;
+
+            case 'IllegalStreamModification':
+                console.error(ERRORS[error.name]);
+                break;
+
+            case 'OtherRecordingError':
+                console.error(ERRORS[error.name]);
+                break;
+
+            case 'GenericError':
+                console.error(ERRORS[error.name]);
+                break;
+
+            default:
+                console.error('MediaRecorder Error', error);
+                break;
+        }
+
+        if (self._mediaRecorder.state !== 'inactive') {
+            self._mediaRecorder.stop();
+        }
+
+        if (self._userCallbacks && typeof self._userCallbacks.onErrorRecording === 'function') {
+            self._fireCallback('onerror', error);
+        }
+    };
+
+    self._mediaRecorder.onstop = function() {
+        if (self._customMimeType) {
+            self._stopAudioProcess();
+        } else {
+            self._createBlob(self._recordedChunks);
+        }
+    };
+
+    self._mediaRecorder.start(self.timeslice);
+
+    self._fireCallback('onstart');
+};
+
+/**
+ * Stop to recording a stream.
+ * @return {Blob} Blob of recorded chuncks.
+ */
+QBMediaRecorder.prototype.stop = function() {
+    var mediaRecorder = this._mediaRecorder,
+        mediaRecorderState = mediaRecorder && mediaRecorder.state ? mediaRecorder.state : 'inactive';
+
+    if(mediaRecorder && (mediaRecorderState === 'recording' || mediaRecorderState === 'paused')){
+        mediaRecorder.stop();
+    } else {
+        console.warn(ERRORS.actionFailed);
+    }
+};
+
+/**
+ * Pause to recording a stream.
+ * @returns {void}
+ */
+QBMediaRecorder.prototype.pause = function() {
+    var self = this;
+
+    if(self._mediaRecorder && self._mediaRecorder.state === 'recording') {
+        self._mediaRecorder.pause();
+    } else {
+        console.warn(ERRORS.actionFailed);
+    }
+};
+
+/**
+ * Resume to recording a stream.
+ * @returns {void}
+ */
+QBMediaRecorder.prototype.resume = function() {
+    var self = this;
+
+    if(self._mediaRecorder && self._mediaRecorder.state === 'paused') {
+        self._mediaRecorder.resume();
+    } else {
+        console.warn(ERRORS.actionFailed);
+    }
+};
+
+/**
+ * Change a recorded stream.
+ * @param {MediaStream} stream - Stream object representing a flux of audio- or video-related data.
+ * @returns {void}
+ */
+QBMediaRecorder.prototype.change = function(stream) {
+    var self = this;
+
+    if(!stream) {
+        throw new Error(ERRORS.requreArgument);
+    }
+
+    self._keepRecording = true; // don't stop a record
+    self.stop();
+
+    self._stream = null;
+    self._mediaRecorder = null;
+
+    // TODO stream.clone
+    self._stream = stream;
+
+    if (self._customMimeType) {
+        self._setCustomRecorder();
+    } else {
+        self._setMediaRecorder();
+    }
+
+    self._setEvents();
+};
+
+/**
+ * Create a file from blob and download as the file. Its method will fire 'stop' if recording in progress.
+ * @param {Strint} [fileName=Date.now()] - Name of file.
+ * @param {Blob}   [blob] - You can set blob which you get from the method `stop` or don't set anything and we will get recorded chuncks.
+ * @returns {void}
+ *
+ * @example
+ * var rec = new qbRecorder();
+ * rec.start(stream);
+ * // ...
+ * rec.download(false); // Set false, name will be generated based on Date.now()
+ */
+QBMediaRecorder.prototype.download = function(fileName, blob) {
+    var self = this;
+
+    var mediaRecorderState = this.getState();
+
+    if(mediaRecorderState === QBMediaRecorder._STATES[1] || mediaRecorderState === QBMediaRecorder._STATES[2]) {
+        this._mediaRecorder.stop();
+    }
+
+    var url = URL.createObjectURL(blob || self._getBlobRecorded()),
+        a = document.createElement('a');
+
+    a.style.display = 'none';
+    a.href = url;
+    a.download = (fileName || Date.now()) + '.' + self._getExtension();
+
+    document.body.appendChild(a);
+
+    // Start dowloading
+    a.click();
+
+    // Remove link
+    setTimeout(function() {
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+    }, 100);
+};
+
+QBMediaRecorder.prototype._createBlob = function(chunks) {
+    var self = this;
+
+    var blob = new Blob(chunks, {
+        'type' : self.mimeType
+    });
+
+    self.recordedBlobs.push(blob);
+
+    if(!self._keepRecording) {
+        if(self.recordedBlobs.length > 1) {
+            self._fireCallback('onstop', blob);
+        } else {
+            self._fireCallback('onstop', self.recordedBlobs[0]);
+        }
+    }
+
+    self._keepRecording = false;
+};
+
+/**
+ * Create a Blob from recorded chunks.
+ * @access private
+ * @param {Object} [data] - Recorded data.
+ * @return {Object} - Blob of recorded media or what you set in data
+ */
+QBMediaRecorder.prototype._getBlobRecorded = function(data) {
+    var self = this,
+        chunks = data || self._recordedChunks;
+
+    if(!chunks.length) {
+        console.warn(ERRORS.no_recorded_chunks);
+        return false;
+    }
+
+    return new Blob(chunks, { 'type' : self.mimeType });
+};
+
+/**
+ * Return a extension of a file. Based on available mimeType.
+ * @access private
+ * @return {String} For example, 'webm' / 'mp4' / 'ogg'
+ */
+QBMediaRecorder.prototype._getExtension = function() {
+    var self = this;
+
+    var endTypeMedia = self.mimeType.indexOf('/'),
+        extension = self.mimeType.substring(endTypeMedia + 1),
+        startCodecsInfo = extension.indexOf(';');
+
+    if(startCodecsInfo !== -1) {
+        extension = extension.substring(0, startCodecsInfo);
+    }
+
+    return extension;
+};
+
+
+QBMediaRecorder.prototype._startAudioProcess = function() {
+    if(!QBMediaRecorder.isAudioContext()) {
+        throw new Error(ERRORS.unsupport);
+    }
+
+    var self = this,
+        audioContext,
+        audioInput,
+        recorder,
+        volume;
+
+    self._closeAudioProcess();
+
+    audioContext = window.AudioContext || window.webkitAudioContext;
+    self._audioContext = new audioContext;
+
+    volume = self._audioContext.createGain();
+    audioInput = self._audioContext.createMediaStreamSource(self._stream);
+    recorder = self._audioContext.createScriptProcessor(self.BUFFER_SIZE, self.INPUT_CHANNELS, self.OUTPUT_CHANNELS);
+    audioInput.connect(volume);
+
+    self._postMessageToWorker({
+        cmd: 'init',
+        mimeType: self.mimeType,
+        sampleRate: audioInput.context.sampleRate
+    });
+
+    recorder.onaudioprocess = function(e) {
+        if (self._mediaRecorder.state === QBMediaRecorder._STATES[1]) {
+            self._postMessageToWorker({
+                cmd: 'record',
+                bufferChunk: e.inputBuffer.getChannelData(0),
+                bufferSize: self.BUFFER_SIZE
+            });
+        }
+    };
+
+    volume.connect(recorder);
+    recorder.connect(self._audioContext.destination);
+};
+
+QBMediaRecorder.prototype._closeAudioProcess = function() {
+    var self = this;
+
+    if (self._audioContext) {
+        self._audioContext.close()
+            .then(function() {
+                self._audioContext = null;
+                self._postMessageToWorker({cmd: 'init', mimeType: ''});
+            });
+    }
+};
+
+QBMediaRecorder.prototype._stopAudioProcess = function() {
+    this._postMessageToWorker({cmd: 'finish'});
+};
+
+QBMediaRecorder.prototype._postMessageToWorker = function(data) {
+    if (this._worker) {
+        this._worker.postMessage(data);
+    }
+};
+
+module.exports = QBMediaRecorder;
+
 /***/ }),
 
 /***/ 4538:
@@ -58061,7 +58838,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.chat-container{width:100%}.chat-conta
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.header-dialog-info,.header-dialog-info *{box-sizing:border-box}.header-dialog-info{padding:16px 16px 16px 24px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-self:stretch;flex-shrink:0;position:relative;border-bottom:1px solid var(--divider);height:64px}.header-dialog-info-headline{color:var(--main-text, #0b1b0f);text-align:left;font:var(--title-title-large);position:relative}.header-dialog-info-icon{width:24px;height:24px;fill:var(--secondary-elements)}.dialog-information-profile,.dialog-information-profile *{box-sizing:border-box}.dialog-information-profile{padding:24px 0px 24px 0px;align-self:stretch;flex-flow:column;flex-shrink:0;height:160px;position:relative;border-bottom:1px solid var(--divider)}.dialog-information-profile-avatar{height:80px;left:140px;top:24px}.dialog-info-profile-avatar-default-icon{display:flex;justify-content:center}.dialog-info-profile-avatar-ellipse{border-radius:50%;position:absolute;height:81px;width:81px;top:24px}.dialog-info-profile-avatar-contents{position:absolute;right:17.86%;left:17.86%;width:64.29%;bottom:17.86%;top:17.86%;height:64.29%;overflow:visible}.dialog-information-profile-dialog-name{margin-top:8px;color:var(--main-text, #0b1b0f);text-align:center;font:var(--title-title-medium);left:134.5px;top:112px;display:flex;align-items:center;justify-content:center}.dialog-information-profile-edit{right:-10px;border-radius:4px;padding:8px 56px 0px 0px;display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;position:absolute;top:8px}.dialog-information-profile-edit-button{color:var(--main-elements, #3978fc);text-align:left;font:var(--button-default);position:relative}.dialog-information-profile-edit-button--disable{color:var(--disabled-elements);cursor:default}.dialog-info-action-wrapper-settings,.dialog-info-action-wrapper-settings *{box-sizing:border-box}.dialog-info-action-wrapper-settings{background:var(--color-background, #ffffff);padding:16px;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;align-self:stretch;flex-shrink:0;position:relative;border-bottom:1px solid var(--divider)}@media only screen and (max-width: var(--min-width-screen-desktop)){.dialog-info-action-wrapper-settings{padding:6px}}.no-padding{padding:0}.dialog-info-action-wrapper-settings-icon{border-radius:4px;padding:4px;display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;position:relative}.dialog-info-action-wrapper-settings-subtitle{color:var(--main-text, #0b1b0f);text-align:left;font:var(--body-body-large);position:relative;flex:1;display:flex;align-items:center;justify-content:flex-start}.dialog-info-action-wrapper-settings-contents{flex-shrink:0;width:24px;height:24px;position:relative;overflow:visible}.dialog-info-action-wrapper-settings-right{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-end;flex-shrink:0;position:relative}.dialog-info-action-wrapper-settings-right-badge{background:var(--disabled-elements, #bcc1c5);border-radius:30px;padding:2px 6px 2px 6px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;flex-shrink:0;position:relative}.dialog-info-action-wrapper-settings-right-badge-title{color:var(--color-background, #ffffff);text-align:center;font:var(--label-label-medium);position:relative;padding:0 5px 0 5px}.dialog-info-leave{fill:var(--error);border-bottom:1px solid var(--divider);cursor:pointer}.dialog-info-leave--disable{fill:var(--disabled-elements);cursor:default}.dialog-info-members{fill:var(--main-elements);border-bottom:1px solid var(--divider)}.dialog-info-action-wrapper-button{border:1px solid var(--secondary-elements);color:var(--secondary-elements)}.dialog-info-action-wrapper-button:active{border:1px solid var(--secondary-elements);color:var(--secondary-elements)}.dialog-info-action-wrapper-button:focus{border:1px solid var(--secondary-elements)}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.header-dialog-info,.header-dialog-info *{box-sizing:border-box}.header-dialog-info{padding:16px 16px 16px 24px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;align-self:stretch;flex-shrink:0;position:relative;border-bottom:1px solid var(--divider);height:64px}.header-dialog-info-headline{color:var(--main-text, #0b1b0f);text-align:left;font:var(--title-title-large);position:relative}.header-dialog-info-icon{width:24px;height:24px;fill:var(--secondary-elements)}.dialog-information-profile,.dialog-information-profile *{box-sizing:border-box}.dialog-information-profile{padding:24px 0px 24px 0px;align-self:stretch;flex-flow:column;flex-shrink:0;height:160px;position:relative;border-bottom:1px solid var(--divider)}.dialog-information-profile-avatar{height:80px;left:140px;top:24px}.dialog-info-profile-avatar-default-icon{display:flex;justify-content:center}.dialog-info-profile-avatar-ellipse{border-radius:50%;position:absolute;height:81px;width:81px;top:24px}.dialog-info-profile-avatar-contents{position:absolute;right:17.86%;left:17.86%;width:64.29%;bottom:17.86%;top:17.86%;height:64.29%;overflow:visible}.dialog-information-profile-dialog-name{margin-top:8px;color:var(--main-text, #0b1b0f);text-align:center;font:var(--title-title-medium);left:134.5px;top:112px;display:flex;align-items:center;justify-content:center}.dialog-information-profile-edit{right:-10px;border-radius:4px;padding:8px 56px 0px 0px;display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;position:absolute;top:8px}.dialog-information-profile-edit-button{color:var(--main-elements, #3978fc);text-align:left;font:var(--button-default);position:relative}.dialog-information-profile-edit-button--disable{color:var(--disabled-elements);cursor:default}.dialog-info-action-wrapper-settings,.dialog-info-action-wrapper-settings *{box-sizing:border-box}.dialog-info-action-wrapper-settings{padding:16px;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;align-self:stretch;flex-shrink:0;position:relative;border-bottom:1px solid var(--divider)}@media only screen and (max-width: var(--min-width-screen-desktop)){.dialog-info-action-wrapper-settings{padding:6px}}.no-padding{padding:0}.dialog-info-action-wrapper-settings-icon{border-radius:4px;padding:4px;display:flex;flex-direction:row;gap:0;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;position:relative}.dialog-info-action-wrapper-settings-subtitle{color:var(--main-text, #0b1b0f);text-align:left;font:var(--body-body-large);position:relative;flex:1;display:flex;align-items:center;justify-content:flex-start}.dialog-info-action-wrapper-settings-contents{flex-shrink:0;width:24px;height:24px;position:relative;overflow:visible}.dialog-info-action-wrapper-settings-right{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-end;flex-shrink:0;position:relative}.dialog-info-action-wrapper-settings-right-badge{background:var(--disabled-elements, #bcc1c5);border-radius:30px;padding:2px 6px 2px 6px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;flex-shrink:0;position:relative}.dialog-info-action-wrapper-settings-right-badge-title{color:var(--color-background, #ffffff);text-align:center;font:var(--label-label-medium);position:relative;padding:0 5px 0 5px}.dialog-info-leave{fill:var(--error);border-bottom:1px solid var(--divider);cursor:pointer}.dialog-info-leave--disable{fill:var(--disabled-elements);cursor:default}.dialog-info-members{fill:var(--main-elements);border-bottom:1px solid var(--divider)}.dialog-info-action-wrapper-button{border:1px solid var(--secondary-elements);color:var(--secondary-elements)}.dialog-info-action-wrapper-button:active{border:1px solid var(--secondary-elements);color:var(--secondary-elements)}.dialog-info-action-wrapper-button:focus{border:1px solid var(--secondary-elements)}`, ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -58423,7 +59200,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.dialog-list-header{font-family:"Robot
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.dialog-preview-container{display:flex;border:1px solid var(--chat-input);gap:16px}.dialog-preview-container-left{flex:1;margin-left:10px}.dialog-preview-container-right{display:flex;align-items:center;justify-content:center;width:40px}.dialog-preview,.dialog-preview *{box-sizing:border-box}.dialog-preview{padding:6px 6px 6px 6px;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;align-self:stretch;flex-shrink:0;position:relative}.dialog-preview-item{background:var(--color-background, #ffffff);display:flex;flex-direction:row;align-items:center;justify-content:space-between}.dialog-preview-avatar{flex-shrink:0;width:56px;height:56px;position:relative}.dialog-preview-avatar-rectangle{position:absolute;right:0%;left:0%;width:100%;bottom:0%;top:0%;height:100%}.dialog-preview-avatar-ellipse{background:var(--disabled-elements, #bcc1c5);border-radius:50%;position:absolute;right:0%;left:0%;width:100%;bottom:0%;top:0%;height:100%}.dialog-preview-avatar-contents-user{height:auto;position:absolute;right:17.86%;left:17.86%;width:64.29%;bottom:17.86%;top:17.86%;height:64.29%;overflow:visible}.dialog-preview-text{display:flex;flex-direction:column;gap:2px;align-items:flex-start;justify-content:flex-start;flex:1;position:relative}.dialog-preview-text-subtitle{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;align-self:stretch;flex-shrink:0;position:relative}.dialog-preview-text-subtitle-caption{display:flex;flex-direction:row;gap:0px;align-items:center;justify-content:flex-start;flex-shrink:0;position:relative}.dialog-preview-text-subtitle-caption-name{color:var(--main-text, #0b1b0f);text-align:left;font:var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);position:relative}.dialog-item-preview-text{color:var(--main-text);text-align:left;font:var(--body-body-small, 400 12px/16px "Roboto", sans-serif);position:relative;align-self:stretch;height:32px}.dialog-preview-text-subtitle-caption2{display:flex;flex-direction:row;gap:0px;align-items:flex-start;justify-content:flex-start;flex-shrink:0;position:relative}.dialog-preview-text-subtitle-caption2-time{color:var(--tertiary-elements, #636d78);text-align:right;font:var(--label-label-small, 500 11px/16px "Roboto", sans-serif);position:relative}.dialog-preview-text-subtitle-text{color:var(--secondary-text, #636d78);text-align:left;font:var(--body-body-small, 400 12px/16px "Roboto", sans-serif);position:relative;align-self:stretch;display:inline-block;word-wrap:break-word;overflow:hidden;max-height:32px;height:32px}.dialog-preview-text-subtitle-message-badge{background:var(--main-elements, #3978fc);border-radius:30px;padding:2px 6px 2px 6px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;flex-shrink:0;position:relative;height:22px}.dialog-preview-text-subtitle-message-badge-v{color:var(--color-background, #ffffff);text-align:center;font:var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);position:relative}.dialog-preview-text-subtitle-message{display:flex;flex-flow:row;align-items:center;justify-content:space-between;align-self:stretch}.dialog-preview-icon-close{border-radius:4px;padding:4px;display:flex;flex-direction:row;gap:0px;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:22px;position:relative;cursor:pointer}.dpa-contents-user{height:auto;position:absolute;right:17.86%;left:17.86%;width:64.29%;bottom:17.86%;top:17.86%;height:64.29%;overflow:visible}.dialog-item-preview-border{border-style:solid;border-color:var(--color-divider, #e7efff);border-width:0 0 1px 0}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.dialog-preview-container{display:flex;border:1px solid var(--chat-input);gap:16px}.dialog-preview-container-left{flex:1;margin-left:10px}.dialog-preview-container-right{display:flex;align-items:center;justify-content:center;width:40px}.dialog-preview,.dialog-preview *{box-sizing:border-box}.dialog-preview{padding:6px 6px 6px 6px;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;align-self:stretch;flex-shrink:0;position:relative}.dialog-preview-item{background:var(--color-background, #ffffff);display:flex;flex-direction:row;align-items:center;justify-content:space-between}.dialog-preview-avatar{flex-shrink:0;width:56px;height:56px;position:relative}.dialog-preview-avatar-rectangle{position:absolute;right:0%;left:0%;width:100%;bottom:0%;top:0%;height:100%}.dialog-preview-avatar-ellipse{background:var(--disabled-elements, #bcc1c5);border-radius:50%;position:absolute;right:0%;left:0%;width:100%;bottom:0%;top:0%;height:100%}.dialog-preview-avatar-contents-user{height:auto;position:absolute;right:17.86%;left:17.86%;width:64.29%;bottom:17.86%;top:17.86%;height:64.29%;overflow:visible}.dialog-preview-text{display:flex;flex-direction:column;gap:2px;align-items:flex-start;justify-content:flex-start;flex:1;position:relative}.dialog-preview-text-subtitle{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;align-self:stretch;flex-shrink:0;position:relative}.dialog-preview-text-subtitle-caption{display:flex;flex-direction:row;gap:0px;align-items:center;justify-content:flex-start;flex-shrink:0;position:relative}.dialog-preview-text-subtitle-caption-name{color:var(--main-text, #0b1b0f);text-align:left;font:var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);position:relative}.dialog-item-preview-text{color:var(--main-text);text-align:left;font:var(--body-body-small, 400 12px/16px "Roboto", sans-serif);position:relative;align-self:stretch;height:32px}.dialog-preview-text-subtitle-caption2{display:flex;flex-direction:row;gap:0px;align-items:flex-start;justify-content:flex-start;flex-shrink:0;position:relative}.dialog-preview-text-subtitle-caption2-time{color:var(--tertiary-elements, #636d78);text-align:right;font:var(--label-label-small, 500 11px/16px "Roboto", sans-serif);position:relative}.dialog-preview-text-subtitle-text{color:var(--secondary-text, #636d78);text-align:left;font:var(--body-body-small, 400 12px/16px "Roboto", sans-serif);position:relative;align-self:stretch;display:inline-block;word-wrap:break-word;overflow:hidden;max-height:32px;height:32px}.dialog-preview-text-subtitle-message-badge{background:var(--main-elements, #3978fc);border-radius:30px;padding:2px 6px 2px 6px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;flex-shrink:0;position:relative;height:22px}.dialog-preview-text-subtitle-message-badge-v{color:var(--color-background, #ffffff);text-align:center;font:var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);position:relative}.dialog-preview-text-subtitle-message{display:flex;flex-flow:row;align-items:center;justify-content:space-between;align-self:stretch}.dialog-preview-icon-close{border-radius:4px;padding:4px;display:flex;flex-direction:row;gap:0px;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:22px;position:relative;cursor:pointer}.dpa-contents-user{height:auto;position:absolute;right:17.86%;left:17.86%;width:64.29%;bottom:17.86%;top:17.86%;height:64.29%;overflow:visible}.dialog-item-preview-border{border-style:solid;border-color:var(--color-divider, #e7efff);border-width:0 0 1px 0}.dialog-preview-container-context-menu svg{fill:var(--tertiary-elements);width:24px;height:24px}`, ""]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -59411,6 +60188,33 @@ ___CSS_LOADER_EXPORT___.push([module.id, `.main-button {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 9808:
+/***/ ((module) => {
+
+"use strict";
+
+
+module.exports = {
+    'audio': [
+        'audio/webm;codecs=opus',
+        'audio/webm',
+        'audio/ogg',
+        'audio/mp3',
+        'audio/wav'
+    ],
+    'video': [
+        'video/webm;codecs=vp9',
+        'video/webm;codecs=vp8',
+        'video/webm;codecs=h264',
+        'video/webm;codecs=opus',
+        'video/webm',
+        'video/mp4',
+        'video/mpeg'
+    ]
+};
+
 /***/ }),
 
 /***/ 9811:
@@ -68207,8 +69011,8 @@ class UsersRepository {
             for (let i = 0; i < usersIds.length; i += 1) {
                 let dto = new RemoteUserDTO();
                 dto.id = usersIds[i]?.toString() || '-1';
-                // eslint-disable-next-line no-await-in-loop
                 try {
+                    // eslint-disable-next-line no-await-in-loop
                     dto = await this.remoteDataSource.getUser(dto);
                 }
                 catch (e) {
@@ -68398,6 +69202,14 @@ function useDialogListViewModel(currentContext, initPagination) {
             }
         });
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+    function informDataSources(item) {
+        const updateCurrentDialogInDataSourceUseCase = new UpdateCurrentDialogInDataSourceUseCase(new DialogsRepository(currentContext.storage.LOCAL_DATA_SOURCE, remoteDataSourceMock), item, QBConfig);
+        updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
+            console.log('Error updateCurrentDialogInDataSourceUseCase: ', parse_stringifyError(e));
+            throw new Error(parse_stringifyError(e));
+        });
+    }
     const dialogUpdateHandler = (dialogInfo) => {
         console.log('call dialogUpdateHandler in useDialogListView:', dialogInfo);
         if (dialogInfo.eventMessageType === EventMessageType.SystemMessage
@@ -68467,7 +69279,13 @@ function useDialogListViewModel(currentContext, initPagination) {
                 setDialogs((prevDialogs) => {
                     const newDialogs = prevDialogs.map((dialog) => {
                         if (dialog.id === dialogInfo.dialogInfo?.id) {
-                            return dialogInfo.dialogInfo;
+                            const updatedDialogInfo = {
+                                ...dialogInfo.dialogInfo,
+                                unreadMessageCount: dialog.id === newDialog?.id
+                                    ? 0
+                                    : dialogInfo.dialogInfo.unreadMessageCount,
+                            };
+                            return updatedDialogInfo;
                         }
                         return dialog;
                     });
@@ -68478,11 +69296,6 @@ function useDialogListViewModel(currentContext, initPagination) {
                             : new Date(b.updatedAt).getTime() -
                                 new Date(a.updatedAt).getTime();
                     });
-                    // const sortedData = [...newDialogs].sort((a, b) => {
-                    //     return (
-                    //         new Date(b.lastMessage.dateSent).getTime() - new Date(a.lastMessage.dateSent).getTime()
-                    //     );
-                    // });
                     return sortedData;
                 });
             }
@@ -68627,14 +69440,6 @@ function useDialogListViewModel(currentContext, initPagination) {
         });
         return Promise.resolve(resultEnity);
     };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
-    function informDataSources(item) {
-        const updateCurrentDialogInDataSourceUseCase = new UpdateCurrentDialogInDataSourceUseCase(new DialogsRepository(currentContext.storage.LOCAL_DATA_SOURCE, remoteDataSourceMock), item, QBConfig);
-        updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
-            console.log('Error updateCurrentDialogInDataSourceUseCase: ', parse_stringifyError(e));
-            throw new Error(parse_stringifyError(e));
-        });
-    }
     return {
         get entity() {
             return newDialog;
@@ -73839,7 +74644,7 @@ additionalSettings = undefined, }) => {
                 if (value === 'Leave') {
                     onLeaveDialog(dialogViewModel?.entity);
                 }
-            }, placement: "left", children: (0,jsx_runtime_.jsx)(morereact, {}) }), onClick: () => {
+            }, placement: "left", children: (0,jsx_runtime_.jsx)("div", { className: "dialog-preview-container-context-menu", children: (0,jsx_runtime_.jsx)(morereact, { className: "" }) }) }), onClick: () => {
             if (dialogViewModel && dialogViewModel.itemClickActionHandler) {
                 dialogViewModel.itemClickActionHandler(dialogViewModel?.item);
             }
@@ -75322,6 +76127,9 @@ const CreateNewDialogFlow = ({ dialogsViewModel, onFinished, onCancel, isOnline,
 };
 /* harmony default export */ const CreateDialogFlow_CreateNewDialogFlow = (CreateNewDialogFlow);
 
+// EXTERNAL MODULE: ./node_modules/media-recorder-js/src/index.js
+var media_recorder_js_src = __webpack_require__(4505);
+var src_default = /*#__PURE__*/__webpack_require__.n(media_recorder_js_src);
 ;// ./src/Presentation/components/UI/svgs/Icons/AIWidgets/AIWidget/index.tsx
 
 function AIWidgetIcon(theme = undefined) {
@@ -77040,12 +77848,13 @@ function UseDefaultAITranslateWidgetWithSDK(dataSource, smartChatAssistantId) {
 
 
 
+
 
 
 // part 1 includes end
 function useQuickBloxUIKit({ AIRephrase = undefined, AITranslate = undefined, AIAssist = undefined, uikitHeightOffset = '0px', }) {
     // 103
-    const mimeType = 'audio/webm;codecs=opus'; // audio/ogg audio/mpeg audio/webm audio/x-wav audio/mp4
+    // const mimeType = 'audio/webm;codecs=opus'; // audio/ogg audio/mpeg audio/webm audio/x-wav audio/mp4
     const messagePerPage = 47;
     const currentContext = QuickBloxUIKitProvider_useQbInitializedDataContext();
     const QBConfig = currentContext.InitParams.qbConfig ||
@@ -77222,10 +78031,13 @@ function useQuickBloxUIKit({ AIRephrase = undefined, AITranslate = undefined, AI
     const [fileToSend, setFileToSend] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(null);
     const [isRecording, setIsRecording] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(false);
     const [permission, setPermission] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(false);
-    const [stream, setStream] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)();
-    const mediaRecorder = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useRef)();
-    const [resultAudioBlob, setResultAudioBlob] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)();
+    //
+    const [stream, setStream] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(null);
+    const mediaRecorder = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useRef)(null);
+    const [resultAudioBlob, setResultAudioBlob] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(null);
     const [audioChunks, setAudioChunks] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)([]);
+    const [peerConnection, setPeerConnection] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(null);
+    //
     const newModal = hooks_useModal();
     const [dialogToLeave, setDialogToLeave] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)();
     const [showDialogList, setShowDialogList] = (0,external_commonjs_react_commonjs2_react_amd_react_root_React_.useState)(true);
@@ -77316,167 +78128,129 @@ function useQuickBloxUIKit({ AIRephrase = undefined, AITranslate = undefined, AI
             closeReplyMessageFlowHandler();
         });
     };
-    const getMicrophonePermission = async () => {
-        if (window) {
-            try {
-                const mediaStream = await navigator.mediaDevices.getUserMedia({
-                    audio: true,
-                    video: false,
-                });
-                setPermission(true);
-                setStream(mediaStream);
-            }
-            catch (err) {
-                showErrorMessage(`The MediaRecorder API throws exception ${parse_stringifyError(err)} .`);
-            }
-        }
-        else {
-            showErrorMessage('The MediaRecorder API is not supported in your browser.');
-        }
-    };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
-    const startRecording = async () => {
-        if (!stream)
-            return;
-        // Определение браузера
+    // Detect browser and set MIME type
+    const detectBrowserAndMimeType = () => {
         const userAgent = navigator.userAgent.toLowerCase();
         const isChrome = /chrome/.test(userAgent) && !/edge|opr|brave/.test(userAgent);
         const isSafari = /^((?!chrome|android).)*safari/.test(userAgent);
         const isFirefox = /firefox/.test(userAgent);
-        const isOther = !isChrome && !isSafari && !isFirefox;
-        // eslint-disable-next-line no-nested-ternary
-        console.log('Browser is:', 
+        const isIOS = /iphone|ipad|ipod/.test(userAgent);
+        console.log(`Browser detected: ${
         // eslint-disable-next-line no-nested-ternary
         isChrome
             ? 'Chrome'
             : // eslint-disable-next-line no-nested-ternary
                 isSafari
                     ? 'Safari'
-                    : isFirefox
-                        ? 'Firefox'
-                        : 'Other');
+                    : // eslint-disable-next-line no-nested-ternary
+                        isFirefox
+                            ? 'Firefox'
+                            : isIOS
+                                ? 'iOS'
+                                : 'Other'}`);
         const mimeTypes = {
             chrome: ['audio/webm;codecs=opus', 'audio/webm'],
-            safari: ['audio/wav', 'audio/aac'],
+            safari: ['audio/mp4', 'audio/mp4;codecs=mp4a', 'audio/aac', 'audio/wav'],
+            ios: ['audio/mp4', 'audio/mp4;codecs=mp4a', 'audio/aac'],
             firefox: ['audio/ogg', 'audio/webm'],
-            other: ['audio/mp3', 'audio/wav', 'audio/webm'],
+            other: ['audio/webm', 'audio/mp4', 'audio/wav'],
         };
-        let mimeContent = 'audio/webm;codecs=opus';
-        if (isChrome) {
-            mimeContent =
-                mimeTypes.chrome.find((type) => MediaRecorder.isTypeSupported(type)) ||
-                    'audio/webm';
-        }
-        else if (isSafari) {
-            mimeContent =
-                mimeTypes.safari.find((type) => MediaRecorder.isTypeSupported(type)) ||
-                    'audio/wav';
-        }
-        else if (isFirefox) {
-            mimeContent =
-                mimeTypes.firefox.find((type) => MediaRecorder.isTypeSupported(type)) ||
-                    'audio/webm';
-        }
-        else if (isOther) {
-            mimeContent =
-                mimeTypes.other.find((type) => MediaRecorder.isTypeSupported(type)) ||
-                    'audio/wav';
-        }
-        console.log(`Selected MIME-type: ${mimeContent}`);
+        // eslint-disable-next-line no-nested-ternary
+        const targetMimeTypes = isIOS
+            ? mimeTypes.ios
+            : // eslint-disable-next-line no-nested-ternary
+                isSafari
+                    ? mimeTypes.safari
+                    : // eslint-disable-next-line no-nested-ternary
+                        isChrome
+                            ? mimeTypes.chrome
+                            : isFirefox
+                                ? mimeTypes.firefox
+                                : mimeTypes.other;
+        return (targetMimeTypes.find((type) => src_default().isTypeSupported(type)) ||
+            'audio/wav');
+    };
+    // Request microphone access and setup WebRTC
+    const getMicrophonePermission = async () => {
+        if (!window) {
+            showErrorMessage('The MediaRecorder API is not supported in your browser.');
+            return;
+        }
         try {
-            const media = new MediaRecorder(stream, { mimeType: mimeContent });
-            mediaRecorder.current = media;
-            mediaRecorder.current.start();
-            const localAudioChunks = [];
-            mediaRecorder.current.ondataavailable = (event) => {
-                if (event.data.size > 0) {
-                    localAudioChunks.push(event.data);
-                }
+            const mediaStream = await navigator.mediaDevices.getUserMedia({
+                audio: true,
+            });
+            // Create WebRTC peer connection
+            const pc = new RTCPeerConnection();
+            mediaStream
+                .getTracks()
+                .forEach((track) => pc.addTrack(track, mediaStream));
+            pc.ontrack = (event) => {
+                setStream(event.streams[0]);
             };
-            setAudioChunks(localAudioChunks);
+            setPeerConnection(pc);
+            setStream(mediaStream);
+            setPermission(true);
+            console.log('Microphone access granted, WebRTC connection established.');
         }
-        catch (error) {
-            console.error('Ошибка при создании MediaRecorder:', error);
+        catch (err) {
+            showErrorMessage(`The MediaRecorder API throws exception ${parse_stringifyError(err)}.`);
         }
     };
-    // previous version - startRecording:
-    // const startRecording = async () => {
-    //   if (!stream) return;
-    //   const mimeTypes = [
-    //     'audio/aac',
-    //     'audio/mp4',
-    //     'audio/mpeg',
-    //     'audio/ogg',
-    //     'audio/wav',
-    //     'audio/webm',
-    //     'audio/3gpp',
-    //     'audio/flac',
-    //     'audio/x-aiff',
-    //     'audio/x-m4a',
-    //   ];
-    //
-    //   console.log('MIME TYPES: ');
-    //   mimeTypes.forEach((mType) => {
-    //     if (MediaRecorder.isTypeSupported(mimeType)) {
-    //       console.log(`${mType} is supported`);
-    //     } else {
-    //       console.log(`${mType} is not supported`);
-    //     }
-    //   });
-    //   // audio/mp4;codecs=mp4a audio/webm;codecs=opus audio/webm;codecs=vp9,opus
-    //   const mimeContent = window.MediaRecorder.isTypeSupported('audio/mp4')
-    //     ? 'audio/mp4;codecs=mp4a'
-    //     : 'audio/webm;codecs=opus';
-    //
-    //   const media = new MediaRecorder(stream, { mimeType: mimeContent });
-    //
-    //   mediaRecorder.current = media;
-    //   mediaRecorder.current.start();
-    //
-    //   const localAudioChunks: any[] = [];
-    //
-    //   mediaRecorder.current.ondataavailable = (event) => {
-    //     if (typeof event.data === 'undefined') return;
-    //     if (event.data.size === 0) return;
-    //     localAudioChunks.push(event.data);
-    //   };
-    //
-    //   setAudioChunks(localAudioChunks);
-    // };
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // Start recording using QBMediaRecorder
+    // eslint-disable-next-line @typescript-eslint/require-await
+    const startRecording = async () => {
+        if (!stream)
+            return;
+        const mimeType = detectBrowserAndMimeType();
+        console.log(`Selected MIME-type: ${mimeType}`);
+        const recorder = new (src_default())({
+            mimeType,
+            timeslice: 1000, // Chunks of 1 second
+            ignoreMutedMedia: true,
+            onstart: () => console.log('Recording started'),
+            onstop: (file) => {
+                console.log('Final audio file:', file);
+                setResultAudioBlob(file);
+                setAudioChunks([]); // Clear recorded chunks
+            },
+            ondataavailable: (event) => {
+                if (event.data.size > 0) {
+                    setAudioChunks((prev) => [...prev, event.data]);
+                }
+            },
+            onerror: (error) => console.error('Recording error:', error),
+        });
+        mediaRecorder.current = recorder;
+        recorder.start(stream);
+    };
+    // Stop recording
     const stopRecording = () => {
         if (!mediaRecorder.current)
             return;
         mediaRecorder.current.stop();
-        mediaRecorder.current.onstop = () => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const mimeContent = window.MediaRecorder.isTypeSupported('audio/mp4;codecs=mp4a')
-                ? 'audio/mp4;codecs=mp4a'
-                : 'audio/webm;codecs=opus';
-            // const audioBlob = new Blob(audioChunks, { type: mimeContent }); // mimeType
-            // const mp4Blob = new Blob(recordedChunks, { type: 'video/mp4' });
-            // const audioBlob = new Blob(audioChunks, { type: 'video/mp4' }); // mimeType
-            // const audioBlob = new Blob(audioChunks, { type: 'audio/mp4' }); // mimeType
-            const audioBlob = new Blob(audioChunks, { type: 'audio/mp4' });
-            setResultAudioBlob(audioBlob);
-            setAudioChunks([]);
-            //
-            stream?.getAudioTracks().forEach((track) => {
-                track.stop();
-            });
-            setPermission(false);
-            //
-        };
+        // Stop WebRTC stream
+        if (peerConnection) {
+            peerConnection.close();
+            setPeerConnection(null);
+        }
     };
-    const blobToFile = (theBlob, fileName) => {
-        const b = theBlob;
-        // A Blob() is almost a File() - it's just missing the two properties below which we will add
-        b.lastModifiedDate = new Date();
-        b.name = fileName;
-        // Cast to a File() type
-        const resultFile = theBlob;
-        return resultFile;
+    // Convert Blob to File
+    const blobToFile = (blob, fileName) => {
+        return new File([blob], fileName, { type: blob.type });
     };
+    // const blobToFile = (theBlob: Blob, fileName: string): File => {
+    //   const b: any = theBlob;
+    //
+    //   // A Blob() is almost a File() - it's just missing the two properties below which we will add
+    //   b.lastModifiedDate = new Date();
+    //   b.name = fileName;
+    //
+    //   // Cast to a File() type
+    //   const resultFile = theBlob as unknown as File;
+    //
+    //   return resultFile;
+    // };
     function sendTextMessageActions(textToSend) {
         if (isOnline) {
             // closeReplyMessageFlowHandler
@@ -77847,7 +78621,6 @@ function useQuickBloxUIKit({ AIRephrase = undefined, AITranslate = undefined, AI
     // 972
     return {
         constants: {
-            mimeType,
             messagePerPage,
             maxFileSize,
             maxWidthToResizing,
@@ -77882,7 +78655,6 @@ function useQuickBloxUIKit({ AIRephrase = undefined, AITranslate = undefined, AI
             defaultAIRephraseWidget,
             defaultAITranslateWidget,
             defaultAIAssistWidget,
-            mimeType,
             messagePerPage,
             maxTokensForAIRephrase,
             rephraseTones,
@@ -78154,14 +78926,12 @@ const QuickBloxUIKitDesktopLayout = ({ theme, AITranslate, AIRephrase, AIAssist,
                                         setNameDialogForSearch('');
                                     } }), (0,jsx_runtime_.jsx)(new_chatreact, { className: classnames_default()('dialog-list-header__icons', {
                                         'dialog-list-header__icons--disable': !isOnline,
-                                    }), onClick: createDialogHandler })] }), renderFilter: showSearchDialogs ? ((0,jsx_runtime_.jsx)(ui_components_TextField_TextField, { className: "search-dialog-text-field", disabled: dialogsViewModel.loading, placeholder: "Search", icon: (0,jsx_runtime_.jsx)(searchreact, { className: "search-dialog-text-field__icon" }), value: nameDialogForSearch, onChange: setNameDialogForSearch })) : null, renderDialogList: (handleSelectDialog) => 
-                        // eslint-disable-next-line no-nested-ternary
-                        dialogsViewModel?.loading ? ((0,jsx_runtime_.jsx)("div", { className: "dialog-list__loader-container", style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                            }, children: (0,jsx_runtime_.jsx)(Loader_Loader_Loader, { size: "md", className: "dialog-list__loader" }) })) : searchedDialogs.length > 0 ? (searchedDialogs.map((dlg, index) => renderDialogItem(dlg, index, handleSelectDialog))) : ((0,jsx_runtime_.jsx)(Placeholder_Placeholder_Placeholder, { icon: (0,jsx_runtime_.jsx)(chatreact, {}), text: "There are no dialogs.", className: "dialog-empty-chat-placeholder" })) })) : null, dialogMessagesView: showDialogMessages &&
+                                    }), onClick: createDialogHandler })] }), renderFilter: showSearchDialogs ? ((0,jsx_runtime_.jsx)(ui_components_TextField_TextField, { className: "search-dialog-text-field", disabled: dialogsViewModel.loading, placeholder: "Search", icon: (0,jsx_runtime_.jsx)(searchreact, { className: "search-dialog-text-field__icon" }), value: nameDialogForSearch, onChange: setNameDialogForSearch })) : null, renderDialogList: (handleSelectDialog) => ((0,jsx_runtime_.jsxs)(jsx_runtime_.Fragment, { children: [dialogsViewModel?.loading && ((0,jsx_runtime_.jsx)("div", { className: "dialog-list__loader-container", style: {
+                                        display: 'flex',
+                                        flexDirection: 'row',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                    }, children: (0,jsx_runtime_.jsx)(Loader_Loader_Loader, { size: "md", className: "dialog-list__loader" }) })), searchedDialogs.length > 0 ? (searchedDialogs.map((dlg, index) => renderDialogItem(dlg, index, handleSelectDialog))) : ((0,jsx_runtime_.jsx)(Placeholder_Placeholder_Placeholder, { icon: (0,jsx_runtime_.jsx)(chatreact, {}), text: "There are no dialogs.", className: "dialog-empty-chat-placeholder" }))] })) })) : null, dialogMessagesView: showDialogMessages &&
                         selectedDialog &&
                         selectedDialog &&
                         dialogsViewModel.entity ? ((0,jsx_runtime_.jsx)(Views_Dialog_Dialog, { rootStyles: {