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

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';
 
@@ -24,9 +24,19 @@ export interface AttachmentEditProps {
   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,
@@ -35,14 +45,19 @@ export const AttachmentEdit: React.FunctionComponent<AttachmentEditProps> = ({
   onSave,
   title = 'Edit attachment',
   displayMode = ChatbotDisplayMode.default,
-  isCompact
+  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);
   };
@@ -55,11 +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

@@ -9,7 +9,7 @@
   flex-direction: column;
   width: 30rem;
   height: 70vh;
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   border-radius: var(--pf-t--global--border--radius--medium);
   box-shadow: var(--pf-t--global--box-shadow--lg);
   font-size: var(--pf-t--global--font--size--md);

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';
 

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 {
@@ -29,7 +31,7 @@ export enum ChatbotDisplayMode {
   drawer = 'drawer'
 }
 
-const ChatbotBase: React.FunctionComponent<ChatbotProps> = ({
+const ChatbotBase: FunctionComponent<ChatbotProps> = ({
   children,
   displayMode = ChatbotDisplayMode.default,
   isVisible = true,
@@ -69,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.scss

@@ -3,7 +3,7 @@
 // ============================================================================
 .pf-chatbot__content {
   position: relative;
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   overflow-y: auto;
   overflow: hidden; // needed in Red Hat Developer Hub workspace
   flex: 1; // needed in Composer AI

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,10 +9,22 @@
   // Drawer input
   // ----------------------------------------------------------------------------
   .pf-chatbot__input {
+  }
+  // Drawer title
+  // ----------------------------------------------------------------------------
+  .pf-chatbot__title-container {
     padding-inline-start: var(--pf-t--global--spacer--lg);
     padding-inline-end: var(--pf-t--global--spacer--lg);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--pf-t--global--spacer--sm);
+  }
+  // Drawer title icon
+  // ----------------------------------------------------------------------------
+  .pf-chatbot__title-icon {
+    padding-inline-end: var(--pf-t--global--spacer--md);
+    padding-inline-start: var(--pf-t--global--spacer--sm);
   }
-
   // Drawer menu
   // ----------------------------------------------------------------------------
   .pf-v6-c-menu {
@@ -75,7 +87,7 @@
     --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
     --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--lg);
     --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
-    --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--lg);
+    --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
     overflow-x: hidden;
     overflow-y: hidden;
   }

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 = {
@@ -104,6 +104,23 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(screen.getByTestId('chatbot-nav-drawer-actions')).toHaveClass('pf-v6-c-drawer__actions--reversed');
   });
 
+  it('should disable new chat button', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder
+        conversations={initialConversations}
+        newChatButtonProps={{ isDisabled: true }}
+        onNewChat={jest.fn()}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: 'New chat' })).toBeDisabled();
+  });
+
   it('should not apply the reversed class when reverseButtonOrder is false', () => {
     render(
       <ChatbotConversationHistoryNav
@@ -433,4 +450,45 @@ describe('ChatbotConversationHistoryNav', () => {
     );
     expect(screen.getByTestId('drawer')).toHaveClass('pf-m-compact');
   });
+
+  it('should display the default title', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    expect(screen.getByText('Chat history')).toBeInTheDocument();
+  });
+
+  it('should display the custom title', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        title="PatternFly history"
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    expect(screen.getByText('PatternFly history')).toBeInTheDocument();
+  });
+
+  it('should display the clock icon', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    const iconElement = container.querySelector('.pf-chatbot__title-icon');
+    expect(iconElement).toBeInTheDocument();
+  });
 });

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 {
@@ -30,10 +32,13 @@ import {
   DrawerActionsProps,
   DrawerCloseButtonProps,
   DrawerPanelBodyProps,
-  SkeletonProps
+  SkeletonProps,
+  Title,
+  Icon,
+  ButtonProps
 } from '@patternfly/react-core';
 
-import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
+import { OutlinedClockIcon, OutlinedCommentAltIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
@@ -72,6 +77,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
   /** Items shown in conversation history */
   conversations: Conversation[] | { [key: string]: Conversation[] };
+  /** Additional button props for new chat button. */
+  newChatButtonProps?: ButtonProps;
   /** Text shown in blue button */
   newChatButtonText?: string;
   /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -118,9 +125,11 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   noResultsState?: HistoryEmptyStateProps;
   /** Sets drawer to compact styling. */
   isCompact?: boolean;
+  /** Display title  */
+  title?: string;
 }
 
-export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
+export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
   onDrawerToggle,
   isDrawerOpen,
   setIsDrawerOpen,
@@ -130,6 +139,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
+  newChatButtonProps,
   searchInputPlaceholder = 'Search previous conversations...',
   searchInputAriaLabel = 'Filter menu items',
   handleTextInputChange,
@@ -150,9 +160,10 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   emptyState,
   noResultsState,
   isCompact,
+  title = 'Chat history',
   ...props
 }: ChatbotConversationHistoryNavProps) => {
-  const drawerRef = React.useRef<HTMLDivElement>(null);
+  const drawerRef = useRef<HTMLDivElement>(null);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();
@@ -190,7 +201,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>
       );
