stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -1,13 +1,8 @@
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 
-import { BackHandler, Dimensions, StyleSheet, ViewStyle } from 'react-native';
+import { BackHandler } from 'react-native';
 
-import Animated, {
-  cancelAnimation,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import { cancelAnimation, useSharedValue, withTiming } from 'react-native-reanimated';
 
 import type BottomSheet from '@gorhom/bottom-sheet';
 
@@ -25,8 +20,6 @@ import { FileSelectorIcon as DefaultFileSelectorIcon } from '../../components/At
 import { ImageOverlaySelectedComponent as DefaultImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { ImageSelectorIcon as DefaultImageSelectorIcon } from '../../components/AttachmentPicker/components/ImageSelectorIcon';
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
-import { MessageOverlay } from '../../components/MessageOverlay/MessageOverlay';
-import { OverlayBackdrop } from '../../components/MessageOverlay/OverlayBackdrop';
 import { CreatePollIcon as DefaultCreatePollIcon } from '../../components/Poll/components/CreatePollIcon';
 import { useStreami18n } from '../../hooks/useStreami18n';
 
@@ -35,7 +28,6 @@ import { isImageMediaLibraryAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { AttachmentPickerProvider } from '../attachmentPickerContext/AttachmentPickerContext';
 import { ImageGalleryProvider } from '../imageGalleryContext/ImageGalleryContext';
-import { MessageOverlayProvider } from '../messageOverlayContext/MessageOverlayContext';
 import { ThemeProvider } from '../themeContext/ThemeContext';
 import {
   DEFAULT_USER_LANGUAGE,
@@ -109,9 +101,6 @@ export const OverlayProvider = <
     imageGalleryGridSnapPoints,
     ImageOverlaySelectedComponent = DefaultImageOverlaySelectedComponent,
     ImageSelectorIcon = DefaultImageSelectorIcon,
-    MessageActionList,
-    MessageActionListItem,
-    messageTextNumberOfLines,
     numberOfAttachmentImagesToLoadPerCall,
     numberOfAttachmentPickerImageColumns,
     numberOfImageGalleryGridColumns,
@@ -125,9 +114,6 @@ export const OverlayProvider = <
         console.warn('bottom and top insets must be set for the image picker to work correctly');
       }
     },
-    OverlayReactionList,
-    OverlayReactions,
-    OverlayReactionsAvatar,
     topInset,
     value,
   } = props;
@@ -152,7 +138,6 @@ export const OverlayProvider = <
   const [overlay, setOverlay] = useState(value?.overlay || 'none');
 
   const overlayOpacity = useSharedValue(0);
-  const { height, width } = Dimensions.get('screen');
 
   // Setup translators
   const translators = useStreami18n(i18nInstance);
@@ -209,13 +194,6 @@ export const OverlayProvider = <
     topInset,
   };
 
