@ethora/chat-component 26.4.4 → 26.5.1

package/README.md

@@ -355,7 +355,10 @@ Below is a grouped reference for all `config` options.
 | `headerLogo` | `string \| React.ReactElement` | Custom logo in header. |
 | `headerMenu` | `() => void` | Custom menu handler. |
 | `headerChatMenu` | `() => void` | Custom room header menu handler. |
-| `colors` | `{ primary: string; secondary: string }` | Theme colors for component UI. |
+| `colors` | `{ primary; secondary; icons? }` | Theme colours. `primary` also drives icon colours and the message sender name; set `colors.icons` to give icons (attach, mic, send, file, empty-state) a colour independent of `primary`. |
+| `typography` | `TypographyConfig` | Font family + size for the chat UI: `fontFamily` (or just `googleFontsFamily`) is applied across all chat text incl. messages and sender names; `fontSize` (px) scales message text, sender names, timestamps, inputs, room names and badges. Plus loaders (`googleFontsUrl`/`fontFaces`) and weight tokens. |
+| `fallbackScreens` | `{ noUser?; noConnection?; noRoom? }` | Replace the built-in screens (Ethora login form, "Connecting...", empty room state) with your own text or React nodes. A plain string is rendered as centered text. |
+| `hiddenRooms` | `{ titles?: string[]; jids?: string[] }` | Hide specific rooms from the room list and unread counters (e.g. `{ titles: ['Main chat'] }` to suppress the auto-created default room). |
 | `roomListStyles` | `React.CSSProperties` | Styles for room list pane. |
 | `chatRoomStyles` | `React.CSSProperties` | Styles for chat pane. |
 | `noMessagesPlaceholder` | `React.ComponentType` | Replace empty-chat placeholder component (same render position as default placeholder). |
