stream-chat-react-native-core 5.39.5 → 5.40.0-rc.2

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -0,0 +1,170 @@
+import React, { PropsWithChildren, useEffect } from 'react';
+import {
+  Animated,
+  Keyboard,
+  KeyboardEvent,
+  Modal,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  GestureUpdateEvent,
+  PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler';
+
+import { runOnJS } from 'react-native-reanimated';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+export type BottomSheetModalProps = {
+  /**
+   * Function to call when the modal is closed.
+   * @returns void
+   */
+  onClose: () => void;
+  /**
+   * Whether the modal is visible.
+   */
+  visible: boolean;
+  /**
+   * The height of the modal.
+   */
+  height?: number;
+};
+
+/**
+ * A modal that slides up from the bottom of the screen.
+ */
+export const BottomSheetModal = (props: PropsWithChildren<BottomSheetModalProps>) => {
+  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+  const { children, height = windowHeight / 2, onClose, visible } = props;
+  const {
+    theme: {
+      colors: { grey, overlay, white_snow },
+    },
+  } = useTheme();
+
+  const translateY = new Animated.Value(height);
+
+  const openAnimation = Animated.timing(translateY, {
+    duration: 200,
+    toValue: 0,
+    useNativeDriver: true,
+  });
+
+  const closeAnimation = Animated.timing(translateY, {
+    duration: 50,
+    toValue: height,
+    useNativeDriver: true,
+  });
+
+  const handleDismiss = () => {
+    closeAnimation.start(() => onClose());
+  };
+
+  useEffect(() => {
+    if (visible) {
+      openAnimation.start();
+    }
+  }, [visible, openAnimation]);
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
+    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const keyboardDidShow = (event: KeyboardEvent) => {
+    Animated.timing(translateY, {
+      duration: 250,
+      toValue: -event.endCoordinates.height,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const keyboardDidHide = () => {
+    Animated.timing(translateY, {
+      duration: 250,
+      toValue: 0,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const handleUpdate = (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+    const translationY = Math.max(event.translationY, 0);
+    translateY.setValue(translationY);
+  };
+
+  const gesture = Gesture.Pan()
+    .onUpdate((event) => {
+      runOnJS(handleUpdate)(event);
+    })
+    .onEnd((event) => {
+      if (event.velocityY > 500 || event.translationY > height / 2) {
+        runOnJS(handleDismiss)();
+      } else {
+        runOnJS(openAnimation.start)();
+      }
+    });
+
+  return (
+    <Modal animationType='fade' onRequestClose={handleDismiss} transparent visible={visible}>
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <TouchableWithoutFeedback onPress={handleDismiss}>
+          <View style={[styles.overlay, { backgroundColor: overlay }]}>
+            <GestureDetector gesture={gesture}>
+              <Animated.View
+                style={[
+                  styles.container,
+                  {
+                    backgroundColor: white_snow,
+                    height,
+                    transform: [{ translateY }],
+                  },
+                ]}
+              >
+                <View style={[styles.handle, { backgroundColor: grey, width: windowWidth / 4 }]} />
+                <View style={styles.contentContainer}>{children}</View>
+              </Animated.View>
+            </GestureDetector>
+          </View>
+        </TouchableWithoutFeedback>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+  },
+  contentContainer: {
+    flex: 1,
+    marginTop: 8,
+  },
+  handle: {
+    alignSelf: 'center',
+    borderRadius: 4,
+    height: 4,
+    marginVertical: 8,
+  },
+  overlay: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+});

package/src/components/UIComponents/index.ts

@@ -0,0 +1,3 @@
+export * from './BottomSheetModal';
+export * from './ImageBackground';
+export * from './Spinner';

package/src/components/docs/data.js

@@ -11,8 +11,7 @@ client.connectUser(
 );
 
 export const channel = client.channel('messaging', 'general', {
-  image:
-    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg',
+  image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/195612/chat_avatar_01_green.jpg',
   name: 'Talk about the documentation',
 });
 
@@ -45,8 +44,7 @@ export const message = {
   attachments: [],
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
-  html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  html: '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
@@ -120,8 +118,7 @@ export const message = {
   user: {
     created_at: '2019-01-22T16:35:18.417456Z',
     id: 'thierry',
-    image:
-      'https://cdn.pixabay.com/photo/2014/03/25/16/54/user-297566__340.png',
+    image: 'https://cdn.pixabay.com/photo/2014/03/25/16/54/user-297566__340.png',
     last_active: '2019-01-25T09:23:47.108127-07:00',
     online: true,
     role: 'user',
@@ -148,17 +145,13 @@ export const messageWithImages = {
       type: 'image',
     },
     {
-      image_url:
-        'https://www.fujixpassion.com/wp-content/uploads/2016/01/Image-1-Title.jpg',
-      thumb_url:
-        'https://www.fujixpassion.com/wp-content/uploads/2016/01/Image-1-Title.jpg',
+      image_url: 'https://www.fujixpassion.com/wp-content/uploads/2016/01/Image-1-Title.jpg',
+      thumb_url: 'https://www.fujixpassion.com/wp-content/uploads/2016/01/Image-1-Title.jpg',
       type: 'image',
     },
     {
-      image_url:
-        'https://i-cdn.phonearena.com/images/articles/47012-image/photo2.jpg',
-      thumb_url:
-        'https://i-cdn.phonearena.com/images/articles/47012-image/photo2.jpg',
+      image_url: 'https://i-cdn.phonearena.com/images/articles/47012-image/photo2.jpg',
+      thumb_url: 'https://i-cdn.phonearena.com/images/articles/47012-image/photo2.jpg',
       type: 'image',
     },
   ],
@@ -238,14 +231,12 @@ export const messageWithImages = {
   user: {
     created_at: '2019-01-22T16:35:18.417456Z',
     id: 'thierry',
-    image:
-      'https://cdn.pixabay.com/photo/2014/03/25/16/54/user-297566__340.png',
+    image: 'https://cdn.pixabay.com/photo/2014/03/25/16/54/user-297566__340.png',
     last_active: '2019-01-25T09:23:47.108127-07:00',
     online: true,
     role: 'user',
     updated_at: '2019-01-25T16:23:47.052538Z',
   },
-  
 };
 
 export const messageWithUrlPreview = {
@@ -256,8 +247,7 @@ export const messageWithUrlPreview = {
       image_url:
         'https://images.unsplash.com/photo-1548256434-c7d2374b1077?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9',
       og_scrape_url: 'https://unsplash.com/photos/lxuB4abGzXc',
-      text:
-        'Download this photo in Addu City, Maldives by Ibrahim Shabil (@shabilphotos)',
+      text: 'Download this photo in Addu City, Maldives by Ibrahim Shabil (@shabilphotos)',
       thumb_url:
         'https://images.unsplash.com/photo-1548256434-c7d2374b1077?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyMDd9',
       title: 'Cosmic Home photo by Ibrahim Shabil (@shabilphotos) on Unsplash',
@@ -267,8 +257,7 @@ export const messageWithUrlPreview = {
   ],
   command: '',
   created_at: '2019-01-25T00:18:59.675Z',
-  html:
-    '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
+  html: '<p><a href="https://unsplash.com/photos/lxuB4abGzXc" rel="nofollow">https://unsplash.com/photos/lxuB4abGzXc</a></p>\n',
   id: 'thierry-e298f569-8745-407f-a02b-f75c0206612f',
   own_reactions: [
     {
@@ -342,8 +331,7 @@ export const messageWithUrlPreview = {
   user: {
     created_at: '2019-01-22T16:35:18.417456Z',
     id: 'thierry',
-    image:
-      'https://cdn.pixabay.com/photo/2014/03/25/16/54/user-297566__340.png',
+    image: 'https://cdn.pixabay.com/photo/2014/03/25/16/54/user-297566__340.png',
     last_active: '2019-01-25T09:23:47.108127-07:00',
     online: true,
     role: 'user',
@@ -370,8 +358,7 @@ export const thread = {
   ],
   command: '',
   created_at: '2019-01-25T21:25:45.306Z',
-  html:
-    '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
+  html: '<p>this place looks amazing: <a href="https://unsplash.com/photos/f3hDGOHptrM" rel="nofollow">https://unsplash.com/photos/f3hDGOHptrM</a></p>\n',
   id: 'thierry-ec4eac2b-1278-4f49-8b20-2ebcd76dace5',
   own_reactions: [],
   reaction_counts: null,
@@ -388,7 +375,6 @@ export const thread = {
     role: 'user',
     updated_at: '2019-01-25T21:27:39.606466Z',
   },
-  
 };
 
 export const threadMessages = [
@@ -527,7 +513,7 @@ export const MessageMock = {
 
 // Based on: https://javascript.info/promise-basics#example-loadscript
 function dynamicallyLoadScript(url) {
-  return new Promise(function(resolve, reject) {
+  return new Promise(function (resolve, reject) {
     const script = document.createElement('script');
     script.src = url;
     script.onload = resolve;

package/src/components/index.ts

@@ -110,7 +110,8 @@ export * from './Message/MessageSimple/MessageSimple';
 export * from './Message/MessageSimple/MessageStatus';
 export * from './Message/MessageSimple/MessageTextContainer';
 export * from './Message/MessageSimple/MessageTimestamp';
-export * from './Message/MessageSimple/ReactionList';
+export * from './Message/MessageSimple/ReactionList/ReactionListBottom';
+export * from './Message/MessageSimple/ReactionList/ReactionListTop';
 export * from './Message/MessageSimple/utils/renderText';
 export * from './Message/utils/messageActions';
 export * from '../utils/removeReservedFields';
@@ -151,20 +152,20 @@ export * from './MessageList/utils/getGroupStyles';
 export * from './MessageList/utils/getLastReceivedMessage';
 export * from './MessageList/utils/getReadStates';
 
-export * from './MessageOverlay/hooks/useMessageActionAnimation';
-export * from './MessageOverlay/MessageActionList';
-export * from './MessageOverlay/MessageActionListItem';
-export * from './MessageOverlay/MessageOverlay';
-export * from './MessageOverlay/OverlayBackdrop';
-export * from './MessageOverlay/OverlayReactions';
-export * from './MessageOverlay/OverlayReactionsAvatar';
-export * from './MessageOverlay/OverlayReactionList';
+export * from './MessageMenu/MessageActionList';
+export * from './MessageMenu/MessageActionListItem';
+export * from './MessageMenu/MessageMenu';
+export * from './MessageMenu/MessageUserReactions';
+export * from './MessageMenu/MessageUserReactionsAvatar';
+export * from './MessageMenu/MessageReactionPicker';
 
 export * from './ProgressControl/ProgressControl';
 
 export * from './Reply/Reply';
 
-export * from './Spinner/Spinner';
+export * from './UIComponents/BottomSheetModal';
+export * from './UIComponents/ImageBackground';
+export * from './UIComponents/Spinner';
 
 export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';

package/src/contexts/__tests__/index.test.tsx

@@ -9,7 +9,6 @@ import {
   useChannelsContext,
   useChatContext,
   useImageGalleryContext,
-  useMessageOverlayContext,
   useMessagesContext,
   useOverlayContext,
   useOwnCapabilitiesContext,
@@ -74,10 +73,6 @@ describe('contexts hooks in a component throws an error with message when not wr
       useImageGalleryContext,
       `The useImageGalleryContext hook was called outside the ImageGalleryContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider`,
     ],
-    [
-      useMessageOverlayContext,
-      `The useMessageOverlayContext hook was called outside the MessageOverlayContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider`,
-    ],
     [
       useMessagesContext,
       `The useMessagesContext hook was called outside of the MessagesContext provider. Make sure you have configured MessageList component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#message-list`,

package/src/contexts/activeChannelsRefContext/ActiveChannelsRefContext.tsx

@@ -1,9 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import type { UnknownType } from '../../types/types';
-
-import { getDisplayName } from '../utils/getDisplayName';
-
 type ActiveChannels = React.MutableRefObject<string[]>;
 
 const ActiveChannelsContext = React.createContext({ current: [] } as ActiveChannels);
@@ -17,26 +13,3 @@ export const ActiveChannelsProvider = ({
 
 export const useActiveChannelsRefContext = () =>
   useContext(ActiveChannelsContext) as unknown as ActiveChannels;
-
-/**
- * @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 withActiveChannelsRefContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withActiveChannelsRefContext = <P extends UnknownType>(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, 'activeChannels'>> => {
-  const WithActiveChannelsContextComponent = (props: Omit<P, 'activeChannels'>) => {
-    const ActiveChannelsContext = useActiveChannelsRefContext();
-
-    return <Component {...(props as P)} activeChannels={ActiveChannelsContext} />;
-  };
-  WithActiveChannelsContextComponent.displayName = `WithActiveChannelsContext${getDisplayName(
-    Component,
-  )}`;
-  return WithActiveChannelsContextComponent;
-};

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -2,10 +2,9 @@ import React, { PropsWithChildren, useContext, useEffect, useState } from 'react
 
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 
-import type { Asset, DefaultStreamChatGenerics, File } from '../../types/types';
+import type { Asset, File } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type AttachmentPickerIconProps = {
@@ -158,30 +157,3 @@ export const useAttachmentPickerContext = () => {
 
   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 withAttachmentPickerContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withAttachmentPickerContext = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<StreamChatGenerics>,
-): React.ComponentType<Omit<StreamChatGenerics, keyof AttachmentPickerContextValue>> => {
-  const WithAttachmentPickerContextComponent = (
-    props: Omit<StreamChatGenerics, keyof AttachmentPickerContextValue>,
-  ) => {
-    const attachmentPickerContext = useAttachmentPickerContext();
-
-    return <Component {...(props as StreamChatGenerics)} {...attachmentPickerContext} />;
-  };
-  WithAttachmentPickerContextComponent.displayName = `WithAttachmentPickerContext${getDisplayName(
-    Component as React.ComponentType,
-  )}`;
-  return WithAttachmentPickerContextComponent;
-};

package/src/contexts/channelContext/ChannelContext.tsx

@@ -5,10 +5,9 @@ import type { Channel, ChannelState } from 'stream-chat';
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
 import { StickyHeaderProps } from '../../components/MessageList/StickyHeader';
-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 ChannelContextValue<
@@ -78,24 +77,7 @@ export type ChannelContextValue<
    * @param messageId If undefined, channel will be loaded at most recent message.
    */
   loadChannelAroundMessage: ({ messageId }: { messageId?: string }) => Promise<void>;
-  /**
-   * @deprecated use loadChannelAroundMessage instead
-   *
-   * Loads channel at specific message
-   *
-   * @param messageId If undefined, channel will be loaded at most recent message.
-   * @param before Number of message to query before messageId
-   * @param after Number of message to query after messageId
-   */
-  loadChannelAtMessage: ({
-    after,
-    before,
-    messageId,
-  }: {
-    after?: number;
-    before?: number;
-    messageId?: string;
-  }) => Promise<void>;
+
   loading: boolean;
   /**
    * Custom loading indicator to override the Stream default
@@ -223,29 +205,3 @@ export const useChannelContext = <
 
   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 withChannelContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withChannelContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof ChannelContextValue<StreamChatGenerics>>> => {
-  const WithChannelContextComponent = (
-    props: Omit<P, keyof ChannelContextValue<StreamChatGenerics>>,
-  ) => {
-    const channelContext = useChannelContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...channelContext} />;
-  };
-  WithChannelContextComponent.displayName = `WithChannelContext${getDisplayName(Component)}`;
-  return WithChannelContextComponent;
-};

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -16,10 +16,9 @@ import type { ChannelPreviewUnreadCountProps } from '../../components/ChannelPre
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
 import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
-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 ChannelsContextValue<
@@ -240,29 +239,3 @@ export const useChannelsContext = <
 
   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 withChannelsContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withChannelsContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof ChannelsContextValue<StreamChatGenerics>>> => {
-  const WithChannelsContextComponent = (
-    props: Omit<P, keyof ChannelsContextValue<StreamChatGenerics>>,
-  ) => {
-    const channelsContext = useChannelsContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...channelsContext} />;
-  };
-  WithChannelsContextComponent.displayName = `WithChannelsContext${getDisplayName(Component)}`;
-  return WithChannelsContextComponent;
-};

package/src/contexts/channelsStateContext/ChannelsStateContext.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
 } from 'react';
 
-import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 import { ActiveChannelsProvider } from '../activeChannelsRefContext/ActiveChannelsRefContext';
 
 import type { ChannelContextValue } from '../channelContext/ChannelContext';
@@ -17,7 +17,6 @@ import type { ThreadContextValue } from '../threadContext/ThreadContext';
 import type { TypingContextValue } from '../typingContext/TypingContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
-import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelState<
@@ -198,31 +197,3 @@ export const useChannelsStateContext = <
 
   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 withChannelsStateContext the Props for the
- * wrapped component must be provided as the first generic.
- */
-export const withChannelsStateContext = <
-  P extends UnknownType,
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  Component: React.ComponentType<P>,
-): React.ComponentType<Omit<P, keyof ChannelsStateContextValue<StreamChatGenerics>>> => {
-  const WithChannelsStateContextComponent = (
-    props: Omit<P, keyof ChannelsStateContextValue<StreamChatGenerics>>,
-  ) => {
-    const channelsStateContext = useChannelsStateContext<StreamChatGenerics>();
-
-    return <Component {...(props as P)} {...channelsStateContext} />;
-  };
-  WithChannelsStateContextComponent.displayName = `WithChannelsStateContext${getDisplayName(
-    Component,
-  )}`;
-  return WithChannelsStateContextComponent;
-};

package/src/contexts/chatConfigContext/ChatConfigContext.tsx

@@ -0,0 +1,33 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+export type ChatConfigContextValue = {
+  /**
+   * This option allows you to specify a list of CDNs that offer image resizing.
+   */
+  resizableCDNHosts?: string[];
+};
+
+export const chatConfigContextDefaultvalue = {
+  resizableCDNHosts: ['.stream-io-cdn.com'],
+};
+
+export const ChatConfigContext = React.createContext<ChatConfigContextValue>(
+  chatConfigContextDefaultvalue,
+);
+
+export const ChatConfigProvider = ({
+  children,
+  value = chatConfigContextDefaultvalue,
+}: PropsWithChildren<{
+  value?: ChatConfigContextValue;
+}>) => (
+  <ChatConfigContext.Provider value={value as unknown as ChatConfigContextValue}>
+    {children}
+  </ChatConfigContext.Provider>
+);
+
+export const useChatConfigContext = () => {
+  const contextValue = useContext(ChatConfigContext) as unknown as ChatConfigContextValue;
+
+  return contextValue;
+};