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

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -21,12 +21,23 @@ import {
   MenuGroup,
   MenuItem,
   MenuContent,
-  MenuItemProps
+  MenuItemProps,
+  MenuProps,
+  DrawerPanelContentProps,
+  DrawerContentProps,
+  DrawerContentBodyProps,
+  DrawerHeadProps,
+  DrawerActionsProps,
+  DrawerCloseButtonProps,
+  DrawerPanelBodyProps,
+  SkeletonProps
 } from '@patternfly/react-core';
 
 import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
+import LoadingState from './LoadingState';
+import HistoryEmptyState, { HistoryEmptyStateProps } from './EmptyState';
 
 export interface Conversation {
   /** Conversation id */
@@ -37,11 +48,11 @@ export interface Conversation {
   noIcon?: boolean;
   /** Conversation */
   text: string;
-  /** Dropdown items rendered in conversation options dropdown */
+  /** Dropdown items rendered in conversation settings dropdown */
   menuItems?: React.ReactNode;
-  /** Optional classname applied to conversation options dropdown */
+  /** Optional classname applied to conversation settings dropdown */
   menuClassName?: string;
-  /** Tooltip content and aria-label applied to conversation options dropdown */
+  /** Tooltip content and aria-label applied to conversation settings dropdown */
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
@@ -79,6 +90,28 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   reverseButtonOrder?: boolean;
   /** Custom test id for the drawer actions */
   drawerActionsTestId?: string;
+  /** Additional props applied to menu  */
+  menuProps?: MenuProps;
+  /** Additional props applied to panel */
+  drawerPanelContentProps?: DrawerPanelContentProps;
+  /** Additional props applied to drawer content */
+  drawerContentProps?: Omit<DrawerContentProps, 'panelContent'>;
+  /** Additional props applied to drawer content body */
+  drawerContentBodyProps?: DrawerContentBodyProps;
+  /** Additional props applied to drawer head */
+  drawerHeadProps?: DrawerHeadProps;
+  /** Additional props applied to drawer actions */
+  drawerActionsProps?: DrawerActionsProps;
+  /** Additional props applied to drawer close button */
+  drawerCloseButtonProps?: DrawerCloseButtonProps;
+  /** Additional props appleid to drawer panel body */
+  drawerPanelBodyProps?: DrawerPanelBodyProps;
+  /** Whether to show drawer loading state */
+  isLoading?: boolean;
+  /** Additional props for loading state */
+  loadingState?: SkeletonProps;
+  /** Content to show in error state. Error state will appear once content is passed in. */
+  errorState?: HistoryEmptyStateProps;
 }
 
 export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -91,12 +124,23 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
-  searchInputPlaceholder = 'Search...',
+  searchInputPlaceholder = 'Search previous conversations...',
   searchInputAriaLabel = 'Filter menu items',
   handleTextInputChange,
   displayMode,
   reverseButtonOrder = false,
   drawerActionsTestId = 'chatbot-nav-drawer-actions',
+  menuProps,
+  drawerPanelContentProps,
+  drawerContentProps,
+  drawerContentBodyProps,
+  drawerHeadProps,
+  drawerActionsProps,
+  drawerCloseButtonProps,
+  drawerPanelBodyProps,
+  isLoading,
+  loadingState,
+  errorState,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = React.useRef<HTMLDivElement>(null);
@@ -162,23 +206,19 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   // Menu Content
   // - Consumers should pass an array to <Chatbot> of the list of conversations
   // - Groups could be optional, but items need to be ordered by date
-  const menuContent = (
-    <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId}>
-      <MenuContent>{buildMenu()}</MenuContent>
-    </Menu>
-  );
+  const renderMenuContent = () => {
+    if (errorState) {
+      return <HistoryEmptyState {...errorState} />;
+    }
+    return (
+      <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
+        <MenuContent>{buildMenu()}</MenuContent>
+      </Menu>
+    );
+  };
 
