@sendbird/uikit-react-native-foundation 2.5.0 → 3.0.0-rc.1

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","Text","createStyleSheet","useUIKitTheme","AdminMessage","props","colors","createElement","style","styles","container","caption2","color","onBackground02","text","message","width","alignSelf","alignItems","textAlign"],"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 createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { GroupChannelMessageProps } from './index';\n\nconst AdminMessage = (props: GroupChannelMessageProps<SendbirdAdminMessage>) => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Box style={styles.container}>\n      <Text caption2 color={colors.onBackground02} style={styles.text}>\n        {props.message.message}\n      </Text>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 300,\n    alignSelf: 'center',\n    alignItems: 'center',\n  },\n  text: {\n    textAlign: 'center',\n  },\n});\n\nexport default AdminMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAGrD,MAAMC,YAAY,GAAIC,KAAqD,IAAK;EAC9E,MAAM;IAAEC;EAAO,CAAC,GAAGH,aAAa,EAAE;EAElC,oBACEJ,KAAA,CAAAQ,aAAA,CAACP,GAAG;IAACQ,KAAK,EAAEC,MAAM,CAACC;EAAU,gBAC3BX,KAAA,CAAAQ,aAAA,CAACN,IAAI;IAACU,QAAQ;IAACC,KAAK,EAAEN,MAAM,CAACO,cAAe;IAACL,KAAK,EAAEC,MAAM,CAACK;EAAK,GAC7DT,KAAK,CAACU,OAAO,CAACA,OAAO,CACjB,CACH;AAEV,CAAC;AAED,MAAMN,MAAM,GAAGP,gBAAgB,CAAC;EAC9BQ,SAAS,EAAE;IACTM,KAAK,EAAE,GAAG;IACVC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE;EACd,CAAC;EACDJ,IAAI,EAAE;IACJK,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,eAAef,YAAY"}

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

