stream-chat-react-native-core 5.2.0-beta.1 → 5.3.0-beta.2

package/lib/module/components/Message/MessageSimple/MessageAvatar.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
+var _ChatContext = require("../../../contexts/chatContext/ChatContext");
+
 var _MessageContext = require("../../../contexts/messageContext/MessageContext");
 
 var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
@@ -24,6 +26,7 @@ var MessageAvatarWithContext = function MessageAvatarWithContext(props) {
   var _message$user, _message$user2, _message$user3;
 
   var alignment = props.alignment,
+      ImageComponent = props.ImageComponent,
       lastGroupMessage = props.lastGroupMessage,
       message = props.message,
       showAvatar = props.showAvatar,
@@ -45,17 +48,18 @@ var MessageAvatarWithContext = function MessageAvatarWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 39,
+      lineNumber: 41,
       columnNumber: 5
     }
   }, visible ? _react["default"].createElement(_Avatar.Avatar, {
     image: (_message$user = message.user) == null ? void 0 : _message$user.image,
+    ImageComponent: ImageComponent,
     name: ((_message$user2 = message.user) == null ? void 0 : _message$user2.name) || ((_message$user3 = message.user) == null ? void 0 : _message$user3.id),
     size: size || BASE_AVATAR_SIZE,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 44,
+      lineNumber: 46,
       columnNumber: 9
     }
   }) : _react["default"].createElement(_reactNative.View, {
@@ -64,7 +68,7 @@ var MessageAvatarWithContext = function MessageAvatarWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 50,
+      lineNumber: 53,
       columnNumber: 9
     }
   }));
@@ -93,8 +97,12 @@ var MessageAvatar = function MessageAvatar(props) {
       message = _useMessageContext.message,
       showAvatar = _useMessageContext.showAvatar;
 
+  var _useChatContext = (0, _ChatContext.useChatContext)(),
+      ImageComponent = _useChatContext.ImageComponent;
+
   return _react["default"].createElement(MemoizedMessageAvatar, (0, _extends2["default"])({
     alignment: alignment,
+    ImageComponent: ImageComponent,
     lastGroupMessage: lastGroupMessage,
     message: message,
     showAvatar: showAvatar
@@ -102,7 +110,7 @@ var MessageAvatar = function MessageAvatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 93,
+      lineNumber: 96,
       columnNumber: 5
     }
   }));

