add reply functionality

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Send } from 'lucide-react';
 
-const ChatInput = ({ onSendMessage, isLoading }) => {
+const ChatInput = ({ onSendMessage, isLoading, placeholder = "Ask your advisors anything about your PhD journey..." }) => {
   const [inputMessage, setInputMessage] = useState('');
 
   const handleSend = () => {
@@ -25,7 +25,7 @@ const ChatInput = ({ onSendMessage, isLoading }) => {
           value={inputMessage}
           onChange={(e) => setInputMessage(e.target.value)}
           onKeyPress={handleKeyPress}
-          placeholder="Ask your advisors anything about your PhD journey..."
+          placeholder={placeholder}
           className="message-input"
           rows="2"
           disabled={isLoading}

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

@@ -1,14 +1,21 @@
 import React from 'react';
+import { Reply } from 'lucide-react';
 import { advisors, getAdvisorColors } from '../data/advisors';
 import { useTheme } from '../contexts/ThemeContext';
 
-const MessageBubble = ({ message }) => {
+const MessageBubble = ({ message, onClick, showReplyButton = false }) => {
   const { isDark } = useTheme();
 
   if (message.type === 'user') {
     return (
       <div className="user-message-container">
         <div className="user-message">
+          {message.replyTo && (
+            <div className="reply-indicator">
+              <Reply size={14} />
+              <span>to {message.replyTo.advisorName}</span>
+            </div>
+          )}
           <p>{message.content}</p>
         </div>
       </div>
@@ -29,11 +36,12 @@ const MessageBubble = ({ message }) => {
           <Icon style={{ color: colors.color }} />
         </div>
         <div 
-          className="advisor-message-bubble"
+          className={`advisor-message-bubble ${showReplyButton ? 'clickable' : ''}`}
           style={{ 
             backgroundColor: colors.bgColor,
-            borderColor: colors.color + '40' // Adding transparency to the border
+            borderColor: colors.color + '40'
           }}
+          onClick={onClick}
         >
           <div className="advisor-message-header">
             <h4 
@@ -41,6 +49,7 @@ const MessageBubble = ({ message }) => {
               style={{ color: colors.color }}
             >
               {advisor.name}
+              {message.isReply && <span className="reply-badge">↳ Reply</span>}
             </h4>
             <span 
               className="message-time"
@@ -63,6 +72,24 @@ const MessageBubble = ({ message }) => {
           >
             {message.content}
           </p>
+          {showReplyButton && (
+            <div className="message-actions">
+              <button 
+                className="reply-button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClick();
+                }}
+                style={{ 
+                  color: colors.color,
+                  borderColor: colors.color + '40'
+                }}
+              >
+                <Reply size={14} />
+                <span>Reply</span>
+              </button>
+            </div>
+          )}
         </div>
       </div>
     );

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Home, MessageCircle } from 'lucide-react';
+import { Home, MessageCircle, Reply, X } from 'lucide-react';
 import ChatInput from '../components/ChatInput';
 import MessageBubble from '../components/MessageBubble';
 import ThinkingIndicator from '../components/ThinkingIndicator';
@@ -13,6 +13,7 @@ const ChatPage = ({ onNavigateToHome }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [thinkingAdvisors, setThinkingAdvisors] = useState([]);
   const [collectedInfo, setCollectedInfo] = useState({});
+  const [replyingTo, setReplyingTo] = useState(null); // { advisorId, messageId, advisorName }
   const messagesEndRef = useRef(null);
   const { isDark } = useTheme();
 
@@ -24,9 +25,20 @@ const ChatPage = ({ onNavigateToHome }) => {
     scrollToBottom();
   }, [messages, thinkingAdvisors]);
 
+  const generateMessageId = () => {
+    return Date.now().toString() + Math.random().toString(36).substr(2, 9);
+  };
+
   const handleSendMessage = async (inputMessage) => {
-    // Add user message immediately
+    // Check if this is a reply to a specific advisor
+    if (replyingTo) {
+      await handleReplyToAdvisor(inputMessage, replyingTo);
+      return;
+    }
+
+    // Regular message flow - add user message immediately
     const userMessage = {
+      id: generateMessageId(),
       type: 'user',
       content: inputMessage,
       timestamp: new Date()
@@ -37,7 +49,7 @@ const ChatPage = ({ onNavigateToHome }) => {
     setThinkingAdvisors(['system']); // Show thinking indicator for orchestrator/system
 
     try {
-      const response = await fetch('http://localhost:8000/chat', {
+      const response = await fetch('http://localhost:8000/chat-sequential', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -62,59 +74,23 @@ const ChatPage = ({ onNavigateToHome }) => {
       if (data.type === 'orchestrator_question') {
         // Orchestrator is asking for clarification
         const orchestratorMessage = {
+          id: generateMessageId(),
           type: 'orchestrator',
           content: data.responses[0].response,
           timestamp: new Date()
         };
         setMessages(prev => [...prev, orchestratorMessage]);
         
-      } else if (data.type === 'advisor_responses') {
-        // Show thinking indicators for advisors before their responses
-        setThinkingAdvisors(['methodist', 'theorist', 'pragmatist']);
-        
-        // Add a small delay then show advisor responses
-        setTimeout(() => {
-          setThinkingAdvisors([]);
-          
-          // Add advisor responses with staggered timing
-          data.responses.forEach((advisorResponse, index) => {
-            setTimeout(() => {
-              let advisorId = 'methodist';
-              
-              if (advisorResponse.persona.toLowerCase().includes('methodist')) {
-                advisorId = 'methodist';
-              } else if (advisorResponse.persona.toLowerCase().includes('theorist')) {
-                advisorId = 'theorist';
-              } else if (advisorResponse.persona.toLowerCase().includes('pragmatist')) {
-                advisorId = 'pragmatist';
-              }
-              
-              const message = {
-                type: 'advisor',
-                advisorId,
-                content: advisorResponse.response,
-                timestamp: new Date()
-              };
-              
-              setMessages(prev => [...prev, message]);
-            }, index * 800);
-          });
-        }, 1000); // Small delay to show advisor thinking
-        
-      } else if (data.type === 'error') {
-        // Handle error response
-        const errorMessage = {
-          type: 'error',
-          content: data.responses[0].response,
-          timestamp: new Date()
-        };
-        setMessages(prev => [...prev, errorMessage]);
+      } else if (data.type === 'sequential_responses') {
+        // Show advisor responses sequentially with realistic timing
+        await showSequentialResponses(data.responses);
       }
       
     } catch (error) {
       console.error('Error sending message:', error);
       setThinkingAdvisors([]);
       setMessages(prev => [...prev, {
+        id: generateMessageId(),
         type: 'error',
         content: 'Sorry, there was an error processing your message. Please try again.',
         timestamp: new Date()
@@ -124,8 +100,118 @@ const ChatPage = ({ onNavigateToHome }) => {
     }
   };
 
-  const handleSuggestionClick = (suggestion) => {
-    handleSendMessage(suggestion);
+  const showSequentialResponses = async (responses) => {
+    const advisorOrder = ['methodist', 'theorist', 'pragmatist'];
+    
+    for (let i = 0; i < advisorOrder.length; i++) {
+      const advisorId = advisorOrder[i];
+      
+      // Show thinking indicator for this specific advisor
+      setThinkingAdvisors([advisorId]);
+      
+      // Wait a bit to simulate thinking time (since responses are pre-generated)
+      await new Promise(resolve => setTimeout(resolve, 800));
+      
+      // Find the response for this advisor
+      const advisorResponse = responses.find(r => r.persona_id === advisorId);
+      
+      if (advisorResponse) {
+        // Remove thinking indicator and add message
+        setThinkingAdvisors([]);
+        
+        const message = {
+          id: generateMessageId(),
+          type: 'advisor',
+          advisorId: advisorResponse.persona_id,
+          content: advisorResponse.response,
+          timestamp: new Date()
+        };
+        
+        setMessages(prev => [...prev, message]);
+        
+        // Small delay before next advisor starts thinking
+        if (i < advisorOrder.length - 1) {
+          await new Promise(resolve => setTimeout(resolve, 300));
+        }
+      }
+    }
+    
+    // Clear any remaining thinking indicators
+    setThinkingAdvisors([]);
+  };
+
+  const handleReplyToAdvisor = async (inputMessage, replyInfo) => {
+    // Add user reply message
+    const userReplyMessage = {
+      id: generateMessageId(),
+      type: 'user',
+      content: inputMessage,
+      timestamp: new Date(),
+      replyTo: replyInfo
+    };
+    setMessages(prev => [...prev, userReplyMessage]);
+    
+    // Show thinking for the specific advisor
+    setThinkingAdvisors([replyInfo.advisorId]);
+    setReplyingTo(null); // Clear reply state
+    
+    try {
+      const response = await fetch('http://localhost:8000/reply-to-advisor', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          user_input: inputMessage,
+          advisor_id: replyInfo.advisorId,
+          original_message_id: replyInfo.messageId
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to send reply');
+      }
+
+      const data = await response.json();
+      setThinkingAdvisors([]);
+
+      // Add advisor reply
+      const advisorReplyMessage = {
+        id: generateMessageId(),
+        type: 'advisor',
+        advisorId: data.persona_id,
+        content: data.response,
+        timestamp: new Date(),
+        isReply: true
+      };
+      
+      setMessages(prev => [...prev, advisorReplyMessage]);
+      
+    } catch (error) {
+      console.error('Error sending reply:', error);
+      setThinkingAdvisors([]);
+      setMessages(prev => [...prev, {
+        id: generateMessageId(),
+        type: 'error',
+        content: 'Sorry, there was an error sending your reply. Please try again.',
+        timestamp: new Date()
+      }]);
+    }
+  };
+
+  const handleMessageClick = (message) => {
+    if (message.type === 'advisor') {
+      const advisor = advisors[message.advisorId];
+      setReplyingTo({
+        advisorId: message.advisorId,
+        messageId: message.id,
+        advisorName: advisor.name
+      });
+    }
+  };
+
+  const cancelReply = () => {
+    setReplyingTo(null);
   };
 
   return (
@@ -145,7 +231,9 @@ const ChatPage = ({ onNavigateToHome }) => {
               <p className="chat-subtitle">
                 {Object.keys(collectedInfo).length > 0 
                   ? `Context: ${Object.entries(collectedInfo).map(([k,v]) => `${k}: ${v}`).join(', ')}`
-                  : 'Consulting with personas'
+                  : replyingTo 
+                    ? `Replying to ${replyingTo.advisorName}`
+                    : 'Consulting with your three advisors'
                 }
               </p>
             </div>
@@ -176,14 +264,14 @@ const ChatPage = ({ onNavigateToHome }) => {
         <div className="chat-box">
           {/* Messages */}
           <div className="messages-container">
-            {messages.length === 0 && (
-              <SuggestionsPanel onSuggestionClick={handleSuggestionClick} />
+            {messages.length === 0 && !replyingTo && (
+              <SuggestionsPanel onSuggestionClick={handleSendMessage} />
             )}
             
             {messages.map((message, index) => {
               if (message.type === 'orchestrator') {
                 return (
-                  <div key={index} className="advisor-message-container">
+                  <div key={message.id || index} className="advisor-message-container">
                     <div className="advisor-avatar orchestrator-avatar">
                       <MessageCircle className="orchestrator-icon" />
                     </div>
@@ -204,7 +292,14 @@ const ChatPage = ({ onNavigateToHome }) => {
                   </div>
                 );
               }
-              return <MessageBubble key={index} message={message} />;
+              return (
+                <MessageBubble 
+                  key={message.id || index} 
+                  message={message} 
+                  onClick={() => handleMessageClick(message)}
+                  showReplyButton={message.type === 'advisor'}
+                />
+              );
             })}
             
             {/* Thinking Indicators */}
@@ -236,8 +331,29 @@ const ChatPage = ({ onNavigateToHome }) => {
             <div ref={messagesEndRef} />
           </div>
 
+          {/* Reply Banner */}
+          {replyingTo && (
+            <div className="reply-banner">
+              <div className="reply-info">
+                <Reply className="reply-icon" />
+                <span>Replying to {replyingTo.advisorName}</span>
+              </div>
+              <button onClick={cancelReply} className="cancel-reply-btn">
+                <X size={16} />
+              </button>
+            </div>
+          )}
+
           {/* Input Area */}
-          <ChatInput onSendMessage={handleSendMessage} isLoading={isLoading} />
+          <ChatInput 
+            onSendMessage={handleSendMessage} 
+            isLoading={isLoading}
+            placeholder={
+              replyingTo 
+                ? `Reply to ${replyingTo.advisorName}...`
+                : "Ask your advisors anything about your PhD journey..."
+            }
+          />
         </div>
       </div>
     </div>

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

@@ -568,6 +568,99 @@
   transform: translateY(0);
 }
 
+/* Reply Functionality Styles */
+.reply-banner {
+  background-color: var(--bg-tertiary);
+  border-top: 1px solid var(--border-primary);
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.reply-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+.reply-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--accent-primary);
+}
+
+.cancel-reply-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.cancel-reply-btn:hover {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.reply-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  opacity: 0.8;
+  margin-bottom: 4px;
+}
+
+.reply-badge {
+  font-size: 11px;
+  opacity: 0.7;
+  margin-left: 8px;
+}
+
+.advisor-message-bubble.clickable {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.advisor-message-bubble.clickable:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.message-actions {
+  margin-top: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.advisor-message-bubble.clickable:hover .message-actions {
+  opacity: 1;
+}
+
+.reply-button {
+  background: transparent;
+  border: 1px solid;
+  border-radius: 6px;
+  padding: 4px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.2s ease;
+}
+
+.reply-button:hover {
+  background-color: var(--bg-tertiary);
+  transform: translateY(-1px);
+}
+
 /* Orchestrator/PhD Assistant Styles */
 .orchestrator-avatar {
   background-color: var(--bg-tertiary) !important;