@memori.ai/memori-react 1.2.0 → 2.0.0

package/src/components/ui/__snapshots__/Select.test.tsx.snap

@@ -0,0 +1,278 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders Select disabled unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <input
+      hidden=""
+      name="day"
+      readonly=""
+      style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+      type="hidden"
+      value="2"
+    />
+    <label
+      class="memori-select--label"
+      data-headlessui-state="disabled"
+      id="headlessui-listbox-label-:r8:"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-haspopup="true"
+      aria-label="Select me"
+      aria-labelledby="headlessui-listbox-label-:r8: headlessui-listbox-button-:r9:"
+      class="memori-select--button"
+      data-headlessui-state="disabled"
+      disabled=""
+      id="headlessui-listbox-button-:r9:"
+      type="button"
+    >
+      <span
+        class="memori-select--value"
+      >
+        2
+      </span>
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Select unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <label
+      class="memori-select--label"
+      data-headlessui-state=""
+      id="headlessui-listbox-label-:r0:"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Select me"
+      aria-labelledby="headlessui-listbox-label-:r0: headlessui-listbox-button-:r1:"
+      class="memori-select--button"
+      data-headlessui-state=""
+      id="headlessui-listbox-button-:r1:"
+      type="button"
+    >
+      <span
+        class="memori-select--value memori-select--value-placeholder"
+      />
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Select with custom value display unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <input
+      hidden=""
+      name="day"
+      readonly=""
+      style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+      type="hidden"
+      value="2"
+    />
+    <label
+      class="memori-select--label"
+      data-headlessui-state=""
+      id="headlessui-listbox-label-:r6:"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Select me"
+      aria-labelledby="headlessui-listbox-label-:r6: headlessui-listbox-button-:r7:"
+      class="memori-select--button"
+      data-headlessui-state=""
+      id="headlessui-listbox-button-:r7:"
+      type="button"
+    >
+      <span
+        class="memori-select--value"
+      >
+        Two
+      </span>
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Select with placeholder unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <label
+      class="memori-select--label"
+      data-headlessui-state=""
+      id="headlessui-listbox-label-:r2:"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Select me"
+      aria-labelledby="headlessui-listbox-label-:r2: headlessui-listbox-button-:r3:"
+      class="memori-select--button"
+      data-headlessui-state=""
+      id="headlessui-listbox-button-:r3:"
+      type="button"
+    >
+      <span
+        class="memori-select--value memori-select--value-placeholder"
+      >
+        Select me
+      </span>
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders Select with value unchanged 1`] = `
+<div>
+  <div
+    class="memori-select"
+  >
+    <input
+      hidden=""
+      name="day"
+      readonly=""
+      style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+      type="hidden"
+      value="2"
+    />
+    <label
+      class="memori-select--label"
+      data-headlessui-state=""
+      id="headlessui-listbox-label-:r4:"
+    >
+      Select me
+      :
+    </label>
+    <button
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label="Select me"
+      aria-labelledby="headlessui-listbox-label-:r4: headlessui-listbox-button-:r5:"
+      class="memori-select--button"
+      data-headlessui-state=""
+      id="headlessui-listbox-button-:r5:"
+      type="button"
+    >
+      <span
+        class="memori-select--value"
+      >
+        2
+      </span>
+      <span
+        class="memori-select--icon"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          focusable="false"
+          role="img"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>
+</div>
+`;

package/src/helpers/configuration.ts

@@ -3,6 +3,8 @@ export const keys: { [key: string]: string } = {
   continuousSpeech: '@memori:continuousSpeech',
   continuousSpeechTimeout: '@memori:continuousSpeechTimeout',
   sendOnEnter: '@memori:sendOnEnter',
+  birthDate: '@memori:birthDate',
+  controlsPosition: '@memori:controlsPosition',
 };
 
 export const getLocalConfig = <Type>(key: string, defaultValue: Type): Type => {
@@ -10,9 +12,9 @@ export const getLocalConfig = <Type>(key: string, defaultValue: Type): Type => {
   if (!value) return defaultValue;
 
   try {
-    return (JSON.parse(value) as unknown) as Type;
+    return JSON.parse(value) as unknown as Type;
   } catch {
-    return (value as unknown) as Type;
+    return value as unknown as Type;
   }
 };
 

package/src/helpers/utils.ts

@@ -61,8 +61,9 @@ export const isAndroid = (): boolean => {
   return isAndroid;
 };
 
-export const pwdRegEx = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$_:;|,~+={}[]%^&*-]).{8,}$/;
-export const mailRegEx = /^\w+([.-]?[+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/;
+export const pwdRegEx =
+  /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$_:;|,~+={}[]%^&*-]).{8,}$/;
+export const mailRegEx = /^\w+([.-]?[+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,4})+$/;
 export const usernameRegEx = /^(?!.*\.\.)(?!.*\.$)[^\W][\w.+-]{3,32}$/;
 export const validURLRegEx = /^(ftp|http|https):\/\/[^ "]+$/;
 

package/src/index.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react';
 import Memori, { Props } from './index';
 
 const meta: Meta = {
-  title: 'Default',
+  title: 'General/Default',
   component: Memori,
   argTypes: {
     AZURE_COGNITIVE_SERVICES_TTS_KEY: {
@@ -33,6 +33,7 @@ Anonymous.args = {
   baseURL: 'https://app.memorytwin.com',
   uiLang: 'it',
   showShare: true,
+  showSettings: true,
 };
 
 // export const Instruction = Template.bind({});
@@ -48,3 +49,42 @@ Anonymous.args = {
 //   pin: 'giver pin',
 //   authToken: 'your login token',
 // };
+
+export const DemoSophia = Template.bind({});
+DemoSophia.args = {
+  layout: 'TOTEM',
+  memoriName: 'Sophia',
+  ownerUserName: 'francescoimpellizzeri',
+  memoriID: '57405959-a2c5-4499-adb8-bb8dcc848ad5',
+  ownerUserID: '44ccefdb-d7a2-447e-9851-2a76be055a40',
+  tenantID: 'nextpresent.aclambda.online',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://nextpresent.aclambda.online',
+  uiLang: 'it',
+  lang: 'it',
+  showShare: true,
+  showSettings: true,
+  integrationID: 'd10bbffd-26f3-4614-a092-15b215d04ffa',
+  initialQuestion: 'Welcome Totem',
+  contextVars: 'CONTEXT:TOTEM',
+  // https://assets.memori.ai/api/v2/asset/6af08bf1-f011-40ea-92a2-699b7b53a53c.glb
+};
+
+export const DemoStefano = Template.bind({});
+DemoStefano.args = {
+  layout: 'TOTEM',
+  memoriName: 'Stefano Zingoni',
+  ownerUserName: 'roberta.bianchi',
+  memoriID: 'd6df4c75-8dfb-4e6d-b19f-193fa8a9bcce',
+  ownerUserID: 'b242160e-c19c-468f-b7f8-b2dc1ce51045',
+  tenantID: 'gruppoe.aclambda.online',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://gruppoe.aclambda.online',
+  uiLang: 'it',
+  lang: 'it',
+  showShare: true,
+  showSettings: true,
+  contextVars: 'CONTEXT:TOTEM',
+  integrationID: '5712601d-6174-45e7-bfb1-b4ac71c4ff80',
+  // https://assets.memori.ai/api/v2/asset/ed50c6a4-37cd-458b-9209-8cabfa256b30.glb
+};

package/src/index.tsx

@@ -5,7 +5,9 @@ import {
   Memori as IMemori,
 } from '@memori.ai/memori-api-client/dist/types';
 import memoriApiClient from '@memori.ai/memori-api-client';
-import MemoriWidget from './components/MemoriWidget/MemoriWidget';
+import MemoriWidget, {
+  Props as WidgetProps,
+} from './components/MemoriWidget/MemoriWidget';
 
 import i18n from './i18n';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +21,7 @@ export interface Props {
   tenantID: string;
   secretToken?: string;
   sessionID?: string;
+  layout?: WidgetProps['layout'];
   showShare?: boolean;
   showSettings?: boolean;
   showInstruct?: boolean;
@@ -62,8 +65,9 @@ const Memori: React.FC<Props> = ({
   tenantID,
   secretToken,
   sessionID,
+  layout = 'DEFAULT',
   showShare = true,
-  showSettings = false,
+  showSettings = true,
   showInstruct = false,
   height = '100%',
   baseURL,
@@ -142,6 +146,7 @@ const Memori: React.FC<Props> = ({
 
   return memori ? (
     <MemoriWidget
+      layout={layout}
       height={height}
       baseUrl={
         baseURL ||

package/src/locales/en.json

@@ -2,6 +2,7 @@
   "yes": "Yes",
   "no": "No",
   "confirm": "Confirm",
+  "apply": "Apply",
   "cancel": "Cancel",
   "show": "Show",
   "hide": "Hide",
@@ -10,6 +11,14 @@
   "edit": "Edit",
   "delete": "Delete",
   "loading": "Loading",
+  "expand": "Expand",
+  "fullscreenEnter": "Enter fullscreen",
+  "fullscreenExit": "Exit fullscreen",
+  "center": "Center",
+  "bottom": "Bottom",
+  "day": "Day",
+  "month": "Month",
+  "year": "Year",
   "copy": "Copy",
   "copyToClipboard": "Copy to clipboard",
   "showOriginalText": "Show original",
@@ -21,6 +30,13 @@
   "memoriBlockedGiverHelper": "You can still manage it as administrator, but other users will not be able to interact with it.",
   "generatedByAI": "Answer generated by AI, may occasionally generate incorrect informations",
   "completionsEnabled": "Advanced AI, can respond with automatically generated answers that may sometimes contain incorrect information",
+  "birthDate": "Birth date",
+  "birthDateHelper": "We ask for your birth date only to enable or disable functionalities that have age restrictions",
+  "underage": "You must be at least {{age}} years old to sign up.",
+  "underageTwinSession": "You must be at least {{age}} years old to interact with this Twin.",
+  "ageVerification": "Age verification",
+  "ageVerificationText": "To interact with this Twin, you must be at least {{minAge}} years old.",
+  "nsfw": "NSFW: This Twin contains adult contents",
   "auth": {
     "useRecoveryTokens": "Use recovery tokens",
     "tokens": "Tokens",
@@ -54,6 +70,7 @@
     "settingsHeaderLabel": "Setup here if you want to set the memori as continuous speech, and change the silence seconds if you want to customize them.",
     "continuousSpeechLabel": "Continuous speech",
     "secondsLabel": "Set seconds",
+    "controlsPosition": "Controls position",
     "tryMeHeaderLabel": "TRY",
     "unknownPosition": "Unknown position",
     "fieldPlace": "Write the place (eg 'Milano')",

package/src/locales/it.json

@@ -2,6 +2,7 @@
   "yes": "Si",
   "no": "No",
   "confirm": "Conferma",
+  "apply": "Applica",
   "cancel": "Annulla",
   "show": "Mostra",
   "hide": "Nascondi",
@@ -10,6 +11,14 @@
   "edit": "Modifica",
   "delete": "Elimina",
   "loading": "Caricamento",
+  "expand": "Espandi",
+  "fullscreenEnter": "Passa a schermo intero",
+  "fullscreenExit": "Esci da schermo intero",
+  "center": "Centro",
+  "bottom": "In basso",
+  "day": "Giorno",
+  "month": "Mese",
+  "year": "Anno",
   "copy": "Copia",
   "copyToClipboard": "Copia negli appunti",
   "showOriginalText": "Mostra originale",
@@ -21,6 +30,13 @@
   "memoriBlockedGiverHelper": "Puoi sempre gestirlo in qualità di amministratore, ma altri utenti non potranno interrogarlo.",
   "generatedByAI": "Risposta generata da IA, può talvolta generare informazioni non corrette",
   "completionsEnabled": "IA evoluta, può rispondere con risposte generate automaticamente che talvolta potrebbero contenere informazioni non corrette",
+  "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à",
+  "underage": "Devi avere almeno {{age}} anni per registrarti.",
+  "underageTwinSession": "Devi avere almeno {{age}} anni per interagire con questo Twin.",
+  "ageVerification": "Verifica dell'età",
+  "ageVerificationText": "Per interagire con questo Twin, devi aver almeno {{minAge}} anni.",
+  "nsfw": "NSFW: Questo Twin contiene contenuti per adulti",
   "auth": {
     "useRecoveryTokens": "Utilizza i token di recupero",
     "tokens": "Token",
@@ -54,6 +70,7 @@
     "settingsHeaderLabel": "Configura qui il memori se vuoi impostare una conversazione continua. Setta i secondi di silenzio prima dell'invio.",
     "continuousSpeechLabel": "Conversazione continua",
     "secondsLabel": "Secondi",
+    "controlsPosition": "Posizione dei controlli",
     "tryMeHeaderLabel": "PROVA",
     "unknownPosition": "Posizione sconosciuta",
     "fieldPlace": "Indica la posizione (es 'Milano')",

package/src/mocks/data.ts

@@ -35,6 +35,9 @@ export const memori: Memori = {
   categories: [],
   publishedInTheMetaverse: true,
   exposed: true,
+  enableCompletions: true,
+  nsfw: false,
+  ageRestriction: 14,
   contentQualityIndex: 66.6,
   contentQualityIndexTimestamp: '2021-03-01T12:00:00.000Z',
   ownerUserName: 'username',
@@ -44,8 +47,8 @@ export const memori: Memori = {
   secretToken: 'awanagana',
   giverPIN: '1234',
   giverTag: '🧑‍💻',
-  avatarURL: 'https://api.lorem.space/image/face?hash=0p9vyl1e',
-  coverURL: 'https://api.lorem.space/image/pizza?hash=ecz70guu',
+  avatarURL: 'https://app.twincreator.com/images/twincreator/square_logo.png',
+  coverURL: 'https://app.twincreator.com/images/twincreator/og-image.png',
 };
 
 export const history: Message[] = [

package/src/styles.css

@@ -5,7 +5,9 @@
 @import url('./components/ui/Modal.css');
 @import url('./components/ui/Spin.css');
 @import url('./components/ui/Tooltip.css');
+@import url('./components/ui/Select.css');
 
+@import url('./components/PoweredBy/PoweredBy.css');
 @import url('./components/AttachmentLinkModal/AttachmentLinkModal.css');
 @import url('./components/Auth/Auth.css');
 @import url('./components/Avatar/Avatar.css');
@@ -17,6 +19,7 @@
 @import url('./components/ChatInputs/ChatInputs.css');
 @import url('./components/ChatTextArea/ChatTextArea.css');
 @import url('./components/CustomGLBModelViewer/ModelViewer.css');
+@import url('./components/SettingsDrawer/SettingsDrawer.css');
 @import url('./components/ExportHistoryButton/ExportHistoryButton.css');
 @import url('./components/FeedbackButtons/FeedbackButtons.css');
 @import url('./components/Header/Header.css');
@@ -25,19 +28,37 @@
 @import url('./components/MediaWidget/LinkItemWidget.css');
 @import url('./components/MediaWidget/MediaItemWidget.css');
 @import url('./components/MediaWidget/MediaWidget.css');
-@import url('./components/MemoriWidget/MemoriWidget.css');
 @import url('./components/SendOnEnterMenu/SendOnEnterMenu.css');
 @import url('./components/ShareButton/ShareButton.css');
 @import url('./components/Snippet/Snippet.css');
 @import url('./components/StartPanel/StartPanel.css');
 @import url('./components/UploadMenu/UploadMenu.css');
-@import url('./components/PoweredBy/PoweredBy.css');
+@import url('./components/DateSelector/DateSelector.css');
+@import url('./components/AgeVerificationModal/AgeVerificationModal.css');
+@import url('./components/MemoriWidget/MemoriWidget.css');
 
 @import url('https://fonts.bunny.net/css?family=exo-2:200,400,700');
 
+@import url('./components/layouts/totem.css');
+
+.sr-only {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border-width: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
+
 memori-client,
 memori-client #root,
 body.sb-show-main #root,
+body.sb-show-main #headlessui-portal-root,
+#storybook-root,
+#storybook-docs,
 .memori-widget {
     font-family: 'Exo 2', sans-serif;
     font-size: 16px;
@@ -60,4 +81,5 @@ body.sb-show-main #root,
     --memori-drawer--width--lg: 60%;
     --memori-modal--width: 100%;
     --memori-modal--width--md: 80%;
+    --memori-error-color: #ff4d4f;
 }