package/lib/module/components/Message/MessageSimple/MessageAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MessageAvatar.tsx"],"names":["MessageAvatarWithContext","props","alignment","lastGroupMessage","message","showAvatar","size","theme","BASE_AVATAR_SIZE","avatar","messageSimple","avatarWrapper","container","leftAlign","rightAlign","spacer","visible","user","image","name","id","areEqual","prevProps","nextProps","prevLastGroupMessage","prevMessage","nextLastGroupMessage","nextMessage","lastGroupMessageEqual","userEqual","MemoizedMessageAvatar","React","memo","MessageAvatar","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport {\n  MessageContextValue,\n  useMessageContext,\n} from '../../../contexts/messageContext/MessageContext';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { Avatar, AvatarProps } from '../../Avatar/Avatar';\n\nexport type MessageAvatarPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  MessageContextValue<StreamChatGenerics>,\n  'alignment' | 'lastGroupMessage' | 'message' | 'showAvatar'\n> &\n  Partial<Pick<AvatarProps, 'size'>>;\n\nconst MessageAvatarWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageAvatarPropsWithContext<StreamChatGenerics>,\n) => {\n  const { alignment, lastGroupMessage, message, showAvatar, size } = props;\n  const {\n    theme: {\n      avatar: { BASE_AVATAR_SIZE },\n      messageSimple: {\n        avatarWrapper: { container, leftAlign, rightAlign, spacer },\n      },\n    },\n  } = useTheme();\n\n  const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;\n\n  return (\n    <View\n      style={[alignment === 'left' ? leftAlign : rightAlign, container]}\n      testID='message-avatar'\n    >\n      {visible ? (\n        <Avatar\n          image={message.user?.image}\n          name={message.user?.name || message.user?.id}\n          size={size || BASE_AVATAR_SIZE}\n        />\n      ) : (\n        <View style={spacer} testID='spacer' />\n      )}\n    </View>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: MessageAvatarPropsWithContext<StreamChatGenerics>,\n  nextProps: MessageAvatarPropsWithContext<StreamChatGenerics>,\n) => {\n  const { lastGroupMessage: prevLastGroupMessage, message: prevMessage } = prevProps;\n  const { lastGroupMessage: nextLastGroupMessage, message: nextMessage } = nextProps;\n\n  const lastGroupMessageEqual = prevLastGroupMessage === nextLastGroupMessage;\n  if (!lastGroupMessageEqual) return false;\n\n  const userEqual =\n    prevMessage.user?.image === nextMessage.user?.image &&\n    prevMessage.user?.name === nextMessage.user?.name &&\n    prevMessage.user?.id === nextMessage.user?.id;\n  if (!userEqual) return false;\n\n  return true;\n};\n\nconst MemoizedMessageAvatar = React.memo(\n  MessageAvatarWithContext,\n  areEqual,\n) as typeof MessageAvatarWithContext;\n\nexport type MessageAvatarProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<MessageAvatarPropsWithContext<StreamChatGenerics>>;\n\nexport const MessageAvatar = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageAvatarProps<StreamChatGenerics>,\n) => {\n  const { alignment, lastGroupMessage, message, showAvatar } =\n    useMessageContext<StreamChatGenerics>();\n\n  return (\n    <MemoizedMessageAvatar\n      {...{\n        alignment,\n        lastGroupMessage,\n        message,\n        showAvatar,\n      }}\n      {...props}\n    />\n  );\n};\n\nMessageAvatar.displayName = 'MessageAvatar{messageSimple{avatarWrapper}}';\n"]}
+{"version":3,"sources":["MessageAvatar.tsx"],"names":["MessageAvatarWithContext","props","alignment","ImageComponent","lastGroupMessage","message","showAvatar","size","theme","BASE_AVATAR_SIZE","avatar","messageSimple","avatarWrapper","container","leftAlign","rightAlign","spacer","visible","user","image","name","id","areEqual","prevProps","nextProps","prevLastGroupMessage","prevMessage","nextLastGroupMessage","nextMessage","lastGroupMessageEqual","userEqual","MemoizedMessageAvatar","React","memo","MessageAvatar","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';\nimport {\n  MessageContextValue,\n  useMessageContext,\n} from '../../../contexts/messageContext/MessageContext';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { Avatar, AvatarProps } from '../../Avatar/Avatar';\n\nexport type MessageAvatarPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  MessageContextValue<StreamChatGenerics>,\n  'alignment' | 'lastGroupMessage' | 'message' | 'showAvatar'\n> &\n  Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'> &\n  Partial<Pick<AvatarProps, 'size'>>;\n\nconst MessageAvatarWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageAvatarPropsWithContext<StreamChatGenerics>,\n) => {\n  const { alignment, ImageComponent, lastGroupMessage, message, showAvatar, size } = props;\n  const {\n    theme: {\n      avatar: { BASE_AVATAR_SIZE },\n      messageSimple: {\n        avatarWrapper: { container, leftAlign, rightAlign, spacer },\n      },\n    },\n  } = useTheme();\n\n  const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;\n\n  return (\n    <View\n      style={[alignment === 'left' ? leftAlign : rightAlign, container]}\n      testID='message-avatar'\n    >\n      {visible ? (\n        <Avatar\n          image={message.user?.image}\n          ImageComponent={ImageComponent}\n          name={message.user?.name || message.user?.id}\n          size={size || BASE_AVATAR_SIZE}\n        />\n      ) : (\n        <View style={spacer} testID='spacer' />\n      )}\n    </View>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: MessageAvatarPropsWithContext<StreamChatGenerics>,\n  nextProps: MessageAvatarPropsWithContext<StreamChatGenerics>,\n) => {\n  const { lastGroupMessage: prevLastGroupMessage, message: prevMessage } = prevProps;\n  const { lastGroupMessage: nextLastGroupMessage, message: nextMessage } = nextProps;\n\n  const lastGroupMessageEqual = prevLastGroupMessage === nextLastGroupMessage;\n  if (!lastGroupMessageEqual) return false;\n\n  const userEqual =\n    prevMessage.user?.image === nextMessage.user?.image &&\n    prevMessage.user?.name === nextMessage.user?.name &&\n    prevMessage.user?.id === nextMessage.user?.id;\n  if (!userEqual) return false;\n\n  return true;\n};\n\nconst MemoizedMessageAvatar = React.memo(\n  MessageAvatarWithContext,\n  areEqual,\n) as typeof MessageAvatarWithContext;\n\nexport type MessageAvatarProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<MessageAvatarPropsWithContext<StreamChatGenerics>>;\n\nexport const MessageAvatar = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageAvatarProps<StreamChatGenerics>,\n) => {\n  const { alignment, lastGroupMessage, message, showAvatar } =\n    useMessageContext<StreamChatGenerics>();\n  const { ImageComponent } = useChatContext<StreamChatGenerics>();\n  return (\n    <MemoizedMessageAvatar\n      {...{\n        alignment,\n        ImageComponent,\n        lastGroupMessage,\n        message,\n        showAvatar,\n      }}\n      {...props}\n    />\n  );\n};\n\nMessageAvatar.displayName = 'MessageAvatar{messageSimple{avatarWrapper}}';\n"]}

