npm - @sendbird/uikit-react-native-foundation - Versions diffs - 3.5.4 → 3.6.0 - Mend

@sendbird/uikit-react-native-foundation 3.5.4 → 3.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

package/lib/commonjs/assets/icon/icon-thread.png ADDED Viewed

Binary file

package/lib/commonjs/assets/icon/icon-thread@2x.png ADDED Viewed

Binary file

package/lib/commonjs/assets/icon/icon-thread@3x.png ADDED Viewed

Binary file

package/lib/commonjs/assets/icon/index.js CHANGED Viewed

@@ -70,6 +70,7 @@ const IconAssets = {
   'streaming': require('./icon-streaming.png'),
   'supergroup': require('./icon-supergroup.png'),
   'theme': require('./icon-theme.png'),
+  'thread': require('./icon-thread.png'),
   'thumbnail-none': require('./icon-thumbnail-none.png'),
   'unarchive': require('./icon-unarchive.png'),
   'user': require('./icon-user.png')

package/lib/commonjs/assets/icon/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["IconAssets","require","_default","exports","default"],"sources":["index.ts"],"sourcesContent":["const IconAssets = {\n 'chat-hide': require('./ic-chat-hide.png'),\n 'chat-show': require('./ic-chat-show.png'),\n 'add': require('./icon-add.png'),\n 'archive': require('./icon-archive.png'),\n 'arrow-left': require('./icon-arrow-left.png'),\n 'audio-off-filled': require('./icon-audio-off-filled.png'),\n 'audio-off': require('./icon-audio-off.png'),\n 'audio-on-filled': require('./icon-audio-on-filled.png'),\n 'audio-on': require('./icon-audio-on.png'),\n 'ban': require('./icon-ban.png'),\n 'broadcast': require('./icon-broadcast.png'),\n 'camera': require('./icon-camera.png'),\n 'channels': require('./icon-channels.png'),\n 'chat-filled': require('./icon-chat-filled.png'),\n 'chat': require('./icon-chat.png'),\n 'checkbox-off': require('./icon-checkbox-off.png'),\n 'checkbox-on': require('./icon-checkbox-on.png'),\n 'chevron-down': require('./icon-chevron-down.png'),\n 'chevron-right': require('./icon-chevron-right.png'),\n 'close': require('./icon-close.png'),\n 'copy': require('./icon-copy.png'),\n 'create': require('./icon-create.png'),\n 'delete': require('./icon-delete.png'),\n 'document': require('./icon-document.png'),\n 'done-all': require('./icon-done-all.png'),\n 'done': require('./icon-done.png'),\n 'download': require('./icon-download.png'),\n 'edit': require('./icon-edit.png'),\n 'emoji-more': require('./icon-emoji-more.png'),\n 'error': require('./icon-error.png'),\n 'file-audio': require('./icon-file-audio.png'),\n 'file-document': require('./icon-file-document.png'),\n 'freeze': require('./icon-freeze.png'),\n 'gif': require('./icon-gif.png'),\n 'info': require('./icon-info.png'),\n 'leave': require('./icon-leave.png'),\n 'members': require('./icon-members.png'),\n 'message': require('./icon-message.png'),\n 'moderation': require('./icon-moderation.png'),\n 'more': require('./icon-more.png'),\n 'mute': require('./icon-mute.png'),\n 'notifications-filled': require('./icon-notifications-filled.png'),\n 'notifications-off-filled': require('./icon-notifications-off-filled.png'),\n 'notifications': require('./icon-notifications.png'),\n 'operator': require('./icon-operator.png'),\n 'pause': require('./icon-pause.png'),\n 'photo': require('./icon-photo.png'),\n 'play': require('./icon-play.png'),\n 'plus': require('./icon-plus.png'),\n 'question': require('./icon-question.png'),\n 'radio-off': require('./icon-radio-off.png'),\n 'radio-on': require('./icon-radio-on.png'),\n 'recording': require('./icon-recording.png'),\n 'refresh': require('./icon-refresh.png'),\n 'remove': require('./icon-remove.png'),\n 'reply-filled': require('./icon-reply-filled.png'),\n 'reply': require('./icon-reply.png'),\n 'search': require('./icon-search.png'),\n 'send': require('./icon-send.png'),\n 'settings-filled': require('./icon-settings-filled.png'),\n 'spinner': require('./icon-spinner.png'),\n 'stop': require('./icon-stop.png'),\n 'streaming': require('./icon-streaming.png'),\n 'supergroup': require('./icon-supergroup.png'),\n 'theme': require('./icon-theme.png'),\n 'thumbnail-none': require('./icon-thumbnail-none.png'),\n 'unarchive': require('./icon-unarchive.png'),\n 'user': require('./icon-user.png'),\n};\nexport default IconAssets;\n"],"mappings":"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"}
1	+ {"version":3,"names":["IconAssets","require","_default","exports","default"],"sources":["index.ts"],"sourcesContent":["const IconAssets = {\n 'chat-hide': require('./ic-chat-hide.png'),\n 'chat-show': require('./ic-chat-show.png'),\n 'add': require('./icon-add.png'),\n 'archive': require('./icon-archive.png'),\n 'arrow-left': require('./icon-arrow-left.png'),\n 'audio-off-filled': require('./icon-audio-off-filled.png'),\n 'audio-off': require('./icon-audio-off.png'),\n 'audio-on-filled': require('./icon-audio-on-filled.png'),\n 'audio-on': require('./icon-audio-on.png'),\n 'ban': require('./icon-ban.png'),\n 'broadcast': require('./icon-broadcast.png'),\n 'camera': require('./icon-camera.png'),\n 'channels': require('./icon-channels.png'),\n 'chat-filled': require('./icon-chat-filled.png'),\n 'chat': require('./icon-chat.png'),\n 'checkbox-off': require('./icon-checkbox-off.png'),\n 'checkbox-on': require('./icon-checkbox-on.png'),\n 'chevron-down': require('./icon-chevron-down.png'),\n 'chevron-right': require('./icon-chevron-right.png'),\n 'close': require('./icon-close.png'),\n 'copy': require('./icon-copy.png'),\n 'create': require('./icon-create.png'),\n 'delete': require('./icon-delete.png'),\n 'document': require('./icon-document.png'),\n 'done-all': require('./icon-done-all.png'),\n 'done': require('./icon-done.png'),\n 'download': require('./icon-download.png'),\n 'edit': require('./icon-edit.png'),\n 'emoji-more': require('./icon-emoji-more.png'),\n 'error': require('./icon-error.png'),\n 'file-audio': require('./icon-file-audio.png'),\n 'file-document': require('./icon-file-document.png'),\n 'freeze': require('./icon-freeze.png'),\n 'gif': require('./icon-gif.png'),\n 'info': require('./icon-info.png'),\n 'leave': require('./icon-leave.png'),\n 'members': require('./icon-members.png'),\n 'message': require('./icon-message.png'),\n 'moderation': require('./icon-moderation.png'),\n 'more': require('./icon-more.png'),\n 'mute': require('./icon-mute.png'),\n 'notifications-filled': require('./icon-notifications-filled.png'),\n 'notifications-off-filled': require('./icon-notifications-off-filled.png'),\n 'notifications': require('./icon-notifications.png'),\n 'operator': require('./icon-operator.png'),\n 'pause': require('./icon-pause.png'),\n 'photo': require('./icon-photo.png'),\n 'play': require('./icon-play.png'),\n 'plus': require('./icon-plus.png'),\n 'question': require('./icon-question.png'),\n 'radio-off': require('./icon-radio-off.png'),\n 'radio-on': require('./icon-radio-on.png'),\n 'recording': require('./icon-recording.png'),\n 'refresh': require('./icon-refresh.png'),\n 'remove': require('./icon-remove.png'),\n 'reply-filled': require('./icon-reply-filled.png'),\n 'reply': require('./icon-reply.png'),\n 'search': require('./icon-search.png'),\n 'send': require('./icon-send.png'),\n 'settings-filled': require('./icon-settings-filled.png'),\n 'spinner': require('./icon-spinner.png'),\n 'stop': require('./icon-stop.png'),\n 'streaming': require('./icon-streaming.png'),\n 'supergroup': require('./icon-supergroup.png'),\n 'theme': require('./icon-theme.png'),\n 'thread': require('./icon-thread.png'),\n 'thumbnail-none': require('./icon-thumbnail-none.png'),\n 'unarchive': require('./icon-unarchive.png'),\n 'user': require('./icon-user.png'),\n};\nexport default IconAssets;\n"],"mappings":"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"}

package/lib/commonjs/ui/GroupChannelMessage/Message.file.voice.js CHANGED Viewed

@@ -25,7 +25,10 @@ const VoiceFileMessage = props => {
     onToggleVoiceMessage,
     message,
     durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
-    onUnmount
+    onUnmount,
+    initialCurrentTime,
+    onSubscribeStatus,
+    onUnsubscribeStatus
   } = props;
   const {
     colors
@@ -37,7 +40,7 @@ const VoiceFileMessage = props => {
     const initialDuration = value ? parseInt(value, 10) : 0;
     return {
       status: 'paused',
-      currentTime: 0,
+      currentTime: initialCurrentTime || 0,
       duration: initialDuration
     };
   });
@@ -46,6 +49,18 @@ const VoiceFileMessage = props => {
       onUnmount();
     };
   }, []);
