@sendbird/uikit-react-native 2.2.0 → 2.4.0

package/lib/module/components/MessageRenderer/FileMessage/BaseFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Icon","Text","createStyleSheet","useUIKitTheme","useLocalization","iconMapper","audio","image","video","file","BaseFileMessage","message","variant","pressed","type","children","STRINGS","colors","color","ui","styles","bubbleContainer","backgroundColor","background","container","padding","borderRadius","marginRight","textMsg","name","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","overflow","flexDirection","alignItems","paddingHorizontal","paddingVertical","flexShrink"],"sources":["BaseFileMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = FileMessageProps & {\n  type: 'image' | 'audio' | 'video' | 'file';\n};\nconst BaseFileMessage = ({ message, variant, pressed, type, children }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  return (\n    <View style={[styles.bubbleContainer, { backgroundColor: color.background }]}>\n      <View style={styles.container}>\n        <Icon\n          icon={iconMapper[type]}\n          size={24}\n          containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n        />\n        <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>\n          {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}\n        </Text>\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default BaseFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,aAAvC,QAA4D,yCAA5D;AAEA,SAASC,eAAT,QAAgC,2BAAhC;AAGA,MAAMC,UAAU,GAAG;EAAEC,KAAK,EAAE,YAAT;EAAuBC,KAAK,EAAE,OAA9B;EAAuCC,KAAK,EAAE,MAA9C;EAAsDC,IAAI,EAAE;AAA5D,CAAnB;;AAKA,MAAMC,eAAe,GAAG,QAA0D;EAAA,IAAzD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC,OAApB;IAA6BC,IAA7B;IAAmCC;EAAnC,CAAyD;EAChF,MAAM;IAAEC;EAAF,IAAcZ,eAAe,EAAnC;EACA,MAAM;IAAEa;EAAF,IAAad,aAAa,EAAhC;EACA,MAAMe,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUR,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACO,MAAM,CAACC,eAAR,EAAyB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAzB;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAEH,MAAM,CAACI;EAApB,gBACE,oBAAC,IAAD;IACE,IAAI,EAAEnB,UAAU,CAACS,IAAD,CADlB;IAEE,IAAI,EAAE,EAFR;IAGE,cAAc,EAAE;MAAEQ,eAAe,EAAEL,MAAM,CAACM,UAA1B;MAAsCE,OAAO,EAAE,CAA/C;MAAkDC,YAAY,EAAE,CAAhE;MAAmEC,WAAW,EAAE;IAAhF;EAHlB,EADF,eAME,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,QAA3B;IAAqC,aAAa,EAAE,CAApD;IAAuD,KAAK,EAAET,KAAK,CAACU,OAApE;IAA6E,KAAK,EAAER,MAAM,CAACS;EAA3F,GACGb,OAAO,CAACc,aAAR,CAAsBC,yBAAtB,CAAgDpB,OAAhD,CADH,CANF,CADF,EAWGI,QAXH,CADF;AAeD,CAnBD;;AAqBA,MAAMK,MAAM,GAAGlB,gBAAgB,CAAC;EAC9BmB,eAAe,EAAE;IACfK,YAAY,EAAE,EADC;IAEfM,QAAQ,EAAE;EAFK,CADa;EAK9BR,SAAS,EAAE;IACTS,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,iBAAiB,EAAE,EAHV;IAITC,eAAe,EAAE;EAJR,CALmB;EAW9BP,IAAI,EAAE;IACJQ,UAAU,EAAE;EADR;AAXwB,CAAD,CAA/B;AAgBA,eAAe3B,eAAf"}
+{"version":3,"names":["React","View","Icon","Text","createStyleSheet","useUIKitTheme","useLocalization","iconMapper","audio","image","video","file","BaseFileMessage","message","variant","pressed","type","children","STRINGS","colors","color","ui","groupChannelMessage","styles","bubbleContainer","backgroundColor","background","container","padding","borderRadius","marginRight","textMsg","name","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","overflow","flexDirection","alignItems","paddingHorizontal","paddingVertical","flexShrink"],"sources":["BaseFileMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = FileMessageProps & {\n  type: 'image' | 'audio' | 'video' | 'file';\n};\nconst BaseFileMessage = ({ message, variant, pressed, type, children }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];\n  return (\n    <View style={[styles.bubbleContainer, { backgroundColor: color.background }]}>\n      <View style={styles.container}>\n        <Icon\n          icon={iconMapper[type]}\n          size={24}\n          containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n        />\n        <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>\n          {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}\n        </Text>\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default BaseFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,aAAvC,QAA4D,yCAA5D;AAEA,SAASC,eAAT,QAAgC,2BAAhC;AAGA,MAAMC,UAAU,GAAG;EAAEC,KAAK,EAAE,YAAT;EAAuBC,KAAK,EAAE,OAA9B;EAAuCC,KAAK,EAAE,MAA9C;EAAsDC,IAAI,EAAE;AAA5D,CAAnB;;AAKA,MAAMC,eAAe,GAAG,QAA0D;EAAA,IAAzD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC,OAApB;IAA6BC,IAA7B;IAAmCC;EAAnC,CAAyD;EAChF,MAAM;IAAEC;EAAF,IAAcZ,eAAe,EAAnC;EACA,MAAM;IAAEa;EAAF,IAAad,aAAa,EAAhC;EACA,MAAMe,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUC,mBAAV,CAA8BR,OAA9B,EAAuCC,OAAO,GAAG,SAAH,GAAe,SAA7D,CAAd;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACQ,MAAM,CAACC,eAAR,EAAyB;MAAEC,eAAe,EAAEL,KAAK,CAACM;IAAzB,CAAzB;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAEH,MAAM,CAACI;EAApB,gBACE,oBAAC,IAAD;IACE,IAAI,EAAEpB,UAAU,CAACS,IAAD,CADlB;IAEE,IAAI,EAAE,EAFR;IAGE,cAAc,EAAE;MAAES,eAAe,EAAEN,MAAM,CAACO,UAA1B;MAAsCE,OAAO,EAAE,CAA/C;MAAkDC,YAAY,EAAE,CAAhE;MAAmEC,WAAW,EAAE;IAAhF;EAHlB,EADF,eAME,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,QAA3B;IAAqC,aAAa,EAAE,CAApD;IAAuD,KAAK,EAAEV,KAAK,CAACW,OAApE;IAA6E,KAAK,EAAER,MAAM,CAACS;EAA3F,GACGd,OAAO,CAACe,aAAR,CAAsBC,yBAAtB,CAAgDrB,OAAhD,CADH,CANF,CADF,EAWGI,QAXH,CADF;AAeD,CAnBD;;AAqBA,MAAMM,MAAM,GAAGnB,gBAAgB,CAAC;EAC9BoB,eAAe,EAAE;IACfK,YAAY,EAAE,EADC;IAEfM,QAAQ,EAAE;EAFK,CADa;EAK9BR,SAAS,EAAE;IACTS,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,iBAAiB,EAAE,EAHV;IAITC,eAAe,EAAE;EAJR,CALmB;EAW9BP,IAAI,EAAE;IACJQ,UAAU,EAAE;EADR;AAXwB,CAAD,CAA/B;AAgBA,eAAe5B,eAAf"}

package/lib/module/components/MessageRenderer/FileMessage/ImageFileMessage.js

@@ -46,7 +46,7 @@ const ImageFileMessage = _ref => {
   const key = useRetry(imageNotFound);
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.bubbleContainer, {
-      backgroundColor: colors.ui.message[variant].enabled.background
+      backgroundColor: imageNotFound ? colors.onBackground04 : colors.ui.groupChannelMessage[variant].enabled.background
     }]
   }, /*#__PURE__*/React.createElement(View, {
     style: style

package/lib/module/components/MessageRenderer/FileMessage/ImageFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","Platform","StyleSheet","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","useForceUpdate","useRetry","hasError","retryCount","OS","forceUpdate","retryCountRef","retryTimeoutRef","reloadReservation","current","setTimeout","clearTimeout","ImageFileMessage","message","children","variant","colors","imageNotFound","setImageNotFound","fileUrl","style","styles","image","backgroundColor","onBackground04","key","bubbleContainer","ui","enabled","background","uri","absoluteFill","hide","onBackground02","borderRadius","overflow","width","maxWidth","height","display"],"sources":["ImageFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleSheet, View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage, useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n  if (Platform.OS === 'android') return '';\n\n  const forceUpdate = useForceUpdate();\n  const retryCountRef = useRef(1);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (hasError) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            forceUpdate();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [hasError]);\n\n  return retryCountRef.current;\n};\n\nconst ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const key = useRetry(imageNotFound);\n\n  return (\n    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>\n      <View style={style}>\n        <Image\n          key={key}\n          source={{ uri: fileUrl }}\n          style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n          resizeMode={'cover'}\n          resizeMethod={'resize'}\n          onError={() => setImageNotFound(true)}\n          onLoad={() => setImageNotFound(false)}\n        />\n        {imageNotFound && (\n          <Icon\n            containerStyle={StyleSheet.absoluteFill}\n            icon={'thumbnail-none'}\n            size={48}\n            color={colors.onBackground02}\n          />\n        )}\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","useState","Platform","StyleSheet","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","useForceUpdate","useRetry","hasError","retryCount","OS","forceUpdate","retryCountRef","retryTimeoutRef","reloadReservation","current","setTimeout","clearTimeout","ImageFileMessage","message","children","variant","colors","imageNotFound","setImageNotFound","fileUrl","style","styles","image","backgroundColor","onBackground04","key","bubbleContainer","ui","groupChannelMessage","enabled","background","uri","absoluteFill","hide","onBackground02","borderRadius","overflow","width","maxWidth","height","display"],"sources":["ImageFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { Platform, StyleSheet, View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage, useForceUpdate } from '@sendbird/uikit-utils';\n\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (hasError: boolean, retryCount = 5) => {\n  if (Platform.OS === 'android') return '';\n\n  const forceUpdate = useForceUpdate();\n  const retryCountRef = useRef(1);\n  const retryTimeoutRef = useRef<NodeJS.Timeout>();\n\n  useEffect(() => {\n    if (hasError) {\n      const reloadReservation = () => {\n        if (retryCountRef.current < retryCount) {\n          retryTimeoutRef.current = setTimeout(() => {\n            retryCountRef.current++;\n            reloadReservation();\n            forceUpdate();\n          }, retryCountRef.current * 5000);\n        }\n      };\n\n      return reloadReservation();\n    } else {\n      return clearTimeout(retryTimeoutRef.current);\n    }\n  }, [hasError]);\n\n  return retryCountRef.current;\n};\n\nconst ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const key = useRetry(imageNotFound);\n\n  return (\n    <View\n      style={[\n        styles.bubbleContainer,\n        {\n          backgroundColor: imageNotFound\n            ? colors.onBackground04\n            : colors.ui.groupChannelMessage[variant].enabled.background,\n        },\n      ]}\n    >\n      <View style={style}>\n        <Image\n          key={key}\n          source={{ uri: fileUrl }}\n          style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}\n          resizeMode={'cover'}\n          resizeMethod={'resize'}\n          onError={() => setImageNotFound(true)}\n          onLoad={() => setImageNotFound(false)}\n        />\n        {imageNotFound && (\n          <Icon\n            containerStyle={StyleSheet.absoluteFill}\n            icon={'thumbnail-none'}\n            size={48}\n            color={colors.onBackground02}\n          />\n        )}\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  hide: {\n    display: 'none',\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAASC,QAAT,EAAmBC,UAAnB,EAA+BC,IAA/B,QAA2C,cAA3C;AAEA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,gBAAtB,EAAwCC,aAAxC,QAA6D,yCAA7D;AACA,SAASC,8BAAT,EAAyCC,cAAzC,QAA+D,uBAA/D;;AAIA,MAAMC,QAAQ,GAAG,UAACC,QAAD,EAAuC;EAAA,IAAnBC,UAAmB,uEAAN,CAAM;EACtD,IAAIX,QAAQ,CAACY,EAAT,KAAgB,SAApB,EAA+B,OAAO,EAAP;EAE/B,MAAMC,WAAW,GAAGL,cAAc,EAAlC;EACA,MAAMM,aAAa,GAAGhB,MAAM,CAAC,CAAD,CAA5B;EACA,MAAMiB,eAAe,GAAGjB,MAAM,EAA9B;EAEAD,SAAS,CAAC,MAAM;IACd,IAAIa,QAAJ,EAAc;MACZ,MAAMM,iBAAiB,GAAG,MAAM;QAC9B,IAAIF,aAAa,CAACG,OAAd,GAAwBN,UAA5B,EAAwC;UACtCI,eAAe,CAACE,OAAhB,GAA0BC,UAAU,CAAC,MAAM;YACzCJ,aAAa,CAACG,OAAd;YACAD,iBAAiB;YACjBH,WAAW;UACZ,CAJmC,EAIjCC,aAAa,CAACG,OAAd,GAAwB,IAJS,CAApC;QAKD;MACF,CARD;;MAUA,OAAOD,iBAAiB,EAAxB;IACD,CAZD,MAYO;MACL,OAAOG,YAAY,CAACJ,eAAe,CAACE,OAAjB,CAAnB;IACD;EACF,CAhBQ,EAgBN,CAACP,QAAD,CAhBM,CAAT;EAkBA,OAAOI,aAAa,CAACG,OAArB;AACD,CA1BD;;AA4BA,MAAMG,gBAAgB,GAAG,QAAsD;EAAA,IAArD;IAAEC,OAAF;IAAWC,QAAX;IAAqBC;EAArB,CAAqD;EAC7E,MAAM;IAAEC;EAAF,IAAalB,aAAa,EAAhC;EACA,MAAM,CAACmB,aAAD,EAAgBC,gBAAhB,IAAoC3B,QAAQ,CAAC,KAAD,CAAlD;EAEA,MAAM4B,OAAO,GAAGpB,8BAA8B,CAACc,OAAD,CAA9C;EACA,MAAMO,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEP,MAAM,CAACQ;EAA1B,CAAf,CAAd;EAEA,MAAMC,GAAG,GAAGxB,QAAQ,CAACgB,aAAD,CAApB;EAEA,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLI,MAAM,CAACK,eADF,EAEL;MACEH,eAAe,EAAEN,aAAa,GAC1BD,MAAM,CAACQ,cADmB,GAE1BR,MAAM,CAACW,EAAP,CAAUC,mBAAV,CAA8Bb,OAA9B,EAAuCc,OAAvC,CAA+CC;IAHrD,CAFK;EADT,gBAUE,oBAAC,IAAD;IAAM,KAAK,EAAEV;EAAb,gBACE,oBAAC,KAAD;IACE,GAAG,EAAEK,GADP;IAEE,MAAM,EAAE;MAAEM,GAAG,EAAEZ;IAAP,CAFV;IAGE,KAAK,EAAE,CAAC1B,UAAU,CAACuC,YAAZ,EAA0Bf,aAAa,IAAII,MAAM,CAACY,IAAlD,CAHT;IAIE,UAAU,EAAE,OAJd;IAKE,YAAY,EAAE,QALhB;IAME,OAAO,EAAE,MAAMf,gBAAgB,CAAC,IAAD,CANjC;IAOE,MAAM,EAAE,MAAMA,gBAAgB,CAAC,KAAD;EAPhC,EADF,EAUGD,aAAa,iBACZ,oBAAC,IAAD;IACE,cAAc,EAAExB,UAAU,CAACuC,YAD7B;IAEE,IAAI,EAAE,gBAFR;IAGE,IAAI,EAAE,EAHR;IAIE,KAAK,EAAEhB,MAAM,CAACkB;EAJhB,EAXJ,CAVF,EA6BGpB,QA7BH,CADF;AAiCD,CA1CD;;AA4CA,MAAMO,MAAM,GAAGxB,gBAAgB,CAAC;EAC9B6B,eAAe,EAAE;IACfS,YAAY,EAAE,EADC;IAEfC,QAAQ,EAAE;EAFK,CADa;EAK9Bd,KAAK,EAAE;IACLe,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILJ,YAAY,EAAE,EAJT;IAKLC,QAAQ,EAAE;EALL,CALuB;EAY9BH,IAAI,EAAE;IACJO,OAAO,EAAE;EADL;AAZwB,CAAD,CAA/B;AAiBA,eAAe5B,gBAAf"}

package/lib/module/components/MessageRenderer/FileMessage/VideoFileMessage.js

@@ -17,7 +17,7 @@ const useRetry = function (videoFileUrl) {
   } = usePlatformService();
 
   const fetchThumbnail = () => {
-    return mediaService === null || mediaService === void 0 ? void 0 : mediaService.getVideoThumbnail({
+    return mediaService.getVideoThumbnail({
       url: videoFileUrl,
       timeMills: 1000
     }).then(result => {
@@ -69,7 +69,7 @@ const VideoFileMessage = _ref => {
   if (loading) {
     return /*#__PURE__*/React.createElement(View, {
       style: [styles.bubbleContainer, {
-        backgroundColor: colors.ui.message[variant].enabled.background
+        backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background
       }]
     }, /*#__PURE__*/React.createElement(View, {
       style: [styles.bubbleContainer, styles.bubbleInnerContainer]
@@ -80,7 +80,7 @@ const VideoFileMessage = _ref => {
 
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.bubbleContainer, {
-      backgroundColor: colors.ui.message[variant].enabled.background
+      backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background
     }]
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.bubbleContainer, styles.bubbleInnerContainer]

package/lib/module/components/MessageRenderer/FileMessage/VideoFileMessage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useRef","useState","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","usePlatformService","useRetry","videoFileUrl","retryCount","state","setState","thumbnail","loading","retryCountRef","retryTimeoutRef","mediaService","fetchThumbnail","getVideoThumbnail","url","timeMills","then","result","path","reloadReservation","current","setTimeout","clearTimeout","VideoFileMessage","message","variant","children","colors","fileUrl","style","styles","video","backgroundColor","onBackground04","bubbleContainer","ui","enabled","background","bubbleInnerContainer","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","borderRadius","overflow","alignItems","justifyContent","width","maxWidth","height","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (videoFileUrl: string, 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\n  const { mediaService } = usePlatformService();\n\n  const fetchThumbnail = () => {\n    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {\n      setState({ loading: false, thumbnail: result?.path ?? null });\n    });\n  };\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();\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};\n\nconst VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.video, { backgroundColor: colors.onBackground04 }];\n\n  const { loading, thumbnail } = useRetry(fileUrl);\n\n  if (loading) {\n    return (\n      <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>\n        <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>\n          <View style={style} />\n          <PlayIcon />\n        </View>\n        {children}\n      </View>\n    );\n  }\n\n  return (\n    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>\n      <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>\n        <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />\n        <PlayIcon />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst PlayIcon = () => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Icon\n      icon={'play'}\n      size={28}\n      color={colors.onBackground02}\n      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  bubbleInnerContainer: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  video: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n  },\n  playIcon: {\n    position: 'absolute',\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n\nexport default VideoFileMessage;\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","useRef","useState","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","usePlatformService","useRetry","videoFileUrl","retryCount","state","setState","thumbnail","loading","retryCountRef","retryTimeoutRef","mediaService","fetchThumbnail","getVideoThumbnail","url","timeMills","then","result","path","reloadReservation","current","setTimeout","clearTimeout","VideoFileMessage","message","variant","children","colors","fileUrl","style","styles","video","backgroundColor","onBackground04","bubbleContainer","ui","groupChannelMessage","enabled","background","bubbleInnerContainer","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","borderRadius","overflow","alignItems","justifyContent","width","maxWidth","height","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst useRetry = (videoFileUrl: string, 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\n  const { mediaService } = usePlatformService();\n\n  const fetchThumbnail = () => {\n    return mediaService.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {\n      setState({ loading: false, thumbnail: result?.path ?? null });\n    });\n  };\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();\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};\n\nconst VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.video, { backgroundColor: colors.onBackground04 }];\n\n  const { loading, thumbnail } = useRetry(fileUrl);\n\n  if (loading) {\n    return (\n      <View\n        style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}\n      >\n        <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>\n          <View style={style} />\n          <PlayIcon />\n        </View>\n        {children}\n      </View>\n    );\n  }\n\n  return (\n    <View\n      style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}\n    >\n      <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>\n        <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />\n        <PlayIcon />\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst PlayIcon = () => {\n  const { colors } = useUIKitTheme();\n\n  return (\n    <Icon\n      icon={'play'}\n      size={28}\n      color={colors.onBackground02}\n      containerStyle={[styles.playIcon, { backgroundColor: colors.onBackgroundReverse01 }]}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  bubbleInnerContainer: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  video: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n  },\n  playIcon: {\n    position: 'absolute',\n    padding: 10,\n    borderRadius: 50,\n  },\n});\n\nexport default VideoFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,EAA2BC,MAA3B,EAAmCC,QAAnC,QAAmD,OAAnD;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,gBAAtB,EAAwCC,aAAxC,QAA6D,yCAA7D;AACA,SAASC,8BAAT,QAA+C,uBAA/C;AAEA,SAASC,kBAAT,QAAmC,2BAAnC;;AAGA,MAAMC,QAAQ,GAAG,UAACC,YAAD,EAA0C;EAAA,IAAnBC,UAAmB,uEAAN,CAAM;EACzD,MAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBZ,QAAQ,CAAC;IAAEa,SAAS,EAAE,IAAb;IAAoCC,OAAO,EAAE;EAA7C,CAAD,CAAlC;EACA,MAAMC,aAAa,GAAGhB,MAAM,CAAC,CAAD,CAA5B;EACA,MAAMiB,eAAe,GAAGjB,MAAM,EAA9B;EAEA,MAAM;IAAEkB;EAAF,IAAmBV,kBAAkB,EAA3C;;EAEA,MAAMW,cAAc,GAAG,MAAM;IAC3B,OAAOD,YAAY,CAACE,iBAAb,CAA+B;MAAEC,GAAG,EAAEX,YAAP;MAAqBY,SAAS,EAAE;IAAhC,CAA/B,EAAuEC,IAAvE,CAA6EC,MAAD,IAAY;MAC7FX,QAAQ,CAAC;QAAEE,OAAO,EAAE,KAAX;QAAkBD,SAAS,EAAE,CAAAU,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAEC,IAAR,KAAgB;MAA7C,CAAD,CAAR;IACD,CAFM,CAAP;EAGD,CAJD;;EAMA1B,SAAS,CAAC,MAAM;IACd,IAAI,CAACa,KAAK,CAACE,SAAX,EAAsB;MACpB,MAAMY,iBAAiB,GAAG,MAAM;QAC9B,IAAIV,aAAa,CAACW,OAAd,GAAwBhB,UAA5B,EAAwC;UACtCM,eAAe,CAACU,OAAhB,GAA0BC,UAAU,CAAC,MAAM;YACzCZ,aAAa,CAACW,OAAd;YACAD,iBAAiB;YACjBP,cAAc;UACf,CAJmC,EAIjCH,aAAa,CAACW,OAAd,GAAwB,IAJS,CAApC;QAKD;MACF,CARD;;MAUA,OAAOD,iBAAiB,EAAxB;IACD,CAZD,MAYO;MACL,OAAOG,YAAY,CAACZ,eAAe,CAACU,OAAjB,CAAnB;IACD;EACF,CAhBQ,EAgBN,CAACf,KAAK,CAACE,SAAP,CAhBM,CAAT;EAkBA,OAAOF,KAAP;AACD,CAhCD;;AAkCA,MAAMkB,gBAAgB,GAAG,QAAsD;EAAA,IAArD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC;EAApB,CAAqD;EAC7E,MAAM;IAAEC;EAAF,IAAa5B,aAAa,EAAhC;EAEA,MAAM6B,OAAO,GAAG5B,8BAA8B,CAACwB,OAAD,CAA9C;EACA,MAAMK,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEL,MAAM,CAACM;EAA1B,CAAf,CAAd;EAEA,MAAM;IAAEzB,OAAF;IAAWD;EAAX,IAAyBL,QAAQ,CAAC0B,OAAD,CAAvC;;EAEA,IAAIpB,OAAJ,EAAa;IACX,oBACE,oBAAC,IAAD;MACE,KAAK,EAAE,CAACsB,MAAM,CAACI,eAAR,EAAyB;QAAEF,eAAe,EAAEL,MAAM,CAACQ,EAAP,CAAUC,mBAAV,CAA8BX,OAA9B,EAAuCY,OAAvC,CAA+CC;MAAlE,CAAzB;IADT,gBAGE,oBAAC,IAAD;MAAM,KAAK,EAAE,CAACR,MAAM,CAACI,eAAR,EAAyBJ,MAAM,CAACS,oBAAhC;IAAb,gBACE,oBAAC,IAAD;MAAM,KAAK,EAAEV;IAAb,EADF,eAEE,oBAAC,QAAD,OAFF,CAHF,EAOGH,QAPH,CADF;EAWD;;EAED,oBACE,oBAAC,IAAD;IACE,KAAK,EAAE,CAACI,MAAM,CAACI,eAAR,EAAyB;MAAEF,eAAe,EAAEL,MAAM,CAACQ,EAAP,CAAUC,mBAAV,CAA8BX,OAA9B,EAAuCY,OAAvC,CAA+CC;IAAlE,CAAzB;EADT,gBAGE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACR,MAAM,CAACI,eAAR,EAAyBJ,MAAM,CAACS,oBAAhC;EAAb,gBACE,oBAAC,KAAD;IAAO,MAAM,EAAE;MAAEC,GAAG,EAAEjC,SAAS,IAAIqB;IAApB,CAAf;IAA8C,KAAK,EAAEC,KAArD;IAA4D,UAAU,EAAE,OAAxE;IAAiF,YAAY,EAAE;EAA/F,EADF,eAEE,oBAAC,QAAD,OAFF,CAHF,EAOGH,QAPH,CADF;AAWD,CAjCD;;AAmCA,MAAMe,QAAQ,GAAG,MAAM;EACrB,MAAM;IAAEd;EAAF,IAAa5B,aAAa,EAAhC;EAEA,oBACE,oBAAC,IAAD;IACE,IAAI,EAAE,MADR;IAEE,IAAI,EAAE,EAFR;IAGE,KAAK,EAAE4B,MAAM,CAACe,cAHhB;IAIE,cAAc,EAAE,CAACZ,MAAM,CAACa,QAAR,EAAkB;MAAEX,eAAe,EAAEL,MAAM,CAACiB;IAA1B,CAAlB;EAJlB,EADF;AAQD,CAXD;;AAaA,MAAMd,MAAM,GAAGhC,gBAAgB,CAAC;EAC9BoC,eAAe,EAAE;IACfW,YAAY,EAAE,EADC;IAEfC,QAAQ,EAAE;EAFK,CADa;EAK9BP,oBAAoB,EAAE;IACpBQ,UAAU,EAAE,QADQ;IAEpBC,cAAc,EAAE;EAFI,CALQ;EAS9BjB,KAAK,EAAE;IACLkB,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE;EAHH,CATuB;EAc9BR,QAAQ,EAAE;IACRS,QAAQ,EAAE,UADF;IAERC,OAAO,EAAE,EAFD;IAGRR,YAAY,EAAE;EAHN;AAdoB,CAAD,CAA/B;AAqBA,eAAetB,gBAAf"}

package/lib/module/components/MessageRenderer/FileMessage/index.js

@@ -2,18 +2,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import React from 'react';
 import { getFileExtension, getFileType } from '@sendbird/uikit-utils';
-import { usePlatformService } from '../../../hooks/useContext';
 import BaseFileMessage from './BaseFileMessage';
 import ImageFileMessage from './ImageFileMessage';
 import VideoFileMessage from './VideoFileMessage';
 
 const FileMessage = props => {
-  const {
-    mediaService
-  } = usePlatformService();
   const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
   if (fileType === 'image') return /*#__PURE__*/React.createElement(ImageFileMessage, props);
-  if (fileType === 'video' && mediaService !== null && mediaService !== void 0 && mediaService.getVideoThumbnail) return /*#__PURE__*/React.createElement(VideoFileMessage, props);
+  if (fileType === 'video') return /*#__PURE__*/React.createElement(VideoFileMessage, props);
   return /*#__PURE__*/React.createElement(BaseFileMessage, _extends({}, props, {
     type: fileType
   }));

package/lib/module/components/MessageRenderer/FileMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getFileExtension","getFileType","usePlatformService","BaseFileMessage","ImageFileMessage","VideoFileMessage","FileMessage","props","mediaService","fileType","message","type","name","getVideoThumbnail","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';\n\nimport { usePlatformService } from '../../../hooks/useContext';\nimport type { MessageRendererInterface } from '../index';\nimport BaseFileMessage from './BaseFileMessage';\nimport ImageFileMessage from './ImageFileMessage';\nimport VideoFileMessage from './VideoFileMessage';\n\nexport type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;\nconst FileMessage = (props: FileMessageProps) => {\n  const { mediaService } = usePlatformService();\n\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n\n  if (fileType === 'image') return <ImageFileMessage {...props} />;\n  if (fileType === 'video' && mediaService?.getVideoThumbnail) return <VideoFileMessage {...props} />;\n\n  return <BaseFileMessage {...props} type={fileType} />;\n};\n\nexport default React.memo(FileMessage);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAA8BC,gBAA9B,EAAgDC,WAAhD,QAAmE,uBAAnE;AAEA,SAASC,kBAAT,QAAmC,2BAAnC;AAEA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAGA,MAAMC,WAAW,GAAIC,KAAD,IAA6B;EAC/C,MAAM;IAAEC;EAAF,IAAmBN,kBAAkB,EAA3C;EAEA,MAAMO,QAAQ,GAAGR,WAAW,CAACM,KAAK,CAACG,OAAN,CAAcC,IAAd,IAAsBX,gBAAgB,CAACO,KAAK,CAACG,OAAN,CAAcE,IAAf,CAAvC,CAA5B;EAEA,IAAIH,QAAQ,KAAK,OAAjB,EAA0B,oBAAO,oBAAC,gBAAD,EAAsBF,KAAtB,CAAP;EAC1B,IAAIE,QAAQ,KAAK,OAAb,IAAwBD,YAAxB,aAAwBA,YAAxB,eAAwBA,YAAY,CAAEK,iBAA1C,EAA6D,oBAAO,oBAAC,gBAAD,EAAsBN,KAAtB,CAAP;EAE7D,oBAAO,oBAAC,eAAD,eAAqBA,KAArB;IAA4B,IAAI,EAAEE;EAAlC,GAAP;AACD,CATD;;AAWA,4BAAeV,KAAK,CAACe,IAAN,CAAWR,WAAX,CAAf"}
+{"version":3,"names":["React","getFileExtension","getFileType","BaseFileMessage","ImageFileMessage","VideoFileMessage","FileMessage","props","fileType","message","type","name","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\nimport BaseFileMessage from './BaseFileMessage';\nimport ImageFileMessage from './ImageFileMessage';\nimport VideoFileMessage from './VideoFileMessage';\n\nexport type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;\nconst FileMessage = (props: FileMessageProps) => {\n  const fileType = getFileType(props.message.type || getFileExtension(props.message.name));\n\n  if (fileType === 'image') return <ImageFileMessage {...props} />;\n  if (fileType === 'video') return <VideoFileMessage {...props} />;\n\n  return <BaseFileMessage {...props} type={fileType} />;\n};\n\nexport default React.memo(FileMessage);\n"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAA8BC,gBAA9B,EAAgDC,WAAhD,QAAmE,uBAAnE;AAGA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;;AAGA,MAAMC,WAAW,GAAIC,KAAD,IAA6B;EAC/C,MAAMC,QAAQ,GAAGN,WAAW,CAACK,KAAK,CAACE,OAAN,CAAcC,IAAd,IAAsBT,gBAAgB,CAACM,KAAK,CAACE,OAAN,CAAcE,IAAf,CAAvC,CAA5B;EAEA,IAAIH,QAAQ,KAAK,OAAjB,EAA0B,oBAAO,oBAAC,gBAAD,EAAsBD,KAAtB,CAAP;EAC1B,IAAIC,QAAQ,KAAK,OAAjB,EAA0B,oBAAO,oBAAC,gBAAD,EAAsBD,KAAtB,CAAP;EAE1B,oBAAO,oBAAC,eAAD,eAAqBA,KAArB;IAA4B,IAAI,EAAEC;EAAlC,GAAP;AACD,CAPD;;AASA,4BAAeR,KAAK,CAACY,IAAN,CAAWN,WAAX,CAAf"}

package/lib/module/components/MessageRenderer/MessageDateSeparator.js.map

@@ -1 +1 @@
-{"version":3,"names":["isSameDay","React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","MessageDateSeparator","message","prevMessage","STRINGS","colors","sameDay","createdAt","styles","container","view","backgroundColor","ui","dateSeparator","default","none","background","text","GROUP_CHANNEL","LIST_DATE_SEPARATOR","Date","alignItems","marginVertical","borderRadius","paddingVertical","paddingHorizontal"],"sources":["MessageDateSeparator.tsx"],"sourcesContent":["import isSameDay from 'date-fns/isSameDay';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  prevMessage?: SendbirdMessage;\n};\n\nconst MessageDateSeparator = ({ message, prevMessage }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);\n  if (sameDay) return null;\n  return (\n    <View style={styles.container}>\n      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>\n        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>\n          {STRINGS.GROUP_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    marginVertical: 16,\n  },\n  view: {\n    borderRadius: 10,\n    paddingVertical: 4,\n    paddingHorizontal: 10,\n  },\n});\n\nexport default MessageDateSeparator;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,oBAAtB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAOA,MAAMC,oBAAoB,GAAG,QAAqC;EAAA,IAApC;IAAEC,OAAF;IAAWC;EAAX,CAAoC;EAChE,MAAM;IAAEC;EAAF,IAAcJ,eAAe,EAAnC;EACA,MAAM;IAAEK;EAAF,IAAaN,aAAa,EAAhC;EACA,MAAMO,OAAO,GAAGZ,SAAS,CAACQ,OAAO,CAACK,SAAT,EAAoB,CAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEI,SAAb,KAA0B,CAA9C,CAAzB;EACA,IAAID,OAAJ,EAAa,OAAO,IAAP;EACb,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEE,MAAM,CAACC;EAApB,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACD,MAAM,CAACE,IAAR,EAAc;MAAEC,eAAe,EAAEN,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCC;IAAxD,CAAd;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEX,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCE;EAA3D,GACGb,OAAO,CAACc,aAAR,CAAsBC,mBAAtB,CAA0C,IAAIC,IAAJ,CAASlB,OAAO,CAACK,SAAjB,CAA1C,CADH,CADF,CADF,CADF;AASD,CAdD;;AAgBA,MAAMC,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,SAAS,EAAE;IACTY,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP,CADmB;EAK9BZ,IAAI,EAAE;IACJa,YAAY,EAAE,EADV;IAEJC,eAAe,EAAE,CAFb;IAGJC,iBAAiB,EAAE;EAHf;AALwB,CAAD,CAA/B;AAYA,eAAexB,oBAAf"}
+{"version":3,"names":["isSameDay","React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","MessageDateSeparator","message","prevMessage","STRINGS","colors","sameDay","createdAt","styles","container","view","backgroundColor","ui","dateSeparator","default","none","background","text","GROUP_CHANNEL","LIST_DATE_SEPARATOR","Date","alignItems","marginVertical","borderRadius","paddingVertical","paddingHorizontal"],"sources":["MessageDateSeparator.tsx"],"sourcesContent":["import isSameDay from 'date-fns/isSameDay';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  prevMessage?: SendbirdMessage;\n};\n\nconst MessageDateSeparator = ({ message, prevMessage }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n\n  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);\n  if (sameDay) return null;\n  return (\n    <View style={styles.container}>\n      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>\n        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>\n          {STRINGS.GROUP_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    marginVertical: 16,\n  },\n  view: {\n    borderRadius: 10,\n    paddingVertical: 4,\n    paddingHorizontal: 10,\n  },\n});\n\nexport default MessageDateSeparator;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,oBAAtB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAOA,MAAMC,oBAAoB,GAAG,QAAqC;EAAA,IAApC;IAAEC,OAAF;IAAWC;EAAX,CAAoC;EAChE,MAAM;IAAEC;EAAF,IAAcJ,eAAe,EAAnC;EACA,MAAM;IAAEK;EAAF,IAAaN,aAAa,EAAhC;EAEA,MAAMO,OAAO,GAAGZ,SAAS,CAACQ,OAAO,CAACK,SAAT,EAAoB,CAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEI,SAAb,KAA0B,CAA9C,CAAzB;EACA,IAAID,OAAJ,EAAa,OAAO,IAAP;EACb,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEE,MAAM,CAACC;EAApB,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACD,MAAM,CAACE,IAAR,EAAc;MAAEC,eAAe,EAAEN,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCC;IAAxD,CAAd;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEX,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCE;EAA3D,GACGb,OAAO,CAACc,aAAR,CAAsBC,mBAAtB,CAA0C,IAAIC,IAAJ,CAASlB,OAAO,CAACK,SAAjB,CAA1C,CADH,CADF,CADF,CADF;AASD,CAfD;;AAiBA,MAAMC,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,SAAS,EAAE;IACTY,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP,CADmB;EAK9BZ,IAAI,EAAE;IACJa,YAAY,EAAE,EADV;IAEJC,eAAe,EAAE,CAFb;IAGJC,iBAAiB,EAAE;EAHf;AALwB,CAAD,CAA/B;AAYA,eAAexB,oBAAf"}

package/lib/module/components/MessageRenderer/MessageIncomingSenderName.js

@@ -21,7 +21,7 @@ const MessageIncomingSenderName = _ref => {
     style: styles.sender
   }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/React.createElement(Text, {
     caption1: true,
-    color: colors.ui.message.incoming.enabled.textSenderName,
+    color: colors.ui.groupChannelMessage.incoming.enabled.textSenderName,
     numberOfLines: 1
   }, ((_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.nickname) || STRINGS.LABELS.USER_NO_NAME));
 };

package/lib/module/components/MessageRenderer/MessageIncomingSenderName.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","MessageIncomingSenderName","message","grouping","colors","STRINGS","styles","sender","isFileMessage","isUserMessage","ui","incoming","enabled","textSenderName","nickname","LABELS","USER_NO_NAME","marginLeft","marginBottom"],"sources":["MessageIncomingSenderName.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n};\nconst MessageIncomingSenderName = ({ message, grouping }: Props) => {\n  const { colors } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n  if (grouping) return null;\n\n  return (\n    <View style={styles.sender}>\n      {(message.isFileMessage() || message.isUserMessage()) && (\n        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName} numberOfLines={1}>\n          {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  sender: {\n    marginLeft: 12,\n    marginBottom: 4,\n  },\n});\n\nexport default MessageIncomingSenderName;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAMA,MAAMC,yBAAyB,GAAG,QAAkC;EAAA;;EAAA,IAAjC;IAAEC,OAAF;IAAWC;EAAX,CAAiC;EAClE,MAAM;IAAEC;EAAF,IAAaL,aAAa,EAAhC;EACA,MAAM;IAAEM;EAAF,IAAcL,eAAe,EAAnC;EACA,IAAIG,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,GACG,CAACL,OAAO,CAACM,aAAR,MAA2BN,OAAO,CAACO,aAAR,EAA5B,kBACC,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEL,MAAM,CAACM,EAAP,CAAUR,OAAV,CAAkBS,QAAlB,CAA2BC,OAA3B,CAAmCC,cAAzD;IAAyE,aAAa,EAAE;EAAxF,GACG,oBAAAX,OAAO,CAACK,MAAR,oEAAgBO,QAAhB,KAA4BT,OAAO,CAACU,MAAR,CAAeC,YAD9C,CAFJ,CADF;AASD,CAdD;;AAgBA,MAAMV,MAAM,GAAGR,gBAAgB,CAAC;EAC9BS,MAAM,EAAE;IACNU,UAAU,EAAE,EADN;IAENC,YAAY,EAAE;EAFR;AADsB,CAAD,CAA/B;AAOA,eAAejB,yBAAf"}
+{"version":3,"names":["React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","MessageIncomingSenderName","message","grouping","colors","STRINGS","styles","sender","isFileMessage","isUserMessage","ui","groupChannelMessage","incoming","enabled","textSenderName","nickname","LABELS","USER_NO_NAME","marginLeft","marginBottom"],"sources":["MessageIncomingSenderName.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n};\nconst MessageIncomingSenderName = ({ message, grouping }: Props) => {\n  const { colors } = useUIKitTheme();\n  const { STRINGS } = useLocalization();\n  if (grouping) return null;\n\n  return (\n    <View style={styles.sender}>\n      {(message.isFileMessage() || message.isUserMessage()) && (\n        <Text caption1 color={colors.ui.groupChannelMessage.incoming.enabled.textSenderName} numberOfLines={1}>\n          {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  sender: {\n    marginLeft: 12,\n    marginBottom: 4,\n  },\n});\n\nexport default MessageIncomingSenderName;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAMA,MAAMC,yBAAyB,GAAG,QAAkC;EAAA;;EAAA,IAAjC;IAAEC,OAAF;IAAWC;EAAX,CAAiC;EAClE,MAAM;IAAEC;EAAF,IAAaL,aAAa,EAAhC;EACA,MAAM;IAAEM;EAAF,IAAcL,eAAe,EAAnC;EACA,IAAIG,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEG,MAAM,CAACC;EAApB,GACG,CAACL,OAAO,CAACM,aAAR,MAA2BN,OAAO,CAACO,aAAR,EAA5B,kBACC,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEL,MAAM,CAACM,EAAP,CAAUC,mBAAV,CAA8BC,QAA9B,CAAuCC,OAAvC,CAA+CC,cAArE;IAAqF,aAAa,EAAE;EAApG,GACG,oBAAAZ,OAAO,CAACK,MAAR,oEAAgBQ,QAAhB,KAA4BV,OAAO,CAACW,MAAR,CAAeC,YAD9C,CAFJ,CADF;AASD,CAdD;;AAgBA,MAAMX,MAAM,GAAGR,gBAAgB,CAAC;EAC9BS,MAAM,EAAE;IACNW,UAAU,EAAE,EADN;IAENC,YAAY,EAAE;EAFR;AADsB,CAAD,CAA/B;AAOA,eAAelB,yBAAf"}

package/lib/module/components/MessageRenderer/MessageTime.js

@@ -20,7 +20,7 @@ const MessageTime = _ref => {
     style: style
   }, /*#__PURE__*/React.createElement(Text, {
     caption4: true,
-    color: colors.ui.message.incoming.enabled.textTime
+    color: colors.ui.groupChannelMessage.incoming.enabled.textTime
   }, STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)));
 };
 

package/lib/module/components/MessageRenderer/MessageTime.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","useUIKitTheme","useLocalization","MessageTime","message","grouping","style","STRINGS","colors","ui","incoming","enabled","textTime","GROUP_CHANNEL","MESSAGE_BUBBLE_TIME"],"sources":["MessageTime.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport { Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n  style?: StyleProp<ViewStyle>;\n};\nconst MessageTime = ({ message, grouping, style }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  if (grouping) return null;\n\n  return (\n    <View style={style}>\n      <Text caption4 color={colors.ui.message.incoming.enabled.textTime}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)}\n      </Text>\n    </View>\n  );\n};\n\nexport default MessageTime;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,IAApB,QAA2C,cAA3C;AAEA,SAASC,IAAT,EAAeC,aAAf,QAAoC,yCAApC;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAOA,MAAMC,WAAW,GAAG,QAAyC;EAAA,IAAxC;IAAEC,OAAF;IAAWC,QAAX;IAAqBC;EAArB,CAAwC;EAC3D,MAAM;IAAEC;EAAF,IAAcL,eAAe,EAAnC;EACA,MAAM;IAAEM;EAAF,IAAaP,aAAa,EAAhC;EACA,IAAII,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEC;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEE,MAAM,CAACC,EAAP,CAAUL,OAAV,CAAkBM,QAAlB,CAA2BC,OAA3B,CAAmCC;EAAzD,GACGL,OAAO,CAACM,aAAR,CAAsBC,mBAAtB,CAA0CV,OAA1C,CADH,CADF,CADF;AAOD,CAZD;;AAcA,eAAeD,WAAf"}
+{"version":3,"names":["React","View","Text","useUIKitTheme","useLocalization","MessageTime","message","grouping","style","STRINGS","colors","ui","groupChannelMessage","incoming","enabled","textTime","GROUP_CHANNEL","MESSAGE_BUBBLE_TIME"],"sources":["MessageTime.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleProp, View, ViewStyle } from 'react-native';\n\nimport { Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n  style?: StyleProp<ViewStyle>;\n};\nconst MessageTime = ({ message, grouping, style }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  if (grouping) return null;\n\n  return (\n    <View style={style}>\n      <Text caption4 color={colors.ui.groupChannelMessage.incoming.enabled.textTime}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)}\n      </Text>\n    </View>\n  );\n};\n\nexport default MessageTime;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAoBC,IAApB,QAA2C,cAA3C;AAEA,SAASC,IAAT,EAAeC,aAAf,QAAoC,yCAApC;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAOA,MAAMC,WAAW,GAAG,QAAyC;EAAA,IAAxC;IAAEC,OAAF;IAAWC,QAAX;IAAqBC;EAArB,CAAwC;EAC3D,MAAM;IAAEC;EAAF,IAAcL,eAAe,EAAnC;EACA,MAAM;IAAEM;EAAF,IAAaP,aAAa,EAAhC;EACA,IAAII,QAAJ,EAAc,OAAO,IAAP;EAEd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEC;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEE,MAAM,CAACC,EAAP,CAAUC,mBAAV,CAA8BC,QAA9B,CAAuCC,OAAvC,CAA+CC;EAArE,GACGN,OAAO,CAACO,aAAR,CAAsBC,mBAAtB,CAA0CX,OAA1C,CADH,CADF,CADF;AAOD,CAZD;;AAcA,eAAeD,WAAf"}

package/lib/module/components/MessageRenderer/UnknownMessage/index.js

@@ -15,7 +15,7 @@ const UnknownMessage = _ref => {
   const {
     colors
   } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       backgroundColor: color.background

package/lib/module/components/MessageRenderer/UnknownMessage/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","UnknownMessage","message","variant","pressed","STRINGS","colors","color","ui","styles","container","backgroundColor","background","onBackground01","GROUP_CHANNEL","MESSAGE_BUBBLE_UNKNOWN_TITLE","onBackground02","MESSAGE_BUBBLE_UNKNOWN_DESC","paddingHorizontal","paddingVertical","borderRadius"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { MessageRendererInterface } from '../index';\n\nexport type UnknownMessageProps = MessageRendererInterface;\nconst UnknownMessage = ({ message, variant, pressed }: UnknownMessageProps) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <Text body3 color={colors.onBackground01}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message)}\n      </Text>\n      <Text body3 color={colors.onBackground02}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n});\n\nexport default UnknownMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAEA,SAASC,eAAT,QAAgC,2BAAhC;;AAIA,MAAMC,cAAc,GAAG,QAAwD;EAAA,IAAvD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC;EAApB,CAAuD;EAC7E,MAAM;IAAEC;EAAF,IAAcL,eAAe,EAAnC;EACA,MAAM;IAAEM;EAAF,IAAaP,aAAa,EAAhC;EACA,MAAMQ,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUN,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACK,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAnB;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEN,MAAM,CAACO;EAA1B,GACGR,OAAO,CAACS,aAAR,CAAsBC,4BAAtB,CAAmDb,OAAnD,CADH,CADF,eAIE,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEI,MAAM,CAACU;EAA1B,GACGX,OAAO,CAACS,aAAR,CAAsBG,2BAAtB,CAAkDf,OAAlD,CADH,CAJF,CADF;AAUD,CAdD;;AAgBA,MAAMO,MAAM,GAAGX,gBAAgB,CAAC;EAC9BY,SAAS,EAAE;IACTQ,iBAAiB,EAAE,EADV;IAETC,eAAe,EAAE,CAFR;IAGTC,YAAY,EAAE;EAHL;AADmB,CAAD,CAA/B;AAQA,eAAenB,cAAf"}
+{"version":3,"names":["React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","UnknownMessage","message","variant","pressed","STRINGS","colors","color","ui","groupChannelMessage","styles","container","backgroundColor","background","onBackground01","GROUP_CHANNEL","MESSAGE_BUBBLE_UNKNOWN_TITLE","onBackground02","MESSAGE_BUBBLE_UNKNOWN_DESC","paddingHorizontal","paddingVertical","borderRadius"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { MessageRendererInterface } from '../index';\n\nexport type UnknownMessageProps = MessageRendererInterface;\nconst UnknownMessage = ({ message, variant, pressed }: UnknownMessageProps) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <Text body3 color={colors.onBackground01}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message)}\n      </Text>\n      <Text body3 color={colors.onBackground02}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n});\n\nexport default UnknownMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAEA,SAASC,eAAT,QAAgC,2BAAhC;;AAIA,MAAMC,cAAc,GAAG,QAAwD;EAAA,IAAvD;IAAEC,OAAF;IAAWC,OAAX;IAAoBC;EAApB,CAAuD;EAC7E,MAAM;IAAEC;EAAF,IAAcL,eAAe,EAAnC;EACA,MAAM;IAAEM;EAAF,IAAaP,aAAa,EAAhC;EACA,MAAMQ,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUC,mBAAV,CAA8BN,OAA9B,EAAuCC,OAAO,GAAG,SAAH,GAAe,SAA7D,CAAd;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEL,KAAK,CAACM;IAAzB,CAAnB;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEP,MAAM,CAACQ;EAA1B,GACGT,OAAO,CAACU,aAAR,CAAsBC,4BAAtB,CAAmDd,OAAnD,CADH,CADF,eAIE,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEI,MAAM,CAACW;EAA1B,GACGZ,OAAO,CAACU,aAAR,CAAsBG,2BAAtB,CAAkDhB,OAAlD,CADH,CAJF,CADF;AAUD,CAdD;;AAgBA,MAAMQ,MAAM,GAAGZ,gBAAgB,CAAC;EAC9Ba,SAAS,EAAE;IACTQ,iBAAiB,EAAE,EADV;IAETC,eAAe,EAAE,CAFR;IAGTC,YAAY,EAAE;EAHL;AADmB,CAAD,CAA/B;AAQA,eAAepB,cAAf"}

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

@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import { RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { urlRegexStrict } from '@sendbird/uikit-utils';
 import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
-import { openUrl } from '../../../utils/common';
+import SBUUtils from '../../../libs/SBUUtils';
 
 const BaseUserMessage = _ref => {
   let {
@@ -30,7 +30,7 @@ const BaseUserMessage = _ref => {
     colors,
     palette
   } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       backgroundColor: color.background
@@ -86,7 +86,7 @@ const BaseUserMessage = _ref => {
         } = _ref3;
         return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
           key: `${keyPrefix}-${index}`,
-          onPress: () => openUrl(match),
+          onPress: () => SBUUtils.openURL(match),
           onLongPress: onLongPressURL,
           style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, {
             textDecorationLine: 'underline'

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","RegexText","Text","createStyleSheet","useUIKitTheme","urlRegexStrict","useLocalization","useSendbirdChat","useUserProfile","openUrl","BaseUserMessage","message","variant","pressed","children","onLongPressMentionedUser","onLongPressURL","mentionManager","currentUser","show","STRINGS","colors","palette","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","textDecorationLine","shouldUseMentionedMessageTemplate","mentionedMessageTemplate","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","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 { openUrl } from '../../../utils/common';\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={() => 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":"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"}
+{"version":3,"names":["React","View","RegexText","Text","createStyleSheet","useUIKitTheme","urlRegexStrict","useLocalization","useSendbirdChat","useUserProfile","SBUUtils","BaseUserMessage","message","variant","pressed","children","onLongPressMentionedUser","onLongPressURL","mentionManager","currentUser","show","STRINGS","colors","palette","color","ui","groupChannelMessage","styles","container","backgroundColor","background","wrapper","textMsg","regex","templateRegex","replacer","match","groups","parentProps","index","keyPrefix","user","mentionedUsers","find","it","userId","style","fontWeight","highlight","asMentionedMessageText","openURL","textDecorationLine","shouldUseMentionedMessageTemplate","mentionedMessageTemplate","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","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.groupChannelMessage[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":"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"}

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

@@ -1,11 +1,11 @@
 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, { useState } from 'react';
-import { Linking, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import { Icon, Image, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining, urlRegexRough } from '@sendbird/uikit-utils';
 import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
-import { openUrl } from '../../../utils/common';
+import SBUUtils from '../../../libs/SBUUtils';
 
 const OpenGraphUserMessage = _ref => {
   var _ogMetaData$defaultIm;
@@ -35,7 +35,7 @@ const OpenGraphUserMessage = _ref => {
     palette
   } = useUIKitTheme();
   const [imageNotFound, setImageNotFound] = useState(false);
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
   const containerBackground = select({
     dark: palette.background400,
     light: palette.background100
@@ -98,7 +98,7 @@ const OpenGraphUserMessage = _ref => {
         } = _ref3;
         return /*#__PURE__*/React.createElement(Text, _extends({}, parentProps, {
           key: `${keyPrefix}-${index}`,
-          onPress: () => openUrl(match),
+          onPress: () => SBUUtils.openURL(match),
           onLongPress: onLongPressURL,
           style: [parentProps === null || parentProps === void 0 ? void 0 : parentProps.style, styles.urlText]
         }), match);
@@ -116,7 +116,7 @@ const OpenGraphUserMessage = _ref => {
       })
     },
     activeOpacity: 0.85,
-    onPress: () => Linking.openURL(ogMetaData.url).catch()
+    onPress: () => SBUUtils.openURL(ogMetaData.url)
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.ogImageContainer, {
       backgroundColor: select({

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Linking","TouchableOpacity","View","Icon","Image","RegexText","Text","createStyleSheet","useUIKitTheme","conditionChaining","urlRegexRough","useLocalization","useSendbirdChat","useUserProfile","openUrl","OpenGraphUserMessage","message","variant","pressed","ogMetaData","children","onLongPressMentionedUser","onLongPressURL","mentionManager","currentUser","STRINGS","show","colors","select","palette","imageNotFound","setImageNotFound","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","urlText","shouldUseMentionedMessageTemplate","mentionedMessageTemplate","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","background500","background200","openURL","url","catch","ogImageContainer","ogImage","onBackground02","uri","defaultImage","ogContainer","onBackground01","ogTitle","title","description","ogDesc","borderRadius","overflow","width","maxWidth","paddingVertical","paddingHorizontal","paddingTop","paddingBottom","flex","height","marginBottom","lineHeight","fontWeight","textDecorationLine"],"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 { 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 { openUrl } from '../../../utils/common';\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={() => 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={() => Linking.openURL(ogMetaData.url).catch()}\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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"}
+{"version":3,"names":["React","useState","TouchableOpacity","View","Icon","Image","RegexText","Text","createStyleSheet","useUIKitTheme","conditionChaining","urlRegexRough","useLocalization","useSendbirdChat","useUserProfile","SBUUtils","OpenGraphUserMessage","message","variant","pressed","ogMetaData","children","onLongPressMentionedUser","onLongPressURL","mentionManager","currentUser","STRINGS","show","colors","select","palette","imageNotFound","setImageNotFound","color","ui","groupChannelMessage","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","openURL","urlText","shouldUseMentionedMessageTemplate","mentionedMessageTemplate","Boolean","updatedAt","textEdited","GROUP_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","background500","background200","url","ogImageContainer","ogImage","onBackground02","uri","defaultImage","ogContainer","onBackground01","ogTitle","title","description","ogDesc","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.groupChannelMessage[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/module/components/OpenChannelMessageRenderer/OpenChannelMessageDateSeparator.js

@@ -0,0 +1,44 @@
+import isSameDay from 'date-fns/isSameDay';
+import React from 'react';
+import { View } from 'react-native';
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { useLocalization } from '../../hooks/useContext';
+
+const OpenChannelMessageDateSeparator = _ref => {
+  let {
+    message,
+    prevMessage
+  } = _ref;
+  const {
+    STRINGS
+  } = useLocalization();
+  const {
+    colors
+  } = useUIKitTheme();
+  const sameDay = isSameDay(message.createdAt, (prevMessage === null || prevMessage === void 0 ? void 0 : prevMessage.createdAt) ?? 0);
+  if (sameDay) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.view, {
+      backgroundColor: colors.ui.dateSeparator.default.none.background
+    }]
+  }, /*#__PURE__*/React.createElement(Text, {
+    caption1: true,
+    color: colors.ui.dateSeparator.default.none.text
+  }, STRINGS.OPEN_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt)))));
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    marginVertical: 16
+  },
+  view: {
+    borderRadius: 10,
+    paddingVertical: 4,
+    paddingHorizontal: 10
+  }
+});
+export default OpenChannelMessageDateSeparator;
+//# sourceMappingURL=OpenChannelMessageDateSeparator.js.map

package/lib/module/components/OpenChannelMessageRenderer/OpenChannelMessageDateSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isSameDay","React","View","Text","createStyleSheet","useUIKitTheme","useLocalization","OpenChannelMessageDateSeparator","message","prevMessage","STRINGS","colors","sameDay","createdAt","styles","container","view","backgroundColor","ui","dateSeparator","default","none","background","text","OPEN_CHANNEL","LIST_DATE_SEPARATOR","Date","alignItems","marginVertical","borderRadius","paddingVertical","paddingHorizontal"],"sources":["OpenChannelMessageDateSeparator.tsx"],"sourcesContent":["import isSameDay from 'date-fns/isSameDay';\nimport React from 'react';\nimport { View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\nimport { useLocalization } from '../../hooks/useContext';\n\nconst OpenChannelMessageDateSeparator = ({\n  message,\n  prevMessage,\n}: {\n  message: SendbirdMessage;\n  prevMessage?: SendbirdMessage;\n}) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n\n  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);\n  if (sameDay) return null;\n\n  return (\n    <View style={styles.container}>\n      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>\n        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>\n          {STRINGS.OPEN_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}\n        </Text>\n      </View>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    alignItems: 'center',\n    marginVertical: 16,\n  },\n  view: {\n    borderRadius: 10,\n    paddingVertical: 4,\n    paddingHorizontal: 10,\n  },\n});\n\nexport default OpenChannelMessageDateSeparator;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,oBAAtB;AACA,OAAOC,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;AAGA,SAASC,eAAT,QAAgC,wBAAhC;;AAEA,MAAMC,+BAA+B,GAAG,QAMlC;EAAA,IANmC;IACvCC,OADuC;IAEvCC;EAFuC,CAMnC;EACJ,MAAM;IAAEC;EAAF,IAAcJ,eAAe,EAAnC;EACA,MAAM;IAAEK;EAAF,IAAaN,aAAa,EAAhC;EAEA,MAAMO,OAAO,GAAGZ,SAAS,CAACQ,OAAO,CAACK,SAAT,EAAoB,CAAAJ,WAAW,SAAX,IAAAA,WAAW,WAAX,YAAAA,WAAW,CAAEI,SAAb,KAA0B,CAA9C,CAAzB;EACA,IAAID,OAAJ,EAAa,OAAO,IAAP;EAEb,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEE,MAAM,CAACC;EAApB,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACD,MAAM,CAACE,IAAR,EAAc;MAAEC,eAAe,EAAEN,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCC;IAAxD,CAAd;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEX,MAAM,CAACO,EAAP,CAAUC,aAAV,CAAwBC,OAAxB,CAAgCC,IAAhC,CAAqCE;EAA3D,GACGb,OAAO,CAACc,YAAR,CAAqBC,mBAArB,CAAyC,IAAIC,IAAJ,CAASlB,OAAO,CAACK,SAAjB,CAAzC,CADH,CADF,CADF,CADF;AASD,CAtBD;;AAwBA,MAAMC,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,SAAS,EAAE;IACTY,UAAU,EAAE,QADH;IAETC,cAAc,EAAE;EAFP,CADmB;EAK9BZ,IAAI,EAAE;IACJa,YAAY,EAAE,EADV;IAEJC,eAAe,EAAE,CAFb;IAGJC,iBAAiB,EAAE;EAHf;AALwB,CAAD,CAA/B;AAYA,eAAexB,+BAAf"}