stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.6

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

@@ -0,0 +1,27 @@
+import type { ImageResizeMode } from 'react-native';
+
+export type Thumbnail = {
+  height: number;
+  resizeMode: ImageResizeMode;
+  url: string;
+  width: number;
+  id?: string;
+};
+
+export type GallerySizeConfig = {
+  gridHeight: number;
+  gridWidth: number;
+  maxHeight: number;
+  maxWidth: number;
+  minHeight: number;
+  minWidth: number;
+};
+
+export type ThumbnailGrid = Thumbnail[][];
+
+export type GallerySizeAndThumbnailGrid = {
+  height: number;
+  thumbnailGrid: ThumbnailGrid;
+  width: number;
+  invertedDirections?: boolean;
+};

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

@@ -0,0 +1,21 @@
+import type { Attachment } from 'stream-chat';
+
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+/**
+ * Returns the aspect ratio of an image attachment.
+ *
+ * @param image Image attachment.
+ * @returns {number}
+ */
+export function getAspectRatio<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(image: Attachment<StreamChatGenerics>) {
+  if (image.type !== 'image') {
+    throw new Error('getAspectRatio() can only be called on an image attachment');
+  }
+
+  if (!image.original_width || !image.original_height) return 1;
+
+  return image.original_width / image.original_height;
+}

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

@@ -0,0 +1,71 @@
+import type { GallerySizeConfig } from './buildGallery/types';
+
+import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+
+type Params = {
+  colIndex: number;
+  numOfColumns: number;
+  numOfRows: number;
+  rowIndex: number;
+  sizeConfig: GallerySizeConfig;
+  hasThreadReplies?: boolean;
+  height?: number;
+  invertedDirections?: boolean;
+  messageText?: string;
+  threadList?: boolean;
+  width?: number;
+} & Pick<MessageContextValue, 'groupStyles' | 'alignment'>;
+
+export function getGalleryImageBorderRadius({
+  alignment,
+  colIndex,
+  groupStyles,
+  hasThreadReplies,
+  height,
+  invertedDirections,
+  messageText,
+  numOfColumns,
+  numOfRows,
+  rowIndex,
+  sizeConfig,
+  threadList,
+  width,
+}: Params) {
+  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  const isSingleImage = numOfColumns === 1 && numOfRows === 1;
+  const isImageSmallerThanMinContainerSize =
+    isSingleImage &&
+    height &&
+    width &&
+    ((height > width && width === sizeConfig.minWidth) ||
+      (height < width && height === sizeConfig.minHeight));
+  const topLeftEdgeExposed = colIndex === 0 && rowIndex === 0;
+  const bottomLeftEdgeExposed =
+    (!invertedDirections && colIndex === 0 && rowIndex === numOfRows - 1) ||
+    (invertedDirections && colIndex === numOfColumns - 1 && rowIndex === 0);
+  const topRightEdgeExposed =
+    (!invertedDirections && colIndex === numOfColumns - 1 && rowIndex === 0) ||
+    (invertedDirections && colIndex === 0 && rowIndex === numOfRows - 1);
+  const bottomRightEdgeExposed = colIndex === numOfColumns && rowIndex === numOfRows - 1;
+
+  return {
+    borderBottomLeftRadius:
+      !isImageSmallerThanMinContainerSize &&
+      bottomLeftEdgeExposed &&
+      !messageText &&
+      ((groupStyle !== 'left_bottom' && groupStyle !== 'left_single') ||
+        (hasThreadReplies && !threadList))
+        ? 14
+        : 0,
+    borderBottomRightRadius:
+      !isImageSmallerThanMinContainerSize &&
+      bottomRightEdgeExposed &&
+      !messageText &&
+      ((groupStyle !== 'right_bottom' && groupStyle !== 'right_single') ||
+        (hasThreadReplies && !threadList))
+        ? 14
+        : 0,
+    borderTopLeftRadius: !isImageSmallerThanMinContainerSize && topLeftEdgeExposed ? 14 : 0,
+    borderTopRightRadius: !isImageSmallerThanMinContainerSize && topRightEdgeExposed ? 14 : 0,
+  };
+}

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -9,19 +9,20 @@ import {
   StyleSheet,
   View,
 } from 'react-native';
