@memori.ai/memori-react 8.7.8 → 8.8.0

package/src/helpers/tts/useTTS.ts

@@ -2,9 +2,9 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { sanitizeText } from '../sanitizer';
 import { getLocalConfig } from '../configuration';
-import Alert from '../../components/ui/Alert';
 import { useViseme } from '../../context/visemeContext';
 import { IAudioContext } from 'standardized-audio-context';
+import { isAndroid } from '../utils';
 
 /**
  * Configurazione per il TTS
@@ -15,7 +15,7 @@ export interface TTSConfig {
   model?: string;
   region?: string; // richiesto per Azure
   tenant?: string; // Tenant identifier for multi-tenant applications
-  layout?: 'DEFAULT' | 'ZOOMED_FULL_BODY' | 'FULLPAGE';
+  layout?: 'DEFAULT' | 'ZOOMED_FULL_BODY' | 'FULLPAGE' | 'TOTEM';
 }
 
 type VisemeData = {
@@ -63,7 +63,6 @@ export function useTTS(
   const { addViseme, resetVisemeQueue, startProcessing, stopProcessing } =
     useViseme();
   const [hasUserActivatedSpeak, setHasUserActivatedSpeak] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
 
   // Riferimenti
   const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -83,7 +82,7 @@ export function useTTS(
       visemeLoadedRef.current = false;
 
       if (visemeData && visemeData.length > 0) {
-        visemeData.forEach(viseme => {
+        visemeData.forEach((viseme) => {
           addViseme(viseme.visemeId, viseme.audioOffset);
         });
         visemeLoadedRef.current = true;
@@ -219,224 +218,298 @@ export function useTTS(
     }
   }, [options.continuousSpeech, options.onEndSpeakStartListen]);
 
-// Helper per creare i chunk
-const createChunks = useCallback((text: string, maxLength: number = 800): string[] => {
-  if (text.length <= maxLength) {
-    return [text];
-  }
-  
-  const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 0);
-  const chunks: string[] = [];
-  let currentChunk = '';
-  
-  for (const sentence of sentences) {
-    const sentenceWithPunct = sentence.trim() + '.';
-    if ((currentChunk + sentenceWithPunct).length > maxLength && currentChunk.length > 0) {
-      chunks.push(currentChunk.trim());
-      currentChunk = sentenceWithPunct;
-    } else {
-      currentChunk += sentenceWithPunct + ' ';
-    }
-  }
-  
-  if (currentChunk.trim().length > 0) {
-    chunks.push(currentChunk.trim());
-  }
-  
-  return chunks;
-}, []);
-
-// Helper per riprodurre un singolo chunk
-const speakChunk = useCallback(async (chunkText: string): Promise<void> => {
-    const response = await fetch(options.apiUrl || '/api/tts', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        text: chunkText,
-        tenant: config.tenant || 'www.aisuru.com',
-        voice: config.voice,
-        model: config.model || 'tts-1',
-        region: config.region,
-        provider: config.provider,
-        includeVisemes: config.layout === 'ZOOMED_FULL_BODY' || config.layout === 'FULLPAGE' || config.layout === 'DEFAULT',
-      }),
-    });
-
-    if (!response.ok) {
-      const errorData = await response.json().catch(() => ({}));
-      throw new Error(errorData.error || `API error: ${response.status}`);
-    }
+  // Helper per creare i chunk
+  const createChunks = useCallback(
+    (text: string, maxLength: number = 800): string[] => {
+      if (text.length <= maxLength) {
+        return [text];
+      }
 
-    const audioBlob = await response.blob();
-    const audioUrl = URL.createObjectURL(audioBlob);
+      const sentences = text.split(/[.!?]+/).filter(s => s.trim().length > 0);
+      const chunks: string[] = [];
+      let currentChunk = '';
+
+      for (const sentence of sentences) {
+        const sentenceWithPunct = sentence.trim() + '.';
+        if (
+          (currentChunk + sentenceWithPunct).length > maxLength &&
+          currentChunk.length > 0
+        ) {
+          chunks.push(currentChunk.trim());
+          currentChunk = sentenceWithPunct;
+        } else {
+          currentChunk += sentenceWithPunct + ' ';
+        }
+      }
 
-    if (!isSpeakingRef.current || !isMountedRef.current) {
-      URL.revokeObjectURL(audioUrl);
-      return;
-    }
+      if (currentChunk.trim().length > 0) {
+        chunks.push(currentChunk.trim());
+      }
 
-    // Crea un nuovo Audio element per riprodurre il chunk corrente
-    const audio = new Audio(audioUrl);
-    
-    // Track the current chunk audio element
-    currentChunkAudioRef.current = audio;
-    
-    return new Promise<void>((resolve, reject) => {
-      // Quando l'audio è pronto per essere riprodotto
-      audio.oncanplaythrough = async () => {
-        try {
-          // Controlla se il componente è ancora montato e se non è stato interrotto
-          if (!isSpeakingRef.current || !isMountedRef.current) {
-            URL.revokeObjectURL(audioUrl);
-            resolve();
-            return;
-          }
-          // Riproduce l'audio
-          await audio.play();
-        } catch (e) {
-          URL.revokeObjectURL(audioUrl);
-          reject(e);
-        }
-      };
-      
-      // Quando l'audio termina di riprodurre
-      audio.onended = () => {
+      return chunks;
+    },
+    []
+  );
+
+  // Helper per riprodurre un singolo chunk
+  // Helper function to handle text-to-speech for a single chunk of text
+  const speakChunk = useCallback(
+    async (chunkText: string): Promise<void> => {
+      // Make API request to TTS endpoint
+      const response = await fetch(options.apiUrl || '/api/tts', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          text: chunkText,
+          tenant: config.tenant || 'www.aisuru.com',
+          voice: config.voice,
+          model: config.model || 'tts-1',
+          region: config.region,
+          provider: config.provider,
+          // Include viseme data for certain layout types that need lip sync
+          includeVisemes:
+            config.layout === 'ZOOMED_FULL_BODY' ||
+            config.layout === 'FULLPAGE' ||
+            config.layout === 'DEFAULT' ||
+            config.layout === 'TOTEM',
+        }),
+      });
+
+      // Handle API errors
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error || `API error: ${response.status}`);
+      }
+
+      // Get audio blob from response and create URL
+      const audioBlob = await response.blob();
+      const audioUrl = URL.createObjectURL(audioBlob);
+
+      // Clean up if speaking was cancelled
+      if (!isSpeakingRef.current || !isMountedRef.current) {
         URL.revokeObjectURL(audioUrl);
-        // Clear the current chunk audio reference
-        if (currentChunkAudioRef.current === audio) {
-          currentChunkAudioRef.current = null;
+        return;
+      }
+
+      // Parse viseme data from response headers if available
+      let hasVisemeData = false;
+      const visemeDataHeader = response.headers.get('X-Viseme-Data');
+      if (visemeDataHeader) {
+        try {
+          const visemeData: VisemeData[] = JSON.parse(visemeDataHeader);
+          hasVisemeData = loadVisemeData(visemeData);
+        } catch (err) {
+          // Silently handle error
         }
-        // Risolve la Promise quando l'audio termina di riprodurre
-        resolve();
-      };
+      }
 
-      audio.onerror = () => {
+      // Clean up if speaking was cancelled
+      if (!isSpeakingRef.current || !isMountedRef.current) {
         URL.revokeObjectURL(audioUrl);
-        // Clear the current chunk audio reference
-        if (currentChunkAudioRef.current === audio) {
-          currentChunkAudioRef.current = null;
+        return;
+      }
+
+      // Create audio element with Android optimizations
+      const audio = new Audio();
+      audio.preload = 'auto'; // Force preloading for Android compatibility
+      audio.src = audioUrl;
+      audioRef.current = audio;
+      currentChunkAudioRef.current = audio;
+
+      // Create audio wrapper for viseme processing if needed
+      if (hasVisemeData) {
+        audioWrapperRef.current = createAudioWrapper();
+      }
+
+      // Return promise that resolves when audio finishes playing
+      return new Promise<void>((resolve, reject) => {
+        if (!audioRef.current) {
+          reject(new Error('Audio element not found'));
+          return;
         }
-        // Rifiuta la Promise se l'audio fallisce
-        reject(new Error('Audio playback failed'));
-      };
-      
-      audio.load();
-    });
-}, [config, options]);
+        // Use Android-optimized event listener
+        const isAndroidDevice = isAndroid();
+        const audioEvent = isAndroidDevice ? 'canplay' : 'canplaythrough';
+        
+        const handleCanPlay = async () => {
+          try {
+            // Check if playback was cancelled
+            if (!isSpeakingRef.current || !isMountedRef.current) {
+              URL.revokeObjectURL(audioUrl);
+              resolve();
+              return;
+            }
+
+            // Play audio first, then start viseme processing
+            try {
+              await audioRef.current?.play();
+              
+              // Start viseme processing AFTER audio starts playing
+              if (hasVisemeData && audioWrapperRef.current) {
+                startProcessing(
+                  audioWrapperRef.current as unknown as IAudioContext
+                );
+              }
+            } catch (playError) {
+              // Retry once for Android compatibility
+              await new Promise(r => setTimeout(r, 100));
+              await audioRef.current?.play();
+              
+              if (hasVisemeData && audioWrapperRef.current) {
+                startProcessing(
+                  audioWrapperRef.current as unknown as IAudioContext
+                );
+              }
+            }
+          } catch (e) {
+            // Clean up on error
+            URL.revokeObjectURL(audioUrl);
+            reject(e);
+          }
+        };
+        
+        audioRef.current.addEventListener(audioEvent, handleCanPlay, { once: true });
 
-/**
- * Sintetizza il testo in audio e lo riproduce
- */
-const speak = useCallback(
-  async (text: string): Promise<void> => {
-    if (!isMountedRef.current) {
-      return;
-    }
+        // When audio finishes playing
+        audioRef.current.onended = () => {
+          // Clean up resources
+          URL.revokeObjectURL(audioUrl);
+          if (currentChunkAudioRef.current === audio) {
+            currentChunkAudioRef.current = null;
+          }
+          resolve();
+        };
 
-    // Early exit conditions before setting speaking flag
-    if (!text || !text.trim() || options.preview) {
-      emitEndSpeakEvent();
-      return;
-    }
+        // Handle audio errors
+        audioRef.current.onerror = () => {
+          // Clean up resources
+          URL.revokeObjectURL(audioUrl);
+          if (currentChunkAudioRef.current === audio) {
+            currentChunkAudioRef.current = null;
+          }
+          reject(new Error('Audio playback failed'));
+        };
 
-  // If speaker is muted, completely disable TTS functionality
-  if (speakerMuted) {
-    // Still set hasUserActivatedSpeak to true when audio is disabled
-    // so the chat can start properly
-    if (!hasUserActivatedSpeak) {
-      setHasUserActivatedSpeak(true);
-    }
-    emitEndSpeakEvent();
-    return;
-  }
+        // Start loading the audio
+        audioRef.current?.load();
+      });
+    },
+    [config, options, loadVisemeData, createAudioWrapper, startProcessing, isSpeakingRef, isMountedRef]
+  );
 
