@patternfly/chatbot 2.2.0-prerelease.41 → 2.2.0-prerelease.42

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -76,6 +76,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     loadingState?: SkeletonProps;
     /** Content to show in error state. Error state will appear once content is passed in. */
     errorState?: HistoryEmptyStateProps;
+    /** Content to show in empty state. Empty state will appear once content is passed in. */
+    emptyState?: HistoryEmptyStateProps;
+    /** Content to show in no results state. No results state will appear once content is passed in. */
+    noResultsState?: HistoryEmptyStateProps;
 }
 export declare const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -27,7 +27,7 @@ const ChatbotConversationHistoryDropdown_1 = __importDefault(require("./ChatbotC
 const LoadingState_1 = __importDefault(require("./LoadingState"));
 const EmptyState_1 = __importDefault(require("./EmptyState"));
 const ChatbotConversationHistoryNav = (_a) => {
-    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, 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 } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState"]);
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, 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, emptyState, noResultsState } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState"]);
     const drawerRef = react_1.default.useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
@@ -58,6 +58,12 @@ const ChatbotConversationHistoryNav = (_a) => {
         if (errorState) {
             return react_1.default.createElement(EmptyState_1.default, Object.assign({}, errorState));
         }
+        if (emptyState) {
+            return react_1.default.createElement(EmptyState_1.default, Object.assign({}, emptyState));
+        }
+        if (noResultsState) {
+            return react_1.default.createElement(EmptyState_1.default, Object.assign({}, noResultsState));
+        }
         return (react_1.default.createElement(react_core_1.Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
             react_1.default.createElement(react_core_1.MenuContent, null, buildMenu())));
     };

package/dist/cjs/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js

@@ -18,6 +18,7 @@ const react_2 = require("@testing-library/react");
 const Chatbot_1 = require("../Chatbot/Chatbot");
 const ChatbotConversationHistoryNav_1 = __importDefault(require("./ChatbotConversationHistoryNav"));
 const react_core_1 = require("@patternfly/react-core");
+const react_icons_1 = require("@patternfly/react-icons");
 const ERROR = {
     bodyText: (react_1.default.createElement(react_1.default.Fragment, null,
         "To try again, check your connection and reload this page. If the issue persists,",
@@ -31,6 +32,16 @@ const ERROR = {
     status: react_core_1.EmptyStateStatus.danger,
     onClick: () => alert('Clicked Reload')
 };
+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: react_icons_1.SearchIcon
+};
+const EMPTY_STATE = {
+    bodyText: 'Access timely assistance by starting a conversation with an AI model.',
+    titleText: 'Start a new chat',
+    icon: react_icons_1.OutlinedCommentsIcon
+};
 const ERROR_WITHOUT_BUTTON = {
     bodyText: (react_1.default.createElement(react_1.default.Fragment, null,
         "To try again, check your connection and reload this page. If the issue persists,",
@@ -162,4 +173,16 @@ describe('ChatbotConversationHistoryNav', () => {
         (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, errorState: ERROR }));
         expect(react_2.screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
     });
+    it('should accept emptyState', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, emptyState: EMPTY_STATE }));
+        expect(react_2.screen.getByRole('dialog', {
+            name: /Start a new chat Access timely assistance by starting a conversation with an AI model./i
+        })).toBeTruthy();
+    });
+    it('should accept no results state', () => {
+        (0, react_2.render)(react_1.default.createElement(ChatbotConversationHistoryNav_1.default, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: Chatbot_1.ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, noResultsState: NO_RESULTS }));
+        expect(react_2.screen.getByRole('dialog', {
+            name: /No results found Adjust your search query and try again. Check your spelling or try a more general term./i
+        })).toBeTruthy();
+    });
 });

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -76,6 +76,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     loadingState?: SkeletonProps;
     /** Content to show in error state. Error state will appear once content is passed in. */
     errorState?: HistoryEmptyStateProps;
+    /** Content to show in empty state. Empty state will appear once content is passed in. */
+    emptyState?: HistoryEmptyStateProps;
+    /** Content to show in no results state. No results state will appear once content is passed in. */
+    noResultsState?: HistoryEmptyStateProps;
 }
 export declare const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -21,7 +21,7 @@ import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
 import HistoryEmptyState from './EmptyState';
 export const ChatbotConversationHistoryNav = (_a) => {
-    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, 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 } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState"]);
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, newChatButtonText = 'New chat', drawerContent, onNewChat, 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, emptyState, noResultsState } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "newChatButtonText", "drawerContent", "onNewChat", "searchInputPlaceholder", "searchInputAriaLabel", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "menuProps", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState"]);
     const drawerRef = React.useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
