@patternfly/chatbot 6.3.2 → 6.4.0-prerelease.11

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -2,63 +2,101 @@
 // Chatbot Header - Menu
 // ============================================================================
 .pf-chatbot__history {
+  // hide from view but not assistive technologies
+  // https://css-tricks.com/inclusively-hidden/
+  .pf-chatbot__filter-announcement {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   .pf-chatbot__drawer-backdrop {
     position: absolute;
     border-radius: var(--pf-t--global--border--radius--medium);
   }
-  // Drawer input
+
+  // Drawer title
   // ----------------------------------------------------------------------------
-  .pf-chatbot__input {
+  .pf-chatbot__heading-container {
     padding-inline-start: var(--pf-t--global--spacer--lg);
     padding-inline-end: var(--pf-t--global--spacer--lg);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--pf-t--global--spacer--sm);
+  }
+  .pf-chatbot__title {
+    font-size: var(--pf-v6-c-title--m-h3--FontSize);
+    font-weight: var(--pf-v6-c-title--m-h3--FontWeight);
+    line-height: var(--pf-v6-c-title--m-h3--LineHeight);
+  }
+  .pf-chatbot__title-container {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    justify-content: flex-start;
+    gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   }
-
   // Drawer menu
   // ----------------------------------------------------------------------------
-  .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 {
+    --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-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
+
+  .pf-chatbot__conversation-list-header {
     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);
-    --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);
+    padding-inline-start: var(--pf-t--global--spacer--sm);
+    padding-inline-end: 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__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__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__history-actions {
     transform: rotate(90deg);
   }
 
-  .pf-chatbot__menu-item--active {
+  .pf-chatbot__conversation-list-item--active {
     background-color: var(--pf-t--global--background--color--action--plain--clicked);
   }
 
-  button.pf-chatbot__menu-item--active {
+  button.pf-chatbot__conversation-list-item--active {
     background-color: initial;
   }
 }
@@ -75,7 +113,7 @@
     --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
     --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--lg);
     --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
-    --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--lg);
+    --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
     overflow-x: hidden;
     overflow-y: hidden;
   }
@@ -221,8 +259,8 @@
     }
   }
 
-  .pf-chatbot__menu-item {
-    font-size: var(--pf-t--global--font--size--body--md);
+  .pf-chatbot__conversation-history-item {
+    --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--md);
   }
 
   .pf-v6-c-drawer__head {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -4,7 +4,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';
+import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 import { ComponentType } from 'react';
 
 const ERROR = {
@@ -104,6 +104,23 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(screen.getByTestId('chatbot-nav-drawer-actions')).toHaveClass('pf-v6-c-drawer__actions--reversed');
   });
 
