@ethora/chat-component-rn 26.9.1 → 26.10.0

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -19,6 +19,8 @@ import {
   type LayoutChangeEvent,
 } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { layoutStack } from './messageMenuLayout';
 import { useToast } from '../../context/ToastContext';
 import { useInteractionsOverlay } from './InteractionsOverlay';
 import { useTheme } from '../../hooks/useTheme';
@@ -47,6 +49,11 @@ interface MessageInteractionsProps {
   handleReactionMessage: (id: string) => void;
   /** Opens the full emoji picker (the "+" in the reaction row). */
   onOpenEmojiPicker?: () => void;
+  /**
+   * A copy of the message bubble, drawn over the dim at the bubble's spot
+   * (WhatsApp style): the chat darkens, the message itself does not.
+   */
+  preview?: React.ReactNode;
 }
 
 const MessageInteractions: React.FC<MessageInteractionsProps> = ({
@@ -60,8 +67,10 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   handleEditMessage,
   handleReactionMessage,
   onOpenEmojiPicker,
+  preview,
 }) => {
   const { showToast } = useToast();
+  const insets = useSafeAreaInsets();
   const t = useT();
   const { present, dismiss, originX, originY } = useInteractionsOverlay();
   const overlayId = useId();
@@ -88,7 +97,11 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   // dims a touch behind it. Started once the menu has been measured and
   // placed — before that it sits invisible at a provisional spot.
   const reveal = useRef(new Animated.Value(0)).current;
-  const placed = !!position && !!menuSize.width && !!menuSize.height;
+  const placed =
+    !!position &&
+    !!menuSize.width &&
+    !!menuSize.height &&
+    (!showReactions || !!barSize.height);
   useEffect(() => {
     if (!placed) {
       return;
@@ -166,108 +179,114 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     replyMessage();
   };
 
-  const memoPosition = useMemo(() => {
-    if (!position) {
-      return undefined;
-    }
-
-    if (!menuSize.width || !menuSize.height) {
-      return { top: position.bottom, left: position.left, opacity: 0 };
-    }
-    const barReserve = showReactions && barSize.height ? barSize.height + 10 : 0;
+  // Everything below is in WINDOW coordinates until the last step, which
+  // turns them into the overlay host's own (it sits below the status bar).
+  const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+  const sideMargin = 8;
+  const barHeight = showReactions ? barSize.height : 0;
 
-    const { width: screenWidth, height: screenHeight } =
-      Dimensions.get('window');
-    const bottomReserve = (config?.keyboardVerticalOffset ?? 0) + 24;
-    const topReserve = 16;
-    const sideMargin = 8;
-    // Breathing room between the bubble and the menu.
-    const gap = 10;
+  const stack = useMemo(() => {
+    if (!position) {return undefined;}
+    // The keyboard covers the bottom `keyboardHeight` px: the stack must
+    // fit above it (and above the home indicator).
+    const areaBottom =
+      screenHeight - Math.max(keyboardHeight, insets.bottom) - 12;
+    const areaTop = Math.max(originY, insets.top) + 8;
+    return layoutStack({
+      bubble: position,
+      barHeight,
+      menuHeight: menuSize.height,
+      areaTop,
+      areaBottom,
+    });
+  }, [position, barHeight, menuSize.height, screenHeight, keyboardHeight, insets.top, insets.bottom, originY]);
 
-    // The keyboard occludes the bottom `keyboardHeight` px, so the real
-    // visible bottom edge is above it. Measuring space below against this
-    // (not the full screen) is what makes the menu flip ABOVE the message
-    // when the keyboard is open and the message sits near the input.
-    const visibleBottom = screenHeight - keyboardHeight;
-
-    const spaceBelow = visibleBottom - position.bottom - gap - bottomReserve;
-    const spaceAbove = position.top - gap - topReserve - barReserve;
+  // Bar and menu line up with the bubble's side: the reader's own messages
+  // on the right, everybody else's on the left.
+  const alignTo = (width: number) => {
+    if (!position || !width) {return position?.left ?? 0;}
+    const left = isUser ? position.right - width : position.left;
+    return Math.max(sideMargin, Math.min(left, screenWidth - width - sideMargin));
+  };
 
-    let top: number;
-    if (spaceBelow >= menuSize.height) {
-      top = position.bottom + gap;
-    } else if (spaceAbove >= menuSize.height) {
-      top = position.top - gap - menuSize.height;
-    } else {
-      top = Math.max(
-        topReserve,
-        visibleBottom - menuSize.height - bottomReserve
-      );
+  const localPosition = useMemo(() => {
+    if (!stack || !position) {return undefined;}
+    if (!menuSize.width || !menuSize.height) {
+      return { top: position.bottom - originY, left: position.left - originX, opacity: 0 };
     }
+    return { top: stack.menuTop - originY, left: alignTo(menuSize.width) - originX };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stack, position, menuSize, originX, originY, isUser, screenWidth]);
 
-    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, barSize.height, showReactions, config?.keyboardVerticalOffset, keyboardHeight]);
-
-  const barPosition = useMemo(() => {
-    if (!position || !showReactions) {return undefined;}
+  const localBarPosition = useMemo(() => {
+    if (!stack || !position || !showReactions) {return undefined;}
     if (!barSize.width || !barSize.height) {
-      return { top: position.top, left: position.left, opacity: 0 };
+      return { top: position.top - originY, left: position.left - originX, opacity: 0 };
     }
-    const { width: screenWidth } = Dimensions.get('window');
-    const sideMargin = 8;
-    const gap = 8;
-    const rightAligned = screenWidth - position.right < position.left;
-    let left = rightAligned ? position.right - barSize.width : position.left;
-    left = Math.max(sideMargin, Math.min(left, screenWidth - barSize.width - sideMargin));
-    const above = position.top - gap - barSize.height;
-    const menuTop = (memoPosition as { top?: number } | undefined)?.top;
-    const top =
-      above >= 16
-        ? above
-        : (menuTop ?? position.bottom) + (menuSize.height || 0) + gap;
-    return { top, left };
-  }, [position, showReactions, barSize, memoPosition, menuSize.height]);
-
-  const localBarPosition = useMemo(() => {
-    if (!barPosition) {return undefined;}
-    return {
-      ...barPosition,
-      top: (barPosition as { top: number }).top - originY,
-      left: (barPosition as { left: number }).left - originX,
-    };
-  }, [barPosition, originX, originY]);
-
+    return { top: stack.barTop - originY, left: alignTo(barSize.width) - originX };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stack, position, showReactions, barSize, originX, originY, isUser, screenWidth]);
 
-  // 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;}
+  // The copy of the message starts exactly over the original and glides
+  // to its place in the stack once the bar and the menu are measured.
+  const previewBox = useMemo(() => {
+    if (!stack || !position || !preview) {return undefined;}
     return {
-      ...memoPosition,
-      top: (memoPosition as { top: number }).top - originY,
-      left: (memoPosition as { left: number }).left - originX,
+      left: position.left - originX,
+      top: stack.previewTop - originY,
+      width: position.right - position.left,
+      height: stack.previewHeight,
+      shift: position.top - stack.previewTop,
     };
-  }, [memoPosition, originX, originY]);
+  }, [stack, position, preview, originX, originY]);
 
   const content =
     config?.disableInteractions || message.isDeleted ? null : (
       <View style={styles.overlayFill}>
-        <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu}>
+        <Pressable
+          testID="message-menu-backdrop"
+          style={StyleSheet.absoluteFill}
+          onPress={closeMenu}
+        >
+          {/* The chat darkens; the message (the copy below) does not. */}
           <Animated.View
             pointerEvents="none"
-            style={[styles.dim, { opacity: reveal }]}
+            style={[styles.dim, { backgroundColor: theme.overlay, opacity: reveal }]}
           />
         </Pressable>
+        {previewBox ? (
+          <Animated.View
+            testID="message-menu-preview"
+            pointerEvents="none"
+            style={[
+              styles.preview,
+              {
+                left: previewBox.left,
+                top: previewBox.top,
+                width: previewBox.width,
+                maxHeight: previewBox.height,
+                transform: [
+                  {
+                    translateY: reveal.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [previewBox.shift, 0],
+                      extrapolate: 'clamp',
+                    }),
+                  },
+                  {
+                    scale: reveal.interpolate({
+                      inputRange: [0, 0.5, 1],
+                      outputRange: [1, 1.03, 1],
+                      extrapolate: 'clamp',
+                    }),
+                  },
+                ],
+              },
+            ]}
+          >
+            {preview}
+          </Animated.View>
+        ) : null}
         {showReactions && (
           <Animated.View
             testID="reaction-bar"
@@ -416,7 +435,11 @@ const styles = StyleSheet.create({
   },
   dim: {
     ...StyleSheet.absoluteFill,
-    backgroundColor: 'rgba(0,0,0,0.18)',
+  },
+  preview: {
+    position: 'absolute',
+    // A message taller than the screen is cut at the bottom.
+    overflow: 'hidden',
   },
   reactionBar: {
     position: 'absolute',

package/src/components/MessageBubble/messageMenuLayout.ts

@@ -0,0 +1,59 @@
+/** @format */
+
+/** Space between the reaction bar, the message and the menu. */
+export const STACK_GAP = 8;
+/** A message too tall for the screen is cut to at least this much. */
+const MIN_PREVIEW_HEIGHT = 64;
+
+export interface StackInput {
+  /** The bubble's box, window coordinates. */
+  bubble: { top: number; bottom: number };
+  barHeight: number;
+  menuHeight: number;
+  /** Visible band the stack must fit in, window coordinates. */
+  areaTop: number;
+  areaBottom: number;
+}
+
+export interface StackLayout {
+  barTop: number;
+  previewTop: number;
+  previewHeight: number;
+  menuTop: number;
+}
+
+/**
+ * Reaction bar above the message, menu below it, all three on screen and
+ * never on top of each other. The message stays where it is when that
+ * fits; otherwise the whole stack moves (up from the input, down from the
+ * header), and a message taller than what is left is cut.
+ */
+export const layoutStack = ({
+  bubble,
+  barHeight,
+  menuHeight,
+  areaTop,
+  areaBottom,
+}: StackInput): StackLayout => {
+  const above = barHeight > 0 ? barHeight + STACK_GAP : 0;
+  const below = STACK_GAP + menuHeight;
+  const room = areaBottom - areaTop - above - below;
+  const bubbleHeight = bubble.bottom - bubble.top;
+  // Cut only what does not fit (and never below a readable minimum).
+  const previewHeight =
+    bubbleHeight <= room ? bubbleHeight : Math.max(MIN_PREVIEW_HEIGHT, room);
+
+  let previewTop = bubble.top;
+  // Out at the bottom: lift the stack.
+  const overflow = previewTop + previewHeight + below - areaBottom;
+  if (overflow > 0) {previewTop -= overflow;}
+  // Out at the top (a message under the header, or lifted too far): drop it.
+  if (previewTop - above < areaTop) {previewTop = areaTop + above;}
+
+  return {
+    barTop: previewTop - above,
+    previewTop,
+    previewHeight,
+    menuTop: previewTop + previewHeight + STACK_GAP,
+  };
+};

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -41,14 +41,16 @@ import { getElementFont } from '../../../helpers/getElementFont';
 import { getIconColor } from '../../../helpers/getIconColor';
 import { useTheme } from '../../../hooks/useTheme';
 import type { ChatTheme } from '../../../theme/theme';
-import { deleteRoomMember, setRoomMuted } from '../../../networking/api-requests/rooms.api';
+import { deleteRoomMember } from '../../../networking/api-requests/rooms.api';
 import { RoomMember } from '../../../types/models/room.model';
 import { setActiveModal, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import SelectUsersModal from '../SelectUsersModal/SelectUsersModal';
 import { useToast } from '../../../context/ToastContext';
+import { useRoomMute } from '../../../hooks/useRoomMute';
 import { useT } from '../../../i18n/useT';
 import DeleteChatModal from './DeleteChatModal';
+import { isMessageSearchEnabled } from '../../../helpers/isMessageSearchEnabled';
 import ReportChatModal from './ReportChatModal';
 import {
   ProfileHero,
@@ -57,6 +59,15 @@ import {
   useHeaderMetrics,
 } from '../ProfileHeader/ProfileHeader';
 import ProfileMenu, { ProfileMenuItem } from '../ProfileHeader/ProfileMenu';
+import { dedupeMembers } from '../../../helpers/dedupeMembers';
+import {
+  getRoomUserCount,
+  isRoomMembersTruncated,
+} from '../../../helpers/roomUserCount';
+import { useRoomDirectory } from '../../../hooks/useRoomDirectory';
+
+/** Member rows rendered per step; the rest sits behind a 'Show more' row. */
+export const MEMBER_PAGE_SIZE = 50;
 
 /**
  * Where the header should sit when search opens: tucked away at the
@@ -140,6 +151,33 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     }
   }, [activeRoom, dispatch]);
 
+  // Big rooms: /chats/my only returns the first 30 members (usersCnt is the
+  // true total). Opening the profile loads the whole room directory (once per
+  // room, deduplicated, paged) and lists it after the known members.
+  const knownMembers = useMemo<RoomMember[]>(
+    () => activeRoom?.roomMembers ?? activeRoom?.members ?? [],
+    [activeRoom?.roomMembers, activeRoom?.members]
+  );
+  const countSource = useMemo(
+    () => ({ members: knownMembers, usersCnt: activeRoom?.usersCnt }),
+    [knownMembers, activeRoom?.usersCnt]
+  );
+  const membersTruncated = isRoomMembersTruncated(countSource);
+  const { members: directoryMembers, state: directoryState } =
+    useRoomDirectory(activeRoom?.jid, membersTruncated);
+  const directoryLoading = membersTruncated && directoryState === 'loading';
+  const members = useMemo<RoomMember[]>(
+    () =>
+      membersTruncated && directoryMembers.length > 0
+        ? dedupeMembers([...knownMembers, ...directoryMembers])
+        : dedupeMembers(knownMembers),
+    [knownMembers, membersTruncated, directoryMembers]
+  );
+  const [visibleCount, setVisibleCount] = useState(MEMBER_PAGE_SIZE);
+  useEffect(() => {
+    setVisibleCount(MEMBER_PAGE_SIZE);
+  }, [memberQuery]);
+
   const onUpload = async () => {
     let loadingSet = false;
     try {
@@ -363,28 +401,16 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     return () => sub.remove();
   }, [isSearchOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const muteInFlightRef = useRef(false);
+  const toggleRoomMuted = useRoomMute();
   const toggleMuted = async () => {
-    if (!activeRoom?.jid || !activeRoom?.name || muteInFlightRef.current) {return;}
-    const next = !activeRoom.muted;
-    muteInFlightRef.current = true;
-    dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: next } }));
-    try {
-      const confirmed = await setRoomMuted(activeRoom.name, next);
-      if (confirmed !== next) {
-        dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: confirmed } }));
-      }
-    } catch (error) {
-      dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: !next } }));
-      console.warn('[ethora-rn] mute toggle failed', error);
+    if (!activeRoom?.jid) {return;}
+    if (!(await toggleRoomMuted(activeRoom.jid))) {
       showToast({
         id: Date.now().toString(),
         title: t('toast.error'),
         message: t('toast.muteFailed'),
         type: 'error',
       });
-    } finally {
-      muteInFlightRef.current = false;
     }
   };
 
@@ -392,9 +418,11 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     () => [
       {
         key: 'mute',
-        label: activeRoom?.muted ? t('action.muted') : t('action.unmuted'),
+        // The action a tap performs (as on web): a muted chat offers
+        // "Unmute" with a plain bell, any other "Mute" with a crossed one.
+        label: activeRoom?.muted ? t('action.unmute') : t('action.mute'),
         icon: (color: string) =>
-          activeRoom?.muted ? <BellOffIcon color={color} /> : <BellIcon color={color} />,
+          activeRoom?.muted ? <BellIcon color={color} /> : <BellOffIcon color={color} />,
         onPress: toggleMuted,
       },
       {
@@ -473,7 +501,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   }
 
   const title = activeRoom.title || activeRoom.name;
-  const memberCount = activeRoom.usersCnt ?? 0;
+  const memberCount = getRoomUserCount(countSource);
   const subtitle = t(
     memberCount === 1
       ? 'modal.chatProfile.memberCountSingular'
@@ -486,15 +514,17 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
   // made the header read as two different greens next to the members' own
   // avatars.)
   const heroColor = config?.colors?.avatar || getIconColor(config);
-  const members = activeRoom.roomMembers ?? [];
   const query = memberQuery.trim().toLowerCase();
-  const visibleMembers = query
+  // Local search runs over the whole directory, rendering stays incremental.
+  const matchingMembers = query
     ? members.filter((user) =>
         composeName(user.firstName, user.lastName)
           .toLowerCase()
           .includes(query)
       )
     : members;
+  const visibleMembers = matchingMembers.slice(0, visibleCount);
+  const hiddenMemberCount = matchingMembers.length - visibleMembers.length;
 
   return (
     <ModalContainerFullScreen style={styles.screen}>
@@ -560,6 +590,22 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
             </View>
           )}
 
+          {isMessageSearchEnabled(config) && (
+            <View style={styles.card}>
+              <TouchableOpacity
+                testID="chat-profile-search-messages"
+                activeOpacity={0.7}
+                style={styles.addMembersRow}
+                onPress={() => dispatch(setActiveModal(MODAL_TYPES.MESSAGE_SEARCH))}
+              >
+                <SearchIcon color={getIconColor(config)} />
+                <Text style={styles.addMembersLabel}>
+                  {t('search.messages.title')}
+                </Text>
+              </TouchableOpacity>
+            </View>
+          )}
+
           {!config?.disableChatInfo?.hideMembers && (
             <View style={styles.card}>
               {canAddMembers && (
@@ -614,6 +660,12 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                 </View>
               )}
 
+              {directoryLoading && (
+                <Text testID="chat-profile-members-loading" style={styles.emptyMembers}>
+                  {t('modal.chatProfile.membersLoadingAll')}
+                </Text>
+              )}
+
               {loading ? (
                 <Loader />
               ) : visibleMembers.length === 0 ? (
@@ -703,6 +755,21 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                   );
                 })
               )}
+
+              {hiddenMemberCount > 0 && (
+                <TouchableOpacity
+                  testID="chat-profile-members-show-more"
+                  activeOpacity={0.7}
+                  style={styles.showMoreRow}
+                  onPress={() =>
+                    setVisibleCount((c) => c + MEMBER_PAGE_SIZE)
+                  }
+                >
+                  <Text style={styles.addMembersLabel}>
+                    {t('search.messages.loadMore')}
+                  </Text>
+                </TouchableOpacity>
+              )}
             </View>
           )}
         </View>
@@ -802,6 +869,10 @@ const createStyles = (theme: ChatTheme) => StyleSheet.create({
     lineHeight: 24,
     color: theme.textSecondary,
   },
+  showMoreRow: {
+    alignItems: 'center',
+    paddingVertical: 12,
+  },
   emptyMembers: {
     opacity: 0.6,
     textAlign: 'center',