feature: Add an interface for confirming file download (#1020)

[CLNP-2565](https://sendbird.atlassian.net/browse/CLNP-2565)

### Original Reason
* There was no interface available to decide whether to proceed with the
file download or not

### ChangeLog & Feature
* Added `onBeforeDownloadFileMessage` to the `<GroupChannel />` and
`<Thread />` modules
* Added `onDownloadClick` to the `FileViewer`, `FileViewerView`,
`MobileBottomSheet`, `MobileContextMenu`, and `MobileMenu`

### How to use
```tsx
const ONE_MB = 1024 * 1024;
/**
  * Use this list to check if it's displayed as a ThumbnailMessage.
  * (https://github.com/sendbird/sendbird-uikit-react/blob/main/src/utils/index.ts)
*/
const ThumbnailMessageTypes = [
  'image/jpeg',
  'image/jpg',
  'image/png',
  'image/gif',
  'image/svg+xml',
  'image/webp', // not supported in IE
  'video/mpeg',
  'video/ogg',
  'video/webm',
  'video/mp4',
];

<GroupChannel // or Thread
  onBeforeDownloadFileMessage={async ({ message, index = null }) => {
    if (message.isFileMessage()) {
      const confirmed = window.confirm(`The file size is ${(message.size / ONE_MB).toFixed(2)}MB. Would you like to continue downloading?`);
      return confirmed;
    }
    if (message.isMultipleFilesMessage()) {
      const confirmed = window.confirm(`The file size is ${(message.fileInfoList[index].fileSize / ONE_MB).toFixed(2)}MB. Would you like to continue downloading?`);
      return confirmed;
    }
    return true;
  }}
/>
```
---------

Co-authored-by: Liam Hongman Cho <[email protected]>

Author: HoonBaek

src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx

@@ -1,5 +1,5 @@
 import './index.scss';
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { createPortal } from 'react-dom';
 
 import { FileViewerProps } from '.';
@@ -15,12 +15,14 @@ import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 type DeleteMessageTypeLegacy = (message: CoreMessageType) => Promise<void>;
 export interface FileViewerViewProps extends FileViewerProps {
   deleteMessage: ((message: SendableMessageType) => Promise<void>) | DeleteMessageTypeLegacy;
+  onDownloadClick?: (e: MouseEvent) => Promise<void>;
 }
 
 export const FileViewerView = ({
   message,
   onCancel,
   deleteMessage,
+  onDownloadClick,
 }: FileViewerViewProps) => {
   const { sender, type, url, name = '', threadInfo } = message;
   const { profileUrl, nickname, userId } = sender;
@@ -38,6 +40,7 @@ export const FileViewerView = ({
       onDelete={() => deleteMessage(message).then(() => onCancel())}
       isByMe={config.userId === userId}
       disableDelete={threadInfo?.replyCount > 0}
+      onDownloadClick={onDownloadClick}
     />,
     document.getElementById(MODAL_ROOT),
   );
@@ -56,6 +59,7 @@ export interface FileViewerUIProps {
   onCancel: () => void;
   onDelete: () => void;
   disableDelete: boolean;
+  onDownloadClick?: (e: MouseEvent) => Promise<void>;
 }
 
 export const FileViewerComponent = ({
@@ -71,6 +75,7 @@ export const FileViewerComponent = ({
   onCancel,
   onDelete,
   disableDelete,
+  onDownloadClick,
 }: FileViewerUIProps) => (
   <div className="sendbird-fileviewer">
     <div className="sendbird-fileviewer__header">
@@ -88,7 +93,13 @@ export const FileViewerComponent = ({
       <div className="sendbird-fileviewer__header__right">
         {isSupportedFileView(type) && (
           <div className="sendbird-fileviewer__header__right__actions">
-            <a className="sendbird-fileviewer__header__right__actions__download" rel="noopener noreferrer" href={url} target="_blank">
+            <a
+              className="sendbird-fileviewer__header__right__actions__download"
+              rel="noopener noreferrer"
+              href={url}
+              target="_blank"
+              onClick={onDownloadClick}
+            >
               <Icon type={IconTypes.DOWNLOAD} fillColor={IconColors.ON_BACKGROUND_1} height="24px" width="24px" />
             </a>
             {onDelete && isByMe && (

src/modules/GroupChannel/components/FileViewer/index.tsx

@@ -3,15 +3,37 @@ import type { FileMessage } from '@sendbird/chat/message';
 
 import { FileViewerView } from './FileViewerView';
 import { useGroupChannelContext } from '../../context/GroupChannelProvider';
+import useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';
 
 export interface FileViewerProps {
   onCancel: () => void;
   message: FileMessage;
 }
 
 export const FileViewer = (props: FileViewerProps) => {
-  const { deleteMessage } = useGroupChannelContext();
-  return <FileViewerView {...props} deleteMessage={deleteMessage} />;
+  const { deleteMessage, onBeforeDownloadFileMessage } = useGroupChannelContext();
+  const { config } = useSendbirdStateContext();
+  const { logger } = config;
+  return (
+    <FileViewerView
+      {...props}
+      deleteMessage={deleteMessage}
+      onDownloadClick={async (e) => {
+        if (!onBeforeDownloadFileMessage) {
+          return null;
+        }
+        try {
+          const allowDownload = await onBeforeDownloadFileMessage({ message: props.message });
+          if (!allowDownload) {
+            e.preventDefault();
+            logger.info?.('FileViewer: Not allowed to download.');
+          }
+        } catch (err) {
+          logger.error?.('FileViewer: Error occurred while determining download continuation:', err);
+        }
+      }}
+    />
+  );
 };
 
 export default FileViewer;

src/modules/GroupChannel/components/Message/MessageView.tsx

@@ -20,14 +20,14 @@ import MessageContent, { MessageContentProps } from '../../../../ui/MessageConte
 
 import SuggestedReplies, { SuggestedRepliesProps } from '../SuggestedReplies';
 import SuggestedMentionListView from '../SuggestedMentionList/SuggestedMentionListView';
+import type { OnBeforeDownloadFileMessageType } from '../../context/GroupChannelProvider';
 
 export interface MessageProps {
   message: EveryMessage;
   hasSeparator?: boolean;
   chainTop?: boolean;
   chainBottom?: boolean;
   handleScroll?: (isBottomMessageAffected?: boolean) => void;
-
   /**
    * Customizes all child components of the message.
    * */
@@ -80,6 +80,11 @@ export interface MessageViewProps extends MessageProps {
 
   renderFileViewer: (props: { message: FileMessage; onCancel: () => void }) => React.ReactElement;
   renderRemoveMessageModal?: (props: { message: EveryMessage; onCancel: () => void }) => React.ReactElement;
+  /**
+   * You can't use this prop in the Channel component (legacy).
+   * Accepting this prop only for the GroupChannel.
+  */
+  onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 
   animatedMessageId: number;
   setAnimatedMessageId: React.Dispatch<React.SetStateAction<number>>;
@@ -127,6 +132,7 @@ const MessageView = (props: MessageViewProps) => {
     setQuoteMessage,
     onQuoteMessageClick,
     onReplyInThreadClick,
+    onBeforeDownloadFileMessage,
 
     sendUserMessage,
     updateUserMessage,
@@ -261,6 +267,7 @@ const MessageView = (props: MessageViewProps) => {
           onReplyInThread: onReplyInThreadClick,
           onQuoteMessageClick: onQuoteMessageClick,
           onMessageHeightChange: handleScroll,
+          onBeforeDownloadFileMessage,
         })}
         { /* Suggested Replies */ }
         {

src/modules/GroupChannel/components/Message/index.tsx

@@ -27,6 +27,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
     onQuoteMessageClick,
     onReplyInThreadClick,
     onMessageAnimated,
+    onBeforeDownloadFileMessage,
     messages,
     updateUserMessage,
     sendUserMessage,
@@ -82,6 +83,7 @@ export const Message = (props: MessageProps): React.ReactElement => {
       renderFileViewer={(props) => <FileViewer {...props} />}
       renderRemoveMessageModal={(props) => <RemoveMessageModal {...props} />}
       usedInLegacy={false}
+      onBeforeDownloadFileMessage={onBeforeDownloadFileMessage}
     />
   );
 };

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -6,6 +6,8 @@ import {
   ReplyType as ChatReplyType,
   UserMessageCreateParams,
   UserMessageUpdateParams,
+  type FileMessage,
+  type MultipleFilesMessage,
 } from '@sendbird/chat/message';
 import type { GroupChannel, MessageCollectionParams, MessageFilterParams } from '@sendbird/chat/groupChannel';
 import { MessageFilter } from '@sendbird/chat/groupChannel';
@@ -30,6 +32,7 @@ type OnBeforeHandler<T> = (params: T) => T | Promise<T>;
 type MessageListQueryParamsType = Omit<MessageCollectionParams, 'filter'> & MessageFilterParams;
 type MessageActions = ReturnType<typeof useMessageActions>;
 type MessageListDataSourceWithoutActions = Omit<ReturnType<typeof useGroupChannelMessages>, keyof MessageActions | `_dangerous_${string}`>;
+export type OnBeforeDownloadFileMessageType = (params: { message: FileMessage | MultipleFilesMessage, index?: number }) => Promise<boolean>;
 
 interface ContextBaseType {
   // Required
@@ -61,6 +64,7 @@ interface ContextBaseType {
   onBeforeSendVoiceMessage?: OnBeforeHandler<FileMessageCreateParams>;
   onBeforeSendMultipleFilesMessage?: OnBeforeHandler<MultipleFilesMessageCreateParams>;
   onBeforeUpdateUserMessage?: OnBeforeHandler<UserMessageUpdateParams>;
+  onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 
   // Click
   onBackClick?(): void;
@@ -123,6 +127,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     onBeforeSendVoiceMessage,
     onBeforeSendMultipleFilesMessage,
     onBeforeUpdateUserMessage,
+    onBeforeDownloadFileMessage,
     onMessageAnimated,
     onBackClick,
     onChatHeaderActionClick,
@@ -389,6 +394,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
         onBeforeSendVoiceMessage,
         onBeforeSendMultipleFilesMessage,
         onBeforeUpdateUserMessage,
+        onBeforeDownloadFileMessage,
         // ## Focusing
         onMessageAnimated,
         // ## Click

src/modules/GroupChannel/index.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { GroupChannelProvider, GroupChannelProviderProps } from './context/GroupChannelProvider';
 import GroupChannelUI, { GroupChannelUIProps } from './components/GroupChannelUI';
 
-export interface GroupChannelProps extends GroupChannelProviderProps, GroupChannelUIProps {}
+export interface GroupChannelProps extends GroupChannelProviderProps, GroupChannelUIProps { }
 export const GroupChannel = (props: GroupChannelProps) => {
   return (
     <GroupChannelProvider {...props}>

src/modules/Thread/components/ParentMessageInfo/ParentMessageInfoItem.tsx

@@ -36,19 +36,23 @@ import { useMediaQueryContext } from '../../../../lib/MediaQueryContext';
 import { useThreadMessageKindKeySelector } from '../../../Channel/context/hooks/useThreadMessageKindKeySelector';
 import { useFileInfoListWithUploaded } from '../../../Channel/context/hooks/useFileInfoListWithUploaded';
 import { Colors } from '../../../../utils/color';
+import type { OnBeforeDownloadFileMessageType } from '../../../GroupChannel/context/GroupChannelProvider';
 
 export interface ParentMessageInfoItemProps {
   className?: string;
   message: SendableMessageType;
   showFileViewer?: (bool: boolean) => void;
+  onBeforeDownloadFileMessage?: OnBeforeDownloadFileMessageType;
 }
 
 export default function ParentMessageInfoItem({
   className,
   message,
   showFileViewer,
+  onBeforeDownloadFileMessage = null,
 }: ParentMessageInfoItemProps): ReactElement {
   const { stores, config, eventHandlers } = useSendbirdStateContext?.() || {};
+  const { logger } = config;
   const onPressUserProfileHandler = eventHandlers?.reaction?.onPressUserProfile;
   const {
     replyType,
@@ -93,6 +97,29 @@ export default function ParentMessageInfoItem({
     });
   }, [message?.updatedAt, (message as UserMessage)?.message]);
 
+  // Only for the FileMessageItemBody
+  const downloadFileWithUrl = () => {
+    if (message.messageType === 'file') {
+      window.open((message as FileMessage)?.url);
+    }
+  };
+  const handleOnClickTextButton = onBeforeDownloadFileMessage
+    ? async () => {
+      if (message.messageType === 'file') {
+        try {
+          const allowDownload = await onBeforeDownloadFileMessage({ message: message as FileMessage });
+          if (allowDownload) {
+            downloadFileWithUrl();
+          } else {
+            logger?.info?.('ParentMessageInfoItem: Not allowed to download.');
+          }
+        } catch (err) {
+          logger?.error?.('ParentMessageInfoItem: Error occurred while determining download continuation:', err);
+        }
+      }
+    }
+    : downloadFileWithUrl;
+
   // Thumbnail mesage
   const [isImageRendered, setImageRendered] = useState(false);
   const thumbnailUrl: string = (message as FileMessage)?.thumbnails?.length > 0
@@ -174,6 +201,7 @@ export default function ParentMessageInfoItem({
         </div>
       )} */}
       {
+        // Instead of the FileMessageItemBody component
         (getUIKitMessageType((message as FileMessage)) === getUIKitMessageTypes().FILE) && (
           <div className="sendbird-parent-message-info-item__file-message">
             <div className="sendbird-parent-message-info-item__file-message__file-icon">
@@ -193,7 +221,7 @@ export default function ParentMessageInfoItem({
             </div>
             <TextButton
               className="sendbird-parent-message-info-item__file-message__file-name"
-              onClick={() => { window.open((message as FileMessage)?.url); }}
+              onClick={handleOnClickTextButton}
               color={Colors.ONBACKGROUND_1}
             >
               <Label
@@ -216,6 +244,7 @@ export default function ParentMessageInfoItem({
             isReactionEnabled={isReactionEnabled}
             threadMessageKindKey={threadMessageKindKey}
             statefulFileInfoList={statefulFileInfoList}
+            onBeforeDownloadFileMessage={onBeforeDownloadFileMessage}
           />
         )
       }

src/modules/Thread/components/ParentMessageInfo/index.tsx

@@ -59,6 +59,7 @@ export default function ParentMessageInfo({
     onHeaderActionClick,
     isMuted,
     isChannelFrozen,
+    onBeforeDownloadFileMessage,
   } = useThreadContext();
   const { isMobile } = useMediaQueryContext();
 
@@ -118,6 +119,21 @@ export default function ParentMessageInfo({
     }));
   }, [mentionedUserIds]);
 
+  const handleOnDownloadClick = async (e) => {
+    if (!onBeforeDownloadFileMessage) {
+      return null;
+    }
+    try {
+      const allowDownload = await onBeforeDownloadFileMessage({ message: parentMessage as FileMessage });
+      if (!allowDownload) {
+        e.preventDefault();
+        logger?.info?.('ParentMessageInfo: Not allowed to download.');
+      }
+    } catch (err) {
+      logger?.error?.('ParentMessageInfo: Error occurred while determining download continuation:', err);
+    }
+  };
+
   // User Profile
   const avatarRef = useRef(null);
   const { disableUserProfile, renderUserProfile } = useContext(UserProfileContext);
@@ -280,6 +296,7 @@ export default function ParentMessageInfo({
         <ParentMessageInfoItem
           message={parentMessage}
           showFileViewer={setShowFileViewer}
+          onBeforeDownloadFileMessage={onBeforeDownloadFileMessage}
         />
       </div>
       {/* context menu */}
@@ -329,6 +346,7 @@ export default function ParentMessageInfo({
                 setShowFileViewer(false);
               });
           }}
+          onDownloadClick={handleOnDownloadClick}
         />
       )}
       {showMobileMenu && (
@@ -354,6 +372,7 @@ export default function ParentMessageInfo({
           showRemove={setShowRemove}
           toggleReaction={toggleReaction}
           isOpenedFromThread
+          onDownloadClick={handleOnDownloadClick}
         />
       )}
     </div>

src/modules/Thread/components/ThreadList/ThreadListItem.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState, useRef, useEffect, useLayoutEffect } from 'react';
 import format from 'date-fns/format';
-import { FileMessage } from '@sendbird/chat/message';
+import type { FileMessage, MultipleFilesMessage } from '@sendbird/chat/message';
 
 import { useLocalization } from '../../../../lib/LocalizationContext';
 import DateSeparator from '../../../../ui/DateSeparator';
@@ -61,6 +61,7 @@ export default function ThreadListItem({
     deleteMessage,
     isMuted,
     isChannelFrozen,
+    onBeforeDownloadFileMessage,
   } = threadContext;
   const openingMessage = threadContext?.message;
 
@@ -258,13 +259,27 @@ export default function ThreadListItem({
       )}
       {showFileViewer && (
         <FileViewer
-          message={message as FileMessage}
+          message={message as FileMessage | MultipleFilesMessage}
           isByMe={message?.sender?.userId === userId}
           onClose={() => setShowFileViewer(false)}
           onDelete={() => {
             deleteMessage(message);
             setShowFileViewer(false);
           }}
+          onDownloadClick={async (e) => {
+            if (!onBeforeDownloadFileMessage) {
+              return null;
+            }
+            try {
+              const allowDownload = await onBeforeDownloadFileMessage({ message: message as FileMessage | MultipleFilesMessage });
+              if (!allowDownload) {
+                e.preventDefault();
+                logger.info?.('ThreadListItem: Not allowed to download.');
+              }
+            } catch (err) {
+              logger.error?.('ThreadListItem: Error occurred while determining download continuation:', err);
+            }
+          }}
         />
       )}
     </div>