-  const overlayStyle = useAnimatedStyle<ViewStyle>(
-    () => ({
-      opacity: overlayOpacity.value,
-    }),
-    [],
-  );
-
   const overlayContext = {
     overlay,
     setOverlay,
@@ -225,46 +203,27 @@ export const OverlayProvider = <
   return (
     <TranslationProvider value={{ ...translators, userLanguage: DEFAULT_USER_LANGUAGE }}>
       <OverlayContext.Provider value={overlayContext}>
-        <MessageOverlayProvider<StreamChatGenerics>>
-          <AttachmentPickerProvider value={attachmentPickerContext}>
-            <ImageGalleryProvider>
-              {children}
-              <ThemeProvider style={overlayContext.style}>
-                <Animated.View
-                  pointerEvents={overlay === 'none' ? 'none' : 'auto'}
-                  style={[StyleSheet.absoluteFill, overlayStyle]}
-                >
-                  <OverlayBackdrop style={[StyleSheet.absoluteFill, { height, width }]} />
-                </Animated.View>
-                {overlay === 'message' && (
-                  <MessageOverlay<StreamChatGenerics>
-                    MessageActionList={MessageActionList}
-                    MessageActionListItem={MessageActionListItem}
-                    messageTextNumberOfLines={messageTextNumberOfLines}
-                    overlayOpacity={overlayOpacity}
-                    OverlayReactionList={OverlayReactionList}
-                    OverlayReactions={OverlayReactions}
-                    OverlayReactionsAvatar={OverlayReactionsAvatar}
-                  />
-                )}
-                {overlay === 'gallery' && (
-                  <ImageGallery<StreamChatGenerics>
-                    autoPlayVideo={autoPlayVideo}
-                    giphyVersion={giphyVersion}
-                    imageGalleryCustomComponents={imageGalleryCustomComponents}
-                    imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
-                    imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
-                    numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-                    overlayOpacity={overlayOpacity}
-                  />
-                )}
-                {isImageMediaLibraryAvailable() ? (
-                  <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
-                ) : null}
-              </ThemeProvider>
-            </ImageGalleryProvider>
-          </AttachmentPickerProvider>
-        </MessageOverlayProvider>
+        <AttachmentPickerProvider value={attachmentPickerContext}>
+          <ImageGalleryProvider>
+            {children}
+            <ThemeProvider style={overlayContext.style}>
+              {overlay === 'gallery' && (
+                <ImageGallery<StreamChatGenerics>
+                  autoPlayVideo={autoPlayVideo}
+                  giphyVersion={giphyVersion}
+                  imageGalleryCustomComponents={imageGalleryCustomComponents}
+                  imageGalleryGridHandleHeight={imageGalleryGridHandleHeight}
+                  imageGalleryGridSnapPoints={imageGalleryGridSnapPoints}
+                  numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
+                  overlayOpacity={overlayOpacity}
+                />
+              )}
+              {isImageMediaLibraryAvailable() ? (
+                <AttachmentPicker ref={bottomSheetRef} {...attachmentPickerProps} />
+              ) : null}
+            </ThemeProvider>
+          </ImageGalleryProvider>
+        </AttachmentPickerProvider>
       </OverlayContext.Provider>
     </TranslationProvider>
   );

package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.tsx

@@ -2,31 +2,19 @@ import React, { PropsWithChildren, useContext } from 'react';
 
 import type { ChannelState } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type PaginatedMessageListContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
   /**
-   * Has more messages to load
-   */
-  hasMore: boolean;
-  /**
-   * Flag to indicate that are no more recent messages to be loaded
-   */
-  hasNoMoreRecentMessagesToLoad: boolean;
-  /**
-   * Is loading more messages
+   * Load latest messages
+   * @returns Promise<void>
    */
-  loadingMore: boolean;
-  /**
-   * Is loading more recent messages
-   */
-  loadingMoreRecent: boolean;
+  loadLatestMessages: () => Promise<void>;
   /**
    * Load more messages
    */
@@ -39,14 +27,26 @@ export type PaginatedMessageListContextValue<
    * Messages from client state
    */
   messages: ChannelState<StreamChatGenerics>['messages'];
+  /**
+   * Has more messages to load
+   */
+  hasMore?: boolean;
+  /**
+   * Is loading more messages
+   */
+  loadingMore?: boolean;
+  /**
+   * Is loading more recent messages
+   */
+  loadingMoreRecent?: boolean;
   /**
    * Set loadingMore
    */
-  setLoadingMore: React.Dispatch<React.SetStateAction<boolean>>;
+  setLoadingMore?: (loadingMore: boolean) => void;
   /**
    * Set loadingMoreRecent
    */
-  setLoadingMoreRecent: React.Dispatch<React.SetStateAction<boolean>>;
+  setLoadingMoreRecent?: (loadingMoreRecent: boolean) => void;
 };
 
 export const PaginatedMessageListContext = React.createContext(
@@ -83,31 +83,3 @@ export const usePaginatedMessageListContext = <
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withPaginatedMessageListContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withPaginatedMessageListContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>> => {
-  const WithPaginatedMessageListContextComponent = (
-    props: Omit<P, keyof PaginatedMessageListContextValue<StreamChatGenerics>>,
-  ) => {
-    const paginatedMessageListContext = usePaginatedMessageListContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...paginatedMessageListContext} />;
-  };
-  WithPaginatedMessageListContextComponent.displayName = `WithPaginatedMessageListContext${getDisplayName(
-    Component,
-  )}`;
-  return WithPaginatedMessageListContextComponent;
-};

package/src/contexts/suggestionsContext/SuggestionsContext.tsx

