@sendbird/uikit-react-native-foundation 2.3.0 → 2.4.0

package/lib/module/ui/OpenChannelMessage/Message.admin.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Box from '../../components/Box';
+import Text from '../../components/Text';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+
+const AdminMessage = props => {
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.openChannelMessage.default;
+  return /*#__PURE__*/React.createElement(Box, {
+    marginVertical: 8,
+    paddingHorizontal: 12,
+    backgroundColor: colors.background
+  }, /*#__PURE__*/React.createElement(Box, {
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    backgroundColor: color.enabled.adminBackground
+  }, /*#__PURE__*/React.createElement(Text, {
+    caption2: true,
+    color: colors.onBackground02
+  }, props.message.message)));
+};
+
+export default AdminMessage;
+//# sourceMappingURL=Message.admin.js.map

package/lib/module/ui/OpenChannelMessage/Message.admin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","Text","useUIKitTheme","AdminMessage","props","colors","color","ui","openChannelMessage","default","background","enabled","adminBackground","onBackground02","message"],"sources":["Message.admin.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdAdminMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { OpenChannelMessageProps } from './index';\n\nconst AdminMessage = (props: OpenChannelMessageProps<SendbirdAdminMessage>) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.openChannelMessage.default;\n  return (\n    <Box marginVertical={8} paddingHorizontal={12} backgroundColor={colors.background}>\n      <Box borderRadius={8} paddingHorizontal={16} paddingVertical={14} backgroundColor={color.enabled.adminBackground}>\n        <Text caption2 color={colors.onBackground02}>\n          {props.message.message}\n        </Text>\n      </Box>\n    </Box>\n  );\n};\n\nexport default AdminMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,OAAOC,GAAP,MAAgB,sBAAhB;AACA,OAAOC,IAAP,MAAiB,uBAAjB;AACA,OAAOC,aAAP,MAA0B,2BAA1B;;AAGA,MAAMC,YAAY,GAAIC,KAAD,IAA0D;EAC7E,MAAM;IAAEC;EAAF,IAAaH,aAAa,EAAhC;EACA,MAAMI,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUC,kBAAV,CAA6BC,OAA3C;EACA,oBACE,oBAAC,GAAD;IAAK,cAAc,EAAE,CAArB;IAAwB,iBAAiB,EAAE,EAA3C;IAA+C,eAAe,EAAEJ,MAAM,CAACK;EAAvE,gBACE,oBAAC,GAAD;IAAK,YAAY,EAAE,CAAnB;IAAsB,iBAAiB,EAAE,EAAzC;IAA6C,eAAe,EAAE,EAA9D;IAAkE,eAAe,EAAEJ,KAAK,CAACK,OAAN,CAAcC;EAAjG,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEP,MAAM,CAACQ;EAA7B,GACGT,KAAK,CAACU,OAAN,CAAcA,OADjB,CADF,CADF,CADF;AASD,CAZD;;AAcA,eAAeX,YAAf"}

package/lib/module/ui/OpenChannelMessage/Message.file.image.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import Box from '../../components/Box';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import createStyleSheet from '../../styles/createStyleSheet';
+import MessageContainer from './MessageContainer';
+
+const ImageFileMessage = props => {
+  const {
+    onPress,
+    onLongPress,
+    ...rest
+  } = props;
+  const uri = getAvailableUriFromFileMessage(props.message);
+  return /*#__PURE__*/React.createElement(MessageContainer, rest, /*#__PURE__*/React.createElement(Box, {
+    borderRadius: 8,
+    overflow: 'hidden',
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    style: styles.container,
+    activeOpacity: 0.8,
+    onPress: onPress,
+    onLongPress: onLongPress
+  }, /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    source: {
+      uri
+    },
+    width: '100%',
+    height: '100%'
+  }))));
+};
+
+const styles = createStyleSheet({
+  container: {
+    maxWidth: 296,
+    height: 196
+  }
+});
+export default ImageFileMessage;
+//# sourceMappingURL=Message.file.image.js.map

