add file upload feature

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