stream-chat-react-native-core 6.7.3-beta.2 → 6.7.3-beta.4

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -610,19 +611,19 @@ export const MessageInputProvider = <
     text,
   } = useMessageDetailsForState<StreamChatGenerics>(editing, initialValue);
   const { endsAt: cooldownEndsAt, start: startCooldown } = useCooldown<StreamChatGenerics>();
-  const { onChangeText } = value;
+  const { onChangeText, emojiSearchIndex, autoCompleteTriggerSettings } = value;
 
   const threadId = thread?.id;
   useEffect(() => {
     setSendThreadMessageInChannel(false);
   }, [threadId]);
 
-  const appendText = (newText: string) => {
+  const appendText = useStableCallback((newText: string) => {
     setText((prevText) => `${prevText}${newText}`);
-  };
+  });
 
   /** Checks if the message is valid or not. Accordingly we can enable/disable send button */
-  const isValidMessage = () => {
+  const isValidMessage = useStableCallback(() => {
     if (text && text.trim()) {
       return true;
     }
@@ -656,7 +657,7 @@ export const MessageInputProvider = <
     }
 
     return false;
-  };
+  });
 
   const onChange = useCallback(
     (newText: string) => {
@@ -676,24 +677,24 @@ export const MessageInputProvider = <
     [channel, channelCapabities.sendTypingEvents, isOnline, setText, thread?.id, onChangeText],
   );
 
-  const openCommandsPicker = () => {
+  const openCommandsPicker = useStableCallback(() => {
     appendText('/');
     if (inputBoxRef.current) {
       inputBoxRef.current.focus();
     }
-  };
+  });
 
-  const openMentionsPicker = () => {
+  const openMentionsPicker = useStableCallback(() => {
     appendText('@');
     if (inputBoxRef.current) {
       inputBoxRef.current.focus();
     }
-  };
+  });
 
   /**
    * Function for capturing a photo and uploading it
    */
-  const takeAndUploadImage = async (mediaType?: MediaTypes) => {
+  const takeAndUploadImage = useStableCallback(async (mediaType?: MediaTypes) => {
     setSelectedPicker(undefined);
     closePicker();
     const photo = await NativeHandlers.takePhoto({
@@ -717,12 +718,12 @@ export const MessageInputProvider = <
         await uploadNewFile({ ...photo, mimeType: photo.type, type: FileTypes.Video });
       }
     }
-  };
+  });
 
   /**
    * Function for picking a photo from native image picker and uploading it
    */
-  const pickAndUploadImageFromNativePicker = async () => {
+  const pickAndUploadImageFromNativePicker = useStableCallback(async () => {
     const result = await NativeHandlers.pickImage();
     if (result.askToOpenSettings) {
       Alert.alert(
@@ -755,7 +756,7 @@ export const MessageInputProvider = <
         }
       });
     }
-  };
+  });
 
   /**
    * Function to open the attachment picker if the MediaLibary is installed.
@@ -785,11 +786,11 @@ export const MessageInputProvider = <
     }
   }, [closeAttachmentPicker, openAttachmentPicker, selectedPicker]);
 
-  const onSelectItem = (item: UserResponse<StreamChatGenerics>) => {
+  const onSelectItem = useStableCallback((item: UserResponse<StreamChatGenerics>) => {
     setMentionedUsers((prevMentionedUsers) => [...prevMentionedUsers, item.id]);
-  };
+  });
 
-  const pickFile = async () => {
+  const pickFile = useStableCallback(async () => {
     if (!isDocumentPickerAvailable()) {
       console.log(
         'The file picker is not installed. Check our Getting Started documentation to install it.',
@@ -818,7 +819,7 @@ export const MessageInputProvider = <
         await uploadNewFile(asset);
       });
     }
-  };
+  });
 
   const removeFile = useCallback(
     (id: string) => {
@@ -840,242 +841,257 @@ export const MessageInputProvider = <
     [imageUploads, setImageUploads, setNumberOfUploads],
   );
 
-  const resetInput = (pendingAttachments: Attachment<StreamChatGenerics>[] = []) => {
-    /**
-     * If the MediaLibrary is available, reset the selected files and images
-     */
-    if (isImageMediaLibraryAvailable()) {
-      setSelectedFiles([]);
-      setSelectedImages([]);
-    }
-
-    setFileUploads([]);
-    setGiphyActive(false);
-    setShowMoreOptions(true);
-    setImageUploads([]);
-    setMentionedUsers([]);
-    setNumberOfUploads(
-      (prevNumberOfUploads) => prevNumberOfUploads - (pendingAttachments?.length || 0),
-    );
-    setText('');
-    if (value.editing) {
-      value.clearEditingState();
-    }
-  };
+  const resetInput = useStableCallback(
+    (pendingAttachments: Attachment<StreamChatGenerics>[] = []) => {
+      /**
+       * If the MediaLibrary is available, reset the selected files and images
+       */
+      if (isImageMediaLibraryAvailable()) {
+        setSelectedFiles([]);
+        setSelectedImages([]);
+      }
 
-  const mapImageUploadToAttachment = (image: ImageUpload): Attachment<StreamChatGenerics> => {
-    const mime_type: string | boolean = lookup(image.file.name as string);
-    const name = image.file.name as string;
-    return {
-      fallback: name,
-      image_url: image.url,
-      mime_type: mime_type ? mime_type : undefined,
-      original_height: image.height,
-      original_width: image.width,
-      originalImage: image.file,
-      type: FileTypes.Image,
-    };
-  };
+      setFileUploads([]);
+      setGiphyActive(false);
+      setShowMoreOptions(true);
+      setImageUploads([]);
+      setMentionedUsers([]);
+      setNumberOfUploads(
+        (prevNumberOfUploads) => prevNumberOfUploads - (pendingAttachments?.length || 0),
+      );
+      setText('');
+      if (value.editing) {
+        value.clearEditingState();
+      }
+    },
+  );
 
