add sidebar component

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Home, MessageCircle, Reply, X, Sparkles, Users, Settings2, FileText } from 'lucide-react';
+import { Home, MessageCircle, Reply, X, Sparkles, Users, Settings2, FileText , LogOut} from 'lucide-react';
 import EnhancedChatInput from '../components/EnhancedChatInput';
 import MessageBubble from '../components/MessageBubble';
 import ThinkingIndicator from '../components/ThinkingIndicator';
@@ -7,12 +7,13 @@ import SuggestionsPanel from '../components/SuggestionsPanel';
 import ThemeToggle from '../components/ThemeToggle';
 import ProviderDropdown from '../components/ProviderDropdown';
 import ExportButton from '../components/ExportButton';
+import Sidebar from '../components/Sidebar';
 import { advisors, getAdvisorColors } from '../data/advisors';
 import { useTheme } from '../contexts/ThemeContext';
 import '../styles/ChatPage.css';
 import '../styles/EnhancedChatInput.css';
 
-const ChatPage = ({ onNavigateToHome }) => {
+const ChatPage = ({ user, authToken, onNavigateToHome, onSignOut }) => {
   const [messages, setMessages] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [thinkingAdvisors, setThinkingAdvisors] = useState([]);
@@ -24,6 +25,13 @@ const ChatPage = ({ onNavigateToHome }) => {
   const messagesEndRef = useRef(null);
   const { isDark } = useTheme();
 
+  const [currentSessionId, setCurrentSessionId] = useState(null);
+  const [currentSessionTitle, setCurrentSessionTitle] = useState('');
+  const [isSavingSession, setIsSavingSession] = useState(false);
+  const [isLoadingSession, setIsLoadingSession] = useState(false);
+
+  
+
   const scrollToBottom = () => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
@@ -49,6 +57,8 @@ const ChatPage = ({ onNavigateToHome }) => {
     }
   };
 
+  
+
   const handleProviderSwitch = async (newProvider) => {
     if (newProvider === currentProvider || isProviderSwitching) return;
 
@@ -104,66 +114,204 @@ 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]);
+  const createNewSession = async (firstMessage = null) => {
+  try {
+    const title = firstMessage 
+      ? `${firstMessage.substring(0, 30)}...` 
+      : `Chat ${new Date().toLocaleDateString()}`;
+
+    const response = await fetch('http://localhost:8000/api/chat-sessions', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${authToken}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ title })
+    });
 
