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

package/src/contexts/messageOverlayContext/MessageOverlayContext.tsx

@@ -0,0 +1,148 @@
+import React, { PropsWithChildren, useContext } from 'react';
+
+import type { ImageProps } from 'react-native';
+
+import { Attachment, TranslationLanguages } from 'stream-chat';
+
+import { useResettableState } from './hooks/useResettableState';
+
+import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
+import type { MessageActionListProps } from '../../components/MessageOverlay/MessageActionList';
+import type {
+  MessageActionListItemProps,
+  MessageActionType,
+} from '../../components/MessageOverlay/MessageActionListItem';
+import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
+import type { OverlayReactionsProps } from '../../components/MessageOverlay/OverlayReactions';
+import type { OverlayReactionsAvatarProps } from '../../components/MessageOverlay/OverlayReactionsAvatar';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+import type { ReactionData } from '../../utils/utils';
+import type { ChatContextValue } from '../chatContext/ChatContext';
+import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
+import type { MessagesContextValue } from '../messagesContext/MessagesContext';
+import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+
+import { getDisplayName } from '../utils/getDisplayName';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+export type MessageOverlayData<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  alignment?: Alignment;
+  chatContext?: ChatContextValue<StreamChatGenerics>;
+  clientId?: string;
+  files?: Attachment<StreamChatGenerics>[];
+  groupStyles?: GroupType[];
+  handleReaction?: (reactionType: string) => Promise<void>;
+  ImageComponent?: React.ComponentType<ImageProps>;
+  images?: Attachment<StreamChatGenerics>[];
+  message?: MessageType<StreamChatGenerics>;
+  messageActions?: MessageActionType[];
+  messageContext?: MessageContextValue<StreamChatGenerics>;
+  messageReactionTitle?: string;
+  messagesContext?: MessagesContextValue<StreamChatGenerics>;
+  onlyEmojis?: boolean;
+  otherAttachments?: Attachment<StreamChatGenerics>[];
+  OverlayReactionList?: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
+  ownCapabilities?: OwnCapabilitiesContextValue;
+  Poll?: React.ComponentType;
+  supportedReactions?: ReactionData[];
+  threadList?: boolean;
+  userLanguage?: TranslationLanguages;
+  videos?: Attachment<StreamChatGenerics>[];
+};
+
+export type MessageOverlayContextValue<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  /**
+   * Custom UI component for rendering [message actions](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/2.png) in overlay.
+   *
+   * **Default** [MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/MessageActions.tsx)
+   */
+  MessageActionList: React.ComponentType<MessageActionListProps<StreamChatGenerics>>;
+  MessageActionListItem: React.ComponentType<MessageActionListItemProps<StreamChatGenerics>>;
+  /**
+   * Custom UI component for rendering [reaction selector](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/2.png) in overlay (which shows up on long press on message).
+   *
+   * **Default** [OverlayReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/OverlayReactionList.tsx)
+   */
+  OverlayReactionList: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
+  /**
+   * Custom UI component for rendering [reactions list](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/2.png), in overlay (which shows up on long press on message).
+   *
+   * **Default** [OverlayReactions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageOverlay/OverlayReactions.tsx)
+   */
+  OverlayReactions: React.ComponentType<OverlayReactionsProps<StreamChatGenerics>>;
+  OverlayReactionsAvatar: React.ComponentType<OverlayReactionsAvatarProps>;
+  reset: () => void;
+  setData: React.Dispatch<React.SetStateAction<MessageOverlayData<StreamChatGenerics>>>;
+  data?: MessageOverlayData<StreamChatGenerics>;
+};
+
+export const MessageOverlayContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as MessageOverlayContextValue,
+);
+
+export const MessageOverlayProvider = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  children,
+  value,
+}: PropsWithChildren<{
+  value?: MessageOverlayContextValue<StreamChatGenerics>;
+}>) => {
+  const messageOverlayContext = useResettableState(value);
+  return (
+    <MessageOverlayContext.Provider
+      value={messageOverlayContext as unknown as MessageOverlayContextValue}
+    >
+      {children}
+    </MessageOverlayContext.Provider>
+  );
+};
+
+export const useMessageOverlayContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => {
+  const contextValue = useContext(
+    MessageOverlayContext,
+  ) as unknown as MessageOverlayContextValue<StreamChatGenerics>;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      `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`,
+    );
+  }
+
+  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 withMessageOverlayContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withMessageOverlayContext = <
+  P extends UnknownType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<P>,
+): React.ComponentType<Omit<P, keyof MessageOverlayContextValue<StreamChatGenerics>>> => {
+  const WithMessageOverlayContextComponent = (
+    props: Omit<P, keyof MessageOverlayContextValue<StreamChatGenerics>>,
+  ) => {
+    const messageContext = useMessageOverlayContext<StreamChatGenerics>();
+
+    return <Component {...(props as P)} {...messageContext} />;
+  };
+  WithMessageOverlayContextComponent.displayName = `WithMessageOverlayContext${getDisplayName(
+    Component,
+  )}`;
+  return WithMessageOverlayContextComponent;
+};

