@ethora/chat-component-rn 26.7.2 → 26.7.3

package/src/hooks/useComposing.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { AppState, AppStateStatus } from 'react-native';
 import { useXmppClient } from '../context/xmppProvider';
 import { useSelector } from 'react-redux';
 import { RootState } from '../roomStore';
@@ -9,8 +10,16 @@ const useComposing = (config?: IConfig) => {
   const { client } = useXmppClient();
   const { activeRoomJID } = useSelector((state: RootState) => state.rooms);
   const { user } = useChatSettingState();
+  // RN keeps a focused TextInput focused when the app is backgrounded or
+  // the device is locked — nothing fires `onBlur`, so without this the
+  // other participant sees "typing…" for as long as the user is away.
+  // Tracks whether the input is *currently* focused, independent of the
+  // foreground/background transition, so we know whether to resume
+  // composing on return.
+  const isFocusedRef = useRef(false);
 
   const sendStartComposing = useCallback(() => {
+    isFocusedRef.current = true;
     if (config?.disableTypingIndicator) {
       return;
     }
@@ -24,6 +33,7 @@ const useComposing = (config?: IConfig) => {
   }, [activeRoomJID, client, config?.disableTypingIndicator, user.firstName, user.lastName]);
 
   const sendEndComposing = useCallback(() => {
+    isFocusedRef.current = false;
     if (config?.disableTypingIndicator) {
       return;
     }
@@ -44,6 +54,32 @@ const useComposing = (config?: IConfig) => {
     return () => clearTimeout(timerId);
   }, [sendEndComposing]);
 
+  // Foreground/background transition only — a pause in typing must NOT
+  // clear the indicator (that would flicker for a slowly-composing user),
+  // so this deliberately does not hook keystroke/idle timing at all.
+  useEffect(() => {
+    const handleAppStateChange = (nextState: AppStateStatus) => {
+      if (nextState !== 'active') {
+        if (isFocusedRef.current && !config?.disableTypingIndicator && client) {
+          client.sendTypingRequestStanza(
+            activeRoomJID || '',
+            `${user.firstName} ${user.lastName}`,
+            false
+          );
+        }
+      } else if (isFocusedRef.current && !config?.disableTypingIndicator && client) {
+        client.sendTypingRequestStanza(
+          activeRoomJID || '',
+          `${user.firstName} ${user.lastName}`,
+          true
+        );
+      }
+    };
+
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
+    return () => subscription.remove();
+  }, [activeRoomJID, client, config?.disableTypingIndicator, user.firstName, user.lastName]);
+
   return { sendStartComposing, sendEndComposing };
 };
 

package/src/hooks/useSendMessage.tsx

@@ -10,7 +10,7 @@ import {
   markMessageFailed,
 } from '../roomStore/roomHeapSlice';
 import { uploadFileV2 } from '../networking/api-requests/auth.api';
-import { enqueueOutboundSend } from '../networking/outboundQueue';
+import { enqueueOutboundSend, removeOutboundSend } from '../networking/outboundQueue';
 import { RootState, store } from '../roomStore';
 import { getGlobalXmppClient } from '../utils/clientRegistry';
 import { useEventHandlers } from './useEventHandlers';
@@ -214,6 +214,13 @@ export const useSendMessage = (_configOverride?: IConfig) => {
           console.warn(
             `Send watchdog fired — message ${optimisticId} stuck pending > ${PENDING_WATCHDOG_MS}ms; marking failed`
           );
+          // Drop the buffered replay now that the bubble is showing
+          // "failed / tap to retry" — a later onOnline flush must not
+          // silently resend it behind the user's back. If the original
+          // send actually lands after this point, the server echo still
+          // flips the bubble back to delivered (newMessageMidlleware);
+          // only an explicit tap-to-retry should trigger another send.
+          removeOutboundSend(optimisticId);
           dispatch(
             markMessageFailed({
               kind: 'text',
@@ -308,6 +315,9 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         });
       } catch (error) {
         clearTimeout(watchdogTimer);
+        // Same reasoning as the watchdog: once the bubble shows failed,
+        // only an explicit tap-to-retry should resend it.
+        removeOutboundSend(optimisticId);
         dispatch(
           markMessageFailed({
             kind: 'text',
@@ -454,6 +464,10 @@ export const useSendMessage = (_configOverride?: IConfig) => {
           console.warn(
             `Media-send watchdog fired — ${id} stuck pending > ${PENDING_WATCHDOG_MS}ms; marking failed`
           );
+          // See the text-send watchdog above: drop the buffered replay so
+          // a later onOnline flush can't silently resend behind the
+          // "failed / tap to retry" bubble.
+          removeOutboundSend(id);
           dispatch(
             markMessageFailed({
               kind: 'media',
@@ -661,6 +675,22 @@ export const useSendMessage = (_configOverride?: IConfig) => {
     async (failedId: string) => {
       const payload = failedMessages[failedId];
       if (!payload) {return;}
+
+      // The server may have accepted the original send even though its
+      // echo arrived too late to beat the watchdog — the bubble shows
+      // failed, but a confirmed (non-pending) copy is already sitting in
+      // the room. Resending here would deliver a genuine duplicate; just
+      // clear the failure and let the existing copy stand.
+      const roomMsgs = rooms?.[payload.roomJID]?.messages || [];
+      const alreadyDelivered = roomMsgs.some(
+        (m: any) =>
+          !m.pending && (m.id === failedId || m.xmppId === failedId)
+      );
+      if (alreadyDelivered) {
+        dispatch(clearMessageFailure(failedId));
+        return;
+      }
+
       dispatch(clearMessageFailure(failedId));
       handleMessageRetry({
         messageId: failedId,
@@ -690,7 +720,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         );
       }
     },
-    [failedMessages, dispatch, handleMessageRetry, sendMessage, sendMedia]
+    [failedMessages, rooms, dispatch, handleMessageRetry, sendMessage, sendMedia]
   );
 
   // ChatRoom/ThreadWrapper consume this as the "edit branch" of send.

package/src/hooks/useUnreadMessagesCounter.ts

@@ -11,6 +11,12 @@ interface UnreadMessagesStats {
   totalCount: number;
   unreadByRoom: UnreadMessagesMap;
   isLoading: boolean;
+  // True while at least one room's unread count could still be a floor
+  // rather than the true total — the history-preload scheduler paged back
+  // as far as its catch-up budget allows without finding the read
+  // boundary. Lets a host show "99+"-style affordances honestly instead of
+  // implying an exact count it can't back up.
+  isCapped: boolean;
 }
 
 export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
@@ -35,6 +41,7 @@ export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
   const rooms = roomsState.rooms;
   const unreadByRoom: UnreadMessagesMap = {};
   let totalCount = 0;
+  let isCapped = false;
 
   Object.entries(rooms).forEach(([roomJid, room]: [string, IRoom]) => {
     const unreadCount = room.unreadMessages || 0;
@@ -42,6 +49,9 @@ export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
       unreadByRoom[roomJid] = unreadCount;
       totalCount += unreadCount;
     }
+    if ((room as any)?.unreadCapped) {
+      isCapped = true;
+    }
   });
 
   return {
@@ -49,6 +59,7 @@ export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
     totalCount,
     unreadByRoom,
     isLoading: !!roomsState.isUnreadSyncing || !!roomsState.isLoading,
+    isCapped,
   };
 };
 

package/src/networking/xmpp/flushLastViewedToPrivateStore.ts

@@ -12,6 +12,14 @@ interface FlushOpts {
   // up to now" and stamp it with Date.now() — even if its in-memory
   // lastViewedTimestamp has not been updated yet.
   visibleRoomJID?: string | null;
+  // Explicit read boundary for the visible room, used INSTEAD of
+  // Date.now(). ChatRoom passes the timestamp of the newest message the
+  // user actually reached when they leave a room while scrolled up —
+  // without it, the Date.now() default writes "read everything" to the
+  // server and the messages they never scrolled down to come back as
+  // read on the next login, even though the local count was correct.
+  // Customer-reported #33 (server half).
+  visibleRoomTs?: number | null;
   // If true, only write entries for rooms where unreadMessages === 0
   // (or the visible room). Used at logout time: rooms with outstanding
   // unread keep their old marker so the next login still surfaces them.
@@ -34,7 +42,7 @@ export async function flushLastViewedToPrivateStore(
   opts: FlushOpts = {}
 ): Promise<boolean> {
   if (!client?.client) {return false;}
-  const { visibleRoomJID, onlyIfNoUnread } = opts;
+  const { visibleRoomJID, visibleRoomTs, onlyIfNoUnread } = opts;
   const roomList = Object.values(rooms || {});
   if (roomList.length === 0) {return false;}
 
@@ -55,10 +63,16 @@ export async function flushLastViewedToPrivateStore(
     const hasUnread = Number(room.unreadMessages || 0) > 0;
 
     // For the visible room, persist "now" — read state is driven by
-    // room visibility, not by a sentinel timestamp.
+    // room visibility, not by a sentinel timestamp. The exception is an
+    // explicit `visibleRoomTs`: the caller knows the user only read up
+    // to a certain point (left the room while scrolled up), so stamping
+    // "now" here would mark genuinely-unread messages as read.
     let ts: number | undefined;
     if (isVisible) {
-      ts = nowMs;
+      ts =
+        typeof visibleRoomTs === 'number' && visibleRoomTs > 0
+          ? visibleRoomTs
+          : nowMs;
     } else if (room.lastViewedTimestamp && room.lastViewedTimestamp > 0) {
       ts = room.lastViewedTimestamp;
     }

package/src/networking/xmppClient.ts

@@ -1039,7 +1039,11 @@ export class XmppClient {
   // src/networking/xmpp/flushLastViewedToPrivateStore.ts for details.
   async flushLastViewedToPrivateStoreStanza(
     rooms: Record<string, any> | null | undefined,
-    opts: { visibleRoomJID?: string | null; onlyIfNoUnread?: boolean } = {}
+    opts: {
+      visibleRoomJID?: string | null;
+      visibleRoomTs?: number | null;
+      onlyIfNoUnread?: boolean;
+    } = {}
   ) {
     if (this.disableLastRead) {return false;}
     try {

package/src/roomStore/roomsSlice.ts

@@ -13,7 +13,7 @@ import type XmppClient from '../networking/xmppClient';
 // older history added via unshift/splice is exempt, so the user can
 // page backward arbitrarily far without instantly losing what they
 // just fetched. After cap eviction we drop from the head (oldest).
-const RUNTIME_MESSAGE_LIMIT = 100;
+export const RUNTIME_MESSAGE_LIMIT = 100;
 
 // Body strings the server uses for call signaling broadcasts (call-token,
 // call-state ringing/ended, etc). These should never reach the chat

package/src/types/types.ts

@@ -571,6 +571,14 @@ export interface IConfig {
   // `disableKeyboardAvoidingView` is set. Needs on-device tuning of any
   // `keyboardVerticalOffset`.
   keyboardStickyInput?: boolean;
+  // The message list's FlatList uses keyboardDismissMode="interactive" by
+  // default, so a drag can be used to pull the keyboard closed. Because
+  // the list is `inverted`, an ordinary scroll gesture through history can
+  // also be read as a dismiss drag, closing the keyboard mid-scroll. Set
+  // this to keep the keyboard open regardless of how the list is scrolled
+  // — dismissal then only happens when the user deliberately closes it
+  // (tapping outside, back button, etc). Customer-reported #36.
+  keepKeyboardOpenOnScroll?: boolean;
 
   // ----- interactions / messages -----
   disableInteractions?: boolean;