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

package/src/components/Attachment/GalleryImage.tsx

@@ -3,12 +3,10 @@ import { Image, ImageProps } from 'react-native';
 
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getUrlWithoutParams, isLocalUrl, makeImageCompatibleUrl } from '../../utils/utils';
 
-export type GalleryImageWithContextProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = GalleryImageProps & Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>;
+export type GalleryImageWithContextProps = GalleryImageProps &
+  Pick<ChatContextValue, 'ImageComponent'>;
 
 export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => {
   const { ImageComponent = Image, uri, ...rest } = props;
@@ -47,12 +45,8 @@ export type GalleryImageProps = Omit<ImageProps, 'height' | 'source'> & {
   uri: string;
 };
 
-export const GalleryImage = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: GalleryImageProps,
-) => {
-  const { ImageComponent } = useChatContext<StreamChatGenerics>();
+export const GalleryImage = (props: GalleryImageProps) => {
+  const { ImageComponent } = useChatContext();
 
   return <MemoizedGalleryImage ImageComponent={ImageComponent} {...props} />;
 };

package/src/components/Attachment/Giphy.tsx

@@ -24,7 +24,7 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { GiphyIcon, GiphyLightning } from '../../icons';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+
 import { makeImageCompatibleUrl } from '../../utils/utils';
 
 const styles = StyleSheet.create({
@@ -134,11 +134,12 @@ const styles = StyleSheet.create({
   },
 });
 
-export type GiphyPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
+export type GiphyPropsWithContext = Pick<
+  ImageGalleryContextValue,
+  'setSelectedMessage' | 'setMessages'
+> &
   Pick<
-    MessageContextValue<StreamChatGenerics>,
+    MessageContextValue,
     | 'handleAction'
     | 'isMyMessage'
     | 'message'
@@ -147,22 +148,18 @@ export type GiphyPropsWithContext<
     | 'onPressIn'
     | 'preventPress'
   > &
-  Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'> &
+  Pick<ChatContextValue, 'ImageComponent'> &
   Pick<
-    MessagesContextValue<StreamChatGenerics>,
+    MessagesContextValue,
     | 'giphyVersion'
     | 'additionalPressableProps'
     | 'ImageLoadingIndicator'
     | 'ImageLoadingFailedIndicator'
   > & {
-    attachment: Attachment<StreamChatGenerics>;
+    attachment: Attachment;
   } & Pick<OverlayContextValue, 'setOverlay'>;
 
-const GiphyWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: GiphyPropsWithContext<StreamChatGenerics>,
-) => {
+const GiphyWithContext = (props: GiphyPropsWithContext) => {
   const {
     additionalPressableProps,
     attachment,
@@ -389,10 +386,7 @@ const GiphyWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: GiphyPropsWithContext<StreamChatGenerics>,
-  nextProps: GiphyPropsWithContext<StreamChatGenerics>,
-) => {
+const areEqual = (prevProps: GiphyPropsWithContext, nextProps: GiphyPropsWithContext) => {
   const {
     attachment: { actions: prevActions, image_url: prevImageUrl, thumb_url: prevThumbUrl },
     giphyVersion: prevGiphyVersion,
@@ -448,31 +442,25 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
 
 const MemoizedGiphy = React.memo(GiphyWithContext, areEqual) as typeof GiphyWithContext;
 
-export type GiphyProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<GiphyPropsWithContext<StreamChatGenerics>> & {
-  attachment: Attachment<StreamChatGenerics>;
+export type GiphyProps = Partial<GiphyPropsWithContext> & {
+  attachment: Attachment;
 };
 
 /**
  * UI component for card in attachments.
  */
-export const Giphy = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: GiphyProps<StreamChatGenerics>,
-) => {
+export const Giphy = (props: GiphyProps) => {
   const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
-    useMessageContext<StreamChatGenerics>();
-  const { ImageComponent } = useChatContext<StreamChatGenerics>();
-  const { additionalPressableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
-  const { setMessages, setSelectedMessage } = useImageGalleryContext<StreamChatGenerics>();
+    useMessageContext();
+  const { ImageComponent } = useChatContext();
+  const { additionalPressableProps, giphyVersion } = useMessagesContext();
+  const { setMessages, setSelectedMessage } = useImageGalleryContext();
   const { setOverlay } = useOverlayContext();
 
   const {
     ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
     ImageLoadingIndicator: ContextImageLoadingIndicator,
-  } = useMessagesContext<StreamChatGenerics>();
+  } = useMessagesContext();
   const ImageLoadingFailedIndicator =
     ContextImageLoadingFailedIndicator || props.ImageLoadingFailedIndicator;
   const ImageLoadingIndicator = ContextImageLoadingIndicator || props.ImageLoadingIndicator;

package/src/components/Attachment/utils/buildGallery/buildGallery.ts

@@ -12,7 +12,6 @@ import {
   chatConfigContextDefaultvalue,
   ChatConfigContextValue,
 } from '../../../../contexts/chatConfigContext/ChatConfigContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 /**
  * Builds and returns a gallery of optimized images to be rendered on UI.
@@ -30,14 +29,12 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
  *
  * @return {GallerySizeAndThumbnailGrid}
  */
-export function buildGallery<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export function buildGallery({
   images,
   resizableCDNHosts = chatConfigContextDefaultvalue.resizableCDNHosts,
   sizeConfig,
 }: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
-  images: Attachment<StreamChatGenerics>[];
+  images: Attachment[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   if (images.length === 1) {

package/src/components/Attachment/utils/buildGallery/buildGalleryOfSingleImage.ts

@@ -5,7 +5,7 @@ import { buildThumbnail } from './buildThumbnail';
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
 import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
 import { getAspectRatio } from '../getAspectRatio';
 
 /**
@@ -20,9 +20,13 @@ function clamp(number: number, min: number, max: number) {
   return Math.min(Math.max(number, min), max);
 }
 
-function getContainerSize<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({ image, sizeConfig }: { image: Attachment<StreamChatGenerics>; sizeConfig: GallerySizeConfig }) {
+function getContainerSize({
+  image,
+  sizeConfig,
+}: {
+  image: Attachment;
+  sizeConfig: GallerySizeConfig;
+}) {
   const { original_height: height, original_width: width } = image;
   const { gridHeight, gridWidth, maxHeight, maxWidth, minHeight, minWidth } = sizeConfig;
 
@@ -64,14 +68,12 @@ function getContainerSize<
   };
 }
 
-export function buildGalleryOfSingleImage<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export function buildGalleryOfSingleImage({
   image,
   resizableCDNHosts,
   sizeConfig,
 }: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
-  image: Attachment<StreamChatGenerics>;
+  image: Attachment;
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   const container = getContainerSize({

package/src/components/Attachment/utils/buildGallery/buildGalleryOfThreeImages.ts

@@ -5,7 +5,7 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
 import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
 import { getAspectRatio } from '../getAspectRatio';
 
 /** function to move item to the front of the array */
@@ -20,14 +20,12 @@ function moveToFront<T>(array: T[], item: T): T[] {
   return newArray;
 }
 
-export function buildGalleryOfThreeImages<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export function buildGalleryOfThreeImages({
   images,
   resizableCDNHosts,
   sizeConfig,
 }: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
-  images: Attachment<StreamChatGenerics>[];
+  images: Attachment[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   // Find the most ladscape and most portrait image.
@@ -57,9 +55,9 @@ export function buildGalleryOfThreeImages<
         landscapeImageAspectRatio: 1,
         portraitImageAspectRatio: 1,
       } as {
-        landscapeImage: Attachment<StreamChatGenerics>;
+        landscapeImage: Attachment;
         landscapeImageAspectRatio: number;
-        portraitImage: Attachment<StreamChatGenerics>;
+        portraitImage: Attachment;
         portraitImageAspectRatio: number;
       },
     );

package/src/components/Attachment/utils/buildGallery/buildGalleryOfTwoImages.ts

@@ -5,17 +5,15 @@ import { buildThumbnailGrid } from './buildThumbnailGrid';
 import type { GallerySizeAndThumbnailGrid, GallerySizeConfig } from './types';
 
 import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+
 import { getAspectRatio } from '../getAspectRatio';
 
-export function buildGalleryOfTwoImages<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export function buildGalleryOfTwoImages({
   images,
   resizableCDNHosts,
   sizeConfig,
 }: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
-  images: Attachment<StreamChatGenerics>[];
+  images: Attachment[];
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {
   const aspectRatio1 = getAspectRatio(images[0]);

package/src/components/Attachment/utils/buildGallery/buildThumbnail.ts

@@ -5,29 +5,24 @@ import type { Attachment } from 'stream-chat';
 import type { Thumbnail } from './types';
 
 import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
 
 import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../../../utils/getUrlOfImageAttachment';
 
-export type BuildThumbnailProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
+export type BuildThumbnailProps = Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   height: number;
-  image: Attachment<StreamChatGenerics>;
+  image: Attachment;
   width: number;
   resizeMode?: ImageResizeMode;
 };
 
-export function buildThumbnail<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export function buildThumbnail({
   height,
   image,
   resizableCDNHosts,
   resizeMode,
   width,
-}: BuildThumbnailProps<StreamChatGenerics>): Thumbnail {
+}: BuildThumbnailProps): Thumbnail {
   const { original_height: originalImageHeight, original_width: originalImageWidth } = image;
 
   // Only resize if the original image is larger than the thumbnail container size.

package/src/components/Attachment/utils/buildGallery/buildThumbnailGrid.ts

@@ -5,8 +5,6 @@ import type { GallerySizeAndThumbnailGrid, GallerySizeConfig, ThumbnailGrid } fr
 
 import { ChatConfigContextValue } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-
 /**
  * Builds a grid of thumbnail images from image attachments.
  * This function take a object parameter with following properties:
@@ -135,9 +133,7 @@ import type { DefaultStreamChatGenerics } from '../../../../types/types';
  *
  * @return {GallerySizeAndThumbnailGrid}
  */
-export function buildThumbnailGrid<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export function buildThumbnailGrid({
   grid,
   images,
   invertedDirections = false,
@@ -145,7 +141,7 @@ export function buildThumbnailGrid<
   sizeConfig,
 }: Pick<ChatConfigContextValue, 'resizableCDNHosts'> & {
   grid: number[][];
-  images: Attachment<StreamChatGenerics>[];
+  images: Attachment[];
   invertedDirections: boolean;
   sizeConfig: GallerySizeConfig;
 }): GallerySizeAndThumbnailGrid {

package/src/components/Attachment/utils/getAspectRatio.ts

@@ -1,6 +1,6 @@
 import type { Attachment } from 'stream-chat';
 
-import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
+import { FileTypes } from '../../../types/types';
 
 /**
  * Returns the aspect ratio of an image attachment.
@@ -8,9 +8,7 @@ import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
  * @param image Image attachment.
  * @returns {number}
  */
-export function getAspectRatio<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(attachment: Attachment<StreamChatGenerics>) {
+export function getAspectRatio(attachment: Attachment) {
   if (!(attachment.type === FileTypes.Image || attachment.type === FileTypes.Video)) {
     throw new Error(
       'getAspectRatio() can only be called on an image attachment or video thumbnail',

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -18,7 +18,7 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useScreenDimensions } from '../../hooks/useScreenDimensions';
 import { NativeHandlers } from '../../native';
-import type { Asset } from '../../types/types';
+import type { File } from '../../types/types';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
 import { BottomSheetFlatList } from '../BottomSheetCompatibility/BottomSheetFlatList';
 
@@ -108,7 +108,7 @@ export const AttachmentPicker = React.forwardRef(
     const [iOSLimited, setIosLimited] = useState(false);
     const hasNextPageRef = useRef(true);
     const [loadingPhotos, setLoadingPhotos] = useState(false);
-    const [photos, setPhotos] = useState<Asset[]>([]);
+    const [photos, setPhotos] = useState<File[]>([]);
     const attemptedToLoadPhotosOnOpenRef = useRef(false);
 
     const getMorePhotos = useCallback(async () => {
@@ -245,14 +245,8 @@ export const AttachmentPicker = React.forwardRef(
       numberOfUploads: selectedFiles.length + selectedImages.length,
       // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
       selected:
-        selectedImages.some((image) =>
-          image.id
-            ? image.id === asset.id
-            : image.uri === asset.uri || image.originalUri === asset.uri,
-        ) ||
-        selectedFiles.some((file) =>
-          file.id ? file.id === asset.id : file.uri === asset.uri || file.originalUri === asset.uri,
-        ),
+        selectedImages.some((image) => image.uri === asset.uri) ||
+        selectedFiles.some((file) => file.uri === asset.uri),
       selectedFiles,
       selectedImages,
       setSelectedFiles,

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -2,22 +2,19 @@ import React from 'react';
 
 import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
 
-import { lookup } from 'mime-types';
-
 import { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useViewport } from '../../../hooks/useViewport';
 import { Recorder } from '../../../icons';
-import type { Asset, File } from '../../../types/types';
+import type { File } from '../../../types/types';
 import { getDurationLabelFromDuration } from '../../../utils/utils';
 import { BottomSheetTouchableOpacity } from '../../BottomSheetCompatibility/BottomSheetTouchableOpacity';
-
 type AttachmentPickerItemType = Pick<
   AttachmentPickerContextValue,
   'selectedFiles' | 'setSelectedFiles' | 'setSelectedImages' | 'selectedImages' | 'maxNumberOfFiles'
 > & {
-  asset: Asset;
+  asset: File;
   ImageOverlaySelectedComponent: React.ComponentType;
   numberOfUploads: number;
   selected: boolean;
@@ -48,46 +45,25 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
     },
   } = useTheme();
 
-  const { duration: videoDuration, id: assetId, originalUri, uri } = asset;
+  const { duration: videoDuration, thumb_url, uri } = asset;
 
-  const durationLabel = getDurationLabelFromDuration(videoDuration);
+  const durationLabel = videoDuration ? getDurationLabelFromDuration(videoDuration) : '00:00';
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
-  /* Patches video files with uri and mimetype */
-  const patchVideoFile = (files: File[]) => {
-    // We need a mime-type to upload a video file.
-    const mimeType = lookup(asset.name) || 'multipart/form-data';
-    return [
-      ...files,
-      {
-        duration: asset.duration,
-        id: asset.id,
-        mimeType,
-        name: asset.name,
-        originalUri,
-        size: asset.size,
-        uri,
-      },
-    ];
-  };
-
   const updateSelectedFiles = () => {
     if (numberOfUploads >= maxNumberOfFiles) {
       Alert.alert(t('Maximum number of files reached'));
       return;
     }
-    const files = patchVideoFile(selectedFiles);
-    setSelectedFiles(files);
+    setSelectedFiles([...selectedFiles, asset]);
   };
 
   const onPressVideo = () => {
     if (selected) {
       setSelectedFiles((files) =>
         // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
-        files.filter((file) =>
-          file.id ? file.id !== assetId : file.uri !== uri && file.originalUri !== uri,
-        ),
+        files.filter((file) => file.uri !== uri),
       );
     } else {
       updateSelectedFiles();
@@ -97,7 +73,7 @@ const AttachmentVideo = (props: AttachmentVideoProps) => {
   return (
     <BottomSheetTouchableOpacity onPress={onPressVideo}>
       <ImageBackground
-        source={{ uri: originalUri }}
+        source={{ uri: thumb_url }}
         style={[
           {
             height: size,
@@ -147,7 +123,7 @@ const AttachmentImage = (props: AttachmentImageProps) => {
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 
-  const { id: assetId, originalUri, uri } = asset;
+  const { uri } = asset;
 
   const updateSelectedImages = () => {
     if (numberOfUploads >= maxNumberOfFiles) {
@@ -160,11 +136,7 @@ const AttachmentImage = (props: AttachmentImageProps) => {
   const onPressImage = () => {
     if (selected) {
       // `id` is available for Expo MediaLibrary while Cameraroll doesn't share id therefore we use `uri`
-      setSelectedImages((images) =>
-        images.filter((image) =>
-          assetId ? image.id !== assetId : image.uri !== uri && originalUri !== uri,
-        ),
-      );
+      setSelectedImages((images) => images.filter((image) => image.uri !== uri));
     } else {
       updateSelectedImages();
     }

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -23,7 +23,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 import type { Emoji } from '../../emoji-data';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+
 import {
   isCommandTrigger,
   isEmojiTrigger,
@@ -47,10 +47,8 @@ const computeCaretPosition = (token: string, startOfTokenPosition: number) =>
 
 const isCommand = (text: string) => text[0] === '/' && text.split(' ').length <= 1;
 
-type AutoCompleteInputPropsWithContext<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  MessageInputContextValue<StreamChatGenerics>,
+type AutoCompleteInputPropsWithContext = Pick<
+  MessageInputContextValue,
   | 'additionalTextInputProps'
   | 'autoCompleteSuggestionsLimit'
   | 'giphyActive'
@@ -65,10 +63,7 @@ type AutoCompleteInputPropsWithContext<
   | 'text'
   | 'triggerSettings'
 > &
-  Pick<
-    SuggestionsContextValue<StreamChatGenerics>,
-    'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'
-  > &
+  Pick<SuggestionsContextValue, 'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'> &
   Pick<TranslationContextValue, 't'> & {
     /**
      * This is currently passed in from MessageInput to avoid rerenders
@@ -77,15 +72,17 @@ type AutoCompleteInputPropsWithContext<
     cooldownActive?: boolean;
   };
 
-export type AutoCompleteInputProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<AutoCompleteInputPropsWithContext<StreamChatGenerics>>;
-
-const AutoCompleteInputWithContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
-) => {
+export type AutoCompleteInputProps = Partial<
+  Omit<
+    AutoCompleteInputPropsWithContext,
+    | 'triggerSettings'
+    | 'mentionAllAppUsersQuery'
+    | 'mentionAllAppUsersEnabled'
+    | 'autoCompleteSuggestionsLimit'
+  >
+>;
+
+const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext) => {
   const {
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
@@ -93,9 +90,9 @@ const AutoCompleteInputWithContext = <
     cooldownActive = false,
     giphyActive,
     giphyEnabled,
-    maxMessageLength,
     mentionAllAppUsersEnabled,
     mentionAllAppUsersQuery,
+    maxMessageLength,
     numberOfLines,
     onChange,
     openSuggestions,
@@ -156,7 +153,7 @@ const AutoCompleteInputWithContext = <
       const triggerSetting = triggerSettings[trigger];
       if (triggerSetting) {
         await triggerSetting.dataProvider(
-          query as SuggestionUser<StreamChatGenerics>['name'],
+          query as SuggestionUser['name'],
           text,
           (data, queryCallback) => {
             if (query === queryCallback) {
@@ -178,7 +175,7 @@ const AutoCompleteInputWithContext = <
       const triggerSetting = triggerSettings[trigger];
       if (triggerSetting) {
         await triggerSetting.dataProvider(
-          query as SuggestionCommand<StreamChatGenerics>['name'],
+          query as SuggestionCommand['name'],
           text,
           (data, queryCallback) => {
             if (query !== queryCallback) {
@@ -222,13 +219,7 @@ const AutoCompleteInputWithContext = <
     selectionEnd.current = end;
   };
 
-  const onSelectSuggestion = ({
-    item,
-    trigger,
-  }: {
-    item: Suggestion<StreamChatGenerics>;
-    trigger: Trigger;
-  }) => {
+  const onSelectSuggestion = ({ item, trigger }: { item: Suggestion; trigger: Trigger }) => {
     if (!trigger || !triggerSettings[trigger]) {
       return;
     }
@@ -430,9 +421,9 @@ const AutoCompleteInputWithContext = <
   );
 };
 
-const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
-  prevProps: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
-  nextProps: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
+const areEqual = (
+  prevProps: AutoCompleteInputPropsWithContext,
+  nextProps: AutoCompleteInputPropsWithContext,
 ) => {
   const {
     cooldownActive: prevCooldownActive,
@@ -475,11 +466,7 @@ const MemoizedAutoCompleteInput = React.memo(
   areEqual,
 ) as typeof AutoCompleteInputWithContext;
 
-export const AutoCompleteInput = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  props: AutoCompleteInputProps<StreamChatGenerics>,
-) => {
+export const AutoCompleteInput = (props: AutoCompleteInputProps) => {
   const {
     giphyEnabled,
     additionalTextInputProps,
@@ -494,9 +481,8 @@ export const AutoCompleteInput = <
     setInputBoxRef,
     text,
     triggerSettings,
-  } = useMessageInputContext<StreamChatGenerics>();
-  const { closeSuggestions, openSuggestions, updateSuggestions } =
-    useSuggestionsContext<StreamChatGenerics>();
+  } = useMessageInputContext();
+  const { closeSuggestions, openSuggestions, updateSuggestions } = useSuggestionsContext();
   const { t } = useTranslationContext();
 
   return (

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -4,7 +4,6 @@ import { StyleSheet, View } from 'react-native';
 import type { SuggestionCommand } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Flag, GiphyIcon, Imgur, Lightning, Mute, Sound, UserAdd, UserDelete } from '../../icons';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   iconContainer: {
@@ -17,12 +16,10 @@ const styles = StyleSheet.create({
   },
 });
 
-export const AutoCompleteSuggestionCommandIcon = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->({
+export const AutoCompleteSuggestionCommandIcon = ({
   name,
 }: {
-  name: SuggestionCommand<StreamChatGenerics>['name'];
+  name: SuggestionCommand['name'];
 }) => {
   const {
     theme: {