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

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",
+  "version": "4.3.0-beta.3",
   "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' | 'isMyMessage' | '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,12 +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;
@@ -159,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);
@@ -247,6 +273,7 @@ const GiphyWithContext = <
       onPress={(event) => {
         if (onPress) {
           onPress({
+            defaultHandler: defaultOnPress,
             emitter: 'giphy',
             event,
           });
@@ -337,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>;
 };
 
@@ -352,10 +376,11 @@ export const Giphy = <
 >(
   props: GiphyProps<StreamChatGenerics>,
 ) => {
-  const { handleAction, isMyMessage, 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
       {...{
@@ -363,10 +388,14 @@ export const Giphy = <
         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/Channel/hooks/useCreatePaginatedMessageListContext.ts

@@ -23,7 +23,7 @@ export const useCreatePaginatedMessageListContext = <
       ({ deleted_at, latest_reactions, reply_count, status, updated_at }) =>
         `${deleted_at}${
           latest_reactions ? latest_reactions.map(({ type }) => type).join() : ''
-        }${reply_count}${status}${updated_at.toISOString()}`,
+        }${reply_count}${status}${updated_at?.toISOString?.() || updated_at}`,
     )
     .join();
 

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,14 @@ 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.thumb_url ||
+              attachment.image_url)) ||
+          (attachment.type === 'image' &&
+            !attachment.title_link &&
+            !attachment.og_scrape_url &&
+            getUrlOfImageAttachment(attachment)),
       ) || [];
 
     const attachmentPhotos = attachmentImages.map((a) => {

package/src/components/Message/MessageSimple/utils/parseLinks.test.ts

@@ -97,4 +97,11 @@ getstream.io
       scheme: 'https://',
     });
   });
+
+  it('does not parse a decimal number as a URL', () => {
+    const input = '123.456';
+    const result = parseLinksFromText(input);
+
+    expect(result).toHaveLength(0);
+  });
 });

package/src/components/Message/MessageSimple/utils/parseLinks.ts

@@ -8,7 +8,8 @@
  * */
 const emailUserName = '[\\w+\\.~$_-]+';
 const schema = `(\\w{2,15}:\\/\\/)`;
-const domain = `((?:\\w+\\.\\w+)+(?:[^:\\/\\s]+))`;
+// something.tld OR 123.123.123.123
+const domain = `((?:\\w+\\.[a-zA-Z]+)+(?:[^:\\/\\s]+)|(?:\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}\\.\\d{1,3}))`;
 const port = `(:[0-9]{1,5})`;
 const path = `((?:\\/)?[^?#\\s]+)`;
 const queryString = `(\\?[^#\\s]+)`;

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,
                   },

package/src/components/MessageInput/components/InputEditingStateHeader.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import {
+  MessageInputContextValue,
+  useMessageInputContext,
+} from '../../../contexts/messageInputContext/MessageInputContext';
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+
+import { CircleClose, Edit } from '../../../icons';
+import type { DefaultStreamChatGenerics } from '../../../types/types';
+
+const styles = StyleSheet.create({
+  editingBoxHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingBottom: 10,
+  },
+  editingBoxHeaderTitle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});
+
+export type InputEditingStateHeaderPropsWithContext<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageInputContextValue<StreamChatGenerics>, 'clearEditingState' | 'resetInput'> &
+  Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'>;
+
+export const InputEditingStateHeaderWithContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  clearEditingState,
+  disabled,
+  resetInput,
+}: InputEditingStateHeaderPropsWithContext<StreamChatGenerics>) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      colors: { black, grey, grey_gainsboro },
+      messageInput: {
+        editingStateHeader: { editingBoxHeader, editingBoxHeaderTitle },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.editingBoxHeader, editingBoxHeader]}>
+      <Edit pathFill={grey_gainsboro} />
+      <Text style={[styles.editingBoxHeaderTitle, { color: black }, editingBoxHeaderTitle]}>
+        {t('Editing Message')}
+      </Text>
+      <TouchableOpacity
+        disabled={disabled}
+        onPress={() => {
+          resetInput();
+          clearEditingState();
+        }}
+        testID='close-button'
+      >
+        <CircleClose pathFill={grey} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: InputEditingStateHeaderPropsWithContext<StreamChatGenerics>,
+  nextProps: InputEditingStateHeaderPropsWithContext<StreamChatGenerics>,
+) => {
+  const { disabled: prevDisabled } = prevProps;
+  const { disabled: nextDisabled } = nextProps;
+
+  const disabledEqual = prevDisabled === nextDisabled;
+  if (!disabledEqual) return false;
+
+  return true;
+};
+
+const MemoizedInputEditingStateHeader = React.memo(
+  InputEditingStateHeaderWithContext,
+  areEqual,
+) as typeof InputEditingStateHeaderWithContext;
+
+export type InputEditingStateHeaderProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<InputEditingStateHeaderPropsWithContext<StreamChatGenerics>>;
+
+export const InputEditingStateHeader = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: InputEditingStateHeaderProps<StreamChatGenerics>,
+) => {
+  const { clearEditingState, resetInput } = useMessageInputContext<StreamChatGenerics>();
+
+  return <MemoizedInputEditingStateHeader {...{ clearEditingState, resetInput }} {...props} />;
+};
+
+InputEditingStateHeader.displayName = 'EditingStateHeader{messageInput}';