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

package/src/components/Avatar/GroupAvatar.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import { Image, ImageProps, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
-
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
 const randomSvgBaseUrl = 'https://getstream.io/random_svg/';
 const streamCDN = 'stream-io-cdn.com';
@@ -41,7 +39,6 @@ export type GroupAvatarProps = {
  */
 export const GroupAvatar = (props: GroupAvatarProps) => {
   const { containerStyle, ImageComponent = Image, images, names, size, testID } = props;
-  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       groupAvatar: { container, image },
@@ -152,7 +149,6 @@ export const GroupAvatar = (props: GroupAvatarProps) => {
                         }`
                     : getResizedImageUrl({
                         height,
-                        resizableCDNHosts,
                         url,
                         width,
                       }),

package/src/components/Channel/Channel.tsx

@@ -80,12 +80,7 @@ import {
   ThumbsUpReaction,
   WutReaction,
 } from '../../icons';
-import {
-  FlatList as FlatListDefault,
-  isAudioRecorderAvailable,
-  isDocumentPickerAvailable,
-  isImagePickerAvailable,
-} from '../../native';
+import { FlatList as FlatListDefault, isImagePickerAvailable, pickDocument } from '../../native';
 import * as dbApi from '../../store/apis';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { addReactionToLocalState } from '../../utils/addReactionToLocalState';
@@ -139,8 +134,7 @@ import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Messag
 import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';
 import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
 import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
-import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageSimple/ReactionList/ReactionListBottom';
-import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageSimple/ReactionList/ReactionListTop';
+import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
 import { AudioRecorder as AudioRecorderDefault } from '../MessageInput/components/AudioRecorder/AudioRecorder';
@@ -172,13 +166,7 @@ import { ScrollToBottomButton as ScrollToBottomButtonDefault } from '../MessageL
 import { StickyHeader as StickyHeaderDefault } from '../MessageList/StickyHeader';
 import { TypingIndicator as TypingIndicatorDefault } from '../MessageList/TypingIndicator';
 import { TypingIndicatorContainer as TypingIndicatorContainerDefault } from '../MessageList/TypingIndicatorContainer';
-import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
-import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
-import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
-import { MessageReactionPicker as MessageReactionPickerDefault } from '../MessageMenu/MessageReactionPicker';
-import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageMenu/MessageUserReactions';
-import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
-import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
+import { OverlayReactionList as OverlayReactionListDefault } from '../MessageOverlay/OverlayReactionList';
 import { Reply as ReplyDefault } from '../Reply/Reply';
 
 const styles = StyleSheet.create({
@@ -220,6 +208,7 @@ const throttleOptions = {
   leading: true,
   trailing: true,
 };
+
 const debounceOptions = {
   leading: true,
   trailing: true,
@@ -267,7 +256,7 @@ export type ChannelPropsWithContext<
   Partial<
     Pick<
       MessagesContextValue<StreamChatGenerics>,
-      | 'additionalPressableProps'
+      | 'additionalTouchableProps'
       | 'Attachment'
       | 'AttachmentActions'
       | 'AudioAttachment'
@@ -289,6 +278,7 @@ export type ChannelPropsWithContext<
       | 'Giphy'
       | 'giphyVersion'
       | 'handleBan'
+      | 'handleBlock'
       | 'handleCopy'
       | 'handleDelete'
       | 'handleEdit'
@@ -307,8 +297,6 @@ export type ChannelPropsWithContext<
       | 'ImageLoadingIndicator'
       | 'markdownRules'
       | 'Message'
-      | 'MessageActionList'
-      | 'MessageActionListItem'
       | 'messageActions'
       | 'MessageAvatar'
       | 'MessageBounce'
@@ -320,7 +308,6 @@ export type ChannelPropsWithContext<
       | 'MessageFooter'
       | 'MessageHeader'
       | 'MessageList'
-      | 'MessageMenu'
       | 'MessagePinnedHeader'
       | 'MessageReplies'
       | 'MessageRepliesAvatars'
@@ -328,19 +315,13 @@ export type ChannelPropsWithContext<
       | 'MessageStatus'
       | 'MessageSystem'
       | 'MessageText'
-      | 'messageTextNumberOfLines'
       | 'MessageTimestamp'
-      | 'MessageUserReactions'
       | 'myMessageTheme'
       | 'onLongPressMessage'
       | 'onPressInMessage'
       | 'onPressMessage'
-      | 'MessageReactionPicker'
-      | 'MessageUserReactionsAvatar'
-      | 'MessageUserReactionsItem'
-      | 'ReactionListBottom'
-      | 'reactionListPosition'
-      | 'ReactionListTop'
+      | 'OverlayReactionList'
+      | 'ReactionList'
       | 'Reply'
       | 'shouldShowUnreadUnderlay'
       | 'ScrollToBottomButton'
@@ -350,6 +331,8 @@ export type ChannelPropsWithContext<
       | 'TypingIndicatorContainer'
       | 'UrlPreview'
       | 'VideoThumbnail'
+      | 'PollContent'
+      | 'hasCreatePoll'
     >
   > &
   Partial<Pick<ThreadContextValue<StreamChatGenerics>, 'allowThreadMessagesInChannel'>> & {
@@ -437,7 +420,7 @@ export type ChannelPropsWithContext<
      * Tells if channel is rendering a thread list
      */
     threadList?: boolean;
-  };
+  } & Partial<Pick<InputMessageInputContextValue, 'openPollCreationDialog' | 'CreatePollContent'>>;
 
 const ChannelWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -446,8 +429,8 @@ const ChannelWithContext = <
 ) => {
   const {
     additionalKeyboardAvoidingViewProps,
-    additionalPressableProps,
     additionalTextInputProps,
+    additionalTouchableProps,
     allowThreadMessagesInChannel = true,
     asyncMessagesLockDistance = 50,
     asyncMessagesMinimumPressDuration = 500,
@@ -459,7 +442,7 @@ const ChannelWithContext = <
     AudioAttachment = AudioAttachmentDefault,
     AudioAttachmentUploadPreview = AudioAttachmentDefault,
     AudioRecorder = AudioRecorderDefault,
-    audioRecordingEnabled = isAudioRecorderAvailable(),
+    audioRecordingEnabled = false,
     AudioRecordingInProgress = AudioRecordingInProgressDefault,
     AudioRecordingLockIndicator = AudioRecordingLockIndicatorDefault,
     AudioRecordingPreview = AudioRecordingPreviewDefault,
@@ -479,6 +462,7 @@ const ChannelWithContext = <
     CommandsButton = CommandsButtonDefault,
     compressImageQuality,
     CooldownTimer = CooldownTimerDefault,
+    CreatePollContent,
     DateHeader = DateHeaderDefault,
     deletedMessagesVisibilityType = 'always',
     disableIfFrozenChannel = true,
@@ -508,6 +492,7 @@ const ChannelWithContext = <
     giphyVersion = 'fixed_height',
     handleAttachButtonPress,
     handleBan,
+    handleBlock,
     handleCopy,
     handleDelete,
     handleEdit,
@@ -518,10 +503,11 @@ const ChannelWithContext = <
     handleReaction,
     handleRetry,
     handleThreadReply,
+    // If pickDocument isn't available, default to hiding the file picker
     hasCameraPicker = isImagePickerAvailable(),
     hasCommands = true,
-    // If pickDocument isn't available, default to hiding the file picker
-    hasFilePicker = isDocumentPickerAvailable(),
+    hasCreatePoll,
+    hasFilePicker = pickDocument !== null,
     hasImagePicker = true,
     hideDateSeparators = false,
     hideStickyDateHeader = false,
@@ -554,13 +540,11 @@ const ChannelWithContext = <
     mentionAllAppUsersEnabled = false,
     mentionAllAppUsersQuery,
     Message = MessageDefault,
-    MessageActionList = MessageActionListDefault,
-    MessageActionListItem = MessageActionListItemDefault,
     messageActions,
     MessageAvatar = MessageAvatarDefault,
     MessageBounce = MessageBounceDefault,
     MessageContent = MessageContentDefault,
-    messageContentOrder = ['quoted_reply', 'gallery', 'files', 'text', 'attachments'],
+    messageContentOrder = ['quoted_reply', 'gallery', 'files', 'poll', 'text', 'attachments'],
     MessageDeleted = MessageDeletedDefault,
     MessageEditedTimestamp = MessageEditedTimestampDefault,
     MessageError = MessageErrorDefault,
@@ -568,9 +552,7 @@ const ChannelWithContext = <
     MessageHeader,
     messageId,
     MessageList = MessageListDefault,
-    MessageMenu = MessageMenuDefault,
     MessagePinnedHeader = MessagePinnedHeaderDefault,
-    MessageReactionPicker = MessageReactionPickerDefault,
     MessageReplies = MessageRepliesDefault,
     MessageRepliesAvatars = MessageRepliesAvatarsDefault,
     messages,
@@ -578,11 +560,7 @@ const ChannelWithContext = <
     MessageStatus = MessageStatusDefault,
     MessageSystem = MessageSystemDefault,
     MessageText,
-    messageTextNumberOfLines = 5,
     MessageTimestamp = MessageTimestampDefault,
-    MessageUserReactions = MessageUserReactionsDefault,
-    MessageUserReactionsAvatar = MessageUserReactionsAvatarDefault,
-    MessageUserReactionsItem = MessageUserReactionsItemDefault,
     MoreOptionsButton = MoreOptionsButtonDefault,
     myMessageTheme,
     NetworkDownIndicator = NetworkDownIndicatorDefault,
@@ -592,10 +570,11 @@ const ChannelWithContext = <
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
+    openPollCreationDialog,
+    OverlayReactionList = OverlayReactionListDefault,
     overrideOwnCapabilities,
-    ReactionListBottom = ReactionListBottomDefault,
-    reactionListPosition = 'top',
-    ReactionListTop = ReactionListTopDefault,
+    PollContent,
+    ReactionList = ReactionListDefault,
     read,
     Reply = ReplyDefault,
     ScrollToBottomButton = ScrollToBottomButtonDefault,
@@ -649,8 +628,8 @@ const ChannelWithContext = <
   const [loadingMore, setLoadingMore] = useState(false);
 
   const [loadingMoreRecent, setLoadingMoreRecent] = useState(false);
-  const [quotedMessage, setQuotedMessage] = useState<MessageType<StreamChatGenerics> | undefined>(
-    undefined,
+  const [quotedMessage, setQuotedMessage] = useState<boolean | MessageType<StreamChatGenerics>>(
+    false,
   );
   const [thread, setThread] = useState<MessageType<StreamChatGenerics> | null>(threadProps || null);
   const [threadHasMore, setThreadHasMore] = useState(true);
@@ -680,6 +659,7 @@ const ChannelWithContext = <
   const uploadAbortControllerRef = useRef<Map<string, AbortController>>(new Map());
 
   const channelId = channel?.id || '';
+  const pollCreationEnabled = !channel.disconnected && !!channel?.id && channel?.getConfig()?.polls;
 
   useEffect(() => {
     const initChannel = async () => {
@@ -872,7 +852,13 @@ const ChannelWithContext = <
             setThreadMessages(updatedThreadMessages);
           }
 
-          if (channel && thread?.id && event.message?.id === thread.id && !threadInstance) {
+          if (
+            channel &&
+            thread?.id &&
+            event.message?.id === thread.id &&
+            !threadInstance &&
+            !thread.poll_id
+          ) {
             const updatedThread = channel.state.formatMessage(event.message);
             setThread(updatedThread);
           }
@@ -1114,6 +1100,28 @@ const ChannelWithContext = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetedMessage]);
 
+  /**
+   * @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
+   */
+  const loadChannelAtMessage: ChannelContextValue<StreamChatGenerics>['loadChannelAtMessage'] = ({
+    after = 2,
+    before = 30,
+    messageId,
+  }) =>
+    channelQueryCallRef.current(async () => {
+      await queryAtMessage({ after, before, messageId });
+
+      if (messageId) {
+        setTargetedMessage(messageId);
+      }
+    });
+
   /**
    * Utility method to mark that current set if latest into two.
    * With an empty latest set
@@ -1409,6 +1417,95 @@ const ChannelWithContext = <
       setHasNoMoreRecentMessagesToLoad(true);
     });
 
+  /**
+   * @deprecated
+   * Makes a query to load messages at particular message id.
+   *
+   * @param messageId Targeted message id
+   * @param before Number of messages to load before messageId
+   * @param after Number of messages to load after messageId
+   */
+  const queryAtMessage = async ({
+    after = 10,
+    before = 10,
+    messageId,
+  }: Parameters<ChannelContextValue<StreamChatGenerics>['loadChannelAtMessage']>[0]) => {
+    if (!channel) return;
+    channel.state.setIsUpToDate(false);
+    hasOverlappingRecentMessagesRef.current = false;
+    clearInterval(mergeSetsIntervalRef.current);
+    channel.state.clearMessages();
+    setMessages([]);
+    if (!messageId) {
+      await channel.query({
+        messages: {
+          limit: before,
+        },
+        watch: true,
+      });
+
+      channel.state.setIsUpToDate(true);
+      return;
+    }
+
+    await queryBeforeMessage(messageId, before);
+    await queryAfterMessage(messageId, after);
+  };
+
+  /**
+   * @deprecated
+   * Makes a query to load messages before particular message id.
+   *
+   * @param messageId Targeted message id
+   * @param limit Number of messages to load
+   */
+  const queryBeforeMessage = async (messageId: string, limit = 5) => {
+    if (!channel) return;
+
+    await channel.query({
+      messages: {
+        id_lt: messageId,
+        limit,
+      },
+      watch: true,
+    });
+
+    channel.state.setIsUpToDate(false);
+  };
+
+  /**
+   * @deprecated
+   * Makes a query to load messages later than particular message id.
+   *
+   * @param messageId Targeted message id
+   * @param limit Number of messages to load.
+   */
+  const queryAfterMessage = async (messageId: string, limit = 5) => {
+    if (!channel) return;
+    const state = await channel.query({
+      messages: {
+        id_gte: messageId,
+        limit,
+      },
+      watch: true,
+    });
+
+    if (state.messages.length < limit) {
+      // make current set as the latest
+      const currentSet = channel.state.messageSets.find((set) => set.isCurrent);
+      if (currentSet && !currentSet.isLatest) {
+        channel.state.messageSets = channel.state.messageSets.filter((set) => !set.isLatest);
+        currentSet.isLatest = true;
+      }
+      channel.state.setIsUpToDate(true);
+      setHasNoMoreRecentMessagesToLoad(true);
+    } else {
+      splitLatestCurrentMessageSetRef.current();
+      channel.state.setIsUpToDate(false);
+      setHasNoMoreRecentMessagesToLoad(false);
+    }
+  };
+
   // In case the channel is disconnected which may happen when channel is deleted,
   // underlying js client throws an error. Following function ensures that Channel component
   // won't result in error in such a case.
@@ -1465,6 +1562,8 @@ const ChannelWithContext = <
     attachments,
     mentioned_users,
     parent_id,
+    poll,
+    poll_id,
     text,
     ...extraFields
   }: Partial<StreamMessage<StreamChatGenerics>>) => {
@@ -1486,6 +1585,8 @@ const ChannelWithContext = <
           id: userId,
         })) || [],
       parent_id,
+      poll,
+      poll_id,
       reactions: [],
       status: MessageStatusTypes.SENDING,
       text,
@@ -1891,7 +1992,7 @@ const ChannelWithContext = <
     () => setEditing(undefined);
 
   const clearQuotedMessageState: InputMessageInputContextValue<StreamChatGenerics>['clearQuotedMessageState'] =
-    () => setQuotedMessage(undefined);
+    () => setQuotedMessage(false);
 
   /**
    * Removes the message from local state
@@ -2147,6 +2248,7 @@ const ChannelWithContext = <
     isOwner,
     lastRead,
     loadChannelAroundMessage,
+    loadChannelAtMessage,
     loading,
     LoadingIndicator,
     markRead,
@@ -2199,6 +2301,7 @@ const ChannelWithContext = <
     CommandsButton,
     compressImageQuality,
     CooldownTimer,
+    CreatePollContent,
     doDocUploadRequest,
     doImageUploadRequest,
     editing,
@@ -2224,6 +2327,7 @@ const ChannelWithContext = <
     MoreOptionsButton,
     numberOfLines,
     onChangeText,
+    openPollCreationDialog,
     quotedMessage,
     SendButton,
     sendImageAsync,
@@ -2251,7 +2355,7 @@ const ChannelWithContext = <
   });
 
   const messagesContext = useCreateMessagesContext({
-    additionalPressableProps,
+    additionalTouchableProps,
     Attachment,
     AttachmentActions,
     AudioAttachment,
@@ -2277,6 +2381,7 @@ const ChannelWithContext = <
     Giphy,
     giphyVersion,
     handleBan,
+    handleBlock,
     handleCopy,
     handleDelete,
     handleEdit,
@@ -2287,6 +2392,8 @@ const ChannelWithContext = <
     handleReaction,
     handleRetry,
     handleThreadReply,
+    hasCreatePoll:
+      hasCreatePoll === undefined ? pollCreationEnabled : hasCreatePoll && pollCreationEnabled,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
     initialScrollToFirstUnreadMessage: !messageId && initialScrollToFirstUnreadMessage, // when messageId is set, we scroll to the messageId instead of first unread
@@ -2296,8 +2403,6 @@ const ChannelWithContext = <
     legacyImageViewerSwipeBehaviour,
     markdownRules,
     Message,
-    MessageActionList,
-    MessageActionListItem,
     messageActions,
     MessageAvatar,
     MessageBounce,
@@ -2309,27 +2414,21 @@ const ChannelWithContext = <
     MessageFooter,
     MessageHeader,
     MessageList,
-    MessageMenu,
     MessagePinnedHeader,
-    MessageReactionPicker,
     MessageReplies,
     MessageRepliesAvatars,
     MessageSimple,
     MessageStatus,
     MessageSystem,
     MessageText,
-    messageTextNumberOfLines,
     MessageTimestamp,
-    MessageUserReactions,
-    MessageUserReactionsAvatar,
-    MessageUserReactionsItem,
     myMessageTheme,
     onLongPressMessage,
     onPressInMessage,
     onPressMessage,
-    ReactionListBottom,
-    reactionListPosition,
-    ReactionListTop,
+    OverlayReactionList,
+    PollContent,
+    ReactionList,
     removeMessage,
     Reply,
     retrySendMessage,