@@ -602,7 +605,7 @@ function PushPermissionButton() {
 | --- | --- | --- |
 | `Chat` | React component | Main chat component. |
 | `XmppProvider` | React provider | Provides XMPP client context for internal hooks/state. |
-| `useUnread` | hook | Returns unread counters. |
+| `useUnread` | hook | Returns unread counters (`totalCount`, per-room maps) plus a `loading` flag that stays `true` until the room list has loaded at least once. |
 | `logoutService` | service | Programmatic logout utility. |
 | `useQRCodeChat` | hook | Handle QR-based room links. |
 | `handleQRChatId` | function | Parse/process QR chat ID from URL. |
@@ -616,11 +619,11 @@ Basic hook usage:
 import { useUnread, logoutService } from '@ethora/chat-component';
 
 function HeaderActions() {
-  const { totalCount } = useUnread();
+  const { totalCount, loading } = useUnread();
 
   return (
     <div>
-      <span>Unread: {totalCount}</span>
+      <span>{loading ? 'Loading…' : `Unread: ${totalCount}`}</span>
       <button onClick={() => logoutService.performLogout()}>Logout</button>
     </div>
   );

package/dist/assets/icons.d.ts

@@ -2,10 +2,10 @@ export declare const AddNewIcon: ({ color, ...props }: {
     [x: string]: any;
     color?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const AttachIcon: (props: any) => import("react/jsx-runtime").JSX.Element;
-export declare const CloseIcon: (props: any) => import("react/jsx-runtime").JSX.Element;
-export declare const DownloadIcon: (props: any) => import("react/jsx-runtime").JSX.Element;
-export declare const RecordIcon: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const AttachIcon: ({ color, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const CloseIcon: ({ color, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const DownloadIcon: ({ color, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const RecordIcon: ({ color, ...props }: any) => import("react/jsx-runtime").JSX.Element;
 export declare const RemoveIcon: (props: any) => import("react/jsx-runtime").JSX.Element;
 export declare const SendIcon: ({ color, ...props }: {
     [x: string]: any;
@@ -22,18 +22,10 @@ export declare const SearchIcon: ({ color, ...props }: {
     [x: string]: any;
     color?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const NoSelectedChatIcon: ({ color, ...props }: {
-    [x: string]: any;
-    color?: string;
-}) => import("react/jsx-runtime").JSX.Element;
 export declare const ReferalsIcon: ({ color, ...props }: {
     [x: string]: any;
     color?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const NoMessages: ({ color, ...props }: {
-    [x: string]: any;
-    color?: string;
-}) => import("react/jsx-runtime").JSX.Element;
 export declare const ReportIcon: ({ color, ...props }: {
     [x: string]: any;
     color?: string;

package/dist/assets/illustrations/EmptyChatIllustration.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface EmptyChatIllustrationProps extends React.SVGProps<SVGSVGElement> {
+    width?: number | string;
+    height?: number | string;
+}
+export declare const EmptyChatIllustration: React.FC<EmptyChatIllustrationProps>;
+export default EmptyChatIllustration;

package/dist/assets/illustrations/NoMessagesIllustration.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface NoMessagesIllustrationProps extends React.SVGProps<SVGSVGElement> {
+    width?: number | string;
+    height?: number | string;
+}
+export declare const NoMessagesIllustration: React.FC<NoMessagesIllustrationProps>;
+export default NoMessagesIllustration;

package/dist/components/MainComponents/FallbackScreen.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface FallbackScreenProps {
+    /** A plain string is rendered as centered text; any other node as-is. */
+    content: React.ReactNode;
+    style?: React.CSSProperties;
+}
+/**
+ * Host-provided replacement for the built-in "cannot show chat" states
+ * (no user session, lost connection, no rooms). See IConfig.fallbackScreens.
+ */
+declare const FallbackScreen: React.FC<FallbackScreenProps>;
+export default FallbackScreen;

package/dist/helpers/applyTypography.d.ts

@@ -0,0 +1,4 @@
+import { TypographyConfig } from '../types/models/config.model';
+export declare function applyTypography(cfg?: TypographyConfig): void;
+/** Remove everything {@link applyTypography} injected. */
+export declare function clearTypography(): void;

package/dist/helpers/hiddenRooms.d.ts

@@ -0,0 +1,9 @@
+import { IConfig, IRoom } from '../types/types';
+type RoomLike = Pick<IRoom, 'jid' | 'title' | 'name'>;
+/**
+ * True when the room is listed in `config.hiddenRooms` (by JID or by
+ * case-insensitive title). Hidden rooms stay joined — they are only
+ * suppressed from the room list and the unread counters.
+ */
+export declare const isRoomHidden: (room: RoomLike | null | undefined, config?: Pick<IConfig, "hiddenRooms"> | null) => boolean;
+export {};

package/dist/helpers/resolveIconColor.d.ts

@@ -0,0 +1,23 @@
+import { IConfig } from '../types/types';
+/**
+ * Resolve the colour to use for the chat's icons.
+ *
+ * Priority: explicit `config.colors.icons` → `config.colors.primary` →
+ * the historical default (#0052CD). Lets a host theme every icon at once by
+ * setting `colors.primary`, while still allowing icons to be decoupled via
+ * `colors.icons`.
+ */
+export declare const resolveIconColor: (config?: Pick<IConfig, "colors"> | null) => string;
+/** CSS variable read by the chat's chrome icons as their default colour. */
+export declare const ICON_COLOR_VAR = "--ethora-icon-color";
+/**
+ * Publish the resolved icon colour on the `--ethora-icon-color` CSS variable.
+ * Chrome icons default their `fill`/`stroke` to `var(--ethora-icon-color, …)`,
+ * so setting this themes every neutral icon at once without touching call
+ * sites. When neither `colors.icons` nor `colors.primary` is set, the variable
+ * is removed and each icon falls back to its own literal default.
+ *
+ * Semantic icons (destructive red, status ticks, brand) intentionally keep
+ * their literal colours and ignore this variable. SSR-safe (no-op without DOM).
+ */
+export declare const applyIconColor: (config?: Pick<IConfig, "colors"> | null) => void;

package/dist/hooks/useTypography.d.ts

@@ -0,0 +1,8 @@
+import { TypographyConfig } from '../types/models/config.model';
+/**
+ * Loads and applies the host-provided font configuration whenever it changes.
+ * Wired into the chat root (ReduxWrapper) so the font is in place before the
+ * UI paints. No-op when `typography` is undefined — the default system font
+ * stack is kept, so existing integrations are unaffected.
+ */
+export declare function useTypography(typography?: TypographyConfig): void;

package/dist/hooks/useUnreadMessagesCounter.d.ts

@@ -10,6 +10,15 @@ interface UnreadMessagesStats {
     unreadByRoom: UnreadMessagesMap;
     displayTotal: string;
     displayByRoom: UnreadMessagesDisplayMap;
+    /**
+     * True while the unread counts are not trustworthy yet — i.e. until the
+     * room list has been populated at least once (from cache or the API), or
+     * until the first rooms load cycle finishes for an account with no rooms.
+     * Lets consumers show a spinner/skeleton instead of a misleading "0".
+     */
+    loading: boolean;
+    /** Alias of `loading` — matches the React Native SDK field name. */
+    isLoading: boolean;
 }
 export declare const useUnreadMessagesCounter: () => UnreadMessagesStats;
 export { useUnreadMessagesCounter as useUnread };

package/dist/main.css

@@ -1 +1 @@
-body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html,body,#root{height:100%;margin:0;padding:0}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background-color:#5e3fde;border-radius:6px}::-webkit-scrollbar-track{background-color:#f0f0f0}*{scrollbar-width:thin;scrollbar-color:#5e3fde #f0f0f0}.apple-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}.emoji-mart{max-width:320px;max-height:360px;overflow-y:auto;border-radius:12px;box-shadow:0 4px 12px #0000001a}.message-highlight{animation:messageHighlight 2s ease-out;transition:background-color .3s ease}@keyframes messageHighlight{0%{background-color:#2196f366;transform:scale(1.02);box-shadow:0 0 0 2px #2196f333}30%{background-color:#2196f34d;box-shadow:0 0 0 2px #2196f326}60%{background-color:#2196f333;box-shadow:0 0 0 1px #2196f31a}to{background-color:transparent;transform:scale(1);box-shadow:none}}@media(max-width:768px){.message-notification-container{left:50%!important;right:auto!important;transform:translate(-50%)!important;align-items:center!important}.message-notification-container[data-position-horizontal=left],.message-notification-container[data-position-horizontal=right]{left:50%!important;right:auto!important;transform:translate(-50%)!important}}
+body{margin:0;font-family:var( --ethora-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif );-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}html,body,#root{height:100%;margin:0;padding:0}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background-color:#5e3fde;border-radius:6px}::-webkit-scrollbar-track{background-color:#f0f0f0}*{scrollbar-width:thin;scrollbar-color:#5e3fde #f0f0f0}.apple-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}.emoji-mart{max-width:320px;max-height:360px;overflow-y:auto;border-radius:12px;box-shadow:0 4px 12px #0000001a}.message-highlight{animation:messageHighlight 2s ease-out;transition:background-color .3s ease}@keyframes messageHighlight{0%{background-color:#2196f366;transform:scale(1.02);box-shadow:0 0 0 2px #2196f333}30%{background-color:#2196f34d;box-shadow:0 0 0 2px #2196f326}60%{background-color:#2196f333;box-shadow:0 0 0 1px #2196f31a}to{background-color:transparent;transform:scale(1);box-shadow:none}}@media(max-width:768px){.message-notification-container{left:50%!important;right:auto!important;transform:translate(-50%)!important;align-items:center!important}.message-notification-container[data-position-horizontal=left],.message-notification-container[data-position-horizontal=right]{left:50%!important;right:auto!important;transform:translate(-50%)!important}}

package/dist/main.d.ts

@@ -9,4 +9,7 @@ export { useQRCodeChat, handleQRChatId } from './hooks/useQRCodeChatHandler';
 export { useInAppNotifications } from './hooks/useInAppNotifications';
 export { default as usePushNotifications } from './hooks/usePushNotifications';
 export { resendMessage } from './utils/resendMessage';
+export { applyTypography, clearTypography } from './helpers/applyTypography';
+export { useTypography } from './hooks/useTypography';
+export type { TypographyConfig, FontFaceSource, } from './types/models/config.model';
 export { ChatInputTestIds, MessageBubbleTestIds, RoomListTestIds, AuthTestIds, } from './testIds';