@patternfly/chatbot 2.2.0-prerelease.30 → 2.2.0-prerelease.32

package/src/ChatbotHeader/ChatbotHeaderTitle.test.tsx

@@ -17,27 +17,27 @@ describe('ChatbotHeaderTitle', () => {
   });
 
   it('should render title for default display mode', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.default} showOnDefault={'Default header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.default} showOnDefault="Default header title" />);
     expect(screen.getByText('Default header title')).toBeTruthy();
   });
 
   it('should render title for docked display mode', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDocked={'Docked header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDocked="Docked header title" />);
     expect(screen.getByText('Docked header title')).toBeTruthy();
   });
 
   it('should fallback to default title when docked display mode title is not configured', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDefault={'Default header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.docked} showOnDefault="Default header title" />);
     expect(screen.getByText('Default header title')).toBeTruthy();
   });
 
   it('should render title for embedded display mode', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnEmbedded={'Embedded header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnEmbedded="Embedded header title" />);
     expect(screen.getByText('Embedded header title')).toBeTruthy();
   });
 
   it('should fallback to default title when embedded display mode title is not configured', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnDefault={'Default header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.embedded} showOnDefault="Default header title" />);
     expect(screen.getByText('Default header title')).toBeTruthy();
   });
 
@@ -45,7 +45,7 @@ describe('ChatbotHeaderTitle', () => {
     render(
       <ChatbotHeaderTitle
         displayMode={ChatbotDisplayMode.fullscreen}
-        showOnFullScreen={'Fullscreen header title'}
+        showOnFullScreen="Fullscreen header title"
         className="custom-header-class"
       />
     );
@@ -53,7 +53,23 @@ describe('ChatbotHeaderTitle', () => {
   });
 
   it('should fallback to default title when fullscreen display mode title is not configured', () => {
-    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.fullscreen} showOnDefault={'Default header title'} />);
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.fullscreen} showOnDefault="Default header title" />);
+    expect(screen.getByText('Default header title')).toBeTruthy();
+  });
+
+  it('should render title for drawer display mode', () => {
+    render(
+      <ChatbotHeaderTitle
+        displayMode={ChatbotDisplayMode.drawer}
+        showOnDrawer="Drawer header title"
+        className="custom-header-class"
+      />
+    );
+    expect(screen.getByText('Drawer header title')).toBeTruthy();
+  });
+
+  it('should fallback to default title when drawer display mode title is not configured', () => {
+    render(<ChatbotHeaderTitle displayMode={ChatbotDisplayMode.drawer} showOnDefault="Default header title" />);
     expect(screen.getByText('Default header title')).toBeTruthy();
   });
 });

package/src/ChatbotHeader/ChatbotHeaderTitle.tsx

@@ -14,8 +14,10 @@ export interface ChatbotHeaderTitleProps {
   showOnFullScreen?: React.ReactNode | string;
   /** Content to display on docked screen */
   showOnDocked?: React.ReactNode | string;
-  /** Content to display on overlay screen */
+  /** Content to display on embedded screen */
   showOnEmbedded?: React.ReactNode | string;
+  /** Content to display in drawer mode */
+  showOnDrawer?: React.ReactNode | string;
   /** Content to display by default; this will be shown if a case is not explicitly set */
   showOnDefault?: React.ReactNode | string;
 }
@@ -27,10 +29,11 @@ export const ChatbotHeaderTitle: React.FunctionComponent<ChatbotHeaderTitleProps
   showOnFullScreen,
   showOnDocked,
   showOnEmbedded,