package/lib/module/components/Message/MessageSimple/MessageRepliesAvatars.js

@@ -3,7 +3,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MessageRepliesAvatars = void 0;
+exports.MessageRepliesAvatarsWithContext = exports.MessageRepliesAvatars = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
+var _ChatContext = require("../../../contexts/chatContext/ChatContext");
+
 var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 
 var _Avatar = require("../../Avatar/Avatar");
@@ -30,10 +32,11 @@ var styles = _reactNative.StyleSheet.create({
   }
 });
 
-var MessageRepliesAvatars = function MessageRepliesAvatars(props) {
+var MessageRepliesAvatarsWithContext = function MessageRepliesAvatarsWithContext(props) {
   var _message$thread_parti;
 
   var alignment = props.alignment,
+      ImageComponent = props.ImageComponent,
       message = props.message;
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
@@ -56,7 +59,7 @@ var MessageRepliesAvatars = function MessageRepliesAvatars(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 53,
+      lineNumber: 54,
       columnNumber: 5
     }
   }, avatars.map(function (user, i) {
@@ -68,7 +71,7 @@ var MessageRepliesAvatars = function MessageRepliesAvatars(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 60,
+        lineNumber: 61,
         columnNumber: 9
       }
     }, _react["default"].createElement(_Avatar.Avatar, {
@@ -77,17 +80,35 @@ var MessageRepliesAvatars = function MessageRepliesAvatars(props) {
         borderWidth: 1
       }, avatar],
       image: user.image,
+      ImageComponent: ImageComponent,
       name: user.name,
       size: avatarSize ? avatarSize : i === 1 ? 18 : 16,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 71,
+        lineNumber: 72,
         columnNumber: 11
       }
     }));
   }));
 };
 
+exports.MessageRepliesAvatarsWithContext = MessageRepliesAvatarsWithContext;
+
+var MessageRepliesAvatars = function MessageRepliesAvatars(props) {
+  var _useChatContext = (0, _ChatContext.useChatContext)(),
+      ImageComponent = _useChatContext.ImageComponent;
+
+  return _react["default"].createElement(MessageRepliesAvatarsWithContext, (0, _extends2["default"])({}, props, {
+    ImageComponent: ImageComponent,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 98,
+      columnNumber: 10
+    }
+  }));
+};
+
 exports.MessageRepliesAvatars = MessageRepliesAvatars;
 //# sourceMappingURL=MessageRepliesAvatars.js.map

