Update frontend/src/components/chat/ChatInputArea.jsx

frontend/src/components/chat/ChatInputArea.jsx

@@ -1,41 +1,59 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { VoiceVisualizer, useVoiceVisualizer } from 'react-voice-visualizer'; // Assuming these imports are correct
+import { VoiceVisualizer, useVoiceVisualizer } from 'react-voice-visualizer';
+import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
 
 const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
   const [message, setMessage] = useState('');
 
-  // Configure useVoiceVisualizer with a specific MIME type for better compatibility
+  // --- Voice Visualizer Setup (for recording/displaying audio waves if desired) ---
   const voiceVisualizerHook = useVoiceVisualizer({
     mediaRecorderOptions: { mimeType: 'audio/webm' },
-    // You can add other options here, e.g., maxRecordingTime: 60000 (for 60 seconds)
   });
-
   const {
-    startRecording,
-    stopRecording,
+    startRecording: startVoiceVisualizerRecording,
+    stopRecording: stopVoiceVisualizerRecording,
     recordingBlob,
-    isRecording,
-    // You can also get other states if needed:
-    // isStopped,
-    // error,
+    isRecording: isVisualizerRecording,
   } = voiceVisualizerHook;
 
-  // Logging for render phase (these will fire on every re-render)
-  console.log('ChatInputArea render - isRecording:', isRecording);
-  console.log('ChatInputArea render - recordingBlob (current state):', recordingBlob);
-
-  // This useEffect will run whenever recordingBlob changes.
   useEffect(() => {
-    // debugger; // Keep this for your testing, remove once it works
-    console.log('ChatInputArea useEffect triggered. recordingBlob:', recordingBlob); // Log inside the effect
     if (recordingBlob) {
-      console.log('ChatInputArea: recordingBlob IS present!', recordingBlob);
-      onSendVoiceMessage(recordingBlob);
+      console.log('ChatInputArea: Voice Visualizer Recorded blob is: ', recordingBlob);
+      onSendVoiceMessage(recordingBlob); // Send the actual audio blob
+    }
+  }, [recordingBlob, onSendVoiceMessage]);
+
+
+  // --- Speech Recognition Setup ---
+  const {
+    transcript,
+    listening,
+    resetTranscript,
+    browserSupportsSpeechRecognition,
+    isMicrophoneAvailable
+  } = useSpeechRecognition();
+
+  // EFFECT TO DISPLAY TRANSCRIPT IN INPUT FIELD
+  useEffect(() => {
+    if (listening) {
+      // While listening, update the message state with the live transcript
+      setMessage(transcript);
+    } else if (transcript.trim() !== '') {
+      // Once listening stops and there's a final transcript, keep it in the message state
+      setMessage(transcript);
+      // We no longer send automatically here. The user will click "Send".
     } else {
-      console.log('ChatInputArea: recordingBlob is NULL or UNDEFINED.');
+      // If listening stops and transcript is empty (e.g., no speech detected),
+      // ensure the input field doesn't get stuck with an old value.
+      // But only if we weren't already typing something else.
+      if (!transcript && !message) { // Only clear if transcript was truly empty and message wasn't user-typed
+          setMessage('');
+      }
     }
-  }, [recordingBlob, onSendVoiceMessage]); // onSendVoiceMessage is stable due to useCallback in App.jsx
+  }, [transcript, listening, message]); // Include 'message' in dependencies to avoid stale closures if needed
+
 
+  // --- Handlers for Text Input ---
   const handleTextChange = useCallback((e) => {
     setMessage(e.target.value);
   }, []);