+  (0, _react.useEffect)(() => {
+    const updateCurrentTime = currentTime => {
+      setState(prev => ({
+        ...prev,
+        currentTime
+      }));
+    };
+    onSubscribeStatus === null || onSubscribeStatus === void 0 ? void 0 : onSubscribeStatus(props.channel.url, props.message.messageId, updateCurrentTime);
+    return () => {
+      onUnsubscribeStatus === null || onUnsubscribeStatus === void 0 ? void 0 : onUnsubscribeStatus(props.channel.url, props.message.messageId, updateCurrentTime);
+    };
+  }, []);
   const uiColors = colors.ui.groupChannelMessage[variant];
   const remainingTime = state.duration - state.currentTime;
   return /*#__PURE__*/_react.default.createElement(_MessageContainer.default, props, /*#__PURE__*/_react.default.createElement(_Box.default, {

package/lib/commonjs/ui/GroupChannelMessage/Message.file.voice.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","_interopRequireWildcard","require","_uikitUtils","_Box","_interopRequireDefault","_Icon","_PressBox","_ProgressBar","_Text","_createStyleSheet","_useUIKitTheme","_LoadingSpinner","_MessageContainer","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","VoiceFileMessage","props","onLongPress","variant","onToggleVoiceMessage","message","durationMetaArrayKey","onUnmount","colors","useUIKitTheme","state","setState","useState","_meta$value","meta","metaArrays","find","it","value","initialDuration","parseInt","status","currentTime","duration","useEffect","uiColors","ui","groupChannelMessage","remainingTime","createElement","style","styles","container","backgroundColor","enabled","background","onPress","current","total","minWidth","height","trackColor","voiceProgressTrack","overlay","flex","flexDirection","alignItems","justifyContent","paddingHorizontal","size","color","voiceSpinner","containerStyle","voiceActionIconBackground","padding","borderRadius","icon","body3","lineHeight","undefined","marginLeft","opacity","textVoicePlaytime","millsToMSS","children","createStyleSheet","overflow","image","maxWidth","width","_default","exports"],"sources":["Message.file.voice.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { millsToMSS } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport ProgressBar from '../../components/ProgressBar';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport LoadingSpinner from '../LoadingSpinner';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nexport type VoiceFileMessageState = {\n status: 'preparing' \| 'playing' \| 'paused';\n currentTime: number;\n duration: number;\n};\n\ntype Props = GroupChannelMessageProps<\n SendbirdFileMessage,\n {\n durationMetaArrayKey?: string;\n onUnmount: () => void;\n }\n>;\nconst VoiceFileMessage = (props: Props) => {\n const {\n onLongPress,\n variant = 'incoming',\n onToggleVoiceMessage,\n message,\n durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',\n onUnmount,\n } = props;\n\n const { colors } = useUIKitTheme();\n\n const [state, setState] = useState<VoiceFileMessageState>(() => {\n const meta = message.metaArrays.find((it) => it.key === durationMetaArrayKey);\n const value = meta?.value?.[0];\n const initialDuration = value ? parseInt(value, 10) : 0;\n return {\n status: 'paused',\n currentTime: 0,\n duration: initialDuration,\n };\n });\n\n useEffect(() => {\n return () => {\n onUnmount();\n };\n }, []);\n\n const uiColors = colors.ui.groupChannelMessage[variant];\n const remainingTime = state.duration - state.currentTime;\n\n return (\n <MessageContainer {...props}>\n <Box style={styles.container} backgroundColor={uiColors.enabled.background}>\n <PressBox onPress={() => onToggleVoiceMessage?.(state, setState)} onLongPress={onLongPress}>\n <ProgressBar\n current={state.currentTime}\n total={state.duration}\n style={{ minWidth: 136, height: 44 }}\n trackColor={uiColors.enabled.voiceProgressTrack}\n overlay={\n <Box\n flex={1}\n flexDirection={'row'}\n alignItems={'center'}\n justifyContent={'space-between'}\n paddingHorizontal={12}\n >\n {state.status === 'preparing' ? (\n <LoadingSpinner size={24} color={uiColors.enabled.voiceSpinner} />\n ) : (\n <Icon\n size={16}\n containerStyle={{\n backgroundColor: uiColors.enabled.voiceActionIconBackground,\n padding: 6,\n borderRadius: 16,\n }}\n icon={state.status === 'paused' ? 'play' : 'pause'}\n />\n )}\n <Text\n body3\n style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}\n color={uiColors.enabled.textVoicePlaytime}\n >\n {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}\n </Text>\n </Box>\n }\n />\n </PressBox>\n {props.children}\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n borderRadius: 16,\n overflow: 'hidden',\n },\n image: {\n maxWidth: 240,\n width: 240,\n height: 160,\n borderRadius: 16,\n overflow: 'hidden',\n },\n});\n\nexport default VoiceFileMessage;\n"],"mappings":"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"}
1	+ {"version":3,"names":["_react","_interopRequireWildcard","require","_uikitUtils","_Box","_interopRequireDefault","_Icon","_PressBox","_ProgressBar","_Text","_createStyleSheet","_useUIKitTheme","_LoadingSpinner","_MessageContainer","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","VoiceFileMessage","props","onLongPress","variant","onToggleVoiceMessage","message","durationMetaArrayKey","onUnmount","initialCurrentTime","onSubscribeStatus","onUnsubscribeStatus","colors","useUIKitTheme","state","setState","useState","_meta$value","meta","metaArrays","find","it","value","initialDuration","parseInt","status","currentTime","duration","useEffect","updateCurrentTime","prev","channel","url","messageId","uiColors","ui","groupChannelMessage","remainingTime","createElement","style","styles","container","backgroundColor","enabled","background","onPress","current","total","minWidth","height","trackColor","voiceProgressTrack","overlay","flex","flexDirection","alignItems","justifyContent","paddingHorizontal","size","color","voiceSpinner","containerStyle","voiceActionIconBackground","padding","borderRadius","icon","body3","lineHeight","undefined","marginLeft","opacity","textVoicePlaytime","millsToMSS","children","createStyleSheet","overflow","image","maxWidth","width","_default","exports"],"sources":["Message.file.voice.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { millsToMSS } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport ProgressBar from '../../components/ProgressBar';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport LoadingSpinner from '../LoadingSpinner';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nexport type VoiceFileMessageState = {\n status: 'preparing' \| 'playing' \| 'paused';\n currentTime: number;\n duration: number;\n};\n\ntype Props = GroupChannelMessageProps<\n SendbirdFileMessage,\n {\n durationMetaArrayKey?: string;\n onUnmount: () => void;\n initialCurrentTime?: number;\n onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;\n onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;\n }\n>;\nconst VoiceFileMessage = (props: Props) => {\n const {\n onLongPress,\n variant = 'incoming',\n onToggleVoiceMessage,\n message,\n durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',\n onUnmount,\n initialCurrentTime,\n onSubscribeStatus,\n onUnsubscribeStatus,\n } = props;\n\n const { colors } = useUIKitTheme();\n\n const [state, setState] = useState<VoiceFileMessageState>(() => {\n const meta = message.metaArrays.find((it) => it.key === durationMetaArrayKey);\n const value = meta?.value?.[0];\n const initialDuration = value ? parseInt(value, 10) : 0;\n return {\n status: 'paused',\n currentTime: initialCurrentTime \|\| 0,\n duration: initialDuration,\n };\n });\n\n useEffect(() => {\n return () => {\n onUnmount();\n };\n }, []);\n\n useEffect(() => {\n const updateCurrentTime = (currentTime: number) => {\n setState((prev) => ({ ...prev, currentTime }));\n };\n onSubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);\n return () => {\n onUnsubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);\n };\n }, []);\n\n const uiColors = colors.ui.groupChannelMessage[variant];\n const remainingTime = state.duration - state.currentTime;\n\n return (\n <MessageContainer {...props}>\n <Box style={styles.container} backgroundColor={uiColors.enabled.background}>\n <PressBox onPress={() => onToggleVoiceMessage?.(state, setState)} onLongPress={onLongPress}>\n <ProgressBar\n current={state.currentTime}\n total={state.duration}\n style={{ minWidth: 136, height: 44 }}\n trackColor={uiColors.enabled.voiceProgressTrack}\n overlay={\n <Box\n flex={1}\n flexDirection={'row'}\n alignItems={'center'}\n justifyContent={'space-between'}\n paddingHorizontal={12}\n >\n {state.status === 'preparing' ? (\n <LoadingSpinner size={24} color={uiColors.enabled.voiceSpinner} />\n ) : (\n <Icon\n size={16}\n containerStyle={{\n backgroundColor: uiColors.enabled.voiceActionIconBackground,\n padding: 6,\n borderRadius: 16,\n }}\n icon={state.status === 'paused' ? 'play' : 'pause'}\n />\n )}\n <Text\n body3\n style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}\n color={uiColors.enabled.textVoicePlaytime}\n >\n {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}\n </Text>\n </Box>\n }\n />\n </PressBox>\n {props.children}\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n borderRadius: 16,\n overflow: 'hidden',\n },\n image: {\n maxWidth: 240,\n width: 240,\n height: 160,\n borderRadius: 16,\n overflow: 'hidden',\n },\n});\n\nexport default VoiceFileMessage;\n"],"mappings":"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"}

package/lib/commonjs/ui/GroupChannelMessage/MessageContainer.js CHANGED Viewed

@@ -24,6 +24,7 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
   var _message$sender;
   let {
     children,
+    replyInfo,
     groupedWithNext,
     groupedWithPrev,
     message,
@@ -36,6 +37,10 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
   } = (0, _useUIKitTheme.default)();
   const color = colors.ui.groupChannelMessage.incoming;
   return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'flex-end'
@@ -49,7 +54,7 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
     uri: (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl
   }))), /*#__PURE__*/_react.default.createElement(_Box.default, {
     flexShrink: 1
-  }, parentMessage, !groupedWithPrev && !message.parentMessage && /*#__PURE__*/_react.default.createElement(_Box.default, {
+  }, parentMessage, !groupedWithPrev && !parentMessage && /*#__PURE__*/_react.default.createElement(_Box.default, {
     marginLeft: 12,
     marginBottom: 4
   }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -66,11 +71,19 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Text.default, {
     caption4: true,
     color: color.enabled.textTime
-  }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? (0, _uikitUtils.getMessageTimeFormat)(new Date(message.createdAt)))))));
+  }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? (0, _uikitUtils.getMessageTimeFormat)(new Date(message.createdAt))))))), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    flexDirection: 'row',
+    marginTop: 4
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    width: 26,
+    marginRight: 12,
+    justifyContent: 'flex-start'
+  }), replyInfo));
 };
 MessageContainer.Outgoing = function MessageContainerOutgoing(_ref2) {
   let {
     children,
+    replyInfo,
     message,
     groupedWithNext,
     strings,
@@ -98,7 +111,11 @@ MessageContainer.Outgoing = function MessageContainerOutgoing(_ref2) {
     color: color.enabled.textTime
   }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? (0, _uikitUtils.getMessageTimeFormat)(new Date(message.createdAt))))), /*#__PURE__*/_react.default.createElement(_Box.default, {
     style: styles.bubble
-  }, children)));
+  }, children)), /*#__PURE__*/_react.default.createElement(_Box.default, {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 4
+  }, replyInfo));
 };
 const styles = (0, _createStyleSheet.default)({
   bubble: {

package/lib/commonjs/ui/GroupChannelMessage/MessageContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_uikitUtils","_Box","_Text","_createStyleSheet","_useUIKitTheme","_Avatar","obj","__esModule","default","MessageContainer","props","variant","createElement","Incoming","Outgoing","MessageContainerIncoming","_ref","_message$sender","children","groupedWithNext","groupedWithPrev","message","onPressAvatar","strings","parentMessage","colors","useUIKitTheme","color","ui","groupChannelMessage","incoming","flexDirection","justifyContent","alignItems","width","marginRight","isFileMessage","isUserMessage","Pressable","onPress","size","uri","sender","profileUrl","flexShrink","marginLeft","marginBottom","caption1","enabled","textSenderName","numberOfLines","senderName","nickname","style","styles","bubble","caption4","textTime","sentDate","getMessageTimeFormat","Date","createdAt","MessageContainerOutgoing","_ref2","sendingStatus","outgoing","createStyleSheet","maxWidth","overflow","_default","exports"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<SendbirdMessage>;\n\nconst MessageContainer = (props: Props) => {\n if (props.variant === 'incoming') {\n return <MessageContainer.Incoming {...props} />;\n } else {\n return <MessageContainer.Outgoing {...props} />;\n }\n};\n\nMessageContainer.Incoming = function MessageContainerIncoming({\n children,\n groupedWithNext,\n groupedWithPrev,\n message,\n onPressAvatar,\n strings,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.incoming;\n\n return (\n <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>\n <Box width={26} marginRight={12}>\n {(message.isFileMessage() \|\| message.isUserMessage()) && !groupedWithNext && (\n <Pressable onPress={onPressAvatar}>\n <Avatar size={26} uri={message.sender?.profileUrl} />\n </Pressable>\n )}\n </Box>\n <Box flexShrink={1}>\n {parentMessage}\n {!groupedWithPrev && !~~message.~~parentMessage && (\n <Box marginLeft={12} marginBottom={4}>\n {(message.isFileMessage() \|\| message.isUserMessage()) && (\n <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>\n {strings?.senderName ?? message.sender.nickname}\n </Text>\n )}\n </Box>\n )}\n\n <Box flexDirection={'row'} alignItems={'flex-end'}>\n <Box style={styles.bubble}>{children}</Box>\n {!groupedWithNext && (\n <Box marginLeft={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n </Box>\n </Box>\n );\n};\n\nMessageContainer.Outgoing = function MessageContainerOutgoing({\n children,\n message,\n groupedWithNext,\n strings,\n sendingStatus,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.outgoing;\n\n return (\n <Box>\n {parentMessage}\n <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>\n <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>\n {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}\n {!groupedWithNext && (\n <Box marginRight={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n <Box style={styles.bubble}>{children}</Box>\n </Box>\n </Box>\n );\n};\n\nconst styles = createStyleSheet({\n bubble: {\n maxWidth: 240,\n overflow: 'hidden',\n flexShrink: 1,\n },\n});\n\nexport default MessageContainer;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAGA,IAAAE,WAAA,GAAAF,OAAA;AAEA,IAAAG,IAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,iBAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,cAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,OAAA,GAAAR,sBAAA,CAAAC,OAAA;AAA+B,SAAAD,uBAAAS,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAK/B,MAAMG,gBAAgB,GAAIC,KAAY,IAAK;EACzC,IAAIA,KAAK,CAACC,OAAO,KAAK,UAAU,EAAE;IAChC,oBAAOf,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACH,gBAAgB,CAACI,QAAQ,EAAKH,KAAK,CAAI;EACjD,CAAC,MAAM;IACL,oBAAOd,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACH,gBAAgB,CAACK,QAAQ,EAAKJ,KAAK,CAAI;EACjD;AACF,CAAC;AAEDD,gBAAgB,CAACI,QAAQ,GAAG,SAASE,wBAAwBA,CAAAC,IAAA,~~EAQnD~~;EAAA,IAAAC,eAAA;EAAA,~~IARoD~~;IAC5DC,QAAQ;IACRC,eAAe;IACfC,eAAe;IACfC,OAAO;IACPC,aAAa;IACbC,OAAO;IACPC;EACK,CAAC,~~GAAAR~~,IAAA;EACN,MAAM;~~IAAES~~;EAAO,CAAC,GAAG,IAAAC,sBAAa,GAAE;EAClC,MAAMC,KAAK,GAAGF,MAAM,CAACG,EAAE,CAACC,mBAAmB,CAACC,QAAQ;EAEpD,~~oBACElC~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAACuB~~,aAAa,EAAE,KAAM;IAACC,cAAc,EAAE,YAAa;IAACC,UAAU,EAAE;EAAW,~~gBAC9ErC~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAAC0B~~,KAAK,EAAE,EAAG;IAACC,WAAW,EAAE;EAAG,GAC7B,CAACd,OAAO,CAACe,aAAa,EAAE,IAAIf,OAAO,CAACgB,aAAa,EAAE,KAAK,CAAClB,eAAe,~~iBACvEvB~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACb,YAAA,~~CAAAuC~~,SAAS;IAACC,OAAO,EAAEjB;EAAc,~~gBAChC1B~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACP,OAAA,CAAAG,OAAM;~~IAACgC~~,IAAI,EAAE,EAAG;IAACC,GAAG,~~GAAAxB~~,eAAA,~~GAAEI~~,OAAO,CAACqB,MAAM,~~cAAAzB~~,eAAA,uBAAdA,eAAA,~~CAAgB0B~~;EAAW,EAAG,CAExD,CACG,~~eACN/C~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAACoC~~,UAAU,EAAE;EAAE,GAChBpB,aAAa,EACb,CAACJ,eAAe,IAAI,~~CAACC~~,~~OAAO,CAACG,~~aAAa,~~iBACzC5B~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAACqC~~,UAAU,EAAE,EAAG;IAACC,YAAY,EAAE;EAAE,GAClC,CAACzB,OAAO,CAACe,aAAa,EAAE,IAAIf,OAAO,CAACgB,aAAa,EAAE,~~kBAClDzC~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACV,KAAA,CAAAM,OAAI;~~IAACuC~~,QAAQ;IAACpB,KAAK,EAAEA,KAAK,CAACqB,OAAO,CAACC,cAAe;IAACC,aAAa,EAAE;EAAE,GAClE,CAAA3B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE4B,UAAU,KAAI9B,OAAO,CAACqB,MAAM,CAACU,QAAQ,CAElD,CAEJ,~~eAEDxD~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAACuB~~,aAAa,EAAE,KAAM;IAACE,UAAU,EAAE;EAAW,~~gBAChDrC~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAAC6C~~,KAAK,EAAEC,MAAM,CAACC;EAAO,~~GAAErC~~,QAAQ,CAAO,EAC1C,~~CAACC~~,eAAe,~~iBACfvB~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAACqC~~,UAAU,EAAE;EAAE,~~gBACjBjD~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACV,KAAA,CAAAM,OAAI;~~IAACgD~~,QAAQ;IAAC7B,KAAK,EAAEA,KAAK,CAACqB,OAAO,CAACS;EAAS,GAC1C,CAAAlC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEmC,QAAQ,KAAI,IAAAC,gCAAoB,EAAC,IAAIC,IAAI,CAACvC,OAAO,CAACwC,SAAS,CAAC,CAAC,CAClE,CAEV,CACG,CACF,CACF;AAEV,CAAC;~~AAEDpD~~,gBAAgB,CAACK,QAAQ,GAAG,~~SAASgD~~,wBAAwBA,CAAAC,KAAA,~~EAOnD~~;EAAA,~~IAPoD~~;~~IAC5D7C~~,QAAQ;~~IACRG~~,OAAO;IACPF,eAAe;IACfI,OAAO;~~IACPyC~~,aAAa;~~IACbxC~~;EACK,CAAC,~~GAAAuC~~,KAAA;EACN,MAAM;~~IAAEtC~~;EAAO,CAAC,GAAG,IAAAC,sBAAa,GAAE;EAClC,MAAMC,KAAK,GAAGF,MAAM,CAACG,EAAE,CAACC,mBAAmB,~~CAACoC~~,QAAQ;EAEpD,~~oBACErE~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG,~~QACDgB~~,aAAa,~~eACd5B~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAACuB~~,aAAa,EAAE,KAAM;IAACC,cAAc,EAAE,UAAW;IAACC,UAAU,EAAE;EAAW,~~gBAC5ErC~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAACuB~~,aAAa,EAAE,KAAM;IAACE,UAAU,EAAE,UAAW;IAACD,cAAc,EAAE;EAAS,~~GACzEgC~~,aAAa,~~iBAAIpE~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAAC2B~~,WAAW,EAAE;EAAE,~~GAAE6B~~,aAAa,CAAO,EAC3D,~~CAAC7C~~,eAAe,~~iBACfvB~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAAC2B~~,WAAW,EAAE;EAAE,~~gBAClBvC~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACV,KAAA,CAAAM,OAAI;~~IAACgD~~,QAAQ;IAAC7B,KAAK,EAAEA,KAAK,CAACqB,OAAO,CAACS;EAAS,GAC1C,CAAAlC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEmC,QAAQ,KAAI,IAAAC,gCAAoB,EAAC,IAAIC,IAAI,CAACvC,OAAO,CAACwC,SAAS,CAAC,CAAC,CAClE,CAEV,CACG,~~eACNjE~~,MAAA,CAAAY,OAAA,CAAAI,aAAA,CAACX,IAAA,CAAAO,OAAG;~~IAAC6C~~,KAAK,EAAEC,MAAM,CAACC;EAAO,~~GAAErC~~,QAAQ,CAAO,CACvC,CACF;AAEV,CAAC;AAED,MAAMoC,MAAM,GAAG,~~IAAAY~~,yBAAgB,EAAC;~~EAC9BX~~,MAAM,EAAE;~~IACNY~~,QAAQ,EAAE,GAAG;IACbC,QAAQ,EAAE,QAAQ;~~IAClBxB~~,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAAC,~~IAAAyB~~,QAAA,~~GAEY5D~~,gBAAgB;~~AAAA6D~~,OAAA,~~CAAA9D~~,OAAA,~~GAAA6D~~,QAAA"}
1	+ {"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_uikitUtils","_Box","_Text","_createStyleSheet","_useUIKitTheme","_Avatar","obj","__esModule","default","MessageContainer","props","variant","createElement","Incoming","Outgoing","MessageContainerIncoming","_ref","_message$sender","children","replyInfo","groupedWithNext","groupedWithPrev","message","onPressAvatar","strings","parentMessage","colors","useUIKitTheme","color","ui","groupChannelMessage","incoming","flexDirection","justifyContent","alignItems","width","marginRight","isFileMessage","isUserMessage","Pressable","onPress","size","uri","sender","profileUrl","flexShrink","marginLeft","marginBottom","caption1","enabled","textSenderName","numberOfLines","senderName","nickname","style","styles","bubble","caption4","textTime","sentDate","getMessageTimeFormat","Date","createdAt","marginTop","MessageContainerOutgoing","_ref2","sendingStatus","outgoing","createStyleSheet","maxWidth","overflow","_default","exports"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<SendbirdMessage>;\n\nconst MessageContainer = (props: Props) => {\n if (props.variant === 'incoming') {\n return <MessageContainer.Incoming {...props} />;\n } else {\n return <MessageContainer.Outgoing {...props} />;\n }\n};\n\nMessageContainer.Incoming = function MessageContainerIncoming({\n children,\n replyInfo,\n groupedWithNext,\n groupedWithPrev,\n message,\n onPressAvatar,\n strings,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.incoming;\n\n return (\n <Box flexDirection={'column'} justifyContent={'flex-start'} alignItems={'flex-start'}>\n <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>\n <Box width={26} marginRight={12}>\n {(message.isFileMessage() \|\| message.isUserMessage()) && !groupedWithNext && (\n <Pressable onPress={onPressAvatar}>\n <Avatar size={26} uri={message.sender?.profileUrl} />\n </Pressable>\n )}\n </Box>\n <Box flexShrink={1}>\n {parentMessage}\n {!groupedWithPrev && !parentMessage && (\n <Box marginLeft={12} marginBottom={4}>\n {(message.isFileMessage() \|\| message.isUserMessage()) && (\n <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>\n {strings?.senderName ?? message.sender.nickname}\n </Text>\n )}\n </Box>\n )}\n <Box flexDirection={'row'} alignItems={'flex-end'}>\n <Box style={styles.bubble}>{children}</Box>\n {!groupedWithNext && (\n <Box marginLeft={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n </Box>\n </Box>\n <Box flexDirection={'row'} marginTop={4}>\n <Box width={26} marginRight={12} justifyContent={'flex-start'} />\n {replyInfo}\n </Box>\n </Box>\n );\n};\n\nMessageContainer.Outgoing = function MessageContainerOutgoing({\n children,\n replyInfo,\n message,\n groupedWithNext,\n strings,\n sendingStatus,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.outgoing;\n\n return (\n <Box>\n {parentMessage}\n <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>\n <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>\n {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}\n {!groupedWithNext && (\n <Box marginRight={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n <Box style={styles.bubble}>{children}</Box>\n </Box>\n <Box flexDirection={'row'} justifyContent={'flex-end'} marginTop={4}>\n {replyInfo}\n </Box>\n </Box>\n );\n};\n\nconst styles = createStyleSheet({\n bubble: {\n maxWidth: 240,\n overflow: 'hidden',\n flexShrink: 1,\n },\n});\n\nexport default MessageContainer;\n"],"mappings":"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"}

package/lib/commonjs/ui/GroupChannelMessage/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_Message","_interopRequireDefault","require","_Message2","_MessageFile","_MessageFile2","_MessageFile3","_Message3","_Message4","_MessageUser","obj","__esModule","default","GroupChannelMessage","User","UserMessage","OpenGraphUser","File","FileMessage","ImageFile","ImageFileMessage","VideoFile","VideoFileMessage","VoiceFile","VoiceFileMessage","Admin","AdminMessage","Unknown","UnknownMessage","_default","exports"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport VoiceFileMessage from './Message.file.voice';\nimport type { VoiceFileMessageState } from './Message.file.voice';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n channel: SendbirdGroupChannel;\n message: T;\n variant?: 'outgoing' \| 'incoming';\n strings?: {\n senderName?: string;\n sentDate?: string;\n edited?: string;\n fileName?: string;\n unknownTitle?: string;\n unknownDescription?: string;\n };\n\n children?: React.ReactNode;\n sendingStatus?: React.ReactNode;\n parentMessage?: React.ReactNode;\n\n groupedWithPrev: boolean;\n groupedWithNext: boolean;\n onPress?: () => void;\n onLongPress?: () => void;\n onPressAvatar?: () => void;\n onPressURL?: (url: string) => void;\n onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n onToggleVoiceMessage?: (\n state: VoiceFileMessageState,\n setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,\n ) => Promise<void>;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n User: UserMessage,\n OpenGraphUser: OpenGraphUser,\n File: FileMessage,\n ImageFile: ImageFileMessage,\n VideoFile: VideoFileMessage,\n VoiceFile: VoiceFileMessage,\n Admin: AdminMessage,\n Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\n"],"mappings":";;;;;;AAIA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,aAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,IAAAK,SAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,YAAA,GAAAR,sBAAA,CAAAC,OAAA;AAA8C,SAAAD,uBAAAS,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;~~AAgC9C~~,MAAMG,mBAAmB,GAAG;EAC1BC,IAAI,EAAEC,iBAAW;EACjBC,aAAa,EAAEA,oBAAa;EAC5BC,IAAI,EAAEC,iBAAW;EACjBC,SAAS,EAAEC,oBAAgB;EAC3BC,SAAS,EAAEC,qBAAgB;EAC3BC,SAAS,EAAEC,qBAAgB;EAC3BC,KAAK,EAAEC,gBAAY;EACnBC,OAAO,EAAEC;AACX,CAAC;AAAC,IAAAC,QAAA,GAEahB,mBAAmB;AAAAiB,OAAA,CAAAlB,OAAA,GAAAiB,QAAA"}
1	+ {"version":3,"names":["_Message","_interopRequireDefault","require","_Message2","_MessageFile","_MessageFile2","_MessageFile3","_Message3","_Message4","_MessageUser","obj","__esModule","default","GroupChannelMessage","User","UserMessage","OpenGraphUser","File","FileMessage","ImageFile","ImageFileMessage","VideoFile","VideoFileMessage","VoiceFile","VoiceFileMessage","Admin","AdminMessage","Unknown","UnknownMessage","_default","exports"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport VoiceFileMessage from './Message.file.voice';\nimport type { VoiceFileMessageState } from './Message.file.voice';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n channel: SendbirdGroupChannel;\n message: T;\n variant?: 'outgoing' \| 'incoming';\n strings?: {\n senderName?: string;\n sentDate?: string;\n edited?: string;\n fileName?: string;\n unknownTitle?: string;\n unknownDescription?: string;\n };\n\n children?: React.ReactNode;\n sendingStatus?: React.ReactNode;\n parentMessage?: React.ReactNode;\n replyInfo?: React.ReactNode;\n\n groupedWithPrev: boolean;\n groupedWithNext: boolean;\n onPress?: () => void;\n onLongPress?: () => void;\n onPressAvatar?: () => void;\n onPressURL?: (url: string) => void;\n onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n onToggleVoiceMessage?: (\n state: VoiceFileMessageState,\n setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,\n ) => Promise<void>;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n User: UserMessage,\n OpenGraphUser: OpenGraphUser,\n File: FileMessage,\n ImageFile: ImageFileMessage,\n VideoFile: VideoFileMessage,\n VoiceFile: VoiceFileMessage,\n Admin: AdminMessage,\n Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\n"],"mappings":";;;;;;AAIA,IAAAA,QAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,SAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,aAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,IAAAK,SAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,SAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,YAAA,GAAAR,sBAAA,CAAAC,OAAA;AAA8C,SAAAD,uBAAAS,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAiC9C,MAAMG,mBAAmB,GAAG;EAC1BC,IAAI,EAAEC,iBAAW;EACjBC,aAAa,EAAEA,oBAAa;EAC5BC,IAAI,EAAEC,iBAAW;EACjBC,SAAS,EAAEC,oBAAgB;EAC3BC,SAAS,EAAEC,qBAAgB;EAC3BC,SAAS,EAAEC,qBAAgB;EAC3BC,KAAK,EAAEC,gBAAY;EACnBC,OAAO,EAAEC;AACX,CAAC;AAAC,IAAAC,QAAA,GAEahB,mBAAmB;AAAAiB,OAAA,CAAAlB,OAAA,GAAAiB,QAAA"}

package/lib/module/assets/icon/icon-thread.png ADDED Viewed

Binary file

package/lib/module/assets/icon/icon-thread@2x.png ADDED Viewed

Binary file

package/lib/module/assets/icon/icon-thread@3x.png ADDED Viewed

Binary file

package/lib/module/assets/icon/index.js CHANGED Viewed

@@ -64,6 +64,7 @@ const IconAssets = {
   'streaming': require('./icon-streaming.png'),
   'supergroup': require('./icon-supergroup.png'),
   'theme': require('./icon-theme.png'),
+  'thread': require('./icon-thread.png'),
   'thumbnail-none': require('./icon-thumbnail-none.png'),
   'unarchive': require('./icon-unarchive.png'),
   'user': require('./icon-user.png')

package/lib/module/assets/icon/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["IconAssets","require"],"sources":["index.ts"],"sourcesContent":["const IconAssets = {\n 'chat-hide': require('./ic-chat-hide.png'),\n 'chat-show': require('./ic-chat-show.png'),\n 'add': require('./icon-add.png'),\n 'archive': require('./icon-archive.png'),\n 'arrow-left': require('./icon-arrow-left.png'),\n 'audio-off-filled': require('./icon-audio-off-filled.png'),\n 'audio-off': require('./icon-audio-off.png'),\n 'audio-on-filled': require('./icon-audio-on-filled.png'),\n 'audio-on': require('./icon-audio-on.png'),\n 'ban': require('./icon-ban.png'),\n 'broadcast': require('./icon-broadcast.png'),\n 'camera': require('./icon-camera.png'),\n 'channels': require('./icon-channels.png'),\n 'chat-filled': require('./icon-chat-filled.png'),\n 'chat': require('./icon-chat.png'),\n 'checkbox-off': require('./icon-checkbox-off.png'),\n 'checkbox-on': require('./icon-checkbox-on.png'),\n 'chevron-down': require('./icon-chevron-down.png'),\n 'chevron-right': require('./icon-chevron-right.png'),\n 'close': require('./icon-close.png'),\n 'copy': require('./icon-copy.png'),\n 'create': require('./icon-create.png'),\n 'delete': require('./icon-delete.png'),\n 'document': require('./icon-document.png'),\n 'done-all': require('./icon-done-all.png'),\n 'done': require('./icon-done.png'),\n 'download': require('./icon-download.png'),\n 'edit': require('./icon-edit.png'),\n 'emoji-more': require('./icon-emoji-more.png'),\n 'error': require('./icon-error.png'),\n 'file-audio': require('./icon-file-audio.png'),\n 'file-document': require('./icon-file-document.png'),\n 'freeze': require('./icon-freeze.png'),\n 'gif': require('./icon-gif.png'),\n 'info': require('./icon-info.png'),\n 'leave': require('./icon-leave.png'),\n 'members': require('./icon-members.png'),\n 'message': require('./icon-message.png'),\n 'moderation': require('./icon-moderation.png'),\n 'more': require('./icon-more.png'),\n 'mute': require('./icon-mute.png'),\n 'notifications-filled': require('./icon-notifications-filled.png'),\n 'notifications-off-filled': require('./icon-notifications-off-filled.png'),\n 'notifications': require('./icon-notifications.png'),\n 'operator': require('./icon-operator.png'),\n 'pause': require('./icon-pause.png'),\n 'photo': require('./icon-photo.png'),\n 'play': require('./icon-play.png'),\n 'plus': require('./icon-plus.png'),\n 'question': require('./icon-question.png'),\n 'radio-off': require('./icon-radio-off.png'),\n 'radio-on': require('./icon-radio-on.png'),\n 'recording': require('./icon-recording.png'),\n 'refresh': require('./icon-refresh.png'),\n 'remove': require('./icon-remove.png'),\n 'reply-filled': require('./icon-reply-filled.png'),\n 'reply': require('./icon-reply.png'),\n 'search': require('./icon-search.png'),\n 'send': require('./icon-send.png'),\n 'settings-filled': require('./icon-settings-filled.png'),\n 'spinner': require('./icon-spinner.png'),\n 'stop': require('./icon-stop.png'),\n 'streaming': require('./icon-streaming.png'),\n 'supergroup': require('./icon-supergroup.png'),\n 'theme': require('./icon-theme.png'),\n 'thumbnail-none': require('./icon-thumbnail-none.png'),\n 'unarchive': require('./icon-unarchive.png'),\n 'user': require('./icon-user.png'),\n};\nexport default IconAssets;\n"],"mappings":"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"}
1	+ {"version":3,"names":["IconAssets","require"],"sources":["index.ts"],"sourcesContent":["const IconAssets = {\n 'chat-hide': require('./ic-chat-hide.png'),\n 'chat-show': require('./ic-chat-show.png'),\n 'add': require('./icon-add.png'),\n 'archive': require('./icon-archive.png'),\n 'arrow-left': require('./icon-arrow-left.png'),\n 'audio-off-filled': require('./icon-audio-off-filled.png'),\n 'audio-off': require('./icon-audio-off.png'),\n 'audio-on-filled': require('./icon-audio-on-filled.png'),\n 'audio-on': require('./icon-audio-on.png'),\n 'ban': require('./icon-ban.png'),\n 'broadcast': require('./icon-broadcast.png'),\n 'camera': require('./icon-camera.png'),\n 'channels': require('./icon-channels.png'),\n 'chat-filled': require('./icon-chat-filled.png'),\n 'chat': require('./icon-chat.png'),\n 'checkbox-off': require('./icon-checkbox-off.png'),\n 'checkbox-on': require('./icon-checkbox-on.png'),\n 'chevron-down': require('./icon-chevron-down.png'),\n 'chevron-right': require('./icon-chevron-right.png'),\n 'close': require('./icon-close.png'),\n 'copy': require('./icon-copy.png'),\n 'create': require('./icon-create.png'),\n 'delete': require('./icon-delete.png'),\n 'document': require('./icon-document.png'),\n 'done-all': require('./icon-done-all.png'),\n 'done': require('./icon-done.png'),\n 'download': require('./icon-download.png'),\n 'edit': require('./icon-edit.png'),\n 'emoji-more': require('./icon-emoji-more.png'),\n 'error': require('./icon-error.png'),\n 'file-audio': require('./icon-file-audio.png'),\n 'file-document': require('./icon-file-document.png'),\n 'freeze': require('./icon-freeze.png'),\n 'gif': require('./icon-gif.png'),\n 'info': require('./icon-info.png'),\n 'leave': require('./icon-leave.png'),\n 'members': require('./icon-members.png'),\n 'message': require('./icon-message.png'),\n 'moderation': require('./icon-moderation.png'),\n 'more': require('./icon-more.png'),\n 'mute': require('./icon-mute.png'),\n 'notifications-filled': require('./icon-notifications-filled.png'),\n 'notifications-off-filled': require('./icon-notifications-off-filled.png'),\n 'notifications': require('./icon-notifications.png'),\n 'operator': require('./icon-operator.png'),\n 'pause': require('./icon-pause.png'),\n 'photo': require('./icon-photo.png'),\n 'play': require('./icon-play.png'),\n 'plus': require('./icon-plus.png'),\n 'question': require('./icon-question.png'),\n 'radio-off': require('./icon-radio-off.png'),\n 'radio-on': require('./icon-radio-on.png'),\n 'recording': require('./icon-recording.png'),\n 'refresh': require('./icon-refresh.png'),\n 'remove': require('./icon-remove.png'),\n 'reply-filled': require('./icon-reply-filled.png'),\n 'reply': require('./icon-reply.png'),\n 'search': require('./icon-search.png'),\n 'send': require('./icon-send.png'),\n 'settings-filled': require('./icon-settings-filled.png'),\n 'spinner': require('./icon-spinner.png'),\n 'stop': require('./icon-stop.png'),\n 'streaming': require('./icon-streaming.png'),\n 'supergroup': require('./icon-supergroup.png'),\n 'theme': require('./icon-theme.png'),\n 'thread': require('./icon-thread.png'),\n 'thumbnail-none': require('./icon-thumbnail-none.png'),\n 'unarchive': require('./icon-unarchive.png'),\n 'user': require('./icon-user.png'),\n};\nexport default IconAssets;\n"],"mappings":"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"}

package/lib/module/ui/GroupChannelMessage/Message.file.voice.js CHANGED Viewed

@@ -16,7 +16,10 @@ const VoiceFileMessage = props => {
     onToggleVoiceMessage,
     message,
     durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
-    onUnmount
+    onUnmount,
+    initialCurrentTime,
+    onSubscribeStatus,
+    onUnsubscribeStatus
   } = props;
   const {
     colors
@@ -28,7 +31,7 @@ const VoiceFileMessage = props => {
     const initialDuration = value ? parseInt(value, 10) : 0;
     return {
       status: 'paused',
-      currentTime: 0,
+      currentTime: initialCurrentTime || 0,
       duration: initialDuration
     };
   });
@@ -37,6 +40,18 @@ const VoiceFileMessage = props => {
       onUnmount();
     };
   }, []);
+  useEffect(() => {
+    const updateCurrentTime = currentTime => {
+      setState(prev => ({
+        ...prev,
+        currentTime
+      }));
+    };
+    onSubscribeStatus === null || onSubscribeStatus === void 0 ? void 0 : onSubscribeStatus(props.channel.url, props.message.messageId, updateCurrentTime);
+    return () => {
+      onUnsubscribeStatus === null || onUnsubscribeStatus === void 0 ? void 0 : onUnsubscribeStatus(props.channel.url, props.message.messageId, updateCurrentTime);
+    };
+  }, []);
   const uiColors = colors.ui.groupChannelMessage[variant];
   const remainingTime = state.duration - state.currentTime;
   return /*#__PURE__*/React.createElement(MessageContainer, props, /*#__PURE__*/React.createElement(Box, {

package/lib/module/ui/GroupChannelMessage/Message.file.voice.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useEffect","useState","millsToMSS","Box","Icon","PressBox","ProgressBar","Text","createStyleSheet","useUIKitTheme","LoadingSpinner","MessageContainer","VoiceFileMessage","props","onLongPress","variant","onToggleVoiceMessage","message","durationMetaArrayKey","onUnmount","colors","state","setState","_meta$value","meta","metaArrays","find","it","key","value","initialDuration","parseInt","status","currentTime","duration","uiColors","ui","groupChannelMessage","remainingTime","createElement","style","styles","container","backgroundColor","enabled","background","onPress","current","total","minWidth","height","trackColor","voiceProgressTrack","overlay","flex","flexDirection","alignItems","justifyContent","paddingHorizontal","size","color","voiceSpinner","containerStyle","voiceActionIconBackground","padding","borderRadius","icon","body3","lineHeight","undefined","marginLeft","opacity","textVoicePlaytime","children","overflow","image","maxWidth","width"],"sources":["Message.file.voice.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { millsToMSS } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport ProgressBar from '../../components/ProgressBar';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport LoadingSpinner from '../LoadingSpinner';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nexport type VoiceFileMessageState = {\n status: 'preparing' \| 'playing' \| 'paused';\n currentTime: number;\n duration: number;\n};\n\ntype Props = GroupChannelMessageProps<\n SendbirdFileMessage,\n {\n durationMetaArrayKey?: string;\n onUnmount: () => void;\n }\n>;\nconst VoiceFileMessage = (props: Props) => {\n const {\n onLongPress,\n variant = 'incoming',\n onToggleVoiceMessage,\n message,\n durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',\n onUnmount,\n } = props;\n\n const { colors } = useUIKitTheme();\n\n const [state, setState] = useState<VoiceFileMessageState>(() => {\n const meta = message.metaArrays.find((it) => it.key === durationMetaArrayKey);\n const value = meta?.value?.[0];\n const initialDuration = value ? parseInt(value, 10) : 0;\n return {\n status: 'paused',\n currentTime: 0,\n duration: initialDuration,\n };\n });\n\n useEffect(() => {\n return () => {\n onUnmount();\n };\n }, []);\n\n const uiColors = colors.ui.groupChannelMessage[variant];\n const remainingTime = state.duration - state.currentTime;\n\n return (\n <MessageContainer {...props}>\n <Box style={styles.container} backgroundColor={uiColors.enabled.background}>\n <PressBox onPress={() => onToggleVoiceMessage?.(state, setState)} onLongPress={onLongPress}>\n <ProgressBar\n current={state.currentTime}\n total={state.duration}\n style={{ minWidth: 136, height: 44 }}\n trackColor={uiColors.enabled.voiceProgressTrack}\n overlay={\n <Box\n flex={1}\n flexDirection={'row'}\n alignItems={'center'}\n justifyContent={'space-between'}\n paddingHorizontal={12}\n >\n {state.status === 'preparing' ? (\n <LoadingSpinner size={24} color={uiColors.enabled.voiceSpinner} />\n ) : (\n <Icon\n size={16}\n containerStyle={{\n backgroundColor: uiColors.enabled.voiceActionIconBackground,\n padding: 6,\n borderRadius: 16,\n }}\n icon={state.status === 'paused' ? 'play' : 'pause'}\n />\n )}\n <Text\n body3\n style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}\n color={uiColors.enabled.textVoicePlaytime}\n >\n {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}\n </Text>\n </Box>\n }\n />\n </PressBox>\n {props.children}\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n borderRadius: 16,\n overflow: 'hidden',\n },\n image: {\n maxWidth: 240,\n width: 240,\n height: 160,\n borderRadius: 16,\n overflow: 'hidden',\n },\n});\n\nexport default VoiceFileMessage;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAGlD,SAASC,UAAU,QAAQ,uBAAuB;AAElD,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,QAAQ,MAAM,2BAA2B;AAChD,OAAOC,WAAW,MAAM,8BAA8B;AACtD,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,gBAAgB,MAAM,oBAAoB;~~AAgBjD~~,MAAMC,gBAAgB,GAAIC,KAAY,IAAK;EACzC,MAAM;IACJC,WAAW;IACXC,OAAO,GAAG,UAAU;IACpBC,oBAAoB;IACpBC,OAAO;IACPC,oBAAoB,GAAG,4BAA4B;IACnDC;EACF,CAAC,~~GAAGN~~,KAAK;EAET,MAAM;~~IAAEO~~;EAAO,CAAC,~~GAAGX~~,aAAa,EAAE;EAElC,MAAM,~~CAACY~~,KAAK,EAAEC,QAAQ,CAAC,~~GAAGrB~~,QAAQ,CAAwB,MAAM;IAAA,~~IAAAsB~~,WAAA;IAC9D,MAAMC,IAAI,~~GAAGP~~,OAAO,~~CAACQ~~,UAAU,CAACC,IAAI,CAAEC,EAAE,IAAKA,EAAE,CAACC,GAAG,~~KAAKV~~,oBAAoB,CAAC;IAC7E,~~MAAMW~~,KAAK,GAAGL,IAAI,aAAJA,IAAI,wBAAAD,WAAA,GAAJC,IAAI,CAAEK,KAAK,cAAAN,WAAA,uBAAXA,WAAA,CAAc,CAAC,CAAC;IAC9B,MAAMO,eAAe,GAAGD,KAAK,GAAGE,QAAQ,CAACF,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC;IACvD,OAAO;MACLG,MAAM,EAAE,QAAQ;MAChBC,WAAW,~~EAAE~~,CAAC;~~MACdC~~,QAAQ,EAAEJ;IACZ,CAAC;EACH,CAAC,CAAC;~~EAEF9B~~,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXmB,SAAS,EAAE;IACb,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,~~MAAMgB~~,QAAQ,~~GAAGf~~,MAAM,~~CAACgB~~,EAAE,CAACC,mBAAmB,~~CAACtB~~,OAAO,CAAC;EACvD,~~MAAMuB~~,aAAa,~~GAAGjB~~,KAAK,CAACa,QAAQ,GAAGb,KAAK,CAACY,WAAW;EAExD,~~oBACElC~~,KAAA,~~CAAAwC~~,aAAA,~~CAAC5B~~,gBAAgB,EAAKE,KAAK,eACzBd,KAAA,~~CAAAwC~~,aAAA,~~CAACpC~~,GAAG;~~IAACqC~~,KAAK,EAAEC,MAAM,CAACC,SAAU;IAACC,eAAe,EAAER,QAAQ,CAACS,OAAO,CAACC;EAAW,~~gBACzE9C~~,KAAA,~~CAAAwC~~,aAAA,~~CAAClC~~,QAAQ;~~IAACyC~~,OAAO,EAAEA,CAAA,~~KAAM9B~~,oBAAoB,aAApBA,oBAAoB,uBAApBA,oBAAoB,~~CAAGK~~,KAAK,EAAEC,QAAQ,CAAE;~~IAACR~~,WAAW,EAAEA;EAAY,gBACzFf,KAAA,~~CAAAwC~~,aAAA,~~CAACjC~~,WAAW;~~IACVyC~~,OAAO,~~EAAE1B~~,KAAK,CAACY,WAAY;~~IAC3Be~~,KAAK,~~EAAE3B~~,KAAK,CAACa,QAAS;~~IACtBM~~,KAAK,EAAE;MAAES,QAAQ,EAAE,GAAG;MAAEC,MAAM,EAAE;IAAG,CAAE;IACrCC,UAAU,EAAEhB,QAAQ,CAACS,OAAO,CAACQ,kBAAmB;IAChDC,OAAO,~~eACLtD~~,KAAA,~~CAAAwC~~,aAAA,~~CAACpC~~,GAAG;~~MACFmD~~,IAAI,EAAE,CAAE;MACRC,aAAa,EAAE,KAAM;MACrBC,UAAU,EAAE,QAAS;MACrBC,cAAc,EAAE,eAAgB;MAChCC,iBAAiB,EAAE;IAAG,~~GAErBrC~~,KAAK,CAACW,MAAM,KAAK,WAAW,~~gBAC3BjC~~,KAAA,~~CAAAwC~~,aAAA,~~CAAC7B~~,cAAc;~~MAACiD~~,IAAI,EAAE,EAAG;MAACC,KAAK,EAAEzB,QAAQ,CAACS,OAAO,CAACiB;IAAa,EAAG,~~gBAElE9D~~,KAAA,~~CAAAwC~~,aAAA,~~CAACnC~~,IAAI;~~MACHuD~~,IAAI,EAAE,EAAG;MACTG,cAAc,EAAE;QACdnB,eAAe,EAAER,QAAQ,CAACS,OAAO,CAACmB,yBAAyB;QAC3DC,OAAO,EAAE,CAAC;QACVC,YAAY,EAAE;MAChB,CAAE;MACFC,IAAI,~~EAAE7C~~,KAAK,CAACW,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG;IAAQ,EAEtD,~~eACDjC~~,KAAA,~~CAAAwC~~,aAAA,~~CAAChC~~,IAAI;~~MACH4D~~,KAAK;MACL3B,KAAK,EAAE;QAAE4B,UAAU,EAAEC,SAAS;QAAEC,UAAU,EAAE,CAAC;QAAEC,OAAO,EAAE;MAAK,CAAE;MAC/DX,KAAK,EAAEzB,QAAQ,CAACS,OAAO,CAAC4B;IAAkB,~~GAEzCtE~~,UAAU,~~CAACmB~~,KAAK,CAACY,WAAW,KAAK,CAAC,GAAGZ,KAAK,CAACa,QAAQ,~~GAAGI~~,aAAa,CAAC,CAChE;EAEV,EACD,CACO,~~EACVzB~~,KAAK,~~CAAC4D~~,QAAQ,CACX,CACW;AAEvB,CAAC;AAED,MAAMhC,MAAM,~~GAAGjC~~,gBAAgB,CAAC;~~EAC9BkC~~,SAAS,EAAE;IACTuB,YAAY,EAAE,EAAE;IAChBS,QAAQ,EAAE;EACZ,CAAC;EACDC,KAAK,EAAE;IACLC,QAAQ,EAAE,GAAG;IACbC,KAAK,EAAE,GAAG;IACV3B,MAAM,EAAE,GAAG;IACXe,YAAY,EAAE,EAAE;IAChBS,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC;AAEF,~~eAAe9D~~,gBAAgB"}
1	+ {"version":3,"names":["React","useEffect","useState","millsToMSS","Box","Icon","PressBox","ProgressBar","Text","createStyleSheet","useUIKitTheme","LoadingSpinner","MessageContainer","VoiceFileMessage","props","onLongPress","variant","onToggleVoiceMessage","message","durationMetaArrayKey","onUnmount","initialCurrentTime","onSubscribeStatus","onUnsubscribeStatus","colors","state","setState","_meta$value","meta","metaArrays","find","it","key","value","initialDuration","parseInt","status","currentTime","duration","updateCurrentTime","prev","channel","url","messageId","uiColors","ui","groupChannelMessage","remainingTime","createElement","style","styles","container","backgroundColor","enabled","background","onPress","current","total","minWidth","height","trackColor","voiceProgressTrack","overlay","flex","flexDirection","alignItems","justifyContent","paddingHorizontal","size","color","voiceSpinner","containerStyle","voiceActionIconBackground","padding","borderRadius","icon","body3","lineHeight","undefined","marginLeft","opacity","textVoicePlaytime","children","overflow","image","maxWidth","width"],"sources":["Message.file.voice.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport type { SendbirdFileMessage } from '@sendbird/uikit-utils';\nimport { millsToMSS } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Icon from '../../components/Icon';\nimport PressBox from '../../components/PressBox';\nimport ProgressBar from '../../components/ProgressBar';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport LoadingSpinner from '../LoadingSpinner';\nimport MessageContainer from './MessageContainer';\nimport type { GroupChannelMessageProps } from './index';\n\nexport type VoiceFileMessageState = {\n status: 'preparing' \| 'playing' \| 'paused';\n currentTime: number;\n duration: number;\n};\n\ntype Props = GroupChannelMessageProps<\n SendbirdFileMessage,\n {\n durationMetaArrayKey?: string;\n onUnmount: () => void;\n initialCurrentTime?: number;\n onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;\n onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;\n }\n>;\nconst VoiceFileMessage = (props: Props) => {\n const {\n onLongPress,\n variant = 'incoming',\n onToggleVoiceMessage,\n message,\n durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',\n onUnmount,\n initialCurrentTime,\n onSubscribeStatus,\n onUnsubscribeStatus,\n } = props;\n\n const { colors } = useUIKitTheme();\n\n const [state, setState] = useState<VoiceFileMessageState>(() => {\n const meta = message.metaArrays.find((it) => it.key === durationMetaArrayKey);\n const value = meta?.value?.[0];\n const initialDuration = value ? parseInt(value, 10) : 0;\n return {\n status: 'paused',\n currentTime: initialCurrentTime \|\| 0,\n duration: initialDuration,\n };\n });\n\n useEffect(() => {\n return () => {\n onUnmount();\n };\n }, []);\n\n useEffect(() => {\n const updateCurrentTime = (currentTime: number) => {\n setState((prev) => ({ ...prev, currentTime }));\n };\n onSubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);\n return () => {\n onUnsubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);\n };\n }, []);\n\n const uiColors = colors.ui.groupChannelMessage[variant];\n const remainingTime = state.duration - state.currentTime;\n\n return (\n <MessageContainer {...props}>\n <Box style={styles.container} backgroundColor={uiColors.enabled.background}>\n <PressBox onPress={() => onToggleVoiceMessage?.(state, setState)} onLongPress={onLongPress}>\n <ProgressBar\n current={state.currentTime}\n total={state.duration}\n style={{ minWidth: 136, height: 44 }}\n trackColor={uiColors.enabled.voiceProgressTrack}\n overlay={\n <Box\n flex={1}\n flexDirection={'row'}\n alignItems={'center'}\n justifyContent={'space-between'}\n paddingHorizontal={12}\n >\n {state.status === 'preparing' ? (\n <LoadingSpinner size={24} color={uiColors.enabled.voiceSpinner} />\n ) : (\n <Icon\n size={16}\n containerStyle={{\n backgroundColor: uiColors.enabled.voiceActionIconBackground,\n padding: 6,\n borderRadius: 16,\n }}\n icon={state.status === 'paused' ? 'play' : 'pause'}\n />\n )}\n <Text\n body3\n style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}\n color={uiColors.enabled.textVoicePlaytime}\n >\n {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}\n </Text>\n </Box>\n }\n />\n </PressBox>\n {props.children}\n </Box>\n </MessageContainer>\n );\n};\n\nconst styles = createStyleSheet({\n container: {\n borderRadius: 16,\n overflow: 'hidden',\n },\n image: {\n maxWidth: 240,\n width: 240,\n height: 160,\n borderRadius: 16,\n overflow: 'hidden',\n },\n});\n\nexport default VoiceFileMessage;\n"],"mappings":"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"}

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

@@ -17,6 +17,7 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
   var _message$sender;
   let {
     children,
+    replyInfo,
     groupedWithNext,
     groupedWithPrev,
     message,
@@ -29,6 +30,10 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
   } = useUIKitTheme();
   const color = colors.ui.groupChannelMessage.incoming;
   return /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start'
+  }, /*#__PURE__*/React.createElement(Box, {
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'flex-end'
@@ -42,7 +47,7 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
     uri: (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.profileUrl
   }))), /*#__PURE__*/React.createElement(Box, {
     flexShrink: 1
-  }, parentMessage, !groupedWithPrev && !message.parentMessage && /*#__PURE__*/React.createElement(Box, {
+  }, parentMessage, !groupedWithPrev && !parentMessage && /*#__PURE__*/React.createElement(Box, {
     marginLeft: 12,
     marginBottom: 4
   }, (message.isFileMessage() || message.isUserMessage()) && /*#__PURE__*/React.createElement(Text, {
@@ -59,11 +64,19 @@ MessageContainer.Incoming = function MessageContainerIncoming(_ref) {
   }, /*#__PURE__*/React.createElement(Text, {
     caption4: true,
     color: color.enabled.textTime
-  }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? getMessageTimeFormat(new Date(message.createdAt)))))));
+  }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? getMessageTimeFormat(new Date(message.createdAt))))))), /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    marginTop: 4
+  }, /*#__PURE__*/React.createElement(Box, {
+    width: 26,
+    marginRight: 12,
+    justifyContent: 'flex-start'
+  }), replyInfo));
 };
 MessageContainer.Outgoing = function MessageContainerOutgoing(_ref2) {
   let {
     children,
+    replyInfo,
     message,
     groupedWithNext,
     strings,
@@ -91,7 +104,11 @@ MessageContainer.Outgoing = function MessageContainerOutgoing(_ref2) {
     color: color.enabled.textTime
   }, (strings === null || strings === void 0 ? void 0 : strings.sentDate) ?? getMessageTimeFormat(new Date(message.createdAt))))), /*#__PURE__*/React.createElement(Box, {
     style: styles.bubble
-  }, children)));
+  }, children)), /*#__PURE__*/React.createElement(Box, {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 4
+  }, replyInfo));
 };
 const styles = createStyleSheet({
   bubble: {

package/lib/module/ui/GroupChannelMessage/MessageContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","Pressable","getMessageTimeFormat","Box","Text","createStyleSheet","useUIKitTheme","Avatar","MessageContainer","props","variant","createElement","Incoming","Outgoing","MessageContainerIncoming","_ref","_message$sender","children","groupedWithNext","groupedWithPrev","message","onPressAvatar","strings","parentMessage","colors","color","ui","groupChannelMessage","incoming","flexDirection","justifyContent","alignItems","width","marginRight","isFileMessage","isUserMessage","onPress","size","uri","sender","profileUrl","flexShrink","marginLeft","marginBottom","caption1","enabled","textSenderName","numberOfLines","senderName","nickname","style","styles","bubble","caption4","textTime","sentDate","Date","createdAt","MessageContainerOutgoing","_ref2","sendingStatus","outgoing","maxWidth","overflow"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<SendbirdMessage>;\n\nconst MessageContainer = (props: Props) => {\n if (props.variant === 'incoming') {\n return <MessageContainer.Incoming {...props} />;\n } else {\n return <MessageContainer.Outgoing {...props} />;\n }\n};\n\nMessageContainer.Incoming = function MessageContainerIncoming({\n children,\n groupedWithNext,\n groupedWithPrev,\n message,\n onPressAvatar,\n strings,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.incoming;\n\n return (\n <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>\n <Box width={26} marginRight={12}>\n {(message.isFileMessage() \|\| message.isUserMessage()) && !groupedWithNext && (\n <Pressable onPress={onPressAvatar}>\n <Avatar size={26} uri={message.sender?.profileUrl} />\n </Pressable>\n )}\n </Box>\n <Box flexShrink={1}>\n {parentMessage}\n {!groupedWithPrev && !~~message.~~parentMessage && (\n <Box marginLeft={12} marginBottom={4}>\n {(message.isFileMessage() \|\| message.isUserMessage()) && (\n <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>\n {strings?.senderName ?? message.sender.nickname}\n </Text>\n )}\n </Box>\n )}\n\n <Box flexDirection={'row'} alignItems={'flex-end'}>\n <Box style={styles.bubble}>{children}</Box>\n {!groupedWithNext && (\n <Box marginLeft={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n </Box>\n </Box>\n );\n};\n\nMessageContainer.Outgoing = function MessageContainerOutgoing({\n children,\n message,\n groupedWithNext,\n strings,\n sendingStatus,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.outgoing;\n\n return (\n <Box>\n {parentMessage}\n <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>\n <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>\n {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}\n {!groupedWithNext && (\n <Box marginRight={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n <Box style={styles.bubble}>{children}</Box>\n </Box>\n </Box>\n );\n};\n\nconst styles = createStyleSheet({\n bubble: {\n maxWidth: 240,\n overflow: 'hidden',\n flexShrink: 1,\n },\n});\n\nexport default MessageContainer;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,cAAc;AAGxC,SAASC,oBAAoB,QAAQ,uBAAuB;AAE5D,OAAOC,GAAG,MAAM,sBAAsB;AACtC,OAAOC,IAAI,MAAM,uBAAuB;AACxC,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,MAAM,MAAM,WAAW;AAK9B,MAAMC,gBAAgB,GAAIC,KAAY,IAAK;EACzC,IAAIA,KAAK,CAACC,OAAO,KAAK,UAAU,EAAE;IAChC,oBAAOV,KAAA,CAAAW,aAAA,CAACH,gBAAgB,CAACI,QAAQ,EAAKH,KAAK,CAAI;EACjD,CAAC,MAAM;IACL,oBAAOT,KAAA,CAAAW,aAAA,CAACH,gBAAgB,CAACK,QAAQ,EAAKJ,KAAK,CAAI;EACjD;AACF,CAAC;AAEDD,gBAAgB,CAACI,QAAQ,GAAG,SAASE,wBAAwBA,CAAAC,IAAA,~~EAQnD~~;EAAA,IAAAC,eAAA;EAAA,~~IARoD~~;IAC5DC,QAAQ;IACRC,eAAe;IACfC,eAAe;IACfC,OAAO;IACPC,aAAa;IACbC,OAAO;IACPC;EACK,CAAC,~~GAAAR~~,IAAA;EACN,MAAM;~~IAAES~~;EAAO,CAAC,~~GAAGlB~~,aAAa,EAAE;EAClC,~~MAAMmB~~,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,mBAAmB,CAACC,QAAQ;EAEpD,~~oBACE5B~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAAC0B~~,aAAa,EAAE,KAAM;IAACC,cAAc,EAAE,YAAa;IAACC,UAAU,EAAE;EAAW,~~gBAC9E/B~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAAC6B~~,KAAK,EAAE,EAAG;IAACC,WAAW,EAAE;EAAG,GAC7B,CAACb,OAAO,CAACc,aAAa,EAAE,IAAId,OAAO,CAACe,aAAa,EAAE,KAAK,CAACjB,eAAe,~~iBACvElB~~,KAAA,CAAAW,aAAA,CAACV,SAAS;~~IAACmC~~,OAAO,EAAEf;EAAc,~~gBAChCrB~~,KAAA,CAAAW,aAAA,CAACJ,MAAM;~~IAAC8B~~,IAAI,EAAE,EAAG;IAACC,GAAG,~~GAAAtB~~,eAAA,~~GAAEI~~,OAAO,CAACmB,MAAM,~~cAAAvB~~,eAAA,uBAAdA,eAAA,~~CAAgBwB~~;EAAW,EAAG,CAExD,CACG,~~eACNxC~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAACsC~~,UAAU,EAAE;EAAE,GAChBlB,aAAa,EACb,CAACJ,eAAe,IAAI,~~CAACC~~,~~OAAO,CAACG,~~aAAa,~~iBACzCvB~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAACuC~~,UAAU,EAAE,EAAG;IAACC,YAAY,EAAE;EAAE,GAClC,CAACvB,OAAO,CAACc,aAAa,EAAE,IAAId,OAAO,CAACe,aAAa,EAAE,~~kBAClDnC~~,KAAA,CAAAW,aAAA,CAACP,IAAI;~~IAACwC~~,QAAQ;IAACnB,KAAK,EAAEA,KAAK,CAACoB,OAAO,CAACC,cAAe;IAACC,aAAa,EAAE;EAAE,GAClE,CAAAzB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE0B,UAAU,KAAI5B,OAAO,CAACmB,MAAM,CAACU,QAAQ,CAElD,CAEJ,~~eAEDjD~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAAC0B~~,aAAa,EAAE,KAAM;IAACE,UAAU,EAAE;EAAW,~~gBAChD/B~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAAC+C~~,KAAK,EAAEC,MAAM,CAACC;EAAO,~~GAAEnC~~,QAAQ,CAAO,EAC1C,~~CAACC~~,eAAe,~~iBACflB~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAACuC~~,UAAU,EAAE;EAAE,~~gBACjB1C~~,KAAA,CAAAW,aAAA,CAACP,IAAI;~~IAACiD~~,QAAQ;IAAC5B,KAAK,EAAEA,KAAK,CAACoB,OAAO,CAACS;EAAS,GAC1C,CAAAhC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEiC,QAAQ,~~KAAIrD~~,oBAAoB,CAAC,~~IAAIsD~~,IAAI,CAACpC,OAAO,CAACqC,SAAS,CAAC,CAAC,CAClE,CAEV,CACG,CACF,CACF;AAEV,CAAC;~~AAEDjD~~,gBAAgB,CAACK,QAAQ,GAAG,~~SAAS6C~~,wBAAwBA,CAAAC,KAAA,~~EAOnD~~;EAAA,~~IAPoD~~;~~IAC5D1C~~,QAAQ;~~IACRG~~,OAAO;IACPF,eAAe;IACfI,OAAO;~~IACPsC~~,aAAa;~~IACbrC~~;EACK,CAAC,~~GAAAoC~~,KAAA;EACN,MAAM;~~IAAEnC~~;EAAO,CAAC,~~GAAGlB~~,aAAa,EAAE;EAClC,~~MAAMmB~~,KAAK,GAAGD,MAAM,CAACE,EAAE,CAACC,mBAAmB,~~CAACkC~~,QAAQ;EAEpD,~~oBACE7D~~,KAAA,CAAAW,aAAA,CAACR,GAAG,~~QACDoB~~,aAAa,~~eACdvB~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAAC0B~~,aAAa,EAAE,KAAM;IAACC,cAAc,EAAE,UAAW;IAACC,UAAU,EAAE;EAAW,~~gBAC5E/B~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAAC0B~~,aAAa,EAAE,KAAM;IAACE,UAAU,EAAE,UAAW;IAACD,cAAc,EAAE;EAAS,~~GACzE8B~~,aAAa,~~iBAAI5D~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAAC8B~~,WAAW,EAAE;EAAE,~~GAAE2B~~,aAAa,CAAO,EAC3D,~~CAAC1C~~,eAAe,~~iBACflB~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAAC8B~~,WAAW,EAAE;EAAE,~~gBAClBjC~~,KAAA,CAAAW,aAAA,CAACP,IAAI;~~IAACiD~~,QAAQ;IAAC5B,KAAK,EAAEA,KAAK,CAACoB,OAAO,CAACS;EAAS,GAC1C,CAAAhC,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEiC,QAAQ,~~KAAIrD~~,oBAAoB,CAAC,~~IAAIsD~~,IAAI,CAACpC,OAAO,CAACqC,SAAS,CAAC,CAAC,CAClE,CAEV,CACG,~~eACNzD~~,KAAA,CAAAW,aAAA,CAACR,GAAG;~~IAAC+C~~,KAAK,EAAEC,MAAM,CAACC;EAAO,~~GAAEnC~~,QAAQ,CAAO,CACvC,CACF;AAEV,CAAC;AAED,MAAMkC,MAAM,~~GAAG9C~~,gBAAgB,CAAC;~~EAC9B+C~~,MAAM,EAAE;~~IACNU~~,QAAQ,EAAE,GAAG;IACbC,QAAQ,EAAE,QAAQ;~~IAClBtB~~,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,~~eAAejC~~,gBAAgB"}
1	+ {"version":3,"names":["React","Pressable","getMessageTimeFormat","Box","Text","createStyleSheet","useUIKitTheme","Avatar","MessageContainer","props","variant","createElement","Incoming","Outgoing","MessageContainerIncoming","_ref","_message$sender","children","replyInfo","groupedWithNext","groupedWithPrev","message","onPressAvatar","strings","parentMessage","colors","color","ui","groupChannelMessage","incoming","flexDirection","justifyContent","alignItems","width","marginRight","isFileMessage","isUserMessage","onPress","size","uri","sender","profileUrl","flexShrink","marginLeft","marginBottom","caption1","enabled","textSenderName","numberOfLines","senderName","nickname","style","styles","bubble","caption4","textTime","sentDate","Date","createdAt","marginTop","MessageContainerOutgoing","_ref2","sendingStatus","outgoing","maxWidth","overflow"],"sources":["MessageContainer.tsx"],"sourcesContent":["import React from 'react';\nimport { Pressable } from 'react-native';\n\nimport type { SendbirdMessage } from '@sendbird/uikit-utils';\nimport { getMessageTimeFormat } from '@sendbird/uikit-utils';\n\nimport Box from '../../components/Box';\nimport Text from '../../components/Text';\nimport createStyleSheet from '../../styles/createStyleSheet';\nimport useUIKitTheme from '../../theme/useUIKitTheme';\nimport Avatar from '../Avatar';\nimport type { GroupChannelMessageProps } from './index';\n\ntype Props = GroupChannelMessageProps<SendbirdMessage>;\n\nconst MessageContainer = (props: Props) => {\n if (props.variant === 'incoming') {\n return <MessageContainer.Incoming {...props} />;\n } else {\n return <MessageContainer.Outgoing {...props} />;\n }\n};\n\nMessageContainer.Incoming = function MessageContainerIncoming({\n children,\n replyInfo,\n groupedWithNext,\n groupedWithPrev,\n message,\n onPressAvatar,\n strings,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.incoming;\n\n return (\n <Box flexDirection={'column'} justifyContent={'flex-start'} alignItems={'flex-start'}>\n <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>\n <Box width={26} marginRight={12}>\n {(message.isFileMessage() \|\| message.isUserMessage()) && !groupedWithNext && (\n <Pressable onPress={onPressAvatar}>\n <Avatar size={26} uri={message.sender?.profileUrl} />\n </Pressable>\n )}\n </Box>\n <Box flexShrink={1}>\n {parentMessage}\n {!groupedWithPrev && !parentMessage && (\n <Box marginLeft={12} marginBottom={4}>\n {(message.isFileMessage() \|\| message.isUserMessage()) && (\n <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>\n {strings?.senderName ?? message.sender.nickname}\n </Text>\n )}\n </Box>\n )}\n <Box flexDirection={'row'} alignItems={'flex-end'}>\n <Box style={styles.bubble}>{children}</Box>\n {!groupedWithNext && (\n <Box marginLeft={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n </Box>\n </Box>\n <Box flexDirection={'row'} marginTop={4}>\n <Box width={26} marginRight={12} justifyContent={'flex-start'} />\n {replyInfo}\n </Box>\n </Box>\n );\n};\n\nMessageContainer.Outgoing = function MessageContainerOutgoing({\n children,\n replyInfo,\n message,\n groupedWithNext,\n strings,\n sendingStatus,\n parentMessage,\n}: Props) {\n const { colors } = useUIKitTheme();\n const color = colors.ui.groupChannelMessage.outgoing;\n\n return (\n <Box>\n {parentMessage}\n <Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>\n <Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>\n {sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}\n {!groupedWithNext && (\n <Box marginRight={4}>\n <Text caption4 color={color.enabled.textTime}>\n {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}\n </Text>\n </Box>\n )}\n </Box>\n <Box style={styles.bubble}>{children}</Box>\n </Box>\n <Box flexDirection={'row'} justifyContent={'flex-end'} marginTop={4}>\n {replyInfo}\n </Box>\n </Box>\n );\n};\n\nconst styles = createStyleSheet({\n bubble: {\n maxWidth: 240,\n overflow: 'hidden',\n flexShrink: 1,\n },\n});\n\nexport default MessageContainer;\n"],"mappings":"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"}

package/lib/module/ui/GroupChannelMessage/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","VoiceFileMessage","UnknownMessage","UserMessage","OpenGraphUser","GroupChannelMessage","User","File","ImageFile","VideoFile","VoiceFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport VoiceFileMessage from './Message.file.voice';\nimport type { VoiceFileMessageState } from './Message.file.voice';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n channel: SendbirdGroupChannel;\n message: T;\n variant?: 'outgoing' \| 'incoming';\n strings?: {\n senderName?: string;\n sentDate?: string;\n edited?: string;\n fileName?: string;\n unknownTitle?: string;\n unknownDescription?: string;\n };\n\n children?: React.ReactNode;\n sendingStatus?: React.ReactNode;\n parentMessage?: React.ReactNode;\n\n groupedWithPrev: boolean;\n groupedWithNext: boolean;\n onPress?: () => void;\n onLongPress?: () => void;\n onPressAvatar?: () => void;\n onPressURL?: (url: string) => void;\n onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n onToggleVoiceMessage?: (\n state: VoiceFileMessageState,\n setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,\n ) => Promise<void>;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n User: UserMessage,\n OpenGraphUser: OpenGraphUser,\n File: FileMessage,\n ImageFile: ImageFileMessage,\n VideoFile: VideoFileMessage,\n VoiceFile: VoiceFileMessage,\n Admin: AdminMessage,\n Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AAEnD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,aAAa,MAAM,mBAAmB;~~AAgC7C~~,MAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAEH,WAAW;EACjBC,aAAa,EAAEA,aAAa;EAC5BG,IAAI,EAAET,WAAW;EACjBU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,KAAK,EAAEd,YAAY;EACnBe,OAAO,EAAEV;AACX,CAAC;AAED,eAAeG,mBAAmB"}
1	+ {"version":3,"names":["AdminMessage","FileMessage","ImageFileMessage","VideoFileMessage","VoiceFileMessage","UnknownMessage","UserMessage","OpenGraphUser","GroupChannelMessage","User","File","ImageFile","VideoFile","VoiceFile","Admin","Unknown"],"sources":["index.ts"],"sourcesContent":["import type React from 'react';\n\nimport type { SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';\n\nimport AdminMessage from './Message.admin';\nimport FileMessage from './Message.file';\nimport ImageFileMessage from './Message.file.image';\nimport VideoFileMessage from './Message.file.video';\nimport VoiceFileMessage from './Message.file.voice';\nimport type { VoiceFileMessageState } from './Message.file.voice';\nimport UnknownMessage from './Message.unknown';\nimport UserMessage from './Message.user';\nimport OpenGraphUser from './Message.user.og';\n\nexport type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps = unknown> = {\n channel: SendbirdGroupChannel;\n message: T;\n variant?: 'outgoing' \| 'incoming';\n strings?: {\n senderName?: string;\n sentDate?: string;\n edited?: string;\n fileName?: string;\n unknownTitle?: string;\n unknownDescription?: string;\n };\n\n children?: React.ReactNode;\n sendingStatus?: React.ReactNode;\n parentMessage?: React.ReactNode;\n replyInfo?: React.ReactNode;\n\n groupedWithPrev: boolean;\n groupedWithNext: boolean;\n onPress?: () => void;\n onLongPress?: () => void;\n onPressAvatar?: () => void;\n onPressURL?: (url: string) => void;\n onPressMentionedUser?: (mentionedUser?: SendbirdUser) => void;\n onToggleVoiceMessage?: (\n state: VoiceFileMessageState,\n setState: React.Dispatch<React.SetStateAction<VoiceFileMessageState>>,\n ) => Promise<void>;\n} & AdditionalProps;\n\nconst GroupChannelMessage = {\n User: UserMessage,\n OpenGraphUser: OpenGraphUser,\n File: FileMessage,\n ImageFile: ImageFileMessage,\n VideoFile: VideoFileMessage,\n VoiceFile: VoiceFileMessage,\n Admin: AdminMessage,\n Unknown: UnknownMessage,\n};\n\nexport default GroupChannelMessage;\n"],"mappings":"AAIA,OAAOA,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AACnD,OAAOC,gBAAgB,MAAM,sBAAsB;AAEnD,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,WAAW,MAAM,gBAAgB;AACxC,OAAOC,aAAa,MAAM,mBAAmB;AAiC7C,MAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAEH,WAAW;EACjBC,aAAa,EAAEA,aAAa;EAC5BG,IAAI,EAAET,WAAW;EACjBU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,SAAS,EAAET,gBAAgB;EAC3BU,KAAK,EAAEd,YAAY;EACnBe,OAAO,EAAEV;AACX,CAAC;AAED,eAAeG,mBAAmB"}

package/lib/typescript/src/assets/icon/index.d.ts CHANGED Viewed

@@ -64,6 +64,7 @@ declare const IconAssets: {
     streaming: any;
     supergroup: any;
     theme: any;
+    thread: any;
     'thumbnail-none': any;
     unarchive: any;
     user: any;

package/lib/typescript/src/components/Icon/index.d.ts CHANGED Viewed

@@ -77,6 +77,7 @@ declare const _default: (({ icon, color, size, containerStyle, style }: Props) =
         streaming: any;
         supergroup: any;
         theme: any;
+        thread: any;
         'thumbnail-none': any;
         unarchive: any;
         user: any;

package/lib/typescript/src/ui/Avatar/index.d.ts CHANGED Viewed

@@ -15,7 +15,7 @@ declare const _default: (({ uri, square, muted, size, containerStyle }: Props) =
         children?: React.ReactNode;
     }) => React.JSX.Element;
     Icon: ({ size, icon, containerStyle, backgroundColor }: {
-        icon: "message" | "recording" | "done" | "search" | "chat-hide" | "chat-show" | "add" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "delete" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "photo" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "stop" | "streaming" | "supergroup" | "theme" | "thumbnail-none" | "unarchive" | "user";
+        icon: "message" | "recording" | "done" | "search" | "chat-hide" | "chat-show" | "add" | "archive" | "arrow-left" | "audio-off-filled" | "audio-off" | "audio-on-filled" | "audio-on" | "ban" | "broadcast" | "camera" | "channels" | "chat-filled" | "chat" | "checkbox-off" | "checkbox-on" | "chevron-down" | "chevron-right" | "close" | "copy" | "create" | "delete" | "document" | "done-all" | "download" | "edit" | "emoji-more" | "error" | "file-audio" | "file-document" | "freeze" | "gif" | "info" | "leave" | "members" | "moderation" | "more" | "mute" | "notifications-filled" | "notifications-off-filled" | "notifications" | "operator" | "pause" | "photo" | "play" | "plus" | "question" | "radio-off" | "radio-on" | "refresh" | "remove" | "reply-filled" | "reply" | "send" | "settings-filled" | "spinner" | "stop" | "streaming" | "supergroup" | "theme" | "thread" | "thumbnail-none" | "unarchive" | "user";
         size?: number | undefined;
         backgroundColor?: string | undefined;
         containerStyle?: StyleProp<ViewStyle>;

package/lib/typescript/src/ui/GroupChannelMessage/Message.file.voice.d.ts CHANGED Viewed

@@ -9,6 +9,9 @@ export type VoiceFileMessageState = {
 type Props = GroupChannelMessageProps<SendbirdFileMessage, {
     durationMetaArrayKey?: string;
     onUnmount: () => void;
+    initialCurrentTime?: number;
+    onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
+    onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
 }>;
 declare const VoiceFileMessage: (props: Props) => React.JSX.Element;
 export default VoiceFileMessage;

package/lib/typescript/src/ui/GroupChannelMessage/MessageContainer.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import type { GroupChannelMessageProps } from './index';
 type Props = GroupChannelMessageProps<SendbirdMessage>;
 declare const MessageContainer: {
     (props: Props): React.JSX.Element;
-    Incoming({ children, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, parentMessage, }: Props): React.JSX.Element;
-    Outgoing({ children, message, groupedWithNext, strings, sendingStatus, parentMessage, }: Props): React.JSX.Element;
+    Incoming({ children, replyInfo, groupedWithNext, groupedWithPrev, message, onPressAvatar, strings, parentMessage, }: Props): React.JSX.Element;
+    Outgoing({ children, replyInfo, message, groupedWithNext, strings, sendingStatus, parentMessage, }: Props): React.JSX.Element;
 };
 export default MessageContainer;

package/lib/typescript/src/ui/GroupChannelMessage/index.d.ts CHANGED Viewed

@@ -16,6 +16,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
     children?: React.ReactNode;
     sendingStatus?: React.ReactNode;
     parentMessage?: React.ReactNode;
+    replyInfo?: React.ReactNode;
     groupedWithPrev: boolean;
     groupedWithNext: boolean;
     onPress?: () => void;
@@ -41,6 +42,7 @@ declare const GroupChannelMessage: {
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
         parentMessage?: React.ReactNode;
+        replyInfo?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -68,6 +70,7 @@ declare const GroupChannelMessage: {
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
         parentMessage?: React.ReactNode;
+        replyInfo?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -95,6 +98,7 @@ declare const GroupChannelMessage: {
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
         parentMessage?: React.ReactNode;
+        replyInfo?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -119,6 +123,7 @@ declare const GroupChannelMessage: {
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
         parentMessage?: React.ReactNode;
+        replyInfo?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -143,6 +148,7 @@ declare const GroupChannelMessage: {
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
         parentMessage?: React.ReactNode;
+        replyInfo?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -171,6 +177,7 @@ declare const GroupChannelMessage: {
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
         parentMessage?: React.ReactNode;
+        replyInfo?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -182,6 +189,9 @@ declare const GroupChannelMessage: {
     } & {
         durationMetaArrayKey?: string | undefined;
         onUnmount: () => void;
+        initialCurrentTime?: number | undefined;
+        onSubscribeStatus?: ((channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void) | undefined;
+        onUnsubscribeStatus?: ((channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void) | undefined;
     }) => React.JSX.Element;
     Admin: (props: {
         channel: SendbirdGroupChannel;
@@ -198,6 +208,7 @@ declare const GroupChannelMessage: {
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
         parentMessage?: React.ReactNode;
+        replyInfo?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;
@@ -222,6 +233,7 @@ declare const GroupChannelMessage: {
         children?: React.ReactNode;
         sendingStatus?: React.ReactNode;
         parentMessage?: React.ReactNode;
+        replyInfo?: React.ReactNode;
         groupedWithPrev: boolean;
         groupedWithNext: boolean;
         onPress?: (() => void) | undefined;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native-foundation",
-  "version": "3.5.4",
+  "version": "3.6.0",
   "description": "A foundational UI kit for building chat-enabled React Native apps.",
   "keywords": [
     "sendbird",
@@ -48,7 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "3.5.4"
+    "@sendbird/uikit-utils": "3.6.0"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -85,5 +85,5 @@
       ]
     ]
   },
-  "gitHead": "98ab944367959657368a0f2f2abb3782b2fb88f2"
+  "gitHead": "74380f45cc34ef2d9f8a6b7f5cb9144329457c5b"
 }

package/src/assets/icon/icon-thread.png ADDED Viewed

Binary file

package/src/assets/icon/icon-thread@2x.png ADDED Viewed

Binary file

package/src/assets/icon/icon-thread@3x.png ADDED Viewed

Binary file

package/src/assets/icon/index.ts CHANGED Viewed

@@ -64,6 +64,7 @@ const IconAssets = {
   'streaming': require('./icon-streaming.png'),
   'supergroup': require('./icon-supergroup.png'),
   'theme': require('./icon-theme.png'),
+  'thread': require('./icon-thread.png'),
   'thumbnail-none': require('./icon-thumbnail-none.png'),
   'unarchive': require('./icon-unarchive.png'),
   'user': require('./icon-user.png'),

package/src/ui/GroupChannelMessage/Message.file.voice.tsx CHANGED Viewed

@@ -25,6 +25,9 @@ type Props = GroupChannelMessageProps<
   {
     durationMetaArrayKey?: string;
     onUnmount: () => void;
+    initialCurrentTime?: number;
+    onSubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
+    onUnsubscribeStatus?: (channelUrl: string, messageId: number, subscriber: (currentTime: number) => void) => void;
   }
 >;
 const VoiceFileMessage = (props: Props) => {
@@ -35,6 +38,9 @@ const VoiceFileMessage = (props: Props) => {
     message,
     durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
     onUnmount,
+    initialCurrentTime,
+    onSubscribeStatus,
+    onUnsubscribeStatus,
   } = props;
   const { colors } = useUIKitTheme();
@@ -45,7 +51,7 @@ const VoiceFileMessage = (props: Props) => {
     const initialDuration = value ? parseInt(value, 10) : 0;
     return {
       status: 'paused',
-      currentTime: 0,
+      currentTime: initialCurrentTime || 0,
       duration: initialDuration,
     };
   });
@@ -56,6 +62,16 @@ const VoiceFileMessage = (props: Props) => {
     };
   }, []);
+  useEffect(() => {
+    const updateCurrentTime = (currentTime: number) => {
+      setState((prev) => ({ ...prev, currentTime }));
+    };
+    onSubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
+    return () => {
+      onUnsubscribeStatus?.(props.channel.url, props.message.messageId, updateCurrentTime);
+    };
+  }, []);
   const uiColors = colors.ui.groupChannelMessage[variant];
   const remainingTime = state.duration - state.currentTime;

package/src/ui/GroupChannelMessage/MessageContainer.tsx CHANGED Viewed

@@ -23,6 +23,7 @@ const MessageContainer = (props: Props) => {
 MessageContainer.Incoming = function MessageContainerIncoming({
   children,
+  replyInfo,
   groupedWithNext,
   groupedWithPrev,
   message,
@@ -34,43 +35,49 @@ MessageContainer.Incoming = function MessageContainerIncoming({
   const color = colors.ui.groupChannelMessage.incoming;
   return (
-    <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
-      <Box width={26} marginRight={12}>
-        {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
-          <Pressable onPress={onPressAvatar}>
-            <Avatar size={26} uri={message.sender?.profileUrl} />
-          </Pressable>
-        )}
-      </Box>
-      <Box flexShrink={1}>
-        {parentMessage}
-        {!groupedWithPrev && !message.parentMessage && (
-          <Box marginLeft={12} marginBottom={4}>
-            {(message.isFileMessage() || message.isUserMessage()) && (
-              <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
-                {strings?.senderName ?? message.sender.nickname}
-              </Text>
-            )}
-          </Box>
-        )}
-        <Box flexDirection={'row'} alignItems={'flex-end'}>
-          <Box style={styles.bubble}>{children}</Box>
-          {!groupedWithNext && (
-            <Box marginLeft={4}>
-              <Text caption4 color={color.enabled.textTime}>
-                {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
-              </Text>
+    <Box flexDirection={'column'} justifyContent={'flex-start'} alignItems={'flex-start'}>
+      <Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
+        <Box width={26} marginRight={12}>
+          {(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
+            <Pressable onPress={onPressAvatar}>
+              <Avatar size={26} uri={message.sender?.profileUrl} />
+            </Pressable>
+          )}
+        </Box>
+        <Box flexShrink={1}>
+          {parentMessage}
+          {!groupedWithPrev && !parentMessage && (
+            <Box marginLeft={12} marginBottom={4}>
+              {(message.isFileMessage() || message.isUserMessage()) && (
+                <Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
+                  {strings?.senderName ?? message.sender.nickname}
+                </Text>
+              )}
             </Box>
           )}
+          <Box flexDirection={'row'} alignItems={'flex-end'}>
+            <Box style={styles.bubble}>{children}</Box>
+            {!groupedWithNext && (
+              <Box marginLeft={4}>
+                <Text caption4 color={color.enabled.textTime}>
+                  {strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
+                </Text>
+              </Box>
+            )}
+          </Box>
         </Box>
       </Box>
+      <Box flexDirection={'row'} marginTop={4}>
+        <Box width={26} marginRight={12} justifyContent={'flex-start'} />
+        {replyInfo}
+      </Box>
     </Box>
   );
 };
 MessageContainer.Outgoing = function MessageContainerOutgoing({
   children,
+  replyInfo,
   message,
   groupedWithNext,
   strings,
@@ -96,6 +103,9 @@ MessageContainer.Outgoing = function MessageContainerOutgoing({
         </Box>
         <Box style={styles.bubble}>{children}</Box>
       </Box>
+      <Box flexDirection={'row'} justifyContent={'flex-end'} marginTop={4}>
+        {replyInfo}
+      </Box>
     </Box>
   );
 };

package/src/ui/GroupChannelMessage/index.ts CHANGED Viewed

@@ -28,6 +28,7 @@ export type GroupChannelMessageProps<T extends SendbirdMessage, AdditionalProps
   children?: React.ReactNode;
   sendingStatus?: React.ReactNode;
   parentMessage?: React.ReactNode;
+  replyInfo?: React.ReactNode;
   groupedWithPrev: boolean;
   groupedWithNext: boolean;