@memori.ai/memori-react 6.8.2 → 6.8.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.8.2",
+  "version": "6.8.4",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -69,6 +69,7 @@
     "format": "prettier --write src",
     "sb": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
+    "storybook:emulator": "storybook dev --port 3000 --host 0.0.0.0 --ci",
     "build-storybook": "storybook build"
   },
   "prettier": {
@@ -239,7 +240,6 @@
     "@storybook/react-webpack5": "7.4.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
-    "@types/dompurify": "^3.0.5",
     "@types/jest": "29.2.4",
     "@types/leaflet": "^1.9.11",
     "@types/luxon": "^3.3.7",
@@ -292,28 +292,27 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.4",
-    "@memori.ai/memori-api-client": "^4.2.2",
+    "@memori.ai/memori-api-client": "6.12.1",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
-    "classnames": "2.3.2",
-    "dompurify": "^3.0.6",
+    "classnames": "2.5.1",
+    "dompurify": "^3.2.1",
     "ellipsed": "1.6.0",
     "i18next": "22.0.6",
-    "katex": "^0.16.10",
+    "katex": "^0.16.11",
     "leaflet": "^1.9.4",
-    "luxon": "^3.4.4",
-    "marked": "^11.1.0",
-    "marked-katex-extension": "^5.0.1",
-    "marked-linkify-it": "^3.1.9",
-    "microsoft-cognitiveservices-speech-sdk": "1.34.0",
+    "lil-gui": "^0.19.2",
+    "luxon": "^3.5.0",
+    "marked": "^15.0.2",
+    "marked-katex-extension": "^5.1.3",
+    "marked-linkify-it": "^3.1.12",
     "qrcode.react": "3.1.0",
     "react-hook-form": "7.39.5",
     "react-hot-toast": "^2.4.1",
     "react-i18next": "12.0.0",
     "react-leaflet": "^4.2.1",
-    "react-syntax-highlighter": "15.5.0",
     "standardized-audio-context": "25.3.34",
     "three": "0.144.0",
-    "tiny-invariant": "^1.3.1"
+    "tiny-invariant": "^1.3.3"
   }
 }

package/src/I18nWrapper.tsx

@@ -6,65 +6,8 @@ export interface Props {
   children: React.ReactNode;
 }
 
-const I18nWrapper = ({ children }: Props) => (
-  <I18nextProvider i18n={i18n}>
-    {children}
-
-    <script
-      dangerouslySetInnerHTML={{
-        __html: `
-          window.MathJax = {
-            startup: {
-              elements: ['.memori-chat--bubble-content'],
-            },
-            options: {
-              processHtmlClass: 'memori-chat--bubble-content',
-            },
-            tex: {
-              inlineMath: [
-                ['$', '$'],
-                ['\\$', '\\$'],
-                ['(', '\\)'],
-                ['\\(', ')'],
-                ['(', ')'],
-                ['[', '\\]'],
-                ['[', ']'],
-                ['\\(', '\\)'],
-                ['\\[', '\\]'],
-                ['\\\\[', '\\\\]'],
-                ['\\\\\\[', '\\\\\\]'],
-                ['((', '))'],
-              ],
-              displayMath: [
-                ['$$', '$$'],
-                ['\\[[', '\\]]'],
-                ['\\\\[[', '\\\\]]'],
-                ['\\\\\\[[', '\\\\\\]]'],
-              ],
-              processEscapes: true,
-            },
-            asciimath: {
-              fixphi: true,
-              displaystyle: true,
-              decimalsign: '.'
-            },
-            skipStartupTypeset: true,
-            chtml: {
-              displayAlign: 'left',
-            },
-            svg: {
-              fontCache: 'global'
-            }
-          };
-        `,
-      }}
-    />
-    <script
-      id="MathJax-script"
-      async
-      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
-    ></script>
-  </I18nextProvider>
-);
+const I18nWrapper = ({ children }: Props) => {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+};
 
 export default I18nWrapper;

