@patternfly/chatbot 6.3.0-prerelease.2 → 6.3.0-prerelease.20

package/src/AttachMenu/AttachMenu.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Attachment Menu
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 // Import PatternFly components
 import {
@@ -41,7 +41,7 @@ export interface AttachMenuProps extends DropdownProps {
   toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
 }
 
-export const AttachMenu: React.FunctionComponent<AttachMenuProps> = ({
+export const AttachMenu: FunctionComponent<AttachMenuProps> = ({
   className,
   filteredItems,
   handleTextInputChange,

package/src/AttachmentEdit/AttachmentEdit.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import AttachmentEdit, { AttachmentEditProps } from './AttachmentEdit';
 
 describe('AttachmentEdit', () => {
@@ -52,4 +52,48 @@ describe('AttachmentEdit', () => {
     fireEvent.click(screen.getByText('Cancel'));
     expect(onCancelHandler).toHaveBeenCalled();
   });
+
+  it('should render custom button text for footer actions buttons', () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+      />
+    );
+
+    expect(screen.getByText('Save')).toBeInTheDocument();
+    expect(screen.getByText('Close')).toBeInTheDocument();
+  });
+
+  it('should render AttachmentEdit with custom classNames', async () => {
+    render(
+      <AttachmentEdit
+        code="Hello world"
+        fileName="greetings.txt"
+        isModalOpen={true}
+        onCancel={jest.fn()}
+        onSave={jest.fn()}
+        handleModalToggle={jest.fn()}
+        primaryActionButtonText="Save"
+        secondaryActionButtonText="Close"
+        modalHeaderClassName="custom-header-class"
+        modalBodyClassName="custom-body-class"
+        modalFooterClassName="custom-footer-class"
+      ></AttachmentEdit>
+    );
+
+    const modal = screen.getByRole('dialog');
+    const modalHeader = within(modal).getByRole('banner');
+    expect(modalHeader).toHaveClass('custom-header-class');
+    const modalBody = modal.querySelector('#code-modal-body');
+    expect(modalBody).toHaveClass('custom-body-class');
+    const modalfooter = within(modal).getByRole('contentinfo');
+    expect(modalfooter).toHaveClass('custom-footer-class');
+  });
 });

package/src/AttachmentEdit/AttachmentEdit.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Attachment Edit - Chatbot Code Snippet Editor
 // ============================================================================
-import React from 'react';
+import type { FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
 import CodeModal from '../CodeModal';
 import { ChatbotDisplayMode } from '../Chatbot';
 
@@ -22,9 +22,21 @@ export interface AttachmentEditProps {
   title?: string;
   /** Display mode for the Chatbot parent; this influences the styles applied */
   displayMode?: ChatbotDisplayMode;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+  /** Primary action button text */
+  primaryActionButtonText?: string;
+  /** Secondary action button text */
+  secondaryActionButtonText?: string;
+  /** Class applied to modal header */
+  modalHeaderClassName?: string;
+  /** Class applied to modal body */
+  modalBodyClassName?: string;
+  /** Class applied to modal footer */
+  modalFooterClassName?: string;
 }
 
-export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
+export const AttachmentEdit: FunctionComponent<AttachmentEditProps> = ({
   fileName,
   code,
   handleModalToggle,
@@ -32,14 +44,20 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
   onCancel,
   onSave,
   title = 'Edit attachment',
-  displayMode = ChatbotDisplayMode.default
+  displayMode = ChatbotDisplayMode.default,
+  isCompact,
+  modalHeaderClassName,
+  modalBodyClassName,
+  modalFooterClassName,
+  primaryActionButtonText = 'Save',
+  secondaryActionButtonText = 'Cancel'
 }: AttachmentEditProps) => {
-  const handleSave = (_event: React.MouseEvent | MouseEvent | KeyboardEvent, code) => {
+  const handleSave = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent, code) => {
     handleModalToggle(_event);
     onSave(_event, code);
   };
 
-  const handleCancel = (_event: React.MouseEvent | MouseEvent | KeyboardEvent) => {
+  const handleCancel = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
     handleModalToggle(_event);
     onCancel(_event);
   };
@@ -52,10 +70,14 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
       isModalOpen={isModalOpen}
       onPrimaryAction={handleSave}
       onSecondaryAction={handleCancel}
-      primaryActionBtn="Save"
-      secondaryActionBtn="Cancel"
+      primaryActionBtn={primaryActionButtonText}
+      secondaryActionBtn={secondaryActionButtonText}
       title={title}
       displayMode={displayMode}
+      isCompact={isCompact}
+      modalHeaderClassName={modalHeaderClassName}
+      modalBodyClassName={modalBodyClassName}
+      modalFooterClassName={modalFooterClassName}
     />
   );
 };

package/src/Chatbot/Chatbot.scss

@@ -125,3 +125,10 @@
     border-radius: var(--pf-t--global--border--radius--sharp);
   }
 }
+
+// ============================================================================
+// Information density styles
+// ============================================================================
+.pf-chatbot.pf-m-compact {
+  font-size: var(--pf-t--global--font--size--sm);
+}

package/src/Chatbot/Chatbot.test.tsx

@@ -1,5 +1,4 @@
 import '@testing-library/jest-dom';
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Chatbot from './Chatbot';
 
@@ -28,4 +27,13 @@ describe('Chatbot', () => {
     render(<Chatbot isVisible={false}>Chatbot Content</Chatbot>);
     expect(screen.queryByLabelText('Chatbot')).toBeFalsy();
   });
+
+  it('should handle isCompact', () => {
+    render(
+      <Chatbot data-testid="chatbot" isVisible={true} isCompact>
+        Chatbot Content
+      </Chatbot>
+    );
+    expect(screen.getByTestId('chatbot')).toHaveClass('pf-m-compact');
+  });
 });

