@memori.ai/memori-react
Version:
[](https://www.npmjs.com/package/@memori.ai/memori-react)  ![TypeScript Support](https
194 lines • 19.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useState, memo } from 'react';
import { getResourceUrl } from '../../helpers/media';
import { getTranslation } from '../../helpers/translations';
import { prismSyntaxLangs } from '../../helpers/constants';
import ModelViewer from '../CustomGLBModelViewer/ModelViewer';
import Snippet from '../Snippet/Snippet';
import Card from '../ui/Card';
import Modal from '../ui/Modal';
import Button from '../ui/Button';
import File from '../icons/File';
import FilePdf from '../icons/FilePdf';
import FileExcel from '../icons/FileExcel';
import FileWord from '../icons/FileWord';
import Copy from '../icons/Copy';
import { Transition } from '@headlessui/react';
import { stripHTML } from '../../helpers/utils';
import cx from 'classnames';
export const RenderMediaItem = ({ isChild = false, item, sessionID, tenantID, preview = false, baseURL, apiURL, onClick, customMediaRenderer, }) => {
var _a, _b;
const [modalOpen, setModalOpen] = useState(false);
const [copyNotification, setCopyNotification] = useState(false);
const url = getResourceUrl({
resourceURI: item.url,
sessionID,
tenantID,
baseURL,
apiURL,
});
const customRenderer = customMediaRenderer === null || customMediaRenderer === void 0 ? void 0 : customMediaRenderer(item.mimeType);
if (customRenderer) {
return customRenderer;
}
const renderMediaContent = (item) => {
switch (item.mimeType) {
case 'image/jpeg':
case 'image/png':
case 'image/jpg':
case 'image/gif':
return isImageRGB ? (_jsxs("picture", { className: "memori-media-item--figure", children: [_jsx("div", { className: "memori-media-item--rgb-item", style: {
backgroundColor: item.url,
} }), item.title && (_jsx("figcaption", { className: "memori-media-item--figure-caption", children: item.title }))] })) : (_jsxs("picture", { className: "memori-media-item--figure", children: [!preview && (_jsx("source", { srcSet: [url, item.url, item.content].join(', '), type: item.mimeType })), _jsx("img", { alt: item.title, src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==" }), item.title && (_jsx("figcaption", { className: "memori-media-item--figure-caption", children: item.title }))] }));
case 'application/msword':
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
return _jsx(FileWord, { className: "memori-media-item--icon" });
case 'application/vnd.ms-excel':
case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
return _jsx(FileExcel, { className: "memori-media-item--icon" });
case 'application/pdf':
return _jsx(FilePdf, { className: "memori-media-item--icon" });
case 'video/mp4':
case 'video/quicktime':
case 'video/avi':
case 'video/mpeg':
return (_jsxs("video", { style: { width: '100%', height: '100%' }, controls: true, src: url, title: item.title, children: [item.mimeType === 'video/quicktime' && (_jsx("source", { src: item.url, type: "video/mp4" })), _jsx("source", { src: item.url, type: item.mimeType }), "Your browser does not support this video format.", _jsx("br", {}), _jsx("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", children: "Download the video" })] }));
case 'audio/mpeg3':
case 'audio/wav':
case 'audio/mpeg':
return (_jsx("audio", { style: { width: '100%', height: '100%' }, controls: true, src: url }));
case 'model/gltf-binary':
return (_jsx(ModelViewer, { src: url, alt: "", poster: "data:image/png;base64,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" }));
default:
return _jsx(File, { className: "memori-media-item--icon" });
}
};
if (!item.url && (item === null || item === void 0 ? void 0 : item.type) === 'document' && item.content) {
return (_jsxs(_Fragment, { children: [_jsx("a", { className: "memori-media-item--link", href: "#", onClick: e => {
e.preventDefault();
setModalOpen(true);
}, title: item.title, children: _jsx(Card, { hoverable: true, cover: renderMediaContent(item), title: item.title }) }), _jsx(Modal, { open: modalOpen, onClose: () => setModalOpen(false), title: item.title, className: "memori-media-item-preview--modal", width: "60%", widthMd: "70%", footer: _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }, children: _jsx(Button, { onClick: async () => {
try {
await navigator.clipboard.writeText(item.content || '');
setCopyNotification(true);
setTimeout(() => setCopyNotification(false), 2000);
}
catch (err) {
console.error('Failed to copy content:', err);
}
}, icon: _jsx(Copy, {}), children: copyNotification ? 'Copied!' : 'Copy Content' }) }), children: _jsx("div", { className: "memori-media-item-preview--content", children: _jsx("div", { className: "memori-media-item-preview--text", dangerouslySetInnerHTML: {
__html: stripHTML(item.content || ''),
} }) }) })] }));
}
const isImageRGB = ((_a = item.url) === null || _a === void 0 ? void 0 : _a.startsWith('rgb(')) || ((_b = item.url) === null || _b === void 0 ? void 0 : _b.startsWith('rgba('));
switch (item.mimeType) {
case 'image/jpeg':
case 'image/png':
case 'image/jpg':
case 'image/gif':
return isImageRGB ? (_jsx(Card, { hoverable: true, className: "memori-media-item--card memori-media-item--image", cover: renderMediaContent(item) })) : (_jsx("a", { className: "memori-media-item--link", href: item.url, onClick: e => {
if (isChild) {
e.preventDefault();
}
if (onClick) {
e.preventDefault();
onClick(item.mediumID);
}
}, target: "_blank", rel: "noopener noreferrer", title: item.title, children: _jsx(Card, { hoverable: true, className: "memori-media-item--card memori-media-item--image", cover: renderMediaContent(item) }) }));
case 'application/msword':
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
case 'application/vnd.ms-excel':
case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
case 'application/pdf':
return (_jsx("a", { className: "memori-media-item--link", href: url, target: "_blank", rel: "noopener noreferrer", title: item.title, children: _jsx(Card, { hoverable: true, cover: renderMediaContent(item), title: item.title }) }));
case 'video/mp4':
case 'video/quicktime':
case 'video/avi':
case 'video/mpeg':
return (_jsx("a", { className: "memori-media-item--link", href: url, onClick: e => {
if (isChild) {
e.preventDefault();
}
if (onClick) {
e.preventDefault();
onClick(item.mediumID);
}
}, target: "_blank", rel: "noopener noreferrer", title: item.title, children: _jsx(Card, { hoverable: true, cover: renderMediaContent(item), title: item.title }) }));
case 'audio/mpeg3':
case 'audio/wav':
case 'audio/mpeg':
return (_jsx("a", { className: "memori-media-item--link", href: url, target: "_blank", rel: "noopener noreferrer", title: item.title, children: _jsx(Card, { hoverable: true, cover: renderMediaContent(item), title: item.title }) }));
case 'model/gltf-binary':
return _jsx(Card, { hoverable: true, cover: renderMediaContent(item) });
default:
return (_jsx("a", { className: "memori-media-item--link", href: url, target: "_blank", rel: "noopener noreferrer", title: item.title, children: _jsx(Card, { hoverable: true, cover: renderMediaContent(item), title: item.title }) }));
}
};
const MediaItemWidget = ({ items, sessionID, tenantID, translateTo, baseURL, apiURL, customMediaRenderer, fromUser = false, }) => {
const [media, setMedia] = useState(items);
const [openModalMedium, setOpenModalMedium] = useState();
const translateMediaCaptions = useCallback(async () => {
if (!translateTo)
return;
const translatedMedia = await Promise.all((items !== null && items !== void 0 ? items : []).map(async (media) => {
var _a;
if (media.title) {
try {
const tTitle = await getTranslation(media.title, translateTo);
return { ...media, title: (_a = tTitle.text) !== null && _a !== void 0 ? _a : media.title };
}
catch (e) {
console.error(e);
return media;
}
}
else {
return media;
}
}));
setMedia(translatedMedia);
}, [translateTo, items]);
useEffect(() => {
if (translateTo)
translateMediaCaptions();
}, [translateTo, translateMediaCaptions]);
const nonCodeDisplayMedia = media
.filter(m => {
var _a;
return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.executable) &&
!prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType);
})
.sort((a, b) => {
return a.creationTimestamp > b.creationTimestamp
? 1
: a.creationTimestamp < b.creationTimestamp
? -1
: 0;
});
const codeSnippets = media.filter(m => {
var _a;
return !((_a = m.properties) === null || _a === void 0 ? void 0 : _a.executable) &&
prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType);
});
const cssExecutableCode = media.filter(m => { var _a; return m.mimeType === 'text/css' && !!((_a = m.properties) === null || _a === void 0 ? void 0 : _a.executable); });
return (_jsxs(Transition, { appear: true, show: true, as: "div", className: "memori-media-items", children: [!!nonCodeDisplayMedia.length && (_jsx("div", { className: cx('memori-media-items--grid', {
'memori-media-items--user': fromUser,
'memori-media-items--agent': !fromUser,
}), children: nonCodeDisplayMedia.map((item, index) => (_jsx(Transition.Child, { as: "div", className: "memori-media-item", enter: `ease-out duration-500 delay-${index * 100}`, enterFrom: "opacity-0 scale-95", enterTo: "opacity-1 scale-100", leave: "ease-in duration-300", leaveFrom: "opacity-1 scale-100", leaveTo: "opacity-0 scale-95", children: _jsx(RenderMediaItem, { isChild: true, sessionID: sessionID, tenantID: tenantID, baseURL: baseURL, apiURL: apiURL, onClick: mediumID => {
setOpenModalMedium(media.find(m => m.mediumID === mediumID));
}, item: {
...item,
title: item.title,
url: item.url,
content: item.content,
type: 'document',
}, customMediaRenderer: customMediaRenderer }) }, item.url + '&index=' + index))) })), codeSnippets.map(medium => (_jsx(Transition.Child, { as: "div", className: "memori-media-item--snippet", enter: "ease-out duration-500", enterFrom: "opacity-0 translate-y-1", enterTo: "opacity-1 translate-y-0", leave: "ease-in duration-300", leaveFrom: "opacity-1", leaveTo: "opacity-0", children: _jsx(Snippet, { medium: medium }, medium.mediumID) }, medium.mediumID))), cssExecutableCode.map(medium => (_jsx("style", { dangerouslySetInnerHTML: { __html: medium.content || '' } }, medium.mediumID))), (openModalMedium === null || openModalMedium === void 0 ? void 0 : openModalMedium.mediumID) && (_jsx(Modal, { width: "100%", widthMd: "100%", className: "memori-media-item--modal", open: !!openModalMedium, onClose: () => setOpenModalMedium(undefined), footer: null, children: _jsx(RenderMediaItem, { isChild: true, sessionID: sessionID, tenantID: tenantID, baseURL: baseURL, apiURL: apiURL, item: {
...openModalMedium,
title: openModalMedium.title,
url: openModalMedium.url,
content: openModalMedium.content,
type: 'document',
}, customMediaRenderer: customMediaRenderer }) }))] }));
};
export default memo(MediaItemWidget);
//# sourceMappingURL=MediaItemWidget.js.map