@ethora/chat-component 26.8.1 → 26.9.0

package/dist/main.d.ts

@@ -32,3 +32,5 @@ export type { Iso639_1Codes, Language, LanguageOptions, } from './types/models/l
 export type { CustomComponentsContextValue, CustomScrollableAreaProps, DaySeparatorProps, NewMessageLabelProps, DecoratedMessage, ScrollControllerApi, } from './types/models/customComponents.model';
 export type { SendInputProps } from './components/styled/SendInput';
 export type { xmppSettingsInterface, XmppClientInterface, MediaUploadData, } from './types/models/xmpp.model';
+export { omemo, isE2eeEnabled, formatFingerprint } from './e2ee';
+export type { DeviceInfo, Trust } from './e2ee';

package/dist/main.js

@@ -1,27 +1,30 @@
-import { b2 as a, b3 as r, b4 as b, b5 as o, b6 as t, b7 as h, b8 as u, b9 as i, ba as p, bb as n, bc as d, J as l, bd as T, be as f, bf as y, bg as I, bh as R, bi as c, bj as g, bk as m, ah as C, ai as k, bl as A, bm as Q } from "./main-DmtEeYji.js";
+import { b5 as a, b6 as r, b7 as b, b8 as o, b9 as t, ba as i, bb as p, bc as u, bd as h, be as n, bf as l, bg as d, bh as f, L as m, bi as T, bj as g, bk as y, bl as I, bm as R, bn as c, bo as k, bp as C, bq as A, ak as E, al as Q, br as F, bs as M } from "./main-BHtKhpBZ.js";
 export {
   a as AuthTestIds,
   r as Chat,
   b as ChatInputTestIds,
   o as MessageBubbleTestIds,
   t as RefreshFatalError,
-  h as RoomListTestIds,
-  u as XmppProvider,
-  i as applyTypography,
-  p as clearTypography,
-  n as handleQRChatId,
-  d as isRefreshFatalError,
-  l as logoutService,
-  T as parseQuickReplies,
-  f as refreshAuthTokens,
-  y as refreshAuthTokensQuietly,
-  I as resendMessage,
-  R as useInAppNotifications,
-  c as useIsUserOnline,
-  g as usePushNotifications,
-  m as useQRCodeChat,
-  C as useRoomMute,
-  k as useRoomPresence,
-  A as useTypography,
-  Q as useUnread
+  i as RoomListTestIds,
+  p as XmppProvider,
+  u as applyTypography,
+  h as clearTypography,
+  n as formatFingerprint,
+  l as handleQRChatId,
+  d as isE2eeEnabled,
+  f as isRefreshFatalError,
+  m as logoutService,
+  T as omemo,
+  g as parseQuickReplies,
+  y as refreshAuthTokens,
+  I as refreshAuthTokensQuietly,
+  R as resendMessage,
+  c as useInAppNotifications,
+  k as useIsUserOnline,
+  C as usePushNotifications,
+  A as useQRCodeChat,
+  E as useRoomMute,
+  Q as useRoomPresence,
+  F as useTypography,
+  M as useUnread
 };

package/dist/networking/api-requests/auth.api.d.ts

@@ -19,5 +19,14 @@ export declare const signInWithGoogle: () => Promise<{
     idToken: string;
     credential: import('firebase/auth').OAuthCredential;
 }>;
-export declare function uploadFile(formData: FormData, activeRoomJID: string): Promise<import('axios').AxiosResponse<any, any, {}>>;
+export interface UploadFileOptions {
+    /**
+     * The payload is ciphertext the caller sealed (e2ee rooms). Tells the
+     * backend to store it verbatim: no thumbnail, no duration/page probe, and
+     * `mimetype` recorded as declared rather than inferred. Set on the form
+     * BEFORE the secure/legacy split so both routes carry it.
+     */
+    clientEncrypted?: boolean;
+}
+export declare function uploadFile(formData: FormData, activeRoomJID: string, options?: UploadFileOptions): Promise<import('axios').AxiosResponse<any, any, {}>>;
 export declare function ensureUserFromMy(user: User | null | undefined): Promise<User | null>;

package/dist/networking/api-requests/rooms.api.d.ts

@@ -15,7 +15,7 @@ export declare function unmuteRoom(chatName: string): Promise<{
     muted: boolean;
 } | undefined>;
 export declare function postRoom(data: PostRoom): Promise<any>;
-export declare function postPrivateRoom(username: string, title?: string): Promise<ApiRoom>;
+export declare function postPrivateRoom(username: string, e2ee?: boolean): Promise<ApiRoom>;
 export declare function postReportRoom(data: PostReportRoom): Promise<any>;
 export declare function postAddRoomMember(data: PostAddRoomMember): Promise<RoomMember[]>;
 export declare function deleteRoomMember(data: DeleteRoomMember): Promise<any>;

