@sendbird/uikit-react-native 2.3.0 → 2.4.1

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":"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"}

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

@@ -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

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

@@ -1 +1 @@
-{"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","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.message[variant][pressed ? 'pressed' : 'enabled'];\n\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <View style={styles.wrapper}>\n        <Text body3 color={color.textMsg}>\n          <RegexText\n            body3\n            color={color.textMsg}\n            patterns={[\n              {\n                regex: mentionManager.templateRegex,\n                replacer({ match, groups, parentProps, index, keyPrefix }) {\n                  const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);\n                  if (user) {\n                    return (\n                      <Text\n                        {...parentProps}\n                        key={`${keyPrefix}-${index}`}\n                        onPress={() => show(user)}\n                        onLongPress={onLongPressMentionedUser}\n                        style={[\n                          parentProps?.style,\n                          { fontWeight: 'bold' },\n                          user.userId === currentUser?.userId && { backgroundColor: palette.highlight },\n                        ]}\n                      >\n                        {`${mentionManager.asMentionedMessageText(user)}`}\n                      </Text>\n                    );\n                  }\n                  return match;\n                },\n              },\n              {\n                regex: urlRegexStrict,\n                replacer({ match, parentProps, index, keyPrefix }) {\n                  return (\n                    <Text\n                      {...parentProps}\n                      key={`${keyPrefix}-${index}`}\n                      onPress={() => SBUUtils.openURL(match)}\n                      onLongPress={onLongPressURL}\n                      style={[parentProps?.style, { textDecorationLine: 'underline' }]}\n                    >\n                      {match}\n                    </Text>\n                  );\n                },\n              },\n            ]}\n          >\n            {mentionManager.shouldUseMentionedMessageTemplate(message)\n              ? message.mentionedMessageTemplate\n              : message.message}\n          </RegexText>\n          {Boolean(message.updatedAt) && (\n            <Text body3 color={color.textEdited}>\n              {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n            </Text>\n          )}\n        </Text>\n      </View>\n      {children}\n    </View>\n  );\n};\nconst styles = createStyleSheet({\n  container: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  wrapper: {\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n  },\n});\n\nexport default BaseUserMessage;\n"],"mappings":"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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

@@ -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

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

