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

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss

@@ -42,61 +42,53 @@
   }
   // Drawer menu
   // ----------------------------------------------------------------------------
-  .pf-chatbot__conversation-list {
-    --pf-v6-c-list--Gap: var(--pf-t--global--spacer--xs);
-
-    margin-block-start: var(--pf-t--global--spacer--md);
-    margin-block-end: var(--pf-t--global--spacer--md);
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--PaddingBlockStart: 0;
+    --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+    overflow: initial;
+    position: relative;
+  }
+  .pf-v6-c-menu__item-main {
+    --pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
   }
 
-  .pf-chatbot__conversation-list-header {
+  .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);
-    padding-inline-start: var(--pf-t--global--spacer--sm);
-    padding-inline-end: var(--pf-t--global--spacer--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);
     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__conversation-list-item {
-    & > span {
-      display: flex;
-      column-gap: var(--pf-t--global--spacer--sm);
-    }
-
-    & .pf-chatbot__conversation-history-item {
-      --pf-v6-c-button--JustifyContent: flex-start;
-      --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--lg);
-      --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--regular);
-      --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--regular);
-      --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--regular--hover);
-      --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--icon--color--regular);
-      --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--regular--clicked);
-      --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
 
-      column-gap: var(--pf-t--global--spacer--md);
-      flex-basis: 100%;
-
-      & .pf-v6-c-button__text {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
+  .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);
+    padding-block-start: var(--pf-t--global--spacer--xs);
+    padding-block-end: var(--pf-t--global--spacer--xs);
+    color: var(--pf-t--global--text--color--regular);
+    font-size: var(--pf-t--global--font--size--body--lg);
+    font-weight: var(--pf-t--global--font--weight--body--default);
+    border-radius: var(--pf-t--global--border--radius--small);
+  }
+  // allows focus state to have border radius
+  .pf-v6-c-menu__list-item.pf-chatbot__menu-item {
+    overflow: hidden;
   }
 
   .pf-chatbot__history-actions {
     transform: rotate(90deg);
   }
 
-  .pf-chatbot__conversation-list-item--active {
+  .pf-chatbot__menu-item--active {
     background-color: var(--pf-t--global--background--color--action--plain--clicked);
   }
 
-  button.pf-chatbot__conversation-list-item--active {
+  button.pf-chatbot__menu-item--active {
     background-color: initial;
   }
 }
@@ -259,8 +251,8 @@
     }
   }
 