package/lib/module/ui/OpenChannelMessage/Message.file.image.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","getAvailableUriFromFileMessage","Box","ImageWithPlaceholder","PressBox","createStyleSheet","MessageContainer","ImageFileMessage","props","onPress","onLongPress","rest","uri","message","styles","container","maxWidth","height"],"sources":["Message.file.image.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\nconst ImageFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage>) => {\n  const { onPress, onLongPress, ...rest } = props;\n  const uri = getAvailableUriFromFileMessage(props.message);\n  return (\n    <MessageContainer {...rest}>\n      <Box borderRadius={8} overflow={'hidden'} style={styles.container}>\n        <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n          <ImageWithPlaceholder source={{ uri }} width={'100%'} height={'100%'} />\n        </PressBox>\n      </Box>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    maxWidth: 296,\n    height: 196,\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,8BAAT,QAA+C,uBAA/C;AAEA,OAAOC,GAAP,MAAgB,sBAAhB;AACA,OAAOC,oBAAP,MAAiC,uCAAjC;AACA,OAAOC,QAAP,MAAqB,2BAArB;AACA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAGA,MAAMC,gBAAgB,GAAIC,KAAD,IAAyD;EAChF,MAAM;IAAEC,OAAF;IAAWC,WAAX;IAAwB,GAAGC;EAA3B,IAAoCH,KAA1C;EACA,MAAMI,GAAG,GAAGX,8BAA8B,CAACO,KAAK,CAACK,OAAP,CAA1C;EACA,oBACE,oBAAC,gBAAD,EAAsBF,IAAtB,eACE,oBAAC,GAAD;IAAK,YAAY,EAAE,CAAnB;IAAsB,QAAQ,EAAE,QAAhC;IAA0C,KAAK,EAAEG,MAAM,CAACC;EAAxD,gBACE,oBAAC,QAAD;IAAU,KAAK,EAAED,MAAM,CAACC,SAAxB;IAAmC,aAAa,EAAE,GAAlD;IAAuD,OAAO,EAAEN,OAAhE;IAAyE,WAAW,EAAEC;EAAtF,gBACE,oBAAC,oBAAD;IAAsB,MAAM,EAAE;MAAEE;IAAF,CAA9B;IAAuC,KAAK,EAAE,MAA9C;IAAsD,MAAM,EAAE;EAA9D,EADF,CADF,CADF,CADF;AASD,CAZD;;AAcA,MAAME,MAAM,GAAGT,gBAAgB,CAAC;EAC9BU,SAAS,EAAE;IACTC,QAAQ,EAAE,GADD;IAETC,MAAM,EAAE;EAFC;AADmB,CAAD,CAA/B;AAOA,eAAeV,gBAAf"}

package/lib/module/ui/OpenChannelMessage/Message.file.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { getFileTypeFromMessage } from '@sendbird/uikit-utils';
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+const iconMapper = {
+  audio: 'file-audio',
+  image: 'photo',
+  video: 'play',
+  file: 'file-document'
+};
+
+const FileMessage = props => {
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    onPress,
+    onLongPress,
+    ...rest
+  } = props;
+  const type = getFileTypeFromMessage(props.message);
+  const color = colors.ui.openChannelMessage.default;
+  return /*#__PURE__*/React.createElement(MessageContainer, rest, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: onPress,
+    onLongPress: onLongPress
+  }, _ref => {
+    var _props$strings;
+
+    let {
+      pressed
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Box, {
+      padding: 8,
+      borderRadius: 8,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      style: {
+        backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      padding: 4,
+      marginRight: 8,
+      borderRadius: 8,
+      alignItems: 'flex-start',
+      backgroundColor: colors.background
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: iconMapper[type],
+      size: 32
+    })), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      numberOfLines: 1,
+      ellipsizeMode: 'middle',
+      color: color.enabled.textMsg,
+      style: styles.fileName
+    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.fileName) || props.message.name));
+  }));
+};
+
+const styles = createStyleSheet({
+  fileName: {
+    flexShrink: 1
+  }
+});
+export default FileMessage;
+//# sourceMappingURL=Message.file.js.map

