added intro message

1 files changed, 37 insertions, 40 deletions

diff --git a/src/client/views/nodes/ChatBox/ChatBox.scss b/src/client/views/nodes/ChatBox/ChatBox.scss
index f1ad3d074..a08b98f50 100644
--- a/src/client/views/nodes/ChatBox/ChatBox.scss
+++ b/src/client/views/nodes/ChatBox/ChatBox.scss
@@ -24,15 +24,14 @@ $border-radius: 8px;
         padding: 10px;
         display: flex;
         flex-direction: column-reverse;
-    
+
         &::-webkit-scrollbar {
-          width: 8px;
+            width: 8px;
         }
         &::-webkit-scrollbar-thumb {
-          background-color: darken($background-color, 10%);
-          border-radius: $border-radius;
+            background-color: darken($background-color, 10%);
+            border-radius: $border-radius;
         }
-    
 
         .chat-content {
             display: flex;
@@ -52,10 +51,10 @@ $border-radius: 8px;
                 align-items: center;
                 max-width: 70%;
                 word-break: break-word;
-                .message-footer { // Assuming this is the container for the toggle button
+                .message-footer {
+                    // Assuming this is the container for the toggle button
                     //max-width: 70%;
-                    
-            
+
                     .toggle-logs-button {
                         margin-top: 10px; // Padding on sides to align with the text above
                         width: 95%;
@@ -88,35 +87,34 @@ $border-radius: 8px;
                         max-height: 150px; // Ensuring it does not grow too large
                         overflow-y: auto;
                     }
-                    
-                }   
-                
+                }
+
                 .custom-link {
                     color: lightblue;
                     text-decoration: underline;
                     cursor: pointer;
-                  }
+                }
                 &.user {
-                align-self: flex-end;
-                background-color: $button-color;
-                color: #fff;
+                    align-self: flex-end;
+                    background-color: $button-color;
+                    color: #fff;
                 }
-        
+
                 &.chatbot {
-                align-self: flex-start;
-                background-color: $input-background;
-                color: $text-color;
+                    align-self: flex-start;
+                    background-color: $input-background;
+                    color: $text-color;
                 }
-        
+
                 span {
-                flex-grow: 1;
-                padding-right: 10px;
+                    flex-grow: 1;
+                    padding-right: 10px;
                 }
-        
+
                 img {
-                max-width: 50px;
-                max-height: 50px;
-                border-radius: 50%;
+                    max-width: 50px;
+                    max-height: 50px;
+                    border-radius: 50%;
                 }
             }
         }
@@ -132,8 +130,8 @@ $border-radius: 8px;
         padding: 10px;
         background-color: $input-background;
         box-shadow: inset 0 -1px 2px $shadow-color;
-        
-        input[type="text"] {
+
+        input[type='text'] {
             flex-grow: 1;
             border: 1px solid darken($input-background, 10%);
             border-radius: $border-radius;
@@ -143,16 +141,16 @@ $border-radius: 8px;
 
         button {
             padding: 8px 16px;
-      background-color: $button-color;
-      color: #fff;
-      border: none;
-      border-radius: $border-radius;
-      cursor: pointer;
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: $button-hover-color;
-      }
+            background-color: $button-color;
+            color: #fff;
+            border: none;
+            border-radius: $border-radius;
+            cursor: pointer;
+            transition: background-color 0.3s;
+
+            &:hover {
+                background-color: $button-hover-color;
+            }
         }
         margin-bottom: 0;
     }
@@ -178,7 +176,6 @@ $border-radius: 8px;
     }
 }
 
-
 .modal {
     position: fixed;
     top: 0;
@@ -217,7 +214,7 @@ $border-radius: 8px;
             border: none;
             border-radius: $border-radius;
             cursor: pointer;
-            margin: 5px;
+            //margin: 5px;
             transition: background-color 0.3s;
 
             &:hover {