@patternfly/chatbot 6.4.0-prerelease.13 → 6.4.0-prerelease.15

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

@@ -193,26 +193,30 @@ describe('ChatbotConversationHistoryNav', () => {
         const iconElement = container.querySelector('.pf-chatbot__title-icon');
         expect(iconElement).toBeInTheDocument();
     });
-    it('Passes listTitleProps to Title', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { className: 'test' } }));
-        expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
-    });
-    it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { headingLevel: 'h2' } }));
-        expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
-        expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
-    });
-    it('Passes listProps to List when conversations is an array', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, listProps: { className: 'test' } }));
-        expect(screen.getByRole('list')).toHaveClass('test');
-    });
-    it('Passes listProps to List when conversations is an object', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listProps: { Today: { className: 'test' } } }));
-        expect(screen.getByRole('list')).toHaveClass('test');
-    });
-    it('Passes listItemProps to ListItem', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }] }));
-        expect(screen.getByRole('listitem')).toHaveClass('test');
+    it('Passes menuProps to Menu', () => {
+        var _a;
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuProps: { className: 'test' } }));
+        expect((_a = screen.getByRole('menu').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement).toHaveClass('test');
+    });
+    it('Passes menuContentProps to MenuContent', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuContentProps: { className: 'test' } }));
+        expect(screen.getByRole('menu').parentElement).toHaveClass('test');
+    });
+    it('Passes menuListProps to MenuList when conversations is an array', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuListProps: { className: 'test' } }));
+        expect(screen.getByRole('menu')).toHaveClass('test');
+    });
+    it('Passes menuListProps to MenuList when conversations is an object', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuListProps: { Today: { className: 'test' } } }));
+        expect(screen.getByRole('menu')).toHaveClass('test');
+    });
+    it('Passes menuGroupProps to MenuGroup when conversations is an object', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuGroupProps: { Today: { className: 'test' } } }));
+        expect(screen.getByRole('menu').parentElement).toHaveClass('test');
+    });
+    it('Passes additionalProps to MenuItem', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', additionalProps: { className: 'test' } }] }));
+        expect(screen.getByRole('menuitem')).toHaveClass('test');
     });
     it('should be able to spread search input props when searchInputProps is passed', () => {
         render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, handleTextInputChange: jest.fn(), searchInputProps: { value: 'I am a sample search' } }));

package/dist/esm/Message/CodeBlockMessage/CodeBlockMessage.js

