attempt at adding links

1 files changed, 61 insertions, 67 deletions

diff --git a/src/client/views/nodes/ChatBox/ChatBox.scss b/src/client/views/nodes/ChatBox/ChatBox.scss
index f1e3d3d67..75171fe56 100644
--- a/src/client/views/nodes/ChatBox/ChatBox.scss
+++ b/src/client/views/nodes/ChatBox/ChatBox.scss
@@ -5,6 +5,10 @@ $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 {
     display: flex;
@@ -40,51 +44,41 @@ $border-radius: 8px;
         .messages {
             display: flex;
             flex-direction: column;
+
             .message {
-                padding: 10px;
+                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: 100%;
+                width: fit-content;
                 word-break: break-word;
+                position: relative;
 
-                .message-footer {
-                    width: 100%;
-
-                    .toggle-logs-button {
-                        margin-top: 10px;
-                        width: 95%;
-                        text-align: center;
-                        background-color: $button-color;
-                        color: #fff;
-                        border: none;
-                        border-radius: $border-radius;
-                        cursor: pointer;
-                        box-shadow: 0 2px 4px $shadow-color;
-                        &:hover {
-                            background-color: $button-hover-color;
-                        }
-                    }
-                    .tool-logs {
-                        width: 100%;
-                        background-color: $input-background;
-                        color: $text-color;
-                        margin-top: 5px;
-                        font-family: monospace;
-                        overflow-x: auto;
-                        max-height: 150px;
-                        overflow-y: auto;
+                .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;
                     }
                 }
 
-                .custom-link {
-                    color: lightblue;
-                    text-decoration: underline;
-                    cursor: pointer;
-                }
                 &.user {
                     align-self: flex-end;
                     background-color: $button-color;
@@ -108,6 +102,40 @@ $border-radius: 8px;
                     border-radius: 50%;
                 }
             }
+
+            .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;
+                    }
+                }
+            }
         }
     }
 
@@ -212,37 +240,3 @@ $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;
-        }
-    }
-}