import { Medium } from '@memori.ai/memori-api-client/dist/types';
import React, { 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 interface Props {
items: (Medium & { type?: string })[];
sessionID?: string;
tenantID?: string;
translateTo?: string;
baseURL?: string;
apiURL?: string;
customMediaRenderer?: (mimeType: string) => JSX.Element | null;
fromUser?: boolean;
}
export const RenderMediaItem = ({
isChild = false,
item,
sessionID,
tenantID,
preview = false,
baseURL,
apiURL,
onClick,
customMediaRenderer,
}: {
isChild?: boolean;
item: Medium & { type: string };
sessionID?: string;
tenantID?: string;
preview?: boolean;
baseURL?: string;
apiURL?: string;
onClick?: (mediumID: string) => void;
customMediaRenderer?: (mimeType: string) => JSX.Element | null;
}) => {
const [modalOpen, setModalOpen] = useState(false);
const [copyNotification, setCopyNotification] = useState(false);
const url = getResourceUrl({
resourceURI: item.url,
sessionID,
tenantID,
baseURL,
apiURL,
});
const customRenderer = customMediaRenderer?.(item.mimeType);
if (customRenderer) {
return customRenderer;
}
const renderMediaContent = (item: Medium) => {
switch (item.mimeType) {
case 'image/jpeg':
case 'image/png':
case 'image/jpg':
case 'image/gif':
return isImageRGB ? (
{item.title && (
{item.title}
)}
) : (
{!preview && (
)}
{item.title && (
{item.title}
)}
);
case 'application/msword':
case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
return ;
case 'application/vnd.ms-excel':
case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
return ;
case 'application/pdf':
return ;
case 'video/mp4':
case 'video/quicktime':
case 'video/avi':
case 'video/mpeg':
return (
);
case 'audio/mpeg3':
case 'audio/wav':
case 'audio/mpeg':
return (
);
case 'model/gltf-binary':
return (
);
default:
return ;
}
};
if (!item.url && item?.type === 'document' && item.content) {
return (
<>
{
e.preventDefault();
setModalOpen(true);
}}
title={item.title}
>
setModalOpen(false)}
title={item.title}
className="memori-media-item-preview--modal"
width="60%"
widthMd="70%"
footer={
}
>
);
}
const isImageRGB =
item.url?.startsWith('rgb(') || item.url?.startsWith('rgba(');
switch (item.mimeType) {
case 'image/jpeg':
case 'image/png':
case 'image/jpg':
case 'image/gif':
return isImageRGB ? (
) : (
{
if (isChild) {
e.preventDefault();
}
if (onClick) {
e.preventDefault();
onClick(item.mediumID);
}
}}
target="_blank"
rel="noopener noreferrer"
title={item.title}
>
);
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 (
);
case 'video/mp4':
case 'video/quicktime':
case 'video/avi':
case 'video/mpeg':
return (
{
if (isChild) {
e.preventDefault();
}
if (onClick) {
e.preventDefault();
onClick(item.mediumID);
}
}}
target="_blank"
rel="noopener noreferrer"
title={item.title}
>
);
case 'audio/mpeg3':
case 'audio/wav':
case 'audio/mpeg':
return (
);
case 'model/gltf-binary':
return ;
default:
return (
);
}
};
const MediaItemWidget: React.FC = ({
items,
sessionID,
tenantID,
translateTo,
baseURL,
apiURL,
customMediaRenderer,
fromUser = false,
}: Props) => {
const [media, setMedia] = useState(items);
const [openModalMedium, setOpenModalMedium] = useState();
const translateMediaCaptions = useCallback(async () => {
if (!translateTo) return;
const translatedMedia = await Promise.all(
(items ?? []).map(async media => {
if (media.title) {
try {
const tTitle = await getTranslation(media.title, translateTo);
return { ...media, title: tTitle.text ?? 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 =>
!m.properties?.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 =>
!m.properties?.executable &&
prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType)
);
const cssExecutableCode = media.filter(
m => m.mimeType === 'text/css' && !!m.properties?.executable
);
return (
{!!nonCodeDisplayMedia.length && (
{nonCodeDisplayMedia.map((item: Medium, index: number) => (
))}
)}
{codeSnippets.map(medium => (
))}
{cssExecutableCode.map(medium => (
))}
{openModalMedium?.mediumID && (
setOpenModalMedium(undefined)}
footer={null}
>
)}
);
};
export default memo(MediaItemWidget);