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

frontend/src/components/chat/ChatInterface.jsx

@@ -31,7 +31,7 @@ const ChatInterface = () => {
     if (!userPrompt.trim() || isSending) return; // Prevent empty messages or sending when busy
 
     const userMessage = { role: 'user', message: userPrompt.trim(), timestamp: new Date() };
-    
+
     // Add user message and a placeholder for assistant's response
     setChatHistory(prev => [
       ...prev,
@@ -59,6 +59,7 @@ const ChatInterface = () => {
       const response = await fetch(FASTAPI_LLM_URL, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
+        // Ensure that userPrompt (which can now be the transcript) is sent as 'text'
         body: JSON.stringify({ text: userMessage.message }),
       });
 
@@ -76,9 +77,10 @@ const ChatInterface = () => {
         if (done) {
             console.log("Stream finished.");
             // Process any remaining buffer content
-            processPartialBuffer(buffer); 
+            processPartialBuffer(buffer);
             break;
         }
+
         const decodedChunk = decoder.decode(value, { stream: true });
         buffer += decodedChunk;
 
@@ -124,7 +126,7 @@ const ChatInterface = () => {
     } catch (err) {
       console.error('General Fetch/Stream Error:', err);
       currentFullResponse += `\nSorry, something went wrong. Please try again. [Error: ${err.message}]`;
-      // Update the message immediately on error
+
       setChatHistory(prev => {
         const updated = [...prev];
         const targetMessage = updated[assistantMessageIndex];
@@ -138,6 +140,7 @@ const ChatInterface = () => {
         }
         return updated;
       });
+
     } finally {
       setIsSending(false);
       // Final update to remove blinking cursor and ensure timestamp is set
@@ -173,14 +176,17 @@ const ChatInterface = () => {
     }
   };
 
+  // This function is for handling actual audio file uploads for transcription.
+  // If your primary voice input is now Speech-to-Text via react-speech-recognition,
+  // this function might be used for a separate "upload audio file" feature,
+  // or it might become less critical for the main voice input flow.
   const handleSendVoiceMessage = async (audioBlob) => {
     if (isSending) return;
 
-    // Display a placeholder message while transcribing
     setChatHistory(prev => [
         ...prev,
-        { role: 'user', message: '(Recording audio...)', timestamp: new Date() },
-        { role: 'assistant', message: 'Transcribing...', streaming: true, timestamp: new Date() } // Assistant thinking message
+        { role: 'user', message: '(Recording audio for transcription...)', timestamp: new Date() }, // Changed placeholder
+        { role: 'assistant', message: 'Transcribing audio...', streaming: true, timestamp: new Date() } // Assistant thinking message
     ]);
     setIsSending(true);
 
@@ -201,35 +207,43 @@ const ChatInterface = () => {
         if (transcriptionResult) {
             // Update the user's "Recording audio..." message with the actual transcription
             setChatHistory(prev => {
-                // Filter out the "Recording audio..." placeholder message
-                const updated = prev.filter(msg => !(msg.role === 'user' && msg.message === '(Recording audio...)'));
+                // Remove placeholder user message and assistant's "Transcribing..." message
+                const updated = prev.filter(msg =>
+                    !(msg.role === 'user' && msg.message === '(Recording audio for transcription...)') &&
+                    !(msg.role === 'assistant' && msg.message === 'Transcribing audio...')
+                );
                 // Add the actual transcribed user message
                 const userMsg = { role: 'user', message: transcriptionResult, timestamp: new Date() };
-                // Filter out the "Transcribing..." assistant message
-                const filteredAssistantMsgs = updated.filter(msg => !(msg.role === 'assistant' && msg.message === 'Transcribing...'));
-                return [...filteredAssistantMsgs, userMsg];
+                return [...updated, userMsg];
             });
-            
-            // Now, send the transcribed text to your LLM
+
+            // Now, send the transcribed text to your LLM using the existing handleSendMessage
             await handleSendMessage(transcriptionResult);
         } else {
             alert('Could not transcribe audio. Please try speaking clearer.');
             // Remove transcription messages if empty
-            setChatHistory(prev => prev.filter(msg => !(msg.role === 'user' && msg.message === '(Recording audio...)') && !(msg.role === 'assistant' && msg.message === 'Transcribing...')));
+            setChatHistory(prev => prev.filter(msg =>
+                !(msg.role === 'user' && msg.message === '(Recording audio for transcription...)') &&
+                !(msg.role === 'assistant' && msg.message === 'Transcribing audio...')
+            ));
         }
     } catch (error) {
         console.error('Error during voice transcription:', error);
         alert(`Failed to transcribe audio. Error: ${error.message || 'Unknown error'}`);
         // Remove transcription messages if error
-        setChatHistory(prev => prev.filter(msg => !(msg.role === 'user' && msg.message === '(Recording audio...)') && !(msg.role === 'assistant' && msg.message === 'Transcribing...')));
+        setChatHistory(prev => prev.filter(msg =>
+            !(msg.role === 'user' && msg.message === '(Recording audio for transcription...)') &&
+            !(msg.role === 'assistant' && msg.message === 'Transcribing audio...')
+        ));
     } finally {
         setIsSending(false);
         // Ensure the "Transcribing..." message is always removed when done
-        setChatHistory(prev => prev.filter(msg => !(msg.role === 'assistant' && msg.message === 'Transcribing...')));
+        setChatHistory(prev => prev.filter(msg =>
+            !(msg.role === 'assistant' && msg.message === 'Transcribing audio...')
+        ));
     }
   };
 
-
   return (
     <div className="chat-layout">
       <Sidebar onNewChat={handleNewChat} />
@@ -262,9 +276,10 @@ const ChatInterface = () => {
           )}
           <div ref={chatEndRef} /> {/* Ref for scrolling to the bottom */}
         </div>
+        {/* Pass both handlers. ChatInputArea will decide which one to use based on its internal logic */}
         <ChatInputArea
           onSendMessage={handleSendMessage}
-          onSendVoiceMessage={handleSendVoiceMessage}
+          onSendVoiceMessage={handleSendVoiceMessage} // Keep this if you also use react-voice-visualizer for blob
           isLoading={isSending}
         />
       </div>