@@ -0,0 +1,46 @@
+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 useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageContainer from './MessageContainer';
+const ImageFileMessage = props => {
+  const {
+    onPress,
+    onLongPress,
+    variant = 'incoming'
+  } = props;
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(Box, {
+    style: styles.container,
+    backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    activeOpacity: 0.8,
+    onPress: onPress,
+    onLongPress: onLongPress
+  }, /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    source: {
+      uri: getAvailableUriFromFileMessage(props.message)
+    },
+    style: styles.image
+  })), props.children));
+};
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden'
+  }
+});
+export default ImageFileMessage;
+//# sourceMappingURL=Message.file.image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","getAvailableUriFromFileMessage","Box","ImageWithPlaceholder","PressBox","createStyleSheet","useUIKitTheme","MessageContainer","ImageFileMessage","props","onPress","onLongPress","variant","colors","createElement","style","styles","container","backgroundColor","ui","groupChannelMessage","enabled","background","activeOpacity","source","uri","message","image","children","borderRadius","overflow","maxWidth","width","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 useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nconst ImageFileMessage = (props: GroupChannelMessageProps<SendbirdFileMessage>) => {\n  const { onPress, onLongPress, variant = 'incoming' } = props;\n\n  const { colors } = useUIKitTheme();\n\n  return (\n    <MessageContainer {...props}>\n      <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>\n        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress}>\n          <ImageWithPlaceholder source={{ uri: getAvailableUriFromFileMessage(props.message) }} style={styles.image} />\n        </PressBox>\n        {props.children}\n      </Box>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  image: {\n    maxWidth: 240,\n    width: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,oBAAoB,MAAM,uCAAuC;AACxE,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,gBAAgB,MAAM,oBAAoB;AAGjD,MAAMC,gBAAgB,GAAIC,KAAoD,IAAK;EACjF,MAAM;IAAEC,OAAO;IAAEC,WAAW;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGH,KAAK;EAE5D,MAAM;IAAEI;EAAO,CAAC,GAAGP,aAAa,EAAE;EAElC,oBACEN,KAAA,CAAAc,aAAA,CAACP,gBAAgB,EAAKE,KAAK,eACzBT,KAAA,CAAAc,aAAA,CAACZ,GAAG;IAACa,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,eAAe,EAAEL,MAAM,CAACM,EAAE,CAACC,mBAAmB,CAACR,OAAO,CAAC,CAACS,OAAO,CAACC;EAAW,gBACvGtB,KAAA,CAAAc,aAAA,CAACV,QAAQ;IAACmB,aAAa,EAAE,GAAI;IAACb,OAAO,EAAEA,OAAQ;IAACC,WAAW,EAAEA;EAAY,gBACvEX,KAAA,CAAAc,aAAA,CAACX,oBAAoB;IAACqB,MAAM,EAAE;MAAEC,GAAG,EAAExB,8BAA8B,CAACQ,KAAK,CAACiB,OAAO;IAAE,CAAE;IAACX,KAAK,EAAEC,MAAM,CAACW;EAAM,EAAG,CACpG,EACVlB,KAAK,CAACmB,QAAQ,CACX,CACW;AAEvB,CAAC;AAED,MAAMZ,MAAM,GAAGX,gBAAgB,CAAC;EAC9BY,SAAS,EAAE;IACTY,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDH,KAAK,EAAE;IACLI,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE,GAAG;IACVC,MAAM,EAAE,GAAG;IACXJ,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAetB,gBAAgB"}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { getFileExtension, getFileType } 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 {
+    variant = 'incoming'
+  } = props;
+  const {
+    colors
+  } = useUIKitTheme();
+  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
+  const color = colors.ui.groupChannelMessage[variant];
+  return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: props.onPress,
+    onLongPress: props.onLongPress
+  }, _ref => {
+    var _props$strings;
+    let {
+      pressed
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Box, {
+      backgroundColor: pressed ? color.pressed.background : color.enabled.background,
+      style: styles.container
+    }, /*#__PURE__*/React.createElement(Box, {
+      style: styles.bubble
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: iconMapper[fileType],
+      size: 24,
+      containerStyle: {
+        backgroundColor: colors.background,
+        padding: 2,
+        borderRadius: 8,
+        marginRight: 8
+      }
+    }), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      ellipsizeMode: 'middle',
+      numberOfLines: 1,
+      color: pressed ? color.pressed.textMsg : color.enabled.textMsg,
+      style: styles.name
+    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.fileName) || props.message.name)), props.children);
+  }));
+};
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    borderRadius: 16
+  },
+  bubble: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  name: {
+    flexShrink: 1
+  }
+});
+export default FileMessage;
+//# sourceMappingURL=Message.file.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","getFileExtension","getFileType","Box","Icon","PressBox","Text","createStyleSheet","useUIKitTheme","MessageContainer","iconMapper","audio","image","video","file","FileMessage","props","variant","colors","fileType","message","type","name","color","ui","groupChannelMessage","createElement","onPress","onLongPress","_ref","_props$strings","pressed","backgroundColor","background","enabled","style","styles","container","bubble","icon","size","containerStyle","padding","borderRadius","marginRight","body3","ellipsizeMode","numberOfLines","textMsg","strings","fileName","children","overflow","flexDirection","alignItems","paddingHorizontal","paddingVertical","flexShrink"],"sources":["Message.file.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType } 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 { GroupChannelMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = GroupChannelMessageProps<SendbirdFileMessage>;\n\nconst FileMessage = (props: Props) => {\n  const { variant = 'incoming' } = props;\n  const { colors } = useUIKitTheme();\n\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n  const color = colors.ui.groupChannelMessage[variant];\n\n  return (\n    <MessageContainer {...props}>\n      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>\n        {({ pressed }) => (\n          <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>\n            <Box style={styles.bubble}>\n              <Icon\n                icon={iconMapper[fileType]}\n                size={24}\n                containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n              />\n              <Text\n                body3\n                ellipsizeMode={'middle'}\n                numberOfLines={1}\n                color={pressed ? color.pressed.textMsg : color.enabled.textMsg}\n                style={styles.name}\n              >\n                {props.strings?.fileName || props.message.name}\n              </Text>\n            </Box>\n            {props.children}\n          </Box>\n        )}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderRadius: 16,\n  },\n  bubble: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default FileMessage;\n"],"mappings":"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"}

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

