stream-chat-react-native-core 3.8.3-next.1 → 3.9.0-next.2

package/src/components/Attachment/Gallery.tsx

@@ -98,19 +98,23 @@ export type GalleryPropsWithContext<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType,
-> = Pick<ImageGalleryContextValue, 'setImage'> &
+> = Pick<ImageGalleryContextValue, 'setImage' | 'setImages'> &
   Pick<
     MessageContextValue<At, Ch, Co, Ev, Me, Re, Us>,
     | 'alignment'
     | 'groupStyles'
     | 'images'
+    | 'message'
     | 'onLongPress'
     | 'onPress'
     | 'onPressIn'
     | 'preventPress'
     | 'threadList'
   > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'additionalTouchableProps'> &
+  Pick<
+    MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour'
+  > &
   Pick<OverlayContextValue, 'setBlurType' | 'setOverlay'> & {
     hasThreadReplies?: boolean;
     messageId?: string;
@@ -134,6 +138,8 @@ const GalleryWithContext = <
     groupStyles,
     hasThreadReplies,
     images,
+    legacyImageViewerSwipeBehaviour,
+    message,
     messageId,
     messageText,
     onLongPress,
@@ -142,6 +148,7 @@ const GalleryWithContext = <
     preventPress,
     setBlurType,
     setImage,
+    setImages,
     setOverlay,
     threadList,
   } = props;
