@ethora/chat-component 26.5.8 → 26.5.10

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

@@ -10,3 +10,6 @@ export declare function postReportRoom(data: PostReportRoom): Promise<any>;
 export declare function postAddRoomMember(data: PostAddRoomMember): Promise<RoomMember[]>;
 export declare function deleteRoomMember(data: DeleteRoomMember): Promise<any>;
 export declare function deleteRoom(name: string): Promise<any>;
+export declare function createChatCall(chatName: string, options?: {
+    kind?: 'audio' | 'video';
+}): Promise<void>;

package/dist/networking/callTokenStanza.d.ts

@@ -0,0 +1,13 @@
+import { Element } from 'ltx';
+export declare const onCallTokenMessage: (stanza: Element) => boolean;
+export type CallSignalState = 'ended' | 'declined' | 'cancelled' | 'rejected';
+export declare const sendCallStateSignal: (state: CallSignalState, options?: {
+    peerXmppUsername?: string | null;
+    callId?: string | null;
+    roomBareName?: string | null;
+}) => void;
+export declare const sendCallInviteSignal: (kind: "audio" | "video", options: {
+    peerXmppUsername: string;
+    roomBareName: string;
+    callId?: string | null;
+}) => void;

package/dist/roomStore/callSlice.d.ts

@@ -0,0 +1,37 @@
+export type CallPhase = 'idle' | 'requesting' | 'ringing-incoming' | 'connecting' | 'in-call' | 'error';
+export type CallDirection = 'outgoing' | 'incoming' | null;
+export type CallKind = 'audio' | 'video';
+export interface CallState {
+    phase: CallPhase;
+    direction: CallDirection;
+    kind: CallKind;
+    roomJid: string | null;
+    roomName: string | null;
+    roomBareName: string | null;
+    callId: string | null;
+    peerXmppUsername: string | null;
+    token: string | null;
+    error: string | null;
+    startedAt: number | null;
+}
+export declare const startOutgoingCall: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<{
+    roomJid: string;
+    roomName?: string | null;
+    roomBareName?: string | null;
+    kind?: CallKind;
+    peerXmppUsername?: string | null;
+}, "call/startOutgoingCall">, setIncomingCallToken: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<{
+    roomJid: string;
+    roomName?: string | null;
+    roomBareName?: string | null;
+    token: string;
+    kind?: CallKind;
+    callId?: string | null;
+    peerXmppUsername?: string | null;
+}, "call/setIncomingCallToken">, setOutgoingCallToken: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<{
+    roomJid: string;
+    token: string;
+    callId?: string | null;
+}, "call/setOutgoingCallToken">, acceptIncomingCall: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"call/acceptIncomingCall">, declineIncomingCall: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"call/declineIncomingCall">, endCall: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"call/endCall">, setCallError: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<string, "call/setCallError">, setCallPhase: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<CallPhase, "call/setCallPhase">, setCallKind: import('@reduxjs/toolkit').ActionCreatorWithOptionalPayload<CallKind, "call/setCallKind">, resetCall: import('@reduxjs/toolkit').ActionCreatorWithoutPayload<"call/resetCall">;
+declare const _default: import('redux').Reducer<import('immer').WritableDraft<CallState>>;
+export default _default;

package/dist/roomStore/index.d.ts

@@ -4,10 +4,12 @@ declare const rootReducer: Reducer<{
     chatSettingStore: any;
     rooms: any;
     roomHeapSlice: import('./roomHeapSlice').roomHeapSliceState;
+    call: import('immer').WritableDraft<import('./callSlice').CallState>;
 }, import('redux').UnknownAction, Partial<{
     chatSettingStore: any;
     rooms: any;
     roomHeapSlice: import('./roomHeapSlice').roomHeapSliceState;
+    call: import('immer').WritableDraft<import('./callSlice').CallState>;
 }>>;
 export type RootState = ReturnType<typeof rootReducer>;
 export declare const getActiveRoom: (state: RootState) => IRoom | null;
