@ethora/chat-component-rn 26.5.16 → 26.5.17

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;