Update public/split_screen.js for document viewer

public/split_screen.js

@@ -0,0 +1,612 @@
+// Split Screen Document Viewer for Chainlit
+(function() {
+    'use strict';
+
+    let documentViewer = null;
+    let documents = [];
+    let activeDocIndex = 0;
+    let viewerActive = false;
+
+    // Create the document viewer panel (hidden by default)
+    function createDocumentViewer() {
+        if (document.getElementById('document-viewer')) {
+            return document.getElementById('document-viewer');
+        }
+
+        const viewer = document.createElement('div');
+        viewer.id = 'document-viewer';
+        viewer.className = '';  // Start without 'active' class
+
+        // Create header
+        const header = document.createElement('div');
+        header.className = 'document-header';
+        header.innerHTML = `
+            <h3>Document Viewer</h3>
+            <div style="display: flex; gap: 10px;">
+                <button class="document-pin" title="Pin document">📌 Pin</button>
+                <button class="document-close-btn">Close</button>
+            </div>
+        `;
+        viewer.appendChild(header);
+
+        // Create tabs container
+        const tabsContainer = document.createElement('div');
+        tabsContainer.className = 'document-tabs';
+        viewer.appendChild(tabsContainer);
+
+        // Create content area
+        const contentArea = document.createElement('div');
+        contentArea.id = 'document-content';
+        contentArea.innerHTML = `
+            <div class="document-empty-state">
+                <h4>No Document Selected</h4>
+                <p>Click on any document, image, or file in the chat to view it here</p>
+            </div>
+        `;
+        viewer.appendChild(contentArea);
+
+        // Add close functionality
+        header.querySelector('.document-close-btn').addEventListener('click', () => {
+            hideDocumentViewer();
+        });
+
+        // Add pin functionality
+        const pinBtn = header.querySelector('.document-pin');
+        pinBtn.addEventListener('click', () => {
+            pinBtn.classList.toggle('pinned');
+            const isPinned = pinBtn.classList.contains('pinned');
+            pinBtn.textContent = isPinned ? '📍 Pinned' : '📌 Pin';
+        });
+
+        return viewer;
+    }
+
+    // Show document viewer
+    function showDocumentViewer() {
+        if (!documentViewer) {
+            documentViewer = createDocumentViewer();
+            document.body.appendChild(documentViewer);
+        }
+
+        // Add active classes
+        documentViewer.classList.add('active');
+        document.body.classList.add('document-viewer-active');
+
+        // Adjust main container
+        const mainContainer = document.querySelector('#root > div');
+        if (mainContainer) {
+            mainContainer.classList.add('split-active');
+        }
+
+        viewerActive = true;
+        console.log('Document viewer shown');
+    }
+
+    // Hide document viewer
+    function hideDocumentViewer() {
+        if (documentViewer) {
+            documentViewer.classList.remove('active');
+            document.body.classList.remove('document-viewer-active');
+
+            const mainContainer = document.querySelector('#root > div');
+            if (mainContainer) {
+                mainContainer.classList.remove('split-active');
+            }
+        }
+        viewerActive = false;
+        console.log('Document viewer hidden');
+    }
+
+    // Display document in viewer
+    function displayDocument(content, title = 'Document', type = 'text') {
+        console.log('Displaying document:', title, type);
+
+        // Show viewer if not visible
+        if (!viewerActive) {
+            showDocumentViewer();
+        }
+
+        const contentArea = document.getElementById('document-content');
+        const tabsContainer = documentViewer.querySelector('.document-tabs');
+
+        // Check if document already exists
+        const existingIndex = documents.findIndex(doc => doc.title === title);
+        if (existingIndex !== -1) {
+            // Switch to existing tab
+            activeDocIndex = existingIndex;
+            updateTabs();
+            displayContent(documents[existingIndex]);
+            return;
+        }
+
+        // Add to documents array
+        const docIndex = documents.length;
+        documents.push({ content, title, type });
+
+        // Create tab
+        const tab = document.createElement('button');
+        tab.className = 'document-tab';
+        tab.textContent = title.length > 20 ? title.substring(0, 20) + '...' : title;
+        tab.title = title;
+        tab.dataset.docIndex = docIndex;
+
+        tab.addEventListener('click', () => {
+            activeDocIndex = parseInt(tab.dataset.docIndex);
+            updateTabs();
+            displayContent(documents[activeDocIndex]);
+        });
+
+        // Add close button to tab
+        const closeTab = document.createElement('span');
+        closeTab.innerHTML = ' ×';
+        closeTab.style.cssText = 'margin-left: 8px; font-weight: bold; color: #888;';
+        closeTab.onclick = (e) => {
+            e.stopPropagation();
+            removeDocument(docIndex);
+        };
+        tab.appendChild(closeTab);
+
+        tabsContainer.appendChild(tab);
+
+        // Display content
+        activeDocIndex = docIndex;
+        updateTabs();
+        displayContent({ content, title, type });
+    }
+
+    // Update active tab styling
+    function updateTabs() {
+        const tabs = documentViewer.querySelectorAll('.document-tab');
+        tabs.forEach((tab, index) => {
+            if (parseInt(tab.dataset.docIndex) === activeDocIndex) {
+                tab.classList.add('active');
+            } else {
+                tab.classList.remove('active');
+            }
+        });
+    }
+
+    // Remove document and tab
+    function removeDocument(index) {
+        documents.splice(index, 1);
+
+        // Rebuild tabs
+        const tabsContainer = documentViewer.querySelector('.document-tabs');
+        tabsContainer.innerHTML = '';
+
+        documents.forEach((doc, i) => {
+            const tab = document.createElement('button');
+            tab.className = 'document-tab';
+            tab.textContent = doc.title.length > 20 ? doc.title.substring(0, 20) + '...' : doc.title;
+            tab.title = doc.title;
+            tab.dataset.docIndex = i;
+
+            if (i === activeDocIndex) {
+                tab.classList.add('active');
+            }
+
+            tab.addEventListener('click', () => {
+                activeDocIndex = i;
+                updateTabs();
+                displayContent(documents[i]);
+            });
+
+            const closeTab = document.createElement('span');
+            closeTab.innerHTML = ' ×';
+            closeTab.style.cssText = 'margin-left: 8px; font-weight: bold; color: #888;';
+            closeTab.onclick = (e) => {
+                e.stopPropagation();
+                removeDocument(i);
+            };
+            tab.appendChild(closeTab);
+
+            tabsContainer.appendChild(tab);
+        });
+
+        // If no documents left, show empty state
+        if (documents.length === 0) {
+            const contentArea = document.getElementById('document-content');
+            contentArea.innerHTML = `
+                <div class="document-empty-state">
+                    <h4>No Document Selected</h4>
+                    <p>Click on any document, image, or file in the chat to view it here</p>
+                </div>
+            `;
+            // Hide viewer if not pinned
+            const pinBtn = documentViewer.querySelector('.document-pin');
+            if (!pinBtn.classList.contains('pinned')) {
+                hideDocumentViewer();
+            }
+        } else {
+            // Adjust active index if needed
+            if (activeDocIndex >= documents.length) {
+                activeDocIndex = documents.length - 1;
+            }
+            displayContent(documents[activeDocIndex]);
+        }
+    }
+
+    // Display content based on type
+    function displayContent(doc) {
+        const contentArea = document.getElementById('document-content');
+
+        switch (doc.type) {
+            case 'image':
+                contentArea.innerHTML = `
+                    <div class="document-content">
+                        <img src="${doc.content}" alt="${doc.title}" class="document-image">
+                    </div>
+                `;
+                break;
+            case 'pdf':
+                contentArea.innerHTML = `
+                    <iframe src="${doc.content}" class="pdf-viewer"></iframe>
+                `;
+                break;
+            case 'code':
+                contentArea.innerHTML = `
+                    <div class="document-code">
+                        <pre><code>${escapeHtml(doc.content)}</code></pre>
+                    </div>
+                `;
+                break;
+            case 'html':
+                contentArea.innerHTML = `
+                    <div class="document-content">
+                        ${doc.content}
+                    </div>
+                `;
+                break;
+            default:
+                contentArea.innerHTML = `
+                    <div class="document-content">
+                        ${escapeHtml(doc.content)}
+                    </div>
+                `;
+        }
+    }
+
+    // Escape HTML for safe display
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // Add "View in Document Viewer" buttons to file elements
+    function addViewerButtons() {
+        console.log('Scanning for file elements to add viewer buttons...');
+
+        // Enhanced file element selectors
+        const fileSelectors = [
+            '[data-testid*="element"]',
+            '[data-testid*="file"]',
+            '[data-testid*="pdf"]',
+            '.cl-file',
+            '.cl-pdf',
+            '[class*="file"]',
+            '[class*="pdf"]',
+            'a[href$=".pdf"]',
+            'a[download]',
+            'div[class*="MuiPaper-root"]:has(a[download])',
+            '.message-content a',
+            '[title*=".pdf"]',
+            '[title*="PDF"]'
+        ];
+
+        let foundElements = 0;
+
+        fileSelectors.forEach(selector => {
+            try {
+                const elements = document.querySelectorAll(selector);
+                elements.forEach(element => {
+                    if (element.querySelector('.viewer-button') || element.closest('#document-viewer')) {
+                        return; // Already has button or is in viewer
+                    }
+
+                    // Skip if element is too small or hidden
+                    const rect = element.getBoundingClientRect();
+                    if (rect.width < 10 || rect.height < 10) {
+                        return;
+                    }
+
+                    // Check if element is actually visible
+                    const style = window.getComputedStyle(element);
+                    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+                        return;
+                    }
+
+                    foundElements++;
+                    console.log(`Adding viewer button to element:`, element, `(selector: ${selector})`);
+
+                    // Create viewer button
+                    const viewerBtn = document.createElement('button');
+                    viewerBtn.className = 'viewer-button';
+                    viewerBtn.innerHTML = '👁️ View';
+                    viewerBtn.title = 'Open in Document Viewer';
+
+                    // Force button visibility with inline styles
+                    viewerBtn.style.cssText = `
+                        position: absolute !important;
+                        top: 5px !important;
+                        right: 5px !important;
+                        padding: 6px 12px !important;
+                        background: #ff4757 !important;
+                        color: white !important;
+                        border: none !important;
+                        border-radius: 6px !important;
+                        font-size: 12px !important;
+                        font-weight: 500 !important;
+                        cursor: pointer !important;
+                        z-index: 9999 !important;
+                        display: block !important;
+                        visibility: visible !important;
+                        opacity: 1 !important;
+                        min-width: 60px !important;
+                        text-align: center !important;
+                        box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3) !important;
+                    `;
+
+                    // Position the parent element if needed
+                    const computedStyle = window.getComputedStyle(element);
+                    if (computedStyle.position === 'static') {
+                        element.style.position = 'relative';
+                    }
+
+                    viewerBtn.addEventListener('click', (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        console.log('Viewer button clicked for element:', element);
+
+                        // Find download link or href
+                        let link = element.href ||
+                                  element.getAttribute('href') ||
+                                  element.querySelector('a[href]')?.href ||
+                                  element.querySelector('[href]')?.getAttribute('href');
+
+                        let fileName = element.textContent?.trim() ||
+                                      element.getAttribute('title') ||
+                                      element.querySelector('[title]')?.title ||
+                                      element.querySelector('a')?.textContent?.trim() ||
+                                      `Document ${documents.length + 1}`;
+
+                        console.log('Found link:', link, 'fileName:', fileName);
+
+                        if (link) {
+                            if (link.endsWith('.pdf') || link.includes('pdf') || fileName.toLowerCase().includes('pdf')) {
+                                displayDocument(link, fileName, 'pdf');
+                            } else if (link.match(/\.(jpg|jpeg|png|gif|webp)$/i)) {
+                                displayDocument(link, fileName, 'image');
+                            } else {
+                                // Try to fetch content
+                                fetch(link)
+                                    .then(res => res.text())
+                                    .then(content => {
+                                        const type = link.endsWith('.html') ? 'html' : 'text';
+                                        displayDocument(content, fileName, type);
+                                    })
+                                    .catch(err => {
+                                        console.error('Error loading document:', err);
+                                        displayDocument('Error loading document content', fileName, 'text');
+                                    });
+                            }
+                        } else {
+                            // If no link, display the element's content
+                            const content = element.textContent || element.innerHTML;
+                            displayDocument(content, fileName, 'html');
+                        }
+                    });
+
+                    element.appendChild(viewerBtn);
+                });
+            } catch (error) {
+                console.warn(`Error processing selector ${selector}:`, error);
+            }
+        });
+
+        console.log(`Added viewer buttons to ${foundElements} elements`);
+    }
+
+    // Attach click handlers to documents
+    function attachDocumentHandlers() {
+        document.addEventListener('click', (e) => {
+            const target = e.target;
+
+            // Don't process clicks on viewer buttons
+            if (target.classList.contains('viewer-button')) {
+                return;
+            }
+
+            console.log('Click detected on:', target.tagName, target.className, target);
+
+            // Enhanced detection for Chainlit file elements
+            const fileSelectors = [
+                '[data-testid*="element"]',
+                '[data-testid*="file"]',
+                '[data-testid*="pdf"]',
+                '.cl-file',
+                '.cl-pdf',
+                '[class*="file"]',
+                '[class*="pdf"]',
+                'a[href$=".pdf"]',
+                'a[download]'
+            ];
+
+            let fileElement = null;
+            for (const selector of fileSelectors) {
+                fileElement = target.closest(selector);
+                if (fileElement && !fileElement.closest('#document-viewer')) {
+                    break;
+                }
+            }
+
+            if (fileElement) {
+                console.log('File element detected:', fileElement);
+                e.preventDefault();
+                e.stopPropagation();
+
+                // Try to find the download link within the element
+                const downloadLink = fileElement.href ||
+                                   fileElement.querySelector('a[href]')?.href ||
+                                   fileElement.querySelector('[href]')?.getAttribute('href');
+
+                if (downloadLink) {
+                    const fileName = fileElement.textContent ||
+                                   fileElement.querySelector('[title]')?.title ||
+                                   fileElement.getAttribute('title') ||
+                                   'Document ' + (documents.length + 1);
+
+                    console.log('Opening document:', fileName, downloadLink);
+
+                    if (downloadLink.endsWith('.pdf')) {
+                        displayDocument(downloadLink, fileName, 'pdf');
+                    } else {
+                        // Try to fetch and display content
+                        fetch(downloadLink)
+                            .then(res => res.text())
+                            .then(content => {
+                                const type = downloadLink.endsWith('.html') ? 'html' : 'text';
+                                displayDocument(content, fileName, type);
+                            })
+                            .catch(err => {
+                                console.error('Error loading document:', err);
+                                displayDocument('Error loading document content', fileName, 'text');
+                            });
+                    }
+                }
+                return;
+            }
+
+            // Check for images
+            if (target.tagName === 'IMG' && target.src && !target.closest('#document-viewer')) {
+                e.preventDefault();
+                e.stopPropagation();
+                const title = target.alt || 'Image ' + (documents.length + 1);
+                displayDocument(target.src, title, 'image');
+                return;
+            }
+
+            // Check for code blocks
+            const codeBlock = target.closest('pre');
+            if (codeBlock && !codeBlock.closest('#document-viewer')) {
+                e.preventDefault();
+                e.stopPropagation();
+                const content = codeBlock.textContent;
+                const title = 'Code Block ' + (documents.length + 1);
+                displayDocument(content, title, 'code');
+                return;
+            }
+        }, true);
+    }
+
+    // Periodically scan for new file elements and add viewer buttons
+    function scanForNewElements() {
+        addViewerButtons();
+    }
+
+    // Initialize when DOM is ready
+    function initialize() {
+        console.log('Initializing Chainlit Split Screen Document Viewer');
+
+        // Add a global helper function to manually open documents
+        window.openInDocumentViewer = function(url, title, type = 'pdf') {
+            console.log('Manual document viewer open called:', url, title, type);
+            displayDocument(url, title, type);
+        };
+
+        // Create viewer but keep it hidden
+        documentViewer = createDocumentViewer();
+        document.body.appendChild(documentViewer);
+
+        // Attach handlers
+        attachDocumentHandlers();
+
+        // Add initial viewer buttons
+        addViewerButtons();
+
+        // Scan for new elements periodically (more frequently for better responsiveness)
+        setInterval(scanForNewElements, 1000);
+
+        // Also scan when new messages are added
+        const observer = new MutationObserver((mutations) => {
+            let shouldScan = false;
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node.nodeType === Node.ELEMENT_NODE) {
+                            // Check if new element contains file-like content
+                            if (node.querySelector && (
+                                node.querySelector('a[download]') ||
+                                node.querySelector('[class*="file"]') ||
+                                node.querySelector('[data-testid*="file"]') ||
+                                node.textContent?.toLowerCase().includes('pdf')
+                            )) {
+                                shouldScan = true;
+                            }
+                        }
+                    });
+                }
+            });
+            if (shouldScan) {
+                console.log('New content detected, scanning for file elements...');
+                setTimeout(addViewerButtons, 500); // Small delay to let DOM settle
+            }
+        });
+
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+
+        // Add mobile toggle button if needed
+        if (window.innerWidth <= 768) {
+            const toggleBtn = document.createElement('button');
+            toggleBtn.className = 'mobile-doc-toggle';
+            toggleBtn.innerHTML = '📄';
+            toggleBtn.style.display = viewerActive ? 'flex' : 'none';
+            toggleBtn.addEventListener('click', () => {
+                if (viewerActive) {
+                    hideDocumentViewer();
+                    toggleBtn.style.display = 'none';
+                } else {
+                    showDocumentViewer();
+                }
+            });
+            document.body.appendChild(toggleBtn);
+        }
+
+        console.log('Document Viewer initialized (hidden by default)');
+    }
+
+    // Wait for DOM to be ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initialize);
+    } else {
+        // Delay initialization to ensure Chainlit is fully loaded
+        setTimeout(initialize, 1000);
+
+        // Additional initialization after a longer delay
+        setTimeout(() => {
+            console.log('Additional document viewer initialization...');
+            addViewerButtons();
+
+            // Force scan every few seconds in case elements are missed
+            setInterval(() => {
+                console.log('Force scanning for new elements...');
+                addViewerButtons();
+            }, 3000);
+        }, 3000);
+    }
+
+    // Export functions for external use
+    window.ChainlitDocumentViewer = {
+        displayDocument,
+        showDocumentViewer,
+        hideDocumentViewer,
+        addViewerButtons,
+        openInDocumentViewer: function(url, title, type = 'pdf') {
+            displayDocument(url, title, type);
+        }
+    };
+})();