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

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -22,7 +22,7 @@ import { Button } from '../../ui/';
 
 export type GiphyPropsWithContext = Pick<
   MessageContextValue,
-  'handleAction' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
+  'handleAction' | 'isMyMessage' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
   Pick<MessagesContextValue, 'additionalPressableProps' | 'giphyVersion'> & {
     attachment: Attachment;
@@ -34,6 +34,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
     attachment,
     giphyVersion,
     handleAction,
+    isMyMessage,
     onLongPress,
     onPress,
     onPressIn,
@@ -53,7 +54,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
     },
   } = useTheme();
 
-  const styles = useStyles();
+  const styles = useStyles({ isMyMessage });
 
   const uri = image_url || thumb_url;
 
@@ -122,7 +123,7 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
         }
       }}
       testID='giphy-attachment'
-      style={styles.container}
+      style={[styles.container, container]}
       {...additionalPressableProps}
     >
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} />
@@ -134,10 +135,12 @@ const areEqual = (prevProps: GiphyPropsWithContext, nextProps: GiphyPropsWithCon
   const {
     attachment: { actions: prevActions, image_url: prevImageUrl, thumb_url: prevThumbUrl },
     giphyVersion: prevGiphyVersion,
+    isMyMessage: prevIsMyMessage,
   } = prevProps;
   const {
     attachment: { actions: nextActions, image_url: nextImageUrl, thumb_url: nextThumbUrl },
     giphyVersion: nextGiphyVersion,
+    isMyMessage: nextIsMyMessage,
   } = nextProps;
 
   const imageUrlEqual = prevImageUrl === nextImageUrl;
@@ -165,6 +168,11 @@ const areEqual = (prevProps: GiphyPropsWithContext, nextProps: GiphyPropsWithCon
     return false;
   }
 
+  const isMyMessageEqual = prevIsMyMessage === nextIsMyMessage;
+  if (!isMyMessageEqual) {
+    return false;
+  }
+
   return true;
 };
 
@@ -178,7 +186,8 @@ export type GiphyProps = Partial<GiphyPropsWithContext> & {
  * UI component for card in attachments.
  */
 export const Giphy = (props: GiphyProps) => {
-  const { handleAction, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
+  const { handleAction, isMyMessage, onLongPress, onPress, onPressIn, preventPress } =
+    useMessageContext();
   const { additionalPressableProps, giphyVersion } = useMessagesContext();
 
   return (
@@ -187,6 +196,7 @@ export const Giphy = (props: GiphyProps) => {
         additionalPressableProps,
         giphyVersion,
         handleAction,
+        isMyMessage,
         onLongPress,
         onPress,
         onPressIn,
@@ -199,14 +209,16 @@ export const Giphy = (props: GiphyProps) => {
 
 Giphy.displayName = 'Giphy{messageItemView{giphy}}';
 
-const useStyles = () => {
+const useStyles = ({ isMyMessage }: Pick<GiphyPropsWithContext, 'isMyMessage'>) => {
   const {
     theme: { semantics },
   } = useTheme();
   return useMemo(() => {
     return StyleSheet.create({
       container: {
-        backgroundColor: semantics.chatBgOutgoing,
+        backgroundColor: isMyMessage
+          ? semantics.chatBgAttachmentOutgoing
+          : semantics.chatBgAttachmentIncoming,
         borderRadius: primitives.radiusLg,
         maxWidth: 256, // TODO: Not sure how to fix this
         overflow: 'hidden',
@@ -240,5 +252,5 @@ const useStyles = () => {
         lineHeight: primitives.typographyLineHeightTight,
       },
     });
-  }, [semantics]);
+  }, [isMyMessage, semantics]);
 };

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -14,7 +14,7 @@ import { MessageProvider } from '../../../contexts/messageContext/MessageContext
 import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 
-import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { mergeThemes, ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateGiphyAttachment } from '../../../mock-builders/generator/attachment';
@@ -36,6 +36,8 @@ const streami18n = new Streami18n({
 });
 
 describe('Giphy', () => {
+  const lightTheme = mergeThemes({ scheme: 'light' });
+
   const getAttachmentComponent = (props, messageContextValue = {}) => {
     const message = generateMessage();
     return (
@@ -115,6 +117,36 @@ describe('Giphy', () => {
     });
   });
 
+  it('uses the outgoing attachment background for outgoing giphys', async () => {
+    render(getAttachmentComponent({ attachment }, { isMyMessage: true }));
+
+    await waitFor(() => {
+      const style = screen.getByTestId('giphy-attachment').props.style;
+      expect(style).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: lightTheme.semantics.chatBgAttachmentOutgoing,
+          }),
+        ]),
+      );
+    });
+  });
+
+  it('uses the incoming attachment background for incoming giphys', async () => {
+    render(getAttachmentComponent({ attachment }, { isMyMessage: false }));
+
+    await waitFor(() => {
+      const style = screen.getByTestId('giphy-attachment').props.style;
+      expect(style).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            backgroundColor: lightTheme.semantics.chatBgAttachmentIncoming,
+          }),
+        ]),
+      );
+    });
+  });
+
   it('"giphy" attachment size should be customisable', async () => {
     attachment.giphy = giphy;
     render(getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }));

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -201,7 +201,7 @@ export const AttachmentCameraPicker = (
       onPress={openCameraPicker}
       height={height}
       buttonText={t('Open Camera')}
-      description={t('Take a video and share')}
+      description={t(videoOnly ? 'Take a video and share' : 'Take a photo and share')}
     />
   );
 };
