@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
71 lines • 4.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { DocumentIcon } from '../icons/Document';
import CloseIcon from '../icons/Close';
import Button from '../ui/Button';
import Modal from '../ui/Modal';
import { stripHTML } from '../../helpers/utils';
const FilePreview = ({ previewFiles, removeFile, allowRemove = true, isMessagePreview = false, }) => {
const [selectedFile, setSelectedFile] = useState(null);
const [hoveredId, setHoveredId] = useState(null);
const getFileType = (filename, type) => {
var _a, _b;
if (type === 'image') {
const extension = (_a = filename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
switch (extension) {
case 'jpg':
case 'jpeg':
return 'JPEG';
case 'png':
return 'PNG';
default:
return 'Image';
}
}
const extension = (_b = filename.split('.').pop()) === null || _b === void 0 ? void 0 : _b.toLowerCase();
switch (extension) {
case 'pdf':
return 'PDF';
case 'txt':
return 'Text';
case 'json':
return 'JSON';
case 'xlsx':
return 'Excel';
case 'csv':
return 'CSV';
case 'jpg':
case 'jpeg':
return 'JPEG';
case 'png':
return 'PNG';
default:
return 'Document';
}
};
const isImageContent = (content, type) => {
if (type === 'image')
return true;
const hasImageExtension = /\.(jpg|jpeg|png|gif|webp|svg)$/i.test(content);
const isImageUrl = content.startsWith('http') &&
(content.includes('/image/') ||
content.includes('/img/') ||
hasImageExtension);
return isImageUrl || hasImageExtension;
};
return (_jsxs(_Fragment, { children: [previewFiles.length > 0 && (_jsx("div", { className: `memori--preview-container ${isMessagePreview
? 'memori--message-preview'
: 'memori--absolute-preview'}`, children: _jsx("div", { className: "memori--preview-list", children: previewFiles.map((file) => (_jsxs("div", { className: `memori--preview-item ${isImageContent(file.content, file.type)
? 'memori--preview-item--image'
: 'memori--preview-item--document'}`, onMouseEnter: () => setHoveredId(file.id), onMouseLeave: () => setHoveredId(null), onClick: () => setSelectedFile(file), children: [isImageContent(file.content, file.type) ? (_jsx("div", { className: "memori--preview-thumbnail", children: _jsx("img", { src: file.content, alt: file.name }) })) : (_jsx(DocumentIcon, { className: "memori--preview-icon" })), _jsxs("div", { className: "memori--preview-file-info", children: [_jsx("span", { className: "memori--preview-filename", children: file.name }), _jsx("span", { className: "memori--preview-filetype", children: getFileType(file.name, file.type) })] }), allowRemove && (_jsx(Button, { shape: "rounded", icon: _jsx(CloseIcon, {}), danger: true, className: `memori--remove-button ${hoveredId === file.id ? 'visible' : ''}`, onClick: e => {
e.stopPropagation();
removeFile(file.id, file === null || file === void 0 ? void 0 : file.mediumID);
} }))] }, file.id))) }) })), _jsx(Modal, { width: "80%", widthMd: "80%", open: !!selectedFile, className: "memori--modal-preview-file", onClose: () => setSelectedFile(null), closable: true, title: selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.name, children: _jsx("div", { className: "memori--preview-content", style: {
maxHeight: '70vh',
overflowY: 'auto',
textAlign: 'center',
whiteSpace: selectedFile && !isImageContent(selectedFile.content, selectedFile.type) ? 'pre-wrap' : 'normal'
}, children: selectedFile && isImageContent(selectedFile.content, selectedFile.type) ? (_jsx(_Fragment, { children: _jsx("img", { src: selectedFile.content, alt: selectedFile.name, style: { maxWidth: '100%', maxHeight: '60vh' } }) })) : (stripHTML((selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.content) || '')) }) })] }));
};
export default FilePreview;
//# sourceMappingURL=FilePreview.js.map