stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

package/src/components/ThreadList/ThreadList.tsx

@@ -18,7 +18,11 @@ import { EmptyStateIndicator } from '../Indicators/EmptyStateIndicator';
 import { LoadingIndicator } from '../Indicators/LoadingIndicator';
 
 const selector = (nextValue: ThreadManagerState) =>
-  [nextValue.threads, nextValue.pagination.isLoading, nextValue.pagination.isLoadingNext] as const;
+  ({
+    isLoading: nextValue.pagination.isLoading,
+    isLoadingNext: nextValue.pagination.isLoadingNext,
+    threads: nextValue.threads,
+  } as const);
 
 export type ThreadListProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -107,7 +111,7 @@ export const ThreadList = (props: ThreadListProps) => {
     };
   }, [client]);
 
-  const [threads, isLoading, isLoadingNext] = useStateStore(client.threads.state, selector);
+  const { isLoading, isLoadingNext, threads } = useStateStore(client.threads.state, selector);
 
   return (
     <ThreadsProvider

package/src/components/ThreadList/ThreadListItem.tsx

@@ -211,17 +211,18 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
 
   const selector = useCallback(
     (nextValue: ThreadState) =>
-      [
-        nextValue.replies.at(-1),
-        (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
-        nextValue.parentMessage,
-        nextValue.channel,
-        nextValue.deletedAt,
-      ] as const,
+      ({
+        channel: nextValue.channel,
+        deletedAt: nextValue.deletedAt,
+        lastReply: nextValue.replies.at(-1),
+        ownUnreadMessageCount:
+          (client.userID && nextValue.read[client.userID]?.unreadMessageCount) || 0,
+        parentMessage: nextValue.parentMessage,
+      } as const),
     [client],
   );
 
-  const [lastReply, ownUnreadMessageCount, parentMessage, channel, deletedAt] = useStateStore(
+  const { channel, deletedAt, lastReply, ownUnreadMessageCount, parentMessage } = useStateStore(
     thread.state,
     selector,
   );

package/src/components/ThreadList/ThreadListUnreadBanner.tsx

@@ -19,7 +19,8 @@ const styles = StyleSheet.create({
   },
 });
 
-const selector = (nextValue: ThreadManagerState) => [nextValue.unseenThreadIds] as const;
+const selector = (nextValue: ThreadManagerState) =>
+  ({ unseenThreadIds: nextValue.unseenThreadIds } as const);
 
 export const ThreadListUnreadBanner = () => {
   const { client } = useChatContext();
@@ -29,7 +30,7 @@ export const ThreadListUnreadBanner = () => {
       threadListUnreadBanner,
     },
   } = useTheme();
-  const [unseenThreadIds] = useStateStore(client.threads.state, selector);
+  const { unseenThreadIds } = useStateStore(client.threads.state, selector);
   if (!unseenThreadIds.length) {
     return null;
   }

package/src/components/docs/data.js

@@ -11,7 +11,8 @@ 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',
 });
 
@@ -44,7 +45,8 @@ 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: [
     {
@@ -118,7 +120,8 @@ 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',
@@ -145,13 +148,17 @@ 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',
     },
   ],