@@ -202,7 +213,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>
@@ -236,15 +247,6 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
 
   const renderDrawerContent = () => (
     <>
-      {handleTextInputChange && (
-        <div className="pf-chatbot__input">
-          <SearchInput
-            aria-label={searchInputAriaLabel}
-            onChange={(_event, value) => handleTextInputChange(value)}
-            placeholder={searchInputPlaceholder}
-          />
-        </div>
-      )}
       <DrawerPanelBody {...drawerPanelBodyProps}>{renderMenuContent()}</DrawerPanelBody>
     </>
   );
@@ -260,12 +262,29 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
           >
             <DrawerCloseButton onClick={onDrawerToggle} {...drawerCloseButtonProps} />
             {onNewChat && (
-              <Button size={isCompact ? 'sm' : undefined} onClick={onNewChat}>
+              <Button size={isCompact ? 'sm' : undefined} onClick={onNewChat} {...newChatButtonProps}>
                 {newChatButtonText}
               </Button>
             )}
           </DrawerActions>
         </DrawerHead>
+        <div className="pf-chatbot__title-container">
+          <Title headingLevel="h3">
+            <Icon size="lg" className="pf-chatbot__title-icon">
+              <OutlinedClockIcon />
+            </Icon>
+            {title}
+          </Title>
+          {!isLoading && handleTextInputChange && (
+            <div className="pf-chatbot__input">
+              <SearchInput
+                aria-label={searchInputAriaLabel}
+                onChange={(_event, value) => handleTextInputChange(value)}
+                placeholder={searchInputPlaceholder}
+              />
+            </div>
+          )}
+        </div>
         {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
       </>
     );
@@ -283,7 +302,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') {

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

@@ -6,7 +6,7 @@
 // ============================================================================
 .pf-chatbot__footer {
   --pf-chatbot__footer--RowGap: var(--pf-t--global--spacer--md);
-  background-color: var(--pf-t--chatbot--background);
+  background-color: var(--pf-t--global--background--color--secondary--default);
   display: flex;
   flex-direction: column;
   row-gap: var(--pf-chatbot__footer--RowGap);

package/src/ChatbotFooter/ChatbotFooter.test.tsx

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

package/src/ChatbotFooter/ChatbotFooter.tsx

@@ -8,11 +8,11 @@
 // - 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 */
@@ -20,7 +20,7 @@ export interface ChatbotFooterProps extends React.HTMLProps<HTMLDivElement> {
   isCompact?: boolean;
 }
 
-export const ChatbotFooter: React.FunctionComponent<ChatbotFooterProps> = ({
+export const ChatbotFooter: FunctionComponent<ChatbotFooterProps> = ({
   children,
   className,
   isCompact,

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';