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

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