@ethora/chat-component 26.8.2 → 26.9.2

package/dist/main.js

@@ -1,4 +1,4 @@
-import { b3 as a, b4 as r, b5 as b, b6 as o, b7 as t, b8 as i, b9 as p, ba as u, bb as h, bc as n, bd as d, be as l, bf as f, J as m, bg as T, bh as g, bi as y, bj as I, bk as R, bl as c, bm as C, bn as k, bo as A, ai as E, aj as Q, bp as F, bq as M } from "./main-DkokKp7d.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-DaxJ3rMp.js";
 export {
   a as AuthTestIds,
   r as Chat,
@@ -10,8 +10,8 @@ export {
   u as applyTypography,
   h as clearTypography,
   n as formatFingerprint,
-  d as handleQRChatId,
-  l as isE2eeEnabled,
+  l as handleQRChatId,
+  d as isE2eeEnabled,
   f as isRefreshFatalError,
   m as logoutService,
   T as omemo,
@@ -20,8 +20,8 @@ export {
   I as refreshAuthTokensQuietly,
   R as resendMessage,
   c as useInAppNotifications,
-  C as useIsUserOnline,
-  k as usePushNotifications,
+  k as useIsUserOnline,
+  C as usePushNotifications,
   A as useQRCodeChat,
   E as useRoomMute,
   Q as useRoomPresence,

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/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/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,25 @@ 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;
+/**
+ * The config the HOST passed as a prop, published so the inner roots can
+ * theme themselves from it on the very first frame.
+ *
+ * The store copy of the config only exists after ConfigEnabler has
+ * dispatched it, which is a render later. Until then a component reading
+ * the store sees the slice default - light - and paints light tokens over
+ * the dark ones it inherits, which is the white flash a dark-mode chat
+ * showed while it started up.
+ */
+export declare const HostConfigContext: import('react').Context<Pick<IConfig, "colorScheme" | "colors" | "typography">>;
+export declare const useHostConfig: () => Pick<IConfig, "colorScheme" | "colors" | "typography">;
+/**
+ * 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,6 +133,7 @@ export interface ChatErrorInfo {
 export type ChatErrorFallbackRenderer = (context: ChatErrorInfo & {
     reset: () => void;
 }) => React.ReactNode;
+export type ChatColorScheme = 'light' | 'dark' | 'system';
 export interface IConfig {
     appId?: string;
     /**
@@ -176,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

@@ -29,6 +29,23 @@ export interface IMessage {
      * 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/version.d.ts

@@ -1 +1 @@
-export declare const ETHORA_CHAT_COMPONENT_VERSION = "26.7.4";
+export declare const ETHORA_CHAT_COMPONENT_VERSION = "26.9.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component",
-  "version": "26.8.2",
+  "version": "26.9.2",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/VisibilityModal-BKI5XKir.js

@@ -1,132 +0,0 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { useState as b, useEffect as x } from "react";
-import { v as o, a as L, n as P, u as z, aE as D, aF as I } from "./main-DkokKp7d.js";
-import { S as N, D as C, a as w, b as O, e as S, f as p } from "./SideDrawer-mSCnYOgy.js";
-o.div``;
-o.div`
-  font-size: 16px;
-  font-weight: bold;
-  color: var(--ethora-color-text, #141414);
-`;
-o.p`
-  font-size: 14px;
-  color: var(--ethora-color-text-muted, #6b7280);
-  margin-bottom: 32px;
-`;
-const $ = o.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-`, h = o.label`
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  gap: 8px;
-`, f = o.input`
-  accent-color: ${({ $radioColor: t }) => t || "var(--ethora-color-primary, #0052CD)"};
-  margin: 0px;
-`, R = o.div`
-  padding: 10px 15px;
-  margin-top: 16px;
-  color: ${({ type: t }) => t === "success" ? "#10b981" : "#ef4444"};
-  background: ${({ type: t }) => t === "success" ? "#d1fae5" : "#fee2e2"};
-  border: 1px solid
-    ${({ type: t }) => t === "success" ? "#10b981" : "#ef4444"};
-  border-radius: 4px;
-`, M = ({
-  handleCloseModal: t
-}) => {
-  const k = L(), i = P(), { user: c, config: l } = z(
-    (s) => s.chatSettingStore
-  ), y = (s) => k(I(s)), [n, m] = b(c?.isProfileOpen), [a, g] = b(c?.isAssetsOpen), [u, v] = b(null), d = (s, A) => {
-    v({ message: s, type: A }), setTimeout(() => v(null), 3e3);
-  };
-  return x(() => {
-    n !== c.isProfileOpen && D({ isProfileOpen: n }).then(({ data: s }) => {
-      y(s.user), d(i("notification.saved"), "success");
-    }).catch(() => d(i("toast.error"), "error"));
-  }, [n]), x(() => {
-    a !== c?.isAssetsOpen && D({ isAssetsOpen: a }).then(({ data: s }) => {
-      y(s.user), d(i("notification.saved"), "success");
-    }).catch(() => d(i("toast.error"), "error"));
-  }, [a]), /* @__PURE__ */ r(
-    N,
-    {
-      title: i("settings.visibility.title"),
-      onClose: t,
-      backLabel: i("action.back"),
-      children: [
-        /* @__PURE__ */ r(C, { children: [
-          /* @__PURE__ */ e(w, { children: i("settings.visibility.profileLabel") }),
-          /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ r($, { children: [
-            /* @__PURE__ */ r(h, { children: [
-              /* @__PURE__ */ e(
-                f,
-                {
-                  $radioColor: l?.colors?.primary,
-                  type: "radio",
-                  name: "ethora-profile-visibility",
-                  checked: n === !0,
-                  onChange: () => m(!0)
-                }
-              ),
-              i("settings.visibility.open")
-            ] }),
-            /* @__PURE__ */ e(p, { children: i("settings.visibility.openDescription") }),
-            /* @__PURE__ */ r(h, { children: [
-              /* @__PURE__ */ e(
-                f,
-                {
-                  $radioColor: l?.colors?.primary,
-                  type: "radio",
-                  name: "ethora-profile-visibility",
-                  checked: n === !1,
-                  onChange: () => m(!1)
-                }
-              ),
-              i("settings.visibility.restricted")
-            ] }),
-            /* @__PURE__ */ e(p, { children: i("settings.visibility.restrictedDescription") })
-          ] }) }) })
-        ] }),
-        /* @__PURE__ */ r(C, { children: [
-          /* @__PURE__ */ e(w, { children: i("settings.visibility.documentsLabel") }),
-          /* @__PURE__ */ e(O, { children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ r($, { children: [
-            /* @__PURE__ */ r(h, { children: [
-              /* @__PURE__ */ e(
-                f,
-                {
-                  $radioColor: l?.colors?.primary,
-                  type: "radio",
-                  name: "ethora-documents-visibility",
-                  checked: a === !0,
-                  onChange: () => g(!0)
-                }
-              ),
-              i("settings.visibility.full")
-            ] }),
-            /* @__PURE__ */ e(p, { children: i("settings.visibility.fullDescription") }),
-            /* @__PURE__ */ r(h, { children: [
-              /* @__PURE__ */ e(
-                f,
-                {
-                  $radioColor: l?.colors?.primary,
-                  type: "radio",
-                  name: "ethora-documents-visibility",
-                  checked: a === !1,
-                  onChange: () => g(!1)
-                }
-              ),
-              i("settings.visibility.individual")
-            ] }),
-            /* @__PURE__ */ e(p, { children: i("settings.visibility.individualDescription") })
-          ] }) }) })
-        ] }),
-        u && /* @__PURE__ */ e(R, { type: u.type, children: u.message })
-      ]
-    }
-  );
-};
-export {
-  M as default
-};