-    // Stop any existing playback first (before checking/setting speaking flag)
-    if (isPlaying) {
-      stop();
-    }
+  /**
+   * Sintetizza il testo in audio e lo riproduce
+   */
+  const speak = useCallback(
+    async (text: string): Promise<void> => {
+      if (!isMountedRef.current) {
+        return;
+      }
 
-    // Now check if we're already processing a request
-    if (isSpeakingRef.current) {
-      return;
-    }
+      // Early exit conditions before setting speaking flag
+      if (!text || !text.trim() || options.preview) {
+        emitEndSpeakEvent();
+        return;
+      }
 
-    // Set the flag after all the early exits and cleanup
-    isSpeakingRef.current = true;
+      // If speaker is muted, completely disable TTS functionality
+      if (speakerMuted) {
+        // Still set hasUserActivatedSpeak to true when audio is disabled
+        // so the chat can start properly
+        if (!hasUserActivatedSpeak) {
+          setHasUserActivatedSpeak(true);
+        }
+        emitEndSpeakEvent();
+        return;
+      }
 
-    if (!hasUserActivatedSpeak) {
-      setHasUserActivatedSpeak(true);
-    }
+      // Stop any existing playback first (before checking/setting speaking flag)
+      if (isPlaying) {
+        stop();
+      }
 
-    try {
-      setIsPlaying(true);
-      setError(null);
+      // Now check if we're already processing a request
+      if (isSpeakingRef.current) {
+        return;
+      }
 
-      // CHUNKING LOGIC: Dividi il testo in chunk se necessario
-      const chunks = createChunks(text, 800);
+      // Set the flag after all the early exits and cleanup
+      isSpeakingRef.current = true;
 
-      // Riproduci tutti i chunk in sequenza
-      // Il loop itera su ogni chunk di testo che deve essere riprodotto
-      for (let i = 0; i < chunks.length; i++) {
-        // Controlla se il componente è ancora montato e se non è stato interrotto
-        if (!isSpeakingRef.current || !isMountedRef.current) {
-          break; // Interrompe il loop se il componente viene smontato
+      if (!hasUserActivatedSpeak) {
+        setHasUserActivatedSpeak(true);
+      }
+
+      try {
+        setIsPlaying(true);
+
+        // CHUNKING LOGIC: Dividi il testo in chunk se necessario
+        const chunks = createChunks(text, 500);
+
+        // Riproduci tutti i chunk in sequenza
+        // Il loop itera su ogni chunk di testo che deve essere riprodotto
+        for (let i = 0; i < chunks.length; i++) {
+          // Controlla se il componente è ancora montato e se non è stato interrotto
+          if (!isSpeakingRef.current || !isMountedRef.current) {
+            break; // Interrompe il loop se il componente viene smontato
+          }
+
+          // Attende che il chunk corrente venga riprodotto prima di passare al successivo
+          await speakChunk(chunks[i]);
+
+          // Se ci sono altri chunk da riprodurre, aggiunge una piccola pausa
+          if (
+            i < chunks.length - 1 &&
+            isSpeakingRef.current &&
+            isMountedRef.current
+          ) {
+            // Crea una Promise che si risolve dopo 300ms
+            // Questo crea una pausa tra un chunk e l'altro
+            // setTimeout viene wrappato in una Promise per poter usare await
+            await new Promise(resolve => setTimeout(resolve, 300));
+          }
         }
-        
-        // Attende che il chunk corrente venga riprodotto prima di passare al successivo
-        await speakChunk(chunks[i]);
-        
-        // Se ci sono altri chunk da riprodurre, aggiunge una piccola pausa
-        if (i < chunks.length - 1 && isSpeakingRef.current && isMountedRef.current) {
-          // Crea una Promise che si risolve dopo 300ms
-          // Questo crea una pausa tra un chunk e l'altro
-          // setTimeout viene wrappato in una Promise per poter usare await
-          await new Promise(resolve => setTimeout(resolve, 300));
+
+        setIsPlaying(false);
+        isSpeakingRef.current = false;
+        emitEndSpeakEvent();
+
+        // Dispatch custom event to notify MemoriWidget that audio has ended
+        const e = new CustomEvent('MemoriAudioEnded');
+        document.dispatchEvent(e);
+      } catch (err) {
+        setIsPlaying(false);
+        isSpeakingRef.current = false;
+
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
         }
-      }
 
-      setIsPlaying(false);
-      isSpeakingRef.current = false;
-      emitEndSpeakEvent();
-      
-      // Dispatch custom event to notify MemoriWidget that audio has ended
-      const e = new CustomEvent('MemoriAudioEnded');
-      document.dispatchEvent(e);
-      
-    } catch (err) {
-      setIsPlaying(false);
-      isSpeakingRef.current = false;
-      
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-        timeoutRef.current = null;
+        cleanup();
+
+        emitEndSpeakEvent();
+
+        // Dispatch custom event to notify MemoriWidget that audio has ended
+        const e = new CustomEvent('MemoriAudioEnded');
+        document.dispatchEvent(e);
       }
-      
-      cleanup();
-      const errorMsg = err instanceof Error ? err : new Error(String(err));
-      setError(errorMsg);
-
-      emitEndSpeakEvent();
-      
-      // Dispatch custom event to notify MemoriWidget that audio has ended
-      const e = new CustomEvent('MemoriAudioEnded');
-      document.dispatchEvent(e);
-    }
-  },
-  [
-    config,
-    speakerMuted,
-    options.preview,
-    hasUserActivatedSpeak,
-    stop,
-    cleanup,
-    createChunks,
-    speakChunk,
-    emitEndSpeakEvent,
-    isPlaying,
-  ]
-);
+    },
+    [
+      config,
+      speakerMuted,
+      options.preview,
+      hasUserActivatedSpeak,
+      stop,
+      cleanup,
+      createChunks,
+      speakChunk,
+      emitEndSpeakEvent,
+      isPlaying,
+    ]
+  );
   /**
    * Imposta lo stato del muto
    */