@@ -15,11 +17,13 @@ export declare const store: import('@reduxjs/toolkit').EnhancedStore<{
     chatSettingStore: any;
     rooms: any;
     roomHeapSlice: import('./roomHeapSlice').roomHeapSliceState;
+    call: import('immer').WritableDraft<import('./callSlice').CallState>;
 }, AnyAction, import('@reduxjs/toolkit').Tuple<[import('redux').StoreEnhancer<{
     dispatch: import('redux-thunk').ThunkDispatch<{
         chatSettingStore: any;
         rooms: any;
         roomHeapSlice: import('./roomHeapSlice').roomHeapSliceState;
+        call: import('immer').WritableDraft<import('./callSlice').CallState>;
     }, undefined, import('redux').UnknownAction>;
 }>, import('redux').StoreEnhancer]>>;
 export type AppDispatch = typeof store.dispatch;

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

@@ -5,6 +5,46 @@ import { MessageBubble, MessageProps, IMessage } from './message.model';
 import { Iso639_1Codes } from './language.model';
 import { default as React } from 'react';
 import { MessageNotificationToastProps } from '../../components/MessageNotification/MessageNotificationToast';
+/**
+ * Override the icons used by the in-call control bar and the incoming-call
+ * ring screen. Each value is any React node (an <svg>, an <img>, an icon
+ * component element). When omitted, the chat's built-in icon is used. The
+ * mic/camera/screen-share toggles take separate on/off icons so the host can
+ * express the active vs muted state however they like.
+ */
+export interface VideoCallIcons {
+    micOn?: React.ReactNode;
+    micOff?: React.ReactNode;
+    cameraOn?: React.ReactNode;
+    cameraOff?: React.ReactNode;
+    screenShareOn?: React.ReactNode;
+    screenShareOff?: React.ReactNode;
+    hangup?: React.ReactNode;
+    accept?: React.ReactNode;
+    decline?: React.ReactNode;
+}
+export interface VideoCallsConfig {
+    enabled: boolean;
+    livekitUrl: string;
+    allowedRoomTypes?: Array<'private'>;
+    /**
+     * Show the audio-only call button next to the video-call button. Off by
+     * default: it's a separate opt-in feature. An audio call uses the same call
+     * backend as video (no server changes needed); the client just starts the
+     * session with `kind: 'audio'` so no camera track is published, and the
+     * callee learns the kind from the direct `call-invite` signal. Requires
+     * `enabled` and a `livekitUrl` like video calls.
+     */
+    enableAudioCalls?: boolean;
+    /** Start a video call with the camera already on. Default true. */
+    startWithCameraOn?: boolean;
+    /** Start a call with the microphone already on. Default true. */
+    startWithMicOn?: boolean;
+    /** Show the screen-share control. Default true. */
+    showScreenShare?: boolean;
+    /** Custom icons for the call control bar / ring screen. See VideoCallIcons. */
+    icons?: VideoCallIcons;
+}
 export interface FBConfig {
     apiKey: string;
     authDomain: string;
@@ -333,4 +373,5 @@ export interface IConfig {
             source?: 'service_worker' | 'foreground';
         }) => void | Promise<void>;
     };
+    videoCalls?: VideoCallsConfig;
 }

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

