@memori.ai/memori-react 8.8.0 → 8.8.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "8.8.0",
+  "version": "8.8.2",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",

package/src/components/Header/Header.tsx

@@ -224,17 +224,18 @@ const Header: React.FC<Props> = ({
             fullScreenHandler ||
             (() => {
               if (!document.fullscreenElement) {
-                const mainContent =
-                  document.querySelector('main#content') ||
-                  document.querySelector('body');
                 const memoriWidget = document.querySelector('.memori-widget');
-                if (mainContent) {
+                if (memoriWidget) {
                   // Set white background before entering fullscreen
-                  if (memoriWidget) {
-                    (memoriWidget as HTMLElement).style.backgroundColor =
-                      '#FFFFFF';
-                  }
-                  mainContent.requestFullscreen().catch(err => {
+                  (memoriWidget as HTMLElement).style.backgroundColor = '#FFFFFF';
+                  
+                  memoriWidget.requestFullscreen().then(() => {
+                    // Move portals inside fullscreen element
+                    const portals = document.querySelectorAll('[data-headlessui-portal]');
+                    portals.forEach(portal => {
+                      memoriWidget.appendChild(portal);
+                    });
+                  }).catch(err => {
                     console.warn('Error attempting to enable fullscreen:', err);
                   });
                 }

package/src/components/MediaWidget/MediaItemWidget.css

@@ -165,6 +165,7 @@ a.memori-media-item--link {
 }
 
 .memori-media-item-preview--content {
+  min-height: 50vh;
   max-height: 50vh;
   padding: 1rem;
   border: 1px solid var(--memori-border);
@@ -174,6 +175,10 @@ a.memori-media-item--link {
   overflow-y: auto;
 }
 
+.memori-media-item--snippet{
+    min-width: 450px;
+}
+
 .memori-media-item-preview--text {
     color: var(--memori-color-text);
     font-family: inherit;

package/src/components/MediaWidget/MediaItemWidget.stories.tsx

@@ -106,6 +106,84 @@ ImagesGrid.args = {
   })),
 };
 
+export const JavaScript = Template.bind({});
+JavaScript.args = {
+  items: [
+    {
+      mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247928',
+      mimeType: 'text/javascript',
+      title: 'JavaScript',
+      content: `[
+  {
+    "name": "France",
+    "capital": "Paris",
+    "population": 67364357,
+    "area": 551695,
+    "currency": "Euro",
+    "languages": [
+      "French"
+    ],
+    "region": "Europe",
+    "subregion": "Western Europe",
+    "flag": "https://upload.wikimedia.org/wikipedia/commons/c/c3/Flag_of_France.svg"
+  },
+  {
+    "name": "Germany",
+    "capital": "Berlin",
+    "population": 83240525,
+    "area": 357022,
+    "currency": "Euro",
+    "languages": [
+      "German"
+    ],
+    "region": "Europe",
+    "subregion": "Western Europe",
+    "flag": "https://upload.wikimedia.org/wikipedia/commons/b/ba/Flag_of_Germany.svg"
+  },
+  {
+    "name": "United States",
+    "capital": "Washington, D.C.",
+    "population": 331893745,
+    "area": 9833517,
+    "currency": "USD",
+    "languages": [
+      "English"
+    ],
+    "region": "Americas",
+    "subregion": "Northern America",
+    "flag": "https://upload.wikimedia.org/wikipedia/commons/a/a4/Flag_of_the_United_States.svg"
+  },
+  {
+    "name": "Belgium",
+    "capital": "Brussels",
+    "population": 11589623,
+    "area": 30528,
+    "currency": "Euro",
+    "languages": [
+      "Flemish",
+      "French",
+      "German"
+    ],
+    "region": "Europe",
+    "subregion": "Western Europe",
+    "flag": "https://upload.wikimedia.org/wikipedia/commons/6/65/Flag_of_Belgium.svg"
+    ]`,
+    },
+  ],
+};
+
+export const longTXT = Template.bind({});
+longTXT.args = {
+  items: [
+    {
+      mediumID: '65ca4a6d-f20b-402e-9d79-5e470f247928',
+      mimeType: 'text/plain',
+      title: 'Long Text',
+      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.',
+    },
+  ],
+};
+
 export const WithCustomMediaRenderer = Template.bind({});
 WithCustomMediaRenderer.args = {
   items: [

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -65,6 +65,8 @@ export const RenderMediaItem = ({
     return customRenderer;
   }
 
+  const isCodeSnippet = prismSyntaxLangs.map(l => l.mimeType).includes(item.mimeType);
+
   const renderMediaContent = (item: Medium) => {
     switch (item.mimeType) {
       case 'image/jpeg':
@@ -160,6 +162,38 @@ export const RenderMediaItem = ({
     }
   };
 
+  // Handle code snippets with modal
+  if (isCodeSnippet && 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="80%"
+          widthMd="90%"
+        >
+          <div className="memori-media-item-preview--content">
+            <Snippet medium={item} showCopyButton={true} />
+          </div>
+        </Modal>
+      </>
+    );
+  }
+
   if (!item.url && item?.type === 'document' && item.content) {
     return (
       <>
@@ -183,7 +217,13 @@ export const RenderMediaItem = ({
           width="60%"
           widthMd="70%"
           footer={
-            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem' }}>
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'flex-end',
+                gap: '0.5rem',
+              }}
+            >
               <Button
                 onClick={async () => {
                   try {
@@ -328,6 +368,50 @@ export const RenderMediaItem = ({
   }
 };
 
+export const RenderSnippetItem = ({
+  item,
+  sessionID: _sessionID,
+  tenantID: _tenantID,
+  baseURL: _baseURL,
+  apiURL: _apiURL,
+  onClick,
+}: {
+  item: Medium & { type: string };
+  sessionID?: string;
+  tenantID?: string;
+  baseURL?: string;
+  apiURL?: string;
+  onClick?: (mediumID: string) => void;
+}) => {
+  return (
+    <>
+      <a
+        href="#"
+        onClick={e => {
+          e.preventDefault();
+          if (onClick) {
+            console.log('Snippet item.mediumID:', item.mediumID);
+            onClick(item.mediumID);
+            console.log('clicked snippet');
+          }
+        }}
+        className="memori-media-item--link"
+        title={item.title}
+      >
+        <Card
+          hoverable
+          // onClick={() => setModalOpen(true)}
+          className="memori-media-item--card memori-media-item--snippet"
+        >
+          <div className="memori-media-item--snippet-preview">
+            <Snippet showCopyButton={false} preview={true} medium={item} />
+          </div>
+        </Card>
+      </a>
+    </>
+  );
+};
+
 const MediaItemWidget: React.FC<Props> = ({
   items,
   sessionID,
@@ -391,13 +475,19 @@ const MediaItemWidget: React.FC<Props> = ({
     m => m.mimeType === 'text/css' && !!m.properties?.executable
   );
 
+  console.log('openModalMedium', openModalMedium);
+  console.log('codeSnippets', codeSnippets);
+  console.log('nonCodeDisplayMedia', nonCodeDisplayMedia);
+
   return (
     <Transition appear show as="div" className="memori-media-items">
       {!!nonCodeDisplayMedia.length && (
-        <div className={cx('memori-media-items--grid', {
-          'memori-media-items--user': fromUser,
-          'memori-media-items--agent': !fromUser,
-        })}>
+        <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"
@@ -417,7 +507,7 @@ const MediaItemWidget: React.FC<Props> = ({
                 baseURL={baseURL}
                 apiURL={apiURL}
                 onClick={mediumID => {
-                  setOpenModalMedium(media.find(m => m.mediumID === mediumID));
+                  setOpenModalMedium(nonCodeDisplayMedia.find(m => m.mediumID === mediumID));
                 }}
                 item={{
                   ...item,
@@ -432,21 +522,48 @@ const MediaItemWidget: React.FC<Props> = ({
           ))}
         </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"
+      {!!codeSnippets.length && (
+        <div
+          className={cx('memori-media-items--grid', {
+            'memori-media-items--user': fromUser,
+            'memori-media-items--agent': !fromUser,
+          })}
         >
-          <Snippet key={medium.mediumID} medium={medium} />
-        </Transition.Child>
-      ))}
+          {codeSnippets.map((item: Medium, index: number) => (
+            <Transition.Child
+              as="div"
+              className="memori-media-item"
+              key={item.mediumID + '&index=' + index}
+              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"
+            >
+              <RenderSnippetItem
+                sessionID={sessionID}
+                tenantID={tenantID}
+                baseURL={baseURL}
+                apiURL={apiURL}
+                onClick={mediumID => {
+                  console.log('Snippet clicked, mediumID:', mediumID);
+                  const foundMedium = codeSnippets.find(m => m.mediumID === mediumID);
+                  console.log('Found medium:', foundMedium);
+                  setOpenModalMedium(foundMedium);
+                }}
+                item={{
+                  ...item,
+                  title: item.title,
+                  url: item.url,
+                  content: item.content,
+                  type: 'document',
+                }}
+              />
+            </Transition.Child>
+          ))}
+        </div>
+      )}
       {cssExecutableCode.map(medium => (
         <style
           key={medium.mediumID}
@@ -454,7 +571,7 @@ const MediaItemWidget: React.FC<Props> = ({
         ></style>
       ))}
 
-      {openModalMedium?.mediumID && (
+      {openModalMedium && (
         <Modal
           width="100%"
           widthMd="100%"
@@ -463,21 +580,34 @@ const MediaItemWidget: React.FC<Props> = ({
           onClose={() => setOpenModalMedium(undefined)}
           footer={null}
         >
-          <RenderMediaItem
-            isChild
-            sessionID={sessionID}
-            tenantID={tenantID}
-            baseURL={baseURL}
-            apiURL={apiURL}
-            item={{
-              ...openModalMedium,
-              title: openModalMedium.title,
-              url: openModalMedium.url,
-              content: openModalMedium.content,
-              type: 'document',
+          {prismSyntaxLangs
+            .map(l => l.mimeType)
+            .includes(openModalMedium.mimeType) ? (
+            <div 
+            style={{
+              minHeight: '100%',
+              background: 'none',
             }}
-            customMediaRenderer={customMediaRenderer}
-          />
+            className="memori-media-item-preview--content">
+              <Snippet preview={false} medium={openModalMedium} />
+            </div>
+          ) : (
+            <RenderMediaItem
+              isChild
+              sessionID={sessionID}
+              tenantID={tenantID}
+              baseURL={baseURL}
+              apiURL={apiURL}
+              item={{
+                ...openModalMedium,
+                title: openModalMedium.title,
+                url: openModalMedium.url,
+                content: openModalMedium.content,
+                type: 'document',
+              }}
+              customMediaRenderer={customMediaRenderer}
+            />
+          )}
         </Modal>
       )}
     </Transition>

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

@@ -20,66 +20,79 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
     class="memori-media-items"
   >
     <div
-      class="memori-media-item--snippet ease-out duration-500 opacity-0 translate-y-1"
+      class="memori-media-items--grid memori-media-items--agent"
     >
       <div
-        class="memori-snippet"
+        class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
       >
-        <div
-          class="memori-snippet--content"
+        <a
+          class="memori-media-item--link"
+          href="#"
+          title="Snippet"
         >
-          <pre
-            aria-labelledby="#snippet-65ca4a6d-f20b-402e-9d79-5e470f247927"
-            class="line-numbers"
+          <div
+            class="memori-card memori-media-item--card memori-media-item--snippet memori-card--hoverable"
           >
-            <code
-              class="language-scss"
+            <div
+              class="memori-spin"
             >
-              body{
+              <div
+                class="memori-card--content"
+              >
+                <div
+                  class="memori-card--children"
+                >
+                  <div
+                    class="memori-media-item--snippet-preview"
+                  >
+                    <div
+                      class="memori-snippet"
+                    >
+                      <div
+                        class="memori-snippet--content"
+                      >
+                        <pre
+                          aria-labelledby="#snippet-65ca4a6d-f20b-402e-9d79-5e470f247927"
+                          class="line-numbers"
+                        >
+                          <code
+                            class="language-scss"
+                          >
+                            body{
   background-color: #f00;
 }
-            </code>
-          </pre>
-          <button
-            class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-            title="copy"
-          >
-            <span
-              class="memori-button--icon"
-            >
-              <svg
-                aria-hidden="true"
-                fill="none"
-                focusable="false"
-                role="img"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
+                          </code>
+                        </pre>
+                      </div>
+                      <p
+                        class="memori-snippet--caption"
+                        id="snippet-65ca4a6d-f20b-402e-9d79-5e470f247927"
+                      >
+                        Snippet
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="memori-spin--spinner"
               >
-                <rect
-                  height="14"
-                  rx="2"
-                  ry="2"
-                  width="14"
-                  x="8"
-                  y="8"
-                />
-                <path
-                  d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-        <p
-          class="memori-snippet--caption"
-          id="snippet-65ca4a6d-f20b-402e-9d79-5e470f247927"
-        >
-          Snippet
-        </p>
+                <svg
+                  aria-hidden="true"
+                  class="memori-loading-icon"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 1024 1024"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </a>
       </div>
     </div>
   </div>
@@ -262,64 +275,77 @@ exports[`renders MediaItemWidget unchanged with js snippet to show 1`] = `
     class="memori-media-items"
   >
     <div
-      class="memori-media-item--snippet ease-out duration-500 opacity-0 translate-y-1"
+      class="memori-media-items--grid memori-media-items--agent"
     >
       <div
-        class="memori-snippet"
+        class="memori-media-item ease-out duration-500 delay-0 opacity-0 scale-95"
       >
-        <div
-          class="memori-snippet--content"
+        <a
+          class="memori-media-item--link"
+          href="#"
+          title="Snippet"
         >
-          <pre
-            aria-labelledby="#snippet-a669fadb-12c0-469b-9b6c-34db22d371ca"
-            class="line-numbers"
-          >
-            <code
-              class="language-jsx"
-            >
-              console.log("Hello World!");
-            </code>
-          </pre>
-          <button
-            class="memori-button memori-button--ghost memori-button--rounded memori-button--icon-only memori-snippet--copy-button"
-            title="copy"
+          <div
+            class="memori-card memori-media-item--card memori-media-item--snippet memori-card--hoverable"
           >
-            <span
-              class="memori-button--icon"
+            <div
+              class="memori-spin"
             >
-              <svg
-                aria-hidden="true"
-                fill="none"
-                focusable="false"
-                role="img"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="1.5"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="memori-card--content"
               >
-                <rect
-                  height="14"
-                  rx="2"
-                  ry="2"
-                  width="14"
-                  x="8"
-                  y="8"
-                />
-                <path
-                  d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
-                />
-              </svg>
-            </span>
-          </button>
-        </div>
-        <p
-          class="memori-snippet--caption"
-          id="snippet-a669fadb-12c0-469b-9b6c-34db22d371ca"
-        >
-          Snippet
-        </p>
+                <div
+                  class="memori-card--children"
+                >
+                  <div
+                    class="memori-media-item--snippet-preview"
+                  >
+                    <div
+                      class="memori-snippet"
+                    >
+                      <div
+                        class="memori-snippet--content"
+                      >
+                        <pre
+                          aria-labelledby="#snippet-a669fadb-12c0-469b-9b6c-34db22d371ca"
+                          class="line-numbers"
+                        >
+                          <code
+                            class="language-jsx"
+                          >
+                            console.log("Hello World!");
+                          </code>
+                        </pre>
+                      </div>
+                      <p
+                        class="memori-snippet--caption"
+                        id="snippet-a669fadb-12c0-469b-9b6c-34db22d371ca"
+                      >
+                        Snippet
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="memori-spin--spinner"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="memori-loading-icon"
+                  focusable="false"
+                  role="img"
+                  viewBox="0 0 1024 1024"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </a>
       </div>
     </div>
   </div>