@@ -0,0 +1,110 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+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 {
+    onPress,
+    onLongPress,
+    variant = 'incoming'
+  } = props;
+  const {
+    colors,
+    palette,
+    select
+  } = useUIKitTheme();
+  const uri = getAvailableUriFromFileMessage(props.message);
+  const {
+    thumbnail,
+    loading
+  } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));
+  return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(Box, {
+    style: styles.container,
+    backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background
+  }, /*#__PURE__*/React.createElement(PressBox, {
+    activeOpacity: 0.8,
+    onPress: onPress,
+    onLongPress: onLongPress,
+    style: styles.image
+  }, loading ? /*#__PURE__*/React.createElement(Box, {
+    style: StyleSheet.absoluteFill,
+    backgroundColor: select({
+      dark: palette.background400,
+      light: palette.background100
+    })
+  }) : /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
+    source: {
+      uri: thumbnail ?? 'invalid-image'
+    },
+    style: StyleSheet.absoluteFill
+  }), (loading || thumbnail !== null) && /*#__PURE__*/React.createElement(Box, {
+    style: StyleSheet.absoluteFill,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: 'play',
+    size: 28,
+    color: palette.onBackgroundLight02,
+    containerStyle: [styles.playIcon, {
+      backgroundColor: palette.onBackgroundDark01
+    }]
+  }))), props.children));
+};
+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: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  image: {
+    maxWidth: 240,
+    width: 240,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden'
+  },
+  playIcon: {
+    padding: 10,
+    borderRadius: 50
+  }
+});
+export default VideoFileMessage;
+//# sourceMappingURL=Message.file.video.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useRef","useState","StyleSheet","getAvailableUriFromFileMessage","Box","Icon","ImageWithPlaceholder","PressBox","createStyleSheet","useUIKitTheme","MessageContainer","VideoFileMessage","props","onPress","onLongPress","variant","colors","palette","select","uri","message","thumbnail","loading","useRetry","fetchThumbnailFromVideoSource","createElement","style","styles","container","backgroundColor","ui","groupChannelMessage","enabled","background","activeOpacity","image","absoluteFill","dark","background400","light","background100","source","alignItems","justifyContent","icon","size","color","onBackgroundLight02","containerStyle","playIcon","onBackgroundDark01","children","fetch","retryCount","arguments","length","undefined","state","setState","retryCountRef","retryTimeoutRef","fetchThumbnail","current","reloadReservation","setTimeout","then","result","path","clearTimeout","borderRadius","overflow","maxWidth","width","height","padding"],"sources":["Message.file.video.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { StyleSheet } from 'react-native';\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 { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<\n  SendbirdFileMessage,\n  {\n    fetchThumbnailFromVideoSource: (uri: string) => Promise<{ path: string } | null>;\n  }\n>;\n\nconst VideoFileMessage = (props: Props) => {\n  const { onPress, onLongPress, variant = 'incoming' } = props;\n\n  const { colors, palette, select } = useUIKitTheme();\n  const uri = getAvailableUriFromFileMessage(props.message);\n  const { thumbnail, loading } = useRetry(() => props.fetchThumbnailFromVideoSource(uri));\n\n  return (\n    <MessageContainer {...props}>\n      <Box style={styles.container} backgroundColor={colors.ui.groupChannelMessage[variant].enabled.background}>\n        <PressBox activeOpacity={0.8} onPress={onPress} onLongPress={onLongPress} style={styles.image}>\n          {loading ? (\n            <Box\n              style={StyleSheet.absoluteFill}\n              backgroundColor={select({ dark: palette.background400, light: palette.background100 })}\n            />\n          ) : (\n            <ImageWithPlaceholder source={{ uri: thumbnail ?? 'invalid-image' }} style={StyleSheet.absoluteFill} />\n          )}\n\n          {(loading || thumbnail !== null) && (\n            <Box style={StyleSheet.absoluteFill} 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        </PressBox>\n        {props.children}\n      </Box>\n    </MessageContainer>\n  );\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    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  image: {\n    maxWidth: 240,\n    width: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  playIcon: {\n    padding: 10,\n    borderRadius: 50,\n  },\n});\nexport default VideoFileMessage;\n"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import Box from '../../components/Box';
+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 UnknownMessage = props => {
+  const {
+    variant = 'incoming'
+  } = props;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage['incoming'];
+  const titleColor = variant === 'incoming' ? colors.onBackground01 : colors.onBackgroundReverse01;
+  const descColor = variant === 'incoming' ? colors.onBackground02 : colors.onBackgroundReverse02;
+  return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: props.onPress,
+    onLongPress: props.onLongPress
+  }, _ref => {
+    var _props$strings, _props$strings2;
+    let {
+      pressed
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Box, {
+      style: styles.bubble,
+      backgroundColor: pressed ? color.pressed.background : color.enabled.background
+    }, /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      color: titleColor
+    }, ((_props$strings = props.strings) === null || _props$strings === void 0 ? void 0 : _props$strings.unknownTitle) ?? '(Unknown message type)'), /*#__PURE__*/React.createElement(Text, {
+      body3: true,
+      color: descColor
+    }, ((_props$strings2 = props.strings) === null || _props$strings2 === void 0 ? void 0 : _props$strings2.unknownDescription) ?? 'Cannot read this message.'));
+  }));
+};
+const styles = createStyleSheet({
+  bubble: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 16
+  }
+});
+export default UnknownMessage;
+//# sourceMappingURL=Message.unknown.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","PressBox","Text","createStyleSheet","useUIKitTheme","MessageContainer","UnknownMessage","props","variant","colors","color","ui","groupChannelMessage","titleColor","onBackground01","onBackgroundReverse01","descColor","onBackground02","onBackgroundReverse02","createElement","onPress","onLongPress","_ref","_props$strings","_props$strings2","pressed","style","styles","bubble","backgroundColor","background","enabled","body3","strings","unknownTitle","unknownDescription","paddingVertical","paddingHorizontal","borderRadius"],"sources":["Message.unknown.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\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 { GroupChannelMessageProps } from './index';\n\nconst UnknownMessage = (props: GroupChannelMessageProps<SendbirdMessage>) => {\n  const { variant = 'incoming' } = props;\n\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage['incoming'];\n  const titleColor = variant === 'incoming' ? colors.onBackground01 : colors.onBackgroundReverse01;\n  const descColor = variant === 'incoming' ? colors.onBackground02 : colors.onBackgroundReverse02;\n\n  return (\n    <MessageContainer {...props}>\n      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>\n        {({ pressed }) => (\n          <Box style={styles.bubble} backgroundColor={pressed ? color.pressed.background : color.enabled.background}>\n            <Text body3 color={titleColor}>\n              {props.strings?.unknownTitle ?? '(Unknown message type)'}\n            </Text>\n            <Text body3 color={descColor}>\n              {props.strings?.unknownDescription ?? 'Cannot read this message.'}\n            </Text>\n          </Box>\n        )}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubble: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n    borderRadius: 16,\n  },\n});\n\nexport default UnknownMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,gBAAgB,MAAM,oBAAoB;AAGjD,MAAMC,cAAc,GAAIC,KAAgD,IAAK;EAC3E,MAAM;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGD,KAAK;EAEtC,MAAM;IAAEE;EAAO,CAAC,GAAGL,aAAa,EAAE;EAClC,MAAMM,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,mBAAmB,CAAC,UAAU,CAAC;EACvD,MAAMC,UAAU,GAAGL,OAAO,KAAK,UAAU,GAAGC,MAAM,CAACK,cAAc,GAAGL,MAAM,CAACM,qBAAqB;EAChG,MAAMC,SAAS,GAAGR,OAAO,KAAK,UAAU,GAAGC,MAAM,CAACQ,cAAc,GAAGR,MAAM,CAACS,qBAAqB;EAE/F,oBACEnB,KAAA,CAAAoB,aAAA,CAACd,gBAAgB,EAAKE,KAAK,eACzBR,KAAA,CAAAoB,aAAA,CAAClB,QAAQ;IAACmB,OAAO,EAAEb,KAAK,CAACa,OAAQ;IAACC,WAAW,EAAEd,KAAK,CAACc;EAAY,GAC9DC,IAAA;IAAA,IAAAC,cAAA,EAAAC,eAAA;IAAA,IAAC;MAAEC;IAAQ,CAAC,GAAAH,IAAA;IAAA,oBACXvB,KAAA,CAAAoB,aAAA,CAACnB,GAAG;MAAC0B,KAAK,EAAEC,MAAM,CAACC,MAAO;MAACC,eAAe,EAAEJ,OAAO,GAAGf,KAAK,CAACe,OAAO,CAACK,UAAU,GAAGpB,KAAK,CAACqB,OAAO,CAACD;IAAW,gBACxG/B,KAAA,CAAAoB,aAAA,CAACjB,IAAI;MAAC8B,KAAK;MAACtB,KAAK,EAAEG;IAAW,GAC3B,EAAAU,cAAA,GAAAhB,KAAK,CAAC0B,OAAO,cAAAV,cAAA,uBAAbA,cAAA,CAAeW,YAAY,KAAI,wBAAwB,CACnD,eACPnC,KAAA,CAAAoB,aAAA,CAACjB,IAAI;MAAC8B,KAAK;MAACtB,KAAK,EAAEM;IAAU,GAC1B,EAAAQ,eAAA,GAAAjB,KAAK,CAAC0B,OAAO,cAAAT,eAAA,uBAAbA,eAAA,CAAeW,kBAAkB,KAAI,2BAA2B,CAC5D,CACH;EAAA,CACP,CACQ,CACM;AAEvB,CAAC;AAED,MAAMR,MAAM,GAAGxB,gBAAgB,CAAC;EAC9ByB,MAAM,EAAE;IACNQ,eAAe,EAAE,CAAC;IAClBC,iBAAiB,EAAE,EAAE;IACrBC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAehC,cAAc"}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import Box from '../../components/Box';
+import PressBox from '../../components/PressBox';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageBubbleWithText from './MessageBubbleWithText';
+import MessageContainer from './MessageContainer';
+const UserMessage = props => {
+  const {
+    variant = 'incoming'
+  } = props;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+  return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: props.onPress,
+    onLongPress: props.onLongPress
+  }, _ref => {
+    let {
+      pressed
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Box, {
+      backgroundColor: pressed ? color.pressed.background : color.enabled.background,
+      style: styles.container
+    }, /*#__PURE__*/React.createElement(MessageBubbleWithText, props), props.children);
+  }));
+};
+const styles = createStyleSheet({
+  container: {
+    overflow: 'hidden',
+    borderRadius: 16
+  }
+});
+export default UserMessage;
+//# sourceMappingURL=Message.user.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","PressBox","createStyleSheet","useUIKitTheme","MessageBubbleWithText","MessageContainer","UserMessage","props","variant","colors","color","ui","groupChannelMessage","createElement","onPress","onLongPress","_ref","pressed","backgroundColor","background","enabled","style","styles","container","children","overflow","borderRadius"],"sources":["Message.user.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport PressBox from '../../components/PressBox';\nimport type { RegexTextPattern } from '../../components/RegexText';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageBubbleWithText from './MessageBubbleWithText';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<\n  SendbirdUserMessage,\n  {\n    regexTextPatterns?: RegexTextPattern[];\n    renderRegexTextChildren?: (message: SendbirdUserMessage) => string;\n  }\n>;\n\nconst UserMessage = (props: Props) => {\n  const { variant = 'incoming' } = props;\n\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant];\n\n  return (\n    <MessageContainer {...props}>\n      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>\n        {({ pressed }) => (\n          <Box backgroundColor={pressed ? color.pressed.background : color.enabled.background} style={styles.container}>\n            <MessageBubbleWithText {...props} />\n            {props.children}\n          </Box>\n        )}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    overflow: 'hidden',\n    borderRadius: 16,\n  },\n});\n\nexport default UserMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,QAAQ,MAAM,2BAA2B;AAEhD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,gBAAgB,MAAM,oBAAoB;AAWjD,MAAMC,WAAW,GAAIC,KAAY,IAAK;EACpC,MAAM;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGD,KAAK;EAEtC,MAAM;IAAEE;EAAO,CAAC,GAAGN,aAAa,EAAE;EAClC,MAAMO,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,mBAAmB,CAACJ,OAAO,CAAC;EAEpD,oBACET,KAAA,CAAAc,aAAA,CAACR,gBAAgB,EAAKE,KAAK,eACzBR,KAAA,CAAAc,aAAA,CAACZ,QAAQ;IAACa,OAAO,EAAEP,KAAK,CAACO,OAAQ;IAACC,WAAW,EAAER,KAAK,CAACQ;EAAY,GAC9DC,IAAA;IAAA,IAAC;MAAEC;IAAQ,CAAC,GAAAD,IAAA;IAAA,oBACXjB,KAAA,CAAAc,aAAA,CAACb,GAAG;MAACkB,eAAe,EAAED,OAAO,GAAGP,KAAK,CAACO,OAAO,CAACE,UAAU,GAAGT,KAAK,CAACU,OAAO,CAACD,UAAW;MAACE,KAAK,EAAEC,MAAM,CAACC;IAAU,gBAC3GxB,KAAA,CAAAc,aAAA,CAACT,qBAAqB,EAAKG,KAAK,CAAI,EACnCA,KAAK,CAACiB,QAAQ,CACX;EAAA,CACP,CACQ,CACM;AAEvB,CAAC;AAED,MAAMF,MAAM,GAAGpB,gBAAgB,CAAC;EAC9BqB,SAAS,EAAE;IACTE,QAAQ,EAAE,QAAQ;IAClBC,YAAY,EAAE;EAChB;AACF,CAAC,CAAC;AAEF,eAAepB,WAAW"}

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