@@ -1 +1 @@
-{"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","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.message[variant][pressed ? 'pressed' : 'enabled'];\n\n  const containerBackground = select({ dark: palette.background400, light: palette.background100 });\n\n  return (\n    <View style={[styles.bubbleContainer, { backgroundColor: containerBackground }]}>\n      <View style={[styles.container, styles.bubbleContainer, { backgroundColor: color.background }]}>\n        <View style={styles.messageContainer}>\n          <Text body3 color={color.textMsg}>\n            <RegexText\n              body3\n              color={color.textMsg}\n              patterns={[\n                {\n                  regex: mentionManager.templateRegex,\n                  replacer({ match, groups, parentProps, keyPrefix, index }) {\n                    const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);\n                    if (user) {\n                      const isCurrentUser = user.userId === currentUser?.userId;\n                      return (\n                        <Text\n                          {...parentProps}\n                          key={`${keyPrefix}-${index}`}\n                          onPress={() => show(user)}\n                          onLongPress={onLongPressMentionedUser}\n                          style={[\n                            parentProps?.style,\n                            styles.mentionedText,\n                            isCurrentUser && { backgroundColor: palette.highlight },\n                          ]}\n                        >\n                          {`${mentionManager.asMentionedMessageText(user)}`}\n                        </Text>\n                      );\n                    }\n                    return match;\n                  },\n                },\n                {\n                  regex: urlRegexRough,\n                  replacer({ match, parentProps, keyPrefix, index }) {\n                    return (\n                      <Text\n                        {...parentProps}\n                        key={`${keyPrefix}-${index}`}\n                        onPress={() => SBUUtils.openURL(match)}\n                        onLongPress={onLongPressURL}\n                        style={[parentProps?.style, styles.urlText]}\n                      >\n                        {match}\n                      </Text>\n                    );\n                  },\n                },\n              ]}\n            >\n              {mentionManager.shouldUseMentionedMessageTemplate(message)\n                ? message.mentionedMessageTemplate\n                : message.message}\n            </RegexText>\n            {Boolean(message.updatedAt) && (\n              <Text body3 color={color.textEdited}>\n                {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX}\n              </Text>\n            )}\n          </Text>\n        </View>\n        <TouchableOpacity\n          style={{ backgroundColor: select({ dark: palette.background500, light: palette.background200 }) }}\n          activeOpacity={0.85}\n          onPress={() => SBUUtils.openURL(ogMetaData.url)}\n        >\n          <View\n            style={[\n              styles.ogImageContainer,\n              { backgroundColor: select({ dark: palette.background500, light: palette.background200 }) },\n            ]}\n          >\n            {conditionChaining(\n              [imageNotFound],\n              [\n                <Icon\n                  containerStyle={styles.ogImage}\n                  icon={'thumbnail-none'}\n                  size={48}\n                  color={colors.onBackground02}\n                />,\n                <Image\n                  source={{ uri: ogMetaData.defaultImage?.url }}\n                  style={styles.ogImage}\n                  resizeMode={'cover'}\n                  onError={() => setImageNotFound(true)}\n                />,\n              ],\n            )}\n          </View>\n          <View style={[styles.ogContainer, { backgroundColor: containerBackground }]}>\n            <Text numberOfLines={3} body2 color={colors.onBackground01} style={styles.ogTitle}>\n              {ogMetaData.title}\n            </Text>\n            {Boolean(ogMetaData.description) && (\n              <Text numberOfLines={1} caption2 color={colors.onBackground01} style={styles.ogDesc}>\n                {ogMetaData.description}\n              </Text>\n            )}\n            <Text numberOfLines={1} caption2 color={colors.onBackground02}>\n              {ogMetaData.url}\n            </Text>\n          </View>\n        </TouchableOpacity>\n      </View>\n      {children}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  bubbleContainer: {\n    borderRadius: 16,\n    overflow: 'hidden',\n  },\n  container: {\n    width: 240,\n    maxWidth: 240,\n  },\n  messageContainer: {\n    paddingVertical: 6,\n    paddingHorizontal: 12,\n  },\n  ogContainer: {\n    paddingHorizontal: 12,\n    paddingTop: 8,\n    paddingBottom: 12,\n  },\n  ogImageContainer: {\n    flex: 1,\n    height: 136,\n  },\n  ogImage: {\n    width: '100%',\n    height: '100%',\n  },\n  ogTitle: {\n    marginBottom: 4,\n  },\n  ogDesc: {\n    lineHeight: 14,\n    marginBottom: 8,\n  },\n  mentionedText: {\n    fontWeight: 'bold',\n  },\n  urlText: {\n    textDecorationLine: 'underline',\n  },\n});\n\nexport default OpenGraphUserMessage;\n"],"mappings":"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"}
+{"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":";;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,gBAAT,EAA2BC,IAA3B,QAAuC,cAAvC;AAGA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,SAAtB,EAAiCC,IAAjC,EAAuCC,gBAAvC,EAAyDC,aAAzD,QAA8E,yCAA9E;AACA,SAASC,iBAAT,EAA4BC,aAA5B,QAAiD,uBAAjD;AAEA,SAASC,eAAT,EAA0BC,eAA1B,EAA2CC,cAA3C,QAAiE,2BAAjE;AACA,OAAOC,QAAP,MAAqB,wBAArB;;AAOA,MAAMC,oBAAoB,GAAG,QAQhB;EAAA;;EAAA,IARiB;IAC5BC,OAD4B;IAE5BC,OAF4B;IAG5BC,OAH4B;IAI5BC,UAJ4B;IAK5BC,QAL4B;IAM5BC,wBAN4B;IAO5BC;EAP4B,CAQjB;EACX,MAAM;IAAEC,cAAF;IAAkBC;EAAlB,IAAkCZ,eAAe,EAAvD;EACA,MAAM;IAAEa;EAAF,IAAcd,eAAe,EAAnC;EACA,MAAM;IAAEe;EAAF,IAAWb,cAAc,EAA/B;EACA,MAAM;IAAEc,MAAF;IAAUC,MAAV;IAAkBC;EAAlB,IAA8BrB,aAAa,EAAjD;EAEA,MAAM,CAACsB,aAAD,EAAgBC,gBAAhB,IAAoC/B,QAAQ,CAAC,KAAD,CAAlD;EACA,MAAMgC,KAAK,GAAGL,MAAM,CAACM,EAAP,CAAUC,mBAAV,CAA8BjB,OAA9B,EAAuCC,OAAO,GAAG,SAAH,GAAe,SAA7D,CAAd;EAEA,MAAMiB,mBAAmB,GAAGP,MAAM,CAAC;IAAEQ,IAAI,EAAEP,OAAO,CAACQ,aAAhB;IAA+BC,KAAK,EAAET,OAAO,CAACU;EAA9C,CAAD,CAAlC;EAEA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACC,MAAM,CAACC,eAAR,EAAyB;MAAEC,eAAe,EAAEP;IAAnB,CAAzB;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACK,MAAM,CAACG,SAAR,EAAmBH,MAAM,CAACC,eAA1B,EAA2C;MAAEC,eAAe,EAAEV,KAAK,CAACY;IAAzB,CAA3C;EAAb,gBACE,oBAAC,IAAD;IAAM,KAAK,EAAEJ,MAAM,CAACK;EAApB,gBACE,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEb,KAAK,CAACc;EAAzB,gBACE,oBAAC,SAAD;IACE,KAAK,MADP;IAEE,KAAK,EAAEd,KAAK,CAACc,OAFf;IAGE,QAAQ,EAAE,CACR;MACEC,KAAK,EAAExB,cAAc,CAACyB,aADxB;;MAEEC,QAAQ,QAAmD;QAAA;;QAAA,IAAlD;UAAEC,KAAF;UAASC,MAAT;UAAiBC,WAAjB;UAA8BC,SAA9B;UAAyCC;QAAzC,CAAkD;QACzD,MAAMC,IAAI,4BAAGvC,OAAO,CAACwC,cAAX,0DAAG,sBAAwBC,IAAxB,CAA8BC,EAAD,IAAQA,EAAE,CAACC,MAAH,KAAcR,MAAM,CAAC,CAAD,CAAzD,CAAb;;QACA,IAAII,IAAJ,EAAU;UACR,MAAMK,aAAa,GAAGL,IAAI,CAACI,MAAL,MAAgBnC,WAAhB,aAAgBA,WAAhB,uBAAgBA,WAAW,CAAEmC,MAA7B,CAAtB;UACA,oBACE,oBAAC,IAAD,eACMP,WADN;YAEE,GAAG,EAAG,GAAEC,SAAU,IAAGC,KAAM,EAF7B;YAGE,OAAO,EAAE,MAAM5B,IAAI,CAAC6B,IAAD,CAHrB;YAIE,WAAW,EAAElC,wBAJf;YAKE,KAAK,EAAE,CACL+B,WADK,aACLA,WADK,uBACLA,WAAW,CAAES,KADR,EAELrB,MAAM,CAACsB,aAFF,EAGLF,aAAa,IAAI;cAAElB,eAAe,EAAEb,OAAO,CAACkC;YAA3B,CAHZ;UALT,IAWI,GAAExC,cAAc,CAACyC,sBAAf,CAAsCT,IAAtC,CAA4C,EAXlD,CADF;QAeD;;QACD,OAAOL,KAAP;MACD;;IAvBH,CADQ,EA0BR;MACEH,KAAK,EAAErC,aADT;;MAEEuC,QAAQ,QAA2C;QAAA,IAA1C;UAAEC,KAAF;UAASE,WAAT;UAAsBC,SAAtB;UAAiCC;QAAjC,CAA0C;QACjD,oBACE,oBAAC,IAAD,eACMF,WADN;UAEE,GAAG,EAAG,GAAEC,SAAU,IAAGC,KAAM,EAF7B;UAGE,OAAO,EAAE,MAAMxC,QAAQ,CAACmD,OAAT,CAAiBf,KAAjB,CAHjB;UAIE,WAAW,EAAE5B,cAJf;UAKE,KAAK,EAAE,CAAC8B,WAAD,aAACA,WAAD,uBAACA,WAAW,CAAES,KAAd,EAAqBrB,MAAM,CAAC0B,OAA5B;QALT,IAOGhB,KAPH,CADF;MAWD;;IAdH,CA1BQ;EAHZ,GA+CG3B,cAAc,CAAC4C,iCAAf,CAAiDnD,OAAjD,IACGA,OAAO,CAACoD,wBADX,GAEGpD,OAAO,CAACA,OAjDd,CADF,EAoDGqD,OAAO,CAACrD,OAAO,CAACsD,SAAT,CAAP,iBACC,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,KAAK,EAAEtC,KAAK,CAACuC;EAAzB,GACG9C,OAAO,CAAC+C,aAAR,CAAsBC,6BADzB,CArDJ,CADF,CADF,eA6DE,oBAAC,gBAAD;IACE,KAAK,EAAE;MAAE/B,eAAe,EAAEd,MAAM,CAAC;QAAEQ,IAAI,EAAEP,OAAO,CAAC6C,aAAhB;QAA+BpC,KAAK,EAAET,OAAO,CAAC8C;MAA9C,CAAD;IAAzB,CADT;IAEE,aAAa,EAAE,IAFjB;IAGE,OAAO,EAAE,MAAM7D,QAAQ,CAACmD,OAAT,CAAiB9C,UAAU,CAACyD,GAA5B;EAHjB,gBAKE,oBAAC,IAAD;IACE,KAAK,EAAE,CACLpC,MAAM,CAACqC,gBADF,EAEL;MAAEnC,eAAe,EAAEd,MAAM,CAAC;QAAEQ,IAAI,EAAEP,OAAO,CAAC6C,aAAhB;QAA+BpC,KAAK,EAAET,OAAO,CAAC8C;MAA9C,CAAD;IAAzB,CAFK;EADT,GAMGlE,iBAAiB,CAChB,CAACqB,aAAD,CADgB,EAEhB,cACE,oBAAC,IAAD;IACE,cAAc,EAAEU,MAAM,CAACsC,OADzB;IAEE,IAAI,EAAE,gBAFR;IAGE,IAAI,EAAE,EAHR;IAIE,KAAK,EAAEnD,MAAM,CAACoD;EAJhB,EADF,eAOE,oBAAC,KAAD;IACE,MAAM,EAAE;MAAEC,GAAG,2BAAE7D,UAAU,CAAC8D,YAAb,0DAAE,sBAAyBL;IAAhC,CADV;IAEE,KAAK,EAAEpC,MAAM,CAACsC,OAFhB;IAGE,UAAU,EAAE,OAHd;IAIE,OAAO,EAAE,MAAM/C,gBAAgB,CAAC,IAAD;EAJjC,EAPF,CAFgB,CANpB,CALF,eA6BE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACS,MAAM,CAAC0C,WAAR,EAAqB;MAAExC,eAAe,EAAEP;IAAnB,CAArB;EAAb,gBACE,oBAAC,IAAD;IAAM,aAAa,EAAE,CAArB;IAAwB,KAAK,MAA7B;IAA8B,KAAK,EAAER,MAAM,CAACwD,cAA5C;IAA4D,KAAK,EAAE3C,MAAM,CAAC4C;EAA1E,GACGjE,UAAU,CAACkE,KADd,CADF,EAIGhB,OAAO,CAAClD,UAAU,CAACmE,WAAZ,CAAP,iBACC,oBAAC,IAAD;IAAM,aAAa,EAAE,CAArB;IAAwB,QAAQ,MAAhC;IAAiC,KAAK,EAAE3D,MAAM,CAACwD,cAA/C;IAA+D,KAAK,EAAE3C,MAAM,CAAC+C;EAA7E,GACGpE,UAAU,CAACmE,WADd,CALJ,eASE,oBAAC,IAAD;IAAM,aAAa,EAAE,CAArB;IAAwB,QAAQ,MAAhC;IAAiC,KAAK,EAAE3D,MAAM,CAACoD;EAA/C,GACG5D,UAAU,CAACyD,GADd,CATF,CA7BF,CA7DF,CADF,EA0GGxD,QA1GH,CADF;AA8GD,CAjID;;AAmIA,MAAMoB,MAAM,GAAGjC,gBAAgB,CAAC;EAC9BkC,eAAe,EAAE;IACf+C,YAAY,EAAE,EADC;IAEfC,QAAQ,EAAE;EAFK,CADa;EAK9B9C,SAAS,EAAE;IACT+C,KAAK,EAAE,GADE;IAETC,QAAQ,EAAE;EAFD,CALmB;EAS9B9C,gBAAgB,EAAE;IAChB+C,eAAe,EAAE,CADD;IAEhBC,iBAAiB,EAAE;EAFH,CATY;EAa9BX,WAAW,EAAE;IACXW,iBAAiB,EAAE,EADR;IAEXC,UAAU,EAAE,CAFD;IAGXC,aAAa,EAAE;EAHJ,CAbiB;EAkB9BlB,gBAAgB,EAAE;IAChBmB,IAAI,EAAE,CADU;IAEhBC,MAAM,EAAE;EAFQ,CAlBY;EAsB9BnB,OAAO,EAAE;IACPY,KAAK,EAAE,MADA;IAEPO,MAAM,EAAE;EAFD,CAtBqB;EA0B9Bb,OAAO,EAAE;IACPc,YAAY,EAAE;EADP,CA1BqB;EA6B9BX,MAAM,EAAE;IACNY,UAAU,EAAE,EADN;IAEND,YAAY,EAAE;EAFR,CA7BsB;EAiC9BpC,aAAa,EAAE;IACbsC,UAAU,EAAE;EADC,CAjCe;EAoC9BlC,OAAO,EAAE;IACPmC,kBAAkB,EAAE;EADb;AApCqB,CAAD,CAA/B;AAyCA,eAAetF,oBAAf"}

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"}

