@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.20

package/esm/types/integration.d.ts

@@ -0,0 +1,3 @@
+export type AvatarMode = 'readyplayerme' | 'readyplayerme-full' | 'customglb' | 'customrpm' | 'userAvatar' | 'avatar-configurator';
+export declare const is3dAvatarWithUrl: (avatar: AvatarMode | string | undefined, avatarURL: string | undefined) => boolean;
+export declare const usesRpmAvatarView: (avatar: AvatarMode | string | undefined) => boolean;

package/esm/types/integration.js

@@ -0,0 +1,11 @@
+export const is3dAvatarWithUrl = (avatar, avatarURL) => !!avatarURL &&
+    (avatar === 'readyplayerme' ||
+        avatar === 'readyplayerme-full' ||
+        avatar === 'customglb' ||
+        avatar === 'customrpm' ||
+        avatar === 'avatar-configurator');
+export const usesRpmAvatarView = (avatar) => avatar === 'readyplayerme' ||
+    avatar === 'readyplayerme-full' ||
+    avatar === 'customrpm' ||
+    avatar === 'avatar-configurator';
+//# sourceMappingURL=integration.js.map

package/esm/types/integration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"integration.js","sourceRoot":"","sources":["../../src/types/integration.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAAuC,EACvC,SAA6B,EACpB,EAAE,CACX,CAAC,CAAC,SAAS;IACX,CAAC,MAAM,KAAK,eAAe;QACzB,MAAM,KAAK,oBAAoB;QAC/B,MAAM,KAAK,WAAW;QACtB,MAAM,KAAK,WAAW;QACtB,MAAM,KAAK,qBAAqB,CAAC,CAAC;AAGtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAAuC,EAC9B,EAAE,CACX,MAAM,KAAK,eAAe;IAC1B,MAAM,KAAK,oBAAoB;IAC/B,MAAM,KAAK,WAAW;IACtB,MAAM,KAAK,qBAAqB,CAAC"}

package/esm/version.d.ts

@@ -1 +1 @@
-export declare const version = "9.0.0-alpha.2";
+export declare const version = "9.0.0-alpha.20";

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '9.0.0-alpha.2';
+export const version = '9.0.0-alpha.20';
 //# sourceMappingURL=version.js.map

package/esm/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,OAAO,GAAG,gBAAgB,CAAC"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "9.0.0-alpha.2",
+  "version": "9.0.0-alpha.20",
   "name": "@memori.ai/memori-react",
   "author": "Memori Srl",
   "main": "dist/index.js",
@@ -50,12 +50,15 @@
     "cleanup-mocks": "rimraf dist/mocks esm/mocks",
     "cleanup": "yarn cleanup-test:cjs && yarn cleanup-stories:cjs && yarn cleanup-test:esm && yarn cleanup-stories:esm && yarn cleanup-mocks",
     "copy-files": "yarn copy-files:cjs && yarn copy-files:esm",
+    "build:css:cjs": "postcss src/styles.css -o dist/styles.css",
+    "build:css:esm": "postcss src/styles.css -o esm/styles.css",
+    "build:css": "yarn build:css:cjs && yarn build:css:esm",
     "build:cjs": "tsc --module commonjs --outDir dist",
     "build:esm": "tsc --module esnext --outDir esm",
     "update-version": "node ./scripts/update-version.js",
     "prebuild": "yarn clean",
-    "build": "yarn build:cjs && yarn build:esm && yarn copy-files && yarn cleanup",
-    "postbuild": "yarn copy-files",
+    "build": "yarn clean && yarn build:cjs && yarn build:esm && yarn copy-files && yarn cleanup && yarn build:css",
+    "postbuild": "yarn copy-files && yarn build:css",
     "test:ci": "TZ=UTC NODE_ENV=test jest --passWithNoTests --ci src",
     "test:coverage": "TZ=UTC NODE_ENV=test jest --coverage src",
     "test": "TZ=UTC NODE_ENV=test jest --watch src",
@@ -274,6 +277,8 @@
     "jest": "29.3.1",
     "jest-environment-jsdom": "29.3.1",
     "postcss": "8.4.19",