@@ -52,6 +52,12 @@ export const ChatbotConversationHistoryNav = (_a) => {
         if (errorState) {
             return React.createElement(HistoryEmptyState, Object.assign({}, errorState));
         }
+        if (emptyState) {
+            return React.createElement(HistoryEmptyState, Object.assign({}, emptyState));
+        }
+        if (noResultsState) {
+            return React.createElement(HistoryEmptyState, Object.assign({}, noResultsState));
+        }
         return (React.createElement(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps),
             React.createElement(MenuContent, null, buildMenu())));
     };

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js

@@ -13,6 +13,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav from './ChatbotConversationHistoryNav';
 import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
+import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 const ERROR = {
     bodyText: (React.createElement(React.Fragment, null,
         "To try again, check your connection and reload this page. If the issue persists,",
@@ -26,6 +27,16 @@ const ERROR = {
     status: EmptyStateStatus.danger,
     onClick: () => alert('Clicked Reload')
 };
+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
+};
+const EMPTY_STATE = {
+    bodyText: 'Access timely assistance by starting a conversation with an AI model.',
+    titleText: 'Start a new chat',
+    icon: OutlinedCommentsIcon
+};
 const ERROR_WITHOUT_BUTTON = {
     bodyText: (React.createElement(React.Fragment, null,
         "To try again, check your connection and reload this page. If the issue persists,",
@@ -157,4 +168,16 @@ describe('ChatbotConversationHistoryNav', () => {
         render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, isLoading: true, errorState: ERROR }));
         expect(screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
     });
+    it('should accept emptyState', () => {
+        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, emptyState: EMPTY_STATE }));
+        expect(screen.getByRole('dialog', {
+            name: /Start a new chat Access timely assistance by starting a conversation with an AI model./i
+        })).toBeTruthy();
+    });
+    it('should accept no results state', () => {
+        render(React.createElement(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), reverseButtonOrder: false, handleTextInputChange: jest.fn(), conversations: initialConversations, noResultsState: NO_RESULTS }));
+        expect(screen.getByRole('dialog', {
+            name: /No results found Adjust your search query and try again. Check your spelling or try a more general term./i
+        })).toBeTruthy();
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.41",
+  "version": "2.2.0-prerelease.42",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -4,6 +4,7 @@ import ChatbotConversationHistoryNav, {
   Conversation
 } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { Checkbox, EmptyStateStatus, Spinner } from '@patternfly/react-core';
+import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 
 const initialConversations: { [key: string]: Conversation[] } = {
   Today: [{ id: '1', text: 'Red Hat products and services' }],
@@ -46,6 +47,18 @@ const ERROR = {
   onClick: () => alert('Clicked Reload')
 };
 
+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
+};
+
+const EMPTY_STATE = {
+  bodyText: 'Access timely assistance by starting a conversation with an AI model.',
+  titleText: 'Start a new chat',
+  icon: OutlinedCommentsIcon
+};
+
 export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(true);
   const [isButtonOrderReversed, setIsButtonOrderReversed] = React.useState(false);
@@ -54,10 +67,12 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
   );
   const [isLoading, setIsLoading] = React.useState(false);
   const [hasError, setHasError] = React.useState(false);
+  const [isEmpty, setIsEmpty] = React.useState(false);
+  const [hasNoResults, setHasNoResults] = React.useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {
-    let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
+    const filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
       const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
       if (filteredItems.length > 0) {
         acc[key] = filteredItems;
@@ -67,7 +82,9 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
 
     // append message if no items are found
     if (Object.keys(filteredConversations).length === 0) {
-      filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
+      setHasNoResults(true);
+    } else {
+      setHasNoResults(false);
     }
     return filteredConversations;
   };
@@ -105,6 +122,20 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         id="drawer-has-error"
         name="drawer-has-error"
       ></Checkbox>
+      <Checkbox
+        label="Show empty state"
+        isChecked={isEmpty}
+        onChange={() => setIsEmpty(!isEmpty)}
+        id="drawer-is-empty"
+        name="drawer-is-empty"
+      ></Checkbox>
+      <Checkbox
+        label="Show no results state"
+        isChecked={hasNoResults}
+        onChange={() => setHasNoResults(!hasNoResults)}
+        id="drawer-has-no-results"
+        name="drawer-has-no-results"
+      ></Checkbox>
       <ChatbotConversationHistoryNav
         displayMode={displayMode}
         onDrawerToggle={() => setIsOpen(!isOpen)}
@@ -129,6 +160,8 @@ export const ChatbotHeaderTitleDemo: React.FunctionComponent = () => {
         drawerContent={<div>Drawer content</div>}
         isLoading={isLoading}
         errorState={hasError ? ERROR : undefined}
+        emptyState={isEmpty ? EMPTY_STATE : undefined}
+        noResultsState={hasNoResults ? NO_RESULTS : undefined}
       />
     </>
   );

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

@@ -4,6 +4,7 @@ import ChatbotConversationHistoryNav, {
   Conversation
 } from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
 import { Checkbox } from '@patternfly/react-core';
+import { SearchIcon } from '@patternfly/react-icons';
 
 const initialConversations: { [key: string]: Conversation[] } = {
   Today: [{ id: '1', text: 'Red Hat products and services' }],
@@ -31,15 +32,22 @@ const initialConversations: { [key: string]: Conversation[] } = {
   ]
 };
 
+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
+};
+
 export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(true);
   const [conversations, setConversations] = React.useState<Conversation[] | { [key: string]: Conversation[] }>(
     initialConversations
   );
