stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/MessageInput/MessageInput.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
-import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
-import { SuggestionsList } from '../AutoCompleteInput/SuggestionsList';
+import type { UserResponse } from 'stream-chat';
+
+import { useCountdown } from './hooks/useCountdown';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import {
@@ -18,6 +18,7 @@ import {
   MessagesContextValue,
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
+import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import {
   SuggestionsContextValue,
   useSuggestionsContext,
@@ -30,19 +31,10 @@ import {
 } from '../../contexts/translationContext/TranslationContext';
 import { CircleClose, CurveLineLeftUp, Edit, Lightning } from '../../icons';
 
-import type { UserResponse } from 'stream-chat';
-
 import type { Asset } from '../../native';
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { AttachmentSelectionBar } from '../AttachmentPicker/components/AttachmentSelectionBar';
+import { AutoCompleteInput } from '../AutoCompleteInput/AutoCompleteInput';
 
 const styles = StyleSheet.create({
   attachmentSeparator: {
@@ -107,19 +99,15 @@ const styles = StyleSheet.create({
 });
 
 type MessageInputPropsWithContext<
-  At extends DefaultAttachmentType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'disabled' | 'members' | 'watchers'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled' | 'members' | 'watchers'> &
   Pick<
-    MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    MessageInputContextValue<StreamChatGenerics>,
     | 'additionalTextInputProps'
     | 'asyncIds'
     | 'asyncUploads'
+    | 'cooldownEndsAt'
+    | 'CooldownTimer'
     | 'clearEditingState'
     | 'clearQuotedMessageState'
     | 'closeAttachmentPicker'
@@ -148,32 +136,35 @@ type MessageInputPropsWithContext<
     | 'removeImage'
     | 'uploadNewImage'
   > &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'Reply' | 'quotedRepliesEnabled'> &
-  Pick<SuggestionsContextValue<Co, Us>, 'componentType' | 'suggestions' | 'suggestionsTitle'> &
-  Pick<ThreadContextValue, 'thread'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'Reply'> &
+  Pick<
+    SuggestionsContextValue<StreamChatGenerics>,
+    | 'AutoCompleteSuggestionHeader'
+    | 'AutoCompleteSuggestionItem'
+    | 'AutoCompleteSuggestionList'
+    | 'suggestions'
+    | 'triggerType'
+  > &
+  Pick<ThreadContextValue<StreamChatGenerics>, 'thread'> &
   Pick<TranslationContextValue, 't'> & {
     threadList?: boolean;
   };
 
 const MessageInputWithContext = <
-  At extends DefaultAttachmentType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageInputPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     additionalTextInputProps,
     asyncIds,
     asyncUploads,
+    AutoCompleteSuggestionList,
     clearEditingState,
     clearQuotedMessageState,
     closeAttachmentPicker,
-    componentType,
+    cooldownEndsAt,
+    CooldownTimer,
     disabled,
     editing,
     FileUploadPreview,
@@ -190,7 +181,6 @@ const MessageInputWithContext = <
     mentionedUsers,
     numberOfUploads,
     quotedMessage,
-    quotedRepliesEnabled,
     removeImage,
     Reply,
     resetInput,
@@ -201,10 +191,10 @@ const MessageInputWithContext = <
     setShowMoreOptions,
     ShowThreadMessageInChannelButton,
     suggestions,
-    suggestionsTitle,
     t,
     thread,
     threadList,
+    triggerType,
     uploadNewImage,
     watchers,
   } = props;
@@ -236,7 +226,7 @@ const MessageInputWithContext = <
         optionsContainer,
         replyContainer,
         sendButtonContainer,
-        suggestionsListContainer,
+        suggestionsListContainer: { container: suggestionListContainer },
       },
     },
   } = useTheme();
@@ -251,6 +241,8 @@ const MessageInputWithContext = <
     setSelectedImages,
   } = useAttachmentPickerContext();
 
+  const { seconds: cooldownRemainingSeconds } = useCountdown(cooldownEndsAt);
+
   /**
    * Mounting and un-mounting logic are un-related in following useEffect.
    * While mounting we want to pass maxNumberOfFiles (which is prop on Channel component)
@@ -391,7 +383,7 @@ const MessageInputWithContext = <
   }, [asyncIdsString, asyncUploadsString, sendMessageAsync]);
 
   const getMembers = () => {
-    const result: UserResponse<Us>[] = [];
+    const result: UserResponse<StreamChatGenerics>[] = [];
     if (members && Object.values(members).length) {
       Object.values(members).forEach((member) => {
         if (member.user) {
@@ -407,7 +399,7 @@ const MessageInputWithContext = <
     const users = [...getMembers(), ...getWatchers()];
 
     // make sure we don't list users twice
-    const uniqueUsers: { [key: string]: UserResponse<Us> } = {};
+    const uniqueUsers: { [key: string]: UserResponse<StreamChatGenerics> } = {};
     for (const user of users) {
       if (user && !uniqueUsers[user.id]) {
         uniqueUsers[user.id] = user;
@@ -419,7 +411,7 @@ const MessageInputWithContext = <
   };
 
   const getWatchers = () => {
-    const result: UserResponse<Us>[] = [];
+    const result: UserResponse<StreamChatGenerics>[] = [];
     if (watchers && Object.values(watchers).length) {
       result.push(...Object.values(watchers));
     }
@@ -462,9 +454,6 @@ const MessageInputWithContext = <
                 if (quotedMessage) {
                   clearQuotedMessageState();
                 }
-                if (inputBoxRef.current) {
-                  inputBoxRef.current.blur();
-                }
               }}
               testID='close-button'
             >
@@ -493,10 +482,7 @@ const MessageInputWithContext = <
                   inputBoxContainer,
                 ]}
               >
-                {((typeof editing !== 'boolean' &&
-                  quotedRepliesEnabled &&
-                  editing?.quoted_message) ||
-                  quotedMessage) && (
+                {((typeof editing !== 'boolean' && editing?.quoted_message) || quotedMessage) && (
                   <View style={[styles.replyContainer, replyContainer]}>
                     <Reply />
                   </View>
@@ -536,8 +522,9 @@ const MessageInputWithContext = <
                       <Text style={[styles.giphyText, { color: white }, giphyText]}>GIPHY</Text>
                     </View>
                   )}
-                  <AutoCompleteInput<At, Ch, Co, Ev, Me, Re, Us>
+                  <AutoCompleteInput<StreamChatGenerics>
                     additionalTextInputProps={additionalTextInputProps}
+                    cooldownActive={!!cooldownRemainingSeconds}
                   />
                   {giphyActive && (
                     <TouchableOpacity
@@ -554,26 +541,32 @@ const MessageInputWithContext = <
                 </View>
               </View>
               <View style={[styles.sendButtonContainer, sendButtonContainer]}>
-                <SendButton disabled={disabled || sending.current || !isValidMessage()} />
+                {cooldownRemainingSeconds ? (
+                  <CooldownTimer seconds={cooldownRemainingSeconds} />
+                ) : (
+                  <SendButton disabled={disabled || sending.current || !isValidMessage()} />
+                )}
               </View>
             </>
           )}
         </View>
         <ShowThreadMessageInChannelButton threadList={threadList} />
       </View>
-      {componentType && suggestions ? (
+
+      {triggerType && suggestions ? (
         <View
           style={[
+            suggestionListContainer,
             styles.suggestionsListContainer,
             { backgroundColor: white, bottom: height },
-            suggestionsListContainer,
           ]}
         >
-          <SuggestionsList<Co, Us>
+          <AutoCompleteSuggestionList
             active={!!suggestions}
-            componentType={componentType}
-            suggestions={suggestions}
-            suggestionsTitle={suggestionsTitle}
+            data={suggestions.data}
+            onSelect={suggestions.onSelect}
+            queryText={suggestions.queryText}
+            triggerType={triggerType}
           />
         </View>
       ) : null}
@@ -597,17 +590,9 @@ const MessageInputWithContext = <
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: MessageInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MessageInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MessageInputPropsWithContext<StreamChatGenerics>,
+  nextProps: MessageInputPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     additionalTextInputProps: prevAdditionalTextInputProps,
@@ -623,7 +608,6 @@ const areEqual = <
     sending: prevSending,
     showMoreOptions: prevShowMoreOptions,
     suggestions: prevSuggestions,
-    suggestionsTitle: prevSuggestionsTitle,
     t: prevT,
     thread: prevThread,
     threadList: prevThreadList,
@@ -642,7 +626,6 @@ const areEqual = <
     sending: nextSending,
     showMoreOptions: nextShowMoreOptions,
     suggestions: nextSuggestions,
-    suggestionsTitle: nextSuggestionsTitle,
     t: nextT,
     thread: nextThread,
     threadList: nextThreadList,
@@ -705,9 +688,6 @@ const areEqual = <
       : !!prevSuggestions === !!nextSuggestions;
   if (!suggestionsEqual) return false;
 
-  const suggestionsTitleEqual = prevSuggestionsTitle === nextSuggestionsTitle;
-  if (!suggestionsTitleEqual) return false;
-
   const threadEqual =
     prevThread?.id === nextThread?.id &&
     prevThread?.text === nextThread?.text &&
@@ -726,14 +706,8 @@ const MemoizedMessageInput = React.memo(
 ) as typeof MessageInputWithContext;
 
 export type MessageInputProps<
-  At extends DefaultAttachmentType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<MessageInputPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<MessageInputPropsWithContext<StreamChatGenerics>>;
 
 /**
  * UI Component for message input
@@ -745,17 +719,13 @@ export type MessageInputProps<
  * [Translation Context](https://getstream.github.io/stream-chat-react-native/v3/#translationcontext)
  */
 export const MessageInput = <
-  At extends DefaultAttachmentType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MessageInputProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MessageInputProps<StreamChatGenerics>,
 ) => {
-  const { disabled = false, members, watchers } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const ownCapabilities = useOwnCapabilitiesContext();
+
+  const { disabled = false, members, watchers } = useChannelContext<StreamChatGenerics>();
 
   const {
     additionalTextInputProps,
@@ -764,6 +734,8 @@ export const MessageInput = <
     clearEditingState,
     clearQuotedMessageState,
     closeAttachmentPicker,
+    cooldownEndsAt,
+    CooldownTimer,
     editing,
     FileUploadPreview,
     fileUploads,
@@ -783,31 +755,46 @@ export const MessageInput = <
     SendButton,
     sending,
     sendMessageAsync,
+    SendMessageDisallowedIndicator,
     setGiphyActive,
     setShowMoreOptions,
     showMoreOptions,
     ShowThreadMessageInChannelButton,
     uploadNewImage,
-  } = useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
+  } = useMessageInputContext<StreamChatGenerics>();
 
