@sendbird/uikit-react-native 2.1.0 → 2.3.0

package/lib/commonjs/components/MessageRenderer/UserMessage/BaseUserMessage.js

@@ -11,42 +11,118 @@ var _reactNative = require("react-native");
 
 var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
 
+var _uikitUtils = require("@sendbird/uikit-utils");
+
 var _useContext = require("../../../hooks/useContext");
 
+var _SBUUtils = _interopRequireDefault(require("../../../libs/SBUUtils"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const BaseUserMessage = _ref => {
   let {
     message,
     variant,
-    pressed
+    pressed,
+    children,
+    onLongPressMentionedUser,
+    onLongPressURL
   } = _ref;
   const {
-    colors
-  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+    mentionManager,
+    currentUser
+  } = (0, _useContext.useSendbirdChat)();
+  const {
+    show
+  } = (0, _useContext.useUserProfile)();
   const {
     STRINGS
   } = (0, _useContext.useLocalization)();
+  const {
+    colors,
+    palette
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.container, {
       backgroundColor: color.background
     }]
-  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.URLParsedText, {
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     body3: true,
-    strict: true,
     color: color.textMsg
-  }, message.message, Boolean(message.updatedAt) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.RegexText, {
+    body3: true,
+    color: color.textMsg,
+    patterns: [{
+      regex: mentionManager.templateRegex,
+
+      replacer(_ref2) {
+        var _message$mentionedUse;
+
+        let {
+          match,
+          groups,
+          parentProps,
+          index,
+          keyPrefix
+        } = _ref2;
+        const user = (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.find(it => it.userId === groups[2]);
+
+        if (user) {
+          return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, _extends({}, parentProps, {
+            key: `${keyPrefix}-${index}`,
+            onPress: () => show(user),
+            onLongPress: onLongPressMentionedUser,
+            style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, {
+              fontWeight: 'bold'
+            }, user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) && {
+              backgroundColor: palette.highlight
+            }]
+          }), `${mentionManager.asMentionedMessageText(user)}`);
+        }
+
+        return match;
+      }
+
+    }, {
+      regex: _uikitUtils.urlRegexStrict,
+
+      replacer(_ref3) {
+        let {
+          match,
+          parentProps,
+          index,
+          keyPrefix
+        } = _ref3;
+        return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => _SBUUtils.default.openURL(match),
+          onLongPress: onLongPressURL,
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, {
+            textDecorationLine: 'underline'
+          }]
+        }), match);
+      }
+
+    }]
+  }, mentionManager.shouldUseMentionedMessageTemplate(message) ? message.mentionedMessageTemplate : message.message), Boolean(message.updatedAt) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     body3: true,
     color: color.textEdited
-  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX)));
+  }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX))), children);
 };
 
 const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
   container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  wrapper: {
     paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 16
+    paddingVertical: 6
   }
 });
 var _default = BaseUserMessage;

