@patternfly/chatbot 6.5.0-prerelease.24 → 6.5.0-prerelease.26

package/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx

@@ -8,6 +8,7 @@ import { useRef, Fragment } from 'react';
 import {
   Button,
   ButtonProps,
+  Divider,
   Drawer,
   DrawerPanelContent,
   DrawerContent,
@@ -17,6 +18,8 @@ import {
   DrawerActions,
   DrawerCloseButton,
   DrawerContentBody,
+  InputGroup,
+  InputGroupItem,
   SearchInput,
   Title,
   DrawerPanelContentProps,
@@ -28,10 +31,10 @@ import {
   DrawerPanelBodyProps,
   SkeletonProps,
   Icon,
-  MenuProps,
   TitleProps,
-  MenuListProps,
   SearchInputProps,
+  MenuProps,
+  MenuListProps,
   MenuList,
   MenuGroup,
   MenuItem,
@@ -125,6 +128,8 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps {
   drawerCloseButtonProps?: DrawerCloseButtonProps;
   /** Additional props appleid to drawer panel body */
   drawerPanelBodyProps?: DrawerPanelBodyProps;
+  /** Flag indicating whether a divider should render between the drawer head and title. */
+  hasDrawerHeadDivider?: boolean;
   /** Whether to show drawer loading state */
   isLoading?: boolean;
   /** Additional props for loading state */
@@ -145,6 +150,12 @@ 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;
+  /** Custom action rendered before the search input. */
+  searchActionStart?: React.ReactNode;
+  /** Custom action rendered after the search input. */
+  searchActionEnd?: React.ReactNode;
+  /** A custom search toolbar to render below the title. This will override the default search actions and/or search input. */
+  searchToolbar?: React.ReactNode;
   /** Additional props passed to MenuContent */
   menuContentProps?: Omit<MenuContentProps, 'ref'>;
 }
@@ -175,6 +186,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   drawerActionsProps,
   drawerCloseButtonProps,
   drawerPanelBodyProps,
+  hasDrawerHeadDivider,
   isLoading,
   loadingState,
   errorState,
@@ -185,6 +197,9 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
   navTitleProps,
   navTitleIcon = <OutlinedClockIcon />,
   searchInputScreenReaderText,
+  searchActionStart,
+  searchActionEnd,
+  searchToolbar,
   menuProps,
   menuGroupProps,
   menuContentProps,
@@ -287,6 +302,38 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
     </>
   );
 
+  const searchInputContainer = 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>
+  );
+
+  const renderSearchAndActions = () => {
+    if (searchToolbar) {
+      return searchToolbar;
+    }
+
+    return searchActionStart || searchActionEnd ? (
+      <div className="pf-chatbot__history-search-actions">
+        <InputGroup>
+          {searchActionStart && <InputGroupItem>{searchActionStart}</InputGroupItem>}
+          {searchInputContainer && <InputGroupItem isFill>{searchInputContainer}</InputGroupItem>}
+          {searchActionEnd && <InputGroupItem>{searchActionEnd}</InputGroupItem>}
+        </InputGroup>
+      </div>
+    ) : (
+      searchInputContainer
+    );
+  };
+
   const renderPanelContent = () => {
     const drawer = (
       <>
@@ -309,6 +356,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
             )}
           </DrawerActions>
         </DrawerHead>
+        {hasDrawerHeadDivider && <Divider className="pf-chatbot__heading-divider" />}
         <div className="pf-chatbot__heading-container">
           <div className="pf-chatbot__title-container">
             <Icon size="lg" className="pf-chatbot__title-icon">
@@ -318,19 +366,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
               {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>
-          )}
+          {!isLoading && renderSearchAndActions()}
         </div>
         {isLoading ? <LoadingState {...loadingState} /> : renderDrawerContent()}
       </>

package/src/Message/CodeBlockMessage/CodeBlockMessage.test.tsx