-  const { quotedRepliesEnabled, Reply } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { Reply } = useMessagesContext<StreamChatGenerics>();
 
-  const { componentType, suggestions, suggestionsTitle } = useSuggestionsContext<Co, Us>();
+  const {
+    AutoCompleteSuggestionHeader,
+    AutoCompleteSuggestionItem,
+    AutoCompleteSuggestionList,
+    suggestions,
+    triggerType,
+  } = useSuggestionsContext<StreamChatGenerics>();
 
-  const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { thread } = useThreadContext<StreamChatGenerics>();
 
   const { t } = useTranslationContext();
 
+  if (!ownCapabilities.sendMessage && SendMessageDisallowedIndicator) {
+    return <SendMessageDisallowedIndicator />;
+  }
+
   return (
     <MemoizedMessageInput
       {...{
         additionalTextInputProps,
         asyncIds,
         asyncUploads,
+        AutoCompleteSuggestionHeader,
+        AutoCompleteSuggestionItem,
+        AutoCompleteSuggestionList,
         clearEditingState,
         clearQuotedMessageState,
         closeAttachmentPicker,
-        componentType,
+        cooldownEndsAt,
+        CooldownTimer,
         disabled,
         editing,
         FileUploadPreview,
@@ -824,7 +811,6 @@ export const MessageInput = <
         mentionedUsers,
         numberOfUploads,
         quotedMessage,
-        quotedRepliesEnabled,
         removeImage,
         Reply,
         resetInput,
@@ -836,9 +822,9 @@ export const MessageInput = <
         showMoreOptions,
         ShowThreadMessageInChannelButton,
         suggestions,
-        suggestionsTitle,
         t,
         thread,
+        triggerType,
         uploadNewImage,
         watchers,
       }}

package/src/components/MessageInput/MoreOptionsButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { GestureResponderEvent } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 
 import {
@@ -8,42 +9,19 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { CircleRight } from '../../icons/CircleRight';
 
-import type { GestureResponderEvent } from 'react-native';
-
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 type MoreOptionsButtonPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'disabled'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChannelContextValue<StreamChatGenerics>, 'disabled'> & {
   /** Function that opens attachment options bottom sheet */
   handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
 };
 
 const MoreOptionsButtonWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MoreOptionsButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MoreOptionsButtonPropsWithContext<StreamChatGenerics>,
 ) => {
   const { disabled, handleOnPress } = props;
 
@@ -67,17 +45,9 @@ const MoreOptionsButtonWithContext = <
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: MoreOptionsButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: MoreOptionsButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: MoreOptionsButtonPropsWithContext<StreamChatGenerics>,
+  nextProps: MoreOptionsButtonPropsWithContext<StreamChatGenerics>,
 ) => {
   const { disabled: prevDisabled, handleOnPress: prevHandleOnPress } = prevProps;
   const { disabled: nextDisabled, handleOnPress: nextHandleOnPress } = nextProps;
@@ -96,30 +66,18 @@ const MemoizedMoreOptionsButton = React.memo(
 ) as typeof MoreOptionsButtonWithContext;
 
 export type MoreOptionsButtonProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<MoreOptionsButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<MoreOptionsButtonPropsWithContext<StreamChatGenerics>>;
 
 /**
  * UI Component for more options button in MessageInput component.
  */
 export const MoreOptionsButton = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: MoreOptionsButtonProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: MoreOptionsButtonProps<StreamChatGenerics>,
 ) => {
-  const { disabled = false } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { disabled = false } = useChannelContext<StreamChatGenerics>();
 
   return <MemoizedMoreOptionsButton {...{ disabled }} {...props} />;
 };

package/src/components/MessageInput/SendButton.tsx

@@ -10,39 +10,18 @@ import { Search } from '../../icons/Search';
 import { SendRight } from '../../icons/SendRight';
 import { SendUp } from '../../icons/SendUp';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
+import type { DefaultStreamChatGenerics } from '../../types/types';
 
 type SendButtonPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'giphyActive' | 'sendMessage'> & {
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<MessageInputContextValue<StreamChatGenerics>, 'giphyActive' | 'sendMessage'> & {
   /** Disables the button */ disabled: boolean;
 };
 
 const SendButtonWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: SendButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: SendButtonPropsWithContext<StreamChatGenerics>,
 ) => {
   const { disabled = false, giphyActive, sendMessage } = props;
   const {
@@ -55,7 +34,7 @@ const SendButtonWithContext = <
   return (
     <TouchableOpacity
       disabled={disabled}
-      onPress={sendMessage}
+      onPress={disabled ? () => null : sendMessage}
       style={[sendButton]}
       testID='send-button'
     >
@@ -66,17 +45,9 @@ const SendButtonWithContext = <
   );
 };
 
-const areEqual = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
->(
-  prevProps: SendButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
-  nextProps: SendButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+  prevProps: SendButtonPropsWithContext<StreamChatGenerics>,
+  nextProps: SendButtonPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     disabled: prevDisabled,
@@ -107,30 +78,18 @@ const MemoizedSendButton = React.memo(
 ) as typeof SendButtonWithContext;
 
 export type SendButtonProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<SendButtonPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<SendButtonPropsWithContext<StreamChatGenerics>>;
 
 /**
  * UI Component for send button in MessageInput component.
  */
 export const SendButton = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: SendButtonProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: SendButtonProps<StreamChatGenerics>,
 ) => {
-  const { giphyActive, sendMessage } = useMessageInputContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { giphyActive, sendMessage } = useMessageInputContext<StreamChatGenerics>();
 
   return (
     <MemoizedSendButton

package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderTopWidth: 1,
+    height: 50,
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 17,
+    fontWeight: '400',
+  },
+});
+
+export const SendMessageDisallowedIndicator = () => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      colors: { border, grey_dark },
+      messageInput: {
+        sendMessageDisallowedIndicator: { container, text },
+      },
+    },
+  } = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderTopColor: border,
+          height: 50,
+        },
+        container,
+      ]}
+      testID='send-message-disallowed-indicator'
+    >
+      <Text style={[styles.text, { color: grey_dark }, text]}>
+        {t("You can't send messages in this channel")}
+      </Text>
+    </View>
+  );
+};