+  showOnDrawer,
   showOnDefault
 }: ChatbotHeaderTitleProps) => {
   const renderChildren = () => {
-    if (displayMode && (showOnDefault || showOnFullScreen || showOnEmbedded || showOnDocked)) {
+    if (displayMode) {
       /* eslint-disable indent */
       switch (displayMode) {
         case ChatbotDisplayMode.fullscreen:
@@ -39,6 +42,8 @@ export const ChatbotHeaderTitle: React.FunctionComponent<ChatbotHeaderTitleProps
           return showOnDocked ?? showOnDefault;
         case ChatbotDisplayMode.embedded:
           return showOnEmbedded ?? showOnDefault;
+        case ChatbotDisplayMode.drawer:
+          return showOnDrawer ?? showOnDefault;
         default:
           return showOnDefault;
       }

package/src/Message/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,14 @@
+// ============================================================================
+// Chatbot Main - Message - Content - Error
+// ============================================================================
+
+import React from 'react';
+import { Alert, AlertProps } from '@patternfly/react-core';
+
+const ErrorMessage = ({ title, actionLinks, children, ...props }: AlertProps) => (
+  <Alert isInline variant="danger" title={title} actionLinks={actionLinks} {...props}>
+    {children}
+  </Alert>
+);
+
+export default ErrorMessage;

package/src/Message/Message.test.tsx

@@ -6,6 +6,7 @@ import userEvent from '@testing-library/user-event';
 import { monitorSampleAppQuickStart } from './QuickStarts/monitor-sampleapp-quickstart';
 import { monitorSampleAppQuickStartWithImage } from './QuickStarts/monitor-sampleapp-quickstart-with-image';
 import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+import { AlertActionLink } from '@patternfly/react-core';
 
 const ALL_ACTIONS = [
   { label: /Good response/i },
@@ -141,6 +142,20 @@ const EMPTY_TABLE = `
 
 const IMAGE = `![Multi-colored wavy lines on a black background](https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif)`;
 
+const ERROR = {
+  title: 'Could not load chat',
+  children: 'Wait a few minutes and check your network settings. If the issue persists: ',
+  actionLinks: (
+    <React.Fragment>
+      <AlertActionLink component="a" href="#">
+        Start a new chat
+      </AlertActionLink>
+      <AlertActionLink component="a" href="#">
+        Contact support
+      </AlertActionLink>
+    </React.Fragment>
+  )
+};
 const checkListItemsRendered = () => {
   const items = ['Item 1', 'Item 2', 'Item 3'];
   expect(screen.getAllByRole('listitem')).toHaveLength(3);
@@ -769,4 +784,21 @@ describe('Message', () => {
     // we are mocking rehype libraries, so we can't test target _blank addition on links directly with RTL
     expect(rehypeExternalLinks).not.toHaveBeenCalled();
   });
+  it('should handle error correctly', () => {
+    render(<Message avatar="./img" role="user" name="User" error={ERROR} />);
+    expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Start a new chat/i })).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Contact support/i })).toBeTruthy();
+    expect(screen.getByText('Wait a few minutes and check your network settings. If the issue persists:')).toBeTruthy();
+  });
+  it('should handle error correctly when loading', () => {
+    render(<Message avatar="./img" role="user" name="User" error={ERROR} isLoading />);
+    expect(screen.queryByRole('heading', { name: /Could not load chat/i })).toBeFalsy();
+    expect(screen.getByText('Loading message')).toBeTruthy();
+  });
+  it('should handle error correctly when these is content', () => {
+    render(<Message avatar="./img" role="user" name="User" error={ERROR} content="Test" />);
+    expect(screen.getByRole('heading', { name: /Could not load chat/i })).toBeTruthy();
+    expect(screen.queryByText('Test')).toBeFalsy();
+  });
 });

package/src/Message/Message.tsx

@@ -7,6 +7,7 @@ import React, { ReactNode } from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {
+  AlertProps,
   Avatar,
   AvatarProps,
   ContentVariants,
@@ -42,6 +43,7 @@ import rehypeExternalLinks from 'rehype-external-links';
 import rehypeSanitize from 'rehype-sanitize';
 import { PluggableList } from 'react-markdown/lib';
 import LinkMessage from './LinkMessage/LinkMessage';
+import ErrorMessage from './ErrorMessage/ErrorMessage';
 
 export interface MessageAttachment {
   /** Name of file attached to the message */
@@ -141,6 +143,8 @@ export interface MessageProps extends Omit<React.HTMLProps<HTMLDivElement>, 'rol
   additionalRehypePlugins?: PluggableList;
   /** Whether to open links in message in new tab. */
   openLinkInNewTab?: boolean;
+  /** Optional inline error message that can be displayed in the message */
+  error?: AlertProps;
 }
 
 export const MessageBase: React.FunctionComponent<MessageProps> = ({
@@ -169,6 +173,7 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
   tableProps,
   openLinkInNewTab = true,
   additionalRehypePlugins = [],
+  error,
   ...props
 }: MessageProps) => {
   const { beforeMainContent, afterMainContent, endContent } = extraContent || {};
@@ -225,47 +230,51 @@ export const MessageBase: React.FunctionComponent<MessageProps> = ({
             ) : (
               <>
                 {beforeMainContent && <>{beforeMainContent}</>}
-                <Markdown
-                  components={{
-                    p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
-                    code: ({ children, ...props }) => (
-                      <CodeBlockMessage {...props} {...codeBlockProps}>
-                        {children}
-                      </CodeBlockMessage>
-                    ),
-                    h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
-                    h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
-                    h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
-                    h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
-                    h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
-                    h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
-                    blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
-                    ul: (props) => <UnorderedListMessage {...props} />,
-                    ol: (props) => <OrderedListMessage {...props} />,
-                    li: (props) => <ListItemMessage {...props} />,
-                    table: (props) => <TableMessage {...props} {...tableProps} />,
-                    tbody: (props) => <TbodyMessage {...props} />,
-                    thead: (props) => <TheadMessage {...props} />,
-                    tr: (props) => <TrMessage {...props} />,
-                    td: (props) => {
-                      // Conflicts with Td type
-                      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                      const { width, ...rest } = props;
-                      return <TdMessage {...rest} />;
-                    },
-                    th: (props) => <ThMessage {...props} />,
-                    img: (props) => <ImageMessage {...props} />,
-                    a: (props) => (
-                      <LinkMessage href={props.href} rel={props.rel} target={props.target}>
-                        {props.children}
-                      </LinkMessage>
-                    )
-                  }}
-                  remarkPlugins={[remarkGfm]}
-                  rehypePlugins={rehypePlugins}
-                >
-                  {content}
-                </Markdown>
+                {error ? (
+                  <ErrorMessage {...error} />
+                ) : (
+                  <Markdown
+                    components={{
+                      p: (props) => <TextMessage component={ContentVariants.p} {...props} />,
+                      code: ({ children, ...props }) => (
+                        <CodeBlockMessage {...props} {...codeBlockProps}>
+                          {children}
+                        </CodeBlockMessage>
+                      ),
+                      h1: (props) => <TextMessage component={ContentVariants.h1} {...props} />,
+                      h2: (props) => <TextMessage component={ContentVariants.h2} {...props} />,
+                      h3: (props) => <TextMessage component={ContentVariants.h3} {...props} />,
+                      h4: (props) => <TextMessage component={ContentVariants.h4} {...props} />,
+                      h5: (props) => <TextMessage component={ContentVariants.h5} {...props} />,
+                      h6: (props) => <TextMessage component={ContentVariants.h6} {...props} />,
+                      blockquote: (props) => <TextMessage component={ContentVariants.blockquote} {...props} />,
+                      ul: (props) => <UnorderedListMessage {...props} />,
+                      ol: (props) => <OrderedListMessage {...props} />,
+                      li: (props) => <ListItemMessage {...props} />,
+                      table: (props) => <TableMessage {...props} {...tableProps} />,
+                      tbody: (props) => <TbodyMessage {...props} />,
+                      thead: (props) => <TheadMessage {...props} />,
+                      tr: (props) => <TrMessage {...props} />,
+                      td: (props) => {
+                        // Conflicts with Td type
+                        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                        const { width, ...rest } = props;
+                        return <TdMessage {...rest} />;
+                      },
+                      th: (props) => <ThMessage {...props} />,
+                      img: (props) => <ImageMessage {...props} />,
+                      a: (props) => (
+                        <LinkMessage href={props.href} rel={props.rel} target={props.target}>
+                          {props.children}
+                        </LinkMessage>
+                      )
+                    }}
+                    remarkPlugins={[remarkGfm]}
+                    rehypePlugins={rehypePlugins}
+                  >
+                    {content}
+                  </Markdown>
+                )}
                 {afterMainContent && <>{afterMainContent}</>}
               </>
             )}

package/src/MessageBar/MessageBar.scss

@@ -50,9 +50,9 @@
 }
 
 .pf-chatbot__message-textarea {
-  --pf-v6-c-form-control--before--BorderStyle: none;
-  --pf-v6-c-form-control--after--BorderStyle: none;
-  resize: none;
+  --pf-v6-c-form-control--before--BorderStyle: none !important;
+  --pf-v6-c-form-control--after--BorderStyle: none !important;
+  resize: none !important;
   background-color: transparent;
   font-size: var(--pf-t--global--font--size--md);
   line-height: 1.5rem;

package/src/MessageBox/MessageBox.scss

@@ -37,6 +37,7 @@
 
 @media screen and (min-width: 64rem) {
   .pf-chatbot--embedded,
+  .pf-chatbot--drawer,
   .pf-chatbot--fullscreen {
     .pf-chatbot__messagebox {
       max-width: 60rem;

package/src/index.ts

@@ -80,3 +80,6 @@ export * from './SourcesCard';
 
 export { default as TermsOfUse } from './TermsOfUse';
 export * from './TermsOfUse';
+
+export { default as tracking } from './tracking';
+export * from './tracking';

package/src/tracking/console_tracking_provider.ts

@@ -0,0 +1,30 @@
+import { TrackingSpi } from './tracking_spi';
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+
+export class ConsoleTrackingProvider implements TrackingSpi, TrackingApi {
+  trackPageView(url: string | undefined) {
+    // 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');
+  }
+
+  identify(userID: string): void {
+    // eslint-disable-next-line no-console
+    console.log('ConsoleProvider identify', userID);
+  }
+
+  trackSingleItem(item: string, properties?: TrackingEventProperties): void {
+    // eslint-disable-next-line no-console
+    console.log('ConsoleProvider: ' + item, properties);
+  }
+
+  getKey(): string {
+    return 'console';
+  }
+}

package/src/tracking/index.ts

@@ -0,0 +1,3 @@
+export { default } from './tracking_registry';
+
+export * from './tracking_registry';

package/src/tracking/posthog_tracking_provider.ts

@@ -0,0 +1,42 @@
+import { posthog } from 'posthog-js';
+
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+import { InitProps, TrackingSpi } from './tracking_spi';
+
+export class PosthogTrackingProvider implements TrackingSpi, TrackingApi {
+  getKey(): string {
+    return 'posthogKey';
+  }
+
+  initialize(props: InitProps): void {
+    // eslint-disable-next-line no-console
+    console.log('PosthogProvider initialize');
+    const posthogKey = props.posthogKey as string;
+
+    posthog.init(posthogKey, {
+      // eslint-disable-next-line camelcase
+      api_host: 'https://us.i.posthog.com',
+      // eslint-disable-next-line camelcase
+      person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
+    });
+  }
+
+  identify(userID: string): void {
+    // eslint-disable-next-line no-console
+    console.log('PosthogProvider userID: ' + userID);
+    posthog.identify(userID);
+  }
+
+  trackPageView(url: string | undefined): void {
+    // 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);
+    posthog.capture(item, { properties });
+  }
+}

package/src/tracking/segment_tracking_provider.ts

@@ -0,0 +1,62 @@
+import { AnalyticsBrowser } from '@segment/analytics-next';
+
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+import { InitProps, TrackingSpi } from './tracking_spi';
+
+export class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
+  private analytics: AnalyticsBrowser | undefined;
+  getKey(): string {
+    return 'segmentKey';
+  }
+
+  initialize(props: InitProps): void {
+    // 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
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const integrations = props.segmentIntegrations as any;
+
+    this.analytics = AnalyticsBrowser.load(
+      {
+        writeKey: segmentKey,
+        cdnURL: props.segmentCdn as string
+      },
+
+      {
+        integrations: {
+          ...integrations
+        }
+      }
+    );
+  }
+
+  identify(userID: string): void {
+    // eslint-disable-next-line no-console
+    console.log('SegmentProvider userID: ' + userID);
+    if (this.analytics) {
+      this.analytics.identify(userID);
+    }
+  }
+
+  trackPageView(url: string | undefined): void {
+    // eslint-disable-next-line no-console
+    console.log('SegmentProvider url', url);
+    if (this.analytics) {
+      if (url) {
+        this.analytics.page(url);
+      } else {
+        this.analytics.page(); // Uses window.url
+      }
+    }
+  }
+
+  trackSingleItem(item: string, properties?: TrackingEventProperties): void {
+    // 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

@@ -0,0 +1,28 @@
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+class TrackingProviderProxy implements TrackingApi {
+  providers: TrackingApi[] = [];
+
+  constructor(providers: TrackingApi[]) {
+    this.providers = providers;
+  }
+
+  identify(userID: string): void {
+    for (const provider of this.providers) {
+      provider.identify(userID);
+    }
+  }
+
+  trackSingleItem(eventName: string, properties?: TrackingEventProperties): void {
+    for (const provider of this.providers) {
+      provider.trackSingleItem(eventName, properties);
+    }
+  }
+
+  trackPageView(url: string | undefined) {
+    for (const provider of this.providers) {
+      provider.trackPageView(url);
+    }
+  }
+}
+
+export default TrackingProviderProxy;

package/src/tracking/tracking_api.ts

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

package/src/tracking/tracking_registry.ts

@@ -0,0 +1,33 @@
+import { InitProps, TrackingSpi } from './tracking_spi';
+import { TrackingApi } from './tracking_api';
+import TrackingProviderProxy from './trackingProviderProxy';
+import { ConsoleTrackingProvider } from './console_tracking_provider';
+import { SegmentTrackingProvider } from './segment_tracking_provider';
+import { PosthogTrackingProvider } from './posthog_tracking_provider';
+import { UmamiTrackingProvider } from './umami_tracking_provider';
+
+export const getTrackingProviders = (initProps: InitProps): TrackingApi => {
+  const providers: TrackingSpi[] = [];
+  providers.push(new SegmentTrackingProvider());
+  providers.push(new PosthogTrackingProvider());
+  providers.push(new UmamiTrackingProvider());
+
+  // TODO dynamically find and register providers
+
+  // Initialize them
+  const enabledProviders: TrackingSpi[] = [];
+  for (const provider of providers) {
+    const key = provider.getKey();
+    if (Object.keys(initProps).indexOf(key) > -1) {
+      provider.initialize(initProps);
+      enabledProviders.push(provider);
+    }
+  }
+  // Add the console provider
+  const consoleTrackingProvider = new ConsoleTrackingProvider();
+  enabledProviders.push(consoleTrackingProvider); // TODO noop- provider?
+
+  return new TrackingProviderProxy(enabledProviders);
+};
+
+export default getTrackingProviders;

package/src/tracking/tracking_spi.ts

@@ -0,0 +1,14 @@
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+
+export interface InitProps {
+  [key: string]: string | number | boolean;
+}
+
+export interface TrackingSpi extends TrackingApi {
+  // Return a key in InitProps to check if the provided should be enabled
+  getKey: () => string;
+  // Initialize the provider
+  initialize: (props: InitProps) => void;
+  // Track a single item
+  trackSingleItem: (item: string, properties?: TrackingEventProperties) => void;
+}

package/src/tracking/umami_tracking_provider.ts

@@ -0,0 +1,54 @@
+import { InitProps, TrackingSpi } from './tracking_spi';
+import { TrackingApi, TrackingEventProperties } from './tracking_api';
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    umami: any;
+  }
+}
+
+export class UmamiTrackingProvider implements TrackingSpi, TrackingApi {
+  getKey(): string {
+    return 'umamiKey';
+  }
+
+  initialize(props: InitProps): void {
+    // eslint-disable-next-line no-console
+    console.log('UmamiProvider initialize');
+    const umamiKey = props.umamiKey as string;
+    const hostUrl = props.umamiHostUrl as string;
+
+    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-auto-track', 'false');
+    script.setAttribute('data-host-url', hostUrl); // TODO ?
+    script.setAttribute('data-exclude-search', 'false'); // TODO ?
+
+    document.body.appendChild(script);
+  }
+
+  identify(userID: string): void {
+    // eslint-disable-next-line no-console
+    console.log('UmamiProvider userID: ' + userID);
+    window.umami?.identify({ userID });
+  }
+
+  trackPageView(url: string | undefined): void {
+    // eslint-disable-next-line no-console
+    console.log('UmamiProvider url', url);
+    window.umami?.track({ url });
+  }
+
+  trackSingleItem(item: string, properties?: TrackingEventProperties): void {
+    // eslint-disable-next-line no-console
+    console.log('UmamiProvider: trackSingleItem' + item, properties);
+    window.umami?.track(item, properties);
+  }
+}