Merge branch 'main' into sohank-feature

README.md

@@ -1,3 +1,220 @@
-# Neon-AI-Project
+# PhD Advisory Panel
 
-Multi-model LLM chatbot.
+An AI-powered academic guidance system that provides personalized advice through specialized advisor personas. Get diverse perspectives on your PhD journey from multiple AI advisors, each bringing unique expertise in methodology, theory, and practical guidance.
+
+## Features
+
+- **Multiple AI Advisor Personas**: Chat with specialized advisors including Methodist (methodology expert), Theorist (conceptual frameworks), and Pragmatist (action-focused guidance)
+- **Document Upload Support**: Upload PDFs, Word documents, and text files to provide context for your questions
+- **Multi-LLM Backend**: Supports both Gemini API and Ollama models with seamless provider switching
+- **Real-time Chat Interface**: Modern, responsive chat interface with advisor-specific styling
+- **Context-Aware Responses**: Maintains conversation history and document context across the session
+- **Sequential Advisor Responses**: Get input from all advisors in a structured sequence
+- **Individual Advisor Chat**: Have focused conversations with specific advisors
+
+## Architecture
+
+### Frontend (React)
+- **Technology**: React 18 with modern hooks and functional components
+- **Styling**: CSS custom properties with dark/light theme support
+- **Components**: Modular component architecture with reusable UI elements
+- **State Management**: React hooks for local state management
+- **Icons**: Lucide React for consistent iconography
+
+### Backend (FastAPI)
+- **Framework**: FastAPI with automatic API documentation
+- **LLM Integration**: Support for multiple providers (Gemini, Ollama)
+- **Document Processing**: PDF, DOCX, and text file extraction
+- **Session Management**: Global session context with file upload tracking
+- **CORS Support**: Configured for React development server
+
+## Quick Start
+
+### Prerequisites
+- Node.js 16+ and npm
+- Python 3.8+
+- (Optional) Gemini API key for Google's models
+- (Optional) Ollama installation for local models
+
+### Backend Setup
+
+1. **Clone and navigate to backend directory**
+```bash
+cd multi_llm_chatbot_backend
+```
+
+2. **Install dependencies**
+```bash
+pip install -r requirements.txt
+```
+
+3. **Set up environment variables**
+Create a `.env` file:
+```env
+GEMINI_API_KEY=your_gemini_api_key_here
+GEMINI_MODEL=gemini-2.0-flash
+```
+
+4. **Start the backend server**
+```bash
+uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
+```
+
+The API will be available at `http://localhost:8000` with interactive docs at `http://localhost:8000/docs`
+
+### Frontend Setup
+
+1. **Navigate to frontend directory**
+```bash
+cd phd-advisor-frontend
+```
+
+2. **Install dependencies**
+```bash
+npm install
+```
+
+3. **Start the development server**
+```bash
+npm start
+```
+
+The application will open at `http://localhost:3000`
+
+## Advisor Personas
+
+### Methodist - Research Methodology Expert
+- **Focus**: Research design, validity, sampling, methodological rigor
+- **Style**: Precise, analytical, methodology-focused
+- **Best for**: Research design questions, data collection methods, validity concerns
+
+### Theorist - Conceptual Frameworks Expert  
+- **Focus**: Theoretical positioning, epistemological assumptions, conceptual clarity
+- **Style**: Thoughtful, intellectually rigorous, theory-oriented
+- **Best for**: Literature review, theoretical frameworks, conceptual development
+
+### Pragmatist - Action-Focused Advisor
+- **Focus**: Practical next steps, immediate actions, progress over perfection
+- **Style**: Warm, motivational, results-oriented
+- **Best for**: Getting unstuck, prioritizing tasks, actionable advice
+
+## API Endpoints
+
+### Core Chat Endpoints
+- `POST /chat-sequential` - Get responses from all advisors in sequence
+- `POST /chat/{persona_id}` - Chat with a specific advisor
+- `POST /reply-to-advisor` - Reply to a specific advisor's message
+
+### Document Management
+- `POST /upload-document` - Upload documents (PDF, DOCX, TXT)
+- `GET /uploaded-files` - List uploaded filenames
+- `GET /context` - View current session context
+
+### Provider Management
+- `GET /current-provider` - Get current LLM provider info
+- `POST /switch-provider` - Switch between Gemini and Ollama
+
+### System
+- `GET /debug/personas` - Debug persona configurations
+- `GET /` - API health check
+
+## Configuration
+
+### Supported LLM Providers
+
+**Gemini (Default)**
+- Requires GEMINI_API_KEY environment variable
+- Uses gemini-2.0-flash model by default
+- Cloud-based, requires internet connection
+
+**Ollama (Local)**
+- Requires Ollama installation
+- Uses llama3.2:1b model by default
+- Runs locally, no internet required
+
+### File Upload Limits
+- Maximum file size: 10MB per file
+- Total session limit: 50MB
+- Supported formats: PDF, DOCX, TXT
+
+### Environment Variables
+```env
+# Required for Gemini
+GEMINI_API_KEY=your_api_key
+
+# Optional configurations
+GEMINI_MODEL=gemini-2.0-flash
+OLLAMA_BASE_URL=http://localhost:11434
+```
+
+## Development
+
+### Project Structure
+```
+phd-advisor-frontend/
+├── public/
+├── src/
+│   ├── components/     # Reusable UI components
+│   ├── data/          # Advisor configurations
+│   ├── pages/         # Main page components
+│   ├── styles/        # CSS stylesheets
+│   └── utils/         # Helper functions
+
+multi_llm_chatbot_backend/
+├── app/
+│   ├── api/           # API routes
+│   ├── core/          # Business logic
+│   ├── llm/           # LLM client implementations
+│   ├── models/        # Data models
+│   ├── tests/         # Test files
+│   └── utils/         # Utility functions
+```
+
+### Adding New Advisors
+1. Create persona in `app/api/routes.py` with system prompt
+2. Add advisor configuration in frontend `src/data/advisors.js`
+3. Update advisor styling in `src/styles/`
+
+### Testing Document Upload
+Use the test script:
+```bash
+cd multi_llm_chatbot_backend/app/tests
+python test_document_upload.py
+```
+
+## Usage Examples
+
+### Starting a Conversation
+1. Navigate to the home page
+2. Click "Start Conversation"
+3. Type your PhD-related question
+4. Receive responses from all three advisors
+
+### Uploading Documents
+1. In the chat interface, click the upload button
+2. Select your PDF, DOCX, or TXT file
+3. The document content will be added to the conversation context
+4. Ask questions about your uploaded documents
+
+### Switching LLM Providers
+```bash
+curl -X POST "http://localhost:8000/switch-provider" \
+  -H "Content-Type: application/json" \
+  -d '{"provider": "ollama"}'
+```
+
+## Contributing
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+
+## Support
+
+- Check the API documentation at `http://localhost:8000/docs`
+- Review the debug endpoints for troubleshooting
+- Ensure all environment variables are properly configured
+- Verify that your LLM provider (Gemini/Ollama) is accessible

