1 files changed, 43 insertions, 11 deletions

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>