@@ -43,25 +61,83 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
   const handleSubmit = useCallback((e) => {
     e.preventDefault();
     if (message.trim()) {
+      // Send the current content of the message state (which now includes transcript)
       onSendMessage(message);
-      setMessage('');
+      setMessage(''); // Clear input after sending
+      resetTranscript(); // Also clear the internal transcript state
     }
-  }, [message, onSendMessage]);
-
-  const handleStartRecording = useCallback(() => {
-    console.log("ChatInputArea: handleStartRecording called.");
-    if (isLoading) return; // Prevent recording if an action is already in progress
-    startRecording();
-    // Note: isRecording here might not be immediately true due to async nature of startRecording
-    console.log("ChatInputArea: Recording start function called. Current isRecording state:", isRecording);
-  }, [isLoading, startRecording, isRecording]); // isRecording added to dependency array for accurate logging
-
-  const handleStopRecording = useCallback(() => {
-    console.log("ChatInputArea: handleStopRecording called.");
-    stopRecording();
-    // Note: isRecording here might not be immediately false due to async nature of stopRecording
-    console.log("ChatInputArea: Recording stop function called. Current isRecording state:", isRecording);
-  }, [stopRecording, isRecording]); // isRecording added to dependency array for accurate logging
+  }, [message, onSendMessage, resetTranscript]);
+
+
+  // --- Handlers for Voice Input ---
+  const handleStartVoiceInput = useCallback(() => {
+    if (isLoading) return;
+
+    // Clear previous transcript and message before starting new recognition
+    resetTranscript();
+    setMessage(''); // Clear the input field immediately
+    SpeechRecognition.startListening({ continuous: false, interimResults: true }); // Interim results for live preview
+
+    // Optional: Start visualizer if you want to record the audio blob as well
+    // startVoiceVisualizerRecording();
+
+    console.log("ChatInputArea: Voice input (SpeechRecognition) started.");
+  }, [isLoading, resetTranscript]); // Removed startVoiceVisualizerRecording for primary logic
+
+  const handleStopVoiceInput = useCallback(() => {
+    SpeechRecognition.stopListening();
+
+    // Optional: Stop visualizer if you started it
+    // stopVoiceVisualizerRecording();
+
+    console.log("ChatInputArea: Voice input (SpeechRecognition) stopped.");
+  }, []); // Removed stopVoiceVisualizerRecording for primary logic
+
+
+  // --- Render Logic ---
+  if (!browserSupportsSpeechRecognition) {
+    return (
+      <div className="chat-input-area">
+        <p className="browser-support-warning">
+          Voice input is not supported in this browser. Please use Chrome for best experience.
+        </p>
+        <form onSubmit={handleSubmit} className="chat-form">
+          <input
+            type="text"
+            value={message}
+            onChange={handleTextChange}
+            placeholder={isLoading ? "Please wait..." : "Type your message..."}
+            disabled={isLoading}
+          />
+          <button type="submit" disabled={isLoading || !message.trim()}>
+            Send
+          </button>
+        </form>
+      </div>
+    );
+  }
+
+  if (!isMicrophoneAvailable) {
+    return (
+      <div className="chat-input-area">
+        <p className="browser-support-warning">
+          Microphone access denied or unavailable. Please enable microphone permissions for voice input.
+        </p>
+        <form onSubmit={handleSubmit} className="chat-form">
+          <input
+            type="text"
+            value={message}
+            onChange={handleTextChange}
+            placeholder={isLoading ? "Please wait..." : "Type your message..."}
+            disabled={isLoading}
+          />
+          <button type="submit" disabled={isLoading || !message.trim()}>
+            Send
+          </button>
+        </form>
+      </div>
+    );
+  }
 
   return (
     <div className="chat-input-area">
@@ -70,24 +146,24 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
           type="text"
           value={message}
           onChange={handleTextChange}
-          placeholder={isRecording ? "Recording..." : (isLoading ? "Please wait..." : "Type your message or hold for voice...")}
-          disabled={isLoading || isRecording}
+          placeholder={listening ? "Listening..." : (isLoading ? "Please wait..." : "Type your message or hold for voice...")}
+          disabled={isLoading || listening} // Disable text input while listening via voice
         />
-        <button type="submit" disabled={isLoading || isRecording || !message.trim()}>
+        <button type="submit" disabled={isLoading || listening || !message.trim()}>
           Send
         </button>
         <div className="voice-input-container">
           <button
             type="button"
-            className={`voice-record-btn ${isRecording ? 'recording' : ''}`}
-            onMouseDown={handleStartRecording}
-            onMouseUp={handleStopRecording}
-            onTouchStart={handleStartRecording}
-            onTouchEnd={handleStopRecording}
+            className={`voice-record-btn ${listening ? 'recording' : ''}`}
+            onMouseDown={handleStartVoiceInput}
+            onMouseUp={handleStopVoiceInput}
+            onTouchStart={handleStartVoiceInput}
+            onTouchEnd={handleStopVoiceInput}
             disabled={isLoading}
             title="Hold to record voice"
           >
-            {isRecording ? (
+            {listening ? (
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 animate-pulse">
                 <path d="M8.25 4.5a3.75 3.75 0 1 1 7.5 0v8.25a3.75 3.75 0 1 1-7.5 0V4.5Z" />
                 <path d="M6 10.5a.75.75 0 0 1 .75.75v1.5a5.25 5.25 0 1 0 10.5 0v-1.5a.75.75 0 0 1 1.5 0v1.5a6.75 6.75 0 1 1-13.5 0v-1.5A.75.75 0 0 1 6 10.5Z" />
@@ -99,14 +175,14 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
               </svg>
             )}
           </button>
-          {/* Only show visualizer if actively recording to save resources */}
-          {isRecording && (
+
+          {/* Voice Visualizer remains optional */}
+          {isVisualizerRecording && (
             <VoiceVisualizer
               className="sound-wave"
               mainBarColor="#4CAF50"
               secondaryBarColor="#81C784"
-              hook={voiceVisualizerHook} // This needs to be 'controls' if the prop name is 'controls' in VoiceVisualizer
-              // Optional: width="100%" height="50px"
+              controls={voiceVisualizerHook} // Corrected prop name
             />
           )}
         </div>