@patternfly/chatbot 2.2.0-prerelease.26 → 2.2.0-prerelease.28

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx

@@ -121,7 +121,7 @@ export const BasicDemo: React.FunctionComponent = () => {
             showAll && setShowAll(!showAll);
           }}
           name="basic-inline-radio"
-          label="With options dropdown"
+          label="With settings dropdown"
           id="options-dropdown"
         />
       </FormGroup>

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx

@@ -3,7 +3,7 @@ import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
 import ChatbotConversationHistoryNav, {
   Conversation
 } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
-import { Checkbox } from '@patternfly/react-core';
+import { Checkbox, EmptyStateStatus, Spinner } from '@patternfly/react-core';
 
 const initialConversations: { [key: string]: Conversation[] } = {
   Today: [{ id: '1', text: 'Red Hat products and services' }],
@@ -31,12 +31,29 @@ const initialConversations: { [key: string]: Conversation[] } = {
   ]
 };
 
+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')
+};
+
 export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(true);
   const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
   const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [hasError, setHasError] = React.useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {
@@ -74,6 +91,20 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         id="drawer-actions-visible"
         name="drawer-actions-visible"
       ></Checkbox>
+      <Checkbox
+        label="Show loading state"
+        isChecked={isLoading}
+        onChange={() => setIsLoading(!isLoading)}
+        id="drawer-is-loading"
+        name="drawer-is-loading"
+      ></Checkbox>
+      <Checkbox
+        label="Show error state"
+        isChecked={hasError}
+        onChange={() => setHasError(!hasError)}
+        id="drawer-has-error"
+        name="drawer-has-error"
+      ></Checkbox>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
         onDrawerToggle={() => setIsOpen(!isOpen)}
@@ -96,6 +127,8 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
           setConversations(newConversations);
         }}
         drawerContent={<div>Drawer content</div>}
+        isLoading={isLoading}
+        errorState={hasError ? ERROR : undefined}
       />
     </>
   );

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomeInteraction.tsx

@@ -116,7 +116,7 @@ export const ChatbotWelcomeInteractionDemo: React.FunctionComponent = () => {
         so that users of assistive devices receive sufficient context  */}
           <MessageBox announcement={announcement} position={position}>
             {messages.length === 0 && (
-              <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+              <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
             )}
             {/* This code block enables scrolling to the top of the last message.
           You can instead choose to move the div with scrollToBottomRef on it below 

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotWelcomePrompt.tsx

@@ -1,19 +1,19 @@
 import React from 'react';
 
 import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';
-import Checkbox from '@patternfly/react-core';
+import { Checkbox } from '@patternfly/react-core';
 
 export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
   const [showWelcomePrompts, setShowWelcomePrompts] = React.useState(true);
 
   const welcomePrompts = [
     {
-      title: 'Topic 1',
-      message: 'Helpful prompt for Topic 1'
+      title: 'Set up account',
+      message: 'Choose the necessary settings and preferences for your account.'
     },
     {
-      title: 'Topic 2',
-      message: 'Helpful prompt for Topic 2'
+      title: 'Troubleshoot issue',
+      message: 'Find documentation and instructions to resolve your issue.'
     }
   ];
 
@@ -29,8 +29,8 @@ export const ChatbotWelcomePromptExample: React.FunctionComponent = () => {
         id="showWelcomePrompts"
       />
       <ChatbotWelcomePrompt
-        title="Hello, Chatbot User"
-        description="How may I help you today?"
+        title="Hi, ChatBot User!"
+        description="How can I help you today?"
         {...(showWelcomePrompts && { prompts: welcomePrompts })}
       />
     </>

package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx

@@ -36,20 +36,20 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 const footnoteProps = {
   label: 'ChatBot uses AI. Check for mistakes.',
   popover: {
-    title: 'Verify accuracy',
-    description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+    title: 'Verify information',
+    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
     bannerImage: {
       src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
       alt: 'Example image for footnote popover'
     },
     cta: {
-      label: 'Got it',
+      label: 'Dismiss',
       onClick: () => {
         alert('Do something!');
       }
     },
     link: {
-      label: 'Learn more',
+      label: 'View AI policy',
       url: 'https://www.redhat.com/'
     }
   }
@@ -129,12 +129,12 @@ const initialMessages: MessageProps[] = [
 
 const welcomePrompts = [
   {
-    title: 'Topic 1',
-    message: 'Helpful prompt for Topic 1'
+    title: 'Set up account',
+    message: 'Choose the necessary settings and preferences for your account.'
   },
   {
-    title: 'Topic 2',
-    message: 'Helpful prompt for Topic 2'
+    title: 'Troubleshoot issue',
+    message: 'Find documentation and instructions to resolve your issue.'
   }
 ];
 
@@ -436,8 +436,8 @@ export const ChatbotDemo: React.FunctionComponent = () => {
                  so that users of assistive devices receive sufficient context  */}
                 <MessageBox announcement={announcement}>
                   <ChatbotWelcomePrompt