package/lib/module/components/OpenChannelMessageRenderer/index.js

@@ -0,0 +1,119 @@
+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, OpenChannelMessage } from '@sendbird/uikit-react-native-foundation';
+import { calcMessageGrouping, getMessageType } from '@sendbird/uikit-utils';
+import { useLocalization, usePlatformService } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+import OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';
+
+const OpenChannelMessageRenderer = _ref => {
+  let {
+    channel,
+    message,
+    onPress,
+    onLongPress,
+    onPressAvatar,
+    enableMessageGrouping,
+    prevMessage,
+    nextMessage
+  } = _ref;
+  const {
+    STRINGS
+  } = useLocalization();
+  const {
+    mediaService
+  } = usePlatformService();
+  const {
+    groupWithPrev
+  } = calcMessageGrouping(Boolean(enableMessageGrouping), message, prevMessage, nextMessage);
+  const messageProps = {
+    channel,
+    onPress,
+    onLongPress,
+    onPressURL: () => {
+      var _message$ogMetaData, _message$ogMetaData2;
+
+      return ((_message$ogMetaData = message.ogMetaData) === null || _message$ogMetaData === void 0 ? void 0 : _message$ogMetaData.url) && SBUUtils.openURL((_message$ogMetaData2 = message.ogMetaData) === null || _message$ogMetaData2 === void 0 ? void 0 : _message$ogMetaData2.url);
+    },
+    onPressAvatar: () => 'sender' in message && (onPressAvatar === null || onPressAvatar === void 0 ? void 0 : onPressAvatar(message.sender, {
+      hideMessageButton: true
+    })),
+    grouped: groupWithPrev,
+    strings: {
+      edited: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX,
+      senderName: 'sender' in message && message.sender.nickname || STRINGS.LABELS.USER_NO_NAME,
+      sentDate: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_TIME(message),
+      fileName: message.isFileMessage() ? STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message) : '',
+      unknownTitle: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message),
+      unknownDescription: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message)
+    }
+  };
+
+  const renderMessage = () => {
+    switch (getMessageType(message)) {
+      case 'admin':
+        {
+          return /*#__PURE__*/React.createElement(OpenChannelMessage.Admin, _extends({
+            message: message
+          }, messageProps));
+        }
+
+      case 'user':
+        {
+          return /*#__PURE__*/React.createElement(OpenChannelMessage.User, _extends({
+            message: message
+          }, messageProps));
+        }
+
+      case 'user.opengraph':
+        {
+          return /*#__PURE__*/React.createElement(OpenChannelMessage.OpenGraphUser, _extends({
+            message: message
+          }, messageProps));
+        }
+
+      case 'file':
+      case 'file.audio':
+        {
+          return /*#__PURE__*/React.createElement(OpenChannelMessage.File, _extends({
+            message: message
+          }, messageProps));
+        }
+
+      case 'file.image':
+        {
+          return /*#__PURE__*/React.createElement(OpenChannelMessage.ImageFile, _extends({
+            message: message
+          }, messageProps));
+        }
+
+      case 'file.video':
+        {
+          return /*#__PURE__*/React.createElement(OpenChannelMessage.VideoFile, _extends({
+            message: message,
+            fetchThumbnailFromVideoSource: uri => mediaService.getVideoThumbnail({
+              url: uri,
+              timeMills: 1000
+            })
+          }, messageProps));
+        }
+
+      case 'unknown':
+      default:
+        {
+          return /*#__PURE__*/React.createElement(OpenChannelMessage.Unknown, _extends({
+            message: message
+          }, messageProps));
+        }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(OpenChannelMessageDateSeparator, {
+    message: message,
+    prevMessage: prevMessage
+  }), renderMessage());
+};
+
+export default /*#__PURE__*/React.memo(OpenChannelMessageRenderer);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Box","OpenChannelMessage","calcMessageGrouping","getMessageType","useLocalization","usePlatformService","SBUUtils","OpenChannelMessageDateSeparator","OpenChannelMessageRenderer","channel","message","onPress","onLongPress","onPressAvatar","enableMessageGrouping","prevMessage","nextMessage","STRINGS","mediaService","groupWithPrev","Boolean","messageProps","onPressURL","ogMetaData","url","openURL","sender","hideMessageButton","grouped","strings","edited","OPEN_CHANNEL","MESSAGE_BUBBLE_EDITED_POSTFIX","senderName","nickname","LABELS","USER_NO_NAME","sentDate","MESSAGE_BUBBLE_TIME","fileName","isFileMessage","MESSAGE_BUBBLE_FILE_TITLE","unknownTitle","MESSAGE_BUBBLE_UNKNOWN_TITLE","unknownDescription","MESSAGE_BUBBLE_UNKNOWN_DESC","renderMessage","uri","getVideoThumbnail","timeMills","memo"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { OpenChannelMessageProps } from '@sendbird/uikit-react-native-foundation';\nimport { Box, OpenChannelMessage } from '@sendbird/uikit-react-native-foundation';\nimport {\n  SendbirdAdminMessage,\n  SendbirdFileMessage,\n  SendbirdMessage,\n  SendbirdUserMessage,\n  calcMessageGrouping,\n  getMessageType,\n} from '@sendbird/uikit-utils';\n\nimport type { OpenChannelProps } from '../../domain/openChannel/types';\nimport { useLocalization, usePlatformService } from '../../hooks/useContext';\nimport SBUUtils from '../../libs/SBUUtils';\nimport OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';\n\nconst OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage'] = ({\n  channel,\n  message,\n  onPress,\n  onLongPress,\n  onPressAvatar,\n  enableMessageGrouping,\n  prevMessage,\n  nextMessage,\n}) => {\n  const { STRINGS } = useLocalization();\n  const { mediaService } = usePlatformService();\n  const { groupWithPrev } = calcMessageGrouping(Boolean(enableMessageGrouping), message, prevMessage, nextMessage);\n\n  const messageProps: Omit<OpenChannelMessageProps<SendbirdMessage>, 'message'> = {\n    channel,\n    onPress,\n    onLongPress,\n    onPressURL: () => message.ogMetaData?.url && SBUUtils.openURL(message.ogMetaData?.url),\n    onPressAvatar: () => 'sender' in message && onPressAvatar?.(message.sender, { hideMessageButton: true }),\n    grouped: groupWithPrev,\n    strings: {\n      edited: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX,\n      senderName: ('sender' in message && message.sender.nickname) || STRINGS.LABELS.USER_NO_NAME,\n      sentDate: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_TIME(message),\n      fileName: message.isFileMessage() ? STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message) : '',\n      unknownTitle: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message),\n      unknownDescription: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message),\n    },\n  };\n  const renderMessage = () => {\n    switch (getMessageType(message)) {\n      case 'admin': {\n        return <OpenChannelMessage.Admin message={message as SendbirdAdminMessage} {...messageProps} />;\n      }\n      case 'user': {\n        return <OpenChannelMessage.User message={message as SendbirdUserMessage} {...messageProps} />;\n      }\n      case 'user.opengraph': {\n        return <OpenChannelMessage.OpenGraphUser message={message as SendbirdUserMessage} {...messageProps} />;\n      }\n      case 'file':\n      case 'file.audio': {\n        return <OpenChannelMessage.File message={message as SendbirdFileMessage} {...messageProps} />;\n      }\n      case 'file.image': {\n        return <OpenChannelMessage.ImageFile message={message as SendbirdFileMessage} {...messageProps} />;\n      }\n      case 'file.video': {\n        return (\n          <OpenChannelMessage.VideoFile\n            message={message as SendbirdFileMessage}\n            fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}\n            {...messageProps}\n          />\n        );\n      }\n      case 'unknown':\n      default: {\n        return <OpenChannelMessage.Unknown message={message} {...messageProps} />;\n      }\n    }\n  };\n\n  return (\n    <Box>\n      <OpenChannelMessageDateSeparator message={message} prevMessage={prevMessage} />\n      {renderMessage()}\n    </Box>\n  );\n};\n\nexport default React.memo(OpenChannelMessageRenderer);\n"],"mappings":"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"}

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

