@ethora/chat-component-rn 26.5.7 → 26.5.10

package/src/components/MainComponents/ChatRoom.tsx

@@ -6,9 +6,11 @@ import { useDispatch } from 'react-redux';
 import MessageList from './MessageList';
 import SendInput from '../styled/SendInput';
 import {
+  clearVisibleRoom,
   deleteRoomMessage,
   setEditAction,
   setLastViewedTimestamp,
+  setVisibleRoom,
 } from '../../roomStore/roomsSlice';
 import Loader from '../styled/Loader';
 import { useXmppClient } from '../../context/xmppProvider';
@@ -36,6 +38,12 @@ import {
 } from 'react-native';
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import useComposing from '../../hooks/useComposing';
+import { store } from '../../roomStore';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import {
+  getInputDockPaddingBottom,
+  getKeyboardVerticalOffset,
+} from '../../helpers/keyboardLayout';
 
 interface ChatRoomProps {
   CustomMessageComponent?: any;
@@ -59,6 +67,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
   }) => {
     const { client } = useXmppClient();
     const dispatch = useDispatch();
+    const insets = useSafeAreaInsets();
 
     const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
 
@@ -99,15 +108,9 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         if (!activeRoomJID) {
           return;
         }
-        dispatch(
-          setLastViewedTimestamp({
-            chatJID: activeRoomJID,
-            timestamp: 0,
-          }),
-        );
         sendMs(message, activeRoomJID);
       },
-      [activeRoomJID],
+      [activeRoomJID, sendMs]
     );
 
     const sendMedia = useCallback(
@@ -156,36 +159,28 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         return;
       }
 
-      dispatch(
-        setLastViewedTimestamp({
-          chatJID: activeRoomJID,
-          timestamp: 0,
-        }),
-      );
+      dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       setIsLoadingMore(false);
       return () => {
-        if (client) {
-          client.actionSetTimestampToPrivateStoreStanza(
-            activeRoomJID,
-            new Date().getTime(),
-            Object.keys(roomsList),
-          );
-        }
+        const timestamp = new Date().getTime();
         dispatch(
           setLastViewedTimestamp({
             chatJID: activeRoomJID,
-            timestamp: new Date().getTime(),
-          }),
-        );
-        dispatch(
-          deleteRoomMessage({
-            roomJID: activeRoomJID,
-            messageId: 'delimiter-new',
+            timestamp,
           }),
         );
+        dispatch(clearVisibleRoom());
+        if (client) {
+          client
+            .flushLastViewedToPrivateStoreStanza(store.getState().rooms?.rooms, {
+              visibleRoomJID: activeRoomJID,
+            })
+            .catch(() => {});
+        }
+        dispatch(deleteRoomMessage({ roomJID: activeRoomJID, messageId: 'delimiter-new' }));
         setIsLoadingMore(false);
       };
-    }, [activeRoomJID]);
+    }, [activeRoomJID, client, dispatch]);
 
     // hooks useEffects
     // useRoomUrl(activeRoomJID || "", roomsList, config);
@@ -210,16 +205,34 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       return <ChooseChatMessage />;
     }
 
