stream-chat-react-native-core 6.7.5-beta.1 → 7.0.0-beta.1

package/src/components/MessageInput/CommandsButton.tsx

@@ -10,20 +10,12 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Lightning } from '../../icons/Lightning';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
-
-type CommandsButtonPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<SuggestionsContextValue<StreamChatGenerics>, 'suggestions'> & {
+type CommandsButtonPropsWithContext = Pick<SuggestionsContextValue, 'suggestions'> & {
   /** Function that opens commands selector */
   handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
 };
 
-const CommandsButtonWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: CommandsButtonPropsWithContext<StreamChatGenerics>,
-) => {
+const CommandsButtonWithContext = (props: CommandsButtonPropsWithContext) => {
   const { handleOnPress, suggestions } = props;
 
   const {
@@ -47,9 +39,9 @@ const CommandsButtonWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: CommandsButtonPropsWithContext<StreamChatGenerics>,
-  nextProps: CommandsButtonPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: CommandsButtonPropsWithContext,
+  nextProps: CommandsButtonPropsWithContext,
 ) => {
   const { suggestions: prevSuggestions } = prevProps;
   const { suggestions: nextSuggestions } = nextProps;
@@ -67,19 +59,13 @@ const MemoizedCommandsButton = React.memo(
   areEqual,
 ) as typeof CommandsButtonWithContext;
 
-export type CommandsButtonProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<CommandsButtonPropsWithContext<StreamChatGenerics>>;
+export type CommandsButtonProps = Partial<CommandsButtonPropsWithContext>;
 
 /**
  * UI Component for attach button in MessageInput component.
  */
-export const CommandsButton = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: CommandsButtonProps<StreamChatGenerics>,
-) => {
-  const { suggestions } = useSuggestionsContext<StreamChatGenerics>();
+export const CommandsButton = (props: CommandsButtonProps) => {
+  const { suggestions } = useSuggestionsContext();
 
   return <MemoizedCommandsButton {...{ suggestions }} {...props} />;
 };

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -17,7 +17,7 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
 import { isSoundPackageAvailable } from '../../native';
-import type { DefaultStreamChatGenerics, FileUpload } from '../../types/types';
+import type { AudioUpload, FileUpload } from '../../types/types';
 import { getTrimmedAttachmentTitle } from '../../utils/getTrimmedAttachmentTitle';
 import {
   getDurationLabelFromDuration,
@@ -123,32 +123,49 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
   );
 };
 
-type FileUploadPreviewPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  MessageInputContextValue<StreamChatGenerics>,
-  'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachmentUploadPreview'
+export type FileUploadPreviewProps = Partial<
+  Pick<
+    MessageInputContextValue,
+    'fileUploads' | 'removeFile' | 'uploadFile' | 'setFileUploads' | 'AudioAttachmentUploadPreview'
+  >
 > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'FileAttachmentIcon'> &
-  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
+  Partial<Pick<MessagesContextValue, 'FileAttachmentIcon'>> &
+  Partial<Pick<ChatContextValue, 'enableOfflineSupport'>>;
 
-const FileUploadPreviewWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: FileUploadPreviewPropsWithContext<StreamChatGenerics>,
-) => {
+/**
+ * FileUploadPreview
+ * UI Component to preview the files set for upload
+ */
+export const FileUploadPreview = (props: FileUploadPreviewProps) => {
   const {
-    AudioAttachmentUploadPreview,
-    enableOfflineSupport,
-    FileAttachmentIcon,
-    fileUploads,
-    removeFile,
-    uploadFile,
+    AudioAttachmentUploadPreview: propAudioAttachmentUploadPreview,
+    enableOfflineSupport: propEnableOfflineSupport,
+    FileAttachmentIcon: propFileAttachmentIcon,
+    fileUploads: propFileUploads,
+    removeFile: propRemoveFile,
+    uploadFile: propUploadFile,
   } = props;
 
-  const [filesToDisplay, setFilesToDisplay] = useState<FileUpload[]>([]);
+  const { enableOfflineSupport: contextEnableOfflineSupport } = useChatContext();
+  const {
+    AudioAttachmentUploadPreview: contextAudioAttachmentUploadPreview,
+    fileUploads: contextFileUploads,
+    removeFile: contextRemoveFile,
+    uploadFile: contextUploadFile,
+  } = useMessageInputContext();
+  const { FileAttachmentIcon: contextFileAttachmentIcon } = useMessagesContext();
+
+  const enableOfflineSupport = propEnableOfflineSupport ?? contextEnableOfflineSupport;
+  const AudioAttachmentUploadPreview =
+    propAudioAttachmentUploadPreview ?? contextAudioAttachmentUploadPreview;
+  const fileUploads = propFileUploads ?? contextFileUploads;
+  const removeFile = propRemoveFile ?? contextRemoveFile;
+  const uploadFile = propUploadFile ?? contextUploadFile;
+  const FileAttachmentIcon = propFileAttachmentIcon ?? contextFileAttachmentIcon;
 
-  const flatListRef = useRef<FlatList<FileUpload> | null>(null);
+  const [filesToDisplay, setFilesToDisplay] = useState<AudioUpload[]>([]);
+
+  const flatListRef = useRef<FlatList<AudioUpload> | null>(null);
   const [flatListWidth, setFlatListWidth] = useState(0);
 
   useEffect(() => {
@@ -213,9 +230,9 @@ const FileUploadPreviewWithContext = <
     },
   } = useTheme();
 
-  const renderItem = ({ item }: { item: FileUpload }) => {
+  const renderItem = ({ item }: { item: AudioUpload }) => {
     const indicatorType = getIndicatorTypeForFileState(item.state, enableOfflineSupport);
-    const isAudio = item.file.mimeType?.startsWith('audio/');
+    const isAudio = item.file.type?.startsWith('audio/');
 
     return (
       <>
@@ -247,7 +264,7 @@ const FileUploadPreviewWithContext = <
               ]}
             >
               <View style={styles.fileIcon}>
-                <FileAttachmentIcon mimeType={item.file.mimeType} />
+                <FileAttachmentIcon mimeType={item.file.type} />
               </View>
               <View style={[styles.fileTextContainer, fileTextContainer]}>
                 <Text
@@ -323,62 +340,4 @@ const FileUploadPreviewWithContext = <
   ) : null;
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,
-  nextProps: FileUploadPreviewPropsWithContext<StreamChatGenerics>,
-) => {
-  const { fileUploads: prevFileUploads } = prevProps;
-  const { fileUploads: nextFileUploads } = nextProps;
-
-  return (
-    prevFileUploads.length === nextFileUploads.length &&
-    prevFileUploads.every(
-      (prevFileUpload, index) =>
-        prevFileUpload.state === nextFileUploads[index].state &&
-        prevFileUpload.paused === nextFileUploads[index].paused &&
-        prevFileUpload.progress === nextFileUploads[index].progress &&
-        prevFileUpload.duration === nextFileUploads[index].duration,
-    )
-  );
-};
-
-const MemoizedFileUploadPreview = React.memo(
-  FileUploadPreviewWithContext,
-  areEqual,
-) as typeof FileUploadPreviewWithContext;
-
-export type FileUploadPreviewProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<FileUploadPreviewPropsWithContext<StreamChatGenerics>>;
-
-/**
- * FileUploadPreview
- * UI Component to preview the files set for upload
- */
-export const FileUploadPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: FileUploadPreviewProps<StreamChatGenerics>,
-) => {
-  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
-  const { AudioAttachmentUploadPreview, fileUploads, removeFile, setFileUploads, uploadFile } =
-    useMessageInputContext<StreamChatGenerics>();
-  const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
-
-  return (
-    <MemoizedFileUploadPreview
-      {...{
-        AudioAttachmentUploadPreview,
-        FileAttachmentIcon,
-        fileUploads,
-        removeFile,
-        setFileUploads,
-        uploadFile,
-      }}
-      {...{ enableOfflineSupport }}
-      {...props}
-    />
-  );
-};
-
 FileUploadPreview.displayName = 'FileUploadPreview{messageInput{fileUploadPreview}}';

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -20,7 +20,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
-import type { DefaultStreamChatGenerics, ImageUpload } from '../../types/types';
+import type { FileUpload } from '../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 
 const IMAGE_PREVIEW_SIZE = 100;
@@ -73,19 +73,15 @@ const styles = StyleSheet.create({
   },
 });
 
