stream-chat-react-native-core 4.3.1-beta.1 → 4.4.0-beta.1

package/lib/typescript/contexts/messagesContext/MessagesContext.d.ts

@@ -44,22 +44,22 @@ export declare type MessageContentType = 'attachments' | 'files' | 'gallery' | '
 export declare type MessagesContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /**
      * UI component for Attachment.
-     * Defaults to: [Attachment](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Attachment.tsx)
+     * Defaults to: [Attachment](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Attachment.tsx)
      */
     Attachment: React.ComponentType<AttachmentProps<StreamChatGenerics>>;
     /**
      * UI component to display AttachmentActions. e.g., send, shuffle, cancel in case of giphy
-     * Defaults to: [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/AttachmentActions.tsx)
+     * Defaults to: [AttachmentActions](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/AttachmentActions.tsx)
      */
     AttachmentActions: React.ComponentType<AttachmentActionsProps<StreamChatGenerics>>;
     /**
      * UI component to display generic media type e.g. giphy, url preview etc
-     * Defaults to: [Card](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Card.tsx)
+     * Defaults to: [Card](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Card.tsx)
      */
     Card: React.ComponentType<CardProps<StreamChatGenerics>>;
     /**
      * UI component for DateHeader
-     * Defaults to: [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageList/DateHeader.tsx)
+     * Defaults to: [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageList/DateHeader.tsx)
      **/
     DateHeader: React.ComponentType<DateHeaderProps>;
     /** Should keyboard be dismissed when messaged is touched */
