@patternfly/chatbot 6.8.0-prerelease.7 → 6.8.0-prerelease.8

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.js

@@ -12,8 +12,9 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ChatbotConversationHistoryNav from './ChatbotConversationHistoryNav';
-import { EmptyStateStatus, Spinner } from '@patternfly/react-core';
+import { EmptyStateStatus, Spinner, MenuItem } from '@patternfly/react-core';
 import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
+import { useState } from 'react';
 const ERROR = {
     bodyText: (_jsxs(_Fragment, { children: ["To try again, check your connection and reload this page. If the issue persists,", ' ', _jsx("a", { href: "", children: "contact the support team" }), "."] })),
     buttonText: 'Reload',
@@ -269,4 +270,327 @@ describe('ChatbotConversationHistoryNav', () => {
         render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, navTitleIcon: _jsx(BellIcon, { "data-testid": "bell" }) }));
         expect(screen.getByTestId('bell')).toBeInTheDocument();
     });
+    it('renders static and expandable groups from ConversationGroup[]', () => {
+        const groups = [
+            {
+                id: 'pinned',
+                label: 'Pinned chats',
+                items: initialConversations
+            },
+            {
+                id: 'chats',
+                label: 'Chats',
+                expandable: {
+                    isExpanded: true,
+                    onToggle: jest.fn()
+                },
+                items: [{ id: '2', text: 'Chatbot extension' }]
+            }
+        ];
+        render(_jsx(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('labels each MenuList with aria-labelledby referencing its visible label', () => {
+        const groups = [
+            {
+                id: 'pinned',
+                label: 'Pinned chats',
+                items: initialConversations
+            },
+            {
+                id: 'chats',
+                label: 'Chats',
+                expandable: {
+                    isExpanded: true,
+                    onToggle: jest.fn()
+                },
+                items: [{ id: '2', text: 'Chatbot extension' }]
+            }
+        ];
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        const pinnedHeading = screen.getByRole('heading', { name: 'Pinned chats', level: 3 });
+        expect(pinnedHeading).toHaveAttribute('id', 'chatbot-nav-group-pinned-label');
+        expect(pinnedHeading.closest('section')).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-pinned-label');
+        expect(screen.getByRole('menu', { name: 'Pinned chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-pinned-label');
+        expect(document.querySelector('ul.pf-v6-c-menu__list[aria-labelledby="chatbot-nav-group-pinned-label"]')).toBeTruthy();
+        const chatsToggle = screen.getByRole('button', { name: 'Chats' });
+        expect(chatsToggle).toHaveAttribute('id', 'chatbot-nav-group-chats-toggle');
+        expect(screen.getByRole('menu', { name: 'Chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-chats-toggle');
+        expect(document.querySelector('ul.pf-v6-c-menu__list[aria-labelledby="chatbot-nav-group-chats-toggle"]')).toBeTruthy();
+    });
+    it('labels grouped object conversations on the menu list element', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations } }));
+        expect(document.querySelector('ul.pf-v6-c-menu__list')).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-Today-label');
+    });
+    it('labels each menu list in a shared static menu with its group title id', () => {
+        const groups = [
+            {
+                id: 'pinned',
+                label: 'Pinned chats',
+                items: initialConversations
+            },
+            {
+                id: 'recent',
+                label: 'Recent chats',
+                items: [{ id: '2', text: 'Chatbot extension' }]
+            }
+        ];
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        expect(screen.getByRole('menu', { name: 'Pinned chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-pinned-label');
+        expect(screen.getByRole('menu', { name: 'Recent chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-recent-label');
+    });
+    it('does not autofocus the first menu item when an expandable group is expanded', () => __awaiter(void 0, void 0, void 0, function* () {
+        const ExpandableGroupDemo = () => {
+            const [isExpanded, setIsExpanded] = useState(false);
+            return (_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                    {
+                        id: 'saved-prompts',
+                        label: 'Saved prompts',
+                        expandable: {
+                            isExpanded,
+                            onToggle: setIsExpanded
+                        },
+                        items: [
+                            { id: '7', text: 'Summarize this document' },
+                            { id: '8', text: 'Draft a release announcement' }
+                        ]
+                    }
+                ] }));
+        };
+        render(_jsx(ExpandableGroupDemo, {}));
+        fireEvent.click(screen.getByRole('button', { name: 'Saved prompts' }));
+        yield waitFor(() => {
+            expect(screen.getByRole('menuitem', { name: 'Summarize this document' })).toBeInTheDocument();
+        });
+        expect(screen.getByRole('menuitem', { name: 'Summarize this document' })).not.toHaveFocus();
+    }));
+    it('does not render a collapsed expandable group menu', () => {
+        const groups = [
+            {
+                id: 'chats',
+                label: 'Chats',
+                items: [
+                    { id: '2', text: 'Chat two' },
+                    { id: '3', text: 'Chat three' }
+                ]
+            },
+            {
+                id: 'saved-prompts',
+                label: 'Saved prompts',
+                expandable: {
+                    isExpanded: false,
+                    onToggle: jest.fn()
+                },
+                items: [
+                    { id: '7', text: 'Summarize this document' },
+                    { id: '8', text: 'Draft a release announcement' }
+                ]
+            }
+        ];
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        // Collapsed expandable groups render their toggle outside the menu and omit the menu
+        // entirely until expanded, so their items are not part of arrow-key navigation.
+        expect(screen.getAllByRole('menu')).toHaveLength(1);
+        expect(screen.getByRole('menu', { name: 'Chats' })).toHaveAttribute('aria-labelledby', 'chatbot-nav-group-chats-label');
+        expect(screen.queryByRole('menuitem', { name: 'Summarize this document' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('menuitem', { name: 'Draft a release announcement' })).not.toBeInTheDocument();
+        const firstItem = screen.getByRole('menuitem', { name: 'Chat two' });
+        const lastItem = screen.getByRole('menuitem', { name: 'Chat three' });
+        lastItem.focus();
+        fireEvent.keyDown(lastItem, { key: 'ArrowDown' });
+        expect(firstItem).toHaveFocus();
+    });
+    it('collapses and expands a group when expandable.onToggle is called', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onToggle = jest.fn();
+        const groups = [
+            {
+                id: 'chats',
+                label: 'Chats',
+                expandable: {
+                    isExpanded: true,
+                    onToggle
+                },
+                items: [{ id: '2', text: 'Chatbot extension' }]
+            }
+        ];
+        const { rerender } = render(_jsx(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(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [
+                Object.assign(Object.assign({}, groups[0]), { expandable: {
+                        isExpanded: false,
+                        onToggle
+                    } })
+            ] }));
+        yield waitFor(() => {
+            expect(screen.queryByRole('menuitem', { name: /Chatbot extension/i })).not.toBeInTheDocument();
+        });
+    }));
+    it('renders custom menu items and footers supplied in ConversationGroup', () => {
+        const groups = [
+            {
+                id: 'chats',
+                label: 'Chats',
+                items: [
+                    initialConversations[0],
+                    _jsx(MenuItem, { itemId: "show-all", children: "Show all" }, "show-all")
+                ],
+                footer: _jsx("div", { "data-testid": "group-footer", children: "Footer content" })
+            }
+        ];
+        render(_jsx(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('moves focus to the first overflow item when show all is expanded', () => __awaiter(void 0, void 0, void 0, function* () {
+        const recentChats = [
+            { id: '2', text: 'Chat two' },
+            { id: '3', text: 'Chat three' },
+            { id: '4', text: 'Chat four' },
+            { id: '5', text: 'Chat five' },
+            { id: '6', text: 'Chat six' }
+        ];
+        const VISIBLE_CHAT_COUNT = 3;
+        const ShowAllDemo = () => {
+            const [isShowingAllChats, setIsShowingAllChats] = useState(false);
+            return (_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                    {
+                        id: 'chats',
+                        label: 'Chats',
+                        items: recentChats,
+                        showAll: {
+                            visibleCount: VISIBLE_CHAT_COUNT,
+                            isExpanded: isShowingAllChats,
+                            onToggle: setIsShowingAllChats
+                        }
+                    }
+                ] }));
+        };
+        render(_jsx(ShowAllDemo, {}));
+        fireEvent.click(screen.getByRole('menuitem', { name: /Show all/i }));
+        yield waitFor(() => {
+            expect(screen.getByRole('menuitem', { name: 'Chat five' })).toHaveFocus();
+        });
+    }));
+    it('keeps focus on the toggle when show all is collapsed', () => __awaiter(void 0, void 0, void 0, function* () {
+        const recentChats = [
+            { id: '2', text: 'Chat two' },
+            { id: '3', text: 'Chat three' },
+            { id: '4', text: 'Chat four' },
+            { id: '5', text: 'Chat five' }
+        ];
+        const ShowAllDemo = () => {
+            const [isShowingAllChats, setIsShowingAllChats] = useState(true);
+            return (_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                    {
+                        id: 'chats',
+                        label: 'Chats',
+                        items: recentChats,
+                        showAll: {
+                            visibleCount: 2,
+                            isExpanded: isShowingAllChats,
+                            onToggle: setIsShowingAllChats
+                        }
+                    }
+                ] }));
+        };
+        render(_jsx(ShowAllDemo, {}));
+        fireEvent.click(screen.getByRole('menuitem', { name: 'Show less' }));
+        yield waitFor(() => {
+            expect(screen.getByRole('menuitem', { name: /Show all/i })).toHaveFocus();
+        });
+    }));
+    it('renders overflow items above the show all toggle so it stays in a fixed position', () => {
+        const recentChats = [
+            { id: '2', text: 'Chat two' },
+            { id: '3', text: 'Chat three' },
+            { id: '4', text: 'Chat four' }
+        ];
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                {
+                    id: 'chats',
+                    label: 'Chats',
+                    items: recentChats,
+                    showAll: {
+                        visibleCount: 1,
+                        isExpanded: true,
+                        onToggle: jest.fn()
+                    }
+                }
+            ] }));
+        const overflowItem = screen.getByRole('menuitem', { name: 'Chat four' });
+        const toggle = screen.getByRole('menuitem', { name: 'Show less' });
+        const isToggleAfterOverflowItem = Boolean(
+        // eslint-disable-next-line no-bitwise
+        overflowItem.compareDocumentPosition(toggle) & Node.DOCUMENT_POSITION_FOLLOWING);
+        expect(isToggleAfterOverflowItem).toBe(true);
+    });
+    it('allows arrow key navigation to flow through the show all toggle like any other menu item', () => __awaiter(void 0, void 0, void 0, function* () {
+        const recentChats = [
+            { id: '2', text: 'Chat two' },
+            { id: '3', text: 'Chat three' },
+            { id: '4', text: 'Chat four' }
+        ];
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.embedded, setIsDrawerOpen: jest.fn(), conversations: [
+                {
+                    id: 'chats',
+                    label: 'Chats',
+                    items: recentChats,
+                    showAll: {
+                        visibleCount: 2,
+                        isExpanded: false,
+                        onToggle: jest.fn()
+                    }
+                }
+            ] }));
+        const lastVisibleItem = screen.getByRole('menuitem', { name: 'Chat three' });
+        const toggle = screen.getByRole('menuitem', { name: /Show all/i });
+        lastVisibleItem.focus();
+        fireEvent.keyDown(lastVisibleItem, { key: 'ArrowDown' });
+        yield waitFor(() => {
+            expect(toggle).toHaveFocus();
+        });
+        fireEvent.keyDown(toggle, { key: 'ArrowUp' });
+        yield waitFor(() => {
+            expect(lastVisibleItem).toHaveFocus();
+        });
+    }));
+    it('preserves custom menu item identity when preceding items change', () => {
+        const renderShowAll = () => (_jsx(MenuItem, { itemId: "show-all-chats", children: "Show all" }, "show-all-chats"));
+        const { rerender } = render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [
+                {
+                    id: 'chats',
+                    label: 'Chats',
+                    items: [initialConversations[0], renderShowAll()]
+                }
+            ] }));
+        const showAllBefore = screen.getByRole('menuitem', { name: 'Show all' });
+        rerender(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [
+                {
+                    id: 'chats',
+                    label: 'Chats',
+                    items: [initialConversations[0], initialConversations[1], initialConversations[2], renderShowAll()]
+                }
+            ] }));
+        expect(screen.getByRole('menuitem', { name: 'Show all' })).toBe(showAllBefore);
+    });
+    it('passes expandableSectionProps from expandable ConversationGroup', () => {
+        const groups = [
+            {
+                id: 'saved',
+                label: 'Saved prompts',
+                expandable: {
+                    isExpanded: true,
+                    onToggle: jest.fn(),
+                    expandableSectionProps: { className: 'test-expandable-section' }
+                },
+                items: initialConversations
+            }
+        ];
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: groups }));
+        expect(document.querySelector('.test-expandable-section')).toBeInTheDocument();
+    });
 });

