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

package/src/TermsOfUse/TermsOfUse.test.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import TermsOfUse from './TermsOfUse';
+import { Content } from '@patternfly/react-core';
+
+const handleModalToggle = jest.fn();
+const onPrimaryAction = jest.fn();
+const onSecondaryAction = jest.fn();
+
+const body = (
+  <Content>
+    <h1>Heading 1</h1>
+    <p>Legal text</p>
+  </Content>
+);
+describe('TermsOfUse', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render modal correctly', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        ouiaId="Terms"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('heading', { name: /Terms of use/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Accept/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Decline/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+    expect(screen.getByText(/Legal text/i)).toBeTruthy();
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+  });
+  it('should handle image and altText props', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        image="./image.png"
+        altText="Test image"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test image');
+  });
+  it('should handle className prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        className="test"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal');
+    expect(screen.getByRole('dialog')).toHaveClass('pf-chatbot__terms-of-use-modal--default');
+    expect(screen.getByRole('dialog')).toHaveClass('test');
+  });
+  it('should handle title prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        title="Updated title"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('heading', { name: /Updated title/i })).toBeTruthy();
+    expect(screen.queryByRole('heading', { name: /Terms of use/i })).toBeFalsy();
+  });
+  it('should handle primary button prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        primaryActionBtn="First"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('button', { name: /First/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Accept/i })).toBeFalsy();
+  });
+  it('should handle secondary button prop', () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+        secondaryActionBtn="Second"
+      >
+        {body}
+      </TermsOfUse>
+    );
+    expect(screen.getByRole('button', { name: /Second/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Deny/i })).toBeFalsy();
+  });
+  it('should handle primary button click', async () => {
+    render(
+      <TermsOfUse
+        isModalOpen
+        onPrimaryAction={onPrimaryAction}
+        onSecondaryAction={onSecondaryAction}
+        handleModalToggle={handleModalToggle}
+      >
+        {body}
+      </TermsOfUse>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Accept/i }));
+    expect(onPrimaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).toHaveBeenCalledTimes(1);
+  });
+  it('should handle secondary button click', async () => {
+    render(
+      <TermsOfUse isModalOpen onSecondaryAction={onSecondaryAction} handleModalToggle={handleModalToggle}>
+        {body}
+      </TermsOfUse>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /Decline/i }));
+    expect(onSecondaryAction).toHaveBeenCalledTimes(1);
+    expect(handleModalToggle).not.toHaveBeenCalled();
+  });
+});

package/src/TermsOfUse/TermsOfUse.tsx

@@ -0,0 +1,117 @@
+// ============================================================================
+// Terms of Use Modal - Chatbot Modal Extension
+// ============================================================================
+import React from 'react';
+import { Button, Content, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@patternfly/react-core';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal/ChatbotModal';
+
+export interface TermsOfUseProps extends ModalProps {
+  /** Class applied to modal */
+  className?: string;
+  /** Action assigned to primary modal button */
+  onPrimaryAction?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Action assigned to secondary modal button */
+  onSecondaryAction: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Name of primary modal button */
+  primaryActionBtn?: string;
+  /** Name of secondary modal button */
+  secondaryActionBtn?: string;
+  /** Function that handles modal toggle */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** Optional image displayed in header */
+  image?: string;
+  /** Alt text for optional image displayed in header */
+  altText?: string;
+  /** Ref applied to modal */
+  innerRef?: React.Ref<HTMLDivElement>;
+  /** OuiaID applied to modal */
+  ouiaId?: string;
+}
+
+export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
+  handleModalToggle,
+  isModalOpen,
+  onPrimaryAction,
+  onSecondaryAction,
+  primaryActionBtn = 'Accept',
+  secondaryActionBtn = 'Decline',
+  title = 'Terms of use',
+  image,
+  altText,
+  displayMode = ChatbotDisplayMode.default,
+  className,
+  children,
+  innerRef,
+  ouiaId = 'TermsOfUse',
+  ...props
+}: TermsOfUseProps) => {
+  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    handleModalToggle(_event);
+    onPrimaryAction && onPrimaryAction(_event);
+  };
+
+  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+    onSecondaryAction(_event);
+  };
+
+  const modal = (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      ouiaId={ouiaId}
+      aria-labelledby="terms-of-use-title"
+      aria-describedby="terms-of-use-modal"
+      className={`pf-chatbot__terms-of-use-modal pf-chatbot__terms-of-use-modal--${displayMode} ${className ? className : ''}`}
+      displayMode={displayMode}
+      {...props}
+    >
+      {/* This is a workaround since the PatternFly modal doesn't have ref forwarding */}
+      <section className={`pf-chatbot__terms-of-use--section`} aria-label={title} tabIndex={-1} ref={innerRef}>
+        <ModalHeader>
+          <div className="pf-chatbot__terms-of-use--header">
+            {image && altText && <img src={image} className="pf-chatbot__terms-of-use--image" alt={altText} />}
+            <h1 className="pf-chatbot__terms-of-use--title">{title}</h1>
+          </div>
+        </ModalHeader>
+        <ModalBody>
+          <Content>{children}</Content>
+        </ModalBody>
+        <ModalFooter className="pf-chatbot__terms-of-use--footer">
+          <Button
+            isBlock
+            key="terms-of-use-modal-primary"
+            variant="primary"
+            onClick={handlePrimaryAction}
+            form="terms-of-use-form"
+            size="lg"
+          >
+            {primaryActionBtn}
+          </Button>
+          <Button
+            isBlock
+            key="terms-of-use-modal-secondary"
+            variant="secondary"
+            onClick={handleSecondaryAction}
+            size="lg"
+          >
+            {secondaryActionBtn}
+          </Button>
+        </ModalFooter>
+      </section>
+    </ChatbotModal>
+  );
+
+  return modal;
+};
+
+const TermsOfUse = React.forwardRef((props: TermsOfUseProps, ref: React.Ref<HTMLDivElement>) => (
+  <TermsOfUseBase innerRef={ref} {...props} />
+));
+
+export default TermsOfUse;

