stream-chat-react-native-core 4.1.0-next.1 → 4.1.1-beta.2

package/lib/commonjs/components/MessageOverlay/MessageActionListItem.js

@@ -0,0 +1,131 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageActionListItem = exports.MemoizedMessageActionListItem = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+
+var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
+
+var _useMessageActionAnimation = require("./hooks/useMessageActionAnimation");
+
+var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
+
+var _utils = require("../../utils/utils");
+
+var _this = this,
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/MessageActionListItem.tsx";
+
+var styles = _reactNative.StyleSheet.create({
+  bottomBorder: {
+    borderBottomWidth: 1
+  },
+  container: {
+    borderRadius: 16,
+    marginTop: 8,
+    maxWidth: 275
+  },
+  row: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    minWidth: (0, _utils.vw)(65),
+    paddingHorizontal: 20,
+    paddingVertical: 10
+  },
+  titleStyle: {
+    paddingLeft: 20
+  }
+});
+
+var MessageActionListItemWithContext = function MessageActionListItemWithContext(props) {
+  var action = props.action,
+      actionType = props.actionType,
+      icon = props.icon,
+      index = props.index,
+      length = props.length,
+      title = props.title,
+      titleStyle = props.titleStyle;
+
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+      _useTheme$theme = _useTheme.theme,
+      _useTheme$theme$color = _useTheme$theme.colors,
+      black = _useTheme$theme$color.black,
+      border = _useTheme$theme$color.border,
+      messageActions = _useTheme$theme.overlay.messageActions;
+
+  var _useMessageActionAnim = (0, _useMessageActionAnimation.useMessageActionAnimation)({
+    action: action
+  }),
+      animatedStyle = _useMessageActionAnim.animatedStyle,
+      onTap = _useMessageActionAnim.onTap;
+
+  return _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
+    onHandlerStateChange: onTap,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 86,
+      columnNumber: 5
+    }
+  }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
+    style: [styles.row, index !== length - 1 ? (0, _extends2["default"])({}, styles.bottomBorder, {
+      borderBottomColor: border
+    }) : {}, animatedStyle, messageActions.actionContainer],
+    testID: actionType + "-list-item",
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 87,
+      columnNumber: 7
+    }
+  }, _react["default"].createElement(_reactNative.View, {
+    style: messageActions.icon,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 96,
+      columnNumber: 9
+    }
+  }, icon), _react["default"].createElement(_reactNative.Text, {
+    style: [styles.titleStyle, messageActions.title, {
+      color: black
+    }, titleStyle],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 97,
+      columnNumber: 9
+    }
+  }, title)));
+};
+
+var messageActionIsEqual = function messageActionIsEqual(prevProps, nextProps) {
+  return prevProps.length === nextProps.length;
+};
+
+var MemoizedMessageActionListItem = _react["default"].memo(MessageActionListItemWithContext, messageActionIsEqual);
+
+exports.MemoizedMessageActionListItem = MemoizedMessageActionListItem;
+
+var MessageActionListItem = function MessageActionListItem(props) {
+  return _react["default"].createElement(MemoizedMessageActionListItem, (0, _extends2["default"])({}, props, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 124,
+      columnNumber: 6
+    }
+  }));
+};
+
+exports.MessageActionListItem = MessageActionListItem;
+//# sourceMappingURL=MessageActionListItem.js.map

