@ethora/chat-component-rn 26.8.2 → 26.8.3

package/src/services/pushRegistration.ts

@@ -0,0 +1,356 @@
+import { store } from '../roomStore';
+import {
+  PushRegistrationError,
+  detectPushTokenType,
+  registerPushSubscription,
+  subscribeToPushGateway,
+  unregisterPushSubscription,
+} from '../networking/api-requests/push.api';
+import type { PushTokenType } from '../types/types';
+import { pushLog } from '../utils/devLogger';
+
+export interface RegisterPushTokenOptions {
+  tokenType?: PushTokenType;
+}
+
+export type RegisterPushTokenOutcome =
+  | 'registered'
+  | 'deferred'
+  | 'disabled';
+
+export interface UnregisterPushTokenOptions {
+  tokenType?: PushTokenType;
+}
+
+export type UnregisterPushTokenOutcome =
+  | 'unregistered'
+  | 'forgotten';
+
+export interface RegisteredPushToken {
+  token: string;
+  tokenType: PushTokenType;
+}
+
+type Slot = 'chat' | 'voip';
+const slotOf = (tokenType: PushTokenType): Slot =>
+  tokenType === 'apns-voip' ? 'voip' : 'chat';
+const SLOTS: Slot[] = ['chat', 'voip'];
+
+interface Session {
+  authToken: string;
+  appId: string;
+  xmppUsername: string;
+  projectName: string;
+  gatewayUrl: string;
+  pushDisabled: boolean;
+}
+
+interface ServerRegistration extends RegisteredPushToken {
+  appId: string;
+  xmppUsername: string;
+  gateway: boolean;
+}
+
+const HOOK_RETRY_MS = 30_000;
+
+const held = new Map<Slot, RegisteredPushToken>();
+const registered = new Map<Slot, ServerRegistration>();
+let inflight: Promise<void> | null = null;
+let unwatch: (() => void) | null = null;
+let hookIdentity: string | null = null;
+let hookFailedAt = 0;
+
+const readSession = (): Session => {
+  const slice = store.getState().chatSettingStore;
+  const user = slice?.user;
+  const config = slice?.config;
+  return {
+    authToken: String(user?.token || ''),
+    appId: String(config?.appId || user?.appId || '').trim(),
+    xmppUsername: String(user?.xmppUsername || ''),
+    projectName: String(config?.projectName || '').trim(),
+    gatewayUrl: String(config?.pushNotifications?.apiUrl || '').trim(),
+    pushDisabled: config?.pushNotifications?.enabled === false,
+  };
+};
+
+const isGateway = (session: Session): boolean => !!session.gatewayUrl;
+
+const isReady = (session: Session): boolean =>
+  !!session.authToken &&
+  (isGateway(session)
+    ? !!session.xmppUsername && !!session.projectName
+    : !!session.appId);
+
+const sameRegistration = (
+  token: RegisteredPushToken,
+  current: ServerRegistration | undefined,
+  session: Session
+): boolean =>
+  !!current &&
+  current.token === token.token &&
+  current.tokenType === token.tokenType &&
+  current.gateway === isGateway(session) &&
+  current.appId === session.appId &&
+  current.xmppUsername === session.xmppUsername;
+
+const slotsNeedingRegistration = (session: Session): Slot[] =>
+  SLOTS.filter((slot) => {
+    const token = held.get(slot);
+    return !!token && !sameRegistration(token, registered.get(slot), session);
+  });
+
+const releaseOnServer = async (
+  current: ServerRegistration,
+  authToken: string
+): Promise<void> => {
+  if (current.gateway || !authToken) {
+    return;
+  }
+  await unregisterPushSubscription({
+    appId: current.appId,
+    token: current.token,
+    authToken,
+  });
+};
+
+const registerOne = async (
+  token: RegisteredPushToken,
+  session: Session
+): Promise<void> => {
+  if (isGateway(session)) {
+    if (!session.projectName) {
+      throw new PushRegistrationError(
+        'registerPushToken: config.projectName is required when ' +
+          'pushNotifications.apiUrl points at a push gateway.'
+      );
+    }
+    await subscribeToPushGateway({
+      apiUrl: session.gatewayUrl,
+      token: token.token,
+      userJid: session.xmppUsername,
+      projectName: session.projectName,
+      authToken: session.authToken,
+    });
+  } else {
+    if (!session.appId) {
+      throw new PushRegistrationError(
+        'registerPushToken: an app id is required — set config.appId ' +
+          'or sign in with a user that carries one.'
+      );
+    }
+    await registerPushSubscription({
+      appId: session.appId,
+      token: token.token,
+      tokenType: token.tokenType,
+      authToken: session.authToken,
+    });
+  }
+  registered.set(slotOf(token.tokenType), {
+    ...token,
+    appId: session.appId,
+    xmppUsername: session.xmppUsername,
+    gateway: isGateway(session),
+  });
+  pushLog(
+    'rn',
+    `push: ${token.tokenType} token registered` +
+      (isGateway(session) ? ' (gateway)' : ` for app ${session.appId}`)
+  );
+};
+
+const registerNow = (): Promise<void> => {
+  if (inflight) {
+    return inflight;
+  }
+  inflight = (async () => {
+    const session = readSession();
+    if (session.pushDisabled || !session.authToken) {
+      return;
+    }
+    if (isGateway(session) && !session.xmppUsername) {
+      return;
+    }
+    for (const slot of slotsNeedingRegistration(session)) {
+      const token = held.get(slot)!;
+      const previous = registered.get(slot);
+      if (previous && previous.xmppUsername === session.xmppUsername) {
+        registered.delete(slot);
+        await releaseOnServer(previous, session.authToken).catch((error) =>
+          pushLog('warn', 'push: releasing the replaced token failed', error)
+        );
+      }
+      await registerOne(token, session);
+    }
+  })().finally(() => {
+    inflight = null;
+  });
+  return inflight;
+};
+
+const runTokenHook = (session: Session): void => {
+  const hook = store.getState().chatSettingStore?.config?.pushNotifications
+    ?.getPushTokens;
+  const identity = session.xmppUsername || session.appId;
+  if (!hook || !identity || hookIdentity === identity) {
+    return;
+  }
+  if (Date.now() - hookFailedAt < HOOK_RETRY_MS) {
+    return;
+  }
+  hookIdentity = identity;
+  (async () => {
+    const result = await hook();
+    const list = Array.isArray(result) ? result : result ? [result] : [];
+    for (const entry of list) {
+      if (typeof entry?.token !== 'string' || !entry.token.trim()) {
+        continue;
+      }
+      hold(entry.token.trim(), entry.tokenType);
+    }
+    await registerNow();
+  })().catch((error) => {
+    hookIdentity = null;
+    hookFailedAt = Date.now();
+    pushLog('warn', 'push: getPushTokens failed; will retry', error);
+  });
+};
+
+const hold = (token: string, tokenType?: PushTokenType): RegisteredPushToken => {
+  const resolved = tokenType ?? detectPushTokenType(token);
+  const entry: RegisteredPushToken = { token, tokenType: resolved };
+  held.set(slotOf(resolved), entry);
+  return entry;
+};
+
+const ensureWatching = (): void => {
+  if (unwatch) {
+    return;
+  }
+  unwatch = store.subscribe(() => {
+    const session = readSession();
+    if (!session.authToken) {
+      hookIdentity = null;
+      return;
+    }
+    if (session.pushDisabled || !isReady(session)) {
+      return;
+    }
+    runTokenHook(session);
+    if (slotsNeedingRegistration(session).length === 0) {
+      return;
+    }
+    registerNow().catch((error) => {
+      pushLog('warn', 'push: deferred token registration failed', error);
+    });
+  });
+};
+
+export const installPushTokenHook = (): void => {
+  ensureWatching();
+  const session = readSession();
+  if (session.authToken && !session.pushDisabled && isReady(session)) {
+    runTokenHook(session);
+  }
+};
+
+export async function registerPushToken(
+  token: string,
+  options?: RegisterPushTokenOptions
+): Promise<RegisterPushTokenOutcome> {
+  if (typeof token !== 'string' || !token.trim()) {
+    throw new TypeError('registerPushToken: token must be a non-empty string');
+  }
+  hold(token.trim(), options?.tokenType);
+  ensureWatching();
+
+  const session = readSession();
+  if (session.pushDisabled) {
+    return 'disabled';
+  }
+  if (!session.authToken || (isGateway(session) && !session.xmppUsername)) {
+    return 'deferred';
+  }
+  await registerNow();
+  return 'registered';
+}
+
+export async function releasePushRegistration(): Promise<void> {
+  const current = Array.from(registered.values());
+  registered.clear();
+  hookIdentity = null;
+  const session = readSession();
+  if (!current.length || !session.authToken) {
+    return;
+  }
+  await Promise.all(
+    current.map((entry) =>
+      releaseOnServer(entry, session.authToken)
+        .then(() =>
+          pushLog('rn', `push: ${entry.tokenType} token released for app ${entry.appId}`)
+        )
+        .catch((error) =>
+          pushLog('warn', 'push: releasing the token on logout failed', error)
+        )
+    )
+  );
+}
+
+export async function unregisterPushToken(
+  options?: UnregisterPushTokenOptions
+): Promise<UnregisterPushTokenOutcome> {
+  const slots = options?.tokenType ? [slotOf(options.tokenType)] : SLOTS;
+  const toRelease: ServerRegistration[] = [];
+  for (const slot of slots) {
+    held.delete(slot);
+    const current = registered.get(slot);
+    if (current) {
+      registered.delete(slot);
+      toRelease.push(current);
+    }
+  }
+  const session = readSession();
+  const removable = toRelease.filter((entry) => !entry.gateway);
+  if (!removable.length) {
+    return 'forgotten';
+  }
+  if (!session.authToken) {
+    pushLog(
+      'warn',
+      'push: unregisterPushToken called without a session; the backend still holds the token'
+    );
+    return 'forgotten';
+  }
+  const results = await Promise.allSettled(
+    removable.map((entry) => releaseOnServer(entry, session.authToken))
+  );
+  const failure = results.find((r) => r.status === 'rejected') as
+    | PromiseRejectedResult
+    | undefined;
+  if (failure) {
+    throw failure.reason;
+  }
+  return 'unregistered';
+}
+
+export const getRegisteredPushToken = (): RegisteredPushToken | null => {
+  const chat = held.get('chat');
+  return chat ? { ...chat } : null;
+};
+
+export const getRegisteredPushTokens = (): RegisteredPushToken[] =>
+  SLOTS.map((slot) => held.get(slot))
+    .filter((t): t is RegisteredPushToken => !!t)
+    .map((t) => ({ ...t }));
+
+export const __resetPushRegistrationForTests = (): void => {
+  held.clear();
+  registered.clear();
+  inflight = null;
+  hookIdentity = null;
+  hookFailedAt = 0;
+  if (unwatch) {
+    unwatch();
+    unwatch = null;
+  }
+};

