@patternfly/chatbot 6.4.0-prerelease.14 → 6.4.0-prerelease.16

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

@@ -17,11 +17,11 @@ describe('ChatbotConversationHistoryDropdown', () => {
     const menuItems = (_jsxs(_Fragment, { children: [_jsx(DropdownItem, { children: "Rename" }), _jsx(DropdownItem, { children: "Delete" })] }));
     it('should render the dropdown', () => {
         render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, menuClassName: "custom-class" }));
-        expect(screen.queryByRole('button', { name: /Conversation options/i })).toBeInTheDocument();
+        expect(screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
     });
     it('should display the dropdown menuItems', () => {
         render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems }));
-        const toggle = screen.queryByRole('button', { name: /Conversation options/i });
+        const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         expect(toggle).toBeInTheDocument();
         fireEvent.click(toggle);
         waitFor(() => {
@@ -31,14 +31,14 @@ describe('ChatbotConversationHistoryDropdown', () => {
     });
     it('should invoke onSelect callback when menuitem is clicked', () => {
         render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
-        const toggle = screen.queryByRole('button', { name: /Conversation options/i });
+        const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         fireEvent.click(toggle);
         fireEvent.click(screen.getByText('Rename'));
         expect(onSelect).toHaveBeenCalled();
     });
     it('should toggle the dropdown when menuitem is clicked', () => {
         render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
-        const toggle = screen.queryByRole('button', { name: /Conversation options/i });
+        const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         fireEvent.click(toggle);
         fireEvent.click(screen.getByText('Delete'));
         expect(onSelect).toHaveBeenCalled();
@@ -46,7 +46,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
     });
     it('should close the dropdown when user clicks outside', () => {
         render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, onSelect: onSelect }));
-        const toggle = screen.queryByRole('button', { name: /Conversation options/i });
+        const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i });
         fireEvent.click(toggle);
         expect(screen.queryByText('Delete')).toBeInTheDocument();
         fireEvent.click(toggle.parentElement);
