@ethora/chat-component-rn 26.5.21 → 26.6.11

package/src/helpers/callLogMessage.ts

@@ -0,0 +1,174 @@
+import { IMessage } from '../types/types';
+
+// A server "call-state" stanza is emitted into the room when a call session
+// concludes (someone leaves the LiveKit room). It carries:
+//   type="call-state" callId="..." durationMs="<ms>"
+//   callerXmppUsername="<who started the call>" isSystemMessage="true"
+// We turn it into a friendly chat-log entry, Telegram/WhatsApp style:
+//   - durationMs > 0  -> "Outgoing call · 12 sec" / "Incoming call · 1 min"
+//   - durationMs == 0 -> "No answer" (we called)  / "Missed call" (they called)
+// Direction is derived from callerXmppUsername vs the logged-in user.
+
+export interface CallLogMeta {
+  callId: string;
+  direction: 'outgoing' | 'incoming';
+  durationMs: number;
+  missed: boolean;
+  kind: 'audio' | 'video';
+}
+
+export const isCallLogMessage = (message: unknown): boolean => {
+  const type = String((message as any)?.type || '').toLowerCase();
+  return type === 'call-state';
+};
+
+// Only a call-state that actually carries log metadata (a caller and/or a
+// duration) is worth rendering. Bare client-side signaling frames
+// (state=cancelled/declined/ended with no caller/duration) must NOT become
+// chat entries, they're real-time teardown only.
+export const callStateHasLogData = (attrs: Record<string, any>): boolean => {
+  if (!attrs) {return false;}
+  const hasCaller = !!String(attrs.callerXmppUsername || '').trim();
+  const hasDuration =
+    attrs.durationMs !== undefined &&
+    attrs.durationMs !== null &&
+    attrs.durationMs !== '';
+  return hasCaller || hasDuration;
+};
+
+export const formatCallDuration = (ms: number): string => {
+  const totalSeconds = Math.max(0, Math.round(ms / 1000));
+  if (totalSeconds < 60) {return `${totalSeconds} sec`;}
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (seconds === 0) {return `${minutes} min`;}
+  return `${minutes} min ${seconds} sec`;
+};
+
+export const transformCallLogMessage = (
+  message: IMessage,
+  selfXmppUsername: string
+): IMessage => {
+  if (!isCallLogMessage(message)) {return message;}
+
+  const raw = message as any;
+  const callerLocal = String(raw.callerXmppUsername || '')
+    .split('@')[0]
+    .trim();
+  const selfLocal = String(selfXmppUsername || '').split('@')[0].trim();
+  // When we know the caller, "outgoing" means we started it. With no
+  // caller info, default to incoming (safer label than claiming we dialed).
+  const isOutgoing = !!callerLocal && callerLocal === selfLocal;
+  const durationMs = Number(raw.durationMs || 0);
+  const kind: 'audio' | 'video' =
+    String(raw.kind || '').toLowerCase() === 'audio' ? 'audio' : 'video';
+
+  let body: string;
+  if (durationMs > 0) {
+    body = `${isOutgoing ? 'Outgoing' : 'Incoming'} call · ${formatCallDuration(durationMs)}`;
+  } else {
+    body = isOutgoing ? 'No answer' : 'Missed call';
+  }
+
+  const callLog: CallLogMeta = {
+    callId: String(raw.callId || raw.callid || '').trim(),
+    direction: isOutgoing ? 'outgoing' : 'incoming',
+    durationMs,
+    missed: durationMs === 0,
+    kind,
+  };
+
+  return {
+    ...message,
+    body,
+    // Render through the existing centered SystemMessage pipeline.
+    isSystemMessage: 'true',
+    callLog,
+  } as IMessage;
+};
+
+// Build a "call ended" log entry locally (client-side) when a call finishes.
+// The authoritative entry is a SERVER `call-state` broadcast, but that isn't
+// guaranteed to arrive (see header comment). This fallback keeps the chat log
+// working regardless. It's deduplicated against any server copy in
+// `addRoomMessage` by `callLog.callId` (the entry with the largest duration
+// wins), so if the server does broadcast, the two collapse into one.
+export const buildLocalCallLogMessage = (params: {
+  callId: string;
+  direction: 'outgoing' | 'incoming';
+  durationMs: number;
+  kind: 'audio' | 'video';
+  selfXmppUsername: string;
+}): IMessage => {
+  const { callId, direction, durationMs, kind, selfXmppUsername } = params;
+  const isOutgoing = direction === 'outgoing';
+  const safeDuration = Math.max(0, Math.round(durationMs || 0));
+
+  let body: string;
+  if (safeDuration > 0) {
+    body = `${isOutgoing ? 'Outgoing' : 'Incoming'} call · ${formatCallDuration(safeDuration)}`;
+  } else {
+    body = isOutgoing ? 'No answer' : 'Missed call';
+  }
+
+  const callLog: CallLogMeta = {
+    callId,
+    direction,
+    durationMs: safeDuration,
+    missed: safeDuration === 0,
+    kind,
+  };
+
+  return {
+    // Deterministic id so a re-fire for the same call collapses in place.
+    id: callId ? `calllog-${callId}` : `calllog-${Date.now()}`,
+    body,
+    date: new Date().toISOString(),
+    isSystemMessage: 'true',
+    type: 'call-state',
+    callLog,
+    user: { id: selfXmppUsername },
+  } as unknown as IMessage;
+};
+
+/**
+ * The label for a call-log entry, built at RENDER time from the callLog
+ * meta rather than read off `message.body`.
+ *
+ * transformCallLogMessage bakes an English sentence into `body` the moment
+ * the stanza arrives, which freezes the language: switch to French and
+ * every call log you already received stays English forever, because the
+ * text is data by then, not a rendering. The meta (direction/duration/
+ * missed) is the actual fact, the sentence is a view of it, so it belongs
+ * where the view is. `body` stays as the fallback for entries received
+ * before this existed, and for the notification/room-list preview paths
+ * that only have the raw message.
+ */
+export const formatCallLogLabel = (
+  callLog: CallLogMeta | undefined,
+  t: (key: string, vars?: Record<string, string | number>) => string,
+  fallbackBody = ''
+): string => {
+  if (!callLog) {return fallbackBody;}
+
+  if (!callLog.durationMs || callLog.durationMs <= 0) {
+    return callLog.direction === 'outgoing'
+      ? t('call.noAnswer')
+      : t('call.missed');
+  }
+
+  const totalSeconds = Math.max(0, Math.round(callLog.durationMs / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const duration =
+    totalSeconds < 60
+      ? t('call.durationSec', { n: totalSeconds })
+      : seconds === 0
+        ? t('call.durationMin', { n: minutes })
+        : t('call.durationMinSec', { m: minutes, s: seconds });
+
+  const direction =
+    callLog.direction === 'outgoing' ? t('call.outgoing') : t('call.incoming');
+
+  return `${direction} · ${duration}`;
+};

package/src/helpers/callPush.ts

@@ -0,0 +1,90 @@
+// Recognise and parse an *incoming call* push notification.
+//
+// Calls normally ring via a live XMPP `call-token` stanza, which only arrives
+// while the socket is connected. On mobile the socket is dead whenever the OS
+// backgrounds or kills the app, so the backend also delivers the call over
+// push, in the same `data`-payload format as message pushes. This helper lets
+// the push layer tell a call push apart from a chat push and pull the call
+// fields out, tolerating the field-name variations backends tend to use.
+
+export interface ParsedCallPush {
+  callId: string | null;
+  /** LiveKit token, if the push carried one (lets us ring + accept offline). */
+  token: string | null;
+  kind: 'audio' | 'video';
+  /** Bare room name (JID localpart) the call belongs to. */
+  roomBareName: string | null;
+  /** Raw room reference from the payload (full JID or bare name). */
+  roomRef: string | null;
+  /** Display name for the ring screen (caller). */
+  callerName: string | null;
+  /** Caller's xmpp localpart, when provided. */
+  callerXmppUsername: string | null;
+}
+
+const pick = (data: Record<string, any>, keys: string[]): string => {
+  for (const k of keys) {
+    const v = data?.[k];
+    if (v !== undefined && v !== null && String(v).trim() !== '') {
+      return String(v).trim();
+    }
+  }
+  return '';
+};
+
+/**
+ * True when a push `data` payload represents an incoming call. Matches on an
+ * explicit call marker (`type`/`pushType`/`category`/`event` === "call"-ish)
+ * or on a callId paired with a call-specific field, so a normal message push
+ * is never misread as a call.
+ */
+export const isCallPush = (
+  data: Record<string, any> | null | undefined
+): boolean => {
+  if (!data) {return false;}
+  const marker = pick(data, [
+    'type',
+    'pushType',
+    'category',
+    'messageType',
+    'event',
+  ]).toLowerCase();
+  if (
+    marker === 'call' ||
+    marker === 'incoming-call' ||
+    marker === 'call-token' ||
+    marker === 'call-invite'
+  ) {
+    return true;
+  }
+  const callId = pick(data, ['callId', 'callid', 'callID']);
+  const hasCallField =
+    !!pick(data, ['callToken', 'livekitToken']) ||
+    !!pick(data, ['callKind']) ||
+    pick(data, ['kind']).toLowerCase() === 'audio' ||
+    pick(data, ['kind']).toLowerCase() === 'video';
+  return !!callId && hasCallField;
+};
+
+export const parseCallPush = (
+  data: Record<string, any> | null | undefined
+): ParsedCallPush => {
+  const d = data || {};
+  const roomRef =
+    pick(d, ['callRoom', 'room', 'roomJid', 'jid', 'chatId']) || null;
+  const roomBareName = roomRef ? roomRef.split('@')[0] || roomRef : null;
+  const kindRaw = pick(d, ['callKind', 'kind']).toLowerCase();
+  return {
+    callId: pick(d, ['callId', 'callid', 'callID']) || null,
+    token: pick(d, ['callToken', 'livekitToken', 'token']) || null,
+    kind: kindRaw === 'audio' ? 'audio' : 'video',
+    roomBareName,
+    roomRef,
+    callerName:
+      pick(d, ['callerName', 'callerDisplayName', 'senderName', 'title']) ||
+      null,
+    callerXmppUsername:
+      pick(d, ['callerXmppUsername', 'callerUsername', 'userJid', 'senderJid'])
+        .split('@')[0] || null,
+  };
+};

package/src/helpers/constants/LANGUAGE_OPTIONS.ts

@@ -5,10 +5,25 @@ type LanguageOption = {
   id: Iso639_1Codes;
 };
 
+/**
+ * Languages the in-chat globe picker offers.
+ *
+ * Names are AUTONYMS (each language written in itself), which is what
+ * every mainstream language picker does: a reader who only speaks French
+ * can find "Français" but not "French". Ids carry the region because the
+ * deployment's readers are Canadian and US, and the region is forwarded to
+ * the translation service so it can tell fr-CA from fr-FR. Base-language
+ * lookups (i18n tables, Translate-button visibility) strip it via
+ * toBaseLanguage, so both forms interoperate.
+ *
+ * Commented-out entries still have full string tables in i18n/strings.ts,
+ * they're just not offered to readers in the current deployment.
+ */
 export const LANGUAGE_OPTIONS: LanguageOption[] = [
-  { name: 'English', id: 'en' },
-  { name: 'Spanish', id: 'es' },
-  { name: 'Portuguese', id: 'pt' },
-  { name: 'Haitian Creole', id: 'ht' },
-  { name: 'Chinese', id: 'zh' },
+  { name: 'English', id: 'en-CA' },
+  { name: 'Español', id: 'es-US' },
+  { name: 'Français', id: 'fr-CA' },
+  // { name: 'Português', id: 'pt' },
+  // { name: 'Kreyòl ayisyen', id: 'ht' },
+  // { name: '中文', id: 'zh' },
 ];

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,
   };
 };