Update frontend/src/App.jsx

frontend/src/App.jsx

@@ -1,73 +1,82 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate, Link, useNavigate } from 'react-router-dom';
-import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
-import './App.css';
+import { useReactMediaRecorder } from "react-media-recorder";
+import './App.css'; // Your existing App.css
+import chatbotLogo from './assets/chatbot.png'; // Import the logo
 
-// To keep the code clean, we define a simple "user" object.
-// In a real app, this would come from your Firebase auth state.
+// Mock user object for demonstration. In your real app, this comes from Firebase.
 const mockUser = {
   isLoggedIn: true,
 };
 
+
 // =================================================================================
 // Chat Components (ChatPage and ChatInput)
 // =================================================================================
 
-const ChatInput = ({ onSendMessage, isLoading }) => {
-  const [message, setMessage] = useState('');
-  const {
-    transcript,
-    listening,
-    resetTranscript,
-    browserSupportsSpeechRecognition,
-  } = useSpeechRecognition();
+const ChatInput = ({ onSendMessage, isLoading, setInputText, inputText }) => {
+  const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({
+    audio: true,
+    mimeType: "audio/webm", // Explicitly set mimetype
+  });
 
-  // This effect automatically sends the message when the user stops speaking.
-  useEffect(() => {
-    // Check if listening has just stopped and there is a transcript to send.
-    if (!listening && transcript) {
-      onSendMessage(transcript);
-      resetTranscript(); // Clear the transcript for the next message
-    }
-  }, [listening, transcript, onSendMessage, resetTranscript]);
+  const [isTranscribing, setIsTranscribing] = useState(false);
+  const isRecording = status === "recording";
 
-  // Update the input field with the live transcript while listening.
+  // This effect handles the recorded audio blob
   useEffect(() => {
-    if (listening) {
-      setMessage(transcript);
+    // When a blob URL is available and recording has stopped
+    if (mediaBlobUrl && status === 'stopped') {
+      const transcribeAudio = async () => {
+        setIsTranscribing(true);
+        try {
+          // Fetch the audio blob from its URL
+          const audioBlob = await fetch(mediaBlobUrl).then((res) => res.blob());
+
+          // Create a FormData object to send the file
+          const formData = new FormData();
+          formData.append("audio_file", audioBlob, "recording.webm");
+
+          // Send the audio to the backend transcription endpoint
+          const response = await fetch("/api/transcribe-audio", {
+            method: "POST",
+            body: formData,
+          });
+
+          if (!response.ok) {
+            throw new Error("Transcription failed");
+          }
+
+          const result = await response.json();
+          setInputText(result.transcription); // Set the input field with the transcribed text
+        } catch (error) {
+          console.error("Error transcribing audio:", error);
+          alert("Could not transcribe audio. Please try again.");
+        } finally {
+          setIsTranscribing(false);
+        }
+      };
+      transcribeAudio();
     }
-  }, [transcript, listening]);
+  }, [mediaBlobUrl, status, setInputText]);
 
-  if (!browserSupportsSpeechRecognition) {
-    return <div className="error-message">Speech recognition is not supported by your browser.</div>;
-  }
 
   const handleTextChange = (e) => {
-    setMessage(e.target.value);
+    setInputText(e.target.value);
   };
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (message.trim()) {
-      onSendMessage(message);
-      setMessage('');
-      resetTranscript();
+    if (inputText.trim()) {
+      onSendMessage(inputText);
+      setInputText('');
     }
   };
 
-  // Handlers for the voice input button
-  const handleVoiceMouseDown = () => {
-    if (!listening) {
-      resetTranscript();
-      setMessage(''); // Clear text field on new voice input
-      SpeechRecognition.startListening({ continuous: true });
-    }
-  };
-
-  const handleVoiceMouseUp = () => {
-    if (listening) {
-      SpeechRecognition.stopListening();
-    }
+  const getPlaceholderText = () => {
+    if (isRecording) return "Recording...";
+    if (isTranscribing) return "Transcribing...";
+    return "Type or hold the mic to talk...";
   };
 
   return (
@@ -75,23 +84,22 @@ const ChatInput = ({ onSendMessage, isLoading }) => {
       <form onSubmit={handleSubmit} className="chat-form">
         <input
           type="text"
-          value={message}
+          value={inputText}
           onChange={handleTextChange}
-          placeholder={listening ? "Listening..." : "Type or hold the mic to talk..."}
-          disabled={isLoading || listening}
+          placeholder={getPlaceholderText()}
+          disabled={isLoading || isRecording || isTranscribing}
         />
         <div className="button-container">
           {/* Voice Input Button */}
           <button
             type="button"
-            className={`voice-button ${listening ? 'recording' : ''}`}
-            onMouseDown={handleVoiceMouseDown}
-            onMouseUp={handleVoiceMouseUp}
-            onTouchStart={handleVoiceMouseDown} // For mobile
-            onTouchEnd={handleVoiceMouseUp}   // For mobile
-            disabled={isLoading}
+            className={`voice-button ${isRecording ? 'recording' : ''}`}
+            onMouseDown={startRecording}
+            onMouseUp={stopRecording}
+            onTouchStart={startRecording}
+            onTouchEnd={stopRecording}
+            disabled={isLoading || isTranscribing}
           >
-            {/* Microphone SVG */}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
               <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" />
@@ -102,9 +110,8 @@ const ChatInput = ({ onSendMessage, isLoading }) => {
           <button
             type="submit"
             className="send-button"
-            disabled={isLoading || !message.trim() || listening}
+            disabled={isLoading || !inputText.trim()}
           >
-            {/* Arrow SVG */}
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
               <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
             </svg>
@@ -119,9 +126,9 @@ const ChatInput = ({ onSendMessage, isLoading }) => {
 const ChatPage = () => {
   const [chatHistory, setChatHistory] = useState([]);
   const [isSending, setIsSending] = useState(false);
+  const [inputText, setInputText] = useState(""); // State for the input field
   const chatEndRef = useRef(null);
 
-  // Automatically scroll to the latest message
   useEffect(() => {
     chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [chatHistory]);
@@ -130,25 +137,72 @@ const ChatPage = () => {
     if (!prompt.trim() || isSending) return;
 
     const userMessage = { role: 'user', message: prompt };
-    setChatHistory(prev => [...prev, userMessage]);
+    // Add user message and a temporary placeholder for the bot's response
+    setChatHistory(prev => [...prev, userMessage, { role: 'assistant', message: '...' }]);
     setIsSending(true);
 
-    // Placeholder for the bot's response
-    setChatHistory(prev => [...prev, { role: 'assistant', message: '...' }]);
-
-    // --- Simulate API call for a response ---
-    // In a real app, you would make a fetch/axios call to your backend here.
-    setTimeout(() => {
-      const botResponse = `This is a simulated response to: "${prompt}"`;
-      // Replace the placeholder with the actual response
-      setChatHistory(prev => {
-        const newHistory = [...prev];
-        newHistory[newHistory.length - 1] = { role: 'assistant', message: botResponse };
-        return newHistory;
-      });
-      setIsSending(false);
-    }, 1500); // Simulate network delay
-    
+    try {
+        const response = await fetch('/api/ask', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ text: prompt }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let fullResponse = '';
+
+        while (true) {
+            const { value, done } = await reader.read();
+            if (done) break;
+
+            const chunk = decoder.decode(value, { stream: true });
+            const events = chunk.split('\n\n');
+
+            for (const event of events) {
+                if (event.startsWith('data:')) {
+                    const dataStr = event.substring(5).trim();
+                     if (dataStr) {
+                        try {
+                           const dataObj = JSON.parse(dataStr);
+                            if (dataObj.token) {
+                                fullResponse += dataObj.token;
+                                // Update the last message in history with the streaming content
+                                setChatHistory(prev => {
+                                    const newHistory = [...prev];
+                                    newHistory[newHistory.length - 1] = { role: 'assistant', message: fullResponse + '▌' };
+                                    return newHistory;
+                                });
+                            }
+                        } catch (e) {
+                            console.error("Error parsing stream data:", e);
+                        }
+                    }
+                }
+            }
+        }
+        
+        // Final update to remove the cursor
+        setChatHistory(prev => {
+            const newHistory = [...prev];
+            newHistory[newHistory.length - 1] = { role: 'assistant', message: fullResponse };
+            return newHistory;
+        });
+
+    } catch (error) {
+        console.error("Error fetching AI response:", error);
+        setChatHistory(prev => {
+             const newHistory = [...prev];
+             newHistory[newHistory.length - 1] = { role: 'assistant', message: "Sorry, I couldn't get a response. Please try again." };
+             return newHistory;
+        });
+    } finally {
+        setIsSending(false);
+    }
   }, [isSending]);
 
   return (
@@ -162,21 +216,30 @@ const ChatPage = () => {
         ) : (
           chatHistory.map((chat, index) => (
             <div key={index} className={`message-wrapper ${chat.role}`}>
-              <div className="chat-avatar">{chat.role === 'assistant' ? '🤖' : '👤'}</div>
+              <div className="chat-avatar">
+                {chat.role === 'assistant' ? (
+                  <img src={chatbotLogo} alt="Dobby" className="avatar-image" />
+                ) : '👤'}
+              </div>
               <div className="message-bubble">{chat.message}</div>
             </div>
           ))
         )}
         <div ref={chatEndRef} />
       </div>
-      <ChatInput onSendMessage={handleSendMessage} isLoading={isSending} />
+      <ChatInput
+        onSendMessage={handleSendMessage}
+        isLoading={isSending}
+        setInputText={setInputText}
+        inputText={inputText}
+      />
     </div>
   );
 };
 
 
 // =================================================================================
-// Auth Components (Login and SignUp)
+// Auth Components (Login and SignUp) - No changes needed here
 // =================================================================================
 
 const AuthForm = ({ isLogin = false }) => {
@@ -187,15 +250,11 @@ const AuthForm = ({ isLogin = false }) => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    setError(''); // Clear previous errors
+    setError('');
     if (!email || !password) {
       setError('Please fill in all fields.');
       return;
     }
-    // --- Mock Authentication ---
-    // In a real app, this is where you'd call Firebase's signInWithEmailAndPassword or createUserWithEmailAndPassword
-    console.log(`Attempting to ${isLogin ? 'log in' : 'sign up'} with:`, { email, password });
-    // Simulate a successful login/signup and navigate to the chat page
     mockUser.isLoggedIn = true;
     navigate('/chat');
   };
@@ -206,23 +265,11 @@ const AuthForm = ({ isLogin = false }) => {
         <h2>{isLogin ? 'Log In' : 'Sign Up'}</h2>
         <div className="form-group">
           <label htmlFor="email">Email</label>
-          <input
-            type="email"
-            id="email"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
+          <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
         </div>
         <div className="form-group">
           <label htmlFor="password">Password</label>
-          <input
-            type="password"
-            id="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
+          <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
         </div>
         {error && <p className="error-message">{error}</p>}
         <button type="submit" className="btn-solid-green full-width">
@@ -249,9 +296,7 @@ const SignUp = () => <AuthForm isLogin={false} />;
 
 const Header = ({ user }) => {
   const navigate = useNavigate();
-
   const handleLogout = () => {
-    // In a real app, call Firebase's signOut()
     mockUser.isLoggedIn = false;
     navigate('/login');
   };
@@ -259,9 +304,10 @@ const Header = ({ user }) => {
   return (
     <header className="app-header">
       <div className="logo">
+        <img src={chatbotLogo} alt="Dobby Logo" className="header-logo" />
         <div className="brand-names">
           <span className="main-brand">Dobby</span>
-          <span className="sub-brand">Your Assistant</span>
+          <span className="sub-brand">GUVI Assistant</span>
         </div>
       </div>
       <nav>
@@ -280,7 +326,6 @@ const Header = ({ user }) => {
 
 
 function App() {
-  // This state would be managed by onAuthStateChanged in a real Firebase app.
   const [user] = useState(mockUser);
 
   return (
@@ -291,15 +336,8 @@ function App() {
           <Routes>
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<SignUp />} />
-            <Route
-              path="/chat"
-              element={user.isLoggedIn ? <ChatPage /> : <Navigate to="/login" />}
-            />
-            {/* Redirect root to chat if logged in, otherwise to login */}
-            <Route
-              path="/"
-              element={user.isLoggedIn ? <Navigate to="/chat" /> : <Navigate to="/login" />}
-            />
+            <Route path="/chat" element={user.isLoggedIn ? <ChatPage /> : <Navigate to="/login" />} />
+            <Route path="/" element={user.isLoggedIn ? <Navigate to="/chat" /> : <Navigate to="/login" />} />
           </Routes>
         </main>
       </div>