@@ -0,0 +1,51 @@
+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 Box from '../../components/Box';
+import PressBox from '../../components/PressBox';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import MessageBubbleWithText from './MessageBubbleWithText';
+import MessageContainer from './MessageContainer';
+import MessageOpenGraph from './MessageOpenGraph';
+const OpenGraphUserMessage = props => {
+  const {
+    variant = 'incoming'
+  } = props;
+  const {
+    palette,
+    select,
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+  const containerBackgroundColor = select({
+    dark: palette.background400,
+    light: palette.background100
+  });
+  return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(PressBox, {
+    onPress: props.onPress,
+    onLongPress: props.onLongPress
+  }, _ref => {
+    let {
+      pressed
+    } = _ref;
+    return /*#__PURE__*/React.createElement(Box, {
+      backgroundColor: containerBackgroundColor,
+      style: styles.container
+    }, /*#__PURE__*/React.createElement(MessageBubbleWithText, _extends({
+      backgroundColor: pressed ? color.pressed.background : color.enabled.background
+    }, props)), props.message.ogMetaData && /*#__PURE__*/React.createElement(MessageOpenGraph, {
+      variant: variant,
+      ogMetaData: props.message.ogMetaData,
+      onLongPress: props.onLongPress,
+      onPressURL: props.onPressURL
+    }), props.children);
+  }));
+};
+const styles = createStyleSheet({
+  container: {
+    borderRadius: 16,
+    overflow: 'hidden'
+  }
+});
+export default OpenGraphUserMessage;
+//# sourceMappingURL=Message.user.og.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","PressBox","createStyleSheet","useUIKitTheme","MessageBubbleWithText","MessageContainer","MessageOpenGraph","OpenGraphUserMessage","props","variant","palette","select","colors","color","ui","groupChannelMessage","containerBackgroundColor","dark","background400","light","background100","createElement","onPress","onLongPress","_ref","pressed","backgroundColor","style","styles","container","_extends","background","enabled","message","ogMetaData","onPressURL","children","borderRadius","overflow"],"sources":["Message.user.og.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { SendbirdUserMessage } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport PressBox from '../../components/PressBox';\nimport type { RegexTextPattern } from '../../components/RegexText';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport MessageBubbleWithText from './MessageBubbleWithText';\nimport MessageContainer from './MessageContainer';\nimport MessageOpenGraph from './MessageOpenGraph';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<\n  SendbirdUserMessage,\n  {\n    regexTextPatterns?: RegexTextPattern[];\n    renderRegexTextChildren?: (message: SendbirdUserMessage) => string;\n  }\n>;\n\nconst OpenGraphUserMessage = (props: Props) => {\n  const { variant = 'incoming' } = props;\n\n  const { palette, select, colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant];\n  const containerBackgroundColor = select({ dark: palette.background400, light: palette.background100 });\n\n  return (\n    <MessageContainer {...props}>\n      <PressBox onPress={props.onPress} onLongPress={props.onLongPress}>\n        {({ pressed }) => (\n          <Box backgroundColor={containerBackgroundColor} style={styles.container}>\n            <MessageBubbleWithText\n              backgroundColor={pressed ? color.pressed.background : color.enabled.background}\n              {...props}\n            />\n            {props.message.ogMetaData && (\n              <MessageOpenGraph\n                variant={variant}\n                ogMetaData={props.message.ogMetaData}\n                onLongPress={props.onLongPress}\n                onPressURL={props.onPressURL}\n              />\n            )}\n            {props.children}\n          </Box>\n        )}\n      </PressBox>\n    </MessageContainer>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,QAAQ,MAAM,2BAA2B;AAEhD,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,OAAOC,gBAAgB,MAAM,oBAAoB;AAWjD,MAAMC,oBAAoB,GAAIC,KAAY,IAAK;EAC7C,MAAM;IAAEC,OAAO,GAAG;EAAW,CAAC,GAAGD,KAAK;EAEtC,MAAM;IAAEE,OAAO;IAAEC,MAAM;IAAEC;EAAO,CAAC,GAAGT,aAAa,EAAE;EACnD,MAAMU,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,mBAAmB,CAACN,OAAO,CAAC;EACpD,MAAMO,wBAAwB,GAAGL,MAAM,CAAC;IAAEM,IAAI,EAAEP,OAAO,CAACQ,aAAa;IAAEC,KAAK,EAAET,OAAO,CAACU;EAAc,CAAC,CAAC;EAEtG,oBACErB,KAAA,CAAAsB,aAAA,CAAChB,gBAAgB,EAAKG,KAAK,eACzBT,KAAA,CAAAsB,aAAA,CAACpB,QAAQ;IAACqB,OAAO,EAAEd,KAAK,CAACc,OAAQ;IAACC,WAAW,EAAEf,KAAK,CAACe;EAAY,GAC9DC,IAAA;IAAA,IAAC;MAAEC;IAAQ,CAAC,GAAAD,IAAA;IAAA,oBACXzB,KAAA,CAAAsB,aAAA,CAACrB,GAAG;MAAC0B,eAAe,EAAEV,wBAAyB;MAACW,KAAK,EAAEC,MAAM,CAACC;IAAU,gBACtE9B,KAAA,CAAAsB,aAAA,CAACjB,qBAAqB,EAAA0B,QAAA;MACpBJ,eAAe,EAAED,OAAO,GAAGZ,KAAK,CAACY,OAAO,CAACM,UAAU,GAAGlB,KAAK,CAACmB,OAAO,CAACD;IAAW,GAC3EvB,KAAK,EACT,EACDA,KAAK,CAACyB,OAAO,CAACC,UAAU,iBACvBnC,KAAA,CAAAsB,aAAA,CAACf,gBAAgB;MACfG,OAAO,EAAEA,OAAQ;MACjByB,UAAU,EAAE1B,KAAK,CAACyB,OAAO,CAACC,UAAW;MACrCX,WAAW,EAAEf,KAAK,CAACe,WAAY;MAC/BY,UAAU,EAAE3B,KAAK,CAAC2B;IAAW,EAEhC,EACA3B,KAAK,CAAC4B,QAAQ,CACX;EAAA,CACP,CACQ,CACM;AAEvB,CAAC;AAED,MAAMR,MAAM,GAAG1B,gBAAgB,CAAC;EAC9B2B,SAAS,EAAE;IACTQ,YAAY,EAAE,EAAE;IAChBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,eAAe/B,oBAAoB"}

