fixing to work with python API

also added follow up questions

1 files changed, 50 insertions, 27 deletions

diff --git a/src/client/views/nodes/ChatBox/ChatBox.scss b/src/client/views/nodes/ChatBox/ChatBox.scss
index a08b98f50..f1e3d3d67 100644
--- a/src/client/views/nodes/ChatBox/ChatBox.scss
+++ b/src/client/views/nodes/ChatBox/ChatBox.scss
@@ -9,12 +9,10 @@ $border-radius: 8px;
 .chatBox {
     display: flex;
     flex-direction: column;
-    width: 100%; /* Adjust the width as needed, could be in percentage */
-    height: 100%; /* Adjust the height as needed, could be in percentage */
+    width: 100%;
+    height: 100%;
     background-color: $background-color;
     font-family: 'Helvetica Neue', Arial, sans-serif;
-    //margin: 20px auto;
-    //overflow: hidden;
 
     .scroll-box {
         flex-grow: 1;
@@ -24,6 +22,7 @@ $border-radius: 8px;
         padding: 10px;
         display: flex;
         flex-direction: column-reverse;
+        padding-bottom: 0;
 
         &::-webkit-scrollbar {
             width: 8px;
@@ -47,28 +46,24 @@ $border-radius: 8px;
                 border-radius: $border-radius;
                 background-color: lighten($background-color, 5%);
                 box-shadow: 0 2px 5px $shadow-color;
-                //display: flex;
-                align-items: center;
-                max-width: 70%;
+                align-items: flex-start;
+                max-width: 90%;
+                width: 100%;
                 word-break: break-word;
+
                 .message-footer {
-                    // Assuming this is the container for the toggle button
-                    //max-width: 70%;
+                    width: 100%;
 
                     .toggle-logs-button {
-                        margin-top: 10px; // Padding on sides to align with the text above
+                        margin-top: 10px;
                         width: 95%;
-                        //display: block; // Ensures the button extends the full width of its container
-                        text-align: center; // Centers the text inside the button
-                        //padding: 8px 0; // Adequate padding for touch targets
+                        text-align: center;
                         background-color: $button-color;
                         color: #fff;
                         border: none;
                         border-radius: $border-radius;
                         cursor: pointer;
-                        //transition: background-color 0.3s;
-                        //margin-top: 10px; // Adds space above the button
-                        box-shadow: 0 2px 4px $shadow-color; // Consistent shadow with other elements
+                        box-shadow: 0 2px 4px $shadow-color;
                         &:hover {
                             background-color: $button-hover-color;
                         }
@@ -78,13 +73,9 @@ $border-radius: 8px;
                         background-color: $input-background;
                         color: $text-color;
                         margin-top: 5px;
-                        //padding: 10px;
-                        //border-radius: $border-radius;
-                        //box-shadow: inset 0 2px 4px $shadow-color;
-                        //transition: opacity 1s ease-in-out;
                         font-family: monospace;
                         overflow-x: auto;
-                        max-height: 150px; // Ensuring it does not grow too large
+                        max-height: 150px;
                         overflow-y: auto;
                     }
                 }
@@ -118,18 +109,17 @@ $border-radius: 8px;
                 }
             }
         }
-        padding-bottom: 0;
     }
 
     .chat-form {
         display: flex;
-        flex-grow: 1;
-        //height: 50px;
+        flex-grow: 0;
         bottom: 0;
         width: 100%;
         padding: 10px;
         background-color: $input-background;
         box-shadow: inset 0 -1px 2px $shadow-color;
+        margin-bottom: 0;
 
         input[type='text'] {
             flex-grow: 1;
@@ -147,12 +137,12 @@ $border-radius: 8px;
             border-radius: $border-radius;
             cursor: pointer;
             transition: background-color 0.3s;
+            min-width: 80px;
 
             &:hover {
                 background-color: $button-hover-color;
             }
         }
-        margin-bottom: 0;
     }
 }
 
@@ -168,7 +158,7 @@ $border-radius: 8px;
     align-items: center;
     font-size: 1.5em;
     color: $text-color;
-    z-index: 10; // Ensure it's above all other content (may be better solution)
+    z-index: 10;
 
     &::before {
         content: 'Initializing...';
@@ -214,7 +204,6 @@ $border-radius: 8px;
             border: none;
             border-radius: $border-radius;
             cursor: pointer;
-            //margin: 5px;
             transition: background-color 0.3s;
 
             &:hover {
@@ -223,3 +212,37 @@ $border-radius: 8px;
         }
     }
 }
+
+.follow-up-questions {
+    margin-top: 10px;
+    width: 100%;
+
+    h4 {
+        margin-bottom: 5px;
+        font-size: 14px;
+    }
+
+    .follow-up-button {
+        background-color: #f0f0f0;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        padding: 8px 10px;
+        margin: 4px 0;
+        cursor: pointer;
+        transition: background-color 0.3s;
+        display: block;
+        width: 100%;
+        text-align: left;
+        white-space: normal;
+        word-wrap: break-word;
+        font-size: 12px;
+        color: $text-color;
+        min-height: 40px;
+        height: auto; // Allow the button to expand as needed
+        line-height: 1.3;
+
+        &:hover {
+            background-color: #e0e0e0;
+        }
+    }
+}