@memori.ai/memori-react 7.5.0 → 7.6.0

package/src/helpers/utils.test.ts

@@ -3,6 +3,7 @@ import {
   stripEmojis,
   stripMarkdown,
   stripOutputTags,
+  escapeHTML,
 } from './utils';
 
 describe('Utils/difference', () => {
@@ -139,3 +140,20 @@ describe('utils/stripOutputTags', () => {
     expect(result).toEqual('test\n');
   });
 });
+
+describe('utils/parsing combined', () => {
+  it('should remove output tag from real message', () => {
+    const result = escapeHTML(
+      stripMarkdown(
+        stripEmojis(
+          stripOutputTags(`Beh... grazie, davvero. Non so cosa dire, sono lusingata. Ma... mi scusi se glielo chiedo, è sicuro che non ci sia stato un errore? Di solito ricevo più critiche che complimenti per il mio lavoro. So di impegnarmi molto, faccio spesso straordinari e salto persino la pausa pranzo per finire le pratiche. Però mi rendo conto che a volte ci sono imprecisioni e ritardi nelle consegne... Forse c'è qualcosa che non sto capendo?
+
+    <output class="memori-emotion">["timore"]</output>`)
+        )
+      )
+    );
+    expect(result).toEqual(
+      `Beh... grazie, davvero. Non so cosa dire, sono lusingata. Ma... mi scusi se glielo chiedo, è sicuro che non ci sia stato un errore? Di solito ricevo più critiche che complimenti per il mio lavoro. So di impegnarmi molto, faccio spesso straordinari e salto persino la pausa pranzo per finire le pratiche. Però mi rendo conto che a volte ci sono imprecisioni e ritardi nelle consegne... Forse c'è qualcosa che non sto capendo?`
+    );
+  });
+});

package/src/helpers/utils.ts

