Merge pull request #29 from yale-swe/michal-new-branch

minor profile frontend changes

backend/.elasticbeanstalk/config.yml

@@ -0,0 +1,18 @@
+branch-defaults:
+  default:
+    environment: null
+    group_suffix: null
+global:
+  application_name: bluebook-ai-backend
+  branch: null
+  default_ec2_keyname: bluebookai-server-key
+  default_platform: Python 3.8 running on 64bit Amazon Linux 2
+  default_region: us-east-2
+  include_git_submodules: true
+  instance_profile: null
+  platform_name: null
+  platform_version: null
+  profile: null
+  repository: null
+  sc: null
+  workspace_type: Application

deploy_frontend.sh

@@ -0,0 +1,5 @@
+echo "Deploying Frontend..."
+cd frontend
+export REACT_APP_API_URL=/api
+npm run build
+aws s3 sync out/ s3://bluebook-ai-frontend --acl public-read

frontend/src/app/page.module.css

@@ -84,10 +84,8 @@
   padding: 1rem;
   margin-bottom: auto;
   font-size: 13px;
-  padding-bottom: 100px;
 }
 
-
 .message {
   display: inline;
   flex-direction: column;
@@ -292,11 +290,24 @@
 .floatingProfileButton {
   position: fixed;
   bottom: 20px;
-  right: 90px; /* Adjust based on chat button placement */
-  z-index: 1001;
-  /* additional styling */
+  right: 70px;
+  width: 50px; 
+  height: 50px; 
+  padding: 10px 15px;
+  border-radius: 50%;
+  background-color: #468ff2;
+  background-image: url('profile_icon.png'); 
+  background-repeat: no-repeat;
+  background-position: center; 
+  background-size: 40%; 
+  color: white;
+  border: none;
+  cursor: pointer;
+  box-shadow: 2px 2px 10px rgb(0 0 0 / 20%);
+  z-index: 1200;
 }
 
+
 .profileContainer {
   position: fixed;
   bottom: 70px; /* Adjust based on your design */
@@ -306,7 +317,8 @@
   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   transition: right 0.3s ease-in-out;
   /* More styles */
-}
+} 
+
 
 .profileVisible {
   right: 10px; /* Adjust to make visible */

frontend/src/app/profiles.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import React, { useState } from "react";
-import styles from "./page.module.css"; // Use your specific styles directory
+import styles from "./page.module.css"; 
 
 const ProfilePopup = () => {
     const [popupVisible, setPopupVisible] = useState(false);
+    const [chatHistoryVisible, setChatHistoryVisible] = useState(false);
     const [username, setUsername] = useState("JohnDoe");
     const [email, setEmail] = useState("[email protected]");
     const [courses, setCourses] = useState<string[]>([]);
@@ -15,6 +16,10 @@ const ProfilePopup = () => {
         setPopupVisible(!popupVisible);
     };
 
+    const toggleChatHistory = () => {
+        setChatHistoryVisible(!chatHistoryVisible);
+    };
+
     const handleSaveProfile = async () => {
         const response = await fetch('/api/save_profile', {
             method: 'POST',
@@ -43,12 +48,9 @@ const ProfilePopup = () => {
 
     const reloadChat = async (chatId: number) => {
         console.log(`Reloading chat with ID: ${chatId}`);
-        // Simulate fetching chat data from a backend
         const response = await fetch(`/api/reload_chat/${chatId}`);
         if (response.ok) {
             const data = await response.json();
-            // Assuming you have a state for the current chat display:
-            // setCurrentChat(data.chatContent);
             console.log("Chat reloaded:", data.chatContent);
         } else {
             console.error("Failed to reload chat");
@@ -63,11 +65,12 @@ const ProfilePopup = () => {
     return (
         <>
             <button onClick={togglePopupVisibility} className={styles.floatingProfileButton}>
-                <img src="/path/to/profile-icon.png" alt="Profile Icon" />
             </button>
 
             {popupVisible && (
                 <div className={`${styles.profileContainer} ${popupVisible ? styles.profileVisible : ""}`}>
+                    <button onClick={toggleChatHistory} className={styles.toggleChatHistoryButton}>Chat History</button>
+
                     <div className={styles.profileHeader}>User Profile</div>
                     <div className={styles.profileDetails}>
                         <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
@@ -79,20 +82,24 @@ const ProfilePopup = () => {
                         <button onClick={handleAddCourse}>Add Course</button>
                         {courses.map(course => <div key={course}>{course}</div>)}
                     </div>
-                    <div className={styles.chatHistory}>
-                        <div className={styles.chatHistoryHeader}>Chat History</div>
-                        <div className={styles.chatHistoryList}>
-                            {chatHistories.map(history => (
-                                <div key={history.id} className={styles.chatTile}>
-                                    <span>{history.summary}</span>
-                                    <button onClick={() => reloadChat(history.id)}>🔄</button>
-                                </div>
-                            ))}
-                        </div>
-                    </div>
                     <button onClick={togglePopupVisibility} className={styles.closeButton}>Close</button>
                 </div>
             )}
+
+            {chatHistoryVisible && (
+                <div className={`${styles.chatContainer} ${chatHistoryVisible ? styles.chatVisible : ""}`}>
+                    <div className={styles.chatHeader}>Chat History</div>
+                    <div className={styles.messages}>
+                        {chatHistories.map(history => (
+                            <div key={history.id} className={styles.message}>
+                                <span>{history.summary}</span>
+                                <button onClick={() => reloadChat(history.id)}>🔄</button>
+                            </div>
+                        ))}
+                    </div>
+                    <button onClick={toggleChatHistory} className={styles.closeButton}>Close</button>
+                </div>
+            )}
         </>
     );
 };