@ethora/chat-component-rn 26.8.3 → 26.8.5

package/src/roomStore/chatSettingsSlice.ts

@@ -12,6 +12,7 @@ import {
 import { Iso639_1Codes } from '../types/models/language.model';
 import type { TranslateMode } from '../utils/translateModePolicy';
 import { secureUserStorage } from '../helpers/secureUserStorage';
+import { applyThemePreference, type ThemePreference } from '../theme/theme';
 
 export interface ChatState {
   user: User;
@@ -29,6 +30,14 @@ export interface ChatState {
    * See utils/translateModePolicy.
    */
   translateMode?: TranslateMode;
+  /**
+   * Appearance picked in Settings (light / dark / system). Persisted per
+   * device; folded into `config.dark` by setConfig / setThemePreference so
+   * every consumer of `config` sees the effective value.
+   */
+  themePreference?: ThemePreference;
+  /** Push notifications toggle from Settings. `undefined` = on. */
+  pushEnabled?: boolean;
 }
 
 export const unpackAndTransform = (input?: User): User => {
@@ -126,11 +135,22 @@ const reducers = {
       };
     }
   },
+  setThemePreference: (
+    state: WritableDraft<ChatState>,
+    action: PayloadAction<ThemePreference | undefined>
+  ) => {
+    state.themePreference = action.payload;
+    state.config = applyThemePreference(state.config as IConfig | undefined, action.payload) as any;
+  },
+  setPushEnabled: (state: WritableDraft<ChatState>, action: PayloadAction<boolean>) => {
+    state.pushEnabled = action.payload;
+  },
   setConfig: (state: WritableDraft<ChatState>, action: PayloadAction<IConfig | undefined>) => {
     // Cast away immer's WritableDraft — IConfig contains callable
     // fields (eventHandlers, customComponent) that confuse the draft
-    // type inference but are inert at write-time.
-    state.config = action.payload as any;
+    // type inference but are inert at write-time. The user's in-app
+    // appearance choice survives a host re-dispatch.
+    state.config = applyThemePreference(action.payload, state.themePreference) as any;
   },
   setActiveModal: (state: WritableDraft<ChatState>, action: PayloadAction<ModalType | undefined>) => {
     state.activeModal = action.payload;
@@ -220,6 +240,8 @@ export const {
   setStoreClient,
   setLangSource,
   setTranslateMode,
+  setThemePreference,
+  setPushEnabled,
 } = chatSlice.actions;
 
 export default chatSlice.reducer;

package/src/services/pushRegistration.ts

@@ -70,7 +70,10 @@ const readSession = (): Session => {
     xmppUsername: String(user?.xmppUsername || ''),
     projectName: String(config?.projectName || '').trim(),
     gatewayUrl: String(config?.pushNotifications?.apiUrl || '').trim(),
-    pushDisabled: config?.pushNotifications?.enabled === false,
+    // Off by config (host) or by the user's Settings toggle.
+    pushDisabled:
+      config?.pushNotifications?.enabled === false ||
+      slice?.pushEnabled === false,
   };
 };
 
@@ -233,7 +236,17 @@ const ensureWatching = (): void => {
       hookIdentity = null;
       return;
     }
-    if (session.pushDisabled || !isReady(session)) {
+    if (session.pushDisabled) {
+      // Switched off (Settings toggle or config): take the device off the
+      // backend but keep the tokens, so switching back on re-registers
+      // without the host doing anything. `registered` empties at once,
+      // so later store updates do not repeat the release.
+      if (registered.size > 0) {
+        releasePushRegistration().catch(() => undefined);
+      }
+      return;
+    }
+    if (!isReady(session)) {
       return;
     }
     runTokenHook(session);

package/src/theme/theme.ts

@@ -1,5 +1,7 @@
 /** @format */
 
+import { Appearance } from 'react-native';
+
 /**
  * Chat theme.
  *
@@ -161,7 +163,10 @@ export const DARK_THEME: ChatThemeColors = {
 /** 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;
+  /** `true` forces dark, `'system'` follows the OS appearance (pass the
+   * current scheme as `systemDark` to resolveTheme / isDarkTheme; omitted,
+   * the OS scheme is read directly). */
+  dark?: boolean | 'system';
   darkColors?: ChatThemeOverrides;
   colors?: {
     primary?: string;
@@ -179,8 +184,16 @@ export interface ThemeConfigInput {
   backgroundChat?: { color?: string };
 }
 
-export const isDarkTheme = (config?: ThemeConfigInput | null): boolean =>
-  !!config?.dark;
+/** The OS appearance right now — the fallback when a caller has no hook. */
+// Optional chaining on `Appearance` itself: tests that mock react-native
+// partially leave it undefined, and a missing module must read as light.
+const systemIsDark = (): boolean => Appearance?.getColorScheme?.() === 'dark';
+
+export const isDarkTheme = (
+  config?: ThemeConfigInput | null,
+  systemDark: boolean = systemIsDark()
+): boolean =>
+  config?.dark === 'system' ? systemDark : config?.dark === true;
 
 const pick = <T>(...values: (T | undefined | null | '')[]): T | undefined =>
   values.find((v) => v !== undefined && v !== null && v !== '') as
@@ -196,8 +209,11 @@ const stripUndefined = (o: ChatThemeOverrides): 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)) {
+export const resolveTheme = (
+  config?: ThemeConfigInput | null,
+  systemDark?: boolean
+): ChatTheme => {
+  if (isDarkTheme(config, systemDark)) {
     const overrides = stripUndefined(config?.darkColors ?? {});
     const primary = pick(overrides.primary, DARK_THEME.primary)!;
     return {
@@ -241,3 +257,21 @@ export const resolveTheme = (config?: ThemeConfigInput | null): ChatTheme => {
     statusBarStyle: 'dark-content',
   };
 };
+
+/** In-app appearance choice from Settings; `undefined` = follow the host's config.dark. */
+export type ThemePreference = 'light' | 'dark' | 'system';
+
+/**
+ * Fold the user's in-app appearance choice into a config: the choice wins
+ * over the host's `dark` (a host that wants to lock the theme hides the
+ * setting with `settings.hideAppearance`). Returns the same object when
+ * nothing changes, so memoised consumers do not re-render.
+ */
+export const applyThemePreference = <T extends { dark?: boolean | 'system' }>(
+  config: T | undefined,
+  preference?: ThemePreference
+): T | undefined => {
+  if (!preference || !config) {return config;}
+  const dark = preference === 'system' ? ('system' as const) : preference === 'dark';
+  return config.dark === dark ? config : { ...config, dark };
+};

package/src/types/types.ts

@@ -386,8 +386,10 @@ export interface IConfig {
    * not applied — pass brand colours via `darkColors` instead.
    *
    *   config: { dark: true, darkColors: { primary: '#7C3AED', surface: '#111' } }
+   *
+   * `'system'` follows the device appearance (light/dark) automatically.
    */
-  dark?: boolean;
+  dark?: boolean | 'system';
   /** Per-entry overrides of the dark palette; see ChatThemeColors. */
   darkColors?: ChatThemeOverrides;
   /** Configurable font family / weights for the chat UI. See TypographyConfig. */
@@ -787,8 +789,29 @@ export interface IConfig {
     firebaseConfig?: FBConfig;
   };
 
+  /** Settings screen switches. */
+  settings?: {
+    /** Hide the Light / Dark / System appearance picker (host locks the theme via `dark`). */
+    hideAppearance?: boolean;
+    /** Hide the push-notifications toggle. */
+    hidePushToggle?: boolean;
+  };
+
   // ----- event hooks -----
   eventHandlers?: {
+    /**
+     * Fired when the user picks an appearance in Settings (and once on
+     * mount with the persisted choice). `isDark` is the resolved value
+     * for 'system'. Hosts use it to sync their own chrome (status bar).
+     */
+    onThemeChange?: (preference: 'light' | 'dark' | 'system', isDark: boolean) => void;
+    /**
+     * Fired when the user toggles push notifications in Settings. The SDK
+     * itself stops delivering: off releases every device-token
+     * registration on the backend (tokens are kept), on registers them
+     * again. A host that also owns native push should mirror the choice.
+     */
+    onPushNotificationsToggle?: (enabled: boolean) => void | Promise<void>;
     onMessageSent?: (event: {
       message: string;
       roomJID: string;

package/src/version.ts

@@ -1,3 +1,3 @@
 // Generated by scripts/sync-version.mjs on `npm version`.
 // Edit package.json's version instead of this file.
-export const ETHORA_CHAT_COMPONENT_VERSION = '26.8.2';
+export const ETHORA_CHAT_COMPONENT_VERSION = '26.8.4';