stream-chat-react-native-core 9.0.0-beta.4 → 9.0.0-beta.6

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -31,7 +31,7 @@ export type AudioRecordingButtonPropsWithContext = Pick<
   | 'asyncMessagesMinimumPressDuration'
   | 'asyncMessagesSlideToCancelDistance'
   | 'asyncMessagesLockDistance'
-  | 'asyncMessagesMultiSendEnabled'
+  | 'audioRecordingSendOnComplete'
   | 'audioRecorderManager'
   | 'startVoiceRecording'
   | 'deleteVoiceRecording'
@@ -67,7 +67,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     startVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -156,7 +156,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
       return;
     }
     if (status === 'recording') {
-      uploadVoiceRecording(asyncMessagesMultiSendEnabled);
+      uploadVoiceRecording(audioRecordingSendOnComplete);
     } else {
       resetAudioRecording();
     }
@@ -263,7 +263,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     startVoiceRecording,
     deleteVoiceRecording,
     uploadVoiceRecording,
@@ -281,7 +281,7 @@ export const AudioRecordingButton = (props: AudioRecordingButtonProps) => {
         asyncMessagesMinimumPressDuration,
         asyncMessagesSlideToCancelDistance,
         asyncMessagesLockDistance,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         startVoiceRecording,
         deleteVoiceRecording,
         uploadVoiceRecording,

package/src/components/MessageInput/components/OutputButtons/index.tsx

@@ -33,7 +33,7 @@ export type OutputButtonsWithContextProps = Pick<ChatContextValue, 'isOnline'> &
     | 'asyncMessagesMinimumPressDuration'
     | 'asyncMessagesSlideToCancelDistance'
     | 'asyncMessagesLockDistance'
-    | 'asyncMessagesMultiSendEnabled'
+    | 'audioRecordingSendOnComplete'
     | 'audioRecordingEnabled'
     | 'CooldownTimer'
     | 'SendButton'
@@ -178,7 +178,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
     asyncMessagesMinimumPressDuration,
     asyncMessagesSlideToCancelDistance,
     asyncMessagesLockDistance,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     CooldownTimer,
     SendButton,
     StopMessageStreamingButton,
@@ -192,7 +192,7 @@ export const OutputButtons = (props: OutputButtonsProps) => {
       {...{
         asyncMessagesLockDistance,
         asyncMessagesMinimumPressDuration,
-        asyncMessagesMultiSendEnabled,
+        audioRecordingSendOnComplete,
         asyncMessagesSlideToCancelDistance,
         audioRecordingEnabled,
         channel,

package/src/components/MessageInput/hooks/useAudioRecorder.tsx

@@ -68,10 +68,10 @@ export const useAudioRecorder = ({
 
   /**
    * Function to upload or send voice recording.
-   * @param multiSendEnabled boolean
+   * @param sendOnComplete boolean
    */
   const uploadVoiceRecording = useCallback(
-    async (multiSendEnabled: boolean) => {
+    async (sendOnComplete: boolean) => {
       try {
         const { recording, duration, waveformData } = audioRecorderManager.state.getLatestValue();
         await stopVoiceRecording();
@@ -112,12 +112,11 @@ export const useAudioRecorder = ({
 
         audioRecorderManager.reset();
 
-        if (multiSendEnabled) {
+        if (sendOnComplete) {
           await attachmentManager.uploadAttachment(audioFile);
+          setIsScheduleForSubmit(true);
         } else {
-          // FIXME: cannot call handleSubmit() directly as the function has stale reference to file uploads
           await attachmentManager.uploadAttachment(audioFile);
-          setIsScheduleForSubmit(true);
         }
       } catch (error) {
         console.log('Error uploading voice recording: ', error);

package/src/components/MessageList/MessageFlashList.tsx

@@ -10,7 +10,7 @@ import {
 
 import Animated, { LinearTransition } from 'react-native-reanimated';
 
-import { FlashListProps, FlashListRef, useFlashListContext } from '@shopify/flash-list';
+import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
@@ -53,14 +53,20 @@ import { mergeThemes, useTheme } from '../../contexts/themeContext/ThemeContext'
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
 import { useStableCallback, useStateStore } from '../../hooks';
+import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
+type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
+
 let FlashList;
+let useFlashListContext: () => FlashListContextApi = () => undefined;
 
 try {
-  FlashList = require('@shopify/flash-list').FlashList;
+  const flashListModule = require('@shopify/flash-list');
+  FlashList = flashListModule.FlashList;
+  useFlashListContext = flashListModule.useFlashListContext;
 } catch {
   FlashList = undefined;
 }
@@ -996,6 +1002,9 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       return;
     }
 
+    const closeCorrectionDeltaY = height - currentListHeightRef.current;
+    bumpOverlayLayoutRevision(closeCorrectionDeltaY);
+
     const changedBy = currentListHeightRef.current - height;
     flashListRef.current?.getNativeScrollRef()?.setNativeProps({
       contentOffset: { x: 0, y: flashListRef.current?.getAbsoluteLastScrollOffset() + changedBy },
@@ -1132,7 +1141,7 @@ const FlashListFooterTypingAdapter = ({
   const typingUsersLengthRef = useRef<number>(typingUsers.length);
 
   useEffect(() => {
-    const listApi = api?.getRef();
+    const listApi = api?.getRef?.();
 
     if (!enabled || !listApi) {
       return;

package/src/contexts/messageContext/MessageContext.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useContext } from 'react';
+import type { View } from 'react-native';
 
 import type { Attachment, LocalMessage } from 'stream-chat';
 
@@ -56,6 +57,11 @@ export type MessageContextValue = {
   lastGroupMessage: boolean;
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
   message: LocalMessage;
+  /**
+   * Ref to the view that the message context menu should align with.
+   * Custom message renderers can attach this to a different subview if needed.
+   */
+  contextMenuAnchorRef: React.RefObject<View | null>;
   /**
    * Stable UI-instance identifier for the rendered message.
    * Used for overlay state so two rendered instances of the same message do not collide.

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -98,7 +98,7 @@ export type LocalMessageInputContext = {
   audioRecorderManager: AudioRecorderManager;
   startVoiceRecording: () => Promise<boolean | undefined>;
   deleteVoiceRecording: () => Promise<void>;
-  uploadVoiceRecording: (multiSendEnabled: boolean) => Promise<void>;
+  uploadVoiceRecording: (sendOnComplete: boolean) => Promise<void>;
   stopVoiceRecording: () => Promise<void>;
 };
 
@@ -114,10 +114,11 @@ export type InputMessageInputContextValue = {
    */
   asyncMessagesMinimumPressDuration: number;
   /**
-   * When it’s enabled, recorded messages won’t be sent immediately. Instead they will “stack up” in the composer
-   * allowing the user to send multiple voice recording as part of the same message.
+   * Controls whether a completed voice recording is sent immediately or added to the composer first.
+   * When true, the recording is sent immediately on completion.
+   * When false, the recording is added to the composer and only sent if the user decides to.
    */
-  asyncMessagesMultiSendEnabled: boolean;
+  audioRecordingSendOnComplete: boolean;
   /**
    * Controls how many pixels to the leading side the user has to scroll in order to cancel the recording of a voice
    * message.

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

@@ -7,8 +7,8 @@ export const useCreateMessageInputContext = ({
   additionalTextInputProps,
   asyncMessagesLockDistance,
   asyncMessagesMinimumPressDuration,
-  asyncMessagesMultiSendEnabled,
   asyncMessagesSlideToCancelDistance,
+  audioRecordingSendOnComplete,
   AttachButton,
   attachmentPickerBottomSheetHeight,
   AttachmentPickerSelectionBar,
@@ -86,8 +86,8 @@ export const useCreateMessageInputContext = ({
       additionalTextInputProps,
       asyncMessagesLockDistance,
       asyncMessagesMinimumPressDuration,
-      asyncMessagesMultiSendEnabled,
       asyncMessagesSlideToCancelDistance,
+      audioRecordingSendOnComplete,
       AttachButton,
       attachmentPickerBottomSheetHeight,
       AttachmentPickerSelectionBar,

package/src/contexts/themeContext/utils/theme.ts

@@ -583,6 +583,10 @@ export type Theme = {
   };
   messageItemView: {
     blockedMessageContainer: ViewStyle;
+    bubbleContentContainer: ViewStyle;
+    bubbleErrorContainer: ViewStyle;
+    bubbleReactionListTopContainer: ViewStyle;
+    bubbleWrapper: ViewStyle;
     actions: {
       button: ViewStyle & {
         defaultBackgroundColor?: ViewStyle['backgroundColor'];
@@ -728,12 +732,6 @@ export type Theme = {
       container: ViewStyle;
       text: TextStyle;
     };
-    bubble: {
-      reactionListTopContainer: ViewStyle;
-      contentContainer: ViewStyle;
-      wrapper: ViewStyle;
-      errorContainer: ViewStyle;
-    };
     pinnedHeader: {
       container: ViewStyle;
       label: TextStyle;
@@ -1491,6 +1489,10 @@ export const defaultTheme: Theme = {
   },
   messageItemView: {
     blockedMessageContainer: {},
+    bubbleContentContainer: {},
+    bubbleErrorContainer: {},
+    bubbleReactionListTopContainer: {},
+    bubbleWrapper: {},
     actions: {
       button: {},
       buttonText: {},
@@ -1635,12 +1637,6 @@ export const defaultTheme: Theme = {
       container: {},
       text: {},
     },
-    bubble: {
-      reactionListTopContainer: {},
-      contentContainer: {},
-      wrapper: {},
-      errorContainer: {},
-    },
     messageGroupedSingleOrBottomContainer: {},
     messageGroupedTopContainer: {},
     pinnedHeader: {

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.0.0-beta.4"
+  "version": "9.0.0-beta.6"
 }