fix: replies with giphies

Author: isekovanic

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/contexts/messageContext/MessageContext.tsx

@@ -40,6 +40,8 @@ export type MessageContextValue = {
   groupStyles: GroupType[];
   /** Handler for actions. Actions in combination with attachments can be used to build [commands](https://getstream.io/chat/docs/#channel_commands). */
   handleAction: ActionHandler;
+  /** Whether or not any message attachment exposes actions. */
+  hasAttachmentActions: boolean;
   handleToggleReaction: (reactionType: string) => Promise<void>;
   /** Whether or not message has reactions */
   hasReactions: boolean;