package/lib/module/ui/GroupChannelMessage/MessageBubbleWithText.js

@@ -0,0 +1,66 @@
+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 Box from '../../components/Box';
+import RegexText from '../../components/RegexText';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+const MessageBubbleWithText = _ref => {
+  let {
+    backgroundColor,
+    message,
+    onPressURL,
+    onLongPress,
+    strings,
+    variant = 'incoming',
+    regexTextPatterns = [],
+    renderRegexTextChildren = msg => msg.message
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage[variant];
+  return /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: backgroundColor,
+    style: styles.bubble
+  }, /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: color.enabled.textMsg,
+    suppressHighlighting: true
+  }, /*#__PURE__*/React.createElement(RegexText, {
+    body3: true,
+    color: color.enabled.textMsg,
+    patterns: [...regexTextPatterns, {
+      regex: urlRegexStrict,
+      replacer(_ref2) {
+        let {
+          match,
+          parentProps,
+          keyPrefix,
+          index
+        } = _ref2;
+        return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
+          key: `${keyPrefix}-${index}`,
+          onPress: () => onPressURL === null || onPressURL === void 0 ? void 0 : onPressURL(match),
+          onLongPress: onLongPress,
+          style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
+        }), match);
+      }
+    }]
+  }, renderRegexTextChildren(message)), Boolean(message.updatedAt) && /*#__PURE__*/React.createElement(Text, {
+    body3: true,
+    color: color.enabled.textEdited
+  }, (strings === null || strings === void 0 ? void 0 : strings.edited) ?? ' (edited)')));
+};
+const styles = createStyleSheet({
+  bubble: {
+    paddingHorizontal: 12,
+    paddingVertical: 6
+  },
+  urlText: {
+    textDecorationLine: 'underline'
+  }
+});
+export default MessageBubbleWithText;
+//# sourceMappingURL=MessageBubbleWithText.js.map

