stream-chat-react-native-core 3.10.2 → 4.0.0-beta.4

package/src/contexts/channelsStateContext/useChannelState.ts

@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useMemo } from 'react';
+
+import type { Channel as ChannelType } from 'stream-chat';
+
+import { useChannelsStateContext } from './ChannelsStateContext';
+
+import type { ChannelsStateContextValue, ChannelState, Keys } from './ChannelsStateContext';
+
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../types/types';
+
+type StateManagerParams<
+  Key extends Keys,
+  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,
+> = Omit<
+  ChannelsStateContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+  'increaseSubscriberCount' | 'decreaseSubscriberCount'
+> & {
+  cid: string;
+  key: Key;
+};
+
+/* 
+  This hook takes care of creating a useState-like interface which can be used later to call
+  updates to the ChannelsStateContext reducer. It receives the cid and key which it wants to update
+  and perform the state updates. Also supports a initialState.
+*/
+function useStateManager<
+  Key extends Keys,
+  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,
+>(
+  {
+    cid,
+    key,
+    setState,
+    state,
+  }: Omit<
+    StateManagerParams<Key, At, Ch, Co, Ev, Me, Re, Us>,
+    'increaseSubscriberCount' | 'decreaseSubscriberCount'
+  >,
+  initialValue?: ChannelState<At, Ch, Co, Ev, Me, Re, Us>[Key],
+) {
+  const memoizedInitialValue = useMemo(() => initialValue, []);
+  const value =
+    state[cid]?.[key] || (memoizedInitialValue as ChannelState<At, Ch, Co, Ev, Me, Re, Us>[Key]);
+
+  const setValue = useCallback(
+    (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>[Key]) => setState({ cid, key, value }),
+    [cid, key],
+  );
+
+  return [value, setValue] as const;
+}
+
+export type UseChannelStateValue<
+  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,
+> = {
+  members: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['members'];
+  messages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages'];
+  read: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['read'];
+  setMembers: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['members']) => void;
+  setMessages: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['messages']) => void;
+  setRead: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['read']) => void;
+  setThreadMessages: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['threadMessages']) => void;
+  setTyping: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['typing']) => void;
+  setWatcherCount: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watcherCount']) => void;
+  setWatchers: (value: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watchers']) => void;
+  threadMessages: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['threadMessages'];
+  typing: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['typing'];
+  watcherCount: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watcherCount'];
+  watchers: ChannelState<At, Ch, Co, Ev, Me, Re, Us>['watchers'];
+};
+
+export function useChannelState<
+  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,
+>(
+  channel: ChannelType<At, Ch, Co, Ev, Me, Re, Us> | undefined,
+  threadId?: string,
+): UseChannelStateValue<At, Ch, Co, Ev, Me, Re, Us> {
+  const cid = channel?.id || 'id'; // in case channel is not initialized, use generic id string for indexing
+  const { decreaseSubscriberCount, increaseSubscriberCount, setState, state } =
+    useChannelsStateContext<At, Ch, Co, Ev, Me, Re, Us>();
+
+  // Keeps track of how many Channel components are subscribed to this Channel state (Channel vs Thread concurrency)
+  useEffect(() => {
+    increaseSubscriberCount({ cid });
+    return () => {
+      decreaseSubscriberCount({ cid });
+    };
+  }, []);
+
+  const [members, setMembers] = useStateManager(
+    {
+      cid,
+      key: 'members',
+      setState,
+      state,
+    },
+    {},
+  );
+
+  const [messages, setMessages] = useStateManager(
+    {
+      cid,
+      key: 'messages',
+      setState,
+      state,
+    },
+    channel?.state?.messages || [],
+  );
+
+  const [read, setRead] = useStateManager(
+    {
+      cid,
+      key: 'read',
+      setState,
+      state,
+    },
+    {},
+  );
+
+  const [typing, setTyping] = useStateManager(
+    {
+      cid,
+      key: 'typing',
+      setState,
+      state,
+    },
+    {},
+  );
+
+  const [watcherCount, setWatcherCount] = useStateManager({
+    cid,
+    key: 'watcherCount',
+    setState,
+    state,
+  });
+
+  const [watchers, setWatchers] = useStateManager(
+    {
+      cid,
+      key: 'watchers',
+      setState,
+      state,
+    },
+    {},
+  );
+
+  const [threadMessages, setThreadMessages] = useStateManager(
+    {
+      cid,
+      key: 'threadMessages',
+      setState,
+      state,
+    },
+    (threadId && channel?.state?.threads?.[threadId]) || [],
+  );
+
+  return {
+    members,
+    messages,
+    read,
+    setMembers,
+    setMessages,
+    setRead,
+    setThreadMessages,
+    setTyping,
+    setWatcherCount,
+    setWatchers,
+    threadMessages,
+    typing,
+    watcherCount,
+    watchers,
+  };
+}

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Channel, Mute, StreamChat } from 'stream-chat';
 
 import type {
@@ -14,6 +12,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ChatContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext, useState } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type {
   DefaultAttachmentType,
@@ -13,6 +11,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type ImageGalleryContextValue<
   At extends UnknownType = DefaultAttachmentType,

package/src/contexts/keyboardContext/KeyboardContext.tsx

@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
 import { Keyboard } from 'react-native';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { UnknownType } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type KeyboardContextValue = {
   dismissKeyboard: () => void;

package/src/contexts/messageContext/MessageContext.tsx

@@ -1,7 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
 
-import { getDisplayName } from '../utils/getDisplayName';
-
 import type { Attachment } from 'stream-chat';
 
 import type { ActionHandler } from '../../components/Attachment/Attachment';
@@ -19,6 +17,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type Alignment = 'right' | 'left';
 
@@ -40,10 +39,6 @@ export type MessageContextValue<
   actionsEnabled: boolean;
   /** Position of the message, either 'right' or 'left' */
   alignment: Alignment;
-  /**
-   * Function that returns a boolean indicating whether or not the user can edit/delete the message.
-   */
-  canModifyMessage: boolean;
   /** The files attached to a message */
   files: Attachment<At>[];
   /**
@@ -115,10 +110,7 @@ export type MessageContextValue<
   preventPress?: boolean;
   /** Whether or not the avatar show show next to Message */
   showAvatar?: boolean;
-} & Pick<
-  ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-  'channel' | 'disabled' | 'members' | 'readEventsEnabled'
->;
+} & Pick<ChannelContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'channel' | 'disabled' | 'members'>;
 
 export const MessageContext = React.createContext({} as MessageContextValue);
 

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -1,6 +1,10 @@
 import React, { PropsWithChildren, useContext, useEffect, useRef, useState } from 'react';
