@memori.ai/memori-react 8.8.1 → 8.8.2

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>

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -1799,7 +1799,7 @@ const MemoriWidget = ({
       voiceType: memori.voiceType,
       layout: selectedLayout,
     }),
-    [ttsProvider, userLang, memori.culture, memori.voiceType]
+    [ttsProvider, userLang, memori.culture, memori.voiceType, selectedLayout]
   );
 
   const sttConfig = useMemo(
@@ -2802,7 +2802,13 @@ const MemoriWidget = ({
         mute = true;
       }
 
+      // Use the toggleMute function from useTTS hook which properly manages state
       toggleMute(mute);
+      
+      // Update local config for persistence
+      setLocalConfig('muteSpeaker', !!mute);
+      
+      // Handle microphone mode changes
       let microphoneMode = getLocalConfig<string>(
         'microphoneMode',
         'HOLD_TO_TALK'
@@ -2811,15 +2817,21 @@ const MemoriWidget = ({
         setContinuousSpeech(false);
         setLocalConfig('microphoneMode', 'HOLD_TO_TALK');
       }
-      setLocalConfig('muteSpeaker', !!mute);
+      
+      // Stop audio if muting
       if (mute) {
         ttsStop();
       } else {
-        audioContext = new AudioContext();
-        let buffer = audioContext.createBuffer(1, 10000, 22050);
-        let source = audioContext.createBufferSource();
-        source.buffer = buffer;
-        source.connect(audioContext.destination);
+        // Initialize audio context when unmuting
+        try {
+          audioContext = new AudioContext();
+          let buffer = audioContext.createBuffer(1, 10000, 22050);
+          let source = audioContext.createBufferSource();
+          source.buffer = buffer;
+          source.connect(audioContext.destination);
+        } catch (error) {
+          console.warn('Failed to initialize audio context:', error);
+        }
       }
     },
     setShowChatHistoryDrawer,