@@ -6,10 +6,9 @@ import type { AutoCompleteSuggestionHeaderProps } from '../../components/AutoCom
 import type { AutoCompleteSuggestionItemProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
 import type { AutoCompleteSuggestionListProps } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import type { Emoji } from '../../emoji-data';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type SuggestionComponentType = 'command' | 'emoji' | 'mention';
@@ -148,31 +147,3 @@ export const useSuggestionsContext = <
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withSuggestionsContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withSuggestionsContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>> => {
-  const WithSuggestionsContextComponent = (
-    props: Omit<P, keyof SuggestionsContextValue<StreamChatGenerics>>,
-  ) => {
-    const suggestionsContext = useSuggestionsContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...suggestionsContext} />;
-  };
-  WithSuggestionsContextComponent.displayName = `WithSuggestionsContext${getDisplayName(
-    Component,
-  )}`;
-  return WithSuggestionsContextComponent;
-};

package/src/contexts/themeContext/utils/theme.ts

@@ -4,6 +4,7 @@ import type { CircleProps, StopProps } from 'react-native-svg';
 import type { IconProps } from '../../../icons/utils/base';
 
 export const DEFAULT_STATUS_ICON_SIZE = 16;
+export const BASE_AVATAR_SIZE = 32;
 
 export const Colors = {
   accent_blue: '#005FFF',
@@ -26,7 +27,8 @@ export const Colors = {
   grey_whisper: '#ECEBEB',
   icon_background: '#FFFFFF',
   label_bg_transparent: '#00000033', // 33 = 20% opacity
-  light_gray: '#DBDDE1',
+  light_blue: '#E0F0FF',
+  light_gray: '#E9EAED',
   modal_shadow: '#00000099', // 99 = 60% opacity; x=0, y= 1, radius=4
   overlay: '#000000CC', // CC = 80% opacity
   shadow_icon: '#00000040', // 40 = 25% opacity; x=0, y=0, radius=4
@@ -125,6 +127,12 @@ export type Theme = {
     presenceIndicator: CircleProps;
     presenceIndicatorContainer: ViewStyle;
   };
+  bottomSheetModal: {
+    container: ViewStyle;
+    contentContainer: ViewStyle;
+    handle: ViewStyle;
+    overlay: ViewStyle;
+  };
   channel: {
     selectChannel: TextStyle;
   };
@@ -218,7 +226,6 @@ export type Theme = {
       centerContainer: ViewStyle;
       container: ViewStyle;
       dateText: TextStyle;
-      innerContainer: ViewStyle;
       leftContainer: ViewStyle;
       rightContainer: ViewStyle;
       usernameText: TextStyle;
@@ -250,6 +257,7 @@ export type Theme = {
     container: ViewStyle;
     loadingText: TextStyle;
   };
+
   messageInput: {
     attachButton: ViewStyle;
     attachButtonContainer: ViewStyle;
@@ -420,6 +428,44 @@ export type Theme = {
     };
     typingIndicatorContainer: ViewStyle;
   };
+  messageMenu: {
+    actionList: {
+      container: ViewStyle;
+    };
+    actionListItem: {
+      container: ViewStyle;
+      icon: ViewStyle;
+      title: TextStyle;
+    };
+    reactionButton: {
+      filledColor: ColorValue;
+      unfilledColor: ColorValue;
+    };
+    reactionPicker: {
+      buttonContainer: ViewStyle;
+      container: ViewStyle;
+      contentContainer: ViewStyle;
+      reactionIconSize: number;
+    };
+    userReactions: {
+      avatarContainer: ViewStyle;
+      avatarInnerContainer: ViewStyle;
+      avatarName: TextStyle;
+      avatarNameContainer: ViewStyle;
+      avatarSize: number;
+      container: ViewStyle;
+      contentContainer: ViewStyle;
+      flatlistColumnContainer: ViewStyle;
+      flatlistContainer: ViewStyle;
+      radius: number;
+      reactionBubble: ViewStyle;
+      reactionBubbleBackground: ViewStyle;
+      reactionBubbleBorderRadius: number;
+      reactionSelectorContainer: ViewStyle;
+      reactionsText: TextStyle;
+      title: TextStyle;
+    };
+  };
   messageSimple: {
     actions: {
       button: ViewStyle & {
@@ -495,6 +541,7 @@ export type Theme = {
       senderMessageBackgroundColor?: ColorValue;
       timestampText?: TextStyle;
     };
+    contentWrapper: ViewStyle;
     file: {
       container: ViewStyle;
       details: ViewStyle;
@@ -543,6 +590,7 @@ export type Theme = {
       shuffle: TextStyle;
       title: TextStyle;
     };
+    headerWrapper: ViewStyle;
     lastMessageContainer: ViewStyle;
     loadingIndicator: {
       container: ViewStyle;
@@ -554,16 +602,28 @@ export type Theme = {
       container: ViewStyle;
       label: TextStyle;
     };
-    reactionList: {
+    reactionListBottom: {
+      contentContainer: ViewStyle;
+      item: {
+        container: ViewStyle;
+        countText: TextStyle;
+        icon: ViewStyle;
+        iconFillColor: ColorValue;
+        iconSize: number;
+        iconUnFillColor: ColorValue;
+      };
+    };
+    reactionListTop: {
       container: ViewStyle;
-      iconFillColor: ColorValue;
-      middleIcon: ViewStyle;
-      radius: number;
-      reactionBubble: ViewStyle;
-      reactionContainer: ViewStyle;
-      reactionCount: TextStyle;
-      reactionSize: number;
-      strokeSize: number;
+      item: {
+        container: ViewStyle;
+        icon: ViewStyle;
+        iconFillColor: ColorValue;
+        iconSize: number;
+        iconUnFillColor: ColorValue;
+        reactionSize: number;
+      };
+      position: number;
     };
     replies: {
       avatar: ViewStyle;
@@ -585,46 +645,12 @@ export type Theme = {
       timeIcon: IconProps;
     };
     targetedMessageContainer: ViewStyle;
-    targetedMessageUnderlay: ViewStyle;
     videoThumbnail: {
       container: ViewStyle;
       roundedView: ViewStyle;
     };
     unreadUnderlayColor?: ColorValue;
   };
-  overlay: {
-    container: ViewStyle;
-    messageActions: {
-      actionContainer: ViewStyle;
-      icon: ViewStyle;
-      title: TextStyle;
-    };
-    messageActionsList: {
-      container: ViewStyle;
-    };
-    padding: number;
-    reactions: {
-      avatarContainer: ViewStyle;
-      avatarName: TextStyle;
-      avatarSize: number;
-      container: ViewStyle;
-      flatListContainer: ViewStyle;
-      radius: number;
-      reactionBubble: ViewStyle;
-      reactionBubbleBackground: ViewStyle;
-      reactionBubbleBorderRadius: number;
-      title: TextStyle;
-    };
-    reactionsList: {
-      radius: number;
-      reaction: ViewStyle;
-      reactionList: ViewStyle;
-      reactionListBorderRadius: number;
-      reactionSize: number;
-      selectedIcon: IconProps;
-      unSelectedIcon: IconProps;
-    };
-  };
   poll: {
     allOptions: {
       listContainer: ViewStyle;
@@ -830,7 +856,7 @@ export const defaultTheme: Theme = {
     speedChangeButtonText: {},
   },
   avatar: {
-    BASE_AVATAR_SIZE: 32,
+    BASE_AVATAR_SIZE,
     container: {},
     image: {
       borderRadius: 16,
@@ -845,6 +871,12 @@ export const defaultTheme: Theme = {
     },
     presenceIndicatorContainer: {},
   },
+  bottomSheetModal: {
+    container: {},
+    contentContainer: {},
+    handle: {},
+    overlay: {},
+  },
   channel: {
     selectChannel: {},
   },
@@ -951,7 +983,6 @@ export const defaultTheme: Theme = {
       centerContainer: {},
       container: {},
       dateText: {},
-      innerContainer: {},
       leftContainer: {},
       rightContainer: {},
       usernameText: {},
@@ -1136,6 +1167,44 @@ export const defaultTheme: Theme = {
     },
     typingIndicatorContainer: {},
   },
+  messageMenu: {
+    actionList: {
+      container: {},
+    },
+    actionListItem: {
+      container: {},
+      icon: {},
+      title: {},
+    },
+    reactionButton: {
+      filledColor: Colors.accent_blue,
+      unfilledColor: Colors.grey,
+    },
+    reactionPicker: {
+      buttonContainer: {},
+      container: {},
+      contentContainer: {},
+      reactionIconSize: 24,
+    },
+    userReactions: {
+      avatarContainer: {},
+      avatarInnerContainer: {},
+      avatarName: {},
+      avatarNameContainer: {},
+      avatarSize: 64,
+      container: {},
+      contentContainer: {},
+      flatlistColumnContainer: {},
+      flatlistContainer: {},
+      radius: 2,
+      reactionBubble: {},
+      reactionBubbleBackground: {},
+      reactionBubbleBorderRadius: 24,
+      reactionSelectorContainer: {},
+      reactionsText: {},
+      title: {},
+    },
+  },
   messageSimple: {
     actions: {
       button: {},
@@ -1151,8 +1220,8 @@ export const defaultTheme: Theme = {
         marginLeft: 8,
       },
       spacer: {
-        height: 28,
-        width: 32, // same as BASE_AVATAR_SIZE
+        height: BASE_AVATAR_SIZE,
+        width: BASE_AVATAR_SIZE, // same as BASE_AVATAR_SIZE
       },
     },
     card: {
@@ -1239,6 +1308,7 @@ export const defaultTheme: Theme = {
       timestampText: {},
       wrapper: {},
     },
+    contentWrapper: {},
     file: {
       container: {},
       details: {},
@@ -1282,6 +1352,7 @@ export const defaultTheme: Theme = {
       shuffle: {},
       title: {},
     },
+    headerWrapper: {},
     lastMessageContainer: {},
     loadingIndicator: {
       container: {},
@@ -1293,16 +1364,28 @@ export const defaultTheme: Theme = {
       container: {},
       label: {},
     },
-    reactionList: {
+    reactionListBottom: {
+      contentContainer: {},
+      item: {
+        container: {},
+        countText: {},
+        icon: {},
+        iconFillColor: Colors.accent_blue,
+        iconSize: 16,
+        iconUnFillColor: Colors.grey,
+      },
+    },
+    reactionListTop: {
       container: {},
-      iconFillColor: '',
-      middleIcon: {},
-      radius: 2, // not recommended to change this
-      reactionBubble: {},
-      reactionContainer: {},
-      reactionCount: {},
-      reactionSize: 24,
-      strokeSize: 1, // not recommended to change this
+      item: {
+        container: {},
+        icon: {},
+        iconFillColor: Colors.accent_blue,
+        iconSize: 24,
+        iconUnFillColor: Colors.grey,
+        reactionSize: 24,
+      },
+      position: 16,
     },
     replies: {
       avatar: {},
@@ -1332,46 +1415,12 @@ export const defaultTheme: Theme = {
       },
     },
     targetedMessageContainer: {},
-    targetedMessageUnderlay: {},
     unreadUnderlayColor: Colors.bg_gradient_start,
     videoThumbnail: {
       container: {},
       roundedView: {},
     },
   },
-  overlay: {
-    container: {},
-    messageActions: {
-      actionContainer: {},
-      icon: {},
-      title: {},
-    },
-    messageActionsList: {
-      container: {},
-    },
-    padding: 8,
-    reactions: {
-      avatarContainer: {},
-      avatarName: {},
-      avatarSize: 64,
-      container: {},
-      flatListContainer: {},
-      radius: 2,
-      reactionBubble: {},
-      reactionBubbleBackground: {},
-      reactionBubbleBorderRadius: 24,
-      title: {},
-    },
-    reactionsList: {
-      radius: 2.5,
-      reaction: {},
-      reactionList: {},
-      reactionListBorderRadius: 24,
-      reactionSize: 24,
-      selectedIcon: {},
-      unSelectedIcon: {},
-    },
-  },
   poll: {
     allOptions: {
       listContainer: {},

package/src/contexts/threadContext/ThreadContext.tsx

@@ -3,10 +3,9 @@ import React, { PropsWithChildren, useContext } from 'react';
 import { ChannelState, Thread } from 'stream-chat';
 
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ThreadType<
@@ -65,29 +64,3 @@ export const useThreadContext = <
 
   return contextValue;
 };
-
-/**
- * @deprecated
- *
- * This will be removed in the next major version.
- *
- * Typescript currently does not support partial inference so if ChatContext
- * typing is desired while using the HOC withThreadContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withThreadContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof ThreadContextValue<StreamChatGenerics>>> => {
-  const WithThreadContextComponent = (
-    props: Omit<P, keyof ThreadContextValue<StreamChatGenerics>>,
-  ) => {
-    const threadContext = useThreadContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...threadContext} />;
-  };
-  WithThreadContextComponent.displayName = `WithThreadContext${getDisplayName(Component)}`;
-  return WithThreadContextComponent;
-};