stream-chat-react-native-core 9.0.0-beta.26 → 9.0.0-beta.28

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/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);
     }
   };
 
@@ -500,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) {
@@ -711,6 +700,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     goToMessage,
     groupStyles,
     handleAction,
+    hasAttachmentActions,
     handleReaction,
     handleToggleReaction,
     hasReactions,

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';
 
@@ -199,6 +200,7 @@ export type MessageItemViewPropsWithContext = Pick<
   | 'alignment'
   | 'channel'
   | 'groupStyles'
+  | 'hasAttachmentActions'
   | 'isMyMessage'
   | 'message'
   | 'onlyEmojis'
@@ -240,6 +242,7 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     enableMessageGroupingByUser,
     enableSwipeToReply,
     groupStyles,
+    hasAttachmentActions,
     isMyMessage,
     message,
     MessageAuthor,
@@ -293,10 +296,15 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   });
 
   const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
+  const hasVisibleQuotedReply = !!message.quoted_message && !hasAttachmentActions;
+  const hasStandaloneGiphyOrImgur =
+    !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 (otherAttachments[0].type === 'giphy' && !isMyMessage) {
+    if (hasStandaloneGiphyOrImgur && !isMyMessage) {
       noBorder = false;
     } else {
       noBorder = true;
@@ -304,12 +312,10 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
   }
 
   let backgroundColor = semantics.chatBgOutgoing;
-  if (onlyEmojis && !message.quoted_message) {
+  if (onlyEmojis && !hasVisibleQuotedReply) {
+    backgroundColor = 'transparent';
+  } else if (hasStandaloneGiphyOrImgur) {
     backgroundColor = 'transparent';
-  } else if (otherAttachments.length) {
-    if (otherAttachments[0].type === 'giphy') {
-      backgroundColor = 'transparent';
-    }
   } else if (isMessageReceivedOrErrorType) {
     backgroundColor = semantics.chatBgIncoming;
   }
@@ -519,6 +525,7 @@ export const MessageItemView = (props: MessageItemViewProps) => {
     alignment,
     channel,
     groupStyles,
+    hasAttachmentActions,
     isMyMessage,
     message,
     contextMenuAnchorRef,
@@ -560,6 +567,7 @@ export const MessageItemView = (props: MessageItemViewProps) => {
         enableMessageGroupingByUser,
         enableSwipeToReply,
         groupStyles,
+        hasAttachmentActions,
         isMyMessage,
         message,
         MessageAuthor,

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,11 @@ 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 {
+  generateAttachmentAction,
+  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 +330,73 @@ 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('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

@@ -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,10 @@ import { useMessageContext } from '../../../../contexts/messageContext/MessageCo
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
+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';
@@ -256,4 +260,51 @@ 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');
+    });
+  });
+
+  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/ShowThreadMessageInChannelButton.tsx

@@ -76,6 +76,7 @@ export const ShowThreadMessageInChannelButtonWithContext = (
               showReplyInChannel
                 ? {
                     backgroundColor: semantics.controlRadioCheckBgSelected,
+                    borderWidth: 0,
                     ...checkBoxActive,
                   }
                 : { ...checkBoxInactive },