+
 import BottomSheet, {
   BottomSheetFlatList,
   BottomSheetHandleProps,
   TouchableOpacity,
 } from '@gorhom/bottom-sheet';
 
+import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
+
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Asset, getPhotos } from '../../native';
 import { vh, vw } from '../../utils/utils';
 
-import type { AttachmentPickerErrorProps } from './components/AttachmentPickerError';
-
 const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
@@ -344,6 +345,7 @@ export const AttachmentPicker = React.forwardRef(
       <>
         <BottomSheet
           containerHeight={fullScreenHeight}
+          enablePanDownToClose={true}
           handleComponent={
             /**
              * using `null` here instead of `style={{ opacity: photoError ? 0 : 1 }}`

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { StyleSheet, TextInput, TextInputProps } from 'react-native';
+
 import throttle from 'lodash/throttle';
 
 import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
-import type { Emoji } from '../../emoji-data/compiled';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -26,18 +26,10 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
+import type { Emoji } from '../../emoji-data/compiled';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { isCommandTrigger, isEmojiTrigger, isMentionTrigger } from '../../utils/utils';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
 import type { Trigger } from '../../utils/utils';
 
 const styles = StyleSheet.create({
@@ -57,16 +49,10 @@ const computeCaretPosition = (token: string, startOfTokenPosition: number) =>
 const isCommand = (text: string) => text[0] === '/' && text.split(' ').length <= 1;
 
 type AutoCompleteInputPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'giphyEnabled'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'giphyEnabled'> &
   Pick<
-    MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    MessageInputContextValue<StreamChatGenerics>,
     | 'additionalTextInputProps'
     | 'autoCompleteSuggestionsLimit'
     | 'giphyActive'
@@ -82,7 +68,7 @@ type AutoCompleteInputPropsWithContext<
     | 'triggerSettings'
   > &
   Pick<
-    SuggestionsContextValue<Co, Us>,
+    SuggestionsContextValue<StreamChatGenerics>,
     'closeSuggestions' | 'openSuggestions' | 'updateSuggestions'
   > &
   Pick<TranslationContextValue, 't'> & {
@@ -94,25 +80,13 @@ type AutoCompleteInputPropsWithContext<
   };
 
 export type AutoCompleteInputProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<AutoCompleteInputPropsWithContext<StreamChatGenerics>>;
 
 const AutoCompleteInputWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     additionalTextInputProps,
@@ -184,7 +158,7 @@ const AutoCompleteInputWithContext = <
       const triggerSetting = triggerSettings[trigger];
       if (triggerSetting) {
         await triggerSetting.dataProvider(
-          query as SuggestionUser<Us>['name'],
+          query as SuggestionUser<StreamChatGenerics>['name'],
           text,
           (data, queryCallback) => {
             if (query === queryCallback) {
@@ -206,7 +180,7 @@ const AutoCompleteInputWithContext = <
       const triggerSetting = triggerSettings[trigger];
       if (triggerSetting) {
         await triggerSetting.dataProvider(
-          query as SuggestionCommand<Co>['name'],
+          query as SuggestionCommand<StreamChatGenerics>['name'],
           text,
           (data, queryCallback) => {
             if (query !== queryCallback) {
@@ -254,7 +228,7 @@ const AutoCompleteInputWithContext = <
     item,
     trigger,
   }: {
-    item: Suggestion<Co, Us>;
+    item: Suggestion<StreamChatGenerics>;
     trigger: Trigger;
   }) => {
     if (!trigger || !triggerSettings[trigger]) {
@@ -459,17 +433,9 @@ const AutoCompleteInputWithContext = <
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: AutoCompleteInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
+  nextProps: AutoCompleteInputPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     cooldownActive: prevCooldownActive,
@@ -505,17 +471,11 @@ const MemoizedAutoCompleteInput = React.memo(
 ) as typeof AutoCompleteInputWithContext;
 
 export const AutoCompleteInput = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AutoCompleteInputProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: AutoCompleteInputProps<StreamChatGenerics>,
 ) => {
-  const { giphyEnabled } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { giphyEnabled } = useChannelContext<StreamChatGenerics>();
   const {
     additionalTextInputProps,
     autoCompleteSuggestionsLimit,
@@ -530,8 +490,9 @@ export const AutoCompleteInput = <
     setShowMoreOptions,
     text,
     triggerSettings,
-  } = useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { closeSuggestions, openSuggestions, updateSuggestions } = useSuggestionsContext<Co, Us>();
+  } = useMessageInputContext<StreamChatGenerics>();
+  const { closeSuggestions, openSuggestions, updateSuggestions } =
+    useSuggestionsContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
   return (

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 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 { SuggestionCommand } from '../../contexts/suggestionsContext/SuggestionsContext';
-import type { DefaultCommandType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 const styles = StyleSheet.create({
   iconContainer: {
@@ -17,10 +17,12 @@ const styles = StyleSheet.create({
   },
 });
 
-export const AutoCompleteSuggestionCommandIcon = <Co extends string = DefaultCommandType>({
+export const AutoCompleteSuggestionCommandIcon = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
   name,
 }: {
-  name: SuggestionCommand<Co>['name'];
+  name: SuggestionCommand<StreamChatGenerics>['name'];
 }) => {
   const {
     theme: {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import type { SuggestionsContextValue } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
-import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
 import { Lightning } from '../../icons/Lightning';
 import { Smile } from '../../icons/Smile';
-import type { SuggestionsContextValue } from '../../contexts/suggestionsContext/SuggestionsContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 export type AutoCompleteSuggestionHeaderPropsWithContext<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<SuggestionsContextValue<Co, Us>, 'triggerType' | 'queryText'>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<SuggestionsContextValue<StreamChatGenerics>, 'triggerType' | 'queryText'>;
 
 const styles = StyleSheet.create({
   container: {
@@ -27,12 +26,11 @@ const styles = StyleSheet.create({
 });
 
 const AutoCompleteSuggestionHeaderWithContext = <
-  Co extends string = DefaultCommandType,
-  Us extends DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   queryText,
   triggerType,
-}: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>) => {
+}: AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>) => {
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -70,12 +68,9 @@ const AutoCompleteSuggestionHeaderWithContext = <
   }
 };
 
-const areEqual = <
-  Co extends string = DefaultCommandType,
-  Us extends DefaultUserType = DefaultUserType,
->(
-  prevProps: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>,
-  nextProps: AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>,
+  nextProps: AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>,
 ) => {
   const { queryText: prevQueryText, triggerType: prevType } = prevProps;
   const { queryText: nextQueryText, triggerType: nextType } = nextProps;
@@ -94,15 +89,13 @@ const MemoizedAutoCompleteSuggestionHeader = React.memo(
 ) as typeof AutoCompleteSuggestionHeaderWithContext;
 
 export type AutoCompleteSuggestionHeaderProps<
-  Co extends string = DefaultCommandType,
-  Us extends DefaultUserType = DefaultUserType,
-> = AutoCompleteSuggestionHeaderPropsWithContext<Co, Us>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = AutoCompleteSuggestionHeaderPropsWithContext<StreamChatGenerics>;
 
 export const AutoCompleteSuggestionHeader = <
-  Co extends string = DefaultCommandType,
-  Us extends DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AutoCompleteSuggestionHeaderProps<Co, Us>,
+  props: AutoCompleteSuggestionHeaderProps<StreamChatGenerics>,
 ) => <MemoizedAutoCompleteSuggestionHeader {...props} />;
 
 AutoCompleteSuggestionHeader.displayName =

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -1,23 +1,24 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Avatar } from '../Avatar/Avatar';
-import { AtMentions } from '../../icons/AtMentions';
-import type { DefaultCommandType, DefaultUserType } from '../../types/types';
+
+import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
+
 import type {
   Suggestion,
   SuggestionCommand,
   SuggestionsContextValue,
   SuggestionUser,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
-import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import type { Emoji } from '../../emoji-data/compiled';
+import { AtMentions } from '../../icons/AtMentions';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { Avatar } from '../Avatar/Avatar';
 
 export type AutoCompleteSuggestionItemPropsWithContext<
-  Co extends string = DefaultCommandType,
-  Us extends DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<SuggestionsContextValue, 'triggerType'> & {
-  itemProps: Suggestion<Co, Us>;
+  itemProps: Suggestion<StreamChatGenerics>;
 };
 
 const styles = StyleSheet.create({
@@ -55,12 +56,11 @@ const styles = StyleSheet.create({
 });
 
 const AutoCompleteSuggestionItemWithContext = <
-  Co extends string = DefaultCommandType,
-  Us extends DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   itemProps,
   triggerType,
-}: AutoCompleteSuggestionItemPropsWithContext<Co, Us>) => {
+}: AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>) => {
   const {
     theme: {
       colors: { accent_blue, black, grey },
@@ -75,7 +75,7 @@ const AutoCompleteSuggestionItemWithContext = <
   } = useTheme();
 
   if (triggerType === 'mention') {
-    const { id, image, name, online } = itemProps as SuggestionUser<Us>;
+    const { id, image, name, online } = itemProps as SuggestionUser<StreamChatGenerics>;
     return (
       <View style={[styles.container, mentionContainer]}>
         <Avatar image={image} name={name} online={online} size={avatarSize} />
@@ -100,7 +100,7 @@ const AutoCompleteSuggestionItemWithContext = <
       </View>
     );
   } else if (triggerType === 'command') {
-    const { args, name } = itemProps as SuggestionCommand<Co>;
+    const { args, name } = itemProps as SuggestionCommand<StreamChatGenerics>;
     return (
       <View style={[styles.container, commandContainer]}>
         <AutoCompleteSuggestionCommandIcon name={name} />
@@ -117,12 +117,9 @@ const AutoCompleteSuggestionItemWithContext = <
   }
 };
 
-const areEqual = <
-  Co extends string = DefaultCommandType,
-  Us extends DefaultUserType = DefaultUserType,
->(
-  prevProps: AutoCompleteSuggestionItemPropsWithContext<Co, Us>,
-  nextProps: AutoCompleteSuggestionItemPropsWithContext<Co, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>,
+  nextProps: AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>,
 ) => {
   const { itemProps: prevItemProps, triggerType: prevType } = prevProps;
   const { itemProps: nextItemProps, triggerType: nextType } = nextProps;
@@ -139,15 +136,13 @@ const MemoizedAutoCompleteSuggestionItem = React.memo(
 ) as typeof AutoCompleteSuggestionItemWithContext;
 
 export type AutoCompleteSuggestionItemProps<
-  Co extends string = DefaultCommandType,
-  Us extends DefaultUserType = DefaultUserType,
-> = AutoCompleteSuggestionItemPropsWithContext<Co, Us>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = AutoCompleteSuggestionItemPropsWithContext<StreamChatGenerics>;
 
 export const AutoCompleteSuggestionItem = <
-  Co extends string = DefaultCommandType,
-  Us extends DefaultUserType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AutoCompleteSuggestionItemProps<Co, Us>,
+  props: AutoCompleteSuggestionItemProps<StreamChatGenerics>,
 ) => <MemoizedAutoCompleteSuggestionItem {...props} />;
 
 AutoCompleteSuggestionItem.displayName =

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,38 +1,35 @@
 import React from 'react';
 import { FlatList, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+
+import type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';
+import type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';
+
 import {
   isSuggestionCommand,
   isSuggestionEmoji,
   isSuggestionUser,
   Suggestion,
-} from '../../contexts/suggestionsContext/SuggestionsContext';
-import type { DefaultCommandType, DefaultUserType, UnknownType } from '../../types/types';
-
-import type { AutoCompleteSuggestionHeaderProps } from './AutoCompleteSuggestionHeader';
-import type { AutoCompleteSuggestionItemProps } from './AutoCompleteSuggestionItem';
-import {
   SuggestionsContextValue,
   useSuggestionsContext,
 } from '../../contexts/suggestionsContext/SuggestionsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 type AutoCompleteSuggestionListComponentProps<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<SuggestionsContextValue, 'queryText' | 'triggerType'> & {
   active: boolean;
-  data: Suggestion<Co, Us>[];
-  onSelect: (item: Suggestion<Co, Us>) => void;
+  data: Suggestion<StreamChatGenerics>[];
+  onSelect: (item: Suggestion<StreamChatGenerics>) => void;
 };
 
 export type AutoCompleteSuggestionListPropsWithContext<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
-  SuggestionsContextValue<Co, Us>,
+  SuggestionsContextValue<StreamChatGenerics>,
   'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'
 > &
-  AutoCompleteSuggestionListComponentProps<Co, Us>;
+  AutoCompleteSuggestionListComponentProps<StreamChatGenerics>;
 
 const SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {
   const { children, ...touchableOpacityProps } = props;
@@ -42,10 +39,9 @@ const SuggestionsItem: React.FC<TouchableOpacityProps> = (props) => {
 SuggestionsItem.displayName = 'SuggestionsHeader{messageInput{suggestions}}';
 
 export const AutoCompleteSuggestionListWithContext = <
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AutoCompleteSuggestionListPropsWithContext<Co, Us>,
+  props: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     active,
@@ -67,7 +63,7 @@ export const AutoCompleteSuggestionListWithContext = <
     },
   } = useTheme();
 
-  const renderItem = ({ index, item }: { index: number; item: Suggestion<Co, Us> }) => {
+  const renderItem = ({ index, item }: { index: number; item: Suggestion<StreamChatGenerics> }) => {
     switch (triggerType) {
       case 'mention':
         if (isSuggestionUser(item)) {
@@ -148,9 +144,9 @@ export const AutoCompleteSuggestionListWithContext = <
   );
 };
 
-const areEqual = <Co extends string = DefaultCommandType, Us extends UnknownType = DefaultUserType>(
-  prevProps: AutoCompleteSuggestionListPropsWithContext<Co, Us>,
-  nextProps: AutoCompleteSuggestionListPropsWithContext<Co, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
+  nextProps: AutoCompleteSuggestionListPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     active: prevActive,
@@ -186,21 +182,21 @@ const MemoizedAutoCompleteSuggestionList = React.memo(
 ) as typeof AutoCompleteSuggestionListWithContext;
 
 export type AutoCompleteSuggestionListProps<
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
-> = AutoCompleteSuggestionListComponentProps<Co, Us> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = AutoCompleteSuggestionListComponentProps<StreamChatGenerics> & {
   AutoCompleteSuggestionHeader?: React.ComponentType<AutoCompleteSuggestionHeaderProps>;
-  AutoCompleteSuggestionItem?: React.ComponentType<AutoCompleteSuggestionItemProps<Co, Us>>;
+  AutoCompleteSuggestionItem?: React.ComponentType<
+    AutoCompleteSuggestionItemProps<StreamChatGenerics>
+  >;
 };
 
 export const AutoCompleteSuggestionList = <
-  Co extends string = DefaultCommandType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: AutoCompleteSuggestionListProps<Co, Us>,
+  props: AutoCompleteSuggestionListProps<StreamChatGenerics>,
 ) => {
   const { AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem } =
-    useSuggestionsContext<Co, Us>();
+    useSuggestionsContext<StreamChatGenerics>();
   return (
     <MemoizedAutoCompleteSuggestionList
       {...{ AutoCompleteSuggestionHeader, AutoCompleteSuggestionItem }}