package/lib/module/ui/OpenChannelMessage/Message.file.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","getFileTypeFromMessage","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","MessageContainer","iconMapper","audio","image","video","file","FileMessage","props","colors","onPress","onLongPress","rest","type","message","color","ui","openChannelMessage","default","pressed","backgroundColor","bubbleBackground","enabled","background","textMsg","styles","fileName","strings","name","flexShrink"],"sources":["Message.file.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileTypeFromMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = {};\nconst FileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, ...rest } = props;\n  const type = getFileTypeFromMessage(props.message);\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <MessageContainer {...rest}>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => {\n          return (\n            <Box\n              padding={8}\n              borderRadius={8}\n              flexDirection={'row'}\n              alignItems={'center'}\n              justifyContent={'flex-start'}\n              style={{ backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground }}\n            >\n              <Box\n                padding={4}\n                marginRight={8}\n                borderRadius={8}\n                alignItems={'flex-start'}\n                backgroundColor={colors.background}\n              >\n                <Icon icon={iconMapper[type]} size={32} />\n              </Box>\n              <Text\n                body3\n                numberOfLines={1}\n                ellipsizeMode={'middle'}\n                color={color.enabled.textMsg}\n                style={styles.fileName}\n              >\n                {props.strings?.fileName || props.message.name}\n              </Text>\n            </Box>\n          );\n        }}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  fileName: {\n    flexShrink: 1,\n  },\n});\nexport default FileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAA8BC,sBAA9B,QAA4D,uBAA5D;AAEA,OAAOC,GAAP,MAAgB,sBAAhB;AACA,OAAOC,IAAP,MAAiB,uBAAjB;AACA,OAAOC,QAAP,MAAqB,2BAArB;AACA,OAAOC,IAAP,MAAiB,uBAAjB;AACA,OAAOC,gBAAP,MAA6B,+BAA7B;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AAGA,MAAMC,UAAU,GAAG;EAAEC,KAAK,EAAE,YAAT;EAAuBC,KAAK,EAAE,OAA9B;EAAuCC,KAAK,EAAE,MAA9C;EAAsDC,IAAI,EAAE;AAA5D,CAAnB;;AAGA,MAAMC,WAAW,GAAIC,KAAD,IAAgE;EAClF,MAAM;IAAEC;EAAF,IAAaT,aAAa,EAAhC;EACA,MAAM;IAAEU,OAAF;IAAWC,WAAX;IAAwB,GAAGC;EAA3B,IAAoCJ,KAA1C;EACA,MAAMK,IAAI,GAAGnB,sBAAsB,CAACc,KAAK,CAACM,OAAP,CAAnC;EACA,MAAMC,KAAK,GAAGN,MAAM,CAACO,EAAP,CAAUC,kBAAV,CAA6BC,OAA3C;EAEA,oBACE,oBAAC,gBAAD,EAAsBN,IAAtB,eACE,oBAAC,QAAD;IAAU,OAAO,EAAEF,OAAnB;IAA4B,WAAW,EAAEC;EAAzC,GACG,QAAiB;IAAA;;IAAA,IAAhB;MAAEQ;IAAF,CAAgB;IAChB,oBACE,oBAAC,GAAD;MACE,OAAO,EAAE,CADX;MAEE,YAAY,EAAE,CAFhB;MAGE,aAAa,EAAE,KAHjB;MAIE,UAAU,EAAE,QAJd;MAKE,cAAc,EAAE,YALlB;MAME,KAAK,EAAE;QAAEC,eAAe,EAAED,OAAO,GAAGJ,KAAK,CAACI,OAAN,CAAcE,gBAAjB,GAAoCN,KAAK,CAACO,OAAN,CAAcD;MAA5E;IANT,gBAQE,oBAAC,GAAD;MACE,OAAO,EAAE,CADX;MAEE,WAAW,EAAE,CAFf;MAGE,YAAY,EAAE,CAHhB;MAIE,UAAU,EAAE,YAJd;MAKE,eAAe,EAAEZ,MAAM,CAACc;IAL1B,gBAOE,oBAAC,IAAD;MAAM,IAAI,EAAErB,UAAU,CAACW,IAAD,CAAtB;MAA8B,IAAI,EAAE;IAApC,EAPF,CARF,eAiBE,oBAAC,IAAD;MACE,KAAK,MADP;MAEE,aAAa,EAAE,CAFjB;MAGE,aAAa,EAAE,QAHjB;MAIE,KAAK,EAAEE,KAAK,CAACO,OAAN,CAAcE,OAJvB;MAKE,KAAK,EAAEC,MAAM,CAACC;IALhB,GAOG,mBAAAlB,KAAK,CAACmB,OAAN,kEAAeD,QAAf,KAA2BlB,KAAK,CAACM,OAAN,CAAcc,IAP5C,CAjBF,CADF;EA6BD,CA/BH,CADF,CADF;AAqCD,CA3CD;;AA6CA,MAAMH,MAAM,GAAG1B,gBAAgB,CAAC;EAC9B2B,QAAQ,EAAE;IACRG,UAAU,EAAE;EADJ;AADoB,CAAD,CAA/B;AAKA,eAAetB,WAAf"}