-  const panelContent = (
-    <DrawerPanelContent focusTrap={{ enabled: true }} minSize="384px" maxSize="384px">
-      <DrawerHead>
-        <DrawerActions
-          data-testid={drawerActionsTestId}
-          className={reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : ''}
-        >
-          <DrawerCloseButton onClick={onDrawerToggle} />
-          {onNewChat && <Button onClick={onNewChat}>{newChatButtonText}</Button>}
-        </DrawerActions>
-      </DrawerHead>
+  const renderDrawerContent = () => (
+    <>
       {handleTextInputChange && (
         <div className="pf-chatbot__input">
           <SearchInput
@@ -188,10 +228,38 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
           />
         </div>
       )}
-      <DrawerPanelBody>{menuContent}</DrawerPanelBody>
-    </DrawerPanelContent>
+      <DrawerPanelBody {...drawerPanelBodyProps}>{renderMenuContent()}</DrawerPanelBody>
+    </>
   );
 
+  const renderPanelContent = () => {
+    const drawer = (
+      <>
+        <DrawerHead {...drawerHeadProps}>
+          <DrawerActions
+            data-testid={drawerActionsTestId}
+            className={reverseButtonOrder ? 'pf-v6-c-drawer__actions--reversed' : ''}
+            {...drawerActionsProps}
+          >
+            <DrawerCloseButton onClick={onDrawerToggle} {...drawerCloseButtonProps} />
+            {onNewChat && <Button onClick={onNewChat}>{newChatButtonText}</Button>}
+          </DrawerActions>
+        </DrawerHead>
+        {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
+      </>
+    );
+    return (
+      <DrawerPanelContent
+        aria-live="polite"
+        focusTrap={{ enabled: true }}
+        defaultSize="384px"
+        {...drawerPanelContentProps}
+      >
+        {drawer}
+      </DrawerPanelContent>
+    );
+  };
+
   // An onKeyDown property must be passed to the Drawer component to handle closing
   // the drawer panel and deactivating the focus trap via the Escape key.
   const onEscape = (event: React.KeyboardEvent) => {
@@ -213,8 +281,8 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
       isInline={displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded}
       {...props}
     >
-      <DrawerContent panelContent={panelContent}>
-        <DrawerContentBody>
+      <DrawerContent panelContent={renderPanelContent()} {...drawerContentProps}>
+        <DrawerContentBody {...drawerContentBodyProps}>
           <>
             <div
               className={`${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} `}

package/src/ChatbotConversationHistoryNav/EmptyState.tsx

@@ -0,0 +1,44 @@
+import {
+  Button,
+  EmptyState,
+  EmptyStateActions,
+  EmptyStateBody,
+  EmptyStateFooter,
+  EmptyStateProps
+} from '@patternfly/react-core';
+import React from 'react';
+
+export interface HistoryEmptyStateProps extends EmptyStateProps {
+  onClick?: () => void;
+  bodyText?: string | React.ReactNode;
+  buttonText?: string;
+  buttonIcon?: React.ReactNode;
+  hasButton?: boolean;
+}
+
+export const HistoryEmptyState: React.FunctionComponent<HistoryEmptyStateProps> = ({
+  bodyText,
+  buttonIcon,
+  buttonText,
+  status,
+  titleText,
+  headingLevel,
+  onClick,
+  hasButton = false,
+  ...props
+}: HistoryEmptyStateProps) => (
+  <EmptyState status={status} titleText={titleText} headingLevel={headingLevel} {...props}>
+    <EmptyStateBody>{bodyText}</EmptyStateBody>
+    {hasButton && (
+      <EmptyStateFooter>
+        <EmptyStateActions>
+          <Button icon={buttonIcon} variant="secondary" onClick={onClick}>
+            {buttonText}
+          </Button>
+        </EmptyStateActions>
+      </EmptyStateFooter>
+    )}
+  </EmptyState>
+);
+
+export default HistoryEmptyState;

package/src/ChatbotConversationHistoryNav/LoadingState.tsx

@@ -0,0 +1,38 @@
+import { Skeleton, SkeletonProps } from '@patternfly/react-core';
+import React from 'react';
+
+export const LoadingState: React.FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
+  <div className="pf-chatbot__history-loading">
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton
+        screenreaderText={screenreaderText ?? 'Loading chatbot conversation history'}
+        fontSize="3xl"
+        {...rest}
+      />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+    <div className="pf-chatbot__history-loading-block">
+      <Skeleton fontSize="sm" width="70%" {...rest} />
+      <Skeleton fontSize="3xl" {...rest} />
+    </div>
+  </div>
+);
+
+export default LoadingState;

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -44,11 +44,6 @@
 // Chatbot Display Mode - Docked
 // ============================================================================
 .pf-chatbot--docked {
-  .pf-chatbot__footer {
-    .pf-v6-c-divider {
-      display: none;
-    }
-  }
   .pf-chatbot__footer-container {
     padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
   }

package/src/ChatbotFooter/ChatbotFooter.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotFooter from './ChatbotFooter';
+
+describe('ChatbotFooter', () => {
+  it('should render ChatbotFooter with children', () => {
+    render(<ChatbotFooter>Chatbot Content</ChatbotFooter>);
+    expect(screen.getByText('Chatbot Content')).toBeTruthy();
+  });
+
+  it('should render ChatbotFooter with custom classname', () => {
+    const { container } = render(<ChatbotFooter className="custom-class">Chatbot Content</ChatbotFooter>);
+    expect(container.querySelector('.custom-class')).toBeTruthy();
+  });
+});

package/src/ChatbotFooter/ChatbotFooternote.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import ChatbotFootnote from './ChatbotFootnote';
+
+describe('ChatbotFooternote', () => {
+  const onClick = jest.fn();
+  const popoverProps = {
+    title: 'Verify accuracy',
+    description: 'description',
+    bannerImage: {
+      src: 'src',
+      alt: 'alt'
+    },
+    cta: {
+      label: 'Got it',
+      onClick
+    },
+    link: {
+      label: 'label',
+      url: 'url'
+    }
+  };
+
+  it('should render ChatbotFooternote', () => {
+    render(<ChatbotFootnote label="Chatbot footer" />);
+    expect(screen.getByText('Chatbot footer')).toBeTruthy();
+  });
+
+  it('should render ChatbotFooternote with popover', async () => {
+    render(<ChatbotFootnote label="Chatbot footer" popover={popoverProps} />);
+
+    // click on the footer button
+    act(() => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    await waitFor(() => {
+      // Check if the popover is visible and click on the cta button
+      screen.getByLabelText('More information');
+      screen.getByText('Verify accuracy');
+      fireEvent.click(screen.getByRole('button', { name: 'Got it' }));
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+  it('should call onClick handler when popover cta button is clicked', async () => {
+    render(<ChatbotFootnote label="Chatbot footer" popover={popoverProps} />);
+
+    // click on the footer button
+    act(() => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    await waitFor(() => {
+      // Check if the popover is visible and click on the cta button
+      screen.getByLabelText('More information');
+      screen.getByText('Verify accuracy');
+      fireEvent.click(screen.getByRole('button', { name: 'Got it' }));
+      expect(onClick).toHaveBeenCalled();
+    });
+  });
+  it('should close the popover when escape is pressed', async () => {
+    render(<ChatbotFootnote label="Chatbot footer" popover={popoverProps} />);
+
+    // click on the footer button
+    act(() => {
+      fireEvent.click(screen.getByRole('button'));
+    });
+
+    await waitFor(() => {
+      // Check if the popover is visible and click on the cta button
+      screen.getByLabelText('More information');
+      screen.getByText('Verify accuracy');
+    });
+
+    act(() => {
+      // trigger escape to close the popover
+      fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Verify accuracy')).toBeFalsy();
+    });
+  });
+});

package/src/ChatbotFooter/ChatbotFootnote.tsx

@@ -32,7 +32,7 @@ export interface ChatbotFootnotePopover {
   bannerImage?: ChatbotFootnotePopoverBannerImage;
   /** Optional CTA button that can be used to trigger an action and close the popover */
   cta?: ChatbotFootnotePopoverCTA;
-  /** Optional link that can be used to show and external link like **Learn More** */
+  /** Optional link that can be used to show an external link like **View AI policy** */
   link?: ChatbotFootnotePopoverLink;
   /** Props for PF Popover */
   popoverProps?: PopoverProps;
@@ -87,7 +87,7 @@ export const ChatbotFootnote: React.FunctionComponent<ChatbotFootnoteProps> = ({
             popover.cta?.onClick();
           }}
         >
-          {popover.cta?.label || 'Got it'}
+          {popover.cta?.label || 'Dismiss'}
         </Button>
       )}
       {popover?.link && (

package/src/ChatbotHeader/ChatbotHeader.scss

@@ -76,9 +76,6 @@
   .pf-chatbot__header {
     background-color: var(--pf-t--chatbot--background);
   }
-  .pf-chatbot__header__divider {
-    display: none;
-  }
 }
 
 // ============================================================================
@@ -95,7 +92,7 @@
   .pf-v6-c-button__icon,
   .pf-v6-c-menu-toggle__icon,
   .pf-v6-c-icon__content {
-    color: var(--pf-t--chatbot--icon--fill);
+    color: var(--pf-t--global--icon--color--subtle);
   }
 
   .pf-v6-c-button__icon,
@@ -111,7 +108,7 @@
     .pf-v6-c-button__icon,
     .pf-v6-c-menu-toggle__icon,
     .pf-v6-c-icon__content {
-      color: var(--pf-t--chatbot--icon--fill--hover);
+      color: var(--pf-t--global--icon--color--regular);
     }
   }
 }

package/src/ChatbotHeader/ChatbotHeader.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeader from './ChatbotHeader';
+
+describe('ChatbotHeader', () => {
+  it('should render ChatbotHeader with children', () => {
+    render(<ChatbotHeader>Chatbot Header</ChatbotHeader>);
+    expect(screen.getByText('Chatbot Header')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeader with custom classname', () => {
+    const { container } = render(<ChatbotHeader className="custom-header-class">Chatbot Content</ChatbotHeader>);
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderActions.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeaderActions from './ChatbotHeaderActions';
+
+describe('ChatbotHeaderActions', () => {
+  it('should render ChatbotHeaderActions with children', () => {
+    render(<ChatbotHeaderActions>Chatbot Header</ChatbotHeaderActions>);
+    expect(screen.getByText('Chatbot Header')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderActions with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderActions className="custom-header-action-class">Chatbot Content</ChatbotHeaderActions>
+    );
+    expect(container.querySelector('.custom-header-action-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderCloseButton } from './ChatbotHeaderCloseButton';
+
+describe('ChatbotHeaderCloseButton', () => {
+  it('should render ChatbotHeaderCloseButton', () => {
+    const { container } = render(
+      <ChatbotHeaderCloseButton className="custom-header-close-button" onClick={jest.fn()} />
+    );
+
+    expect(container.querySelector('.custom-header-close-button')).toBeTruthy();
+  });
+
+  it('should call onClick handler when close button is pressed', () => {
+    const onClick = jest.fn();
+    render(<ChatbotHeaderCloseButton className="custom-header-close-button" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderCloseButton.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { CloseIcon } from '@patternfly/react-icons';
+
+export interface ChatbotHeaderCloseButtonProps {
+  /** Callback function for when button is clicked */
+  onClick: () => void;
+  /** Custom classname for the header component */
+  className?: string;
+  /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+  tooltipProps?: TooltipProps;
+  /** Aria label for menu */
+  menuAriaLabel?: string;
+  /** Ref applied to menu */
+  innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
+}
+
+const ChatbotHeaderCloseButtonBase: React.FunctionComponent<ChatbotHeaderCloseButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  menuAriaLabel = 'Close',
+  innerRef,
+  tooltipContent = 'Close'
+}: ChatbotHeaderCloseButtonProps) => (
+  <div className={`pf-chatbot__menu ${className}`}>
+    <Tooltip
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <Button
+        className="pf-chatbot__button--toggle-menu"
+        variant="plain"
+        onClick={onClick}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size="xl" isInline>
+            <CloseIcon />
+          </Icon>
+        }
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderCloseButton = React.forwardRef(
+  (props: ChatbotHeaderCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderCloseButtonBase innerRef={ref} {...props} />
+  )
+);

package/src/ChatbotHeader/ChatbotHeaderMain.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChatbotHeaderMain from './ChatbotHeaderMain';
+
+describe('ChatbotHeaderMain', () => {
+  it('should render ChatbotHeaderMain with children', () => {
+    render(<ChatbotHeaderMain>Chatbot Header Main</ChatbotHeaderMain>);
+    expect(screen.getByText('Chatbot Header Main')).toBeTruthy();
+  });
+
+  it('should render ChatbotHeaderMain with custom classname', () => {
+    const { container } = render(
+      <ChatbotHeaderMain className="custom-header-class">Chatbot Content</ChatbotHeaderMain>
+    );
+    expect(container.querySelector('.custom-header-class')).toBeTruthy();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderMenu } from './ChatbotHeaderMenu';
+
+describe('ChatbotHeaderMenu', () => {
+  it('should render ChatbotHeaderMenu with custom class', () => {
+    const { container } = render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={jest.fn()} />);
+
+    expect(container.querySelector('.custom-header-menu')).toBeTruthy();
+  });
+
+  it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
+    const onMenuToggle = jest.fn();
+    render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={onMenuToggle} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+
+    expect(onMenuToggle).toHaveBeenCalled();
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -14,6 +14,8 @@ export interface ChatbotHeaderMenuProps {
   menuAriaLabel?: string;
   /** Ref applied to menu */
   innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
 }
 
 const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = ({
@@ -21,10 +23,17 @@ const ChatbotHeaderMenuBase: React.FunctionComponent<ChatbotHeaderMenuProps> = (
   onMenuToggle,
   tooltipProps,
   menuAriaLabel = 'Toggle menu',
-  innerRef
+  innerRef,
+  tooltipContent = 'Menu'
 }: ChatbotHeaderMenuProps) => (
   <div className={`pf-chatbot__menu ${className}`}>
-    <Tooltip content="Menu" position="bottom" {...tooltipProps}>
+    <Tooltip
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <Button
         className="pf-chatbot__button--toggle-menu"
         variant="plain"

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { DropdownItem } from '@patternfly/react-core';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ChatbotHeaderOptionsDropdown } from './ChatbotHeaderOptionsDropdown';
+
+describe('ChatbotHeaderOptionsDropdown', () => {
+  const dropdownItems = (
+    <>
+      <DropdownItem>Option 1</DropdownItem>
+      <DropdownItem>Option 2</DropdownItem>
+      <DropdownItem>Option 3</DropdownItem>
+    </>
+  );
+
+  it('should render ChatbotHeaderOptionsDropdown', () => {
+    render(<ChatbotHeaderOptionsDropdown>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
+
+    expect(screen.getByRole('button', { name: 'Chatbot options' })).toBeTruthy();
+  });
+
+  it('should call onselect handler when a dropdown item is clicked', async () => {
+    const onSelect = jest.fn();
+    const { container } = render(
+      <ChatbotHeaderOptionsDropdown className="custom-header-options-dropdown" onSelect={onSelect}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+
+    act(() => {
+      fireEvent.click(screen.getByRole('button', { name: 'Chatbot options' }));
+    });
+
+    await waitFor(() => {
+      expect(container.querySelector('.custom-header-options-dropdown')).toBeTruthy();
+
+      expect(screen.getByText('Option 1'));
+      expect(screen.getByText('Option 2'));
+      expect(screen.getByText('Option 3'));
+
+      fireEvent.click(screen.getByText('Option 3'));
+
+      expect(onSelect).toHaveBeenCalled();
+    });
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -33,7 +33,14 @@ export const ChatbotHeaderOptionsDropdown: React.FunctionComponent<ChatbotHeader
   const [isOptionsMenuOpen, setIsOptionsMenuOpen] = React.useState(false);
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
-    <Tooltip className="pf-chatbot__tooltip" content="Chatbot options" position="bottom" {...tooltipProps}>
+    <Tooltip
+      className="pf-chatbot__tooltip"
+      content="Chatbot options"
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
       <MenuToggle
         className="pf-chatbot__button--toggle-options"
         variant="plain"