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

package/src/components/Indicators/LoadingIndicator.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { Spinner } from '../UIComponents/Spinner';
+import { Spinner } from '../Spinner/Spinner';
 
 type LoadingIndicatorWrapperProps = { text: string };
 

package/src/components/Message/Message.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
 
 import type { Attachment, UserResponse } from 'stream-chat';
@@ -19,10 +19,18 @@ import {
   useKeyboardContext,
 } from '../../contexts/keyboardContext/KeyboardContext';
 import { MessageContextValue, MessageProvider } from '../../contexts/messageContext/MessageContext';
+import {
+  MessageOverlayContextValue,
+  useMessageOverlayContext,
+} from '../../contexts/messageOverlayContext/MessageOverlayContext';
 import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import {
+  OverlayContextValue,
+  useOverlayContext,
+} from '../../contexts/overlayContext/OverlayContext';
 import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
@@ -31,7 +39,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import { isVideoPlayerAvailable, triggerHaptic } from '../../native';
+import { isVideoPackageAvailable, triggerHaptic } from '../../native';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import {
   hasOnlyEmojis,
@@ -45,6 +53,8 @@ import {
   isMessageWithStylesReadByAndDateSeparator,
   MessageType,
 } from '../MessageList/hooks/useMessageList';
+import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
+import { Poll as PollComponent } from '../Poll';
 
 export type TouchableEmitter =
   | 'fileAttachment'
@@ -74,7 +84,7 @@ export type FileAttachmentTouchableHandlerPayload<
   additionalInfo?: { attachment?: Attachment<StreamChatGenerics> };
 };
 