package/lib/module/ui/OpenChannelMessage/Message.file.video.js

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import Box from '../../components/Box';
+import Icon from '../../components/Icon';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+
+const VideoFileMessage = props => {
+  const {
+    colors,
+    palette
+  } = useUIKitTheme();
+  const {
+    onPress,
+    onLongPress,
+    ...rest
+  } = props;
+  const uri = getAvailableUriFromFileMessage(props.message);
+  const {
+    thumbnail,
+    loading
+  } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
+  return /*#__PURE__*/React.createElement(MessageContainer, rest, /*#__PURE__*/React.createElement(PressBox, {
+    style: styles.container,
+    activeOpacity: 0.8,
+    onPress: onPress,
+    onLongPress: onLongPress
+  }, /*#__PURE__*/React.createElement(Box, {
+    borderRadius: 8,
+    overflow: 'hidden',
+    style: styles.container
+  }, loading ? /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: colors.onBackground04,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }) : /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    source: {
+      uri: thumbnail ?? 'invalid-image'
+    },
+    width: '100%',
+    height: '100%'
+  }), (loading || thumbnail !== null) && /*#__PURE__*/React.createElement(Box, {
+    style: styles.iconContainer,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: 'play',
+    size: 28,
+    color: palette.onBackgroundLight02,
+    containerStyle: [styles.playIcon, {
+      backgroundColor: palette.onBackgroundDark01
+    }]
+  })))));
+};
+
+const useRetry = function (fetch) {
+  let retryCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5;
+  const [state, setState] = useState({
+    thumbnail: null,
+    loading: true
+  });
+  const retryCountRef = useRef(0);
+  const retryTimeoutRef = useRef();
+  const fetchThumbnail = useRef(fetch);
+  fetchThumbnail.current = fetch;
+  useEffect(() => {
+    if (!state.thumbnail) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            fetchThumbnail.current().then(result => {
+              setState({
+                loading: false,
+                thumbnail: (result === null || result === void 0 ? void 0 : result.path) ?? null
+              });
+            });
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [state.thumbnail]);
+  return state;
+};
+
+const styles = createStyleSheet({
+  container: {
+    maxWidth: 296,
+    height: 196
+  },
+  iconContainer: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%'
+  },
+  playIcon: {
+    padding: 10,
+    borderRadius: 50
+  }
+});
+export default VideoFileMessage;
+//# sourceMappingURL=Message.file.video.js.map

package/lib/module/ui/OpenChannelMessage/Message.file.video.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","useState","getAvailableUriFromFileMessage","Box","Icon","ImageWithPlaceholder","PressBox","createStyleSheet","useUIKitTheme","MessageContainer","VideoFileMessage","props","colors","palette","onPress","onLongPress","rest","uri","message","thumbnail","loading","useRetry","fetchThumbnailFromVideoSource","styles","container","onBackground04","width","height","iconContainer","onBackgroundLight02","playIcon","backgroundColor","onBackgroundDark01","fetch","retryCount","state","setState","retryCountRef","retryTimeoutRef","fetchThumbnail","current","reloadReservation","setTimeout","then","result","path","clearTimeout","maxWidth","position","padding","borderRadius"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {\n  fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n};\nconst VideoFileMessage = (props: OpenChannelMessageProps<SendbirdFileMessage, Props>) => {\n  const { colors, palette } = useUIKitTheme();\n  const { onPress, onLongPress, ...rest } = props;\n  const uri = getAvailableUriFromFileMessage(props.message);\n  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));\n\n  return (\n    <MessageContainer {...rest}>\n      <PressBox style={styles.container} activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n        <Box borderRadius={8} overflow={'hidden'} style={styles.container}>\n          {loading ? (\n            <Box backgroundColor={colors.onBackground04} style={{ width: '100%', height: '100%' }} />\n          ) : (\n            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} width={'100%'} height={'100%'} />\n          )}\n\n          {(loading || thumbnail !== null) && (\n            <Box style={styles.iconContainer} alignItems={'center'} justifyContent={'center'}>\n              <Icon\n                icon={'play'}\n                size={28}\n                color={palette.onBackgroundLight02}\n                containerStyle={[styles.playIcon, { backgroundColor: palette.onBackgroundDark01 }]}\n              />\n            </Box>\n          )}\n        </Box>\n      </PressBox>\n    </MessageContainer>\n  );\n};\nconst useRetry = (fetch: () => Promise<{ path: string } | null>, retryCount = 5) => {\n  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });\n  const retryCountRef = useRef(0);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n  const fetchThumbnail = useRef(fetch);\n  fetchThumbnail.current = fetch;\n\n  useEffect(() => {\n    if (!state.thumbnail) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            fetchThumbnail.current().then((result) => {\n              setState({ loading: false, thumbnail: result?.path ?? null });\n            });\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [state.thumbnail]);\n\n  return state;\n};\nconst styles = createStyleSheet({\n  container: {\n    maxWidth: 296,\n    height: 196,\n  },\n  iconContainer: {\n    position: 'absolute',\n    width: '100%',\n    height: '100%',\n  },\n  playIcon: {\n    padding: 10,\n    borderRadius: 50,\n  },\n});\nexport default VideoFileMessage;\n"],"mappings":"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"}