+  const [showNoResults, setShowNoResults] = React.useState(false);
   const displayMode = ChatbotDisplayMode.embedded;
 
   const findMatchingItems = (targetValue: string) => {
-    let filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
+    const filteredConversations = Object.entries(initialConversations).reduce((acc, [key, items]) => {
       const filteredItems = items.filter((item) => item.text.toLowerCase().includes(targetValue.toLowerCase()));
       if (filteredItems.length > 0) {
         acc[key] = filteredItems;
@@ -49,7 +57,9 @@ export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
 
     // append message if no items are found
     if (Object.keys(filteredConversations).length === 0) {
-      filteredConversations = [{ id: '13', noIcon: true, text: 'No results found' }];
+      setShowNoResults(true);
+    } else {
+      setShowNoResults(false);
     }
     return filteredConversations;
   };
@@ -88,6 +98,7 @@ export const ChatbotHeaderDrawerResizableDemo: React.FunctionComponent = () => {
         }}
         drawerContent={<div>Drawer content</div>}
         drawerPanelContentProps={{ isResizable: true, minSize: '200px' }}
+        emptyState={showNoResults ? NO_RESULTS : undefined}
       />
     </>
   );

package/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -83,7 +83,7 @@ import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
 import userAvatar from '../Messages/user_avatar.svg';
 import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
 import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
-import { CloseIcon } from '@patternfly/react-icons';
+import { CloseIcon, SearchIcon, OutlinedCommentsIcon } from '@patternfly/react-icons';
 
 ## Structure
 

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -5,6 +5,7 @@ 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';
+import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 
 const ERROR = {
   bodyText: (
@@ -21,6 +22,18 @@ const ERROR = {
   onClick: () => alert('Clicked Reload')
 };
 
+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
+};
+
+const EMPTY_STATE = {
+  bodyText: 'Access timely assistance by starting a conversation with an AI model.',
+  titleText: 'Start a new chat',
+  icon: OutlinedCommentsIcon
+};
+
 const ERROR_WITHOUT_BUTTON = {
   bodyText: (
     <>
@@ -362,4 +375,44 @@ describe('ChatbotConversationHistoryNav', () => {
     );
     expect(screen.getByRole('dialog', { name: /Loading/i })).toBeTruthy();
   });
+
+  it('should accept emptyState', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        emptyState={EMPTY_STATE}
+      />
+    );
+    expect(
+      screen.getByRole('dialog', {
+        name: /Start a new chat Access timely assistance by starting a conversation with an AI model./i
+      })
+    ).toBeTruthy();
+  });
+
+  it('should accept no results state', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder={false}
+        handleTextInputChange={jest.fn()}
+        conversations={initialConversations}
+        noResultsState={NO_RESULTS}
+      />
+    );
+    expect(
+      screen.getByRole('dialog', {
+        name: /No results found Adjust your search query and try again. Check your spelling or try a more general term./i
+      })
+    ).toBeTruthy();
+  });
 });

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -112,6 +112,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   loadingState?: SkeletonProps;
   /** Content to show in error state. Error state will appear once content is passed in. */
   errorState?: HistoryEmptyStateProps;
+  /** Content to show in empty state. Empty state will appear once content is passed in. */
+  emptyState?: HistoryEmptyStateProps;
+  /** Content to show in no results state. No results state will appear once content is passed in. */
+  noResultsState?: HistoryEmptyStateProps;
 }
 
 export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -141,6 +145,8 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
   isLoading,
   loadingState,
   errorState,
+  emptyState,
+  noResultsState,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = React.useRef<HTMLDivElement>(null);
@@ -210,6 +216,14 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent<ChatbotConve
     if (errorState) {
       return <HistoryEmptyState {...errorState} />;
     }
+
+    if (emptyState) {
+      return <HistoryEmptyState {...emptyState} />;
+    }
+
+    if (noResultsState) {
+      return <HistoryEmptyState {...noResultsState} />;
+    }
     return (
       <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
         <MenuContent>{buildMenu()}</MenuContent>