package/lib/module/components/Message/MessageSimple/MessageRepliesAvatars.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MessageRepliesAvatars.tsx"],"names":["styles","StyleSheet","create","avatarContainer","alignItems","flexDirection","paddingTop","topAvatar","position","MessageRepliesAvatars","props","alignment","message","theme","white_snow","colors","messageSimple","replies","avatar","avatarContainerMultiple","avatarContainerSingle","avatarSize","leftAvatarsContainer","rightAvatarsContainer","avatars","thread_participants","slice","hasMoreThanOneReply","length","marginLeft","map","user","i","id","paddingLeft","borderColor","borderWidth","image","name"],"mappings":";;;;;;;;;AAAA;;AACA;;AAGA;;AAGA;;;;;AAEA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,eAAe,EAAE;AACfC,IAAAA,UAAU,EAAE,QADG;AAEfC,IAAAA,aAAa,EAAE,KAFA;AAGfC,IAAAA,UAAU,EAAE;AAHG,GADc;AAM/BC,EAAAA,SAAS,EAAE;AACTD,IAAAA,UAAU,EAAE,CADH;AAETE,IAAAA,QAAQ,EAAE;AAFD;AANoB,CAAlB,CAAf;;AAgBO,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,CAGnCC,KAHmC,EAIhC;AAAA;;AACH,MAAQC,SAAR,GAA+BD,KAA/B,CAAQC,SAAR;AAAA,MAAmBC,OAAnB,GAA+BF,KAA/B,CAAmBE,OAAnB;;AAEA,kBAcI,6BAdJ;AAAA,kCACEC,KADF;AAAA,MAEcC,UAFd,mBAEIC,MAFJ,CAEcD,UAFd;AAAA,8CAGIE,aAHJ,CAIMC,OAJN;AAAA,MAKQC,MALR,yBAKQA,MALR;AAAA,MAMQC,uBANR,yBAMQA,uBANR;AAAA,MAOQC,qBAPR,yBAOQA,qBAPR;AAAA,MAQQC,UARR,yBAQQA,UARR;AAAA,MASQC,oBATR,yBASQA,oBATR;AAAA,MAUQC,qBAVR,yBAUQA,qBAVR;;AAgBA,MAAMC,OAAO,GAAG,0BAAAZ,OAAO,CAACa,mBAAR,2CAA6BC,KAA7B,CAAmC,CAAC,CAApC,MAA0C,EAA1D;AACA,MAAMC,mBAAmB,GAAGH,OAAO,CAACI,MAAR,GAAiB,CAA7C;AAEA,SACE,gCAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACL5B,MAAM,CAACG,eADF,EAELQ,SAAS,KAAK,OAAd;AAA0BkB,MAAAA,UAAU,EAAE;AAAtC,OAA4CN,qBAA5C,IAAsED,oBAFjE,CADT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMGE,OAAO,CAACM,GAAR,CAAY,UAACC,IAAD,EAAOC,CAAP;AAAA,WACX,gCAAC,iBAAD;AACE,MAAA,GAAG,EAAED,IAAI,CAACE,EADZ;AAEE,MAAA,KAAK,EACHD,CAAC,KAAK,CAAN,iCACShC,MAAM,CAACO,SADhB,EAC8Ba,qBAD9B;AAGMc,QAAAA,WAAW,EAAEP,mBAAmB,GAAG,CAAH,GAAO;AAH7C,SAISR,uBAJT,CAHJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAWE,gCAAC,cAAD;AACE,MAAA,cAAc,EAAE,CACda,CAAC,KAAK,CAAN,IAAW;AACTG,QAAAA,WAAW,EAAErB,UADJ;AAETsB,QAAAA,WAAW,EAAE;AAFJ,OADG,EAKdlB,MALc,CADlB;AAQE,MAAA,KAAK,EAAEa,IAAI,CAACM,KARd;AASE,MAAA,IAAI,EAAEN,IAAI,CAACO,IATb;AAUE,MAAA,IAAI,EAAEjB,UAAU,GAAGA,UAAH,GAAgBW,CAAC,KAAK,CAAN,GAAU,EAAV,GAAe,EAVjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAXF,CADW;AAAA,GAAZ,CANH,CADF;AAmCD,CA7DM","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { Avatar } from '../../Avatar/Avatar';\n\nconst styles = StyleSheet.create({\n  avatarContainer: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    paddingTop: 2,\n  },\n  topAvatar: {\n    paddingTop: 2,\n    position: 'absolute',\n  },\n});\n\nexport type MessageRepliesAvatarsProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'>;\n\nexport const MessageRepliesAvatars = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageRepliesAvatarsProps<StreamChatGenerics>,\n) => {\n  const { alignment, message } = props;\n\n  const {\n    theme: {\n      colors: { white_snow },\n      messageSimple: {\n        replies: {\n          avatar,\n          avatarContainerMultiple,\n          avatarContainerSingle,\n          avatarSize,\n          leftAvatarsContainer,\n          rightAvatarsContainer,\n        },\n      },\n    },\n  } = useTheme();\n\n  const avatars = message.thread_participants?.slice(-2) || [];\n  const hasMoreThanOneReply = avatars.length > 1;\n\n  return (\n    <View\n      style={[\n        styles.avatarContainer,\n        alignment === 'right' ? { marginLeft: 8, ...rightAvatarsContainer } : leftAvatarsContainer,\n      ]}\n    >\n      {avatars.map((user, i) => (\n        <View\n          key={user.id}\n          style={\n            i === 1\n              ? { ...styles.topAvatar, ...avatarContainerSingle }\n              : {\n                  paddingLeft: hasMoreThanOneReply ? 8 : 0,\n                  ...avatarContainerMultiple,\n                }\n          }\n        >\n          <Avatar\n            containerStyle={[\n              i === 1 && {\n                borderColor: white_snow,\n                borderWidth: 1,\n              },\n              avatar,\n            ]}\n            image={user.image}\n            name={user.name}\n            size={avatarSize ? avatarSize : i === 1 ? 18 : 16}\n          />\n        </View>\n      ))}\n    </View>\n  );\n};\n"]}
+{"version":3,"sources":["MessageRepliesAvatars.tsx"],"names":["styles","StyleSheet","create","avatarContainer","alignItems","flexDirection","paddingTop","topAvatar","position","MessageRepliesAvatarsWithContext","props","alignment","ImageComponent","message","theme","white_snow","colors","messageSimple","replies","avatar","avatarContainerMultiple","avatarContainerSingle","avatarSize","leftAvatarsContainer","rightAvatarsContainer","avatars","thread_participants","slice","hasMoreThanOneReply","length","marginLeft","map","user","i","id","paddingLeft","borderColor","borderWidth","image","name","MessageRepliesAvatars"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AAEA;;AAGA;;;;;AAEA,IAAMA,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,eAAe,EAAE;AACfC,IAAAA,UAAU,EAAE,QADG;AAEfC,IAAAA,aAAa,EAAE,KAFA;AAGfC,IAAAA,UAAU,EAAE;AAHG,GADc;AAM/BC,EAAAA,SAAS,EAAE;AACTD,IAAAA,UAAU,EAAE,CADH;AAETE,IAAAA,QAAQ,EAAE;AAFD;AANoB,CAAlB,CAAf;;AAgBO,IAAMC,gCAAgC,GAAG,SAAnCA,gCAAmC,CAG9CC,KAH8C,EAI3C;AAAA;;AACH,MAAQC,SAAR,GAA+CD,KAA/C,CAAQC,SAAR;AAAA,MAAmBC,cAAnB,GAA+CF,KAA/C,CAAmBE,cAAnB;AAAA,MAAmCC,OAAnC,GAA+CH,KAA/C,CAAmCG,OAAnC;;AAEA,kBAcI,6BAdJ;AAAA,kCACEC,KADF;AAAA,MAEcC,UAFd,mBAEIC,MAFJ,CAEcD,UAFd;AAAA,8CAGIE,aAHJ,CAIMC,OAJN;AAAA,MAKQC,MALR,yBAKQA,MALR;AAAA,MAMQC,uBANR,yBAMQA,uBANR;AAAA,MAOQC,qBAPR,yBAOQA,qBAPR;AAAA,MAQQC,UARR,yBAQQA,UARR;AAAA,MASQC,oBATR,yBASQA,oBATR;AAAA,MAUQC,qBAVR,yBAUQA,qBAVR;;AAgBA,MAAMC,OAAO,GAAG,0BAAAZ,OAAO,CAACa,mBAAR,2CAA6BC,KAA7B,CAAmC,CAAC,CAApC,MAA0C,EAA1D;AACA,MAAMC,mBAAmB,GAAGH,OAAO,CAACI,MAAR,GAAiB,CAA7C;AAEA,SACE,gCAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACL7B,MAAM,CAACG,eADF,EAELQ,SAAS,KAAK,OAAd;AAA0BmB,MAAAA,UAAU,EAAE;AAAtC,OAA4CN,qBAA5C,IAAsED,oBAFjE,CADT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMGE,OAAO,CAACM,GAAR,CAAY,UAACC,IAAD,EAAOC,CAAP;AAAA,WACX,gCAAC,iBAAD;AACE,MAAA,GAAG,EAAED,IAAI,CAACE,EADZ;AAEE,MAAA,KAAK,EACHD,CAAC,KAAK,CAAN,iCACSjC,MAAM,CAACO,SADhB,EAC8Bc,qBAD9B;AAGMc,QAAAA,WAAW,EAAEP,mBAAmB,GAAG,CAAH,GAAO;AAH7C,SAISR,uBAJT,CAHJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAWE,gCAAC,cAAD;AACE,MAAA,cAAc,EAAE,CACda,CAAC,KAAK,CAAN,IAAW;AACTG,QAAAA,WAAW,EAAErB,UADJ;AAETsB,QAAAA,WAAW,EAAE;AAFJ,OADG,EAKdlB,MALc,CADlB;AAQE,MAAA,KAAK,EAAEa,IAAI,CAACM,KARd;AASE,MAAA,cAAc,EAAE1B,cATlB;AAUE,MAAA,IAAI,EAAEoB,IAAI,CAACO,IAVb;AAWE,MAAA,IAAI,EAAEjB,UAAU,GAAGA,UAAH,GAAgBW,CAAC,KAAK,CAAN,GAAU,EAAV,GAAe,EAXjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAXF,CADW;AAAA,GAAZ,CANH,CADF;AAoCD,CA9DM;;;;AAgEA,IAAMO,qBAAqB,GAAG,SAAxBA,qBAAwB,CAGnC9B,KAHmC,EAIhC;AACH,wBAA2B,kCAA3B;AAAA,MAAQE,cAAR,mBAAQA,cAAR;;AAEA,SAAO,gCAAC,gCAAD,gCAAsCF,KAAtC;AAA6C,IAAA,cAAc,EAAEE,cAA7D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAP;AACD,CARM","sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';\nimport type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { Avatar } from '../../Avatar/Avatar';\n\nconst styles = StyleSheet.create({\n  avatarContainer: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    paddingTop: 2,\n  },\n  topAvatar: {\n    paddingTop: 2,\n    position: 'absolute',\n  },\n});\n\nexport type MessageRepliesAvatarsProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'>;\n\nexport const MessageRepliesAvatarsWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageRepliesAvatarsProps<StreamChatGenerics> & Pick<ChatContextValue, 'ImageComponent'>,\n) => {\n  const { alignment, ImageComponent, message } = props;\n\n  const {\n    theme: {\n      colors: { white_snow },\n      messageSimple: {\n        replies: {\n          avatar,\n          avatarContainerMultiple,\n          avatarContainerSingle,\n          avatarSize,\n          leftAvatarsContainer,\n          rightAvatarsContainer,\n        },\n      },\n    },\n  } = useTheme();\n\n  const avatars = message.thread_participants?.slice(-2) || [];\n  const hasMoreThanOneReply = avatars.length > 1;\n\n  return (\n    <View\n      style={[\n        styles.avatarContainer,\n        alignment === 'right' ? { marginLeft: 8, ...rightAvatarsContainer } : leftAvatarsContainer,\n      ]}\n    >\n      {avatars.map((user, i) => (\n        <View\n          key={user.id}\n          style={\n            i === 1\n              ? { ...styles.topAvatar, ...avatarContainerSingle }\n              : {\n                  paddingLeft: hasMoreThanOneReply ? 8 : 0,\n                  ...avatarContainerMultiple,\n                }\n          }\n        >\n          <Avatar\n            containerStyle={[\n              i === 1 && {\n                borderColor: white_snow,\n                borderWidth: 1,\n              },\n              avatar,\n            ]}\n            image={user.image}\n            ImageComponent={ImageComponent}\n            name={user.name}\n            size={avatarSize ? avatarSize : i === 1 ? 18 : 16}\n          />\n        </View>\n      ))}\n    </View>\n  );\n};\n\nexport const MessageRepliesAvatars = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: MessageRepliesAvatarsProps<StreamChatGenerics>,\n) => {\n  const { ImageComponent } = useChatContext();\n\n  return <MessageRepliesAvatarsWithContext {...props} ImageComponent={ImageComponent} />;\n};\n"]}

