@memori.ai/memori-react 7.16.1 → 7.17.0

package/src/components/ui/Slider.css

@@ -2,10 +2,11 @@
   position: relative;
   width: 100%;
   max-width: 100%;
-  padding: 16px 12px; /* Increased padding for better touch area */
+  padding: 12px 12px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   touch-action: none;
   user-select: none;
+
 }
 
 .memori--slider-disabled {
@@ -14,27 +15,26 @@
 }
 
 .memori--slider-header {
-  position: absolute; /* Changed from absolute for better layout */
-  top: 0;
+  position: absolute;
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 8px;
+  margin-bottom: 16px;
+  /* max-height: 10px; */
 }
 
 .memori--slider-label {
-  max-width: 100%;
-  color: #333;
-  font-size: 1.4rem; /* Larger font for kiosk display */
+  max-width: 70%;
+  font-size: 1.2rem;
   font-weight: 500;
+  line-height: 1.2;
 }
 
 .memori--slider-value {
-  min-width: 50px; /* Increased for larger numbers */
-  max-width: 100%;
-  color: #666;
-  font-size: 1.2rem; /* Larger font */
+  min-width: 40px;
+  max-width: 30%;
+  font-size: 1rem;
   font-weight: 500;
   text-align: right;
 }
@@ -42,9 +42,10 @@
 .memori--slider-track-container {
   position: relative;
   display: flex;
-  height: 64px; /* Increased height for better touch area */
-  max-height: 64px;
+  height: 96px;
+  max-height: 96px;
   align-items: center;
+  margin-top: 8px;
   cursor: pointer;
   touch-action: none;
 }
@@ -53,9 +54,9 @@
   position: absolute;
   overflow: hidden;
   width: 100%;
-  height: 12px; /* Thicker track */
-  max-height: 12px;
-  border-radius: 6px;
+  height: 16px;
+  max-height: 16px;
+  border-radius: 8px;
   background-color: #e5e5e5;
 }
 
@@ -63,7 +64,7 @@
   position: absolute;
   width: var(--percentage);
   height: 100%;
-  border-radius: 6px;
+  border-radius: 8px;
   background-color: var(--memori-primary, #2563eb);
   transition: width 0.15s ease;
 }
@@ -73,40 +74,42 @@
   display: flex;
   width: 100%;
   justify-content: space-between;
