feat: Support setting output file type in image compression process (#1064)

[CLNP-2718](https://sendbird.atlassian.net/browse/CLNP-2718)
[SBISSUE-14611](https://sendbird.atlassian.net/browse/SBISSUE-14611)

### Feature & ChangeLog
* Add `outputFormat` to the image compression options
  ```tsx
  <SendbirdProvider
    ...
    imageCompression={{
      outputFormat: 'preserve' | 'png' | 'jpeg',
    }}
  >
  </SendbirdProvider>
  ```

Author: HoonBaek

src/lib/Sendbird.tsx

@@ -68,10 +68,12 @@ interface VoiceRecordOptions {
   minRecordingTime?: number;
 }
 
+export type ImageCompressionOutputFormatType = 'preserve' | 'png' | 'jpeg';
 export interface ImageCompressionOptions {
   compressionRate?: number;
   resizingWidth?: number | string;
   resizingHeight?: number | string;
+  outputFormat?: ImageCompressionOutputFormatType;
 }
 
 export interface SendbirdConfig {
@@ -361,6 +363,7 @@ const SendbirdSDK = ({
           pubSub,
           imageCompression: {
             compressionRate: 0.7,
+            outputFormat: 'preserve',
             ...imageCompression,
           },
           voiceRecord: {

src/lib/types.ts

@@ -25,6 +25,7 @@ import type {
   ReplyType,
   UserListQuery,
 } from '../types';
+import type { ImageCompressionOptions } from './Sendbird';
 import { UikitMessageHandler } from './selectors';
 import { Logger } from './SendbirdState';
 import { MarkAsReadSchedulerType } from './hooks/useMarkAsReadScheduler';
@@ -86,11 +87,7 @@ export interface SendBirdStateConfig {
     maxMentionCount: number,
     maxSuggestionCount: number,
   };
-  imageCompression?: {
-    compressionRate?: number,
-    resizingWidth?: number | string,
-    resizingHeight?: number | string,
-  };
+  imageCompression?: ImageCompressionOptions;
   markAsReadScheduler: MarkAsReadSchedulerType;
   markAsDeliveredScheduler: MarkAsDeliveredSchedulerType;
   isTypingIndicatorEnabledOnChannelList?: boolean;

src/lib/utils/uikitConfigMapper.ts

@@ -26,6 +26,7 @@ export function uikitConfigMapper({
       enableOgtag: uikitOptions.groupChannel?.enableOgtag,
       enableMention: uikitOptions.groupChannel?.enableMention ?? isMentionEnabled,
       enableReactions: uikitOptions.groupChannel?.enableReactions ?? isReactionEnabled,
+      enableReactionsSupergroup: uikitOptions.groupChannel?.enableReactionsSupergroup,
       enableTypingIndicator: uikitOptions.groupChannel?.enableTypingIndicator,
       enableVoiceMessage: uikitOptions.groupChannel?.enableVoiceMessage ?? isVoiceMessageEnabled,
       replyType: uikitOptions.groupChannel?.replyType

src/modules/OpenChannel/context/hooks/useFileUploadCallback.tsx

@@ -3,6 +3,7 @@ import type { OpenChannel } from '@sendbird/chat/openChannel';
 import type { FileMessageCreateParams } from '@sendbird/chat/message';
 
 import type { Logger } from '../../../../lib/SendbirdState';
+import type { ImageCompressionOptions } from '../../../../lib/Sendbird';
 import * as messageActionTypes from '../dux/actionTypes';
 import * as utils from '../utils';
 import { SdkStore } from '../../../../lib/types';
@@ -18,11 +19,7 @@ interface DynamicParams {
   currentOpenChannel: OpenChannel;
   onBeforeSendFileMessage: (file: File) => FileMessageCreateParams;
   checkScrollBottom: () => boolean;
-  imageCompression?: {
-    compressionRate?: number,
-    resizingWidth?: number | string,
-    resizingHeight?: number | string,
-  };
+  imageCompression?: ImageCompressionOptions;
 }
 interface StaticParams {
   sdk: SdkStore['sdk'];

src/utils/compressImages.ts

@@ -1,10 +1,11 @@
-import { ImageCompressionOptions } from '../lib/Sendbird';
+import type { ImageCompressionOptions, ImageCompressionOutputFormatType } from '../lib/Sendbird';
 import pxToNumber from './pxToNumber';
 import { Logger } from '../lib/SendbirdState';
 
 interface CompressImageParams {
   imageFile: File;
   compressionRate: number;
+  outputFormat: ImageCompressionOutputFormatType;
   resizingWidth?: number;
   resizingHeight?: number;
 }
@@ -14,6 +15,7 @@ export const compressImage = ({
   compressionRate,
   resizingWidth,
   resizingHeight,
+  outputFormat,
 }: CompressImageParams): Promise<File> => {
   const image = document.createElement('img');
   return new Promise((resolve, reject) => {
@@ -51,16 +53,28 @@ export const compressImage = ({
 
       ctx.drawImage(image, 0, 0, targetResizingWidth, targetResizingHeight);
 
+      // Change the file.name & file.type for converting file type
+      const targetFileType = outputFormat === 'preserve' ? imageFile.type : `image/${outputFormat}`;
+      const targetSubtype = targetFileType.split('/').pop();
+      let targetName = '';
+      const dotIndex = imageFile.name.lastIndexOf('.');
+      if (dotIndex === -1) {
+        // No extension found, use the original filename
+        targetName = imageFile.name;
+      } else {
+        // Replace the old extension with the new one
+        targetName = imageFile.name.substring(0, dotIndex) + '.' + targetSubtype;
+      }
       ctx.canvas.toBlob(
         (blob) => {
           if (blob) {
-            const file = new File([blob], imageFile.name, { type: imageFile.type });
+            const file = new File([blob], targetName, { type: targetFileType });
             resolve(file);
           } else {
             reject(new Error('Failed to compress image'));
           }
         },
-        imageFile.type,
+        targetFileType,
         compressionRate,
       );
     };
@@ -77,7 +91,7 @@ export const compressImages = async ({
   logger,
   imageCompression,
 }: CompressImagesParams) => {
-  const { compressionRate } = imageCompression;
+  const { compressionRate, outputFormat = 'preserve' } = imageCompression;
   const resizingWidth = pxToNumber(imageCompression.resizingWidth);
   const resizingHeight = pxToNumber(imageCompression.resizingHeight);
 
@@ -111,6 +125,7 @@ export const compressImages = async ({
             compressionRate,
             resizingWidth,
             resizingHeight,
+            outputFormat,
           });
           result.compressedFiles.push(compressedImage);
         } catch (err) {