@memori.ai/memori-react 5.1.0 → 6.0.0-rc.0

package/src/components/StartPanel/StartPanel.stories.tsx

@@ -86,7 +86,7 @@ const Template: Story<Props> = args => (
       {args.integrationConfig && (
         <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
       )}
-      <StartPanel {...args} />
+      <StartPanel {...args} setShowLoginDrawer={() => {}} />
     </div>
   </I18nWrapper>
 );
@@ -228,6 +228,8 @@ WithDeepThoughtEnabledUnlogged.args = {
   clickedStart: false,
   onClickStart: () => {},
   isUserLoggedIn: false,
+  showLogin: true,
+  setShowLoginDrawer: () => {},
 };
 
 export const WithDeepThoughtEnabledWithoutPermissionFlag = Template.bind({});

package/src/components/StartPanel/StartPanel.test.tsx

@@ -16,6 +16,7 @@ it('renders StartPanel unchanged', () => {
       sessionId={sessionID}
       clickedStart={false}
       onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -39,6 +40,7 @@ it('renders StartPanel with gamification level unchanged', () => {
       sessionId={sessionID}
       clickedStart={false}
       onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -60,6 +62,7 @@ it('renders StartPanel with completions enabled unchanged', () => {
       sessionId={sessionID}
       clickedStart={false}
       onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -81,6 +84,7 @@ it('renders StartPanel for board of experts unchanged', () => {
       sessionId={sessionID}
       clickedStart={false}
       onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -107,6 +111,7 @@ it('renders StartPanel with deep thought enabled unchanged', () => {
         ...user,
         pAndCUAccepted: true,
       }}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -128,6 +133,8 @@ it('renders StartPanel with deep thought but unlogged unchanged', () => {
       sessionId={sessionID}
       clickedStart={false}
       onClickStart={() => {}}
+      showLogin
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -154,6 +161,7 @@ it('renders StartPanel with deep thought enabled but without permission flag unc
         ...user,
         pAndCUAccepted: false,
       }}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -177,6 +185,7 @@ it('renders StartPanel on instruct unchanged', () => {
       sessionId={sessionID}
       clickedStart={false}
       onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -203,6 +212,7 @@ it('renders StartPanel with position required unchanged', () => {
       sessionId={sessionID}
       clickedStart={false}
       onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -222,6 +232,7 @@ it('renders StartPanel with integrationConfig unchanged', () => {
       sessionId={sessionID}
       clickedStart={false}
       onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
     />
   );
   expect(container).toMatchSnapshot();
@@ -243,6 +254,7 @@ it('renders StartPanel with completion provider down unchanged', () => {
       sessionId={sessionID}
       clickedStart={false}
       onClickStart={() => {}}
+      setShowLoginDrawer={jest.fn()}
       _TEST_forceProviderStatus="major"
     />
   );

package/src/components/StartPanel/StartPanel.tsx

@@ -39,6 +39,8 @@ export interface Props {
   _TEST_forceProviderStatus?: string;
   isUserLoggedIn?: boolean;
   user?: User;
+  showLogin?: boolean;
+  setShowLoginDrawer: (show: boolean) => void;
 }
 
 const StartPanel: React.FC<Props> = ({
@@ -60,6 +62,8 @@ const StartPanel: React.FC<Props> = ({
   _TEST_forceProviderStatus,
   isUserLoggedIn = false,
   user,
+  showLogin = false,
+  setShowLoginDrawer,
 }) => {
   const { t, i18n } = useTranslation();
   const [translatedDescription, setTranslatedDescription] = useState(
@@ -310,6 +314,13 @@ const StartPanel: React.FC<Props> = ({
               {!isUserLoggedIn && (
                 <p>{t('deepThoughtPreDisclaimerUnlogged')}</p>
               )}
+              {!isUserLoggedIn && showLogin && (
+                <p>
+                  <Button outlined onClick={() => setShowLoginDrawer(true)}>
+                    Login
+                  </Button>
+                </p>
+              )}
               <p>{t('deepThoughtDisclaimer')}</p>
             </div>
           )}

package/src/components/StartPanel/__snapshots__/StartPanel.test.tsx.snap

@@ -705,6 +705,13 @@ exports[`renders StartPanel with deep thought but unlogged unchanged 1`] = `
         <p>
           deepThoughtPreDisclaimerUnlogged
         </p>
+        <p>
+          <button
+            class="memori-button memori-button--outlined memori-button--rounded memori-button--padded"
+          >
+            Login
+          </button>
+        </p>
         <p>
           deepThoughtDisclaimer
         </p>

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

@@ -142,6 +142,26 @@ exports[`renders Chat layout unchanged 1`] = `
               </div>
             </button>
           </div>
+          <button
+            class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+            title="login.login"
+          >
+            <span
+              class="memori-button--icon"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+                viewBox="0 0 1024 1024"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                />
+              </svg>
+            </span>
+          </button>
         </div>
       </div>
       <div

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

@@ -120,6 +120,26 @@ exports[`renders FullPage layout unchanged 1`] = `
             </div>
           </button>
         </div>
+        <button
+          class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+          title="login.login"
+        >
+          <span
+            class="memori-button--icon"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+              viewBox="0 0 1024 1024"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              />
+            </svg>
+          </span>
+        </button>
       </div>
       <div
         class="memori--grid"

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

@@ -173,6 +173,26 @@ exports[`renders Totem layout unchanged 1`] = `
               </div>
             </button>
           </div>
+          <button
+            class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button-login"
+            title="login.login"
+          >
+            <span
+              class="memori-button--icon"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+                viewBox="0 0 1024 1024"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                />
+              </svg>
+            </span>
+          </button>
         </div>
       </div>
       <div

package/src/index.stories.tsx

@@ -80,7 +80,6 @@ Staging.args = {
   uiLang: 'EN',
   lang: 'IT',
   layout: 'FULLPAGE',
-  authToken: '00000000-0000-0000-0000-000000000000',
 };
 
 const TemplateWithBatchButton: Story<Props> = args => (

package/src/index.tsx

@@ -35,6 +35,7 @@ export interface Props {
   showClear?: boolean;
   showOnlyLastMessages?: boolean;
   showTypingText?: boolean;
+  showLogin?: boolean;
   height?: number | string;
   baseURL?: string;
   apiURL?: string;
@@ -92,6 +93,7 @@ const Memori: React.FC<Props> = ({
   showInputs = true,
   showDates = false,
   showContextPerLine = false,
+  showLogin = true,
   height = '100%',
   baseURL,
   apiURL = 'https://backend.memori.ai',
@@ -233,6 +235,7 @@ const Memori: React.FC<Props> = ({
       showInputs={showInputs}
       showDates={showDates}
       showContextPerLine={showContextPerLine}
+      showLogin={showLogin}
       integration={memori?.integrations?.find(i =>
         integrationID
           ? i.integrationID === integrationID
@@ -306,6 +309,7 @@ Memori.propTypes = {
   showClear: PropTypes.bool,
   showOnlyLastMessages: PropTypes.bool,
   showTypingText: PropTypes.bool,
+  showLogin: PropTypes.bool,
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   baseURL: PropTypes.string,
   apiURL: PropTypes.string,

package/src/locales/en.json

@@ -153,6 +153,31 @@
     "congratulationsNewLevelDescription": "Your Memori became more evolved with {{points}} points, look at the",
     "statistics": "statistics"
   },
+  "login": {
+    "login": "Login",
+    "logout": "Logout",
+    "user": "User",
+    "loggedDrawerTitle": "Hi, {{name}}!",
+    "loginDrawerTitle": "Login",
+    "newUserSignUp": "New user?",
+    "signUp": "Sign up!",
+    "userNameOrEmail": "Username or email",
+    "underage": "You must be at least {{age}} years old to sign up.",
+    "optional": "Optional",
+    "birthDate": "Birth date",
+    "birthDateHelper": "We ask for your birth date only to enable or disable functionalities that have age restrictions",
+    "missingData": "Missing informations",
+    "missingDataHelper": "We know that this is a bit annoying, but we need some more informations to complete your registration.",
+    "goToAccountToChangeYourPreferences": "You can change your choice at any time from your Account page.",
+    "deepThoughtExplaination": "Deep Thought is an advanced feature of the AI that will allow you to fully exploit your conversations by keeping track of them. The AI with Deep Thought can give you information tailored to you and the things you will share together. Allow the twin's author to contact you for commercial offers regarding products you have shown interest in.",
+    "tnCAndPPAcceptedHelper": "Since your last login, T&C and Privacy Policy have changed. Please accept them, otherwise you won't be able to make changes to your Twins. You can always delete your account in your user profile page.",
+    "privacyLabel": "I have read and accepted the",
+    "privacyAndCookiePolicy": "Privacy e Cookie Policy",
+    "and": "and",
+    "termsOfService": "Terms of Service",
+    "pAndCUAccepted": "I accept the terms of service about Deep Thought",
+    "save": "Save"
+  },
   "success": "Success",
   "Error": "Error",
   "internal server error": "Oupsie, sorry... Something went wrong on the server",

package/src/locales/it.json

@@ -153,6 +153,31 @@
     "congratulationsNewLevelDescription": "Il tuo Memori è diventato più evoluto con {{points}} punti, guarda le",
     "statistics": "statistiche"
   },
+  "login": {
+    "login": "Accedi",
+    "logout": "Esci",
+    "user": "Utente",
+    "loggedDrawerTitle": "Ciao, {{name}}!",
+    "loginDrawerTitle": "Accedi",
+    "newUserSignUp": "Sei un nuovo utente?",
+    "signUp": "Registrati!",
+    "userNameOrEmail": "Nome utente o email",
+    "underage": "Devi avere almeno {{age}} anni per registrarti.",
+    "optional": "opzionale",
+    "birthDate": "Data di nascita",
+    "birthDateHelper": "Ti chiediamo la data di nascita esclusivamente per abilitare o disabilitare le funzionalità che hanno restrizioni in base all'età",
+    "missingData": "Informazioni mancanti",
+    "missingDataHelper": "Sappiamo che questo è un po' fastidioso, ma abbiamo bisogno di alcune informazioni in più per completare la tua registrazione.",
+    "goToAccountToChangeYourPreferences": "Puoi cambiare la tua scelta in qualsiasi momento dalla tua pagina Account.",
+    "deepThoughtExplaination": "Pensiero Profondo è una funzionalità avanzata delle AI che ti consentirà di poter sfruttare a pieno le tue conversazioni mantenendo memoria delle stesse. Le AI con Pensiero Profondo possono darti informazioni adattandosi a te e alle cose che condividerete insieme. Consenti all'autore del twin di contattarti per offerte commerciali riguardanti prodotti su cui hai espresso interesse.",
+    "tnCAndPPAcceptedHelper": "Dall'ultimo accesso, i T&C e l'Informativa sulla privacy sono stati modificati. Si prega di accettarle, altrimenti non sarà possibile apportare modifiche ai propri gemelli. Puoi sempre cancellare il tuo account nella pagina del tuo profilo utente.",
+    "privacyLabel": "Ho letto e accettato l'",
+    "privacyAndCookiePolicy": "informativa sui cookie e sulla privacy",
+    "and": "e",
+    "termsOfService": "i termini del servizio",
+    "pAndCUAccepted": "Accetto le condizioni di utilizzo relative a Pensiero Profondo",
+    "save": "Salva"
+  },
   "success": "Operazione andata a buon fine",
   "Error": "Errore",
   "internal server error": "Ops, scusa... qualcosa è andato storto nel server",

package/src/mocks/data.ts

@@ -22,7 +22,7 @@ export const tenant: Tenant = {
   creationTimestamp: '2023-05-31T14:32:48.885287Z',
   description: 'AIsuru',
   disableRegistration: false,
-  id: 'aisuru.com',
+  id: 'www.aisuru.com',
   lastChangeTimestamp: '2023-05-31T14:32:48.885287Z',
   logoURL: 'https://aisuru.com/images/twincreator/logo.png',
   maxAdmins: 0,
@@ -35,7 +35,7 @@ export const tenant: Tenant = {
   maxTotalMemori: 0,
   maxUsers: 0,
   memoriCount: 0,
-  name: 'aisuru.com',
+  name: 'www.aisuru.com',
   nonFreeSessionCost: 0.02,
   paying: true,
   tenantID: '96caa4b4-31a4-48e5-8163-dec61869a2a7',

package/src/styles.css

@@ -39,6 +39,7 @@
 @import url('./components/DateSelector/DateSelector.css');
 @import url('./components/AgeVerificationModal/AgeVerificationModal.css');
 @import url('./components/KnownFacts/KnownFacts.css');
+@import url('./components/LoginDrawer/LoginDrawer.css');
 @import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=exo-2:200,400,700');