@ethora/chat-component-rn 26.5.15 → 26.5.17

package/src/helpers/historyPreloadScheduler.ts

@@ -1,7 +1,7 @@
 import { AppState } from 'react-native';
 import XmppClient from '../networking/xmppClient';
 import { store } from '../roomStore';
-import { applyRoomsPreloadBatch } from '../roomStore/roomsSlice';
+import { applyRoomsPreloadBatch, setUnreadSyncing } from '../roomStore/roomsSlice';
 import { IMessage, IRoom } from '../types/types';
 
 interface HistoryPreloadSchedulerOptions {
@@ -112,6 +112,9 @@ export const runHistoryPreloadScheduler = async (
 
   if (signal?.aborted) {return;}
 
+  store.dispatch(setUnreadSyncing(true));
+  try {
+
   const state = store.getState();
   const rooms = (state.rooms.rooms || {}) as Record<string, IRoom>;
   const defaultSet = new Set(defaultRoomJids);
@@ -276,6 +279,9 @@ export const runHistoryPreloadScheduler = async (
     // Yield to JS event loop (no requestIdleCallback in RN).
     await new Promise((r) => setTimeout(r, 0));
   }
+  } finally {
+    store.dispatch(setUnreadSyncing(false));
+  }
 };
 
 export default runHistoryPreloadScheduler;

package/src/hooks/useChatFonts.ts

@@ -0,0 +1,153 @@
+import { useEffect, useState } from 'react';
+import { Text, TextInput } from 'react-native';
+import type { TypographyConfig } from '../types/types';
+
+/**
+ * Loads and applies the host-provided font configuration for the chat UI.
+ *
+ * React Native has no web-style runtime `@font-face`, so a custom font must be
+ * registered with `expo-font` before it can be used. This hook:
+ *   1. loads every entry in `typography.fonts` via `expo-font` (remote URL or
+ *      bundled `require(...)`), then
+ *   2. sets the resolved `fontFamily` as the default for all `<Text>` and
+ *      `<TextInput>` rendered by the chat — mirroring how the web SDK sets a
+ *      CSS variable. Individual components can still override per-style.
+ *
+ * `expo-font` is an optional peer dependency: if the host hasn't installed it,
+ * the hook degrades gracefully (font simply isn't loaded) instead of throwing.
+ *
+ * No-op when `typography` is undefined — the system font is kept, so existing
+ * integrations are unaffected.
+ *
+ * @returns `true` once fonts are ready (or when there's nothing to load), so
+ *          callers can gate first paint to avoid a font "flash" if desired.
+ */
+export function useChatFonts(typography?: TypographyConfig): boolean {
+  const [ready, setReady] = useState(!typography?.fonts?.length);
+
+  applyDefaultFont(typography);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function load() {
+      // Apply the default family immediately so already-available fonts
+      // (system, or host-loaded) take effect without waiting on a download.
+      applyDefaultFont(typography);
+
+      if (!typography?.fonts?.length) {
+        setReady(true);
+        return;
+      }
+
+      try {
+        // Optional dependency — resolve lazily so apps that don't use custom
+        // fonts don't need expo-font installed.
+        const ExpoFont = await import('expo-font').catch(() => null);
+        if (!ExpoFont) {
+          if (!cancelled) setReady(true);
+          return;
+        }
+        const map: Record<string, string | number> = {};
+        for (const f of typography.fonts) map[f.family] = f.source as never;
+        await ExpoFont.loadAsync(map);
+        if (!cancelled) {
+          applyDefaultFont(typography);
+          setReady(true);
+        }
+      } catch {
+        // Loading failed (e.g. bad URL) — keep the fallback font, don't block UI.
+        if (!cancelled) setReady(true);
+      }
+    }
+
+    load();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    typography?.fontFamily,
+    JSON.stringify(typography?.fonts ?? []),
+    JSON.stringify(typography?.weightFamilies ?? {}),
+  ]);
+
+  return ready;
+}
+
+/**
+ * The family currently applied as the chat-wide default. Read at render time
+ * by the patched components below, so updating it (then triggering a re-render)
+ * restyles the whole tree.
+ */
+let activeFamily: string | undefined;
+
+
+function wrapFactory(orig: any): any {
+  if (typeof orig !== 'function') return orig;
+  if (orig.__ethoraFontWrapped) return orig;
+  const wrapped = function (this: any, type: any, props: any, ...rest: any[]) {
+    if (
+      activeFamily &&
+      props &&
+      (type === Text || type === TextInput)
+    ) {
+      props = { ...props, style: [{ fontFamily: activeFamily }, props.style] };
+    }
+    return orig.call(this, type, props, ...rest);
+  };
+  wrapped.__ethoraFontWrapped = true;
+  return wrapped;
+}
+
+let factoriesPatched = false;
+
+function ensurePatched(): void {
+  if (factoriesPatched) return;
+
+  let any = false;
+
+  const patchMod = (mod: any): void => {
+    if (!mod) return;
+    for (const fn of ['jsx', 'jsxs', 'jsxDEV']) {
+      if (typeof mod[fn] === 'function' && !mod[fn].__ethoraFontWrapped) {
+        mod[fn] = wrapFactory(mod[fn]);
+        any = true;
+      }
+    }
+  };
+
+  try {
+    patchMod(require('react/jsx-runtime'));
+  } catch {
+    /* ignore */
+  }
+  try {
+    patchMod(require('react/jsx-dev-runtime'));
+  } catch {
+    /* ignore */
+  }
+
+  try {
+    const React = require('react');
+    if (
+      typeof React.createElement === 'function' &&
+      !React.createElement.__ethoraFontWrapped
+    ) {
+      React.createElement = wrapFactory(React.createElement);
+      any = true;
+    }
+  } catch {
+    /* ignore */
+  }
+
+  if (any) factoriesPatched = true;
+}
+
+/**
+ * Set (or clear) the chat-wide default font family.
+ */
+function applyDefaultFont(typography?: TypographyConfig): void {
+  activeFamily = typography?.fontFamily;
+  if (activeFamily) ensurePatched();
+}

