feat: implement real-time streaming transcription using Web Speech API

apps/admin/src/hooks/useAudioRecorder.ts

@@ -1,86 +1,76 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 interface UseAudioRecorderProps {
     onTranscriptionComplete: (text: string) => void;
-    apiUrl: string;
-    token: string;
-    organizationId: string;
+    apiUrl?: string;
+    token?: string;
+    organizationId?: string;
 }
 
-export const useAudioRecorder = ({ onTranscriptionComplete, apiUrl, token, organizationId }: UseAudioRecorderProps) => {
+export const useAudioRecorder = ({ onTranscriptionComplete }: UseAudioRecorderProps) => {
     const [isRecording, setIsRecording] = useState(false);
-    const [isTranscribing, setIsTranscribing] = useState(false);
-    const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-    const audioChunksRef = useRef<Blob[]>([]);
+    const recognitionRef = useRef<any>(null);
 
-    const startRecording = async () => {
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            const mediaRecorder = new MediaRecorder(stream);
-            mediaRecorderRef.current = mediaRecorder;
-            audioChunksRef.current = [];
+    useEffect(() => {
+        const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;
+        if (SpeechRecognition) {
+            const recognition = new SpeechRecognition();
+            recognition.lang = 'fr-FR';
+            recognition.interimResults = true;
+            recognition.continuous = false;
 
-            mediaRecorder.ondataavailable = (event) => {
-                if (event.data.size > 0) {
-                    audioChunksRef.current.push(event.data);
+            recognition.onresult = (event: any) => {
+                let currentTranscript = "";
+                for (let i = 0; i < event.results.length; i++) {
+                    currentTranscript += event.results[i][0].transcript;
                 }
+                onTranscriptionComplete(currentTranscript);
+            };
+
+            recognition.onerror = (event: any) => {
+                console.error("Speech recognition error:", event.error);
+                setIsRecording(false);
             };
 
-            mediaRecorder.onstop = async () => {
-                const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' });
-                await sendAudioToTranscription(audioBlob);
-                stream.getTracks().forEach(track => track.stop());
+            recognition.onend = () => {
+                setIsRecording(false);
             };
 
-            mediaRecorder.start();
+            recognitionRef.current = recognition;
+        }
+
+        return () => {
+            if (recognitionRef.current) {
+                recognitionRef.current.stop();
+            }
+        };
+    }, [onTranscriptionComplete]);
+
+    const startRecording = () => {
+        if (!recognitionRef.current) {
+            alert("La dictée vocale instantanée n'est pas supportée sur ce navigateur.");
+            return;
+        }
+        try {
+            recognitionRef.current.start();
             setIsRecording(true);
         } catch (err) {
-            console.error("Failed to start recording:", err);
-            alert("Impossible d'accéder au micro.");
+            console.error("Failed to start speech recognition:", err);
+            // If already started, just set state
+            setIsRecording(true);
         }
     };
 
     const stopRecording = () => {
-        if (mediaRecorderRef.current && isRecording) {
-            mediaRecorderRef.current.stop();
+        if (recognitionRef.current && isRecording) {
+            recognitionRef.current.stop();
             setIsRecording(false);
         }
     };
 
-    const sendAudioToTranscription = async (blob: Blob) => {
-        if (!token || !organizationId) return;
-
-        setIsTranscribing(true);
-        const formData = new FormData();
-        formData.append('file', blob, 'recording.webm');
-
-        try {
-            const res = await fetch(`${apiUrl}/v1/organizations/${organizationId}/campaigns/transcribe`, {
-                method: 'POST',
-                headers: {
-                    'Authorization': `Bearer ${token}`
-                },
-                body: formData
-            });
-
-            if (res.ok) {
-                const data = await res.json();
-                if (data.text) {
-                    onTranscriptionComplete(data.text);
-                }
-            } else {
-                console.error("Transcription failed");
-            }
-        } catch (err) {
-            console.error("Transcription error:", err);
-        } finally {
-            setIsTranscribing(false);
-        }
-    };
-
     return {
         isRecording,
-        isTranscribing,
+        isTranscribing: false, // No longer needed as it's real-time
         startRecording,
         stopRecording
     };

apps/admin/src/pages/CrmConversationalDashboard.tsx

@@ -42,10 +42,8 @@ export default function CrmConversationalDashboard() {
     const [uploadedFile, setUploadedFile] = useState<{ name: string, listId: string, listName: string } | null>(null);
 
     // Recording & Transcription logic moved to useAudioRecorder hook
+    // Real-time streaming transcription logic
     const { isRecording, startRecording, stopRecording } = useAudioRecorder({
-        apiUrl: import.meta.env.VITE_API_URL,
-        token: token || '',
-        organizationId: selectedOrgId || '',
         onTranscriptionComplete: (text) => setInput(text)
     });