+    "postcss-cli": "^11.0.1",
+    "postcss-import": "^16.1.1",
     "prettier": "2.8.0",
     "prop-types": "15.8.1",
     "react": "18.2.0",
@@ -296,12 +301,14 @@
     "typescript": ">=4.8"
   },
   "dependencies": {
-    "@memori.ai/memori-api-client": "6.22.0",
-    "@memori.ai/ui": "^1.14.3",
+    "@memori.ai/memori-api-client": "6.24.1",
+    "@memori.ai/ui": "^1.16.1",
+    "@nats-io/jetstream": "^3.4.0",
+    "@nats-io/nats-core": "^3.4.0",
     "@react-three/drei": "8.20.2",
     "@react-three/fiber": "7.0.25",
     "classnames": "2.5.1",
-    "dompurify": "^3.4.0",
+    "dompurify": "^3.4.13",
     "ellipsed": "1.6.0",
     "i18next": "22.0.6",
     "katex": "^0.16.11",

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

@@ -2,16 +2,6 @@
 
 exports[`renders client 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >
@@ -27,16 +17,6 @@ exports[`renders client 1`] = `
 
 exports[`renders client with all the props 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >
@@ -52,16 +32,6 @@ exports[`renders client with all the props 1`] = `
 
 exports[`renders client with audio disabled 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >
@@ -77,16 +47,6 @@ exports[`renders client with audio disabled 1`] = `
 
 exports[`renders client with whiteListedDomains on allowed domains 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >
@@ -102,16 +62,6 @@ exports[`renders client with whiteListedDomains on allowed domains 1`] = `
 
 exports[`renders client with whiteListedDomains on not allowed domains 1`] = `
 <div>
-  <div
-    aria-atomic="false"
-    aria-label="Notifications"
-    aria-live="polite"
-    aria-relevant="additions text"
-    class="memori-alert-viewport memori-alert-viewport--top-end"
-    role="region"
-    style="z-index: 10002; top: 30px; right: 30px; position: fixed;"
-    tabindex="-1"
-  />
   <div
     style="display: flex; align-items: center; justify-content: center;"
   >

package/src/components/AgeVerificationModal/AgeVerificationModal.css

@@ -1,8 +1,14 @@
 /* Above website assistant and other fixed UI (same max z-index so modal stacks on top by DOM order) */
+.memori-modal__backdrop.age-verification-modal-backdrop,
+.age-verification-modal.memori-modal__viewport,
 .age-verification-modal {
     z-index: 2147483647;
 }
 
+.memori-modal__backdrop.age-verification-modal-backdrop {
+    background: color-mix(in srgb, #000 45%, transparent);
+}
+
 .age-verification-modal,
 .age-verification-modal * {
     box-sizing: border-box;
@@ -74,7 +80,7 @@
 }
 
 button.age-verification-submit {
-   position: relative;
+    position: relative;
     overflow: hidden;
     width: 100%;
     min-width: 220px;
@@ -107,12 +113,11 @@ button.age-verification-submit:hover::before {
     left: 100%;
 }
 
-
 button.age-verification-submit:active {
     transform: translateY(0);
 }
 
-.age-verification-text{
+.age-verification-text {
     margin-top: 0;
     margin-bottom: var(--memori-spacing-lg);
-}
+}

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import {
   Button,
   FieldGroup,
@@ -18,6 +19,7 @@ export interface Props {
 }
 
 const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const { add } = useAlertManager();
   const [birthDate, setBirthDate] = useState<DateTime>();
@@ -66,16 +68,24 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
     setSubmitting(false);
   }, [add, birthDate, minAge, onClose, t]);
 
+  const handleDateChange = useCallback((date: DateTime | undefined) => {
+    setBirthDate(date);
+  }, []);
+
   return (
     <Modal
+      container={surfaceEl ?? undefined}
       open={visible}
       width="600px"
       widthMd="600px"
       title={t('ageVerification')}
       className="age-verification-modal"
+      backdropClassName="age-verification-modal-backdrop"
       closable={false}
     >
-      <p className="age-verification-text">{t('ageVerificationText', { minAge })}</p>
+      <p className="age-verification-text">
+        {t('ageVerificationText', { minAge })}
+      </p>
 
       <Form
         name="ageVerification"
@@ -93,8 +103,9 @@ const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
           required
         >
           <DateSelector
+            minAge={minAge}
             onChange={date => {
-              setBirthDate(date);
+              handleDateChange(date);
               setError(undefined);
             }}
           />

package/src/components/Auth/Auth.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Input, Modal, Form } from '@memori.ai/ui';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { Plus } from 'lucide-react';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 
 export interface Props {
   pwdOrTokens: null | 'password' | 'tokens';
@@ -32,6 +33,7 @@ export const AuthWidget = ({
   openModal = false,
   withModal = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const {
     register,
@@ -198,6 +200,7 @@ export const AuthWidget = ({
 
   return withModal ? (
     <Modal
+      container={surfaceEl ?? undefined}
       open={openModal || showModal}
       title={t('auth.title') || 'Authentication'}
       closable={true}

package/src/components/Avatar/Avatar.stories.tsx

@@ -6,6 +6,7 @@ import Avatar, { Props } from './Avatar';
 
 import './Avatar.css';
 import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
+import { VisemeProvider } from '../../context/visemeContext';
 
 const meta: Meta = {
   title: 'Widget/Avatar',
@@ -33,34 +34,38 @@ const Template: Story<Props> = args => {
 
   return (
     <I18nWrapper>
-      <ArtifactProvider>
-      <div
-        style={
-          args.integrationConfig?.avatar === 'customglb' ||
-          args.integrationConfig?.avatar === 'readyplayerme' ||
-          args.integrationConfig?.avatar === 'readyplayerme-full'
-            ? {}
-            : { marginTop: '20vw' }
-        }
-      >
-        <Avatar
-          {...args}
-          integrationConfig={
-            args.integrationConfig
-              ? {
-                  ...args.integrationConfig,
-                  avatarURL:
-                    args.integrationConfig.avatarURL?.split('#')?.[0] +
-                    `#${new Date(Date.now()).toISOString()}`,
-                }
-              : undefined
-          }
-          avatar3dVisible={avatar3dVisible}
-          setAvatar3dVisible={setAvatar3dVisible}
-          key={Date.now()}
-        />
-      </div>
-      </ArtifactProvider>
+      <VisemeProvider>
+        {' '}
+        <ArtifactProvider>
+          <div
+            style={
+              args.integrationConfig?.avatar === 'customglb' ||
+              args.integrationConfig?.avatar === 'readyplayerme' ||
+              args.integrationConfig?.avatar === 'readyplayerme-full' ||
+              args.integrationConfig?.avatar === 'avatar-configurator'
+                ? {}
+                : { marginTop: '20vw' }
+            }
+          >
+            <Avatar
+              {...args}
+              integrationConfig={
+                args.integrationConfig
+                  ? {
+                      ...args.integrationConfig,
+                      avatarURL:
+                        args.integrationConfig.avatarURL?.split('#')?.[0] +
+                        `#${new Date(Date.now()).toISOString()}`,
+                    }
+                  : undefined
+              }
+              avatar3dVisible={avatar3dVisible}
+              setAvatar3dVisible={setAvatar3dVisible}
+              key={Date.now()}
+            />
+          </div>
+        </ArtifactProvider>
+      </VisemeProvider>
     </I18nWrapper>
   );
 };
@@ -141,3 +146,15 @@ FullbodyReadyPlayerMeAvatar.args = {
       'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#1669136149862',
   },
 };