multi_llm_chatbot_backend/app/api/routes.py

@@ -13,6 +13,9 @@ from pydantic import BaseModel
 from typing import Optional, List
 from fastapi import UploadFile, File
 from app.utils.document_extractor import extract_text_from_file
+from app.core.orchestrator import answer_with_persona_context
+from app.utils.chroma_client import add_persona_doc
+import hashlib
 from app.utils.file_limits import is_within_upload_limit
 
 router = APIRouter()
@@ -380,6 +383,22 @@ async def debug_personas():
         "current_provider": current_provider
     }
 
+class PersonaQuery(BaseModel):
+    question: str
+    persona: str
+
+@router.post("/ask/")
+async def ask_question(query: PersonaQuery):
+    response = await answer_with_persona_context(query.question, query.persona)
+    
+    # Store Q&A in vector DB
+    combined_text = f"Q: {query.question}\nA: {response}"
+    doc_id = hashlib.md5(combined_text.encode()).hexdigest()  # Create a unique doc ID
+    
+    add_persona_doc(combined_text, query.persona, doc_id)
+
+    return {"response": response}
+
 @router.get("/uploaded-files")
 def get_uploaded_filenames():
-    return {"files": session_context.uploaded_files}
+    return {"files": session_context.uploaded_files}

multi_llm_chatbot_backend/app/core/orchestrator.py

@@ -1,5 +1,8 @@
 from app.models.persona import Persona
 from typing import List
+from app.utils.chroma_client import query_persona_knowledge
+from app.llm.gemini_client import GeminiClient
+from app.llm.llm_client import LLMClient
 
 class ChatOrchestrator:
     def __init__(self):
@@ -20,4 +23,19 @@ class ChatOrchestrator:
         # I have created this function to be a placeholder for the actual logic of response sequencing
         # This logic can be replaced with something smarter like a LLM deciding order based on chat context
 
-        return self.personas
+        return self.personas
+
+        
+    
+async def answer_with_persona_context(question: str, persona: str) -> str:
+    llm: LLMClient = GeminiClient()
+    context_chunks = query_persona_knowledge(question, persona)
+    context = "\n".join(context_chunks) if context_chunks else "No relevant info found."
+        
+    system_prompt = f"You are a helpful assistant responding as a {persona}."
+    message_context = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": f"Context:\n{context}\n\nQuestion:\n{question}"}
+    ]
+
+    return await llm.generate(system_prompt, message_context)

multi_llm_chatbot_backend/app/llm/embedding_client.py

@@ -0,0 +1,11 @@
+from sentence_transformers import SentenceTransformer
+import os
+
+API_KEY = os.getenv("GEMINI_API_KEY")
+
+# Using a compact, fast model good for semantic search
+model = SentenceTransformer("all-MiniLM-L6-v2")
+
+def get_embedding(text: str) -> list[float]:
+    embedding = model.encode(text, convert_to_numpy=True)
+    return embedding.tolist()

multi_llm_chatbot_backend/app/utils/chroma_client.py

@@ -0,0 +1,25 @@
+import chromadb
+from chromadb.config import Settings
+from app.llm.embedding_client import get_embedding
+
+client = chromadb.PersistentClient(path="./chroma_storage")
+
+collection = client.get_or_create_collection("persona_knowledge")
+
+def add_persona_doc(text: str, persona: str, doc_id: str):
+    embedding = get_embedding(text)
+    collection.add(
+        documents=[text],
+        embeddings=[embedding],
+        metadatas=[{"persona": persona}],
+        ids=[doc_id]
+    )
+
+def query_persona_knowledge(query: str, persona: str):
+    query_embedding = get_embedding(query)
+    results = collection.query(
+        query_embeddings=[query_embedding],
+        n_results=3,
+        where={"persona": persona}
+    )
+    return results['documents'][0] if results['documents'] else []

phd-advisor-frontend/src/components/EnhancedChatInput.js