-                    title="Hello, Chatbot User"
-                    description="How may I help you today?"
+                    title="Hi, ChatBot User!"
+                    description="How can I help you today?"
                     prompts={welcomePrompts}
                   />
                   {/* This code block enables scrolling to the top of the last message.

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx

@@ -231,7 +231,7 @@ export const BasicDemo: React.FunctionComponent = () => {
                   {error}
                 </ChatbotAlert>
               )}
-              <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+              <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
               {messages.map((message) => (
                 <Message key={message.name} {...message} />
               ))}

package/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx

@@ -232,7 +232,7 @@ export const AttachmentMenuDemo: React.FunctionComponent = () => {
                     {error}
                   </ChatbotAlert>
                 )}
-                <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+                <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
                 {messages.map((message) => (
                   <Message key={message.name} {...message} />
                 ))}

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx

@@ -44,20 +44,20 @@ import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 const footnoteProps = {
   label: 'ChatBot uses AI. Check for mistakes.',
   popover: {
-    title: 'Verify accuracy',
-    description: `While ChatBot strives for accuracy, there's always a possibility of errors. It's a good practice to verify critical information from reliable sources, especially if it's crucial for decision-making or actions.`,
+    title: 'Verify information',
+    description: `While ChatBot strives for accuracy, AI is experimental and can make mistakes. We cannot guarantee that all information provided by ChatBot is up to date or without error. You should always verify responses using reliable sources, especially for crucial information and decision making.`,
     bannerImage: {
       src: 'https://cdn.dribbble.com/userupload/10651749/file/original-8a07b8e39d9e8bf002358c66fce1223e.gif',
       alt: 'Example image for footnote popover'
     },
     cta: {
-      label: 'Got it',
+      label: 'Dismiss',
       onClick: () => {
         alert('Do something!');
       }
     },
     link: {
-      label: 'Learn more',
+      label: 'View AI policy',
       url: 'https://www.redhat.com/'
     }
   }
@@ -137,12 +137,12 @@ const initialMessages: MessageProps[] = [
 
 const welcomePrompts = [
   {
-    title: 'Topic 1',
-    message: 'Helpful prompt for Topic 1'
+    title: 'Set up account',
+    message: 'Choose the necessary settings and preferences for your account.'
   },
   {
-    title: 'Topic 2',
-    message: 'Helpful prompt for Topic 2'
+    title: 'Troubleshoot issue',
+    message: 'Find documentation and instructions to resolve your issue.'
   }
 ];
 
@@ -400,8 +400,8 @@ export const EmbeddedChatbotDemo: React.FunctionComponent = () => {
                  so that users of assistive devices receive sufficient context  */}
                 <MessageBox announcement={announcement}>
                   <ChatbotWelcomePrompt
-                    title="Hello, Chatbot User"
-                    description="How may I help you today?"
+                    title="Hi, ChatBot User!"
+                    description="How can I help you today?"
                     prompts={welcomePrompts}
                   />
                   {/* This code block enables scrolling to the top of the last message.

package/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx

@@ -117,7 +117,7 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
       </ChatbotHeader>
       <ChatbotContent>
         <MessageBox ariaLabel={`Scrollable message log for ${name}`} announcement={announcement}>
-          <ChatbotWelcomePrompt title="Hello, Chatbot User" description="How may I help you today?" />
+          <ChatbotWelcomePrompt title="Hi, ChatBot User!" description="How can I help you today?" />
           {messages.map((message) => (
             <Message key={message.id} {...message} />
           ))}

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -9,11 +9,11 @@ import { MenuToggleElement, Tooltip, MenuToggle, Dropdown, DropdownProps } from
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export interface ChatbotConversationHistoryDropdownProps extends Omit<DropdownProps, 'toggle'> {
-  /** 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;

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -189,3 +189,17 @@
     }
   }
 }
+
+.pf-chatbot__history-loading {
+  display: flex;
+  padding: var(--pf-t--global--spacer--lg);
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--lg);
+}
+
+.pf-chatbot__history-loading-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--sm);
+  align-self: stretch;
+}

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();
@@ -232,4 +263,103 @@ describe('ChatbotConversationHistoryNav', () => {
     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

@@ -29,12 +29,15 @@ import {
   DrawerHeadProps,
   DrawerActionsProps,
   DrawerCloseButtonProps,
-  DrawerPanelBodyProps
+  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 */
@@ -45,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;
@@ -103,6 +106,12 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   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> = ({
@@ -115,7 +124,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
-  searchInputPlaceholder = 'Search...',
+  searchInputPlaceholder = 'Search previous conversations...',
   searchInputAriaLabel = 'Filter menu items',
   handleTextInputChange,
   displayMode,
@@ -129,6 +138,9 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   drawerActionsProps,
   drawerCloseButtonProps,
   drawerPanelBodyProps,
+  isLoading,
+  loadingState,
+  errorState,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = React.useRef<HTMLDivElement>(null);
@@ -194,24 +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} {...menuProps}>
-      <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 }} defaultSize="384px" {...drawerPanelContentProps}>
-      <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>
+  const renderDrawerContent = () => (
+    <>
       {handleTextInputChange && (
         <div className="pf-chatbot__input">
           <SearchInput
@@ -221,10 +228,38 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
           />
         </div>
       )}
-      <DrawerPanelBody {...drawerPanelBodyProps}>{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) => {
@@ -246,7 +281,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
       isInline={displayMode === ChatbotDisplayMode.fullscreen || displayMode === ChatbotDisplayMode.embedded}
       {...props}
     >
-      <DrawerContent panelContent={panelContent} {...drawerContentProps}>
+      <DrawerContent panelContent={renderPanelContent()} {...drawerContentProps}>
         <DrawerContentBody {...drawerContentBodyProps}>
           <>
             <div

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;