From 1fb97f485fae9909c01be1c4a995fbbc9f7f0286 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Thu, 17 Jul 2025 13:29:40 -0400
Subject: [PATCH 1/2] fix(ChatbotConversationHistoryNav): Make title icon and
 heading customizable

Also change spacing between icon and title to 0.5rem.
---
 .../ChatbotConversationHistoryNav.scss         | 18 ++++++++++++------
 .../ChatbotConversationHistoryNav.tsx          | 18 +++++++++++++-----
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss
index b9424aa26..ee336860c 100644
--- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss
+++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss
@@ -9,18 +9,24 @@
 
   // Drawer title
   // ----------------------------------------------------------------------------
-  .pf-chatbot__title-container {
+  .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);
   }
-  // Drawer title icon
-  // ----------------------------------------------------------------------------
-  .pf-chatbot__title-icon {
-    padding-inline-end: var(--pf-t--global--spacer--md);
-    padding-inline-start: 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
   // ----------------------------------------------------------------------------
diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
index 237e7fdaf..248e062a7 100644
--- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
+++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
@@ -135,6 +135,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   isCompact?: boolean;
   /** Display title  */
   title?: string;
+  /** Icon displayed in title */
+  icon?: React.ReactNode;
+  /** Heading header level */
+  headingHeaderLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -171,6 +175,8 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   noResultsState,
   isCompact,
   title = 'Chat history',
+  headingHeaderLevel = 'h2',
+  icon = <OutlinedClockIcon />,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -283,13 +289,15 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
             )}
           </DrawerActions>
         </DrawerHead>
-        <div className="pf-chatbot__title-container">
-          <Title headingLevel="h3">
+        <div className="pf-chatbot__heading-container">
+          <div className="pf-chatbot__title-container">
             <Icon size="lg" className="pf-chatbot__title-icon">
-              <OutlinedClockIcon />
+              {icon}
             </Icon>
-            {title}
-          </Title>
+            <Title className="pf-chatbot__title" headingLevel={headingHeaderLevel}>
+              {title}
+            </Title>
+          </div>
           {!isLoading && handleTextInputChange && (
             <div className="pf-chatbot__input">
               <SearchInput

From 0e76b30929ca67d494d3c2db7951a7dce2464712 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Mon, 4 Aug 2025 16:24:59 -0400
Subject: [PATCH 2/2] Address PR feedback

---
 .../ChatbotConversationHistoryNav.test.tsx    | 39 ++++++++++++++++---
 .../ChatbotConversationHistoryNav.tsx         | 20 +++++-----
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx
index acbdafac1..693f26301 100644
--- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx
+++ b/packages/module/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 = {
@@ -492,7 +492,7 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(iconElement).toBeInTheDocument();
   });
 
-  it('Passes titleProps to Title', () => {
+  it('Passes listTitleProps to Title', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
@@ -500,13 +500,13 @@ describe('ChatbotConversationHistoryNav', () => {
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
         conversations={{ Today: initialConversations }}
-        titleProps={{ className: 'test' }}
+        listTitleProps={{ className: 'test' }}
       />
     );
     expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
   });
 
-  it('Overrides Title heading level when titleProps.headingLevel is passed', () => {
+  it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
@@ -514,7 +514,7 @@ describe('ChatbotConversationHistoryNav', () => {
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
         conversations={{ Today: initialConversations }}
-        titleProps={{ headingLevel: 'h2' }}
+        listTitleProps={{ headingLevel: 'h2' }}
       />
     );
     expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
@@ -577,4 +577,33 @@ describe('ChatbotConversationHistoryNav', () => {
 
     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();
+  });
 });
diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
index 248e062a7..8b892ea9e 100644
--- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
+++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx
@@ -82,7 +82,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Additional button props for new chat button. */
   newChatButtonProps?: ButtonProps;
   /** Additional props applied to all conversation list headers */
-  titleProps?: Partial<TitleProps>;
+  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 */
@@ -136,9 +136,9 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Display title  */
   title?: string;
   /** Icon displayed in title */
-  icon?: React.ReactNode;
-  /** Heading header level */
-  headingHeaderLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  navTitleIcon?: React.ReactNode;
+  /** Title header level */
+  navTitleProps?: Partial<TitleProps>;
 }
 
 export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -148,7 +148,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   activeItemId,
   onSelectActiveItem,
   conversations,
-  titleProps,
+  listTitleProps,
   listProps,
   newChatButtonText = 'New chat',
   drawerContent,
@@ -175,8 +175,8 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   noResultsState,
   isCompact,
   title = 'Chat history',
-  headingHeaderLevel = 'h2',
-  icon = <OutlinedClockIcon />,
+  navTitleProps,
+  navTitleIcon = <OutlinedClockIcon />,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -228,7 +228,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
         <div>
           {Object.keys(conversations).map((navGroup) => (
             <section key={navGroup}>
-              <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...titleProps}>
+              <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...listTitleProps}>
                 {navGroup}
               </Title>
               <List className="pf-chatbot__conversation-list" isPlain {...listProps?.[navGroup]}>
@@ -292,9 +292,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
         <div className="pf-chatbot__heading-container">
           <div className="pf-chatbot__title-container">
             <Icon size="lg" className="pf-chatbot__title-icon">
-              {icon}
+              {navTitleIcon}
             </Icon>
-            <Title className="pf-chatbot__title" headingLevel={headingHeaderLevel}>
+            <Title className="pf-chatbot__title" headingLevel="h2" {...navTitleProps}>
               {title}
             </Title>
           </div>