+  it('should disable new chat button', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        reverseButtonOrder
+        conversations={initialConversations}
+        newChatButtonProps={{ isDisabled: true }}
+        onNewChat={jest.fn()}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: 'New chat' })).toBeDisabled();
+  });
+
   it('should not apply the reversed class when reverseButtonOrder is false', () => {
     render(
       <ChatbotConversationHistoryNav
@@ -331,7 +348,7 @@ describe('ChatbotConversationHistoryNav', () => {
     ).toBeTruthy();
     expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
     expect(screen.getByRole('button', { name: /Loading... Reload/i })).toBeTruthy();
-    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+    expect(screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
     expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
   });
 
@@ -355,7 +372,7 @@ describe('ChatbotConversationHistoryNav', () => {
     ).toBeTruthy();
     expect(screen.getByRole('button', { name: /Close drawer panel/i })).toBeTruthy();
     expect(screen.queryByRole('button', { name: /Loading... Reload/i })).toBeFalsy();
-    expect(screen.getByRole('textbox', { name: /Filter menu items/i })).toBeTruthy();
+    expect(screen.getByRole('textbox', { name: /Search previous conversations/i })).toBeTruthy();
     expect(screen.getByRole('heading', { name: /Could not load chat history/i })).toBeTruthy();
   });
 
@@ -433,4 +450,160 @@ describe('ChatbotConversationHistoryNav', () => {
     );
     expect(screen.getByTestId('drawer')).toHaveClass('pf-m-compact');
   });
+
+  it('should display the default title', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    expect(screen.getByText('Chat history')).toBeInTheDocument();
+  });
+
+  it('should display the custom title', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        title="PatternFly history"
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    expect(screen.getByText('PatternFly history')).toBeInTheDocument();
+  });
+
+  it('should display the clock icon', () => {
+    const { container } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+      />
+    );
+    const iconElement = container.querySelector('.pf-chatbot__title-icon');
+    expect(iconElement).toBeInTheDocument();
+  });
+
+  it('Passes listTitleProps to Title', () => {
+    render(
+      <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(
+      <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(
+      <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(
+      <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(
+      <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('should be able to spread search input props when searchInputProps is passed', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        handleTextInputChange={jest.fn()}
+        searchInputProps={{ value: 'I am a sample search' }}
+      />
+    );
+
+    expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument();
+  });
+
+  it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={{ Today: initialConversations }}
+        navTitleProps={{ headingLevel: 'h1' }}
+      />
+    );
+    expect(screen.queryByRole('heading', { name: /Chat history/i, level: 2 })).not.toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /Chat history/i, level: 1 })).toBeInTheDocument();
+  });
+
+  it('overrides nav title icon when navTitleIcon is passed in', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={initialConversations}
+        navTitleIcon={<BellIcon data-testid="bell" />}
+      />
+    );
+    expect(screen.getByTestId('bell')).toBeInTheDocument();
+  });
 });

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -8,6 +8,7 @@ import { useRef, Fragment } from 'react';
 // Import PatternFly components
 import {
   Button,
+  ButtonProps,
   Drawer,
   DrawerPanelContent,
   DrawerContent,
@@ -18,13 +19,10 @@ import {
   DrawerCloseButton,
   DrawerContentBody,
   SearchInput,
-  Menu,
-  MenuList,
-  MenuGroup,
-  MenuItem,
-  MenuContent,
-  MenuItemProps,
-  MenuProps,
+  List,
+  ListItem,
+  ListItemProps,
+  Title,
   DrawerPanelContentProps,
   DrawerContentProps,
   DrawerContentBodyProps,
@@ -32,10 +30,15 @@ import {
   DrawerActionsProps,
   DrawerCloseButtonProps,
   DrawerPanelBodyProps,
-  SkeletonProps
+  SkeletonProps,
+  Icon,
+  MenuProps, // Remove in next breaking change
+  TitleProps,
+  ListProps,
+  SearchInputProps
 } from '@patternfly/react-core';
 
-import { OutlinedCommentAltIcon } from '@patternfly/react-icons';
+import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
@@ -58,8 +61,12 @@ export interface Conversation {
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
-  /** Additional props passed to conversation menu item */
-  additionalProps?: MenuItemProps;
+  /** Additional props passed to conversation button item */
+  additionalProps?: ButtonProps;
+  /** Additional props passed to conversation list item */
+  listItemProps?: Omit<ListItemProps, 'children'>;
+  /** Custom dropdown ID to ensure uniqueness across demo instances */
+  dropdownId?: string;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Function called to toggle drawer */
@@ -74,6 +81,12 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   onSelectActiveItem?: (event?: React.MouseEvent, itemId?: string | number) => void;
   /** Items shown in conversation history */
   conversations: Conversation[] | { [key: string]: Conversation[] };
+  /** Additional button props for new chat button. */
+  newChatButtonProps?: ButtonProps;
+  /** 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 };
   /** Text shown in blue button */
   newChatButtonText?: string;
   /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -84,6 +97,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   searchInputPlaceholder?: string;
   /** Aria label for search input */
   searchInputAriaLabel?: string;
+  /** Additional props passed to search input */
+  searchInputProps?: SearchInputProps;
   /** A callback for when the input value changes. Omit to hide input field */
   handleTextInputChange?: (value: string) => void;
   /** Display mode of chatbot */
@@ -92,7 +107,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   reverseButtonOrder?: boolean;
   /** Custom test id for the drawer actions */
   drawerActionsTestId?: string;
-  /** Additional props applied to menu  */
+  /** @deprecated Additional props applied to list container  */
   menuProps?: MenuProps;
   /** Additional props applied to panel */
   drawerPanelContentProps?: DrawerPanelContentProps;
@@ -120,6 +135,14 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   noResultsState?: HistoryEmptyStateProps;
   /** Sets drawer to compact styling. */
   isCompact?: boolean;
+  /** Display title  */
+  title?: string;
+  /** Icon displayed in title */
+  navTitleIcon?: React.ReactNode;
+  /** Title header level */
+  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;
 }
 
 export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -129,16 +152,19 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   activeItemId,
   onSelectActiveItem,
   conversations,
+  listTitleProps,
+  listProps,
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
+  newChatButtonProps,
   searchInputPlaceholder = 'Search previous conversations...',
-  searchInputAriaLabel = 'Filter menu items',
+  searchInputAriaLabel = 'Search previous conversations',
+  searchInputProps,
   handleTextInputChange,
   displayMode,
   reverseButtonOrder = false,
   drawerActionsTestId = 'chatbot-nav-drawer-actions',
-  menuProps,
   drawerPanelContentProps,
   drawerContentProps,
   drawerContentBodyProps,
@@ -152,6 +178,10 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   emptyState,
   noResultsState,
   isCompact,
+  title = 'Chat history',
+  navTitleProps,
+  navTitleIcon = <OutlinedClockIcon />,
+  searchInputScreenReaderText,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -161,55 +191,60 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   };
 
   const getNavItem = (conversation: Conversation) => (
-    <MenuItem
-      className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
-      itemId={conversation.id}
+    <ListItem
+      className={`pf-chatbot__conversation-list-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__conversation-list-item--active' : ''}`}
       key={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}
+      {...conversation.listItemProps}
       /* eslint-enable indent */
     >
-      {conversation.text}
-    </MenuItem>
+      <>
+        <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>
   );
 
-  const buildMenu = () => {
+  const buildConversations = () => {
     if (Array.isArray(conversations)) {
-      // Render for array of MenuItemObject
       return (
-        <MenuList>
+        <List className="pf-chatbot__conversation-list" isPlain {...listProps}>
           {conversations.map((conversation) => (
             <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
           ))}
-        </MenuList>
+        </List>
       );
     } else {
-      // Render for object with NavItemObject arrays as values
       return (
-        <>
+        <div>
           {Object.keys(conversations).map((navGroup) => (
-            <MenuGroup className="pf-chatbot__menu-item-header" label={navGroup} key={navGroup}>
-              <MenuList>
+            <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) => (
                   <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
                 ))}
-              </MenuList>
-            </MenuGroup>
+              </List>
+            </section>
           ))}
-        </>
+        </div>
       );
     }
   };