-  const mapFileUploadToAttachment = (file: FileUpload): Attachment<StreamChatGenerics> => {
-    if (file.type === FileTypes.Image) {
+  const mapImageUploadToAttachment = useStableCallback(
+    (image: ImageUpload): Attachment<StreamChatGenerics> => {
+      const mime_type: string | boolean = lookup(image.file.name as string);
+      const name = image.file.name as string;
       return {
-        fallback: file.file.name,
-        image_url: file.url,
-        mime_type: file.file.mimeType,
-        originalFile: file.file,
+        fallback: name,
+        image_url: image.url,
+        mime_type: mime_type ? mime_type : undefined,
+        original_height: image.height,
+        original_width: image.width,
+        originalImage: image.file,
         type: FileTypes.Image,
       };
-    } else if (file.type === FileTypes.Audio) {
-      return {
-        asset_url: file.url || file.file.uri,
-        duration: file.file.duration,
-        file_size: file.file.size,
-        mime_type: file.file.mimeType,
-        originalFile: file.file,
-        title: file.file.name,
-        type: FileTypes.Audio,
-      };
-    } else if (file.type === FileTypes.Video) {
-      return {
-        asset_url: file.url || file.file.uri,
-        duration: file.file.duration,
-        file_size: file.file.size,
-        mime_type: file.file.mimeType,
-        originalFile: file.file,
-        thumb_url: file.thumb_url,
-        title: file.file.name,
-        type: FileTypes.Video,
-      };
-    } else if (file.type === FileTypes.VoiceRecording) {
-      return {
-        asset_url: file.url || file.file.uri,
-        duration: file.file.duration,
-        file_size: file.file.size,
-        mime_type: file.file.mimeType,
-        originalFile: file.file,
-        title: file.file.name,
-        type: FileTypes.VoiceRecording,
-        waveform_data: file.file.waveform_data,
-      };
-    } else {
-      return {
-        asset_url: file.url || file.file.uri,
-        file_size: file.file.size,
-        mime_type: file.file.mimeType,
-        originalFile: file.file,
-        title: file.file.name,
-        type: FileTypes.File,
-      };
-    }
-  };
+    },
+  );
+
+  const mapFileUploadToAttachment = useStableCallback(
+    (file: FileUpload): Attachment<StreamChatGenerics> => {
+      if (file.type === FileTypes.Image) {
+        return {
+          fallback: file.file.name,
+          image_url: file.url,
+          mime_type: file.file.mimeType,
+          originalFile: file.file,
+          type: FileTypes.Image,
+        };
+      } else if (file.type === FileTypes.Audio) {
+        return {
+          asset_url: file.url || file.file.uri,
+          duration: file.file.duration,
+          file_size: file.file.size,
+          mime_type: file.file.mimeType,
+          originalFile: file.file,
+          title: file.file.name,
+          type: FileTypes.Audio,
+        };
+      } else if (file.type === FileTypes.Video) {
+        return {
+          asset_url: file.url || file.file.uri,
+          duration: file.file.duration,
+          file_size: file.file.size,
+          mime_type: file.file.mimeType,
+          originalFile: file.file,
+          thumb_url: file.thumb_url,
+          title: file.file.name,
+          type: FileTypes.Video,
+        };
+      } else if (file.type === FileTypes.VoiceRecording) {
+        return {
+          asset_url: file.url || file.file.uri,
+          duration: file.file.duration,
+          file_size: file.file.size,
+          mime_type: file.file.mimeType,
+          originalFile: file.file,
+          title: file.file.name,
+          type: FileTypes.VoiceRecording,
+          waveform_data: file.file.waveform_data,
+        };
+      } else {
+        return {
+          asset_url: file.url || file.file.uri,
+          file_size: file.file.size,
+          mime_type: file.file.mimeType,
+          originalFile: file.file,
+          title: file.file.name,
+          type: FileTypes.File,
+        };
+      }
+    },
+  );
 
   // TODO: Figure out why this is async, as it doesn't await any promise.
