@memori.ai/memori-react 1.2.0 → 2.0.0

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -13,7 +13,7 @@ import {
   GamificationLevel,
   Tenant,
   Asset,
-} from '@memori.ai/memori-api-client/dist/types';
+} from '@memori.ai/memori-api-client/src/types';
 import {
   SpeakerAudioDestination,
   SpeechConfig,
@@ -52,7 +52,8 @@ import AttachmentLinkModal from '../AttachmentLinkModal/AttachmentLinkModal';
 import PoweredBy from '../PoweredBy/PoweredBy';
 
 // Layout
-import DefaultLayout from '../layouts/Default';
+import FullPageLayout from '../layouts/FullPage';
+import TotemLayout from '../layouts/Totem';
 
 // Helpers / Utils
 import { getTranslation } from '../../helpers/translations';
@@ -61,6 +62,8 @@ import { hasTouchscreen, stripDuplicates } from '../../helpers/utils';
 import { anonTag } from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
 import { getGamificationLevel } from '../../helpers/statistics';
+import AgeVerificationModal from '../AgeVerificationModal/AgeVerificationModal';
+import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 
 // Widget utilities and helpers
 const getMemoriState = (integrationId?: string): object | null => {
@@ -136,7 +139,6 @@ window.getMemoriState = getMemoriState;
 window.typeMessage = typeMessage;
 
 // Global variables
-const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
 let recognizer: SpeechRecognizer | null;
 let speechConfig: SpeechConfig;
 let speechSynthesizer: SpeechSynthesizer | null;
@@ -148,6 +150,7 @@ export interface Props {
   memoriConfigs?: MemoriConfig[];
   memoriLang?: string;
   integration?: Integration;
+  layout?: 'DEFAULT' | 'FULLPAGE' | 'TOTEM';
   showShare?: boolean;
   showInstruct?: boolean;
   showInputs?: boolean;
@@ -180,6 +183,7 @@ const MemoriWidget = ({
   memoriConfigs,
   memoriLang,
   integration,
+  layout = 'DEFAULT',
   showInstruct = false,
   showShare = true,
   preview = false,
@@ -187,7 +191,7 @@ const MemoriWidget = ({
   showInputs = true,
   showDates = false,
   showContextPerLine = false,
-  showSettings = false,
+  showSettings = true,
   height = '100vh',
   secret,
   baseUrl = 'https://app.twincreator.com',
@@ -220,7 +224,6 @@ const MemoriWidget = ({
     getSession,
     getContentQualityIndexes,
   } = client;
-  const { uploadAsset, getUploadAssetURL, deleteAsset } = client.backend;
 
   const [instruct, setInstruct] = useState(false);
 
@@ -247,6 +250,8 @@ const MemoriWidget = ({
   const [loading, setLoading] = useState(false);
   const [memoriTyping, setMemoriTyping] = useState(false);
 
+  const selectedLayout = layout || integrationConfig?.layout || 'DEFAULT';
+
   const [hasUserActivatedSpeak, setHasUserActivatedSpeak] = useState(false);
   const [hasUserActivatedListening, setHasUserActivatedListening] =
     useState(false);
@@ -254,8 +259,11 @@ const MemoriWidget = ({
   const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
   const [muteSpeaker, setMuteSpeaker] = useState(false);
   const [continuousSpeech, setContinuousSpeech] = useState(true);
-  const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(3);
+  const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2);
   const [isPlayingAudio, setIsPlayingAudio] = useState(false);
+  const [controlsPosition, setControlsPosition] = useState<'center' | 'bottom'>(
+    'center'
+  );
   useEffect(() => {
     setIsPlayingAudio(!!speechSynthesizer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -264,7 +272,8 @@ const MemoriWidget = ({
   useEffect(() => {
     setMuteSpeaker(getLocalConfig('muteSpeaker', false));
     setContinuousSpeech(getLocalConfig('continuousSpeech', true));
-    setContinuousSpeechTimeout(getLocalConfig('continuousSpeechTimeout', 3));
+    setContinuousSpeechTimeout(getLocalConfig('continuousSpeechTimeout', 2));
+    setControlsPosition(getLocalConfig('controlsPosition', 'center'));
   }, []);
 
   /**
@@ -541,6 +550,19 @@ const MemoriWidget = ({
     return translatedState;
   };
 
+  /**
+   * Age verification
+   */
+  const minAge = memori.ageRestriction
+    ? memori.ageRestriction
+    : memori.nsfw
+    ? 18
+    : memori.enableCompletions
+    ? 14
+    : 0;
+  const [birthDate, setBirthDate] = useState<string | undefined>();
+  const [showAgeVerification, setShowAgeVerification] = useState(false);
+
   /**
    * Sessione
    */
@@ -570,6 +592,15 @@ const MemoriWidget = ({
       return;
     }
 
+    let storageBirthDate = getLocalConfig<string | undefined>(
+      'birthDate',
+      undefined
+    );
+    if (!(birthDate || storageBirthDate) && !!minAge) {
+      setShowAgeVerification(true);
+      return;
+    }
+
     setLoading(true);
     try {
       if (!memori.giverTag && !!memori.receivedInvitations?.length) {
@@ -598,6 +629,12 @@ const MemoriWidget = ({
           dialogState: session.currentState,
           sessionID: session.sessionID,
         } as { dialogState: DialogState; sessionID: string };
+      } else if (
+        session?.resultMessage.startsWith('This Memori is aged restricted')
+      ) {
+        console.error(session);
+        message.error(t('underageTwinSession', { age: minAge }));
+        setGotErrorInOpening(true);
       } else {
         console.error(session);
         message.error(t(getErrori18nKey(session?.resultCode)));
@@ -615,10 +652,16 @@ const MemoriWidget = ({
     tag?: string,
     pin?: string,
     initialContextVars?: { [key: string]: string },
-    initialQuestion?: string
+    initialQuestion?: string,
+    birthDate?: string
   ) => {
     setLoading(true);
     try {
+      let storageBirthDate = getLocalConfig<string | undefined>(
+        'birthDate',
+        undefined
+      );
+
       const { sessionID, currentState, ...response } = await initSession({
         memoriID: memori.engineMemoriID ?? '',
         password,
@@ -627,6 +670,7 @@ const MemoriWidget = ({
         pin,
         initialContextVars,
         initialQuestion,
+        birthDate: birthDate || storageBirthDate || undefined,
       });
 
       if (sessionID && currentState && response.resultCode === 0) {
@@ -658,6 +702,12 @@ const MemoriWidget = ({
           dialogState: currentState,
           sessionID,
         };
+      } else if (
+        response?.resultMessage.startsWith('This Memori is aged restricted')
+      ) {
+        console.error(response);
+        message.error(t('underageTwinSession', { age: minAge }));
+        setGotErrorInOpening(true);
       } else {
         console.error(response);
         message.error(t(getErrori18nKey(response.resultCode)));
@@ -714,6 +764,11 @@ const MemoriWidget = ({
           }
         } else if ([400, 401, 403, 404, 500].includes(resultCode)) {
           console.warn('[APPCONTEXT/CHANGETAG]', resultCode);
+          let storageBirthDate = getLocalConfig<string | undefined>(
+            'birthDate',
+            undefined
+          );
+
           fetchSession({
             memoriID: memori.engineMemoriID ?? '',
             password: secret || memori.secretToken,
@@ -721,6 +776,7 @@ const MemoriWidget = ({
             pin: memori.giverPIN,
             initialContextVars,
             initialQuestion,
+            birthDate: birthDate || storageBirthDate || undefined,
           });
         } else if (!!currentState) {
           return {
@@ -1085,6 +1141,8 @@ const MemoriWidget = ({
 
   const speak = (text: string): void => {
     if (!AZURE_COGNITIVE_SERVICES_TTS_KEY) return;
+    stopListening();
+    // stopAudio();
 
     if (preview) return;
     if (muteSpeaker) {
@@ -1095,10 +1153,6 @@ const MemoriWidget = ({
       return;
     }
 
-    if (listening) {
-      stopListening();
-    }
-
     if (audioDestination) audioDestination.pause();
 
     // if (audioContext?.state === 'running') {
@@ -1180,12 +1234,10 @@ const MemoriWidget = ({
     audioDestination.onAudioEnd = () => {
       setIsPlayingAudio(false);
       source.disconnect();
-      // stopAudio();
 
-      if (continuousSpeech) {
-        // trigger start continuous listening if set
-        document.dispatchEvent(new Event('endSpeakStartListen'));
-      }
+      // trigger start continuous listening if set
+      // document.dispatchEvent(new Event('endSpeakStartListen'));
+      onEndSpeakStartListen();
     };
 
     setIsPlayingAudio(true);
@@ -1361,6 +1413,7 @@ const MemoriWidget = ({
 
           setListening(true);
           recognizer.recognized = (_s, e) => {
+            if (!e.result.text) return;
             if (e.result.reason === speechSdk.ResultReason.RecognizedSpeech) {
               let transcript = e.result.text;
               setTranscript(transcript || '');
@@ -1430,7 +1483,7 @@ const MemoriWidget = ({
    */
   const [requestedListening, setRequestedListening] = useState(false);
   const onEndSpeakStartListen = useCallback(
-    (_e: Event) => {
+    (_e?: Event) => {
       if (isPlayingAudio && speechSynthesizer) {
         speechSynthesizer.close();
         speechSynthesizer = null;
@@ -1447,7 +1500,12 @@ const MemoriWidget = ({
     [continuousSpeech, hasUserActivatedListening]
   );
   useEffect(() => {
-    if (!isPlayingAudio && continuousSpeech && hasUserActivatedListening)
+    if (
+      history.length > 1 &&
+      !isPlayingAudio &&
+      continuousSpeech &&
+      (hasUserActivatedListening || !requestedListening)
+    )
       startListening();
     else if (isPlayingAudio && listening) {
       stopListening();
@@ -1561,7 +1619,12 @@ const MemoriWidget = ({
   // eslint-disable-next-line
   const [avatar3dVisible, setAvatar3dVisible] = useState(false);
   useEffect(() => {
-    if (window.innerWidth >= 768) setAvatar3dVisible(true);
+    if (
+      (window.innerWidth >= 768 && selectedLayout === 'FULLPAGE') ||
+      selectedLayout !== 'FULLPAGE'
+    ) {
+      setAvatar3dVisible(true);
+    }
   }, []);
 
   const [gamificationLevel, setGamificationLevel] =
@@ -1694,6 +1757,7 @@ const MemoriWidget = ({
 
   const simulateUserPrompt = (text: string, translatedText?: string) => {
     stopListening();
+    stopAudio();
     sendMessage(text, undefined, undefined, false, translatedText);
   };
 
@@ -1718,6 +1782,12 @@ const MemoriWidget = ({
       });
     }
 
+    let storageBirthDate = getLocalConfig<string | undefined>(
+      'birthDate',
+      undefined
+    );
+    let birth = birthDate || storageBirthDate || undefined;
+
     if (
       (!sessionID &&
         memori.privacyType !== 'PUBLIC' &&
@@ -1729,6 +1799,9 @@ const MemoriWidget = ({
       setAuthModalState('password');
       setClickedStart(false);
       return;
+    } else if (!sessionID && !!minAge && !birth) {
+      setShowAgeVerification(true);
+      setClickedStart(false);
     } else if (!sessionID) {
       setClickedStart(false);
       setGotErrorInOpening(false);
@@ -1739,6 +1812,7 @@ const MemoriWidget = ({
         pin: personification?.pin,
         initialContextVars,
         initialQuestion,
+        birthDate: birth,
       });
 
       if (session?.dialogState) {
@@ -1819,7 +1893,8 @@ const MemoriWidget = ({
             memori?.giverTag,
             memori?.giverPIN,
             initialContextVars,
-            initialQuestion
+            initialQuestion,
+            birth
           ).then(() => {
             setHasUserActivatedSpeak(true);
           });
@@ -1865,7 +1940,8 @@ const MemoriWidget = ({
             personification.tag,
             personification.pin,
             initialContextVars,
-            initialQuestion
+            initialQuestion,
+            birth
           ).then(() => {
             setHasUserActivatedSpeak(true);
           });
@@ -1911,7 +1987,8 @@ const MemoriWidget = ({
             undefined,
             undefined,
             initialContextVars,
-            initialQuestion
+            initialQuestion,
+            birth
           ).then(() => {
             setHasUserActivatedSpeak(true);
           });
@@ -2009,6 +2086,7 @@ const MemoriWidget = ({
       }}
       showSettings={showSettings}
       hasUserActivatedSpeak={hasUserActivatedSpeak}
+      showReload={selectedLayout === 'TOTEM'}
     />
   );
 
@@ -2069,7 +2147,7 @@ const MemoriWidget = ({
       baseUrl={baseUrl}
       apiUrl={apiUrl}
       memoriTyping={memoriTyping}
-      history={history}
+      history={layout === 'TOTEM' ? history.slice(-2) : history}
       authToken={loginToken}
       dialogState={currentDialogState}
       setDialogState={setCurrentDialogState}
@@ -2091,6 +2169,7 @@ const MemoriWidget = ({
       userMessage={userMessage}
       onChangeUserMessage={onChangeUserMessage}
       sendMessage={(msg: string) => {
+        stopAudio();
         stopListening();
         sendMessage(msg);
         setUserMessage('');
@@ -2113,7 +2192,9 @@ const MemoriWidget = ({
           style={{ backgroundImage: globalBackgroundUrl }}
         />
       </div>
-    ) : null;
+    ) : (
+      <div className="memori--global-background no-background-image" />
+    );
 
   const integrationStyle = integration ? (
     <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
@@ -2134,14 +2215,27 @@ const MemoriWidget = ({
 
   const poweredBy = <PoweredBy tenant={tenant} userLang={userLang} />;
 
+  const Layout =
+    selectedLayout === 'TOTEM'
+      ? TotemLayout
+      : selectedLayout === 'FULLPAGE'
+      ? FullPageLayout
+      : FullPageLayout;
+
   return (
     <div
-      className={cx('memori', 'memori-widget', {
-        'memori--preview': preview,
-        'memori--embed': embed,
-        'memori--with-integration': integration,
-        'memori--active': hasUserActivatedSpeak,
-      })}
+      className={cx(
+        'memori',
+        'memori-widget',
+        `memori-layout-${layout.toLowerCase()}`,
+        `memori-controls-${controlsPosition.toLowerCase()}`,
+        {
+          'memori--preview': preview,
+          'memori--embed': embed,
+          'memori--with-integration': integration,
+          'memori--active': hasUserActivatedSpeak,
+        }
+      )}
       data-memori-name={memori?.name}
       data-memori-id={memori?.engineMemoriID}
       data-memori-secondary-id={memori?.memoriID}
@@ -2153,7 +2247,7 @@ const MemoriWidget = ({
       })}
       style={{ height }}
     >
-      <DefaultLayout
+      <Layout
         header={header}
         avatar={avatar}
         chat={chat}
@@ -2192,7 +2286,8 @@ const MemoriWidget = ({
               instruct ? memori.giverTag : undefined,
               instruct ? memori.giverPIN : undefined,
               initialContextVars,
-              initialQuestion
+              initialQuestion,
+              birthDate
             )
               .then(state => {
                 setAuthModalState(null);
@@ -2209,6 +2304,56 @@ const MemoriWidget = ({
         />
       )}
 
+      {isClient && (
+        <AgeVerificationModal
+          visible={showAgeVerification}
+          minAge={minAge}
+          onClose={birthDate => {
+            if (birthDate) {
+              setBirthDate(birthDate);
+
+              setLocalConfig('birthDate', birthDate);
+
+              reopenSession(
+                !sessionId,
+                memori?.secretToken,
+                undefined,
+                instruct ? memori.giverTag : undefined,
+                instruct ? memori.giverPIN : undefined,
+                initialContextVars,
+                initialQuestion,
+                birthDate
+              )
+                .then(state => {
+                  setShowAgeVerification(false);
+                  onClickStart(state || undefined);
+                })
+                .catch(() => {
+                  setShowAgeVerification(false);
+                  setGotErrorInOpening(true);
+                });
+            } else {
+              setShowAgeVerification(false);
+              setClickedStart(false);
+            }
+          }}
+        />
+      )}
+
+      {showSettingsDrawer && (
+        <SettingsDrawer
+          layout={selectedLayout}
+          open={!!showSettingsDrawer}
+          onClose={() => setShowSettingsDrawer(false)}
+          continuousSpeech={continuousSpeech}
+          continuousSpeechTimeout={continuousSpeechTimeout}
+          setContinuousSpeech={setContinuousSpeech}
+          setContinuousSpeechTimeout={setContinuousSpeechTimeout}
+          controlsPosition={controlsPosition}
+          setControlsPosition={setControlsPosition}
+        />
+      )}
+
       {sessionId && (
         <AttachmentLinkModal
           apiURL={apiUrl}

package/src/components/SettingsDrawer/SettingsDrawer.css

@@ -0,0 +1,5 @@
+.memori-settings-drawer .memori-settings-drawer--field {
+    display: flex;
+    flex-direction: column;
+    margin: 0.5rem 0 1.5rem;
+}

package/src/components/SettingsDrawer/SettingsDrawer.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import SettingsDrawer, { Props } from './SettingsDrawer';
+import './SettingsDrawer.css';
+
+const meta: Meta = {
+  title: 'Widget/SettingsDrawer',
+  component: SettingsDrawer,
+  argTypes: {
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => {
+  const [controlsPosition, setControlsPosition] = React.useState<
+    'bottom' | 'center'
+  >('bottom');
+  return (
+    <SettingsDrawer
+      {...args}
+      controlsPosition={controlsPosition}
+      setControlsPosition={setControlsPosition}
+    />
+  );
+};
+
+// 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 = {
+  open: true,
+  onClose: () => {},
+  continuousSpeech: false,
+  continuousSpeechTimeout: 2,
+  setContinuousSpeech: () => {},
+  setContinuousSpeechTimeout: () => {},
+};
+
+export const WithinTotemLayout = Template.bind({});
+WithinTotemLayout.args = {
+  layout: 'TOTEM',
+  open: true,
+  onClose: () => {},
+  continuousSpeech: false,
+  continuousSpeechTimeout: 2,
+  setContinuousSpeech: () => {},
+  setContinuousSpeechTimeout: () => {},
+};

package/src/components/SettingsDrawer/SettingsDrawer.test.tsx

@@ -0,0 +1,61 @@
+import { render } from '@testing-library/react';
+import SettingsDrawer from './SettingsDrawer';
+
+beforeEach(() => {
+  // @ts-ignore
+  window.IntersectionObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+  }));
+});
+
+it('renders SettingsDrawer unchanged', () => {
+  const { container } = render(
+    <SettingsDrawer
+      open={false}
+      onClose={jest.fn()}
+      continuousSpeech={false}
+      continuousSpeechTimeout={2}
+      setContinuousSpeech={jest.fn()}
+      setContinuousSpeechTimeout={jest.fn()}
+      controlsPosition="bottom"
+      setControlsPosition={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders SettingsDrawer open unchanged', () => {
+  const { container } = render(
+    <SettingsDrawer
+      open={true}
+      onClose={jest.fn()}
+      continuousSpeech={false}
+      continuousSpeechTimeout={2}
+      setContinuousSpeech={jest.fn()}
+      setContinuousSpeechTimeout={jest.fn()}
+      controlsPosition="bottom"
+      setControlsPosition={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders SettingsDrawer for totem layout open unchanged', () => {
+  const { container } = render(
+    <SettingsDrawer
+      layout="TOTEM"
+      open={true}
+      onClose={jest.fn()}
+      continuousSpeech={false}
+      continuousSpeechTimeout={2}
+      setContinuousSpeech={jest.fn()}
+      setContinuousSpeechTimeout={jest.fn()}
+      controlsPosition="bottom"
+      setControlsPosition={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});