added voice

Dockerfile

@@ -0,0 +1,55 @@
+FROM python:3.9-slim
+
+# Install curl, Node.js, Ollama, and Nginx in a single RUN instruction
+RUN apt-get update && \
+    apt-get install -y curl nginx && \
+    # Install Ollama (using their official script)
+    curl -fsSL https://ollama.ai/install.sh | sh && \
+    # Install Node.js 18.x from NodeSource
+    curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
+    apt-get install -y nodejs && \
+    # Clean up APT caches to reduce image size
+    apt-get clean && rm -rf /var/lib/apt/lists/*
+
+# Create Nginx cache/temp and log directories as root
+RUN mkdir -p /var/cache/nginx /var/lib/nginx/body /var/lib/nginx/fastcgi /var/lib/nginx/proxy /var/lib/nginx/scgi /var/lib/nginx/uwsgi /var/log/nginx
+
+# Set up user and environment
+# Running as a non-root user is good practice
+RUN useradd -m -u 1000 user
+# NOW chown the directories, after the user 'user' is created
+RUN chown -R user:user /var/cache/nginx /var/lib/nginx /var/log/nginx && \
+    chmod -R 755 /var/cache/nginx /var/lib/nginx /var/log/nginx
+
+# --- CRITICAL CHANGE: Move USER instruction HERE ---
+USER user
+ENV HOME=/home/user \
+    PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR $HOME/app
+
+# Copy requirements.txt FIRST to leverage Docker caching for Python dependencies
+COPY --chown=user requirements.txt .
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy the entire frontend directory early to ensure Node.js dependencies are installed
+COPY --chown=user frontend frontend/
+
+# Install Node.js dependencies for the frontend and build it
+RUN cd frontend && npm install --production=false && npm run build
+
+# Copy the Nginx configuration
+COPY --chown=user nginx.conf /etc/nginx/nginx.conf
+
+# Copy the rest of the application files AFTER dependencies are installed
+COPY --chown=user . .
+
+# Make the start script executable
+RUN chmod +x start.sh
+
+# Expose ports for FastAPI (7860) and Nginx (8501)
+EXPOSE 7860
+EXPOSE 8501
+
+# Command to execute when the container starts
+CMD ["./start.sh"]

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/README.md

@@ -0,0 +1,12 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "autoprefixer": "^10.4.21",
+    "firebase": "^12.0.0",
+    "postcss": "^8.5.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.7.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.30.1",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.10",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
+    "tailwindcss": "^3.4.17",
+    "vite": "^7.0.4"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.css

@@ -0,0 +1,23 @@
+/* frontend/src/App.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Optional: Basic body styling */
+body {
+  margin: 0;
+  font-family: 'Inter', "Noto Sans", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Hide scrollbar for webkit browsers */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* For IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}

frontend/src/App.jsx

@@ -0,0 +1,54 @@
+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 './index.css';
+
+function App() {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
+      setUser(currentUser);
+      setLoading(false);
+    });
+    return () => unsubscribe();
+  }, []);
+
+  if (loading) {
+    return <div>Loading...</div>; // Or a proper spinner component
+  }
+
+  return (
+    <Router>
+      <div className="app-wrapper">
+        <Header user={user} />
+        <main>
+          <Routes>
+            <Route path="/login" element={<Login />} />
+            <Route path="/signup" element={<SignUp />} />
+            <Route 
+              path="/chat" 
+              element={user ? <ChatInterface /> : <Navigate to="/login" />} 
+            />
+            <Route 
+              path="/history" 
+              element={user ? <History /> : <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>
+    </Router>
+  );
+}
+
+export default App;

frontend/src/components/auth/Login.jsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { signInWithEmailAndPassword } from "firebase/auth";
+import { auth } from '../../services/firebase.js';
+import { useNavigate, Link } from 'react-router-dom';
+
+const Login = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      navigate('/chat'); // Redirect to chat on successful login
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <div className="auth-container">
+      <div className="auth-form">
+        <h2>Login to Your Account</h2>
+        <form onSubmit={handleLogin}>
+          <div className="form-group">
+            <label>Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label>Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+            />
+          </div>
+          {error && <p className="error-message">{error}</p>}
+          <div className="forgot-password">
+            <Link to="/forgot-password">Forgot Password?</Link>
+          </div>
+          <button type="submit" className="btn-primary">Login</button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Login;

