1 files changed, 44 insertions, 33 deletions

diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
index ea461388f..9cf760a12 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
@@ -86,11 +86,10 @@ $transition: all 0.2s ease-in-out;
             height: 48px;
             margin-left: 10px;
             cursor: pointer;
-            transition: $transition;
             display: flex;
             align-items: center;
             justify-content: center;
-            position: relative;
+            transition: $transition;
 
             &:hover {
                 background-color: darken($primary-color, 10%);
@@ -102,12 +101,12 @@ $transition: all 0.2s ease-in-out;
             }
 
             .spinner {
-                height: 24px;
-                width: 24px;
+                width: 20px;
+                height: 20px;
                 border: 3px solid rgba(255, 255, 255, 0.3);
                 border-top: 3px solid #fff;
                 border-radius: 50%;
-                animation: spin 1s linear infinite;
+                animation: spin 0.6s linear infinite;
             }
         }
     }
@@ -143,12 +142,14 @@ $transition: all 0.2s ease-in-out;
 
 .message {
     max-width: 75%;
-    padding: 14px 18px;
-    border-radius: 16px;
+    padding: 12px 16px;
+    border-radius: 12px;
     font-size: 15px;
     line-height: 1.6;
     box-shadow: 0 1px 3px $shadow-color;
     word-wrap: break-word;
+    display: flex;
+    flex-direction: column;
 
     &.user {
         align-self: flex-end;
@@ -164,10 +165,6 @@ $transition: all 0.2s ease-in-out;
         border-bottom-left-radius: 4px;
     }
 
-    .message-content {
-        // Additional styles if needed
-    }
-
     .toggle-info {
         margin-top: 10px;
         background-color: transparent;
@@ -178,7 +175,7 @@ $transition: all 0.2s ease-in-out;
         font-size: 14px;
         cursor: pointer;
         transition: $transition;
-        margin-bottom: 12px; // Adds space between button and thoughts/actions text
+        margin-bottom: 16px;
 
         &:hover {
             background-color: rgba($primary-color, 0.1);
@@ -186,7 +183,12 @@ $transition: all 0.2s ease-in-out;
     }
 
     .processing-info {
-        margin-top: 10px;
+        margin-bottom: 12px;
+        padding: 10px 15px;
+        background-color: #f9f9f9;
+        border-radius: 8px;
+        box-shadow: 0 1px 3px $shadow-color;
+        font-size: 14px;
 
         .processing-item {
             margin-bottom: 5px;
@@ -194,6 +196,35 @@ $transition: all 0.2s ease-in-out;
             color: $light-text-color;
         }
     }
+
+    .message-content {
+        background-color: inherit;
+        padding: 10px;
+        border-radius: 8px;
+        font-size: 15px;
+        line-height: 1.5;
+
+        .citation-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            background-color: rgba(0, 0, 0, 0.1);
+            color: $text-color;
+            font-size: 12px;
+            font-weight: bold;
+            margin-left: 5px;
+            cursor: pointer;
+            transition: $transition;
+
+            &:hover {
+                background-color: rgba($primary-color, 0.2);
+                color: #fff;
+            }
+        }
+    }
 }
 
 .follow-up-questions {
@@ -229,26 +260,6 @@ $transition: all 0.2s ease-in-out;
     }
 }
 
-.citation-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    border-radius: 50%;
-    background-color: rgba(0, 0, 0, 0.1);
-    color: $text-color;
-    font-size: 12px;
-    font-weight: bold;
-    margin-left: 5px;
-    cursor: pointer;
-    transition: $transition;
-
-    &:hover {
-        background-color: rgba(0, 0, 0, 0.2);
-    }
-}
-
 .uploading-overlay {
     position: absolute;
     top: 0;