-  padding: 0 4px;
-  padding-top: 20px; /* Increased spacing */
+  padding: 0 8px;
+  padding-top: 24px;
   pointer-events: none;
 }
 
 .memori--slider-mark {
   display: flex;
+  min-width: 40px;
   flex-direction: column;
   align-items: center;
 }
 
 .memori--slider-mark-line {
-  width: 3px; /* Thicker marks */
-  height: 6px;
-  max-height: 6px;
-  margin-bottom: 6px;
+  width: 3px;
+  height: 8px;
+  max-height: 8px;
+  margin-bottom: 8px;
   background-color: #9ca3af;
 }
 
 .memori--slider-mark-value {
   color: #666;
-  font-size: 1rem; /* Larger font */
+  font-size: 1rem;
   font-weight: 500;
+  white-space: nowrap;
 }
 
 .memori--slider-thumb {
   position: absolute;
   z-index: 1;
   left: var(--percentage);
-  width: 36px; /* Larger thumb */
-  max-width: 36px;
-  height: 36px;
-  max-height: 36px;
-  border: 3px solid var(--memori-primary, #2563eb);
+  width: 40px;
+  max-width: 40px;
+  height: 40px;
+  max-height: 40px;
+  border: 4px solid var(--memori-primary, #2563eb);
   border-radius: 50%;
   background-color: white;
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -118,40 +121,46 @@
 .memori--slider-thumb:hover,
 .memori--slider-thumb:active {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
-  transform: translateX(-50%) scale(1.15);
+  transform: translateX(-50%) scale(1.1);
 }
 
 /* Portrait/Totem specific styles */
 @media screen and (max-aspect-ratio: 3/4) {
   .memori--slider-container {
-    padding: 28px 16px;
+    padding: 16px;
+  }
+
+  .memori--slider-header {
+    margin-bottom: 16px;
   }
 
   .memori--slider-label {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
   }
 
   .memori--slider-value {
-    min-width: 60px;
-    font-size: 1.3rem;
+    min-width: 50px;
+    font-size: 1.1rem;
   }
 
   .memori--slider-track-container {
-    height: 72px;
+    height: 80px;
+    margin-top: 8px;
   }
 
   .memori--slider-track {
-    height: 14px;
-    border-radius: 7px;
+    height: 16px;
+    border-radius: 10px;
   }
 
   .memori--slider-thumb {
-    width: 44px;
-    height: 44px;
+    width: 48px;
+    height: 48px;
     border-width: 4px;
   }
 
   .memori--slider-mark-value {
+    margin-top: 4px;
     font-size: 1.1rem;
   }
 }
@@ -159,19 +168,25 @@
 /* Very tall displays */
 @media screen and (min-height: 1200px) {
   .memori--slider-container {
-    padding: 32px 20px;
+    padding: 24px 20px;
+  }
+
+  .memori--slider-header {
+    margin-bottom: 24px;
   }
 
   .memori--slider-label {
-    font-size: 1.6rem;
+    font-size: 1.4rem;
   }
 
   .memori--slider-track-container {
-    height: 80px;
+    height: 96px;
+    margin-top: 12px;
   }
 
   .memori--slider-thumb {
-    width: 48px;
-    height: 48px;
+    width: 56px;
+    height: 56px;
+    border-width: 5px;
   }
 }

package/src/context/visemeContext.tsx

@@ -59,7 +59,7 @@ const CONSTANTS = {
   // Slightly longer to ensure smoother transitions
   // Average syllable duration in natural speech is ~0.2s
   // We want shorter duration for more precise lip movements
-  DEFAULT_VISEME_DURATION: 0.1, // 100ms per viseme
+  DEFAULT_VISEME_DURATION: 0.12, // 120ms per viseme
 
   // Overlap between consecutive visemes
   // Increased for smoother blending between mouth shapes
@@ -80,7 +80,7 @@ const CONSTANTS = {
   // Time to preload/buffer visemes (in seconds)
   // Reduced from 1s to 0.5s as we don't need such a large buffer
   // Half a second is enough to prepare upcoming visemes
-  PRELOAD: 0.5,
+  PRELOAD: 0.2,
 
   // Weight multiplication factor for emphasis
   // Can be adjusted to make lip movements more or less pronounced

package/src/index.tsx

@@ -61,7 +61,6 @@ export interface Props {
   enableAudio?: boolean;
   defaultSpeakerActive?: boolean;
   disableTextEnteredEvents?: boolean;
-  AZURE_COGNITIVE_SERVICES_TTS_KEY?: string;
   onStateChange?: (state?: DialogState) => void;
   additionalInfo?: WidgetProps['additionalInfo'];
   customMediaRenderer?: WidgetProps['customMediaRenderer'];
@@ -134,7 +133,6 @@ const Memori: React.FC<Props> = ({
   spokenLang,
   multilingual,
   authToken,
-  AZURE_COGNITIVE_SERVICES_TTS_KEY,
   enableAudio,
   defaultSpeakerActive = true,
   disableTextEnteredEvents = false,
@@ -149,9 +147,7 @@ const Memori: React.FC<Props> = ({
 }) => {
   const [memori, setMemori] = useState<IMemori>();
   const [tenant, setTenant] = useState<Tenant>();
-  const [speechKey, setSpeechKey] = useState<string | undefined>(
-    AZURE_COGNITIVE_SERVICES_TTS_KEY
-  );
+  const [speechKey, setSpeechKey] = useState<string | undefined>();
   const { t } = useTranslation();
 
   if (!((memoriID && ownerUserID) || (memoriName && ownerUserName))) {
@@ -166,18 +162,22 @@ const Memori: React.FC<Props> = ({
     const url =
       baseURL ||
       (tenantID.startsWith('https://') ? tenantID : `https://${tenantID}`);
-    const result = await fetch(`${url}/api/speechkey`);
-    const data = await result.json();
+    try {
+      const result = await fetch(`${url}/api/speechkey`);
+      const data = await result.json();
 
-    if (data.AZURE_COGNITIVE_SERVICES_TTS_KEY) {
-      setSpeechKey(data.AZURE_COGNITIVE_SERVICES_TTS_KEY);
+      if (data.AZURE_COGNITIVE_SERVICES_TTS_KEY) {
+        setSpeechKey(data.AZURE_COGNITIVE_SERVICES_TTS_KEY);
+      } else {
+        console.log('AZURE_COGNITIVE_SERVICES_TTS_KEY not found');
+      }
+    } catch (error) {
+      console.error('Error fetching speech key', error);
     }
   }, []);
   useEffect(() => {
-    if (!AZURE_COGNITIVE_SERVICES_TTS_KEY) {
-      fetchSpeechKey();
-    }
-  }, [AZURE_COGNITIVE_SERVICES_TTS_KEY]);
+    fetchSpeechKey();
+  }, []);
 
   /**
    * Fetches the Memori data from the backend
@@ -302,11 +302,9 @@ const Memori: React.FC<Props> = ({
             initialContextVars={initialContextVars}
             initialQuestion={initialQuestionLayout}
             authToken={authToken}
-            AZURE_COGNITIVE_SERVICES_TTS_KEY={
-              speechKey || AZURE_COGNITIVE_SERVICES_TTS_KEY
-            }
+            AZURE_COGNITIVE_SERVICES_TTS_KEY={speechKey}
             autoStart={autoStart}
-            enableAudio={enableAudio}
+            enableAudio={enableAudio && !!speechKey}
             defaultSpeakerActive={defaultSpeakerActive}
             disableTextEnteredEvents={disableTextEnteredEvents}
             onStateChange={onStateChange}
@@ -400,7 +398,6 @@ Memori.propTypes = {
   enableAudio: PropTypes.bool,
   defaultSpeakerActive: PropTypes.bool,
   disableTextEnteredEvents: PropTypes.bool,
-  AZURE_COGNITIVE_SERVICES_TTS_KEY: PropTypes.string,
   onStateChange: PropTypes.func,
   additionalInfo: PropTypes.objectOf(PropTypes.any),
   customMediaRenderer: PropTypes.func,

package/src/locales/de.json

@@ -118,6 +118,7 @@
     "conversationStartedLabel": "Das Gespräch begann am",
     "settingsHeaderLabel": "Richten Sie hier ein, wenn Sie die Agent als Dauerrede einstellen möchten, und ändern Sie die Stillesekunden, wenn Sie sie anpassen möchten.",
     "continuousSpeechLabel": "Kontinuierliche Rede",
+    "continuousSpeechDisabled": "Kontinuierliche Rede deaktiviert, da der Agent im Stummschaltmodus ist",
     "holdToSpeak": "Halten Sie gedrückt, um zu sprechen",
     "releaseToEndListening": "Lassen Sie los, um das Hören zu beenden",
     "pressAndHoldToSpeak": "Zum Sprechen gedrückt halten",

package/src/locales/en.json

@@ -119,6 +119,7 @@
     "conversationStartedLabel": "Conversation started on",
     "settingsHeaderLabel": "Setup here if you want to set the continuous speech, and change the silence seconds if you want to customize them.",
     "continuousSpeechLabel": "Continuous speech",
+    "continuousSpeechDisabled": "Continuous speech disabled because the agent is in mute mode",
     "holdToSpeak": "Hold to speak",
     "releaseToEndListening": "Release to end listening",
     "pressAndHoldToSpeak": "Press and hold to speak",

package/src/locales/es.json

@@ -118,6 +118,7 @@
     "conversationStartedLabel": "La conversación comenzó el",
     "settingsHeaderLabel": "Configure aquí si desea configurar la memoria como voz continua y cambie los segundos de silencio si desea personalizarlos.",
     "continuousSpeechLabel": "discurso continuo",
+    "continuousSpeechDisabled": "Discurso continuo deshabilitado porque el agente está en modo silencioso",
     "holdToSpeak": "Mantenga para hablar",
     "releaseToEndListening": "Suelte para finalizar la escucha",
     "pressAndHoldToSpeak": "Mantenga presionado para hablar",

package/src/locales/fr.json

@@ -118,6 +118,7 @@
     "conversationStartedLabel": "La conversation a commencé le",
     "settingsHeaderLabel": "Configurez ici si vous souhaitez définir la mémoire comme parole continue et modifiez les secondes de silence si vous souhaitez les personnaliser.",
     "continuousSpeechLabel": "Discours continu",
+    "continuousSpeechDisabled": "Discours continu désactivé car l'agente est en mode muté",
     "holdToSpeak": "Attends pour parler",
     "releaseToEndListening": "Relâcher pour terminer l'écoute",
     "pressAndHoldToSpeak": "Appuyez et maintenez pour parler",

package/src/locales/it.json

@@ -119,6 +119,7 @@
     "conversationStartedLabel": "Conversazione avvenuta il",
     "settingsHeaderLabel": "Configura qui se vuoi impostare una conversazione continua. Setta i secondi di silenzio prima dell'invio.",
     "continuousSpeechLabel": "Conversazione continua",
+    "continuousSpeechDisabled": "Conversazione continua disabilitata poichè l'agente è in modalità muta",
     "holdToSpeak": "Tieni premuto per parlare",
     "releaseToEndListening": "Rilascia per smettere di parlare",
     "pressAndHoldToSpeak": "Premi e tieni premuto per parlare",