added log to find bob

frontend/src/components/chat/ChatInputArea.jsx

@@ -1,50 +1,59 @@
-import React, { useState, useEffect } from 'react';
+// src/components/chat/ChatInputArea.jsx
+import React, { useState, useEffect, useCallback } from 'react';
 import { VoiceVisualizer, useVoiceVisualizer } from 'react-voice-visualizer';
 
 const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
   const [message, setMessage] = useState('');
 
-  // BASE_URL is not used here, so it can be removed if not needed elsewhere
-  // const BASE_URL = '/api';
-
-  const voiceVisualizerHook = useVoiceVisualizer({});
+  // Configure useVoiceVisualizer with a specific MIME type for better compatibility
+  const voiceVisualizerHook = useVoiceVisualizer({
+    mediaRecorderOptions: { mimeType: 'audio/webm' },
+    // You can add other options here, e.g., maxRecordingTime: 60000 (for 60 seconds)
+  });
 
   const {
     startRecording,
     stopRecording,
     recordingBlob,
     isRecording,
+    // You can also get other states if needed:
+    // isStopped,
+    // error,
   } = voiceVisualizerHook;
 
+  // This useEffect will run whenever recordingBlob changes.
   useEffect(() => {
+    debugger; // <--- KEEP THIS HERE FOR YOUR TESTING, REMOVE ONCE IT WORKS
     if (recordingBlob) {
       console.log('Recorded blob is: ', recordingBlob);
       onSendVoiceMessage(recordingBlob);
     }
-  }, [recordingBlob, onSendVoiceMessage]);
+  }, [recordingBlob, onSendVoiceMessage]); // onSendVoiceMessage is stable due to useCallback in App.jsx
 
-  const handleTextChange = (e) => {
+  const handleTextChange = useCallback((e) => {
     setMessage(e.target.value);
-  };
+  }, []);
 
-  const handleSubmit = (e) => {
+  const handleSubmit = useCallback((e) => {
     e.preventDefault();
     if (message.trim()) {
       onSendMessage(message);
       setMessage('');
     }
-  };
+  }, [message, onSendMessage]);
 
-  const handleStartRecording = () => {
+  const handleStartRecording = useCallback(() => {
     if (isLoading) return; // Prevent recording if an action is already in progress
+    console.log("Attempting to start recording...");
     startRecording();
-    console.log("Recording started...");
-  };
+    console.log("Recording started status:", isRecording); // This might be true/false depending on async nature
+  }, [isLoading, startRecording, isRecording]);
 
-  const handleStopRecording = () => {
+  const handleStopRecording = useCallback(() => {
+    console.log("Attempting to stop recording...");
     stopRecording();
-    console.log("Recording stopped.");
-  };
+    console.log("Recording stopped status:", isRecording); // This might be true/false depending on async nature
+  }, [stopRecording, isRecording]);
 
   return (
     <div className="chat-input-area">
@@ -53,13 +62,12 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
           type="text"
           value={message}
           onChange={handleTextChange}
-          placeholder={isRecording ? "Recording..." : "Type your message or hold for voice..."}
+          placeholder={isRecording ? "Recording..." : (isLoading ? "Please wait..." : "Type your message or hold for voice...")}
           disabled={isLoading || isRecording}
         />
         <button type="submit" disabled={isLoading || isRecording || !message.trim()}>
           Send
         </button>
-
         <div className="voice-input-container">
           <button
             type="button"
@@ -83,13 +91,14 @@ const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
               </svg>
             )}
           </button>
-          {/* Only show visualizer if recording or if there's audio data to show */}
+          {/* Only show visualizer if actively recording to save resources */}
           {isRecording && (
             <VoiceVisualizer
               className="sound-wave"
               mainBarColor="#4CAF50"
               secondaryBarColor="#81C784"
               hook={voiceVisualizerHook}
+              // Optional: width="100%" height="50px"
             />
           )}
         </div>