@memori.ai/memori-react 7.5.1 → 7.6.0

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

@@ -1,23 +1,10 @@
 import { CSSProperties } from 'react';
 import React, { Suspense } from 'react';
-import FullbodyAvatar from './components/fullbodyAvatar';
 import { Canvas } from '@react-three/fiber';
 import { OrbitControls, SpotLight, Environment } from '@react-three/drei';
 import { isAndroid, isiOS } from '../../../helpers/utils';
-import { useState, useEffect } from 'react';
-import AnimationControlPanel from './components/controls';
-import HalfBodyAvatar from './components/halfbodyAvatar';
-import Loader from './components/loader';
-
-interface BaseAction {
-  weight: number;
-  action?: string;
-}
-
-interface AdditiveAction {
-  weight: number;
-  action?: string;
-}
+import {AvatarView} from './AvatarComponent/avatarComponent';
+import Loader from './AvatarComponent/components/loader';
 
 export interface Props {
   url: string;
@@ -33,24 +20,18 @@ export interface Props {
   loading?: boolean;
   animation?: string;
   showControls?: boolean;
+  isZoomed?: boolean;
+  chatEmission?: any;
+  setMeshRef?: any;
+  clearVisemes: () => void;
+  setEmotion: (emotion: string) => void;
 }
 
-const baseActions: Record<string, BaseAction> = {
-  Idle: { weight: 1 },
-  'Idle 1': { weight: 0 },
-  'Idle 2': { weight: 0 },
-  'Idle 3': { weight: 0 },
-  Loading: { weight: 0 },
-  Sad: { weight: 0 },
-  'Talk 1': { weight: 0 },
-  'Talk 2': { weight: 0 },
-  'Talk 3': { weight: 0 },
-};
-
 const defaultStyles = {
   halfBody: {
-    width: '250px',
-    height: '250px',
+    width: '100%',
+    height: '100%',
+    minHeight: '500px', // Ensure minimum height
     backgroundColor: 'white',
     borderRadius: '100%',
   },
@@ -62,12 +43,18 @@ const defaultStyles = {
 };
 
 /* Animation Control Panel */
-const getCameraSettings = (halfBody: boolean) =>
+const getCameraSettings = (halfBody: boolean, isZoomed?: boolean) =>
   halfBody
     ? {
         fov: 40,
         position: [0, 0, 0.6],
       }
+    : !halfBody && isZoomed
+    ? {
+        // Zoomed in
+        fov: 44,
+        position: [0, 0, 1.25],
+      }
     : { fov: 40, position: [0, 0.0000175, 3] };
 
 const getLightingComponent = () =>
@@ -82,137 +69,8 @@ const getLightingComponent = () =>
   ) : (
     <Environment files="https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/venice_sunset_1k.hdr" />
   );
+  
 
-const AvatarComponent = ({
-  animation,
-  loading,
-  halfBody,
-  ...props
-}: Props & {
-  halfBody: boolean;
-  currentBaseAction: {
-    action: string;
-    weight: number;
-  };
-  baseActions: Record<string, BaseAction>;
-  additiveActions: Record<string, AdditiveAction>;
-  timeScale: number;
-  loading?: boolean;
-  animation?: string;
-}) =>
-  halfBody ? <HalfBodyAvatar {...props} /> : <FullbodyAvatar {...props} />;
-
-const AvatarView = ({
-  showControls,
-  animation,
-  loading,
-  url,
-  sex,
-  eyeBlink,
-  headMovement,
-  speaking,
-  halfBody,
-}: Props & { halfBody: boolean }) => {
-  const [currentBaseAction, setCurrentBaseAction] = useState({
-    action: animation || 'Idle',
-    weight: 1,
-  });
-
-  const [additiveActions, setAdditiveActions] = useState({
-    smile: { weight: 0 },
-    blink: { weight: eyeBlink ? 1 : 0 },
-    speak: { weight: speaking ? 1 : 0 },
-    headMovement: { weight: headMovement ? 1 : 0 },
-  });
-
-  const [timeScale, setTimeScale] = useState(0.8);
-
-  function onBaseActionChange(action: string) {
-    setCurrentBaseAction({
-      action,
-      weight: 1,
-    });
-  }
-
-  function onAdditiveActionChange(action: string, weight: number) {
-    setAdditiveActions({
-      ...additiveActions,
-      [action]: { weight },
-    });
-  }
-
-  function modifyTimeScale(value: number) {
-    setTimeScale(value);
-  }
-
-  useEffect(() => {
-    // If loading and not speaking, set to loading animation
-    if (loading && currentBaseAction.action !== 'Loading' && !speaking) {
-      setCurrentBaseAction({
-        action: 'Loading',
-        weight: 1,
-      });
-      return;
-    }
-
-    // Otherwise, if speaking, set to random talking animation
-    if (speaking) {
-      const talkingAnimations = ['Talk 1', 'Talk 2', 'Talk 3'];
-      const randomIndex = Math.floor(Math.random() * talkingAnimations.length);
-      const randomTalkingAnimation = talkingAnimations[randomIndex];
-
-      setAdditiveActions({
-        ...additiveActions,
-        speak: { weight: 1 },
-      });
-
-      setCurrentBaseAction({
-        action: randomTalkingAnimation,
-        weight: 1,
-      });
-    } else if (!speaking && additiveActions.speak.weight !== 0) {
-      // Otherwise, if not speaking, set to idle
-      setAdditiveActions({
-        ...additiveActions,
-        speak: { weight: 0 },
-      });
-      setCurrentBaseAction({
-        action: 'Idle',
-        weight: 1,
-      });
-    }
-  }, [speaking, loading]);
-
-  return (
-    <>
-      {showControls && (
-        <AnimationControlPanel
-          timeScale={timeScale}
-          onBaseActionChange={onBaseActionChange}
-          onAdditiveActionChange={onAdditiveActionChange}
-          baseActions={baseActions}
-          additiveActions={additiveActions}
-          currentBaseAction={currentBaseAction}
-          modifyTimeScale={modifyTimeScale}
-        />
-      )}
-      <AvatarComponent
-        halfBody={halfBody}
-        url={url}
-        sex={sex}
-        eyeBlink={eyeBlink}
-        headMovement={headMovement}
-        speaking={speaking}
-        additiveActions={additiveActions}
-        baseActions={baseActions}
-        loading={loading || false}
-        currentBaseAction={currentBaseAction}
-        timeScale={timeScale}
-        animation={animation}
-      />
-    </>
-  );
-};
 
 export default function ContainerAvatarView({
   url,
@@ -228,27 +86,37 @@ export default function ContainerAvatarView({
   loading,
   animation,
   showControls = false,
+  isZoomed,
+  chatEmission,
+  setMeshRef,
+  clearVisemes,
+  setEmotion,
 }: Props) {
   return (
     <Canvas
       style={
         style || (halfBody ? defaultStyles.halfBody : defaultStyles.fullBody)
       }
-      camera={getCameraSettings(halfBody) as any}
+      camera={getCameraSettings(halfBody, isZoomed) as any}
     >
       <Suspense fallback={fallback || <Loader fallbackImg={fallbackImg} />}>
         {getLightingComponent()}
         {rotateAvatar && <OrbitControls enablePan={false} enableZoom={false} />}
         <AvatarView
-          halfBody={halfBody}
           url={url}
           sex={sex}
-          eyeBlink={eyeBlink}
-          headMovement={headMovement}
-          speaking={speaking}
-          loading={loading}
-          animation={animation}
           showControls={showControls}
+          loading={loading || false}
+          animation={animation}
+          isZoomed={isZoomed || false}
+          eyeBlink={eyeBlink || false}
+          headMovement={headMovement || false}
+          speaking={speaking || false}
+          halfBody={halfBody || false}
+          chatEmission={chatEmission}
+          setMeshRef={setMeshRef}
+          clearVisemes={clearVisemes}
+          setEmotion={setEmotion}
         />
       </Suspense>
     </Canvas>

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

@@ -1,59 +1,100 @@
-import { SkinnedMesh } from 'three';
-import { Nodes } from './utils';
-import { useEffect, useRef, useCallback } from 'react';
-import { useFrame } from '@react-three/fiber';
+import { useCallback, useEffect, useRef } from 'react';
 
-interface BlinkState {
-  blinkTime: number;
-  headMesh: SkinnedMesh | null;
-  morphIndex: number;
+interface BlinkConfig {
+  minInterval: number;
+  maxInterval: number;
+  blinkDuration: number;
 }
 
-const BLINK_DURATION = 2;
-const BLINK_INTERVAL_MIN = 2000;
-const BLINK_INTERVAL_MAX = 7000;
+const DEFAULT_BLINK_CONFIG: BlinkConfig = {
+  minInterval: 1000,    // Minimum time between blinks in milliseconds
+  maxInterval: 5000,    // Maximum time between blinks in milliseconds
+  blinkDuration: 150,   // Duration of a single blink in milliseconds
+};
 
-export default function useEyeBlink(enabled: boolean | undefined, nodes: Nodes) {
-  const blinkStateRef = useRef<BlinkState>({
-    blinkTime: 999,
-    headMesh: null,
-    morphIndex: 0,
-  });
+interface UseAvatarBlinkProps {
+  enabled: boolean;
+  setMorphTargetInfluences: (morphTargetInfluences: any) => void;
+  config?: Partial<BlinkConfig>;
+}
 
-  const setNextBlink = useCallback(() => {
-    blinkStateRef.current.blinkTime = 0;
-    const nextBlinkDelay = Math.random() * (BLINK_INTERVAL_MAX - BLINK_INTERVAL_MIN) + BLINK_INTERVAL_MIN;
-    setTimeout(setNextBlink, nextBlinkDelay);
-  }, []);
+export function useAvatarBlink({
+  enabled,
+  setMorphTargetInfluences,
+  config = {}
+}: UseAvatarBlinkProps) {
+  const blinkTimeoutRef = useRef<NodeJS.Timeout>();
+  const isBlinkingRef = useRef(false);
+  const lastBlinkTime = useRef(0);
+  
+  const blinkConfig = {
+    ...DEFAULT_BLINK_CONFIG,
+    ...config
+  };
+  
+  const blink = useCallback(() => {
+    if (!enabled || isBlinkingRef.current) return;
+    
+    isBlinkingRef.current = true;
+    // Close eyes
+    setMorphTargetInfluences((prev: any) => ({
+      ...prev,
+      eyesClosed: 1
+    }));
+    
+    // Open eyes after blinkDuration
+    setTimeout(() => {
+      setMorphTargetInfluences((prev: any) => ({
+        ...prev,
+        eyesClosed: 0
+      }));
+      isBlinkingRef.current = false;
+      lastBlinkTime.current = Date.now();
+      
+      // Schedule next blink
+      scheduleNextBlink();
+    }, blinkConfig.blinkDuration);
+  }, [enabled, blinkConfig.blinkDuration, setMorphTargetInfluences]);
+  
+  const scheduleNextBlink = useCallback(() => {
+    if (blinkTimeoutRef.current) {
+      clearTimeout(blinkTimeoutRef.current);
+    }
+    
+    // Randomize the next blink delay between min and max interval
+    const nextBlinkDelay = Math.random() * 
+      (blinkConfig.maxInterval - blinkConfig.minInterval) + 
+      blinkConfig.minInterval;
+    
+    blinkTimeoutRef.current = setTimeout(blink, nextBlinkDelay);
+  }, [blink, blinkConfig.maxInterval, blinkConfig.minInterval]);
 
+  // Handle enabled state changes
   useEffect(() => {
-    if (!enabled) return;
-
-    const headMesh = (nodes.Wolf3D_Head || nodes.Wolf3D_Avatar) as SkinnedMesh;
-    blinkStateRef.current.headMesh = headMesh;
-
-    if (headMesh?.morphTargetDictionary && headMesh?.morphTargetInfluences) {
-      blinkStateRef.current.morphIndex = headMesh.morphTargetDictionary.eyesClosed;
+    if (enabled) {
+      scheduleNextBlink();
+    } else {
+      if (blinkTimeoutRef.current) {
+        clearTimeout(blinkTimeoutRef.current);
+      }
+      // Reset eyes to open
+      setMorphTargetInfluences((prevInfluences: any) => ({
+        ...prevInfluences,
+        eyesClosed: 0
+      }));
     }
-
-    const initialBlinkDelay = setTimeout(setNextBlink, 3000);
-
+    
+    // Cleanup
     return () => {
-      clearTimeout(initialBlinkDelay);
+      if (blinkTimeoutRef.current) {
+        clearTimeout(blinkTimeoutRef.current);
+      }
     };
-  }, [nodes, enabled, setNextBlink]);
-
-  useFrame((_, delta) => {
-    if (!enabled) return;
-
-    const { blinkTime, headMesh, morphIndex } = blinkStateRef.current;
+  }, [enabled, scheduleNextBlink, setMorphTargetInfluences]);
 
-    if (blinkTime < BLINK_DURATION && headMesh?.morphTargetInfluences) {
-      const value = Math.abs(Math.sin((blinkTime * Math.PI) / 2));
-      blinkStateRef.current.blinkTime += delta * 10;
-      headMesh.morphTargetInfluences[morphIndex] = value;
-    } else if (headMesh?.morphTargetInfluences) {
-      headMesh.morphTargetInfluences[morphIndex] = 0;
-    }
-  });
-}
+  return {
+    isBlinking: isBlinkingRef.current,
+    lastBlinkTime: lastBlinkTime.current,
+    triggerBlink: blink
+  };
+}

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

@@ -0,0 +1,93 @@
+import React, { useRef } from 'react';
+import { SkinnedMesh } from 'three';
+
+const VISEME_SMOOTHING = 0.2;
+const VISEME_SPEED_FACTOR = 0.44;
+
+interface Viseme {
+  name: string;
+  duration: number;
+  weight: number;
+  startTime: number;
+}
+
+interface UseMouthAnimationProps {
+  currentVisemes: Viseme[];
+  avatarMeshRef: React.RefObject<SkinnedMesh>;
+}
+
+const lerp = (start: number, end: number, alpha: number): number => {
+  return start * (1 - alpha) + end * alpha;
+};
+
+export function useMouthAnimation({ currentVisemes, avatarMeshRef }: UseMouthAnimationProps) {
+  const visemeStartTimeRef = useRef(0);
+  const currentVisemeWeightRef = useRef<{ [key: string]: number }>({});
+
+  // Helper function to get current viseme information
+  const getCurrentVisemeInfo = (elapsedTime: number) => {
+    let currentVisemeIndex = 0;
+    let accumulatedDuration = 0;
+
+    while (
+      currentVisemeIndex < currentVisemes.length &&
+      accumulatedDuration <= elapsedTime
+    ) {
+      accumulatedDuration += currentVisemes[currentVisemeIndex].duration;
+      currentVisemeIndex++;
+    }
+
+    return { currentVisemeIndex, accumulatedDuration };
+  };
+
+  // Helper function to apply the current viseme
+  const applyCurrentViseme = (index: number, elapsedTime: number, accumulatedDuration: number) => {
+    const currentViseme = currentVisemes[index - 1];
+    const visemeProgress = (elapsedTime - (accumulatedDuration - currentViseme.duration)) / currentViseme.duration;
+    const targetWeight = Math.sin(visemeProgress * Math.PI) * currentViseme.weight;
+
+    // Smooth the transition between visemes
+    if (!currentVisemeWeightRef.current[currentViseme.name]) {
+      currentVisemeWeightRef.current[currentViseme.name] = 0;
+    }
+    currentVisemeWeightRef.current[currentViseme.name] = lerp(
+      currentVisemeWeightRef.current[currentViseme.name],
+      targetWeight,
+      VISEME_SMOOTHING
+    );
+
+    const visemeIndex = avatarMeshRef.current?.morphTargetDictionary?.[currentViseme.name];
+    if (typeof visemeIndex === 'number' && avatarMeshRef.current?.morphTargetInfluences) {
+      avatarMeshRef.current.morphTargetInfluences[visemeIndex] = currentVisemeWeightRef.current[currentViseme.name];
+    }
+  };
+
+  // Helper function to reset viseme animation
+  const resetVisemeAnimation = (currentTime: number) => {
+    visemeStartTimeRef.current = currentTime;
+    currentVisemeWeightRef.current = {};
+  };
+
+  // Main function to handle viseme-based mouth movement
+  const handleMouthMovement = (elapsedTime: number) => {
+    if (currentVisemes.length === 0) return;
+
+    const currentTime = elapsedTime * VISEME_SPEED_FACTOR;
+    const visemeElapsedTime = currentTime - visemeStartTimeRef.current;
+
+    const { currentVisemeIndex, accumulatedDuration } = getCurrentVisemeInfo(visemeElapsedTime);
+
+    if (currentVisemeIndex > 0) {
+      applyCurrentViseme(currentVisemeIndex, visemeElapsedTime, accumulatedDuration);
+    }
+
+    // Reset viseme animation if we've reached the end
+    if (visemeElapsedTime > accumulatedDuration) {
+      resetVisemeAnimation(currentTime);
+    }
+  };
+
+  return {
+    handleMouthMovement,
+  };
+}

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

@@ -17,7 +17,7 @@ export default function useSmile(smiling: boolean | undefined, nodes: Nodes) {
   });
 
   useEffect(() => {
-    const headMesh = (nodes.Wolf3D_Head || nodes.Wolf3D_Avatar || nodes.Wolf3D_Avatar001) as SkinnedMesh;
+    const headMesh = (nodes.Wolf3D_Head || nodes.Wolf3D_Avatar020 || nodes.Wolf3D_Avatar001) as SkinnedMesh;
     smileStateRef.current.headMesh = headMesh;
 
     if (headMesh?.morphTargetDictionary && headMesh?.morphTargetInfluences) {

package/src/components/ChatBubble/ChatBubble.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useState } from 'react';
 import cx from 'classnames';
 import {
   ExpertReference,
@@ -18,13 +18,12 @@ import FeedbackButtons from '../FeedbackButtons/FeedbackButtons';
 import { useTranslation } from 'react-i18next';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
-import { cleanUrl } from '../../helpers/utils';
 import Button from '../ui/Button';
 import QuestionHelp from '../icons/QuestionHelp';
 import Copy from '../icons/Copy';
 import Code from '../icons/Code';
 import WhyThisAnswer from '../WhyThisAnswer/WhyThisAnswer';
-import { stripEmojis, escapeHTML, stripMarkdown } from '../../helpers/utils';
+import { cleanUrl, stripHTML, stripOutputTags } from '../../helpers/utils';
 
 import markedLinkifyIt from 'marked-linkify-it';
 import markedKatex from 'marked-katex-extension';
@@ -149,7 +148,7 @@ const ChatBubble: React.FC<Props> = ({
 
   const plainText = message.fromUser
     ? text
-    : escapeHTML(stripMarkdown(stripEmojis(text)));
+    : stripHTML(stripOutputTags(renderedText));
 
   useLayoutEffect(() => {
     if (typeof window !== 'undefined' && !message.fromUser) {

package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx

@@ -22,7 +22,6 @@ const initProviderStatus = (
   statusPage: string;
 } => {
   switch (provider) {
-    case 'DEFAULT':
     case 'OpenAI':
       return {
         getStatus: async () => {
@@ -37,6 +36,34 @@ const initProviderStatus = (
         },
         statusPage: 'https://status.openai.com/',
       };
+    case 'Mistral':
+      return {
+        getStatus: async () => {
+          const res = await fetch(
+            'https://status.mistral-data.com/api/v2/summary.json'
+          );
+          const data = await res.json();
+          const status = data.components.find(
+            (component: { name: string }) => component.name === 'API'
+          )?.status as Status;
+          return status ?? 'operational';
+        },
+        statusPage: 'https://status.mistral-data.com/',
+      };
+    case 'Anthropic':
+      return {
+        getStatus: async () => {
+          const res = await fetch(
+            'https://status.anthropic.com/api/v2/summary.json'
+          );
+          const data = await res.json();
+          const status = data.components.find(
+            (component: { name: string }) => component.name === 'API'
+          )?.status as Status;
+          return status ?? 'operational';
+        },
+        statusPage: 'https://status.anthropic.com/',
+      };
     default:
       return {
         getStatus: async () => 'operational',
@@ -45,7 +72,10 @@ const initProviderStatus = (
   }
 };
 
-const CompletionProviderStatus = ({ forceStatus, provider }: Props) => {
+const CompletionProviderStatus = ({
+  forceStatus,
+  provider = 'OpenAI',
+}: Props) => {
   const { t } = useTranslation();
   const [status, setStatus] = useState<Status>(forceStatus ?? 'operational');
 
@@ -58,7 +88,7 @@ const CompletionProviderStatus = ({ forceStatus, provider }: Props) => {
       .getStatus()
       .then(status => setStatus(status))
       .catch(console.log);
-  }, [forceStatus, provider]);
+  }, [forceStatus, providerStatus]);
 
   return status !== 'operational' ? (
     <Tooltip

package/src/components/CompletionProviderStatus/__snapshots__/CompletionProviderStatus.test.tsx.snap

@@ -12,6 +12,15 @@ exports[`renders CompletionProviderStatus errored unchanged 1`] = `
         <p>
           completionProviderDown
         </p>
+        <p>
+          <a
+            href="https://status.openai.com/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            completionProviderCheckStatusPage
+          </a>
+        </p>
       </div>
     </div>
     <div
@@ -89,6 +98,15 @@ exports[`renders CompletionProviderStatus unchanged 1`] = `
         <p>
           completionProviderDown
         </p>
+        <p>
+          <a
+            href="https://status.openai.com/"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            completionProviderCheckStatusPage
+          </a>
+        </p>
       </div>
     </div>
     <div