@patternfly/chatbot 6.3.0-prerelease.9 → 6.4.0-prerelease.2

package/src/ResponseActions/ResponseActionButton.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
-import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import type { FunctionComponent, MouseEvent, Ref } from 'react';
+import { forwardRef } from 'react';
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
 
-export interface ResponseActionButtonProps {
+export interface ResponseActionButtonProps extends ButtonProps {
   /** Aria-label for the button. Defaults to the value of the tooltipContent if none provided */
   ariaLabel?: string;
   /** Aria-label for the button, shown when the button is clicked. Defaults to the value of ariaLabel or tooltipContent if not provided. */
@@ -26,7 +27,7 @@ export interface ResponseActionButtonProps {
   innerRef?: React.Ref<HTMLButtonElement>;
 }
 
-export const ResponseActionButtonBase: React.FunctionComponent<ResponseActionButtonProps> = ({
+export const ResponseActionButtonBase: FunctionComponent<ResponseActionButtonProps> = ({
   ariaLabel,
   clickedAriaLabel = ariaLabel,
   className,
@@ -80,7 +81,7 @@ export const ResponseActionButtonBase: React.FunctionComponent<ResponseActionBut
   );
 };
 
-const ResponseActionButton = React.forwardRef((props: ResponseActionButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+const ResponseActionButton = forwardRef((props: ResponseActionButtonProps, ref: Ref<HTMLButtonElement>) => (
   <ResponseActionButtonBase innerRef={ref} {...props} />
 ));
 

package/src/ResponseActions/ResponseActions.test.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import ResponseActions from './ResponseActions';
+import ResponseActions, { ActionProps } from './ResponseActions';
 import userEvent from '@testing-library/user-event';
 import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons';
 import Message from '../Message';
@@ -10,6 +9,7 @@ const ALL_ACTIONS = [
   { type: 'positive', label: 'Good response', clickedLabel: 'Response recorded' },
   { type: 'negative', label: 'Bad response', clickedLabel: 'Response recorded' },
   { type: 'copy', label: 'Copy', clickedLabel: 'Copied' },
+  { type: 'edit', label: 'Edit', clickedLabel: 'Editing' },
   { type: 'share', label: 'Share', clickedLabel: 'Shared' },
   { type: 'listen', label: 'Listen', clickedLabel: 'Listening' }
 ];
@@ -41,6 +41,16 @@ const CUSTOM_ACTIONS = [
   }
 ];
 
+const ALL_ACTIONS_DATA_TEST = [
+  { type: 'positive', label: 'Good response', dataTestId: 'positive' },
+  { type: 'negative', label: 'Bad response', dataTestId: 'negative' },
+  { type: 'copy', label: 'Copy', dataTestId: 'copy' },
+  { type: 'edit', label: 'Edit', dataTestId: 'edit' },
+  { type: 'share', label: 'Share', dataTestId: 'share' },
+  { type: 'download', label: 'Download', dataTestId: 'download' },
+  { type: 'listen', label: 'Listen', dataTestId: 'listen' }
+];
+
 describe('ResponseActions', () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -52,7 +62,9 @@ describe('ResponseActions', () => {
           positive: { onClick: jest.fn() },
           negative: { onClick: jest.fn() },
           copy: { onClick: jest.fn() },
+          edit: { onClick: jest.fn() },
           share: { onClick: jest.fn() },
+          download: { onClick: jest.fn() },
           listen: { onClick: jest.fn() }
         }}
       />
@@ -60,9 +72,11 @@ describe('ResponseActions', () => {
     const goodBtn = screen.getByRole('button', { name: 'Good response' });
     const badBtn = screen.getByRole('button', { name: 'Bad response' });
     const copyBtn = screen.getByRole('button', { name: 'Copy' });
+    const editBtn = screen.getByRole('button', { name: 'Edit' });
     const shareBtn = screen.getByRole('button', { name: 'Share' });
+    const downloadBtn = screen.getByRole('button', { name: 'Download' });
     const listenBtn = screen.getByRole('button', { name: 'Listen' });
-    const buttons = [goodBtn, badBtn, copyBtn, shareBtn, listenBtn];
+    const buttons = [goodBtn, badBtn, copyBtn, editBtn, shareBtn, downloadBtn, listenBtn];
     buttons.forEach((button) => {
       expect(button).toBeTruthy();
     });
@@ -119,6 +133,103 @@ describe('ResponseActions', () => {
     expect(goodBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
     expect(badBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
   });
+
+  it('should handle isClicked prop within group of buttons correctly', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn() }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+
+    expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should set "listen" button as active if its `isClicked` is true', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: false },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: false },
+            listen: { 'data-testid': 'listen-btn', onClick: jest.fn(), isClicked: true }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+    expect(screen.getByTestId('listen-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    expect(screen.getByTestId('positive-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should prioritize "positive" when both "positive" and "negative" are set to clicked', async () => {
+    render(
+      <ResponseActions
+        actions={
+          {
+            positive: { 'data-testid': 'positive-btn', onClick: jest.fn(), isClicked: true },
+            negative: { 'data-testid': 'negative-btn', onClick: jest.fn(), isClicked: true }
+          } as Record<string, ActionProps>
+        }
+      />
+    );
+    // Positive button should take precendence
+    expect(screen.getByTestId('positive-btn')).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(screen.getByTestId('negative-btn')).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
+  it('should set an additional action button as active if it is initially clicked and no predefined are clicked', async () => {
+    const [additionalActions] = CUSTOM_ACTIONS;
+    const customActions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+      negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: false },
+      ...Object.keys(additionalActions).reduce((acc, actionKey) => {
+        acc[actionKey] = {
+          ...additionalActions[actionKey],
+          'data-testid': actionKey,
+          isClicked: actionKey === 'regenerate'
+        };
+        return acc;
+      }, {})
+    };
+    render(<ResponseActions actions={customActions} />);
+
+    Object.keys(customActions).forEach((actionKey) => {
+      if (actionKey === 'regenerate') {
+        expect(screen.getByTestId(actionKey)).toHaveClass('pf-chatbot__button--response-action-clicked');
+      } else {
+        // Other actions should not have clicked class
+        expect(screen.getByTestId(actionKey)).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+      }
+    });
+  });
+
+  it('should activate the clicked button and deactivate any previously active button', async () => {
+    const actions = {
+      positive: { 'data-testid': 'positive', onClick: jest.fn(), isClicked: false },
+      negative: { 'data-testid': 'negative', onClick: jest.fn(), isClicked: true }
+    };
+    render(<ResponseActions actions={actions} />);
+
+    const negativeBtn = screen.getByTestId('negative');
+    const positiveBtn = screen.getByTestId('positive');
+    // negative button is initially clicked
+    expect(negativeBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(positiveBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+
+    await userEvent.click(positiveBtn);
+
+    // positive button should now have the clicked class
+    expect(positiveBtn).toHaveClass('pf-chatbot__button--response-action-clicked');
+    expect(negativeBtn).not.toHaveClass('pf-chatbot__button--response-action-clicked');
+  });
+
   it('should render buttons correctly', () => {
     ALL_ACTIONS.forEach(({ type, label }) => {
       render(<ResponseActions actions={{ [type]: { onClick: jest.fn() } }} />);
@@ -158,7 +269,9 @@ describe('ResponseActions', () => {
       { type: 'positive', ariaLabel: 'Thumbs up' },
       { type: 'negative', ariaLabel: 'Thumbs down' },
       { type: 'copy', ariaLabel: 'Copy the message' },
+      { type: 'edit', ariaLabel: 'Edit this message' },
       { type: 'share', ariaLabel: 'Share it with friends' },
+      { type: 'download', ariaLabel: 'Download your cool message' },
       { type: 'listen', ariaLabel: 'Listen up' }
     ];
     actions.forEach(({ type, ariaLabel }) => {
@@ -181,6 +294,13 @@ describe('ResponseActions', () => {
     });
   });
 
+  it('should be able to add custom attributes to buttons', () => {
+    ALL_ACTIONS_DATA_TEST.forEach(({ type, dataTestId }) => {
+      render(<ResponseActions actions={{ [type]: { onClick: jest.fn(), 'data-testid': dataTestId } }} />);
+      expect(screen.getByTestId(dataTestId)).toBeTruthy();
+    });
+  });
+
   it('should be able to add custom actions', () => {
     CUSTOM_ACTIONS.forEach((action) => {
       const key = Object.keys(action)[0];
@@ -192,12 +312,14 @@ describe('ResponseActions', () => {
               onClick: action[key].onClick,
               // doing this just because it's easier to test without a regex for the button name
               ariaLabel: action[key].ariaLabel.toLowerCase(),
-              icon: action[key].icon
+              icon: action[key].icon,
+              'data-testid': action[key]
             }
           }}
         />
       );
       expect(screen.getByRole('button', { name: key })).toBeTruthy();
+      expect(screen.getByTestId(action[key])).toBeTruthy();
     });
   });
 });

package/src/ResponseActions/ResponseActions.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
+import type { FunctionComponent, MouseEvent } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   ExternalLinkAltIcon,
   VolumeUpIcon,
   OutlinedThumbsUpIcon,
   OutlinedThumbsDownIcon,
-  OutlinedCopyIcon
+  OutlinedCopyIcon,
+  DownloadIcon,
+  PencilAltIcon
 } from '@patternfly/react-icons';
 import ResponseActionButton from './ResponseActionButton';
 import { ButtonProps, TooltipProps } from '@patternfly/react-core';
@@ -36,25 +39,58 @@ export interface ActionProps extends Omit<ButtonProps, 'ref'> {
   'aria-controls'?: string;
 }
 
+type ExtendedActionProps = ActionProps & {
+  [key: string]: any;
+};
 export interface ResponseActionProps {
   /** Props for message actions, such as feedback (positive or negative), copy button, share, and listen */
-  actions: Record<string, ActionProps | undefined> & {
+  actions: Record<string, ExtendedActionProps | undefined> & {
     positive?: ActionProps;
     negative?: ActionProps;
     copy?: ActionProps;
     share?: ActionProps;
+    download?: ActionProps;
     listen?: ActionProps;
+    edit?: ActionProps;
   };
 }
 
-export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({ actions }) => {
-  const [activeButton, setActiveButton] = React.useState<string>();
-  const { positive, negative, copy, share, listen, ...additionalActions } = actions;
-  const responseActions = React.useRef<HTMLDivElement>(null);
+export const ResponseActions: FunctionComponent<ResponseActionProps> = ({ actions }) => {
+  const [activeButton, setActiveButton] = useState<string>();
+  const [clickStatePersisted, setClickStatePersisted] = useState<boolean>(false);
+  useEffect(() => {
+    // Define the order of precedence for checking initial `isClicked`
+    const actionPrecedence = ['positive', 'negative', 'copy', 'edit', 'share', 'download', 'listen'];
+    let initialActive: string | undefined;
+
+    // Check predefined actions first based on precedence
+    for (const actionName of actionPrecedence) {
+      const actionProp = actions[actionName as keyof typeof actions];
+      if (actionProp?.isClicked) {
+        initialActive = actionName;
+        break;
+      }
+    }
+    // If no predefined action was initially clicked, check additionalActions
+    if (!initialActive) {
+      const clickedActionName = Object.keys(additionalActions).find(
+        (actionName) => !actionPrecedence.includes(actionName) && additionalActions[actionName]?.isClicked
+      );
+      initialActive = clickedActionName;
+    }
+    if (initialActive) {
+      // Click state is explicitly controlled by consumer.
+      setClickStatePersisted(true);
+    }
+    setActiveButton(initialActive);
+  }, [actions]);
+
+  const { positive, negative, copy, edit, share, download, listen, ...additionalActions } = actions;
+  const responseActions = useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const handleClickOutside = (e) => {
-      if (responseActions.current && !responseActions.current.contains(e.target)) {
+      if (responseActions.current && !responseActions.current.contains(e.target) && !clickStatePersisted) {
         setActiveButton(undefined);
       }
     };
@@ -63,13 +99,14 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
     return () => {
       window.removeEventListener('click', handleClickOutside);
     };
-  }, []);
+  }, [clickStatePersisted]);
 
   const handleClick = (
-    e: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent,
+    e: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent,
     id: string,
-    onClick?: (event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
+    onClick?: (event: MouseEvent | MouseEvent<Element, MouseEvent> | KeyboardEvent) => void
   ) => {
+    setClickStatePersisted(false);
     setActiveButton(id);
     onClick && onClick(e);
   };
@@ -78,6 +115,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
     <div ref={responseActions} className="pf-chatbot__response-actions">
       {positive && (
         <ResponseActionButton
+          {...positive}
           ariaLabel={positive.ariaLabel ?? 'Good response'}
           clickedAriaLabel={positive.ariaLabel ?? 'Response recorded'}
           onClick={(e) => handleClick(e, 'positive', positive.onClick)}
@@ -95,6 +133,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {negative && (
         <ResponseActionButton
+          {...negative}
           ariaLabel={negative.ariaLabel ?? 'Bad response'}
           clickedAriaLabel={negative.ariaLabel ?? 'Response recorded'}
           onClick={(e) => handleClick(e, 'negative', negative.onClick)}
@@ -112,6 +151,7 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
       )}
       {copy && (
         <ResponseActionButton
+          {...copy}
           ariaLabel={copy.ariaLabel ?? 'Copy'}
           clickedAriaLabel={copy.ariaLabel ?? 'Copied'}
           onClick={(e) => handleClick(e, 'copy', copy.onClick)}
@@ -127,8 +167,27 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           aria-controls={copy['aria-controls']}
         ></ResponseActionButton>
       )}
+      {edit && (
+        <ResponseActionButton
+          {...edit}
+          ariaLabel={edit.ariaLabel ?? 'Edit'}
+          clickedAriaLabel={edit.ariaLabel ?? 'Editing'}
+          onClick={(e) => handleClick(e, 'edit', edit.onClick)}
+          className={edit.className}
+          isDisabled={edit.isDisabled}
+          tooltipContent={edit.tooltipContent ?? 'Edit '}
+          clickedTooltipContent={edit.clickedTooltipContent ?? 'Editing'}
+          tooltipProps={edit.tooltipProps}
+          icon={<PencilAltIcon />}
+          isClicked={activeButton === 'edit'}
+          ref={edit.ref}
+          aria-expanded={edit['aria-expanded']}
+          aria-controls={edit['aria-controls']}
+        ></ResponseActionButton>
+      )}
       {share && (
         <ResponseActionButton
+          {...share}
           ariaLabel={share.ariaLabel ?? 'Share'}
           clickedAriaLabel={share.ariaLabel ?? 'Shared'}
           onClick={(e) => handleClick(e, 'share', share.onClick)}
@@ -144,8 +203,27 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           aria-controls={share['aria-controls']}
         ></ResponseActionButton>
       )}
+      {download && (
+        <ResponseActionButton
+          {...download}
+          ariaLabel={download.ariaLabel ?? 'Download'}
+          clickedAriaLabel={download.ariaLabel ?? 'Downloaded'}
+          onClick={(e) => handleClick(e, 'download', download.onClick)}
+          className={download.className}
+          isDisabled={download.isDisabled}
+          tooltipContent={download.tooltipContent ?? 'Download'}
+          clickedTooltipContent={download.clickedTooltipContent ?? 'Downloaded'}
+          tooltipProps={download.tooltipProps}
+          icon={<DownloadIcon />}
+          isClicked={activeButton === 'download'}
+          ref={download.ref}
+          aria-expanded={download['aria-expanded']}
+          aria-controls={download['aria-controls']}
+        ></ResponseActionButton>
+      )}
       {listen && (
         <ResponseActionButton
+          {...listen}
           ariaLabel={listen.ariaLabel ?? 'Listen'}
           clickedAriaLabel={listen.ariaLabel ?? 'Listening'}
           onClick={(e) => handleClick(e, 'listen', listen.onClick)}
@@ -161,8 +239,10 @@ export const ResponseActions: React.FunctionComponent<ResponseActionProps> = ({
           aria-controls={listen['aria-controls']}
         ></ResponseActionButton>
       )}
+
       {Object.keys(additionalActions).map((action) => (
         <ResponseActionButton
+          {...additionalActions[action]}
           key={action}
           ariaLabel={additionalActions[action]?.ariaLabel}
           clickedAriaLabel={additionalActions[action]?.clickedAriaLabel}

package/src/Settings/SettingsForm.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Button } from '@patternfly/react-core';
 import { render, screen } from '@testing-library/react';
 import { SettingsForm } from './SettingsForm';

package/src/Settings/SettingsForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface SettingsFormProps {
   /** Class applied to form container */
@@ -9,12 +9,7 @@ export interface SettingsFormProps {
   isCompact?: boolean;
 }
 
-export const SettingsForm: React.FunctionComponent<SettingsFormProps> = ({
-  className,
-  fields = [],
-  isCompact,
-  ...props
-}) => (
+export const SettingsForm: FunctionComponent<SettingsFormProps> = ({ className, fields = [], isCompact, ...props }) => (
   <div
     className={`pf-chatbot__settings-form-container ${isCompact ? 'pf-m-compact' : ''} ${className ? ` ${className}` : ''}`}
     {...props}

package/src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { Icon, Flex, Stack, StackItem } from '@patternfly/react-core';
 
 export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivElement> {
@@ -10,7 +10,7 @@ export interface SourceDetailsMenuItemProps extends React.HTMLProps<HTMLDivEleme
   type?: string;
 }
 
-export const SourceDetailsMenuItem: React.FunctionComponent<SourceDetailsMenuItemProps> = ({
+export const SourceDetailsMenuItem: FunctionComponent<SourceDetailsMenuItemProps> = ({
   icon,
   name,
   type,

package/src/SourcesCard/SourcesCard.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -243,4 +242,18 @@ describe('SourcesCard', () => {
     );
     expect(screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
   });
+
+  it('should call onClick appropriately', async () => {
+    const spy = jest.fn();
+    render(<SourcesCard sources={[{ title: 'How to make an apple pie', link: '', onClick: spy }]} />);
+    await userEvent.click(screen.getByRole('link', { name: /How to make an apple pie/i }));
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should apply titleProps appropriately', () => {
+    render(
+      <SourcesCard sources={[{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }]} />
+    );
+    expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
+  });
 });

package/src/SourcesCard/SourcesCard.tsx

@@ -1,11 +1,12 @@
 // ============================================================================
 // Chatbot Main - Messages - Sources Card
 // ============================================================================
-import React from 'react';
-
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { useState } from 'react';
 // Import PatternFly components
 import {
   Button,
+  ButtonProps,
   ButtonVariant,
   Card,
   CardBody,
@@ -31,11 +32,20 @@ export interface SourcesCardProps extends CardProps {
   paginationAriaLabel?: string;
   /** Content rendered inside the paginated card */
   sources: {
+    /** Title of sources card */
     title?: string;
+    /** Link to source */
     link: string;
+    /** Body of sources card */
     body?: React.ReactNode | string;
+    /** Whether link is external */
     isExternal?: boolean;
+    /** Whether sources card is expandable */
     hasShowMore?: boolean;
+    /** onClick event applied to the title of the Sources card */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Any additional props applied to the title of the Sources card  */
+    titleProps?: ButtonProps;
   }[];
   /** Label for the English word "source" */
   sourceWord?: string;
@@ -57,7 +67,7 @@ export interface SourcesCardProps extends CardProps {
   showLessWords?: string;
 }
 
-const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
+const SourcesCard: FunctionComponent<SourcesCardProps> = ({
   className,
   isDisabled,
   paginationAriaLabel = 'Pagination',
@@ -74,14 +84,14 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
   isCompact,
   ...props
 }: SourcesCardProps) => {
-  const [page, setPage] = React.useState(1);
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [page, setPage] = useState(1);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+  const onToggle = (_event: ReactMouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
-  const handleNewPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
+  const handleNewPage = (_evt: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
     setPage(newPage);
     onSetPage && onSetPage(_evt, newPage);
   };
@@ -107,6 +117,8 @@ const SourcesCard: React.FunctionComponent<SourcesCardProps> = ({
             isInline
             rel={sources[page - 1].isExternal ? 'noreferrer' : undefined}
             target={sources[page - 1].isExternal ? '_blank' : undefined}
+            onClick={sources[page - 1].onClick ?? undefined}
+            {...sources[page - 1].titleProps}
           >
             {renderTitle(sources[page - 1].title)}
           </Button>

package/src/TermsOfUse/TermsOfUse.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';

package/src/TermsOfUse/TermsOfUse.tsx

@@ -1,7 +1,8 @@
 // ============================================================================
 // Terms of Use Modal - Chatbot Modal Extension
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent as ReactMouseEvent, Ref } from 'react';
+import { forwardRef } from 'react';
 import { Button, Content, ModalBody, ModalFooter, ModalHeader, ModalProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot';
 import ChatbotModal from '../ChatbotModal/ChatbotModal';
@@ -37,7 +38,7 @@ export interface TermsOfUseProps extends ModalProps {
   isCompact?: boolean;
 }
 
-export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
+export const TermsOfUseBase: FunctionComponent<TermsOfUseProps> = ({
   handleModalToggle,
   isModalOpen,
   onPrimaryAction,
@@ -55,12 +56,12 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
   isCompact,
   ...props
 }: TermsOfUseProps) => {
-  const handlePrimaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handlePrimaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onPrimaryAction && onPrimaryAction(_event);
   };
 
-  const handleSecondaryAction = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleSecondaryAction = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     onSecondaryAction(_event);
   };
 
@@ -115,7 +116,7 @@ export const TermsOfUseBase: React.FunctionComponent<TermsOfUseProps> = ({
   return modal;
 };
 
-const TermsOfUse = React.forwardRef((props: TermsOfUseProps, ref: React.Ref<HTMLDivElement>) => (
+const TermsOfUse = forwardRef((props: TermsOfUseProps, ref: Ref<HTMLDivElement>) => (
   <TermsOfUseBase innerRef={ref} {...props} />
 ));
 

package/src/index.ts

@@ -63,6 +63,9 @@ export * from './MessageBar';
 export { default as MessageBox } from './MessageBox';
 export * from './MessageBox';
 
+export { default as MessageDivider } from './MessageDivider';
+export * from './MessageDivider';
+
 export { default as PreviewAttachment } from './PreviewAttachment';
 export * from './PreviewAttachment';