package/lib/commonjs/components/MessageRenderer/UserMessage/BaseUserMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["BaseUserMessage","message","variant","pressed","colors","useUIKitTheme","color","ui","STRINGS","useLocalization","styles","container","backgroundColor","background","textMsg","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","createStyleSheet","paddingHorizontal","paddingVertical","borderRadius"],"sources":["BaseUserMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { UserMessageProps } from './index';\n\nconst BaseUserMessage = ({ message, variant, pressed }: UserMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  const { STRINGS } = useLocalization();\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <URLParsedText body3 strict color={color.textMsg}>\n        {message.message}\n        {Boolean(message.updatedAt) && (\n          <Text body3 color={color.textEdited}>\n            {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n          </Text>\n        )}\n      </URLParsedText>\n    </View>\n  );\n};\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n});\n\nexport default BaseUserMessage;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AAEA;;;;AAGA,MAAMA,eAAe,GAAG,QAAqD;EAAA,IAApD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC;EAApB,CAAoD;EAC3E,MAAM;IAAEC;EAAF,IAAa,IAAAC,yCAAA,GAAnB;EACA,MAAMC,KAAK,GAAGF,MAAM,CAACG,EAAP,CAAUN,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,MAAM;IAAEK;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACC,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEN,KAAK,CAACO;IAAzB,CAAnB;EAAb,gBACE,6BAAC,yCAAD;IAAe,KAAK,MAApB;IAAqB,MAAM,MAA3B;IAA4B,KAAK,EAAEP,KAAK,CAACQ;EAAzC,GACGb,OAAO,CAACA,OADX,EAEGc,OAAO,CAACd,OAAO,CAACe,SAAT,CAAP,iBACC,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEV,KAAK,CAACW;EAAzB,GACGT,OAAO,CAACU,aAAR,CAAsBC,6BADzB,CAHJ,CADF,CADF;AAYD,CAhBD;;AAiBA,MAAMT,MAAM,GAAG,IAAAU,4CAAA,EAAiB;EAC9BT,SAAS,EAAE;IACTU,iBAAiB,EAAE,EADV;IAETC,eAAe,EAAE,CAFR;IAGTC,YAAY,EAAE;EAHL;AADmB,CAAjB,CAAf;eAQevB,e"}
+{"version":3,"names":["BaseUserMessage","message","variant","pressed","children","onLongPressMentionedUser","onLongPressURL","mentionManager","currentUser","useSendbirdChat","show","useUserProfile","STRINGS","useLocalization","colors","palette","useUIKitTheme","color","ui","styles","container","backgroundColor","background","wrapper","textMsg","regex","templateRegex","replacer","match","groups","parentProps","index","keyPrefix","user","mentionedUsers","find","it","userId","style","fontWeight","highlight","asMentionedMessageText","urlRegexStrict","SBUUtils","openURL","textDecorationLine","shouldUseMentionedMessageTemplate","mentionedMessageTemplate","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","createStyleSheet","borderRadius","overflow","paddingHorizontal","paddingVertical"],"sources":["BaseUserMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { urlRegexStrict } from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';\nimport SBUUtils from '../../../libs/SBUUtils';\nimport type { UserMessageProps } from './index';\n\nconst BaseUserMessage = ({\n  message,\n  variant,\n  pressed,\n  children,\n  onLongPressMentionedUser,\n  onLongPressURL,\n}: UserMessageProps) => {\n  const { mentionManager, currentUser } = useSendbirdChat();\n  const { show } = useUserProfile();\n  const { STRINGS } = useLocalization();\n  const { colors, palette } = useUIKitTheme();\n\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <View style={styles.wrapper}>\n        <Text body3 color={color.textMsg}>\n          <RegexText\n            body3\n            color={color.textMsg}\n            patterns={[\n              {\n                regex: mentionManager.templateRegex,\n                replacer({ match, groups, parentProps, index, keyPrefix }) {\n                  const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);\n                  if (user) {\n                    return (\n                      <Text\n                        {...parentProps}\n                        key={`${keyPrefix}-${index}`}\n                        onPress={() => show(user)}\n                        onLongPress={onLongPressMentionedUser}\n                        style={[\n                          parentProps?.style,\n                          { fontWeight: 'bold' },\n                          user.userId === currentUser?.userId && { backgroundColor: palette.highlight },\n                        ]}\n                      >\n                        {`${mentionManager.asMentionedMessageText(user)}`}\n                      </Text>\n                    );\n                  }\n                  return match;\n                },\n              },\n              {\n                regex: urlRegexStrict,\n                replacer({ match, parentProps, index, keyPrefix }) {\n                  return (\n                    <Text\n                      {...parentProps}\n                      key={`${keyPrefix}-${index}`}\n                      onPress={() => SBUUtils.openURL(match)}\n                      onLongPress={onLongPressURL}\n                      style={[parentProps?.style, { textDecorationLine: 'underline' }]}\n                    >\n                      {match}\n                    </Text>\n                  );\n                },\n              },\n            ]}\n          >\n            {mentionManager.shouldUseMentionedMessageTemplate(message)\n              ? message.mentionedMessageTemplate\n              : message.message}\n          </RegexText>\n          {Boolean(message.updatedAt) && (\n            <Text body3 color={color.textEdited}>\n              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n            </Text>\n          )}\n        </Text>\n      </View>\n      {children}\n    </View>\n  );\n};\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  wrapper: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n});\n\nexport default BaseUserMessage;\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;;;;;AAGA,MAAMA,eAAe,GAAG,QAOA;EAAA,IAPC;IACvBC,OADuB;IAEvBC,OAFuB;IAGvBC,OAHuB;IAIvBC,QAJuB;IAKvBC,wBALuB;IAMvBC;EANuB,CAOD;EACtB,MAAM;IAAEC,cAAF;IAAkBC;EAAlB,IAAkC,IAAAC,2BAAA,GAAxC;EACA,MAAM;IAAEC;EAAF,IAAW,IAAAC,0BAAA,GAAjB;EACA,MAAM;IAAEC;EAAF,IAAc,IAAAC,2BAAA,GAApB;EACA,MAAM;IAAEC,MAAF;IAAUC;EAAV,IAAsB,IAAAC,yCAAA,GAA5B;EAEA,MAAMC,KAAK,GAAGH,MAAM,CAACI,EAAP,CAAUjB,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EAEA,oBACE,6BAAC,iBAAD;IAAM,KAAK,EAAE,CAACgB,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAnB;EAAb,gBACE,6BAAC,iBAAD;IAAM,KAAK,EAAEH,MAAM,CAACI;EAApB,gBACE,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEN,KAAK,CAACO;EAAzB,gBACE,6BAAC,qCAAD;IACE,KAAK,MADP;IAEE,KAAK,EAAEP,KAAK,CAACO,OAFf;IAGE,QAAQ,EAAE,CACR;MACEC,KAAK,EAAElB,cAAc,CAACmB,aADxB;;MAEEC,QAAQ,QAAmD;QAAA;;QAAA,IAAlD;UAAEC,KAAF;UAASC,MAAT;UAAiBC,WAAjB;UAA8BC,KAA9B;UAAqCC;QAArC,CAAkD;QACzD,MAAMC,IAAI,4BAAGhC,OAAO,CAACiC,cAAX,0DAAG,sBAAwBC,IAAxB,CAA8BC,EAAD,IAAQA,EAAE,CAACC,MAAH,KAAcR,MAAM,CAAC,CAAD,CAAzD,CAAb;;QACA,IAAII,IAAJ,EAAU;UACR,oBACE,6BAAC,gCAAD,eACMH,WADN;YAEE,GAAG,EAAG,GAAEE,SAAU,IAAGD,KAAM,EAF7B;YAGE,OAAO,EAAE,MAAMrB,IAAI,CAACuB,IAAD,CAHrB;YAIE,WAAW,EAAE5B,wBAJf;YAKE,KAAK,EAAE,CACLyB,WADK,aACLA,WADK,uBACLA,WAAW,CAAEQ,KADR,EAEL;cAAEC,UAAU,EAAE;YAAd,CAFK,EAGLN,IAAI,CAACI,MAAL,MAAgB7B,WAAhB,aAAgBA,WAAhB,uBAAgBA,WAAW,CAAE6B,MAA7B,KAAuC;cAAEhB,eAAe,EAAEN,OAAO,CAACyB;YAA3B,CAHlC;UALT,IAWI,GAAEjC,cAAc,CAACkC,sBAAf,CAAsCR,IAAtC,CAA4C,EAXlD,CADF;QAeD;;QACD,OAAOL,KAAP;MACD;;IAtBH,CADQ,EAyBR;MACEH,KAAK,EAAEiB,0BADT;;MAEEf,QAAQ,QAA2C;QAAA,IAA1C;UAAEC,KAAF;UAASE,WAAT;UAAsBC,KAAtB;UAA6BC;QAA7B,CAA0C;QACjD,oBACE,6BAAC,gCAAD,eACMF,WADN;UAEE,GAAG,EAAG,GAAEE,SAAU,IAAGD,KAAM,EAF7B;UAGE,OAAO,EAAE,MAAMY,iBAAA,CAASC,OAAT,CAAiBhB,KAAjB,CAHjB;UAIE,WAAW,EAAEtB,cAJf;UAKE,KAAK,EAAE,CAACwB,WAAD,aAACA,WAAD,uBAACA,WAAW,CAAEQ,KAAd,EAAqB;YAAEO,kBAAkB,EAAE;UAAtB,CAArB;QALT,IAOGjB,KAPH,CADF;MAWD;;IAdH,CAzBQ;EAHZ,GA8CGrB,cAAc,CAACuC,iCAAf,CAAiD7C,OAAjD,IACGA,OAAO,CAAC8C,wBADX,GAEG9C,OAAO,CAACA,OAhDd,CADF,EAmDG+C,OAAO,CAAC/C,OAAO,CAACgD,SAAT,CAAP,iBACC,6BAAC,gCAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEhC,KAAK,CAACiC;EAAzB,GACGtC,OAAO,CAACuC,aAAR,CAAsBC,6BADzB,CApDJ,CADF,CADF,EA4DGhD,QA5DH,CADF;AAgED,CA/ED;;AAgFA,MAAMe,MAAM,GAAG,IAAAkC,4CAAA,EAAiB;EAC9BjC,SAAS,EAAE;IACTkC,YAAY,EAAE,EADL;IAETC,QAAQ,EAAE;EAFD,CADmB;EAK9BhC,OAAO,EAAE;IACPiC,iBAAiB,EAAE,EADZ;IAEPC,eAAe,EAAE;EAFV;AALqB,CAAjB,CAAf;eAWezD,e"}

package/lib/commonjs/components/MessageRenderer/UserMessage/OpenGraphUserMessage.js

@@ -15,10 +15,16 @@ var _uikitUtils = require("@sendbird/uikit-utils");
 
 var _useContext = require("../../../hooks/useContext");
 
+var _SBUUtils = _interopRequireDefault(require("../../../libs/SBUUtils"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const OpenGraphUserMessage = _ref => {
   var _ogMetaData$defaultIm;
 
@@ -26,33 +32,109 @@ const OpenGraphUserMessage = _ref => {
     message,
     variant,
     pressed,
-    ogMetaData
+    ogMetaData,
+    children,
+    onLongPressMentionedUser,
+    onLongPressURL
   } = _ref;
+  const {
+    mentionManager,
+    currentUser
+  } = (0, _useContext.useSendbirdChat)();
   const {
     STRINGS
   } = (0, _useContext.useLocalization)();
+  const {
+    show
+  } = (0, _useContext.useUserProfile)();
   const {
     colors,
     select,
     palette
   } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   const [imageNotFound, setImageNotFound] = (0, _react.useState)(false);
+  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const containerBackground = select({
+    dark: palette.background400,
+    light: palette.background100
+  });
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: [styles.container, {
+    style: [styles.bubbleContainer, {
+      backgroundColor: containerBackground
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, styles.bubbleContainer, {
       backgroundColor: color.background
     }]
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: styles.messageContainer
-  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.URLParsedText, {
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     body3: true,
     color: color.textMsg
-  }, message.message, Boolean(message.updatedAt) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.RegexText, {
+    body3: true,
+    color: color.textMsg,
+    patterns: [{
+      regex: mentionManager.templateRegex,
+
+      replacer(_ref2) {
+        var _message$mentionedUse;
+
+        let {
+          match,
+          groups,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref2;
+        const user = (_message$mentionedUse = message.mentionedUsers) === null || _message$mentionedUse === void 0 ? void 0 : _message$mentionedUse.find(it => it.userId === groups[2]);
+
+        if (user) {
+          const isCurrentUser = user.userId === (currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId);
+          return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, _extends({}, parentProps, {
+            key: `${keyPrefix}-${index}`,
+            onPress: () => show(user),
+            onLongPress: onLongPressMentionedUser,
+            style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.mentionedText, isCurrentUser && {
+              backgroundColor: palette.highlight
+            }]
+          }), `${mentionManager.asMentionedMessageText(user)}`);
+        }
+
+        return match;
+      }
+
+    }, {
+      regex: _uikitUtils.urlRegexRough,
+
+      replacer(_ref3) {
+        let {
+          match,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref3;
+        return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => _SBUUtils.default.openURL(match),
+          onLongPress: onLongPressURL,
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
+        }), match);
+      }
+
+    }]
+  }, mentionManager.shouldUseMentionedMessageTemplate(message) ? message.mentionedMessageTemplate : message.message), Boolean(message.updatedAt) && /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     body3: true,
     color: color.textEdited
   }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    activeOpacity: 0.7,
-    onPress: () => _reactNative.Linking.openURL(ogMetaData.url).catch()
+    style: {
+      backgroundColor: select({
+        dark: palette.background500,
+        light: palette.background200
+      })
+    },
+    activeOpacity: 0.85,
+    onPress: () => _SBUUtils.default.openURL(ogMetaData.url)
   }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.ogImageContainer, {
       backgroundColor: select({
@@ -74,10 +156,7 @@ const OpenGraphUserMessage = _ref => {
     onError: () => setImageNotFound(true)
   })])), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.ogContainer, {
-      backgroundColor: select({
-        dark: palette.background400,
-        light: palette.background100
-      })
+      backgroundColor: containerBackground
     }]
   }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
     numberOfLines: 3,
