new input component

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/styles/EnhancedChatInput.css

@@ -0,0 +1,654 @@
+/* src/styles/EnhancedChatInput.css - Complete Fixed File */
+
+/* Main Container */
+.enhanced-chat-input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  max-width: 768px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+/* Floating Upload Section */
+.floating-upload-section {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  animation: slideUpFade 0.2s ease-out;
+}
+
+[data-theme="dark"] .floating-upload-section {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+/* Floating Documents Section */
+.floating-documents-section {
+  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);
+  animation: slideUpFade 0.2s ease-out;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .floating-documents-section {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+}
+
+.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: 600;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.close-documents-btn {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.close-documents-btn:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.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-secondary);
+}
+
+.no-documents svg {
+  color: var(--text-tertiary);
+  margin-bottom: 12px;
+}
+
+.no-documents p {
+  margin: 0 0 4px 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;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 16px;
+  font-family: inherit;
+  line-height: 1.5;
+  resize: none;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.main-textarea::placeholder {
+  color: var(--text-secondary);
+}
+
+.main-textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Custom scrollbar for textarea */
+.main-textarea::-webkit-scrollbar {
+  width: 4px;
+}
+
+.main-textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.main-textarea::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: 2px;
+}
+
+.main-textarea::-webkit-scrollbar-thumb:hover {
+  background: var(--text-tertiary);
+}
+
+/* Controls Row */
+.controls-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 20px 16px 20px;
+  gap: 12px;
+}
+
+/* File Controls */
+.file-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Add Documents Button */
+.add-docs-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.add-docs-btn:hover:not(:disabled) {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.add-docs-btn.active {
+  background: var(--feature-bg);
+  color: var(--accent-primary);
+}
+
+.add-docs-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.add-docs-btn span {
+  user-select: none;
+}
+
+/* View Documents Button */
+.view-docs-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: var(--feature-bg);
+  border: 1px solid var(--accent-primary);
+  border-radius: 8px;
+  color: var(--accent-primary);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.view-docs-btn:hover {
+  background: var(--accent-primary);
+  color: white;
+}
+
+.view-docs-btn.active {
+  background: 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 FOR BOTH LIGHT AND DARK MODE */
+.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 - ensure visibility in both modes */
+.send-button.enabled {
+  background: #3B82F6 !important; /* Blue background - force override */
+  color: #FFFFFF !important; /* White text/icon - force override */
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+/* Force icon color to white when enabled */
+.send-button.enabled svg {
+  color: #FFFFFF !important;
+  fill: #FFFFFF !important;
+  stroke: #FFFFFF !important;
+  width: 16px !important;
+  height: 16px !important;
+}
+
+.send-button.enabled:hover {
+  background: #2563EB !important; /* Darker blue on hover */
+  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; /* Light gray background */
+  color: #9CA3AF; /* Gray text/icon */
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+[data-theme="dark"] .send-button.disabled {
+  background: #374151; /* Dark gray background in dark mode */
+  color: #6B7280; /* Gray text/icon in dark mode */
+}
+
+.send-button.disabled svg {
+  color: #9CA3AF !important;
+  fill: #9CA3AF !important;
+  stroke: #9CA3AF !important;
+  width: 16px !important;
+  height: 16px !important;
+}
+
+[data-theme="dark"] .send-button.disabled svg {
+  color: #6B7280 !important;
+  fill: #6B7280 !important;
+  stroke: #6B7280 !important;
+}
+
+/* Document Upload Notifications */
+.document-upload-notification {
+  display: flex;
+  justify-content: center;
+  margin: 16px 0;
+  animation: slideUpFade 0.3s ease-out;
+}
+
+.upload-notification-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: var(--feature-bg);
+  border: 1px solid var(--accent-primary);
+  border-radius: 12px;
+  color: var(--accent-primary);
+  font-size: 14px;
+  font-weight: 500;
+  max-width: 80%;
+  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
+}
+
+[data-theme="dark"] .upload-notification-content {
+  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
+}
+
+.upload-notification-content .upload-icon {
+  flex-shrink: 0;
+}
+
+/* Document Counter in Header */
+.document-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--feature-bg);
+  border: 1px solid var(--accent-primary);
+  border-radius: 20px;
+  color: var(--accent-primary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: default;
+  transition: all 0.2s ease;
+}
+
+.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);
+}
+
+/* Reply Banner Styles */
+.reply-banner {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  max-width: 768px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 12px;
+}
+
+[data-theme="dark"] .reply-banner {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+
+.reply-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.reply-info strong {
+  color: var(--accent-primary);
+}
+
+.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);
+}
+
+/* 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;
+  }
+}