@patternfly/chatbot 1.0.0

package/src/FileDropZone/__snapshots__/FileDropZone.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileDropZone should render file drop zone 1`] = `
+<div>
+  <div
+    class="pf-v6-c-multiple-file-upload pf-chatbot__dropzone pf-chatbot__dropzone--default pf-chatbot__dropzone--invisible "
+    role="presentation"
+    tabindex="0"
+  >
+    <input
+      hidden=""
+      multiple=""
+      style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+      tabindex="-1"
+      type="file"
+    />
+  </div>
+</div>
+`;

package/src/FileDropZone/index.ts

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

package/src/FilePreview/FilePreview.scss

@@ -0,0 +1,22 @@
+.pf-chatbot__file-preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--md);
+  align-items: center;
+  justify-content: center;
+}
+
+.pf-chatbot__file-preview-icon {
+  color: var(--pf-t--global--icon--color--subtle);
+  width: var(--pf-t--global--icon--size--2xl);
+  height: var(--pf-t--global--icon--size--2xl);
+}
+
+.pf-chatbot__file-preview-name {
+  font-size: var(--pf-t--global--font--size--xl);
+  font-weight: var(--pf-t--global--font--weight--heading--default);
+}
+.pf-chatbot__file-preview-body {
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: var(--pf-t--global--font--size--body--lg);
+}

package/src/FilePreview/FilePreview.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FilePreview from './FilePreview';
+import { ChatbotDisplayMode } from '../Chatbot';
+import { Button, ModalBodyProps, ModalHeaderProps } from '@patternfly/react-core';
+
+describe('FilePreview', () => {
+  const defaultProps = {
+    isModalOpen: true,
+    handleModalToggle: jest.fn(),
+    fileName: 'test-file.txt',
+    children: 'File content preview'
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render with basic props', () => {
+    render(<FilePreview {...defaultProps} />);
+    expect(screen.getByText('File preview')).toBeInTheDocument();
+    expect(screen.getByText('test-file.txt')).toBeInTheDocument();
+  });
+
+  it('should render with custom title', () => {
+    const customTitle = 'Custom file preview title';
+    render(<FilePreview {...defaultProps} title={customTitle} />);
+    expect(screen.getByRole('heading', { name: customTitle })).toBeTruthy();
+  });
+
+  it('should handle modal toggle when closed', () => {
+    const mockToggle = jest.fn();
+    render(<FilePreview {...defaultProps} isModalOpen={false} handleModalToggle={mockToggle} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('should apply default display mode class', () => {
+    render(<FilePreview {...defaultProps} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-chatbot__file-preview-modal--default');
+  });
+
+  it('should apply custom display mode class', () => {
+    render(<FilePreview {...defaultProps} displayMode={ChatbotDisplayMode.fullscreen} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-chatbot__file-preview-modal--fullscreen');
+  });
+
+  it('should apply compact styling when isCompact is true', () => {
+    render(<FilePreview {...defaultProps} isCompact />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-m-compact');
+  });
+
+  it('should not apply compact styling when isCompact is false', () => {
+    render(<FilePreview {...defaultProps} isCompact={false} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).not.toHaveClass('pf-m-compact');
+  });
+
+  it('should apply custom className', () => {
+    const customClass = 'custom-file-preview';
+    render(<FilePreview {...defaultProps} className={customClass} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass(customClass);
+  });
+
+  it('should pass through additional props to ChatbotModal', () => {
+    render(<FilePreview {...defaultProps} data-testid="file-preview-modal" />);
+    const modal = screen.getByTestId('file-preview-modal');
+    expect(modal).toBeInTheDocument();
+  });
+
+  it('should pass modalHeaderProps to ModalHeader', () => {
+    const modalHeaderProps = {
+      'data-testid': 'custom-header'
+    } as ModalHeaderProps;
+    render(<FilePreview {...defaultProps} modalHeaderProps={modalHeaderProps} />);
+    const header = screen.getByTestId('custom-header');
+    expect(header).toBeInTheDocument();
+  });
+
+  it('should pass modalBodyProps to ModalBody', () => {
+    const modalBodyProps = {
+      'data-testid': 'custom-body'
+    } as ModalBodyProps;
+    render(<FilePreview {...defaultProps} modalBodyProps={modalBodyProps} />);
+    const body = screen.getByTestId('custom-body');
+    expect(body).toBeInTheDocument();
+  });
+
+  it('should pass ouiaId to ChatbotModal', () => {
+    const ouiaId = 'file-preview-ouia-id';
+    render(<FilePreview {...defaultProps} ouiaId={ouiaId} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveAttribute('data-ouia-component-id', ouiaId);
+  });
+
+  it('should handle complex children', () => {
+    const complexChildren = (
+      <div>
+        <h3>File details</h3>
+        <p>Size: 1.2 MB</p>
+        <Button>Download</Button>
+      </div>
+    );
+    render(<FilePreview {...defaultProps}>{complexChildren}</FilePreview>);
+    expect(screen.getByRole('heading', { name: /File details/i })).toBeTruthy();
+    expect(screen.getByText('Size: 1.2 MB')).toBeTruthy();
+    expect(screen.getByRole('button', { name: /Download/i })).toBeTruthy();
+  });
+});

package/src/FilePreview/FilePreview.tsx

@@ -0,0 +1,58 @@
+import { ModalBody, ModalBodyProps, ModalHeader, ModalHeaderProps } from '@patternfly/react-core';
+import type { FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal, { ChatbotModalProps } from '../ChatbotModal';
+import { FileIcon } from '@patternfly/react-icons';
+
+export interface FilePreviewProps extends ChatbotModalProps {
+  /** Class applied to modal */
+  className?: string;
+  /** Function that handles modal toggle */
+  handleModalToggle: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
+  /** Whether modal is open */
+  isModalOpen: boolean;
+  /** Title of modal */
+  title?: string;
+  /** Display mode for the Chatbot parent; this influences the styles applied */
+  displayMode?: ChatbotDisplayMode;
+  /** File name */
+  fileName: string;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+  /** Additional props passed to modal header */
+  modalHeaderProps?: ModalHeaderProps;
+  /** Additional props passed to modal body */
+  modalBodyProps?: ModalBodyProps;
+}
+
+const FilePreview: FunctionComponent<FilePreviewProps> = ({
+  isModalOpen,
+  displayMode = ChatbotDisplayMode.default,
+  children,
+  fileName,
+  isCompact,
+  className,
+  handleModalToggle,
+  title = 'File preview',
+  modalHeaderProps,
+  modalBodyProps,
+  ...props
+}: FilePreviewProps) => (
+  <ChatbotModal
+    isOpen={isModalOpen}
+    className={`pf-chatbot__file-preview-modal pf-chatbot__file-preview-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
+    displayMode={displayMode}
+    onClose={handleModalToggle}
+    isCompact={isCompact}
+    {...props}
+  >
+    <ModalHeader title={title} {...modalHeaderProps} />
+    <ModalBody className="pf-chatbot__file-preview-body" {...modalBodyProps}>
+      <FileIcon className="pf-chatbot__file-preview-icon" />
+      <h2 className="pf-chatbot__file-preview-name">{fileName}</h2>
+      {children && <div className="pf-chatbot__file-preview-body">{children}</div>}
+    </ModalBody>
+  </ChatbotModal>
+);
+
+export default FilePreview;

