@memori.ai/memori-react 2.0.11 → 2.1.0

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,
@@ -2255,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/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 ||