feat(History): Add expandable sections

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

@@ -0,0 +1,129 @@
+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, MenuItem } 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 visibleChats = isShowingAllChats ? recentChats : recentChats.slice(0, VISIBLE_CHAT_COUNT);
+  const hiddenChatCount = recentChats.length - VISIBLE_CHAT_COUNT;
+
+  const renderExpandButton = () => {
+    if (isShowingAllChats) {
+      return [
+        <MenuItem
+          key="show-some-chats"
+          itemId="show-some-chats"
+          className="pf-chatbot__menu-item pf-chatbot__menu-item--show-button"
+          onClick={() => setIsShowingAllChats(false)}
+        >
+          Show less
+        </MenuItem>
+      ];
+    }
+    if (hiddenChatCount > 0 && !isShowingAllChats) {
+      return [
+        <MenuItem
+          key="show-all-chats"
+          itemId="show-all-chats"
+          className="pf-chatbot__menu-item pf-chatbot__menu-item--show-button"
+          onClick={() => setIsShowingAllChats(true)}
+        >
+          {`Show all (${recentChats.length})`}
+        </MenuItem>
+      ];
+    }
+    return [];
+  };
+
+  const conversations: ConversationGroup[] = [
+    {
+      id: 'pinned',
+      label: 'Pinned chats',
+      items: pinnedChats
+    },
+    {
+      id: 'chats',
+      label: 'Chats',
+      items: [...visibleChats, ...renderExpandButton()]
+    },
+    {
+      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,11 @@
     border-radius: var(--pf-t--global--border--radius--small);
   }
 
+  .pf-chatbot__menu-item--show-button {
+    color: var(--pf-t--global--text--color--link--default);
+    font-size: var(--pf-t--global--font--size--body--default);
+  }
+
   li.pf-chatbot__menu-item:hover::after {
     position: absolute;
     inset: 0;

packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -2,8 +2,8 @@ import '@testing-library/jest-dom';
 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 ChatbotConversationHistoryNav, { Conversation, ConversationGroup } from './ChatbotConversationHistoryNav';
+import { EmptyStateStatus, Spinner, MenuItem } from '@patternfly/react-core';
 import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
 import { ComponentType } from 'react';
 
@@ -715,4 +715,145 @@ describe('ChatbotConversationHistoryNav', () => {
     );
     expect(screen.getByTestId('bell')).toBeInTheDocument();
   });
+
+  it('renders static and collapsible groups from ConversationGroup[]', () => {
+    const groups: ConversationGroup[] = [
+      {
+        id: 'pinned',
+        label: 'Pinned chats',
+        items: initialConversations
+      },
+      {
+        id: 'chats',
+        label: 'Chats',
+        collapsible: {
+          isExpanded: true,
+          onToggle: jest.fn()
+        },
+        items: [{ id: '2', text: 'Chatbot extension' }]
+      }
+    ];
+
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={groups}
+      />
+    );
+
+    expect(screen.getByRole('heading', { name: 'Pinned chats', level: 3 })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Pinned chats' })).not.toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Chats' })).toBeInTheDocument();
+  });
+
+  it('collapses and expands a group when collapsible.onToggle is called', async () => {
+    const onToggle = jest.fn();
+    const groups: ConversationGroup[] = [
+      {
+        id: 'chats',
+        label: 'Chats',
+        collapsible: {
+          isExpanded: true,
+          onToggle
+        },
+        items: [{ id: '2', text: 'Chatbot extension' }]
+      }
+    ];
+
+    const { rerender } = render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={groups}
+      />
+    );
+
+    expect(screen.getByRole('menuitem', { name: /Chatbot extension/i })).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Chats' }));
+    expect(onToggle).toHaveBeenCalledWith(false);
+
+    rerender(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={[
+          {
+            ...groups[0],
+            collapsible: {
+              isExpanded: false,
+              onToggle
+            }
+          }
+        ]}
+      />
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByRole('menuitem', { name: /Chatbot extension/i })).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders custom menu items and footers supplied in ConversationGroup', () => {
+    const groups: ConversationGroup[] = [
+      {
+        id: 'chats',
+        label: 'Chats',
+        items: [
+          initialConversations[0],
+          <MenuItem key="show-all" itemId="show-all">
+            Show all
+          </MenuItem>
+        ],
+        footer: <div data-testid="group-footer">Footer content</div>
+      }
+    ];
+
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={groups}
+      />
+    );
+
+    expect(screen.getByRole('menuitem', { name: 'Show all' })).toBeInTheDocument();
+    expect(screen.getByTestId('group-footer')).toBeInTheDocument();
+  });
+
+  it('passes collapsible expandableSectionProps from ConversationGroup', () => {
+    const groups: ConversationGroup[] = [
+      {
+        id: 'saved',
+        label: 'Saved prompts',
+        collapsible: {
+          isExpanded: true,
+          onToggle: jest.fn(),
+          expandableSectionProps: { className: 'test-expandable-section' }
+        },
+        items: initialConversations
+      }
+    ];
+
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={groups}
+      />
+    );
+
+    expect(document.querySelector('.test-expandable-section')).toBeInTheDocument();
+  });
 });