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

package/dist/esm/FileDetails/FileDetails.test.js

@@ -10,6 +10,7 @@ describe('FileDetails', () => {
     it('should render file details correctly if an extension we support is passed in', () => {
         render(_jsx(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();
     });
@@ -18,4 +19,19 @@ describe('FileDetails', () => {
         expect(screen.getByText('test')).toBeTruthy();
         expect(screen.queryByTestId('language')).toBeFalsy();
     });
+    it('should support image formats by rendering extension differently', () => {
+        render(_jsx(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(_jsx(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(_jsx(FileDetails, { fileName: "test.joke", languageTestId: "language", fileSize: "100MB" }));
+        expect(screen.getByText('100MB')).toBeTruthy();
+    });
 });

package/dist/esm/FileDetailsLabel/FileDetailsLabel.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-interface FileDetailsLabelProps {
+export interface FileDetailsLabelProps {
     /** Name of file, including extension */
     fileName: string;
     /** Unique id of file */
@@ -16,6 +16,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 declare const FileDetailsLabel: ({ fileName, fileId, isLoading, onClick, onClose, closeButtonAriaLabel, languageTestId, spinnerTestId }: PropsWithChildren<FileDetailsLabelProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const FileDetailsLabel: ({ fileName, fileId, isLoading, onClick, onClose, closeButtonAriaLabel, languageTestId, spinnerTestId, fileSize, hasTruncation, closeButtonIcon, ...props }: PropsWithChildren<FileDetailsLabelProps>) => import("react/jsx-runtime").JSX.Element;
 export default FileDetailsLabel;

package/dist/esm/FileDetailsLabel/FileDetailsLabel.js

@@ -1,12 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Label } from '@patternfly/react-core';
 import FileDetails from '../FileDetails';
 import { Spinner } from '@patternfly/react-core';
 import { TimesIcon } from '@patternfly/react-icons';
-export const FileDetailsLabel = ({ fileName, fileId, isLoading, onClick, onClose, closeButtonAriaLabel, languageTestId, spinnerTestId }) => {
+export const FileDetailsLabel = (_a) => {
+    var { fileName, fileId, isLoading, onClick, onClose, closeButtonAriaLabel, languageTestId, spinnerTestId, fileSize, hasTruncation = true, closeButtonIcon = _jsx(TimesIcon, {}) } = _a, props = __rest(_a, ["fileName", "fileId", "isLoading", "onClick", "onClose", "closeButtonAriaLabel", "languageTestId", "spinnerTestId", "fileSize", "hasTruncation", "closeButtonIcon"]);
     const handleClose = (event) => {
         onClose && onClose(event, fileName, fileId);
     };
-    return (_jsx(Label, Object.assign({ className: "pf-chatbot__file-label" }, (onClose && { onClose: (event) => onClose(event, fileName, fileId) }), { closeBtn: _jsx(Button, { type: "button", variant: "plain", "aria-label": closeButtonAriaLabel !== null && closeButtonAriaLabel !== void 0 ? closeButtonAriaLabel : `Close ${fileName}`, icon: _jsx(TimesIcon, {}), onClick: handleClose }) }, (onClick && { onClick: (event) => onClick(event, fileName, fileId) }), { children: _jsxs("div", { className: "pf-chatbot__file-label-contents", children: [_jsx(FileDetails, { className: isLoading ? 'pf-chatbot__file-label-loading' : undefined, fileName: fileName, languageTestId: languageTestId }), isLoading && _jsx(Spinner, { "data-testid": spinnerTestId, size: "sm" })] }) })));
+    return (_jsx(Label, Object.assign({ className: "pf-chatbot__file-label" }, (onClose && { onClose: (event) => onClose(event, fileName, fileId) }), { closeBtn: _jsx(Button, { type: "button", variant: "plain", "aria-label": closeButtonAriaLabel !== null && closeButtonAriaLabel !== void 0 ? closeButtonAriaLabel : `Close ${fileName}`, icon: closeButtonIcon, onClick: handleClose }) }, (onClick && { onClick: (event) => onClick(event, fileName, fileId) }), props, { children: _jsxs("div", { className: "pf-chatbot__file-label-contents", children: [_jsx(FileDetails, { className: isLoading ? 'pf-chatbot__file-label-loading' : undefined, fileName: fileName, languageTestId: languageTestId, fileSize: fileSize, hasTruncation: hasTruncation }), isLoading && _jsx(Spinner, { "data-testid": spinnerTestId, size: "sm" })] }) })));
 };
 export default FileDetailsLabel;

package/dist/esm/FileDetailsLabel/FileDetailsLabel.test.js

@@ -12,6 +12,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', () => {
         const { container } = render(_jsx(FileDetailsLabel, { fileName: "test.txt" }));
@@ -27,6 +28,19 @@ describe('FileDetailsLabel', () => {
         expect(screen.getByText('test')).toBeTruthy();
         expect(screen.queryByTestId('language')).toBeFalsy();
     });
+    it('should pass file size down', () => {
+        render(_jsx(FileDetailsLabel, { fileName: "test.svg", fileSize: "100MB" }));
+        expect(screen.getByText('100MB')).toBeTruthy();
+    });
+    it('should pass truncation prop down as true by default', () => {
+        render(_jsx(FileDetailsLabel, { fileName: "test.svg" }));
+        expect(screen.getByText('test')).toBeTruthy();
+        expect(screen.queryByText('test.svg')).toBeFalsy();
+    });
+    it('should pass truncation prop down when false', () => {
+        render(_jsx(FileDetailsLabel, { fileName: "test.svg", hasTruncation: false }));
+        expect(screen.getByText('test.svg')).toBeTruthy();
+    });
     it('should not show spinner by default', () => {
         render(_jsx(FileDetailsLabel, { fileName: "test.txt", spinnerTestId: "spinner" }));
         expect(screen.queryByTestId('spinner')).toBeFalsy();
@@ -51,6 +65,10 @@ describe('FileDetailsLabel', () => {
     }));
     it('should use closeButtonAriaLabel prop appropriately', () => {
         render(_jsx(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(_jsx(FileDetailsLabel, { fileName: "test.txt", onClose: jest.fn(), closeButtonIcon: _jsx(BellIcon, { "data-testid": "bell" }) }));
+        expect(screen.getByTestId('bell')).toBeTruthy();
     });
 });

package/dist/esm/ImagePreview/ImagePreview.d.ts

@@ -0,0 +1,53 @@
+import { ModalBodyProps, ModalHeaderProps } from '@patternfly/react-core';
+import { type FunctionComponent } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import { ChatbotModalProps } from '../ChatbotModal';
+import { FileDetailsLabelProps } from '../FileDetailsLabel';
+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;
+}
+declare const ImagePreview: FunctionComponent<ImagePreviewProps>;
+export default ImagePreview;

package/dist/esm/ImagePreview/ImagePreview.js

@@ -0,0 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, ButtonVariant, Icon, ModalBody, ModalFooter, ModalHeader, Stack, StackItem } from '@patternfly/react-core';
+import { useState, useEffect } from 'react';
+import { ChatbotDisplayMode } from '../Chatbot';
+import ChatbotModal from '../ChatbotModal';
+import FileDetailsLabel from '../FileDetailsLabel';
+import { TrashIcon } from '@patternfly/react-icons';
+const ImagePreview = (_a) => {
+    var { 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 } = _a, props = __rest(_a, ["isModalOpen", "displayMode", "isCompact", "className", "handleModalToggle", "title", "modalHeaderProps", "modalBodyProps", "images", "isDisabled", "onSetPage", "onPreviousClick", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "paginationAriaLabel", "onCloseFileDetailsLabel", "fileDetailsLabelProps", "paginationContent", "screenreaderText"]);
+    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, newPage) => {
+        setPage(newPage);
+        onSetPage && onSetPage(_evt, newPage);
+    };
+    return (_jsxs(ChatbotModal, Object.assign({ 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, { children: [_jsx(ModalHeader, Object.assign({ title: title }, modalHeaderProps)), _jsx(ModalBody, Object.assign({ className: "pf-chatbot__image-preview-body" }, modalBodyProps, { children: images.length > 0 && images[page - 1] && (_jsxs(Stack, { hasGutter: true, className: "pf-chatbot__image-preview-stack", children: [_jsx(StackItem, { children: _jsx(FileDetailsLabel, Object.assign({ fileName: images[page - 1].fileName, fileSize: images[page - 1].fileSize, hasTruncation: false, onClose: onCloseFileDetailsLabel, closeButtonIcon: _jsx(TrashIcon, {}) }, fileDetailsLabelProps)) }), _jsx(StackItem, { children: _jsx("div", { className: "pf-chatbot__image-preview-body", children: images[page - 1].image }) })] })) })), images.length > 1 && (_jsx(ModalFooter, { className: "pf-chatbot__image-preview-footer", children: _jsxs("nav", { className: `pf-chatbot__image-preview-footer-buttons`, "aria-label": paginationAriaLabel, children: [_jsx(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, children: _jsx(Icon, { iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("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" }) }) }) }), _jsx("span", { children: paginationText }), _jsx("div", { className: "pf-chatbot-m-hidden", "aria-live": "polite", children: screenreaderText !== null && screenreaderText !== void 0 ? screenreaderText : `Image ${page} of ${images.length}` }), _jsx(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);
+                            }, children: _jsx(Icon, { isInline: true, iconSize: "lg", children: _jsx("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em", children: _jsx("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" }) }) }) })] }) }))] })));
+};
+export default ImagePreview;