package/dist/esm/MessageBox/MessageBox.d.ts

@@ -27,6 +27,8 @@ export interface MessageBoxProps extends HTMLProps<HTMLDivElement> {
     jumpButtonTopTooltipProps?: TooltipProps;
     /** Props passed to top jump button tooltip */
     jumpButtonBottomTooltipProps?: TooltipProps;
+    /** Whether scrollbar is on the page or message box in embedded mode */
+    hasOuterScrollbar?: boolean;
 }
 export interface MessageBoxHandle extends HTMLDivElement {
     /** Scrolls to the top of the message box */

package/dist/esm/MessageBox/MessageBox.js

@@ -16,6 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useRef, useCallback, useLayoutEffect, forwardRef, useImperativeHandle } from 'react';
 import JumpButton from './JumpButton';
 import { getResizeObserver } from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
 const SCROLL_EDGE_DELTA = 100;
 const getScrollMetrics = (element) => {
     const { scrollTop, scrollHeight, clientHeight } = element;
@@ -40,7 +41,7 @@ const shouldFollowContentGrowth = (metrics, enableSmartScroll, autoScroll, pause
     metrics.nearBottom ||
     (enableSmartScroll && autoScroll && !pauseAutoScroll && metrics.roundedScrollTop > 0);
 export const MessageBox = forwardRef((_a, ref) => {
-    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false, jumpButtonTopProps, jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll", "jumpButtonTopProps", "jumpButtonBottomProps", "jumpButtonBottomTooltipProps", "jumpButtonTopTooltipProps"]);
+    var { announcement, ariaLabel = 'Scrollable message log', children, className, position = 'top', onScrollToTopClick, onScrollToBottomClick, enableSmartScroll = false, jumpButtonTopProps, jumpButtonBottomProps, jumpButtonBottomTooltipProps, jumpButtonTopTooltipProps, hasOuterScrollbar = false } = _a, props = __rest(_a, ["announcement", "ariaLabel", "children", "className", "position", "onScrollToTopClick", "onScrollToBottomClick", "enableSmartScroll", "jumpButtonTopProps", "jumpButtonBottomProps", "jumpButtonBottomTooltipProps", "jumpButtonTopTooltipProps", "hasOuterScrollbar"]);
     const [atTop, setAtTop] = useState(true);
     const [atBottom, setAtBottom] = useState(false);
     const [isOverflowing, setIsOverflowing] = useState(false);
@@ -251,6 +252,6 @@ export const MessageBox = forwardRef((_a, ref) => {
         onTouchMove,
         onTouchEnd
     };
-    return (_jsxs(_Fragment, { children: [_jsx(JumpButton, { position: "top", isHidden: !hasMeasuredScroll || (isOverflowing && atTop), onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), _jsx(JumpButton, { position: "bottom", isHidden: !hasMeasuredScroll || (isOverflowing && atBottom), onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps }), _jsxs("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, _jsx("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(JumpButton, { position: "top", isHidden: !hasMeasuredScroll || (isOverflowing && atTop), onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), _jsx(JumpButton, { position: "bottom", isHidden: !hasMeasuredScroll || (isOverflowing && atBottom), onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps }), _jsxs("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: css('pf-chatbot__messagebox', position === 'bottom' && 'pf-chatbot__messagebox--bottom', hasOuterScrollbar && 'pf-chatbot__messagebox--outer-scroll', className), ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, _jsx("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] }))] }));
 });
 export default MessageBox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.8.0-prerelease.7",
+  "version": "6.8.0-prerelease.8",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithExpandableGroups.tsx

@@ -0,0 +1,104 @@
+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 ChatbotHeaderDrawerWithExpandableGroupsDemo: 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,
+        label: isShowingAllChats ? 'Show less' : 'Show all'
+      }
+    },
+    {
+      id: 'saved-prompts',
+      label: 'Saved prompts',
+      expandable: {
+        isExpanded: isSavedPromptsExpanded,
+        onToggle: setIsSavedPromptsExpanded
+      },
+      items: savedPrompts
+    }
+  ];
+
+  return (
+    <>
+      <Checkbox
+        label="Display drawer"
+        isChecked={isOpen}
+        onChange={() => setIsOpen(!isOpen)}
+        id="expandable-groups-drawer-visible"
+        name="expandable-groups-drawer-visible"
+      />
+      <ChatbotConversationHistoryNav
+        displayMode={ChatbotDisplayMode.embedded}
+        onDrawerToggle={() => setIsOpen(!isOpen)}
+        isDrawerOpen={isOpen}
+        setIsDrawerOpen={setIsOpen}
+        conversations={conversations}
+        drawerContent={<div>Drawer content</div>}
+      />
+    </>
+  );
+};

package/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 expandable 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 `expandable` 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="./ChatbotHeaderDrawerWithExpandableGroups.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:

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -60,12 +60,8 @@
     --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--expandable .pf-chatbot__menu-group-toggle {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
@@ -73,6 +69,46 @@
     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--expandable .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--xs);
+    padding-block-end: var(--pf-t--global--spacer--xs);
+  }
+
+  .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--expandable .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--BorderRadius: var(--pf-t--global--border--radius--small);
+      --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 +122,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;