@@ -93,16 +172,18 @@ const OpenGraphUserMessage = _ref => {
     numberOfLines: 1,
     caption2: true,
     color: colors.onBackground02
-  }, ogMetaData.url))));
+  }, ogMetaData.url)))), children);
 };
 
 const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
-  container: {
-    width: 240,
-    maxWidth: 240,
+  bubbleContainer: {
     borderRadius: 16,
     overflow: 'hidden'
   },
+  container: {
+    width: 240,
+    maxWidth: 240
+  },
   messageContainer: {
     paddingVertical: 6,
     paddingHorizontal: 12
@@ -126,6 +207,12 @@ const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
   ogDesc: {
     lineHeight: 14,
     marginBottom: 8
+  },
+  mentionedText: {
+    fontWeight: 'bold'
+  },
+  urlText: {
+    textDecorationLine: 'underline'
   }
 });
 var _default = OpenGraphUserMessage;

package/lib/commonjs/components/MessageRenderer/UserMessage/OpenGraphUserMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["OpenGraphUserMessage","message","variant","pressed","ogMetaData","STRINGS","useLocalization","colors","select","palette","useUIKitTheme","color","ui","imageNotFound","setImageNotFound","useState","styles","container","backgroundColor","background","messageContainer","textMsg","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","Linking","openURL","url","catch","ogImageContainer","dark","background500","light","background200","conditionChaining","ogImage","onBackground02","uri","defaultImage","ogContainer","background400","background100","onBackground01","ogTitle","title","description","ogDesc","createStyleSheet","width","maxWidth","borderRadius","overflow","paddingVertical","paddingHorizontal","paddingTop","paddingBottom","flex","height","marginBottom","lineHeight"],"sources":["OpenGraphUserMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Linking, TouchableOpacity, View } from 'react-native';\n\nimport type { OGMetaData } from '@sendbird/chat/message';\nimport {\n  Icon,\n  Image,\n  Text,\n  URLParsedText,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport { conditionChaining } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { UserMessageProps } from './index';\n\ntype Props = UserMessageProps & {\n  ogMetaData: OGMetaData;\n};\nconst OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors, select, palette } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  const [imageNotFound, setImageNotFound] = useState(false);\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <View style={styles.messageContainer}>\n        <URLParsedText body3 color={color.textMsg}>\n          {message.message}\n          {Boolean(message.updatedAt) && (\n            <Text body3 color={color.textEdited}>\n              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n            </Text>\n          )}\n        </URLParsedText>\n      </View>\n      <TouchableOpacity activeOpacity={0.7} onPress={() => Linking.openURL(ogMetaData.url).catch()}>\n        <View\n          style={[\n            styles.ogImageContainer,\n            { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },\n          ]}\n        >\n          {conditionChaining(\n            [imageNotFound],\n            [\n              <Icon containerStyle={styles.ogImage} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />,\n              <Image\n                source={{ uri: ogMetaData.defaultImage?.url }}\n                style={styles.ogImage}\n                resizeMode={'cover'}\n                onError={() => setImageNotFound(true)}\n              />,\n            ],\n          )}\n        </View>\n        <View\n          style={[\n            styles.ogContainer,\n            { backgroundColor: select({ dark: palette.background400, light: palette.background100 }) },\n          ]}\n        >\n          <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n            {ogMetaData.title}\n          </Text>\n          {Boolean(ogMetaData.description) && (\n            <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n              {ogMetaData.description}\n            </Text>\n          )}\n          <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n            {ogMetaData.url}\n          </Text>\n        </View>\n      </TouchableOpacity>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 240,\n    maxWidth: 240,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  messageContainer: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n  },\n  ogContainer: {\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImageContainer: {\n    flex: 1,\n    height: 136,\n  },\n  ogImage: {\n    width: '100%',\n    height: '100%',\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}
+{"version":3,"names":["OpenGraphUserMessage","message","variant","pressed","ogMetaData","children","onLongPressMentionedUser","onLongPressURL","mentionManager","currentUser","useSendbirdChat","STRINGS","useLocalization","show","useUserProfile","colors","select","palette","useUIKitTheme","imageNotFound","setImageNotFound","useState","color","ui","containerBackground","dark","background400","light","background100","styles","bubbleContainer","backgroundColor","container","background","messageContainer","textMsg","regex","templateRegex","replacer","match","groups","parentProps","keyPrefix","index","user","mentionedUsers","find","it","userId","isCurrentUser","style","mentionedText","highlight","asMentionedMessageText","urlRegexRough","SBUUtils","openURL","urlText","shouldUseMentionedMessageTemplate","mentionedMessageTemplate","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","background500","background200","url","ogImageContainer","conditionChaining","ogImage","onBackground02","uri","defaultImage","ogContainer","onBackground01","ogTitle","title","description","ogDesc","createStyleSheet","borderRadius","overflow","width","maxWidth","paddingVertical","paddingHorizontal","paddingTop","paddingBottom","flex","height","marginBottom","lineHeight","fontWeight","textDecorationLine"],"sources":["OpenGraphUserMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport type { OGMetaData } from '@sendbird/chat/message';\nimport { Icon, Image, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { conditionChaining, urlRegexRough } from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';\nimport SBUUtils from '../../../libs/SBUUtils';\nimport type { UserMessageProps } from './index';\n\ntype Props = UserMessageProps & {\n  ogMetaData: OGMetaData;\n};\n\nconst OpenGraphUserMessage = ({\n  message,\n  variant,\n  pressed,\n  ogMetaData,\n  children,\n  onLongPressMentionedUser,\n  onLongPressURL,\n}: Props) => {\n  const { mentionManager, currentUser } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const { show } = useUserProfile();\n  const { colors, select, palette } = useUIKitTheme();\n\n  const [imageNotFound, setImageNotFound] = useState(false);\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n\n  const containerBackground = select({ dark: palette.background400, light: palette.background100 });\n\n  return (\n    <View style={[styles.bubbleContainer, { backgroundColor: containerBackground }]}>\n      <View style={[styles.container, styles.bubbleContainer, { backgroundColor: color.background }]}>\n        <View style={styles.messageContainer}>\n          <Text body3 color={color.textMsg}>\n            <RegexText\n              body3\n              color={color.textMsg}\n              patterns={[\n                {\n                  regex: mentionManager.templateRegex,\n                  replacer({ match, groups, parentProps, keyPrefix, index }) {\n                    const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);\n                    if (user) {\n                      const isCurrentUser = user.userId === currentUser?.userId;\n                      return (\n                        <Text\n                          {...parentProps}\n                          key={`${keyPrefix}-${index}`}\n                          onPress={() => show(user)}\n                          onLongPress={onLongPressMentionedUser}\n                          style={[\n                            parentProps?.style,\n                            styles.mentionedText,\n                            isCurrentUser && { backgroundColor: palette.highlight },\n                          ]}\n                        >\n                          {`${mentionManager.asMentionedMessageText(user)}`}\n                        </Text>\n                      );\n                    }\n                    return match;\n                  },\n                },\n                {\n                  regex: urlRegexRough,\n                  replacer({ match, parentProps, keyPrefix, index }) {\n                    return (\n                      <Text\n                        {...parentProps}\n                        key={`${keyPrefix}-${index}`}\n                        onPress={() => SBUUtils.openURL(match)}\n                        onLongPress={onLongPressURL}\n                        style={[parentProps?.style, styles.urlText]}\n                      >\n                        {match}\n                      </Text>\n                    );\n                  },\n                },\n              ]}\n            >\n              {mentionManager.shouldUseMentionedMessageTemplate(message)\n                ? message.mentionedMessageTemplate\n                : message.message}\n            </RegexText>\n            {Boolean(message.updatedAt) && (\n              <Text body3 color={color.textEdited}>\n                {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n              </Text>\n            )}\n          </Text>\n        </View>\n        <TouchableOpacity\n          style={{ backgroundColor: select({ dark: palette.background500, light: palette.background200 }) }}\n          activeOpacity={0.85}\n          onPress={() => SBUUtils.openURL(ogMetaData.url)}\n        >\n          <View\n            style={[\n              styles.ogImageContainer,\n              { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },\n            ]}\n          >\n            {conditionChaining(\n              [imageNotFound],\n              [\n                <Icon\n                  containerStyle={styles.ogImage}\n                  icon={'thumbnail-none'}\n                  size={48}\n                  color={colors.onBackground02}\n                />,\n                <Image\n                  source={{ uri: ogMetaData.defaultImage?.url }}\n                  style={styles.ogImage}\n                  resizeMode={'cover'}\n                  onError={() => setImageNotFound(true)}\n                />,\n              ],\n            )}\n          </View>\n          <View style={[styles.ogContainer, { backgroundColor: containerBackground }]}>\n            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n              {ogMetaData.title}\n            </Text>\n            {Boolean(ogMetaData.description) && (\n              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n                {ogMetaData.description}\n              </Text>\n            )}\n            <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n              {ogMetaData.url}\n            </Text>\n          </View>\n        </TouchableOpacity>\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  container: {\n    width: 240,\n    maxWidth: 240,\n  },\n  messageContainer: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n  },\n  ogContainer: {\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImageContainer: {\n    flex: 1,\n    height: 136,\n  },\n  ogImage: {\n    width: '100%',\n    height: '100%',\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n  mentionedText: {\n    fontWeight: 'bold',\n  },\n  urlText: {\n    textDecorationLine: 'underline',\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}

package/lib/commonjs/components/MessageRenderer/UserMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["UserMessage","props","message","ogMetaData","React","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\nimport BaseUserMessage from './BaseUserMessage';\nimport OpenGraphUserMessage from './OpenGraphUserMessage';\n\nexport type UserMessageProps = MessageRendererInterface<SendbirdUserMessage>;\nconst UserMessage = (props: UserMessageProps) => {\n  if (props.message.ogMetaData) {\n    return <OpenGraphUserMessage {...props} ogMetaData={props.message.ogMetaData} />;\n  }\n  return <BaseUserMessage {...props} />;\n};\n\nexport default React.memo(UserMessage);\n"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;;;;;AAGA,MAAMA,WAAW,GAAIC,KAAD,IAA6B;EAC/C,IAAIA,KAAK,CAACC,OAAN,CAAcC,UAAlB,EAA8B;IAC5B,oBAAO,6BAAC,6BAAD,eAA0BF,KAA1B;MAAiC,UAAU,EAAEA,KAAK,CAACC,OAAN,CAAcC;IAA3D,GAAP;EACD;;EACD,oBAAO,6BAAC,wBAAD,EAAqBF,KAArB,CAAP;AACD,CALD;;4BAOeG,cAAA,CAAMC,IAAN,CAAWL,WAAX,C"}
+{"version":3,"names":["UserMessage","props","message","ogMetaData","React","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\nimport BaseUserMessage from './BaseUserMessage';\nimport OpenGraphUserMessage from './OpenGraphUserMessage';\n\nexport type UserMessageProps = MessageRendererInterface<\n  SendbirdUserMessage,\n  {\n    onLongPressMentionedUser?: () => void;\n    onLongPressURL?: () => void;\n  }\n>;\n\nconst UserMessage = (props: UserMessageProps) => {\n  if (props.message.ogMetaData) {\n    return <OpenGraphUserMessage {...props} ogMetaData={props.message.ogMetaData} />;\n  }\n  return <BaseUserMessage {...props} />;\n};\n\nexport default React.memo(UserMessage);\n"],"mappings":";;;;;;;AAAA;;AAKA;;AACA;;;;;;AAUA,MAAMA,WAAW,GAAIC,KAAD,IAA6B;EAC/C,IAAIA,KAAK,CAACC,OAAN,CAAcC,UAAlB,EAA8B;IAC5B,oBAAO,6BAAC,6BAAD,eAA0BF,KAA1B;MAAiC,UAAU,EAAEA,KAAK,CAACC,OAAN,CAAcC;IAA3D,GAAP;EACD;;EACD,oBAAO,6BAAC,wBAAD,EAAqBF,KAArB,CAAP;AACD,CALD;;4BAOeG,cAAA,CAAMC,IAAN,CAAWL,WAAX,C"}

package/lib/commonjs/components/MessageRenderer/index.js

@@ -15,6 +15,10 @@ var _uikitUtils = require("@sendbird/uikit-utils");
 
 var _constants = require("../../constants");
 
+var _useContext = require("../../hooks/useContext");
+
+var _ReactionAddons = require("../ReactionAddons");
+
 var _AdminMessage = _interopRequireDefault(require("./AdminMessage"));
 
 var _FileMessage = _interopRequireDefault(require("./FileMessage"));
@@ -59,6 +63,19 @@ const MessageRenderer = _ref => {
     groupWithPrev,
     groupWithNext
   } = (0, _uikitUtils.calcMessageGrouping)(Boolean(rest.enableMessageGrouping), message, rest.prevMessage, rest.nextMessage);
+  const {
+    features
+  } = (0, _useContext.useSendbirdChat)();
+  const reactionChildren = (0, _uikitUtils.useIIFE)(() => {
+    if ((0, _uikitUtils.shouldRenderReaction)(channel, features.reactionEnabled) && message.reactions && message.reactions.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_ReactionAddons.ReactionAddons.Message, {
+        channel: channel,
+        message: message
+      });
+    }
+
+    return null;
+  });
   const messageComponent = (0, _uikitUtils.useIIFE)(() => {
     const pressableProps = {
       style: styles.msgContainer,
@@ -80,8 +97,10 @@ const MessageRenderer = _ref => {
         } = _ref2;
         return /*#__PURE__*/_react.default.createElement(_UserMessage.default, _extends({
           message: message,
-          pressed: pressed
-        }, messageProps));
+          pressed: pressed,
+          onLongPressURL: onLongPress,
+          onLongPressMentionedUser: onLongPress
+        }, messageProps), reactionChildren);
       });
     }
 