-import { Keyboard } from 'react-native';
+import { Alert, Keyboard } from 'react-native';
+
+import type { TextInput, TextInputProps } from 'react-native';
+
 import uniq from 'lodash/uniq';
+import { lookup } from 'mime-types';
 import {
   Attachment,
   logChatPromiseExecution,
@@ -16,27 +20,11 @@ import {
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { isEditingBoolean, useMessageDetailsForState } from './hooks/useMessageDetailsForState';
 
-import { useAttachmentPickerContext } from '../attachmentPickerContext/AttachmentPickerContext';
-import { useChatContext } from '../chatContext/ChatContext';
-import { ChannelContextValue, useChannelContext } from '../channelContext/ChannelContext';
-import { useThreadContext } from '../threadContext/ThreadContext';
-import { getDisplayName } from '../utils/getDisplayName';
-
-import {
-  ACITriggerSettings,
-  ACITriggerSettingsParams,
-  FileState,
-  generateRandomId,
-  TriggerSettings,
-} from '../../utils/utils';
-
-import { Asset, compressImage, getLocalAssetUri, pickDocument } from '../../native';
-
-import type { TextInput, TextInputProps } from 'react-native';
-
 import type { AttachButtonProps } from '../../components/MessageInput/AttachButton';
 import type { CommandsButtonProps } from '../../components/MessageInput/CommandsButton';
+import type { CooldownTimerProps } from '../../components/MessageInput/CooldownTimer';
 import type { FileUploadPreviewProps } from '../../components/MessageInput/FileUploadPreview';
+import { useCooldown } from '../../components/MessageInput/hooks/useCooldown';
 import type { ImageUploadPreviewProps } from '../../components/MessageInput/ImageUploadPreview';
 import type { InputButtonsProps } from '../../components/MessageInput/InputButtons';
 import type { MessageInputProps } from '../../components/MessageInput/MessageInput';
@@ -44,6 +32,7 @@ import type { MoreOptionsButtonProps } from '../../components/MessageInput/MoreO
 import type { SendButtonProps } from '../../components/MessageInput/SendButton';
 import type { UploadProgressIndicatorProps } from '../../components/MessageInput/UploadProgressIndicator';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
+import { Asset, compressImage, getLocalAssetUri, pickDocument } from '../../native';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -54,8 +43,21 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
-
-const MIME_TYPE_OCTET_STREAM = 'application/octet-stream';
+import {
+  ACITriggerSettings,
+  ACITriggerSettingsParams,
+  FileState,
+  generateRandomId,
+  TriggerSettings,
+  urlRegex,
+} from '../../utils/utils';
+import { useAttachmentPickerContext } from '../attachmentPickerContext/AttachmentPickerContext';
+import { ChannelContextValue, useChannelContext } from '../channelContext/ChannelContext';
+import { useChatContext } from '../chatContext/ChatContext';
+import { useOwnCapabilitiesContext } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
+import { useThreadContext } from '../threadContext/ThreadContext';
+import { useTranslationContext } from '../translationContext/TranslationContext';
+import { getDisplayName } from '../utils/getDisplayName';
 
 export type FileUpload = {
   file: {
@@ -75,12 +77,9 @@ export type ImageUpload = {
   };
   id: string;
   state: string;
+  height?: number;
   url?: string;
-};
-
-export type InputConfig = {
-  maxMessageLength?: number;
-  uploadsEnabled?: boolean;
+  width?: number;
 };
 
 export type MentionAllAppUsersQuery<Us extends DefaultUserType> = {
@@ -103,6 +102,8 @@ export type LocalMessageInputContext<
     };
   };
   closeAttachmentPicker: () => void;
+  /** The time at which the active cooldown will end */
+  cooldownEndsAt: Date;
   /**
    * An array of file objects which are set for upload. It has the following structure:
    *
@@ -243,6 +244,14 @@ export type InputMessageInputContextValue<
    * Defaults to and accepts same props as: [CommandsButton](https://getstream.github.io/stream-chat-react-native/v3/#commandsbutton)
    */
   CommandsButton: React.ComponentType<CommandsButtonProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  /**
+   * Custom UI component to display the remaining cooldown a user will have to wait before
+   * being allowed to send another message. This component is displayed in place of the
+   * send button for the MessageInput component.
+   *
+   * **default** [CooldownTimer](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageInput/CooldownTimer.tsx)
+   */
+  CooldownTimer: React.ComponentType<CooldownTimerProps>;
   editing: boolean | MessageType<At, Ch, Co, Ev, Me, Re, Us>;
   editMessage: StreamChat<At, Ch, Co, Ev, Me, Re, Us>['updateMessage'];
   /**
@@ -375,6 +384,7 @@ export type InputMessageInputContextValue<
    * - toggleAttachmentPicker
    */
   InputButtons?: React.ComponentType<InputButtonsProps<At, Ch, Co, Ev, Me, Re, Us>>;
+  maxMessageLength?: number;
   mentionAllAppUsersEnabled?: boolean;
   /** Object containing filters/sort/options overrides for an @mention user query */
   mentionAllAppUsersQuery?: MentionAllAppUsersQuery<Us>;
@@ -382,6 +392,7 @@ export type InputMessageInputContextValue<
    * Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
    */
   onChangeText?: (newText: string) => void;
+  SendMessageDisallowedIndicator?: React.ComponentType;
   /**
    * ref for input setter function
    *
@@ -390,7 +401,7 @@ export type InputMessageInputContextValue<
    * @overrideType Function
    */
   setInputRef?: (ref: TextInput | null) => void;
-} & InputConfig;
+};
 
 export type MessageInputContextValue<
   At extends UnknownType = DefaultAttachmentType,