package/lib/module/ui/GroupChannelMessage/MessageBubbleWithText.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","urlRegexStrict","Box","RegexText","Text","createStyleSheet","useUIKitTheme","MessageBubbleWithText","_ref","backgroundColor","message","onPressURL","onLongPress","strings","variant","regexTextPatterns","renderRegexTextChildren","msg","colors","color","ui","groupChannelMessage","createElement","style","styles","bubble","body3","enabled","textMsg","suppressHighlighting","patterns","regex","replacer","_ref2","match","parentProps","keyPrefix","index","_extends","key","onPress","urlText","Boolean","updatedAt","textEdited","edited","paddingHorizontal","paddingVertical","textDecorationLine"],"sources":["MessageBubbleWithText.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdUserMessage, urlRegexStrict } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport RegexText, { RegexTextPattern } from '../../components/RegexText';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<\n  SendbirdUserMessage,\n  {\n    backgroundColor?: string;\n    regexTextPatterns?: RegexTextPattern[];\n    renderRegexTextChildren?: (message: SendbirdUserMessage) => string;\n  }\n>;\n\nconst MessageBubbleWithText = ({\n  backgroundColor,\n  message,\n  onPressURL,\n  onLongPress,\n  strings,\n  variant = 'incoming',\n  regexTextPatterns = [],\n  renderRegexTextChildren = (msg) => msg.message,\n}: Props) => {\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant];\n  return (\n    <Box backgroundColor={backgroundColor} style={styles.bubble}>\n      <Text body3 color={color.enabled.textMsg} suppressHighlighting>\n        <RegexText\n          body3\n          color={color.enabled.textMsg}\n          patterns={[\n            ...regexTextPatterns,\n            {\n              regex: urlRegexStrict,\n              replacer({ match, parentProps, keyPrefix, index }) {\n                return (\n                  <Text\n                    {...parentProps}\n                    key={`${keyPrefix}-${index}`}\n                    onPress={() => onPressURL?.(match)}\n                    onLongPress={onLongPress}\n                    style={[parentProps?.style, styles.urlText]}\n                  >\n                    {match}\n                  </Text>\n                );\n              },\n            },\n          ]}\n        >\n          {renderRegexTextChildren(message)}\n        </RegexText>\n        {Boolean(message.updatedAt) && (\n          <Text body3 color={color.enabled.textEdited}>\n            {strings?.edited ?? ' (edited)'}\n          </Text>\n        )}\n      </Text>\n    </Box>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubble: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n  urlText: {\n    textDecorationLine: 'underline',\n  },\n});\nexport default MessageBubbleWithText;\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAA8BC,cAAc,QAAQ,uBAAuB;AAE3E,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,SAAS,MAA4B,4BAA4B;AACxE,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AAYrD,MAAMC,qBAAqB,GAAGC,IAAA,IASjB;EAAA,IATkB;IAC7BC,eAAe;IACfC,OAAO;IACPC,UAAU;IACVC,WAAW;IACXC,OAAO;IACPC,OAAO,GAAG,UAAU;IACpBC,iBAAiB,GAAG,EAAE;IACtBC,uBAAuB,GAAIC,GAAG,IAAKA,GAAG,CAACP;EAClC,CAAC,GAAAF,IAAA;EACN,MAAM;IAAEU;EAAO,CAAC,GAAGZ,aAAa,EAAE;EAClC,MAAMa,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,mBAAmB,CAACP,OAAO,CAAC;EACpD,oBACEd,KAAA,CAAAsB,aAAA,CAACpB,GAAG;IAACO,eAAe,EAAEA,eAAgB;IAACc,KAAK,EAAEC,MAAM,CAACC;EAAO,gBAC1DzB,KAAA,CAAAsB,aAAA,CAAClB,IAAI;IAACsB,KAAK;IAACP,KAAK,EAAEA,KAAK,CAACQ,OAAO,CAACC,OAAQ;IAACC,oBAAoB;EAAA,gBAC5D7B,KAAA,CAAAsB,aAAA,CAACnB,SAAS;IACRuB,KAAK;IACLP,KAAK,EAAEA,KAAK,CAACQ,OAAO,CAACC,OAAQ;IAC7BE,QAAQ,EAAE,CACR,GAAGf,iBAAiB,EACpB;MACEgB,KAAK,EAAE9B,cAAc;MACrB+B,QAAQA,CAAAC,KAAA,EAA2C;QAAA,IAA1C;UAAEC,KAAK;UAAEC,WAAW;UAAEC,SAAS;UAAEC;QAAM,CAAC,GAAAJ,KAAA;QAC/C,oBACEjC,KAAA,CAAAsB,aAAA,CAAClB,IAAI,EAAAkC,QAAA,KACCH,WAAW;UACfI,GAAG,EAAG,GAAEH,SAAU,IAAGC,KAAM,EAAE;UAC7BG,OAAO,EAAEA,CAAA,KAAM7B,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAGuB,KAAK,CAAE;UACnCtB,WAAW,EAAEA,WAAY;UACzBW,KAAK,EAAE,CAACY,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEZ,KAAK,EAAEC,MAAM,CAACiB,OAAO;QAAE,IAE3CP,KAAK,CACD;MAEX;IACF,CAAC;EACD,GAEDlB,uBAAuB,CAACN,OAAO,CAAC,CACvB,EACXgC,OAAO,CAAChC,OAAO,CAACiC,SAAS,CAAC,iBACzB3C,KAAA,CAAAsB,aAAA,CAAClB,IAAI;IAACsB,KAAK;IAACP,KAAK,EAAEA,KAAK,CAACQ,OAAO,CAACiB;EAAW,GACzC,CAAA/B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEgC,MAAM,KAAI,WAAW,CAElC,CACI,CACH;AAEV,CAAC;AAED,MAAMrB,MAAM,GAAGnB,gBAAgB,CAAC;EAC9BoB,MAAM,EAAE;IACNqB,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE;EACnB,CAAC;EACDN,OAAO,EAAE;IACPO,kBAAkB,EAAE;EACtB;AACF,CAAC,CAAC;AACF,eAAezC,qBAAqB"}

