@sendbird/uikit-react-native 1.0.0 → 1.1.0

package/lib/module/components/GroupChannelPreviewContainer.js

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { GroupChannelPreview, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import Icon from '@sendbird/uikit-react-native-foundation/src/ui/Icon';
+import { getFileExtension, getFileType, isDifferentChannel, isMyMessage, useForceUpdate, useIIFE, useUniqId } from '@sendbird/uikit-utils';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+import ChannelCover from './ChannelCover';
+import SBUPressable from './SBUPressable';
+const iconMapper = {
+  audio: 'file-audio',
+  image: 'photo',
+  video: 'play',
+  file: 'file-document'
+};
+
+const GroupChannelPreviewContainer = _ref => {
+  let {
+    onPress,
+    onLongPress,
+    channel
+  } = _ref;
+  const {
+    currentUser,
+    sdk,
+    features
+  } = useSendbirdChat();
+  const {
+    STRINGS
+  } = useLocalization();
+  const {
+    colors
+  } = useUIKitTheme();
+  const [typingUsers, setTypingUsers] = useState([]);
+  const forceUpdate = useForceUpdate();
+
+  if (features.channelListTypingIndicatorEnabled) {
+    const typingId = useUniqId('GroupChannelPreviewContainer');
+    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {
+      onTypingStatusUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        setTypingUsers(eventChannel.getTypingUsers());
+      }
+
+    });
+  }
+
+  if (features.channelListMessageReceiptStatusEnabled) {
+    const receiptId = useUniqId('GroupChannelPreviewContainer');
+    useChannelHandler(sdk, `GroupChannelPreviewContainer_ReceiptStatus_${receiptId}`, {
+      onDeliveryReceiptUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
+        if (!isMyMessage(eventChannel.lastMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId)) return;
+        forceUpdate();
+      },
+
+      onReadReceiptUpdated(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
+        if (!isMyMessage(eventChannel.lastMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId)) return;
+        forceUpdate();
+      }
+
+    });
+  }
+
+  const bodyText = useIIFE(() => {
+    if (typingUsers.length > 0) return STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers) || '';else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);
+  });
+  const bodyIcon = useIIFE(() => {
+    var _channel$lastMessage;
+
+    if (!((_channel$lastMessage = channel.lastMessage) !== null && _channel$lastMessage !== void 0 && _channel$lastMessage.isFileMessage())) return undefined;
+    return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];
+  });
+  const titleCaptionIcon = useIIFE(() => {
+    if (!channel.lastMessage) return undefined;
+    if (!features.channelListMessageReceiptStatusEnabled) return undefined;
+    if (!isMyMessage(channel.lastMessage, currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId)) return undefined;
+
+    if (channel.lastMessage.sendingStatus === 'pending') {
+      return /*#__PURE__*/React.createElement(LoadingSpinner, {
+        size: 16,
+        style: styles.titleCaptionIcon
+      });
+    }
+
+    if (channel.lastMessage.sendingStatus === 'failed') {
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: 'error',
+        size: 16,
+        color: colors.error,
+        style: styles.titleCaptionIcon
+      });
+    }
+
+    if (channel.getUnreadMemberCount(channel.lastMessage) === 0) {
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: 'done-all',
+        size: 16,
+        color: colors.secondary,
+        style: styles.titleCaptionIcon
+      });
+    }
+
+    if (features.deliveryReceiptEnabled) {
+      if (channel.getUndeliveredMemberCount(channel.lastMessage) === 0) {
+        return /*#__PURE__*/React.createElement(Icon, {
+          icon: 'done-all',
+          size: 16,
+          color: colors.onBackground03,
+          style: styles.titleCaptionIcon
+        });
+      }
+
+      return /*#__PURE__*/React.createElement(Icon, {
+        icon: 'done',
+        size: 16,
+        color: colors.onBackground03,
+        containerStyle: styles.titleCaptionIcon
+      });
+    }
+
+    return /*#__PURE__*/React.createElement(Icon, {
+      icon: 'done-all',
+      size: 16,
+      color: colors.onBackground03,
+      style: styles.titleCaptionIcon
+    });
+  });
+  return /*#__PURE__*/React.createElement(SBUPressable, {
+    onPress: onPress,
+    onLongPress: onLongPress
+  }, /*#__PURE__*/React.createElement(GroupChannelPreview, {
+    customCover: /*#__PURE__*/React.createElement(ChannelCover, {
+      channel: channel,
+      size: 56
+    }),
+    coverUrl: channel.coverUrl,
+    title: STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE((currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId) ?? '', channel),
+    titleCaptionLeft: titleCaptionIcon,
+    titleCaption: STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel),
+    body: bodyText,
+    bodyIcon: bodyIcon,
+    badgeCount: channel.unreadMessageCount,
+    memberCount: channel.memberCount > 2 ? channel.memberCount : undefined,
+    frozen: channel.isFrozen,
+    notificationOff: channel.myPushTriggerOption === 'off'
+  }));
+};
+
+const styles = createStyleSheet({
+  titleCaptionIcon: {
+    marginRight: 4
+  }
+});
+export default GroupChannelPreviewContainer;
+//# sourceMappingURL=GroupChannelPreviewContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useChannelHandler","GroupChannelPreview","LoadingSpinner","createStyleSheet","useUIKitTheme","Icon","getFileExtension","getFileType","isDifferentChannel","isMyMessage","useForceUpdate","useIIFE","useUniqId","useLocalization","useSendbirdChat","ChannelCover","SBUPressable","iconMapper","audio","image","video","file","GroupChannelPreviewContainer","onPress","onLongPress","channel","currentUser","sdk","features","STRINGS","colors","typingUsers","setTypingUsers","forceUpdate","channelListTypingIndicatorEnabled","typingId","onTypingStatusUpdated","eventChannel","getTypingUsers","channelListMessageReceiptStatusEnabled","receiptId","onDeliveryReceiptUpdated","isGroupChannel","lastMessage","userId","onReadReceiptUpdated","bodyText","length","LABELS","TYPING_INDICATOR_TYPINGS","GROUP_CHANNEL_LIST","CHANNEL_PREVIEW_BODY","bodyIcon","isFileMessage","undefined","type","name","titleCaptionIcon","sendingStatus","styles","error","getUnreadMemberCount","secondary","deliveryReceiptEnabled","getUndeliveredMemberCount","onBackground03","coverUrl","CHANNEL_PREVIEW_TITLE","CHANNEL_PREVIEW_TITLE_CAPTION","unreadMessageCount","memberCount","isFrozen","myPushTriggerOption","marginRight"],"sources":["GroupChannelPreviewContainer.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { useChannelHandler } from '@sendbird/uikit-chat-hooks';\nimport {\n  GroupChannelPreview,\n  LoadingSpinner,\n  createStyleSheet,\n  useUIKitTheme,\n} from '@sendbird/uikit-react-native-foundation';\nimport Icon from '@sendbird/uikit-react-native-foundation/src/ui/Icon';\nimport {\n  SendbirdGroupChannel,\n  SendbirdUser,\n  getFileExtension,\n  getFileType,\n  isDifferentChannel,\n  isMyMessage,\n  useForceUpdate,\n  useIIFE,\n  useUniqId,\n} from '@sendbird/uikit-utils';\n\nimport { useLocalization, useSendbirdChat } from '../hooks/useContext';\nimport ChannelCover from './ChannelCover';\nimport SBUPressable from './SBUPressable';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = {\n  channel: SendbirdGroupChannel;\n  onPress: () => void;\n  onLongPress: () => void;\n};\nconst GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props) => {\n  const { currentUser, sdk, features } = useSendbirdChat();\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n\n  const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);\n  const forceUpdate = useForceUpdate();\n\n  if (features.channelListTypingIndicatorEnabled) {\n    const typingId = useUniqId('GroupChannelPreviewContainer');\n    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {\n      onTypingStatusUpdated(eventChannel) {\n        if (isDifferentChannel(channel, eventChannel)) return;\n        setTypingUsers(eventChannel.getTypingUsers());\n      },\n    });\n  }\n\n  if (features.channelListMessageReceiptStatusEnabled) {\n    const receiptId = useUniqId('GroupChannelPreviewContainer');\n    useChannelHandler(sdk, `GroupChannelPreviewContainer_ReceiptStatus_${receiptId}`, {\n      onDeliveryReceiptUpdated(eventChannel) {\n        if (isDifferentChannel(channel, eventChannel)) return;\n        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;\n        if (!isMyMessage(eventChannel.lastMessage, currentUser?.userId)) return;\n\n        forceUpdate();\n      },\n      onReadReceiptUpdated(eventChannel) {\n        if (isDifferentChannel(channel, eventChannel)) return;\n        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;\n        if (!isMyMessage(eventChannel.lastMessage, currentUser?.userId)) return;\n\n        forceUpdate();\n      },\n    });\n  }\n\n  const bodyText = useIIFE(() => {\n    if (typingUsers.length > 0) return STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers) || '';\n    else return STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel);\n  });\n\n  const bodyIcon = useIIFE(() => {\n    if (!channel.lastMessage?.isFileMessage()) return undefined;\n    return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];\n  });\n\n  const titleCaptionIcon = useIIFE(() => {\n    if (!channel.lastMessage) return undefined;\n    if (!features.channelListMessageReceiptStatusEnabled) return undefined;\n    if (!isMyMessage(channel.lastMessage, currentUser?.userId)) return undefined;\n\n    if (channel.lastMessage.sendingStatus === 'pending') {\n      return <LoadingSpinner size={16} style={styles.titleCaptionIcon} />;\n    }\n\n    if (channel.lastMessage.sendingStatus === 'failed') {\n      return <Icon icon={'error'} size={16} color={colors.error} style={styles.titleCaptionIcon} />;\n    }\n\n    if (channel.getUnreadMemberCount(channel.lastMessage) === 0) {\n      return <Icon icon={'done-all'} size={16} color={colors.secondary} style={styles.titleCaptionIcon} />;\n    }\n\n    if (features.deliveryReceiptEnabled) {\n      if (channel.getUndeliveredMemberCount(channel.lastMessage) === 0) {\n        return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;\n      }\n      return <Icon icon={'done'} size={16} color={colors.onBackground03} containerStyle={styles.titleCaptionIcon} />;\n    }\n\n    return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;\n  });\n\n  return (\n    <SBUPressable onPress={onPress} onLongPress={onLongPress}>\n      <GroupChannelPreview\n        customCover={<ChannelCover channel={channel} size={56} />}\n        coverUrl={channel.coverUrl}\n        title={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(currentUser?.userId ?? '', channel)}\n        titleCaptionLeft={titleCaptionIcon}\n        titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}\n        body={bodyText}\n        bodyIcon={bodyIcon}\n        badgeCount={channel.unreadMessageCount}\n        memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}\n        frozen={channel.isFrozen}\n        notificationOff={channel.myPushTriggerOption === 'off'}\n      />\n    </SBUPressable>\n  );\n};\n\nconst styles = createStyleSheet({\n  titleCaptionIcon: {\n    marginRight: 4,\n  },\n});\n\nexport default GroupChannelPreviewContainer;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","Text","createStyleSheet","useUIKitTheme","AdminMessage","message","nextMessage","colors","isNextAdmin","isAdminMessage","flatten","styles","container","nextAdminType","next","onBackground02","text","width","alignSelf","alignItems","marginBottom","textAlign"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdAdminMessage } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\n\nexport type AdminMessageProps = MessageRendererInterface<SendbirdAdminMessage>;\nconst AdminMessage: React.FC<AdminMessageProps> = ({ message, nextMessage }) => {\n  const { colors } = useUIKitTheme();\n\n  const isNextAdmin = nextMessage?.isAdminMessage();\n  return (\n    <View style={StyleSheet.flatten([styles.container, isNextAdmin ? styles.nextAdminType : styles.next])}>\n      <Text caption2 color={colors.onBackground02} style={styles.text}>\n        {message.message}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 300,\n    alignSelf: 'center',\n    alignItems: 'center',\n  },\n  nextAdminType: {\n    marginBottom: 8,\n  },\n  next: {\n    marginBottom: 16,\n  },\n  text: {\n    textAlign: 'center',\n  },\n});\n\nexport default AdminMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;;AAMA,MAAMC,YAAyC,GAAG,QAA8B;EAAA,IAA7B;IAAEC,OAAF;IAAWC;EAAX,CAA6B;EAC9E,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EAEA,MAAMK,WAAW,GAAGF,WAAH,aAAGA,WAAH,uBAAGA,WAAW,CAAEG,cAAb,EAApB;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEV,UAAU,CAACW,OAAX,CAAmB,CAACC,MAAM,CAACC,SAAR,EAAmBJ,WAAW,GAAGG,MAAM,CAACE,aAAV,GAA0BF,MAAM,CAACG,IAA/D,CAAnB;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEP,MAAM,CAACQ,cAA7B;IAA6C,KAAK,EAAEJ,MAAM,CAACK;EAA3D,GACGX,OAAO,CAACA,OADX,CADF,CADF;AAOD,CAXD;;AAaA,MAAMM,MAAM,GAAGT,gBAAgB,CAAC;EAC9BU,SAAS,EAAE;IACTK,KAAK,EAAE,GADE;IAETC,SAAS,EAAE,QAFF;IAGTC,UAAU,EAAE;EAHH,CADmB;EAM9BN,aAAa,EAAE;IACbO,YAAY,EAAE;EADD,CANe;EAS9BN,IAAI,EAAE;IACJM,YAAY,EAAE;EADV,CATwB;EAY9BJ,IAAI,EAAE;IACJK,SAAS,EAAE;EADP;AAZwB,CAAD,CAA/B;AAiBA,eAAejB,YAAf"}
+{"version":3,"names":["React","StyleSheet","View","Text","createStyleSheet","useUIKitTheme","AdminMessage","message","nextMessage","colors","isNextAdmin","isAdminMessage","flatten","styles","container","nextAdminType","next","onBackground02","text","width","alignSelf","alignItems","marginBottom","textAlign"],"sources":["index.tsx"],"sourcesContent":["import React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdAdminMessage } from '@sendbird/uikit-utils';\n\nimport type { MessageRendererInterface } from '../index';\n\nexport type AdminMessageProps = MessageRendererInterface<SendbirdAdminMessage>;\nconst AdminMessage = ({ message, nextMessage }: AdminMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const isNextAdmin = nextMessage?.isAdminMessage();\n  return (\n    <View style={StyleSheet.flatten([styles.container, isNextAdmin ? styles.nextAdminType : styles.next])}>\n      <Text caption2 color={colors.onBackground02} style={styles.text}>\n        {message.message}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    width: 300,\n    alignSelf: 'center',\n    alignItems: 'center',\n  },\n  nextAdminType: {\n    marginBottom: 8,\n  },\n  next: {\n    marginBottom: 16,\n  },\n  text: {\n    textAlign: 'center',\n  },\n});\n\nexport default AdminMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,cAAjC;AAEA,SAASC,IAAT,EAAeC,gBAAf,EAAiCC,aAAjC,QAAsD,yCAAtD;;AAMA,MAAMC,YAAY,GAAG,QAAiD;EAAA,IAAhD;IAAEC,OAAF;IAAWC;EAAX,CAAgD;EACpE,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EAEA,MAAMK,WAAW,GAAGF,WAAH,aAAGA,WAAH,uBAAGA,WAAW,CAAEG,cAAb,EAApB;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAEV,UAAU,CAACW,OAAX,CAAmB,CAACC,MAAM,CAACC,SAAR,EAAmBJ,WAAW,GAAGG,MAAM,CAACE,aAAV,GAA0BF,MAAM,CAACG,IAA/D,CAAnB;EAAb,gBACE,oBAAC,IAAD;IAAM,QAAQ,MAAd;IAAe,KAAK,EAAEP,MAAM,CAACQ,cAA7B;IAA6C,KAAK,EAAEJ,MAAM,CAACK;EAA3D,GACGX,OAAO,CAACA,OADX,CADF,CADF;AAOD,CAXD;;AAaA,MAAMM,MAAM,GAAGT,gBAAgB,CAAC;EAC9BU,SAAS,EAAE;IACTK,KAAK,EAAE,GADE;IAETC,SAAS,EAAE,QAFF;IAGTC,UAAU,EAAE;EAHH,CADmB;EAM9BN,aAAa,EAAE;IACbO,YAAY,EAAE;EADD,CANe;EAS9BN,IAAI,EAAE;IACJM,YAAY,EAAE;EADV,CATwB;EAY9BJ,IAAI,EAAE;IACJK,SAAS,EAAE;EADP;AAZwB,CAAD,CAA/B;AAiBA,eAAejB,YAAf"}

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Icon","Text","createStyleSheet","useUIKitTheme","useLocalization","iconMapper","audio","image","video","file","BaseFileMessage","message","variant","pressed","type","STRINGS","colors","color","ui","styles","container","backgroundColor","background","padding","borderRadius","marginRight","textMsg","name","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","flexDirection","alignItems","justifyContent","paddingHorizontal","paddingVertical","flexShrink"],"sources":["BaseFileMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\nconst BaseFileMessage: React.FC<FileMessageProps & { type: 'image' | 'audio' | 'video' | 'file' }> = ({\n  message,\n  variant,\n  pressed,\n  type,\n}) => {\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      <Icon\n        icon={iconMapper[type]}\n        size={24}\n        containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n      />\n      <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default BaseFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,aAAvC,QAA4D,yCAA5D;AAEA,SAASC,eAAT,QAAgC,2BAAhC;AAGA,MAAMC,UAAU,GAAG;EAAEC,KAAK,EAAE,YAAT;EAAuBC,KAAK,EAAE,OAA9B;EAAuCC,KAAK,EAAE,MAA9C;EAAsDC,IAAI,EAAE;AAA5D,CAAnB;;AAEA,MAAMC,eAA4F,GAAG,QAK/F;EAAA,IALgG;IACpGC,OADoG;IAEpGC,OAFoG;IAGpGC,OAHoG;IAIpGC;EAJoG,CAKhG;EACJ,MAAM;IAAEC;EAAF,IAAcX,eAAe,EAAnC;EACA,MAAM;IAAEY;EAAF,IAAab,aAAa,EAAhC;EACA,MAAMc,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUP,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAnB;EAAb,gBACE,oBAAC,IAAD;IACE,IAAI,EAAEjB,UAAU,CAACS,IAAD,CADlB;IAEE,IAAI,EAAE,EAFR;IAGE,cAAc,EAAE;MAAEO,eAAe,EAAEL,MAAM,CAACM,UAA1B;MAAsCC,OAAO,EAAE,CAA/C;MAAkDC,YAAY,EAAE,CAAhE;MAAmEC,WAAW,EAAE;IAAhF;EAHlB,EADF,eAME,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,QAA3B;IAAqC,aAAa,EAAE,CAApD;IAAuD,KAAK,EAAER,KAAK,CAACS,OAApE;IAA6E,KAAK,EAAEP,MAAM,CAACQ;EAA3F,GACGZ,OAAO,CAACa,aAAR,CAAsBC,yBAAtB,CAAgDlB,OAAhD,CADH,CANF,CADF;AAYD,CArBD;;AAuBA,MAAMQ,MAAM,GAAGjB,gBAAgB,CAAC;EAC9BkB,SAAS,EAAE;IACTU,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,cAAc,EAAE,QAHP;IAITC,iBAAiB,EAAE,EAJV;IAKTC,eAAe,EAAE,CALR;IAMTV,YAAY,EAAE;EANL,CADmB;EAS9BG,IAAI,EAAE;IACJQ,UAAU,EAAE;EADR;AATwB,CAAD,CAA/B;AAcA,eAAezB,eAAf"}
+{"version":3,"names":["React","View","Icon","Text","createStyleSheet","useUIKitTheme","useLocalization","iconMapper","audio","image","video","file","BaseFileMessage","message","variant","pressed","type","STRINGS","colors","color","ui","styles","container","backgroundColor","background","padding","borderRadius","marginRight","textMsg","name","GROUP_CHANNEL","MESSAGE_BUBBLE_FILE_TITLE","flexDirection","alignItems","justifyContent","paddingHorizontal","paddingVertical","flexShrink"],"sources":["BaseFileMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\n\nimport { useLocalization } from '../../../hooks/useContext';\nimport type { FileMessageProps } from './index';\n\nconst iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;\n\ntype Props = FileMessageProps & {\n  type: 'image' | 'audio' | 'video' | 'file';\n};\nconst BaseFileMessage = ({ message, variant, pressed, type }: Props) => {\n  const { STRINGS } = useLocalization();\n  const { colors } = useUIKitTheme();\n  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];\n  return (\n    <View style={[styles.container, { backgroundColor: color.background }]}>\n      <Icon\n        icon={iconMapper[type]}\n        size={24}\n        containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}\n      />\n      <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>\n        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}\n      </Text>\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n  },\n  name: {\n    flexShrink: 1,\n  },\n});\n\nexport default BaseFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,aAAvC,QAA4D,yCAA5D;AAEA,SAASC,eAAT,QAAgC,2BAAhC;AAGA,MAAMC,UAAU,GAAG;EAAEC,KAAK,EAAE,YAAT;EAAuBC,KAAK,EAAE,OAA9B;EAAuCC,KAAK,EAAE,MAA9C;EAAsDC,IAAI,EAAE;AAA5D,CAAnB;;AAKA,MAAMC,eAAe,GAAG,QAAgD;EAAA,IAA/C;IAAEC,OAAF;IAAWC,OAAX;IAAoBC,OAApB;IAA6BC;EAA7B,CAA+C;EACtE,MAAM;IAAEC;EAAF,IAAcX,eAAe,EAAnC;EACA,MAAM;IAAEY;EAAF,IAAab,aAAa,EAAhC;EACA,MAAMc,KAAK,GAAGD,MAAM,CAACE,EAAP,CAAUP,OAAV,CAAkBC,OAAlB,EAA2BC,OAAO,GAAG,SAAH,GAAe,SAAjD,CAAd;EACA,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAE,CAACM,MAAM,CAACC,SAAR,EAAmB;MAAEC,eAAe,EAAEJ,KAAK,CAACK;IAAzB,CAAnB;EAAb,gBACE,oBAAC,IAAD;IACE,IAAI,EAAEjB,UAAU,CAACS,IAAD,CADlB;IAEE,IAAI,EAAE,EAFR;IAGE,cAAc,EAAE;MAAEO,eAAe,EAAEL,MAAM,CAACM,UAA1B;MAAsCC,OAAO,EAAE,CAA/C;MAAkDC,YAAY,EAAE,CAAhE;MAAmEC,WAAW,EAAE;IAAhF;EAHlB,EADF,eAME,oBAAC,IAAD;IAAM,KAAK,MAAX;IAAY,aAAa,EAAE,QAA3B;IAAqC,aAAa,EAAE,CAApD;IAAuD,KAAK,EAAER,KAAK,CAACS,OAApE;IAA6E,KAAK,EAAEP,MAAM,CAACQ;EAA3F,GACGZ,OAAO,CAACa,aAAR,CAAsBC,yBAAtB,CAAgDlB,OAAhD,CADH,CANF,CADF;AAYD,CAhBD;;AAkBA,MAAMQ,MAAM,GAAGjB,gBAAgB,CAAC;EAC9BkB,SAAS,EAAE;IACTU,aAAa,EAAE,KADN;IAETC,UAAU,EAAE,QAFH;IAGTC,cAAc,EAAE,QAHP;IAITC,iBAAiB,EAAE,EAJV;IAKTC,eAAe,EAAE,CALR;IAMTV,YAAY,EAAE;EANL,CADmB;EAS9BG,IAAI,EAAE;IACJQ,UAAU,EAAE;EADR;AATwB,CAAD,CAA/B;AAcA,eAAezB,eAAf"}

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

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","ImageFileMessage","message","colors","imageNotFound","setImageNotFound","fileUrl","style","styles","image","backgroundColor","onBackground04","onBackground02","uri","width","maxWidth","height","borderRadius"],"sources":["ImageFileMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport type { FileMessageProps } from './index';\n\nconst ImageFileMessage: React.FC<FileMessageProps> = ({ message }) => {\n  const { colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  if (imageNotFound) {\n    return <Icon containerStyle={style} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />;\n  }\n\n  return (\n    <Image\n      source={{ uri: fileUrl }}\n      style={style}\n      resizeMode={'cover'}\n      resizeMethod={'resize'}\n      onError={() => setImageNotFound(true)}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AAEA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,gBAAtB,EAAwCC,aAAxC,QAA6D,yCAA7D;AACA,SAASC,8BAAT,QAA+C,uBAA/C;;AAIA,MAAMC,gBAA4C,GAAG,QAAiB;EAAA,IAAhB;IAAEC;EAAF,CAAgB;EACpE,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EACA,MAAM,CAACK,aAAD,EAAgBC,gBAAhB,IAAoCV,QAAQ,CAAC,KAAD,CAAlD;EAEA,MAAMW,OAAO,GAAGN,8BAA8B,CAACE,OAAD,CAA9C;EACA,MAAMK,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEP,MAAM,CAACQ;EAA1B,CAAf,CAAd;;EAEA,IAAIP,aAAJ,EAAmB;IACjB,oBAAO,oBAAC,IAAD;MAAM,cAAc,EAAEG,KAAtB;MAA6B,IAAI,EAAE,gBAAnC;MAAqD,IAAI,EAAE,EAA3D;MAA+D,KAAK,EAAEJ,MAAM,CAACS;IAA7E,EAAP;EACD;;EAED,oBACE,oBAAC,KAAD;IACE,MAAM,EAAE;MAAEC,GAAG,EAAEP;IAAP,CADV;IAEE,KAAK,EAAEC,KAFT;IAGE,UAAU,EAAE,OAHd;IAIE,YAAY,EAAE,QAJhB;IAKE,OAAO,EAAE,MAAMF,gBAAgB,CAAC,IAAD;EALjC,EADF;AASD,CApBD;;AAsBA,MAAMG,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,KAAK,EAAE;IACLK,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILC,YAAY,EAAE;EAJT;AADuB,CAAD,CAA/B;AASA,eAAehB,gBAAf"}
+{"version":3,"names":["React","useState","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","ImageFileMessage","message","colors","imageNotFound","setImageNotFound","fileUrl","style","styles","image","backgroundColor","onBackground04","onBackground02","uri","width","maxWidth","height","borderRadius"],"sources":["ImageFileMessage.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';\n\nimport type { FileMessageProps } from './index';\n\nconst ImageFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n  const [imageNotFound, setImageNotFound] = useState(false);\n\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  if (imageNotFound) {\n    return <Icon containerStyle={style} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />;\n  }\n\n  return (\n    <Image\n      source={{ uri: fileUrl }}\n      style={style}\n      resizeMode={'cover'}\n      resizeMethod={'resize'}\n      onError={() => setImageNotFound(true)}\n    />\n  );\n};\n\nconst styles = createStyleSheet({\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\n  },\n});\n\nexport default ImageFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AAEA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,gBAAtB,EAAwCC,aAAxC,QAA6D,yCAA7D;AACA,SAASC,8BAAT,QAA+C,uBAA/C;;AAIA,MAAMC,gBAAgB,GAAG,QAAmC;EAAA,IAAlC;IAAEC;EAAF,CAAkC;EAC1D,MAAM;IAAEC;EAAF,IAAaJ,aAAa,EAAhC;EACA,MAAM,CAACK,aAAD,EAAgBC,gBAAhB,IAAoCV,QAAQ,CAAC,KAAD,CAAlD;EAEA,MAAMW,OAAO,GAAGN,8BAA8B,CAACE,OAAD,CAA9C;EACA,MAAMK,KAAK,GAAG,CAACC,MAAM,CAACC,KAAR,EAAe;IAAEC,eAAe,EAAEP,MAAM,CAACQ;EAA1B,CAAf,CAAd;;EAEA,IAAIP,aAAJ,EAAmB;IACjB,oBAAO,oBAAC,IAAD;MAAM,cAAc,EAAEG,KAAtB;MAA6B,IAAI,EAAE,gBAAnC;MAAqD,IAAI,EAAE,EAA3D;MAA+D,KAAK,EAAEJ,MAAM,CAACS;IAA7E,EAAP;EACD;;EAED,oBACE,oBAAC,KAAD;IACE,MAAM,EAAE;MAAEC,GAAG,EAAEP;IAAP,CADV;IAEE,KAAK,EAAEC,KAFT;IAGE,UAAU,EAAE,OAHd;IAIE,YAAY,EAAE,QAJhB;IAKE,OAAO,EAAE,MAAMF,gBAAgB,CAAC,IAAD;EALjC,EADF;AASD,CApBD;;AAsBA,MAAMG,MAAM,GAAGV,gBAAgB,CAAC;EAC9BW,KAAK,EAAE;IACLK,KAAK,EAAE,GADF;IAELC,QAAQ,EAAE,GAFL;IAGLC,MAAM,EAAE,GAHH;IAILC,YAAY,EAAE;EAJT;AADuB,CAAD,CAA/B;AASA,eAAehB,gBAAf"}

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

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { usePlatformService } from '../../../hooks/useContext';
+
+const VideoFileMessage = _ref => {
+  let {
+    message
+  } = _ref;
+  const {
+    colors
+  } = useUIKitTheme();
+  const {
+    mediaService
+  } = usePlatformService();
+  const fileUrl = getAvailableUriFromFileMessage(message);
+  const style = [styles.image, {
+    backgroundColor: colors.onBackground04
+  }];
+  const [state, setState] = useState({
+    thumbnail: null,
+    loading: true,
+    imageNotFound: false
+  });
+  useEffect(() => {
+    mediaService === null || mediaService === void 0 ? void 0 : mediaService.getVideoThumbnail({
+      url: fileUrl,
+      timeMills: 1000
+    }).then(result => {
+      if (result !== null && result !== void 0 && result.path) {
+        setState(prev => ({ ...prev,
+          loading: false,
+          thumbnail: result.path
+        }));
+      } else {
+        throw new Error('Cannot generate thumbnail');
+      }
+    }).catch(() => {
+      setState(prev => ({ ...prev,
+        loading: false,
+        imageNotFound: true
+      }));
+    });
+  }, []);
+
+  if (state.loading || state.imageNotFound) {
+    return /*#__PURE__*/React.createElement(View, {
+      style: [style, styles.container]
+    }, /*#__PURE__*/React.createElement(PlayIcon, null));
+  }
+
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: state.thumbnail || fileUrl
+    },
+    style: style,
+    resizeMode: 'cover',
+    resizeMethod: 'resize',
+    onError: () => setState(prev => ({ ...prev,
+      imageNotFound: true
+    }))
+  }), /*#__PURE__*/React.createElement(PlayIcon, null));
+};
+
+const PlayIcon = () => {
+  const {
+    colors
+  } = useUIKitTheme();
+  return /*#__PURE__*/React.createElement(Icon, {
+    icon: 'play',
+    size: 28,
+    color: colors.onBackground02,
+    containerStyle: [styles.playIcon, {
+      backgroundColor: colors.onBackgroundReverse01
+    }]
+  });
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: 240,
+    maxWidth: 240,
+    height: 160,
+    borderRadius: 16
+  },
+  playIcon: {
+    position: 'absolute',
+    padding: 10,
+    borderRadius: 50
+  }
+});
+export default VideoFileMessage;
+//# sourceMappingURL=VideoFileMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","View","Icon","Image","createStyleSheet","useUIKitTheme","getAvailableUriFromFileMessage","usePlatformService","VideoFileMessage","message","colors","mediaService","fileUrl","style","styles","image","backgroundColor","onBackground04","state","setState","thumbnail","loading","imageNotFound","getVideoThumbnail","url","timeMills","then","result","path","prev","Error","catch","container","uri","PlayIcon","onBackground02","playIcon","onBackgroundReverse01","alignItems","justifyContent","width","maxWidth","height","borderRadius","position","padding"],"sources":["VideoFileMessage.tsx"],"sourcesContent":["import React, { useEffect, 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 VideoFileMessage = ({ message }: FileMessageProps) => {\n  const { colors } = useUIKitTheme();\n\n  const { mediaService } = usePlatformService();\n  const fileUrl = getAvailableUriFromFileMessage(message);\n  const style = [styles.image, { backgroundColor: colors.onBackground04 }];\n\n  const [state, setState] = useState({\n    thumbnail: null as null | string,\n    loading: true,\n    imageNotFound: false,\n  });\n\n  useEffect(() => {\n    mediaService\n      ?.getVideoThumbnail({ url: fileUrl, timeMills: 1000 })\n      .then((result) => {\n        if (result?.path) {\n          setState((prev) => ({ ...prev, loading: false, thumbnail: result.path }));\n        } else {\n          throw new Error('Cannot generate thumbnail');\n        }\n      })\n      .catch(() => {\n        setState((prev) => ({ ...prev, loading: false, imageNotFound: true }));\n      });\n  }, []);\n\n  if (state.loading || state.imageNotFound) {\n    return (\n      <View style={[style, styles.container]}>\n        <PlayIcon />\n      </View>\n    );\n  }\n\n  return (\n    <View style={styles.container}>\n      <Image\n        source={{ uri: state.thumbnail || fileUrl }}\n        style={style}\n        resizeMode={'cover'}\n        resizeMethod={'resize'}\n        onError={() => setState((prev) => ({ ...prev, imageNotFound: true }))}\n      />\n      <PlayIcon />\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  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  image: {\n    width: 240,\n    maxWidth: 240,\n    height: 160,\n    borderRadius: 16,\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/FileMessage/index.js

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

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","createStyleSheet","MessageContainer","children","styles","container","flexDirection","paddingHorizontal"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\n\nconst MessageContainer: React.FC = ({ children }) => {\n  return <View style={styles.container}>{children}</View>;\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'column',\n    paddingHorizontal: 16,\n  },\n});\n\nexport default MessageContainer;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,gBAAT,QAAiC,yCAAjC;;AAEA,MAAMC,gBAA0B,GAAG,QAAkB;EAAA,IAAjB;IAAEC;EAAF,CAAiB;EACnD,oBAAO,oBAAC,IAAD;IAAM,KAAK,EAAEC,MAAM,CAACC;EAApB,GAAgCF,QAAhC,CAAP;AACD,CAFD;;AAIA,MAAMC,MAAM,GAAGH,gBAAgB,CAAC;EAC9BI,SAAS,EAAE;IACTC,aAAa,EAAE,QADN;IAETC,iBAAiB,EAAE;EAFV;AADmB,CAAD,CAA/B;AAOA,eAAeL,gBAAf"}
+{"version":3,"names":["React","View","createStyleSheet","MessageContainer","children","styles","container","flexDirection","paddingHorizontal"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { createStyleSheet } from '@sendbird/uikit-react-native-foundation';\n\nconst MessageContainer = ({ children }: React.PropsWithChildren) => {\n  return <View style={styles.container}>{children}</View>;\n};\n\nconst styles = createStyleSheet({\n  container: {\n    flexDirection: 'column',\n    paddingHorizontal: 16,\n  },\n});\n\nexport default MessageContainer;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,gBAAT,QAAiC,yCAAjC;;AAEA,MAAMC,gBAAgB,GAAG,QAA2C;EAAA,IAA1C;IAAEC;EAAF,CAA0C;EAClE,oBAAO,oBAAC,IAAD;IAAM,KAAK,EAAEC,MAAM,CAACC;EAApB,GAAgCF,QAAhC,CAAP;AACD,CAFD;;AAIA,MAAMC,MAAM,GAAGH,gBAAgB,CAAC;EAC9BI,SAAS,EAAE;IACTC,aAAa,EAAE,QADN;IAETC,iBAAiB,EAAE;EAFV;AADmB,CAAD,CAA/B;AAOA,eAAeL,gBAAf"}

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: React.FC<Props> = ({ message, prevMessage }) => {\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,oBAAqC,GAAG,QAA8B;EAAA,IAA7B;IAAEC,OAAF;IAAWC;EAAX,CAA6B;EAC1E,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  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"}

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","Avatar","createStyleSheet","MessageIncomingAvatar","message","grouping","styles","avatar","isFileMessage","isUserMessage","sender","profileUrl","width","marginRight"],"sources":["MessageIncomingAvatar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\ntype Props = { message: SendbirdMessage; grouping: boolean };\nconst MessageIncomingAvatar: React.FC<Props> = ({ message, grouping }) => {\n  if (grouping) return <View style={styles.avatar} />;\n  return (\n    <View style={styles.avatar}>\n      {(message.isFileMessage() || message.isUserMessage()) && <Avatar size={26} uri={message.sender?.profileUrl} />}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  avatar: {\n    width: 26,\n    marginRight: 12,\n  },\n});\n\nexport default MessageIncomingAvatar;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,MAAT,EAAiBC,gBAAjB,QAAyC,yCAAzC;;AAIA,MAAMC,qBAAsC,GAAG,QAA2B;EAAA;;EAAA,IAA1B;IAAEC,OAAF;IAAWC;EAAX,CAA0B;EACxE,IAAIA,QAAJ,EAAc,oBAAO,oBAAC,IAAD;IAAM,KAAK,EAAEC,MAAM,CAACC;EAApB,EAAP;EACd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAED,MAAM,CAACC;EAApB,GACG,CAACH,OAAO,CAACI,aAAR,MAA2BJ,OAAO,CAACK,aAAR,EAA5B,kBAAwD,oBAAC,MAAD;IAAQ,IAAI,EAAE,EAAd;IAAkB,GAAG,qBAAEL,OAAO,CAACM,MAAV,oDAAE,gBAAgBC;EAAvC,EAD3D,CADF;AAKD,CAPD;;AASA,MAAML,MAAM,GAAGJ,gBAAgB,CAAC;EAC9BK,MAAM,EAAE;IACNK,KAAK,EAAE,EADD;IAENC,WAAW,EAAE;EAFP;AADsB,CAAD,CAA/B;AAOA,eAAeV,qBAAf"}
+{"version":3,"names":["React","View","Avatar","createStyleSheet","MessageIncomingAvatar","message","grouping","styles","avatar","isFileMessage","isUserMessage","sender","profileUrl","width","marginRight"],"sources":["MessageIncomingAvatar.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\n\ntype Props = {\n  message: SendbirdMessage;\n  grouping: boolean;\n};\nconst MessageIncomingAvatar = ({ message, grouping }: Props) => {\n  if (grouping) return <View style={styles.avatar} />;\n  return (\n    <View style={styles.avatar}>\n      {(message.isFileMessage() || message.isUserMessage()) && <Avatar size={26} uri={message.sender?.profileUrl} />}\n    </View>\n  );\n};\n\nconst styles = createStyleSheet({\n  avatar: {\n    width: 26,\n    marginRight: 12,\n  },\n});\n\nexport default MessageIncomingAvatar;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,QAAqB,cAArB;AAEA,SAASC,MAAT,EAAiBC,gBAAjB,QAAyC,yCAAzC;;AAOA,MAAMC,qBAAqB,GAAG,QAAkC;EAAA;;EAAA,IAAjC;IAAEC,OAAF;IAAWC;EAAX,CAAiC;EAC9D,IAAIA,QAAJ,EAAc,oBAAO,oBAAC,IAAD;IAAM,KAAK,EAAEC,MAAM,CAACC;EAApB,EAAP;EACd,oBACE,oBAAC,IAAD;IAAM,KAAK,EAAED,MAAM,CAACC;EAApB,GACG,CAACH,OAAO,CAACI,aAAR,MAA2BJ,OAAO,CAACK,aAAR,EAA5B,kBAAwD,oBAAC,MAAD;IAAQ,IAAI,EAAE,EAAd;IAAkB,GAAG,qBAAEL,OAAO,CAACM,MAAV,oDAAE,gBAAgBC;EAAvC,EAD3D,CADF;AAKD,CAPD;;AASA,MAAML,MAAM,GAAGJ,gBAAgB,CAAC;EAC9BK,MAAM,EAAE;IACNK,KAAK,EAAE,EADD;IAENC,WAAW,EAAE;EAFP;AADsB,CAAD,CAA/B;AAOA,eAAeV,qBAAf"}

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 = { message: SendbirdMessage; grouping: boolean };\nconst MessageIncomingSenderName: React.FC<Props> = ({ message, grouping }) => {\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}>\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;;AAGA,MAAMC,yBAA0C,GAAG,QAA2B;EAAA;;EAAA,IAA1B;IAAEC,OAAF;IAAWC;EAAX,CAA0B;EAC5E,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;EAAzD,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","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}>\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;EAAzD,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"}

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

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { useUniqId } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
 import { useSendbirdChat } from '../../hooks/useContext';
 const SIZE = 16;
 
@@ -10,7 +10,6 @@ const MessageOutgoingStatus = _ref => {
     message
   } = _ref;
   if (!message.isUserMessage() && !message.isFileMessage()) return null;
-  const handlerId = useUniqId('MessageOutgoingStatus');
   const {
     sdk,
     features
@@ -18,41 +17,33 @@ const MessageOutgoingStatus = _ref => {
   const {
     colors
   } = useUIKitTheme();
-  const [state, setState] = useState(() => ({
-    unreadCount: channel.getUnreadMemberCount(message),
-    undeliveredCount: channel.getUndeliveredMemberCount(message)
-  }));
-
-  const getCounts = (channel, message) => {
-    return {
-      unreadCount: channel.getUnreadMemberCount(message),
-      undeliveredCount: channel.getUndeliveredMemberCount(message)
-    };
-  };
-
+  const uniqId = useUniqId('MessageOutgoingStatus');
+  const forceUpdate = useForceUpdate();
   useEffect(() => {
-    const id = String(handlerId);
+    const handlerId = `MessageOutgoingStatus_${uniqId}`;
 
-    if (message.sendingStatus === 'succeeded' && state.unreadCount === 0 && state.undeliveredCount === 0) {
-      sdk.removeChannelHandler(id);
+    if (message.sendingStatus === 'succeeded' && channel.getUnreadMemberCount(message) === 0 && channel.getUndeliveredMemberCount(message) === 0) {
+      sdk.removeChannelHandler(handlerId);
     } else {
       const handler = new sdk.ChannelHandler();
 
-      handler.onReadReceiptUpdated = channel => {
-        if (channel.url === message.channelUrl) setState(getCounts(channel, message));
+      handler.onReadReceiptUpdated = eventChannel => {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        forceUpdate();
       };
 
       if (features.deliveryReceiptEnabled) {
-        handler.onDeliveryReceiptUpdated = channel => {
-          if (channel.url === message.channelUrl && channel.isGroupChannel()) setState(getCounts(channel, message));
+        handler.onDeliveryReceiptUpdated = eventChannel => {
+          if (isDifferentChannel(channel, eventChannel)) return;
+          forceUpdate();
         };
       }
 
-      sdk.addChannelHandler(id, handler);
+      sdk.addChannelHandler(handlerId, handler);
     }
 
     return () => {
-      sdk.removeChannelHandler(id);
+      sdk.removeChannelHandler(handlerId);
     };
   }, [message.sendingStatus]);
 
@@ -72,7 +63,7 @@ const MessageOutgoingStatus = _ref => {
     });
   }
 
-  if (state.unreadCount === 0) {
+  if (channel.getUnreadMemberCount(message) === 0) {
     return /*#__PURE__*/React.createElement(Icon, {
       icon: 'done-all',
       size: SIZE,
@@ -82,7 +73,7 @@ const MessageOutgoingStatus = _ref => {
   }
 
   if (features.deliveryReceiptEnabled) {
-    if (state.undeliveredCount === 0) {
+    if (channel.getUndeliveredMemberCount(message) === 0) {
       return /*#__PURE__*/React.createElement(Icon, {
         icon: 'done-all',
         size: SIZE,

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useState","Icon","LoadingSpinner","createStyleSheet","useUIKitTheme","useUniqId","useSendbirdChat","SIZE","MessageOutgoingStatus","channel","message","isUserMessage","isFileMessage","handlerId","sdk","features","colors","state","setState","unreadCount","getUnreadMemberCount","undeliveredCount","getUndeliveredMemberCount","getCounts","id","String","sendingStatus","removeChannelHandler","handler","ChannelHandler","onReadReceiptUpdated","url","channelUrl","deliveryReceiptEnabled","onDeliveryReceiptUpdated","isGroupChannel","addChannelHandler","styles","container","error","secondary","onBackground03","marginRight","memo"],"sources":["MessageOutgoingStatus.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type {\n  SendbirdFileMessage,\n  SendbirdGroupChannel,\n  SendbirdMessage,\n  SendbirdUserMessage,\n} from '@sendbird/uikit-utils';\nimport { useUniqId } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from '../../hooks/useContext';\n\nconst SIZE = 16;\n\ntype Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };\nconst MessageOutgoingStatus: React.FC<Props> = ({ channel, message }) => {\n  if (!message.isUserMessage() && !message.isFileMessage()) return null;\n\n  const handlerId = useUniqId('MessageOutgoingStatus');\n\n  const { sdk, features } = useSendbirdChat();\n  const { colors } = useUIKitTheme();\n\n  const [state, setState] = useState(() => ({\n    unreadCount: channel.getUnreadMemberCount(message),\n    undeliveredCount: channel.getUndeliveredMemberCount(message),\n  }));\n\n  const getCounts = (channel: SendbirdGroupChannel, message: SendbirdUserMessage | SendbirdFileMessage) => {\n    return {\n      unreadCount: channel.getUnreadMemberCount(message),\n      undeliveredCount: channel.getUndeliveredMemberCount(message),\n    };\n  };\n\n  useEffect(() => {\n    const id = String(handlerId);\n    if (message.sendingStatus === 'succeeded' && state.unreadCount === 0 && state.undeliveredCount === 0) {\n      sdk.removeChannelHandler(id);\n    } else {\n      const handler = new sdk.ChannelHandler();\n      handler.onReadReceiptUpdated = (channel) => {\n        if (channel.url === message.channelUrl) setState(getCounts(channel, message));\n      };\n\n      if (features.deliveryReceiptEnabled) {\n        handler.onDeliveryReceiptUpdated = (channel) => {\n          if (channel.url === message.channelUrl && channel.isGroupChannel()) setState(getCounts(channel, message));\n        };\n      }\n      sdk.addChannelHandler(id, handler);\n    }\n\n    return () => {\n      sdk.removeChannelHandler(id);\n    };\n  }, [message.sendingStatus]);\n\n  if (message.sendingStatus === 'pending') {\n    return <LoadingSpinner size={SIZE} style={styles.container} />;\n  }\n\n  if (message.sendingStatus === 'failed') {\n    return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;\n  }\n\n  if (state.unreadCount === 0) {\n    return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;\n  }\n\n  if (features.deliveryReceiptEnabled) {\n    if (state.undeliveredCount === 0) {\n      return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n    }\n    return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n  }\n\n  return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n};\n\nconst styles = createStyleSheet({\n  container: {\n    marginRight: 4,\n  },\n});\n\nexport default React.memo(MessageOutgoingStatus);\n"],"mappings":"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"}
+{"version":3,"names":["React","useEffect","Icon","LoadingSpinner","createStyleSheet","useUIKitTheme","isDifferentChannel","useForceUpdate","useUniqId","useSendbirdChat","SIZE","MessageOutgoingStatus","channel","message","isUserMessage","isFileMessage","sdk","features","colors","uniqId","forceUpdate","handlerId","sendingStatus","getUnreadMemberCount","getUndeliveredMemberCount","removeChannelHandler","handler","ChannelHandler","onReadReceiptUpdated","eventChannel","deliveryReceiptEnabled","onDeliveryReceiptUpdated","addChannelHandler","styles","container","error","secondary","onBackground03","marginRight","memo"],"sources":["MessageOutgoingStatus.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';\nimport { isDifferentChannel, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';\n\nimport { useSendbirdChat } from '../../hooks/useContext';\n\nconst SIZE = 16;\n\ntype Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };\nconst MessageOutgoingStatus = ({ channel, message }: Props) => {\n  if (!message.isUserMessage() && !message.isFileMessage()) return null;\n\n  const { sdk, features } = useSendbirdChat();\n  const { colors } = useUIKitTheme();\n\n  const uniqId = useUniqId('MessageOutgoingStatus');\n  const forceUpdate = useForceUpdate();\n\n  useEffect(() => {\n    const handlerId = `MessageOutgoingStatus_${uniqId}`;\n\n    if (\n      message.sendingStatus === 'succeeded' &&\n      channel.getUnreadMemberCount(message) === 0 &&\n      channel.getUndeliveredMemberCount(message) === 0\n    ) {\n      sdk.removeChannelHandler(handlerId);\n    } else {\n      const handler = new sdk.ChannelHandler();\n\n      handler.onReadReceiptUpdated = (eventChannel) => {\n        if (isDifferentChannel(channel, eventChannel)) return;\n        forceUpdate();\n      };\n\n      if (features.deliveryReceiptEnabled) {\n        handler.onDeliveryReceiptUpdated = (eventChannel) => {\n          if (isDifferentChannel(channel, eventChannel)) return;\n          forceUpdate();\n        };\n      }\n\n      sdk.addChannelHandler(handlerId, handler);\n    }\n\n    return () => {\n      sdk.removeChannelHandler(handlerId);\n    };\n  }, [message.sendingStatus]);\n\n  if (message.sendingStatus === 'pending') {\n    return <LoadingSpinner size={SIZE} style={styles.container} />;\n  }\n\n  if (message.sendingStatus === 'failed') {\n    return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;\n  }\n\n  if (channel.getUnreadMemberCount(message) === 0) {\n    return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;\n  }\n\n  if (features.deliveryReceiptEnabled) {\n    if (channel.getUndeliveredMemberCount(message) === 0) {\n      return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n    }\n    return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n  }\n\n  return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;\n};\n\nconst styles = createStyleSheet({\n  container: {\n    marginRight: 4,\n  },\n});\n\nexport default React.memo(MessageOutgoingStatus);\n"],"mappings":"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"}

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 = { message: SendbirdMessage; grouping: boolean; style?: StyleProp<ViewStyle> };\nconst MessageTime: React.FC<Props> = ({ message, grouping, style }) => {\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;;AAGA,MAAMC,WAA4B,GAAG,QAAkC;EAAA,IAAjC;IAAEC,OAAF;IAAWC,QAAX;IAAqBC;EAArB,CAAiC;EACrE,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","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"}

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: React.FC<UnknownMessageProps> = ({ message, variant, pressed }) => {\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,cAA6C,GAAG,QAAmC;EAAA,IAAlC;IAAEC,OAAF;IAAWC,OAAX;IAAoBC;EAApB,CAAkC;EACvF,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","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"}