@@ -1,4 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
+import { Material, MeshStandardMaterial, SkinnedMesh } from 'three';
+import * as THREE from 'three';
 
 export const hasTouchscreen = (): boolean => {
   let hasTouchScreen = false;
@@ -148,6 +150,7 @@ export const stripEmojis = (text: string) => {
 
 export const stripMarkdown = (text: string) => {
   // Remove code blocks
+  text = text.replaceAll(/```*?```/g, '');
   text = text.replaceAll(/```[\s\S]*?```/g, '');
   // Remove inline code
   text = text.replaceAll(/`[^`]*`/g, '');
@@ -192,6 +195,12 @@ export const stripOutputTags = (text: string): string => {
   return stripOutputTags(textBefore + textAfter);
 };
 
+export const stripHTML = (text: string) => {
+  const el = document.createElement('div');
+  el.innerHTML = text;
+  return el.textContent || '';
+};
+
 export const escapeHTML = (text: string) => {
   const el = document.createElement('textarea');
   el.textContent = text;
@@ -308,3 +317,67 @@ export const installMathJax = () => {
 
   installMathJaxScript();
 };
+/**
+ * Corrects materials by setting some specific properties.
+ * This is often necessary when working with imported 3D models.
+ *
+ * @param materials - An object containing materials to be corrected.
+ */
+export function correctMaterials(materials: { [key: string]: Material }) {
+  Object.values(materials).forEach(material => {
+    if (material instanceof MeshStandardMaterial) {
+      // Improve the material's appearance
+      material.roughness = 0.8;
+      material.metalness = 0.1;
+
+      // Enable shadow casting and receiving
+      material.shadowSide = 2; // FrontSide and BackSide
+
+      // Improve texture rendering if the material uses textures
+      if (material.map) {
+        material.map.anisotropy = 16;
+      }
+    }
+  });
+}
+
+/**
+ * Type guard to check if an object is a SkinnedMesh.
+ * This is useful when working with 3D models that may contain different types of meshes.
+ *
+ * @param object - The object to check.
+ * @returns True if the object is a SkinnedMesh, false otherwise.
+ */
+export function isSkinnedMesh(object: any): object is SkinnedMesh {
+  return object.isSkinnedMesh === true;
+}
+
+/**
+ * Disposes of a Three.js object and its children recursively.
+ * This is important for memory management, especially when removing objects from the scene.
+ *
+ * @param object - The Three.js object to dispose.
+ */
+export function disposeObject(object: any) {
+  if ('geometry' in object && object.geometry instanceof THREE.BufferGeometry) {
+    object.geometry.dispose();
+  }
+
+  if ('material' in object) {
+    if (Array.isArray(object.material)) {
+      if (Array.isArray(object.material)) {
+        object.material.forEach((material: any) => {
+          if (material instanceof THREE.Material) {
+            material.dispose();
+          }
+        });
+      } else if (object && object.material instanceof THREE.Material) {
+        object.material.dispose();
+      }
+    }
+  }
+
+  if (object.children) {
+    object.children.forEach(disposeObject);
+  }
+}

package/src/index.stories.tsx

@@ -42,7 +42,7 @@ Localhost.args = {
   ownerUserName: 'nicola',
   memoriID: '1a9c75e8-57aa-4ce3-8ea5-256185fa79a7',
   ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
-  tenantID: 'app.memorytwin.com',
+  tenantID: 'www.aisuru.com',
   apiURL: 'http://localhost:7778',
   baseURL: 'http://localhost:3000',
   uiLang: 'EN',
@@ -58,7 +58,7 @@ LocalhostBoE.args = {
   ownerUserName: 'nicola',
   memoriID: '2b094cd6-77b8-4e09-a807-0039b84c988e',
   ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
-  tenantID: 'app.memorytwin.com',
+  tenantID: 'www.aisuru.com',
   apiURL: 'http://localhost:7778',
   baseURL: 'http://localhost:3000',
   uiLang: 'EN',
@@ -82,24 +82,50 @@ Staging.args = {
   layout: 'FULLPAGE',
 };
 
-export const ProductionTotem = Template.bind({});
-ProductionTotem.args = {
-  memoriName: 'Prova12345',
+export const Giovanna = Template.bind({});
+Giovanna.args = {
+  memoriName: 'Giovanna',
+  ownerUserName: 'memoridev',
+  memoriID: '3b308d07-0ff8-4f18-b885-fad501164c43',
+  ownerUserID: '13ab0379-a51d-4a83-8389-4f4b95e15567',
+  tenantID: 'www.aisuru.com',
+  engineURL: 'https://engine.memori.ai',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://www.aisuru.com',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  layout: 'ZOOMED_FULL_BODY',
+  showInstruct: 'false',
+  showSettings: 'true',
+  showClear: 'false',
+  showAIicon: 'true',
+  showWhyThisAnswer: 'true',
+  showTypingText: 'false',
+  showOnlyLastMessages: 'false',
+  showTranslationOriginal: 'false',
+  showCopyButton: 'false',
+  showShare: 'true',
+  showLogin: 'false',
+  enableAudio: 'true',
+};
+
+export const GiovannaProva = Template.bind({});
+GiovannaProva.args = {
+  memoriName: 'GiovannaProva',
   ownerUserName: 'patini929',
-  memoriID: '514dd043-ec26-4c57-a014-a512c9014822',
+  memoriID: 'aee4c0ab-66c0-4a4e-acf5-e7be0a3a8ddf',
   ownerUserID: '1941d326-6986-4fa1-872b-458d09fb654c',
   tenantID: 'www.aisuru.com',
   engineURL: 'https://engine.memori.ai',
   apiURL: 'https://backend.memori.ai',
   baseURL: 'https://www.aisuru.com',
   uiLang: 'IT',
-  spokenLang: 'FR',
-  layout: 'FULLPAGE',
-  
+  spokenLang: 'IT',
+  layout: 'ZOOMED_FULL_BODY',
   showInstruct: false,
   showSettings: true,
   showClear: false,
-  showAIicon: 'true',
+  showAIicon: true,
   showWhyThisAnswer: true,
   showTypingText: false,
   showOnlyLastMessages: false,
@@ -108,7 +134,6 @@ ProductionTotem.args = {
   showShare: true,
   showLogin: false,
   enableAudio: true,
-  integrationID: '37d368cf-6241-4cc8-a1f3-742786f22431',
 };
 
 const TemplateWithBatchButton: Story<Props> = args => (
@@ -186,13 +211,11 @@ WithCustomUserAvatar.args = {
 
 export const Test = Template.bind({});
 Test.args = {
-  ownerUserName: 'memoridev',
-  memoriName: 'Assistente Report',
-  tenantID: 'bcc-iccrea.aclambda.online',
-  apiURL: 'https://backend.memori.ai',
-  baseURL: 'https://bcc-iccrea.aclambda.online',
+  ownerUserName: 'dpezzettone',
+  memoriName: 'Meta Prompt Engineer',
+  tenantID: 'www.aisuru.com',
   layout: 'CHAT',
-  uiLang: 'it',
+  uiLang: 'en',
   showShare: true,
   showSettings: true,
   showLogin: true,

package/src/index.tsx

@@ -16,7 +16,7 @@ import { installMathJax } from './helpers/utils';
 import i18n from './i18n';
 import { useTranslation } from 'react-i18next';
 import I18nWrapper from './I18nWrapper';
-
+import { VisemeProvider } from './context/visemeContext';
 export interface Props {
   memoriName?: string | null;
   memoriID?: string | null;
@@ -223,85 +223,87 @@ const Memori: React.FC<Props> = ({
     installMathJax();
   }, []);
 
-  const renderer = memori ? (
-    <MemoriWidget
-      layout={layout}
-      customLayout={customLayout}
-      height={height}
-      baseUrl={
-        baseURL ||
-        (tenantID.startsWith('https://') ? tenantID : `https://${tenantID}`)
-      }
-      apiUrl={apiURL}
-      memori={{
-        ...memori,
-        secretToken,
-      }}
-      ownerUserName={ownerUserName ?? memori.ownerUserName}
-      ownerUserID={ownerUserID ?? memori.ownerUserID}
-      tenantID={tenantID}
-      memoriLang={spokenLang ?? memori.culture?.split('-')?.[0]}
-      multilingual={multilingual}
-      tenant={tenant}
-      secret={secretToken}
-      sessionID={sessionID}
-      showShare={showShare}
-      showCopyButton={showCopyButton}
-      showTranslationOriginal={showTranslationOriginal}
-      showSettings={showSettings}
-      showInstruct={showInstruct}
-      showTypingText={showTypingText}
-      showClear={showClear}
-      showOnlyLastMessages={showOnlyLastMessages}
-      showInputs={showInputs}
-      showDates={showDates}
-      showContextPerLine={showContextPerLine}
-      showLogin={showLogin ?? memori?.enableDeepThought}
-      integration={memori?.integrations?.find(i =>
-        integrationID
-          ? i.integrationID === integrationID
-          : !!i.publish && i.type === 'LANDING_EXPERIENCE'
-      )}
-      initialContextVars={context}
-      initialQuestion={initialQuestion}
-      authToken={authToken}
-      AZURE_COGNITIVE_SERVICES_TTS_KEY={
-        speechKey || AZURE_COGNITIVE_SERVICES_TTS_KEY
-      }
-      enableAudio={enableAudio}
-      defaultSpeakerActive={defaultSpeakerActive}
-      disableTextEnteredEvents={disableTextEnteredEvents}
-      onStateChange={onStateChange}
-      additionalInfo={additionalInfo}
-      customMediaRenderer={customMediaRenderer}
-      additionalSettings={additionalSettings}
-      userAvatar={userAvatar}
-      {...(tag && pin ? { personification: { tag, pin } } : {})}
-    />
-  ) : (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      <p
-        style={{
-          textAlign: 'center',
-          margin: '2rem auto',
-          textTransform: 'capitalize',
-        }}
-      >
-        {t('loading') || 'Loading'}...
-      </p>
-    </div>
-  );
-
   return (
     <I18nWrapper>
-      <Toaster position="top-center" reverseOrder={true} />
-      {renderer}
+      <VisemeProvider>
+        <Toaster position="top-center" reverseOrder={true} />
+        {memori ? (
+          <MemoriWidget
+            layout={layout}
+            customLayout={customLayout}
+            height={height}
+            baseUrl={
+              baseURL ||
+              (tenantID.startsWith('https://')
+                ? tenantID
+                : `https://${tenantID}`)
+            }
+            apiUrl={apiURL}
+            memori={{
+              ...memori,
+              secretToken,
+            }}
+            ownerUserName={ownerUserName ?? memori.ownerUserName}
+            ownerUserID={ownerUserID ?? memori.ownerUserID}
+            tenantID={tenantID}
+            memoriLang={spokenLang ?? memori.culture?.split('-')?.[0]}
+            multilingual={multilingual}
+            tenant={tenant}
+            secret={secretToken}
+            sessionID={sessionID}
+            showShare={showShare}
+            showCopyButton={showCopyButton}
+            showTranslationOriginal={showTranslationOriginal}
+            showSettings={showSettings}
+            showInstruct={showInstruct}
+            showTypingText={showTypingText}
+            showClear={showClear}
+            showOnlyLastMessages={showOnlyLastMessages}
+            showInputs={showInputs}
+            showDates={showDates}
+            showContextPerLine={showContextPerLine}
+            showLogin={showLogin ?? memori?.enableDeepThought}
+            integration={memori?.integrations?.find(i =>
+              integrationID
+                ? i.integrationID === integrationID
+                : !!i.publish && i.type === 'LANDING_EXPERIENCE'
+            )}
+            initialContextVars={context}
+            initialQuestion={initialQuestion}
+            authToken={authToken}
+            AZURE_COGNITIVE_SERVICES_TTS_KEY={
+              speechKey || AZURE_COGNITIVE_SERVICES_TTS_KEY
+            }
+            enableAudio={enableAudio}
+            defaultSpeakerActive={defaultSpeakerActive}
+            disableTextEnteredEvents={disableTextEnteredEvents}
+            onStateChange={onStateChange}
+            additionalInfo={additionalInfo}
+            customMediaRenderer={customMediaRenderer}
+            additionalSettings={additionalSettings}
+            userAvatar={userAvatar}
+            {...(tag && pin ? { personification: { tag, pin } } : {})}
+          />
+        ) : (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <p
+              style={{
+                textAlign: 'center',
+                margin: '2rem auto',
+                textTransform: 'capitalize',
+              }}
+            >
+              {t('loading') || 'Loading'}...
+            </p>
+          </div>
+        )}
+      </VisemeProvider>
     </I18nWrapper>
   );
 };