-  const sendMessage = async ({
-    customMessageData,
-  }: {
-    customMessageData?: Partial<Message<StreamChatGenerics>>;
-  } = {}) => {
-    if (sending.current) {
-      return;
-    }
-    const linkInfos = parseLinksFromText(text);
+  const sendMessage = useStableCallback(
+    async ({
+      customMessageData,
+    }: {
+      customMessageData?: Partial<Message<StreamChatGenerics>>;
+    } = {}) => {
+      if (sending.current) {
+        return;
+      }
+      const linkInfos = parseLinksFromText(text);
 
-    if (!channelCapabities.sendLinks && linkInfos.length > 0) {
-      Alert.alert(t('Links are disabled'), t('Sending links is not allowed in this conversation'));
+      if (!channelCapabities.sendLinks && linkInfos.length > 0) {
+        Alert.alert(
+          t('Links are disabled'),
+          t('Sending links is not allowed in this conversation'),
+        );
 
-      return;
-    }
+        return;
+      }
 
-    sending.current = true;
+      sending.current = true;
 
-    startCooldown();
+      startCooldown();
 
-    const prevText = giphyEnabled && giphyActive ? `/giphy ${text}` : text;
-    setText('');
+      const prevText = giphyEnabled && giphyActive ? `/giphy ${text}` : text;
+      setText('');
 
-    const attachments = [] as Attachment<StreamChatGenerics>[];
-    for (const image of imageUploads) {
-      if (enableOfflineSupport) {
-        if (image.state === FileState.NOT_SUPPORTED) {
-          return;
-        }
-        attachments.push(mapImageUploadToAttachment(image));
-        continue;
+      if (inputBoxRef.current) {
+        inputBoxRef.current.clear();
       }
 
-      if ((!image || image.state === FileState.UPLOAD_FAILED) && !enableOfflineSupport) {
-        continue;
-      }
+      const attachments = [] as Attachment<StreamChatGenerics>[];
+      for (const image of imageUploads) {
+        if (enableOfflineSupport) {
+          if (image.state === FileState.NOT_SUPPORTED) {
+            return;
+          }
+          attachments.push(mapImageUploadToAttachment(image));
+          continue;
+        }
 
-      if (image.state === FileState.UPLOADING) {
-        // TODO: show error to user that they should wait until image is uploaded
-        if (value.sendImageAsync) {
-          /**
-           * If user hit send before image uploaded, push ID into a queue to later
-           * be matched with the successful CDN response
-           */
-          setAsyncIds((prevAsyncIds) => [...prevAsyncIds, image.id]);
-        } else {
-          sending.current = false;
-          return setText(prevText);
+        if ((!image || image.state === FileState.UPLOAD_FAILED) && !enableOfflineSupport) {
+          continue;
         }
-      }
 
-      // To get the mime type of the image from the file name and send it as an response for an image
-      if (image.state === FileState.UPLOADED || image.state === FileState.FINISHED) {
-        attachments.push(mapImageUploadToAttachment(image));
+        if (image.state === FileState.UPLOADING) {
+          // TODO: show error to user that they should wait until image is uploaded
+          if (value.sendImageAsync) {
+            /**
+             * If user hit send before image uploaded, push ID into a queue to later
+             * be matched with the successful CDN response
+             */
+            setAsyncIds((prevAsyncIds) => [...prevAsyncIds, image.id]);
+          } else {
+            sending.current = false;
+            return setText(prevText);
+          }
+        }
+
+        // To get the mime type of the image from the file name and send it as an response for an image
+        if (image.state === FileState.UPLOADED || image.state === FileState.FINISHED) {
+          attachments.push(mapImageUploadToAttachment(image));
+        }
       }
-    }
 
-    for (const file of fileUploads) {
-      if (enableOfflineSupport) {
-        if (file.state === FileState.NOT_SUPPORTED) {
+      for (const file of fileUploads) {
+        if (enableOfflineSupport) {
+          if (file.state === FileState.NOT_SUPPORTED) {
+            return;
+          }
+          attachments.push(mapFileUploadToAttachment(file));
+          continue;
+        }
+
+        if (!file || file.state === FileState.UPLOAD_FAILED) {
+          continue;
+        }
+
+        if (file.state === FileState.UPLOADING) {
+          // TODO: show error to user that they should wait until image is uploaded
+          sending.current = false;
           return;
         }
-        attachments.push(mapFileUploadToAttachment(file));
-        continue;
-      }
 
-      if (!file || file.state === FileState.UPLOAD_FAILED) {
-        continue;
+        if (file.state === FileState.UPLOADED || file.state === FileState.FINISHED) {
+          attachments.push(mapFileUploadToAttachment(file));
+        }
       }
 
-      if (file.state === FileState.UPLOADING) {
-        // TODO: show error to user that they should wait until image is uploaded
+      // Disallow sending message if its empty.
+      if (!prevText && attachments.length === 0 && !customMessageData?.poll_id) {
         sending.current = false;
         return;
       }
 
-      if (file.state === FileState.UPLOADED || file.state === FileState.FINISHED) {
-        attachments.push(mapFileUploadToAttachment(file));
-      }
-    }
-
-    // Disallow sending message if its empty.
-    if (!prevText && attachments.length === 0 && !customMessageData?.poll_id) {
-      sending.current = false;
-      return;
-    }
-
-    const message = value.editing;
-    if (message && message.type !== 'error') {
-      const updatedMessage = {
-        ...message,
-        attachments,
-        mentioned_users: mentionedUsers,
-        quoted_message: undefined,
-        text: prevText,
-        ...customMessageData,
-      } as Parameters<StreamChat<StreamChatGenerics>['updateMessage']>[0];
-
-      // TODO: Remove this line and show an error when submit fails
-      value.clearEditingState();
-
-      const updateMessagePromise = value
-        .editMessage(
-          // @ts-ignore
-          removeReservedFields(updatedMessage),
-        )
-        .then(value.clearEditingState);
-      resetInput(attachments);
-      logChatPromiseExecution(updateMessagePromise, 'update message');
-
-      sending.current = false;
-    } else {
-      try {
-        /**
-         * If the message is bounced by moderation, we firstly remove the message from message list and then send a new message.
-         */
-        if (message && isBouncedMessage(message as MessageType<StreamChatGenerics>)) {
-          await removeMessage(message);
-        }
-        value.sendMessage({
+      const message = value.editing;
+      if (message && message.type !== 'error') {
+        const updatedMessage = {
+          ...message,
           attachments,
-          mentioned_users: uniq(mentionedUsers),
-          /** Parent message id - in case of thread */
-          parent_id: thread?.id,
-          quoted_message_id: value.quotedMessage ? value.quotedMessage.id : undefined,
-          show_in_channel: sendThreadMessageInChannel || undefined,
+          mentioned_users: mentionedUsers,
+          quoted_message: undefined,
           text: prevText,
           ...customMessageData,
-        } as unknown as StreamMessage<StreamChatGenerics>);
-
-        value.clearQuotedMessageState();
-        sending.current = false;
+        } as Parameters<StreamChat<StreamChatGenerics>['updateMessage']>[0];
+
+        // TODO: Remove this line and show an error when submit fails
+        value.clearEditingState();
+
+        const updateMessagePromise = value
+          .editMessage(
+            // @ts-ignore
+            removeReservedFields(updatedMessage),
+          )
+          .then(value.clearEditingState);
+        logChatPromiseExecution(updateMessagePromise, 'update message');
         resetInput(attachments);
-      } catch (_error) {
+
         sending.current = false;
-        if (value.quotedMessage && typeof value.quotedMessage !== 'boolean') {
-          value.setQuotedMessageState(value.quotedMessage);
+      } else {
+        try {
+          /**
+           * If the message is bounced by moderation, we firstly remove the message from message list and then send a new message.
+           */
+          if (message && isBouncedMessage(message as MessageType<StreamChatGenerics>)) {
+            await removeMessage(message);
+          }
+          value.sendMessage({
+            attachments,
+            mentioned_users: uniq(mentionedUsers),
+            /** Parent message id - in case of thread */
+            parent_id: thread?.id,
+            quoted_message_id: value.quotedMessage ? value.quotedMessage.id : undefined,
+            show_in_channel: sendThreadMessageInChannel || undefined,
+            text: prevText,
+            ...customMessageData,
+          } as unknown as StreamMessage<StreamChatGenerics>);
+
+          value.clearQuotedMessageState();
+          sending.current = false;
+          resetInput(attachments);
+        } catch (_error) {
+          sending.current = false;
+          if (value.quotedMessage && typeof value.quotedMessage !== 'boolean') {
+            value.setQuotedMessageState(value.quotedMessage);
+          }
+          setText(prevText.slice(giphyEnabled && giphyActive ? 7 : 0)); // 7 because of '/giphy ' length
+          console.log('Failed to send message');
         }
-        setText(prevText.slice(giphyEnabled && giphyActive ? 7 : 0)); // 7 because of '/giphy ' length
-        console.log('Failed to send message');
       }
-    }
-  };
+    },
+  );
 
-  const sendMessageAsync = (id: string) => {
+  const sendMessageAsync = useStableCallback((id: string) => {
     const image = asyncUploads[id];
     if (!image || image.state === FileState.UPLOAD_FAILED) {
       return;
@@ -1111,31 +1127,31 @@ export const MessageInputProvider = <
         console.log('Failed');
       }
     }
-  };
+  });
 
-  const setInputBoxRef = (ref: TextInput | null) => {
+  const setInputBoxRef = useStableCallback((ref: TextInput | null) => {
     inputBoxRef.current = ref;
     if (value.setInputRef) {
       value.setInputRef(ref);
     }
-  };
+  });
 
-  const getTriggerSettings = () => {
+  const triggerSettings = useMemo(() => {
     try {
       let triggerSettings: TriggerSettings<StreamChatGenerics> = {};
       if (channel) {
-        if (value.autoCompleteTriggerSettings) {
-          triggerSettings = value.autoCompleteTriggerSettings({
+        if (autoCompleteTriggerSettings) {
+          triggerSettings = autoCompleteTriggerSettings({
             channel,
             client,
-            emojiSearchIndex: value.emojiSearchIndex,
+            emojiSearchIndex,
             onMentionSelectItem: onSelectItem,
           });
         } else {
           triggerSettings = ACITriggerSettings<StreamChatGenerics>({
             channel,
             client,
-            emojiSearchIndex: value.emojiSearchIndex,
+            emojiSearchIndex,
             onMentionSelectItem: onSelectItem,
           });
         }
@@ -1145,11 +1161,11 @@ export const MessageInputProvider = <
       console.warn('Error in getting trigger settings', error);
       throw error;
     }
-  };
+  }, [channel, client, onSelectItem, autoCompleteTriggerSettings, emojiSearchIndex]);
 
-  const triggerSettings = getTriggerSettings();
+  // const triggerSettings = getTriggerSettings();
 
-  const updateMessage = async () => {
+  const updateMessage = useStableCallback(async () => {
     try {
       if (value.editing) {
         await client.updateMessage({
@@ -1164,51 +1180,54 @@ export const MessageInputProvider = <
     } catch (error) {
       console.log(error);
     }
-  };
+  });
 
   const regexCondition = /File (extension \.\w{2,4}|type \S+) is not supported/;
 
-  const getUploadSetStateAction =
+  const getUploadSetStateAction = useStableCallback(
     <UploadType extends ImageUpload | FileUpload>(
       id: string,
       fileState: FileStateValue,
       extraData: Partial<UploadType> = {},
     ): React.SetStateAction<UploadType[]> =>
-    (prevUploads: UploadType[]) =>
-      prevUploads.map((prevUpload) => {
-        if (prevUpload.id === id) {
-          return {
-            ...prevUpload,
-            ...extraData,
-            state: fileState,
-          };
-        }
-        return prevUpload;
-      });
+      (prevUploads: UploadType[]) =>
+        prevUploads.map((prevUpload) => {
+          if (prevUpload.id === id) {
+            return {
+              ...prevUpload,
+              ...extraData,
+              state: fileState,
+            };
+          }
+          return prevUpload;
+        }),
+  );
 
-  const handleFileOrImageUploadError = (error: unknown, isImageError: boolean, id: string) => {
-    if (isImageError) {
-      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
-      if (error instanceof Error) {
-        if (regexCondition.test(error.message)) {
-          return setImageUploads(getUploadSetStateAction(id, FileState.NOT_SUPPORTED));
-        }
+  const handleFileOrImageUploadError = useStableCallback(
+    (error: unknown, isImageError: boolean, id: string) => {
+      if (isImageError) {
+        setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
+        if (error instanceof Error) {
+          if (regexCondition.test(error.message)) {
+            return setImageUploads(getUploadSetStateAction(id, FileState.NOT_SUPPORTED));
+          }
 
-        return setImageUploads(getUploadSetStateAction(id, FileState.UPLOAD_FAILED));
-      }
-    } else {
-      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
+          return setImageUploads(getUploadSetStateAction(id, FileState.UPLOAD_FAILED));
+        }
+      } else {
+        setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads - 1);
 
-      if (error instanceof Error) {
-        if (regexCondition.test(error.message)) {
-          return setFileUploads(getUploadSetStateAction(id, FileState.NOT_SUPPORTED));
+        if (error instanceof Error) {
+          if (regexCondition.test(error.message)) {
+            return setFileUploads(getUploadSetStateAction(id, FileState.NOT_SUPPORTED));
+          }
+          return setFileUploads(getUploadSetStateAction(id, FileState.UPLOAD_FAILED));
         }
-        return setFileUploads(getUploadSetStateAction(id, FileState.UPLOAD_FAILED));
       }
-    }
-  };
+    },
+  );
 
-  const uploadFile = async ({ newFile }: { newFile: FileUpload }) => {
+  const uploadFile = useStableCallback(async ({ newFile }: { newFile: FileUpload }) => {
     const { file, id } = newFile;
 
     // The file name can have special characters, so we escape it.
@@ -1251,9 +1270,9 @@ export const MessageInputProvider = <
       }
       handleFileOrImageUploadError(error, false, id);
     }
-  };
+  });
 
-  const uploadImage = async ({ newImage }: { newImage: ImageUpload }) => {
+  const uploadImage = useStableCallback(async ({ newImage }: { newImage: ImageUpload }) => {
     const { file, id } = newImage || {};
 
     if (!file) {
@@ -1334,9 +1353,9 @@ export const MessageInputProvider = <
       }
       handleFileOrImageUploadError(error, true, id);
     }
-  };
+  });
 
-  const uploadNewFile = async (file: File) => {
+  const uploadNewFile = useStableCallback(async (file: File) => {
     try {
       const id: string = generateRandomId();
       const fileConfig = getFileUploadConfig();
@@ -1382,9 +1401,9 @@ export const MessageInputProvider = <
     } catch (error) {
       console.log('Error uploading file', error);
     }
-  };
+  });
 
-  const uploadNewImage = async (image: Partial<Asset>) => {
+  const uploadNewImage = useStableCallback(async (image: Partial<Asset>) => {
     try {
       const id = generateRandomId();
       const imageUploadConfig = getImageUploadConfig();
@@ -1430,15 +1449,15 @@ export const MessageInputProvider = <
     } catch (error) {
       console.log('Error uploading image', error);
     }
-  };
+  });
 
-  const openPollCreationDialog = () => {
+  const openPollCreationDialog = useStableCallback(() => {
     if (openPollCreationDialogFromContext) {
       openPollCreationDialogFromContext({ sendMessage });
       return;
     }
     defaultOpenPollCreationDialog();
-  };
+  });
 
   const messageInputContext = useCreateMessageInputContext({
     appendText,
@@ -1523,3 +1542,10 @@ export const useMessageInputContext = <
 
   return contextValue;
 };
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+const useStableCallback = <T extends Function>(callback: T): T => {
+  const ref = useRef<T>(callback);
+  ref.current = callback;
+  return useCallback(((...args: unknown[]) => ref.current(...args)) as unknown as T, []);
+};