package/dist/esm/ImagePreview/ImagePreview.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/esm/ImagePreview/ImagePreview.test.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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: _jsx("img", { src: "", alt: "Test image 1" })
+    },
+    {
+        fileName: 'image2.png',
+        fileSize: '1.8 MB',
+        image: _jsx("img", { src: "", alt: "Test image 2" })
+    },
+    {
+        fileName: 'image3.gif',
+        image: _jsx("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(_jsx(ImagePreview, Object.assign({}, defaultProps)));
+        expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+    it('does not render modal when isModalOpen is false', () => {
+        render(_jsx(ImagePreview, Object.assign({}, defaultProps, { isModalOpen: false })));
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    });
+    it('displays custom title when provided', () => {
+        const customTitle = 'Custom image preview';
+        render(_jsx(ImagePreview, Object.assign({}, defaultProps, { title: customTitle })));
+        expect(screen.getByRole('heading', { name: customTitle })).toBeInTheDocument();
+    });
+    it('displays default title when no title provided', () => {
+        render(_jsx(ImagePreview, Object.assign({}, defaultProps)));
+        expect(screen.getByRole('heading', { name: /Preview images/i })).toBeInTheDocument();
+    });
+    it('calls handleModalToggle when modal is closed', () => {
+        const mockHandleToggle = jest.fn();
+        render(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, defaultProps)));
+        expect(screen.getByText('1/3')).toBeInTheDocument();
+    });
+    it('navigates to next image when next button is clicked', () => {
+        const mockOnNextClick = jest.fn();
+        render(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, defaultProps)));
+        const previousButton = screen.getByRole('button', { name: /Go to previous image/i });
+        expect(previousButton).toBeDisabled();
+    });
+    it('disables next button on last page', () => {
+        render(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, defaultProps, { className: customClassName })));
+        const modal = screen.getByRole('dialog');
+        expect(modal).toHaveClass(customClassName);
+    });
+    it('applies display mode class correctly', () => {
+        render(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, 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(_jsx(ImagePreview, Object.assign({}, defaultProps, { fileDetailsLabelProps: customFileDetailsProps })));
+        expect(screen.getByTestId('custom-file-details')).toBeInTheDocument();
+    });
+    it('displays file details for current page when navigating', () => {
+        render(_jsx(ImagePreview, Object.assign({}, 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: _jsx("img", { src: "", alt: "Test image with long name" })
+        };
+        render(_jsx(ImagePreview, Object.assign({}, defaultProps, { images: [imageWithLongName] })));
+        expect(screen.getByText(longFileName)).toBeInTheDocument();
+    });
+});

package/dist/esm/ImagePreview/index.d.ts

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

package/dist/esm/ImagePreview/index.js

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

package/dist/esm/MessageBox/MessageBox.js

@@ -200,6 +200,6 @@ export const MessageBox = forwardRef((_a, ref) => {
         onTouchMove,
         onTouchEnd
     };
-    return (_jsxs(_Fragment, { children: [_jsx(JumpButton, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), _jsxs("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, _jsx("div", { className: "pf-chatbot__messagebox-announcement", "aria-live": "polite", children: announcement })] })), _jsx(JumpButton, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(JumpButton, { position: "top", isHidden: isOverflowing && atTop, onClick: scrollToTop, jumpButtonProps: jumpButtonTopProps, jumpButtonTooltipProps: jumpButtonTopTooltipProps }), _jsxs("div", Object.assign({ role: "region", tabIndex: 0, "aria-label": ariaLabel, className: `pf-chatbot__messagebox ${position === 'bottom' ? 'pf-chatbot__messagebox--bottom' : ''} ${className !== null && className !== void 0 ? className : ''}`, ref: messageBoxRef }, props, (enableSmartScroll ? Object.assign({}, smartScrollHandlers) : {}), { children: [children, _jsx("div", { className: "pf-chatbot__messagebox-announcement pf-chatbot-m-hidden", "aria-live": "polite", children: announcement })] })), _jsx(JumpButton, { position: "bottom", isHidden: isOverflowing && atBottom, onClick: () => scrollToBottom({ resumeSmartScroll: true }), jumpButtonProps: jumpButtonBottomProps, jumpButtonTooltipProps: jumpButtonBottomTooltipProps })] }));
 });
 export default MessageBox;

package/dist/esm/index.d.ts

@@ -36,6 +36,8 @@ export { default as FileDropZone } from './FileDropZone';
 export * from './FileDropZone';
 export { default as FilePreview } from './FilePreview';
 export * from './FilePreview';
+export { default as ImagePreview } from './ImagePreview';
+export * from './ImagePreview';
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
 export { default as Message } from './Message';

package/dist/esm/index.js

@@ -37,6 +37,8 @@ export { default as FileDropZone } from './FileDropZone';
 export * from './FileDropZone';
 export { default as FilePreview } from './FilePreview';
 export * from './FilePreview';
+export { default as ImagePreview } from './ImagePreview';
+export * from './ImagePreview';
 export { default as LoadingMessage } from './LoadingMessage';
 export * from './LoadingMessage';
 export { default as Message } from './Message';

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/DeepThinking/DeepThinking.test.tsx","../src/DeepThinking/DeepThinking.tsx","../src/DeepThinking/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/FilePreview/FilePreview.test.tsx","../src/FilePreview/FilePreview.tsx","../src/FilePreview/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/SuperscriptMessage/SuperscriptMessage.tsx","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/AttachMenu/AttachMenu.tsx","../src/AttachMenu/index.ts","../src/AttachmentEdit/AttachmentEdit.test.tsx","../src/AttachmentEdit/AttachmentEdit.tsx","../src/AttachmentEdit/index.ts","../src/Chatbot/Chatbot.test.tsx","../src/Chatbot/Chatbot.tsx","../src/Chatbot/index.ts","../src/ChatbotAlert/ChatbotAlert.test.tsx","../src/ChatbotAlert/ChatbotAlert.tsx","../src/ChatbotAlert/index.ts","../src/ChatbotContent/ChatbotContent.test.tsx","../src/ChatbotContent/ChatbotContent.tsx","../src/ChatbotContent/index.ts","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryDropdown.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx","../src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx","../src/ChatbotConversationHistoryNav/EmptyState.tsx","../src/ChatbotConversationHistoryNav/LoadingState.tsx","../src/ChatbotConversationHistoryNav/index.ts","../src/ChatbotFooter/ChatbotFooter.test.tsx","../src/ChatbotFooter/ChatbotFooter.tsx","../src/ChatbotFooter/ChatbotFooternote.test.tsx","../src/ChatbotFooter/ChatbotFootnote.tsx","../src/ChatbotFooter/index.ts","../src/ChatbotHeader/ChatbotHeader.test.tsx","../src/ChatbotHeader/ChatbotHeader.tsx","../src/ChatbotHeader/ChatbotHeaderActions.test.tsx","../src/ChatbotHeader/ChatbotHeaderActions.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderCloseButton.tsx","../src/ChatbotHeader/ChatbotHeaderMain.test.tsx","../src/ChatbotHeader/ChatbotHeaderMain.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.test.tsx","../src/ChatbotHeader/ChatbotHeaderMenu.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.test.tsx","../src/ChatbotHeader/ChatbotHeaderNewChatButton.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx","../src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.test.tsx","../src/ChatbotHeader/ChatbotHeaderTitle.tsx","../src/ChatbotHeader/index.ts","../src/ChatbotModal/ChatbotModal.test.tsx","../src/ChatbotModal/ChatbotModal.tsx","../src/ChatbotModal/index.ts","../src/ChatbotPopover/ChatbotPopover.tsx","../src/ChatbotPopover/index.ts","../src/ChatbotToggle/ChatbotToggle.test.tsx","../src/ChatbotToggle/ChatbotToggle.tsx","../src/ChatbotToggle/index.ts","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.test.tsx","../src/ChatbotWelcomePrompt/ChatbotWelcomePrompt.tsx","../src/ChatbotWelcomePrompt/index.ts","../src/CodeModal/CodeModal.test.tsx","../src/CodeModal/CodeModal.tsx","../src/CodeModal/index.ts","../src/Compare/Compare.test.tsx","../src/Compare/Compare.tsx","../src/Compare/index.ts","../src/DeepThinking/DeepThinking.test.tsx","../src/DeepThinking/DeepThinking.tsx","../src/DeepThinking/index.ts","../src/FileDetails/FileDetails.test.tsx","../src/FileDetails/FileDetails.tsx","../src/FileDetails/index.ts","../src/FileDetailsLabel/FileDetailsLabel.test.tsx","../src/FileDetailsLabel/FileDetailsLabel.tsx","../src/FileDetailsLabel/index.ts","../src/FileDropZone/FileDropZone.test.tsx","../src/FileDropZone/FileDropZone.tsx","../src/FileDropZone/index.ts","../src/FilePreview/FilePreview.test.tsx","../src/FilePreview/FilePreview.tsx","../src/FilePreview/index.ts","../src/ImagePreview/ImagePreview.test.tsx","../src/ImagePreview/ImagePreview.tsx","../src/ImagePreview/index.ts","../src/LoadingMessage/LoadingMessage.test.tsx","../src/LoadingMessage/LoadingMessage.tsx","../src/LoadingMessage/index.ts","../src/Message/Message.test.tsx","../src/Message/Message.tsx","../src/Message/MessageInput.tsx","../src/Message/MessageLoading.tsx","../src/Message/index.ts","../src/Message/CodeBlockMessage/CodeBlockMessage.tsx","../src/Message/ErrorMessage/ErrorMessage.tsx","../src/Message/ImageMessage/ImageMessage.tsx","../src/Message/LinkMessage/LinkMessage.tsx","../src/Message/ListMessage/ListItemMessage.tsx","../src/Message/ListMessage/OrderedListMessage.tsx","../src/Message/ListMessage/UnorderedListMessage.tsx","../src/Message/Plugins/index.ts","../src/Message/Plugins/rehypeCodeBlockToggle.ts","../src/Message/Plugins/rehypeMoveImagesOutOfParagraphs.ts","../src/Message/QuickResponse/QuickResponse.tsx","../src/Message/QuickStarts/FallbackImg.tsx","../src/Message/QuickStarts/QuickStartTile.tsx","../src/Message/QuickStarts/QuickStartTileDescription.test.tsx","../src/Message/QuickStarts/QuickStartTileDescription.tsx","../src/Message/QuickStarts/QuickStartTileHeader.tsx","../src/Message/QuickStarts/monitor-sampleapp-quickstart-with-image.ts","../src/Message/QuickStarts/monitor-sampleapp-quickstart.ts","../src/Message/QuickStarts/types.ts","../src/Message/SuperscriptMessage/SuperscriptMessage.tsx","../src/Message/TableMessage/TableMessage.tsx","../src/Message/TableMessage/TbodyMessage.tsx","../src/Message/TableMessage/TdMessage.tsx","../src/Message/TableMessage/ThMessage.tsx","../src/Message/TableMessage/TheadMessage.tsx","../src/Message/TableMessage/TrMessage.tsx","../src/Message/TextMessage/TextMessage.tsx","../src/Message/UserFeedback/CloseButton.tsx","../src/Message/UserFeedback/UserFeedback.test.tsx","../src/Message/UserFeedback/UserFeedback.tsx","../src/Message/UserFeedback/UserFeedbackComplete.test.tsx","../src/Message/UserFeedback/UserFeedbackComplete.tsx","../src/MessageBar/AttachButton.test.tsx","../src/MessageBar/AttachButton.tsx","../src/MessageBar/MessageBar.test.tsx","../src/MessageBar/MessageBar.tsx","../src/MessageBar/MicrophoneButton.tsx","../src/MessageBar/SendButton.test.tsx","../src/MessageBar/SendButton.tsx","../src/MessageBar/StopButton.test.tsx","../src/MessageBar/StopButton.tsx","../src/MessageBar/index.ts","../src/MessageBox/JumpButton.test.tsx","../src/MessageBox/JumpButton.tsx","../src/MessageBox/MessageBox.test.tsx","../src/MessageBox/MessageBox.tsx","../src/MessageBox/index.ts","../src/MessageDivider/MessageDivider.test.tsx","../src/MessageDivider/MessageDivider.tsx","../src/MessageDivider/index.ts","../src/PreviewAttachment/PreviewAttachment.test.tsx","../src/PreviewAttachment/PreviewAttachment.tsx","../src/PreviewAttachment/index.ts","../src/ResponseActions/ResponseActionButton.test.tsx","../src/ResponseActions/ResponseActionButton.tsx","../src/ResponseActions/ResponseActions.test.tsx","../src/ResponseActions/ResponseActions.tsx","../src/ResponseActions/index.ts","../src/Settings/SettingsForm.test.tsx","../src/Settings/SettingsForm.tsx","../src/Settings/index.ts","../src/SourceDetailsMenuItem/SourceDetailsMenuItem.tsx","../src/SourceDetailsMenuItem/index.ts","../src/SourcesCard/SourcesCard.test.tsx","../src/SourcesCard/SourcesCard.tsx","../src/SourcesCard/index.ts","../src/TermsOfUse/TermsOfUse.test.tsx","../src/TermsOfUse/TermsOfUse.tsx","../src/TermsOfUse/index.ts","../src/ToolResponse/ToolResponse.test.tsx","../src/ToolResponse/ToolResponse.tsx","../src/ToolResponse/index.ts","../src/__mocks__/rehype-external-links.ts","../src/__mocks__/rehype-sanitize.ts","../src/__mocks__/rehype-unwrap-images.tsx","../src/tracking/console_tracking_provider.ts","../src/tracking/index.ts","../src/tracking/posthog_tracking_provider.ts","../src/tracking/segment_tracking_provider.ts","../src/tracking/trackingProviderProxy.ts","../src/tracking/tracking_api.ts","../src/tracking/tracking_registry.ts","../src/tracking/tracking_spi.ts","../src/tracking/umami_tracking_provider.ts"],"version":"5.6.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/chatbot",
-  "version": "6.4.0-prerelease.20",
+  "version": "6.4.0-prerelease.21",
   "description": "This library provides React components based on PatternFly 6 that can be used to build chatbots.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachmentEdit.tsx

@@ -19,7 +19,7 @@ export const AttachmentEditModalExample: FunctionComponent = () => {
         id="modal-compact-edit"
         name="modal-compact-edit"
       ></Checkbox>
-      <Button onClick={handleModalToggle}>Launch modal</Button>
+      <Button onClick={handleModalToggle}>Launch attachment edit modal</Button>
       <AttachmentEdit
         code="I am a code snippet"
         fileName="test.yaml"

package/patternfly-docs/content/extensions/chatbot/examples/Messages/ImagePreview.tsx

@@ -0,0 +1,53 @@
+import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react';
+import { Button, Checkbox } from '@patternfly/react-core';
+import ImagePreview from '@patternfly/chatbot/dist/dynamic/ImagePreview';
+import filePreview from './file-preview.svg';
+
+export const AttachmentEditModalExample: FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isCompact, setIsCompact] = useState(false);
+  const [hasNav, setHasNav] = useState(false);
+
+  const handleModalToggle = (_event: ReactMouseEvent | MouseEvent | KeyboardEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Show multiple images"
+        isChecked={hasNav}
+        onChange={() => setHasNav(!hasNav)}
+        id="modal-compact-image-has-nav"
+        name="modal-compact-image-has-nav"
+      ></Checkbox>
+      <Checkbox
+        label="Show compact version"
+        isChecked={isCompact}
+        onChange={() => setIsCompact(!isCompact)}
+        id="modal-compact-image-preview"
+        name="modal-compact-image-preview"
+      ></Checkbox>
+      <Button onClick={handleModalToggle}>Launch image preview modal</Button>
+      <ImagePreview
+        isModalOpen={isModalOpen}
+        handleModalToggle={handleModalToggle}
+        isCompact={isCompact}
+        onCloseFileDetailsLabel={() => {
+          // eslint-disable-next-line no-console
+          console.log('Clicked close button');
+        }}
+        images={
+          hasNav
+            ? /* eslint-disable indent */
+              [
+                { fileName: 'image1.png', fileSize: '134KB', image: <img src={filePreview} alt="Preview one" /> },
+                { fileName: 'image2.png', fileSize: '134KB', image: <img src={filePreview} alt="Preview two" /> }
+              ]
+            : [{ fileName: 'image.png', fileSize: '134KB', image: <img src={filePreview} alt="One" /> }]
+          /* eslint-enable indent */
+        }
+      ></ImagePreview>
+    </>
+  );
+};