@memori.ai/memori-react 2.0.11 → 2.2.0

package/src/components/ChatInputs/ChatInputs.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Meta, Story } from '@storybook/react';
 import ChatInputs, { Props } from './ChatInputs';
 import { dialogState } from '../../mocks/data';
@@ -22,13 +22,40 @@ const meta: Meta = {
 
 export default meta;
 
+const text =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    .split(' ')
+    .reverse();
+
 const Template: Story<Props> = args => {
   const [userMessage, setUserMessage] = React.useState(args.userMessage);
+  const [listening, setListening] = React.useState(args.listening);
+  const startListening = () => setListening(true);
+  const stopListening = () => setListening(false);
+
+  useEffect(() => {
+    if (listening) {
+      const interval = setInterval(() => {
+        let nextWord = text.pop();
+
+        if (!nextWord) {
+          clearInterval(interval);
+          return;
+        }
+
+        setUserMessage(prev => `${prev || ''}${prev ? ' ' : ''}${nextWord}`);
+      }, Math.random() * 500 + 100);
+      return () => clearInterval(interval);
+    }
+  }, [listening]);
 
   return (
     <div style={{ paddingTop: '10rem' }}>
       <ChatInputs
         {...args}
+        listening={listening}
+        startListening={startListening}
+        stopListening={stopListening}
         userMessage={userMessage}
         onChangeUserMessage={setUserMessage}
       />
@@ -159,8 +186,27 @@ Disabled.args = {
   showMicrophone: true,
 };
 
-export const Listening = Template.bind({});
-Listening.args = {
+export const ContinuousSpeech = Template.bind({});
+ContinuousSpeech.args = {
+  dialogState,
+  userMessage: 'Suspendisse sit amet volutpat velit.',
+  sendMessage: (msg: string) => console.log(msg),
+  onTextareaBlur: () => {},
+  onTextareaFocus: () => {},
+  onTextareaPressEnter: () => {},
+  setAttachmentsMenuOpen: () => {},
+  setSendOnEnter: () => {},
+  listening: false,
+  isPlayingAudio: false,
+  stopAudio: () => {},
+  startListening: () => {},
+  stopListening: () => {},
+  showMicrophone: true,
+  microphoneMode: 'CONTINUOUS',
+};
+
+export const ContinuousSpeechListening = Template.bind({});
+ContinuousSpeechListening.args = {
   dialogState,
   userMessage: 'Suspendisse sit amet volutpat velit.',
   sendMessage: (msg: string) => console.log(msg),
@@ -175,6 +221,7 @@ Listening.args = {
   startListening: () => {},
   stopListening: () => {},
   showMicrophone: true,
+  microphoneMode: 'CONTINUOUS',
 };
 
 export const WithoutMicrophone = Template.bind({});

package/src/components/ChatInputs/ChatInputs.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { DialogState } from '@memori.ai/memori-api-client/dist/types';
 import UploadMenu from '../UploadMenu/UploadMenu';
 import SendOnEnterMenu from '../SendOnEnterMenu/SendOnEnterMenu';
 import ChatTextArea from '../ChatTextArea/ChatTextArea';
 import Button from '../ui/Button';
 import { useTranslation } from 'react-i18next';
-import cx from 'classnames';
 import Send from '../icons/Send';
+import MicrophoneButton from '../MicrophoneButton/MicrophoneButton';
+import cx from 'classnames';
 import Microphone from '../icons/Microphone';
 
 export interface Props {
@@ -28,6 +29,7 @@ export interface Props {
   startListening: () => void;
   stopListening: () => void;
   showMicrophone?: boolean;
+  microphoneMode?: 'CONTINUOUS' | 'HOLD_TO_TALK';
   authToken?: string;
 }
 
@@ -45,6 +47,7 @@ const ChatInputs: React.FC<Props> = ({
   onTextareaBlur,
   onTextareaPressEnter,
   showMicrophone = false,
+  microphoneMode = 'HOLD_TO_TALK',
   listening = false,
   stopAudio,
   startListening,
@@ -94,7 +97,21 @@ const ChatInputs: React.FC<Props> = ({
         title={t('send') || 'Send'}
         icon={<Send />}
       />
-      {showMicrophone && (
+      {showMicrophone && microphoneMode === 'HOLD_TO_TALK' && (
+        <MicrophoneButton
+          listening={listening}
+          startListening={startListening}
+          stopListening={() => {
+            stopListening();
+
+            if (!!userMessage?.length) {
+              sendMessage(userMessage);
+            }
+          }}
+          stopAudio={stopAudio}
+        />
+      )}
+      {showMicrophone && microphoneMode === 'CONTINUOUS' && (
         <Button
           primary
           className={cx('memori-chat-inputs--mic', {

package/src/components/ChatInputs/__snapshots__/ChatInputs.test.tsx.snap

@@ -88,26 +88,41 @@ exports[`renders ChatInputs disabled unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -198,26 +213,41 @@ exports[`renders ChatInputs listening unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
-      title="write_and_speak.micButtonPopoverListening"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic memori-chat-inputs--mic--listening"
+          title="write_and_speak.micButtonPopoverListening"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -337,26 +367,41 @@ exports[`renders ChatInputs on instruct unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -446,26 +491,41 @@ exports[`renders ChatInputs unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;
@@ -556,26 +616,41 @@ exports[`renders ChatInputs with user message unchanged 1`] = `
         </svg>
       </span>
     </button>
-    <button
-      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
-      title="write_and_speak.micButtonPopover"
+    <div
+      class="memori-tooltip memori-tooltip--align-topLeft memori-mic-btn-tooltip"
     >
-      <span
-        class="memori-button--icon"
+      <div
+        class="memori-tooltip--content"
       >
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          role="img"
-          viewBox="0 0 1024 1024"
-          xmlns="http://www.w3.org/2000/svg"
+        <span>
+          write_and_speak.pressAndHoldToSpeak
+        </span>
+      </div>
+      <div
+        class="memori-tooltip--trigger"
+      >
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-chat-inputs--mic"
+          title="write_and_speak.micButtonPopover"
         >
-          <path
-            d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
-          />
-        </svg>
-      </span>
-    </button>
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
   </fieldset>
 </div>
 `;

package/src/components/FeedbackButtons/FeedbackButtons.tsx

@@ -122,7 +122,7 @@ const FeedbackButtons = ({
           </Transition>
         </Menu>
       ) : (
-        <Tooltip alignLeft content="Feedback">
+        <Tooltip align="left" content="Feedback">
           <Button
             title="Feedback"
             onClick={() => {

package/src/components/Header/Header.stories.tsx

@@ -46,6 +46,9 @@ const Template: Story<Props> = args => {
         continuousSpeechTimeout={continuousSpeechTimeout}
         setContinuousSpeech={setContinuousSpeech}
         setContinuousSpeechTimeout={setContinuousSpeechTimeout}
+        setControlsPosition={() => {}}
+        controlsPosition="bottom"
+        setHideEmissions={() => {}}
       />
     </>
   );

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -78,18 +78,7 @@ export const RenderMediaItem = ({
               <picture className="memori-media-item--figure">
                 {!preview && (
                   <source
-                    srcSet={[
-                      url,
-                      getResourceUrl({
-                        resourceURI: item.content,
-                        sessionID,
-                        tenantID,
-                        baseURL,
-                        apiURL,
-                      }),
-                      item.url,
-                      item.content,
-                    ].join(', ')}
+                    srcSet={[url, item.url, item.content].join(', ')}
                     type={item.mimeType}
                   />
                 )}

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

@@ -182,7 +182,7 @@ exports[`renders MediaItemWidget unchanged with img 1`] = `
                   class="memori-media-item--figure"
                 >
                   <source
-                    srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, /images/memoriAvatar.png, https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, "
+                    srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, "
                     type="image/jpeg"
                   />
                   <img
@@ -241,7 +241,7 @@ exports[`renders MediaItemWidget unchanged with img and sessionID 1`] = `
       >
         <a
           class="memori-media-item--link"
-          href="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+          href="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2"
           rel="noopener noreferrer"
           target="_blank"
           title="Game Cover"
@@ -259,7 +259,7 @@ exports[`renders MediaItemWidget unchanged with img and sessionID 1`] = `
                   class="memori-media-item--figure"
                 >
                   <source
-                    srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2/131165be-9d1a-42fb-a3ce-e8f86d40c88f, /images/memoriAvatar.png, https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, "
+                    srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, "
                     type="image/jpeg"
                   />
                   <img
@@ -431,7 +431,7 @@ exports[`renders MediaItemWidget with imgs in correct order (creation date) 1`]
                   class="memori-media-item--figure"
                 >
                   <source
-                    srcset="https://memori.ai/past, /images/memoriAvatar.png, https://memori.ai/past, "
+                    srcset="https://memori.ai/past, https://memori.ai/past, "
                     type="image/jpeg"
                   />
                   <img
@@ -495,7 +495,7 @@ exports[`renders MediaItemWidget with imgs in correct order (creation date) 1`]
                   class="memori-media-item--figure"
                 >
                   <source
-                    srcset="https://memori.ai/medium, /images/memoriAvatar.png, https://memori.ai/medium, "
+                    srcset="https://memori.ai/medium, https://memori.ai/medium, "
                     type="image/jpeg"
                   />
                   <img
@@ -559,7 +559,7 @@ exports[`renders MediaItemWidget with imgs in correct order (creation date) 1`]
                   class="memori-media-item--figure"
                 >
                   <source
-                    srcset="https://memori.ai/now, /images/memoriAvatar.png, https://memori.ai/now, "
+                    srcset="https://memori.ai/now, https://memori.ai/now, "
                     type="image/jpeg"
                   />
                   <img

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

@@ -148,7 +148,7 @@ exports[`renders MediaWidget with media unchanged 1`] = `
                     class="memori-media-item--figure"
                   >
                     <source
-                      srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, /images/memoriAvatar.png, https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, "
+                      srcset="https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, https://api.lorem.space/image/game?w=150&h=220&hash=8B7BCDC2, "
                       type="image/jpeg"
                     />
                     <img