@sendbird/uikit-react-native 3.3.0 → 3.4.0

package/lib/module/fragments/createGroupChannelFragment.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","ReplyType","useGroupChannelMessages","Box","NOOP","PASS","messageComparator","useFreshCallback","useIIFE","useRefTracker","GroupChannelMessageRenderer","GroupChannelTypingIndicatorBubble","NewMessagesButton","ScrollToBottomButton","StatusComposition","createGroupChannelModule","usePlatformService","useSendbirdChat","pubsub","createGroupChannelFragment","initModule","GroupChannelModule","_ref","searchItem","renderNewMessagesButton","props","createElement","renderScrollToBottomButton","renderMessage","enableMessageGrouping","enableTypingIndicator","onPressHeaderLeft","onPressHeaderRight","onPressMediaMessage","onChannelDeleted","onBeforeSendUserMessage","onBeforeSendFileMessage","onBeforeUpdateUserMessage","onBeforeUpdateFileMessage","channel","keyboardAvoidOffset","collectionCreator","sortComparator","flatListProps","playerService","recorderService","sdk","currentUser","sbOptions","internalSearchItem","setInternalSearchItem","navigateFromMessageSearch","Boolean","groupChannelPubSub","scrolledAwayFromBottom","setScrolledAwayFromBottom","scrolledAwayFromBottomRef","replyType","uikit","groupChannel","NONE","ONLY_REPLY_TO_CHANNEL","loading","messages","newMessages","resetNewMessages","next","prev","hasNext","sendFileMessage","sendUserMessage","updateFileMessage","updateUserMessage","resendMessage","deleteMessage","resetWithStartingPoint","userId","shouldCountNewMessages","current","onMessagesReceived","publish","type","data","onMessagesUpdated","startingPoint","enableCollectionWithoutLocalCache","onBlurFragment","Promise","allSettled","reset","_onPressHeaderLeft","_onPressHeaderRight","_onPressMediaMessage","message","uri","renderItem","content","isFirstItem","memoizedFlatListProps","ListEmptyComponent","StatusEmpty","contentContainerStyle","flexGrow","onResetMessageList","callback","Number","MAX_SAFE_INTEGER","onResetMessageListWithStartingPoint","onUpdateSearchItem","undefined","onPending","onSent","onPressSendUserMessage","params","processedParams","onPressSendFileMessage","onPressUpdateUserMessage","messageId","onPressUpdateFileMessage","onScrolledAwayFromBottom","value","Provider","Header","shouldHideRight","LoadingComponent","StatusLoading","MessageList","currentUserId","onTopReached","onBottomReached","onResendFailedMessage","onDeleteMessage","Input","SuggestedMentionList","shouldRenderInput","isBroadcast","myRole"],"sources":["createGroupChannelFragment.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { ReplyType } from '@sendbird/chat/message';\nimport { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';\nimport { Box } from '@sendbird/uikit-react-native-foundation';\nimport {\n  NOOP,\n  PASS,\n  SendbirdFileMessage,\n  SendbirdGroupChannel,\n  SendbirdUserMessage,\n  messageComparator,\n  useFreshCallback,\n  useIIFE,\n  useRefTracker,\n} from '@sendbird/uikit-utils';\n\nimport GroupChannelMessageRenderer, {\n  GroupChannelTypingIndicatorBubble,\n} from '../components/GroupChannelMessageRenderer';\nimport NewMessagesButton from '../components/NewMessagesButton';\nimport ScrollToBottomButton from '../components/ScrollToBottomButton';\nimport StatusComposition from '../components/StatusComposition';\nimport createGroupChannelModule from '../domain/groupChannel/module/createGroupChannelModule';\nimport type {\n  GroupChannelFragment,\n  GroupChannelModule,\n  GroupChannelProps,\n  GroupChannelPubSubContextPayload,\n} from '../domain/groupChannel/types';\nimport { usePlatformService, useSendbirdChat } from '../hooks/useContext';\nimport pubsub from '../utils/pubsub';\n\nconst createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): GroupChannelFragment => {\n  const GroupChannelModule = createGroupChannelModule(initModule);\n\n  return ({\n    searchItem,\n    renderNewMessagesButton = (props) => <NewMessagesButton {...props} />,\n    renderScrollToBottomButton = (props) => <ScrollToBottomButton {...props} />,\n    renderMessage,\n    enableMessageGrouping = true,\n    enableTypingIndicator,\n    onPressHeaderLeft = NOOP,\n    onPressHeaderRight = NOOP,\n    onPressMediaMessage = NOOP,\n    onChannelDeleted = NOOP,\n    onBeforeSendUserMessage = PASS,\n    onBeforeSendFileMessage = PASS,\n    onBeforeUpdateUserMessage = PASS,\n    onBeforeUpdateFileMessage = PASS,\n    channel,\n    keyboardAvoidOffset,\n    collectionCreator,\n    sortComparator = messageComparator,\n    flatListProps,\n  }) => {\n    const { playerService, recorderService } = usePlatformService();\n    const { sdk, currentUser, sbOptions } = useSendbirdChat();\n\n    const [internalSearchItem, setInternalSearchItem] = useState(searchItem);\n    const navigateFromMessageSearch = useCallback(() => Boolean(searchItem), []);\n\n    const [groupChannelPubSub] = useState(() => pubsub<GroupChannelPubSubContextPayload>());\n    const [scrolledAwayFromBottom, setScrolledAwayFromBottom] = useState(false);\n    const scrolledAwayFromBottomRef = useRefTracker(scrolledAwayFromBottom);\n\n    const replyType = useIIFE(() => {\n      if (sbOptions.uikit.groupChannel.channel.replyType === 'none') return ReplyType.NONE;\n      else return ReplyType.ONLY_REPLY_TO_CHANNEL;\n    });\n\n    const {\n      loading,\n      messages,\n      newMessages,\n      resetNewMessages,\n      next,\n      prev,\n      hasNext,\n      sendFileMessage,\n      sendUserMessage,\n      updateFileMessage,\n      updateUserMessage,\n      resendMessage,\n      deleteMessage,\n      resetWithStartingPoint,\n    } = useGroupChannelMessages(sdk, channel, currentUser?.userId, {\n      shouldCountNewMessages: () => scrolledAwayFromBottomRef.current,\n      onMessagesReceived(messages) {\n        groupChannelPubSub.publish({ type: 'MESSAGES_RECEIVED', data: { messages } });\n      },\n      onMessagesUpdated(messages) {\n        groupChannelPubSub.publish({ type: 'MESSAGES_UPDATED', data: { messages } });\n      },\n      collectionCreator,\n      sortComparator,\n      onChannelDeleted,\n      replyType,\n      startingPoint: internalSearchItem?.startingPoint,\n      enableCollectionWithoutLocalCache: true,\n    });\n\n    const onBlurFragment = () => {\n      return Promise.allSettled([playerService.reset(), recorderService.reset()]);\n    };\n    const _onPressHeaderLeft = useFreshCallback(async () => {\n      await onBlurFragment();\n      onPressHeaderLeft();\n    });\n    const _onPressHeaderRight = useFreshCallback(async () => {\n      await onBlurFragment();\n      onPressHeaderRight();\n    });\n    const _onPressMediaMessage: NonNullable<GroupChannelProps['MessageList']['onPressMediaMessage']> = useFreshCallback(\n      async (message, deleteMessage, uri) => {\n        await onBlurFragment();\n        onPressMediaMessage(message, deleteMessage, uri);\n      },\n    );\n\n    useEffect(() => {\n      return () => {\n        onBlurFragment();\n      };\n    }, []);\n\n    const renderItem: GroupChannelProps['MessageList']['renderMessage'] = useFreshCallback((props) => {\n      const content = renderMessage ? renderMessage(props) : <GroupChannelMessageRenderer {...props} />;\n      return (\n        <Box>\n          {content}\n          {props.isFirstItem && !hasNext() && <GroupChannelTypingIndicatorBubble />}\n        </Box>\n      );\n    });\n\n    const memoizedFlatListProps = useMemo(\n      () => ({\n        ListEmptyComponent: <GroupChannelModule.StatusEmpty />,\n        contentContainerStyle: { flexGrow: 1 },\n        ...flatListProps,\n      }),\n      [flatListProps],\n    );\n\n    const onResetMessageList = useCallback((callback?: () => void) => {\n      resetWithStartingPoint(Number.MAX_SAFE_INTEGER, callback);\n    }, []);\n\n    const onResetMessageListWithStartingPoint = useCallback((startingPoint: number, callback?: () => void) => {\n      resetWithStartingPoint(startingPoint, callback);\n    }, []);\n\n    // Changing the search item will trigger the focus animation on messages.\n    const onUpdateSearchItem: GroupChannelProps['MessageList']['onUpdateSearchItem'] = useCallback((searchItem) => {\n      // Clean up for animation trigger with useEffect\n      setInternalSearchItem(undefined);\n      setInternalSearchItem(searchItem);\n    }, []);\n\n    const onPending = (message: SendbirdFileMessage | SendbirdUserMessage) => {\n      groupChannelPubSub.publish({ type: 'MESSAGE_SENT_PENDING', data: { message } });\n    };\n\n    const onSent = (message: SendbirdFileMessage | SendbirdUserMessage) => {\n      groupChannelPubSub.publish({ type: 'MESSAGE_SENT_SUCCESS', data: { message } });\n    };\n\n    const onPressSendUserMessage: GroupChannelProps['Input']['onPressSendUserMessage'] = useFreshCallback(\n      async (params) => {\n        const processedParams = await onBeforeSendUserMessage(params);\n        const message = await sendUserMessage(processedParams, onPending);\n        onSent(message);\n      },\n    );\n    const onPressSendFileMessage: GroupChannelProps['Input']['onPressSendFileMessage'] = useFreshCallback(\n      async (params) => {\n        const processedParams = await onBeforeSendFileMessage(params);\n        const message = await sendFileMessage(processedParams, onPending);\n        onSent(message);\n      },\n    );\n    const onPressUpdateUserMessage: GroupChannelProps['Input']['onPressUpdateUserMessage'] = useFreshCallback(\n      async (message, params) => {\n        const processedParams = await onBeforeUpdateUserMessage(params);\n        await updateUserMessage(message.messageId, processedParams);\n      },\n    );\n    const onPressUpdateFileMessage: GroupChannelProps['Input']['onPressUpdateFileMessage'] = useFreshCallback(\n      async (message, params) => {\n        const processedParams = await onBeforeUpdateFileMessage(params);\n        await updateFileMessage(message.messageId, processedParams);\n      },\n    );\n    const onScrolledAwayFromBottom = useFreshCallback((value: boolean) => {\n      if (!value) resetNewMessages();\n      setScrolledAwayFromBottom(value);\n    });\n\n    return (\n      <GroupChannelModule.Provider\n        channel={channel}\n        groupChannelPubSub={groupChannelPubSub}\n        enableTypingIndicator={enableTypingIndicator ?? sbOptions.uikit.groupChannel.channel.enableTypingIndicator}\n        keyboardAvoidOffset={keyboardAvoidOffset}\n        messages={messages}\n        onUpdateSearchItem={onUpdateSearchItem}\n      >\n        <GroupChannelModule.Header\n          shouldHideRight={navigateFromMessageSearch}\n          onPressHeaderLeft={_onPressHeaderLeft}\n          onPressHeaderRight={_onPressHeaderRight}\n        />\n        <StatusComposition loading={loading} LoadingComponent={<GroupChannelModule.StatusLoading />}>\n          <GroupChannelModule.MessageList\n            channel={channel}\n            searchItem={internalSearchItem}\n            onResetMessageList={onResetMessageList}\n            onResetMessageListWithStartingPoint={onResetMessageListWithStartingPoint}\n            onUpdateSearchItem={onUpdateSearchItem}\n            enableMessageGrouping={enableMessageGrouping}\n            currentUserId={currentUser?.userId}\n            renderMessage={renderItem}\n            messages={messages}\n            newMessages={newMessages}\n            onTopReached={prev}\n            onBottomReached={next}\n            hasNext={hasNext}\n            scrolledAwayFromBottom={scrolledAwayFromBottom}\n            onScrolledAwayFromBottom={onScrolledAwayFromBottom}\n            renderNewMessagesButton={renderNewMessagesButton}\n            renderScrollToBottomButton={renderScrollToBottomButton}\n            onResendFailedMessage={resendMessage}\n            onDeleteMessage={deleteMessage}\n            onPressMediaMessage={_onPressMediaMessage}\n            flatListProps={memoizedFlatListProps}\n          />\n          <GroupChannelModule.Input\n            SuggestedMentionList={GroupChannelModule.SuggestedMentionList}\n            shouldRenderInput={shouldRenderInput(channel)}\n            onPressSendUserMessage={onPressSendUserMessage}\n            onPressSendFileMessage={onPressSendFileMessage}\n            onPressUpdateUserMessage={onPressUpdateUserMessage}\n            onPressUpdateFileMessage={onPressUpdateFileMessage}\n          />\n        </StatusComposition>\n      </GroupChannelModule.Provider>\n    );\n  };\n};\n\nfunction shouldRenderInput(channel: SendbirdGroupChannel) {\n  if (channel.isBroadcast) {\n    return channel.myRole === 'operator';\n  }\n\n  return true;\n}\n\nexport default createGroupChannelFragment;\n"],"mappings":"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"}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","useState","ReplyType","Box","useGroupChannelMessages","NOOP","PASS","confirmAndMarkAsRead","messageComparator","useFreshCallback","useIIFE","useRefTracker","GroupChannelMessageRenderer","GroupChannelTypingIndicatorBubble","NewMessagesButton","ScrollToBottomButton","StatusComposition","createGroupChannelModule","usePlatformService","useSendbirdChat","pubsub","createGroupChannelFragment","initModule","GroupChannelModule","_ref","searchItem","renderNewMessagesButton","props","createElement","renderScrollToBottomButton","renderMessage","enableMessageGrouping","enableTypingIndicator","onPressHeaderLeft","onPressHeaderRight","onPressMediaMessage","onChannelDeleted","onBeforeSendUserMessage","onBeforeSendFileMessage","onBeforeUpdateUserMessage","onBeforeUpdateFileMessage","channel","keyboardAvoidOffset","collectionCreator","sortComparator","flatListProps","playerService","recorderService","sdk","currentUser","sbOptions","internalSearchItem","setInternalSearchItem","navigateFromMessageSearch","Boolean","groupChannelPubSub","scrolledAwayFromBottom","setScrolledAwayFromBottom","scrolledAwayFromBottomRef","replyType","uikit","groupChannel","NONE","ONLY_REPLY_TO_CHANNEL","loading","messages","newMessages","resetNewMessages","loadNext","loadPrevious","hasNext","sendFileMessage","sendUserMessage","updateFileMessage","updateUserMessage","resendMessage","deleteMessage","resetWithStartingPoint","shouldCountNewMessages","current","onMessagesReceived","publish","type","data","onMessagesUpdated","onCurrentUserBanned","markAsRead","startingPoint","onBlurFragment","Promise","allSettled","reset","_onPressHeaderLeft","_onPressHeaderRight","_onPressMediaMessage","message","uri","renderItem","content","isFirstItem","memoizedFlatListProps","ListEmptyComponent","StatusEmpty","contentContainerStyle","flexGrow","onResetMessageList","Number","MAX_SAFE_INTEGER","onResetMessageListWithStartingPoint","onUpdateSearchItem","undefined","onPending","onSent","onPressSendUserMessage","params","processedParams","onPressSendFileMessage","onPressUpdateUserMessage","messageId","onPressUpdateFileMessage","onScrolledAwayFromBottom","value","Provider","Header","shouldHideRight","LoadingComponent","StatusLoading","MessageList","currentUserId","userId","onTopReached","onBottomReached","onResendFailedMessage","onDeleteMessage","Input","SuggestedMentionList","shouldRenderInput","isBroadcast","myRole"],"sources":["createGroupChannelFragment.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { ReplyType } from '@sendbird/chat/message';\nimport { Box } from '@sendbird/uikit-react-native-foundation';\nimport { useGroupChannelMessages } from '@sendbird/uikit-tools';\nimport {\n  NOOP,\n  PASS,\n  SendbirdFileMessage,\n  SendbirdGroupChannel,\n  SendbirdUserMessage,\n  confirmAndMarkAsRead,\n  messageComparator,\n  useFreshCallback,\n  useIIFE,\n  useRefTracker,\n} from '@sendbird/uikit-utils';\n\nimport GroupChannelMessageRenderer, {\n  GroupChannelTypingIndicatorBubble,\n} from '../components/GroupChannelMessageRenderer';\nimport NewMessagesButton from '../components/NewMessagesButton';\nimport ScrollToBottomButton from '../components/ScrollToBottomButton';\nimport StatusComposition from '../components/StatusComposition';\nimport createGroupChannelModule from '../domain/groupChannel/module/createGroupChannelModule';\nimport type {\n  GroupChannelFragment,\n  GroupChannelModule,\n  GroupChannelProps,\n  GroupChannelPubSubContextPayload,\n} from '../domain/groupChannel/types';\nimport { usePlatformService, useSendbirdChat } from '../hooks/useContext';\nimport pubsub from '../utils/pubsub';\n\nconst createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): GroupChannelFragment => {\n  const GroupChannelModule = createGroupChannelModule(initModule);\n\n  return ({\n    searchItem,\n    renderNewMessagesButton = (props) => <NewMessagesButton {...props} />,\n    renderScrollToBottomButton = (props) => <ScrollToBottomButton {...props} />,\n    renderMessage,\n    enableMessageGrouping = true,\n    enableTypingIndicator,\n    onPressHeaderLeft = NOOP,\n    onPressHeaderRight = NOOP,\n    onPressMediaMessage = NOOP,\n    onChannelDeleted = NOOP,\n    onBeforeSendUserMessage = PASS,\n    onBeforeSendFileMessage = PASS,\n    onBeforeUpdateUserMessage = PASS,\n    onBeforeUpdateFileMessage = PASS,\n    channel,\n    keyboardAvoidOffset,\n    collectionCreator,\n    sortComparator = messageComparator,\n    flatListProps,\n  }) => {\n    const { playerService, recorderService } = usePlatformService();\n    const { sdk, currentUser, sbOptions } = useSendbirdChat();\n\n    const [internalSearchItem, setInternalSearchItem] = useState(searchItem);\n    const navigateFromMessageSearch = useCallback(() => Boolean(searchItem), []);\n\n    const [groupChannelPubSub] = useState(() => pubsub<GroupChannelPubSubContextPayload>());\n    const [scrolledAwayFromBottom, setScrolledAwayFromBottom] = useState(false);\n    const scrolledAwayFromBottomRef = useRefTracker(scrolledAwayFromBottom);\n\n    const replyType = useIIFE(() => {\n      if (sbOptions.uikit.groupChannel.channel.replyType === 'none') return ReplyType.NONE;\n      else return ReplyType.ONLY_REPLY_TO_CHANNEL;\n    });\n\n    const {\n      loading,\n      messages,\n      newMessages,\n      resetNewMessages,\n      loadNext,\n      loadPrevious,\n      hasNext,\n      sendFileMessage,\n      sendUserMessage,\n      updateFileMessage,\n      updateUserMessage,\n      resendMessage,\n      deleteMessage,\n      resetWithStartingPoint,\n    } = useGroupChannelMessages(sdk, channel, {\n      shouldCountNewMessages: () => scrolledAwayFromBottomRef.current,\n      onMessagesReceived(messages) {\n        groupChannelPubSub.publish({ type: 'MESSAGES_RECEIVED', data: { messages } });\n      },\n      onMessagesUpdated(messages) {\n        groupChannelPubSub.publish({ type: 'MESSAGES_UPDATED', data: { messages } });\n      },\n      onChannelDeleted,\n      onCurrentUserBanned: onChannelDeleted,\n      collectionCreator,\n      sortComparator,\n      markAsRead: confirmAndMarkAsRead,\n      replyType,\n      startingPoint: internalSearchItem?.startingPoint,\n    });\n\n    const onBlurFragment = () => {\n      return Promise.allSettled([playerService.reset(), recorderService.reset()]);\n    };\n    const _onPressHeaderLeft = useFreshCallback(async () => {\n      await onBlurFragment();\n      onPressHeaderLeft();\n    });\n    const _onPressHeaderRight = useFreshCallback(async () => {\n      await onBlurFragment();\n      onPressHeaderRight();\n    });\n    const _onPressMediaMessage: NonNullable<GroupChannelProps['MessageList']['onPressMediaMessage']> = useFreshCallback(\n      async (message, deleteMessage, uri) => {\n        await onBlurFragment();\n        onPressMediaMessage(message, deleteMessage, uri);\n      },\n    );\n\n    useEffect(() => {\n      return () => {\n        onBlurFragment();\n      };\n    }, []);\n\n    const renderItem: GroupChannelProps['MessageList']['renderMessage'] = useFreshCallback((props) => {\n      const content = renderMessage ? renderMessage(props) : <GroupChannelMessageRenderer {...props} />;\n      return (\n        <Box>\n          {content}\n          {props.isFirstItem && !hasNext() && <GroupChannelTypingIndicatorBubble />}\n        </Box>\n      );\n    });\n\n    const memoizedFlatListProps = useMemo(\n      () => ({\n        ListEmptyComponent: <GroupChannelModule.StatusEmpty />,\n        contentContainerStyle: { flexGrow: 1 },\n        ...flatListProps,\n      }),\n      [flatListProps],\n    );\n\n    const onResetMessageList = useCallback(async () => {\n      return await resetWithStartingPoint(Number.MAX_SAFE_INTEGER);\n    }, []);\n\n    const onResetMessageListWithStartingPoint = useCallback(async (startingPoint: number) => {\n      return await resetWithStartingPoint(startingPoint);\n    }, []);\n\n    // Changing the search item will trigger the focus animation on messages.\n    const onUpdateSearchItem: GroupChannelProps['MessageList']['onUpdateSearchItem'] = useCallback((searchItem) => {\n      // Clean up for animation trigger with useEffect\n      setInternalSearchItem(undefined);\n      setInternalSearchItem(searchItem);\n    }, []);\n\n    const onPending = (message: SendbirdFileMessage | SendbirdUserMessage) => {\n      groupChannelPubSub.publish({ type: 'MESSAGE_SENT_PENDING', data: { message } });\n    };\n\n    const onSent = (message: SendbirdFileMessage | SendbirdUserMessage) => {\n      groupChannelPubSub.publish({ type: 'MESSAGE_SENT_SUCCESS', data: { message } });\n    };\n\n    const onPressSendUserMessage: GroupChannelProps['Input']['onPressSendUserMessage'] = useFreshCallback(\n      async (params) => {\n        const processedParams = await onBeforeSendUserMessage(params);\n        const message = await sendUserMessage(processedParams, onPending);\n        onSent(message);\n      },\n    );\n    const onPressSendFileMessage: GroupChannelProps['Input']['onPressSendFileMessage'] = useFreshCallback(\n      async (params) => {\n        const processedParams = await onBeforeSendFileMessage(params);\n        const message = await sendFileMessage(processedParams, onPending);\n        onSent(message);\n      },\n    );\n    const onPressUpdateUserMessage: GroupChannelProps['Input']['onPressUpdateUserMessage'] = useFreshCallback(\n      async (message, params) => {\n        const processedParams = await onBeforeUpdateUserMessage(params);\n        await updateUserMessage(message.messageId, processedParams);\n      },\n    );\n    const onPressUpdateFileMessage: GroupChannelProps['Input']['onPressUpdateFileMessage'] = useFreshCallback(\n      async (message, params) => {\n        const processedParams = await onBeforeUpdateFileMessage(params);\n        await updateFileMessage(message.messageId, processedParams);\n      },\n    );\n    const onScrolledAwayFromBottom = useFreshCallback((value: boolean) => {\n      if (!value) resetNewMessages();\n      setScrolledAwayFromBottom(value);\n    });\n\n    return (\n      <GroupChannelModule.Provider\n        channel={channel}\n        groupChannelPubSub={groupChannelPubSub}\n        enableTypingIndicator={enableTypingIndicator ?? sbOptions.uikit.groupChannel.channel.enableTypingIndicator}\n        keyboardAvoidOffset={keyboardAvoidOffset}\n        messages={messages}\n        onUpdateSearchItem={onUpdateSearchItem}\n      >\n        <GroupChannelModule.Header\n          shouldHideRight={navigateFromMessageSearch}\n          onPressHeaderLeft={_onPressHeaderLeft}\n          onPressHeaderRight={_onPressHeaderRight}\n        />\n        <StatusComposition loading={loading} LoadingComponent={<GroupChannelModule.StatusLoading />}>\n          <GroupChannelModule.MessageList\n            channel={channel}\n            searchItem={internalSearchItem}\n            onResetMessageList={onResetMessageList}\n            onResetMessageListWithStartingPoint={onResetMessageListWithStartingPoint}\n            onUpdateSearchItem={onUpdateSearchItem}\n            enableMessageGrouping={enableMessageGrouping}\n            currentUserId={currentUser?.userId}\n            renderMessage={renderItem}\n            messages={messages}\n            newMessages={newMessages}\n            onTopReached={loadPrevious}\n            onBottomReached={loadNext}\n            hasNext={hasNext}\n            scrolledAwayFromBottom={scrolledAwayFromBottom}\n            onScrolledAwayFromBottom={onScrolledAwayFromBottom}\n            renderNewMessagesButton={renderNewMessagesButton}\n            renderScrollToBottomButton={renderScrollToBottomButton}\n            onResendFailedMessage={resendMessage}\n            onDeleteMessage={deleteMessage}\n            onPressMediaMessage={_onPressMediaMessage}\n            flatListProps={memoizedFlatListProps}\n          />\n          <GroupChannelModule.Input\n            SuggestedMentionList={GroupChannelModule.SuggestedMentionList}\n            shouldRenderInput={shouldRenderInput(channel)}\n            onPressSendUserMessage={onPressSendUserMessage}\n            onPressSendFileMessage={onPressSendFileMessage}\n            onPressUpdateUserMessage={onPressUpdateUserMessage}\n            onPressUpdateFileMessage={onPressUpdateFileMessage}\n          />\n        </StatusComposition>\n      </GroupChannelModule.Provider>\n    );\n  };\n};\n\nfunction shouldRenderInput(channel: SendbirdGroupChannel) {\n  if (channel.isBroadcast) {\n    return channel.myRole === 'operator';\n  }\n\n  return true;\n}\n\nexport default createGroupChannelFragment;\n"],"mappings":"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"}

package/lib/module/version.js

@@ -1,3 +1,3 @@
-const VERSION = '3.3.0';
+const VERSION = '3.4.0';
 export default VERSION;
 //# sourceMappingURL=version.js.map

package/lib/module/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.3.0';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAO;AACvB,eAAeA,OAAO"}
+{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.4.0';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAO;AACvB,eAAeA,OAAO"}

package/lib/typescript/src/components/ChannelMessageList/index.d.ts

@@ -24,7 +24,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     onEditMessage: (message: HandleableMessage) => void;
     onReplyMessage?: (message: HandleableMessage) => void;
     onDeleteMessage: (message: HandleableMessage) => Promise<void>;
-    onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<void>;
+    onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<HandleableMessage | void>;
     onPressParentMessage?: (parentMessage: SendbirdMessage) => void;
     onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
     renderMessage: (props: {

package/lib/typescript/src/components/FileViewer/FileViewerContent.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FileType } from '@sendbird/uikit-utils';
+type Props = {
+    type: FileType;
+    src: string;
+    topInset?: number;
+    bottomInset?: number;
+    maxZoom?: number;
+    minZoom?: number;
+    onPress?: () => void;
+};
+declare const FileViewerContent: ({ type, src, topInset, bottomInset, maxZoom, minZoom, onPress }: Props) => React.JSX.Element;
+export default FileViewerContent;

package/lib/typescript/src/components/FileViewer/FileViewerFooter.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    bottomInset: number;
+    deleteShown: boolean;
+    onPressDelete: () => void;
+    onPressDownload: () => void;
+};
+declare const FileViewerFooter: ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: Props) => React.JSX.Element;
+export default FileViewerFooter;

package/lib/typescript/src/components/FileViewer/FileViewerHeader.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type Props = {
+    headerShown?: boolean;
+    topInset: number;
+    onClose: () => void;
+    title: string;
+    subtitle: string;
+};
+declare const FileViewerHeader: ({ headerShown, topInset, onClose, subtitle, title }: Props) => React.JSX.Element | null;
+export default FileViewerHeader;

package/lib/typescript/src/components/{FileViewer.d.ts → FileViewer/index.d.ts}

@@ -8,6 +8,10 @@ type Props = {
     onPressDelete?: (message: SendbirdFileMessage) => void;
     headerShown?: boolean;
     headerTopInset?: number;
+    /** This prop is only available on the Image viewer */
+    minZoom?: number;
+    /** This prop is only available on the Image viewer */
+    maxZoom?: number;
 };
-declare const FileViewer: ({ headerShown, deleteMessage, headerTopInset, fileMessage, onPressDownload, onPressDelete, onClose, }: Props) => React.JSX.Element;
+declare const FileViewer: ({ headerShown, maxZoom, minZoom, headerTopInset, fileMessage, onClose, onPressDownload, onPressDelete, deleteMessage, }: Props) => React.JSX.Element;
 export default FileViewer;

package/lib/typescript/src/containers/SendbirdUIKitContainer.d.ts

@@ -13,7 +13,7 @@ import type { StringSet } from '../localization/StringSet.type';
 import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInterface, NotificationServiceInterface, PlayerServiceInterface, RecorderServiceInterface } from '../platform/types';
 import type { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 export declare const SendbirdUIKit: Readonly<{
-    VERSION: "3.3.0";
+    VERSION: "3.4.0";
     PLATFORM: string;
     DEFAULT: {
         AUTO_PUSH_TOKEN_REGISTRATION: boolean;

package/lib/typescript/src/domain/groupChannel/component/GroupChannelMessageList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 declare const _default: React.MemoExoticComponent<(props: Pick<import("../../../components/ChannelMessageList").ChannelMessageListProps<import("@sendbird/chat/groupChannel").GroupChannel>, "channel" | "onTopReached" | "onBottomReached" | "onScrolledAwayFromBottom" | "currentUserId" | "enableMessageGrouping" | "searchItem" | "hasNext" | "onDeleteMessage" | "onResendFailedMessage" | "onPressMediaMessage" | "renderNewMessagesButton" | "renderScrollToBottomButton" | "renderMessage" | "messages" | "newMessages" | "scrolledAwayFromBottom" | "flatListProps"> & {
-    onResetMessageList: (callback?: (() => void) | undefined) => void;
-    onResetMessageListWithStartingPoint: (startingPoint: number, callback?: (() => void) | undefined) => void;
+    onResetMessageList: () => Promise<void>;
+    onResetMessageListWithStartingPoint: (startingPoint: number) => Promise<void>;
     onUpdateSearchItem: (searchItem?: {
         startingPoint: number;
     } | undefined) => void;

package/lib/typescript/src/domain/groupChannel/types.d.ts

@@ -34,8 +34,8 @@ export interface GroupChannelProps {
         onPressHeaderRight: () => void;
     };
     MessageList: Pick<ChannelMessageListProps<SendbirdGroupChannel>, 'enableMessageGrouping' | 'currentUserId' | 'channel' | 'messages' | 'newMessages' | 'scrolledAwayFromBottom' | 'onScrolledAwayFromBottom' | 'onTopReached' | 'onBottomReached' | 'onResendFailedMessage' | 'onDeleteMessage' | 'onPressMediaMessage' | 'renderMessage' | 'renderNewMessagesButton' | 'renderScrollToBottomButton' | 'flatListProps' | 'hasNext' | 'searchItem'> & {
-        onResetMessageList: (callback?: () => void) => void;
-        onResetMessageListWithStartingPoint: (startingPoint: number, callback?: () => void) => void;
+        onResetMessageList: () => Promise<void>;
+        onResetMessageListWithStartingPoint: (startingPoint: number) => Promise<void>;
         onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;
     };
     Input: Pick<ChannelInputProps, 'shouldRenderInput' | 'onPressSendUserMessage' | 'onPressSendFileMessage' | 'onPressUpdateUserMessage' | 'onPressUpdateFileMessage' | 'SuggestedMentionList' | 'AttachmentsButton'>;

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "3.3.0";
+declare const VERSION = "3.4.0";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -59,10 +59,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "3.3.0",
-    "@sendbird/uikit-react-native-foundation": "3.3.0",
-    "@sendbird/uikit-tools": "0.0.1-alpha.42",
-    "@sendbird/uikit-utils": "3.3.0"
+    "@openspacelabs/react-native-zoomable-view": "^2.1.5",
+    "@sendbird/uikit-chat-hooks": "3.4.0",
+    "@sendbird/uikit-react-native-foundation": "3.4.0",
+    "@sendbird/uikit-tools": "0.0.1-alpha.58",
+    "@sendbird/uikit-utils": "3.4.0"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -107,7 +108,7 @@
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.9.8",
+    "@sendbird/chat": "^4.10.7",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
@@ -202,5 +203,5 @@
       ]
     ]
   },
-  "gitHead": "51adda5f33a7bb450b51ce30f505dcc9884e9586"
+  "gitHead": "fc6ddd204fd8c7f4ff417351580147d868bf3889"
 }

package/src/components/ChannelMessageList/index.tsx

@@ -59,7 +59,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
   onEditMessage: (message: HandleableMessage) => void;
   onReplyMessage?: (message: HandleableMessage) => void; // only available on group channel
   onDeleteMessage: (message: HandleableMessage) => Promise<void>;
-  onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<void>;
+  onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<HandleableMessage | void>;
   onPressParentMessage?: (parentMessage: SendbirdMessage) => void;
   onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
 

package/src/components/FileViewer/FileViewerContent.tsx

@@ -0,0 +1,141 @@
+import { ReactNativeZoomableView, ReactNativeZoomableViewProps } from '@openspacelabs/react-native-zoomable-view';
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { ImageProps, ImageStyle, ImageURISource, StyleProp, StyleSheet, useWindowDimensions } from 'react-native';
+
+import {
+  Box,
+  Image,
+  LoadingSpinner,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { FileType, useIIFE } from '@sendbird/uikit-utils';
+
+import { usePlatformService } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+
+type Props = {
+  type: FileType;
+  src: string;
+  topInset?: number;
+  bottomInset?: number;
+  maxZoom?: number;
+  minZoom?: number;
+  onPress?: () => void;
+};
+const FileViewerContent = ({ type, src, topInset = 0, bottomInset = 0, maxZoom = 4, minZoom = 1, onPress }: Props) => {
+  const [loading, setLoading] = useState(true);
+
+  const { defaultHeight } = useHeaderStyle();
+  const { mediaService } = usePlatformService();
+  const { palette } = useUIKitTheme();
+
+  const source = { uri: src };
+  const onLoadEnd = () => setLoading(false);
+  const mediaViewer = useIIFE(() => {
+    switch (type) {
+      case 'image': {
+        return (
+          <ZoomableImageView
+            source={source}
+            style={StyleSheet.absoluteFill}
+            resizeMode={'contain'}
+            onLoadEnd={onLoadEnd}
+            zoomProps={{
+              minZoom,
+              maxZoom,
+              onTouchEnd: onPress,
+            }}
+          />
+        );
+      }
+
+      case 'video':
+      case 'audio': {
+        return (
+          <mediaService.VideoComponent
+            source={source}
+            style={[StyleSheet.absoluteFill, { top: topInset, bottom: defaultHeight + bottomInset }]}
+            resizeMode={'contain'}
+            onLoad={onLoadEnd}
+          />
+        );
+      }
+
+      default: {
+        return null;
+      }
+    }
+  });
+
+  return (
+    <Box style={styles.container}>
+      {mediaViewer}
+      {loading && <LoadingSpinner style={{ position: 'absolute' }} size={40} color={palette.primary300} />}
+    </Box>
+  );
+};
+
+const ZoomableImageView = ({
+  zoomProps,
+  ...props
+}: {
+  source: ImageURISource;
+  style: StyleProp<ImageStyle>;
+  resizeMode: ImageProps['resizeMode'];
+  onLoadEnd: () => void;
+  zoomProps?: ReactNativeZoomableViewProps;
+}) => {
+  const { width, height } = useWindowDimensions();
+
+  const imageSize = useRef<{ width: number; height: number }>();
+  const [contentSizeProps, setContentSizeProps] = useState<ReactNativeZoomableViewProps>({
+    contentWidth: width,
+    contentHeight: height,
+  });
+
+  useLayoutEffect(() => {
+    SBUUtils.safeRun(async () => {
+      if (props.source.uri) {
+        const image = imageSize.current ?? (await SBUUtils.getImageSize(props.source.uri));
+        imageSize.current = image;
+
+        const viewRatio = width / height;
+        const imageRatio = image.width / image.height;
+
+        const fitDirection = viewRatio > imageRatio ? 'height' : 'width';
+        const ratio = fitDirection === 'height' ? height / image.height : width / image.width;
+        const actualSize = { width: image.width * ratio, height: image.height * ratio };
+
+        setContentSizeProps({
+          contentWidth: actualSize.width,
+          contentHeight: actualSize.height,
+        });
+      }
+    });
+  }, [props.source.uri, width, height]);
+
+  return (
+    <ReactNativeZoomableView
+      visualTouchFeedbackEnabled={false}
+      style={{ width, height }}
+      initialZoom={1}
+      {...contentSizeProps}
+      {...zoomProps}
+    >
+      <Image {...props} />
+    </ReactNativeZoomableView>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    zIndex: -1,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default FileViewerContent;

package/src/components/FileViewer/FileViewerFooter.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  Box,
+  Icon,
+  PressBox,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+
+type Props = {
+  bottomInset: number;
+  deleteShown: boolean;
+  onPressDelete: () => void;
+  onPressDownload: () => void;
+};
+
+const FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: Props) => {
+  const { palette } = useUIKitTheme();
+  const { defaultHeight } = useHeaderStyle();
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <Box
+      style={[
+        styles.container,
+        {
+          paddingLeft: styles.container.paddingHorizontal + left,
+          paddingRight: styles.container.paddingHorizontal + right,
+          paddingBottom: bottomInset,
+          height: defaultHeight + bottomInset,
+          backgroundColor: palette.overlay01,
+        },
+      ]}
+    >
+      <PressBox activeOpacity={0.75} onPress={onPressDownload} style={styles.buttonContainer}>
+        <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />
+      </PressBox>
+      <Box style={styles.titleContainer} />
+      <PressBox activeOpacity={0.75} onPress={onPressDelete} style={styles.buttonContainer} disabled={!deleteShown}>
+        {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}
+      </PressBox>
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  buttonContainer: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default FileViewerFooter;

package/src/components/FileViewer/FileViewerHeader.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  Box,
+  Icon,
+  PressBox,
+  Text,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { truncate } from '@sendbird/uikit-utils';
+
+type Props = {
+  headerShown?: boolean;
+  topInset: number;
+  onClose: () => void;
+  title: string;
+  subtitle: string;
+};
+
+const FileViewerHeader = ({ headerShown = true, topInset, onClose, subtitle, title }: Props) => {
+  const { palette } = useUIKitTheme();
+  const { defaultHeight } = useHeaderStyle();
+  const { left, right } = useSafeAreaInsets();
+
+  if (!headerShown) return null;
+
+  return (
+    <Box
+      style={[
+        styles.container,
+        {
+          paddingLeft: styles.container.paddingHorizontal + left,
+          paddingRight: styles.container.paddingHorizontal + right,
+          paddingTop: topInset,
+          height: defaultHeight + topInset,
+          backgroundColor: palette.overlay01,
+        },
+      ]}
+    >
+      <PressBox activeOpacity={0.75} onPress={onClose} style={styles.buttonContainer}>
+        <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />
+      </PressBox>
+      <Box style={styles.titleContainer}>
+        <Text h2 color={palette.onBackgroundDark01} style={styles.title} numberOfLines={1}>
+          {truncate(title, { mode: 'mid', maxLen: 18 })}
+        </Text>
+        <Text caption2 color={palette.onBackgroundDark01} numberOfLines={1}>
+          {subtitle}
+        </Text>
+      </Box>
+      <Box style={styles.buttonContainer} />
+    </Box>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    top: 0,
+    left: 0,
+    right: 0,
+    position: 'absolute',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  buttonContainer: {
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  titleContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    marginBottom: 2,
+  },
+});
+
+export default FileViewerHeader;