fix: duplicate message teleportation

Author: isekovanic

package/src/components/Message/Message.tsx

@@ -62,6 +62,7 @@ import {
 import { FileTypes } from '../../types/types';
 import {
   checkMessageEquality,
+  generateRandomId,
   hasOnlyEmojis,
   isBlockedMessage,
   isBouncedMessage,
@@ -71,6 +72,8 @@ import type { Thumbnail } from '../Attachment/utils/buildGallery/types';
 import { dismissKeyboard } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { BottomSheetModal } from '../UIComponents';
 
+const createMessageOverlayId = () => `message-overlay-${generateRandomId()}`;
+
 export type TouchableEmitter =
   | 'failed-image'
   | 'fileAttachment'
@@ -325,6 +328,15 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     () => isMessageAIGenerated(message),
     [message, isMessageAIGenerated],
   );
+  const messageOverlayIdRef = useRef(createMessageOverlayId());
+  const previousMessageIdRef = useRef(message.id);
+
+  if (previousMessageIdRef.current !== message.id) {
+    previousMessageIdRef.current = message.id;
+    messageOverlayIdRef.current = createMessageOverlayId();
+  }
+
+  const messageOverlayId = messageOverlayIdRef.current;
   const isMessageTypeDeleted = message.type === 'deleted';
   const { client } = chatContext;
 
@@ -339,7 +351,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
       const layout = await measureInWindow(messageWrapperRef, insets);
       setRect(layout);
       setOverlayMessageH(layout);
-      openOverlay(message.id);
+      openOverlay(messageOverlayId);
     } catch (e) {
       console.error(e);
     }
@@ -685,7 +697,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   };
 
   const frozenMessage = useRef(message);
-  const { active: overlayActive } = useIsOverlayActive(message.id);
+  const { active: overlayActive } = useIsOverlayActive(messageOverlayId);
 
   const messageHasOnlySingleAttachment =
     !message.text && !message.quoted_message && message.attachments?.length === 1;
@@ -709,6 +721,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     lastGroupMessage: groupStyles?.[0] === 'single' || groupStyles?.[0] === 'bottom',
     members,
     message: overlayActive ? frozenMessage.current : message,
+    messageOverlayId,
     messageContentOrder,
     messageHasOnlySingleAttachment,
     myMessageTheme: messagesContext.myMessageTheme,

package/src/components/Message/hooks/__tests__/useShouldUseOverlayStyles.test.tsx

