add orchestrator ui

phd-advisor-frontend/src/App.js

@@ -12,6 +12,13 @@ function App() {
 
   const navigateToHome = () => {
     setCurrentView('home');
+    // Reset session when going home
+    fetch('http://localhost:8000/reset-session', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      }
+    }).catch(console.error);
   };
 
   return (

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

@@ -9,6 +9,7 @@ const ChatPage = ({ onNavigateToHome }) => {
   const [messages, setMessages] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [thinkingAdvisors, setThinkingAdvisors] = useState([]);
+  const [collectedInfo, setCollectedInfo] = useState({});
   const messagesEndRef = useRef(null);
 
   const scrollToBottom = () => {
@@ -20,17 +21,16 @@ const ChatPage = ({ onNavigateToHome }) => {
   }, [messages, thinkingAdvisors]);
 
   const handleSendMessage = async (inputMessage) => {
+    // Add user message immediately
     const userMessage = {
       type: 'user',
       content: inputMessage,
       timestamp: new Date()
     };
-
     setMessages(prev => [...prev, userMessage]);
-    setIsLoading(true);
     
-    // Show thinking indicators for all advisors
-    setThinkingAdvisors(['methodist', 'theorist', 'pragmatist']);
+    setIsLoading(true);
+    setThinkingAdvisors(['system']); // Show thinking indicator for orchestrator/system
 
     try {
       const response = await fetch('http://localhost:8000/chat', {
@@ -39,8 +39,7 @@ const ChatPage = ({ onNavigateToHome }) => {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          user_input: inputMessage,
-          active_personas: ['methodist', 'theorist', 'pragmatist']
+          user_input: inputMessage
         }),
       });
 
@@ -49,34 +48,64 @@ const ChatPage = ({ onNavigateToHome }) => {
       }
 
       const data = await response.json();
-      
-      // Clear thinking indicators
       setThinkingAdvisors([]);
       
-      // Add advisor responses with staggered timing for better UX
-      data.forEach((advisorResponse, index) => {
+      // Update collected info if provided
+      if (data.collected_info) {
+        setCollectedInfo(data.collected_info);
+      }
+
+      if (data.type === 'orchestrator_question') {
+        // Orchestrator is asking for clarification
+        const orchestratorMessage = {
+          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(() => {
-          // Map the API persona names to our advisor IDs
-          let advisorId = 'methodist'; // default fallback
-          
-          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';
-          }
+          setThinkingAdvisors([]);
           
-          const message = {
-            type: 'advisor',
-            advisorId,
-            content: advisorResponse.response,
-            timestamp: new Date()
-          };
-          
-          setMessages(prev => [...prev, message]);
-        }, index * 800); // Stagger responses by 800ms
-      });
+          // 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]);
+      }
       
     } catch (error) {
       console.error('Error sending message:', error);
@@ -105,7 +134,12 @@ const ChatPage = ({ onNavigateToHome }) => {
             </button>
             <div>
               <h1 className="chat-title">Advisory Panel Chat</h1>
-              <p className="chat-subtitle">Consulting with your three advisors</p>
+              <p className="chat-subtitle">
+                {Object.keys(collectedInfo).length > 0 
+                  ? `Context: ${Object.entries(collectedInfo).map(([k,v]) => `${k}: ${v}`).join(', ')}`
+                  : 'Consulting with your three advisors'
+                }
+              </p>
             </div>
           </div>
           <div className="advisor-indicators">
@@ -142,12 +176,56 @@ const ChatPage = ({ onNavigateToHome }) => {
               </div>
             )}
             
-            {messages.map((message, index) => (
-              <MessageBubble key={index} message={message} />
-            ))}
+            {messages.map((message, index) => {
+              if (message.type === 'orchestrator') {
+                return (
+                  <div key={index} className="advisor-message-container">
+                    <div className="advisor-avatar" style={{ backgroundColor: '#F3F4F6' }}>
+                      <MessageCircle style={{ color: '#6B7280' }} />
+                    </div>
+                    <div className="advisor-message-bubble">
+                      <div className="advisor-message-header">
+                        <h4 className="advisor-message-name" style={{ color: '#6B7280' }}>
+                          PhD Assistant
+                        </h4>
+                        <span className="message-time">
+                          {message.timestamp.toLocaleTimeString([], {
+                            hour: '2-digit', 
+                            minute: '2-digit'
+                          })}
+                        </span>
+                      </div>
+                      <p className="advisor-message-text">{message.content}</p>
+                    </div>
+                  </div>
+                );
+              }
+              return <MessageBubble key={index} message={message} />;
+            })}
             
             {/* Thinking Indicators */}
-            {thinkingAdvisors.map(advisorId => (
+            {thinkingAdvisors.includes('system') && (
+              <div className="thinking-container">
+                <div className="advisor-avatar" style={{ backgroundColor: '#F3F4F6' }}>
+                  <MessageCircle style={{ color: '#6B7280' }} />
+                </div>
+                <div className="thinking-bubble">
+                  <div className="thinking-header">
+                    <h4 className="advisor-name" style={{ color: '#6B7280' }}>
+                      Processing...
+                    </h4>
+                  </div>
+                  <div className="thinking-dots">
+                    <div className="thinking-dot" style={{ backgroundColor: '#6B7280', animationDelay: '0ms' }}></div>
+                    <div className="thinking-dot" style={{ backgroundColor: '#6B7280', animationDelay: '150ms' }}></div>
+                    <div className="thinking-dot" style={{ backgroundColor: '#6B7280', animationDelay: '300ms' }}></div>
+                  </div>
+                  <p className="thinking-text">analyzing your question...</p>
+                </div>
+              </div>
+            )}
+            
+            {thinkingAdvisors.filter(id => id !== 'system').map(advisorId => (
               <ThinkingIndicator key={advisorId} advisorId={advisorId} />
             ))}
             

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

@@ -231,6 +231,234 @@
   line-height: 1.6;
 }
 
+/* Clarification Flow Styles */
+.clarification-flow {
+  background-color: #FFFFFF;
+  border-radius: 16px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  padding: 24px;
+  margin: 24px auto;
+  max-width: 600px;
+  border: 1px solid #E5E7EB;
+}
+
+.clarification-header {
+  text-align: center;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #F3F4F6;
+}
+
+.clarification-icon {
+  width: 48px;
+  height: 48px;
+  background-color: #EFF6FF;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px auto;
+}
+
+.clarification-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.clarification-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 8px;
+}
+
+.clarification-subtitle {
+  font-size: 14px;
+  color: #6B7280;
+  margin: 0;
+}
+
+.clarification-conversation {
+  max-height: 300px;
+  overflow-y: auto;
+  margin-bottom: 16px;
+}
+
+.clarification-message {
+  margin-bottom: 12px;
+}
+
+.user-clarification-message {
+  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  color: #FFFFFF;
+  border-radius: 12px;
+  padding: 10px 16px;
+  margin-left: auto;
+  max-width: 80%;
+  width: fit-content;
+}
+
+.user-clarification-message p {
+  margin: 0;
+  font-size: 14px;
+}
+
+.system-clarification-message {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background-color: #F9FAFB;
+  border-radius: 12px;
+  padding: 12px 16px;
+  max-width: 90%;
+}
+
+.system-clarification-message p {
+  margin: 0;
+  font-size: 14px;
+  color: #374151;
+  line-height: 1.5;
+}
+
+.current-question {
+  margin-bottom: 16px;
+  padding: 16px;
+  background-color: #EFF6FF;
+  border-radius: 12px;
+  border-left: 4px solid #6366F1;
+}
+
+.collected-info {
+  background-color: #F0FDF4;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  border-left: 4px solid #10B981;
+}
+
+.collected-info h4 {
+  margin: 0 0 12px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #065F46;
+}
+
+.info-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.info-tag {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background-color: #DCFCE7;
+  color: #166534;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.info-tag svg {
+  width: 14px;
+  height: 14px;
+}
+
+.clarification-input-area {
+  border-top: 1px solid #F3F4F6;
+  padding-top: 16px;
+}
+
+.clarification-input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.clarification-input {
+  width: 100%;
+  resize: none;
+  border: 1px solid #D1D5DB;
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.clarification-input:focus {
+  border-color: #6366F1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.clarification-buttons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.clarification-submit-btn {
+  background: linear-gradient(135deg, #6366F1, #8B5CF6);
+  color: #FFFFFF;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+}
+
+.clarification-submit-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+.clarification-submit-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.clarification-skip-btn {
+  background-color: #F3F4F6;
+  color: #6B7280;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: none;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+
+.clarification-skip-btn:hover {
+  background-color: #E5E7EB;
+  color: #374151;
+}
+
+.clarification-cancel-btn {
+  background-color: transparent;
+  color: #DC2626;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid #FCA5A5;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+}
+
+.clarification-cancel-btn:hover {
+  background-color: #FEF2F2;
+}
+
 /* Chat Page Styles */
 .chat-page {
   min-height: 100vh;