-    // 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;
+    if (response.ok) {
+      const newSession = await response.json();
+      setCurrentSessionId(newSession.id);
+      setCurrentSessionTitle(newSession.title);
+      return newSession.id;
+    } else {
+      console.error('Failed to create new session');
+      return null;
+    }
+  } catch (error) {
+    console.error('Error creating new session:', error);
+    return null;
+  }
+};
+
+// Load an existing chat session
+const loadChatSession = async (sessionId) => {
+  if (!sessionId || isLoadingSession) return;
+
+  setIsLoadingSession(true);
+  try {
+    const response = await fetch(`http://localhost:8000/api/chat-sessions/${sessionId}`, {
+      headers: {
+        'Authorization': `Bearer ${authToken}`,
+        'Content-Type': 'application/json'
+      }
     });
 
-    // Scroll to bottom to show the new message
-    setTimeout(() => {
-      scrollToBottom();
-    }, 100);
+    if (response.ok) {
+      const session = await response.json();
+      setCurrentSessionId(session.id);
+      setCurrentSessionTitle(session.title);
+      
+      // Convert stored messages back to proper format
+      const formattedMessages = session.messages.map(msg => ({
+        ...msg,
+        timestamp: new Date(msg.timestamp)
+      }));
+      
+      setMessages(formattedMessages);
+      setReplyingTo(null);
+      setThinkingAdvisors([]);
+    } else {
+      console.error('Failed to load session');
+    }
+  } catch (error) {
+    console.error('Error loading session:', error);
+  } finally {
+    setIsLoadingSession(false);
+  }
+};
+
+// Save a message to the current session
+const saveMessageToSession = async (message) => {
+  if (!currentSessionId || !authToken) return;
+
+  try {
+    await fetch(`http://localhost:8000/api/chat-sessions/${currentSessionId}/messages`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${authToken}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        session_id: currentSessionId,
+        message: {
+          ...message,
+          timestamp: message.timestamp.toISOString()
+        }
+      })
+    });
+  } catch (error) {
+    console.error('Error saving message to session:', error);
+  }
+};
+
+// Update session title based on first message
+const updateSessionTitle = async (sessionId, newTitle) => {
+  if (!sessionId || !authToken) return;
+
+  try {
+    await fetch(`http://localhost:8000/api/chat-sessions/${sessionId}`, {
+      method: 'PUT',
+      headers: {
+        'Authorization': `Bearer ${authToken}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ title: newTitle })
+    });
+    setCurrentSessionTitle(newTitle);
+  } catch (error) {
+    console.error('Error updating session title:', error);
+  }
+};
+
+// Handle selecting a session from sidebar
+const handleSelectSession = async (sessionId) => {
+  if (sessionId === currentSessionId) return;
+  await loadChatSession(sessionId);
+};
+
+// Handle creating new chat from sidebar
+const handleNewChat = async (sessionId = null) => {
+  if (sessionId) {
+    // If specific session ID provided, load it
+    await loadChatSession(sessionId);
+  } else {
+    // Create a completely new session
+    setMessages([]);
+    setCurrentSessionId(null);
+    setCurrentSessionTitle('');
+    setReplyingTo(null);
+    setThinkingAdvisors([]);
+    setUploadedDocuments([]);
+  }
+};
+
+  const handleFileUploaded = async (fileInfo) => {
+  const documentMessage = {
+    id: generateMessageId(),
+    type: 'document_upload',
+    content: `Document uploaded: ${fileInfo.filename}`,
+    timestamp: new Date()
   };
+  
+  setMessages(prev => [...prev, documentMessage]);
+  setUploadedDocuments(prev => [...prev, fileInfo]);
+  
+  // Save document upload message to database if we have a current session
+  if (currentSessionId) {
+    await saveMessageToSession(documentMessage);
+  }
+};
 
   const handleSendMessage = async (inputMessage) => {
-    if (replyingTo) {
-      await handleReplyToAdvisor(inputMessage, replyingTo);
-      return;
-    }
+    if (!inputMessage.trim()) return;
 
-    // Add user message
+    // Create user message
     const userMessage = {
-      id: generateMessageId(),
+      id: generateMessageId(), // This uses your existing function
       type: 'user',
       content: inputMessage,
       timestamp: new Date()
     };
+
+    // Add to local state immediately
     setMessages(prev => [...prev, userMessage]);
-    
+
+    // Create new session if we don't have one
+    let sessionId = currentSessionId;
+    if (!sessionId) {
+      sessionId = await createNewSession(inputMessage);
+      if (!sessionId) {
+        console.error('Failed to create session');
+        return;
+      }
+    }
+
+    // Save user message to database
+    await saveMessageToSession(userMessage);
+
+    // Update session title if this is the first message and title is generic
+    if (messages.length === 0 && currentSessionTitle.includes('Chat ')) {
+      const newTitle = inputMessage.length > 30 
+        ? `${inputMessage.substring(0, 30)}...` 
+        : inputMessage;
+      await updateSessionTitle(sessionId, newTitle);
+    }
+
+    // Set loading state
     setIsLoading(true);
-    // Show thinking indicators for all advisors (backend will decide which ones respond)
-    setThinkingAdvisors(['methodologist', 'theorist', 'pragmatist']);
+    setThinkingAdvisors(['system']);
 
     try {
+      // Your existing API call logic here...
       const response = await fetch('http://localhost:8000/chat-sequential', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          user_input: inputMessage
+          user_input: inputMessage,
+          response_length: 'medium'
         }),
       });
 
@@ -172,10 +320,9 @@ const ChatPage = ({ onNavigateToHome }) => {
       }
 
       const data = await response.json();
-      console.log('Backend response:', data);
 
       if (data.type === 'sequential_responses' && data.responses) {
-        // Simply map each advisor response in the order backend provides
+        // Create advisor messages
         const advisorMessages = data.responses.map((advisor) => ({
           id: generateMessageId(),
           type: 'advisor',
@@ -185,8 +332,14 @@ const ChatPage = ({ onNavigateToHome }) => {
           timestamp: new Date()
         }));
 
+        // Add to local state
         setMessages(prev => [...prev, ...advisorMessages]);
 
+        // Save each advisor message to database
+        for (const advisorMessage of advisorMessages) {
+          await saveMessageToSession(advisorMessage);
+        }
+
       } else if (data.type === 'error') {
         const errorMessage = {
           id: generateMessageId(),
@@ -195,6 +348,7 @@ const ChatPage = ({ onNavigateToHome }) => {
           timestamp: new Date()
         };
         setMessages(prev => [...prev, errorMessage]);
+        await saveMessageToSession(errorMessage);
       }
 
     } catch (error) {
@@ -206,6 +360,7 @@ const ChatPage = ({ onNavigateToHome }) => {
         timestamp: new Date()
       };
       setMessages(prev => [...prev, errorMessage]);
+      await saveMessageToSession(errorMessage);
     }
 
     setIsLoading(false);
@@ -225,8 +380,12 @@ const ChatPage = ({ onNavigateToHome }) => {
       },
       timestamp: new Date()
     };
+
     setMessages(prev => [...prev, replyMessage]);
     
+    // Save reply message to database
+    await saveMessageToSession(replyMessage);
+    
     setIsLoading(true);
     setThinkingAdvisors([replyContext.advisorId]);
 
@@ -260,6 +419,9 @@ const ChatPage = ({ onNavigateToHome }) => {
           timestamp: new Date()
         };
         setMessages(prev => [...prev, replyResponseMessage]);
+        
+        // Save advisor reply to database
+        await saveMessageToSession(replyResponseMessage);
       }
 
     } catch (error) {
@@ -271,6 +433,9 @@ const ChatPage = ({ onNavigateToHome }) => {
         timestamp: new Date()
       };
       setMessages(prev => [...prev, errorMessage]);
+      
+      // Save error message to database
+      await saveMessageToSession(errorMessage);
     }
 
     setIsLoading(false);
@@ -301,6 +466,9 @@ const ChatPage = ({ onNavigateToHome }) => {
     };
     setMessages(prev => [...prev, expandMessage]);
     
+    // Save expand request to database
+    await saveMessageToSession(expandMessage);
+    
     setIsLoading(true);
     setThinkingAdvisors([advisorId]);
 
@@ -322,11 +490,8 @@ const ChatPage = ({ onNavigateToHome }) => {
 
       const data = await response.json();
 
-      // Clean response handling without RAG metadata
-      let expandedMessage = null;
-
       if (data.persona && data.response) {
-        expandedMessage = {
+        const expandedMessage = {
           id: generateMessageId(),
           type: 'advisor',
           advisorId: advisorId,
@@ -336,10 +501,10 @@ const ChatPage = ({ onNavigateToHome }) => {
           expandsMessageId: messageId,
           timestamp: new Date()
         };
-      }
-
-      if (expandedMessage) {
         setMessages(prev => [...prev, expandedMessage]);
+        
+        // Save expanded response to database
+        await saveMessageToSession(expandedMessage);
       } else {
         const errorMessage = {
           id: generateMessageId(),
@@ -348,6 +513,9 @@ const ChatPage = ({ onNavigateToHome }) => {
           timestamp: new Date()
         };
         setMessages(prev => [...prev, errorMessage]);
+        
+        // Save error message to database
+        await saveMessageToSession(errorMessage);
       }
 
     } catch (error) {
@@ -355,10 +523,13 @@ const ChatPage = ({ onNavigateToHome }) => {
       const errorMessage = {
         id: generateMessageId(),
         type: 'error',
-        content: 'Sorry, I encountered an error expanding the response. Please try again.',
+        content: 'Sorry, I encountered an error while expanding the message. Please try again.',
         timestamp: new Date()
       };
       setMessages(prev => [...prev, errorMessage]);
+      
+      // Save error message to database
+      await saveMessageToSession(errorMessage);
     }
 
     setIsLoading(false);
@@ -393,184 +564,222 @@ const ChatPage = ({ onNavigateToHome }) => {
   const hasConversationMessages = messages.filter(m => m.type !== 'system' && m.type !== 'document_upload').length > 0;
 
   return (
-    <div className="modern-chat-page">
-      {/* Floating Header */}
-      <div className="floating-header">
-        <div className="header-left">
-          <button onClick={onNavigateToHome} className="modern-home-btn">
-            <Home size={20} />
-          </button>
-          <div className="header-brand">
-            <div className="brand-icon">
-              <Users size={24} />
-            </div>
-            <div className="brand-text">
-              <h1>PhD Advisory</h1>
-              <p>AI-Powered Academic Guidance</p>
+    <div className="chat-page-with-sidebar">
+      {/* Sidebar Component */}
+      <Sidebar 
+        user={user}
+        currentSessionId={currentSessionId}
+        onSelectSession={handleSelectSession}
+        onNewChat={handleNewChat}
+        onSignOut={onSignOut}
+        authToken={authToken}
+      />
+      
+      <div className="main-chat-area">
+        <div className="modern-chat-page">
+          {/* Floating Header */}
+          <div className="floating-header">
+            <div className="header-left">
+              <button onClick={onNavigateToHome} className="modern-home-btn">
+                <Home size={20} />
+              </button>
+              <div className="header-brand">
+                <div className="brand-icon">
+                  <Users size={24} />
+                </div>
+                <div className="brand-text">
+                  <h1>PhD Advisory</h1>
+                  <p>AI-Powered Academic Guidance</p>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-        
-        <div className="header-right">
-          <div className="advisor-pills">
-            {Object.entries(advisors).map(([id, advisor]) => {
-              const Icon = advisor.icon;
-              const colors = getAdvisorColors(id, isDark);
-              const isThinking = thinkingAdvisors.includes(id);
+            
+            <div className="header-right">
+              <div className="advisor-pills">
+                {Object.entries(advisors).map(([id, advisor]) => {
+                  const Icon = advisor.icon;
+                  const colors = getAdvisorColors(id, isDark);
+                  const isThinking = thinkingAdvisors.includes(id);
+                  
+                  return (
+                    <div 
+                      key={id} 
+                      className={`advisor-pill ${isThinking ? 'thinking' : ''}`}
+                      style={{ 
+                        '--advisor-color': colors.color,
+                        '--advisor-bg': colors.bgColor
+                      }}
+                      title={`${advisor.name} - ${advisor.expertise}`}
+                    >
+                      <Icon size={16} />
+                      <span>{advisor.name}</span>
+                      {isThinking && (
+                        <div className="thinking-dots">
+                          <div className="dot"></div>
+                          <div className="dot"></div>
+                          <div className="dot"></div>
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
               
-              return (
-                <div 
-                  key={id} 
-                  className={`advisor-pill ${isThinking ? 'thinking' : ''}`}
-                  style={{ 
-                    '--advisor-color': colors.color,
-                    '--advisor-bg': colors.bgColor
-                  }}
-                  title={`${advisor.name} - ${advisor.expertise}`}
+              <div className="header-controls">
+                {/* Add session title display */}
+                {currentSessionTitle && (
+                  <div className="session-title-display">
+                    <span>{currentSessionTitle}</span>
+                  </div>
+                )}
+                
+                {/* Optional: Add header sign out button */}
+                <button 
+                  className="header-signout-btn"
+                  onClick={onSignOut}
+                  title="Sign Out"
                 >
-                  <Icon size={16} />
-                  <span>{advisor.name}</span>
-                  {isThinking && (
-                    <div className="thinking-dots">
-                      <div className="dot"></div>
-                      <div className="dot"></div>
-                      <div className="dot"></div>
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-          
-          <div className="header-controls">
-            {/* Export Button */}
-            <ExportButton hasMessages={hasConversationMessages} />
-            
-            {/* Provider Dropdown */}
-            <ProviderDropdown 
-              currentProvider={currentProvider}
-              onProviderChange={handleProviderSwitch}
-              isLoading={isProviderSwitching}
-            />
-            
-            {/* Theme Toggle */}
-            <ThemeToggle />
+                  <LogOut size={16} />
+                </button>
+                
+                {/* Export Button */}
+                <ExportButton hasMessages={hasConversationMessages} />
+                
+                {/* Provider Dropdown */}
+                <ProviderDropdown 
+                  currentProvider={currentProvider}
+                  onProviderChange={handleProviderSwitch}
+                  isLoading={isProviderSwitching}
+                />
+                
+                {/* Theme Toggle */}
+                <ThemeToggle />
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      {/* Main Content */}
-      <div className="chat-content">
-        {!hasMessages ? (
-          <SuggestionsPanel onSuggestionClick={handleSendMessage} />
-        ) : (
-          <div className="messages-container">
-            <div className="messages-list">
-              <div className="messages-scroll">
-                {messages.map((message) => (
-                  <div key={message.id}>
-                    {message.type === 'user' && (
-                      <div className="user-message-container">
-                        <div className="user-message">
-                          {message.replyTo && (
-                            <div className="reply-indicator">
-                              <Reply size={12} />
-                              <span>Reply to {message.replyTo.advisorName}</span>
+          {/* Main Content */}
+          <div className="chat-content">
+            {!hasMessages ? (
+              <SuggestionsPanel onSuggestionClick={handleSendMessage} />
+            ) : (
+              <div className="messages-container">
+                {/* Add loading session indicator */}
+                {isLoadingSession && (
+                  <div className="loading-session">
+                    <div className="loading-spinner"></div>
+                    <span>Loading chat session...</span>
+                  </div>
+                )}
+                
+                <div className="messages-list">
+                  <div className="messages-scroll">
+                    {messages.map((message) => (
+                      <div key={message.id}>
+                        {message.type === 'user' && (
+                          <div className="user-message-container">
+                            <div className="user-message">
+                              {message.replyTo && (
+                                <div className="reply-indicator">
+                                  <Reply size={12} />
+                                  <span>Reply to {message.replyTo.advisorName}</span>
+                                </div>
+                              )}
+                              <p>{message.content}</p>
                             </div>
-                          )}
-                          <p>{message.content}</p>
-                        </div>
-                      </div>
-                    )}
-
-                    {message.type === 'advisor' && (
-                      <MessageBubble
-                        message={message}
-                        onReply={handleReplyToMessage}
-                        onExpand={handleExpandMessage}
-                        onClick={handleMessageClick}
-                        showReplyButton={true}
-                      />
-                    )}
+                          </div>
+                        )}
+
+                        {message.type === 'advisor' && (
+                          <MessageBubble
+                            message={message}
+                            onReply={handleReplyToMessage}
+                            onExpand={handleExpandMessage}
+                            onClick={handleMessageClick}
+                            showReplyButton={true}
+                          />
+                        )}
+
+                        {message.type === 'error' && (
+                          <div className="error-message-container">
+                            <div className="error-message">
+                              <p>{message.content}</p>
+                            </div>
+                          </div>
+                        )}
 
-                    {message.type === 'error' && (
-                      <div className="error-message-container">
-                        <div className="error-message">
-                          <p>{message.content}</p>
-                        </div>
+                        {message.type === 'system' && (
+                          <div className="system-message-container">
+                            <div className="system-message">
+                              <p>{message.content}</p>
+                            </div>
+                          </div>
+                        )}
+
+                        {message.type === 'document_upload' && (
+                          <div className="system-message-container">
+                            <div className="system-message document-upload">
+                              <FileText size={16} />
+                              <p>{message.content}</p>
+                            </div>
+                          </div>
+                        )}
                       </div>
-                    )}
+                    ))}
 
-                    {message.type === 'system' && (
-                      <div className="system-message-container">
-                        <div className="system-message">
-                          <p>{message.content}</p>
+                    {thinkingAdvisors.includes('system') && (
+                      <div className="orchestrator-thinking">
+                        <div className="thinking-bubble">
+                          <MessageCircle size={20} />
                         </div>
-                      </div>
-                    )}
-
-                    {message.type === 'document_upload' && (
-                      <div className="system-message-container">
-                        <div className="system-message document-upload">
-                          <FileText size={16} />
-                          <p>{message.content}</p>
+                        <div className="thinking-content">
+                          <span className="thinking-label">Orchestrator is thinking...</span>
+                          <div className="thinking-animation">
+                            <div className="dot"></div>
+                            <div className="dot"></div>
+                            <div className="dot"></div>
+                          </div>
                         </div>
                       </div>
                     )}
-                  </div>
-                ))}
+                    
+                    {thinkingAdvisors.filter(id => id !== 'system').map(advisorId => (
+                      <ThinkingIndicator key={advisorId} advisorId={advisorId} />
+                    ))}
 
-                {thinkingAdvisors.includes('system') && (
-                  <div className="orchestrator-thinking">
-                    <div className="thinking-bubble">
-                      <MessageCircle size={20} />
-                    </div>
-                    <div className="thinking-content">
-                      <span className="thinking-label">Orchestrator is thinking...</span>
-                      <div className="thinking-animation">
-                        <div className="dot"></div>
-                        <div className="dot"></div>
-                        <div className="dot"></div>
-                      </div>
-                    </div>
+                    <div ref={messagesEndRef} />
                   </div>
-                )}
-                
-                {thinkingAdvisors.filter(id => id !== 'system').map(advisorId => (
-                  <ThinkingIndicator key={advisorId} advisorId={advisorId} />
-                ))}
-
-                <div ref={messagesEndRef} />
+                </div>
               </div>
-            </div>
+            )}
           </div>
-        )}
-      </div>
 
-      <div className="floating-input-area">
-        {replyingTo && (
-          <div className="reply-banner">
-            <div className="reply-info">
-              <Reply size={16} />
-              <span>Replying to <strong>{replyingTo.advisorName}</strong></span>
-            </div>
-            <button onClick={cancelReply} className="cancel-reply">
-              <X size={16} />
-            </button>
+          <div className="floating-input-area">
+            {replyingTo && (
+              <div className="reply-banner">
+                <div className="reply-info">
+                  <Reply size={16} />
+                  <span>Replying to <strong>{replyingTo.advisorName}</strong></span>
+                </div>
+                <button onClick={cancelReply} className="cancel-reply">
+                  <X size={16} />
+                </button>
+              </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>
-        )}
-        
-        <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>
     </div>
   );

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

@@ -440,6 +440,102 @@
   color: var(--text-secondary);
 }
 
+.chat-page-with-sidebar {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.main-chat-area {
+  flex: 1;
+  margin-left: 300px; /* Width of sidebar */
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  transition: margin-left 0.3s ease;
+}
+
+/* Session title display in header */
+.session-title-display {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  background: var(--bg-secondary, #f3f4f6);
+  border-radius: 6px;
+  margin-right: 8px;
+}
+
+.dark .session-title-display {
+  background: var(--bg-secondary-dark, #374151);
+}
+
+.session-title-display span {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary, #111827);
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dark .session-title-display span {
+  color: var(--text-primary-dark, #f9fafb);
+}
+
+/* Optional header sign out button */
+.header-signout-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary, #6b7280);
+  transition: all 0.2s ease;
+  margin-right: 8px;
+}
+
+.header-signout-btn:hover {
+  background: var(--bg-secondary, #f3f4f6);
+  color: #ef4444;
+}
+
+.dark .header-signout-btn:hover {
+  background: var(--bg-secondary-dark, #374151);
+}
+
+/* Loading session indicator */
+.loading-session {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px;
+  color: var(--text-secondary, #6b7280);
+  font-size: 14px;
+}
+
+.dark .loading-session {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+.loading-session .loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--border-light, #e5e7eb);
+  border-top: 2px solid var(--primary-color, #3b82f6);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.dark .loading-session .loading-spinner {
+  border-color: var(--border-dark, #374151);
+  border-top-color: var(--primary-color, #3b82f6);
+}
+
 /* Document Indicator Styles */
 .document-indicator {
   display: flex;
@@ -715,4 +811,8 @@
     width: auto;
     min-width: unset;
   }
+
+  .main-chat-area {
+    margin-left: 0;
+  }
 }