@@ -54,7 +54,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
     });
     it('should show the tooltip when the user hovers over the toggle button', () => __awaiter(void 0, void 0, void 0, function* () {
         render(_jsx(ChatbotConversationHistoryDropdown, { menuItems: menuItems, label: "Actions dropdown" }));
-        const toggle = screen.queryByRole('button', { name: /Actions dropdown/i });
+        const toggle = screen.queryByRole('menuitem', { name: /Actions dropdown/i });
         fireEvent(toggle, new MouseEvent('mouseenter', {
             bubbles: false,
             cancelable: false

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.d.ts

@@ -1,6 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { ButtonProps, DrawerProps, ListItemProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, MenuProps, // Remove in next breaking change
-TitleProps, ListProps, SearchInputProps } from '@patternfly/react-core';
+import { ButtonProps, DrawerProps, DrawerPanelContentProps, DrawerContentProps, DrawerContentBodyProps, DrawerHeadProps, DrawerActionsProps, DrawerCloseButtonProps, DrawerPanelBodyProps, SkeletonProps, MenuProps, TitleProps, MenuListProps, SearchInputProps, MenuItemProps, MenuGroupProps, MenuContentProps } from '@patternfly/react-core';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import { HistoryEmptyStateProps } from './EmptyState';
 export interface Conversation {
@@ -20,10 +19,8 @@ export interface Conversation {
     label?: string;
     /** Callback for when user selects item. */
     onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
-    /** Additional props passed to conversation button item */
-    additionalProps?: ButtonProps;
-    /** Additional props passed to conversation list item */
-    listItemProps?: Omit<ListItemProps, 'children'>;
+    /** Additional props passed to menu item */
+    additionalProps?: MenuItemProps;
     /** Custom dropdown ID to ensure uniqueness across demo instances */
     dropdownId?: string;
 }
@@ -43,11 +40,13 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     };
     /** Additional button props for new chat button. */
     newChatButtonProps?: ButtonProps;
-    /** Additional props applied to all conversation list headers */
-    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;
+    /** Additional props applied to conversation menu group. If conversations is an object, you should pass an object of MenuGroupProps for each group. */
+    menuGroupProps?: MenuGroupProps | {
+        [key: string]: MenuGroupProps;
+    };
+    /** Additional props applied to conversation list. If conversations is an object, you should pass an object of MenuListProps for each group. */
+    menuListProps?: Omit<MenuListProps, 'children'> | {
+        [key: string]: Omit<MenuListProps, 'children'>;
     };
     /** Text shown in blue button */
     newChatButtonText?: string;
@@ -69,7 +68,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     reverseButtonOrder?: boolean;
     /** Custom test id for the drawer actions */
     drawerActionsTestId?: string;
-    /** @deprecated Additional props applied to list container  */
+    /** Additional props applied to menu  */
     menuProps?: MenuProps;
     /** Additional props applied to panel */
     drawerPanelContentProps?: DrawerPanelContentProps;
@@ -105,6 +104,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
     navTitleProps?: Partial<TitleProps>;
     /** Visually hidden text that gets announced by assistive technologies. Should be used to convey the result count when the search input value changes. */
     searchInputScreenReaderText?: string;
+    /** Additional props passed to MenuContent */
+    menuContentProps?: Omit<MenuContentProps, 'ref'>;
 }
 export declare const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps>;
 export default ChatbotConversationHistoryNav;

package/dist/esm/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.js

@@ -12,28 +12,40 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, Fragment } from 'react';
 // Import PatternFly components
-import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, SearchInput, List, ListItem, Title, Icon } from '@patternfly/react-core';
+import { Button, Drawer, DrawerPanelContent, DrawerContent, DrawerPanelBody, DrawerHead, DrawerActions, DrawerCloseButton, DrawerContentBody, SearchInput, Title, Icon, MenuList, MenuGroup, MenuItem, Menu, MenuContent } from '@patternfly/react-core';
 import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
 import HistoryEmptyState from './EmptyState';
 export const ChatbotConversationHistoryNav = (_a) => {
-    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, listTitleProps, listProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Search previous conversations', searchInputProps, handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = _jsx(OutlinedClockIcon, {}), searchInputScreenReaderText } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "listTitleProps", "listProps", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "searchInputProps", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText"]);
+    var { onDrawerToggle, isDrawerOpen, setIsDrawerOpen, activeItemId, onSelectActiveItem, conversations, menuListProps, newChatButtonText = 'New chat', drawerContent, onNewChat, newChatButtonProps, searchInputPlaceholder = 'Search previous conversations...', searchInputAriaLabel = 'Search previous conversations', searchInputProps, handleTextInputChange, displayMode, reverseButtonOrder = false, drawerActionsTestId = 'chatbot-nav-drawer-actions', drawerPanelContentProps, drawerContentProps, drawerContentBodyProps, drawerHeadProps, drawerActionsProps, drawerCloseButtonProps, drawerPanelBodyProps, isLoading, loadingState, errorState, emptyState, noResultsState, isCompact, title = 'Chat history', navTitleProps, navTitleIcon = _jsx(OutlinedClockIcon, {}), searchInputScreenReaderText, menuProps, menuGroupProps, menuContentProps } = _a, props = __rest(_a, ["onDrawerToggle", "isDrawerOpen", "setIsDrawerOpen", "activeItemId", "onSelectActiveItem", "conversations", "menuListProps", "newChatButtonText", "drawerContent", "onNewChat", "newChatButtonProps", "searchInputPlaceholder", "searchInputAriaLabel", "searchInputProps", "handleTextInputChange", "displayMode", "reverseButtonOrder", "drawerActionsTestId", "drawerPanelContentProps", "drawerContentProps", "drawerContentBodyProps", "drawerHeadProps", "drawerActionsProps", "drawerCloseButtonProps", "drawerPanelBodyProps", "isLoading", "loadingState", "errorState", "emptyState", "noResultsState", "isCompact", "title", "navTitleProps", "navTitleIcon", "searchInputScreenReaderText", "menuProps", "menuGroupProps", "menuContentProps"]);
     const drawerRef = useRef(null);
     const onExpand = () => {
         drawerRef.current && drawerRef.current.focus();
     };
+    const isConversation = (item) => item && typeof item === 'object' && 'id' in item && 'text' in item;
     const getNavItem = (conversation) => {
         var _a;
-        return (_jsx(ListItem, Object.assign({ className: `pf-chatbot__conversation-list-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__conversation-list-item--active' : ''}` }, conversation.listItemProps, { children: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ className: "pf-chatbot__conversation-history-item", variant: "link" }, conversation.additionalProps, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : _jsx(OutlinedCommentAltIcon, {}) }), { onClick: (event) => onSelectActiveItem === null || onSelectActiveItem === void 0 ? void 0 : onSelectActiveItem(event, conversation.id), children: conversation.text })), conversation.menuItems && (_jsx(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label, id: conversation.dropdownId }))] }) }), conversation.id));
+        return (_jsx(MenuItem, Object.assign({ className: `pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`, itemId: conversation.id }, (conversation.noIcon ? {} : { icon: (_a = conversation.icon) !== null && _a !== void 0 ? _a : _jsx(OutlinedCommentAltIcon, {}) }), (conversation.menuItems
+            ? {
+                actions: (_jsx(ConversationHistoryDropdown, { menuClassName: conversation.menuClassName, onSelect: conversation.onSelect, menuItems: conversation.menuItems, label: conversation.label }))
+            }
+            : {}), conversation.additionalProps, { children: conversation.text })));
     };
     const buildConversations = () => {
         if (Array.isArray(conversations)) {
-            return (_jsx(List, Object.assign({ className: "pf-chatbot__conversation-list", isPlain: true }, listProps, { children: conversations.map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) })));
+            return (_jsx(MenuList, Object.assign({}, menuListProps, { children: conversations.map((conversation) => {
+                    if (isConversation(conversation)) {
+                        return _jsx(Fragment, { children: getNavItem(conversation) }, conversation.id);
+                    }
+                    else {
+                        return conversation;
+                    }
+                }) })));
         }
         else {
-            return (_jsx("div", { children: Object.keys(conversations).map((navGroup) => (_jsxs("section", { children: [_jsx(Title, Object.assign({ headingLevel: "h4", className: "pf-chatbot__conversation-list-header" }, listTitleProps, { children: navGroup })), _jsx(List, Object.assign({ className: "pf-chatbot__conversation-list", isPlain: true }, listProps === null || listProps === void 0 ? void 0 : listProps[navGroup], { children: conversations[navGroup].map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) }))] }, navGroup))) }));
+            return (_jsx(_Fragment, { children: Object.keys(conversations).map((navGroup) => (_jsx(MenuGroup, Object.assign({ className: "pf-chatbot__menu-item-header", label: navGroup, labelHeadingLevel: "h3" }, menuGroupProps === null || menuGroupProps === void 0 ? void 0 : menuGroupProps[navGroup], { children: _jsx(MenuList, Object.assign({}, menuListProps === null || menuListProps === void 0 ? void 0 : menuListProps[navGroup], { children: conversations[navGroup].map((conversation) => (_jsx(Fragment, { children: getNavItem(conversation) }, conversation.id))) })) }), navGroup))) }));
         }
     };
     // Menu Content
