feat: improved text from document popup

2 files changed, 111 insertions, 33 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;
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
index 34a1ade2e..6349e554e 100644
--- a/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ChatBox.tsx
@@ -679,12 +679,8 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 this.handleOtherChunkTypes(foundChunk, citation, doc);
             } else {
                 // Show the chunk text in citation popup
-                let chunkText = foundChunk.text || 'Text content not available';
-
-                this._citationPopup = {
-                    text: chunkText,
-                    visible: true,
-                };
+                let chunkText = citation.direct_text || 'Text content not available';
+                this.showCitationPopup(chunkText);
 
                 // Also navigate to the document
                 DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {});
@@ -843,7 +839,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 break;
             case CHUNK_TYPE.TEXT:
                 this._citationPopup = { text: citation.direct_text ?? 'No text available', visible: true };
-                setTimeout(() => (this._citationPopup.visible = false), 3000);
+                this.startCitationPopupTimer();
 
                 DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {
                     const firstView = Array.from(doc[DocViews])[0] as DocumentView;
@@ -1100,7 +1096,36 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     );
 
     /**
-     * Renders the chat interface, including the message list, input field, and other UI elements.
+     * Shows the citation popup with the given text.
+     * @param text The text to display in the popup.
+     */
+    @action
+    showCitationPopup = (text: string) => {
+        this._citationPopup = {
+            text: text || 'No text available',
+            visible: true,
+        };
+        this.startCitationPopupTimer();
+    };
+
+    /**
+     * Closes the citation popup.
+     */
+    @action
+    closeCitationPopup = () => {
+        this._citationPopup.visible = false;
+    };
+
+    /**
+     * Starts the auto-close timer for the citation popup.
+     */
+    startCitationPopupTimer = () => {
+        // Auto-close the popup after 5 seconds
+        setTimeout(() => this.closeCitationPopup(), 5000);
+    };
+
+    /**
+     * Main render method for the ChatBox
      */
     render() {
         const fontSizeClass = `font-size-${this._fontSize}`;
@@ -1191,9 +1216,16 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 {/* Popup for citation */}
                 {this._citationPopup.visible && (
                     <div className="citation-popup">
-                        <p>
-                            <strong>Text from your document: </strong> {this._citationPopup.text}
-                        </p>
+                        <div className="citation-popup-header">
+                            <strong>Text from your document</strong>
+                            <button className="citation-close-button" onClick={this.closeCitationPopup}>
+                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                                </svg>
+                            </button>
+                        </div>
+                        <div className="citation-content">{this._citationPopup.text}</div>
                     </div>
                 )}
             </div>