@@ -422,10 +433,11 @@ export const MessageInputProvider = <
   const { closePicker, openPicker, selectedPicker, setSelectedPicker } =
     useAttachmentPickerContext();
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const channelCapabities = useOwnCapabilitiesContext();
 
   const { channel, giphyEnabled } = useChannelContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { thread } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
-
+  const { t } = useTranslationContext();
   const inputBoxRef = useRef<TextInput | null>(null);
   const sending = useRef(false);
 
@@ -453,6 +465,8 @@ export const MessageInputProvider = <
     showMoreOptions,
     text,
   } = useMessageDetailsForState<At, Ch, Co, Ev, Me, Re, Us>(editing, initialValue);
+  const { endsAt: cooldownEndsAt, start: startCooldown } =
+    useCooldown<At, Ch, Co, Ev, Me, Re, Us>();
 
   const threadId = thread?.id;
   useEffect(() => {
@@ -502,7 +516,7 @@ export const MessageInputProvider = <
     }
     setText(newText);
 
-    if (newText && channel) {
+    if (newText && channel && channelCapabities.sendTypingEvents) {
       logChatPromiseExecution(channel.keystroke(thread?.id), 'start typing event');
     }
 
@@ -608,14 +622,25 @@ export const MessageInputProvider = <
     setText('');
   };
 
+  // TODO: Figure out why this is async, as it doesn't await any promise.
+  // eslint-disable-next-line require-await
   const sendMessage = async () => {
     if (sending.current) {
       return;
     }
+
+    if (!channelCapabities.sendLinks && !!text.match(urlRegex)) {
+      Alert.alert(t('Links are disabled'), t('Sending links is not allowed in this conversation'));
+
+      return;
+    }
+
     sending.current = true;
 
+    startCooldown();
+
     const prevText = giphyEnabled && giphyActive ? `/giphy ${text}` : text;
-    await setText('');
+    setText('');
     if (inputBoxRef.current) {
       inputBoxRef.current.clear();
     }
@@ -644,6 +669,8 @@ export const MessageInputProvider = <
         attachments.push({
           fallback: image.file.name,
           image_url: image.url,
+          original_height: image.height,
+          original_width: image.width,
           type: 'image',
         } as Attachment<At>);
       }
@@ -665,6 +692,14 @@ export const MessageInputProvider = <
             image_url: file.url,
             type: 'image',
           } as Attachment<At>);