package/dist/networking/authRefresh.d.ts

@@ -103,6 +103,12 @@ type CredentialLike = Partial<Pick<User, 'xmppUsername' | 'refreshToken' | 'toke
 export declare function markCurrentSessionDead(): void;
 export declare function isSessionDead(candidate: CredentialLike): boolean;
 export declare function clearDeadSessionLatch(): void;
+/**
+ * Single-flight wrapper: several requests can fail with the same dead
+ * refresh token at once (a burst of 401s right after the token dies), and
+ * without this each would call the host's `loginFunction` independently.
+ */
+export declare function attemptHostRecovery(): Promise<boolean>;
 /** Test seam: drops any shared in-flight promise between cases. */
 export declare function __resetAuthRefreshStateForTests(): void;
 export {};

package/dist/networking/xmpp/sendMediaMessage.xmpp.d.ts

@@ -1,2 +1,13 @@
 import { Client } from '@xmpp/client';
-export declare function sendMediaMessage(client: Client, roomJID: string, data: any, id: string): void;
+/**
+ * What <body> carries in an e2ee room: the key material for each sealed
+ * attachment, in the same order as `attachments` / the flat fields on <data>.
+ * The real mimetype and filename are not here - they are inside each sealed
+ * payload (see e2ee/fileEnvelope.ts), so they survive exactly as long as the
+ * bytes do and cannot be stripped off in transit.
+ */
+export interface E2eeMediaBody {
+    v: 1;
+    keys: string[];
+}
+export declare function sendMediaMessage(client: Client, roomJID: string, data: any, id: string): Promise<void>;

package/dist/networking/xmpp/sendTextMessage.xmpp.d.ts

@@ -1,3 +1,3 @@
 import { Client } from '@xmpp/client';
 import { IMentionSpan } from '../../types/types';
-export declare const sendTextMessage: (client: Client, roomJID: string, firstName: string, lastName: string, photo: string, walletAddress: string, userMessage: string, notDisplayedValue?: string, isReply?: boolean, showInChannel?: boolean, mainMessage?: string, devServer?: string, customId?: string, mentions?: IMentionSpan[]) => boolean;
+export declare const sendTextMessage: (client: Client, roomJID: string, firstName: string, lastName: string, photo: string, walletAddress: string, userMessage: string, notDisplayedValue?: string, isReply?: boolean, showInChannel?: boolean, mainMessage?: string, devServer?: string, customId?: string, mentions?: IMentionSpan[]) => Promise<boolean>;

package/dist/networking/xmpp/sendTextMessageWithTranslateTag.xmpp.d.ts

@@ -13,4 +13,4 @@ export declare const sendTextMessageWithTranslateTag: (client: Client, stanzaMes
     mainMessage?: string;
     devServer?: string;
     mentions?: IMentionSpan[];
-}, source: Iso639_1Codes, customId?: string) => boolean;
+}, source: Iso639_1Codes, customId?: string) => Promise<boolean>;

package/dist/networking/xmppClient.d.ts

