@patternfly/chatbot 6.4.0-prerelease.2 → 6.4.0-prerelease.21

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -2,12 +2,12 @@
 // Chatbot Header - Chatbot Conversation History Nav
 // ============================================================================
 import type { KeyboardEvent, FunctionComponent } from 'react';
-
 import { useRef, Fragment } from 'react';
 
 // Import PatternFly components
 import {
   Button,
+  ButtonProps,
   Drawer,
   DrawerPanelContent,
   DrawerContent,
@@ -18,13 +18,7 @@ import {
   DrawerCloseButton,
   DrawerContentBody,
   SearchInput,
-  Menu,
-  MenuList,
-  MenuGroup,
-  MenuItem,
-  MenuContent,
-  MenuItemProps,
-  MenuProps,
+  Title,
   DrawerPanelContentProps,
   DrawerContentProps,
   DrawerContentBodyProps,
@@ -33,12 +27,22 @@ import {
   DrawerCloseButtonProps,
   DrawerPanelBodyProps,
   SkeletonProps,
-  Title,
   Icon,
-  ButtonProps
+  MenuProps,
+  TitleProps,
+  MenuListProps,
+  SearchInputProps,
+  MenuList,
+  MenuGroup,
+  MenuItem,
+  Menu,
+  MenuContent,
+  MenuItemProps,
+  MenuGroupProps,
+  MenuContentProps
 } from '@patternfly/react-core';
 
-import { OutlinedClockIcon, OutlinedCommentAltIcon } from '@patternfly/react-icons';
+import { OutlinedClockIcon, OutlinedCommentAltIcon, PenToSquareIcon } from '@patternfly/react-icons';
 import { ChatbotDisplayMode } from '../Chatbot/Chatbot';
 import ConversationHistoryDropdown from './ChatbotConversationHistoryDropdown';
 import LoadingState from './LoadingState';
@@ -61,8 +65,10 @@ export interface Conversation {
   label?: string;
   /** Callback for when user selects item. */
   onSelect?: (event?: React.MouseEvent, value?: string | number) => void;
-  /** Additional props passed to conversation menu item */
+  /** Additional props passed to menu item */
   additionalProps?: MenuItemProps;
+  /** Custom dropdown ID to ensure uniqueness across demo instances */
+  dropdownId?: string;
 }
 export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   /** Function called to toggle drawer */
@@ -79,6 +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 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" */
@@ -89,6 +99,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   searchInputPlaceholder?: string;
   /** Aria label for search input */
   searchInputAriaLabel?: string;
+  /** Additional props passed to search input */
+  searchInputProps?: SearchInputProps;
   /** A callback for when the input value changes. Omit to hide input field */
   handleTextInputChange?: (value: string) => void;
   /** Display mode of chatbot */
@@ -127,6 +139,14 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   isCompact?: boolean;
   /** Display title  */
   title?: string;
+  /** Icon displayed in title */
+  navTitleIcon?: React.ReactNode;
+  /** Title header level */
+  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> = ({
@@ -136,17 +156,18 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   activeItemId,
   onSelectActiveItem,
   conversations,
+  menuListProps,
   newChatButtonText = 'New chat',
   drawerContent,
   onNewChat,
   newChatButtonProps,
   searchInputPlaceholder = 'Search previous conversations...',
-  searchInputAriaLabel = 'Filter menu items',
+  searchInputAriaLabel = 'Search previous conversations',
+  searchInputProps,
   handleTextInputChange,
   displayMode,
   reverseButtonOrder = false,
   drawerActionsTestId = 'chatbot-nav-drawer-actions',
-  menuProps,
   drawerPanelContentProps,
   drawerContentProps,
   drawerContentBodyProps,
@@ -161,6 +182,12 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   noResultsState,
   isCompact,
   title = 'Chat history',
+  navTitleProps,
+  navTitleIcon = <OutlinedClockIcon />,
+  searchInputScreenReaderText,
+  menuProps,
+  menuGroupProps,
+  menuContentProps,
   ...props
 }: ChatbotConversationHistoryNavProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -169,11 +196,13 @@ 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) => (
     <MenuItem
       className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
       itemId={conversation.id}
-      key={conversation.id}
       {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}
       /* eslint-disable indent */
       {...(conversation.menuItems
@@ -189,30 +218,37 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
           }
         : {})}
       {...conversation.additionalProps}
-      /* eslint-enable indent */
     >
       {conversation.text}
     </MenuItem>
   );
 
-  const buildMenu = () => {
+  const buildConversations = () => {
     if (Array.isArray(conversations)) {
-      // Render for array of MenuItemObject
       return (
-        <MenuList>
-          {conversations.map((conversation) => (
-            <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>
-          ))}
+        <MenuList {...menuListProps}>
+          {conversations.map((conversation) => {
+            if (isConversation(conversation)) {
+              return <Fragment key={conversation.id}>{getNavItem(conversation)}</Fragment>;
+            } else {
+              return conversation;
+            }
+          })}
         </MenuList>
       );
     } else {
-      // Render for object with NavItemObject arrays as values
       return (
         <>
           {Object.keys(conversations).map((navGroup) => (
-            <MenuGroup className="pf-chatbot__menu-item-header" label={navGroup} key={navGroup}>
-              <MenuList>
-                {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>
                 ))}
               </MenuList>
@@ -240,7 +276,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     }
     return (
       <Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
-        <MenuContent>{buildMenu()}</MenuContent>
+        <MenuContent {...menuContentProps}>{buildConversations()}</MenuContent>
       </Menu>
     );
   };
@@ -262,26 +298,37 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
           >
             <DrawerCloseButton onClick={onDrawerToggle} {...drawerCloseButtonProps} />
             {onNewChat && (
-              <Button size={isCompact ? 'sm' : undefined} onClick={onNewChat} {...newChatButtonProps}>
+              <Button
+                size={isCompact ? 'sm' : undefined}
+                onClick={onNewChat}
+                icon={<PenToSquareIcon />}
+                {...newChatButtonProps}
+              >
                 {newChatButtonText}
               </Button>
             )}
           </DrawerActions>
         </DrawerHead>
-        <div className="pf-chatbot__title-container">
-          <Title headingLevel="h3">
+        <div className="pf-chatbot__heading-container">
+          <div className="pf-chatbot__title-container">
             <Icon size="lg" className="pf-chatbot__title-icon">
-              <OutlinedClockIcon />
+              {navTitleIcon}
             </Icon>
-            {title}
-          </Title>
+            <Title className="pf-chatbot__title" headingLevel="h2" {...navTitleProps}>
+              {title}
+            </Title>
+          </div>
           {!isLoading && handleTextInputChange && (
             <div className="pf-chatbot__input">
               <SearchInput
                 aria-label={searchInputAriaLabel}
                 onChange={(_event, value) => handleTextInputChange(value)}
                 placeholder={searchInputPlaceholder}
+                {...searchInputProps}
               />
+              {searchInputScreenReaderText && (
+                <div className="pf-chatbot__filter-announcement pf-chatbot-m-hidden">{searchInputScreenReaderText}</div>
+              )}
             </div>
           )}
         </div>

package/src/ChatbotHeader/ChatbotHeaderMenu.test.tsx

@@ -12,7 +12,7 @@ describe('ChatbotHeaderMenu', () => {
   it('should call onMenuToggle when ChatbotHeaderMenu button is clicked', () => {
     const onMenuToggle = jest.fn();
     render(<ChatbotHeaderMenu className="custom-header-menu" onMenuToggle={onMenuToggle} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Toggle menu' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Chat history menu' }));
 
     expect(onMenuToggle).toHaveBeenCalled();
   });

package/src/ChatbotHeader/ChatbotHeaderMenu.tsx

@@ -25,9 +25,9 @@ const ChatbotHeaderMenuBase: FunctionComponent<ChatbotHeaderMenuProps> = ({
   className,
   onMenuToggle,
   tooltipProps,
-  menuAriaLabel = 'Toggle menu',
+  menuAriaLabel = 'Chat history menu',
   innerRef,
-  tooltipContent = 'Menu',
+  tooltipContent = 'Chat history menu',
   isCompact,
   ...props
 }: ChatbotHeaderMenuProps) => (

package/src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx

@@ -0,0 +1,25 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ChatbotHeaderNewChatButton } from './ChatbotHeaderNewChatButton';
+import '@testing-library/jest-dom';
+
+describe('ChatbotHeaderNewChatButton', () => {
+  it('should render ChatbotHeaderNewChatButton', () => {
+    const { container } = render(
+      <ChatbotHeaderNewChatButton className="custom-header-new-chat-button" onClick={jest.fn()} />
+    );
+
+    expect(container.querySelector('.custom-header-new-chat-button')).toBeTruthy();
+  });
+
+  it('should call onClick handler when new chat button is pressed', () => {
+    const onClick = jest.fn();
+    render(<ChatbotHeaderNewChatButton className="custom-header-new-chat-button" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', { name: 'New chat' }));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should render button with isCompact', () => {
+    render(<ChatbotHeaderNewChatButton data-testid="new-chat-button" onClick={jest.fn()} isCompact />);
+    expect(screen.getByTestId('new-chat-button')).toHaveClass('pf-m-compact');
+  });
+});

package/src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx

@@ -0,0 +1,64 @@
+import type { Ref, FunctionComponent } from 'react';
+import { forwardRef } from 'react';
+
+import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
+import { PenToSquareIcon } from '@patternfly/react-icons/dist/esm/icons/pen-to-square-icon';
+
+export interface ChatbotHeaderNewChatButtonProps extends ButtonProps {
+  /** Callback function for when button is clicked */
+  onClick: () => void;
+  /** Custom classname for the header component */
+  className?: string;
+  /** Props spread to the PF Tooltip component wrapping the display mode dropdown */
+  tooltipProps?: TooltipProps;
+  /** Aria label for menu */
+  menuAriaLabel?: string;
+  /** Ref applied to menu */
+  innerRef?: React.Ref<HTMLButtonElement>;
+  /** Content used in tooltip */
+  tooltipContent?: string;
+  /** Sets button to compact styling. */
+  isCompact?: boolean;
+}
+
+const ChatbotHeaderNewChatButtonBase: FunctionComponent<ChatbotHeaderNewChatButtonProps> = ({
+  className,
+  onClick,
+  tooltipProps,
+  menuAriaLabel = 'New chat',
+  innerRef,
+  tooltipContent = 'New chat',
+  isCompact,
+  ...props
+}: ChatbotHeaderNewChatButtonProps) => (
+  <div className={`pf-chatbot__menu${className ? ` ${className}` : ''}`}>
+    <Tooltip
+      content={tooltipContent}
+      position="bottom"
+      // prevents VO announcements of both aria label and tooltip
+      aria="none"
+      {...tooltipProps}
+    >
+      <Button
+        className={`pf-chatbot__button--toggle-menu ${isCompact ? 'pf-m-compact' : ''}`}
+        variant="plain"
+        onClick={onClick}
+        aria-label={menuAriaLabel}
+        ref={innerRef}
+        icon={
+          <Icon size={isCompact ? 'lg' : 'xl'} isInline>
+            <PenToSquareIcon />
+          </Icon>
+        }
+        size={isCompact ? 'sm' : undefined}
+        {...props}
+      />
+    </Tooltip>
+  </div>
+);
+
+export const ChatbotHeaderNewChatButton = forwardRef(
+  (props: ChatbotHeaderNewChatButtonProps, ref: Ref<HTMLButtonElement>) => (
+    <ChatbotHeaderNewChatButtonBase innerRef={ref} {...props} />
+  )
+);

package/src/ChatbotHeader/index.ts

@@ -8,3 +8,4 @@ export * from './ChatbotHeaderTitle';
 export * from './ChatbotHeaderOptionsDropdown';
 export * from './ChatbotHeaderSelectorDropdown';
 export * from './ChatbotHeaderCloseButton';
+export * from './ChatbotHeaderNewChatButton';

package/src/ChatbotModal/ChatbotModal.scss

@@ -20,7 +20,7 @@
     padding-block-end: var(--pf-t--global--spacer--xl);
   }
   .pf-v6-c-modal-box__header {
-    padding-block-end: var(--pf-t--global--spacer--lg);
+    padding-block-end: var(--pf-t--global--spacer--sm);
   }
 }
 

package/src/DeepThinking/DeepThinking.scss

@@ -0,0 +1,24 @@
+.pf-chatbot__deep-thinking {
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--control--read-only);
+  overflow: unset;
+}
+
+.pf-chatbot__deep-thinking-expandable-section {
+  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__deep-thinking-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--xs);
+}
+
+.pf-chatbot__deep-thinking-subheading {
+  font-size: var(--pf-t--global--font--size--body--sm);
+  font-weight: var(--pf-t--global--font--weight--body--default);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
+.pf-chatbot__deep-thinking-body {
+  color: var(--pf-t--global--text--color--subtle);
+}

package/src/DeepThinking/DeepThinking.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import DeepThinking from './DeepThinking';
+
+describe('DeepThinking', () => {
+  const defaultProps = {
+    toggleContent: 'Show thinking'
+  };
+
+  it('should render with required props only', () => {
+    render(<DeepThinking {...defaultProps} />);
+    expect(screen.getByText('Show thinking')).toBeTruthy();
+  });
+
+  it('should render subheading when provided', () => {
+    const subheading = 'Thought for 3 seconds';
+    render(<DeepThinking {...defaultProps} subheading={subheading} />);
+    expect(screen.getByText(subheading)).toBeTruthy();
+  });
+
+  it('should render body content when provided', () => {
+    const body = "Here's why I think that";
+    render(<DeepThinking {...defaultProps} body={body} />);
+    expect(screen.getByText(body)).toBeTruthy();
+  });
+
+  it('should render with complex content including React elements', () => {
+    const body = (
+      <div>
+        <p>Complex body content</p>
+        <ul>
+          <li>Item 1</li>
+          <li>Item 2</li>
+        </ul>
+      </div>
+    );
+
+    render(<DeepThinking {...defaultProps} body={body} />);
+    expect(screen.getByText('Complex body content')).toBeTruthy();
+    expect(screen.getByText('Item 1')).toBeTruthy();
+    expect(screen.getByText('Item 2')).toBeTruthy();
+  });
+
+  it('should apply custom className from cardProps', () => {
+    const { container } = render(
+      <DeepThinking {...defaultProps} cardProps={{ className: 'custom-tool-response-class' }} />
+    );
+    expect(container.querySelector('.custom-tool-response-class')).toBeTruthy();
+  });
+
+  it('should pass through expandableSectionProps', () => {
+    render(<DeepThinking {...defaultProps} expandableSectionProps={{ className: 'custom-expandable-class' }} />);
+    expect(document.querySelector('.custom-expandable-class')).toBeTruthy();
+  });
+
+  it('should not render subheading span when subheading is not provided', () => {
+    const { container } = render(<DeepThinking {...defaultProps} />);
+    const subheadingContainer = container.querySelector('.pf-chatbot__tool-response-subheading');
+    expect(subheadingContainer).toBeFalsy();
+  });
+});

package/src/DeepThinking/DeepThinking.tsx

@@ -0,0 +1,68 @@
+// ============================================================================
+// Deep Thinking
+// ============================================================================
+import {
+  Card,
+  CardBody,
+  CardBodyProps,
+  CardProps,
+  ExpandableSection,
+  ExpandableSectionProps
+} from '@patternfly/react-core';
+import { useState, type FunctionComponent } from 'react';
+
+export interface DeepThinkingProps {
+  /** Toggle content shown for expandable section  */
+  toggleContent: React.ReactNode;
+  /** Additional props passed to expandable section */
+  expandableSectionProps?: Omit<ExpandableSectionProps, 'ref'>;
+  /** Subheading rendered inside expandable section */
+  subheading?: string;
+  /** Body text rendered inside expandable section */
+  body?: React.ReactNode | string;
+  /** Additional props passed to main card */
+  cardProps?: CardProps;
+  /** Additional props passed to main card body */
+  cardBodyProps?: CardBodyProps;
+}
+
+export const DeepThinking: FunctionComponent<DeepThinkingProps> = ({
+  body,
+  cardProps,
+  expandableSectionProps,
+  subheading,
+  toggleContent,
+  cardBodyProps
+}: DeepThinkingProps) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <Card isCompact className="pf-chatbot__deep-thinking" {...cardProps}>
+      <CardBody {...cardBodyProps}>
+        <ExpandableSection
+          toggleContent={toggleContent}
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          isIndented
+          className="pf-chatbot__deep-thinking-expandable-section"
+          {...expandableSectionProps}
+        >
+          <div className="pf-chatbot__deep-thinking-section">
+            {subheading && (
+              <div className="pf-chatbot__deep-thinking-subheading">
+                <span>{subheading}</span>
+              </div>
+            )}
+            {body && <div className="pf-chatbot__deep-thinking-body">{body}</div>}
+          </div>
+        </ExpandableSection>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default DeepThinking;

package/src/DeepThinking/index.ts

@@ -0,0 +1,3 @@
+export { default } from './DeepThinking';
+
+export * from './DeepThinking';

package/src/FileDetails/FileDetails.scss

@@ -11,10 +11,20 @@
   height: 24px;
 }
 
+.pf-chatbot__image-icon {
+  color: var(--pf-t--global--icon--color--status--info--default);
+  width: 24px;
+  height: 24px;
+}
+
 .pf-chatbot__code-fileName {
   font-size: var(--pf-t--global--font--size--body--default);
 }
 
+.pf-chatbot__code-file-size {
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 // This is used in demos only
 .pf-chatbot__file-details-example {
   background: var(--pf-t--global--background--color--secondary--default);

package/src/FileDetails/FileDetails.test.tsx

@@ -11,6 +11,7 @@ describe('FileDetails', () => {
   it('should render file details correctly if an extension we support is passed in', () => {
     render(<FileDetails fileName="test.txt" languageTestId="language" />);
     expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByText('test.txt')).toBeFalsy();
     expect(screen.getByText('TEXT')).toBeTruthy();
     expect(screen.getByTestId('language')).toBeTruthy();
   });
@@ -19,4 +20,19 @@ describe('FileDetails', () => {
     expect(screen.getByText('test')).toBeTruthy();
     expect(screen.queryByTestId('language')).toBeFalsy();
   });
+  it('should support image formats by rendering extension differently', () => {
+    render(<FileDetails fileName="test.svg" languageTestId="language" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByText('test.svg')).toBeFalsy();
+    expect(screen.queryByTestId('language')).toBeFalsy();
+  });
+  it('should handle truncation differently', () => {
+    render(<FileDetails fileName="test.svg" languageTestId="language" hasTruncation={false} />);
+    expect(screen.getByText('test.svg')).toBeTruthy();
+    expect(screen.queryByTestId('language')).toBeFalsy();
+  });
+  it('should include file size if prop passed in', () => {
+    render(<FileDetails fileName="test.joke" languageTestId="language" fileSize="100MB" />);
+    expect(screen.getByText('100MB')).toBeTruthy();
+  });
 });