@ethora/chat-component-rn 26.8.4 → 26.8.6

package/src/context/MessageNotificationContext.tsx

@@ -8,6 +8,7 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -15,17 +16,23 @@ import {
   Animated,
   AppState,
   AppStateStatus,
+  Easing,
+  PanResponder,
   Pressable,
   StyleSheet,
   Text,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch, useSelector } from 'react-redux';
 import { messageNotificationManager } from '../utils/messageNotificationManager';
 import { setCurrentRoom } from '../roomStore/roomsSlice';
 import { IConfig, IMessage } from '../types/types';
 import { RootState } from '../roomStore';
 import { useTheme } from '../hooks/useTheme';
+import { ProfileImagePlaceholder } from '../components/MainComponents/ProfileImagePlaceholder';
+import { useFileToken } from '../hooks/useFileToken';
+import { appendFileToken } from '../helpers/secureFileUrl';
 
 interface ToastItem {
   id: string;
@@ -49,7 +56,18 @@ const MessageNotificationContext =
   createContext<MessageNotificationContextValue | null>(null);
 
 const DEFAULT_MAX = 3;
+
+const pruneExpired = (prev: ToastItem[], now: number, ttl: number) => {
+  if (prev.length === 0) {return prev;}
+  const next = prev.filter((t) => now - t.timestamp < ttl);
+  return next.length === prev.length ? prev : next;
+};
 const DEFAULT_DURATION_MS = 30000;
+// The top banner is a glance, not a stack to work through: it leaves on its
+// own after a few seconds unless the host sets `duration`.
+const BANNER_DURATION_MS = 4000;
+const BANNER_IN_MS = 280;
+const BANNER_OUT_MS = 220;
 
 interface ProviderProps {
   children: ReactNode;
@@ -72,7 +90,17 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
   const notificationConfig = config?.inAppNotifications;
   const isEnabled = notificationConfig?.enabled === true;
   const maxNotifications = notificationConfig?.maxNotifications ?? DEFAULT_MAX;
-  const duration = notificationConfig?.duration ?? DEFAULT_DURATION_MS;
+  // Default presentation: one full-width banner sliding in from the top
+  // (the messenger convention). An explicit `position` or a
+  // `customComponent` keeps the stacked corner toasts.
+  const bannerMode =
+    !notificationConfig?.position && !notificationConfig?.customComponent;
+  const duration =
+    notificationConfig?.duration ??
+    (bannerMode ? BANNER_DURATION_MS : DEFAULT_DURATION_MS);
+  // The banner times its own exit (so it can animate out); the list prune
+  // below is only its safety net.
+  const pruneAfter = bannerMode ? duration + 2000 : duration;
 
   const [toasts, setToasts] = useState<ToastItem[]>([]);
   const appActiveRef = useRef(AppState.currentState === 'active');
@@ -86,22 +114,22 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
         appActiveRef.current = next === 'active';
         if (next === 'active') {
           const now = Date.now();
-          setToasts((prev) => prev.filter((t) => now - t.timestamp < duration));
+          setToasts((prev) => pruneExpired(prev, now, pruneAfter));
         }
       }
     );
     return () => sub.remove();
-  }, [duration]);
+  }, [pruneAfter]);
 
   // Periodic prune when active.
   useEffect(() => {
     const interval = setInterval(() => {
       if (!appActiveRef.current) {return;}
       const now = Date.now();
-      setToasts((prev) => prev.filter((t) => now - t.timestamp < duration));
+      setToasts((prev) => pruneExpired(prev, now, pruneAfter));
     }, 1000);
     return () => clearInterval(interval);
-  }, [duration]);
+  }, [pruneAfter]);
 
   // Clear toasts when their room becomes active.
   useEffect(() => {
@@ -172,10 +200,33 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
     return unsubscribe;
   }, [isEnabled, showMessageNotification]);
 