frontend/src/components/auth/SignUp.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import { auth } from '/src/services/firebase.js';
+import { useNavigate } from 'react-router-dom';
+
+const SignUp = () => {
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  const handleSignUp = async (e) => {
+    e.preventDefault();
+    setError('');
+    try {
+      await createUserWithEmailAndPassword(auth, email, password);
+      navigate('/chat'); // Redirect to chat on successful sign-up
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <div className="auth-container">
+      <div className="auth-form">
+        <h2>Sign up</h2>
+        <form onSubmit={handleSignUp}>
+          <div className="form-group">
+            <label>Name</label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter your name"
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label>Email</label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label>Password</label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+            />
+          </div>
+          {error && <p className="error-message">{error}</p>}
+          <button type="submit" className="btn-primary">Sign Up</button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default SignUp;

frontend/src/components/chat/ChatInputArea.jsx

@@ -0,0 +1,104 @@
+// frontend/src/components/chat/ChatInputArea.jsx
+import React, { useState, useRef } from 'react';
+import { ReactMic } from 'react-mic'; // For audio recording
+import axios from 'axios'; // For sending audio to backend
+
+const ChatInputArea = ({ onSendMessage, onSendVoiceMessage, isLoading }) => {
+  const [message, setMessage] = useState('');
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordedBlob, setRecordedBlob] = useState(null); // To hold the recorded audio blob
+
+  // 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';
+
+  const handleTextChange = (e) => {
+    setMessage(e.target.value);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (message.trim()) {
+      onSendMessage(message);
+      setMessage('');
+    }
+  };
+
+  // --- Voice Recording Handlers ---
+  const startRecording = () => {
+    if (isLoading) return; // Prevent recording if already busy
+    setIsRecording(true);
+    setRecordedBlob(null); // Clear previous recording
+    console.log("Recording started...");
+  };
+
+  const stopRecording = () => {
+    setIsRecording(false);
+    console.log("Recording stopped.");
+  };
+
+  const onStop = (recordedBlob) => {
+    // This callback is triggered when recording stops
+    console.log('recordedBlob is: ', recordedBlob);
+    setRecordedBlob(recordedBlob); // Store the blob
+    // Call the voice message handler from props, which will then send to backend
+    onSendVoiceMessage(recordedBlob.blob);
+  };
+
+  // The actual sending to server logic is now moved to ChatInterface's onSendVoiceMessage
+  // This component just passes the audio blob up.
+
+  return (
+    <div className="chat-input-area">
+      <form onSubmit={handleSubmit} className="chat-form">
+        <input
+          type="text"
+          value={message}
+          onChange={handleTextChange}
+          placeholder={isRecording ? "Recording..." : "Type your message or hold for voice..."}
+          disabled={isLoading || isRecording}
+        />
+        <button type="submit" disabled={isLoading || isRecording || !message.trim()}>
+          Send
+        </button>
+
+        {/* Microphone icon and recording area */}
+        <div className="voice-input-container">
+          <button
+            type="button"
+            className={`voice-record-btn ${isRecording ? 'recording' : ''}`}
+            onMouseDown={startRecording}
+            onMouseUp={stopRecording}
+            // For mobile touch events
+            onTouchStart={startRecording}
+            onTouchEnd={stopRecording}
+            disabled={isLoading}
+            title="Hold to record voice"
+          >
+            {isRecording ? (
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6 animate-pulse">
+                <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>
+            ) : (
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-6 h-6">
+                <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>
+          <ReactMic
+            record={isRecording}
+            className="sound-wave"
+            onStop={onStop}
+            strokeColor="#00000000" // Transparent stroke
+            backgroundColor="#00000000" // Transparent background for wave
+            mimeType="audio/webm" // Common format for browser recording
+          />
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ChatInputArea;

frontend/src/components/chat/ChatInterface.css

@@ -0,0 +1,172 @@
+/* General Layout */
+.chat-layout {
+    display: flex;
+    height: 100vh;
+    overflow: hidden; /* Prevent body scroll if content overflows */
+}
+
+.chat-main {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: #f9f9f9;
+}
+
+/* Chat Messages Area */
+.chat-messages {
+    flex-grow: 1;
+    overflow-y: auto; /* Enable scrolling for messages */
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 15px; /* Spacing between message wrappers */
+}
+
+/* Empty Chat Placeholder */
+.empty-chat-placeholder {
+    text-align: center;
+    padding: 50px;
+    color: #666;
+    flex-grow: 1; /* Pushes content to the bottom if few messages */
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+.empty-chat-placeholder h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    color: #333;
+}
+.empty-chat-placeholder p {
+    font-size: 1.1em;
+    line-height: 1.6;
+}
+
+/* Message Wrapper (contains avatar and bubble) */
+.message-wrapper {
+    display: flex; /* Use flexbox for layout of avatar and bubble */
+    align-items: flex-start; /* Align items to the top */
+    max-width: 100%; /* Ensure it doesn't overflow */
+}
+
+/* Specific styles for user messages (align to right) */
+.message-wrapper.user {
+    justify-content: flex-end; /* Push user messages to the right */
+    flex-direction: row-reverse; /* Put avatar on the right for user */
+}
+
+/* Chat Avatar Styling */
+.chat-avatar {
+    font-size: 24px; /* Still useful for user emoji */
+    padding: 8px;
+    border-radius: 50%;
+    background-color: #e0e0e0; /* Default background for avatar circle */
+    min-width: 40px;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    /* Margins for spacing */
+    margin-right: 10px; /* Default for assistant avatar */
+    overflow: hidden; /* Crucial to clip image if it's larger than the circle */
+}
+
+/* Adjust margin for user avatar (since row-reverse) */
+.message-wrapper.user .chat-avatar {
+    margin-left: 10px;
+    margin-right: 0;
+}
+
+/* Style for the actual image inside the avatar div */
+.chat-avatar .avatar-image {
+    width: 100%; /* Make image fill the avatar div */
+    height: 100%; /* Make image fill the avatar div */
+    object-fit: cover; /* Crop and cover the area without distortion */
+    border-radius: 50%; /* Ensure the image itself is also rounded */
+}
+
+/* Message Bubble Styling */
+.message-bubble {
+    background-color: #f0f0f0;
+    padding: 12px 18px;
+    border-radius: 20px;
+    max-width: 70%; /* Limit message width */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    /* --- THE KEY CSS PROPERTY FOR NEWLINES --- */
+    white-space: pre-wrap; /* This will make '\n' characters create new lines */
+    /* --- END KEY CSS PROPERTY --- */
+
+    word-break: break-word; /* Ensure long words break within the bubble */
+    overflow-wrap: break-word; /* Modern equivalent */
+}
+
+/* Specific styling for assistant bubbles */
+.message-wrapper.assistant .message-bubble {
+    background-color: #e6f7ff; /* Light blue for assistant */
+    border-bottom-left-radius: 5px; /* Pointy bottom-left for assistant */
+    margin-right: auto; /* Push to left, next to sidebar */
+}
+
+/* Specific styling for user bubbles */
+.message-wrapper.user .message-bubble {
+    background-color: #d1e7dd; /* Light green for user */
+    border-bottom-right-radius: 5px; /* Pointy bottom-right for user */
+    margin-left: auto; /* Push to right */
+}
+
+/* Chat Input Area */
+.chat-input-area {
+    padding: 20px;
+    border-top: 1px solid #eee;
+    background-color: #fff;
+}
+
+.chat-form {
+    display: flex;
+    gap: 10px;
+}
+
+.chat-form input[type="text"] {
+    flex-grow: 1;
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 25px;
+    font-size: 16px;
+    outline: none;
+}
+
+.chat-form button {
+    padding: 12px 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 25px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.2s;
+}
+
+.chat-form button:hover:not(:disabled) {
+    background-color: #0056b3;
+}
+
+.chat-form button:disabled {
+    background-color: #a0a0a0;
+    cursor: not-allowed;
+}
+
+/* Blinking Cursor */
+.blinking-cursor {
+    animation: blink 1s step-end infinite;
+    display: inline-block; /* Essential for it to be visible next to text */
+    width: 0.5em; /* Give it a small width */
+}
+
+@keyframes blink {
+    from, to { opacity: 1; }
+    50% { opacity: 0; }
+}

frontend/src/components/chat/ChatInterface.jsx

@@ -0,0 +1,254 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { saveChatHistory } from '../../services/firestore';
+import { auth } from '../../services/firebase';
+import Sidebar from '../layout/Sidebar';
+import ChatInputArea from './ChatInputArea';
+import ChatbotAvatar from '../../assets/chatbot.png';
+import axios from 'axios'; // Import axios here for the voice API call
+
+const ChatInterface = () => {
+  const [chatHistory, setChatHistory] = useState([]);
+  const [isSending, setIsSending] = useState(false);
+  const chatEndRef = useRef(null);
+
+  const FASTAPI_LLM_URL = '/api/ask'; // Endpoint for LLM interaction
+  const FASTAPI_TRANSCRIBE_URL = '/api/transcribe-audio'; // Endpoint for audio transcription
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [chatHistory]);
+
+  const handleNewChat = () => {
+    if (auth.currentUser && chatHistory.length > 0) {
+      saveChatHistory(chatHistory);
+    }
+    setChatHistory([]);
+  };
+
+  const handleSendMessage = async (userPrompt) => {
+    if (!userPrompt.trim() || isSending) return;
+
+    const userMessage = { role: 'user', message: userPrompt.trim(), timestamp: new Date() };
+    setChatHistory(prev => [
+      ...prev,
+      userMessage,
+      { role: 'assistant', message: 'Thinking...', streaming: true, timestamp: new Date() }
+    ]);
+    setIsSending(true);
+
+    let currentFullResponse = '';
+    let assistantMessageTimestamp = new Date();
+    let assistantMessageIndex = -1;
+
+    setChatHistory(prev => {
+      const updated = [...prev];
+      assistantMessageIndex = updated.findIndex(msg => msg.role === 'assistant' && msg.streaming);
+      if (assistantMessageIndex === -1) {
+          assistantMessageIndex = updated.length - 1;
+      }
+      return updated;
+    });
+
+    try {
+      const response = await fetch(FASTAPI_LLM_URL, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ text: userMessage.message }),
+      });
+
+      if (!response.ok) {
+        const errorDetail = await response.text();
+        throw new Error(`HTTP error! Status: ${response.status}. Detail: ${errorDetail}`);
+      }
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder('utf-8');
+      let buffer = '';
+
+      while (true) {
+        const { value, done } = await reader.read();
+        if (done) {
+            console.log("Stream finished.");
+            processPartialBuffer(buffer);
+            break;
+        }
+        const decodedChunk = decoder.decode(value, { stream: true });
+        buffer += decodedChunk;
+
+        const events = buffer.split('\n\n');
+        buffer = events.pop() || '';
+
+        for (const eventString of events) {
+          processPartialBuffer(eventString);
+        }
+
+        setChatHistory(prev => {
+          const updated = [...prev];
+          const targetMessage = updated[assistantMessageIndex];
+          if (targetMessage && targetMessage.role === 'assistant') {
+            targetMessage.message = currentFullResponse + (targetMessage.streaming ? '▌' : '');
+            targetMessage.streaming = true;
+          }
+          return updated;
+        });
+      }
+
+      function processPartialBuffer(line) {
+        if (line.startsWith('data:')) {
+          try {
+            const jsonString = line.substring(5);
+            const parsedData = JSON.parse(jsonString);
+            if (parsedData.token) {
+              currentFullResponse += parsedData.token;
+            } else if (parsedData.event === 'error') {
+              console.error("Backend error received:", parsedData.error);
+              currentFullResponse += `\n[AI Error: ${parsedData.error}]`;
+            }
+          } catch (err) {
+            console.error('Error parsing event data:', line, err);
+          }
+        } else if (line.trim() !== '') {
+            console.warn("Non-data line encountered:", `"${line}"`);
+        }
+      }
+
+    } catch (err) {
+      console.error('General Fetch/Stream Error:', err);
+      currentFullResponse += `\nSorry, something went wrong. Please try again. [Error: ${err.message}]`;
+      setChatHistory(prev => {
+        const updated = [...prev];
+        const targetMessage = updated[assistantMessageIndex];
+        if (targetMessage) {
+          targetMessage.message = currentFullResponse;
+          targetMessage.timestamp = new Date();
+          targetMessage.streaming = false;
+        } else {
+            updated.push({ role: 'assistant', message: currentFullResponse, timestamp: new Date(), streaming: false });
+        }
+        return updated;
+      });
+    } finally {
+      setIsSending(false);
+      setChatHistory(prev => {
+        const updated = [...prev];
+        const targetMessage = updated[assistantMessageIndex];
+        if (targetMessage && targetMessage.role === 'assistant') {
+          targetMessage.message = currentFullResponse;
+          targetMessage.timestamp = assistantMessageTimestamp;
+          targetMessage.streaming = false;
+        }
+        if (!targetMessage || targetMessage.message === '') {
+           const fallbackMessage = "Sorry, an unexpected error occurred.";
+           updated.push({ role: 'assistant', message: fallbackMessage, timestamp: new Date(), streaming: false });
+        }
+        return updated;
+      });
+
+      if (auth.currentUser) {
+          setChatHistory(finalChatState => {
+              const chatToSave = [...finalChatState];
+              const lastMessageForSave = chatToSave.at(-1);
+              if (lastMessageForSave && lastMessageForSave.role === 'assistant' && lastMessageForSave.message.endsWith('▌')) {
+                  lastMessageForSave.message = lastMessageForSave.message.slice(0, -1);
+              }
+              saveChatHistory(chatToSave);
+              return finalChatState;
+          });
+      }
+    }
+  };
+
+  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
+    ]);
+    setIsSending(true);
+
+    let transcriptionResult = '';
+    try {
+        const formData = new FormData();
+        formData.append('audio_file', audioBlob, 'audio.webm'); // Ensure filename and type are consistent
+
+        const response = await axios.post(FASTAPI_TRANSCRIBE_URL, formData, {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+            timeout: 60000, // 60 seconds timeout for transcription
+        });
+
+        transcriptionResult = response.data.transcription;
+
+        if (transcriptionResult) {
+            // Update the user's "Recording audio..." message with the actual transcription
+            setChatHistory(prev => {
+                const updated = prev.filter(msg => msg.message !== '(Recording audio...)'); // Remove placeholder
+                return [...updated, { role: 'user', message: transcriptionResult, timestamp: new Date() }];
+            });
+            // Now, send the transcribed text to your LLM
+            await handleSendMessage(transcriptionResult);
+        } else {
+            alert('Could not transcribe audio. Please try speaking clearer.');
+            // Remove transcription messages if empty
+            setChatHistory(prev => prev.filter(msg => msg.message !== '(Recording audio...)' && msg.message !== 'Transcribing...'));
+        }
+    } 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.message !== '(Recording audio...)' && msg.message !== 'Transcribing...'));
+    } finally {
+        setIsSending(false);
+        // Ensure the "Transcribing..." message is removed
+        setChatHistory(prev => prev.filter(msg => !(msg.role === 'assistant' && msg.message === 'Transcribing...')));
+    }
+  };
+
+
+  return (
+    <div className="chat-layout">
+      <Sidebar onNewChat={handleNewChat} />
+      <div className="chat-main">
+        <div className="chat-messages hide-scrollbar">
+          {chatHistory.length === 0 ? (
+            <div className="empty-chat-placeholder">
+              <h1>Start a new conversation</h1>
+              <p>Type a message or record your voice to begin interacting.</p>
+              {!auth.currentUser && <p>Please log in to save your chat history.</p>}
+            </div>
+          ) : (
+            chatHistory.map((chat, index) => (
+              <div key={index} className={`message-wrapper ${chat.role}`}>
+                <div className="chat-avatar">
+                  {chat.role === 'assistant' ? (
+                    <img src={ChatbotAvatar} alt="Chatbot Avatar" className="avatar-image" />
+                  ) : (
+                    <div className="user-icon-placeholder">👤</div>
+                  )}
+                </div>
+                <div className="message-bubble">
+                  {chat.message}
+                  {chat.streaming && chat.role === 'assistant' && (
+                    <span className="blinking-cursor">▌</span>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+          <div ref={chatEndRef} />
+        </div>
+        <ChatInputArea
+          onSendMessage={handleSendMessage}
+          onSendVoiceMessage={handleSendVoiceMessage}
+          isLoading={isSending}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ChatInterface;

frontend/src/components/chat/History.css

@@ -0,0 +1,152 @@
+/* History.css */
+
+.chat-layout {
+  display: flex;
+  height: 100vh;
+  /* Assuming chat-layout takes full viewport height */
+}
+
+.chat-main {
+  flex-grow: 1;
+  padding: 20px;
+  background-color: #f0f2f5;
+  overflow-y: auto; /* Enable scrolling for main content */
+}
+
+.history-title {
+  color: #333;
+  margin-bottom: 20px;
+  font-size: 24px;
+}
+
+.history-list {
+  list-style: none;
+  padding: 0;
+}
+
+.history-item {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 15px 20px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.history-item:hover {
+  background-color: #e9ecef;
+}
+
+.history-icon {
+  font-size: 24px;
+  margin-right: 15px;
+}
+
+.history-details {
+  flex-grow: 1;
+}
+
+.history-prompt {
+  font-weight: bold;
+  color: #555;
+  margin-bottom: 5px;
+}
+
+.history-date {
+  font-size: 0.85em;
+  color: #888;
+}
+
+/* Conversation View Specific Styles */
+.conversation-view {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.back-button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-bottom: 15px;
+  font-size: 16px;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.back-button:hover {
+  background-color: #0056b3;
+}
+
+.conversation-title {
+  color: #333;
+  margin-bottom: 20px;
+  font-size: 20px;
+  border-bottom: 1px solid #eee;
+  padding-bottom: 10px;
+}
+
+.messages-list {
+  max-height: 500px; /* Limit height and enable scrolling for messages */
+  overflow-y: auto;
+  padding-right: 10px; /* For scrollbar spacing */
+}
+
+.message-item {
+  margin-bottom: 15px;
+  padding: 10px 15px;
+  border-radius: 8px;
+  max-width: 80%;
+  clear: both; /* Clear floats for alignment */
+}
+
+.message-item.user {
+  background-color: #dcf8c6; /* Light green for user messages */
+  align-self: flex-end; /* Align to the right in a flex container */
+  margin-left: auto; /* Push to the right */
+}
+
+.message-item.chatbot {
+  background-color: #e2e2e2; /* Light grey for chatbot messages */
+  align-self: flex-start; /* Align to the left */
+  margin-right: auto; /* Push to the left */
+}
+
+.message-sender {
+  font-weight: bold;
+  margin-bottom: 5px;
+  font-size: 0.9em;
+}
+
+.message-item.user .message-sender {
+  color: #3d8c1c; /* Darker green for user sender */
+}
+
+.message-item.chatbot .message-sender {
+  color: #555;
+}
+
+.message-content {
+  font-size: 1em;
+  line-height: 1.4;
+  word-wrap: break-word; /* Ensure long words wrap */
+}
+
+.message-timestamp {
+  font-size: 0.75em;
+  color: #999;
+  margin-top: 5px;
+  text-align: right;
+}
+
+/* Ensure messages-list items align correctly */
+.messages-list {
+  display: flex;
+  flex-direction: column;
+}

frontend/src/components/chat/History.jsx

@@ -0,0 +1,46 @@
+
+import React, { useState, useEffect } from 'react';
+import { getChatHistory } from '../../services/firestore.js';
+import Sidebar from '../layout/Sidebar';
+
+const History = () => {
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchHistory = async () => {
+      const userChats = await getChatHistory();
+      setChats(userChats);
+      setLoading(false);
+    };
+    fetchHistory();
+  }, []);
+
+  return (
+    <div className="chat-layout">
+      <Sidebar onNewChat={() => {}} />
+      <div className="chat-main">
+        <h2 className="history-title">History</h2>
+        {loading ? (
+          <p>Loading history...</p>
+        ) : (
+          <ul className="history-list">
+            {chats.map(chat => (
+              <li key={chat.id} className="history-item">
+                <span className="history-icon">💬</span>
+                <div className="history-details">
+                  <p className="history-prompt">{chat.title}</p>
+                  <span className="history-date">
+                    {new Date(chat.createdAt?.toDate()).toLocaleString()}
+                  </span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default History;

frontend/src/components/layout/Header.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { auth } from '../../services/firebase';
+import { signOut } from 'firebase/auth';
+import logo from '../../assets/chatbot.png'; // Assuming this is your Dobby logo
+
+const Header = ({ user }) => {
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    await signOut(auth);
+    navigate('/login');
+  };
+
+  return (
+    <header className="app-header">
+      <div className="logo">
+        <img src={logo} alt="Dobby Chatbot Logo" />
+        <div className="brand-names">
+          <span className="main-brand">Dobby</span>
+          <span className="sub-brand">GUVI Assistant</span>
+        </div>
+      </div>
+      <nav>
+        {user ? (
+          <>
+            <Link to="/chat">Home</Link>
+            <Link to="/features">Features</Link>
+            <Link to="/pricing">Pricing</Link>
+            {/* Log Out: Green background, white text */}
+            <button onClick={handleLogout} className="btn-solid-green">Log Out</button>
+          </>
+        ) : (
+          <>
+            <Link to="/">Home</Link>
+            <Link to="/features">Features</Link>
+            <Link to="/pricing">Pricing</Link>
+            <Link to="/contact">Contact</Link>
+            {/* Log In: Green text only */}
+            <Link to="/login" className="link-green">Log In</Link>
+            {/* Sign Up: Green background, white text */}
+            <Link to="/signup" className="btn-solid-green">Sign Up</Link>
+          </>
+        )}
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

frontend/src/components/layout/Sidebar.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { signOut } from "firebase/auth";
+import { auth } from '../../services/firebase.js';
+
+const Sidebar = ({ onNewChat }) => {
+  const navigate = useNavigate();
+
+  // No longer needed for sidebar, but keeping if still used elsewhere
+  const handleLogout = async () => {
+    try {
+      await signOut(auth);
+      navigate('/login');
+    } catch (error) {
+      console.error("Error signing out: ", error);
+    }
+  };
+
+  return (
+    <div className="sidebar">
+      <div className="sidebar-top">
+        <button className="new-chat-btn" onClick={onNewChat}>
+          <span className="plus-icon">+</span> New Chat
+        </button>
+        <nav className="sidebar-nav">
+          <Link to="/history" className="sidebar-nav-link active"> 
+           History
+          </Link>
+          <Link to="/settings" className="sidebar-nav-link">
+            Settings
+          </Link>
+        </nav>
+      </div>
+      {/* Removed sidebar-bottom section with Signup/Logout buttons */}
+    </div>
+  );
+};
+
+export default Sidebar;

frontend/src/index.css

@@ -0,0 +1,516 @@
+/* frontend/src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Define custom CSS Variables */
+:root {
+  --primary-color: #22c55e;
+  --background-color: #fff6d7;
+  --text-color: #333;
+  --white-color: #ffffff;
+  --border-color: #e5e7eb;
+  --green-button-bg: #4CAF50; /* Specific green for buttons */
+  --green-button-hover-bg: #45a049; /* Darker green on hover */
+  --dark-green-text: #0dba4b; /* Specific dark green for history/settings text */
+  --fontFamily: system-ui; /* Added a fallback for --fontFamily if not defined */
+  --header-height: 65px; /* Define a variable for consistent header height if it's fixed */
+}
+
+/* Global Styles for no full-page scrolling, and font-family */
+html, body, #root, .app-wrapper {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  /* overflow: hidden is critical for entire page */
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--fontFamily), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; /* Keep this for Firefox/Mozilla */
+  background-color: var(--white-color);
+  color: var(--text-color);
+}
+
+/* Hide scrollbar for webkit browsers */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+/* For IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* --- App Wrapper (main application container) --- */
+.app-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* Ensure app-wrapper takes full height */
+}
+
+main {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* --- Header --- */
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background-color: var(--white-color);
+  border-bottom: 1px solid var(--border-color);
+  /* position: sticky and top: 0 ensure it stays visible */
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  height: var(--header-height); /* Set fixed height for header if known */
+  box-sizing: border-box; /* Include padding in height calculation */
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logo img {
+  height: 40px;
+  width: auto;
+}
+
+.logo .brand-names {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.2;
+}
+
+.logo .main-brand {
+    font-size: 1.8em;
+    font-weight: bold;
+    color: var(--text-color);
+}
+
+.logo .sub-brand {
+    font-size: 0.9em;
+    color: #777;
+}
+
+.app-header nav {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.app-header nav a {
+  text-decoration: none;
+  color: var(--text-color);
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.app-header nav a:hover {
+  color: var(--primary-color);
+}
+
+/* Base button styles from root vars */
+.btn-primary {
+  background-color: var(--primary-color);
+  color: var(--white-color);
+  border: none;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+.btn-primary:hover {
+  background-color: #1e9d4e;
+}
+
+
+/* Specific Green Text Link (for Login) */
+.link-green {
+    color: var(--green-button-bg) !important;
+    font-weight: 600;
+    transition: color 0.3s ease;
+}
+
+.link-green:hover {
+    color: var(--green-button-hover-bg) !important;
+}
+
+/* Specific Solid Green Button (for Sign Up and Logout in Header) */
+.btn-solid-green {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: 600;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    box-sizing: border-box;
+
+    background-color: var(--green-button-bg);
+    color: var(--white-color) !important;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.btn-solid-green:hover {
+    background-color: var(--green-button-hover-bg);
+    color: var(--white-color) !important;
+}
+
+.btn-secondary {
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+.btn-secondary:hover {
+  background-color: #f0f0f0;
+  border-color: #c0c0c0;
+  color: #555;
+}
+
+
+/* --- Auth Forms --- */
+.auth-container { width: 100%; display: flex; justify-content: center; }
+.auth-form { width: 100%; max-width: 400px; padding: 2rem; }
+.auth-form h2 { text-align: center; margin-bottom: 2rem; }
+.form-group { margin-bottom: 1.5rem; }
+.form-group label { display: block; margin-bottom: 0.5rem; }
+.form-group input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  background-color: #fafafa;
+  box-sizing: border-box;
+}
+.forgot-password { text-align: right; margin-bottom: 1rem; font-size: 0.9em;}
+.error-message { color: red; text-align: center; margin-bottom: 1rem; }
+.auth-form .btn-primary { width: 100%; padding: 0.75rem; }
+
+/* --- Chat Layout --- */
+.chat-layout {
+  display: flex;
+  width: 100%;
+  /* This is crucial: take remaining height after header */
+  height: calc(100% - var(--header-height));
+}
+
+/* Sidebar Styling */
+.sidebar {
+  width: 260px;
+  background-color: #f9fafb;
+  padding: 1rem;
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between; /* Pushes content to top and bottom */
+  flex-shrink: 0;
+  height: 100%; /* Make sidebar take full height of chat-layout */
+  box-sizing: border-box;
+}
+
+/* sidebar-top now contains only the new chat button */
+.sidebar-top {
+    display: flex;
+    flex-direction: column;
+}
+
+/* New Chat Button Styling */
+.new-chat-btn {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 6px;
+  background-color: var(--dark-green-text);
+  color: var(--white-color);
+  cursor: pointer;
+  text-align: left;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  transition: background-color 0.3s ease;
+  margin-bottom: 1rem; /* Space below the button */
+}
+.new-chat-btn:hover {
+    background-color: var(--green-button-hover-bg);
+}
+
+.new-chat-btn .plus-icon {
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+/* sidebar-bottom will contain the nav links and be pushed to the bottom */
+.sidebar-bottom {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: auto; /* This pushes the nav section to the bottom */
+}
+
+/* Styling for History and Settings links */
+.sidebar-nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  text-decoration: none;
+  color: var(--dark-green-text);
+  border-radius: 6px;
+  background: transparent; /* Explicitly remove background */
+  border: none;
+  width: 100%;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+.sidebar-nav-link:hover {
+    background-color: transparent; /* Ensure no background on hover */
+    color: var(--green-button-hover-bg); /* Darker green on hover for text */
+}
+.sidebar-nav-link.active {
+    background-color: transparent; /* Ensure no background when active */
+    color: var(--dark-green-text); /* Keep dark green text when active */
+}
+
+/* Main chat content area */
+.chat-main {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--white-color);
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.chat-messages {
+  flex-grow: 1;
+  padding: 2rem;
+  overflow-y: auto; /* Keep scrollbar ONLY for chat conversation */
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.message-wrapper {
+  display: flex;
+  align-items: flex-start;
+  max-width: 100%;
+}
+.message-wrapper.user {
+    justify-content: flex-end;
+    flex-direction: row-reverse;
+}
+.message-wrapper.assistant { justify-content: flex-start; }
+
+/* Avatar specific styles */
+.chat-avatar {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #e0e0e0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.user-icon-placeholder {
+    font-size: 24px;
+    color: #666;
+}
+
+.message-wrapper.assistant .chat-avatar {
+    margin-right: 10px;
+}
+.message-wrapper.user .chat-avatar {
+    margin-left: 10px;
+}
+
+.chat-avatar .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+}
+
+.message-bubble {
+  padding: 0.75rem 1rem;
+  border-radius: 12px;
+  max-width: 70%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.message-wrapper.user .message-bubble {
+  background-color: var(--primary-color);
+  color: var(--white-color);
+  border-bottom-right-radius: 4px;
+}
+.message-wrapper.assistant .message-bubble {
+  background-color: #f3f4f6;
+  color: var(--text-color);
+  border-bottom-left-radius: 4px;
+}
+
+/* Blinking cursor for streaming */
+.blinking-cursor {
+    display: inline-block;
+    width: 0.5em;
+    background-color: var(--text-color);
+    animation: blink 1s step-end infinite;
+}
+
+@keyframes blink {
+    from, to { opacity: 1; }
+    50% { opacity: 0; }
+}
+
+
+.chat-input-area {
+  padding: 1rem 2rem;
+  border-top: 1px solid var(--border-color);
+  background-color: var(--white-color);
+}
+.chat-form { display: flex; gap: 0.5rem; }
+.chat-form input {
+  flex-grow: 1;
+  padding: 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background-color: #fafafa;
+  box-sizing: border-box;
+  outline: none;
+}
+.chat-form button {
+  background-color: var(--primary-color);
+  color: var(--white-color);
+  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+.chat-form button:hover {
+  background-color: #1e9d4e;
+}
+
+.empty-chat-placeholder {
+  text-align: center;
+  margin-top: 20%;
+  color: #9ca3af;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.empty-chat-placeholder h1 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    color: #333;
+}
+.empty-chat-placeholder p {
+    font-size: 1.1em;
+    line-height: 1.6;
+}
+
+/* --- History Page --- */
+.history-title { padding: 0 2rem; margin-top: 2rem; margin-bottom: 1.5rem; color: var(--text-color); }
+.history-list { list-style: none; padding: 0 2rem; }
+.history-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+.history-item:hover {
+    background-color: #f9f9f9;
+}
+.history-prompt { font-weight: 500; flex-grow: 1; }
+.history-date { font-size: 0.8rem; color: #6b7280; }
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .app-header {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 1rem;
+        gap: 10px;
+    }
+    .app-header nav {
+        flex-wrap: wrap;
+        justify-content: center;
+        width: 100%;
+        gap: 10px;
+    }
+    .chat-layout {
+        flex-direction: column;
+        /* On mobile, chat-layout height needs to account for header and horizontal sidebar */
+        height: calc(100% - var(--header-height) - var(--sidebar-height-mobile, 60px));
+    }
+    .sidebar {
+        width: 100%;
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+        padding: 10px;
+        flex-direction: row; /* Sidebar items in a row for mobile */
+        justify-content: center;
+        gap: 10px;
+        height: auto; /* Allow sidebar height to be determined by content */
+        overflow-y: hidden; /* Hide sidebar scrollbar on mobile if it has one */
+    }
+    .new-chat-btn {
+        width: auto;
+        font-size: 0.9em;
+        padding: 0.5rem 0.8rem;
+    }
+    .sidebar-nav {
+        margin-top: 0;
+        display: flex;
+        gap: 10px;
+    }
+    .sidebar-nav a, .sidebar-link {
+        padding: 0.5rem;
+        font-size: 0.9em;
+    }
+    .chat-main {
+        height: 100%; /* Take remaining height from parent chat-layout */
+    }
+    .chat-messages {
+        padding: 1rem;
+    }
+    .message-bubble {
+        max-width: 85%;
+    }
+    .chat-input-area {
+        padding: 1rem;
+    }
+}

frontend/src/main.jsx

@@ -0,0 +1,11 @@
+// frontend/src/main.jsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.jsx';
+import './App.css'; // Import Tailwind CSS
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

frontend/src/services/firebase.js

@@ -0,0 +1,21 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyCwM9fumgWifh9lf4tA_dINQqpR2vkHVxI",
+  authDomain: "custom-chatbot-b7358.firebaseapp.com",
+  projectId: "custom-chatbot-b7358",
+  storageBucket: "custom-chatbot-b7358.firebasestorage.app",
+  messagingSenderId: "313932051840",
+  appId: "1:313932051840:web:816fb21654e324451dbd65",
+  measurementId: "G-HR3DKV3BNR"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const db = getFirestore(app);
+
+export { auth, db };

frontend/src/services/firestore.js

@@ -0,0 +1,42 @@
+// src/services/firestore.js (No changes needed, assuming it handles nested Date objects)
+
+import { db, auth } from './firebase';
+import { collection, addDoc, query, where, getDocs, orderBy, serverTimestamp } from "firebase/firestore";
+
+// Save a new chat session to Firestore
+export const saveChatHistory = async (chatHistory) => {
+  if (!auth.currentUser) {
+    console.warn("Attempted to save chat history without a logged-in user.");
+    return; // Ensure user is logged in
+  }
+  try {
+    const userId = auth.currentUser.uid;
+    await addDoc(collection(db, "chats"), {
+      userId: userId,
+      history: chatHistory, // This array now contains { role, message, timestamp }
+      createdAt: serverTimestamp(),
+      title: chatHistory[0]?.message || 'New Chat'
+    });
+    console.log("Chat history saved successfully.");
+  } catch (error) {
+    console.error("Error saving chat history: ", error);
+  }
+};
+
+// Get all chat sessions for the current user
+export const getChatHistory = async () => {
+  if (!auth.currentUser) return [];
+  try {
+    const userId = auth.currentUser.uid;
+    const q = query(collection(db, "chats"), where("userId", "==", userId), orderBy("createdAt", "desc"));
+    const querySnapshot = await getDocs(q);
+    const chats = [];
+    querySnapshot.forEach((doc) => {
+      chats.push({ id: doc.id, ...doc.data() });
+    });
+    return chats;
+  } catch (error) {
+    console.error("Error fetching chat history: ", error);
+    return [];
+  }
+};

frontend/tailwind.config.js

@@ -0,0 +1,30 @@
+// tailwind.config.mjs
+import forms from '@tailwindcss/forms'
+import containerQueries from '@tailwindcss/container-queries'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'primary-green': '#22c55e',
+        'light-cream': '#fff6d7',
+        'white': '#ffffff',
+        'text-dark': '#111712',
+        'text-muted': '#648765',
+        'border-light': '#f0f4f0',
+      },
+      fontFamily: {
+        sans: ['Inter', '"Noto Sans"', 'sans-serif'],
+      },
+    },
+  },
+  plugins: [
+    forms,
+    containerQueries,
+  ],
+}

frontend/vite.config.js

@@ -0,0 +1,14 @@
+// vite.config.js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react'; // Make sure you have this import
+
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    esbuildOptions: {
+      loader: {
+        '.js': 'jsx', // This is where the loader mapping should go for dependency pre-bundling
+      },
+    },
+  },
+});

main.py

@@ -0,0 +1,145 @@
+import os
+import logging
+from fastapi import FastAPI, Request, HTTPException, UploadFile, File
+from fastapi.responses import HTMLResponse, StreamingResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from langchain_community.llms import Ollama
+import asyncio
+import json
+import httpx # For making HTTP requests to Ollama for transcription
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Initialize FastAPI app
+app = FastAPI()
+
+# IMPORTANT: Set Ollama host for both langchain and direct httpx calls
+OLLAMA_HOST_URL = "http://127.0.0.1:11434" # Ollama runs locally within the Docker container
+os.environ["OLLAMA_HOST"] = OLLAMA_HOST_URL
+
+MODEL_NAME = 'krishna_choudhary/tinyllama:latest' # For your LLM
+WHISPER_MODEL_NAME = 'dimavz/whisper-tiny' # For transcription
+
+# Mount static files for the React frontend
+app.mount("/assets", StaticFiles(directory="frontend/dist/assets"), name="assets")
+
+@app.get("/", response_class=HTMLResponse)
+async def serve_frontend():
+    try:
+        with open("frontend/dist/index.html", "r") as f:
+            return HTMLResponse(f.read())
+    except FileNotFoundError:
+        logger.error("frontend/dist/index.html not found. Have you run `npm run build` in your frontend directory?")
+        raise HTTPException(status_code=404, detail="Frontend index.html not found. Please ensure React build is complete.")
+
+def get_llm():
+    return Ollama(model=MODEL_NAME)
+
+class Question(BaseModel):
+    text: str
+
+@app.post("/ask")
+async def ask_question(question: Question):
+    try:
+        llm = get_llm()
+        logger.info(f"Received prompt: {question.text}")
+        async def generate_and_stream():
+            try:
+                async for chunk in llm.astream(question.text):
+                    for char in chunk:
+                        yield f"data: {json.dumps({'token': char})}\n\n"
+                        await asyncio.sleep(0.01)
+                yield "data: {\"event\": \"end\"}\n\n"
+            except Exception as e:
+                logger.error(f"Error during Ollama LLM stream: {e}", exc_info=True)
+                yield f"data: {json.dumps({'event': 'error', 'error': str(e)})}\n\n"
+                yield "data: {\"event\": \"end\"}\n\n"
+        return StreamingResponse(generate_and_stream(), media_type="text/event-stream")
+    except Exception as e:
+        logger.error(f"Error preparing streaming response for LLM: {e}", exc_info=True)
+        raise HTTPException(status_code=500, detail=f"Internal server error: {str(e)}")
+
+@app.post("/transcribe-audio")
+async def transcribe_audio(audio_file: UploadFile = File(...)):
+    """
+    Receives an audio file, sends it to Ollama's Whisper model for transcription,
+    and returns the transcribed text.
+    """
+    if not audio_file.content_type.startswith("audio/"):
+        raise HTTPException(status_code=400, detail="Invalid file type. Please upload an audio file.")
+
+    # Ollama's API for transcription expects a file path or bytes to be sent.
+    # We'll save the uploaded file temporarily and then send it.
+    temp_audio_path = f"/tmp/{audio_file.filename}" # Use /tmp for temporary files
+    try:
+        # Save the uploaded file to a temporary location
+        with open(temp_audio_path, "wb") as f:
+            f.write(await audio_file.read())
+
+        logger.info(f"Sending audio file {temp_audio_path} to Ollama for transcription.")
+
+        async with httpx.AsyncClient() as client:
+            with open(temp_audio_path, "rb") as f:
+                files = {"file": (audio_file.filename, f, audio_file.content_type)}
+                
+                import ollama
+                audio_bytes = await audio_file.read()
+                import base64
+                encoded_audio = base64.b64encode(audio_bytes).decode('utf-8')
+
+                ollama_transcribe_payload = {
+                    "model": WHISPER_MODEL_NAME,
+                    "prompt": "", 
+                    "stream": False,
+                    "options": {
+                       
+                    },
+                    "images": [encoded_audio] 
+                }
+
+                ollama_response = await client.post(
+                    f"{OLLAMA_HOST_URL}/api/generate",
+                    json=ollama_transcribe_payload,
+                    timeout=600 
+                )
+                ollama_response.raise_for_status()
+
+                response_data = ollama_response.json()
+                transcription = response_data.get("response", "").strip()
+
+                if not transcription:
+                    logger.warning("Ollama Whisper returned empty transcription.")
+                    raise HTTPException(status_code=500, detail="Failed to get transcription from Whisper model.")
+
+                return JSONResponse(content={"transcription": transcription})
+
+    except httpx.RequestError as e:
+        logger.error(f"Network error communicating with Ollama: {e}", exc_info=True)
+        raise HTTPException(status_code=503, detail=f"Could not connect to Ollama service: {str(e)}")
+    except httpx.HTTPStatusError as e:
+        logger.error(f"Ollama API returned an error: {e.response.status_code} - {e.response.text}", exc_info=True)
+        raise HTTPException(status_code=e.response.status_code, detail=f"Ollama API error: {e.response.text}")
+    except Exception as e:
+        logger.error(f"Error during audio transcription: {e}", exc_info=True)
+        raise HTTPException(status_code=500, detail=f"Transcription failed: {str(e)}")
+    finally:
+        # remove the audio after processing
+        if os.path.exists(temp_audio_path):
+            os.remove(temp_audio_path)
+
+@app.on_event("startup")
+async def startup_event():
+    logger.info(f"Starting up with LLM model: {MODEL_NAME} and Whisper model: {WHISPER_MODEL_NAME}")
+    client = ollama.AsyncClient(host=OLLAMA_HOST_URL)
+    try:
+        await client.list() # Check if Ollama is responsive
+        logger.info("Ollama server is accessible.")
+    except Exception as e:
+        logger.error(f"Ollama server not accessible at startup: {e}")
+
+@app.on_event("shutdown")
+async def shutdown_event():
+    logger.info("Shutting down FastAPI application.")

nginx.conf

@@ -0,0 +1,42 @@
+worker_processes auto;
+pid /var/lib/nginx/nginx.pid;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+
+    sendfile        on;
+    keepalive_timeout  65;
+
+    # Define the FastAPI upstream server
+    upstream fastapi_backend {
+        server 127.0.0.1:7860;
+    }
+
+    server {
+        listen 8501; 
+
+        root /home/user/app/frontend/dist;
+
+        index index.html index.htm;
+
+        # Serve static files for the React app
+        location / {
+            try_files $uri $uri/ /index.html; 
+        }
+
+        # Proxy API requests to the FastAPI backend
+        location /api/ {
+            proxy_pass http://fastapi_backend/; 
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+           
+        }
+    }
+}

requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+langchain
+langchain_community
+ollama
+requests
+python-multipart

start.sh

@@ -0,0 +1,106 @@
+#!/bin/bash
+
+# ==============================================================================
+# Start Script for Ollama, FastAPI Backend, and Nginx Frontend
+# This script initializes the environment, starts dependent services,
+# and then launches the main application components.
+# ==============================================================================
+
+# ------------------------------------------------------------------------------
+# 1. Environment Setup
+#    Set essential environment variables for performance and GPU usage.
+# ------------------------------------------------------------------------------
+echo "--- Initializing Environment Variables ---"
+export OMP_NUM_THREADS=4
+export MKL_NUM_THREADS=4
+export CUDA_VISIBLE_DEVICES=0 # Specifies which GPU to use, 0 for the first GPU
+
+# ------------------------------------------------------------------------------
+# 2. Start Ollama Server and Pull Models
+#    Ollama must be running and the required models available before FastAPI starts.
+# ------------------------------------------------------------------------------
+echo "--- Starting Ollama Server ---"
+# Start Ollama in the background
+# The 'serve' command runs the Ollama API server.
+ollama serve &
+
+# Define the models to be pulled
+MODEL_TO_PULL="krishna_choudhary/tinyllama:latest"
+WHISPER_MODEL_TO_PULL="dimavz/whisper-tiny"
+
+# Pull the LLM model if it's not already present
+echo "Checking for Ollama LLM model: $MODEL_TO_PULL"
+if ! ollama list | grep -q "$MODEL_TO_PULL"; then
+    echo "Pulling Ollama LLM model: $MODEL_TO_PULL (This may take some time)..."
+    ollama pull "$MODEL_TO_PULL"
+else
+    echo "Ollama LLM model $MODEL_TO_PULL already present."
+fi
+
+# Pull the Whisper model for transcription if it's not already present
+echo "Checking for Ollama Whisper model: $WHISPER_MODEL_TO_PULL"
+if ! ollama list | grep -q "$WHISPER_MODEL_TO_PULL"; then
+    echo "Pulling Ollama Whisper model: $WHISPER_MODEL_TO_PULL (This may take some time)..."
+    ollama pull "$WHISPER_MODEL_TO_PULL"
+else
+    echo "Ollama Whisper model $WHISPER_MODEL_TO_PULL already present."
+fi
+
+# Wait for Ollama to become responsive
+max_attempts=90 # Maximum attempts (90 seconds)
+attempt=0
+echo "Waiting for Ollama API to be ready (max $max_attempts seconds)..."
+while ! curl -s http://localhost:11434/api/tags >/dev/null; do
+    sleep 1
+    attempt=$((attempt + 1))
+    if [ $attempt -eq $max_attempts ]; then
+        echo "Error: Ollama failed to start within $((max_attempts)) seconds. Exiting."
+        exit 1
+    fi
+done
+echo "Ollama is ready and responsive."
+
+# ------------------------------------------------------------------------------
+# 3. Debugging: List Files
+#    Useful for verifying that application files are correctly copied into the container.
+# ------------------------------------------------------------------------------
+echo "--- Files in current directory ($PWD): ---"
+ls -le
+echo "-------------------------------------------"
+
+# ------------------------------------------------------------------------------
+# 4. Start FastAPI Backend Server
+#    The FastAPI application serves the API endpoints.
+# ------------------------------------------------------------------------------
+echo "--- Starting FastAPI Server ---"
+# Run Uvicorn to serve the FastAPI application.
+# --host 0.0.0.0 makes it accessible from outside the container (via exposed port).
+# --port 7860 is where FastAPI listens.
+# --workers 1 and --limit-concurrency 20 are performance settings.
+uvicorn main:app --host 0.0.0.0 --port 7860 --workers 1 --limit-concurrency 20 &
+FASTAPI_PID=$!
+echo "FastAPI server started with PID: $FASTAPI_PID"
+
+# Give FastAPI a moment to fully initialize (optional but good practice)
+sleep 5
+
+# ------------------------------------------------------------------------------
+# 5. Start Nginx Web Server
+#    Nginx acts as a reverse proxy for the FastAPI backend and serves the React frontend.
+# ------------------------------------------------------------------------------
+echo "--- Starting Nginx Web Server on Port 8501 ---"
+# Start Nginx in the foreground so the script waits for it to exit,
+# keeping the Docker container alive.
+# 'daemon off;' ensures Nginx runs in the foreground.
+nginx -g 'daemon off;' &
+NGINX_PID=$!
+echo "Nginx started with PID: $NGINX_PID"
+
+# ------------------------------------------------------------------------------
+# 6. Keep Container Alive
+#    The 'wait' command will keep the script running as long as Nginx is running.
+# ------------------------------------------------------------------------------
+echo "All services initiated. Keeping container alive by waiting for Nginx..."
+wait $NGINX_PID
+
+echo "Nginx stopped. Container may exit now."