@memori.ai/memori-react 2.0.10 → 2.1.0

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

@@ -2605,7 +2605,7 @@ exports[`renders Chat with media unchanged 1`] = `
               >
                 <a
                   class="memori-media-item--link"
-                  href="https://picsum.photos/300/200?random=0/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                  href="https://picsum.photos/300/200?random=0"
                   rel="noopener noreferrer"
                   target="_blank"
                   title="Image 0"
@@ -2623,7 +2623,7 @@ exports[`renders Chat with media unchanged 1`] = `
                           class="memori-media-item--figure"
                         >
                           <source
-                            srcset="https://picsum.photos/300/200?random=0/131165be-9d1a-42fb-a3ce-e8f86d40c88f, /images/memoriAvatar.png, https://picsum.photos/300/200?random=0, "
+                            srcset="https://picsum.photos/300/200?random=0, https://picsum.photos/300/200?random=0, "
                             type="image/png"
                           />
                           <img
@@ -2669,7 +2669,7 @@ exports[`renders Chat with media unchanged 1`] = `
               >
                 <a
                   class="memori-media-item--link"
-                  href="https://picsum.photos/200/300?random=1/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                  href="https://picsum.photos/200/300?random=1"
                   rel="noopener noreferrer"
                   target="_blank"
                   title="Image 1"
@@ -2687,7 +2687,7 @@ exports[`renders Chat with media unchanged 1`] = `
                           class="memori-media-item--figure"
                         >
                           <source
-                            srcset="https://picsum.photos/200/300?random=1/131165be-9d1a-42fb-a3ce-e8f86d40c88f, /images/memoriAvatar.png, https://picsum.photos/200/300?random=1, "
+                            srcset="https://picsum.photos/200/300?random=1, https://picsum.photos/200/300?random=1, "
                             type="image/png"
                           />
                           <img
@@ -2733,7 +2733,7 @@ exports[`renders Chat with media unchanged 1`] = `
               >
                 <a
                   class="memori-media-item--link"
-                  href="https://picsum.photos/300/300?random=2/131165be-9d1a-42fb-a3ce-e8f86d40c88f"
+                  href="https://picsum.photos/300/300?random=2"
                   rel="noopener noreferrer"
                   target="_blank"
                   title="Image 2"
@@ -2751,7 +2751,7 @@ exports[`renders Chat with media unchanged 1`] = `
                           class="memori-media-item--figure"
                         >
                           <source
-                            srcset="https://picsum.photos/300/300?random=2/131165be-9d1a-42fb-a3ce-e8f86d40c88f, /images/memoriAvatar.png, https://picsum.photos/300/300?random=2, "
+                            srcset="https://picsum.photos/300/300?random=2, https://picsum.photos/300/300?random=2, "
                             type="image/png"
                           />
                           <img

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

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -145,12 +145,28 @@ let speechSynthesizer: SpeechSynthesizer | null;
 let audioDestination: SpeakerAudioDestination;
 let audioContext: IAudioContext;
 