package/lib/commonjs/components/MessageOverlay/MessageActionListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MessageActionListItem.tsx"],"names":["styles","StyleSheet","create","bottomBorder","borderBottomWidth","container","borderRadius","marginTop","maxWidth","row","alignItems","flexDirection","justifyContent","minWidth","paddingHorizontal","paddingVertical","titleStyle","paddingLeft","MessageActionListItemWithContext","props","action","actionType","icon","index","length","title","theme","colors","black","border","messageActions","overlay","animatedStyle","onTap","borderBottomColor","actionContainer","color","messageActionIsEqual","prevProps","nextProps","MemoizedMessageActionListItem","React","memo","MessageActionListItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';\nimport { TapGestureHandler } from 'react-native-gesture-handler';\nimport Animated from 'react-native-reanimated';\n\nimport { useMessageActionAnimation } from './hooks/useMessageActionAnimation';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { vw } from '../../utils/utils';\nimport type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';\n\nconst styles = StyleSheet.create({\n  bottomBorder: {\n    borderBottomWidth: 1,\n  },\n  container: {\n    borderRadius: 16,\n    marginTop: 8,\n    maxWidth: 275,\n  },\n  row: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    minWidth: vw(65),\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n  },\n  titleStyle: {\n    paddingLeft: 20,\n  },\n});\n\nexport type ActionType =\n  | 'blockUser'\n  | 'copyMessage'\n  | 'deleteMessage'\n  | 'editMessage'\n  | 'flagMessage'\n  | 'muteUser'\n  | 'pinMessage'\n  | 'selectReaction'\n  | 'reply'\n  | 'retry'\n  | 'quotedReply'\n  | 'threadReply'\n  | 'unpinMessage';\n\nexport type MessageActionType = {\n  action: () => void;\n  actionType: ActionType;\n  title: string;\n  icon?: React.ReactElement;\n  titleStyle?: StyleProp<TextStyle>;\n};\n\nexport type MessageActionListItemProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = MessageActionType &\n  Pick<\n    MessageOverlayPropsWithContext<StreamChatGenerics>,\n    'error' | 'isMyMessage' | 'isThreadMessage' | 'message' | 'messageReactions'\n  > & {\n    index: number;\n    length: number;\n  };\n\nconst MessageActionListItemWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListItemProps<StreamChatGenerics>,\n) => {\n  const { action, actionType, icon, index, length, title, titleStyle } = props;\n\n  const {\n    theme: {\n      colors: { black, border },\n      overlay: { messageActions },\n    },\n  } = useTheme();\n\n  const { animatedStyle, onTap } = useMessageActionAnimation({ action });\n\n  return (\n    <TapGestureHandler onHandlerStateChange={onTap}>\n      <Animated.View\n        style={[\n          styles.row,\n          index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},\n          animatedStyle,\n          messageActions.actionContainer,\n        ]}\n        testID={`${actionType}-list-item`}\n      >\n        <View style={messageActions.icon}>{icon}</View>\n        <Text style={[styles.titleStyle, messageActions.title, { color: black }, titleStyle]}>\n          {title}\n        </Text>\n      </Animated.View>\n    </TapGestureHandler>\n  );\n};\n\nconst messageActionIsEqual = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  prevProps: MessageActionListItemProps<StreamChatGenerics>,\n  nextProps: MessageActionListItemProps<StreamChatGenerics>,\n) => prevProps.length === nextProps.length;\n\nexport const MemoizedMessageActionListItem = React.memo(\n  MessageActionListItemWithContext,\n  messageActionIsEqual,\n) as typeof MessageActionListItemWithContext;\n\n/**\n * MessageActionListItem - A high-level component that implements all the logic required for a `MessageAction` in a `MessageActionList`\n */\nexport const MessageActionListItem = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageActionListItemProps<StreamChatGenerics>,\n) => <MemoizedMessageActionListItem {...props} />;\n"]}

package/lib/commonjs/components/MessageOverlay/MessageOverlay.js

@@ -15,17 +15,17 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 
-var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _MessageActionList = require("./MessageActionList");
 
 var _OverlayReactionList = require("./OverlayReactionList");
 
-var _MessageTextContainer = require("../Message/MessageSimple/MessageTextContainer");
+var _OverlayReactionsAvatar = require("./OverlayReactionsAvatar");
 
-var _MessageActions = require("../MessageOverlay/MessageActions");
-
-var _OverlayReactions = require("../MessageOverlay/OverlayReactions");
+var _MessageContext = require("../../contexts/messageContext/MessageContext");
 
 var _MessageOverlayContext = require("../../contexts/messageOverlayContext/MessageOverlayContext");
 
@@ -37,7 +37,9 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _utils = require("../../utils/utils");
 
