@patternfly/chatbot 2.2.0-prerelease.8 → 2.2.0

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -4,6 +4,37 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav, { Conversation } from './ChatbotConversationHistoryNav';
+import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
+
+const ERROR = {
+  bodyText: (
+    <>
+      To try again, check your connection and reload this page. If the issue persists,{' '}
+      <a href="">contact the support team</a>.
+    </>
+  ),
+  buttonText: 'Reload',
+  buttonIcon: <Spinner size="sm" />,
+  hasButton: true,
+  titleText: 'Could not load chat history',
+  status: EmptyStateStatus.danger,
+  onClick: () => alert('Clicked Reload')
+};
+
+const ERROR_WITHOUT_BUTTON = {
+  bodyText: (
+    <>
+      To try again, check your connection and reload this page. If the issue persists,{' '}
+      <a href="">contact the support team</a>.
+    </>
+  ),
+  buttonText: 'Reload',
+  buttonIcon: <Spinner size="sm" />,
+  hasButton: false,
+  titleText: 'Could not load chat history',
+  status: EmptyStateStatus.danger,
+  onClick: () => alert('Clicked Reload')
+};
 
 describe('ChatbotConversationHistoryNav', () => {
   const onDrawerToggle = jest.fn();
@@ -11,7 +42,7 @@ describe('ChatbotConversationHistoryNav', () => {
   const initialConversations: Conversation[] = [
     {
       id: '1',
-      text: 'Lightspeed documentation'
+      text: 'ChatBot documentation'
     }
   ];
 
@@ -25,7 +56,7 @@ describe('ChatbotConversationHistoryNav', () => {
         conversations={initialConversations}
       />
     );
-    expect(screen.queryByText('Lightspeed documentation')).toBeInTheDocument();
+    expect(screen.queryByText('ChatBot documentation')).toBeInTheDocument();
   });
 
   it('should display the conversations for grouped conversations', () => {
@@ -120,7 +151,215 @@ describe('ChatbotConversationHistoryNav', () => {
     });
 
     waitFor(() => {
-      expect(screen.queryByText('Lightspeed documentation')).not.toBeInTheDocument();
+      expect(screen.queryByText('ChatBot documentation')).not.toBeInTheDocument();
     });
   });
+
+  it('should be resizable', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}
+      />
+    );
+    expect(screen.getByRole('dialog', { name: /Resize/i })).toBeTruthy();
+    expect(screen.getByRole('separator', { name: /Resize/i })).toBeTruthy();
+    expect(screen.getByRole('dialog', { name: /Resize/i })).toHaveAttribute(
+      'style',
+      '--pf-v6-c-drawer__panel--md--FlexBasis: 384px; --pf-v6-c-drawer__panel--md--FlexBasis--min: 200px;'
+    );
+  });
+
+  it('should accept drawerContentProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerContentProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerContentBodyProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerContentBodyProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerHeadProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerHeadProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerActionsProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerActionsProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerCloseButtonProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerCloseButtonProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should accept drawerPanelBodyProps', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        drawerPanelBodyProps={{ className: 'test' }}
+      />
+    );
+    const element = container.querySelector('.test');
+    expect(element).toBeInTheDocument();
+  });
+
+  it('should show loading state if triggered', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        isLoading
+      />
+    );
+    expect(screen.getByRole('dialog', { name: /Loading chatbot conversation history/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+  });
+
+  it('should pass alternative aria label to loading state', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        isLoading
+        loadingState={{ screenreaderText: 'I am a test' }}
+      />
+    );
+    expect(screen.getByRole('dialog', { name: /I am a test/i })).toBeTruthy();
+  });
+
+  it('should accept errorState', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        errorState={ERROR}
+      />
+    );
+    expect(
+      screen.getByRole('dialog', {
+        name: /Could not load chat history To try again, check your connection and reload this page. If the issue persists, contact the support team . Loading... Reload/i
+      })
+    ).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Loading... Reload/i })).toBeTruthy();
+    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
+  });
+
+  it('should accept errorState without button', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        errorState={ERROR_WITHOUT_BUTTON}
+      />
+    );
+    expect(
+      screen.getByRole('dialog', {
+        name: /Could not load chat history To try again, check your connection and reload this page. If the issue persists, contact the support team ./i
+      })
+    ).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
+    expect(screen.queryByRole('button', { name: /Loading... Reload/i })).toBeFalsy();
+    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+    expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
+  });
+
+  it('should show loading state over error state if both are supplied', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        isLoading
+        errorState={ERROR}
+      />
+    );
+    expect(screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
+  });
 });

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,11 +281,11 @@ 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} `}
+              className={`${isDrawerOpen && (displayMode === ChatbotDisplayMode.default || displayMode === ChatbotDisplayMode.docked || displayMode === ChatbotDisplayMode.drawer) ? 'pf-v6-c-backdrop pf-chatbot__drawer-backdrop' : undefined} `}
             ></div>
             {drawerContent}
           </>

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,15 @@
 // 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);
   }
+}
+
+// ============================================================================
+// Chatbot Display Mode - Drawer
+// ============================================================================
+.pf-chatbot--drawer {
   .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 && (