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

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/cjs/MessageBar/MicrophoneButton.js

@@ -64,7 +64,7 @@ const MicrophoneButton = (_a) => {
             };
             setSpeechRecognition(recognition);
         }
-    }, [onSpeechRecognition]);
+    }, [onSpeechRecognition, language, onIsListeningChange]);
     if (!speechRecognition) {
         return null;
     }

package/dist/cjs/MessageBox/MessageBox.js

@@ -29,26 +29,26 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
             setAtTop(scrollTop === 0);
             setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
         }
-    }, []);
+    }, [messageBoxRef]);
     const checkOverflow = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             const { scrollHeight, clientHeight } = element;
             setIsOverflowing(scrollHeight >= clientHeight);
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToTop = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: 0, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToBottom = react_1.default.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     // Detect scroll position
     react_1.default.useEffect(() => {
         const element = messageBoxRef.current;
@@ -62,7 +62,7 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
                 element.removeEventListener('scroll', handleScroll);
             };
         }
-    }, [checkOverflow, handleScroll]);
+    }, [checkOverflow, handleScroll, messageBoxRef]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(JumpButton_1.default, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
         react_1.default.createElement("div", { role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef },

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/dist/esm/MessageBar/MicrophoneButton.js

@@ -58,7 +58,7 @@ export const MicrophoneButton = (_a) => {
             };
             setSpeechRecognition(recognition);
         }
-    }, [onSpeechRecognition]);
+    }, [onSpeechRecognition, language, onIsListeningChange]);
     if (!speechRecognition) {
         return null;
     }

package/dist/esm/MessageBox/MessageBox.js

@@ -23,26 +23,26 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
             setAtTop(scrollTop === 0);
             setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
         }
