@plteam/chat-ui/dist/views/form/preview/AttachmentsPreview.js

CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript

import * as React from 'react';
import Stack from '@mui/material/Stack';
import { useChatContext } from '../../core/ChatGlobalContext';
import Scrollbar from '../../../ui/Scrollbar';
import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipeVideoPlugin from 'photoswipe-video-plugin/dist/photoswipe-video-plugin.esm.js';
import PreviewItem from './PreviewItem';
import 'photoswipe/style.css';
import { useMobile } from '../../../ui/Responsive';
const AttachmentsPreview = ({ thread, attachments, setAttachments }) => {
    const { enableFileAttachments, onFileDetached } = useChatContext();
    const isMobile = useMobile();
    const galleryId = 'gallery-preview';
    const lightbox = React.useMemo(() => new PhotoSwipeLightbox({
        gallery: `#${galleryId}`,
        children: 'a',
        pswpModule: () => import('photoswipe'),
        zoom: false,
        showHideAnimationType: 'fade',
    }), []);
    React.useEffect(() => {
        new PhotoSwipeVideoPlugin(lightbox, {
            videoAttributes: { controls: true, playsinline: true, muted: true, preload: 'auto' },
        });
        lightbox.init();
        return () => {
            lightbox?.destroy();
        };
    }, [lightbox]);
    const handleDelete = (id, url) => {
        setAttachments(attachments.filter((a) => a.id !== id));
        onFileDetached?.(id);
        URL.revokeObjectURL(url);
        if (thread) {
            thread.isLoadingAttachments.value = thread.isLoadingAttachments.value.filter((i) => i !== id);
        }
    };
    if (!enableFileAttachments)
        return null;
    return (React.createElement(Scrollbar, { style: { maxHeight: 170, borderRadius: 16 } },
        React.createElement(Stack, { flexWrap: isMobile ? "nowrap" : "wrap", flexDirection: "row", gap: 1, className: "pswp-gallery", id: galleryId, paddingRight: (attachments.length && isMobile) ? 0 : 1.5, paddingBottom: (attachments.length && isMobile) ? 1.5 : 0 }, attachments.map((a) => (React.createElement(PreviewItem, { key: a.id, item: a, handleDelete: handleDelete, galleryId: galleryId }))))));
};
export default AttachmentsPreview;