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

frontend/src/components/chat/ChatInputArea.jsx

@@ -1,47 +1,28 @@
 // frontend/src/components/chat/ChatInputArea.jsx
-import React, { useState,  useEffect } from 'react';
-// Import the new library: VoiceVisualizer component and its hook
+import React, { useState, useEffect } from 'react';
 import { VoiceVisualizer, useVoiceVisualizer } from 'react-voice-visualizer';
 
-
 const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
   const [message, setMessage] = useState('');
-  // isRecording state can now be derived from the useVoiceVisualizer hook
-  // const [isRecording, setIsRecording] = useState(false); // No longer directly managed here
-  // const [recordedBlob, setRecordedBlob] = useState(null); // No longer directly managed here
 
-  // Correct BASE_URL to point to Nginx's /api endpoint
-  // Nginx will then proxy /api/transcribe-audio to FastAPI's /transcribe-audio
   const BASE_URL = '/api';
 
-  // Initialize the voice visualizer hook
+  const voiceVisualizerHook = useVoiceVisualizer({});
+
   const {
     startRecording,
     stopRecording,
-    recordingBlob, // This will hold the recorded audio blob
-    isRecording,   // This state is managed by the hook
-    // Other properties like playbackState, audioLevel, etc., are available if needed
-  } = useVoiceVisualizer({
-    // Optional: Configure VoiceVisualizer properties here if desired
-    // E.g., fftSize: 1024,
-    // On recording end, the blob will be available in 'recordingBlob'
-  });
+    recordingBlob,
+    isRecording,
+  } = voiceVisualizerHook;
 
-  // Use useEffect to watch for when recordingBlob becomes available
-  // This replaces the onStop prop of ReactMic
   useEffect(() => {
     if (recordingBlob) {
       console.log('Recorded blob is: ', recordingBlob);
-      // Pass the blob directly to the parent handler
       onSendVoiceMessage(recordingBlob);
-      // You might want to clear recordingBlob here if you only want to send it once
-      // useVoiceVisualizer might have a reset function, or you might manage it
-      // if you need to re-record without refreshing. For now, we'll let it
-      // be handled by the next startRecording clearing it.
     }
   }, [recordingBlob, onSendVoiceMessage]);
 
-
   const handleTextChange = (e) => {
     setMessage(e.target.value);
   };
@@ -54,16 +35,14 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
     }
   };
 
-  // --- Voice Recording Handlers ---
-  // These now simply call the functions provided by useVoiceVisualizer
   const handleStartRecording = () => {
     if (isLoading) return;
-    startRecording(); // Call the hook's startRecording function
+    startRecording();
     console.log("Recording started...");
   };
 
   const handleStopRecording = () => {
-    stopRecording(); // Call the hook's stopRecording function
+    stopRecording();
     console.log("Recording stopped.");
   };
 
@@ -81,14 +60,12 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
           Send
         </button>
 
-        {/* Microphone icon and recording area */}
         <div className="voice-input-container">
           <button
             type="button"
             className={`voice-record-btn ${isRecording ? 'recording' : ''}`}
             onMouseDown={handleStartRecording}
             onMouseUp={handleStopRecording}
-            // For mobile touch events
             onTouchStart={handleStartRecording}
             onTouchEnd={handleStopRecording}
             disabled={isLoading}
@@ -106,17 +83,11 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
               </svg>
             )}
           </button>
-          {/* Render the VoiceVisualizer component */}
           <VoiceVisualizer
-            ref={null} // VoiceVisualizer uses ref for direct DOM interaction, but not always needed for basic use.
-            className="sound-wave" // Apply your existing CSS class
-            mainBarColor="#4CAF50" // Example color
-            secondaryBarColor="#81C784" // Example color
-            // If you want it to be transparent like ReactMic was, you'd need to adjust your CSS
-            // or see if the component offers specific props for background/stroke.
-            // For now, these colors will show the visualization.
-            // The `hook` prop passes the state from `useVoiceVisualizer` to the component
-            hook={useVoiceVisualizer()} // Pass the hook directly to the component
+            className="sound-wave"
+            mainBarColor="#4CAF50"
+            secondaryBarColor="#81C784"
+            hook={voiceVisualizerHook}
           />
         </div>
       </form>