@ethora/chat-component 26.1.1 → 26.2.2

package/README.md

@@ -116,40 +116,6 @@ npm run dev
 
 Open `http://localhost:5173`.
 
-Static reference screenshots:
-
-![Quick setup step 1](./img/readme01.png)
-![Quick setup step 2](./img/readme02.png)
-![Chat initial view](./img/readme03.png)
-
-### GIF placeholders (manual replacement)
-
-Replace each path with your recorded GIF file.
-
-1. Install + first render  
-   Target file: `img/placeholder-01-install-first-render.gif`
-   ![GIF Placeholder: Install + first render](./img/placeholder-01-install-first-render.gif)
-
-2. Login/auth flow  
-   Target file: `img/placeholder-02-login-auth-flow.gif`
-   ![GIF Placeholder: Login/auth flow](./img/placeholder-02-login-auth-flow.gif)
-
-3. Room switching + messaging  
-   Target file: `img/placeholder-03-room-switching-messaging.gif`
-   ![GIF Placeholder: Room switching + messaging](./img/placeholder-03-room-switching-messaging.gif)
-
-4. Push prompt + receive flow  
-   Target file: `img/placeholder-04-push-flow.gif`
-   ![GIF Placeholder: Push notification flow](./img/placeholder-04-push-flow.gif)
-
-5. Widget customization before/after  
-   Target file: `img/placeholder-05-widget-customization.gif`
-   ![GIF Placeholder: Widget customization](./img/placeholder-05-widget-customization.gif)
-
-6. Mobile responsive behavior  
-   Target file: `img/placeholder-06-mobile-responsive.gif`
-   ![GIF Placeholder: Mobile responsive behavior](./img/placeholder-06-mobile-responsive.gif)
-
 ## Integration Modes
 
 All modes below assume `XmppProvider` wraps `Chat`.
@@ -396,6 +362,7 @@ Below is a grouped reference for all `config` options.
 | `pushNotifications.serviceWorkerPath` | `string` | Service worker path, default `/firebase-messaging-sw.js`. |
 | `pushNotifications.serviceWorkerScope` | `string` | Service worker scope, default `/`. |
 | `pushNotifications.softAsk` | `boolean` | Do not immediately trigger browser permission prompt. |
+| `pushNotifications.onClick` | `(params) => void \| Promise<void>` | Callback invoked when the user clicks an OS push notification (including cold start via URL marker). |
 
 ## Custom Widgets and Overrides
 
@@ -481,6 +448,10 @@ npx @ethora/chat-component ethora-chat
       serviceWorkerPath: '/firebase-messaging-sw.js',
       serviceWorkerScope: '/',
       softAsk: false,
+      onClick: async ({ roomJID, messageId, url, data }) => {
+        // Your app-level routing/analytics can live here.
+        console.log('Push clicked:', { roomJID, messageId, url, data });
+      },
     },
   }}
 />

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

@@ -1,3 +1,6 @@
 import { default as React } from 'react';
-declare const ConnectionBanner: React.FC;
+interface ConnectionBannerProps {
+    message?: string;
+}
+declare const ConnectionBanner: React.FC<ConnectionBannerProps>;
 export default ConnectionBanner;

package/dist/firebase-config.d.ts

@@ -8,6 +8,7 @@ export declare const defaultConfig: {
     messagingSenderId: any;
     appId: any;
 };
+export declare const getFirebaseApp: (customConfig?: any) => FirebaseApp | null;
 export declare const getFirebaseMessaging: (customConfig?: any) => Messaging | null;
 export declare const app: FirebaseApp;
 export declare const messaging: Messaging;

package/dist/firebase-messaging-sw.js

@@ -1,16 +1,10 @@
-/* ============================================================
- * Unified Service Worker
- * Handles BOTH Firebase Cloud Messaging (FCM) background pushes
- * AND generic Web Push API events, so all push notifications
- * are captured regardless of origin.
- * ============================================================ */
-
 // ── Firebase SDK ──────────────────────────────────────────────
 importScripts('https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js');
 importScripts('https://www.gstatic.com/firebasejs/10.12.0/firebase-messaging-compat.js');
 
 // ── Dynamic Configuration ─────────────────────────────────────
