add new component and styles

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,3 @@
-/* ChatPage.css - Modern Chat Interface Styles */
 
 /* Modern Chat Page Layout */
 .modern-chat-page {
@@ -95,6 +94,12 @@
   gap: 20px;
 }
 
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
 /* Advisor Pills */
 .advisor-pills {
   display: flex;
@@ -113,42 +118,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 +149,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 +178,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 +212,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 +266,7 @@
   gap: 16px;
   align-items: center;
   opacity: 0.8;
+  margin-bottom: 24px;
 }
 
 .thinking-content {
@@ -322,64 +307,15 @@
   40% { transform: scale(1); }
 }
 
-/* Floating Input Area */
+/* Floating Input Area - New Style */
 .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 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--bg-secondary);
-  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;
-}
-
-.reply-info {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: var(--text-secondary);
-}
-
-.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-tertiary);
-  color: var(--text-secondary);
-}
-
-.input-wrapper {
-  max-width: 900px;
-  margin: 0 auto;
+  background: transparent; /* No background or blur */
+  padding: 0;
 }
 
 /* Provider Dropdown Styles */
@@ -579,7 +515,7 @@
   }
   
   .main-content {
-    padding: 24px 16px 120px 16px;
+    padding: 24px 12px 120px 12px; /* Adjusted for mobile */
   }
   
   .welcome-state {
@@ -587,10 +523,21 @@
   }
   
   .messages-scroll {
-    padding: 20px;
+    padding: 16px;
+    padding-bottom: 30px;
   }
   
   .floating-input-area {
-    padding: 16px 16px 24px 16px;
+    bottom: 10px;
+  }
+  
+  .orchestrator-content {
+    max-width: none;
+  }
+  
+  .system-content {
+    max-width: 90%;
+    padding: 10px 16px;
+    font-size: 13px;
   }
 }