package/src/FilePreview/index.ts

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

package/src/ImagePreview/ImagePreview.scss

@@ -0,0 +1,61 @@
+.pf-chatbot__image-preview-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-label--MaxWidth: initial;
+  --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--2xl);
+
+  img {
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+  .pf-chatbot__file-label {
+    min-width: fit-content;
+  }
+}
+
+.pf-chatbot__image-preview-stack {
+  height: unset;
+}
+
+.pf-v6-c-modal-box__footer.pf-chatbot__image-preview-footer {
+  padding-block-start: var(--pf-t--global--spacer--sm);
+}
+
+.pf-chatbot__image-preview-footer-buttons {
+  display: flex;
+  gap: var(--pf-t--global--spacer--xs);
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+
+  .pf-v6-c-button {
+    border-radius: var(--pf-t--global--border--radius--pill);
+    padding: var(--pf-t--global--spacer--sm);
+    width: 2.31rem;
+    height: 2.31rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  button:disabled,
+  button[disabled] {
+    .pf-v6-c-icon__content {
+      color: var(--pf-t--global--icon--color--disabled);
+    }
+  }
+  .pf-v6-c-button__text {
+    display: flex;
+    align-items: center;
+  }
+  // Interactive states
+  .pf-v6-c-button:hover,
+  .pf-v6-c-button:focus {
+    .pf-v6-c-button__icon {
+      color: var(--pf-t--global--icon--color--regular);
+    }
+  }
+  .pf-v6-c-button__icon {
+    color: var(--pf-t--global--icon--color--subtle);
+  }
+}

package/src/ImagePreview/ImagePreview.test.tsx

@@ -0,0 +1,253 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ImagePreview from './ImagePreview';
+import { ChatbotDisplayMode } from '../Chatbot';
+
+const mockImages = [
+  {
+    fileName: 'image1.jpg',
+    fileSize: '2.5 MB',
+    image: <img src="" alt="Test image 1" />
+  },
+  {
+    fileName: 'image2.png',
+    fileSize: '1.8 MB',
+    image: <img src="" alt="Test image 2" />
+  },
+  {
+    fileName: 'image3.gif',
+    image: <img src="" alt="Test image 3" />
+  }
+];
+
+const defaultProps = {
+  isModalOpen: true,
+  handleModalToggle: jest.fn(),
+  images: mockImages
+};
+
+describe('ImagePreview', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders modal when isModalOpen is true', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('does not render modal when isModalOpen is false', () => {
+    render(<ImagePreview {...defaultProps} isModalOpen={false} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('displays custom title when provided', () => {
+    const customTitle = 'Custom image preview';
+    render(<ImagePreview {...defaultProps} title={customTitle} />);
+    expect(screen.getByRole('heading', { name: customTitle })).toBeInTheDocument();
+  });
+
+  it('displays default title when no title provided', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByRole('heading', { name: /Preview images/i })).toBeInTheDocument();
+  });
+
+  it('calls handleModalToggle when modal is closed', () => {
+    const mockHandleToggle = jest.fn();
+    render(<ImagePreview {...defaultProps} handleModalToggle={mockHandleToggle} />);
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+    expect(mockHandleToggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays first image by default', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByText('image1.jpg')).toBeInTheDocument();
+    expect(screen.getByText('2.5 MB')).toBeInTheDocument();
+    expect(screen.getByAltText('Test image 1')).toBeInTheDocument();
+  });
+
+  it('displays page counter correctly', () => {
+    render(<ImagePreview {...defaultProps} />);
+    expect(screen.getByText('1/3')).toBeInTheDocument();
+  });
+
+  it('navigates to next image when next button is clicked', () => {
+    const mockOnNextClick = jest.fn();
+    render(<ImagePreview {...defaultProps} onNextClick={mockOnNextClick} />);
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+    expect(mockOnNextClick).toHaveBeenCalled();
+    expect(screen.getByText('2/3')).toBeInTheDocument();
+    expect(screen.getByText('image2.png')).toBeInTheDocument();
+  });
+
+  it('navigates to previous image when previous button is clicked', () => {
+    const mockOnPreviousClick = jest.fn();
+    render(<ImagePreview {...defaultProps} onPreviousClick={mockOnPreviousClick} />);
+    // First go to page 2
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+    // Then go back to page 1
+    const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+    fireEvent.click(previousButton);
+    expect(mockOnPreviousClick).toHaveBeenCalled();
+    expect(screen.getByText('1/3')).toBeInTheDocument();
+  });
+
+  it('calls onSetPage when page changes', () => {
+    const mockOnSetPage = jest.fn();
+    render(<ImagePreview {...defaultProps} onSetPage={mockOnSetPage} />);
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+    expect(mockOnSetPage).toHaveBeenCalledWith(expect.any(Object), 2);
+  });
+
+  it('disables previous button on first page', () => {
+    render(<ImagePreview {...defaultProps} />);
+    const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+    expect(previousButton).toBeDisabled();
+  });
+
+  it('disables next button on last page', () => {
+    render(<ImagePreview {...defaultProps} />);
+    // Navigate to last page
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton); // page 2
+    fireEvent.click(nextButton); // page 3
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('disables both navigation buttons when isDisabled is true', () => {
+    render(<ImagePreview {...defaultProps} isDisabled={true} />);
+    const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    expect(previousButton).toBeDisabled();
+    expect(nextButton).toBeDisabled();
+  });
+
+  it('uses custom aria labels for pagination', () => {
+    const customLabels = {
+      paginationAriaLabel: 'Custom pagination',
+      toPreviousPageAriaLabel: 'Go to previous image',
+      toNextPageAriaLabel: 'Go to next image'
+    };
+
+    render(<ImagePreview {...defaultProps} {...customLabels} />);
+    expect(screen.getByRole('navigation', { name: 'Custom pagination' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Go to previous image' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Go to next image' })).toBeInTheDocument();
+  });
+
+  it('renders with compact mode when isCompact is true', () => {
+    render(<ImagePreview {...defaultProps} isCompact={true} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-m-compact');
+  });
+
+  it('applies custom className when provided', () => {
+    const customClassName = 'custom-image-preview';
+    render(<ImagePreview {...defaultProps} className={customClassName} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass(customClassName);
+  });
+
+  it('applies display mode class correctly', () => {
+    render(<ImagePreview {...defaultProps} displayMode={ChatbotDisplayMode.embedded} />);
+    const modal = screen.getByRole('dialog');
+    expect(modal).toHaveClass('pf-chatbot__image-preview-modal--embedded');
+  });
+
+  it('passes additional props to ChatbotModal', () => {
+    const modalClass = 'custom-modal-class';
+    const additionalProps = {
+      'data-testid': 'modal',
+      className: modalClass
+    };
+    render(<ImagePreview {...defaultProps} {...additionalProps} />);
+    const modal = screen.getByTestId('modal');
+    expect(modal).toBeInTheDocument();
+    expect(modal).toBeInTheDocument();
+    expect(modal).toHaveClass(modalClass);
+  });
+
+  it('passes modalHeaderProps correctly', () => {
+    const headerClass = 'custom-modal-header-class';
+    const headerProps = {
+      'data-testid': 'header',
+      className: headerClass
+    };
+    render(<ImagePreview {...defaultProps} modalHeaderProps={headerProps} />);
+    expect(screen.getByTestId('header')).toBeInTheDocument();
+    expect(screen.getByTestId('header')).toHaveClass(headerClass);
+  });
+
+  it('passes modalBodyProps correctly', () => {
+    const bodyClass = 'custom-modal-body-class';
+    const bodyProps = {
+      'data-testid': 'body',
+      className: bodyClass
+    };
+    render(<ImagePreview {...defaultProps} modalBodyProps={bodyProps} />);
+    expect(screen.getByTestId('body')).toBeInTheDocument();
+    expect(screen.getByTestId('body')).toHaveClass(bodyClass);
+  });
+
+  it('handles single image without pagination', () => {
+    const singleImage = [mockImages[0]];
+    render(<ImagePreview {...defaultProps} images={singleImage} />);
+    expect(screen.queryByText('1/1')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Go to previous image/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Go to next image/i })).not.toBeInTheDocument();
+  });
+
+  it('calls onCloseFileDetailsLabel when file details close button is clicked', () => {
+    const mockOnClose = jest.fn();
+    render(<ImagePreview {...defaultProps} onCloseFileDetailsLabel={mockOnClose} />);
+    const closeButton = screen.getByRole('button', { name: /Close image1.jpg/i });
+    fireEvent.click(closeButton);
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('passes fileDetailsLabelProps correctly to FileDetailsLabel', () => {
+    const customFileDetailsProps = {
+      'data-testid': 'custom-file-details'
+    };
+    render(<ImagePreview {...defaultProps} fileDetailsLabelProps={customFileDetailsProps as any} />);
+    expect(screen.getByTestId('custom-file-details')).toBeInTheDocument();
+  });
+
+  it('displays file details for current page when navigating', () => {
+    render(<ImagePreview {...defaultProps} />);
+    // Initially shows first image details
+    expect(screen.getByText('image1.jpg')).toBeInTheDocument();
+    expect(screen.getByText('2.5 MB')).toBeInTheDocument();
+
+    // Navigate to second page
+    const nextButton = screen.getByRole('button', { name: /Go to next image/i });
+    fireEvent.click(nextButton);
+
+    // Should now show second image details
+    expect(screen.getByText('image2.png')).toBeInTheDocument();
+    expect(screen.getByText('1.8 MB')).toBeInTheDocument();
+
+    // Navigate to third page
+    fireEvent.click(nextButton);
+
+    // Should now show third image details (no file size)
+    expect(screen.getByText('image3.gif')).toBeInTheDocument();
+    expect(screen.queryByText(/MB/)).not.toBeInTheDocument();
+  });
+
+  it('sets hasTruncation to false on FileDetailsLabel', () => {
+    const longFileName = 'very-long-filename-that-would-normally-be-truncated-in-other-contexts.jpg';
+    const imageWithLongName = {
+      fileName: longFileName,
+      fileSize: '1.0 MB',
+      image: <img src="" alt="Test image with long name" />
+    };
+    render(<ImagePreview {...defaultProps} images={[imageWithLongName]} />);
+    expect(screen.getByText(longFileName)).toBeInTheDocument();
+  });
+});