@@ -494,7 +567,5 @@ const speak = useCallback(
     toggleMute,
     hasUserActivatedSpeak,
     setHasUserActivatedSpeak,
-    error,
-    setError,
   };
 }

package/src/index.stories.tsx

@@ -39,6 +39,21 @@ Anonymous.args = {
   showChatHistory: true,
 };
 
+export const Vaccaboia = Template.bind({});
+Vaccaboia.args = {
+  ownerUserName: 'francesco.timo',
+  memoriName: 'AI-ssistantSafe',
+  tenantID: 'tecne.aclambda.online',
+  engineURL: 'https://engine.memori.ai',
+  apiURL: 'https://backend.memori.ai',
+  baseURL: 'https://www.aisuru.com',
+  uiLang: 'IT',
+  spokenLang: 'IT',
+  enableAudio: true,
+  autoStart: false,
+  showChatHistory: true,
+};
+
 export const WithInitialContextAndQuestion = Template.bind({});
 WithInitialContextAndQuestion.args = {
   ownerUserName: 'nzambello',
@@ -397,18 +412,19 @@ WithCustomUserAvatar.args = {
 
 export const Test = Template.bind({});
 Test.args = {
-  memoriName: 'Test Artifact',
-  ownerUserName: 'Andrea-Patini',
-  memoriID: '8cec936c-d440-4781-91df-e4ddf044255e',
-  ownerUserID: '91dbc9ba-b684-4fbe-9828-b5980af6cda9',
-  tenantID: 'aisuru-staging.aclambda.online',
-  engineURL: 'https://engine-staging.memori.ai/memori/v2',
-  apiURL: 'https://backend-staging.memori.ai/api/v2',
-  baseURL: 'https://aisuru-staging.aclambda.online',
-  layout: 'FULLPAGE',
-  uiLang: 'EN',
-  spokenLang: 'EN',
-  showLogin: true,
-  enableAudio: false,
-  integrationID: '2b37c25d-8cf9-456f-b9ee-2c27dc4d54fc',
+    memoriName: "test23",
+    ownerUserName: "Andrea-Patini",
+    memoriID: "bb672b4a-712a-4298-b440-61bfe5d67489",
+    ownerUserID: "91dbc9ba-b684-4fbe-9828-b5980af6cda9",
+    tenantID: "aisuru-staging.aclambda.online",
+    apiURL: "https://backend-staging.memori.ai/api/v2",
+    engineURL: "https://engine-staging.memori.ai/memori/v2",
+    baseURL: "https://aisuru-staging.aclambda.online",
+    uiLang: "it",
+    spokenLang: "IT",
+    layout: "FULLPAGE",
+    multilingual: "false",
+    showSettings: "true",
+    showShare: "true",
+  integrationID: "59c6f519-d02a-46e1-9bfb-ef8cf1203ebf",
 };

package/dist/components/AccountForm/AccountForm.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { User } from '@memori.ai/memori-api-client/dist/types';
-import memoriApiClient from '@memori.ai/memori-api-client';
-export interface Props {
-    user: User;
-    loginToken: string;
-    apiClient: ReturnType<typeof memoriApiClient>;
-    onUserUpdate: (user: User) => void;
-}
-declare const AccountForm: ({ user, loginToken, apiClient, onUserUpdate }: Props) => JSX.Element;
-export default AccountForm;