+export interface LayoutProps {
+  header?: JSX.Element | null;
+  avatar: JSX.Element;
+  chat?: JSX.Element | null;
+  startPanel: JSX.Element;
+  integrationStyle?: JSX.Element | null;
+  integrationBackground?: JSX.Element | null;
+  changeMode?: JSX.Element | null;
+  poweredBy?: JSX.Element | null;
+  sessionId?: string;
+  hasUserActivatedSpeak?: boolean;
+  showInstruct?: boolean;
+  loading?: boolean;
+}
+
 export interface Props {
   memori: Memori;
   memoriConfigs?: MemoriConfig[];
   memoriLang?: string;
   integration?: Integration;
   layout?: 'DEFAULT' | 'FULLPAGE' | 'TOTEM';
+  customLayout?: React.FC<LayoutProps>;
   showShare?: boolean;
   showInstruct?: boolean;
   showInputs?: boolean;
@@ -184,6 +200,7 @@ const MemoriWidget = ({
   memoriLang,
   integration,
   layout = 'DEFAULT',
+  customLayout,
   showInstruct = false,
   showShare = true,
   preview = false,
@@ -1267,6 +1284,9 @@ const MemoriWidget = ({
     }
 
     const source = audioContext.createBufferSource();
+    source.addEventListener('ended', () => {
+      setIsPlayingAudio(false);
+    });
     audioDestination.onAudioEnd = () => {
       setIsPlayingAudio(false);
       source.disconnect();
@@ -1276,8 +1296,6 @@ const MemoriWidget = ({
       onEndSpeakStartListen();
     };
 
-    setIsPlayingAudio(true);
-
     speechSynthesizer.speakSsmlAsync(
       `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="https://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" xml:lang="${getCultureCodeByLanguage(
         userLang
@@ -1287,6 +1305,8 @@ const MemoriWidget = ({
       )}</s></voice></speak>`,
       result => {
         if (result) {
+          setIsPlayingAudio(true);
+
           try {
             // if (audioContext.destination.context.state === 'running') {
             //   audioContext.destination.disconnect();
@@ -1306,6 +1326,7 @@ const MemoriWidget = ({
                 audioContext.state === 'closed'
               ) {
                 source.disconnect();
+                setIsPlayingAudio(false);
               } else if ((audioContext.state as string) === 'interrupted') {
                 audioContext.resume();
               }
@@ -2251,12 +2272,13 @@ const MemoriWidget = ({
 
   const poweredBy = <PoweredBy tenant={tenant} userLang={userLang} />;
 
-  const Layout =
-    selectedLayout === 'TOTEM'
-      ? TotemLayout
-      : selectedLayout === 'FULLPAGE'
-      ? FullPageLayout
-      : FullPageLayout;
+  const Layout = customLayout
+    ? customLayout
+    : selectedLayout === 'TOTEM'
+    ? TotemLayout
+    : selectedLayout === 'FULLPAGE'
+    ? FullPageLayout
+    : FullPageLayout;
 
   return (
     <div

package/src/components/SettingsDrawer/SettingsDrawer.tsx

@@ -106,19 +106,17 @@ const SettingsDrawer = ({
               </RadioGroup.Option>
             </RadioGroup>
           </div>
-          {!!continuousSpeech && (
-            <div className="memori-settings-drawer--field">
-              <Checkbox
-                label={t('write_and_speak.hideEmissionsLabel')}
-                name="hideControls"
-                checked={hideEmissions}
-                onChange={e => {
-                  setHideEmissions(e.target.checked);
-                  setLocalConfig('hideEmissions', e.target.checked);
-                }}
-              />
-            </div>
-          )}
+          <div className="memori-settings-drawer--field">
+            <Checkbox
+              label={t('write_and_speak.hideEmissionsLabel')}
+              name="hideControls"
+              checked={hideEmissions}
+              onChange={e => {
+                setHideEmissions(e.target.checked);
+                setLocalConfig('hideEmissions', e.target.checked);
+              }}
+            />
+          </div>
         </>
       )}
     </Drawer>

package/src/components/layouts/FullPage.tsx

@@ -1,22 +1,8 @@
 import React from 'react';
 import Spin from '../ui/Spin';
+import { LayoutProps } from '../MemoriWidget/MemoriWidget';
 
-export interface Props {
-  header?: JSX.Element | null;
-  avatar: JSX.Element;
-  chat?: JSX.Element | null;
-  startPanel: JSX.Element;
-  integrationStyle?: JSX.Element | null;
-  integrationBackground?: JSX.Element | null;
-  changeMode?: JSX.Element | null;
-  poweredBy?: JSX.Element | null;
-  sessionId?: string;
-  hasUserActivatedSpeak?: boolean;
-  showInstruct?: boolean;
-  loading?: boolean;
-}
-
-const FullPageLayout: React.FC<Props> = ({
+const FullPageLayout: React.FC<LayoutProps> = ({
   header,
   avatar,
   chat,

package/src/components/layouts/Totem.tsx

@@ -1,22 +1,8 @@
 import React from 'react';
 import Spin from '../ui/Spin';
+import { LayoutProps } from '../MemoriWidget/MemoriWidget';
 
-export interface Props {
-  header?: JSX.Element | null;
-  avatar: JSX.Element;
-  chat?: JSX.Element | null;
-  startPanel: JSX.Element;
-  integrationStyle?: JSX.Element | null;
-  integrationBackground?: JSX.Element | null;
-  changeMode?: JSX.Element | null;
-  poweredBy?: JSX.Element | null;
-  sessionId?: string;
-  hasUserActivatedSpeak?: boolean;
-  showInstruct?: boolean;
-  loading?: boolean;
-}
-
-const TotemLayout: React.FC<Props> = ({
+const TotemLayout: React.FC<LayoutProps> = ({
   header,
   avatar,
   chat,

package/src/components/layouts/layouts.stories.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { memori, tenant, integration } from '../../mocks/data';
-import Memori, { Props } from '../MemoriWidget/MemoriWidget';
+import Memori, { LayoutProps, Props } from '../MemoriWidget/MemoriWidget';
+import Spin from '../ui/Spin';
 
 const meta: Meta = {
   title: 'General/Layouts',
@@ -21,6 +22,34 @@ const meta: Meta = {
 
 export default meta;
 
+const CustomLayout: React.FC<LayoutProps> = ({
+  header,
+  avatar,
+  chat,
+  startPanel,
+  integrationStyle,
+  integrationBackground,
+  changeMode,
+  sessionId,
+  hasUserActivatedSpeak,
+  showInstruct = false,
+  loading = false,
+  poweredBy,
+}) => (
+  <>
+    {integrationStyle}
+    {integrationBackground}
+
+    <Spin spinning={loading} className="memori-mycustom-layout">
+      {poweredBy}
+
+      <div className="memori-mycustom-layout--controls">
+        {sessionId && hasUserActivatedSpeak ? chat : startPanel}
+      </div>
+    </Spin>
+  </>
+);
+
 const Template: Story<Props> = args => <Memori {...args} />;
 
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
@@ -153,3 +182,14 @@ Totem.args = {
   tenant,
   layout: 'TOTEM',
 };
+
+export const Custom = Template.bind({});
+Custom.args = {
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  memori,
+  tenant,
+  layout: 'FULLPAGE',
+  customLayout: CustomLayout,
+};

package/src/helpers/media.ts

@@ -17,28 +17,34 @@ export const getResourceUrl = ({
     type === 'cover'
       ? `${baseURL}/images/memoriCover.png`
       : `${baseURL}/images/memoriAvatar.png`;
-  if (!resourceURI || resourceURI.length === 0) {
-    return defaultUri;
-  } else if (
-    resourceURI.includes('memoriai/memory') &&
-    !resourceURI.includes('memori-ai-session-id') &&
-    sessionID
-  ) {
-    return `${resourceURI}?memori-ai-session-id=${sessionID}`;
-  } else if (
-    resourceURI.startsWith('https://') ||
-    resourceURI.startsWith('http://')
-  ) {
-    return `${resourceURI}${sessionID ? `/${sessionID}` : ''}`;
-  } else if (resourceURI.startsWith('cloud://')) {
-    return `${
-      apiURL?.replace(/v2/, 'v1') || ''
-    }/CloudAsset/${resourceURI.replace('cloud://', '')}`;
-  } else if (resourceURI.startsWith('guid://')) {
-    return `${
-      apiURL?.replace(/v2/, 'v1') || ''
-    }/GuidAsset/${resourceURI.replace('guid://', '')}`;
-  } else {
-    return defaultUri;
+
+  try {
+    if (!resourceURI || resourceURI.length === 0) {
+      return defaultUri;
+    } else if (
+      resourceURI.includes('memoriai/memory') &&
+      !resourceURI.includes('memori-ai-session-id') &&
+      sessionID
+    ) {
+      return `${resourceURI}?memori-ai-session-id=${sessionID}`;
+    } else if (
+      (resourceURI.startsWith('https://') ||
+        resourceURI.startsWith('http://')) &&
+      new URL(resourceURI).hostname.includes('memori.ai')
+    ) {
+      return `${resourceURI}${sessionID ? `/${sessionID}` : ''}`;
+    } else if (resourceURI.startsWith('cloud://')) {
+      return `${
+        apiURL?.replace(/v2/, 'v1') || ''
+      }/CloudAsset/${resourceURI.replace('cloud://', '')}`;
+    } else if (resourceURI.startsWith('guid://')) {
+      return `${
+        apiURL?.replace(/v2/, 'v1') || ''
+      }/GuidAsset/${resourceURI.replace('guid://', '')}`;
+    } else {
+      return resourceURI || defaultUri;
+    }
+  } catch (e) {
+    return resourceURI || defaultUri;
   }
 };

package/src/index.tsx

@@ -22,6 +22,7 @@ export interface Props {
   secretToken?: string;
   sessionID?: string;
   layout?: WidgetProps['layout'];
+  customLayout?: WidgetProps['customLayout'];
   showShare?: boolean;
   showSettings?: boolean;
   showInstruct?: boolean;
@@ -66,6 +67,7 @@ const Memori: React.FC<Props> = ({
   secretToken,
   sessionID,
   layout = 'DEFAULT',
+  customLayout,
   showShare = true,
   showSettings = true,
   showInstruct = false,
@@ -147,6 +149,7 @@ const Memori: React.FC<Props> = ({
   return memori ? (
     <MemoriWidget
       layout={layout}
+      customLayout={customLayout}
       height={height}
       baseUrl={
         baseURL ||