package/src/TermsOfUse/index.ts

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

package/src/__mocks__/rehype-external-links.ts

@@ -0,0 +1,3 @@
+const rehypeExternalLinks = jest.fn((children) => children);
+
+export default rehypeExternalLinks;

package/src/__mocks__/rehype-sanitize.ts

@@ -0,0 +1,3 @@
+const rehypeSanitize = jest.fn(() => null);
+
+export default rehypeSanitize;

package/src/__mocks__/rehype-unwrap-images.tsx

@@ -0,0 +1,3 @@
+const rehypeUnwrapImages = jest.fn(() => null);
+
+export default rehypeUnwrapImages;

package/src/index.ts

@@ -39,6 +39,9 @@ export * from './ChatbotWelcomePrompt';
 export { default as CodeModal } from './CodeModal';
 export * from './CodeModal';
 
+export { default as Compare } from './Compare';
+export * from './Compare';
+
 export { default as FileDetails } from './FileDetails';
 export * from './FileDetails';
 
@@ -66,8 +69,17 @@ export * from './PreviewAttachment';
 export { default as ResponseActions } from './ResponseActions';
 export * from './ResponseActions';
 
+export { default as Settings } from './Settings';
+export * from './Settings';
+
 export { default as SourceDetailsMenuItem } from './SourceDetailsMenuItem';
 export * from './SourceDetailsMenuItem';
 
 export { default as SourcesCard } from './SourcesCard';
 export * from './SourcesCard';
+
+export { default as TermsOfUse } from './TermsOfUse';
+export * from './TermsOfUse';
+
+export { default as tracking } from './tracking';
+export * from './tracking';

package/src/main.scss

@@ -10,20 +10,28 @@
 @import './ChatbotToggle/ChatbotToggle';
 @import './ChatbotWelcomePrompt/ChatbotWelcomePrompt';
 @import './CodeModal/CodeModal';
+@import './Compare/Compare';
 @import './FileDetails/FileDetails';
 @import './FileDetailsLabel/FileDetailsLabel';
 @import './FileDropZone/FileDropZone';
 @import './Message/Message';
 @import './Message/CodeBlockMessage/CodeBlockMessage';
+@import './Message/ImageMessage/ImageMessage';
 @import './Message/TextMessage/TextMessage';
 @import './Message/ListMessage/ListMessage';
+@import './Message/TableMessage/TableMessage';
 @import './Message/MessageLoading';
+@import './Message/QuickStarts/QuickStartTile';
+@import './Message/QuickResponse/QuickResponse';
+@import './Message/UserFeedback/UserFeedback';
 @import './MessageBar/MessageBar';
 @import './MessageBox/MessageBox';
 @import './MessageBox/JumpButton';
 @import './ResponseActions/ResponseActions';
+@import './Settings/Settings';
 @import './SourcesCard/SourcesCard.scss';
 @import './SourceDetailsMenuItem/SourceDetailsMenuItem';
+@import './TermsOfUse/TermsOfUse';
 
 :where(:root) {
   // ============================================================================
@@ -44,8 +52,6 @@
 
   --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
 
-  --pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
-
   --pf-t--chatbot--blue-icon--background--color--hover: rgba(
     146,
     197,
@@ -58,13 +64,9 @@
   // Chatbot Default tokens using PF semantic tokens
   // ============================================================================
   --pf-t--chatbot-toggle--color: var(--pf-t--global--icon--color--inverse);
-
-  --pf-t--chatbot--font-size: var(--pf-t--global--font--size--md);
   --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
   --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
 
-  --pf-t--chatbot--icon--fill: var(--pf-t--global--icon--color--subtle);
-  --pf-t--chatbot--icon--fill--hover: var(--pf-t--global--icon--color--regular);
   --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
 
   --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);

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