@patternfly/chatbot 1.0.0

package/src/ImagePreview/ImagePreview.tsx

@@ -0,0 +1,200 @@
+import {
+  Button,
+  ButtonVariant,
+  Icon,
+  ModalBody,
+  ModalBodyProps,
+  ModalFooter,
+  ModalHeader,
+  ModalHeaderProps,
+  Stack,
+  StackItem
+} from '@patternfly/react-core';
+import {
+  useState,
+  useEffect,
+  type FunctionComponent,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent
+} from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal, { ChatbotModalProps } from '../ChatbotModal';
+import FileDetailsLabel, { FileDetailsLabelProps } from '../FileDetailsLabel';
+import { TrashIcon } from '@patternfly/react-icons';
+
+export interface ImagePreviewProps extends Omit<ChatbotModalProps, 'children'> {
+  /** 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;
+  /** Sets modal to compact styling. */
+  isCompact?: boolean;
+  /** Additional props passed to modal header */
+  modalHeaderProps?: ModalHeaderProps;
+  /** Additional props passed to modal body */
+  modalBodyProps?: ModalBodyProps;
+  /** Images displayed in modal */
+  images: { fileName: string; fileSize?: string; image: React.ReactNode }[];
+  /** Flag indicating if the pagination is disabled. */
+  isDisabled?: boolean;
+  /** Accessible label for the pagination component. */
+  paginationAriaLabel?: string;
+  /** Accessible label for the button which moves to the next page. */
+  toNextPageAriaLabel?: string;
+  /** Accessible label for the button which moves to the previous page. */
+  toPreviousPageAriaLabel?: string;
+  /** Function called when user clicks to navigate to next page. */
+  onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when user clicks to navigate to previous page. */
+  onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
+  /** Function called when page is changed. */
+  onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
+  /** Callback function for when file details label close button is clicked */
+  onCloseFileDetailsLabel?: (event: React.MouseEvent, fileName: string, fileId?: string | number) => void;
+  /** Props passed to file details label */
+  fileDetailsLabelProps?: Omit<FileDetailsLabelProps, 'fileName'>;
+  /** Text shown in navigation */
+  paginationContent?: string;
+  /** Navigation progress announced to assistive devices. Should state the current page/image. */
+  screenreaderText?: string;
+}
+
+const ImagePreview: FunctionComponent<ImagePreviewProps> = ({
+  isModalOpen,
+  displayMode = ChatbotDisplayMode.default,
+  isCompact,
+  className,
+  handleModalToggle,
+  title = 'Preview images',
+  modalHeaderProps,
+  modalBodyProps,
+  images,
+  isDisabled,
+  onSetPage,
+  onPreviousClick,
+  toNextPageAriaLabel = 'Go to next image',
+  toPreviousPageAriaLabel = 'Go to previous image',
+  onNextClick,
+  paginationAriaLabel,
+  onCloseFileDetailsLabel,
+  fileDetailsLabelProps,
+  paginationContent,
+  screenreaderText,
+  ...props
+}: ImagePreviewProps) => {
+  const [page, setPage] = useState(1);
+  const paginationText = paginationContent || `${page}/${images.length}`;
+
+  useEffect(() => {
+    if (images.length === 0 || page > images.length) {
+      setPage(1);
+    }
+  }, [images.length, page]);
+
+  const handleNewPage = (_evt: ReactMouseEvent | ReactKeyboardEvent | MouseEvent, newPage: number) => {
+    setPage(newPage);
+    onSetPage && onSetPage(_evt, newPage);
+  };
+
+  return (
+    <ChatbotModal
+      isOpen={isModalOpen}
+      className={`pf-chatbot__image-preview-modal pf-chatbot__image-preview-modal--${displayMode} ${isCompact ? 'pf-m-compact' : ''} ${className ? className : ''}`}
+      displayMode={displayMode}
+      onClose={handleModalToggle}
+      isCompact={isCompact}
+      {...props}
+    >
+      <ModalHeader title={title} {...modalHeaderProps} />
+      <ModalBody className="pf-chatbot__image-preview-body" {...modalBodyProps}>
+        {images.length > 0 && images[page - 1] && (
+          <Stack hasGutter className="pf-chatbot__image-preview-stack">
+            <StackItem>
+              <FileDetailsLabel
+                fileName={images[page - 1].fileName}
+                fileSize={images[page - 1].fileSize}
+                hasTruncation={false}
+                onClose={onCloseFileDetailsLabel}
+                closeButtonIcon={<TrashIcon />}
+                {...fileDetailsLabelProps}
+              />
+            </StackItem>
+            <StackItem>
+              <div className="pf-chatbot__image-preview-body">{images[page - 1].image}</div>
+            </StackItem>
+          </Stack>
+        )}
+      </ModalBody>
+      {images.length > 1 && (
+        <ModalFooter className="pf-chatbot__image-preview-footer">
+          <nav className={`pf-chatbot__image-preview-footer-buttons`} aria-label={paginationAriaLabel}>
+            <Button
+              variant={ButtonVariant.plain}
+              isDisabled={isDisabled || page === 1}
+              data-action="previous"
+              onClick={(event) => {
+                const newPage = page > 1 ? page - 1 : 1;
+                handleNewPage(event, newPage);
+                onPreviousClick && onPreviousClick(event, newPage);
+              }}
+              aria-label={toPreviousPageAriaLabel}
+            >
+              <Icon iconSize="lg">
+                {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                <svg
+                  className="pf-v6-svg"
+                  viewBox="0 0 280 500"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path>
+                </svg>
+              </Icon>
+            </Button>
+            <span>{paginationText}</span>
+            <div className="pf-chatbot-m-hidden" aria-live="polite">
+              {screenreaderText ?? `Image ${page} of ${images.length}`}
+            </div>
+            <Button
+              variant={ButtonVariant.plain}
+              isDisabled={isDisabled || page === images.length}
+              aria-label={toNextPageAriaLabel}
+              data-action="next"
+              onClick={(event) => {
+                const newPage = page + 1 <= images.length ? page + 1 : images.length;
+                handleNewPage(event, newPage);
+                onNextClick && onNextClick(event, newPage);
+              }}
+            >
+              <Icon isInline iconSize="lg">
+                {/* these are inline because the viewBox that works in a round icon is different than the PatternFly default */}
+                <svg
+                  className="pf-v6-svg"
+                  viewBox="0 0 180 500"
+                  fill="currentColor"
+                  aria-hidden="true"
+                  role="img"
+                  width="1em"
+                  height="1em"
+                >
+                  <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"></path>
+                </svg>
+              </Icon>
+            </Button>
+          </nav>
+        </ModalFooter>
+      )}
+    </ChatbotModal>
+  );
+};
+
+export default ImagePreview;

package/src/ImagePreview/index.ts

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

package/src/LoadingMessage/LoadingMessage.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import LoadingMessage from './LoadingMessage';
+
+describe('LoadingMessage', () => {
+  it('should render loading message', () => {
+    const { container } = render(<LoadingMessage />);
+    expect(container).toMatchSnapshot();
+  });
+  it('should render loading message correctly', () => {
+    render(<LoadingMessage />);
+    expect(screen.getAllByText('.')).toBeTruthy();
+    expect(screen.getAllByText('.')).toHaveLength(3);
+  });
+});

package/src/LoadingMessage/LoadingMessage.tsx

@@ -0,0 +1,27 @@
+import type { FunctionComponent } from 'react';
+import { Icon, Split, SplitItem } from '@patternfly/react-core';
+
+import RobotIcon from '@patternfly/react-icons/dist/js/icons/robot-icon';
+
+export interface LoadingMessageProps {
+  icon?: React.ComponentType;
+}
+
+export const LoadingMessage: FunctionComponent<LoadingMessageProps> = ({ icon: IconComponent = RobotIcon }) => (
+  <Split>
+    <SplitItem>
+      <Icon size="lg" className="pf-v6-u-mr-sm pf-v6-u-pt-md">
+        <IconComponent />
+      </Icon>
+    </SplitItem>
+    <SplitItem className="pf-u-background-color-200">
+      <div className="pf-v6-u-display-flex pf-u-align-items-center">
+        <div>.</div>
+        <div>.</div>
+        <div>.</div>
+      </div>
+    </SplitItem>
+  </Split>
+);
+
+export default LoadingMessage;

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

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoadingMessage should render loading message 1`] = `
+<div>
+  <div
+    class="pf-v6-l-split"
+  >
+    <div
+      class="pf-v6-l-split__item"
+    >
+      <span
+        class="pf-v6-c-icon pf-m-lg pf-v6-u-mr-sm pf-v6-u-pt-md"
+      >
+        <span
+          class="pf-v6-c-icon__content"
+        >
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            width="1em"
+          >
+            <svg
+              class="pf-v6-icon-default"
+              viewBox="0 0 640 512"
+            >
+              <path
+                d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"
+              />
+            </svg>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M29 22.5V29a1 1 0 1 1-2 0v-6H5v6a1 1 0 1 1-2 0v-6.5c0-.827.673-1.5 1.5-1.5h23c.827 0 1.5.673 1.5 1.5ZM3 11a1 1 0 0 1 1-1h2V5.5C6 4.673 6.673 4 7.5 4H12V2a1 1 0 1 1 2 0v2h4V2a1 1 0 1 1 2 0v2h4.5c.827 0 1.5.673 1.5 1.5V10h2a1 1 0 1 1 0 2h-2v4.5c0 .827-.673 1.5-1.5 1.5h-17c-.827 0-1.5-.673-1.5-1.5V12H4a1 1 0 0 1-1-1Zm5 5h16V6H8v10Zm5-6.612a1.626 1.626 0 1 0 .001 3.251A1.626 1.626 0 0 0 13 9.388Zm6-.01a1.626 1.626 0 1 0 .001 3.251A1.626 1.626 0 0 0 19 9.378Z"
+              />
+            </svg>
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="pf-v6-l-split__item pf-u-background-color-200"
+    >
+      <div
+        class="pf-v6-u-display-flex pf-u-align-items-center"
+      >
+        <div>
+          .
+        </div>
+        <div>
+          .
+        </div>
+        <div>
+          .
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/LoadingMessage/index.ts

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

package/src/MarkdownContent/MarkdownContent.test.tsx

@@ -0,0 +1,207 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import MarkdownContent from './MarkdownContent';
+import rehypeExternalLinks from '../__mocks__/rehype-external-links';
+
+const BOLD_TEXT = '**Bold text**';
+const ITALIC_TEXT = '*Italic text*';
+const INLINE_CODE = 'Here is inline code: `const x = 5`';
+const CODE_BLOCK = `\`\`\`javascript
+function hello() {
+  console.log('Hello, world!');
+}
+\`\`\``;
+const HEADING = '# Heading 1';
+const LINK = '[PatternFly](https://www.patternfly.org/)';
+const UNORDERED_LIST = `
+* Item 1
+* Item 2
+* Item 3
+`;
+const ORDERED_LIST = `
+1. First item
+2. Second item
+3. Third item
+`;
+const TABLE = `
+| Column 1 | Column 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+`;
+const BLOCKQUOTE = '> This is a blockquote';
+const IMAGE = '![Alt text](https://example.com/image.png)';
+
+describe('MarkdownContent', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render bold text correctly', () => {
+    const { container } = render(<MarkdownContent content={BOLD_TEXT} />);
+    expect(container.querySelector('strong')).toBeTruthy();
+    expect(screen.getByText('Bold text')).toBeTruthy();
+  });
+
+  it('should render italic text correctly', () => {
+    const { container } = render(<MarkdownContent content={ITALIC_TEXT} />);
+    expect(container.querySelector('em')).toBeTruthy();
+    expect(screen.getByText('Italic text')).toBeTruthy();
+  });
+
+  it('should render inline code correctly', () => {
+    render(<MarkdownContent content={INLINE_CODE} />);
+    expect(screen.getByText(/const x = 5/)).toBeTruthy();
+  });
+
+  it('should render code blocks correctly', () => {
+    render(<MarkdownContent content={CODE_BLOCK} />);
+
+    expect(screen.getByText(/function hello/)).toBeVisible();
+    expect(screen.getByText(/console.log/)).toBeVisible();
+    expect(screen.getByRole('button', { name: 'Copy code' })).toBeVisible();
+  });
+
+  it('should render headings correctly', () => {
+    render(<MarkdownContent content={HEADING} />);
+    expect(screen.getByRole('heading', { name: /Heading 1/i })).toBeTruthy();
+  });
+
+  it('should render links correctly', () => {
+    render(<MarkdownContent content={LINK} />);
+    expect(screen.getByRole('link', { name: /PatternFly/i })).toBeTruthy();
+  });
+
+  it('should render unordered lists correctly', () => {
+    render(<MarkdownContent content={UNORDERED_LIST} />);
+    expect(screen.getByText('Item 1')).toBeTruthy();
+    expect(screen.getByText('Item 2')).toBeTruthy();
+    expect(screen.getByText('Item 3')).toBeTruthy();
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+  });
+
+  it('should render ordered lists correctly', () => {
+    render(<MarkdownContent content={ORDERED_LIST} />);
+    expect(screen.getByText('First item')).toBeTruthy();
+    expect(screen.getByText('Second item')).toBeTruthy();
+    expect(screen.getByText('Third item')).toBeTruthy();
+    expect(screen.getAllByRole('listitem')).toHaveLength(3);
+  });
+
+  it('should render tables correctly', () => {
+    render(<MarkdownContent content={TABLE} tableProps={{ 'aria-label': 'Test table' }} />);
+    expect(screen.getByRole('grid', { name: /Test table/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 1/i })).toBeTruthy();
+    expect(screen.getByRole('columnheader', { name: /Column 2/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 1/i })).toBeTruthy();
+    expect(screen.getByRole('cell', { name: /Cell 2/i })).toBeTruthy();
+  });
+
+  it('should render blockquotes correctly', () => {
+    render(<MarkdownContent content={BLOCKQUOTE} />);
+
+    const quote = screen.getByText(/This is a blockquote/);
+    expect(quote).toBeVisible();
+    expect(quote.closest('.pf-v6-c-content--blockquote')?.tagName).toBe('BLOCKQUOTE');
+  });
+
+  it('should render images when hasNoImages is false', () => {
+    render(<MarkdownContent content={IMAGE} hasNoImages={false} />);
+    expect(screen.getByRole('img', { name: /Alt text/i })).toBeTruthy();
+  });
+
+  it('should not render images when hasNoImages is true', () => {
+    render(<MarkdownContent content={IMAGE} hasNoImages />);
+    expect(screen.queryByRole('img', { name: /Alt text/i })).toBeFalsy();
+  });
+
+  it('should disable markdown rendering when isMarkdownDisabled is true', () => {
+    render(<MarkdownContent content={BOLD_TEXT} isMarkdownDisabled />);
+    expect(screen.getByText('**Bold text**')).toBeTruthy();
+  });
+
+  it('should render text component when isMarkdownDisabled is true and textComponent is provided', () => {
+    const textComponent = <div data-testid="custom-text">Custom text component</div>;
+    render(<MarkdownContent content={BOLD_TEXT} isMarkdownDisabled textComponent={textComponent} />);
+    expect(screen.getByTestId('custom-text')).toBeTruthy();
+    expect(screen.getByText('Custom text component')).toBeTruthy();
+  });
+
+  it('should apply isPrimary prop to elements', () => {
+    const { container } = render(<MarkdownContent content={INLINE_CODE} isPrimary />);
+    expect(container.querySelector('.pf-m-primary')).toBeTruthy();
+  });
+
+  it('should apply shouldRetainStyles prop to elements', () => {
+    const { container } = render(<MarkdownContent content={BOLD_TEXT} shouldRetainStyles />);
+    expect(container.querySelector('.pf-m-markdown')).toBeTruthy();
+  });
+
+  it('should pass codeBlockProps to code blocks', () => {
+    render(<MarkdownContent content={CODE_BLOCK} codeBlockProps={{ 'aria-label': 'Custom code block' }} />);
+    expect(screen.getByRole('button', { name: /Custom code block/i })).toBeTruthy();
+  });
+
+  it('should pass tableProps to tables', () => {
+    render(<MarkdownContent content={TABLE} tableProps={{ 'aria-label': 'Custom table label' }} />);
+    expect(screen.getByRole('grid', { name: /Custom table label/i })).toBeTruthy();
+  });
+
+  it('should open links in new tab when openLinkInNewTab is true', () => {
+    render(<MarkdownContent content={LINK} openLinkInNewTab />);
+    expect(rehypeExternalLinks).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not open links in new tab when openLinkInNewTab is false', () => {
+    render(<MarkdownContent content={LINK} openLinkInNewTab={false} />);
+    expect(rehypeExternalLinks).not.toHaveBeenCalled();
+  });
+
+  it('should pass linkProps to links', async () => {
+    const onClick = jest.fn();
+    render(<MarkdownContent content={LINK} linkProps={{ onClick }} />);
+    const link = screen.getByRole('link', { name: /PatternFly/i });
+    link.click();
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle reactMarkdownProps.disallowedElements', () => {
+    render(<MarkdownContent content={CODE_BLOCK} reactMarkdownProps={{ disallowedElements: ['code'] }} />);
+    // Code block should not render when disallowed
+    expect(screen.queryByRole('button', { name: /Copy code/i })).toBeFalsy();
+  });
+
+  it('should render plain text when no markdown is present', () => {
+    render(<MarkdownContent content="Plain text without markdown" />);
+    expect(screen.getByText('Plain text without markdown')).toBeTruthy();
+  });
+
+  it('should handle empty content', () => {
+    const { container } = render(<MarkdownContent content="" />);
+    expect(container.textContent).toBe('');
+  });
+
+  it('should handle undefined content', () => {
+    const { container } = render(<MarkdownContent />);
+    expect(container.textContent).toBe('');
+  });
+
+  it('should render multiple markdown elements together', () => {
+    const content = `# Heading
+
+**Bold text** and *italic text*
+
+\`\`\`javascript
+const x = 5;
+\`\`\`
+
+[Link](https://example.com)`;
+
+    render(<MarkdownContent content={content} />);
+    expect(screen.getByRole('heading', { name: /Heading/i })).toBeTruthy();
+    expect(screen.getByText('Bold text')).toBeTruthy();
+    expect(screen.getByText('italic text')).toBeTruthy();
+    expect(screen.getByText(/const x = 5/)).toBeTruthy();
+    expect(screen.getByRole('link', { name: /Link/i })).toBeTruthy();
+  });
+});