@@ -321,6 +323,8 @@ Memori.propTypes = {
     'TOTEM',
     'WEBSITE_ASSISTANT',
     'CHAT',
+    'HIDDEN_CHAT',
+    'ZOOMED_FULL_BODY',
   ]),
   customLayout: PropTypes.any,
   showShare: PropTypes.bool,

package/src/styles.css

@@ -48,6 +48,7 @@
 
 @import url('https://fonts.bunny.net/css?family=lexend-deca:200,400,700');
 
+@import url('./components/layouts/hidden-chat.css');
 @import url('./components/layouts/totem.css');
 @import url('./components/layouts/website-assistant.css');
 @import url('./components/layouts/chat.css');

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

@@ -1,120 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Vector3,
-  Euler,
-  AnimationMixer,
-  AnimationAction,
-  AnimationClip,
-} from 'three';
-import { useAnimations, useGLTF } from '@react-three/drei';
-import { useGraph, dispose, useFrame } from '@react-three/fiber';
-import { correctMaterials, isSkinnedMesh } from '../utils/utils';
-import useEyeBlink from '../utils/useEyeBlink';
-import useMouthSpeaking from '../utils/useMouthSpeaking';
-import useHeadMovement from '../utils/useHeadMovement';
-import useSmile from '../utils/useSmile';
-
-export interface FullbodyAvatarProps {
-  url: string;
-  sex: 'MALE' | 'FEMALE';
-  onLoaded?: () => void;
-  currentBaseAction: {
-    action: string;
-    weight: number;
-  };
-  additiveActions: {
-    [key: string]: {
-      weight: number;
-    };
-  };
-  timeScale: number;
-  loading?: boolean;
-  speaking?: boolean;
-}
-
-const AVATAR_POSITION = new Vector3(0, -1, 0);
-const AVATAR_ROTATION = new Euler(0.175, 0, 0);
-const ANIMATION_URLS = {
-  MALE: 'https://assets.memori.ai/api/v2/asset/5de7456f-0cd8-4e29-95a7-0cd0045a5325.glb',
-  FEMALE:
-    'https://assets.memori.ai/api/v2/asset/84487a2b-377c-4565-800a-51459d580ec8.glb',
-};
-
-export default function FullbodyAvatar({
-  url,
-  sex,
-  onLoaded,
-  currentBaseAction,
-  additiveActions,
-  timeScale
-}: FullbodyAvatarProps) {
-  const { scene } = useGLTF(url);
-  const { animations } = useGLTF(ANIMATION_URLS[sex]);
-  const { nodes, materials } = useGraph(scene);
-  const { actions } = useAnimations(animations, scene);
-  const [mixer] = useState(() => new AnimationMixer(scene));
-
-  useEffect(() => {
-    correctMaterials(materials);
-    onLoaded?.();
-
-    return () => {
-      Object.values(materials).forEach(dispose);
-      Object.values(nodes).filter(isSkinnedMesh).forEach(dispose);
-    };
-  }, [materials, nodes, url, onLoaded]);
-
-  useEffect(() => {
-    if (!actions || !currentBaseAction.action) return;
-
-    const newAction = actions[currentBaseAction.action];
-
-    if (!newAction) {
-      console.warn(
-        `Animation "${currentBaseAction.action}" not found in actions.`
-      );
-      return;
-    }
-
-    const fadeOutDuration = 0.8;
-    const fadeInDuration = 0.8;
-
-    newAction.timeScale = timeScale;
-    newAction.reset().fadeIn(fadeInDuration).play();
-
-    return () => {
-      newAction.fadeOut(fadeOutDuration);
-    };
-  }, [currentBaseAction, timeScale]);
-
-
-
-
-  // useEffect(() => {
-  //   if (speaking && actions['Talk 1'] && actions['Talk 2']) {
-  //     const talk1 = actions['Talk 1'].getClip();
-  //     const talk2 = actions['Talk 2'].getClip();
-  //     const talk = new AnimationClip(
-  //       'Talk',
-  //       talk1.duration + talk2.duration,
-  //     );
-  //     mixer.clipAction(talk, scene).play();
-  //   }
-  // }, [speaking]);
-
-  // Additive actions
-  useEyeBlink(additiveActions.blink.weight > 0, nodes);
-  useMouthSpeaking(additiveActions.speak.weight > 0, nodes);
-  useHeadMovement(additiveActions.headMovement.weight > 0, nodes);
-  useSmile(additiveActions.smile.weight > 0, nodes);
-
-  useFrame((_, delta) => {
-    mixer.update(delta * 0.001);
-  });
-
-  return (
-    <group position={AVATAR_POSITION} rotation={AVATAR_ROTATION}>
-      <primitive object={scene} />
-    </group>
-  );
-}