package/src/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders client 1`] = `
+<div>
+  <div
+    id="_rht_toaster"
+    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+  />
+  <div
+    style="display: flex; align-items: center; justify-content: center;"
+  >
+    <p
+      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
+    >
+      loading
+      ...
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders client with all the props 1`] = `
+<div>
+  <div
+    id="_rht_toaster"
+    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+  />
+  <div
+    style="display: flex; align-items: center; justify-content: center;"
+  >
+    <p
+      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
+    >
+      loading
+      ...
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders client with whiteListedDomains on allowed domains 1`] = `
+<div>
+  <div
+    id="_rht_toaster"
+    style="position: fixed; z-index: 9999; top: 16px; left: 16px; right: 16px; bottom: 16px; pointer-events: none;"
+  />
+  <div
+    style="display: flex; align-items: center; justify-content: center;"
+  >
+    <p
+      style="text-align: center; margin: 2rem auto; text-transform: capitalize;"
+    >
+      loading
+      ...
+    </p>
+  </div>
+</div>
+`;
+
+exports[`renders client with whiteListedDomains on not allowed domains 1`] = `<div />`;

package/src/components/AccountForm/AccountForm.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import AccountForm from './AccountForm';
 import { user } from '../../mocks/data';
+import memoriApiClient from '@memori.ai/memori-api-client';
 
 beforeEach(() => {
   // @ts-ignore
@@ -16,7 +17,7 @@ beforeEach(() => {
 it('renders AccountForm unchanged', () => {
   const { container } = render(
     <AccountForm
-      apiUrl="https://backend.memori.ai"
+      apiClient={memoriApiClient()}
       user={user}
       loginToken="token"
       onUserUpdate={jest.fn()}

package/src/components/AccountForm/AccountForm.tsx

@@ -11,19 +11,17 @@ import Tooltip from '../ui/Tooltip';
 export interface Props {
   user: User;
   loginToken: string;
-  apiUrl: string;
+  apiClient: ReturnType<typeof memoriApiClient>;
   onUserUpdate: (user: User) => void;
 }
 
 const imgMimeTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
 
-const AccountForm = ({ user, loginToken, apiUrl, onUserUpdate }: Props) => {
+const AccountForm = ({ user, loginToken, apiClient, onUserUpdate }: Props) => {
   const { t, i18n } = useTranslation();
   const lang = i18n.language === 'it' ? 'it' : 'en';
 
-  const client = memoriApiClient(apiUrl);
-
-  const { updateUser, uploadAsset } = client.backend;
+  const { updateUser, uploadAsset } = apiClient.backend;
 
   const [email, setEmail] = useState<string>();
   const [password, setPassword] = useState<string>();

package/src/components/AgeVerificationModal/AgeVerificationModal.css

@@ -1,5 +1,5 @@
 .age-verification-modal {
-    z-index: 1001;
+    z-index: 9999;
 }
 
 .age-verification-modal,

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -34,7 +34,7 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
       toast.error(t('underageTwinSession', { age: minAge }));
       setError(
         t('underageTwinSession', { age: minAge }) ||
-          `You must be at least ${minAge} years old to interact with this Twin`
+          `You must be at least ${minAge} years old to interact with this Agent`
       );
       setSubmitting(false);
       return;

package/src/components/Avatar/Avatar.css

@@ -61,12 +61,12 @@
 }
 
 @media (max-width: 870px) {
-    .memori--avatar-wrapper div,
+    /* .memori--avatar-wrapper div,
     .memori--avatar-wrapper canvas,
     .memori--avatar-wrapper model-viewer {
         width: 150px !important;
         height: 150px !important;
-    }
+    } */
 
     .memori--avatar-wrapper model-viewer {
         margin-top: 2rem;

package/src/components/Avatar/Avatar.test.tsx

@@ -2,50 +2,64 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { memori, tenant, integration } from '../../mocks/data';
 import Avatar from './Avatar';
-
+import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 const integrationConfig = JSON.parse(integration.customData ?? '{}');
 
 it('renders defualt Avatar (blob) unchanged', () => {
   const { container } = render(
-    <Avatar
-      memori={memori}
+    <VisemeProvider>
+      <ArtifactProvider>
+      <Avatar
+        memori={memori}
       tenant={tenant}
+      isTotem={false}
+      setEnablePositionControls={() => {}}
       instruct={false}
       avatar3dVisible={true}
       setAvatar3dVisible={() => {}}
       hasUserActivatedSpeak={false}
-      isPlayingAudio={false}
-    />
+        isPlayingAudio={false}
+      />
+      </ArtifactProvider>
+    </VisemeProvider>
   );
   expect(container).toMatchSnapshot();
 });
 
 it('renders Avatar with blob and avatar in blob unchanged', () => {
   const { container } = render(
-    <Avatar
-      memori={memori}
-      integrationConfig={{
+    <VisemeProvider>
+      <Avatar
+        memori={memori}
+        integrationConfig={{
         ...integrationConfig,
         avatar: 'userAvatar',
         avatarURL: memori.avatarURL,
       }}
       tenant={tenant}
       instruct={false}
+      isTotem={false}
+      setEnablePositionControls={() => {}}
       avatar3dVisible={true}
       setAvatar3dVisible={() => {}}
       hasUserActivatedSpeak={false}
       isPlayingAudio={false}
-    />
+      />
+    </VisemeProvider>
   );
   expect(container).toMatchSnapshot();
 });
 
 it('renders Avatar with custom glb model unchanged', () => {
   const { container } = render(
-    <Avatar
-      memori={memori}
-      integration={integration}
-      integrationConfig={{
+    <VisemeProvider>
+      <Avatar
+        memori={memori}
+        integration={integration}
+        isTotem={false}
+        setEnablePositionControls={() => {}}
+        integrationConfig={{
         ...integrationConfig,
         avatar: 'customglb',
         avatarURL:
@@ -57,16 +71,20 @@ it('renders Avatar with custom glb model unchanged', () => {
       setAvatar3dVisible={() => {}}
       hasUserActivatedSpeak={false}
       isPlayingAudio={false}
-    />
+      />
+    </VisemeProvider>
   );
   expect(container).toMatchSnapshot();
 });
 
 it('renders Avatar with rpm 3d avatar unchanged', () => {
-  const { container } = render(
-    <Avatar
-      memori={memori}
+  const { container } = render( 
+    <VisemeProvider>
+      <Avatar
+        memori={memori}
       integration={integration}
+      isTotem={false}
+      setEnablePositionControls={() => {}}
       integrationConfig={{
         ...integrationConfig,
         avatar: 'readyplayerme',
@@ -77,9 +95,10 @@ it('renders Avatar with rpm 3d avatar unchanged', () => {
       instruct={false}
       avatar3dVisible={true}
       setAvatar3dVisible={() => {}}
-      hasUserActivatedSpeak={false}
-      isPlayingAudio={false}
-    />
+        hasUserActivatedSpeak={false}
+        isPlayingAudio={false}
+      />
+    </VisemeProvider>
   );
   expect(container).toMatchSnapshot();
 });