-export type PressableHandlerPayload = {
+export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
   event?: GestureResponderEvent;
 } & (
@@ -86,9 +96,9 @@ export type PressableHandlerPayload = {
   | FileAttachmentTouchableHandlerPayload
 );
 
-export type MessagePressableHandlerPayload<
+export type MessageTouchableHandlerPayload<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = PressableHandlerPayload & {
+> = TouchableHandlerPayload & {
   /**
    * Set of action handler functions for various message actions. You can use these functions to perform any action when give interaction occurs.
    */
@@ -113,6 +123,11 @@ export type MessageActionHandlers<
   pinMessage: () => Promise<void>;
   quotedReply: () => void;
   resendMessage: () => Promise<void>;
+  /**
+   * @deprecated
+   * TODO: This seems useless for the action handlers here so can be removed.
+   */
+  showMessageOverlay: () => void;
   toggleBanUser: () => Promise<void>;
   toggleMuteUser: () => Promise<void>;
   toggleReaction: (reactionType: string) => Promise<void>;
@@ -124,9 +139,7 @@ export type MessagePropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'enforceUniqueReaction' | 'members'> &
   Pick<KeyboardContextValue, 'dismissKeyboard'> &
-  Partial<
-    Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'handleReaction' | 'message'>
-  > &
+  Partial<Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'>> &
   Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
@@ -135,6 +148,7 @@ export type MessagePropsWithContext<
     | 'dismissKeyboardOnMessageTouch'
     | 'forceAlignMessages'
     | 'handleBan'
+    | 'handleBlock'
     | 'handleCopy'
     | 'handleDelete'
     | 'handleEdit'
@@ -146,7 +160,6 @@ export type MessagePropsWithContext<
     | 'handleRetry'
     | 'handleThreadReply'
     | 'isAttachmentEqual'
-    | 'MessageMenu'
     | 'messageActions'
     | 'messageContentOrder'
     | 'MessageBounce'
@@ -154,6 +167,7 @@ export type MessagePropsWithContext<
     | 'onLongPressMessage'
     | 'onPressInMessage'
     | 'onPressMessage'
+    | 'OverlayReactionList'
     | 'removeMessage'
     | 'deleteReaction'
     | 'retrySendMessage'
@@ -162,7 +176,10 @@ export type MessagePropsWithContext<
     | 'setQuotedMessageState'
     | 'supportedReactions'
     | 'updateMessage'
+    | 'PollContent'
   > &
+  Pick<MessageOverlayContextValue<StreamChatGenerics>, 'setData'> &
+  Pick<OverlayContextValue, 'setOverlay'> &
   Pick<ThreadContextValue<StreamChatGenerics>, 'openThread'> &
   Pick<TranslationContextValue, 't'> & {
     chatContext: ChatContextValue<StreamChatGenerics>;
@@ -173,6 +190,36 @@ export type MessagePropsWithContext<
     enableLongPress?: boolean;
     goToMessage?: (messageId: string) => void;
     isTargetedMessage?: boolean;
+    /**
+     * Array of allowed actions or null on message, this can also be a function returning the array.
+     * If all the actions need to be disabled an empty array should be provided as value of prop
+     */
+    /**
+     * You can call methods available on the Message
+     * component such as handleEdit, handleDelete, handleAction etc.
+     *
+     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
+     *
+     * By default, we show the overlay with all the message actions on long press.
+     *
+     * @param message Message object which was long pressed
+     * @param event   Event object for onLongPress event
+     **/
+    onLongPress?: (payload: Partial<MessageTouchableHandlerPayload<StreamChatGenerics>>) => void;
+
+    /**
+     * You can call methods available on the Message
+     * component such as handleEdit, handleDelete, handleAction etc.
+     *
+     * Source - [Message](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/Message.tsx)
+     *
+     * By default, we will dismiss the keyboard on press.
+     *
+     * @param message Message object which was long pressed
+     * @param event   Event object for onLongPress event
+     * */
+    onPress?: (payload: Partial<MessageTouchableHandlerPayload<StreamChatGenerics>>) => void;
+    onPressIn?: (payload: Partial<MessageTouchableHandlerPayload<StreamChatGenerics>>) => void;
     /**
      * Handler to open the thread on message. This is callback for touch event for replies button.
      *
@@ -193,11 +240,9 @@ const MessageWithContext = <
 >(
   props: MessagePropsWithContext<StreamChatGenerics>,
 ) => {
-  const [messageOverlayVisible, setMessageOverlayVisible] = useState(false);
-  const [isErrorInMessage, setIsErrorInMessage] = useState(false);
-  const [showMessageReactions, setShowMessageReactions] = useState(true);
   const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
   const [isEditedMessageOpen, setIsEditedMessageOpen] = useState(false);
+  const isMessageTypeDeleted = props.message.type === 'deleted';
 
   const {
     channel,
@@ -212,6 +257,7 @@ const MessageWithContext = <
     goToMessage,
     groupStyles = ['bottom'],
     handleBan,
+    handleBlock,
     handleCopy,
     handleDelete,
     handleEdit,
@@ -229,20 +275,26 @@ const MessageWithContext = <
     messageActions: messageActionsProp = defaultMessageActions,
     MessageBounce,
     messageContentOrder: messageContentOrderProp,
-    MessageMenu,
     messagesContext,
     MessageSimple,
+    onLongPress: onLongPressProp,
     onLongPressMessage: onLongPressMessageProp,
+    onPress: onPressProp,
+    onPressIn: onPressInProp,
     onPressInMessage: onPressInMessageProp,
     onPressMessage: onPressMessageProp,
     onThreadSelect,
     openThread,
+    OverlayReactionList,
+    PollContent,
     preventPress,
     removeMessage,
     retrySendMessage,
     selectReaction,
     sendReaction,
+    setData,
     setEditingState,
+    setOverlay,
     setQuotedMessageState,
     showAvatar,
     showMessageStatus,
@@ -253,26 +305,14 @@ const MessageWithContext = <
     threadList = false,
     updateMessage,
   } = props;
-  const isMessageTypeDeleted = message.type === 'deleted';
   const { client } = chatContext;
   const {
     theme: {
       colors: { targetedMessageBackground },
-      messageSimple: { targetedMessageContainer, unreadUnderlayColor },
-      screenPadding,
+      messageSimple: { targetedMessageContainer, targetedMessageUnderlay, unreadUnderlayColor },
     },
   } = useTheme();
 
-  const showMessageOverlay = async (showMessageReactions = false) => {
-    await dismissKeyboard();
-    setShowMessageReactions(showMessageReactions);
-    setMessageOverlayVisible(true);
-  };
-
-  const dismissOverlay = () => {
-    setMessageOverlayVisible(false);
-  };
-
   const actionsEnabled =
     message.type === 'regular' && message.status === MessageStatusTypes.RECEIVED;
 
@@ -309,7 +349,6 @@ const MessageWithContext = <
     }
     const quotedMessage = message.quoted_message as MessageType<StreamChatGenerics>;
     if (error) {
-      setIsErrorInMessage(true);
       /**
        * If its a Blocked message, we don't do anything as per specs.
        */
@@ -323,7 +362,7 @@ const MessageWithContext = <
         setIsBounceDialogOpen(true);
         return;
       }
-      showMessageOverlay();
+      showMessageOverlay(true, true);
     } else if (quotedMessage) {
       onPressQuotedMessage(quotedMessage);
     }
@@ -353,7 +392,7 @@ const MessageWithContext = <
             } else if (
               cur.type === FileTypes.Video &&
               !cur.og_scrape_url &&
-              isVideoPlayerAvailable()
+              isVideoPackageAvailable()
             ) {
               acc.videos.push({
                 image_url: cur.asset_url,
@@ -415,6 +454,8 @@ const MessageWithContext = <
         return !!attachments.files.length;
       case 'gallery':
         return !!attachments.images.length || !!attachments.videos.length;
+      case 'poll':
+        return !!message.poll_id;
       case 'text':
       default:
         return !!message.text;
@@ -478,6 +519,7 @@ const MessageWithContext = <
 
   const {
     banUser,
+    blockUser,
     copyMessage,
     deleteMessage,
     editMessage,
@@ -494,9 +536,9 @@ const MessageWithContext = <
     client,
     deleteMessage: deleteMessageFromContext,
     deleteReaction,
-    dismissOverlay,
     enforceUniqueReaction,
     handleBan,
+    handleBlock,
     handleCopy,
     handleDelete,
     handleEdit,
@@ -515,38 +557,82 @@ const MessageWithContext = <
     selectReaction,
     sendReaction,
     setEditingState,
+    setOverlay,
     setQuotedMessageState,
     supportedReactions,
     t,
     updateMessage,
   });
 
-  // const { userLanguage } = useTranslationContext();
-  const isThreadMessage = threadList || !!message.parent_id;
-
-  const messageActions =
-    typeof messageActionsProp !== 'function'
-      ? messageActionsProp
-      : messageActionsProp({
-          banUser,
-          copyMessage,
-          deleteMessage,
-          dismissOverlay,
-          editMessage,
-          error: isErrorInMessage,
-          flagMessage,
-          isMyMessage,
-          isThreadMessage,
-          message,
-          muteUser,
-          ownCapabilities,
-          pinMessage,
-          quotedReply,
-          retry,
-          showMessageReactions,
-          threadReply,
-          unpinMessage,
-        });
+  const { userLanguage } = useTranslationContext();
+
+  // TODO: Can be removed in V6 and from here completely once it becomes baseline.
+  const PollWrapper = useCallback(() => {
+    const poll = message?.poll_id ? client.polls.fromState(message.poll_id) : undefined;
+    return message?.poll_id && poll ? (
+      <PollComponent<StreamChatGenerics> message={message} poll={poll} PollContent={PollContent} />
+    ) : null;
+  }, [PollContent, client, message]);
+
+  const showMessageOverlay = async (isMessageActionsVisible = true, error = errorOrFailed) => {
+    await dismissKeyboard();
+
+    const isThreadMessage = threadList || !!message.parent_id;
+
+    const dismissOverlay = () => setOverlay('none');
+
+    const messageActions =
+      typeof messageActionsProp !== 'function'
+        ? messageActionsProp
+        : messageActionsProp({
+            banUser,
+            blockUser,
+            copyMessage,
+            deleteMessage,
+            dismissOverlay,
+            editMessage,
+            error,
+            flagMessage,
+            isMessageActionsVisible,
+            isMyMessage,
+            isThreadMessage,
+            message,
+            messageReactions: isMessageActionsVisible === false,
+            muteUser,
+            ownCapabilities,
+            pinMessage,
+            quotedReply,
+            retry,
+            threadReply,
+            unpinMessage,
+          });
+
+    setData({
+      alignment,
+      chatContext,
+      clientId: client.userID,
+      files: attachments.files,
+      groupStyles,
+      handleReaction: ownCapabilities.sendReaction ? handleReaction : undefined,
+      images: attachments.images,
+      message,
+      messageActions: messageActions?.filter(Boolean) as MessageActionListItemProps[] | undefined,
+      messageContext: { ...messageContext, preventPress: true },
+      messageReactionTitle: !error && !isMessageActionsVisible ? t('Message Reactions') : undefined,
+      messagesContext: { ...messagesContext, messageContentOrder },
+      onlyEmojis,
+      otherAttachments: attachments.other,
+      OverlayReactionList,
+      ownCapabilities,
+      Poll: PollWrapper,
+      supportedReactions,
+      threadList,
+      userLanguage,
+      videos: attachments.videos,
+    });
+
+    setOverlay('message');
+  };
 
   const actionHandlers: MessageActionHandlers<StreamChatGenerics> = {
     copyMessage: handleCopyMessage,
@@ -556,6 +642,7 @@ const MessageWithContext = <
     pinMessage: handleTogglePinMessage,
     quotedReply: handleQuotedReplyMessage,
     resendMessage: handleResendMessage,
+    showMessageOverlay,
     threadReply: handleThreadReply,
     toggleBanUser: handleToggleBanUser,
     toggleMuteUser: handleToggleMuteUser,
@@ -563,27 +650,54 @@ const MessageWithContext = <
     unpinMessage: handleTogglePinMessage,
   };
 
-  const onLongPress = () => {
-    if (hasAttachmentActions || isBlockedMessage(message) || !enableLongPress) return;
-    // If a message is bounced, on long press the message bounce options modal should open.
-    if (isBouncedMessage(message)) {
-      setIsBounceDialogOpen(true);
-      return;
-    }
-    triggerHaptic('impactMedium');
-    showMessageOverlay();
-  };
+  const onLongPressMessage =
+    hasAttachmentActions || isBlockedMessage(message)
+      ? () => null
+      : onLongPressMessageProp
+      ? (payload?: TouchableHandlerPayload) =>
+          onLongPressMessageProp({
+            actionHandlers,
+            defaultHandler: payload?.defaultHandler || showMessageOverlay,
+            emitter: payload?.emitter || 'message',
+            event: payload?.event,
+            message,
+          })
+      : onLongPressProp
+      ? (payload?: TouchableHandlerPayload) =>
+          onLongPressProp({
+            actionHandlers,
+            defaultHandler: payload?.defaultHandler || showMessageOverlay,
+            emitter: payload?.emitter || 'message',
+            event: payload?.event,
+          })
+      : enableLongPress
+      ? () => {
+          // If a message is bounced, on long press the message bounce options modal should open.
+          if (isBouncedMessage(message)) {
+            setIsBounceDialogOpen(true);
+            return;
+          }
+          triggerHaptic('impactMedium');
+          showMessageOverlay(true);
+        }
+      : () => null;
 
   const messageContext = useCreateMessageContext({
     actionsEnabled,
     alignment,
     channel,
-    dismissOverlay,
     files: attachments.files,
     goToMessage,
     groupStyles,
     handleAction,
-    handleReaction,
+    handleCopyMessage,
+    handleDeleteMessage,
+    handleEditMessage,
+    handleFlagMessage,
+    handleQuotedReplyMessage,
+    handleResendMessage,
+    handleToggleBanUser,
+    handleToggleMuteUser,
     handleToggleReaction,
     hasReactions,
     images: attachments.images,
@@ -595,24 +709,7 @@ const MessageWithContext = <
     message,
     messageContentOrder,
     myMessageTheme: messagesContext.myMessageTheme,
-    onLongPress: (payload) => {
-      const onLongPressArgs = {
-        actionHandlers,
-        defaultHandler: payload?.defaultHandler || onLongPress,
-        emitter: payload?.emitter || 'message',
-        event: payload?.event,
-        message,
-      };
-
-      const handleOnLongPress = () => {
-        if (onLongPressMessageProp) return onLongPressMessageProp(onLongPressArgs);
-        if (payload?.defaultHandler) return payload.defaultHandler();
-
-        return onLongPress();
-      };
-
-      handleOnLongPress();
-    },
+    onLongPress: onLongPressMessage,
     onlyEmojis,
     onOpenThread,
     onPress: (payload) => {
@@ -626,6 +723,7 @@ const MessageWithContext = <
       };
 
       const handleOnPress = () => {
+        if (onPressProp) return onPressProp(onPressArgs);
         if (onPressMessageProp) return onPressMessageProp(onPressArgs);
         if (payload.defaultHandler) return payload.defaultHandler();
 
@@ -634,18 +732,23 @@ const MessageWithContext = <
 
       handleOnPress();
     },
-    onPressIn: onPressInMessageProp
-      ? (payload) => {
-          if (onPressInMessageProp)
-            return onPressInMessageProp({
+    onPressIn:
+      onPressInProp || onPressInMessageProp
+        ? (payload) => {
+            const onPressInArgs = {
               actionHandlers,
               defaultHandler: payload.defaultHandler,
               emitter: payload.emitter || 'message',
               event: payload.event,
               message,
-            });
-        }
-      : null,
+            };
+            const handleOnpressIn = () => {
+              if (onPressInProp) return onPressInProp(onPressInArgs);
+              if (onPressInMessageProp) return onPressInMessageProp(onPressInArgs);
+            };
+            handleOnpressIn();
+          }
+        : null,
     otherAttachments: attachments.other,
     preventPress,
     reactions,
@@ -660,7 +763,15 @@ const MessageWithContext = <
   if (!(isMessageTypeDeleted || messageContentOrder.length)) return null;
 
   return (
-    <MessageProvider value={messageContext}>
+    <View
+      style={[
+        message.pinned && {
+          ...targetedMessageContainer,
+          backgroundColor: targetedMessageBackground,
+        },
+      ]}
+      testID='message-wrapper'
+    >
       <View
         style={[
           style,
@@ -671,27 +782,18 @@ const MessageWithContext = <
       >
         <View
           style={[
-            { marginTop: 2, paddingHorizontal: screenPadding },
-            (isTargetedMessage || message.pinned) && !isMessageTypeDeleted
-              ? { backgroundColor: targetedMessageBackground, ...targetedMessageContainer }
+            isTargetedMessage
+              ? { backgroundColor: targetedMessageBackground, ...targetedMessageUnderlay }
               : {},
           ]}
-          testID='message-wrapper'
         >
-          <MessageSimple />
-          {isBounceDialogOpen && <MessageBounce setIsBounceDialogOpen={setIsBounceDialogOpen} />}
-          {messageOverlayVisible ? (
-            <MessageMenu
-              dismissOverlay={dismissOverlay}
-              handleReaction={ownCapabilities.sendReaction ? handleReaction : undefined}
-              messageActions={messageActions}
-              showMessageReactions={showMessageReactions}
-              visible={messageOverlayVisible}
-            />
-          ) : null}
+          <MessageProvider value={messageContext}>
+            <MessageSimple />
+            {isBounceDialogOpen && <MessageBounce setIsBounceDialogOpen={setIsBounceDialogOpen} />}
+          </MessageProvider>
         </View>
       </View>
-    </MessageProvider>
+    </View>
   );
 };
 
@@ -837,9 +939,7 @@ const MemoizedMessage = React.memo(MessageWithContext, areEqual) as typeof Messa
 
 export type MessageProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<
-  Omit<MessagePropsWithContext<StreamChatGenerics>, 'groupStyles' | 'handleReaction' | 'message'>
-> &
+> = Partial<Omit<MessagePropsWithContext<StreamChatGenerics>, 'groupStyles' | 'message'>> &
   Pick<MessagePropsWithContext<StreamChatGenerics>, 'groupStyles' | 'message'>;
 
 /**
@@ -856,7 +956,9 @@ export const Message = <
   const { channel, enforceUniqueReaction, members } = useChannelContext<StreamChatGenerics>();
   const chatContext = useChatContext<StreamChatGenerics>();
   const { dismissKeyboard } = useKeyboardContext();
+  const { setData } = useMessageOverlayContext<StreamChatGenerics>();
   const messagesContext = useMessagesContext<StreamChatGenerics>();
+  const { setOverlay } = useOverlayContext();
   const { openThread } = useThreadContext<StreamChatGenerics>();
   const { t } = useTranslationContext();
 
@@ -871,6 +973,8 @@ export const Message = <
         members,
         messagesContext,
         openThread,
+        setData,
+        setOverlay,
         t,
       }}
       {...props}

package/src/components/Message/MessageSimple/MessageAvatar.tsx

@@ -92,7 +92,6 @@ export const MessageAvatar = <
   const { alignment, lastGroupMessage, message, showAvatar } =
     useMessageContext<StreamChatGenerics>();
   const { ImageComponent } = useChatContext<StreamChatGenerics>();
-
   return (
     <MemoizedMessageAvatar
       {...{