package/src/contexts/messageOverlayContext/hooks/useResettableState.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Button, Text } from 'react-native';
+
+import { render, screen, userEvent, waitFor } from '@testing-library/react-native';
+
+import { useResettableState } from './useResettableState';
+
+const TestComponent = () => {
+  const { data, reset, setData } = useResettableState(0);
+
+  return (
+    <>
+      <Text testID='value'>{`${data}`}</Text>
+      <Button
+        onPress={() => {
+          setData(data + 1);
+        }}
+        testID='increment'
+        title='Super useful incrementer'
+      />
+      <Button
+        onPress={() => {
+          reset();
+        }}
+        testID='reset'
+        title='Oh no, go back!'
+      />
+    </>
+  );
+};
+
+const waitForOptions = {
+  timeout: 1000,
+};
+
+test('useResettableState can be reset to its initial state', async () => {
+  const user = userEvent.setup();
+  render(<TestComponent />);
+
+  await waitFor(() => expect(screen.getByTestId('value').children[0]).toBe('0'), waitForOptions);
+
+  user.press(screen.getByTestId('increment'));
+  await waitFor(() => expect(screen.getByTestId('value').children[0]).toBe('1'), waitForOptions);
+
+  user.press(screen.getByTestId('reset'));
+  await waitFor(() => expect(screen.getByTestId('value').children[0]).toBe('0'), waitForOptions);
+});

package/src/contexts/messageOverlayContext/hooks/useResettableState.ts

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
+
+/**
+ * Wrapper around useState that provides a `reset`
+ * function to reset the state to its initial value.
+ *
+ * Will not set state after being unmounted.
+ * */
+export const useResettableState = <T>(values: T) => {
+  const [data, setData] = useState(values);
+  const isMounted = useIsMountedRef();
+
+  const reset = () => {
+    if (isMounted.current) {
+      setData(values);
+    }
+  };
+
+  return { data, reset, setData };
+};

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -1,9 +1,10 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { PressableProps } from 'react-native';
+import type { TouchableOpacityProps } from 'react-native';
 
 import type { Attachment, ChannelState, MessageResponse } from 'stream-chat';
 
+import { PollContentProps } from '../../components';
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
 import type { AttachmentActionsProps } from '../../components/Attachment/AttachmentActions';
 import type { AudioAttachmentProps } from '../../components/Attachment/AudioAttachment';
@@ -17,8 +18,8 @@ import type { ImageLoadingFailedIndicatorProps } from '../../components/Attachme
 import type { ImageLoadingIndicatorProps } from '../../components/Attachment/ImageLoadingIndicator';
 import type { VideoThumbnailProps } from '../../components/Attachment/VideoThumbnail';
 import type {
-  MessagePressableHandlerPayload,
   MessageProps,
+  MessageTouchableHandlerPayload,
 } from '../../components/Message/Message';
 import type { MessageAvatarProps } from '../../components/Message/MessageSimple/MessageAvatar';
 import type { MessageBounceProps } from '../../components/Message/MessageSimple/MessageBounce';