@@ -93,7 +112,7 @@ const MessageRenderer = _ref => {
         return /*#__PURE__*/_react.default.createElement(_FileMessage.default, _extends({
           message: message,
           pressed: pressed
-        }, messageProps));
+        }, messageProps), reactionChildren);
       });
     }
 

package/lib/commonjs/components/MessageRenderer/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["MessageRenderer","currentUserId","channel","message","onPress","onLongPress","rest","variant","isMyMessage","isOutgoing","isIncoming","variantContainerStyle","incoming","styles","chatIncoming","outgoing","chatOutgoing","groupWithPrev","groupWithNext","calcMessageGrouping","Boolean","enableMessageGrouping","prevMessage","nextMessage","messageComponent","useIIFE","pressableProps","style","msgContainer","disabled","delayLongPress","DEFAULT_LONG_PRESS_DELAY","messageProps","isUserMessage","pressed","isFileMessage","isAdminMessage","conditionChaining","chatGroup","chatNonGroup","chatLastMessage","outgoingContainer","timeOutgoing","bubbleContainer","bubbleWrapper","timeIncoming","createStyleSheet","flexDirection","justifyContent","alignItems","marginLeft","marginRight","marginBottom","maxWidth","flexShrink","React","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, View } from 'react-native';\n\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { calcMessageGrouping, conditionChaining, isMyMessage, useIIFE } from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY } from '../../constants';\nimport type { GroupChannelProps } from '../../domain/groupChannel/types';\nimport AdminMessage from './AdminMessage';\nimport FileMessage from './FileMessage';\nimport MessageContainer from './MessageContainer';\nimport MessageDateSeparator from './MessageDateSeparator';\nimport MessageIncomingAvatar from './MessageIncomingAvatar';\nimport MessageIncomingSenderName from './MessageIncomingSenderName';\nimport MessageOutgoingStatus from './MessageOutgoingStatus';\nimport MessageTime from './MessageTime';\nimport UnknownMessage from './UnknownMessage';\nimport UserMessage from './UserMessage';\n\ntype MessageStyleVariant = 'outgoing' | 'incoming';\nexport interface MessageRendererInterface<T = SendbirdMessage> {\n  message: T;\n  prevMessage?: SendbirdMessage;\n  nextMessage?: SendbirdMessage;\n  variant: MessageStyleVariant;\n  groupWithPrev: boolean;\n  groupWithNext: boolean;\n  pressed: boolean;\n}\n\nconst MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({\n  currentUserId,\n  channel,\n  message,\n  onPress,\n  onLongPress,\n  ...rest\n}) => {\n  const variant: MessageStyleVariant = isMyMessage(message, currentUserId) ? 'outgoing' : 'incoming';\n  const isOutgoing = variant === 'outgoing';\n  const isIncoming = variant === 'incoming';\n  const variantContainerStyle = { incoming: styles.chatIncoming, outgoing: styles.chatOutgoing }[variant];\n\n  const { groupWithPrev, groupWithNext } = calcMessageGrouping(\n    Boolean(rest.enableMessageGrouping),\n    message,\n    rest.prevMessage,\n    rest.nextMessage,\n  );\n\n  const messageComponent = useIIFE(() => {\n    const pressableProps = {\n      style: styles.msgContainer,\n      disabled: !onPress && !onLongPress,\n      onPress,\n      onLongPress,\n      delayLongPress: DEFAULT_LONG_PRESS_DELAY,\n    };\n    const messageProps = { ...rest, variant, groupWithNext, groupWithPrev };\n\n    if (message.isUserMessage()) {\n      return (\n        <Pressable {...pressableProps}>\n          {({ pressed }) => <UserMessage message={message} pressed={pressed} {...messageProps} />}\n        </Pressable>\n      );\n    }\n\n    if (message.isFileMessage()) {\n      return (\n        <Pressable {...pressableProps}>\n          {({ pressed }) => <FileMessage message={message} pressed={pressed} {...messageProps} />}\n        </Pressable>\n      );\n    }\n\n    if (message.isAdminMessage()) {\n      return <AdminMessage message={message} pressed={false} {...messageProps} />;\n    }\n\n    return (\n      <Pressable {...pressableProps}>\n        {({ pressed }) => <UnknownMessage message={message} pressed={pressed} {...messageProps} />}\n      </Pressable>\n    );\n  });\n\n  return (\n    <MessageContainer>\n      <MessageDateSeparator message={message} prevMessage={rest.prevMessage} />\n      {message.isAdminMessage() && messageComponent}\n      {!message.isAdminMessage() && (\n        <View\n          style={[\n            variantContainerStyle,\n            conditionChaining(\n              [groupWithNext, Boolean(rest.nextMessage)],\n              [styles.chatGroup, styles.chatNonGroup, styles.chatLastMessage],\n            ),\n          ]}\n        >\n          {isOutgoing && (\n            <View style={styles.outgoingContainer}>\n              <MessageOutgoingStatus channel={channel} message={message} />\n              <MessageTime message={message} grouping={groupWithNext} style={styles.timeOutgoing} />\n            </View>\n          )}\n          {isIncoming && <MessageIncomingAvatar message={message} grouping={groupWithNext} />}\n          <View style={styles.bubbleContainer}>\n            {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}\n            <View style={styles.bubbleWrapper}>\n              {messageComponent}\n              {isIncoming && <MessageTime message={message} grouping={groupWithNext} style={styles.timeIncoming} />}\n            </View>\n          </View>\n        </View>\n      )}\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  chatIncoming: {\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    alignItems: 'flex-end',\n  },\n  chatOutgoing: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'flex-end',\n  },\n  timeIncoming: {\n    marginLeft: 4,\n  },\n  timeOutgoing: {\n    marginRight: 4,\n  },\n  chatGroup: {\n    marginBottom: 2,\n  },\n  chatNonGroup: {\n    marginBottom: 16,\n  },\n  chatLastMessage: {\n    marginBottom: 16,\n  },\n  msgContainer: {\n    maxWidth: 240,\n  },\n  bubbleContainer: {\n    flexShrink: 1,\n  },\n  bubbleWrapper: {\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n  },\n  outgoingContainer: {\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    justifyContent: 'center',\n  },\n});\n\nexport default React.memo(MessageRenderer);\n"],"mappings":"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"}
+{"version":3,"names":["MessageRenderer","currentUserId","channel","message","onPress","onLongPress","rest","variant","isMyMessage","isOutgoing","isIncoming","variantContainerStyle","incoming","styles","chatIncoming","outgoing","chatOutgoing","groupWithPrev","groupWithNext","calcMessageGrouping","Boolean","enableMessageGrouping","prevMessage","nextMessage","features","useSendbirdChat","reactionChildren","useIIFE","shouldRenderReaction","reactionEnabled","reactions","length","messageComponent","pressableProps","style","msgContainer","disabled","delayLongPress","DEFAULT_LONG_PRESS_DELAY","messageProps","isUserMessage","pressed","isFileMessage","isAdminMessage","conditionChaining","chatGroup","chatNonGroup","chatLastMessage","outgoingContainer","timeOutgoing","bubbleContainer","bubbleWrapper","timeIncoming","createStyleSheet","flexDirection","justifyContent","alignItems","marginLeft","marginRight","marginBottom","maxWidth","flexShrink","React","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, PressableProps, View } from 'react-native';\n\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport {\n  calcMessageGrouping,\n  conditionChaining,\n  isMyMessage,\n  shouldRenderReaction,\n  useIIFE,\n} from '@sendbird/uikit-utils';\n\nimport { DEFAULT_LONG_PRESS_DELAY } from '../../constants';\nimport type { GroupChannelProps } from '../../domain/groupChannel/types';\nimport { useSendbirdChat } from '../../hooks/useContext';\nimport { ReactionAddons } from '../ReactionAddons';\nimport AdminMessage from './AdminMessage';\nimport FileMessage from './FileMessage';\nimport MessageContainer from './MessageContainer';\nimport MessageDateSeparator from './MessageDateSeparator';\nimport MessageIncomingAvatar from './MessageIncomingAvatar';\nimport MessageIncomingSenderName from './MessageIncomingSenderName';\nimport MessageOutgoingStatus from './MessageOutgoingStatus';\nimport MessageTime from './MessageTime';\nimport UnknownMessage from './UnknownMessage';\nimport UserMessage from './UserMessage';\n\ntype MessageStyleVariant = 'outgoing' | 'incoming';\nexport type MessageRendererInterface<T = SendbirdMessage, AdditionalProps = unknown> = {\n  message: T;\n  prevMessage?: SendbirdMessage;\n  nextMessage?: SendbirdMessage;\n  variant: MessageStyleVariant;\n  groupWithPrev: boolean;\n  groupWithNext: boolean;\n  pressed: boolean;\n  children?: React.ReactElement | null;\n} & AdditionalProps;\n\nconst MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({\n  currentUserId,\n  channel,\n  message,\n  onPress,\n  onLongPress,\n  ...rest\n}) => {\n  const variant: MessageStyleVariant = isMyMessage(message, currentUserId) ? 'outgoing' : 'incoming';\n  const isOutgoing = variant === 'outgoing';\n  const isIncoming = variant === 'incoming';\n  const variantContainerStyle = { incoming: styles.chatIncoming, outgoing: styles.chatOutgoing }[variant];\n\n  const { groupWithPrev, groupWithNext } = calcMessageGrouping(\n    Boolean(rest.enableMessageGrouping),\n    message,\n    rest.prevMessage,\n    rest.nextMessage,\n  );\n\n  const { features } = useSendbirdChat();\n\n  const reactionChildren = useIIFE(() => {\n    if (shouldRenderReaction(channel, features.reactionEnabled) && message.reactions && message.reactions.length > 0) {\n      return <ReactionAddons.Message channel={channel} message={message} />;\n    }\n    return null;\n  });\n\n  const messageComponent = useIIFE(() => {\n    const pressableProps: PressableProps = {\n      style: styles.msgContainer,\n      disabled: !onPress && !onLongPress,\n      onPress,\n      onLongPress,\n      delayLongPress: DEFAULT_LONG_PRESS_DELAY,\n    };\n    const messageProps = { ...rest, variant, groupWithNext, groupWithPrev };\n\n    if (message.isUserMessage()) {\n      return (\n        <Pressable {...pressableProps}>\n          {({ pressed }) => (\n            <UserMessage\n              message={message}\n              pressed={pressed}\n              onLongPressURL={onLongPress}\n              onLongPressMentionedUser={onLongPress}\n              {...messageProps}\n            >\n              {reactionChildren}\n            </UserMessage>\n          )}\n        </Pressable>\n      );\n    }\n\n    if (message.isFileMessage()) {\n      return (\n        <Pressable {...pressableProps}>\n          {({ pressed }) => (\n            <FileMessage message={message} pressed={pressed} {...messageProps}>\n              {reactionChildren}\n            </FileMessage>\n          )}\n        </Pressable>\n      );\n    }\n\n    if (message.isAdminMessage()) {\n      return <AdminMessage message={message} pressed={false} {...messageProps} />;\n    }\n\n    return (\n      <Pressable {...pressableProps}>\n        {({ pressed }) => <UnknownMessage message={message} pressed={pressed} {...messageProps} />}\n      </Pressable>\n    );\n  });\n\n  return (\n    <MessageContainer>\n      <MessageDateSeparator message={message} prevMessage={rest.prevMessage} />\n      {message.isAdminMessage() && messageComponent}\n      {!message.isAdminMessage() && (\n        <View\n          style={[\n            variantContainerStyle,\n            conditionChaining(\n              [groupWithNext, Boolean(rest.nextMessage)],\n              [styles.chatGroup, styles.chatNonGroup, styles.chatLastMessage],\n            ),\n          ]}\n        >\n          {isOutgoing && (\n            <View style={styles.outgoingContainer}>\n              <MessageOutgoingStatus channel={channel} message={message} />\n              <MessageTime message={message} grouping={groupWithNext} style={styles.timeOutgoing} />\n            </View>\n          )}\n          {isIncoming && <MessageIncomingAvatar message={message} grouping={groupWithNext} />}\n          <View style={styles.bubbleContainer}>\n            {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}\n            <View style={styles.bubbleWrapper}>\n              {messageComponent}\n              {isIncoming && <MessageTime message={message} grouping={groupWithNext} style={styles.timeIncoming} />}\n            </View>\n          </View>\n        </View>\n      )}\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  chatIncoming: {\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    alignItems: 'flex-end',\n  },\n  chatOutgoing: {\n    flexDirection: 'row',\n    justifyContent: 'flex-end',\n    alignItems: 'flex-end',\n  },\n  timeIncoming: {\n    marginLeft: 4,\n  },\n  timeOutgoing: {\n    marginRight: 4,\n  },\n  chatGroup: {\n    marginBottom: 2,\n  },\n  chatNonGroup: {\n    marginBottom: 16,\n  },\n  chatLastMessage: {\n    marginBottom: 16,\n  },\n  msgContainer: {\n    maxWidth: 240,\n  },\n  bubbleContainer: {\n    flexShrink: 1,\n  },\n  bubbleWrapper: {\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n  },\n  outgoingContainer: {\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    justifyContent: 'center',\n  },\n});\n\nexport default React.memo(MessageRenderer);\n"],"mappings":"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"}

