stream-chat-react-native-core 9.10.1-beta.2 → 10.0.0-rc.1

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -10,15 +10,6 @@ import React, {
 import { Alert, Linking, TextInputProps } from 'react-native';
 
 import { lookup as lookupMimeType } from 'mime-types';
-import {
-  LocalMessage,
-  MessageComposer,
-  SendMessageOptions,
-  StreamChat,
-  Message as StreamMessage,
-  UpdateMessageOptions,
-  UploadRequestFn,
-} from 'stream-chat';
 
 import { useCreateMessageInputContext } from './hooks/useCreateMessageInputContext';
 import { useMessageComposer } from './hooks/useMessageComposer';
@@ -26,13 +17,8 @@ import { useMessageComposer } from './hooks/useMessageComposer';
 import { dismissKeyboard } from '../../components/KeyboardCompatibleView/KeyboardCompatibleView';
 import { parseLinksFromText } from '../../components/Message/MessageItemView/utils/parseLinks';
 import { useAudioRecorder } from '../../components/MessageInput/hooks/useAudioRecorder';
-import { useNotificationApi } from '../../components/Notifications';
 import { useStableCallback } from '../../hooks/useStableCallback';
-import {
-  createAttachmentsCompositionMiddleware,
-  createDraftAttachmentsCompositionMiddleware,
-  setupVideoAttachmentPreviewMiddleware,
-} from '../../middlewares/attachments';
+import { setupVideoAttachmentPreviewMiddleware } from '../../middlewares/attachments';
 
 import { isDocumentPickerAvailable, MediaTypes, NativeHandlers } from '../../native';
 import { AudioRecorderManager } from '../../state-store/audio-recorder-manager';
@@ -41,11 +27,7 @@ import { TextInputRef } from '../../types/react-native-compat';
 import { File } from '../../types/types';
 import { compressedImageURI } from '../../utils/compressImage';
 import { useAttachmentPickerContext } from '../attachmentPickerContext/AttachmentPickerContext';
-import { useChannelContext } from '../channelContext/ChannelContext';
-import { useChatContext } from '../chatContext/ChatContext';
-import { useMessageComposerAPIContext } from '../messageComposerContext/MessageComposerAPIContext';
 import { useOwnCapabilitiesContext } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
-import { useThreadContext } from '../threadContext/ThreadContext';
 import { useTranslationContext } from '../translationContext/TranslationContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
@@ -124,11 +106,6 @@ export type InputMessageInputContextValue = {
    */
   attachmentSelectionBarHeight: number;
 
-  editMessage: (params: {
-    localMessage: LocalMessage;
-    options?: UpdateMessageOptions;
-  }) => ReturnType<StreamChat['updateMessage']>;
-
   /**
    * Controls what happens when the attach button is pressed while the attachment picker is open.
    * When true (default), the message input is focused, toggling from the picker to the keyboard.
@@ -148,18 +125,12 @@ export type InputMessageInputContextValue = {
   /** When false, ImageSelectorIcon will be hidden */
   hasImagePicker: boolean;
 
-  sendMessage: (params: {
-    localMessage: LocalMessage;
-    message: StreamMessage;
-    options?: SendMessageOptions;
-  }) => Promise<void>;
   /**
    * Additional props for underlying TextInput component. These props will be forwarded as it is to TextInput component.
    *
    * @see See https://reactnative.dev/docs/textinput#reference
    */
   additionalTextInputProps?: TextInputProps;
-  allowSendBeforeAttachmentsUpload?: boolean;
   closePollCreationDialog?: () => void;
   /**
    * Compress image with quality (from 0 to 1, where 1 is best quality).
@@ -174,15 +145,6 @@ export type InputMessageInputContextValue = {
    */
   createPollOptionGap?: number;
 
-  /**
-   * Override file upload request
-   *
-   * @param file    File object
-   *
-   * @overrideType Function
-   */
-  doFileUploadRequest?: UploadRequestFn;
-
   /**
    * Handler for when the attach button is pressed.
    */
@@ -208,8 +170,7 @@ export type InputMessageInputContextValue = {
   messageInputHeightStore: MessageInputHeightStore;
 };
 
-export type MessageInputContextValue = LocalMessageInputContext &
-  Omit<InputMessageInputContextValue, 'sendMessage'>;
+export type MessageInputContextValue = LocalMessageInputContext & InputMessageInputContextValue;
 
 export const MessageInputContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as MessageInputContextValue,
@@ -228,15 +189,10 @@ export const MessageInputProvider = ({
     disableAttachmentPicker,
     shouldRenderAttachmentPicker = true,
   } = useAttachmentPickerContext();
-  const { client } = useChatContext();
   const channelCapabilities = useOwnCapabilitiesContext();
   const [audioRecorderManager] = useState(new AudioRecorderManager());
 
-  const { uploadAbortControllerRef } = useChannelContext();
-  const { clearEditingState } = useMessageComposerAPIContext();
-  const { thread } = useThreadContext();
   const { t } = useTranslationContext();
-  const { addNotification } = useNotificationApi();
   const inputBoxRef = useRef<InputBoxRef | null>(null);
 
   const [showPollCreationDialog, setShowPollCreationDialog] = useState(false);
@@ -244,48 +200,32 @@ export const MessageInputProvider = ({
   const defaultOpenPollCreationDialog = useCallback(() => setShowPollCreationDialog(true), []);
   const closePollCreationDialog = useCallback(() => setShowPollCreationDialog(false), []);
 
-  const {
-    openPollCreationDialog: openPollCreationDialogFromContext,
-    allowSendBeforeAttachmentsUpload,
-  } = value;
+  const { openPollCreationDialog: openPollCreationDialogFromContext } = value;
 
   const messageComposer = useMessageComposer();
-  const { attachmentManager, editedMessage } = messageComposer;
+  const { attachmentManager } = messageComposer;
 
   /**
-   * These are the RN SDK specific middlewares that are added to the message composer to provide the default behaviour.
-   * TODO: Discuss and decide if we provide them by default in the SDK or leave it to the user to add them if they want
-   * the feature.
+   * Composer middleware this SDK owns.
+   *
+   * Sending before uploads finish is deliberately not configured here: it is the composer's own
+   * `attachments.pendingUploadsEnabled`, defaulted by `<Chat>` through `client.config` (see
+   * `usePendingUploadsDefault`). An imperative `updateConfig` here would outrank the integrator's
+   * `client.config` and setup function, leaving them no way to change it.
+   *
+   * The draft composition is deliberately left alone: it keeps successful uploads only, and a
+   * draft is sent to the server, where a local file URI no other device can read has no business.
    */
   useEffect(() => {
-    if (value.doFileUploadRequest) {
-      attachmentManager.setCustomUploadFn(value.doFileUploadRequest);
-    }
-
     setupVideoAttachmentPreviewMiddleware(messageComposer);
-
-    if (allowSendBeforeAttachmentsUpload) {
-      messageComposer.compositionMiddlewareExecutor.replace([
-        createAttachmentsCompositionMiddleware(messageComposer),
-      ]);
-
-      messageComposer.draftCompositionMiddlewareExecutor.replace([
-        createDraftAttachmentsCompositionMiddleware(messageComposer),
-      ]);
-    }
-  }, [
-    value.doFileUploadRequest,
-    allowSendBeforeAttachmentsUpload,
-    messageComposer,
-    attachmentManager,
-  ]);
+  }, [messageComposer]);
 
   /**
    * Function for capturing a photo and uploading it
    */
   const takeAndUploadImage = useStableCallback(async (mediaType?: MediaTypes) => {
     if (!attachmentManager.availableUploadSlots) {
-      Alert.alert(t('Maximum number of files reached'));
+      Alert.alert(t('attachmentPicker.maxFiles.error', 'Maximum number of files reached'));
       return;
     }
 
@@ -296,11 +236,15 @@ export const MessageInputProvider = ({
 
     if (file.askToOpenSettings && disableAttachmentPicker) {
       Alert.alert(
-        t('Allow camera access in device settings'),
-        t('Device camera is used to take photos or videos.'),
+        t('common.cameraPermission.title', 'Allow camera access in device settings'),
+        t('common.cameraPermission.text', 'Device camera is used to take photos or videos.'),
         [
-          { style: 'cancel', text: t('Cancel') },
-          { onPress: () => Linking.openSettings(), style: 'default', text: t('Open Settings') },
+          { style: 'cancel', text: t('common.cancel.label', 'Cancel') },
+          {
+            onPress: () => Linking.openSettings(),
+            style: 'default',
+            text: t('common.openSettings.label', 'Open Settings'),
+          },
         ],
       );
     }
@@ -319,7 +263,7 @@ export const MessageInputProvider = ({
    */
   const pickAndUploadImageFromNativePicker = useStableCallback(async () => {
     if (!attachmentManager.availableUploadSlots) {
-      Alert.alert(t('Maximum number of files reached'));
+      Alert.alert(t('attachmentPicker.maxFiles.error', 'Maximum number of files reached'));
       return;
     }
 
@@ -328,11 +272,18 @@ export const MessageInputProvider = ({
     });
     if (result.askToOpenSettings) {
       Alert.alert(
-        t('Allow access to your Gallery'),
-        t('Device gallery permissions is used to take photos or videos.'),
+        t('common.galleryPermission.title', 'Allow access to your Gallery'),
+        t(
+          'common.galleryPermission.text',
+          'Device gallery permissions is used to take photos or videos.',
+        ),
         [
-          { style: 'cancel', text: t('Cancel') },
-          { onPress: () => Linking.openSettings(), style: 'default', text: t('Open Settings') },
+          { style: 'cancel', text: t('common.cancel.label', 'Cancel') },
+          {
+            onPress: () => Linking.openSettings(),
+            style: 'default',
+            text: t('common.openSettings.label', 'Open Settings'),
+          },
         ],
       );
     }
@@ -355,7 +306,7 @@ export const MessageInputProvider = ({
     }
 
     if (!attachmentManager.availableUploadSlots) {
-      Alert.alert(t('Maximum number of files reached'));
+      Alert.alert(t('attachmentPicker.maxFiles.error', 'Maximum number of files reached'));
       return;
     }
 
@@ -394,107 +345,32 @@ export const MessageInputProvider = ({
   }, [closePicker, attachmentPickerStore]);
 
   const sendMessage = useStableCallback(async () => {
-    const textToRestore = messageComposer.textComposer.text;
-    let compositionAccepted = false;
+    const text = messageComposer.textComposer.text;
+
+    if (!channelCapabilities.sendLinks && parseLinksFromText(text).length > 0) {
+      Alert.alert(
+        t('common.linksDisabled.title', 'Links are disabled'),
+        t('common.linksDisabled.text', 'Sending links is not allowed in this conversation'),
+      );
+      return;
+    }
 
     inputBoxRef.current?.clearState();
 
     try {
-      const composition = await messageComposer.compose();
-
-      if (!composition || !composition.message) {
-        inputBoxRef.current?.restoreState(textToRestore);
-        return;
-      }
-
-      const { localMessage, message, sendOptions } = composition;
-      const linkInfos = parseLinksFromText(localMessage.text);
-
-      if (!channelCapabilities.sendLinks && linkInfos.length > 0) {
-        Alert.alert(
-          t('Links are disabled'),
-          t('Sending links is not allowed in this conversation'),
-        );
-
-        inputBoxRef.current?.restoreState(textToRestore);
-        return;
-      }
-
-      compositionAccepted = true;
-
-      // MODERATION: This is for the case where the message is of type 'error' and if you try to edit it, it will throw an error.
-      if (editedMessage && editedMessage.type !== 'error') {
-        try {
-          clearEditingState();
-          await value.editMessage({ localMessage, options: sendOptions });
-        } catch (error) {
-          addNotification(
-            {
-              message: t('Edit message request failed'),
-              options: {
-                ...(error instanceof Error ? { originalError: error } : {}),
-                severity: 'error',
-              },
-              origin: { emitter: 'MessageComposer' },
-            },
-            {
-              incident: {
-                domain: 'api',
-                entity: 'message',
-                operation: 'edit',
-              },
-            },
-          );
-          throw new Error('Error while editing message');
-        }
-      } else {
-        try {
-          // Since the message id does not get cleared, we have to handle this manually
-          // and let the poll creation dialog handle clearing the rest of the state. Once
-          // sending a message has been moved to the composer as an API, this will be
-          // redundant and can be removed.
-          if (localMessage.poll_id) {
-            messageComposer.state.partialNext({
-              id: MessageComposer.generateId(),
-              pollId: null,
-            });
-          } else {
-            messageComposer.clear();
-          }
-          // Even though we edit, but we eventually send the message as a regular message, so we need to clear the editing state.
-          if (editedMessage) {
-            clearEditingState();
-          }
-          await value.sendMessage({
-            localMessage,
-            message,
-            options: sendOptions,
-          });
-        } catch (error) {
-          addNotification(
-            {
-              message: t('Send message request failed'),
-              options: {
-                ...(error instanceof Error ? { originalError: error } : {}),
-                severity: 'error',
-              },
-              origin: { emitter: 'MessageComposer' },
-            },
-            {
-              incident: {
-                domain: 'api',
-                entity: 'message',
-                operation: 'send',
-              },
-            },
-          );
-          throw new Error('Error while sending message');
-        }
+      // A bounced message (type 'error') is never updated: editing it sends it again as a new message.
+      const { editedMessage } = messageComposer;
+      const result =
+        editedMessage && editedMessage.type !== 'error'
+          ? await messageComposer.update()
+          : await messageComposer.send();
+
+      if (result === 'nothing-to-send') {
+        inputBoxRef.current?.restoreState(text);
       }
     } catch (error) {
-      if (!compositionAccepted) {
-        inputBoxRef.current?.restoreState(textToRestore);
-      }
+      // Only composing can throw; a failed request is reported by the composer itself.
+      inputBoxRef.current?.restoreState(text);
       console.error('Error while sending message:', error);
     }
   });
@@ -521,7 +397,6 @@ export const MessageInputProvider = ({
           file.type ||
           (typeof fallbackMimeType === 'string' ? fallbackMimeType : 'application/octet-stream'),
       };
-      uploadAbortControllerRef.current.set(file.name, client.createAbortControllerForNextRequest());
       const fileURI = normalizedFile.type.includes('image')
         ? await compressedImageURI(normalizedFile, value.compressImageQuality)
         : normalizedFile.uri;
@@ -539,13 +414,11 @@ export const MessageInputProvider = ({
       if (blockedAttachmentIds.length) {
         attachmentManager.removeAttachments(blockedAttachmentIds);
       }
-      uploadAbortControllerRef.current.delete(normalizedFile.name);
     } catch (error) {
       if (
         error instanceof Error &&
         (error.name === 'AbortError' || error.name === 'CanceledError')
       ) {
-        uploadAbortControllerRef.current.delete(file.name);
         return;
       }
     }
@@ -570,12 +443,11 @@ export const MessageInputProvider = ({
     pickFile,
     setInputBoxRef,
     takeAndUploadImage,
-    thread,
     uploadNewFile,
     ...value,
     closePollCreationDialog,
     openPollCreationDialog,
-    sendMessage, // overriding the originally passed in sendMessage
+    sendMessage,
     showPollCreationDialog,
     audioRecorderManager,
     startVoiceRecording,

package/src/contexts/messageInputContext/__tests__/filePickers.test.tsx

@@ -32,15 +32,7 @@ const Wrapper = ({
 }) => {
   return (
     <Chat client={client}>
-      <ChannelProvider
-        value={
-          {
-            uploadAbortControllerRef: {
-              current: new Map(),
-            },
-          } as ChannelContextValue
-        }
-      >
+      <ChannelProvider value={{} as ChannelContextValue}>
         <AttachmentPickerProvider
           value={
             { disableAttachmentPicker: true } as unknown as React.ComponentProps<