@@ -3,10 +3,9 @@ import { Pressable, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { useUniqId } from '@sendbird/uikit-utils';
+import { useUniqHandlerId } from '@sendbird/uikit-utils';
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
-const COMPONENT_NAME = 'BottomSheetReactionAddon';
 
 const BottomSheetReactionAddon = _ref => {
   let {
@@ -26,12 +25,12 @@ const BottomSheetReactionAddon = _ref => {
   const {
     colors
   } = useUIKitTheme();
-  const id = useUniqId(COMPONENT_NAME);
+  const handlerId = useUniqHandlerId('BottomSheetReactionAddon');
   const {
     left,
     right
   } = useSafeAreaInsets();
-  useChannelHandler(sdk, COMPONENT_NAME + id, {
+  useChannelHandler(sdk, handlerId, {
     async onReactionUpdated(eventChannel, event) {
       if ((channel === null || channel === void 0 ? void 0 : channel.url) === eventChannel.url && event.messageId === (message === null || message === void 0 ? void 0 : message.messageId)) {
         updateReactionFocusedItem({

package/lib/module/components/ReactionAddons/BottomSheetReactionAddon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","View","useSafeAreaInsets","useChannelHandler","Icon","Image","createStyleSheet","useUIKitTheme","useUniqId","UNKNOWN_USER_ID","useReaction","useSendbirdChat","COMPONENT_NAME","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","id","left","right","onReactionUpdated","eventChannel","event","url","messageId","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","color","ui","reaction","default","styles","container","marginRight","marginLeft","map","key","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","reacted","onPress","deleteReaction","addReaction","pressed","button","backgroundColor","selected","background","enabled","uri","emoji","onBackground03","paddingTop","paddingBottom","paddingHorizontal","flexDirection","justifyContent","width","height","padding","borderRadius"],"sources":["BottomSheetReactionAddon.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { useChannelHandler } from '@sendbird/uikit-chat-hooks';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdBaseChannel, SendbirdBaseMessage, useUniqId } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\n\ntype Props = {\n  onClose: () => Promise<void>;\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n};\nconst COMPONENT_NAME = 'BottomSheetReactionAddon';\nconst BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {\n  const { emojiManager, currentUser, sdk } = useSendbirdChat();\n  const { updateReactionFocusedItem, openReactionList } = useReaction();\n  const { colors } = useUIKitTheme();\n  const id = useUniqId(COMPONENT_NAME);\n  const { left, right } = useSafeAreaInsets();\n\n  useChannelHandler(sdk, COMPONENT_NAME + id, {\n    async onReactionUpdated(eventChannel, event) {\n      if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {\n        updateReactionFocusedItem({\n          message: await sdk.message.getMessage({\n            includeReactions: true,\n            messageId: message.messageId,\n            channelUrl: message.channelUrl,\n            channelType: message.channelType,\n          }),\n        });\n      }\n    },\n  });\n\n  const emojiAll = emojiManager.allEmoji.slice(0, 5);\n  const color = colors.ui.reaction.default;\n\n  return (\n    <View style={[styles.container, { marginRight: right, marginLeft: left }]}>\n      {emojiAll.map(({ key, url }) => {\n        const reactionUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n        const currentUserIdx = reactionUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n        const reacted = currentUserIdx > -1;\n\n        const onPress = () => {\n          if (reacted) channel.deleteReaction(message, key);\n          else channel.addReaction(message, key);\n          onClose();\n        };\n\n        return (\n          <Pressable\n            key={key}\n            onPress={onPress}\n            style={({ pressed }) => [\n              styles.button,\n              { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },\n            ]}\n          >\n            <Image source={{ uri: url }} style={styles.emoji} />\n          </Pressable>\n        );\n      })}\n\n      <Pressable\n        onPress={async () => {\n          await onClose();\n          openReactionList({ channel, message });\n        }}\n        style={({ pressed }) => [\n          styles.button,\n          { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n        ]}\n      >\n        <Icon icon={'emoji-more'} style={styles.emoji} color={colors.onBackground03} />\n      </Pressable>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 12,\n    paddingBottom: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default BottomSheetReactionAddon;\n"],"mappings":"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"}
+{"version":3,"names":["React","Pressable","View","useSafeAreaInsets","useChannelHandler","Icon","Image","createStyleSheet","useUIKitTheme","useUniqHandlerId","UNKNOWN_USER_ID","useReaction","useSendbirdChat","BottomSheetReactionAddon","onClose","message","channel","emojiManager","currentUser","sdk","updateReactionFocusedItem","openReactionList","colors","handlerId","left","right","onReactionUpdated","eventChannel","event","url","messageId","getMessage","includeReactions","channelUrl","channelType","emojiAll","allEmoji","slice","color","ui","reaction","default","styles","container","marginRight","marginLeft","map","key","reactionUserIds","reactions","find","it","userIds","currentUserIdx","indexOf","userId","reacted","onPress","deleteReaction","addReaction","pressed","button","backgroundColor","selected","background","enabled","uri","emoji","onBackground03","paddingTop","paddingBottom","paddingHorizontal","flexDirection","justifyContent","width","height","padding","borderRadius"],"sources":["BottomSheetReactionAddon.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable, View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nimport { useChannelHandler } from '@sendbird/uikit-chat-hooks';\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { SendbirdBaseChannel, SendbirdBaseMessage, useUniqHandlerId } from '@sendbird/uikit-utils';\n\nimport { UNKNOWN_USER_ID } from '../../constants';\nimport { useReaction, useSendbirdChat } from '../../hooks/useContext';\n\ntype Props = {\n  onClose: () => Promise<void>;\n  channel: SendbirdBaseChannel;\n  message: SendbirdBaseMessage;\n};\nconst BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {\n  const { emojiManager, currentUser, sdk } = useSendbirdChat();\n  const { updateReactionFocusedItem, openReactionList } = useReaction();\n  const { colors } = useUIKitTheme();\n  const handlerId = useUniqHandlerId('BottomSheetReactionAddon');\n  const { left, right } = useSafeAreaInsets();\n\n  useChannelHandler(sdk, handlerId, {\n    async onReactionUpdated(eventChannel, event) {\n      if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {\n        updateReactionFocusedItem({\n          message: await sdk.message.getMessage({\n            includeReactions: true,\n            messageId: message.messageId,\n            channelUrl: message.channelUrl,\n            channelType: message.channelType,\n          }),\n        });\n      }\n    },\n  });\n\n  const emojiAll = emojiManager.allEmoji.slice(0, 5);\n  const color = colors.ui.reaction.default;\n\n  return (\n    <View style={[styles.container, { marginRight: right, marginLeft: left }]}>\n      {emojiAll.map(({ key, url }) => {\n        const reactionUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];\n        const currentUserIdx = reactionUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);\n        const reacted = currentUserIdx > -1;\n\n        const onPress = () => {\n          if (reacted) channel.deleteReaction(message, key);\n          else channel.addReaction(message, key);\n          onClose();\n        };\n\n        return (\n          <Pressable\n            key={key}\n            onPress={onPress}\n            style={({ pressed }) => [\n              styles.button,\n              { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },\n            ]}\n          >\n            <Image source={{ uri: url }} style={styles.emoji} />\n          </Pressable>\n        );\n      })}\n\n      <Pressable\n        onPress={async () => {\n          await onClose();\n          openReactionList({ channel, message });\n        }}\n        style={({ pressed }) => [\n          styles.button,\n          { backgroundColor: pressed ? color.selected.background : color.enabled.background },\n        ]}\n      >\n        <Icon icon={'emoji-more'} style={styles.emoji} color={colors.onBackground03} />\n      </Pressable>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    paddingTop: 12,\n    paddingBottom: 16,\n    paddingHorizontal: 18,\n    flexDirection: 'row',\n    justifyContent: 'space-between',\n  },\n  button: {\n    width: 44,\n    height: 44,\n    padding: 4,\n    borderRadius: 8,\n  },\n  emoji: {\n    width: '100%',\n    height: '100%',\n  },\n});\n\nexport default BottomSheetReactionAddon;\n"],"mappings":"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"}

package/lib/module/components/TypedPlaceholder.js

@@ -36,6 +36,12 @@ const TypedPlaceholder = _ref => {
         message: STRINGS.PLACEHOLDER.NO_MUTED_MEMBERS
       });
 
+    case 'no-muted-participants':
+      return /*#__PURE__*/React.createElement(Placeholder, {
+        icon: 'mute',
+        message: STRINGS.PLACEHOLDER.NO_MUTED_PARTICIPANTS
+      });
+
     case 'no-results-found':
       return /*#__PURE__*/React.createElement(Placeholder, {
         icon: 'search',

package/lib/module/components/TypedPlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Placeholder","useLocalization","TypedPlaceholder","type","onPressRetry","STRINGS","PLACEHOLDER","NO_BANNED_USERS","NO_CHANNELS","NO_MESSAGES","NO_MUTED_MEMBERS","NO_RESULTS_FOUND","NO_USERS","ERROR","MESSAGE","RETRY_LABEL"],"sources":["TypedPlaceholder.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Placeholder } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../hooks/useContext';\n\ntype Props = {\n  type:\n    | 'no-muted-members'\n    | 'no-banned-users'\n    | 'no-channels'\n    | 'no-messages'\n    | 'no-users'\n    | 'no-results-found'\n    | 'error-wrong'\n    | 'loading';\n  onPressRetry?: () => void;\n};\nconst TypedPlaceholder = ({ type, onPressRetry }: Props) => {\n  const { STRINGS } = useLocalization();\n  switch (type) {\n    case 'no-banned-users':\n      return <Placeholder icon={'ban'} message={STRINGS.PLACEHOLDER.NO_BANNED_USERS} />;\n    case 'no-channels':\n      return <Placeholder icon={'chat'} message={STRINGS.PLACEHOLDER.NO_CHANNELS} />;\n    case 'no-messages':\n      return <Placeholder icon={'message'} message={STRINGS.PLACEHOLDER.NO_MESSAGES} />;\n    case 'no-muted-members':\n      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_MEMBERS} />;\n    case 'no-results-found':\n      return <Placeholder icon={'search'} message={STRINGS.PLACEHOLDER.NO_RESULTS_FOUND} />;\n    case 'no-users':\n      return <Placeholder icon={'members'} message={STRINGS.PLACEHOLDER.NO_USERS} />;\n    case 'error-wrong':\n      return (\n        <Placeholder\n          icon={'error'}\n          message={STRINGS.PLACEHOLDER.ERROR.MESSAGE}\n          errorRetryLabel={STRINGS.PLACEHOLDER.ERROR.RETRY_LABEL}\n          onPressRetry={onPressRetry}\n        />\n      );\n    case 'loading':\n      return <Placeholder loading icon={'spinner'} />;\n  }\n};\n\nexport default TypedPlaceholder;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,WAAT,QAA4B,yCAA5B;AAEA,SAASC,eAAT,QAAgC,qBAAhC;;AAcA,MAAMC,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC,IAAF;IAAQC;EAAR,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAcJ,eAAe,EAAnC;;EACA,QAAQE,IAAR;IACE,KAAK,iBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,KAAnB;QAA0B,OAAO,EAAEE,OAAO,CAACC,WAAR,CAAoBC;MAAvD,EAAP;;IACF,KAAK,aAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,MAAnB;QAA2B,OAAO,EAAEF,OAAO,CAACC,WAAR,CAAoBE;MAAxD,EAAP;;IACF,KAAK,aAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,SAAnB;QAA8B,OAAO,EAAEH,OAAO,CAACC,WAAR,CAAoBG;MAA3D,EAAP;;IACF,KAAK,kBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,MAAnB;QAA2B,OAAO,EAAEJ,OAAO,CAACC,WAAR,CAAoBI;MAAxD,EAAP;;IACF,KAAK,kBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,QAAnB;QAA6B,OAAO,EAAEL,OAAO,CAACC,WAAR,CAAoBK;MAA1D,EAAP;;IACF,KAAK,UAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,SAAnB;QAA8B,OAAO,EAAEN,OAAO,CAACC,WAAR,CAAoBM;MAA3D,EAAP;;IACF,KAAK,aAAL;MACE,oBACE,oBAAC,WAAD;QACE,IAAI,EAAE,OADR;QAEE,OAAO,EAAEP,OAAO,CAACC,WAAR,CAAoBO,KAApB,CAA0BC,OAFrC;QAGE,eAAe,EAAET,OAAO,CAACC,WAAR,CAAoBO,KAApB,CAA0BE,WAH7C;QAIE,YAAY,EAAEX;MAJhB,EADF;;IAQF,KAAK,SAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,OAAO,MAApB;QAAqB,IAAI,EAAE;MAA3B,EAAP;EAvBJ;AAyBD,CA3BD;;AA6BA,eAAeF,gBAAf"}
+{"version":3,"names":["React","Placeholder","useLocalization","TypedPlaceholder","type","onPressRetry","STRINGS","PLACEHOLDER","NO_BANNED_USERS","NO_CHANNELS","NO_MESSAGES","NO_MUTED_MEMBERS","NO_MUTED_PARTICIPANTS","NO_RESULTS_FOUND","NO_USERS","ERROR","MESSAGE","RETRY_LABEL"],"sources":["TypedPlaceholder.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Placeholder } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../hooks/useContext';\n\ntype Props = {\n  type:\n    | 'no-muted-members'\n    | 'no-muted-participants'\n    | 'no-banned-users'\n    | 'no-channels'\n    | 'no-messages'\n    | 'no-users'\n    | 'no-results-found'\n    | 'error-wrong'\n    | 'loading';\n  onPressRetry?: () => void;\n};\nconst TypedPlaceholder = ({ type, onPressRetry }: Props) => {\n  const { STRINGS } = useLocalization();\n  switch (type) {\n    case 'no-banned-users':\n      return <Placeholder icon={'ban'} message={STRINGS.PLACEHOLDER.NO_BANNED_USERS} />;\n    case 'no-channels':\n      return <Placeholder icon={'chat'} message={STRINGS.PLACEHOLDER.NO_CHANNELS} />;\n    case 'no-messages':\n      return <Placeholder icon={'message'} message={STRINGS.PLACEHOLDER.NO_MESSAGES} />;\n    case 'no-muted-members':\n      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_MEMBERS} />;\n    case 'no-muted-participants':\n      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_PARTICIPANTS} />;\n    case 'no-results-found':\n      return <Placeholder icon={'search'} message={STRINGS.PLACEHOLDER.NO_RESULTS_FOUND} />;\n    case 'no-users':\n      return <Placeholder icon={'members'} message={STRINGS.PLACEHOLDER.NO_USERS} />;\n    case 'error-wrong':\n      return (\n        <Placeholder\n          icon={'error'}\n          message={STRINGS.PLACEHOLDER.ERROR.MESSAGE}\n          errorRetryLabel={STRINGS.PLACEHOLDER.ERROR.RETRY_LABEL}\n          onPressRetry={onPressRetry}\n        />\n      );\n    case 'loading':\n      return <Placeholder loading icon={'spinner'} />;\n  }\n};\n\nexport default TypedPlaceholder;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,WAAT,QAA4B,yCAA5B;AAEA,SAASC,eAAT,QAAgC,qBAAhC;;AAeA,MAAMC,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC,IAAF;IAAQC;EAAR,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAcJ,eAAe,EAAnC;;EACA,QAAQE,IAAR;IACE,KAAK,iBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,KAAnB;QAA0B,OAAO,EAAEE,OAAO,CAACC,WAAR,CAAoBC;MAAvD,EAAP;;IACF,KAAK,aAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,MAAnB;QAA2B,OAAO,EAAEF,OAAO,CAACC,WAAR,CAAoBE;MAAxD,EAAP;;IACF,KAAK,aAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,SAAnB;QAA8B,OAAO,EAAEH,OAAO,CAACC,WAAR,CAAoBG;MAA3D,EAAP;;IACF,KAAK,kBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,MAAnB;QAA2B,OAAO,EAAEJ,OAAO,CAACC,WAAR,CAAoBI;MAAxD,EAAP;;IACF,KAAK,uBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,MAAnB;QAA2B,OAAO,EAAEL,OAAO,CAACC,WAAR,CAAoBK;MAAxD,EAAP;;IACF,KAAK,kBAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,QAAnB;QAA6B,OAAO,EAAEN,OAAO,CAACC,WAAR,CAAoBM;MAA1D,EAAP;;IACF,KAAK,UAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,IAAI,EAAE,SAAnB;QAA8B,OAAO,EAAEP,OAAO,CAACC,WAAR,CAAoBO;MAA3D,EAAP;;IACF,KAAK,aAAL;MACE,oBACE,oBAAC,WAAD;QACE,IAAI,EAAE,OADR;QAEE,OAAO,EAAER,OAAO,CAACC,WAAR,CAAoBQ,KAApB,CAA0BC,OAFrC;QAGE,eAAe,EAAEV,OAAO,CAACC,WAAR,CAAoBQ,KAApB,CAA0BE,WAH7C;QAIE,YAAY,EAAEZ;MAJhB,EADF;;IAQF,KAAK,SAAL;MACE,oBAAO,oBAAC,WAAD;QAAa,OAAO,MAApB;QAAqB,IAAI,EAAE;MAA3B,EAAP;EAzBJ;AA2BD,CA7BD;;AA+BA,eAAeF,gBAAf"}

package/lib/module/containers/GroupChannelPreviewContainer.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Pressable } from 'react-native';
 import { useChannelHandler, useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
 import { GroupChannelPreview, Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { getFileExtension, getFileType, isDifferentChannel, isMyMessage, useIIFE, useUniqId } from '@sendbird/uikit-utils';
+import { getFileExtension, getFileType, isDifferentChannel, isMyMessage, useIIFE, useUniqHandlerId } from '@sendbird/uikit-utils';
 import ChannelCover from '../components/ChannelCover';
 import { DEFAULT_LONG_PRESS_DELAY } from '../constants';
 import { useLocalization, useSendbirdChat } from '../hooks/useContext';
@@ -34,8 +34,8 @@ const GroupChannelPreviewContainer = _ref => {
   const [typingUsers, setTypingUsers] = useState([]);
 
   if (features.channelListTypingIndicatorEnabled) {
-    const typingId = useUniqId('GroupChannelPreviewContainer');
-    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {
+    const handlerId = useUniqHandlerId('GroupChannelPreviewContainer_TypingIndicator');
+    useChannelHandler(sdk, handlerId, {
       onTypingStatusUpdated(eventChannel) {
         if (isDifferentChannel(channel, eventChannel)) return;
         setTypingUsers(eventChannel.getTypingUsers());