package/lib/module/ui/OpenChannelMessage/Message.unknown.js

@@ -0,0 +1,41 @@
+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); }
+
+import React from 'react';
+import PressBox from '../../components/PressBox';
+import Text from '../../components/Text';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+
+const UnknownMessage = props => {
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    onPress,
+    onLongPress,
+    ...rest
+  } = props;
+  const color = colors.ui.openChannelMessage.default;
+  return /*#__PURE__*/React.createElement(PressBox, {
+    onPress: onPress,
+    onLongPress: onLongPress
+  }, _ref => {
+    var _props$strings, _props$strings2;
+
+    let {
+      pressed
+    } = _ref;
+    return /*#__PURE__*/React.createElement(MessageContainer, _extends({
+      pressed: pressed
+    }, rest), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      color: color.enabled.textMsg
+    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.unknownTitle) ?? '(Unknown message type)'), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      color: color.enabled.textMsgPostfix
+    }, ((_props$strings2 = props.strings) === null || _props$strings2 === void 0 ? void 0 : _props$strings2.unknownDescription) ?? 'Cannot read this message.'));
+  });
+};
+
+export default UnknownMessage;
+//# sourceMappingURL=Message.unknown.js.map

package/lib/module/ui/OpenChannelMessage/Message.unknown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PressBox","Text","useUIKitTheme","MessageContainer","UnknownMessage","props","colors","onPress","onLongPress","rest","color","ui","openChannelMessage","default","pressed","enabled","textMsg","strings","unknownTitle","textMsgPostfix","unknownDescription"],"sources":["Message.unknown.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport PressBox from '../../components/PressBox';\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\nconst UnknownMessage = (props: OpenChannelMessageProps<SendbirdMessage>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, ...rest } = props;\n  const color = colors.ui.openChannelMessage.default;\n  return (\n    <PressBox onPress={onPress} onLongPress={onLongPress}>\n      {({ pressed }) => (\n        <MessageContainer pressed={pressed} {...rest}>\n          <Text body3 color={color.enabled.textMsg}>\n            {props.strings?.unknownTitle ?? '(Unknown message type)'}\n          </Text>\n          <Text body3 color={color.enabled.textMsgPostfix}>\n            {props.strings?.unknownDescription ?? 'Cannot read this message.'}\n          </Text>\n        </MessageContainer>\n      )}\n    </PressBox>\n  );\n};\n\nexport default UnknownMessage;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,OAAOC,QAAP,MAAqB,2BAArB;AACA,OAAOC,IAAP,MAAiB,uBAAjB;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAGA,MAAMC,cAAc,GAAIC,KAAD,IAAqD;EAC1E,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EACA,MAAM;IAAEK,OAAF;IAAWC,WAAX;IAAwB,GAAGC;EAA3B,IAAoCJ,KAA1C;EACA,MAAMK,KAAK,GAAGJ,MAAM,CAACK,EAAP,CAAUC,kBAAV,CAA6BC,OAA3C;EACA,oBACE,oBAAC,QAAD;IAAU,OAAO,EAAEN,OAAnB;IAA4B,WAAW,EAAEC;EAAzC,GACG;IAAA;;IAAA,IAAC;MAAEM;IAAF,CAAD;IAAA,oBACC,oBAAC,gBAAD;MAAkB,OAAO,EAAEA;IAA3B,GAAwCL,IAAxC,gBACE,oBAAC,IAAD;MAAM,KAAK,MAAX;MAAY,KAAK,EAAEC,KAAK,CAACK,OAAN,CAAcC;IAAjC,GACG,mBAAAX,KAAK,CAACY,OAAN,kEAAeC,YAAf,KAA+B,wBADlC,CADF,eAIE,oBAAC,IAAD;MAAM,KAAK,MAAX;MAAY,KAAK,EAAER,KAAK,CAACK,OAAN,CAAcI;IAAjC,GACG,oBAAAd,KAAK,CAACY,OAAN,oEAAeG,kBAAf,KAAqC,2BADxC,CAJF,CADD;EAAA,CADH,CADF;AAcD,CAlBD;;AAoBA,eAAehB,cAAf"}

package/lib/module/ui/OpenChannelMessage/Message.user.js

