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

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

import React from 'react';
import { styled } from '@mui/material/styles';
import { useObserverValue } from '../../hooks/useObserverValue';
import CircularLoadProgress from './CircularLoadProgress';
import PreviewDeleteButton from './PreviewDeleteButton';
import FileItem from './FileItem';
import GalleryItem from './GalleryItem';
import { useElementRefState } from '../../../views/hooks/useElementRef';
import { useMobile } from '../../../ui/Responsive';
import useHover from '../../../views/hooks/useHover';
import PreviewTooltip from './PreviewTooltip';
import { useChatSlots } from '../../../views/core/ChatSlotsContext';
const TooltipStyled = styled(PreviewTooltip)(() => ({
    '& a': {
        height: 80,
        width: 80,
        lineHeight: 0,
        display: 'block',
    },
    '& img': {
        height: 'inherit',
        width: 'inherit',
        objectFit: 'cover',
        aspectRatio: 'auto',
        objectPosition: 'center',
        borderRadius: 16,
    },
}));
const PreviewItem = ({ item, galleryId, handleDelete }) => {
    const { url, id, name, type, isGallery } = item;
    const { slots, slotProps } = useChatSlots();
    const progress = useObserverValue(item.progress);
    const error = useObserverValue(item.error);
    const poster = useObserverValue(item.poster);
    const { element, setElement } = useElementRefState();
    const { hovered } = useHover(element);
    const isMobile = useMobile();
    const isVideo = type === 'video';
    const showInGallery = isGallery && !error;
    const component = React.useMemo(() => ({
        wrapper: error ? slots.attachmentPreviewError : slots.attachmentPreviewItem,
        props: error ? slotProps.attachmentPreviewError : slotProps.attachmentPreviewItem
    }), [error]);
    return (React.createElement(TooltipStyled, { title: name },
        React.createElement(component.wrapper, { ...component.props, ref: setElement, position: 'relative', height: 80, borderRadius: 4, width: showInGallery ? 80 : 200 },
            (!progress || progress < 100) ? React.createElement(CircularLoadProgress, { progress: progress }) : null,
            showInGallery
                ? (React.createElement(GalleryItem, { id: `${galleryId}-${id}`, poster: poster, videoUrl: isVideo ? url : undefined, showPlayIcon: isVideo })) : React.createElement(FileItem, { name: name, type: type, error: error }),
            (isMobile || hovered) ? React.createElement(PreviewDeleteButton, { onClick: () => handleDelete(id, url) }) : null)));
};
export default PreviewItem;