@ethora/chat-component-rn 26.5.21 → 26.6.11

package/src/i18n/useT.ts

@@ -0,0 +1,56 @@
+import { useCallback, useMemo } from 'react';
+import { useChatSettingState } from '../hooks/useChatSettingState';
+import { interpolate, resolveStringTable } from './strings';
+
+/**
+ * UI translation hook. Reads the active locale + host overrides from
+ * `config.i18n` and returns a `t(key, vars?)` function.
+ *
+ *   const t = useT();
+ *   <SearchInput placeholder={t('search.placeholder')} />
+ *   <span>{t('presence.onlineCount', { count })}</span>
+ *
+ * Locale resolves to the base language for captions (region is only used for
+ * message translation). Missing keys fall back to English, then to the raw
+ * key, so nothing ever renders blank.
+ *
+ * When the host doesn't set `config.i18n.locale` explicitly, this falls
+ * back to `langSource` - the same reader-language state the in-chat globe
+ * picker (LanguageSelectorButton) and `config.translates.readerLocale`
+ * drive (see useChatWrapperInit's resolveExternalReaderLocaleLangSource).
+ * So picking a language in the chat changes both message translations AND
+ * static captions together, as one language switch, unless the host is
+ * explicitly managing UI locale separately via `config.i18n.locale`.
+ */
+/**
+ * The locale the UI is currently in, resolved by the same rule useT uses
+ * (explicit `config.i18n.locale`, else the reader's `langSource`).
+ *
+ * For anything Intl already localises - dates, numbers, relative times -
+ * where you need the locale itself rather than a string from the table.
+ * Without it components reach for a hardcoded 'en-US' and quietly render
+ * American dates under a Chinese UI (DateLabel did exactly that).
+ * Undefined means "no explicit choice", which Intl reads as the browser's
+ * own locale - the right default.
+ */
+export const useUiLocale = (): string | undefined => {
+  const { config, langSource } = useChatSettingState();
+  return config?.i18n?.locale || langSource || undefined;
+};
+
+export const useT = () => {
+  const { config, langSource } = useChatSettingState();
+  const locale = config?.i18n?.locale || langSource;
+  const overrides = config?.i18n?.strings;
+
+  const table = useMemo(
+    () => resolveStringTable(locale, overrides),
+    [locale, overrides]
+  );
+
+  return useCallback(
+    (key: string, vars?: Record<string, string | number>): string =>
+      interpolate(table[key] ?? key, vars),
+    [table]
+  );
+};

package/src/main.ts

@@ -32,9 +32,22 @@ export { useChatRoomFocus } from './hooks/useChatRoomFocus';
 export { logoutService } from './hooks/useLogout';
 export { useQRCodeChat, handleQRChatId } from './hooks/useQRCodeChatHandler';
 export { resendMessage } from './utils/resendMessage';
-// Font loader — exposed so hosts can also load the font outside <Chat> if needed.
+// Font loader, exposed so hosts can also load the font outside <Chat> if needed.
 export { useChatFonts } from './hooks/useChatFonts';
 
+// Static UI i18n. `useT` is the in-component hook; `translateKey` is the
+// one-shot for helpers outside React. Hosts extend or override any caption
+// through `config.i18n.strings`, keyed by the same keys BUILTIN_STRINGS uses.
+export { useT, useUiLocale } from './i18n/useT';
+export {
+  BUILTIN_STRINGS,
+  DEFAULT_UI_LANGUAGE,
+  resolveStringTable,
+  toBaseLanguage,
+  translateKey,
+} from './i18n/strings';
+export type { UiStringTable } from './i18n/strings';
+
 // Public types — needed so consumers can type their `config` prop and
 // any event handlers they pass in.
 export type {
@@ -48,4 +61,8 @@ export type {
   TypographyConfig,
   RNFontSource,
   ChatTextStyle,
+  VideoCallsConfig,
+  VideoCallIcons,
 } from './types/types';
+export type { Iso639_1Codes } from './types/models/language.model';
+export type { TranslateMode } from './utils/translateModePolicy';

package/src/networking/api-requests/auth.api.ts

@@ -144,55 +144,90 @@ export function uploadFile(formData: FormData) {
   });
 }
 