-const params = new URL(self.location).searchParams;
+const params = new URL(self.location.href).searchParams;
+
 const firebaseConfig = {
   apiKey: params.get('apiKey'),
   authDomain: params.get('authDomain'),
@@ -20,24 +14,32 @@ const firebaseConfig = {
   appId: params.get('appId'),
 };
 
-// Only initialize if we have at least apiKey and appId
-if (firebaseConfig.apiKey && firebaseConfig.appId) {
-  firebase.initializeApp(firebaseConfig);
+let messaging = null;
+
+if (
+  firebaseConfig.apiKey &&
+  firebaseConfig.appId &&
+  firebaseConfig.messagingSenderId &&
+  firebaseConfig.projectId
+) {
+  if (!firebase.apps.length) {
+    firebase.initializeApp(firebaseConfig);
+  }
+  messaging = firebase.messaging();
+} else {
+//   console.warn('[SW] Firebase config missing → FCM disabled');
 }
 
-const messaging = firebase.messaging();
 const APP_URL = self.location.origin;
 
 // ── Deduplication ─────────────────────────────────────────────
-// Track message IDs handled by FCM so the generic `push` listener
-// can skip them and avoid duplicate notifications.
 const _handledByFcm = new Set();
-const DEDUP_TTL_MS = 60_000; // auto-cleanup after 60 s
+const DEDUP_TTL_MS = 60_000;
 
 function markHandledByFcm(id) {
   if (!id) return;
   _handledByFcm.add(id);
-  console.log('[SW] FCM message marked as handled:', id);
+//   console.log('[SW] FCM handled:', id);
   setTimeout(() => _handledByFcm.delete(id), DEDUP_TTL_MS);
 }
 
@@ -45,7 +47,7 @@ function wasHandledByFcm(id) {
   return id ? _handledByFcm.has(id) : false;
 }
 
-// ── Shared Helpers ────────────────────────────────────────────
+// ── Helpers ───────────────────────────────────────────────────
 function isSystemPayload(data) {
   return !data?.msgID && !data?.jid && !!data?.userJid;
 }
@@ -56,133 +58,223 @@ function buildTargetUrl(data, notification, fallbackUrl) {
   const title = notification?.title || data?.title || '';
   if (title.startsWith('http')) return title;
 
-  if (isSystemPayload(data)) return APP_URL;
-  if (!data?.jid) return APP_URL;
+  if (isSystemPayload(data)) return `${APP_URL}/?fromPush=1`;
+  if (!data?.jid) return `${APP_URL}/?fromPush=1`;
+
   const chatId = String(data.jid).split('@')[0];
-  return `${APP_URL}/chat?chatId=${encodeURIComponent(chatId)}`;
+  const messageId = data.msgID || data.messageId || data.message_id || '';
+
+  const params = new URLSearchParams({ chatId });
+  if (messageId) params.set('messageId', messageId);
+  params.set('fromPush', '1');
+
+  return `${APP_URL}/chat?${params.toString()}`;
+}
+
+function isAnyClientVisible(windowClients) {
+  return windowClients.some((c) => c.visibilityState === 'visible');
 }
 
-function postBridgeToClients(windowClients, bridgePayload) {
+function postBridgeToClients(windowClients, payload) {
   windowClients.forEach((client) => {
     client.postMessage({
       type: 'PUSH_FOREGROUND_BRIDGE',
-      payload: bridgePayload,
+      payload,
     });
   });
 }
 
-function isAnyClientVisible(windowClients) {
-  return windowClients.some((c) => c.visibilityState === 'visible');
+function normalizeRawPushPayload(event) {
+  if (!event.data) {
+//     console.warn('[SW][EMPTY_PUSH] Push without payload');
+    return {
+      sourceType: 'empty',
+      raw: {
+        title: 'New message',
+        body: '',
+        data: {},
+      },
+    };
+  }
+
+  let textPayload = '';
+
+  try {
+    textPayload = event.data.text();
+  } catch (err) {
+//     console.warn('[SW][PUSH_TEXT_READ_FAILED]', err);
+  }
+
+  if (!textPayload) {
+//     console.warn('[SW][EMPTY_PUSH_TEXT] Push payload text is empty');
+    return {
+      sourceType: 'empty',
+      raw: {
+        title: 'New message',
+        body: '',
+        data: {},
+      },
+    };
+  }
+
+  try {
+    const parsed = JSON.parse(textPayload);
+//     console.log('[SW][JSON_PUSH]', parsed);
+    return {
+      sourceType: 'json',
+      raw: parsed,
+    };
+  } catch (err) {
+/*    console.warn('[SW][TEXT_PUSH] Non-JSON push received, processing as plain text', {
+      error: err,
+      rawText: textPayload,
+    });*/
+
+    return {
+      sourceType: 'text',
+      raw: {
+        title: 'New message',
+        body: textPayload,
+        data: {},
+      },
+    };
+  }
 }
 
-// ── 1. FCM Background Messages ───────────────────────────────
-// This fires for pushes delivered through Firebase Cloud Messaging
-// when no foreground tab is handling them via onMessage().
-messaging.onBackgroundMessage((payload) => {
-  console.log('[SW] FCM onBackgroundMessage received', payload);
+// ── FCM ───────────────────────────────────────────────────────
+if (messaging) {
+  messaging.onBackgroundMessage((payload) => {
+//     console.log('[SW][FCM_PUSH]', payload);
 
-  const data = payload.data || {};
-  const notification = payload.notification || {};
-  const messageId = payload.messageId || data.msgID || null;
+    const data = payload.data || {};
+    const notification = payload.notification || {};
+    const messageId = payload.messageId || data.msgID || null;
 
-  // Mark so the generic push handler skips this one
-  markHandledByFcm(messageId);
+    markHandledByFcm(messageId);
 
-  const isSystem = isSystemPayload(data);
-  const title =
-    (isSystem ? 'System' : undefined) ||
-    notification.title ||
-    data.title ||
-    'New Message';
-  const body =
-    notification.body || data.body || 'You have a new message.';
-  const url = buildTargetUrl(data, notification, data.url);
+    const isSystem = isSystemPayload(data);
+    const title =
+      (isSystem ? 'System' : undefined) ||
+      notification.title ||
+      data.title ||
+      'New Message';
 
-  const bridgePayload = {
-    messageId,
-    notification: { title, body, image: notification.image || '/favicon.ico' },
-    data: {
-      ...data,
-      jid: data.jid || '',
-      userJid: data.userJid || '',
-      msgID: data.msgID || '',
-      workspaceId: data.workspaceId || data.workspace_id || '',
-    },
-  };
+    const body =
+      notification.body || data.body || 'You have a new message.';
 
-  const options = {
-    body,
-    icon: notification.image || '/favicon.ico',
-    badge: '/favicon.ico',
-    tag: data.tag || 'ethora-notification',
-    data: {
-      url,
-      roomJid: data.jid || null,
-      senderId: data.userJid || null,
+    const url = buildTargetUrl(data, notification, data.url);
+
+    const bridgePayload = {
       messageId,
-      workspaceId: data.workspaceId || data.workspace_id || null,
-    },
-    requireInteraction: false,
-    silent: false,
-  };
+      notification: {
+        title,
+        body,
+        image: notification.image || notification.icon || '/favicon.ico',
+      },
+      data: {
+        ...data,
+        jid: data.jid || '',
+        userJid: data.userJid || '',
+        msgID: data.msgID || '',
+        workspaceId: data.workspaceId || data.workspace_id || '',
+      },
+      meta: {
+        source: 'fcm',
+      },
+    };
+
+    const options = {
+      body,
+      icon: notification.icon || notification.image || '/favicon.ico',
+      badge: '/favicon.ico',
+      tag: data.tag || 'ethora-notification',
+      data: {
+        url,
+        roomJid: data.jid || null,
+        senderId: data.userJid || null,
+        messageId,
+        workspaceId: data.workspaceId || data.workspace_id || null,
+      },
+      requireInteraction: false,
+      silent: false,
+    };
+
+    return clients
+      .matchAll({ type: 'window', includeUncontrolled: true })
+      .then((windowClients) => {
+        postBridgeToClients(windowClients, bridgePayload);
 
-  return clients
-    .matchAll({ type: 'window', includeUncontrolled: true })
-    .then((windowClients) => {
-      postBridgeToClients(windowClients, bridgePayload);
-
-      if (!isAnyClientVisible(windowClients)) {
-        console.log(
-          `[NotifyPolicy] source=fcm_bg action=show reason=${isSystem ? 'system' : 'background'} msgId=${messageId || ''}`
-        );
-        return self.registration.showNotification(title, options);
-      } else {
-        console.log(
+        if (!isAnyClientVisible(windowClients)) {
+/*          console.log(
+            `[NotifyPolicy] source=fcm_bg action=show reason=${isSystem ? 'system' : 'background'} msgId=${messageId || ''}`
+          );*/
+          return self.registration.showNotification(title, options);
+        }
+
+/*        console.log(
           `[NotifyPolicy] source=fcm_bg action=skip reason=tab_visible msgId=${messageId || ''}`
-        );
-      }
-    });
-});
+        );*/
+      });
+  });
+}
 
-// ── 2. Generic Web Push API ───────────────────────────────────
-// This fires for ANY push delivered via the Web Push protocol,
-// including direct backend pushes for XMPP messages that are
-// NOT routed through FCM.
+// ── PUSH (WebPush / text / fallback) ──────────────────────────
 self.addEventListener('push', (event) => {
-  console.log('[SW] Generic push event received');
+//   console.log('[SW] push event');
 
-  let raw = {};
-  try {
-    if (event.data) {
-      raw = event.data.json();
-    }
-  } catch (err) {
-    console.warn('[SW] Failed to parse push payload as JSON:', err);
-    raw = { title: 'New message', body: event.data ? event.data.text() : '' };
+  const { sourceType, raw } = normalizeRawPushPayload(event);
+
+  if (!raw || typeof raw !== 'object') {
+    console.error('[SW][BROKEN_PUSH]', raw);
+    return;
   }
 
   const notification = raw.notification || {};
   const payloadData = raw.data || {};
-  const messageId = raw.messageId || payloadData.msgID || null;
+  const messageId =
+    raw.messageId ||
+    payloadData.msgID ||
+    payloadData.messageId ||
+    payloadData.message_id ||
+    null;
 
-  // Skip if FCM already handled this exact message
   if (wasHandledByFcm(messageId)) {
-    console.log(`[SW] push event skipped – already handled by FCM (msgId=${messageId})`);
+//     console.log(`[SW] push skipped – already handled by FCM (msgId=${messageId})`);
     return;
   }
 
+  if (sourceType !== 'json') {
+/*    console.log('[SW][NON_JSON_PUSH_PROCESSED]', {
+      sourceType,
+      raw,
+    });*/
+  }
+
+  if (!raw.from && !raw.fcmOptions) {
+//     console.log('[SW][NON_FCM_PUSH]', raw);
+  }
+
   const isSystem = isSystemPayload(payloadData);
+
   const title =
     (isSystem ? 'System' : undefined) ||
     notification.title ||
     raw.title ||
     'Ethora Chat';
+
   const body =
     notification.body ||
     raw.body ||
     raw.message ||
     payloadData.body ||
     'You have a new message.';
+
+  const icon =
+    raw.icon ||
+    notification.icon ||
+    notification.image ||
+    '/favicon.ico';
+
   const url = buildTargetUrl(
     payloadData,
     notification,
@@ -194,20 +286,27 @@ self.addEventListener('push', (event) => {
     notification: {
       title,
       body,
-      image: raw.icon || '/favicon.ico',
+      image: icon,
     },
     data: {
       ...payloadData,
       jid: raw.roomJid || payloadData.jid || '',
       userJid: raw.senderId || payloadData.userJid || '',
       msgID: messageId || '',
-      workspaceId: raw.workspaceId || payloadData.workspaceId || payloadData.workspace_id || '',
+      workspaceId:
+        raw.workspaceId ||
+        payloadData.workspaceId ||
+        payloadData.workspace_id ||
+        '',
+    },
+    meta: {
+      source: sourceType === 'json' ? 'webpush' : 'text_push',
     },
   };
 
   const options = {
     body,
-    icon: raw.icon || '/favicon.ico',
+    icon,
     badge: raw.badge || '/favicon.ico',
     tag: raw.tag || 'ethora-notification',
     data: {
@@ -215,7 +314,12 @@ self.addEventListener('push', (event) => {
       roomJid: raw.roomJid || payloadData.jid || null,
       senderId: raw.senderId || payloadData.userJid || null,
       messageId,
-      workspaceId: raw.workspaceId || payloadData.workspaceId || payloadData.workspace_id || null,
+      workspaceId:
+        raw.workspaceId ||
+        payloadData.workspaceId ||
+        payloadData.workspace_id ||
+        null,
+      sourceType,
     },
     requireInteraction: false,
     silent: false,
@@ -228,29 +332,30 @@ self.addEventListener('push', (event) => {
         postBridgeToClients(windowClients, bridgePayload);
 
         if (!isAnyClientVisible(windowClients)) {
-          console.log(
-            `[NotifyPolicy] source=push_bg action=show reason=${isSystem ? 'system' : 'background'} msgId=${messageId || ''}`
-          );
+/*          console.log(
+            `[NotifyPolicy] source=push_bg action=show type=${sourceType} msgId=${messageId || ''}`
+          );*/
           return self.registration.showNotification(title, options);
-        } else {
-          console.log(
-            `[NotifyPolicy] source=push_bg action=skip reason=tab_visible msgId=${messageId || ''}`
-          );
         }
+
+/*        console.log(
+          `[NotifyPolicy] source=push_bg action=skip reason=tab_visible type=${sourceType} msgId=${messageId || ''}`
+        );*/
       })
   );
 });
 
-// ── 3. Notification Click ─────────────────────────────────────
+// ── Notification Click ────────────────────────────────────────
 self.addEventListener('notificationclick', (event) => {
-  console.log('[NotifyPolicy] source=push_bg action=click_start');
+//   console.log('[NotifyPolicy] source=push_bg action=click_start');
   event.notification.close();
 
   const targetUrl =
     (event.notification.data && event.notification.data.url) || APP_URL;
-  console.log('[NotifyPolicy] source=push_bg action=click_url', {
+
+/*  console.log('[NotifyPolicy] source=push_bg action=click_url', {
     url: targetUrl,
-  });
+  });*/
 
   async function handleClick() {
     try {
@@ -258,49 +363,64 @@ self.addEventListener('notificationclick', (event) => {
         type: 'window',
         includeUncontrolled: true,
       });
-      console.log('[NotifyPolicy] source=push_bg action=clients_found', {
+
+/*      console.log('[NotifyPolicy] source=push_bg action=clients_found', {
         count: windowClients.length,
+      });*/
+
+      const clickPayload = {
+        type: 'PUSH_NOTIFICATION_CLICK',
+        data: event.notification.data || {},
+        notification: {
+          title: event.notification.title || '',
+          body: event.notification.body || '',
+        },
+      };
+
+      windowClients.forEach((client) => {
+        client.postMessage(clickPayload);
       });
 
-      // 1. Try to find an exactly matching URL
       for (const client of windowClients) {
         if (client.url === targetUrl && 'focus' in client) {
-          console.log('[NotifyPolicy] source=push_bg action=focus_exact', {
+/*          console.log('[NotifyPolicy] source=push_bg action=focus_exact', {
             url: client.url,
-          });
+          });*/
           return client.focus();
         }
       }
 
-      // 2. Try to find any client on our origin, focus it, and navigate
       for (const client of windowClients) {
         try {
           const clientOrigin = new URL(client.url).origin;
           const swOrigin = self.location.origin;
+
           if (clientOrigin === swOrigin && 'focus' in client) {
-            console.log(
+/*            console.log(
               '[NotifyPolicy] source=push_bg action=focus_and_navigate',
               { from: client.url, to: targetUrl }
-            );
+            );*/
+
             const focusedClient = await client.focus();
+
             if (focusedClient && 'navigate' in focusedClient) {
               return focusedClient.navigate(targetUrl);
             }
+
+            return focusedClient;
           }
-        } catch (e) {
-          // Ignore invalid URLs
-        }
+        } catch (_) {}
       }
 
-      // 3. Fallback: Open a new window
       if (clients.openWindow) {
-        console.log('[NotifyPolicy] source=push_bg action=open_new_window', {
+/*        console.log('[NotifyPolicy] source=push_bg action=open_new_window', {
           url: targetUrl,
-        });
+        });*/
         return clients.openWindow(targetUrl);
       }
     } catch (err) {
       console.error('[NotifyPolicy] source=push_bg action=click_error', err);
+
       if (clients.openWindow) {
         return clients.openWindow(targetUrl);
       }
@@ -310,42 +430,27 @@ self.addEventListener('notificationclick', (event) => {
   event.waitUntil(handleClick());
 });
 
-// ── 4. Push Subscription Change ───────────────────────────────
-// Fired when the browser automatically re-creates a subscription
-// (e.g. after expiry). Notify clients so they can re-register.
+// ── Debug / Subscription ──────────────────────────────────────
 self.addEventListener('pushsubscriptionchange', (event) => {
-  console.log('[SW] Push subscription changed – re-subscribing');
-
+//   console.warn('[SW][POSSIBLE_DROP] subscription changed');
   event.waitUntil(
-    self.registration.pushManager
-      .subscribe({ userVisibleOnly: true })
-      .then((subscription) => {
-        console.log(
-          '[SW] New subscription obtained:',
-          subscription.endpoint
-        );
-        return clients.matchAll().then((allClients) => {
-          allClients.forEach((client) => {
-            client.postMessage({
-              type: 'PUSH_SUBSCRIPTION_CHANGED',
-              subscription: subscription.toJSON(),
-            });
-          });
+    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((allClients) => {
+      allClients.forEach((client) => {
+        client.postMessage({
+          type: 'PUSH_SUBSCRIPTION_CHANGED',
         });
-      })
-      .catch((err) => {
-        console.error('[SW] pushsubscriptionchange – failed to re-subscribe:', err);
-      })
+      });
+    })
   );
 });
 
-// ── 5. Lifecycle ──────────────────────────────────────────────
+// ── Lifecycle ─────────────────────────────────────────────────
 self.addEventListener('activate', (event) => {
-  console.log('[SW] Service worker activated');
+//   console.warn('[SW] activated');
   event.waitUntil(clients.claim());
 });
 
-self.addEventListener('install', () => {
-  console.log('[SW] Service worker installed');
-  self.skipWaiting();
+self.addEventListener('install', (event) => {
+//   console.log('[SW] installed');
+  event.waitUntil(self.skipWaiting());
 });

package/dist/helpers/authStorage.d.ts

@@ -0,0 +1,6 @@
+import { User } from '../types/types';
+export declare const sanitizeUserForPersistentStorage: (user?: User | null) => User | null;
+export declare const hasStoredSensitiveSession: (user?: Partial<User> | null) => boolean;
+export declare const persistUserSession: (user?: User | null) => void;
+export declare const getStoredUser: (expectedAppId?: string) => User | null;
+export declare const clearStoredUser: () => void;