@ethora/chat-component-rn 26.4.1

package/src/hooks/useRoomInitialization.tsx

@@ -0,0 +1,160 @@
+import { useEffect } from 'react';
+import { setIsLoading } from '../roomStore/roomsSlice';
+import { useXmppClient } from '../context/xmppProvider';
+import { IConfig, IMessage, IRoom } from '../types/types';
+import { useDispatch } from 'react-redux';
+import useGetNewArchRoom from './useGetNewArchRoom';
+
+const countUndefinedText = (arr: IMessage[]) =>
+  (Array.isArray(arr) ? arr : []).filter(
+    (item) => item?.body === undefined
+  )?.length;
+
+const hasLoadedRoomHistory = (room?: IRoom): boolean => {
+  const messages = Array.isArray(room?.messages) ? room.messages : [];
+  if (!messages.length) {return false;}
+  return messages.some(
+    (message) =>
+      message?.id !== 'delimiter-new' &&
+      message?.pending !== true &&
+      !!String(message?.body || '').trim()
+  );
+};
+
+export const useRoomInitialization = (
+  activeRoomJID: string,
+  roomsList: Record<string, IRoom>,
+  config: IConfig,
+  messageLength: number
+) => {
+  const { client } = useXmppClient();
+  const dispatch = useDispatch();
+
+  const syncRooms = useGetNewArchRoom();
+
+  // Fast active-room join. Mirrors web's first effect: as soon as the
+  // active room changes, eagerly send presence + ask for room info so
+  // the header populates and the MUC join lets MAM history flow.
+  // Without this, REST-hydrated rooms (which are in `roomsList`
+  // without a join) silently return zero messages when getHistoryStanza
+  // runs — the user sees an empty chat after tapping a room.
+  useEffect(() => {
+    if (client && activeRoomJID) {
+      client.setActiveRoomJid?.(activeRoomJID);
+      client.promoteRoomHistory?.(activeRoomJID);
+      try {
+        client.presenceInRoomStanza(activeRoomJID);
+      } catch {
+        /* non-fatal */
+      }
+      try {
+        client.getRoomInfoStanza?.(activeRoomJID);
+      } catch {
+        /* non-fatal */
+      }
+    }
+    if (client && !activeRoomJID) {
+      client.setActiveRoomJid?.(null);
+    }
+  }, [client, activeRoomJID]);
+
+  useEffect(() => {
+    const activeRoom = roomsList?.[activeRoomJID];
+    const shouldLoadActiveHistory =
+      !!activeRoomJID && !hasLoadedRoomHistory(activeRoom);
+
+    const getDefaultHistory = async () => {
+      if (!client || !activeRoomJID) {return;}
+      // Re-send presence inside the history fetch as well — joining is
+      // idempotent and ensures REST-hydrated rooms have actually joined
+      // the MUC before MAM. Web does the same.
+      try {
+        client.presenceInRoomStanza(activeRoomJID);
+      } catch {
+        /* non-fatal */
+      }
+      dispatch(setIsLoading({ loading: true, chatJID: activeRoomJID }));
+      try {
+        const res = await client.getHistoryStanza(activeRoomJID, 30);
+        if (!res?.length) {
+          client.prioritizeRoomPresence?.(activeRoomJID).catch(() => {});
+        }
+        if (res && countUndefinedText(res) > 0) {
+          dispatch(setIsLoading({ loading: false, chatJID: activeRoomJID }));
+          await client.getHistoryStanza(
+            activeRoomJID,
+            20 + countUndefinedText(res),
+            Number(res[0].id)
+          );
+        }
+      } finally {
+        dispatch(
+          setIsLoading({
+            loading: false,
+            chatJID: activeRoomJID,
+            loadingText: undefined,
+          })
+        );
+      }
+    };
+
+    const initialPresenceAndHistory = async () => {
+      if (!roomsList[activeRoomJID] && activeRoomJID && client) {
+        await client.presenceInRoomStanza(activeRoomJID);
+        if (config?.newArch) {
+          await syncRooms(client, config);
+        } else {
+          await client.getRoomsStanza();
+        }
+        await getDefaultHistory();
+      } else {
+        await getDefaultHistory();
+      }
+    };
+
+    if (Object.keys(roomsList)?.length > 0) {
+      if (
+        activeRoomJID &&
+        !roomsList?.[activeRoomJID] &&
+        Object.keys(roomsList).length > 0
+      ) {
+        dispatch(setIsLoading({ loading: true, chatJID: activeRoomJID }));
+        initialPresenceAndHistory();
+      } else if (activeRoomJID && shouldLoadActiveHistory) {
+        // Was: messageLength<1 && !historyComplete — that gated REST-
+        // hydrated rooms out of the history fetch entirely because they
+        // have 0 messages but historyComplete is also falsy, so the
+        // expression still fires, BUT then getDefaultHistory ran without
+        // a presence join. Now we use the same predicate as web (any
+        // real, non-pending message in the room counts as "loaded").
+        dispatch(setIsLoading({ loading: true, chatJID: activeRoomJID }));
+        getDefaultHistory();
+      } else {
+        dispatch(setIsLoading({ loading: false, chatJID: activeRoomJID }));
+      }
+    } else if (!roomsList?.[activeRoomJID]) {
+      initialPresenceAndHistory();
+    }
+
+    if (client && config?.defaultRooms) {
+      const allExist = config?.defaultRooms.every(
+        (room) => roomsList[room.jid] !== undefined
+      );
+      if (roomsList && !allExist) {
+        config?.defaultRooms.map(async (room) => {
+          client.presenceInRoomStanza(room.jid);
+        });
+        if (config?.newArch) {
+          // syncRooms(client, config);
+        } else {
+          client.getRoomsStanza();
+        }
+      }
+    }
+  }, [
+    activeRoomJID,
+    Object.keys(roomsList).length,
+    messageLength,
+    roomsList?.[activeRoomJID]?.messages?.length,
+  ]);
+};

