@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
74 lines • 5.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Document_1 = require("../icons/Document");
const Close_1 = tslib_1.__importDefault(require("../icons/Close"));
const Button_1 = tslib_1.__importDefault(require("../ui/Button"));
const Modal_1 = tslib_1.__importDefault(require("../ui/Modal"));
const utils_1 = require("../../helpers/utils");
const FilePreview = ({ previewFiles, removeFile, allowRemove = true, isMessagePreview = false, }) => {
const [selectedFile, setSelectedFile] = (0, react_1.useState)(null);
const [hoveredId, setHoveredId] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [previewFiles.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `memori--preview-container ${isMessagePreview
? 'memori--message-preview'
: 'memori--absolute-preview'}`, children: (0, jsx_runtime_1.jsx)("div", { className: "memori--preview-list", children: previewFiles.map((file) => ((0, jsx_runtime_1.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) ? ((0, jsx_runtime_1.jsx)("div", { className: "memori--preview-thumbnail", children: (0, jsx_runtime_1.jsx)("img", { src: file.content, alt: file.name }) })) : ((0, jsx_runtime_1.jsx)(Document_1.DocumentIcon, { className: "memori--preview-icon" })), (0, jsx_runtime_1.jsxs)("div", { className: "memori--preview-file-info", children: [(0, jsx_runtime_1.jsx)("span", { className: "memori--preview-filename", children: file.name }), (0, jsx_runtime_1.jsx)("span", { className: "memori--preview-filetype", children: getFileType(file.name, file.type) })] }), allowRemove && ((0, jsx_runtime_1.jsx)(Button_1.default, { shape: "rounded", icon: (0, jsx_runtime_1.jsx)(Close_1.default, {}), 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))) }) })), (0, jsx_runtime_1.jsx)(Modal_1.default, { 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: (0, jsx_runtime_1.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) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("img", { src: selectedFile.content, alt: selectedFile.name, style: { maxWidth: '100%', maxHeight: '60vh' } }) })) : ((0, utils_1.stripHTML)((selectedFile === null || selectedFile === void 0 ? void 0 : selectedFile.content) || '')) }) })] }));
};
exports.default = FilePreview;
//# sourceMappingURL=FilePreview.js.map