@ethora/chat-component-rn 26.8.4 → 26.8.6

package/src/components/MainComponents/MessageList.tsx

@@ -23,7 +23,8 @@ import { msgSortableMs } from '../../roomStore/roomsSlice';
 import Composing from '../styled/StyledInputComponents/Composing';
 import TreadLabel from '../styled/TreadLabel';
 import { MessageContainer } from './MessageContainer';
-import { useRoomState } from '../../hooks/useRoomState';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../../roomStore';
 import Loader from '../styled/Loader';
 import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
@@ -67,6 +68,43 @@ interface MessageListProps<TMessage extends IMessage> {
   onReadBoundaryChange?: (boundaryTs: number | null) => void;
 }
 
+const mainIdCache = new WeakMap<object, string | null>();
+const mainMessageIdOf = (m: IMessage): string | null => {
+  if (!m?.mainMessage) {return null;}
+  const cached = mainIdCache.get(m);
+  if (cached !== undefined) {return cached;}
+  let id: string | null = null;
+  try {
+    const parsed = JSON.parse(m.mainMessage);
+    id = parsed?.id != null ? String(parsed.id) : null;
+  } catch {
+    id = null;
+  }
+  mainIdCache.set(m, id);
+  return id;
+};
+
+const sortKeyCache = new WeakMap<object, number>();
+const sortKeyOf = (m: IMessage): number => {
+  const cached = sortKeyCache.get(m);
+  if (cached !== undefined) {return cached;}
+  const key = new Date(m?.date as any).getTime() || 0;
+  sortKeyCache.set(m, key);
+  return key;
+};
+
+const dayKeyCache = new WeakMap<object, string>();
+const dayKeyOf = (m: IMessage): string => {
+  const cached = dayKeyCache.get(m);
+  if (cached !== undefined) {return cached;}
+  const key = new Date(m.date).toDateString();
+  dayKeyCache.set(m, key);
+  return key;
+};
+
+const keyExtractor = (item: IMessage) => String(item.id);
+const EMPTY_LIST: IMessage[] = [];
+
 const MessageList = <TMessage extends IMessage>({
   CustomMessage,
   CustomDaySeparator,
@@ -80,8 +118,12 @@ const MessageList = <TMessage extends IMessage>({
   activeMessage,
   onReadBoundaryChange,
 }: MessageListProps<TMessage>) => {
-  const { composing, messages, composingList } = useRoomState(roomJID)
-    .room! as IRoom;
+  const room = useSelector(
+    (state: RootState) => state.rooms.rooms?.[roomJID]
+  ) as IRoom | undefined;
+  const composing = room?.composing;
+  const composingList = room?.composingList;
+  const messages = room?.messages || EMPTY_LIST;
   const theme = useTheme();
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
   const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
@@ -107,17 +149,22 @@ const MessageList = <TMessage extends IMessage>({
   const flatListRef = useRef<FlatList<IMessage>>(null);
 
   const addReplyMessages = useMemo(() => {
+    const repliesByParent = new Map<string, IMessage[]>();
+    for (const mess of messages) {
+      if (!mess?.mainMessage || mess.isDeleted) {continue;}
+      const parentId = mainMessageIdOf(mess);
+      if (!parentId) {continue;}
+      const list = repliesByParent.get(parentId);
+      if (list) {
+        list.push(mess);
+      } else {
+        repliesByParent.set(parentId, [mess]);
+      }
+    }
+    if (repliesByParent.size === 0) {return messages;}
     return messages.map((message: IMessage) => {
-      const newMessage = {
-        ...message,
-        reply: messages.filter(
-          (mess: IMessage) =>
-            !!mess.mainMessage &&
-            JSON.parse(mess.mainMessage).id === message.id &&
-            !mess.isDeleted
-        ),
-      };
-      return newMessage;
+      const reply = repliesByParent.get(String(message.id));
+      return reply ? { ...message, reply } : message;
     });
   }, [messages]);
 
@@ -134,7 +181,7 @@ const MessageList = <TMessage extends IMessage>({
           item.isReply &&
           item.isReply === 'true' &&
           item.mainMessage &&
-          JSON.parse(item.mainMessage).id === activeMessage?.id
+          mainMessageIdOf(item) === String(activeMessage?.id)
       );
     } else {
       filtered = nonDeletedMessages.filter(
@@ -154,14 +201,21 @@ const MessageList = <TMessage extends IMessage>({
     // settles. Sorting here makes each render a stable, ordered view —
     // even mid-stream — so the user sees them appear from oldest to
     // newest with no swap animation.
-    const sorted = filtered.slice().sort((a, b) => {
-      const aNum = new Date(a?.date as any).getTime() || 0;
-      const bNum = new Date(b?.date as any).getTime() || 0;
-      return aNum - bNum;
-    });
-    const deduped = Array.from(
-      new Map(sorted.map((m) => [m.id, m])).values()
-    );
+    let sorted = filtered;
+    for (let i = 1; i < filtered.length; i++) {
+      if (sortKeyOf(filtered[i - 1]) > sortKeyOf(filtered[i])) {
+        sorted = filtered.slice().sort((a, b) => sortKeyOf(a) - sortKeyOf(b));
+        break;
+      }
+    }
+    const seen = new Set<string>();
+    const deduped: IMessage[] = [];
+    for (const m of sorted) {
+      const key = String(m.id);
+      if (seen.has(key)) {continue;}
+      seen.add(key);
+      deduped.push(m);
+    }
     return deduped;
   }, [addReplyMessages, isReply, roomJID, activeMessage]);
 
@@ -244,8 +298,21 @@ const MessageList = <TMessage extends IMessage>({
     return withDivider;
   }, [memoizedMessages, isUserAtBottom, roomJID, unreadWhileScrolledUp]);
 
+  const dateLabelIds = useMemo(() => {
+    const ids = new Set<string>();
+    let nextDay: string | null = null;
+    for (let i = dataMessages.length - 1; i >= 0; i--) {
+      const item = dataMessages[i];
+      if (String(item.id).startsWith('delimiter-new')) {continue;}
+      const day = dayKeyOf(item);
+      if (nextDay === null || day !== nextDay) {ids.add(String(item.id));}
+      nextDay = day;
+    }
+    return ids;
+  }, [dataMessages]);
+
   const renderMessage = useCallback(
-    ({ item, index }: { item: IMessage; index: number }) => {
+    ({ item }: { item: IMessage }) => {
       if (String(item.id).startsWith('delimiter-new')) {
         return (
           <MessageContainer
@@ -262,24 +329,7 @@ const MessageList = <TMessage extends IMessage>({
         );
       }
 
-      const messageDate = new Date(item.date).toDateString();
-      let showDateLabel = false;
-
-      let nextMessage = null;
-      for (let i = index + 1; i < dataMessages.length; i++) {
-        const candidate = dataMessages[i];
-        if (!String(candidate.id).startsWith('delimiter-new')) {
-          nextMessage = candidate;
-          break;
-        }
-      }
-      const nextMessageDate = nextMessage
-        ? new Date(nextMessage.date).toDateString()
-        : null;
-
-      if (!nextMessage || messageDate !== nextMessageDate) {
-        showDateLabel = true;
-      }
+      const showDateLabel = dateLabelIds.has(String(item.id));
 
       return (
         <MessageContainer
@@ -301,7 +351,7 @@ const MessageList = <TMessage extends IMessage>({
       CustomDaySeparator,
       CustomMessage,
       CustomNewMessageLabel,
-      dataMessages,
+      dateLabelIds,
       isReply,
       user.xmppUsername,
       user.walletAddress,
@@ -452,7 +502,10 @@ const MessageList = <TMessage extends IMessage>({
         ref={flatListRef}
         data={dataMessages}
         renderItem={renderMessage}
-        keyExtractor={(item) => item.id.toString()}
+        keyExtractor={keyExtractor}
+        initialNumToRender={15}
+        maxToRenderPerBatch={10}
+        windowSize={7}
         onEndReached={handleLoadMore}
         onScroll={handleScroll}
         onContentSizeChange={handleContentSizeChange}

package/src/components/MainComponents/RoomList.tsx

@@ -121,10 +121,16 @@ const RoomList: React.FC<RoomListProps> = ({
     setSearchTerm(text);
   }, []);
 
-  const getLastMessage = useCallback(
-    (chat: IRoom) => chat?.messages?.[chat?.messages.length - 1],
-    []
-  );
+  const activityOf = useCallback((chat: IRoom): number => {
+    const last = chat?.messages?.[chat?.messages.length - 1];
+    const fromLive = Number(last?.id);
+    if (Number.isFinite(fromLive) && fromLive > 0) {return fromLive;}
+    const fromStamp = Number(chat?.lastMessageTimestamp);
+    if (Number.isFinite(fromStamp) && fromStamp > 0) {return fromStamp;}
+    const fromSeed = Number(chat?.lastMessage?.id);
+    if (Number.isFinite(fromSeed) && fromSeed > 0) {return fromSeed;}
+    return 0;
+  }, []);
 
   const filteredChats = useMemo(() => {
     const lowerCaseSearchTerm = searchTerm.toLowerCase();
@@ -136,22 +142,13 @@ const RoomList: React.FC<RoomListProps> = ({
           const hay = `${chat?.title || ''} ${chat?.name || ''}`.toLowerCase();
           return hay.includes(lowerCaseSearchTerm);
         })
-        .sort((a, b) => {
-          if (getLastMessage(a)?.id && getLastMessage(b)?.id) {
-            return Number(getLastMessage(b).id) - Number(getLastMessage(a).id);
-          } else if (getLastMessage(a)?.id) {
-            return -1;
-          } else if (getLastMessage(b)?.id) {
-            return 1;
-          }
-          return -1;
-        });
+        .sort((a, b) => activityOf(b) - activityOf(a));
 
       chatsMap.set(lowerCaseSearchTerm, result);
     }
 
     return chatsMap.get(lowerCaseSearchTerm) || [];
-  }, [chats, searchTerm]);
+  }, [chats, searchTerm, activityOf]);
 
   useEffect(() => {
     if (burgerMenu) {
@@ -278,6 +275,21 @@ const RoomList: React.FC<RoomListProps> = ({
     }
   }, [isSearchFocused]);
 
+  const renderRoom = useCallback(
+    ({ item }: { item: IRoom }) => (
+      <Pressable
+        testID={`room-${(item.jid || '').split('@')[0]}`}
+        accessibilityLabel={`room-${item.title || item.name}`}
+        onPress={() => performClick(item)}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+      >
+        <ChatRoomItem chat={item} config={config} />
+      </Pressable>
+    ),
+    [performClick, handlePressIn, handlePressOut, config]
+  );
+
   const toggleDrawer = () => {
     if (isDrawerOpen) {
       closeDrawer();
@@ -392,20 +404,7 @@ const RoomList: React.FC<RoomListProps> = ({
                   onMomentumScrollBegin={handleMomentumBegin}
                   onMomentumScrollEnd={handleMomentumEnd}
                   keyboardShouldPersistTaps="handled"
-                  renderItem={({ item }) => (
-                    <Pressable
-                      // Stable testID so e2e drivers can target a room
-                      // row by its jid local-part (e.g. Main chat under
-                      // app id `..._...759` → testID `room-...759`).
-                      testID={`room-${(item.jid || '').split('@')[0]}`}
-                      accessibilityLabel={`room-${item.title || item.name}`}
-                      onPress={() => performClick(item)}
-                      onPressIn={handlePressIn}
-                      onPressOut={handlePressOut}
-                    >
-                      <ChatRoomItem chat={item} config={config} />
-                    </Pressable>
-                  )}
+                  renderItem={renderRoom}
                   style={[
                     styles.chatList,
                     { backgroundColor: theme.listBackground },

package/src/components/MainComponents/RoomStack.tsx

@@ -0,0 +1,309 @@
+import React, {
+  forwardRef,
+  memo,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Animated,
+  BackHandler,
+  Easing,
+  Keyboard,
+  LayoutChangeEvent,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+// Width of the left-edge strip that starts the back swipe.
+export const EDGE_WIDTH = 28;
+// Released past this share of the width (or faster than the velocity
+// below), the swipe completes; otherwise the room settles back.
+export const COMPLETE_DISTANCE = 0.35;
+export const COMPLETE_VELOCITY = 600;
+// How far the list underneath is shifted left while fully covered.
+const LIST_PARALLAX = 0.3;
+export const LIST_DIM = 0.25;
+
+export const PUSH = { duration: 320, easing: Easing.bezier(0.2, 0.8, 0.2, 1) };
+export const POP = { duration: 240, easing: Easing.out(Easing.cubic) };
+
+/**
+ * Holds its children still while `frozen`: the list under an open room is
+ * fully covered, so re-rendering it on every store update (each incoming
+ * message) is wasted work on the JS thread. It thaws as soon as it is
+ * about to be seen again.
+ */
+const Freezable = memo(
+  ({ children }: { frozen: boolean; children: ReactNode }) => <>{children}</>,
+  (_prev, next) => next.frozen
+);
+
+export interface RoomStackHandle {
+  /** Slide the room out, then call `onBack`. */
+  pop: () => void;
+}
+
+interface RoomStackProps {
+  /** The room list — stays mounted under the room so it is there to reveal. */
+  list: ReactNode;
+  /** The open room, or null while only the list is shown. */
+  room: ReactNode | null;
+  /** Called once the room has left the screen (swipe, back button, pop()). */
+  onBack: () => void;
+  /** Background behind the room's content. */
+  roomBackground?: string;
+  /** Android hardware back / system back gesture returns to the list. */
+  hardwareBack?: boolean;
+}
+
+/**
+ * Two-layer stack for the list → room navigation: the room slides in over
+ * the list, and a swipe from the left edge drags it back out, following the
+ * finger, with the list parallaxing in underneath (the iOS navigation feel).
+ *
+ * Driven by RN's own `Animated` (native driver), not Reanimated: every layer
+ * derives from ONE value through interpolation, so the layers cannot drift
+ * apart, and a React re-render mid-flight cannot reset a layer to the style
+ * it was first rendered with.
+ */
+export const RoomStack = forwardRef<RoomStackHandle, RoomStackProps>(
+  ({ list, room, onBack, roomBackground, hardwareBack = true }, ref) => {
+    const { width: windowWidth } = useWindowDimensions();
+    const [width, setWidth] = useState(windowWidth);
+    const widthRef = useRef(width);
+    widthRef.current = width;
+    const hasRoom = !!room;
+    // Room's horizontal offset: 0 = covering the list, `width` = off-screen.
+    // A room already open on the first render is shown in place.
+    const x = useRef(new Animated.Value(hasRoom ? 0 : windowWidth)).current;
+    const closing = useRef(false);
+
+    // True while the list is (about to be) visible under a moving room.
+    const [peeking, setPeeking] = useState(false);
+    // Bumped after every completed pop — see the settle effect below.
+    const [popCount, setPopCount] = useState(0);
+
+    const slideTo = useCallback(
+      (
+        toValue: number,
+        config: typeof PUSH,
+        done?: (finished: boolean) => void
+      ) => {
+        Animated.timing(x, {
+          toValue,
+          ...config,
+          useNativeDriver: true,
+        }).start(({ finished }) => done?.(finished));
+      },
+      [x]
+    );
+
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+      if (isFirstRender.current) {
+        isFirstRender.current = false;
+        return;
+      }
+      closing.current = false;
+      setPeeking(false);
+      x.stopAnimation();
+      x.setValue(widthRef.current);
+      if (hasRoom) {
+        slideTo(0, PUSH);
+      }
+    }, [hasRoom]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onBackRef = useRef(onBack);
+    onBackRef.current = onBack;
+    const finish = useCallback(() => {
+      onBackRef.current();
+      setPopCount(count => count + 1);
+    }, []);
+
+    // `onBack` normally clears the room, and the effect above takes over.
+    // If the room is still (or again) there after a pop — something
+    // re-selected it — bring it back on screen: a room parked off-screen
+    // would leave the list visible but untouchable.
+    const hasRoomRef = useRef(hasRoom);
+    hasRoomRef.current = hasRoom;
+    useEffect(() => {
+      if (popCount === 0 || !hasRoomRef.current) {
+        return;
+      }
+      closing.current = false;
+      setPeeking(false);
+      slideTo(0, POP);
+    }, [popCount]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const slideOut = useCallback(() => {
+      closing.current = true;
+      setPeeking(true);
+      slideTo(widthRef.current, POP, finished => {
+        if (finished) {
+          finish();
+        } else {
+          closing.current = false;
+        }
+      });
+    }, [finish, slideTo]);
+
+    const pop = useCallback(() => {
+      if (closing.current) {
+        return;
+      }
+      Keyboard.dismiss();
+      slideOut();
+    }, [slideOut]);
+
+    useImperativeHandle(ref, () => ({ pop }), [pop]);
+
+    useEffect(() => {
+      if (!hasRoom || !hardwareBack) {
+        return undefined;
+      }
+      const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+        pop();
+        return true;
+      });
+      return () => sub.remove();
+    }, [hasRoom, hardwareBack, pop]);
+
+    const swipeBack = useMemo(
+      () =>
+        Gesture.Pan()
+          .runOnJS(true)
+          .hitSlop({ left: 0, width: EDGE_WIDTH })
+          .activeOffsetX(12)
+          .failOffsetY([-16, 16])
+          .onStart(() => {
+            if (closing.current) {
+              return;
+            }
+            Keyboard.dismiss();
+            setPeeking(true);
+            x.stopAnimation();
+          })
+          .onUpdate(e => {
+            if (closing.current) {
+              return;
+            }
+            x.setValue(Math.min(Math.max(e.translationX, 0), widthRef.current));
+          })
+          .onEnd(e => {
+            if (closing.current) {
+              return;
+            }
+            const complete =
+              e.translationX > widthRef.current * COMPLETE_DISTANCE ||
+              e.velocityX > COMPLETE_VELOCITY;
+            if (complete) {
+              slideOut();
+            } else {
+              slideTo(0, POP, () => setPeeking(false));
+            }
+          }),
+      [slideOut, slideTo, x]
+    );
+
+    const onLayout = useCallback(
+      (e: LayoutChangeEvent) => {
+        const next = e.nativeEvent.layout.width;
+        if (next > 0 && next !== widthRef.current) {
+          // Keep an off-screen room off-screen when the container resizes.
+          if (!hasRoomRef.current) {
+            x.setValue(next);
+          }
+          setWidth(next);
+        }
+      },
+      [x]
+    );
+
+    const { listShift, dimOpacity } = useMemo(
+      () => ({
+        listShift: x.interpolate({
+          inputRange: [0, width],
+          outputRange: [-width * LIST_PARALLAX, 0],
+          extrapolate: 'clamp',
+        }),
+        dimOpacity: x.interpolate({
+          inputRange: [0, width],
+          outputRange: [LIST_DIM, 0],
+          extrapolate: 'clamp',
+        }),
+      }),
+      [x, width]
+    );
+
+    return (
+      <View style={styles.container} onLayout={onLayout}>
+        <Animated.View
+          style={[
+            styles.layer,
+            // Without a room the list always rests in place, whatever the
+            // animated value is doing.
+            hasRoom ? { transform: [{ translateX: listShift }] } : null,
+          ]}
+          pointerEvents={hasRoom ? 'none' : 'auto'}
+          accessibilityElementsHidden={hasRoom}
+          importantForAccessibility={hasRoom ? 'no-hide-descendants' : 'auto'}
+        >
+          <Freezable frozen={hasRoom && !peeking}>{list}</Freezable>
+        </Animated.View>
+        {hasRoom && (
+          <>
+            <Animated.View
+              pointerEvents="none"
+              style={[styles.layer, styles.dim, { opacity: dimOpacity }]}
+            />
+            <GestureDetector gesture={swipeBack}>
+              <Animated.View
+                style={[
+                  styles.layer,
+                  styles.room,
+                  { backgroundColor: roomBackground },
+                  { transform: [{ translateX: x }] },
+                ]}
+              >
+                {room}
+              </Animated.View>
+            </GestureDetector>
+          </>
+        )}
+      </View>
+    );
+  }
+);
+
+RoomStack.displayName = 'RoomStack';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    overflow: 'hidden',
+  },
+  layer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  dim: {
+    backgroundColor: '#000',
+  },
+  room: {
+    shadowColor: '#000',
+    shadowOffset: { width: -4, height: 0 },
+    shadowOpacity: 0.18,
+    shadowRadius: 12,
+  },
+});

package/src/components/MainComponents/SystemMessage.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
 
 interface SystemMessageProps {
   messageText?: string;
@@ -10,6 +11,9 @@ const SystemMessage: React.FC<SystemMessageProps> = ({
   messageText,
   colors,
 }) => {
+  // Same pill as the day separator; `colors.secondary` is not a pill
+  // colour (see DateLabel).
+  const theme = useTheme();
   return (
     <View style={styles.container}>
       {/* maxWidth lives on this View (not the Text) so the Text reliably
@@ -19,10 +23,10 @@ const SystemMessage: React.FC<SystemMessageProps> = ({
       <View
         style={[
           styles.bubble,
-          { backgroundColor: colors?.secondary || '#e7edf9' },
+          { backgroundColor: theme.dateLabelBackground },
         ]}
       >
-        <Text style={[styles.text, { color: colors?.primary || '#0052cd' }]}>
+        <Text style={[styles.text, { color: colors?.primary || theme.dateLabel }]}>
           {messageText}
         </Text>
       </View>

package/src/components/MessageBubble/Avatar.tsx

@@ -11,6 +11,8 @@ interface AvatarProps {
   firstName?: string;
   lastName?: string;
   style?: object;
+  /** Initials size (default 16) — small avatars need smaller text. */
+  textSize?: number;
 }
 
 const AvatarCircle = styled.View<{ bgColor?: string }>`
@@ -41,6 +43,7 @@ export const Avatar: React.FC<AvatarProps> = ({
   firstName,
   lastName,
   style,
+  textSize,
 }) => {
   const { config } = useChatSettingState();
   const backgroundColor = useMemo(() => {
@@ -85,7 +88,10 @@ export const Avatar: React.FC<AvatarProps> = ({
 
   return (
     <AvatarCircle style={style} bgColor={backgroundColor?.backgroundColor}>
-      <AvatarText color={getAvatarTextColor(backgroundColor?.backgroundColor)}>
+      <AvatarText
+        color={getAvatarTextColor(backgroundColor?.backgroundColor)}
+        style={textSize ? { fontSize: textSize } : undefined}
+      >
         {getInitials()}
       </AvatarText>
     </AvatarCircle>