-    }, []);
+    }, [messageBoxRef]);
     const checkOverflow = React.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             const { scrollHeight, clientHeight } = element;
             setIsOverflowing(scrollHeight >= clientHeight);
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToTop = React.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: 0, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     const scrollToBottom = React.useCallback(() => {
         const element = messageBoxRef.current;
         if (element) {
             element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
         }
-    }, []);
+    }, [messageBoxRef]);
     // Detect scroll position
     React.useEffect(() => {
         const element = messageBoxRef.current;
@@ -56,7 +56,7 @@ const MessageBoxBase = ({ announcement, ariaLabel = 'Scrollable message log', ch
                 element.removeEventListener('scroll', handleScroll);
             };
         }
-    }, [checkOverflow, handleScroll]);
+    }, [checkOverflow, handleScroll, messageBoxRef]);
     return (React.createElement(React.Fragment, null,
         React.createElement(JumpButton, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop }),
         React.createElement("div", { role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' && 'pf-chatbot__messagebox--bottom'} ${className !== null && className !== void 0 ? className : ''}`, ref: innerRef !== null && innerRef !== void 0 ? innerRef : messageBoxRef },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "2.2.0-prerelease.41",
+  "version": "2.2.0-prerelease.43",
   "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/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx

@@ -36,71 +36,74 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
     return id.toString();
   };
 
-  const handleSend = (input: string) => {
-    const date = new Date();
-    const newMessages: MessageProps[] = [];
-    messages.forEach((message) => newMessages.push(message));
-    newMessages.push({
-      avatar: userAvatar,
-      avatarProps: { isBordered: true },
-      id: generateId(),
-      name: 'You',
-      role: 'user',
-      content: input,
-      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
-    });
-    newMessages.push({
-      avatar: patternflyAvatar,
-      id: generateId(),
-      name,
-      role: 'bot',
-      timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
-      isLoading: true
-    });
-    setMessages(newMessages);
-    // make announcement to assistive devices that new messages have been added
-    setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);
-
-    // this is for demo purposes only; in a real situation, there would be an API response we would wait for
-    setTimeout(() => {
-      const loadedMessages: MessageProps[] = [];
-      // we can't use structuredClone since messages contains functions, but we can't mutate
-      // items that are going into state or the UI won't update correctly
-      newMessages.forEach((message) => loadedMessages.push(message));
-      loadedMessages.pop();
-      loadedMessages.push({
+  const handleSend = React.useCallback(
+    (input: string) => {
+      const date = new Date();
+      const newMessages: MessageProps[] = [];
+      messages.forEach((message) => newMessages.push(message));
+      newMessages.push({
+        avatar: userAvatar,
+        avatarProps: { isBordered: true },
         id: generateId(),
-        role: 'bot',
-        content: `API response from ${name} goes here`,
-        name,
+        name: 'You',
+        role: 'user',
+        content: input,
+        timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`
+      });
+      newMessages.push({
         avatar: patternflyAvatar,
-        isLoading: false,
-        actions: {
-          // eslint-disable-next-line no-console
-          positive: { onClick: () => console.log('Good response') },
-          // eslint-disable-next-line no-console
-          negative: { onClick: () => console.log('Bad response') },
-          // eslint-disable-next-line no-console
-          copy: { onClick: () => console.log('Copy') },
-          // eslint-disable-next-line no-console
-          share: { onClick: () => console.log('Share') },
-          // eslint-disable-next-line no-console
-          listen: { onClick: () => console.log('Listen') }
-        },
-        timestamp: date.toLocaleString()
+        id: generateId(),
+        name,
+        role: 'bot',
+        timestamp: `${date?.toLocaleDateString()} ${date?.toLocaleTimeString()}`,
+        isLoading: true
       });
-      setMessages(loadedMessages);
-      // make announcement to assistive devices that new message has loaded
-      setAnnouncement(`Message from ${name}: API response goes here`);
-      setIsSendButtonDisabled(false);
-    }, 5000);
-  };
+      setMessages(newMessages);
+      // make announcement to assistive devices that new messages have been added
+      setAnnouncement(`Message from You: ${input}. Message from ${name} is loading.`);
+
+      // this is for demo purposes only; in a real situation, there would be an API response we would wait for
+      setTimeout(() => {
+        const loadedMessages: MessageProps[] = [];
+        // we can't use structuredClone since messages contains functions, but we can't mutate
+        // items that are going into state or the UI won't update correctly
+        newMessages.forEach((message) => loadedMessages.push(message));
+        loadedMessages.pop();
+        loadedMessages.push({
+          id: generateId(),
+          role: 'bot',
+          content: `API response from ${name} goes here`,
+          name,
+          avatar: patternflyAvatar,
+          isLoading: false,
+          actions: {
+            // eslint-disable-next-line no-console
+            positive: { onClick: () => console.log('Good response') },
+            // eslint-disable-next-line no-console
+            negative: { onClick: () => console.log('Bad response') },
+            // eslint-disable-next-line no-console
+            copy: { onClick: () => console.log('Copy') },
+            // eslint-disable-next-line no-console
+            share: { onClick: () => console.log('Share') },
+            // eslint-disable-next-line no-console
+            listen: { onClick: () => console.log('Listen') }
+          },
+          timestamp: date.toLocaleString()
+        });
+        setMessages(loadedMessages);
+        // make announcement to assistive devices that new message has loaded
+        setAnnouncement(`Message from ${name}: API response goes here`);
+        setIsSendButtonDisabled(false);
+      }, 5000);
+    },
+    [messages, name, setIsSendButtonDisabled]
+  );
 
   React.useEffect(() => {
     if (input) {
       handleSend(input);
     }
-  }, [hasNewInput]);
+  }, [hasNewInput, input]);
 
   // Auto-scrolls to the latest message
   React.useEffect(() => {

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>

package/src/MessageBar/MicrophoneButton.tsx

@@ -81,7 +81,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
 
       setSpeechRecognition(recognition);
     }
-  }, [onSpeechRecognition]);
+  }, [onSpeechRecognition, language, onIsListeningChange]);
 
   if (!speechRecognition) {
     return null;

package/src/MessageBox/MessageBox.tsx

@@ -46,7 +46,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
       setAtTop(scrollTop === 0);
       setAtBottom(Math.round(scrollTop) + Math.round(clientHeight) >= Math.round(scrollHeight) - 1); // rounding means it could be within a pixel of the bottom
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const checkOverflow = React.useCallback(() => {
     const element = messageBoxRef.current;
@@ -54,21 +54,21 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
       const { scrollHeight, clientHeight } = element;
       setIsOverflowing(scrollHeight >= clientHeight);
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const scrollToTop = React.useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: 0, behavior: 'smooth' });
     }
-  }, []);
+  }, [messageBoxRef]);
 
   const scrollToBottom = React.useCallback(() => {
     const element = messageBoxRef.current;
     if (element) {
       element.scrollTo({ top: element.scrollHeight, behavior: 'smooth' });
     }
-  }, []);
+  }, [messageBoxRef]);
 
   // Detect scroll position
   React.useEffect(() => {
@@ -85,7 +85,7 @@ const MessageBoxBase: React.FunctionComponent<MessageBoxProps> = ({
         element.removeEventListener('scroll', handleScroll);
       };
     }
-  }, [checkOverflow, handleScroll]);
+  }, [checkOverflow, handleScroll, messageBoxRef]);
 
   return (
     <>