package/src/hooks/useUnreadMessagesCounter.ts

@@ -10,6 +10,7 @@ interface UnreadMessagesStats {
   hasUnread: boolean;
   totalCount: number;
   unreadByRoom: UnreadMessagesMap;
+  isLoading: boolean;
 }
 
 export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
@@ -26,11 +27,12 @@ export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
   // so non-rooms dispatches still don't trigger a re-render.)
   const subscribe = (callback: () => void) => store.subscribe(callback);
 
-  const rooms = useSyncExternalStore(
+  const roomsState = useSyncExternalStore(
     subscribe,
-    () => store.getState().rooms.rooms
+    () => store.getState().rooms
   );
 
+  const rooms = roomsState.rooms;
   const unreadByRoom: UnreadMessagesMap = {};
   let totalCount = 0;
 
@@ -46,6 +48,7 @@ export const useUnreadMessagesCounter = (): UnreadMessagesStats => {
     hasUnread: totalCount > 0,
     totalCount,
     unreadByRoom,
+    isLoading: !!roomsState.isUnreadSyncing || !!roomsState.isLoading,
   };
 };
 

package/src/main.ts

@@ -32,6 +32,8 @@ 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.
+export { useChatFonts } from './hooks/useChatFonts';
 
 // Public types — needed so consumers can type their `config` prop and
 // any event handlers they pass in.
@@ -43,4 +45,6 @@ export type {
   User,
   ConfigUser,
   MessageProps,
+  TypographyConfig,
+  RNFontSource,
 } from './types/types';

package/src/roomStore/roomsSlice.ts

