@ethora/chat-component-rn 26.5.7 → 26.5.11

package/src/components/MessageBubble/Message.tsx

@@ -5,8 +5,8 @@ import {
   StyleSheet,
   findNodeHandle,
   UIManager,
-  Dimensions,
   Text,
+  Keyboard,
 } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -52,7 +52,9 @@ const CustomMessageBubble = styled.View<{
 }>`
   position: relative;
   max-width: 85%;
-  min-width: 30%;
+  min-width: ${({ isMedia }) => (isMedia ? '0' : '30%')};
+  align-items: ${({ isMedia, isUser }) =>
+    isMedia ? (isUser ? 'flex-end' : 'flex-start') : 'stretch'};
   padding: ${({isMedia}) => isMedia ? '0' : '10'}px;
   padding-bottom: ${({isMedia}) => isMedia ? '6' : '10'}px;
   margin-right: ${({isUser}) => isUser ? '0' : '10px'};
@@ -94,9 +96,12 @@ const CustomMessagePhotoContainer = styled.TouchableOpacity`
   margin-right: 10px;
 `;
 
-const CustomUserName = styled.Text<{ color?: string }>`
+const CustomUserName = styled.Text<{ color?: string; media: boolean }>`
   font-size: 14px;
   font-weight: 500;
+  padding-bottom: 8px;
+  padding-left: ${({media}) => media ? '16px': 0};
+  padding-top: ${({media}) => media ? '8px': 0};
   color: ${({ color }) => color || '#333'};
 `;
 