package/src/hooks/useRoomState.tsx

@@ -0,0 +1,47 @@
+/** @format */
+
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '../roomStore';
+
+export const useRoomState = (roomJID?: string) => {
+  const room = useSelector((state: RootState) =>
+    roomJID ? state.rooms.rooms[roomJID] : undefined
+  );
+  const roomsList = useSelector((state: RootState) => state.rooms.rooms);
+  const activeRoomJID = useSelector(
+    (state: RootState) => state.rooms.activeRoomJID
+  );
+  const editAction = useSelector((state: RootState) => state.rooms.editAction);
+  const globalLoading = useSelector(
+    (state: RootState) => state.rooms.isLoading
+  );
+  const loading = useSelector((state: RootState) => {
+    const activeJID = state.rooms.activeRoomJID;
+    return activeJID ? state.rooms.rooms[activeJID]?.isLoading || false : false;
+  });
+  const loadingText = useSelector(
+    (state: RootState) => state.rooms.loadingText
+  );
+  const usersSet = useSelector((state: RootState) => state.rooms.usersSet);
+
+  const roomMessages = useMemo(
+    () =>
+      activeRoomJID && roomsList[activeRoomJID]
+        ? roomsList[activeRoomJID].messages || []
+        : [],
+    [roomsList, activeRoomJID]
+  );
+
+  return {
+    room,
+    roomsList,
+    activeRoomJID,
+    editAction,
+    globalLoading,
+    loadingText,
+    loading,
+    roomMessages,
+    usersSet,
+  };
+};

package/src/hooks/useRoomUrl.tsx

@@ -0,0 +1,41 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { setCurrentRoom } from '../roomStore/roomsSlice';
+import { IConfig, IRoom } from '../types/types';
+
+export const useRoomUrl = (
+  activeRoomJID: string,
+  roomsList: Record<string, IRoom>,
+  config: IConfig
+) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (
+      config?.setRoomJidInPath &&
+      activeRoomJID &&
+      typeof activeRoomJID === 'string'
+    ) {
+      const chatJidUrl = activeRoomJID.split('@')[0];
+
+      const searchParams = new URLSearchParams(window.location.search);
+      searchParams.set('chatId', chatJidUrl);
+
+      const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
+
+      window.history.pushState(null, '', newUrl);
+    } else if (!activeRoomJID && Object.values(roomsList).length > 0) {
+      dispatch(setCurrentRoom({ roomJID: roomsList[0]?.jid }));
+    }
+
+    return () => {
+      if (config?.setRoomJidInPath) {
+        const searchParams = new URLSearchParams(window.location.search);
+        searchParams.delete('chatId');
+
+        const newUrl = `${window.location.pathname}?${searchParams.toString()}`;
+        window.history.pushState(null, '', newUrl);
+      }
+    };
+  }, [activeRoomJID, roomsList?.length]);
+};