@@ -67,28 +67,28 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     enableMessageGroupingByUser: boolean;
     /**
      * UI component to display File type attachment.
-     * Defaults to: [FileAttachment](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachment.tsx)
+     * Defaults to: [FileAttachment](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/FileAttachment.tsx)
      */
     FileAttachment: React.ComponentType<FileAttachmentProps<StreamChatGenerics>>;
     /**
      * UI component to display group of File type attachments or multiple file attachments (in single message).
-     * Defaults to: [FileAttachmentGroup](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachmentGroup.tsx)
+     * Defaults to: [FileAttachmentGroup](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/FileAttachmentGroup.tsx)
      */
     FileAttachmentGroup: React.ComponentType<FileAttachmentGroupProps<StreamChatGenerics>>;
     /**
      * UI component for attachment icon for type 'file' attachment.
-     * Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx
+     * Defaults to: https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/FileIcon.tsx
      */
     FileAttachmentIcon: React.ComponentType<FileIconProps>;
     FlatList: typeof FlatList;
     /**
      * UI component to display image attachments
-     * Defaults to: [Gallery](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Gallery.tsx)
+     * Defaults to: [Gallery](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Gallery.tsx)
      */
     Gallery: React.ComponentType<GalleryProps<StreamChatGenerics>>;
     /**
      * UI component for Giphy
-     * Defaults to: [Giphy](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Giphy.tsx)
+     * Defaults to: [Giphy](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Giphy.tsx)
      */
     Giphy: React.ComponentType<GiphyProps<StreamChatGenerics>>;
     /**
@@ -101,30 +101,30 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     initialScrollToFirstUnreadMessage: boolean;
     /**
      * UI component for Message Date Separator Component
-     * Defaults to: [InlineDateSeparator](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageList/InlineDateSeparator.tsx)
+     * Defaults to: [InlineDateSeparator](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageList/InlineDateSeparator.tsx)
      */
     InlineDateSeparator: React.ComponentType<InlineDateSeparatorProps>;
     /**
      * UI component for InlineUnreadIndicator
-     * Defaults to: [InlineUnreadIndicator](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/MessageSimple/InlineUnreadIndicator.tsx)
+     * Defaults to: [InlineUnreadIndicator](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/InlineUnreadIndicator.tsx)
      **/
     InlineUnreadIndicator: React.ComponentType;
     Message: React.ComponentType<MessageProps<StreamChatGenerics>>;
     /**
      * UI component for MessageAvatar
-     * Defaults to: [MessageAvatar](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/MessageSimple/MessageAvatar.tsx)
+     * Defaults to: [MessageAvatar](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/MessageAvatar.tsx)
      **/
     MessageAvatar: React.ComponentType<MessageAvatarProps<StreamChatGenerics>>;
     /**
      * UI component for MessageContent
-     * Defaults to: [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/MessageSimple/MessageContent.tsx)
+     * Defaults to: [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/MessageContent.tsx)
      */
     MessageContent: React.ComponentType<MessageContentProps<StreamChatGenerics>>;
     /** Order to render the message content */
     messageContentOrder: MessageContentType[];
     /**
      * UI component for MessageDeleted
-     * Defaults to: [MessageDeleted](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageDeleted.tsx)
+     * Defaults to: [MessageDeleted](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageSimple/MessageDeleted.tsx)
      */
     MessageDeleted: React.ComponentType<MessageDeletedProps<StreamChatGenerics>>;
     /**
@@ -138,22 +138,22 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     MessagePinnedHeader: React.ComponentType<MessagePinnedHeaderProps<StreamChatGenerics>>;
     /**
      * UI component for MessageReplies
-     * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageReplies.tsx)
+     * Defaults to: [MessageReplies](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageSimple/MessageReplies.tsx)
      */
     MessageReplies: React.ComponentType<MessageRepliesProps<StreamChatGenerics>>;
     /**
      * UI Component for MessageRepliesAvatars
-     * Defaults to: [MessageRepliesAvatars](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageRepliesAvatars.tsx)
+     * Defaults to: [MessageRepliesAvatars](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/MessageSimple/MessageRepliesAvatars.tsx)
      */
     MessageRepliesAvatars: React.ComponentType<MessageRepliesAvatarsProps<StreamChatGenerics>>;
     /**
      * UI component for MessageSimple
-     * Defaults to: [MessageSimple](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/MessageSimple/MessageSimple.tsx)
+     * Defaults to: [MessageSimple](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/MessageSimple.tsx)
      */
     MessageSimple: React.ComponentType<MessageSimpleProps<StreamChatGenerics>>;
     /**
      * UI component for MessageStatus (delivered/read)
-     * Defaults to: [MessageStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Message/MessageSimple/MessageStatus.tsx)
+     * Defaults to: [MessageStatus](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Message/MessageSimple/MessageStatus.tsx)
      */
     MessageStatus: React.ComponentType<MessageStatusProps<StreamChatGenerics>>;
     /**
@@ -167,7 +167,7 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     OverlayReactionList: React.ComponentType<OverlayReactionListProps<StreamChatGenerics>>;
     /**
      * UI component for ReactionList
-     * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Reaction/ReactionList.tsx)
+     * Defaults to: [ReactionList](https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Reaction/ReactionList.tsx)
      */
     ReactionList: React.ComponentType<ReactionListProps<StreamChatGenerics>>;
     removeMessage: (message: {
@@ -208,7 +208,7 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
     }) => void;
     /**
      * Custom UI component to display enriched url preview.
-     * Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/Card.tsx
+     * Defaults to https://github.com/GetStream/stream-chat-react-native/blob/master/package/src/components/Attachment/Card.tsx
      */
     UrlPreview: React.ComponentType<CardProps<StreamChatGenerics>>;
     /**

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -330,6 +330,7 @@ export declare type Theme = {
             unreadCountNotificationContainer: ViewStyle;
             unreadCountNotificationText: TextStyle;
             wrapper: ViewStyle;
+            chevronColor?: Color;
         };
         typingIndicatorContainer: ViewStyle;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.3.1-beta.1",
+  "version": "4.4.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -126,7 +126,7 @@
     "eslint-plugin-sort-destructure-keys": "1.3.5",
     "eslint-plugin-typescript-sort-keys": "1.6.0",
     "jest": "26.6.3",
-    "moment": "2.29.1",
+    "moment": "2.29.2",
     "prettier": "2.3.0",
     "react": "17.0.2",
     "react-docgen-typescript": "1.22.0",

package/src/components/Attachment/Giphy.tsx

@@ -65,6 +65,7 @@ const styles = StyleSheet.create({
   },
   giphyHeaderTitle: {
     fontSize: 14,
+    marginLeft: 8,
   },
   giphyMask: {
     bottom: 8,
@@ -84,7 +85,8 @@ const styles = StyleSheet.create({
     width: '60%',
   },
   selectionContainer: {
-    borderBottomLeftRadius: 8,
+    borderBottomRightRadius: 0,
+    borderRadius: 16,
     borderWidth: 1,
     overflow: 'hidden',
     width: 272,
@@ -201,6 +203,7 @@ const GiphyWithContext = <
         { backgroundColor: white, borderColor: `${black}0D` },
         selectionContainer,
       ]}
+      testID='giphy-action-attachment'
     >
       <View style={[styles.header, header]}>
         <GiphyIcon />
@@ -229,6 +232,7 @@ const GiphyWithContext = <
               { borderColor: grey_gainsboro, borderRightWidth: 1 },
               buttonContainer,
             ]}
+            testID={`${actions?.[2].value}-action-button`}
           >
             <Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
           </TouchableOpacity>
@@ -243,6 +247,7 @@ const GiphyWithContext = <
               { borderColor: grey_gainsboro, borderRightWidth: 1 },
               buttonContainer,
             ]}
+            testID={`${actions?.[1].value}-action-button`}
           >
             <Text style={[styles.shuffle, { color: grey }, shuffle]}>{actions?.[1].text}</Text>
           </TouchableOpacity>
@@ -253,6 +258,7 @@ const GiphyWithContext = <
               }
             }}
             style={[styles.buttonContainer, { borderColor: grey_gainsboro }, buttonContainer]}
+            testID={`${actions?.[0].value}-action-button`}
           >
             <Text style={[styles.send, { color: accent_blue }, send]}>{actions?.[0].text}</Text>
           </TouchableOpacity>

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

@@ -10,9 +10,7 @@ import {
   generateAudioAttachment,
   generateCardAttachment,
   generateFileAttachment,
-  generateGiphyAttachment,
   generateImageAttachment,
-  generateImgurAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { Attachment } from '../Attachment';
@@ -53,65 +51,6 @@ describe('Attachment', () => {
     });
   });
 
-  it('should render Card component for "imgur" type attachment', async () => {
-    const attachment = generateImgurAttachment();
-    const { getByTestId } = render(getAttachmentComponent({ attachment }));
-
-    await waitFor(() => {
-      expect(getByTestId('giphy-attachment')).toBeTruthy();
-    });
-  });
-
-  it('should render Card component for "giphy" type attachment', async () => {
-    const attachment = generateGiphyAttachment();
-    const { getByTestId } = render(getAttachmentComponent({ attachment }));
-
-    await waitFor(() => {
-      expect(getByTestId('giphy-attachment')).toBeTruthy();
-    });
-  });
-
-  it('"giphy" attachment size should be customisable', async () => {
-    const attachment = generateGiphyAttachment();
-    attachment.giphy = {
-      fixed_height: {
-        height: '200',
-        url: 'https://media1.giphy.com/media/test/fixed_height.gif',
-        width: '375',
-      },
-      original: {
-        height: '256',
-        url: 'https://media1.giphy.com/media/test/original.gif',
-        width: '480',
-      },
-    };
-    const { getByTestId: getByTestIdFixedHeight } = render(
-      getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
-    );
-    const { getByTestId: getByTestIdOriginal } = render(
-      getAttachmentComponent({ attachment, giphyVersion: 'original' }),
-    );
-    await waitFor(() => {
-      const checkImageProps = (imageProps, specificSizedGiphyData) => {
-        let imageStyle = imageProps.style;
-        if (Array.isArray(imageStyle)) {
-          imageStyle = Object.assign({}, ...imageStyle);
-        }
-        expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height));
-        expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width));
-        expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
-      };
-      checkImageProps(
-        getByTestIdFixedHeight('giphy-attachment-image').props,
-        attachment.giphy.fixed_height,
-      );
-      checkImageProps(
-        getByTestIdOriginal('giphy-attachment-image').props,
-        attachment.giphy.original,
-      );
-    });
-  });
-
   it('should render UrlPreview component if attachment has title_link or og_scrape_url', async () => {
     const attachment = generateImageAttachment({
       og_scrape_url: uuidv4(),

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

@@ -0,0 +1,290 @@
+import React from 'react';
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+
+import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
+import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
+import {
+  generateGiphyAttachment,
+  generateImgurAttachment,
+} 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';
+import { generateUser } from '../../../mock-builders/generator/user';
+import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { MessageList } from '../../MessageList/MessageList';
+import { Giphy } from '../Giphy';
+
+describe('Giphy', () => {
+  const getAttachmentComponent = (props) => {
+    const message = generateMessage();
+    return (
+      <ThemeProvider>
+        <MessageProvider value={{ message }}>
+          <Giphy {...props} />
+        </MessageProvider>
+      </ThemeProvider>
+    );
+  };
+
+  it('should render Card component for "imgur" type attachment', async () => {
+    const attachment = generateImgurAttachment();
+    const { getByTestId } = render(getAttachmentComponent({ attachment }));
+
+    await waitFor(() => {
+      expect(getByTestId('giphy-attachment')).toBeTruthy();
+    });
+  });
+
+  it('should render Card component for "giphy" type attachment', async () => {
+    const attachment = generateGiphyAttachment();
+    const { getByTestId } = render(getAttachmentComponent({ attachment }));
+
+    await waitFor(() => {
+      expect(getByTestId('giphy-attachment')).toBeTruthy();
+    });
+  });
+
+  it('"giphy" attachment size should be customisable', async () => {
+    const attachment = generateGiphyAttachment();
+    attachment.giphy = {
+      fixed_height: {
+        height: '200',
+        url: 'https://media1.giphy.com/media/test/fixed_height.gif',
+        width: '375',
+      },
+      original: {
+        height: '256',
+        url: 'https://media1.giphy.com/media/test/original.gif',
+        width: '480',
+      },
+    };
+    const { getByTestId: getByTestIdFixedHeight } = render(
+      getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
+    );
+    const { getByTestId: getByTestIdOriginal } = render(
+      getAttachmentComponent({ attachment, giphyVersion: 'original' }),
+    );
+    await waitFor(() => {
+      const checkImageProps = (imageProps, specificSizedGiphyData) => {
+        let imageStyle = imageProps.style;
+        if (Array.isArray(imageStyle)) {
+          imageStyle = Object.assign({}, ...imageStyle);
+        }
+        expect(imageStyle.height).toBe(parseFloat(specificSizedGiphyData.height));
+        expect(imageStyle.width).toBe(parseFloat(specificSizedGiphyData.width));
+        expect(imageProps.source.uri).toBe(specificSizedGiphyData.url);
+      };
+      checkImageProps(
+        getByTestIdFixedHeight('giphy-attachment-image').props,
+        attachment.giphy.fixed_height,
+      );
+      checkImageProps(
+        getByTestIdOriginal('giphy-attachment-image').props,
+        attachment.giphy.original,
+      );
+    });
+  });
+
+  it('show render giphy action UI and all the 3 action buttons', async () => {
+    const attachment = generateGiphyAttachment();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const { getByTestId } = render(
+      getAttachmentComponent({ attachment, giphyVersion: 'fixed_height' }),
+    );
+
+    await waitFor(() => {
+      expect(getByTestId('giphy-action-attachment')).toBeTruthy();
+      expect(getByTestId('cancel-action-button')).toBeTruthy();
+      expect(getByTestId('shuffle-action-button')).toBeTruthy();
+      expect(getByTestId('send-action-button')).toBeTruthy();
+    });
+  });
+
+  it('should trigger the cancel giphy action', async () => {
+    const attachment = generateGiphyAttachment();
+    const handleAction = jest.fn();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const { getByTestId } = render(
+      getAttachmentComponent({
+        attachment,
+        giphyVersion: 'fixed_height',
+        handleAction,
+      }),
+    );
+
+    await waitFor(() => getByTestId(`${attachment.actions[2].value}-action-button`));
+
+    expect(getByTestId('giphy-action-attachment')).toContainElement(
+      getByTestId(`${attachment.actions[2].value}-action-button`),
+    );
+
+    fireEvent.press(getByTestId(`${attachment.actions[2].value}-action-button`));
+
+    await waitFor(() => {
+      expect(handleAction).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should trigger the shuffle giphy action', async () => {
+    const attachment = generateGiphyAttachment();
+    const handleAction = jest.fn();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const { getByTestId } = render(
+      getAttachmentComponent({
+        attachment,
+        giphyVersion: 'fixed_height',
+        handleAction,
+      }),
+    );
+
+    await waitFor(() => getByTestId(`${attachment.actions[1].value}-action-button`));
+
+    expect(getByTestId('giphy-action-attachment')).toContainElement(
+      getByTestId(`${attachment.actions[1].value}-action-button`),
+    );
+
+    fireEvent.press(getByTestId(`${attachment.actions[1].value}-action-button`));
+
+    await waitFor(() => {
+      expect(handleAction).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should trigger the send giphy action', async () => {
+    const attachment = generateGiphyAttachment();
+    const handleAction = jest.fn();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const { getByTestId } = render(
+      getAttachmentComponent({
+        attachment,
+        giphyVersion: 'fixed_height',
+        handleAction,
+      }),
+    );
+
+    await waitFor(() => getByTestId(`${attachment.actions[0].value}-action-button`));
+
+    expect(getByTestId('giphy-action-attachment')).toContainElement(
+      getByTestId(`${attachment.actions[0].value}-action-button`),
+    );
+
+    fireEvent.press(getByTestId(`${attachment.actions[0].value}-action-button`));
+
+    await waitFor(() => {
+      expect(handleAction).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('giphy attachment UI should render within the message list with actions', async () => {
+    const user1 = generateUser();
+    const attachment = generateGiphyAttachment();
+    attachment.actions = [
+      { name: 'image_action', text: 'Send', value: 'send' },
+      { name: 'image_action', text: 'Shuffle', value: 'shuffle' },
+      {
+        name: 'image_action',
+        text: 'Cancel',
+        value: 'cancel',
+      },
+    ];
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [
+        generateMessage({ user: user1 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ attachments: [{ ...attachment }], user: user1 }),
+      ],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const { getByTestId, queryByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    expect(queryByTestId('giphy-action-attachment')).toBeTruthy();
+    expect(getByTestId('cancel-action-button')).toBeTruthy();
+    expect(getByTestId('shuffle-action-button')).toBeTruthy();
+    expect(getByTestId('send-action-button')).toBeTruthy();
+  });
+
+  it('giphy attachment UI should render within the message list', async () => {
+    const user1 = generateUser();
+    const attachment = generateGiphyAttachment();
+
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [
+        generateMessage({ user: user1 }),
+        generateMessage({ type: 'system', user: undefined }),
+        generateMessage({ attachments: [{ ...attachment }], user: user1 }),
+      ],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.id);
+    await channel.watch();
+
+    const { queryByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    expect(queryByTestId('giphy-attachment')).toBeTruthy();
+  });
+});