package/src/components/Avatar/AvatarView/components/halfbodyAvatar.tsx

@@ -1,69 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-import { Object3D, Vector3 } from 'three';
-import { useGLTF } from '@react-three/drei';
-import useEyeBlink from '../utils/useEyeBlink';
-import useHeadMovement from '../utils/useHeadMovement';
-import useMouthSpeaking from '../utils/useMouthSpeaking';
-import { dispose, useGraph } from '@react-three/fiber';
-import { correctMaterials, hideHands, isSkinnedMesh } from '../utils/utils';
-
-interface HalfBodyAvatarProps {
-  url: string;
-  eyeBlink?: boolean;
-  headMovement?: boolean;
-  speaking?: boolean;
-  onLoaded?: () => void;
-}
-
-const AVATAR_POSITION = new Vector3(0, -0.6, 0);
-
-export default function HalfBodyAvatar({
-  url,
-  eyeBlink,
-  headMovement,
-  speaking,
-  onLoaded,
-}: HalfBodyAvatarProps) {
-  const { scene } = useGLTF(url);
-  const { nodes, materials } = useGraph(scene);
-
-  useEyeBlink(eyeBlink, nodes);
-  useHeadMovement(headMovement, nodes);
-  useMouthSpeaking(!!speaking, nodes);
-
-  useEffect(() => {
-    const setupAvatar = () => {
-      hideHands(nodes);
-      correctMaterials(materials);
-      onLoaded?.();
-    };
-
-    setupAvatar();
-
-    return () => {
-      const disposeObjects = () => {
-        Object.values(materials).forEach(dispose);
-        Object.values(nodes).filter(isSkinnedMesh).forEach(dispose);
-      };
-
-      disposeObjects();
-    };
-  }, [materials, nodes, url, onLoaded]);
-
-  const skinnedMeshes = useMemo(
-    () => Object.values(nodes).filter(isSkinnedMesh),
-    [nodes]
-  );
-
-  return (
-    <group position={AVATAR_POSITION}>
-      {nodes.Hips && <primitive key="armature" object={nodes.Hips} />}
-      {skinnedMeshes.map(
-        (node: Object3D) =>
-          node && (
-            <primitive key={node.name} object={node} receiveShadow castShadow />
-          )
-      )}
-    </group>
-  );
-}