@@ -0,0 +1,67 @@
+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); }
+
+import React from 'react';
+import { urlRegexStrict } from '@sendbird/uikit-utils';
+import PressBox from '../../components/PressBox';
+import RegexText from '../../components/RegexText';
+import Text from '../../components/Text';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+
+const UserMessage = props => {
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    onPress,
+    onLongPress,
+    onPressURL,
+    ...rest
+  } = props;
+  const color = colors.ui.openChannelMessage.default;
+  return /*#__PURE__*/React.createElement(PressBox, {
+    onPress: onPress,
+    onLongPress: onLongPress
+  }, _ref => {
+    var _props$strings;
+
+    let {
+      pressed
+    } = _ref;
+    return /*#__PURE__*/React.createElement(MessageContainer, _extends({
+      pressed: pressed
+    }, rest), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      color: color.enabled.textMsg
+    }, /*#__PURE__*/React.createElement(RegexText, {
+      body3: true,
+      color: color.enabled.textMsg,
+      patterns: [{
+        regex: urlRegexStrict,
+
+        replacer(_ref2) {
+          let {
+            match,
+            parentProps,
+            keyPrefix,
+            index
+          } = _ref2;
+          return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+            key: `${keyPrefix}-${index}`,
+            onPress: onPressURL,
+            onLongPress: onLongPress,
+            color: colors.primary,
+            style: parentProps === null || parentProps === void 0 ? void 0 : parentProps.style
+          }), match);
+        }
+
+      }]
+    }, props.message.message), Boolean(props.message.updatedAt) && /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      color: color.enabled.textMsgPostfix
+    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.edited) ?? ' (edited)')));
+  });
+};
+
+export default UserMessage;
+//# sourceMappingURL=Message.user.js.map

package/lib/module/ui/OpenChannelMessage/Message.user.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","urlRegexStrict","PressBox","RegexText","Text","useUIKitTheme","MessageContainer","UserMessage","props","colors","onPress","onLongPress","onPressURL","rest","color","ui","openChannelMessage","default","pressed","enabled","textMsg","regex","replacer","match","parentProps","keyPrefix","index","primary","style","message","Boolean","updatedAt","textMsgPostfix","strings","edited"],"sources":["Message.user.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\nimport { urlRegexStrict } from '@sendbird/uikit-utils';\n\nimport PressBox from '../../components/PressBox';\nimport RegexText from '../../components/RegexText';\nimport Text from '../../components/Text';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {};\nconst UserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, onPressURL, ...rest } = props;\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <PressBox onPress={onPress} onLongPress={onLongPress}>\n      {({ pressed }) => (\n        <MessageContainer pressed={pressed} {...rest}>\n          <Text body3 color={color.enabled.textMsg}>\n            <RegexText\n              body3\n              color={color.enabled.textMsg}\n              patterns={[\n                {\n                  regex: urlRegexStrict,\n                  replacer({ match, parentProps, keyPrefix, index }) {\n                    return (\n                      <Text\n                        {...parentProps}\n                        key={`${keyPrefix}-${index}`}\n                        onPress={onPressURL}\n                        onLongPress={onLongPress}\n                        color={colors.primary}\n                        style={parentProps?.style}\n                      >\n                        {match}\n                      </Text>\n                    );\n                  },\n                },\n              ]}\n            >\n              {props.message.message}\n            </RegexText>\n            {Boolean(props.message.updatedAt) && (\n              <Text body3 color={color.enabled.textMsgPostfix}>\n                {props.strings?.edited ?? ' (edited)'}\n              </Text>\n            )}\n          </Text>\n        </MessageContainer>\n      )}\n    </PressBox>\n  );\n};\n\nexport default UserMessage;\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,cAAT,QAA+B,uBAA/B;AAEA,OAAOC,QAAP,MAAqB,2BAArB;AACA,OAAOC,SAAP,MAAsB,4BAAtB;AACA,OAAOC,IAAP,MAAiB,uBAAjB;AACA,OAAOC,aAAP,MAA0B,2BAA1B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAIA,MAAMC,WAAW,GAAIC,KAAD,IAAgE;EAClF,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EACA,MAAM;IAAEK,OAAF;IAAWC,WAAX;IAAwBC,UAAxB;IAAoC,GAAGC;EAAvC,IAAgDL,KAAtD;EACA,MAAMM,KAAK,GAAGL,MAAM,CAACM,EAAP,CAAUC,kBAAV,CAA6BC,OAA3C;EAEA,oBACE,oBAAC,QAAD;IAAU,OAAO,EAAEP,OAAnB;IAA4B,WAAW,EAAEC;EAAzC,GACG;IAAA;;IAAA,IAAC;MAAEO;IAAF,CAAD;IAAA,oBACC,oBAAC,gBAAD;MAAkB,OAAO,EAAEA;IAA3B,GAAwCL,IAAxC,gBACE,oBAAC,IAAD;MAAM,KAAK,MAAX;MAAY,KAAK,EAAEC,KAAK,CAACK,OAAN,CAAcC;IAAjC,gBACE,oBAAC,SAAD;MACE,KAAK,MADP;MAEE,KAAK,EAAEN,KAAK,CAACK,OAAN,CAAcC,OAFvB;MAGE,QAAQ,EAAE,CACR;QACEC,KAAK,EAAEpB,cADT;;QAEEqB,QAAQ,QAA2C;UAAA,IAA1C;YAAEC,KAAF;YAASC,WAAT;YAAsBC,SAAtB;YAAiCC;UAAjC,CAA0C;UACjD,oBACE,oBAAC,IAAD,eACMF,WADN;YAEE,GAAG,EAAG,GAAEC,SAAU,IAAGC,KAAM,EAF7B;YAGE,OAAO,EAAEd,UAHX;YAIE,WAAW,EAAED,WAJf;YAKE,KAAK,EAAEF,MAAM,CAACkB,OALhB;YAME,KAAK,EAAEH,WAAF,aAAEA,WAAF,uBAAEA,WAAW,CAAEI;UANtB,IAQGL,KARH,CADF;QAYD;;MAfH,CADQ;IAHZ,GAuBGf,KAAK,CAACqB,OAAN,CAAcA,OAvBjB,CADF,EA0BGC,OAAO,CAACtB,KAAK,CAACqB,OAAN,CAAcE,SAAf,CAAP,iBACC,oBAAC,IAAD;MAAM,KAAK,MAAX;MAAY,KAAK,EAAEjB,KAAK,CAACK,OAAN,CAAca;IAAjC,GACG,mBAAAxB,KAAK,CAACyB,OAAN,kEAAeC,MAAf,KAAyB,WAD5B,CA3BJ,CADF,CADD;EAAA,CADH,CADF;AAwCD,CA7CD;;AA+CA,eAAe3B,WAAf"}