@@ -229,24 +264,11 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     if (noResultsState) {
       return <HistoryEmptyState {...noResultsState} />;
     }
-    return (
-      <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
-        <MenuContent>{buildMenu()}</MenuContent>
-      </Menu>
-    );
+    return <>{buildConversations()}</>;
   };
 
   const renderDrawerContent = () => (
     <>
-      {handleTextInputChange && (
-        <div className="pf-chatbot__input">
-          <SearchInput
-            aria-label={searchInputAriaLabel}
-            onChange={(_event, value) => handleTextInputChange(value)}
-            placeholder={searchInputPlaceholder}
-          />
-        </div>
-      )}
       <DrawerPanelBody {...drawerPanelBodyProps}>{renderMenuContent()}</DrawerPanelBody>
     </>
   );
@@ -262,12 +284,40 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
           >
             <DrawerCloseButton onClick={onDrawerToggle} {...drawerCloseButtonProps} />
             {onNewChat && (
-              <Button size={isCompact ? 'sm' : undefined} onClick={onNewChat}>
+              <Button
+                size={isCompact ? 'sm' : undefined}
+                onClick={onNewChat}
+                icon={<PenToSquareIcon />}
+                {...newChatButtonProps}
+              >
                 {newChatButtonText}
               </Button>
             )}
           </DrawerActions>
         </DrawerHead>
+        <div className="pf-chatbot__heading-container">
+          <div className="pf-chatbot__title-container">
+            <Icon size="lg" className="pf-chatbot__title-icon">
+              {navTitleIcon}
+            </Icon>
+            <Title className="pf-chatbot__title" headingLevel="h2" {...navTitleProps}>
+              {title}
+            </Title>
+          </div>
+          {!isLoading && handleTextInputChange && (
+            <div className="pf-chatbot__input">
+              <SearchInput
+                aria-label={searchInputAriaLabel}
+                onChange={(_event, value) => handleTextInputChange(value)}
+                placeholder={searchInputPlaceholder}
+                {...searchInputProps}
+              />
+              {searchInputScreenReaderText && (
+                <div className="pf-chatbot__filter-announcement">{searchInputScreenReaderText}</div>
+              )}
+            </div>
+          )}
+        </div>
         {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
       </>
     );

package/src/ChatbotFooter/ChatbotFooter.scss

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