@@ -49,7 +61,7 @@ export const ChatbotConversationHistoryNav = (_a) => {
         if (noResultsState) {
             return _jsx(HistoryEmptyState, Object.assign({}, noResultsState));
         }
-        return _jsx(_Fragment, { children: buildConversations() });
+        return (_jsx(Menu, Object.assign({ isPlain: true, onSelect: onSelectActiveItem, activeItemId: activeItemId }, menuProps, { children: _jsx(MenuContent, Object.assign({}, menuContentProps, { children: buildConversations() })) })));
     };
     const renderDrawerContent = () => (_jsx(_Fragment, { children: _jsx(DrawerPanelBody, Object.assign({}, drawerPanelBodyProps, { children: renderMenuContent() })) }));
     const renderPanelContent = () => {

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

@@ -193,26 +193,30 @@ describe('ChatbotConversationHistoryNav', () => {
         const iconElement = container.querySelector('.pf-chatbot__title-icon');
         expect(iconElement).toBeInTheDocument();
     });
-    it('Passes listTitleProps to Title', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { className: 'test' } }));
-        expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
-    });
-    it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listTitleProps: { headingLevel: 'h2' } }));
-        expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
-        expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
-    });
-    it('Passes listProps to List when conversations is an array', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, listProps: { className: 'test' } }));
-        expect(screen.getByRole('list')).toHaveClass('test');
-    });
-    it('Passes listProps to List when conversations is an object', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, listProps: { Today: { className: 'test' } } }));
-        expect(screen.getByRole('list')).toHaveClass('test');
-    });
-    it('Passes listItemProps to ListItem', () => {
-        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }] }));
-        expect(screen.getByRole('listitem')).toHaveClass('test');
+    it('Passes menuProps to Menu', () => {
+        var _a;
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuProps: { className: 'test' } }));
+        expect((_a = screen.getByRole('menu').parentElement) === null || _a === void 0 ? void 0 : _a.parentElement).toHaveClass('test');
+    });
+    it('Passes menuContentProps to MenuContent', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuContentProps: { className: 'test' } }));
+        expect(screen.getByRole('menu').parentElement).toHaveClass('test');
+    });
+    it('Passes menuListProps to MenuList when conversations is an array', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, menuListProps: { className: 'test' } }));
+        expect(screen.getByRole('menu')).toHaveClass('test');
+    });
+    it('Passes menuListProps to MenuList when conversations is an object', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuListProps: { Today: { className: 'test' } } }));
+        expect(screen.getByRole('menu')).toHaveClass('test');
+    });
+    it('Passes menuGroupProps to MenuGroup when conversations is an object', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: { Today: initialConversations }, menuGroupProps: { Today: { className: 'test' } } }));
+        expect(screen.getByRole('menu').parentElement).toHaveClass('test');
+    });
+    it('Passes additionalProps to MenuItem', () => {
+        render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: [{ id: '1', text: 'ChatBot documentation', additionalProps: { className: 'test' } }] }));
+        expect(screen.getByRole('menuitem')).toHaveClass('test');
     });
     it('should be able to spread search input props when searchInputProps is passed', () => {
         render(_jsx(ChatbotConversationHistoryNav, { onDrawerToggle: onDrawerToggle, isDrawerOpen: true, displayMode: ChatbotDisplayMode.fullscreen, setIsDrawerOpen: jest.fn(), conversations: initialConversations, handleTextInputChange: jest.fn(), searchInputProps: { value: 'I am a sample search' } }));

package/dist/esm/SourcesCard/SourcesCard.d.ts

@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import { ButtonProps, CardProps } from '@patternfly/react-core';
+import { ButtonProps, CardBodyProps, CardFooterProps, CardProps, CardTitleProps, TruncateProps } from '@patternfly/react-core';
 export interface SourcesCardProps extends CardProps {
     /** Additional classes for the pagination navigation container. */
     className?: string;
@@ -13,6 +13,8 @@ export interface SourcesCardProps extends CardProps {
     sources: {
         /** Title of sources card */
         title?: string;
+        /** Subtitle of sources card */
+        subtitle?: string;
         /** Link to source */
         link: string;
         /** Body of sources card */
@@ -25,6 +27,10 @@ export interface SourcesCardProps extends CardProps {
         onClick?: React.MouseEventHandler<HTMLButtonElement>;
         /** Any additional props applied to the title of the Sources card  */
         titleProps?: ButtonProps;
+        /** Custom footer applied to the Sources card */
+        footer?: React.ReactNode;
+        /** Additional props passed to Truncate component */
+        truncateProps?: TruncateProps;
     }[];
     /** Label for the English word "source" */
     sourceWord?: string;
@@ -44,6 +50,12 @@ export interface SourcesCardProps extends CardProps {
     showMoreWords?: string;
     /** Label for English words "show less" */
     showLessWords?: string;
+    /** Additional props passed to card title */
+    cardTitleProps?: CardTitleProps;
+    /** Additional props passed to card body */
+    cardBodyProps?: CardBodyProps;
+    /** Additional props passed to card footer */
+    cardFooterProps?: CardFooterProps;
 }
 declare const SourcesCard: FunctionComponent<SourcesCardProps>;
 export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.js

@@ -16,7 +16,7 @@ import { Button, ButtonVariant, Card, CardBody, CardFooter, CardTitle, Expandabl
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 const SourcesCard = (_a) => {
     var _b;
-    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact"]);
+    var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less', isCompact, cardTitleProps, cardBodyProps, cardFooterProps } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords", "isCompact", "cardTitleProps", "cardBodyProps", "cardFooterProps"]);
     const [page, setPage] = useState(1);
     const [isExpanded, setIsExpanded] = useState(false);
     const onToggle = (_event, isExpanded) => {
@@ -26,15 +26,15 @@ const SourcesCard = (_a) => {
         setPage(newPage);
         onSetPage && onSetPage(_evt, newPage);
     };
-    const renderTitle = (title) => {
+    const renderTitle = (title, truncateProps) => {
         if (title) {
-            return _jsx(Truncate, { content: title });
+            return _jsx(Truncate, Object.assign({ content: title }, truncateProps));
         }
         return `Source ${page}`;
     };
-    return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, { className: "pf-chatbot__sources-card-title", children: _jsx(Button, Object.assign({ component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title) })) }), sources[page - 1].body && (_jsx(CardBody, { className: `pf-chatbot__sources-card-body`, children: sources[page - 1].hasShowMore ? (
+    return (_jsxs("div", { className: "pf-chatbot__source", children: [_jsx("span", { children: pluralize(sources.length, sourceWord, sourceWordPlural) }), _jsxs(Card, Object.assign({ isCompact: isCompact, className: "pf-chatbot__sources-card" }, props, { children: [_jsx(CardTitle, Object.assign({ className: "pf-chatbot__sources-card-title" }, cardTitleProps, { children: _jsxs("div", { className: "pf-chatbot__sources-card-title-container", children: [_jsx(Button, Object.assign({ component: "a", variant: ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? _jsx(ExternalLinkSquareAltIcon, {}) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined, onClick: (_b = sources[page - 1].onClick) !== null && _b !== void 0 ? _b : undefined }, sources[page - 1].titleProps, { children: renderTitle(sources[page - 1].title, sources[page - 1].truncateProps) })), sources[page - 1].subtitle && (_jsx("span", { className: "pf-chatbot__sources-card-subtitle", children: sources[page - 1].subtitle }))] }) })), sources[page - 1].body && (_jsx(CardBody, Object.assign({ className: `pf-chatbot__sources-card-body ${sources[page - 1].footer ? 'pf-chatbot__compact-sources-card-body' : undefined}` }, cardBodyProps, { children: sources[page - 1].hasShowMore ? (
                         // prevents extra VO announcements of button text - parent Message has aria-live
-                        _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) })), sources.length > 1 && (_jsx(CardFooter, { className: "pf-chatbot__sources-card-footer-container", children: _jsx("div", { className: "pf-chatbot__sources-card-footer", children: _jsxs("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [_jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
+                        _jsx("div", { "aria-live": "off", children: _jsx(ExpandableSection, { variant: ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2, children: sources[page - 1].body }) })) : (_jsx("div", { className: "pf-chatbot__sources-card-body-text", children: sources[page - 1].body })) }))), sources[page - 1].footer ? (_jsx(CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer" }, cardFooterProps, { children: sources[page - 1].footer }))) : (sources.length > 1 && (_jsx(CardFooter, Object.assign({ className: "pf-chatbot__sources-card-footer-container" }, cardFooterProps, { children: _jsx("div", { className: "pf-chatbot__sources-card-footer", children: _jsxs("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel, children: [_jsx(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled || page === 1, "data-action": "previous", onClick: (event) => {
                                             const newPage = page >= 1 ? page - 1 : 1;
                                             onPreviousClick && onPreviousClick(event, newPage);
                                             handleNewPage(event, newPage);
@@ -42,6 +42,6 @@ const SourcesCard = (_a) => {
                                             const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
                                             onNextClick && onNextClick(event, newPage);
                                             handleNewPage(event, newPage);
-                                        }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))] }))] }));
+                                        }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" }) }) }) })] }) }) }))))] }))] }));
 };
 export default SourcesCard;

package/dist/esm/SourcesCard/SourcesCard.test.js

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
@@ -179,4 +179,53 @@ describe('SourcesCard', () => {
         render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', titleProps: { className: 'test' } }] }));
         expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
     });
+    it('should apply cardTitleProps appropriately', () => {
+        render(_jsx(SourcesCard, { cardTitleProps: { 'data-testid': 'card-title', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '' }] }));
+        expect(screen.getByTestId('card-title')).toHaveClass('test');
+    });
+    it('should apply cardBodyProps appropriately', () => {
+        render(_jsx(SourcesCard, { cardBodyProps: { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', body: 'To make an apple pie, you must first...' }] }));
+        expect(screen.getByTestId('card-body')).toHaveClass('test');
+    });
+    it('should apply cardFooterProps appropriately', () => {
+        render(_jsx(SourcesCard, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [
+                { title: 'How to make an apple pie', link: '' },
+                { title: 'How to make cookies', link: '' }
+            ] }));
+        expect(screen.getByTestId('card-footer')).toHaveClass('test');
+    });
+    it('should apply truncateProps appropriately', () => {
+        render(_jsx(SourcesCard, { sources: [
+                {
+                    title: 'How to make an apple pie',
+                    link: '',
+                    truncateProps: { 'data-testid': 'card-truncate', className: 'test' }
+                }
+            ] }));
+        expect(screen.getByTestId('card-truncate')).toHaveClass('test');
+    });
+    it('should apply custom footer appropriately when there is one source', () => {
+        render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', footer: _jsx(_Fragment, { children: "I am a custom footer" }) }] }));
+        expect(screen.getByText('I am a custom footer'));
+        expect(screen.queryByText('1/1')).toBeFalsy();
+    });
+    it('should apply custom footer appropriately when are multiple sources', () => {
+        render(_jsx(SourcesCard, { sources: [
+                { title: 'How to make an apple pie', link: '', footer: _jsx(_Fragment, { children: "I am a custom footer" }) },
+                { title: 'How to bake bread', link: '' }
+            ] }));
+        expect(screen.getByText('I am a custom footer'));
+        // does not show navigation bar
+        expect(screen.queryByText('1/2')).toBeFalsy();
+    });
+    it('should apply footer props to custom footer appropriately', () => {
+        render(_jsx(SourcesCard, { cardFooterProps: { 'data-testid': 'card-footer', className: 'test' }, sources: [{ title: 'How to make an apple pie', link: '', footer: _jsx(_Fragment, { children: "I am a custom footer" }) }] }));
+        expect(screen.getByText('I am a custom footer'));
+        expect(screen.getByTestId('card-footer')).toHaveClass('test');
+    });
+    it('should apply subtitle appropriately', () => {
+        render(_jsx(SourcesCard, { sources: [{ title: 'How to make an apple pie', link: '', subtitle: 'You must first create the universe' }] }));
+        expect(screen.getByText('How to make an apple pie'));
+        expect(screen.getByText('You must first create the universe'));
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.4.0-prerelease.14",
+  "version": "6.4.0-prerelease.16",
   "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",
@@ -53,7 +53,7 @@
     "react-dom": "^18 || ^19"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "6.16.0",
+    "@patternfly/documentation-framework": "6.19.0",
     "@patternfly/patternfly": "^6.1.0",
     "@patternfly/patternfly-a11y": "^5.0.0",
     "@types/dom-speech-recognition": "^0.0.4",

package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx

@@ -1,6 +1,8 @@
 import { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import patternflyAvatar from './patternfly_avatar.jpg';
+import { Button, Flex, FlexItem, Label, Popover } from '@patternfly/react-core';
+import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 
 export const MessageWithSourcesExample: FunctionComponent = () => {
   const onSetPage = (_event: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
@@ -8,8 +10,76 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
     console.log(`Page changed to ${newPage}`);
   };
 
+  const date = new Date();
+
+  const datePart = date.toLocaleDateString('en', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+
+  const timePart = date.toLocaleTimeString('en', {
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true
+  });
+
+  const formattedDate = `${datePart}, ${timePart}`;
+
   return (
     <>
+      <Message
+        name="Bot"
+        role="bot"
+        avatar={patternflyAvatar}
+        content="This example has a custom subtitle and footer with no pagination"
+        sources={{
+          sources: [
+            {
+              title: 'Getting started with Red Hat OpenShift',
+              subtitle: 'Red Hat knowledge base',
+              link: '#',
+              body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
+              isExternal: true,
+              footer: (
+                <Flex className="pf-chatbot__sources-card-subtle" gap={{ default: 'gapXs' }}>
+                  <FlexItem alignSelf={{ default: 'alignSelfStretch' }}>
+                    <Flex justifyContent={{ default: 'justifyContentSpaceBetween' }}>
+                      <FlexItem>
+                        <Label color="green">Confidence 93%</Label>
+                      </FlexItem>
+                      <FlexItem>
+                        <Popover
+                          headerContent={
+                            <Flex gap={{ default: 'gapXs' }}>
+                              <FlexItem>
+                                <OutlinedQuestionCircleIcon />
+                              </FlexItem>
+                              <FlexItem>Why this confidence score?</FlexItem>
+                            </Flex>
+                          }
+                          bodyContent={
+                            <>
+                              A high confidence score indicates a strong match. The system found significant overlap in
+                              key data points, including text content, names, dates, and organizational details, with a
+                              high degree of certainty. This match is highly reliable.
+                            </>
+                          }
+                        >
+                          <Button variant="link" icon={<OutlinedQuestionCircleIcon />}>
+                            Learn about this score
+                          </Button>
+                        </Popover>
+                      </FlexItem>
+                    </Flex>
+                  </FlexItem>
+                  <FlexItem>{`Last updated: ${formattedDate}`}</FlexItem>
+                </Flex>
+              )
+            }
+          ]
+        }}
+      />
       <Message
         name="Bot"
         role="bot"

package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md

@@ -34,7 +34,7 @@ import Message from '@patternfly/chatbot/dist/dynamic/Message';
 import MessageDivider from '@patternfly/chatbot/dist/dynamic/MessageDivider';
 import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle';
 import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard';
-import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, RedoIcon, RobotIcon } from '@patternfly/react-icons';
+import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon } from '@patternfly/react-icons';
 import patternflyAvatar from './patternfly_avatar.jpg';
 import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit';
 import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails';

package/patternfly-docs/patternfly-docs.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   sideNavItems: [{ section: 'PatternFly-AI' }],
   topNavItems: [],
-  hasDarkThemeSwitcher: true,
+  hasThemeSwitcher: true,
   hasRTLSwitcher: true,
   port: 8006
 };

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx

@@ -14,13 +14,13 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should render the dropdown', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} menuClassName="custom-class" />);
-    expect(screen.queryByRole('button', { name: /Conversation options/i })).toBeInTheDocument();
+    expect(screen.queryByRole('menuitem', { name: /Conversation options/i })).toBeInTheDocument();
   });
 
   it('should display the dropdown menuItems', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} />);
 
-    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
 
     expect(toggle).toBeInTheDocument();
     fireEvent.click(toggle);
@@ -33,7 +33,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should invoke onSelect callback when menuitem is clicked', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
-    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
     fireEvent.click(toggle);
     fireEvent.click(screen.getByText('Rename'));
 
@@ -42,7 +42,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should toggle the dropdown when menuitem is clicked', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
-    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
     fireEvent.click(toggle);
     fireEvent.click(screen.getByText('Delete'));
 
@@ -53,7 +53,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should close the dropdown when user clicks outside', () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} onSelect={onSelect} />);
-    const toggle = screen.queryByRole('button', { name: /Conversation options/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Conversation options/i })!;
     fireEvent.click(toggle);
 
     expect(screen.queryByText('Delete')).toBeInTheDocument();
@@ -64,7 +64,7 @@ describe('ChatbotConversationHistoryDropdown', () => {
 
   it('should show the tooltip when the user hovers over the toggle button', async () => {
     render(<ChatbotConversationHistoryDropdown menuItems={menuItems} label="Actions dropdown" />);
-    const toggle = screen.queryByRole('button', { name: /Actions dropdown/i })!;
+    const toggle = screen.queryByRole('menuitem', { name: /Actions dropdown/i })!;
 
     fireEvent(
       toggle,

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx

@@ -48,6 +48,7 @@ export const ChatbotConversationHistoryDropdown: FunctionComponent<ChatbotConver
         isExpanded={isOpen}
         onClick={() => setIsOpen(!isOpen)}
         id={id}
+        role="menuitem"
       >
         <EllipsisIcon />
       </MenuToggle>