+
+export const AvatarConfigurator = Template.bind({});
+AvatarConfigurator.args = {
+  ...FullbodyReadyPlayerMeAvatar.args,
+  integrationConfig: {
+    ...integrationConfig,
+    avatar: 'avatar-configurator',
+    avatarURL:
+      'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#1669136149862',
+  },
+  avatarType: 'avatar3d',
+};

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

@@ -102,3 +102,57 @@ it('renders Avatar with rpm 3d avatar unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders Avatar with avatar-configurator like readyplayerme-full', () => {
+  const { container } = render(
+    <VisemeProvider>
+      <Avatar
+        memori={memori}
+        integration={integration}
+        isTotem={false}
+        setEnablePositionControls={() => {}}
+        integrationConfig={{
+          ...integrationConfig,
+          avatar: 'avatar-configurator',
+          avatarURL:
+            'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+        }}
+        tenant={tenant}
+        instruct={false}
+        avatar3dVisible={true}
+        setAvatar3dVisible={() => {}}
+        hasUserActivatedSpeak={false}
+        isPlayingAudio={false}
+        avatarType="avatar3d"
+      />
+    </VisemeProvider>
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Avatar with avatar-configurator on totem layout unchanged', () => {
+  const { container } = render(
+    <VisemeProvider>
+      <Avatar
+        memori={memori}
+        integration={integration}
+        isTotem
+        setEnablePositionControls={() => {}}
+        integrationConfig={{
+          ...integrationConfig,
+          avatar: 'avatar-configurator',
+          avatarURL:
+            'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
+        }}
+        tenant={tenant}
+        instruct={false}
+        avatar3dVisible={true}
+        setAvatar3dVisible={() => {}}
+        hasUserActivatedSpeak={false}
+        isPlayingAudio={false}
+        avatarType="avatar3d"
+      />
+    </VisemeProvider>
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/Avatar/Avatar.tsx

@@ -15,6 +15,7 @@ import { Eye, EyeOff, Pencil } from 'lucide-react';
 import cx from 'classnames';
 import ContainerAvatarView from './AvatarView';
 import { useViseme } from '../../context/visemeContext';
+import { is3dAvatarWithUrl, usesRpmAvatarView } from '../../types/integration';
 
 export interface Props {
   memori: Memori;
@@ -88,11 +89,10 @@ const Avatar: React.FC<Props> = ({
 
   const renderAvatar = () => {
     if (
-      (integrationConfig?.avatar === 'readyplayerme' ||
-        integrationConfig?.avatar === 'readyplayerme-full' ||
-        integrationConfig?.avatar === 'customglb' ||
-        integrationConfig?.avatar === 'customrpm') &&
-      integrationConfig?.avatarURL &&
+      is3dAvatarWithUrl(
+        integrationConfig?.avatar,
+        integrationConfig?.avatarURL
+      ) &&
       avatarType &&
       avatarType !== 'blob'
     ) {
@@ -121,12 +121,8 @@ const Avatar: React.FC<Props> = ({
   };
 
   const renderAvatarContent = () => {
-    if (!isClient) return null;
-    if (
-      integrationConfig?.avatar === 'readyplayerme' ||
-      integrationConfig?.avatar === 'readyplayerme-full' ||
-      integrationConfig?.avatar === 'customrpm'
-    ) {
+    if (!isClient || !integrationConfig) return null;
+    if (usesRpmAvatarView(integrationConfig.avatar)) {
       return (
         <ErrorBoundary
           fallback={
@@ -161,7 +157,7 @@ const Avatar: React.FC<Props> = ({
       );
     }
 
-    if (integrationConfig?.avatar === 'customglb') {
+    if (integrationConfig.avatar === 'customglb') {
       return (
         <ModelViewer
           poster={getAvatarUrl() || ''}

package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.tsx

@@ -9,6 +9,7 @@ import {
   ANIMATION_URLS,
   AVATAR_POSITION,
   AVATAR_ROTATION,
+  MALE_EXCLUDED_ANIMATIONS,
   SCALE_LERP_FACTOR,
 } from '../../constants';
 import DynamicShadow from '../../Shadow/DynamicShadow';
@@ -64,11 +65,17 @@ export function FullbodyAvatar({
     return found;
   }, [scene]);
 
-  // Merge base and additional animations only if needed
-  const mergedAnimations = useMemo(
-    () => needsAdditionalAnimations ? [...baseAnimations, ...additionalAnimations] : baseAnimations,
-    [baseAnimations, additionalAnimations, needsAdditionalAnimations]
-  );
+  // Merge base and additional animations only if needed.
+  // For male avatars, exclude problematic idle clips from the full set (base + pack).
+  const mergedAnimations = useMemo(() => {
+    const clips = needsAdditionalAnimations
+      ? [...baseAnimations, ...additionalAnimations]
+      : baseAnimations;
+
+    if (sex !== 'MALE') return clips;
+
+    return clips.filter(clip => !MALE_EXCLUDED_ANIMATIONS.has(clip.name));
+  }, [baseAnimations, additionalAnimations, needsAdditionalAnimations, sex]);
 
   // Create animation actions from the merged animations
   const { actions } = useAnimations(mergedAnimations, scene);

package/src/components/Avatar/AvatarView/AvatarComponent/components/controllers/MorphTargetController.ts

@@ -2,6 +2,7 @@ import { SkinnedMesh } from 'three';
 import { MathUtils } from 'three';
 import {
   EMOTION_SMOOTHING,
+  EMOTION_INTENSITY,
   VISEME_SMOOTHING,
   BLINK_CONFIG,
   MAPPING_EMOTIONS_ITALIAN_TO_ENGLISH,
@@ -214,7 +215,7 @@ export class MorphTargetController {
           const currentEmotionValue = this.currentEmotionValues[key] || 0;
           const newEmotionValue = MathUtils.lerp(
             currentEmotionValue,
-            targetEmotionValue * 1.5, // Apply emotion at 80% intensity for more natural expressions
+            targetEmotionValue * EMOTION_INTENSITY,
             EMOTION_SMOOTHING
           );
           this.currentEmotionValues[key] = newEmotionValue;

package/src/components/Avatar/AvatarView/AvatarComponent/constants.ts

@@ -58,7 +58,8 @@ export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM: BlendShapeMap = [
       'browDownRight': 0.5,
       'browOuterUpLeft': 0.5,
       'browOuterUpRight': 0.5,
-      'mouthSmile': -0.2,
+      'mouthSmileLeft': -0.2,
+      'mouthSmileRight': -0.2,
     },
   },
   {
@@ -77,7 +78,8 @@ export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM: BlendShapeMap = [
       'browDownRight': -0.5,
       'eyeSquintLeft': 0.5,
       'eyeSquintRight': 0.5,
-      'mouthSmile': -0.6,
+      'mouthSmileLeft': -0.6,
+      'mouthSmileRight': -0.6,
     },
   },
   {
@@ -88,7 +90,8 @@ export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM: BlendShapeMap = [
       'browOuterUpRight': 0.5,
       'eyeWideLeft': 0.5,
       'eyeWideRight': 0.5,
-      'mouthSmile': 0.5,
+      'mouthSmileLeft': 0.5,
+      'mouthSmileRight': 0.5,
     },
   },
   {
@@ -97,7 +100,8 @@ export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM: BlendShapeMap = [
       'browDownLeft': 0.5,
       'browDownRight': 0.5,
       'browInnerUp': 0.5,
-      'mouthSmile': 0.5,
+      'mouthSmileLeft': 0.5,
+      'mouthSmileRight': 0.5,
     },
   },
 ];
@@ -109,6 +113,12 @@ export const ANIMATION_URLS = {
     'https://assets.memori.ai/api/v2/asset/2adc934b-24b2-45bd-94ad-ffec58d3cb32.glb',
 };
 
+/** Idle clips excluded from the male animation pack. */
+export const MALE_EXCLUDED_ANIMATIONS = new Set([
+  'Idle',
+  'Idle2'
+]);
+
 // Blink configuration
 export const BLINK_CONFIG = {
   minInterval: 1000,
@@ -127,3 +137,5 @@ export const DEFAULT_CONFIG: AnimationConfig = {
 // Smoothing factors for emotion and viseme morphs
 export const EMOTION_SMOOTHING = 0.3;
 export const VISEME_SMOOTHING = 0.5;
+/** Multiplier applied to emotion morph target values before clamping (1 = raw mapping). */
+export const EMOTION_INTENSITY = 2.5;