package/lib/module/components/MessageOverlay/MessageOverlay.js

@@ -25,6 +25,8 @@ var _OverlayReactionList = require("./OverlayReactionList");
 
 var _OverlayReactionsAvatar = require("./OverlayReactionsAvatar");
 
+var _ChatContext = require("../../contexts/chatContext/ChatContext");
+
 var _MessageContext = require("../../contexts/messageContext/MessageContext");
 
 var _MessageOverlayContext = require("../../contexts/messageOverlayContext/MessageOverlayContext");
@@ -98,6 +100,7 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       groupStyles = props.groupStyles,
       handleReaction = props.handleReaction,
       images = props.images,
+      chatContext = props.chatContext,
       message = props.message,
       messageActions = props.messageActions,
       _props$MessageActionL = props.MessageActionList,
@@ -269,29 +272,37 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
       MessageAvatar = _ref2.MessageAvatar,
       Reply = _ref2.Reply;
 
-  return _react["default"].createElement(_MessagesContext.MessagesProvider, {
-    value: messagesContext,
+  return _react["default"].createElement(_ChatContext.ChatProvider, {
+    value: chatContext,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 304,
+      lineNumber: 306,
       columnNumber: 5
     }
+  }, _react["default"].createElement(_MessagesContext.MessagesProvider, {
+    value: messagesContext,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 307,
+      columnNumber: 7
+    }
   }, _react["default"].createElement(_MessageContext.MessageProvider, {
     value: messageContext,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 305,
-      columnNumber: 7
+      lineNumber: 308,
+      columnNumber: 9
     }
   }, _react["default"].createElement(_ThemeContext.ThemeProvider, {
     mergedStyle: wrapMessageInTheme ? modifiedTheme : theme,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 306,
-      columnNumber: 9
+      lineNumber: 309,
+      columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
     pointerEvents: 'auto',
@@ -299,8 +310,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 307,
-      columnNumber: 11
+      lineNumber: 310,
+      columnNumber: 13
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
     enabled: overlay === 'message',
@@ -310,24 +321,24 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 311,
-      columnNumber: 13
+      lineNumber: 314,
+      columnNumber: 15
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
     style: [_reactNative.StyleSheet.absoluteFillObject],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 317,
-      columnNumber: 15
+      lineNumber: 320,
+      columnNumber: 17
     }
   }, _react["default"].createElement(_reactNative.SafeAreaView, {
     style: styles.flex,
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 318,
-      columnNumber: 17
+      lineNumber: 321,
+      columnNumber: 19
     }
   }, _react["default"].createElement(_reactNativeGestureHandler.TapGestureHandler, {
     maxDist: 32,
@@ -341,16 +352,16 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 319,
-      columnNumber: 19
+      lineNumber: 322,
+      columnNumber: 21
     }
   }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
     style: [styles.flex, panStyle],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 327,
-      columnNumber: 21
+      lineNumber: 330,
+      columnNumber: 23
     }
   }, message && _react["default"].createElement(_reactNative.View, {
     style: [styles.center, styles.overlayPadding, {
@@ -359,8 +370,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 329,
-      columnNumber: 25
+      lineNumber: 332,
+      columnNumber: 27
     }
   }, handleReaction && ownCapabilities != null && ownCapabilities.sendReaction ? _react["default"].createElement(OverlayReactionList, {
     messageLayout: messageLayout,
@@ -371,8 +382,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 338,
-      columnNumber: 29
+      lineNumber: 341,
+      columnNumber: 31
     }
   }) : null, _react["default"].createElement(_reactNativeReanimated["default"].View, {
     onLayout: function onLayout(_ref4) {
@@ -392,8 +403,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 346,
-      columnNumber: 27
+      lineNumber: 349,
+      columnNumber: 29
     }
   }, alignment === 'left' && MessageAvatar && _react["default"].createElement(MessageAvatar, {
     alignment: alignment,
@@ -402,8 +413,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 362,
-      columnNumber: 31
+      lineNumber: 365,
+      columnNumber: 33
     }
   }), _react["default"].createElement(_reactNative.View, {
     pointerEvents: "none",
@@ -418,8 +429,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 364,
-      columnNumber: 29
+      lineNumber: 367,
+      columnNumber: 31
     }
   }, messagesContext == null ? void 0 : (_messagesContext$mess = messagesContext.messageContentOrder) == null ? void 0 : _messagesContext$mess.map(function (messageContentType, messageContentOrderIndex) {
     switch (messageContentType) {
@@ -430,8 +441,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 408,
-            columnNumber: 43
+            lineNumber: 412,
+            columnNumber: 45
           }
         }, _react["default"].createElement(Reply, {
           quotedMessage: message.quoted_message,
@@ -443,8 +454,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 412,
-            columnNumber: 45
+            lineNumber: 416,
+            columnNumber: 47
           }
         }));
 