package/lib/module/ui/OpenChannelMessage/Message.user.og.js

@@ -0,0 +1,121 @@
+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); }
+
+import React from 'react';
+import { urlRegexRough } from '@sendbird/uikit-utils';
+import Box from '../../components/Box';
+import ImageWithPlaceholder from '../../components/ImageWithPlaceholder';
+import PressBox from '../../components/PressBox';
+import RegexText from '../../components/RegexText';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+
+const OpenGraphUserMessage = props => {
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    onPress,
+    onLongPress,
+    onPressURL,
+    ...rest
+  } = props;
+  const color = colors.ui.openChannelMessage.default;
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: onPress,
+    onLongPress: onLongPress
+  }, _ref => {
+    var _props$strings;
+
+    let {
+      pressed
+    } = _ref;
+    return /*#__PURE__*/React.createElement(MessageContainer, _extends({
+      pressed: pressed
+    }, rest), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      color: color.enabled.textMsg
+    }, /*#__PURE__*/React.createElement(RegexText, {
+      body3: true,
+      color: color.enabled.textMsg,
+      patterns: [{
+        regex: urlRegexRough,
+
+        replacer(_ref2) {
+          let {
+            match,
+            parentProps,
+            keyPrefix,
+            index
+          } = _ref2;
+          return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+            key: `${keyPrefix}-${index}`,
+            onPress: onPressURL,
+            onLongPress: onLongPress,
+            color: colors.primary,
+            style: parentProps === null || parentProps === void 0 ? void 0 : parentProps.style
+          }), match);
+        }
+
+      }]
+    }, props.message.message), Boolean(props.message.updatedAt) && /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      color: color.enabled.textMsgPostfix
+    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.edited) ?? ' (edited)')));
+  }), props.message.ogMetaData && /*#__PURE__*/React.createElement(MessageContainer, _extends({}, rest, {
+    grouped: true
+  }), /*#__PURE__*/React.createElement(PressBox, {
+    style: styles.ogContainer,
+    onPress: onPressURL,
+    onLongPress: onLongPress
+  }, _ref3 => {
+    let {
+      pressed
+    } = _ref3;
+    return props.message.ogMetaData && /*#__PURE__*/React.createElement(Box, {
+      padding: 8,
+      borderRadius: 8,
+      style: styles.ogContainer,
+      backgroundColor: pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground
+    }, /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 1,
+      caption2: true,
+      color: colors.onBackground02,
+      style: styles.ogUrl
+    }, props.message.ogMetaData.url), /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 2,
+      body2: true,
+      color: colors.primary,
+      style: styles.ogTitle
+    }, props.message.ogMetaData.title), Boolean(props.message.ogMetaData.description) && /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 2,
+      caption2: true,
+      color: colors.onBackground01
+    }, props.message.ogMetaData.description), Boolean(props.message.ogMetaData.defaultImage) && /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+      style: styles.ogImage,
+      source: {
+        uri: props.message.ogMetaData.defaultImage.url
+      }
+    }));
+  })));
+};
+
+const styles = createStyleSheet({
+  ogContainer: {
+    maxWidth: 296
+  },
+  ogUrl: {
+    marginBottom: 4
+  },
+  ogTitle: {
+    marginBottom: 8
+  },
+  ogImage: {
+    width: '100%',
+    height: 156,
+    marginTop: 12
+  }
+});
+export default OpenGraphUserMessage;
+//# sourceMappingURL=Message.user.og.js.map