@@ -0,0 +1,171 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CodeBlockMessage from './CodeBlockMessage';
+
+// Mock clipboard API
+Object.assign(navigator, {
+  clipboard: {
+    writeText: jest.fn()
+  }
+});
+
+describe('CodeBlockMessage', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render inline code for single-line content', () => {
+    render(<CodeBlockMessage className="language-javascript">const x = 5;</CodeBlockMessage>);
+    const code = screen.getByText('const x = 5;');
+    expect(code.tagName).toBe('CODE');
+    expect(code).toHaveClass('pf-chatbot__message-inline-code');
+  });
+
+  it('should render code block for multi-line content', () => {
+    const multilineCode = 'const x = 5;\nconst y = 10;';
+    const { container } = render(<CodeBlockMessage className="language-javascript">{multilineCode}</CodeBlockMessage>);
+    const codeElement = container.querySelector('code');
+    expect(codeElement?.textContent).toBe(multilineCode);
+  });
+
+  it('should display language label', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage className="language-javascript">{code}</CodeBlockMessage>);
+    expect(screen.getByText('javascript')).toBeInTheDocument();
+  });
+
+  it('should render copy button', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage>{code}</CodeBlockMessage>);
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeInTheDocument();
+  });
+
+  it('should copy plain string content to clipboard', async () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage>{code}</CodeBlockMessage>);
+
+    const copyButton = screen.getByRole('button', { name: 'Copy code' });
+    await userEvent.click(copyButton);
+
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(code);
+  });
+
+  it('should extract text content from React elements when copying', async () => {
+    // Simulate what happens with syntax highlighting - children become React elements
+    const { container } = render(
+      <CodeBlockMessage className="language-javascript">
+        <span className="hljs-keyword">const</span> x = 5;{'\n'}
+        <span className="hljs-keyword">const</span> y = 10;
+      </CodeBlockMessage>
+    );
+
+    const copyButton = screen.getByRole('button', { name: 'Copy code' });
+    await userEvent.click(copyButton);
+
+    // Should extract actual text content from DOM, not "[object Object]"
+    const codeElement = container.querySelector('code');
+    const expectedText = codeElement?.textContent || '';
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(expectedText);
+    expect(expectedText).not.toContain('[object Object]');
+  });
+
+  it('should show check icon after copying', async () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage>{code}</CodeBlockMessage>);
+
+    const copyButton = screen.getByRole('button', { name: 'Copy code' });
+    await userEvent.click(copyButton);
+
+    // Check icon should be visible (we can verify by checking if CopyIcon is not present)
+    const svgElement = copyButton.querySelector('svg');
+    expect(svgElement).toBeInTheDocument();
+  });
+
+  it('should render expandable section when isExpandable is true', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage isExpandable>{code}</CodeBlockMessage>);
+
+    expect(screen.getByRole('button', { name: 'Show more' })).toBeInTheDocument();
+  });
+
+  it('should toggle expandable section', async () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage isExpandable>{code}</CodeBlockMessage>);
+
+    const toggleButton = screen.getByRole('button', { name: 'Show more' });
+    await userEvent.click(toggleButton);
+
+    expect(screen.getByRole('button', { name: 'Show less' })).toBeInTheDocument();
+  });
+
+  it('should use custom expanded/collapsed text', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(
+      <CodeBlockMessage isExpandable expandedText="Hide" collapsedText="Reveal">
+        {code}
+      </CodeBlockMessage>
+    );
+
+    expect(screen.getByRole('button', { name: 'Reveal' })).toBeInTheDocument();
+  });
+
+  it('should pass through expandableSectionProps', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    const { container } = render(
+      <CodeBlockMessage isExpandable expandableSectionProps={{ className: 'custom-expandable-class' }}>
+        {code}
+      </CodeBlockMessage>
+    );
+
+    const expandableSection = container.querySelector('.pf-v6-c-expandable-section.custom-expandable-class');
+    expect(expandableSection).toBeInTheDocument();
+  });
+
+  it('should render custom actions', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    const customAction = <button aria-label="Custom action">Custom</button>;
+    render(<CodeBlockMessage customActions={customAction}>{code}</CodeBlockMessage>);
+
+    expect(screen.getByRole('button', { name: 'Custom action' })).toBeInTheDocument();
+  });
+
+  it('should apply isPrimary class to inline code', () => {
+    render(<CodeBlockMessage isPrimary>const x = 5;</CodeBlockMessage>);
+    const code = screen.getByText('const x = 5;');
+    expect(code).toHaveClass('pf-m-primary');
+  });
+
+  it('should apply shouldRetainStyles class to code block', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    const { container } = render(<CodeBlockMessage shouldRetainStyles>{code}</CodeBlockMessage>);
+
+    const codeBlockDiv = container.querySelector('.pf-chatbot__message-code-block');
+    expect(codeBlockDiv).toHaveClass('pf-m-markdown');
+  });
+
+  it('should use custom aria-label for copy button', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    render(<CodeBlockMessage aria-label="Copy this code">{code}</CodeBlockMessage>);
+
+    expect(screen.getByRole('button', { name: 'Copy this code' })).toBeInTheDocument();
+  });
+
+  it('should prioritize data-expanded-text over expandedText prop', () => {
+    const code = 'const x = 5;\nconst y = 10;';
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(jest.fn());
+
+    render(
+      <CodeBlockMessage isExpandable expandedText="Custom Expanded" data-expanded-text="Data Expanded">
+        {code}
+      </CodeBlockMessage>
+    );
+
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'Message:',
+      expect.stringContaining('data-expanded-text or data-collapsed-text will override')
+    );
+
+    consoleErrorSpy.mockRestore();
+  });
+});

package/src/Message/CodeBlockMessage/CodeBlockMessage.tsx

@@ -92,13 +92,22 @@ const CodeBlockMessage = ({
     );
   }
 
-  const onToggle = (isExpanded) => {
+  const onToggle = (isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
   // Handle clicking copy button
-  const handleCopy = useCallback((event, text) => {
-    navigator.clipboard.writeText(text.toString());
+  const handleCopy = useCallback((_event: React.MouseEvent, text: React.ReactNode) => {
+    let textToCopy = '';
+    if (typeof text === 'string') {
+      textToCopy = text;
+    } else {
+      if (codeBlockRef.current) {
+        const codeElement = codeBlockRef.current.querySelector('code');
+        textToCopy = codeElement?.textContent || '';
+      }
+    }
+    navigator.clipboard.writeText(textToCopy);
     setCopied(true);
   }, []);