sceyt-chat-react-uikit 1.7.2-beta.7 → 1.7.2-beta.9

package/index.js

@@ -1,24 +1,5 @@
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-function _interopNamespace(e) {
-  if (e && e.__esModule) { return e; } else {
-    var n = {};
-    if (e) {
-      Object.keys(e).forEach(function (k) {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      });
-    }
-    n['default'] = e;
-    return n;
-  }
-}
-
 var React = require('react');
 var React__default = _interopDefault(React);
 var reactRedux = require('react-redux');
@@ -44,6 +25,7 @@ var LexicalOnChangePlugin = require('@lexical/react/LexicalOnChangePlugin');
 var ReactDOM = require('react-dom');
 var LexicalTypeaheadMenuPlugin = require('@lexical/react/LexicalTypeaheadMenuPlugin');
 var offset = require('@lexical/offset');
+var MicRecorder = _interopDefault(require('mic-recorder-to-mp3'));
 var LexicalHistoryPlugin = require('@lexical/react/LexicalHistoryPlugin');
 
 // src/utils/formatProdErrorMessage.ts
@@ -17845,16 +17827,14 @@ function sendTextMessage(action) {
       case 16:
         throw new Error('Connection required to send message');
       case 17:
+        store.dispatch(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
         _context4.n = 18;
-        return effects.put(scrollToNewMessageAC(true));
-      case 18:
-        _context4.n = 19;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 19:
-        _context4.n = 22;
+      case 18:
+        _context4.n = 21;
         break;
-      case 20:
-        _context4.p = 20;
+      case 19:
+        _context4.p = 19;
         _t3 = _context4.v;
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
@@ -17864,23 +17844,23 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 21;
+          _context4.n = 20;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 21;
+        _context4.n = 20;
         return effects.put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 21:
-        _context4.n = 22;
+      case 20:
+        _context4.n = 21;
         return effects.put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 22:
+      case 21:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 20]]);
+  }, _marked2$2, null, [[3, 19]]);
 }
 function forwardMessage(action) {
   var payload, message, channelId, connectionState, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
@@ -26417,21 +26397,15 @@ function ReactionsPopup(_ref) {
   var _useState = React.useState('all'),
     activeTabKey = _useState[0],
     setActiveTabKey = _useState[1];
-  var _useState2 = React.useState(''),
-    popupVerticalPosition = _useState2[0],
-    setPopupVerticalPosition = _useState2[1];
-  var _useState3 = React.useState(0),
-    popupHeight = _useState3[0],
-    setPopupHeight = _useState3[1];
-  var _useState4 = React.useState(0),
-    scoresHeight = _useState4[0],
-    setScoresHeight = _useState4[1];
-  var _useState5 = React.useState(false),
-    calculateSizes = _useState5[0],
-    setCalculateSizes = _useState5[1];
-  var _useState6 = React.useState(false),
-    closeIsApproved = _useState6[0],
-    setCloseIsApproved = _useState6[1];
+  var _useState2 = React.useState(0),
+    popupHeight = _useState2[0],
+    setPopupHeight = _useState2[1];
+  var _useState3 = React.useState(false),
+    calculateSizes = _useState3[0],
+    setCalculateSizes = _useState3[1];
+  var _useState4 = React.useState(false),
+    closeIsApproved = _useState4[0],
+    setCloseIsApproved = _useState4[1];
   var totalReactions = 0;
   if (reactionTotals) {
     reactionTotals.forEach(function (summery) {
@@ -26440,9 +26414,9 @@ function ReactionsPopup(_ref) {
   }
   var user = getClient().user;
   var dispatch = useDispatch();
-  var _useState7 = React.useState(false),
-    isScrolling = _useState7[0],
-    setIsScrolling = _useState7[1];
+  var _useState5 = React.useState(false),
+    isScrolling = _useState5[0],
+    setIsScrolling = _useState5[1];
   var handleReactionsListScroll = function handleReactionsListScroll(event) {
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100 && reactionsHasNext) {
       if (reactionsLoadingState === LOADING_STATE.LOADED) {
@@ -26471,20 +26445,23 @@ function ReactionsPopup(_ref) {
       dispatch(setReactionsListAC([], true));
     };
   }, [messageId]);
-  React.useEffect(function () {
+  var scoresHeight = React.useMemo(function () {
     var scoresElem = scoresRef.current;
     if (scoresElem) {
-      setScoresHeight(scoresElem.offsetHeight);
+      return scoresElem.offsetHeight;
     }
-  });
+    return 0;
+  }, [scoresRef]);
   React.useEffect(function () {
     if (!reactionTotals || !reactionTotals.length) {
       handleReactionsPopupClose();
     }
   }, [reactionTotals]);
+  var reactionsHeight = React.useMemo(function () {
+    return reactions.length * 50 + 45;
+  }, [reactions]);
   React.useEffect(function () {
     if (reactions && reactionsPrevLength < reactions.length) {
-      var reactionsHeight = reactions.length * 44 + 45;
       if (reactionsHeight > popupHeight) {
         setPopupHeight(reactionsHeight);
       }
@@ -26494,14 +26471,15 @@ function ReactionsPopup(_ref) {
     }
     if (reactions && reactions.length) {
       if (calculateSizes) {
-        var botPost = bottomPosition - messageInputHeight - 40;
-        var _reactionsHeight = reactions.length * 50 + 45;
-        setPopupHeight(_reactionsHeight);
-        setPopupVerticalPosition(botPost >= (_reactionsHeight > 320 ? 320 : _reactionsHeight) ? 'bottom' : 'top');
+        setPopupHeight(reactionsHeight);
         setCalculateSizes(false);
       }
     }
-  }, [reactions]);
+  }, [reactions, reactionsHeight]);
+  var popupVerticalPosition = React.useMemo(function () {
+    var botPost = bottomPosition - messageInputHeight - 40;
+    return botPost >= (reactionsHeight > 320 ? 320 : reactionsHeight) ? 'bottom' : 'top';
+  }, [bottomPosition, messageInputHeight, reactionsHeight]);
   return /*#__PURE__*/React__default.createElement(Container$d, {
     ref: popupRef,
     popupVerticalPosition: popupVerticalPosition,
@@ -26559,7 +26537,10 @@ function ReactionsPopup(_ref) {
   }, reactions.map(function (reaction) {
     return /*#__PURE__*/React__default.createElement(ReactionItem$1, {
       key: reaction.id,
-      hoverBackgroundColor: backgroundHovered
+      hoverBackgroundColor: backgroundHovered,
+      onClick: function onClick() {
+        return handleAddDeleteEmoji(reaction.key);
+      }
     }, /*#__PURE__*/React__default.createElement(AvatarWrapper, null, /*#__PURE__*/React__default.createElement(Avatar, {
       name: reaction.user.firstName || reaction.user.id,
       image: reaction.user.avatarUrl,
@@ -26570,11 +26551,7 @@ function ReactionsPopup(_ref) {
       color: textPrimary
     }, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
       color: textSecondary
-    }, reaction.user.presence && reaction.user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : reaction.user.presence && reaction.user.presence.lastActiveAt && userLastActiveDateFormat(reaction.user.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, {
-      onClick: function onClick() {
-        return handleAddDeleteEmoji(reaction.key);
-      }
-    }, reaction.key));
+    }, reaction.user.presence && reaction.user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : reaction.user.presence && reaction.user.presence.lastActiveAt && userLastActiveDateFormat(reaction.user.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, null, reaction.key));
   })));
 }
 var Container$d = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  /*right: ", ";*/\n  right: ", ";\n  /*left: ", ";*/\n  left: ", ";\n  top: ", ";\n  bottom: ", ";\n  width: 340px;\n  height: ", "px;\n  //overflow: ", ";\n  overflow: hidden;\n  max-height: 320px;\n  background: ", ";\n  //border: 1px solid #dfe0eb;\n  box-shadow:\n    0 6px 24px -6px rgba(15, 34, 67, 0.12),\n    0px 1px 3px rgba(24, 23, 37, 0.14);\n  box-sizing: border-box;\n  //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  visibility: ", ";\n  transition: all 0.2s;\n\n  direction: initial;\n  z-index: 12;\n  &::after {\n    content: '';\n    position: absolute;\n    width: 12px;\n    height: 12px;\n\n    right: ", ";\n    left: ", ";\n    top: ", ";\n    bottom: ", ";\n    transform: rotate(45deg);\n    box-shadow: ", ";\n    border-radius: 2px;\n    visibility: ", ";\n    transition-delay: 150ms;\n    transition-property: visibility;\n\n    background: ", ";\n  }\n"])), function (props) {
@@ -26644,7 +26621,7 @@ var ReactionScoreItem = styled__default.div(_templateObject8$9 || (_templateObje
   return props.active && !props.bubbleStyle && "\n    &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: -13px;\n    width: 100%;\n    height: 2px;\n    background-color: " + props.activeColor + ";\n    border-radius: 2px;\n    }\n  ";
 }, TabKey);
 var ReactionKey = styled__default.span(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  font-size: 20px;\n  cursor: pointer;\n"])));
-var ReactionItem$1 = styled__default.li(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
+var ReactionItem$1 = styled__default.li(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, UserStatus);
 
@@ -36510,29 +36487,20 @@ var AudioRecord = function AudioRecord(_ref) {
   }, [currentRecordedFile, currentChannelId]);
   React.useEffect(function () {
     if (!currentRecordedFile) {
-      (function () {
-        try {
-          var _temp5 = function () {
-            if (!recorder) {
-              var _temp4 = _catch(function () {
-                return Promise.resolve(new Promise(function (resolve) { resolve(_interopNamespace(require('mic-recorder-to-mp3'))); })).then(function (MicRecorderModule) {
-                  var MicRecorder = MicRecorderModule["default"];
-                  var recorder = new MicRecorder({
-                    bitRate: 128
-                  });
-                  setRecorder(recorder);
-                });
-              }, function (e) {
-                log.error('Failed to init mic-recorder-to-mp3', e);
-              });
-              if (_temp4 && _temp4.then) return _temp4.then(function () {});
-            }
-          }();
-          return _temp5 && _temp5.then ? _temp5.then(function () {}) : void 0;
-        } catch (e) {
-          Promise.reject(e);
+      try {
+        if (!recorder) {
+          try {
+            var newRecorder = new MicRecorder({
+              bitRate: 128
+            });
+            setRecorder(newRecorder);
+          } catch (e) {
+            log.error('Failed to init mic-recorder-to-mp3', e);
+          }
         }
-      })();
+      } catch (e) {
+        Promise.reject(e);
+      }
     }
   }, [currentRecordedFile]);
   React.useEffect(function () {

package/index.modern.js

@@ -20,6 +20,7 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { createPortal } from 'react-dom';
 import { useBasicTypeaheadTriggerMatch, LexicalTypeaheadMenuPlugin, MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
 import { $createOffsetView } from '@lexical/offset';
+import MicRecorder from 'mic-recorder-to-mp3';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 
 // src/utils/formatProdErrorMessage.ts
@@ -17824,16 +17825,14 @@ function sendTextMessage(action) {
       case 16:
         throw new Error('Connection required to send message');
       case 17:
+        store.dispatch(getMessagesAC(channel, true, channel.lastMessage.id, undefined, undefined, false));
         _context4.n = 18;
-        return put(scrollToNewMessageAC(true));
-      case 18:
-        _context4.n = 19;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 19:
-        _context4.n = 22;
+      case 18:
+        _context4.n = 21;
         break;
-      case 20:
-        _context4.p = 20;
+      case 19:
+        _context4.p = 19;
         _t3 = _context4.v;
         log.error('error on send text message ... ', _t3);
         updateMessageOnMap(channel.id, {
@@ -17843,23 +17842,23 @@ function sendTextMessage(action) {
           }
         });
         if (!(activeChannelId === channel.id)) {
-          _context4.n = 21;
+          _context4.n = 20;
           break;
         }
         updateMessageOnAllMessages(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         });
-        _context4.n = 21;
+        _context4.n = 20;
         return put(updateMessageAC(sendMessageTid, {
           state: MESSAGE_STATUS.FAILED
         }));
-      case 21:
-        _context4.n = 22;
+      case 20:
+        _context4.n = 21;
         return put(setMessagesLoadingStateAC(LOADING_STATE.LOADED));
-      case 22:
+      case 21:
         return _context4.a(2);
     }
-  }, _marked2$2, null, [[3, 20]]);
+  }, _marked2$2, null, [[3, 19]]);
 }
 function forwardMessage(action) {
   var payload, message, channelId, connectionState, channel, SceytChatClient, mentionedUserIds, attachments, attachmentBuilder, att, messageBuilder, messageToSend, pendingMessage, activeChannelId, isCachedChannel, hasNextMessages, messageResponse, messageUpdateData, messageToUpdate, channelUpdateParam, _t4;
@@ -26396,21 +26395,15 @@ function ReactionsPopup(_ref) {
   var _useState = useState('all'),
     activeTabKey = _useState[0],
     setActiveTabKey = _useState[1];
-  var _useState2 = useState(''),
-    popupVerticalPosition = _useState2[0],
-    setPopupVerticalPosition = _useState2[1];
-  var _useState3 = useState(0),
-    popupHeight = _useState3[0],
-    setPopupHeight = _useState3[1];
-  var _useState4 = useState(0),
-    scoresHeight = _useState4[0],
-    setScoresHeight = _useState4[1];
-  var _useState5 = useState(false),
-    calculateSizes = _useState5[0],
-    setCalculateSizes = _useState5[1];
-  var _useState6 = useState(false),
-    closeIsApproved = _useState6[0],
-    setCloseIsApproved = _useState6[1];
+  var _useState2 = useState(0),
+    popupHeight = _useState2[0],
+    setPopupHeight = _useState2[1];
+  var _useState3 = useState(false),
+    calculateSizes = _useState3[0],
+    setCalculateSizes = _useState3[1];
+  var _useState4 = useState(false),
+    closeIsApproved = _useState4[0],
+    setCloseIsApproved = _useState4[1];
   var totalReactions = 0;
   if (reactionTotals) {
     reactionTotals.forEach(function (summery) {
@@ -26419,9 +26412,9 @@ function ReactionsPopup(_ref) {
   }
   var user = getClient().user;
   var dispatch = useDispatch();
-  var _useState7 = useState(false),
-    isScrolling = _useState7[0],
-    setIsScrolling = _useState7[1];
+  var _useState5 = useState(false),
+    isScrolling = _useState5[0],
+    setIsScrolling = _useState5[1];
   var handleReactionsListScroll = function handleReactionsListScroll(event) {
     if (event.target.scrollTop >= event.target.scrollHeight - event.target.offsetHeight - 100 && reactionsHasNext) {
       if (reactionsLoadingState === LOADING_STATE.LOADED) {
@@ -26450,20 +26443,23 @@ function ReactionsPopup(_ref) {
       dispatch(setReactionsListAC([], true));
     };
   }, [messageId]);
-  useEffect(function () {
+  var scoresHeight = useMemo(function () {
     var scoresElem = scoresRef.current;
     if (scoresElem) {
-      setScoresHeight(scoresElem.offsetHeight);
+      return scoresElem.offsetHeight;
     }
-  });
+    return 0;
+  }, [scoresRef]);
   useEffect(function () {
     if (!reactionTotals || !reactionTotals.length) {
       handleReactionsPopupClose();
     }
   }, [reactionTotals]);
+  var reactionsHeight = useMemo(function () {
+    return reactions.length * 50 + 45;
+  }, [reactions]);
   useEffect(function () {
     if (reactions && reactionsPrevLength < reactions.length) {
-      var reactionsHeight = reactions.length * 44 + 45;
       if (reactionsHeight > popupHeight) {
         setPopupHeight(reactionsHeight);
       }
@@ -26473,14 +26469,15 @@ function ReactionsPopup(_ref) {
     }
     if (reactions && reactions.length) {
       if (calculateSizes) {
-        var botPost = bottomPosition - messageInputHeight - 40;
-        var _reactionsHeight = reactions.length * 50 + 45;
-        setPopupHeight(_reactionsHeight);
-        setPopupVerticalPosition(botPost >= (_reactionsHeight > 320 ? 320 : _reactionsHeight) ? 'bottom' : 'top');
+        setPopupHeight(reactionsHeight);
         setCalculateSizes(false);
       }
     }
-  }, [reactions]);
+  }, [reactions, reactionsHeight]);
+  var popupVerticalPosition = useMemo(function () {
+    var botPost = bottomPosition - messageInputHeight - 40;
+    return botPost >= (reactionsHeight > 320 ? 320 : reactionsHeight) ? 'bottom' : 'top';
+  }, [bottomPosition, messageInputHeight, reactionsHeight]);
   return /*#__PURE__*/React__default.createElement(Container$d, {
     ref: popupRef,
     popupVerticalPosition: popupVerticalPosition,
@@ -26538,7 +26535,10 @@ function ReactionsPopup(_ref) {
   }, reactions.map(function (reaction) {
     return /*#__PURE__*/React__default.createElement(ReactionItem$1, {
       key: reaction.id,
-      hoverBackgroundColor: backgroundHovered
+      hoverBackgroundColor: backgroundHovered,
+      onClick: function onClick() {
+        return handleAddDeleteEmoji(reaction.key);
+      }
     }, /*#__PURE__*/React__default.createElement(AvatarWrapper, null, /*#__PURE__*/React__default.createElement(Avatar, {
       name: reaction.user.firstName || reaction.user.id,
       image: reaction.user.avatarUrl,
@@ -26549,11 +26549,7 @@ function ReactionsPopup(_ref) {
       color: textPrimary
     }, makeUsername(reaction.user.id === user.id ? reaction.user : contactsMap[reaction.user.id], reaction.user, getFromContacts)), /*#__PURE__*/React__default.createElement(SubTitle, {
       color: textSecondary
-    }, reaction.user.presence && reaction.user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : reaction.user.presence && reaction.user.presence.lastActiveAt && userLastActiveDateFormat(reaction.user.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, {
-      onClick: function onClick() {
-        return handleAddDeleteEmoji(reaction.key);
-      }
-    }, reaction.key));
+    }, reaction.user.presence && reaction.user.presence.state === USER_PRESENCE_STATUS.ONLINE ? 'Online' : reaction.user.presence && reaction.user.presence.lastActiveAt && userLastActiveDateFormat(reaction.user.presence.lastActiveAt))), /*#__PURE__*/React__default.createElement(ReactionKey, null, reaction.key));
   })));
 }
 var Container$d = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  /*right: ", ";*/\n  right: ", ";\n  /*left: ", ";*/\n  left: ", ";\n  top: ", ";\n  bottom: ", ";\n  width: 340px;\n  height: ", "px;\n  //overflow: ", ";\n  overflow: hidden;\n  max-height: 320px;\n  background: ", ";\n  //border: 1px solid #dfe0eb;\n  box-shadow:\n    0 6px 24px -6px rgba(15, 34, 67, 0.12),\n    0px 1px 3px rgba(24, 23, 37, 0.14);\n  box-sizing: border-box;\n  //box-shadow: 0 0 12px rgba(0, 0, 0, 0.08);\n  border-radius: ", ";\n  visibility: ", ";\n  transition: all 0.2s;\n\n  direction: initial;\n  z-index: 12;\n  &::after {\n    content: '';\n    position: absolute;\n    width: 12px;\n    height: 12px;\n\n    right: ", ";\n    left: ", ";\n    top: ", ";\n    bottom: ", ";\n    transform: rotate(45deg);\n    box-shadow: ", ";\n    border-radius: 2px;\n    visibility: ", ";\n    transition-delay: 150ms;\n    transition-property: visibility;\n\n    background: ", ";\n  }\n"])), function (props) {
@@ -26623,7 +26619,7 @@ var ReactionScoreItem = styled.div(_templateObject8$9 || (_templateObject8$9 = _
   return props.active && !props.bubbleStyle && "\n    &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    bottom: -13px;\n    width: 100%;\n    height: 2px;\n    background-color: " + props.activeColor + ";\n    border-radius: 2px;\n    }\n  ";
 }, TabKey);
 var ReactionKey = styled.span(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  font-family:\n    apple color emoji,\n    segoe ui emoji,\n    noto color emoji,\n    android emoji,\n    emojisymbols,\n    emojione mozilla,\n    twemoji mozilla,\n    segoe ui symbol;\n  font-size: 20px;\n  cursor: pointer;\n"])));
-var ReactionItem$1 = styled.li(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
+var ReactionItem$1 = styled.li(_templateObject0$8 || (_templateObject0$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 15px;\n  padding: 6px 16px;\n  transition: all 0.2s;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  & ", " {\n    width: 10px;\n    height: 10px;\n  }\n"])), function (props) {
   return props.hoverBackgroundColor;
 }, UserStatus);
 
@@ -36489,29 +36485,20 @@ var AudioRecord = function AudioRecord(_ref) {
   }, [currentRecordedFile, currentChannelId]);
   useEffect(function () {
     if (!currentRecordedFile) {
-      (function () {
-        try {
-          var _temp5 = function () {
-            if (!recorder) {
-              var _temp4 = _catch(function () {
-                return Promise.resolve(import('mic-recorder-to-mp3')).then(function (MicRecorderModule) {
-                  var MicRecorder = MicRecorderModule["default"];
-                  var recorder = new MicRecorder({
-                    bitRate: 128
-                  });
-                  setRecorder(recorder);
-                });
-              }, function (e) {
-                log.error('Failed to init mic-recorder-to-mp3', e);
-              });
-              if (_temp4 && _temp4.then) return _temp4.then(function () {});
-            }
-          }();
-          return _temp5 && _temp5.then ? _temp5.then(function () {}) : void 0;
-        } catch (e) {
-          Promise.reject(e);
+      try {
+        if (!recorder) {
+          try {
+            var newRecorder = new MicRecorder({
+              bitRate: 128
+            });
+            setRecorder(newRecorder);
+          } catch (e) {
+            log.error('Failed to init mic-recorder-to-mp3', e);
+          }
         }
-      })();
+      } catch (e) {
+        Promise.reject(e);
+      }
     }
   }, [currentRecordedFile]);
   useEffect(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sceyt-chat-react-uikit",
-  "version": "1.7.2-beta.7",
+  "version": "1.7.2-beta.9",
   "description": "Interactive React UI Components for Sceyt Chat.",
   "author": "Sceyt",
   "license": "MIT",