stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -12,8 +12,6 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { vw } from '../../../utils/utils';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -24,6 +22,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { vw } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
   absolute: { position: 'absolute' },
@@ -84,7 +83,7 @@ const ThreadFooterComponentWithContext = <
   const replyCount = thread.reply_count;
 
   return (
-    <View style={styles.threadHeaderContainer}>
+    <View style={styles.threadHeaderContainer} testID='thread-footer-component'>
       <View style={styles.messagePadding}>
         <Message groupStyles={['single']} message={thread} preventPress threadList />
       </View>
@@ -146,6 +145,18 @@ const areEqual = <
     prevThread?.reply_count === nextThread?.reply_count;
   if (!threadEqual) return false;
 
+  const latestReactionsEqual =
+    prevThread &&
+    nextThread &&
+    Array.isArray(prevThread.latest_reactions) &&
+    Array.isArray(nextThread.latest_reactions)
+      ? prevThread.latest_reactions.length === nextThread.latest_reactions.length &&
+        prevThread.latest_reactions.every(
+          ({ type }, index) => type === nextThread.latest_reactions?.[index].type,
+        )
+      : prevThread?.latest_reactions === nextThread?.latest_reactions;
+  if (!latestReactionsEqual) return false;
+
   return true;
 };
 

package/src/components/docs/ListProps.md

@@ -1,6 +1,6 @@
 All props available in the [ChannelList](#channellist) component are passed along to the List component. Additionally, the following props are provided to the List component:
 
-- `error` {boolean} Error in channels query, if any
+- `error` {boolean | Error} Error in channels query, if any
 - `channels` {array} List of channel objects
 - `forceUpdate` {number} Incremental number change to force update the FlatList
 - `hasNextPage` {boolean} Whether or not the FlatList has another page to render

package/src/components/index.ts

@@ -6,6 +6,7 @@ export * from './Attachment/FileAttachmentGroup';
 export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
+export * from './Attachment/utils/buildGallery/buildGallery';
 
 export * from './AttachmentPicker/AttachmentPicker';
 export * from './AttachmentPicker/components/AttachmentPickerBottomSheetHandle';
@@ -18,12 +19,9 @@ export * from './AttachmentPicker/components/ImageOverlaySelectedComponent';
 export * from './AttachmentPicker/components/ImageSelectorIcon';
 
 export * from './AutoCompleteInput/AutoCompleteInput';
-export * from './AutoCompleteInput/CommandsHeader';
-export * from './AutoCompleteInput/CommandsItem';
-export * from './AutoCompleteInput/EmojisHeader';
-export * from './AutoCompleteInput/EmojisItem';
-export * from './AutoCompleteInput/MentionsItem';
-export * from './AutoCompleteInput/SuggestionsList';
+export * from './AutoCompleteInput/AutoCompleteSuggestionHeader';
+export * from './AutoCompleteInput/AutoCompleteSuggestionItem';
+export * from './AutoCompleteInput/AutoCompleteSuggestionList';
 
 export * from './Avatar/Avatar';
 export * from './Avatar/GroupAvatar';
@@ -91,11 +89,14 @@ export * from './Indicators/LoadingIndicator';
 export * from './KeyboardCompatibleView/KeyboardCompatibleView';
 
 export * from './Message/hooks/useCreateMessageContext';
+export * from './Message/hooks/useMessageActions';
+export * from './Message/hooks/useMessageActionHandlers';
 export * from './Message/Message';
 export * from './Message/MessageSimple/MessageAvatar';
 export * from './Message/MessageSimple/MessageContent';
 export * from './Message/MessageSimple/MessageDeleted';
 export * from './Message/MessageSimple/MessageFooter';
+export * from './Message/MessageSimple/MessagePinnedHeader';
 export * from './Message/MessageSimple/MessageReplies';
 export * from './Message/MessageSimple/MessageRepliesAvatars';
 export * from './Message/MessageSimple/MessageSimple';
@@ -108,6 +109,7 @@ export * from './Message/utils/removeReservedFields';
 
 export * from './MessageInput/AttachButton';
 export * from './MessageInput/CommandsButton';
+export * from './MessageInput/CooldownTimer';
 export * from './MessageInput/FileUploadPreview';
 export * from './MessageInput/ImageUploadPreview';
 export * from './MessageInput/InputButtons';
@@ -136,9 +138,13 @@ export * from './MessageList/utils/getGroupStyles';
 export * from './MessageList/utils/getLastReceivedMessage';
 export * from './MessageList/utils/getReadStates';
 
-export * from './MessageOverlay/MessageActions';
+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 './Reply/Reply';

package/src/contexts/activeChannelsRefContext/ActiveChannelsRefContext.tsx

@@ -0,0 +1,32 @@
+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);
+
+export const ActiveChannelsProvider = ({
+  children,
+  value,
+}: PropsWithChildren<{
+  value: ActiveChannels;
+}>) => <ActiveChannelsContext.Provider value={value}>{children}</ActiveChannelsContext.Provider>;
+
+export const useActiveChannelsRefContext = () =>
+  useContext(ActiveChannelsContext) as unknown as ActiveChannels;
+
+export const withActiveChannelsRefContext = <P extends UnknownType>(
+  Component: React.ComponentType<P>,
+): React.FC<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