@@ -216,8 +216,8 @@ export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
       Icon={FilePickerIcon}
       onPress={pickFile}
       height={height}
-      buttonText={t('Pick document')}
-      description={t('Pick a document to share it with everyone')}
+      buttonText={t('Open Files')}
+      description={t('Select files to share')}
     />
   );
 };

package/src/components/AttachmentPicker/components/AttachmentPickerGenericContent.tsx

@@ -21,12 +21,20 @@ const useStyles = () => {
           paddingHorizontal: primitives.spacing2xl,
           paddingBottom: primitives.spacing3xl,
         },
-        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+        infoContainer: {
+          flex: 1,
+          gap: primitives.spacingSm,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        actionContainer: {
+          gap: primitives.spacingMd,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
         text: {
           fontSize: primitives.typographyFontSizeMd,
           color: semantics.textSecondary,
-          marginTop: 8,
-          marginHorizontal: 24,
           textAlign: 'center',
           maxWidth: 200,
         },
@@ -54,13 +62,13 @@ export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericCon
     theme: {
       semantics,
       attachmentPicker: {
-        content: { container, text, infoContainer },
+        content: { actionContainer, container, text, infoContainer },
       },
     },
   } = useTheme();
 
   const ThemedIcon = useCallback(
-    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
+    () => <Icon width={32} height={32} stroke={semantics.textTertiary} />,
     [Icon, semantics.textTertiary],
   );
 
@@ -76,15 +84,17 @@ export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericCon
     >
       <View style={[styles.infoContainer, infoContainer]}>
         <ThemedIcon />
-        <Text style={[styles.text, text]}>{description}</Text>
+        <View style={[styles.actionContainer, actionContainer]}>
+          <Text style={[styles.text, text]}>{description}</Text>
+          <Button
+            variant={'secondary'}
+            type={'outline'}
+            size={'md'}
+            label={buttonText}
+            onPress={onPress}
+          />
+        </View>
       </View>
-      <Button
-        variant={'secondary'}
-        type={'outline'}
-        size={'lg'}
-        label={buttonText}
-        onPress={onPress}
-      />
     </View>
   );
 };

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
-import { FlatList, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import { FlatList } from 'react-native-gesture-handler';
 
 import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
 

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -141,7 +141,7 @@ const useStyles = () => {
           flexDirection: 'row',
           padding: primitives.spacingSm,
           gap: primitives.spacingSm,
-          backgroundColor: semantics.backgroundCoreElevation1,
+          backgroundColor: 'transparent',
           ...header.container,
         },
         headerMeta: {

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -104,7 +104,9 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     return (
       <View style={styles.container}>
         <PollIcon height={16} width={16} stroke={semantics.textSecondary} />
-        <Text style={styles.subtitle}>{pollLabel}</Text>
+        <Text ellipsizeMode='tail' numberOfLines={1} style={styles.subtitle}>
+          {pollLabel}
+        </Text>
       </View>
     );
   }

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -12,6 +12,7 @@ import type {
   ImageGalleryAsset,
   ImageGalleryState,
 } from '../../../state-store/image-gallery-state-store';
+import { primitives } from '../../../theme';
 import { FileTypes } from '../../../types/types';
 import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 
@@ -108,8 +109,9 @@ const useStyles = () => {
     return StyleSheet.create({
       contentContainer: {
         flexGrow: 1,
-        ...contentContainer,
         backgroundColor: semantics.backgroundCoreApp,
+        marginTop: primitives.spacingSm,
+        ...contentContainer,
       },
       image: { margin: 1, ...gridImage },
     });

package/src/components/Indicators/LoadingIndicator.tsx

@@ -6,7 +6,7 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { primitives } from '../../theme';
 import { Spinner } from '../UIComponents/Spinner';
 
-type LoadingIndicatorWrapperProps = { text: string };
+type LoadingIndicatorWrapperProps = { text: string | undefined };
 
 const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
   const styles = useStyles();
@@ -14,9 +14,11 @@ const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
   return (
     <View style={styles.container}>
       <Spinner height={20} width={20} />
-      <Text style={styles.loadingText} testID='loading'>
-        {text}
-      </Text>
+      {text ? (
+        <Text style={styles.loadingText} testID='loading'>
+          {text}
+        </Text>
+      ) : null}
     </View>
   );
 };
@@ -44,7 +46,7 @@ export const LoadingIndicator = (props: LoadingProps) => {
     case 'message':
       return <LoadingIndicatorWrapper text={t('Loading messages...')} />;
     case 'threads':
-      return <LoadingIndicatorWrapper text={t('Loading threads...')} />;
+      return <LoadingIndicatorWrapper text={undefined} />;
     default:
       return <LoadingIndicatorWrapper text={t('Loading...')} />;
   }

package/src/components/Message/Message.tsx

@@ -381,21 +381,12 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     }
   };
 
