@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -7,20 +7,24 @@ 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[];
+  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 = ({
@@ -35,7 +39,7 @@ export const RenderMediaItem = ({
   customMediaRenderer,
 }: {
   isChild?: boolean;
-  item: Medium;
+  item: Medium & { type: string };
   sessionID?: string;
   tenantID?: string;
   preview?: boolean;
@@ -44,6 +48,9 @@ export const RenderMediaItem = ({
   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,
@@ -58,6 +65,155 @@ export const RenderMediaItem = ({
     return customRenderer;
   }
 
+  const renderMediaContent = (item: Medium) => {
+    switch (item.mimeType) {
+      case 'image/jpeg':
+      case 'image/png':
+      case 'image/jpg':
+      case 'image/gif':
+        return isImageRGB ? (
+          <picture className="memori-media-item--figure">
+            <div
+              className="memori-media-item--rgb-item"
+              style={{
+                backgroundColor: item.url,
+              }}
+            />
+            {item.title && (
+              <figcaption className="memori-media-item--figure-caption">
+                {item.title}
+              </figcaption>
+            )}
+          </picture>
+        ) : (
+          <picture className="memori-media-item--figure">
+            {!preview && (
+              <source
+                srcSet={[url, item.url, item.content].join(', ')}
+                type={item.mimeType}
+              />
+            )}
+            <img
+              alt={item.title}
+              src="data:image/png;base64,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"
+            />
+            {item.title && (
+              <figcaption className="memori-media-item--figure-caption">
+                {item.title}
+              </figcaption>
+            )}
+          </picture>
+        );
+
+      case 'application/msword':
+      case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        return <FileWord className="memori-media-item--icon" />;
+
+      case 'application/vnd.ms-excel':
+      case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+        return <FileExcel className="memori-media-item--icon" />;
+
+      case 'application/pdf':
+        return <FilePdf className="memori-media-item--icon" />;
+
+      case 'video/mp4':
+      case 'video/quicktime':
+      case 'video/avi':
+      case 'video/mpeg':
+        return (
+          <video
+            style={{ width: '100%', height: '100%' }}
+            controls
+            src={url}
+            title={item.title}
+          >
+            {item.mimeType === 'video/quicktime' && (
+              <source src={item.url} type="video/mp4" />
+            )}
+            <source src={item.url} type={item.mimeType} />
+            Your browser does not support this video format.
+            <br />
+            <a href={item.url} target="_blank" rel="noopener noreferrer">
+              Download the video
+            </a>
+          </video>
+        );
+
+      case 'audio/mpeg3':
+      case 'audio/wav':
+      case 'audio/mpeg':
+        return (
+          <audio style={{ width: '100%', height: '100%' }} controls src={url} />
+        );
+
+      case 'model/gltf-binary':
+        return (
+          <ModelViewer
+            src={url}
+            alt=""
+            poster="data:image/png;base64,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"
+          />
+        );
+
+      default:
+        return <File className="memori-media-item--icon" />;
+    }
+  };
+
+  if (!item.url && item?.type === 'document' && item.content) {
+    return (
+      <>
+        <a
+          className="memori-media-item--link"
+          href="#"
+          onClick={e => {
+            e.preventDefault();
+            setModalOpen(true);
+          }}
+          title={item.title}
+        >
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
+        </a>
+
+        <Modal
+          open={modalOpen}
+          onClose={() => setModalOpen(false)}
+          title={item.title}
+          className="memori-media-item-preview--modal"
+          width="60%"
+          widthMd="70%"
+          footer={
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
+              <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={<Copy />}
+              >
+                {copyNotification ? 'Copied!' : 'Copy Content'}
+              </Button>
+            </div>
+          }
+        >
+          <div className="memori-media-item-preview--content">
+            <div
+              className="memori-media-item-preview--text"
+              dangerouslySetInnerHTML={{
+                __html: stripHTML(item.content || ''),
+              }}
+            />
+          </div>
+        </Modal>
+      </>
+    );
+  }
+
   const isImageRGB =
     item.url?.startsWith('rgb(') || item.url?.startsWith('rgba(');
 
@@ -66,10 +222,16 @@ export const RenderMediaItem = ({
     case 'image/png':
     case 'image/jpg':
     case 'image/gif':
-      return (
+      return isImageRGB ? (
+        <Card
+          hoverable
+          className="memori-media-item--card memori-media-item--image"
+          cover={renderMediaContent(item)}
+        />
+      ) : (
         <a
           className="memori-media-item--link"
-          href={url}
+          href={item.url}
           onClick={e => {
             if (isChild) {
               e.preventDefault();
@@ -86,75 +248,15 @@ export const RenderMediaItem = ({
           <Card
             hoverable
             className="memori-media-item--card memori-media-item--image"
-            cover={
-              <picture className="memori-media-item--figure">
-                {!preview && !isImageRGB && (
-                  <source
-                    srcSet={[url, item.url, item.content].join(', ')}
-                    type={item.mimeType}
-                  />
-                )}
-                {isImageRGB ? (
-                  <div
-                    style={{
-                      minHeight: '150px',
-                      width: '100%',
-                      backgroundColor: item.url,
-                    }}
-                  />
-                ) : (
-                  <img
-                    alt={item.title}
-                    src="data:image/png;base64,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"
-                  />
-                )}
-                {item.title && (
-                  <figcaption className="memori-media-item--figure-caption">
-                    {item.title}
-                  </figcaption>
-                )}
-              </picture>
-            }
+            cover={renderMediaContent(item)}
           />
         </a>
       );
 
     case 'application/msword':
     case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-      return (
-        <a
-          className="memori-media-item--link"
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-          title={item.title}
-        >
-          <Card
-            hoverable
-            cover={<FileWord className="memori-media-item--icon" />}
-            title={item.title}
-          />
-        </a>
-      );
-
     case 'application/vnd.ms-excel':
     case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
-      return (
-        <a
-          className="memori-media-item--link"
-          href={url}
-          target="_blank"
-          rel="noopener noreferrer"
-          title={item.title}
-        >
-          <Card
-            hoverable
-            cover={<FileExcel className="memori-media-item--icon" />}
-            title={item.title}
-          />
-        </a>
-      );
-
     case 'application/pdf':
       return (
         <a
@@ -164,11 +266,7 @@ export const RenderMediaItem = ({
           rel="noopener noreferrer"
           title={item.title}
         >
-          <Card
-            hoverable
-            cover={<FilePdf className="memori-media-item--icon" />}
-            title={item.title}
-          />
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
         </a>
       );
 
@@ -193,28 +291,7 @@ export const RenderMediaItem = ({
           rel="noopener noreferrer"
           title={item.title}
         >
-          <Card
-            hoverable
-            cover={
-              <video
-                style={{ width: '100%', height: '100%' }}
-                controls
-                src={url}
-                title={item.title}
-              >
-                {item.mimeType === 'video/quicktime' && (
-                  <source src={item.url} type="video/mp4" />
-                )}
-                <source src={item.url} type={item.mimeType} />
-                Your browser does not support this video format.
-                <br />
-                <a href={item.url} target="_blank" rel="noopener noreferrer">
-                  Download the video
-                </a>
-              </video>
-            }
-            title={item.title}
-          />
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
         </a>
       );
 
@@ -229,28 +306,12 @@ export const RenderMediaItem = ({
           rel="noopener noreferrer"
           title={item.title}
         >
-          <Card
-            hoverable
-            cover={
-              <audio
-                style={{ width: '100%', height: '100%' }}
-                controls
-                src={url}
-              />
-            }
-            title={item.title}
-          />
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
         </a>
       );
 
     case 'model/gltf-binary':
-      return (
-        <ModelViewer
-          src={url}
-          alt=""
-          poster="data:image/png;base64,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"
-        />
-      );
+      return <Card hoverable cover={renderMediaContent(item)} />;
 
     default:
       return (
@@ -261,11 +322,7 @@ export const RenderMediaItem = ({
           rel="noopener noreferrer"
           title={item.title}
         >
-          <Card
-            hoverable
-            cover={<File className="memori-media-item--icon" />}
-            title={item.title}
-          />
+          <Card hoverable cover={renderMediaContent(item)} title={item.title} />
         </a>
       );
   }
@@ -279,6 +336,7 @@ const MediaItemWidget: React.FC<Props> = ({
   baseURL,
   apiURL,
   customMediaRenderer,
+  fromUser = false,
 }: Props) => {
   const [media, setMedia] = useState(items);
   const [openModalMedium, setOpenModalMedium] = useState<Medium>();
@@ -309,23 +367,38 @@ const MediaItemWidget: React.FC<Props> = ({
     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 (
     <Transition appear show as="div" className="memori-media-items">
-      <div className="memori-media-items--grid">
-        {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;
-          })
-          .map((item: Medium, index: number) => (
+      {!!nonCodeDisplayMedia.length && (
+        <div className={cx('memori-media-items--grid', {
+          'memori-media-items--user': fromUser,
+          'memori-media-items--agent': !fromUser,
+        })}>
+          {nonCodeDisplayMedia.map((item: Medium, index: number) => (
             <Transition.Child
               as="div"
               className="memori-media-item"
@@ -351,41 +424,35 @@ const MediaItemWidget: React.FC<Props> = ({
                   title: item.title,
                   url: item.url,
                   content: item.content,
+                  type: 'document',
                 }}
                 customMediaRenderer={customMediaRenderer}
               />
             </Transition.Child>
           ))}
-      </div>
-      {media
-        .filter(
-          m =>
-            !m.properties?.executable &&
-            prismSyntaxLangs.map(l => l.mimeType).includes(m.mimeType)
-        )
-        .map(medium => (
-          <Transition.Child
-            as="div"
-            className="memori-media-item--snippet"
-            key={medium.mediumID}
-            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"
-          >
-            <Snippet key={medium.mediumID} medium={medium} />
-          </Transition.Child>
-        ))}
-      {media
-        .filter(m => m.mimeType === 'text/css' && !!m.properties?.executable)
-        .map(medium => (
-          <style
-            key={medium.mediumID}
-            dangerouslySetInnerHTML={{ __html: medium.content || '' }}
-          ></style>
-        ))}
+        </div>
+      )}
+      {codeSnippets.map(medium => (
+        <Transition.Child
+          as="div"
+          className="memori-media-item--snippet"
+          key={medium.mediumID}
+          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"
+        >
+          <Snippet key={medium.mediumID} medium={medium} />
+        </Transition.Child>
+      ))}
+      {cssExecutableCode.map(medium => (
+        <style
+          key={medium.mediumID}
+          dangerouslySetInnerHTML={{ __html: medium.content || '' }}
+        ></style>
+      ))}
 
       {openModalMedium?.mediumID && (
         <Modal
@@ -407,6 +474,7 @@ const MediaItemWidget: React.FC<Props> = ({
               title: openModalMedium.title,
               url: openModalMedium.url,
               content: openModalMedium.content,
+              type: 'document',
             }}
             customMediaRenderer={customMediaRenderer}
           />

package/src/components/MediaWidget/MediaWidget.test.tsx

@@ -7,11 +7,12 @@ import { render } from '@testing-library/react';
 import { medium } from '../../mocks/data';
 import MediaWidget from './MediaWidget';
 
-const linkMedium: Medium = {
+const linkMedium: Medium & { type?: string } = {
   mediumID: '95226d7e-7bae-465e-8b80-995587bb5971',
   mimeType: 'text/html',
   title: 'Memori Srl',
   url: 'https://memori.ai/en',
+  type: 'document',
 };
 
 const hint: TranslatedHint = {

package/src/components/MediaWidget/MediaWidget.tsx

@@ -13,13 +13,14 @@ import { useTranslation } from 'react-i18next';
 export interface Props {
   hints?: TranslatedHint[];
   links?: Medium[];
-  media?: Medium[];
+  media?: (Medium & { type?: string })[];
   simulateUserPrompt?: (item: string, translatedItem?: string) => void;
   sessionID?: string;
   baseUrl?: string;
   apiUrl?: string;
   translateTo?: string;
   customMediaRenderer?: MediaItemProps['customMediaRenderer'];
+  fromUser?: boolean;
 }
 
 const MediaWidget: React.FC<Props> = ({
@@ -32,6 +33,7 @@ const MediaWidget: React.FC<Props> = ({
   apiUrl,
   translateTo,
   customMediaRenderer,
+  fromUser = false,
 }: Props) => {
   const { t } = useTranslation();
   const [showHints, setShowHints] = useState(true);
@@ -51,9 +53,10 @@ const MediaWidget: React.FC<Props> = ({
           baseURL={baseUrl}
           apiURL={apiUrl}
           customMediaRenderer={customMediaRenderer}
+          fromUser={fromUser}
         />
       )}
-      {links?.length > 0 && <LinkItemWidget items={links} baseUrl={baseUrl} />}
+      {links?.length > 0 && <LinkItemWidget items={links} baseUrl={baseUrl} fromUser={fromUser} />}
       {hints?.length > 0 && showHints && (
         <>
           <Transition appear show as="ul" className="memori-media--hints">

package/src/components/MediaWidget/__snapshots__/LinkItemWidget.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`renders LinkItemWidget unchanged 1`] = `
     class="memori-link-items"
   >
     <div
-      class="memori-link-items--grid"
+      class="memori-link-items--grid memori-link-items--agent"
     >
       <div
         class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
@@ -86,7 +86,7 @@ exports[`renders LinkItemWidget unchanged with baseUrl 1`] = `
     class="memori-link-items"
   >
     <div
-      class="memori-link-items--grid"
+      class="memori-link-items--grid memori-link-items--agent"
     >
       <div
         class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
@@ -166,7 +166,7 @@ exports[`renders LinkItemWidget unchanged with description oneline 1`] = `
     class="memori-link-items"
   >
     <div
-      class="memori-link-items--grid"
+      class="memori-link-items--grid memori-link-items--agent"
     >
       <div
         class="memori-link-item ease-out duration-500 delay-0 opacity-0 scale-95"
@@ -246,7 +246,7 @@ exports[`renders LinkItemWidget unchanged with no media 1`] = `
     class="memori-link-items"
   >
     <div
-      class="memori-link-items--grid"
+      class="memori-link-items--grid memori-link-items--agent"
     />
   </div>
 </div>