Update frontend/src/App.jsx

frontend/src/App.jsx

@@ -1,71 +1,307 @@
-import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
-import { onAuthStateChanged } from 'firebase/auth';
-import { auth } from './services/firebase';
-import Header from './components/layout/Header';
-import Login from './components/auth/Login';
-import SignUp from './components/auth/SignUp';
-import ChatInterface from './components/chat/ChatInterface';
-import History from './components/chat/History';
-import Sidebar from './components/layout/Sidebar'; // Assuming Sidebar is in components/layout
-import './index.css';
+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';
 
-function App() {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [currentChatId, setCurrentChatId] = useState(null); // State to manage current chat session
+// To keep the code clean, we define a simple "user" object.
+// In a real app, this would come from your Firebase auth state.
+const mockUser = {
+  isLoggedIn: true,
+};
+
+// =================================================================================
+// Chat Components (ChatPage and ChatInput)
+// =================================================================================
 
+const ChatInput = ({ onSendMessage, isLoading }) => {
+  const [message, setMessage] = useState('');
+  const {
+    transcript,
+    listening,
+    resetTranscript,
+    browserSupportsSpeechRecognition,
+  } = useSpeechRecognition();
+
+  // This effect automatically sends the message when the user stops speaking.
   useEffect(() => {
-    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
-      setUser(currentUser);
-      setLoading(false);
-    });
-    return () => unsubscribe();
-  }, []);
-
-  // Function to start a new chat (or handle existing chat selection)
-  const startNewChat = () => {
-    setCurrentChatId(null); // Resets to a new chat session
-    // In a real app, you might generate a new chatId here or navigate
+    // 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]);
+
+  // Update the input field with the live transcript while listening.
+  useEffect(() => {
+    if (listening) {
+      setMessage(transcript);
+    }
+  }, [transcript, listening]);
+
+  if (!browserSupportsSpeechRecognition) {
+    return <div className="error-message">Speech recognition is not supported by your browser.</div>;
+  }
+
+  const handleTextChange = (e) => {
+    setMessage(e.target.value);
   };
 
-  // Function to load a specific chat from history
-  const loadChat = (chatId) => {
-    setCurrentChatId(chatId);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (message.trim()) {
+      onSendMessage(message);
+      setMessage('');
+      resetTranscript();
+    }
   };
 
-  if (loading) {
-    return <div>Loading...</div>; // Or a proper spinner component
-  }
+  // 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();
+    }
+  };
+
+  return (
+    <div className="chat-input-area">
+      <form onSubmit={handleSubmit} className="chat-form">
+        <input
+          type="text"
+          value={message}
+          onChange={handleTextChange}
+          placeholder={listening ? "Listening..." : "Type or hold the mic to talk..."}
+          disabled={isLoading || listening}
+        />
+        <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}
+          >
+            {/* 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" />
+            </svg>
+          </button>
+
+          {/* Text Send Button */}
+          <button
+            type="submit"
+            className="send-button"
+            disabled={isLoading || !message.trim() || listening}
+          >
+            {/* 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>
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+
+const ChatPage = () => {
+  const [chatHistory, setChatHistory] = useState([]);
+  const [isSending, setIsSending] = useState(false);
+  const chatEndRef = useRef(null);
+
+  // Automatically scroll to the latest message
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [chatHistory]);
+
+  const handleSendMessage = useCallback(async (prompt) => {
+    if (!prompt.trim() || isSending) return;
+
+    const userMessage = { role: 'user', message: prompt };
+    setChatHistory(prev => [...prev, userMessage]);
+    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
+    
+  }, [isSending]);
+
+  return (
+    <div className="chat-main">
+      <div className="chat-messages">
+        {chatHistory.length === 0 ? (
+          <div className="empty-chat-placeholder">
+            <h1>Dobby is here to help!</h1>
+            <p>Start the conversation by typing or using your voice.</p>
+          </div>
+        ) : (
+          chatHistory.map((chat, index) => (
+            <div key={index} className={`message-wrapper ${chat.role}`}>
+              <div className="chat-avatar">{chat.role === 'assistant' ? '🤖' : '👤'}</div>
+              <div className="message-bubble">{chat.message}</div>
+            </div>
+          ))
+        )}
+        <div ref={chatEndRef} />
+      </div>
+      <ChatInput onSendMessage={handleSendMessage} isLoading={isSending} />
+    </div>
+  );
+};
+
+
+// =================================================================================
+// Auth Components (Login and SignUp)
+// =================================================================================
+
+const AuthForm = ({ isLogin = false }) => {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setError(''); // Clear previous errors
+    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');
+  };
+
+  return (
+    <div className="auth-container">
+      <form className="auth-form" onSubmit={handleSubmit}>
+        <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
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="password">Password</label>
+          <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">
+          {isLogin ? 'Log In' : 'Sign Up'}
+        </button>
+        <div className="auth-switch">
+          {isLogin ? (
+            <p>Don't have an account? <Link to="/signup">Sign Up</Link></p>
+          ) : (
+            <p>Already have an account? <Link to="/login">Log In</Link></p>
+          )}
+        </div>
+      </form>
+    </div>
+  );
+};
+
+const Login = () => <AuthForm isLogin={true} />;
+const SignUp = () => <AuthForm isLogin={false} />;
+
+// =================================================================================
+// Header and Main App Component
+// =================================================================================
+
+const Header = ({ user }) => {
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    // In a real app, call Firebase's signOut()
+    mockUser.isLoggedIn = false;
+    navigate('/login');
+  };
+
+  return (
+    <header className="app-header">
+      <div className="logo">
+        <div className="brand-names">
+          <span className="main-brand">Dobby</span>
+          <span className="sub-brand">Your Assistant</span>
+        </div>
+      </div>
+      <nav>
+        {user && user.isLoggedIn ? (
+          <button onClick={handleLogout} className="btn-solid-green">Log Out</button>
+        ) : (
+          <>
+            <Link to="/login" className="link-green">Log In</Link>
+            <Link to="/signup" className="btn-solid-green">Sign Up</Link>
+          </>
+        )}
+      </nav>
+    </header>
+  );
+};
+
+
+function App() {
+  // This state would be managed by onAuthStateChanged in a real Firebase app.
+  const [user] = useState(mockUser);
 
   return (
     <Router>
       <div className="app-wrapper">
         <Header user={user} />
-
-        {/* This div will contain both the Sidebar and the main content area (chat/history) */}
-        <div className="content-area">
-          {/* Render Sidebar only if user is logged in */}
-          {user && <Sidebar startNewChat={startNewChat} loadChat={loadChat} />}
-
-          {/* The main content area where chat or history will be rendered */}
-          <main className="main-content-flex"> {/* New class for flex container of routes */}
-            <Routes>
-              <Route path="/login" element={<Login />} />
-              <Route path="/signup" element={<SignUp />} />
-              <Route
-                path="/chat"
-                element={user ? <ChatInterface currentChatId={currentChatId} /> : <Navigate to="/login" />}
-              />
-              <Route
-                path="/history"
-                element={user ? <History loadChat={loadChat} /> : <Navigate to="/login" />}
-              />
-              {/* Redirect root to chat if logged in, otherwise to login */}
-              <Route path="/" element={user ? <Navigate to="/chat" /> : <Navigate to="/login" />} />
-            </Routes>
-          </main>
-        </div>
+        <main className="main-content">
+          <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" />}
+            />
+          </Routes>
+        </main>
       </div>
     </Router>
   );