@patternfly/chatbot 2.2.0-prerelease.43 → 2.2.0-prerelease.44

package/dist/esm/tracking/segment_tracking_provider.js

@@ -1,11 +1,14 @@
 import { AnalyticsBrowser } from '@segment/analytics-next';
 export class SegmentTrackingProvider {
-    getKey() {
-        return 'segmentKey';
+    constructor() {
+        this.verbose = false;
     }
     initialize(props) {
-        // eslint-disable-next-line no-console
-        console.log('SegmentProvider initialize');
+        this.verbose = props.verbose;
+        if (this.verbose) {
+            // eslint-disable-next-line no-console
+            console.log('SegmentProvider initialize');
+        }
         const segmentKey = props.segmentKey;
         // We need to create an object here, as ts lint is unhappy otherwise
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17,16 +20,20 @@ export class SegmentTrackingProvider {
             integrations: Object.assign({}, integrations)
         });
     }
-    identify(userID) {
-        // eslint-disable-next-line no-console
-        console.log('SegmentProvider userID: ' + userID);
+    identify(userID, userProperties = {}) {
+        if (this.verbose) {
+            // eslint-disable-next-line no-console
+            console.log('SegmentProvider userID: ' + userID);
+        }
         if (this.analytics) {
-            this.analytics.identify(userID);
+            this.analytics.identify(userID, userProperties);
         }
     }
     trackPageView(url) {
-        // eslint-disable-next-line no-console
-        console.log('SegmentProvider url', url);
+        if (this.verbose) {
+            // eslint-disable-next-line no-console
+            console.log('SegmentProvider url ', url);
+        }
         if (this.analytics) {
             if (url) {
                 this.analytics.page(url);
@@ -37,8 +44,10 @@ export class SegmentTrackingProvider {
         }
     }
     trackSingleItem(item, properties) {
-        // eslint-disable-next-line no-console
-        console.log('SegmentProvider: trackSingleItem' + item, properties);
+        if (this.verbose) {
+            // eslint-disable-next-line no-console
+            console.log('SegmentProvider: trackSingleItem ' + item, properties);
+        }
         if (this.analytics) {
             this.analytics.track(item, { properties });
         }

package/dist/esm/tracking/trackingProviderProxy.d.ts

@@ -2,7 +2,7 @@ import { TrackingApi, TrackingEventProperties } from './tracking_api';
 declare class TrackingProviderProxy implements TrackingApi {
     providers: TrackingApi[];
     constructor(providers: TrackingApi[]);
-    identify(userID: string): void;
+    identify(userID: string, userProperties?: TrackingEventProperties): void;
     trackSingleItem(eventName: string, properties?: TrackingEventProperties): void;
     trackPageView(url: string | undefined): void;
 }

package/dist/esm/tracking/trackingProviderProxy.js

@@ -3,9 +3,9 @@ class TrackingProviderProxy {
         this.providers = [];
         this.providers = providers;
     }
-    identify(userID) {
+    identify(userID, userProperties = {}) {
         for (const provider of this.providers) {
-            provider.identify(userID);
+            provider.identify(userID, userProperties);
         }
     }
     trackSingleItem(eventName, properties) {

package/dist/esm/tracking/tracking_api.d.ts

@@ -2,7 +2,7 @@ export interface TrackingEventProperties {
     [key: string]: string | number | boolean | undefined;
 }
 export interface TrackingApi {
-    identify: (userID: string) => void;
+    identify: (userID: string, userProperties: TrackingEventProperties) => void;
     trackPageView: (url: string | undefined) => void;
     trackSingleItem: (eventName: string, properties: TrackingEventProperties | undefined) => void;
 }

package/dist/esm/tracking/tracking_registry.js

@@ -1,3 +1,4 @@
+import { Providers } from './tracking_spi';
 import TrackingProviderProxy from './trackingProviderProxy';
 import { ConsoleTrackingProvider } from './console_tracking_provider';
 import { SegmentTrackingProvider } from './segment_tracking_provider';
@@ -5,22 +6,55 @@ import { PosthogTrackingProvider } from './posthog_tracking_provider';
 import { UmamiTrackingProvider } from './umami_tracking_provider';
 export const getTrackingProviders = (initProps) => {
     const providers = [];
-    providers.push(new SegmentTrackingProvider());
-    providers.push(new PosthogTrackingProvider());
-    providers.push(new UmamiTrackingProvider());
-    // TODO dynamically find and register providers
+    if (initProps.activeProviders) {
+        let tmpProps = initProps.activeProviders;
+        // Theoretically we get an array of provider names, but it could also be a CSV string...
+        if (!Array.isArray(initProps.activeProviders)) {
+            const tmpString = initProps.activeProviders;
+            if (tmpString && tmpString.indexOf(',') !== -1) {
+                tmpProps = tmpString.split(',');
+            }
+            else {
+                tmpProps = [tmpString];
+            }
+        }
+        tmpProps.forEach((provider) => {
+            switch (Providers[provider]) {
+                case Providers.Segment:
+                    providers.push(new SegmentTrackingProvider());
+                    break;
+                case Providers.Umami:
+                    providers.push(new UmamiTrackingProvider());
+                    break;
+                case Providers.Posthog:
+                    providers.push(new PosthogTrackingProvider());
+                    break;
+                case Providers.Console:
+                    providers.push(new ConsoleTrackingProvider());
+                    break;
+                case Providers.None: // Do nothing, just a placeholder
+                    break;
+                default:
+                    if (providers.length > 1) {
+                        if (initProps.verbose) {
+                            // eslint-disable-next-line no-console
+                            console.error("Unknown provider '" + provider);
+                        }
+                    }
+                    break;
+            }
+        });
+    }
     // Initialize them
-    const enabledProviders = [];
     for (const provider of providers) {
-        const key = provider.getKey();
-        if (Object.keys(initProps).indexOf(key) > -1) {
+        try {
             provider.initialize(initProps);
-            enabledProviders.push(provider);
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(e);
         }
     }
-    // Add the console provider
-    const consoleTrackingProvider = new ConsoleTrackingProvider();
-    enabledProviders.push(consoleTrackingProvider); // TODO noop- provider?
-    return new TrackingProviderProxy(enabledProviders);
+    return new TrackingProviderProxy(providers);
 };
 export default getTrackingProviders;

package/dist/esm/tracking/tracking_spi.d.ts

@@ -1,9 +1,19 @@
-import { TrackingApi, TrackingEventProperties } from './tracking_api';
-export interface InitProps {
-    [key: string]: string | number | boolean;
+import { TrackingApi } from './tracking_api';
+export declare enum Providers {
+    None = 0,
+    Segment = 1,
+    Umami = 2,
+    Posthog = 3,
+    Console = 4
+}
+export type ProviderAsString = keyof typeof Providers;
+export interface BaseProps {
+    verbose: boolean;
+    activeProviders: [ProviderAsString];
 }
+export type InitProps = {
+    [key: string]: string | number | boolean;
+} & BaseProps;
 export interface TrackingSpi extends TrackingApi {
-    getKey: () => string;
     initialize: (props: InitProps) => void;
-    trackSingleItem: (item: string, properties?: TrackingEventProperties) => void;
 }

package/dist/esm/tracking/tracking_spi.js

@@ -1 +1,8 @@
-export {};
+export var Providers;
+(function (Providers) {
+    Providers[Providers["None"] = 0] = "None";
+    Providers[Providers["Segment"] = 1] = "Segment";
+    Providers[Providers["Umami"] = 2] = "Umami";
+    Providers[Providers["Posthog"] = 3] = "Posthog";
+    Providers[Providers["Console"] = 4] = "Console";
+})(Providers || (Providers = {}));

package/dist/esm/tracking/umami_tracking_provider.d.ts

@@ -6,9 +6,13 @@ declare global {
     }
 }
 export declare class UmamiTrackingProvider implements TrackingSpi, TrackingApi {
-    getKey(): string;
+    private verbose;
+    private websiteId;
+    private queue;
     initialize(props: InitProps): void;
-    identify(userID: string): void;
+    identify(userID: string, userProperties?: TrackingEventProperties): void;
     trackPageView(url: string | undefined): void;
     trackSingleItem(item: string, properties?: TrackingEventProperties): void;
+    flushQueue(): void;
+    log(msg: string): void;
 }

package/dist/esm/tracking/umami_tracking_provider.js

@@ -1,40 +1,84 @@
 export class UmamiTrackingProvider {
-    getKey() {
-        return 'umamiKey';
+    constructor() {
+        this.verbose = false;
+        this.queue = [];
     }
     initialize(props) {
-        // eslint-disable-next-line no-console
-        console.log('UmamiProvider initialize');
-        const umamiKey = props.umamiKey;
+        this.verbose = props.verbose;
+        this.log('UmamiProvider initialize');
+        this.websiteId = props.umamiKey;
         const hostUrl = props.umamiHostUrl;
         const script = document.createElement('script');
         script.src = hostUrl + '/script.js';
         script.async = true;
         script.defer = true;
         // Configure Umami properties
-        script.setAttribute('data-website-id', umamiKey);
-        script.setAttribute('data-domains', 'localhost'); // TODO ?
+        script.setAttribute('data-website-id', this.websiteId);
+        script.setAttribute('data-host-url', hostUrl);
         script.setAttribute('data-auto-track', 'false');
-        script.setAttribute('data-host-url', hostUrl); // TODO ?
-        script.setAttribute('data-exclude-search', 'false'); // TODO ?
+        script.setAttribute('data-exclude-search', 'false');
+        // Now get from config, which may override some of the above.
+        const UMAMI_PREFIX = 'umami-';
+        for (const prop in props) {
+            if (prop.startsWith(UMAMI_PREFIX)) {
+                const att = 'data-' + prop.substring(UMAMI_PREFIX.length);
+                const val = props[prop];
+                script.setAttribute(att, String(val));
+            }
+        }
+        script.onload = () => {
+            this.log('UmamiProvider script loaded');
+            this.flushQueue();
+        };
         document.body.appendChild(script);
     }
-    identify(userID) {
-        var _a;
-        // eslint-disable-next-line no-console
-        console.log('UmamiProvider userID: ' + userID);
-        (_a = window.umami) === null || _a === void 0 ? void 0 : _a.identify({ userID });
+    identify(userID, userProperties = {}) {
+        this.log('UmamiProvider userID: ' + userID + ' => ' + JSON.stringify(userProperties));
+        if (window.umami) {
+            window.umami.identify({ userID, userProperties });
+        }
+        else {
+            this.queue.push({ what: 'i', name: userID, payload: userProperties });
+        }
     }
     trackPageView(url) {
-        var _a;
-        // eslint-disable-next-line no-console
-        console.log('UmamiProvider url', url);
-        (_a = window.umami) === null || _a === void 0 ? void 0 : _a.track({ url });
+        this.log('UmamiProvider url ' + url);
+        if (window.umami) {
+            window.umami.track({ url, website: this.websiteId });
+        }
+        else {
+            this.queue.push({ what: 'p', name: String(url) });
+        }
     }
     trackSingleItem(item, properties) {
-        var _a;
-        // eslint-disable-next-line no-console
-        console.log('UmamiProvider: trackSingleItem' + item, properties);
-        (_a = window.umami) === null || _a === void 0 ? void 0 : _a.track(item, properties);
+        this.log('UmamiProvider: trackSingleItem ' + item + JSON.stringify(properties));
+        if (window.umami) {
+            window.umami.track(item, properties);
+        }
+        else {
+            this.queue.push({ what: 't', name: item, payload: properties });
+        }
+    }
+    flushQueue() {
+        for (const item of this.queue) {
+            this.log('Queue flush ' + JSON.stringify(item));
+            switch (item.what) {
+                case 'i':
+                    this.identify(item.name, item.payload);
+                    break;
+                case 't':
+                    this.trackSingleItem(item.name, item.payload);
+                    break;
+                case 'p':
+                    this.trackPageView(item.name);
+                    break;
+            }
+        }
+    }
+    log(msg) {
+        if (this.verbose) {
+            // eslint-disable-next-line no-console
+            console.debug('UmamiProvider: ', msg);
+        }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.43",
+  "version": "2.2.0-prerelease.44",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md

@@ -36,10 +36,12 @@ Note that user code only interacts with:
 
 ### Setup
 
-1. Before you can use the `trackingAPI`, you must first supply the API keys of the respective providers.
+1. Before you can use the `trackingAPI`, you must first supply the API keys of the respective providers. To enable a provider, it must be added to the `activeProviders` property:
 
 ```nolive
 const initProps: InitProps = {
+  verbose: false,
+  activeProviders: ['Segment', 'Umami', 'Posthog', 'Console' ], 
   segmentKey: 'TODO-key', // TODO add your key here
 //  segmentCdn: 'https://my.org/cdn',  // Set up segment cdn (optional)
 //  segmentIntegrations: { // Provide Segment integrations (optional)
@@ -50,13 +52,15 @@ const initProps: InitProps = {
         },
 
   posthogKey: 'TODO-key',
-  umamiKey: 'TODO-key',
+  umamiKey: 'TODO-umami-key',
   umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
+  'umami-data-domains': 'TODO umami data domain',
   something: 'test',
-  console: 'true' // Console provider
 };
 ```
 
+- **Note:** To enable output debugging via the web-browser console, set the `verbose` key to `true`. By default, this is set to `false`.
+
 1. Once this is done, you can create an instance of the `trackingAPI` and start sending events.
 
    ```nolive
@@ -76,22 +80,20 @@ trackingAPI.trackSingleItem("MyEvent", { response: 'Good response' })
 
 #### Tracking providers
 
-Only providers with a matching key in the `InitProps` will be started and used.
+Only providers with a matching entry in the `InitProps.activeProviders` array will be started and used.
+
+Possible values are:
+* Umami
+* Posthog
+* Segment
+* Console
 
-```nolive
-const initProps: InitProps = {
-  segmentKey: 'TODO-key', // TODO add your key here
-  posthogKey: 'TODO-key',
-  umamiKey: 'TODO-key',
-  umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
-  console: true
-```
 
 ##### Modifying providers
 
 If you know upfront that you only want to use 1 of the supported providers, you can modify `getTrackingProviders()` and remove all other providers in the providers array.
 
-When using the providers you need to add additional dependencies to your package.json file:
+When using the providers, you might need to add additional dependencies to your package.json file:
 
 ```nolive
 "dependencies": {
@@ -99,12 +101,14 @@ When using the providers you need to add additional dependencies to your package
   "posthog-js": "^1.194.4"
 ```
 
+Depending on your local setup, this might not be necessary. For example, if you pull the ChatBot codebase as a dependency into your project, you don't need to add it as an additional dependency in your package.json.
+
 ##### Adding providers
 
 To add another analytics provider, you need to implement 2 interfaces, `TrackingSpi` and `trackingApi`.
 
 1. It is easiest to start by copying the `ConsoleTrackingProvider`
-1. The first thing you should do is to provide a correct value in `getKey()`
+1. Add an entry for your new provider to the `Providers` enum in `tracking_spi.ts`
 1. Once you are happy enough with the implementation, add it to the array of providers in `getTrackingProviders()`
 
 ### Page flow tracking

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx

@@ -98,17 +98,18 @@ export default MessageLoading;
 const date = new Date();
 
 const initProps: InitProps = {
+  verbose: false,
   segmentKey: 'TODO-key', // TODO add your key here
   posthogKey: 'TODO-key',
   umamiKey: 'TODO-key',
-  umamiHostUrl: 'http://localhost:3000', // TODO where is your JS provider?
+  umamiHostUrl: 'http://localhost:3000', // TODO where is your Umami installation?
   console: true,
   something: 'test'
 };
 
 const tracking = getTrackingProviders(initProps);
-tracking.identify('user-123'); // TODO get real user id
-tracking.trackPageView(window.document.documentURI);
+tracking.identify('user-123', { superUser: true }); // TODO get real user id + properties
+tracking.trackPageView(window.location.href);
 
 const actionEventName = 'MessageAction';
 const initialMessages: MessageProps[] = [

package/src/tracking/console_tracking_provider.ts

@@ -1,30 +1,34 @@
-import { TrackingSpi } from './tracking_spi';
+import { InitProps, TrackingSpi } from './tracking_spi';
 import { TrackingApi, TrackingEventProperties } from './tracking_api';
 
 export class ConsoleTrackingProvider implements TrackingSpi, TrackingApi {
+  private verbose = false;
   trackPageView(url: string | undefined) {
-    // eslint-disable-next-line no-console
-    console.log('ConsoleProvider pageView', url);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider pageView ', url);
+    }
   }
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  registerProvider(): void {}
 
-  initialize(): void {
-    // eslint-disable-next-line no-console
-    console.log('ConsoleProvider initialize');
+  initialize(props: InitProps): void {
+    this.verbose = props.verbose;
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider initialize');
+    }
   }
 
-  identify(userID: string): void {
-    // eslint-disable-next-line no-console
-    console.log('ConsoleProvider identify', userID);
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider identify ', userID, userProperties);
+    }
   }
 
   trackSingleItem(item: string, properties?: TrackingEventProperties): void {
-    // eslint-disable-next-line no-console
-    console.log('ConsoleProvider: ' + item, properties);
-  }
-
-  getKey(): string {
-    return 'console';
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('ConsoleProvider: ' + item, properties);
+    }
   }
 }

package/src/tracking/posthog_tracking_provider.ts

@@ -4,13 +4,14 @@ import { TrackingApi, TrackingEventProperties } from './tracking_api';
 import { InitProps, TrackingSpi } from './tracking_spi';
 
 export class PosthogTrackingProvider implements TrackingSpi, TrackingApi {
-  getKey(): string {
-    return 'posthogKey';
-  }
+  private verbose = false;
 
   initialize(props: InitProps): void {
-    // eslint-disable-next-line no-console
-    console.log('PosthogProvider initialize');
+    this.verbose = props.verbose;
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('PosthogProvider initialize');
+    }
     const posthogKey = props.posthogKey as string;
 
     posthog.init(posthogKey, {
@@ -21,22 +22,28 @@ export class PosthogTrackingProvider implements TrackingSpi, TrackingApi {
     });
   }
 
-  identify(userID: string): void {
-    // eslint-disable-next-line no-console
-    console.log('PosthogProvider userID: ' + userID);
-    posthog.identify(userID);
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('PosthogProvider userID: ' + userID);
+    }
+    posthog.identify(userID, userProperties);
   }
 
   trackPageView(url: string | undefined): void {
-    // eslint-disable-next-line no-console
-    console.log('PostHogProvider url', url);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('PostHogProvider url ', url);
+    }
     // TODO posthog seems to record that automatically.
     //  How to not clash with this here? Just leave as no-op?
   }
 
   trackSingleItem(item: string, properties?: TrackingEventProperties): void {
-    // eslint-disable-next-line no-console
-    console.log('PosthogProvider: trackSingleItem' + item, properties);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('PosthogProvider: trackSingleItem ' + item, properties);
+    }
     posthog.capture(item, { properties });
   }
 }

package/src/tracking/segment_tracking_provider.ts

@@ -5,13 +5,14 @@ import { InitProps, TrackingSpi } from './tracking_spi';
 
 export class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
   private analytics: AnalyticsBrowser | undefined;
-  getKey(): string {
-    return 'segmentKey';
-  }
+  private verbose = false;
 
   initialize(props: InitProps): void {
-    // eslint-disable-next-line no-console
-    console.log('SegmentProvider initialize');
+    this.verbose = props.verbose;
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('SegmentProvider initialize');
+    }
     const segmentKey = props.segmentKey as string;
 
     // We need to create an object here, as ts lint is unhappy otherwise
@@ -32,17 +33,21 @@ export class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
     );
   }
 
-  identify(userID: string): void {
-    // eslint-disable-next-line no-console
-    console.log('SegmentProvider userID: ' + userID);
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('SegmentProvider userID: ' + userID);
+    }
     if (this.analytics) {
-      this.analytics.identify(userID);
+      this.analytics.identify(userID, userProperties);
     }
   }
 
   trackPageView(url: string | undefined): void {
-    // eslint-disable-next-line no-console
-    console.log('SegmentProvider url', url);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('SegmentProvider url ', url);
+    }
     if (this.analytics) {
       if (url) {
         this.analytics.page(url);
@@ -53,8 +58,10 @@ export class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
   }
 
   trackSingleItem(item: string, properties?: TrackingEventProperties): void {
-    // eslint-disable-next-line no-console
-    console.log('SegmentProvider: trackSingleItem' + item, properties);
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.log('SegmentProvider: trackSingleItem ' + item, properties);
+    }
     if (this.analytics) {
       this.analytics.track(item, { properties });
     }

package/src/tracking/trackingProviderProxy.ts

@@ -6,9 +6,9 @@ class TrackingProviderProxy implements TrackingApi {
     this.providers = providers;
   }
 
-  identify(userID: string): void {
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
     for (const provider of this.providers) {
-      provider.identify(userID);
+      provider.identify(userID, userProperties);
     }
   }
 

package/src/tracking/tracking_api.ts

@@ -3,7 +3,7 @@ export interface TrackingEventProperties {
 }
 
 export interface TrackingApi {
-  identify: (userID: string) => void;
+  identify: (userID: string, userProperties: TrackingEventProperties) => void;
 
   trackPageView: (url: string | undefined) => void;