package/src/Chatbot/Chatbot.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot
 // ============================================================================
-import React from 'react';
+import type { Ref, FunctionComponent } from 'react';
+
+import { forwardRef } from 'react';
 import { motion } from 'framer-motion';
 
 export interface ChatbotProps {
@@ -17,6 +19,8 @@ export interface ChatbotProps {
   innerRef?: React.Ref<HTMLDivElement>;
   /** Custom aria label applied to focusable container */
   ariaLabel?: string;
+  /** Density of information within the ChatBot */
+  isCompact?: boolean;
 }
 
 export enum ChatbotDisplayMode {
@@ -27,13 +31,14 @@ export enum ChatbotDisplayMode {
   drawer = 'drawer'
 }
 
-const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
+const ChatbotBase: FunctionComponent<ChatbotProps> = ({
   children,
   displayMode = ChatbotDisplayMode.default,
   isVisible = true,
   className,
   innerRef,
   ariaLabel,
+  isCompact,
   ...props
 }: ChatbotProps) => {
   // Configure animations
@@ -44,7 +49,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
 
   return (
     <motion.div
-      className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''} ${className ?? ''}`}
+      className={`pf-chatbot pf-chatbot--${displayMode} ${!isVisible ? 'pf-chatbot--hidden' : ''}  ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`}
       variants={motionChatbot}
       initial="hidden"
       animate={isVisible ? 'visible' : 'hidden'}
@@ -66,7 +71,7 @@ const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
   );
 };
 
-const Chatbot = React.forwardRef((props: ChatbotProps, ref: React.Ref<HTMLDivElement>) => (
+const Chatbot = forwardRef((props: ChatbotProps, ref: Ref<HTMLDivElement>) => (
   <ChatbotBase innerRef={ref} {...props} />
 ));
 

package/src/ChatbotAlert/ChatbotAlert.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import ChatbotAlert from './ChatbotAlert';
 

package/src/ChatbotAlert/ChatbotAlert.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { FunctionComponent } from 'react';
 import { Alert, AlertActionCloseButton, AlertProps } from '@patternfly/react-core';
 
 export interface ChatbotAlert extends AlertProps {
@@ -6,7 +6,7 @@ export interface ChatbotAlert extends AlertProps {
   onClose?: () => void;
 }
 
-export const ChatbotAlert: React.FunctionComponent<ChatbotAlert> = ({
+export const ChatbotAlert: FunctionComponent<ChatbotAlert> = ({
   variant = 'info',
   title,
   children = '',

package/src/ChatbotContent/ChatbotContent.test.tsx

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

package/src/ChatbotContent/ChatbotContent.tsx

@@ -1,16 +1,16 @@
 // ============================================================================
 // Chatbot Main
 // ============================================================================
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
 
-export interface ChatbotContentProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotContentProps extends HTMLProps<HTMLDivElement> {
   /** Content to be displayed in the chatbot */
   children: React.ReactNode;
   /** Custom classname for the ChatbotContent component */
   className?: string;
 }
 
-export const ChatbotContent: React.FunctionComponent<ChatbotContentProps> = ({
+export const ChatbotContent: FunctionComponent<ChatbotContentProps> = ({
   children,
   className,
   ...props

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '@testing-library/jest-dom';
 import { DropdownItem } from '@patternfly/react-core';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
-import React from 'react';
+import type { MouseEvent, FunctionComponent, Ref } from 'react';
+
+import { useState } from 'react';
 
 // Import PatternFly components
 import { MenuToggleElement, Tooltip, MenuToggle, Dropdown, DropdownProps } from '@patternfly/react-core';
@@ -19,15 +21,15 @@ export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownPr
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
 }
 
-export const ChatbotConversationHistoryDropdown: React.FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
+export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConversationHistoryDropdownProps> = ({
   menuItems,
   menuClassName,
   onSelect,
   label
 }: ChatbotConversationHistoryDropdownProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <Tooltip
       className="pf-chatbot__tooltip"
       content={label ?? 'Conversation options'}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -9,8 +9,8 @@
   // Drawer input
   // ----------------------------------------------------------------------------
   .pf-chatbot__input {
-    padding-inline-start: var(--pf-t--global--spacer--xl);
-    padding-inline-end: var(--pf-t--global--spacer--xl);
+    padding-inline-start: var(--pf-t--global--spacer--lg);
+    padding-inline-end: var(--pf-t--global--spacer--lg);
   }
 
   // Drawer menu
@@ -118,7 +118,6 @@
       border-radius: var(--pf-t--global--border--radius--pill);
       justify-content: center;
       align-items: center;
-      border-radius: var(--pf-t--global--border--radius--small);
     }
   }
 
@@ -205,3 +204,39 @@
   gap: var(--pf-t--global--spacer--sm);
   align-self: stretch;
 }
+
+.pf-chatbot__history.pf-m-compact {
+  .pf-v6-c-drawer__main {
+    .pf-v6-c-drawer__panel {
+      --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+      --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+      --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
+      --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+      --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--md);
+    }
+
+    .pf-v6-c-drawer__body {
+      --pf-v6-c-drawer__panel__body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+      --pf-v6-c-drawer__panel__body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+    }
+  }
+
+  .pf-chatbot__menu-item {
+    font-size: var(--pf-t--global--font--size--body--md);
+  }
+
+  .pf-v6-c-drawer__head {
+    --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+    --pf-v6-c-drawer__head--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  }
+  .pf-v6-c-drawer__close {
+    .pf-v6-c-button {
+      width: 2rem;
+      height: 2rem;
+      --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+      --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--xs);
+      --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+      --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+    }
+  }
+}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
@@ -6,6 +5,7 @@ import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav, { Conversation } from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
 import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
+import { ComponentType } from 'react';
 
 const ERROR = {
   bodyText: (
@@ -25,13 +25,13 @@ const ERROR = {
 const NO_RESULTS = {
   bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
   titleText: 'No results found',
-  icon: SearchIcon
+  icon: SearchIcon as ComponentType<any>
 };
 
 const EMPTY_STATE = {
   bodyText: 'Access timely assistance by starting a conversation with an AI model.',
   titleText: 'Start a new chat',
-  icon: OutlinedCommentsIcon
+  icon: OutlinedCommentsIcon as ComponentType<any>
 };
 
 const ERROR_WITHOUT_BUTTON = {
@@ -415,4 +415,22 @@ describe('ChatbotConversationHistoryNav', () => {
       })
     ).toBeTruthy();
   });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        noResultsState={NO_RESULTS}
+        isCompact
+        data-testid="drawer"
+      />
+    );
+    expect(screen.getByTestId('drawer')).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -1,7 +1,9 @@
 // ============================================================================
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
-import React from 'react';
+import type { KeyboardEvent, FunctionComponent } from 'react';
+
+import { useRef, Fragment } from 'react';
 
 // Import PatternFly components
 import {
@@ -116,9 +118,11 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   emptyState?: HistoryEmptyStateProps;
   /** Content to show in no results state. No results state will appear once content is passed in. */
   noResultsState?: HistoryEmptyStateProps;
+  /** Sets drawer to compact styling. */
+  isCompact?: boolean;
 }
 
-export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
+export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
   onDrawerToggle,
   isDrawerOpen,
   setIsDrawerOpen,
@@ -147,9 +151,10 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   errorState,
   emptyState,
   noResultsState,
+  isCompact,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
-  const drawerRef = React.useRef<HTMLDivElement>(null);
+  const drawerRef = useRef<HTMLDivElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
@@ -187,7 +192,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
       return (
         <MenuList>
           {conversations.map((conversation) => (
-            <React.Fragment key={conversation.id}>{getNavItem(conversation)}</React.Fragment>
+            <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
           ))}
         </MenuList>
       );
@@ -199,7 +204,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
             <MenuGroup className="pf-chatbot__menu-item-header" label={navGroup} key={navGroup}>
               <MenuList>
                 {conversations[navGroup].map((conversation) => (
-                  <React.Fragment key={conversation.id}>{getNavItem(conversation)}</React.Fragment>
+                  <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
                 ))}
               </MenuList>
             </MenuGroup>
@@ -256,7 +261,11 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
             {...drawerActionsProps}
           >
             <DrawerCloseButton onClick={onDrawerToggle} {...drawerCloseButtonProps} />
-            {onNewChat && <Button onClick={onNewChat}>{newChatButtonText}</Button>}
+            {onNewChat && (
+              <Button size={isCompact ? 'sm' : undefined} onClick={onNewChat}>
+                {newChatButtonText}
+              </Button>
+            )}
           </DrawerActions>
         </DrawerHead>
         {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
@@ -276,7 +285,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
 
   // 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) => {
+  const onEscape = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
       // prevents using escape key on menu buttons from closing the panel, but I'm not sure if this is allowed
       if (event.target instanceof HTMLInputElement && event.target.type !== 'button') {
@@ -287,7 +296,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
 
   return (
     <Drawer
-      className="pf-chatbot__history"
+      className={`pf-chatbot__history ${isCompact ? 'pf-m-compact' : ''}`}
       isExpanded={isDrawerOpen}
       onExpand={onExpand}
       position="start"

package/src/ChatbotConversationHistoryNav/EmptyState.tsx

@@ -6,7 +6,7 @@ import {
   EmptyStateFooter,
   EmptyStateProps
 } from '@patternfly/react-core';
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
 export interface HistoryEmptyStateProps extends EmptyStateProps {
   onClick?: () => void;
@@ -16,7 +16,7 @@ export interface HistoryEmptyStateProps extends EmptyStateProps {
   hasButton?: boolean;
 }
 
-export const HistoryEmptyState: React.FunctionComponent<HistoryEmptyStateProps> = ({
+export const HistoryEmptyState: FunctionComponent<HistoryEmptyStateProps> = ({
   bodyText,
   buttonIcon,
   buttonText,

package/src/ChatbotConversationHistoryNav/LoadingState.tsx

@@ -1,7 +1,7 @@
 import { Skeleton, SkeletonProps } from '@patternfly/react-core';
-import React from 'react';
+import type { FunctionComponent } from 'react';
 
-export const LoadingState: React.FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
+export const LoadingState: FunctionComponent<SkeletonProps> = ({ screenreaderText, ...rest }: SkeletonProps) => (
   <div className="pf-chatbot__history-loading">
     <div className="pf-chatbot__history-loading-block">
       <Skeleton

package/src/ChatbotFooter/ChatbotFooter.scss

@@ -57,3 +57,8 @@
     padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
   }
 }
+
+.pf-chatbot__footer.pf-m-compact .pf-chatbot__footer-container {
+  padding: 0 var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
+  row-gap: var(--pf-t--global--spacer--sm);
+}

package/src/ChatbotFooter/ChatbotFooter.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import ChatbotFooter from './ChatbotFooter';
+import '@testing-library/jest-dom';
 
 describe('ChatbotFooter', () => {
   it('should render ChatbotFooter with children', () => {
@@ -12,4 +12,13 @@ describe('ChatbotFooter', () => {
     const { container } = render(<ChatbotFooter className="custom-class">Chatbot Content</ChatbotFooter>);
     expect(container.querySelector('.custom-class')).toBeTruthy();
   });
+
+  it('should handle isCompact', () => {
+    render(
+      <ChatbotFooter className="custom-class" isCompact data-testid="footer">
+        Chatbot Content
+      </ChatbotFooter>
+    );
+    expect(screen.getByTestId('footer')).toHaveClass('pf-m-compact');
+  });
 });

package/src/ChatbotFooter/ChatbotFooter.tsx

@@ -8,23 +8,25 @@
 // - Footnote
 // - Footnote popover
 
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
 
 import { Divider } from '@patternfly/react-core';
 
-export interface ChatbotFooterProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotFooterProps extends HTMLProps<HTMLDivElement> {
   /** Children for the Footer that supports MessageBar and FootNote components*/
   children?: React.ReactNode;
   /** Custom classname for the Footer component */
   className?: string;
+  isCompact?: boolean;
 }
 
-export const ChatbotFooter: React.FunctionComponent<ChatbotFooterProps> = ({
+export const ChatbotFooter: FunctionComponent<ChatbotFooterProps> = ({
   children,
   className,
+  isCompact,
   ...props
 }: ChatbotFooterProps) => (
-  <div className={`pf-chatbot__footer ${className ?? ''}`} {...props}>
+  <div className={`pf-chatbot__footer ${isCompact ? 'pf-m-compact' : ''} ${className ?? ''}`} {...props}>
     <Divider />
     <div className="pf-chatbot__footer-container">{children}</div>
   </div>

package/src/ChatbotFooter/ChatbotFooternote.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import ChatbotFootnote from './ChatbotFootnote';
 

package/src/ChatbotFooter/ChatbotFootnote.tsx

@@ -2,7 +2,9 @@
 // Chatbot Footer - Footnote
 // ============================================================================
 
-import React from 'react';
+import type { HTMLProps, FunctionComponent } from 'react';
+
+import { useState } from 'react';
 
 // Import Patternfly components
 import { Button, Content, ContentVariants, Flex, PopoverProps } from '@patternfly/react-core';
@@ -14,7 +16,7 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/esm/icons/exte
 // Import Chatbot components
 import ChatbotPopover from '../ChatbotPopover/ChatbotPopover';
 
-export interface ChatbotFootnoteProps extends React.HTMLProps<HTMLDivElement> {
+export interface ChatbotFootnoteProps extends Omit<HTMLProps<HTMLDivElement>, 'popover'> {
   /** Label to show for the footnote */
   label: string;
   /** Config for the popover which opens up when footnote is clicked */
@@ -58,14 +60,14 @@ export interface ChatbotFootnotePopoverLink {
   url: string;
 }
 
-export const ChatbotFootnote: React.FunctionComponent<ChatbotFootnoteProps> = ({
+export const ChatbotFootnote: FunctionComponent<ChatbotFootnoteProps> = ({
   label,
   popover,
   className,
   ...props
 }: ChatbotFootnoteProps) => {
   // Popover visibility state
-  const [isVisible, setIsVisible] = React.useState<boolean>(false);
+  const [isVisible, setIsVisible] = useState<boolean>(false);
 
   // Define popover body content
   const popoverBodyContent = (