-  const onPressQuotedMessage = (quotedMessage: LocalMessage) => {
-    if (!goToMessage) {
-      return;
-    }
-
-    goToMessage(quotedMessage.id);
-  };
-
   const errorOrFailed = message.type === 'error' || message.status === MessageStatusTypes.FAILED;
 
   const onPress = (error = errorOrFailed) => {
     if (dismissKeyboardOnMessageTouch) {
       dismissKeyboard();
     }
-    const quotedMessage = message.quoted_message;
     if (error) {
       /**
        * If its a Blocked message, we don't do anything as per specs.
@@ -411,8 +402,6 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
         return;
       }
       showMessageOverlay();
-    } else if (quotedMessage) {
-      onPressQuotedMessage(quotedMessage);
     }
   };
 

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

@@ -121,6 +121,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     FileAttachmentGroup,
     Gallery,
     groupStyles,
+    goToMessage,
     isMessageAIGenerated,
     isMyMessage,
     isVeryLastMessage,
@@ -221,7 +222,6 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
 
   const { setNativeScrollability } = useMessageListItemContext();
   const hasContentSideViews = !!(MessageContentLeadingView || MessageContentTrailingView);
-
   const contentBody = (
     <>
       <View
@@ -240,12 +240,45 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
             case 'quoted_reply':
               return (
                 message.quoted_message && (
-                  <View
+                  <Pressable
+                    disabled={!goToMessage}
                     key={`quoted_reply_${messageContentOrderIndex}`}
+                    onLongPress={(event) => {
+                      if (onLongPress) {
+                        onLongPress({
+                          emitter: 'messageContent',
+                          event,
+                        });
+                      }
+                    }}
+                    onPress={(event) => {
+                      if (!message.quoted_message || !goToMessage) {
+                        return;
+                      }
+
+                      if (onPress) {
+                        onPress({
+                          defaultHandler: () => goToMessage(message.quoted_message!.id),
+                          emitter: 'messageContent',
+                          event,
+                        });
+                        return;
+                      }
+
+                      goToMessage(message.quoted_message.id);
+                    }}
+                    onPressIn={(event) => {
+                      if (onPressIn) {
+                        onPressIn({
+                          emitter: 'messageContent',
+                          event,
+                        });
+                      }
+                    }}
                     style={[styles.replyContainer, replyContainer]}
                   >
                     <Reply mode='reply' styles={replyStyles} />
-                  </View>
+                  </Pressable>
                 )
               );
             case 'attachments':
@@ -584,7 +617,8 @@ export const MessageContent = (props: MessageContentProps) => {
   const messageHasSingleFile =
     messageContentOrder.length === 1 && messageContentOrder[0] === 'files' && isSingleFile;
   const messageHasOnlyText = messageContentOrder.length === 1 && messageContentOrder[0] === 'text';
-  const messageHasGiphyOrImgur =
+  const messageHasStandaloneGiphyOrImgur =
+    !message.quoted_message &&
     otherAttachments.filter(
       (file) => file.type === FileTypes.Giphy || file.type === FileTypes.Imgur,
     ).length > 0;
@@ -594,17 +628,20 @@ export const MessageContent = (props: MessageContentProps) => {
     messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
-    messageHasGiphyOrImgur;
+    messageHasStandaloneGiphyOrImgur;
 
   const hidePaddingHorizontal =
-    messageHasPoll || messageHasSingleMedia || messageHasSingleFile || messageHasGiphyOrImgur;
+    messageHasPoll ||
+    messageHasSingleMedia ||
+    messageHasSingleFile ||
+    messageHasStandaloneGiphyOrImgur;
 
   const hidePaddingBottom =
     messageHasPoll ||
     messageHasSingleMedia ||
     messageHasSingleFile ||
     messageHasOnlyText ||
-    messageHasGiphyOrImgur ||
+    messageHasStandaloneGiphyOrImgur ||
     (messageContentOrder.length > 1 &&
       messageContentOrder[messageContentOrder.length - 1] === 'text');
 

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

@@ -17,6 +17,7 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../../hooks/useStableCallback';
 
 import { primitives } from '../../../theme';
+import { FileTypes } from '../../../types/types';
 import { checkMessageEquality, checkQuotedMessageEquality } from '../../../utils/utils';
 import { useMessageData } from '../hooks/useMessageData';
 
@@ -293,10 +294,14 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   });
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  const hasStandaloneGiphyOrImgur =
+    !message.quoted_message &&
+    otherAttachments.length > 0 &&
+    (otherAttachments[0].type === FileTypes.Giphy || otherAttachments[0].type === FileTypes.Imgur);
 
   let noBorder = onlyEmojis && !message.quoted_message;
   if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy' && !isMyMessage) {
+    if (hasStandaloneGiphyOrImgur && !isMyMessage) {
       noBorder = false;
     } else {
       noBorder = true;
@@ -306,10 +311,8 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   let backgroundColor = semantics.chatBgOutgoing;
   if (onlyEmojis && !message.quoted_message) {
     backgroundColor = 'transparent';
-  } else if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy') {
-      backgroundColor = 'transparent';
-    }
+  } else if (hasStandaloneGiphyOrImgur) {
+    backgroundColor = 'transparent';
   } else if (isMessageReceivedOrErrorType) {
     backgroundColor = semantics.chatBgIncoming;
   }

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

@@ -235,7 +235,7 @@ const useStyles = () => {
         gap: primitives.spacingXs,
       },
       messageRepliesText: {
-        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textPrimary,
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.textLink,
         fontSize: primitives.typographyFontSizeSm,
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,

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

@@ -29,7 +29,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
       messageItemView: {
         status: { checkAllIcon, checkIcon, container, timeIcon },
       },
-      semantics,
     },
   } = useTheme();
 
@@ -54,14 +53,14 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
       {read ? (
         <CheckAll
           height={16}
-          stroke={semantics.accentPrimary}
+          stroke={styles.readCheck.color}
           width={16}
           accessibilityLabel='Read'
           {...checkAllIcon}
         />
       ) : delivered ? (
         <CheckAll
-          stroke={semantics.chatTextTimestamp}
+          stroke={styles.deliveredCheck.color}
           height={16}
           width={16}
           accessibilityLabel='Delivered'
@@ -69,7 +68,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
         />
       ) : sending ? (
         <Time
-          stroke={semantics.chatTextTimestamp}
+          stroke={styles.sendingCheck.color}
           height={16}
           width={16}
           accessibilityLabel='Sending'
@@ -77,7 +76,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
         />
       ) : sent ? (
         <Check
-          stroke={semantics.chatTextTimestamp}
+          stroke={styles.sentCheck.color}
           height={16}
           width={16}
           accessibilityLabel='Sent'
@@ -162,6 +161,18 @@ const useStyles = () => {
         flexDirection: 'row',
         gap: primitives.spacingXxs,
       },
+      readCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.accentPrimary,
+      },
+      deliveredCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
+      },
+      sendingCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
+      },
+      sentCheck: {
+        color: shouldUseOverlayStyles ? semantics.textOnAccent : semantics.chatTextTimestamp,
+      },
     });
   }, [shouldUseOverlayStyles, semantics]);
 };

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

@@ -7,7 +7,10 @@ import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
-import { generateVideoAttachment } from '../../../../mock-builders/generator/attachment';
+import {
+  generateGiphyAttachment,
+  generateVideoAttachment,
+} 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';
@@ -326,6 +329,46 @@ describe('MessageContent', () => {
     expect(contentContainerStyle.paddingBottom).toBe(0);
   });
 
+  it('keeps content padding for a quoted reply with a giphy attachment', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [generateGiphyAttachment()],
+      quoted_message: generateMessage({ text: 'quoted message', user }),
+      text: '',
+      user,
+    });
+
+    renderMessage({ message });
+
+    await waitFor(() => {
+      expect(screen.getByTestId('message-content-wrapper')).toBeTruthy();
+      expect(screen.getByTestId('giphy-attachment')).toBeTruthy();
+    });
+
+    const giphyAttachment = screen.getByTestId('giphy-attachment');
+    let ancestor = giphyAttachment.parent;
+    let contentContainerStyle;
+
+    while (ancestor && !contentContainerStyle) {
+      const flattenedStyle = StyleSheet.flatten(ancestor.props.style);
+      if (
+        flattenedStyle &&
+        'paddingTop' in flattenedStyle &&
+        'paddingHorizontal' in flattenedStyle &&
+        'paddingBottom' in flattenedStyle
+      ) {
+        contentContainerStyle = flattenedStyle;
+        break;
+      }
+      ancestor = ancestor.parent;
+    }
+
+    expect(contentContainerStyle).toBeTruthy();
+    expect(contentContainerStyle.paddingTop).toBeGreaterThan(0);
+    expect(contentContainerStyle.paddingHorizontal).toBeGreaterThan(0);
+    expect(contentContainerStyle.paddingBottom).toBeGreaterThan(0);
+  });
+
   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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Text } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
 
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
@@ -10,6 +10,7 @@ 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 { generateChannelResponse } from '../../../../mock-builders/generator/channel';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateMessage } from '../../../../mock-builders/generator/message';
@@ -256,4 +257,23 @@ describe('MessageItemView', () => {
       });
     });
   });
+
+  it('keeps the message shell background for a quoted reply with a giphy attachment', async () => {
+    const user = generateUser();
+    const message = generateMessage({
+      attachments: [generateGiphyAttachment()],
+      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).not.toBe('transparent');
+    });
+  });
 });

package/src/components/Message/MessageItemView/utils/generateMarkdownText.test.ts

@@ -4,6 +4,9 @@ describe('generateMarkdownText', () => {
   it.each([
     ['', null],
     ['  test message  ', 'test message'],
+    ['\uFFFC', ''],
+    [' \uFFFC ', ''],
+    ['hello\uFFFCworld', 'hello world'],
     ['https://www.getstream.io', '[https://www.getstream.io](https://www.getstream.io)'],
     [
       'https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=',