@memori.ai/memori-react 2.16.0 → 2.17.0

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -56,6 +56,7 @@ import PoweredBy from '../PoweredBy/PoweredBy';
 import FullPageLayout from '../layouts/FullPage';
 import TotemLayout from '../layouts/Totem';
 import ChatLayout from '../layouts/Chat';
+import WebsiteAssistantLayout from '../layouts/WebsiteAssistant';
 
 // Helpers / Utils
 import { getTranslation } from '../../helpers/translations';
@@ -100,6 +101,7 @@ type MemoriTextEnteredEvent = CustomEvent<{
   hidden?: boolean;
   typingText?: string;
   useLoaderTextAsMsg?: boolean;
+  hasBatchQueued?: boolean;
 }>;
 
 const typeMessage = (
@@ -107,7 +109,8 @@ const typeMessage = (
   waitForPrevious = true,
   hidden = false,
   typingText?: string,
-  useLoaderTextAsMsg = false
+  useLoaderTextAsMsg = false,
+  hasBatchQueued = false
 ) => {
   const e: MemoriTextEnteredEvent = new CustomEvent('MemoriTextEntered', {
     detail: {
@@ -116,6 +119,7 @@ const typeMessage = (
       hidden,
       typingText,
       useLoaderTextAsMsg,
+      hasBatchQueued,
     },
   });
 
@@ -125,9 +129,17 @@ const typeMessageHidden = (
   message: string,
   waitForPrevious = true,
   typingText?: string,
-  useLoaderTextAsMsg = false
+  useLoaderTextAsMsg = false,
+  hasBatchQueued = false
 ) =>
-  typeMessage(message, waitForPrevious, true, typingText, useLoaderTextAsMsg);
+  typeMessage(
+    message,
+    waitForPrevious,
+    true,
+    typingText,
+    useLoaderTextAsMsg,
+    hasBatchQueued
+  );
 
 const typeBatchMessages = (
   messages: {
@@ -193,7 +205,8 @@ const typeBatchMessages = (
         step.waitForPrevious,
         step.hidden,
         step.typingText,
-        step.useLoaderTextAsMsg
+        step.useLoaderTextAsMsg,
+        !next.done
       );
     } else if (areInputsDisabled()) {
       reEnableInputs();
@@ -277,7 +290,7 @@ export interface Props {
   memoriLang?: string;
   multilingual?: boolean;
   integration?: Integration;
-  layout?: 'DEFAULT' | 'FULLPAGE' | 'TOTEM' | 'CHAT';
+  layout?: 'DEFAULT' | 'FULLPAGE' | 'TOTEM' | 'CHAT' | 'WEBSITE_ASSISTANT';
   customLayout?: React.FC<LayoutProps>;
   showShare?: boolean;
   showInstruct?: boolean;
@@ -519,7 +532,8 @@ const MemoriWidget = ({
     translatedText?: string,
     hidden: boolean = false,
     typingText?: string,
-    useLoaderTextAsMsg = false
+    useLoaderTextAsMsg = false,
+    hasBatchQueued = false
   ) => {
     const sessionID =
       newSessionId ||
@@ -673,9 +687,9 @@ const MemoriWidget = ({
       });
     }
 
-    if (gotError) {
-      setMemoriTyping(false);
+    if (!hasBatchQueued) {
       setTypingText(undefined);
+      setMemoriTyping(false);
     }
   };
 
@@ -815,15 +829,6 @@ const MemoriWidget = ({
     dialogState: DialogState;
     sessionID: string;
   } | void> => {
-    if (
-      memori.privacyType !== 'PUBLIC' &&
-      !memori.secretToken &&
-      !memoriPwd &&
-      !memoriTokens
-    ) {
-      setAuthModalState('password');
-      return;
-    }
     let storageBirthDate = getLocalConfig<string | undefined>(
       'birthDate',
       undefined
@@ -833,6 +838,15 @@ const MemoriWidget = ({
       return;
     }
 
+    if (
+      memori.privacyType !== 'PUBLIC' &&
+      !memori.secretToken &&
+      !memoriPwd &&
+      !memoriTokens
+    ) {
+      setAuthModalState('password');
+      return;
+    }
     setLoading(true);
     try {
       if (!memori.giverTag && !!memori.receivedInvitations?.length) {
@@ -884,6 +898,9 @@ const MemoriWidget = ({
         console.error(session);
         message.error(t('underageTwinSession', { age: minAge }));
         setGotErrorInOpening(true);
+      } else if (session?.resultCode === 403) {
+        setMemoriPwd(undefined);
+        setAuthModalState('password');
       } else {
         console.error(session);
         message.error(t(getErrori18nKey(session?.resultCode)));
@@ -906,6 +923,15 @@ const MemoriWidget = ({
   ) => {
     setLoading(true);
     try {
+      let storageBirthDate = getLocalConfig<string | undefined>(
+        'birthDate',
+        undefined
+      );
+      if (!(birthDate || storageBirthDate) && !!minAge) {
+        setShowAgeVerification(true);
+        return;
+      }
+
       if (
         memori.privacyType !== 'PUBLIC' &&
         !password &&
@@ -918,15 +944,6 @@ const MemoriWidget = ({
         return;
       }
 
-      let storageBirthDate = getLocalConfig<string | undefined>(
-        'birthDate',
-        undefined
-      );
-      if (!(birthDate || storageBirthDate) && !!minAge) {
-        setShowAgeVerification(true);
-        return;
-      }
-
       let referral;
       try {
         referral = (() => {
@@ -965,12 +982,14 @@ const MemoriWidget = ({
                     text: currentState.emission,
                     media: currentState.media,
                     fromUser: false,
+                    initial: true,
                   },
                 ])
               : pushMessage({
                   text: currentState.emission,
                   media: currentState.media,
                   fromUser: false,
+                  initial: true,
                 });
           }
         }
@@ -988,6 +1007,9 @@ const MemoriWidget = ({
         console.error(response);
         message.error(t('underageTwinSession', { age: minAge }));
         setGotErrorInOpening(true);
+      } else if (response?.resultCode === 403) {
+        setMemoriPwd(undefined);
+        setAuthModalState('password');
       } else {
         console.error(response);
         message.error(t(getErrori18nKey(response.resultCode)));
@@ -1471,7 +1493,10 @@ const MemoriWidget = ({
   };
 
   const speak = (text: string): void => {
-    if (!AZURE_COGNITIVE_SERVICES_TTS_KEY) return;
+    if (!AZURE_COGNITIVE_SERVICES_TTS_KEY || preview) {
+      emitEndSpeakEvent();
+      return;
+    }
     stopListening();
     // stopAudio();
 
@@ -2118,8 +2143,14 @@ const MemoriWidget = ({
   // to use in integrations or snippets
   const memoriTextEnteredHandler = useCallback(
     (e: MemoriTextEnteredEvent) => {
-      const { text, waitForPrevious, hidden, typingText, useLoaderTextAsMsg } =
-        e.detail;
+      const {
+        text,
+        waitForPrevious,
+        hidden,
+        typingText,
+        useLoaderTextAsMsg,
+        hasBatchQueued,
+      } = e.detail;
 
       if (text) {
         // wait to finish reading previous emission
@@ -2142,7 +2173,8 @@ const MemoriWidget = ({
             undefined,
             hidden,
             typingText,
-            useLoaderTextAsMsg
+            useLoaderTextAsMsg,
+            hasBatchQueued
           );
         }
       }
@@ -2185,7 +2217,10 @@ const MemoriWidget = ({
       );
       let birth = birthDate || storageBirthDate || undefined;
 
-      if (
+      if (!sessionID && !!minAge && !birth) {
+        setShowAgeVerification(true);
+        setClickedStart(false);
+      } else if (
         (!sessionID &&
           memori.privacyType !== 'PUBLIC' &&
           !memori.secretToken &&
@@ -2196,9 +2231,6 @@ const MemoriWidget = ({
         setAuthModalState('password');
         setClickedStart(false);
         return;
-      } else if (!sessionID && !!minAge && !birth) {
-        setShowAgeVerification(true);
-        setClickedStart(false);
       } else if (!sessionID) {
         setClickedStart(false);
         setGotErrorInOpening(false);
@@ -2617,6 +2649,8 @@ const MemoriWidget = ({
     ? ChatLayout
     : selectedLayout === 'FULLPAGE'
     ? FullPageLayout
+    : selectedLayout === 'WEBSITE_ASSISTANT'
+    ? WebsiteAssistantLayout
     : FullPageLayout;
 
   return (

package/src/components/layouts/WebsiteAssistant.test.tsx

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import Memori from '../MemoriWidget/MemoriWidget';
+import { integration, memori, tenant } from '../../mocks/data';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+it('renders WEBSITE_ASSISTANT layout unchanged', () => {
+  const { container } = render(
+    <Memori
+      showShare={true}
+      showSettings={true}
+      memori={memori}
+      tenant={tenant}
+      integration={integration}
+      layout="WEBSITE_ASSISTANT"
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/layouts/WebsiteAssistant.tsx

@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import Spin from '../ui/Spin';
+import { LayoutProps } from '../MemoriWidget/MemoriWidget';
+import Button from '../ui/Button';
+import Blob from '../Blob/Blob';
+import Close from '../icons/Close';
+import { useTranslation } from 'react-i18next';
+
+const WebsiteAssistantLayout: React.FC<LayoutProps> = ({
+  Header,
+  headerProps,
+  Avatar,
+  avatarProps,
+  Chat,
+  chatProps,
+  StartPanel,
+  startPanelProps,
+  integrationStyle,
+  ChangeMode,
+  changeModeProps,
+  sessionId,
+  hasUserActivatedSpeak,
+  showInstruct = false,
+  loading = false,
+  poweredBy,
+}) => {
+  const { t } = useTranslation();
+  const [collapsed, _setCollapsed] = useState(true);
+  const [expandedKey, setExpandedKey] = useState<string>();
+  const setCollapsed = (collapsed: boolean) => {
+    _setCollapsed(collapsed);
+    setExpandedKey(collapsed ? undefined : new Date().toISOString());
+  };
+
+  return (
+    <div
+      className={`memori-website_assistant--${
+        collapsed ? 'collapsed' : 'expanded'
+      }`}
+    >
+      {collapsed ? (
+        <div className="memori-website_assistant--trigger">
+          <Button
+            className="memori-website_assistant--trigger-button"
+            ghost
+            shape="circle"
+            onClick={() => setCollapsed(false)}
+            title={t('expand') || 'Expand'}
+          >
+            <Blob avatar={avatarProps?.memori.avatarURL} />
+          </Button>
+        </div>
+      ) : (
+        <>
+          {integrationStyle}
+
+          <Spin spinning={loading} className="memori-website_assistant-layout">
+            {poweredBy}
+
+            <div className="memori-website_assistant--close-button-wrapper">
+              <Button
+                className="memori-website_assistant--close-button"
+                primary
+                shape="circle"
+                onClick={() => setCollapsed(true)}
+                icon={<Close />}
+                title={t('close') || 'Close'}
+              />
+            </div>
+
+            {showInstruct && ChangeMode && changeModeProps && (
+              <ChangeMode {...changeModeProps} />
+            )}
+
+            <div className="memori-website_assistant-layout--header">
+              {Header && headerProps && (
+                <Header
+                  {...headerProps}
+                  showSettings={false}
+                  showReload={false}
+                />
+              )}
+            </div>
+
+            <div className="memori-website_assistant-layout--avatar">
+              {Avatar && avatarProps && (
+                <Avatar
+                  {...avatarProps}
+                  integrationConfig={
+                    avatarProps.integrationConfig
+                      ? {
+                          ...avatarProps.integrationConfig,
+                          avatarURL: avatarProps.integrationConfig?.avatarURL
+                            ? `${
+                                avatarProps.integrationConfig?.avatarURL.split(
+                                  '#'
+                                )[0]
+                              }#${expandedKey}`
+                            : undefined,
+                        }
+                      : {}
+                  }
+                  key={expandedKey}
+                />
+              )}
+            </div>
+
+            <div id="extension" />
+
+            <div className="memori-website_assistant-layout--controls">
+              {sessionId && hasUserActivatedSpeak && Chat && chatProps ? (
+                <Chat {...chatProps} />
+              ) : startPanelProps ? (
+                <StartPanel {...startPanelProps} />
+              ) : null}
+            </div>
+          </Spin>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default WebsiteAssistantLayout;

package/src/components/layouts/__snapshots__/WebsiteAssistant.test.tsx.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders WEBSITE_ASSISTANT layout unchanged 1`] = `
+<div>
+  <div
+    class="memori memori-widget memori-layout-website_assistant memori-controls-bottom memori--with-integration"
+    data-memori-engine-state="{}"
+    data-memori-id="66b4e161-2431-4b21-9b70-d8c27de730ca"
+    data-memori-integration="cb3c4776-7f0b-4f97-a773-c32a5d7a3bf1"
+    data-memori-name="Memori"
+    data-memori-secondary-id="25ced51c-3520-41af-8bbe-222d861b8e32"
+    style="height: 100vh;"
+  >
+    <div
+      class="memori-website_assistant--collapsed"
+    >
+      <div
+        class="memori-website_assistant--trigger"
+      >
+        <button
+          class="memori-button memori-button--ghost memori-button--circle memori-button--padded memori-website_assistant--trigger-button"
+          title="expand"
+        >
+          <div
+            class="memori-blob"
+          >
+            <figure>
+              <img
+                alt=""
+                role="presentation"
+                src="https://app.twincreator.com/images/twincreator/square_logo.png"
+              />
+            </figure>
+            <div
+              class="mainDiv"
+            />
+            <div
+              class="mainDiv"
+            />
+            <div
+              class="mainDiv"
+            />
+            <div
+              class="mainDiv"
+            />
+            <div
+              class="mainDiv"
+            />
+          </div>
+        </button>
+      </div>
+    </div>
+    <audio
+      id="memori-audio"
+      src="https://app.twincreator.com/intro.mp3"
+      style="display: none;"
+    />
+  </div>
+</div>
+`;

package/src/components/layouts/chat.css

@@ -84,11 +84,11 @@
 }
 
 @media (max-width: 480px) {
-    .memori-send-on-enter-menu {
+    .memori-chat-layout .memori-send-on-enter-menu {
         display: none;
     }
 
-    .memori-header--button-settings {
+    .memori-chat-layout .memori-header--button-settings {
         display: none;
     }
 }

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

@@ -312,3 +312,112 @@ Custom.args = {
   layout: 'FULLPAGE',
   customLayout: CustomLayout,
 };
+
+export const WebsiteAssistant = Template.bind({});
+WebsiteAssistant.args = {
+  uiLang: 'it',
+  showShare: true,
+  showSettings: true,
+  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(),
+    }),
+  },
+  tenant,
+  layout: 'WEBSITE_ASSISTANT',
+};

package/src/components/layouts/totem.css

@@ -124,11 +124,11 @@
 }
 
 @media (max-width: 480px) {
-    .memori-send-on-enter-menu {
+    .memori-totem-layou .memori-send-on-enter-menu {
         display: none;
     }
 
-    .memori-header--button-settings {
+    .memori-totem-layou .memori-header--button-settings {
         display: none;
     }
 }