-var _MessageContext = require("../../contexts/messageContext/MessageContext");
+var _MessageTextContainer = require("../Message/MessageSimple/MessageTextContainer");
+
+var _OverlayReactions = require("../MessageOverlay/OverlayReactions");
 
 var _this = this,
     _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/MessageOverlay.tsx";
@@ -84,11 +86,13 @@ var styles = _reactNative.StyleSheet.create({
 
 var screenHeight = (0, _utils.vh)(100);
 var halfScreenHeight = (0, _utils.vh)(50);
+var DefaultMessageTextNumberOfLines = 5;
 
 var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
   var _message$user, _message$own_reaction, _messagesContext$mess;
 
   var alignment = props.alignment,
+      ownCapabilities = props.ownCapabilities,
       clientId = props.clientId,
       files = props.files,
       groupStyles = props.groupStyles,
@@ -96,10 +100,13 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       images = props.images,
       message = props.message,
       messageActions = props.messageActions,
-      _props$MessageActions = props.MessageActions,
-      MessageActions = _props$MessageActions === void 0 ? _MessageActions.MessageActions : _props$MessageActions,
+      _props$MessageActionL = props.MessageActionList,
+      MessageActionList = _props$MessageActionL === void 0 ? _MessageActionList.MessageActionList : _props$MessageActionL,
+      MessageActionListItem = props.MessageActionListItem,
       messageContext = props.messageContext,
       messageReactionTitle = props.messageReactionTitle,
+      _props$messageTextNum = props.messageTextNumberOfLines,
+      messageTextNumberOfLines = _props$messageTextNum === void 0 ? DefaultMessageTextNumberOfLines : _props$messageTextNum,
       messagesContext = props.messagesContext,
       onlyEmojis = props.onlyEmojis,
       otherAttachments = props.otherAttachments,
@@ -109,10 +116,21 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       OverlayReactionList = _props$OverlayReactio === void 0 ? _OverlayReactionList.OverlayReactionList : _props$OverlayReactio,
       _props$OverlayReactio2 = props.OverlayReactions,
       OverlayReactions = _props$OverlayReactio2 === void 0 ? _OverlayReactions.OverlayReactions : _props$OverlayReactio2,
-      reset = props.reset,
+      _props$OverlayReactio3 = props.OverlayReactionsAvatar,
+      OverlayReactionsAvatar = _props$OverlayReactio3 === void 0 ? _OverlayReactionsAvatar.OverlayReactionsAvatar : _props$OverlayReactio3,
       setOverlay = props.setOverlay,
       threadList = props.threadList,
-      visible = props.visible;
+      isMyMessage = props.isMyMessage,
+      messageReactions = props.messageReactions,
+      error = props.error,
+      isThreadMessage = props.isThreadMessage;
+  var messageActionProps = {
+    error: error,
+    isMyMessage: isMyMessage,
+    isThreadMessage: isThreadMessage,
+    message: message,
+    messageReactions: messageReactions
+  };
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
       theme = _useTheme.theme;
@@ -125,11 +143,6 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       myMessageThemeString = _useState2[0],
       setMyMessageThemeString = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      reactionListHeight = _useState4[0],
-      setReactionListHeight = _useState4[1];
-
   (0, _react.useEffect)(function () {
     if (myMessageTheme) {
       setMyMessageThemeString(JSON.stringify(myMessageTheme));
@@ -154,7 +167,10 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       borderRadiusL = _ref$messageSimple$co2.borderRadiusL,
       borderRadiusS = _ref$messageSimple$co2.borderRadiusS,
       containerInner = _ref$messageSimple$co.containerInner,
-      replyContainer = _ref$messageSimple$co.replyContainer;
+      replyContainer = _ref$messageSimple$co.replyContainer,
+      _ref$overlay = _ref.overlay,
+      containerStyle = _ref$overlay.container,
+      overlayPadding = _ref$overlay.padding;
 
   var messageHeight = (0, _reactNativeReanimated.useSharedValue)(0);
   var messageLayout = (0, _reactNativeReanimated.useSharedValue)({
@@ -167,39 +183,27 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
   var scale = (0, _reactNativeReanimated.useSharedValue)(1);
   var showScreen = (0, _reactNativeReanimated.useSharedValue)(0);
 
-  var fadeScreen = function fadeScreen(show) {
+  var fadeScreen = function fadeScreen() {
     'worklet';
 
-    if (show) {
-      offsetY.value = 0;
-      translateY.value = 0;
-      scale.value = 1;
-    }
-
-    showScreen.value = show ? (0, _reactNativeReanimated.withSpring)(1, {
+    offsetY.value = 0;
+    translateY.value = 0;
+    scale.value = 1;
+    showScreen.value = (0, _reactNativeReanimated.withSpring)(1, {
       damping: 600,
       mass: 0.5,
       restDisplacementThreshold: 0.01,
       restSpeedThreshold: 0.01,
       stiffness: 200,
       velocity: 32
-    }) : (0, _reactNativeReanimated.withTiming)(0, {
-      duration: 150,
-      easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-    }, function () {
-      if (!show) {
-        (0, _reactNativeReanimated.runOnJS)(reset)();
-      }
     });
   };
 
   (0, _react.useEffect)(function () {
-    if (visible) {
-      _reactNative.Keyboard.dismiss();
-    }
+    _reactNative.Keyboard.dismiss();
 
-    fadeScreen(!!visible);
-  }, [visible]);
+    fadeScreen();
+  }, []);
   var onPan = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
     onActive: function onActive(evt) {
       translateY.value = offsetY.value + evt.translationY;
@@ -269,7 +273,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 309,
+      lineNumber: 303,
       columnNumber: 5
     }
   }, _react["default"].createElement(_MessageContext.MessageProvider, {
@@ -277,7 +281,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 310,
+      lineNumber: 304,
       columnNumber: 7
     }
   }, _react["default"].createElement(_ThemeContext.ThemeProvider, {
@@ -285,16 +289,16 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 311,
+      lineNumber: 305,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
-    pointerEvents: visible ? 'auto' : 'none',
-    style: _reactNative.StyleSheet.absoluteFillObject,
+    pointerEvents: 'auto',
+    style: [_reactNative.StyleSheet.absoluteFillObject, containerStyle],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 312,
+      lineNumber: 306,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
@@ -305,7 +309,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 316,
+      lineNumber: 310,
       columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
@@ -313,7 +317,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 322,
+      lineNumber: 316,
       columnNumber: 15
     }
   }, _react["default"].createElement(_reactNative.SafeAreaView, {
@@ -321,22 +325,9 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 323,
+      lineNumber: 317,
       columnNumber: 17
     }
-  }, _react["default"].createElement(_reactNativeGestureHandler.ScrollView, {
-    alwaysBounceVertical: false,
-    contentContainerStyle: [styles.center, {
-      paddingTop: reactionListHeight
-    }],
-    showsVerticalScrollIndicator: false,
-    style: [styles.flex, styles.scrollView],
-    __self: _this,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 324,
-      columnNumber: 19
-    }
   }, _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
     maxDist: 32,
     onHandlerStateChange: function onHandlerStateChange(_ref3) {
@@ -349,37 +340,38 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 335,
-      columnNumber: 21
+      lineNumber: 318,
+      columnNumber: 19
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
     style: [styles.flex, panStyle],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 343,
-      columnNumber: 23
+      lineNumber: 326,
+      columnNumber: 21
     }
   }, message && _react["default"].createElement(_reactNative.View, {
-    style: [styles.center, styles.overlayPadding, alignment === 'left' ? styles.alignStart : styles.alignEnd],
+    style: [styles.center, styles.overlayPadding, {
+      padding: overlayPadding
+    }, alignment === 'left' ? styles.alignStart : styles.alignEnd],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 345,
-      columnNumber: 27
+      lineNumber: 328,
+      columnNumber: 25
     }
-  }, handleReaction ? _react["default"].createElement(OverlayReactionList, {
+  }, handleReaction && ownCapabilities != null && ownCapabilities.sendReaction ? _react["default"].createElement(OverlayReactionList, {
     messageLayout: messageLayout,
     ownReactionTypes: (message == null ? void 0 : (_message$own_reaction = message.own_reactions) == null ? void 0 : _message$own_reaction.map(function (reaction) {
       return reaction.type;
     })) || [],
-    setReactionListHeight: setReactionListHeight,
     showScreen: showScreen,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 353,
-      columnNumber: 31
+      lineNumber: 337,
+      columnNumber: 29
     }
   }) : null, _react["default"].createElement(_reactNativeReanimated["default"].View, {
     onLayout: function onLayout(_ref4) {
@@ -399,8 +391,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 362,
-      columnNumber: 29
+      lineNumber: 345,
+      columnNumber: 27
     }
   }, alignment === 'left' && MessageAvatar && _react["default"].createElement(MessageAvatar, {
     alignment: alignment,
@@ -409,8 +401,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 378,
-      columnNumber: 33
+      lineNumber: 361,
+      columnNumber: 31
     }
   }), _react["default"].createElement(_reactNative.View, {
     style: [styles.containerInner, {
@@ -424,20 +416,20 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 380,
-      columnNumber: 31
+      lineNumber: 363,
+      columnNumber: 29
     }
   }, messagesContext == null ? void 0 : (_messagesContext$mess = messagesContext.messageContentOrder) == null ? void 0 : _messagesContext$mess.map(function (messageContentType, messageContentOrderIndex) {
     switch (messageContentType) {
       case 'quoted_reply':
-        return (messagesContext == null ? void 0 : messagesContext.quotedRepliesEnabled) && message.quoted_message && Reply && _react["default"].createElement(_reactNative.View, {
+        return message.quoted_message && Reply && _react["default"].createElement(_reactNative.View, {
           key: "quoted_reply_" + messageContentOrderIndex,
           style: [styles.replyContainer, replyContainer],
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 425,
-            columnNumber: 45
+            lineNumber: 406,
+            columnNumber: 43
           }
         }, _react["default"].createElement(Reply, {
           quotedMessage: message.quoted_message,
@@ -449,8 +441,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 429,
-            columnNumber: 47
+            lineNumber: 410,
+            columnNumber: 45
           }
         }));
 
@@ -462,8 +454,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
             __self: _this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 454,
-              columnNumber: 47
+              lineNumber: 427,
+              columnNumber: 45
             }
           });
         });
@@ -476,8 +468,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 463,
-            columnNumber: 45
+            lineNumber: 436,
+            columnNumber: 43
           }
         });
 
@@ -488,14 +480,13 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
           hasThreadReplies: !!(message != null && message.reply_count),
           images: images,
           key: "gallery_" + messageContentOrderIndex,
-          messageId: message.id,
-          messageText: message.text,
+          message: message,
           threadList: threadList,
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 473,
-            columnNumber: 45
+            lineNumber: 446,
+            columnNumber: 43
           }
         });
 
