feat: improved text from document popup

1 files changed, 68 insertions, 22 deletions

diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
index e7a1c3b42..31f7be4c4 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.scss
@@ -292,34 +292,58 @@ $font-size-xlarge: 18px;
 
     .citation-popup {
         position: fixed;
-        bottom: 80px;
+        top: 50%;
         left: 50%;
-        transform: translateX(-50%);
-        background-color: rgba(72, 122, 240, 0.95);
-        color: white;
-        padding: 14px 20px;
-        border-radius: 10px;
+        transform: translate(-50%, -50%);
+        width: 90%;
+        max-width: 500px;
+        max-height: 300px;
+        border-radius: 8px;
+        background-color: white;
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
         z-index: 1000;
-        animation: fadeIn 0.3s ease-in-out;
-        max-width: 90%;
-        backdrop-filter: blur(8px);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        animation: popup-fade-in 0.3s ease-out;
+    }
 
-        p {
-            margin: 0;
-            font-size: 14px;
-            line-height: 1.5;
+    .citation-popup-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 15px;
+        background-color: #f5f5f5;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .citation-content {
+        padding: 15px;
+        overflow-y: auto;
+        max-height: 240px;
+    }
+
+    .citation-close-button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        color: #666;
+        transition: background-color 0.2s;
+
+        &:hover {
+            background-color: #ddd;
         }
 
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-                transform: translate(-50%, 10px);
-            }
-            to {
-                opacity: 1;
-                transform: translate(-50%, 0);
-            }
+        svg {
+            width: 20px;
+            height: 20px;
+            stroke-width: 2.5;
         }
     }
 }
@@ -759,6 +783,28 @@ $font-size-xlarge: 18px;
     }
 }
 
+@keyframes popup-slide-up {
+    from {
+        opacity: 0;
+        transform: translate(-50%, 20px);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, 0);
+    }
+}
+
+@keyframes popup-fade-in {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -45%);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%);
+    }
+}
+
 @media (max-width: 768px) {
     .chat-box {
         border-radius: 0;