@memori.ai/memori-react 6.8.1 → 6.8.4

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

@@ -4,6 +4,8 @@ import { memori, tenant, integration } from '../../mocks/data';
 import Memori, { LayoutProps, Props } from '../MemoriWidget/MemoriWidget';
 import I18nWrapper from '../../I18nWrapper';
 import Spin from '../ui/Spin';
+import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 
 const meta: Meta = {
   title: 'General/Layouts',
@@ -23,6 +25,240 @@ const meta: Meta = {
 
 export default meta;
 
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <ArtifactProvider >
+    <VisemeProvider>
+      <Memori {...args} />
+    </VisemeProvider>
+    </ArtifactProvider>
+  </I18nWrapper>
+);
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  memori,
+  tenant,
+  layout: 'FULLPAGE',
+};
+
+export const FullPage = Template.bind({});
+FullPage.args = {
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  memori,
+  tenant,
+  layout: 'FULLPAGE',
+};
+
+export const Totem = Template.bind({});
+Totem.args = {
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  // memori,
+  // tenant,
+  memori: {
+    memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21',
+    name: 'Nicola',
+    password: null,
+    recoveryTokens: null,
+    newPassword: null,
+    ownerUserID: null,
+    ownerUserName: 'nzambello',
+    ownerTenantName: 'aisuru.com',
+    memoriConfigurationID: 'fd10bb42-98d9-4c08-8e02-2b08bd4e4975',
+    description:
+      'Sono Nicola Zambello, sviluppatore e attivista per un web etico e sostenibile',
+    completionDescription: null,
+    engineMemoriID: '9b0a2913-d3d8-4e98-a49d-6e1c99479e1b',
+    isOwner: false,
+    isGiver: false,
+    isReceiver: false,
+    giverTag: null,
+    giverPIN: null,
+    privacyType: 'PUBLIC',
+    secretToken: null,
+    minimumNumberOfRecoveryTokens: null,
+    totalNumberOfRecoveryTokens: null,
+    sentInvitations: [],
+    receivedInvitations: [],
+    integrations: [
+      {
+        integrationID: '62de8c99-0ac2-4cbe-bd95-a39ad7dc6b32',
+        memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21',
+        type: 'LANDING_EXPERIENCE',
+        state: 'NEW',
+        deviceEmails: null,
+        invocationText: null,
+        jobID: null,
+        customData:
+          '{"textColor":"#000000","buttonBgColor":"#007eb6","buttonTextColor":"#ffffff","globalBackground":"https://assets.memori.ai/api/v2/asset/cade3b9c-0437-4342-b2bd-8db9c2a3a20e.png","blurBackground":true,"innerBgColor":"light","multilanguage":true,"avatar":"readyplayerme","avatarURL":"https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb#1681736752156","name":"Pagina pubblica","contextVars":"ANIMALE:CANE","personTag":"☠️","personPIN":"666666","personName":"Pirata","showShare":true,"avatarFullBodyURL":"https://models.readyplayer.me/63b55751f17e295642bf07a2.glb"}',
+        resources: [],
+        publish: true,
+        creationTimestamp: '2022-06-13T14:44:52.833573Z',
+        lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
+      },
+    ],
+    avatarURL:
+      'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
+    coverURL:
+      'https://assets.memori.ai/api/v2/asset/e9bb9f6d-8f34-45ab-af9e-6d630d9a51a8.png',
+    avatar3DURL:
+      'https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb',
+    avatarOriginal3DURL:
+      'https://d1a370nemizbjq.cloudfront.net/c7c80a1d-deda-4fe1-96c6-fabad0771aa2.glb',
+    needsPosition: false,
+    voiceType: 'MALE',
+    culture: 'it-IT',
+    categories: [
+      'biografico',
+      'tecnologia',
+      'web',
+      'open-source',
+      'green',
+      'privacy',
+    ],
+    exposed: true,
+    disableR2R3Loop: null,
+    disableR4Loop: null,
+    disableR5Loop: null,
+    enableCompletions: true,
+    completionModel: null,
+    chainingMemoriID: null,
+    chainingBaseURL: null,
+    chainingPassword: null,
+    contentQualityIndex: 210.8,
+    contentQualityIndexTimestamp: '2023-04-17T00:01:32.194744Z',
+    publishedInTheMetaverse: true,
+    metaverseEnvironment: 'apartment',
+    blockedUntil: null,
+    creationTimestamp: '2022-06-13T14:21:55.793034Z',
+    lastChangeTimestamp: '2023-04-15T08:15:36.403546Z',
+  },
+  integration: {
+    integrationID: '62de8c99-0ac2-4cbe-bd95-a39ad7dc6b32',
+    memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21',
+    type: 'LANDING_EXPERIENCE',
+    state: 'NEW',
+    deviceEmails: null,
+    invocationText: null,
+    jobID: null,
+    publish: true,
+    creationTimestamp: '2022-06-13T14:44:52.833573Z',
+    lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
+    customData: JSON.stringify({
+      ...JSON.parse(
+        '{"textColor":"#000000","buttonBgColor":"#007eb6","buttonTextColor":"#ffffff","globalBackground":"https://assets.memori.ai/api/v2/asset/cade3b9c-0437-4342-b2bd-8db9c2a3a20e.png","blurBackground":true,"innerBgColor":"light","multilanguage":true,"avatar":"readyplayerme","avatarURL":"https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb#1681736752156","name":"Pagina pubblica","contextVars":"ANIMALE:CANE","personTag":"☠️","personPIN":"666666","personName":"Pirata","showShare":true,"avatarFullBodyURL":"https://models.readyplayer.me/63b55751f17e295642bf07a2.glb"}'
+      ),
+      avatar: 'readyplayerme-full',
+      avatarURL:
+        'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#' +
+        // 'https://models.readyplayer.me/63b558263858282637c54115.glb#' +
+        new Date(Date.now()).getTime(),
+    }),
+  },
+  layout: 'TOTEM',
+};
+
+export const ChatOnly = Template.bind({});
+ChatOnly.args = {
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  showUpload: true,
+  // memori,
+  // tenant,
+
+  memori: {
+    memoriName: 'CreaRiassunti',
+    ownerUserName: 'patini929',
+    memoriID: '514dd043-ec26-4c57-a014-a512c9014822',
+    ownerUserID: '1941d326-6986-4fa1-872b-458d09fb654c',
+    tenantID: 'www.aisuru.com',
+    engineURL: 'https://engine.memori.ai',
+    apiURL: 'https://backend.memori.ai',
+    baseURL: 'https://www.aisuru.com',
+    uiLang: 'IT',
+    spokenLang: 'FR',
+    layout: 'FULLPAGE',
+    showSettings: true,
+    showClear: false,
+    showAIicon: true,
+    showWhyThisAnswer: true,
+    showTypingText: false,
+    showOnlyLastMessages: false,
+    showTranslationOriginal: false,
+    showCopyButton: false,
+    showShare: true,
+    showLogin: false,
+    enableAudio: true,
+    name: 'CreaRiassunti',
+    password: null,
+    recoveryTokens: null,
+    newPassword: null,
+    ownerTenantName: 'aisuru.com',
+    memoriConfigurationID: 'fd10bb42-98d9-4c08-8e02-2b08bd4e4975',
+    description: '',
+    completionDescription: null,
+    engineMemoriID: '9b0a2913-d3d8-4e98-a49d-6e1c99479e1b',
+    isOwner: false,
+    isGiver: false,
+    isReceiver: false,
+    giverTag: null,
+    giverPIN: null,
+    privacyType: 'PUBLIC',
+    secretToken: null,
+    minimumNumberOfRecoveryTokens: null,
+    totalNumberOfRecoveryTokens: null,
+    sentInvitations: [],
+    receivedInvitations: [],
+    integrations: [
+      {
+        integrationID: '37d368cf-6241-4cc8-a1f3-742786f22431',
+        memoriID: '514dd043-ec26-4c57-a014-a512c9014822',
+        type: 'LANDING_EXPERIENCE',
+        state: 'NEW',
+        deviceEmails: null,
+        invocationText: null,
+        jobID: null,
+        customData:
+          '{"textColor":"#000000","buttonBgColor":"#007eb6","buttonTextColor":"#ffffff","globalBackground":"https://assets.memori.ai/api/v2/asset/cade3b9c-0437-4342-b2bd-8db9c2a3a20e.png","blurBackground":true,"innerBgColor":"light","multilanguage":true,"avatar":"readyplayerme","avatarURL":"https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb#1681736752156","name":"Pagina pubblica","contextVars":"ANIMALE:CANE","personTag":"☠️","personPIN":"666666","personName":"Pirata","showShare":true,"avatarFullBodyURL":"https://models.readyplayer.me/63b55751f17e295642bf07a2.glb"}',
+        resources: [],
+        publish: true,
+        creationTimestamp: '2022-06-13T14:44:52.833573Z',
+        lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
+      },
+    ],
+    needsPosition: false,
+    voiceType: 'MALE',
+    culture: 'it-IT',
+    categories: ['demo'],
+    exposed: true,
+    disableR2R3Loop: null,
+    disableR4Loop: null,
+    disableR5Loop: null,
+    enableCompletions: true,
+    completionModel: null,
+    chainingMemoriID: null,
+    chainingBaseURL: null,
+    chainingPassword: null,
+    contentQualityIndex: 210.8,
+    contentQualityIndexTimestamp: '2023-04-17T00:01:32.194744Z',
+    publishedInTheMetaverse: true,
+    metaverseEnvironment: 'apartment',
+    blockedUntil: null,
+    creationTimestamp: '2022-06-13T14:21:55.793034Z',
+    lastChangeTimestamp: '2023-04-15T08:15:36.403546Z',
+  },
+  layout: 'CHAT',
+};
+
 export const CustomLayout: React.FC<LayoutProps> = ({
   Header,
   headerProps,
@@ -34,11 +270,8 @@ export const CustomLayout: React.FC<LayoutProps> = ({
   startPanelProps,
   integrationStyle,
   integrationBackground,
-  ChangeMode,
-  changeModeProps,
   sessionId,
   hasUserActivatedSpeak,
-  showInstruct = false,
   loading = false,
   poweredBy,
 }) => (
@@ -60,40 +293,22 @@ export const CustomLayout: React.FC<LayoutProps> = ({
   </>
 );
 
-const Template: Story<Props> = args => (
-  <I18nWrapper>
-    <Memori {...args} />
-  </I18nWrapper>
-);
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  memori,
-  tenant,
-  layout: 'FULLPAGE',
-};
-
-export const FullPage = Template.bind({});
-FullPage.args = {
+export const Custom = Template.bind({});
+Custom.args = {
   uiLang: 'it',
   showShare: true,
   showSettings: true,
   memori,
   tenant,
   layout: 'FULLPAGE',
+  customLayout: CustomLayout,
 };
 
-export const ChatOnly = Template.bind({});
-ChatOnly.args = {
+export const WebsiteAssistant = Template.bind({});
+WebsiteAssistant.args = {
   uiLang: 'it',
   showShare: true,
   showSettings: true,
-  // memori,
-  // tenant,
   memori: {
     memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21',
     name: 'Nicola',
@@ -194,14 +409,18 @@ ChatOnly.args = {
         new Date(Date.now()).getTime(),
     }),
   },
-  layout: 'CHAT',
+  tenant,
+  layout: 'WEBSITE_ASSISTANT',
 };
 
-export const Totem = Template.bind({});
-Totem.args = {
+export const HiddenChat = Template.bind({});
+HiddenChat.args = {
   uiLang: 'it',
   showShare: true,
   showSettings: true,
+  // autoStart: true,
+  // memori,
+  // tenant,
   memori: {
     memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21',
     name: 'Nicola',
@@ -302,26 +521,16 @@ Totem.args = {
         new Date(Date.now()).getTime(),
     }),
   },
-  tenant,
-  layout: 'TOTEM',
-};
-
-export const Custom = Template.bind({});
-Custom.args = {
-  uiLang: 'it',
-  showShare: true,
-  showSettings: true,
-  memori,
-  tenant,
-  layout: 'FULLPAGE',
-  customLayout: CustomLayout,
+  layout: 'HIDDEN_CHAT',
 };
 
-export const WebsiteAssistant = Template.bind({});
-WebsiteAssistant.args = {
+export const ZoomedFullBody = Template.bind({});
+ZoomedFullBody.args = {
   uiLang: 'it',
   showShare: true,
   showSettings: true,
+  showAudio: true,
+  enableAudio: true,
   memori: {
     memoriID: '6573844d-a7cd-47ef-9e78-840d82020c21',
     name: 'Nicola',
@@ -342,6 +551,7 @@ WebsiteAssistant.args = {
     giverTag: null,
     giverPIN: null,
     privacyType: 'PUBLIC',
+    enableAudio: true,
     secretToken: null,
     minimumNumberOfRecoveryTokens: null,
     totalNumberOfRecoveryTokens: null,
@@ -364,16 +574,8 @@ WebsiteAssistant.args = {
         lastChangeTimestamp: '2022-06-13T14:44:52.833573Z',
       },
     ],
-    avatarURL:
-      'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-    coverURL:
-      'https://assets.memori.ai/api/v2/asset/e9bb9f6d-8f34-45ab-af9e-6d630d9a51a8.png',
-    avatar3DURL:
-      'https://assets.memori.ai/api/v2/asset/893c41df-7619-436d-9e86-fe1d406fc933.glb',
-    avatarOriginal3DURL:
-      'https://d1a370nemizbjq.cloudfront.net/c7c80a1d-deda-4fe1-96c6-fabad0771aa2.glb',
     needsPosition: false,
-    voiceType: 'MALE',
+    voiceType: 'FEMALE',
     culture: 'it-IT',
     categories: [
       'biografico',
@@ -417,11 +619,9 @@ WebsiteAssistant.args = {
       ),
       avatar: 'readyplayerme-full',
       avatarURL:
-        'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#' +
-        // 'https://models.readyplayer.me/63b558263858282637c54115.glb#' +
+        'https://assets.memori.ai/api/v2/asset/3932bf70-e953-4e8a-b63a-f316544c283e.glb' +
         new Date(Date.now()).getTime(),
     }),
   },
-  tenant,
-  layout: 'WEBSITE_ASSISTANT',
+  layout: 'ZOOMED_FULL_BODY',
 };

package/src/components/layouts/totem.css

@@ -1,5 +1,5 @@
 .memori-widget.memori-layout-totem {
-    height: 100vh !important;
+    height: 95vh !important;
 }
 
 .memori-widget.memori-layout-totem .memori--global-background.no-background-image {
@@ -47,7 +47,7 @@
 
 .memori-totem-layout .memori-header {
     position: relative;
-    z-index: 100;
+    z-index: 101;
     display: inline-flex;
     width: auto;
     height: auto;
@@ -95,35 +95,44 @@
     bottom: auto;
 }
 
-.memori-totem-layout--avatar .memori--avatar-wrapper>div {
-    overflow: visible !important;
+/* .memori-totem-layout--avatar .memori--avatar-wrapper>div {
+    overflow: visible !important; */
     /* width: 100% !important;
     height: 100% !important; */
-    width: auto !important;
+    /* width: auto !important;
     height: 90vh !important;
     max-height: 90vh;
     border-radius: 0;
     transform: scale(1.7) translate(0px, 10vh);
-}
+} */
 
-.memori-totem-layout--avatar .memori--avatar-wrapper canvas {
+/* .memori-totem-layout--avatar .memori--avatar-wrapper canvas {
     width: auto !important;
     max-width: 100%;
     height: 100% !important;
     max-height: 100%;
-}
+} */
 
-.memori-totem-layout--controls {
+/* .memori-totem-layout--controls {
     position: relative;
     z-index: 5;
-}
+} */
 
 .memori-totem-layout--controls .memori--start-panel,
 .memori-totem-layout--controls .memori-chat--history,
 .memori-totem-layout--controls .memori-chat--content {
+    z-index: 100;
     background: transparent;
 }
 
+.memori-totem-layout--controls .memori-chat--history .memori-chat--content {
+    max-height: 400px;
+}
+
+.memori-totem-layout--controls {
+    z-index: 100;
+}
+
 .memori-totem-layout--controls .memori--start-panel,
 .memori-totem-layout--controls .memori-chat--wrapper {
     width: 80vw;

package/src/components/layouts/website-assistant.css

@@ -107,7 +107,7 @@
 .memori-website_assistant--trigger-button .memori-blob figure {
     width: 85%;
     border-radius: 0;
-    opacity: 0.75;
+    opacity: 1;
 }
 
 .memori-website_assistant-layout .memori--powered-by {
@@ -391,7 +391,7 @@
 
 .memori-website_assistant-layout .memori-chat--bubble,
 .memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble {
-    opacity: 0.6;
+    opacity: 1;
     transition: opacity 0.2s ease-in-out;
 }
 

package/src/components/layouts/zoomed-full-body.css

@@ -0,0 +1,18 @@
+
+
+.memori--powered-by-custom {
+    position: absolute;
+    z-index: 1000;
+    bottom: 35px;
+    display: inline-flex;
+    min-width: 150px;
+    flex-wrap: wrap;
+}
+
+.memori--grid-column--zoomed-full-body {
+    max-height: calc(100% - 130px) !important;
+}
+
+.memori.memori-widget.memori-layout-zoomed_full_body .memori--grid {
+    height: calc(100% - 25px);
+}

package/src/components/ui/Alert.css

@@ -0,0 +1,93 @@
+.memori-alert {
+    position: fixed;
+    z-index: 1000;
+    top: 20px;
+    right: 20px;
+    width: var(--memori-alert--width, 400px);
+  }
+  
+  .memori-alert--container {
+    display: flex;
+    align-items: flex-start;
+    padding: 16px;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    background-color: white;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+  
+  .memori-alert--icon {
+    flex-shrink: 0;
+    margin-right: 12px;
+  }
+  
+  .memori-alert--content {
+    min-width: 0;
+    flex: 1;
+  }
+  
+  .memori-alert--title {
+    margin-bottom: 4px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+  
+  .memori-alert--description {
+    color: rgb(107 114 128);
+    font-size: 14px;
+  }
+  
+  .memori-alert--actions {
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
+  }
+  
+  .memori-alert--action {
+    margin-right: 8px;
+  }
+  
+  .memori-alert--close {
+    flex-shrink: 0;
+  }
+  
+  /* Alert types */
+  .memori-alert--success {
+    --alert-color: rgb(34 197 94);
+    --alert-bg: rgb(240 253 244);
+  }
+  
+  .memori-alert--warning {
+    --alert-color: rgb(234 179 8);
+    --alert-bg: rgb(254 252 232);
+  }
+  
+  .memori-alert--error {
+    --alert-color: rgb(239 68 68);
+    --alert-bg: rgb(254 242 242);
+  }
+  
+  .memori-alert--info {
+    --alert-color: rgb(59 130 246);
+    --alert-bg: rgb(239 246 255);
+  }
+  
+  .memori-alert--success .memori-alert--container {
+    border: 1px solid var(--alert-color);
+    background-color: var(--alert-bg);
+  }
+  
+  .memori-alert--warning .memori-alert--container {
+    border: 1px solid var(--alert-color);
+    background-color: var(--alert-bg);
+  }
+  
+  .memori-alert--error .memori-alert--container {
+    border: 1px solid var(--alert-color);
+    background-color: var(--alert-bg);
+  }
+  
+  .memori-alert--info .memori-alert--container {
+    border: 1px solid var(--alert-color);
+    background-color: var(--alert-bg);
+  }