package/lib/module/ui/GroupChannelMessage/MessageContainer.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import { getMessageTimeFormat } from '@sendbird/uikit-utils';
+import Box from '../../components/Box';
+import Text from '../../components/Text';
+import createStyleSheet from '../../styles/createStyleSheet';
+import useUIKitTheme from '../../theme/useUIKitTheme';
+import Avatar from '../Avatar';
+const MessageContainer = props => {
+  if (props.variant === 'incoming') {
+    return /*#__PURE__*/React.createElement(MessageContainer.Incoming, props);
+  } else {
+    return /*#__PURE__*/React.createElement(MessageContainer.Outgoing, props);
+  }
+};
+MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
+  var _message$sender;
+  let {
+    children,
+    groupedWithNext,
+    groupedWithPrev,
+    message,
+    onPressAvatar,
+    strings
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage.incoming;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-end'
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: 26,
+    marginRight: 12
+  }, (message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPressAvatar
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    size: 26,
+    uri: (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl
+  }))), /*#__PURE__*/React.createElement(Box, {
+    flexShrink: 1
+  }, !groupedWithPrev && /*#__PURE__*/React.createElement(Box, {
+    marginLeft: 12,
+    marginBottom: 4
+  }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/React.createElement(Text, {
+    caption1: true,
+    color: color.enabled.textSenderName,
+    numberOfLines: 1
+  }, (strings === null || strings === void 0 ? void 0 : strings.senderName) ?? message.sender.nickname)), /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    alignItems: 'flex-end'
+  }, /*#__PURE__*/React.createElement(Box, {
+    style: styles.bubble
+  }, children), !groupedWithNext && /*#__PURE__*/React.createElement(Box, {
+    marginLeft: 4
+  }, /*#__PURE__*/React.createElement(Text, {
+    caption4: true,
+    color: color.enabled.textTime
+  }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? getMessageTimeFormat(new Date(message.createdAt)))))));
+};
+MessageContainer.Outgoing = function MessageContainerOutgoing(_ref2) {
+  let {
+    children,
+    message,
+    groupedWithNext,
+    strings,
+    sendingStatus
+  } = _ref2;
+  const {
+    colors
+  } = useUIKitTheme();
+  const color = colors.ui.groupChannelMessage.outgoing;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-end'
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    justifyContent: 'center'
+  }, sendingStatus && /*#__PURE__*/React.createElement(Box, {
+    marginRight: 4
+  }, sendingStatus), !groupedWithNext && /*#__PURE__*/React.createElement(Box, {
+    marginRight: 4
+  }, /*#__PURE__*/React.createElement(Text, {
+    caption4: true,
+    color: color.enabled.textTime
+  }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? getMessageTimeFormat(new Date(message.createdAt))))), /*#__PURE__*/React.createElement(Box, {
+    style: styles.bubble
+  }, children));
+};
+const styles = createStyleSheet({
+  bubble: {
+    maxWidth: 240,
+    overflow: 'hidden',
+    flexShrink: 1
+  }
+});
+export default MessageContainer;
+//# sourceMappingURL=MessageContainer.js.map