Merge branch 'eleanor-gptdraw' of https://github.com/brown-dash/Dash-Web into eleanor-gptdraw

1 files changed, 78 insertions, 14 deletions

diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 6d8793f82..0247dc10c 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -7,10 +7,13 @@ $highlightedText: #82e0ff;
 
 .summary-box {
     position: fixed;
-    bottom: 10px;
-    right: 10px;
+    top: 115px;
+    left: 75px;
     width: 250px;
+    height: 200px;
     min-height: 200px;
+    min-width: 180px;
+
     border-radius: 16px;
     padding: 16px;
     padding-bottom: 0;
@@ -21,6 +24,18 @@ $highlightedText: #82e0ff;
     background-color: #ffffff;
     box-shadow: 0 2px 5px #7474748d;
     color: $textgrey;
+    resize: both; /* Allows resizing */
+    overflow: auto;
+
+    .resize-handle {
+        width: 10px;
+        height: 10px;
+        background: #ccc;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        cursor: se-resize;
+      }
 
     .summary-heading {
         display: flex;
@@ -51,25 +66,76 @@ $highlightedText: #82e0ff;
     .content-wrapper {
         padding-top: 10px;
         min-height: 50px;
-        max-height: 150px;
+        // max-height: 150px;
         overflow-y: auto;
+        height: 100%
     }
 
     .btns-wrapper-gpt {
-        height: 50px;
+        height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
-        transform: translateY(30px);
+        flex-direction: column;
+
+        .inputWrapper{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            background-color: white;
+
 
+        }
 
         .searchBox-input{
-            transform: translateY(-15px);
-            height: 50px;
+            height: 40px;
             border-radius: 10px;
+            position: absolute;
+            bottom: 10px;
             border-color: #5b97ff;
+            width: 90%
         }
 
+        .chat-wrapper {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            max-height: calc(100vh - 80px);
+            overflow-y: auto;
+            padding-bottom: 60px; 
+        }
+    
+        .chat-bubbles {
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+        }
+    
+        .chat-bubble {
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 10px;
+            max-width: 60%;
+        }
+    
+        .user-message {
+            background-color: #283d53;
+            align-self: flex-end;
+            color: whitesmoke;
+        }
+    
+        .chat-message {
+            background-color: #367ae7;
+            align-self: flex-start;
+            color:whitesmoke;
+        }
+
+
         
 
         .summarizing {
@@ -78,16 +144,14 @@ $highlightedText: #82e0ff;
         }
 
         
-    }
 
-    button {
-        font-size: 9px;
-        padding: 10px;
-        color: #ffffff;
-        background-color: $button;
-        border-radius: 5px;
+        
+
+        
     }
 
+
+
     .text-btn {
         &:hover {
             background-color: $button;