@plteam/chat-ui/dist/views/message/attachments/MessageFileListItem.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 Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import PreviewDeleteButton from '../../../views/form/preview/PreviewDeleteButton';
import FileItem from '../../../views/form/preview/FileItem';
import { useObserverValue } from '../../../views/hooks/useObserverValue';
import Skeleton from '@mui/material/Skeleton';
import { getSurfaceColor } from "../../utils/colors";
const BoxStyled = styled(Box)(({ theme }) => ({
    position: 'relative',
    backgroundColor: getSurfaceColor(theme),
    borderRadius: 16,
}));
const MessageFileListItem = ({ item, onDelete }) => {
    const isLoading = useObserverValue(item.isLoading);
    const { id, name, type } = item;
    return (React.createElement(BoxStyled, { minWidth: 200, width: 200, height: 80 }, isLoading
        ? (React.createElement(Skeleton, { width: "100%", height: "100%", variant: 'rounded', sx: { borderRadius: '16px' } })) : (React.createElement(React.Fragment, null,
        React.createElement(FileItem, { name: name, type: type }),
        onDelete ? React.createElement(PreviewDeleteButton, { onClick: () => onDelete(id) }) : null))));
};
export default MessageFileListItem;