package/src/components/Avatar/AvatarView/utils/useMouthSpeaking.ts

@@ -1,87 +0,0 @@
-import { Nodes } from './utils';
-import { SkinnedMesh } from 'three';
-import { useEffect, useRef, useCallback } from 'react';
-import { useFrame } from '@react-three/fiber';
-
-interface MouthState {
-  moveTime: number;
-  mesh: SkinnedMesh | null;
-  morphIndices: {
-    open: number;
-    smile: number;
-    funner: number;
-    pucker: number;
-  };
-}
-
-const MOUTH_MOVE_DURATION = 2;
-const MOUTH_MOVE_INTERVAL_MIN = 100;
-const MOUTH_MOVE_INTERVAL_MAX = 500;
-
-export default function useMouthSpeaking(speaking: boolean | undefined, nodes: Nodes) {
-  const mouthStateRef = useRef<MouthState>({
-    moveTime: 999,
-    mesh: null,
-    morphIndices: { open: 0, smile: 0, funner: 0, pucker: 0 },
-  });
-
-  const setNextMouthMove = useCallback(() => {
-    mouthStateRef.current.moveTime = 0;
-    const nextMoveDelay = Math.random() * (MOUTH_MOVE_INTERVAL_MAX - MOUTH_MOVE_INTERVAL_MIN) + MOUTH_MOVE_INTERVAL_MIN;
-    setTimeout(setNextMouthMove, nextMoveDelay);
-  }, []);
-
-  useEffect(() => {
-    if (!speaking) return;
-
-    const mouthMesh = (nodes.Wolf3D_Head || nodes.Wolf3D_Avatar || nodes.Wolf3D_Avatar001) as SkinnedMesh;
-    mouthStateRef.current.mesh = mouthMesh;
-
-    if (mouthMesh?.morphTargetDictionary && mouthMesh?.morphTargetInfluences) {
-      mouthStateRef.current.morphIndices = {
-        open: mouthMesh.morphTargetDictionary.mouthOpen,
-        smile: mouthMesh.morphTargetDictionary.mouthSmile,
-        funner: mouthMesh.morphTargetDictionary.mouthFunner,
-        pucker: mouthMesh.morphTargetDictionary.mouthPucker,
-      };
-    }
-
-    const initialMoveDelay = setTimeout(setNextMouthMove, 200);
-
-    return () => {
-      clearTimeout(initialMoveDelay);
-    };
-  }, [nodes, speaking, setNextMouthMove]);
-
-  useFrame((_, delta) => {
-    const { moveTime, mesh, morphIndices } = mouthStateRef.current;
-
-    if (!speaking || !mesh?.morphTargetInfluences) {
-      resetMouthShape(mesh, morphIndices);
-      return;
-    }
-
-    if (moveTime < MOUTH_MOVE_DURATION) {
-      const value = Math.abs(Math.sin((moveTime * Math.PI) / 2));
-      mouthStateRef.current.moveTime += delta * 10;
-      updateMouthShape(mesh, morphIndices, value);
-    } else {
-      resetMouthShape(mesh, morphIndices);
-    }
-  });
-}
-
-function updateMouthShape(mesh: SkinnedMesh, morphIndices: MouthState['morphIndices'], value: number) {
-  mesh.morphTargetInfluences![morphIndices.open] = value / 3;
-  mesh.morphTargetInfluences![morphIndices.smile] = value / 10;
-  mesh.morphTargetInfluences![morphIndices.funner] = value / 7;
-  mesh.morphTargetInfluences![morphIndices.pucker] = value / 5;
-}
-
-function resetMouthShape(mesh: SkinnedMesh | null, morphIndices: MouthState['morphIndices']) {
-  if (!mesh?.morphTargetInfluences) return;
-  mesh.morphTargetInfluences[morphIndices.open] = 0;
-  mesh.morphTargetInfluences[morphIndices.smile] = 0;
-  mesh.morphTargetInfluences[morphIndices.funner] = 0;
-  mesh.morphTargetInfluences[morphIndices.pucker] = 0;
-}