package/lib/commonjs/components/ReactionAddons/BottomSheetReactionAddon.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+
+var _uikitChatHooks = require("@sendbird/uikit-chat-hooks");
+
+var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
+
+var _uikitUtils = require("@sendbird/uikit-utils");
+
+var _constants = require("../../constants");
+
+var _useContext = require("../../hooks/useContext");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const COMPONENT_NAME = 'BottomSheetReactionAddon';
+
+const BottomSheetReactionAddon = _ref => {
+  let {
+    onClose,
+    message,
+    channel
+  } = _ref;
+  const {
+    emojiManager,
+    currentUser,
+    sdk
+  } = (0, _useContext.useSendbirdChat)();
+  const {
+    updateReactionFocusedItem,
+    openReactionList
+  } = (0, _useContext.useReaction)();
+  const {
+    colors
+  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
+  const id = (0, _uikitUtils.useUniqId)(COMPONENT_NAME);
+  const {
+    left,
+    right
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  (0, _uikitChatHooks.useChannelHandler)(sdk, COMPONENT_NAME + id, {
+    async onReactionUpdated(eventChannel, event) {
+      if ((channel === null || channel === void 0 ? void 0 : channel.url) === eventChannel.url && event.messageId === (message === null || message === void 0 ? void 0 : message.messageId)) {
+        updateReactionFocusedItem({
+          message: await sdk.message.getMessage({
+            includeReactions: true,
+            messageId: message.messageId,
+            channelUrl: message.channelUrl,
+            channelType: message.channelType
+          })
+        });
+      }
+    }
+
+  });
+  const emojiAll = emojiManager.allEmoji.slice(0, 5);
+  const color = colors.ui.reaction.default;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [styles.container, {
+      marginRight: right,
+      marginLeft: left
+    }]
+  }, emojiAll.map(_ref2 => {
+    var _message$reactions, _message$reactions$fi;
+
+    let {
+      key,
+      url
+    } = _ref2;
+    const reactionUserIds = (message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.find(it => it.key === key)) === null || _message$reactions$fi === void 0 ? void 0 : _message$reactions$fi.userIds) ?? [];
+    const currentUserIdx = reactionUserIds.indexOf((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? _constants.UNKNOWN_USER_ID);
+    const reacted = currentUserIdx > -1;
+
+    const onPress = () => {
+      if (reacted) channel.deleteReaction(message, key);else channel.addReaction(message, key);
+      onClose();
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+      key: key,
+      onPress: onPress,
+      style: _ref3 => {
+        let {
+          pressed
+        } = _ref3;
+        return [styles.button, {
+          backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background
+        }];
+      }
+    }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Image, {
+      source: {
+        uri: url
+      },
+      style: styles.emoji
+    }));
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: async () => {
+      await onClose();
+      openReactionList({
+        channel,
+        message
+      });
+    },
+    style: _ref4 => {
+      let {
+        pressed
+      } = _ref4;
+      return [styles.button, {
+        backgroundColor: pressed ? color.selected.background : color.enabled.background
+      }];
+    }
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
+    icon: 'emoji-more',
+    style: styles.emoji,
+    color: colors.onBackground03
+  })));
+};
+
+const styles = (0, _uikitReactNativeFoundation.createStyleSheet)({
+  container: {
+    paddingTop: 12,
+    paddingBottom: 16,
+    paddingHorizontal: 18,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
+  },
+  button: {
+    width: 44,
+    height: 44,
+    padding: 4,
+    borderRadius: 8
+  },
+  emoji: {
+    width: '100%',
+    height: '100%'
+  }
+});
+var _default = BottomSheetReactionAddon;
+exports.default = _default;
+//# sourceMappingURL=BottomSheetReactionAddon.js.map