package/lib/module/ui/OpenChannelMessage/Message.user.og.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","urlRegexRough","Box","ImageWithPlaceholder","PressBox","RegexText","Text","createStyleSheet","useUIKitTheme","MessageContainer","OpenGraphUserMessage","props","colors","onPress","onLongPress","onPressURL","rest","color","ui","openChannelMessage","default","pressed","enabled","textMsg","regex","replacer","match","parentProps","keyPrefix","index","primary","style","message","Boolean","updatedAt","textMsgPostfix","strings","edited","ogMetaData","styles","ogContainer","bubbleBackground","onBackground02","ogUrl","url","ogTitle","title","description","onBackground01","defaultImage","ogImage","uri","maxWidth","marginBottom","width","height","marginTop"],"sources":["Message.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\nimport { urlRegexRough } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport ImageWithPlaceholder from '../../components/ImageWithPlaceholder';\nimport PressBox from '../../components/PressBox';\nimport RegexText from '../../components/RegexText';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { OpenChannelMessageProps } from './index';\n\ntype Props = {};\nconst OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>) => {\n  const { colors } = useUIKitTheme();\n  const { onPress, onLongPress, onPressURL, ...rest } = props;\n  const color = colors.ui.openChannelMessage.default;\n\n  return (\n    <Box>\n      <PressBox onPress={onPress} onLongPress={onLongPress}>\n        {({ pressed }) => (\n          <MessageContainer pressed={pressed} {...rest}>\n            <Text body3 color={color.enabled.textMsg}>\n              <RegexText\n                body3\n                color={color.enabled.textMsg}\n                patterns={[\n                  {\n                    regex: urlRegexRough,\n                    replacer({ match, parentProps, keyPrefix, index }) {\n                      return (\n                        <Text\n                          {...parentProps}\n                          key={`${keyPrefix}-${index}`}\n                          onPress={onPressURL}\n                          onLongPress={onLongPress}\n                          color={colors.primary}\n                          style={parentProps?.style}\n                        >\n                          {match}\n                        </Text>\n                      );\n                    },\n                  },\n                ]}\n              >\n                {props.message.message}\n              </RegexText>\n              {Boolean(props.message.updatedAt) && (\n                <Text body3 color={color.enabled.textMsgPostfix}>\n                  {props.strings?.edited ?? ' (edited)'}\n                </Text>\n              )}\n            </Text>\n          </MessageContainer>\n        )}\n      </PressBox>\n      {props.message.ogMetaData && (\n        <MessageContainer {...rest} grouped>\n          <PressBox style={styles.ogContainer} onPress={onPressURL} onLongPress={onLongPress}>\n            {({ pressed }) =>\n              props.message.ogMetaData && (\n                <Box\n                  padding={8}\n                  borderRadius={8}\n                  style={styles.ogContainer}\n                  backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}\n                >\n                  <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>\n                    {props.message.ogMetaData.url}\n                  </Text>\n\n                  <Text numberOfLines={2} body2 color={colors.primary} style={styles.ogTitle}>\n                    {props.message.ogMetaData.title}\n                  </Text>\n\n                  {Boolean(props.message.ogMetaData.description) && (\n                    <Text numberOfLines={2} caption2 color={colors.onBackground01}>\n                      {props.message.ogMetaData.description}\n                    </Text>\n                  )}\n\n                  {Boolean(props.message.ogMetaData.defaultImage) && (\n                    <ImageWithPlaceholder\n                      style={styles.ogImage}\n                      source={{ uri: props.message.ogMetaData.defaultImage.url }}\n                    />\n                  )}\n                </Box>\n              )\n            }\n          </PressBox>\n        </MessageContainer>\n      )}\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  ogContainer: {\n    maxWidth: 296,\n  },\n  ogUrl: {\n    marginBottom: 4,\n  },\n  ogTitle: {\n    marginBottom: 8,\n  },\n  ogImage: {\n    width: '100%',\n    height: 156,\n    marginTop: 12,\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}