@@ -0,0 +1,220 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Send, Paperclip, FileText, X, Trash2, Download } from 'lucide-react';
+import FileUpload from './FileUpload';
+
+const EnhancedChatInput = ({ 
+  onSendMessage, 
+  onFileUploaded,
+  uploadedDocuments = [],
+  isLoading, 
+  placeholder = "Ask your advisors anything about your PhD journey..." 
+}) => {
+  const [inputMessage, setInputMessage] = useState('');
+  const [showUpload, setShowUpload] = useState(false);
+  const [showDocuments, setShowDocuments] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const textareaRef = useRef(null);
+
+  const handleSend = () => {
+    if (!inputMessage.trim() || isLoading || isUploading) return;
+    
+    onSendMessage(inputMessage);
+    setInputMessage('');
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+  };
+
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleFileUploaded = (file, response) => {
+    setIsUploading(false);
+    setShowUpload(false);
+    
+    if (onFileUploaded) {
+      onFileUploaded(file, response);
+    }
+  };
+
+  const handleUploadStart = () => {
+    setIsUploading(true);
+  };
+
+  const toggleUpload = () => {
+    if (!isUploading) {
+      setShowUpload(!showUpload);
+      setShowDocuments(false); // Close documents panel when opening upload
+    }
+  };
+
+  const toggleDocuments = () => {
+    setShowDocuments(!showDocuments);
+    setShowUpload(false); // Close upload panel when opening documents
+  };
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
+    }
+  }, [inputMessage]);
+
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const getFileIcon = (type) => {
+    if (type.includes('pdf')) return '📄';
+    if (type.includes('word') || type.includes('document')) return '📝';
+    if (type.includes('text')) return '📃';
+    return '📄';
+  };
+
+  const formatUploadTime = (date) => {
+    return new Date(date).toLocaleString([], {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const isDisabled = isLoading || isUploading;
+  const canSend = inputMessage.trim() && !isDisabled;
+
+  return (
+    <div className="enhanced-chat-input-container">
+      {/* File Upload Area */}
+      {showUpload && (
+        <div className="floating-upload-section">
+          <FileUpload 
+            onFileUploaded={handleFileUploaded}
+            isUploading={isUploading}
+            onUploadStart={handleUploadStart}
+          />
+        </div>
+      )}
+
+      {/* Documents Viewer Panel */}
+      {showDocuments && (
+        <div className="floating-documents-section">
+          <div className="documents-header">
+            <div className="documents-title">
+              <FileText size={16} />
+              <span>Uploaded Documents ({uploadedDocuments.length})</span>
+            </div>
+            <button 
+              onClick={() => setShowDocuments(false)}
+              className="close-documents-btn"
+            >
+              <X size={16} />
+            </button>
+          </div>
+          
+          <div className="documents-list">
+            {uploadedDocuments.length === 0 ? (
+              <div className="no-documents">
+                <FileText size={24} />
+                <p>No documents uploaded yet</p>
+                <span>Upload documents to reference them in your conversations</span>
+              </div>
+            ) : (
+              uploadedDocuments.map((doc) => (
+                <div key={doc.id} className="document-item">
+                  <div className="document-icon">
+                    {getFileIcon(doc.type)}
+                  </div>
+                  <div className="document-info">
+                    <div className="document-name">{doc.name}</div>
+                    <div className="document-details">
+                      {formatFileSize(doc.size)} • {formatUploadTime(doc.uploadTime)}
+                    </div>
+                  </div>
+                  <div className="document-actions">
+                    <button 
+                      className="document-action-btn"
+                      title="Remove document"
+                      onClick={() => {
+                        // TODO: Implement remove functionality
+                        console.log('Remove document:', doc.id);
+                      }}
+                    >
+                      <Trash2 size={14} />
+                    </button>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Main Input Box */}
+      <div className="floating-input-box">
+        {/* Text Input Row */}
+        <div className="text-input-row">
+          <textarea
+            ref={textareaRef}
+            value={inputMessage}
+            onChange={(e) => setInputMessage(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder={placeholder}
+            className="main-textarea"
+            disabled={isDisabled}
+            rows={1}
+          />
+        </div>
+
+        {/* Controls Row */}
+        <div className="controls-row">
+          {/* Left - File Controls */}
+          <div className="file-controls">
+            <button
+              onClick={toggleUpload}
+              className={`add-docs-btn ${showUpload ? 'active' : ''}`}
+              disabled={isUploading}
+              type="button"
+            >
+              <Paperclip size={16} />
+              <span>Add documents</span>
+            </button>
+            
+            {uploadedDocuments.length > 0 && (
+              <button
+                onClick={toggleDocuments}
+                className={`view-docs-btn ${showDocuments ? 'active' : ''}`}
+                type="button"
+                title={`View ${uploadedDocuments.length} uploaded document${uploadedDocuments.length !== 1 ? 's' : ''}`}
+              >
+                <FileText size={16} />
+                <span className="docs-count">{uploadedDocuments.length}</span>
+              </button>
+            )}
+          </div>
+
+          {/* Right - Send Button */}
+          <button
+            onClick={handleSend}
+            disabled={!canSend}
+            className={`send-button ${canSend ? 'enabled' : 'disabled'}`}
+            type="button"
+          >
+            <Send size={16} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EnhancedChatInput;

phd-advisor-frontend/src/components/FileUpload.js

@@ -0,0 +1,199 @@
+import React, { useState, useRef } from 'react';
+import { Upload, FileText, File, X, CheckCircle, AlertCircle } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+import '../styles/FileUpload.css'
+
+const FileUpload = ({ onFileUploaded, isUploading, onUploadStart }) => {
+  const [dragActive, setDragActive] = useState(false);
+  const [uploadStatus, setUploadStatus] = useState(null); // 'success', 'error', null
+  const [uploadMessage, setUploadMessage] = useState('');
+  const [selectedFile, setSelectedFile] = useState(null);
+  const fileInputRef = useRef(null);
+  const { isDark } = useTheme();
+
+  const supportedTypes = {
+    'application/pdf': { ext: 'PDF', icon: FileText, color: '#EF4444' },
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': { ext: 'DOCX', icon: File, color: '#3B82F6' },
+    'text/plain': { ext: 'TXT', icon: FileText, color: '#10B981' }
+  };
+
+  const validateFile = (file) => {
+    if (!supportedTypes[file.type]) {
+      return { valid: false, error: 'Only PDF, DOCX, and TXT files are supported.' };
+    }
+    
+    if (file.size > 10 * 1024 * 1024) { // 10MB limit
+      return { valid: false, error: 'File size must be less than 10MB.' };
+    }
+    
+    return { valid: true };
+  };
+
+  const uploadFile = async (file) => {
+    const validation = validateFile(file);
+    if (!validation.valid) {
+      setUploadStatus('error');
+      setUploadMessage(validation.error);
+      return;
+    }
+
+    setSelectedFile(file);
+    onUploadStart && onUploadStart();
+    
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const response = await fetch('http://localhost:8000/upload-document', {
+        method: 'POST',
+        body: formData,
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setUploadStatus('success');
+        setUploadMessage(`${file.name} uploaded successfully and added to context.`);
+        onFileUploaded && onFileUploaded(file, data);
+        
+        // Auto-clear success message after 5 seconds
+        setTimeout(() => {
+          setUploadStatus(null);
+          setSelectedFile(null);
+          setUploadMessage('');
+        }, 5000);
+      } else {
+        const errorData = await response.json();
+        throw new Error(errorData.detail || 'Upload failed');
+      }
+    } catch (error) {
+      setUploadStatus('error');
+      setUploadMessage(`Upload failed: ${error.message}`);
+      console.error('Upload error:', error);
+    }
+  };
+
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive(true);
+    } else if (e.type === 'dragleave') {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    
+    if (isUploading) return;
+    
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      uploadFile(files[0]);
+    }
+  };
+
+  const handleFileSelect = (e) => {
+    const files = Array.from(e.target.files);
+    if (files.length > 0) {
+      uploadFile(files[0]);
+    }
+  };
+
+  const openFileDialog = () => {
+    if (!isUploading) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  const clearStatus = () => {
+    setUploadStatus(null);
+    setSelectedFile(null);
+    setUploadMessage('');
+  };
+
+  const getFileIcon = (file) => {
+    const fileInfo = supportedTypes[file.type];
+    if (fileInfo) {
+      const Icon = fileInfo.icon;
+      return <Icon size={16} style={{ color: fileInfo.color }} />;
+    }
+    return <File size={16} />;
+  };
+
+  return (
+    <div className="file-upload-container">
+      {/* Upload Status Banner */}
+      {uploadStatus && (
+        <div className={`upload-status ${uploadStatus}`}>
+          <div className="status-content">
+            {uploadStatus === 'success' ? (
+              <CheckCircle size={16} className="status-icon success" />
+            ) : (
+              <AlertCircle size={16} className="status-icon error" />
+            )}
+            <span className="status-message">{uploadMessage}</span>
+            <button onClick={clearStatus} className="status-close">
+              <X size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Upload Area */}
+      <div 
+        className={`file-upload-area ${dragActive ? 'drag-active' : ''} ${isUploading ? 'uploading' : ''}`}
+        onDragEnter={handleDrag}
+        onDragLeave={handleDrag}
+        onDragOver={handleDrag}
+        onDrop={handleDrop}
+        onClick={openFileDialog}
+      >
+        <input
+          ref={fileInputRef}
+          type="file"
+          onChange={handleFileSelect}
+          accept=".pdf,.docx,.txt"
+          style={{ display: 'none' }}
+          disabled={isUploading}
+        />
+        
+        <div className="upload-content">
+          {isUploading ? (
+            <>
+              <div className="upload-spinner">
+                <div className="spinner"></div>
+              </div>
+              <p className="upload-text">Uploading {selectedFile?.name}...</p>
+            </>
+          ) : (
+            <>
+              <Upload size={24} className="upload-icon" />
+              <p className="upload-text">
+                <span className="upload-primary">Click to upload</span> or drag and drop
+              </p>
+              <p className="upload-secondary">PDF, DOCX, or TXT files only</p>
+            </>
+          )}
+        </div>
+      </div>
+      
+      {/* Supported File Types */}
+      <div className="supported-types">
+        {Object.entries(supportedTypes).map(([mimeType, info]) => {
+          const Icon = info.icon;
+          return (
+            <div key={mimeType} className="file-type-chip">
+              <Icon size={12} style={{ color: info.color }} />
+              <span>{info.ext}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default FileUpload;

phd-advisor-frontend/src/data/advisors.js

@@ -2,7 +2,7 @@ import { BookOpen, Target, Brain } from 'lucide-react';
 
 export const advisors = {
   methodist: {
-    name: 'Dr. Methodist',
+    name: 'Methodist',
     role: 'Methodical Advisor',
     // Light theme colors
     color: '#3B82F6',
@@ -15,7 +15,7 @@ export const advisors = {
     description: 'Structured & Planning-focused'
   },
   theorist: {
-    name: 'Dr. Theorist',
+    name: 'Theorist',
     role: 'Theoretical Advisor',
     // Light theme colors
     color: '#8B5CF6',
@@ -28,7 +28,7 @@ export const advisors = {
     description: 'Abstract & Conceptual'
   },
   pragmatist: {
-    name: 'Dr. Pragmatist',
+    name: 'Pragmatist',
     role: 'Practical Advisor',
     // Light theme colors
     color: '#10B981',

phd-advisor-frontend/src/pages/ChatPage.js

@@ -1,7 +1,7 @@
 // src/pages/ChatPage.js
 import React, { useState, useEffect, useRef } from 'react';
-import { Home, MessageCircle, Reply, X, Sparkles, Users, Settings2 } from 'lucide-react';
-import ChatInput from '../components/ChatInput';
+import { Home, MessageCircle, Reply, X, Sparkles, Users, Settings2, FileText } from 'lucide-react';
+import EnhancedChatInput from '../components/EnhancedChatInput';
 import MessageBubble from '../components/MessageBubble';
 import ThinkingIndicator from '../components/ThinkingIndicator';
 import SuggestionsPanel from '../components/SuggestionsPanel';
@@ -10,6 +10,7 @@ import ProviderDropdown from '../components/ProviderDropdown';
 import { advisors, getAdvisorColors } from '../data/advisors';
 import { useTheme } from '../contexts/ThemeContext';
 import '../styles/ChatPage.css';
+import '../styles/EnhancedChatInput.css';
 
 const ChatPage = ({ onNavigateToHome }) => {
   const [messages, setMessages] = useState([]);
@@ -19,6 +20,7 @@ const ChatPage = ({ onNavigateToHome }) => {
   const [replyingTo, setReplyingTo] = useState(null);
   const [currentProvider, setCurrentProvider] = useState('gemini');
   const [isProviderSwitching, setIsProviderSwitching] = useState(false);
+  const [uploadedDocuments, setUploadedDocuments] = useState([]);
   const messagesEndRef = useRef(null);
   const { isDark } = useTheme();
 
@@ -102,6 +104,39 @@ const ChatPage = ({ onNavigateToHome }) => {
     return Date.now().toString() + Math.random().toString(36).substr(2, 9);
   };
 
+  const handleFileUploaded = (file, response) => {
+    // Add the uploaded document to our list
+    const docInfo = {
+      id: generateMessageId(),
+      name: file.name,
+      size: file.size,
+      type: file.type,
+      uploadTime: new Date()
+    };
+    setUploadedDocuments(prev => [...prev, docInfo]);
+
+    // Add a system message about the upload
+    const uploadMessage = {
+      id: generateMessageId(),
+      type: 'document_upload',
+      content: `Successfully uploaded "${file.name}". Your advisors can now reference this document in their responses.`,
+      timestamp: new Date(),
+      documentInfo: docInfo
+    };
+    
+    // Force update messages state
+    setMessages(prev => {
+      const newMessages = [...prev, uploadMessage];
+      console.log('Added upload message:', uploadMessage); // Debug log
+      return newMessages;
+    });
+
+    // Scroll to bottom to show the new message
+    setTimeout(() => {
+      scrollToBottom();
+    }, 100);
+  };
+
   const handleSendMessage = async (inputMessage) => {
     if (replyingTo) {
       await handleReplyToAdvisor(inputMessage, replyingTo);
@@ -199,21 +234,17 @@ const ChatPage = ({ onNavigateToHome }) => {
   };
 
   const handleReplyToAdvisor = async (inputMessage, replyInfo) => {
-    const userReplyMessage = {
+    const userMessage = {
       id: generateMessageId(),
       type: 'user',
       content: inputMessage,
-      replyTo: {
-        advisorId: replyInfo.advisorId,
-        advisorName: replyInfo.advisorName,
-        messageId: replyInfo.messageId
-      },
-      timestamp: new Date()
+      timestamp: new Date(),
+      replyingTo: replyInfo
     };
-    setMessages(prev => [...prev, userReplyMessage]);
-
-    setThinkingAdvisors([replyInfo.advisorId]);
+    setMessages(prev => [...prev, userMessage]);
+    
     setIsLoading(true);
+    setThinkingAdvisors([replyInfo.advisorId]);
 
     try {
       const response = await fetch('http://localhost:8000/reply-to-advisor', {
@@ -233,24 +264,34 @@ const ChatPage = ({ onNavigateToHome }) => {
       }
 
       const data = await response.json();
+      setThinkingAdvisors([]);
 
-      const advisorReplyMessage = {
-        id: generateMessageId(),
-        type: 'advisor',
-        advisorId: replyInfo.advisorId,
-        content: data.response,
-        isReply: true,
-        timestamp: new Date()
-      };
-
-      setMessages(prev => [...prev, advisorReplyMessage]);
+      if (data.type === 'advisor_reply') {
+        const replyMessage = {
+          id: generateMessageId(),
+          type: 'advisor',
+          advisorId: replyInfo.advisorId,
+          content: data.response,
+          timestamp: new Date(),
+          isReply: true
+        };
+        setMessages(prev => [...prev, replyMessage]);
+      } else if (data.type === 'error') {
+        const errorMessage = {
+          id: generateMessageId(),
+          type: 'error',
+          content: data.response,
+          timestamp: new Date()
+        };
+        setMessages(prev => [...prev, errorMessage]);
+      }
 
     } catch (error) {
       console.error('Error sending reply:', error);
       const errorMessage = {
         id: generateMessageId(),
         type: 'error',
-        content: 'Sorry, I encountered an error with your reply. Please try again.',
+        content: 'Sorry, I encountered an error. Please try again.',
         timestamp: new Date()
       };
       setMessages(prev => [...prev, errorMessage]);
@@ -322,6 +363,14 @@ const ChatPage = ({ onNavigateToHome }) => {
           </div>
           
           <div className="header-controls">
+            {/* Document Count Indicator */}
+            {uploadedDocuments.length > 0 && (
+              <div className="document-indicator" title={`${uploadedDocuments.length} document(s) uploaded`}>
+                <FileText size={16} />
+                <span className="doc-count">{uploadedDocuments.length}</span>
+              </div>
+            )}
+            
             <ProviderDropdown 
               currentProvider={currentProvider}
               onProviderChange={handleProviderSwitch}
@@ -355,7 +404,7 @@ const ChatPage = ({ onNavigateToHome }) => {
                         </div>
                         <div className="orchestrator-content">
                           <div className="orchestrator-header">
-                            <span className="orchestrator-name">PhD Assistant</span>
+                            <span className="orchestrator-name">Orchestrator</span>
                             <span className="message-timestamp">
                               {message.timestamp.toLocaleTimeString([], {
                                 hour: '2-digit', 
@@ -378,6 +427,17 @@ const ChatPage = ({ onNavigateToHome }) => {
                       </div>
                     );
                   }
+
+                  if (message.type === 'document_upload') {
+                    return (
+                      <div key={message.id || index} className="document-upload-notification">
+                        <div className="upload-notification-content">
+                          <FileText size={16} className="upload-icon" />
+                          <span>{message.content}</span>
+                        </div>
+                      </div>
+                    );
+                  }
                   
                   return (
                     <MessageBubble 
@@ -396,7 +456,7 @@ const ChatPage = ({ onNavigateToHome }) => {
                       <MessageCircle size={20} />
                     </div>
                     <div className="thinking-content">
-                      <span className="thinking-label">PhD Assistant is thinking...</span>
+                      <span className="thinking-label">Orchestrator is thinking...</span>
                       <div className="thinking-animation">
                         <div className="dot"></div>
                         <div className="dot"></div>
@@ -417,7 +477,6 @@ const ChatPage = ({ onNavigateToHome }) => {
         )}
       </div>
 
-      {/* Floating Input Area */}
       <div className="floating-input-area">
         {replyingTo && (
           <div className="reply-banner">
@@ -431,17 +490,17 @@ const ChatPage = ({ onNavigateToHome }) => {
           </div>
         )}
         
-        <div className="input-wrapper">
-          <ChatInput 
-            onSendMessage={handleSendMessage}
-            isLoading={isLoading}
-            placeholder={
-              replyingTo 
-                ? `Reply to ${replyingTo.advisorName}...`
-                : "Ask your advisors anything about your PhD journey..."
-            }
-          />
-        </div>
+        <EnhancedChatInput 
+          onSendMessage={handleSendMessage}
+          onFileUploaded={handleFileUploaded}
+          uploadedDocuments={uploadedDocuments}
+          isLoading={isLoading}
+          placeholder={
+            replyingTo 
+              ? `Reply to ${replyingTo.advisorName}...`
+              : "Ask your advisors anything about your PhD journey..."
+          }
+        />
       </div>
     </div>
   );

phd-advisor-frontend/src/styles/ChatPage.css

@@ -1,4 +1,4 @@
-/* ChatPage.css - Modern Chat Interface Styles */
+/* ChatPage.css - Complete Fixed File */
 
 /* Modern Chat Page Layout */
 .modern-chat-page {
@@ -95,6 +95,12 @@
   gap: 20px;
 }
 
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 /* Advisor Pills */
 .advisor-pills {
   display: flex;
@@ -113,42 +119,30 @@
   font-weight: 500;
   transition: all 0.3s ease;
   position: relative;
-  overflow: hidden;
 }
 
 .advisor-pill.thinking {
-  animation: pulse 2s infinite;
-}
-
-.advisor-pill span {
-  font-weight: 600;
+  animation: pulse 2s ease-in-out infinite;
 }
 
 .thinking-pulse {
   position: absolute;
-  right: 6px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 6px;
-  height: 6px;
+  top: -2px;
+  right: -2px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  animation: pulse-dot 1.5s infinite;
+  animation: pulse-dot 1.5s ease-in-out infinite;
 }
 
 @keyframes pulse {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.05); }
-}
-
-@keyframes pulse-dot {
   0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
+  50% { opacity: 0.7; }
 }
 
-.header-controls {
-  display: flex;
-  align-items: center;
-  gap: 12px;
+@keyframes pulse-dot {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.2); opacity: 0.8; }
 }
 
 /* Main Content Area */
@@ -156,25 +150,24 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 32px 24px 120px 24px;
-  max-width: 1200px;
-  margin: 0 auto;
-  width: 100%;
+  padding-top: 24px;
+  padding-bottom: 140px; /* Space for floating input */
+  padding-left: 16px;
+  padding-right: 16px;
 }
 
-/* Welcome State - Simplified */
+/* Welcome State */
 .welcome-state {
+  flex: 1;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  max-width: 900px;
-  margin: 0 auto;
   min-height: 60vh;
 }
 
 .suggestions-container {
   width: 100%;
+  max-width: 1200px;
 }
 
 /* Chat State */
@@ -186,42 +179,33 @@
 
 .messages-area {
   flex: 1;
-  background: var(--bg-primary);
-  border-radius: 24px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-  border: 1px solid var(--border-primary);
   overflow: hidden;
-  max-width: 900px;
-  margin: 0 auto;
-  width: 100%;
 }
 
 .messages-scroll {
   height: 100%;
   overflow-y: auto;
-  padding: 32px;
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  scroll-behavior: smooth;
+  padding: 20px;
+  padding-bottom: 40px; /* Extra space before floating input */
 }
 
-/* Message Styles */
+/* Message Components */
 .orchestrator-message {
   display: flex;
   gap: 16px;
+  margin-bottom: 24px;
   align-items: flex-start;
 }
 
 .orchestrator-avatar {
-  width: 44px;
-  height: 44px;
-  background: var(--bg-tertiary);
-  border-radius: 12px;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background: var(--accent-gradient);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--text-secondary);
+  color: white;
   flex-shrink: 0;
 }
 
@@ -229,15 +213,16 @@
   flex: 1;
   background: var(--bg-secondary);
   border-radius: 16px;
-  padding: 20px;
+  padding: 16px 20px;
   border: 1px solid var(--border-primary);
+  max-width: 600px;
 }
 
 .orchestrator-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 
 .orchestrator-name {
@@ -282,6 +267,7 @@
   gap: 16px;
   align-items: center;
   opacity: 0.8;
+  margin-bottom: 24px;
 }
 
 .thinking-content {
@@ -322,47 +308,57 @@
   40% { transform: scale(1); }
 }
 
-/* Floating Input Area */
+/* Floating Input Area - FIXED VERSION */
 .floating-input-area {
   position: fixed;
-  bottom: 0;
+  bottom: 20px;
   left: 0;
   right: 0;
   z-index: 50;
-  background: linear-gradient(to top, var(--bg-primary), transparent);
-  padding: 20px 24px 32px 24px;
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-}
-
-.reply-banner {
+  background: transparent;
+  padding: 0;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  background: var(--bg-secondary);
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+/* Reply Banner in ChatPage - matches input width and fixes dark mode */
+.floating-input-area .reply-banner {
+  background: var(--bg-primary);
   border: 1px solid var(--border-primary);
   border-radius: 12px;
   padding: 12px 16px;
-  margin-bottom: 12px;
-  max-width: 900px;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 12px;
+  margin: 0 16px 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  width: 100%;
+  max-width: 768px;
+  box-sizing: border-box;
+}
+
+[data-theme="dark"] .floating-input-area .reply-banner {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
 }
 
-.reply-info {
+/* Reply Info - Fix dark mode text color */
+.floating-input-area .reply-info {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 14px;
   color: var(--text-secondary);
+  font-size: 14px;
 }
 
-.reply-info strong {
+.floating-input-area .reply-info strong {
   color: var(--accent-primary);
 }
 
-.cancel-reply {
+/* Cancel Reply Button */
+.floating-input-area .cancel-reply {
   background: none;
   border: none;
   color: var(--text-tertiary);
@@ -372,17 +368,50 @@
   transition: all 0.2s ease;
 }
 
-.cancel-reply:hover {
-  background: var(--bg-tertiary);
+.floating-input-area .cancel-reply:hover {
+  background: var(--bg-secondary);
   color: var(--text-secondary);
 }
 
-.input-wrapper {
-  max-width: 900px;
-  margin: 0 auto;
+/* Document Indicator Styles */
+.document-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--feature-bg);  /* Use theme variable */
+  border: 1px solid var(--accent-primary);  /* Use theme variable */
+  border-radius: 20px;
+  color: var(--accent-primary);  /* Use theme variable */
+  font-size: 13px;
+  font-weight: 600;
+  cursor: default;
+  transition: all 0.2s ease;
 }
 
-/* Provider Dropdown Styles */
+.document-indicator:hover {
+  background: var(--accent-primary);
+  color: white;
+}
+
+.doc-count {
+  background: var(--accent-primary);
+  color: white;
+  border-radius: 10px;
+  padding: 2px 6px;
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 16px;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.document-indicator:hover .doc-count {
+  background: white;
+  color: var(--accent-primary);
+}
+
+/* Provider Dropdown Styles - FIXED */
 .provider-dropdown {
   position: relative;
   display: inline-block;
@@ -486,6 +515,10 @@
   -webkit-backdrop-filter: blur(20px);
 }
 
+[data-theme="dark"] .provider-dropdown-menu {
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
+}
+
 .provider-option {
   width: 100%;
   display: flex;
@@ -579,7 +612,7 @@
   }
   
   .main-content {
-    padding: 24px 16px 120px 16px;
+    padding: 24px 12px 120px 12px; /* Adjusted for mobile */
   }
   
   .welcome-state {
@@ -587,10 +620,25 @@
   }
   
   .messages-scroll {
-    padding: 20px;
+    padding: 16px;
+    padding-bottom: 30px;
   }
   
   .floating-input-area {
-    padding: 16px 16px 24px 16px;
+    bottom: 10px;
+  }
+  
+  .floating-input-area .reply-banner {
+    margin: 0 12px 12px 12px;
+  }
+  
+  .orchestrator-content {
+    max-width: none;
+  }
+  
+  .system-content {
+    max-width: 90%;
+    padding: 10px 16px;
+    font-size: 13px;
   }
 }

phd-advisor-frontend/src/styles/EnhancedChatInput.css

@@ -0,0 +1,602 @@
+/* Enhanced Chat Input Styles */
+.enhanced-chat-input-container {
+  position: relative;
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+/* Reply Banner */
+.reply-banner {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px 12px 0 0;
+  padding: 12px 16px;
+  margin: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+.reply-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cancel-reply {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.cancel-reply:hover {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+}
+
+/* Floating Upload Section */
+.floating-upload-section {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 16px;
+  margin-bottom: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  animation: slideUpFade 0.2s ease-out;
+}
+
+[data-theme="dark"] .floating-upload-section {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+/* Floating Documents Section */
+.floating-documents-section {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 16px;
+  margin-bottom: 12px;
+  max-height: 400px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  animation: slideUpFade 0.2s ease-out;
+}
+
+[data-theme="dark"] .floating-documents-section {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.documents-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-primary);
+  background: var(--bg-secondary);
+}
+
+.documents-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.close-documents-btn {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.close-documents-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.documents-list {
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.no-documents {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-tertiary);
+}
+
+.no-documents svg {
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.no-documents p {
+  margin: 8px 0;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.no-documents span {
+  font-size: 13px;
+  color: var(--text-tertiary);
+}
+
+.document-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  transition: background-color 0.2s ease;
+}
+
+.document-item:hover {
+  background: var(--bg-secondary);
+}
+
+.document-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.document-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.document-name {
+  font-weight: 500;
+  color: var(--text-primary);
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.document-details {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+
+.document-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.document-action-btn {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.document-action-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+}
+
+.document-action-btn:hover:has(svg[data-icon="trash-2"]) {
+  background: #FEF2F2;
+  color: #DC2626;
+}
+
+[data-theme="dark"] .document-action-btn:hover:has(svg[data-icon="trash-2"]) {
+  background: #7F1D1D;
+  color: #FCA5A5;
+}
+
+/* Main Input Box */
+.floating-input-box {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 16px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+[data-theme="dark"] .floating-input-box {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.floating-input-box:focus-within {
+  border-color: var(--accent-primary);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--accent-primary);
+}
+
+[data-theme="dark"] .floating-input-box:focus-within {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--accent-primary);
+}
+
+/* Text Input Row */
+.text-input-row {
+  padding: 16px 20px 4px 20px;
+}
+
+.main-textarea {
+  width: 100%;
+  min-height: 24px;
+  max-height: 200px;
+  border: none;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 16px;
+  font-family: inherit;
+  line-height: 1.5;
+  overflow-y: auto;
+}
+
+.main-textarea::placeholder {
+  color: var(--text-tertiary);
+}
+
+/* Controls Row */
+.controls-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 20px 16px 20px;
+}
+
+/* File Controls - ensure buttons stay side by side */
+.file-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: nowrap;
+}
+
+/* Add Documents Button */
+.add-docs-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-secondary);
+  border-radius: 8px;
+  padding: 8px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.add-docs-btn:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+.add-docs-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.add-docs-btn.active {
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
+  color: white;
+}
+
+/* View Documents Button */
+.view-docs-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-secondary);
+  border-radius: 8px;
+  padding: 8px 10px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.view-docs-btn:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--border-primary);
+  color: var(--text-primary);
+}
+
+.view-docs-btn.active {
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
+  color: white;
+}
+
+.docs-count {
+  background: var(--accent-primary);
+  color: white;
+  border-radius: 10px;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 700;
+  min-width: 16px;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.view-docs-btn:hover .docs-count,
+.view-docs-btn.active .docs-count {
+  background: white;
+  color: var(--accent-primary);
+}
+
+/* Send Button - FIXED VERSION */
+.send-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* Enabled state - clean approach */
+.send-button.enabled {
+  background: #3B82F6;
+  color: #FFFFFF;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+/* Icon styling - use currentColor for better inheritance */
+.send-button svg {
+  width: 16px;
+  height: 16px;
+  color: currentColor;
+}
+
+.send-button.enabled:hover {
+  background: #2563EB;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
+}
+
+.send-button.enabled:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+/* Disabled state */
+.send-button.disabled {
+  background: #E5E7EB;
+  color: #9CA3AF;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+[data-theme="dark"] .send-button.disabled {
+  background: #374151;
+  color: #6B7280;
+}
+
+/* Document Upload Notifications */
+.document-upload-notification {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+  animation: slideUpFade 0.3s ease-out;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  padding: 0;
+}
+
+/* [data-theme="dark"] .document-upload-notification {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+} */
+
+.upload-notification-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--feature-bg);  /* Change from fixed color */
+  border: 1px solid var(--accent-primary);  /* Change from fixed color */
+  border-radius: 12px;
+  color: var(--accent-primary);  /* Change from fixed color */
+  font-size: 14px;
+  font-weight: 500;
+  max-width: 80%;
+}
+
+.upload-notification-icon {
+  flex-shrink: 0;
+}
+
+.upload-notification-icon.success {
+  color: #10B981;
+}
+
+.upload-notification-icon.error {
+  color: #EF4444;
+}
+
+.upload-notification-text {
+  flex: 1;
+}
+
+.upload-notification-title {
+  font-weight: 500;
+  color: var(--text-primary);
+  margin: 0 0 2px 0;
+  font-size: 14px;
+}
+
+.upload-notification-message {
+  color: var(--text-secondary);
+  margin: 0;
+  font-size: 13px;
+}
+
+/* [data-theme="dark"] .upload-notification-content {
+  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
+} */
+
+.notification-close-btn {
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.notification-close-btn:hover {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+}
+
+/* Animations */
+@keyframes slideUpFade {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .enhanced-chat-input-container {
+    padding: 0 12px;
+  }
+  
+  .text-input-row {
+    padding: 14px 16px 4px 16px;
+  }
+  
+  .controls-row {
+    padding: 8px 16px 14px 16px;
+  }
+  
+  .main-textarea {
+    font-size: 16px; /* Prevents zoom on iOS */
+  }
+  
+  .add-docs-btn {
+    padding: 6px 10px;
+    font-size: 13px;
+  }
+  
+  .add-docs-btn span {
+    display: none; /* Hide text on mobile, show only icon */
+  }
+  
+  .view-docs-btn {
+    padding: 6px 8px;
+  }
+  
+  .send-button {
+    width: 32px;
+    height: 32px;
+  }
+  
+  .floating-upload-section,
+  .floating-documents-section {
+    padding: 16px;
+  }
+  
+  .documents-header {
+    padding: 12px 16px;
+  }
+  
+  .documents-list {
+    max-height: 250px;
+  }
+  
+  .upload-notification-content {
+    max-width: 95%;
+    padding: 10px 14px;
+    font-size: 13px;
+  }
+  
+  .reply-banner {
+    margin: 0 12px 12px 12px;
+  }
+}
+
+/* Focus and accessibility */
+.add-docs-btn:focus-visible,
+.view-docs-btn:focus-visible,
+.send-button:focus-visible {
+  outline: 2px solid var(--accent-primary);
+  outline-offset: 2px;
+}
+
+.main-textarea:focus {
+  outline: none; /* Handled by parent container */
+}
+
+/* Loading states */
+.floating-input-box.loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.main-textarea.loading {
+  cursor: wait;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .floating-input-box {
+    border-width: 2px;
+  }
+  
+  .send-button.enabled {
+    border: 2px solid #3B82F6;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .floating-input-box,
+  .add-docs-btn,
+  .view-docs-btn,
+  .send-button,
+  .floating-upload-section,
+  .floating-documents-section {
+    transition: none;
+  }
+  
+  .slideUpFade {
+    animation: none;
+  }
+}

phd-advisor-frontend/src/styles/FileUpload.css

@@ -0,0 +1,332 @@
+/* File Upload Container */
+.file-upload-container {
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+/* Upload Status Banner */
+.upload-status {
+  padding: 8px 12px;
+  border-radius: 8px;
+  margin-bottom: 8px;
+  border: 1px solid;
+  animation: slideDown 0.3s ease-out;
+}
+
+.upload-status.success {
+  background-color: #DCFCE7;
+  border-color: #22C55E;
+  color: #15803D;
+}
+
+[data-theme="dark"] .upload-status.success {
+  background-color: #14532D;
+  border-color: #22C55E;
+  color: #22C55E;
+}
+
+.upload-status.error {
+  background-color: #FEF2F2;
+  border-color: #EF4444;
+  color: #DC2626;
+}
+
+[data-theme="dark"] .upload-status.error {
+  background-color: #7F1D1D;
+  border-color: #EF4444;
+  color: #FCA5A5;
+}
+
+.status-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-icon {
+  flex-shrink: 0;
+}
+
+.status-message {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.status-close {
+  background: none;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  border-radius: 4px;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+.status-close:hover {
+  opacity: 1;
+}
+
+/* Upload Area */
+.file-upload-area {
+  border: 2px dashed #D1D5DB;
+  border-radius: 12px;
+  padding: 24px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  background-color: #F9FAFB;
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .file-upload-area {
+  border-color: #374151;
+  background-color: #1F2937;
+}
+
+.file-upload-area:hover:not(.uploading) {
+  border-color: #3B82F6;
+  background-color: #EFF6FF;
+  transform: translateY(-1px);
+}
+
+[data-theme="dark"] .file-upload-area:hover:not(.uploading) {
+  border-color: #60A5FA;
+  background-color: #1E3A8A;
+}
+
+.file-upload-area.drag-active {
+  border-color: #3B82F6;
+  background-color: #EFF6FF;
+  transform: scale(1.02);
+}
+
+[data-theme="dark"] .file-upload-area.drag-active {
+  border-color: #60A5FA;
+  background-color: #1E3A8A;
+}
+
+.file-upload-area.uploading {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.upload-icon {
+  color: #6B7280;
+  margin-bottom: 4px;
+}
+
+[data-theme="dark"] .upload-icon {
+  color: #9CA3AF;
+}
+
+.file-upload-area:hover:not(.uploading) .upload-icon {
+  color: #3B82F6;
+}
+
+[data-theme="dark"] .file-upload-area:hover:not(.uploading) .upload-icon {
+  color: #60A5FA;
+}
+
+.upload-text {
+  margin: 0;
+  font-size: 14px;
+  color: #374151;
+}
+
+[data-theme="dark"] .upload-text {
+  color: #D1D5DB;
+}
+
+.upload-primary {
+  font-weight: 600;
+  color: #3B82F6;
+}
+
+[data-theme="dark"] .upload-primary {
+  color: #60A5FA;
+}
+
+.upload-secondary {
+  margin: 0;
+  font-size: 12px;
+  color: #6B7280;
+  margin-top: 4px;
+}
+
+[data-theme="dark"] .upload-secondary {
+  color: #9CA3AF;
+}
+
+/* Upload Spinner */
+.upload-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #E5E7EB;
+  border-top: 2px solid #3B82F6;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+[data-theme="dark"] .spinner {
+  border-color: #374151;
+  border-top-color: #60A5FA;
+}
+
+/* Supported File Types */
+.supported-types {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 8px;
+  flex-wrap: wrap;
+}
+
+.file-type-chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background-color: #F3F4F6;
+  border-radius: 16px;
+  font-size: 11px;
+  font-weight: 500;
+  color: #6B7280;
+  border: 1px solid #E5E7EB;
+}
+
+[data-theme="dark"] .file-type-chip {
+  background-color: #374151;
+  border-color: #4B5563;
+  color: #9CA3AF;
+}
+
+/* Enhanced Chat Input with Upload */
+.enhanced-chat-input {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+.input-with-upload {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  width: 100%;
+}
+
+.upload-toggle-btn {
+  background: #F3F4F6;
+  border: 1px solid #D1D5DB;
+  border-radius: 8px;
+  padding: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 40px;
+  height: 40px;
+}
+
+[data-theme="dark"] .upload-toggle-btn {
+  background-color: #374151;
+  border-color: #4B5563;
+}
+
+.upload-toggle-btn:hover {
+  background-color: #E5E7EB;
+  border-color: #3B82F6;
+}
+
+[data-theme="dark"] .upload-toggle-btn:hover {
+  background-color: #4B5563;
+  border-color: #60A5FA;
+}
+
+.upload-toggle-btn.active {
+  background-color: #3B82F6;
+  border-color: #3B82F6;
+  color: white;
+}
+
+.upload-toggle-btn svg {
+  color: #6B7280;
+}
+
+[data-theme="dark"] .upload-toggle-btn svg {
+  color: #9CA3AF;
+}
+
+.upload-toggle-btn:hover svg,
+.upload-toggle-btn.active svg {
+  color: currentColor;
+}
+
+/* Animations */
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Compact upload area for chat input */
+.file-upload-container.compact .file-upload-area {
+  padding: 16px;
+  font-size: 13px;
+}
+
+.file-upload-container.compact .upload-content {
+  gap: 6px;
+}
+
+.file-upload-container.compact .upload-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.file-upload-container.compact .supported-types {
+  margin-top: 6px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .file-upload-area {
+    padding: 16px;
+  }
+  
+  .supported-types {
+    gap: 6px;
+  }
+  
+  .file-type-chip {
+    font-size: 10px;
+    padding: 3px 6px;
+  }
+}

phd-advisor-frontend/src/styles/components.css

@@ -1,5 +1,3 @@
-/* components.css - General Component Styles */
-
 /* CSS Custom Properties for Theming */
 :root[data-theme="light"] {
   /* Background Colors */
@@ -215,6 +213,7 @@
   line-height: 1.6;
 }
 
+/* CTA Button */
 .cta-button {
   display: inline-flex;
   align-items: center;
@@ -241,6 +240,11 @@
   height: 24px;
 }
 
+.cta-arrow {
+  width: 20px;
+  height: 20px;
+}
+
 /* Advisors Grid */
 .advisors-grid {
   display: grid;
@@ -623,6 +627,15 @@
   margin: 0;
 }
 
+.thinking-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-style: italic;
+  margin-bottom: 8px;
+}
+
 .thinking-dots {
   display: flex;
   gap: 4px;
@@ -641,7 +654,7 @@
   margin-bottom: 0;
 }
 
-/* Chat Input */
+/* Basic Chat Input - SCOPED TO AVOID CONFLICTS */
 .input-area {
   border-top: 1px solid var(--border-primary);
   padding: 16px;
@@ -675,7 +688,8 @@
   box-shadow: var(--input-focus-shadow);
 }
 
-.send-button {
+/* IMPORTANT: Make send button styles specific to basic ChatInput only */
+.input-container .send-button {
   background: var(--accent-gradient);
   color: #FFFFFF;
   padding: 12px 24px;
@@ -689,23 +703,23 @@
   gap: 8px;
 }
 
-.send-button:hover:not(:disabled) {
+.input-container .send-button:hover:not(:disabled) {
   transform: translateY(-1px);
   box-shadow: var(--shadow-md);
 }
 
-.send-button:disabled {
+.input-container .send-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
 }
 
-.send-icon {
+.input-container .send-icon {
   width: 20px;
   height: 20px;
 }
 
-.send-text {
+.input-container .send-text {
   display: none;
 }
 
@@ -755,7 +769,8 @@
     font-size: 13px;
   }
 
-  .send-text {
+  /* Basic ChatInput mobile styles */
+  .input-container .send-text {
     display: inline;
   }