package/src/hooks/useSendMessage.tsx

@@ -0,0 +1,306 @@
+import { useCallback } from 'react';
+import { useXmppClient } from '../context/xmppProvider';
+import { useDispatch, useSelector } from 'react-redux';
+import { addRoomMessage, setEditAction } from '../roomStore/roomsSlice';
+import { uploadFile } from '../networking/api-requests/auth.api';
+import { RootState } from '../roomStore';
+import { useEventHandlers } from './useEventHandlers';
+import type { IConfig, IMessage } from '../types/types';
+
+export const useSendMessage = (_configOverride?: IConfig) => {
+  const { client } = useXmppClient();
+  const dispatch = useDispatch();
+
+  // Split selectors so each returns a primitive/stable reference — the
+  // single-object selector above caused a "returned a different result
+  // when called with the same parameters" warning and unnecessary
+  // rerenders on every redux update.
+  const user = useSelector((state: RootState) => state.chatSettingStore.user);
+  const config = useSelector(
+    (state: RootState) => state.chatSettingStore.config
+  );
+  const editAction = useSelector((state: RootState) => state.rooms.editAction);
+  const rooms = useSelector((state: RootState) => state.rooms.rooms);
+
+  const {
+    handleMessageSent,
+    handleMessageFailed,
+    handleMessageEdited,
+  } = useEventHandlers(config);
+
+  const sendMessage = useCallback(
+    async (
+      message: string,
+      activeRoomJID: string,
+      isReply?: boolean,
+      isChecked?: boolean,
+      mainMessage?: string
+    ) => {
+      if (editAction?.isEdit) {
+        try {
+          client?.editMessageStanza(
+            editAction.roomJid!,
+            editAction.messageId!,
+            message
+          );
+          handleMessageEdited({
+            messageId: editAction.messageId!,
+            newMessage: message,
+            roomJID: editAction.roomJid!,
+            user,
+          });
+        } catch (error) {
+          handleMessageFailed({
+            message,
+            roomJID: editAction.roomJid!,
+            error: error as Error,
+            messageType: 'text',
+          });
+        }
+        dispatch(setEditAction({ isEdit: false }));
+        return;
+      }
+
+      // Critical-send hint to the QoS scheduler.
+      client?.onCriticalSend?.(activeRoomJID);
+
+      // Optimistic pending render — push the message into redux
+      // immediately with `pending: true` so the bubble shows
+      // "sending..." while the stanza is in flight. The server echoes
+      // it back with the same id and insertMessageWithDelimiter
+      // dedupes by id and flips `pending: false` → DoubleTick renders.
+      // Without this, the user taps send and sees nothing for ~200ms
+      // until the echo lands, which feels broken.
+      const optimisticId = `send-text-message-${Date.now()}`;
+      const optimisticDate = new Date().toISOString();
+      const selfId =
+        (user as any)?.xmppUsername || (user as any)?.walletAddress || '';
+      const optimisticMessage: IMessage = {
+        id: optimisticId,
+        // Also set xmppId so the echo (which carries our outer stanza
+        // id as xmppId via getDataFromXml) can be matched and dedup'd
+        // by insertMessageWithDelimiter (`msg.xmppId === message.id`
+        // branch).
+        xmppId: optimisticId,
+        body: message,
+        roomJid: activeRoomJID,
+        date: optimisticDate,
+        pending: true,
+        isDeleted: false,
+        user: {
+          ...(user as any),
+          id: selfId,
+          name: `${user?.firstName || ''} ${user?.lastName || ''}`.trim() || selfId,
+        } as any,
+      } as IMessage;
+      if (!config?.disableSentLogic) {
+        dispatch(
+          addRoomMessage({ roomJID: activeRoomJID, message: optimisticMessage })
+        );
+      }
+
+      console.log('🔵 [useSendMessage] sending', {
+        room: activeRoomJID,
+        hasClient: !!client,
+        first: user?.firstName,
+        last: user?.lastName,
+        wallet: user?.walletAddress,
+        len: message?.length,
+        optimisticId,
+      });
+
+      try {
+        if (!client) {
+          throw new Error('No XMPP client');
+        }
+        // Pass the optimistic id as the stanza id so the server echoes
+        // it back with the same value — the reducer's dedupe lookup
+        // matches and the bubble flips from pending → delivered in-place
+        // (instead of rendering two copies, which is what happens when
+        // ids don't match).
+        client.sendMessage(
+          activeRoomJID,
+          user.firstName,
+          user.lastName,
+          '',
+          user.walletAddress,
+          message,
+          '',
+          isReply || false,
+          isChecked || false,
+          mainMessage || '',
+          optimisticId
+        );
+        await handleMessageSent({
+          message,
+          roomJID: activeRoomJID,
+          user,
+          messageType: 'text',
+        });
+      } catch (error) {
+        handleMessageFailed({
+          message,
+          roomJID: activeRoomJID,
+          error: error as Error,
+          messageType: 'text',
+        });
+      }
+    },
+    [editAction, client, user, dispatch, handleMessageSent, handleMessageEdited, handleMessageFailed]
+  );
+
+  const sendMedia = useCallback(
+    async (
+      data: any,
+      type: string,
+      activeRoomJID: string,
+      isReply?: boolean,
+      isChecked?: boolean,
+      mainMessage?: string
+    ) => {
+      const mediaData = new FormData();
+      mediaData.append('files', data);
+
+      client?.onCriticalSend?.(activeRoomJID);
+
+      // Optimistic pending bubble — same pattern as text send. Render
+      // a placeholder with `isMediafile: true` so MessageBubble shows
+      // a media-shaped pending tile while the upload + send is in
+      // flight; replaced in-place by the server echo via xmppId dedupe.
+      const optimisticId = `send-media-message-${Date.now()}`;
+      const optimisticDate = new Date().toISOString();
+      const selfId =
+        (user as any)?.xmppUsername || (user as any)?.walletAddress || '';
+      const placeholderMessage: IMessage = {
+        id: optimisticId,
+        xmppId: optimisticId,
+        body: 'media',
+        roomJid: activeRoomJID,
+        date: optimisticDate,
+        pending: true,
+        isDeleted: false,
+        isMediafile: 'true',
+        mimetype: type,
+        originalName: data?.name,
+        user: {
+          ...(user as any),
+          id: selfId,
+          name: `${user?.firstName || ''} ${user?.lastName || ''}`.trim() || selfId,
+        } as any,
+      } as IMessage;
+      if (!config?.disableSentLogic) {
+        dispatch(
+          addRoomMessage({ roomJID: activeRoomJID, message: placeholderMessage })
+        );
+      }
+
+      try {
+        const response = await uploadFile(mediaData);
+        response.data.results.forEach(async (item: any) => {
+          const payload = {
+            firstName: user.firstName,
+            lastName: user.lastName,
+            walletAddress: user.walletAddress,
+            createdAt: item.createdAt,
+            expiresAt: item.expiresAt,
+            fileName: item.filename,
+            isVisible: item?.isVisible,
+            location: item.location,
+            locationPreview: item.locationPreview,
+            mimetype: item.mimetype,
+            originalName: item?.originalname,
+            ownerKey: item?.ownerKey,
+            size: item.size,
+            duration: item?.duration,
+            updatedAt: item?.updatedAt,
+            userId: item?.userId,
+            attachmentId: item?._id,
+            wrappable: true,
+            roomJid: activeRoomJID,
+            showInChannel: isChecked || false,
+            isReply: isReply || false,
+            mainMessage: mainMessage || '',
+            isPrivate: item?.isPrivate,
+            __v: item.__v,
+          };
+          // Pass optimisticId as the stanza id so the echo's outer
+          // id matches our placeholder's xmppId and dedup'es in place.
+          client?.sendMediaMessageStanza(activeRoomJID, payload, optimisticId);
+          await handleMessageSent({
+            message: item.location || '',
+            roomJID: activeRoomJID,
+            user,
+            messageType: 'media',
+            metadata: payload,
+          });
+        });
+      } catch (error) {
+        console.error('Media upload failed', error);
+        handleMessageFailed({
+          message: '',
+          roomJID: activeRoomJID,
+          error: error as Error,
+          messageType: 'media',
+        });
+      }
+    },
+    [client, user, handleMessageSent, handleMessageFailed]
+  );
+
+  // ChatRoom/ThreadWrapper consume this as the "edit branch" of send.
+  // It mirrors the edit path inside `sendMessage` so callers can wire it
+  // up directly when `editAction.isEdit` is true.
+  const sendEditMessage = useCallback(
+    async (message: string, _activeRoomJID?: string) => {
+      if (!editAction?.isEdit || !editAction.roomJid || !editAction.messageId) {
+        return;
+      }
+      try {
+        client?.editMessageStanza(
+          editAction.roomJid,
+          editAction.messageId,
+          message
+        );
+        handleMessageEdited({
+          messageId: editAction.messageId,
+          newMessage: message,
+          roomJID: editAction.roomJid,
+          user,
+        });
+      } catch (error) {
+        handleMessageFailed({
+          message,
+          roomJID: editAction.roomJid,
+          error: error as Error,
+          messageType: 'text',
+        });
+      }
+      dispatch(setEditAction({ isEdit: false }));
+    },
+    [client, editAction, user, dispatch, handleMessageEdited, handleMessageFailed]
+  );
+
+  // True when the most recent message in the given room is from the
+  // current user and still in a pending state (i.e. not yet ack'd by
+  // the server). Used by SendInput to disable rapid re-sends.
+  const isLastMessageFromUserAndProcessing = useCallback(
+    (roomJID: string): boolean => {
+      if (!roomJID) {return false;}
+      const msgs = rooms?.[roomJID]?.messages;
+      if (!msgs || msgs.length === 0) {return false;}
+      const last = msgs[msgs.length - 1];
+      if (!last?.pending) {return false;}
+      const selfId = user?.xmppUsername || user?.walletAddress;
+      if (!selfId) {return false;}
+      return last.user?.id === selfId;
+    },
+    [rooms, user?.xmppUsername, user?.walletAddress]
+  );
+
+  return {
+    sendMessage,
+    sendMedia,
+    sendEditMessage,
+    isLastMessageFromUserAndProcessing,
+  };
+};

