Merge branch 'main' into chroma_db

multi_llm_chatbot_backend/app/api/routes.py

@@ -6,6 +6,7 @@ from app.llm.gemini_client import GeminiClient
 from app.models.persona import Persona
 from app.core.orchestrator import ChatOrchestrator
 from app.core.seamless_orchestrator import SeamlessOrchestrator
+from app.core.context import GlobalSessionContext
 from pydantic import BaseModel
 from typing import Optional, List
 from fastapi import UploadFile, File
@@ -13,6 +14,7 @@ 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()
 
@@ -138,20 +140,6 @@ llm = create_llm_client()
 chat_orchestrator = ChatOrchestrator()
 seamless_orchestrator = SeamlessOrchestrator(llm=llm)
 
-# Global context storage
-class GlobalSessionContext:
-    def __init__(self):
-        self.full_log: list[dict] = []
-
-    def append(self, role: str, content: str):
-        self.full_log.append({"role": role, "content": content})
-
-    def filter_by_persona(self, persona_id: str):
-        return self.full_log
-
-    def clear(self):
-        self.full_log = []
-
 session_context = GlobalSessionContext()
 
 def create_default_personas(llm_client: LLMClient):
@@ -501,6 +489,7 @@ async def get_current_model():
 
 @router.post("/upload-document")
 async def upload_document(file: UploadFile = File(...)):
+    # Validate file type
     if file.content_type not in [
         "application/pdf",
         "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
@@ -509,16 +498,22 @@ async def upload_document(file: UploadFile = File(...)):
         raise HTTPException(status_code=400, detail="Unsupported file type.")
 
     try:
-        # Read file content into memory
-        contents = await file.read()
+        # Read file bytes
+        file_bytes = await file.read()
 
-        # Now pass raw contents and file type to extractor
-        content = extract_text_from_file(contents, file.content_type)
+        # Check file size limit
+        if not is_within_upload_limit("default", file_bytes, session_context):
+            raise HTTPException(status_code=400, detail="Upload exceeds session document size limit (10 MB).")
 
+        # Extract and validate text
+        content = extract_text_from_file(file_bytes, file.content_type)
         if not content.strip():
             raise HTTPException(status_code=400, detail="Document is empty or unreadable.")
 
+        # Track file size and name
         session_context.append("user", f"[Uploaded Document Content]\n{content.strip()}")
+        session_context.uploaded_files.append(file.filename)
+        session_context.total_upload_size += len(file_bytes)
 
         return {"message": "Document uploaded and added to context successfully."}
 
@@ -553,4 +548,8 @@ async def ask_question(query: PersonaQuery):
     
     add_persona_doc(combined_text, query.persona, doc_id)
 
-    return {"response": response}
+    return {"response": response}
+
+@router.get("/uploaded-files")
+def get_uploaded_filenames():
+    return {"files": session_context.uploaded_files}

multi_llm_chatbot_backend/app/core/context.py

@@ -0,0 +1,17 @@
+# Global context storage
+class GlobalSessionContext:
+    def __init__(self):
+        self.full_log: list[dict] = []
+        self.uploaded_files: list[str] = []
+        self.total_upload_size: int = 0
+
+    def append(self, role: str, content: str):
+        self.full_log.append({"role": role, "content": content})
+
+    def filter_by_persona(self, persona_id: str):
+        return self.full_log
+
+    def clear(self):
+        self.full_log = []
+        self.uploaded_files = []
+        self.total_upload_size = 0

multi_llm_chatbot_backend/app/llm/gemini_client.py

@@ -10,6 +10,7 @@ class GeminiClient(LLMClient):
         
         self.model_name = model_name
         self.api_key = os.getenv("GEMINI_API_KEY")
+        print("DEBUG: GEMINI_API_KEY =", os.getenv("GEMINI_API_KEY"))
         if not self.api_key:
             raise ValueError("GEMINI_API_KEY environment variable is required")
         

multi_llm_chatbot_backend/app/tests/test_context_propagation.py

@@ -6,7 +6,7 @@ BASE_URL = "http://localhost:8000"
 def test_unified_chat():
     print("\nSending unified chat request to /chat...\n")
     payload = {
-        "user_input": "I'm a second year PhD student in Machine Learning. Any advice for my research paper presentation?"
+        "user_input": "I'm a second year PhD student in Machine Learning. Any advice for my research paper presentation? I am preparing for final QnA session."
     }
 
     try:

multi_llm_chatbot_backend/app/utils/document_extractor.py

@@ -1,7 +1,7 @@
+from io import BytesIO
+import PyPDF2
 import tempfile
 import docx2txt
-import PyPDF2
-from io import BytesIO
 
 def extract_text_from_file(file_bytes: bytes, content_type: str) -> str:
     if content_type == "application/pdf":
@@ -12,10 +12,7 @@ def extract_text_from_file(file_bytes: bytes, content_type: str) -> str:
         with tempfile.NamedTemporaryFile(delete=False, suffix=".docx") as tmp:
             tmp.write(file_bytes)
             tmp_path = tmp.name
-        try:
-            return docx2txt.process(tmp_path)
-        finally:
-            os.unlink(tmp_path)  # Clean up temp file
+        return docx2txt.process(tmp_path)
 
     elif content_type == "text/plain":
         return file_bytes.decode("utf-8")

multi_llm_chatbot_backend/app/utils/file_limits.py

@@ -0,0 +1,11 @@
+# utils/file_limits.py
+from app.core.context import GlobalSessionContext
+
+MAX_SESSION_UPLOAD_SIZE_MB = 10
+
+
+MAX_TOTAL_UPLOAD_MB = 10
+
+def is_within_upload_limit(session_id: str, new_file_bytes: bytes, session_context: GlobalSessionContext) -> bool:
+    size_mb = (session_context.total_upload_size + len(new_file_bytes)) / (1024 * 1024)
+    return size_mb <= MAX_TOTAL_UPLOAD_MB

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/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}
@@ -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 
@@ -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;
   }