@@ -109,6 +109,45 @@ export declare class XmppClient implements XmppClientInterface {
      */
     private authRecoveryAttempts;
     private maxAuthRecoveryAttempts;
+    /**
+     * True for the whole span of a bounded, self-healing credential
+     * refresh - from the moment `recoverFromAuthFailure` commits to trying
+     * again through to it either reconnecting online or giving up. While
+     * this is true, `status` cycles through 'auth_failed' -> 'offline' ->
+     * 'connecting' purely as a side effect of the refresh-and-reconnect
+     * dance, not because anything is actually wrong with the network - see
+     * `isRecoveringAuth` and its use in useChatWrapperInit's
+     * `isStatusConnectionLost`.
+     */
+    private authRecoveryActive;
+    /**
+     * Whether a bounded, provider-backed credential recovery is currently
+     * in flight (see `authRecoveryActive` above). Consumers use this to
+     * avoid painting a "Connection lost" banner for a recoverable, expected
+     * token refresh - only a status change that happens OUTSIDE this window
+     * (a real socket/network drop, or a recovery that has already given up)
+     * should read as a genuine connection loss.
+     */
+    get isRecoveringAuth(): boolean;
+    /**
+     * Bug C, part 2: a client that has never once reached 'online' is
+     * mid-FIRST-connect, not "lost" - the WS handshake + SASL bind for a
+     * brand new session routinely spends a second or two sitting in
+     * 'connecting'/'offline' before its first 'online', and
+     * isStatusConnectionLost used to paint that identically to a real
+     * dropped connection, flashing "Connection lost. Retrying..." on every
+     * cold start (measured live: ~2s, samples 4-13 of a 200ms poll) even
+     * though nothing had ever been connected in the first place.
+     *
+     * Set once, on the first 'online' event, and deliberately never reset -
+     * a later real drop (offline/error) or auth-triggered reconnect must
+     * still read as connection-lost once this session has actually been
+     * online before. `authFailureDetected`/`authRecoveryAttempts` reset on
+     * every reconnect; this one is a one-way latch for the life of the
+     * client instance.
+     */
+    private everOnline;
+    get hasEverBeenOnline(): boolean;
     /**
      * Inject (or replace) the callback used to fetch fresh XMPP
      * credentials after a SASL `not-authorized`. The provider refreshes

package/dist/roomStore/storage.d.ts

@@ -1,4 +1,5 @@
-import { default as createWebStorage } from 'redux-persist/lib/storage/createWebStorage';
+import { default as createWebStorageImport } from 'redux-persist/lib/storage/createWebStorage';
+declare const createWebStorage: typeof createWebStorageImport;
 export declare const isQuotaExceededError: (error: unknown) => boolean;
 export declare const withQuotaHandling: (engine: ReturnType<typeof createWebStorage>) => ReturnType<typeof createWebStorage>;
 declare const storage: {

package/dist/styles/tokens.d.ts

@@ -1,15 +1,19 @@
 import { CSSProperties } from 'react';
-import { IConfig, TypographyConfig } from '../types/types';
+import { ChatColorScheme, IConfig, TypographyConfig } from '../types/types';
 /** Mix `hex` toward white by `amount` (0-1). Used for soft tints. */
 export declare const tintColor: (hex: string, amount: number) => string;
 /** Mix `hex` toward black by `amount` (0-1). Used for hover/pressed shades. */
 export declare const shadeColor: (hex: string, amount: number) => string;
+/** Mix `a` toward `b` by `amount` (0-1). Used for dark-scheme tints. */
+export declare const mixColor: (a: string, b: string, amount: number) => string;
+/** The scheme actually rendered: `'system'` resolved against the OS. */
+export type ResolvedColorScheme = 'light' | 'dark';
 export type ThemeTokenMap = Record<string, string>;
 /**
  * Build the full `--ethora-*` CSS variable map from the host's config.
  * Pure function - safe to call outside the browser (SSR, tests).
  */
-export declare function buildThemeTokens(colors?: IConfig['colors'], typography?: TypographyConfig): ThemeTokenMap;
+export declare function buildThemeTokens(colors?: IConfig['colors'], typography?: TypographyConfig, scheme?: ResolvedColorScheme): ThemeTokenMap;
 /**
  * The class the chat's root element carries; useful for scoping global CSS.
  * Re-exported from `styles/classNames`, which owns every class name this
@@ -21,7 +25,13 @@ export { CHAT_ROOT_CLASS } from './classNames';
  * the chat root element's inline `style` so the variables are scoped to the
  * chat subtree wherever the root can carry them.
  */
-export declare function useThemeTokenStyle(colors?: IConfig['colors'], typography?: TypographyConfig): CSSProperties;
+export declare function useThemeTokenStyle(colors?: IConfig['colors'], typography?: TypographyConfig, scheme?: ResolvedColorScheme): CSSProperties;
 export declare function ThemeTokens({ config, }: {
-    config?: Pick<IConfig, 'colors' | 'typography'>;
+    config?: Pick<IConfig, 'colors' | 'typography' | 'colorScheme'>;
 }): null;
+/**
+ * Resolve `config.colorScheme` to the scheme to render. `'system'` tracks the
+ * OS setting live; anything else (including unset) is taken as given, with
+ * `'light'` as the default so existing integrations are unchanged.
+ */
+export declare function useResolvedColorScheme(scheme?: ChatColorScheme): ResolvedColorScheme;

package/dist/types/models/config.model.d.ts

@@ -133,8 +133,23 @@ export interface ChatErrorInfo {
 export type ChatErrorFallbackRenderer = (context: ChatErrorInfo & {
     reset: () => void;
 }) => React.ReactNode;
+export type ChatColorScheme = 'light' | 'dark' | 'system';
 export interface IConfig {
     appId?: string;
+    /**
+     * End-to-end encryption (OMEMO 2, XEP-0384).
+     *
+     * Off by default, and off means nothing changes: no keys are generated, no
+     * PEP node is touched, and stanzas are built exactly as before. With it on,
+     * the SDK publishes this device's keys after connecting and encrypts
+     * messages in rooms the backend marked `e2ee` - other rooms stay plain.
+     *
+     * Requires a backend that reports `e2ee` per chat and an XMPP server that
+     * lets members read each other's OMEMO PEP nodes (`access_model: open`).
+     */
+    e2ee?: {
+        enabled: boolean;
+    };
     disableHeader?: boolean;
     disableMedia?: boolean;
     /** Composer attachment limits. Applies to the built-in SendInput. */
@@ -162,6 +177,24 @@ export interface IConfig {
         /** Documents above this are not auto-rendered. Default 25. */
         maxFileSizeMb?: number;
     };
+    /**
+     * Light or dark UI. `'system'` follows the viewer's OS / browser setting
+     * (`prefers-color-scheme`) and updates live when it changes.
+     *
+     * Defaults to `'light'`, which is exactly the chat as it looked before
+     * this option existed. Surfaces, text, borders and bubbles switch to a
+     * dark palette; `colors.icons`, `colors.iconsBg`, the bubble/input
+     * colours and `backgroundChat` are used as given in both schemes.
+     * `colors.primary` is the exception: in dark it is lightened slightly so
+     * primary-coloured text and icons stay legible on the dark surface while
+     * buttons keep white text on them (see `--ethora-color-primary-text` for
+     * the text-only variant). Pass an already-dark-suitable `primary` if the
+     * exact brand value matters more. The
+     * scheme is scoped to the chat's own elements - the host page is not
+     * touched, so a host with its own dark mode should pass its resolved
+     * choice here.
+     */
+    colorScheme?: ChatColorScheme;
     colors?: {
         primary: string;
         secondary: string;

package/dist/types/models/message.model.d.ts

@@ -17,8 +17,35 @@ export interface IMessage {
     locationPreview?: string;
     mimetype?: string;
     location?: string;
+    attachmentId?: string;
     pending?: boolean;
     failed?: boolean;
+    /**
+     * Sent in clear in a room that is supposed to be end-to-end encrypted.
+     *
+     * Derived locally, never trusted from the sender: in an `e2ee` room any
+     * message that did not arrive inside an OMEMO payload is unprotected,
+     * whatever it claims about itself. The bubble marks these so nobody
+     * mistakes the room's badge for a guarantee about this message.
+     */
+    unencrypted?: boolean;
+    /**
+     * Attachments on this message are sealed; `clientEncrypted` is set on the
+     * stanza and these open them, one key per attachment, in attachment order.
+     *
+     * Lifted by getDataFromXml out of the OMEMO-decrypted <body>, which is the
+     * only part of a media stanza that is encrypted - so an undecryptable
+     * message has the ciphertext URLs and no keys, and stays unopenable.
+     */
+    e2eeKeys?: string[];
+    /**
+     * Set by the sender when this message's attachments are sealed. Stamped on
+     * <data>, which rides in the clear, so it survives a body that could not be
+     * decrypted - which is exactly when a renderer most needs to know the bytes
+     * are ciphertext rather than a corrupt file. A string, because it comes off
+     * an XML attribute.
+     */
+    clientEncrypted?: string;
     timestamp?: number;
     showInChannel?: string;
     activeMessage?: boolean;

package/dist/types/models/room.model.d.ts

@@ -27,6 +27,14 @@ export interface IRoom {
     roomBg: string;
     members?: RoomMember[];
     type?: 'public' | 'group' | 'private';
+    /**
+     * End-to-end encrypted room (OMEMO 2), as the backend reports it on
+     * `GET /v1/chats/my`. Set once when the room is created and never changed:
+     * flipping it would either leak plaintext into a room the other side reads
+     * as encrypted, or drop encryption the other side relies on. The SDK only
+     * runs its OMEMO path for rooms carrying this flag.
+     */
+    e2ee?: boolean;
     creteadAt?: string;
     appId?: string;
     createdAt?: string;
@@ -95,6 +103,8 @@ export interface ApiRoomLastMessage {
 export interface ApiRoom {
     name: string;
     type: 'public' | 'group' | 'private';
+    /** See IRoom.e2ee. Passed straight through by createRoomFromApi. */
+    e2ee?: boolean;
     title?: string;
     description?: string;
     picture?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component",
-  "version": "26.8.1",
+  "version": "26.9.0",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -49,6 +49,9 @@
     "@emoji-mart/react": "^1.1.1",
     "@livekit/components-react": "^2.9.20",
     "@livekit/components-styles": "^1.2.0",
+    "@noble/ciphers": "^2.4.0",
+    "@noble/curves": "^2.4.0",
+    "@noble/hashes": "^2.4.0",
     "@reduxjs/toolkit": "^2.8.2",
     "@types/styled-components": "^5.1.34",
     "@xmpp/client": "^0.13.6",