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

package/src/FileDetails/FileDetails.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-import { Flex, Stack, StackItem, Truncate } from '@patternfly/react-core';
+import { Flex, FlexItem, Truncate } from '@patternfly/react-core';
 import path from 'path-browserify';
-interface FileDetailsProps {
+export interface FileDetailsProps {
   /** Class name applied to container */
   className?: string;
   /** Name of file, including extension */
@@ -10,8 +10,24 @@ interface FileDetailsProps {
   languageTestId?: string;
   /** Class name applied to file name */
   fileNameClassName?: string;
+  /** File size */
+  fileSize?: string;
+  /** Whether to truncate file name */
+  hasTruncation?: boolean;
 }
 
+// manually added for image modal
+// based on https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
+export const IMAGE_FORMATS = {
+  png: 'PNG',
+  apng: 'APNG',
+  avif: 'AVIF',
+  gif: 'GIF',
+  jpg: 'JPEG',
+  svg: 'SVG',
+  webp: 'WebP'
+};
+
 // source https://gist.github.com/ppisarczyk/43962d06686722d26d176fad46879d41
 // FIXME We could probably check against the PF Language hash to trim this down to what the code editor supports.
 // I can also see an argument to leaving this open, or researching what the third-party we use for uploads is using
@@ -678,7 +694,6 @@ export const extensionToLanguage = {
   viw: 'SQL',
   db2: 'SQLPL',
   ston: 'STON',
-  svg: 'SVG',
   sage: 'Sage',
   sagews: 'Sage',
   sls: 'Scheme',
@@ -935,54 +950,96 @@ export const extensionToLanguage = {
   ppt: 'Presentation',
   pptx: 'Presentation',
   odp: 'Presentation',
-  pdf: 'PDF'
+  pdf: 'PDF',
+  // manually added for image modal
+  // based on https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
+  ...IMAGE_FORMATS
 };
 
 export const FileDetails = ({
   className,
   fileName,
   fileNameClassName,
-  languageTestId
+  languageTestId,
+  fileSize,
+  hasTruncation = true
 }: PropsWithChildren<FileDetailsProps>) => {
   const language = extensionToLanguage[path.extname(fileName).slice(1)]?.toUpperCase();
+  const isImage = IMAGE_FORMATS[path.extname(fileName).slice(1)] ? true : false;
   return (
     <Flex className={`pf-chatbot__file-details ${className ? className : ''}`} gap={{ default: 'gapSm' }}>
       <Flex
-        className="pf-chatbot__code-icon"
+        className={`${isImage ? 'pf-chatbot__image-icon' : 'pf-chatbot__code-icon'}`}
         justifyContent={{ default: 'justifyContentCenter' }}
         alignItems={{ default: 'alignItemsCenter' }}
         alignSelf={{ default: 'alignSelfCenter' }}
       >
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
-            fill="currentColor"
-          />
-          <g clipPath="url(#clip0_3280_27505)">
+        {isImage ? (
+          <svg
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="25"
+            viewBox="0 0 24 25"
+            fill="none"
+          >
+            <path
+              d="M0 4.5C0 2.29086 1.79086 0.5 4 0.5H20C22.2091 0.5 24 2.29086 24 4.5V20.5C24 22.7091 22.2091 24.5 20 24.5H4C1.79086 24.5 0 22.7091 0 20.5V4.5Z"
+              fill="currentColor"
+            />
             <path
-              d="M13.8204 5.63002C13.3954 5.50752 12.9529 5.75502 12.8304 6.18002L9.63035 17.38C9.50785 17.805 9.75535 18.2475 10.1804 18.37C10.6054 18.4925 11.0479 18.245 11.1704 17.82L14.3704 6.62002C14.4929 6.19502 14.2454 5.75252 13.8204 5.63002ZM15.8354 8.63252C15.5229 8.94502 15.5229 9.45252 15.8354 9.76502L18.0679 12L15.8329 14.235C15.5204 14.5475 15.5204 15.055 15.8329 15.3675C16.1454 15.68 16.6529 15.68 16.9654 15.3675L19.7654 12.5675C20.0779 12.255 20.0779 11.7475 19.7654 11.435L16.9654 8.63502C16.6529 8.32252 16.1454 8.32252 15.8329 8.63502L15.8354 8.63252ZM8.16785 8.63252C7.85535 8.32002 7.34785 8.32002 7.03535 8.63252L4.23535 11.4325C3.92285 11.745 3.92285 12.2525 4.23535 12.565L7.03535 15.365C7.34785 15.6775 7.85535 15.6775 8.16785 15.365C8.48035 15.0525 8.48035 14.545 8.16785 14.2325L5.93285 12L8.16785 9.76502C8.48035 9.45252 8.48035 8.94502 8.16785 8.63252Z"
+              d="M4 7.5C4 6.39688 4.89688 5.5 6 5.5H18C19.1031 5.5 20 6.39688 20 7.5V17.5C20 18.6031 19.1031 19.5 18 19.5H6C4.89688 19.5 4 18.6031 4 17.5V7.5ZM14.1187 10.8281C13.9781 10.6219 13.7469 10.5 13.5 10.5C13.2531 10.5 13.0188 10.6219 12.8813 10.8281L10.1625 14.8156L9.33437 13.7812C9.19062 13.6031 8.975 13.5 8.75 13.5C8.525 13.5 8.30625 13.6031 8.16563 13.7812L6.16563 16.2812C5.98438 16.5063 5.95 16.8156 6.075 17.075C6.2 17.3344 6.4625 17.5 6.75 17.5H9.75H10.75H17.25C17.5281 17.5 17.7844 17.3469 17.9125 17.1C18.0406 16.8531 18.025 16.5562 17.8687 16.3281L14.1187 10.8281ZM7.5 10.5C7.89782 10.5 8.27936 10.342 8.56066 10.0607C8.84196 9.77936 9 9.39782 9 9C9 8.60218 8.84196 8.22064 8.56066 7.93934C8.27936 7.65804 7.89782 7.5 7.5 7.5C7.10218 7.5 6.72064 7.65804 6.43934 7.93934C6.15804 8.22064 6 8.60218 6 9C6 9.39782 6.15804 9.77936 6.43934 10.0607C6.72064 10.342 7.10218 10.5 7.5 10.5Z"
               fill="white"
             />
-          </g>
-          <defs>
-            <clipPath>
-              <rect width="16" height="12.8" fill="white" transform="translate(4 5.60001)" />
-            </clipPath>
-          </defs>
-        </svg>
-      </Flex>
-      <Stack>
-        <StackItem>
-          <span className="pf-chatbot__code-fileName">
-            <Truncate className={fileNameClassName} content={path.parse(fileName).name} />
-          </span>
-        </StackItem>
-        {language && (
-          <StackItem data-testid={languageTestId} className="pf-chatbot__code-language">
-            {language}
-          </StackItem>
+          </svg>
+        ) : (
+          <svg
+            aria-hidden="true"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
+              fill="currentColor"
+            />
+            <g clipPath="url(#clip0_3280_27505)">
+              <path
+                d="M13.8204 5.63002C13.3954 5.50752 12.9529 5.75502 12.8304 6.18002L9.63035 17.38C9.50785 17.805 9.75535 18.2475 10.1804 18.37C10.6054 18.4925 11.0479 18.245 11.1704 17.82L14.3704 6.62002C14.4929 6.19502 14.2454 5.75252 13.8204 5.63002ZM15.8354 8.63252C15.5229 8.94502 15.5229 9.45252 15.8354 9.76502L18.0679 12L15.8329 14.235C15.5204 14.5475 15.5204 15.055 15.8329 15.3675C16.1454 15.68 16.6529 15.68 16.9654 15.3675L19.7654 12.5675C20.0779 12.255 20.0779 11.7475 19.7654 11.435L16.9654 8.63502C16.6529 8.32252 16.1454 8.32252 15.8329 8.63502L15.8354 8.63252ZM8.16785 8.63252C7.85535 8.32002 7.34785 8.32002 7.03535 8.63252L4.23535 11.4325C3.92285 11.745 3.92285 12.2525 4.23535 12.565L7.03535 15.365C7.34785 15.6775 7.85535 15.6775 8.16785 15.365C8.48035 15.0525 8.48035 14.545 8.16785 14.2325L5.93285 12L8.16785 9.76502C8.48035 9.45252 8.48035 8.94502 8.16785 8.63252Z"
+                fill="white"
+              />
+            </g>
+            <defs>
+              <clipPath>
+                <rect width="16" height="12.8" fill="white" transform="translate(4 5.60001)" />
+              </clipPath>
+            </defs>
+          </svg>
         )}
-      </Stack>
+      </Flex>
+      <Flex gap={{ default: 'gapXs' }}>
+        <FlexItem>
+          <Flex direction={{ default: 'column' }} gap={{ default: 'gapNone' }}>
+            <FlexItem>
+              <span className="pf-chatbot__code-fileName">
+                {hasTruncation ? (
+                  <Truncate className={fileNameClassName} content={path.parse(fileName).name} />
+                ) : (
+                  fileName
+                )}
+              </span>
+            </FlexItem>
+            {!isImage && language && (
+              <FlexItem data-testid={languageTestId} className="pf-chatbot__code-language">
+                {language}
+              </FlexItem>
+            )}
+          </Flex>
+        </FlexItem>
+        {fileSize && <FlexItem className="pf-chatbot__code-file-size">{fileSize}</FlexItem>}
+      </Flex>
     </Flex>
   );
 };

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

@@ -9,6 +9,7 @@ exports[`FileDetails should render file details 1`] = `
       class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"
     >
       <svg
+        aria-hidden="true"
         fill="currentColor"
         height="24"
         viewBox="0 0 24 24"
@@ -40,33 +41,38 @@ exports[`FileDetails should render file details 1`] = `
       </svg>
     </div>
     <div
-      class="pf-v6-l-stack"
+      class="pf-v6-l-flex pf-m-gap-xs"
     >
       <div
-        class="pf-v6-l-stack__item"
+        class=""
       >
-        <span
-          class="pf-chatbot__code-fileName"
+        <div
+          class="pf-v6-l-flex pf-m-column pf-m-gap-none"
         >
           <div
-            style="display: contents;"
+            class=""
           >
             <span
-              class="pf-v6-c-truncate"
+              class="pf-chatbot__code-fileName"
             >
               <span
-                class="pf-v6-c-truncate__start"
+                class="pf-v6-c-truncate"
+                tabindex="0"
               >
-                test
+                <span
+                  class="pf-v6-c-truncate__start"
+                >
+                  test
+                </span>
               </span>
             </span>
           </div>
-        </span>
-      </div>
-      <div
-        class="pf-v6-l-stack__item pf-chatbot__code-language"
-      >
-        TEXT
+          <div
+            class="pf-chatbot__code-language"
+          >
+            TEXT
+          </div>
+        </div>
       </div>
     </div>
   </div>

package/src/FileDetailsLabel/FileDetailsLabel.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import FileDetailsLabel from './FileDetailsLabel';
 import userEvent from '@testing-library/user-event';
+import { BellIcon } from '@patternfly/react-icons';
 
 describe('FileDetailsLabel', () => {
   it('should render file details label', () => {
@@ -18,6 +19,19 @@ describe('FileDetailsLabel', () => {
     expect(screen.getByText('test')).toBeTruthy();
     expect(screen.queryByTestId('language')).toBeFalsy();
   });
+  it('should pass file size down', () => {
+    render(<FileDetailsLabel fileName="test.svg" fileSize="100MB" />);
+    expect(screen.getByText('100MB')).toBeTruthy();
+  });
+  it('should pass truncation prop down as true by default', () => {
+    render(<FileDetailsLabel fileName="test.svg" />);
+    expect(screen.getByText('test')).toBeTruthy();
+    expect(screen.queryByText('test.svg')).toBeFalsy();
+  });
+  it('should pass truncation prop down when false', () => {
+    render(<FileDetailsLabel fileName="test.svg" hasTruncation={false} />);
+    expect(screen.getByText('test.svg')).toBeTruthy();
+  });
   it('should not show spinner by default', () => {
     render(<FileDetailsLabel fileName="test.txt" spinnerTestId="spinner" />);
     expect(screen.queryByTestId('spinner')).toBeFalsy();
@@ -42,6 +56,12 @@ describe('FileDetailsLabel', () => {
   });
   it('should use closeButtonAriaLabel prop appropriately', () => {
     render(<FileDetailsLabel fileName="test.txt" onClose={jest.fn()} closeButtonAriaLabel="Delete file" />);
-    screen.getByRole('button', { name: /Delete file/i });
+    expect(screen.getByRole('button', { name: /Delete file/i })).toBeTruthy();
+  });
+  it('should support custom close icon', () => {
+    render(
+      <FileDetailsLabel fileName="test.txt" onClose={jest.fn()} closeButtonIcon={<BellIcon data-testid="bell" />} />
+    );
+    expect(screen.getByTestId('bell')).toBeTruthy();
   });
 });

package/src/FileDetailsLabel/FileDetailsLabel.tsx

@@ -4,7 +4,7 @@ import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
 
-interface FileDetailsLabelProps {
+export interface FileDetailsLabelProps {
   /** Name of file, including extension */
   fileName: string;
   /** Unique id of file */
@@ -21,6 +21,12 @@ interface FileDetailsLabelProps {
   languageTestId?: string;
   /** Custom test id for the loading spinner in the component */
   spinnerTestId?: string;
+  /** File size */
+  fileSize?: string;
+  /** Whether to truncate file name */
+  hasTruncation?: boolean;
+  /** Icon used for close button */
+  closeButtonIcon?: React.ReactNode;
 }
 
 export const FileDetailsLabel = ({
@@ -31,7 +37,11 @@ export const FileDetailsLabel = ({
   onClose,
   closeButtonAriaLabel,
   languageTestId,
-  spinnerTestId
+  spinnerTestId,
+  fileSize,
+  hasTruncation = true,
+  closeButtonIcon = <TimesIcon />,
+  ...props
 }: PropsWithChildren<FileDetailsLabelProps>) => {
   const handleClose = (event) => {
     onClose && onClose(event, fileName, fileId);
@@ -45,17 +55,20 @@ export const FileDetailsLabel = ({
           type="button"
           variant="plain"
           aria-label={closeButtonAriaLabel ?? `Close ${fileName}`}
-          icon={<TimesIcon />}
+          icon={closeButtonIcon}
           onClick={handleClose}
         />
       }
       {...(onClick && { onClick: (event) => onClick(event, fileName, fileId) })}
+      {...props}
     >
       <div className="pf-chatbot__file-label-contents">
         <FileDetails
           className={isLoading ? 'pf-chatbot__file-label-loading' : undefined}
           fileName={fileName}
           languageTestId={languageTestId}
+          fileSize={fileSize}
+          hasTruncation={hasTruncation}
         />
         {isLoading && <Spinner data-testid={spinnerTestId} size="sm" />}
       </div>

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

@@ -21,6 +21,7 @@ exports[`FileDetailsLabel should render file details label 1`] = `
               class="pf-v6-l-flex pf-m-align-items-center pf-m-align-self-center pf-m-justify-content-center pf-chatbot__code-icon"
             >
               <svg
+                aria-hidden="true"
                 fill="currentColor"
                 height="24"
                 viewBox="0 0 24 24"
@@ -52,33 +53,38 @@ exports[`FileDetailsLabel should render file details label 1`] = `
               </svg>
             </div>
             <div
-              class="pf-v6-l-stack"
+              class="pf-v6-l-flex pf-m-gap-xs"
             >
               <div
-                class="pf-v6-l-stack__item"
+                class=""
               >
-                <span
-                  class="pf-chatbot__code-fileName"
+                <div
+                  class="pf-v6-l-flex pf-m-column pf-m-gap-none"
                 >
                   <div
-                    style="display: contents;"
+                    class=""
                   >
                     <span
-                      class="pf-v6-c-truncate"
+                      class="pf-chatbot__code-fileName"
                     >
                       <span
-                        class="pf-v6-c-truncate__start"
+                        class="pf-v6-c-truncate"
+                        tabindex="0"
                       >
-                        test
+                        <span
+                          class="pf-v6-c-truncate__start"
+                        >
+                          test
+                        </span>
                       </span>
                     </span>
                   </div>
-                </span>
-              </div>
-              <div
-                class="pf-v6-l-stack__item pf-chatbot__code-language"
-              >
-                TEXT
+                  <div
+                    class="pf-chatbot__code-language"
+                  >
+                    TEXT
+                  </div>
+                </div>
               </div>
             </div>
           </div>

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);
+  }
+}