@@ -34,8 +35,7 @@ import type { MessageSimpleProps } from '../../components/Message/MessageSimple/
 import type { MessageStatusProps } from '../../components/Message/MessageSimple/MessageStatus';
 import type { MessageTextProps } from '../../components/Message/MessageSimple/MessageTextContainer';
 import { MessageTimestampProps } from '../../components/Message/MessageSimple/MessageTimestamp';
-import { ReactionListBottomProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListBottom';
-import type { ReactionListTopProps } from '../../components/Message/MessageSimple/ReactionList/ReactionListTop';
+import type { ReactionListProps } from '../../components/Message/MessageSimple/ReactionList';
 import type { MarkdownRules } from '../../components/Message/MessageSimple/utils/renderText';
 import type { MessageActionsParams } from '../../components/Message/utils/messageActions';
 import type { DateHeaderProps } from '../../components/MessageList/DateHeader';
@@ -46,19 +46,11 @@ import type { MessageSystemProps } from '../../components/MessageList/MessageSys
 import type { ScrollToBottomButtonProps } from '../../components/MessageList/ScrollToBottomButton';
 import { TypingIndicatorContainerProps } from '../../components/MessageList/TypingIndicatorContainer';
 import type { getGroupStyles } from '../../components/MessageList/utils/getGroupStyles';
-import { MessageActionListProps } from '../../components/MessageMenu/MessageActionList';
-import type {
-  MessageActionListItemProps,
-  MessageActionType,
-} from '../../components/MessageMenu/MessageActionListItem';
-import { MessageMenuProps } from '../../components/MessageMenu/MessageMenu';
-import type { MessageReactionPickerProps } from '../../components/MessageMenu/MessageReactionPicker';
-import { MessageUserReactionsProps } from '../../components/MessageMenu/MessageUserReactions';
-import { MessageUserReactionsAvatarProps } from '../../components/MessageMenu/MessageUserReactionsAvatar';
-import { MessageUserReactionsItemProps } from '../../components/MessageMenu/MessageUserReactionsItem';
+import type { MessageActionType } from '../../components/MessageOverlay/MessageActionListItem';
+import type { OverlayReactionListProps } from '../../components/MessageOverlay/OverlayReactionList';
 import type { ReplyProps } from '../../components/Reply/Reply';
-import { FlatList } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { FlatList } from '../../native';
+import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
 import type { Alignment } from '../messageContext/MessageContext';
 import type { SuggestionCommand } from '../suggestionsContext/SuggestionsContext';
@@ -66,9 +58,16 @@ import type { DeepPartial } from '../themeContext/ThemeContext';
 import type { Theme } from '../themeContext/utils/theme';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-export type MessageContentType = 'attachments' | 'files' | 'gallery' | 'quoted_reply' | 'text';
+export type MessageContentType =
+  | 'attachments'
+  | 'files'
+  | 'gallery'
+  | 'quoted_reply'
+  | 'poll'
+  | 'text';
 export type DeletedMessagesVisibilityType = 'always' | 'never' | 'receiver' | 'sender';
 
 export type MessagesContextValue<
@@ -119,7 +118,7 @@ export type MessagesContextValue<
    * Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/FileIcon.tsx
    */
   FileAttachmentIcon: React.ComponentType<FileIconProps>;
-  FlatList: typeof FlatList | undefined;
+  FlatList: typeof FlatList;
   /**
    * UI component to display image attachments
    * Defaults to: [Gallery](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Attachment/Gallery.tsx)
@@ -161,18 +160,6 @@ export type MessagesContextValue<
   InlineUnreadIndicator: React.ComponentType;
 
   Message: React.ComponentType<MessageProps<StreamChatGenerics>>;
-  /**
-   * Custom UI component for rendering Message actions in message menu.
-   *
-   * **Default** [MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageActionList.tsx)
-   */
-  MessageActionList: React.ComponentType<MessageActionListProps>;
-  /**
-   * Custom UI component for rendering Message action item in message menu.
-   *
-   * **Default** [MessageActionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageActionList.tsx)
-   */
-  MessageActionListItem: React.ComponentType<MessageActionListItemProps>;
   /**
    * UI component for MessageAvatar
    * Defaults to: [MessageAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/MessageAvatar.tsx)
@@ -208,18 +195,11 @@ export type MessagesContextValue<
    */
   MessageFooter: React.ComponentType<MessageFooterProps<StreamChatGenerics>>;
   MessageList: React.ComponentType<MessageListProps<StreamChatGenerics>>;
-  /**
-   * UI component for MessageMenu
-   */
-  MessageMenu: React.ComponentType<MessageMenuProps<StreamChatGenerics>>;
   /**
    * Custom message pinned component
    */
   MessagePinnedHeader: React.ComponentType<MessagePinnedHeaderProps<StreamChatGenerics>>;
-  /**
-   * UI component for MessageReactionPicker
-   */
-  MessageReactionPicker: React.ComponentType<MessageReactionPickerProps<StreamChatGenerics>>;
+
   /**
    * UI component for MessageReplies
    * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageSimple/MessageReplies.tsx)
@@ -251,24 +231,14 @@ export type MessagesContextValue<
    */
   MessageTimestamp: React.ComponentType<MessageTimestampProps>;
   /**
-   * Custom UI component for rendering user reactions, in message menu.
-   *
-   * **Default** [MessageUserReactions](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageUserReactions.tsx)
-   */
-  MessageUserReactions: React.ComponentType<MessageUserReactionsProps<StreamChatGenerics>>;
-  /**
-   * Custom UI component for rendering user reactions avatar under `MessageUserReactionsItem`, in message menu.
-   *
-   * **Default** [MessageUserReactionsAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageUserReactionsAvatar.tsx)
+   * UI component for OverlayReactionList
    */
-  MessageUserReactionsAvatar: React.ComponentType<MessageUserReactionsAvatarProps>;
+  OverlayReactionList: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
   /**
-   * Custom UI component for rendering individual user reactions item under `MessageUserReactions`, in message menu.
-   *
-   * **Default** [MessageUserReactionsItem](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageMenu/MessageUserReactionsItem.tsx)
+   * UI component for ReactionList
+   * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionList.tsx)
    */
-  MessageUserReactionsItem: React.ComponentType<MessageUserReactionsItemProps>;
-
+  ReactionList: React.ComponentType<ReactionListProps<StreamChatGenerics>>;
   removeMessage: (message: { id: string; parent_id?: string }) => void;
   /**
    * UI component for Reply
@@ -286,7 +256,8 @@ export type MessagesContextValue<
   ScrollToBottomButton: React.ComponentType<ScrollToBottomButtonProps>;
   sendReaction: (type: string, messageId: string) => Promise<void>;
   setEditingState: (message?: MessageType<StreamChatGenerics>) => void;
-  setQuotedMessageState: (message?: MessageType<StreamChatGenerics>) => void;
+  setQuotedMessageState: (message: MessageType<StreamChatGenerics> | boolean) => void;
+  supportedReactions: ReactionData[];
   /**
    * UI component for TypingIndicator
    * Defaults to: [TypingIndicator](https://getstream.io/chat/docs/sdk/reactnative/ui-components/typing-indicator/)
@@ -312,12 +283,12 @@ export type MessagesContextValue<
   UrlPreview: React.ComponentType<CardProps<StreamChatGenerics>>;
   VideoThumbnail: React.ComponentType<VideoThumbnailProps>;
   /**
-   * Provide any additional props for `Pressable` which wraps inner MessageContent component here.
-   * Please check docs for Pressable for supported props - https://reactnative.dev/docs/pressable#props
+   * Provide any additional props for `TouchableOpacity` which wraps inner MessageContent component here.
+   * Please check docs for TouchableOpacity for supported props - https://reactnative.dev/docs/touchableopacity#props
    *
    * @overrideType Object
    */
-  additionalPressableProps?: Omit<PressableProps, 'style'>;
+  additionalTouchableProps?: Omit<TouchableOpacityProps, 'style'>;
   /**
    * Custom UI component to override default cover (between Header and Footer) of Card component.
    * Accepts the same props as Card component.
@@ -357,6 +328,12 @@ export type MessagesContextValue<
    * @param message
    */
   handleBan?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
+  /**
+   * @deprecated
+   * Handler to access when a block user action is invoked.
+   * @param message
+   */
+  handleBlock?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
   /** Handler to access when a copy message action is invoked */
   handleCopy?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
   /** Handler to access when a delete message action is invoked */
@@ -380,6 +357,8 @@ export type MessagesContextValue<
   handleRetry?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
   /** Handler to access when a thread reply action is invoked */
   handleThreadReply?: (message: MessageType<StreamChatGenerics>) => Promise<void>;
+  /** A flag specifying whether the poll creation button is available or not. */
+  hasCreatePoll?: boolean;
   /** Handler to deal with custom memoization logic of Attachment */
   isAttachmentEqual?: (
     prevAttachment: Attachment<StreamChatGenerics>,
@@ -446,10 +425,7 @@ export type MessagesContextValue<
   MessageHeader?: React.ComponentType<MessageFooterProps<StreamChatGenerics>>;
   /** Custom UI component for message text */
   MessageText?: React.ComponentType<MessageTextProps<StreamChatGenerics>>;
-  /**
-   * The number of lines of the message text to be displayed
-   */
-  messageTextNumberOfLines?: number;
+
   /**
    * Theme provided only to messages that are the current users
    */
@@ -480,7 +456,7 @@ export type MessagesContextValue<
    * />
    * ```
    */
-  onLongPressMessage?: (payload: MessagePressableHandlerPayload<StreamChatGenerics>) => void;
+  onLongPressMessage?: (payload: MessageTouchableHandlerPayload<StreamChatGenerics>) => void;
   /**
    * Add onPressIn handler for attachments. You have access to payload of that handler as param:
    *
@@ -507,7 +483,7 @@ export type MessagesContextValue<
    * />
    * ```
    */
-  onPressInMessage?: (payload: MessagePressableHandlerPayload<StreamChatGenerics>) => void;
+  onPressInMessage?: (payload: MessageTouchableHandlerPayload<StreamChatGenerics>) => void;
   /**
    * Override onPress handler for message. You have access to payload of that handler as param:
    *
@@ -534,24 +510,12 @@ export type MessagesContextValue<
    * />
    * ```
    */
-  onPressMessage?: (payload: MessagePressableHandlerPayload<StreamChatGenerics>) => void;
-
-  /**
-   * UI component for ReactionListTop
-   * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionList.tsx)
-   */
-  ReactionListBottom?: React.ComponentType<ReactionListBottomProps<StreamChatGenerics>>;
-  /**
-   * The position of the reaction list in the message
-   */
-  reactionListPosition?: 'top' | 'bottom';
-
+  onPressMessage?: (payload: MessageTouchableHandlerPayload<StreamChatGenerics>) => void;
   /**
-   * UI component for ReactionListTop
-   * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Reaction/ReactionList.tsx)
-   */
-  ReactionListTop?: React.ComponentType<ReactionListTopProps<StreamChatGenerics>>;
-
+   * Override the entire content of the Poll component. The component has full access to the
+   * usePollState() and usePollContext() hooks.
+   * */
+  PollContent?: React.ComponentType<PollContentProps>;
   /**
    * Full override of the reaction function on Message and Message Overlay
    *
@@ -565,10 +529,6 @@ export type MessagesContextValue<
    * Boolean to enable/disable the message underlay background when there are unread messages in the Message List.
    */
   shouldShowUnreadUnderlay?: boolean;
-  /**
-   * The supported reactions that the user can use to react to messages.
-   */
-  supportedReactions?: ReactionData[];
 
   targetedMessage?: string;
 };
@@ -605,3 +565,29 @@ export const useMessagesContext = <
 
   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 withMessagesContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withMessagesContext = <
+  P extends UnknownType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<P>,
+): React.ComponentType<Omit<P, keyof MessagesContextValue<StreamChatGenerics>>> => {
+  const WithMessagesContextComponent = (
+    props: Omit<P, keyof MessagesContextValue<StreamChatGenerics>>,
+  ) => {
+    const messagesContext = useMessagesContext<StreamChatGenerics>();
+
+    return <Component {...(props as P)} {...messagesContext} />;
+  };
+  WithMessagesContextComponent.displayName = `WithMessagesContext${getDisplayName(Component)}`;
+  return WithMessagesContextComponent;
+};