@@ -96,6 +96,7 @@ export interface RoomMessagesState {
   editAction?: EditAction;
   isLoading: boolean;
   loadingText?: string;
+  isUnreadSyncing?: boolean;
   usersSet?: Record<string, any>;
   pendingNotificationJid?: string | null;
   // Server-side read markers fetched from the XMPP private store
@@ -111,6 +112,7 @@ const initialState: RoomMessagesState = {
   activeRoomJID: null,
   visibleRoomJID: null,
   isLoading: false,
+  isUnreadSyncing: false,
   editAction: {
     isEdit: false,
     roomJid: '',
@@ -362,6 +364,7 @@ const reducers = {
       state.rooms = {};
       state.visibleRoomJID = null;
       state.privateStoreMarkers = {};
+      state.isUnreadSyncing = false;
     },
     setComposing(
       state: WritableDraft<RoomMessagesState>,
@@ -386,6 +389,12 @@ const reducers = {
       state.isLoading = loading;
       state.loadingText = loadingText;
     },
+    setUnreadSyncing: (
+      state: WritableDraft<RoomMessagesState>,
+      action: PayloadAction<boolean>
+    ) => {
+      state.isUnreadSyncing = action.payload;
+    },
     setLastViewedTimestamp: (
       state: WritableDraft<RoomMessagesState>,
       action: PayloadAction<{ chatJID: string; timestamp: number }>
@@ -538,6 +547,7 @@ const reducers = {
       state.activeRoomJID = null;
       state.visibleRoomJID = null;
       state.isLoading = false;
+      state.isUnreadSyncing = false;
       state.privateStoreMarkers = {};
     },
     setActiveMessage: (
@@ -729,6 +739,7 @@ export const {
   editRoomMessage,
   setComposing,
   setIsLoading,
+  setUnreadSyncing,
   setLastViewedTimestamp,
   applyPrivateStoreMarkers,
   setRoomNoMessages,

package/src/types/types.ts

@@ -223,6 +223,45 @@ export interface PartialRoomWithMandatoryKeys {
   pinned?: boolean;
 }
 
+/**
+ * A custom font to register at runtime via `expo-font`. On React Native a
+ * font must be loaded before it can be referenced by name — there is no
+ * web-style runtime `@font-face`. Each weight is typically its own file and
+ * its own family name (RN does not synthesise weights reliably).
+ *
+ * `source` accepts what `Font.loadAsync` accepts: a remote URL string (e.g. a
+ * hosted e-Ukraine `.ttf`), or a bundled asset via `require('./e-Ukraine.ttf')`.
+ */
+export interface RNFontSource {
+  /** Family name used in text styles, e.g. "e-Ukraine" or "e-Ukraine-Medium". */
+  family: string;
+  /** Remote URL string or `require(...)` module for the font file. */
+  source: string | number;
+}
+
+/**
+ * Font configuration for the chat UI. When omitted, the component keeps the
+ * platform's default system font, so existing integrations are unaffected.
+ *
+ * Provide `fonts` for the SDK to load via expo-font, then set `fontFamily` to
+ * the family the chat should render in. If the host already loaded the font
+ * itself (e.g. via `@expo-google-fonts/*` or its own `useFonts`), pass only
+ * `fontFamily` and leave `fonts` empty.
+ */
+export interface TypographyConfig {
+  /** Family applied across the chat UI. Must be loaded (via `fonts` or by the host). */
+  fontFamily?: string;
+  /** Optional per-weight families, used where the chat renders bolder text. */
+  weightFamilies?: {
+    regular?: string;
+    medium?: string;
+    semibold?: string;
+    bold?: string;
+  };
+  /** Fonts for the SDK to load with expo-font before applying `fontFamily`. */
+  fonts?: RNFontSource[];
+}
+
 export interface IConfig {
   // ----- identity / network -----
   appId?: string;
@@ -232,6 +271,8 @@ export interface IConfig {
 
   // ----- theming -----
   colors?: { primary: string; secondary: string };
+  /** Configurable font family / weights for the chat UI. See TypographyConfig. */
+  typography?: TypographyConfig;
   messageColor?: {
     backgroundMessage: string;
     backgroundMessageUser: string;