@ethora/chat-component 26.6.7 → 26.7.2

package/dist/assets/icons.d.ts

@@ -1,3 +1,7 @@
+export declare const GlobeIcon: ({ color, ...props }: {
+    [x: string]: any;
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const AddNewIcon: ({ color, ...props }: {
     [x: string]: any;
     color?: string;

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

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
-import { IRoom } from '../../types/types';
+import { IConfig, IRoom } from '../../types/types';
 interface ChatHeaderProps {
     currentRoom: IRoom;
     handleBackClick?: (value: boolean) => void;
 }
+export declare const shouldShowLanguageSelector: (translatesConfig: IConfig["translates"] | undefined) => boolean;
 declare const ChatHeader: React.FC<ChatHeaderProps>;
 export default ChatHeader;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+export declare const LanguageSelectorButton: React.FC;
+export default LanguageSelectorButton;

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

@@ -16,6 +16,8 @@ interface ProfileImagePlaceholderProps {
     active?: boolean;
     placeholderIcon?: React.ReactNode;
     disableOverlay?: boolean;
+    /** Show a green online-status dot on the avatar. */
+    online?: boolean;
 }
 export declare const ProfileImagePlaceholder: React.FC<ProfileImagePlaceholderProps>;
 export {};

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

@@ -4,6 +4,14 @@ interface SwitchProps {
     bgColor?: string;
     onSwitchOn?: () => void;
     onSwitchOff?: () => void;
+    /**
+     * Reflects an existing value (e.g. redux state) instead of always
+     * starting from "off". Optional and defaults to undefined so every
+     * existing fire-and-forget caller keeps its original always-starts-off
+     * behaviour unchanged - only pass this when the switch represents a
+     * real, already-known boolean.
+     */
+    checked?: boolean;
 }
 declare const Switch: React.FC<SwitchProps>;
 export default Switch;

package/dist/components/MessageBubble/MessageTranslate.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { IConfig, IMessage } from '../../types/types';
+interface MessageTranslateProps {
+    message: IMessage;
+    isUser: boolean;
+    config?: IConfig;
+}
+/**
+ * Manual-mode message translation (LinkedIn-style). Renders a "Translate"
+ * link under an incoming message; on click it calls
+ * `config.translates.onTranslate` (host-provided) - or, when the host
+ * doesn't supply one, reads whatever translation already arrived attached
+ * to the stanza (`message.translations`) - and shows the result inline
+ * with a "Show original" toggle. No default translation service is called
+ * here; a message with nothing attached and no host `onTranslate` simply
+ * has nothing to reveal (see `translation.failed`).
+ *
+ * Visibility: `config.translates.showTranslateForMessage(message)` if the host
+ * supplies it (they keep the locale logic and just tell us yes/no); otherwise
+ * we compare the message's source base-language with the reader's base-language
+ * (region ignored, so en-US vs en-CA shows nothing). The reader's FULL locale
+ * (fr-CA vs fr-FR) is still forwarded to `onTranslate` as `targetLocale`.
+ */
+declare const MessageTranslate: FC<MessageTranslateProps>;
+export default MessageTranslate;

package/dist/components/MessageBubble/TranslatedMessageBody.d.ts

@@ -0,0 +1,21 @@
+import { default as React, ReactNode } from 'react';
+interface TranslatedMessageBodyProps {
+    /** Text as sent, in the sender's language. */
+    originalText: string;
+    accentColor?: string;
+    /** Renders the translated text (markdown pipeline, mentions, etc). */
+    children: ReactNode;
+    /**
+     * Whether this message was sent by the current user. The sender already
+     * knows what they wrote, so their own messages skip the quote-plus-
+     * translation treatment and just show the original text.
+     */
+    isUser: boolean;
+}
+/**
+ * A message body that is showing a translation: the translated text reads
+ * as the primary content, with the original quoted above it for reference
+ * - skipped for the current user's own messages (see `isUser`).
+ */
+export declare const TranslatedMessageBody: React.FC<TranslatedMessageBodyProps>;
+export default TranslatedMessageBody;

package/dist/components/Notification/NotificationPermissionBanner.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { IConfig } from '../../types/types';
+interface NotificationPermissionBannerProps {
+    config?: IConfig;
+    /** Triggers the browser permission prompt + push registration. */
+    requestPermission: () => Promise<void>;
+}
+/**
+ * In-app banner nudging the user to enable browser notifications. Fully
+ * config-driven (config.pushNotifications.permissionBanner) and self-contained:
+ * it reads the live Notification permission, renders the "enable" or "blocked"
+ * variant accordingly, and hides itself when notifications are granted /
+ * unsupported / disabled. SSR-safe.
+ */
+declare const NotificationPermissionBanner: React.FC<NotificationPermissionBannerProps>;
+export default NotificationPermissionBanner;

package/dist/components/RoomComponents/ChatRoomItem.d.ts

@@ -7,5 +7,5 @@ interface ChatRoomItemProps {
     performClick: (chat: IRoom) => void;
     config: IConfig;
 }
-declare const ChatRoomItem: React.FC<ChatRoomItemProps>;
-export default ChatRoomItem;
+declare const _default: React.NamedExoticComponent<ChatRoomItemProps>;
+export default _default;

package/dist/components/RoomComponents/OnlineUsersPopover.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { RoomMember } from '../../types/types';
+interface OnlineUsersPopoverProps {
+    /** xmppUsernames currently online in this room (from useRoomPresence). */
+    onlineUsernames: string[];
+    members?: RoomMember[];
+    myXmppUsername: string;
+    isChatActive?: boolean;
+}
+declare const OnlineUsersPopover: React.FC<OnlineUsersPopoverProps>;
+export default OnlineUsersPopover;

package/dist/components/styled/StyledInputComponents/MediaComponents.d.ts

@@ -1,3 +1,7 @@
+export declare const MediaLoadingSkeleton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: number | string;
+    $height?: number | string;
+}>> & string;
 export declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FullScreenImage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
 export declare const ModalContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/firebase-messaging-sw.js

@@ -384,9 +384,10 @@ async function handlePush(raw = {}, source = 'push') {
   });
 
   const visible = isVisibleClients(windowClients);
+  const hasAnyClient = windowClients.length > 0;
 
   if (DEBUG) log('clients:', dumpClients(windowClients));
-  log('visibleClientExists:', visible);
+  log('visibleClientExists:', visible, 'anyClientExists:', hasAnyClient);
 
   await broadcastDebugMessage({
     source,
@@ -445,9 +446,20 @@ async function handlePush(raw = {}, source = 'push') {
     },
   };
 
-  if (!visible) {
+  // Calls: a client that's merely backgrounded (open, just not the
+  // visible/focused tab) is NOT the "nobody will hear this ring" case -
+  // VideoCallOverlay already rings its own OS notification for exactly
+  // that state (see its comment: this SW push is meant to be the
+  // fully-offline fallback). `visible` collapses "backgrounded but open"
+  // and "fully closed" into the same false, which duplicated that
+  // client-side ring every time the tab was merely hidden. Suppress on
+  // ANY open client for calls; regular messages keep the visible-only
+  // check they already had.
+  const suppress = isCall ? hasAnyClient : visible;
+
+  if (!suppress) {
     log('SHOW NOTIFICATION', {
-      reason: 'NO_VISIBLE_CLIENT',
+      reason: isCall ? 'NO_CLIENT_AT_ALL' : 'NO_VISIBLE_CLIENT',
       tag: options.tag,
       isCall,
     });
@@ -456,7 +468,7 @@ async function handlePush(raw = {}, source = 'push') {
   }
 
   log('SKIP NOTIFICATION', {
-    reason: 'VISIBLE_CLIENT',
+    reason: isCall ? 'CLIENT_OPEN_WILL_RING_ITSELF' : 'VISIBLE_CLIENT',
   });
 }
 

package/dist/helpers/callLogMessage.d.ts

@@ -8,4 +8,26 @@ export interface CallLogMeta {
 }
 export declare const isCallLogMessage: (message: unknown) => boolean;
 export declare const callStateHasLogData: (attrs: Record<string, any>) => boolean;
+export declare const formatCallDuration: (ms: number) => string;
 export declare const transformCallLogMessage: (message: IMessage, selfXmppUsername: string) => IMessage;
+export declare const buildLocalCallLogMessage: (params: {
+    callId: string;
+    direction: "outgoing" | "incoming";
+    durationMs: number;
+    kind: "audio" | "video";
+    selfXmppUsername: string;
+}) => IMessage;
+/**
+ * The label for a call-log entry, built at RENDER time from the callLog
+ * meta rather than read off `message.body`.
+ *
+ * transformCallLogMessage bakes an English sentence into `body` the moment
+ * the stanza arrives, which freezes the language: switch to Chinese and
+ * every call log you already received stays English forever, because the
+ * text is data by then, not a rendering. The meta (direction/duration/
+ * missed) is the actual fact - the sentence is a view of it, so it belongs
+ * where the view is. `body` stays as the fallback for entries received
+ * before this existed, and for the notification/sidebar preview paths that
+ * only have the raw message.
+ */
+export declare const formatCallLogLabel: (callLog: CallLogMeta | undefined, t: (key: string, vars?: Record<string, string | number>) => string, fallbackBody?: string) => string;

package/dist/helpers/createUserNameFromSetUser.d.ts

@@ -1,2 +1,37 @@
-import { RoomMember } from '../types/types';
+import { IMessage, RoomMember } from '../types/types';
+/**
+ * Cache-only lookup. Returns the literal "Deleted User" as a MISS sentinel
+ * when `usersSet` has no entry for `userId` yet - callers that want a
+ * better fallback (e.g. resolveSenderDisplayName below) check for that
+ * exact string rather than treating it as a real name.
+ */
 export declare const createUserNameFromSetUser: (usersSet: Record<string, RoomMember>, userId: string) => string;
+/**
+ * The sender's display name, resolved WITHOUT depending on `usersSet`
+ * having already been hydrated.
+ *
+ * `usersSet` is populated by a separate fetch (member list / presence) that
+ * can still be in flight when a message arrives - most reliably right after
+ * reconnect, when a burst of catch-up messages can land before that fetch
+ * resolves. A cache-only lookup shows the literal "Deleted User" for every
+ * one of those messages, even though the sender is very much not deleted.
+ *
+ * The message itself already carries the sender's name on the wire: every
+ * client that sends through this SDK stamps `senderFirstName` /
+ * `senderLastName` / `fullName` onto the outgoing stanza's `<data>` element
+ * (see sendTextMessage.xmpp.ts / sendTextMessageWithTranslateTag.xmpp.ts),
+ * and createMessageFromXml spreads those onto the top-level message object.
+ * Preferring that over the cache removes the timing dependency entirely for
+ * the common case, and "Deleted User" becomes what it should have always
+ * been: a rare last resort, not "usersSet hasn't loaded yet".
+ *
+ * Mirrors roomsSlice.ts's enrichMessageAuthor, which does the same
+ * self-healing for the message list - this is that same resolution used
+ * where a live decision is needed once (e.g. a notification), rather than
+ * baked into a message object that re-resolves on every store update.
+ */
+export declare const resolveSenderDisplayName: (message: Pick<IMessage, "user"> & {
+    fullName?: string;
+    senderFirstName?: string;
+    senderLastName?: string;
+}, usersSet: Record<string, RoomMember>) => string;

package/dist/helpers/isLikelyMucJid.d.ts

@@ -0,0 +1,18 @@
+export declare const isLikelyMucJid: (jid: unknown) => jid is string;
+/**
+ * True when `value` can be used as the localpart of a MUC room JID, i.e. it is
+ * safe to build `${value}@conference.<host>` from it.
+ *
+ * Ethora room localparts are always `<appId>_<roomId>`, so the underscore is a
+ * reliable discriminator against slice keys, plain flags and stray strings.
+ * Callers that already hold a full JID should use `isLikelyMucJid` instead.
+ */
+export declare const isLikelyRoomLocalpart: (value: unknown) => value is string;
+/**
+ * Normalise a room reference into a full MUC JID, or return null when the
+ * input cannot be one. Use at every point that would otherwise blindly do
+ * `chatJID.includes('@') ? chatJID : chatJID + '@' + conference`: that pattern
+ * silently manufactures a valid-looking JID out of any garbage handed to it,
+ * which is how slice keys ended up being joined as rooms.
+ */
+export declare const toRoomJid: (chatJID: unknown, conference: string | undefined) => string | null;

package/dist/helpers/resolveIconColor.d.ts

@@ -12,9 +12,11 @@ export declare const resolveIconColor: (config?: Pick<IConfig, "colors"> | null)
  * Resolve the background colour to use behind the chat's icon "chips" (attach,
  * send, microphone, file preview, etc.).
  *
- * Priority: explicit `config.colors.iconsBg` → `config.colors.secondary` →
- * white. Lets a host theme the icon backgrounds independently from `secondary`
- * via `colors.iconsBg`, while keeping the historical white default.
+ * Priority: explicit `config.colors.iconsBg` → a soft neutral default. We do
+ * NOT fall back to `colors.secondary`: that's a text/heading colour (often
+ * near-black), and using it here rendered the icon chips as harsh black
+ * squares. `secondary` also drives avatar backgrounds, so keeping it out of
+ * this resolver lets hosts theme text without blacking out the icons.
  */
 export declare const resolveIconBgColor: (config?: Pick<IConfig, "colors"> | null) => string;
 /** CSS variable read by the chat's chrome icons as their default colour. */

package/dist/helpers/scheduleAckCatchup.d.ts

@@ -0,0 +1,27 @@
+import { default as XmppClient } from '../networking/xmppClient';
+/**
+ * How long to wait for the MUC to reflect our own message back before
+ * assuming it never will. A MUC echo normally lands in ~100-300ms - far
+ * faster than a MAM round trip could answer anyway - so this only has to
+ * be generous enough not to fire during a slow-but-healthy send.
+ */
+export declare const ACK_CATCHUP_DELAY_MS = 2500;
+/** The echo is what flips `pending` to false (see addRoomMessage). */
+export declare const hasEchoLanded: (roomJID: string, messageId: string) => boolean;
+/**
+ * Safety net for a send whose MUC echo never arrives (e.g. our presence
+ * silently dropped): re-assert presence and pull history - ONCE, and only
+ * if the echo really is missing.
+ *
+ * It must stay a safety net. This used to be a poll: an immediate fetch on
+ * every send plus a retry loop re-arming every 700ms for 5s until the echo
+ * landed. Every getHistoryStanza makes the server re-send the room's last
+ * 10-20 archived messages down the socket, so one send produced ~6 MAM
+ * replies (9 worst case) - the "I get my message back 4 times" seen in the
+ * WS frames. It was self-amplifying too: a slower echo fired more history
+ * storms, and each storm's stanzas fed the reducer/persist churn that was
+ * slowing the echo down in the first place.
+ *
+ * @returns the timer, so the caller can cancel it on unmount.
+ */
+export declare const scheduleAckCatchup: (client: XmppClient, roomJID: string, messageId: string, onSettled?: () => void) => ReturnType<typeof setTimeout>;

package/dist/helpers/toBaseLanguage.d.ts

@@ -0,0 +1,8 @@
+import { Iso639_1Codes } from '../types/models/language.model';
+/**
+ * "fr-CA" -> "fr", "EN" -> "en". Region only matters for the translation
+ * service's dialect handling - everywhere else (matching a source language
+ * against a reader's, caching, `langSource`) only the base language is
+ * meaningful.
+ */
+export declare const toBaseLanguage: (locale?: string | null) => Iso639_1Codes;

package/dist/hooks/useChatSettingState.d.ts

@@ -6,4 +6,6 @@ export declare const useChatSettingState: () => {
     deleteModal: any;
     selectedUser: any;
     langSource: any;
+    translateSendEnabled: any;
+    translateMode: any;
 };

package/dist/hooks/useChatWrapperInit.d.ts

@@ -1,4 +1,4 @@
-import { IConfig } from '../types/types';
+import { IConfig, Iso639_1Codes } from '../types/types';
 import { default as XmppClient } from '../networking/xmppClient';
 interface useChatWrapperInitProps {
     roomJID: string | null | undefined;
@@ -15,5 +15,7 @@ interface useChatWrapperInitResult {
     setClient: React.Dispatch<React.SetStateAction<XmppClient | null>>;
     isConnectionLost: boolean;
 }
+export declare const resolveLegacyTranslatesLangSource: (translatesConfig?: IConfig["translates"]) => Iso639_1Codes | undefined;
+export declare const resolveExternalReaderLocaleLangSource: (readerLocale?: string) => Iso639_1Codes | undefined;
 declare const useChatWrapperInit: ({ roomJID, wasAutoSelected, config, }: useChatWrapperInitProps) => useChatWrapperInitResult;
 export default useChatWrapperInit;

package/dist/hooks/useIsMobileViewport.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobileViewport: (breakpoint?: number) => boolean;

package/dist/hooks/useMessageTranslation.d.ts

@@ -0,0 +1,28 @@
+import { IMessage } from '../types/types';
+export interface MessageTranslationState {
+    /** False when the message is already in the reader's language, or no
+     * translation is available - render the plain body, no quote. */
+    hasTranslation: boolean;
+    originalText: string;
+    /** Translation when hasTranslation, else the original - always safe to
+     * render directly. */
+    displayText: string;
+}
+/**
+ * Translation for ONE message, into the reader's language only.
+ *
+ * Pure and synchronous - no HTTP call. Every translation this client ever
+ * shows arrives over XMPP already: the sender tags outgoing messages with
+ * `<translate source="xx"/>` (see sendTextMessageWithTranslateTag) and
+ * whatever process attaches actual translations does so server-side,
+ * landing on `message.translations` when the stanza is parsed (see
+ * getDataFromXml). This function only ever reads that - it never calls a
+ * translation service itself, so there's nothing to fail when one isn't
+ * reachable, and nothing to await.
+ *
+ * A message sent before the sender had translate-sending turned on simply
+ * never got tagged, so it has no translation to show - not an error, just
+ * absence of the underlying data (see the enable/disable-translates
+ * disclaimer in LanguageSelectorModal).
+ */
+export declare const useMessageTranslation: (message: Pick<IMessage, "body" | "langSource" | "translations">, readerLocale?: string, enabled?: boolean) => MessageTranslationState;

package/dist/hooks/useRoomPresence.d.ts

@@ -0,0 +1,10 @@
+/**
+ * xmppUsernames currently ONLINE (available MUC presence) in the given room.
+ * Populated from the room's presence stanzas: an available presence marks a
+ * user online; a `type='unavailable'` presence marks them offline. When you
+ * join a room the server sends the presence of everyone already online, so the
+ * list is correct from the first render and updates live as users come/go.
+ */
+export declare const useRoomPresence: (roomJID?: string) => string[];
+/** Whether a specific member (by xmppUsername) is currently online in the room. */
+export declare const useIsUserOnline: (roomJID?: string, xmppUsername?: string) => boolean;

package/dist/hooks/useSendMessage.d.ts

@@ -1,3 +1,4 @@
+export declare const shouldTagOutgoingTranslateSource: (translatesEnabled: boolean | undefined, translateSendEnabled: boolean | undefined) => boolean;
 export declare const useSendMessage: () => {
     sendMessage: (message: string, activeRoomJID: string, isReply?: boolean, isChecked?: boolean, mainMessage?: string) => Promise<void>;
     sendMedia: (data: File, type: string, activeRoomJID: string, isReply?: boolean, isChecked?: boolean, mainMessage?: string) => Promise<void>;

package/dist/i18n/strings.d.ts

@@ -0,0 +1,15 @@
+export type UiStringTable = Record<string, string>;
+export declare const BUILTIN_STRINGS: Record<string, UiStringTable>;
+export declare const DEFAULT_UI_LANGUAGE = "en";
+/** Reduce a BCP-47 locale ("fr-CA") to its base language ("fr"), lowercased. */
+export declare const toBaseLanguage: (locale?: string | null) => string;
+/**
+ * Build the effective string table for a locale: the built-in table for that
+ * base language (falling back to English for any missing key), with host
+ * overrides from `config.i18n.strings` merged on top.
+ */
+export declare const resolveStringTable: (locale?: string | null, overrides?: UiStringTable | null) => UiStringTable;
+/** Replace `{name}` placeholders with values from `vars`. */
+export declare const interpolate: (template: string, vars?: Record<string, string | number>) => string;
+/** One-shot translate for non-React code (helpers). */
+export declare const translateKey: (key: string, locale?: string | null, overrides?: UiStringTable | null, vars?: Record<string, string | number>) => string;

package/dist/i18n/useT.d.ts

@@ -0,0 +1,33 @@
+/**
+ * UI translation hook. Reads the active locale + host overrides from
+ * `config.i18n` and returns a `t(key, vars?)` function.
+ *
+ *   const t = useT();
+ *   <SearchInput placeholder={t('search.placeholder')} />
+ *   <span>{t('presence.onlineCount', { count })}</span>
+ *
+ * Locale resolves to the base language for captions (region is only used for
+ * message translation). Missing keys fall back to English, then to the raw
+ * key, so nothing ever renders blank.
+ *
+ * When the host doesn't set `config.i18n.locale` explicitly, this falls
+ * back to `langSource` - the same reader-language state the in-chat globe
+ * picker (LanguageSelectorButton) and `config.translates.readerLocale`
+ * drive (see useChatWrapperInit's resolveExternalReaderLocaleLangSource).
+ * So picking a language in the chat changes both message translations AND
+ * static captions together, as one language switch, unless the host is
+ * explicitly managing UI locale separately via `config.i18n.locale`.
+ */
+/**
+ * The locale the UI is currently in, resolved by the same rule useT uses
+ * (explicit `config.i18n.locale`, else the reader's `langSource`).
+ *
+ * For anything Intl already localises - dates, numbers, relative times -
+ * where you need the locale itself rather than a string from the table.
+ * Without it components reach for a hardcoded 'en-US' and quietly render
+ * American dates under a Chinese UI (DateLabel did exactly that).
+ * Undefined means "no explicit choice", which Intl reads as the browser's
+ * own locale - the right default.
+ */
+export declare const useUiLocale: () => string | undefined;
+export declare const useT: () => (key: string, vars?: Record<string, string | number>) => string;