stream-chat-react-native-core 9.0.0-beta.27 → 9.0.0-beta.29

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -1,14 +1,14 @@
 import React, { useMemo } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 
-import { ChannelPreviewProps } from './ChannelPreview';
+import type { ChannelPreviewProps } from './ChannelPreview';
 import { ChannelPreviewMessage } from './ChannelPreviewMessage';
 import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewStatus } from './ChannelPreviewStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
 import { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';
 
-import { LastMessageType } from './hooks/useChannelPreviewData';
+import type { LastMessageType } from './hooks/useChannelPreviewData';
 
 import {
   ChannelsContextValue,
@@ -204,6 +204,7 @@ const useStyles = () => {
       },
       contentContainer: { flex: 1, gap: primitives.spacingXxs },
       upperRow: {
+        gap: primitives.spacingMd,
         alignItems: 'center',
         flex: 1,
         flexDirection: 'row',

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -1,27 +1,27 @@
 import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';
 import { StyleSheet } from 'react-native';
 
-import { SharedValue } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
-import { Channel } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
 import { ChannelDetailsBottomSheet as DefaultChannelDetailsBottomSheet } from './ChannelDetailsBottomSheet';
 import type { ChannelDetailsBottomSheetProps } from './ChannelDetailsBottomSheet';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
-import { useTheme } from '../../contexts';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { MenuPointHorizontal, Mute, Sound } from '../../icons';
-import { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
+import type { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelActions } from '../ChannelList/hooks/useChannelActions';
+import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 import {
-  BottomSheetModal,
   RightActions,
   SwipableActionItem,
   SwipableWrapper,
   SwipableWrapperProps,
-} from '../UIComponents';
+} from '../UIComponents/SwipableWrapper';
 
 export const OpenChannelDetailsButton = () => {
   const {
@@ -120,9 +120,10 @@ export const ChannelSwipableWrapper = ({
         {children}
       </SwipableWrapper>
       <BottomSheetModal
+        enableDynamicSizing={true}
         onClose={() => setChannelDetailSheetOpen(false)}
         visible={channelDetailSheetOpen}
-        height={356}
+        height={424}
       >
         <ChannelDetailsBottomSheetComponent channel={channel} items={sheetItems} />
       </BottomSheetModal>

package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx

@@ -11,7 +11,7 @@ import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet';
 
 const mockStreamBottomSheetModalFlatList = jest.fn(() => null);
 
-jest.mock('../../UIComponents', () => ({
+jest.mock('../../UIComponents/StreamBottomSheetModalFlatList', () => ({
   StreamBottomSheetModalFlatList: (...args: unknown[]) =>
     mockStreamBottomSheetModalFlatList(...args),
 }));

package/src/components/ChannelPreview/__tests__/ChannelLastMessagePreview.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { generateGiphyAttachment } from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Chat } from '../../Chat/Chat';
+import { ChannelLastMessagePreview } from '../ChannelLastMessagePreview';
+
+describe('ChannelLastMessagePreview', () => {
+  it('shows Giphy instead of slash-command text for giphy attachments with quoted replies', async () => {
+    const client = await getTestClientWithUser({ id: 'preview-user' });
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [generateGiphyAttachment()],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '/giphy Cat',
+      user,
+    });
+
+    const { getByText, queryByText } = render(
+      <Chat client={client}>
+        <ChannelLastMessagePreview message={message} />
+      </Chat>,
+    );
+
+    expect(getByText('Giphy')).toBeTruthy();
+    expect(queryByText('/giphy Cat')).toBeNull();
+  });
+});

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -31,7 +31,7 @@ const mockSwipableWrapper = jest.fn(
   },
 );
 
-jest.mock('../../../contexts', () => ({
+jest.mock('../../../contexts/themeContext/ThemeContext', () => ({
   useTheme: () => ({
     theme: {
       semantics: {
@@ -50,8 +50,11 @@ jest.mock('../../../contexts/swipeableContext/SwipeRegistryContext', () => ({
   }),
 }));
 
-jest.mock('../../UIComponents', () => ({
+jest.mock('../../UIComponents/BottomSheetModal', () => ({
   BottomSheetModal: ({ children }: React.PropsWithChildren) => <>{children}</>,
+}));
+
+jest.mock('../../UIComponents/SwipableWrapper', () => ({
   RightActions: ({ items }: { items: Array<{ action: () => void; id: string }> }) => {
     rightActionsProbe.items = items;
     return null;

package/src/components/ImageGallery/ImageGallery.tsx

@@ -279,11 +279,11 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     <Animated.View
       accessibilityLabel='Image Gallery'
       pointerEvents={'auto'}
-      style={[StyleSheet.absoluteFillObject, showScreenStyle]}
+      style={[StyleSheet.absoluteFill, showScreenStyle]}
     >
-      <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
+      <Animated.View style={[StyleSheet.absoluteFill, containerBackground]} />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
-        <Animated.View style={StyleSheet.absoluteFillObject}>
+        <Animated.View style={StyleSheet.absoluteFill}>
           <Animated.View
             testID='image-gallery-pager'
             style={[styles.animatedContainer, pagerStyle, pager]}

package/src/components/Message/Message.tsx

@@ -489,7 +489,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
 
   const messageContentOrder = messageContentOrderProp.filter((content) => {
     if (content === 'quoted_reply') {
-      return !!message.quoted_message;
+      return !!message.quoted_message && !hasAttachmentActions;
     }
 
     switch (content) {
@@ -700,6 +700,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     goToMessage,
     groupStyles,
     handleAction,
+    hasAttachmentActions,
     handleReaction,
     handleToggleReaction,
     hasReactions,

package/src/components/Message/MessageItemView/MessageItemView.tsx

@@ -200,6 +200,7 @@ export type MessageItemViewPropsWithContext = Pick<
   | 'alignment'
   | 'channel'
   | 'groupStyles'
+  | 'hasAttachmentActions'
   | 'isMyMessage'
   | 'message'
   | 'onlyEmojis'
@@ -241,6 +242,7 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     enableMessageGroupingByUser,
     enableSwipeToReply,
     groupStyles,
+    hasAttachmentActions,
     isMyMessage,
     message,
     MessageAuthor,
@@ -294,12 +296,13 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   });
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  const hasVisibleQuotedReply = !!message.quoted_message && !hasAttachmentActions;
   const hasStandaloneGiphyOrImgur =
-    !message.quoted_message &&
+    !hasVisibleQuotedReply &&
     otherAttachments.length > 0 &&
     (otherAttachments[0].type === FileTypes.Giphy || otherAttachments[0].type === FileTypes.Imgur);
 
-  let noBorder = onlyEmojis && !message.quoted_message;
+  let noBorder = onlyEmojis && !hasVisibleQuotedReply;
   if (otherAttachments.length) {
     if (hasStandaloneGiphyOrImgur && !isMyMessage) {
       noBorder = false;
@@ -309,7 +312,7 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   }
 
   let backgroundColor = semantics.chatBgOutgoing;
-  if (onlyEmojis && !message.quoted_message) {
+  if (onlyEmojis && !hasVisibleQuotedReply) {
     backgroundColor = 'transparent';
   } else if (hasStandaloneGiphyOrImgur) {
     backgroundColor = 'transparent';
@@ -522,6 +525,7 @@ export const MessageItemView = (props: MessageItemViewProps) => {
     alignment,
     channel,
     groupStyles,
+    hasAttachmentActions,
     isMyMessage,
     message,
     contextMenuAnchorRef,
@@ -563,6 +567,7 @@ export const MessageItemView = (props: MessageItemViewProps) => {
         enableMessageGroupingByUser,
         enableSwipeToReply,
         groupStyles,
+        hasAttachmentActions,
         isMyMessage,
         message,
         MessageAuthor,

package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js

@@ -8,6 +8,7 @@ import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
 import {
+  generateAttachmentAction,
   generateGiphyAttachment,
   generateVideoAttachment,
 } from '../../../../mock-builders/generator/attachment';
@@ -369,6 +370,33 @@ describe('MessageContent', () => {
     expect(contentContainerStyle.paddingBottom).toBeGreaterThan(0);
   });
 
+  it('does not render the quoted reply for an ephemeral giphy preview', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [
+        {
+          ...generateGiphyAttachment(),
+          actions: [
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+          ],
+        },
+      ],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('giphy-action-attachment')).toBeTruthy();
+    });
+
+    expect(screen.queryByText('quoted message')).toBeFalsy();
+  });
+
   it('renders the FileAttachment component when a file attachment exists', async () => {
     const user = generateUser();
     const message = generateMessage({

package/src/components/Message/MessageItemView/__tests__/MessageItemView.test.js

@@ -10,7 +10,10 @@ import { useMessageContext } from '../../../../contexts/messageContext/MessageCo
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
-import { generateGiphyAttachment } from '../../../../mock-builders/generator/attachment';
+import {
+  generateAttachmentAction,
+  generateGiphyAttachment,
+} from '../../../../mock-builders/generator/attachment';
 import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
@@ -276,4 +279,32 @@ describe('MessageItemView', () => {
       expect(wrapperStyle.backgroundColor).not.toBe('transparent');
     });
   });
+
+  it('renders a standalone shell for an ephemeral giphy preview with a quoted reply', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [
+        {
+          ...generateGiphyAttachment(),
+          actions: [
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+            generateAttachmentAction(),
+          ],
+        },
+      ],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      const wrapperStyle = StyleSheet.flatten(
+        screen.getByTestId('message-content-wrapper').props.style,
+      );
+      expect(wrapperStyle.backgroundColor).toBe('transparent');
+    });
+  });
 });

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -25,6 +25,7 @@ export const useCreateMessageContext = ({
   goToMessage,
   groupStyles,
   handleAction,
+  hasAttachmentActions,
   handleReaction,
   handleToggleReaction,
   hasReactions,
@@ -79,6 +80,7 @@ export const useCreateMessageContext = ({
       goToMessage,
       groupStyles: stableGroupStyles,
       handleAction,
+      hasAttachmentActions,
       handleReaction,
       handleToggleReaction,
       hasReactions,
@@ -116,6 +118,7 @@ export const useCreateMessageContext = ({
       alignment,
       goToMessage,
       stableGroupStyles,
+      hasAttachmentActions,
       hasReactions,
       messageHasOnlySingleAttachment,
       lastGroupMessage,

package/src/components/MessageInput/components/AttachmentPreview/ImageAttachmentUploadPreview.tsx

@@ -66,7 +66,7 @@ export const ImageAttachmentUploadPreview = ({
           onError={onErrorHandler}
           onLoadEnd={onLoadEndHandler}
           source={{ uri: attachment.localMetadata.previewUri ?? attachment.image_url }}
-          style={StyleSheet.absoluteFillObject}
+          style={StyleSheet.absoluteFill}
           testID={'image-attachment-upload-preview-image'}
         />
         {indicatorType === ProgressIndicatorTypes.IN_PROGRESS && <ImageUploadInProgressIndicator />}

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -280,11 +280,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
           <EmojiPickerList onSelectReaction={handleSelectReaction} renderFullInitially={false} />
         </Animated.View>
       ) : (
-        <Animated.View
-          key={'reaction-details'}
-          entering={FadeIn.duration(200)}
-          exiting={FadeOut.duration(200)}
-        >
+        <Animated.View key={'reaction-details'} exiting={FadeOut.duration(200)}>
           <Text style={[styles.reactionsText, reactionsText]}>
             {t('{{count}} Reactions', { count: totalReactionCount })}
           </Text>

package/src/components/Poll/components/PollInputDialog.tsx

@@ -81,7 +81,7 @@ export const PollInputDialog = ({
                 style={styles.button}
               />
               <Button
-                variant={'secondary'}
+                variant={'primary'}
                 type={'solid'}
                 label={t('Send')}
                 size='md'

package/src/components/Reply/Reply.tsx

@@ -51,7 +51,7 @@ const RightContent = React.memo(
     ) {
       return (
         <View style={[styles.contentWrapper, styles.contentBorder]}>
-          <ImageComponent source={{ uri }} style={StyleSheet.absoluteFillObject} />
+          <ImageComponent source={{ uri }} style={StyleSheet.absoluteFill} />
         </View>
       );
     }
@@ -59,7 +59,7 @@ const RightContent = React.memo(
       return (
         <View style={[styles.contentWrapper, styles.contentBorder]}>
           <View style={styles.attachmentContainer}>
-            <Image source={{ uri: attachment.thumb_url }} style={StyleSheet.absoluteFillObject} />
+            <Image source={{ uri: attachment.thumb_url }} style={StyleSheet.absoluteFill} />
             <VideoPlayIndicator size='sm' />
           </View>
         </View>

package/src/components/ThreadList/ThreadListItemSkeleton.tsx

@@ -19,7 +19,7 @@ const SkeletonBlock = ({ style }: { style: React.ComponentProps<typeof View>['st
         baseColor={semantics.backgroundCoreSurfaceDefault}
         duration={animationTime}
         gradientColor={semantics.skeletonLoadingHighlight}
-        style={StyleSheet.absoluteFillObject}
+        style={StyleSheet.absoluteFill}
       />
     </View>
   );