@@ -231,12 +238,14 @@ 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 = {
@@ -247,7 +256,8 @@ 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',
@@ -257,7 +267,8 @@ 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: [
     {
@@ -331,7 +342,8 @@ 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',
@@ -358,7 +370,8 @@ 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,
@@ -375,6 +388,7 @@ export const thread = {
     role: 'user',
     updated_at: '2019-01-25T21:27:39.606466Z',
   },
+  
 };
 
 export const threadMessages = [
@@ -513,7 +527,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,8 +110,7 @@ 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/ReactionListBottom';
-export * from './Message/MessageSimple/ReactionList/ReactionListTop';
+export * from './Message/MessageSimple/ReactionList';
 export * from './Message/MessageSimple/utils/renderText';
 export * from './Message/utils/messageActions';
 export * from '../utils/removeReservedFields';
@@ -152,20 +151,21 @@ export * from './MessageList/utils/getGroupStyles';
 export * from './MessageList/utils/getLastReceivedMessage';
 export * from './MessageList/utils/getReadStates';
 
-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 './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 './ProgressControl/ProgressControl';
+export * from './Poll';
 
 export * from './Reply/Reply';
 
-export * from './UIComponents/BottomSheetModal';
-export * from './UIComponents/ImageBackground';
-export * from './UIComponents/Spinner';
+export * from './Spinner/Spinner';
 
 export * from './Thread/Thread';
 export * from './Thread/components/ThreadFooterComponent';

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

@@ -9,6 +9,7 @@ import {
   useChannelsContext,
   useChatContext,
   useImageGalleryContext,
+  useMessageOverlayContext,
   useMessagesContext,
   useOverlayContext,
   useOwnCapabilitiesContext,
@@ -73,6 +74,10 @@ 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,5 +1,9 @@
 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);
@@ -13,3 +17,26 @@ 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,9 +2,10 @@ import React, { PropsWithChildren, useContext, useEffect, useState } from 'react
 
 import { BottomSheetHandleProps } from '@gorhom/bottom-sheet';
 
-import type { Asset, File } from '../../types/types';
+import type { Asset, DefaultStreamChatGenerics, 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 = {
@@ -58,6 +59,12 @@ export type AttachmentPickerContextValue = {
    */
   CameraSelectorIcon: React.ComponentType<AttachmentPickerIconProps>;
   closePicker: () => void;
+  /**
+   * Custom UI component for the poll creation icon.
+   *
+   * **Default: ** [CreatePollIcon](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/CreatePollIcon.tsx)
+   */
+  CreatePollIcon: React.ComponentType;
   /**
    * Custom UI component for [file selector icon](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png)
    *
@@ -97,7 +104,12 @@ export const AttachmentPickerProvider = ({
 }: PropsWithChildren<{
   value?: Pick<
     AttachmentPickerContextValue,
-    'CameraSelectorIcon' | 'closePicker' | 'FileSelectorIcon' | 'ImageSelectorIcon' | 'openPicker'
+    | 'CameraSelectorIcon'
+    | 'closePicker'
+    | 'CreatePollIcon'
+    | 'FileSelectorIcon'
+    | 'ImageSelectorIcon'
+    | 'openPicker'
   > &
     Partial<Pick<AttachmentPickerContextValue, 'bottomInset' | 'topInset'>>;
 }>) => {
@@ -157,3 +169,30 @@ 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,9 +5,10 @@ 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 } from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelContextValue<
@@ -77,7 +78,24 @@ 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
@@ -205,3 +223,29 @@ 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,9 +16,10 @@ 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 } from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChannelsContextValue<
@@ -239,3 +240,29 @@ 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 } from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { ActiveChannelsProvider } from '../activeChannelsRefContext/ActiveChannelsRefContext';
 
 import type { ChannelContextValue } from '../channelContext/ChannelContext';
@@ -17,6 +17,7 @@ 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<
@@ -197,3 +198,31 @@ 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/chatContext/ChatContext.tsx

@@ -3,9 +3,10 @@ import type { ImageProps } from 'react-native';
 
 import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type ChatContextValue<
@@ -64,6 +65,10 @@ export type ChatContextValue<
    * @overrideType Channel
    */
   channel?: Channel<StreamChatGenerics>;
+  /**
+   * This option allows you to specify a list of CDNs that offer image resizing.
+   */
+  resizableCDNHosts?: string[];
 };
 
 export const ChatContext = React.createContext(DEFAULT_BASE_CONTEXT_VALUE as ChatContextValue);
@@ -94,3 +99,27 @@ export const useChatContext = <
 
   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 withChatContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withChatContext = <
+  P extends UnknownType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<P>,
+): React.ComponentType<Omit<P, keyof ChatContextValue<StreamChatGenerics>>> => {
+  const WithChatContextComponent = (props: Omit<P, keyof ChatContextValue<StreamChatGenerics>>) => {
+    const chatContext = useChatContext<StreamChatGenerics>();
+
+    return <Component {...(props as P)} {...chatContext} />;
+  };
+  WithChatContextComponent.displayName = `WithChatContext${getDisplayName(Component)}`;
+  return WithChatContextComponent;
+};

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -4,6 +4,7 @@ import type { MessageType } from '../../components/MessageList/hooks/useMessageL
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 type SelectedMessage = {
@@ -63,3 +64,31 @@ export const useImageGalleryContext = <
 
   return contextValue as ImageGalleryContextValue<StreamChatGenerics>;
 };
+
+/**
+ * @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 withImageGalleryContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withImageGalleryContext = <
+  P extends UnknownType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<P>,
+): React.ComponentType<Omit<P, keyof ImageGalleryContextValue<StreamChatGenerics>>> => {
+  const WithImageGalleryContextComponent = (
+    props: Omit<P, keyof ImageGalleryContextValue<StreamChatGenerics>>,
+  ) => {
+    const imageGalleryContext = useImageGalleryContext<StreamChatGenerics>();
+
+    return <Component {...(props as P)} {...imageGalleryContext} />;
+  };
+  WithImageGalleryContextComponent.displayName = `WithImageGalleryContext${getDisplayName(
+    Component,
+  )}`;
+  return WithImageGalleryContextComponent;
+};

package/src/contexts/index.ts

@@ -1,7 +1,6 @@
 export * from './attachmentPickerContext/AttachmentPickerContext';
 export * from './channelContext/ChannelContext';
 export * from './channelsContext/ChannelsContext';
-export * from './chatConfigContext/ChatConfigContext';
 export * from './chatContext/ChatContext';
 export * from './debugContext/DebugContext';
 export * from './imageGalleryContext/ImageGalleryContext';
@@ -10,6 +9,7 @@ export * from './messageContext/MessageContext';
 export * from './messageInputContext/hooks/useCreateMessageInputContext';
 export * from './messageInputContext/hooks/useMessageDetailsForState';
 export * from './messageInputContext/MessageInputContext';
+export * from './messageOverlayContext/MessageOverlayContext';
 export * from './messagesContext/MessagesContext';
 export * from './paginatedMessageListContext/PaginatedMessageListContext';
 export * from './overlayContext/OverlayContext';
@@ -24,3 +24,4 @@ export * from './threadsContext/ThreadListItemContext';
 export * from './translationContext/TranslationContext';
 export * from './typingContext/TypingContext';
 export * from './utils/getDisplayName';
+export * from './pollContext';