package/src/services/pushSubscriptionService.ts

@@ -1,15 +1,11 @@
 import { Client } from '@xmpp/client';
-import { User } from '../types/types';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { subscribeToPushNotifications } from '../networking/api-requests/push.api';
 import { subscribeToRoomMessages } from '../networking/xmpp/subscribeToRoomMessages.xmpp';
 
 const SUBSCRIBED_ROOMS_KEY = 'ethora_subscribed_rooms';
 
 export class PushSubscriptionService {
   private subscribedRooms: Set<string> = new Set();
-  private isPushSubscribed: boolean = false;
-  private lastSubscriptionKey: string | null = null;
   private isInitialized: boolean = false;
 
   private async loadSubscribedRoomsFromStorage(): Promise<void> {
@@ -36,34 +32,6 @@ export class PushSubscriptionService {
     }
   }
 
-  async subscribeToPush(
-    fcmToken: string,
-    user: User,
-    projectName: string,
-  ): Promise<void> {
-    const walletAddress = user.defaultWallet?.walletAddress || user.walletAddress;
-    const subscriptionKey = `${fcmToken}_${walletAddress}`;
-
-    if (this.isPushSubscribed && this.lastSubscriptionKey === subscriptionKey) {
-      console.log('⚠️ Push already subscribed with this token, skipping...');
-      return;
-    }
-
-    try {
-      const userJid: string = user.xmppUsername || '';
-
-      if (!userJid) {
-        throw new Error('User JID is required for push subscription');
-      }
-
-      await subscribeToPushNotifications(fcmToken, userJid, projectName);
-      this.isPushSubscribed = true;
-      this.lastSubscriptionKey = subscriptionKey;
-    } catch (error: any) {
-      console.error('Failed to subscribe to push after all retries:', error);
-    }
-  }
-
   async subscribeToRoom(
     client: Client,
     roomJID: string,
@@ -125,8 +93,6 @@ export class PushSubscriptionService {
 
   async reset(): Promise<void> {
     this.subscribedRooms.clear();
-    this.isPushSubscribed = false;
-    this.lastSubscriptionKey = null;
     this.isInitialized = false;
 
     try {

package/src/theme/index.ts

@@ -0,0 +1,10 @@
+/** @format */
+
+export {
+  LIGHT_THEME,
+  DARK_THEME,
+  resolveTheme,
+  isDarkTheme,
+} from './theme';
+export type { ChatTheme, ChatThemeColors, ChatThemeOverrides } from './theme';
+export { useTheme } from '../hooks/useTheme';

package/src/theme/styled.d.ts

@@ -0,0 +1,9 @@
+/** @format */
+
+import 'styled-components/native';
+import type { ChatTheme } from './theme';
+
+declare module 'styled-components/native' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends ChatTheme {}
+}

package/src/theme/theme.ts

@@ -0,0 +1,243 @@
+/** @format */
+
+/**
+ * Chat theme.
+ *
+ * One palette object drives every surface, text and accent colour in the
+ * component. The light palette is the historical look (all the previously
+ * hard-coded values live here now). The dark palette is enabled by
+ * `config.dark = true`; any of its entries can be overridden through
+ * `config.darkColors`, and anything not overridden falls back to the
+ * DARK_THEME default.
+ *
+ * Resolution order:
+ *   light: LIGHT_THEME ← config.colors (primary/secondary/icon…) ← messageColor ← backgroundChat.color
+ *   dark:  DARK_THEME  ← config.darkColors
+ *
+ * In dark mode the light-only knobs (`colors`, `messageColor`,
+ * `backgroundChat.color`) are deliberately NOT applied: they were tuned
+ * against white surfaces and would produce unreadable bubbles on a dark
+ * ground. Hosts that want brand colours in the dark theme pass them via
+ * `darkColors`. `colors.avatar` is the one exception — it is a brand
+ * colour that reads fine on either ground — see getAvatarColor.
+ */
+
+export interface ChatThemeColors {
+  /** Brand accent: buttons, active states, links, sender names. */
+  primary: string;
+  /** Secondary accent (text on primary, secondary buttons). */
+  secondary: string;
+  /** Tint for chrome icons (attach, send, burger, back). */
+  icon: string;
+  /** Sender name above incoming bubbles. */
+  senderName: string;
+  /** Day-separator pill text; its background is a tint of it. */
+  dateLabel: string;
+
+  /** Ground of the room list screen. */
+  listBackground: string;
+  /** Ground of the conversation (behind the message list). */
+  chatBackground: string;
+  /** Cards floating over the ground: headers, composer, drawer, modals, sheets. */
+  surface: string;
+  /** Fields and chips sitting on a surface: text input, search box, menu rows. */
+  surfaceSecondary: string;
+  /** Pressed / selected row highlight. */
+  surfaceHighlight: string;
+
+  /** Primary text. */
+  text: string;
+  /** Secondary text: previews, timestamps, subtitles. */
+  textSecondary: string;
+  /** Muted text: placeholders, hints, disabled labels. */
+  textMuted: string;
+  /** Text drawn on top of `primary`. */
+  textOnPrimary: string;
+
+  /** Hairline borders around fields and cards. */
+  border: string;
+  /** Row separators in lists. */
+  divider: string;
+  /** Shadow colour under floating cards. */
+  shadow: string;
+  /** Scrim behind modals and sheets. */
+  overlay: string;
+
+  /** Incoming message bubble. */
+  messageBackground: string;
+  /** Outgoing (own) message bubble. */
+  messageBackgroundUser: string;
+  /** Incoming bubble text. */
+  messageText: string;
+  /** Outgoing bubble text. */
+  messageTextUser: string;
+  /** System / service messages background. */
+  systemMessageBackground: string;
+
+  /** Unread badge + destructive accents. */
+  danger: string;
+  /** Success accents (online dot, sent tick). */
+  success: string;
+}
+
+/** Everything in the palette can be overridden per entry. */
+export type ChatThemeOverrides = Partial<ChatThemeColors>;
+
+export interface ChatTheme extends ChatThemeColors {
+  /** `true` when the dark palette is active. */
+  dark: boolean;
+  /** StatusBar style that reads on `surface`. */
+  statusBarStyle: 'light-content' | 'dark-content';
+}
+
+const DEFAULT_PRIMARY = '#0052CD';
+
+export const LIGHT_THEME: ChatThemeColors = {
+  primary: DEFAULT_PRIMARY,
+  secondary: '#141414',
+  icon: DEFAULT_PRIMARY,
+  senderName: DEFAULT_PRIMARY,
+  dateLabel: DEFAULT_PRIMARY,
+
+  listBackground: '#E8EDF2',
+  chatBackground: '#F3F6FC',
+  surface: '#FFFFFF',
+  surfaceSecondary: '#F5F7F9',
+  surfaceHighlight: '#0052CD0D',
+
+  text: '#141414',
+  textSecondary: '#8C8C8C',
+  textMuted: '#999999',
+  textOnPrimary: '#FFFFFF',
+
+  border: '#E5E7EB',
+  divider: '#C6CFDA',
+  shadow: '#101828',
+  overlay: 'rgba(0, 0, 0, 0.3)',
+
+  messageBackground: '#FFFFFF',
+  messageBackgroundUser: '#D1E7FF',
+  messageText: '#333333',
+  messageTextUser: '#333333',
+  systemMessageBackground: '#F5F5F5',
+
+  danger: '#E53935',
+  success: '#22C55E',
+};
+
+export const DARK_THEME: ChatThemeColors = {
+  primary: '#4C8DFF',
+  secondary: '#F2F4F7',
+  icon: '#4C8DFF',
+  senderName: '#7FB0FF',
+  dateLabel: '#7FB0FF',
+
+  listBackground: '#0F1216',
+  chatBackground: '#141A21',
+  surface: '#1C2430',
+  surfaceSecondary: '#26303D',
+  surfaceHighlight: '#4C8DFF26',
+
+  text: '#F2F4F7',
+  textSecondary: '#A0A8B3',
+  textMuted: '#7A8391',
+  textOnPrimary: '#FFFFFF',
+
+  border: '#2F3A47',
+  divider: '#2F3A47',
+  shadow: '#000000',
+  overlay: 'rgba(0, 0, 0, 0.6)',
+
+  messageBackground: '#1F2833',
+  messageBackgroundUser: '#1E3A5F',
+  messageText: '#F2F4F7',
+  messageTextUser: '#F2F4F7',
+  systemMessageBackground: '#26303D',
+
+  danger: '#F87171',
+  success: '#4ADE80',
+};
+
+/** The subset of IConfig the theme depends on (kept structural so the
+ * helpers can be called with partial configs in tests). */
+export interface ThemeConfigInput {
+  dark?: boolean;
+  darkColors?: ChatThemeOverrides;
+  colors?: {
+    primary?: string;
+    secondary?: string;
+    icon?: string;
+    senderName?: string;
+    dateLabel?: string;
+  };
+  messageColor?: {
+    backgroundMessage?: string;
+    backgroundMessageUser?: string;
+    colorUser?: string;
+    color?: string;
+  };
+  backgroundChat?: { color?: string };
+}
+
+export const isDarkTheme = (config?: ThemeConfigInput | null): boolean =>
+  !!config?.dark;
+
+const pick = <T>(...values: (T | undefined | null | '')[]): T | undefined =>
+  values.find((v) => v !== undefined && v !== null && v !== '') as
+    | T
+    | undefined;
+
+const stripUndefined = (o: ChatThemeOverrides): ChatThemeOverrides =>
+  Object.fromEntries(
+    Object.entries(o).filter(([, v]) => v !== undefined && v !== null && v !== '')
+  ) as ChatThemeOverrides;
+
+/**
+ * Build the effective palette for a config. Pure; memoize at the call
+ * site (useTheme does).
+ */
+export const resolveTheme = (config?: ThemeConfigInput | null): ChatTheme => {
+  if (isDarkTheme(config)) {
+    const overrides = stripUndefined(config?.darkColors ?? {});
+    const primary = pick(overrides.primary, DARK_THEME.primary)!;
+    return {
+      ...DARK_THEME,
+      // Accents that historically fell back to `primary` keep doing so
+      // when only `primary` is overridden.
+      icon: pick(overrides.icon, overrides.primary, DARK_THEME.icon)!,
+      senderName: pick(overrides.senderName, overrides.primary, DARK_THEME.senderName)!,
+      dateLabel: pick(overrides.dateLabel, overrides.primary, DARK_THEME.dateLabel)!,
+      ...overrides,
+      primary,
+      dark: true,
+      statusBarStyle: 'light-content',
+    };
+  }
+
+  const c = config?.colors;
+  const primary = pick(c?.primary, LIGHT_THEME.primary)!;
+  return {
+    ...LIGHT_THEME,
+    primary,
+    secondary: pick(c?.secondary, LIGHT_THEME.secondary)!,
+    icon: pick(c?.icon, c?.primary, LIGHT_THEME.icon)!,
+    senderName: pick(c?.senderName, c?.primary, LIGHT_THEME.senderName)!,
+    dateLabel: pick(c?.dateLabel, c?.primary, LIGHT_THEME.dateLabel)!,
+    chatBackground: pick(config?.backgroundChat?.color, LIGHT_THEME.chatBackground)!,
+    messageBackground: pick(
+      config?.messageColor?.backgroundMessage,
+      LIGHT_THEME.messageBackground
+    )!,
+    messageBackgroundUser: pick(
+      config?.messageColor?.backgroundMessageUser,
+      LIGHT_THEME.messageBackgroundUser
+    )!,
+    messageText: pick(config?.messageColor?.color, LIGHT_THEME.messageText)!,
+    messageTextUser: pick(
+      config?.messageColor?.colorUser,
+      LIGHT_THEME.messageTextUser
+    )!,
+    dark: false,
+    statusBarStyle: 'dark-content',
+  };
+};

package/src/types/models/room.model.ts

@@ -79,6 +79,7 @@ export interface ApiRoom {
   jid?: string;
   participants?: number;
   icon?: string;
+  muted?: boolean;
 }
 
 export interface PostRoom {