completely restructured, added comments, and significantly reduced the length of the prompt (~72% shorter and cheaper)

1 files changed, 0 insertions, 279 deletions

diff --git a/src/client/views/nodes/ChatBox/ChatBox.scss b/src/client/views/nodes/ChatBox/ChatBox.scss
deleted file mode 100644
index 42f6a0d61..000000000
--- a/src/client/views/nodes/ChatBox/ChatBox.scss
+++ /dev/null
@@ -1,279 +0,0 @@
-@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;
-$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;
-    height: 100%;
-    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;
-    position: relative;
-
-    .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;
-        }
-    }
-
-    .chat-messages {
-        flex-grow: 1;
-        overflow-y: auto;
-        padding: 20px;
-        display: flex;
-        flex-direction: column;
-        gap: 10px; // Added to give space between elements
-
-        &::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            background-color: $border-color;
-            border-radius: 3px;
-        }
-    }
-
-    .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);
-            }
-        }
-
-        .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;
-            align-items: center;
-            justify-content: center;
-
-            &:hover {
-                background-color: darken($primary-color, 10%);
-            }
-
-            &:disabled {
-                background-color: $light-text-color;
-                cursor: not-allowed;
-            }
-
-            .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;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-        }
-    }
-    .citation-popup {
-        position: fixed;
-        bottom: 50px;
-        left: 50%;
-        transform: translateX(-50%);
-        background-color: rgba(0, 0, 0, 0.8);
-        color: white;
-        padding: 10px 20px;
-        border-radius: 10px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-        z-index: 1000;
-        animation: fadeIn 0.3s ease-in-out;
-
-        p {
-            margin: 0;
-            font-size: 14px;
-        }
-
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-            }
-            to {
-                opacity: 1;
-            }
-        }
-    }
-}
-
-.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;
-    word-wrap: break-word; // To handle long words
-
-    &.user {
-        align-self: flex-end;
-        background-color: $primary-color;
-        color: white;
-        border-bottom-right-radius: 4px;
-    }
-
-    &.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);
-        }
-    }
-}
-
-.follow-up-questions {
-    margin-top: 15px;
-
-    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;
-        }
-    }
-}
-
-.citation-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 20px;
-    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;
-    vertical-align: middle;
-
-    &:hover {
-        background-color: rgba(0, 0, 0, 0.2);
-    }
-}
-
-.uploading-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(255, 255, 255, 0.8);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@media (max-width: 768px) {
-    .chat-box {
-        border-radius: 0;
-    }
-
-    .message {
-        max-width: 90%;
-    }
-}