feat(History): Add expandable sections

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithCollapsibleGroups.tsx

@@ -0,0 +1,103 @@
+import { useState, FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
+import ChatbotConversationHistoryNav, {
+  Conversation,
+  ConversationGroup
+} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
+import { Checkbox } from '@patternfly/react-core';
+
+const pinnedChats: Conversation[] = [
+  {
+    id: '1',
+    text: 'Red Hat products and services'
+  }
+];
+
+const recentChats: Conversation[] = [
+  {
+    id: '2',
+    text: 'Enterprise Linux installation and setup'
+  },
+  {
+    id: '3',
+    text: 'Troubleshoot system crash'
+  },
+  {
+    id: '4',
+    text: 'Ansible security and updates'
+  },
+  {
+    id: '5',
+    text: 'Red Hat certification'
+  },
+  {
+    id: '6',
+    text: 'Lightspeed user documentation'
+  }
+];
+
+const savedPrompts: Conversation[] = [
+  {
+    id: '7',
+    text: 'Summarize this document'
+  },
+  {
+    id: '8',
+    text: 'Draft a release announcement'
+  }
+];
+
+const VISIBLE_CHAT_COUNT = 3;
+
+export const ChatbotHeaderDrawerWithCollapsibleGroupsDemo: FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [isSavedPromptsExpanded, setIsSavedPromptsExpanded] = useState(false);
+  const [isShowingAllChats, setIsShowingAllChats] = useState(false);
+
+  const conversations: ConversationGroup[] = [
+    {
+      id: 'pinned',
+      label: 'Pinned chats',
+      items: pinnedChats
+    },
+    {
+      id: 'chats',
+      label: 'Chats',
+      items: recentChats,
+      showAll: {
+        visibleCount: VISIBLE_CHAT_COUNT,
+        isExpanded: isShowingAllChats,
+        onToggle: setIsShowingAllChats
+      }
+    },
+    {
+      id: 'saved-prompts',
+      label: 'Saved prompts',
+      collapsible: {
+        isExpanded: isSavedPromptsExpanded,
+        onToggle: setIsSavedPromptsExpanded
+      },
+      items: savedPrompts
+    }
+  ];
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => setIsOpen(!isOpen)}
+        id="collapsible-groups-drawer-visible"
+        name="collapsible-groups-drawer-visible"
+      />
+      <ChatbotConversationHistoryNav
+        displayMode={ChatbotDisplayMode.embedded}
+        onDrawerToggle={() => setIsOpen(!isOpen)}
+        isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
+        conversations={conversations}
+        drawerContent={<div>Drawer content</div>}
+      />
+    </>
+  );
+};

packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md

@@ -35,7 +35,8 @@ propComponents:
     'MessageBarWithAttachMenuProps',
     'SourceDetailsMenuItem',
     'ChatbotConversationHistoryNav',
-    'Conversation'
+    'Conversation',
+    'ConversationGroup'
   ]
 sortValue: 2
 ---
@@ -401,6 +402,16 @@ To help users track important conversations, add a "pin" option to the conversat
 
 ```
 
+### Grouped and collapsible conversation history
+
+For grouped chat history, pass a `ConversationGroup[]` to describe each section's label, items, and behavior. Each group's `items` array accepts `Conversation` objects or custom menu content such as a **Show all** action. Use `collapsible` on a group to make that section expandable, and `footer` for content rendered after the group's menu list.
+
+The object form `{ [groupLabel: string]: Conversation[] }` remains supported as shorthand for simple static groups.
+
+```js file="./ChatbotHeaderDrawerWithCollapsibleGroups.tsx"
+
+```
+
 ### Renaming conversations in chat history drawer
 
 You can allow users to rename a conversation in the chat history drawer by implementing a modal that opens upon clicking a "Rename" (or similar) action. When doing so, you must ensure the following:

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -60,19 +60,56 @@
     --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
   }
 
-  .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);
-    --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);
+  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title,
+  .pf-chatbot__menu-item-header--collapsible .pf-chatbot__menu-group-toggle {
     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-header > .pf-v6-c-menu__group-title,
+  .pf-chatbot__menu-item-header--collapsible .pf-chatbot__menu-group-toggle > .pf-v6-c-expandable-section__toggle {
+    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-chatbot__menu-group-toggle {
+    padding-block-start: var(--pf-t--global--spacer--sm);
+    padding-block-end: var(--pf-t--global--spacer--sm);
+  }
+
+  .pf-chatbot__menu-item-header > .pf-v6-c-menu__group-title {
+    --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);
+  }
+
+  .pf-chatbot__menu-item-header--collapsible .pf-chatbot__menu-group-toggle {
+    width: 100%;
+
+    .pf-v6-c-expandable-section__toggle {
+      margin: 0;
+    }
+
+    .pf-v6-c-button.pf-m-link {
+      --pf-v6-c-button--PaddingBlockStart: 0;
+      --pf-v6-c-button--PaddingBlockEnd: 0;
+      --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+      --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+      color: inherit;
+      font-weight: inherit;
+      font-size: inherit;
+      justify-content: flex-start;
+      width: 100%;
+    }
+
+    .pf-v6-c-expandable-section__toggle-icon {
+      color: var(--pf-t--global--text--color--subtle);
+    }
+  }
+
   .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);
@@ -86,6 +123,16 @@
     border-radius: var(--pf-t--global--border--radius--small);
   }
 
+  // "Show all" / "Show less" toggle
+  // Rendered as a regular MenuItem positioned after the (conditionally rendered)
+  // overflow items, so it participates in the menu's normal roving tabindex and
+  // arrow-key navigation, and stays in a fixed position at the bottom of the list.
+  .pf-chatbot__menu-show-all-toggle {
+    color: var(--pf-t--global--text--color--link--default);
+    font-size: var(--pf-t--global--font--size--body--default);
+    font-weight: var(--pf-t--global--font--weight--body--default);
+  }
+
   li.pf-chatbot__menu-item:hover::after {
     position: absolute;
     inset: 0;