-type ImageUploadPreviewPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  MessageInputContextValue<StreamChatGenerics>,
+type ImageUploadPreviewPropsWithContext = Pick<
+  MessageInputContextValue,
   'imageUploads' | 'removeImage' | 'uploadImage'
 > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'enableOfflineSupport'>;
+  Pick<ChatContextValue, 'enableOfflineSupport'>;
 
-export type ImageUploadPreviewProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<ImageUploadPreviewPropsWithContext<StreamChatGenerics>>;
+export type ImageUploadPreviewProps = Partial<ImageUploadPreviewPropsWithContext>;
 
-type ImageUploadPreviewItem = { index: number; item: ImageUpload };
+type ImageUploadPreviewItem = { index: number; item: FileUpload };
 
 export const UnsupportedImageTypeIndicator = ({
   indicatorType,
@@ -114,11 +110,7 @@ export const UnsupportedImageTypeIndicator = ({
   ) : null;
 };
 
-const ImageUploadPreviewWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
-) => {
+const ImageUploadPreviewWithContext = (props: ImageUploadPreviewPropsWithContext) => {
   const { enableOfflineSupport, imageUploads, removeImage, uploadImage } = props;
 
   const {
@@ -197,9 +189,9 @@ const DismissUpload = ({ onPress }: DismissUploadProps) => {
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
-  nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: ImageUploadPreviewPropsWithContext,
+  nextProps: ImageUploadPreviewPropsWithContext,
 ) => {
   const { imageUploads: prevImageUploads } = prevProps;
   const { imageUploads: nextImageUploads } = nextProps;
@@ -220,13 +212,9 @@ const MemoizedImageUploadPreviewWithContext = React.memo(
 /**
  * UI Component to preview the images set for upload
  */
-export const ImageUploadPreview = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: ImageUploadPreviewProps<StreamChatGenerics>,
-) => {
-  const { enableOfflineSupport } = useChatContext<StreamChatGenerics>();
-  const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();
+export const ImageUploadPreview = (props: ImageUploadPreviewProps) => {
+  const { enableOfflineSupport } = useChatContext();
+  const { imageUploads, removeImage, uploadImage } = useMessageInputContext();
 
   return (
     <MemoizedImageUploadPreviewWithContext

package/src/components/MessageInput/InputButtons.tsx

@@ -8,20 +8,14 @@ import {
 import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
-
 const styles = StyleSheet.create({
   attachButtonContainer: { paddingRight: 5 },
 });
 
-export type InputButtonsProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<InputButtonsWithContextProps<StreamChatGenerics>>;
+export type InputButtonsProps = Partial<InputButtonsWithContextProps>;
 
-export type InputButtonsWithContextProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  MessageInputContextValue<StreamChatGenerics>,
+export type InputButtonsWithContextProps = Pick<
+  MessageInputContextValue,
   | 'AttachButton'
   | 'CommandsButton'
   | 'giphyActive'
@@ -38,11 +32,7 @@ export type InputButtonsWithContextProps<
   | 'toggleAttachmentPicker'
 >;
 
-export const InputButtonsWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: InputButtonsWithContextProps<StreamChatGenerics>,
-) => {
+export const InputButtonsWithContext = (props: InputButtonsWithContextProps) => {
   const {
     AttachButton,
     CommandsButton,
@@ -94,9 +84,9 @@ export const InputButtonsWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: InputButtonsWithContextProps<StreamChatGenerics>,
-  nextProps: InputButtonsWithContextProps<StreamChatGenerics>,
+const areEqual = (
+  prevProps: InputButtonsWithContextProps,
+  nextProps: InputButtonsWithContextProps,
 ) => {
   const {
     giphyActive: prevGiphyActive,
@@ -160,11 +150,7 @@ const MemoizedInputButtonsWithContext = React.memo(
   areEqual,
 ) as typeof InputButtonsWithContext;
 
-export const InputButtons = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: InputButtonsProps<StreamChatGenerics>,
-) => {
+export const InputButtons = (props: InputButtonsProps) => {
   const {
     AttachButton,
     CommandsButton,
@@ -180,7 +166,7 @@ export const InputButtons = <
     setShowMoreOptions,
     showMoreOptions,
     toggleAttachmentPicker,
-  } = useMessageInputContext<StreamChatGenerics>();
+  } = useMessageInputContext();
 
   return (
     <MemoizedInputButtonsWithContext

package/src/components/MessageInput/MessageInput.tsx

@@ -61,7 +61,7 @@ import {
   isImageMediaLibraryAvailable,
   NativeHandlers,
 } from '../../native';
-import type { Asset, DefaultStreamChatGenerics } from '../../types/types';
+import { compressedImageURI } from '../../utils/compressImage';
 import { AIStates, useAIState } from '../AITypingIndicatorView';
 import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
@@ -104,13 +104,14 @@ const styles = StyleSheet.create({
   },
 });
 
-type MessageInputPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<AttachmentPickerContextValue, 'AttachmentPickerSelectionBar'> &
-  Pick<ChatContextValue<StreamChatGenerics>, 'isOnline'> &
-  Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'members' | 'threadList' | 'watchers'> &
+type MessageInputPropsWithContext = Pick<
+  AttachmentPickerContextValue,
+  'AttachmentPickerSelectionBar'
+> &
+  Pick<ChatContextValue, 'isOnline'> &
+  Pick<ChannelContextValue, 'channel' | 'members' | 'threadList' | 'watchers'> &
   Pick<
-    MessageInputContextValue<StreamChatGenerics>,
+    MessageInputContextValue,
     | 'additionalTextInputProps'
     | 'asyncIds'
     | 'audioRecordingEnabled'
@@ -128,6 +129,7 @@ type MessageInputPropsWithContext<
     | 'clearEditingState'
     | 'clearQuotedMessageState'
     | 'closeAttachmentPicker'
+    | 'compressImageQuality'
     | 'editing'
     | 'FileUploadPreview'
     | 'fileUploads'
@@ -166,23 +168,19 @@ type MessageInputPropsWithContext<
     | 'CreatePollContent'
     | 'StopMessageStreamingButton'
   > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
+  Pick<MessagesContextValue, 'Reply'> &
   Pick<
-    SuggestionsContextValue<StreamChatGenerics>,
+    SuggestionsContextValue,
     | 'AutoCompleteSuggestionHeader'
     | 'AutoCompleteSuggestionItem'
     | 'AutoCompleteSuggestionList'
     | 'suggestions'
     | 'triggerType'
   > &
-  Pick<ThreadContextValue<StreamChatGenerics>, 'thread'> &
+  Pick<ThreadContextValue, 'thread'> &
   Pick<TranslationContextValue, 't'>;
 
-const MessageInputWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MessageInputPropsWithContext<StreamChatGenerics>,
-) => {
+const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
   const {
     additionalTextInputProps,
     asyncIds,
@@ -201,6 +199,7 @@ const MessageInputWithContext = <
     channel,
     closeAttachmentPicker,
     closePollCreationDialog,
+    compressImageQuality,
     cooldownEndsAt,
     CooldownTimer,
     CreatePollContent,
@@ -351,7 +350,7 @@ const MessageInputWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imagesForInput, imageUploadsLength]);
 
-  const uploadImagesHandler = () => {
+  const uploadImagesHandler = async () => {
     const imageToUpload = selectedImages.find((selectedImage) => {
       const uploadedImage = imageUploads.find(
         (imageUpload) =>
@@ -361,7 +360,11 @@ const MessageInputWithContext = <
     });
 
     if (imageToUpload) {
-      uploadNewImage(imageToUpload);
+      const compressedImage = await compressedImageURI(imageToUpload, compressImageQuality);
+      uploadNewImage({
+        ...imageToUpload,
+        uri: compressedImage,
+      });
     }
   };
 
@@ -459,16 +462,7 @@ const MessageInputWithContext = <
         /**
          * User is editing some message which contains image attachments.
          **/
-        setSelectedImages(
-          imageUploads
-            .map((imageUpload) => ({
-              height: imageUpload.file.height,
-              source: imageUpload.file.source,
-              uri: imageUpload.url || imageUpload.file.uri,
-              width: imageUpload.file.width,
-            }))
-            .filter(Boolean) as Asset[],
-        );
+        setSelectedImages(imageUploads.map((imageUpload) => imageUpload.file));
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -493,15 +487,7 @@ const MessageInputWithContext = <
         /**
          * User is editing some message which contains video attachments.
          **/
-        setSelectedFiles(
-          fileUploads.map((fileUpload) => ({
-            duration: fileUpload.file.duration,
-            mimeType: fileUpload.file.mimeType,
-            name: fileUpload.file.name,
-            size: fileUpload.file.size,
-            uri: fileUpload.file.uri,
-          })),
-        );
+        setSelectedFiles(fileUploads.map((fileUpload) => fileUpload.file));
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -555,7 +541,7 @@ const MessageInputWithContext = <
   }, [asyncIdsString, asyncUploadsString, sendMessageAsync]);
 
   const getMembers = () => {
-    const result: UserResponse<StreamChatGenerics>[] = [];
+    const result: UserResponse[] = [];
     if (members && Object.values(members).length) {
       Object.values(members).forEach((member) => {
         if (member.user) {
@@ -571,7 +557,7 @@ const MessageInputWithContext = <
     const users = [...getMembers(), ...getWatchers()];
 
     // make sure we don't list users twice
-    const uniqueUsers: { [key: string]: UserResponse<StreamChatGenerics> } = {};
+    const uniqueUsers: { [key: string]: UserResponse } = {};
     for (const user of users) {
       if (user && !uniqueUsers[user.id]) {
         uniqueUsers[user.id] = user;
@@ -583,7 +569,7 @@ const MessageInputWithContext = <
   };
 
   const getWatchers = () => {
-    const result: UserResponse<StreamChatGenerics>[] = [];
+    const result: UserResponse[] = [];
     if (watchers && Object.values(watchers).length) {
       result.push(...Object.values(watchers));
     }
@@ -848,7 +834,7 @@ const MessageInputWithContext = <
                       <InputGiphySearch disabled={!isOnline} />
                     ) : (
                       <View style={[styles.autoCompleteInputContainer, autoCompleteInputContainer]}>
-                        <AutoCompleteInput<StreamChatGenerics>
+                        <AutoCompleteInput
                           additionalTextInputProps={memoizedAdditionalTextInputProps}
                           cooldownActive={!!cooldownRemainingSeconds}
                         />
@@ -945,9 +931,9 @@ const MessageInputWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: MessageInputPropsWithContext<StreamChatGenerics>,
-  nextProps: MessageInputPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: MessageInputPropsWithContext,
+  nextProps: MessageInputPropsWithContext,
 ) => {
   const {
     additionalTextInputProps: prevAdditionalTextInputProps,
@@ -1144,9 +1130,7 @@ const MemoizedMessageInput = React.memo(
   areEqual,
 ) as typeof MessageInputWithContext;
 
-export type MessageInputProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<MessageInputPropsWithContext<StreamChatGenerics>>;
+export type MessageInputProps = Partial<MessageInputPropsWithContext>;
 
 /**
  * UI Component for message input
@@ -1157,16 +1141,12 @@ export type MessageInputProps<
  * [Suggestions Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/suggestions-context/), and
  * [Translation Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/translation-context/)
  */
-export const MessageInput = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: MessageInputProps<StreamChatGenerics>,
-) => {
+export const MessageInput = (props: MessageInputProps) => {
   const { AttachmentPickerSelectionBar } = useAttachmentPickerContext();
   const { isOnline } = useChatContext();
   const ownCapabilities = useOwnCapabilitiesContext();
 
-  const { channel, members, threadList, watchers } = useChannelContext<StreamChatGenerics>();
+  const { channel, members, threadList, watchers } = useChannelContext();
 
   const {
     additionalTextInputProps,
@@ -1186,6 +1166,7 @@ export const MessageInput = <
     clearQuotedMessageState,
     closeAttachmentPicker,
     closePollCreationDialog,
+    compressImageQuality,
     cooldownEndsAt,
     CooldownTimer,
     CreatePollContent,
@@ -1225,9 +1206,9 @@ export const MessageInput = <
     text,
     uploadNewFile,
     uploadNewImage,
-  } = useMessageInputContext<StreamChatGenerics>();
+  } = useMessageInputContext();
 
-  const { Reply } = useMessagesContext<StreamChatGenerics>();
+  const { Reply } = useMessagesContext();
 
   const {
     AutoCompleteSuggestionHeader,
@@ -1235,9 +1216,9 @@ export const MessageInput = <
     AutoCompleteSuggestionList,
     suggestions,
     triggerType,
-  } = useSuggestionsContext<StreamChatGenerics>();
+  } = useSuggestionsContext();
 
-  const { thread } = useThreadContext<StreamChatGenerics>();
+  const { thread } = useThreadContext();
 
   const { t } = useTranslationContext();
 
@@ -1274,6 +1255,7 @@ export const MessageInput = <
         clearQuotedMessageState,
         closeAttachmentPicker,
         closePollCreationDialog,
+        compressImageQuality,
         cooldownEndsAt,
         CooldownTimer,
         CreatePollContent,

package/src/components/MessageInput/MoreOptionsButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CircleRight } from '../../icons/CircleRight';