@@ -1,9 +1,8 @@
 import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Asset } from '../../native';
 import type { UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type AttachmentPickerIconProps = {
   numberOfImageUploads: number;

package/src/contexts/channelContext/ChannelContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Channel, ChannelState } from 'stream-chat';
 
 import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
@@ -16,11 +14,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
-
-export type ChannelConfig = {
-  readEventsEnabled?: boolean;
-  typingEventsEnabled?: boolean;
-};
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ChannelContextValue<
   At extends UnknownType = DefaultAttachmentType,
@@ -31,6 +25,29 @@ export type ChannelContextValue<
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType,
 > = {
+  /**
+   * Instance of channel object from stream-chat package.
+   *
+   * Please check the docs around how to create or query channel - https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript
+   *
+   * ```
+   * import { StreamChat, Channel } from 'stream-chat';
+   * import { Chat, Channel} from 'stream-chat-react-native';
+   *
+   * const client = StreamChat.getInstance('api_key');
+   * await client.connectUser('user_id', 'user_token');
+   * const channel = client.channel('messaging', 'channel_id');
+   * await channel.watch();
+   *
+   * <Chat client={client}>
+   *  <Channel channel={channel}>
+   *  </Channel>
+   * </Chat>
+   * ```
+   *
+   * @overrideType Channel
+   */
+  channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
   /**
    * Custom UI component to display empty state when channel has no messages.
    *
@@ -44,7 +61,7 @@ export type ChannelContextValue<
    * This is similar to reaction UX on [iMessage application](https://en.wikipedia.org/wiki/IMessage).
    */
   enforceUniqueReaction: boolean;
-  error: boolean;
+  error: boolean | Error;
   /**
    * When set to false, it will disable giphy command on MessageInput component.
    */
@@ -141,31 +158,9 @@ export type ChannelContextValue<
    * ```
    */
   watchers: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watchers'];
-  /**
-   * Instance of channel object from stream-chat package.
-   *
-   * Please check the docs around how to create or query channel - https://getstream.io/chat/docs/javascript/creating_channels/?language=javascript
-   *
-   * ```
-   * import { StreamChat, Channel } from 'stream-chat';
-   * import { Chat, Channel} from 'stream-chat-react-native';
-   *
-   * const client = StreamChat.getInstance('api_key');
-   * await client.connectUser('user_id', 'user_token');
-   * const channel = client.channel('messaging', 'channel_id');
-   * await channel.watch();
-   *
-   * <Chat client={client}>
-   *  <Channel channel={channel}>
-   *  </Channel>
-   * </Chat>
-   * ```
-   *
-   * @overrideType Channel
-   */
-  channel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
   disabled?: boolean;
   enableMessageGroupingByUser?: boolean;
+  isChannelActive?: boolean;
   lastRead?: Date;
   /**
    * Maximum time in milliseconds that should occur between messages
@@ -183,8 +178,9 @@ export type ChannelContextValue<
    * You will see a highlighted background for targetted message, when opened.
    */
   targetedMessage?: string;
+  threadList?: boolean;
   watcherCount?: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watcher_count'];
-} & ChannelConfig;
+};
 
 export const ChannelContext = React.createContext({} as ChannelContextValue);
 

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -1,12 +1,14 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { FlatListProps } from 'react-native';
 import type { FlatList } from 'react-native-gesture-handler';
+
+import type { ChannelPreviewMutedStatusProps } from 'src/components/ChannelPreview/ChannelPreviewMutedStatus';
+
 import type { Channel } from 'stream-chat';
 
 import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
+import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
 import type { ChannelAvatarProps } from '../../components/ChannelPreview/ChannelAvatar';
 import type { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
 import type { ChannelPreviewMessengerProps } from '../../components/ChannelPreview/ChannelPreviewMessenger';
@@ -26,6 +28,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ChannelsContextValue<
   At extends UnknownType = DefaultAttachmentType,
@@ -64,10 +67,6 @@ export type ChannelsContextValue<
    * Default: [EmptyStateIndicator](https://getstream.github.io/stream-chat-react-native/v3/#emptystateindicator)
    * */
   EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
-  /**
-   * Error in channels query, if any
-   */
-  error: boolean;
   /**
    * Custom loading indicator to display at bottom of the list, while loading further pages
    *
@@ -121,7 +120,7 @@ export type ChannelsContextValue<
   /**
    * Loads the next page of `channels`, which is present as a required prop
    */
-  loadNextPage: ((queryType?: string, retryCount?: number) => Promise<void>) | undefined;
+  loadNextPage: QueryChannels | undefined;
   /**
    * Max number to display within notification badge. Default: 255 and it cannot be higher than that for now due to backend limitations
    */
@@ -174,6 +173,10 @@ export type ChannelsContextValue<
    * Default: [Skeleton](https://getstream.github.io/stream-chat-react-native/v3/#skeleton)
    */
   Skeleton: React.ComponentType;
+  /**
+   * Error in channels query, if any
+   */
+  error?: Error;
   ListHeaderComponent?: React.ComponentType;
   /**
    * Function to set the currently active channel, acts as a bridge between ChannelList and Channel components
@@ -193,6 +196,14 @@ export type ChannelsContextValue<
    * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
    */
   PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  /**
+   * Custom UI component to render muted status.
+   *
+   * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
+   */
+  PreviewMutedStatus?: React.ComponentType<
+    ChannelPreviewMutedStatusProps<At, Ch, Co, Ev, Me, Re, Us>
+  >;
   /**
    * Custom UI component to render preview avatar.
    *

package/src/contexts/channelsStateContext/ChannelsStateContext.tsx

@@ -0,0 +1,286 @@
+import React, {
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../types/types';
+import { ActiveChannelsProvider } from '../activeChannelsRefContext/ActiveChannelsRefContext';
+
+import type { ChannelContextValue } from '../channelContext/ChannelContext';
+import type { PaginatedMessageListContextValue } from '../paginatedMessageListContext/PaginatedMessageListContext';
+import type { ThreadContextValue } from '../threadContext/ThreadContext';
+import type { TypingContextValue } from '../typingContext/TypingContext';
+import { getDisplayName } from '../utils/getDisplayName';
+
+export type ChannelState<
+  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,
+> = {
+  members: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['members'];
+  messages: PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>['messages'];
+  read: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['read'];
+  subscriberCount: number;
+  threadMessages: ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>['threadMessages'];
+  typing: TypingContextValue<At, Ch, Co, Ev, Me, Re, Us>['typing'];
+  watcherCount: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['watcherCount'];
+  watchers: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['watchers'];
+};
+
+type ChannelsState<
+  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,
+> = { [cid: string]: ChannelState<At, Ch, Co, Ev, Me, Re, Us> };
+
+export type Keys = keyof ChannelState;
+
+export type Payload<
+  Key extends Keys = Keys,
+  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,
+> = {
+  cid: string;
+  key: Key;
+  value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>[Key];
+};
+
+type SetStateAction<
+  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,
+> = { payload: Payload<Keys, At, Ch, Co, Ev, Me, Re, Us>; type: 'SET_STATE' };
+
+type IncreaseSubscriberCountAction = {
+  payload: { cid: string };
+  type: 'INCREASE_SUBSCRIBER_COUNT';
+};
+type DecreaseSubscriberCountAction = {
+  payload: { cid: string };
+  type: 'DECREASE_SUBSCRIBER_COUNT';
+};
+
+type Action<
+  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,
+> =
+  | SetStateAction<At, Ch, Co, Ev, Me, Re, Us>
+  | IncreaseSubscriberCountAction
+  | DecreaseSubscriberCountAction;
+
+export type ChannelsStateContextValue<
+  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,
+> = {
+  decreaseSubscriberCount: (value: { cid: string }) => void;
+  increaseSubscriberCount: (value: { cid: string }) => void;
+  setState: (value: Payload<Keys, At, Ch, Co, Ev, Me, Re, Us>) => void;
+  state: ChannelsState<At, Ch, Co, Ev, Me, Re, Us>;
+};
+
+type Reducer<
+  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,
+> = (
+  state: ChannelsState<At, Ch, Co, Ev, Me, Re, Us>,
+  action: Action<At, Ch, Co, Ev, Me, Re, Us>,
+) => ChannelsState<At, Ch, Co, Ev, Me, Re, Us>;
+
+function reducer(state: ChannelsState, action: Action) {
+  switch (action.type) {
+    case 'SET_STATE':
+      return {
+        ...state,
+        [action.payload.cid]: {
+          ...(state[action.payload.cid] || {}),
+          [action.payload.key]: action.payload.value,
+        },
+      };
+
+    case 'INCREASE_SUBSCRIBER_COUNT': {
+      const currentCount = state[action.payload.cid]?.subscriberCount ?? 0;
+      return {
+        ...state,
+        [action.payload.cid]: {
+          ...(state[action.payload.cid] || {}),
+          subscriberCount: currentCount + 1,
+        },
+      };
+    }
+
+    case 'DECREASE_SUBSCRIBER_COUNT': {
+      const currentCount = state[action.payload.cid]?.subscriberCount ?? 0;
+
+      // If there last subscribed Channel component unsubscribes, we clear the channel state.
+      if (currentCount <= 1) {
+        const stateShallowCopy = {
+          ...state,
+        };
+
+        delete stateShallowCopy[action.payload.cid];
+
+        return stateShallowCopy;
+      }
+
+      return {
+        ...state,
+        [action.payload.cid]: {
+          ...(state[action.payload.cid] || {}),
+          subscriberCount: currentCount - 1,
+        },
+      };
+    }
+    default:
+      throw new Error();
+  }
+}
+
+const ChannelsStateContext = React.createContext({
+  removeChannelState: () => {
+    // do nothing.
+  },
+  setState: () => {
+    // do nothing.
+  },
+  state: {},
+} as unknown as ChannelsStateContextValue);
+
+export const ChannelsStateProvider = <
+  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,
+>({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [state, dispatch] = useReducer(reducer as Reducer<At, Ch, Co, Ev, Me, Re, Us>, {});
+
+  const setState = useCallback((payload: Payload<Keys, At, Ch, Co, Ev, Me, Re, Us>) => {
+    dispatch({ payload, type: 'SET_STATE' });
+  }, []);
+
+  const increaseSubscriberCount = useCallback((payload: { cid: string }) => {
+    dispatch({ payload, type: 'INCREASE_SUBSCRIBER_COUNT' });
+  }, []);
+
+  const decreaseSubscriberCount = useCallback((payload: { cid: string }) => {
+    dispatch({ payload, type: 'DECREASE_SUBSCRIBER_COUNT' });
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      decreaseSubscriberCount,
+      increaseSubscriberCount,
+      setState,
+      state,
+    }),
+    [state],
+  );
+
+  const activeChannelsRef = useRef(Object.keys(state));
+
+  useEffect(() => {
+    activeChannelsRef.current = Object.keys(state);
+  }, [state]);
+
+  return (
+    <ChannelsStateContext.Provider value={value as unknown as ChannelsStateContextValue}>
+      <ActiveChannelsProvider value={activeChannelsRef}>{children}</ActiveChannelsProvider>
+    </ChannelsStateContext.Provider>
+  );
+};
+
+export const useChannelsStateContext = <
+  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,
+>() =>
+  useContext(ChannelsStateContext) as unknown as ChannelsStateContextValue<
+    At,
+    Ch,
+    Co,
+    Ev,
+    Me,
+    Re,
+    Us
+  >;
+
+export const withChannelsStateContext = <
+  P extends UnknownType,
+  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,
+>(
+  Component: React.ComponentType<P>,
+): React.FC<Omit<P, keyof ChannelsStateContextValue<At, Ch, Co, Ev, Me, Re, Us>>> => {
+  const WithChannelsStateContextComponent = (
+    props: Omit<P, keyof ChannelsStateContextValue<At, Ch, Co, Ev, Me, Re, Us>>,
+  ) => {
+    const channelsStateContext = useChannelsStateContext<At, Ch, Co, Ev, Me, Re, Us>();
+
+    return <Component {...(props as P)} {...channelsStateContext} />;
+  };
+  WithChannelsStateContextComponent.displayName = `WithChannelsStateContext${getDisplayName(
+    Component,
+  )}`;
+  return WithChannelsStateContextComponent;
+};