@patternfly/chatbot 2.2.0 → 6.3.0-prerelease.1

package/src/SourcesCard/SourcesCard.tsx

@@ -12,22 +12,31 @@ import {
   CardFooter,
   CardProps,
   CardTitle,
+  ExpandableSection,
+  ExpandableSectionVariant,
   Icon,
   pluralize,
   Truncate
 } from '@patternfly/react-core';
+import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 
 export interface SourcesCardProps extends CardProps {
   /** Additional classes for the pagination navigation container. */
   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 }[];
+  sources: {
+    title?: string;
+    link: string;
+    body?: React.ReactNode | string;
+    isExternal?: boolean;
+    hasShowMore?: boolean;
+  }[];
   /** Label for the English word "source" */
   sourceWord?: string;
   /** Plural for sourceWord */
@@ -42,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',
@@ -57,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);
@@ -78,13 +97,37 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
       <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
       <Card className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title">
-          <a href={sources[page - 1].link}>{renderTitle(sources[page - 1].title)}</a>
+          <Button
+            component="a"
+            variant={ButtonVariant.link}
+            href={sources[page - 1].link}
+            icon={sources[page - 1].isExternal ? <ExternalLinkSquareAltIcon /> : undefined}
+            iconPosition="end"
+            isInline
+            rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
+            target={sources[page - 1].isExternal ? '_blank' : undefined}
+          >
+            {renderTitle(sources[page - 1].title)}
+          </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 && (
@@ -117,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}
@@ -144,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 });
   }
 }

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;
 

package/src/tracking/tracking_registry.ts

@@ -1,4 +1,4 @@
-import { InitProps, TrackingSpi } from './tracking_spi';
+import { InitProps, Providers, TrackingSpi } from './tracking_spi';
 import { TrackingApi } from './tracking_api';
 import TrackingProviderProxy from './trackingProviderProxy';
 import { ConsoleTrackingProvider } from './console_tracking_provider';
@@ -8,26 +8,59 @@ 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
+  if (initProps.activeProviders) {
+    let tmpProps: string[] = 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 as string;
+      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: TrackingSpi[] = [];
   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/src/tracking/tracking_spi.ts

@@ -1,14 +1,25 @@
-import { TrackingApi, TrackingEventProperties } from './tracking_api';
+import { TrackingApi } from './tracking_api';
 
-export interface InitProps {
-  [key: string]: string | number | boolean;
+export enum Providers {
+  None,
+  Segment,
+  Umami,
+  Posthog,
+  Console
+}
+
+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 {
-  // 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

@@ -8,15 +8,25 @@ declare global {
   }
 }
 
+// Items in a queue.
+// We need to queue up requests until the script is fully loaded
+interface queueT {
+  what: 'i' | 't' | 'p'; // identify, track, pageview
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  payload?: any;
+}
+
 export class UmamiTrackingProvider implements TrackingSpi, TrackingApi {
-  getKey(): string {
-    return 'umamiKey';
-  }
+  private verbose = false;
+  private websiteId: string | undefined;
+  private queue: queueT[] = [];
 
   initialize(props: InitProps): void {
-    // eslint-disable-next-line no-console
-    console.log('UmamiProvider initialize');
-    const umamiKey = props.umamiKey as string;
+    this.verbose = props.verbose;
+    this.log('UmamiProvider initialize');
+
+    this.websiteId = props.umamiKey as string;
     const hostUrl = props.umamiHostUrl as string;
 
     const script = document.createElement('script');
@@ -25,30 +35,76 @@ export class UmamiTrackingProvider implements TrackingSpi, TrackingApi {
     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: string): void {
-    // eslint-disable-next-line no-console
-    console.log('UmamiProvider userID: ' + userID);
-    window.umami?.identify({ userID });
+  identify(userID: string, userProperties: TrackingEventProperties = {}): void {
+    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: string | undefined): void {
-    // eslint-disable-next-line no-console
-    console.log('UmamiProvider url', url);
-    window.umami?.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: string, properties?: TrackingEventProperties): void {
-    // eslint-disable-next-line no-console
-    console.log('UmamiProvider: trackSingleItem' + item, properties);
-    window.umami?.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(): void {
+    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: string): void {
+    if (this.verbose) {
+      // eslint-disable-next-line no-console
+      console.debug('UmamiProvider: ', msg);
+    }
   }
 }

package/src/SourcesCard/__snapshots__/SourcesCard.test.tsx.snap

@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SourcesCard should render card 1`] = `
-<div>
-  <div
-    class="pf-chatbot__source"
-  >
-    <span>
-      1 source
-    </span>
-    <div
-      class="pf-v6-c-card pf-chatbot__sources-card"
-      data-ouia-component-id="OUIA-Generated-Card-1"
-      data-ouia-component-type="PF6/Card"
-      data-ouia-safe="true"
-      id=""
-    >
-      <div
-        class="pf-v6-c-card__title"
-      >
-        <div
-          class="pf-v6-c-card__title-text pf-chatbot__sources-card-title"
-        >
-          <a
-            href=""
-          >
-            Source 1
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;