@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

package/src/ResponseActions/ResponseActions.tsx

@@ -7,9 +7,9 @@ import {
   OutlinedCopyIcon
 } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
-import { TooltipProps } from '@patternfly/react-core';
+import { ButtonProps, TooltipProps } from '@patternfly/react-core';
 
-export interface ActionProps {
+export interface ActionProps extends Omit<ButtonProps, 'ref'> {
   /** Aria-label for the button */
   ariaLabel?: string;
   /** Aria-label for the button, shown when the button is clicked. */
@@ -28,6 +28,12 @@ export interface ActionProps {
   tooltipProps?: TooltipProps;
   /** Icon for custom response action */
   icon?: React.ReactNode;
+  /** Ref for response action button */
+  ref?: React.Ref<HTMLButtonElement>;
+  /** Whether content launched by button, such as the feedback form, is expanded */
+  'aria-expanded'?: boolean;
+  /** Id for content controlled by the button, such as the feedback form */
+  'aria-controls'?: string;
 }
 
 export interface ResponseActionProps {
@@ -82,6 +88,9 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           tooltipProps={positive.tooltipProps}
           icon={<OutlinedThumbsUpIcon />}
           isClicked={activeButton === 'positive'}
+          ref={positive.ref}
+          aria-expanded={positive['aria-expanded']}
+          aria-controls={positive['aria-controls']}
         ></ResponseActionButton>
       )}
       {negative && (
@@ -96,6 +105,9 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           tooltipProps={negative.tooltipProps}
           icon={<OutlinedThumbsDownIcon />}
           isClicked={activeButton === 'negative'}
+          ref={negative.ref}
+          aria-expanded={negative['aria-expanded']}
+          aria-controls={negative['aria-controls']}
         ></ResponseActionButton>
       )}
       {copy && (
@@ -110,6 +122,9 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           tooltipProps={copy.tooltipProps}
           icon={<OutlinedCopyIcon />}
           isClicked={activeButton === 'copy'}
+          ref={copy.ref}
+          aria-expanded={copy['aria-expanded']}
+          aria-controls={copy['aria-controls']}
         ></ResponseActionButton>
       )}
       {share && (
@@ -124,6 +139,9 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           tooltipProps={share.tooltipProps}
           icon={<ExternalLinkAltIcon />}
           isClicked={activeButton === 'share'}
+          ref={share.ref}
+          aria-expanded={share['aria-expanded']}
+          aria-controls={share['aria-controls']}
         ></ResponseActionButton>
       )}
       {listen && (
@@ -138,6 +156,9 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           tooltipProps={listen.tooltipProps}
           icon={<VolumeUpIcon />}
           isClicked={activeButton === 'listen'}
+          ref={listen.ref}
+          aria-expanded={listen['aria-expanded']}
+          aria-controls={listen['aria-controls']}
         ></ResponseActionButton>
       )}
       {Object.keys(additionalActions).map((action) => (
@@ -153,6 +174,9 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           clickedTooltipContent={additionalActions[action]?.clickedTooltipContent}
           icon={additionalActions[action]?.icon}
           isClicked={activeButton === action}
+          ref={additionalActions[action]?.ref}
+          aria-expanded={additionalActions[action]?.['aria-expanded']}
+          aria-controls={additionalActions[action]?.['aria-controls']}
         />
       ))}
     </div>

package/src/Settings/Settings.scss

@@ -19,7 +19,7 @@
   justify-content: space-between;
   border-bottom: 1px solid var(--pf-t--global--border--color--default);
   padding: var(--pf-t--global--spacer--lg);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 
 .pf-chatbot__settings-form-row:last-of-type {
@@ -29,6 +29,6 @@
 .pf-chatbot__settings--title {
   font-family: var(--pf-t--global--font--family--heading);
   font-size: var(--pf-t--global--font--size--xl);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
   text-align: center;
 }

package/src/Settings/SettingsForm.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { render, screen } from '@testing-library/react';
+import { SettingsForm } from './SettingsForm';
+
+describe('SettingsForm', () => {
+  it('should render settingsForm with custom classname', () => {
+    const { container } = render(<SettingsForm className="custom-settings" />);
+    expect(container.querySelector('.custom-settings')).toBeTruthy();
+  });
+
+  it('should render settingsForm with fields', () => {
+    const fields = [
+      {
+        id: 'archived-chat',
+        label: 'Archive chat',
+        field: (
+          <Button id="archived-chat" variant="secondary">
+            Archive chat
+          </Button>
+        )
+      }
+    ];
+    render(<SettingsForm fields={fields} />);
+
+    expect(screen.getByRole('button', { name: 'Archive chat' })).toBeTruthy();
+  });
+});

package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.scss

@@ -1,7 +1,7 @@
 .pf-chatbot__source-details-subhead {
   color: var(--pf-t--global--text--color--subtle);
   font-size: var(--pf-t--global--icon--size--font--xs);
-  font-weight: 500;
+  font-weight: var(--pf-t--global--font--weight--body--bold);
 }
 
 .pf-chatbot__source-details-heading {
@@ -10,7 +10,7 @@
 }
 
 .pf-chatbot__source-details-icon {
-  width: 100%;
+  width: 100% !important;
 }
 
 // this is only used in demo code

package/src/SourcesCard/SourcesCard.scss

@@ -4,6 +4,12 @@
   gap: var(--pf-t--global--spacer--sm);
   padding-block-start: var(--pf-t--global--spacer--sm);
   max-width: 22.5rem;
+
+  a {
+    color: var(--pf-t--global--text--color--link--default) !important;
+    -webkit-text-decoration: var(--pf-t--global--text-decoration--link--line--default) !important;
+    text-decoration: var(--pf-t--global--text-decoration--link--line--default) !important;
+  }
 }
 
 .pf-chatbot__sources-card {
@@ -29,7 +35,7 @@
 .pf-chatbot__sources-card-footer-container {
   border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
   padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)
-    var(--pf-t--global--spacer--sm);
+    var(--pf-t--global--spacer--sm) !important;
   .pf-chatbot__sources-card-footer {
     display: flex;
     justify-content: space-between;
@@ -63,11 +69,11 @@
       .pf-v6-c-button:hover,
       .pf-v6-c-button:focus {
         .pf-v6-c-button__icon {
-          color: var(--pf-t--chatbot--icon--fill--hover);
+          color: var(--pf-t--global--icon--color--regular);
         }
       }
       .pf-v6-c-button__icon {
-        color: var(--pf-t--chatbot--icon--fill);
+        color: var(--pf-t--global--icon--color--subtle);
       }
     }
   }

package/src/TermsOfUse/TermsOfUse.scss

@@ -52,7 +52,7 @@
 .pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--fullscreen.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--fullscreen,
 .pf-chatbot__chatbot-modal.pf-chatbot__chatbot-modal--embedded.pf-chatbot__terms-of-use-modal.pf-chatbot__terms-of-use-modal--embedded {
   // override parent modal style
-  height: inherit;
+  height: inherit !important;
 
   .pf-v6-c-content {
     h2 {

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';
 
@@ -77,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/main.scss

@@ -10,14 +10,20 @@
 @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';
@@ -46,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,
@@ -60,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);
+  }
+}