add chat sidebar

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

@@ -0,0 +1,225 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  MessageSquare, 
+  Plus, 
+  Search, 
+  MoreVertical, 
+  Trash2, 
+  Edit3,
+  LogOut,
+  User,
+  Settings
+} from 'lucide-react';
+import '../styles/Sidebar.css';
+
+const Sidebar = ({ 
+  user, 
+  currentSessionId, 
+  onSelectSession, 
+  onNewChat, 
+  onSignOut,
+  authToken 
+}) => {
+  const [chatSessions, setChatSessions] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const [showUserMenu, setShowUserMenu] = useState(false);
+
+  useEffect(() => {
+    if (authToken) {
+      fetchChatSessions();
+    }
+  }, [authToken]);
+
+  const fetchChatSessions = async () => {
+    try {
+      const response = await fetch('http://localhost:8000/api/chat-sessions', {
+        headers: {
+          'Authorization': `Bearer ${authToken}`,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (response.ok) {
+        const sessions = await response.json();
+        setChatSessions(sessions);
+      } else {
+        console.error('Failed to fetch chat sessions');
+      }
+    } catch (error) {
+      console.error('Error fetching chat sessions:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleNewChat = async () => {
+    try {
+      const response = await fetch('http://localhost:8000/api/chat-sessions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${authToken}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          title: `Chat ${new Date().toLocaleDateString()}`
+        })
+      });
+
+      if (response.ok) {
+        const newSession = await response.json();
+        setChatSessions(prev => [newSession, ...prev]);
+        onNewChat(newSession.id);
+      }
+    } catch (error) {
+      console.error('Error creating new chat:', error);
+    }
+  };
+
+  const handleDeleteSession = async (sessionId, event) => {
+    event.stopPropagation();
+    
+    if (window.confirm('Are you sure you want to delete this chat?')) {
+      try {
+        const response = await fetch(`http://localhost:8000/api/chat-sessions/${sessionId}`, {
+          method: 'DELETE',
+          headers: {
+            'Authorization': `Bearer ${authToken}`,
+            'Content-Type': 'application/json'
+          }
+        });
+
+        if (response.ok) {
+          setChatSessions(prev => prev.filter(session => session.id !== sessionId));
+          if (currentSessionId === sessionId) {
+            onNewChat(); // Create new session if current one was deleted
+          }
+        }
+      } catch (error) {
+        console.error('Error deleting chat session:', error);
+      }
+    }
+  };
+
+  const filteredSessions = chatSessions.filter(session =>
+    session.title.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffTime = Math.abs(now - date);
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    if (diffDays === 1) return 'Today';
+    if (diffDays === 2) return 'Yesterday';
+    if (diffDays <= 7) return `${diffDays - 1} days ago`;
+    return date.toLocaleDateString();
+  };
+
+  return (
+    <div className="sidebar">
+      {/* Header */}
+      <div className="sidebar-header">
+        <div className="user-section">
+          <div className="user-info">
+            <div className="user-avatar">
+              <User size={20} />
+            </div>
+            <div className="user-details">
+              <span className="user-name">{user.firstName} {user.lastName}</span>
+              <span className="user-email">{user.email}</span>
+            </div>
+          </div>
+          
+          <div className="user-menu-container">
+            <button 
+              className="user-menu-button"
+              onClick={() => setShowUserMenu(!showUserMenu)}
+            >
+              <MoreVertical size={16} />
+            </button>
+            
+            {showUserMenu && (
+              <div className="user-menu">
+                <button className="user-menu-item">
+                  <Settings size={16} />
+                  <span>Settings</span>
+                </button>
+                <button className="user-menu-item sign-out" onClick={onSignOut}>
+                  <LogOut size={16} />
+                  <span>Sign Out</span>
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <button className="new-chat-button" onClick={handleNewChat}>
+          <Plus size={16} />
+          <span>New Chat</span>
+        </button>
+      </div>
+
+      {/* Search */}
+      <div className="sidebar-search">
+        <div className="search-container">
+          <Search size={16} className="search-icon" />
+          <input
+            type="text"
+            placeholder="Search chats..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="search-input"
+          />
+        </div>
+      </div>
+
+      {/* Chat Sessions */}
+      <div className="chat-sessions">
+        {isLoading ? (
+          <div className="loading-sessions">
+            <div className="loading-spinner"></div>
+            <span>Loading chats...</span>
+          </div>
+        ) : filteredSessions.length === 0 ? (
+          <div className="no-sessions">
+            {searchTerm ? 'No chats found' : 'No chats yet'}
+          </div>
+        ) : (
+          <div className="sessions-list">
+            {filteredSessions.map((session) => (
+              <div
+                key={session.id}
+                className={`session-item ${currentSessionId === session.id ? 'active' : ''}`}
+                onClick={() => onSelectSession(session.id)}
+              >
+                <div className="session-content">
+                  <div className="session-icon">
+                    <MessageSquare size={16} />
+                  </div>
+                  <div className="session-details">
+                    <div className="session-title">{session.title}</div>
+                    <div className="session-meta">
+                      <span className="session-date">{formatDate(session.updated_at)}</span>
+                      <span className="session-messages">{session.message_count} messages</span>
+                    </div>
+                  </div>
+                </div>
+                
+                <button
+                  className="session-menu-button"
+                  onClick={(e) => handleDeleteSession(session.id, e)}
+                >
+                  <Trash2 size={14} />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar;

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

@@ -0,0 +1,434 @@
+/* Sidebar.css */
+.sidebar {
+  width: 300px;
+  height: 100vh;
+  background: var(--bg-primary, #ffffff);
+  border-right: 1px solid var(--border-light, #e5e7eb);
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  overflow: hidden;
+}
+
+/* Dark theme support */
+.dark .sidebar {
+  background: var(--bg-primary-dark, #1f2937);
+  border-right-color: var(--border-dark, #374151);
+}
+
+/* Header Section */
+.sidebar-header {
+  padding: 20px;
+  border-bottom: 1px solid var(--border-light, #e5e7eb);
+  flex-shrink: 0;
+}
+
+.dark .sidebar-header {
+  border-bottom-color: var(--border-dark, #374151);
+}
+
+.user-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.user-avatar {
+  width: 36px;
+  height: 36px;
+  background: var(--primary-color, #3b82f6);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  flex-shrink: 0;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.user-name {
+  font-weight: 600;
+  color: var(--text-primary, #111827);
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dark .user-name {
+  color: var(--text-primary-dark, #f9fafb);
+}
+
+.user-email {
+  font-size: 12px;
+  color: var(--text-secondary, #6b7280);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dark .user-email {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+/* User Menu */
+.user-menu-container {
+  position: relative;
+}
+
+.user-menu-button {
+  padding: 6px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary, #6b7280);
+  transition: all 0.2s ease;
+}
+
+.user-menu-button:hover {
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-primary, #111827);
+}
+
+.dark .user-menu-button:hover {
+  background: var(--bg-secondary-dark, #374151);
+  color: var(--text-primary-dark, #f9fafb);
+}
+
+.user-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-light, #e5e7eb);
+  border-radius: 8px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  padding: 8px;
+  min-width: 150px;
+  z-index: 200;
+}
+
+.dark .user-menu {
+  background: var(--bg-primary-dark, #1f2937);
+  border-color: var(--border-dark, #374151);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+.user-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  width: 100%;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  color: var(--text-primary, #111827);
+  transition: background-color 0.2s ease;
+}
+
+.dark .user-menu-item {
+  color: var(--text-primary-dark, #f9fafb);
+}
+
+.user-menu-item:hover {
+  background: var(--bg-secondary, #f3f4f6);
+}
+
+.dark .user-menu-item:hover {
+  background: var(--bg-secondary-dark, #374151);
+}
+
+.user-menu-item.sign-out {
+  color: #ef4444;
+}
+
+.user-menu-item.sign-out:hover {
+  background: #fef2f2;
+}
+
+.dark .user-menu-item.sign-out:hover {
+  background: #7f1d1d;
+}
+
+/* New Chat Button */
+.new-chat-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 12px 16px;
+  background: var(--primary-color, #3b82f6);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.new-chat-button:hover {
+  background: var(--primary-color-hover, #2563eb);
+  transform: translateY(-1px);
+}
+
+/* Search Section */
+.sidebar-search {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-light, #e5e7eb);
+  flex-shrink: 0;
+}
+
+.dark .sidebar-search {
+  border-bottom-color: var(--border-dark, #374151);
+}
+
+.search-container {
+  position: relative;
+}
+
+.search-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary, #6b7280);
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px 12px 10px 36px;
+  border: 1px solid var(--border-light, #e5e7eb);
+  border-radius: 8px;
+  background: var(--bg-secondary, #f9fafb);
+  color: var(--text-primary, #111827);
+  font-size: 14px;
+  transition: all 0.2s ease;
+}
+
+.dark .search-input {
+  border-color: var(--border-dark, #374151);
+  background: var(--bg-secondary-dark, #374151);
+  color: var(--text-primary-dark, #f9fafb);
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--primary-color, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.search-input::placeholder {
+  color: var(--text-secondary, #6b7280);
+}
+
+.dark .search-input::placeholder {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+/* Chat Sessions */
+.chat-sessions {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 20px 20px;
+}
+
+.loading-sessions {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  color: var(--text-secondary, #6b7280);
+  gap: 12px;
+}
+
+.dark .loading-sessions {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  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-spinner {
+  border-color: var(--border-dark, #374151);
+  border-top-color: var(--primary-color, #3b82f6);
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.no-sessions {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--text-secondary, #6b7280);
+  font-size: 14px;
+}
+
+.dark .no-sessions {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+.sessions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+/* Session Item */
+.session-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  group: true;
+}
+
+.session-item:hover {
+  background: var(--bg-secondary, #f3f4f6);
+  border-color: var(--border-light, #e5e7eb);
+}
+
+.dark .session-item:hover {
+  background: var(--bg-secondary-dark, #374151);
+  border-color: var(--border-dark, #4b5563);
+}
+
+.session-item.active {
+  background: rgba(59, 130, 246, 0.1);
+  border-color: var(--primary-color, #3b82f6);
+}
+
+.dark .session-item.active {
+  background: rgba(59, 130, 246, 0.2);
+  border-color: var(--primary-color, #3b82f6);
+}
+
+.session-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+
+.session-icon {
+  color: var(--text-secondary, #6b7280);
+  flex-shrink: 0;
+}
+
+.dark .session-icon {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+.session-item.active .session-icon {
+  color: var(--primary-color, #3b82f6);
+}
+
+.session-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.session-title {
+  font-weight: 500;
+  color: var(--text-primary, #111827);
+  font-size: 14px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 2px;
+}
+
+.dark .session-title {
+  color: var(--text-primary-dark, #f9fafb);
+}
+
+.session-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary, #6b7280);
+}
+
+.dark .session-meta {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+.session-date::after {
+  content: "•";
+  margin-left: 8px;
+}
+
+.session-menu-button {
+  opacity: 0;
+  padding: 6px;
+  border: none;
+  background: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--text-secondary, #6b7280);
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.session-item:hover .session-menu-button {
+  opacity: 1;
+}
+
+.session-menu-button:hover {
+  background: var(--bg-tertiary, #f3f4f6);
+  color: #ef4444;
+}
+
+.dark .session-menu-button:hover {
+  background: var(--bg-tertiary-dark, #4b5563);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .sidebar {
+    width: 280px;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+  
+  .sidebar.open {
+    transform: translateX(0);
+  }
+}