@@ -32,6 +32,13 @@ export interface IMessage {
     size?: string;
     xmppId?: string;
     xmppFrom?: string;
+    callLog?: {
+        callId: string;
+        direction: 'outgoing' | 'incoming';
+        durationMs: number;
+        missed: boolean;
+        kind: 'audio' | 'video';
+    };
 }
 export interface ReactionMessage {
     emoji: string[];

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const ETHORA_CHAT_COMPONENT_VERSION = "26.02.22";
+export declare const ETHORA_CHAT_COMPONENT_VERSION = "26.03.28";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component",
-  "version": "26.5.8",
+  "version": "26.5.10",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -29,6 +29,8 @@
   "dependencies": {
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
+    "@livekit/components-react": "^2.9.20",
+    "@livekit/components-styles": "^1.2.0",
     "@reduxjs/toolkit": "^2.8.2",
     "@types/styled-components": "^5.1.34",
     "@xmpp/client": "^0.13.6",
@@ -36,6 +38,7 @@
     "emoji-mart": "^5.6.0",
     "firebase": "^11.9.1",
     "js-sha256": "^0.11.1",
+    "livekit-client": "^2.18.3",
     "ltx": "^3.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/public/firebase-messaging-sw.js

@@ -184,6 +184,54 @@ function pickImage(raw = {}, data = {}, notification = {}) {
   return data.image || notification.image || raw.image || undefined;
 }
 
+// ── CALL DETECTION ────────────────────────────────────────────
+// Mirror of helpers/callPush.ts isCallPush(). A backgrounded call push must
+// (a) read as a call (persistent, call-styled title) and (b) carry its FULL
+// data payload through to the click handler — otherwise the app's isCallPush()
+// sees only {url,messageId,...} and can't raise the ring screen.
+function pickField(data, keys) {
+  for (let i = 0; i < keys.length; i += 1) {
+    const v = data && data[keys[i]];
+    if (v !== undefined && v !== null && String(v).trim() !== '') {
+      return String(v).trim();
+    }
+  }
+  return '';
+}
+
+function isCallPushData(data) {
+  if (!data) return false;
+  const marker = pickField(data, [
+    'type',
+    'pushType',
+    'category',
+    'messageType',
+    'event',
+  ]).toLowerCase();
+  if (
+    marker === 'call' ||
+    marker === 'incoming-call' ||
+    marker === 'call-token' ||
+    marker === 'call-invite'
+  ) {
+    return true;
+  }
+  const callId = pickField(data, ['callId', 'callid', 'callID']);
+  const kind = pickField(data, ['kind']).toLowerCase();
+  const hasCallField =
+    !!pickField(data, ['callToken', 'livekitToken']) ||
+    !!pickField(data, ['callKind']) ||
+    kind === 'audio' ||
+    kind === 'video';
+  return !!callId && hasCallField;
+}
+
+function callPushKind(data) {
+  return pickField(data, ['callKind', 'kind']).toLowerCase() === 'audio'
+    ? 'audio'
+    : 'video';
+}
+
 function extractMessageId(raw = {}, data = {}) {
   return (
     raw.messageId ||
@@ -356,14 +404,40 @@ async function handlePush(raw = {}, source = 'push') {
     dedupKey,
   });
 
+  const isCall = isCallPushData(data);
+  const callerName = isCall
+    ? pickField(data, [
+        'callerName',
+        'callerDisplayName',
+        'senderName',
+        'title',
+      ])
+    : '';
+  const callId = isCall
+    ? pickField(data, ['callId', 'callid', 'callID'])
+    : '';
+
+  // Call pushes: a call-styled title, a tag keyed on the callId so repeat
+  // call-token pushes replace (not stack), and requireInteraction so the
+  // ring notification persists until the user answers/dismisses.
+  const notifTitle = isCall
+    ? `Incoming ${callPushKind(data)} call${callerName ? ` · ${callerName}` : ''}`
+    : title;
+  const notifBody = isCall ? 'Tap to answer' : body;
+
   const options = {
-    body,
+    body: notifBody,
     icon,
     badge,
     image,
-    tag: dedupKey,
-    renotify: false,
+    tag: isCall ? `call:${callId || dedupKey}` : dedupKey,
+    renotify: isCall,
+    requireInteraction: isCall,
+    // Spread the ORIGINAL payload first so the click handler's isCallPush()
+    // sees the full call fields (callId/callToken/kind/room); our routing
+    // fields win on top.
     data: {
+      ...data,
       url,
       messageId,
       dedupKey,
@@ -375,9 +449,10 @@ async function handlePush(raw = {}, source = 'push') {
     log('SHOW NOTIFICATION', {
       reason: 'NO_VISIBLE_CLIENT',
       tag: options.tag,
+      isCall,
     });
 
-    return self.registration.showNotification(title, options);
+    return self.registration.showNotification(notifTitle, options);
   }
 
   log('SKIP NOTIFICATION', {