@snugdesk/whatsapp-widget 0.1.7 → 0.1.9

package/README.md

@@ -25,7 +25,13 @@ npm install @snugdesk/core
 npm install @snugdesk/whatsapp-widget
 ```
 
-The widget bundle brings its own runtime dependencies (`aws-amplify`, `@aws-amplify/api-graphql`, `@aws-sdk/client-s3`, `@ctrl/ngx-emoji-mart`, `ngx-avatars`, `ngx-infinite-scroll`, `ngx-skeleton-loader`, `moment-timezone`, `libphonenumber-js`, `sort-nested-json`, `uuid`, …). No extra manual installs are needed unless you want to pin specific versions in your workspace.
+The widget expects the host app to provide Amplify packages (peer dependencies). This library supports Amplify v5 only. If your app does not already use Amplify, install them explicitly:
+
+```bash
+npm install aws-amplify@^5 @aws-amplify/api-graphql@^3
+```
+
+Other runtime dependencies are bundled (`@aws-sdk/client-s3`, `@ctrl/ngx-emoji-mart`, `ngx-avatars`, `ngx-infinite-scroll`, `ngx-skeleton-loader`, `moment-timezone`, `libphonenumber-js`, `sort-nested-json`, `uuid`, …).
 
 ---
 
@@ -166,6 +172,16 @@ Ensure you render the widget only after you have a fresh token to avoid the comp
 
 ---
 
+## 🧩 Amplify Configuration Behavior
+
+The widget can run in two modes without any extra setup from third parties:
+
+- If the host already configured Amplify and its AppSync endpoint matches the widget default (`defaultAppSyncConfig.endpoint`), the widget will **reuse the host config** and **skip** `Amplify.configure`.
+- The widget honors the host AppSync auth mode when it reuses the host config (for example, `API_KEY` vs `AWS_LAMBDA`).
+- Otherwise, the widget will **configure Amplify itself** using its default configuration (`AWS_LAMBDA`).
+
+---
+
 ## 🎨 Assets & Styling
 
 The library bundles icons, background artwork, and shared CSS under `@snugdesk/whatsapp-widget/assets`. To make them available during your build, add the folder to the Angular CLI asset list:

package/fesm2022/snugdesk-whatsapp-widget.mjs

@@ -23,6 +23,7 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i1 from '@snugdesk/core';
 import { CustomValidators, CleanDeep, SnugdeskCoreModule, CustomPipesModule } from '@snugdesk/core';
 import { API, Amplify } from 'aws-amplify';
+import { GRAPHQL_AUTH_MODE } from '@aws-amplify/api-graphql';
 import moment from 'moment-timezone';
 import { lastValueFrom, BehaviorSubject } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
@@ -58,6 +59,7 @@ function provideAppSyncConfig(config) {
 class AppSyncGraphqlService {
     authenticationService;
     configured = false;
+    authMode = GRAPHQL_AUTH_MODE.AWS_LAMBDA;
     config;
     constructor(config, authenticationService) {
         this.authenticationService = authenticationService;
@@ -66,14 +68,13 @@ class AppSyncGraphqlService {
     }
     async query(statement, variables) {
         this.ensureConfigured();
-        const token = this.getToken();
         // console.debug('token: ', token);
         try {
             return (await API.graphql({
                 query: statement,
                 variables,
-                authMode: 'AWS_LAMBDA',
-                authToken: token,
+                authMode: this.authMode,
+                ...(this.authMode === GRAPHQL_AUTH_MODE.AWS_LAMBDA ? { authToken: this.getToken() } : {}),
             }));
         }
         catch (err) {
@@ -105,13 +106,12 @@ class AppSyncGraphqlService {
     }
     subscribe(statement, variables) {
         this.ensureConfigured();
-        const token = this.getToken();
         try {
             return API.graphql({
                 query: statement,
                 variables,
-                authMode: 'AWS_LAMBDA',
-                authToken: token,
+                authMode: this.authMode,
+                ...(this.authMode === GRAPHQL_AUTH_MODE.AWS_LAMBDA ? { authToken: this.getToken() } : {}),
             });
         }
         catch (err) {
@@ -142,6 +142,12 @@ class AppSyncGraphqlService {
         if (this.configured) {
             return;
         }
+        const hostConfig = this.getHostConfig();
+        if (hostConfig.useHost) {
+            this.authMode = this.normalizeAuthMode(hostConfig.authMode) ?? GRAPHQL_AUTH_MODE.API_KEY;
+            this.configured = true;
+            return;
+        }
         if (!this.config?.endpoint || !this.config?.region) {
             throw new Error('AppSync GraphQL configuration is missing.');
         }
@@ -150,12 +156,12 @@ class AppSyncGraphqlService {
             aws_project_region: region,
             aws_appsync_graphqlEndpoint: endpoint,
             aws_appsync_region: region,
-            aws_appsync_authenticationType: 'AWS_LAMBDA',
+            aws_appsync_authenticationType: GRAPHQL_AUTH_MODE.AWS_LAMBDA,
             API: {
                 GraphQL: {
                     endpoint,
                     region,
-                    defaultAuthMode: 'AWS_LAMBDA',
+                    defaultAuthMode: GRAPHQL_AUTH_MODE.AWS_LAMBDA,
                     graphql_headers: async () => this.buildAuthHeaders(),
                     functionAuthProvider: async () => ({
                         token: this.getToken(),
@@ -163,8 +169,37 @@ class AppSyncGraphqlService {
                 },
             },
         });
+        this.authMode = GRAPHQL_AUTH_MODE.AWS_LAMBDA;
         this.configured = true;
     }
+    getHostConfig() {
+        const existing = Amplify.getConfig?.() ?? {};
+        const existingEndpoint = existing?.API?.GraphQL?.endpoint ?? existing?.API?.GraphQL?.graphql_endpoint ?? existing?.aws_appsync_graphqlEndpoint;
+        const existingAuthMode = existing?.API?.GraphQL?.defaultAuthMode ?? existing?.aws_appsync_authenticationType;
+        return {
+            useHost: existingEndpoint === defaultAppSyncConfig.endpoint,
+            authMode: existingAuthMode,
+        };
+    }
+    normalizeAuthMode(mode) {
+        if (!mode) {
+            return undefined;
+        }
+        switch (mode) {
+            case 'API_KEY':
+                return GRAPHQL_AUTH_MODE.API_KEY;
+            case 'AWS_IAM':
+                return GRAPHQL_AUTH_MODE.AWS_IAM;
+            case 'OPENID_CONNECT':
+                return GRAPHQL_AUTH_MODE.OPENID_CONNECT;
+            case 'AMAZON_COGNITO_USER_POOLS':
+                return GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS;
+            case 'AWS_LAMBDA':
+                return GRAPHQL_AUTH_MODE.AWS_LAMBDA;
+            default:
+                return undefined;
+        }
+    }
     buildAuthHeaders() {
         const token = this.getToken();
         if (!token) {