stream-chat-react-native-core 4.2.0-beta.3 → 4.3.0-beta.1

package/lib/typescript/contexts/messageInputContext/hooks/useCreateMessageInputContext.d.ts

@@ -1,4 +1,4 @@
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { ThreadContextValue } from '../../threadContext/ThreadContext';
 import type { MessageInputContextValue } from '../MessageInputContext';
-export declare const useCreateMessageInputContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ additionalTextInputProps, appendText, asyncIds, asyncUploads, AttachButton, autoCompleteSuggestionsLimit, clearEditingState, clearQuotedMessageState, closeAttachmentPicker, CommandsButton, compressImageQuality, cooldownEndsAt, CooldownTimer, doDocUploadRequest, doImageUploadRequest, editing, editMessage, FileUploadPreview, fileUploads, giphyActive, hasCommands, hasFilePicker, hasImagePicker, ImageUploadPreview, imageUploads, initialValue, Input, inputBoxRef, InputButtons, isValidMessage, maxMessageLength, maxNumberOfFiles, mentionAllAppUsersEnabled, mentionAllAppUsersQuery, mentionedUsers, MoreOptionsButton, numberOfLines, numberOfUploads, onChange, onChangeText, onSelectItem, openAttachmentPicker, openCommandsPicker, openFilePicker, openMentionsPicker, pickFile, quotedMessage, removeFile, removeImage, resetInput, selectedPicker, SendButton, sendImageAsync, sending, sendMessage, sendMessageAsync, SendMessageDisallowedIndicator, sendThreadMessageInChannel, setAsyncIds, setAsyncUploads, setFileUploads, setGiphyActive, setImageUploads, setInputBoxRef, setInputRef, setMentionedUsers, setNumberOfUploads, setQuotedMessageState, setSendThreadMessageInChannel, setShowMoreOptions, setText, showMoreOptions, ShowThreadMessageInChannelButton, text, thread, toggleAttachmentPicker, triggerSettings, updateMessage, uploadFile, uploadImage, uploadNewFile, uploadNewImage, UploadProgressIndicator, }: import("../MessageInputContext").LocalMessageInputContext<StreamChatGenerics> & Omit<import("../MessageInputContext").InputMessageInputContextValue<StreamChatGenerics>, "sendMessage"> & Pick<ThreadContextValue<StreamChatGenerics>, "thread">) => MessageInputContextValue<StreamChatGenerics>;
+export declare const useCreateMessageInputContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ additionalTextInputProps, appendText, asyncIds, asyncUploads, AttachButton, autoCompleteSuggestionsLimit, clearEditingState, clearQuotedMessageState, closeAttachmentPicker, CommandsButton, compressImageQuality, cooldownEndsAt, CooldownTimer, doDocUploadRequest, doImageUploadRequest, editing, editMessage, FileUploadPreview, fileUploads, giphyActive, hasCommands, hasFilePicker, hasImagePicker, ImageUploadPreview, imageUploads, initialValue, Input, inputBoxRef, InputButtons, InputEditingStateHeader, InputGiphySearch, InputReplyStateHeader, isValidMessage, maxMessageLength, maxNumberOfFiles, mentionAllAppUsersEnabled, mentionAllAppUsersQuery, mentionedUsers, MoreOptionsButton, numberOfLines, numberOfUploads, onChange, onChangeText, onSelectItem, openAttachmentPicker, openCommandsPicker, openFilePicker, openMentionsPicker, pickFile, quotedMessage, removeFile, removeImage, resetInput, selectedPicker, SendButton, sendImageAsync, sending, sendMessage, sendMessageAsync, SendMessageDisallowedIndicator, sendThreadMessageInChannel, setAsyncIds, setAsyncUploads, setFileUploads, setGiphyActive, setImageUploads, setInputBoxRef, setInputRef, setMentionedUsers, setNumberOfUploads, setQuotedMessageState, setSendThreadMessageInChannel, setShowMoreOptions, setText, showMoreOptions, ShowThreadMessageInChannelButton, text, thread, toggleAttachmentPicker, triggerSettings, updateMessage, uploadFile, uploadImage, uploadNewFile, uploadNewImage, UploadProgressIndicator, }: import("../MessageInputContext").LocalMessageInputContext<StreamChatGenerics> & Omit<import("../MessageInputContext").InputMessageInputContextValue<StreamChatGenerics>, "sendMessage"> & Pick<ThreadContextValue<StreamChatGenerics>, "thread">) => MessageInputContextValue<StreamChatGenerics>;

