@ethora/chat-component-rn 26.5.21 → 26.6.10

package/src/helpers/createUserNameFromSetUser.ts

@@ -1,5 +1,11 @@
-import { RoomMember } from '../types/types';
+import { IMessage, RoomMember } from '../types/types';
 
+/**
+ * Cache-only lookup. Returns the literal "Deleted User" as a MISS sentinel
+ * when `usersSet` has no entry for `userId` yet, callers that want a
+ * better fallback (e.g. resolveSenderDisplayName below) check for that
+ * exact string rather than treating it as a real name.
+ */
 export const createUserNameFromSetUser = (
   usersSet: Record<string, RoomMember>,
   userId: string
@@ -10,6 +16,66 @@ export const createUserNameFromSetUser = (
 
   const firstName = user.firstName?.trim() || '';
   const lastName = user.lastName?.trim() || '';
+  // REST-loaded members carry firstName/lastName; XMPP-roster-only
+  // members (no REST match yet) carry just the roster `name` attr —
+  // fall back to that before giving up and returning the raw id.
+  const bareName = user.name?.trim() || '';
 
-  return `${firstName} ${lastName}`.trim() || userId;
+  return `${firstName} ${lastName}`.trim() || bareName || userId;
+};
+
+/**
+ * The sender's display name, resolved WITHOUT depending on `usersSet`
+ * having already been hydrated.
+ *
+ * `usersSet` is populated by a separate fetch (member list / presence) that
+ * can still be in flight when a message arrives, most reliably right after
+ * reconnect, when a burst of catch-up messages can land before that fetch
+ * resolves. A cache-only lookup shows the literal "Deleted User" for every
+ * one of those messages, even though the sender is very much not deleted.
+ * On mobile this is the common case, not the rare one: every return from
+ * background reconnects.
+ *
+ * The message itself already carries the sender's name on the wire: every
+ * client that sends through this SDK stamps `senderFirstName` /
+ * `senderLastName` / `fullName` onto the outgoing stanza's `<data>` element
+ * (see sendTextMessage.xmpp.ts / sendTextMessageWithTranslateTag.xmpp.ts),
+ * and createMessageFromXml spreads those onto the top-level message object.
+ * Preferring that over the cache removes the timing dependency entirely for
+ * the common case, and "Deleted User" becomes what it should have always
+ * been: a rare last resort, not "usersSet hasn't loaded yet".
+ */
+export const resolveSenderDisplayName = (
+  message: Pick<IMessage, 'user'> & {
+    fullName?: string;
+    senderFirstName?: string;
+    senderLastName?: string;
+  },
+  usersSet: Record<string, RoomMember>
+): string => {
+  const rawUserId = String(message?.user?.id || '');
+  const localUserId = rawUserId.split('@')[0];
+  const currentNameRaw = String(message?.user?.name || '').trim();
+  // A previously-resolved "Deleted User" is itself a miss sentinel, not a
+  // real name, don't let it short-circuit the fallback chain below.
+  const currentName = currentNameRaw === 'Deleted User' ? '' : currentNameRaw;
+
+  const dataFullName = String(message?.fullName || '').trim();
+  const dataFirst = String(message?.senderFirstName || '').trim();
+  const dataLast = String(message?.senderLastName || '').trim();
+  const composedFromData = dataFullName || `${dataFirst} ${dataLast}`.trim();
+
+  const usersSetName = createUserNameFromSetUser(usersSet, localUserId);
+  const usersSetNameAlt = createUserNameFromSetUser(usersSet, rawUserId);
+  const isUsersSetUseful = (name: string) => !!name && name !== 'Deleted User';
+
+  return (
+    currentName ||
+    (isUsersSetUseful(usersSetName) && usersSetName) ||
+    (isUsersSetUseful(usersSetNameAlt) && usersSetNameAlt) ||
+    composedFromData ||
+    localUserId ||
+    rawUserId ||
+    'Deleted User'
+  );
 };

package/src/helpers/getDataFromXml.ts

@@ -2,6 +2,38 @@ import { Element } from 'ltx';
 import { Iso639_1Codes, IUser } from '../types/types';
 import { transformArrayToObject } from './transformTranslatations';
 
+// Tolerant JSON parse: a malformed `translations` attr must not reject the
+// whole stanza (which would silently drop the message). Mirrors the web
+// SDK's safeJsonParse.
+const safeJsonParse = <T,>(value: unknown, fallback: T): T => {
+  if (typeof value !== 'string' || !value) {return fallback;}
+  try {
+    return JSON.parse(value) as T;
+  } catch {
+    return fallback;
+  }
+};
+
+// Keep only well-formed translation entries (drops partial/garbage items),
+// same shape guard the web SDK applies before transformArrayToObject.
+const normalizeTranslations = (value: unknown) =>
+  Array.isArray(value)
+    ? value.filter(
+        (
+          item
+        ): item is {
+          translatedText: string;
+          language: string;
+          languageName: string;
+        } =>
+          !!item &&
+          typeof item === 'object' &&
+          typeof (item as any).translatedText === 'string' &&
+          typeof (item as any).language === 'string' &&
+          typeof (item as any).languageName === 'string'
+      )
+    : [];
+
 const extractTimestamp = (str: string, stanza?: any): string | null => {
   if (!str) {return null;}
   if (typeof str !== 'string') {
@@ -43,12 +75,16 @@ export const getDataFromXml = async (stanza: Element): Promise<DataXml | undefin
 
   const body = fullData?.getChild('body')?.getText() || undefined;
   const deleted = !!fullData?.getChild('deleted');
+  const translationPayload = safeJsonParse<{ translates?: unknown[] }>(
+    fullData?.getChild('translations')?.attrs?.value,
+    {}
+  );
   const translations = fullData?.getChild('translations')?.attrs?.value
-    ? transformArrayToObject(
-        JSON.parse(fullData.getChild('translations')!.attrs.value).translates
-      )
+    ? transformArrayToObject(normalizeTranslations(translationPayload.translates))
     : undefined;
-  const langSource = fullData?.getChild('translate')?.attrs?.source;
+  const langSource = fullData?.getChild('translate')?.attrs?.source as
+    | Iso639_1Codes
+    | undefined;
   const numericPart = /\d{13,}/.exec(id || '')?.[0];
   const date = numericPart
     ? new Date(+numericPart.slice(0, 13)).toISOString()

package/src/helpers/incomingCallFromPush.ts

@@ -0,0 +1,83 @@
+import { store } from '../roomStore';
+import { setIncomingCallToken } from '../roomStore/callSlice';
+import { isCallPush, parseCallPush } from './callPush';
+
+/**
+ * Turn an incoming-call push into a ringing call.
+ *
+ * On mobile the XMPP socket dies whenever the OS backgrounds or kills the
+ * app, and the `call-token` stanza that normally opens the ring screen is
+ * lost with it. The backend also delivers the call as a data push, so this
+ * is the path every call takes when the app was not in the foreground.
+ *
+ * Returns true when the payload WAS a call push (whether or not it could
+ * be rung), so the caller knows to stop and not also show it as a chat
+ * notification. A user should never get a "new message: call-state" toast.
+ */
+export const handleCallPush = (
+  data: Record<string, any> | null | undefined
+): boolean => {
+  if (!isCallPush(data)) {
+    return false;
+  }
+
+  const parsed = parseCallPush(data);
+  const state = store.getState();
+
+  // Calls off in this deployment: swallow the push rather than ringing a
+  // screen the host never opted into.
+  if (state.chatSettingStore.config?.videoCalls?.enabled !== true) {
+    return true;
+  }
+
+  // Already ringing or in this exact call (the push raced the stanza, or
+  // two pushes arrived). Re-dispatching would reset startedAt and restart
+  // the ring, so leave the existing call alone.
+  const current = state.call;
+  if (current.phase !== 'idle') {
+    const sameCall =
+      (!!parsed.callId && parsed.callId === current.callId) ||
+      (!!parsed.roomBareName && parsed.roomBareName === current.roomBareName);
+    if (sameCall || current.phase === 'in-call') {
+      return true;
+    }
+  }
+
+  // Without a LiveKit token there is nothing to accept: the push is only
+  // an alert. Ringing anyway would give the user an Accept button that
+  // cannot work, so treat it as handled and let the stanza (once the
+  // socket is back up) open the real ring screen.
+  if (!parsed.token) {
+    return true;
+  }
+
+  // Resolve the full room JID from the local room map. The push carries
+  // the bare name; callSlice and the hangup signal both want the JID.
+  const rooms = state.rooms.rooms || {};
+  const resolved = Object.values(rooms).find(
+    (room: any) =>
+      (room?.jid || '').split('@')[0] === parsed.roomBareName ||
+      room?.jid === parsed.roomRef
+  ) as { jid?: string; name?: string } | undefined;
+
+  const roomJid =
+    resolved?.jid ||
+    (parsed.roomRef && parsed.roomRef.includes('@') ? parsed.roomRef : '');
+  if (!roomJid) {
+    return true;
+  }
+
+  store.dispatch(
+    setIncomingCallToken({
+      roomJid,
+      roomName: parsed.callerName || resolved?.name || null,
+      roomBareName: parsed.roomBareName,
+      token: parsed.token,
+      kind: parsed.kind,
+      callId: parsed.callId,
+      peerXmppUsername: parsed.callerXmppUsername,
+    })
+  );
+
+  return true;
+};

package/src/helpers/insertMessageWithDelimiter.ts

@@ -71,20 +71,38 @@ export function insertMessageWithDelimiter(
         isDateAfter(msg.date?.toString() ?? '', lastViewedTimestamp.toString())
       );
 
-        if (delimiterIndex !== -1) {
-          roomMessages.splice(delimiterIndex, 0, {
-            id: 'delimiter-new',
-            user: {
+      if (delimiterIndex !== -1) {
+        // The divider's date is what ORDERS it: roomsSlice re-sorts every
+        // merged page by timestamp (see `byMs`), so a divider stamped with
+        // `new Date()` — i.e. now — sorted past every real message and
+        // rendered at the very bottom, BELOW the new messages it is
+        // supposed to introduce. Anchor it a hair before the first unread
+        // instead, which is where it belongs and where any later sort keeps
+        // it. Derived from that message rather than from
+        // lastViewedTimestamp so it works whatever format the caller passes.
+        const firstUnreadMs = Date.parse(
+          String(roomMessages[delimiterIndex]?.date ?? '')
+        );
+        const rawLastViewed = lastViewedTimestamp.toString();
+        const lastViewedMs =
+          Date.parse(rawLastViewed) || Number(rawLastViewed) || Date.now();
+        const anchorMs = Number.isFinite(firstUnreadMs)
+          ? firstUnreadMs - 1
+          : lastViewedMs;
+
+        roomMessages.splice(delimiterIndex, 0, {
+          id: 'delimiter-new',
+          user: {
             id: 'system',
             name: undefined,
             token: '',
             refreshToken: '',
           },
-          date: new Date().toString(),
-            body: 'New Messages',
-            roomJid: '',
-          });
-        }
+          date: new Date(anchorMs).toISOString(),
+          body: 'New Messages',
+          roomJid: '',
+        });
+      }
       }
   } else if (
     isDateBefore(newMessageDate.toString(), firstMessage?.date?.toString() ?? '')

package/src/helpers/isUnresolvedSenderId.ts

@@ -0,0 +1,25 @@
+/**
+ * Whether a resolved sender "name" is really just an unresolved id.
+ *
+ * The name chain ends at the sender's JID localpart when `usersSet` has no
+ * entry and the wire carried no name. For a real member that never happens
+ * for long — the REST roster fills the cache in. But some senders are not
+ * members at all: a broadcast posted by the app itself arrives with the
+ * ROOM's own id as its occupant resource (e.g.
+ * `646cc8dc96d4a4dc8f7b2f2d_67f6823cf5995841ba431f06`), so no roster will
+ * ever resolve it and the bubble ends up captioned with 50 characters of
+ * hex.
+ *
+ * Ethora ids are `<24-hex appId>_<24-hex objectId>`, which is what this
+ * matches. A raw objectId on its own is matched too, since some senders
+ * carry only that half.
+ */
+const ETHORA_ID = /^[0-9a-f]{24}(_[0-9a-f]{24})?$/i;
+
+export const isUnresolvedSenderId = (name?: string): boolean => {
+  const trimmed = String(name || '').trim();
+  if (!trimmed) {
+    return true;
+  }
+  return ETHORA_ID.test(trimmed);
+};

package/src/hooks/useChatSettingState.tsx

@@ -24,6 +24,9 @@ export const useChatSettingState = () => {
   const client = useSelector(
     (state: RootState) => state.chatSettingStore.client
   );
+  const translateMode = useSelector(
+    (state: RootState) => state.chatSettingStore.translateMode
+  );
 
   return {
     user,
@@ -33,6 +36,7 @@ export const useChatSettingState = () => {
     deleteModal,
     selectedUser,
     langSource,
+    translateMode,
     client,
   };
 };

package/src/hooks/useMessageTranslation.ts

@@ -0,0 +1,70 @@
+import { IMessage } from '../types/types';
+import { toBaseLanguage } from '../i18n/strings';
+
+export interface MessageTranslationState {
+  /** False when the message is already in the reader's language, or no
+   * translation is available — render the plain body, no quote. */
+  hasTranslation: boolean;
+  originalText: string;
+  /** Translation when hasTranslation, else the original — always safe to
+   * render directly. */
+  displayText: string;
+}
+
+// "42", "+1 (555) 123-4567", "3.14159" — text with no actual letters has
+// nothing to translate.
+const hasNoLetters = (text: string): boolean => !/\p{L}/u.test(text);
+
+/**
+ * Translation for ONE message, into the reader's language only. Ported
+ * verbatim from the web SDK (src/hooks/useMessageTranslation.ts).
+ *
+ * Pure and synchronous — no HTTP call. Every translation this client ever
+ * shows arrives over XMPP already: the sender tags outgoing messages with
+ * `<translate source="xx"/>` (see sendTextMessageWithTranslateTag) and
+ * whatever process attaches actual translations does so server-side,
+ * landing on `message.translations` when the stanza is parsed (see
+ * getDataFromXml). This function only ever reads that — it never calls a
+ * translation service itself, so there's nothing to fail when one isn't
+ * reachable, and nothing to await.
+ */
+export const useMessageTranslation = (
+  message: Pick<IMessage, 'body' | 'langSource' | 'translations'>,
+  readerLocale?: string,
+  enabled = true
+): MessageTranslationState => {
+  const originalText = message?.body || '';
+  const source = message?.langSource;
+  const targetBase = toBaseLanguage(readerLocale || 'en');
+  const sourceBase = toBaseLanguage(source);
+
+  // Nothing to do when we don't know the source language, the message is
+  // already in the reader's language (region ignored: en-US vs en-CA is the
+  // same language, not a translation job), or there's no actual text to
+  // translate (a bare number, a phone number, an emoji-only reaction).
+  const trimmedText = originalText.trim();
+  const needsTranslation =
+    enabled &&
+    !!trimmedText &&
+    !!source &&
+    sourceBase !== targetBase &&
+    !hasNoLetters(trimmedText);
+
+  const result = needsTranslation
+    ? message?.translations?.[readerLocale || '']?.translatedText ||
+      message?.translations?.[targetBase]?.translatedText
+    : undefined;
+
+  // A "translation" that's byte-identical to the original (mistagged
+  // langSource, a no-op from the source, matching proper nouns/numbers in
+  // otherwise-different text) is worse than nothing: it renders the same
+  // sentence twice. Treat identical-after-trim as "nothing to show".
+  const isRealTranslation =
+    !!result && result.trim() !== originalText.trim();
+
+  return {
+    hasTranslation: isRealTranslation,
+    originalText,
+    displayText: isRealTranslation ? (result as string) : originalText,
+  };
+};

package/src/hooks/usePushNotifications.ts

@@ -10,7 +10,8 @@ import { pushSubscriptionService } from '../services/pushSubscriptionService';
 import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '../roomStore';
 import { useLocalStorage } from './useLocalStorage';
-import { setCurrentRoom, setPendingNotificationJid } from '../roomStore/roomsSlice';
+import { setPendingNotificationJid } from '../roomStore/roomsSlice';
+import { handleCallPush } from '../helpers/incomingCallFromPush';
 
 export function usePushNotifications() {
   const [fcmToken, setFcmToken] = useState<string | null>(null);
@@ -22,7 +23,11 @@ export function usePushNotifications() {
   const { set, get } = useLocalStorage('fcmToken');
 
   const handleNotificationPress = (remoteMessage: any) => {
-    console.log('[usePushNotifications] Notification pressed:', JSON.stringify(remoteMessage, null, 2));
+    // Tapping a call notification (or launching the app from one) should
+    // land on the ring screen, not on the chat room.
+    if (handleCallPush(remoteMessage?.data)) {
+      return;
+    }
 
     const jid = remoteMessage?.data?.jid || remoteMessage?.data?.chatJid || remoteMessage?.jid;
 
@@ -60,9 +65,16 @@ export function usePushNotifications() {
     );
 
     const unsubscribeForeground = onForegroundMessage((message) => {
+      // Calls first: a call push must open the ring screen, never an
+      // "OK / Open" alert. handleCallPush returns true for anything
+      // call-shaped, so we bail before the chat-notification path.
+      if (handleCallPush(message?.data)) {
+        return;
+      }
+
       setNotification(message);
 
-      const { notification: notif, data } = message;
+      const { notification: notif } = message;
       if (notif) {
         Alert.alert(
           notif.title || 'Notification',

package/src/hooks/useSendMessage.tsx

@@ -70,6 +70,14 @@ export const useSendMessage = (_configOverride?: IConfig) => {
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
   );
+  // The sender's own language, driven by the header globe picker (or the
+  // host via config.translates.readerLocale). Declared on every outgoing
+  // message as `<translate source>` so the backend can translate it for
+  // readers in other languages (see sendTextMessageWithTranslateTagStanza).
+  // Mirrors the web SDK, which always sends through the translate-tag path.
+  const langSource = useSelector(
+    (state: RootState) => state.chatSettingStore.langSource
+  );
   const editAction = useSelector((state: RootState) => state.rooms.editAction);
   const rooms = useSelector((state: RootState) => state.rooms.rooms);
 
@@ -150,6 +158,10 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         date: optimisticDate,
         pending: true,
         isDeleted: false,
+        // Declare the sender's language on their own optimistic bubble so
+        // manual-mode readers see the Translate link on it too (parity with
+        // the web SDK, which stamps langSource on the optimistic message).
+        langSource: (langSource as any) || 'en',
         user: {
           ...(user as any),
           id: selfId,
@@ -208,7 +220,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         // reducer's dedupe matches and the bubble flips pending → delivered
         // in-place (rather than rendering a second copy).
         const replaySend = (c: any) =>
-          c.sendMessage(
+          c.sendTextMessageWithTranslateTagStanza(
             activeRoomJID,
             user.firstName,
             user.lastName,
@@ -219,6 +231,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
             isReply || false,
             isChecked || false,
             mainMessage || '',
+            (langSource as any) || 'en',
             optimisticId
           );
 
@@ -291,7 +304,7 @@ export const useSendMessage = (_configOverride?: IConfig) => {
         });
       }
     },
-    [editAction, client, user, dispatch, handleMessageSent, handleMessageEdited, handleMessageFailed, reduxStore]
+    [editAction, client, user, langSource, dispatch, handleMessageSent, handleMessageEdited, handleMessageFailed, reduxStore]
   );
 
   const sendMedia = useCallback(