sceyt-chat-react-uikit 1.8.9-beta.2 → 1.8.9-beta.3

package/index.modern.js

@@ -13,7 +13,7 @@ import Cropper from 'react-easy-crop';
 import { CircularProgressbar } from 'react-circular-progressbar';
 import { FFmpeg } from '@ffmpeg/ffmpeg';
 import { toBlobURL, fetchFile } from '@ffmpeg/util';
-import { $applyNodeReplacement, TextNode, $createTextNode, $getSelection, $isRangeSelection, $isTextNode, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, $getRoot, $createParagraphNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, PASTE_COMMAND, COMMAND_PRIORITY_NORMAL } from 'lexical';
+import { $applyNodeReplacement, TextNode, $createTextNode, $getSelection, $isRangeSelection, $isTextNode, FORMAT_TEXT_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, $getRoot, $createParagraphNode, PASTE_COMMAND, COMMAND_PRIORITY_NORMAL } from 'lexical';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
@@ -15682,11 +15682,11 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
         var _exit4 = false;
         if (_exit3) return _result3;
         function _temp8(_result4) {
-          return _exit4 ? _result4 : Promise.resolve(extractFrameFromUrl(videoSrc, maxWidth, maxHeight, quality)).then(function (direct) {
+          return _exit4 ? _result4 : Promise.resolve(extractFrameFromUrl(videoSrc, scaledMaxWidth, scaledMaxHeight, quality)).then(function (direct) {
             return direct ? direct : _catch(function () {
               return Promise.resolve(fetch(videoSrc)).then(function (response) {
                 return Promise.resolve(response.blob()).then(function (blob) {
-                  return Promise.resolve(_extractFrameFromBlob2(blob, maxWidth, maxHeight, quality));
+                  return Promise.resolve(_extractFrameFromBlob2(blob, scaledMaxWidth, scaledMaxHeight, quality));
                 });
               });
             }, function (error) {
@@ -15700,7 +15700,7 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
             return _catch(function () {
               return Promise.resolve(fetch(videoSrc)).then(function (_fetch) {
                 return Promise.resolve(_fetch.blob()).then(function (blob) {
-                  return Promise.resolve(_extractFrameFromBlob2(blob, maxWidth, maxHeight, quality)).then(function (_await$_extractFrameF2) {
+                  return Promise.resolve(_extractFrameFromBlob2(blob, scaledMaxWidth, scaledMaxHeight, quality)).then(function (_await$_extractFrameF2) {
                     _exit4 = true;
                     return _await$_extractFrameF2;
                   });
@@ -15708,7 +15708,7 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
               });
             }, function (error) {
               log.warn('getVideoFirstFrame: failed to re-fetch blob url, trying directly', error);
-              return Promise.resolve(extractFrameFromUrl(videoSrc, maxWidth, maxHeight, quality)).then(function (_await$extractFrameFr) {
+              return Promise.resolve(extractFrameFromUrl(videoSrc, scaledMaxWidth, scaledMaxHeight, quality)).then(function (_await$extractFrameFr) {
                 _exit4 = true;
                 return _await$extractFrameFr;
               });
@@ -15717,9 +15717,11 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
         }();
         return _temp7 && _temp7.then ? _temp7.then(_temp8) : _temp8(_temp7);
       }
+      var scaledMaxWidth = scaleForDevicePixelRatio(maxWidth);
+      var scaledMaxHeight = scaleForDevicePixelRatio(maxHeight);
       var _temp9 = function () {
         if (videoSrc instanceof Blob) {
-          return Promise.resolve(_extractFrameFromBlob2(videoSrc, maxWidth, maxHeight, quality)).then(function (_await$_extractFrameF) {
+          return Promise.resolve(_extractFrameFromBlob2(videoSrc, scaledMaxWidth, scaledMaxHeight, quality)).then(function (_await$_extractFrameF) {
             _exit3 = true;
             return _await$_extractFrameF;
           });
@@ -15734,6 +15736,16 @@ var getVideoFirstFrame = function getVideoFirstFrame(videoSrc, maxWidth, maxHeig
     return Promise.reject(e);
   }
 };
+var scaleForDevicePixelRatio = function scaleForDevicePixelRatio(value, cap) {
+  if (cap === void 0) {
+    cap = 2;
+  }
+  if (!value) {
+    return value;
+  }
+  var dpr = Math.min(window.devicePixelRatio || 1, cap);
+  return value * dpr;
+};
 var normalizeVideoBlob = function normalizeVideoBlob(blob) {
   try {
     return Promise.resolve(inspectVideoBlob(blob)).then(function (info) {
@@ -15964,8 +15976,7 @@ var compressAndCacheImage = function compressAndCacheImage(url, cacheKey, maxWid
               var file = new File([blob], 'image.jpeg', {
                 type: blob.type
               });
-              var dpr = Math.min(window.devicePixelRatio || 1, 2);
-              return Promise.resolve(resizeImageWithPica(file, (maxWidth || 1280) * dpr, (maxHeight || 1080) * dpr, quality || 1)).then(function (_ref2) {
+              return Promise.resolve(resizeImageWithPica(file, scaleForDevicePixelRatio(maxWidth || 1280), scaleForDevicePixelRatio(maxHeight || 1080), quality || 1)).then(function (_ref2) {
                 var compressedBlob = _ref2.blob;
                 var returningUrl = compressedBlob ? URL.createObjectURL(compressedBlob) : '';
                 if (compressedBlob) {
@@ -22883,7 +22894,7 @@ var UploadAvatarButton = styled.button(_templateObject23 || (_templateObject23 =
 var UploadAvatarHandler = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n  font-size: 13px;\n  color: ", ";\n"])), function (props) {
   return props.color;
 });
-var StyledText = styled.span(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n    cursor: ", ";\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
+var StyledText = styled.span(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  font-family: ", ";\n  font-style: ", ";\n  text-decoration: ", ";\n  letter-spacing: ", ";\n\n  &.mention {\n    color: ", ";\n    font-weight: ", ";\n    cursor: ", ";\n    display: inline;\n    user-select: text;\n    -webkit-user-select: text;\n  }\n  &.bold {\n    font-weight: 600;\n  }\n  &.italic {\n    font-style: italic;\n  }\n  &.underline {\n    text-decoration: underline;\n  }\n  &.strikethrough {\n    text-decoration: line-through;\n  }\n  &.underline.strikethrough {\n    text-decoration: underline line-through;\n  }\n  &.monospace {\n    letter-spacing: 4px;\n  }\n"])), function (props) {
   return props.fontWeight || props.isLastMessage && '500';
 }, function (props) {
   return props.fontFamily;
@@ -23072,6 +23083,10 @@ var PendingIconWrapper = styled(SvgPendingIcon)(_templateObject5$1 || (_template
 }, function (props) {
   return props.color;
 });
+var canActivateMention = function canActivateMention() {
+  var selection = typeof window !== 'undefined' ? window.getSelection() : null;
+  return !selection || selection.isCollapsed;
+};
 var MessageStatusIcon = function MessageStatusIcon(_ref) {
   var messageStatus = _ref.messageStatus,
     messageStatusDisplayingType = _ref.messageStatusDisplayingType,
@@ -23287,7 +23302,7 @@ var MessageTextFormat = function MessageTextFormat(_ref3) {
                 key: attributeOffset + index,
                 "data-mention": attribute.metadata,
                 onClick: function onClick() {
-                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                  if (canActivateMention() && onMentionNameClick && shouldOpenUserProfileForMention) {
                     onMentionNameClick(mentionDisplay);
                   }
                 }
@@ -23301,7 +23316,7 @@ var MessageTextFormat = function MessageTextFormat(_ref3) {
                 key: attributeOffset,
                 "data-mention": attribute.metadata,
                 onClick: function onClick() {
-                  if (onMentionNameClick && shouldOpenUserProfileForMention) {
+                  if (canActivateMention() && onMentionNameClick && shouldOpenUserProfileForMention) {
                     onMentionNameClick(mentionDisplay);
                   }
                 },
@@ -27768,49 +27783,56 @@ function leaveChannel(action) {
         _context24.p = 0;
         payload = action.payload;
         channelId = payload.channelId;
-        _context24.n = 1;
-        return call(getChannelFromMap, channelId);
+        if (!(store.getState().UserReducer.connectionStatus !== CONNECTION_STATUS.CONNECTED)) {
+          _context24.n = 1;
+          break;
+        }
+        log.warn('Cannot leave channel while offline');
+        return _context24.a(2);
       case 1:
+        _context24.n = 2;
+        return call(getChannelFromMap, channelId);
+      case 2:
         channel = _context24.v;
         if (!channel) {
           channel = getChannelFromAllChannels(channelId);
         }
         if (!channel) {
-          _context24.n = 5;
+          _context24.n = 6;
           break;
         }
         if (!(channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE)) {
-          _context24.n = 2;
+          _context24.n = 3;
           break;
         }
         messageBuilder = channel.createMessageBuilder();
         messageBuilder.setBody('LG').setType('system').setDisplayCount(0).setSilent(true);
         messageToSend = messageBuilder.create();
         log.info('send message for left');
-        _context24.n = 2;
-        return call(channel.sendMessage, messageToSend);
-      case 2:
-        log.info('leave');
         _context24.n = 3;
-        return call(channel.leave);
+        return call(channel.sendMessage, messageToSend);
       case 3:
+        log.info('leave');
         _context24.n = 4;
-        return put(removeChannelAC(channelId));
+        return call(channel.leave);
       case 4:
-        deleteChannelFromAllChannels(channelId);
         _context24.n = 5;
-        return put(removeChannelCachesAC(channelId));
+        return put(removeChannelAC(channelId));
       case 5:
-        _context24.n = 7;
-        break;
+        deleteChannelFromAllChannels(channelId);
+        _context24.n = 6;
+        return put(removeChannelCachesAC(channelId));
       case 6:
-        _context24.p = 6;
+        _context24.n = 8;
+        break;
+      case 7:
+        _context24.p = 7;
         _t22 = _context24.v;
         log.error('ERROR in leave channel - ', _t22.message);
-      case 7:
+      case 8:
         return _context24.a(2);
     }
-  }, _marked22$1, null, [[0, 6]]);
+  }, _marked22$1, null, [[0, 7]]);
 }
 function deletePendingDeleteChannels() {
   var pendingDeleteChannels, _iterator10, _step10, channel, resendableError, _t23;
@@ -50608,25 +50630,12 @@ function useFormatMessage(editor, editorState, setMessageBodyAttributes, setMess
     }
     return true;
   }, [editor, contactsMap, setMentionedMember, getFromContacts, activeChannelMembers, processMentionsInPastedText]);
-  var onDelete = useCallback(function (event) {
-    event.preventDefault();
-    editor.update(function () {
-      var selection = $getSelection();
-      if ($isRangeSelection(selection)) {
-        var node = getSelectedNode(selection);
-        if ($isMentionNode(node)) {
-          node.remove();
-        }
-      }
-    });
-    return false;
-  }, [editor]);
   useEffect(function () {
     return mergeRegister(editor.registerCommand(PASTE_COMMAND, function (e) {
       handlePast(e);
       return true;
-    }, COMMAND_PRIORITY_NORMAL), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW));
-  }, [editor, handlePast, onDelete]);
+    }, COMMAND_PRIORITY_NORMAL));
+  }, [editor, handlePast]);
   useDidUpdate(function () {
     if (editorState) {
       editorState.read(function () {
@@ -50965,6 +50974,15 @@ var Emoji$1 = styled.li(_templateObject8$l || (_templateObject8$l = _taggedTempl
   return props.hoverBackgroundColor;
 });
 
+var getReplyLinkPreviewImage = function getReplyLinkPreviewImage(attachments) {
+  var _attachments$;
+  var attachment = attachments !== null && attachments !== void 0 && attachments.length && ((_attachments$ = attachments[0]) === null || _attachments$ === void 0 ? void 0 : _attachments$.type) === attachmentTypes.link ? attachments[0] : null;
+  if (!(attachment !== null && attachment !== void 0 && attachment.metadata) || !isJSON(attachment.metadata)) return null;
+  var compactMeta = JSON.parse(attachment.metadata);
+  var imageUrl = compactMeta.iur || null;
+  return !(compactMeta !== null && compactMeta !== void 0 && compactMeta.hld) ? imageUrl : null;
+};
+
 var CAN_USE_DOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
 
 var _circle$6, _path$1j;
@@ -51274,8 +51292,10 @@ var AudioRecord = function AudioRecord(_ref) {
     warningColor = _useColor[THEME_COLORS.WARNING],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     surface1 = _useColor[THEME_COLORS.SURFACE_1],
+    textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     iconInactive = _useColor[THEME_COLORS.ICON_INACTIVE],
-    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY],
+    background = _useColor[THEME_COLORS.BACKGROUND];
   var _useState = useState(null),
     recording = _useState[0],
     setStartRecording = _useState[1];
@@ -51303,6 +51323,9 @@ var AudioRecord = function AudioRecord(_ref) {
   var _useState9 = useState(false),
     playAudio = _useState9[0],
     setPlayAudio = _useState9[1];
+  var _useState0 = useState(false),
+    microphonePermissionDenied = _useState0[0],
+    setMicrophonePermissionDenied = _useState0[1];
   var recordButtonRef = useRef(null);
   var audioElements = useRef({});
   var intervalRef = useRef({});
@@ -51392,27 +51415,21 @@ var AudioRecord = function AudioRecord(_ref) {
   var startRecording = function startRecording(cId) {
     try {
       var id = cId || currentChannelId;
-      var _temp = _catch(function () {
-        return Promise.resolve(navigator.permissions.query({
-          name: 'microphone'
-        })).then(function (permissionStatus) {
-          if (permissionStatus.state === 'granted') {
-            setShowRecording(true);
-          } else {
-            recordButtonRef.current.style.pointerEvents = 'none';
-          }
-          if (recording) {
-            stopRecording(true, id, false, recorder);
-          } else if (currentRecordedFile) {
-            removeAudioRecordingFromMap(id);
-            setRecordedFile(null);
-            setPlayAudio(false);
-            cleanupAudioElement(id);
-            setStartRecording(false);
-            setShowRecording(false);
-            dispatch(setChannelDraftMessageIsRemovedAC(id));
-            sendRecordedFile(currentRecordedFile, id);
-          } else {
+      try {
+        if (recording) {
+          stopRecording(true, id, false, recorder);
+        } else if (currentRecordedFile) {
+          removeAudioRecordingFromMap(id);
+          setRecordedFile(null);
+          setPlayAudio(false);
+          cleanupAudioElement(id);
+          setStartRecording(false);
+          setShowRecording(false);
+          dispatch(setChannelDraftMessageIsRemovedAC(id));
+          sendRecordedFile(currentRecordedFile, id);
+        } else {
+          if (!recorder) return Promise.resolve();
+          recorder.start().then(function () {
             handleStartRecording();
             setAudioRecordingToMap(id, {
               file: null,
@@ -51420,96 +51437,97 @@ var AudioRecord = function AudioRecord(_ref) {
               thumb: null,
               dur: 0
             });
-            recorder.start().then(function () {
-              recordButtonRef.current.style.pointerEvents = 'initial';
-              setShowRecording(true);
-              setStartRecording(true);
-              shouldDraw = true;
-              var stream = recorder.activeStream;
-              var obj = {};
-              var init = function init() {
-                obj.canvas = document.getElementById("waveform-" + id);
-                obj.ctx = obj.canvas.getContext('2d');
-                obj.width = 360;
-                obj.height = 28;
-                obj.canvas.width = obj.width;
-                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;
-              var _loop = function loop() {
-                if (!shouldDraw) {
-                  obj.x = 0;
-                  obj.ctx.clearRect(0, 0, obj.canvas.width, obj.canvas.height);
-                  if (obj.audioContext && obj.audioContext.state !== 'closed') {
-                    obj.audioContext.close()["catch"](function () {
-                      return undefined;
-                    });
-                  }
-                  return;
-                }
+            setShowRecording(true);
+            setStartRecording(true);
+            shouldDraw = true;
+            var stream = recorder.activeStream;
+            var obj = {};
+            var init = function init() {
+              obj.canvas = document.getElementById("waveform-" + id);
+              obj.ctx = obj.canvas.getContext('2d');
+              obj.width = 360;
+              obj.height = 28;
+              obj.canvas.width = obj.width;
+              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;
+            var _loop = function loop() {
+              if (!shouldDraw) {
+                obj.x = 0;
                 obj.ctx.clearRect(0, 0, obj.canvas.width, obj.canvas.height);
-                var max = 0;
-                if (parseInt(performance.now() / timeOffset) > now) {
-                  now = parseInt(performance.now() / timeOffset);
-                  obj.analyser.getFloatTimeDomainData(obj.frequencyArray);
-                  for (var i = 0; i < obj.frequencyArray.length; i++) {
-                    if (obj.frequencyArray[i] > max) {
-                      max = obj.frequencyArray[i];
-                    }
-                  }
-                  var freq = Math.floor(max * 90);
-                  if (freq === 0) {
-                    freq = 1;
-                  }
-                  obj.bars.push({
-                    x: obj.width,
-                    y: obj.height / 2 - freq / 2,
-                    height: freq,
-                    width: 3
+                if (obj.audioContext && obj.audioContext.state !== 'closed') {
+                  obj.audioContext.close()["catch"](function () {
+                    return undefined;
                   });
                 }
-                draw();
-                requestAnimationFrame(_loop);
-              };
-              obj.bars = [];
-              var draw = function draw() {
-                for (var i = 0; i < obj.bars.length; i++) {
-                  var bar = obj.bars[i];
-                  obj.ctx.fillStyle = textSecondary;
-                  obj.ctx.fillRect(bar.x, bar.y, bar.width, bar.height);
-                  bar.x = bar.x - 1;
-                  if (bar.x < 1) {
-                    obj.bars.splice(i, 1);
+                return;
+              }
+              obj.ctx.clearRect(0, 0, obj.canvas.width, obj.canvas.height);
+              var max = 0;
+              if (parseInt(performance.now() / timeOffset) > now) {
+                now = parseInt(performance.now() / timeOffset);
+                obj.analyser.getFloatTimeDomainData(obj.frequencyArray);
+                for (var i = 0; i < obj.frequencyArray.length; i++) {
+                  if (obj.frequencyArray[i] > max) {
+                    max = obj.frequencyArray[i];
                   }
                 }
-              };
-              var soundAllowed = function soundAllowed(stream) {
-                var AudioContext = window.AudioContext || window.webkitAudioContext;
-                var audioContent = new AudioContext();
-                obj.audioContext = audioContent;
-                var streamSource = audioContent.createMediaStreamSource(stream);
-                obj.analyser = audioContent.createAnalyser();
-                streamSource.connect(obj.analyser);
-                obj.analyser.fftSize = 512;
-                obj.frequencyArray = new Float32Array(obj.analyser.fftSize);
-                init();
-                _loop();
-              };
-              soundAllowed(stream);
-            })["catch"](function (e) {
-              handleStopRecording();
-              log.error(e);
-            });
-          }
-        });
-      }, function (e) {
-        handleStopRecording();
+                var freq = Math.floor(max * 90);
+                if (freq === 0) {
+                  freq = 1;
+                }
+                obj.bars.push({
+                  x: obj.width,
+                  y: obj.height / 2 - freq / 2,
+                  height: freq,
+                  width: 3
+                });
+              }
+              draw();
+              requestAnimationFrame(_loop);
+            };
+            obj.bars = [];
+            var draw = function draw() {
+              for (var i = 0; i < obj.bars.length; i++) {
+                var bar = obj.bars[i];
+                obj.ctx.fillStyle = textSecondary;
+                obj.ctx.fillRect(bar.x, bar.y, bar.width, bar.height);
+                bar.x = bar.x - 1;
+                if (bar.x < 1) {
+                  obj.bars.splice(i, 1);
+                }
+              }
+            };
+            var soundAllowed = function soundAllowed(stream) {
+              var AudioContext = window.AudioContext || window.webkitAudioContext;
+              var audioContent = new AudioContext();
+              obj.audioContext = audioContent;
+              var streamSource = audioContent.createMediaStreamSource(stream);
+              obj.analyser = audioContent.createAnalyser();
+              streamSource.connect(obj.analyser);
+              obj.analyser.fftSize = 512;
+              obj.frequencyArray = new Float32Array(obj.analyser.fftSize);
+              init();
+              _loop();
+            };
+            soundAllowed(stream);
+          })["catch"](function (e) {
+            if ((e === null || e === void 0 ? void 0 : e.name) === 'NotAllowedError' || (e === null || e === void 0 ? void 0 : e.name) === 'PermissionDeniedError') {
+              setMicrophonePermissionDenied(true);
+            }
+            log.error(e);
+          });
+        }
+      } catch (e) {
+        if ((e === null || e === void 0 ? void 0 : e.name) === 'NotAllowedError' || (e === null || e === void 0 ? void 0 : e.name) === 'PermissionDeniedError') {
+          setMicrophonePermissionDenied(true);
+        }
         log.error(e);
-      });
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      }
+      return Promise.resolve();
     } catch (e) {
       return Promise.reject(e);
     }
@@ -51834,7 +51852,36 @@ var AudioRecord = function AudioRecord(_ref) {
       return startRecording(currentChannelId);
     },
     iconColor: accentColor
-  }, showRecording || currentRecordedFile ? /*#__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)), microphonePermissionDenied && (/*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    backgroundColor: background,
+    maxWidth: '520px',
+    minWidth: '520px',
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: function onClick() {
+      return setMicrophonePermissionDenied(false);
+    }
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    marginBottom: '20px'
+  }, "Microphone Permission Denied"), /*#__PURE__*/React__default.createElement(PopupDescription, {
+    color: textPrimary,
+    highlightColor: textSecondary
+  }, "We can't access your microphone. Enable microphone permission in your browser settings and try again.")), /*#__PURE__*/React__default.createElement(PopupFooter, {
+    backgroundColor: surface1
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    backgroundColor: accentColor,
+    color: textOnPrimary,
+    borderRadius: '8px',
+    onClick: function onClick() {
+      return setMicrophonePermissionDenied(false);
+    }
+  }, "Close"))))));
 };
 var AudioRecord$1 = /*#__PURE__*/memo(AudioRecord, function (prevProps, nextProps) {
   return prevProps.channelId === nextProps.channelId && prevProps.showRecording === nextProps.showRecording && prevProps.maxRecordingDuration === nextProps.maxRecordingDuration && prevProps.showViewOnceToggle === nextProps.showViewOnceToggle && prevProps.viewOnce === nextProps.viewOnce && prevProps.ViewOnceSelectedSVGIcon === nextProps.ViewOnceSelectedSVGIcon && prevProps.ViewOnceNotSelectedSVGIcon === nextProps.ViewOnceNotSelectedSVGIcon;
@@ -52359,7 +52406,7 @@ var SettingItem = styled.div(_templateObject9$i || (_templateObject9$i = _tagged
   return props.color;
 });
 
-var _templateObject$W, _templateObject2$R, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$q, _templateObject8$n, _templateObject9$j, _templateObject0$h, _templateObject1$f, _templateObject10$c, _templateObject11$9, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35$1, _templateObject36$1, _templateObject37$1, _templateObject38$1, _templateObject39$1, _templateObject40$1, _templateObject41$1, _templateObject42, _templateObject43, _templateObject44, _templateObject45;
+var _templateObject$W, _templateObject2$R, _templateObject3$I, _templateObject4$C, _templateObject5$x, _templateObject6$t, _templateObject7$q, _templateObject8$n, _templateObject9$j, _templateObject0$h, _templateObject1$f, _templateObject10$c, _templateObject11$9, _templateObject12$7, _templateObject13$6, _templateObject14$4, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$2, _templateObject20$2, _templateObject21$2, _templateObject22$1, _templateObject23$1, _templateObject24$1, _templateObject25$1, _templateObject26$1, _templateObject27$1, _templateObject28$1, _templateObject29$1, _templateObject30$1, _templateObject31$1, _templateObject32$1, _templateObject33$1, _templateObject34$1, _templateObject35$1, _templateObject36$1, _templateObject37$1, _templateObject38$1, _templateObject39$1, _templateObject40$1, _templateObject41$1, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46;
 function AutoFocusPlugin(_ref) {
   var messageForReply = _ref.messageForReply;
   var _useLexicalComposerCo = useLexicalComposerContext(),
@@ -53218,10 +53265,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }
     }
   };
-  var handleCut = function handleCut() {
-    setMessageText('');
-    setMentionedUsers([]);
-  };
   var handleEmojiPopupToggle = function handleEmojiPopupToggle(bool) {
     setIsEmojisOpened(bool);
   };
@@ -53813,7 +53856,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       }, 800);
     }
     messageContRef.current.addEventListener('paste', handlePastAttachments);
-    messageContRef.current.addEventListener('cut', handleCut);
     document.addEventListener('mousedown', handleClick);
     return function () {
       if (inputHeightTimeout) {
@@ -53823,7 +53865,6 @@ var SendMessageInput = function SendMessageInput(_ref3) {
       document.removeEventListener('mousedown', handleClick);
       if (messageContRef && messageContRef.current) {
         messageContRef.current.removeEventListener('paste', handlePastAttachments);
-        messageContRef.current.removeEventListener('cut', handleCut);
       }
     };
   }, []);
@@ -54001,14 +54042,23 @@ var SendMessageInput = function SendMessageInput(_ref3) {
     attachment: messageForReply.attachments[0],
     backgroundColor: selectedFileAttachmentsBoxBackground || '',
     isRepliedMessage: true
-  })) : messageForReply.attachments[0].type === attachmentTypes.file && (/*#__PURE__*/React__default.createElement(ReplyIconWrapper, {
+  })) : getReplyLinkPreviewImage(messageForReply.attachments) ? (/*#__PURE__*/React__default.createElement(LinkPreviewImage, {
+    bg: background,
+    src: getReplyLinkPreviewImage(messageForReply.attachments),
+    alt: 'Link preview'
+  })) : messageForReply.attachments[0].type === attachmentTypes.link ? (/*#__PURE__*/React__default.createElement(LinkPreviewIconWrapper, {
+    bg: background
+  }, /*#__PURE__*/React__default.createElement(LinkPreviewIcon, {
+    color: accentColor,
+    bg: background
+  }))) : messageForReply.attachments[0].type === attachmentTypes.file && (/*#__PURE__*/React__default.createElement(ReplyIconWrapper, {
     backgroundColor: accentColor,
     iconColor: textOnPrimary
   }, /*#__PURE__*/React__default.createElement(SvgChoseFile, null)))), /*#__PURE__*/React__default.createElement(ReplyMessageBody$1, {
     linkColor: accentColor
   }, /*#__PURE__*/React__default.createElement(EditReplyMessageHeader, {
     color: accentColor
-  }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), " Reply to", /*#__PURE__*/React__default.createElement(UserName$1, null, user.id === messageForReply.user.id ? user.firstName ? user.firstName + " " + user.lastName : user.id : makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, (messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.viewOnce) && /*#__PURE__*/React__default.createElement(SvgViewOnceLastMessage, {
+  }, replyMessageIcon || /*#__PURE__*/React__default.createElement(SvgReplyIcon, null), user.id === messageForReply.user.id ? ' Reply You' : (/*#__PURE__*/React__default.createElement("span", null, ' Reply to', /*#__PURE__*/React__default.createElement(UserName$1, null, makeUsername(contactsMap[messageForReply.user.id], messageForReply.user, getFromContacts))))), messageForReply.attachments && messageForReply.attachments.length ? messageForReply.attachments[0].type === attachmentTypes.voice ? (/*#__PURE__*/React__default.createElement(TextInOneLine, null, (messageForReply === null || messageForReply === void 0 ? void 0 : messageForReply.viewOnce) && /*#__PURE__*/React__default.createElement(SvgViewOnceLastMessage, {
     style: {
       margin: '0 4px -3px 0'
     }
@@ -54363,7 +54413,7 @@ var MessageInputWrapper = styled.div(_templateObject12$7 || (_templateObject12$7
 }, function (props) {
   return props.borderRadius || '18px';
 });
-var LexicalWrapper = styled.div(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  & .rich_text_editor {\n    width: 100%;\n    max-height: 80px;\n    min-height: 20px;\n    display: block;\n    border: none;\n    box-sizing: border-box;\n    outline: none !important;\n    border-radius: ", ";\n    background-color: ", ";\n    padding: ", ";\n    color: ", ";\n    order: ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    scrollbar-width: none;\n    scrollbar-color: transparent transparent;\n    overscroll-behavior: none;\n\n    @supports (overflow: overlay) {\n      overflow-y: overlay;\n    }\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\n    &.show-scrollbar {\n      scrollbar-width: thin;\n      scrollbar-color: ", " transparent;\n    }\n\n    & p {\n      font-size: 15px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &::selection {\n      background-color: ", ";\n    }\n\n    & *::selection {\n      background-color: ", ";\n    }\n\n    & span::selection {\n      background-color: ", ";\n    }\n\n    &:empty:before {\n      content: attr(data-placeholder);\n    }\n\n    & .content_editable_input {\n      border: none !important;\n      outline: none !important;\n    }\n\n    & .mention {\n      color: ", ";\n      background-color: inherit !important;\n      user-modify: read-only;\n    }\n\n    & span.bold {\n      font-weight: bold;\n    }\n\n    & .editor_paragraph {\n      margin: 0;\n    }\n\n    & .text_bold {\n      font-weight: 600;\n    }\n\n    & .text_italic {\n      font-style: italic;\n    }\n\n    & .text_underline {\n      text-decoration: underline;\n    }\n\n    & .text_strikethrough {\n      text-decoration: line-through;\n    }\n\n    & .text_underlineStrikethrough {\n      text-decoration: underline line-through;\n    }\n\n    & code {\n      font-family: inherit;\n      letter-spacing: 4px;\n    }\n  }\n"])), function (props) {
+var LexicalWrapper = styled.div(_templateObject13$6 || (_templateObject13$6 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n\n  & .rich_text_editor {\n    width: 100%;\n    max-height: 80px;\n    min-height: 20px;\n    display: block;\n    border: none;\n    box-sizing: border-box;\n    outline: none !important;\n    border-radius: ", ";\n    background-color: ", ";\n    padding: ", ";\n    color: ", ";\n    order: ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    scrollbar-width: none;\n    scrollbar-color: transparent transparent;\n    overscroll-behavior: none;\n\n    @supports (overflow: overlay) {\n      overflow-y: overlay;\n    }\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\n    &.show-scrollbar {\n      scrollbar-width: thin;\n      scrollbar-color: ", " transparent;\n    }\n\n    & p {\n      font-size: 15px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &::selection {\n      background-color: ", ";\n    }\n\n    & *::selection {\n      background-color: ", ";\n    }\n\n    & span::selection {\n      background-color: ", ";\n    }\n\n    &:empty:before {\n      content: attr(data-placeholder);\n    }\n\n    & .content_editable_input {\n      border: none !important;\n      outline: none !important;\n    }\n\n    & .mention {\n      color: ", ";\n      background-color: inherit !important;\n      user-select: text;\n      -webkit-user-select: text;\n    }\n\n    & span.bold {\n      font-weight: bold;\n    }\n\n    & .editor_paragraph {\n      margin: 0;\n    }\n\n    & .text_bold {\n      font-weight: 600;\n    }\n\n    & .text_italic {\n      font-style: italic;\n    }\n\n    & .text_underline {\n      text-decoration: underline;\n    }\n\n    & .text_strikethrough {\n      text-decoration: line-through;\n    }\n\n    & .text_underlineStrikethrough {\n      text-decoration: underline line-through;\n    }\n\n    & code {\n      font-family: inherit;\n      letter-spacing: 4px;\n    }\n  }\n"])), function (props) {
   return props.borderRadius;
 }, function (props) {
   return props.backgroundColor;
@@ -54471,19 +54521,24 @@ var LinkPreviewContainer = styled.div(_templateObject39$1 || (_templateObject39$
   return props.isClosing ? linkPreviewSlideOut : linkPreviewSlideIn;
 });
 var LinkPreviewContent = styled.div(_templateObject40$1 || (_templateObject40$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 12px;\n  flex: 1;\n  overflow: hidden;\n"])));
-var LinkPreviewImage = styled.img(_templateObject41$1 || (_templateObject41$1 = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  object-fit: cover;\n  border-radius: 8px;\n  flex-shrink: 0;\n"])));
+var LinkPreviewImage = styled.img(_templateObject41$1 || (_templateObject41$1 = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  object-fit: cover;\n  border-radius: 4px;\n  flex-shrink: 0;\n  margin-right: 8px;\n  background: ", ";\n"])), function (props) {
+  return props.bg;
+});
 var LinkPreviewIcon = styled(SvgLinkIcon)(_templateObject42 || (_templateObject42 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  rect {\n    fill: ", ";\n    fill-opacity: 1;\n  }\n"])), function (props) {
   return props.color;
 }, function (props) {
   return props.bg;
 });
-var LinkPreviewTextContent = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  overflow: hidden;\n  flex: 1;\n  justify-content: center;\n  ", "\n"])), function (props) {
+var LinkPreviewIconWrapper = styled.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteralLoose(["\n  width: 40px;\n  height: 40px;\n  border-radius: 4px;\n  margin-right: 8px;\n  background: ", ";\n"])), function (props) {
+  return props.bg;
+});
+var LinkPreviewTextContent = styled.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  overflow: hidden;\n  flex: 1;\n  justify-content: center;\n  ", "\n"])), function (props) {
   return props.hasImage ? '' : 'padding-left: 0;';
 });
-var LinkPreviewTitle = styled.div(_templateObject44 || (_templateObject44 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: Inter;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: 0px;\n"])), function (props) {
+var LinkPreviewTitle = styled.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-family: Inter;\n  font-weight: 500;\n  font-size: 13px;\n  line-height: 16px;\n  letter-spacing: 0px;\n"])), function (props) {
   return props.color;
 });
-var LinkPreviewDescription = styled.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (props) {
+var LinkPreviewDescription = styled.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 20px;\n  letter-spacing: -0.2px;\n"])), function (props) {
   return props.color;
 });
 
@@ -55316,12 +55371,14 @@ var Actions = function Actions(_ref) {
     commonGroupsTextColor = _ref.commonGroupsTextColor,
     showGroupsInCommon = _ref.showGroupsInCommon;
   var _useColor = useColors(),
+    accentColor = _useColor[THEME_COLORS.ACCENT],
     textPrimary = _useColor[THEME_COLORS.TEXT_PRIMARY],
     textSecondary = _useColor[THEME_COLORS.TEXT_SECONDARY],
     iconPrimary = _useColor[THEME_COLORS.ICON_PRIMARY],
     surface1 = _useColor[THEME_COLORS.SURFACE_1],
     warningColor = _useColor[THEME_COLORS.WARNING],
-    backgroundColor = _useColor[THEME_COLORS.BACKGROUND];
+    backgroundColor = _useColor[THEME_COLORS.BACKGROUND],
+    textOnPrimary = _useColor[THEME_COLORS.TEXT_ON_PRIMARY];
   var ChatClient = getClient();
   var user = ChatClient.user;
   var _useState = useState(false),
@@ -55334,35 +55391,39 @@ var Actions = function Actions(_ref) {
     leaveChannelPopupOpen = _useState3[0],
     setLeaveChannelPopupOpen = _useState3[1];
   var _useState4 = useState(false),
-    deleteChannelPopupOpen = _useState4[0],
-    setDeleteChannelPopupOpen = _useState4[1];
+    leaveChannelOfflinePopupOpen = _useState4[0],
+    setLeaveChannelOfflinePopupOpen = _useState4[1];
   var _useState5 = useState(false),
-    blockChannelPopupOpen = _useState5[0],
-    setBlockChannelPopupOpen = _useState5[1];
+    deleteChannelPopupOpen = _useState5[0],
+    setDeleteChannelPopupOpen = _useState5[1];
   var _useState6 = useState(false),
-    blockUserPopupOpen = _useState6[0],
-    setBlockUserPopupOpen = _useState6[1];
+    blockChannelPopupOpen = _useState6[0],
+    setBlockChannelPopupOpen = _useState6[1];
   var _useState7 = useState(false),
-    unblockUserPopupOpen = _useState7[0],
-    setUnblockUserPopupOpen = _useState7[1];
+    blockUserPopupOpen = _useState7[0],
+    setBlockUserPopupOpen = _useState7[1];
   var _useState8 = useState(false),
-    reportUserPopupOpen = _useState8[0],
-    setReportUserPopupOpen = _useState8[1];
+    unblockUserPopupOpen = _useState8[0],
+    setUnblockUserPopupOpen = _useState8[1];
   var _useState9 = useState(false),
-    disappearingMessagesPopupOpen = _useState9[0],
-    setDisappearingMessagesPopupOpen = _useState9[1];
+    reportUserPopupOpen = _useState9[0],
+    setReportUserPopupOpen = _useState9[1];
   var _useState0 = useState(false),
-    groupsInCommonPopupOpen = _useState0[0],
-    setGroupsInCommonPopupOpen = _useState0[1];
+    disappearingMessagesPopupOpen = _useState0[0],
+    setDisappearingMessagesPopupOpen = _useState0[1];
+  var _useState1 = useState(false),
+    groupsInCommonPopupOpen = _useState1[0],
+    setGroupsInCommonPopupOpen = _useState1[1];
   var _usePermissions = usePermissions(channel.userRole),
     checkActionPermission = _usePermissions[0];
-  var _useState1 = useState(''),
-    popupButtonText = _useState1[0],
-    setPopupButtonText = _useState1[1];
   var _useState10 = useState(''),
-    popupTitle = _useState10[0],
-    setPopupTitle = _useState10[1];
+    popupButtonText = _useState10[0],
+    setPopupButtonText = _useState10[1];
+  var _useState11 = useState(''),
+    popupTitle = _useState11[0],
+    setPopupTitle = _useState11[1];
   var dispatch = useDispatch();
+  var connectionStatus = useSelector(connectionStatusSelector);
   var oneHour = 60 * 60 * 1000;
   var twoHours = oneHour * 2;
   var oneDay = oneHour * 24;
@@ -55407,6 +55468,10 @@ var Actions = function Actions(_ref) {
     }
   };
   var handleLeaveChannel = function handleLeaveChannel() {
+    if (connectionStatus !== CONNECTION_STATUS.CONNECTED) {
+      setLeaveChannelOfflinePopupOpen(true);
+      return;
+    }
     dispatch(leaveChannelAC(channel.id));
   };
   var handleDeleteChannel = function handleDeleteChannel() {
@@ -55708,7 +55773,37 @@ var Actions = function Actions(_ref) {
     buttonText: popupButtonText,
     description: channel.type === DEFAULT_CHANNEL_TYPE.GROUP || channel.type === DEFAULT_CHANNEL_TYPE.PRIVATE ? 'Once you leave this group it will be removed for you along with its entire history.' : 'Once you leave this channel it will be removed for you along with its entire history.',
     title: popupTitle
-  })), deleteChannelPopupOpen && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
+  })), leaveChannelOfflinePopupOpen && (/*#__PURE__*/React__default.createElement(PopupContainer, null, /*#__PURE__*/React__default.createElement(Popup, {
+    backgroundColor: backgroundColor,
+    maxWidth: '520px',
+    minWidth: '520px',
+    padding: '0'
+  }, /*#__PURE__*/React__default.createElement(PopupBody, {
+    paddingH: '24px',
+    paddingV: '24px'
+  }, /*#__PURE__*/React__default.createElement(CloseIcon, {
+    color: iconPrimary,
+    onClick: function onClick() {
+      return setLeaveChannelOfflinePopupOpen(false);
+    }
+  }), /*#__PURE__*/React__default.createElement(PopupName, {
+    color: textPrimary,
+    isDelete: true,
+    marginBottom: '20px'
+  }, "Failed to leave group"), /*#__PURE__*/React__default.createElement(PopupDescription, {
+    color: textPrimary,
+    highlightColor: textSecondary
+  }, "You\u2019re offline. Reconnect and try again.")), /*#__PURE__*/React__default.createElement(PopupFooter, {
+    backgroundColor: surface1
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: 'button',
+    backgroundColor: accentColor,
+    color: textOnPrimary,
+    borderRadius: '8px',
+    onClick: function onClick() {
+      return setLeaveChannelOfflinePopupOpen(false);
+    }
+  }, "Close"))))), deleteChannelPopupOpen && (/*#__PURE__*/React__default.createElement(ConfirmPopup, {
     handleFunction: handleDeleteChannel,
     togglePopup: handleToggleDeleteChannelPopupOpen,
     buttonText: popupButtonText,