@memori.ai/memori-react 2.2.2 → 2.3.1

package/src/components/layouts/chat.css

@@ -0,0 +1,114 @@
+.memori-widget.memori-layout-chat {
+    height: 100vh !important;
+}
+
+.memori-widget.memori-layout-chat .memori--global-background.no-background-image {
+    background: none;
+}
+
+.memori-widget>.memori-spin.memori-chat-layout {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+}
+
+.memori-chat-layout--header {
+    text-align: right;
+}
+
+.memori-chat-layout .memori-header {
+    display: inline-block;
+    width: auto;
+}
+
+.memori-chat-layout .memori--avatar {
+    top: 0;
+}
+
+.memori-chat-layout .memori--title {
+    position: relative;
+    top: 10px;
+}
+
+.memori-chat-layout .memori-chat--cover {
+    display: none;
+}
+
+.memori-chat-layout .memori--cover {
+    top: 10px;
+    padding: 0;
+    background-image: none !important;
+}
+
+.memori-chat-layout .memori--powered-by {
+    top: 0;
+    bottom: auto;
+}
+
+.memori-chat-layout--controls {
+    position: relative;
+    z-index: 5;
+    max-height: calc(100% - 50px);
+    flex: 1;
+}
+
+.memori-chat-layout--controls .memori--start-panel,
+.memori-chat-layout--controls .memori-chat--wrapper {
+    width: 80vw;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.memori-chat-layout--controls .memori--start-panel {
+    margin-top: 3rem;
+}
+
+.memori-chat-layout--controls .memori-chat--wrapper {
+    height: calc(100% - 1rem);
+}
+
+.memori-chat-layout .memori-chat--content {
+    padding: 0;
+}
+
+@media (max-width: 870px) {
+
+    .memori-chat-layout--controls .memori--start-panel,
+    .memori-chat-layout--controls .memori-chat--wrapper {
+        width: 100%;
+    }
+
+    .memori-chat-layout--controls .memori-chat--wrapper {
+        padding: 0;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori-send-on-enter-menu {
+        display: none;
+    }
+
+    .memori-header--button-settings {
+        display: none;
+    }
+}
+
+.memori-chat-layout .memori--avatar-toggle {
+    display: none;
+    width: 100%;
+    justify-content: center;
+}
+
+.memori-chat-layout .memori--title,
+.memori-chat-layout .memori--description,
+.memori-chat-layout .memori--needsPosition {
+    color: var(--memori-text-color);
+}
+
+.memori-chat-layout .memori--global-background-image {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(200, 200, 200, 0.8));
+}
+
+.memori-chat-layout .memori-chat-inputs--mic {
+    font-size: 125%;
+}

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

@@ -74,6 +74,116 @@ FullPage.args = {
   layout: 'FULLPAGE',
 };
 
+export const ChatOnly = Template.bind({});
+ChatOnly.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: 'app.memorytwin.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: 'CHAT',
+};
+
 export const Totem = Template.bind({});
 Totem.args = {
   uiLang: 'it',

package/src/styles.css

@@ -41,6 +41,7 @@
 @import url('https://fonts.bunny.net/css?family=exo-2:200,400,700');
 
 @import url('./components/layouts/totem.css');
+@import url('./components/layouts/chat.css');
 
 .sr-only {
     position: absolute;