package/src/hooks/useUnreadMessagesCounter.ts

@@ -0,0 +1,55 @@
+import { useSyncExternalStore } from 'react';
+import { IRoom } from '../types/types';
+import { RootState, store } from '../roomStore';
+
+interface UnreadMessagesMap {
+  [roomJid: string]: number;
+}
+
+interface UnreadMessagesStats {
+  hasUnread: boolean;
+  totalCount: number;
+  unreadByRoom: UnreadMessagesMap;
+}
+
+export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
+  const subscribe = (callback: () => void) => {
+    const unsubscribe = store.subscribe(() => {
+      const state: RootState = store.getState();
+      const rooms = state.rooms?.rooms;
+
+      if (rooms) {
+        Object.entries(rooms).forEach(([roomJid, room]: [string, IRoom]) => {
+          if (room.unreadMessages !== undefined) {
+            callback();
+          }
+        });
+      }
+    });
+    return unsubscribe;
+  };
+
+  const rooms = useSyncExternalStore(
+    subscribe,
+    () => store.getState().rooms.rooms
+  );
+
+  const unreadByRoom: UnreadMessagesMap = {};
+  let totalCount = 0;
+
+  Object.entries(rooms).forEach(([roomJid, room]: [string, IRoom]) => {
+    const unreadCount = room.unreadMessages || 0;
+    if (unreadCount > 0) {
+      unreadByRoom[roomJid] = unreadCount;
+      totalCount += unreadCount;
+    }
+  });
+
+  return {
+    hasUnread: totalCount > 0,
+    totalCount,
+    unreadByRoom,
+  };
+};
+
+export { useUnreadMessagesCounter as useUnread };