@@ -505,32 +496,38 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
           key: "message_text_container_" + messageContentOrderIndex,
           message: message,
           messageOverlay: true,
+          messageTextNumberOfLines: messageTextNumberOfLines,
           onlyEmojis: onlyEmojis,
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 489,
-            columnNumber: 43
+            lineNumber: 461,
+            columnNumber: 41
           }
         });
     }
-  }))), messageActions && _react["default"].createElement(MessageActions, {
-    showScreen: showScreen,
+  }))), messageActions && _react["default"].createElement(MessageActionList, (0, _extends2["default"])({
+    MessageActionListItem: MessageActionListItem,
+    showScreen: showScreen
+  }, messageActionProps, {
+    message: message,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 501,
-      columnNumber: 48
+      lineNumber: 475,
+      columnNumber: 29
     }
-  }), !!messageReactionTitle && message.latest_reactions && message.latest_reactions.length > 0 ? _react["default"].createElement(OverlayReactions, {
+  })), !!messageReactionTitle && message.latest_reactions && message.latest_reactions.length > 0 ? _react["default"].createElement(OverlayReactions, {
     alignment: alignment,
+    OverlayReactionsAvatar: OverlayReactionsAvatar,
     reactions: message.latest_reactions.map(function (reaction) {
-      var _reaction$user, _reaction$user2, _reaction$user3;
+      var _reaction$user, _reaction$user2, _reaction$user3, _reaction$user4;
 
       return {
         alignment: clientId && clientId === ((_reaction$user = reaction.user) == null ? void 0 : _reaction$user.id) ? 'right' : 'left',
-        image: reaction == null ? void 0 : (_reaction$user2 = reaction.user) == null ? void 0 : _reaction$user2.image,
-        name: (reaction == null ? void 0 : (_reaction$user3 = reaction.user) == null ? void 0 : _reaction$user3.name) || reaction.user_id || '',
+        id: (reaction == null ? void 0 : (_reaction$user2 = reaction.user) == null ? void 0 : _reaction$user2.id) || '',
+        image: reaction == null ? void 0 : (_reaction$user3 = reaction.user) == null ? void 0 : _reaction$user3.image,
+        name: (reaction == null ? void 0 : (_reaction$user4 = reaction.user) == null ? void 0 : _reaction$user4.name) || reaction.user_id || '',
         type: reaction.type
       };
     }),
@@ -540,23 +537,19 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 505,
-      columnNumber: 31
+      lineNumber: 485,
+      columnNumber: 29
     }
-  }) : null)))))))))));
+  }) : null))))))))));
 };
 
 var areEqual = function areEqual(prevProps, nextProps) {
   var prevAlignment = prevProps.alignment,
       prevMessage = prevProps.message,
-      prevMessageReactionTitle = prevProps.messageReactionTitle,
-      prevVisible = prevProps.visible;
+      prevMessageReactionTitle = prevProps.messageReactionTitle;
   var nextAlignment = nextProps.alignment,
       nextMessage = nextProps.message,
-      nextMessageReactionTitle = nextProps.messageReactionTitle,
-      nextVisible = nextProps.visible;
-  var visibleEqual = prevVisible === nextVisible;
-  if (!visibleEqual) return false;
+      nextMessageReactionTitle = nextProps.messageReactionTitle;
   var alignmentEqual = prevAlignment === nextAlignment;
   if (!alignmentEqual) return false;
   var messageReactionTitleEqual = prevMessageReactionTitle === nextMessageReactionTitle;
@@ -576,29 +569,31 @@ var MemoizedMessageOverlay = _react["default"].memo(MessageOverlayWithContext, a
 var MessageOverlay = function MessageOverlay(props) {
   var _useMessageOverlayCon = (0, _MessageOverlayContext.useMessageOverlayContext)(),
       data = _useMessageOverlayCon.data,
-      MessageActions = _useMessageOverlayCon.MessageActions,
+      MessageActionList = _useMessageOverlayCon.MessageActionList,
+      MessageActionListItem = _useMessageOverlayCon.MessageActionListItem,
       OverlayReactionList = _useMessageOverlayCon.OverlayReactionList,
       OverlayReactions = _useMessageOverlayCon.OverlayReactions,
-      reset = _useMessageOverlayCon.reset;
+      OverlayReactionsAvatar = _useMessageOverlayCon.OverlayReactionsAvatar;
 
   var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
       overlay = _useOverlayContext.overlay,
       setOverlay = _useOverlayContext.setOverlay;
 
   var componentProps = {
-    MessageActions: props.MessageActions || MessageActions,
+    MessageActionList: props.MessageActionList || MessageActionList,
+    MessageActionListItem: props.MessageActionListItem || MessageActionListItem,
     OverlayReactionList: props.OverlayReactionList || OverlayReactionList || (data == null ? void 0 : data.OverlayReactionList),
-    OverlayReactions: props.OverlayReactions || OverlayReactions
+    OverlayReactions: props.OverlayReactions || OverlayReactions,
+    OverlayReactionsAvatar: props.OverlayReactionsAvatar || OverlayReactionsAvatar
   };
-  return _react["default"].createElement(MemoizedMessageOverlay, (0, _extends2["default"])({}, data || {}, {
+  return _react["default"].createElement(MemoizedMessageOverlay, (0, _extends2["default"])({
     overlay: overlay,
-    reset: reset,
     setOverlay: setOverlay
-  }, props, componentProps, {
+  }, componentProps, data || {}, props, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 622,
+      lineNumber: 592,
       columnNumber: 5
     }
   }));