package/lib/typescript/contexts/overlayContext/OverlayContext.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import type { Attachment } from 'stream-chat';
 import type { AttachmentPickerProps } from '../../components/AttachmentPicker/AttachmentPicker';
 import type { ImageGalleryCustomComponents } from '../../components/ImageGallery/ImageGallery';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
@@ -18,6 +19,10 @@ export declare type OverlayContextValue = {
 };
 export declare const OverlayContext: React.Context<OverlayContextValue>;
 export declare type OverlayProviderProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<AttachmentPickerProps> & Partial<Pick<AttachmentPickerContextValue, 'attachmentPickerBottomSheetHeight' | 'attachmentSelectionBarHeight' | 'bottomInset' | 'CameraSelectorIcon' | 'FileSelectorIcon' | 'ImageSelectorIcon' | 'topInset'>> & ImageGalleryCustomComponents<StreamChatGenerics> & Partial<Pick<MessageOverlayContextValue<StreamChatGenerics>, 'MessageActionList' | 'MessageActionListItem' | 'OverlayReactionList' | 'OverlayReactions' | 'OverlayReactionsAvatar'>> & Pick<OverlayContextValue, 'translucentStatusBar'> & {
+    /**
+     * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
+     * */
+    giphyVersion: keyof NonNullable<Attachment['giphy']>;
     closePicker?: (ref: React.RefObject<BottomSheetMethods>) => void;
     error?: boolean | Error;
     /** https://github.com/GetStream/stream-chat-react-native/wiki/Internationalization-(i18n) */

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

@@ -229,6 +229,10 @@ export declare type Theme = {
         editingBoxContainer: ViewStyle;
         editingBoxHeader: ViewStyle;
         editingBoxHeaderTitle: TextStyle;
+        editingStateHeader: {
+            editingBoxHeader: ViewStyle;
+            editingBoxHeaderTitle: TextStyle;
+        };
         fileUploadPreview: {
             dismiss: ViewStyle;
             fileContainer: ViewStyle;
@@ -238,8 +242,10 @@ export declare type Theme = {
             fileTextContainer: ViewStyle;
             flatList: ViewStyle;
         };
-        giphyContainer: ViewStyle;
-        giphyText: TextStyle;
+        giphyCommandInput: {
+            giphyContainer: ViewStyle;
+            giphyText: TextStyle;
+        };
         imageUploadPreview: {
             dismiss: ViewStyle;
             flatList: 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.2.0-beta.3",
+  "version": "4.3.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Giphy.tsx

@@ -3,6 +3,10 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
+import {
+  ImageGalleryContextValue,
+  useImageGalleryContext,
+} from '../../contexts/imageGalleryContext/ImageGalleryContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -11,6 +15,10 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import {
+  OverlayContextValue,
+  useOverlayContext,
+} from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { GiphyIcon } from '../../icons';
 import { Lightning } from '../../icons/Lightning';
@@ -107,13 +115,20 @@ const styles = StyleSheet.create({
 
 export type GiphyPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<
-  MessageContextValue<StreamChatGenerics>,
-  'handleAction' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
-> &
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+  Pick<
+    MessageContextValue<StreamChatGenerics>,
+    | 'handleAction'
+    | 'isMyMessage'
+    | 'message'
+    | 'onLongPress'
+    | 'onPress'
+    | 'onPressIn'
+    | 'preventPress'
+  > &
   Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'> & {
     attachment: Attachment<StreamChatGenerics>;
-  };
+  } & Pick<OverlayContextValue, 'setOverlay'>;
 
 const GiphyWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -123,11 +138,17 @@ const GiphyWithContext = <
   const {
     additionalTouchableProps,
     attachment,
+    giphyVersion,
     handleAction,
+    isMyMessage,
+    message,
     onLongPress,
     onPress,
     onPressIn,
     preventPress,
+    setImage,
+    setImages,
+    setOverlay,
   } = props;
 
   const { actions, giphy: giphyData, image_url, thumb_url, title, type } = attachment;
@@ -158,8 +179,14 @@ const GiphyWithContext = <
   let uri = image_url || thumb_url;
   const giphyDimensions: { height?: number; width?: number } = {};
 
+  const defaultOnPress = () => {
+    setImages([message]);
+    setImage({ messageId: message.id, url: uri });
+    setOverlay('gallery');
+  };
+
   if (type === 'giphy' && giphyData) {
-    const giphyVersionInfo = giphyData[props.giphyVersion];
+    const giphyVersionInfo = giphyData[giphyVersion];
     uri = giphyVersionInfo.url;
     giphyDimensions.height = parseFloat(giphyVersionInfo.height);
     giphyDimensions.width = parseFloat(giphyVersionInfo.width);
@@ -246,6 +273,7 @@ const GiphyWithContext = <
       onPress={(event) => {
         if (onPress) {
           onPress({
+            defaultHandler: defaultOnPress,
             emitter: 'giphy',
             event,
           });
@@ -262,7 +290,13 @@ const GiphyWithContext = <
       testID='giphy-attachment'
       {...additionalTouchableProps}
     >
-      <View style={[styles.container, container]}>
+      <View
+        style={[
+          styles.container,
+          { backgroundColor: isMyMessage ? grey_gainsboro : white },
+          container,
+        ]}
+      >
         <Image
           resizeMode='contain'
           source={{ uri: makeImageCompatibleUrl(uri) }}
@@ -295,10 +329,12 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   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;
@@ -307,9 +343,6 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   const thumbUrlEqual = prevThumbUrl === nextThumbUrl;
   if (!thumbUrlEqual) return false;
 
-  const giphyVersionEqual = prevGiphyVersion === nextGiphyVersion;
-  if (!giphyVersionEqual) return false;
-
   const actionsEqual =
     Array.isArray(prevActions) === Array.isArray(nextActions) &&
     ((Array.isArray(prevActions) &&
@@ -318,6 +351,12 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
       prevActions === nextActions);
   if (!actionsEqual) return false;
 
+  const giphyVersionEqual = prevGiphyVersion === nextGiphyVersion;
+  if (!giphyVersionEqual) return false;
+
+  const isMyMessageEqual = prevIsMyMessage === nextIsMyMessage;
+  if (!isMyMessageEqual) return false;
+
   return true;
 };
 
@@ -325,10 +364,7 @@ const MemoizedGiphy = React.memo(GiphyWithContext, areEqual) as typeof GiphyWith
 
 export type GiphyProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Partial<
-  Pick<MessageContextValue<StreamChatGenerics>, 'isMyMessage' | 'onLongPress' | 'onPressIn'> &
-    Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'>
-> & {
+> = Partial<GiphyPropsWithContext<StreamChatGenerics>> & {
   attachment: Attachment<StreamChatGenerics>;
 };
 
@@ -340,20 +376,26 @@ export const Giphy = <
 >(
   props: GiphyProps<StreamChatGenerics>,
 ) => {
-  const { handleAction, onLongPress, onPress, onPressIn, preventPress } =
+  const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
   const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
-
+  const { setImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setOverlay } = useOverlayContext();
   return (
     <MemoizedGiphy
       {...{
         additionalTouchableProps,
         giphyVersion,
         handleAction,
+        isMyMessage,
+        message,
         onLongPress,
         onPress,
         onPressIn,
         preventPress,
+        setImage,
+        setImages,
+        setOverlay,
       }}
       {...props}
     />

package/src/components/Channel/Channel.tsx

@@ -105,6 +105,9 @@ import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/
 import { ReactionList as ReactionListDefault } from '../Message/MessageSimple/ReactionList';
 import { AttachButton as AttachButtonDefault } from '../MessageInput/AttachButton';
 import { CommandsButton as CommandsButtonDefault } from '../MessageInput/CommandsButton';
+import { InputEditingStateHeader as InputEditingStateHeaderDefault } from '../MessageInput/components/InputEditingStateHeader';
+import { InputGiphySearch as InputGiphyCommandInputDefault } from '../MessageInput/components/InputGiphySearch';
+import { InputReplyStateHeader as InputReplyStateHeaderDefault } from '../MessageInput/components/InputReplyStateHeader';
 import { CooldownTimer as CooldownTimerDefault } from '../MessageInput/CooldownTimer';
 import { FileUploadPreview as FileUploadPreviewDefault } from '../MessageInput/FileUploadPreview';
 import { ImageUploadPreview as ImageUploadPreviewDefault } from '../MessageInput/ImageUploadPreview';
@@ -452,6 +455,9 @@ const ChannelWithContext = <
     InlineUnreadIndicator = InlineUnreadIndicatorDefault,
     Input,
     InputButtons = InputButtonsDefault,
+    InputEditingStateHeader = InputEditingStateHeaderDefault,
+    InputGiphySearch = InputGiphyCommandInputDefault,
+    InputReplyStateHeader = InputReplyStateHeaderDefault,
     keyboardBehavior,
     KeyboardCompatibleView = KeyboardCompatibleViewDefault,
     keyboardVerticalOffset,
@@ -1621,6 +1627,9 @@ const ChannelWithContext = <
     initialValue,
     Input,
     InputButtons,
+    InputEditingStateHeader,
+    InputGiphySearch,
+    InputReplyStateHeader,
     maxMessageLength: maxMessageLengthProp ?? clientChannelConfig?.max_message_length ?? undefined,
     maxNumberOfFiles,
     mentionAllAppUsersEnabled,

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -28,6 +28,9 @@ export const useCreateInputMessageInputContext = <
   initialValue,
   Input,
   InputButtons,
+  InputEditingStateHeader,
+  InputGiphySearch,
+  InputReplyStateHeader,
   maxMessageLength,
   maxNumberOfFiles,
   mentionAllAppUsersEnabled,
@@ -80,6 +83,9 @@ export const useCreateInputMessageInputContext = <
       initialValue,
       Input,
       InputButtons,
+      InputEditingStateHeader,
+      InputGiphySearch,
+      InputReplyStateHeader,
       maxMessageLength,
       maxNumberOfFiles,
       mentionAllAppUsersEnabled,

package/src/components/ImageGallery/ImageGallery.tsx

@@ -53,7 +53,10 @@ import {
 } from './components/ImageGridHandle';
 
 import { useImageGalleryContext } from '../../contexts/imageGalleryContext/ImageGalleryContext';
-import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
+import {
+  OverlayProviderProps,
+  useOverlayContext,
+} from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { triggerHaptic } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -130,7 +133,7 @@ type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamC
      */
     imageGalleryGridSnapPoints?: [string | number, string | number];
     numberOfImageGalleryGridColumns?: number;
-  };
+  } & Pick<OverlayProviderProps<StreamChatGenerics>, 'giphyVersion'>;
 
 export const ImageGallery = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -138,6 +141,7 @@ export const ImageGallery = <
   props: Props<StreamChatGenerics>,
 ) => {
   const {
+    giphyVersion,
     imageGalleryCustomComponents,
     imageGalleryGridHandleHeight,
     imageGalleryGridSnapPoints,
@@ -308,10 +312,11 @@ export const ImageGallery = <
     const attachmentImages =
       cur.attachments?.filter(
         (attachment) =>
-          attachment.type === 'image' &&
-          !attachment.title_link &&
-          !attachment.og_scrape_url &&
-          getUrlOfImageAttachment(attachment),
+          (attachment.type === 'giphy' && attachment.giphy?.[giphyVersion]?.url) ||
+          (attachment.type === 'image' &&
+            !attachment.title_link &&
+            !attachment.og_scrape_url &&
+            getUrlOfImageAttachment(attachment)),
       ) || [];
 
     const attachmentPhotos = attachmentImages.map((a) => {

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

@@ -212,7 +212,7 @@ const MessageContentWithContext = <
     backgroundColor = transparent;
   } else if (otherAttachments.length) {
     if (otherAttachments[0].type === 'giphy') {
-      backgroundColor = message.quoted_message || isMyMessage ? grey_gainsboro : white;
+      backgroundColor = message.quoted_message ? grey_gainsboro : transparent;
     } else {
       backgroundColor = blue_alice;
     }

package/src/components/MessageInput/MessageInput.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import type { UserResponse } from 'stream-chat';
 
@@ -29,7 +29,6 @@ import {
   TranslationContextValue,
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
-import { CircleClose, CurveLineLeftUp, Edit, Lightning } from '../../icons';
 
 import type { Asset } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
@@ -44,6 +43,8 @@ const styles = StyleSheet.create({
   autoCompleteInputContainer: {
     alignItems: 'center',
     flexDirection: 'row',
+    paddingLeft: 16,
+    paddingRight: 16,
   },
   composerContainer: {
     alignItems: 'flex-end',
@@ -53,28 +54,6 @@ const styles = StyleSheet.create({
     borderTopWidth: 1,
     padding: 10,
   },
-  editingBoxHeader: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingBottom: 10,
-  },
-  editingBoxHeaderTitle: {
-    fontSize: 14,
-    fontWeight: 'bold',
-  },
-  giphyContainer: {
-    alignItems: 'center',
-    borderRadius: 12,
-    flexDirection: 'row',
-    height: 24,
-    marginRight: 8,
-    paddingHorizontal: 8,
-  },
-  giphyText: {
-    fontSize: 12,
-    fontWeight: 'bold',
-  },
   inputBoxContainer: {
     borderRadius: 20,
     borderWidth: 1,
@@ -120,6 +99,9 @@ type MessageInputPropsWithContext<
     | 'Input'
     | 'inputBoxRef'
     | 'InputButtons'
+    | 'InputEditingStateHeader'
+    | 'InputGiphySearch'
+    | 'InputReplyStateHeader'
     | 'isValidMessage'
     | 'maxNumberOfFiles'
     | 'mentionedUsers'
@@ -160,8 +142,6 @@ const MessageInputWithContext = <
     asyncIds,
     asyncUploads,
     AutoCompleteSuggestionList,
-    clearEditingState,
-    clearQuotedMessageState,
     closeAttachmentPicker,
     cooldownEndsAt,
     CooldownTimer,
@@ -175,6 +155,9 @@ const MessageInputWithContext = <
     Input,
     inputBoxRef,
     InputButtons,
+    InputEditingStateHeader,
+    InputGiphySearch,
+    InputReplyStateHeader,
     isValidMessage,
     maxNumberOfFiles,
     members,
@@ -187,11 +170,8 @@ const MessageInputWithContext = <
     SendButton,
     sending,
     sendMessageAsync,
-    setGiphyActive,
-    setShowMoreOptions,
     ShowThreadMessageInChannelButton,
     suggestions,
-    t,
     thread,
     threadList,
     triggerType,
@@ -203,25 +183,12 @@ const MessageInputWithContext = <
 
   const {
     theme: {
-      colors: {
-        accent_blue,
-        black,
-        border,
-        grey,
-        grey_gainsboro,
-        grey_whisper,
-        white,
-        white_smoke,
-      },
+      colors: { border, grey_whisper, white, white_smoke },
       messageInput: {
         attachmentSelectionBar,
         autoCompleteInputContainer,
         composerContainer,
         container,
-        editingBoxHeader,
-        editingBoxHeaderTitle,
-        giphyContainer,
-        giphyText,
         inputBoxContainer,
         optionsContainer,
         replyContainer,
@@ -434,33 +401,8 @@ const MessageInputWithContext = <
         }) => setHeight(newHeight)}
         style={[styles.container, { backgroundColor: white, borderColor: border }, container]}
       >
-        {(editing || quotedMessage) && (
-          <View style={[styles.editingBoxHeader, editingBoxHeader]}>
-            {editing ? (
-              <Edit pathFill={grey_gainsboro} />
-            ) : (
-              <CurveLineLeftUp pathFill={grey_gainsboro} />
-            )}
-            <Text style={[styles.editingBoxHeaderTitle, { color: black }, editingBoxHeaderTitle]}>
-              {editing ? t('Editing Message') : t('Reply to Message')}
-            </Text>
-            <TouchableOpacity
-              disabled={disabled}
-              onPress={() => {
-                resetInput();
-                if (editing) {
-                  clearEditingState();
-                }
-                if (quotedMessage) {
-                  clearQuotedMessageState();
-                }
-              }}
-              testID='close-button'
-            >
-              <CircleClose pathFill={grey} />
-            </TouchableOpacity>
-          </View>
-        )}
+        {editing && <InputEditingStateHeader />}
+        {quotedMessage && <InputReplyStateHeader />}
         <View style={[styles.composerContainer, composerContainer]}>
           {Input ? (
             <Input
@@ -500,45 +442,16 @@ const MessageInputWithContext = <
                   />
                 ) : null}
                 {fileUploads.length ? <FileUploadPreview /> : null}
-                <View
-                  style={[
-                    styles.autoCompleteInputContainer,
-                    {
-                      paddingLeft: giphyActive ? 8 : 16,
-                      paddingRight: giphyActive ? 10 : 16,
-                    },
-                    autoCompleteInputContainer,
-                  ]}
-                >
-                  {giphyActive && (
-                    <View
-                      style={[
-                        styles.giphyContainer,
-                        { backgroundColor: accent_blue },
-                        giphyContainer,
-                      ]}
-                    >
-                      <Lightning height={16} pathFill={white} width={16} />
-                      <Text style={[styles.giphyText, { color: white }, giphyText]}>GIPHY</Text>
-                    </View>
-                  )}
-                  <AutoCompleteInput<StreamChatGenerics>
-                    additionalTextInputProps={additionalTextInputProps}
-                    cooldownActive={!!cooldownRemainingSeconds}
-                  />
-                  {giphyActive && (
-                    <TouchableOpacity
-                      disabled={disabled}
-                      onPress={() => {
-                        setGiphyActive(false);
-                        setShowMoreOptions(true);
-                      }}
-                      testID='close-button'
-                    >
-                      <CircleClose height={20} pathFill={grey} width={20} />
-                    </TouchableOpacity>
-                  )}
-                </View>
+                {giphyActive ? (
+                  <InputGiphySearch />
+                ) : (
+                  <View style={[styles.autoCompleteInputContainer, autoCompleteInputContainer]}>
+                    <AutoCompleteInput<StreamChatGenerics>
+                      additionalTextInputProps={additionalTextInputProps}
+                      cooldownActive={!!cooldownRemainingSeconds}
+                    />
+                  </View>
+                )}
               </View>
               <View style={[styles.sendButtonContainer, sendButtonContainer]}>
                 {cooldownRemainingSeconds ? (
@@ -745,6 +658,9 @@ export const MessageInput = <
     Input,
     inputBoxRef,
     InputButtons,
+    InputEditingStateHeader,
+    InputGiphySearch,
+    InputReplyStateHeader,
     isValidMessage,
     maxNumberOfFiles,
     mentionedUsers,
@@ -805,6 +721,9 @@ export const MessageInput = <
         Input,
         inputBoxRef,
         InputButtons,
+        InputEditingStateHeader,
+        InputGiphySearch,
+        InputReplyStateHeader,
         isValidMessage,
         maxNumberOfFiles,
         members,

package/src/components/MessageInput/__tests__/__snapshots__/MessageInput.test.js.snap

@@ -257,8 +257,6 @@ Array [
                   Object {
                     "alignItems": "center",
                     "flexDirection": "row",
-                  },
-                  Object {
                     "paddingLeft": 16,
                     "paddingRight": 16,
                   },