+  const contextValue = useMemo(
+    () => ({ showMessageNotification }),
+    [showMessageNotification]
+  );
+
   return (
-    <MessageNotificationContext.Provider value={{ showMessageNotification }}>
+    <MessageNotificationContext.Provider value={contextValue}>
       {children}
-      {isEnabled && toasts.length > 0 && (
+      {isEnabled && bannerMode && toasts.length > 0 && (
+        <ToastBanner
+          item={toasts[toasts.length - 1]}
+          duration={duration}
+          safeAreaTop={!!config?.headerLayout?.safeAreaTop}
+          onPress={(t) =>
+            navigateToMessage(
+              t.roomJID,
+              t.message.id,
+              t.message,
+              t.roomName,
+              t.senderName
+            )
+          }
+          // One banner stands for everything queued behind it.
+          onDismiss={() => setToasts([])}
+        />
+      )}
+      {isEnabled && !bannerMode && toasts.length > 0 && (
         <View
           pointerEvents="box-none"
           style={[
@@ -224,6 +275,122 @@ export const MessageNotificationProvider: React.FC<ProviderProps> = ({
   );
 };
 
+/**
+ * Top banner: slides down from under the status bar, stays for `duration`,
+ * slides back up. Tap opens the room; a flick upwards dismisses it. A newer
+ * message replaces the content in place and restarts the timer.
+ */
+const ToastBanner: React.FC<{
+  item: ToastItem;
+  duration: number;
+  safeAreaTop: boolean;
+  onPress: (item: ToastItem) => void;
+  onDismiss: () => void;
+}> = ({ item, duration, safeAreaTop, onPress, onDismiss }) => {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const top = (safeAreaTop ? insets.top : 0) + 8;
+  const roomIcon = useSelector(
+    (state: RootState) => state.rooms.rooms?.[item.roomJID]?.icon
+  );
+  const fileToken = useFileToken();
+  // 0 = hidden above the screen, 1 = in place.
+  const shown = useRef(new Animated.Value(0)).current;
+  const drag = useRef(new Animated.Value(0)).current;
+  const leaving = useRef(false);
+  const onDismissRef = useRef(onDismiss);
+  onDismissRef.current = onDismiss;
+
+  const leave = useCallback(() => {
+    if (leaving.current) {return;}
+    leaving.current = true;
+    Animated.timing(shown, {
+      toValue: 0,
+      duration: BANNER_OUT_MS,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true,
+    }).start(() => onDismissRef.current());
+  }, [shown]);
+
+  useEffect(() => {
+    Animated.timing(shown, {
+      toValue: 1,
+      duration: BANNER_IN_MS,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [shown]);
+
+  // Restarts with every new message shown in the banner.
+  useEffect(() => {
+    const timer = setTimeout(leave, duration);
+    return () => clearTimeout(timer);
+  }, [item.id, duration, leave]);
+
+  const pan = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_e, g) =>
+        g.dy < -6 && Math.abs(g.dy) > Math.abs(g.dx),
+      onPanResponderMove: (_e, g) => drag.setValue(Math.min(g.dy, 0)),
+      onPanResponderRelease: (_e, g) => {
+        if (g.dy < -24 || g.vy < -0.5) {
+          leave();
+        } else {
+          Animated.spring(drag, { toValue: 0, useNativeDriver: true }).start();
+        }
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(drag, { toValue: 0, useNativeDriver: true }).start();
+      },
+    })
+  ).current;
+
+  const slide = shown.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-(top + 96), 0],
+  });
+
+  return (
+    <Animated.View
+      testID="message-notification-banner"
+      {...pan.panHandlers}
+      style={[
+        styles.banner,
+        {
+          top,
+          backgroundColor: theme.surface,
+          borderColor: theme.border,
+          shadowColor: theme.shadow,
+          opacity: shown,
+          transform: [{ translateY: Animated.add(slide, drag) }],
+        },
+      ]}
+    >
+      <Pressable style={styles.bannerBody} onPress={() => onPress(item)}>
+        <ProfileImagePlaceholder
+          name={item.roomName}
+          icon={appendFileToken(roomIcon, fileToken)}
+          size={40}
+        />
+        <View style={styles.bannerText}>
+          <Text
+            style={[styles.bannerTitle, { color: theme.text }]}
+            numberOfLines={1}
+          >
+            {item.roomName}
+          </Text>
+          <Text
+            style={[styles.bannerSubtitle, { color: theme.textSecondary }]}
+            numberOfLines={2}
+          >
+            {item.senderName}: {item.message?.body || ''}
+          </Text>
+        </View>
+      </Pressable>
+    </Animated.View>
+  );
+};
+
 const ToastRow: React.FC<{
   item: ToastItem;
   onPress: () => void;
@@ -300,6 +467,37 @@ const styles = StyleSheet.create({
     zIndex: 10000,
     elevation: 10000,
   },
+  banner: {
+    position: 'absolute',
+    left: 8,
+    right: 8,
+    zIndex: 10000,
+    elevation: 12,
+    borderRadius: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    shadowOpacity: 0.25,
+    shadowOffset: { width: 0, height: 6 },
+    shadowRadius: 16,
+  },
+  bannerBody: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  bannerText: {
+    flex: 1,
+    marginLeft: 12,
+  },
+  bannerTitle: {
+    fontWeight: '600',
+    fontSize: 15,
+    marginBottom: 2,
+  },
+  bannerSubtitle: {
+    fontSize: 13,
+    lineHeight: 18,
+  },
   toast: {
     flexDirection: 'row',
     alignItems: 'center',

package/src/context/xmppProvider.tsx

@@ -40,6 +40,7 @@ import { allRoomPresences } from '../networking/xmpp/allRoomPresences.xmpp';
 import { pushSubscriptionService } from '../services/pushSubscriptionService';
 import { store } from '../roomStore';
 import { logout, setStoreClient, setConfig } from '../roomStore/chatSettingsSlice';
+import { logoutService } from '../hooks/useLogout';
 import {
   setLogoutState,
   setVisibleRoom,
@@ -233,6 +234,22 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
       // Reused clients (steps 1+2 above) also need the provider — config
       // may have changed since the singleton was created.
       created.setCredentialsProvider(credentialsProvider);
+      // The XMPP password is gone for good (rejected, and the refresh could
+      // not produce a working one): end the session the same way the
+      // "Sign out" item does, then let the host route to its login.
+      created.setAuthLostHandler?.(() => {
+        devPushLog('error', 'XMPP password lost — logging out');
+        logoutService
+          .performLogout()
+          .catch(() => {})
+          .finally(() => {
+            try {
+              Promise.resolve(config?.logout?.onAfterLogout?.()).catch(() => {});
+            } catch {
+              /* host callback */
+            }
+          });
+      });
 
       // Re-join MUC rooms on every 'online'. After a reconnect the new
       // XMPP stream isn't a member of any room, so a sent message gets a
@@ -925,16 +942,19 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config, is
     return () => sub.remove();
   }, [client]);
 
+  const contextValue = useMemo(
+    () => ({
+      client,
+      providerBootstrapStatus,
+      initMode,
+      initializeClient,
+      setClient,
+    }),
+    [client, providerBootstrapStatus, initMode, initializeClient, setClient]
+  );
+
   return (
-    <XmppContext.Provider
-      value={{
-        client,
-        providerBootstrapStatus,
-        initMode,
-        initializeClient,
-        setClient,
-      }}
-    >
+    <XmppContext.Provider value={contextValue}>
       {children}
       {/* Lives here, not inside <Chat>: an incoming call-token can arrive
           (and must still ring) while the user is on a different screen of

package/src/helpers/createRoomFromApi.tsx

@@ -1,4 +1,36 @@
 import { ApiRoom, IRoom } from '../types/types';
+import type { LastMessage } from '../types/models/message.model';
+
+const mapApiLastMessage = (
+  apiLastMessage: ApiRoom['lastMessage'],
+  roomJid: string
+): LastMessage | undefined => {
+  const body = String(apiLastMessage?.body || '').trim();
+  if (!apiLastMessage || !body) {return undefined;}
+  const senderName = `${apiLastMessage.senderFirstName || ''} ${
+    apiLastMessage.senderLastName || ''
+  }`.trim();
+  return {
+    id: apiLastMessage.messageId || apiLastMessage.stanzaId || '',
+    xmppId: apiLastMessage.stanzaId,
+    roomJid,
+    body,
+    date: apiLastMessage.createdAt,
+    isDeleted: false,
+    user: {
+      id: apiLastMessage.fromUserId || apiLastMessage.from || '',
+      name: senderName,
+    },
+  } as LastMessage;
+};
+
+const seedTimestamp = (seed: LastMessage | undefined): number | undefined => {
+  if (!seed) {return undefined;}
+  const id = Number(seed.id);
+  if (Number.isFinite(id) && id > 0) {return id;}
+  const ms = seed.date ? new Date(seed.date).getTime() : NaN;
+  return Number.isFinite(ms) && ms > 0 ? ms * 1000 : undefined;
+};
 
 export const createRoomFromApi = (
   room: ApiRoom,
@@ -6,10 +38,12 @@ export const createRoomFromApi = (
   usersArrayLength: number = 0
 ): IRoom | null => {
   try {
+    const jid = `${room?.name}@${service}` || '';
+    const lastMessage = mapApiLastMessage(room?.lastMessage, jid);
     const roomData: IRoom = {
       ...room,
       id: (room as any)?._id || '',
-      jid: `${room?.name}@${service}` || '',
+      jid,
       name: room?.title || '',
       title: room?.title || '',
       usersCnt: Number(room?.members?.length || usersArrayLength + 1),
@@ -19,6 +53,8 @@ export const createRoomFromApi = (
       icon: room?.picture !== 'none' ? room?.picture : null,
       unreadMessages: 0,
       lastViewedTimestamp: 0,
+      lastMessage,
+      lastMessageTimestamp: seedTimestamp(lastMessage),
     };
     return roomData;
   } catch (error) {

package/src/helpers/emoji.ts

@@ -0,0 +1,39 @@
+import { EMOJI_CATEGORIES, type EmojiEntry } from '../assets/emojiData';
+
+let byId: Map<string, EmojiEntry> | null = null;
+const index = (): Map<string, EmojiEntry> => {
+  if (!byId) {
+    byId = new Map();
+    for (const category of EMOJI_CATEGORIES) {
+      for (const entry of category.emojis) {byId.set(entry[0], entry);}
+    }
+  }
+  return byId;
+};
+
+export const getEmojiNativeById = (id: string): string =>
+  index().get(id)?.[1] ?? id;
+
+export const getEmojiIdByNative = (native: string): string | undefined => {
+  for (const [id, entry] of index()) {
+    if (entry[1] === native) {return id;}
+  }
+  return undefined;
+};
+
+export const DEFAULT_QUICK_REACTIONS = ['+1', 'heart', 'joy', 'open_mouth', 'cry', 'pray'];
+
+export const searchEmojis = (query: string, limit = 60): EmojiEntry[] => {
+  const q = query.trim().toLowerCase();
+  if (!q) {return [];}
+  const out: EmojiEntry[] = [];
+  for (const category of EMOJI_CATEGORIES) {
+    for (const entry of category.emojis) {
+      if (entry[0].includes(q) || entry[2].includes(q)) {
+        out.push(entry);
+        if (out.length >= limit) {return out;}
+      }
+    }
+  }
+  return out;
+};

package/src/helpers/haptics.ts

@@ -0,0 +1,19 @@
+// expo-haptics is an OPTIONAL peer, probed the same way as expo-blur: the JS
+// package alone is not enough, the native module has to be in the binary,
+// otherwise the call throws. Without it the gesture simply has no feedback.
+let Haptics: any = null;
+try {
+  const { requireNativeModule } = require('expo-modules-core');
+  requireNativeModule('ExpoHaptics');
+  Haptics = require('expo-haptics');
+} catch {
+  Haptics = null;
+}
+
+/** Short tap, the messenger "I got your long-press" feedback. Never throws. */
+export const hapticTap = () => {
+  if (!Haptics) {
+    return;
+  }
+  Haptics.impactAsync?.(Haptics.ImpactFeedbackStyle?.Medium).catch?.(() => {});
+};

package/src/helpers/historyPreloadScheduler.ts

@@ -15,6 +15,7 @@ interface HistoryPreloadSchedulerOptions {
   pageSize?: number;
   retryLimit?: number;
   roomLimit?: number;
+  firstWave?: number;
   selectedRoomJid?: string | null;
   defaultRoomJids?: string[];
   forceReload?: boolean;
@@ -29,21 +30,15 @@ interface QueueItem {
 }
 
 const DEFAULT_CONCURRENCY = 3;
-// Fetch the most recent ~20 on re-entry (mirrors web). A larger first page
-// also means more id-overlap with cache, so the merge in
-// `mergeHistoryIntoCache` rarely has to fall back to clear-and-replace.
-const DEFAULT_PAGE_SIZE = 20;
+const DEFAULT_PAGE_SIZE = 10;
 const DEFAULT_RETRY_LIMIT = 2;
-// When the first page is entirely unread (every fetched message is newer
-// than `lastViewedTimestamp`), the true unread count could be far bigger
-// than `pageSize` — `useUnread()` only ever sees what's been loaded. Page
-// further back, up to this many extra fetches, until we either find the
-// boundary or give up (`unreadCapped` then stays true so callers at least
-// know the count is a floor, not exact). Customer-reported #34.
-const MAX_UNREAD_CATCHUP_PAGES = 8;
+const DEFAULT_FIRST_WAVE = 30;
+const BACKGROUND_BATCH_PAUSE_MS = 400;
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
+declare const __DEV__: boolean | undefined;
+
 const messageTimestamp = (m: IMessage): number => {
   if (!m) {return 0;}
   const t = (m as any).timestamp;
@@ -54,8 +49,12 @@ const messageTimestamp = (m: IMessage): number => {
 };
 
 const getRoomLastActivityScore = (room: IRoom): number => {
-  if (!room?.messages?.length) {return 0;}
-  return room.messages.reduce((max, m) => Math.max(max, messageTimestamp(m)), 0);
+  const fromMessages = room?.messages?.length
+    ? room.messages.reduce((max, m) => Math.max(max, messageTimestamp(m)), 0)
+    : 0;
+  const fromStamp = Number(room?.lastMessageTimestamp) || 0;
+  const fromSeed = Number(room?.lastMessage?.id) || 0;
+  return Math.max(fromMessages, fromStamp, fromSeed);
 };
 
 const computeUnreadCapped = (
@@ -73,7 +72,10 @@ const computeUnreadCapped = (
   if (countable.length < pageSize) {return false;}
 
   const lastViewed = Number(room.lastViewedTimestamp) || 0;
-  if (lastViewed <= 0) {return true;}
+  // No read marker yet (the private-store markers often land after the
+  // first preload page): the count is unknown, not "more than a page".
+  // Claiming capped here showed "10+" on rooms with a single unread.
+  if (lastViewed <= 0) {return false;}
 
   const oldestTs = countable.reduce<number>((minTs, m) => {
     const ts = messageTimestamp(m);
@@ -116,6 +118,7 @@ export const runHistoryPreloadScheduler = async (
     pageSize = DEFAULT_PAGE_SIZE,
     retryLimit = DEFAULT_RETRY_LIMIT,
     roomLimit,
+    firstWave = DEFAULT_FIRST_WAVE,
     selectedRoomJid = null,
     defaultRoomJids = [],
     forceReload = false,
@@ -123,6 +126,12 @@ export const runHistoryPreloadScheduler = async (
 
   if (signal?.aborted) {return;}
 
+  const startedAt = Date.now();
+  let firstWaveLogged = false;
+  const devLog = (msg: string) => {
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {console.log(msg);}
+  };
+
   store.dispatch(setUnreadSyncing(true));
   try {
 
@@ -153,6 +162,10 @@ export const runHistoryPreloadScheduler = async (
 
   const inFlightByRoom = new Map<string, Promise<void>>();
   let consecutiveErrorCount = 0;
+  let started = 0;
+  devLog(
+    `[preload] ${queue.length} rooms queued, first wave ${Math.min(firstWave, queue.length)}, page ${pageSize}`
+  );
 
   while (queue.length > 0) {
     if (signal?.aborted) {return;}
@@ -176,6 +189,12 @@ export const runHistoryPreloadScheduler = async (
     }
 
     const batch = readyItems.slice(0, Math.max(1, concurrency));
+    const inBackgroundWave = started >= firstWave;
+    if (inBackgroundWave && !firstWaveLogged) {
+      firstWaveLogged = true;
+      devLog(`[preload] first wave done in ${Date.now() - startedAt}ms`);
+    }
+    started += batch.length;
 
     // Snapshot each room's historyPreloadState BEFORE marking the
     // batch as 'loading'. Without this snapshot the per-task
@@ -229,6 +248,7 @@ export const runHistoryPreloadScheduler = async (
                 coalesceRoom: true,
                 skipIfPreloaded: !forceReload,
                 source: 'background',
+                selfApplied: true,
               }
             );
             if (signal?.aborted) {return;}
@@ -237,59 +257,7 @@ export const runHistoryPreloadScheduler = async (
             }
 
             const nextRoom = store.getState().rooms.rooms[item.jid];
-            let combined: IMessage[] = fetchedMessages || [];
-            const lastViewed = Number(nextRoom?.lastViewedTimestamp) || 0;
-
-            // The first page was entirely unread — keep paging older until
-            // we find a message at/before `lastViewedTimestamp` (the true
-            // boundary) or run out of catch-up budget, so the count isn't
-            // silently truncated at `pageSize`.
-            if (lastViewed > 0 && computeUnreadCapped(nextRoom, combined, pageSize)) {
-              let lastPageLen = combined.length;
-              let extraPages = 0;
-              while (
-                extraPages < MAX_UNREAD_CATCHUP_PAGES &&
-                lastPageLen >= pageSize &&
-                !signal?.aborted
-              ) {
-                const oldestId = combined.reduce<number | null>((min, m) => {
-                  const idNum = Number((m as any)?.id);
-                  if (!Number.isFinite(idNum)) {return min;}
-                  return min === null || idNum < min ? idNum : min;
-                }, null);
-                if (oldestId === null) {break;}
-
-                let older: IMessage[] | undefined;
-                try {
-                  older = await client.getHistoryStanza(
-                    item.jid,
-                    pageSize,
-                    oldestId,
-                    undefined,
-                    {
-                      coalesceRoom: true,
-                      skipIfPreloaded: !forceReload,
-                      source: 'background',
-                    }
-                  );
-                } catch {
-                  break;
-                }
-                if (!older || !older.length) {break;}
-
-                combined = [...older, ...combined];
-                lastPageLen = older.length;
-                extraPages++;
-
-                const oldestTs = combined.reduce<number>((minTs, m) => {
-                  const ts = messageTimestamp(m);
-                  return ts > 0 ? Math.min(minTs, ts) : minTs;
-                }, Number.MAX_SAFE_INTEGER);
-                if (oldestTs !== Number.MAX_SAFE_INTEGER && oldestTs <= lastViewed) {
-                  break;
-                }
-              }
-            }
+            const combined: IMessage[] = fetchedMessages || [];
 
             // `mergeHistoryIntoCache` (roomsSlice) caps whatever we dispatch
             // here to the newest RUNTIME_MESSAGE_LIMIT messages before it
@@ -353,10 +321,10 @@ export const runHistoryPreloadScheduler = async (
       })
     );
 
-    // Yield to JS event loop (no requestIdleCallback in RN).
-    await new Promise((r) => setTimeout(r, 0));
+    await sleep(inBackgroundWave ? BACKGROUND_BATCH_PAUSE_MS : 0);
   }
   } finally {
+    devLog(`[preload] finished in ${Date.now() - startedAt}ms`);
     store.dispatch(setUnreadSyncing(false));
   }
 };