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

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.45",
   "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/Messages/MessageWithSources.tsx

@@ -14,7 +14,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with sources"
+        content="This example has a body description that's within the recommended limit of 2 lines:"
         sources={{
           sources: [
             {
@@ -43,7 +43,36 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with very long sources"
+        content="This example has a body description that's longer than the recommended limit of 2 lines, with a link to load the rest of the description:"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud.',
+              hasShowMore: true
+            },
+            {
+              title: 'Azure Red Hat OpenShift documentation',
+              link: '#',
+              body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure.',
+              hasShowMore: true
+            },
+            {
+              title: 'OKD Documentation: Home',
+              link: '#',
+              body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon.',
+              hasShowMore: true
+            }
+          ],
+          onSetPage
+        }}
+      />
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This example has a truncated title:"
         sources={{
           sources: [
             {
@@ -66,7 +95,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with only 1 source"
+        content="This example only includes 1 source:"
         sources={{
           sources: [
             {
@@ -83,7 +112,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with sources that include a title and link"
+        content="This example has a title and no body description:"
         sources={{
           sources: [
             { title: 'Getting started with Red Hat OpenShift', link: '#', isExternal: true },
@@ -105,7 +134,7 @@ export const MessageWithSourcesExample: React.FunctionComponent = () => {
         name="Bot"
         role="bot"
         avatar={patternflyAvatar}
-        content="Example with link-only sources (not recommended)"
+        content="This example displays the source as a link, without a title (not recommended)"
         sources={{
           sources: [
             {

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

@@ -144,7 +144,7 @@ If you are using Retrieval-Augmented Generation, you may want to display sources
 
 If a source will open outside of the ChatBot window, add an external link icon via `isExternal`.
 
-The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. The title is limited to 1 line and the body is limited to 2 lines.
+The API for a source requires a link at minimum, but we strongly recommend providing a more descriptive title and body description so users have enough context. For the best clarity and readability, we strongly recommend limiting the title to 1 line and the body to 2 lines. If the body description is more than 2 lines, use the "long sources" or "very long sources" variant.
 
 ```js file="./MessageWithSources.tsx"
 

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/SourcesCard/SourcesCard.scss

@@ -16,7 +16,7 @@
   box-shadow: var(--pf-t--global--box-shadow--sm);
 }
 
-.pf-chatbot__sources-card-body {
+.pf-chatbot__sources-card-body-text {
   display: block;
   display: -webkit-box;
   height: 2.8125rem;
@@ -25,11 +25,6 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-bottom: var(--pf-t--global--spacer--md);
-}
-
-.pf-chatbot__sources-card-no-footer {
-  margin-bottom: var(--pf-t--global--spacer--lg);
 }
 
 .pf-chatbot__sources-card-footer-container {
@@ -38,13 +33,14 @@
     var(--pf-t--global--spacer--sm) !important;
   .pf-chatbot__sources-card-footer {
     display: flex;
-    justify-content: space-between;
     align-items: center;
 
     &-buttons {
       display: flex;
       gap: var(--pf-t--global--spacer--xs);
       align-items: center;
+      justify-content: space-between;
+      flex: 1;
 
       .pf-v6-c-button {
         border-radius: var(--pf-t--global--border--radius--pill);

package/src/SourcesCard/SourcesCard.test.tsx

@@ -11,7 +11,7 @@ describe('SourcesCard', () => {
     expect(screen.getByText('Source 1')).toBeTruthy();
     // no buttons or navigation when there is only 1 source
     expect(screen.queryByRole('button')).toBeFalsy();
-    expect(screen.queryByText('1 of 1')).toBeFalsy();
+    expect(screen.queryByText('1/1')).toBeFalsy();
   });
 
   it('should render card correctly if one source with a title is passed in', () => {
@@ -48,7 +48,7 @@ describe('SourcesCard', () => {
     );
     expect(screen.getByText('2 sources')).toBeTruthy();
     expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-    expect(screen.getByText('1 of 2')).toBeTruthy();
+    expect(screen.getByText('1/2')).toBeTruthy();
     screen.getByRole('button', { name: /Go to previous page/i });
     screen.getByRole('button', { name: /Go to next page/i });
   });
@@ -63,12 +63,12 @@ describe('SourcesCard', () => {
       />
     );
     expect(screen.getByText('How to make an apple pie')).toBeTruthy();
-    expect(screen.getByText('1 of 2')).toBeTruthy();
+    expect(screen.getByText('1/2')).toBeTruthy();
     expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
     await userEvent.click(screen.getByRole('button', { name: /Go to next page/i }));
     expect(screen.queryByText('How to make an apple pie')).toBeFalsy();
     expect(screen.getByText('How to make cookies')).toBeTruthy();
-    expect(screen.getByText('2 of 2')).toBeTruthy();
+    expect(screen.getByText('2/2')).toBeTruthy();
     expect(screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
     expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
   });
@@ -101,19 +101,6 @@ describe('SourcesCard', () => {
     expect(screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
   });
 
-  it('should change ofWord appropriately', () => {
-    render(
-      <SourcesCard
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        ofWord={'de'}
-      />
-    );
-    expect(screen.getByText('1 de 2')).toBeTruthy();
-  });
-
   it('should render navigation aria label appropriately', () => {
     render(
       <SourcesCard
@@ -230,4 +217,30 @@ describe('SourcesCard', () => {
     await userEvent.click(screen.getByRole('button', { name: /Go to previous page/i }));
     expect(spy).toHaveBeenCalledTimes(2);
   });
+
+  it('should handle showMore appropriately', async () => {
+    render(
+      <SourcesCard
+        sources={[
+          {
+            title: 'Getting started with Red Hat OpenShift',
+            link: '#',
+            body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+            hasShowMore: true
+          },
+          {
+            title: 'Azure Red Hat OpenShift documentation',
+            link: '#',
+            body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
+          },
+          {
+            title: 'OKD Documentation: Home',
+            link: '#',
+            body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
+          }
+        ]}
+      />
+    );
+    expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
+  });
 });

package/src/SourcesCard/SourcesCard.tsx

@@ -12,6 +12,8 @@ import {
   CardFooter,
   CardProps,
   CardTitle,
+  ExpandableSection,
+  ExpandableSectionVariant,
   Icon,
   pluralize,
   Truncate
@@ -23,12 +25,18 @@ export interface SourcesCardProps extends CardProps {
   className?: string;
   /** Flag indicating if the pagination is disabled. */
   isDisabled?: boolean;
-  /** Label for the English word "of". */
+  /** @deprecated ofWord has been deprecated. Label for the English word "of." */
   ofWord?: string;
   /** Accessible label for the pagination component. */
   paginationAriaLabel?: string;
   /** Content rendered inside the paginated card */
-  sources: { title?: string; link: string; body?: React.ReactNode | string; isExternal?: boolean }[];
+  sources: {
+    title?: string;
+    link: string;
+    body?: React.ReactNode | string;
+    isExternal?: boolean;
+    hasShowMore?: boolean;
+  }[];
   /** Label for the English word "source" */
   sourceWord?: string;
   /** Plural for sourceWord */
@@ -43,12 +51,15 @@ export interface SourcesCardProps extends CardProps {
   onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when page is changed. */
   onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+  /** Label for English words "show more" */
+  showMoreWords?: string;
+  /** Label for English words "show less" */
+  showLessWords?: string;
 }
 
 const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   className,
   isDisabled,
-  ofWord = 'of',
   paginationAriaLabel = 'Pagination',
   sources,
   sourceWord = 'source',
@@ -58,9 +69,16 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   onNextClick,
   onPreviousClick,
   onSetPage,
+  showMoreWords = 'show more',
+  showLessWords = 'show less',
   ...props
 }: SourcesCardProps) => {
   const [page, setPage] = React.useState(1);
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
 
   const handleNewPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
@@ -93,10 +111,23 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
           </Button>
         </CardTitle>
         {sources[page - 1].body && (
-          <CardBody
-            className={`pf-chatbot__sources-card-body ${sources.length === 1 && 'pf-chatbot__sources-card-no-footer'}`}
-          >
-            {sources[page - 1].body}
+          <CardBody className={`pf-chatbot__sources-card-body`}>
+            {sources[page - 1].hasShowMore ? (
+              // prevents extra VO announcements of button text - parent Message has aria-live
+              <div aria-live="off">
+                <ExpandableSection
+                  variant={ExpandableSectionVariant.truncate}
+                  toggleText={isExpanded ? showLessWords : showMoreWords}
+                  onToggle={onToggle}
+                  isExpanded={isExpanded}
+                  truncateMaxLines={2}
+                >
+                  {sources[page - 1].body}
+                </ExpandableSection>
+              </div>
+            ) : (
+              <div className="pf-chatbot__sources-card-body-text">{sources[page - 1].body}</div>
+            )}
           </CardBody>
         )}
         {sources.length > 1 && (
@@ -129,6 +160,9 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
                     </svg>
                   </Icon>
                 </Button>
+                <span aria-hidden="true">
+                  {page}/{sources.length}
+                </span>
                 <Button
                   variant={ButtonVariant.plain}
                   isDisabled={isDisabled || page === sources.length}
@@ -156,10 +190,6 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
                   </Icon>
                 </Button>
               </nav>
-
-              <span aria-hidden="true">
-                {page} {ofWord} {sources.length}
-              </span>
             </div>
           </CardFooter>
         )}

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 });
   }
 }