@sendbird/uikit-react-native 2.2.0 → 2.4.0

package/src/components/ChannelInput/SendInput.tsx

@@ -0,0 +1,302 @@
+import React, { forwardRef } from 'react';
+import {
+  NativeSyntheticEvent,
+  Platform,
+  TextInput as RNTextInput,
+  TextInputSelectionChangeEventData,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import { MentionType } from '@sendbird/chat/message';
+import {
+  Icon,
+  TextInput,
+  createStyleSheet,
+  useAlert,
+  useBottomSheet,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import { isImage, shouldCompressImage } from '@sendbird/uikit-utils';
+
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+import SBUError from '../../libs/SBUError';
+import SBUUtils from '../../libs/SBUUtils';
+import type { FileType } from '../../platform/types';
+import type { MentionedUser } from '../../types';
+import type { ChannelInputProps } from './index';
+
+interface SendInputProps extends ChannelInputProps {
+  text: string;
+  onChangeText: (val: string) => void;
+  onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
+  mentionedUsers: MentionedUser[];
+}
+
+const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
+  {
+    onPressSendUserMessage,
+    onPressSendFileMessage,
+    onSendUserMessage,
+    onSendFileMessage,
+    text,
+    onChangeText,
+    onSelectionChange,
+    mentionedUsers,
+    inputDisabled,
+    inputFrozen,
+    inputMuted,
+  },
+  ref,
+) {
+  const { mentionManager, imageCompressionConfig, features } = useSendbirdChat();
+  const { STRINGS } = useLocalization();
+  const { fileService, mediaService } = usePlatformService();
+  const { colors } = useUIKitTheme();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
+  const toast = useToast();
+
+  const sendUserMessage = () => {
+    const mentionType = MentionType.USERS;
+    const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
+    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
+
+    if (onPressSendUserMessage) {
+      onPressSendUserMessage({
+        message: text,
+        mentionType,
+        mentionedUserIds,
+        mentionedMessageTemplate,
+      }).catch(onFailureToSend);
+    } else if (onSendUserMessage) {
+      onSendUserMessage(text, {
+        type: mentionType,
+        userIds: mentionedUserIds,
+        messageTemplate: mentionedMessageTemplate,
+      }).catch(onFailureToSend);
+    }
+
+    onChangeText('');
+  };
+
+  const sendFileMessage = (file: FileType) => {
+    if (onPressSendFileMessage) {
+      onPressSendFileMessage({ file }).catch(onFailureToSend);
+    } else if (onSendFileMessage) {
+      onSendFileMessage(file).catch(onFailureToSend);
+    }
+  };
+
+  const onFailureToSend = () => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
+
+  const onPressAttachment = () => {
+    openSheet({
+      sheetItems: [
+        {
+          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA,
+          icon: 'camera',
+          onPress: async () => {
+            const mediaFile = await fileService.openCamera({
+              mediaType: 'all',
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_CAMERA,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error');
+                }
+              },
+            });
+
+            if (mediaFile) {
+              // Image compression
+              if (
+                isImage(mediaFile.uri, mediaFile.type) &&
+                shouldCompressImage(mediaFile.uri, features.imageCompressionEnabled)
+              ) {
+                await SBUUtils.safeRun(async () => {
+                  const compressed = await mediaService.compressImage({
+                    uri: mediaFile.uri,
+                    maxWidth: imageCompressionConfig.width,
+                    maxHeight: imageCompressionConfig.height,
+                    compressionRate: imageCompressionConfig.compressionRate,
+                  });
+
+                  if (compressed) {
+                    mediaFile.uri = compressed.uri;
+                    mediaFile.size = compressed.size;
+                  }
+                });
+              }
+
+              sendFileMessage(mediaFile);
+            }
+          },
+        },
+        {
+          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
+          icon: 'photo',
+          onPress: async () => {
+            const mediaFiles = await fileService.openMediaLibrary({
+              selectionLimit: 1,
+              mediaType: 'all',
+              onOpenFailure: (error) => {
+                if (error.code === SBUError.CODE.ERR_PERMISSIONS_DENIED) {
+                  alert({
+                    title: STRINGS.DIALOG.ALERT_PERMISSIONS_TITLE,
+                    message: STRINGS.DIALOG.ALERT_PERMISSIONS_MESSAGE(
+                      STRINGS.LABELS.PERMISSION_DEVICE_STORAGE,
+                      STRINGS.LABELS.PERMISSION_APP_NAME,
+                    ),
+                    buttons: [{ text: STRINGS.DIALOG.ALERT_PERMISSIONS_OK, onPress: () => SBUUtils.openSettings() }],
+                  });
+                } else {
+                  toast.show(STRINGS.TOAST.OPEN_PHOTO_LIBRARY_ERROR, 'error');
+                }
+              },
+            });
+
+            if (mediaFiles && mediaFiles[0]) {
+              const mediaFile = mediaFiles[0];
+
+              // Image compression
+              if (
+                isImage(mediaFile.uri, mediaFile.type) &&
+                shouldCompressImage(mediaFile.uri, features.imageCompressionEnabled)
+              ) {
+                await SBUUtils.safeRun(async () => {
+                  const compressed = await mediaService.compressImage({
+                    uri: mediaFile.uri,
+                    maxWidth: imageCompressionConfig.width,
+                    maxHeight: imageCompressionConfig.height,
+                    compressionRate: imageCompressionConfig.compressionRate,
+                  });
+
+                  if (compressed) {
+                    mediaFile.uri = compressed.uri;
+                    mediaFile.size = compressed.size;
+                  }
+                });
+              }
+
+              sendFileMessage(mediaFile);
+            }
+          },
+        },
+        {
+          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_FILES,
+          icon: 'document',
+          onPress: async () => {
+            const documentFile = await fileService.openDocument({
+              onOpenFailure: () => toast.show(STRINGS.TOAST.OPEN_FILES_ERROR, 'error'),
+            });
+
+            if (documentFile) {
+              // Image compression
+              if (
+                isImage(documentFile.uri, documentFile.type) &&
+                shouldCompressImage(documentFile.uri, features.imageCompressionEnabled)
+              ) {
+                await SBUUtils.safeRun(async () => {
+                  const compressed = await mediaService.compressImage({
+                    uri: documentFile.uri,
+                    maxWidth: imageCompressionConfig.width,
+                    maxHeight: imageCompressionConfig.height,
+                    compressionRate: imageCompressionConfig.compressionRate,
+                  });
+
+                  if (compressed) {
+                    documentFile.uri = compressed.uri;
+                    documentFile.size = compressed.size;
+                  }
+                });
+              }
+
+              sendFileMessage(documentFile);
+            }
+          },
+        },
+      ],
+    });
+  };
+
+  const getPlaceholder = () => {
+    if (!inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
+    if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+    if (inputMuted) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED;
+
+    return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+  };
+
+  return (
+    <View style={styles.sendInputContainer}>
+      <TouchableOpacity onPress={onPressAttachment} disabled={inputDisabled}>
+        <Icon
+          color={inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+          icon={'add'}
+          size={24}
+          containerStyle={styles.iconAttach}
+        />
+      </TouchableOpacity>
+      <TextInput
+        ref={ref}
+        multiline
+        disableFullscreenUI
+        onSelectionChange={onSelectionChange}
+        editable={!inputDisabled}
+        onChangeText={onChangeText}
+        style={styles.input}
+        placeholder={getPlaceholder()}
+      >
+        {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+      </TextInput>
+
+      {Boolean(text.trim()) && (
+        <TouchableOpacity onPress={sendUserMessage} disabled={inputDisabled}>
+          <Icon
+            color={
+              inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight
+            }
+            icon={'send'}
+            size={24}
+            containerStyle={styles.iconSend}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+});
+
+const styles = createStyleSheet({
+  sendInputContainer: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  input: {
+    flex: 1,
+    marginRight: 4,
+    minHeight: 36,
+    maxHeight: 36 * Platform.select({ ios: 2.5, default: 2 }),
+    borderRadius: 20,
+  },
+  iconAttach: {
+    marginRight: 8,
+    padding: 4,
+  },
+  iconSend: {
+    marginLeft: 4,
+    padding: 4,
+  },
+});
+
+export default SendInput;

package/src/{domain/groupChannel/component/GroupChannelInput → components/ChannelInput}/index.tsx

@@ -1,62 +1,118 @@
-import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import {
+  SendbirdBaseChannel,
+  SendbirdBaseMessage,
   SendbirdFileMessage,
-  SendbirdGroupChannel,
+  SendbirdFileMessageCreateParams,
+  SendbirdFileMessageUpdateParams,
+  SendbirdMember,
   SendbirdUserMessage,
-  getGroupChannelChatAvailableState,
+  SendbirdUserMessageCreateParams,
+  SendbirdUserMessageUpdateParams,
   replace,
   useIIFE,
 } from '@sendbird/uikit-utils';
 
-import { useSendbirdChat } from '../../../../hooks/useContext';
-import useMentionTextInput from '../../../../hooks/useMentionTextInput';
-import { GroupChannelContexts } from '../../module/moduleContext';
-import type { GroupChannelProps } from '../../types';
+import { useSendbirdChat } from '../../hooks/useContext';
+import useMentionTextInput from '../../hooks/useMentionTextInput';
+import type { FileType } from '../../platform/types';
+import type { MentionedUser, Range } from '../../types';
 import EditInput from './EditInput';
 import SendInput from './SendInput';
 
+type UserMessageMentionParams = Required<{
+  messageTemplate: SendbirdUserMessageCreateParams['mentionedMessageTemplate'];
+  userIds: SendbirdUserMessageCreateParams['mentionedUserIds'];
+  type: SendbirdUserMessageCreateParams['mentionType'];
+}>;
+
+export type SuggestedMentionListProps = {
+  text: string;
+  selection: Range;
+  topInset: number;
+  bottomInset: number;
+  inputHeight: number;
+  onPressToMention: (user: SendbirdMember, searchStringRange: Range) => void;
+  mentionedUsers: MentionedUser[];
+};
+
+export type ChannelInputProps = {
+  // default
+  channel: SendbirdBaseChannel;
+  shouldRenderInput: boolean;
+  keyboardAvoidOffset: number;
+
+  // default actions
+  onPressSendUserMessage: (params: SendbirdUserMessageCreateParams) => Promise<void>;
+  onPressSendFileMessage: (params: SendbirdFileMessageCreateParams) => Promise<void>;
+  onPressUpdateUserMessage: (message: SendbirdUserMessage, params: SendbirdUserMessageUpdateParams) => Promise<void>;
+  onPressUpdateFileMessage: (message: SendbirdFileMessage, params: SendbirdFileMessageUpdateParams) => Promise<void>;
+
+  // input status
+  inputFrozen: boolean;
+  inputMuted: boolean;
+  inputDisabled: boolean;
+
+  // edit
+  messageToEdit: undefined | SendbirdUserMessage | SendbirdFileMessage;
+  setMessageToEdit: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
+
+  // mention
+  SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
+
+  /** @deprecated Please use `onPressSendUserMessage` **/
+  onSendFileMessage?: (file: FileType) => Promise<void>;
+  /** @deprecated Please use `onPressSendFileMessage` **/
+  onSendUserMessage?: (text: string, mention?: UserMessageMentionParams) => Promise<void>;
+  /** @deprecated Please use `onPressUpdateUserMessage` **/
+  onUpdateFileMessage?: (editedFile: FileType, message: SendbirdFileMessage) => Promise<void>;
+  /** @deprecated Please use `onPressUpdateFileMessage` **/
+  onUpdateUserMessage?: (
+    editedText: string,
+    message: SendbirdUserMessage,
+    mention?: UserMessageMentionParams,
+  ) => Promise<void>;
+};
+
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
 
 // FIXME(iOS): Dynamic style does not work properly when typing the CJK. (https://github.com/facebook/react-native/issues/26107)
 //  To workaround temporarily, change the key for re-mount the component.
+//  -> This will affect to keyboard blur when add/remove first mentioned user.
 const GET_INPUT_KEY = (shouldReset: boolean) => (shouldReset ? 'uikit-input-clear' : 'uikit-input');
 
 // TODO: Refactor 'Edit' mode to clearly
-const GroupChannelInput = (props: GroupChannelProps['Input']) => {
+const ChannelInput = (props: ChannelInputProps) => {
+  const { channel, keyboardAvoidOffset, messageToEdit, setMessageToEdit } = props;
+
   const { top, left, right, bottom } = useSafeAreaInsets();
   const { colors } = useUIKitTheme();
   const { features, mentionManager } = useSendbirdChat();
-  const {
-    channel,
-    messageToEdit,
-    setMessageToEdit,
-    keyboardAvoidOffset = 0,
-  } = useContext(GroupChannelContexts.Fragment);
 
-  const chatAvailableState = getGroupChannelChatAvailableState(channel);
-  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
+    messageToEdit,
+  });
   const inputMode = useIIFE(() => {
     if (!messageToEdit) return 'send';
     if (messageToEdit.isFileMessage()) return 'send';
     return 'edit';
   });
 
-  const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
+  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const inputKeyToRemount = GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
 
-  const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
-    messageToEdit: messageToEdit,
-  });
+  const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
   useTypingTrigger(text, channel);
-  useTextPersistenceOnDisabled(text, onChangeText, chatAvailableState.disabled);
+  useTextPersistenceOnDisabled(text, onChangeText, props.inputDisabled);
   useAutoFocusOnEditMode(textInputRef, messageToEdit);
 
-  const onPressToMention: GroupChannelProps['SuggestedMentionList']['onPressToMention'] = (user, searchStringRange) => {
+  const onPressToMention = (user: SendbirdMember, searchStringRange: Range) => {
     const mentionedMessageText = mentionManager.asMentionedMessageText(user, true);
     const range = { start: searchStringRange.start, end: searchStringRange.start + mentionedMessageText.length - 1 };
 
@@ -78,8 +134,7 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
             {inputMode === 'send' && (
               <SendInput
                 {...props}
-                {...chatAvailableState}
-                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                key={inputKeyToRemount}
                 ref={textInputRef as never}
                 text={text}
                 onChangeText={onChangeText}
@@ -90,23 +145,22 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
             {inputMode === 'edit' && messageToEdit && (
               <EditInput
                 {...props}
-                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                key={inputKeyToRemount}
                 ref={textInputRef as never}
-                autoFocus={AUTO_FOCUS}
                 text={text}
                 onChangeText={onChangeText}
-                messageToEdit={messageToEdit}
-                setMessageToEdit={setMessageToEdit}
-                disabled={chatAvailableState.disabled}
+                autoFocus={AUTO_FOCUS}
                 onSelectionChange={onSelectionChange}
+                messageToEdit={messageToEdit}
                 mentionedUsers={mentionedUsers}
+                setMessageToEdit={setMessageToEdit}
               />
             )}
           </View>
           <SafeAreaBottom height={bottom} />
         </View>
       </KeyboardAvoidingView>
-      {mentionAvailable && (
+      {mentionAvailable && props.SuggestedMentionList && (
         <props.SuggestedMentionList
           text={text}
           selection={selection}
@@ -121,11 +175,13 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
   );
 };
 
-const useTypingTrigger = (text: string, channel: SendbirdGroupChannel) => {
-  useEffect(() => {
-    if (text.length === 0) channel.endTyping();
-    else channel.startTyping();
-  }, [text]);
+const useTypingTrigger = (text: string, channel: SendbirdBaseChannel) => {
+  if (channel.isGroupChannel()) {
+    useEffect(() => {
+      if (text.length === 0) channel.endTyping();
+      else channel.startTyping();
+    }, [text]);
+  }
 };
 
 const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => void, chatDisabled: boolean) => {
@@ -143,7 +199,7 @@ const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => vo
 
 const useAutoFocusOnEditMode = (
   textInputRef: MutableRefObject<TextInput | undefined>,
-  messageToEdit?: SendbirdUserMessage | SendbirdFileMessage,
+  messageToEdit?: SendbirdBaseMessage,
 ) => {
   useEffect(() => {
     if (messageToEdit?.isUserMessage()) {
@@ -166,4 +222,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default React.memo(GroupChannelInput);
+export default React.memo(ChannelInput);

package/src/components/FileViewer.tsx

@@ -63,10 +63,8 @@ const FileViewer = ({
   const fileType = getFileType(fileMessage.type || getFileExtension(fileMessage.url));
 
   useEffect(() => {
-    if (!mediaService?.VideoComponent || fileType === 'file') {
-      onClose();
-    }
-  }, [mediaService]);
+    if (fileType === 'file') onClose();
+  }, []);
 
   const fileViewer = useIIFE(() => {
     switch (fileType) {
@@ -83,7 +81,6 @@ const FileViewer = ({
 
       case 'video':
       case 'audio': {
-        if (!mediaService?.VideoComponent) return null;
         return (
           <mediaService.VideoComponent
             source={{ uri: fileMessage.url }}
@@ -107,13 +104,13 @@ const FileViewer = ({
       onPressDelete(fileMessage);
     } else {
       alert({
-        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
         buttons: [
           {
-            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,
+            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
           },
           {
-            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,
+            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
             style: 'destructive',
             onPress: () => {
               deleteMessage()

package/src/components/MessageRenderer/FileMessage/BaseFileMessage.tsx

@@ -14,7 +14,7 @@ type Props = FileMessageProps & {
 const BaseFileMessage = ({ message, variant, pressed, type, children }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
   return (
     <View style={[styles.bubbleContainer, { backgroundColor: color.background }]}>
       <View style={styles.container}>

package/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -44,7 +44,16 @@ const ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {
   const key = useRetry(imageNotFound);
 
   return (
-    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+    <View
+      style={[
+        styles.bubbleContainer,
+        {
+          backgroundColor: imageNotFound
+            ? colors.onBackground04
+            : colors.ui.groupChannelMessage[variant].enabled.background,
+        },
+      ]}
+    >
       <View style={style}>
         <Image
           key={key}

package/src/components/MessageRenderer/FileMessage/VideoFileMessage.tsx

@@ -15,7 +15,7 @@ const useRetry = (videoFileUrl: string, retryCount = 5) => {
   const { mediaService } = usePlatformService();
 
   const fetchThumbnail = () => {
-    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
+    return mediaService.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
       setState({ loading: false, thumbnail: result?.path ?? null });
     });
   };
@@ -51,7 +51,9 @@ const VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {
 
   if (loading) {
     return (
-      <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+      <View
+        style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}
+      >
         <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
           <View style={style} />
           <PlayIcon />
@@ -62,7 +64,9 @@ const VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {
   }
 
   return (
-    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+    <View
+      style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}
+    >
       <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
         <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
         <PlayIcon />

package/src/components/MessageRenderer/FileMessage/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { SendbirdFileMessage, getFileExtension, getFileType } from '@sendbird/uikit-utils';
 
-import { usePlatformService } from '../../../hooks/useContext';
 import type { MessageRendererInterface } from '../index';
 import BaseFileMessage from './BaseFileMessage';
 import ImageFileMessage from './ImageFileMessage';
@@ -10,12 +9,10 @@ import VideoFileMessage from './VideoFileMessage';
 
 export type FileMessageProps = MessageRendererInterface<SendbirdFileMessage>;
 const FileMessage = (props: FileMessageProps) => {
-  const { mediaService } = usePlatformService();
-
   const fileType = getFileType(props.message.type || getFileExtension(props.message.name));
 
   if (fileType === 'image') return <ImageFileMessage {...props} />;
-  if (fileType === 'video' && mediaService?.getVideoThumbnail) return <VideoFileMessage {...props} />;
+  if (fileType === 'video') return <VideoFileMessage {...props} />;
 
   return <BaseFileMessage {...props} type={fileType} />;
 };

package/src/components/MessageRenderer/MessageDateSeparator.tsx

@@ -15,6 +15,7 @@ type Props = {
 const MessageDateSeparator = ({ message, prevMessage }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
+
   const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);
   if (sameDay) return null;
   return (

package/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -18,7 +18,7 @@ const MessageIncomingSenderName = ({ message, grouping }: Props) => {
   return (
     <View style={styles.sender}>
       {(message.isFileMessage() || message.isUserMessage()) && (
-        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName} numberOfLines={1}>
+        <Text caption1 color={colors.ui.groupChannelMessage.incoming.enabled.textSenderName} numberOfLines={1}>
           {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}
         </Text>
       )}

package/src/components/MessageRenderer/MessageTime.tsx

@@ -18,7 +18,7 @@ const MessageTime = ({ message, grouping, style }: Props) => {
 
   return (
     <View style={style}>
-      <Text caption4 color={colors.ui.message.incoming.enabled.textTime}>
+      <Text caption4 color={colors.ui.groupChannelMessage.incoming.enabled.textTime}>
         {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)}
       </Text>
     </View>

package/src/components/MessageRenderer/UnknownMessage/index.tsx

@@ -10,7 +10,7 @@ export type UnknownMessageProps = MessageRendererInterface;
 const UnknownMessage = ({ message, variant, pressed }: UnknownMessageProps) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
   return (
     <View style={[styles.container, { backgroundColor: color.background }]}>
       <Text body3 color={colors.onBackground01}>