@memori.ai/memori-react 7.11.4 → 7.12.0

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

@@ -1,7 +1,10 @@
 import { SkinnedMesh } from 'three';
 import { MathUtils } from 'three';
-import { EMOTION_SMOOTHING, VISEME_SMOOTHING, BLINK_CONFIG } from './constants';
+import { EMOTION_SMOOTHING, VISEME_SMOOTHING, BLINK_CONFIG } from '../constants';
 
+/**
+ * Controller class for handling morph target animations including emotions, visemes and blinking
+ */
 export class MorphTargetController {
   private headMesh: SkinnedMesh;
   private currentEmotionValues: Record<string, number> = {};
@@ -10,7 +13,9 @@ export class MorphTargetController {
   constructor(headMesh: SkinnedMesh) {
     this.headMesh = headMesh;
   }
-
+  /**
+   * Updates the morph target influences for emotions, visemes and blinking
+   */
   updateMorphTargets(
     currentTime: number,
     emotionMorphTargets: Record<string, number>,
@@ -23,57 +28,64 @@ export class MorphTargetController {
       blinkStartTime: number;
     }
   ) {
+    // Validate required mesh properties exist
     if (
       !this.headMesh.morphTargetDictionary ||
       !this.headMesh.morphTargetInfluences
     ) {
+      console.error('[MorphTargetController] Missing morphTargetDictionary or morphTargetInfluences');
       return;
     }
 
+    // Calculate blink value for this frame
     const blinkValue = this.calculateBlinkValue(
       currentTime,
       blinkState,
       eyeBlink
     );
+    
     const currentEmotionKeys = new Set(Object.keys(emotionMorphTargets));
 
+    // Process each morph target
     Object.entries(this.headMesh.morphTargetDictionary).forEach(
       ([key, index]) => {
         if (typeof index !== 'number') return;
 
         let targetValue = 0;
 
-        // Handle emotion morphs
+        // Handle emotion morphs with smoothing
         if (currentEmotionKeys.has(key)) {
           const targetEmotionValue = emotionMorphTargets[key];
           const currentEmotionValue = this.currentEmotionValues[key] || 0;
           const newEmotionValue = MathUtils.lerp(
             currentEmotionValue,
-            targetEmotionValue * 2.5,
+            targetEmotionValue * 3, // Amplify emotion by 3x
             EMOTION_SMOOTHING
           );
+          console.log(`[MorphTargetController] Emotion ${key}: current=${currentEmotionValue}, target=${targetEmotionValue}, new=${newEmotionValue}`);
           this.currentEmotionValues[key] = newEmotionValue;
           targetValue += newEmotionValue;
         }
 
-        // Handle viseme
+        // Add viseme influence if active
         if (currentViseme && key === currentViseme.name) {
           targetValue += currentViseme.weight;
         }
 
-        // Handle blinking
+        // Add blink influence if active
         if (key === 'eyesClosed' && eyeBlink) {
           targetValue += blinkValue;
         }
 
-        // Apply final value
+        // Clamp and smooth final value
         targetValue = MathUtils.clamp(targetValue, 0, 1);
         if (this.headMesh.morphTargetInfluences) {
-          this.headMesh.morphTargetInfluences[index] = MathUtils.lerp(
+          const finalValue = MathUtils.lerp(
             this.headMesh.morphTargetInfluences[index] || 0,
             targetValue,
             VISEME_SMOOTHING
           );
+          this.headMesh.morphTargetInfluences[index] = finalValue;
         }
       }
     );
@@ -81,6 +93,9 @@ export class MorphTargetController {
     this.previousEmotionKeys = currentEmotionKeys;
   }
 
+  /**
+   * Calculates the blink value based on timing and state
+   */
   private calculateBlinkValue(
     currentTime: number,
     blinkState: {
@@ -95,6 +110,7 @@ export class MorphTargetController {
 
     let blinkValue = 0;
 
+    // Start new blink if it's time
     if (currentTime >= blinkState.nextBlinkTime && !blinkState.isBlinking) {
       blinkState.isBlinking = true;
       blinkState.blinkStartTime = currentTime;
@@ -105,14 +121,21 @@ export class MorphTargetController {
         BLINK_CONFIG.minInterval;
     }
 
+    // Calculate blink animation progress
     if (blinkState.isBlinking) {
       const blinkProgress =
         (currentTime - blinkState.blinkStartTime) / BLINK_CONFIG.blinkDuration;
+      
+      // First half of blink - closing eyes
       if (blinkProgress <= 0.5) {
         blinkValue = blinkProgress * 2;
-      } else if (blinkProgress <= 1) {
+      } 
+      // Second half of blink - opening eyes
+      else if (blinkProgress <= 1) {
         blinkValue = 2 - blinkProgress * 2;
-      } else {
+      } 
+      // Blink complete
+      else {
         blinkState.isBlinking = false;
         blinkValue = 0;
       }

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

@@ -1,5 +1,5 @@
 import { Vector3, MathUtils } from 'three';
-import { AVATAR_POSITION, AVATAR_POSITION_ZOOMED } from './constants';
+import { AVATAR_POSITION, AVATAR_POSITION_ZOOMED } from '../constants';
 
 export class AvatarPositionController {
   private currentScale: Vector3;

package/src/components/Avatar/AvatarView/AvatarComponent/components/controls.tsx

@@ -13,7 +13,7 @@ interface AdditiveAction {
 
 export interface AnimationControlPanelProps {
   baseActions: Record<string, BaseAction>;
-  onBaseActionChange: (action: string) => void;
+  onBaseActionChange: (action: string, outputContent: string) => void;
   currentBaseAction: {
     action: string;
     weight: number;
@@ -54,7 +54,7 @@ const AnimationControlPanel: React.FC<AnimationControlPanelProps> = ({
     baseNames.forEach(name => {
       const settings = baseActions[name];
       panelSettingsRef.current[name] = () => {
-        onBaseActionChange(name);
+        onBaseActionChange(name, '');
       };
 
       const control = folder1.add(panelSettingsRef.current, name);

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

@@ -9,7 +9,7 @@ import {
   AVATAR_POSITION,
   SCALE_LERP_FACTOR,
   AVATAR_POSITION_ZOOMED,
-} from './constants';
+} from '../constants';
 import { hideHands } from '../../utils/utils';
 import useHeadMovement from '../../utils/useHeadMovement';
 

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

@@ -0,0 +1,127 @@
+import { Vector3, Euler } from 'three';
+import { AnimationConfig } from './components/FullbodyAvatar/types';
+
+// Position and rotation of the avatar
+export const AVATAR_POSITION = new Vector3(0, -1, 0);
+export const AVATAR_ROTATION = new Euler(0.175, 0, 0);
+export const AVATAR_POSITION_ZOOMED = new Vector3(0, -1.45, 0);
+
+// Factor for lerping the scale of the avatar
+export const SCALE_LERP_FACTOR = 0.1;
+
+// Maximum number of idle loops before forcing change
+export const MAX_IDLE_LOOPS_DEFAULT = 5;
+
+
+interface BaseAction {
+  weight: number;
+  action?: string;
+}
+
+// Base animations for the avatar
+export const BASE_ACTIONS: Record<string, BaseAction> = {
+  Gioia1: { weight: 0 },
+  Gioia2: { weight: 0 },
+  Gioia3: { weight: 0 },
+  Idle1: { weight: 1 },
+  Idle2: { weight: 0 },
+  Idle3: { weight: 0 },
+  Idle4: { weight: 0 },
+  Idle5: { weight: 0 },
+  Rabbia1: { weight: 0 },
+  Rabbia2: { weight: 0 },
+  Rabbia3: { weight: 0 },
+  Sorpresa1: { weight: 0 },
+  Sorpresa2: { weight: 0 },
+  Sorpresa3: { weight: 0 },
+  Timore1: { weight: 0 },
+  Timore2: { weight: 0 },
+  Timore3: { weight: 0 },
+  Tristezza1: { weight: 0 },
+  Tristezza2: { weight: 0 },
+  Tristezza3: { weight: 0 },
+  Loading1: { weight: 0 },
+  Loading2: { weight: 0 },
+  Loading3: { weight: 0 },
+};
+
+// Mapping of emotions from Italian to English
+export const MAPPING_EMOTIONS_ITALIAN_TO_ENGLISH = {
+  Gioia: 'Joy',
+  Rabbia: 'Anger',
+  Sorpresa: 'Surprise',
+  Tristezza: 'Sadness',
+  Timore: 'Fear',
+};
+
+// Mapping of blend shapes to emotions
+export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM = {
+  Rabbia: {
+    'browDownLeft': 0.5,
+    'browDownRight': 0.5,
+    'browOuterUpLeft': 0.5,
+    'browOuterUpRight': 0.5,
+    'mouthSmile': -0.2,
+  },
+  Timore: {
+    'browOuterUpLeft': -0.5,
+    'browOuterUpRight': -0.5,
+    'eyeWideLeft': -0.5,
+    'eyeWideRight': -0.5,
+  },
+  Tristezza: {
+    'browDownLeft': -0.5,
+    'browDownRight': -0.5,
+    'eyeSquintLeft': 0.5,
+    'eyeSquintRight': 0.5,
+    'mouthSmile': -0.6,
+  },
+  Sorpresa: {
+    'browInnerUp': 0.5,
+    'browOuterUpLeft': 0.5,
+    'browOuterUpRight': 0.5,
+    'eyeWideLeft': 0.5,
+    'eyeWideRight': 0.5,
+  },
+  Gioia: {
+    'browDownLeft': 0.5,
+    'browDownRight': 0.5,
+    'browInnerUp': 0.5,
+    'mouthSmile': 0.8,
+  },
+};
+
+// Mapping of blend shapes to emotions for custom GLB
+export const MAPPING_BLEND_SHAPE_TO_EMOTION_CUSTOM_GLB = {
+  Gioia: 'Joy',
+  Rabbia: 'Anger',
+  Sorpresa: 'Surprise',
+  Tristezza: 'Sadness',
+  Timore: 'Fear',
+};
+
+// URL for the male avatar
+export const ANIMATION_URLS = {
+  MALE: 'https://assets.memori.ai/api/v2/asset/2c5e88a4-cf62-408b-9ef0-518b099dfcb2.glb',
+  FEMALE:
+    'https://assets.memori.ai/api/v2/asset/2adc934b-24b2-45bd-94ad-ffec58d3cb32.glb',
+};
+
+// Blink configuration
+export const BLINK_CONFIG = {
+  minInterval: 1000,
+  maxInterval: 5000,
+  blinkDuration: 150,
+};
+
+// Default animation configuration
+export const DEFAULT_CONFIG: AnimationConfig = {
+  fadeInDuration: 0.8,
+  fadeOutDuration: 0.8,
+  idleCount: 5,
+  timeScale: 1.0,
+};
+
+// Smoothing factors for emotion and viseme morphs
+export const EMOTION_SMOOTHING = 0.3;
+export const VISEME_SMOOTHING = 0.5;

package/src/components/Chat/Chat.tsx

@@ -38,6 +38,7 @@ export interface Props {
   pushMessage: (message: Message) => void;
   simulateUserPrompt: (text: string, translatedText?: string) => void;
   showDates?: boolean;
+  showUpload?: boolean;
   showContextPerLine?: boolean;
   showAIicon?: boolean;
   showTranslationOriginal?: boolean;
@@ -56,7 +57,16 @@ export interface Props {
   showMicrophone?: boolean;
   userMessage?: string;
   onChangeUserMessage: (userMessage: string) => void;
-  sendMessage: (msg: string) => void;
+  sendMessage: (
+    msg: string,
+    media?: {
+      mediumID: string;
+      mimeType: string;
+      content: string;
+      title?: string;
+      properties?: { [key: string]: any };
+    }
+  ) => void;
   listening?: boolean;
   setEnableFocusChatInput: (enableFocusChatInput: boolean) => void;
   isPlayingAudio?: boolean;
@@ -115,6 +125,7 @@ const Chat: React.FC<Props> = ({
   customMediaRenderer,
   user,
   userAvatar,
+  showUpload = false,
   experts,
   useMathFormatting = false,
 }) => {
@@ -162,14 +173,6 @@ const Chat: React.FC<Props> = ({
       scrollToBottom();
     }
   };
-  const onTextareaPressEnter = () => {
-    if (sendOnEnter === 'keypress' && userMessage?.length > 0) {
-      stopListening();
-      sendMessage(userMessage);
-      onChangeUserMessage('');
-      resetTranscript();
-    }
-  };
 
   return (
     <div
@@ -233,6 +236,7 @@ const Chat: React.FC<Props> = ({
                 showCopyButton={showCopyButton}
                 useMathFormatting={useMathFormatting}
               />
+
               {showDates && !!message.timestamp && (
                 <small
                   className={`memori-chat--timestamp ${
@@ -252,6 +256,7 @@ const Chat: React.FC<Props> = ({
                   )}
                 </small>
               )}
+
               {showContextPerLine &&
                 !!Object.keys(message.contextVars ?? {}).length && (
                   <div className="memori-chat--context-vars">
@@ -363,6 +368,7 @@ const Chat: React.FC<Props> = ({
 
       {showInputs && (
         <ChatInputs
+          resetTranscript={resetTranscript}
           userMessage={userMessage}
           onChangeUserMessage={onChangeUserMessage}
           dialogState={dialogState}
@@ -372,9 +378,9 @@ const Chat: React.FC<Props> = ({
           microphoneMode={microphoneMode}
           sendOnEnter={sendOnEnter}
           setSendOnEnter={setSendOnEnter}
+          showUpload={showUpload}
           attachmentsMenuOpen={attachmentsMenuOpen}
           setAttachmentsMenuOpen={setAttachmentsMenuOpen}
-          onTextareaPressEnter={onTextareaPressEnter}
           onTextareaFocus={onTextareaFocus}
           onTextareaBlur={onTextareaBlur}
           startListening={startListening}

package/src/components/ChatBubble/ChatBubble.tsx

@@ -24,12 +24,12 @@ import Copy from '../icons/Copy';
 import Code from '../icons/Code';
 import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
 import { cleanUrl, stripHTML, stripOutputTags } from '../../helpers/utils';
+import FilePreview from '../FilePreview/FilePreview';
 
 import markedLinkifyIt from 'marked-linkify-it';
 import markedKatex from 'marked-katex-extension';
 import markedExtendedTables from '../../helpers/markedExtendedTables';
 
-
 marked.use({
   async: false,
   gfm: true,
@@ -245,7 +245,9 @@ const ChatBubble: React.FC<Props> = ({
                 !!message.emitter?.length &&
                 !!memori.enableBoardOfExperts &&
                 experts?.find(e => e.name === message.emitter)
-                  ? `${apiUrl}/api/v1/memoriai/memori/avatar/${
+                  ? `${
+                      new URL(apiUrl ?? '/').origin
+                    }/api/v1/memoriai/memori/avatar/${
                       experts.find(e => e.name === message.emitter)
                         ?.expertMemoriID
                     }`
@@ -265,6 +267,7 @@ const ChatBubble: React.FC<Props> = ({
                     })
               }
               onError={e => {
+                // Fallback image handling if primary source fails
                 e.currentTarget.src =
                   memori.avatarURL && memori.avatarURL.length > 0
                     ? getResourceUrl({
@@ -284,6 +287,7 @@ const ChatBubble: React.FC<Props> = ({
             />
           </Transition.Child>
         )}
+
         <Transition.Child
           as="div"
           className={cx('memori-chat--bubble', {
@@ -311,6 +315,7 @@ const ChatBubble: React.FC<Props> = ({
             className="memori-chat--bubble-content"
             dangerouslySetInnerHTML={{ __html: renderedText }}
           />
+
           {((!message.fromUser && showCopyButton) ||
             (message.generatedByAI && showAIicon) ||
             (showFeedback && simulateUserPrompt)) && (
@@ -325,6 +330,7 @@ const ChatBubble: React.FC<Props> = ({
                   onClick={() => navigator.clipboard.writeText(plainText)}
                 />
               )}
+
               {!message.fromUser &&
                 showCopyButton &&
                 plainText !== message.text && (
@@ -401,6 +407,21 @@ const ChatBubble: React.FC<Props> = ({
                 )}
             </div>
           )}
+
+          {message.fromUser &&
+            message.media?.length &&
+            message.media[0].properties?.isAttachedFile && (
+              <FilePreview
+                previewFiles={message.media.map(m => ({
+                  name: m.title ?? '',
+                  id: m.mediumID,
+                  content: m.content ?? '',
+                }))}
+                removeFile={() => {}}
+                allowRemove={false}
+                isMessagePreview={true}
+              />
+            )}
         </Transition.Child>
 
         {message.fromUser && (

package/src/components/ChatInputs/ChatInputs.stories.tsx

@@ -227,6 +227,11 @@ ContinuousSpeechListening.args = {
   microphoneMode: 'CONTINUOUS',
 };
 
+export const WithUploadButton = Template.bind({});
+WithUploadButton.args = {
+  showUpload: true,
+};
+
 export const WithoutMicrophone = Template.bind({});
 WithoutMicrophone.args = {
   dialogState,

package/src/components/ChatInputs/ChatInputs.test.tsx

@@ -10,7 +10,6 @@ it('renders ChatInputs unchanged', () => {
       userMessage=""
       onChangeUserMessage={jest.fn()}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -20,6 +19,7 @@ it('renders ChatInputs unchanged', () => {
       stopAudio={jest.fn()}
       startListening={jest.fn()}
       stopListening={jest.fn()}
+      resetTranscript={jest.fn()}
       showMicrophone={true}
     />
   );
@@ -33,7 +33,6 @@ it('renders ChatInputs with user message unchanged', () => {
       onChangeUserMessage={jest.fn()}
       dialogState={dialogState}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -43,6 +42,7 @@ it('renders ChatInputs with user message unchanged', () => {
       stopAudio={jest.fn()}
       startListening={jest.fn()}
       stopListening={jest.fn()}
+      resetTranscript={jest.fn()}
       showMicrophone={true}
     />
   );
@@ -59,7 +59,6 @@ it('renders ChatInputs on instruct unchanged', () => {
         acceptsMedia: true,
       }}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -70,6 +69,7 @@ it('renders ChatInputs on instruct unchanged', () => {
       stopAudio={jest.fn()}
       startListening={jest.fn()}
       stopListening={jest.fn()}
+      resetTranscript={jest.fn()}
       showMicrophone={true}
     />
   );
@@ -83,7 +83,6 @@ it('renders ChatInputs listening unchanged', () => {
       onChangeUserMessage={jest.fn()}
       dialogState={dialogState}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -93,6 +92,7 @@ it('renders ChatInputs listening unchanged', () => {
       stopAudio={jest.fn()}
       startListening={jest.fn()}
       stopListening={jest.fn()}
+      resetTranscript={jest.fn()}
       showMicrophone={true}
     />
   );
@@ -106,7 +106,6 @@ it('renders ChatInputs without microphone button unchanged', () => {
       onChangeUserMessage={jest.fn()}
       dialogState={dialogState}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -116,6 +115,7 @@ it('renders ChatInputs without microphone button unchanged', () => {
       stopAudio={jest.fn()}
       startListening={jest.fn()}
       stopListening={jest.fn()}
+      resetTranscript={jest.fn()}
       showMicrophone={false}
     />
   );
@@ -132,7 +132,6 @@ it('renders ChatInputs disabled unchanged', () => {
         state: 'X3',
       }}
       sendMessage={jest.fn()}
-      onTextareaPressEnter={jest.fn()}
       onTextareaFocus={jest.fn()}
       onTextareaBlur={jest.fn()}
       setAttachmentsMenuOpen={jest.fn()}
@@ -142,6 +141,7 @@ it('renders ChatInputs disabled unchanged', () => {
       stopAudio={jest.fn()}
       startListening={jest.fn()}
       stopListening={jest.fn()}
+      resetTranscript={jest.fn()}
       showMicrophone={true}
     />
   );