-  .pf-chatbot__conversation-history-item {
-    --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--md);
+  .pf-chatbot__menu-item {
+    font-size: var(--pf-t--global--font--size--body--md);
   }
 
   .pf-v6-c-drawer__head {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx

@@ -492,36 +492,36 @@ describe('ChatbotConversationHistoryNav', () => {
     expect(iconElement).toBeInTheDocument();
   });
 
-  it('Passes listTitleProps to Title', () => {
+  it('Passes menuProps to Menu', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
-        conversations={{ Today: initialConversations }}
-        listTitleProps={{ className: 'test' }}
+        conversations={initialConversations}
+        menuProps={{ className: 'test' }}
       />
     );
-    expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test');
+
+    expect(screen.getByRole('menu').parentElement?.parentElement).toHaveClass('test');
   });
 
-  it('Overrides list title heading level when titleProps.headingLevel is passed', () => {
+  it('Passes menuContentProps to MenuContent', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
-        conversations={{ Today: initialConversations }}
-        listTitleProps={{ headingLevel: 'h2' }}
+        conversations={initialConversations}
+        menuContentProps={{ className: 'test' }}
       />
     );
-    expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument();
-    expect(screen.getByRole('heading', { name: /Today/i, level: 2 })).toBeInTheDocument();
+    expect(screen.getByRole('menu').parentElement).toHaveClass('test');
   });
 
-  it('Passes listProps to List when conversations is an array', () => {
+  it('Passes menuListProps to MenuList when conversations is an array', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
@@ -529,13 +529,27 @@ describe('ChatbotConversationHistoryNav', () => {
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
         conversations={initialConversations}
-        listProps={{ className: 'test' }}
+        menuListProps={{ className: 'test' }}
+      />
+    );
+    expect(screen.getByRole('menu')).toHaveClass('test');
+  });
+
+  it('Passes menuListProps to MenuList when conversations is an object', () => {
+    render(
+      <ChatbotConversationHistoryNav
+        onDrawerToggle={onDrawerToggle}
+        isDrawerOpen={true}
+        displayMode={ChatbotDisplayMode.fullscreen}
+        setIsDrawerOpen={jest.fn()}
+        conversations={{ Today: initialConversations }}
+        menuListProps={{ Today: { className: 'test' } }}
       />
     );
-    expect(screen.getByRole('list')).toHaveClass('test');
+    expect(screen.getByRole('menu')).toHaveClass('test');
   });
 
-  it('Passes listProps to List when conversations is an object', () => {
+  it('Passes menuGroupProps to MenuGroup when conversations is an object', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
@@ -543,23 +557,23 @@ describe('ChatbotConversationHistoryNav', () => {
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
         conversations={{ Today: initialConversations }}
-        listProps={{ Today: { className: 'test' } }}
+        menuGroupProps={{ Today: { className: 'test' } }}
       />
     );
-    expect(screen.getByRole('list')).toHaveClass('test');
+    expect(screen.getByRole('menu').parentElement).toHaveClass('test');
   });
 
-  it('Passes listItemProps to ListItem', () => {
+  it('Passes additionalProps to MenuItem', () => {
     render(
       <ChatbotConversationHistoryNav
         onDrawerToggle={onDrawerToggle}
         isDrawerOpen={true}
         displayMode={ChatbotDisplayMode.fullscreen}
         setIsDrawerOpen={jest.fn()}
-        conversations={[{ id: '1', text: 'ChatBot documentation', listItemProps: { className: 'test' } }]}
+        conversations={[{ id: '1', text: 'ChatBot documentation', additionalProps: { className: 'test' } }]}
       />
     );
-    expect(screen.getByRole('listitem')).toHaveClass('test');
+    expect(screen.getByRole('menuitem')).toHaveClass('test');
   });
 
   it('should be able to spread search input props when searchInputProps is passed', () => {

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -2,7 +2,6 @@
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
 import type { KeyboardEvent, FunctionComponent } from 'react';
-
 import { useRef, Fragment } from 'react';
 
 // Import PatternFly components
@@ -19,9 +18,6 @@ import {
   DrawerCloseButton,
   DrawerContentBody,
   SearchInput,
-  List,
-  ListItem,
-  ListItemProps,
   Title,
   DrawerPanelContentProps,
   DrawerContentProps,
@@ -32,10 +28,18 @@ import {
   DrawerPanelBodyProps,
   SkeletonProps,
   Icon,
-  MenuProps, // Remove in next breaking change
+  MenuProps,
   TitleProps,
-  ListProps,
-  SearchInputProps
+  MenuListProps,
+  SearchInputProps,
+  MenuList,
+  MenuGroup,
+  MenuItem,
+  Menu,
+  MenuContent,
+  MenuItemProps,
+  MenuGroupProps,
+  MenuContentProps
 } from '@patternfly/react-core';
 
 import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
@@ -61,10 +65,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;
 }
@@ -83,10 +85,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   conversations: Conversation[] | { [key: string]: Conversation[] };
   /** 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;
   /** Callback function for when blue button is clicked. Omit to hide blue "new chat button" */
@@ -107,7 +109,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;
@@ -143,6 +145,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 const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversationHistoryNavProps> = ({
@@ -152,8 +156,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   activeItemId,
   onSelectActiveItem,
   conversations,
-  listTitleProps,
-  listProps,
+  menuListProps,
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
@@ -182,6 +185,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   navTitleProps,
   navTitleIcon = <OutlinedClockIcon />,
   searchInputScreenReaderText,
+  menuProps,
+  menuGroupProps,
+  menuContentProps,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -190,61 +196,65 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     drawerRef.current && drawerRef.current.focus();
   };
 
+  const isConversation = (item: any): item is Conversation =>
+    item && typeof item === 'object' && 'id' in item && 'text' in item;
+
   const getNavItem = (conversation: Conversation) => (
-    <ListItem
-      className={`pf-chatbot__conversation-list-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__conversation-list-item--active' : ''}`}
-      key={conversation.id}
-      {...conversation.listItemProps}
-      /* eslint-enable indent */
+    <MenuItem
+      className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
+      itemId={conversation.id}
+      {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
+      /* eslint-disable indent */
+      {...(conversation.menuItems
+        ? {
+            actions: (
+              <ConversationHistoryDropdown
+                menuClassName={conversation.menuClassName}
+                onSelect={conversation.onSelect}
+                menuItems={conversation.menuItems}
+                label={conversation.label}
+              />
+            )
+          }
+        : {})}
+      {...conversation.additionalProps}
     >
-      <>
-        <Button
-          className="pf-chatbot__conversation-history-item"
-          variant="link"
-          {...conversation.additionalProps}
-          {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
-          onClick={(event) => onSelectActiveItem?.(event, conversation.id)}
-        >
-          {conversation.text}
-        </Button>
-        {conversation.menuItems && (
-          <ConversationHistoryDropdown
-            menuClassName={conversation.menuClassName}
-            onSelect={conversation.onSelect}
-            menuItems={conversation.menuItems}
-            label={conversation.label}
-            id={conversation.dropdownId}
-          />
-        )}
-      </>
-    </ListItem>
+      {conversation.text}
+    </MenuItem>
   );
 
   const buildConversations = () => {
     if (Array.isArray(conversations)) {
       return (
-        <List className="pf-chatbot__conversation-list" isPlain {...listProps}>
-          {conversations.map((conversation) => (
-            <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
-          ))}
-        </List>
+        <MenuList {...menuListProps}>
+          {conversations.map((conversation) => {
+            if (isConversation(conversation)) {
+              return <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>;
+            } else {
+              return conversation;
+            }
+          })}
+        </MenuList>
       );
     } else {
       return (
-        <div>
+        <>
           {Object.keys(conversations).map((navGroup) => (
-            <section key={navGroup}>
-              <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...listTitleProps}>
-                {navGroup}
-              </Title>
-              <List className="pf-chatbot__conversation-list" isPlain {...listProps?.[navGroup]}>
-                {conversations[navGroup].map((conversation) => (
+            <MenuGroup
+              className="pf-chatbot__menu-item-header"
+              label={navGroup}
+              key={navGroup}
+              labelHeadingLevel="h3"
+              {...menuGroupProps?.[navGroup]}
+            >
+              <MenuList {...menuListProps?.[navGroup]}>
+                {conversations[navGroup].map((conversation: Conversation) => (
                   <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
                 ))}
-              </List>
-            </section>
+              </MenuList>
+            </MenuGroup>
           ))}
-        </div>
+        </>
       );
     }
   };
@@ -264,7 +274,11 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     if (noResultsState) {
       return <HistoryEmptyState {...noResultsState} />;
     }
-    return <>{buildConversations()}</>;
+    return (
+      <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
+        <MenuContent {...menuContentProps}>{buildConversations()}</MenuContent>
+      </Menu>
+    );
   };
 
   const renderDrawerContent = () => (

package/src/SourcesCard/SourcesCard.scss

@@ -16,6 +16,17 @@
   box-shadow: var(--pf-t--global--box-shadow--sm);
 }
 
+.pf-chatbot__compact-sources-card-body {
+  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__sources-card-subtitle,
+.pf-chatbot__sources-card-subtle {
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+}
+
 .pf-chatbot__sources-card-body-text {
   display: block;
   display: -webkit-box;
@@ -27,6 +38,12 @@
   text-overflow: ellipsis;
 }
 
+.pf-chatbot__sources-card-title-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xs);
+}
+
 .pf-chatbot__sources-card-footer-container {
   border-top: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--border--color--default);
   padding: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--sm)

package/src/SourcesCard/SourcesCard.test.tsx

@@ -256,4 +256,97 @@ describe('SourcesCard', () => {
     );
     expect(screen.getByRole('link', { name: /How to make an apple pie/i })).toHaveClass('test');
   });
+
+  it('should apply cardTitleProps appropriately', () => {
+    render(
+      <SourcesCard
+        cardTitleProps={{ 'data-testid': 'card-title', className: 'test' } as any}
+        sources={[{ title: 'How to make an apple pie', link: '' }]}
+      />
+    );
+    expect(screen.getByTestId('card-title')).toHaveClass('test');
+  });
+
+  it('should apply cardBodyProps appropriately', () => {
+    render(
+      <SourcesCard
+        cardBodyProps={
+          { 'data-testid': 'card-body', body: 'To make an apple pie, you must first...', className: 'test' } as any
+        }
+        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(
+      <SourcesCard
+        cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
+        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(
+      <SourcesCard
+        sources={[
+          {
+            title: 'How to make an apple pie',
+            link: '',
+            truncateProps: { 'data-testid': 'card-truncate', className: 'test' } as any
+          }
+        ]}
+      />
+    );
+    expect(screen.getByTestId('card-truncate')).toHaveClass('test');
+  });
+
+  it('should apply custom footer appropriately when there is one source', () => {
+    render(
+      <SourcesCard sources={[{ title: 'How to make an apple pie', link: '', footer: <>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(
+      <SourcesCard
+        sources={[
+          { title: 'How to make an apple pie', link: '', footer: <>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(
+      <SourcesCard
+        cardFooterProps={{ 'data-testid': 'card-footer', className: 'test' } as any}
+        sources={[{ title: 'How to make an apple pie', link: '', footer: <>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(
+      <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'));
+  });
 });