@@ -13,9 +13,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import { useState, useRef, useId, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 // Import PatternFly components
-import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant } from '@patternfly/react-core';
+import { CodeBlock, CodeBlockAction, CodeBlockCode, Button, Tooltip, ExpandableSection, ExpandableSectionToggle, ExpandableSectionVariant, getUniqueId } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 const DEFAULT_EXPANDED_TEXT = 'Show less';
@@ -26,9 +26,9 @@ const CodeBlockMessage = (_a) => {
     const [copied, setCopied] = useState(false);
     const [isExpanded, setIsExpanded] = useState(false);
     const buttonRef = useRef();
-    const tooltipID = useId();
-    const toggleId = useId();
-    const contentId = useId();
+    const tooltipID = getUniqueId();
+    const toggleId = getUniqueId();
+    const contentId = getUniqueId();
     const codeBlockRef = useRef(null);
     const language = (_b = /language-(\w+)/.exec(className || '')) === null || _b === void 0 ? void 0 : _b[1];
     // Get custom toggle text from data attributes if available - for use with rehype plugins

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.4.0-prerelease.13",
+  "version": "6.4.0-prerelease.15",
   "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",
@@ -49,8 +49,8 @@
     "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@patternfly/documentation-framework": "6.16.0",

package/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx

@@ -331,7 +331,16 @@ Setting up cluster console...`;
         </CardHeader>
         <CardExpandableContent>
           <CardBody>
-            <hr className="pf-v6-u-mb-md" />
+            <hr
+              style={
+                {
+                  border: 'none',
+                  height: 'var(--pf-t--global--border--width--divider--default)',
+                  backgroundColor: 'var(--pf-t--global--border--color--control--read-only)'
+                } as React.CSSProperties
+              }
+              className="pf-v6-u-mb-md"
+            />
             <Accordion
               style={
                 {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

@@ -14,13 +14,13 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should render the dropdown', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} menuClassName="custom-class" />);
-    expect(screen.queryByRole('button', { name: /Conversation options/i })).toBeInTheDocument();
+    expect(screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
   });
 
   it('should display the dropdown menuItems', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} />);
 
-    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
 
     expect(toggle).toBeInTheDocument();
     fireEvent.click(toggle);
@@ -33,7 +33,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should invoke onSelect callback when menuitem is clicked', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
-    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
     fireEvent.click(toggle);
     fireEvent.click(screen.getByText('Rename'));
 
@@ -42,7 +42,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should toggle the dropdown when menuitem is clicked', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
-    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
     fireEvent.click(toggle);
     fireEvent.click(screen.getByText('Delete'));
 
@@ -53,7 +53,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should close the dropdown when user clicks outside', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
-    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
     fireEvent.click(toggle);
 
     expect(screen.queryByText('Delete')).toBeInTheDocument();
@@ -64,7 +64,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should show the tooltip when the user hovers over the toggle button', async () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} label="Actions dropdown" />);
-    const toggle = screen.queryByRole('button', { name: /Actions dropdown/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Actions dropdown/i })!;
 
     fireEvent(
       toggle,

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -48,6 +48,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
         isExpanded={isOpen}
         onClick={() => setIsOpen(!isOpen)}
         id={id}
+        role="menuitem"
       >
         <EllipsisIcon />
       </MenuToggle>

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -42,61 +42,53 @@
   }
   // Drawer menu
   // ----------------------------------------------------------------------------
-  .pf-chatbot__conversation-list {
-    --pf-v6-c-list--Gap: var(--pf-t--global--spacer--xs);
-
-    margin-block-start: var(--pf-t--global--spacer--md);
-    margin-block-end: var(--pf-t--global--spacer--md);
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--PaddingBlockStart: 0;
+    --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+    overflow: initial;
+    position: relative;
+  }
+  .pf-v6-c-menu__item-main {
+    --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
   }
 
-  .pf-chatbot__conversation-list-header {
+  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
     color: var(--pf-t--global--text--color--subtle);
     font-weight: var(--pf-t--global--font--weight--body--bold);
     font-size: var(--pf-t--global--icon--size--font--sm);
-    padding-inline-start: var(--pf-t--global--spacer--sm);
-    padding-inline-end: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-menu__group-title--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-menu__group-title--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     background-color: var(--pf-t--global--background--color--floating--default);
     z-index: var(--pf-t--global--z-index--md);
   }
-  .pf-chatbot__conversation-list-item {
-    & > span {
-      display: flex;
-      column-gap: var(--pf-t--global--spacer--sm);
-    }
-
-    & .pf-chatbot__conversation-history-item {
-      --pf-v6-c-button--JustifyContent: flex-start;
-      --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--lg);
-      --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--regular);
-      --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--regular);
-      --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--regular--hover);
-      --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--icon--color--regular);
-      --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--regular--clicked);
-      --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
 
-      column-gap: var(--pf-t--global--spacer--md);
-      flex-basis: 100%;
-
-      & .pf-v6-c-button__text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
+  .pf-chatbot__menu-item {
+    --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+    --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+    padding-block-start: var(--pf-t--global--spacer--xs);
+    padding-block-end: var(--pf-t--global--spacer--xs);
+    color: var(--pf-t--global--text--color--regular);
+    font-size: var(--pf-t--global--font--size--body--lg);
+    font-weight: var(--pf-t--global--font--weight--body--default);
+    border-radius: var(--pf-t--global--border--radius--small);
+  }
+  // allows focus state to have border radius
+  .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
+    overflow: hidden;
   }
 
   .pf-chatbot__history-actions {
     transform: rotate(90deg);
   }
 
-  .pf-chatbot__conversation-list-item--active {
+  .pf-chatbot__menu-item--active {
     background-color: var(--pf-t--global--background--color--action--plain--clicked);
   }
 
-  button.pf-chatbot__conversation-list-item--active {
+  button.pf-chatbot__menu-item--active {
     background-color: initial;
   }
 }
@@ -259,8 +251,8 @@
     }
   }
 
-  .pf-chatbot__conversation-history-item {
-    --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--md);
+  .pf-chatbot__menu-item {
+    font-size: var(--pf-t--global--font--size--body--md);
   }
 
   .pf-v6-c-drawer__head {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -492,36 +492,36 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(iconElement).toBeInTheDocument();
   });
 
-  it('Passes listTitleProps to Title', () => {
+  it('Passes menuProps to Menu', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
-        conversations={{ Today: initialConversations }}
-        listTitleProps={{ className: 'test' }}
+        conversations={initialConversations}
+        menuProps={{ className: 'test' }}
       />
     );
-    expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
+
+    expect(screen.getByRole('menu').parentElement?.parentElement).toHaveClass('test');
   });
 
-  it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
+  it('Passes menuContentProps to MenuContent', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
-        conversations={{ Today: initialConversations }}
-        listTitleProps={{ headingLevel: 'h2' }}
+        conversations={initialConversations}
+        menuContentProps={{ className: 'test' }}
       />
     );
-    expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
+    expect(screen.getByRole('menu').parentElement).toHaveClass('test');
   });
 
-  it('Passes listProps to List when conversations is an array', () => {
+  it('Passes menuListProps to MenuList when conversations is an array', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
@@ -529,13 +529,27 @@ describe('ChatbotConversationHistoryNav', () => {
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
         conversations={initialConversations}
-        listProps={{ className: 'test' }}
+        menuListProps={{ className: 'test' }}
+      />
+    );
+    expect(screen.getByRole('menu')).toHaveClass('test');
+  });
+
+  it('Passes menuListProps to MenuList when conversations is an object', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={{ Today: initialConversations }}
+        menuListProps={{ Today: { className: 'test' } }}
       />
     );
-    expect(screen.getByRole('list')).toHaveClass('test');
+    expect(screen.getByRole('menu')).toHaveClass('test');
   });
 
-  it('Passes listProps to List when conversations is an object', () => {
+  it('Passes menuGroupProps to MenuGroup when conversations is an object', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
@@ -543,23 +557,23 @@ describe('ChatbotConversationHistoryNav', () => {
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
         conversations={{ Today: initialConversations }}
-        listProps={{ Today: { className: 'test' } }}
+        menuGroupProps={{ Today: { className: 'test' } }}
       />
     );
-    expect(screen.getByRole('list')).toHaveClass('test');
+    expect(screen.getByRole('menu').parentElement).toHaveClass('test');
   });
 
-  it('Passes listItemProps to ListItem', () => {
+  it('Passes additionalProps to MenuItem', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
-        conversations={[{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }]}
+        conversations={[{ id: '1', text: 'ChatBot documentation', additionalProps: { className: 'test' } }]}
       />
     );
-    expect(screen.getByRole('listitem')).toHaveClass('test');
+    expect(screen.getByRole('menuitem')).toHaveClass('test');
   });
 
   it('should be able to spread search input props when searchInputProps is passed', () => {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -2,7 +2,6 @@
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
 import type { KeyboardEvent, FunctionComponent } from 'react';
-
 import { useRef, Fragment } from 'react';
 
 // Import PatternFly components
@@ -19,9 +18,6 @@ import {
   DrawerCloseButton,
   DrawerContentBody,
   SearchInput,
-  List,
-  ListItem,
-  ListItemProps,
   Title,
   DrawerPanelContentProps,
   DrawerContentProps,
@@ -32,10 +28,18 @@ import {
   DrawerPanelBodyProps,
   SkeletonProps,
   Icon,
-  MenuProps, // Remove in next breaking change
+  MenuProps,
   TitleProps,
-  ListProps,
-  SearchInputProps
+  MenuListProps,
+  SearchInputProps,
+  MenuList,
+  MenuGroup,
+  MenuItem,
+  Menu,
+  MenuContent,
+  MenuItemProps,
+  MenuGroupProps,
+  MenuContentProps
 } from '@patternfly/react-core';
 
 import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
@@ -61,10 +65,8 @@ export interface Conversation {
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
-  /** Additional props passed to conversation button item */
-  additionalProps?: ButtonProps;
-  /** Additional props passed to conversation list item */
-  listItemProps?: Omit<ListItemProps, 'children'>;
+  /** Additional props passed to menu item */
+  additionalProps?: MenuItemProps;
   /** Custom dropdown ID to ensure uniqueness across demo instances */
   dropdownId?: string;
 }
@@ -83,10 +85,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   conversations: Conversation[] | { [key: string]: Conversation[] };
   /** Additional button props for new chat button. */
   newChatButtonProps?: ButtonProps;
-  /** Additional props applied to all conversation list headers */
-  listTitleProps?: Partial<TitleProps>;
-  /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */
-  listProps?: ListProps | { [key: string]: ListProps };
+  /** Additional props applied to conversation menu group. If conversations is an object, you should pass an object of MenuGroupProps for each group. */
+  menuGroupProps?: MenuGroupProps | { [key: string]: MenuGroupProps };
+  /** Additional props applied to conversation list. If conversations is an object, you should pass an object of MenuListProps for each group. */
+  menuListProps?: Omit<MenuListProps, 'children'> | { [key: string]: Omit<MenuListProps, 'children'> };
   /** Text shown in blue button */
   newChatButtonText?: string;
   /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -107,7 +109,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   reverseButtonOrder?: boolean;
   /** Custom test id for the drawer actions */
   drawerActionsTestId?: string;
-  /** @deprecated Additional props applied to list container  */
+  /** Additional props applied to menu  */
   menuProps?: MenuProps;
   /** Additional props applied to panel */
   drawerPanelContentProps?: DrawerPanelContentProps;
@@ -143,6 +145,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   navTitleProps?: Partial<TitleProps>;
   /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
   searchInputScreenReaderText?: string;
+  /** Additional props passed to MenuContent */
+  menuContentProps?: Omit<MenuContentProps, 'ref'>;
 }
 
 export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -152,8 +156,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   activeItemId,
   onSelectActiveItem,
   conversations,
-  listTitleProps,
-  listProps,
+  menuListProps,
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
@@ -182,6 +185,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   navTitleProps,
   navTitleIcon = <OutlinedClockIcon />,
   searchInputScreenReaderText,
+  menuProps,
+  menuGroupProps,
+  menuContentProps,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -190,61 +196,65 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     drawerRef.current && drawerRef.current.focus();
   };
 
+  const isConversation = (item: any): item is Conversation =>
+    item && typeof item === 'object' && 'id' in item && 'text' in item;
+
   const getNavItem = (conversation: Conversation) => (
-    <ListItem
-      className={`pf-chatbot__conversation-list-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__conversation-list-item--active' : ''}`}
-      key={conversation.id}
-      {...conversation.listItemProps}
-      /* eslint-enable indent */
+    <MenuItem
+      className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
+      itemId={conversation.id}
+      {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
+      /* eslint-disable indent */
+      {...(conversation.menuItems
+        ? {
+            actions: (
+              <ConversationHistoryDropdown
+                menuClassName={conversation.menuClassName}
+                onSelect={conversation.onSelect}
+                menuItems={conversation.menuItems}
+                label={conversation.label}
+              />
+            )
+          }
+        : {})}
+      {...conversation.additionalProps}
     >
-      <>
-        <Button
-          className="pf-chatbot__conversation-history-item"
-          variant="link"
-          {...conversation.additionalProps}
-          {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
-          onClick={(event) => onSelectActiveItem?.(event, conversation.id)}
-        >
-          {conversation.text}
-        </Button>
-        {conversation.menuItems && (
-          <ConversationHistoryDropdown
-            menuClassName={conversation.menuClassName}
-            onSelect={conversation.onSelect}
-            menuItems={conversation.menuItems}
-            label={conversation.label}
-            id={conversation.dropdownId}
-          />
-        )}
-      </>
-    </ListItem>
+      {conversation.text}
+    </MenuItem>
   );
 
   const buildConversations = () => {
     if (Array.isArray(conversations)) {
       return (
-        <List className="pf-chatbot__conversation-list" isPlain {...listProps}>
-          {conversations.map((conversation) => (
-            <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
-          ))}
-        </List>
+        <MenuList {...menuListProps}>
+          {conversations.map((conversation) => {
+            if (isConversation(conversation)) {
+              return <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>;
+            } else {
+              return conversation;
+            }
+          })}
+        </MenuList>
       );
     } else {
       return (
-        <div>
+        <>
           {Object.keys(conversations).map((navGroup) => (
-            <section key={navGroup}>
-              <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...listTitleProps}>
-                {navGroup}
-              </Title>
-              <List className="pf-chatbot__conversation-list" isPlain {...listProps?.[navGroup]}>
-                {conversations[navGroup].map((conversation) => (
+            <MenuGroup
+              className="pf-chatbot__menu-item-header"
+              label={navGroup}
+              key={navGroup}
+              labelHeadingLevel="h3"
+              {...menuGroupProps?.[navGroup]}
+            >
+              <MenuList {...menuListProps?.[navGroup]}>
+                {conversations[navGroup].map((conversation: Conversation) => (
                   <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
                 ))}
-              </List>
-            </section>
+              </MenuList>
+            </MenuGroup>
           ))}
-        </div>
+        </>
       );
     }
   };
@@ -264,7 +274,11 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     if (noResultsState) {
       return <HistoryEmptyState {...noResultsState} />;
     }
-    return <>{buildConversations()}</>;
+    return (
+      <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
+        <MenuContent {...menuContentProps}>{buildConversations()}</MenuContent>
+      </Menu>
+    );
   };
 
   const renderDrawerContent = () => (

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -1,7 +1,7 @@
 // ============================================================================
 // Chatbot Main - Message - Content - Code Block
 // ============================================================================
-import { useState, useRef, useId, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useEffect } from 'react';
 // Import PatternFly components
 import {
   CodeBlock,
@@ -13,7 +13,8 @@ import {
   ExpandableSectionToggle,
   ExpandableSectionProps,
   ExpandableSectionToggleProps,
-  ExpandableSectionVariant
+  ExpandableSectionVariant,
+  getUniqueId
 } from '@patternfly/react-core';
 
 import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon';
@@ -56,9 +57,9 @@ const CodeBlockMessage = ({
   const [isExpanded, setIsExpanded] = useState(false);
 
   const buttonRef = useRef();
-  const tooltipID = useId();
-  const toggleId = useId();
-  const contentId = useId();
+  const tooltipID = getUniqueId();
+  const toggleId = getUniqueId();
+  const contentId = getUniqueId();
   const codeBlockRef = useRef<HTMLDivElement>(null);
 
   const language = /language-(\w+)/.exec(className || '')?.[1];