@ethora/chat-component-rn 26.5.7 → 26.5.11

package/src/components/MainComponents/MessageList.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import {
   View,
+  Text,
   StyleSheet,
   FlatList,
   Image,
@@ -18,6 +19,7 @@ import {
   ImageSourcePropType,
 } from 'react-native';
 import { IMessage, User, IConfig, IRoom } from '../../types/types';
+import { msgSortableMs } from '../../roomStore/roomsSlice';
 import Composing from '../styled/StyledInputComponents/Composing';
 import TreadLabel from '../styled/TreadLabel';
 import { MessageContainer } from './MessageContainer';
@@ -68,10 +70,24 @@ const MessageList = <TMessage extends IMessage>({
     .room! as IRoom;
   const [isUserAtBottom, setIsUserAtBottom] = useState(true);
   const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
-  const [isContentOffset, setIsContentOffset] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [isScrollBlocked, setIsScrollBlocked] = useState(false);
-  const [hasUserScrolled, setHasUserScrolled] = useState(false);
+  // Count of messages that arrived while the user was scrolled up.
+  // Renders as a badge on the scroll-to-bottom arrow so they know how
+  // much they're missing without having to scroll to find out.
+  const [unreadWhileScrolledUp, setUnreadWhileScrolledUp] = useState(0);
+  // Newest message timestamp at the moment the user scrolled away from
+  // the bottom. The badge counts only messages NEWER than this, so
+  // back-pagination (loading OLDER history while scrolled up) never
+  // inflates the count. Was previously a message-COUNT snapshot, which
+  // wrongly counted back-paginated old messages as "new" (Android repro).
+  const newestSeenTsRef = useRef<number | null>(null);
+  // Refs mirror the viewport state synchronously. The auto-follow logic
+  // runs from FlatList callbacks where setState hasn't necessarily
+  // committed yet; relying on stale React state is what caused the chat
+  // to jump back to the bottom when a new message landed mid-scroll.
+  const isUserAtBottomRef = useRef(true);
+  const hasUserScrolledRef = useRef(false);
 
   const flatListRef = useRef<FlatList<IMessage>>(null);
 
@@ -176,16 +192,72 @@ const MessageList = <TMessage extends IMessage>({
   ]);
 
   const dataMessages = useMemo(() => {
-    return memoizedMessages.slice().reverse();
-  }, [memoizedMessages]);
+    const base = memoizedMessages.slice().reverse();
+    const boundaryTs = newestSeenTsRef.current;
+    if (
+      isUserAtBottomRef.current ||
+      boundaryTs === null ||
+      unreadWhileScrolledUp === 0
+    ) {
+      return base;
+    }
+
+    let lastNewIndex = -1;
+    for (let i = 0; i < base.length; i++) {
+      if (msgSortableMs(base[i]) > boundaryTs) {
+        lastNewIndex = i;
+      } else {
+        break;
+      }
+    }
+
+    if (lastNewIndex === -1) {return base;}
+
+    const withDivider = base.slice();
+    withDivider.splice(lastNewIndex + 1, 0, {
+      id: 'delimiter-new-local',
+      user: {
+        id: 'system',
+        name: undefined,
+        token: '',
+        refreshToken: '',
+      } as any,
+      date: new Date(boundaryTs).toISOString(),
+      body: 'New Messages',
+      roomJid: roomJID,
+    } as IMessage);
+    return withDivider;
+  }, [memoizedMessages, isUserAtBottom, roomJID, unreadWhileScrolledUp]);
 
   const renderMessage = useCallback(
     ({ item, index }: { item: IMessage; index: number }) => {
+      if (String(item.id).startsWith('delimiter-new')) {
+        return (
+          <MessageContainer
+            CustomMessage={CustomMessage}
+            CustomDaySeparator={CustomDaySeparator}
+            CustomNewMessageLabel={CustomNewMessageLabel}
+            message={item}
+            activeMessage={activeMessage}
+            config={config}
+            walletAddress={user.xmppUsername || user.walletAddress}
+            isReply={isReply}
+            showDateLabel={false}
+          />
+        );
+      }
+
       const messageDate = new Date(item.date).toDateString();
       let showDateLabel = false;
 
-      const nextMessage =
-        index < dataMessages.length - 1 ? dataMessages[index + 1] : null;
+      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;
@@ -211,10 +283,13 @@ const MessageList = <TMessage extends IMessage>({
     [
       activeMessage,
       config,
+      CustomDaySeparator,
+      CustomMessage,
+      CustomNewMessageLabel,
+      dataMessages,
+      isReply,
       user.xmppUsername,
       user.walletAddress,
-      isReply,
-      memoizedMessages.length,
     ]
   );
 
@@ -228,16 +303,12 @@ const MessageList = <TMessage extends IMessage>({
   }, [flatListRef]);
 
   const handleContentSizeChange = useCallback(() => {
-    if (isContentOffset) {
-      scrollToBottom();
-      setIsContentOffset(false);
-    }
-    if (!isLoadingMore && flatListRef.current && isUserAtBottom) {
+    if (!isLoadingMore && flatListRef.current && isUserAtBottomRef.current) {
       scrollToBottom();
-    } else if (!isLoadingMore && hasUserScrolled) {
+    } else if (!isLoadingMore && hasUserScrolledRef.current) {
       setShowNewMessageIndicator(true);
     }
-  }, [isUserAtBottom, scrollToBottom, isLoadingMore, hasUserScrolled]);
+  }, [scrollToBottom, isLoadingMore]);
 
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -248,40 +319,78 @@ const MessageList = <TMessage extends IMessage>({
       // to a long thread feel broken. Drag-to-dismiss still works via
       // FlatList's keyboardDismissMode="interactive" below.
 
-      if (contentOffset > 150 && !hasUserScrolled) {
-        setHasUserScrolled(true);
+      if (contentOffset > 150 && !hasUserScrolledRef.current) {
+        hasUserScrolledRef.current = true;
       }
 
       if (contentOffset < 150) {
-        setIsContentOffset(true);
+        isUserAtBottomRef.current = true;
         setShowNewMessageIndicator(false);
         setIsUserAtBottom(true);
+        // Back at the bottom — clear the unread-while-scrolled-up
+        // counter so the badge disappears with the arrow.
+        setUnreadWhileScrolledUp(0);
+        newestSeenTsRef.current = null;
       } else {
-        setIsContentOffset(false);
-        if (hasUserScrolled) {
+        isUserAtBottomRef.current = false;
+        if (hasUserScrolledRef.current) {
           setShowNewMessageIndicator(true);
         }
+        if (newestSeenTsRef.current === null) {
+          // Snapshot the NEWEST message's timestamp the moment the user
+          // first leaves the bottom. Anything newer than this that
+          // arrives later is genuinely "new"; older history loaded by
+          // back-pagination is < this and never counts.
+          newestSeenTsRef.current = memoizedMessages.reduce(
+            (mx: number, m: IMessage) => {
+              const t = msgSortableMs(m);
+              return t > mx ? t : mx;
+            },
+            0
+          );
+        }
         setIsUserAtBottom(false);
       }
     },
-    [hasUserScrolled]
+    [memoizedMessages]
   );
 
+  // Keep the badge in sync with messages that arrive while the user is
+  // scrolled up. Count ONLY messages newer than the newest-seen snapshot
+  // — so loading older history (back-pagination) doesn't inflate it.
+  useEffect(() => {
+    if (isUserAtBottomRef.current) {return;}
+    if (newestSeenTsRef.current === null) {return;}
+    const since = newestSeenTsRef.current;
+    const count = memoizedMessages.reduce(
+      (n: number, m: IMessage) => (msgSortableMs(m) > since ? n + 1 : n),
+      0
+    );
+    setUnreadWhileScrolledUp(count);
+  }, [memoizedMessages, isUserAtBottom]);
+
   const handleLayout = () => {
-    setIsContentOffset(true);
+    isUserAtBottomRef.current = true;
+    hasUserScrolledRef.current = false;
     setIsUserAtBottom(true);
   };
 
   const handleNewMessageIndicatorPress = () => {
+    isUserAtBottomRef.current = true;
     setShowNewMessageIndicator(false);
     setIsUserAtBottom(true);
+    setUnreadWhileScrolledUp(0);
+    newestSeenTsRef.current = null;
     scrollToBottom();
   };
 
   useEffect(() => {
-    setHasUserScrolled(false);
+    hasUserScrolledRef.current = false;
+    isUserAtBottomRef.current = true;
     setShowNewMessageIndicator(false);
     setIsUserAtBottom(true);
+    setUnreadWhileScrolledUp(0);
+    newestSeenTsRef.current = null;
   }, [roomJID]);
 
   const BackgroundImage = useMemo(() => {
@@ -321,7 +430,7 @@ const MessageList = <TMessage extends IMessage>({
       )}
       <FlatList
         ref={flatListRef}
-        data={memoizedMessages.slice().reverse()}
+        data={dataMessages}
         renderItem={renderMessage}
         keyExtractor={(item) => item.id.toString()}
         onEndReached={handleLoadMore}
@@ -344,11 +453,21 @@ const MessageList = <TMessage extends IMessage>({
         <TouchableOpacity
           style={[
             styles.newMessageIndicator,
-            { backgroundColor: config?.colors?.secondary },
+            { backgroundColor: config?.colors?.primary || '#0052CD' },
           ]}
           onPress={handleNewMessageIndicatorPress}
         >
-          <ArowDownIcon />
+          {/* White chevron on the saturated FAB. The icon's default
+              color is white, which was invisible against the previous
+              light `secondary` background — hence "no icon". */}
+          <ArowDownIcon color="#FFFFFF" width={22} height={22} />
+          {unreadWhileScrolledUp > 0 && (
+            <View style={styles.newMessageBadge}>
+              <Text style={styles.newMessageBadgeText}>
+                {unreadWhileScrolledUp > 99 ? '99+' : unreadWhileScrolledUp}
+              </Text>
+            </View>
+          )}
         </TouchableOpacity>
       )}
       {config?.customTypingIndicator?.enabled && composing && (
@@ -407,12 +526,40 @@ const styles = StyleSheet.create({
     height: 40,
     bottom: 20,
     right: 20,
-    backgroundColor: '#007AFF',
-    padding: 10,
+    backgroundColor: '#0052CD',
     borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // Lift the FAB off the chat background so it reads as a button.
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    elevation: 4,
   },
   newMessageText: {
     color: '#fff',
     fontWeight: 'bold',
   },
+  newMessageBadge: {
+    position: 'absolute',
+    top: -6,
+    right: -6,
+    minWidth: 20,
+    height: 20,
+    paddingHorizontal: 6,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // Fixed red so it stays distinct from the (primary-coloured) FAB,
+    // with a white ring to separate the two.
+    backgroundColor: '#E53935',
+    borderWidth: 2,
+    borderColor: '#fff',
+  },
+  newMessageBadgeText: {
+    color: '#fff',
+    fontWeight: 'bold',
+    fontSize: 11,
+  },
 });

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react';
 import {Provider} from 'react-redux';
 import {KeyboardProvider} from 'react-native-keyboard-controller';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {store} from '../../roomStore';
 import {ConfigUser, IConfig, MessageProps} from '../../types/types';
 import {XmppProvider} from '../../context/xmppProvider';
@@ -8,6 +9,12 @@ import {MessageNotificationProvider} from '../../context/MessageNotificationCont
 import {ToastProvider} from '../../context/ToastContext';
 import LoginWrapper from './LoginWrapper';
 import '../../helpers/storeConsole';
+import {installPromiseRejectionTracker} from '../../utils/installPromiseRejectionTracker';
+
+// Mount-time, dev-only — wire a global unhandled-promise-rejection
+// tracker so any future leak surfaces with a real stack trace in Metro
+// logs (bug #4 follow-up). No-op in production.
+installPromiseRejectionTracker();
 
 interface ChatWrapperProps {
   token?: string;
@@ -17,6 +24,7 @@ interface ChatWrapperProps {
   MainComponentStyles?: React.CSSProperties;
   CustomMessageComponent?: React.ComponentType<MessageProps>;
   config?: IConfig;
+  isVisible?: boolean;
 }
 
 export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
@@ -27,15 +35,17 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
 
     return (
       <Provider store={store}>
-        <KeyboardProvider>
-          <XmppProvider config={memoizedConfig}>
-            <ToastProvider>
-              <MessageNotificationProvider config={memoizedConfig}>
-                <LoginWrapper config={memoizedConfig} {...props} />
-              </MessageNotificationProvider>
-            </ToastProvider>
-          </XmppProvider>
-        </KeyboardProvider>
+        <SafeAreaProvider>
+          <KeyboardProvider>
+            <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
+              <ToastProvider>
+                <MessageNotificationProvider config={memoizedConfig}>
+                  <LoginWrapper config={memoizedConfig} {...props} />
+                </MessageNotificationProvider>
+              </ToastProvider>
+            </XmppProvider>
+          </KeyboardProvider>
+        </SafeAreaProvider>
       </Provider>
     );
   },

package/src/components/MainComponents/SystemMessage.tsx

@@ -1,42 +1,54 @@
 import React from 'react';
-import { CustomSystemMessage } from '../styled/StyledComponents';
-import styled from 'styled-components/native';
+import { View, Text, StyleSheet } from 'react-native';
 
 interface SystemMessageProps {
   messageText?: string;
   colors?: { primary?: string; secondary?: string };
 }
 
-export const CustomSystemMessageText = styled.Text<{
-  primary?: string;
-  secondary?: string;
-}>`
-  margin: 0;
-  color: ${(props) => props.primary || '#0052cd'};
-  border-radius: 118px;
-  padding: 5px 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: 600;
-  background-color: ${(props) => props.secondary || '#e7edf9'};
-  height: 24px;
-  white-space: nowrap;
-`;
-
 const SystemMessage: React.FC<SystemMessageProps> = ({
   messageText,
   colors,
 }) => {
   return (
-    <CustomSystemMessage>
-      <CustomSystemMessageText {...colors}>
-        {messageText}
-      </CustomSystemMessageText>
-    </CustomSystemMessage>
+    <View style={styles.container}>
+      {/* maxWidth lives on this View (not the Text) so the Text reliably
+          wraps to multiple lines instead of staying on one line and
+          getting clipped — a styled.Text with a percentage max-width
+          doesn't bound its own line box the way a View does. */}
+      <View
+        style={[
+          styles.bubble,
+          { backgroundColor: colors?.secondary || '#e7edf9' },
+        ]}
+      >
+        <Text style={[styles.text, { color: colors?.primary || '#0052cd' }]}>
+          {messageText}
+        </Text>
+      </View>
+    </View>
   );
 };
 
 export default SystemMessage;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  bubble: {
+    maxWidth: '85%',
+    borderRadius: 12,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+  },
+  text: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});

package/src/components/MessageBubble/InteractionsOverlay.tsx

@@ -0,0 +1,121 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { StyleSheet, View } from 'react-native';
+
+/**
+ * In-tree overlay host for the message context menu (MessageInteractions).
+ *
+ * Why this exists: MessageInteractions used to render inside a React Native
+ * `<Modal>`. On Android a Modal opens its own window, which steals focus
+ * from the chat input — so opening the menu dismissed the keyboard. Hosting
+ * the menu in the SAME view tree (no extra window) keeps the keyboard up.
+ *
+ * Coordinate note: the menu is positioned from `UIManager.measure` WINDOW
+ * coordinates (pageX/pageY), but this host sits below the status bar / any
+ * safe-area + header insets, so its own origin is offset from the window.
+ * The host measures that offset (`measureInWindow`) and exposes it so the
+ * menu can convert window coords → host-local coords. The host is mounted
+ * ABOVE ChatRoom's KeyboardAvoidingView, so its origin doesn't move when the
+ * keyboard opens (only the measured bubble's pageY does).
+ */
+interface OverlayEntry {
+  id: string;
+  node: React.ReactNode;
+}
+
+interface InteractionsOverlayCtx {
+  present: (id: string, node: React.ReactNode) => void;
+  dismiss: (id: string) => void;
+  originX: number;
+  originY: number;
+}
+
+const Ctx = createContext<InteractionsOverlayCtx>({
+  present: () => {},
+  dismiss: () => {},
+  originX: 0,
+  originY: 0,
+});
+
+export const useInteractionsOverlay = () => useContext(Ctx);
+
+export const InteractionsOverlayProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [entries, setEntries] = useState<OverlayEntry[]>([]);
+  const [origin, setOrigin] = useState({ x: 0, y: 0 });
+  const hostRef = useRef<View>(null);
+
+  const measure = useCallback(() => {
+    hostRef.current?.measureInWindow?.((x, y) => {
+      if (typeof x !== 'number' || typeof y !== 'number') {return;}
+      setOrigin((prev) => (prev.x === x && prev.y === y ? prev : { x, y }));
+    });
+  }, []);
+
+  const present = useCallback(
+    (id: string, node: React.ReactNode) => {
+      // Re-measure on present: the keyboard / layout may have shifted us
+      // since the last onLayout.
+      measure();
+      setEntries((prev) => {
+        const next = prev.filter((e) => e.id !== id);
+        next.push({ id, node });
+        return next;
+      });
+    },
+    [measure]
+  );
+
+  const dismiss = useCallback((id: string) => {
+    setEntries((prev) =>
+      prev.some((e) => e.id === id) ? prev.filter((e) => e.id !== id) : prev
+    );
+  }, []);
+
+  // MUST be memoized. Otherwise every host re-render (e.g. from present()'s
+  // setEntries) creates a new context value → all consumers re-render →
+  // MessageInteractions' present-effect fires again → setEntries → … →
+  // "Maximum update depth exceeded". present/dismiss are stable (useCallback)
+  // and origin rarely changes, so this value is stable across entry changes.
+  const ctxValue = useMemo(
+    () => ({ present, dismiss, originX: origin.x, originY: origin.y }),
+    [present, dismiss, origin.x, origin.y]
+  );
+
+  return (
+    // `children` is a stable element from the caller, so re-rendering this
+    // host (present/dismiss/origin state) does NOT re-render the chat
+    // subtree — React reconciliation skips the unchanged children element.
+    <View
+      ref={hostRef}
+      style={styles.host}
+      onLayout={measure}
+      collapsable={false}
+    >
+      <Ctx.Provider value={ctxValue}>
+        {children}
+        {entries.length > 0 && (
+          <View style={styles.overlay} pointerEvents="box-none">
+            {entries.map((e) => (
+              <React.Fragment key={e.id}>{e.node}</React.Fragment>
+            ))}
+          </View>
+        )}
+      </Ctx.Provider>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  host: { flex: 1 },
+  overlay: { ...StyleSheet.absoluteFillObject, zIndex: 9999, elevation: 9999 },
+});
+
+export default InteractionsOverlayProvider;