Add heading level handling

Author: rebeccaalpert

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -13,6 +13,11 @@
     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;

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -126,6 +126,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   title?: string;
   /** Icon displayed in title */
   icon?: React.ReactNode;
+  /** Heading header level */
+  headingHeaderLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -159,6 +161,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   noResultsState,
   isCompact,
   title = 'Chat History',
+  headingHeaderLevel = 'h2',
   icon = <OutlinedClockIcon />,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
@@ -272,7 +275,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
             <Icon size="lg" className="pf-chatbot__title-icon">
               {icon}
             </Icon>
-            <Title headingLevel="h3">{title}</Title>
+            <Title className="pf-chatbot__title" headingLevel={headingHeaderLevel}>
+              {title}
+            </Title>
           </div>
           {!isLoading && handleTextInputChange && (
             <div className="pf-chatbot__input">