+    const keyboardVerticalOffset = getKeyboardVerticalOffset({
+      platform: Platform.OS,
+      configuredOffset: configWithEventHandlers?.keyboardVerticalOffset ?? 0,
+      bottomInset: insets.bottom,
+    });
+    const inputDockPaddingBottom = getInputDockPaddingBottom({
+      platform: Platform.OS,
+      bottomInset: insets.bottom,
+    });
+
     return (
       <KeyboardAvoidingView
         style={{ flex: 1 }}
-        // Android: rely on the manifest's `adjustResize` (default). KAV
-        // behavior="height" on top of adjustResize double-handles the
-        // resize and causes a visible message-list flicker every time
-        // the keyboard opens (bug #6). `undefined` makes KAV a no-op on
-        // Android — the system resize alone shows the input correctly.
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        keyboardVerticalOffset={configWithEventHandlers?.keyboardVerticalOffset ?? 0}
+        // Bug #6 history:
+        //  - Original code: behavior="height" on Android — caused
+        //    flicker because Android's adjustResize already shrinks
+        //    the window; KAV resizing on top of that double-resized
+        //    every keyboard open.
+        //  - 26.5.6 attempt: behavior={undefined} on Android — input
+        //    got completely blocked because some host apps disable
+        //    adjustResize via the activity's softInputMode.
+        //  - 26.5.8 fix: behavior="padding" on BOTH platforms. Padding
+        //    adds bottom-padding equal to the keyboard height without
+        //    changing the layout's height prop — no double-resize on
+        //    Android, no flicker, and the input is always lifted above
+        //    the keyboard regardless of the host's softInputMode.
+        behavior="padding"
+        keyboardVerticalOffset={keyboardVerticalOffset}
       >
         <ChatContainer
           style={
@@ -342,37 +355,39 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
           {editAction && editAction.isEdit && (
             <EditWrapper text={editAction.text || ''} onClose={onCloseEdit} />
           )}
-          {CustomInputComponent ? (
-            <CustomInputComponent
-              sendMessage={
-                editAction && editAction.isEdit ? sendEditMessage : sendMessage
-              }
-              sendMedia={sendMedia}
-              config={configWithEventHandlers}
-              isLoading={loading}
-              onFocus={sendStartComposing}
-              onBlur={sendEndComposing}
-              isMessageProcessing={isLastMessageFromUserAndProcessing(
-                activeRoomJID,
-              )}
-              editMessage={editAction && editAction.text}
-            />
-          ) : (
-            <SendInput
-              editMessage={editAction && editAction.text}
-              sendMessage={
-                editAction && editAction.isEdit ? sendEditMessage : sendMessage
-              }
-              sendMedia={sendMedia}
-              config={configWithEventHandlers}
-              isLoading={loading}
-              onFocus={sendStartComposing}
-              onBlur={sendEndComposing}
-              isMessageProcessing={isLastMessageFromUserAndProcessing(
-                activeRoomJID,
-              )}
-            />
-          )}
+          <View style={{ paddingBottom: inputDockPaddingBottom, backgroundColor: '#fff' }}>
+            {CustomInputComponent ? (
+              <CustomInputComponent
+                sendMessage={
+                  editAction && editAction.isEdit ? sendEditMessage : sendMessage
+                }
+                sendMedia={sendMedia}
+                config={configWithEventHandlers}
+                isLoading={loading}
+                onFocus={sendStartComposing}
+                onBlur={sendEndComposing}
+                isMessageProcessing={isLastMessageFromUserAndProcessing(
+                  activeRoomJID,
+                )}
+                editMessage={editAction && editAction.text}
+              />
+            ) : (
+              <SendInput
+                editMessage={editAction && editAction.text}
+                sendMessage={
+                  editAction && editAction.isEdit ? sendEditMessage : sendMessage
+                }
+                sendMedia={sendMedia}
+                config={configWithEventHandlers}
+                isLoading={loading}
+                onFocus={sendStartComposing}
+                onBlur={sendEndComposing}
+                isMessageProcessing={isLastMessageFromUserAndProcessing(
+                  activeRoomJID,
+                )}
+              />
+            )}
+          </View>
 
           {configWithEventHandlers?.customTypingIndicator?.enabled &&
             (configWithEventHandlers.customTypingIndicator.position ===

package/src/components/MainComponents/ChatWrapper.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../roomStore/chatSettingsSlice';
 import {ChatWrapperBox} from '../styled/ChatWrapperBox';
 import {Overlay, StyledModal} from '../styled/MediaModal';
+import ConnectionBanner from './ConnectionBanner';
 import {Message} from '../MessageBubble/Message';
 import {IConfig, IRoom, MessageProps, ModalType, User} from '../../types/types';
 import {useXmppClient} from '../../context/xmppProvider';
@@ -30,6 +31,7 @@ import {ModalWrapper} from '../Modals/ModalWrapper/ModalWrapper';
 import {useChatSettingState} from '../../hooks/useChatSettingState';
 import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
+import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
 
 interface ChatWrapperProps {
   token?: string;
@@ -126,7 +128,11 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   useEffect(() => {
     if (roomJID) {
-      dispatch(setCurrentRoom({roomJID: roomJID}));
+      dispatch(
+        setCurrentRoom({
+          roomJID: normalizeRoomJid(roomJID, config?.xmppSettings?.conference),
+        }),
+      );
     }
 
     const initXmmpClient = async () => {
@@ -186,45 +192,79 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
         if (!client && !storedClient) {
           devPushLog('rn', 'ChatWrapper: initing xmpp client (legacy path)');
-          await initializeClient(
-            user.xmppUsername || user.defaultWallet?.walletAddress,
-            user.xmppPassword,
-            config?.xmppSettings
-          ).then(c => {
-            c.getRoomsStanza()
-              .then(() => {
-                c.getChatsPrivateStoreRequestStanza();
-                dispatch(setStoreClient(c));
-                setClient(c);
-              })
-              .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
-          });
+          // The outer `.then(c => {...})` used to lack a `.catch()` —
+          // if initializeClient rejected (network / SASL), the outer
+          // try/catch couldn't see it because the rejection happens in
+          // the .then handler, not in the awaited promise itself.
+          // Convert to await + try/catch.
+          try {
+            const c = await initializeClient(
+              user.xmppUsername || user.defaultWallet?.walletAddress,
+              user.xmppPassword,
+              config?.xmppSettings
+            );
+            try {
+              await c.getRoomsStanza();
+              c.getChatsPrivateStoreRequestStanza().catch((err: unknown) =>
+                console.warn('getChatsPrivateStoreRequestStanza failed', err)
+              );
+              dispatch(setStoreClient(c));
+              setClient(c);
+            } catch (err) {
+              console.warn('getRoomsStanza failed', err);
+            }
+          } catch (err) {
+            devPushLog('warn', 'initializeClient failed (legacy path)', err);
+          }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {refresh();}
+          if (config?.refreshTokens?.enabled) {
+            // refresh() is fire-and-forget but rejects on bad
+            // refreshToken / network — surface via .catch instead of
+            // leaving the rejection unhandled (was bug #4, id:2).
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         } else if (storedClient) {
           devPushLog('rn', 'ChatWrapper: reusing storedClient');
           setClient(storedClient);
           if (!activeRoomJID) {
             storedClient.getRoomsStanza()
               .then(() => {
-                storedClient.getChatsPrivateStoreRequestStanza();
+                storedClient.getChatsPrivateStoreRequestStanza().catch(
+                  (err: unknown) =>
+                    console.warn('getChatsPrivateStoreRequestStanza failed', err)
+                );
               })
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
           setInited(true);
-          if (config?.refreshTokens?.enabled) {refresh();}
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         } else if (client) {
           devPushLog('rn', 'ChatWrapper: reusing provider client');
           if (!activeRoomJID) {
             client.getRoomsStanza()
               .then(() => {
-                client.getChatsPrivateStoreRequestStanza();
+                client.getChatsPrivateStoreRequestStanza().catch(
+                  (err: unknown) =>
+                    console.warn('getChatsPrivateStoreRequestStanza failed', err)
+                );
               })
               .catch((err: unknown) => console.warn('getRoomsStanza failed', err));
           }
-          client.getChatsPrivateStoreRequestStanza();
+          client.getChatsPrivateStoreRequestStanza().catch((err: unknown) =>
+            console.warn('getChatsPrivateStoreRequestStanza failed', err)
+          );
           setInited(true);
-          if (config?.refreshTokens?.enabled) {refresh();}
+          if (config?.refreshTokens?.enabled) {
+            refresh().catch((err) =>
+              console.warn('refresh failed', err)
+            );
+          }
         }
 
         dispatch(setIsLoading({loading: false}));
@@ -250,6 +290,38 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     config?.initBeforeLoad,
   ]);
 
+  // Cache-first display (initBeforeLoad). The main effect above only marks
+  // the chat `inited` once the provider bootstrap reaches 'ready' — which
+  // waits on the cold XMPP connect. On re-entry that left the user staring
+  // at a loader while fully-cached rooms/messages sat in redux-persist
+  // ("pulls a new connection for 100 years"). Here we render the cached
+  // content the instant rehydration lands; the live client gets wired by
+  // the main effect when the connect completes (send/loadMore activate
+  // then). Mirrors web showing cached rooms immediately + refreshing in
+  // the background.
+  useEffect(() => {
+    if (!config?.initBeforeLoad || initMode !== 'provider') {return;}
+    if (isInited || showModal) {return;}
+    if (providerBootstrapStatus === 'failed') {return;}
+    const haveCachedRooms = !!rooms && Object.keys(rooms).length > 0;
+    const haveUser =
+      !!user?.xmppUsername || !!user?.defaultWallet?.walletAddress;
+    if (haveCachedRooms && haveUser) {
+      devPushLog('rn', 'ChatWrapper: cache-first — showing persisted rooms while provider connects');
+      setShowModal(false);
+      setInited(true);
+    }
+  }, [
+    config?.initBeforeLoad,
+    initMode,
+    isInited,
+    showModal,
+    providerBootstrapStatus,
+    rooms,
+    user?.xmppUsername,
+    user?.defaultWallet?.walletAddress,
+  ]);
+
   // Skip the legacy email/password LoginForm entirely when XmppProvider
   // is driving auth via initBeforeLoad — the bootstrap effect will
   // populate the user shortly. Showing LoginForm here causes a flicker
@@ -270,7 +342,13 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
 
   return (
     <>
-      {showModal && (
+      {/* Connection/bootstrap error UI. For patient-facing apps the
+          full-screen dark overlay reads as a crash, so
+          `disableConnectionErrorOverlay` swaps it for a subtle inline
+          "Connection lost. Retrying…" banner (and reconnect + re-join now
+          recover automatically). */}
+      {showModal && config?.disableConnectionErrorOverlay && <ConnectionBanner />}
+      {showModal && !config?.disableConnectionErrorOverlay && (
         <Overlay>
           <View
             style={{

package/src/components/MainComponents/MediaMessage.tsx

@@ -12,6 +12,7 @@ interface MediaMessageProps {
   message?: IMessage;
   location?: string;
   messageText?: string;
+  isUser: boolean;
 }
 
 const MediaMessage: React.FC<MediaMessageProps> = ({
@@ -19,6 +20,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
   location,
   messageText,
   message,
+  isUser,
 }) => {
   if (mimeType) {
     const displayName = deriveDisplayFilename({
@@ -61,6 +63,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
             fileURL={location ? location : ''}
             fileName={displayName}
             mimetype={mimeType}
+            isUser={isUser}
           />
         );
       }

package/src/components/MainComponents/MessageContainer.tsx

@@ -73,7 +73,7 @@ export const MessageContainer: FC<MessageContainerProps> = ({
     );
   }
 
-  if (message?.id === 'delimiter-new') {
+  if (String(message?.id || '').startsWith('delimiter-new')) {
     return CustomNewMessageLabel ? (
       <CustomNewMessageLabel color={config?.colors?.primary} />
     ) : (
@@ -85,7 +85,9 @@ export const MessageContainer: FC<MessageContainerProps> = ({
 
   return (
     <View key={message.id}>
-      {showDateLabel && !activeMessage && message.id !== 'delimiter-new' ? (
+      {showDateLabel &&
+      !activeMessage &&
+      !String(message.id || '').startsWith('delimiter-new') ? (
         CustomDaySeparator ? (
           <CustomDaySeparator
             date={messageDate}