better styling, now thoughts and actions are hidden, scroll works better

next steps:

- [ ] Ensure it doesn’t create more web documents when one already exists
- [ ] Citations should not be rendered on the next line but on the same line as the text
- [ ] If invalid XML, run get 3.5 to verify and fix XML based one examples
- [ ] Making sure if you ask for other information, it doesn’t go to the same website. Providing website history in use rules for the search tool and website scraper tool or in the prompt directly

1 files changed, 201 insertions, 201 deletions

diff --git a/src/client/views/nodes/ChatBox/ChatBox.scss b/src/client/views/nodes/ChatBox/ChatBox.scss
index 91bb3aba7..76fa05ce8 100644
--- a/src/client/views/nodes/ChatBox/ChatBox.scss
+++ b/src/client/views/nodes/ChatBox/ChatBox.scss
@@ -1,246 +1,246 @@
-$background-color: #f8f9fa;
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+$primary-color: #4a90e2;
+$secondary-color: #f5f8fa;
 $text-color: #333;
-$input-background: #fff;
-$button-color: #007bff;
-$button-hover-color: darken($button-color, 10%);
-$shadow-color: rgba(0, 0, 0, 0.075);
-$border-radius: 8px;
-$citation-color: #ff6347;
-$citation-hover-color: darken($citation-color, 10%);
-$follow-up-bg-color: #e9ecef;
-$follow-up-hover-bg-color: #dee2e6;
-
-.chatBox {
+$light-text-color: #777;
+$border-color: #e1e8ed;
+$shadow-color: rgba(0, 0, 0, 0.1);
+$transition: all 0.3s ease;
+
+.chat-box {
     display: flex;
     flex-direction: column;
-    width: 100%;
     height: 100%;
-    background-color: $background-color;
-    font-family: 'Helvetica Neue', Arial, sans-serif;
+    background-color: #fff;
+    font-family:
+        'Atkinson Hyperlegible',
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px $shadow-color;
+
+    .chat-header {
+        background-color: $primary-color;
+        color: white;
+        padding: 15px;
+        text-align: center;
+        box-shadow: 0 2px 4px $shadow-color;
+        height: fit-content;
+        h2 {
+            margin: 0;
+            font-size: 1.3em;
+            font-weight: 500;
+        }
+    }
 
-    .scroll-box {
+    .chat-messages {
         flex-grow: 1;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        height: 100%;
-        padding: 10px;
+        overflow-y: auto;
+        padding: 20px;
         display: flex;
-        flex-direction: column-reverse;
-        padding-bottom: 0;
+        flex-direction: column;
 
         &::-webkit-scrollbar {
-            width: 8px;
+            width: 6px;
         }
+
         &::-webkit-scrollbar-thumb {
-            background-color: darken($background-color, 10%);
-            border-radius: $border-radius;
+            background-color: $border-color;
+            border-radius: 3px;
         }
+    }
 
-        .chat-content {
-            display: flex;
-            flex-direction: column;
+    .chat-input {
+        display: flex;
+        padding: 20px;
+        border-top: 1px solid $border-color;
+        background-color: #fff;
+
+        input {
+            flex-grow: 1;
+            padding: 12px 15px;
+            border: 1px solid $border-color;
+            border-radius: 24px;
+            font-size: 15px;
+            transition: $transition;
+
+            &:focus {
+                outline: none;
+                border-color: $primary-color;
+                box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
+            }
         }
 
-        .messages {
+        .submit-button {
+            background-color: $primary-color;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            margin-left: 10px;
+            cursor: pointer;
+            transition: $transition;
             display: flex;
-            flex-direction: column;
-
-            .message {
-                padding: 10px 15px;
-                margin-bottom: 10px;
-                border-radius: $border-radius;
-                background-color: lighten($background-color, 5%);
-                box-shadow: 0 2px 5px $shadow-color;
-                align-items: flex-start;
-                max-width: 90%;
-                width: fit-content;
-                word-break: break-word;
-                position: relative;
-
-                .citation-button {
-                    background-color: $citation-color;
-                    color: #fff;
-                    border: none;
-                    border-radius: 50%;
-                    cursor: pointer;
-                    width: 20px;
-                    height: 20px;
-                    display: inline-flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 12px;
-                    font-weight: bold;
-                    margin: 0 2px;
-                    padding: 0;
-                    transition: background-color 0.3s;
-
-                    &:hover {
-                        background-color: $citation-hover-color;
-                    }
-                }
-
-                &.user {
-                    align-self: flex-end;
-                    background-color: $button-color;
-                    color: #fff;
-                }
-
-                &.chatbot {
-                    align-self: flex-start;
-                    background-color: $input-background;
-                    color: $text-color;
-                }
-
-                span {
-                    flex-grow: 1;
-                    padding-right: 10px;
-                }
-
-                img {
-                    max-width: 50px;
-                    max-height: 50px;
-                    border-radius: 50%;
-                }
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                background-color: darken($primary-color, 10%);
+            }
+
+            &:disabled {
+                background-color: $light-text-color;
+                cursor: not-allowed;
             }
 
-            .follow-up-questions {
-                margin-top: 10px;
-                width: 100%;
-
-                h4 {
-                    margin-bottom: 5px;
-                    font-size: 14px;
-                }
-
-                .follow-up-button {
-                    background-color: $follow-up-bg-color;
-                    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;
-                    line-height: 1.3;
-
-                    &:hover {
-                        background-color: $follow-up-hover-bg-color;
-                    }
-                }
+            .spinner {
+                height: 24px;
+                width: 24px;
+                border: 3px solid rgba(255, 255, 255, 0.3);
+                border-top: 3px solid #fff;
+                border-radius: 50%;
+                animation: spin 1s linear infinite;
             }
         }
     }
+}
 
-    .chat-form {
-        display: flex;
-        flex-grow: 0;
-        bottom: 0;
-        width: 100%;
-        padding: 10px;
-        background-color: $input-background;
-        box-shadow: inset 0 -1px 2px $shadow-color;
-        margin-bottom: 0;
+.message {
+    max-width: 80%;
+    margin-bottom: 20px;
+    padding: 16px 20px;
+    border-radius: 18px;
+    font-size: 15px;
+    line-height: 1.5;
+    box-shadow: 0 2px 4px $shadow-color;
+
+    &.user {
+        align-self: flex-end;
+        background-color: $primary-color;
+        color: white;
+        border-bottom-right-radius: 4px;
+    }
 
-        input[type='text'] {
-            flex-grow: 1;
-            border: 1px solid darken($input-background, 10%);
-            border-radius: $border-radius;
-            padding: 8px 12px;
-            margin-right: 10px;
+    &.chatbot {
+        align-self: flex-start;
+        background-color: $secondary-color;
+        color: $text-color;
+        border-bottom-left-radius: 4px;
+    }
+
+    .toggle-info {
+        background-color: transparent;
+        color: $primary-color;
+        border: 1px solid $primary-color;
+        width: 100%;
+        height: fit-content;
+        border-radius: 8px;
+        padding: 10px 16px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: $transition;
+        margin-top: 10px;
+
+        &:hover {
+            background-color: rgba($primary-color, 0.1);
         }
+    }
+}
 
-        button {
-            padding: 8px 16px;
-            background-color: $button-color;
-            color: #fff;
-            border: none;
-            border-radius: $border-radius;
-            cursor: pointer;
-            transition: background-color 0.3s;
-            min-width: 80px;
+.follow-up-questions {
+    margin-top: 15px;
 
-            &:hover {
-                background-color: $button-hover-color;
-            }
+    h4 {
+        font-size: 15px;
+        font-weight: 600;
+        margin-bottom: 10px;
+    }
+
+    .questions-list {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .follow-up-button {
+        background-color: #fff;
+        color: $primary-color;
+        border: 1px solid $primary-color;
+        border-radius: 8px;
+        padding: 10px 16px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: $transition;
+        text-align: left;
+        white-space: normal;
+        word-wrap: break-word;
+        width: 100%;
+        height: fit-content;
+
+        &:hover {
+            background-color: $primary-color;
+            color: #fff;
         }
     }
 }
 
-.uploading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba($background-color, 0.95);
-    display: flex;
-    justify-content: center;
+.citation-button {
+    display: inline-flex;
     align-items: center;
-    font-size: 1.5em;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.1);
     color: $text-color;
-    z-index: 10;
-
-    &::before {
-        content: 'Uploading Docs...';
-        font-weight: bold;
+    font-size: 12px;
+    font-weight: bold;
+    margin-left: 5px;
+    cursor: pointer;
+    transition: $transition;
+    vertical-align: middle;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.2);
     }
 }
 
-.modal {
-    position: fixed;
+.uploading-overlay {
+    position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.8);
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: rgba(0, 0, 0, 0.4);
-
-    .modal-content {
-        background-color: $input-background;
-        color: $text-color;
-        padding: 20px;
-        border-radius: $border-radius;
-        box-shadow: 0 2px 10px $shadow-color;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: auto;
-        min-width: 300px;
-
-        h4 {
-            margin-bottom: 15px;
-        }
-
-        p {
-            margin-bottom: 20px;
-        }
+    z-index: 1000;
+}
 
-        button {
-            padding: 10px 20px;
-            background-color: $button-color;
-            color: #fff;
-            border: none;
-            border-radius: $border-radius;
-            cursor: pointer;
-            transition: background-color 0.3s;
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
 
-            &:hover {
-                background-color: $button-hover-color;
-            }
-        }
+@media (max-width: 768px) {
+    .chat-box {
+        border-radius: 0;
     }
-    .thought-text {
-        color: #6c757d;
-        font-style: italic;
+
+    .message {
+        max-width: 90%;
     }
 }