@@ -113,6 +118,15 @@ const CustomMessageTimestamp = styled.Text<{
   align-self: flex-end;
 `;
 
+const CustomTimestampRow = styled.View<{media: boolean}>`
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-end;
+  margin-top: 4;
+  gap: 4;
+  padding-right: ${({media}) => media ? '10px': 0};
+`;
+
 const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const dispatch = useDispatch();
   const { client } = useXmppClient();
@@ -127,12 +141,15 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   }
 
   const [contextMenuPosition, setContextMenuPosition] = useState<{
-    x: number;
-    y: number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
   } | null>(null);
 
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const messageRef = useRef<View>(null);
+  const bubbleRef = useRef<View>(null);
 
   const handleUserAvatarClick = (user: IUser): void => {
     dispatch(setActiveModal(MODAL_TYPES.PROFILE));
@@ -219,45 +236,40 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     );
   };
 
+  // Long-press → capture the bubble's on-screen bounding box. The actual
+  // menu placement (above / below, clamped to the viewport) is done in
+  // MessageInteractions, which measures the rendered menu height via
+  // onLayout — more accurate than estimating it here, and it's what keeps
+  // the menu adjacent to the message instead of floating far above (#13).
   const handleLongPress = () => {
-    if (messageRef.current) {
-      const nodeHandle = findNodeHandle(messageRef.current);
+    const target = (bubbleRef.current ?? messageRef.current) as any;
+    if (target?.measureInWindow) {
+      // Use measureInWindow — the SAME API the overlay host uses to find
+      // its own window origin. Both are then in identical window
+      // coordinates, so MessageInteractions' host-local conversion
+      // (subtract origin) is exact. Mixing this with UIManager.measure
+      // (pageX/pageY) drifted on Android (status-bar offset) and pushed the
+      // "below" menu too far from the message.
+      target.measureInWindow(
+        (x: number, y: number, width: number, height: number) => {
+          setContextMenuPosition({
+            left: x,
+            right: x + width,
+            top: y,
+            bottom: y + height,
+          });
+        }
+      );
+    } else if (target) {
+      const nodeHandle = findNodeHandle(target);
       if (nodeHandle) {
-        UIManager.measure(nodeHandle, (_x, _y, _width, height, pageX, pageY) => {
-          const screenHeight = Dimensions.get('window').height;
-          // MessageInteractions is ~5 rows (delete/edit/reply/react/copy)
-          // at ~48px each + padding, plus emoji bar on top. 280 covers
-          // both even with a couple of long labels. The legacy 150
-          // figure assumed a much shorter menu and stranded the popup
-          // off-screen on the last message of the room.
-          const MENU_HEIGHT = 280;
-          // Treat the consumer-supplied keyboardVerticalOffset as a
-          // proxy for tab bar + bottom safe-area when present; falls
-          // back to a reasonable default so the menu doesn't bump into
-          // the nav bar on phones without one in config.
-          const bottomReserve =
-            (config?.keyboardVerticalOffset ?? 0) + 24;
-          const topReserve = 16;
-
-          const spaceBelow = screenHeight - (pageY + height) - bottomReserve;
-          const spaceAbove = pageY - topReserve;
-
-          let menuY: number;
-          if (spaceBelow >= MENU_HEIGHT) {
-            menuY = pageY + height;
-          } else if (spaceAbove >= MENU_HEIGHT) {
-            menuY = pageY - MENU_HEIGHT;
-          } else {
-            // Neither side has room (e.g. very small phone, large
-            // menu) — clamp to the visible region so at least the
-            // top of the menu is reachable.
-            menuY = Math.max(
-              topReserve,
-              screenHeight - MENU_HEIGHT - bottomReserve
-            );
-          }
-
-          setContextMenuPosition({ x: pageX, y: menuY });
+        UIManager.measure(nodeHandle, (_x, _y, width, height, pageX, pageY) => {
+          setContextMenuPosition({
+            left: pageX,
+            right: pageX + width,
+            top: pageY,
+            bottom: pageY + height,
+          });
         });
       }
     }
@@ -297,7 +309,19 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
       >
         {!isUser && (
           <CustomMessagePhotoContainer
-            onPress={() => handleUserAvatarClick(message.user)}
+            // `disableProfilesInteractions` gates every entry point to the
+            // user-profile popup: this in-bubble avatar AND the chat-title
+            // press in ChatHeader. When disabled we still render the avatar
+            // visually but make it non-interactive (no press, no a11y
+            // affordance) — consumers who want it gone entirely can return
+            // null from a custom message component.
+            onPress={
+              config?.disableProfilesInteractions
+                ? undefined
+                : () => handleUserAvatarClick(message.user)
+            }
+            disabled={!!config?.disableProfilesInteractions}
+            accessible={!config?.disableProfilesInteractions}
           >
             {message.user?.profileImage ? (
               <CustomMessagePhoto source={{ uri: message.user.profileImage }} />
@@ -307,6 +331,26 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           </CustomMessagePhotoContainer>
         )}
         <Pressable
+          // The Pressable fills the row's content area, so the bubble
+          // inside must be aligned to the sender's side — otherwise it
+          // hugs the left and own media bubbles sit with a right-side
+          // gap (text bubbles only looked right because they're narrow).
+          // flex-end for own, flex-start for others.
+          style={{
+            flex: 1,
+            alignItems: isUser ? 'flex-end' : 'flex-start',
+          }}
+          // A plain tap anywhere on a message bubble dismisses the
+          // keyboard. The FlatList's keyboardShouldPersistTaps="handled"
+          // already dismisses taps on the empty GAPS between bubbles, but
+          // the bubble Pressable itself is a touch responder, so taps that
+          // landed on a message were "handled" and the keyboard stayed —
+          // which is exactly the "closes only every other time" symptom
+          // (hit a gap → close, hit a bubble → stay). Explicitly dismissing
+          // here makes it reliable across the whole list. onPress does NOT
+          // fire when onLongPress fires, so opening MessageInteractions via
+          // long-press never triggers this dismiss.
+          onPress={() => Keyboard.dismiss()}
           // disableInteractions hides the long-press → context menu
           // (delete / edit / reply / react). Mirrors web's config gate.
           onLongPress={
@@ -315,6 +359,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           delayLongPress={500}
         >
           <CustomMessageBubble
+            {...({ ref: bubbleRef, collapsable: false } as any)}
             isUser={isUser}
             deleted={message.isDeleted}
             isMedia={message?.isMediafile === 'true' && !message?.isDeleted}
@@ -322,7 +367,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             backgroundMessage={config?.messageColor?.backgroundMessage}
           >
             {!isUser && (
-              <CustomUserName color={config?.colors?.primary}>
+              <CustomUserName color={config?.colors?.primary} media={message?.isMediafile === 'true'}>
                 {message.user.name}
               </CustomUserName>
             )}
@@ -341,6 +386,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 messageText={message.locationPreview}
                 location={message?.location}
                 message={message}
+                isUser={isUser}
               />
             ) : (
               <>
@@ -364,26 +410,31 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 langSource={langSource}
               />
             )}
-            <CustomMessageTimestamp>
-            {!config?.disableSentLogic && isUser && isPending && <Text>sending...</Text>}
-            {!config?.disableSentLogic && isUser && isFailed && (
-              <Text
-                onPress={onRetryPress}
-                style={styles.failedText}
-                accessibilityRole="button"
-                accessibilityLabel="Retry sending message"
-              >
-                ! Failed — tap to retry
+            {/* <View style={styles.timestampRow}> */}
+            <CustomTimestampRow media={message?.isMediafile === 'true'}>
+              {!config?.disableSentLogic && isUser && isPending && (
+                <Text style={styles.timestampText}>sending...</Text>
+              )}
+              {!config?.disableSentLogic && isUser && isFailed && (
+                <Text
+                  onPress={onRetryPress}
+                  style={styles.failedText}
+                  accessibilityRole="button"
+                  accessibilityLabel="Retry sending message"
+                >
+                  ! Failed — tap to retry
+                </Text>
+              )}
+              <Text style={styles.timestampText}>
+                {new Date(message.date).toLocaleTimeString([], {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
               </Text>
-            )}
-            {new Date(message.date).toLocaleTimeString([], {
-              hour: '2-digit',
-              minute: '2-digit',
-            })}
-            {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
-              <DoubleTick />
-            )}
-          </CustomMessageTimestamp>
+              {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
+                <DoubleTick />
+              )}
+            </CustomTimestampRow>
 
           {message?.reply?.length && message?.reply?.length > 0 ? (
               <BottomReplyContainer
@@ -455,4 +506,23 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     marginRight: 6,
   },
+  // Row keeps the time text and the DoubleTick SVG on the same line.
+  // The time Text gets an explicit lineHeight equal to the 16px tick so
+  // both occupy the same-height box; with alignItems center they line up
+  // exactly. Without the lineHeight the Text's natural line box was
+  // shorter than the icon, so the centred tick floated above the digits.
+  timestampRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+    marginTop: 4,
+    gap: 4,
+  },
+  timestampText: {
+    fontSize: 12,
+    lineHeight: 16,
+    color: '#999',
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
 });

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -8,20 +8,27 @@ import {
 } from '../../helpers/constants/MESSAGE_INTERACTIONS';
 import { IMessage } from '../../types/types';
 import {
-  Modal,
   Text,
   StyleSheet,
   View,
   Pressable,
+  Dimensions,
+  type LayoutChangeEvent,
 } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
+import { useInteractionsOverlay } from './InteractionsOverlay';
 
 interface MessageInteractionsProps {
   isReply?: boolean;
   isUser?: boolean;
   message: IMessage;
-  position: { x: number; y: number } | null;
+  position: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+  } | null;
   closeMenu: () => void;
   handleReplyMessage: () => void;
   handleDeleteMessage: () => void;
@@ -40,11 +47,26 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   handleEditMessage,
 }) => {
   const { showToast } = useToast();
+  const { present, dismiss, originX, originY } = useInteractionsOverlay();
+  const overlayId = useId();
 
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
   );
 
+  const [menuSize, setMenuSize] = useState({ width: 0, height: 0 });
+
+  const handleMenuLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (
+      width &&
+      height &&
+      (width !== menuSize.width || height !== menuSize.height)
+    ) {
+      setMenuSize({ width, height });
+    }
+  };
+
   const handleCopyMessage = async (text: string) => {
     try {
       await Clipboard.setStringAsync(text);
@@ -71,58 +93,110 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   };
 
   const memoPosition = useMemo(() => {
-    if (position) {
-      if (isUser) {
-        return {
-          top: position.y,
-          right: 10,
-        };
-      }
-
-      return {
-        top: position.y,
-        left: 10,
-      };
+    if (!position) {
+      return undefined;
+    }
+
+    if (!menuSize.width || !menuSize.height) {
+      return { top: position.bottom, left: position.left, opacity: 0 };
+    }
+
+    const { width: screenWidth, height: screenHeight } =
+      Dimensions.get('window');
+    const bottomReserve = (config?.keyboardVerticalOffset ?? 0) + 24;
+    const topReserve = 16;
+    const sideMargin = 8;
+
+    const spaceBelow = screenHeight - position.bottom - bottomReserve;
+    const spaceAbove = position.top - topReserve;
+
+    let top: number;
+    if (spaceBelow >= menuSize.height) {
+      top = position.bottom;
+    } else if (spaceAbove >= menuSize.height) {
+      top = position.top - menuSize.height;
+    } else {
+      top = Math.max(topReserve, screenHeight - menuSize.height - bottomReserve);
     }
-  }, [position, isUser]);
-
-  if (config?.disableInteractions) {return null;}
-
-  return (
-    <Modal
-      transparent
-      animationType="fade"
-      visible={true}
-      onRequestClose={closeMenu}
-    >
-      {!message.isDeleted && (
-        <View style={styles.overlayFill}>
-          <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
-          <View style={[styles.contextMenu, memoPosition]}>
-            <MenuItem onPress={() => handleCopyMessage(message.body!)}>
-              <Text>{MESSAGE_INTERACTIONS.COPY}</Text>
-              <MESSAGE_INTERACTIONS_ICONS.COPY />
-            </MenuItem>
-            {isUser && (
-              <>
-                <Delimeter />
-                <MenuItem onPress={handleEditMessage}>
-                  <Text>{MESSAGE_INTERACTIONS.EDIT}</Text>
-                  <MESSAGE_INTERACTIONS_ICONS.EDIT />
-                </MenuItem>
-                <Delimeter />
-                <MenuItem onPress={handleDeleteMessage}>
-                  <Text>{MESSAGE_INTERACTIONS.DELETE}</Text>
-                  <MESSAGE_INTERACTIONS_ICONS.DELETE />
-                </MenuItem>
-              </>
-            )}
-          </View>
+
+    const leftMargin = position.left;
+    const rightMargin = screenWidth - position.right;
+    const rightAligned = rightMargin < leftMargin;
+
+    let left = rightAligned ? position.right - menuSize.width : position.left;
+    left = Math.max(
+      sideMargin,
+      Math.min(left, screenWidth - menuSize.width - sideMargin)
+    );
+
+    return { top, left };
+  }, [position, menuSize, config?.keyboardVerticalOffset]);
+
+  // Window coords (memoPosition) → host-local coords. The overlay host
+  // sits below the status bar / header, so subtract its measured origin.
+  const localPosition = useMemo(() => {
+    if (!memoPosition) {return undefined;}
+    return {
+      ...memoPosition,
+      top: (memoPosition as { top: number }).top - originY,
+      left: (memoPosition as { left: number }).left - originX,
+    };
+  }, [memoPosition, originX, originY]);
+
+  const content =
+    config?.disableInteractions || message.isDeleted ? null : (
+      <View style={styles.overlayFill}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
+        <View
+          style={[styles.contextMenu, localPosition]}
+          onLayout={handleMenuLayout}
+        >
+          <MenuItem onPress={() => handleCopyMessage(message.body!)}>
+            <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.COPY}</Text>
+            <MESSAGE_INTERACTIONS_ICONS.COPY />
+          </MenuItem>
+          {isUser && (
+            <>
+              {/* Edit only for non-media messages (upstream guard) +
+                  consistent label styling (menuText). */}
+              {message?.isMediafile !== 'true' && (
+                <>
+                  <Delimeter />
+                  <MenuItem onPress={handleEditMessage}>
+                    <Text style={styles.menuText}>
+                      {MESSAGE_INTERACTIONS.EDIT}
+                    </Text>
+                    <MESSAGE_INTERACTIONS_ICONS.EDIT />
+                  </MenuItem>
+                </>
+              )}
+              <Delimeter />
+              <MenuItem onPress={handleDeleteMessage}>
+                <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.DELETE}</Text>
+                <MESSAGE_INTERACTIONS_ICONS.DELETE />
+              </MenuItem>
+            </>
+          )}
         </View>
-      )}
+      </View>
+    );
 
-    </Modal>
-  );
+  // Render the menu in the in-tree overlay host instead of a React Native
+  // <Modal>. A Modal opens its own window on Android, which steals focus
+  // from the chat input and dismisses the keyboard when the menu opens;
+  // hosting it in the same view tree keeps the keyboard up. Re-run every
+  // render so menuSize/position updates refresh the hosted node.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (content) {
+      present(overlayId, content);
+    } else {
+      dismiss(overlayId);
+    }
+  });
+  useEffect(() => () => dismiss(overlayId), [dismiss, overlayId]);
+
+  return null;
 };
 
 export default MessageInteractions;
@@ -135,14 +209,28 @@ const styles = StyleSheet.create({
   contextMenu: {
     position: 'absolute',
     backgroundColor: 'white',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 12,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
+    shadowOpacity: 0.18,
+    shadowRadius: 8,
+    elevation: 6,
     minWidth: 180,
+    // Clip the children to the rounded corners (the hairline dividers
+    // run full width; without this they'd poke past the rounding on
+    // Android).
+    overflow: 'hidden',
+  },
+  // Explicit label styling so rows are the same height on both platforms
+  // — Android's default includeFontPadding made the menu rows taller and
+  // misaligned vs iOS. marginRight keeps the label off the trailing icon.
+  menuText: {
+    fontSize: 16,
+    color: '#141414',
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+    marginRight: 16,
   },
 });