@@ -217,6 +224,9 @@ const GalleryWithContext = <
         >
           {column.map(({ height, url }, rowIndex) => {
             const defaultOnPress = () => {
+              if (!legacyImageViewerSwipeBehaviour) {
+                setImages([message]);
+              }
               setImage({ messageId, url });
               setBlurType(blurType);
               setOverlay('gallery');
@@ -413,7 +423,7 @@ export const Gallery = <
     threadList: propThreadList,
   } = props;
 
-  const { setImage: contextSetImage } = useImageGalleryContext();
+  const { setImage: contextSetImage, setImages } = useImageGalleryContext();
   const {
     alignment: contextAlignment,
     groupStyles: contextGroupStyles,
@@ -425,8 +435,10 @@ export const Gallery = <
     preventPress: contextPreventPress,
     threadList: contextThreadList,
   } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { additionalTouchableProps: contextAdditionalTouchableProps } =
-    useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const {
+    additionalTouchableProps: contextAdditionalTouchableProps,
+    legacyImageViewerSwipeBehaviour,
+  } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { setBlurType: contextSetBlurType, setOverlay: contextSetOverlay } = useOverlayContext();
 
   const images = propImages || contextImages;
@@ -454,6 +466,8 @@ export const Gallery = <
         groupStyles,
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
         images,
+        legacyImageViewerSwipeBehaviour,
+        message,
         messageId: messageId || message?.id,
         messageText: messageText || message?.text,
         onLongPress,
@@ -462,6 +476,7 @@ export const Gallery = <
         preventPress,
         setBlurType,
         setImage,
+        setImages,
         setOverlay,
         threadList,
       }}

package/src/components/Channel/Channel.tsx

@@ -1,5 +1,7 @@
-import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
+import debounce from 'lodash/debounce';
+import throttle from 'lodash/throttle';
 import {
   ChannelState,
   Channel as ChannelType,
@@ -21,8 +23,6 @@ import { useCreatePaginatedMessageListContext } from './hooks/useCreatePaginated
 import { useCreateThreadContext } from './hooks/useCreateThreadContext';
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useTargetedMessage } from './hooks/useTargetedMessage';
-import { heavyDebounce } from './utils/debounce';
-import { lightThrottle } from './utils/throttle';
 
 import { Attachment as AttachmentDefault } from '../Attachment/Attachment';
 import { AttachmentActions as AttachmentActionsDefault } from '../Attachment/AttachmentActions';
@@ -157,6 +157,17 @@ export const reactionData: ReactionData[] = [
  */
 const scrollToFirstUnreadThreshold = 4;
 
+const defaultThrottleInterval = 500;
+const defaultDebounceInterval = 500;
+const throttleOptions = {
+  leading: false,
+  trailing: true,
+};
+const debounceOptions = {
+  leading: true,
+  trailing: true,
+};
+
 /**
  * Number of unread messages to show in first frame, when channel loads at first
  * unread message. Only applicable if unread count > scrollToFirstUnreadThreshold.
@@ -176,8 +187,10 @@ export type ChannelPropsWithContext<
     ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>,
     | 'channel'
     | 'EmptyStateIndicator'
+    | 'enableMessageGroupingByUser'
     | 'enforceUniqueReaction'
     | 'giphyEnabled'
+    | 'hideStickyDateHeader'
     | 'hideDateSeparators'
     | 'LoadingIndicator'
     | 'maxTimeBetweenGroupedMessages'
@@ -349,6 +362,7 @@ export type ChannelPropsWithContext<
      */
     KeyboardCompatibleView?: React.ComponentType<KeyboardAvoidingViewProps>;
     keyboardVerticalOffset?: number;
+    legacyImageViewerSwipeBehaviour?: boolean;
     /**
      * Custom loading error indicator to override the Stream default
      */
@@ -359,6 +373,7 @@ export type ChannelPropsWithContext<
     quotedRepliesEnabled?: boolean;
     reactionsEnabled?: boolean;
     readEventsEnabled?: boolean;
+    stateUpdateThrottleInterval?: number;
     threadRepliesEnabled?: boolean;
     typingEventsEnabled?: boolean;
     uploadsEnabled?: boolean;
@@ -411,6 +426,7 @@ const ChannelWithContext = <
     doUpdateMessageRequest,
     editMessage: editMessageProp,
     EmptyStateIndicator = EmptyStateIndicatorDefault,
+    enableMessageGroupingByUser = true,
     enforceUniqueReaction = false,
     FileAttachment = FileAttachmentDefault,
     FileAttachmentIcon = FileIconDefault,
@@ -438,6 +454,7 @@ const ChannelWithContext = <
     hasFilePicker = true,
     hasImagePicker = true,
     hideDateSeparators = false,
+    hideStickyDateHeader = false,
     ImageUploadPreview = ImageUploadPreviewDefault,
     initialScrollToFirstUnreadMessage = false,
     initialValue,
@@ -448,6 +465,7 @@ const ChannelWithContext = <
     keyboardBehavior,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
     keyboardVerticalOffset,
+    legacyImageViewerSwipeBehaviour = true,
     LoadingErrorIndicator = LoadingErrorIndicatorDefault,
     LoadingIndicator = LoadingIndicatorDefault,
     loadingMore: loadingMoreProp,
@@ -501,6 +519,7 @@ const ChannelWithContext = <
     sendImageAsync = false,
     setInputRef,
     ShowThreadMessageInChannelButton = ShowThreadMessageInChannelButtonDefault,
+    stateUpdateThrottleInterval = defaultThrottleInterval,
     StickyHeader,
     supportedReactions = reactionData,
     t,
@@ -645,43 +664,65 @@ const ChannelWithContext = <
   /**
    * CHANNEL METHODS
    */
-  const markRead: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['markRead'] = lightThrottle(
-    () => {
-      if (channel?.disconnected || !channel?.getConfig?.()?.read_events) {
-        return;
-      }
-
-      if (doMarkReadRequest) {
-        doMarkReadRequest(channel);
-      } else {
-        logChatPromiseExecution(channel.markRead(), 'mark read');
-      }
-    },
-  );
-
-  const copyTypingState = lightThrottle(() => {
-    if (channel) {
-      setTyping({ ...channel.state.typing });
-    }
-  });
-
-  const copyReadState = lightThrottle(() => {
-    if (channel) {
-      setRead({ ...channel.state.read });
-    }
-  });
+  const markRead: ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>['markRead'] = useRef(
+    throttle(
+      () => {
+        if (channel?.disconnected || !channel?.getConfig?.()?.read_events) {
+          return;
+        }
 
-  const copyChannelState = lightThrottle(() => {
-    setLoading(false);
-    if (channel) {
-      setMembers({ ...channel.state.members });
-      setMessages([...channel.state.messages]);
-      setRead({ ...channel.state.read });
-      setTyping({ ...channel.state.typing });
-      setWatcherCount(channel.state.watcher_count);
-      setWatchers({ ...channel.state.watchers });
-    }
-  });
+        if (doMarkReadRequest) {
+          doMarkReadRequest(channel);
+        } else {
+          logChatPromiseExecution(channel.markRead(), 'mark read');
+        }
+      },
+      defaultThrottleInterval,
+      throttleOptions,
+    ),
+  ).current;
+
+  const copyTypingState = useRef(
+    throttle(
+      () => {
+        if (channel) {
+          setTyping({ ...channel.state.typing });
+        }
+      },
+      stateUpdateThrottleInterval,
+      throttleOptions,
+    ),
+  ).current;
+
+  const copyReadState = useRef(
+    throttle(
+      () => {
+        if (channel) {
+          setRead({ ...channel.state.read });
+        }
+      },
+      stateUpdateThrottleInterval,
+      throttleOptions,
+    ),
+  ).current;
+
+  const copyChannelState = useRef(
+    throttle(
+      () => {
+        setLoading(false);
+        if (channel) {
+          setMembers({ ...channel.state.members });
+          setMessages([...channel.state.messages]);
+          setRead({ ...channel.state.read });
+          setTyping({ ...channel.state.typing });
+          setWatcherCount(channel.state.watcher_count);
+          setWatchers({ ...channel.state.watchers });
+        }
+      },
+      stateUpdateThrottleInterval,
+      throttleOptions,
+    ),
+  ).current;
 
   const connectionRecoveredHandler = () => {
     if (channel) {
@@ -1302,17 +1343,21 @@ const ChannelWithContext = <
     };
 
   // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
-  const loadMoreFinished = heavyDebounce(
-    (
-      updatedHasMore: boolean,
-      newMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages'],
-    ) => {
-      setLoadingMore(false);
-      setError(false);
-      setHasMore(updatedHasMore);
-      setMessages(newMessages);
-    },
-  );
+  const loadMoreFinished = useRef(
+    debounce(
+      (
+        updatedHasMore: boolean,
+        newMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages'],
+      ) => {
+        setLoadingMore(false);
+        setError(false);
+        setHasMore(updatedHasMore);
+        setMessages(newMessages);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
 
   const loadMore: PaginatedMessageListContextValue<At, Ch, Co, Ev, Me, Re, Us>['loadMore'] = async (
     limit = 20,
@@ -1387,13 +1432,17 @@ const ChannelWithContext = <
   };
 
   // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
-  const loadMoreRecentFinished = heavyDebounce(
-    (newMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages']) => {
-      setLoadingMoreRecent(false);
-      setMessages(newMessages);
-      setError(false);
-    },
-  );
+  const loadMoreRecentFinished = useRef(
+    debounce(
+      (newMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages']) => {
+        setLoadingMoreRecent(false);
+        setMessages(newMessages);
+        setError(false);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
 
   const editMessage: InputMessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>['editMessage'] = (
     updatedMessage,
@@ -1468,16 +1517,20 @@ const ChannelWithContext = <
     }, [setThread, setThreadMessages]);
 
   // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
-  const loadMoreThreadFinished = heavyDebounce(
-    (
-      newThreadHasMore: boolean,
-      updatedThreadMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['threads'][string],
-    ) => {
-      setThreadHasMore(newThreadHasMore);
-      setThreadLoadingMore(false);
-      setThreadMessages(updatedThreadMessages);
-    },
-  );
+  const loadMoreThreadFinished = useRef(
+    debounce(
+      (
+        newThreadHasMore: boolean,
+        updatedThreadMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['threads'][string],
+      ) => {
+        setThreadHasMore(newThreadHasMore);
+        setThreadLoadingMore(false);
+        setThreadMessages(updatedThreadMessages);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
 
   const loadMoreThread: ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>['loadMoreThread'] =
     async () => {
@@ -1522,12 +1575,14 @@ const ChannelWithContext = <
     channel,
     disabled: !!channel?.data?.frozen && disableIfFrozenChannel,
     EmptyStateIndicator,
+    enableMessageGroupingByUser,
     enforceUniqueReaction,
     error,
     giphyEnabled:
       giphyEnabled ??
       !!(channel?.getConfig?.()?.commands || [])?.some((command) => command.name === 'giphy'),
     hideDateSeparators,
+    hideStickyDateHeader,
     isAdmin,
     isModerator,
     isOwner,
@@ -1620,6 +1675,7 @@ const ChannelWithContext = <
     disableTypingIndicator,
     dismissKeyboardOnMessageTouch,
     editMessage: editMessageProp,
+    enableMessageGroupingByUser,
     FileAttachment,
     FileAttachmentGroup,
     FileAttachmentIcon,
@@ -1642,6 +1698,7 @@ const ChannelWithContext = <
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
+    legacyImageViewerSwipeBehaviour,
     markdownRules,
     Message,
     messageActions,

package/src/components/Channel/hooks/useCreateChannelContext.ts

@@ -24,10 +24,12 @@ export const useCreateChannelContext = <
   channel,
   disabled,
   EmptyStateIndicator,
+  enableMessageGroupingByUser,
   enforceUniqueReaction,
   error,
   giphyEnabled,
   hideDateSeparators,
+  hideStickyDateHeader,
   isAdmin,
   isModerator,
   isOwner,
@@ -64,10 +66,12 @@ export const useCreateChannelContext = <
       channel,
       disabled,
       EmptyStateIndicator,
+      enableMessageGroupingByUser,
       enforceUniqueReaction,
       error,
       giphyEnabled,
       hideDateSeparators,
+      hideStickyDateHeader,
       isAdmin,
       isModerator,
       isOwner,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -37,6 +37,7 @@ export const useCreateMessagesContext = <
   disableTypingIndicator,
   dismissKeyboardOnMessageTouch,
   editMessage,
+  enableMessageGroupingByUser,
   FileAttachment,
   FileAttachmentGroup,
   FileAttachmentIcon,
@@ -59,6 +60,7 @@ export const useCreateMessagesContext = <
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
+  legacyImageViewerSwipeBehaviour,
   markdownRules,
   Message,
   messageActions,
@@ -130,6 +132,7 @@ export const useCreateMessagesContext = <
       disableTypingIndicator,
       dismissKeyboardOnMessageTouch,
       editMessage,
+      enableMessageGroupingByUser,
       FileAttachment,
       FileAttachmentGroup,
       FileAttachmentIcon,
@@ -152,6 +155,7 @@ export const useCreateMessagesContext = <
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,
+      legacyImageViewerSwipeBehaviour,
       markdownRules,
       Message,
       messageActions,

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

@@ -43,7 +43,7 @@ export type MessageSimplePropsWithContext<
 > &
   Pick<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    'MessageAvatar' | 'MessageContent' | 'ReactionList'
+    'enableMessageGroupingByUser' | 'MessageAvatar' | 'MessageContent' | 'ReactionList'
   >;
 
 const MessageSimpleWithContext = <
@@ -60,6 +60,7 @@ const MessageSimpleWithContext = <
   const {
     alignment,
     channel,
+    enableMessageGroupingByUser,
     groupStyles,
     hasReactions,
     message,
@@ -89,7 +90,11 @@ const MessageSimpleWithContext = <
         styles.container,
         {
           justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
-          marginBottom: hasMarginBottom ? (isVeryLastMessage ? 30 : 8) : 0,
+          marginBottom: hasMarginBottom
+            ? isVeryLastMessage && enableMessageGroupingByUser
+              ? 30
+              : 8
+            : 0,
           marginTop: showReactions ? 2 : 0,
         },
         container,
@@ -211,7 +216,7 @@ export const MessageSimple = <
 ) => {
   const { alignment, channel, groupStyles, hasReactions, message } =
     useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { MessageAvatar, MessageContent, ReactionList } =
+  const { enableMessageGroupingByUser, MessageAvatar, MessageContent, ReactionList } =
     useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
@@ -219,6 +224,7 @@ export const MessageSimple = <
       {...{
         alignment,
         channel,
+        enableMessageGroupingByUser,
         groupStyles,
         hasReactions,
         message,

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -34,6 +34,10 @@ const styles = StyleSheet.create({
   dismiss: {
     borderRadius: 24,
     height: 24,
+    position: 'absolute',
+    right: 14,
+    top: 4,
+    width: 24,
   },
   fileContainer: {
     borderRadius: 12,
@@ -112,62 +116,68 @@ const FileUploadPreviewWithContext = <
       },
     },
   } = useTheme();
-  const renderItem = ({ index, item }: { index: number; item: FileUpload }) => (
-    <UploadProgressIndicator
-      action={() => {
-        uploadFile({ newFile: item });
-      }}
-      active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}
-      style={styles.overlay}
-      type={
-        item.state === FileState.UPLOADING
-          ? ProgressIndicatorTypes.IN_PROGRESS
-          : item.state === FileState.UPLOAD_FAILED
-          ? ProgressIndicatorTypes.RETRY
-          : undefined
-      }
-    >
-      <View
-        style={[
-          styles.fileContainer,
-          index === fileUploads.length - 1
-            ? {
-                marginBottom: 0,
-              }
-            : {},
-          {
-            borderColor: grey_whisper,
-            width: flatListWidth - 16,
-          },
-          fileContainer,
-        ]}
-      >
-        <View style={[styles.fileContentContainer, fileContentContainer]}>
-          <FileAttachmentIcon mimeType={item.file.type} />
-          <View style={[styles.fileTextContainer, fileTextContainer]}>
-            <Text
-              numberOfLines={1}
-              style={[
-                styles.filenameText,
-                {
-                  color: black,
-                  width:
-                    flatListWidth -
-                    16 - // 16 = horizontal padding
-                    40 - // 40 = file icon size
-                    24 - // 24 = close icon size
-                    24, // 24 = internal padding
-                },
-                filenameText,
-              ]}
-            >
-              {item.file.name || ''}
-            </Text>
-            <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-              {getFileSizeDisplayText(item.file.size)}
-            </Text>
+
+  const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {
+    const indicatorType =
+      item.state === FileState.UPLOADING
+        ? ProgressIndicatorTypes.IN_PROGRESS
+        : item.state === FileState.UPLOAD_FAILED
+        ? ProgressIndicatorTypes.RETRY
+        : undefined;
+
+    return (
+      <>
+        <UploadProgressIndicator
+          action={() => {
+            uploadFile({ newFile: item });
+          }}
+          active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}
+          style={styles.overlay}
+          type={indicatorType}
+        >
+          <View
+            style={[
+              styles.fileContainer,
+              index === fileUploads.length - 1
+                ? {
+                    marginBottom: 0,
+                  }
+                : {},
+              {
+                borderColor: grey_whisper,
+                width: flatListWidth - 16,
+              },
+              fileContainer,
+            ]}
+          >
+            <View style={[styles.fileContentContainer, fileContentContainer]}>
+              <FileAttachmentIcon mimeType={item.file.type} />
+              <View style={[styles.fileTextContainer, fileTextContainer]}>
+                <Text
+                  numberOfLines={1}
+                  style={[
+                    styles.filenameText,
+                    {
+                      color: black,
+                      width:
+                        flatListWidth -
+                        16 - // 16 = horizontal padding
+                        40 - // 40 = file icon size
+                        24 - // 24 = close icon size
+                        24, // 24 = internal padding
+                    },
+                    filenameText,
+                  ]}
+                >
+                  {item.file.name || ''}
+                </Text>
+                <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
+                  {getFileSizeDisplayText(item.file.size)}
+                </Text>
+              </View>
+            </View>
           </View>
-        </View>
+        </UploadProgressIndicator>
         <TouchableOpacity
           onPress={() => {
             removeFile(item.id);
@@ -177,9 +187,9 @@ const FileUploadPreviewWithContext = <
         >
           <Close />
         </TouchableOpacity>
-      </View>
-    </UploadProgressIndicator>
-  );
+      </>
+    );
+  };
 
   const fileUploadsLength = fileUploads.length;