package/src/contexts/overlayContext/OverlayContext.tsx

@@ -6,16 +6,19 @@ import type { Attachment } from 'stream-chat';
 import type { AttachmentPickerProps } from '../../components/AttachmentPicker/AttachmentPicker';
 import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
 
+import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { Streami18n } from '../../utils/i18n/Streami18n';
 import type { AttachmentPickerContextValue } from '../attachmentPickerContext/AttachmentPickerContext';
+import type { MessageOverlayContextValue } from '../messageOverlayContext/MessageOverlayContext';
 import type { DeepPartial } from '../themeContext/ThemeContext';
 import type { Theme } from '../themeContext/utils/theme';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
+import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-export type Overlay = 'alert' | 'gallery' | 'none';
+export type Overlay = 'alert' | 'gallery' | 'message' | 'none';
 
 export type OverlayContextValue = {
   overlay: Overlay;
@@ -40,22 +43,46 @@ export type OverlayProviderProps<
       | 'attachmentSelectionBarHeight'
       | 'bottomInset'
       | 'CameraSelectorIcon'
+      | 'CreatePollIcon'
       | 'FileSelectorIcon'
       | 'ImageSelectorIcon'
       | 'topInset'
     >
   > &
-  ImageGalleryCustomComponents<StreamChatGenerics> & {
+  ImageGalleryCustomComponents<StreamChatGenerics> &
+  Partial<
+    Pick<
+      MessageOverlayContextValue<StreamChatGenerics>,
+      | 'MessageActionList'
+      | 'MessageActionListItem'
+      | 'OverlayReactionList'
+      | 'OverlayReactions'
+      | 'OverlayReactionsAvatar'
+    >
+  > & {
     autoPlayVideo?: boolean;
     /**
      * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
      * */
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
+    error?: boolean | Error;
     giphyVersion?: keyof NonNullable<Attachment['giphy']>;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */
     i18nInstance?: Streami18n;
     imageGalleryGridHandleHeight?: number;
     imageGalleryGridSnapPoints?: [string | number, string | number];
+    isMyMessage?: boolean;
+    isThreadMessage?: boolean;
+    message?: MessageType<StreamChatGenerics>;
+    /**
+     * @deprecated use the following instead:
+     *  messageActions={(params) => {
+     *    const actions = messageActions({ ...params, isMessageActionsVisible: false });
+     *    return actions;
+     *  }}
+     */
+    messageReactions?: boolean;
+    messageTextNumberOfLines?: number;
     numberOfImageGalleryGridColumns?: number;
     openPicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     value?: Partial<OverlayContextValue>;
@@ -72,3 +99,30 @@ export const useOverlayContext = () => {
 
   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 withOverlayContext the Props for the
+ * wrapped component must be provided as the first generic.
+ */
+export const withOverlayContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  Component: React.ComponentType<StreamChatGenerics>,
+): React.ComponentType<Omit<StreamChatGenerics, keyof OverlayContextValue>> => {
+  const WithOverlayContextComponent = (
+    props: Omit<StreamChatGenerics, keyof OverlayContextValue>,
+  ) => {
+    const overlayContext = useOverlayContext();
+
+    return <Component {...(props as StreamChatGenerics)} {...overlayContext} />;
+  };
+  WithOverlayContextComponent.displayName = `WithOverlayContext${getDisplayName(
+    Component as React.ComponentType,
+  )}`;
+  return WithOverlayContextComponent;
+};