@@ -456,8 +467,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
             __self: _this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 429,
-              columnNumber: 45
+              lineNumber: 433,
+              columnNumber: 47
             }
           });
         });
@@ -470,8 +481,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 438,
-            columnNumber: 43
+            lineNumber: 442,
+            columnNumber: 45
           }
         });
 
@@ -488,8 +499,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 448,
-            columnNumber: 43
+            lineNumber: 452,
+            columnNumber: 45
           }
         });
 
@@ -504,8 +515,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
           __self: _this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 464,
-            columnNumber: 41
+            lineNumber: 468,
+            columnNumber: 43
           }
         });
     }
@@ -517,8 +528,8 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 478,
-      columnNumber: 29
+      lineNumber: 482,
+      columnNumber: 31
     }
   })), !!messageReactionTitle && message.latest_reactions && message.latest_reactions.length > 0 ? _react["default"].createElement(OverlayReactions, {
     alignment: alignment,
@@ -540,10 +551,10 @@ var MessageOverlayWithContext = function MessageOverlayWithContext(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 488,
-      columnNumber: 29
+      lineNumber: 492,
+      columnNumber: 31
     }
-  }) : null))))))))));
+  }) : null)))))))))));
 };
 
 var areEqual = function areEqual(prevProps, nextProps) {
@@ -596,7 +607,7 @@ var MessageOverlay = function MessageOverlay(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 595,
+      lineNumber: 600,
       columnNumber: 5
     }
   }));