-export async function uploadFileViaFetch(formData: FormData): Promise<{ data: any }> {
+const UPLOAD_PATH = '/files/';
+
+/**
+ * Multipart upload of a picked file, sent over `XMLHttpRequest`.
+ *
+ * The transport matters here, and both obvious alternatives are wrong:
+ *
+ *   - `fetch`. Expo SDK 54 shipped a WinterCG-compliant fetch and SDK 57
+ *     installs it as the GLOBAL fetch. It accepts only `Blob` / `File` /
+ *     string form parts, so React Native's own `{ uri, type, name }` part
+ *     — which is exactly what an image/document picker hands us — is
+ *     rejected with "Unsupported FormDataPart implementation", surfacing
+ *     to the caller as ERR_NETWORK. A host can set
+ *     `EXPO_PUBLIC_USE_RN_FETCH=1`, but that opts their whole app out of
+ *     Expo's fetch just to satisfy this SDK; not a cost we get to impose
+ *     on a consumer.
+ *   - axios. It forces its own `Content-Type: multipart/form-data`
+ *     WITHOUT a boundary, so the server mis-parses one file as many and
+ *     answers HTTP 413 TOO_MANY_FILES (bug #10 — this is why the upload
+ *     was moved off axios in the first place).
+ *
+ * `XMLHttpRequest` avoids both. Expo replaces `fetch`, not `XHR`, so the
+ * request still goes through React Native's native networking module,
+ * which understands the `{ uri, type, name }` part, streams the file
+ * straight from disk (a 50MB video never lands in JS memory) and writes
+ * its own `Content-Type` with a valid boundary — which is precisely why
+ * we must NOT set that header ourselves below.
+ */
+export function uploadFileMultipart(formData: FormData): Promise<{ data: any }> {
   const token = store.getState().chatSettingStore?.user?.token ?? '';
   const baseUrl = getCurrentBaseURL();
-  const url = `${baseUrl.replace(/\/$/, '')}/files/`;
+  const url = `${baseUrl.replace(/\/$/, '')}${UPLOAD_PATH}`;
 
-  pushLog('http', `→ POST ${url} (fetch)`, {
+  pushLog('http', `→ POST ${url} (xhr)`, {
     headers: { Authorization: token ? token.slice(0, 16) + '…' : '[empty]', Accept: '*/*' },
   });
 
-  let res: Response;
-  try {
-    res = await fetch(url, {
-      method: 'POST',
-      headers: {
-        Authorization: token,
-        Accept: '*/*',
-      },
-      body: formData as any,
-    });
-  } catch (e: any) {
-    pushLog('http', `← ERR fetch /files/`, {
-      name: e?.name,
-      message: e?.message,
-      stack: e?.stack,
-    });
-    const err: any = new Error(e?.message || 'Network request failed');
-    err.code = 'ERR_NETWORK';
-    err.cause = e;
-    err.config = { url: '/files/' };
-    throw err;
-  }
-
-  if (!res.ok) {
-    let body: any = null;
-    try {
-      body = await res.json();
-    } catch {
-      try { body = await res.text(); } catch { body = null; }
-    }
-    pushLog('http', `← ${res.status} POST /files/ (fetch)`, body);
-    const err: any = new Error(`Upload failed: ${res.status}`);
-    err.response = { status: res.status, statusText: res.statusText, data: body };
-    err.config = { url: '/files/' };
-    throw err;
-  }
-
-  const data = await res.json();
-  pushLog('http', `← ${res.status} POST /files/ (fetch)`, {
-    resultsCount: Array.isArray(data?.results) ? data.results.length : 'n/a',
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+
+    const failNetwork = (reason: string) => {
+      pushLog('http', `← ERR xhr ${UPLOAD_PATH}`, { reason });
+      const err: any = new Error(reason);
+      err.code = 'ERR_NETWORK';
+      err.config = { url: UPLOAD_PATH };
+      reject(err);
+    };
+
+    xhr.onload = () => {
+      const status = xhr.status;
+      let body: any = null;
+      try {
+        body = JSON.parse(xhr.responseText);
+      } catch {
+        body = xhr.responseText || null;
+      }
+
+      if (status < 200 || status >= 300) {
+        pushLog('http', `← ${status} POST ${UPLOAD_PATH} (xhr)`, body);
+        const err: any = new Error(`Upload failed: ${status}`);
+        // Shaped like an axios error so callers' `err.response.status`
+        // checks keep working — notably useSendMessage's retry with the
+        // singular "file" field on 500.
+        err.response = { status, statusText: xhr.statusText, data: body };
+        err.config = { url: UPLOAD_PATH };
+        reject(err);
+        return;
+      }
+
+      pushLog('http', `← ${status} POST ${UPLOAD_PATH} (xhr)`, {
+        resultsCount: Array.isArray(body?.results) ? body.results.length : 'n/a',
+      });
+      resolve({ data: body });
+    };
+
+    xhr.onerror = () => failNetwork('Network request failed');
+    xhr.ontimeout = () => failNetwork('Upload timed out');
+    xhr.onabort = () => failNetwork('Upload aborted');
+
+    xhr.open('POST', url);
+    xhr.setRequestHeader('Authorization', token);
+    xhr.setRequestHeader('Accept', '*/*');
+    // Deliberately no Content-Type — see the note above: RN fills it in
+    // along with the multipart boundary it generated.
+    xhr.send(formData as any);
   });
-  return { data };
 }

package/src/networking/api-requests/push.api.ts

@@ -2,10 +2,38 @@ import axios from 'axios';
 import { Platform } from 'react-native';
 import { store } from '../../roomStore';
 
-const PUSH_API_URL = 'https://push.ethoradev.com/api/v1';
+// Both of these used to be hardcoded to the ethoradev environment
+// (push.ethoradev.com, @xmpp.ethoradev.com). That is a development
+// deployment: shipping it inside the SDK meant every host app, including
+// production ones, registered its device against dev infrastructure and
+// then quietly received no pushes. They are resolved from the host's own
+// config now, with the production cluster as the fallback.
+const DEFAULT_PUSH_API_URL = 'https://push.chat.ethora.com/api/v1';
+const DEFAULT_XMPP_HOST = 'xmpp.chat.ethora.com';
+
+/**
+ * Push service base URL. `config.pushNotifications.apiUrl` wins, so a
+ * self-hosted or enterprise deployment can point at its own service
+ * without forking the SDK.
+ */
+const resolvePushApiUrl = (): string => {
+  const config = store.getState().chatSettingStore?.config;
+  return (
+    (config?.pushNotifications?.apiUrl || '').trim() || DEFAULT_PUSH_API_URL
+  );
+};
+
+/**
+ * The XMPP host the JID is qualified with. Must match the host the client
+ * actually connects to, or the push service files the subscription under a
+ * JID nothing ever sends to.
+ */
+const resolveXmppHost = (): string => {
+  const config = store.getState().chatSettingStore?.config;
+  return (config?.xmppSettings?.host || '').trim() || DEFAULT_XMPP_HOST;
+};
 
 const pushAxios = axios.create({
-  baseURL: PUSH_API_URL,
   headers: {
     'Content-Type': 'application/json',
   },
@@ -21,7 +49,7 @@ export interface PushSubscriptionPayload {
 export async function subscribeToPushNotifications(
   fcmToken: string,
   userJid: string,
-  projectName: string = '',
+  projectName: string = ''
 ): Promise<void> {
   const deviceType: 'web' | 'android' | 'ios' = Platform.select({
     ios: 'ios',
@@ -29,27 +57,30 @@ export async function subscribeToPushNotifications(
     default: 'web',
   }) as 'web' | 'android' | 'ios';
 
+  // `userJid` arrives as either a bare localpart or an already-qualified
+  // JID depending on the caller; don't double-qualify it.
+  const jid = userJid.includes('@')
+    ? userJid
+    : `${userJid}@${resolveXmppHost()}`;
+
   const payload: PushSubscriptionPayload = {
     projectId: projectName,
     registrationToken: fcmToken,
     deviceType,
-    jid: `${userJid}@xmpp.ethoradev.com`,
+    jid,
   };
 
-  console.log('payload', payload);
-
   try {
     const token = store.getState().chatSettingStore?.user?.token || '';
 
     const response = await pushAxios.post('/subscriptions', payload, {
+      baseURL: resolvePushApiUrl(),
       headers: {
         Authorization: `Bearer ${token}`,
       },
     });
-    console.log('Successfully subscribed to push notifications', response.data);
     return response.data;
   } catch (error: any) {
     console.error('Failed to subscribe to push notifications:', error);
   }
 }
-

package/src/networking/api-requests/rooms.api.ts

@@ -1,9 +1,66 @@
 import { ApiRoom, DeleteRoomMember, PostAddRoomMember, PostReportRoom, PostRoom, RoomMember } from '../../types/models/room.model';
 import { store } from '../../roomStore';
-import { addRoom } from '../../roomStore/roomsSlice';
+import { addRoom, mergeUsersSet } from '../../roomStore/roomsSlice';
 import { IRoom } from '../../types/types';
 import http from '../apiClient';
 
+/**
+ * Populate `state.rooms.usersSet` (the identity cache Message.tsx resolves
+ * sender display names from) from the `members` arrays the REST `/chats/my`
+ * response carries. This is how the web SDK hydrates usersSet — it does NOT
+ * depend on the XMPP `getRoomMembers` IQ, which errors (`type=error`) on the
+ * current backend and left every sender showing a raw JID instead of a name.
+ *
+ * Keying: a message sender's `user.id` localpart is `<appId>_<userId>`, but
+ * a REST member only carries its Mongo `_id` (= `<userId>`). We derive the
+ * appId from the logged-in user's own xmppUsername (also `<appId>_<userId>`)
+ * and index each member under every id form a lookup might use:
+ *   - `<appId>_<_id>`  (matches the message sender localpart — the key case)
+ *   - `_id`            (fallback)
+ *   - `xmppUsername`   (raw + localpart) when the API does return one
+ */
+function dispatchUsersSetFromRestItems(items: ApiRoom[]): void {
+  if (!items?.length) {return;}
+  const ownXmpp = String(
+    store.getState().chatSettingStore?.user?.xmppUsername || ''
+  );
+  const appId = ownXmpp.includes('_') ? ownXmpp.split('_')[0] : '';
+
+  const members: Record<string, RoomMember> = {};
+  for (const item of items) {
+    const list = Array.isArray((item as any)?.members) ? (item as any).members : [];
+    for (const m of list) {
+      if (!m) {continue;}
+      const entry: RoomMember = {
+        firstName: m.firstName || '',
+        lastName: m.lastName || '',
+        xmppUsername: m.xmppUsername || (appId && m._id ? `${appId}_${m._id}` : m._id || ''),
+        _id: m._id || '',
+        role: m.role,
+        ban_status: m.ban_status,
+        last_active: m.last_active,
+        jid: m.jid,
+        name: m.name,
+      } as RoomMember;
+
+      const keys = new Set<string>();
+      if (appId && m._id) {keys.add(`${appId}_${m._id}`);}
+      if (m._id) {keys.add(m._id);}
+      if (m.xmppUsername) {
+        keys.add(m.xmppUsername);
+        keys.add(String(m.xmppUsername).split('@')[0]);
+      }
+      keys.forEach((k) => {
+        if (k) {members[k] = entry;}
+      });
+    }
+  }
+
+  if (Object.keys(members).length > 0) {
+    store.dispatch(mergeUsersSet({ members }));
+  }
+}
+
 interface ApiRoomMember {
   _id: string;
   firstName?: string;
@@ -90,6 +147,8 @@ function dispatchRoomsFromRestItems(items: ApiRoom[]): void {
     };
     store.dispatch(addRoom({ roomData: room }));
   }
+  // Hydrate the sender-name identity cache from the same REST payload.
+  dispatchUsersSetFromRestItems(items);
 }
 
 const GET_ROOMS_CACHE_MS = 60_000;
@@ -273,6 +332,55 @@ export async function deleteRoom(name: string) {
   }
 }
 
+// POST /v1/chats/call/create/{chatName}
+// Swagger documents the body as `additionalProperties: true`, we forward
+// `kind: 'audio' | 'video'` so the server can stamp it on the broadcast
+// call-token stanza for the callee. When the server doesn't recognize the
+// field both sides still fall through to a video call (the default), which
+// matches the prior single-mode behavior.
+// No timeout is set on the shared `http` client (matches web — neither SDK
+// configures one anywhere), so a stalled connection leaves this request
+// hanging indefinitely with nothing surfaced to the caller. Observed live
+// on the iOS Simulator: the same call the backend answers in ~0.6s from a
+// plain curl sat unresolved for 75+ seconds through the Simulator's network
+// stack. The UI's own 30s "no answer" ring timeout (VideoCallOverlay)
+// doesn't touch this request at all — it just gives up and shows an error
+// while the POST keeps sitting there, so a request that DOES eventually
+// resolve races a call the user already dismissed. Bound just this
+// request, not the shared client: file uploads on the same client
+// legitimately take longer than any call-placement call should ever need.
+const CALL_CREATE_TIMEOUT_MS = 15000;
+
+export async function createChatCall(
+  chatName: string,
+  options?: { kind?: 'audio' | 'video' }
+): Promise<void> {
+  const token = store.getState().chatSettingStore.user.token || '';
+  const kind = options?.kind || 'video';
+
+  try {
+    await http.post(
+      `/chats/call/create/${chatName}`,
+      { kind },
+      {
+        headers: {
+          Authorization: token,
+        },
+        timeout: CALL_CREATE_TIMEOUT_MS,
+      }
+    );
+  } catch (error: any) {
+    // Distinguish a timeout from a real server rejection — the caller
+    // (CallButtons) surfaces this string directly on the ring/error
+    // screen, and "the network is being slow" is a very different thing
+    // to tell the user than "the server said no".
+    if (error?.code === 'ECONNABORTED' || /timeout/i.test(String(error?.message))) {
+      throw new Error('Call request timed out — check your connection and try again');
+    }
+    throw new Error('Error creating chat call');
+  }
+}
+
 export function clearRoomsRestCache() {
   lastGetRoomsResponse = null;
   lastGetRoomsResponseAt = 0;