+        } else if (file.file.type?.startsWith('video/')) {
+          attachments.push({
+            asset_url: file.url,
+            file_size: file.file.size,
+            mime_type: file.file.type,
+            title: file.file.name,
+            type: 'video',
+          } as Attachment<At>);
         } else {
           attachments.push({
             asset_url: file.url,
@@ -741,6 +776,7 @@ export const MessageInputProvider = <
         },
       ] as StreamMessage<At, Me, Us>['attachments'];
 
+      startCooldown();
       try {
         value.sendMessage({
           attachments,
@@ -809,7 +845,7 @@ export const MessageInputProvider = <
     }
     const { file, id } = newFile;
 
-    await setFileUploads((prevFileUploads) =>
+    setFileUploads((prevFileUploads) =>
       prevFileUploads.map((fileUpload) => {
         if (fileUpload.id === id) {
           return {
@@ -826,7 +862,7 @@ export const MessageInputProvider = <
       if (value.doDocUploadRequest) {
         response = await value.doDocUploadRequest(file, channel);
       } else if (channel && file.uri) {
-        response = await channel.sendFile(file.uri, file.name, MIME_TYPE_OCTET_STREAM);
+        response = await channel.sendFile(file.uri, file.name, file.type);
       }
     } catch (error) {
       console.warn(error);
@@ -905,12 +941,13 @@ export const MessageInputProvider = <
             uri,
             width: file.width,
           }));
-
+      const filename = uri.replace(/^(file:\/\/|content:\/\/|assets-library:\/\/)/, '');
+      const contentType = lookup(filename) || 'multipart/form-data';
       if (value.doImageUploadRequest) {
         response = await value.doImageUploadRequest(file, channel);
       } else if (compressedUri && channel) {
         if (value.sendImageAsync) {
-          channel.sendImage(compressedUri, undefined, MIME_TYPE_OCTET_STREAM).then((res) => {
+          channel.sendImage(compressedUri, undefined, contentType).then((res) => {
             if (asyncIds.includes(id)) {
               // Evaluates to true if user hit send before image successfully uploaded
               setAsyncUploads((prevAsyncUploads) => {
@@ -937,7 +974,7 @@ export const MessageInputProvider = <
             }
           });
         } else {
-          response = await channel.sendImage(compressedUri, undefined, MIME_TYPE_OCTET_STREAM);
+          response = await channel.sendImage(compressedUri, undefined, contentType);
         }
       }
 
@@ -947,8 +984,10 @@ export const MessageInputProvider = <
             if (imageUpload.id === id) {
               return {
                 ...imageUpload,
+                height: file.height,
                 state: FileState.UPLOADED,
                 url: response.file,
+                width: file.width,
               };
             }
             return imageUpload;
@@ -983,8 +1022,9 @@ export const MessageInputProvider = <
     uri?: string;
   }) => {
     const id = generateRandomId();
+    const mimeType = lookup(file.name);
     const newFile = {
-      file: { ...file, type: MIME_TYPE_OCTET_STREAM },
+      file: { ...file, type: mimeType || file?.type },
       id,
       state: FileState.UPLOADING,
     };
@@ -1016,6 +1056,7 @@ export const MessageInputProvider = <
     asyncIds,
     asyncUploads,
     closeAttachmentPicker,
+    cooldownEndsAt,
     fileUploads,
     giphyActive,
     imageUploads,

package/src/contexts/messageInputContext/hooks/useCreateMessageInputContext.ts

@@ -1,9 +1,5 @@
 import { useMemo } from 'react';
 
-import type { MessageInputContextValue } from '../MessageInputContext';
-
-import type { ThreadContextValue } from '../../threadContext/ThreadContext';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -14,6 +10,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import type { ThreadContextValue } from '../../threadContext/ThreadContext';
+import type { MessageInputContextValue } from '../MessageInputContext';
 
 export const useCreateMessageInputContext = <
   At extends UnknownType = DefaultAttachmentType,
@@ -35,6 +33,8 @@ export const useCreateMessageInputContext = <
   closeAttachmentPicker,
   CommandsButton,
   compressImageQuality,
+  cooldownEndsAt,
+  CooldownTimer,
   doDocUploadRequest,
   doImageUploadRequest,
   editing,
@@ -78,6 +78,7 @@ export const useCreateMessageInputContext = <
   sending,
   sendMessage,
   sendMessageAsync,
+  SendMessageDisallowedIndicator,
   sendThreadMessageInChannel,
   setAsyncIds,
   setAsyncUploads,
@@ -104,7 +105,6 @@ export const useCreateMessageInputContext = <
   uploadNewFile,
   uploadNewImage,
   UploadProgressIndicator,
-  uploadsEnabled,
 }: MessageInputContextValue<At, Ch, Co, Ev, Me, Re, Us> &
   Pick<ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'thread'>) => {
   const editingExists = !!editing;
@@ -131,6 +131,8 @@ export const useCreateMessageInputContext = <
       closeAttachmentPicker,
       CommandsButton,
       compressImageQuality,
+      cooldownEndsAt,
+      CooldownTimer,
       doDocUploadRequest,
       doImageUploadRequest,
       editing,
@@ -174,6 +176,7 @@ export const useCreateMessageInputContext = <
       sending,
       sendMessage,
       sendMessageAsync,
+      SendMessageDisallowedIndicator,
       sendThreadMessageInChannel,
       setAsyncIds,
       setAsyncUploads,
@@ -199,9 +202,9 @@ export const useCreateMessageInputContext = <
       uploadNewFile,
       uploadNewImage,
       UploadProgressIndicator,
-      uploadsEnabled,
     }),
     [
+      cooldownEndsAt,
       editingExists,
       fileUploadsValue,
       giphyActive,
@@ -214,7 +217,6 @@ export const useCreateMessageInputContext = <
       showMoreOptions,
       text,
       threadId,
-      uploadsEnabled,
     ],
   );