@@ -0,0 +1,120 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, cleanup, renderHook } from '@testing-library/react-native';
+
+import {
+  MessageContextValue,
+  MessageProvider,
+} from '../../../../contexts/messageContext/MessageContext';
+import { generateMessage } from '../../../../mock-builders/generator/message';
+import { finalizeCloseOverlay, openOverlay, overlayStore } from '../../../../state-store';
+
+import { useShouldUseOverlayStyles } from '../useShouldUseOverlayStyles';
+
+const createMessageContextValue = (overrides: Partial<MessageContextValue>): MessageContextValue =>
+  ({
+    actionsEnabled: false,
+    alignment: 'left',
+    channel: {} as MessageContextValue['channel'],
+    deliveredToCount: 0,
+    dismissOverlay: jest.fn(),
+    files: [],
+    groupStyles: [],
+    handleAction: jest.fn(),
+    handleToggleReaction: jest.fn(),
+    hasReactions: false,
+    images: [],
+    isMessageAIGenerated: jest.fn(),
+    isMyMessage: false,
+    lastGroupMessage: false,
+    members: {},
+    message: generateMessage({ id: 'shared-message-id' }),
+    messageContentOrder: [],
+    messageHasOnlySingleAttachment: false,
+    messageOverlayId: 'message-overlay-default',
+    onLongPress: jest.fn(),
+    onlyEmojis: false,
+    onOpenThread: jest.fn(),
+    onPress: jest.fn(),
+    onPressIn: null,
+    otherAttachments: [],
+    reactions: [],
+    readBy: false,
+    setQuotedMessage: jest.fn(),
+    showAvatar: false,
+    showMessageOverlay: jest.fn(),
+    showReactionsOverlay: jest.fn(),
+    showMessageStatus: false,
+    threadList: false,
+    videos: [],
+    ...overrides,
+  }) as MessageContextValue;
+
+const createWrapper = (value: MessageContextValue) => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <MessageProvider value={value}>{children}</MessageProvider>
+  );
+
+  return Wrapper;
+};
+
+describe('useShouldUseOverlayStyles', () => {
+  beforeEach(() => {
+    act(() => {
+      finalizeCloseOverlay();
+      overlayStore.next({
+        closing: false,
+        closingPortalHostBlacklist: [],
+        id: undefined,
+      });
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+
+    act(() => {
+      finalizeCloseOverlay();
+      overlayStore.next({
+        closing: false,
+        closingPortalHostBlacklist: [],
+        id: undefined,
+      });
+    });
+  });
+
+  it('tracks overlay activity by messageOverlayId instead of message.id', () => {
+    const sharedMessage = generateMessage({ id: 'same-message-id' });
+
+    const first = renderHook(() => useShouldUseOverlayStyles(), {
+      wrapper: createWrapper(
+        createMessageContextValue({
+          message: sharedMessage,
+          messageOverlayId: 'message-overlay-first',
+        }),
+      ),
+    });
+
+    const second = renderHook(() => useShouldUseOverlayStyles(), {
+      wrapper: createWrapper(
+        createMessageContextValue({
+          message: sharedMessage,
+          messageOverlayId: 'message-overlay-second',
+        }),
+      ),
+    });
+
+    expect(first.result.current).toBe(false);
+    expect(second.result.current).toBe(false);
+
+    act(() => {
+      openOverlay('message-overlay-first');
+    });
+
+    expect(first.result.current).toBe(true);
+    expect(second.result.current).toBe(false);
+
+    first.unmount();
+    second.unmount();
+  });
+});

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -34,6 +34,7 @@ export const useCreateMessageContext = ({
   lastGroupMessage,
   members,
   message,
+  messageOverlayId,
   messageContentOrder,
   myMessageTheme,
   onLongPress,
@@ -86,6 +87,7 @@ export const useCreateMessageContext = ({
       lastGroupMessage,
       members,
       message,
+      messageOverlayId,
       messageContentOrder,
       myMessageTheme,
       onLongPress,
@@ -117,6 +119,7 @@ export const useCreateMessageContext = ({
       lastGroupMessage,
       membersValue,
       myMessageThemeString,
+      messageOverlayId,
       reactionsValue,
       stringifiedMessage,
       stringifiedQuotedMessage,

package/src/components/Message/hooks/useShouldUseOverlayStyles.ts

@@ -2,8 +2,8 @@ import { useMessageContext } from '../../../contexts';
 import { useIsOverlayActive } from '../../../state-store';
 
 export const useShouldUseOverlayStyles = () => {
-  const { message } = useMessageContext();
-  const { active, closing } = useIsOverlayActive(message?.id);
+  const { messageOverlayId } = useMessageContext();
+  const { active, closing } = useIsOverlayActive(messageOverlayId);
 
   return active && !closing;
 };

package/src/contexts/messageContext/MessageContext.tsx

@@ -56,6 +56,11 @@ export type MessageContextValue = {
   lastGroupMessage: boolean;
   /** Current [message object](https://getstream.io/chat/docs/#message_format) */
   message: LocalMessage;
+  /**
+   * Stable UI-instance identifier for the rendered message.
+   * Used for overlay state so two rendered instances of the same message do not collide.
+   */
+  messageOverlayId: string;
   /** Order to render the message content */
   messageContentOrder: MessageContentType[];
   /**